/*
 * App theme - Stripe-Dashboard-inspired (phase 2, supersedes the earlier
 * Apple-HIG pilot after user feedback that the CSS-only Apple pass still
 * read as generic/templated). Still a CSS-only overlay loaded after
 * adminlte.min.css and every plugin stylesheet - it never touches template
 * markup logic, only how the existing AdminLTE/Bootstrap 4 components look.
 *
 * What changed from the Apple pass: a real UI grotesk (Inter) instead of
 * the system font stack; hairline borders on cards/tables instead of soft
 * shadows (shadows now reserved for genuinely-elevated surfaces - modals,
 * the login card, dropdowns); a single confident indigo accent instead of
 * iOS blue; a tighter, more deliberate spacing scale; tabular figures for
 * numeric stats. The icon system also moved off FontAwesome to Lucide
 * (consistent thin-stroke SVGs - see base.html/login.html for the loader
 * and individual templates for the data-lucide markup) since mixed
 * solid/regular icon weights were the one thing a stylesheet alone
 * couldn't fix.
 */

:root {
    --canvas: #F6F6F8;
    --surface: #FFFFFF;
    --surface-sunken: #FAFAFB;
    --ink: #1A1A2E;
    --ink-secondary: #5B5B6B;
    --ink-tertiary: #8A8A99;
    --hairline: #E1E1E8;
    --hairline-soft: #EBEBF1;

    --accent: #5851E8;
    --accent-hover: #4B44D6;
    --accent-active: #3E38B8;
    --accent-tint: #EEEDFD;

    --good: #1B8A5A;
    --good-tint: #E5F6EE;
    --warn: #B25E00;
    --warn-tint: #FBEEDD;
    --bad: #D3282C;
    --bad-tint: #FCEAEA;
    --neutral-badge: #5B5B6B;
    --neutral-tint: #EFEFF3;

    --radius-lg: 10px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --radius-xs: 5px;

    --shadow-pop: 0 2px 6px rgba(26, 26, 46, 0.06), 0 12px 32px rgba(26, 26, 46, 0.10);

    --font-system: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ---------------------------------------------------------------------- */
/* Foundations                                                             */
/* ---------------------------------------------------------------------- */

body,
.login-page,
.hold-transition {
    font-family: var(--font-system) !important;
    background-color: var(--canvas) !important;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.content-wrapper {
    background-color: var(--canvas) !important;
}

/* Lucide icons default to a fixed 24x24 SVG (sized via width/height
   attributes, not font-size like the FontAwesome glyphs they replaced) -
   base.html/login.html hand every icon a 16px default at creation time via
   createIcons(), this just makes it sit inline with surrounding text the
   way an icon font used to. Context-specific selectors elsewhere in this
   file (.nav-icon, .small-box .icon, .btn, .table, ...) override the size
   where 16px isn't right for that spot. */
svg.lucide {
    display: inline-block;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-system);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.content-header h1 {
    font-size: 21px;
    font-weight: 700;
}

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

:focus-visible {
    outline: 3px solid rgba(88, 81, 232, 0.35);
    outline-offset: 2px;
}

/* Numeric columns (stat cards, table figures, IDs) read like data in a
   dashboard, not prose - tabular figures keep digits aligned in a column
   instead of each row's total width wobbling with which digits it has. */
.small-box h3,
.info-box-number,
.table {
    font-variant-numeric: tabular-nums;
}

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

.main-header.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
    box-shadow: none !important;
}

.main-header .nav-link {
    color: var(--ink-secondary) !important;
}

.main-header input[type="search"],
.main-header .form-control {
    background: var(--surface-sunken);
    border: 1px solid var(--hairline-soft);
    border-radius: 999px !important;
    padding-left: 16px;
}

.navbar-brand-text {
    color: var(--ink) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------- */
/* Sidebar - light, airy, one neutral icon tone, soft selected pill        */
/* ---------------------------------------------------------------------- */

.main-sidebar {
    background: var(--surface-sunken) !important;
    border-right: 1px solid var(--hairline-soft);
    box-shadow: none !important;
}

.main-sidebar .brand-link {
    border-bottom: 1px solid var(--hairline-soft) !important;
    background: transparent !important;
    padding: 12px 14px !important;
}

.main-sidebar .brand-text {
    color: var(--ink) !important;
    /* AdminLTE's default here is 1.25rem/20px, which at bold weight sits
       almost as large as the actual page-title h1 (21px) - a sidebar
       label shouldn't compete with the page's own heading. */
    font-size: 15px !important;
    font-weight: 600;
}

.main-sidebar .user-panel .info a {
    color: var(--ink) !important;
    font-weight: 600;
}

.nav-sidebar .nav-header {
    color: var(--ink-tertiary) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 18px 12px 6px !important;
}

.nav-sidebar .nav-item .nav-link {
    color: var(--ink) !important;
    border-radius: var(--radius-sm);
    margin: 1px 8px;
    padding: 7px 10px !important;
    font-size: 13.5px;
    transition: background-color 120ms ease;
}

.nav-sidebar .nav-item .nav-link:hover {
    background-color: var(--hairline-soft) !important;
}

.main-sidebar .nav-sidebar .nav-link .nav-icon {
    color: var(--ink-tertiary) !important;
    width: 17px;
    height: 17px;
    margin-right: 4px;
}

/* Per-row icon color, same idea as the original template (each section
   gets its own hue), but re-picked for contrast against the new *light*
   sidebar - a couple of Bootstrap's defaults (text-warning's yellow,
   text-teal's mint) were tuned to pop on the old dark navy background
   and read as washed-out on white/light grey. Scoped to the sidebar only,
   so these utility classes still mean their normal Bootstrap colors
   anywhere else in the app. */
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-primary   { color: #0B69D4 !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-success   { color: #1F8A46 !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-danger    { color: #D32F3C !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-warning   { color: #B8790C !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-info      { color: #0E86A0 !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-purple    { color: #7B4FC9 !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-pink      { color: #D6448A !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-teal      { color: #0E8E77 !important; }
.main-sidebar .nav-sidebar .nav-link .nav-icon.text-secondary { color: var(--ink-tertiary) !important; }

.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--accent-tint) !important;
    color: var(--accent) !important;
    font-weight: 600;
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    color: var(--accent) !important;
}

/* ---------------------------------------------------------------------- */
/* Cards                                                                    */
/* ---------------------------------------------------------------------- */

.card {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    background: var(--surface);
}

.card.card-primary,
.card.card-secondary {
    border-top: 1px solid var(--hairline) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--hairline) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 14px 18px !important;
}

.card-header .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.card-body { padding: 18px !important; }
.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--hairline) !important;
    padding: 12px 18px !important;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */

.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    font-size: 13.5px;
    border: none;
    padding: 7px 15px;
    transition: background-color 120ms ease, transform 60ms ease;
    box-shadow: none !important;
}
.btn:active { transform: scale(0.98); }

.btn svg.lucide { width: 14px; height: 14px; vertical-align: -0.15em; }

.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}
.btn-primary:active {
    background-color: var(--accent-active) !important;
    border-color: var(--accent-active) !important;
}

.btn-success { background-color: var(--good) !important; border-color: var(--good) !important; }
.btn-danger  { background-color: var(--bad)  !important; border-color: var(--bad)  !important; }
.btn-warning { background-color: var(--warn) !important; border-color: var(--warn) !important; color: #fff !important; }

.btn-outline-secondary {
    color: var(--ink-secondary) !important;
    border: 1px solid var(--hairline) !important;
    background: var(--surface) !important;
}
.btn-outline-secondary:hover {
    background: var(--surface-sunken) !important;
    color: var(--ink) !important;
}

.btn-outline-primary {
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    background: var(--surface) !important;
}
.btn-outline-primary:hover {
    background: var(--accent-tint) !important;
    color: var(--accent-active) !important;
}

.page-item.active .page-link {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.page-link { color: var(--accent); border-color: var(--hairline-soft); }

/* ---------------------------------------------------------------------- */
/* Dashboard stat cards ("small-box") - white card + tinted icon badge      */
/* instead of a full saturated color block, matching Apple's own stat/     */
/* summary card pattern.                                                   */
/* ---------------------------------------------------------------------- */

.small-box {
    background: var(--surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    padding: 4px;
}
.small-box > .inner { padding: 16px 18px 6px; }
.small-box h3 {
    color: var(--ink) !important;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 2px;
}
.small-box p {
    color: var(--ink-secondary) !important;
    font-size: 13px;
    font-weight: 500;
}
.small-box .icon {
    top: 16px;
    right: 18px;
    opacity: 1;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.small-box .icon i {
    font-size: 18px !important;
    position: static !important;
}
.small-box .icon svg.lucide {
    width: 19px;
    height: 19px;
    position: static !important;
}
.small-box.bg-info .icon      { background: var(--accent-tint); color: var(--accent) !important; }
.small-box.bg-success .icon   { background: var(--good-tint);   color: var(--good) !important; }
.small-box.bg-warning .icon   { background: var(--warn-tint);   color: var(--warn) !important; }
.small-box.bg-danger .icon    { background: var(--bad-tint);    color: var(--bad) !important; }
.small-box.bg-secondary .icon { background: var(--neutral-tint); color: var(--neutral-badge) !important; }

.small-box-footer {
    background: transparent !important;
    color: var(--ink-secondary) !important;
    border-top: 1px solid var(--hairline-soft) !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
.small-box-footer:hover { color: var(--accent) !important; }

.info-box-icon svg.lucide {
    width: 26px;
    height: 26px;
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                    */
/* ---------------------------------------------------------------------- */

.form-control,
select.form-control,
textarea.form-control {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13.5px;
    background: var(--surface) !important;
    color: var(--ink);
    box-shadow: none !important;
}
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.form-control:disabled, .form-control[readonly] {
    background: var(--surface-sunken) !important;
}
label { font-weight: 600; color: var(--ink); font-size: 13px; }

/* ---------------------------------------------------------------------- */
/* Tables / DataTables                                                     */
/* ---------------------------------------------------------------------- */

.table {
    font-size: 13.5px;
}
.table th {
    color: var(--ink-tertiary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--hairline) !important;
    background: transparent;
}
.table td {
    padding: 10px 12px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
    color: var(--ink);
    vertical-align: middle;
}
.table-hover tbody tr:hover { background-color: var(--surface-sunken); }
.table-bordered, .table-bordered th, .table-bordered td { border: none !important; }
.table svg.lucide { width: 14px; height: 14px; vertical-align: -0.15em; }

/* For a column that can hold arbitrary-length free text (an audit log's
   Target, a leave application's Message, ...) - constrains it to a
   sane width and wraps instead of letting one long value force the
   whole table wider than its container. */
.table-cell-wrap {
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
}

/* Scroll shadows - a table wider than its .table-responsive box scrolls
   (that's the intent), but with nothing to hint "there's more this way"
   it just looks like the content got cut off. These are two edge
   gradients that only become visible once there's actually unscrolled
   content on that side: the two solid masks scroll WITH the table
   content (background-attachment: local) and cover the shadow whenever
   that edge is flush with the container, while the shadows themselves
   stay pinned to the container (background-attachment: scroll). */
.table-responsive {
    background-image:
        linear-gradient(to right, var(--surface) 50%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(to left, var(--surface) 50%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(to right, rgba(26, 26, 46, 0.10), rgba(26, 26, 46, 0)),
        linear-gradient(to left, rgba(26, 26, 46, 0.10), rgba(26, 26, 46, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: var(--surface);
    background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* DataTables Responsive's mobile row-expand control (the "+"/"-" circle
   used on manage-list pages once columns start collapsing on narrow
   screens) ships with its own hardcoded blue/red, not the app's palette. */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    background-color: var(--accent) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    background-color: var(--bad) !important;
}

/* ---------------------------------------------------------------------- */
/* Modals - the shared confirm dialog (base.html) and the per-page         */
/* notification-send popups (staff/student notification pages) were still */
/* stock Bootstrap chrome until this pass: square-ish corners, a default   */
/* border color, no relation to the card/hairline system used everywhere   */
/* else. This brings them in line - flat hairline border, no heavy         */
/* shadow beyond the one every floating/overlaid surface gets.             */
/* ---------------------------------------------------------------------- */

.modal-content {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-pop) !important;
}
.modal-header {
    border-bottom: 1px solid var(--hairline) !important;
    padding: 14px 18px !important;
}
.modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.modal-body { padding: 18px !important; }
.modal-footer {
    border-top: 1px solid var(--hairline) !important;
    padding: 12px 18px !important;
}

/* ---------------------------------------------------------------------- */
/* Alerts, badges                                                          */
/* ---------------------------------------------------------------------- */

.alert {
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500;
}
.alert-success { background: var(--good-tint) !important; color: var(--good) !important; }
.alert-danger  { background: var(--bad-tint)  !important; color: var(--bad)  !important; }
.alert-warning { background: var(--warn-tint) !important; color: var(--warn) !important; }
.alert-info    { background: var(--accent-tint) !important; color: var(--accent) !important; }

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 10px;
}
.badge-success { background: var(--good-tint) !important; color: var(--good) !important; }
.badge-danger  { background: var(--bad-tint)  !important; color: var(--bad)  !important; }
.badge-warning { background: var(--warn-tint) !important; color: var(--warn) !important; }
.badge-info    { background: var(--accent-tint) !important; color: var(--accent) !important; }
.badge-secondary { background: var(--neutral-tint) !important; color: var(--neutral-badge) !important; }

/* ---------------------------------------------------------------------- */
/* Login page                                                              */
/* ---------------------------------------------------------------------- */

.login-page {
    background: var(--canvas) !important;
}
.login-box { width: 380px; }
.login-logo img { max-width: 180px !important; }
.login-card-body {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-pop) !important;
    padding: 28px 28px !important;
}
/* The login card is the one deliberately "elevated" surface in the app -
   everywhere else uses a flat hairline border, but a border stacked on
   top of this shadow reads as a muddy double outline, so it stays
   shadow-only. */
.login-page .card {
    border: none !important;
    box-shadow: none !important;
}
.login-box-msg {
    color: var(--ink-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
.login-page .input-group-text {
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-left: none !important;
    color: var(--ink-tertiary);
}
.login-page .form-control {
    border-right: none !important;
}
.login-page .input-group-text svg.lucide {
    width: 15px;
    height: 15px;
}

/* ---------------------------------------------------------------------- */
/* Footer - never had its own size rule, so it was sitting at the browser  */
/* default (16px) while every other bit of UI text was tightened to        */
/* ~13.5px, making it read as oversized by comparison.                     */
/* ---------------------------------------------------------------------- */

.main-footer {
    font-size: 12.5px;
    color: var(--ink-tertiary);
    padding: 10px 18px !important;
}
.main-footer a { color: var(--ink-secondary); }
.main-footer a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* Sidebar nav-header groups - collapsible (see base.html for the JS that  */
/* groups each header with the nav-items that follow it, toggles them on   */
/* click, and persists the open/closed state in localStorage per label).   */
/* ---------------------------------------------------------------------- */

.nav-sidebar > .nav-header.nav-header-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.nav-header-chevron {
    width: 13px !important;
    height: 13px !important;
    color: var(--ink-tertiary);
    transition: transform 150ms ease;
}
.nav-header-toggle.is-collapsed .nav-header-chevron {
    transform: rotate(-90deg);
}

/* ---------------------------------------------------------------------- */
/* Print - AdminLTE ships Bootstrap's d-print-* utilities but never uses   */
/* them on its own chrome, so printing any page as-is includes the         */
/* sidebar, top navbar, and breadcrumb, and lets the content-wrapper's     */
/* margin-left clip a chunk of the printed content off the left edge.      */
/* Reports meant to leave the system (e.g. Results, for a parent or a      */
/* committee) can opt individual controls out with d-print-none.           */
/* ---------------------------------------------------------------------- */

@media print {
    .main-sidebar, .main-header, .content-header .breadcrumb, .main-footer {
        display: none !important;
    }
    .content-wrapper {
        margin-left: 0 !important;
    }
    .card {
        border: none !important;
    }
}

/* ---------------------------------------------------------------------- */
/* Login-style pages (login, choose-role, parent registration, ...) -      */
/* AdminLTE's .login-page/.register-page fixes height: 100vh to vertically */
/* center short content, but a fixed height doesn't grow for content       */
/* taller than the viewport - the parent registration form (multiple      */
/* children, address, etc.) overflows it, and since the container can't   */
/* grow, the overflow paints outside the page's scrollable area instead   */
/* of the page just growing taller, clipping the top of the form off-     */
/* screen with no way to scroll to it. min-height keeps every short page  */
/* centered exactly as before, but lets a tall one grow and scroll.       */
/* ---------------------------------------------------------------------- */
.login-page, .register-page {
    height: auto;
    min-height: 100vh;
}