/* =============================================================
 * Taalam — Centers system stylesheet
 * One sheet for both manager+staff (/center/*) and teacher
 * (/teacher/*) front-end pages, plus the shared auth screen.
 *
 * Sections:
 *   1. Tokens / reset
 *   2. Layout shell (topbar, navbar, container, footer)
 *   3. Cards / stat tiles / placeholder lists / alerts
 *   4. Forms (inputs, labels, grids)
 *   5. Buttons
 *   6. Tables
 *   7. Status badges + helpers
 *   8. Auth screen
 *   9. Attendance status pills (radio toggle group)
 *  10. Utilities
 * ============================================================= */

/* 1. Tokens / reset ------------------------------------------- */
:root {
    /* Brand: deep teal → emerald → lime. Education-friendly,
     * fresh, energetic — distinct from the previous purple/pink. */
    --sca-primary:       #0d9488;
    --sca-primary-light: #14b8a6;
    --sca-primary-dark:  #0f766e;
    --sca-bg:            #f4faf8;
    --sca-card:          #ffffff;
    --sca-text:          #0f172a;
    --sca-muted:         #64748b;
    --sca-border:        #e5e7eb;
    --sca-success:       #16a34a;
    --sca-danger:        #ef4444;
    --sca-warning:       #f59e0b;
    --sca-info:          #0ea5e9;

    /* Vivid icon palette — used by KPI cards, quick tiles, sidebar items, etc. */
    --sca-ico-teal:    #14b8a6;
    --sca-ico-emerald: #10b981;
    --sca-ico-lime:    #84cc16;
    --sca-ico-amber:   #f59e0b;
    --sca-ico-orange:  #f97316;
    --sca-ico-coral:   #fb7185;
    --sca-ico-rose:    #f43f5e;
    --sca-ico-sky:     #0ea5e9;
    --sca-ico-blue:    #3b82f6;
    --sca-ico-indigo:  #6366f1;
    --sca-ico-violet:  #8b5cf6;

    --sca-grad-brand:  linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #84cc16 100%);
    --sca-grad-soft:   linear-gradient(135deg, #2dd4bf 0%, #5eead4 100%);
    --sca-grad-warm:   linear-gradient(135deg, #fbbf24, #fb7185);
    --sca-grad-cool:   linear-gradient(135deg, #0ea5e9, #3b82f6);
    --sca-grad-mint:   linear-gradient(135deg, #34d399, #10b981);
    --sca-grad-sun:    linear-gradient(135deg, #f59e0b, #f97316);

    --sca-shadow-sm:   0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
    --sca-shadow-md:   0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
    --sca-shadow-lg:   0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .05);
    --sca-shadow-glow: 0 8px 24px rgba(20, 184, 166, .28);
}

/* Lightweight motion library — applied selectively. */
@keyframes sca-fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sca-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sca-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes sca-spin {
    to { transform: rotate(360deg); }
}
@keyframes sca-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Tajawal', system-ui, sans-serif;
    background: var(--sca-bg);
    color: var(--sca-text);
    line-height: 1.6;
}

a { color: var(--sca-primary); }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 12px; color: var(--sca-primary); }
h3 { font-size: 14px; margin: 16px 0 8px; }

/* 2. Layout shell — sidebar + main column ---------------------- */
.sca-shell {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    align-items: stretch;
}

/* Sidebar (right in RTL) */
.sca-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #042f2e 0%, #134e4a 50%, #14532d 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow: hidden;
    box-shadow: -2px 0 24px rgba(15, 23, 42, .15);
}
.sca-sidebar::before {
    /* Subtle ambient glow at the top of the sidebar */
    content: '';
    position: absolute;
    top: -50px;
    inset-inline-start: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(132, 204, 22, .18), transparent 70%);
    pointer-events: none;
}
.sca-sidebar-brand {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}
.sca-sidebar .sca-brand {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sca-sidebar .sca-brand i {
    width: 38px;
    height: 38px;
    background: var(--sca-grad-brand);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(132, 204, 22, .35);
}

.sca-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}
.sca-sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}
.sca-sidebar-user-meta { min-width: 0; }
.sca-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sca-sidebar-user-role {
    font-size: 11px;
    opacity: .7;
}

.sca-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
}
.sca-sidebar-nav::-webkit-scrollbar { width: 6px; }
.sca-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }

.sca-sidebar-section {
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 14px 10px 6px;
    margin-top: 4px;
}
.sca-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 2px 0;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    position: relative;
}
.sca-sidebar-link i {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sca-sidebar-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transform: translateX(-2px);
}
.sca-sidebar-link:hover i {
    background: var(--sca-grad-brand);
    transform: scale(1.05);
}
html[dir="rtl"] .sca-sidebar-link:hover { transform: translateX(2px); }

.sca-sidebar-link.is-active {
    background: linear-gradient(90deg, rgba(20, 184, 166, .22), rgba(132, 204, 22, .15));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(20, 184, 166, .15);
}
.sca-sidebar-link.is-active i {
    background: var(--sca-grad-brand);
    color: #fff;
    box-shadow: 0 4px 10px rgba(132, 204, 22, .35);
}
.sca-sidebar-link.is-active::before {
    content: '';
    position: absolute;
    inset-inline-start: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sca-grad-brand);
}

.sca-sidebar-footer {
    padding: 10px 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}
.sca-sidebar-logout { color: rgba(255, 200, 200, .8); }
.sca-sidebar-logout:hover { background: rgba(239, 68, 68, .15); color: #fee2e2; }

/* Mobile drawer overlay */
.sca-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 998;
}
body.sca-sidebar-open .sca-sidebar-overlay { display: block; }

/* Main column */
.sca-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Topbar (now lives inside .sca-main) */
.sca-topbar {
    background: #fff;
    color: var(--sca-text);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .03);
    position: sticky;
    top: 0;
    z-index: 50;
}
.sca-topbar a { color: var(--sca-text); }
.sca-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}
.sca-topbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--sca-text);
}
.sca-topbar-title i {
    width: 34px;
    height: 34px;
    background: var(--sca-grad-brand);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(20, 184, 166, .3);
}

.sca-sidebar-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--sca-text);
    cursor: pointer;
    font-size: 16px;
}
.sca-sidebar-toggle:hover { background: rgba(0, 0, 0, .05); }

.sca-topbar-iconlink {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.sca-topbar-iconlink:hover { background: #fee2e2; color: #b91c1c; }

/* Center switcher inside the new topbar (light bg, dark text) */
.sca-center-switcher form { margin: 0; }
.sca-center-switcher select {
    background: #fff;
    color: var(--sca-text);
    border: 1px solid #e5e7eb;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 160px;
}
.sca-center-switcher select:hover { border-color: var(--sca-primary); }

/* Mobile: sidebar becomes off-canvas drawer */
@media (max-width: 900px) {
    .sca-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        height: 100vh;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    html[dir="rtl"] .sca-sidebar { transform: translateX(100%); }
    body.sca-sidebar-open .sca-sidebar { transform: translateX(0); }
    .sca-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .sca-topbar-title { font-size: 13px; }
    .sca-topbar-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
}

.sca-container { max-width: 1280px; margin: 0 auto; padding: 24px 28px; width: 100%; box-sizing: border-box; }
@media (max-width: 720px) { .sca-container { padding: 16px 14px; } }

/* 3. Cards / tiles / alerts ----------------------------------- */
.sca-card {
    background: var(--sca-card);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    margin-bottom: 20px;
}
.sca-card-tight { padding: 16px; }
.sca-card-active { border-right: 4px solid var(--sca-primary); }
.sca-card-success { border-right: 4px solid var(--sca-success); }
.sca-card-danger { border-right: 4px solid var(--sca-danger); }
.sca-card-warning { border-right: 4px solid var(--sca-warning); }
.sca-card-info { border-right: 4px solid var(--sca-info); }

.sca-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.sca-stat-card {
    background: var(--sca-card);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    text-align: center;
}
.sca-stat-card .num {
    font-size: 32px;
    font-weight: 700;
    color: var(--sca-primary);
}
.sca-stat-card .label {
    color: var(--sca-muted);
    font-size: 13px;
    margin-top: 4px;
}
.sca-stat-card.is-success .num { color: var(--sca-success); }
.sca-stat-card.is-danger  .num { color: var(--sca-danger); }
.sca-stat-card.is-warning .num { color: var(--sca-warning); }

.sca-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    white-space: pre-line;
    line-height: 1.7;
    font-variant-numeric: tabular-nums;
}
.sca-alert-success { background: #dcfce7; color: #166534; }
.sca-alert-error,
.sca-alert-danger { background: #fee2e2; color: #991b1b; }
.sca-alert-info { background: #dbeafe; color: #1e40af; }
.sca-alert-warning { background: #fef3c7; color: #92400e; }

.sca-placeholder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sca-placeholder-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--sca-border);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sca-muted);
}
.sca-placeholder-list li:last-child { border-bottom: none; }
.sca-placeholder-list .badge {
    background: var(--sca-bg);
    color: var(--sca-muted);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
}

/* 4. Forms ---------------------------------------------------- */
.sca-input,
.sca-select,
.sca-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--sca-text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sca-input:hover,
.sca-select:hover,
.sca-textarea:hover { border-color: rgba(20, 184, 166, .35); }
.sca-input:focus,
.sca-select:focus,
.sca-textarea:focus {
    outline: none;
    border-color: var(--sca-primary-light);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
    background: #f7fdfb;
}
.sca-input::placeholder,
.sca-textarea::placeholder { color: #94a3b8; }
.sca-input:disabled,
.sca-select:disabled,
.sca-textarea:disabled {
    background: #f3f4f6;
    color: var(--sca-muted);
    cursor: not-allowed;
}

/* Custom select arrow (RTL friendly). */
.sca-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%2364748b'%3E%3Cpath d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 12px;
    padding-inline-start: 32px;
}

/* Native date picker — pretty up the calendar icon. */
input[type="date"].sca-input::-webkit-calendar-picker-indicator,
input[type="time"].sca-input::-webkit-calendar-picker-indicator,
input[type="month"].sca-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    filter: invert(35%) sepia(60%) saturate(800%) hue-rotate(140deg);
    transition: opacity .15s ease;
}
input[type="date"].sca-input:hover::-webkit-calendar-picker-indicator,
input[type="time"].sca-input:hover::-webkit-calendar-picker-indicator,
input[type="month"].sca-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* File input — modernise. */
.sca-input[type="file"] {
    padding: 6px;
    cursor: pointer;
}
.sca-input[type="file"]::file-selector-button {
    border: 0;
    padding: 8px 14px;
    margin-inline-end: 12px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    background: var(--sca-grad-soft);
    color: var(--sca-primary-dark);
    cursor: pointer;
    transition: background .2s ease;
}
.sca-input[type="file"]::file-selector-button:hover {
    background: var(--sca-grad-mint);
    color: #fff;
}

.sca-input-mono { font-family: 'Courier New', monospace; letter-spacing: .02em; }
.sca-input-lg   { padding: 14px 18px; font-size: 17px; font-weight: 500; border-radius: 12px; }
.sca-input-color { height: 42px; padding: 4px; cursor: pointer; }
.sca-w-200 { width: 200px !important; }

.sca-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sca-form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.sca-form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.sca-form-grid > .span-2 { grid-column: span 2; }
.sca-form-grid > .span-3 { grid-column: span 3; }
.sca-form-row {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}
.sca-form-row > .grow { flex: 1; min-width: 240px; }

.sca-label,
.sca-form-grid label,
.sca-form-row label { display: block; }
.sca-label-sm { font-size: 12px; }

.sca-form-actions { margin-top: 16px; display: flex; gap: 8px; align-items: center; }
.sca-form-help { font-size: 12px; color: var(--sca-muted); margin-top: 4px; }

.sca-perms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    background: var(--sca-bg);
    padding: 12px;
    border-radius: 6px;
}
.sca-form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.sca-form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* 5. Buttons — fancy, with shimmer + icon micro-animations ---- */

/* A subtle shine that sweeps across primary buttons on hover. */
@keyframes sca-btn-shine {
    0%   { transform: translateX(-150%) skewX(-20deg); }
    100% { transform: translateX(250%)  skewX(-20deg); }
}
@keyframes sca-icon-bounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-2px) rotate(-6deg); }
}

/* Base button layout — applied via .sca-btn AND auto-applied to any
   bare variant (`.sca-btn-primary`, `.sca-btn-success`, etc.) so the
   styling stays correct even when templates drop the base class. */
.sca-btn,
.sca-btn-primary,
.sca-btn-success,
.sca-btn-danger,
.sca-btn-ghost,
.sca-btn-cancel {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .01em;
    vertical-align: middle;

    /* Motion — bouncier easing, longer duration for a more "polished" feel. */
    position: relative;
    overflow: hidden;
    transition:
        transform .25s cubic-bezier(.16, 1, .3, 1),
        box-shadow .35s ease,
        background .25s ease,
        color .2s ease,
        border-color .2s ease;
    will-change: transform, box-shadow;
    user-select: none;
}
/* The shimmer streak — sits behind the label and sweeps on hover. */
.sca-btn::before,
.sca-btn-primary::before,
.sca-btn-success::before,
.sca-btn-danger::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, .35) 50%,
        transparent 100%);
    transform: translateX(-150%) skewX(-20deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.sca-btn:hover::before,
.sca-btn-primary:hover::before,
.sca-btn-success:hover::before,
.sca-btn-danger:hover::before { opacity: 1; animation: sca-btn-shine .9s ease; }

/* Icon inside the button — subtle bounce on hover, sits above the shimmer. */
.sca-btn i,
.sca-btn-primary i,
.sca-btn-success i,
.sca-btn-danger i,
.sca-btn-ghost i,
.sca-btn-cancel i {
    position: relative;
    z-index: 1;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
    flex-shrink: 0;
}
.sca-btn:hover i,
.sca-btn-primary:hover i,
.sca-btn-success:hover i,
.sca-btn-danger:hover i { animation: sca-icon-bounce .55s ease; }

.sca-btn:active,
.sca-btn-primary:active,
.sca-btn-success:active,
.sca-btn-danger:active,
.sca-btn-ghost:active,
.sca-btn-cancel:active { transform: translateY(0) scale(.98); transition-duration: .08s; }

.sca-btn:focus-visible,
.sca-btn-primary:focus-visible,
.sca-btn-success:focus-visible,
.sca-btn-danger:focus-visible,
.sca-btn-ghost:focus-visible,
.sca-btn-cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .35);
}
.sca-btn:disabled,
.sca-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.sca-btn:disabled::before { display: none; }

/* Variants */
.sca-btn-primary {
    background: var(--sca-grad-brand);
    color: #fff;
    box-shadow:
        0 4px 14px rgba(20, 184, 166, .35),
        0 1px 2px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sca-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(20, 184, 166, .45),
        0 4px 10px rgba(132, 204, 22, .25),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #fff;
}
.sca-btn-success {
    background: var(--sca-grad-mint);
    color: #fff;
    box-shadow:
        0 4px 14px rgba(16, 185, 129, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sca-btn-success:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(16, 185, 129, .45),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #fff;
}
.sca-btn-danger {
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: #fff;
    box-shadow:
        0 4px 14px rgba(239, 68, 68, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sca-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(239, 68, 68, .45),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #fff;
}
.sca-btn-ghost {
    background: rgba(20, 184, 166, .08);
    color: var(--sca-primary);
    border-color: rgba(20, 184, 166, .2);
}
.sca-btn-ghost:hover {
    background: rgba(20, 184, 166, .15);
    border-color: rgba(20, 184, 166, .35);
    color: var(--sca-primary-dark);
    transform: translateY(-1px);
}
.sca-btn-cancel {
    background: #fff;
    color: var(--sca-muted);
    border-color: var(--sca-border);
    padding: 10px 20px;
    text-decoration: none;
}
.sca-btn-cancel:hover {
    background: #f3f4f6;
    color: var(--sca-text);
    border-color: #d1d5db;
    transform: translateY(-1px);
}

/* Plain text-style link button — no shine, no overflow trickery. */
.sca-btn-link {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
    font-size: inherit;
    color: var(--sca-primary);
    text-decoration: none;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
    font-weight: 500;
    overflow: visible;
}
.sca-btn-link::before { display: none; }
.sca-btn-link:hover {
    background: rgba(20, 184, 166, .1);
    color: var(--sca-primary-dark);
}
.sca-btn-link-success { color: var(--sca-success); }
.sca-btn-link-success:hover { background: rgba(22, 163, 74, .1); color: #15803d; }
.sca-btn-link-danger  { color: var(--sca-danger); }
.sca-btn-link-danger:hover { background: rgba(239, 68, 68, .1); color: #b91c1c; }
.sca-btn-link-muted   { color: var(--sca-muted); }

.sca-btn-lg { padding: 14px 36px; font-size: 15px; border-radius: 14px; }
.sca-btn-xl { padding: 16px 48px; font-size: 16px; border-radius: 16px; }
.sca-btn-sm { padding: 5px 12px;  font-size: 12px; border-radius: 8px; gap: 5px; }
.sca-btn-block { display: flex; width: 100%; text-align: center; }

/* 6. Tables --------------------------------------------------- */
.sca-table {
    width: 100%;
    border-collapse: collapse;
}
.sca-table thead tr { background: var(--sca-bg); }
.sca-table th,
.sca-table td {
    padding: 8px;
    text-align: right;
}
.sca-table tbody tr {
    border-bottom: 1px solid var(--sca-border);
}
.sca-table tbody tr.is-cancelled {
    opacity: .5;
    text-decoration: line-through;
}
.sca-table tbody tr.is-soft-deleted { opacity: .55; }
.sca-table .actions,
.sca-table .col-actions { text-align: left; white-space: nowrap; }
.sca-table .col-narrow { width: 80px; }
.sca-table .col-time   { width: 90px; }

/* 7. Status badges + small helpers ---------------------------- */
.sca-status { font-size: 12px; }
.sca-status::before { content: "● "; }
.sca-status-active,
.sca-status-success { color: var(--sca-success); }
.sca-status-inactive,
.sca-status-danger { color: var(--sca-danger); }
.sca-status-warning { color: var(--sca-warning); }
.sca-status-info,
.sca-status-pending { color: var(--sca-info); }
.sca-status-muted { color: var(--sca-muted); }

.sca-tag {
    background: var(--sca-bg);
    color: var(--sca-muted);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    display: inline-block;
}
.sca-mono {
    font-family: monospace;
    font-size: 12px;
    color: var(--sca-muted);
}
.sca-amount {
    font-weight: 700;
    font-size: 14px;
}
.sca-amount-success { color: var(--sca-success); }
.sca-amount-danger  { color: var(--sca-danger); }

.sca-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 4px;
}
.sca-color-block {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    vertical-align: middle;
}

/* 8. Auth screen ---------------------------------------------- */
.sca-auth-page {
    background: linear-gradient(135deg, #1e3a5f, #2d5a8e);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Tajawal', system-ui, sans-serif;
}
.sca-auth-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.sca-auth-logo {
    text-align: center;
    margin-bottom: 24px;
}
.sca-auth-logo img { max-height: 80px; }
.sca-auth-logo-icon { font-size: 48px; color: var(--sca-primary); }
.sca-auth-title {
    text-align: center;
    margin: 0 0 6px;
    color: var(--sca-primary);
    font-size: 22px;
}
.sca-auth-subtitle {
    text-align: center;
    color: var(--sca-muted);
    margin: 0 0 24px;
    font-size: 14px;
}
.sca-auth-footer {
    text-align: center;
    color: var(--sca-muted);
    font-size: 12px;
    margin-top: 24px;
}

/* 9. Attendance status pills ---------------------------------- */
.sca-status-toggle {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    background: var(--sca-bg);
    color: var(--sca-muted);
    border: 1px solid var(--sca-border);
}
.sca-status-toggle input { display: none; }
.sca-status-toggle.active {
    color: #fff;
}
.sca-status-toggle.active.s-present { background: var(--sca-success); border-color: var(--sca-success); }
.sca-status-toggle.active.s-late    { background: var(--sca-warning); border-color: var(--sca-warning); }
.sca-status-toggle.active.s-absent  { background: var(--sca-danger);  border-color: var(--sca-danger); }
.sca-status-toggle.active.s-excused { background: var(--sca-info);    border-color: var(--sca-info); }

/* Group form schedule rows */
.sca-slot-row {
    display: grid;
    grid-template-columns: 200px 150px 150px 50px;
    gap: 8px;
    margin-bottom: 8px;
    align-items: end;
}
.sca-slot-remove {
    background: #fee2e2;
    color: #991b1b;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    height: 38px;
}

/* P&L emphasis card */
.sca-pnl-summary {
    text-align: center;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
}
.sca-pnl-summary .num {
    font-size: 42px;
    font-weight: 700;
}
.sca-pnl-summary .num.is-profit { color: var(--sca-success); }
.sca-pnl-summary .num.is-loss   { color: var(--sca-danger); }

/* P&L breakdown rows */
.sca-pnl-row { background: #fef3c7; }
.sca-pnl-total { background: var(--sca-bg); font-weight: 700; }

/* Quick action grid on dashboard */
.sca-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.sca-quick-tile {
    background: #fff;
    border: 1px solid #eef2f7;
    padding: 16px 18px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--sca-text);
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    transition:
        transform .25s cubic-bezier(.16, 1, .3, 1),
        box-shadow .25s ease,
        border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.sca-quick-tile::after {
    /* Soft gradient wash that sweeps in on hover. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 184, 166, .06), rgba(132, 204, 22, .04));
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.sca-quick-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    border-color: rgba(20, 184, 166, .35);
    color: var(--sca-primary-dark);
}
.sca-quick-tile:hover::after { opacity: 1; }
.sca-quick-tile:active { transform: translateY(-1px); }
.sca-quick-tile span,
.sca-quick-tile > * { position: relative; z-index: 1; }
.sca-quick-tile i {
    width: 44px;
    height: 44px;
    background: var(--sca-grad-soft);
    color: #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform .25s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 6px 14px rgba(20, 184, 166, .25);
}
.sca-quick-tile:hover i {
    transform: scale(1.08) rotate(-4deg);
}
.sca-quick-tile.is-success i { background: var(--sca-grad-mint);  box-shadow: 0 6px 14px rgba(16, 185, 129, .3); }
.sca-quick-tile.is-danger  i { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 6px 14px rgba(239, 68, 68, .3); }

/* Auto-cycle colors so adjacent tiles look varied without per-tile classes. */
.sca-quick-grid > .sca-quick-tile:nth-child(3n+1) i { background: var(--sca-grad-cool); box-shadow: 0 6px 14px rgba(59, 130, 246, .3); }
.sca-quick-grid > .sca-quick-tile:nth-child(3n+2) i { background: var(--sca-grad-warm); box-shadow: 0 6px 14px rgba(245, 158, 11, .3); }
.sca-quick-grid > .sca-quick-tile:nth-child(3n+3) i { background: linear-gradient(135deg, #fb7185, #f43f5e); box-shadow: 0 6px 14px rgba(244, 63, 94, .3); }
.sca-quick-grid > .sca-quick-tile.is-success i { background: var(--sca-grad-mint) !important; box-shadow: 0 6px 14px rgba(16, 185, 129, .3) !important; }
.sca-quick-grid > .sca-quick-tile.is-danger  i { background: linear-gradient(135deg, #ef4444, #f87171) !important; box-shadow: 0 6px 14px rgba(239, 68, 68, .3) !important; }

/* 10. Utilities ----------------------------------------------- */
.sca-flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.sca-flex-end { display: flex; gap: 8px; align-items: end; }
.sca-flex-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sca-grow { flex: 1; min-width: 0; }
/* Page-header layout: title on one side, actions on the other. Used
   in admin/center-analytics + similar header rows. */
.sca-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
/* Stack a label/checkbox on its own line with vertical breathing room.
   Replaces inline style="display:block;margin:4px 0;" patterns. */
.sca-checkbox-block { display: block; margin: 4px 0; }
/* Span 2 grid columns — for full-width fields inside a 2-col form grid. */
.sca-grid-span-2 { grid-column: span 2; }
.sca-mt-2 { margin-top: 8px; }
.sca-mt-3 { margin-top: 12px; }
.sca-mt-4 { margin-top: 16px; }
.sca-mt-5 { margin-top: 24px; }
.sca-text-muted { color: var(--sca-muted); }
.sca-text-success { color: var(--sca-success); }
.sca-text-danger  { color: var(--sca-danger); }
.sca-text-center { text-align: center; }
.sca-empty { color: var(--sca-muted); text-align: center; padding: 30px; }
.sca-divider { border-bottom: 1px solid var(--sca-border); padding-bottom: 8px; }
.sca-back-link {
    color: var(--sca-muted);
    text-decoration: none;
    font-size: 14px;
}

/* Cancellation row styling */
.is-line-through { text-decoration: line-through; }

/* Inline utilities used inside table cells / form rows */
.sca-inline { display: inline; }
.sca-inline-form { display: inline; margin-right: 8px; }
.sca-link-plain { color: inherit; text-decoration: none; }
.sca-h-small { font-weight: normal; font-size: 14px; }

/* Width caps used by form inputs */
.sca-w-100  { width: 100px; }
.sca-w-150  { width: 150px; }
.sca-w-200  { width: 200px; }
.sca-w-240  { width: 240px; }
.sca-w-300  { width: 300px; }
.sca-w-380  { width: 380px; }

/* Form-grid column shapes used by detailed forms */
.sca-form-grid-3-1-1-1   { grid-template-columns: 1fr 1fr 1fr 1fr; }
.sca-form-grid-2-1       { grid-template-columns: 200px 1fr 1fr 1fr; }
.sca-form-grid-2-1-1     { grid-template-columns: 200px 1fr; }
.sca-form-grid-1-2-2-2   { grid-template-columns: 1fr 200px 200px 200px; }
.sca-form-grid-students  { grid-template-columns: 1fr 150px 150px; }
.sca-form-grid-tight-3   { grid-template-columns: 1fr 200px 120px; }
.sca-form-grid-pwd       { grid-template-columns: 300px 1fr; }

/* Compact card with inline form */
.sca-search-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Small-text inside table cells */
.sca-cell-sm { font-size: 13px; }
.sca-cell-xs { font-size: 12px; }

/* Decorations for amounts */
.sca-num-lg { font-size: 18px; font-weight: 500; }
.sca-num-bold { font-weight: 700; font-size: 14px; }

/* Detail layout in earnings table — colored remainder + lock icon */
.sca-paid { color: var(--sca-success); }
.sca-deduction { color: var(--sca-danger); }

/* P&L two-column breakdown */
.sca-pnl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.sca-enroll-form {
    display: grid;
    grid-template-columns: 1fr 150px 150px 140px auto;
    gap: 8px;
    align-items: end;
}
@media (max-width: 720px) {
    .sca-enroll-form { grid-template-columns: 1fr; }
}

/* "Pay now" inline popover from <details> on earnings table */
.sca-pay-popover {
    background: #fff;
    border: 1px solid var(--sca-border);
    padding: 12px;
    border-radius: 6px;
    margin-top: 6px;
    width: 280px;
}
.sca-pay-popover p { margin: 0 0 6px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
    .sca-pnl-grid { grid-template-columns: 1fr; }
}

/* Auth-page form bits */
.sca-form { display: block; }
.sca-form-group { margin-bottom: 14px; }
.sca-input-icon {
    position: relative;
}
.sca-input-icon > i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    color: var(--sca-muted);
}
.sca-input-icon .sca-input,
.sca-input-icon input {
    padding-right: 36px;
}
.sca-input-password .sca-password-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sca-muted);
}
.sca-checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sca-link { color: var(--sca-primary); text-decoration: none; font-size: 13px; }
.sca-alert.is-dismissing {
    opacity: 0;
    transform: translateY(-10px);
    transition: all .3s ease;
}

/* ============================================================
 * Docs page (public)
 * ============================================================ */

.sca-docs { max-width: 980px; margin: 0 auto; }

.sca-docs h1 { font-size: 28px; margin: 0 0 12px; color: var(--sca-text); }
.sca-docs h2 {
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sca-border);
}
.sca-docs h3 {
    font-size: 16px;
    color: var(--sca-primary);
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sca-border);
    font-weight: 700;
}
.sca-docs h4 {
    font-size: 14px;
    color: var(--sca-text);
    margin: 18px 0 10px;
    background: var(--sca-bg);
    padding: 8px 12px;
    border-radius: 6px;
    border-right: 3px solid var(--sca-primary);
}

/* ── Hero ── */
.sca-docs-hero {
    background: linear-gradient(135deg, #1e3a5f, #2d5a8e);
    color: #fff;
    padding: 36px 32px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(30, 58, 95, .25);
}
.sca-docs-hero h1 { color: #fff; font-size: 32px; margin: 0 0 8px; }
.sca-docs-hero p { color: rgba(255, 255, 255, .85); margin: 0; font-size: 15px; }
.sca-docs-hero .sca-docs-version {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, .15);
    border-radius: 20px;
    font-size: 12px;
    font-family: monospace;
}

/* ── Roles overview grid (4 cards) ── */
.sca-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.sca-role-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    border-top: 4px solid var(--sca-primary);
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sca-role-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}
.sca-role-card .icon {
    font-size: 32px;
    margin-bottom: 8px;
    color: var(--sca-primary);
}
.sca-role-card h3 {
    font-size: 16px;
    margin: 0 0 6px;
    border: none;
    padding: 0;
}
.sca-role-card .url {
    font-family: monospace;
    font-size: 11px;
    color: var(--sca-muted);
    background: var(--sca-bg);
    padding: 4px 8px;
    border-radius: 4px;
    margin: 6px 0 12px;
    display: inline-block;
    word-break: break-all;
}
.sca-role-card.is-admin    { border-top-color: #6b21a8; }
.sca-role-card.is-admin    .icon { color: #6b21a8; }
.sca-role-card.is-manager  { border-top-color: var(--sca-primary); }
.sca-role-card.is-staff    { border-top-color: var(--sca-warning); }
.sca-role-card.is-staff    .icon { color: var(--sca-warning); }
.sca-role-card.is-teacher  { border-top-color: var(--sca-success); }
.sca-role-card.is-teacher  .icon { color: var(--sca-success); }
.sca-role-card.is-parent   { border-top-color: #0ea5e9; }
.sca-role-card.is-parent   .icon { color: #0ea5e9; }

/* Demo credentials block inside each role card. Sits between the URL
   pill and the "open" button — gives the reader enough info to log in
   without having to look up the seeder output. */
.sca-role-creds {
    background: var(--sca-bg);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.6;
    text-align: start;
}
.sca-cred-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
}
.sca-cred-label {
    color: var(--sca-muted);
    font-size: 11px;
    min-width: 14px;
    text-align: center;
}
.sca-role-creds code {
    background: #fff;
    border: 1px solid var(--sca-border);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--sca-text);
    user-select: all;
}
.sca-cred-value {
    color: var(--sca-muted);
    font-size: 12px;
}

/* ── Sticky TOC ── */
.sca-docs-toc {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.sca-docs-toc a {
    background: var(--sca-bg);
    border: 1px solid var(--sca-border);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--sca-text);
    text-decoration: none;
    transition: all .15s ease;
    white-space: nowrap;
}
.sca-docs-toc a:hover {
    background: var(--sca-primary);
    color: #fff;
    border-color: var(--sca-primary);
}

/* ── Section number badge ── */
.sca-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sca-primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

/* ── Role section header (with badge + open button) ── */
.sca-docs-role {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.sca-role-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.sca-role-admin   { background: #6b21a8; }
.sca-role-manager { background: var(--sca-primary); }
.sca-role-staff   { background: var(--sca-warning); }
.sca-role-teacher { background: var(--sca-success); }

.sca-url-pill {
    display: inline-block;
    background: var(--sca-bg);
    color: var(--sca-text);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 13px;
    margin-bottom: 12px;
    word-break: break-all;
    user-select: all;
}

/* ── Setup timeline (numbered steps) ── */
.sca-docs-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: docs-step;
}
.sca-docs-timeline > li {
    counter-increment: docs-step;
    /* RTL: number circle sits on the right (start side) at right:16px,
       so the content needs its 60px padding on the same side. Using
       logical `padding-inline-start` so the rule keeps working if the
       page is ever rendered LTR. */
    padding: 16px 18px;
    padding-inline-start: 60px;
    background: var(--sca-bg);
    border-radius: 8px;
    margin-bottom: 12px;
    position: relative;
    line-height: 1.8;
}
.sca-docs-timeline > li::before {
    content: counter(docs-step);
    position: absolute;
    inset-inline-start: 16px;
    top: 14px;
    background: var(--sca-primary);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.sca-docs-timeline ul {
    margin: 8px 0 0;
    padding-inline-start: 20px;
    color: var(--sca-muted);
    font-size: 13px;
    list-style: disc;
}
.sca-docs-timeline ul li { margin: 4px 0; }

/* ── Bullet list ── */
.sca-docs-list {
    padding-right: 24px;
    line-height: 1.9;
}
.sca-docs-list li { margin: 6px 0; }

/* ── Test scenarios (numbered cards) ── */
.sca-docs-tests {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    counter-reset: test-step;
}
.sca-docs-tests li {
    counter-increment: test-step;
    margin: 10px 0;
    /* Same padding-direction story as .sca-docs-timeline above:
       circle is on the start (right) side in RTL, content needs to clear it. */
    padding: 12px 16px;
    padding-inline-start: 56px;
    background: #fff;
    border: 1px solid var(--sca-border);
    border-inline-start: 4px solid var(--sca-primary);
    border-radius: 8px;
    position: relative;
    line-height: 1.7;
}
.sca-docs-tests li::before {
    content: counter(test-step);
    position: absolute;
    inset-inline-start: 14px;
    top: 12px;
    background: var(--sca-primary);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.sca-docs-tests li ul {
    margin: 6px 0 0;
    padding-inline-start: 18px;
    color: var(--sca-muted);
    font-size: 13px;
    line-height: 1.7;
}
.sca-docs-tests code {
    background: var(--sca-bg);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Test outcome markers */
.sca-pass { color: var(--sca-success); font-weight: 700; }
.sca-fail { color: var(--sca-danger);  font-weight: 700; }

/* ── Pages table ── */
.sca-docs-pages {
    margin-top: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    border-radius: 8px;
    overflow: hidden;
}
.sca-docs-pages td:nth-child(2) {
    font-family: monospace;
    font-size: 12px;
    color: var(--sca-muted);
    white-space: nowrap;
}
.sca-docs-pages td:nth-child(3) {
    color: var(--sca-muted);
    font-size: 13px;
}

/* ── Audit badge (Phase / Tier) ── */
.sca-audit-badge {
    display: inline-block;
    background: var(--sca-bg);
    color: var(--sca-muted);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-family: monospace;
}

/* ── Copy button (next to URL pill) ── */
.sca-copy-btn {
    background: none;
    border: 1px solid var(--sca-border);
    color: var(--sca-muted);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    margin-right: 6px;
}
.sca-copy-btn:hover { color: var(--sca-primary); border-color: var(--sca-primary); }

/* ── Back-to-top floating button ── */
.sca-back-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--sca-primary);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .2s, transform .2s;
    z-index: 100;
}
.sca-back-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.sca-back-top:hover { background: var(--sca-primary-light); color: #fff; }

/* ── Section spacing ── */
.sca-docs > section { scroll-margin-top: 80px; }

/* ── Mobile tweaks ── */
@media (max-width: 720px) {
    .sca-docs h1 { font-size: 22px; }
    .sca-docs h2 { font-size: 18px; }
    .sca-docs-hero h1 { font-size: 24px; }
    .sca-docs-toc { gap: 4px; padding: 8px; }
    .sca-docs-toc a { padding: 4px 10px; font-size: 11px; }
    .sca-docs-timeline > li { padding: 12px 14px; padding-inline-start: 52px; }
    .sca-docs-tests li { padding: 10px 14px; padding-inline-start: 50px; }
}

/* 404 / generic error inside the auth layout */
.sca-error-page { text-align: center; padding: 20px 0; }
.sca-error-code { font-size: 72px; font-weight: 900; color: var(--sca-primary); line-height: 1; }
.sca-error-icon { font-size: 36px; color: var(--sca-muted); margin: 12px 0; }
.sca-error-title { color: var(--sca-text); margin: 8px 0 6px; font-size: 18px; }
.sca-error-desc { color: var(--sca-muted); margin: 0 0 20px; font-size: 14px; }

/* ── Parent portal layout ── */
.sca-parent-body {
    background: var(--sca-bg);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.sca-parent-topbar {
    background: linear-gradient(135deg, var(--sca-primary), var(--sca-primary-light));
    color: #fff;
    padding: 14px 20px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.sca-parent-topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.sca-parent-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
}
.sca-parent-brand i {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sca-parent-topbar-meta {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.sca-parent-container { flex: 1; max-width: 1100px; }
.sca-parent-footer {
    text-align: center;
    color: var(--sca-muted);
    font-size: 12px;
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.sca-parent-footer p { margin: 0; }

.sca-parent-hero {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 22px;
    margin: 16px 0 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.sca-parent-hero-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sca-primary), var(--sca-primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.sca-parent-hero-info h1 { margin: 0 0 6px; font-size: 22px; }
.sca-parent-hero-info p {
    margin: 0;
    color: var(--sca-muted);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.sca-parent-hero-info p span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Print layout + QR ID cards ── */
.sca-print-body {
    background: #f1f5f9;
    margin: 0;
    padding: 0;
}
.sca-print-toolbar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
}
.sca-print-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}
.sca-print-empty {
    text-align: center;
    color: var(--sca-muted);
    padding: 60px 20px;
}

.sca-card-sheet {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.sca-id-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    display: flex;
    flex-direction: column;
}
.sca-id-card-head {
    background: linear-gradient(135deg, var(--sca-primary), var(--sca-primary-light));
    color: #fff;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
}
.sca-id-card-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sca-id-card-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
}
.sca-id-card-qr {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sca-qr-canvas { width: 100%; height: 100%; }
.sca-qr-canvas img {
    width: 100% !important;
    height: 100% !important;
    image-rendering: pixelated;
}
.sca-id-card-info {
    flex: 1;
    min-width: 0;
}
.sca-id-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--sca-text);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sca-id-card-code {
    font-size: 13px;
    color: var(--sca-text);
    margin-bottom: 4px;
}
.sca-id-card-code code {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
}
.sca-id-card-label { color: var(--sca-muted); font-size: 11px; }
.sca-id-card-meta {
    font-size: 11px;
    color: var(--sca-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.sca-id-card-foot {
    padding: 8px 14px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    font-size: 10px;
    color: var(--sca-muted);
    text-align: center;
}

@media print {
    .sca-no-print { display: none !important; }
    .sca-print-body { background: #fff; }
    .sca-print-page { padding: 0; max-width: none; }
    .sca-card-sheet { gap: 8px; }
    .sca-id-card { box-shadow: none; }
    @page { margin: 12mm; }
}
@media (max-width: 720px) {
    .sca-card-sheet { grid-template-columns: 1fr; }
}

/* ── Payment receipt (printable) ── */
.sca-receipt {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    page-break-inside: avoid;
}
.sca-receipt-head {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px dashed #e5e7eb;
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.sca-receipt-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}
.sca-receipt-logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--sca-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.sca-receipt-head-info { flex: 1; min-width: 0; }
.sca-receipt-head-info h2 {
    margin: 0;
    font-size: 16px;
    color: var(--sca-text);
}
.sca-receipt-head-info p {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--sca-muted);
}
.sca-receipt-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sca-receipt-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 12px;
}
.sca-receipt-label {
    display: block;
    color: var(--sca-muted);
    font-size: 10px;
    margin-bottom: 2px;
}

.sca-receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 12px;
}
.sca-receipt-table th,
.sca-receipt-table td {
    text-align: start;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
}
.sca-receipt-table th {
    color: var(--sca-muted);
    font-weight: 500;
    width: 35%;
}
.sca-receipt-table td { color: var(--sca-text); }

.sca-receipt-amount {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: #f9fafb;
}
.sca-receipt-amount-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sca-muted);
    margin-bottom: 4px;
}
.sca-receipt-amount-total {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: var(--sca-text);
    border-top: 1px dashed #d1d5db;
    padding-top: 8px;
    margin-top: 6px;
}
.sca-receipt-amount-total strong { font-size: 18px; color: var(--sca-primary); }

.sca-receipt-foot {
    border-top: 2px dashed #e5e7eb;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-size: 11px;
    color: var(--sca-muted);
    gap: 12px;
}
.sca-receipt-thanks {
    font-style: italic;
    text-align: end;
}

@media print {
    .sca-receipt { box-shadow: none; border: 0; padding: 0; max-width: none; }
    @page { size: A6; margin: 8mm; }
}

/* ── Photo / logo uploader ── */
.sca-photo-uploader {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.sca-photo-uploader > div:last-child { flex: 1; }
.sca-photo-preview {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--sca-primary);
    flex-shrink: 0;
}
.sca-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Photo on QR card */
.sca-id-card-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
    margin-bottom: 6px;
    display: block;
}

/* Parent portal hero avatar with photo */
.sca-parent-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ── Progress report (printable) ── */
.sca-progress-report {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.sca-progress-head {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--sca-primary);
    padding-bottom: 16px;
    margin-bottom: 18px;
}
.sca-progress-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}
.sca-progress-title {
    margin: 0;
    color: var(--sca-primary);
    font-size: 20px;
}
.sca-progress-meta {
    margin: 4px 0 0;
    color: var(--sca-muted);
    font-size: 13px;
}
.sca-progress-student {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 10px;
}
.sca-progress-label {
    display: block;
    color: var(--sca-muted);
    font-size: 11px;
    margin-bottom: 2px;
}
.sca-progress-section {
    margin-bottom: 18px;
    page-break-inside: avoid;
}
.sca-progress-section h2 {
    color: var(--sca-primary);
    font-size: 14px;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e5e7eb;
}
.sca-progress-section.sca-progress-warn {
    background: #fef3c7;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #fde68a;
}
.sca-progress-section.sca-progress-warn h2 { color: #92400e; border-bottom-color: #fde68a; }
.sca-progress-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sca-progress-table th,
.sca-progress-table td {
    text-align: start;
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
}
.sca-progress-table th {
    background: #f9fafb;
    color: var(--sca-muted);
    font-weight: 600;
}
.sca-progress-table td.num,
.sca-progress-table th.num { text-align: end; direction: ltr; font-variant-numeric: tabular-nums; }
.sca-progress-foot {
    border-top: 1px solid #e5e7eb;
    margin-top: 24px;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    color: var(--sca-muted);
    font-size: 12px;
}

@media print {
    .sca-progress-report { box-shadow: none; border: 0; padding: 0; max-width: none; }
    @page { size: A4; margin: 14mm; }
}

/* ── Global search (topbar autocomplete) ── */
.sca-global-search {
    position: relative;
    flex: 1;
    max-width: 380px;
    margin: 0 16px;
}
.sca-global-search > i.fas {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sca-muted);
    font-size: 13px;
    pointer-events: none;
}
.sca-global-search input[type="search"] {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    background: #f8fafc;
    color: var(--sca-text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sca-global-search input[type="search"]::placeholder { color: #94a3b8; }
.sca-global-search input[type="search"]:focus {
    outline: none;
    border-color: var(--sca-primary-light);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .15);
}
.sca-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .15), 0 4px 12px rgba(15, 23, 42, .06);
    z-index: 200;
    max-height: 480px;
    overflow-y: auto;
    animation: sca-fade-in-up .18s ease both;
}
.sca-search-empty {
    padding: 24px;
    text-align: center;
    color: var(--sca-muted);
    font-size: 13px;
}
.sca-search-cat + .sca-search-cat { border-top: 1px solid #f3f4f6; }
.sca-search-cat-label {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sca-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sca-search-hit {
    display: block;
    padding: 8px 16px;
    color: var(--sca-text);
    text-decoration: none;
    transition: background .15s ease;
    position: relative;
}
.sca-search-hit:hover { background: rgba(20, 184, 166, .06); }
.sca-search-hit-title {
    font-size: 13px;
    font-weight: 600;
}
.sca-search-hit-meta {
    font-size: 11px;
    color: var(--sca-muted);
    margin-top: 2px;
}
.sca-search-hit-badge {
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    transform: translateY(-50%);
    background: rgba(20, 184, 166, .12);
    color: var(--sca-primary-dark);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
@media (max-width: 800px) {
    .sca-global-search { max-width: none; margin: 0 8px; }
}

/* ── Calendar (week + month) ── */
.sca-calendar-header {
    margin-bottom: 12px;
}
.sca-calendar-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

/* Week view */
.sca-cal-week-wrap { padding: 0; overflow: hidden; }
.sca-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 480px;
}
.sca-cal-day {
    border-inline-start: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
}
.sca-cal-day:first-child { border-inline-start: 0; }
.sca-cal-day.is-today { background: rgba(20, 184, 166, .04); }
.sca-cal-day-head {
    text-align: center;
    padding: 12px 8px;
    background: #f8fafc;
    border-bottom: 1px solid #f3f4f6;
}
.sca-cal-day.is-today .sca-cal-day-head {
    background: var(--sca-grad-soft);
    color: var(--sca-primary-dark);
}
.sca-cal-day-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sca-muted);
    margin-bottom: 2px;
}
.sca-cal-day.is-today .sca-cal-day-name { color: var(--sca-primary-dark); }
.sca-cal-day-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--sca-text);
}
.sca-cal-day-body {
    padding: 8px 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}
.sca-cal-empty {
    color: #cbd5e1;
    text-align: center;
    margin: auto;
    font-size: 18px;
}

/* Event card (week view) */
.sca-cal-event {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-inline-start: 4px solid var(--ev-color, #0d9488);
    text-decoration: none;
    color: var(--sca-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .15s ease, box-shadow .15s ease;
    overflow: hidden;
}
.sca-cal-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    color: var(--sca-text);
}
.sca-cal-event.is-cancelled {
    opacity: .55;
    text-decoration: line-through;
}
.sca-cal-event-time {
    display: block;
    font-size: 11px;
    color: var(--ev-color, var(--sca-primary));
    font-weight: 700;
    direction: ltr;
}
.sca-cal-event-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sca-cal-event-meta {
    display: block;
    font-size: 11px;
    color: var(--sca-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Month view */
.sca-cal-month-wrap { padding: 0; overflow: hidden; }
.sca-cal-month-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #f3f4f6;
}
.sca-cal-month-header {
    padding: 10px 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sca-muted);
    text-align: center;
}
.sca-cal-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(110px, 1fr);
}
.sca-cal-month-cell {
    padding: 6px 8px;
    border-inline-start: 1px solid #f3f4f6;
    border-top: 1px solid #f3f4f6;
    background: #fff;
    overflow: hidden;
}
.sca-cal-month-cell.is-pad { background: #fafbfc; }
.sca-cal-month-cell.is-today { background: rgba(20, 184, 166, .06); }
.sca-cal-month-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--sca-muted);
    margin-bottom: 4px;
}
.sca-cal-month-cell.is-today .sca-cal-month-num {
    background: var(--sca-grad-brand);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sca-cal-month-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sca-cal-month-event {
    display: flex;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(20, 184, 166, .08);
    border-inline-start: 3px solid var(--ev-color, #0d9488);
    color: var(--sca-text);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sca-cal-month-event:hover {
    background: rgba(20, 184, 166, .15);
    color: var(--sca-text);
}
.sca-cal-month-event span:first-child {
    color: var(--ev-color, var(--sca-primary));
    font-weight: 700;
    direction: ltr;
}
.sca-cal-month-more {
    font-size: 11px;
    color: var(--sca-muted);
    padding: 2px 6px;
    font-style: italic;
}

@media (max-width: 800px) {
    .sca-cal-week { grid-template-columns: 1fr; min-height: auto; }
    .sca-cal-day { border-inline-start: 0; border-bottom: 1px solid #f3f4f6; }
    .sca-cal-month { grid-auto-rows: minmax(72px, 1fr); }
    .sca-cal-month-event span:last-child { display: none; }
}

/* ── Notifications bell + dropdown ── */
.sca-bell { position: relative; display: inline-block; }
.sca-bell-trigger {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
}
.sca-bell-count {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    background: linear-gradient(135deg, #ef4444, #f43f5e);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 16px;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(239, 68, 68, .4);
    animation: sca-pulse 2s ease-in-out infinite;
}
.sca-bell-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .15), 0 4px 12px rgba(15, 23, 42, .06);
    z-index: 200;
    animation: sca-fade-in-up .18s ease both;
}
.sca-bell-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.sca-bell-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 360px;
    overflow-y: auto;
}
.sca-bell-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--sca-muted);
    font-size: 13px;
}
.sca-bell-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s ease;
    border-inline-start: 3px solid transparent;
}
.sca-bell-item:hover { background: #f8fafc; }
.sca-bell-item.is-unread { background: rgba(20, 184, 166, .04); border-inline-start-color: var(--sca-primary); }
.sca-bell-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.sca-bell-icon-teal    { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.sca-bell-icon-emerald { background: linear-gradient(135deg, #34d399, #10b981); }
.sca-bell-icon-amber   { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.sca-bell-icon-rose    { background: linear-gradient(135deg, #fb7185, #f43f5e); }
.sca-bell-icon-sky     { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.sca-bell-icon-violet  { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.sca-bell-text { flex: 1; min-width: 0; }
.sca-bell-title { font-size: 13px; font-weight: 600; color: var(--sca-text); margin-bottom: 2px; }
.sca-bell-body  { font-size: 12px; color: var(--sca-muted); margin-bottom: 4px; }
.sca-bell-ago   { font-size: 11px; color: #94a3b8; }
.sca-bell-foot {
    padding: 10px 16px;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}
.sca-bell-foot a {
    color: var(--sca-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* Notifications inbox page */
.sca-notif-list { list-style: none; margin: 0; padding: 0; }
.sca-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s ease;
}
.sca-notif-item:hover { background: #f8fafc; }
.sca-notif-item.is-unread { background: rgba(20, 184, 166, .04); }
.sca-notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.sca-notif-icon-teal    { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.sca-notif-icon-emerald { background: linear-gradient(135deg, #34d399, #10b981); }
.sca-notif-icon-amber   { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.sca-notif-icon-rose    { background: linear-gradient(135deg, #fb7185, #f43f5e); }
.sca-notif-icon-sky     { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.sca-notif-icon-violet  { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.sca-notif-body { flex: 1; min-width: 0; }
.sca-notif-title { font-size: 14px; font-weight: 600; color: var(--sca-text); margin-bottom: 4px; }
.sca-notif-title a { color: inherit; }
.sca-notif-text { font-size: 13px; color: var(--sca-muted); margin-bottom: 6px; }
.sca-notif-meta { font-size: 11px; color: #94a3b8; display: flex; gap: 4px; align-items: center; }

/* ── Progress bar (broadcasts, etc.) ── */
.sca-progress-bar {
    width: 100%;
    height: 14px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}
.sca-progress-fill {
    height: 100%;
    background: var(--sca-grad-brand);
    border-radius: 999px;
    transition: width .35s ease;
    box-shadow: 0 0 12px rgba(20, 184, 166, .35);
}

/* ── Cash drawer header ── */
.sca-cash-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Code block (CSV examples, etc.) ── */
.sca-code-block {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
    direction: ltr;
    text-align: left;
    margin: 10px 0;
}

/* ── Quick attendance tabs + camera scanner ── */
.sca-quick-attend-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 6px;
}
.sca-quick-tab {
    background: transparent;
    border: 0;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    color: var(--sca-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -7px;
}
.sca-quick-tab:hover { color: var(--sca-primary); background: rgba(30, 58, 95, .04); }
.sca-quick-tab.is-active {
    color: var(--sca-primary);
    border-bottom-color: var(--sca-primary);
    background: rgba(30, 58, 95, .06);
}
.sca-quick-pane { display: none; }
.sca-quick-pane.is-active { display: block; }

.sca-scanner-stage {
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.6);
}
.sca-scanner-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 30px;
}
.sca-scanner-empty i { font-size: 42px; opacity: .4; }
.sca-scanner-empty p { margin: 0; font-size: 13px; }
.sca-scanner-video { width: 100%; height: 100%; }
.sca-scanner-video video { width: 100% !important; height: 100% !important; object-fit: cover; }
.sca-scanner-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.sca-scanner-status {
    font-size: 13px;
    color: var(--sca-muted);
    font-weight: 500;
}
.sca-scanner-status.is-ready   { color: #047857; }
.sca-scanner-status.is-pending { color: #b45309; }
.sca-scanner-status.is-error   { color: #b91c1c; }

/* ── Admin analytics — modern KPI cards, charts, reports ── */

/* Hero banner at the top of the dashboard */
.sca-admin-hero {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 45%, #84cc16 100%);
    color: #fff;
    border-radius: 20px;
    padding: 26px 30px;
    margin: 8px 0 22px;
    box-shadow: 0 16px 40px rgba(20, 184, 166, .25), 0 4px 12px rgba(132, 204, 22, .15);
    position: relative;
    overflow: hidden;
    animation: sca-fade-in-up .4s ease both;
}
.sca-admin-hero::after {
    content: '';
    position: absolute;
    top: -60px;
    inset-inline-start: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
    pointer-events: none;
}
.sca-admin-hero::before {
    /* Animated accent shape on the opposite side */
    content: '';
    position: absolute;
    bottom: -80px;
    inset-inline-end: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(132, 204, 22, .35) 0%, transparent 70%);
    pointer-events: none;
    animation: sca-pulse 6s ease-in-out infinite;
}
.sca-admin-hero h1 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sca-admin-hero h1 i {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.sca-admin-hero p {
    margin: 0;
    color: rgba(255,255,255,.85);
    font-size: 13px;
}
.sca-admin-hero .sca-hero-period {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sca-admin-hero .sca-hero-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.sca-hero-action-btn {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, transform .15s ease;
}
.sca-hero-action-btn:hover {
    background: rgba(255,255,255,.25);
    transform: translateY(-1px);
}

/* KPI grid */
.sca-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
/* Stagger card animations for a cascade effect */
.sca-kpi-grid > .sca-kpi-card:nth-child(1) { animation-delay: .03s; }
.sca-kpi-grid > .sca-kpi-card:nth-child(2) { animation-delay: .08s; }
.sca-kpi-grid > .sca-kpi-card:nth-child(3) { animation-delay: .13s; }
.sca-kpi-grid > .sca-kpi-card:nth-child(4) { animation-delay: .18s; }
.sca-kpi-grid > .sca-kpi-card:nth-child(5) { animation-delay: .23s; }
.sca-kpi-grid > .sca-kpi-card:nth-child(n+6) { animation-delay: .28s; }

/* KPI card — gradient accent + colored icon bubble + entrance animation */
.sca-kpi-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--sca-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.16,1,.3,1),
                box-shadow .25s ease,
                border-color .25s ease;
    animation: sca-fade-in-up .35s ease both;
}
.sca-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sca-shadow-md);
    border-color: rgba(20, 184, 166, .25);
}
.sca-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    background: var(--sca-grad-brand);
    border-radius: 16px 16px 0 0;
}
.sca-kpi-card::after {
    /* Decorative blob behind the icon — adds depth without extra HTML. */
    content: '';
    position: absolute;
    top: -30px;
    inset-inline-start: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(20, 184, 166, .12) 0%, transparent 70%);
    pointer-events: none;
}
.sca-kpi-card.is-success::before { background: var(--sca-grad-mint); }
.sca-kpi-card.is-danger::before  { background: linear-gradient(90deg, #ef4444, #f87171); }
.sca-kpi-card.is-warn::before    { background: var(--sca-grad-warm); }
.sca-kpi-card.is-info::before    { background: var(--sca-grad-cool); }
.sca-kpi-card.is-success::after  { background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 70%); }
.sca-kpi-card.is-danger::after   { background: radial-gradient(circle, rgba(239, 68, 68, .12), transparent 70%); }
.sca-kpi-card.is-warn::after     { background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 70%); }
.sca-kpi-card.is-info::after     { background: radial-gradient(circle, rgba(59, 130, 246, .12), transparent 70%); }

.sca-kpi-card .sca-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sca-grad-soft);
    color: #fff;
    font-size: 18px;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(20, 184, 166, .25);
    transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.sca-kpi-card:hover .sca-kpi-icon {
    transform: scale(1.08) rotate(-3deg);
}
.sca-kpi-card.is-success .sca-kpi-icon { background: var(--sca-grad-mint); box-shadow: 0 6px 16px rgba(16, 185, 129, .3); }
.sca-kpi-card.is-danger  .sca-kpi-icon { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 6px 16px rgba(239, 68, 68, .3); }
.sca-kpi-card.is-warn    .sca-kpi-icon { background: var(--sca-grad-warm); box-shadow: 0 6px 16px rgba(245, 158, 11, .3); }
.sca-kpi-card.is-info    .sca-kpi-icon { background: var(--sca-grad-cool); box-shadow: 0 6px 16px rgba(59, 130, 246, .3); }

.sca-kpi-card .sca-kpi-label {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .2px;
    margin: 0 0 6px;
}
.sca-kpi-card .sca-kpi-value {
    color: var(--sca-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-direction: row-reverse;
}
.sca-kpi-card .sca-kpi-suffix {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
}
.sca-kpi-card.is-success .sca-kpi-value { color: #047857; }
.sca-kpi-card.is-danger  .sca-kpi-value { color: #b91c1c; }
.sca-kpi-card.is-warn    .sca-kpi-value { color: #b45309; }

.sca-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
}
.sca-kpi-delta i { font-size: 10px; }
.sca-kpi-delta.is-up   { background: #dcfce7; color: #166534; }
.sca-kpi-delta.is-down { background: #fee2e2; color: #991b1b; }
.sca-kpi-delta.is-flat { background: #f3f4f6; color: #4b5563; }
.sca-kpi-delta .sca-kpi-suffix { color: inherit; opacity: .7; font-weight: 500; margin-right: 2px; }

/* Charts */
.sca-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 18px 0;
}
@media (max-width: 900px) {
    .sca-chart-grid { grid-template-columns: 1fr; }
}
.sca-chart-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: var(--sca-shadow-sm);
    transition: box-shadow .25s ease;
    animation: sca-fade-in-up .4s ease both;
}
.sca-chart-card:hover { box-shadow: var(--sca-shadow-md); }
.sca-chart-card h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sca-text);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.sca-chart-card h3 i {
    width: 36px;
    height: 36px;
    background: var(--sca-grad-cool);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, .3);
}
.sca-chart-body {
    position: relative;
    height: 300px;
}
.sca-chart-body.is-tall { height: 380px; }
.sca-chart-body canvas { max-width: 100%; }

/* Empty state for charts/tables */
.sca-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    text-align: center;
    color: #9ca3af;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    background: #fafbfc;
    min-height: 240px;
}
.sca-empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    color: #d1d5db;
}
.sca-empty-state h4 {
    margin: 0 0 6px;
    font-size: 15px;
    color: #6b7280;
    font-weight: 600;
}
.sca-empty-state p {
    margin: 0;
    font-size: 13px;
    color: #9ca3af;
    max-width: 320px;
}
.sca-empty-state .sca-btn-primary { margin-top: 14px; }

/* Report sections */
.sca-report-section {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 22px 24px;
    margin: 16px 0;
    box-shadow: var(--sca-shadow-sm);
    animation: sca-fade-in-up .4s ease both;
}
.sca-report-section h2 {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--sca-text);
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f3f4f6;
}
.sca-report-section h2 i {
    width: 36px;
    height: 36px;
    background: var(--sca-grad-soft);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(20, 184, 166, .25);
}

/* Filter bar */
.sca-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: end;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 16px 18px;
    margin: 12px 0 20px;
    box-shadow: var(--sca-shadow-sm);
}
.sca-filter-bar .sca-field { min-width: 160px; flex: 0 1 auto; margin: 0; }
.sca-filter-bar label {
    font-size: 11px;
    color: var(--sca-muted);
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sca-filter-bar select,
.sca-filter-bar input[type="date"],
.sca-filter-bar input[type="text"],
.sca-filter-bar input[type="number"] {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: var(--sca-text);
    width: 100%;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sca-filter-bar select:hover,
.sca-filter-bar input:hover { border-color: rgba(20, 184, 166, .35); }
.sca-filter-bar select:focus,
.sca-filter-bar input:focus {
    outline: none;
    border-color: var(--sca-primary-light);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
    background: #f7fdfb;
}
.sca-filter-bar select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%2364748b'%3E%3Cpath d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 12px;
    padding-inline-start: 30px;
}
html[dir="rtl"] .sca-filter-bar select { background-position: left 12px center; padding-inline-start: 30px; }
.sca-filter-bar input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6;
    filter: invert(35%) sepia(60%) saturate(800%) hue-rotate(140deg);
}
.sca-filter-bar .sca-filter-actions { display: flex; gap: 10px; flex: 1 1 auto; justify-content: flex-end; align-items: stretch; }

.sca-csv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
.sca-csv-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #fff;
}
.sca-csv-btn:active { transform: translateY(0) scale(.98); }

/* Rank badge for top-N tables */
.sca-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sca-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.sca-rank-badge.is-1 { background: #f59e0b; }
.sca-rank-badge.is-2 { background: #94a3b8; }
.sca-rank-badge.is-3 { background: #b45309; }

/* Table tweaks for analytics tables */
.sca-table-analytics th { white-space: nowrap; }
.sca-table-analytics td.num,
.sca-table-analytics th.num { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; }
.sca-table-analytics tfoot td { font-weight: 700; background: #f9fafb; }
.sca-margin-pos { color: #047857; font-weight: 700; }
.sca-margin-neg { color: #b91c1c; font-weight: 700; }
.sca-margin-zero { color: var(--sca-muted); }

/* Health-check list */
.sca-health-card {
    background: #fff;
    border: 1px solid var(--sca-border);
    border-right: 4px solid var(--sca-primary);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 0;
}
.sca-health-card.is-ok { border-right-color: #10b981; }
.sca-health-card.is-warn { border-right-color: #f59e0b; }
.sca-health-card.is-danger { border-right-color: #ef4444; }
.sca-health-card h3 {
    margin: 0 0 6px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sca-health-card .sca-health-summary { color: var(--sca-muted); font-size: 12px; }