/* ===========================================================================
   Smart School LMS — "Modern" theme
   Universal skin layer: loaded once in layout/theme.php after style-main.css
   and a borrowed vendor skin file (gray/skin-light.css, for structural rules
   only), so it re-themes every existing page through the shared AdminLTE 2
   class vocabulary (.main-header, .main-sidebar, .box, .btn, .table,
   .form-control, etc.) without touching individual view files.

   IMPORTANT: every vendor skin file is scoped under the hardcoded
   ".skin-blue" body class (see layout/header.php) and its color rules carry
   higher specificity than plain class selectors here (".skin-blue .foo" >
   ".foo"). Color/background/border declarations below use !important
   specifically to win over that inherited layer - this is a deliberate,
   scoped use for a retrofit theme, not a general habit to carry into new
   per-module CSS once views are rebuilt directly.

   Design tokens are declared once at the top - adjust a color/type choice
   there and it cascades everywhere. See smart-school-lms-rebuild-plan.md
   memory for the plan this belongs to.
   =========================================================================== */

:root {
  /* Chrome (sidebar + header dark rail) */
  --chrome: #16241f;
  --chrome-2: #1d2e27;
  --chrome-3: #24382f;
  --chrome-line: #2b3f35;
  --chrome-ink: #e8ece7;
  --chrome-ink-dim: #93a89d;

  /* Content canvas */
  --paper: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #f1efe8;
  --ink: #1c2321;
  --ink-dim: #5b6560;
  --ink-faint: #8a9089;
  --line: #e3e0d6;
  --line-strong: #d3cfc1;

  /* Brand accent (school-crest gold) */
  --accent: #c98a2c;
  --accent-deep: #a66f1e;
  --accent-soft: #f6e9d2;
  --accent-ink: #3a2607;

  /* Semantic status — separate from the brand accent on purpose */
  --good: #3f7d52;
  --good-soft: #e2efe4;
  --warn: #b0793a;
  --warn-soft: #f5ead8;
  --critical: #b0473a;
  --critical-soft: #f6e2df;
  --info: #3b6e91;
  --info-soft: #dfeaf1;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 1px 2px rgba(20, 20, 15, 0.05), 0 6px 20px -10px rgba(20, 20, 15, 0.18);
  --shadow-pop: 0 4px 10px rgba(20, 20, 15, 0.08), 0 16px 40px -16px rgba(20, 20, 15, 0.28);

  --font-display: 'Segoe UI Semibold', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  background: var(--paper) !important;
  color: var(--ink);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.box-title, .content-header > h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
}
a { color: var(--accent-deep); }
a:hover, a:focus { color: var(--accent); }
::selection { background: var(--accent-soft); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Kill the leftover "unregistered version" vendor banner if it ever renders */
.topaleart { display: none !important; }

/* ---------- Header + Sidebar unified into one dark chrome rail ---------- */
.main-header,
.main-header .navbar,
.wrapper, .main-sidebar, .left-side {
  background: var(--chrome) !important;
  box-shadow: none !important;
}
.main-header .logo {
  background: var(--chrome-2) !important;
  border-bottom: 1px solid var(--chrome-line);
  color: var(--chrome-ink) !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.main-header .logo:hover { background: var(--chrome-3) !important; }
.main-header .navbar { box-shadow: none; border-bottom: 1px solid var(--chrome-line); }
.main-header .sidebar-toggle { color: var(--chrome-ink-dim) !important; }
.main-header .sidebar-toggle:hover { color: var(--chrome-ink) !important; background: var(--chrome-3) !important; }
.main-header .sidebar-session { color: var(--chrome-ink) !important; font-weight: 600; letter-spacing: 0.01em; }

.main-header .navbar-custom-menu .dropdown-toggle,
.main-header .todoicon { color: var(--chrome-ink-dim) !important; }
.main-header .navbar-custom-menu > .navbar-nav > li > a { color: var(--chrome-ink-dim) !important; }
.main-header .navbar-custom-menu > .navbar-nav > li > a:hover,
.main-header .navbar-custom-menu > .navbar-nav > li.dropdown.open > a {
  background: var(--chrome-3) !important;
  color: var(--chrome-ink) !important;
}
.main-header .todo-indicator {
  background: var(--critical) !important;
  color: #fff !important;
  border-radius: 100px;
  font-size: 10px;
  padding: 1px 5px;
}
.main-header .search-form .form-control {
  background: var(--chrome-2) !important;
  border: 1px solid var(--chrome-line) !important;
  color: var(--chrome-ink) !important;
}
.main-header .search-form .form-control::placeholder { color: var(--chrome-ink-dim); }
.main-header .search-form .btn { background: var(--accent) !important; color: var(--accent-ink) !important; border: none !important; }

.user-menu .topuser-image {
  border: 2px solid var(--chrome-line);
  border-radius: 100px;
}

/* Sidebar nav */
.sidebar-menu > li,
.sidebar-menu > li.header {
  background: transparent !important;
  color: var(--chrome-ink-dim) !important;
}
.sidebar-menu > li > a {
  color: var(--chrome-ink-dim) !important;
  border-left: 3px solid transparent !important;
  font-weight: 500;
  background: transparent !important;
}
.sidebar-menu > li > a:hover,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: var(--chrome-2) !important;
  color: var(--chrome-ink) !important;
  border-left-color: var(--accent) !important;
}
.sidebar-menu > li > a > i { color: var(--chrome-ink-dim); width: 22px; }
.sidebar-menu > li.active > a > i,
.sidebar-menu > li:hover > a > i { color: var(--accent) !important; }
.sidebar-menu .treeview-menu {
  background: var(--chrome-2) !important;
}
.sidebar-menu .treeview-menu > li > a {
  color: var(--chrome-ink-dim) !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
}
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
  color: var(--chrome-ink) !important;
  border-left-color: var(--accent) !important;
  background: var(--chrome-3) !important;
}
.sidebar-form { border: 1px solid var(--chrome-line) !important; }
.sidebar-form .form-control { background: var(--chrome-2) !important; color: var(--chrome-ink) !important; border: none !important; }
.sidebar a { text-decoration: none; }
.user-panel, .sidebar-session-wrap { background: transparent !important; color: var(--chrome-ink) !important; }

/* ---------- Content canvas ---------- */
.content-wrapper { background: var(--paper) !important; }
.content-header { background: transparent !important; }
.content-header > h1 { font-size: 20px; }
.content-header > h1 > small { color: var(--ink-dim) !important; }
.breadcrumb {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.breadcrumb > li + li::before { color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-dim) !important; }
.breadcrumb > .active { color: var(--ink) !important; font-weight: 600; }

/* ---------- Cards / boxes ---------- */
.box {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card) !important;
}
.box.box-solid { border-top: 1px solid var(--line) !important; }
.box-header {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}
.box-header .box-title { font-size: 14.5px; color: var(--ink) !important; }
.box-header .box-tools .btn { box-shadow: none; }
.box-body { padding: 16px; color: var(--ink); }
.box-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--line);
}
/* Map AdminLTE's box-context colors onto the semantic palette, not stock blue/aqua/red */
.box-primary { border-top-color: var(--accent) !important; }
.box-info { border-top-color: var(--info) !important; }
.box-success { border-top-color: var(--good) !important; }
.box-warning { border-top-color: var(--warn) !important; }
.box-danger { border-top-color: var(--critical) !important; }
.small-box, .info-box {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card) !important;
}
.small-box h3, .small-box p, .info-box-text, .info-box-number { color: inherit; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none !important;
}
.btn-flat { border-radius: var(--radius-sm); }
.btn-default {
  background: var(--surface) !important;
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
}
.btn-default:hover { background: var(--surface-2) !important; border-color: var(--ink-faint) !important; }
.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; color: #fff !important; }
.btn-success { background: var(--good) !important; border-color: var(--good) !important; color: #fff !important; }
.btn-info { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
.btn-warning { background: var(--warn) !important; border-color: var(--warn) !important; color: #fff !important; }
.btn-danger { background: var(--critical) !important; border-color: var(--critical) !important; color: #fff !important; }
.btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-danger:hover { filter: brightness(0.92); }
.btn.disabled, .btn[disabled] { opacity: 0.55; }

/* ---------- Forms ---------- */
.form-control {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm);
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
label { color: var(--ink) !important; font-weight: 600; font-size: 12.5px; }
.has-feedback .form-control-feedback { color: var(--ink-faint); }
.has-error .form-control { border-color: var(--critical) !important; }
.help-block, .text-danger { color: var(--critical) !important; }
.checkbox label, .radio label { font-weight: 400; }

/* ---------- Tables / DataTables — the "ledger" is real here, ruled lines are earned ---------- */
.table { color: var(--ink) !important; }
.table > thead > tr > th {
  border-bottom: 2px solid var(--line-strong) !important;
  color: var(--ink-dim) !important;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-family: var(--font-display);
  background: transparent !important;
}
.table > tbody > tr > td { border-top: 1px solid var(--line) !important; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2) !important; }
.table-hover > tbody > tr:hover { background: var(--accent-soft) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border-radius: var(--radius-sm); border: 1px solid var(--line-strong) !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--ink-dim) !important; }
.paginate_button.current, .pagination > .active > a {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
.pagination > li > a { color: var(--ink-dim) !important; border-radius: var(--radius-sm); }
.dt-buttons .btn { margin-right: 4px; }

/* ---------- Status system: labels / badges (attendance, fees, grades) ---------- */
.label { border-radius: 100px; font-weight: 600; padding: 3px 9px; }
.label-primary, .badge-primary { background: var(--accent) !important; color: var(--accent-ink) !important; }
.label-success { background: var(--good-soft) !important; color: var(--good) !important; }
.label-warning { background: var(--warn-soft) !important; color: var(--warn) !important; }
.label-danger { background: var(--critical-soft) !important; color: var(--critical) !important; }
.label-info { background: var(--info-soft) !important; color: var(--info) !important; }
.label-default { background: var(--surface-2) !important; color: var(--ink-dim) !important; }
.badge { background: var(--critical) !important; border-radius: 100px; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius-sm); border: 1px solid transparent; }
.alert-success { background: var(--good-soft) !important; border-color: var(--good) !important; color: #2a5638 !important; }
.alert-warning { background: var(--warn-soft) !important; border-color: var(--warn) !important; color: #7a5124 !important; }
.alert-danger { background: var(--critical-soft) !important; border-color: var(--critical) !important; color: #7a2f26 !important; }
.alert-info { background: var(--info-soft) !important; border-color: var(--info) !important; color: #294a61 !important; }

/* ---------- Dropdowns / modals / tabs ---------- */
.dropdown-menu {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop) !important;
  background: var(--surface) !important;
}
.dropdown-menu > li > a { color: var(--ink) !important; }
.dropdown-menu > li > a:hover { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-pop) !important; background: var(--surface) !important; }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); }
.nav-tabs { border-bottom: 2px solid var(--line); }
.nav-tabs > li.active > a {
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 700;
}
.nav-tabs > li > a { color: var(--ink-dim) !important; border: none !important; background: transparent !important; }
.nav-tabs > li > a:hover { background: transparent !important; border: none !important; color: var(--ink) !important; }

/* ---------- Login page (custom markup: .top-content / .loginbg / .form-top / .form-bottom) ----------
   Signature motif: a faint ruled-ledger-line texture, used exactly once. */
.top-content {
  background: var(--chrome) !important;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(232, 236, 231, 0.05) 0,
      rgba(232, 236, 231, 0.05) 1px,
      transparent 1px,
      transparent 38px
    ) !important;
  min-height: 100vh;
}
.loginbg {
  background: var(--surface) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop) !important;
  overflow: hidden;
}
.form-top { background: var(--chrome-2) !important; }
.form-bottom { background: var(--surface) !important; padding: 28px 30px !important; }
.form-bottom h3 { color: var(--ink) !important; font-family: var(--font-display); }
.form-username, .form-password { border-radius: var(--radius-sm) !important; }
.form-bottom .btn {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700;
  width: 100%;
}
.form-bottom .btn:hover { background: var(--accent-deep) !important; }
.forgot { color: var(--ink-dim) !important; }
.forgot:hover { color: var(--accent-deep) !important; }

/* ---------- Small utilities ---------- */
.text-muted { color: var(--ink-faint) !important; }
hr { border-top: 1px solid var(--line); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }