/* ============================================================================
   PLAYFUL PRECISION — design foundation
   ============================================================================

   Precision: one 4px spacing scale, one type scale, tabular figures on every
   number, consistent borders and focus rings. A school system handles money and
   marks; things must line up and be unambiguous.

   Playful: generous radii, a confident accent, warm supporting colours, and
   short springy motion on the things you touch. Warmth without whimsy.

   Everything below is a token. To retune the character — rounder, flatter,
   calmer, bolder — change the values in this block and the whole system follows.
   Nothing further down the stylesheet hard-codes a colour or a size.
   ============================================================================ */

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --pp-brand-50:  #eef3ff;
    --pp-brand-100: #dce6ff;
    --pp-brand-200: #bccdff;
    --pp-brand-300: #93aaf8;
    --pp-brand-400: #6b86f0;
    --pp-brand-500: #3157d5;      /* primary */
    --pp-brand-600: #2746b4;
    --pp-brand-700: #1d3590;
    --pp-brand-800: #16296f;
    --pp-brand-900: #101d4f;

    /* A warm second colour, used sparingly — the "playful" half of the pair. */
    --pp-accent-100: #fff1d6;
    --pp-accent-300: #f7cd7a;
    --pp-accent-500: #e8a317;
    --pp-accent-700: #9a6a06;

    /* ---- Semantic ------------------------------------------------------- */
    --pp-success-100: #e4f6ec;
    --pp-success-500: #17874c;
    --pp-success-700: #0f5d34;

    --pp-warning-100: #fdf1dd;
    --pp-warning-500: #b27317;
    --pp-warning-700: #7d4f0c;

    --pp-danger-100:  #fbe9e7;
    --pp-danger-500:  #c0392b;
    --pp-danger-700:  #8e2017;

    --pp-info-100:    #e6f1fd;
    --pp-info-500:    #2070c4;
    --pp-info-700:    #15528f;

    /* ---- Neutrals ------------------------------------------------------- */
    --pp-ink:        #1b2330;     /* body text */
    --pp-ink-soft:   #46526a;     /* secondary text */
    --pp-muted:      #5d6b86;     /* labels, captions — 5.4:1 on white, 5.1:1 on surface-2 */
    --pp-muted-soft: #8c97ab;     /* decorative only, never for body text */
    --pp-line:       #e4eaf4;     /* hairlines */
    --pp-line-strong:#cfdaeb;     /* field borders */
    --pp-surface:    #ffffff;     /* cards */
    --pp-surface-2:  #f8fafd;     /* inset panels */
    --pp-canvas:     #f4f7fc;     /* page background */

    /* ---- Typography ----------------------------------------------------- */
    --pp-font: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --pp-font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', monospace;

    --pp-text-xs:  11px;
    --pp-text-sm:  12.5px;
    --pp-text-md:  14px;          /* body */
    --pp-text-lg:  16px;
    --pp-text-xl:  20px;
    --pp-text-2xl: 26px;
    --pp-text-3xl: 34px;

    --pp-weight-normal: 400;
    --pp-weight-medium: 600;
    --pp-weight-bold:   700;
    --pp-weight-black:  800;

    --pp-leading-tight: 1.2;
    --pp-leading-normal: 1.5;
    --pp-leading-loose: 1.7;

    --pp-tracking-tight: -0.02em;
    --pp-tracking-normal: 0;
    --pp-tracking-wide: 0.05em;   /* uppercase labels only */

    /* ---- Spacing — a 4px scale, used everywhere ------------------------- */
    --pp-space-1:  4px;
    --pp-space-2:  8px;
    --pp-space-3:  12px;
    --pp-space-4:  16px;
    --pp-space-5:  20px;
    --pp-space-6:  24px;
    --pp-space-8:  32px;
    --pp-space-10: 40px;
    --pp-space-12: 48px;

    /* ---- Radii — generous, the main source of the friendly feel --------- */
    --pp-radius-xs: 6px;
    --pp-radius-sm: 9px;
    --pp-radius-md: 12px;         /* inputs, small controls */
    --pp-radius-lg: 16px;         /* cards */
    --pp-radius-xl: 20px;         /* dialogs */
    --pp-radius-pill: 999px;      /* badges, chips */

    /* ---- Borders -------------------------------------------------------- */
    --pp-border: 1px solid var(--pp-line);
    --pp-border-strong: 1px solid var(--pp-line-strong);
    --pp-border-brand: 1.5px solid var(--pp-brand-500);

    /* ---- Elevation ------------------------------------------------------ */
    --pp-shadow-xs: 0 1px 2px rgba(20, 40, 80, .05);
    --pp-shadow-sm: 0 2px 6px rgba(20, 40, 80, .06);
    --pp-shadow-md: 0 6px 18px rgba(20, 40, 80, .08);
    --pp-shadow-lg: 0 16px 40px rgba(14, 28, 56, .14);
    --pp-shadow-xl: 0 24px 70px rgba(10, 20, 40, .28);   /* dialogs */

    /* ---- Focus ---------------------------------------------------------- */
    --pp-focus-ring: 0 0 0 3px rgba(49, 87, 213, .28);
    --pp-focus-ring-danger: 0 0 0 3px rgba(192, 57, 43, .25);

    /* ---- Motion — short, slightly springy ------------------------------- */
    --pp-ease: cubic-bezier(.2, .8, .3, 1);
    --pp-duration-fast: 120ms;
    --pp-duration: 180ms;
    --pp-duration-slow: 280ms;

    /* ---- Layering ------------------------------------------------------- */
    --pp-z-sticky: 40;
    --pp-z-nav: 50;
    --pp-z-dialog: 1200;
    --pp-z-toast: 2000;

    /* ========================================================================
       Compatibility.

       The stylesheet below predates this foundation and refers to older names
       in about 500 places — and --green and --gold were both blue, which is why
       the palette had drifted. These map the old names onto the new tokens so
       nothing breaks while pages are migrated. Do not add new rules that use
       them; use the --pp-* tokens above.
       ======================================================================== */
    --green:            var(--pp-brand-500);
    --green-dark:       var(--pp-brand-600);
    --blue-bright:      var(--pp-brand-400);
    --gold:             var(--pp-brand-500);
    --gold-soft:        var(--pp-brand-50);
    --accent:           var(--pp-brand-500);
    --accent-fill:      var(--pp-accent-500);
    --accent-fill-ink:  var(--pp-accent-700);
    --red:              var(--pp-danger-500);
    --green-ok:         var(--pp-success-500);
    --green-soft:       var(--pp-success-100);
    --amber:            var(--pp-warning-500);
    --amber-soft:       var(--pp-warning-100);
    --ink:              var(--pp-ink);
    --cream:            var(--pp-canvas);
    --white:            var(--pp-surface);
    --line:             var(--pp-line);
    --muted:            var(--pp-muted);
    --muted-soft:       var(--pp-muted-soft);
    --radius:           var(--pp-radius-lg);
    --shadow:           var(--pp-shadow-xs);
    --serif:            var(--pp-font);
    --mono:             var(--pp-font-mono);
    --navy:             var(--pp-brand-900);
    --navy-2:           var(--pp-brand-800);
    --navy-line:        rgba(255, 255, 255, .08);
}

/* ============================================================================
   Base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--pp-font);
    font-size: var(--pp-text-md);
    line-height: var(--pp-leading-normal);
    color: var(--pp-ink);
    background: var(--pp-canvas);
    -webkit-font-smoothing: antialiased;
}

/* Numbers line up in columns — essential where money and marks are compared. */
.pp-num, .tile-num, .ft-num, .rp-amount, .pay-amount,
td.right, th.right, .arr-cell, .bus-cell {
    font-variant-numeric: tabular-nums;
}

/* One focus ring, everywhere, and only for keyboard users. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--pp-focus-ring);
    border-radius: var(--pp-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================================
   Buttons
   ============================================================================ */
.pp-btn {
    --_bg: var(--pp-surface);
    --_fg: var(--pp-ink-soft);
    --_bd: var(--pp-line-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pp-space-2);
    min-height: 44px;                       /* comfortable on a phone */
    padding: 0 var(--pp-space-4);
    border: 1px solid var(--_bd);
    border-radius: var(--pp-radius-md);
    background: var(--_bg);
    color: var(--_fg);
    font: inherit;
    font-size: var(--pp-text-sm);
    font-weight: var(--pp-weight-bold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pp-duration-fast) var(--pp-ease),
                border-color var(--pp-duration-fast) var(--pp-ease),
                color var(--pp-duration-fast) var(--pp-ease),
                transform var(--pp-duration-fast) var(--pp-ease),
                box-shadow var(--pp-duration-fast) var(--pp-ease);
}
.pp-btn:hover { background: var(--pp-brand-50); border-color: var(--pp-brand-200); color: var(--pp-brand-600); }
.pp-btn:active { transform: translateY(1px); }

.pp-btn--primary {
    --_bg: var(--pp-brand-500);
    --_fg: #fff;
    --_bd: var(--pp-brand-500);
    box-shadow: var(--pp-shadow-sm);
}
.pp-btn--primary:hover { --_bg: var(--pp-brand-600); --_bd: var(--pp-brand-600); color: #fff; }

.pp-btn--danger { --_bg: var(--pp-surface); --_fg: var(--pp-danger-500); --_bd: var(--pp-danger-100); }
.pp-btn--danger:hover { --_bg: var(--pp-danger-100); --_fg: var(--pp-danger-700); --_bd: var(--pp-danger-500); }
.pp-btn--danger:focus-visible { box-shadow: var(--pp-focus-ring-danger); }

.pp-btn--ghost { --_bd: transparent; --_bg: transparent; }
.pp-btn--sm { min-height: 36px; padding: 0 var(--pp-space-3); font-size: var(--pp-text-xs); }
.pp-btn--lg { min-height: 52px; padding: 0 var(--pp-space-6); font-size: var(--pp-text-md); }
.pp-btn--block { width: 100%; }

.pp-btn:disabled, .pp-btn[aria-disabled="true"], .pp-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Loading: the label stays (so the width does not jump) and a spinner joins it. */
.pp-btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.pp-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--pp-brand-500);
    animation: pp-spin .7s linear infinite;
}
.pp-btn--primary.is-loading::after { color: #fff; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   Fields — label, input, help, error
   ============================================================================ */
.pp-field { display: flex; flex-direction: column; gap: var(--pp-space-1); min-width: 0; }

.pp-label {
    font-size: var(--pp-text-sm);
    font-weight: var(--pp-weight-bold);
    color: var(--pp-ink-soft);
}
.pp-label .pp-required { color: var(--pp-danger-500); font-weight: var(--pp-weight-bold); }
.pp-label .pp-optional { color: var(--pp-muted); font-weight: var(--pp-weight-normal); font-size: var(--pp-text-xs); }

.pp-input, .pp-select, .pp-textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--pp-space-2) var(--pp-space-3);
    font: inherit;
    font-size: var(--pp-text-md);
    color: var(--pp-ink);
    background: var(--pp-surface);
    border: 1px solid var(--pp-line-strong);
    border-radius: var(--pp-radius-md);
    transition: border-color var(--pp-duration-fast) var(--pp-ease),
                box-shadow var(--pp-duration-fast) var(--pp-ease);
}
.pp-textarea { min-height: 96px; line-height: var(--pp-leading-normal); resize: vertical; }
.pp-input::placeholder, .pp-textarea::placeholder { color: var(--pp-muted-soft); }
.pp-input:hover, .pp-select:hover, .pp-textarea:hover { border-color: var(--pp-brand-300); }
.pp-input:focus, .pp-select:focus, .pp-textarea:focus {
    outline: none;
    border-color: var(--pp-brand-500);
    box-shadow: var(--pp-focus-ring);
}
.pp-input:disabled, .pp-select:disabled, .pp-textarea:disabled {
    background: var(--pp-surface-2);
    color: var(--pp-muted);
    cursor: not-allowed;
}
.pp-input[readonly] { background: var(--pp-surface-2); }

.pp-field.is-error .pp-input,
.pp-field.is-error .pp-select,
.pp-field.is-error .pp-textarea { border-color: var(--pp-danger-500); }
.pp-field.is-error .pp-input:focus { box-shadow: var(--pp-focus-ring-danger); }

.pp-field.is-success .pp-input,
.pp-field.is-success .pp-select { border-color: var(--pp-success-500); }

.pp-help { font-size: var(--pp-text-xs); color: var(--pp-muted); line-height: var(--pp-leading-normal); }
.pp-error-text {
    display: flex; align-items: flex-start; gap: var(--pp-space-1);
    font-size: var(--pp-text-xs); font-weight: var(--pp-weight-medium); color: var(--pp-danger-500);
}
.pp-success-text { font-size: var(--pp-text-xs); font-weight: var(--pp-weight-medium); color: var(--pp-success-500); }

/* ============================================================================
   Badges
   ============================================================================ */
.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pp-space-1);
    padding: 3px var(--pp-space-3);
    border-radius: var(--pp-radius-pill);
    font-size: var(--pp-text-xs);
    font-weight: var(--pp-weight-bold);
    line-height: 1.5;
    background: var(--pp-brand-50);
    color: var(--pp-brand-700);
    white-space: nowrap;
}
.pp-badge--success { background: var(--pp-success-100); color: var(--pp-success-700); }
.pp-badge--warning { background: var(--pp-warning-100); color: var(--pp-warning-700); }
.pp-badge--danger  { background: var(--pp-danger-100);  color: var(--pp-danger-700); }
.pp-badge--info    { background: var(--pp-info-100);    color: var(--pp-info-700); }
.pp-badge--neutral { background: var(--pp-surface-2);   color: var(--pp-muted); }
.pp-badge--accent  { background: var(--pp-accent-100);  color: var(--pp-accent-700); }
.pp-badge--dot::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 6px;
}

/* ============================================================================
   Cards
   ============================================================================ */
.pp-card {
    background: var(--pp-surface);
    border: var(--pp-border);
    border-radius: var(--pp-radius-lg);
    padding: var(--pp-space-5);
    box-shadow: var(--pp-shadow-xs);
}
.pp-card--flush { padding: 0; overflow: hidden; }
.pp-card--quiet { box-shadow: none; background: var(--pp-surface-2); }
.pp-card--interactive {
    transition: border-color var(--pp-duration) var(--pp-ease),
                box-shadow var(--pp-duration) var(--pp-ease),
                transform var(--pp-duration) var(--pp-ease);
}
.pp-card--interactive:hover { border-color: var(--pp-brand-200); box-shadow: var(--pp-shadow-md); transform: translateY(-1px); }

.pp-card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--pp-space-3); margin-bottom: var(--pp-space-3);
}
.pp-card__title { margin: 0; font-size: var(--pp-text-lg); font-weight: var(--pp-weight-black); letter-spacing: var(--pp-tracking-tight); }
.pp-card__sub { margin: 2px 0 0; font-size: var(--pp-text-sm); color: var(--pp-muted); }

/* ============================================================================
   Alerts
   ============================================================================ */
.pp-alert {
    display: flex; align-items: flex-start; gap: var(--pp-space-3);
    padding: var(--pp-space-3) var(--pp-space-4);
    border: 1px solid transparent;
    border-radius: var(--pp-radius-md);
    font-size: var(--pp-text-sm);
    line-height: var(--pp-leading-normal);
}
.pp-alert strong { font-weight: var(--pp-weight-bold); }
.pp-alert--success { background: var(--pp-success-100); border-color: #c4e6d2; color: var(--pp-success-700); }
.pp-alert--warning { background: var(--pp-warning-100); border-color: #f0ddbb; color: var(--pp-warning-700); }
.pp-alert--danger  { background: var(--pp-danger-100);  border-color: #f0c9c4; color: var(--pp-danger-700); }
.pp-alert--info    { background: var(--pp-info-100);    border-color: #c9ddf5; color: var(--pp-info-700); }
.pp-alert__icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }

/* ============================================================================
   Dialogs
   ============================================================================ */
.pp-dialog {
    position: fixed; inset: 0; z-index: var(--pp-z-dialog);
    display: flex; align-items: center; justify-content: center;
    padding: var(--pp-space-6) var(--pp-space-4);
}
.pp-dialog[hidden] { display: none; }
.pp-dialog__backdrop {
    position: absolute; inset: 0;
    background: rgba(13, 22, 40, .46);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: pp-fade var(--pp-duration) var(--pp-ease);
}
.pp-dialog__panel {
    position: relative;
    display: flex; flex-direction: column;
    width: min(560px, 100%);
    max-height: calc(100vh - var(--pp-space-12));
    background: var(--pp-surface);
    border-radius: var(--pp-radius-xl);
    box-shadow: var(--pp-shadow-xl);
    overflow: hidden;
    animation: pp-rise var(--pp-duration) var(--pp-ease);
}
.pp-dialog__head {
    display: flex; align-items: center; gap: var(--pp-space-3);
    padding: var(--pp-space-4) var(--pp-space-5);
    border-bottom: var(--pp-border);
    background: var(--pp-surface-2);
}
.pp-dialog__title { flex: 1; margin: 0; font-size: var(--pp-text-lg); font-weight: var(--pp-weight-black); }
.pp-dialog__body { flex: 1 1 auto; overflow-y: auto; padding: var(--pp-space-5); }
.pp-dialog__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--pp-space-2);
    padding: var(--pp-space-4) var(--pp-space-5);
    border-top: var(--pp-border);
    background: var(--pp-surface-2);
}
.pp-dialog__close {
    background: none; border: 0; padding: 0 var(--pp-space-1);
    font-size: 26px; line-height: 1; color: var(--pp-muted-soft); cursor: pointer;
}
.pp-dialog__close:hover { color: var(--pp-ink); }
body.pp-dialog-open { overflow: hidden; }

@keyframes pp-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pp-rise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }

@media (max-width: 760px) {
    .pp-dialog { padding: 0; align-items: flex-end; }
    .pp-dialog__panel { width: 100%; max-height: 92vh; border-radius: var(--pp-radius-xl) var(--pp-radius-xl) 0 0; }
    .pp-dialog__foot { padding-bottom: calc(var(--pp-space-4) + env(safe-area-inset-bottom)); }
    .pp-dialog__foot .pp-btn { flex: 1; }
    @keyframes pp-rise { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: none } }
}

/* ============================================================================
   Empty states
   ============================================================================ */
.pp-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--pp-space-2);
    padding: var(--pp-space-10) var(--pp-space-5);
    border: 1px dashed var(--pp-line-strong);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-surface);
}
.pp-empty__icon {
    width: 48px; height: 48px; border-radius: var(--pp-radius-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pp-brand-50); color: var(--pp-brand-500);
    margin-bottom: var(--pp-space-1);
}
.pp-empty__icon svg { width: 22px; height: 22px; }
.pp-empty__title { font-size: var(--pp-text-md); font-weight: var(--pp-weight-bold); color: var(--pp-ink); }
.pp-empty__text { font-size: var(--pp-text-sm); color: var(--pp-muted); max-width: 46ch; line-height: var(--pp-leading-normal); }
.pp-empty__action { margin-top: var(--pp-space-3); }

/* ============================================================================
   Loading
   ============================================================================ */
.pp-skeleton {
    background: linear-gradient(90deg, var(--pp-surface-2) 25%, #eef2f8 37%, var(--pp-surface-2) 63%);
    background-size: 400% 100%;
    border-radius: var(--pp-radius-sm);
    animation: pp-shimmer 1.3s ease-in-out infinite;
}
.pp-skeleton--text { height: 12px; margin: 6px 0; }
.pp-skeleton--title { height: 20px; width: 40%; }
@keyframes pp-shimmer { from { background-position: 100% 50% } to { background-position: 0 50% } }

.pp-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid var(--pp-brand-200); border-top-color: var(--pp-brand-500);
    border-radius: 50%; animation: pp-spin .7s linear infinite;
}

/* ============================================================================
   Utilities used by the components above
   ============================================================================ */
.pp-stack { display: flex; flex-direction: column; gap: var(--pp-space-3); }
.pp-row { display: flex; align-items: center; gap: var(--pp-space-3); flex-wrap: wrap; }
.pp-grid { display: grid; gap: var(--pp-space-3); }
.pp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-grid--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 760px) {
    .pp-grid--2, .pp-grid--3 { grid-template-columns: 1fr; }
}

.pp-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Nothing in this foundation should appear on paper. */
@media print {
    .pp-dialog, .pp-skeleton, .pp-spinner { display: none !important; }
    .pp-card { box-shadow: none; border-color: #ddd; }
}

/* ============================================================================
   END OF FOUNDATION — the original stylesheet follows unchanged below.
   ============================================================================ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
    background: var(--cream);
    color: var(--ink);
    font-size: 15px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
.muted { color: var(--muted); }

/* ---------- Top bar ---------- */
.topbar {
    background: var(--green);
    background-image: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 22px;
    border-bottom: 4px solid var(--gold);
}
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-logo { width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; }
.topbar-logo-placeholder { font-size: 1.9rem; }
.topbar-school { font-weight: 900; font-size: 1.08rem; }
.topbar-sub { font-size: 0.78rem; opacity: 0.85; }
.topbar-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar-nav a {
    color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem;
    padding: 8px 13px; border-radius: 8px; transition: background 0.15s;
}
.topbar-nav a:hover { background: rgba(255, 255, 255, 0.14); }
.topbar-nav a.active { background: var(--white); color: var(--green); }
.nav-logout { opacity: 0.8; }

/* ---------- Selector bar ---------- */
.selector-bar {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 10px 22px;
}
.selector-form { display: flex; gap: 18px; align-items: end; flex-wrap: wrap; }
.selector-form label { display: flex; flex-direction: column; font-weight: 700; font-size: 0.8rem; color: var(--muted); gap: 4px; }
select, input[type="text"], input[type="password"], input[type="number"], input[type="file"], textarea {
    font-family: inherit; font-size: 0.95rem;
    padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink);
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

/* ---------- Page ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 24px 22px 60px; }
.page-head { margin-bottom: 18px; }
.pill {
    display: inline-block; background: var(--green); color: #fff;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
    padding: 3px 11px; border-radius: 999px; vertical-align: middle; margin-left: 6px;
}
.pill-gold { background: var(--accent-fill); color: var(--accent-fill-ink); }

/* ---------- Cards / alerts ---------- */
.card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px;
}
.alert { border-radius: 10px; padding: 11px 15px; margin-bottom: 16px; font-weight: 700; font-size: 0.92rem; }
.alert-success { background: #E4F3EA; color: var(--green-dark); border: 1px solid #BCDFC9; }
.alert-error { background: #FBE9E7; color: var(--red); border: 1px solid #F1C4BE; }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit; font-weight: 800; font-size: 0.92rem;
    border: none; border-radius: 9px; padding: 10px 18px; cursor: pointer;
    background: #E9EDF3; color: var(--ink); transition: transform 0.05s, filter 0.15s;
}
.btn:hover { filter: brightness(0.96); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-small { padding: 6px 12px; font-size: 0.8rem; }
.btn-block { width: 100%; }

/* ---------- Tabs ---------- */
.tabs {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0;
    border-bottom: 3px solid var(--green); padding-bottom: 0;
}
.tab {
    font-family: inherit; font-weight: 800; font-size: 0.86rem;
    background: #E9EDF3; color: var(--ink); border: 1px solid var(--line); border-bottom: none;
    border-radius: 10px 10px 0 0; padding: 9px 14px; cursor: pointer;
}
.tab:hover { background: var(--gold-soft); }
.tab.active { background: var(--green); color: #fff; border-color: var(--green); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Score table ---------- */
.table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); }
.score-table { border-collapse: collapse; width: 100%; min-width: 900px; }
.score-table th {
    background: var(--gold-soft); color: var(--green-dark);
    font-size: 0.76rem; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 10px 8px; text-align: center; border-bottom: 2px solid var(--gold);
    white-space: nowrap;
}
.score-table th .max, .rc-table th .max { font-weight: 600; color: var(--muted); text-transform: none; margin-left: 2px; }
.score-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.score-table tbody tr:hover { background: #F4F7FB; }
.col-name { text-align: left !important; font-weight: 700; min-width: 170px; }
.score-input { width: 68px; text-align: center; font-weight: 700; }
.calc { font-weight: 800; }
.calc.total { color: var(--green-dark); }

/* ---------- Proficiency chips ---------- */
.prof-chip {
    display: inline-block; font-size: 0.72rem; font-weight: 800;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.p-mastery { background: #DFF2E5; color: #146B3A; border: 1px solid #A9DCBB; }
.p-proficient { background: #E1EDFB; color: #1D4F91; border: 1px solid #B4CFF0; }
.p-approaching { background: #FBF0D4; color: #8A6100; border: 1px solid #EAD290; }
.p-developing { background: #FBE4E1; color: #A62E20; border: 1px solid #F0BBB2; }

/* ---------- Save status ---------- */
.save-status {
    position: fixed; bottom: 18px; right: 18px;
    background: var(--ink); color: #fff; font-weight: 700; font-size: 0.85rem;
    padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
    transition: opacity 0.2s; box-shadow: 0 4px 14px rgba(11, 44, 76, 0.35);
}
.save-status.show { opacity: 1; }
.save-status.ok { background: var(--green); }
.save-status.err { background: var(--red); }

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center; background: var(--white); border: 2px dashed var(--line);
    border-radius: var(--radius); padding: 50px 20px; color: var(--muted);
}
.empty-icon { font-size: 2.6rem; margin-bottom: 8px; }
.empty-state h2 { color: var(--ink); }
.empty-state .btn { margin-top: 10px; }

/* ---------- Students page ---------- */
.add-student-form { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.add-student-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 0.85rem; }
.student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.student-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 14px; display: flex; gap: 14px; align-items: flex-start;
}
.student-photo {
    width: 74px; height: 74px; border-radius: 12px; object-fit: cover;
    border: 2px solid var(--gold); flex-shrink: 0;
}
.student-photo.placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--gold-soft); font-size: 1.9rem; border-style: dashed;
}
.student-info { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.name-input { flex: 1; min-width: 120px; font-weight: 700; }
.file-small { max-width: 165px; font-size: 0.72rem; padding: 5px; }

/* ---------- Report page ---------- */
.report-controls { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fees-form { display: flex; flex-direction: column; gap: 14px; }
.fees-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 0.85rem; }
.fees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: end; }
.fee-total-box {
    background: var(--gold-soft); border: 1.5px solid var(--gold); border-radius: 10px;
    padding: 10px 14px; font-size: 0.95rem;
}
textarea { resize: vertical; }

/* ============================================================
   REPORT CARD (A4 print-ready)
   ============================================================ */
.report-card {
    background: #fff; width: 100%; max-width: 794px; /* A4 width @96dpi */
    margin: 0 auto 26px; border: 1px solid var(--line); border-radius: 6px;
    box-shadow: var(--shadow); padding: 26px 30px; position: relative; overflow: hidden;
}
/* Kente-inspired band */
.rc-band {
    position: absolute; top: 0; left: 0; right: 0; height: 10px;
    background: repeating-linear-gradient(90deg,
        var(--green) 0 46px, var(--gold) 46px 78px,
        #3A6EA5 78px 96px, var(--green-dark) 96px 104px);
}
.rc-head { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.rc-logo { width: 76px; height: 76px; object-fit: contain; }
.rc-logo.placeholder, .rc-photo.placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--gold-soft); font-size: 2rem; border: 2px dashed var(--gold); border-radius: 10px;
}
.rc-school { flex: 1; text-align: center; }
.rc-school h2 { margin: 0; font-size: 1.5rem; color: var(--green-dark); letter-spacing: 0.01em; }
.rc-title { font-weight: 900; letter-spacing: 0.14em; font-size: 0.8rem; color: #A8853F; margin-top: 3px; }
.rc-year { font-size: 0.85rem; color: var(--muted); margin-top: 2px; font-weight: 700; }
.rc-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 2.5px solid var(--green); }

.rc-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 6px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 14px; margin: 16px 0; font-size: 0.88rem;
}
.rc-meta span { color: var(--muted); font-weight: 700; }

.rc-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.rc-table th {
    background: var(--green); color: #fff; padding: 7px 6px; font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.04em; text-align: center;
}
.rc-table th .max { color: rgba(255, 255, 255, 0.75); }
.rc-table td { border: 1px solid var(--line); padding: 6px; text-align: center; }
.rc-table .left { text-align: left; }
.rc-table td.left { font-weight: 700; }
.rc-total { font-weight: 800; color: var(--green-dark); background: #EFF4FA; }
.rc-table tfoot td { background: var(--gold-soft); border-top: 2px solid var(--gold); font-size: 0.9rem; }
.rc-overall { color: var(--green-dark); font-size: 1rem !important; }

.rc-bottom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin-top: 18px; }
.rc-bottom h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-dark); margin: 0 0 8px; }
.rc-fees-table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
.rc-fees-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; }
.rc-fees-table .right { text-align: right; font-variant-numeric: tabular-nums; }
.rc-fees-total td { background: var(--gold-soft); border-top: 2px solid var(--gold); }
.rc-remarks {
    border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #FBFCFE;
}
.rc-remarks p { margin: 0; min-height: 64px; font-size: 0.9rem; line-height: 1.55; }

/* ---------- Login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card {
    background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(18, 68, 115, 0.16);
    border-top: 8px solid var(--gold);
    padding: 38px 34px; width: 100%; max-width: 400px; text-align: center;
}
.login-logo { width: 76px; height: 76px; object-fit: contain; margin-bottom: 10px; }
.login-logo-placeholder { font-size: 3rem; }
.login-card h1 { font-size: 1.35rem; color: var(--green-dark); }
.login-sub { color: var(--muted); font-weight: 700; font-size: 0.85rem; margin-top: 2px; }
.login-card form { text-align: left; margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.login-card label { font-weight: 800; font-size: 0.82rem; }
.login-card .btn { margin-top: 10px; }

/* ---------- Settings ---------- */
.settings-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.settings-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 0.85rem; }
.settings-form .btn { align-self: flex-start; }
.settings-logo-preview { max-width: 130px; max-height: 130px; object-fit: contain; display: block; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; }

.footer { text-align: center; color: var(--muted); font-size: 0.78rem; padding: 18px; }

/* ---------- Button rows / gold button ---------- */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-gold { background: var(--accent-fill); color: var(--accent-fill-ink); }
a.btn { text-decoration: none; display: inline-block; }

/* ---------- Broadsheet ---------- */
.broadsheet-wrap {
    overflow-x: auto; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; margin-bottom: 20px;
}
.bs-title-print { display: none; font-weight: 900; font-size: 1rem; padding: 8px 6px; }
.bs-table { border-collapse: collapse; width: 100%; min-width: 950px; font-size: 0.82rem; }
.bs-table th {
    background: var(--green); color: #fff; padding: 8px 6px; text-align: center;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.bs-table th.bs-subj { max-width: 86px; white-space: normal; }
.bs-table td { border: 1px solid var(--line); padding: 6px; text-align: center; }
.bs-table .left { text-align: left; }
.bs-table td.left { font-weight: 700; }
.bs-table tbody tr:nth-child(even) { background: #F4F7FB; }
.bs-pos { font-weight: 800; color: var(--green-dark); }
.bs-overall { font-weight: 800; background: #EFF4FA; color: var(--green-dark); }
.bs-table tfoot td { background: var(--gold-soft); border-top: 2px solid var(--gold); }

/* ---------- Performance bars ---------- */
.perf-row { display: grid; grid-template-columns: 220px 1fr 110px; gap: 12px; align-items: center; margin-bottom: 9px; }
.perf-label { font-weight: 700; font-size: 0.86rem; }
.perf-bar-track { background: #E9EDF3; border-radius: 999px; height: 16px; overflow: hidden; }
.perf-bar { height: 100%; border-radius: 999px; border: none !important; }
.perf-bar.p-mastery { background: #2E9E5B; }
.perf-bar.p-proficient { background: #3D74C7; }
.perf-bar.p-approaching { background: #e0a020; }
.perf-bar.p-developing { background: #D45B4B; }
.perf-value { font-weight: 800; font-size: 0.84rem; color: var(--muted); text-align: right; }
@media (max-width: 680px) { .perf-row { grid-template-columns: 1fr; gap: 4px; } .perf-value { text-align: left; } }

/* ---------- Promote card ---------- */
.promote-card { border-left: 6px solid var(--gold); margin-top: 20px; }

/* ---------- Dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px; text-align: center;
    border-top: 5px solid var(--gold);
}
.stat-value { font-size: 2rem; font-weight: 900; color: var(--green-dark); line-height: 1.1; }
.stat-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-top: 3px; }
.class-chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.class-chip {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: var(--gold-soft); color: var(--green-dark); font-weight: 800; font-size: 0.86rem;
    border: 1.5px solid var(--gold); border-radius: 999px; padding: 7px 14px;
}
.class-chip strong { background: var(--green); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
.class-chip.locked { opacity: 0.4; border-color: var(--line); background: #E9EDF3; cursor: not-allowed; }
.ann-form { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.ann-item { border-left: 4px solid var(--gold); padding: 8px 12px; margin-bottom: 12px; background: #FBFCFE; border-radius: 0 8px 8px 0; }
.ann-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ann-item p { margin: 6px 0; }

/* ---------- Attendance ---------- */
.att-toolbar { display: flex; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.att-toolbar.bottom { margin-top: 14px; }
.att-table td { text-align: center; }
.att-toggle { display: inline-flex; gap: 6px; }
.att-opt input { position: absolute; opacity: 0; }
.att-opt span {
    display: inline-block; padding: 5px 13px; border-radius: 999px; font-weight: 800; font-size: 0.78rem;
    border: 1.5px solid var(--line); background: #F0F3F7; color: var(--muted); cursor: pointer;
}
.att-opt input:focus-visible + span { outline: 2px solid var(--gold); }
.att-present input:checked + span { background: #DFF2E5; color: #146B3A; border-color: #2E9E5B; }
.att-absent input:checked + span { background: #FBE4E1; color: #A62E20; border-color: #D45B4B; }

/* ---------- Fees ---------- */
.card-flush { margin-bottom: 20px; border-radius: var(--radius); border-top: 1px solid var(--line); }
.fees-table td { vertical-align: middle; }
.bal-owing { font-weight: 800; color: var(--red); }
.bal-clear { font-weight: 800; color: #146B3A; }
.pay-form select, .pay-form input { font-size: 0.82rem; padding: 6px 8px; }
.pay-amount { width: 92px; }
.receipt-card { max-width: 620px; }
.receipt-amount {
    background: var(--gold-soft); border: 2px solid var(--gold); border-radius: 12px;
    text-align: center; font-size: 1.15rem; padding: 16px; margin-top: 16px;
}

/* ---------- Users ---------- */
.nav-user { color: #fff; font-weight: 800; font-size: 0.84rem; padding: 4px 10px; display: inline-flex; flex-direction: column; line-height: 1.15; text-align: right; }
.nav-user small { font-weight: 600; opacity: 0.75; font-size: 0.68rem; }
.pill-grey { background: #93A0AE; color: #fff; }
.user-card { border-left: 6px solid var(--green); }
.user-card.user-inactive { border-left-color: #93A0AE; opacity: 0.75; }
.user-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.user-actions { margin-top: 10px; }
.year-checks { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.year-checks legend { font-weight: 800; font-size: 0.8rem; color: var(--muted); padding: 0 6px; }
.check-chip {
    display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.8rem;
    background: #F0F3F7; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer;
}
.check-chip input { accent-color: var(--green); }
.assign-form { margin-bottom: 6px; }
.assign-label { font-weight: 800; font-size: 0.8rem; color: var(--muted); }
.details-form input, .details-form select { font-size: 0.78rem; padding: 5px 7px; max-width: 140px; }

/* ---------- Timetable ---------- */
.tt-table td { padding: 4px; }
.tt-period { min-width: 96px; white-space: nowrap; }
.tt-daycol { min-width: 96px; }
.tt-period-head { min-width: 92px; }
.tt-time { display: block; font-weight: 600; font-size: 0.6rem; opacity: 0.85; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.tt-cell { min-width: 92px; }
.tt-input { width: 100%; border: 1px dashed var(--line); background: transparent; font-weight: 700; font-size: 0.78rem; text-align: center; padding: 9px 3px; border-radius: 6px; }
.tt-input:hover { border-color: var(--gold); background: var(--gold-soft); }
.tt-input:focus { border-style: solid; background: #fff; }
.period-form .period-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.period-form .period-row input[type="text"] { flex: 1; min-width: 130px; }
.period-new { border-top: 1px dashed var(--line); padding-top: 10px; }

/* ---------- History ---------- */
.trend-up { color: #146B3A; font-weight: 800; }
.trend-down { color: var(--red); font-weight: 800; }
.perf-value .prof-chip { margin-left: 6px; }

/* ---------- SMS ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.sms-msg { font-size: 0.78rem; max-width: 320px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.cron-cmd { background: var(--ink); color: #E8EDF3; padding: 12px 14px; border-radius: 8px; font-size: 0.8rem; overflow-x: auto; }
.backup-list { margin: 4px 0; padding-left: 20px; font-size: 0.88rem; }

/* ---------- Search / audit / portal / finance ---------- */
.nav-search input {
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff;
    border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; width: 150px;
}
.nav-search input::placeholder { color: rgba(255,255,255,0.75); }
.audit-table td { font-size: 0.84rem; }
.audit-chip { background: var(--gold-soft); border: 1px solid var(--gold); color: var(--green-dark);
    font-weight: 800; font-size: 0.72rem; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.audit-detail { color: var(--muted); }
.nowrap { white-space: nowrap; }
.fin-track { display: inline-block; width: 120px; vertical-align: middle; margin-right: 8px; }
.portal-code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; }
.portal-code { background: var(--gold-soft); border: 1px dashed var(--gold); border-radius: 6px;
    padding: 2px 8px; font-weight: 800; letter-spacing: 0.12em; }
.promote-checks { margin-bottom: 10px; }
.portal-area { font-size: 0.85rem; color: var(--green-dark); margin: 14px 0 6px; }
.portal-ms-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-bottom: 1px dashed var(--line); padding: 6px 0; font-size: 0.88rem; }
.ward-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ward-tab { display: flex; align-items: center; gap: 9px; background: var(--white); border: 1.5px solid var(--line);
    border-radius: 12px; padding: 8px 14px 8px 8px; text-decoration: none; color: var(--ink); font-weight: 700;
    box-shadow: var(--shadow); }
.ward-tab img, .ward-tab .ward-tab-ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    display: flex; align-items: center; justify-content: center; background: var(--cream); font-size: 1.1rem; }
.ward-tab small { display: block; font-weight: 600; color: var(--muted); font-size: 0.7rem; }
.ward-tab.active { border-color: var(--gold); background: var(--gold-soft); }
.add-child summary { list-style: none; cursor: pointer; display: inline-block; }
.add-child summary::-webkit-details-marker { display: none; }
.portal-announcement { border-bottom: 1px dashed var(--line); padding: 8px 0; font-size: 0.9rem; }
.portal-announcement:last-child { border-bottom: none; }
.portal-announcement p { margin: 4px 0 0; color: var(--muted); }

/* ---------- ID cards ---------- */
.idcard-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.idcard { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow); page-break-inside: avoid; font-size: 0.78rem; }
.idcard-band { height: 6px; background: repeating-linear-gradient(90deg, var(--green) 0 26px, var(--accent-fill) 26px 40px, #9E2B25 40px 48px); }
.idcard-head { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--green); color: #fff; }
.idcard-logo, .idcard-logo-ph { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff;
    display: flex; align-items: center; justify-content: center; }
.idcard-school { font-weight: 900; line-height: 1.15; font-size: 0.8rem; }
.idcard-school small { display: block; font-weight: 600; font-size: 0.6rem; opacity: 0.85; }
.idcard-body { display: flex; gap: 10px; padding: 10px 11px; align-items: center; }
.idcard-photo { width: 62px; height: 62px; border-radius: 8px; object-fit: cover; border: 1.5px solid var(--gold); }
.idcard-photo.ph { display: flex; align-items: center; justify-content: center; background: var(--cream); font-size: 1.5rem; }
.idcard-details { flex: 1; min-width: 0; }
.idcard-name { font-weight: 900; font-size: 0.9rem; color: var(--green-dark); }
.idcard-class { font-weight: 800; color: var(--gold); }
.idcard-line { color: var(--muted); font-size: 0.7rem; }
.idcard-code { margin-top: 3px; font-size: 0.72rem; letter-spacing: 0.06em; }
.idcard-qr { width: 68px; height: 68px; flex-shrink: 0; }
.idcard-qr img, .idcard-qr canvas { width: 68px !important; height: 68px !important; }
.idcard-foot { border-top: 1px dashed var(--line); padding: 4px 11px; font-size: 0.62rem; color: var(--muted); }
@media print {
    .idcard-sheet { grid-template-columns: repeat(2, 1fr); gap: 8mm; }
    .idcard, .idcard-head, .idcard-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Staff attendance ---------- */
.staff-opt input { position: absolute; opacity: 0; }
.staff-opt span { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center;
    justify-content: center; border: 1.5px dashed var(--line); color: transparent; cursor: pointer; font-weight: 900; }
.staff-opt.present input:checked + span { background: #DFF2E5; color: #146B3A; border: 1.5px solid #2E9E5B; }
.staff-opt.absent input:checked + span { background: #FBE4E1; color: #A62E20; border: 1.5px solid #D45B4B; }
.staff-opt.leave input:checked + span { background: var(--gold-soft); color: #8A6100; border: 1.5px solid var(--gold); }

/* ---------- Subject assignments ---------- */
.subject-assign { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.subj-chip-form { display: inline-flex; }
.subj-chip { background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 999px;
    padding: 3px 6px 3px 12px; font-size: 0.76rem; font-weight: 800; color: var(--green-dark);
    display: inline-flex; align-items: center; gap: 4px; }
.subj-chip button { background: none; border: none; color: var(--red); font-weight: 900; cursor: pointer; font-size: 0.95rem; padding: 0 3px; }
.portal-fee-items { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.88rem; }
.portal-fee-items td { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.portal-fee-items .right { text-align: right; }
.portal-fee-items .pfi-total td { border-bottom: none; border-top: 2px solid var(--green); }
.fee-items-form { flex-wrap: wrap; }

/* ---------- Bulk printing & results status ---------- */
.bulk-card { margin-bottom: 34px; }
.subj-statusbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; }
.subj-locked .score-input { background: #F0F3F7; }
@media print {
    .bulk-card { page-break-after: always; margin: 0; }
    .bulk-card:last-of-type { page-break-after: auto; }
}

/* ---------- Attendance approvals ---------- */
.alert-info { background: #E8F0F9; color: var(--green-dark); border: 1px solid #C3D6EC; border-radius: 10px; padding: 11px 15px; margin-bottom: 16px; font-weight: 700; font-size: 0.92rem; }
.approval-card { border-left: 6px solid var(--gold); }
.approval-row { border-bottom: 1px dashed var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.approval-row:last-child { border-bottom: none; }
.approval-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.approval-actions { gap: 8px; }
.note-input { max-width: 200px; font-size: 0.8rem; }

/* ---------- Milestones entry ---------- */
.ms-area { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.ms-area-head { background: var(--green); color: #fff; font-weight: 800; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ms-area-head.ms-gold { background: #B58F47; }
.ms-cols { display: grid; grid-template-columns: repeat(4, 74px); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; opacity: 0.9; }
.ms-subgroup { background: var(--cream); font-weight: 800; font-size: 0.82rem; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.ms-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--line); }
.ms-row:last-child { border-bottom: none; }
.ms-row:hover { background: #F4F7FB; }
.ms-name { font-size: 0.88rem; flex: 1; }
.ms-opts { display: grid; grid-template-columns: repeat(4, 74px); }
.ms-opt { display: flex; justify-content: center; }
.ms-opt input { position: absolute; opacity: 0; }
.ms-opt span {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--line); color: transparent; cursor: pointer; font-weight: 900; font-size: 1rem;
}
.ms-opt input:focus-visible + span { outline: 2px solid var(--gold); }
.ms-opt:nth-child(1) input:checked + span { background: #DFF2E5; color: #146B3A; border: 1.5px solid #2E9E5B; }
.ms-opt:nth-child(2) input:checked + span { background: var(--gold-soft); color: #8A6100; border: 1.5px solid var(--gold); }
.ms-opt:nth-child(3) input:checked + span { background: #FBE4E1; color: #A62E20; border: 1.5px solid #D45B4B; }
.ms-clear span { border-style: dotted; color: var(--muted); font-size: 0.85rem; }
.ms-clear input:checked + span { background: #E9EDF3; }
.ms-del { background: none; border: none; color: var(--red); font-size: 1.1rem; font-weight: 900; cursor: pointer; padding: 0 4px; }

/* ---------- Preschool report ---------- */
.ps-banner {
    background: var(--green); color: #fff; text-align: center; font-weight: 900;
    letter-spacing: 0.12em; font-size: 0.9rem; padding: 9px; border-radius: 8px; margin: 14px 0;
}
.ps-info { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin-bottom: 12px; }
.ps-info td { border: 1px solid var(--line); padding: 7px 10px; }
.ps-info .ps-label { background: var(--cream); color: var(--green); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; width: 17%; white-space: nowrap; }
.ps-instructions { font-size: 0.8rem; color: var(--ink); margin: 10px 0 14px; }
.ps-check { border-collapse: collapse; width: 100%; font-size: 0.82rem; margin-bottom: 14px; }
.ps-check th, .ps-check td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.ps-check .left { text-align: left; }
.ps-check-cols th { background: var(--green-dark); color: #fff; font-size: 0.66rem; letter-spacing: 0.06em; border-color: var(--green-dark); }
.ps-check-cols th.left { background: var(--green-dark); }
.ps-check th.ps-area { background: var(--green); color: #fff; text-align: left; font-size: 0.85rem; letter-spacing: 0.02em; }
.ps-check th.ps-area-gold { background: #B58F47; }
.ps-sub td { background: var(--cream); }
.ps-tick { width: 84px; color: #146B3A; font-weight: 900; font-size: 1rem; }
.ps-remarks { border: 1.5px solid var(--line); border-left: 5px solid var(--gold); background: #FDFBF5; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.ps-remarks-blue { border-left-color: var(--green); background: #F6F9FC; }
.ps-remarks h3 { margin: 0 0 6px; font-size: 0.85rem; color: var(--green-dark); }
.ps-remarks p { margin: 0; min-height: 34px; font-size: 0.88rem; }
.ps-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; font-size: 0.88rem; }
.ps-promo > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.ps-promo .ps-label { color: var(--green); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; margin-right: 6px; }
@media print {
    .ps-check { page-break-inside: auto; }
    .ps-check tr, .ms-area { page-break-inside: avoid; }
    .ps-banner, .ps-check-cols th, .ps-check th.ps-area, .ps-info .ps-label, .ps-tick, .ps-remarks, .ps-promo > div {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
    .rc-bottom { grid-template-columns: 1fr; }
    .rc-head { flex-wrap: wrap; justify-content: center; text-align: center; }
    .topbar { justify-content: center; }
}

/* ============================================================
   PRINT — A4 report card only
   ============================================================ */
@media print {
    @page { size: A4 portrait; margin: 10mm; }
    body { background: #fff; }
    .topbar, .selector-bar, .no-print, .footer, .save-status { display: none !important; }
    .page { padding: 0; max-width: none; }
    .report-card {
        box-shadow: none; border: none; border-radius: 0;
        max-width: 100%; padding: 0; margin: 0;
    }
    .rc-band { position: static; display: block; margin-bottom: 10px; }
    .broadsheet-wrap { box-shadow: none; border: none; overflow: visible; padding: 0; }
    .bs-title-print { display: block; }
    .bs-table { min-width: 0; width: 100%; font-size: 0.68rem; }
    .prof-chip, .rc-table th, .rc-total, .rc-fees-total td, .rc-table tfoot td, .rc-meta,
    .bs-table th, .bs-overall, .bs-table tfoot td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}


/* ==================== Mobile (phones & small tablets) ==================== */
.nav-toggle { display: none; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; border-radius: 8px; padding: 9px 14px; font-weight: 800; font-size: 0.9rem; cursor: pointer; }

@media (max-width: 820px) {
    .page { padding: 14px 12px; }
    .topbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
    .nav-toggle { display: inline-block; margin-left: auto; }
    .topbar-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px;
        border-top: 1px solid rgba(255,255,255,0.2); padding-top: 8px; }
    .topbar-nav.open { display: flex; }
    .topbar-nav a { padding: 12px 14px; font-size: 1rem; }
    .nav-search { width: 100%; order: 5; }
    .nav-search input { width: 100%; box-sizing: border-box; padding: 10px 14px; }
    .nav-user { display: none; }

    /* iOS zooms into inputs under 16px — keep form text at 16px on phones */
    input, select, textarea, button { font-size: 16px; }
    .score-input { min-width: 52px; padding: 10px 4px; }

    .page-head h1 { font-size: 1.25rem; }
    .report-controls { flex-direction: column; align-items: stretch; }
    .report-controls .btn, .btn-row .btn { text-align: center; }
    .add-student-form { flex-direction: column; align-items: stretch; gap: 10px; }
    .add-student-form label { width: 100%; }
    .add-student-form select, .add-student-form input, .add-student-form textarea { width: 100%; box-sizing: border-box; }

    /* Term and Class belong side by side — they are short and always used together. */
    .selector-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
    .selector-form label { flex: 1 1 0; min-width: 0; width: auto; }
    .selector-form select, .selector-form input { width: 100%; box-sizing: border-box; }

    /* Milestones checklist: name above the tick row, compact columns */
    .ms-area-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ms-cols { grid-template-columns: repeat(4, 56px); width: 100%; justify-content: end; }
    .ms-row { flex-wrap: wrap; }
    .ms-name { flex: 1 1 100%; }
    .ms-opts { grid-template-columns: repeat(4, 56px); margin-left: auto; }
    .ms-opt span { width: 40px; height: 40px; }

    /* Attendance / staff radios: bigger touch targets */
    .att-opt span, .staff-opt span { min-height: 42px; }

    /* Report card bottom: stack on screen (print keeps two columns) */
    .rc-bottom { grid-template-columns: 1fr; }
    .rc-meta { grid-template-columns: 1fr 1fr; }

    /* ID cards: one per row on screen; print stays two-up */
    .idcard-sheet { grid-template-columns: 1fr; }

    /* Approvals & family tabs stack cleanly */
    .approval-info, .approval-actions { flex-wrap: wrap; }
    .note-input { max-width: none; width: 100%; }
    .ward-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .ward-tab { flex-shrink: 0; }
}
@media print { .nav-toggle { display: none !important; } }


/* ============================================================
   Application shell: left sidebar + main column
   (.topbar styles above are retained for the Guardian Portal)
   ============================================================ */
.app { background: var(--cream); }
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 236px; flex-shrink: 0; background: var(--white); color: var(--muted); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
}
.side-brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px;
    border-bottom: 3px solid var(--gold); }
.side-logo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; }
.side-school { font-family: var(--serif); font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.side-ay { font-size: 0.72rem; opacity: 0.65; margin-top: 2px; }

.side-nav { padding: 10px 0; flex: 1; }
.side-nav a {
    display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,0.78);
    text-decoration: none; font-size: 0.875rem; font-weight: 500;
    padding: 9px 16px; border-left: 3px solid transparent;
}
.side-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.side-nav a.active { background: rgba(255,255,255,0.08); color: #fff;
    border-left-color: var(--gold); font-weight: 600; }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.side-foot { border-top: 1px solid rgba(255,255,255,0.12); padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-user { display: flex; flex-direction: column; min-width: 0; }
.side-user strong { font-size: 0.83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user span { font-size: 0.72rem; opacity: 0.6; }
.side-logout { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.75);
    text-decoration: none; font-size: 0.8rem; font-weight: 600; flex-shrink: 0; }
.side-logout:hover { color: var(--gold); }

.maincol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topstrip {
    background: var(--white); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 16px; padding: 10px 24px;
    position: sticky; top: 0; z-index: 40;
}
.topstrip .selector-form { display: flex; gap: 14px; align-items: center; }
.topstrip .selector-form label { display: flex; align-items: center; gap: 7px;
    font-size: 0.8rem; font-weight: 600; color: var(--muted); margin: 0; }
.topstrip .selector-form select, .topstrip .selector-form input {
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px;
    font-family: inherit; font-size: 0.85rem; background: var(--white); }
.topstrip-spacer { flex: 1; }
.nav-search { display: flex; align-items: center; gap: 8px; background: var(--cream);
    border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; }
.nav-search .ico { color: var(--muted); width: 15px; height: 15px; }
.nav-search input { border: none; background: transparent; padding: 8px 0; font-family: inherit;
    font-size: 0.85rem; width: 170px; outline: none; color: var(--ink); border-radius: 0; }
.topstrip .nav-search input::placeholder { color: var(--muted); }
.app .page { padding: 28px 32px 60px; max-width: 1160px; width: 100%; margin: 0 auto; }
.app .footer { text-align: center; padding: 14px 24px; color: var(--muted); font-size: 0.75rem;
    border-top: 1px solid var(--line); margin-top: auto; }

/* ---------- Flatter components ---------- */
.app .card { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.app .btn { border-radius: 6px; font-weight: 600; box-shadow: none; }
.app .pill { border-radius: 5px; font-weight: 600; letter-spacing: 0.01em; }
.app .prof-chip, .app .subj-chip, .app .check-chip { border-radius: 5px; }
.app .selector-bar { display: none; }
.app h1 { font-size: 1.35rem; }
.app .empty-icon { display: none; }
.app .stat-card, .app .portal-stat { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }

.nav-toggle { display: none; background: transparent; border: 1px solid var(--line);
    color: var(--ink); border-radius: 6px; padding: 8px; line-height: 0; cursor: pointer; }

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .sidebar { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 100;
        transition: left 0.18s ease; height: 100%; }
    .sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.3); }
    body.nav-overlay::after { content: ''; position: fixed; inset: 0;
        background: rgba(11, 44, 76, 0.45); z-index: 90; }
    .topstrip { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
    .nav-search { order: 5; width: 100%; }
    .nav-search input { width: 100%; }
    .app .page { padding: 14px 12px; }
}
@media print { .sidebar, .topstrip, .nav-toggle { display: none !important; } .shell { display: block; } .app .page { padding: 0; } }

.login-card h1, .topbar-school, .rc-school, .side-school { font-family: var(--serif); }


/* ==== Ridge View-style refinements ==== */
.stat-value, .stat-card .num, .portal-stat strong, .score-table td.right, .bal-owing, .bal-clear { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.app .card { border-radius: var(--radius); }
.app .btn { border-radius: 10px; }
.app .pill, .app .prof-chip, .app .subj-chip, .app .check-chip, .app .side-nav a.active { border-radius: 9px; }
.side-nav a.active { border-left-color: #fff; }
.app h1, .app h2, .app h3 { font-family: var(--serif); letter-spacing: -0.02em; }
/* Soft-tinted stat cards like the sample */
.stat-card { background: var(--white); border: 1px solid var(--line); }
.stat-card.good { background: var(--green-soft); border-color: #bfe8cf; }
.stat-card.warn { background: var(--amber-soft); border-color: #fde68a; }
.stat-card.info { background: var(--gold-soft); border-color: #cddffb; }
/* Proficiency bands adopt the semantic tints */
/* proficiency bands defined once above (distinct green/blue/gold/red) */


/* ===================== Ridge View sidebar (white, blue accents) ===================== */
.sidebar { padding: 0; }
.side-brand { border-bottom: 1px solid var(--line); padding: 18px 20px; }
.side-logo { border-radius: 13px; }
.side-brand .side-school { color: var(--ink); font-weight: 800; }
.side-ay { color: var(--muted-soft); }
.side-nav { padding: 16px 12px; gap: 3px; display: flex; flex-direction: column; }
.side-nav a {
    color: var(--muted); font-weight: 600; font-size: 13.5px;
    padding: 11px 14px; border-radius: 11px; border-left: none; gap: 12px;
}
.side-nav a .ico { color: var(--muted-soft); width: 17px; height: 17px; }
.side-nav a:hover { background: var(--cream); color: var(--ink); }
.side-nav a:hover .ico { color: var(--muted); }
.side-nav a.active { background: var(--gold-soft); color: var(--green); border-left: none; }
.side-nav a.active .ico { color: var(--green); }
.side-foot { border-top: 1px solid var(--line); margin: 0 12px 14px; padding: 12px;
    border-radius: 13px; background: var(--cream); }
.side-user strong { color: var(--ink); }
.side-user span, .side-logout { color: var(--muted-soft); }
.side-logout:hover { color: var(--green); }

/* Top strip lighter, search rounded like the template */
.topstrip { padding: 16px 30px; background: transparent; border-bottom: none; }
.nav-search { border-radius: 12px; height: 42px; }
.app .page { padding: 6px 30px 34px; }

/* Cards: rounder with the soft blue shadow */
.app .card, .stat-card, .app .stat-card {
    border-radius: 18px; box-shadow: 0 4px 18px rgba(37, 99, 235, 0.06); border: 1px solid var(--line);
}
.app .btn-primary {
    background: var(--green); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); border: none;
}
.app .btn-primary:hover { background: var(--green-dark); }

/* Pills / status chips rounded like the template (pill = 20px radius) */
.app .pill { border-radius: 20px; padding: 4px 11px; font-size: 11px; font-weight: 700; }
.app .prof-chip { border-radius: 20px; font-weight: 700; }

/* ===================== Home dashboard (greeting + tinted stat tiles) ===================== */
.dash-hello { margin-bottom: 4px; }
.dash-date { font-size: 12.5px; color: var(--muted-soft); font-weight: 600; }
.dash-greet { font-size: 25px; font-weight: 800; letter-spacing: -0.5px; margin-top: 2px; color: var(--ink); font-family: var(--serif); }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 18px 0; }
.dash-tile { background: var(--white); border-radius: 18px; padding: 19px; box-shadow: 0 4px 18px rgba(37,99,235,0.06); border: 1px solid var(--line); }
.dash-tile .tile-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--gold-soft);
    margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.dash-tile .tile-ico .ico { color: var(--green); width: 18px; height: 18px; }
.dash-tile .tile-label { font-size: 12.5px; color: var(--muted-soft); font-weight: 600; }
.dash-tile .tile-num { font-size: 27px; font-weight: 800; font-family: var(--mono); color: var(--ink); }
.dash-tile .tile-sub { font-size: 12px; color: #5d6b86; font-weight: 600; margin-top: 2px; }
.dash-tile.good .tile-ico { background: var(--green-soft); } .dash-tile.good .tile-ico .ico { color: var(--green-ok); }
.dash-tile.warn .tile-ico { background: var(--amber-soft); } .dash-tile.warn .tile-ico .ico { color: var(--amber); }
.dash-tile.hero { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; border: none; }
.dash-tile.hero .tile-label, .dash-tile.hero .tile-sub { color: rgba(255,255,255,0.85); }
.dash-tile.hero .tile-num { color: #fff; }
.dash-tile.hero .tile-ico { background: rgba(255,255,255,0.2); }
@media (max-width: 900px) { .dash-stats { grid-template-columns: 1fr 1fr; } }

.side-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted-soft); padding: 14px 16px 6px; }

.fee-lines { margin-top: 3px; display: flex; flex-direction: column; gap: 1px; }
.fee-line { font-size: 11px; color: var(--muted); font-family: var(--mono); }

.rename-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: end; }
.rename-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.rename-grid input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; }
.rename-grid button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) { .rename-grid { grid-template-columns: 1fr 1fr; } }

/* Behaviour log */
.behaviour-form label { display:block; margin-bottom:10px; font-size:13px; font-weight:600; color:var(--muted); }
.behaviour-form input, .behaviour-form select, .behaviour-form textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; margin-top:3px; }
.behaviour-form .bf-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:700px){ .behaviour-form .bf-row { grid-template-columns:1fr; } }
.behaviour-list { display:flex; flex-direction:column; gap:10px; }
.beh-item { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; border-left:4px solid var(--line); }
.beh-warning { border-left-color:#d97706; } .beh-detention { border-left-color:#a855f7; }
.beh-suspension { border-left-color:#dc2626; } .beh-positive { border-left-color:#16a34a; } .beh-note { border-left-color:#7c8db5; }
.beh-badge { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:20px; margin-right:6px; }
.beh-badge-warning { background:#fef3c7; color:#8a6100; } .beh-badge-detention { background:#f3e8ff; color:#7e22ce; }
.beh-badge-suspension { background:#fbe4e1; color:#a62e20; } .beh-badge-positive { background:#dff2e5; color:#146b3a; } .beh-badge-note { background:#eef3fc; color:#56658c; }
.beh-detail { font-size:13px; color:var(--ink); margin-top:5px; }
.beh-meta { font-size:11.5px; color:var(--muted-soft); margin-top:5px; }

/* Analytics dashboard */
.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.analytics-grid .analytics-wide { grid-column:1 / -1; }
@media (max-width:820px){ .analytics-grid { grid-template-columns:1fr; } }
.chart-bars { width:100%; height:230px; }
.chart-bars .bar-val { font-size:15px; fill:var(--muted); font-family:var(--mono); font-weight:600; }
.chart-bars .bar-lab { font-size:14px; fill:var(--muted-soft); }
.chart-donut { width:180px; height:180px; }
.donut-num { font-size:34px; font-weight:800; fill:var(--ink); font-family:var(--mono); }
.donut-cap { font-size:11px; fill:var(--muted-soft); }
.donut-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.legend { display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--muted); }
.legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:8px; vertical-align:middle; }
.legend b { color:var(--ink); margin-left:5px; }
.att-gauge { text-align:center; padding:8px 0; }
.gauge-num { font-size:44px; font-weight:800; font-family:var(--mono); color:var(--green); line-height:1; }
.gauge-cap { font-size:12px; color:var(--muted-soft); margin-bottom:12px; }
.gauge-bar { height:12px; border-radius:20px; background:var(--gold-soft); overflow:hidden; }
.gauge-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--green-dark)); border-radius:20px; }
.gauge-meta { font-size:12px; color:var(--muted); margin-top:8px; }
.fee-collect { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:center; }
@media (max-width:700px){ .fee-collect { grid-template-columns:1fr; } }
.fc-summary { display:flex; flex-direction:column; gap:10px; }
.fc-summary div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:8px; }
.fc-summary strong { font-family:var(--mono); }

/* Clinic / medical */
.medical-form label, .clinic-form label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px; }
.medical-form input, .medical-form select, .medical-form textarea,
.clinic-form input, .clinic-form select, .clinic-form textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; margin-top:3px; }
.mf-grid, .cf-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cf-row { grid-template-columns:1fr 1fr; }
@media (max-width:700px){ .mf-grid, .cf-row { grid-template-columns:1fr; } }
.clinic-find select { padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; min-width:280px; margin-right:10px; }
.med-view { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
@media (max-width:600px){ .med-view { grid-template-columns:1fr; } }
.med-view div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.med-view strong { text-align:right; }

/* Announcements */
.ann-form label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px; }
.ann-form input[type=text], .ann-form textarea, .ann-form select { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; margin-top:3px; }
.ann-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:700px){ .ann-row { grid-template-columns:1fr; } }
.ann-opts { display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 12px; }
.ann-list { display:flex; flex-direction:column; gap:10px; }
.ann-item { display:flex; justify-content:space-between; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; }
.ann-item.ann-pinned { border-color:#fde68a; background:#fffdf5; }
.ann-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ann-aud { font-size:11px; color:var(--muted-soft); background:var(--gold-soft); padding:2px 8px; border-radius:20px; }
.ann-text { font-size:13.5px; color:var(--ink); line-height:1.5; }
.ann-meta { font-size:11.5px; color:var(--muted-soft); margin-top:6px; }
.ann-actions { display:flex; flex-direction:column; gap:6px; }

/* Library */
.lib-form label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px; }
.lib-form input, .lib-form select { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; margin-top:3px; }
.lib-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check-chip.mini { font-size:11px; padding:3px 7px; }

/* Asset register */
.asset-form label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px; }
.asset-form input, .asset-form select, .asset-form textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; margin-top:3px; }
.af-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.af-row:has(label:only-child){ grid-template-columns:1fr; }
@media (max-width:700px){ .af-row { grid-template-columns:1fr; } }
.asset-filters { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.asset-filters select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.score-table code { font-family:var(--mono); font-size:12px; color:var(--green-dark); }

/* Asset finance */
.fin-readout { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 20px; margin:10px 0; }
.fin-readout.wide { grid-template-columns:repeat(5,1fr); }
@media (max-width:800px){ .fin-readout, .fin-readout.wide { grid-template-columns:1fr 1fr; } }
.fin-readout div { display:flex; flex-direction:column; gap:3px; padding:10px 12px; background:var(--gold-soft); border-radius:10px; }
.fin-readout strong { font-family:var(--mono); font-size:16px; }
.fin-readout .muted { font-size:11.5px; }

/* Admissions */
.adm-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.adm-actions select { padding:6px 8px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:12.5px; }
a.dash-tile { color:inherit; }
a.dash-tile:hover { border-color:var(--accent); }

/* Merged fees overview */
.fin-overview-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.fin-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0; }
@media (max-width:700px){ .fin-tiles { grid-template-columns:1fr 1fr; } }
.fin-tiles div { display:flex; flex-direction:column; gap:3px; padding:12px 14px; background:var(--gold-soft); border-radius:12px; }
.fin-tiles strong { font-family:var(--mono); font-size:18px; }
.fin-tiles .muted { font-size:11.5px; }
.fin-details summary { cursor:pointer; font-weight:700; color:var(--accent); padding:6px 0; }
.fin-details[open] summary { margin-bottom:6px; }

/* Import / restore */
.danger-card { border:1px solid #f0c8c2; background:#fdf6f5; }
.imp-label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin:12px 0; }
.imp-label input[type=text], .imp-label input[type=file] { display:block; width:100%; max-width:420px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; margin-top:5px; }
.danger-card ul { margin:8px 0 14px 18px; font-size:13px; }
.danger-card ul li { margin-bottom:4px; }

/* Module toggles */
.module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 16px; }
@media (max-width:700px){ .module-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .module-grid { grid-template-columns:1fr; } }
.module-toggle { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.module-toggle:has(input:checked) { border-color:var(--accent); background:var(--gold-soft); }
.module-toggle input { width:17px; height:17px; accent-color:var(--accent); }

/* Per-item fee progress (office) */
.fee-progress { margin-top:6px; display:flex; flex-direction:column; gap:5px; }
.fee-prog-row { font-size:11.5px; }
.fee-prog-label { display:flex; justify-content:space-between; gap:8px; }
.fee-prog-track { height:5px; margin-top:2px; }
.pay-split { margin-top:6px; }
.pay-split summary { cursor:pointer; font-size:12px; color:var(--accent); font-weight:600; }
.pay-split-body { padding:8px 0; }
.split-line { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; margin-bottom:6px; }
.split-line input { width:110px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font:inherit; }
/* Per-item fee progress (portal) */
.portal-fee-progress { display:flex; flex-direction:column; gap:12px; }
.pfp-head { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin-bottom:4px; flex-wrap:wrap; }
.pfp-name { font-weight:600; }
.pfp-owing { color:#a62e20; margin-left:8px; }
.pfp-done { color:#146b3a; margin-left:8px; }
.pfi-alloc { width:110px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:inherit; }
.pfi-hint { font-size:12px; margin:6px 0 14px; }

/* Announcement templates + board paging */
.ann-templates { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.ann-templates .muted { font-size:12.5px; margin-right:2px; }
.tpl-chip { font:inherit; font-size:12px; font-weight:600; padding:6px 11px; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:20px; cursor:pointer; }
.tpl-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--gold-soft); }
.tpl-chip.tpl-clear { color:var(--muted-soft); }
.ann-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 14px; }
.ann-filters input[type=search], .ann-filters select { padding:8px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px; }
.ann-filters input[type=search] { min-width:220px; }
.ann-paging { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; }
.ann-paging .muted { font-size:12.5px; }

/* Staff self check-in */
.ci-status { padding:10px 13px; border-radius:10px; background:var(--gold-soft); font-size:13px; font-weight:600; color:var(--muted); margin-bottom:14px; }
.ci-status.ci-ok { background:#dff2e5; color:#146b3a; }
.ci-status.ci-bad { background:#fbe4e1; color:#a62e20; }
.checkin-form .ci-step { padding:14px 0; border-bottom:1px solid var(--line); }
.ci-step-head { font-weight:700; font-size:14px; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.ci-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; }
.ci-video, .ci-preview { width:100%; max-width:320px; border-radius:12px; background:#000; display:block; margin:8px 0; }
.ci-photo-actions { display:flex; gap:8px; }
.ci-hidden { display:none !important; }
.checkin-done .checkin-thumb { width:160px; border-radius:12px; margin:10px 0; display:block; }
.ci-mini { width:34px; height:34px; object-fit:cover; border-radius:6px; vertical-align:middle; margin-left:6px; border:1px solid var(--line); }


/* =========================================================================
   MOBILE AUDIT FIXES (v26.1)
   Appended last so these rules win over earlier module styles.
   ========================================================================= */
@media (max-width: 760px) {

    /* --- 1. iOS zoom trap: later module styles were overriding the 16px rule.
       Any input under 16px makes iPhones zoom in on focus. Force 16px everywhere. --- */
    input, select, textarea,
    .behaviour-form input, .behaviour-form select, .behaviour-form textarea,
    .clinic-form input, .clinic-form select, .clinic-form textarea,
    .medical-form input, .medical-form select, .medical-form textarea,
    .ann-form input, .ann-form select, .ann-form textarea,
    .lib-form input, .lib-form select,
    .asset-form input, .asset-form select, .asset-form textarea,
    .checkin-form input, .ann-filters input, .ann-filters select,
    .asset-filters select, .clinic-find select, .split-line input, .pfi-alloc,
    .rename-grid input, .details-form input, .details-form select {
        font-size: 16px !important;
    }

    /* --- 2. Grids that had no phone fallback --- */
    .ms-cols, .ms-opts { grid-template-columns: 1fr !important; }
    .lib-row { grid-template-columns: 1fr !important; }
    .fin-readout, .fin-readout.wide { grid-template-columns: 1fr 1fr !important; }

    /* --- 3. Elements wider than a small phone (360px) --- */
    .clinic-find select { min-width: 0 !important; width: 100%; margin-right: 0; }
    .ann-filters input[type=search] { min-width: 0 !important; width: 100%; }
    .ann-filters { flex-direction: column; align-items: stretch; }
    .ci-video, .ci-preview { max-width: 100% !important; }
    .split-line input, .pfi-alloc { width: 100%; }
    .split-line { flex-direction: column; align-items: stretch; gap: 4px; }

    /* --- 4. Touch targets: 44px minimum so buttons are tappable --- */
    .btn { min-height: 44px; padding: 11px 18px; }
    .btn-small { min-height: 40px; padding: 9px 14px; font-size: 0.85rem; }
    .tpl-chip { min-height: 40px; padding: 9px 13px; }
    .adm-actions .btn, .ann-actions .btn, .asset-filters .btn { min-height: 40px; }
    .module-toggle { min-height: 48px; }
    .module-toggle input { width: 20px; height: 20px; }
    .staff-opt { min-width: 40px; min-height: 40px; }

    /* --- 5. Wide data tables: keep the name column visible while scrolling --- */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .score-table { min-width: 700px; }
    .score-table td.col-name, .score-table th.col-name {
        position: sticky; left: 0; z-index: 2;
        background: var(--white); box-shadow: 2px 0 4px rgba(0,0,0,0.06);
        max-width: 148px; white-space: normal;
    }
    .score-table th.col-name { background: var(--gold-soft); z-index: 3; }

    /* a hint that a table scrolls sideways */
    .table-wrap::after {
        content: 'swipe sideways for more →';
        display: block; font-size: 11px; color: var(--muted-soft);
        padding: 6px 10px; text-align: right; border-top: 1px solid var(--line);
    }

    /* --- 6. Forms and toolbars stack instead of squeezing --- */
    .pay-form, .inline-form { flex-wrap: wrap; gap: 6px; }
    .pay-form .pay-amount { width: 100%; }
    .fin-overview-head { flex-direction: column; align-items: stretch; gap: 8px; }
    .ann-paging { flex-direction: column; gap: 8px; text-align: center; }
    .page-head h1 { font-size: 1.2rem; line-height: 1.3; }

    /* --- 7. Cards use less side padding so content gets the width --- */
    .card { padding: 14px 13px; }
    .dash-stats { gap: 10px; }
}

/* Very small phones (<=380px) */
@media (max-width: 380px) {
    .dash-stats { grid-template-columns: 1fr 1fr !important; }
    .fin-readout, .fin-readout.wide, .fin-tiles { grid-template-columns: 1fr !important; }
    .score-table td.col-name, .score-table th.col-name { max-width: 118px; }
    .ann-templates { gap: 5px; }
}

/* wrapped wide tables (broadsheet, timetable) */
.bs-wrap, .tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
    .portal-fee-items { width: 100%; }
    .portal-fee-items td { padding: 8px 4px; font-size: 13.5px; }
}

/* Staff requests: leave & complaints */
.complaint-response { margin-top:8px; padding:10px 12px; background:var(--gold-soft); border-radius:9px; font-size:13px; line-height:1.5; }
.complaint-form { margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.complaint-form textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; }
.cf-actions { display:flex; gap:8px; align-items:center; }
.cf-actions select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.leave-decide { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.leave-decide input[type=text] { padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; }
@media (max-width:760px){
    .complaint-form textarea, .cf-actions select { font-size:16px !important; }
    .leave-decide { flex-direction:column; align-items:stretch; }
    .leave-decide input[type=text] { width:100% !important; font-size:16px !important; }
    .leave-decide .btn { width:100%; }
}

/* Session timeout settings */
.timeout-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0 16px; }
@media (max-width:700px){ .timeout-grid { grid-template-columns:1fr; } }
.timeout-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; font-weight:600; }
.timeout-input input { width:78px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:inherit; text-align:right; }
@media (max-width:760px){ .timeout-input input { font-size:16px !important; } }

/* Receipt: item breakdown + balance */
.receipt-items { width:100%; margin:14px 0 6px; border-collapse:collapse; }
.receipt-items th, .receipt-items td { padding:7px 9px; border-bottom:1px solid var(--line); font-size:13.5px; }
.receipt-items th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-soft); }
.receipt-items .right, .receipt-balance .right { text-align:right; font-family:var(--mono); }
.receipt-balance { width:100%; margin:10px 0 4px; border-collapse:collapse; }
.receipt-balance td { padding:6px 9px; font-size:13px; }
.receipt-balance .rc-bal-row td, .receipt-balance .pfi-total td { border-top:2px solid var(--ink); padding-top:8px; }
@media print { .receipt-items, .receipt-balance { page-break-inside: avoid; } }

/* Exam /100 entry toggle */
.exam-mode-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 6px; padding:9px 12px; background:var(--gold-soft); border-radius:10px; }
.exam-mode-bar .muted { font-size:12px; }
/* Teacher analytics */
.tclass-head { margin:22px 0 10px; font-size:1.05rem; }
.entry-list, .attn-list { display:flex; flex-direction:column; gap:7px; }
.entry-row, .attn-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; font-size:13.5px; }
.entry-subj { font-weight:600; }
@media (max-width:760px){
    .exam-mode-bar { flex-direction:column; align-items:flex-start; }
    .entry-row, .attn-row { flex-direction:column; align-items:flex-start; gap:3px; }
}

/* New score structure: exam 70% column */
.score-table .exam70 { font-family:var(--mono); font-weight:600; color:var(--green-dark); background:var(--gold-soft); }
.exam-mode-bar { line-height:1.5; }

/* Arrears entry on the fees page */
.arrears-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 14px; background:var(--gold-soft); border-radius:10px; margin:12px 0; }
.arrears-bar .muted { font-size:12.5px; display:block; }
.arrears-input { width:92px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; text-align:right; }
.arrears-input:not(:placeholder-shown) { border-color:#d9a441; background:#fffdf5; font-weight:600; }
.arrears-save { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 4px; }
.arrears-save .muted { font-size:12.5px; }
@media (max-width:760px){
    .arrears-bar { flex-direction:column; align-items:stretch; }
    .arrears-input { width:100%; font-size:16px !important; }
}

/* Per-pupil bus fee setting */
.bus-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); }
.bus-form input[type=number] { padding:6px 8px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; text-align:right; }
@media (max-width:760px){
    .bus-form { flex-direction:column; align-items:stretch; }
    .bus-form input[type=number] { width:100% !important; font-size:16px !important; }
}

/* Bus column on the fees page, balances filter */
.bus-cell { white-space:nowrap; }
.bus-input { width:92px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; text-align:right; margin-top:3px; }
.bal-filter select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
@media (max-width:760px){
    .bus-input { width:100% !important; font-size:16px !important; }
    .bal-filter, .bal-filter select { width:100%; }
}

/* Report: end-of-year decision + signatures */
.rc-promotion { margin:14px 0 4px; padding:10px 14px; border:2px solid var(--ink); border-radius:8px; text-align:center; }
.rc-promo-label { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--muted); margin-right:8px; }
.rc-promo-value { font-size:15px; font-weight:800; }
.rc-signatures { display:flex; justify-content:space-between; gap:34px; margin:26px 0 6px; }
.rc-sign { flex:1; text-align:center; }
.rc-sign-name { font-size:13px; font-weight:600; min-height:18px; }
.rc-sign-line { border-bottom:1px solid var(--ink); margin:2px 0 5px; }
.rc-sign-role { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
@media print { .rc-promotion, .rc-signatures { page-break-inside: avoid; } }
@media (max-width:600px){ .rc-signatures { flex-direction:column; gap:20px; } }


/* =========================================================================
   BASE CONTROL STYLES  (v28.8)
   Many form controls across the system carry no class, so they fell back to
   raw browser defaults and looked unfinished. These are ELEMENT selectors, so
   any existing class-based rule still wins — nothing already styled changes.
   ========================================================================= */

/* --- Text-like inputs, selects and textareas --- */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], input[type="url"],
input[type="time"], input[type="month"], select, textarea {
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 11px;
    max-width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

textarea { line-height: 1.5; resize: vertical; min-height: 62px; }

/* A caret on selects, since we removed the native one */
select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235b6879' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 30px;
    cursor: pointer;
}

/* Clear focus state — helps on mobile and for accessibility */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

input:disabled, select:disabled, textarea:disabled {
    background: #f4f6f9;
    color: var(--muted-soft);
    cursor: not-allowed;
}

input::placeholder, textarea::placeholder { color: #9aa7b8; }

/* Date inputs look cramped on some browsers */
input[type="date"], input[type="time"] { min-height: 38px; }

/* --- Buttons without a class still look like buttons --- */
button {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Headings inside cards --- */
h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 16px 0 8px;
}
h4 { font-size: .85rem; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }

fieldset {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 12px 0;
}
legend { font-size: .8rem; font-weight: 700; color: var(--muted); padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; }

/* Plain lists in notices read better with a little room */
.card ul, .alert ul { margin: 8px 0 8px 18px; line-height: 1.65; }
.card ul li, .alert ul li { margin-bottom: 4px; }

/* --- Tables: consistent even where a class was missed --- */
table { border-collapse: collapse; }

/* --- Perceived speed: gentle motion so actions feel responsive --- */
.card { transition: box-shadow .18s ease; }
a { transition: color .12s ease; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #fafbfd; }

/* Links inside tables shouldn't look like plain text */
.score-table a:not(.btn) { color: var(--accent); font-weight: 600; text-decoration: none; }
.score-table a:not(.btn):hover { text-decoration: underline; }

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Mobile: keep the 16px rule so iOS never zooms on focus */
@media (max-width: 760px) {
    input[type="text"], input[type="number"], input[type="date"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"], input[type="time"],
    select, textarea { font-size: 16px; }
}


/* =========================================================================
   MOBILE APP FEEL (v28.9)
   Everything below is inside a phone-width media query, so the desktop
   layout is completely unchanged.
   ========================================================================= */
@media (max-width: 760px) {

    /* ---- 1. No more sideways scrolling on data tables ----
       Each row becomes its own card, and every figure is labelled with the
       column it came from (the labels are added automatically by app.js). */
    .table-wrap { overflow-x: visible; }
    .table-wrap::after { content: none; }          /* drop the "swipe sideways" hint */

    table.score-table { min-width: 0 !important; width: 100%; display: block; }
    table.score-table thead { display: none; }      /* headings move into each cell */
    table.score-table tbody { display: block; }

    table.score-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(20,40,80,.04);
    }
    table.score-table tbody tr:hover { background: #fff; }

    table.score-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: auto !important;
        max-width: none !important;
        border: none;
        border-bottom: 1px dashed var(--line);
        padding: 7px 0;
        text-align: right;
        white-space: normal;
        position: static !important;   /* undo the sticky name column */
        box-shadow: none !important;
    }
    table.score-table tbody td:last-child { border-bottom: none; padding-bottom: 0; }

    /* the column name, taken from the table heading */
    table.score-table tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--muted-soft);
        text-align: left;
        flex: 0 0 42%;
    }
    /* cells with no heading (action buttons) get the full width */
    table.score-table tbody td:not([data-label])::before { content: none; }
    table.score-table tbody td:not([data-label]) { justify-content: flex-end; }

    /* the pupil's name reads as the card's title */
    table.score-table tbody td.col-name {
        font-weight: 700;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
        padding-bottom: 9px;
        margin-bottom: 3px;
        display: block;
        text-align: left;
        background: transparent !important;
    }
    table.score-table tbody td.col-name::before { content: none; }

    table.score-table tfoot { display: block; }
    table.score-table tfoot tr { display: block; border-top: 2px solid var(--ink); padding-top: 8px; }
    table.score-table tfoot td { display: flex; justify-content: space-between; padding: 4px 0; }

    /* forms inside a row should use the full card width */
    table.score-table td form.inline-form { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    table.score-table td input[type="number"],
    table.score-table td input[type="text"],
    table.score-table td select { min-width: 110px; }

    /* Grid-shaped tables (timetable, broadsheet) still scroll — stacking them
       would lose the grid. Keep the swipe hint for those only. */
    .bs-wrap, .tt-wrap { overflow-x: auto; }
    .bs-wrap::after, .tt-wrap::after {
        content: 'swipe sideways for more →';
        display: block; font-size: 11px; color: var(--muted-soft);
        padding: 6px 2px 0; text-align: right;
    }

    /* ---- 2. Stop anything else spilling off the side ---- */
    html, body { overflow-x: hidden; }
    .card, .alert, .page-head { max-width: 100%; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
    img { max-width: 100%; height: auto; }

    /* ---- 3. App-style bottom bar ---- */
    .bottombar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        display: flex;
        background: rgba(255,255,255,.97);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -2px 12px rgba(20,40,80,.06);
        z-index: 900;
        padding-bottom: env(safe-area-inset-bottom);   /* clears the iPhone home bar */
    }
    .bb-item {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 7px 2px;
        background: none; border: 0;
        color: var(--muted);
        font-size: 10.5px; font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .bb-item .ico { width: 21px; height: 21px; }
    .bb-item.active { color: var(--accent); }
    .bb-item.active .ico { transform: translateY(-1px); }
    .bb-item:active { background: var(--gold-soft); }

    /* room so the bar never covers the last row or a save button */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .footer { margin-bottom: 8px; }

    /* the old floating menu button is redundant now the bar has "More" */
    .nav-toggle { display: none; }
    .topstrip { position: sticky; top: 0; z-index: 500; background: rgba(255,255,255,.97);
                backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

    /* ---- Term and Class stay side by side, not stacked ----
       Targeted at .topstrip .selector-form so it beats the desktop rule. */
    .topstrip { flex-wrap: wrap; gap: 8px 10px; padding: 9px 12px; }
    .topstrip .selector-form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .topstrip .selector-form label {
        flex: 1 1 0;
        min-width: 0;              /* lets them shrink instead of overflowing */
        display: flex;
        flex-direction: column;    /* small caption above its own dropdown */
        align-items: stretch;
        gap: 3px;
        margin: 0;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .topstrip .selector-form select,
    .topstrip .selector-form input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 16px;           /* keeps iOS from zooming */
        padding: 8px 9px;
    }
    .topstrip-spacer { display: none; }

    /* ---- 4. Comfortable touch sizes ---- */
    .btn, .btn-small, button { min-height: 42px; }
    .check-chip { min-height: 40px; display: inline-flex; align-items: center; }
    .side-nav a { min-height: 46px; display: flex; align-items: center; }
}

/* Very small phones */
@media (max-width: 380px) {
    .bb-item { font-size: 9.5px; }
    .bb-item .ico { width: 19px; height: 19px; }
    table.score-table tbody td::before { flex-basis: 46%; font-size: 10px; }
}

/* Printing must never show the bar */
@media print { .bottombar { display: none !important; } }

/* Birthday alert + staff details */
.alert-birthday { background:#fdf4e7; border:1px solid #f0d9b5; color:#7a5320; border-radius:10px; padding:12px 15px; margin-bottom:16px; font-size:.92rem; }
.bday-list { margin:7px 0 0 18px; line-height:1.7; }
.bday-list li { margin-bottom:2px; }
.staff-details { margin:10px 0 4px; border:1px solid var(--line); border-radius:10px; padding:10px 13px; background:var(--gold-soft); }
.staff-details summary { cursor:pointer; font-weight:700; font-size:.85rem; color:var(--muted); }
.staff-details-form { margin-top:12px; }
@media (max-width:760px){ .staff-details-form .af-row { grid-template-columns:1fr; } }

/* Bulk fee adjustments */
.bp-cell { white-space:nowrap; }
.bp-kind { font-size:12.5px; padding:6px 8px; min-width:92px; }
.bp-value { width:86px; font-size:12.5px; padding:6px 8px; text-align:right; margin-top:4px; display:block; }
@media (max-width:760px){
    .bp-cell { white-space:normal; }
    .bp-kind, .bp-value { width:100% !important; font-size:16px !important; }
}

/* Make the whole-class panel obvious rather than a faint line */
.bulk-primary { border:2px solid var(--accent); background:#f7faff; }
.bulk-primary > summary { font-size:1rem; color:var(--ink); padding:2px 0; }
.bulk-primary > summary::before { content:''; }
.bulk-primary > summary strong { color:var(--accent); }
.bulk-card > summary:hover { text-decoration:underline; }
@media (max-width:760px){
    .bulk-primary > summary { font-size:.95rem; }
}

/* Fees page: three clear zones */
.fees-main-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.fees-main-head h2 { margin:0; }
.fees-main-head .muted { font-size:12.5px; }
.setup-card { border:1px solid var(--line); background:#fbfcfe; }
.setup-card > summary { cursor:pointer; font-size:.95rem; list-style:none; padding:2px 0; }
.setup-card > summary::-webkit-details-marker { display:none; }
.setup-card > summary::before { content:'▸ '; color:var(--muted); }
.setup-card[open] > summary::before { content:'▾ '; }
.setup-inner { padding-top:6px; }
.setup-inner > .card { border:0; box-shadow:none; padding:14px 0; background:transparent; border-top:1px solid var(--line); border-radius:0; }
.setup-inner > .card:first-child { border-top:0; padding-top:8px; }
.setup-block { padding:14px 0; border-top:1px solid var(--line); }
.setup-block h3 { margin-top:0; }
@media (max-width:760px){
    .fees-main-head { flex-direction:column; gap:4px; }
}

/* ============ Fees page, cleaner layout ============ */
.fee-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }
.fee-tile { border-radius:14px; padding:14px 16px; border:1px solid transparent; }
.ft-blue   { background:#eef4fd; border-color:#d6e4f7; }
.ft-green  { background:#eaf7ef; border-color:#cbe9d6; }
.ft-amber  { background:#fdf4e6; border-color:#f2e0bd; }
.ft-violet { background:#f3f0fd; border-color:#ddd6f5; }
.ft-label { font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.ft-num { font-size:1.18rem; font-weight:800; margin-top:3px; font-family:var(--mono); }
.ft-sub { font-size:11.5px; color:#5d6b86; margin-top:2px; }

.fee-filters { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 12px; }
.fee-filters input[type=search] { flex:1 1 230px; min-width:0; }
.fee-filters select { min-width:150px; }
.fee-filters .muted { font-size:12.5px; margin-left:auto; }

.fees-clean { width:100%; }
.fees-clean th { font-size:11.5px; letter-spacing:.03em; }
.fees-clean .right { text-align:right; }
.fees-clean .fee-num { width:38px; color:var(--muted-soft); font-size:12.5px; text-align:center; }
.fee-who { display:flex; align-items:center; gap:9px; }
.avatar { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center;
          justify-content:center; font-size:11.5px; font-weight:800; flex:0 0 30px; }
.fee-nm { font-weight:600; }

.fee-status { display:inline-block; padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:700; }
.fs-paid   { background:#e5f6ec; color:#17683c; }
.fs-part   { background:#fdf2dc; color:#8a5d10; }
.fs-unpaid { background:#fae8e6; color:#9c2f22; }
.fs-none   { background:#eef1f5; color:#68758a; }

.fee-actions { white-space:nowrap; }
.icon-btn { background:#f3f6fa; border:1px solid var(--line); border-radius:8px; width:32px; height:32px;
            line-height:1; font-size:14px; cursor:pointer; margin-right:4px; padding:0; }
.icon-btn:hover { background:var(--gold-soft); border-color:var(--accent); }
.icon-btn.on { background:var(--accent); border-color:var(--accent); }

.fee-drawer > td { background:#f8fafd; border-top:0; padding:14px 16px !important; }
.drawer-head { font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:9px; }
.drawer-form { margin:0; }
.drawer-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.drawer-row label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--muted); }
.drawer-row .check-chip { flex-direction:row; align-items:center; }

@media (max-width:900px){ .fee-tiles { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
    .fee-tiles { grid-template-columns:1fr 1fr; gap:9px; }
    .fee-tile { padding:11px 12px; }
    .ft-num { font-size:1rem; }
    .fee-filters { flex-direction:column; align-items:stretch; }
    .fee-filters .muted { margin-left:0; }
    .fee-filters select, .fee-filters input[type=search] { width:100%; }
    .drawer-row { flex-direction:column; align-items:stretch; }
    .drawer-row label, .drawer-row .btn { width:100%; }
    .fee-drawer > td { display:block !important; }
    .fee-drawer > td::before { content:none !important; }
}

/* Labelled action buttons (SVG + text) */
.act-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; margin:0 5px 4px 0;
           background:#f3f6fa; border:1px solid var(--line); border-radius:8px;
           font:inherit; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer;
           transition:background .13s ease, border-color .13s ease, color .13s ease; }
.act-btn .ico { width:15px; height:15px; flex:0 0 15px; }
.act-btn:hover { background:var(--gold-soft); border-color:var(--accent); color:var(--accent); }
.act-btn.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.act-btn.on .ico { stroke:#fff; }
.fee-actions { white-space:normal; min-width:230px; }

/* icons sitting inline with button or summary text */
.btn .ico, summary .ico { width:15px; height:15px; vertical-align:-2px; margin-right:2px; }
.alert .ico { width:16px; height:16px; vertical-align:-3px; margin-right:4px; }
summary strong .ico { width:15px; height:15px; vertical-align:-2px; }

@media (max-width:760px){
    .fee-actions { min-width:0; }
    .act-btn { flex:1 1 auto; justify-content:center; margin-right:4px; }
}

/* ============ Design audit fixes (v30) ============ */

/* Stat grids: fixed column counts used to be inline styles that no media query
   could override, so they overflowed on phones. Now they collapse properly. */
.dash-stats.stats-2 { grid-template-columns: repeat(2, 1fr); }
.dash-stats.stats-3 { grid-template-columns: repeat(3, 1fr); }
.dash-stats.stats-4 { grid-template-columns: repeat(4, 1fr); }
.dash-stats.stats-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
    .dash-stats.stats-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .dash-stats.stats-4, .dash-stats.stats-5 { grid-template-columns: repeat(2, 1fr); }
    .dash-stats.stats-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
    .dash-stats.stats-2, .dash-stats.stats-3,
    .dash-stats.stats-4, .dash-stats.stats-5 { grid-template-columns: repeat(2, 1fr); }
    .dash-tile { padding: 11px 12px; }
    .tile-num { font-size: 1.15rem; }
    .tile-label { font-size: 11px; }
}

/* Money must never be truncated. On narrow screens the currency moves into the
   label and the figure itself gets the full width of the tile. */
.dash-tile, .fee-tile { min-width: 0; }
.dash-stats, .fee-tiles { min-width: 0; }
.ft-num, .tile-num { overflow-wrap: anywhere; }
@media (max-width: 620px) {
    .ft-num, .tile-num { font-size: .98rem; letter-spacing: -.02em; line-height: 1.25; }
    .tile-label, .ft-label { font-size: 10.5px; }
    .tile-sub, .ft-sub { font-size: 10.5px; }
}
@media (max-width: 430px) {
    .ft-num, .tile-num { font-size: .9rem; }
}

/* Subject tabs ate six rows on a phone. Scroll them sideways instead. */
@media (max-width: 760px) {
    .subject-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .subject-tabs::-webkit-scrollbar { display: none; }
    .subject-tabs a, .subject-tabs .tab { flex: 0 0 auto; white-space: nowrap; }
}

/* Tap targets: selects and small inputs were under the comfortable minimum */
@media (max-width: 760px) {
    select, input[type="text"], input[type="number"], input[type="date"],
    input[type="search"], input[type="tel"], input[type="email"], input[type="password"] {
        min-height: 42px;
    }
    .side-nav a, .side-logout { min-height: 44px; display: flex; align-items: center; }
    .class-chip { min-height: 38px; display: inline-flex; align-items: center; }
}

/* The dashboard announcement form was stranded in the left half of a wide card */
@media (min-width: 1000px) {
    .home-announce-form { max-width: 640px; }
    .home-announce-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 26px; align-items: start; }
}

/* Settings: long help text was styled as loudly as a heading */
.settings-hint { font-weight: 500; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

/* Whole-school overview is now collapsible so it stops competing with the class tiles */
.fin-overview > summary { cursor:pointer; font-size:.95rem; list-style:none; padding:2px 0; }
.fin-overview > summary::-webkit-details-marker { display:none; }
.fin-overview > summary::before { content:'▸ '; color:var(--muted); }
.fin-overview[open] > summary::before { content:'▾ '; }
.fin-overview > summary .muted { font-size:12.5px; font-weight:400; }
.fin-overview .fin-overview-head { margin-top:10px; }

/* ==========================================================================
   V31 — Unified workspace UI
   One visual system for desktop + mobile. Appended last intentionally so it
   replaces the accumulated v26–v30 presentation rules without changing logic.
   ========================================================================== */
:root {
    --green: #3157d5;
    --green-dark: #2443ad;
    --blue-bright: #5b7cfa;
    --gold: #3157d5;
    --gold-soft: #eef2ff;
    --accent: #3157d5;
    --accent-fill: #f5b942;
    --accent-fill-ink: #5b4306;
    --red: #d84a4a;
    --green-ok: #159b65;
    --green-soft: #eaf8f1;
    --amber: #c97b18;
    --amber-soft: #fff6df;
    --ink: #172033;
    --cream: #f5f7fb;
    --white: #ffffff;
    --line: #e4e8f1;
    --muted: #65708a;
    --muted-soft: #8b95aa;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(16,24,40,.03), 0 8px 24px rgba(23,32,51,.05);
    --serif: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
    --mono: 'Roboto Mono', ui-monospace, monospace;
    --navy: #111a2e;
    --navy-2: #17233e;
    --navy-line: rgba(255,255,255,.08);
}

html { background: var(--cream); }
body.app { background: var(--cream); color: var(--ink); }
.app h1, .app h2, .app h3 { font-family: var(--serif); }
.app h1 { font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.035em; }
.app h2 { font-size: 1.02rem; letter-spacing: -.02em; }
.app a { text-underline-offset: 2px; }

/* ---- App shell ---- */
.shell { min-height: 100vh; align-items: stretch; }
.sidebar {
    width: 252px;
    background: linear-gradient(180deg, var(--navy) 0%, #0e1728 100%);
    color: #fff;
    border-right: 0;
    box-shadow: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.side-brand {
    min-height: 78px;
    padding: 17px 17px 15px;
    border-bottom: 1px solid var(--navy-line);
    background: rgba(255,255,255,.015);
}
.side-logo {
    width: 42px; height: 42px; border-radius: 12px; padding: 3px;
    background: #fff; border: 1px solid rgba(255,255,255,.15);
}
.side-brand .side-school { color: #fff; font-size: .91rem; line-height: 1.25; font-weight: 760; }
.side-ay { color: #93a1bf; opacity: 1; font-size: .69rem; letter-spacing: .02em; }
.side-nav { padding: 12px 10px 20px; gap: 2px; }
.side-group-label {
    color: #8492b3;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 16px 12px 7px;
}
.side-group-label:first-child { padding-top: 4px; }
.side-nav a {
    color: #aeb9d0;
    font-size: 12.8px;
    font-weight: 600;
    padding: 9px 11px;
    border-radius: 10px;
    gap: 11px;
    min-height: 38px;
    position: relative;
}
.side-nav a .ico { color: #7f8da8; width: 16px; height: 16px; }
.side-nav a:hover { color: #fff; background: rgba(255,255,255,.065); }
.side-nav a:hover .ico { color: #cdd6e7; }
.side-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, #3157d5 0%, #476cf0 100%);
    box-shadow: 0 7px 18px rgba(49,87,213,.28);
}
.side-nav a.active .ico { color: #fff; }
.side-foot {
    margin: auto 10px 12px;
    padding: 10px 11px;
    border: 1px solid var(--navy-line);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}
.side-user strong { color: #f8faff; font-size: .78rem; }
.side-user span { color: #8795b2; opacity: 1; font-size: .68rem; }
.side-logout { color: #8f9db8; width: 34px; height: 34px; justify-content: center; border-radius: 9px; font-size: 0; }
.side-logout .ico { margin: 0; width: 16px; height: 16px; }
.side-logout:hover { color: #fff; background: rgba(255,255,255,.08); }

.maincol { min-width: 0; background: var(--cream); }
.topstrip {
    min-height: 72px;
    padding: 12px 28px;
    background: rgba(245,247,251,.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(228,232,241,.9);
    gap: 16px;
}
.topstrip-context { display: flex; flex-direction: column; min-width: 132px; line-height: 1.15; }
.topstrip-context strong { color: var(--ink); font-size: .98rem; font-weight: 780; letter-spacing: -.015em; }
.topstrip-kicker { color: var(--muted-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.topstrip .selector-form { gap: 8px; padding-left: 6px; }
.topstrip .selector-form label {
    color: var(--muted-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; gap: 4px;
}
.topstrip .selector-form select, .topstrip .selector-form input {
    min-height: 37px;
    padding: 7px 31px 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 650;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(16,24,40,.02);
}
.nav-search {
    height: 40px;
    min-width: 220px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.02);
}
.nav-search:focus-within { border-color: #aab8f5; box-shadow: 0 0 0 3px rgba(49,87,213,.09); }
.nav-search input { width: 184px; font-size: 12.5px; }
.top-user { display: flex; align-items: center; gap: 9px; padding-left: 4px; min-width: 0; }
.top-user-avatar {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; background: #e8edff; color: var(--green); font-size: 12px; font-weight: 850;
    border: 1px solid #d9e0ff; flex: 0 0 36px;
}
.top-user-copy { display: flex; flex-direction: column; min-width: 0; max-width: 150px; }
.top-user-copy strong { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.top-user-copy small { font-size: 9.5px; color: var(--muted-soft); margin-top: 2px; }
.nav-toggle { width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 11px; background: #fff; }

.app .page { max-width: 1380px; padding: 25px 30px 48px; }
.app .footer { border-top: 0; color: #9aa3b5; padding: 12px 20px 22px; }

/* ---- Page headings / cards ---- */
.page-head { margin-bottom: 20px; }
.page-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.page-head p.muted { max-width: 780px; margin: 0; font-size: 12.5px; line-height: 1.6; }
.app .pill { background: #edf1ff; color: #3d56a7; border: 1px solid #dce3ff; padding: 4px 9px; font-size: 9.5px; font-weight: 800; }
.app .pill-gold { background: #fff4d6; color: #8a6412; border-color: #f6df9e; }

.app .card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px;
    margin-bottom: 16px;
}
.app .card:hover { box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 12px 30px rgba(23,32,51,.065); }
.card > h2:first-child { margin-bottom: 5px; }
.card > h2:first-child + .muted { margin-top: 0; }

/* Buttons look like product controls, not document buttons */
.app .btn {
    min-height: 38px;
    border-radius: 10px;
    padding: 8px 13px;
    font-size: 12.5px;
    font-weight: 730;
    border: 1px solid var(--line);
    background: #fff;
    color: #39445a;
    box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.app .btn:hover { filter: none; background: #f7f8fb; border-color: #d7dce8; }
.app .btn-primary { color: #fff; border-color: #3157d5; background: #3157d5; box-shadow: 0 4px 12px rgba(49,87,213,.18); }
.app .btn-primary:hover { background: #284bbb; border-color: #284bbb; }
.app .btn-danger { background: #fff; color: #b83b3b; border-color: #f1caca; box-shadow: none; }
.app .btn-danger:hover { background: #fff5f5; }
.app .btn-small { min-height: 32px; padding: 6px 10px; font-size: 11.5px; }

/* Fields */
.app input[type="text"], .app input[type="password"], .app input[type="number"],
.app input[type="file"], .app input[type="search"], .app input[type="date"],
.app input[type="email"], .app input[type="tel"], .app input[type="time"],
.app select, .app textarea {
    border: 1px solid #dfe4ee;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 1px rgba(16,24,40,.015);
}
.app input:focus, .app select:focus, .app textarea:focus {
    outline: 0; border-color: #9cacf0; box-shadow: 0 0 0 3px rgba(49,87,213,.1);
}

/* Alerts */
.alert { border-radius: 12px; font-size: 12.5px; line-height: 1.5; font-weight: 600; padding: 11px 13px; }
.alert-success { color: #146a48; background: #edf9f3; border-color: #ccebdd; }
.alert-error { color: #9c3939; background: #fff1f1; border-color: #f0d0d0; }
.alert-info { color: #3651a6; background: #f0f3ff; border-color: #dce3ff; }

/* ---- Dashboard ---- */
.dash-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(420px,.85fr);
    gap: 24px;
    align-items: center;
    margin: 2px 0 18px;
    padding: 23px 24px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 18%, rgba(103,126,235,.28), transparent 28%),
        linear-gradient(135deg, #16233f 0%, #23396a 100%);
    color: #fff;
    box-shadow: 0 14px 34px rgba(17,26,46,.14);
    overflow: hidden;
}
.dash-hero .dash-date { color: #9fb0d5; font-size: 10.5px; letter-spacing: .02em; }
.dash-hero .dash-greet { color: #fff; font-size: clamp(1.35rem, 2.2vw, 2rem); margin-top: 5px; letter-spacing: -.04em; }
.dash-hero .dash-hello p { margin: 7px 0 0; color: #b9c5dd; font-size: 12.5px; }
.dash-quick { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.quick-action {
    min-width: 0;
    min-height: 78px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
    color: #d8e1f4;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.quick-action:hover { color: #fff; transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); }
.quick-action.primary { background: #fff; color: #172033; border-color: #fff; }
.quick-action.primary:hover { background: #f5f7ff; }
.quick-action .ico { width: 17px; height: 17px; }
.quick-action span { display: flex; flex-direction: column; min-width: 0; }
.quick-action strong { font-size: 11.5px; line-height: 1.2; }
.quick-action small { font-size: 9.5px; color: #91a0bf; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-action.primary small { color: #7c879d; }

.dash-stats { gap: 12px; margin: 0 0 18px; }
.dash-tile {
    min-height: 132px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: #fff;
    position: relative;
    overflow: hidden;
}
.dash-tile::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: #dfe5f2; }
.dash-tile.good::after { background: #39ad7e; }
.dash-tile.warn::after { background: #e6a13a; }
.dash-tile.hero { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.dash-tile.hero::after { background: #536fe7; }
.dash-tile .tile-ico {
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 13px;
    background: #eef2ff; border: 1px solid #e1e6ff;
}
.dash-tile.hero .tile-ico { background: #eef2ff; }
.dash-tile.hero .tile-ico .ico, .dash-tile .tile-ico .ico { color: #4964d4; width: 16px; height: 16px; }
.dash-tile.good .tile-ico { background: #eaf8f1; border-color: #d7f0e3; }
.dash-tile.good .tile-ico .ico { color: #159b65; }
.dash-tile.warn .tile-ico { background: #fff6e6; border-color: #fae9c5; }
.dash-tile.warn .tile-ico .ico { color: #c97b18; }
.dash-tile .tile-label, .dash-tile.hero .tile-label { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .045em; font-weight: 750; }
.dash-tile .tile-num, .dash-tile.hero .tile-num { color: var(--ink); font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.15; margin-top: 3px; }
.dash-tile .tile-sub, .dash-tile.hero .tile-sub { color: #5d6b86; font-size: 10.5px; }

/* ---- Tables ---- */
.table-wrap {
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: none;
    background: #fff;
    overflow-x: auto;
}
.card .table-wrap.card-flush { margin-left: -18px; margin-right: -18px; margin-bottom: -18px; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0 0 16px 16px; }
.score-table { min-width: 760px; }
.score-table th {
    background: #f8f9fc;
    color: #78839a;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
}
.score-table td { padding: 10px; border-bottom: 1px solid #edf0f5; font-size: 12.5px; }
.score-table tbody tr:last-child td { border-bottom: 0; }
.score-table tbody tr:hover { background: #fafbfe; }
.score-table .col-name { font-weight: 650; }
.score-table td.right, .score-table .right { font-variant-numeric: tabular-nums; }

/* ---- Fees workspace ---- */
.fees-main { padding: 18px; }
.fees-main-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fees-main-head h2 { font-size: 1rem; }
.fees-main-head .muted { color: var(--muted-soft); max-width: 680px; }
.fee-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.fee-tile {
    min-height: 105px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.fee-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #8092e8; }
.ft-blue, .ft-green, .ft-amber, .ft-violet { background: #fff; }
.ft-green::before { background: #2ca678; }
.ft-amber::before { background: #df9634; }
.ft-violet::before { background: #8b6ad9; }
.ft-label { color: var(--muted-soft); font-size: 9px; letter-spacing: .07em; }
.ft-num { color: var(--ink); font-size: 1.15rem; line-height: 1.25; margin-top: 7px; }
.ft-sub { color: #5d6b86; font-size: 10px; margin-top: 4px; }

.fee-filters {
    gap: 8px;
    padding: 10px;
    margin: 0 0 12px;
    background: #f8f9fc;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.fee-filters input[type=search], .fee-filters select { background: #fff; min-height: 36px; font-size: 12px; }
.fee-filters input[type=search] { border-radius: 9px; }
.fee-filters .muted { font-size: 10.5px; }

.fees-clean th { font-size: 9.5px; }
.fees-clean .fee-num { width: 36px; }
.avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 10px; border: 1px solid rgba(0,0,0,.035); }
.fee-nm { font-weight: 650; }
.fee-status { padding: 4px 8px; font-size: 9.5px; border-radius: 8px; font-weight: 800; }
.fs-paid { background: #eaf8f1; color: #14704c; }
.fs-part { background: #fff5df; color: #966019; }
.fs-unpaid { background: #fff0f0; color: #aa4040; }
.fs-none { background: #f0f2f6; color: #758096; }
.act-btn {
    min-height: 31px;
    padding: 6px 9px;
    border: 1px solid #e0e4ec;
    border-radius: 9px;
    background: #fff;
    color: #5f6980;
    font-size: 10.5px;
    font-weight: 700;
}
.act-btn:hover { background: #f3f5ff; border-color: #cfd8ff; color: #3855ca; }
.act-btn.on { background: #eef2ff; border-color: #cfd8ff; color: #3855ca; }
.act-btn.on .ico { stroke: currentColor; }
.fee-drawer > td { background: #f8faff; padding: 15px 18px !important; border-top: 1px solid #e8edff; }
.drawer-head { color: #59667f; }
.drawer-row { gap: 10px; }
.drawer-row label { color: #66728a; }
.arrears-save { padding-top: 12px; border-top: 1px solid var(--line); }
.setup-card { background: #fff; border: 1px solid var(--line); }
.setup-card > summary { min-height: 34px; display: flex; align-items: center; gap: 4px; color: #3c475e; }
.setup-card > summary .muted { color: var(--muted-soft); }
.bulk-primary { border: 1px solid #d8e0ff; background: #f7f8ff; }

/* ---- Empty states ---- */
.empty-state { border: 1px dashed #ccd3df; border-radius: 16px; background: #fbfcfe; padding: 42px 22px; }
.empty-state h2 { font-size: 1.05rem; }

/* ---- Bottom navigation: light floating dock on phones ---- */
@media (max-width: 900px) {
    .sidebar { width: min(286px, 84vw); left: min(-286px, -84vw); box-shadow: 16px 0 50px rgba(9,15,27,.18); }
    .sidebar.open { left: 0; }
    body.nav-overlay::after { background: rgba(12,18,31,.48); backdrop-filter: blur(2px); }
    .topstrip { min-height: 64px; padding: 10px 13px; flex-wrap: nowrap; gap: 9px; }
    .topstrip-context { min-width: 0; flex: 1; }
    .topstrip-kicker { display: none; }
    .topstrip-context strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topstrip .selector-form { display: none; }
    .topstrip-spacer { display: none; }
    .nav-search { min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; overflow: hidden; background: #fff; flex: 0 0 40px; }
    .nav-search input { width: 0; padding: 0; opacity: 0; pointer-events: none; }
    .top-user { display: none; }
    .nav-toggle { display: inline-flex; flex: 0 0 40px; }
    .app .page { padding: 16px 13px 92px; }
}

@media (max-width: 760px) {
    .dash-hero { grid-template-columns: 1fr; gap: 17px; padding: 19px 17px; border-radius: 17px; }
    .dash-quick { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .quick-action { min-height: 72px; padding: 10px; }
    .quick-action small { display: none; }
    .dash-stats, .dash-stats.stats-2, .dash-stats.stats-3, .dash-stats.stats-4, .dash-stats.stats-5 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px; }
    .dash-tile { min-height: 116px; padding: 13px; }
    .dash-tile .tile-ico { width: 30px; height: 30px; margin-bottom: 10px; }
    .dash-tile .tile-num, .dash-tile.hero .tile-num { font-size: 1.2rem; }

    .app .card { padding: 14px; border-radius: 14px; margin-bottom: 12px; }
    .card .table-wrap.card-flush { margin-left: -14px; margin-right: -14px; margin-bottom: -14px; border-radius: 0 0 14px 14px; }

    /* Generic tables retain the existing card transformation, but with cleaner spacing. */
    .table-wrap { border: 0; background: transparent; overflow-x: visible; }
    .table-wrap::after { content: none !important; }
    table.score-table { min-width: 0 !important; }
    table.score-table tbody tr {
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 11px 12px;
        margin-bottom: 9px;
        box-shadow: 0 2px 10px rgba(17,26,46,.035);
    }
    table.score-table tbody td { padding: 7px 0; font-size: 12.5px; }
    table.score-table tbody td::before { font-size: 9px; color: #949db0; }
    table.score-table tbody td.col-name { font-size: .95rem; padding-bottom: 10px; }

    /* Fees list becomes a compact financial card. */
    .fee-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .fee-tile { min-height: 92px; padding: 12px; }
    .ft-num { font-size: .95rem; overflow-wrap: normal; word-break: normal; }
    .fee-filters { padding: 9px; }
    .fee-actions { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; width: 100% !important; }
    .fee-actions::before { display: none !important; }
    .act-btn { margin: 0; min-height: 38px; justify-content: center; padding: 7px 5px; }
    .act-btn .ico { display: none; }
    .fee-drawer > td { border: 0; background: transparent; padding: 7px 0 0 !important; }
    .fee-drawer > td > * { background: #f8faff; border: 1px solid #e4e9f6; border-radius: 11px; padding: 12px; }
    .drawer-row { flex-direction: column; align-items: stretch; }
    .drawer-row label, .drawer-row .btn { width: 100%; }
    .arrears-save { align-items: stretch; }
    .arrears-save .btn { flex: 1; }
    .setup-card > summary { align-items: flex-start; }

    /* iOS-safe font size is retained from prior audit rules. */
    input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 430px) {
    .dash-quick { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
    .quick-action { min-height: 66px; padding: 9px; }
    .quick-action strong { font-size: 10.5px; }
    .fee-tiles { grid-template-columns: 1fr 1fr; }
    .fee-tile { min-height: 88px; }
    .ft-num { font-size: .88rem; }
}

@media print {
    .dash-hero, .top-user { display: none !important; }
    .app .card { box-shadow: none; }
}

/* V31 mobile navigation correction: class/term selectors remain accessible. */
@media (max-width: 900px) {
    .topstrip { flex-wrap: wrap; }
    .topstrip .selector-form {
        order: 10;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 7px;
        padding-left: 0;
    }
    .topstrip .selector-form label { flex: 1 1 0; min-width: 0; align-items: stretch; }
    .topstrip .selector-form select, .topstrip .selector-form input { width: 100%; min-width: 0; }
}
@media (max-width: 760px) {
    .nav-toggle { display: none !important; }
    .topstrip { padding: 9px 12px; }
    .topstrip .selector-form label { font-size: 9px; }
}
.collection-progress { margin: -2px 0 14px; padding: 2px 1px 0; }
.collection-progress-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; color:var(--muted); font-size:10.5px; font-weight:700; }
.collection-progress-head strong { color:var(--ink); font-family:var(--mono); font-size:10.5px; }
.collection-progress-track { height:7px; border-radius:999px; background:#edf0f5; overflow:hidden; }
.collection-progress-track span { display:block; height:100%; max-width:100%; border-radius:inherit; background:linear-gradient(90deg,#3157d5,#6f86ee); }


/* ============================================================================
   v31.1 — light sidebar restored, birthday panel, announcements layout
   ============================================================================ */

/* ---- Sidebar back to the white theme (the grouping stays) ---- */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--line);
    box-shadow: none;
}
.side-brand {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.side-logo { background: #fff; border: 1px solid var(--line); }
.side-brand .side-school { color: var(--ink); }
.side-ay { color: var(--muted); }

.side-group-label {
    color: #667690;              /* 4.9:1 on white — readable without shouting */
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 16px 12px 7px;
}
.side-nav a { color: #46526a; font-weight: 600; }
.side-nav a .ico { color: #8d99ad; }
.side-nav a:hover { color: var(--ink); background: #f1f5fb; }
.side-nav a:hover .ico { color: var(--accent); }
.side-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, #3157d5 0%, #476cf0 100%);
    box-shadow: 0 6px 16px rgba(49,87,213,.22);
}
.side-nav a.active .ico { color: #fff; }
.side-foot, .side-logout { color: var(--muted); }
.side-logout:hover { background: #f1f5fb; color: var(--ink); }

/* ---- Birthdays: a proper panel instead of a flat notice ---- */
.bday-panel {
    background: linear-gradient(135deg, #fff8ef 0%, #fdf3ff 100%);
    border: 1px solid #f2e2d0;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.bday-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.bday-panel-head h2 { margin: 0; font-size: 1rem; color: #7a4f1d; }
.bday-panel-head .muted { margin: 1px 0 0; font-size: 12px; color: #8a6438; }
.bday-icon {
    width: 38px; height: 38px; border-radius: 12px; flex: 0 0 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #f0ddc6;
}
.bday-icon .ico { width: 19px; height: 19px; color: #d99a3c; }
.bday-count {
    margin-left: auto; background: #fff; border: 1px solid #f0ddc6; color: #8a5f24;
    font-weight: 800; font-size: 12.5px; border-radius: 20px; padding: 3px 12px;
}
.bday-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 9px; }
.bday-card {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #f3e6d6; border-radius: 12px; padding: 9px 11px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.bday-card:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(160,120,60,.10); }
.bday-card.is-today { border-color: #f0c98a; background: #fffbf3; }
.bday-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ffd9a8, #ffb9c6);
    color: #7a4218; font-weight: 800; font-size: 12px;
}
.bday-info { min-width: 0; flex: 1; }
.bday-name { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bday-class { font-size: 11px; color: #8a6438; }
.bday-when { text-align: right; flex: 0 0 auto; }
.bday-age { display: block; font-size: 11px; color: #8a6438; }
.bday-day { display: block; font-size: 11.5px; font-weight: 700; color: #8a5f24; }
.bday-day.today { color: #b9741b; }
.bday-more { margin: 9px 0 0; font-size: 12px; }

/* ---- Announcements on the dashboard: form beside the list, rows read properly ---- */
.ann-layout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.ann-list-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ann-layout .ann-item { align-items: flex-start; }
.ann-layout .ann-body { min-width: 0; flex: 1; }
.ann-layout .ann-head { margin-bottom: 3px; }
.ann-layout .ann-meta { font-size: 11.5px; color: var(--muted-soft); }
.ann-layout .ann-text { font-size: 13px; color: var(--muted); }
.ann-empty {
    display: flex; flex-direction: column; gap: 3px;
    border: 1px dashed var(--line); border-radius: 12px; padding: 20px 18px; text-align: center;
}
.ann-empty strong { font-size: 13.5px; }
.ann-empty .muted { font-size: 12px; }
@media (max-width: 980px) {
    .ann-layout { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 620px) {
    .bday-cards { grid-template-columns: 1fr; }
    .bday-panel-head h2 { font-size: .95rem; }
}


/* ============================================================================
   v31.2 — use the width. Forms were capped at 460px inside 1040px cards,
   which left most of every settings and staff page empty.
   ============================================================================ */

/* Forms flow across the card instead of stacking in a narrow column */
.settings-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 13px 18px;
    max-width: none;
    align-items: start;
}
.settings-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* things that need the full row */
.settings-form textarea,
.settings-form label:has(textarea),
.settings-form .full-row,
.settings-form .btn,
.settings-form > p,
.settings-form > .muted,
.settings-form > fieldset,
.settings-form > .check-chip { grid-column: 1 / -1; }
.settings-form .btn { justify-self: start; }
.settings-form input, .settings-form select, .settings-form textarea { width: 100%; }

/* Settings page: cards sit side by side rather than one tall column */
@media (min-width: 1080px) {
    .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
    .settings-grid > .card { margin: 0; }
    .settings-grid > .card.span-2 { grid-column: 1 / -1; }
}

/* Cards were carrying more padding than their content needed */
.card { padding: 17px 19px; }
.card > h2 { margin-top: 0; }

/* Help text under a field should read as help, not as a warning */
.settings-form label .hint,
.settings-form .field-hint {
    font-weight: 500; font-size: 12px; color: var(--muted); line-height: 1.5;
}

/* The class checkbox grid was one column of chips; let it fill the row */
.class-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; }


/* v31.2 fixes — grids inside the narrower two-column cards must not overflow */
.rename-grid {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.rename-grid label, .rename-grid input { min-width: 0; }
.settings-grid .card { overflow: hidden; }
.settings-grid input, .settings-grid select, .settings-grid textarea { max-width: 100%; }

/* Long help text belongs under its field, at help-text weight, spanning the row */
.settings-form label > small,
.settings-form label > .muted { font-weight: 500; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* Cards that hold a wide grid get the full width rather than half */
.settings-grid > .card.wide { grid-column: 1 / -1; }


/* At laptop widths the two settings columns get narrow; fields must still fit */
@media (min-width: 1080px) and (max-width: 1320px) {
    .settings-form { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .rename-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
}
.settings-grid .card, .settings-grid .card * { min-width: 0; }
.settings-form label, .rename-grid label { overflow: hidden; }


/* ============================================================================
   v31.3 — fee summary tiles rebuilt.
   The figures were set in a monospace face (reads as code, not money), the
   colour was a stray sliver on one edge, and each tile was mostly empty.
   ============================================================================ */
.fee-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 0 0 18px; }

.fee-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px 16px 14px;
    box-shadow: 0 1px 2px rgba(20, 40, 80, .04);
    transition: box-shadow .16s ease, border-color .16s ease;
    min-width: 0;
}
.fee-tile:hover { box-shadow: 0 6px 18px rgba(20, 40, 80, .07); border-color: #d9e2ef; }

.ft-top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.ft-chip {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ft-chip .ico { width: 15px; height: 15px; }
.ft-chip-blue   { background: #e8f0fe; color: #2c5bd8; }
.ft-chip-green  { background: #e4f6ec; color: #17784a; }
.ft-chip-amber  { background: #fdf1de; color: #a9691a; }
.ft-chip-violet { background: #efeafc; color: #5b45b8; }

.ft-label {
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #6b7891; line-height: 1.3;
}

/* the figure: UI face, tabular figures so columns line up, currency de-emphasised */
.ft-num {
    font-family: inherit;
    font-size: 1.46rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}
.ft-cur { font-size: .74em; font-weight: 600; color: #8a95a8; letter-spacing: 0; }
.ft-num.is-owing { color: #b5342a; }
.ft-num.ft-plain { font-size: 1.24rem; }

.ft-sub { font-size: 11.5px; color: #6b7891; margin-top: 5px; line-height: 1.4; }

/* a slim meter under the collected figure */
.ft-meter { height: 5px; border-radius: 20px; background: #eef1f6; margin-top: 9px; overflow: hidden; }
.ft-meter span { display: block; height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, #1f9254, #35b877); }

.fee-tile.ft-alert { border-color: #f3ddc2; background: #fffdf8; }

@media (max-width: 1100px) { .fee-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .fee-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fee-tile { padding: 12px 13px; }
    .ft-num { font-size: 1.12rem; }
    .ft-num.ft-plain { font-size: 1rem; }
    .ft-chip { width: 26px; height: 26px; flex-basis: 26px; }
    .ft-label { font-size: 10px; }
}


/* Clear the leftover coloured sliver and stale sizing from earlier tile versions */
.fee-tile::before { content: none !important; }
.fee-tile { position: static; min-height: 0; }


/* Dashboard tiles share the same typographic treatment as the fee tiles */
.tile-num { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-weight: 700; }
.tile-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7891; }
.tile-sub { font-size: 11.5px; color: #6b7891; }


/* School holidays / non-school days */
.noschool-card { border: 1px solid #dfe7f4; background: linear-gradient(135deg, #f6f9ff 0%, #f4f7fd 100%); }
.noschool-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.noschool-inner h2 { margin: 0 0 2px; font-size: 1rem; }
.noschool-inner .muted { margin: 0; font-size: 12.5px; }
.noschool-inner > a { margin-left: auto; }
.noschool-icon {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #dfe7f4; color: #3f63cf;
}
.noschool-icon .ico { width: 19px; height: 19px; }
.hol-form { margin-bottom: 4px; }
@media (max-width: 620px) {
    .noschool-inner { flex-direction: column; align-items: flex-start; }
    .noschool-inner > a { margin-left: 0; width: 100%; text-align: center; }
}


/* Settings: a jump bar, because two columns are harder to scan than one list */
.settings-jump {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    position: sticky; top: 0; z-index: 30;
}
.sj-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7891; margin-right: 3px; }
.settings-jump a {
    font-size: 12.5px; font-weight: 600; color: #46526a; text-decoration: none;
    padding: 5px 11px; border-radius: 20px; background: #f3f6fa; border: 1px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.settings-jump a:hover { background: #e8f0fe; color: #2c5bd8; border-color: #cfe0fb; }

/* jumping to a card shouldn't hide it under the sticky bar */
.settings-grid > .card[id], .card[id^="set-"] { scroll-margin-top: 78px; }
/* and briefly mark the one you jumped to */
.card[id^="set-"]:target { border-color: #2c5bd8; box-shadow: 0 0 0 3px rgba(44,91,216,.12); }

@media (max-width: 760px) {
    .settings-jump { position: static; gap: 6px; padding: 10px 11px; }
    .settings-jump a { font-size: 12px; padding: 6px 10px; }
}
@media print { .settings-jump { display: none; } }


/* Returning to where you were after a save */
.just-saved {
    animation: justSaved 1.6s ease;
}
@keyframes justSaved {
    0%   { box-shadow: 0 0 0 3px rgba(44,91,216,.22); }
    70%  { box-shadow: 0 0 0 3px rgba(44,91,216,.16); }
    100% { box-shadow: 0 0 0 0 rgba(44,91,216,0); }
}

/* A small floating note, so the outcome is seen even far down the page */
.save-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 16px);
    z-index: 2000;
    max-width: min(520px, 92vw);
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: #17683c;
    box-shadow: 0 10px 30px rgba(12,30,20,.24);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.save-toast.is-error { background: #9c2f22; box-shadow: 0 10px 30px rgba(50,12,8,.24); }
.save-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
    .save-toast { bottom: calc(70px + env(safe-area-inset-bottom)); font-size: 13px; padding: 10px 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .just-saved { animation: none; }
    .save-toast { transition: none; }
}
@media print { .save-toast { display: none; } }


/* ============================================================================
   The payment window
   ============================================================================ */
.pay-drawer > td { background: #f7f9fd; padding: 0 !important; }
.paybox { max-width: 720px; margin: 0 auto; padding: 18px 20px 16px; }
.paybox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.paybox-head h3 { margin: 0 0 2px; font-size: 1.02rem; }
.paybox-head .muted { margin: 0; font-size: 12.5px; }
.paybox-close { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--muted-soft); cursor: pointer; padding: 0 4px; }
.paybox-close:hover { color: var(--ink); }

.pay-step { margin-bottom: 15px; }
.pay-step-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #6b7891; margin-bottom: 8px; }
.req { color: #b5342a; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* how they are paying */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; }
.pay-method { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; cursor: pointer;
    background: #fff; border: 1px solid var(--line); border-radius: 11px; transition: border-color .12s ease, background .12s ease; }
.pay-method:hover { border-color: #c7d6ef; }
.pay-method input { margin-top: 2px; flex: 0 0 auto; }
.pay-method:has(input:checked) { border-color: var(--accent); background: #f2f6ff; box-shadow: 0 0 0 2px rgba(44,91,216,.10); }
.pm-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-name { font-weight: 700; font-size: 13px; }
.pm-note { font-size: 11px; color: var(--muted); line-height: 1.35; }

.pay-momo { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; margin-bottom: 15px; }
.pay-hint { font-size: 12px; margin: 8px 0 0; }

/* what it is for */
.pay-items { display: flex; flex-direction: column; gap: 7px; }
.pay-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.pi-name { font-weight: 600; font-size: 13.5px; min-width: 0; }
.pi-owing { display: block; font-size: 11.5px; font-weight: 500; color: #a9691a; }
.pi-input { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pi-input .alloc-input { width: 108px; text-align: right; }

/* the total */
.pay-total-row { padding-top: 4px; border-top: 1px dashed var(--line); }
.pay-total-box { display: flex; align-items: center; gap: 8px; }
.pt-cur { font-size: 13px; font-weight: 700; color: var(--muted); }
.pay-total-box .pay-amount { width: 160px; font-size: 1.1rem; font-weight: 700; text-align: right;
    font-variant-numeric: tabular-nums; }
.pay-warn { margin: 7px 0 0; font-size: 12px; font-weight: 600; color: #b5342a; }

.paybox-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 13px; border-top: 1px solid var(--line); }
.paybox-foot .pay-date { margin-right: auto; }
.paybox-foot .pay-date label { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.paybox-foot .pay-date input { width: 150px; }

/* prompts awaiting approval */
.pending-card { border-color: #f0d9b5; background: #fffdf7; }
.pending-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pending-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid #f2e3cd; border-radius: 11px; padding: 10px 13px; }
.pending-row .muted { display: block; font-size: 11.5px; }

.receipt-method { width: 100%; margin: 10px 0 4px; border-collapse: collapse; }
.receipt-method td { padding: 5px 9px; font-size: 13px; border-bottom: 1px dotted var(--line); }
.receipt-method .right { text-align: right; }
.receipt-method code { font-size: 12px; background: #f2f5fa; padding: 2px 6px; border-radius: 5px; }

@media (max-width: 760px) {
    .paybox { padding: 15px 14px; }
    .pay-methods { grid-template-columns: 1fr; }
    .pay-item { flex-direction: column; align-items: stretch; gap: 8px; }
    .pi-input .alloc-input { width: 100%; }
    .pay-total-box .pay-amount { width: 100%; }
    .paybox-foot { flex-direction: column; align-items: stretch; }
    .paybox-foot .pay-date { margin-right: 0; }
    .paybox-foot .btn { width: 100%; }
    .pending-row { flex-direction: column; align-items: stretch; gap: 8px; }
}


/* ============================================================================
   The payment window as a real floating dialog
   ============================================================================ */
.pay-modals { display: contents; }

.pay-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.pay-modal[hidden] { display: none; }

.pay-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 22, 40, .46);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: payFade .16s ease;
}
.pay-modal-card {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(10, 20, 40, .30);
    animation: payRise .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes payFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes payRise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }

.pay-modal .paybox { max-width: none; margin: 0; padding: 20px 22px 18px; }
.pay-modal .paybox-head { position: sticky; top: 0; background: #fff; padding-bottom: 12px; margin: -20px -22px 14px;
    padding: 18px 22px 12px; border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; z-index: 2; }
.pay-modal .paybox-foot { position: sticky; bottom: 0; background: #fff; margin: 0 -22px -18px;
    padding: 13px 22px 16px; border-radius: 0 0 18px 18px; }

/* stop the page behind from scrolling while a window is open */
body.pay-open { overflow: hidden; }

/* mobile money: just the number, with the network worked out */
.momo-phone-field { position: relative; }
/* (network auto-detection was removed — the network is chosen explicitly) */
.momo-detected {
    display: inline-block; margin-top: 5px; font-size: 11.5px; font-weight: 700;
    color: #17683c; background: #e4f6ec; border-radius: 20px; padding: 2px 10px;
}
.momo-detected.is-unknown { color: #9c2f22; background: #fae8e6; }
.momo-override { margin-top: 10px; }
.momo-override > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.momo-override label { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }

@media (max-width: 760px) {
    .pay-modal { padding: 0; align-items: flex-end; }
    .pay-modal-card { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
    .pay-modal .paybox-head { border-radius: 18px 18px 0 0; }
    .pay-modal .paybox-foot { border-radius: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    @keyframes payRise { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: none } }
}
@media (prefers-reduced-motion: reduce) {
    .pay-modal-backdrop, .pay-modal-card { animation: none; }
}


/* Mobile money voucher codes */
.otp-instruction {
    margin-top: 6px; padding: 8px 11px; border-radius: 9px;
    background: #fff6e8; border: 1px solid #f0d9b5; color: #7a5320;
    font-size: 12px; line-height: 1.45;
}
.otp-instruction strong { display: block; margin-bottom: 1px; }
.otp-instruction-soft { font-size: 11.5px; margin-top: 4px; }
.otp-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.otp-form input[name=otp] {
    width: 140px; font-variant-numeric: tabular-nums; letter-spacing: .04em;
    font-weight: 700; text-align: center;
}
@media (max-width: 760px) {
    .otp-form { width: 100%; }
    .otp-form input[name=otp] { width: 100%; }
    .otp-form .btn { width: 100%; }
}


/* Arrears typed straight into the table, saving on their own */
.arr-col { width: 108px; }
.arr-cell {
    width: 96px; text-align: right; padding: 6px 8px; font-size: 13px;
    border: 1px solid var(--line); border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, background .3s ease, box-shadow .15s ease;
}
.arr-cell:not(:placeholder-shown) { border-color: #dfae5c; background: #fffdf6; font-weight: 600; }
.arr-cell.arr-saving { border-color: var(--accent); }
.arr-cell.arr-ok { border-color: #35b877; background: #eefaf2; }
.arr-cell.arr-err { border-color: #c0392b; background: #fdeeec; }
.arrears-save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 2px; }
.arrears-save .muted { font-size: 12.5px; }
@media (max-width: 760px) {
    .arr-col { width: auto; }
    .arr-cell { width: 100%; font-size: 16px; }
}


/* A prompt that has gone stale */
.stale-note {
    margin-top: 6px; padding: 8px 11px; border-radius: 9px;
    background: #fdeeec; border: 1px solid #f2ccc6; color: #8a2c20;
    font-size: 12px; line-height: 1.45;
}
.pending-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 760px) {
    .pending-actions { width: 100%; }
    .pending-actions form, .pending-actions .btn { flex: 1 1 auto; }
}


/* Choosing the mobile money network */
.momo-net-pick { margin-top: 12px; }
.momo-net-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.momo-nets { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; }
.momo-net {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
    font-size: 13px; font-weight: 600; transition: border-color .12s ease, background .12s ease;
}
.momo-net:hover { border-color: #c7d6ef; }
.momo-net:has(input:checked) { border-color: var(--accent); background: #f2f6ff; box-shadow: 0 0 0 2px rgba(44,91,216,.10); }
.momo-net input { flex: 0 0 auto; }
@media (max-width: 760px) { .momo-nets { grid-template-columns: 1fr; } }


/* ============================================================================
   The payment window — visual design
   ============================================================================ */
.pay-modal-card { width: min(560px, 100%); border-radius: 20px; }
.pay-modal .paybox { padding: 0; }

/* --- header --- */
.pay-modal .paybox-head {
    display: flex; align-items: center; gap: 12px;
    margin: 0; padding: 17px 20px;
    background: linear-gradient(135deg, #f7f9fe 0%, #f3f6fc 100%);
    border-bottom: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
}
.pay-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
}
.pay-who-block { min-width: 0; flex: 1; }
.pay-who-name { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-who-sub { font-size: 11.5px; color: #6b7891; margin-top: 1px; }
.pay-owed { text-align: right; flex: 0 0 auto; margin-right: 4px; }
.pay-owed-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #8c97ab; }
.pay-owed-num { display: block; font-size: 1.02rem; font-weight: 800; color: #b5342a;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.paybox-close { align-self: flex-start; margin-top: -4px; }

/* --- body --- */
.pay-modal .pay-step { padding: 0 20px; margin-bottom: 16px; }
.pay-modal .pay-step:first-of-type { padding-top: 17px; }
.pay-step-label { font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #8c97ab; margin-bottom: 9px; }

/* methods: even 2x2 cards with icons */
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-method {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; cursor: pointer; min-height: 60px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 13px;
    transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pm-icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5fb; color: #5b6b87; transition: background .13s ease, color .13s ease;
}
.pm-icon .ico { width: 17px; height: 17px; }
.pm-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-name { font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.2; }
.pm-note { font-size: 10.5px; color: #8c97ab; line-height: 1.3; }
.pm-tick {
    position: absolute; top: 8px; right: 9px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--accent); color: #fff; display: none; align-items: center; justify-content: center;
}
.pm-tick .ico { width: 11px; height: 11px; stroke-width: 3; }
.pay-method:hover { border-color: #c2d3ef; background: #fcfdff; }
.pay-method:has(input:checked) {
    border-color: var(--accent); background: #f4f8ff;
    box-shadow: 0 3px 12px rgba(44,91,216,.12);
}
.pay-method:has(input:checked) .pm-icon { background: var(--accent); color: #fff; }
.pay-method:has(input:checked) .pm-tick { display: inline-flex; }

/* mobile money panel */
.pay-momo { margin: 0 20px 16px; background: #f8fafd; border: 1px solid var(--line);
    border-radius: 13px; padding: 13px 14px; }
.pay-momo > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
    font-weight: 600; color: var(--muted); }

/* what it is for */
.pay-items { display: flex; flex-direction: column; gap: 7px; }
.pay-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 11px 13px;
    transition: border-color .13s ease;
}
.pay-item:hover { border-color: #c2d3ef; }
.pi-name { min-width: 0; flex: 1; }
.pi-title { display: block; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pi-owing { display: block; font-size: 11.5px; font-weight: 600; color: #a9691a; margin-top: 1px; }
.pi-bar { display: block; height: 4px; border-radius: 20px; background: #eef1f6; margin: 6px 0 3px; max-width: 190px; overflow: hidden; }
.pi-bar span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg,#1f9254,#35b877); }
.pi-paid { font-size: 10.5px; color: #8c97ab; }
.pi-input { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pi-input .alloc-input { width: 104px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pi-all { padding: 7px 10px; font-size: 11.5px; }

/* the total */
.pay-total-row { margin: 0 20px 4px; padding: 14px 15px;
    background: linear-gradient(135deg,#f3f7ff 0%,#eef4fd 100%);
    border: 1px solid #dbe6f8; border-radius: 14px; }
.pay-total-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pay-total-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7891; }
.pay-after { font-size: 11.5px; color: #6b7891; margin-top: 2px; }
.pay-total-box { display: flex; align-items: center; gap: 7px; }
.pt-cur { font-size: 13px; font-weight: 700; color: #6b7891; }
.pay-total-box .pay-amount {
    width: 150px; font-size: 1.28rem; font-weight: 800; text-align: right;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    padding: 8px 11px; border: 1.5px solid #cfdcf3; border-radius: 11px; background: #fff;
}
.pay-total-box .pay-amount[readonly] { background: #fbfcfe; }
.pay-warn { margin: 9px 0 0; font-size: 12px; font-weight: 600; color: #b5342a; }

/* footer */
.pay-modal .paybox-foot {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 16px 0 0; padding: 14px 20px 17px;
    background: #fbfcfe; border-top: 1px solid var(--line); border-radius: 0 0 20px 20px;
}
.paybox-foot .pay-date label { font-size: 11.5px; color: #6b7891; gap: 6px; }
.paybox-foot .pay-date input { width: 145px; padding: 7px 9px; font-size: 12.5px; }
.pay-submit { min-width: 152px; }

@media (max-width: 760px) {
    .pay-modal-card { border-radius: 20px 20px 0 0; }
    .pay-modal .paybox-head { border-radius: 20px 20px 0 0; padding: 15px 16px; }
    .pay-modal .pay-step, .pay-momo, .pay-total-row { padding-left: 16px; padding-right: 16px; }
    .pay-momo, .pay-total-row { margin-left: 16px; margin-right: 16px; padding-left: 13px; padding-right: 13px; }
    .pay-methods { grid-template-columns: 1fr 1fr; gap: 7px; }
    .pay-method { min-height: 56px; padding: 9px 10px; }
    .pm-icon { width: 30px; height: 30px; flex-basis: 30px; }
    .pay-owed-num { font-size: .92rem; }
    .pay-item { flex-direction: column; align-items: stretch; gap: 9px; }
    .pi-input .alloc-input { width: 100%; }
    .pi-bar { max-width: none; }
    .pay-total-inner { flex-direction: column; align-items: stretch; gap: 9px; }
    .pay-total-box .pay-amount { width: 100%; }
    .pay-modal .paybox-foot { border-radius: 0; padding-bottom: calc(17px + env(safe-area-inset-bottom)); }
    .pay-submit, .paybox-foot .btn { flex: 1 1 auto; }
}

.pay-after.is-clear { color: #17784a; font-weight: 700; }


/* A styled element with display set will ignore the hidden attribute unless we
   say otherwise. This is what made the Transaction ID box appear when it should
   not have. Applies everywhere, not just here. */
[hidden] { display: none !important; }


/* Smaller windows for the breakdown and bus */
.pay-modal-sm { width: min(440px, 100%); }
.modal-body { padding: 17px 20px; }
.modal-body .fee-progress { display: flex; flex-direction: column; gap: 11px; }
.modal-body .fee-prog-label { display: flex; justify-content: space-between; gap: 10px;
    font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.modal-body .fee-prog-label .muted { font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.modal-body .drawer-head { display: none; }

/* bus window */
.bus-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    padding: 12px 13px; background: #f8fafd; border: 1px solid var(--line); border-radius: 12px; }
.bus-toggle input { margin-top: 3px; flex: 0 0 auto; }
.bus-toggle strong { display: block; font-size: 13.5px; }
.bus-toggle small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.bus-rate { display: flex; flex-direction: column; gap: 5px; margin-top: 14px;
    font-size: 12px; font-weight: 600; color: var(--muted); }
.bus-rate-box { display: flex; align-items: center; gap: 7px; }
.bus-rate-box .bus-input { flex: 1; text-align: right; font-weight: 700;
    font-variant-numeric: tabular-nums; }
.bus-rate small { font-weight: 500; font-size: 11.5px; }
.pay-modal-sm .paybox-foot { justify-content: flex-end; }
@media (max-width: 760px) {
    .pay-modal-sm { width: 100%; }
    .modal-body { padding: 15px 16px; }
}


/* Bus typed straight into the table, beside arrears */
.bus-cell {
    width: 96px; text-align: right; padding: 6px 8px; font-size: 13px;
    border: 1px solid var(--line); border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, background .3s ease;
}
.bus-cell:not(:placeholder-shown) { border-color: #7aa6e8; background: #f6faff; font-weight: 600; }
.bus-cell.bus-exempt { border-color: #d8b0aa; background: #fdf4f3; color: #9c2f22; }
.bus-cell.arr-saving { border-color: var(--accent); }
.bus-cell.arr-ok { border-color: #35b877; background: #eefaf2; }
.bus-cell.arr-err { border-color: #c0392b; background: #fdeeec; }
@media (max-width: 760px) { .bus-cell { width: 100%; font-size: 16px; } }

.arr-col { width: 104px; }
.bus-cell::placeholder { font-size: 11.5px; }


/* Per-pupil fee window */
.feewin-note { font-size: 12px; margin: 0 0 13px; }
.feewin-item { padding: 11px 0; border-top: 1px solid var(--line); }
.feewin-item:first-of-type { border-top: 0; padding-top: 0; }
.feewin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.feewin-head strong { font-size: 13.5px; }
.feewin-head .muted { font-size: 11.5px; white-space: nowrap; }
.feewin-controls { display: flex; gap: 8px; }
.feewin-controls .pref-kind { flex: 1; min-width: 0; }
.feewin-controls .pref-value { width: 110px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* note explaining spread payments in the breakdown */
.spread-note {
    margin-top: 10px; padding: 9px 11px; border-radius: 9px;
    background: #eef4fd; border: 1px solid #d6e4f7; color: #33507f;
    font-size: 11.5px; line-height: 1.45;
}
@media (max-width: 760px) {
    .feewin-controls { flex-direction: column; }
    .feewin-controls .pref-value { width: 100%; }
}


/* ============================================================================
   Recent payments
   ============================================================================ */
.rp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.rp-row {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 13px;
    transition: border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.rp-row:hover { border-color: #c9d8f0; box-shadow: 0 3px 12px rgba(20,40,80,.06); }

.rp-avatar {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px;
}
.rp-main { flex: 1; min-width: 0; }
.rp-name { font-weight: 700; font-size: 13.5px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; color: #8c97ab; margin-top: 2px; }
.rp-receipt { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; color: #6b7891; }
.rp-dot { opacity: .5; }
.rp-ref { font-family: var(--mono, ui-monospace, monospace); max-width: 190px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rp-method {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 5px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
}
.rp-method .ico { width: 13px; height: 13px; }
.mt-cash { background: #e5f6ec; color: #17683c; }
.mt-momo { background: #fdf2dc; color: #8a5d10; }
.mt-bank { background: #eef1f9; color: #4a5875; }
.rp-online { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; background: rgba(0,0,0,.08); padding: 1px 6px; border-radius: 20px; margin-left: 2px; }

.rp-amount {
    flex: 0 0 auto; min-width: 128px; text-align: right;
    font-size: 15px; font-weight: 800; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

.rp-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; border-radius: 9px; cursor: pointer;
    background: #f3f6fa; border: 1px solid var(--line);
    font: inherit; font-size: 12px; font-weight: 600; color: #46526a; text-decoration: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.rp-btn .ico { width: 14px; height: 14px; }
.rp-btn:hover { background: #e8f0fe; border-color: #c2d6f7; color: var(--accent); }
.rp-btn-danger { padding: 7px 9px; }
.rp-btn-danger:hover { background: #fae8e6; border-color: #eec4bf; color: #9c2f22; }

.rp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 30px 20px; text-align: center;
    border: 1px dashed var(--line); border-radius: 13px; margin-top: 12px;
}
.rp-empty-icon {
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5fb; color: #8c97ab;
}
.rp-empty strong { font-size: 13.5px; }
.rp-empty .muted { font-size: 12px; }

@media (max-width: 900px) {
    .rp-row { flex-wrap: wrap; gap: 10px; }
    .rp-main { flex: 1 1 60%; }
    .rp-amount { min-width: 0; flex: 0 0 auto; margin-left: auto; }
    .rp-method { order: 4; }
    .rp-actions { order: 5; margin-left: auto; }
}
@media (max-width: 560px) {
    .rp-row { padding: 11px 12px; }
    .rp-avatar { width: 32px; height: 32px; flex-basis: 32px; }
    .rp-ref { max-width: 120px; }
    .rp-method { order: 4; }
    .rp-actions { order: 5; }
}
@media print {
    .rp-actions { display: none; }
    .rp-row { border: 0; border-bottom: 1px solid #ddd; border-radius: 0; padding: 6px 0; }
}


/* ============================================================================
   Guardian portal — built for a phone
   ============================================================================ */
.pt-page { padding: 14px 14px calc(78px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }

/* --- header --- */
.pt-top {
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(135deg, #1f3f8f 0%, #2f56c4 100%);
    color: #fff;
    padding: calc(12px + env(safe-area-inset-top)) 14px 14px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 6px 22px rgba(24,48,110,.20);
}
.pt-top-row { display: flex; align-items: center; gap: 10px; }
.pt-logo { width: 32px; height: 32px; border-radius: 9px; background: #fff; object-fit: contain; padding: 3px; }
.pt-top-text { flex: 1; min-width: 0; }
.pt-school { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-sub { font-size: 11.5px; color: rgba(255,255,255,.78); }
.pt-exit {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); color: #fff;
}
.pt-exit .ico { width: 18px; height: 18px; }
.pt-exit:hover { background: rgba(255,255,255,.24); }

.pt-child { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.pt-child-avatar {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.18); color: #fff; font-weight: 800; font-size: 15px;
}
.pt-child-text { flex: 1; min-width: 0; }
.pt-child-name { font-size: 17px; font-weight: 800; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-child-class { font-size: 12px; color: rgba(255,255,255,.80); margin-top: 1px; }
.pt-term select {
    background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.26);
    border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 600; min-height: 42px;
}
.pt-term select option { color: #1b2330; }

.pt-wards { display: flex; gap: 7px; overflow-x: auto; margin-top: 13px; padding-bottom: 2px; scrollbar-width: none; }
.pt-wards::-webkit-scrollbar { display: none; }
.pt-ward {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 7px 12px 7px 7px; border-radius: 20px;
    background: rgba(255,255,255,.13); color: rgba(255,255,255,.88);
    font-size: 12.5px; font-weight: 600; text-decoration: none; min-height: 40px;
}
.pt-ward.active { background: #fff; color: #23408c; }
.pt-ward-av { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22);
    display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }
.pt-ward.active .pt-ward-av { background: #e8eefc; color: #23408c; }

/* --- panels --- */
.pt-panel[hidden] { display: none !important; }
.pt-panel > .card:first-child { margin-top: 14px; }
.pt-page .card { border-radius: 16px; padding: 15px 16px; margin-bottom: 12px; }
.pt-page .card h2 { font-size: 1rem; margin: 0 0 4px; }
.pt-page .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.pt-page .stat-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; min-width: 0; }
.pt-page .stat-value { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pt-page .stat-label { font-size: 11.5px; color: #6b7891; margin-top: 3px; }

/* --- bottom tabs --- */
.pt-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; background: rgba(255,255,255,.97);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.pt-tab {
    position: relative; flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: 8px 4px;
    color: #8c97ab; text-decoration: none; font-size: 11px; font-weight: 700;
    transition: color .12s ease;
}
.pt-tab .ico { width: 21px; height: 21px; }
.pt-tab.active { color: var(--accent); }
.pt-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.pt-badge {
    position: absolute; top: 9px; right: 50%; margin-right: -17px;
    width: 8px; height: 8px; border-radius: 50%; background: #d64535;
    border: 1.5px solid #fff;
}

.pt-addchild { margin-top: 4px; border: 1px dashed var(--line); border-radius: 14px; padding: 13px 15px; background: #fff; }
.pt-addchild > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; min-height: 28px; }
.pt-addchild .muted { font-size: 12px; margin: 7px 0 9px; }
.pt-addchild-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-addchild-form input { flex: 1; min-width: 150px; min-height: 44px; }
.pt-addchild-form .btn { min-height: 44px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (min-width: 720px) {
    .pt-tabs { position: sticky; bottom: 0; border-radius: 16px; margin-top: 16px; border: 1px solid var(--line); }
    .pt-page { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pt-tab, .pt-ward { transition: none; } }
@media print { .pt-tabs, .pt-exit, .pt-term { display: none !important; } .pt-panel[hidden] { display: block !important; } }


/* The portal's payment list should read as rows, not a stacked table */
.pt-page table { width: 100%; border-collapse: collapse; }
.pt-page .score-table thead { display: none; }
.pt-page .score-table tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    padding: 11px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.pt-page .score-table tbody tr:last-child { border-bottom: 0; }
.pt-page .score-table td { display: block; padding: 0; border: 0; text-align: left; }
.pt-page .score-table td::before { content: none !important; }
.pt-page .score-table td:nth-child(1) { font-family: var(--mono, ui-monospace, monospace);
    font-size: 11.5px; color: #8c97ab; grid-column: 1; }
.pt-page .score-table td:nth-child(2) { font-size: 11.5px; color: #8c97ab; grid-column: 1; }
.pt-page .score-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2;
    font-size: 15px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.pt-page .score-table td:nth-child(4) { grid-column: 1; font-size: 11.5px; color: #6b7891; }
.pt-page .score-table td:nth-child(5) { grid-column: 2; text-align: right; }
.pt-page .score-table .btn { min-height: 38px; }

/* results tables keep their own shape */
.pt-page .rc-fees-table tbody tr, .pt-page .portal-fee-items tbody tr { display: table-row; }
.pt-page .rc-fees-table td, .pt-page .portal-fee-items td { display: table-cell; padding: 6px 8px; }

/* every expander in the portal is a comfortable tap target */
.pt-page summary { min-height: 44px; display: flex; align-items: center; }


/* ============================================================================
   "Edit the whole class at once" as a floating window
   ============================================================================ */

/* the panel in the page is just a button now */
details.bulk-card { border: 1.5px solid #d6e2f6; background: #f7faff; border-radius: 14px; padding: 0; }
details.bulk-card > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; cursor: pointer; list-style: none; min-height: 52px;
    font-size: 13.5px; color: var(--accent);
}
details.bulk-card > summary::-webkit-details-marker { display: none; }
details.bulk-card > summary::before {
    content: ''; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
    background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>") center/15px no-repeat;
}
details.bulk-card > summary::after {
    content: 'Open'; margin-left: auto; font-size: 11.5px; font-weight: 700;
    color: #fff; background: var(--accent); padding: 6px 13px; border-radius: 20px;
}
details.bulk-card > summary:hover::after { background: #23479f; }
details.bulk-card > summary .muted { font-weight: 500; font-size: 12px; }
details.bulk-card:not(.in-modal) > *:not(summary) { display: none; }

/* the window itself */
.bulk-modal { position: fixed; inset: 0; z-index: 1300; display: flex;
    align-items: center; justify-content: center; padding: 22px 14px; }
.bulk-modal[hidden] { display: none; }
.bulk-modal-backdrop { position: absolute; inset: 0; background: rgba(13,22,40,.46);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: payFade .16s ease; }
.bulk-modal-card {
    position: relative; display: flex; flex-direction: column;
    width: min(900px, 100%); max-height: calc(100vh - 44px);
    background: #fff; border-radius: 20px;
    box-shadow: 0 24px 70px rgba(10,20,40,.30);
    animation: payRise .18s cubic-bezier(.2,.8,.3,1); overflow: hidden;
}
.bulk-modal-head {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #f7f9fe 0%, #f2f6fc 100%);
}
.bulk-modal-title { flex: 1; font-size: 15px; font-weight: 800; color: var(--ink); }
.bulk-modal-close { background: none; border: 0; font-size: 26px; line-height: 1;
    color: var(--muted-soft); cursor: pointer; padding: 0 4px; }
.bulk-modal-close:hover { color: var(--ink); }
.bulk-modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px; }

/* the panel, once inside the window */
details.bulk-card.in-modal { border: 0; background: transparent; padding: 0; }
details.bulk-card.in-modal > summary { display: none; }
details.bulk-card.in-modal > p.muted:first-of-type { margin-top: 0; font-size: 12.5px; }
.bulk-modal-body .bulk-grid,
.bulk-modal-body table { width: 100%; }
.bulk-modal-body .score-table th { position: sticky; top: -18px; background: #f7f9fd; z-index: 2; }
/* the save button gets its own bar at the foot of the window, always reachable */
.bulk-modal-body { padding-bottom: 0; }
.bulk-modal-body .btn-primary {
    position: sticky; bottom: 0; z-index: 3;
    display: block; width: 100%; margin: 16px -20px 0; padding: 14px 20px;
    width: calc(100% + 40px);
    border-radius: 0; font-size: 14px;
    box-shadow: 0 -8px 20px rgba(255,255,255,.9);
}

@media (max-width: 760px) {
    .bulk-modal { padding: 0; align-items: flex-end; }
    .bulk-modal-card { width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; }
    .bulk-modal-body { padding: 15px 14px calc(15px + env(safe-area-inset-bottom)); }
    details.bulk-card > summary { padding: 12px 13px; }
    details.bulk-card > summary::after { content: ''; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bulk-modal-backdrop, .bulk-modal-card { animation: none; }
}
@media print { details.bulk-card, .bulk-modal { display: none !important; } }

@media (max-width: 760px) {
    .bulk-modal-body .btn-primary { margin: 14px -14px 0; width: calc(100% + 28px);
        padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}


/* ============================================================================
   Receipt window
   ============================================================================ */
.rcpt-modal { position: fixed; inset: 0; z-index: 1400; display: flex;
    align-items: center; justify-content: center; padding: 22px 14px; }
.rcpt-modal[hidden] { display: none; }
.rcpt-backdrop { position: absolute; inset: 0; background: rgba(13,22,40,.5);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: payFade .16s ease; }
.rcpt-card {
    position: relative; display: flex; flex-direction: column;
    width: min(560px, 100%); max-height: calc(100vh - 44px);
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(10,20,40,.32);
    animation: payRise .18s cubic-bezier(.2,.8,.3,1);
}
.rcpt-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 13px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.rcpt-title { flex: 1; font-weight: 800; font-size: 14px;
    font-variant-numeric: tabular-nums; }
.rcpt-close { background: none; border: 0; font-size: 25px; line-height: 1;
    color: var(--muted-soft); cursor: pointer; padding: 0 4px; }
.rcpt-close:hover { color: var(--ink); }
.rcpt-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px; background: #f5f7fb; }
.rcpt-body .receipt-card { margin: 0; }
.rcpt-loading { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* printing from the window prints only the receipt */
@media print {
    body.printing-receipt > *:not(.rcpt-modal) { display: none !important; }
    body.printing-receipt .rcpt-modal { position: static; display: block; padding: 0; }
    body.printing-receipt .rcpt-backdrop,
    body.printing-receipt .rcpt-head { display: none !important; }
    body.printing-receipt .rcpt-card { width: auto; max-height: none; box-shadow: none;
        border-radius: 0; animation: none; }
    body.printing-receipt .rcpt-body { overflow: visible; padding: 0; background: #fff; }
}

@media (max-width: 760px) {
    .rcpt-modal { padding: 0; align-items: flex-end; }
    .rcpt-card { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
    .rcpt-body { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .rcpt-backdrop, .rcpt-card { animation: none; } }


/* ============================================================================
   Moving a member of staff to a different role
   ============================================================================ */
.role-change { margin: 12px 0 10px; border: 1px solid var(--line); border-radius: 13px;
    background: #fbfcfe; overflow: hidden; }
.role-change > summary {
    display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
    padding: 12px 14px; min-height: 48px; font-size: 13.5px; font-weight: 700; color: var(--accent);
}
.role-change > summary::-webkit-details-marker { display: none; }
.role-change > summary .ico { width: 16px; height: 16px; }
.role-change > summary .muted { font-weight: 500; font-size: 12px; }
.role-change > summary::after { content: '▸'; margin-left: auto; color: var(--muted-soft); }
.role-change[open] > summary::after { content: '▾'; }
.role-form { padding: 0 14px 14px; }

.role-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.role-option {
    display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
    padding: 10px 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 11px;
    transition: border-color .12s ease, background .12s ease;
}
.role-option:hover { border-color: #c2d3ef; }
.role-option input { margin-top: 3px; flex: 0 0 auto; }
.role-option:has(input:checked) { border-color: var(--accent); background: #f4f8ff;
    box-shadow: 0 0 0 2px rgba(44,91,216,.10); }
.role-option.is-current { background: #fbfcfe; }
.ro-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ro-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.ro-now { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; background: #e8eefc; color: #2c5bd8;
    padding: 1px 6px; border-radius: 20px; margin-left: 5px; }
.ro-note { font-size: 11px; color: #6b7891; line-height: 1.35; }
.role-note { font-size: 11.5px; margin: 11px 0 10px; }

@media (max-width: 760px) {
    .role-options { grid-template-columns: 1fr; }
    .role-form .btn { width: 100%; }
}

/* extra-duty pills and panel */
.pill-duty { background: #e7f3ec; color: #17683c; }
.duty-box { border-color: #cfe4d7; background: #fafdfb; }
.duty-box > summary { color: #17683c; }
.duty-box .role-option:has(input:checked) { border-color: #2f9e63; background: #f2fbf6;
    box-shadow: 0 0 0 2px rgba(47,158,99,.12); }


/* Storage page */
.storage-warn { border: 1.5px solid #f0d9b5; background: #fffdf7; }
.storage-warn h2 { color: #8a5f24; }
.clear-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.clear-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; padding: 13px 14px; background: #fbfcfe;
    border: 1px solid var(--line); border-radius: 12px; }
.clear-row strong { display: block; font-size: 13.5px; }
.clear-row .muted { display: block; font-size: 11.5px; margin-top: 2px; }
.clear-row .inline-form { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; }
@media (max-width: 760px) {
    .clear-row { flex-direction: column; align-items: stretch; }
    .clear-row .inline-form { width: 100%; }
    .clear-row .inline-form select, .clear-row .inline-form .btn { flex: 1; }
}


/* Updating the system */
.upd-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 14px 0 16px; }
.upd-file { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); flex: 1; min-width: 240px; }
.upd-safe { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px;
    background: #f1f7f3; border: 1px solid #cfe4d7; border-radius: 12px; font-size: 12px; color: #27543c; }
.upd-safe strong { font-size: 12.5px; margin-bottom: 3px; }
.upd-safe code { background: #fff; padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.upd-report { border: 1.5px solid #cfe0f8; background: #f9fbff; }
.upd-list { margin: 10px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.8; }
.upd-list .upd-bad { color: #9c2f22; font-weight: 600; }
.upd-next { margin-top: 14px; padding: 13px 15px; background: #fff8ec;
    border: 1px solid #f0ddc0; border-radius: 12px; font-size: 12.5px; color: #7a5320; }
.upd-links { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
@media (max-width: 760px) {
    .upd-form { flex-direction: column; align-items: stretch; }
    .upd-form .btn { width: 100%; }
}


/* School colour picker */
.brand-form { margin-top: 14px; }
.brand-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.brand-swatch {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 9px 11px; background: #fff;
    border: 1.5px solid var(--pp-line); border-radius: var(--pp-radius-md);
    font-size: 12.5px; font-weight: 600; color: var(--pp-ink-soft);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.brand-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.brand-swatch:hover { border-color: var(--pp-line-strong); }
.brand-swatch.is-on, .brand-swatch:has(input:checked) {
    border-color: var(--pp-ink); box-shadow: 0 0 0 2px rgb(27 35 48 / 10%);
}
.brand-chip { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
    border: 1px solid rgb(0 0 0 / 10%); }

.brand-custom { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px;
    padding: 14px; background: var(--pp-surface-2); border-radius: var(--pp-radius-md); }
.brand-custom > label { display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--pp-ink-soft); }
.brand-custom input[type=color] { width: 54px; height: 40px; padding: 2px; cursor: pointer;
    border: 1px solid var(--pp-line-strong); border-radius: 10px; background: #fff; }
.brand-preview { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand-preview-btn { display: inline-flex; align-items: center; padding: 10px 18px;
    border-radius: var(--pp-radius-md); font-size: 13px; font-weight: 700; }
.brand-preview-note { font-size: 12px; color: var(--pp-muted); }
.brand-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 760px) {
    .brand-custom { flex-direction: column; align-items: stretch; }
    .brand-actions .btn { flex: 1; }
}
@media print { .brand-form { display: none; } }


/* Dark or white side menu */
.tone-pick { margin-bottom: 16px; }
.tone-label { display: block; font-size: 12px; font-weight: 700; color: var(--pp-ink-soft); margin-bottom: 8px; }
.tone-options { display: flex; gap: 10px; flex-wrap: wrap; }
.tone-option {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 9px 14px 9px 9px; background: #fff;
    border: 1.5px solid var(--pp-line); border-radius: var(--pp-radius-md);
    font-size: 12.5px; font-weight: 700; color: var(--pp-ink-soft);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.tone-option input { position: absolute; opacity: 0; pointer-events: none; }
.tone-option:hover { border-color: var(--pp-line-strong); }
.tone-option.is-on, .tone-option:has(input:checked) {
    border-color: var(--pp-ink); box-shadow: 0 0 0 2px rgb(27 35 48 / 10%);
}
.tone-mini {
    width: 34px; height: 40px; flex: 0 0 34px; border-radius: 8px;
    border: 1px solid; padding: 5px 4px;
    display: flex; flex-direction: column; gap: 3px;
}
.tone-mini-pill { height: 7px; border-radius: 3px; }
.tone-mini-row { height: 4px; border-radius: 2px; opacity: .5; }
@media (max-width: 760px) { .tone-options { width: 100%; } .tone-option { flex: 1; } }


/* A page that has not been uploaded yet */
.btn.is-missing {
    opacity: .6; cursor: not-allowed; background: var(--pp-surface-2);
    border-style: dashed; color: var(--pp-muted);
}
.btn.is-missing em { font-style: normal; font-size: 11px; }
.missing-card { border: 1.5px solid #f0ddc0; background: #fffdf7; }
.missing-card h2 { color: #7a5320; }
.missing-list { margin: 10px 0; padding-left: 20px; font-size: 13px; line-height: 1.9; }
.missing-list code { background: #fff; padding: 2px 7px; border-radius: 5px;
    border: 1px solid var(--pp-line); font-size: 12px; }


/* ============================================================================
   Settings, grouped into tabs
   ============================================================================ */
.set-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin: 4px 0 18px; padding: 4px;
    background: var(--pp-surface-2, #f8fafd);
    border: 1px solid var(--pp-line, #e4eaf4);
    border-radius: 14px;
}
.set-tab {
    flex: 1 1 auto; min-width: 104px; min-height: 42px;
    padding: 0 16px; border: 0; border-radius: 10px;
    background: transparent; color: var(--pp-muted, #5d6b86);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
.set-tab:hover { background: rgb(0 0 0 / 4%); color: var(--pp-ink, #1b2330); }
.set-tab.active {
    background: var(--pp-surface, #fff);
    color: var(--pp-brand-text, #2746b4);
    box-shadow: 0 1px 3px rgb(20 40 80 / 8%);
}
.set-tab:focus-visible { outline: none; box-shadow: var(--pp-focus-ring, 0 0 0 3px rgba(49,87,213,.28)); }

.set-panel[hidden] { display: none !important; }
.set-panel > .card { margin-bottom: 14px; }
.set-panel > .card:last-child { margin-bottom: 0; }

/* the old jump bar becomes a quiet fallback once tabs exist */
.settings-jump.is-collapsed { display: none; }

@media (max-width: 760px) {
    .set-tabs { gap: 3px; padding: 3px; }
    .set-tab { min-width: 0; flex: 1 1 30%; padding: 0 8px; font-size: 12px; }
}
@media print { .set-tabs { display: none; } .set-panel[hidden] { display: block !important; } }


/* The bar shown when the owner is inside a campus */
.owner-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 10px 18px; background: #1f1e30; color: #fff;
    font-size: 12.5px; font-weight: 600;
}
.owner-bar strong { color: #fff; }
.owner-bar a { color: #fff; text-decoration: underline; padding: 6px 0; }
.owner-bar a:hover { opacity: .85; }
@media print { .owner-bar { display: none; } }


/* ============================================================================
   v51 — fixes from the full audit
   ============================================================================ */

/* The row number in the fees table used --muted-soft, which the token block
   itself warns is "decorative only, never for body text". It measured 2.86:1.
   It is a number a person reads, so it needs a readable colour. */
.fees-clean .fee-num { color: var(--pp-muted, #5d6b86); }

/* Receipt numbers in the payments list sat at 4.45:1 — just under. */
.rp-receipt, .rp-ref { color: var(--pp-muted, #5d6b86); }

/* The row action buttons were 31px tall. A row of 81 of them on a fees page is
   a lot of small targets; 36px is the smallest that is comfortable with a
   mouse, and the phone rules already raise them to 38px. */
.act-btn { min-height: 36px; }
@media (max-width: 760px) { .act-btn { min-height: 44px; } }

/* Anything else still reaching for the decorative grey as body text. */
.fee-prog-label .muted, .bb-item .muted, .rp-meta, .pi-paid, .tile-sub, .ft-sub {
    color: var(--pp-muted, #5d6b86);
}


/* ----------------------------------------------------------------------------
   The audit found the decorative grey being used for text in several places —
   table headings at 3.6:1, the top strip at 2.8:1. The token block itself says
   it is "decorative only, never for body text", so these are corrected to the
   readable grey rather than the token being weakened.
   ---------------------------------------------------------------------------- */
.score-table th,
.score-table thead th,
th.col-name, th.left, th.right,
.topstrip-kicker,
.top-user small,
.side-ay {
    color: var(--pp-muted, #5d6b86);
}


/* The last of the audit findings on the fees page. */
.fee-status { color: var(--pp-muted, #5d6b86); }           /* the "no fees set" state, 3.55:1 */
.fee-status.fs-paid   { color: var(--pp-success-700, #0f5d34); }
.fee-status.fs-part   { color: var(--pp-warning-700, #7d4f0c); }
.fee-status.fs-unpaid { color: var(--pp-danger-700,  #8e2017); }
.fee-status.fs-none   { color: var(--pp-muted, #5d6b86); }

.muted, .ft-label, .ft-cur, .pt-cur { color: var(--pp-muted, #5d6b86); }

/* The generated pupil initials sat at 3.9:1. They are decorative — the name is
   beside them — but a darker generated tone costs nothing. */
.avatar, .rp-avatar, .pay-avatar { filter: saturate(1.05) brightness(.88); }


/* The students page showed 223 controls under 36px. Buttons had no minimum
   height at all, so they were only as tall as their padding allowed. */
.btn { min-height: 36px; }
.btn-small { min-height: 34px; }
@media (max-width: 760px) { .btn, .btn-small { min-height: 44px; } }


/* `.app .btn-small` pins 32px and outranks a bare `.btn-small`, which is why
   the mobile rule was not taking effect. Matched here at equal specificity. */
.app .btn, .app button.btn { min-height: 36px; }

/* The phone rule must come last, or the desktop rule above wins on source order. */
@media (max-width: 760px) {
    .app .btn, .app .btn-small, .app button.btn, .app .act-btn { min-height: 44px; }
}