/*
 * Site-wide "glow" theme: dark glassmorphic cards with a teal glow
 * accent, replacing the stock light Skydash theme. Loaded LAST in
 * header.php (after vendor.bundle.base.css, style.css, and Bootstrap
 * 5) so these overrides win the cascade without hunting every
 * selector's specificity - a handful of rules still need !important
 * because header.php loads both Bootstrap 4 (vendor.bundle.base.css)
 * and Bootstrap 5 at once and they fight each other on things like
 * .form-control and .table.
 *
 * Scope for now (per the user): the shared shell (sidebar/navbar/
 * content background) applies everywhere, immediately, just by this
 * file being included in header.php. The 6-7 pages built this session
 * (Dashboard, Banks, Student Profile, Supply Centers, Fee Management,
 * Advance Fee, the Todo panel) are fully restyled to match. Older
 * pages (Student, Exams, Attendance, Employees, ...) inherit the dark
 * shell but keep their existing light card/table content for now -
 * a deliberate follow-up, not an oversight.
 */

/*
 * Theme tokens - dark ("glow") is the default so existing markup needs
 * no attribute to render correctly (matches every page built while
 * this was the only theme). html[data-theme="light"] (set by the
 * navbar toggle in sidebar.php / assets/js/theme-toggle.js) redefines
 * the same custom properties to the ORIGINAL stock Skydash palette -
 * light mode isn't a separately designed theme, it's just these tokens
 * pointed back at what the app looked like before this session's
 * work. Every page built or restyled this session (Banks, Student
 * Profile, Supply Centers, Fee Management, Advance Fee, Admin
 * Dashboard, dashboard.php) defines its own local --xx-* variables by
 * referencing these shared ones (`var(--glow-text)` etc.) instead of
 * hardcoding hex values, specifically so the toggle reaches into every
 * file's own <style> block through one shared :root, no per-page JS
 * or class needed.
 */
:root {
  --glow-bg: #0A0E1A;
  --glow-panel: rgba(255,255,255,0.045);
  --glow-panel-border: rgba(255,255,255,0.08);
  --glow-border-soft: rgba(255,255,255,0.06);
  --glow-text: #F4F7FB;
  --glow-text-muted: rgba(228,234,245,0.55);
  --glow-text-faint: rgba(228,234,245,0.4);
  --glow-accent: #2DD4BF;
  --glow-accent-dark: #0B7A7C;
  --glow-danger: #FB7185;
  --glow-danger-bg: rgba(251,113,133,0.14);
  --glow-success-bg: rgba(45,212,191,0.14);
  --glow-navbar-bg: rgba(10,14,26,0.9);
  --glow-sidebar-bg: rgba(255,255,255,0.03);
  --glow-input-bg: rgba(255,255,255,0.05);
  --glow-input-bg-focus: rgba(255,255,255,0.07);
  --glow-solid-panel: #0D1220;
  --glow-hover-tint: rgba(255,255,255,0.05);
  --glow-blob-1: rgba(45,212,191,0.28);
  --glow-blob-2: rgba(124,108,246,0.22);
}

html[data-theme="light"] {
  --glow-bg: #F5F7FF;
  --glow-panel: #ffffff;
  --glow-panel-border: #e9e9ef;
  --glow-border-soft: #eef1f8;
  --glow-text: #16233D;
  --glow-text-muted: #6B7A99;
  --glow-text-faint: #8B96AD;
  --glow-accent: #0EA5A8;
  --glow-accent-dark: #0B7A7C;
  --glow-danger: #C4432A;
  --glow-danger-bg: #FBEAE6;
  --glow-success-bg: #E1F7EE;
  --glow-navbar-bg: #ffffff;
  --glow-sidebar-bg: #ffffff;
  --glow-input-bg: #ffffff;
  --glow-input-bg-focus: #ffffff;
  --glow-solid-panel: #ffffff;
  --glow-hover-tint: #F5F7FF;
  --glow-blob-1: transparent;
  --glow-blob-2: transparent;
}

/* ---------- page shell ---------- */

html, body {
  background: var(--glow-bg) !important;
  color: var(--glow-text);
}

.content-wrapper {
  position: relative;
  background: var(--glow-bg) !important;
  color: var(--glow-text);
  overflow-x: hidden;
}

/* ambient glow blobs behind every page's content */
.content-wrapper::before,
.content-wrapper::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.content-wrapper::before {
  top: -220px;
  left: 10%;
  background: radial-gradient(circle, var(--glow-blob-1) 0%, transparent 70%);
}
.content-wrapper::after {
  bottom: -260px;
  right: -80px;
  background: radial-gradient(circle, var(--glow-blob-2) 0%, transparent 70%);
}
/* :not(:has(.modal)) - a direct child that hosts a Bootstrap modal must
   stay position:static/z-index:auto, otherwise it becomes a stacking
   context that traps the modal's z-index locally, so the page-level
   .modal-backdrop (appended straight to <body>) paints above the modal
   itself and swallows every click. */
.content-wrapper > *:not(:has(.modal)) { position: relative; z-index: 1; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }

/* ---------- navbar ---------- */

.navbar {
  background: var(--glow-navbar-bg) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glow-panel-border);
}
.navbar .navbar-brand-wrapper { background: transparent !important; }
/*
 * style.css:28838 sets `.navbar .navbar-menu-wrapper { background:
 * #ffffff; }` explicitly (2-class compound selector) - the same
 * "opaque white background baked into a sub-element, not just the
 * outer .navbar" pattern as .navbar-brand-wrapper above and
 * .auth .auth-form-light on the login page. Without this override the
 * entire navbar past the 235px logo box (hamburger, language dropdown,
 * theme toggle, avatar) stays a solid white bar.
 */
.navbar .navbar-menu-wrapper { background: transparent !important; color: var(--glow-text-muted) !important; }
/*
 * The real institution logo (Mu'assada Al-Dikri, replacing the old
 * generic KAYDIYE/AL-CIZZA vendor branding) is teal-on-white and
 * already circular by design - unlike the old logo.png (a fully
 * opaque asset with no alpha channel, where brightness(0) invert(1)
 * produced a blank white box), this one just needs its own square
 * JPEG/PNG bounding box clipped to a circle via border-radius on the
 * <img> itself (set inline in sidebar.php) - no white badge needed,
 * it reads fine directly against the dark navbar.
 */
.navbar-brand.brand-logo,
.navbar-brand.brand-logo-mini {
  display: inline-flex;
  align-items: center;
}
.navbar .nav-profile img { border: 1px solid var(--glow-panel-border); }

/* ---------- footer ---------- */
.footer {
  background: var(--glow-panel) !important;
  border-top: 1px solid var(--glow-panel-border);
  color: var(--glow-text-muted);
}
.footer a { color: var(--glow-accent); }

/* ---------- sidebar ---------- */

.sidebar {
  background: var(--glow-sidebar-bg) !important;
  border-right: 1px solid var(--glow-panel-border);
}
/*
 * Each nav item reads as its own button chip at rest (not just on
 * hover/active) - a subtle card behind the icon+label, consistent
 * spacing between items - rather than a plain flat list.
 */
.sidebar .nav {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .nav .nav-item {
  border-radius: 10px;
}
.sidebar .nav .nav-item > .nav-link {
  border-radius: 10px;
  background: var(--glow-panel-border);
  margin: 0;
}
.sidebar .nav .nav-link .menu-icon,
.sidebar .nav .nav-link i {
  width: 20px;
  text-align: center;
}
.sidebar .nav .nav-link .menu-title,
.sidebar .nav .nav-link i {
  color: var(--glow-text-muted) !important;
}
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav-item > .nav-link[aria-expanded="true"] .menu-title,
.sidebar .nav-item > .nav-link[aria-expanded="true"] i {
  color: #fff !important;
}
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav-item > .nav-link[aria-expanded="true"] {
  background: linear-gradient(135deg, var(--glow-accent), var(--glow-accent-dark)) !important;
  box-shadow: 0 0 20px -4px rgba(45,212,191,0.55);
}
.sidebar .nav-item .collapse.show,
.sidebar .nav-item .collapse.show .sub-menu {
  background: rgba(255,255,255,0.04) !important;
}
.sidebar .nav-item .collapse.show .sub-menu .nav-link {
  color: var(--glow-text-muted) !important;
}
.sidebar .nav-item .collapse.show .sub-menu .nav-item.active > .nav-link,
.sidebar .nav-item .collapse.show .sub-menu .nav-link:hover {
  background: var(--glow-success-bg) !important;
  color: var(--glow-text) !important;
}
.sidebar .nav .nav-item > .nav-link:hover {
  background: var(--glow-input-bg) !important;
}

/* right-hand settings panel (Todo List / Chats drawer) */
.settings-panel {
  background: var(--glow-solid-panel) !important;
  border-left: 1px solid var(--glow-panel-border);
}
.settings-panel .nav-tabs { border-color: var(--glow-panel-border) !important; }
.settings-panel .nav-tabs .nav-link { color: var(--glow-text-muted) !important; border-color: transparent !important; }
.settings-panel .nav-tabs .nav-link.active {
  color: var(--glow-text) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--glow-accent) !important;
}
.settings-panel .todo-list-input,
.settings-panel .form-control {
  background: var(--glow-hover-tint) !important;
  border: 1px solid var(--glow-panel-border) !important;
  color: var(--glow-text) !important;
}
.settings-panel .todo-list-add-btn {
  background: linear-gradient(135deg, var(--glow-accent), var(--glow-accent-dark)) !important;
  border: none !important;
}
.settings-panel .todo-list li {
  border-bottom: 1px solid var(--glow-border-soft) !important;
  color: var(--glow-text);
}
.settings-panel .todo-list li.completed label { color: var(--glow-text-faint) !important; }
.settings-panel .settings-close { color: var(--glow-text-muted); }

/* Every Bootstrap .card everywhere (both untouched legacy pages and
   the ones below with their own .xx-card class layered on top, which
   only ever added border/radius, never a background) - this is what
   actually turns a white card into a dark glass one site-wide. */
.card {
  background: var(--glow-panel) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glow-panel-border) !important;
  color: var(--glow-text);
}
.card-title { color: var(--glow-text) !important; }
.text-muted { color: var(--glow-text-muted) !important; }

/* ---------- generic Bootstrap surfaces (affects every page immediately) ---------- */

.form-control, .form-select, select, textarea,
input[type="text"], input[type="number"], input[type="date"],
input[type="month"], input[type="password"], input[type="email"] {
  background-color: var(--glow-input-bg) !important;
  border: 1px solid var(--glow-panel-border) !important;
  color: var(--glow-text) !important;
}
.form-control::placeholder { color: var(--glow-text-faint) !important; }
.form-control:focus {
  background-color: var(--glow-input-bg-focus) !important;
  border-color: var(--glow-accent) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.15) !important;
  color: var(--glow-text) !important;
}
label { color: var(--glow-text-muted); }

/*
 * Bootstrap 5.3's tables don't paint a background on <table> that
 * child cells could inherit (background never inherits anyway) -
 * .table sets --bs-table-bg: var(--bs-body-bg) (white) and every
 * <td>/<th> reads that CSS custom property directly to paint its OWN
 * background. A plain `.table { background: ... }` override never
 * touches this - it only colors the <table> box itself while every
 * cell keeps painting white on top of it. Overriding the custom
 * properties Bootstrap actually reads is the only thing that works.
 */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--glow-text);
  --bs-table-striped-bg: rgba(255,255,255,0.035);
  --bs-table-striped-color: var(--glow-text);
  --bs-table-hover-bg: rgba(45,212,191,0.08);
  --bs-table-hover-color: var(--glow-text);
  --bs-table-active-bg: rgba(45,212,191,0.12);
  --bs-table-active-color: var(--glow-text);
  --bs-table-border-color: var(--glow-border-soft);
  color: var(--glow-text) !important;
}
.table thead th {
  --bs-table-bg: rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.04) !important;
  color: var(--glow-text-muted) !important;
  border-color: var(--glow-border-soft) !important;
}
.table td, .table th { border-color: var(--glow-border-soft) !important; }

.dropdown-menu {
  background: var(--glow-solid-panel) !important;
  border: 1px solid var(--glow-panel-border) !important;
}
.dropdown-item { color: var(--glow-text-muted) !important; }
.dropdown-item:hover { background: var(--glow-hover-tint) !important; color: var(--glow-text) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--glow-accent), var(--glow-accent-dark)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 0 18px -4px rgba(45,212,191,0.5);
}
.btn-outline-primary { color: var(--glow-accent) !important; border-color: var(--glow-accent) !important; }
.btn-outline-primary:hover { background: var(--glow-success-bg) !important; color: var(--glow-text) !important; }

a { color: var(--glow-accent); }
a:hover { color: var(--glow-accent-dark); }

/* select2 (Student Profile's searchable student picker) */
.select2-container--bootstrap .select2-selection {
  background: var(--glow-input-bg) !important;
  border: 1px solid var(--glow-panel-border) !important;
  color: var(--glow-text) !important;
}
.select2-container--bootstrap .select2-selection__rendered { color: var(--glow-text) !important; }
.select2-container--bootstrap .select2-dropdown {
  background: var(--glow-solid-panel) !important;
  border: 1px solid var(--glow-panel-border) !important;
  color: var(--glow-text) !important;
}
.select2-container--bootstrap .select2-search__field {
  background: var(--glow-input-bg) !important;
  border: 1px solid var(--glow-panel-border) !important;
  color: var(--glow-text) !important;
}
.select2-container--bootstrap .select2-results__option--highlighted {
  background: var(--glow-accent) !important;
  color: #0A0E1A !important;
}