/* ==========================================================================
   Notion-style theme override for AdminLTE 3 / Bootstrap 4
   Loaded after adminlte.min.css — overrides visual style only, keeps AdminLTE
   markup/JS widgets (pushmenu, treeview, etc.) working as-is.

   IMPORTANT: colored elements (Bootstrap .bg-success/.bg-warning/.bg-danger/
   .bg-info utility classes, or inline style="background-color:...") are
   intentionally left untouched everywhere in this file so dashboard/attendance
   stat cards keep their distinct colors. Only genuinely plain/neutral
   surfaces get the Notion surface treatment.
   ========================================================================== */

:root,
html[data-theme="light"] {
  --n-bg: #ffffff;
  --n-bg-secondary: #fafaf9;
  --n-surface: #ffffff;
  --n-surface-hover: #f0efec;
  --n-border: #e9e8e5;
  --n-text: #37352f;
  --n-text-secondary: #6b6b68;
  --n-text-muted: #9b9a97;
  --n-sidebar-bg: #fbfbfa;
  --n-sidebar-text: #4a4a47;
  --n-sidebar-active: #edecea;
  --n-navbar-bg: #ffffff;
  --n-accent: #2383e2;
  --n-accent-hover: #1c6fc4;
  --n-success: #0f7b6c;
  --n-success-bg: #ddf3ef;
  --n-warning: #cb7b17;
  --n-warning-bg: #fbecdd;
  --n-danger: #e03e3e;
  --n-danger-bg: #fbe4e4;
  --n-info: #337ea9;
  --n-info-bg: #ddebf1;
  --n-teal: #0d8a72;
  --n-teal-bg: #ddf3ee;
  --n-purple: #6940a5;
  --n-purple-bg: #eae4f8;
  --n-secondary: #6b6b68;
  --n-secondary-bg: #edece9;
  --n-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
}

html[data-theme="dark"] {
  --n-bg: #1f1f1f;
  --n-bg-secondary: #242424;
  --n-surface: #2c2c2c;
  --n-surface-hover: #383838;
  --n-border: #424242;
  --n-text: #e6e6e4;
  --n-text-secondary: #b8b8b6;
  --n-text-muted: #8f8f8d;
  --n-sidebar-bg: #242424;
  --n-sidebar-text: #d4d4d2;
  --n-sidebar-active: #3a3a3a;
  --n-navbar-bg: #1f1f1f;
  --n-accent: #4d9de6;
  --n-accent-hover: #6bb0ee;
  --n-success: #6dc4b3;
  --n-success-bg: #1d3330;
  --n-warning: #e0b17d;
  --n-warning-bg: #3a2e1c;
  --n-danger: #ea9694;
  --n-danger-bg: #3a2222;
  --n-info: #7fbfe6;
  --n-info-bg: #1e2f3a;
  --n-teal: #6dc9b3;
  --n-teal-bg: #17332c;
  --n-purple: #b9a0e8;
  --n-purple-bg: #2c2440;
  --n-secondary: #b3b3b1;
  --n-secondary-bg: #2f2f2f;
  --n-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  transition: background-color .15s ease, color .15s ease;
}

.content-wrapper {
  background: var(--n-bg-secondary) !important;
}

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

/* ─── Navbar ─────────────────────────────────────────────────────────── */

.main-header.navbar {
  background: var(--n-navbar-bg) !important;
  border-bottom: 1px solid var(--n-border) !important;
  box-shadow: none !important;
}
.main-header.navbar .nav-link {
  color: var(--n-text-secondary) !important;
}
.main-header.navbar .nav-link:hover {
  color: var(--n-text) !important;
}

.theme-toggle-btn {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 .75rem;
  line-height: 2.5rem;
}

/* ─── Sidebar ────────────────────────────────────────────────────────── */

.main-sidebar {
  background: var(--n-sidebar-bg) !important;
  border-right: 1px solid var(--n-border);
  box-shadow: none !important;
}
.brand-link {
  border-bottom: 1px solid var(--n-border) !important;
}
.brand-text {
  color: var(--n-text) !important;
}
.user-panel .info a {
  color: var(--n-text) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-link {
  color: var(--n-sidebar-text) !important;
  border-radius: 6px;
  margin: 1px 8px;
  width: auto;
}
.nav-sidebar .nav-link:hover {
  background: var(--n-surface-hover) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-link.active {
  background: var(--n-sidebar-active) !important;
  color: var(--n-text) !important;
}
.nav-sidebar .nav-icon {
  color: var(--n-text-muted) !important;
}
.nav-sidebar .nav-link.active .nav-icon {
  color: var(--n-text) !important;
}
.nav-sidebar > .nav-item > .nav-treeview {
  background: transparent !important;
}
.form-control-sidebar {
  background: var(--n-surface-hover) !important;
  border: 1px solid var(--n-border) !important;
  color: var(--n-text) !important;
}

/* ─── Cards (plain, non-colored) ───────────────────────────────────────── */

.card {
  background: var(--n-surface) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--n-shadow) !important;
  color: var(--n-text);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--n-border) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.card-header .card-title {
  color: var(--n-text);
  font-weight: 600;
}
/* Colored card headers (bg-danger/bg-success/...) — same soft pastel
   treatment as the stat cards, for a consistent Notion-like look. */
.card-header.bg-danger, .card-header.bg-success,
.card-header.bg-warning, .card-header.bg-info {
  border-bottom: none !important;
}
.card-header.bg-danger  { background: var(--n-danger-bg)  !important; }
.card-header.bg-success { background: var(--n-success-bg) !important; }
.card-header.bg-warning { background: var(--n-warning-bg) !important; }
.card-header.bg-info    { background: var(--n-info-bg)    !important; }
.card-header.bg-danger .card-title  { color: var(--n-danger)  !important; }
.card-header.bg-success .card-title { color: var(--n-success) !important; }
.card-header.bg-warning .card-title { color: var(--n-warning) !important; }
.card-header.bg-info .card-title    { color: var(--n-info)    !important; }

/* ─── info-box / small-box (dashboard & attendance stat cards) ──────────
   Only cards WITHOUT a bg-* utility class and WITHOUT an inline
   background-color style get the neutral surface treatment. Colored
   variants (bg-info/bg-success/bg-warning/bg-danger, or inline
   style="background-color:...") are left exactly as Bootstrap renders
   them, so the stat cards keep their distinct colors in both themes. */

.info-box:not([class*="bg-"]):not([style]),
.small-box:not([class*="bg-"]):not([style]) {
  background: var(--n-surface) !important;
  border: 1px solid var(--n-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--n-shadow) !important;
}
.info-box:not([class*="bg-"]):not([style]) .info-box-icon {
  background: var(--n-bg-secondary) !important;
  color: var(--n-text-muted) !important;
}
.info-box:not([class*="bg-"]):not([style]) .info-box-text {
  color: var(--n-text-secondary);
}
.info-box:not([class*="bg-"]):not([style]) .info-box-number {
  color: var(--n-text);
}
.small-box:not([class*="bg-"]):not([style]) {
  color: var(--n-text);
}
.small-box:not([class*="bg-"]):not([style]) .icon i {
  color: var(--n-text-muted);
}
.small-box:not([class*="bg-"]):not([style]) .small-box-footer {
  background: var(--n-bg-secondary) !important;
  color: var(--n-text-secondary) !important;
  border-top: 1px solid var(--n-border);
}

/* Colored info-box/small-box: Notion-style soft pastel tint instead of a
   loud solid Bootstrap color — soft background + matching accent text/icon,
   consistent in both light and dark mode. */
.info-box[class*="bg-"], .small-box[class*="bg-"] {
  border-radius: 10px !important;
  box-shadow: var(--n-shadow) !important;
  border: 1px solid transparent !important;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Selected filter card (attendance_list.html stat cards) — same soft tint
   as always, plus a visible accent ring so the active filter stands out.
   Selectors qualified with .info-box/.small-box to match the specificity
   of the [class*="bg-"] rule above (equal specificity + declared later
   in this file wins the cascade). */
.info-box.stat-active, .small-box.stat-active {
  border-color: var(--n-accent) !important;
  box-shadow: 0 0 0 2px var(--n-accent) !important;
}

.info-box.bg-info,    .small-box.bg-info,
.info-box.bg-primary, .small-box.bg-primary {
  background: var(--n-info-bg) !important;
}
.info-box.bg-success, .small-box.bg-success {
  background: var(--n-success-bg) !important;
}
.info-box.bg-warning, .small-box.bg-warning {
  background: var(--n-warning-bg) !important;
}
.info-box.bg-danger,  .small-box.bg-danger {
  background: var(--n-danger-bg) !important;
}
.info-box.bg-secondary, .small-box.bg-secondary {
  background: var(--n-secondary-bg) !important;
}
.info-box.bg-teal, .small-box.bg-teal {
  background: var(--n-teal-bg) !important;
}
.info-box.bg-purple, .small-box.bg-purple {
  background: var(--n-purple-bg) !important;
}

.info-box.bg-info .info-box-number,    .info-box.bg-info .info-box-text,
.info-box.bg-primary .info-box-number, .info-box.bg-primary .info-box-text,
.small-box.bg-info h3,    .small-box.bg-info p,    .small-box.bg-info .icon i,    .small-box.bg-info .small-box-footer,
.small-box.bg-primary h3, .small-box.bg-primary p, .small-box.bg-primary .icon i, .small-box.bg-primary .small-box-footer {
  color: var(--n-info) !important;
}
.info-box.bg-success .info-box-number, .info-box.bg-success .info-box-text,
.small-box.bg-success h3, .small-box.bg-success p, .small-box.bg-success .icon i, .small-box.bg-success .small-box-footer {
  color: var(--n-success) !important;
}
.info-box.bg-warning .info-box-number, .info-box.bg-warning .info-box-text,
.small-box.bg-warning h3, .small-box.bg-warning p, .small-box.bg-warning .icon i, .small-box.bg-warning .small-box-footer {
  color: var(--n-warning) !important;
}
.info-box.bg-danger .info-box-number, .info-box.bg-danger .info-box-text,
.small-box.bg-danger h3, .small-box.bg-danger p, .small-box.bg-danger .icon i, .small-box.bg-danger .small-box-footer {
  color: var(--n-danger) !important;
}
.info-box.bg-secondary .info-box-number, .info-box.bg-secondary .info-box-text,
.small-box.bg-secondary h3, .small-box.bg-secondary p, .small-box.bg-secondary .icon i, .small-box.bg-secondary .small-box-footer {
  color: var(--n-secondary) !important;
}
.info-box.bg-teal .info-box-number, .info-box.bg-teal .info-box-text,
.small-box.bg-teal h3, .small-box.bg-teal p, .small-box.bg-teal .icon i, .small-box.bg-teal .small-box-footer {
  color: var(--n-teal) !important;
}
.info-box.bg-purple .info-box-number, .info-box.bg-purple .info-box-text,
.small-box.bg-purple h3, .small-box.bg-purple p, .small-box.bg-purple .icon i, .small-box.bg-purple .small-box-footer {
  color: var(--n-purple) !important;
}

/* The small circular icon badge (.info-box-icon) keeps its own bg-* class
   independent of the parent card's state (attendance_list.html toggle
   cards) — solid accent background with a white glyph, like a Notion emoji
   chip, regardless of whether the parent card itself is tinted or plain. */
.info-box-icon.bg-info,
.info-box-icon.bg-success,
.info-box-icon.bg-warning,
.info-box-icon.bg-danger,
.info-box-icon.bg-primary,
.info-box-icon.bg-secondary,
.info-box-icon.bg-teal {
  color: #fff !important;
}
.info-box-icon.bg-info      { background: var(--n-info)      !important; }
.info-box-icon.bg-success   { background: var(--n-success)   !important; }
.info-box-icon.bg-warning   { background: var(--n-warning)   !important; }
.info-box-icon.bg-danger    { background: var(--n-danger)    !important; }
.info-box-icon.bg-primary   { background: var(--n-info)      !important; }
.info-box-icon.bg-secondary { background: var(--n-secondary) !important; }
.info-box-icon.bg-teal      { background: var(--n-teal)      !important; }

/* ─── Tables ─────────────────────────────────────────────────────────── */

.table {
  color: var(--n-text) !important;
}
.table thead th {
  border-bottom: 1px solid var(--n-border) !important;
  color: var(--n-text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .03em;
}
.table td, .table th {
  border-top: 1px solid var(--n-border) !important;
  color: inherit;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--n-bg-secondary) !important;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: var(--n-surface-hover) !important;
  color: var(--n-text) !important;
}

/* ─── Forms / buttons ──────────────────────────────────────────────────── */

.form-control {
  background: var(--n-surface) !important;
  border: 1px solid var(--n-border) !important;
  color: var(--n-text) !important;
  border-radius: 6px !important;
}
.form-control:focus {
  border-color: var(--n-accent) !important;
  box-shadow: 0 0 0 2px rgba(35,131,226,0.2) !important;
}
.form-control::placeholder { color: var(--n-text-muted); }
label { color: var(--n-text-secondary); }

.btn {
  border-radius: 6px !important;
  font-weight: 500;
}
.btn-primary {
  background: var(--n-accent) !important;
  border-color: var(--n-accent) !important;
}
.btn-primary:hover {
  background: var(--n-accent-hover) !important;
  border-color: var(--n-accent-hover) !important;
}

/* ─── Breadcrumb / headings ────────────────────────────────────────────── */

.content-header h1 { color: var(--n-text) !important; font-weight: 700; }
.breadcrumb { background: transparent !important; }
.breadcrumb-item a { color: var(--n-text-secondary); }
.breadcrumb-item.active { color: var(--n-text-muted); }

/* ─── Badges (keep semantic colors, soften) ───────────────────────────── */

.badge-success { background: var(--n-success-bg) !important; color: var(--n-success) !important; }
.badge-warning { background: var(--n-warning-bg) !important; color: var(--n-warning) !important; }
.badge-danger  { background: var(--n-danger-bg)  !important; color: var(--n-danger)  !important; }
.badge-info    { background: var(--n-info-bg)    !important; color: var(--n-info)    !important; }

/* ─── Modals ───────────────────────────────────────────────────────────── */

.modal-content {
  background: var(--n-surface) !important;
  color: var(--n-text) !important;
  border: 1px solid var(--n-border) !important;
}