/* ============================================================================
   Project : RIC Fee Management | Web (Blazor)
   File    : app-theme.css
   Purpose : Official Design System — PB-03 (Color System) + PB-05 (Design
             System) translated to CSS. No other colors/fonts/icons may be
             used anywhere in the app.
   ============================================================================ */

:root {
    /* ---- PB-03 Colors ---- */
    --color-primary: #0B3D91;
    --color-primary-dark: #082C6B;
    /* [V2.5 Phase 5.7] Brand blue BEHIND white text (buttons, table heads). Same as primary in light;
       in dark, primary turns light (for text/links) while this stays deep. */
    --color-primary-fill: #0B3D91;
    --color-secondary: #1E88E5;
    --color-success: #006400;
    --color-warning: #FF9800;
    --color-error: #8B0000;
    --color-info: #29B6F6;

    --color-background: #F5F7FB;
    --color-surface: #FFFFFF;
    --color-text-primary: #0A192F;
    --color-text-secondary: #5F6B7A;
    --color-text-disabled: #A0AEC0;
    --color-divider: #E2E8F0;
    --color-border-focus: #0B3D91;
    --color-border-disabled: #CBD5E1;

    --gradient-brand: linear-gradient(135deg, #0B3D91 0%, #1E88E5 100%);

    /* ---- PB-05 Spacing ---- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-standard: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-section: 32px;

    /* ---- PB-05 Radius ---- */
    --radius-button: 16px;
    --radius-card: 16px;
    --radius-dialog: 20px;
    --radius-input: 14px;
    --radius-pill: 999px;

    /* ---- PB-05 Shadows (soft only) ---- */
    --shadow-card: 0 1px 2px rgba(10,25,47,0.04), 0 4px 12px rgba(10,25,47,0.05);
    --shadow-card-hover: 0 2px 4px rgba(10,25,47,0.06), 0 10px 24px rgba(10,25,47,0.08);
    --shadow-dialog: 0 20px 50px rgba(10,25,47,0.22);
    --shadow-fab: 0 6px 16px rgba(11,61,145,0.28);

    --sidebar-width: 264px;

    /* ---- [V2.4] Design System tokens (see "Design System" at the end) ---- */
    /* Card accent palette: dark, print-safe, clearly distinct from each other. */
    --accent-navy: #0B3D91;
    --accent-green: #006400;
    --accent-amber: #B45309;
    --accent-purple: #5B2C94;
    --accent-teal: #0F766E;
    --accent-slate: #475569;
    --accent-brown: #7C4A1E;
    --accent-red: #8B0000;
    /* Order a tile group hands them out in. Red comes last on purpose: it reads
       as "danger", so a tile only gets it when the page asks for it
       (.erp-tone-red on overdue / absences / expenses ...), never by position. */
    --accent-1: var(--accent-navy);
    --accent-2: var(--accent-green);
    --accent-3: var(--accent-amber);
    --accent-4: var(--accent-purple);
    --accent-5: var(--accent-teal);
    --accent-6: var(--accent-slate);
    --accent-7: var(--accent-brown);
    --accent-8: var(--accent-red);
    --accent-width: 4px;

    /* Status vocabulary - every badge / pill / state figure uses these. */
    --status-success-bg: rgba(0,100,0,0.11);   --status-success-fg: #006400;
    --status-danger-bg: rgba(139,0,0,0.10);    --status-danger-fg: #8B0000;
    --status-warning-bg: rgba(217,119,6,0.15); --status-warning-fg: #8A4B00;
    --status-info-bg: rgba(11,61,145,0.09);    --status-info-fg: #0B3D91;
    --status-neutral-bg: rgba(71,85,105,0.12); --status-neutral-fg: #475569;

    --motion-fast: 160ms;
}

* { box-sizing: border-box; }

html {
    /* Without this, Android WebView/Chrome Mobile's "font boosting" quietly
       inflates font sizes on narrow columns for readability - it's what was
       making the Login floating-labels render far larger than their 14px CSS
       value and wrap/overflow their input box. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    background-image: url('/images/app-background.jpg');
    /* [V2.6 perf] 21 KB WebP where supported (was a 201 KB image), JPEG otherwise. */
    background-image: image-set(url('/images/app-background.webp') type('image/webp'), url('/images/app-background.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

a { color: var(--color-secondary); text-decoration: none; }

/* ---------------- Material Symbols (Icon System — PB-05 §12) ---------------- */
.material-symbols-rounded {
    /* [V2.5] Base ligature rules (were in Google's stylesheet before the font was self-hosted). */
    font-family: 'Material Symbols Rounded';
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    font-size: 20px;
    display: inline-flex;
}
.material-symbols-rounded.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ---------------- Typography (PB-05 §8) ---------------- */
h1, .erp-h1 { font-size: 26px; font-weight: 600; margin: 0; color: var(--color-text-primary); letter-spacing: -0.2px; }
h2, .erp-h2 { font-size: 20px; font-weight: 600; margin: 0; color: var(--color-text-primary); }
h3, .erp-h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--color-text-primary); }
.erp-subheading { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); }
.erp-body { font-size: 14px; font-weight: 400; color: var(--color-text-primary); }
.erp-caption { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }

/* ---------------- Layout Shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.app-main { flex: 1; margin-inline-start: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; }
.app-main-full { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-width: 0; }

.app-topbar {
    height: 68px;
    background: var(--color-primary-fill);
    background-image: linear-gradient(180deg, #0B3D91 0%, #0A3480 100%);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    padding: 0 var(--space-xl);
    position: sticky;
    top: 0;
    z-index: 5;
    gap: var(--space-md);
}
.app-topbar-icon { color: white; font-size: 22px; }
.app-topbar-title { font-weight: 600; color: white; font-size: 17px; }
.app-topbar-school-name { font-weight: 600; color: white; font-size: 17px; }
.app-topbar-school-sep { color: rgba(255,255,255,0.4); font-size: 17px; }
.app-topbar-spacer { flex: 1; }
.app-topbar-user { display: flex; align-items: center; gap: var(--space-sm); color: rgba(255,255,255,0.8); font-size: 13px; }
.app-topbar-avatar-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.app-topbar-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--gradient-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; flex-shrink: 0;
    position: relative; z-index: 2;
}
.app-topbar-avatar-photo {
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.app-topbar-user-name { font-weight: 700; color: white; }
/* [V2.4] Static ring + online dot - the spinning ring and pinging dot were
   two never-ending animations on every single page. */
.app-topbar-avatar-ring {
    position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
}
.app-topbar-avatar-online {
    position: absolute; bottom: -1px; right: -1px; z-index: 3;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-success);
    border: 2px solid #0B3D91;
}

.app-content { padding: var(--space-xl); max-width: 1160px; }

/* ---------------- Sidebar ---------------- */
.app-sidebar {
    width: var(--sidebar-width);
    background: var(--color-primary-fill);
    background-image: linear-gradient(180deg, #0B3D91 0%, #0A3480 100%);
    color: white;
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--space-standard);
    z-index: 10;
    overflow: hidden;
}
.app-sidebar-brand { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-section); padding: 0 var(--space-sm); flex-shrink: 0; }
.app-sidebar-brand-icon {
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(255,255,255,0.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 38.5px; flex-shrink: 0;
    overflow: hidden;
}
.app-sidebar-brand-icon-img { background: transparent; padding: 0; }
.app-sidebar-brand-icon img { width: 118%; height: 118%; object-fit: cover; border-radius: 50%; }
.app-sidebar-brand-title { font-weight: 600; font-size: 16.8px; letter-spacing: 0.2px; }
.app-sidebar-brand-tagline { font-size: 11.8px; opacity: 0.7; letter-spacing: 0.3px; }

.app-sidebar-search {
    display: flex; align-items: center; gap: 8px;
    margin: 0 var(--space-sm) var(--space-md); padding: 9px 12px;
    border-radius: var(--radius-button);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    flex-shrink: 0;
}
.app-sidebar-search .material-symbols-rounded { font-size: 17px; opacity: 0.7; flex-shrink: 0; }
.app-sidebar-search input {
    background: transparent; border: none; outline: none; color: white;
    font-size: 13px; width: 100%; font-family: inherit;
}
/* the box ships readonly (anti Chrome-autofill) - keep it looking & feeling normal */
.app-sidebar-search input[readonly] { cursor: text; opacity: 1; }
.app-sidebar-search input::placeholder { color: rgba(255,255,255,0.55); }
/* Detect a browser autofill on the sidebar search: Chrome runs this animation
   on any field it auto-fills - uiHelpers.js listens for it and wipes the value. */
@keyframes onAutoFillSidebar { from { /* no-op marker */ } to { /* no-op marker */ } }
.app-sidebar-search input:-webkit-autofill { animation-name: onAutoFillSidebar; animation-duration: 1ms; }

.app-sidebar-section-label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.6px; opacity: 0.55; padding: 0 var(--space-standard);
    margin: var(--space-sm) 0 var(--space-xs);
}
.app-sidebar-section-label.erp-sidebar-hidden,
.app-sidebar-link.erp-sidebar-hidden { display: none !important; }

/* ---------------- Notification Bell (topbar, before name/photo) ---------------- */
.notif-bell-wrap { position: relative; display: flex; align-items: center; margin-right: var(--space-sm); }
.notif-bell-btn {
    background: none; border: none; padding: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative; border-radius: 50%;
    transition: background 0.15s ease;
}
.notif-bell-btn:hover { background: rgba(255,255,255,0.08); }
.notif-bell-icon { font-size: 22px; color: #FFC107; }
.notif-bell-badge {
    position: absolute; top: 0px; right: 0px;
    background: var(--color-error); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    min-width: 15px; height: 15px; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 1.5px solid var(--color-primary-dark);
}
.notif-backdrop {
    position: fixed; inset: 0; z-index: 990; background: transparent;
}
.notif-panel {
    position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 991;
    width: 340px; max-width: 86vw;
    background: var(--color-surface); color: var(--color-text-primary);
    border-radius: var(--radius-card); box-shadow: var(--shadow-dialog);
    overflow: hidden;
}
.notif-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) var(--space-standard);
    border-bottom: 1px solid var(--color-divider);
    font-size: 13px; font-weight: 700; color: var(--color-text-primary);
}
.notif-mark-all {
    background: none; border: none; cursor: pointer;
    font-size: 11px; font-weight: 600; color: var(--color-primary);
    padding: 0;
}
.notif-panel-body { max-height: 360px; overflow-y: auto; }
.notif-empty {
    padding: var(--space-xl) var(--space-standard); text-align: center;
    font-size: 12.5px; color: var(--color-text-secondary);
}
.notif-item {
    display: flex; align-items: flex-start; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-standard); cursor: pointer;
    border-bottom: 1px solid var(--color-divider);
    transition: background 0.12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-background); }
.notif-item-unread { background: rgba(30,136,229,0.06); }
.notif-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary);
    margin-top: 5px; flex-shrink: 0;
}
.notif-dot-hidden { visibility: hidden; }
.notif-item-body { min-width: 0; flex: 1; }
.notif-item-title { font-size: 12.5px; font-weight: 700; color: var(--color-text-primary); }
.notif-item-message {
    font-size: 12px; color: var(--color-text-secondary); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-item-time { font-size: 10.5px; color: var(--color-text-disabled); margin-top: 4px; }

.app-sidebar-links {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.app-sidebar-links::-webkit-scrollbar { width: 6px; }
.app-sidebar-links::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.app-sidebar-links::-webkit-scrollbar-track { background: transparent; }
.app-sidebar-link {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-sm) var(--space-standard);
    border-radius: var(--radius-button);
    color: white; opacity: 0.78; font-size: 14px; font-weight: 500;
    transition: background 0.2s ease, opacity 0.2s ease;
    position: relative;
}
.app-sidebar-link .material-symbols-rounded { font-size: 20px; }
.app-sidebar-link:hover {
    background: rgba(255,255,255,0.24);
    opacity: 1;
    z-index: 2;
}
.app-sidebar-link.active { background: rgba(255,255,255,0.16); opacity: 1; font-weight: 600; }
.app-sidebar-link.active .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ---------------- Collapsible sidebar category (NavGroup.razor) ---------------- */
.app-nav-group { display: flex; flex-direction: column; }
.app-nav-group-summary {
    cursor: pointer; list-style: none; user-select: none;
    justify-content: flex-start;
    /* The category header must read as the parent, not just another link -
       fuller brightness/weight than a regular option so the two are never
       confused at a glance. */
    opacity: 0.95; font-weight: 700;
}
.app-nav-group-summary::-webkit-details-marker { display: none; }
.app-nav-group-summary::marker { content: ""; }
.app-nav-group-chevron { margin-left: auto; font-size: 18px !important; opacity: 0.6; transition: transform 0.2s ease; flex-shrink: 0; }
.app-nav-group[open] > .app-nav-group-summary .app-nav-group-chevron { transform: rotate(180deg); }
.app-nav-group-body {
    display: flex; flex-direction: column; gap: 2px;
    padding: 2px 0 2px var(--space-lg);
    margin-left: var(--space-sm);
    border-left: 1px solid rgba(255,255,255,0.14);
}
.app-nav-group-body .app-sidebar-link {
    font-size: 13.2px; padding: 6px var(--space-standard);
    /* Lighter than the category header above it (opacity 0.95/weight 700) so
       parent vs. child is obvious without reading the text. */
    opacity: 0.62; font-weight: 400;
}
.app-nav-group-body .app-sidebar-link:hover,
.app-nav-group-body .app-sidebar-link.active { opacity: 1; }/* A group whose links are all unauthorised (AuthorizeView renders nothing) renders an
   empty body - hide the whole category so no dangling, link-less header ever shows.
   uiHelpers.js applies the same rule as a fallback for browsers without :has(). */
.app-nav-group:not(:has(.app-nav-group-body .app-sidebar-link)) { display: none; }
.app-nav-group.erp-sidebar-hidden { display: none !important; }

.app-sidebar-footer { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-standard); flex-shrink: 0; }
.app-sidebar-logout {
    display: flex; align-items: center; gap: var(--space-md);
    background: transparent; border: none; color: white; opacity: 0.78;
    font-size: 14px; font-weight: 500; cursor: pointer; padding: var(--space-sm) var(--space-standard);
    border-radius: var(--radius-button); width: 100%;
    transition: background 0.2s ease, opacity 0.2s ease;
    position: relative;
}
.app-sidebar-logout:hover { background: rgba(139,0,0,0.2); opacity: 1; }

/* ---------------- Sidebar - Mobile (off-canvas drawer) ----------------
   Desktop keeps the sidebar permanently docked (.app-main's margin-inline-start
   above). Below this breakpoint there's no room for a docked 264px sidebar next
   to real content, so it becomes a slide-in drawer instead, toggled by the
   checkbox hack in MainLayout.razor (no JS interop needed). */
.app-sidebar-toggle-checkbox { display: none; }
.app-topbar-menu-btn { display: none; }
.app-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
    .app-main { margin-inline-start: 0; }
    .app-content { padding: var(--space-standard); }

    .app-sidebar {
        inset-inline-start: calc(var(--sidebar-width) * -1);
        transition: inset-inline-start 0.25s ease;
        z-index: 60;
    }
    .app-sidebar-toggle-checkbox:checked ~ .app-sidebar {
        inset-inline-start: 0;
        box-shadow: 0 0 32px rgba(0,0,0,0.35);
    }

    .app-topbar-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        cursor: pointer;
        margin-inline-end: var(--space-xs);
        flex-shrink: 0;
    }
    .app-topbar { padding: 0 var(--space-standard); gap: var(--space-sm); }
    .app-topbar-icon { display: none; }
    .app-topbar-school-name, .app-topbar-school-sep { display: none; }
    .app-topbar-user-name { display: none; }
    /* The spinning conic-gradient ring reads as a soft halo around the 44px
       avatar on a big desktop screen; at close-up phone viewing distance it's
       too small/bright to read as a ring and just looks like a smudge of
       color. A clean avatar circle alone matches the rest of the trimmed-down
       mobile topbar better. */
    .app-topbar-avatar-ring { display: none; }

    /* .notif-panel normally hangs off the bell button itself (position:
       absolute; right:0 relative to .notif-bell-wrap) - on a narrow screen
       the bell sits close to the left/middle of the topbar, so that math
       pushes most of the panel off-screen. Anchoring it to the viewport
       instead guarantees it always fits, regardless of where the bell is. */
    .notif-panel {
        position: fixed;
        top: 76px;
        left: var(--space-standard);
        right: var(--space-standard);
        width: auto;
        max-width: none;
    }

    .app-sidebar-toggle-checkbox:checked ~ .app-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(4,12,32,0.45);
        z-index: 55;
        cursor: pointer;
    }
}

/* A "heading + action button(s)" row (e.g. a section title with a "Post
   Announcement"/"New" button at the far right) - wraps onto its own line
   instead of squeezing the button's text past its own edge when the title
   and buttons together don't fit one row's width. */
.erp-section-header-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md);
}
.erp-section-header-row > h3 { flex: 1 1 auto; min-width: 0; }
.erp-section-header-row > div { flex-shrink: 0; }

/* ---------------- Cards & Forms ---------------- */
/* Surface (background / border / radius / shadow) comes from the Design System panel rule. */
.erp-card { padding: var(--space-xl); position: relative; }

.erp-form-group { margin-bottom: var(--space-standard); }
.erp-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.erp-input {
    width: 100%;
    padding: var(--space-md) var(--space-standard);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-input);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.erp-input::placeholder { color: var(--color-text-disabled); }
.erp-input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(11,61,145,0.10); }
.erp-input:disabled { background: var(--color-background); color: var(--color-text-disabled); border-color: var(--color-border-disabled); }

.erp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-button);
    font-size: 14px; font-weight: 600; font-family: inherit;
    border: none; cursor: pointer;
    position: relative; overflow: hidden;
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
}
.erp-btn .material-symbols-rounded { font-size: 18px; }
/* [V2.4] Buttons no longer zoom or run a colour orbit on hover - the fill
   deepens instead, and a keyboard focus ring (Design System) marks focus. */
.erp-btn:active:not(:disabled) { transform: translateY(1px); }
.erp-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.erp-btn-primary { background: var(--color-primary-fill); color: white; box-shadow: 0 1px 2px rgba(11,61,145,0.18), 0 2px 6px rgba(11,61,145,0.16); }
.erp-btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); box-shadow: 0 2px 4px rgba(11,61,145,0.2), 0 4px 12px rgba(11,61,145,0.2); }
.erp-btn-secondary { background: var(--color-surface); color: var(--color-primary); border: 1.5px solid var(--color-divider); }
.erp-btn-secondary:hover:not(:disabled) { border-color: var(--color-primary); background: rgba(11,61,145,0.05); }
.erp-btn-success { background: var(--color-success); color: white; }
.erp-btn-success:hover:not(:disabled) { filter: brightness(0.9); }
.erp-btn-danger { background: var(--color-error); color: white; }
.erp-btn-danger:hover:not(:disabled) { filter: brightness(0.9); }
.erp-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 12px; }
.erp-btn-xs { padding: 3px 10px; font-size: 11px; border-radius: 10px; }

/* Alerts share the Design System status palette; the hairline border keeps them
   readable on the photo background as well as inside a white panel. */
.erp-alert { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-standard); border-radius: var(--radius-input); font-size: 13px; margin-bottom: var(--space-standard); border: 1px solid transparent; }
.erp-alert-error { background: #FBF0F0; color: var(--status-danger-fg); border-color: rgba(139,0,0,0.18); }
.erp-alert-success { background: #EEF6EE; color: var(--status-success-fg); border-color: rgba(0,100,0,0.18); }
.erp-alert-warning { background: #FDF4E7; color: var(--status-warning-fg); border-color: rgba(217,119,6,0.22); }
.erp-alert-info { background: #EFF3FA; color: var(--status-info-fg); border-color: rgba(11,61,145,0.16); }

.erp-note {
    display: flex; align-items: flex-start; gap: var(--space-sm);
    font-size: 11.5px; color: var(--color-text-secondary);
    background: rgba(255,152,0,0.08); border-radius: var(--radius-input);
    padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0;
}
.erp-note .material-symbols-rounded { font-size: 16px; color: var(--color-warning); flex-shrink: 0; margin-top: 1px; }

/* A native <input type="file"> renders its own "Choose file" button + file
   name label at a fixed intrinsic width the browser picks - on a narrow
   mobile screen that's often wider than the flex row it sits in, so without
   this it silently overflows its card's right edge instead of shrinking. */
input[type="file"] { max-width: 100%; }

/* ---------------- Floating Label Fields ---------------- */
.erp-field {
    position: relative;
    margin-bottom: var(--space-standard);
}
.erp-field .erp-input {
    width: 100%;
    padding: 21px var(--space-standard) 8px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-input);
    font-size: 14px;
    background: var(--color-surface);
}
.erp-field .erp-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(11,61,145,0.1); }
.erp-field .erp-floating-label {
    position: absolute;
    inset-inline-start: var(--space-standard);
    top: 19px;
    font-size: 14px;
    color: var(--color-text-secondary);
    pointer-events: none;
    transition: all 0.15s ease;
    background: var(--color-surface);
    padding: 0 4px;
    margin-inline-start: -4px;
    max-width: calc(100% - var(--space-standard) * 2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-field .erp-input:focus + .erp-floating-label,
.erp-field .erp-input:not(:placeholder-shown) + .erp-floating-label {
    top: -2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
}
.erp-field .erp-input-error { border-color: var(--color-error); }
.erp-field-error-text { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-error); margin-top: 4px; }

/* ============================================================================
   Management Screen Pattern (Staff Management / Academic Setup style)
   Reference: Umar's UI reference, 2026-08-13. This is now the standard
   layout for any "list + manage resources" screen — reuse these classes
   for future screens of this shape rather than inventing new ones.
   ============================================================================ */

.erp-page-header { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); }
.erp-page-header-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(11,61,145,0.10); color: var(--color-primary);
}
.erp-page-header-icon .material-symbols-rounded { font-size: 24px; }
.erp-page-header-title { font-size: 20px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 2px; }
.erp-page-header-subtitle { font-size: 13px; color: var(--color-text-secondary); margin: 0; }

.erp-toolbar-row { display: flex; align-items: stretch; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.erp-toolbar-selector { flex: 1 1 260px; min-width: 220px; }
.erp-toolbar-selector .erp-field { margin-bottom: 0; height: 100%; }
.erp-toolbar-selector select.erp-input { height: 100%; }

.erp-stat-card {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    flex: 1 1 160px; min-width: 150px;
    position: relative;
}
.erp-stat-icon {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.erp-stat-icon .material-symbols-rounded { font-size: 20px; }
.erp-stat-icon-purple { background: rgba(111,66,193,0.12); color: #6F42C1; }
.erp-stat-icon-green { background: rgba(0,100,0,0.12); color: #006400; }
.erp-stat-icon-blue { background: rgba(41,182,246,0.14); color: #1471a8; }
.erp-stat-icon-amber { background: rgba(255,152,0,0.14); color: #a15c00; }
.erp-stat-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
.erp-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); line-height: 1.1; }
.erp-stat-status { font-size: 11px; color: var(--color-success); font-weight: 600; }

.erp-toolbar-action { flex: 0 0 auto; display: flex; align-items: stretch; }
.erp-toolbar-action .erp-btn { height: 100%; white-space: nowrap; }

.erp-tabs-card { overflow: hidden; position: relative; }
.erp-tabs-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-lg); border-bottom: 1px solid var(--color-divider); }
/* Many tabs wrap onto a second line on desktop without the 20px column gap
   also opening a hole between the rows; phones scroll the strip instead. */
.erp-tabs { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); row-gap: 0; }
.erp-tab {
    display: flex; align-items: center; gap: 6px;
    padding: var(--space-md) 2px; margin: var(--space-sm) 0;
    background: none; border: none; border-bottom: 2px solid transparent;
    font-size: 14px; font-weight: 600; color: var(--color-text-secondary);
    cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.erp-tab .material-symbols-rounded { font-size: 18px; }
.erp-tab:hover { color: var(--color-text-primary); }
.erp-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.erp-tab-badge { font-size: 10.5px; font-weight: 700; background: var(--color-background); color: var(--color-text-secondary); padding: 1px 7px; border-radius: var(--radius-pill); }
.erp-tab.active .erp-tab-badge { background: rgba(11,61,145,0.12); color: var(--color-primary); }

.erp-tabs-body { padding: var(--space-lg); }

.erp-resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); }

.erp-resource-card { padding: var(--space-lg); position: relative; overflow: hidden; }
.erp-resource-card-head { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); }
.erp-resource-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-background); color: var(--color-text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
}
.erp-resource-name-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.erp-resource-name { font-weight: 700; font-size: 14.5px; color: var(--color-text-primary); overflow-wrap: break-word; }
.erp-resource-meta { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: break-word; }

/* Pill (row-action) buttons. .erp-pill-btn and .erp-btn-pill are the same
   button under two historic names - one rule for both. Default tone is navy;
   the -red/-danger, -amber and -green modifiers recolour text + border. Hover
   fills with a faint tint of the same colour - no zoom, no orbit. */
.erp-pill-btn, .erp-btn-pill {
    --pill-tone: var(--color-primary);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 14px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
    background: var(--color-surface); color: var(--pill-tone);
    border: 1.5px solid rgba(11,61,145,0.35);
    border-color: color-mix(in srgb, var(--pill-tone) 38%, transparent);
    position: relative; overflow: hidden;
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.erp-pill-btn:hover:not(:disabled), .erp-btn-pill:hover:not(:disabled) {
    background: rgba(11,61,145,0.06);
    background: color-mix(in srgb, var(--pill-tone) 8%, var(--color-surface));
    border-color: var(--pill-tone);
}
.erp-pill-btn:disabled, .erp-btn-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.erp-pill-btn-blue { --pill-tone: var(--color-primary); }
.erp-pill-btn-red, .erp-btn-pill-danger { --pill-tone: var(--color-error); border-color: rgba(139,0,0,0.35); }
.erp-pill-btn-amber { --pill-tone: #8A4B00; border-color: rgba(217,119,6,0.4); }
.erp-pill-btn-green { --pill-tone: var(--color-success); border-color: rgba(0,100,0,0.35); }

.erp-empty-card { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-section) var(--space-lg); }
.erp-empty-card-icon {
    width: 64px; height: 64px; border-radius: 50%; margin-bottom: var(--space-md);
    background: var(--status-info-bg); color: var(--status-info-fg);
    display: flex; align-items: center; justify-content: center;
}
.erp-empty-card-icon .material-symbols-rounded { font-size: 30px; }
.erp-empty-card-title { font-weight: 700; font-size: 15px; color: var(--color-text-primary); margin-bottom: 4px; }
.erp-empty-card-subtitle { font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--space-md); max-width: 280px; }

.erp-info-banner {
    display: flex; align-items: center; gap: var(--space-sm);
    background: rgba(41,182,246,0.08); color: var(--color-text-secondary);
    font-size: 12.5px; padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-divider);
}
.erp-info-banner .material-symbols-rounded { font-size: 17px; color: #1471a8; flex-shrink: 0; }
.erp-info-banner strong { color: var(--color-text-primary); }

/* ---------------- Feature Hub Cards (Academic Setup landing row) ---------------- */
.erp-hub-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.erp-hub-card {
    padding: 20px var(--space-lg); text-align: center;
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
    font-family: inherit; color: inherit;
    position: relative;
    /* .erp-spark-wrap's sparkline (below) deliberately overflows its own SVG
       box for the pulsing halo animation - without clipping it here, that
       halo bleeds past this card's own edge into whichever card follows it
       in the stack (only noticeable on cards whose last data point lands
       near the top of the sparkline). Doesn't affect this card's own
       box-shadow glow, which paints outside the border regardless of overflow. */
    overflow: hidden;
}
button.erp-hub-card, .erp-hub-card.is-selectable { cursor: pointer; }
/* .erp-hub-card-icon is the older name some screens use for the same badge. */
.erp-hub-icon, .erp-hub-card-icon {
    width: 48px; height: 48px; border-radius: 50%; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center;
}
.erp-hub-icon .material-symbols-rounded, .erp-hub-card-icon .material-symbols-rounded { font-size: 22px; }
.erp-hub-icon.is-sm { width: 34px; height: 34px; margin-bottom: 0; flex-shrink: 0; }
.erp-hub-icon.is-sm .material-symbols-rounded { font-size: 17px; }
.erp-hub-icon-purple { background: rgba(111,66,193,0.14); color: #6F42C1; }
.erp-hub-icon-green { background: rgba(0,100,0,0.14); color: #006400; }
.erp-hub-icon-blue { background: rgba(41,182,246,0.16); color: #1471a8; }
.erp-hub-icon-amber { background: rgba(255,152,0,0.16); color: #a15c00; }
.erp-hub-icon-red { background: rgba(139,0,0,0.12); color: var(--color-error); }

/* KPI stat-tile variant of the hub card (Super Admin Dashboard overview row):
   left-aligned label + big number + icon, instead of the centered icon/button
   layout the base .erp-hub-card uses for landing-page navigation tiles. */
.erp-hub-card-kpi { text-align: center; align-items: stretch; }
.erp-hub-card-heading { display:flex; flex-wrap: nowrap; align-items:center; justify-content:center; gap:10px; text-align:left; }
.erp-hub-card-kpi .erp-hub-icon { width: 32px; height: 32px; margin-bottom: 0; flex-shrink: 0; }
.erp-hub-card-kpi .erp-hub-icon .material-symbols-rounded { font-size: 16px; }
.erp-hub-card-title { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; }
.erp-hub-card-count {
    font-size: 24px; font-weight: 700; color: var(--color-text-primary);
    margin-top: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums;
    text-align: center;
}
.erp-hub-card-subtitle { font-size: 9.5px; color: var(--color-text-secondary); margin-top: 4px; }

/* Compact secondary-detail row under a KPI card's count (e.g. Present / Absent / Attendance %). */
.erp-hub-card-detail {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 5px 8px; margin-top: 7px;
}
.erp-hub-card-detail-item {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; color: var(--color-text-secondary); font-weight: 600;
}
.erp-hub-card-detail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.erp-hub-card-detail-dot-present { background: #006400; }
.erp-hub-card-detail-dot-absent { background: var(--color-error); }
.erp-hub-card-detail-dot-percent { background: #1471a8; }

/* ---------------- Owner "My Schools" - per-School summary cards ---------------- */
.erp-school-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-lg); }
.erp-school-card {
    padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md);
    position: relative;
}
.erp-school-card-head { display: flex; align-items: flex-start; gap: var(--space-md); }
.erp-school-logo {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    background: rgba(11,61,145,0.08); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.erp-school-logo .material-symbols-rounded { font-size: 24px; color: var(--color-primary); }
.erp-school-card-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.erp-school-card-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.erp-school-card-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.erp-school-metrics {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm);
    padding: var(--space-md) 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
}
.erp-school-metric { text-align: center; }
.erp-school-metric-value { font-size: 18px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.erp-school-metric-label { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 2px; }
.erp-school-classes-row { display: flex; gap: var(--space-lg); font-size: 12.5px; color: var(--color-text-secondary); }
.erp-school-footer { display: flex; align-items: center; gap: var(--space-sm); }
.erp-school-footer .erp-btn { flex: 1; }
.erp-school-more-wrap { position: relative; flex-shrink: 0; }
.erp-school-more-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--color-divider);
    background: var(--color-surface); cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--color-text-secondary);
}
.erp-school-more-btn:hover { background: rgba(11,61,145,0.06); color: var(--color-primary); }
.erp-school-more-menu {
    position: absolute; right: 0; bottom: 46px; min-width: 170px; z-index: 20; overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-divider);
    border-radius: 10px; box-shadow: var(--shadow-card);
}
.erp-school-more-menu button {
    display: block; width: 100%; text-align: left; padding: 10px 14px; border: none;
    background: none; font-size: 13px; color: var(--color-text-primary); cursor: pointer;
}
.erp-school-more-menu button:hover { background: rgba(11,61,145,0.06); }
.erp-hub-title { font-weight: 700; font-size: 15px; color: var(--color-text-primary); margin-bottom: 4px; }
.erp-hub-subtitle { font-size: 12.5px; color: var(--color-text-secondary); margin-bottom: var(--space-md); min-height: 32px; }
.erp-hub-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--radius-button);
    font-size: 13px; font-weight: 600; color: white; border: none; cursor: pointer;
    margin-bottom: var(--space-sm);
    position: relative; overflow: hidden;
    transition: filter var(--motion-fast) ease;
}
.erp-hub-btn:hover { filter: brightness(0.9); }
.erp-hub-btn-purple { background: #6F42C1; }
.erp-hub-btn-green { background: var(--color-success); }
.erp-hub-btn-blue { background: var(--color-secondary); }
.erp-hub-btn-amber { background: var(--color-warning); }
.erp-hub-count { font-size: 12px; font-weight: 700; }
.erp-hub-count-purple { color: #6F42C1; }
.erp-hub-count-green { color: #006400; }
.erp-hub-count-blue { color: #1471a8; }
.erp-hub-count-amber { color: #a15c00; }

.erp-modal-overlay {
    position: fixed; inset: 0; background: rgba(10, 25, 47, 0.5);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: var(--space-xl);
    animation: erp-fade-in 0.15s ease;
}
.erp-modal {
    background: var(--color-surface);
    border-radius: var(--radius-dialog);
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-dialog);
    animation: erp-slide-up 0.18s ease;   /* one-shot entrance only */
    position: relative;
}
.erp-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-divider);
}
.erp-modal-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin: 0; }
.erp-modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    color: var(--color-text-secondary); transition: background 0.15s ease;
}
.erp-modal-close:hover { background: var(--color-background); }
.erp-modal-close .material-symbols-rounded { font-size: 18px; }
.erp-modal-body { padding: var(--space-xl); }
.erp-modal-footer {
    display: flex; justify-content: flex-end; gap: var(--space-sm);
    padding: var(--space-standard) var(--space-xl);
    border-top: 1px solid var(--color-divider);
}
@keyframes erp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes erp-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- Smart Greetings - Event Celebration Popup ---------------- */
.erp-celebration-overlay {
    position: fixed; inset: 0; background: rgba(10, 25, 47, 0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1200; padding: var(--space-xl);
    animation: erp-fade-in 0.2s ease;
}
.erp-celebration-card {
    position: relative;
    width: 440px; max-width: 100%;
    background: linear-gradient(165deg, #fff8f2 0%, #fff 55%);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(10, 25, 47, 0.35);
    padding: 40px 32px 32px;
    text-align: center;
    overflow: hidden;
    animation: erp-slide-up 0.25s ease;
}
.erp-celebration-anniversary { background: linear-gradient(165deg, #f2f9ff 0%, #fff 55%); }
.erp-celebration-special { background: linear-gradient(165deg, #f3fff2 0%, #fff 55%); }
.erp-celebration-decor {
    position: absolute; border-radius: 50%; opacity: 0.35; pointer-events: none;
}
.erp-celebration-decor-1 { width: 140px; height: 140px; top: -60px; left: -50px; background: radial-gradient(circle, #ffb6c1, transparent 70%); }
.erp-celebration-decor-2 { width: 120px; height: 120px; bottom: -50px; right: -40px; background: radial-gradient(circle, #ffe08a, transparent 70%); }
.erp-celebration-decor-3 { width: 90px; height: 90px; top: 40%; right: -35px; background: radial-gradient(circle, #b3e5ff, transparent 70%); }
.erp-celebration-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(10, 25, 47, 0.06); border: none; cursor: pointer;
    color: var(--color-text-secondary); transition: background 0.15s ease;
}
.erp-celebration-close:hover { background: rgba(10, 25, 47, 0.12); }
.erp-celebration-close .material-symbols-rounded { font-size: 18px; }
.erp-celebration-icon { position: relative; z-index: 1; font-size: 52px; line-height: 1; margin-bottom: 6px; }
.erp-celebration-title { position: relative; z-index: 1; font-size: 21px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 4px; }
.erp-celebration-sender {
    position: relative; z-index: 1; display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: #a15c00; background: rgba(255, 152, 0, 0.14);
    padding: 3px 12px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.erp-celebration-message {
    position: relative; z-index: 1;
    font-size: 14.5px; line-height: 1.9; color: var(--color-text-primary);
    white-space: normal; margin-bottom: 26px; text-align: center;
}
.erp-celebration-btn {
    position: relative; z-index: 1;
    background: var(--color-primary-fill); color: #fff; border: none;
    font-size: 14px; font-weight: 700; padding: 10px 32px;
    border-radius: var(--radius-pill); cursor: pointer; transition: opacity 0.15s ease;
}
.erp-celebration-btn:hover { opacity: 0.9; }

/* ---------------- Badges (PB-03 §5 Status Badges) ----------------
   Look + colours are defined once, in the Design System status vocabulary
   (end of file): active/success, inactive/danger, pending/warning, info, and
   withdrawn/neutral (a permanent exit - grey, distinct from Inactive red). */

/* ---------------- Table ---------------- */
.erp-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.erp-table th { text-align: start; font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: #FFFFFF; background: var(--color-primary-fill); padding: var(--space-md) var(--space-standard); border-bottom: 1px solid var(--color-divider); }
.erp-table td { padding: var(--space-md) var(--space-standard); border-bottom: 1px solid var(--color-divider); font-size: 13.5px; color: var(--color-text-primary); }
.erp-table tbody tr { transition: background 0.1s ease; }
.erp-table tbody tr:hover { background: rgba(11,61,145,0.025); }
.erp-table tbody tr:last-child td { border-bottom: none; }
.erp-table thead tr.erp-table-filter-row th { padding: 6px var(--space-standard) var(--space-sm); background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.erp-table-col-filter { width: 100%; box-sizing: border-box; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--color-text-primary); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-input, 6px); padding: 5px 8px; }

/* ---------------- Row Actions dropdown (table rows with a consolidated "Actions" menu,
   e.g. Admissions) - same visual treatment as Owner/MySchools.razor's more-options menu,
   just a table-generic name and opens downward under its trigger button. ---------------- */
.erp-row-actions { position: relative; display: inline-block; }
.erp-row-actions-menu {
    position: absolute; right: 0; top: calc(100% + 4px); min-width: 190px; z-index: 30; overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-divider);
    border-radius: 10px; box-shadow: var(--shadow-card);
}
.erp-row-actions-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 14px; border: none;
    background: none; font-size: 13px; color: var(--color-text-primary); cursor: pointer;
}
.erp-row-actions-menu button:hover { background: rgba(11,61,145,0.06); }
.erp-row-actions-menu button.erp-row-actions-danger { color: var(--color-error); }
.erp-row-actions-menu button.erp-row-actions-danger:hover { background: rgba(139,0,0,0.06); }

/* A Table that hosts a Row Actions dropdown opts out of the default overflow:hidden (only
   needed elsewhere to clip the header's background to the table's rounded corners) so the
   open menu is never cut off against the table's own edge - the same rounded-corner look is
   restored explicitly on the four outer cells instead. */
.erp-table.erp-table-menu-safe { overflow: visible; }
.erp-table.erp-table-menu-safe thead tr:first-child th:first-child { border-top-left-radius: var(--radius-card); }
.erp-table.erp-table-menu-safe thead tr:first-child th:last-child { border-top-right-radius: var(--radius-card); }
.erp-table.erp-table-menu-safe tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-card); }
.erp-table.erp-table-menu-safe tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-card); }
.erp-table-col-filter::placeholder { color: var(--color-text-disabled); font-weight: 400; }
.erp-table-col-filter:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 2px rgba(11,61,145,0.10); }

/* ---------------- Empty / Error State (PB-05 §16-17) ---------------- */
.erp-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: var(--space-section) var(--space-xl); gap: var(--space-sm);
    color: var(--color-text-secondary);
}
.erp-empty-state .material-symbols-rounded { font-size: 42px; color: var(--color-text-disabled); margin-bottom: var(--space-xs); }
.erp-empty-state-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.erp-empty-state-message { font-size: 13px; max-width: 320px; }

.erp-error-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-section) var(--space-xl); gap: var(--space-sm); }
.erp-error-state .material-symbols-rounded { font-size: 42px; color: var(--color-error); }

/* ---------------- Skeleton / Loading ---------------- */
.erp-skeleton { background: linear-gradient(90deg, var(--color-divider) 25%, #EEF1F6 37%, var(--color-divider) 63%); background-size: 400% 100%; animation: erp-shimmer 1.4s ease infinite; border-radius: var(--radius-input); }
@keyframes erp-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.erp-spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid var(--color-divider); border-top-color: var(--color-primary);
    animation: erp-spin 0.7s linear infinite; margin: 0 auto;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }
.erp-loading-row { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-xl); color: var(--color-text-secondary); font-size: 13px; }

/* App-shell boot splash (App.razor) - shown only until the Blazor circuit is
   up, then removed by blazor-boot.js. This is the "authentication
   initializing" state: a valid session is being restored from
   ProtectedLocalStorage and must NOT be drawn as the Login page. */
#app-boot-splash {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-background);
}
#app-boot-splash .erp-spinner { width: 34px; height: 34px; }
.erp-app-authorizing {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; width: 100%;
    background: var(--color-background);
}
.erp-app-authorizing .erp-spinner { width: 34px; height: 34px; }

/* ---------------- Login ---------------- */
.erp-login-wrapper {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; width: 100%;
    background-color: var(--color-background);
    background-image: url('/images/app-background.jpg');
    /* [V2.6 perf] 21 KB WebP where supported (was a 201 KB image), JPEG otherwise. */
    background-image: image-set(url('/images/app-background.webp') type('image/webp'), url('/images/app-background.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: var(--space-xl);
}
.erp-login-card { width: 400px; max-width: 100%; box-shadow: var(--shadow-card-hover); border: none; padding: var(--space-section) var(--space-xl); }
.erp-login-logo {
    width: 68px; height: 68px; border-radius: 20px;
    background: var(--gradient-brand);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-standard);
    box-shadow: var(--shadow-fab);
    overflow: hidden;
}
.erp-login-logo-img { background: transparent; padding: 0; }
.erp-login-logo img { width: 118%; height: 118%; object-fit: cover; border-radius: 50%; }
.erp-login-logo .material-symbols-rounded { font-size: 34px; color: white; }
.erp-login-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: var(--color-text-primary); text-align: center; }
.erp-login-tagline { font-size: 12.5px; color: var(--color-text-secondary); text-align: center; letter-spacing: 0.3px; margin-bottom: var(--space-section); }

/* ---- Split-layout Login (logo left, form right) ---- */
.erp-login-card-split {
    width: 780px; max-width: 100%; box-shadow: var(--shadow-card-hover); border: none; padding: 0;
    display: grid; grid-template-columns: 340px 1fr; overflow: hidden;
}
.erp-login-brand-panel {
    background: var(--color-surface);
    border-inline-end: 1px solid var(--color-divider);
    display: flex; align-items: center; justify-content: center; padding: var(--space-section);
}
.erp-login-logo-circle {
    width: 220px; height: 220px; border-radius: 50%;
    overflow: hidden; box-shadow: 0 4px 16px rgba(10,25,47,0.12);
    background: var(--color-surface);
    display: flex; align-items: center; justify-content: center;
}
.erp-login-logo-circle img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 50%; }
/* The RIC wordmark is wide and blue on transparent - shown whole, on a white plate in both themes. */
.erp-login-logo { width: 100%; max-width: 290px; background: #fff; border-radius: var(--radius-card, 12px); padding: 10px; }
.erp-login-logo img { display: block; width: 100%; height: auto; }
.erp-login-form-panel { padding: var(--space-section) var(--space-xl); display: flex; flex-direction: column; justify-content: center; }
.erp-login-form-panel .erp-login-title { text-align: left; font-size: 24px; }
.erp-login-form-panel .erp-login-tagline { text-align: left; }
.erp-field-password { position: relative; }
.erp-field-password .erp-input { padding-right: 42px; }
.erp-password-toggle {
    position: absolute; right: 10px; top: 12px; background: none; border: none; cursor: pointer;
    color: var(--color-text-secondary); display: flex; align-items: center; padding: 4px;
}
.erp-password-toggle .material-symbols-rounded { font-size: 20px; }
.erp-validation-summary { margin: 4px 0 var(--space-md); padding: 0; list-style: none; }
.erp-validation-summary ul { margin: 0; padding: 0; list-style: none; }
.erp-validation-summary li {
    background: rgba(139,0,0,0.08); color: var(--color-error);
    border: 1px solid rgba(139,0,0,0.3); border-radius: 8px;
    padding: 8px 12px; margin-bottom: 6px; font-size: 12.5px;
    display: flex; align-items: center; gap: 6px;
}
.erp-validation-summary li::before {
    content: "error"; font-family: "Material Symbols Rounded"; font-size: 15px; flex-shrink: 0;
}
.validation-message { color: var(--color-error); font-size: 11.5px; margin-top: 2px; display: block; }

/* ---- Simple CSS bar charts for Reports (no external JS library) ---- */
.erp-chart-bars {
    display: flex; align-items: flex-end; gap: 4px; height: 140px;
    padding: var(--space-sm); background: var(--color-background); border-radius: 10px;
    overflow-x: auto;
}
.erp-chart-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 22px; flex: 1; }
.erp-chart-bar { width: 14px; min-height: 2px; background: var(--gradient-brand); border-radius: 4px 4px 0 0; transition: height 0.2s ease; position: relative; overflow: hidden; }
.erp-chart-bar-label { font-size: 9px; color: var(--color-text-secondary); margin-top: 4px; }
/* [V2.4] The looping "travelling light" inside every chart bar was removed -
   bars still grow in once when the chart appears. */
.erp-progress-track { width: 100%; height: 8px; background: var(--color-background); border-radius: 4px; overflow: hidden; }
.erp-progress-fill { height: 100%; background: var(--gradient-brand); border-radius: 4px; transition: width 0.2s ease; }
.erp-donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.erp-donut-legend-item { display: flex; align-items: center; gap: 6px; }
.erp-donut-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.erp-login-footer-note {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    margin-top: var(--space-md); font-size: 12px; color: var(--color-text-secondary);
}
.erp-login-forgot-row { display: flex; justify-content: flex-end; margin: -6px 0 var(--space-md); }
.erp-link-button {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--color-secondary);
    font-family: inherit; text-decoration: none;
}
.erp-link-button:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .erp-login-card-split { grid-template-columns: 1fr; }
    .erp-login-brand-panel { padding: var(--space-xl); }
    .erp-login-logo-circle { width: 120px; height: 120px; }
    .erp-login-logo { max-width: 240px; }
    .erp-login-form-panel .erp-login-title, .erp-login-form-panel .erp-login-tagline { text-align: center; }
}

/* ============================================================================
   Interactive polish: hover animations, ripple buttons, avatars, sparklines.
   ============================================================================ */

/* [V2.4] The ambient multi-colour "running light" (erp-card-chase) that orbited
   every card, tabs card and modal non-stop was removed - cards are now styled
   once, in the Design System at the end of this file. */
.erp-swing-hover { transition: box-shadow var(--motion-fast) ease, background var(--motion-fast) ease; position: relative; }
.erp-swing-hover:hover { box-shadow: var(--shadow-card-hover); }

/* Ripple: a soft circle that expands from the click point, clipped to the button shape. */
.erp-btn-ripple { position: relative; overflow: hidden; }
.erp-ripple-dot {
    position: absolute; border-radius: 50%;
    background: rgba(11,61,145,0.16);
    transform: scale(0);
    animation: erp-ripple-anim 0.55s ease-out;
    pointer-events: none;
}
@keyframes erp-ripple-anim { to { transform: scale(2.6); opacity: 0; } }

/* Avatar with initials or a photo, used anywhere a person needs a circular badge. */
.erp-avatar-circle {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gradient-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    background-size: cover; background-position: center;
}
.erp-name-cell {
    display: inline-flex; align-items: center; gap: 10px; font-weight: 600;
    cursor: pointer; padding: 4px 10px 4px 4px; margin: -4px 0 -4px -4px;
    border-radius: 999px;
}
.erp-name-cell { transition: background var(--motion-fast) ease; }
.erp-name-cell:hover { background: rgba(11,61,145,0.07); }
.erp-name-cell:hover .erp-avatar-circle { box-shadow: 0 0 0 3px rgba(11,61,145,0.14); }

/* Photo upload circle (Owner / person profile photo). */
.erp-photo-upload {
    width: 84px; height: 84px; border-radius: 50%;
    border: 2px dashed var(--color-divider);
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer; margin: 0 auto;
    background-size: cover; background-position: center;
    color: var(--color-text-disabled);
    transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.erp-photo-upload:hover { border-color: var(--color-primary); color: var(--color-primary); }
.erp-photo-upload.has-photo { border-style: solid; }
.erp-photo-upload .material-symbols-rounded { font-size: 26px; }
.erp-photo-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--gradient-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid var(--color-surface);
}
.erp-photo-badge .material-symbols-rounded { font-size: 14px; }
.erp-photo-upload-input { display: none; }
.erp-photo-hint { text-align: center; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 8px; }

/* Sparkline (dashboard KPI tiles). [V2.4] Static: solid trend line + endpoint
   dot in the tile's accent colour - the flowing dashes and pulsing dot/halo
   were three never-ending animations per card. */
.erp-spark-wrap { margin-top: 10px; height: 42px; }
.erp-spark-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.erp-spark-halo { opacity: 0.18; }

/* ============================================================================
   Parent Dashboard: real-data charts (donut / ring / flowing progress bar).
   All values come from data the page already fetches — nothing here calls a
   new endpoint or invents a number.
   ============================================================================ */

/* Multi-segment donut (Attendance History: Present/Absent/Late/Leave/Half-Day). */
.erp-donut-wrap {
    position: relative; width: 132px; height: 132px; margin: 0 auto;
    animation: erp-pop-in 0.5s cubic-bezier(.2,.8,.3,1.3) both;
}
@keyframes erp-pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.erp-donut-wrap svg { position: relative; z-index: 1; width: 100%; height: 100%; transform: rotate(-90deg); }
.erp-donut-wrap svg circle { transition: stroke-width 0.2s ease; }
/* [V2.4] Kept as a soft static halo - it no longer spins forever. */
.erp-donut-glow {
    position: absolute; inset: -6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(11,61,145,0.10) 55%, transparent 72%);
    z-index: 0;
}
.erp-donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 2; pointer-events: none;
}
.erp-donut-center-value { font-size: 24px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.erp-donut-center-label { font-size: 10px; color: var(--color-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }

/* Shared legend for every real-data chart on the Parent Dashboard (donut,
   bar, trend line) — a tidy, evenly-aligned grid instead of a loose wrap. */
.erp-chart-legend {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-divider);
}
.erp-chart-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-secondary); font-weight: 500; }
.erp-chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.erp-chart-legend-value { margin-inline-start: auto; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* Y-axis percentage labels, shared by the bar chart and the trend line. */
.erp-chart-with-axis { display: flex; gap: 8px; }
.erp-chart-yaxis {
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: 10px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
    padding: 2px 0; flex-shrink: 0; width: 26px; text-align: right;
}
.erp-chart-plot { flex: 1; min-width: 0; }

/* Single-value progress ring (Result percentage per exam). */
.erp-ring-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.erp-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.erp-ring-track { fill: none; stroke: var(--color-divider); stroke-width: 7; }
.erp-ring-fill { fill: none; stroke-width: 7; stroke-linecap: round; animation: erp-ring-fill-anim 1s cubic-bezier(.2,.8,.3,1) 0.1s both; }
@keyframes erp-ring-fill-anim { from { stroke-dashoffset: var(--ring-circumference); } to { stroke-dashoffset: var(--ring-offset); } }
.erp-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--color-text-primary); }

/* Progress bar (Fee paid vs billed) - grows in once, no looping shimmer. */
.erp-flow-bar-track { height: 10px; border-radius: 999px; background: var(--color-background); overflow: hidden; position: relative; }
.erp-flow-bar-fill {
    height: 100%; border-radius: 999px; width: var(--flow-target, 0%);
    background: var(--color-success);
    animation: erp-flow-bar-grow 0.9s cubic-bezier(.2,.8,.3,1) both;
}
.erp-flow-bar-fill.is-overdue { background: var(--color-error); }
@keyframes erp-flow-bar-grow { from { width: 0%; } }

/* Parent Dashboard: 2-column overview layout (My Children + Notifications stacked on the
   left, so the left column's total height naturally balances against the charts column
   on the right, instead of 3 uneven columns of very different heights). */
.erp-parent-grid {
    display: grid; grid-template-columns: 340px 1fr; gap: var(--space-lg);
    align-items: start;
}
@media (max-width: 1100px) {
    .erp-parent-grid { grid-template-columns: 1fr; }
}
.erp-parent-col-heading { font-size: 14px; font-weight: 700; margin: 0 0 var(--space-md) 0; }
.erp-parent-child-card { cursor: pointer; }
.erp-parent-child-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.erp-parent-stat { background: var(--color-background); border-radius: 10px; padding: 8px 10px; }
.erp-parent-stat-label { font-size: 10.5px; color: var(--color-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.erp-parent-stat-value { font-size: 16px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.erp-parent-child-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Academic Performance Overview (Parent Dashboard) — grouped bars per exam,
   one bar per subject, height = that subject's real percentage. */
.erp-perf-bars {
    display: flex; align-items: flex-end; justify-content: center; gap: 32px;
    overflow-x: auto; padding-bottom: 8px; min-height: 156px;
    background-image: repeating-linear-gradient(to top, var(--color-divider) 0, var(--color-divider) 1px, transparent 1px, transparent 35px);
    background-position: 0 8px; background-size: 100% 140px; background-repeat: no-repeat;
}
.erp-perf-group { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.erp-perf-group-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.erp-perf-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.erp-perf-bar-value { font-size: 9.5px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.erp-perf-bar { width: 16px; border-radius: 4px 4px 0 0; height: var(--bar-h, 0); animation: erp-perf-bar-grow 0.8s cubic-bezier(.2,.8,.3,1) both; position: relative; overflow: hidden; }
@keyframes erp-perf-bar-grow { from { height: 0; } }
.erp-perf-group-label { font-size: 10.5px; color: var(--color-text-secondary); font-weight: 600; max-width: 100px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Attendance Trend Line (Parent Dashboard) — one line per child, months on X. */
.erp-trend-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: erp-trend-draw 1.1s ease forwards; }
@keyframes erp-trend-draw { to { stroke-dashoffset: 0; } }

/* Parent Dashboard notifications list. */
.erp-notification-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px; border-radius: 10px; border: 1px solid var(--color-divider);
    position: relative;
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.erp-notification-row:hover { background: rgba(11,61,145,0.03); border-color: rgba(11,61,145,0.35); }
.erp-notification-icon {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.erp-notification-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--color-info);
    flex-shrink: 0; margin-top: 4px;
    box-shadow: 0 0 0 3px rgba(41,182,246,0.18);
}

/* ============================================================================
   Super Admin Dashboard: real-data Growth Overview / System Summary layout.
   ============================================================================ */
.erp-sa-grid {
    display: grid; grid-template-columns: 1.8fr 1.1fr 0.9fr; gap: var(--space-lg);
    align-items: stretch; margin-top: var(--space-lg);
}
@media (max-width: 1100px) {
    .erp-sa-grid { grid-template-columns: 1fr; }
}
.erp-sa-summary-donuts { display: flex; justify-content: space-around; gap: 8px; }
.erp-sa-mini-donut { width: 100px; height: 100px; }

/* Dual y-axis wrapper (Schools left scale, Students right scale) for the
   Schools & Students Overview growth chart — both scales are real, honestly
   rounded maxima computed from the actual counts, never invented. */
.erp-dual-axis-wrap { display: flex; gap: 8px; align-items: stretch; }
.erp-dual-yaxis {
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: 10px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
    padding: 2px 0; flex-shrink: 0; width: 32px; text-align: right;
}
.erp-dual-yaxis-right { text-align: left; }

/* ============================================================================
   Owners page: premium cards (Total Schools / Active Students / Platform Fee)
   with a center-modal detail view + editable per-Owner fee rate.
   ============================================================================ */
.erp-owner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); }
.erp-owner-card {
    padding: var(--space-lg); cursor: pointer;
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
}
.erp-owner-card-head { display: flex; align-items: flex-start; gap: 12px; }
.erp-owner-avatar {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: #fff;
    background: var(--gradient-brand); background-size: cover; background-position: center;
}
.erp-owner-name-block { flex: 1; min-width: 0; }
.erp-owner-name { font-size: 15px; font-weight: 700; letter-spacing: -0.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-owner-company { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-owner-mobile { font-size: 11.5px; color: var(--color-text-disabled); margin-top: 5px; display: flex; align-items: center; gap: 5px; }

.erp-owner-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.erp-owner-stat { background: var(--color-background); border-radius: 12px; padding: 10px 12px; }
.erp-owner-stat .erp-owner-stat-lbl { font-size: 10px; color: var(--color-text-secondary); font-weight: 650; text-transform: uppercase; letter-spacing: .3px; }
.erp-owner-stat .erp-owner-stat-val { font-size: 16.5px; font-weight: 800; margin-top: 3px; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.erp-owner-stat.fee-in .erp-owner-stat-val { color: var(--color-success); }
.erp-owner-stat.fee-out .erp-owner-stat-val { color: var(--color-error); }

.erp-owner-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid var(--color-divider);
    font-size: 12px; color: var(--color-secondary); font-weight: 650;
}
.erp-owner-card-footer .material-symbols-rounded { font-size: 16px; transition: transform 0.2s ease; }
.erp-owner-card:hover .erp-owner-card-footer .material-symbols-rounded { transform: translateX(3px); }

/* Detail modal content */
.erp-owner-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--space-md); }
.erp-owner-detail-stat { background: var(--color-background); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.erp-owner-detail-stat .erp-owner-detail-icon {
    width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
}
.erp-owner-detail-stat .erp-owner-detail-icon .material-symbols-rounded { font-size: 16px; }
.erp-owner-detail-stat .erp-owner-detail-lbl { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; }
.erp-owner-detail-stat .erp-owner-detail-val { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.erp-owner-detail-stat.green .erp-owner-detail-val { color: var(--color-success); }
.erp-owner-detail-stat.red .erp-owner-detail-val { color: var(--color-error); }

.erp-owner-school-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--color-background); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px;
}
.erp-owner-school-row .erp-owner-school-name { font-size: 13px; font-weight: 650; }
.erp-owner-school-row .erp-owner-school-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }

.erp-fee-plan-box {
    background: linear-gradient(160deg, rgba(30,136,229,0.08), transparent 70%);
    border: 1px solid var(--color-divider); border-radius: 16px; padding: var(--space-lg);
}
.erp-fee-plan-current { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.erp-fee-plan-current .erp-fee-plan-amt { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.erp-fee-plan-current .erp-fee-plan-unit { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; }
.erp-fee-plan-note { font-size: 11.5px; color: var(--color-text-disabled); margin-bottom: 14px; }

.erp-rate-edit-row { display: flex; align-items: center; gap: 10px; }
.erp-rate-input-wrap { position: relative; flex: 1; }
.erp-rate-input-wrap span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--color-text-secondary); font-weight: 650; }
.erp-rate-input-wrap input { padding-left: 30px !important; font-weight: 700; }

.erp-fee-preview-line { font-size: 12px; color: var(--color-text-secondary); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-divider); }

/* ============================================================================
   Standalone search bar - a clearly-a-search-box pill (icon + real
   placeholder + visible border/shadow), distinct from the floating-label
   form-field style used inside Create/Edit forms.
   ============================================================================ */
.erp-search-bar { position: relative; max-width: 340px; margin-bottom: var(--space-lg); }
.erp-search-bar > .material-symbols-rounded {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--color-text-secondary); pointer-events: none;
}
.erp-search-bar input {
    width: 100%; padding: 11px 14px 11px 42px; border-radius: 999px;
    border: 1.5px solid var(--color-divider); background: var(--color-surface);
    color: var(--color-text-primary); font-size: 13.5px; font-family: inherit;
    box-shadow: var(--shadow-card);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.erp-search-bar input:focus {
    outline: none; border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(30,136,229,0.14);
}
.erp-search-bar input::placeholder { color: var(--color-text-disabled); }
.erp-fee-preview-line strong { color: var(--color-text-primary); }

/* Per-User Permission override rows (Super Admin - Users screen). */
.erp-permission-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s ease;
}
.erp-permission-row:hover { background: var(--color-background); }
.erp-permission-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-secondary); cursor: pointer; flex-shrink: 0; }

/* Audience Role chip checkboxes (Notices - Super Admin platform notice targeting). */
.erp-role-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-divider); background: var(--color-surface);
    font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.erp-role-chip input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-secondary); cursor: pointer; }
.erp-role-chip.is-selected { border-color: var(--color-secondary); background: rgba(30,136,229,0.08); color: var(--color-text-primary); font-weight: 600; }

/* Owner Dashboard - Quick Reports / Quick Actions button grid. */
.erp-owner-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
.erp-owner-quick-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: var(--space-md); color: var(--color-text-primary); text-decoration: none;
    font-size: 12.5px; font-weight: 600; text-align: center;
}
.erp-owner-quick-btn .material-symbols-rounded { font-size: 24px; }
.erp-permission-name { font-size: 13px; flex: 1; }

/* Facebook-style searchable phone country-code picker (CountryCodeSelect.razor). */
.erp-phone-input-row { display: flex; gap: 8px; align-items: stretch; }
.erp-country-code-select { position: relative; flex: 0 0 auto; }
.erp-country-code-trigger {
    display: flex; align-items: center; gap: 6px; height: 100%;
    padding: var(--space-md) var(--space-sm); border-radius: var(--radius-input);
    border: 1.5px solid var(--color-divider); background: var(--color-surface);
    font-size: 13.5px; font-family: inherit; color: var(--color-text-primary);
    cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}
.erp-country-code-trigger:hover { border-color: var(--color-secondary); }
.erp-country-code-caret { font-size: 16px !important; color: var(--color-text-secondary); }
.erp-country-flag { font-size: 16px; line-height: 1; }
/* Real flag image (flagcdn.com) instead of flag emoji - Windows 10's bundled
   emoji font has no flag glyphs and falls back to plain "PK"-style text. */
.erp-country-flag-img { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.erp-phone-number-input { flex: 1; min-width: 0; }
.erp-country-code-backdrop { position: fixed; inset: 0; z-index: 1090; background: transparent; }
.erp-country-code-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1091;
    width: max(100%, 280px); max-width: 82vw; background: var(--color-surface);
    border: 1px solid var(--color-divider); border-radius: var(--radius-input);
    box-shadow: 0 12px 32px rgba(15,23,42,0.18); overflow: hidden;
}
.erp-country-code-search {
    position: relative; padding: var(--space-sm); border-bottom: 1px solid var(--color-divider);
}
.erp-country-code-search .material-symbols-rounded {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    font-size: 17px; color: var(--color-text-secondary); pointer-events: none;
}
.erp-country-code-search input {
    width: 100%; padding: 8px 10px 8px 34px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-divider); background: var(--color-background);
    font-size: 13px; font-family: inherit; color: var(--color-text-primary);
}
.erp-country-code-search input:focus { outline: none; border-color: var(--color-secondary); }
.erp-country-code-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.erp-country-code-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-radius: 10px; cursor: pointer; font-size: 13px;
}
.erp-country-code-item:hover { background: var(--color-background); }
.erp-country-code-item.is-selected { background: rgba(11,61,145,0.08); font-weight: 600; }
.erp-country-code-name { flex: 1; color: var(--color-text-primary); }
.erp-country-code-dial { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.erp-country-code-empty { padding: var(--space-md); text-align: center; font-size: 12.5px; color: var(--color-text-secondary); }

/* Generic searchable dropdown (SearchableTextSelect.razor) - used by AddressCascadeSelect for Country/Province. */
.erp-select-wrap { position: relative; width: 100%; }
.erp-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
    padding: var(--space-md) var(--space-standard); border-radius: var(--radius-input);
    border: 1.5px solid var(--color-divider); background: var(--color-surface);
    font-size: 13.5px; font-family: inherit; color: var(--color-text-primary);
    cursor: pointer; transition: border-color 0.18s ease;
}
.erp-select-trigger:hover:not(.is-disabled) { border-color: var(--color-secondary); }
.erp-select-trigger.is-disabled { cursor: not-allowed; background: var(--color-background); color: var(--color-text-disabled); }
.erp-select-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.erp-select-trigger-text.is-placeholder { color: var(--color-text-disabled); }

/* Country -> Province cascade + auto-generated Address preview (AddressCascadeSelect.razor). */
.erp-cascade-label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
.erp-address-preview {
    background: var(--color-background); border: 1.5px dashed var(--color-divider);
    border-radius: var(--radius-input); padding: var(--space-md) var(--space-standard);
}
.erp-address-preview-label {
    display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.erp-address-preview-text { font-size: 13.5px; color: var(--color-text-primary); line-height: 1.5; }
.erp-cascade-custom-input { margin-top: 6px; font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }

/* ============================================================================
   Mobile shell — easypaisa-inspired greeting header, quick-action grid,
   sliding KPI carousel, in-app bottom nav, compact phone density.
   Desktop/tablet layout above is unchanged; everything phone-specific lives
   in the @media (max-width: 640px) block near the bottom of this section.
   ============================================================================ */

/* ---- Greeting header (replaces the old title / role / school topbar) ---- */
.app-topbar-greeting { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.app-topbar-hi {
    color: #fff; font-weight: 700; font-size: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar-sub {
    color: rgba(255,255,255,0.72); font-weight: 500; font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar-logout {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.10); border: none; color: #fff; cursor: pointer;
    transition: background 0.18s ease;
}
.app-topbar-logout:hover { background: rgba(255,255,255,0.20); }
.app-topbar-logout .material-symbols-rounded { font-size: 20px; }

/* ---- Quick-action tile grid (QuickActions.razor) ---- */
.erp-quick-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-md); margin-bottom: var(--space-lg);
}
.erp-quick-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-sm); padding: var(--space-lg) var(--space-md);
    color: var(--color-text-primary); text-align: center;
}
.erp-quick-tile-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(41,182,246,0.14); color: var(--color-primary);
}
.erp-quick-tile-icon .material-symbols-rounded { font-size: 22px; }
.erp-quick-tile-label { font-size: 12.5px; font-weight: 600; line-height: 1.2; }

/* ---- In-app bottom navigation (MobileBottomNav.razor) ----
   Hidden everywhere by default; only shown inside the Flutter WebView
   (<html class="erp-in-app">) at phone width — see the @media block below. */
.erp-bottom-nav { display: none; }

@media (max-width: 640px) {
    /* ---- Compact density: ~22% tighter tokens + trimmed chrome ---- */
    :root {
        --space-xs: 3px;
        --space-sm: 6px;
        --space-md: 9px;
        --space-standard: 12px;
        --space-lg: 14px;
        --space-xl: 16px;
        --space-section: 20px;
        --radius-card: 12px;
        --radius-button: 12px;
        --radius-dialog: 16px;
    }

    h1, .erp-h1 { font-size: 20px; }
    h2, .erp-h2 { font-size: 17px; }
    h3, .erp-h3 { font-size: 14px; }
    .erp-body { font-size: 13px; }
    .erp-caption { font-size: 11px; }

    .app-topbar { height: 54px; padding: 0 var(--space-standard); gap: var(--space-sm); }
    .app-topbar-avatar-wrap { width: 34px; height: 34px; }
    .app-topbar-avatar { width: 34px; height: 34px; font-size: 13px; }
    .app-topbar-avatar-online { display: none; }
    .app-topbar-hi { font-size: 13.5px; }
    .app-topbar-sub { font-size: 10.5px; }
    .app-topbar-logout { width: 32px; height: 32px; }
    .app-topbar-logout .material-symbols-rounded { font-size: 18px; }

    .app-content { padding: var(--space-md); max-width: none; }

    .erp-page-header { gap: var(--space-sm); margin-bottom: var(--space-md); }
    .erp-page-header-icon { display: none; }
    .erp-page-header-title { font-size: 15px; }
    .erp-page-header-subtitle { font-size: 11px; }

    .erp-tabs-body { padding: var(--space-md); }

    /* ---- Tab strips (e.g. Accounts: Chart of Accounts / Ledger / Trial
       Balance / Profit & Loss): the card is `overflow:hidden`, so on a narrow
       phone the last tab(s) were simply clipped and unreachable. Let the strip
       scroll sideways instead, and tighten each tab so more of them fit. ---- */
    .erp-tabs-header {
        justify-content: flex-start;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .erp-tabs-header::-webkit-scrollbar { display: none; }
    .erp-tabs { flex-wrap: nowrap; column-gap: var(--space-md); }
    .erp-tab {
        flex: 0 0 auto; white-space: nowrap;
        font-size: 12.5px; padding-left: 2px; padding-right: 2px;
    }
    .erp-tab .material-symbols-rounded { font-size: 16px; }

    /* ---- Sliding KPI carousel: the KPI row becomes a horizontal
       scroll-snap strip on a phone (every Role's .erp-hub-row), auto-advanced
       by uiHelpers.js. ~2 cards visible at once, next card peeking. The
       vertical padding leaves room for the card shadow. ---- */
    .erp-hub-row {
        display: flex; flex-wrap: nowrap;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: var(--space-lg);
        margin-inline: calc(var(--space-md) * -1);
        padding: 6px var(--space-md) 10px;
        scrollbar-width: none;
    }
    .erp-hub-row::-webkit-scrollbar { display: none; }
    /* Fixed height so every carousel card is the same compact size and every
       sparkline lands on the same baseline. Cards WITH a sparkline stack from
       the top (sparkline pushed to the bottom by margin-top:auto); simple
       cards with no sparkline just centre their content so there's no big
       empty gap (e.g. the Leave Requests "Student Leave / Employee Leave"
       tiles). */
    /* Auto height with a 150px floor - the old fixed 118px was shorter than a
       card that carries BOTH a 3-item detail row (Present / Absent / %) AND a
       sparkline, so `overflow:hidden` sliced the graph (and often the last
       detail line) clean off the bottom on every Role's dashboard. Height is
       `auto` so the flex strip's default align-items:stretch makes every card
       match the tallest one - the sparklines keep a shared baseline. */
    .erp-hub-row > * { flex: 0 0 47%; min-height: 150px; height: auto; scroll-snap-align: start; }
    .erp-hub-row > .erp-hub-card { justify-content: center; }
    .erp-hub-row > .erp-hub-card:has(.erp-spark-wrap) { justify-content: flex-start; }

    .erp-hub-card { padding: var(--space-sm) var(--space-md) 10px; }
    /* Long KPI titles (e.g. "New Admissions (This Month)") clamp to 2 lines
       instead of stretching the card. */
    .erp-hub-card-title {
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; overflow: hidden;
    }
    .erp-hub-card-count { font-size: 15px; margin-top: 3px; }
    .erp-hub-card-title { font-size: 9px; }
    .erp-hub-card-subtitle { font-size: 8px; margin-top: 2px; }
    .erp-hub-card-detail { font-size: 8.5px; gap: 2px 6px; margin-top: 3px; }
    .erp-hub-icon { width: 30px; height: 30px; margin-bottom: 5px; }
    .erp-hub-icon .material-symbols-rounded { font-size: 15px; }
    .erp-hub-card-kpi .erp-hub-icon { width: 24px; height: 24px; }
    .erp-hub-card-kpi .erp-hub-icon .material-symbols-rounded { font-size: 13px; }
    .erp-hub-card-heading { gap: 5px; }
    /* Every card has a different amount of text above the sparkline, so the
       line lands at a different height per card. Pin it to the bottom of the
       card (flex column) so all sparklines sit on the same baseline. */
    .erp-hub-card .erp-spark-wrap { margin-top: auto; height: 34px; padding-top: 2px; }

    /* The Parent page header already says "My Children"; the duplicate section
       heading just eats space and was the thing the card glow overlapped. */
    .erp-parent-col-heading { display: none; }
    .erp-parent-grid { gap: var(--space-standard); }

    /* ---- Quick grid: exactly 3 clickable cards per row ---- */
    .erp-quick-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: var(--space-standard); }
    .erp-quick-tile { padding: var(--space-md) var(--space-xs); gap: var(--space-xs); }
    .erp-quick-tile-icon { width: 38px; height: 38px; }
    .erp-quick-tile-icon .material-symbols-rounded { font-size: 19px; }
    .erp-quick-tile-label { font-size: 10.5px; }

    /* ---- Bottom nav: only inside the mobile app. Same navy as the topbar.
       Its own bar area is ~42px (a touch shorter than the 54px topbar) plus
       the phone's home-indicator safe-area, which reads as roughly equal
       visual weight. ---- */
    .erp-in-app .erp-bottom-nav {
        display: flex; align-items: stretch;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        height: calc(42px + env(safe-area-inset-bottom, 0px));
        background-image: linear-gradient(180deg, #0B3D91 0%, #0A3480 100%);
        border-top: 1px solid rgba(255,255,255,0.12);
        box-shadow: 0 -2px 12px rgba(10,25,47,0.18);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .erp-in-app .app-content { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }

    .erp-bottom-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 1px; padding: 3px 2px; min-width: 0; cursor: pointer;
        color: rgba(255,255,255,0.66); background: none; border: none;
        text-decoration: none;
    }
    .erp-bottom-nav-item .material-symbols-rounded { font-size: 17px; }
    .erp-bottom-nav-label {
        font-size: 8.5px; font-weight: 600; line-height: 1;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .erp-bottom-nav-item.active { color: #fff; }
    .erp-bottom-nav-item.active .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

    /* ---- Keep the sticky topbar above everything, so no card is ever
       painted over it while the page scrolls. ---- */
    .app-topbar { z-index: 30; background-color: #0B3D91; }
    .erp-hub-card, .erp-card, .erp-tabs-card, .erp-resource-card { z-index: auto; }

    /* ---- Data tables: keep each cell on ONE line (readable) and let wide
       tables scroll sideways inside the card. Forcing every column to wrap
       broke words character-by-character and was unreadable. ---- */
    .erp-tabs-body, .erp-modal-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .erp-table { table-layout: auto; width: auto; min-width: 100%; }
    .erp-table th, .erp-table td {
        padding: 6px 8px; font-size: 11px; white-space: nowrap; vertical-align: middle;
    }
    .erp-table .erp-badge { font-size: 9.5px; padding: 2px 6px; }

    /* Chart of Accounts: let the (only) long column - the account name - wrap,
       so the table fits the phone width and every name shows in full instead
       of the row scrolling off-screen. Code + amount stay on one line. */
    .acct-chart-table { width: 100%; min-width: 0; }
    .acct-chart-table td:nth-child(2), .acct-chart-table th:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
    .acct-chart-table td:nth-child(3), .acct-chart-table th:nth-child(3) { text-align: right; }

    /* ---- Button rows (tabs like "Final Approval Needed" / "History"): every
       button in a flex row takes an equal share so none is huge / tiny. ---- */
    .erp-btn { font-size: 12px; padding: var(--space-sm) var(--space-md); }
    .erp-tabs-card [style*="display:flex"] > .erp-btn,
    .erp-tabs-body [style*="display:flex"] > .erp-btn {
        flex: 1 1 0; min-width: 0;
    }
}

/* ============================================================================
   Question Paper Generator - print template (A4 / RTL / Urdu)
   ============================================================================ */
.qp-toolbar {
    display: flex; gap: 10px; padding: 16px; background: var(--color-background);
    border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 5;
}
.qp-print-root {
    direction: rtl;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', serif;
    color: #000; background: #fff;
    max-width: 210mm; margin: 12px auto; padding: 16mm 14mm; line-height: 2.1;
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
}
.qp-header { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #000; padding-bottom: 8px; }
.qp-logo { width: 64px; height: 64px; object-fit: contain; }
.qp-school { flex: 1; text-align: center; }
.qp-school-name { font-size: 22px; font-weight: 700; }
.qp-school-address { font-size: 13px; }
.qp-title { text-align: center; font-size: 17px; font-weight: 700; margin: 10px 0 6px; }
.qp-meta-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 13px; border-bottom: 1px solid #000; padding-bottom: 6px; }

.qp-student-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.qp-student-table td { padding: 6px 8px; vertical-align: bottom; }
.qp-student-table .qp-fill { border-bottom: 1px dotted #000; min-width: 120px; }
.qp-digit-box { display: inline-block; width: 26px; height: 32px; border: 1px solid #000; margin-inline-end: 4px; vertical-align: middle; }
.qp-marks-box { display: inline-block; width: 54px; height: 30px; border: 1px solid #000; vertical-align: middle; }

.qp-section-heading { font-weight: 700; font-size: 14px; margin: 16px 0 6px; text-decoration: underline; }
.qp-mcq-list, .qp-q-list { margin: 0; padding-inline-start: 22px; }
.qp-mcq-list li, .qp-q-list li { margin-bottom: 10px; }
.qp-q-text { display: inline; }
.qp-q-marks { font-weight: 700; }
.qp-mcq-options { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 2px; }
.qp-mcq-option { min-width: 40%; }
.qp-answer-space { border-bottom: 1px dotted #000; height: 96px; }
.qp-answer-space-sm { height: 40px; }

.qp-key-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.qp-key-table th, .qp-key-table td { border: 1px solid #000; padding: 6px 10px; text-align: center; }

@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff; }
    .app-shell, .app-sidebar, .app-topbar, .app-main, .qp-noprint { display: none !important; }
    .qp-print-root { box-shadow: none; margin: 0; padding: 0; max-width: none; }
    .qp-answer-space { height: 90px; }
}

/* ============================================================================
   Connection-lost overlay (Blazor Server circuit reconnect) + offline hint.
   blazor-boot.js retries forever, so this only ever shows while the network is
   actually down - and it clears itself the moment the circuit is back.
   ============================================================================ */
.erp-reconnect {
    display: none;
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    align-items: center; justify-content: center;
    padding: 24px;
}
/* Blazor adds one of these classes to #components-reconnect-modal by id */
.erp-reconnect.components-reconnect-show,
.erp-reconnect.components-reconnect-failed,
.erp-reconnect.components-reconnect-rejected { display: flex; }
.erp-reconnect-card {
    background: var(--color-surface, #fff); color: var(--color-text-primary, #0f172a);
    border-radius: 16px; padding: 28px 26px; max-width: 340px; width: 100%;
    text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.erp-reconnect-spinner { width: 34px; height: 34px; margin: 0 auto 14px; display: block; }
.erp-reconnect-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.erp-reconnect-sub { font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary, #64748b); }
.erp-reconnect.components-reconnect-failed .erp-reconnect-title::after,
.erp-reconnect.components-reconnect-rejected .erp-reconnect-title::after {
    content: " — still trying"; font-weight: 400;
}

/* ---- Attendance Devices status dot ---- */
.adev-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--color-border); flex-shrink: 0; }
.adev-dot-online { background: #22c55e; }
.adev-dot-offline { background: #9ca3af; }
.adev-dot-error { background: #ef4444; }
.adev-dot-unknown { background: #f59e0b; }

/* ---- Module 11: Collect Fee workspace ---- */
.feecol-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-md); font-size: 12px; }
.feecol-step { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-background); color: var(--color-text-secondary); font-weight: 600; }
.feecol-step.is-done { background: rgba(11,61,145,0.10); color: var(--color-primary); }
.feecol-step.is-active { background: var(--color-primary-fill); color: #fff; }
.feecol-step-sep { color: var(--color-text-secondary); }
.feecol-amount-block { background: var(--color-background); border: 1px solid var(--color-divider); border-radius: 12px; padding: var(--space-md); }
.feecol-amount-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.feecol-chip, .feecol-method { border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text-primary); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.feecol-method { border-radius: 10px; padding: 9px 14px; }
.feecol-method .material-symbols-rounded, .feecol-chip .material-symbols-rounded { font-size: 16px; }
.feecol-chip.is-active, .feecol-method.is-active { background: var(--color-primary-fill); color: #fff; border-color: var(--color-primary); }
.feecol-link-btn { background: none; border: none; color: var(--color-primary); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; }
.feecol-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.feecol-status-chip .material-symbols-rounded { font-size: 16px; }
.erp-btn-block { width: 100%; justify-content: center; font-size: 15px; padding: 12px; }
.feeset-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.feeset-row:last-child { border-bottom: none; }

/* ---------------- Accounting: balance chip, bank list, voucher confirmation ---------------- */
.acct-balance-chip { margin: -4px 0 12px; padding: 8px 12px; background: var(--color-background); border: 1px solid var(--color-divider); border-radius: 10px; font-size: 13px; }
.acct-balance-chip strong { color: var(--color-text-primary); }

.acct-banks-card { padding: 14px 16px; margin-bottom: var(--space-lg); }
.acct-banks-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 8px; }
.acct-banks-list { display: flex; flex-direction: column; }
.acct-bank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.acct-bank-row:last-child { border-bottom: none; }
/* Long account names ("Cash Collected - Pending Hand-over (1005)") must wrap
   onto a second line instead of squeezing the amount to nothing / forcing the
   whole card to overflow sideways. */
.acct-bank-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.acct-bank-row > strong { flex-shrink: 0; white-space: nowrap; }

.voucher-result { text-align: center; padding: 8px 0 4px; }
.voucher-result-icon { font-size: 44px; color: var(--color-success); }
.voucher-result-no-label { margin-top: 8px; font-size: 12px; color: var(--color-text-secondary); }
.voucher-result-no { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }


/* ---------------- [V2.3] Inventory - Items & Setup ---------------- */
.inv-stats { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.inv-stat-clickable { cursor: pointer; }
.inv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.inv-toolbar-end { justify-content: flex-end; }
.inv-toolbar .erp-search-bar { margin-bottom: 0; }
.inv-toolbar-search { flex: 1 1 240px; max-width: none; }
.inv-toolbar-select { flex: 0 1 180px; width: auto; }
.inv-toolbar-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); margin: var(--space-sm) 0; }
.inv-toolbar-action { margin-left: auto; }
.inv-table-wrap { overflow-x: auto; }
.inv-table td { vertical-align: top; }
.inv-num { text-align: right; white-space: nowrap; }
.inv-code { font-weight: 700; white-space: nowrap; letter-spacing: 0.3px; }
.inv-item-name { font-weight: 600; }
.inv-col-item { min-width: 190px; }
.inv-item-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; max-width: 280px; overflow-wrap: anywhere; }
.inv-unit { font-size: 12px; color: var(--color-text-secondary); }
.inv-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.inv-icon-btn { padding: 4px 8px; line-height: 1; }
.inv-icon-btn .material-symbols-rounded { font-size: 17px; }
.inv-muted { font-size: 13px; color: var(--color-text-secondary); }
.inv-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.inv-settings { max-width: 420px; }
@media (max-width: 600px) {
    .inv-form-grid { grid-template-columns: 1fr; }
    .inv-toolbar-select { flex: 1 1 140px; }
    .inv-toolbar-action { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------------- [V2.3] Inventory - Module 2: Stock In ---------------- */
.si-card { margin-bottom: var(--space-lg); }
.si-row { cursor: pointer; }
.si-pill-primary { color: var(--color-primary); border-color: var(--color-primary); }
.si-history-btn { margin-left: 4px; vertical-align: middle; }
.si-section-title { font-weight: 700; font-size: 15px; margin: var(--space-md) 0 var(--space-sm); }
.si-num-input { width: 110px; text-align: right; padding: 6px 8px; }
.si-lines .erp-input { margin: 0; }
.si-lines .si-line-item { min-width: 200px; }
.si-qty { display: inline-flex; align-items: center; gap: 6px; }
.si-total-label { font-weight: 700; }
.si-total { font-weight: 700; font-size: 15px; }
.si-submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-divider); }
.si-inline-icon { font-size: 16px; vertical-align: text-bottom; }
.si-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.si-detail-no { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
.si-detail-status { text-align: right; }
.si-status-note { margin-top: 4px; }
.si-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-lg); margin-bottom: var(--space-md); font-size: 14px; }
.si-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.si-fact-wide { grid-column: 1 / -1; }
.si-fact-label { font-size: 12px; color: var(--color-text-secondary); }
.si-strong { font-weight: 700; }
.si-decision { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-divider); }
.si-decision-remarks { flex: 1 1 260px; margin-bottom: 0; }
.si-decision-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.si-timeline { list-style: none; margin: 0; padding: 0; }
.si-timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.si-timeline-item:last-child { border-bottom: none; }
.si-timeline-icon { font-size: 22px; color: var(--color-text-secondary); }
.si-timeline-approved .si-timeline-icon { color: var(--color-success); }
.si-timeline-rejected .si-timeline-icon { color: var(--color-error); }
.si-timeline-submitted .si-timeline-icon { color: var(--color-primary); }
.si-timeline-remarks { margin-top: 4px; font-size: 13px; }
@media (max-width: 600px) {
    .si-facts { grid-template-columns: 1fr; }
    .si-detail-status { text-align: left; }
    .si-decision-actions { margin-left: 0; width: 100%; }
    .si-decision-actions .erp-btn { flex: 1 1 auto; justify-content: center; }
    .si-submit-row .erp-btn { width: 100%; justify-content: center; }
    /* Stock In lines become stacked cards so nothing needs sideways scrolling. */
    .si-lines thead { display: none; }
    .si-lines, .si-lines tbody, .si-lines tr, .si-lines td { display: block; width: 100%; }
    .si-lines tr { border: 1px solid var(--color-divider); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
    .si-lines td { border: none; padding: 4px 0; text-align: left; }
    .si-lines td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
    .si-lines .si-num-input { width: 100%; text-align: left; }
    .si-lines .si-qty { display: flex; }
    .si-lines tfoot tr { border: none; padding: 0; }
    .si-lines tfoot td { display: inline-block; width: auto; }
}
/* Stock History (ledger) modal: a little wider, compact columns so Balance stays visible. */
.erp-modal:has(.si-ledger) { width: 720px; }
.si-ledger th, .si-ledger td { padding: 8px 10px; font-size: 13px; }

/* ---------------- [V2.3] Inventory - Module 3: Stock Out & Student Issue ---------------- */
a.so-stat-link { color: inherit; text-decoration: none; }
.so-toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.so-narrow { max-width: 420px; }
.so-extra { margin-top: var(--space-md); }
.so-line-warn { font-size: 12px; color: var(--color-error); margin-top: 2px; }
.so-free-check { margin: 0; white-space: nowrap; }
.so-btn-spinner { width: 14px; height: 14px; margin-right: 6px; vertical-align: middle; }
.so-row-reversed td { color: var(--color-text-secondary); text-decoration: line-through; }
.so-row-reversed td:last-child, .so-row-reversed td:nth-last-child(2), .so-row-reversed td:nth-child(6) { text-decoration: none; }
.so-picker .inv-toolbar { margin-bottom: var(--space-sm); }
.so-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: var(--space-md); max-height: 320px; overflow-y: auto; }
.so-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; }
.so-result:hover, .so-result:focus-visible { border-color: var(--color-primary); }
.so-picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-primary); border-radius: 10px; margin-bottom: var(--space-md); max-width: 520px; }
.so-picked > .material-symbols-rounded { color: var(--color-primary); }
.so-picked-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.so-history-summary { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-bottom: var(--space-md); font-size: 14px; }
.so-history-summary > div { display: flex; flex-direction: column; gap: 2px; }
.so-confirm-lines { list-style: none; margin: var(--space-md) 0; padding: 0; }
.so-confirm-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-divider); }
/* [V2.3] Inventory - Module 5: Reports & Analytics */
.ir-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-md); margin-bottom: var(--space-md); }
.ir-period .erp-field { width: 180px; margin-bottom: 0; }
.ir-period-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ir-tabs { overflow-x: auto; }
.ir-section-title { font-weight: 600; margin: var(--space-md) 0 var(--space-sm); }
.ir-section-title:first-child { margin-top: 0; }
.ir-note { font-size: 12.5px; margin: 4px 0 var(--space-md); }
.ir-totals { display: flex; flex-wrap: wrap; gap: 10px var(--space-lg); margin-bottom: var(--space-sm); font-size: 14px; }
.ir-totals > div { display: flex; flex-direction: column; gap: 2px; }
.ir-breakdown { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-md); }
.ir-chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.ir-chip:hover, .ir-chip:focus-visible { border-color: var(--color-primary); }
.ir-subtabs { display: flex; gap: 8px; margin-bottom: var(--space-md); }
.ir-pill-active { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.ir-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: var(--space-sm); font-size: 13px; }
.ir-pager-buttons { display: flex; align-items: center; gap: 8px; }
.ir-pager-page { min-width: 48px; text-align: center; }
@media (max-width: 600px) {
    .ir-period .erp-field { width: calc(50% - 5px); }
    .ir-totals { gap: 8px 16px; }
}
/* Student Issue charge mode - three explicit choices, none pre-selected */
.so-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-md); }
.so-mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; }
.so-mode-card:hover, .so-mode-card:focus-visible { border-color: var(--color-primary); }
.so-mode-card.selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.so-mode-card-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.so-mode-card-title .material-symbols-rounded { font-size: 20px; color: var(--color-primary); }
.so-mode-card-hint { font-size: 12.5px; color: var(--color-text-secondary); }
.so-mode-tag { display: inline-block; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 2px; }
.so-bill-card { border: 1px solid var(--color-divider); border-radius: 10px; padding: 12px 14px; margin-bottom: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-lg); }
.so-bill-card > div { display: flex; flex-direction: column; gap: 2px; }
.so-bill-card .so-bill-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ib-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: var(--space-sm) 0 var(--space-md); font-size: 14px; }
.ib-totals > div { display: flex; gap: 16px; }
.ib-totals .si-fact-label { min-width: 110px; text-align: right; }
@media (max-width: 600px) {
    .so-toolbar-actions { margin-left: 0; width: 100%; }
    .so-toolbar-actions .erp-btn { flex: 1 1 auto; justify-content: center; }
    .so-picked { flex-wrap: wrap; }
    .so-picked-change { width: 100%; justify-content: center; }
    .so-mode-grid { grid-template-columns: 1fr; }
    .so-bill-card .so-bill-actions { margin-left: 0; width: 100%; }
    .ib-totals { align-items: stretch; }
    .ib-totals > div { justify-content: space-between; }
    .ib-totals .si-fact-label { text-align: left; }
}

/* ---------------- Fee Reports ---------------- */
.fr-card { padding: var(--space-lg); margin-bottom: var(--space-lg); min-width: 0; }
.fr-card-title { font-weight: 700; font-size: 15px; color: var(--color-text-primary); }
.fr-card-hint { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
.fr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-md); padding: var(--space-md) var(--space-lg); }
.fr-filters .erp-field { width: 200px; margin-bottom: 0; }
.fr-filters-note { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-secondary); flex: 1 1 220px; }
.fr-filters-note .material-symbols-rounded { font-size: 16px; }
.fr-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md); }
.fr-context-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.fr-context-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; color: var(--color-text-secondary); }
.fr-context-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.fr-context-meta .material-symbols-rounded { font-size: 15px; }
.fr-context-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fr-updated { font-size: 12px; color: var(--color-text-secondary); }
.fr-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: var(--radius-pill); background: rgba(11,61,145,0.08); color: var(--color-primary); font-weight: 600; }
.fr-chip button { display: inline-flex; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.fr-chip .material-symbols-rounded { font-size: 16px; }
.fr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.fr-kpi { align-items: flex-start; min-width: 0; }
.fr-kpi-body { flex: 1; min-width: 0; }
.fr-kpi-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.fr-kpi-danger .erp-stat-value { color: var(--color-error); }
.fr-kpi-link { cursor: pointer; }
.fr-kpi-link .fr-kpi-hint { color: var(--color-primary); text-decoration: underline; }
.fr-stat-icon-red { background: rgba(139,0,0,0.1); color: var(--color-error); }
.fr-progress { height: 6px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; margin-top: 8px; }
.fr-progress-fill { height: 100%; border-radius: inherit; background: var(--color-success); transition: width 0.3s ease; }
.fr-breakup { font-size: 12.5px; color: var(--color-text-secondary); margin: 0 0 var(--space-md); }
.fr-grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 var(--space-lg); align-items: start; }
.fr-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--color-text-secondary); margin: 8px 0 12px; }
.fr-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fr-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fr-swatch-billed, .fr-bar-billed { background: rgba(11,61,145,0.22); }
.fr-swatch-collected, .fr-bar-collected { background: var(--gradient-brand); }
.fr-chart { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 180px auto; }
.fr-chart-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: 6px; font-size: 10.5px; color: var(--color-text-secondary); transform: translateY(-6px); height: calc(100% + 12px); }
.fr-chart-plot { position: relative; border-left: 1px solid var(--color-divider); }
.fr-chart-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--color-divider); }
.fr-chart-cols { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 4px; padding: 0 4px; }
.fr-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.fr-chart-value { font-size: 10px; font-weight: 600; color: var(--color-primary); height: 14px; white-space: nowrap; }
.fr-chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: calc(100% - 14px); }
.fr-bar { width: min(16px, 40%); border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
.fr-chart-labels { display: flex; gap: 4px; padding: 6px 4px 0; }
.fr-chart-labels > span { flex: 1; min-width: 0; text-align: center; font-size: 10.5px; line-height: 1.2; color: var(--color-text-secondary); }
.fr-empty-inline { padding: var(--space-lg) 0; text-align: center; font-size: 13px; color: var(--color-text-secondary); }
.fr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--color-text-secondary); }
.fr-empty .material-symbols-rounded { font-size: 36px; color: var(--color-text-disabled); }
.fr-aging { display: flex; flex-direction: column; }
.fr-aging .fr-card-hint { margin-bottom: 8px; }
.fr-aging-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.fr-aging-row:last-child { border-bottom: 0; }
.fr-aging-track { height: 10px; border-radius: var(--radius-pill); background: var(--color-background); overflow: hidden; }
.fr-aging-fill { height: 100%; border-radius: inherit; transition: width 0.3s ease; }
.fr-aging-not_due { background: #1E88E5; }
.fr-aging-1_30 { background: #FFB300; }
.fr-aging-31_60 { background: #FB8C00; }
.fr-aging-61_90 { background: #E53935; }
.fr-aging-90_plus { background: #8B0000; }
.fr-aging-amount { text-align: end; font-weight: 600; white-space: nowrap; }
.fr-aging-amount small { display: block; font-weight: 400; font-size: 11px; color: var(--color-text-secondary); white-space: normal; }
.fr-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: var(--space-md); }
.fr-method { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; font-size: 12.5px; color: var(--color-text-secondary); }
.fr-method strong { font-size: 16px; color: var(--color-text-primary); }
.fr-method small { font-size: 11px; }
.fr-method-total { background: rgba(0,100,0,0.05); border-color: rgba(0,100,0,0.25); }
.fr-method-sub { background: var(--color-background); }
.fr-tabs-card { margin-bottom: var(--space-lg); }
.fr-tabs { overflow-x: auto; }
.fr-table-hint { margin: 0 0 var(--space-sm); }
.fr-table-wrap { overflow-x: auto; }
.fr-table { box-shadow: none; border: 1px solid var(--color-divider); }
.fr-table .fr-num { text-align: end; white-space: nowrap; }
.fr-table tfoot td { font-weight: 700; background: rgba(11,61,145,0.05); border-top: 2px solid var(--color-primary); }
.fr-row-link { cursor: pointer; }
.fr-strong { font-weight: 600; }
.fr-sub { font-size: 12px; color: var(--color-text-secondary); }
.fr-danger { color: var(--color-error); }
.fr-tel { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: var(--color-primary); }
.fr-tel .material-symbols-rounded { font-size: 14px; }
.fr-sort { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.fr-sort .material-symbols-rounded { font-size: 15px; opacity: 0.6; }
.fr-sort-active .material-symbols-rounded { opacity: 1; }
.fr-rate { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.fr-rate-track { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; }
.fr-rate-fill { height: 100%; border-radius: inherit; }
.fr-rate-good { background: var(--color-success); }
.fr-rate-mid { background: #FB8C00; }
.fr-rate-low { background: var(--color-error); }
.fr-rate > span { font-size: 12.5px; font-weight: 600; min-width: 42px; text-align: end; }
.fr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-sm); }
.fr-toolbar .erp-search-bar { margin-bottom: 0; }
.fr-search { flex: 1 1 260px; max-width: 420px; }
.fr-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 900px) {
    .fr-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .fr-filters { padding: var(--space-md); }
    .fr-filters .erp-field { width: calc(50% - 6px); }
    .fr-context-actions { width: 100%; }
    .fr-kpis { grid-template-columns: minmax(0, 1fr); }
    .fr-aging-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
    .fr-aging-track { grid-column: 1 / -1; grid-row: 2; }
    .fr-toolbar-actions { margin-left: 0; }
    .fr-chart { grid-template-columns: 36px minmax(0, 1fr); }
}

/* ---------------- Attendance Reports (reuses the Fee Reports fr-* layout) ---------------- */
.ar-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-chart { margin-top: 18px; }
.ar-bar { width: min(18px, 70%); background: var(--gradient-brand); }
.ar-bar-low { background: linear-gradient(180deg, #E53935 0%, #8B0000 100%); }
.ar-threshold-line { border-top: 1px dashed rgba(229,57,53,0.55); }
.ar-mix-bar { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-divider); margin: var(--space-md) 0; }
.ar-mix-seg { height: 100%; }
.ar-mix-present { background: #2E7D32; }
.ar-mix-late { background: #FFB300; }
.ar-mix-halfday { background: #29B6F6; }
.ar-mix-leave { background: #7E57C2; }
.ar-mix-absent { background: #C62828; }
.ar-mix-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 12px; font-size: 12.5px; }
.ar-mix-legend > div { display: flex; align-items: center; gap: 6px; }
.ar-mix-legend strong { margin-inline-start: auto; }
.ar-mix-legend small { color: var(--color-text-secondary); min-width: 40px; text-align: end; }
.ar-mix-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ar-weekday-row { grid-template-columns: 90px minmax(0, 1fr) auto; }
.ar-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.ar-warn { color: #a15c00; font-weight: 600; }
.ar-badge-muted { background: rgba(97,97,97,0.12); color: #545454; }
@media (max-width: 900px) {
    .ar-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ar-kpis { grid-template-columns: minmax(0, 1fr); }
    .ar-weekday-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ============================================================================
   [V2.4] Wide modal, Admission Form sections, Student / Employee Profile
   ============================================================================ */
.erp-modal-lg { width: 780px; }
.erp-modal-lg .erp-modal-footer { flex-wrap: wrap; }

/* ---- Admission Form: numbered, grouped sections on a responsive grid ---- */
.erp-form-section {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    padding: var(--space-standard) var(--space-lg) var(--space-xs);
    margin-bottom: var(--space-md);
    background: var(--color-surface);
}
.erp-form-section-head { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-standard); }
.erp-form-step {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(11,61,145,0.1); color: var(--color-primary);
    font-size: 12.5px; font-weight: 700;
}
.erp-form-section-title { font-size: 14px; font-weight: 700; margin: 2px 0 0; color: var(--color-text-primary); }
.erp-form-section-hint { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 0; }
.erp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-standard); }
.erp-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erp-form-grid > .erp-span-all { grid-column: 1 / -1; }
.erp-form-grid .erp-field select.erp-input { padding-top: 20px; }
.erp-floating-label.is-pinned { top: -2px !important; font-size: 11px !important; font-weight: 600; color: var(--color-primary) !important; }
.erp-form-section .erp-note { margin-top: 0; margin-bottom: var(--space-standard); }

/* Candidate identity: photo beside the name */
.erp-form-identity { display: flex; align-items: flex-start; gap: var(--space-standard); }
.erp-form-identity > .erp-form-identity-fields { flex: 1; min-width: 0; }
.erp-form-photo {
    position: relative; flex-shrink: 0;
    width: 92px; height: 108px; margin-bottom: var(--space-standard);
    border: 2px dashed var(--color-divider); border-radius: 12px;
    background: var(--color-background); overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--color-text-secondary); font-size: 11px; text-align: center; cursor: pointer;
    transition: border-color 0.15s ease;
}
.erp-form-photo:hover, .erp-form-photo:focus-within { border-color: var(--color-primary); }
.erp-form-photo img { width: 100%; height: 100%; object-fit: cover; }
.erp-form-photo .material-symbols-rounded { font-size: 26px; }
.erp-form-photo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.erp-form-photo-hint { font-size: 11px; color: var(--color-text-secondary); margin: -8px 0 var(--space-standard); }
.erp-form-photo-error { font-size: 11px; color: var(--color-error); margin: -8px 0 var(--space-standard); }

/* Read-only summary of what the Principal already entered (Complete Admission Form) */
.erp-form-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm) var(--space-standard);
    margin: 0 0 var(--space-md); padding: var(--space-md) var(--space-standard);
    background: var(--color-background); border-radius: var(--radius-input);
}
.erp-form-summary dt { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.erp-form-summary dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.erp-form-brand { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.erp-form-brand-logo { width: 44px; height: 44px; object-fit: contain; }
.erp-form-brand-photo { width: 56px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--color-divider); margin-inline-start: auto; }
.erp-form-brand-name { font-size: 15px; font-weight: 700; }
.erp-form-brand-sub { font-size: 12px; color: var(--color-text-secondary); }

/* Document upload rows */
.erp-doc-row {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
    border: 1px solid var(--color-divider); border-radius: var(--radius-input);
    padding: var(--space-sm) var(--space-standard); margin-bottom: var(--space-sm);
}
.erp-doc-row-name { display: flex; align-items: center; gap: var(--space-sm); font-size: 13px; font-weight: 600; min-width: 0; }
.erp-doc-row-name .material-symbols-rounded { font-size: 20px; color: var(--color-text-disabled); }
.erp-doc-row-name.is-on-file .material-symbols-rounded { color: var(--color-success); }
.erp-doc-row-file { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.erp-doc-row-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* ---- Student / Employee Profile (same layout family as the PDF / Word documents) ---- */
.erp-profile-hero {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-standard) var(--space-lg);
    padding: var(--space-lg); border: 1px solid var(--color-divider); border-radius: var(--radius-card);
    background: var(--color-background);
}
.erp-profile-photo {
    grid-row: span 2; width: 104px; height: 124px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--color-divider); background: #E8EEF8;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 700; color: var(--color-primary);
}
.erp-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.erp-profile-identity { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.erp-profile-name { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.erp-profile-name-urdu, .erp-profile-urdu {
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Alvi Nastaleeq", serif; line-height: 2;
}
.erp-profile-name-urdu { font-size: 17px; }
.erp-profile-subtitle { font-size: 13.5px; color: var(--color-text-secondary); }
.erp-profile-identity .erp-badge { margin-top: 4px; }
.erp-profile-highlights { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: 0; align-self: end; }
.erp-profile-highlights dt { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.erp-profile-highlights dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-profile-section { margin-top: var(--space-xl); }
.erp-profile-section h3 {
    margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--color-primary);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary);
}
.erp-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); margin: 0; }
.erp-profile-field { padding: 10px 0; border-bottom: 1px solid var(--color-divider); min-width: 0; }
.erp-profile-field.is-wide { grid-column: 1 / -1; }
.erp-profile-field dt { font-size: 11.5px; color: var(--color-text-secondary); }
.erp-profile-field dd { margin: 2px 0 0; font-size: 14px; color: var(--color-text-primary); overflow-wrap: anywhere; }
.erp-profile-field dd.erp-profile-urdu { font-size: 15px; text-align: start; }
.erp-profile-record { margin: var(--space-standard) 0 0; font-size: 12px; font-style: italic; color: var(--color-text-secondary); }
/* School watermark (Settings > Document Watermark) - same as the printed PDF / Word; drawn over the
   content (the tinted hero would hide it underneath) but faint and click-through. */
.erp-profile { position: relative; overflow: hidden; }
.erp-profile-watermark {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none;
    display: flex; align-items: center; justify-content: center;
}
.erp-profile-watermark span {
    transform: rotate(-35deg); white-space: nowrap; max-width: 140%;
    font-size: clamp(22px, 7vw, 64px); font-weight: 800; letter-spacing: 0.04em;
    color: var(--color-primary); opacity: 0.07;
}
.erp-profile-watermark.is-long span { font-size: clamp(16px, 3.4vw, 34px); }
/* Settings > Document Watermark live preview - a mini page with the watermark as it will print. */
.erp-watermark-preview {
    height: 96px; margin-bottom: var(--space-standard); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--color-divider); border-radius: var(--radius-input); background: var(--color-surface, #fff);
}
.erp-watermark-preview span {
    transform: rotate(-18deg); white-space: nowrap; font-size: 22px; font-weight: 800; letter-spacing: 0.04em;
    color: var(--color-primary); opacity: 0.25;
}
.erp-watermark-preview em { font-size: 12.5px; color: var(--color-text-secondary); }

@media (max-width: 640px) {
    .erp-modal-overlay:has(.erp-modal-lg) { padding: var(--space-sm); }
    .erp-modal-lg .erp-modal-body { padding: var(--space-standard); }
    .erp-form-section { padding: var(--space-md) var(--space-md) var(--space-xs); }
    .erp-form-grid, .erp-form-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .erp-profile-hero { grid-template-columns: 76px minmax(0, 1fr); padding: var(--space-standard); gap: var(--space-md); }
    .erp-profile-photo { grid-row: auto; width: 76px; height: 92px; font-size: 24px; }
    .erp-profile-name { font-size: 18px; }
    .erp-profile-highlights { grid-column: 1 / -1; gap: var(--space-sm) var(--space-lg); }
    .erp-profile-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   [V2.4] Page building blocks - born on the Finance screens, now the shared
   vocabulary for every module. Each block has a neutral erp-* name for new
   screens; the original fin-* names stay as aliases so nothing breaks.
     KPI row ........ .erp-kpis > .erp-kpi   (.fin-kpis > .fin-kpi)
     Section panel .. .erp-section / -head / -title / -hint / -body   (.fin-section*)
     Item row ....... .erp-row / -main / -title / -meta / -amount / -actions  (.fin-row*)
     Filter bar ..... .erp-filters, segmented toggle .erp-seg  (.fin-filters, .fin-seg)
     Statement ...... .erp-statement  (.fin-statement)
     Info note ...... .erp-info-note  (.fin-note)
   Surfaces (background/border/shadow/accent) come from the Design System.
   ============================================================================ */

/* ---- KPI tiles: label, figure, one line of context ---- */
.erp-kpis, .fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.erp-kpis.is-compact, .fin-kpis.is-compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.erp-kpis.is-narrow, .fin-kpis.is-narrow { grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); }
.erp-kpi, .fin-kpi { position: relative; min-width: 0; padding: var(--space-standard) var(--space-lg); }
.erp-kpi-label, .fin-kpi-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.erp-kpi-value, .fin-kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.erp-kpi-sub, .fin-kpi-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.is-compact > .erp-kpi .erp-kpi-value, .is-compact > .fin-kpi .fin-kpi-value { font-size: 17px; }

/* ---- Section panel ---- */
.erp-section, .fin-section { margin-bottom: var(--space-lg); overflow: hidden; }
.erp-section-head, .fin-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap;
    padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-divider);
}
.erp-section-title, .fin-section-title { display: flex; align-items: center; gap: var(--space-sm); font-size: 14.5px; font-weight: 700; margin: 0; }
.erp-section-title .material-symbols-rounded, .fin-section-title .material-symbols-rounded { font-size: 19px; color: var(--color-primary); }
.erp-count, .fin-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--status-info-bg); color: var(--status-info-fg); font-size: 11.5px; font-weight: 700; }
.erp-count.is-alert, .fin-count.is-alert { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.erp-section-hint, .fin-section-hint { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 0; }
.erp-section-body, .fin-section-body { padding: var(--space-md) var(--space-lg); }
.erp-section-body.is-flush, .fin-section-body.is-flush { padding: 0; }
.erp-section-body.is-flush .erp-table, .fin-section-body.is-flush .erp-table { margin: 0; border-radius: 0; box-shadow: none; }

/* ---- Empty state inside a section ---- */
.fin-empty { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) 0; font-size: 13px; color: var(--color-text-secondary); }
.fin-empty .material-symbols-rounded { font-size: 20px; color: var(--color-success); }
.erp-empty-inline { font-size: 13px; color: var(--color-text-secondary); margin: var(--space-sm) 0; }

/* ---- Item rows (action lists, alerts, notices) ---- */
.erp-row, .fin-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
    padding: var(--space-md) 0; border-bottom: 1px solid var(--color-divider);
}
.erp-row:last-child, .fin-row:last-child { border-bottom: none; }
.erp-row-main, .fin-row-main { min-width: 0; flex: 1 1 260px; }
.erp-row-title, .fin-row-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.erp-row-meta, .fin-row-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.erp-row-amount, .fin-row-amount { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-row-actions, .fin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Compact dashboard list (alerts / pending items / notices), optionally a link. */
.erp-list-row { display: flex; align-items: center; gap: 12px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-divider); }
.erp-list-row.is-split { justify-content: space-between; }
.erp-list-row.is-stack { display: block; }
.erp-list-link { display: block; color: inherit; text-decoration: none; border-radius: 8px; transition: background var(--motion-fast) ease; }
.erp-list-link:hover { background: rgba(11,61,145,0.04); }
.erp-list-title { font-size: 13px; font-weight: 600; }
.erp-list-meta { font-size: 11.5px; color: var(--color-text-secondary); }
.erp-list-text { font-size: 12.5px; color: var(--color-text-primary); }

/* ---- Filter bar + segmented toggle ---- */
.erp-filters, .fin-filters { display: flex; align-items: flex-end; gap: var(--space-sm) var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.erp-filters .erp-field, .fin-filters .erp-field { margin-bottom: 0; flex: 0 1 170px; min-width: 140px; }
.erp-filters .erp-field.is-wide, .fin-filters .erp-field.is-wide { flex-basis: 240px; }
.erp-filters-spacer, .fin-filters .fin-filters-spacer { flex: 1 1 auto; }
.erp-seg, .fin-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--color-background); border: 1px solid var(--color-divider); }
.erp-seg button, .fin-seg button { border: none; background: transparent; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; font-family: inherit; }
.erp-seg button.active, .fin-seg button.active { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 3px rgba(10,25,47,0.12); }

/* ---- Tables ---- */
.erp-table-wrap, .fin-table-wrap { overflow-x: auto; }
.fin-muted { color: var(--color-text-secondary); }
.fin-sub { display: block; font-size: 11.5px; color: var(--color-text-secondary); }
.erp-table tfoot td, .erp-table tr.fin-total td, .erp-table tr.erp-total td { font-weight: 700; background: var(--color-background); }

/* ---- Accounting statement (Profit & Loss) ---- */
.erp-statement, .fin-statement { width: 100%; border-collapse: collapse; font-size: 14px; }
.erp-statement th, .fin-statement th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); padding: 14px 0 6px; border-bottom: 2px solid var(--color-primary); }
.erp-statement td, .fin-statement td { padding: 9px 0; border-bottom: 1px solid var(--color-divider); }
.erp-statement td:last-child, .erp-statement th:last-child,
.fin-statement td:last-child, .fin-statement th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-statement tr.fin-subtotal td { font-weight: 700; border-bottom: none; }
.fin-statement tr.fin-net td { font-weight: 800; font-size: 16px; border-top: 2px solid var(--color-text-primary); border-bottom: 3px double var(--color-text-primary); padding-top: 12px; }
.fin-statement tr.fin-net.is-profit td:last-child { color: var(--color-success); }
.fin-statement tr.fin-net.is-loss td:last-child { color: var(--color-error); }

/* ---- Inline info note (what a figure includes / excludes) ---- */
.erp-info-note, .fin-note { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: 12px; color: var(--color-text-secondary); background: #F3F6FB; border: 1px solid rgba(11,61,145,0.12); border-radius: var(--radius-input); padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); }
.erp-info-note .material-symbols-rounded, .fin-note .material-symbols-rounded { font-size: 17px; color: var(--color-primary); flex-shrink: 0; }

/* ---- Page header actions (primary action beside the title) ---- */
.fin-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.fin-page-head .erp-page-header { margin-bottom: var(--space-md); }
.fin-page-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-md); }

.erp-parent-children { display: flex; flex-direction: column; gap: var(--space-md); }

@media (max-width: 640px) {
    .erp-kpis, .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
    .erp-kpi, .fin-kpi { padding: var(--space-md); }
    .erp-kpi-value, .fin-kpi-value, .is-compact > .fin-kpi .fin-kpi-value { font-size: 16px; }
    .erp-kpi-label, .fin-kpi-label { font-size: 10.5px; }
    .erp-section-head, .erp-section-body, .fin-section-head, .fin-section-body { padding-left: var(--space-md); padding-right: var(--space-md); }
    .erp-filters .erp-field, .fin-filters .erp-field { flex: 1 1 140px; }
    .erp-row-actions, .fin-row-actions { width: 100%; }
    .erp-row-actions .erp-btn, .fin-row-actions .erp-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================================
   [V2.4] RIC Fee Management Design System - surfaces, cards, statuses, motion
   ----------------------------------------------------------------------------
   The single source of truth for how every card-like surface in the app looks.
   It is loaded LAST in this file on purpose: component rules above only
   describe layout (padding, grid, typography inside the card); background,
   border, radius, shadow, accent and hover live here and nowhere else.

   Two kinds of surface:
     PANEL - a content container (a section, a tabs card, a form card, a modal).
             Clean surface, hairline border, soft shadow. No accent.
     TILE  - a card that stands for one thing (a KPI, a stat, a person, a
             school, a navigation tile). Same surface plus a bold accent line
             on its leading edge; on hover a hairline of the same colour traces
             the whole card. Nothing moves, zooms or loops.

   New screens: use .erp-panel / .erp-tile (+ .erp-tile-group on the grid) -
   the older component class names below are aliases of the same two rules.

   Accent colour: automatic. The Nth tile in any tile group gets the Nth
   colour of --accent-1..8, so six cards in a row are six different colours
   without any per-page colour code. When a colour carries meaning (attendance
   statuses, overdue, income vs expense) the page pins every tile of that
   group with .erp-tone-*. Tiles outside a group use --accent-1.
   ============================================================================ */

/* ---- Panels ----
   :where() keeps this at zero specificity: it is the default surface, and a
   component that deliberately differs (e.g. the borderless Login card) still
   wins with a plain class rule. */
:where(.erp-panel, .erp-card, .erp-tabs-card, .erp-section, .fin-section, .fr-card, .acct-banks-card) {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* An empty state that stands on the page itself (not inside a panel) gets the
   panel surface too, so it never floats unreadably on the photo background. */
.erp-empty-card:not(:is(.erp-panel, .erp-card, .erp-tabs-card, .erp-section, .fin-section, .fr-card, .erp-modal) *) {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ---- Tiles ---- */
.erp-tile, .erp-hub-card, .erp-stat-card, .erp-kpi, .fin-kpi, .erp-resource-card,
.erp-school-card, .erp-owner-card, .erp-quick-tile, .erp-owner-quick-btn, .erp-parent-child-card {
    --tile-accent: var(--card-tone, var(--card-accent, var(--accent-1)));
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-inline-start: var(--accent-width) solid var(--tile-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.erp-tile:hover, .erp-hub-card:hover, .erp-stat-card:hover, .erp-kpi:hover, .fin-kpi:hover, .erp-resource-card:hover,
.erp-school-card:hover, .erp-owner-card:hover, .erp-quick-tile:hover, .erp-owner-quick-btn:hover,
.erp-parent-child-card:hover, .erp-card-link:focus-visible > * {
    border-color: var(--tile-accent);
    box-shadow: var(--shadow-card-hover);
}
/* A tile that is the current selection (a section switcher, the chosen child
   on the Parent dashboard): hairline turns into a 2px ring + faint tint. */
.erp-tile.is-selected, .erp-hub-card.is-selected, .erp-stat-card.is-selected, .erp-resource-card.is-selected,
.erp-quick-tile.active, .erp-parent-child-card.is-selected {
    border-color: var(--tile-accent);
    box-shadow: 0 0 0 1px var(--tile-accent), var(--shadow-card-hover);
    background: linear-gradient(0deg, rgba(11,61,145,0.04), rgba(11,61,145,0.04)), var(--color-surface);
    background: linear-gradient(0deg, color-mix(in srgb, var(--tile-accent) 6%, transparent), color-mix(in srgb, var(--tile-accent) 6%, transparent)), var(--color-surface);
}
/* Summary / total tile - same accent, faint tint of it behind the figures. */
.erp-tile.is-total, .erp-kpi.is-total, .fin-kpi.is-total {
    background: linear-gradient(135deg, rgba(11,61,145,0.06), rgba(11,61,145,0.02)), var(--color-surface);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tile-accent) 8%, transparent), transparent 70%), var(--color-surface);
}

/* ---- Automatic accent per position inside a tile group ---- */
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+1) { --card-accent: var(--accent-1); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+2) { --card-accent: var(--accent-2); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+3) { --card-accent: var(--accent-3); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+4) { --card-accent: var(--accent-4); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+5) { --card-accent: var(--accent-5); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+6) { --card-accent: var(--accent-6); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+7) { --card-accent: var(--accent-7); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
    .erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+8) { --card-accent: var(--accent-8); }

/* Fixed colour for one tile, when the colour itself carries meaning
   (Present = green, Absent / Overdue / Expenses = red, Pending = amber ...).
   A group that pins some tiles should pin all of them, so they stay distinct. */
.erp-tone-navy { --card-tone: var(--accent-navy); }
.erp-tone-green { --card-tone: var(--accent-green); }
.erp-tone-amber { --card-tone: var(--accent-amber); }
.erp-tone-purple { --card-tone: var(--accent-purple); }
.erp-tone-teal { --card-tone: var(--accent-teal); }
.erp-tone-slate { --card-tone: var(--accent-slate); }
.erp-tone-brown { --card-tone: var(--accent-brown); }
.erp-tone-red { --card-tone: var(--accent-red); }

/* The icon badge and sparkline inside a tile take the tile's own colour, so a
   card reads as one identity (accent line = icon = trend line). */
:is(.erp-tile, .erp-hub-card, .erp-stat-card, .erp-quick-tile, .erp-owner-quick-btn) :is(.erp-hub-icon, .erp-hub-card-icon, .erp-stat-icon, .erp-quick-tile-icon) {
    color: var(--tile-accent);
    background: rgba(11,61,145,0.08);
    background: color-mix(in srgb, var(--tile-accent) 11%, var(--color-surface));
}
.erp-owner-quick-btn .material-symbols-rounded { color: var(--tile-accent); }
.erp-spark-wrap path[stroke]:not([stroke="none"]) { stroke: var(--tile-accent, currentColor); }
.erp-spark-wrap circle { fill: var(--tile-accent, currentColor); }
.erp-spark-wrap stop { stop-color: var(--tile-accent, currentColor); }

/* A whole tile that is a link (dashboard KPI -> its report). */
.erp-card-link { display: flex; height: 100%; color: inherit; text-decoration: none; border-radius: var(--radius-card); }
.erp-card-link > * { flex: 1 1 auto; min-width: 0; }
.erp-card-link:focus-visible { outline: none; }

/* ---- Value state (the accent is identity; state is shown on the figure) ---- */
.erp-text-success { color: var(--status-success-fg) !important; }
.erp-text-danger { color: var(--status-danger-fg) !important; }
.erp-text-warning { color: var(--status-warning-fg) !important; }
.erp-text-muted { color: var(--color-text-secondary) !important; }

/* ---- One status vocabulary for every badge / pill in the app ---- */
.erp-badge, .fin-status, .feecash-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: nowrap;
    background: var(--status-neutral-bg); color: var(--status-neutral-fg);
}
.erp-badge-active, .erp-badge-success, .fin-status-done, .feecash-confirmed, .feecol-status-chip.is-ok { background: var(--status-success-bg); color: var(--status-success-fg); }
.erp-badge-inactive, .erp-badge-danger, .fin-status-bad, .feecash-rejected { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.erp-badge-pending, .erp-badge-warning, .fin-status-pending, .feecash-pending, .feecol-status-chip.is-pending { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.erp-badge-info, .fin-status-info, .feecol-status-chip.is-online { background: var(--status-info-bg); color: var(--status-info-fg); }
.erp-badge-withdrawn, .erp-badge-neutral, .fin-status-muted, .ar-badge-muted { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* ---- Amount columns ---- */
.erp-num, .fin-num, .inv-num, .fr-table .fr-num { text-align: end !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Focus ring (keyboard only) for every interactive control ---- */
.erp-btn:focus-visible, .erp-pill-btn:focus-visible, .erp-btn-pill:focus-visible, .erp-tab:focus-visible,
.erp-hub-btn:focus-visible, .fin-seg button:focus-visible, .erp-link-button:focus-visible, .erp-card-link:focus-visible > * {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ---- Reduced motion: honour the OS setting everywhere ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   [V2.5] Phase 1 - toasts, confirm dialog, skeleton loading, pager, global
   search (top bar button + command palette). Built on the V2.4 tokens above.
   ============================================================================ */

/* ---- Toasts (ToastHost / ToastService) ----
   Top-right under the top bar on desktop, full width at the top on phones.
   Above modals (1000), the palette (1400) and the confirm dialog (1500),
   below the reconnect overlay and boot splash (3000). */
.erp-toasts {
    position: fixed; top: 80px; right: var(--space-xl); z-index: 2500;
    display: flex; flex-direction: column; gap: var(--space-sm);
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.erp-toast {
    --toast-accent: var(--accent-navy);
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 10px 12px 14px;
    background: var(--color-surface); color: var(--color-text-primary);
    border: 1px solid var(--color-divider);
    border-inline-start: var(--accent-width) solid var(--toast-accent);
    border-radius: var(--radius-input);
    box-shadow: 0 10px 30px rgba(10,25,47,0.16), 0 2px 6px rgba(10,25,47,0.08);
    font-size: 13.5px; line-height: 1.45;
    pointer-events: auto;
    animation: erp-toast-in 0.22s ease-out;
}
.erp-toast.is-success { --toast-accent: var(--accent-green); }
.erp-toast.is-error { --toast-accent: var(--accent-red); }
.erp-toast.is-warning { --toast-accent: var(--accent-amber); }
.erp-toast.is-info { --toast-accent: var(--accent-navy); }
.erp-toast-icon { color: var(--toast-accent); font-size: 20px; margin-top: 1px; flex-shrink: 0; }
.erp-toast-text { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; padding-top: 1px; }
.erp-toast-close {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; margin: -3px 0; border-radius: 50%;
    border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.erp-toast-close:hover { background: var(--color-background); color: var(--color-text-primary); }
.erp-toast-close .material-symbols-rounded { font-size: 18px; }
.erp-toast-close:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
/* JS-created toast (downloadHelper.js) - its own slot at the bottom. */
.erp-toast-standalone {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2500;
    width: max-content; max-width: min(460px, calc(100vw - 32px)); padding-right: 16px;
    animation: none;
}
@keyframes erp-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .erp-toasts { top: 64px; left: 16px; right: 16px; width: auto; }
    .erp-in-app .erp-toast-standalone { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Confirm dialog (ConfirmHost / ConfirmService) ---- */
.erp-confirm-overlay { z-index: 1500; }
.erp-confirm {
    width: 420px; padding: var(--space-xl) var(--space-xl) var(--space-lg);
    text-align: center;
}
.erp-confirm-icon {
    width: 52px; height: 52px; margin: 0 auto var(--space-md); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--status-info-bg); color: var(--status-info-fg);
}
.erp-confirm-icon.is-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.erp-confirm-icon .material-symbols-rounded { font-size: 28px; }
.erp-confirm-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--color-text-primary); }
.erp-confirm-message { margin: 0 0 var(--space-lg); font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.55; white-space: pre-line; }
.erp-confirm-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.erp-confirm-actions .erp-btn { min-width: 128px; }
@media (max-width: 640px) {
    .erp-confirm-actions { flex-direction: column-reverse; }
    .erp-confirm-actions .erp-btn { width: 100%; }
}

/* ---- Skeleton loading ----
   Every page already shows <div class="erp-loading-row"><span class="erp-spinner">
   while it fetches. That same element is now drawn as grey placeholder lines
   where the content will appear (no markup change on 160+ screens). It fades
   in after 150 ms, so a fast response never flashes a skeleton at all. The
   bars are an SVG without viewBox: widths in %, heights in px, so they stretch
   with the container without distorting the rounded corners. */
.erp-loading-row {
    display: block; position: relative; overflow: hidden;
    min-height: 150px; padding: 0; margin: var(--space-sm) 0;
    border-radius: var(--radius-input);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='150'%3E%3Cg fill='%23E6EAF0'%3E%3Crect x='0' y='2' width='34%25' height='14' rx='7'/%3E%3Crect x='0' y='36' width='100%25' height='12' rx='6'/%3E%3Crect x='0' y='64' width='92%25' height='12' rx='6'/%3E%3Crect x='0' y='92' width='97%25' height='12' rx='6'/%3E%3Crect x='0' y='120' width='78%25' height='12' rx='6'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 150px;
    animation: erp-skeleton-in 0.25s ease 0.15s both;
}
.erp-loading-row > .erp-spinner { display: none; }
.erp-loading-row::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.65) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: erp-skeleton-sweep 1.3s ease-in-out infinite;
}
@keyframes erp-skeleton-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes erp-skeleton-sweep { to { transform: translateX(100%); } }

/* ---- Pager (Pager.razor / PageState) ---- */
.erp-pager {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    flex-wrap: wrap; padding: var(--space-md) 2px 0;
    font-size: 12.5px; color: var(--color-text-secondary);
}
.erp-pager-summary { font-variant-numeric: tabular-nums; }
.erp-pager-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.erp-pager-size { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: var(--space-sm); }
.erp-pager-size select {
    font: inherit; font-size: 12.5px; color: var(--color-text-primary);
    padding: 4px 6px; border: 1px solid var(--color-divider); border-radius: 8px; background: var(--color-surface);
}
.erp-pager-btn {
    min-width: 32px; height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-divider); border-radius: 8px; background: var(--color-surface);
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums; cursor: pointer;
}
.erp-pager-btn .material-symbols-rounded { font-size: 18px; }
.erp-pager-btn:hover:not(:disabled):not(.is-current) { border-color: var(--color-primary); color: var(--color-primary); }
.erp-pager-btn.is-current { background: var(--color-primary-fill); border-color: var(--color-primary); color: #fff; cursor: default; }
.erp-pager-btn:disabled { opacity: 0.4; cursor: default; }
.erp-pager-btn:focus-visible, .erp-pager-size select:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.erp-pager-gap { padding: 0 4px; }

/* ---- Global search: top bar button ---- */
.app-topbar-search {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; min-width: 220px; padding: 0 8px 0 12px;
    border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85);
    font: inherit; font-size: 13px; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.app-topbar-search:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); }
.app-topbar-search:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.app-topbar-search .material-symbols-rounded { font-size: 19px; }
.app-topbar-search-text { flex: 1; text-align: start; }
.app-topbar-search-kbd {
    font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9);
}
@media (max-width: 900px) {
    .app-topbar-search { min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; flex-shrink: 0; }
    .app-topbar-search-text, .app-topbar-search-kbd { display: none; }
}

/* ---- Global search: command palette ---- */
.erp-palette-overlay {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(10,25,47,0.45); backdrop-filter: blur(2px);
    display: flex; justify-content: center; align-items: flex-start;
    padding: 12vh var(--space-standard) var(--space-standard);
    animation: erp-fade-in 0.12s ease;
}
.erp-palette {
    width: 640px; max-width: 100%; max-height: min(560px, 76vh);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-surface); border-radius: var(--radius-dialog);
    box-shadow: var(--shadow-dialog);
    animation: erp-slide-up 0.16s ease;
}
.erp-palette-search {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--color-divider);
}
.erp-palette-search > .material-symbols-rounded { font-size: 22px; color: var(--color-text-secondary); }
.erp-palette-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font: inherit; font-size: 15px; color: var(--color-text-primary);
}
.erp-palette-search input::placeholder { color: var(--color-text-disabled); }
.erp-palette-spinner { width: 18px; height: 18px; border-width: 2px; margin: 0; flex-shrink: 0; }
.erp-palette-esc {
    font: inherit; font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
    padding: 3px 8px; border: 1px solid var(--color-divider); border-radius: 6px;
    background: var(--color-background); cursor: pointer;
}
.erp-palette-list { overflow-y: auto; padding: 6px 8px 8px; flex: 1; }
.erp-palette-group {
    padding: 10px 10px 4px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-text-secondary);
}
.erp-palette-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 12px; cursor: pointer;
    border: 1px solid transparent;
}
.erp-palette-item:hover { background: var(--color-background); }
.erp-palette-item.is-active { background: var(--status-info-bg); border-color: rgba(11,61,145,0.18); }
.erp-palette-icon {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-background); color: var(--color-primary); font-size: 19px;
}
.erp-palette-avatar {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    background-size: cover; background-position: center; background-color: var(--color-divider);
}
.erp-palette-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.erp-palette-title { font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-palette-sub { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-palette-action { flex-shrink: 0; }
.erp-palette-action .material-symbols-rounded { font-size: 15px; }
.erp-palette-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 36px 16px; text-align: center; font-size: 13px; color: var(--color-text-secondary);
}
.erp-palette-empty .material-symbols-rounded { font-size: 34px; color: var(--color-text-disabled); }
.erp-palette-footer {
    display: flex; gap: var(--space-lg); padding: 9px 16px;
    border-top: 1px solid var(--color-divider); background: var(--color-background);
    font-size: 11.5px; color: var(--color-text-secondary);
}
.erp-palette-footer kbd {
    display: inline-block; min-width: 18px; margin-inline-end: 3px; padding: 1px 5px;
    font: inherit; font-size: 11px; font-weight: 600; text-align: center;
    border: 1px solid var(--color-divider); border-bottom-width: 2px; border-radius: 5px;
    background: var(--color-surface); color: var(--color-text-primary);
}
@media (max-width: 640px) {
    .erp-palette-overlay { padding: 0; align-items: stretch; }
    .erp-palette { max-height: none; height: 100%; border-radius: 0; }
    .erp-palette-footer { display: none; }
}

/* ---- "No results" row inside a filtered table (the filter row stays usable) ---- */
.erp-table td.erp-table-empty {
    text-align: center; padding: var(--space-xl) var(--space-standard);
    color: var(--color-text-secondary); font-size: 13px;
}
.erp-palette-tip {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px; font-size: 12px; color: var(--color-text-secondary);
    background: var(--color-background); border-bottom: 1px solid var(--color-divider);
}
.erp-palette-tip .material-symbols-rounded { font-size: 16px; color: var(--accent-amber); }
.erp-palette-esc-icon { display: none; font-size: 18px; }
@media (max-width: 640px) {
    .erp-palette-esc { border: none; background: transparent; padding: 4px; }
    .erp-palette-esc-key { display: none; }
    .erp-palette-esc-icon { display: inline-flex; }
}

/* ---- [V2.5] Collect Fee: challan barcode scan bar ---- */
.erp-scan-bar {
    display: flex; align-items: center; gap: 10px;
    max-width: 520px; margin-bottom: var(--space-md); padding: 0 14px;
    border: 1.5px dashed var(--color-border-disabled); border-radius: var(--radius-input);
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.erp-scan-bar:focus-within { border-style: solid; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(30,136,229,0.14); }
.erp-scan-bar > .material-symbols-rounded { font-size: 22px; color: var(--color-primary); }
.erp-scan-bar input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    padding: 11px 0; font: inherit; font-size: 13.5px; letter-spacing: 0.3px; color: var(--color-text-primary);
}
.erp-scan-bar input::placeholder { color: var(--color-text-disabled); letter-spacing: normal; }

/* ---- [V2.5] Collect Fee: family (siblings) ---- */
.feecol-family-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; margin-bottom: var(--space-md);
    border: 1px solid rgba(91,44,148,0.22); border-inline-start: var(--accent-width) solid var(--accent-purple);
    border-radius: var(--radius-input); background: rgba(91,44,148,0.05);
}
.feecol-family-banner > .material-symbols-rounded { font-size: 24px; color: var(--accent-purple); }
.feecol-family-list { border: 1px solid var(--color-divider); border-radius: var(--radius-input); padding: 6px 12px 10px; }
.feecol-family-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--color-divider);
}
.feecol-family-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }
.feecol-family-row.is-disabled { opacity: 0.55; }

/* ---- [V2.5] Fee Reports: defaulter follow-up ---- */
.fu-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: var(--space-sm) 0; }
.fu-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.fu-count {
    display: inline-block; min-width: 18px; margin-inline-start: 4px; padding: 0 5px;
    border-radius: var(--radius-pill); background: var(--color-background);
    font-size: 11px; font-weight: 700; text-align: center;
}
.feecol-chip.is-active .fu-count { background: rgba(255,255,255,0.25); }
.fu-wa-btn { border-color: rgba(0,100,0,0.35); color: #0B6B34; }
.fu-wa-btn:hover { background: rgba(0,100,0,0.06); }
.fu-history { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-divider); max-height: 240px; overflow-y: auto; }
.fu-history-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.fu-history-row:last-child { border-bottom: none; }

/* ---- [V2.5] Action Center: top bar shortcut + page ---- */
.app-topbar-action {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: #fff; text-decoration: none;
    transition: background 0.15s ease;
}
.app-topbar-action:hover { background: rgba(255,255,255,0.10); }
.app-topbar-action .material-symbols-rounded { font-size: 22px; }
.app-topbar-action-badge {
    position: absolute; top: 2px; right: 0;
    background: var(--accent-amber); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    min-width: 15px; height: 15px; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 1.5px solid var(--color-primary-dark);
}
.ac-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.ac-summary-total { display: flex; align-items: baseline; gap: 8px; margin-inline-end: var(--space-md); color: var(--color-text-secondary); font-size: 13px; }
.ac-summary-count { font-size: 28px; font-weight: 800; color: var(--color-primary); line-height: 1; }
.ac-summary-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--color-divider); border-radius: var(--radius-pill); background: var(--color-surface);
    font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); text-decoration: none;
}
.ac-summary-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ac-summary-chip .material-symbols-rounded { font-size: 16px; color: var(--color-primary); }
.ac-group { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); scroll-margin-top: 84px; }
.ac-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-divider); }
.ac-group-icon {
    width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--status-info-bg); color: var(--color-primary); font-size: 18px;
}
.ac-group-title { flex: 1; margin: 0; font-size: 14.5px; font-weight: 700; }
.ac-item { display: flex; align-items: center; gap: var(--space-md); padding: 10px 0; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.ac-item:last-of-type { border-bottom: none; }
.ac-item-main { flex: 1 1 260px; min-width: 0; }
.ac-item-title { font-weight: 600; font-size: 13.5px; }
.ac-item-sub { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 1px; overflow-wrap: anywhere; }
.ac-item-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--color-text-disabled); margin-top: 3px; }
.ac-item-amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ac-approve { border-color: rgba(0,100,0,0.35); color: #0B6B34; }
.ac-approve:hover { background: rgba(0,100,0,0.06); }
.ac-more { display: inline-block; margin-top: var(--space-sm); font-size: 12.5px; font-weight: 600; }

/* ==========================================================================
   [V2.5] Phase 3 - Data Import, setup checklist, Student 360
   ========================================================================== */

/* ---- Data Import ---- */
.di-school { max-width: 260px; margin-inline-start: auto; height: 38px; padding-top: 6px; padding-bottom: 6px; }
.di-steps { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); }
.di-step { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-lg); }
.di-step-num {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary-fill); color: #fff; font-weight: 800; font-size: 14px;
}
.di-step-body { flex: 1; min-width: 0; }
.di-step-title { margin: 4px 0 4px; font-size: 15px; font-weight: 700; }
.di-step-text { margin: 0 0 var(--space-md); color: var(--color-text-secondary); font-size: 13px; }
.di-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.di-upload { cursor: pointer; }
.di-upload.is-disabled { opacity: 0.6; pointer-events: none; }
.di-file-name { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.di-file-name .material-symbols-rounded { font-size: 18px; color: var(--accent-green); }
.di-option { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--space-md); font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.di-option input { margin-top: 3px; }
.di-busy { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); font-weight: 600; }
.di-summary { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.di-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer;
    border: 1px solid var(--color-divider); border-radius: var(--radius-pill); background: var(--color-surface);
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--color-text-primary);
}
.di-chip .material-symbols-rounded { font-size: 16px; }
.di-chip.is-ok .material-symbols-rounded { color: var(--accent-green); }
.di-chip.is-error .material-symbols-rounded { color: var(--color-error); }
.di-chip.active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.di-hint { margin-bottom: var(--space-md); }
.di-row-error td { background: var(--status-danger-bg); }
.di-notes { font-size: 12.5px; color: var(--color-text-secondary); min-width: 220px; }
.di-row-error .di-notes { color: var(--status-danger-fg); }
.di-ref { font-size: 11.5px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.di-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* ---- Setup checklist card ---- */
.sc-card { padding: 0; margin-bottom: var(--space-lg); overflow: hidden; border-inline-start: 4px solid var(--accent-amber); }
.sc-head {
    width: 100%; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg);
    background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: start;
}
.sc-head-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--status-warning-bg); color: var(--accent-amber); font-size: 20px;
}
.sc-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-title { font-weight: 700; font-size: 14.5px; }
.sc-sub { font-size: 12.5px; color: var(--color-text-secondary); }
.sc-bar { flex: 0 0 140px; height: 8px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; }
.sc-bar-fill { display: block; height: 100%; background: var(--accent-green); border-radius: inherit; transition: width 0.3s ease; }
.sc-chevron { color: var(--color-text-secondary); }
.sc-steps { list-style: none; margin: 0; padding: 0 var(--space-lg) var(--space-sm); border-top: 1px solid var(--color-divider); }
.sc-step { display: flex; align-items: center; gap: var(--space-md); padding: 10px 0; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.sc-step:last-child { border-bottom: none; }
.sc-step-icon { font-size: 22px; color: var(--color-primary); }
.sc-step.is-done .sc-step-icon { color: var(--accent-green); }
.sc-step.is-done .sc-step-title { color: var(--color-text-secondary); }
.sc-step-main { flex: 1 1 220px; min-width: 0; }
.sc-step-title { font-weight: 600; font-size: 13.5px; }
.sc-step-hint { font-size: 12.5px; color: var(--color-text-secondary); }
.sc-optional { margin-inline-start: 6px; font-size: 11px; font-weight: 600; color: var(--color-text-disabled); text-transform: uppercase; letter-spacing: 0.03em; }
.sc-go { text-decoration: none; white-space: nowrap; }
.sc-owner-note { font-size: 12px; color: var(--color-text-disabled); white-space: nowrap; }
@media (max-width: 640px) {
    .sc-bar { display: none; }
}

/* ---- Student 360 ---- */
.sd-name-link { color: inherit; font-weight: 600; text-decoration: none; }
.sd-name-link:hover { color: var(--color-primary); text-decoration: underline; }
.s360-back { margin-bottom: var(--space-sm); }
.s360-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); padding: var(--space-lg); }
.s360-photo {
    flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-brand); color: #fff; font-size: 28px; font-weight: 800;
}
.s360-photo img { width: 100%; height: 100%; object-fit: cover; }
.s360-identity { flex: 1 1 260px; min-width: 0; }
.s360-name { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.s360-name-urdu { font-family: 'Noto Nastaliq Urdu', serif; font-size: 16px; color: var(--color-text-secondary); margin-top: 2px; }
.s360-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; color: var(--color-text-secondary); }
.s360-meta .material-symbols-rounded { font-size: 16px; vertical-align: -3px; color: var(--color-primary); }
.s360-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.s360-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.s360-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin: var(--space-md) 0; }
.s360-kpi { display: flex; align-items: center; gap: var(--space-md); text-align: start; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--color-divider); }
.s360-kpi:hover { box-shadow: var(--shadow-card-hover); }
.s360-kpi .erp-stat-value small { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); }
.s360-kpi-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.s360-warn { color: var(--color-error); font-weight: 700; }
.s360-tabs { margin-bottom: var(--space-md); overflow-x: auto; }
.s360-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-md); }
.s360-grid { margin-bottom: var(--space-lg); }
.s360-grid > .erp-section { margin: 0; }
.s360-panel { padding: var(--space-standard) var(--space-lg); }
.s360-h { margin: 0 0 var(--space-md); font-size: 14px; font-weight: 700; }
.s360-h .erp-caption { font-weight: 500; margin-inline-start: 6px; }
.s360-person, .s360-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    padding: 10px 0; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap;
}
.s360-person:last-child, .s360-row:last-child { border-bottom: none; }
.s360-person > div:first-child, .s360-row > div:first-child { flex: 1 1 180px; min-width: 0; }
.s360-person-name { font-weight: 600; font-size: 13.5px; }
.s360-contact { display: flex; gap: 6px; }
.s360-contact a { text-decoration: none; }
.s360-link { color: inherit; text-decoration: none; }
.s360-link:hover .s360-person-name { color: var(--color-primary); }
.s360-row.is-reversed .s360-person-name { text-decoration: line-through; color: var(--color-text-disabled); }
.s360-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.s360-dl dt { font-size: 11.5px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.s360-dl dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; }
.s360-overdue td { background: var(--status-danger-bg); }
.erp-table td.num, .erp-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.s360-att-chips, .s360-dates { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.s360-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill);
    background: var(--status-neutral-bg); color: var(--status-neutral-fg); font-size: 12.5px; font-weight: 600;
}
.s360-chip.is-green { background: var(--status-success-bg); color: var(--status-success-fg); }
.s360-chip.is-red { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.s360-chip.is-amber { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.s360-chip.is-blue { background: var(--status-info-bg); color: var(--status-info-fg); }
.s360-bar { display: inline-block; width: calc(100% - 52px); height: 8px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; vertical-align: middle; margin-inline-end: 8px; }
.s360-bar span { display: block; height: 100%; background: var(--accent-green); }
.s360-bar span.is-low { background: var(--accent-amber); }
.s360-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.s360-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 15px; width: 2px; background: var(--color-divider); }
.s360-event { position: relative; display: flex; gap: var(--space-md); padding: 6px 0; }
.s360-event-icon {
    position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--status-info-bg); color: var(--status-info-fg); border: 2px solid var(--color-surface);
}
.s360-event.is-payment .s360-event-icon, .s360-event.is-admission .s360-event-icon { background: var(--status-success-bg); color: var(--status-success-fg); }
.s360-event.is-absence .s360-event-icon, .s360-event.is-withdrawal .s360-event-icon { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.s360-event.is-followup .s360-event-icon, .s360-event.is-leave .s360-event-icon { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.s360-event-title { font-weight: 600; font-size: 13.5px; padding-top: 5px; }
@media (max-width: 640px) {
    .s360-photo { width: 64px; height: 64px; font-size: 22px; }
    .s360-name { font-size: 19px; }
    .s360-actions { width: 100%; }
    .s360-actions > * { flex: 1; justify-content: center; }
    .s360-grid { grid-template-columns: 1fr; }
    .s360-dl { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .s360-kpi { flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-md); }
    .s360-kpi .erp-stat-value { font-size: 18px; }
}

/* ============================================================================
   [V2.5 Phase 4.1] Timetable (Timetable.razor, MyTimetable.razor, TimetableGrid.razor)
   ============================================================================ */
.tt-school { max-width: 260px; margin-inline-start: auto; height: 38px; padding-top: 6px; padding-bottom: 6px; }
.tt-panel { padding: var(--space-md) var(--space-lg); }
.tt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.tt-picker { max-width: 340px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.tt-date { margin-bottom: 0; min-width: 180px; }
.tt-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-inline-start: auto; }
.tt-section-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; margin: 0 0 var(--space-sm); }
.tt-hint { font-size: 12.5px; margin: var(--space-sm) 0 0; }

.tt-grid-wrap { overflow-x: auto; margin-top: var(--space-md); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tt-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.tt-grid th, .tt-grid td { border: 1px solid var(--color-divider); text-align: center; vertical-align: middle; }
.tt-grid thead th { background: var(--color-primary-fill); color: #fff; padding: 6px 4px; font-weight: 600; }
.tt-grid thead th.tt-break-col { background: #5B6B82; }
.tt-period-label { display: block; font-size: 12.5px; }
.tt-period-time { display: block; font-size: 11px; font-weight: 400; opacity: 0.85; }
.tt-day-col { width: 96px; }
.tt-grid tbody th.tt-day-col { background: var(--status-info-bg); color: var(--color-text-primary); font-size: 13px; font-weight: 600; padding: 6px; }
.tt-grid tr.is-today th.tt-day-col { background: var(--color-primary-fill); color: #fff; }
.tt-break-col { width: 40px; }
.tt-grid thead th.tt-break-col .tt-period-time { display: none; }
.tt-grid thead th.tt-break-col .tt-period-label { font-size: 10.5px; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; white-space: nowrap; }
.tt-grid td.tt-break-col { background: repeating-linear-gradient(135deg, var(--color-divider) 0 6px, transparent 6px 12px); }
.tt-grid td { height: 64px; padding: 0; }
.tt-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 64px; padding: 4px; border: 0; background: transparent; color: inherit; font: inherit; }
button.tt-cell { cursor: pointer; transition: background 0.15s; }
button.tt-cell:hover { background: var(--status-info-bg); }
button.tt-cell:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.tt-cell-main { font-weight: 600; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
.tt-cell-sub { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.2; overflow-wrap: anywhere; }
.tt-cell-sub.is-missing { color: var(--status-warning-fg); }
.tt-cell-add { font-size: 20px; color: var(--color-text-disabled); }
.tt-grid td.is-cover { background: var(--status-success-bg); }
.tt-cover-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--status-success-fg); }

.tt-subject-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-sm); font-size: 12.5px; }
.tt-count-chip { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--status-info-bg); color: var(--status-info-fg); }

.tt-away-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tt-away-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: var(--radius-pill); background: var(--status-danger-bg); color: var(--status-danger-fg); font-size: 13px; }
.tt-away-chip.is-done { background: var(--status-success-bg); color: var(--status-success-fg); }
.tt-away-reason { font-size: 11.5px; opacity: 0.85; }
.tt-chip-x { display: inline-flex; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.tt-chip-x .material-symbols-rounded { font-size: 16px; }
.tt-add-away { margin-top: var(--space-sm); max-width: 340px; }
.tt-add-away select { height: 38px; padding-top: 6px; padding-bottom: 6px; }
.tt-sub-table td { vertical-align: middle; }
.tt-sub-table tr.tt-row-open td:first-child { box-shadow: inset 3px 0 0 var(--accent-amber); }
.tt-sub-table tr.tt-row-done td:first-child { box-shadow: inset 3px 0 0 var(--accent-green); }
.tt-sub-select { min-width: 190px; height: 36px; padding-top: 4px; padding-bottom: 4px; }
.tt-sub-note { min-width: 160px; height: 36px; padding-top: 4px; padding-bottom: 4px; }

.tt-days { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.tt-day-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.tt-bell-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.tt-bell-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: 8px; border-radius: var(--radius-input); background: var(--color-background); }
.tt-bell-row.is-break { background: var(--status-warning-bg); }
.tt-bell-row .erp-input { height: 38px; padding-top: 6px; padding-bottom: 6px; }
.tt-bell-label { flex: 1 1 160px; min-width: 120px; }
.tt-bell-time { width: 150px; }
.tt-bell-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

.tt-cover-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.tt-cover-note { font-size: 12.5px; color: var(--color-text-secondary); }

@media (max-width: 640px) {
    .tt-toolbar-actions { margin-inline-start: 0; width: 100%; }
    .tt-toolbar-actions > * { flex: 1; justify-content: center; }
    .tt-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    .tt-tabs::-webkit-scrollbar { display: none; }
    .tt-tabs .erp-tab { flex-shrink: 0; }
    .tt-picker, .tt-school, .tt-add-away { max-width: none; width: 100%; }
    .tt-bell-time { width: calc(50% - 20px); }
}

/* ============================================================================
   [V2.5 Phase 4.2] Date sheet & admit cards (DateSheet.razor), Results print row
   ============================================================================ */
.ds-class-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.ds-table td { vertical-align: middle; }
.ds-input { height: 36px; padding-top: 4px; padding-bottom: 4px; min-width: 130px; }
.ds-instructions { width: 100%; min-height: 130px; resize: vertical; padding-top: 10px; font-family: inherit; line-height: 1.5; }
.ds-count { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; }
.ds-count.is-ok, .ds-chip.is-ok { background: var(--status-success-bg); color: var(--status-success-fg); }
.ds-count.is-blocked, .ds-chip.is-blocked { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ds-chip { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.ds-chip.is-allowed { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ds-reason { font-size: 11.5px; margin-top: 2px; }
.ds-actions { white-space: nowrap; }
.ds-actions > * + * { margin-inline-start: 6px; }
.rs-print-row { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
@media (max-width: 640px) {
    .rs-print-row > .erp-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   [V2.5 Phase 4.3] Certificates (Certificates.razor)
   ============================================================================ */
.ct-search { margin-bottom: 0; min-width: 260px; flex: 1 1 280px; max-width: 520px; }
.ct-filter { max-width: 240px; }
.ct-options { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.ct-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 8px 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-input); background: var(--color-surface); color: inherit; font: inherit; cursor: pointer; }
.ct-option:hover, .ct-option:focus-visible { border-color: var(--color-primary); background: var(--status-info-bg); outline: none; }
.ct-adm { font-size: 13px; font-weight: 500; margin-inline-start: 6px; }
.ct-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); margin: var(--space-md) 0; }
.ct-facts dt { font-size: 11.5px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.ct-facts dd { margin: 2px 0 0; font-weight: 600; }
.ct-due { color: var(--status-danger-fg); }
.ct-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-md); }
.ct-type { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1.5px solid var(--color-divider); border-radius: var(--radius-card); cursor: pointer; font-size: 13.5px; }
.ct-type input { margin-top: 3px; }
.ct-type .material-symbols-rounded { color: var(--color-primary); font-size: 22px; }
.ct-type.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.ct-type.is-off { cursor: not-allowed; opacity: 0.75; }
.ct-type.is-off .erp-text-muted { color: var(--status-danger-fg); }
.ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.ct-wide { grid-column: 1 / -1; }
.ct-prev-title { margin-top: var(--space-lg); }
tr.ct-cancelled td { opacity: 0.7; }
tr.ct-cancelled td:first-child strong { text-decoration: line-through; }
@media (max-width: 640px) {
    .ct-facts, .ct-types, .ct-form { grid-template-columns: 1fr; }
    .ct-search, .ct-filter { max-width: none; width: 100%; }
}

/* [V2.5 Phase 4.4] ID cards (IdCards.razor) */
.idc-check-col { width: 44px; text-align: center; }
.idc-check-col input { width: 16px; height: 16px; cursor: pointer; }

/* ============================================================================
   [V2.5 Phase 4.5] Academic calendar (AcademicCalendar.razor)
   ============================================================================ */
.cal-panel { padding: var(--space-md) var(--space-lg); }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.cal-nav { display: flex; align-items: center; gap: var(--space-sm); }
.cal-nav-btn { padding-inline: 8px; min-width: 38px; }
.cal-month { margin: 0; min-width: 170px; text-align: center; font-size: 18px; font-weight: 700; }
.cal-add { margin-inline-start: auto; }
.cal-toolbar .tt-school + .cal-add { margin-inline-start: 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-md) 0 var(--space-sm); }

.cal-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.5; background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
button.cal-chip { cursor: pointer; text-align: start; }
button.cal-chip:hover, button.cal-chip:focus-visible { filter: brightness(0.95); outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.cal-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-type-holiday { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.cal-type-vacation { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.cal-type-exam { background: var(--status-info-bg); color: var(--status-info-fg); }
.cal-type-event { background: var(--status-success-bg); color: var(--status-success-fg); }
.cal-type-ptm { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); border-inline-start: 1px solid var(--color-divider); }
.cal-head { padding: 6px; font-size: 12px; font-weight: 700; text-align: center; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--color-divider); border-inline-end: 1px solid var(--color-divider); background: var(--color-background); }
.cal-day { display: flex; flex-direction: column; gap: 3px; min-height: 96px; padding: 4px 5px 6px; border-bottom: 1px solid var(--color-divider); border-inline-end: 1px solid var(--color-divider); min-width: 0; }
.cal-day.is-other { background: var(--color-background); }
.cal-day.is-other .cal-day-num { color: var(--color-text-disabled); }
.cal-day.is-closed { background: color-mix(in srgb, var(--status-danger-bg) 55%, transparent); }
.cal-day.is-sunday .cal-day-num { color: var(--status-danger-fg); }
.cal-day-num { align-self: flex-start; min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 26px; text-align: center; }
button.cal-day-num { cursor: pointer; }
button.cal-day-num:hover, button.cal-day-num:focus-visible { background: var(--status-info-bg); outline: none; }
.cal-day.is-today .cal-day-num { background: var(--color-primary-fill); color: #fff; }
.cal-more { font-size: 11px; color: var(--color-text-secondary); padding-inline-start: 4px; }

.cal-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cal-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding: 12px 0; border-top: 1px solid var(--color-divider); }
.cal-item:first-child { border-top: 0; }
.cal-item-date { display: flex; flex-direction: column; font-size: 13.5px; }
.cal-item-title { margin-inline-start: 6px; }
.cal-item-desc { margin-top: 4px; font-size: 13px; }
.cal-item-closed { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--status-danger-fg); }
.cal-item-closed .material-symbols-rounded { font-size: 18px; }
.cal-item-actions { display: flex; gap: 6px; white-space: nowrap; }

.cal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.cal-wide { grid-column: 1 / -1; }
.cal-type-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }
.cal-type-option { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border: 1.5px solid var(--color-divider); border-radius: 999px; cursor: pointer; }
.cal-type-option.is-on { border-color: var(--color-primary); }
.cal-type-option input { margin: 0; }

@media (max-width: 760px) {
    .cal-panel { padding: var(--space-sm) var(--space-md); }
    .cal-day { min-height: 54px; padding: 2px; align-items: center; }
    .cal-day .cal-chip { width: 8px; height: 8px; padding: 0; font-size: 0; }
    .cal-day .cal-chip-text, .cal-more { display: none; }
    .cal-head { padding: 4px 0; font-size: 10.5px; letter-spacing: 0; }
    .cal-item { grid-template-columns: 1fr; gap: 6px; }
    .cal-toolbar { flex-direction: column; align-items: stretch; }
    .cal-nav { justify-content: space-between; }
    .cal-month { min-width: 0; flex: 1; font-size: 16px; }
    .cal-add { margin-inline-start: 0; justify-content: center; }
    .cal-form { grid-template-columns: 1fr; }
}

/* ============================================================================
   [V2.5 Phase 5.1] Result analytics (Exams/ResultAnalytics.razor)
   One series per chart, so one hue (--color-primary); value printed on each row.
   ============================================================================ */
.ra-select { max-width: 320px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.ra-context-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ra-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: var(--space-lg); align-items: start; }
.ra-grid > .fr-card { margin-bottom: 0; }
#ra_at_risk { margin-bottom: var(--space-lg); }
.ra-tab-count { margin-inline-start: 6px; }
.ra-note { margin: var(--space-sm) 0 0; }

.ra-bars { display: flex; flex-direction: column; gap: 8px; margin: var(--space-sm) 0; }
.ra-bar-row { display: grid; grid-template-columns: minmax(64px, 140px) minmax(0, 1fr) 96px; align-items: center; gap: 10px; font-size: 13px; }
.ra-bar-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-bar-track { height: 14px; border-radius: 0 4px 4px 0; background: var(--color-divider); overflow: hidden; }
.ra-bar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--color-primary-fill); transition: width 0.3s ease; }
[dir="rtl"] .ra-bar-track, [dir="rtl"] .ra-bar-fill { border-radius: 4px 0 0 4px; }
.ra-bar-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-subject-table { margin-top: var(--space-md); }
tr.ra-sub-row td { font-size: 12.5px; background: var(--color-background); }
tr.ra-sub-row td:first-child { padding-inline-start: 28px; }

.ra-change { display: inline-flex; align-items: center; gap: 1px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.ra-change .material-symbols-rounded { font-size: 15px; }
.ra-change.is-up { color: var(--status-success-fg); }
.ra-change.is-down { color: var(--status-danger-fg); }

.ra-rank, .ra-changes { list-style: none; margin: 0; padding: 0; }
.ra-rank li, .ra-changes li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-divider); font-size: 13.5px; }
.ra-rank li:first-child, .ra-changes li:first-child { border-top: 0; }
.ra-pos { flex: 0 0 26px; height: 26px; border-radius: 999px; background: var(--status-info-bg); color: var(--status-info-fg); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.ra-rank-name { flex: 1; min-width: 0; }
.ra-rank-name a { font-weight: 600; color: inherit; }
.ra-subtitle { margin: var(--space-md) 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-secondary); }

@media (max-width: 900px) {
    .ra-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ra-select { max-width: none; width: 100%; }
    .ra-bar-row { grid-template-columns: 72px minmax(0, 1fr) 84px; gap: 6px; }
    .ra-rank li, .ra-changes li { flex-wrap: wrap; }
}

/* ============================================================================
   [V2.5 Phase 5.2] Parent timeline (Parent/Timeline.razor)
   Tone colours always come with an icon and words.
   ============================================================================ */
.tl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }
.tl-filter-btn { padding: 6px 14px; border: 1.5px solid var(--color-divider); border-radius: 999px; background: var(--color-surface); color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tl-filter-btn.is-on { border-color: var(--color-primary); background: var(--status-info-bg); color: var(--color-primary); }
.tl-coming, .tl-feed { padding: var(--space-md) var(--space-lg); }
.tl-coming .erp-section-title { display: flex; align-items: center; gap: 6px; }
.tl-coming-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tl-coming-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-divider); border-inline-start: 4px solid var(--tl-tone); border-radius: 10px; }
.tl-coming-date { display: flex; flex-direction: column; align-items: center; min-width: 38px; line-height: 1.1; }
.tl-coming-date strong { font-size: 18px; }
.tl-coming-date span { font-size: 11px; text-transform: uppercase; color: var(--color-text-secondary); }
.tl-coming-body { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }

.tl-day + .tl-day { margin-top: var(--space-md); }
.tl-day-title { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.tl-list { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--color-divider); margin-inline-start: 17px; }
.tl-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 8px 0; margin-inline-start: -18px; }
.tl-icon { flex: 0 0 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--tl-bg); color: var(--tl-tone); box-shadow: 0 0 0 3px var(--color-surface); }
.tl-icon .material-symbols-rounded { font-size: 18px; }
.tl-body { flex: 1; min-width: 0; }
.tl-text { font-size: 14px; font-weight: 600; }
.tl-extra { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 3px; }
.tl-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-more { display: flex; justify-content: center; margin-top: var(--space-md); }

.tl-kind-info { --tl-tone: var(--status-info-fg); --tl-bg: var(--status-info-bg); }
.tl-kind-good { --tl-tone: var(--status-success-fg); --tl-bg: var(--status-success-bg); }
.tl-kind-warn { --tl-tone: var(--status-warning-fg); --tl-bg: var(--status-warning-bg); }
.tl-kind-bad  { --tl-tone: var(--status-danger-fg); --tl-bg: var(--status-danger-bg); }

@media (max-width: 640px) {
    .tl-coming, .tl-feed { padding: var(--space-sm) var(--space-md); }
    .tl-item { flex-wrap: wrap; }
    .tl-amount { margin-inline-start: 44px; }
}

/* ============================================================================
   [V2.5 Phase 5.3] Complaint box (Complaints.razor) - reuses .tl-filter-btn,
   .cal-chip, .cal-form from the timeline / calendar.
   ============================================================================ */
.cp-select { max-width: 240px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.cp-status-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 4px; border-radius: 999px; background: var(--color-divider); font-size: 11px; text-align: center; }
.cp-search { flex: 1 1 220px; max-width: 360px; margin: 0; }
.cp-actions { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
.cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-row { display: flex; align-items: flex-start; gap: var(--space-md); width: 100%; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cp-row:hover, .cp-row:focus-visible { border-color: var(--color-primary); outline: none; }
.cp-row.is-awaiting { border-inline-start: 4px solid var(--status-danger-fg); }
.cp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-serial { font-weight: 700; font-size: 12.5px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.cp-subject { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.cp-row-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--color-text-secondary); }
.cp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.cp-replies, .cp-awaiting { display: inline-flex; align-items: center; gap: 3px; }
.cp-replies .material-symbols-rounded, .cp-awaiting .material-symbols-rounded { font-size: 15px; }
.cp-awaiting { font-size: 12px; font-weight: 600; color: var(--status-danger-fg); }

.cp-detail { display: flex; flex-direction: column; gap: var(--space-sm); }
.cp-sender { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--color-background); font-size: 13px; }
.cp-sender .fr-tel { margin-inline-start: 8px; }
.cp-thread { list-style: none; margin: var(--space-sm) 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.cp-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; }
.cp-msg.is-sender { align-self: flex-start; background: var(--color-background); border: 1px solid var(--color-divider); }
.cp-msg.is-school { align-self: flex-end; background: var(--status-info-bg); }
.cp-msg-head { font-size: 11.5px; color: var(--color-text-secondary); margin-bottom: 3px; }
.cp-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-msg-status { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; }
.cp-msg-status .material-symbols-rounded { font-size: 15px; }
.cp-reply { margin-bottom: var(--space-sm); }
.cp-status-pick { max-width: 280px; }
.cp-anon { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; cursor: pointer; }
.cp-anon input { margin-top: 3px; width: 16px; height: 16px; }
.cp-anon > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }

@media (max-width: 640px) {
    .cp-select, .cp-search { max-width: none; width: 100%; }
    .cp-row { flex-direction: column; gap: 6px; }
    .cp-row-side { flex-direction: row; align-items: center; }
    .cp-msg { max-width: 100%; }
}

/* ============================================================================
   [V2.5 Phase 5.4] Owner daily digest (Owner/DailyDigest.razor)
   ============================================================================ */
.dg-date { width: 170px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
a.fr-kpi { color: inherit; text-decoration: none; }
.dg-note { margin: var(--space-sm) 0 0; }
.dg-settings-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-md); }
.dg-settings-row .erp-field { min-width: 180px; margin-bottom: 0; }
.dg-settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md); }
@media (max-width: 640px) {
    .dg-settings-row .erp-field, .dg-settings-row .cp-anon { width: 100%; }
    .dg-settings-actions > .erp-btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================================
   [V2.5 Phase 5.5] Branch comparison (Owner/BranchComparison.razor)
   Best / weakest carry a word + arrow, not colour alone.
   ============================================================================ */
.bc-range { display: flex; align-items: center; gap: 6px; }
.bc-card { padding: 0; overflow: hidden; }
.bc-card .dg-note { padding: 0 var(--space-lg) var(--space-md); }
.bc-table th.bc-measure { position: sticky; inset-inline-start: 0; z-index: 1; text-align: start; min-width: 190px; }
.bc-table thead th.bc-measure { z-index: 2; }
/* Row labels are body cells: the table's header look (white caps on blue) must not apply. */
.bc-table tbody th { background: var(--color-surface); color: var(--color-text-primary); font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.bc-table tbody th .fr-sub { font-weight: 400; }
.bc-table tr.bc-group th { background: var(--color-background); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); text-align: start; position: static; }
.bc-city { font-size: 11px; font-weight: 500; opacity: 0.85; text-transform: none; letter-spacing: 0; }
.bc-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-tag { display: inline-flex; align-items: center; gap: 1px; margin-top: 3px; padding: 0 6px 0 3px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.bc-tag .material-symbols-rounded { font-size: 13px; }
.bc-tag.is-best { background: var(--status-success-bg); color: var(--status-success-fg); }
.bc-tag.is-worst { background: var(--status-danger-bg); color: var(--status-danger-fg); }
@media (max-width: 640px) {
    .bc-range { width: 100%; }
    .bc-range .dg-date { flex: 1; width: auto; }
    .bc-table th.bc-measure { min-width: 130px; }
}

/* ============================================================================
   [V2.5 Phase 5.6] Audit trail (AuditTrail.razor)
   ============================================================================ */
.at-export { margin-inline-start: auto; }
.at-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.at-row { border: 1px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); }
.at-row.is-open { border-color: var(--color-primary); }
.at-head { display: flex; align-items: flex-start; gap: var(--space-md); width: 100%; padding: 10px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.at-head:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; border-radius: var(--radius-card); }
.at-when { flex: 0 0 64px; display: flex; flex-direction: column; font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.at-when strong { font-size: 13.5px; color: var(--color-text-primary); }
.at-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.at-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.at-record { font-weight: 600; font-size: 13.5px; }
.at-desc { font-size: 13.5px; overflow-wrap: anywhere; }
.at-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--color-text-secondary); }
.at-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.at-meta .material-symbols-rounded { font-size: 15px; }
.at-chevron { color: var(--color-text-secondary); }
.at-detail { padding: 0 14px 14px calc(64px + var(--space-md) + 14px); }
.at-changes { margin-bottom: var(--space-sm); }
.at-changes td { overflow-wrap: anywhere; font-size: 13px; }
.at-old { color: var(--status-danger-fg); text-decoration: line-through; text-decoration-thickness: 1px; }
.at-new { color: var(--status-success-fg); font-weight: 600; }
.at-facts { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: 0; font-size: 12.5px; }
.at-facts dt { color: var(--color-text-secondary); font-size: 11.5px; }
.at-facts dd { margin: 0; }
.at-device { max-width: 480px; overflow-wrap: anywhere; }
.at-pager { display: flex; justify-content: center; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
@media (max-width: 640px) {
    .at-export { margin-inline-start: 0; width: 100%; justify-content: center; }
    .at-detail { padding: 0 12px 12px; }
    .at-head { gap: 10px; padding: 10px 12px; }
    .at-when { flex-basis: 52px; }
}

/* ============================================================================
   [V2.5 Phase 5.7] Dark mode - <html data-theme="dark"> (js/theme.js).
   Screen only: printing and PDFs stay light. Most of the app follows the
   tokens; the rules after the token block cover the few places that use
   fixed colours (pale alert/notice fills, dark icon/text tints, the greeting
   card, the skeleton, the background picture) and a handful of dark text
   colours set inline by page code.
   ============================================================================ */
@media screen {
    html[data-theme="dark"] {
        color-scheme: dark;

        --color-primary: #7AA7FF;            /* text, links, borders, focus */
        --color-primary-fill: #2356C4;       /* behind white text */
        --color-primary-dark: #1C469F;
        --color-secondary: #6CB2FF;
        --color-success: #3FBF7F;
        --color-warning: #F5B042;
        --color-error: #F27B7B;
        --color-info: #4CC3F5;

        --color-background: #0B1220;
        --color-surface: #131C2E;
        --color-text-primary: #E6EDF7;
        --color-text-secondary: #A3B0C2;
        --color-text-disabled: #66758C;
        --color-divider: #26334B;
        --color-border-focus: #7AA7FF;
        --color-border-disabled: #33425C;

        --gradient-brand: linear-gradient(135deg, #1E4FB8 0%, #2B7BD8 100%);

        --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.28);
        --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.35);
        --shadow-dialog: 0 20px 50px rgba(0,0,0,0.6);
        --shadow-fab: 0 6px 16px rgba(0,0,0,0.5);

        --accent-navy: #7AA7FF;
        --accent-green: #4CC985;
        --accent-amber: #F2A93B;
        --accent-purple: #B79AF0;
        --accent-teal: #3CC8B8;
        --accent-slate: #94A3B8;
        --accent-brown: #D29B65;
        --accent-red: #F27B7B;

        --status-success-bg: rgba(76,201,133,0.15);  --status-success-fg: #7FDCA8;
        --status-danger-bg: rgba(242,123,123,0.16);  --status-danger-fg: #FFA3A3;
        --status-warning-bg: rgba(245,176,66,0.16);  --status-warning-fg: #F7C46A;
        --status-info-bg: rgba(122,167,255,0.15);    --status-info-fg: #A4C3FF;
        --status-neutral-bg: rgba(148,163,184,0.16); --status-neutral-fg: #C6D0DD;
    }

    /* The school picture behind every page, kept but dimmed. */
    html[data-theme="dark"] body,
    html[data-theme="dark"] .erp-login-wrapper {
        background-image: linear-gradient(rgba(11,18,32,0.93), rgba(11,18,32,0.93)), url('/images/app-background.jpg');
        background-image: linear-gradient(rgba(11,18,32,0.93), rgba(11,18,32,0.93)), image-set(url('/images/app-background.webp') type('image/webp'), url('/images/app-background.jpg') type('image/jpeg'));
    }

    /* Fixed pale fills. */
    html[data-theme="dark"] .erp-alert-error { background: rgba(242,123,123,0.12); border-color: rgba(242,123,123,0.3); }
    html[data-theme="dark"] .erp-alert-success { background: rgba(76,201,133,0.12); border-color: rgba(76,201,133,0.3); }
    html[data-theme="dark"] .erp-alert-warning { background: rgba(245,176,66,0.12); border-color: rgba(245,176,66,0.3); }
    html[data-theme="dark"] .erp-alert-info { background: rgba(122,167,255,0.12); border-color: rgba(122,167,255,0.28); }
    html[data-theme="dark"] .erp-info-note,
    html[data-theme="dark"] .fin-note { background: rgba(122,167,255,0.08); border-color: rgba(122,167,255,0.2); }
    html[data-theme="dark"] .erp-profile-photo { background: #1B2740; }
    html[data-theme="dark"] .erp-skeleton { background: linear-gradient(90deg, var(--color-divider) 25%, #33415A 37%, var(--color-divider) 63%); background-size: 400% 100%; }
    html[data-theme="dark"] .erp-loading-row { opacity: 0.18; }
    html[data-theme="dark"] .erp-celebration-card,
    html[data-theme="dark"] .erp-celebration-anniversary,
    html[data-theme="dark"] .erp-celebration-special { background: linear-gradient(165deg, #22304A 0%, var(--color-surface) 55%); }

    /* Dark icon / text tints that were fixed colours. */
    html[data-theme="dark"] .erp-stat-icon-purple, html[data-theme="dark"] .erp-hub-icon-purple, html[data-theme="dark"] .erp-hub-count-purple { color: #C4B0F5; }
    html[data-theme="dark"] .erp-stat-icon-green, html[data-theme="dark"] .erp-hub-icon-green, html[data-theme="dark"] .erp-hub-count-green { color: #7FDCA8; }
    html[data-theme="dark"] .erp-stat-icon-blue, html[data-theme="dark"] .erp-hub-icon-blue, html[data-theme="dark"] .erp-hub-count-blue,
    html[data-theme="dark"] .erp-info-banner .material-symbols-rounded { color: #8FD3F7; }
    html[data-theme="dark"] .erp-stat-icon-amber, html[data-theme="dark"] .erp-hub-icon-amber, html[data-theme="dark"] .erp-hub-count-amber,
    html[data-theme="dark"] .erp-celebration-sender, html[data-theme="dark"] .ar-warn { color: #F7C46A; }
    html[data-theme="dark"] .ar-badge-muted { color: #C6D0DD; }
    html[data-theme="dark"] .fu-wa-btn, html[data-theme="dark"] .ac-approve { color: #7FDCA8; border-color: rgba(127,220,168,0.4); }

    /* The same dark text colours when page code sets them inline. */
    html[data-theme="dark"] [style*="color:#006400"]:not([style*="background-color:#006400"]),
    html[data-theme="dark"] [style*="color: #006400"],
    html[data-theme="dark"] [style*="color:#0B6B34"] { color: #7FDCA8 !important; }
    html[data-theme="dark"] [style*="color:#8B0000"]:not([style*="background-color:#8B0000"]),
    html[data-theme="dark"] [style*="color: #8B0000"] { color: #FFA3A3 !important; }
    html[data-theme="dark"] [style*="color:#a15c00"], html[data-theme="dark"] [style*="color: #a15c00"] { color: #F7C46A !important; }
    html[data-theme="dark"] [style*="color:#1471a8"], html[data-theme="dark"] [style*="color: #1471a8"] { color: #8FD3F7 !important; }
    html[data-theme="dark"] [style*="color:#6F42C1"], html[data-theme="dark"] [style*="color: #6F42C1"] { color: #C4B0F5 !important; }
    html[data-theme="dark"] [style*="color:#0B3D91"], html[data-theme="dark"] [style*="color: #0B3D91"] { color: #A4C3FF !important; }

    /* Things that must stay paper-white: question-paper preview, printed docs. */
    html[data-theme="dark"] .qp-print-root { color: #000; background: #fff; }
}

/* ---- Settings: Appearance choice ---- */
.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.theme-choice { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1.5px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.theme-choice:hover { border-color: var(--color-primary); }
.theme-choice:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.theme-choice.is-on { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--status-info-bg); }
.theme-swatch { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 10px; border: 1px solid rgba(128,128,128,0.25); }
.theme-swatch .material-symbols-rounded { font-size: 24px; }
.theme-swatch-light { background: #F5F7FB; color: #0B3D91; }
.theme-swatch-dark { background: #0B1220; color: #7AA7FF; }
.theme-swatch-system { background: linear-gradient(135deg, #F5F7FB 0%, #F5F7FB 50%, #0B1220 50%, #0B1220 100%); color: #5F6B7A; }

/* [V2.5 Phase 5.8] Settings: iPhone "Add to Home Screen" steps */
.pwa-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pwa-steps .material-symbols-rounded { font-size: 18px; vertical-align: -4px; color: var(--color-primary); }

/* ============================================================================
   [V2.6] Settings hub - /settings/{section}
   Desktop: a sticky section menu on the start side, one section at a time on
   the other. Phone/tablet (<=900px): the menu becomes a row of chips that
   scrolls sideways under the page header. Logical properties throughout, so
   Urdu (RTL) mirrors on its own.
   ============================================================================ */
.set-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.set-nav {
    position: sticky; top: var(--space-lg);
    background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: var(--space-standard) var(--space-sm);
}
.set-nav-user { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-sm) var(--space-standard); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-divider); }
.set-nav-user-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-nav-user-role { font-size: 12px; color: var(--color-text-secondary); }
.set-nav-group { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-secondary); padding: var(--space-md) var(--space-sm) var(--space-xs); }
.set-nav-links { display: flex; flex-direction: column; gap: 2px; }
.set-nav-link {
    display: flex; align-items: center; gap: var(--space-md);
    padding: 10px var(--space-md); border-radius: 12px;
    color: var(--color-text-primary); text-decoration: none; font-size: 14px; font-weight: 500;
    transition: background var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease;
}
.set-nav-link .material-symbols-rounded { font-size: 20px; color: var(--color-text-secondary); }
.set-nav-link:hover { background: var(--status-info-bg, rgba(11,61,145,0.06)); }
.set-nav-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.set-nav-link.is-on { background: var(--status-info-bg, rgba(11,61,145,0.08)); color: var(--color-primary); font-weight: 600; }
.set-nav-link.is-on .material-symbols-rounded { color: var(--color-primary); }

.set-avatar-sm { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-background); color: var(--color-text-secondary); }
.set-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.set-avatar-sm .material-symbols-rounded { font-size: 28px; }

.set-panel { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.set-panel-head { display: flex; align-items: flex-start; gap: var(--space-md); }
.set-panel-head .erp-page-header-icon { width: 40px; height: 40px; border-radius: 12px; }
.set-panel-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 2px; }
.set-panel-hint { font-size: 13px; color: var(--color-text-secondary); margin: 0; }

.set-card { padding: var(--space-xl); }
.set-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.set-card-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 2px; }
.set-card-hint { font-size: 12.5px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.set-card-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.set-divider { height: 1px; background: var(--color-divider); margin: var(--space-lg) 0; border: 0; }

/* Photo / logo picker: the whole avatar is the button (a <label> around a hidden file input). */
.set-photo-row { display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap; }
.set-photo { position: relative; width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; cursor: pointer; display: block; }
.set-photo-logo { border-radius: 20px; }
.set-photo-img { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-background); color: var(--color-text-secondary); box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 5px var(--color-divider); }
.set-photo-img img { width: 100%; height: 100%; object-fit: cover; }
.set-photo-logo .set-photo-img img { object-fit: contain; background: #fff; }
.set-photo-img .material-symbols-rounded { font-size: 56px; }
.set-photo-badge {
    position: absolute; inset-inline-end: 2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-fill); color: #fff; box-shadow: 0 0 0 3px var(--color-surface);
}
.set-photo-logo .set-photo-badge { inset-inline-end: -6px; bottom: -6px; }
.set-photo-badge .material-symbols-rounded { font-size: 17px; }
.set-photo:hover .set-photo-img { box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-primary); }
.set-photo:focus-within .set-photo-img { box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-border-focus); }
.set-photo.is-busy { pointer-events: none; opacity: 0.7; }
.set-photo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.set-photo-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.set-photo-text .erp-btn { cursor: pointer; }

/* Read-only account details */
.set-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-standard) var(--space-xl); margin: 0; }
.set-details div { min-width: 0; }
.set-details dt { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
.set-details dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text-primary); overflow-wrap: anywhere; }
.set-details dd.is-empty { font-weight: 400; color: var(--color-text-disabled); }

/* Two-option segmented control (language) */
.set-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-button); background: var(--color-background); border: 1px solid var(--color-divider); }
.set-segment button { border: 0; background: transparent; color: var(--color-text-secondary); font: inherit; font-weight: 600; font-size: 14px; padding: 10px; border-radius: 12px; cursor: pointer; }
.set-segment button.is-on { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-card); }
.set-segment button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

/* Password strength */
.set-pw-meter { display: flex; align-items: center; gap: var(--space-md); margin: -4px 0 var(--space-standard); }
.set-pw-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.set-pw-bars span { height: 6px; border-radius: 3px; background: var(--color-divider); transition: background 0.2s ease; }
.set-pw-meter[data-level="1"] .set-pw-bars span:nth-child(-n+1) { background: var(--accent-red, #D14343); }
.set-pw-meter[data-level="2"] .set-pw-bars span:nth-child(-n+2) { background: var(--accent-amber, #E08A00); }
.set-pw-meter[data-level="3"] .set-pw-bars span:nth-child(-n+3) { background: var(--accent-teal, #0E9F8E); }
.set-pw-meter[data-level="4"] .set-pw-bars span:nth-child(-n+4) { background: var(--accent-green, #1E8E4E); }
.set-pw-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); min-width: 88px; text-align: end; }
.set-pw-rules { list-style: none; margin: 0 0 var(--space-standard); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-lg); }
.set-pw-rules li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-secondary); }
.set-pw-rules .material-symbols-rounded { font-size: 18px; color: var(--color-text-disabled); }
.set-pw-rules li.is-ok { color: var(--status-success-fg); }
.set-pw-rules li.is-ok .material-symbols-rounded { color: var(--status-success-fg); }

/* Status pill (payments) */
.set-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.set-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.set-pill-on { background: var(--status-success-bg); color: var(--status-success-fg); }
.set-pill-off { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.set-pill-none { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* Read-only value + copy button */
.set-copy { display: flex; align-items: center; gap: var(--space-sm); border: 1px dashed var(--color-divider); border-radius: var(--radius-input); padding: 6px 6px 6px var(--space-md); background: var(--color-background); }
.set-copy code { flex: 1; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; color: var(--color-text-primary); background: none; }
.set-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; }

/* Toggle row */
.set-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; }
.set-switch-row label { font-size: 14px; color: var(--color-text-primary); }
.set-switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--color-border-disabled); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease; margin: 0; }
.set-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: inset-inline-start 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.set-switch:checked { background: var(--color-primary-fill); }
.set-switch:checked::after { inset-inline-start: 21px; }
.set-switch:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* Branding live preview - a small copy of the real sidebar header */
.set-brand-preview { border-radius: var(--radius-card); background: var(--gradient-brand); padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); color: #fff; }
.set-brand-preview img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #fff; flex-shrink: 0; }
.set-brand-preview-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-brand-preview-tag { font-size: 12px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-brand-preview > div { min-width: 0; }

/* "More school settings" link cards */
.set-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.set-link-card {
    display: flex; align-items: center; gap: var(--space-md); padding: var(--space-standard);
    background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    color: inherit; text-decoration: none; border: 1px solid transparent;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.set-link-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-divider); }
.set-link-card:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.set-link-card .erp-page-header-icon { width: 40px; height: 40px; border-radius: 12px; }
.set-link-card-title { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.set-link-card-hint { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }
.set-link-card > div { flex: 1; min-width: 0; }
.set-link-card .set-link-arrow { color: var(--color-text-disabled); font-size: 20px; }
[dir="rtl"] .set-link-card .set-link-arrow { transform: scaleX(-1); }

/* Embedded components keep their own cards; inside the hub they fill the panel width. */
.set-panel .erp-card { max-width: none !important; margin-top: 0 !important; }

@media (max-width: 900px) {
    .set-shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-standard); }
    .set-nav {
        position: sticky; top: 0; z-index: 5;
        padding: var(--space-sm); border-radius: var(--radius-card);
        overflow-x: auto; scrollbar-width: none;
    }
    .set-nav::-webkit-scrollbar { display: none; }
    .set-nav-user, .set-nav-group { display: none; }
    .set-nav-body { display: flex; gap: 6px; width: max-content; }
    .set-nav-links { flex-direction: row; gap: 6px; }
    .set-nav-link { white-space: nowrap; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 13px; border: 1px solid var(--color-divider); }
    .set-nav-link.is-on { border-color: transparent; background: var(--color-primary-fill); color: #fff; }
    .set-nav-link.is-on .material-symbols-rounded { color: #fff; }
    .set-nav-link .material-symbols-rounded { font-size: 18px; }
    .set-card { padding: var(--space-lg); }
    .set-links, .set-details, .set-pw-rules { grid-template-columns: minmax(0, 1fr); }
    .set-photo-row { gap: var(--space-lg); }
}

/* [V2.6] Chart of Accounts management */
.acct-chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin: var(--space-md) 0 var(--space-xs); }
.acct-chart-toolbar .erp-caption { flex: 1 1 260px; }
.acct-row-inactive td { color: var(--color-text-disabled); }
.acct-badge { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; background: var(--status-neutral-bg); color: var(--status-neutral-fg); vertical-align: middle; }
.acct-badge-off { background: var(--status-warning-bg); color: var(--status-warning-fg); }

/* ============================================================================
   [V2.6] SelfAttendanceCard - "My Attendance" and the Driver / Staff dashboards
   ============================================================================ */
.ma-grid { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.6fr); gap: var(--space-lg); align-items: start; }
.ma-grid-compact { margin-top: var(--space-lg); }
.ma-grid .erp-card { padding: var(--space-xl); }
.ma-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-secondary); }
.ma-muted { font-size: 12.5px; color: var(--color-text-secondary); }

.ma-today { display: flex; flex-direction: column; gap: var(--space-md); }
.ma-today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.ma-today-date { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin-top: 2px; }
.ma-today-icon { font-size: 30px; color: var(--color-primary); background: var(--status-info-bg); border-radius: 14px; padding: 8px; }
.ma-today-status { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.ma-today-status .ma-chip { font-size: 14px; padding: 6px 14px; }
.ma-today-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.ma-today-actions .erp-btn { flex: 1 1 140px; }
.ma-today-note { display: flex; align-items: center; gap: 8px; padding: var(--space-md); border-radius: var(--radius-input); background: var(--status-info-bg); color: var(--status-info-fg); font-size: 13.5px; font-weight: 500; }
.ma-today-note-warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ma-timing { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-text-secondary); border-top: 1px solid var(--color-divider); padding-top: var(--space-md); }
.ma-timing .material-symbols-rounded { font-size: 16px; }

.ma-month-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.ma-month-name { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin-top: 2px; }
.ma-month-nav { display: flex; gap: 6px; }
.ma-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ma-icon-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.ma-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
[dir="rtl"] .ma-icon-btn .material-symbols-rounded { transform: scaleX(-1); }

.ma-summary { display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.ma-ring { --pct: 0; width: 112px; height: 112px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--accent-green, #1E8E4E) calc(var(--pct) * 1%), var(--color-divider) 0);
    display: flex; align-items: center; justify-content: center; }
.ma-ring-inner { width: 86px; height: 86px; border-radius: 50%; background: var(--color-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ma-ring-inner strong { font-size: 22px; color: var(--color-text-primary); line-height: 1.1; }
.ma-ring-inner span { font-size: 10.5px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; }
.ma-stats { flex: 1 1 220px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--space-lg); }
.ma-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); }
.ma-stat strong { margin-inline-start: auto; font-size: 16px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ma-stat-total { grid-column: 1 / -1; border-top: 1px dashed var(--color-divider); padding-top: 8px; }
.ma-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.ma-dot-present { background: #1E8E4E; }
.ma-dot-late { background: #E08A00; }
.ma-dot-leave { background: #3B82F6; }
.ma-dot-absent { background: #D14343; }
.ma-dot-off { background: var(--color-divider); }

.ma-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.ma-cal-head { font-size: 11px; font-weight: 600; text-align: center; color: var(--color-text-secondary); padding-bottom: 2px; }
.ma-cal-cell { aspect-ratio: 1 / 1; max-height: 44px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.ma-cal-blank { visibility: hidden; }
.ma-cal-present, .ma-cal-halfday { background: rgba(30,142,78,0.16); color: #146b3a; }
.ma-cal-late { background: rgba(224,138,0,0.18); color: #8a5500; }
.ma-cal-leave { background: rgba(59,130,246,0.16); color: #1d4ed8; }
.ma-cal-absent { background: rgba(209,67,67,0.14); color: #a12a2a; }
.ma-cal-holiday { background: rgba(124,58,237,0.12); color: #6d28d9; }
.ma-cal-off { background: var(--color-background); color: var(--color-text-disabled); }
.ma-cal-future, .ma-cal-before { color: var(--color-text-disabled); border-color: var(--color-divider); border-style: dashed; }
.ma-cal-pending { border-color: var(--color-warning); color: var(--color-text-primary); }
.ma-cal-cell.is-today { box-shadow: 0 0 0 2px var(--color-primary); }
.ma-legend { display: flex; flex-wrap: wrap; gap: 6px var(--space-md); margin-top: var(--space-md); font-size: 11.5px; color: var(--color-text-secondary); }
.ma-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ma-more { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--space-md); }

.ma-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ma-chip-present, .ma-chip-halfday { background: var(--status-success-bg); color: var(--status-success-fg); }
.ma-chip-late { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ma-chip-leave { background: var(--status-info-bg); color: var(--status-info-fg); }
.ma-chip-absent { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ma-chip-holiday, .ma-chip-off, .ma-chip-future { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.ma-chip-pending { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ma-row-muted td { color: var(--color-text-secondary); }
.ma-table-card { margin-top: var(--space-lg); padding: var(--space-xl); }

@media screen {
    html[data-theme="dark"] .ma-cal-present, html[data-theme="dark"] .ma-cal-halfday { color: #7FDCA8; }
    html[data-theme="dark"] .ma-cal-late { color: #F7C46A; }
    html[data-theme="dark"] .ma-cal-leave { color: #A4C3FF; }
    html[data-theme="dark"] .ma-cal-absent { color: #FFA3A3; }
    html[data-theme="dark"] .ma-cal-holiday { color: #C4B0F5; }
}
@media (max-width: 900px) {
    .ma-grid { grid-template-columns: minmax(0, 1fr); }
    .ma-grid .erp-card, .ma-table-card { padding: var(--space-lg); }
    .ma-summary { gap: var(--space-lg); }
}
/* [V2.6] EmployeeHome - latest payslip */
.eh-payslip { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.eh-payslip-net { font-size: 24px; font-weight: 800; color: var(--color-text-primary); margin: 2px 0; font-variant-numeric: tabular-nums; }

/* ============================================================================
   [V2.6] Take Attendance (Teacher)
   ============================================================================ */
.ta-toolbar { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: stretch; margin-bottom: var(--space-md); }
.ta-class { flex: 1 1 260px; margin-bottom: 0; }
.ta-day { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ta-day .erp-field { width: 170px; }
.ta-day .ma-icon-btn { height: 46px; width: 40px; }

.ta-summary { padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-md); }
.ta-summary-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.ta-summary-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin-top: 2px; }
.ta-rate { text-align: end; }
.ta-rate strong { display: block; font-size: 24px; color: var(--status-success-fg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ta-rate span { font-size: 11px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; }
.ta-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--color-divider); }
.ta-bar-seg { height: 100%; transition: width 0.25s ease; }
.ta-chips { display: flex; flex-wrap: wrap; gap: 6px var(--space-lg); margin-top: var(--space-md); }
.ta-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-secondary); }
.ta-count strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ta-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ta-seg-present { background: #1E8E4E; }
.ta-seg-late { background: #E08A00; }
.ta-seg-halfday { background: #0E9F8E; }
.ta-seg-leave { background: #3B82F6; }
.ta-seg-absent { background: #D14343; }
.ta-seg-unmarked { background: var(--color-border-disabled); }

.ta-filter-row { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.ta-search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-input); padding: 0 var(--space-md); }
.ta-search:focus-within { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(11,61,145,0.10); }
.ta-search .material-symbols-rounded { font-size: 20px; color: var(--color-text-secondary); }
.ta-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; padding: 11px 0; color: var(--color-text-primary); min-width: 0; }
.ta-filter { flex: 0 0 auto; grid-template-columns: repeat(3, auto); }
.ta-filter button { padding: 8px 14px; font-size: 13px; }

.ta-list { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.ta-row { display: flex; align-items: center; gap: var(--space-md); padding: 12px var(--space-lg); border-bottom: 1px solid var(--color-divider); }
.ta-row:last-child { border-bottom: 0; }
.ta-row.is-open { background: linear-gradient(90deg, rgba(245,176,66,0.07), transparent 40%); }
.ta-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--status-info-bg); color: var(--color-primary); font-weight: 700; font-size: 14px; }
.ta-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ta-who { flex: 1 1 auto; min-width: 0; }
.ta-name { font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-meta { font-size: 12px; color: var(--color-text-secondary); }
.ta-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ta-choices { display: flex; gap: 6px; }
.ta-choice { min-width: 42px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--color-divider); background: var(--color-surface); color: var(--color-text-secondary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.12s ease; }
.ta-choice:hover { border-color: currentColor; }
.ta-choice:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.ta-choice-long { display: none; }
.ta-choice-present { --c: #1E8E4E; }
.ta-choice-absent { --c: #D14343; }
.ta-choice-late { --c: #E08A00; }
.ta-choice-leave { --c: #3B82F6; }
.ta-choice-halfday { --c: #0E9F8E; }
.ta-choice:hover { color: var(--c); }
.ta-choice.is-on { background: var(--c); border-color: var(--c); color: #fff; }
.ta-saved-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-pill); color: #fff; font-size: 12px; font-weight: 700; }
.ta-saved-chip.ta-seg-unmarked { color: var(--color-text-secondary); background: var(--color-background); }

.ta-savebar {
    position: sticky; bottom: var(--space-md); z-index: 20; margin-top: var(--space-md);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
    padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card);
    background: var(--color-surface); box-shadow: var(--shadow-dialog); border: 1px solid var(--color-divider);
}
.ta-savebar-text { display: flex; flex-direction: column; }
.ta-savebar-text strong { color: var(--color-text-primary); }
.ta-savebar-text span { font-size: 12px; color: var(--color-text-secondary); }

@media (min-width: 1200px) {
    .ta-choice-short { display: none; }
    .ta-choice-long { display: inline; }
}
@media (max-width: 720px) {
    .ta-row { flex-wrap: wrap; padding: 12px var(--space-md); }
    .ta-status { width: 100%; justify-content: flex-start; padding-inline-start: 52px; }
    .ta-choices { width: 100%; }
    .ta-choice { flex: 1 1 0; }
    .ta-day .erp-field { flex: 1 1 140px; width: auto; }
    .ta-filter { width: 100%; }
    .ta-savebar .erp-btn { flex: 1 1 100%; }
}

/* [V2.6] Teacher dashboard */
.td-lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.td-lesson { display: flex; align-items: center; gap: var(--space-md); padding: 10px var(--space-md); border-radius: 12px; border: 1px solid var(--color-divider); }
.td-lesson-time { width: 58px; flex-shrink: 0; font-weight: 700; font-size: 13px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.td-lesson-time span { font-weight: 400; font-size: 11.5px; color: var(--color-text-secondary); }
.td-lesson-body { flex: 1; min-width: 0; }
.td-lesson-title { font-weight: 600; color: var(--color-text-primary); }
.td-lesson-meta { font-size: 12px; color: var(--color-text-secondary); }
.td-lesson-past { opacity: 0.55; }
.td-lesson-now { border-color: var(--status-success-fg); background: var(--status-success-bg); }
.td-lesson-next { border-color: var(--color-primary); }
.td-class { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-divider); }
.td-class:last-child { border-bottom: 0; }
.td-class-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: 8px; }

/* ============================================================================
   [V2.6] Cash Position - "Differs from ledger" breakdown + traceable movements
   ============================================================================ */
.cashpos-kpi-icon { font-size: 15px; vertical-align: -3px; margin-inline-end: 2px; color: var(--color-primary); }
.cashpos-diff-btn { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.cashpos-diff-btn:hover { filter: brightness(0.96); text-decoration: underline; }
.cashpos-diff-action { font-weight: 700; }
tr.cashpos-subtotal td { font-weight: 600; color: var(--color-text-secondary); }

.cashrec { border-top: 1px solid var(--color-divider); padding: var(--space-lg); }
.cashrec-title { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-sm); font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.cashrec-title .material-symbols-rounded { color: var(--color-primary); font-size: 20px; }
.cashrec-intro, .cashrec-hint { font-size: 12.5px; color: var(--color-text-secondary); margin: 0 0 var(--space-md); line-height: 1.5; }
.cashrec-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-md); }
.cashrec-side { border: 1px solid var(--color-divider); border-radius: var(--radius-input); padding: var(--space-sm) var(--space-md); background: var(--color-surface); min-width: 0; }
.cashrec-side.is-diff { border-color: var(--status-danger-fg); background: var(--status-danger-bg); }
.cashrec-amount { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cashrec-bridge { border: 1px solid var(--color-divider); border-radius: var(--radius-input); overflow: hidden; }
.cashrec-block { border-top: 1px solid var(--color-divider); padding-bottom: var(--space-sm); }
.cashrec-block .cashrec-hint { padding: 0 var(--space-md); margin-bottom: var(--space-sm); }
.cashrec-block .fin-table-wrap { padding: 0 var(--space-md); }
.cashrec-line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); font-size: 13.5px; }
.cashrec-line > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cashrec-line strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cashrec-line.is-start { background: var(--color-background); font-weight: 600; }
.cashrec-line.is-end { border-top: 2px solid var(--color-divider); background: var(--color-background); font-weight: 700; }
.cashrec-line.is-warn { color: var(--status-warning-fg); }

.cashmv-card { text-align: start; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--color-divider); background: var(--color-surface); border-radius: var(--radius-card); }
.cashmv-card:hover, .cashmv-card:focus-visible { border-color: var(--color-primary); outline: none; }
.cashmv-card-link { display: flex; align-items: center; gap: 2px; color: var(--color-primary); font-weight: 600; }
.cashmv-card-link .material-symbols-rounded { font-size: 16px; }
.cashmv-formula { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); border-radius: var(--radius-input); background: var(--color-background); }
.cashmv-formula-title { font-weight: 600; color: var(--color-text-secondary); }
.cashmv-formula-hint { flex-basis: 100%; font-size: 11.5px; }
.cashmv-cell-link { border: 0; background: none; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-decoration: underline dotted; font-variant-numeric: tabular-nums; }
.cashmv-cell-link:hover { text-decoration: underline; }
.cashmv-table { min-width: 760px; }
.cashmv-table td { font-size: 12.5px; vertical-align: top; }

@media (max-width: 720px) {
    .cashrec { padding: var(--space-md); }
    .cashrec-compare { grid-template-columns: 1fr; }
}

/* ============================================================================
   [V2.6] Greeting Settings - schedule + one card per message
   ============================================================================ */
.greet-schedule { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: stretch; }
.greet-time-field { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.greet-time-field .erp-field { width: 200px; }
.greet-effective { border-inline-start: 3px solid var(--color-primary); padding: 2px var(--space-md); min-width: 0; }
.greet-effective-time { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.greet-pending { color: var(--status-warning-fg); font-weight: 600; }

.greet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.greet-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-card); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.greet-card-head { display: flex; align-items: center; gap: var(--space-sm); }
.greet-card-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--status-info-bg); color: var(--color-primary); }
.greet-card-icon .material-symbols-rounded { font-size: 20px; }
.greet-card-title { flex: 1; margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); min-width: 0; }
.greet-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-md); margin: 0; font-size: 12.5px; }
.greet-meta dt { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-secondary); font-weight: 600; }
.greet-meta dt .material-symbols-rounded { font-size: 15px; }
.greet-meta dd { margin: 0; color: var(--color-text-primary); }
.greet-textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.greet-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.greet-tokens-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.greet-token { display: inline-flex; flex-direction: column; align-items: flex-start; border: 1px dashed var(--color-primary); background: var(--status-info-bg); color: var(--color-primary); border-radius: 10px; padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; line-height: 1.3; }
.greet-token:hover { border-style: solid; }
.greet-token-desc { font-weight: 500; font-size: 10.5px; color: var(--color-text-secondary); }
.greet-reset, .greet-customize { align-self: flex-start; }
.greet-preview { margin-top: auto; border-top: 1px dashed var(--color-divider); padding-top: var(--space-sm); }
.greet-preview-head { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; flex-wrap: wrap; }
.greet-preview-head .material-symbols-rounded { font-size: 16px; }
.greet-bubble { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; background: var(--color-background); border: 1px solid var(--color-divider); border-radius: 4px 14px 14px 14px; padding: var(--space-sm) var(--space-md); max-height: 240px; overflow-y: auto; }
.greet-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-card); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
.greet-unsaved { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--status-warning-fg); }

@media (max-width: 900px) {
    .greet-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .greet-card { padding: var(--space-md); }
    .greet-time-field .erp-field { width: 100%; }
    .greet-effective { padding-inline-start: var(--space-sm); }
}

/* ============================================================================
   [V2.6] Complaint Box - lifecycle stages (filters) + detail tracker
   ============================================================================ */
.cp-stages { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.cp-stage { width: 100%; height: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
            padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-divider); border-top: 3px solid var(--cp-stage-color, var(--color-divider));
            border-radius: var(--radius-input); background: var(--color-surface); }
.cp-stage:hover, .cp-stage:focus-visible { border-color: var(--cp-stage-color); outline: none; }
.cp-stage.is-on { background: var(--status-info-bg); border-color: var(--cp-stage-color); box-shadow: inset 0 0 0 1px var(--cp-stage-color); }
.cp-stage-open { --cp-stage-color: var(--status-warning-fg); }
.cp-stage-inprogress { --cp-stage-color: var(--status-info-fg); }
.cp-stage-resolved { --cp-stage-color: var(--status-success-fg); }
.cp-stage-closed { --cp-stage-color: var(--status-neutral-fg); }
.cp-stage-top { display: flex; align-items: center; gap: 6px; }
.cp-stage-step { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--cp-stage-color); }
.cp-stage-name { flex: 1; font-weight: 700; font-size: 13.5px; }
.cp-stage-count { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.cp-stage-desc { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.4; }
.cp-stage-legend { font-size: 12.5px; color: var(--color-text-secondary); margin: 0 0 var(--space-sm); }
.cp-tracker { list-style: none; display: flex; margin: var(--space-sm) 0; padding: 0; counter-reset: cpstep; }
.cp-tracker li { flex: 1; position: relative; text-align: center; font-size: 11.5px; color: var(--color-text-secondary); padding-top: 22px; }
.cp-tracker li::before { counter-increment: cpstep; content: counter(cpstep); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%;
                         background: var(--color-divider); color: var(--color-text-secondary); font-size: 10.5px; font-weight: 700; line-height: 18px; z-index: 1; }
.cp-tracker li + li::after { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--color-divider); }
.cp-tracker li.is-done::before, .cp-tracker li.is-current::before { background: var(--color-primary); color: #fff; }
.cp-tracker li.is-done + li::after, .cp-tracker li.is-current::after { background: var(--color-primary); }
.cp-tracker li.is-current { color: var(--color-text-primary); font-weight: 700; }
@media (max-width: 720px) {
    .cp-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* [V2.6] Question paper printed in English - left-to-right, a print serif instead of Nastaliq. */
.qp-print-root.is-ltr { direction: ltr; font-family: 'Times New Roman', Georgia, serif; line-height: 1.6; font-size: 15px; }

/* ============================================================================
   [V2.6] Result card remarks - compact AI tool, solid locked cards, print dialog
   ============================================================================ */
.rr-tools { margin-inline-start: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.rr-ai-off { font-weight: 500; font-size: 11.5px; color: var(--color-text-secondary); }
.rr-ai-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: var(--space-sm);
               border: 1px dashed var(--color-divider); border-radius: var(--radius-input); background: var(--color-surface); }
.rr-ai-text { flex: 1; min-width: 220px; margin: 0; font-size: 12.5px; color: var(--color-text-secondary); }
.rr-print-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-sm); }
.rr-print-scope > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-input); min-width: 0; }
.rr-print-hint { font-size: 12.5px; color: var(--color-text-secondary); margin: 0 0 var(--space-sm); line-height: 1.5; }
.rr-print-pick-head { padding: 6px 0; border-bottom: 1px solid var(--color-divider); }
.rr-print-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.rr-print-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--color-divider); cursor: pointer; }
.rr-print-name { display: flex; flex-direction: column; min-width: 0; }
.rr-print-name span { font-size: 11.5px; color: var(--color-text-secondary); }
.rr-print-remark { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--color-text-secondary); white-space: nowrap; }
.rr-print-remark .material-symbols-rounded { font-size: 15px; }
@media (max-width: 720px) {
    .rr-tools { margin-inline-start: 0; width: 100%; }
    .rr-print-scope { grid-template-columns: 1fr; }
    .rr-print-row { grid-template-columns: auto minmax(0, 1fr); }
    .rr-print-row .v26-chip, .rr-print-remark { grid-column: 2; justify-self: start; }
}

/* ============================================================================
   [V2.6] Fee Management - per-tab toolbars + Fee Settings layout
   ============================================================================ */
.fm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
.fm-filter { margin-bottom: 0; width: 190px; }
.fm-filter.is-wide { width: 220px; }
.fm-toolbar-actions { margin-inline-start: auto; display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.fm-hint { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 var(--space-md); }

.fs-section { margin-bottom: var(--space-lg); }
.fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.fs-span { grid-column: 1 / -1; }
.fs-group { border: 1px solid var(--color-divider); border-radius: var(--radius-input); padding: var(--space-md) var(--space-lg); background: var(--color-surface); min-width: 0; }
.fs-group-title { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-md); font-size: 13.5px; font-weight: 700; color: var(--color-text-primary); }
.fs-group-title .material-symbols-rounded { font-size: 18px; color: var(--color-primary); }
.fs-hint { font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); margin: 6px 0 var(--space-md); }
.fs-pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-md); }
.fs-master { margin-bottom: var(--space-md); }
.fs-actions { display: flex; justify-content: flex-end; margin-top: var(--space-md); }
@media (max-width: 900px) {
    .fs-grid { grid-template-columns: 1fr; }
    .fs-pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .fm-filter, .fm-filter.is-wide { width: calc(50% - var(--space-sm)); }
    .fm-toolbar-actions { margin-inline-start: 0; width: 100%; }
    .fs-pay-grid { grid-template-columns: 1fr; }
    .fs-group { padding: var(--space-md); }
}

/* [V2.6] Fee Settings - make each block's start and end obvious: tinted section header with
   an accent edge, grey groups with a title bar, white field area inside. */
.fs-section { border-inline-start: 4px solid var(--color-primary); margin-bottom: var(--space-xl, 32px); }
.fs-section > .fin-section-head { background: var(--status-info-bg); border-bottom: 1px solid var(--color-divider); }
.fs-section > .fin-section-head .fin-section-title { font-size: 15.5px; }
.fs-section > .fin-section-body { background: var(--color-background); }
.fs-group { padding: 0; overflow: hidden; background: var(--color-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.fs-group > .fs-group-title { margin: 0; padding: 10px var(--space-lg); background: var(--color-background); border-bottom: 1px solid var(--color-divider); }
.fs-group > :not(.fs-group-title) { margin-inline: var(--space-lg); }
.fs-group > :nth-child(2) { margin-top: var(--space-md); }
.fs-group > :last-child { margin-bottom: var(--space-md); }
.fs-master { padding: var(--space-md) var(--space-lg); }
.fs-master > * { margin-inline: 0 !important; }
.fs-actions { padding-top: var(--space-md); border-top: 1px dashed var(--color-divider); }
@media (max-width: 600px) {
    .fs-group > .fs-group-title, .fs-master { padding-inline: var(--space-md); }
    .fs-group > :not(.fs-group-title) { margin-inline: var(--space-md); }
}

/* [V2.6] Academic Setup - "import from Excel" bar; Data Import template note */
.acad-import-bar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md);
                   background: var(--color-surface); border: 1px dashed var(--color-primary); border-radius: var(--radius-card); }
.acad-import-bar > .material-symbols-rounded { font-size: 26px; color: var(--color-primary); }
.acad-import-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; font-size: 13px; }
.acad-import-text span { color: var(--color-text-secondary); font-size: 12px; }
.di-step-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--color-text-secondary); }
.di-step-note .material-symbols-rounded { font-size: 16px; color: var(--color-primary); }

/* [V2.6] Staff names open Employee 360 */
a.e360-link { color: inherit; text-decoration: none; }
a.e360-link:hover { color: var(--color-primary); text-decoration: underline; }

/* ============================================================================
   [V2.6] Feedback about the ERP (Feedback.razor) - reuses the Complaint box
   list / thread / stage classes (.cp-*); only what differs lives here.
   ============================================================================ */
.app-sidebar-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
                     background: var(--accent-amber); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }

.fb-intro { padding: var(--space-lg); margin-bottom: var(--space-lg); border-inline-start: 4px solid var(--color-primary); }
.fb-intro-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.fb-intro-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.fb-intro-note { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; color: var(--color-text-secondary); }
.fb-intro-note .material-symbols-rounded { font-size: 16px; color: var(--status-success-fg); }
.fb-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.fb-type { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; text-align: start; font: inherit; color: inherit; cursor: pointer;
           border: 1px solid var(--color-divider); border-radius: var(--radius-input); background: var(--color-surface); }
.fb-type:hover, .fb-type:focus-visible { border-color: var(--fb-color); box-shadow: inset 0 0 0 1px var(--fb-color); outline: none; }
.fb-type-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--fb-bg); color: var(--fb-color); }
.fb-type-icon .material-symbols-rounded { font-size: 22px; }
.fb-type-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.fb-type-text span { font-size: 12px; color: var(--color-text-secondary); line-height: 1.35; }
.fb-type-suggestion { --fb-color: var(--status-warning-fg); --fb-bg: var(--status-warning-bg); }
.fb-type-problem { --fb-color: var(--status-danger-fg); --fb-bg: var(--status-danger-bg); }
.fb-type-featurerequest { --fb-color: var(--status-info-fg); --fb-bg: var(--status-info-bg); }
.fb-type-appreciation { --fb-color: var(--status-success-fg); --fb-bg: var(--status-success-bg); }
.fb-type-other { --fb-color: var(--status-neutral-fg); --fb-bg: var(--status-neutral-bg); }
.fb-list-title { display: flex; align-items: center; margin: 0 0 var(--space-sm); font-size: 14.5px; font-weight: 700; }

.cal-chip.fb-chip { gap: 3px; background: var(--fb-bg); color: var(--fb-color); }
.fb-chip .material-symbols-rounded { font-size: 14px; }
.fb-replied { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--status-success-fg); }
.fb-replied .material-symbols-rounded { font-size: 15px; }
.fb-stars { display: inline-flex; font-size: 13px; line-height: 1; letter-spacing: 1px; }
.fb-star-on { color: #E0A100; }
.fb-star-off { color: var(--color-divider); }
.fb-more { margin: var(--space-sm) 0 0; text-align: center; }

/* New feedback form */
.fb-type-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }
.fb-type-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1.5px solid var(--color-divider); border-radius: 999px; background: var(--color-surface);
                color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fb-type-chip .material-symbols-rounded { font-size: 17px; color: var(--fb-color); }
.fb-type-chip:hover, .fb-type-chip:focus-visible { border-color: var(--fb-color); outline: none; }
.fb-type-chip.is-on { border-color: var(--fb-color); background: var(--fb-bg); color: var(--fb-color); }
.fb-details .fr-sub { display: block; margin-top: 4px; }
.fb-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-md); padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; }
.fb-rating-label { font-size: 13px; }
.fb-rating-stars { display: inline-flex; align-items: center; gap: 2px; }
.fb-star-btn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--color-divider); font-size: 26px; line-height: 1; cursor: pointer; }
.fb-star-btn.is-on { color: #E0A100; }
.fb-star-btn:hover, .fb-star-btn:focus-visible { background: var(--color-background); outline: none; }
.fb-rating-clear { margin-inline-start: 6px; padding: 2px 8px; border: 0; background: transparent; color: var(--color-primary); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }

/* Super Admin inbox */
.cp-stages.fb-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fb-stages .cp-stage-step .material-symbols-rounded { font-size: 13px; }
.fb-stage-awaiting { --cp-stage-color: var(--status-danger-fg); }
.fb-stage-new { --cp-stage-color: var(--status-warning-fg); }
.fb-stage-inreview { --cp-stage-color: var(--status-info-fg); }
.fb-stage-planned { --cp-stage-color: var(--color-primary); }
.fb-stage-done { --cp-stage-color: var(--status-success-fg); }
.fb-stage-closed { --cp-stage-color: var(--status-neutral-fg); }
.fb-avg { display: inline-flex; align-items: baseline; gap: 4px; margin-inline-start: auto; white-space: nowrap; }
.fb-avg-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-avg .fb-star-on { font-size: 16px; }

@media (max-width: 1100px) {
    .cp-stages.fb-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fb-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cp-stages.fb-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fb-types { grid-template-columns: 1fr; }
    .fb-intro { padding: var(--space-md); }
    .fb-intro-head > .erp-btn { width: 100%; justify-content: center; }
    .fb-avg { margin-inline-start: 0; }
}
#fb_detail .cp-status-pick { max-width: none; }
#fb_sender .erp-badge, .cp-row-meta .erp-badge { margin-inline-start: 4px; }

/* [V2.6] Feedback pictures - picker (new feedback / reply) and thread thumbnails */
.fb-pics { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-md); }
.fb-pics-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-md); }
.fb-pics-add { cursor: pointer; }
.fb-pics-row .fr-sub { flex: 1 1 240px; }
.fb-pics-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.fb-pics-input:focus-visible + .fr-sub, .fb-pics-add:focus-within { outline: 2px solid var(--color-border-focus); }
.fb-pics-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fb-pic { position: relative; width: 104px; display: flex; flex-direction: column; gap: 3px; padding: 4px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); }
.fb-pic img, .fb-pic-icon { width: 100%; height: 72px; object-fit: cover; border-radius: 7px; background: var(--color-background); }
.fb-pic-icon { display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); }
.fb-pic-name { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-pic-remove { position: absolute; top: -7px; inset-inline-end: -7px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
                 display: inline-flex; align-items: center; justify-content: center; background: var(--status-danger-fg); color: #fff; }
.fb-pic-remove .material-symbols-rounded { font-size: 16px; }
.fb-pics-error { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--status-danger-fg); }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fb-thumb { width: 92px; height: 70px; padding: 0; border: 1px solid var(--color-divider); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--color-background); }
.fb-thumb:hover, .fb-thumb:focus-visible { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px var(--status-info-bg); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.2s ease; }
.fb-thumb img.is-loaded { opacity: 1; }
.fb-row-counts { display: inline-flex; gap: 10px; }

/* [V2.6] RIC Fee Management rebrand - no tagline under the login title any more, so the title keeps the gap above the form. */
.erp-login-form-panel .erp-login-title { margin-bottom: var(--space-section); }
/* The RIC emblem is blue and gold on transparent - it sits whole on a white disc so it reads on the blue sidebar. */
.app-sidebar-brand-icon img.is-platform-logo { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; box-sizing: border-box; }

/* ============================================================================
   [V2.6 Payroll rebuild] Payroll page (Pages/Payroll/*.razor). Sections, KPI
   tiles, tables, badges and modals come from the design system; this is only
   what payroll adds: the month bar + step tracker, the "next action" banner,
   the register table, the payslip breakdown and the form grids.
   ============================================================================ */
.pr-header { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }
.pr-header-main { display: flex; align-items: flex-start; gap: var(--space-md); }
.pr-school { max-width: 280px; margin-bottom: 0; }
.pr-tabs { margin-bottom: var(--space-lg); }

.pr-monthbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl, 32px); padding: var(--space-md) var(--space-lg); }
.pr-month { display: flex; align-items: center; gap: 6px; }
.pr-month-input { width: 170px; height: 40px; padding-top: 6px; padding-bottom: 6px; font-weight: 600; }
.pr-icon-btn { width: 36px; height: 36px; flex: 0 0 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-divider);
               border-radius: 50%; background: var(--color-surface); color: inherit; cursor: pointer; }
.pr-icon-btn:hover:not(:disabled), .pr-icon-btn:focus-visible { border-color: var(--color-primary); color: var(--color-primary); outline: none; }
.pr-icon-btn:disabled { opacity: 0.4; cursor: default; }
.pr-icon-btn .material-symbols-rounded { font-size: 20px; }

.pr-steps { list-style: none; margin: 0; padding: 0; flex: 1 1 420px; display: flex; align-items: center; }
.pr-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-secondary); text-align: center; }
.pr-step + .pr-step::before { content: ""; position: absolute; top: 13px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--color-divider); }
.pr-step-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
               background: var(--color-surface); border: 2px solid var(--color-divider); font-size: 12px; font-weight: 700; }
.pr-step-dot .material-symbols-rounded { font-size: 18px; }
.pr-step.is-done { color: var(--color-text-primary); }
.pr-step.is-done .pr-step-dot { background: var(--status-success-fg); border-color: var(--status-success-fg); color: #fff; }
.pr-step.is-done + .pr-step::before, .pr-step.is-current::before { background: var(--status-success-fg); }
.pr-step.is-current { color: var(--color-primary); font-weight: 700; }
.pr-step.is-current .pr-step-dot { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

.pr-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-inline-start: 4px solid var(--color-primary); }
.pr-next-6 { border-inline-start-color: var(--status-success-fg); }
.pr-next-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--status-info-bg); color: var(--color-primary); }
.pr-next-6 .pr-next-icon { background: var(--status-success-bg); color: var(--status-success-fg); }
.pr-next-icon .material-symbols-rounded { font-size: 26px; }
.pr-next-text { flex: 1 1 320px; min-width: 0; }
.pr-next-title { margin: 0; font-size: 16px; font-weight: 700; }
.pr-next-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.45; }
.pr-next-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.pr-failed { padding: var(--space-md) var(--space-lg); border-inline-start: 4px solid var(--status-danger-fg); }
.pr-failed-head { display: flex; align-items: center; justify-content: space-between; color: var(--status-danger-fg); }
.pr-failed-head strong { display: inline-flex; align-items: center; gap: 6px; }
.pr-failed ul { margin: 6px 0 0; padding-inline-start: 20px; font-size: 13px; }

.pr-checks { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.pr-check { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--status-warning-fg); border-radius: 999px; background: var(--status-warning-bg);
            color: var(--status-warning-fg); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pr-check .material-symbols-rounded { font-size: 17px; }
.pr-check-go { opacity: 0.7; }

.pr-kpi-net { border-inline-start: 3px solid var(--color-primary); }
.pr-good { color: var(--status-success-fg); }
.pr-warn { color: var(--status-warning-fg); }

.pr-register-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.pr-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-divider); }
.pr-search { flex: 1 1 240px; max-width: 360px; margin: 0; }
.pr-select { width: auto; min-width: 170px; max-width: 240px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.pr-table-wrap { overflow-x: auto; }
.pr-table { min-width: 760px; }
.pr-table th.pr-num, .pr-table td.pr-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-row { cursor: pointer; }
.pr-row:hover td { background: var(--status-info-bg); }
.pr-emp-name { font-weight: 600; }
.pr-emp-sub { font-size: 12px; color: var(--color-text-secondary); }
.pr-net { font-weight: 700; }
.pr-go { width: 32px; color: var(--color-text-secondary); text-align: end; }
.pr-go .material-symbols-rounded { font-size: 19px; vertical-align: middle; }
.pr-none { padding: var(--space-lg); text-align: center; color: var(--color-text-secondary); font-size: 13px; margin: 0; }
.pr-days { display: inline-flex; gap: 4px; }
.pr-day { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.pr-day-p { background: var(--status-success-bg); color: var(--status-success-fg); }
.pr-day-a { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.pr-day-l { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.pr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 8px var(--space-lg); font-size: 12px; color: var(--color-text-secondary); border-top: 1px solid var(--color-divider); }
.pr-method { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.pr-method .material-symbols-rounded { font-size: 17px; color: var(--color-text-secondary); }
.pr-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--status-warning-fg); }
.pr-flag .material-symbols-rounded { font-size: 15px; }
.pr-actions { white-space: nowrap; text-align: end; }
.pr-link { color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.pr-danger { color: var(--status-danger-fg); }

/* One payslip (dialog) */
.pr-slip { display: flex; flex-direction: column; gap: var(--space-md); }
.pr-slip-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--space-md); }
.pr-slip-top > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-slip-rejected { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--status-danger-bg); color: var(--status-danger-fg); font-size: 13px; }
.pr-att { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--color-divider); border-radius: 10px; overflow: hidden; }
.pr-att-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-inline-start: 1px solid var(--color-divider); }
.pr-att-cell:first-child { border-inline-start: 0; }
.pr-att-cell strong { font-size: 17px; }
.pr-att-cell span { font-size: 11px; color: var(--color-text-secondary); text-align: center; }
.pr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.pr-col { border: 1px solid var(--color-divider); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.pr-col-title { margin: 0; padding: 7px 12px; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pr-line { display: flex; justify-content: space-between; gap: var(--space-md); padding: 6px 12px; border-bottom: 1px solid var(--color-divider); font-size: 13.5px; }
.pr-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-line-none { color: var(--color-text-secondary); }
.pr-line-total { margin-top: auto; border-bottom: 0; border-top: 1px solid var(--color-primary); background: var(--color-background); font-weight: 700; }
.pr-netband { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 10px 14px; border-radius: 10px; background: var(--color-primary); color: #fff; }
.pr-netband span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.pr-netband strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.pr-gross-band { margin-top: var(--space-sm); }
.pr-adj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-md); padding: var(--space-md); border: 1px dashed var(--color-primary); border-radius: 10px; }
.pr-adj .erp-field { margin-bottom: var(--space-sm); }
.pr-adj-reason { grid-column: 1 / -1; }
.pr-adj-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-sm); }
.pr-modal-error { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--status-danger-bg); color: var(--status-danger-fg); font-size: 13px; font-weight: 600; }

/* Forms (salary, payment details, advance / loan, overtime, settings) */
.pr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.pr-wide { grid-column: 1 / -1; }
.pr-edit { display: flex; flex-direction: column; gap: var(--space-sm); }
.pr-subtabs { margin-bottom: var(--space-md); }
.pr-switches { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-sm); }
.pr-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.pr-switch input { width: 17px; height: 17px; }
.pr-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-history li { padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; }
.pr-history li.is-current { border-color: var(--status-success-fg); }
.pr-history-top { display: flex; align-items: center; gap: 8px; }
.pr-emp-total { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--color-text-secondary); }
.pr-emp-total strong { font-size: 18px; color: var(--color-text-primary); }
.pr-pay { display: flex; flex-direction: column; }
.pr-pay-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--color-background); font-size: 13px; }
.pr-pay-total strong { font-size: 18px; }
.pr-progress { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.pr-progress-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--color-divider); overflow: hidden; }
.pr-progress-bar span { display: block; height: 100%; background: var(--status-success-fg); }
.pr-example { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.45; }
.pr-example .material-symbols-rounded { font-size: 16px; color: var(--color-primary); margin-top: 1px; }
.pr-settings .erp-section-body { background: var(--color-surface); }
.pr-settings-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-md); }

@media (max-width: 760px) {
    .pr-steps { flex-basis: 100%; }
    .pr-step-name { font-size: 10.5px; }
    .pr-next-actions, .pr-next-actions .erp-btn { width: 100%; justify-content: center; }
    .pr-cols, .pr-form-grid, .pr-adj { grid-template-columns: 1fr; }
    .pr-att { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pr-att-cell:nth-child(4) { border-inline-start: 0; }
    .pr-att-cell:nth-child(n+4) { border-top: 1px solid var(--color-divider); }
    .pr-search, .pr-select { max-width: none; width: 100%; flex-basis: 100%; }
    .pr-emp-total { align-items: flex-start; }
    .pr-settings-actions .erp-btn { width: 100%; justify-content: center; }
}
a.pr-check { text-decoration: none; }
/* Five tabs do not fit a phone: the row scrolls sideways instead of widening the page. */
.pr-tabs, .pr-subtabs { overflow-x: auto; scrollbar-width: none; }
.pr-tabs::-webkit-scrollbar, .pr-subtabs::-webkit-scrollbar { display: none; }
.pr-tabs .erp-tab, .pr-subtabs .erp-tab { flex: 0 0 auto; white-space: nowrap; }

/* ============================================================================
   [V2.7] School / College / University
   lvl-* : institution levels (tick cards, badges, Super Admin > Levels & Pricing)
   prg-* : academic programs (Academic Setup > Programs)
   Colours come from the status tokens, so light and dark themes both work.
   ============================================================================ */

/* Level badges: School = info, College = success, University = warning. */
.lvl-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.lvl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.lvl-badge .material-symbols-rounded { font-size: 14px; }
.lvl-badge-school { background: var(--status-info-bg); color: var(--status-info-fg); }
.lvl-badge-college { background: var(--status-success-bg); color: var(--status-success-fg); }
.lvl-badge-university { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.lvl-badge-money { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* Tick cards (also used for the two billing modes). */
.lvl-picker, .lvl-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.lvl-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lvl-option { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1.5px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.lvl-option:hover { border-color: var(--color-primary); }
.lvl-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.lvl-option:focus-within { box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.18); }
.lvl-option.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.lvl-option.is-disabled { cursor: not-allowed; opacity: 0.6; }
.lvl-option.is-disabled:hover { border-color: var(--color-divider); }
.lvl-option.is-on.is-disabled:hover { border-color: var(--color-primary); }
.lvl-option-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-background); color: var(--color-primary); }
.lvl-option-icon .material-symbols-rounded { font-size: 20px; }
.lvl-option-text { display: flex; flex-direction: column; min-width: 0; padding-inline-end: 18px; }
.lvl-option-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.lvl-option-hint { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.4; }
.lvl-option-check { position: absolute; top: 9px; inset-inline-end: 9px; font-size: 18px; color: var(--color-primary); opacity: 0; transition: opacity 0.12s ease; }
.lvl-option.is-on .lvl-option-check { opacity: 1; }
.lvl-form-block { margin-bottom: var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.lvl-form-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.lvl-modal-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--color-text-primary); }

/* Levels & Pricing page. */
.lvl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.lvl-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); }
.lvl-kpi-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; }
.lvl-kpi-icon .material-symbols-rounded { font-size: 22px; }
.lvl-kpi-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.lvl-kpi-label { font-size: 12px; color: var(--color-text-secondary); }
.lvl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.lvl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-text-primary); cursor: pointer; }
.lvl-check input { width: 16px; height: 16px; }
.lvl-row { cursor: pointer; }
.lvl-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lvl-sub { font-size: 12px; color: var(--color-text-secondary); }
.lvl-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-table th.lvl-num { text-align: end; }
.lvl-amount { font-weight: 700; }
.lvl-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.lvl-price-card { padding: var(--space-md); border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); }
.lvl-price-card .erp-field:last-child { margin-bottom: 0; }
.lvl-price-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-md); }
.lvl-price-title { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }

/* Programs. */
.prg-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.prg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-md); }
.prg-card { display: flex; flex-direction: column; gap: 12px; padding: var(--space-md); border: 1px solid var(--color-divider); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.prg-card.is-inactive { opacity: 0.7; }
.prg-card-head { display: flex; align-items: center; gap: 12px; }
.prg-card-title { flex: 1; min-width: 0; }
.prg-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); overflow-wrap: anywhere; }
.prg-icon-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.prg-icon-btn:hover { background: var(--color-background); color: var(--color-primary); }
.prg-icon-btn .material-symbols-rounded { font-size: 18px; }
.prg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--status-neutral-bg); color: var(--status-neutral-fg); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.prg-chip .material-symbols-rounded { font-size: 14px; }
.prg-chip-semester { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.prg-chip-annual { background: var(--status-info-bg); color: var(--status-info-fg); }
.prg-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.prg-term { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border: 1px solid var(--color-divider); border-radius: 9px; background: var(--color-background); }
.prg-term.is-missing { border-style: dashed; background: transparent; opacity: 0.65; }
.prg-term-no { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.prg-term-count { font-size: 14px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.prg-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-divider); }
.prg-create-box { margin-top: var(--space-md); padding: var(--space-md); border: 1px dashed var(--color-primary); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.prg-sections-choice, .prg-shifts { display: flex; flex-wrap: wrap; gap: 8px var(--space-lg); }
.prg-shifts { padding-inline-start: 23px; }
.prg-class-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; }

@media (max-width: 900px) {
    .lvl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lvl-price-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .lvl-picker, .lvl-mode-grid { grid-template-columns: minmax(0, 1fr); }
    .prg-grid { grid-template-columns: minmax(0, 1fr); }
}
/* In a narrow dialog the three tick cards stack instead of squeezing. */
.lvl-picker-wrap { container-type: inline-size; }
@container (max-width: 560px) {
    .lvl-picker { grid-template-columns: minmax(0, 1fr); }
}

/* [V2.7] Unrecoverable page error: Blazor sets display:block on #blazor-error-ui. */
.erp-error-bar { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 100000; padding: 12px 16px; background: #7a1212; color: #fff; font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25); }
.erp-error-bar-text { margin-inline-end: 12px; }
.erp-error-bar-btn { display: inline-block; padding: 5px 16px; border-radius: 999px; background: #fff; color: #7a1212; font-weight: 700; text-decoration: none; }

/* ============================================================================
   [V2.7] Semester results (sem-*)
   ============================================================================ */
.sem-program { margin-bottom: var(--space-md); }
.sem-program-name { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.sem-class-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-sm); }
.sem-class { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 1.5px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); color: var(--color-text-primary); text-align: start; cursor: pointer; font: inherit; transition: border-color 0.12s ease; }
.sem-class:hover { border-color: var(--color-primary); }
.sem-class.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.sem-class-term { font-size: 14px; font-weight: 700; }
.sem-class-meta { font-size: 11.5px; color: var(--color-text-secondary); }
.sem-class-status { margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sem-class-status.is-none { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.sem-class-status.is-draft { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sem-class-status.is-published { background: var(--status-success-bg); color: var(--status-success-fg); }
.sem-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-divider); }
.sem-panel-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-text-primary); }
.sem-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sem-kpis { margin-bottom: var(--space-md); }
.sem-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--space-md); padding: 9px 12px; border-radius: 10px; background: var(--status-warning-bg); color: var(--status-warning-fg); font-size: 13px; font-weight: 600; }
.sem-warning .material-symbols-rounded { font-size: 18px; }
.sem-center { text-align: center; }
.erp-table th.sem-center { text-align: center; }
.sem-th-ch { display: block; font-size: 10px; font-weight: 500; opacity: 0.85; }
.sem-grade { display: inline-block; min-width: 30px; padding: 2px 7px; border-radius: 7px; font-size: 12.5px; font-weight: 700; text-align: center; }
.sem-grade.is-pass { background: var(--status-success-bg); color: var(--status-success-fg); }
.sem-grade.is-fail { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.sem-grade.is-incomplete { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.sem-draft { margin-inline-start: 6px; font-size: 11px; color: var(--color-text-secondary); }
.sem-credit-input { max-width: 120px; padding-top: 8px; padding-bottom: 8px; }

/* ============================================================================
   [V2.7] Semester part C: next semester, repeat courses (sem-adv-*, sem-rp-*),
   semester result in the parent portal (psem-*)
   ============================================================================ */
.sem-adv-route { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.sem-adv-route .material-symbols-rounded { font-size: 20px; color: var(--color-text-secondary); }
[dir="rtl"] .sem-adv-route .material-symbols-rounded { transform: scaleX(-1); }
.sem-adv-class { padding: 6px 12px; border: 1.5px solid var(--color-divider); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.sem-adv-class.is-next { border-color: var(--color-primary); background: var(--status-info-bg); }
.sem-adv-list { max-height: 46vh; overflow-y: auto; }
.sem-rp-kind { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.sem-rp-kind.is-again { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sem-rp-kind.is-improve { background: var(--status-info-bg); color: var(--status-info-fg); }
.sem-rp-cancelled { opacity: 0.55; }
.sem-rp-actions { white-space: nowrap; text-align: end; }
.sem-rp-actions .prg-icon-btn { vertical-align: middle; }

.psem { margin-bottom: var(--space-md); padding: 12px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-background); }
.psem-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: 10px; }
.psem-program { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.psem-cgpa { display: flex; flex-direction: column; align-items: flex-end; }
.psem-cgpa-label { font-size: 11px; color: var(--color-text-secondary); }
.psem-cgpa-value { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--color-primary); }
.psem-semester { margin-bottom: 8px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); }
.psem-semester > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.psem-semester-name { font-weight: 700; }
.psem-semester-figures { display: inline-flex; align-items: center; gap: 8px; }
.psem-courses { width: 100%; border-collapse: collapse; }
.psem-courses td { padding: 6px 12px; border-top: 1px solid var(--color-divider); font-size: 13px; }
.psem-grade { white-space: nowrap; text-align: end; }
.psem-arrow { margin: 0 3px; color: var(--color-text-secondary); }
.psem-repeats { margin-bottom: 10px; }
.psem-repeats-title { margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.psem-repeat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 13px; }

/* ============================================================================
   [V2.7] Intermediate / Board page (int-*)
   ============================================================================ */
.int-programs { display: grid; gap: var(--space-md); }
.int-program { padding: 14px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); }
.int-program-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.int-program-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.int-program-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.int-program-apply .erp-input { min-width: 220px; padding-top: 9px; padding-bottom: 9px; }
.int-class-lines { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 13px; }
.int-class-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.int-scheme { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-divider); }
.int-scheme .pr-example { grid-column: 1 / -1; margin: 0; }
.int-scheme-title { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.int-chip { display: inline-block; margin: 0 4px 4px 0; padding: 2px 9px; border-radius: 999px; background: var(--status-neutral-bg); color: var(--status-neutral-fg); font-size: 12px; font-weight: 600; }
.int-chip em { font-style: normal; font-weight: 500; opacity: 0.75; }
.int-chip.is-elective { background: var(--status-info-bg); color: var(--status-info-fg); }
.int-chip.is-exempt { background: var(--status-danger-bg); color: var(--status-danger-fg); text-decoration: line-through; }
.int-pick-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.int-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; }
.int-cell { min-width: 110px; padding: 7px 9px; font-size: 13px; }
.int-cell.is-narrow { min-width: 0; width: 82px; }
.int-cell.is-wide { min-width: 150px; }
.int-marks-pair { white-space: nowrap; }
.int-marks-pair .int-cell { display: inline-block; }
.int-reg-table td { vertical-align: top; }
.int-missing { font-size: 11.5px; color: var(--status-danger-fg); }
.int-parts { display: inline-flex; border: 1.5px solid var(--color-divider); border-radius: 10px; overflow: hidden; }
.int-part { padding: 7px 14px; border: 0; background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.int-part.is-on { background: var(--color-primary); color: #fff; }
.int-program-apply .erp-input { width: auto; }
.int-reg-table th { white-space: nowrap; }
.int-reg-table td:first-child, .int-res-table td:first-child { min-width: 190px; }
.int-reg-table td:last-child { min-width: 230px; }
.int-res-table td:last-child { min-width: 150px; }

/* [V2.7] "My Institute" page: the strip with its two options (My Institutes | Branch Comparison). */
.inst-options { margin-bottom: var(--space-lg); }

/* ============================================================================
   [V2.7] A dropdown that sits in a tab strip (the program classes on Student
   Admissions), and a scrolling table whose rows open a menu.
   ============================================================================ */
.erp-tab-select { width: auto; min-width: 210px; max-width: 320px; align-self: center; margin: 6px 0; padding: 7px 10px; font-size: 13px; font-weight: 600; }
.erp-tab-select.is-on { border-color: var(--color-primary); color: var(--color-primary); background: var(--status-info-bg); }
.erp-table-wrap-menu.has-open-menu { padding-bottom: 250px; }
.erp-table-wrap-menu .erp-table { min-width: 980px; }

/* ============================================================================
   [V2.7] Academic Setup > Subject Assignments: filter bar and folding blocks (sa-*)
   ============================================================================ */
.sa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.sa-toolbar .sa-filter { flex: 0 1 230px; margin-bottom: 0; }
.sa-toolbar .sa-search { flex: 1 1 240px; margin-bottom: 0; }
.sa-toolbar .sa-only { white-space: nowrap; }
.sa-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: var(--space-md); font-size: 12.5px; color: var(--color-text-secondary); }
.sa-summary strong { color: var(--color-text-primary); }
.sa-summary-warn, .sa-summary-warn strong { color: var(--status-danger-fg); }
.sa-block { margin-bottom: 8px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); overflow: hidden; }
.sa-block > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 14px; }
.sa-block > summary::-webkit-details-marker { display: none; }
.sa-block > summary:hover { background: var(--status-info-bg); }
.sa-block[open] > summary { border-bottom: 1px solid var(--color-divider); }
.sa-chevron { font-size: 20px; color: var(--color-text-secondary); transition: transform 0.15s ease; transform: rotate(-90deg); }
.sa-block[open] .sa-chevron { transform: none; }
.sa-block-name { flex: 1; font-weight: 700; color: var(--color-text-primary); }
.sa-block .erp-empty-inline { margin: 12px 14px; }
.sa-block .erp-table { border-radius: 0; box-shadow: none; }
.sa-actions { white-space: nowrap; text-align: end; }

/* ============================================================================
   [V2.7] Tabs on one coloured bar - every tab strip of the app (.erp-tabs).
   The options of a page (Payroll Run | Employees & Salary | ...) used to be
   grey text on the page; now they sit on a bar in the app's own blue (the
   colour of table headers), white text, and the open one is a white pill.
   Contrast holds in all three states: white on blue (normal), white on a
   lighter blue (hover / focus), blue on white (open).
   A second-level strip (.pr-subtabs) is the light version of the same.
   ============================================================================ */
.erp-tabs {
    column-gap: 4px; row-gap: 4px; padding: 5px; border-radius: 12px;
    background: var(--color-primary-fill);
}
.erp-tabs-header { padding: var(--space-md) var(--space-lg) 0; border-bottom: 0; }
.erp-tabs-header > .erp-tabs { flex: 1 1 auto; min-width: 0; }
.erp-tabs .erp-tab {
    margin: 0; padding: 8px 14px; border: 0; border-radius: 9px;
    color: rgba(255, 255, 255, 0.92); font-size: 13.5px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.erp-tabs .erp-tab:hover, .erp-tabs .erp-tab:focus-visible { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.erp-tabs .erp-tab.active, .erp-tabs .erp-tab.active:hover { background: #FFFFFF; color: #0B3D91; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.erp-tabs .erp-tab .erp-tab-badge { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.erp-tabs .erp-tab.active .erp-tab-badge { background: rgba(11, 61, 145, 0.12); color: #0B3D91; }
.erp-tabs .erp-tab-select { margin: 0; border-color: transparent; }
.erp-tabs .erp-tab-select.is-on { background: #FFFFFF; color: #0B3D91; }

/* Second level: the light strip. */
.erp-tabs.pr-subtabs { background: var(--status-info-bg); }
.erp-tabs.pr-subtabs .erp-tab { color: var(--color-text-primary); }
.erp-tabs.pr-subtabs .erp-tab:hover, .erp-tabs.pr-subtabs .erp-tab:focus-visible { background: rgba(11, 61, 145, 0.12); color: var(--color-text-primary); }
.erp-tabs.pr-subtabs .erp-tab.active, .erp-tabs.pr-subtabs .erp-tab.active:hover { background: var(--color-primary-fill); color: #FFFFFF; box-shadow: none; }

@media (max-width: 768px) {
    .erp-tabs { column-gap: 4px; }
    .erp-tabs .erp-tab { padding: 7px 11px; font-size: 12.5px; }
}

/* ============================================================================
   [V2.7] List | Cards switch (ViewToggle.razor) and the List view of the card
   grids. In List view a grid is one column and each card becomes a compact
   row: its heading on the left, its figures and buttons after it.
   ============================================================================ */
.erp-view-toggle { display: flex; justify-content: flex-end; gap: 0; margin: 0 0 var(--space-sm) auto; width: fit-content; border: 1.5px solid var(--color-divider); border-radius: 10px; overflow: hidden; background: var(--color-surface); }
.erp-view-toggle-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 0; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.erp-view-toggle-btn .material-symbols-rounded { font-size: 17px; }
.erp-view-toggle-btn:hover { background: var(--status-info-bg); color: var(--color-text-primary); }
.erp-view-toggle-btn.is-on, .erp-view-toggle-btn.is-on:hover { background: var(--color-primary-fill); color: #FFFFFF; }
@media (max-width: 640px) { .erp-view-toggle-text { display: none; } }

html[data-card-view="list"] .erp-view-toggle + :is(.erp-resource-grid, .erp-school-grid, .erp-owner-grid, .prg-grid) { grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* resource cards (Academic Setup, staff, leave, transport, question papers ...) */
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card > .erp-resource-card-head { flex: 1 1 260px; min-width: 0; margin-bottom: 0; align-items: center; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card > :not(.erp-resource-card-head) { margin-top: 0; margin-bottom: 0; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card .erp-resource-avatar { width: 34px; height: 34px; }

/* branch cards (My Institute) */
html[data-card-view="list"] .erp-school-grid > .erp-school-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 16px; }
html[data-card-view="list"] .erp-school-card > .erp-school-card-head { flex: 1 1 280px; min-width: 0; align-items: center; }
html[data-card-view="list"] .erp-school-card > .erp-school-metrics { flex: 2 1 320px; padding: 0; border: 0; }
html[data-card-view="list"] .erp-school-card > .erp-school-footer { flex: 0 1 auto; }
html[data-card-view="list"] .erp-school-card > .erp-school-footer .erp-btn { flex: 0 0 auto; }
html[data-card-view="list"] .erp-school-logo { width: 38px; height: 38px; }

/* owner cards (Super Admin) */
html[data-card-view="list"] .erp-owner-grid > .erp-owner-card { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 16px; }
html[data-card-view="list"] .erp-owner-card > .erp-owner-card-head { flex: 1 1 260px; min-width: 0; align-items: center; }
html[data-card-view="list"] .erp-owner-card > .erp-owner-stats { flex: 2 1 380px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-card-view="list"] .erp-owner-card > .erp-owner-card-footer { flex: 0 0 auto; border-top: 0; padding-top: 0; margin-top: 0; }

/* program cards (Academic Setup > Programs) */
html[data-card-view="list"] .prg-grid > .prg-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; }
html[data-card-view="list"] .prg-card > .prg-card-head { flex: 1 1 280px; min-width: 0; }
html[data-card-view="list"] .prg-card > .prg-card-foot { flex: 1 1 260px; margin-top: 0; padding-top: 0; border-top: 0; }

/* ============================================================================
   [V2.7] One action button everywhere. Edit, Delete / Deactivate, Download
   (PDF, Excel, Word) and View in lists, cards and toolbars are the pill button
   with an icon AND a word: blue for a normal action, red for one that removes.
   (The big .erp-btn stays for the main action of a page and for dialog
   footers.) The icon has one size unless a page sets its own.
   ============================================================================ */
.erp-pill-btn .material-symbols-rounded, .erp-btn-pill .material-symbols-rounded { font-size: 15px; line-height: 1; }
.erp-pill-btn, .erp-btn-pill { white-space: nowrap; line-height: 1.35; }
.erp-pill-btn.erp-btn-pill-danger { --pill-tone: var(--color-error); border-color: rgba(139,0,0,0.35); }

/* ============================================================================
   [V2.7] Settings pages built from section cards (stg-*): Attendance Settings,
   Intermediate > Board & groups. A card = an icon chip, a title, one line of
   help, then its fields. Days are chips, on/off options are switches, and the
   Save button sits on a bar of its own. Only the app's own colours are used.
   ============================================================================ */
.stg-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.stg-topbar .stg-session { flex: 0 1 320px; margin-bottom: 0; }
.stg-callout { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--space-lg); padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); border-radius: 12px; background: var(--status-info-bg); color: var(--color-text-primary); font-size: 13px; line-height: 1.45; }
.stg-callout .material-symbols-rounded { font-size: 18px; color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
.stg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.stg-span { grid-column: 1 / -1; }
.stg-card { padding: var(--space-lg); border: 1px solid var(--color-divider); border-radius: var(--radius-card, 16px); background: var(--color-surface); box-shadow: 0 1px 2px rgba(11, 61, 145, 0.05); }
.stg-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-divider); }
.stg-card-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--status-info-bg); color: var(--color-primary); }
.stg-card-icon .material-symbols-rounded { font-size: 21px; }
.stg-card-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.stg-card-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.4; }
.stg-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-sm); }
.stg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.stg-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stg-fields .erp-field { margin-bottom: 0; }
.stg-field-hint { margin: 6px 2px 0; font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.4; }

/* the week: one row per kind of day, each day a chip */
.stg-week { display: grid; gap: var(--space-md); }
.stg-week-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.stg-week-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.stg-week-label .material-symbols-rounded { font-size: 18px; color: var(--color-primary); }
.stg-days { display: flex; flex-wrap: wrap; gap: 8px; }
.stg-day { position: relative; cursor: pointer; }
.stg-day input { position: absolute; opacity: 0; width: 0; height: 0; }
.stg-day span { display: inline-block; min-width: 84px; padding: 7px 12px; border: 1.5px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 12.5px; font-weight: 600; text-align: center; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.stg-day:hover span { border-color: var(--color-primary); color: var(--color-text-primary); }
.stg-day input:checked + span { background: var(--color-primary-fill); border-color: var(--color-primary-fill); color: #FFFFFF; }
.stg-days.is-off .stg-day input:checked + span { background: var(--status-warning-bg); border-color: color-mix(in srgb, var(--status-warning-fg) 45%, transparent); color: var(--status-warning-fg); }
.stg-day input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* on / off options */
.stg-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-md); }
.stg-switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.stg-switch:hover { border-color: var(--color-primary); }
.stg-switch:has(.stg-switch-input:checked) { border-color: var(--color-primary); background: var(--status-info-bg); }
.stg-switch-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-background); color: var(--color-primary); }
.stg-switch-icon .material-symbols-rounded { font-size: 19px; }
.stg-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stg-switch-text strong { font-size: 13px; color: var(--color-text-primary); }
.stg-switch-text small { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.35; }
.stg-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.stg-switch-track { flex: 0 0 auto; position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--color-divider); transition: background-color 0.15s ease; }
.stg-switch-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: inset-inline-start 0.15s ease; }
.stg-switch-input:checked ~ .stg-switch-track { background: var(--color-primary-fill); }
.stg-switch-input:checked ~ .stg-switch-track::after { inset-inline-start: 21px; }
.stg-switch-input:focus-visible ~ .stg-switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.stg-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding: 12px var(--space-lg); border: 1px solid var(--color-divider); border-radius: var(--radius-card, 16px); background: var(--color-surface); }
.stg-savebar-note { font-size: 12.5px; color: var(--color-text-secondary); }

@media (max-width: 900px) {
    .stg-grid, .stg-fields-3, .stg-switches { grid-template-columns: minmax(0, 1fr); }
    .stg-week-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
    .stg-fields { grid-template-columns: minmax(0, 1fr); }
    .stg-day span { min-width: 0; }
    .stg-savebar .erp-btn { width: 100%; justify-content: center; }
}

/* [V2.7] Intermediate > Board & groups: program cards on the section-card look. */
.int-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin: var(--space-xl, 28px) 0 var(--space-md); }
.int-program { padding: var(--space-lg); border-radius: var(--radius-card, 16px); box-shadow: 0 1px 2px rgba(11, 61, 145, 0.05); }
.int-program.is-unset { border-style: dashed; }
.int-program-head { flex-wrap: wrap; }
.int-program-title { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.int-program-name { font-size: 15.5px; }
.int-program-apply .erp-btn { padding: 9px 16px; }
.int-class-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.int-class-tile { padding: 10px 14px; border-radius: 12px; background: var(--color-background); border: 1px solid var(--color-divider); }
.int-class-tile-name { font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.int-class-tile-figures { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 12px; color: var(--color-text-secondary); }
.int-class-tile-figures strong { font-size: 14px; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.int-scheme-fold { margin-top: var(--space-md); border: 1px solid var(--color-divider); border-radius: 12px; overflow: hidden; }
.int-scheme-fold > summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--color-text-primary); background: var(--status-info-bg); }
.int-scheme-fold > summary::-webkit-details-marker { display: none; }
.int-scheme-fold[open] .sa-chevron { transform: none; }
.int-scheme-fold .int-scheme { margin-top: 0; padding: 12px; border-top: 1px solid var(--color-divider); }
.int-scheme-part { padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); }
.int-scheme-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--color-primary); }
.int-scheme-title span { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text-secondary); }
.int-scheme-group { margin: 8px 0 5px; font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); }
@media (max-width: 640px) {
    .int-class-tiles { grid-template-columns: minmax(0, 1fr); }
    .int-program-apply, .int-program-apply .erp-input { width: 100%; }
}

/* ---- [V2.7] Intermediate / Board, simpler: one program + year bar on every tab, programs as a table, the group in a dialog ---- */
.int-head-action { margin-inline-start: auto; }
#int_board_card .stg-card-head { align-items: center; }
.int-section-head .sem-panel-title { margin: 0; }
.int-prog-table td { vertical-align: middle; }
.int-figures { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; }
.int-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-divider); }
.int-bar .erp-field { flex: 0 1 260px; min-width: 200px; margin: 0; }
.int-bar .sem-actions { margin-inline-start: auto; }
.int-part { white-space: nowrap; }
.int-part + .int-part { border-inline-start: 1.5px solid var(--color-divider); }
.int-part small { margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: var(--status-neutral-bg); color: var(--status-neutral-fg); font-size: 11px; font-weight: 700; }
.int-part.is-on small { background: rgba(255, 255, 255, 0.22); color: #fff; }
.int-part:not(.is-on):hover { background: var(--status-info-bg); }
.int-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-md) 0 var(--space-sm); }
.int-ok { font-size: 16px; vertical-align: -3px; color: var(--status-success-fg); }
.int-reg-table .int-cell { width: 100%; min-width: 90px; }
.int-reg-table .int-cell.is-narrow { width: 76px; min-width: 0; }
.int-reg-table td:last-child { min-width: 0; }
.int-res-table td:last-child { min-width: 0; }
.int-res-table td:nth-child(2) { min-width: 130px; }
.int-res-table .int-cell.is-narrow { width: 68px; }
@media (max-width: 720px) {
    .int-bar .erp-field { flex: 1 1 100%; }
    .int-bar .sem-actions { margin-inline-start: 0; }
}
.int-prog-table { min-width: 0; }
.int-prog-table .int-figures { white-space: normal; }
.int-reg-list { border-top: 1px solid var(--color-divider); }
.int-reg-row { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.int-reg-fields { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.int-f { display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.int-f.is-narrow { flex: 0 1 92px; }
.int-f .int-cell { width: 100%; min-width: 0; }
@media (max-width: 720px) {
    .int-reg-row { grid-template-columns: minmax(0, 1fr); }
}
.int-reg-who .lvl-name { font-size: 14px; }

/* ---- [V2.7] Top bar Refresh button; Programs in List view ---- */
.app-content-body { display: contents; }
.app-topbar-refresh.is-spinning .material-symbols-rounded { animation: app-refresh-spin 0.7s linear; }
@keyframes app-refresh-spin { to { transform: rotate(360deg); } }
/* List view: the year / semester tiles sat in a flex row with no width and stacked into a tall column. */
html[data-card-view="list"] .prg-card > .prg-card-head { flex: 1 1 240px; }
html[data-card-view="list"] .prg-card > .prg-chips { flex: 0 1 auto; }
html[data-card-view="list"] .prg-card > .prg-terms { flex: 1 1 100%; display: flex; flex-wrap: wrap; }
html[data-card-view="list"] .prg-card > .prg-terms .prg-term { flex-direction: row; gap: 6px; padding: 3px 10px; }
html[data-card-view="list"] .prg-card > .prg-card-foot { flex: 1 1 100%; }

/* ---- [V2.7] Academic Setup > Classes & Sections: every class has the same rows, so the buttons line up ---- */
.cls-card .erp-resource-card-head { align-items: center; margin-bottom: 0; }
.cls-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cls-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label actions" "chips chips"; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-divider); }
.cls-row-label { grid-area: label; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.cls-row-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.cls-row-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cls-chip { display: inline-flex; align-items: center; gap: 4px; }
.cls-chip .material-symbols-rounded { font-size: 13px; cursor: pointer; opacity: 0.75; }
.cls-chip .material-symbols-rounded:hover { opacity: 1; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card.cls-card { display: block; padding: 12px 16px; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card.cls-card > .cls-row { margin-top: 8px; padding-top: 8px; }
@media (min-width: 721px) {
    html[data-card-view="list"] .cls-row { grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "label chips actions"; }
}

/* ---- [V2.7] List view: every action button sits at the right end of its row ---- */
/* a button, or a block of buttons, that is a direct child of the card goes last and to the right */
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card:not(.cls-card) > :is(.erp-resource-actions, div:not(.erp-resource-card-head):has(> button), div:not(.erp-resource-card-head):has(> a.erp-pill-btn), button, a.erp-pill-btn) { order: 90; margin-inline-start: auto; justify-content: flex-end; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card:not(.cls-card) > :is(.erp-resource-actions, div:has(> button), div:has(> a.erp-pill-btn), button, a.erp-pill-btn) ~ :is(.erp-resource-actions, div:has(> button), div:has(> a.erp-pill-btn), button, a.erp-pill-btn) { margin-inline-start: 0; }
/* a button inside the card's head (Sessions, Class Teachers): the head dissolves into the row so the button can go to the end */
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card:not(.cls-card) > .erp-resource-card-head:has(> .erp-pill-btn) { display: contents; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card:not(.cls-card) > .erp-resource-card-head:has(> .erp-pill-btn) > div:not(.erp-resource-avatar) { flex: 1 1 220px; min-width: 0; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card:not(.cls-card) > .erp-resource-card-head > .erp-pill-btn { order: 90; margin-inline-start: auto; }
html[data-card-view="list"] .erp-view-toggle + .erp-resource-grid > .erp-resource-card:not(.cls-card) > .erp-resource-card-head > .erp-pill-btn ~ .erp-pill-btn { margin-inline-start: 0; }
/* programs: name, chips, Edit at the end; then the year / semester tiles; then the foot */
html[data-card-view="list"] .prg-card > .prg-card-head { display: contents; }
html[data-card-view="list"] .prg-card > .prg-card-head > .prg-card-title { flex: 0 1 auto; min-width: 150px; }
html[data-card-view="list"] .prg-card > .prg-chips { order: 1; flex: 1 1 auto; }
html[data-card-view="list"] .prg-card > .prg-card-head > .erp-pill-btn { order: 2; margin-inline-start: auto; }
html[data-card-view="list"] .prg-card > .prg-terms { order: 3; }
html[data-card-view="list"] .prg-card > .prg-card-foot { order: 4; }
/* branches and owners: the foot with its buttons goes to the right end */
html[data-card-view="list"] .erp-school-card > .erp-school-footer,
html[data-card-view="list"] .erp-owner-card > .erp-owner-card-footer { margin-inline-start: auto; }

/* ---- [V2.7] Payroll > Settings, view only: the values stay readable, the boxes just cannot be changed ---- */
.pr-settings.is-view-only .erp-input:disabled { color: var(--color-text-primary); -webkit-text-fill-color: var(--color-text-primary); opacity: 1; background: var(--color-background); cursor: not-allowed; }
.pr-settings.is-view-only select.erp-input:disabled { appearance: none; -webkit-appearance: none; background-image: none; }
.pr-settings > .stg-callout { background: var(--color-surface); border: 1px solid var(--color-divider); }

/* ---- [V2.7] Mark entry for a paper with a practical: Theory | Practical | Total ---- */
.mk-head { display: flex; align-items: center; gap: var(--space-sm); padding-bottom: 6px; border-bottom: 1px solid var(--color-divider); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.mk-head small { font-weight: 600; text-transform: none; letter-spacing: 0; }
.mk-col { width: 84px; max-width: 84px; flex: 0 0 84px; }
.mk-total { width: 52px; flex: 0 0 52px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.mk-head .mk-total { color: var(--color-text-secondary); }

/* ---- [V2.7] Lecture attendance; Send-up decisions (one Present / Absent / Leave style switch) ---- */
.int-bar .erp-field.lec-small { flex: 0 1 170px; min-width: 140px; }
.int-bar .erp-field.lec-tiny { flex: 0 1 100px; min-width: 90px; }
.lec-sheet-head { justify-content: space-between; }
.lec-counts { font-size: 13px; color: var(--color-text-secondary); }
.lec-counts strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.lec-list { border-top: 1px solid var(--color-divider); }
.lec-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.lec-who { min-width: 0; flex: 1 1 200px; }
.lec-marks { display: inline-flex; border: 1.5px solid var(--color-divider); border-radius: 10px; overflow: hidden; }
.lec-mark { padding: 6px 14px; border: 0; background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lec-mark + .lec-mark { border-inline-start: 1.5px solid var(--color-divider); }
.lec-mark:not(.is-on):hover { background: var(--status-info-bg); }
.lec-mark.is-present.is-on { background: var(--status-success-bg); color: var(--status-success-fg); }
.lec-mark.is-absent.is-on { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.lec-mark.is-leave.is-on { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.lec-minimum { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.lec-chip-short { text-decoration: none; }
.lec-minimum { flex-wrap: wrap; }
.lec-minimum .int-cell.is-narrow { width: 64px; padding: 5px 8px; }
#int_not_board { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: var(--space-md); }

/* [V2.7] ERP modules of an Owner (ModulePicker) */
.mod-head { margin-top: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.mod-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-primary); cursor: pointer; }
.mod-package { margin-bottom: var(--space-md); padding: 12px 16px; border: 1.5px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); }
.mod-package-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.mod-package-title .material-symbols-rounded { font-size: 18px; color: var(--color-primary); }
.mod-package-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.mod-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--status-info-bg); color: var(--color-primary); font-size: 12px; font-weight: 600; }
.mod-chip .material-symbols-rounded { font-size: 15px; }
.mod-package-hint { font-size: 12px; color: var(--color-text-secondary); }

/* Bank reconciliation: an entry not ticked as being on the statement stays outstanding - shown muted. */
.brec-outstanding td { color: var(--color-text-secondary); }

/* Challan settings: the wallet QR ("Scan to pay") - preview on the left, upload and text on the right. */
.chs-wallet-qr { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) 0; border-top: 1px solid var(--color-divider); margin-top: var(--space-md); }
.chs-wallet-qr-preview { width: 96px; height: 96px; flex-shrink: 0; border: 1px solid var(--color-divider); border-radius: var(--radius-button); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chs-wallet-qr-preview img { width: 100%; height: 100%; object-fit: contain; }
.chs-wallet-qr-preview .material-symbols-rounded { font-size: 44px; color: var(--color-text-secondary); }
.chs-wallet-qr-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { .chs-wallet-qr { flex-direction: column; } }

/* Public challan: the college wallet QR ("Scan to pay"). */
.pc-pay-qr { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.pc-pay-qr img { width: 132px; height: 132px; object-fit: contain; background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-button); padding: 4px; }
.pc-pay-qr span { display: flex; flex-direction: column; gap: 2px; }
.pc-pay-qr small { color: var(--color-text-secondary); }