/* CardMerchant — member shell (dark slate theme) */
:root{
  --cm-primary:        #4c8eff;
  --cm-primary-hover:  #6ba0ff;
  --cm-primary-soft:   rgba(76,142,255,.14);
  --cm-bg:             #0d1117;
  --cm-surface-1:      #161b22;
  --cm-surface-2:      #1c2330;
  --cm-text:           #e6edf3;
  --cm-text-soft:      #c9d1d9;
  --cm-muted:          #8b949e;
  --cm-border:         #2a3142;
  --cm-border-soft:    #232a3a;
  --cm-radius:         10px;
  --cm-shadow:         0 1px 3px rgba(0,0,0,.4);
  --cm-shadow-lg:      0 8px 24px rgba(0,0,0,.45);
}

html, body{background: var(--cm-bg); color: var(--cm-text);}
body{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color-scheme: dark;}

a{color: var(--cm-primary-hover);}
a:hover{color: var(--cm-primary);}

/* Top nav */
.cm-topbar-mem{
  background: var(--cm-surface-1);
  border-bottom:1px solid var(--cm-border-soft);
  padding: 10px 22px;
  display:flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index: 10;
}
.cm-topbar-mem .brand{font-weight:700; font-size:18px; color:#fff;}
.cm-topbar-mem .nav-links{display:flex; gap: 4px;}
.cm-topbar-mem .nav-links a{
  color: var(--cm-text-soft); text-decoration:none; font-size:14px;
  padding: 8px 14px; border-radius: 6px;
}
.cm-topbar-mem .nav-links a:hover{background: rgba(255,255,255,.03); color:#fff;}
.cm-topbar-mem .nav-links a.active{background: var(--cm-primary-soft); color: var(--cm-primary-hover); font-weight: 600;}
.cm-topbar-mem .right{display:flex; align-items:center; gap: 14px;}
.cm-topbar-mem .right select{background: var(--cm-surface-2); color: var(--cm-text); border:1px solid var(--cm-border);}
.cm-topbar-mem .btn-link{color: var(--cm-text) !important;}
.cm-content-mem{max-width: 1280px; margin: 0 auto; padding: 22px;}

/* Cards / KPI */
.cm-card{background: var(--cm-surface-1); border:1px solid var(--cm-border-soft); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); padding: 18px; color: var(--cm-text);}
.cm-kpi{display:flex; flex-direction:column; gap:8px;}
.cm-kpi .label{font-size:12.5px; color: var(--cm-muted); text-transform: uppercase; letter-spacing:.06em;}
.cm-kpi .value{font-size:26px; font-weight:700; color:#fff;}
.cm-kpi .sub{font-size:12px; color: var(--cm-muted);}

/* Tables — override Bootstrap's --bs-table-* vars so rows match the dark surface */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--cm-text-soft);
  --bs-table-border-color: var(--cm-border-soft);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-striped-color: var(--cm-text-soft);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-hover-color: var(--cm-text);
  --bs-table-accent-bg: transparent;
  color: var(--cm-text-soft);
  border-color: var(--cm-border-soft);
}
.cm-table-wrap{background: var(--cm-surface-1); border:1px solid var(--cm-border-soft); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow:hidden;}
.cm-table-wrap .table{margin-bottom:0;}
.cm-table-wrap .table thead th{background: var(--cm-surface-2); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color: var(--cm-muted); font-weight:600; border-bottom:1px solid var(--cm-border-soft); border-top:none;}
.cm-table-wrap .table tbody td{vertical-align: middle; font-size:14px; border-color: var(--cm-border-soft); background: transparent;}
.cm-table-wrap .table tbody tr:hover td{background: rgba(255,255,255,.03);}
.cm-table-wrap .table tbody tr:last-child td{border-bottom:none;}
.cm-card .table thead th{background: var(--cm-surface-2); color: var(--cm-muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; border-color: var(--cm-border-soft);}
.cm-card .table tbody td{background: transparent; border-color: var(--cm-border-soft);}
.cm-filter-bar{padding:14px 16px; background: var(--cm-surface-2); border-bottom:1px solid var(--cm-border-soft); display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;}
.cm-filter-bar .filter-item label{display:block; font-size:11.5px; color: var(--cm-muted); margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em;}
.cm-pagination{padding:10px 16px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color: var(--cm-muted); border-top:1px solid var(--cm-border-soft);}

/* Status chips */
.chip{display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid transparent;}
.chip-Available{background: rgba(46,160,67,.16);  color:#7ee787; border-color: rgba(46,160,67,.30);}
.chip-Rented   {background: rgba(76,142,255,.16); color:#79c0ff; border-color: rgba(76,142,255,.30);}
.chip-Returned {background: rgba(210,153,34,.16); color:#e3b341; border-color: rgba(210,153,34,.30);}
.chip-Expired  {background: rgba(248,81,73,.16);  color:#ff7b72; border-color: rgba(248,81,73,.30);}

/* Bootstrap form overrides for dark */
.form-control, .form-select, .form-control:focus, .form-select:focus, textarea.form-control{
  background-color: var(--cm-surface-2);
  color: var(--cm-text);
  border-color: var(--cm-border);
}
.form-control:focus, .form-select:focus{
  border-color: var(--cm-primary);
  box-shadow: 0 0 0 0.18rem rgba(76,142,255,.18);
}
.form-control::placeholder{color: var(--cm-muted);}
.form-control[readonly], .form-control:disabled{background-color: rgba(255,255,255,.02); color: var(--cm-text-soft);}
.form-label{color: var(--cm-text-soft);}
.form-check-input{background-color: var(--cm-surface-2); border-color: var(--cm-border);}
.form-check-input:checked{background-color: var(--cm-primary); border-color: var(--cm-primary);}
.form-check-label{color: var(--cm-text-soft);}
input[type="date"], input[type="datetime-local"], input[type="time"]{color-scheme: dark;}

/* Buttons */
.btn-primary{background-color: var(--cm-primary); border-color: var(--cm-primary);}
.btn-primary:hover, .btn-primary:focus{background-color: var(--cm-primary-hover); border-color: var(--cm-primary-hover);}
.btn-outline-primary{color: var(--cm-primary); border-color: rgba(76,142,255,.50);}
.btn-outline-primary:hover{background-color: var(--cm-primary); border-color: var(--cm-primary); color:#fff;}
.btn-outline-secondary{color: var(--cm-text-soft); border-color: var(--cm-border);}
.btn-outline-secondary:hover{background-color: var(--cm-surface-2); border-color: var(--cm-border); color: var(--cm-text);}
.btn-light{background-color: var(--cm-surface-2); border-color: var(--cm-border); color: var(--cm-text-soft);}
.btn-light:hover{background-color:#232a3a; border-color: var(--cm-border); color: var(--cm-text);}
.btn-outline-danger{color:#ff7b72; border-color: rgba(248,81,73,.50);}
.btn-outline-danger:hover{background-color:#da3633; border-color:#da3633; color:#fff;}

/* Dropdowns */
.dropdown-menu{background-color: var(--cm-surface-1); border:1px solid var(--cm-border); box-shadow: var(--cm-shadow-lg);}
.dropdown-item{color: var(--cm-text-soft);}
.dropdown-item:hover, .dropdown-item:focus{background-color: var(--cm-surface-2); color: var(--cm-text);}
.dropdown-divider{border-top-color: var(--cm-border-soft);}

/* Modals */
.modal-content{background-color: var(--cm-surface-1); color: var(--cm-text); border:1px solid var(--cm-border); border-radius: var(--cm-radius);}
.modal-header, .modal-footer{border-color: var(--cm-border-soft);}

/* Form helpers */
.cm-form label.req::after{content:" *"; color:#ff7b72;}
.dynamic-backend-error{color:#ff7b72; font-size: 12.5px; margin-top: 3px;}
input.is-invalid, select.is-invalid, textarea.is-invalid{border-color: #ff7b72 !important;}

/* Helpers */
.text-muted-sm, .text-muted{color: var(--cm-muted) !important; font-size: 13px;}
.text-dark{color: var(--cm-text) !important;}
.btn-icon{padding:4px 8px; line-height:1;}
.section-title{font-weight:600; margin: 6px 0 14px; font-size:15px; color:#fff;}
hr{border-color: var(--cm-border-soft);}

/* Dashboard range bar */
.cm-range-bar .btn-outline-secondary{padding:5px 12px; font-size:12.5px;}
.cm-range-bar input[type="date"]{min-width:140px;}

/* SweetAlert2 dark tweak */
.swal2-popup{background: var(--cm-surface-1) !important; color: var(--cm-text) !important; border:1px solid var(--cm-border) !important;}
.swal2-title, .swal2-html-container{color: var(--cm-text) !important;}
.swal2-input, .swal2-textarea, .swal2-select{background: var(--cm-surface-2) !important; color: var(--cm-text) !important; border:1px solid var(--cm-border) !important;}
.swal2-confirm{background: var(--cm-primary) !important;}
.swal2-cancel{background:#30363d !important;}