:root {
    /* Papyrus Gold — modernized: near-white neutrals, gold reserved as an accent rather
       than a wash, so it reads as a professional SaaS product rather than a manuscript. */
    --papyrus-bg: #faf9f6;
    --papyrus-card: #ffffff;
    --papyrus-sidebar: #ffffff;
    --papyrus-border: #e7e3da;
    --text-primary: #201c15;
    --text-secondary: #6b6459;
    --gold-accent: #c99738;
    --gold-hover: #b0812c;
    --accent-rgb: 201, 151, 56;
    --danger-red: #c0392b;
    --success-green: #27ae60;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(231, 227, 218, 0.9);
    --glass-shadow: 0 1px 2px rgba(20, 18, 14, 0.03), 0 12px 32px rgba(20, 18, 14, 0.07);
    --honeycomb-line: rgba(201, 151, 56, 0.12);
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── THEME: Scholar Blue ── */
.theme-blue {
    --papyrus-bg: #f8f9fc;
    --papyrus-card: #ffffff;
    --papyrus-sidebar: #ffffff;
    --papyrus-border: #e2e6ef;
    --text-primary: #14213d;
    --text-secondary: #59647d;
    --gold-accent: #1a73e8;
    --gold-hover: #1558c4;
    --accent-rgb: 26, 115, 232;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(226, 230, 239, 0.9);
    --glass-shadow: 0 1px 2px rgba(13, 43, 107, 0.03), 0 12px 32px rgba(13, 43, 107, 0.08);
    --honeycomb-line: rgba(26, 115, 232, 0.12);
}
.theme-blue .portal-gateway-wrapper { background-color: var(--papyrus-bg); }
.theme-blue .btn-primary { background: linear-gradient(135deg, #1a73e8, #1558c4) !important; }

/* ── THEME: Royal Maroon ── */
.theme-maroon {
    --papyrus-bg: #faf8f8;
    --papyrus-card: #ffffff;
    --papyrus-sidebar: #ffffff;
    --papyrus-border: #ece3e3;
    --text-primary: #3d1010;
    --text-secondary: #7a5c5c;
    --gold-accent: #8b1a1a;
    --gold-hover: #6b1212;
    --accent-rgb: 139, 26, 26;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(236, 227, 227, 0.9);
    --glass-shadow: 0 1px 2px rgba(90, 10, 10, 0.03), 0 12px 32px rgba(90, 10, 10, 0.08);
    --honeycomb-line: rgba(139, 26, 26, 0.12);
}
.theme-maroon .portal-gateway-wrapper { background-color: var(--papyrus-bg); }
.theme-maroon .btn-primary { background: linear-gradient(135deg, #8b1a1a, #6b1212) !important; }

/* ── THEME: Emerald Green ── */
.theme-green {
    --papyrus-bg: #f7faf7;
    --papyrus-card: #ffffff;
    --papyrus-sidebar: #ffffff;
    --papyrus-border: #dfe8df;
    --text-primary: #16311a;
    --text-secondary: #57705a;
    --gold-accent: #2e7d32;
    --gold-hover: #1b5e20;
    --accent-rgb: 46, 125, 50;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(223, 232, 223, 0.9);
    --glass-shadow: 0 1px 2px rgba(27, 77, 30, 0.03), 0 12px 32px rgba(27, 77, 30, 0.08);
    --honeycomb-line: rgba(46, 125, 50, 0.12);
}
.theme-green .portal-gateway-wrapper { background-color: var(--papyrus-bg); }
.theme-green .btn-primary { background: linear-gradient(135deg, #2e7d32, #1b5e20) !important; }


/* Arabic entries (e.g. a painting step's Arabic name) — Kanz al Marjaan, RTL */
@font-face {
    font-family: 'Kanz al Marjaan';
    src: url('/fonts/kanz-al-marjaan/kanz-al-marjaan-webfont.woff2') format('woff2'),
         url('/fonts/kanz-al-marjaan/kanz-al-marjaan-webfont.woff') format('woff'),
         url('/fonts/kanz-al-marjaan/kanz-al-marjaan-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-subheading: 'Plus Jakarta Sans', 'DM Sans', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-arabic: 'Kanz al Marjaan', 'Traditional Arabic', 'Arabic Typesetting', serif;
}

body {
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--papyrus-bg);
    color: var(--text-primary);
}

/* Overlay-style SaaS scrollbars everywhere -- invisible at rest, fades in only while hovering
   the scrollable area itself, so it never sits there as a permanent bar. Colored with the
   portal's own --accent-rgb (the gold accent, re-tinting automatically with the blue/maroon/
   green themes) rather than plain gray/black -- a neutral color reads as "unstyled default"
   regardless of how thin or translucent it is; the brand color is what actually reads as
   deliberately designed. Specific overrides (e.g. .sidebar-nav's own, on the dark sidebar) still
   win by selector specificity, so this only sets the default for the rest of the app's scroll
   areas. transparent-on-transparent at rest is the hiding mechanism for both the standard
   property (Firefox, and Chrome 121+ where it takes priority over ::-webkit-scrollbar) and the
   -webkit pseudo-elements (older Chrome/Safari). */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*:hover {
    scrollbar-color: rgba(var(--accent-rgb), 0.55) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 999px; background-clip: padding-box; transition: background-color 0.15s ease; }
*:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--accent-rgb), 0.55); }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--accent-rgb), 0.85); }

h1, h2, .portal-heading, .top-bar h1, .sidebar-brand h2 {
    font-family: var(--font-heading);
}

h3, .card-header, .dash-section-title, .liquid-glass-card h3 {
    font-family: var(--font-subheading);
}

/* Any Arabic-entry field or display — right-to-left, isolated from surrounding LTR text */
.font-arabic {
    font-family: var(--font-arabic);
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
}

#app {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 
 * PORTAL GATEWAY STYLES 
 */
/* Dark stage instead of the pale papyrus tone -- var(--text-primary) is already the sidebar's
   near-black, theme-aware (maroon/blue/green users get their own dark tint), so the gold
   illumination glows out of real darkness like a manuscript lit by candlelight, instead of
   sitting as a flat pale rectangle on an equally pale page. */
.portal-gateway-wrapper {
    background: var(--text-primary);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Real Tazhib illumination artwork (a gold-leaf manuscript border) as a slow-panning backdrop
   layer, behind the aurora blobs and glass card -- ties the login page to what this school
   actually teaches instead of a generic gradient. mix-blend-mode:screen + the sepia/saturate
   filter burns away the pale paper tone and lets only the gold linework glow against the dark
   stage; the radial vignette on top keeps the card itself the brightest thing on screen.
   inset:-5% + the baseline scale(1.08) give the pan room to move without revealing an edge. */
.login-bg-art {
    position: absolute;
    inset: -5%;
    background-image: url('/assets/welcome_bg.jpg');
    background-size: cover;
    background-position: center;
    filter: saturate(1.7) contrast(1.15) brightness(1.05);
    transform: scale(1.08);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    pointer-events: none;
}
/* The illuminated art fades to true black at the edges -- a spotlit museum piece, not wallpaper
   -- while the very center around the card stays fully lit and richly colored. */
.login-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, transparent 12%, var(--text-primary) 72%);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .login-bg-art { transition: none; }
}

/* Aurora backdrop — three soft, slowly-drifting color blobs behind the glass card, replacing
   the old honeycomb texture (same motif the sidebar dropped for looking "untidy"). Pure CSS,
   theme-aware via --accent-rgb so it re-tints with the portal theme automatically. Read as warm
   glowing light sources now that the stage behind them is dark, not tinted haze on pale paper. */
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    pointer-events: none;
    will-change: transform;
}
.aurora-blob-1 { width: 560px; height: 560px; top: -140px; left: -120px; background: rgba(var(--accent-rgb), 0.7); animation: auroraDrift1 22s ease-in-out infinite; }
.aurora-blob-2 { width: 480px; height: 480px; bottom: -160px; right: -100px; background: rgba(var(--accent-rgb), 0.55); animation: auroraDrift2 26s ease-in-out infinite; }
.aurora-blob-3 { width: 380px; height: 380px; top: 40%; right: 12%; background: rgba(var(--accent-rgb), 0.4); animation: auroraDrift3 18s ease-in-out infinite; }
@keyframes auroraDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } }
@keyframes auroraDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -30px) scale(1.08); } }
@keyframes auroraDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 50px) scale(0.95); } }
@media (prefers-reduced-motion: reduce) {
    .aurora-blob { animation: none; }
}

.login-tilt-stage {
    position: relative;
    z-index: 10;
    perspective: 1000px;
}

.liquid-glass-portal {
    width: 760px;
    max-width: 90vw;
    padding: 0;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    /* A warm gold halo instead of a plain drop shadow -- the card reads as the one lit, floating
       thing on a dark stage, not a panel sitting flush against a page. */
    box-shadow: 0 0 1px rgba(255,255,255,0.4), 0 0 140px 20px rgba(var(--accent-rgb), 0.35), 0 40px 90px rgba(0,0,0,0.55);
    transition: transform 0.15s ease-out;
    animation: loginCardRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes loginCardRise {
    from { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
    .liquid-glass-portal { animation: none; }
}

/* Cursor-tracked light sweep, driven by loginView.js's mousemove handler. */
.login-card-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    transition: background 0.08s linear;
}

.login-split {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    position: relative;
    z-index: 1;
}

.login-brand-panel {
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03));
    border-right: 1px solid rgba(var(--accent-rgb), 0.15);
}

/* A soft breathing gold glow centered behind the logo -- "candlelight" rather than a flat icon. */
.login-logo-halo {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.45), transparent 70%);
    filter: blur(10px);
    animation: loginHaloPulse 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes loginHaloPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

.login-logo-float {
    width: 88px;
    height: auto;
    object-fit: contain;
    margin-bottom: 18px;
    position: relative;
    filter: drop-shadow(0 4px 18px rgba(var(--accent-rgb), 0.5));
    animation: loginLogoFloat 5s ease-in-out infinite;
}
@keyframes loginLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .login-logo-float, .login-logo-halo { animation: none; }
}

.login-brand-heading {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 0;
}

.login-form-panel {
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.login-form-subheading {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.login-title-accent {
    color: var(--gold-accent);
    font-weight: 700;
}

.login-eye-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--text-primary); opacity: 0.6;
    padding: 0; display: flex; align-items: center;
}

@media (max-width: 720px) {
    .login-split { grid-template-columns: 1fr; }
    .login-brand-panel { padding: 26px 26px 18px; border-right: none; border-bottom: 1px solid rgba(var(--accent-rgb), 0.15); flex-direction: row; align-items: center; gap: 14px; }
    .login-logo-float { width: 44px; margin-bottom: 0; }
    .login-form-panel { padding: 26px; }
}

.portal-heading {
    color: var(--text-primary);
    margin-bottom: 0px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 2px;
}

.button-vibe-stream {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Every button in the app is built from .portal-btn (full-width form/CTA buttons) or .action-btn
   (inline card actions) plus one color variant below -- all liquid-glass now: translucent
   color-mix tint + backdrop-blur + a top sheen highlight, brightening to a richer/more opaque
   version of the same color on hover, with a lift on hover and a press-down squash on click for
   the "interactive" feel. Semantic colors (gold=primary, red=nudge, green=approve) unchanged. */
.portal-btn {
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.portal-btn:active { transform: translateY(0) scale(0.97); }

.btn-primary {
    background: linear-gradient(155deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 45%), color-mix(in srgb, var(--gold-accent) 82%, transparent);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--gold-accent) 55%, white 15%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.06), 0 6px 16px rgba(var(--accent-rgb), 0.28);
    transition: background 0.15s ease, box-shadow 0.2s var(--transition-smooth), transform 0.2s var(--transition-smooth);
}

.btn-primary:hover {
    background: linear-gradient(155deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 45%), color-mix(in srgb, var(--gold-hover) 88%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.08), 0 10px 24px rgba(var(--accent-rgb), 0.34);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.03);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: var(--gold-accent);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px rgba(var(--accent-rgb), 0.16);
}

/* A toggled-on state (e.g. the coordinator's "Work On My Own Kitab" switch) -- gold-tinted so it
   reads as active even at rest, not just on hover. */
.btn-secondary.active {
    background: color-mix(in srgb, var(--gold-accent) 18%, var(--glass-bg));
    border-color: var(--gold-accent);
    color: var(--gold-accent);
}

.portal-form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.portal-form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.portal-form-control {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.portal-form-control:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--gold-accent);
    box-shadow: 0 0 0 3px rgba(201, 151, 56, 0.2);
}

.btn-back-portal {
    background: none;
    border: none;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 20px;
    transition: var(--transition-fast);
    opacity: 0.7;
}

.btn-back-portal:hover {
    opacity: 1;
}

/*
 * MAIN PAPYRUS DASHBOARD LAYOUT & SIDEBAR
 */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* App-wide top bar — brand, jump-to-page search, theme/chat shortcuts, account menu. Full width,
   sits above the sidebar+content row so the footer below can match it edge to edge too. */
.app-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    background: var(--text-primary);
    color: #fff;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.app-topbar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.app-topbar-brand img { width: 32px; height: 32px; object-fit: contain; }
.app-topbar-brand .sidebar-brand h2 { color: #fff; font-size: 0.98rem; }
.app-topbar-brand .sidebar-brand span { color: rgba(255,255,255,0.5); }
.app-topbar-search {
    flex: 1;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 8px 12px;
    color: rgba(255,255,255,0.55);
}
.app-topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.app-topbar-search input {
    flex: 1; border: none; background: none; outline: none;
    color: #fff; font-family: inherit; font-size: 0.86rem;
}
.app-topbar-search input::placeholder { color: rgba(255,255,255,0.45); }
.app-topbar-search-hint {
    flex-shrink: 0; font-size: 0.7rem; font-weight: 700;
    padding: 1px 7px; border-radius: 5px;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
}
.app-topbar-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--papyrus-card); border: 1px solid var(--glass-border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 6px; max-height: 280px; overflow-y: auto; z-index: 60;
}
.app-topbar-search-result {
    display: block; width: 100%; text-align: left; padding: 8px 10px;
    border: none; border-radius: 7px; background: none;
    color: var(--text-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.app-topbar-search-result:hover { background: var(--papyrus-bg); }
.app-topbar-search-empty { padding: 10px; font-size: 0.8rem; color: var(--text-secondary); text-align: center; }
.app-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-topbar-actions .top-bar-icon-btn {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85);
    position: relative;
}
.app-topbar-actions .top-bar-icon-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.app-topbar-user {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 5px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s var(--transition-smooth);
}
.app-topbar-user:hover { background: rgba(255,255,255,0.08); }
.app-topbar-user svg { width: 14px; height: 14px; color: rgba(255,255,255,0.5); }
.app-topbar-user-info { display: flex; flex-direction: column; line-height: 1.25; }
.app-topbar-user-info span:first-child { font-size: 0.82rem; font-weight: 700; color: #fff; }
.app-topbar-user-role { font-size: 0.68rem; color: rgba(255,255,255,0.5); text-transform: capitalize; }
.user-menu-popover {
    position: absolute; background: var(--papyrus-card); border: 1px solid var(--glass-border);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 6px; width: 170px; z-index: 60;
}
.user-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
    border: none; border-radius: 7px; background: none; color: var(--text-primary);
    font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left;
}
.user-menu-item:hover { background: var(--papyrus-bg); }
.user-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Sidebar's own inline "search available menus" — filters .nav-item rows live as you type. */
.sidebar-nav-search {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    padding: 7px 10px; margin-top: 8px; flex-shrink: 0;
}
.sidebar-nav-search svg { width: 14px; height: 14px; color: rgba(255,255,255,0.4); flex-shrink: 0; }
.sidebar-nav-search input {
    flex: 1; border: none; background: none; outline: none;
    color: #fff; font-family: inherit; font-size: 0.78rem;
}
.sidebar-nav-search input::placeholder { color: rgba(255,255,255,0.35); }

.dashboard-layout {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 0;
    background-color: var(--papyrus-bg);
    overflow: hidden;
}

/* Sidebar — dark chrome (reuses each theme's own --text-primary, already a deep theme-tinted
   tone, as the background) rather than the old light card-colored panel, matching a modern
   SaaS admin look. */
.papyrus-sidebar {
    /* Explicit flex-basis (not width + the default flex-basis:auto-reads-width) -- toggling
       .collapsed's width alone didn't reliably recompute the resolved flex size here, but an
       explicit flex-basis does. min-width:0 additionally overrides flex items' default
       min-width:auto, which otherwise blocks shrinking below content's intrinsic width (the
       same trap already hit, and fixed the same way, on .sidebar-nav's height).
       ponytail: no width transition -- animating flex-basis here reliably got stuck mid-value
       on the collapse->expand direction (a real, reproduced browser quirk, not a timing issue).
       An instant snap is 100% correct every time; a smooth animation isn't worth chasing further. */
    flex: 0 0 260px;
    min-width: 0;
    background-color: var(--text-primary);
    color: rgba(255,255,255,0.88);
    border-right: 1px solid var(--papyrus-border);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.85rem;
    box-shadow: 4px 0 15px rgba(61, 38, 18, 0.08);
    position: relative;
    overflow: hidden;
}

.papyrus-sidebar.collapsed { flex-basis: 76px; }

/* Collapse/expand toggle — small circular button riding the sidebar's right edge */
.sidebar-collapse-btn {
    /* Used to straddle the sidebar's right edge (right:-12px), but .papyrus-sidebar needs its own
       overflow:hidden to crop the background video/art that deliberately bleeds past its bounds --
       which was clipping this button in half too. Sitting fully inside avoids fighting that. */
    position: absolute;
    top: 22px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold-accent);
    color: #fff;
    border: 3px solid var(--papyrus-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.22s ease;
}
.sidebar-collapse-btn svg { width: 12px; height: 12px; transform: rotate(90deg); }
.papyrus-sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(-90deg); }

/* Collapsed state — icon-only nav. Text nodes sit unwrapped next to each nav-item's icon (no
   <span> to target), so font-size:0 collapses just the text while the icon's own explicit
   width/height keeps it fully visible. */
.papyrus-sidebar.collapsed .sidebar-current-section,
.papyrus-sidebar.collapsed .sidebar-nav-search {
    display: none;
}
.papyrus-sidebar.collapsed .nav-item { justify-content: center; font-size: 0; padding: 10px; }

.sidebar-brand h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.sidebar-brand span {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

/* "Current Section" indicator — a small highlighted chip naming whichever page is active,
   sitting between the header and the nav list. */
.sidebar-current-section {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 7px 11px;
    margin-top: 0.8rem;
    flex-shrink: 0;
}
.sidebar-current-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
}
.sidebar-current-value {
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wraps the current-section chip, nav search, and nav list -- needs its own flex column +
   min-height:0 so the nested .sidebar-nav below can actually shrink/scroll against it; setting
   that directly on .sidebar-nav did nothing, because its real parent is this plain block div,
   not .papyrus-sidebar. */
.sidebar-top {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Stack above .sidebar-ornament, which is otherwise the sidebar's first child (painting
       order would put it on top without this) -- text needs to stay fully legible over it. */
    position: relative;
    z-index: 1;
}

/* Engraved arabesque — hand-drawn islimi vine/leaf/gul linework sitting behind the whole nav,
   clipped to the sidebar by its own overflow:hidden (no separate clip-path needed). A fixed
   antique-gold, not var(--gold-accent) -- that variable turns blue/maroon/green with the portal
   theme, but this is meant to read as engraved gold leaf regardless of theme. */
.sidebar-ornament {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.tazhib-vine, .tazhib-vine-glow {
    fill: none;
    stroke: #c9a227;
    stroke-width: 1.6;
    stroke-linecap: round;
}
.tazhib-vine { opacity: 0.14; }
.tazhib-vine--soft { opacity: 0.09; stroke-width: 1.2; }
.tazhib-leaf {
    fill: #c9a227;
    opacity: 0.12;
}
.tazhib-flower ellipse, .tazhib-flower circle {
    fill: #c9a227;
}
.tazhib-flower { opacity: 0.14; }
/* The "white" flowers in the reference — outlined petals instead of solid gold ones, same low
   opacity treatment, alternated with the filled kind across each medallion. */
.tazhib-flower--outline ellipse, .tazhib-flower--outline circle {
    fill: none;
    stroke: #c9a227;
    stroke-width: 0.9;
}

/* Short glowing streak traveling the length of each duplicated vine. pathLength="100" on both
   the base vine and its glow twin normalizes every curve to the same 0-100 length regardless of
   its actual on-screen geometry, so one simple dasharray/keyframe works for all of them. */
.tazhib-vine-glow {
    stroke-width: 1.8;
    opacity: 0.4;
    stroke-dasharray: 7 300;
    filter: drop-shadow(0 0 2.5px rgba(201, 162, 39, 0.65));
    animation-name: tazhibVineTravel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes tazhibVineTravel {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: -20; }
}
@media (prefers-reduced-motion: reduce) {
    .tazhib-vine-glow { animation: none; opacity: 0; }
}

/* AI-generated replacement for the hand-drawn ornament above — same slot, same clipping, same
   z-index. The SVG stays in the DOM as the no-JS/no-autoplay/reduced-motion fallback; JS hides it
   (.sidebar-ornament--hidden) only once the video actually starts playing. Chrome/Firefox/Edge get
   the real alpha WebM; Safari/iOS (no VP9-alpha <video> support) get an opaque MP4 flattened onto
   pure black plus mix-blend-mode:screen, which makes the black disappear against the dark sidebar
   without needing a real alpha channel -- true alpha HEVC requires Apple's own encoder and can't be
   produced with ffmpeg/libx265. object-fit:fill (not cover) to match the SVG's own
   preserveAspectRatio="none" stretch-to-fit behavior across the sidebar's variable height. */
.sidebar-ornament-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Crop to fill instead of stretching -- unlike the SVG above (which stretches on purpose via
       preserveAspectRatio="none"), a stretched video visibly warps, so any part that doesn't match
       the sidebar's aspect ratio just bleeds off top/bottom/sides instead. */
    object-fit: cover;
    /* Dimmed so nav labels stay legible, but not too dim -- the labels themselves now sit on a
       translucent "liquid glass" pill (.nav-item below) that adds its own contrast, so this can
       run brighter than a flat-text approach could get away with. brightness/saturate push the
       gold glow further without needing to raise opacity so high it fights the text. */
    opacity: 0.45;
    filter: brightness(1.2) saturate(1.15);
    pointer-events: none;
    z-index: 0;
}
.sidebar-ornament-video--blend { mix-blend-mode: screen; }
.sidebar-ornament--hidden { opacity: 0; }

/* The nav list is the one flexible region between the fixed-height header and footer — on a
   short viewport with many nav items (this app has grown to 11+ for staff) it scrolls internally
   instead of the old fixed-height sidebar just clipping items off invisibly. */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.8rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
/* Gold accent here too, not plain white -- reads as the same deliberate brand color the sidebar
   already uses for its active nav item, not a generic translucent scrollbar. */
.sidebar-nav:hover { scrollbar-color: rgba(var(--accent-rgb), 0.6) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background-color 0.15s ease; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.6); }

/* "Liquid glass" pill: translucent tint + backdrop-blur instead of a flat fill, so the ornament
   video (z-index:0, behind .sidebar-top) keeps showing through even on hover/active -- a solid
   background here would just paint over it. color-mix() with --gold-accent keeps the tint on
   whatever accent the current theme uses (gold/blue/maroon/green), same as the old solid fill did. */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    flex-shrink: 0;
    background: linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.15);
    /* No blur at rest -- with ~11 nav items nearly tiling the sidebar's height, blurring every
       one of them at once turned the video behind into an indistinct smear (that was the "too
       opaque, can't see the animation" bug). Hover/active only ever applies to 1-2 items at a
       time, so a touch of blur there is cheap and still reads as glass. */
}

.nav-item:hover, .nav-item.active {
    background: linear-gradient(155deg, color-mix(in srgb, var(--gold-accent) 24%, rgba(255,255,255,0.08)), color-mix(in srgb, var(--gold-accent) 8%, transparent));
    border-color: color-mix(in srgb, var(--gold-accent) 45%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 16px rgba(0,0,0,0.22), 0 0 14px color-mix(in srgb, var(--gold-accent) 30%, transparent);
    color: #ffffff;
    transform: translateY(-1px);
    backdrop-filter: blur(5px) saturate(150%);
    -webkit-backdrop-filter: blur(5px) saturate(150%);
}

.nav-item:active { transform: translateY(0) scale(0.98); }

.nav-item svg {
    stroke-width: 2;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* Hamburger (topbar) + dimmed tap-outside backdrop for the mobile/tablet sidebar drawer below —
   both inert on desktop, where the sidebar is the normal permanent column. */
.mobile-menu-btn {
    display: none;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    color: #fff; border-radius: 8px; width: 34px; height: 34px;
    align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.sidebar-backdrop { display: none; }

/* Sidebar becomes an off-canvas drawer below tablet width — a permanent 260px column left too
   little room for actual content once the viewport itself is only 360-820px wide (the entire
   "tablet" bucket among the breakpoints we're targeting is narrower than sidebar+content needs).
   Toggled via .mobile-open (btn-mobile-menu) rather than .collapsed (desktop's icon-only mode,
   which stays available too but isn't the point on a touch screen). */
@media (max-width: 900px) {
    .mobile-menu-btn { display: flex; }
    .app-topbar-search { display: none; } /* sidebar nav + its own search covers this; no room here */
    .app-topbar-user-info { display: none; } /* avatar alone is enough once name+role won't fit */
    .app-topbar-brand .sidebar-brand { display: none; } /* logo alone, "TAZHEEB / ...Portal" text too */
    .app-topbar-user svg { display: none; } /* the dropdown chevron -- avatar alone is enough */
    .app-topbar { gap: 8px; padding: 10px 12px; justify-content: space-between; }
    .app-topbar-actions { gap: 4px; }
    .top-bar-icon-btn { width: 32px; height: 32px; }
    .app-topbar-user { padding: 4px; gap: 0; }

    .dashboard-layout { position: relative; }
    .papyrus-sidebar, .papyrus-sidebar.collapsed {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        flex-basis: 280px;
        width: 280px;
        max-width: 85vw;
        z-index: 210;
        transform: translateX(-100%);
        /* ponytail: no transition here, same reason the desktop collapse toggle has none --
           animating this transform reliably took multiple seconds to actually reach its end
           value in testing (a real, reproduced quirk, not a one-off), so a tap felt like it did
           nothing. An instant snap is correct every time. */
        box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    }
    .papyrus-sidebar.mobile-open { transform: translateX(0); }
    .sidebar-collapse-btn { display: none; } /* the desktop icon-only toggle doesn't apply here */
    /* Undo desktop .collapsed's icon-only look -- a leftover localStorage preference from a
       previous desktop session shouldn't shrink the drawer's actual content once opened here. */
    .papyrus-sidebar.collapsed .sidebar-current-section,
    .papyrus-sidebar.collapsed .sidebar-nav-search { display: flex; }
    .papyrus-sidebar.collapsed .nav-item { justify-content: flex-start; font-size: 0.86rem; padding: 8px 12px; }

    .sidebar-backdrop.visible {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 205;
    }

    .dashboard-content { padding: 1.1rem; }
}

/* Main Content Area */
.dashboard-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 2rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.08) 0%, transparent 32%),
        radial-gradient(circle at 0% 100%, rgba(var(--accent-rgb), 0.05) 0%, transparent 28%),
        var(--papyrus-bg);
    background-attachment: fixed;
}

.top-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 2rem;
}

.top-bar h1 {
    font-size: 1.7rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.top-bar p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin-top: 2px;
}

/* Top-bar icon button (theme picker trigger) + its anchored popover — reuses the exact same
   .theme-grid/.theme-swatch markup and styling as the Settings page's own theme picker. */
.top-bar-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--glass-border); background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s var(--transition-smooth);
}
.top-bar-icon-btn svg { width: 18px; height: 18px; }
.top-bar-icon-btn:hover {
    border-color: var(--gold-accent); color: var(--gold-accent);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 14px rgba(var(--accent-rgb), 0.2);
}
.top-bar-icon-btn:active { transform: translateY(0) scale(0.94); }
.theme-popover {
    position: absolute;
    background: var(--papyrus-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.18);
    padding: 14px;
    width: 260px;
    z-index: 50;
}
.theme-popover-title { font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; display:flex; align-items:center; gap:6px; }
.theme-popover-title svg { width: 14px; height: 14px; }

/* Dark footer bar — a sibling of .dashboard-layout inside .app-shell, so it spans the full page
   width (under where the sidebar sits too), not just the content column. */
.app-footer {
    padding: 12px 2rem;
    background: var(--text-primary);
    color: rgba(255,255,255,0.65);
    font-size: 0.78rem;
    text-align: center;
    flex-shrink: 0;
}

/* Liquid Glass Cards & Grid */
.design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1.5rem;
}

.liquid-glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--glass-shadow);
    transition: box-shadow 0.25s var(--transition-smooth), border-color 0.25s var(--transition-smooth), transform 0.25s var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Faint top highlight sheen — reads as glass catching light */
.liquid-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%);
    pointer-events: none;
}

.liquid-glass-card:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(var(--accent-rgb), 0.16);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.design-tag {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--papyrus-bg);
    color: var(--text-secondary);
    border: 1px solid var(--papyrus-border);
    letter-spacing: 0.02em;
}

.status-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-in_review {
    background: #fdf1e6;
    color: #b5651d;
    border: 1px solid #f0d5b8;
}

.status-approved {
    background: #e8f5ea;
    color: #227a42;
    border: 1px solid #bfe3c7;
}

.thumbnail-container {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f0ec;
    margin-bottom: 1rem;
    position: relative;
    border: 1px solid var(--papyrus-border);
}

.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.liquid-glass-card:hover .thumbnail-container img {
    transform: scale(1.04);
}

.card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.action-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
}
.action-btn:hover { transform: translateY(-1px); }
.action-btn:active { transform: translateY(0) scale(0.97); }

.action-btn svg { flex-shrink: 0; }

.btn-nudge {
    background: rgba(184, 64, 47, 0.12);
    color: #b8402f;
    border-color: rgba(184, 64, 47, 0.28);
}

.btn-nudge:hover {
    background: rgba(192, 57, 43, 0.88);
    color: #fff;
    border-color: #c0392b;
    box-shadow: 0 6px 16px rgba(192, 57, 43, 0.28);
}

.btn-chat {
    background: color-mix(in srgb, var(--gold-accent) 22%, transparent);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--gold-accent) 45%, transparent);
}

.btn-chat:hover {
    background: color-mix(in srgb, var(--gold-hover) 88%, transparent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.3);
}

.btn-approve {
    background: rgba(39, 174, 96, 0.14);
    color: #227a42;
    border-color: rgba(39, 174, 96, 0.3);
}

.btn-approve:hover {
    background: rgba(39, 174, 96, 0.88);
    color: #fff;
    border-color: #27ae60;
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.3);
}

/* Brief "this worked" flash on a button after its action completes -- see window.flashButtonFeedback.
   !important so it reliably wins over whichever color variant (.btn-approve/.btn-nudge/.btn-secondary/
   etc) the button already carries; the transition (inherited from .portal-btn/.action-btn's own,
   which already animate background/border/color) fades it in AND back out, never a hard snap to
   the plain look either way. */
.btn-flash-success {
    background: #27ae60 !important;
    border-color: #27ae60 !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.3) !important;
}
.btn-flash-danger {
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(192, 57, 43, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Chat & Review Drawer — professional SaaS-style messaging UI
   ══════════════════════════════════════════════════════════════════════ */
.chat-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 14, 6, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
}

.chat-drawer {
    width: 460px;
    max-width: 100vw;
    height: 100%;
    background: var(--papyrus-bg);
    border-left: 1px solid var(--papyrus-border);
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 40px rgba(20, 14, 6, 0.18);
    animation: slideLeft 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideLeft {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* My Learning's step chat opens hovering over the levels list on the left, not docked to the
   right edge of the whole screen — a lighter, narrower variant of the same drawer. */
.chat-drawer-overlay.anchor-left {
    justify-content: flex-start;
    background: rgba(20, 14, 6, 0.25);
}
.chat-drawer-overlay.anchor-left .chat-drawer {
    width: 380px;
    border-left: none;
    border-right: 1px solid var(--papyrus-border);
    box-shadow: 16px 0 40px rgba(20, 14, 6, 0.18);
    animation: slideRight 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideRight {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Chat page — WhatsApp-Web style split view (general/group conversations, separate from the
   per-design review drawer above) */
.chat-page-layout {
    display: flex;
    height: calc(100vh - 190px);
    min-height: 480px;
    border: 1px solid var(--papyrus-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: var(--glass-shadow);
}
.chat-list-panel {
    width: 340px;
    flex-shrink: 0;
    border-right: 1px solid var(--papyrus-border);
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.35);
}
.chat-list-panel-header {
    padding: 1rem 1.1rem 0.8rem;
    border-bottom: 1px solid var(--papyrus-border);
}
.chat-list-panel-header h3 {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 1.05rem; margin-bottom: 0.8rem;
}
.chat-list-search {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.6); border: 1px solid var(--papyrus-border);
    border-radius: 10px; padding: 7px 12px; color: var(--text-secondary);
}
.chat-list-search input {
    border: none; background: none; outline: none; flex: 1;
    font-family: inherit; font-size: 0.88rem; color: var(--text-primary);
}
.chat-filter-tabs { display: flex; gap: 6px; margin-top: 0.7rem; }
.chat-filter-tab {
    border: 1px solid var(--papyrus-border); background: rgba(255,255,255,0.5);
    color: var(--text-secondary); font-family: inherit; font-size: 0.78rem; font-weight: 600;
    padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease;
}
.chat-filter-tab:hover { background: rgba(201,151,56,0.1); }
.chat-filter-tab.active {
    background: var(--gold-accent); border-color: var(--gold-accent); color: #fff;
}
.conversation-list { flex: 1; overflow-y: auto; }
.conversation-list-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 1.1rem; cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s ease;
}
.conversation-list-item:hover { background: rgba(201,151,56,0.08); }
.conversation-list-item.active { background: rgba(201,151,56,0.16); }
.conversation-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--gold-accent), var(--gold-hover));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; overflow: hidden;
}
.conversation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conversation-meta { flex: 1; min-width: 0; }
.conversation-meta-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.conversation-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-time { font-size: 0.7rem; color: var(--text-secondary); flex-shrink: 0; }
.conversation-preview { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conversation-subtitle { font-size: 0.7rem; color: var(--gold-accent); font-weight: 600; margin-top: 1px; }
.conversation-unread-badge {
    background: var(--gold-accent); color: #fff; font-size: 0.7rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    padding: 0 5px; flex-shrink: 0;
}
.chat-thread-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-thread-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-secondary); gap: 10px; text-align: center; padding: 2rem;
}

.drawer-header {
    padding: 0.9rem 1.1rem;
    background: #ffffff;
    border-bottom: 1px solid var(--papyrus-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.chat-header-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-accent), var(--gold-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.chat-header-identity h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.chat-header-identity p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.chat-header-selection-count {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.chat-icon-row {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.chat-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat-icon-btn:hover {
    background: rgba(201, 151, 56, 0.12);
    color: var(--gold-accent);
}

.chat-icon-btn.danger:hover {
    background: rgba(192, 57, 43, 0.12);
    color: #c0392b;
}

.chat-icon-btn.primary {
    background: var(--gold-accent);
    color: #fff;
}

.chat-icon-btn.primary:hover {
    background: var(--gold-hover);
    color: #fff;
}

.chat-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--papyrus-bg);
    border: 1px solid var(--papyrus-border);
    border-radius: 8px;
    padding: 0 10px;
    color: var(--text-secondary);
}

.chat-search-field input {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0;
    font-size: 0.88rem;
    color: var(--text-primary);
    outline: none;
}

/* Typing indicator */
.chat-typing-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 1.1rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.chat-typing-dots {
    display: inline-flex;
    gap: 2px;
}

.chat-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typingBounce 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-3px); opacity: 1; }
}

/* Message list */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background:
        radial-gradient(circle at 20% 10%, rgba(201,151,56,0.05), transparent 40%),
        var(--papyrus-bg);
}

.chat-bubble {
    max-width: 78%;
    padding: 9px 12px 7px;
    border-radius: 14px;
    font-size: 0.87rem;
    line-height: 1.42;
    position: relative;
    box-shadow: 0 1px 2px rgba(20,14,6,0.06);
    transition: box-shadow 0.15s ease;
}

.chat-bubble.grouped {
    margin-top: -6px;
}

.chat-bubble.teacher {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid var(--papyrus-border);
    color: var(--text-primary);
    border-top-left-radius: 4px;
}

.chat-bubble.teacher.grouped {
    border-top-left-radius: 14px;
}

.chat-bubble.student {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--gold-accent), var(--gold-hover));
    color: #ffffff;
    border-top-right-radius: 4px;
}

.chat-bubble.student.grouped {
    border-top-right-radius: 14px;
}

.chat-bubble-name {
    font-weight: 700;
    font-size: 0.76rem;
    margin-bottom: 2px;
    color: var(--gold-accent);
}

.chat-bubble.student .chat-bubble-name {
    color: rgba(255,255,255,0.9);
}

.chat-bubble-text {
    word-break: break-word;
}

.chat-bubble img,
.chat-bubble video {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 6px;
    display: block;
}

.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.06);
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
}

.chat-bubble.student .chat-file-chip {
    background: rgba(255,255,255,0.2);
}

.chat-forwarded-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    opacity: 0.65;
    font-style: italic;
    margin-bottom: 3px;
}

.chat-bubble-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 3px;
    min-height: 18px;
}

.chat-bubble-time {
    font-size: 0.68rem;
    opacity: 0.65;
}

.chat-read-tick {
    display: inline-flex;
    opacity: 0.65;
}

.chat-read-tick.read {
    color: #34b7f1;
    opacity: 1;
}

.chat-bubble-edited-tag {
    font-size: 0.66rem;
    opacity: 0.6;
    font-style: italic;
}

/* Reveal actions on hover (desktop) — always usable via focus for keyboard/touch */
.chat-bubble-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.chat-bubble:hover .chat-bubble-actions,
.chat-bubble:focus-within .chat-bubble-actions {
    opacity: 1;
    transform: translateY(0);
}

.chat-action-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px;
    border-radius: 5px;
    color: inherit;
    opacity: 0.7;
    display: flex;
    align-items: center;
}

.chat-action-icon:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08);
}

.chat-bubble.student .chat-action-icon:hover {
    background: rgba(255,255,255,0.25);
}

.chat-action-icon.danger:hover {
    color: #ff8a80;
}

.chat-action-icon.starred {
    color: #f5b301;
    opacity: 1;
}

.chat-select-checkbox-wrap {
    display: block;
    margin-bottom: 6px;
}

.chat-select-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--gold-accent);
}

/* Reply quote block shown inside a bubble */
.chat-reply-quote {
    border-left: 3px solid var(--gold-accent);
    background: rgba(0,0,0,0.06);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 5px;
    font-size: 0.78rem;
    cursor: pointer;
}

.chat-bubble.student .chat-reply-quote {
    background: rgba(255,255,255,0.18);
    border-left-color: #fff;
}

.chat-reply-quote-name {
    font-weight: 700;
    display: block;
}

.chat-reply-quote-text {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Reaction badges under a bubble */
.chat-reactions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.chat-reaction-badge {
    background: #fff;
    border: 1px solid var(--papyrus-border);
    border-radius: 12px;
    padding: 1px 7px;
    font-size: 0.74rem;
    cursor: pointer;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chat-reaction-badge.mine {
    border-color: var(--gold-accent);
    background: rgba(201,151,56,0.15);
}

/* Emoji / forward picker popup */
.chat-popup {
    position: absolute;
    background: #fff;
    border: 1px solid var(--papyrus-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20,14,6,0.2);
    padding: 6px;
    display: flex;
    gap: 2px;
    z-index: 50;
}

.chat-popup button {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    transition: background 0.12s ease, transform 0.12s ease;
}

.chat-popup button:hover {
    background: var(--papyrus-bg);
    transform: scale(1.15);
}

/* Media gallery grid */
.chat-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.chat-gallery-grid > a {
    display: flex;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--papyrus-border);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-primary);
}

.chat-gallery-grid img,
.chat-gallery-grid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-forward-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--papyrus-border);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.chat-forward-item:hover {
    background: rgba(201,151,56,0.08);
    border-color: var(--gold-accent);
}

.chat-edit-input {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.5);
    font-family: inherit;
    font-size: 0.86rem;
    margin-top: 4px;
    color: var(--text-primary);
}

/* Composer */
.chat-input-box {
    padding: 0.75rem 1rem 1rem;
    background: #ffffff;
    border-top: 1px solid var(--papyrus-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-input-controls {
    display: flex;
    gap: 4px;
    align-items: center;
    background: var(--papyrus-bg);
    border: 1px solid var(--papyrus-border);
    border-radius: 24px;
    padding: 4px 4px 4px 8px;
}

.chat-input-controls input[type="text"] {
    flex: 1;
    padding: 8px 4px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.88rem;
    outline: none;
}

.chat-input-controls .chat-icon-btn {
    color: var(--text-secondary);
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--gold-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.chat-send-btn:hover {
    background: var(--gold-hover);
    transform: scale(1.05);
}

.chat-mic-btn.recording {
    background: #c0392b;
    color: #fff;
}

/* Attachment / voice-note / reply preview strips shown before sending */
.chat-preview-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    background: var(--papyrus-bg);
    border: 1px solid var(--papyrus-border);
    border-radius: 12px;
}

.chat-preview-accent {
    width: 3px;
    align-self: stretch;
    background: var(--gold-accent);
    border-radius: 2px;
}

.chat-preview-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--papyrus-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    overflow: hidden;
    flex-shrink: 0;
}

.chat-preview-thumb img,
.chat-preview-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-preview-meta {
    flex: 1;
    min-width: 0;
}

.chat-preview-title {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-accent-text {
    color: var(--gold-accent) !important;
}

.chat-preview-subtitle {
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-recording-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    color: #c0392b;
    font-weight: 600;
    font-size: 0.85rem;
}

.chat-recording-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c0392b;
    animation: pulse 1s infinite alternate;
}

#chat-voice-preview-player {
    flex: 1;
    height: 34px;
}

/* Annotation Canvas Modal */
.annotation-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Image Lightbox's zoom hint -- absolutely positioned so it never fights the viewport div for
   flex space, fades out on its own after a few seconds so it doesn't sit over the image. */
.lightbox-zoom-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.78rem;
    border-radius: 999px;
    pointer-events: none;
    animation: lightboxHintFade 3.5s ease forwards;
}
@keyframes lightboxHintFade {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

.annotation-canvas-container {
    background: var(--papyrus-bg);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.annotation-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 1rem;
    align-items: center;
    background: var(--papyrus-sidebar);
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--papyrus-border);
}

.tool-btn {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--papyrus-border);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.tool-btn.active {
    background: var(--gold-accent);
    color: #fff;
}

canvas#annotation-canvas {
    border: 2px solid var(--gold-accent);
    border-radius: 8px;
    cursor: crosshair;
    background: #fff;
    max-width: 100%;
    max-height: 60vh;
}

/* Utilities */
.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { transform: translateY(0); }
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    border-top-color: var(--text-primary);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--papyrus-border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ── SIDEBAR AVATAR ── */
.user-avatar-wrap {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gold-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
    overflow: hidden; border: 2px solid var(--papyrus-border);
}
.user-avatar-img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; }
.user-avatar-initials { pointer-events: none; }

/* ── SETTINGS AVATAR ── */
.settings-avatar-wrap {
    width: 90px; height: 90px; border-radius: 50%;
    background: var(--gold-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 700;
    overflow: hidden; border: 3px solid var(--papyrus-border);
    flex-shrink: 0;
}
.settings-avatar-initials { pointer-events: none; }

/* ── THEME GRID ──
   Deliberately neutral (gray, not theme-accented) hover/active rings -- these swatches ARE the
   color picker, so using the current theme's own accent color to highlight one (as this did
   before) reads as "this one's selected" on whichever swatch you're merely hovering, regardless
   of which color it actually shows. A checkmark overlay marks the real selection unambiguously. */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.theme-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: none; border: none; border-radius: 12px;
    padding: 8px 4px; cursor: pointer;
    transition: background 0.15s var(--transition-smooth);
}
.theme-swatch:hover { background: var(--papyrus-bg); }
.swatch-bg {
    position: relative;
    display: block; width: 60px; height: 60px;
    border-radius: 50%; border: 2px solid rgba(0,0,0,0.08);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.theme-swatch.active .swatch-bg { box-shadow: 0 0 0 2px var(--papyrus-card), 0 0 0 4px var(--text-secondary); }
.swatch-check {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.38); border-radius: 50%; color: #fff;
}
.swatch-check svg { width: 22px; height: 22px; }
.theme-swatch.active .swatch-check { display: flex; }
.swatch-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-align: center; }

/* Compact variant for the top-bar's narrow popover — the default 60px swatches don't fit 4-up in
   a 260px-wide popover (they were overlapping/spilling past its edges). */
.theme-grid-compact { gap: 6px; }
.theme-grid-compact .swatch-bg { width: 40px; height: 40px; }
.theme-grid-compact .swatch-check svg { width: 16px; height: 16px; }
.theme-grid-compact .swatch-label { font-size: 0.66rem; }
.theme-grid-compact .theme-swatch { padding: 6px 2px; gap: 5px; }

/* ── NOTIFICATION TOGGLE SWITCH ── */
.notif-toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}
.notif-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.notif-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc2ad;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}
.notif-toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}
.notif-toggle-switch input:checked + .notif-toggle-slider {
    background-color: var(--gold-accent);
}
.notif-toggle-switch input:checked + .notif-toggle-slider::before {
    transform: translateX(20px);
}
.notif-toggle-switch input:disabled + .notif-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── DASHBOARD ── */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.dash-stat-tile { padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 14px; }
.dash-stat-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(var(--accent-rgb), 0.12); color: var(--gold-accent);
    display: flex; align-items: center; justify-content: center;
}
.dash-stat-icon svg { width: 22px; height: 22px; }
.dash-stat-value { font-size: 1.9rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.dash-stat-label { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }

.dash-bar-chart { margin-bottom: 1.5rem; }
.dash-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-bar-row:last-child { margin-bottom: 0; }
.dash-bar-label {
    width: 40%; max-width: 170px; flex-shrink: 0;
    font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-bar-track { flex: 1; height: 10px; border-radius: 999px; background: rgba(0,0,0,0.06); overflow: hidden; }
.dash-bar-fill {
    height: 100%; border-radius: 999px; min-width: 3px;
    background: linear-gradient(90deg, var(--gold-accent), var(--gold-hover));
    transition: width 0.6s var(--transition-smooth);
}
.dash-bar-value { width: 28px; flex-shrink: 0; text-align: right; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }

/* Per-student progress bar chart -- axis stays fixed at the left, the plot + avatar labels below
   it scroll together horizontally once there are more students than fit on screen. */
.dash-progress-chart { margin-bottom: 1.5rem; }
.progress-chart-container { display: flex; gap: 10px; }
.progress-chart-yaxis {
    display: flex; flex-direction: column; justify-content: space-between;
    height: 220px; flex-shrink: 0; padding-right: 2px;
    font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); text-align: right;
}
.progress-chart-scroll { flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 6px; }
.progress-chart-plot { position: relative; height: 220px; }
.progress-chart-gridlines { position: absolute; inset: 0; }
.progress-chart-gridlines div { position: absolute; left: 0; right: 0; height: 1px; background: rgba(0,0,0,0.07); }
.progress-chart-bars-row, .progress-chart-labels-row { display: flex; align-items: flex-end; gap: 18px; height: 100%; }
.progress-chart-labels-row { align-items: flex-start; height: auto; margin-top: 10px; }
.progress-chart-col { width: 68px; flex-shrink: 0; height: 100%; display: flex; align-items: flex-end; }
.progress-chart-labels-row .progress-chart-col { height: auto; align-items: flex-start; }

/* Gradient fill + glossy top highlight + drop shadow reads as a real "3D" bar rather than a flat
   rectangle; the lift + brighten on hover is the "interactive" part -- no JS needed for either. */
.progress-chart-bar {
    width: 100%; min-height: 4px; border-radius: 10px 10px 3px 3px; position: relative; cursor: pointer;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -8px 14px rgba(0,0,0,0.15), 0 6px 14px rgba(0,0,0,0.16);
    transition: transform 0.2s var(--transition-smooth), box-shadow 0.2s ease, filter 0.2s ease;
}
.progress-chart-bar:hover {
    transform: translateY(-4px) scaleX(1.06);
    filter: brightness(1.08) saturate(1.1);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -8px 14px rgba(0,0,0,0.18), 0 12px 22px rgba(0,0,0,0.24);
}
.progress-chart-bar-value {
    position: absolute; top: -20px; left: 0; right: 0; text-align: center;
    font-size: 0.75rem; font-weight: 700; color: var(--text-primary);
}
.progress-chart-label {
    display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; cursor: pointer;
}
.progress-chart-label-name {
    font-size: 0.72rem; font-weight: 700; color: var(--text-primary); text-align: center;
    max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.progress-chart-label-tr { font-size: 0.64rem; color: var(--text-secondary); }

/* Inventory item catalog, grouped by category (both Cards and List display modes). */
.inventory-category-group { margin-bottom: 1.5rem; }
.inventory-category-group:last-child { margin-bottom: 0; }
.inventory-category-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 0.8rem; }
.inventory-category-count { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; }

/* Inventory's whole toolbar (branch / view mode / category filter / search / display toggle /
   Add Item) collapsed into one row, SaaS-dashboard style, instead of three stacked cards. */
.inventory-toolbar {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: row; /* .liquid-glass-card defaults to column -- without this override every
                             group stacked on its own centered row (the "pyramid" look) instead of
                             flowing left-to-right in one line. */
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.inventory-toolbar-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.inventory-toolbar-divider { width: 1px; align-self: stretch; min-height: 22px; background: var(--papyrus-border); flex-shrink: 0; }
.inventory-toolbar-spacer { flex: 1 1 auto; min-width: 8px; }
/* Icon-only Cards/List buttons -- square, no text label, tooltip carries the meaning. */
.inventory-display-btn { flex: 0 0 auto; padding: 8px; width: 34px; height: 34px; }
.inventory-display-btn svg { margin: 0; }
.dash-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 0.8rem;
}
.dash-visual-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
}

/* Dashboard's staff Kitab/Drawing Overview -- one single row per item (thumbnail, name+student,
   mini milestone bar, actions) instead of a full card, so scanning every active item stays a
   scroll through short rows, not a card per item. */
.dash-overview-row {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .dash-overview-row { align-items: flex-start; }
}

/* Student dashboard's "Issued to You" cards -- same .dash-visual-card shell, non-clickable. */
.dash-issued-inventory { margin-bottom: 1.5rem; }
.issued-item-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--gold-accent) 16%, transparent);
    color: var(--gold-accent);
}
.issued-item-qty {
    font-size: 0.8rem; font-weight: 700; color: var(--gold-accent);
    background: color-mix(in srgb, var(--gold-accent) 14%, transparent);
    padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
}
.dash-section-title {
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
    margin: 1.6rem 0 0.9rem;
}
.dash-task-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
}
.progress-track {
    width: 100%;
    height: 7px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-accent), var(--gold-hover));
    border-radius: 999px;
    transition: width 0.3s ease;
}
.dash-log-time-form {
    display: flex; align-items: center; gap: 6px;
}
.dash-log-time-form input {
    width: 64px; padding: 6px 8px; margin: 0;
    border-radius: 8px; border: 1px solid var(--papyrus-border);
    background: rgba(255,255,255,0.6); font-family: inherit; font-size: 0.85rem;
}
.dash-student-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 14px;
}
.dash-student-row + .dash-student-row { margin-top: 6px; }
.dash-timer-active { display: flex; align-items: center; gap: 8px; }
.dash-empty-state {
    text-align: center; padding: 3rem; background: var(--papyrus-card);
    border-radius: 16px; border: 1px dashed var(--papyrus-border); color: var(--text-secondary);
}

/* Dashboard's Udemy-style sidebar — Kitabs / Drawings sections inside one .learning-levels-panel */
.dash-sidebar-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-secondary); padding: 12px 10px 6px;
}
.dash-sidebar-section-title svg { width: 14px; height: 14px; }
.dash-sidebar-count {
    margin-left: auto; font-size: 0.68rem; font-weight: 700; color: var(--gold-accent);
    background: rgba(var(--accent-rgb), 0.12); padding: 1px 7px; border-radius: 999px;
}
.dash-sidebar-empty { padding: 6px 10px 10px; font-size: 0.78rem; color: var(--text-secondary); }

/* Archive — a labeled panel per section (Kitabs / Drawings), each with its own grid, stacked
   vertically as ordinary block-level siblings so they never fight each other for grid columns. */
.archive-section {
    background: var(--papyrus-card);
    border: 1px solid var(--papyrus-border);
    border-radius: 16px;
    padding: 1.2rem 1.4rem 1.5rem;
    margin-bottom: 1.5rem;
}
.archive-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 0.9rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--papyrus-border);
}
.archive-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.archive-section-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-accent);
    background: rgba(201,151,56,0.14);
    padding: 3px 10px;
    border-radius: 999px;
}

/* ── HR TABLE ── */
.hr-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--papyrus-border);
    border-radius: 12px;
}
.hr-table {
    width: 100%;
    min-width: 1300px;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.hr-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f6f4ef;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 2px solid var(--papyrus-border);
    white-space: nowrap;
}
.hr-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--papyrus-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.hr-table tbody tr:last-child td { border-bottom: none; }
.hr-table tbody tr:hover td { background: rgba(var(--accent-rgb), 0.05); }
.hr-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: #f1f0ec;
    color: var(--text-secondary);
}
/* ── Learner Track: level path, hero card, media states ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes levelPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35), var(--glass-shadow); }
    50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0), var(--glass-shadow); }
}
/* Manage Levels detail panel (split-pane, same layout as Drawings/Kitab Revision's own
   workspace-list-panel + learning-detail-panel): the numbered badge and media thumbnail strip
   for whichever level is selected. */
.level-admin-row-num {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem;
    background: linear-gradient(145deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.04));
    color: var(--text-primary);
    border: 1px solid var(--papyrus-border);
}
.level-admin-row-media { display: flex; flex-wrap: wrap; gap: 8px; }
.level-admin-thumb { border: 1px solid var(--papyrus-border); flex-shrink: 0; }
.level-admin-thumb-video {
    width: 64px; height: 64px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.06); color: var(--text-secondary);
}
.level-admin-row-empty { font-size: 0.78rem; color: var(--text-secondary); }
.level-card {
    animation: fadeInUp 0.45s var(--transition-smooth) both;
    animation-delay: calc(var(--i, 0) * 45ms);
    cursor: pointer;
    padding: 1.1rem;
    text-align: center;
}
.level-card.level-locked { cursor: not-allowed; opacity: 0.55; filter: grayscale(0.6); }
.level-card.level-locked:hover { transform: none; box-shadow: var(--glass-shadow); }
.level-card.level-current { border-color: var(--gold-accent); animation: fadeInUp 0.45s var(--transition-smooth) both, levelPulse 2.4s ease-in-out 0.6s infinite; }
.level-card.level-approved { border-color: #2ba15c; }
.level-badge-ring {
    position: relative;
    width: 64px; height: 64px;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800;
    background: linear-gradient(145deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.04));
    color: var(--text-primary);
    overflow: hidden;
    border: 2px solid var(--papyrus-border);
}
.level-card.level-current .level-badge-ring { border-color: var(--gold-accent); color: var(--gold-accent); }
.level-card.level-approved .level-badge-ring { border-color: #2ba15c; color: #2ba15c; background: linear-gradient(145deg, rgba(43,161,92,0.16), rgba(43,161,92,0.04)); }
.level-badge-ring img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.level-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    margin-top: 0.5rem;
}
.level-status-pill.locked { background: #f1f0ec; color: var(--text-secondary); }
.level-status-pill.unlocked { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.level-status-pill.in_review { background: rgba(201,151,56,0.16); color: var(--gold-accent); }
.level-status-pill.approved { background: rgba(43,161,92,0.16); color: #2ba15c; }
.level-status-pill.current-level-badge { background: rgba(201,151,56,0.16); color: var(--gold-accent); margin-top: 0; }

.level-summary-clickable { cursor: pointer; }
.level-summary-clickable:hover { background: rgba(0,0,0,0.03); border-radius: 8px; }

/* Hero progress card at the top of My Learning / Learner Dashboard */
.learning-hero {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.02));
    flex-wrap: wrap;
}
.learning-hero-ring { flex-shrink: 0; }
.learning-hero-stats { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.learning-hero-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.learning-hero-stat-label { font-size: 0.78rem; color: var(--text-secondary); margin-top: 3px; }

.hr-role-badge.coordinator {
    background: var(--gold-accent);
    color: #fff;
}
.hr-role-badge.learner {
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent);
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Small per-step thumbnail strip — the latest approved image for each completed step */
.step-thumb-strip { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; max-height: 186px; overflow-y: auto; padding-right: 2px; }
.step-thumb { flex: 0 0 auto; width: 52px; text-align: center; cursor: zoom-in; }
.step-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--papyrus-border); }
.step-thumb-label { display: block; font-size: 0.6rem; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 6-step review ladder strip on a design card */
.step-pill-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.8rem;
}
.step-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--papyrus-border);
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-secondary);
    transition: all 0.25s var(--transition-smooth);
}
.step-pill-icon { display: flex; align-items: center; }
.step-pill.step-pill-done {
    background: rgba(43, 161, 92, 0.14);
    border-color: #2ba15c;
    color: #2ba15c;
}
.step-pill.step-pill-current {
    background: rgba(201, 151, 56, 0.14);
    border-color: var(--gold-accent);
    color: var(--gold-accent);
}
.step-pill.step-pill-locked { opacity: 0.55; }
.step-pill-approve-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    margin-left: 2px;
    border: none;
    background: var(--gold-accent);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}
.step-pill-approve-btn svg { width: 11px; height: 11px; }
.step-pill-time {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.75;
    white-space: nowrap;
}

/* Assign Stages modal: estimation sidebar (left) + stage list (right), SaaS-style two-column
   layout instead of the old single stacked column. Fills the remaining drawer height (its parent
   sizes it via flex:1) so only the right column's own steps list scrolls -- the header, the
   banner/instructions above this, and the sidebar all stay put, same as .chat-messages does
   inside .chat-drawer. Collapses to one column on narrow screens. */
.kitab-detail-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; min-height: 0; }
.kitab-detail-layout > div:last-child { display: flex; flex-direction: column; min-height: 0; }
@media (max-width: 640px) { .kitab-detail-layout { grid-template-columns: 1fr; } }

/* Live-updating stats sidebar card within that layout */
.kitab-stats-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.02));
}
.kitab-stats-grid { display: flex; flex-direction: column; gap: 0.8rem; }
.kitab-stat-value { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.kitab-stat-label { font-size: 0.74rem; color: var(--text-secondary); margin-top: 3px; }

/* One stage row in the Assign Stages list */
/* .liquid-glass-card's overflow:hidden makes flexbox treat its auto min-height as 0, so as a
   flex item inside the scrolling #kitab-steps-list column it was getting shrunk below its own
   content instead of the list just scrolling past it -- pin it to its natural height. */
.kitab-step-row { padding: 0.9rem; flex-shrink: 0; }
.kitab-step-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kitab-step-row-fields { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr; gap: 10px; align-items: end; }
.kitab-step-field-label {
    display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 4px;
}
.kitab-step-search-wrap {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.6); border: 1px solid var(--papyrus-border);
    border-radius: 8px; padding: 0 8px; color: var(--text-secondary);
}
.kitab-step-search-wrap svg { width: 14px; height: 14px; flex-shrink: 0; }
.kitab-step-search-wrap input {
    border: none; background: none; outline: none; flex: 1; min-width: 0;
    padding: 8px 0; font-family: inherit; font-size: 0.85rem; color: var(--text-primary);
}

/* ── My Learning: Udemy-style split view — collapsible levels on the left, the selected
   level's video/reference/worksheet/chat on the right ── */
.learning-split-layout {
    display: flex;
    gap: 1.2rem;
    height: calc(100vh - 200px);
    min-height: 480px;
}
.learning-topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    background: var(--papyrus-card);
    border: 1px solid var(--papyrus-border);
    border-radius: 10px;
}
.learning-topbar-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.learning-topbar-item strong { color: var(--text-primary); }
.learning-topbar-divider {
    width: 1px;
    height: 16px;
    background: var(--papyrus-border);
}

/* Kitab Revision's "what do these stats mean?" popover, anchored off the info button in the
   topbar above (that button's parent needs position:relative, set inline where it's rendered). */
.kitab-stats-info-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 300px;
    max-width: calc(100vw - 40px);
    z-index: 50;
    padding: 6px 14px;
    background: var(--papyrus-card);
    border: 1px solid var(--papyrus-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.kitab-stats-info-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; }
.kitab-stats-info-row + .kitab-stats-info-row { border-top: 1px solid var(--papyrus-border); }
.kitab-stats-info-row svg { flex-shrink: 0; margin-top: 2px; color: var(--gold-accent); }
.kitab-stats-info-row strong { display: block; font-size: 0.82rem; margin-bottom: 2px; }
.kitab-stats-info-row span { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }

.learning-levels-panel {
    width: 340px;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.5rem;
}
.learning-detail-panel {
    flex: 1;
    overflow-y: auto;
    padding: 0.3rem 0.3rem 0.3rem 0;
}

/* Below tablet width there's no room for a 340px list column beside the detail panel (some
   pages -- Review Students -- even stack a THIRD such column) -- fall back to one panel at a
   time, full width, scrolled to instead of scrolled beside. */
@media (max-width: 900px) {
    .learning-split-layout { flex-direction: column; height: auto; min-height: 0; }
    .learning-levels-panel { width: 100%; max-height: 60vh; }
    .learning-detail-panel { padding: 0.3rem; }
}
.learning-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: var(--text-secondary);
    text-align: center;
}
.learning-detail-empty svg { width: 40px; height: 40px; }

.level-section {
    border-bottom: 1px solid var(--papyrus-border);
    padding: 4px 6px;
}
.level-section:last-child { border-bottom: none; }
.level-section > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    cursor: pointer;
    list-style: none;
    font-size: 0.88rem;
}
.level-section > summary::-webkit-details-marker { display: none; }
.level-section-icon {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 50%;
    font-weight: 700; font-size: 0.8rem;
    background: rgba(0,0,0,0.05); color: var(--text-secondary);
}
.level-section.approved .level-section-icon { background: rgba(43,161,92,0.16); color: #2ba15c; }
.level-section.unlocked .level-section-icon, .level-section.in_review .level-section-icon { background: rgba(201,151,56,0.16); color: var(--gold-accent); }
.level-section.locked { opacity: 0.55; }
.level-section-title { flex: 1; font-weight: 600; }
.level-section-body { padding: 4px 4px 12px 40px; }
.level-open-btn { padding: 6px 12px; font-size: 0.8rem; }

/* My Tazheeb Drawing / Drawings Revision — unified workspace list (left panel of the split
   layout, reusing .learning-split-layout/.learning-levels-panel/.learning-detail-panel). */
.workspace-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--papyrus-border);
}
.workspace-list-item:hover { background: rgba(0,0,0,0.03); }
.workspace-list-item.active { background: rgba(201,151,56,0.1); }
.workspace-list-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.workspace-list-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.workspace-list-item-number { font-size: 0.82rem; font-weight: 700; }
.workspace-list-item-tag { font-size: 0.68rem; font-weight: 500; color: var(--gold-accent); background: rgba(201,151,56,0.12); padding: 1px 6px; border-radius: 6px; }
.workspace-list-item-title { font-size: 0.76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inventory's branch tabs (Karachi / Nairobi) */
.inventory-branch-btn { flex: 0 0 auto; }
.inventory-branch-btn.active { background: var(--gold-accent); color: #fff; }

/* Inventory bulk-add — spreadsheet-style entry grid */
.inventory-bulk-table { width: 100%; border-collapse: collapse; }
.inventory-bulk-table th {
    text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary); font-weight: 700; padding: 8px 6px; border-bottom: 1px solid var(--papyrus-border);
    position: sticky; top: 0; background: var(--papyrus-card);
}
.inventory-bulk-table td { padding: 3px 4px; }
.ib-cell {
    width: 100%; padding: 6px 8px; border: 1px solid var(--papyrus-border); border-radius: 6px;
    background: var(--papyrus-card); font-family: inherit; font-size: 0.82rem; color: var(--text-primary);
}
.ib-cell:focus { outline: none; border-color: var(--gold-accent); }
.ib-remove-row {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: transparent; color: var(--text-secondary); opacity: 0.6; cursor: pointer;
}
.ib-remove-row svg { width: 13px; height: 13px; }
.ib-remove-row:hover { opacity: 1; background: #fdf0ee; color: #c0392b; }

/* Reference Library — Windows-Explorer-style toolbar/breadcrumb/folder grid/list view, styled
   as a modern SaaS panel (glass-card surfaces, soft shadows, hover lift) rather than flat
   utilitarian chrome. Reuses this app's existing glass-card tokens (--glass-bg/--glass-border/
   --glass-shadow/--transition-smooth) — the same language liquid-glass-card already uses. */
.reflib-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 1.1rem; padding: 0.7rem 0.9rem;
    background: var(--glass-bg); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--glass-shadow);
}
.reflib-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reflib-crumb {
    display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px;
    font-size: 0.92rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
    transition: background 0.15s var(--transition-smooth), color 0.15s var(--transition-smooth);
}
.reflib-crumb:not(.active):hover { background: rgba(var(--accent-rgb), 0.1); color: var(--gold-accent); }
.reflib-crumb svg { width: 16px; height: 16px; }
.reflib-crumb.active { color: var(--text-primary); cursor: default; }
.reflib-crumb-sep { color: var(--text-secondary); opacity: 0.4; }
.reflib-folder-add {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--papyrus-border); background: var(--papyrus-card);
    font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s var(--transition-smooth);
}
.reflib-folder-add:hover { border-color: var(--gold-accent); color: var(--gold-accent); background: rgba(var(--accent-rgb), 0.06); }
.reflib-toolbar-controls { display: flex; align-items: center; gap: 10px; }
/* "View" button + its dropdown menu (icon sizes + Preview pane toggle) — Windows Explorer's own
   View button, reusing the same anchored-popup mechanism as chat's emoji/forward pickers. */
.reflib-view-menu-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--papyrus-border); background: var(--papyrus-card);
    font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s var(--transition-smooth);
}
.reflib-view-menu-btn svg:first-child { width: 16px; height: 16px; }
.reflib-view-menu-btn:hover, .reflib-view-menu-btn.active { border-color: var(--gold-accent); color: var(--gold-accent); background: rgba(var(--accent-rgb), 0.06); }
.reflib-view-menu {
    position: absolute;
    background: var(--papyrus-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.16);
    padding: 6px;
    min-width: 190px;
    z-index: 50;
}
.reflib-view-menu-sep { height: 1px; background: var(--papyrus-border); margin: 5px 4px; }
.reflib-view-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 8px 10px; border: none; border-radius: 8px;
    background: none; font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
    cursor: pointer; text-align: left;
    transition: background 0.12s var(--transition-smooth);
}
.reflib-view-menu-item:hover { background: var(--papyrus-bg); }
.reflib-view-menu-item svg { width: 8px; height: 8px; color: var(--gold-accent); flex-shrink: 0; }

/* Grid + optional right-side preview pane, side by side */
.reflib-body { display: flex; gap: 1rem; align-items: flex-start; }
.reflib-body-main { flex: 1; min-width: 0; }
/* The double-click-to-upload listener lives on #reflibrary-grid-container -- without a
   min-height it's only as tall as its one row of tiles, so most of the visibly-empty space
   the hint text points at ("double-click empty space below") sits outside the element
   entirely and never fires. Give it real vertical room to actually catch that click. */
#reflibrary-grid-container { min-height: 420px; }

/* Icon tiles (grid view) — folders AND files share one uniform icon-grid, same tile size for
   every item, exactly like Windows Explorer's icon views (Extra large/Large/Medium/Small icons)
   where a folder and a file render at the same size, just with a different glyph inside. Column
   width and icon/label size all scale together per .size-xlarge/large/medium/small. */
.reflib-icon-grid {
    display: grid;
    gap: 6px;
    margin-bottom: 1.25rem;
}
.reflib-icon-grid.size-xlarge { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.reflib-icon-grid.size-large { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.reflib-icon-grid.size-medium { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.reflib-icon-grid.size-small { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.reflib-folder-card, .reflib-file-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 0.65rem 0.45rem;
    border-radius: 12px; border: 1px solid transparent; background: transparent;
    cursor: pointer; text-align: center;
    transition: background 0.15s var(--transition-smooth), border-color 0.15s var(--transition-smooth), box-shadow 0.15s var(--transition-smooth), transform 0.15s var(--transition-smooth);
}
.reflib-folder-card:hover, .reflib-file-card:hover {
    background: var(--papyrus-card); border-color: var(--glass-border);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-1px);
}
.reflib-file-card.selected {
    background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.4);
}
.reflib-folder-icon svg { width: 44px; height: 44px; }
.reflib-file-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--gold-accent); }
.reflib-file-icon svg { width: 30px; height: 30px; }
.reflib-file-icon img { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; }
.size-xlarge .reflib-folder-icon svg, .size-xlarge .reflib-file-icon, .size-xlarge .reflib-file-icon img { width: 100px; height: 100px; }
.size-xlarge .reflib-file-icon svg { width: 64px; height: 64px; }
.size-xlarge .reflib-folder-name, .size-xlarge .reflib-file-name { font-size: 0.9rem; }
.size-large .reflib-folder-icon svg, .size-large .reflib-file-icon, .size-large .reflib-file-icon img { width: 68px; height: 68px; }
.size-large .reflib-file-icon svg { width: 46px; height: 46px; }
.size-large .reflib-folder-name, .size-large .reflib-file-name { font-size: 0.85rem; }
.size-small .reflib-folder-icon svg, .size-small .reflib-file-icon, .size-small .reflib-file-icon img { width: 26px; height: 26px; }
.size-small .reflib-file-icon svg { width: 17px; height: 17px; }
.size-small .reflib-folder-name, .size-small .reflib-file-name { font-size: 0.66rem; -webkit-line-clamp: 1; }
.size-small .reflib-folder-count { display: none; }
.reflib-folder-name, .reflib-file-name {
    font-weight: 600; font-size: 0.78rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.reflib-folder-count { font-size: 0.66rem; color: var(--text-secondary); }
.reflib-folder-card-actions, .reflib-file-card-actions { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; }
.reflib-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0;
    border: none; border-radius: 50%; background: rgba(0,0,0,0.06); color: inherit; opacity: 0.75; cursor: pointer; text-decoration: none;
    transition: opacity 0.12s ease, background 0.12s ease;
}
.reflib-icon-btn:hover { opacity: 1; background: rgba(0,0,0,0.12); }
.reflib-icon-btn svg { width: 13px; height: 13px; }

/* List view (rows) */
.reflib-list { display: flex; flex-direction: column; gap: 5px; }
.reflib-list-row {
    display: grid; grid-template-columns: 32px 1fr 130px 160px auto;
    align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px; border: 1px solid var(--papyrus-border); background: var(--papyrus-card);
    transition: border-color 0.15s var(--transition-smooth), box-shadow 0.15s var(--transition-smooth);
}
.reflib-folder-row { cursor: pointer; }
.reflib-folder-row:hover, .reflib-list-row:hover { border-color: var(--gold-accent); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.reflib-list-icon { display: flex; align-items: center; color: var(--gold-accent); }
.reflib-list-icon svg { width: 18px; height: 18px; }
.reflib-list-name { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reflib-list-meta { font-size: 0.78rem; color: var(--text-secondary); }
.reflib-list-actions { display: flex; gap: 4px; justify-content: flex-end; }
@media (max-width: 640px) {
    .reflib-list-row { grid-template-columns: 28px 1fr auto; }
    .reflib-list-meta, .reflib-move-select { display: none; }
}

/* Preview pane — Explorer's own right-hand file preview, toggled from the View menu. */
.reflib-preview-panel {
    flex: 0 0 300px; width: 300px;
    background: var(--glass-bg); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--glass-shadow);
    padding: 1.1rem; position: sticky; top: 0;
}
.reflib-preview-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary); font-size: 0.88rem; }
.reflib-preview-empty svg { width: 32px; height: 32px; opacity: 0.4; margin-bottom: 10px; }
.reflib-preview-thumb {
    width: 100%; height: 200px; border-radius: 10px; overflow: hidden;
    background: var(--papyrus-bg); border: 1px solid var(--papyrus-border);
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.reflib-preview-thumb img, .reflib-preview-thumb video { width: 100%; height: 100%; object-fit: contain; }
.reflib-preview-thumb svg { width: 56px; height: 56px; color: var(--gold-accent); opacity: 0.6; }
.reflib-preview-title { font-weight: 700; font-size: 1rem; margin-bottom: 10px; word-break: break-word; }
.reflib-preview-meta-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--papyrus-border); font-size: 0.8rem; }
.reflib-preview-meta-row span:first-child { color: var(--text-secondary); }
.reflib-preview-meta-row span:last-child { font-weight: 600; text-align: right; }
.reflib-preview-actions { display: flex; gap: 8px; margin-top: 14px; }

/* Unread message count — WhatsApp-style small red pill, wherever a chat entry point renders */
.chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e0433a;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}
.workspace-list-item-number .chat-unread-badge { margin-left: 4px; }
/* Small notification-dot placement when the badge rides on an icon button (top bar's Chat
   shortcut) instead of sitting inline after text. */
.top-bar-icon-btn { position: relative; }
.top-bar-icon-btn .chat-unread-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.62rem;
    border: 2px solid var(--text-primary);
}

.level-media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) { .level-media-row { grid-template-columns: 1fr; } }
.level-media-box {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/10;
    display: flex; align-items: center; justify-content: center;
}
.level-media-box video, .level-media-box img { width: 100%; height: 100%; object-fit: cover; }
.level-media-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 14, 6, 0.55);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.level-media-expand-btn:hover { background: rgba(20, 14, 6, 0.75); }
.level-media-expand-btn svg { width: 15px; height: 15px; }
.level-media-empty { display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--text-secondary); font-size: 0.8rem; }
.level-docs-box { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.level-docs-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Udemy-style gallery: main item + a thumbnail strip beneath it when a level has more than one
   image/video. Clicking a thumbnail swaps it into the main slot (see mediaGalleryBoxHtml). */
.level-media-box-wrap { display: flex; flex-direction: column; gap: 8px; }
.level-media-thumbs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.level-media-thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--glass-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.level-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.level-media-thumb-video-icon svg { width: 16px; height: 16px; }
.level-media-thumb.active { border-color: var(--gold-accent); }
.level-media-thumb:hover { border-color: var(--papyrus-border); }

/* Teacher's "Level Media" modal — the already-uploaded list, with a remove button per item. */
.level-media-chip-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; max-height: 200px; overflow-y: auto; }
.level-media-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 0.8rem;
}
.level-media-chip-icon { display: flex; color: var(--text-secondary); flex: 0 0 auto; }
.level-media-chip-thumb { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; cursor: zoom-in; }
.level-media-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-media-chip-replace, .level-media-chip-remove { width: 26px; height: 26px; flex: 0 0 auto; }

/* ── Calendar: Hijri-first month grid + agenda sidebar ── */
.meetings-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .meetings-layout { grid-template-columns: 1fr; } }

.meetings-calendar-card { padding: 1.25rem; }
.meetings-calendar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap; }
.meetings-calendar-title { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.meetings-calendar-header small { display: block; font-size: 0.74rem; font-weight: 600; color: var(--gold-accent); margin-top: 2px; }
.meetings-calendar-nav { display: flex; gap: 6px; align-items: center; }
.meetings-nav-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--papyrus-border);
    background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-primary); transition: all 0.15s ease;
}
.meetings-nav-btn:hover { background: rgba(var(--accent-rgb), 0.1); border-color: var(--gold-accent); color: var(--gold-accent); }
.meetings-today-btn {
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--papyrus-border);
    background: rgba(255,255,255,0.6); font-weight: 700; font-size: 0.76rem; cursor: pointer; color: var(--text-primary);
    transition: all 0.15s ease;
}
.meetings-today-btn:hover { border-color: var(--gold-accent); color: var(--gold-accent); }

.meetings-grid-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.meetings-grid-weekdays span {
    text-align: center; padding: 4px; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
}
.meetings-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: var(--papyrus-border); border: 1px solid var(--papyrus-border);
    border-radius: 12px; overflow: hidden;
}
.meetings-day-cell {
    background: var(--papyrus-card); min-height: 72px; padding: 6px 8px; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    transition: background 0.15s ease; position: relative;
}
.meetings-day-cell:hover { background: rgba(var(--accent-rgb), 0.06); }
.meetings-day-cell.other-month { opacity: 0.35; }
.meetings-day-cell.selected { background: rgba(var(--accent-rgb), 0.12); box-shadow: inset 0 0 0 2px var(--gold-accent); }
.meetings-day-hijri { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.meetings-day-cell.today .meetings-day-hijri { color: var(--gold-accent); }
.meetings-day-gregorian { font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); }
/* Small dots along the bottom of a day cell -- one per indicator type (just meetings for now;
   stage 3 adds a Hijri-observance dot and a drawing/kitab-activity dot alongside it). */
.meetings-day-indicators { display: flex; gap: 3px; margin-top: auto; padding-top: 2px; }
.meetings-day-indicator { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.indicator-miqaat { background: var(--gold-accent); }
.indicator-meeting { background: var(--success-green); }
.indicator-activity { background: #6b8fd6; }

.meetings-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.meeting-card {
    padding: 10px 12px; border-radius: 10px; border: 1px solid var(--papyrus-border);
    background: rgba(255,255,255,0.5); cursor: pointer; margin-bottom: 8px; transition: all 0.15s ease;
}
.meeting-card:last-child { margin-bottom: 0; }
.meeting-card:hover { border-color: var(--gold-accent); transform: translateY(-1px); }
.meeting-card-time {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700;
    color: var(--gold-accent); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px;
}
.meeting-card.meeting-status-live .meeting-card-time { color: var(--success-green); }
.meeting-card.meeting-status-ended .meeting-card-time { color: var(--text-secondary); }
.meeting-card-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 2px; }
.meeting-card-meta { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--text-secondary); }
.meeting-card-compact { padding: 8px 10px; }
.meeting-card-compact .meeting-card-title { font-size: 0.82rem; }

.meeting-rsvp-tag { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.meeting-rsvp-going { background: rgba(39, 174, 96, 0.14); color: var(--success-green); }
.meeting-rsvp-maybe { background: rgba(201, 151, 56, 0.14); color: var(--gold-accent); }
.meeting-rsvp-not_going { background: rgba(192, 57, 43, 0.14); color: var(--danger-red); }

/* Meeting Detail modal */
.meeting-rsvp-btn.active { background: var(--gold-accent); border-color: var(--gold-accent); color: #fff; }
.meeting-roster-row {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px;
    background: rgba(0,0,0,0.03); cursor: pointer; font-size: 0.82rem;
}
.meeting-roster-name { flex: 1; }
.meeting-roster-name small { color: var(--text-secondary); font-weight: 500; }

/* Schedule/Edit Meeting form */
.meeting-audience-subfields { margin-top: 10px; }
.meeting-audience-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 999px; font-size: 0.78rem;
}
.meeting-audience-chip button { display: flex; border: none; background: none; cursor: pointer; color: var(--text-secondary); padding: 2px; }
.meeting-audience-chip button:hover { color: var(--danger-red); }
.meeting-search-result-row {
    display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px;
    border: none; background: rgba(0,0,0,0.03); cursor: pointer; font-size: 0.82rem; color: var(--text-primary);
}
.meeting-search-result-row:hover { background: rgba(var(--accent-rgb), 0.1); }
.meeting-search-result-row small { color: var(--text-secondary); }

/* Hijri observance banner (miqaats) — informational, not clickable, sits above the day's
   meetings so a religious date is never mistaken for a scheduled call. */
.meeting-miqaat-banner {
    background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 5px;
}
.meeting-miqaat-row { display: flex; align-items: flex-start; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--gold-accent); }
.meeting-miqaat-row svg { flex-shrink: 0; margin-top: 1px; }
.meeting-miqaat-row small { font-weight: 500; color: var(--text-secondary); }

/* Drawing/kitab activity for the day — compact, non-clickable list underneath any meetings. */
.meeting-activity-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.meeting-activity-item {
    display: flex; align-items: flex-start; gap: 6px; font-size: 0.76rem; color: var(--text-secondary);
    padding: 4px 2px;
}
.meeting-activity-item svg { flex-shrink: 0; margin-top: 2px; color: #6b8fd6; }

/* Dashboard's "Upcoming Meetings" card -- only ever rendered when there's at least one, reuses
   .meeting-card/.meeting-card-compact from the Calendar tab itself. */
.dash-reminders-card { margin-bottom: 1.5rem; }

/* Milestone countdown bar -- shown on every kitab/drawing's dashboard detail (and, on the staff
   Dashboard overview, once per row), counting down to the two Urus days treated as this school's
   main calendar milestones. */
.milestone-timeline {
    background: var(--glass-bg); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border); border-radius: 14px; padding: 1rem 1.1rem 1.2rem; margin-bottom: 1.1rem;
}
.milestone-timeline-title {
    font-size: 0.85rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.milestone-bar { position: relative; height: 8px; border-radius: 999px; overflow: visible; display: flex; background: var(--papyrus-border); }
.milestone-segment { height: 100%; }
.milestone-segment-near { background: var(--gold-accent); border-radius: 999px 0 0 999px; }
.milestone-segment-far { background: #6b8fd6; border-radius: 0 999px 999px 0; }
.milestone-segment:only-child { border-radius: 999px; }
.milestone-dot {
    position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 3px solid var(--gold-accent); box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: translate(-50%, -50%); z-index: 1;
}
/* This item's own projected finish date, plotted on the same timeline -- a bold color-coded pin
   ON the bar (green on track for the nearer Urus, amber if it lands between the two, red if
   already overdue), sized well above the near/far dot so it reads as the "you are here" marker
   it is rather than something to squint at. */
.milestone-est-marker {
    position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
    background: var(--marker-color, #7c3aed); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%); z-index: 2;
}
.milestone-labels { display: flex; justify-content: space-between; margin-top: 12px; gap: 8px; }
.milestone-label { display: flex; flex-direction: column; max-width: 40%; }
.milestone-label-end { align-items: flex-end; text-align: right; }
.milestone-label-dot { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 4px; }
.milestone-label-dot-today { background: var(--text-secondary); }
.milestone-label-dot-near { background: var(--gold-accent); }
.milestone-label-dot-far { background: #6b8fd6; }
.milestone-label-name { font-size: 0.76rem; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.milestone-label-date { font-size: 0.68rem; color: var(--text-secondary); margin-top: 1px; }

/* Compact one-line variant for the Dashboard overview rows -- just the bar plus a short caption,
   no title or dated labels (those are still available via the tooltip). */
.milestone-mini { flex: 2 1 220px; min-width: 200px; }
.milestone-mini-bar { margin: 0 0 20px; height: 9px; }
.milestone-mini-tag {
    position: absolute; top: 100%; margin-top: 5px;
    font-size: 0.82rem; font-weight: 800; color: var(--text-primary);
    transform: translateX(-50%); white-space: nowrap;
}
.milestone-mini-tag-end { right: 0; transform: none; }
.milestone-mini-caption { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-top: 6px; }