/* ── Khyber Academy — custom styles (light, print-friendly) ──────────────── */

:root {
    --ka-purple:    #5b4a8a;   /* brand — navbar, headings, active nav */
    --ka-purple-dk: #453873;   /* darker */
    --ka-purple-lt: #7d6bb0;   /* lighter accent */
    --ka-purple-bg: #f3f1f9;   /* very light purple tint for fills */
    --ka-gold:      #c8a24b;   /* laurel gold accent */
    --sidebar-w:    244px;
    --ka-canvas:    #f6f7fb;   /* app content canvas */
    --ka-line:      #e9e7f2;   /* hairline borders on light surfaces */
    --ka-ink:       #2f2b3a;   /* primary text */
    --ka-muted:     #8a8797;   /* secondary text */
    --ka-radius:    16px;      /* card rounding */
    --ka-shadow:    0 2px 10px rgba(69,56,115,.06);
    --ka-shadow-hi: 0 8px 24px rgba(69,56,115,.12);
}

body {
    background: var(--ka-canvas);
    color: var(--ka-ink);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Development-mode banner (local/non-production only) ─────────────────────
   Slim red strip at the very top of the body, in normal flow (first child), so
   it introduces no offset math with the sticky navbar/sidebar: it sits above the
   navbar on load and simply scrolls away, the navbar then sticking as usual. */
.dev-banner {
    background: #c0392b;
    color: #fff;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    line-height: 1.2;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    position: relative;
    z-index: 1090;
}
/* The standalone centred pages (login / change-password / 404) vertically-centre
   their body; there a fixed strip pins the banner to the top instead of the middle. */
body.align-items-center .dev-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 2000;
}


/* ── Top bar — Anmol Welfare layout ──────────────────────────────────────────────
   Purple bar: brand + (desktop) this section's tabs inline + tools; the section pills sit
   under it. On phones the section's tabs move to the bottom tab bar (.ka-tabbar). */
.ka-top {
    position: sticky; top: 0; z-index: 1030;
    background: linear-gradient(90deg, var(--ka-purple-dk), var(--ka-purple));
    color: #fff; box-shadow: 0 2px 6px rgba(69,56,115,.25);
}
.ka-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 58px; }
.ka-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex-shrink: 0; }
.ka-brand:hover { color: #fff; }
.ka-brand img { height: 34px; background: #fff; border-radius: 8px; padding: 2px 6px; }
.ka-brand-t { line-height: 1.15; display: flex; flex-direction: column; }
.ka-brand-t b { font-size: 14px; font-weight: 700; }
.ka-brand-t span { font-size: 11px; color: #e4dcf5; }
.ka-topnav { display: none; gap: 6px; overflow-x: auto; margin-left: 14px; scrollbar-width: none; }
.ka-topnav a {
    color: #e4dcf5; font-size: .92rem; font-weight: 600; text-decoration: none;
    padding: 8px 15px; border-radius: 10px; white-space: nowrap; transition: background .12s;
}
.ka-topnav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.ka-topnav a.on { background: rgba(255,255,255,.22); color: #fff; box-shadow: inset 0 -3px 0 var(--ka-gold); }
.ka-tools { display: flex; align-items: center; gap: 6px; }
.ka-tool {
    color: #fff; font-size: 20px; width: 42px; height: 42px; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
}
.ka-tool:hover { background: rgba(255,255,255,.18); color: #fff; }
.ka-tool.on { background: #ffd54a; color: var(--ka-purple-dk); }
.ka-secs {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 8px 16px 10px; border-top: 1px solid rgba(255,255,255,.15);
}
.ka-secs::-webkit-scrollbar, .ka-topnav::-webkit-scrollbar { display: none; }
.ka-secs a {
    color: #e4dcf5; font-size: .85rem; font-weight: 600; text-decoration: none;
    padding: 7px 14px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
}
.ka-secs a:hover { background: rgba(255,255,255,.14); color: #fff; }
.ka-secs a.on { background: #fff; color: var(--ka-purple-dk); }
@media (min-width: 768px) {
    .ka-topbar { padding: 10px 28px; }
    .ka-secs { padding-left: 28px; padding-right: 28px; }
    .ka-topnav { display: flex; }
}

/* ── Phone bottom tab bar (shown only <768px via .d-md-none) ───────────────────── */
.ka-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: #fff; border-top: 1px solid #e5e3ef; box-shadow: 0 -2px 10px rgba(69,56,115,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ka-tabbar a {
    flex: 1; min-width: 0; text-align: center; padding: 8px 2px 7px;
    font-size: 10.5px; font-weight: 600; color: #8a8797; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s;
}
.ka-tabbar a i { display: block; font-size: 20px; margin-bottom: 2px; }
.ka-tabbar a.on { color: var(--ka-purple); box-shadow: inset 0 3px 0 var(--ka-purple); }
.ka-tabbar a:active { background: var(--ka-purple-bg); }

/* ── Big solid buttons (Anmol look) — every button is a comfortable, filled tap target ─── */
.btn { min-height: 44px; padding: .55rem 1.15rem; font-size: 1rem; font-weight: 600; border-radius: 10px; }
.btn-sm { min-height: 40px; padding: .4rem .95rem; font-size: .92rem; }
.table .btn-sm, .table .btn-group-sm > .btn { min-height: 34px; padding: .25rem .65rem; font-size: .85rem; }
.btn-outline-purple { background: var(--ka-purple); border-color: var(--ka-purple); color: #fff; box-shadow: 0 2px 8px rgba(91,74,138,.22); }
.btn-outline-purple:hover, .btn-outline-purple:focus { background: var(--ka-purple-dk); border-color: var(--ka-purple-dk); color: #fff; }
.btn-outline-purple.disabled, .btn-outline-purple:disabled { background: var(--ka-purple); border-color: var(--ka-purple); color: #fff; opacity: .4; }
.btn-outline-secondary { background: #fff; }
.nav-pills .nav-link, .nav-tabs .nav-link { font-weight: 600; }

/* ── Date / week picker:  [<]  [Mon 31 Aug 2026 ▾]  [>]  (shared partial partials/_weeknav.php) ─── */
.ka-picker { display: inline-flex; align-items: stretch; gap: 8px; }
.ka-picker .pk-arrow {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; min-height: 46px;
    background: var(--ka-purple); color: #fff; border-radius: 10px; text-decoration: none; font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(91,74,138,.22);
}
.ka-picker a.pk-arrow:hover { background: var(--ka-purple-dk); color: #fff; }
.ka-picker .pk-arrow.off { opacity: .35; pointer-events: none; }
.ka-picker .pk-box { position: relative; min-width: 15rem; }
.ka-picker .pk-box .pk-text {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 46px; padding: 0 14px; background: #fff; border: 1.5px solid var(--ka-purple-lt);
    border-radius: 10px; font-weight: 600; color: var(--ka-purple-dk); white-space: nowrap;
}
.ka-picker .pk-box select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* ── Main content ────────────────────────────────────────────────────────── */
.ka-content { flex: 1; min-width: 0; padding: 1.75rem 1.9rem; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ka-line);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.page-header h2 {
    color: var(--ka-purple-dk); font-size: 1.5rem; font-weight: 700; margin: 0;
    letter-spacing: -.01em;
}
.page-header .page-sub { color: var(--ka-muted); font-size: .9rem; margin: .15rem 0 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ka-footer {
    background: transparent;
    border-top: 1px solid var(--ka-line);
    font-size: .8rem;
    color: var(--ka-muted);
    padding: .7rem 1.9rem;
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.stat-card {
    border: 1px solid var(--ka-line);
    border-radius: var(--ka-radius);
    box-shadow: var(--ka-shadow);
    transition: transform .16s ease, box-shadow .16s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--ka-shadow-hi); }
.stat-card .card-body { display: flex; align-items: center; gap: .95rem; padding: 1.1rem 1.15rem; }
.stat-card .stat-icon {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--ka-purple);
    background: var(--ka-purple-bg);
}
.stat-card .stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ka-muted); font-weight: 700; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--ka-purple-dk); line-height: 1.05; letter-spacing: -.02em; }
.stat-card .stat-value.sm { font-size: 1.25rem; }
/* Accent variants — tint the icon chip per tile */
.stat-card.acc-purple .stat-icon { color: #5b4a8a; background: #efeafb; }
.stat-card.acc-gold   .stat-icon { color: #a9812f; background: #f7efdb; }
.stat-card.acc-teal   .stat-icon { color: #2f8a86; background: #dcf1f0; }
.stat-card.acc-pink   .stat-icon { color: #b8557f; background: #fae4ee; }

.card { border: 1px solid var(--ka-line); border-radius: var(--ka-radius); box-shadow: var(--ka-shadow); }
.card-header {
    font-weight: 600; background: #fff;
    border-bottom: 1px solid var(--ka-line);
    border-top-left-radius: var(--ka-radius) !important;
    border-top-right-radius: var(--ka-radius) !important;
    padding: .85rem 1.15rem;
}
.card-body { padding: 1.15rem; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { --bs-table-border-color: transparent; margin-bottom: 0; }
.table thead th {
    background: var(--ka-purple-bg); color: var(--ka-purple-dk);
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: none; padding: .7rem .85rem; white-space: nowrap;
}
.table tbody td { padding: .7rem .85rem; border-color: #f0eef7; vertical-align: middle; }
.table tbody tr { transition: background .12s; }
.table-hover tbody tr:hover { background: var(--ka-purple-bg); }
/* A card wrapping a full-bleed table: let the table meet the rounded corners */
.card > .table-responsive:last-child, .card > .table:last-child { border-bottom-left-radius: var(--ka-radius); border-bottom-right-radius: var(--ka-radius); overflow: hidden; }
/* …except the register grid, which MUST keep its sideways scroll (Mon–Sat) — the
   rule above would otherwise clip it, so the later days can't be reached on mobile. */
.card > .table-responsive.reg-scroll { overflow-x: auto !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { border-radius: 9px; font-weight: 500; }
.btn-purple { background: var(--ka-purple); border-color: var(--ka-purple); color: #fff; box-shadow: 0 2px 8px rgba(91,74,138,.28); }
.btn-purple:hover { background: var(--ka-purple-dk); border-color: var(--ka-purple-dk); color: #fff; box-shadow: 0 4px 12px rgba(69,56,115,.32); }
.text-purple { color: var(--ka-purple) !important; }
.bg-purple { background: var(--ka-purple) !important; }
.badge.bg-purple { font-weight: 600; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-card {
    max-width: 410px; width: 100%; border: none;
    box-shadow: 0 8px 30px rgba(69,56,115,.18);
    border-radius: 14px; overflow: hidden;
}
.login-header { background: linear-gradient(135deg, var(--ka-purple-dk), var(--ka-purple)); color: #fff; padding: 1.75rem 1.5rem 1.4rem; text-align: center; }
.login-header img { max-height: 74px; background:#fff; border-radius: 8px; padding: 6px 12px; }


/* ── App shell on phones (≤767px) — desktop layout is left untouched ────────── */
@media (max-width: 767px) {
    body { background: #eef0f6; }

    /* Centre the content as a phone-width app column, clear of the tab bar. */
    .ka-content {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
        padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0));
    }
    .ka-footer { display: none; }               /* footer info lives in the sidebar drawer on mobile */

    /* Softer, app-like cards. */
    .card { border-radius: 14px; border: 1px solid #e9e7f2; box-shadow: 0 1px 4px rgba(69,56,115,.06); }
    .stat-card { border-radius: 14px; }

    /* Page header sits tighter and reads as a screen title. */
    .page-header { margin-bottom: 1rem; padding-bottom: .5rem; }
    .page-header h2 { font-size: 1.2rem; }

    /* 16px form controls stop iOS zoom-on-focus; roomier tap targets. */
    .form-control, .form-select { font-size: 16px; min-height: 46px; border-radius: 10px; }
    .btn { min-height: 44px; border-radius: 10px; }
    .btn-sm { min-height: 38px; }

    /* Tables scroll horizontally inside their card instead of breaking the column. */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* ── table.table-cards → stacked cards on phones ──────────────────────────
       Each row becomes its own card; each cell a labelled line (data-label).
       The cell tagged .cardtitle is pulled to the top as the card heading. */
    table.table-cards { min-width: 0 !important; }
    table.table-cards thead { display: none; }
    table.table-cards tbody, table.table-cards tfoot { display: block; }
    table.table-cards tr {
        display: flex; flex-direction: column;
        border: 1px solid #e9e7f2; border-radius: 12px;
        background: #fff; box-shadow: 0 1px 3px rgba(69,56,115,.05);
        padding: 8px 13px; margin-bottom: 10px;
    }
    table.table-cards td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
        border: 0 !important; padding: 5px 0; text-align: right;
    }
    table.table-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto; text-align: left;
        font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
        color: #9a97ab;
    }
    table.table-cards td:not([data-label])::before { content: ""; }
    table.table-cards td.cardtitle {
        order: -1; display: block; text-align: left;
        font-size: 1rem; padding: 2px 0 8px; margin-bottom: 4px;
        border-bottom: 1px solid #f0eef7 !important;
    }
    table.table-cards td.cardtitle::before { display: none; }
    /* action-only cell (edit button): right-aligned, no label line taking space. */
    table.table-cards td.cardact { justify-content: flex-end; padding-top: 8px; }
    table.table-cards tfoot tr { background: var(--ka-purple-bg); }

    /* ── register grid: freeze the student column while the week scrolls ─────── */
    table.reg-grid th:first-child, table.reg-grid td:first-child {
        position: sticky; left: 0; z-index: 5;   /* above the in-cell ↺ buttons (z 3) so they slide UNDER the frozen names, not through them */
        box-shadow: 2px 0 5px rgba(69,56,115,.07);
    }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .ka-top, .offcanvas, .offcanvas-backdrop, .ka-footer, .ka-tabbar, .no-print { display: none !important; }
    body, .ka-content { background: #fff !important; }
    .ka-content { padding: 0 !important; }
    .print-only { display: block !important; }
    .ka-content, main { width: 100% !important; flex: none !important; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
    thead { display: table-header-group; }
}

/* ── SUNLIGHT MODE ── high-contrast, high-brightness for reading outdoors. Toggle = sun icon in the
   top bar; remembered per browser (localStorage 'ka_theme'), applied before first paint. ─────────── */
:root[data-theme="sunlight"] {
    --ka-canvas: #ffffff; --ka-ink: #000000; --ka-muted: #243040; --ka-line: #111111;
    --ka-purple: #3b2d6b; --ka-purple-dk: #2a1f55; --ka-purple-lt: #3b2d6b; --ka-purple-bg: #e6e0f7;
    --bs-body-bg: #ffffff; --bs-body-color: #000000; --bs-border-color: #111111; --bs-secondary-color: #243040;
}
:root[data-theme="sunlight"] body { background: #fff; color: #000; font-weight: 600; }
:root[data-theme="sunlight"] .text-muted, :root[data-theme="sunlight"] .page-header .page-sub { color: #243040 !important; }
:root[data-theme="sunlight"] .card, :root[data-theme="sunlight"] .stat-card { border: 2px solid #111; box-shadow: none; }
:root[data-theme="sunlight"] .card-header { border-bottom: 2px solid #111; }
:root[data-theme="sunlight"] .table thead th { background: #e6e0f7; color: #000; border-bottom: 2px solid #111; }
:root[data-theme="sunlight"] .table tbody td { border-color: #8a97a6; }
:root[data-theme="sunlight"] .form-control, :root[data-theme="sunlight"] .form-select { border: 2px solid #222; color: #000; font-weight: 600; background-color: #fff; }
:root[data-theme="sunlight"] .btn-outline-secondary { border: 2px solid #222; color: #000; }
:root[data-theme="sunlight"] .badge.bg-light { border-color: #111 !important; color: #000 !important; }
:root[data-theme="sunlight"] .ka-picker .pk-box .pk-text { border: 2px solid #111; color: #000; }
:root[data-theme="sunlight"] .ka-tabbar { border-top: 2px solid #111; }
:root[data-theme="sunlight"] .ka-tabbar a { color: #243040; }
:root[data-theme="sunlight"] .ka-tabbar a.on { color: var(--ka-purple-dk); }
:root[data-theme="sunlight"] .alert { border-width: 2px; }

/* Phone: the picker spans the row; the date box shrinks instead of overflowing. */
@media (max-width: 767px) {
    .ka-picker { display: flex; width: 100%; }
    .ka-picker .pk-box { flex: 1; min-width: 0; }
    .ka-picker .pk-box .pk-text { padding: 0 10px; font-size: .88rem; }
    .ka-picker .pk-box .pk-text > span { overflow: hidden; text-overflow: ellipsis; }
}

/* ── Consistent page header + uniform controls (2026-10-06) ───────────────────────────────────
   Every page: title block left, ONE actions group right (.ka-actions, Year/Month picker always its
   last = far-right item) — so the right-hand controls never hop between tabs. A min-height keeps the
   toolbar row below at the same y on every page. All text boxes / selects / buttons share ONE height + font. */
.page-header { align-items: flex-start; min-height: 80px; }
.page-header > div:first-child { min-width: 0; }
.ka-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.ka-actions form { margin: 0; display: flex; gap: 8px; align-items: center; }
.ka-actions > .dropdown { display: inline-block; }

.btn, .btn-sm { min-height: 42px; font-size: .95rem; }
.table .btn, .table .btn-sm, .table .btn-group-sm > .btn { min-height: 36px; font-size: .88rem; }
.ka-content .form-control, .ka-content .form-select,
.ka-content .form-control-sm, .ka-content .form-select-sm {
    min-height: 42px; font-size: .95rem; padding-top: .4rem; padding-bottom: .4rem; border-radius: 10px;
}
.ka-content .form-control-sm, .ka-content .form-select-sm { padding-left: .75rem; }
.ka-content .table .form-control, .ka-content .table .form-select,
.ka-content .table .form-control-sm, .ka-content .table .form-select-sm { min-height: 38px; }
.ka-content textarea.form-control { min-height: 0; }
.ka-picker .pk-arrow { min-height: 42px; width: 42px; }
.ka-picker .pk-box .pk-text { min-height: 42px; font-size: .95rem; }
@media (max-width: 767px) {
    .form-control, .form-select { font-size: 16px; min-height: 44px; }
    .page-header { min-height: 0; }
}

.ka-picker .pk-now { background:#1a8a5a; color:#fff; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:6px; }

@media (max-width: 767px) { .ka-picker .pk-wk { display: none; } }

/* ── ONE type + control scale for the whole admin app (`.ka-tight` is on <main class="ka-content">; 2026-10-06) ────────────
   Text:     title 1.35rem · step/section heading .9rem · controls + table text .8rem · labels/hints/notes .75rem · table heads + captions .7rem
   Controls: 34px tall (32px in tables) with .8rem text — mouse/trackpad screens only. Touch devices (pointer: coarse) keep the big 42–44px
             controls and 16px inputs (stops iOS zoom, easy tapping). Text rules use :where() so any page-specific size still wins. */
.ka-tight .page-header h2 { font-size: 1.35rem; }
.ka-tight .page-header .small, .ka-tight .page-header .page-sub { font-size: .8rem; }
.ka-tight .ka-step { font-size: .9rem; }
:where(.ka-tight) .small, :where(.ka-tight) .form-label, :where(.ka-tight) .form-text { font-size: .75rem; }
.ka-tight summary, .ka-tight summary.small { font-size: .8rem; }
:where(.ka-tight) :where(.card .table), :where(.ka-tight) :where(.card .table.small) { font-size: .8rem; }
.ka-tight .stat-label { font-size: .68rem; }
.ka-tight .stat-value, .ka-tight .stat-value.sm { font-size: 1.15rem; }
.ka-tight .card-header { font-size: .9rem; }
.ka-actions { gap: 6px; }
.ka-actions form { gap: 6px; }
@media (pointer: fine) {
    .ka-tight .btn, .ka-tight .btn-sm { min-height: 34px; font-size: .8rem; padding: .2rem .65rem; border-radius: 8px; white-space: nowrap; }
    .ka-tight .btn i { font-size: .85rem; }
    .ka-tight .form-select, .ka-tight .form-select-sm, .ka-tight input.form-control, .ka-tight input.form-control-sm {
        min-height: 34px; height: 34px; font-size: .8rem; padding-top: .15rem; padding-bottom: .15rem; border-radius: 8px; }
    .ka-tight .table .btn, .ka-tight .table .btn-sm { min-height: 32px; }
    .ka-tight .table .form-select, .ka-tight .table input.form-control, .ka-tight .table .form-select-sm, .ka-tight .table input.form-control-sm { min-height: 32px; height: 32px; }
    .ka-tight textarea.form-control { font-size: .8rem; }
    .ka-tight .ka-picker { gap: 5px; }
    .ka-tight .ka-picker .pk-arrow { width: 34px; min-height: 34px; font-size: .85rem; border-radius: 8px; }
    .ka-tight .ka-picker .pk-box { min-width: 11rem; }
    .ka-tight .ka-picker .pk-box .pk-text { min-height: 34px; font-size: .8rem; padding: 0 10px; border-radius: 8px; }
}