/* =========================================================
   SYSTEM — design tokens & shared components
   A warm "ledger & seal" theme: dark ink surfaces, a brass/gold
   accent standing in for an official stamp, and a monospaced
   figure style for money — grounded in the paper-ledger and
   stamped-document language of school/finance admin work.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* -- surfaces (kept the old variable names so every page/inline
       style using var(--line) etc. repaints automatically) -- */
    --bg: #120E09;
    --card: #1C160E;
    --card2: #251D12;
    --card3: #2E2416;
    --line: rgba(232, 210, 165, .14);
    --line-strong: rgba(232, 210, 165, .26);
    --text: #F1E7D4;
    --muted: #B2A183;
    --muted-2: #7E7157;

    /* -- accent: brass / seal gold, standing in for the old cyan -- */
    --accent: #C89B3C;
    --accent-2: #E7C158;
    --accent-ink: #241B08;
    --accent-soft: rgba(200, 155, 60, .16);

    /* -- semantic ledger colors: sage for income/positive, brick for
       expense/negative — literal ledger-ink conventions -- */
    --sage: #7FA87A;
    --sage-bg: rgba(127, 168, 122, .16);
    --brick: #C15C46;
    --brick-bg: rgba(193, 92, 70, .16);

    --radius-sm: 8px;
    --radius-md: 13px;
    --radius-lg: 20px;
    --shadow-card: 0 18px 44px -18px rgba(8, 5, 2, .65);
    --shadow-pop: 0 24px 60px -14px rgba(8, 5, 2, .75);

    --font-display: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
    /* Solid fallback color, set explicitly (not just via the gradient
       layers below). Android's Chrome tints the system gesture/nav bar
       of an installed standalone PWA by sampling the page's actual
       background-color — gradients alone don't count as one, so without
       this line that color stays "transparent" and Chrome paints the
       bottom system bar white instead of matching the app.
       !important because Bootstrap's reboot.css sets `body{background-
       color:#fff}` at the same specificity, loaded just before this file. */
    background-color: var(--bg) !important;
    background-image:
        radial-gradient(circle at 14% -4%, rgba(200, 155, 60, .10), transparent 42%),
        radial-gradient(circle at 90% 106%, rgba(127, 168, 122, .06), transparent 45%),
        linear-gradient(180deg, #16110B, #100C08 65%) !important;
    background-repeat: no-repeat !important;
    color: var(--text);
    font-family: var(--font-body);
}

/* app-like touch feel: no double-tap zoom delay, no blue tap flash,
   no text selection on interactive chrome, no pull-to-refresh /
   rubber-band bounce anywhere on the shell */
html, body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

a, button, .btn, .app-tab, .app-tabbar, .dropdown-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
}

a { text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* thin warm scrollbar everywhere */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(232, 210, 165, .18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232, 210, 165, .3); }

/* keep the page itself from growing/scrolling; each panel handles its own overflow.
   position:fixed + inset:0 pins html/body to the real visual viewport so no
   elastic/rubber-band overscroll can ever drag the page past its own background.
   IMPORTANT: no explicit height/width here — that would over-constrain the box and
   make the browser ignore the bottom:0/right:0 pin, which is exactly what caused a
   short gap at the bottom in iOS "Add to Home Screen" standalone mode (its reported
   viewport height differs slightly from a normal Safari tab). Leaving height/width
   on auto lets the fixed+inset box always stretch to the true full screen, in both
   Safari-in-browser and installed/standalone mode. */
html, body {
    overflow: hidden;
    position: fixed;
    inset: 0;
    overscroll-behavior: none;
}
body { display: flex; flex-direction: column; }

.page-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    padding-bottom: 28px;
    -webkit-overflow-scrolling: touch;
}

/* leave room for the home-indicator / gesture bar on notched phones
   once the app is installed and running full-screen */
@supports (padding: max(0px)) {
    .page-scroll { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); }
}

/* money / figures — a mono tabular face so digits line up like a ledger column */
.num, span.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

/* =========================== Buttons =========================== */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--radius-sm);
    letter-spacing: 0;
}

.btn-accent {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border: 1px solid rgba(0, 0, 0, .1);
    color: var(--accent-ink);
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    box-shadow: 0 8px 20px -8px rgba(200, 155, 60, .55);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-accent:hover {
    filter: brightness(1.06);
    color: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(200, 155, 60, .65);
}

.btn-accent:active { transform: translateY(0); filter: brightness(.98); }

.btn-outline-info, .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
}

.btn-outline-info:hover, .btn-outline-secondary:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-2);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid rgba(193, 92, 70, .45);
    color: #E28571;
    border-radius: var(--radius-sm);
}

.btn-outline-danger:hover {
    background: var(--brick-bg);
    border-color: var(--brick);
    color: #F1A794;
}

.btn-danger {
    background: var(--brick);
    border: 1px solid rgba(0, 0, 0, .1);
    color: #FBEDE9;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.btn-danger:hover { background: #A94A36; color: #FBEDE9; }

.btn-success {
    background: var(--sage);
    border: 1px solid rgba(0, 0, 0, .12);
    color: #12261C;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.btn-success:hover { background: #6F9A6B; color: #12261C; }

.btn-xs { padding: 4px 12px; font-size: 12.5px; border-radius: 7px; }

.btn-logout {
    background: transparent;
    border: 1px solid rgba(193, 92, 70, .4);
    color: #E28571;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.btn-logout:hover { background: var(--brick-bg); color: #F1A794; }

/* =========================== Forms =========================== */
label, .form-label {
    color: #D9CAA9;
    font-size: .87rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-control, .form-select {
    background: var(--card2);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: var(--font-body);
}

.form-control:focus, .form-select:focus {
    background: var(--card2);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-soft);
}

.form-control::placeholder { color: var(--muted-2); }

.form-control[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) saturate(3) hue-rotate(0deg); opacity: .75; }

.form-check-input {
    background-color: var(--card2);
    border: 1px solid var(--line-strong);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--accent-soft); border-color: var(--accent); }

.form-check-label { color: var(--text); font-weight: 500; font-size: .92rem; }

/* =========================== Alerts / flash =========================== */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    font-size: .92rem;
}

.alert-danger { background: var(--brick-bg); border-color: rgba(193, 92, 70, .4); color: #F1A794; }
.alert-success { background: var(--sage-bg); border-color: rgba(127, 168, 122, .4); color: #BFE0BA; }
.alert-warning { background: var(--accent-soft); border-color: rgba(200, 155, 60, .4); color: #E7C158; }
.alert code { color: inherit; background: rgba(0,0,0,.2); padding: 1px 6px; border-radius: 5px; }

/* =========================== Panels / cards =========================== */
.card-panel {
    background: linear-gradient(180deg, var(--card3) 0%, var(--card) 14px, var(--card) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-card);
}

/* =========================== Tables — the ledger =========================== */
.table-dark-custom {
    color: var(--text);
    margin-bottom: 0;
    font-family: var(--font-body);
}

.table-dark-custom thead th {
    background: var(--card2);
    color: var(--accent-2);
    border-bottom: 2px solid var(--accent);
    border-top: none;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    padding: 12px 14px;
}

.table-dark-custom td {
    border-color: var(--line);
    vertical-align: middle;
    font-size: 13.8px;
    padding: 11px 14px;
}

/* faint alternating stripe — a nod to green-bar ledger paper */
.table-dark-custom tbody tr:nth-child(even) { background: rgba(127, 168, 122, .045); }

.table-dark-custom.table-hover tbody tr:hover { background: var(--accent-soft); }

tr.status-active { background: rgba(127, 168, 122, .14) !important; }
tr.status-active:hover { background: rgba(127, 168, 122, .22) !important; }
tr.status-disabled { background: rgba(193, 92, 70, .14) !important; }
tr.status-disabled:hover { background: rgba(193, 92, 70, .22) !important; }

.badge-status-active {
    background: var(--sage);
    color: #12261C;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-status-disabled {
    background: var(--brick);
    color: #FBEDE9;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

/* debt status badges — three states, ledger-ink semantics */
.badge-debt-open, .badge-debt-partial, .badge-debt-paid {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-debt-open { background: var(--brick-bg); color: #E28571; border: 1px solid rgba(193, 92, 70, .4); }
.badge-debt-partial { background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(200, 155, 60, .4); }
.badge-debt-paid { background: var(--sage-bg); color: #9CC998; border: 1px solid rgba(127, 168, 122, .4); }

/* paid-vs-remaining progress bar, used on the debt ledger page */
.debt-progress-track {
    height: 9px;
    border-radius: 999px;
    background: var(--card2);
    border: 1px solid var(--line);
    overflow: hidden;
}

.debt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sage), #9CC998);
    border-radius: 999px;
}

/* compact version used in the debt-list table (adddebts.php) — same
   bar, sized for a table cell, with the fill color matching each
   row's status (open/partial/paid) instead of always green. */
.debt-progress-track-mini {
    height: 6px;
    min-width: 90px;
}

.debt-progress-track-mini.is-open .debt-progress-fill { background: linear-gradient(90deg, #C15C46, #DD9280); }
.debt-progress-track-mini.is-partial .debt-progress-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.debt-progress-track-mini.is-paid .debt-progress-fill { background: linear-gradient(90deg, var(--sage), #9CC998); }

.debt-progress-pct {
    font-size: .72rem;
    color: var(--muted-2);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* debt hero card — remaining balance, shown big on debt.php */
.debt-hero {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
}

.debt-hero.is-open { background: linear-gradient(135deg, var(--brick-bg), var(--card) 65%); border-color: rgba(193, 92, 70, .38); }
.debt-hero.is-partial { background: linear-gradient(135deg, var(--accent-soft), var(--card) 65%); border-color: rgba(200, 155, 60, .38); }
.debt-hero.is-paid { background: linear-gradient(135deg, var(--sage-bg), var(--card) 65%); border-color: rgba(127, 168, 122, .38); }

.debt-hero .debt-hero-label { color: var(--muted); font-size: .85rem; font-weight: 600; margin-bottom: 6px; }

.debt-hero .debt-hero-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
}

.debt-hero.is-open .debt-hero-value { color: #DD9280; }
.debt-hero.is-partial .debt-hero-value { color: var(--accent-2); }
.debt-hero.is-paid .debt-hero-value { color: #9CC998; }

.debt-hero .debt-hero-sub { color: var(--muted-2); font-size: .8rem; margin-top: 10px; }

.table-scroll-area {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}
.table-scroll-area thead th { position: sticky; top: 0; z-index: 1; }

/* force a horizontal scrollbar instead of illegibly squashed columns
   once a table has more columns than a phone screen can hold */
.table-scroll-area .table-dark-custom { min-width: 640px; }

@media (max-width: 767px) {
    .table-scroll-area { max-height: 340px; }
    .table-dark-custom td, .table-dark-custom thead th { padding: 9px 10px; font-size: 12.8px; }
}

/* =========================== Badges / pills =========================== */
.scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card2);
    border: 1px solid var(--line);
    color: #D9C089;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

/* =========================== App shell: masthead + tab bar =========================== */
.app-masthead {
    flex: 0 0 auto;
    background: linear-gradient(180deg, #1B140D, #14100A);
    border-bottom: 1px solid var(--line);
    padding: 12px 22px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
}

.app-masthead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 1400px;
    margin: 0 auto;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.app-brand-mark { flex-shrink: 0; width: 42px; height: 42px; }

.app-brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.app-brand-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--text);
    letter-spacing: .3px;
}

.app-brand-tag {
    font-size: .74rem;
    color: var(--muted-2);
    font-weight: 500;
    margin-top: 1px;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--card2);
    border: 1px solid var(--line);
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
}

.app-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.app-user-name { font-size: 12.8px; font-weight: 700; color: var(--text); line-height: 1.2; }
.app-user-role { font-size: 11px; color: var(--muted-2); line-height: 1.2; }

.app-tabbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    overflow-x: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.app-tabbar::-webkit-scrollbar { display: none; }

/* On a phone the tabbar can have more links than fit on one line, and a
   horizontal scroll with no visible hint is easy to miss entirely - so
   below the tablet breakpoint the tabbar is replaced by the hamburger
   button + drawer (.app-mobile-nav) instead, which lists every link
   vertically and is always fully reachable with one tap. */
@media (max-width: 767px) {
    .app-tabbar { display: none; }
}

.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card2);
    color: var(--text);
    flex-shrink: 0;
}
.mobile-nav-toggle svg { width: 19px; height: 19px; }
.mobile-nav-toggle:hover, .mobile-nav-toggle:focus { background: var(--card3); color: var(--accent-2); }

@media (max-width: 767px) {
    .mobile-nav-toggle { display: inline-flex; }
}

.app-mobile-nav {
    width: min(300px, 84vw);
    background: linear-gradient(180deg, #1B140D, #14100A);
    color: var(--text);
    border-left: 1px solid var(--line);
}
.app-mobile-nav .offcanvas-header { border-bottom: 1px solid var(--line); padding: 14px 18px; }
.app-mobile-nav .offcanvas-title { font-family: var(--font-display); font-weight: 700; }
.app-mobile-nav .offcanvas-body {
    padding: 14px 12px;
    padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
}
.mobile-nav-link {
    justify-content: flex-start;
    padding: 11px 14px;
    border-radius: 10px;
    white-space: normal;
}
.mobile-nav-link.app-scope-pill { justify-content: flex-start; padding: 10px 12px; margin-bottom: 6px; }
.mobile-nav-section {
    color: var(--muted-2);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 14px 4px;
}
.mobile-nav-sep { height: 1px; background: var(--line); margin: 8px 6px; }

.app-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid transparent;
    white-space: nowrap;
}

.app-tab svg { width: 15px; height: 15px; flex-shrink: 0; }

.app-tab:hover { color: var(--text); background: var(--card2); }

.app-tab.active {
    background: var(--accent-soft);
    color: var(--accent-2);
    border-color: rgba(200, 155, 60, .35);
}

.app-tab-sep { width: 1px; height: 20px; background: var(--line-strong); flex-shrink: 0; margin: 0 2px; }

.app-scope-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-soft);
    border: 1px solid rgba(200, 155, 60, .35);
    color: var(--accent-2);
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.app-scope-pill .pill-logo, .app-scope-pill .pill-logo-fallback,
.school-scope-pill .pill-logo, .school-scope-pill .pill-logo-fallback {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--card2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    color: var(--accent-2);
}

.app-dropdown { position: relative; flex-shrink: 0; }

.app-dropdown-menu {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, .05), transparent 40%),
        linear-gradient(180deg, #322813 0%, #1E1710 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 10px;
    margin-top: 10px;
    box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .04);
    min-width: 240px;
    position: relative;
    overflow: hidden;
}

/* thin glowing seam across the top — echoes the brass/seal accent */
.app-dropdown-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-2) 50%, transparent);
    opacity: .6;
}

/* Applied by app.js while the menu is open and moved to <body>,
   so it renders above the tabbar's overflow scroll area instead
   of being clipped by it. */
.app-dropdown-menu-portal {
    position: fixed;
    margin-top: 0;
    z-index: 1080;
}

.app-dropdown-menu.show {
    animation: appDropdownPop .18s cubic-bezier(.2, .9, .25, 1.1);
}

@keyframes appDropdownPop {
    from { opacity: 0; transform: translateY(-8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.app-dropdown-menu .dropdown-item {
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13.6px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.app-dropdown-menu .dropdown-item + .dropdown-item { margin-top: 2px; }

.app-dropdown-menu .dropdown-item-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(232, 210, 165, .07);
    transition: background .15s ease, transform .15s ease;
}

.app-dropdown-menu .dropdown-item-icon svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }

.app-dropdown-menu .dropdown-item:hover,
.app-dropdown-menu .dropdown-item:focus {
    background: var(--accent-soft);
    color: var(--accent-2);
    transform: translateX(-2px);
}

[dir="rtl"] .app-dropdown-menu .dropdown-item:hover,
[dir="rtl"] .app-dropdown-menu .dropdown-item:focus {
    transform: translateX(2px);
}

.app-dropdown-menu .dropdown-item:hover .dropdown-item-icon,
.app-dropdown-menu .dropdown-item:focus .dropdown-item-icon {
    background: var(--accent);
    transform: scale(1.05);
}

.app-dropdown-menu .dropdown-item:hover .dropdown-item-icon svg,
.app-dropdown-menu .dropdown-item:focus .dropdown-item-icon svg {
    color: var(--accent-ink);
}

.app-dropdown-menu .dropdown-item.active {
    background: var(--accent-soft);
    color: var(--accent-2);
    font-weight: 700;
}

.app-dropdown-menu .dropdown-item.active .dropdown-item-icon {
    background: var(--accent);
}

.app-dropdown-menu .dropdown-item.active .dropdown-item-icon svg { color: var(--accent-ink); }

@media (max-width: 767px) {
    .app-masthead {
        padding: 10px 14px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }
    .app-brand-tag { display: none; }
    .app-brand-mark { width: 36px; height: 36px; }
    .app-brand-name { font-size: 1.02rem; }
    .app-tabbar { padding: 9px 14px; }
    .app-user-name, .app-user-role { display: none; }
    .app-user-chip { padding: 6px; }
}

/* =========================== Login / auth =========================== */
.auth-wrapper {
    /* height:100% resolves against body's real full-viewport box (body itself
       is position:fixed + inset:0 with an auto/computed height, so this is a
       definite value) — avoids the same vh/dvh mismatch bug fixed above. */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    position: relative;
    background:
        repeating-linear-gradient(0deg, rgba(232,210,165,.028) 0px, rgba(232,210,165,.028) 1px, transparent 1px, transparent 34px),
        radial-gradient(circle at 18% 14%, rgba(200, 155, 60, .14), transparent 42%),
        radial-gradient(circle at 84% 86%, rgba(127, 168, 122, .07), transparent 42%),
        var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 408px;
    background: linear-gradient(180deg, var(--card3), var(--card));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px 34px 34px;
    box-shadow: var(--shadow-pop);
    position: relative;
    z-index: 1;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
}

.auth-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card h1 {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 4px;
    color: var(--text);
}

.auth-card p.subtitle {
    text-align: center;
    color: var(--muted);
    font-size: .87rem;
    margin-bottom: 28px;
}

.auth-card label { display: block; }

.auth-card .form-control { padding: 11px 16px; }

/* =========================== Schools list (home.php) =========================== */
.dash-search { max-width: 380px; margin: 0 auto 0; }

.dash-search input {
    background: var(--card2);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 20px;
}

.dash-search input:focus {
    background: var(--card2);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-soft);
}

.school-card {
    background: linear-gradient(165deg, var(--card3), var(--card));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    height: 100%;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    display: block;
    color: var(--text);
}

.school-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    color: var(--text);
    box-shadow: var(--shadow-card);
}

.school-card .logo-wrap {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    background: var(--card2);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--accent-2);
}

.school-card .logo-wrap img { width: 100%; height: 100%; object-fit: cover; }

.school-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 10px; font-family: var(--font-body); }

.school-card .meta { display: flex; gap: 14px; color: var(--muted); font-size: .82rem; }
.school-card .meta .num { color: var(--muted); }

.empty-state { text-align: center; color: var(--muted); padding: 60px 20px; }
.empty-state svg { color: var(--muted-2); margin-bottom: 14px; }

/* =========================== Stat cards (school.php) =========================== */
.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}

.stat-card .stat-label { color: var(--muted); font-size: .8rem; margin-bottom: 8px; font-weight: 500; }

.stat-card .stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--accent-2);
}

/* =========================== Investment card =========================== */
.invest-card {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.invest-card.invest-positive {
    background: linear-gradient(135deg, var(--sage-bg), var(--card) 65%);
    border-color: rgba(127, 168, 122, .38);
}

.invest-card.invest-negative {
    background: linear-gradient(135deg, var(--brick-bg), var(--card) 65%);
    border-color: rgba(193, 92, 70, .38);
}

.invest-card .invest-icon {
    font-size: 1.9rem;
    line-height: 1;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.invest-card .invest-label { color: var(--muted); font-size: .82rem; margin-bottom: 4px; font-weight: 600; }

.invest-card.invest-positive .invest-value { color: #9CC998; }
.invest-card.invest-negative .invest-value { color: #DD9280; }

.invest-card .invest-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.2;
}

.invest-card .invest-formula { color: var(--muted-2); font-size: .74rem; margin-top: 4px; }

.thumb-sm { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; background: var(--card2); border: 1px solid var(--line); }

/* ------------------------------------------------------------- */
/* Small global "modern touch" polish — safe, additive, no       */
/* structural changes, cascades across every page automatically. */
/* ------------------------------------------------------------- */

/* custom scrollbars matching the theme instead of the default OS ones */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

/* consistent, visible keyboard focus ring instead of the browser default */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* smooth, subtle lift on clickable cards/rows for a more modern feel */
.card-panel, .table-dark-custom tbody tr, .invest-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

/* ------------------------------------------------------------- */
/* Installed / standalone app mode (opened from the home screen) */
/* ------------------------------------------------------------- */
@media (display-mode: standalone) {
    /* a little extra breathing room under the status bar since the
       browser chrome (address bar, back button) is gone entirely */
    .app-masthead { padding-top: max(16px, calc(env(safe-area-inset-top) + 6px)); }
    .auth-wrapper { padding-top: max(28px, calc(env(safe-area-inset-top) + 12px)); }
}

/* ======================================================================
   Install banner — "add to home screen / install app" prompt.
   A floating, dismissible news/alert-style strip pinned to the top of
   the viewport. Sits above everything (including the masthead), does
   NOT push page content, and never blocks it — it's a self-contained
   overlay that slides in, can be dismissed, and gets out of the way.
   ====================================================================== */
.install-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    display: flex;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-130%);
    opacity: 0;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

.install-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.install-banner[hidden] { display: none !important; }

.install-banner-card {
    pointer-events: auto;
    width: 100%;
    max-width: 560px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(155deg, rgba(46, 36, 22, .92), rgba(28, 22, 14, .96));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 14px 14px 14px 12px;
    box-shadow: var(--shadow-pop), 0 0 0 1px rgba(0, 0, 0, .25);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    position: relative;
    overflow: hidden;
}

.install-banner-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
}

/* subtle animated shimmer sweeping across the card once, like a stamp
   catching the light — reinforces the "special / modern" ask without
   being distracting or looping forever */
.install-banner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(232, 210, 165, .09) 42%, transparent 64%);
    background-size: 220% 100%;
    background-position: 130% 0;
    animation: install-banner-shimmer 2.6s ease-out .5s 1;
    pointer-events: none;
}

@keyframes install-banner-shimmer {
    to { background-position: -30% 0; }
}

.install-banner-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(155deg, var(--card3), var(--card));
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-2);
}

.install-banner-icon svg { width: 22px; height: 22px; }

.install-banner-body { flex: 1 1 auto; min-width: 0; }

.install-banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--accent-2);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.install-banner-eyebrow .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(231, 193, 88, .22);
    animation: install-banner-pulse 1.8s ease-in-out infinite;
}

@keyframes install-banner-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.install-banner-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    margin: 0 0 2px;
}

.install-banner-desc {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.install-banner-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    font-size: .74rem;
    color: var(--muted);
}

.install-banner-steps .step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 9px 3px 7px;
    color: var(--text);
}

.install-banner-steps .step svg { width: 13px; height: 13px; color: var(--accent-2); }

.install-banner-steps .arrow {
    color: var(--muted-2);
    font-size: .7rem;
}

.install-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.install-banner-actions .btn {
    padding: 7px 16px;
    font-size: .82rem;
    border-radius: 999px;
}

.install-banner-dismiss-link {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 6px;
}

.install-banner-dismiss-link:hover { color: var(--text); }

.install-banner-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card2);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}

.install-banner-close:hover { background: var(--card3); color: var(--text); }

@media (max-width: 560px) {
    .install-banner { padding-left: 8px; padding-right: 8px; }
    .install-banner-card { border-radius: var(--radius-md); padding: 12px 10px 12px 10px; }
    .install-banner-steps { font-size: .7rem; }
    .install-banner-steps .step { padding: 3px 8px 3px 6px; }
}

/* never show the prompt once the app is actually running installed */
@media (display-mode: standalone) {
    .install-banner { display: none !important; }
}