/* Gurukul Mitra — design system. Tokens + reusable component classes,
   introduced in Phase 8 to replace page-by-page inline styling. */

:root {
    --brand: #2A2470;
    --brand-light: #4E3FB8;
    --brand-soft: #EFEDFB;
    --accent: #F5B33C;

    --success: #1F8A5B;
    --success-text: #186B49;
    --success-bg: #EAF6F0;
    --success-border: #BFE3D2;

    --warning: #B8790E;
    --warning-text: #A6521A;
    --warning-bg: #FFF4EA;
    --warning-border: #F3DDBC;

    --danger: #C23A2B;
    --danger-text: #A6301F;
    --danger-bg: #FDEDEB;
    --danger-border: #F2C6C0;

    --info: #2A6FB0;
    --info-bg: #EAF2FB;
    --info-border: #C7DDF3;

    --ink: #1B1A22;
    --ink-soft: #4A4560;
    --ink-muted: #5A5474;
    --ink-faint: #7D778F;
    --ink-fainter: #8B85A0;

    --bg: #F6F5F8;
    --surface: #ffffff;
    --surface-alt: #FAF9FC;
    --surface-hover: #F5F3FA;

    --border: #E3E0EC;
    --border-soft: #EDEBF3;
    --border-input: #E0DCEC;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(27, 22, 60, .05);
    --shadow: 0 2px 10px rgba(27, 22, 60, .06);
    --shadow-lg: 0 10px 30px rgba(27, 22, 60, .12);

    --sidebar-w: 264px;
    --topbar-h: 60px;
    --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}

a { color: inherit; }

/* Default icon size — every more specific rule below (.kpi-icon svg, .btn svg,
   .sidebar-icon, .icon-24, ...) overrides this via higher selector specificity.
   Without this, a bare <svg> with no width/height falls back to the browser's
   huge intrinsic default. */
svg { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }

.mono { font-family: var(--mono); }
.icon-24 { width: 24px; height: 24px; }

/* ---------- App shell ---------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--brand);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    transition: transform .22s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 20px;
    flex: none;
}

.sidebar-brand-mark {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(160deg, var(--brand-light), var(--brand));
    border: 1px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--accent); font-weight: 700;
    flex: none;
}

.sidebar-brand-text { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }

/* Persistent "which school am I in" indicator — a multi-tenant platform
   with one shared login/sidebar chrome per user, not per-school branding,
   so this is the one place every page reassures which tenant is active. */
.sidebar-school-context {
    display: flex; align-items: center; gap: 8px;
    margin: 0 14px 14px; padding: 8px 10px;
    background: var(--brand-soft); border-radius: var(--radius);
    font-size: 12px; font-weight: 600; color: var(--brand);
    overflow: hidden;
}
.sidebar-school-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-school-icon { width: 14px; height: 14px; flex: none; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 12px 16px;
}

.sidebar-link, .sidebar-group summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 13.2px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background .15s ease, color .15s ease;
    margin-bottom: 2px;
}

.sidebar-link:hover, .sidebar-group summary:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.is-active { background: rgba(255,255,255,.14); color: #fff; }

.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group { margin-bottom: 2px; }
.sidebar-group summary { justify-content: space-between; }
.sidebar-group .sidebar-group-label { display: flex; align-items: center; gap: 11px; }
.sidebar-group[open] summary { color: #fff; }
.sidebar-group .chev { width: 14px; height: 14px; flex: none; transition: transform .18s ease; opacity: .6; }
.sidebar-group[open] .chev { transform: rotate(90deg); }

.sidebar-subitems { padding: 2px 0 6px 33px; display: flex; flex-direction: column; gap: 1px; }
.sidebar-subitem {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: 12.6px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.sidebar-subitem:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-subitem.is-active { background: rgba(255,255,255,.15); color: #fff; }

.sidebar-icon { width: 17px; height: 17px; flex: none; opacity: .85; }

.main-col { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.impersonation-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 26px;
    background: var(--warning-text);
    color: #fff;
    font-size: 12.5px; font-weight: 600;
}
.impersonation-banner svg { width: 16px; height: 16px; flex: none; }

.topbar {
    height: var(--topbar-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-user { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); text-align: right; line-height: 1.3; }
.topbar-user b { color: var(--ink-soft); font-weight: 700; }

.topbar-search { position: relative; flex: 1; max-width: 360px; }
.topbar-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-fainter); pointer-events: none; }
.topbar-search input[type="text"] {
    width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-input); background: var(--surface-alt); font-size: 12.5px; color: var(--ink);
}
.topbar-search input:focus { outline: none; border-color: var(--brand-light); background: var(--surface); }
.topbar-search-results {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-height: 420px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    z-index: 30;
}
.topbar-search-results.is-open { display: block; }
.topbar-search-empty { padding: 16px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }
.topbar-search-row { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.topbar-search-row:last-child { border-bottom: none; }
.topbar-search-row-main { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topbar-search-subtitle { color: var(--ink-faint); font-size: 11.5px; }
.topbar-search-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.topbar-search-actions a {
    font-size: 11.5px; font-weight: 700; color: var(--brand); text-decoration: none;
    padding: 3px 9px; border-radius: var(--radius-pill); background: var(--brand-soft);
}
.topbar-search-actions a:hover { background: var(--surface-hover); }
.topbar-search-viewall {
    display: block; padding: 10px 14px; border-top: 1px solid var(--border-soft); text-align: center;
    font-size: 12px; font-weight: 700; color: var(--brand); text-decoration: none; background: var(--surface-alt);
}
.topbar-search-viewall:hover { background: var(--surface-hover); }

.sidebar-toggle {
    display: none;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    width: 34px; height: 34px; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.sidebar-toggle svg { width: 18px; height: 18px; }

.sidebar-backdrop { display: none; }

main.app-main {
    padding: 26px;
    animation: fade-in .25s ease;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Layout helpers ---------- */

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid-cards { display: grid; gap: 14px; }

/* A narrow fixed-width side column next to a flexible main column — for
   screens like fee collection where a history/reference panel shouldn't
   compete for width with the working area. Collapses to one column on
   narrow screens (the side panel drops below, not beside). */
.split-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) {
    .split-layout { grid-template-columns: 1fr; }
}

.page-head { display: flex; flex-direction: column; gap: 2px; }
.eyebrow { font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); font-weight: 700; text-decoration: none; }
a.eyebrow:hover { color: var(--brand); }
.page-title { font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.page-subtitle { font-size: 12.5px; color: var(--ink-faint); margin: 4px 0 0; }

.divider { border: none; border-top: 1px solid var(--border-soft); margin: 4px 0; }

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

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px 22px; }
.card-header {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14.5px; font-weight: 700;
}
.card-header .hint { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-faint); }

/* ---------- KPI stat cards ---------- */

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
    /* A grid/flex item defaults to min-width:auto, which lets it demand at
       least its content's own unbroken width — for a big ₹ figure with no
       natural break point, that pushes the card itself wider than its grid
       track instead of letting the number wrap, spilling text past the
       card's edge. min-width:0 allows the card to actually honor the
       track's width. */
    min-width: 0;
}
.kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi-icon {
    width: 36px; height: 36px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand);
}
.kpi-icon svg { width: 18px; height: 18px; }
/* overflow-wrap lets a long unbroken number (no spaces/hyphens to break at
   otherwise) wrap instead of overflowing past the card once the card is
   narrower than the figure's own natural width. */
.kpi-value { font-size: 25px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.kpi-label { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.kpi-sub { font-size: 11.5px; color: var(--ink-fainter); }

/* ---------- Tables (grid-row based) ---------- */

.table-scroll { overflow-x: auto; }

/* Exam Timetable grid — a genuine spreadsheet-shaped table (rowspan/colspan
   date+time header), deliberately real <table> markup rather than this
   app's usual .table-row list convention, which has no way to express a
   2-level header. Horizontal scroll (via the shared .table-scroll wrapper)
   is the correct mobile-safe behavior here rather than stacking, since a
   column's position (which date/session) is itself essential information
   that collapsing to cards would lose. */
.exam-grid { border-collapse: collapse; width: 100%; }
.exam-grid th, .exam-grid td { border: 1px solid var(--border-soft); padding: 8px 10px; font-size: 12.5px; text-align: center; white-space: nowrap; }
.exam-grid thead th { background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 11px; letter-spacing: .02em; }
.exam-grid .exam-grid-corner { background: var(--surface-alt); text-align: left; position: sticky; left: 0; z-index: 1; }
.exam-grid .exam-grid-time { font-weight: 500; color: var(--ink-soft); }
.exam-grid td select { width: 100%; min-width: 110px; font-size: 12px; }
.table-head-row {
    display: grid; align-items: center; gap: 16px;
    padding: 10px 20px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-soft);
    font-size: 10.8px; letter-spacing: .07em; color: var(--ink-faint); font-weight: 700;
    white-space: nowrap;
}
.table-row {
    display: grid; align-items: center; gap: 16px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    transition: background .12s ease;
}
.table-row:last-child { border-bottom: none; }
.table-row:hover { background: var(--surface-alt); }
a.table-row { text-decoration: none; color: inherit; }
.table-empty { padding: 40px 20px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.table-empty svg { width: 30px; height: 30px; margin-bottom: 10px; opacity: .4; }

/* ---------- Badges / pills ---------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: var(--radius-pill);
    line-height: 1.6;
    white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-success .badge-dot { background: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-warning .badge-dot { background: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-danger .badge-dot { background: var(--danger); }
.badge-neutral { background: var(--surface-hover); color: var(--ink-fainter); }
.badge-neutral .badge-dot { background: var(--ink-fainter); }
.badge-info { background: var(--info-bg); color: var(--info); }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    line-height: 1.3;
}
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-light); }
.btn-secondary { background: var(--surface); color: var(--ink-soft); border-color: var(--border-input); }
.btn-secondary:hover { background: var(--surface-alt); border-color: var(--brand-light); }
.btn-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-text { background: none; color: var(--ink-faint); padding: 9px 6px; }
.btn-text:hover { color: var(--brand); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }

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

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.field .field-hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=search], select, textarea {
    width: 100%;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--font);
    background: var(--surface);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
textarea { resize: vertical; min-height: 70px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* ---------- Flash / alerts ---------- */

.alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: var(--radius);
    padding: 12px 15px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    animation: fade-in .2s ease;
}
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }

/* ---------- Progress ---------- */

.progress { background: var(--border-soft); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); transition: width .3s ease; }

/* ---------- Misc ---------- */

.pill-toggle {
    width: 42px; height: 24px; border-radius: 14px; border: none; padding: 3px;
    cursor: pointer; display: flex; transition: background .15s ease;
}
.pill-toggle > span { width: 18px; height: 18px; border-radius: 50%; background: #fff; display: block; box-shadow: 0 1px 3px rgba(20,16,50,.3); transition: margin .15s ease; }

.chip {
    display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
    padding: 4px 11px; border-radius: var(--radius-pill);
    background: var(--surface-hover); color: var(--ink-fainter);
}
.chip-on { background: var(--success-bg); color: var(--success-text); }

.empty-state { padding: 40px 20px; text-align: center; color: var(--ink-faint); }
.empty-state svg { width: 34px; height: 34px; opacity: .35; margin-bottom: 10px; }
.empty-state p { margin: 0; font-size: 13.5px; }

/* ---------- Auth / blank layout ---------- */

.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #221D5C 0%, #2A2470 45%, #4E3FB8 100%);
    padding: 24px;
}
.auth-card {
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 34px 32px; width: 100%; max-width: 400px;
    animation: fade-in .3s ease;
}
.auth-card-wide { max-width: 640px; }
.auth-card-hero { max-width: 880px; }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }

.cta-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 18px; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cta-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cta-card .cta-icon {
    width: 38px; height: 38px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand);
}
.cta-card.cta-card-primary { background: linear-gradient(160deg, #4E3FB8, #2A2470); border-color: transparent; color: #fff; }
.cta-card.cta-card-primary .cta-icon { background: rgba(255,255,255,.16); color: #fff; }
.cta-card.cta-card-primary p { color: rgba(255,255,255,.78); }

/* ---------- Slide-over drawer (payroll register employee detail, etc.) ---------- */

.drawer-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20,16,50,.35);
    z-index: 45;
}
.drawer-backdrop.is-open { display: block; animation: fade-in .15s ease; }

.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 100vw;
    background: var(--surface);
    z-index: 50;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .22s ease;
}
.drawer.is-open { transform: translateX(0); }

.drawer-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.drawer-panel.is-visible { display: flex; }

.drawer-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
    flex: none;
}
.drawer-emp-name { font-size: 15px; font-weight: 700; }
.drawer-emp-code { font-size: 12px; color: var(--ink-faint); margin-top: 3px; }

.drawer-net-pay {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    background: var(--brand-soft);
    font-weight: 700; font-size: 13.5px;
    flex: none;
}
.drawer-net-pay .mono { color: var(--brand); font-size: 18px; overflow-wrap: break-word; text-align: right; }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex; flex-direction: column; gap: 18px;
}

.drawer-section-head {
    font-size: 10.8px; font-weight: 700; letter-spacing: .07em;
    color: var(--ink-faint);
    margin-bottom: 6px;
}
.drawer-section-head.earnings { color: var(--success-text); }
.drawer-section-head.deductions { color: var(--danger-text); }

.drawer-line {
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-soft);
}
.drawer-line:last-child { border-bottom: none; }

.drawer-add { font-size: 12.5px; }
.drawer-add summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 700;
    list-style: none;
    padding: 4px 0;
}
.drawer-add summary::-webkit-details-marker { display: none; }

.drawer-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-soft);
    flex: none;
}

@media (max-width: 560px) {
    .drawer { width: 100vw; }
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.is-open { transform: translateX(0); }
    .main-col { margin-left: 0; }
    .sidebar-toggle { display: flex; }
    .sidebar-backdrop.is-open {
        display: block; position: fixed; inset: 0; background: rgba(20,16,50,.35); z-index: 30;
        animation: fade-in .15s ease;
    }
    main.app-main { padding: 18px; }
    .topbar { padding: 0 16px; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 560px) {
    .card-pad { padding: 16px; }
    .form-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 26px 22px; }
    .topbar-search { display: none; }
}

/* ---------- Mobile: tables → stacked cards, bigger touch targets ---------- */

/* Hidden by default/on desktop — the mobile breakpoint below overrides this
   back to visible. Declared here, BEFORE that media query, so the override
   wins on source order once inside the breakpoint (both rules share the
   same specificity — a media-scoped rule doesn't win purely for being
   inside a media query, only for coming later in the cascade). */
.cell-label { display: none; }

@media (max-width: 700px) {
    /* Every .table-row/.table-head-row across the app is built with an
       inline grid-template-columns tuned for desktop column widths (~90
       view files, ~125 distinct column layouts) — rather than hand-editing
       every one, every such row collapses into a vertically-stacked mini
       card below this width, the standard "responsive table becomes cards"
       technique. The header row (just column labels, never interactive
       anywhere in this app) is hidden since a stacked layout has no
       columns for it to label. !important is required specifically to
       overrule each row's own inline style="grid-template-columns:..." —
       scoped to this one breakpoint, it never touches the desktop rule. */
    .table-head-row { display: none; }
    .table-row {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 5px;
        padding: 14px 16px;
    }
    .table-row > * { text-align: left !important; white-space: normal !important; }

    /* Opt-in label for a stacked cell whose meaning was only clear from its
       desktop column header (e.g. three bare currency figures in a row —
       gross/deductions/net — read fine under a header, not stacked with no
       header at all). A view adds <span class="cell-label">Gross:</span>
       right before the value only where genuinely ambiguous — most cells
       (a name, a status badge, a single contextually-obvious amount)
       don't need this at all. */
    .cell-label { display: inline; font-weight: 700; color: var(--ink-faint); margin-right: 5px; }

    /* A button/filter bar (page-head actions, list filters, etc.) is a
       plain flex .row with no wrap — comfortably fits on a laptop but
       several buttons or selects side by side will not fit a phone
       screen. Wrapping only ever activates when content doesn't fit, so
       this cannot change how a .row already renders on a desktop-width
       screen. */
    .row { flex-wrap: wrap; }
    .row > .btn, .row > form { flex-shrink: 0; }

    /* Bigger touch targets — Apple/Google both recommend ~44px minimum.
       Desktop's tighter, denser buttons are unaffected outside this
       breakpoint. */
    .btn { min-height: 40px; padding: 10px 16px; }
    .btn-sm { min-height: 36px; padding: 8px 14px; }
    .btn-text { min-height: 40px; min-width: 40px; padding: 8px 10px; }
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=date], input[type=tel], input[type=search], select, textarea {
        min-height: 42px;
        font-size: 16px; /* iOS Safari auto-zooms into any input below 16px — this avoids that jarring zoom-on-focus. */
    }

    /* A 2-column kpi-grid at phone width gives each card ~150px — a big ₹
       figure at the desktop 25px size is prone to needing to wrap even with
       the overflow-wrap fix above; shrinking it makes a one-line fit the
       common case instead of the exception. */
    .kpi-value { font-size: 19px; }
}

/* Gurukul Mitra — the rule-based command assistant. Floating launcher +
   panel, deliberately outside .app-shell so it floats above the sidebar/
   topbar without disturbing their layout. */
.mitra-launcher {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(160deg, var(--brand-light), var(--brand)); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
}
.mitra-launcher svg { width: 22px; height: 22px; }
.mitra-launcher:hover { filter: brightness(1.08); }

.mitra-panel {
    display: none; position: fixed; right: 22px; bottom: 86px; z-index: 60;
    width: 360px; max-height: min(520px, calc(100vh - 130px)); flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.mitra-panel.is-open { display: flex; }
.mitra-panel-header {
    display: flex; align-items: center; gap: 8px; padding: 14px 16px;
    background: linear-gradient(160deg, var(--brand-light), var(--brand)); color: #fff; flex-shrink: 0;
}
.mitra-panel-header svg { width: 18px; height: 18px; }
.mitra-panel-title { font-weight: 700; font-size: 13.5px; }
.mitra-panel-subtitle { font-size: 11px; opacity: .85; }
.mitra-panel-close { margin-left: auto; background: none; border: none; color: #fff; cursor: pointer; opacity: .85; display: flex; }
.mitra-panel-close:hover { opacity: 1; }
.mitra-panel-close svg { width: 16px; height: 16px; }

.mitra-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mitra-msg { font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: var(--radius); max-width: 88%; white-space: pre-wrap; }
.mitra-msg-user { align-self: flex-end; background: var(--brand-soft); color: var(--brand); }
.mitra-msg-assistant { align-self: flex-start; background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border-soft); }
.mitra-msg-assistant.is-error { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }

.mitra-options { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mitra-option {
    display: block; text-align: left; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft); background: var(--surface); cursor: pointer; font-size: 12px;
}
.mitra-option:hover { background: var(--surface-hover); border-color: var(--border-input); }
.mitra-option b { display: block; color: var(--ink); }
.mitra-option span { color: var(--ink-faint); font-size: 11px; }

.mitra-suggestions { padding: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.mitra-suggestion {
    font-size: 11px; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-input);
    background: var(--surface-alt); color: var(--ink-muted); cursor: pointer;
}
.mitra-suggestion:hover { background: var(--surface-hover); }

.mitra-panel-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.mitra-panel-form input {
    flex: 1; height: 36px; padding: 0 12px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-input); background: var(--surface-alt); font-size: 12.5px; color: var(--ink);
}
.mitra-panel-form input:focus { outline: none; border-color: var(--brand-light); background: var(--surface); }
.mitra-panel-form button {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--brand); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mitra-panel-form button svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
    .mitra-panel { right: 12px; left: 12px; width: auto; bottom: 78px; }
    .mitra-launcher { right: 14px; bottom: 14px; }
}

/* Generic confirm-dialog modal — first use is the attendance "you're about
   to mark these students absent" confirmation, but deliberately named for
   reuse by any future confirm-before-you-save flow. */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(20, 16, 50, .4); z-index: 90; }
.modal-backdrop.is-open { display: block; }
.modal-box {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 91; width: min(440px, 92vw); max-height: min(520px, 84vh);
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    flex-direction: column; overflow: hidden;
}
.modal-box.is-open { display: flex; }
.modal-header {
    display: flex; align-items: center; gap: 10px; padding: 16px 18px;
    background: linear-gradient(160deg, var(--warning), var(--danger)); color: #fff; flex-shrink: 0;
}
.modal-header svg { width: 20px; height: 20px; flex-shrink: 0; }
.modal-title { font-weight: 700; font-size: 14px; }
.modal-subtitle { font-size: 11.5px; opacity: .9; margin-top: 1px; }
.modal-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.modal-body-list { display: flex; flex-direction: column; gap: 6px; }
.modal-body-list-item {
    font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius-sm);
    background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border);
}
.modal-note { font-size: 12px; color: var(--ink-muted); padding: 0 18px 14px; }
.modal-actions { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.modal-actions .btn { flex: 1; }