/* Glassmorphism override layer — loaded AFTER backend.min.css.
   Accent-tint glass, blue accent, no gradients. Light on :root, dark on body.dark. */

:root {
  --bg: #e8edf4;
  --surface: rgba(255,255,255,.55);
  --surface-strong: rgba(255,255,255,.72);
  --surface-solid: #ffffff;               /* backdrop-filter fallback */
  --border: rgba(37,99,235,.22);
  --blur: 14px;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(15,23,42,.08);
  --text: #0f172a;
  --muted: #64748b;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-weak: rgba(37,99,235,.12);
  --accent-contrast: #ffffff;
  --pill-bg: rgba(5,150,105,.14);
  --pill-text: #047857;
  --input-bg: rgba(255,255,255,.60);
  --row-border: rgba(148,163,184,.20);
  --zebra: rgba(15,23,42,.03);
  --thead-bg: #1d4ed8;
  --thead-text: #ffffff;
}

body.dark {
  --bg: #0f172a;
  --surface: rgba(37,99,235,.18);
  --surface-strong: rgba(37,99,235,.26);
  --surface-solid: #16233b;
  --border: rgba(96,165,250,.55);
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --text: #eef2ff;
  --muted: #94a3b8;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-weak: rgba(96,165,250,.28);
  --accent-contrast: #ffffff;
  --pill-bg: rgba(52,211,153,.16);
  --pill-text: #6ee7b7;
  --input-bg: rgba(37,99,235,.12);
  --row-border: rgba(148,163,184,.14);
  --zebra: rgba(255,255,255,.04);
  --thead-bg: #1b3a7a;
  --thead-text: #eaf1ff;
}

/* Page background + base text */
body.sidebar-bg-box { background: var(--bg) !important; color: var(--text); }
body.sidebar-bg-box .content-page { background: transparent !important; }

/* Frosted glass surfaces */
.card,
.iq-card,
.modal-content,
.iq-sidebar.sidebar-bg-box,
.iq-top-navbar .iq-navbar-custom,
.iq-footer {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .iq-card, .modal-content,
  .iq-sidebar.sidebar-bg-box, .iq-top-navbar .iq-navbar-custom, .iq-footer {
    background: var(--surface-solid) !important;
  }
}

.card-header, .card-footer {
  background: transparent !important;
  border-color: var(--border) !important;
}
.card-title, .header-title h4, .navbar-breadcrumb h4 { color: var(--text) !important; }

/* Sidebar chrome */
.iq-sidebar.sidebar-bg-box { border-radius: 0 var(--radius) var(--radius) 0 !important; }
.iq-sidebar .iq-fitness-info.bg-dark { background: transparent !important; }
/* The logo.png asset is a solid-white wordmark built for a dark bar. The glass
   skin makes that bar translucent, so on the light theme the white logo vanishes
   into the light surface. Recolor it to near-black for light; leave white on dark. */
.iq-sidebar .header-logo img,
.iq-top-navbar .header-logo img { filter: brightness(0); }
body.dark .iq-sidebar .header-logo img,
body.dark .iq-top-navbar .header-logo img { filter: none; }

/* Nav items: inset pills with vertical breathing room so each hover/active state
   reads as one distinct row instead of overlapping translucent blocks. */
.iq-sidebar-menu .iq-menu li > a {
  color: var(--text) !important;
  border-radius: 10px;
  margin: 2px 12px;
}
.iq-sidebar-menu .iq-menu li > a:hover,
.iq-sidebar-menu .iq-menu li.active > a { background: var(--accent-weak) !important; color: var(--accent) !important; }
/* An expanded parent shows its children right below it — filling it too paints a
   second block behind the submenu pills (the "stacked" look). Keep accent text
   only, unless it's actually being hovered. */
.iq-sidebar-menu .iq-menu li.active > a[aria-expanded="true"] { background: transparent !important; }
.iq-sidebar-menu .iq-menu li.active > a[aria-expanded="true"]:hover { background: var(--accent-weak) !important; }
/* Submenu items: single accent-weak pill on hover/active, no bg otherwise. */
.iq-sidebar-menu .iq-menu li .iq-submenu li > a { color: var(--muted) !important; }
.iq-sidebar-menu .iq-menu li .iq-submenu li > a:hover,
.iq-sidebar-menu .iq-menu li .iq-submenu li.active > a { background: var(--accent-weak) !important; color: var(--accent) !important; }
/* Drop the theme's separate blue accent bar; the pill is the one active marker. */
.iq-sidebar .iq-sidebar-menu .iq-menu .iq-submenu li:before { display: none !important; }

/* Topbar */
.iq-top-navbar { background: transparent !important; box-shadow: none !important; }

/* Tables — uniform "data table" style: filled accent header, zebra rows, hover.
   Applies to every table (.table / .data-table / DataTables) regardless of the
   theme's per-page table variant classes. */
.table, table.data-table, table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; margin-bottom: 0; }
.table thead th, table.dataTable thead th,
.thead-dark th, .table-dark thead th, thead.table-dark th {
  background: transparent !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  font-size: .72rem; font-weight: 600; letter-spacing: .07em;
  padding: 13px 18px !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: 10px; }
.table thead th:last-child { border-top-right-radius: 10px; }
.table tbody td, table.dataTable tbody td {
  padding: 13px 18px !important;
  color: var(--text) !important;
  border: none !important;
  border-bottom: 1px solid var(--row-border) !important;
  vertical-align: middle;
}
.table tbody tr, table.dataTable tbody tr { transition: background .15s ease; }
.table tbody tr:nth-child(even), table.dataTable tbody tr:nth-child(even) { background: var(--zebra) !important; }
.table tbody tr:hover, table.dataTable tbody tr:hover { background: var(--accent-weak) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }
/* neutralise theme variants so all tables look identical */
.table-bordered, .table-bordered td, .table-bordered th { border: none !important; border-bottom: 1px solid var(--row-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }

/* DataTables runtime chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { background: var(--input-bg) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 9px; padding: 6px 12px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { color: var(--muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text) !important; border: none !important; border-radius: 8px; margin: 0 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--accent-weak) !important; color: var(--accent) !important; border: none !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--accent) !important; color: var(--accent-contrast) !important; border: none !important; }
.dt-buttons .btn { background: var(--accent) !important; color: var(--accent-contrast) !important; border: none !important; border-radius: 10px; }

/* Forms */
.form-control, .custom-select {
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.form-control::placeholder { color: var(--muted) !important; }
.form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-weak) !important; }
label, .col-form-label { color: var(--text); }

/* Buttons (solid accent, no gradient) */
.btn-primary, .btn-success {
  background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--accent-contrast) !important; border-radius: 10px;
}
.btn-primary:hover, .btn-success:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-outline-primary { color: var(--accent) !important; border: 1px solid var(--accent) !important; border-radius: 10px; }
.btn-outline-primary:hover { background: var(--accent) !important; color: var(--accent-contrast) !important; }
.btn { border-radius: 10px; }

/* Status pills / badges */
.badge { border-radius: 999px; }
.bg-success-light { background: var(--pill-bg) !important; color: var(--pill-text) !important; }

/* Footer + loader */
.iq-footer { color: var(--muted) !important; }
.iq-footer a { color: var(--accent) !important; }
.loadindanimation { color: var(--accent) !important; }
.loadindanimation h4 { color: var(--accent) !important; }

/* Modals (Bootstrap) — glass panel with accent header, matching the tables */
.modal-backdrop.show { background: rgba(8,15,30,.55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-content { color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-header { background: var(--surface-strong) !important; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.modal-title { color: var(--text) !important; font-weight: 600; }
.modal-header .close { color: var(--text) !important; opacity: .55; text-shadow: none; }
.modal-header .close:hover { opacity: 1; color: var(--accent) !important; }
.modal-body { color: var(--text); }

/* SweetAlert popups — same glass treatment */
.swal2-popup { background: var(--surface-solid) !important; color: var(--text) !important; border: 1px solid var(--border); border-radius: var(--radius) !important; }
.swal2-title, .swal2-html-container, .swal2-content { color: var(--text) !important; }
.swal2-styled.swal2-confirm { background: var(--accent) !important; box-shadow: none !important; border-radius: 10px !important; }
.swal2-styled.swal2-cancel { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 10px !important; }

/* Button variants — cohesive colours + consistent radius (danger stays clearly red for destructive actions) */
.btn-danger { background: #dc2626 !important; border: 1px solid #dc2626 !important; color: #fff !important; }
.btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
.btn-outline-danger { color: #dc2626 !important; border: 1px solid #dc2626 !important; background: transparent !important; }
.btn-outline-danger:hover { background: #dc2626 !important; color: #fff !important; }
.btn-secondary { background: var(--surface-strong) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.btn-secondary:hover { background: var(--accent-weak) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-info { background: #0284c7 !important; border-color: #0284c7 !important; color: #fff !important; }
.btn-info:hover { background: #0369a1 !important; border-color: #0369a1 !important; }
.btn-warning { background: #f59e0b !important; border-color: #f59e0b !important; color: #111827 !important; }
.btn-warning:hover { background: #d97706 !important; border-color: #d97706 !important; }
.btn-light { background: var(--surface-strong) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.btn:disabled, .btn.disabled { opacity: .55; box-shadow: none !important; }

/* Badges */
.badge-primary { background: var(--accent) !important; color: #fff !important; }
.badge-success { background: var(--pill-bg) !important; color: var(--pill-text) !important; }
.badge-danger { background: rgba(220,38,38,.15) !important; color: #dc2626 !important; }
.badge-warning { background: rgba(245,158,11,.16) !important; color: #b45309 !important; }
.badge-secondary { background: var(--accent-weak) !important; color: var(--muted) !important; }

/* Alerts */
.alert { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.alert-success { border-color: rgba(5,150,105,.45); color: var(--pill-text); }
.alert-danger { border-color: rgba(220,38,38,.45); color: #dc2626; }

/* Dropdown menus (user menu, row actions) */
.dropdown-menu { background: var(--surface-solid) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; }
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background: var(--accent-weak) !important; color: var(--accent) !important; }

/* Avoid double framing when page markup nests .border/.shadow inside a glass card */
.card .card-body.border { border: none !important; }
.card .card-body.shadow { box-shadow: none !important; }