/* =========================================================
   modern.css — Minimal modern redesign for TLBB ID portal
   Override-only stylesheet. Loaded AFTER material-dashboards.css
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --bg: #f5f5f4;
  --bg-elev: #fafaf9;
  --bg-sunk: #efefee;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  /* table-specific tones: row đậm, hover nhạt */
  --row-bg: #d6d3d1;
  --row-bg-alt: #c8c5c1;
  --row-hover: #ebe8e5;
  --text: #18181b;
  --text-muted: #71717a;
  --text-soft: #a1a1aa;
  --primary: #18181b;
  --primary-fg: #ffffff;
  --accent: #6366f1;
  --accent-soft: #eef2ff;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 40px -12px rgba(0,0,0,.18);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090b;
    --bg-elev: #18181b;
    --bg-sunk: #27272a;
    --border: #27272a;
    --border-strong: #3f3f46;
    --row-bg: #2a2a2e;
    --row-bg-alt: #232327;
    --row-hover: #3a3a3f;
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --text-soft: #71717a;
    --primary: #fafafa;
    --primary-fg: #18181b;
    --accent: #818cf8;
    --accent-soft: #1e1b4b;
  }
}

/* ---------- 2. Base ---------- */
body, .off-canvas-sidebar {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}
* { box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,.card-title { font-family: var(--font-sans) !important; color: var(--text) !important; letter-spacing: -.02em; font-weight: 600 !important; }
a { color: var(--accent); transition: color var(--transition); }
a:hover { color: var(--text); text-decoration: none; }
hr { border-color: var(--border); }

/* ---------- 3. Auth pages — full-page hero ---------- */
.wrapper-full-page .page-header.login-page,
.wrapper-full-page .page-header.register-page {
  background: var(--bg) !important;
  background-image: none !important;
  min-height: 100vh;
  position: relative;
  padding: 80px 0 40px;
}
.wrapper-full-page .page-header.login-page::before,
.wrapper-full-page .page-header.register-page::before {
  display: none !important;
}
.wrapper-full-page .page-header::after {
  display: none !important;
}
.wrapper-full-page .page-header > .container,
.wrapper-full-page .page-header > .container-fluid {
  position: relative;
  z-index: 2;
}
/* subtle grid background */
.wrapper-full-page .page-header.login-page,
.wrapper-full-page .page-header.register-page {
  background-image:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.08), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(99,102,241,.06), transparent 40%) !important;
  background-size: cover !important;
}

/* ---------- 4. Top navbar (auth pages) ---------- */
.navbar.navbar-transparent.navbar-absolute {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
  padding: 12px 24px !important;
}
@media (prefers-color-scheme: dark) {
  .navbar.navbar-transparent.navbar-absolute { background: rgba(9,9,11,.72) !important; }
}
.navbar .navbar-nav .nav-link {
  color: var(--text-muted) !important;
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--radius-sm);
  padding: 8px 14px !important;
  margin: 0 2px;
  transition: all var(--transition);
  text-transform: none !important;
}
.navbar .navbar-nav .nav-link:hover { color: var(--text) !important; background: var(--bg-sunk); }
.navbar .navbar-nav .nav-item.active .nav-link { color: var(--text) !important; background: var(--bg-sunk); }
.navbar .navbar-nav .nav-link i.material-icons { font-size: 18px !important; vertical-align: -4px; margin-right: 4px; }

/* ---------- 5. Cards ---------- */
.card,
.card.card-hidden {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  margin-top: 0 !important;
  overflow: hidden;
}
/* Auth cards: keep border-radius but allow content to breathe (no clipping) */
.card.card-login,
.card.card-signup {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  margin-top: 0 !important;
  overflow: visible;
}
.card-signup { padding: 8px; }
.card .card-header,
.card .card-header-info,
.card .card-header-primary,
.card .card-header-rose,
.card .card-header-warning,
.card .card-header-success,
.card .card-header-danger {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 20px 24px !important;
}
.card .card-header h4,
.card .card-header .card-title { color: var(--text) !important; font-size: 18px !important; font-weight: 600 !important; margin: 0 !important; }
.card .card-header small { color: var(--text-muted); font-size: 13px; }
.card .card-body { padding: 24px !important; }
.card .card-footer { background: transparent !important; border-top: 1px solid var(--border); padding: 16px 24px !important; }
.card.card-hidden { opacity: 1 !important; transform: none !important; }

/* center auth card title */
.card-signup > .card-title {
  background: transparent !important;
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 24px 0 8px !important;
  text-shadow: none !important;
}
.card-login .card-header.card-header-info { padding: 28px 24px 16px !important; }
.card-login .card-header h4.card-title { font-size: 22px !important; line-height: 1.3 !important; }

/* ---------- 6. Forms / Inputs ---------- */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  background: var(--bg-elev) !important;
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  height: 42px;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: none !important;
}
.form-control:focus,
input.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}
.form-control::placeholder { color: var(--text-soft); }
.bmd-form-group { padding-top: 0 !important; margin-bottom: 16px; }
/* Floating labels: only restyle direct children of .bmd-form-group (NOT inside .input-group) */
.bmd-form-group > .bmd-label-floating,
.bmd-form-group > label.bmd-label-floating {
  color: var(--text-muted) !important;
  font-size: 13px;
  font-weight: 500;
  position: static !important;
  transform: none !important;
  margin-bottom: 6px !important;
  display: block;
}
/* Labels inside input-groups stay absolute but get readable color */
.input-group .bmd-label-floating,
.input-group label.bmd-label-floating,
.input-group .label .bmd-label-floating,
.input-group .label label.bmd-label-floating {
  color: var(--text-muted) !important;
}
.col-form-label { color: var(--text-muted) !important; font-size: 13px; font-weight: 500; }

/* input groups -> single rounded box */
.input-group {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
  margin-bottom: 14px;
}
.input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input-group .input-group-prepend,
.input-group .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--text-soft) !important;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
}
.input-group .input-group-text i.material-icons { font-size: 18px !important; color: var(--text-soft); }
.input-group .form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 40px;
  padding: 8px 12px !important;
}
.input-group .form-control:focus { box-shadow: none !important; }

/* Validation feedback */
.has-success .input-group { border-color: var(--success); }
.has-danger .input-group { border-color: var(--danger); }
.form-control-feedback { color: var(--text-soft); padding: 0 12px; display: flex; align-items: center; }
.has-success .form-control-feedback i { color: var(--success); }
.has-danger .form-control-feedback i { color: var(--danger); }

/* Checkbox / toggles */
.form-check-label { color: var(--text-muted); font-size: 13px; }
.form-check-label a { color: var(--accent); }
.togglebutton label { color: var(--text-muted); font-size: 14px; }

/* Selectpicker */
.bootstrap-select > .dropdown-toggle.btn-default,
.bootstrap-select > .dropdown-toggle {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  height: 42px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
.bootstrap-select .dropdown-menu {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.bootstrap-select .dropdown-menu li a { border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); }
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a { background: var(--bg-sunk); color: var(--text); }

/* ---------- 7. Buttons ---------- */
.btn,
.btn-default,
.btn-primary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger,
.btn-rose {
  border-radius: var(--radius) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: all var(--transition) !important;
  border: 1px solid transparent !important;
}
.btn-primary, .btn-info, .btn-rose {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
}
.btn-primary:hover, .btn-info:hover, .btn-rose:hover {
  background: var(--text) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow) !important;
}
.btn-default {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
.btn-default:hover { background: var(--bg-sunk) !important; }
.btn-warning {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
.btn-warning:hover { background: var(--bg-sunk) !important; }
.btn-danger { background: var(--danger) !important; color: #fff !important; }
.btn-success { background: var(--success) !important; color: #fff !important; }
.btn-twitter { background: var(--primary) !important; color: var(--primary-fg) !important; }

/* "Blobby" CTA button → minimal pill */
.blobby-button {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-radius: var(--radius) !important;
  padding: 12px 22px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  transition: all var(--transition) !important;
}
.blobby-button:hover {
  background: var(--text) !important;
  color: var(--primary-fg) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.blobby-button:before { display: none !important; }
.blobby-button .blobs, .blobby-button .blob, .blobby-button .inner, .blobby-button > svg { display: none !important; }
.blobby-button i.material-icons { font-size: 18px !important; }
.blobby-button[disabled] { opacity: .5; cursor: not-allowed; }

/* card-footer center button */
.card-footer.justify-content-center { justify-content: center; }

/* ---------- 8. Sidebar (logged-in dashboard) ---------- */
.wrapper { background: var(--bg) !important; }
.sidebar,
.sidebar[data-color],
.sidebar[data-background-color] {
  background: var(--bg-elev) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.sidebar:after,
.sidebar:before,
.sidebar .sidebar-background:after,
.sidebar .sidebar-background { display: none !important; }
.sidebar .logo {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 18px 20px !important;
}
.sidebar .logo:after { display: none !important; }
.sidebar .logo .simple-text { color: var(--text) !important; font-weight: 600 !important; font-size: 15px !important; text-transform: none !important; letter-spacing: -.01em; }
.sidebar .user { border-bottom: 1px solid var(--border) !important; padding-bottom: 12px; }
.sidebar .user:after { display: none !important; }
.sidebar .user .photo {
  width: 40px; height: 40px;
  border: 2px solid var(--border);
  background: var(--bg-sunk);
}
.sidebar .user .username { color: var(--text) !important; font-weight: 500 !important; font-size: 14px !important; text-transform: none !important; }
.sidebar .nav .nav-item .nav-link {
  color: var(--text-muted) !important;
  border-radius: var(--radius) !important;
  margin: 2px 12px !important;
  padding: 10px 14px !important;
  font-weight: 500;
  font-size: 14px;
  text-transform: none !important;
  transition: all var(--transition);
}
.sidebar .nav .nav-item .nav-link:hover {
  background: var(--bg-sunk) !important;
  color: var(--text) !important;
}
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.sidebar .nav .nav-item.active > .nav-link:before { display: none !important; }
.sidebar .nav .nav-item .nav-link i.material-icons {
  font-size: 18px !important;
  color: inherit !important;
  margin-right: 12px;
}
.sidebar .nav .nav-item .nav-link p { font-size: 14px !important; }
.sidebar .sidebar-wrapper { background: transparent !important; }

/* main-panel offset */
.main-panel { background: var(--bg) !important; }
.main-panel > .navbar.navbar-transparent {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
@media (prefers-color-scheme: dark) {
  .main-panel > .navbar.navbar-transparent { background: rgba(9,9,11,.72) !important; }
}
.main-panel .navbar .navbar-brand { color: var(--text) !important; font-weight: 600 !important; font-size: 16px !important; }
.navbar .navbar-nav .nav-link i.material-icons + .notification {
  background: var(--danger);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
}
.btn.btn-just-icon.btn-fab {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

/* ---------- 9. Footer ---------- */
.footer {
  background: transparent !important;
  border-top: 1px solid var(--border);
  padding: 20px 0 !important;
  color: var(--text-muted) !important;
  font-size: 13px;
}
.footer ul li a { color: var(--text-muted) !important; padding: 4px 12px !important; }
.footer ul li a:hover { color: var(--text) !important; }
.footer .copyright a { color: var(--text) !important; font-weight: 500; }
.footer .copyright i.material-icons { font-size: 14px; color: var(--danger); vertical-align: -2px; }

/* ---------- 10. Tables ---------- */
.table {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-size: 14px;
}
.table thead th {
  background: var(--bg-sunk) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none !important;
  padding: 10px 12px !important;
}
/* Row colors are applied DIRECTLY on td/th to beat Material Dashboard's
   `.table-striped > tbody > tr:nth-of-type(odd) > td` rule. */
.table tbody tr > td,
.table tbody tr > th,
.table tbody tr.odd > td,
.table tbody tr.even > td,
.table-striped > tbody > tr > td,
.table-striped > tbody > tr > th,
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th {
  background-color: var(--row-bg) !important;
  color: var(--text) !important;
  transition: background-color var(--transition);
}
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--row-bg-alt) !important;
}
.table tbody tr:hover > td,
.table tbody tr:hover > th,
.table-striped > tbody > tr:hover > td,
.table-striped > tbody > tr:hover > th,
.table-striped > tbody > tr:nth-of-type(odd):hover > td,
.table-striped > tbody > tr:nth-of-type(odd):hover > th,
.table-striped > tbody > tr:nth-of-type(even):hover > td,
.table-striped > tbody > tr:nth-of-type(even):hover > th {
  background-color: var(--row-hover) !important;
}
.table tbody tr { background: transparent !important; }
.table td, .table th,
.table-bordered td, .table-bordered th {
  border-color: var(--border) !important;
  padding: 10px 12px !important;
  vertical-align: middle;
}
.table-bordered { border: 1px solid var(--border) !important; border-radius: var(--radius); overflow: hidden; }
.table tfoot th { background: var(--bg-sunk) !important; border-top: 1px solid var(--border) !important; padding: 8px 10px !important; }
.table tfoot th input {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  width: 100%;
  height: 32px;
  outline: none;
}
.table tfoot th input::placeholder { color: var(--text-soft); }
.table tfoot th input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  height: 36px !important;
  color: var(--text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  margin: 0 2px;
  color: var(--text-muted) !important;
  background: var(--bg-elev) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-color: var(--primary) !important;
}
.dataTables_info { color: var(--text-muted) !important; font-size: 13px; }

/* ---------- 11. Tabs / Pills ---------- */
.nav-pills .nav-link {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius) !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  margin-bottom: 4px;
  box-shadow: none !important;
  transition: all var(--transition);
}
.nav-pills .nav-link:hover { background: var(--bg-sunk) !important; color: var(--text) !important; }
.nav-pills .nav-link.active,
.nav-pills .nav-item .nav-link.active.show {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.nav-pills .nav-link i.material-icons { font-size: 18px !important; vertical-align: -4px; margin-right: 6px; }

/* ---------- 12. Alerts ---------- */
.alert {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-sunk) !important;
  color: var(--text) !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
}
.alert-danger { border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.06) !important; color: var(--danger) !important; }
.alert-warning { border-color: rgba(217,119,6,.25); background: rgba(217,119,6,.06) !important; color: var(--warning) !important; }
.alert-success { border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.06) !important; color: var(--success) !important; }
.alert .material-icons { font-size: 18px !important; vertical-align: -4px; }
.alert .badge { background: var(--bg-elev); color: var(--text); padding: 4px 8px; border-radius: var(--radius-sm); margin-left: 4px; }

/* ---------- 13. Info blocks (register page) ---------- */
.info.info-horizontal {
  padding: 12px 0 !important;
  margin: 0 !important;
}
.info.info-horizontal .icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  display: flex; align-items: center; justify-content: center;
  border: none !important;
  float: left;
  margin-right: 14px;
}
.info.info-horizontal .icon i.material-icons { color: var(--accent) !important; font-size: 18px !important; }
.info-title { font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 0 4px !important; }
.description { color: var(--text-muted) !important; font-size: 13px !important; line-height: 1.5; margin: 0 !important; }

/* ---------- 14. Recovery email pill (forgot page) ---------- */
.rounded-email-container { gap: 0; }
.rounded-email-container > .email-input {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}
.rounded-email-container > .email-input::placeholder { color: var(--text-soft); }
.rounded-email-container > .email-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  transform: none !important;
}
.rounded-email-container > .email-button {
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  width: 48px; height: auto;
  margin-left: -1px !important;
  transition: all var(--transition);
}
.rounded-email-container > .email-button:hover {
  background: var(--text) !important;
  border-color: var(--text) !important;
}
.rounded-email-container > .email-button > svg { fill: var(--primary-fg); width: 16px; height: 16px; }
.rounded-email-container > .email-button:hover > svg { fill: var(--primary-fg); transform: rotate(0) scale(1.1); }

/* ---------- 15. Fixed plugin (theme switcher) — hide entirely ---------- */
.fixed-plugin { display: none !important; }

/* ---------- 16. Notifications / sidebar dropdown caret ---------- */
.dropdown-menu {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-menu .dropdown-item {
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}
.dropdown-menu .dropdown-item:hover { background: var(--bg-sunk) !important; color: var(--text) !important; }
.dropdown-divider { border-color: var(--border) !important; }

/* ---------- 17. SweetAlert popups ---------- */
.swal2-container { z-index: 99999; }
/* Hammer: beat JS-injected "background: #fff" on the popup itself */
.swal2-popup,
.swal2-container .swal2-popup,
body .swal2-popup {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
  padding: 24px !important;
}
.swal2-popup.swal2-toast,
.swal2-container .swal2-popup.swal2-toast { background: var(--bg-elev) !important; }
/* Override JS-injected backgrounds on every child */
.swal2-popup *,
.swal2-container .swal2-popup * {
  background-color: transparent;
}
.swal2-popup .swal2-styled,
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-file,
.swal2-popup .swal2-select,
.swal2-popup .swal2-radio,
.swal2-popup .swal2-checkbox,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-validation-message {
  background-color: revert-layer;
}
/* restore backgrounds that actually need a color */
.swal2-popup .swal2-styled.swal2-confirm,
body .swal2-popup .swal2-styled.swal2-confirm {
  background: var(--primary) !important;
  background-color: var(--primary) !important;
  color: var(--primary-fg) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: none !important;
  box-shadow: none !important;
  padding: 10px 18px !important;
}
.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .swal2-styled.swal2-deny,
body .swal2-popup .swal2-styled.swal2-cancel,
body .swal2-popup .swal2-styled.swal2-deny {
  background: var(--bg-elev) !important;
  background-color: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-file,
.swal2-popup .swal2-select {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.swal2-title { color: var(--text) !important; font-weight: 600 !important; font-size: 20px !important; }
.swal2-html-container,
.swal2-content { color: var(--text-muted) !important; font-size: 14px !important; }
.swal2-close { color: var(--text-muted) !important; }
.swal2-close:hover { color: var(--text) !important; }
.swal2-actions { gap: 8px; }
.swal2-loader { border-color: var(--accent) transparent var(--accent) transparent !important; }
/* Validation message / timer bars that JS creates with hardcoded colors */
.swal2-validation-message { background: var(--bg-sunk) !important; color: var(--text) !important; }
.swal2-timer-progress-bar { background: var(--accent) !important; }
/* Toast variant */
.swal2-toast .swal2-title { color: var(--text) !important; }

/* Generic modals (Bootstrap .modal) */
.modal-content,
.modal-dialog .modal-content,
div.modal-content,
.modal.fade .modal-dialog .modal-content {
  background: var(--bg-elev) !important;
  background-color: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
/* Kill material-dashboard's gradient/color headers inside modals */
.modal-header,
.modal-content .modal-header,
.modal-content .card-header,
.modal-content .card-header[class*="header-"],
.modal-content .card-header-info,
.modal-content .card-header-primary,
.modal-content .card-header-rose,
.modal-content .card-header-warning,
.modal-content .card-header-success,
.modal-content .card-header-danger {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
.modal-footer,
.modal-content .modal-footer {
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
  background-image: none !important;
}
.modal-title { color: var(--text) !important; font-weight: 600 !important; }
.modal-backdrop.show { opacity: .6; background: #000; }
.modal-header .close,
.modal-content .close { color: var(--text-muted) !important; opacity: 1 !important; text-shadow: none !important; }
.modal-header .close:hover,
.modal-content .close:hover { color: var(--text) !important; }
/* Modal body – purge any lingering white from material-dashboard */
.modal-body,
.modal-content .modal-body {
  background: transparent !important;
  color: var(--text) !important;
}
/* Modal tables (history popup) – ensure table and DataTables wrapper adapt */
.modal-body .table,
.modal-body .table-striped,
.modal-body .dataTables_wrapper {
  background: transparent !important;
}
.modal-body .dataTables_wrapper .dataTables_length label,
.modal-body .dataTables_wrapper .dataTables_filter label,
.modal-body .dataTables_wrapper .dataTables_info {
  color: var(--text-muted) !important;
}
.modal-body .dataTables_wrapper .dataTables_length select,
.modal-body .dataTables_wrapper .dataTables_filter input {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
}

/* Pagination buttons inside any context (DataTables in modal, etc.) */
.paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--bg-elev) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-sunk) !important;
  color: var(--text) !important;
}
.paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-color: var(--primary) !important;
}
/* Modal backdrop — ensure dim overlay */
.modal-backdrop { background-color: #000 !important; }
.modal-backdrop.fade.show { opacity: .6 !important; }

/* ---------- 18. Misc cleanups ---------- */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--accent) !important; }
.text-primary { color: var(--text) !important; }
.text-muted { color: var(--text-muted) !important; }

/* responsive padding */
@media (max-width: 768px) {
  .card .card-header, .card .card-body, .card .card-footer { padding: 16px !important; }
  .wrapper-full-page .page-header { padding-top: 100px; }
}