:root {
    --navy-900: #0d1b2e;
    --navy-850: #102347;
    --navy-800: #16294d;
    --sidebar-grad: linear-gradient(180deg, #0d1b2e 0%, #0f2138 100%);
    --emerald: #10B981;
    --emerald-dark: #059669;
    --emerald-soft: rgba(16,185,129,.14);
    --emerald-border: rgba(16,185,129,.32);
    --bg-surface: #F4F7FB;
    --white: #ffffff;
    --border: #E6EBF2;
    --text-heading: #0A2540;
    --text-body: #475569;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --amber: #f59e0b;
    --red: #E25950;
    --red-soft: #fde8e6;
    --shadow-sm: 0 1px 3px rgba(13,27,46,.06);
    --shadow-md: 0 10px 30px rgba(13,27,46,.07);
    --shadow-lg: 0 24px 60px rgba(13,27,46,.18);
    --fluid: cubic-bezier(0.16, 1, 0.3, 1);
    --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-surface);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
.font-display { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
i { font-style: normal; }

/* ════════════ LOGIN ════════════ */
.login-view {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #0d2340 0%, #1a3a6b 50%, #0d2340 100%);
    position: relative; overflow: hidden;
}
.login-view::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 28px 28px; pointer-events: none;
}
.login-card {
    background: var(--white); border-radius: 18px;
    box-shadow: var(--shadow-lg); width: 100%; max-width: 420px;
    overflow: hidden; position: relative; z-index: 1;
}
.login-head {
    background: linear-gradient(135deg, #0d1b2e, #1a2d4a);
    padding: 2rem 1.75rem 1.5rem; text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.login-shield {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-dark));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .9rem; box-shadow: 0 8px 24px rgba(16,185,129,.4);
}
.login-shield i { color: #fff; font-size: 1.4rem; }
.login-brand { font-size: 1.3rem; font-weight: 800; color: #f0f6ff; letter-spacing: .01em; }
.login-tag { font-size: .72rem; color: #6b85a8; margin-top: 4px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.login-body { padding: 1.9rem 1.75rem 1.5rem; }
.login-intro { text-align: center; margin-bottom: 1.4rem; }
.login-intro .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--emerald-soft); border: 1px solid var(--emerald-border); display: flex; align-items: center; justify-content: center; margin: 0 auto .6rem; }
.login-intro .ico i { color: var(--emerald); font-size: 1.15rem; }
.login-intro p { font-size: .86rem; color: var(--text-muted); }

.login-input-wrap { position: relative; margin-bottom: 1rem; }
.login-input-wrap .field-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: #8a97a8; font-size: 1.05rem; pointer-events: none; width: 18px; text-align: center; }
.acct-card .login-input-wrap input,
.login-card .login-input-wrap input {
    width: 100%; padding: 1.05rem 3rem 1.05rem 3.3rem; border: 1.5px solid #d6deea;
    border-radius: 12px; font-size: 1rem; font-weight: 500; color: var(--text-heading);
    background: #fff; transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-input-wrap input::placeholder { color: #97a3b4; opacity: 1; font-weight: 500; }
.acct-card .login-input-wrap input:focus,
.login-card .login-input-wrap input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.12); background: #fff; }
.login-eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #8a97a8; font-size: 1.05rem; padding: 4px 8px; }
.login-eye-btn:hover { color: var(--emerald); }
.login-btn {
    width: 100%; padding: .95rem; border: none; border-radius: 10px;
    font-size: 1rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-dark));
    display: flex; align-items: center; justify-content: center; gap: 9px;
    transition: opacity .2s, transform .15s; margin-top: .25rem;
}
.login-btn:hover { opacity: .93; transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.login-err { color: var(--red); font-size: .85rem; min-height: 1.2em; margin: .65rem 0 .2rem; text-align: center; }
.login-foot { padding: 0 1.75rem 1.5rem; text-align: center; }
.login-hint { font-size: .78rem; color: var(--text-faint); background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; }
.login-hint b { color: var(--text-body); }

/* ════════════ ACCOUNT SELECT / AUTH ════════════ */
:root { --acad-blue: #1e56d6; --acad-orange: #f7901e; --acad-green: #16a34a; --acad-purple: #7c3aed; }
.acct-view {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: linear-gradient(160deg, #eef3fb 0%, #f7fafe 45%, #eaf0fa 100%);
}
.acct-card {
    position: relative; width: 100%; max-width: 460px; background: #fff;
    border-radius: 26px; box-shadow: var(--shadow-lg); padding: 2.4rem 2rem 1.7rem; overflow: hidden;
}
.acct-deco { position: absolute; pointer-events: none; z-index: 0; }
.acct-deco-tl { top: -70px; left: -70px; width: 170px; height: 170px; border-radius: 50%;
    background: linear-gradient(135deg, var(--acad-blue), #2f6bf0); box-shadow: 14px 70px 0 -40px var(--acad-orange); }
.acct-deco-tr { top: -55px; right: -55px; width: 150px; height: 150px;
    background: linear-gradient(135deg, var(--acad-orange), #ffb255);
    clip-path: polygon(100% 0, 0 0, 100% 100%); border-radius: 0 26px 0 0; opacity: .92; }
.acct-card > *:not(.acct-deco) { position: relative; z-index: 1; }
.acct-head { text-align: center; }
.acct-logo { width: 78px; height: 78px; margin: .2rem auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: transparent; box-shadow: none; }
.acct-logo i { color: #fff; font-size: 2rem; }
.acct-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.acct-brand { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1.12; letter-spacing: .01em; }
.acct-brand .o { color: var(--acad-orange); }
.acct-brand .b { color: var(--acad-blue); }
.acct-rule { display: flex; align-items: center; justify-content: center; gap: 0; margin: 1.1rem 0 1rem; }
.acct-rule span { height: 1px; width: 90px; background: var(--border); }
.acct-rule i { width: 9px; height: 9px; border-radius: 50%; background: var(--acad-orange); margin: 0 10px; }
.acct-sub { font-weight: 800; color: var(--text-heading); font-size: 1.02rem; }
.acct-sub i { color: var(--acad-blue); font-size: .8rem; margin: 0 6px; }
.acct-err { margin: 1rem 0 .2rem; color: var(--red); background: var(--red-soft); border-radius: 10px;
    padding: .6rem .8rem; font-size: .85rem; text-align: center; }

.acct-options { display: flex; flex-direction: column; gap: .9rem; margin: 1.4rem 0 1.3rem; }
.acct-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
    background: #f7f9fc; border: 1.5px solid var(--border); border-radius: 18px; padding: 1.05rem 1.15rem;
    transition: transform .15s var(--fluid), box-shadow .2s, border-color .2s, background .2s; }
.acct-opt:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13,27,46,.12); }
.acct-opt-ico { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
    box-shadow: inset 0 0 0 1px rgba(13,27,46,.05), 0 4px 12px rgba(13,27,46,.06); }
/* faint role illustration watermark (phones only) */
.acct-opt-art { position: absolute; right: 14px; bottom: 0; font-size: 3.1rem; line-height: 1;
    opacity: .13; pointer-events: none; z-index: 0; }
.acct-opt-ico, .acct-opt-main, .acct-opt-go { position: relative; z-index: 1; }
.acct-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-opt-title { font-weight: 800; font-size: 1.18rem; font-family: 'Plus Jakarta Sans', sans-serif; }
.acct-opt-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.35; }
.acct-opt-go { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; color: inherit;
    box-shadow: 0 3px 10px rgba(13,27,46,.1); }
.acct-opt.student { background: #eef3fe; border-color: #d7e3fc; }
.acct-opt.student .acct-opt-ico, .acct-opt.student .acct-opt-title, .acct-opt.student .acct-opt-go, .acct-opt.student .acct-opt-art { color: var(--acad-blue); }
.acct-opt.teacher { background: #eefaf1; border-color: #cfedd8; }
.acct-opt.teacher .acct-opt-ico, .acct-opt.teacher .acct-opt-title, .acct-opt.teacher .acct-opt-go, .acct-opt.teacher .acct-opt-art { color: var(--acad-green); }
.acct-opt.admin { background: #f5f0fe; border-color: #e4d8fb; }
.acct-opt.admin .acct-opt-ico, .acct-opt.admin .acct-opt-title, .acct-opt.admin .acct-opt-go, .acct-opt.admin .acct-opt-art { color: var(--acad-purple); }
.acct-opt:hover.student { border-color: var(--acad-blue); }
.acct-opt:hover.teacher { border-color: var(--acad-green); }
.acct-opt:hover.admin { border-color: var(--acad-purple); }
.acct-foot { display: inline-flex; align-items: center; gap: 6px; text-align: center; font-size: .82rem;
    color: var(--text-muted); background: #eef2f8; border: 1px solid var(--border); border-radius: 999px;
    padding: .55rem 1.15rem; margin-top: .9rem; }
.acct-foot i { color: var(--acad-purple); }

/* ── Account chooser — wide "fit the screen" landing (desktop / laptop / tablet) ── */
/* Phones keep the simple stacked card; the landscape design kicks in at >= 768px. */
.acct-shell {
    position: relative; width: 100%; max-width: 480px; background: #fff;
    border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.acct-hero {
    position: relative; overflow: hidden; text-align: center; color: #fff;
    background: linear-gradient(150deg, #0b1f3b 0%, #122c50 58%, #0d2344 100%);
    padding: clamp(1.5rem, 4vh, 2.8rem) 1.4rem clamp(1.5rem, 4vh, 2.4rem);
}
.acct-hd { position: absolute; pointer-events: none; z-index: 0; }
.acct-hd-c1 { width: 210px; height: 210px; border-radius: 50%; top: -78px; left: -56px;
    background: radial-gradient(circle at 32% 32%, rgba(74,124,242,.55), rgba(74,124,242,0) 70%); }
.acct-hd-c2 { width: 30px; height: 30px; border-radius: 50%; top: 96px; left: 76px;
    background: var(--acad-orange); opacity: .85; }
.acct-hd-c3 { width: 15px; height: 15px; border-radius: 50%; top: 58px; right: 18%;
    background: var(--acad-orange); opacity: .9; }
.acct-hd-grid { width: 92px; height: 58px; top: 26px; right: 24px; opacity: .55;
    background-image: radial-gradient(rgba(120,160,255,.7) 1.5px, transparent 1.6px);
    background-size: 14px 14px; }
.acct-hero > *:not(.acct-hd) { position: relative; z-index: 1; }
.acct-hero .acct-logo { background: transparent; box-shadow: none; }
.acct-welcome { font-family: 'Plus Jakarta Sans', 'Segoe Script', cursive; font-style: italic;
    font-weight: 700; font-size: clamp(1rem, 2.4vh, 1.3rem); margin-bottom: .25rem;
    background: linear-gradient(90deg, var(--acad-orange), #5b93ff);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.acct-hero .acct-brand { color: #fff; font-size: clamp(1.5rem, 3.4vh, 2.3rem); }
.acct-brand .w { color: #fff; }
.acct-hero .acct-brand .b { color: #5b93ff; }
.acct-hero .acct-rule span { background: rgba(255,255,255,.24); }
.acct-tagline { color: rgba(255,255,255,.8); font-size: clamp(.82rem, 1.7vh, .98rem);
    line-height: 1.5; max-width: 440px; margin: .55rem auto 0; }
.acct-body { padding: clamp(1.2rem, 3vh, 1.9rem) clamp(1.1rem, 3vw, 1.9rem) clamp(1.2rem, 2.6vh, 1.7rem);
    text-align: center; }
.acct-rule-sm { margin: .7rem 0 1rem; }
.acct-rule-sm span { width: clamp(40px, 8vw, 70px); }
.acct-opt-wave { display: none; }

@media (min-width: 768px) {
    /* Strictly desktop / laptop / tablet: the whole landing fits the viewport, no scroll. */
    .acct-view.acct-chooser { height: 100vh; overflow: hidden; padding: clamp(12px, 3.5vh, 30px); }
    /* overflow:auto is a safety net only — clamp()/short-height rules keep it scroll-free
       in normal use, but content is never clipped/lost under extreme vertical pressure. */
    .acct-shell { max-width: min(960px, 95vw); display: flex; flex-direction: column;
        max-height: calc(100vh - clamp(24px, 7vh, 60px)); overflow: auto; }
    .acct-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .acct-options { flex-direction: row; align-items: stretch; gap: clamp(.9rem, 2vw, 1.6rem);
        margin: clamp(.9rem, 2.4vh, 1.5rem) 0 0; }
    .acct-opt { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
        padding: clamp(1rem, 2.6vh, 1.7rem) 1rem clamp(1.9rem, 3.6vh, 2.5rem); position: relative; overflow: hidden; }
    .acct-opt-ico { width: clamp(50px, 6.6vh, 68px); height: clamp(50px, 6.6vh, 68px);
        font-size: clamp(1.3rem, 2.6vh, 1.6rem); }
    .acct-opt-art { display: none; }
    .acct-opt-main { align-items: center; text-align: center; }
    .acct-opt-title { font-size: clamp(1.05rem, 2.3vh, 1.2rem); }
    .acct-opt-desc { font-size: clamp(.78rem, 1.5vh, .85rem); }
    .acct-opt-go { display: none; }
    .acct-opt-wave { display: block; position: absolute; left: 0; right: 0; bottom: 0;
        height: clamp(22px, 3vh, 30px);
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M0,12%20C18,3%2032,3%2050,10%20C68,17%2082,17%20100,9%20L100,30%20L0,30%20Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
                mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M0,12%20C18,3%2032,3%2050,10%20C68,17%2082,17%20100,9%20L100,30%20L0,30%20Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%; }
    .acct-opt.student .acct-opt-wave { background: var(--acad-blue); }
    .acct-opt.teacher .acct-opt-wave { background: var(--acad-green); }
    .acct-opt.admin  .acct-opt-wave { background: var(--acad-purple); }
    .acct-opt-wave::before { content: ''; position: absolute; left: 20px; bottom: 7px;
        width: 9px; height: 9px; border-radius: 50%; background: #fff; }
}

/* Short-height laptops/tablets (and the error state) — compress the hero so the whole
   chooser keeps fitting the viewport without scrolling. */
@media (min-width: 768px) and (max-height: 760px) {
    .acct-hero { padding: 1.1rem 1.4rem 1rem; }
    .acct-hero .acct-logo { width: 54px; height: 54px; margin: .1rem auto .55rem; }
    .acct-hero .acct-logo i { font-size: 1.5rem; }
    .acct-rule { margin: .7rem 0 .55rem; }
    .acct-tagline { margin-top: .35rem; }
    .acct-body { padding-top: 1rem; padding-bottom: 1rem; }
    .acct-rule-sm { margin: .5rem 0 .7rem; }
}

/* Phone design — immersive full-bleed hero + a white panel of vivid gradient cards.
   Everything is compressed so the whole chooser fits the viewport with NO scroll. */
@media (max-width: 767px) {
    .acct-view.acct-chooser { padding: 0; display: block; height: 100svh; overflow: hidden; background: #0b1f3b; }
    .acct-chooser .acct-shell { max-width: 100%; height: 100svh; border-radius: 0; box-shadow: none;
        background: transparent; display: flex; flex-direction: column; }
    .acct-chooser .acct-err { margin: .6rem 0 0; }
    .acct-chooser .acct-hero { border-radius: 0; padding: 1.3rem 1.2rem 2.3rem; }
    .acct-chooser .acct-hero .acct-logo { width: 56px; height: 56px; margin: 0 auto .45rem; }
    .acct-chooser .acct-hero .acct-logo i { font-size: 1.5rem; }
    .acct-chooser .acct-welcome { margin-bottom: .12rem; }
    .acct-chooser .acct-rule { margin: .65rem 0 0; }
    .acct-chooser .acct-tagline { display: none; }
    .acct-chooser .acct-body { flex: 1; display: flex; flex-direction: column;
        background: #fff; border-radius: 26px 26px 0 0; margin-top: -1.6rem;
        position: relative; z-index: 2; padding: 1.35rem 1.05rem 1.05rem;
        box-shadow: 0 -10px 26px rgba(13,27,46,.16); }
    .acct-chooser .acct-rule-sm { margin: .5rem 0 0; }
    .acct-chooser .acct-options { flex: 1; justify-content: center; gap: .8rem; margin: .9rem 0 .8rem; }
    .acct-chooser .acct-opt { padding: 1rem 1.1rem; border: none; }
    .acct-opt.student { background: linear-gradient(115deg, #3f7bf2 0%, #1f49c9 100%); }
    .acct-opt.teacher { background: linear-gradient(115deg, #34c759 0%, #138a3e 100%); }
    .acct-opt.admin   { background: linear-gradient(115deg, #8b5cf6 0%, #5a2ec0 100%); }
    .acct-opt.student .acct-opt-title, .acct-opt.teacher .acct-opt-title, .acct-opt.admin .acct-opt-title { color: #fff; }
    .acct-opt.student .acct-opt-desc, .acct-opt.teacher .acct-opt-desc, .acct-opt.admin .acct-opt-desc { color: rgba(255,255,255,.88); }
    .acct-opt.student .acct-opt-go, .acct-opt.teacher .acct-opt-go, .acct-opt.admin .acct-opt-go {
        color: #fff; background: rgba(255,255,255,.24); box-shadow: none; }
    .acct-opt.student .acct-opt-art, .acct-opt.teacher .acct-opt-art, .acct-opt.admin .acct-opt-art { color: #fff; opacity: .16; }
    .acct-chooser .acct-foot { margin-top: auto; }
}

/* Short phones — shrink further so the chooser still fits with no scroll. */
@media (max-width: 767px) and (max-height: 680px) {
    .acct-chooser .acct-hero { padding: .9rem 1.2rem 1.9rem; }
    .acct-chooser .acct-hero .acct-logo { width: 46px; height: 46px; margin-bottom: .35rem; }
    .acct-chooser .acct-hero .acct-logo i { font-size: 1.25rem; }
    .acct-chooser .acct-body { padding: 1.1rem 1rem .9rem; }
    .acct-chooser .acct-options { gap: .6rem; margin: .7rem 0 .6rem; }
    .acct-chooser .acct-opt { padding: .75rem 1rem; }
    .acct-chooser .acct-opt-ico { width: 46px; height: 46px; font-size: 1.2rem; }
    .acct-chooser .acct-opt-desc { font-size: .8rem; line-height: 1.3; }
}

/* credential / email forms */
.acct-card-form { max-width: 420px; }
.goback { display: inline-flex; align-items: center; gap: 11px; background: none; border: none; cursor: pointer;
    color: var(--acad-blue); font-weight: 700; font-size: .95rem; padding: 0; }
.goback-circle { width: 44px; height: 44px; border-radius: 50%; background: #fff; flex: none;
    box-shadow: 0 4px 14px rgba(15,40,90,.16); display: inline-flex; align-items: center; justify-content: center;
    color: var(--acad-blue); font-size: 1rem; transition: transform .15s var(--fluid), box-shadow .15s var(--fluid); }
.goback:hover .goback-circle { transform: translateX(-3px); box-shadow: 0 7px 20px rgba(15,40,90,.22); }
.acct-card-form .goback { margin: 0 0 .6rem -2px; color: #fff; }
.acct-form-head { text-align: center; margin: .4rem 0 1.4rem; }
.acct-form-ico { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto .8rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; }
.acct-form-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--text-heading); }
.acct-form-sub { font-size: .88rem; color: var(--text-muted); margin-top: .3rem; }
.acct-card-form.student .acct-form-ico { background: linear-gradient(135deg, var(--acad-blue), #3a74f2); }
.acct-card-form.teacher .acct-form-ico { background: linear-gradient(135deg, var(--acad-green), #22c55e); }
.acct-card-form.admin .acct-form-ico { background: linear-gradient(135deg, var(--acad-purple), #9333ea); }
.acct-card-form.student .login-btn { background: linear-gradient(135deg, var(--acad-blue), #3a74f2); }
.acct-card-form.teacher .login-btn { background: linear-gradient(135deg, var(--acad-green), #22c55e); }
.acct-card-form.admin .login-btn { background: linear-gradient(135deg, var(--acad-purple), #9333ea); }
.acct-card-form .login-input-wrap input:focus { border-color: var(--acad-blue); box-shadow: 0 0 0 3px rgba(30,86,214,.12); }
/* Keep all three portal sign-in screens the same size on desktop: the student form
   has one fewer field, so reserve the exact height of one input row to match
   teacher/admin. Hidden on phones, where forms naturally stack. */
.acct-form-spacer { display: none; }
@media (min-width: 768px) {
    .acct-form-spacer { display: block; height: calc(2.1rem + 1.21rem + 3px); margin-bottom: 1rem; }
}

/* Compact "We're here to help!" contact block on the login form screens only, so the
   form + help fit the viewport with no scroll (drop secondary sub/notes, shrink cards). */
.acct-card-form .att-contact { margin-top: 1.3rem; padding: 1.2rem 1.2rem 1.1rem; border-radius: 18px; }
.acct-card-form .att-contact-head { margin-bottom: .85rem; }
.acct-card-form .att-contact-badge { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: .4rem; }
.acct-card-form .att-contact-title { font-size: 1.25rem; }
.acct-card-form .att-contact-sub { display: none; }
.acct-card-form .att-contact-note { display: none; }
.acct-card-form .att-contact-list { gap: .55rem; max-width: none; }
.acct-card-form .att-contact-btn { padding: .7rem .95rem; gap: .8rem; min-height: 0; }
.acct-card-form .att-contact-ic { width: 42px; height: 42px; font-size: 1.05rem; }
.acct-card-form .att-contact-val { font-size: 1.02rem; }
.acct-card-form .att-contact-val-email { font-size: .9rem; }
.acct-card-form .att-contact-zbtn { font-size: .82rem; padding: .45rem .7rem; }

/* DESKTOP: the two pre-login form screens fit the viewport with NO scroll — a two-column
   card (sign-in form on the left, the compact help block on the right). */
@media (min-width: 768px) {
    .acct-view:not(.acct-chooser):not(.att-view) {
        height: 100vh; overflow: hidden; padding: clamp(16px, 4vh, 40px);
    }
    .acct-card-form {
        max-width: min(900px, 95vw);
        display: grid; grid-template-columns: 1.02fr 1fr;
        column-gap: clamp(1.6rem, 3vw, 2.6rem); align-items: center;
        padding: clamp(1.6rem, 3.5vh, 2.4rem) clamp(1.7rem, 3vw, 2.2rem);
    }
    .acct-card-form .acct-deco { z-index: 0; }
    .acct-card-form .goback { grid-column: 1 / -1; }
    .acct-card-form .acct-form-main { grid-column: 1; min-width: 0; }
    .acct-card-form .acct-form-head { margin-top: 0; }
    .acct-card-form #studentLoginContact { grid-column: 2; min-width: 0; align-self: center; }
    .acct-card-form .att-contact { margin-top: 0; }
}

/* DESKTOP short-height fallback — trim paddings/cards so the form screen still fits
   the (overflow:hidden) viewport on short laptops without clipping. */
@media (min-width: 768px) and (max-height: 660px) {
    .acct-card-form { padding: 1.1rem 1.7rem; }
    .acct-card-form .acct-form-head { margin-bottom: 1rem; }
    .acct-card-form .acct-form-ico { width: 50px; height: 50px; margin-bottom: .5rem; }
    .acct-card-form .att-contact-btn { padding: .55rem .9rem; }
    .acct-card-form .att-contact-ic { width: 38px; height: 38px; }
}

/* PHONE: the form screens fit the viewport with NO scroll (strict 100svh + overflow
   hidden, pinned to the top so the form is never clipped). The help block becomes a
   compact 2-up grid (the wide Zoom row spans full width) so everything fits. */
@media (max-width: 767px) {
    .acct-view:not(.acct-chooser):not(.att-view) {
        height: 100svh; overflow: hidden; align-items: flex-start; padding: 14px 12px;
    }
    .acct-card-form { padding: 1.2rem 1.1rem 1.1rem; }
    .acct-card-form .goback { margin-bottom: .4rem; }
    .acct-card-form .acct-form-head { margin: .15rem 0 .8rem; }
    .acct-card-form .acct-form-ico { width: 46px; height: 46px; margin-bottom: .45rem; font-size: 1.3rem; }
    .acct-card-form .acct-form-title { font-size: 1.2rem; }
    .acct-card-form .acct-form-sub { font-size: .82rem; }
    .acct-card-form .att-contact { margin-top: .85rem; padding: .9rem .85rem .85rem; }
    .acct-card-form .att-contact-head { margin-bottom: .65rem; }
    .acct-card-form .att-contact-badge { width: 38px; height: 38px; font-size: 1rem; margin-bottom: .3rem; }
    .acct-card-form .att-contact-title { font-size: 1.08rem; }
    .acct-card-form .att-contact-list { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .acct-card-form .att-contact-zoom { grid-column: 1 / -1; }
    .acct-card-form .att-contact-btn { padding: .6rem .7rem; gap: .6rem; }
    .acct-card-form .att-contact-ic { width: 38px; height: 38px; font-size: 1rem; }
    .acct-card-form .att-contact-val { font-size: .92rem; }
    .acct-card-form .att-contact-val-email { font-size: .82rem; }
}

/* Short phones — shrink further so the form screen still fits with no scroll. */
@media (max-width: 767px) and (max-height: 680px) {
    .acct-card-form .acct-form-ico { width: 40px; height: 40px; margin-bottom: .35rem; font-size: 1.15rem; }
    .acct-card-form .acct-form-head { margin: .1rem 0 .6rem; }
    .acct-card-form .att-contact { margin-top: .6rem; padding: .75rem .75rem .7rem; }
    .acct-card-form .att-contact-head { margin-bottom: .5rem; }
    .acct-card-form .att-contact-badge { display: none; }
    .acct-card-form .att-contact-btn { padding: .5rem .6rem; }
    .acct-card-form .att-contact-ic { width: 34px; height: 34px; }
}

/* student attendance view */
.att-view { align-items: flex-start; padding-top: 40px; padding-bottom: 40px; }
.att-card { position: relative; width: 100%; max-width: 760px; background: #fff; border-radius: 22px;
    box-shadow: var(--shadow-lg); padding: 1.8rem 1.8rem 2rem; }
.att-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.att-id { display: flex; align-items: center; gap: .85rem; }
.att-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: linear-gradient(135deg, var(--acad-blue), #3a74f2); }
.att-avatar.sm { width: 36px; height: 36px; font-size: .82rem; }
.att-cell-name { display: flex; align-items: center; gap: .6rem; }
.att-cell-strong { font-weight: 700; color: var(--text-heading); }
.att-name-link { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 700; color: var(--acad-blue); cursor: pointer; text-align: left; transition: color .15s; }
.att-name-link::after { content: "\f2bd"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .72rem; opacity: 0; transition: opacity .15s; }
.att-name-link:hover { text-decoration: underline; }
.att-name-link:hover::after { opacity: .65; }
.att-cell-sub { font-size: .78rem; color: var(--text-muted); }
.att-rate { font-weight: 800; color: var(--text-heading); }
.att-row { cursor: pointer; }
.att-row:hover { background: #f8fafc; }
.topbar-search { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .8rem; font-size: .85rem; min-width: 220px; }
.topbar-search:focus { outline: none; border-color: var(--acad-blue); }
.att-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--text-heading); }
.att-role { font-size: .78rem; font-weight: 700; color: var(--acad-blue); text-transform: uppercase; letter-spacing: .08em; }
.att-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1.3rem; }
.att-stat { border-radius: 14px; padding: 1rem; text-align: center; border: 1px solid var(--border); background: #f8fafc;
    font: inherit; cursor: pointer; width: 100%; transition: transform .12s, box-shadow .12s, filter .12s; }
.att-stat:hover { filter: brightness(.985); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.att-stat:active { transform: translateY(1px); }
.att-stat.is-active { box-shadow: 0 0 0 2px var(--text-heading) inset; }
.att-stat.present.is-active { box-shadow: 0 0 0 2px var(--emerald-dark) inset; }
.att-stat.absent.is-active { box-shadow: 0 0 0 2px var(--red) inset; }
.att-stat .n { font-size: 1.7rem; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; }
.att-stat .l { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: .4rem; }
.att-stat.present { background: var(--emerald-soft); border-color: var(--emerald-border); }
.att-stat.present .n { color: var(--emerald-dark); }
.att-stat.absent { background: var(--red-soft); border-color: #f6cfca; }
.att-stat.absent .n { color: var(--red); }
.att-stat.total .n { color: var(--text-heading); }
.att-classes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.3rem; font-size: .85rem; }
.att-classes-label { font-weight: 700; color: var(--text-muted); margin-right: .3rem; }
.att-chip { background: #eef3fe; color: var(--acad-blue); border: 1px solid #d7e3fc; border-radius: 999px; padding: .3rem .8rem; font-weight: 700; font-size: .8rem; }
.att-empty { color: var(--text-faint); }
.att-table-wrap { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.att-table { width: 100%; border-collapse: collapse; }
.att-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
    background: #f7f9fc; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.att-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--text-body); }
.att-table tr:last-child td { border-bottom: none; }
.att-sub { color: var(--text-faint); font-size: .8rem; }
.att-chip-lvl { display: inline-block; background: #fff4e5; color: #b45309; border: 1px solid #fde2bd; border-radius: 999px; padding: .1rem .5rem; font-weight: 700; font-size: .72rem; vertical-align: middle; }
.att-sess-tag { display: inline-flex; align-items: center; gap: .28rem; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; border-radius: 999px; padding: .1rem .5rem; font-weight: 700; font-size: .72rem; vertical-align: middle; white-space: nowrap; }
.att-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .7rem; font-size: .76rem; font-weight: 800; }
.att-pill.present { background: var(--emerald-soft); color: var(--emerald-dark); }
.att-pill.absent { background: var(--red-soft); color: var(--red); }
.att-pill.x { background: rgba(100,116,139,.18); color: #64748b; }
.att-empty-box { text-align: center; padding: 2.4rem 1rem; color: var(--text-faint); }
.att-empty-box i { font-size: 1.8rem; margin-bottom: .6rem; }
.att-empty-box p { font-size: .9rem; }

/* student "My classes" with Join (Zoom) links */
.att-classes-block { margin-bottom: 1.3rem; }
.att-class-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.att-class-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; background: #f8fafc; }
.att-class-info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.att-class-name { font-weight: 700; color: var(--text-heading); }
.att-class-sched { font-size: .8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; }
.att-join-btn { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    background: var(--emerald, #059669); color: #fff; border-radius: 10px; padding: .55rem .95rem;
    font-weight: 700; font-size: .85rem; text-decoration: none; transition: filter .15s; }
.att-join-btn:hover { filter: brightness(1.07); }
.att-class-nolink { font-size: .78rem; color: var(--text-faint); white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.att-class-row.is-live { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 1px #bbf7d0 inset; }
.att-live-badge { display: inline-block; margin-left: .4rem; background: #16a34a; color: #fff;
    font-size: .62rem; font-weight: 800; letter-spacing: .04em; padding: .12rem .42rem; border-radius: 6px; vertical-align: middle; }
.att-up-list { display: flex; flex-direction: column; gap: .55rem; margin-top: .5rem; }
.att-up-row { display: flex; align-items: center; gap: .85rem; border: 1px solid var(--border);
    border-radius: 12px; padding: .75rem 1rem; background: #f8fafc; }
.att-up-cal { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center;
    background: var(--acad-blue, #2563eb); color: #fff; font-size: .95rem; }
.att-up-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.att-up-when { font-size: .8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; }
/* Today's class / Next class mini cards — replace the per-class join list (joining now
   lives in the live spotlight above; past attendance is summarised in the Present stat). */
.att-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: 1.3rem; }
.att-mini-card { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; background: #f8fafc;
    display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.att-mini-card.is-live { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 1px #bbf7d0 inset; }
.att-mini-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; }
.att-mini-name { font-weight: 700; color: var(--text-heading); overflow-wrap: anywhere; }
.att-mini-when { font-size: .82rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.att-mini-empty { font-size: .85rem; color: var(--text-faint); }
.att-mini-card.is-tap { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.att-mini-card.is-tap:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,31,58,.09); }
.att-mini-card.is-tap:active { transform: translateY(0); }
.att-mini-card.is-tap:focus-visible { outline: 2px solid var(--acad-blue, #2563eb); outline-offset: 2px; }
.att-mini-cta { margin-top: .2rem; font-size: .76rem; font-weight: 700; color: var(--acad-blue, #2563eb);
    display: inline-flex; align-items: center; gap: .35rem; }
.att-mini-today.is-live .att-mini-cta { color: #16a34a; }
/* Class sheet — tap a Today's/Next card to view the class + Join (mobile-first) */
.att-sheet { text-align: left; }
.att-sheet-name { font-size: 1.15rem; font-weight: 800; color: var(--text-heading); margin-bottom: .55rem; overflow-wrap: anywhere; }
.att-sheet-badge { display: inline-flex; align-items: center; gap: .4rem; background: #16a34a; color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: .26rem .62rem; border-radius: 999px; }
.att-sheet-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: liveNowPulse 1.4s ease-out infinite; }
.att-sheet-when, .att-sheet-sched { font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: .45rem; margin-top: .55rem; }
.att-sheet-join { margin-top: 1.15rem; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
    background: var(--emerald, #059669); color: #fff; border-radius: 12px; padding: .9rem 1rem; font-weight: 800; text-decoration: none; transition: filter .15s; }
.att-sheet-join:hover { filter: brightness(1.07); }
.att-sheet-soon { margin-top: 1.15rem; text-align: center; color: var(--text-faint); font-size: .82rem;
    display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .85rem; border: 1px dashed var(--border); border-radius: 12px; }
.att-history { margin-top: 1.1rem; }

/* ── Add-student-to-class searchable picker ─────────────────────────────────── */
.enroll-search { position: relative; }
.enroll-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; }
.enroll-search input { width: 100%; padding: .6rem .8rem .6rem 2.1rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.enroll-search input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); }
.enroll-list { margin: .6rem 0 .2rem; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.enroll-row { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; background: #fff; font: inherit; transition: background .12s, border-color .12s; }
.enroll-row:hover { background: #f8fafc; }
.enroll-row.selected { border-color: var(--emerald); background: var(--emerald-soft); }
.enroll-av { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--emerald-soft); color: var(--emerald-dark); font-weight: 800; font-size: .8rem; }
.enroll-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.enroll-name { font-weight: 700; color: var(--text-heading); }
.enroll-sub { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enroll-tick { color: var(--emerald-dark); font-size: 1.05rem; flex: none; }
.enroll-empty { padding: 1.2rem; text-align: center; color: var(--text-muted); font-size: .88rem; }

/* ── Suspension attribution banner (admin profile / staff wizard) ───────────── */
.suspend-banner { display: flex; gap: .7rem; align-items: flex-start; margin-top: 12px; padding: .8rem .95rem; border: 1px solid #fca5a5; background: #fef2f2; border-radius: 12px; }
.suspend-banner-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fee2e2; color: #dc2626; }
.suspend-banner-body { min-width: 0; }
.suspend-banner-title { font-weight: 700; color: #b91c1c; font-size: .9rem; }
.suspend-banner-reason { margin-top: .25rem; color: #7f1d1d; font-size: .86rem; line-height: 1.5; white-space: pre-wrap; }
.suspend-banner-label { font-weight: 800; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; color: #dc2626; margin-right: .3rem; }

/* ── Suspended-account notice (student portal) ──────────────────────────────── */
.att-suspend-reason { margin-top: 1rem; border: 1px solid #fde0c4; background: #fff8f1; border-radius: 12px; padding: .85rem 1rem; }
.att-suspend-label { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #c2570c; margin-bottom: .25rem; }
.att-suspend-reason p { margin: 0; color: var(--text-heading); font-size: .92rem; line-height: 1.5; white-space: pre-wrap; }

/* ── Student contact block (WhatsApp / call — shown on portal & blocked screens) ── */
.att-contact { margin-top: 2.75rem; border: 1px solid #e4ecf6; border-radius: 22px; padding: 2rem 1.8rem 1.9rem;
    background: #fff; box-shadow: 0 12px 34px rgba(30,58,95,.08); }
.att-contact-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 1.6rem; }
.att-contact-badge { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #e9f1ff; color: #2563eb; font-size: 1.45rem; margin-bottom: .9rem; box-shadow: 0 8px 18px rgba(37,99,235,.18); }
.att-contact-title { font-size: 1.85rem; font-weight: 900; color: #15233b; letter-spacing: -.02em; line-height: 1.1; }
.att-contact-sub { font-size: .95rem; color: #5b7088; line-height: 1.45; margin-top: .4rem; }
/* Fluid 2-up grid: cards auto-fit (2 per row on roomy screens, 1 when tight) and the
   list is capped + centered so it never spreads past a comfortable 2-column layout.
   No fixed column counts — it adapts continuously at every width. */
/* Icon-only contact row: just the colored circular icons, centered & wrapping (the text
   labels/values/buttons are hidden — a tooltip on each icon keeps it identifiable). */
.att-contact-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    gap: 1.4rem; max-width: 720px; margin: 0 auto; }
.att-contact-btn { display: flex; align-items: center; justify-content: center; padding: 0; border: none;
    background: transparent; text-decoration: none; transition: transform .15s; }
.att-contact-btn:hover { transform: translateY(-3px); }
.att-contact-btn:hover .att-contact-ic { box-shadow: 0 12px 24px rgba(15,31,58,.26); }
.att-contact-btn:focus-visible { outline: none; }
.att-contact-btn:focus-visible .att-contact-ic { outline: 3px solid #2563eb; outline-offset: 3px; }
.att-contact-ic { flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: #fff; font-size: 1.7rem; box-shadow: 0 7px 16px rgba(15,31,58,.16);
    transition: box-shadow .15s; }
.att-contact-txt { display: none; }
.att-contact-label { font-size: 1.02rem; font-weight: 800; color: #15233b; letter-spacing: -.01em; }
/* Phone / email values WRAP instead of truncating, so a long number is never cut off. */
.att-contact-val { font-size: 1.25rem; font-weight: 900; letter-spacing: -.015em; color: #2563eb; line-height: 1.18;
    overflow-wrap: anywhere; }
.att-contact-val-email { font-size: 1rem; color: #15233b; }
.att-contact-note { font-size: .82rem; color: #5b7088; line-height: 1.35; overflow-wrap: anywhere; }
.att-contact-zbtn { display: flex; align-items: center; justify-content: center; gap: .4rem; align-self: stretch;
    text-align: center; margin: .1rem 0; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; font-weight: 800;
    font-size: .9rem; line-height: 1.2; padding: .55rem .8rem; border-radius: 11px; box-shadow: 0 6px 14px rgba(37,99,235,.28); }
.att-contact-zbtn i { flex: none; }
.att-contact-call .att-contact-ic { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.att-contact-call .att-contact-val { color: #2563eb; }
.att-contact-wa .att-contact-ic { background: linear-gradient(135deg, #25d366, #1eb955); }
.att-contact-wa .att-contact-val { color: #18a046; }
.att-contact-wa .att-contact-label { color: #157a39; }
.att-contact-zoom .att-contact-ic { background: linear-gradient(135deg, #2D8CFF, #0b6bdb); }
.att-contact-email .att-contact-ic { background: linear-gradient(135deg, #1e293b, #334155); }
@media (max-width: 560px) {
    .att-contact { padding: 1.35rem 1rem 1.25rem; border-radius: 18px; margin-top: 2rem; }
    .att-contact-head { margin-bottom: 1.1rem; }
    .att-contact-badge { width: 44px; height: 44px; font-size: 1.15rem; margin-bottom: .55rem; }
    .att-contact-title { font-size: 1.3rem; }
    .att-contact-sub { font-size: .84rem; }
    /* Icon-only row stays centered & wrapping on phones, just a touch smaller. */
    .att-contact-list { gap: 1.1rem; max-width: none; }
    .att-contact-btn { padding: 0; }
    .att-contact-ic { width: 54px; height: 54px; font-size: 1.4rem; box-shadow: 0 4px 11px rgba(15,31,58,.16); }
    .att-contact-label { font-size: .9rem; }
    .att-contact-val { font-size: 1.05rem; }
    .att-contact-val-email { font-size: .88rem; }
    .att-contact-note { font-size: .74rem; }
    .att-contact-zbtn { font-size: .82rem; padding: .45rem .72rem; }
}

/* ── Student LIVE-class spotlight hero (animated "Join now") ─────────────────── */
.att-live-hero { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.att-live-spot { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.1rem;
    padding: 1.4rem 1.5rem; border-radius: 20px; color: #fff;
    background: linear-gradient(135deg, #0b1f3a 0%, #15294d 45%, #3a1330 100%);
    box-shadow: 0 18px 44px rgba(225, 29, 72, .28), inset 0 0 0 1px rgba(255,255,255,.06);
    animation: lhEnter .5s cubic-bezier(.2,.8,.25,1) both; }
/* head row: orb + body (+ the single-level Join button on the right) */
.lh-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.2rem; }
@keyframes lhEnter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
/* sweeping glow behind the card */
.lh-glow { position: absolute; inset: -40% -10%; pointer-events: none; z-index: 0;
    background: radial-gradient(closest-side, rgba(255,77,94,.35), transparent 70%);
    animation: lhGlow 5s ease-in-out infinite; }
@keyframes lhGlow { 0%,100% { transform: translateX(-12%) scale(1); opacity: .65; } 50% { transform: translateX(12%) scale(1.12); opacity: 1; } }
/* pulsing orb with expanding rings */
.lh-orb { position: relative; z-index: 1; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, #ff4d5e, #e11d48); box-shadow: 0 8px 26px rgba(225,29,72,.6); }
.lh-orb i { position: relative; z-index: 2; margin-left: 3px; }
.lh-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,77,94,.6); animation: lhRing 1.8s ease-out infinite; }
.lh-ring2 { animation-delay: .9s; }
@keyframes lhRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } }
.lh-body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.mgr-grants { display: flex; flex-wrap: wrap; gap: .35rem; }
.mgr-grants .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem; border-radius: 999px;
    background: rgba(59,130,246,.12); color: #1d4ed8; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.mgr-grants .chip i { font-size: .7rem; opacity: .85; }
.lh-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem; border-radius: 999px;
    background: rgba(255,255,255,.14); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lh-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5d6c; box-shadow: 0 0 0 0 rgba(255,93,108,.7); animation: liveNowPulse 1.4s ease-out infinite; }
.lh-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.15rem; margin: .55rem 0 .2rem; letter-spacing: -.01em; }
.lh-name { font-weight: 700; font-size: .95rem; color: #e8eefb; overflow-wrap: anywhere; }
.lh-sched { margin-top: .3rem; font-size: .82rem; color: #9fb2d4; display: inline-flex; align-items: center; gap: .4rem; }
.lh-sched i { color: #ff8a96; }
.lh-join { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.8rem; border-radius: 14px; text-decoration: none; white-space: nowrap;
    background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-weight: 800; font-size: 1.02rem; letter-spacing: .02em;
    box-shadow: 0 10px 30px rgba(16,185,129,.5); animation: joinPop 1.2s ease-in-out infinite; }
.lh-join:hover { filter: brightness(1.07); }
.lh-soon { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.3rem; border-radius: 12px; background: rgba(255,255,255,.1); color: #cdd9ef; font-weight: 700; font-size: .88rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .att-live-spot, .lh-glow, .lh-ring, .lh-dot, .lh-join, .lh-lvl-go { animation: none; transition: none; }
}
/* Multi-level live class: a full-width grid of clean, clickable level boxes below
   the title (so the head text never gets squeezed). Each box stacks the level name
   over its call-to-action; joinable boxes are real links, the rest are disabled. */
.lh-pick { margin-top: .45rem; font-size: .8rem; color: #9fb2d4; font-weight: 700; }
.lh-levels { position: relative; z-index: 1; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .7rem; }
.lh-lvl { display: flex; flex-direction: column; gap: .5rem; min-width: 0;
    padding: .9rem 1rem; border-radius: 14px; text-decoration: none;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); }
.lh-lvl-name { font-weight: 800; font-size: .96rem; color: #fff; overflow-wrap: anywhere; line-height: 1.25; }
.lh-lvl-cta { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .82rem; letter-spacing: .01em; }
.lh-lvl-go { cursor: pointer; color: #fff;
    background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(5,150,105,.14));
    border-color: rgba(16,185,129,.45);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background .15s ease; }
.lh-lvl-go .lh-lvl-cta { color: #4ade80; }
.lh-lvl-go:hover { transform: translateY(-2px); border-color: rgba(16,185,129,.7);
    background: linear-gradient(135deg, rgba(16,185,129,.32), rgba(5,150,105,.2));
    box-shadow: 0 12px 28px rgba(16,185,129,.32); }
.lh-lvl-off { color: #cdd9ef; }
.lh-lvl-off .lh-lvl-name { color: #e4ecfb; }
.lh-lvl-off .lh-lvl-cta { color: #9fb2d4; }
.att-sheet-pick { margin-top: 1.15rem; font-size: .82rem; color: var(--text-faint); font-weight: 700; text-align: center; }
.att-sheet-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: .6rem; margin-top: .6rem; }
/* Sheet variant: dark-on-light boxes (the sheet sits on a light card, not the hero). */
.att-sheet-lvl { background: var(--surface-2, #f3f6fc); border: 1px solid var(--border); }
.att-sheet-lvl .lh-lvl-name { color: var(--text-heading); }
.att-sheet-lvl.lh-lvl-go { background: var(--emerald-soft, rgba(5,150,105,.1)); border-color: rgba(5,150,105,.4); }
.att-sheet-lvl.lh-lvl-go .lh-lvl-cta { color: var(--emerald, #059669); }
.att-sheet-lvl.lh-lvl-go:hover { background: rgba(5,150,105,.16); border-color: rgba(5,150,105,.6);
    box-shadow: 0 10px 22px rgba(5,150,105,.18); }
.att-sheet-lvl.lh-lvl-off { color: var(--text-muted); }
.att-sheet-lvl.lh-lvl-off .lh-lvl-cta { color: var(--text-faint); }
/* Class wizard — per-level link rows (level name · link input · save/remove). */
.cll-add { flex-wrap: nowrap; }
.cll-add .cll-sel { flex: 1 1 30%; min-width: 120px; }
.cll-add .cll-add-link { flex: 2 1 40%; min-width: 140px; background: #0a1626; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #e6eef9; padding: .45rem .55rem; font-size: .85rem; }
.cll-row { gap: .6rem; flex-wrap: wrap; }
.cll-row .cll-name { flex: 0 0 auto; }
.cll-row .cll-link { flex: 1 1 160px; min-width: 140px; background: #0a1626; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #e6eef9; padding: .4rem .55rem; font-size: .82rem; }
@media (max-width: 560px) { .cll-add { flex-wrap: wrap; } }
/* due-soon renewal banner (student keeps full access) — same visual language as the
   blocked payment screen (alert banner + amount-due card + branded method cards) */
.att-renew { margin-bottom: 1.4rem; }
.att-renew .spm-list { gap: .8rem; }

/* "Next payment" line — student portal, active (paying) students */
.att-nextpay { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.2rem;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: .8rem 1.1rem;
    color: #166534; font-weight: 600; }

/* Store-credit (wallet) banner — student portal */
.att-wallet { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.2rem;
    background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px; padding: .9rem 1.1rem; }
.att-wallet-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #ede9fe; color: #7c3aed; font-size: 1.05rem; }
.att-wallet-body { min-width: 0; }
.att-wallet-amt { color: #5b21b6; font-weight: 800; font-size: 1.05rem; }
.att-wallet-note { color: #6d28d9; font-size: .85rem; margin-top: .15rem; }

/* "Payment proof received — allow up to 24h" banner — student portal */
.att-proof-pending { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.2rem;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px; padding: 1rem 1.15rem; }
.att-proof-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 1rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb); }
.att-proof-title { font-weight: 700; color: #1e3a8a; margin-bottom: .15rem; }
.att-proof-sub { color: #1e40af; font-size: .9rem; line-height: 1.45; }
.att-proof-sub b { font-weight: 700; }
/* Confirmed variant — payment verified, "You are good to go." (green check) */
.att-proof-confirmed { background: #ecfdf5; border-color: #a7f3d0; align-items: center; }
.att-proof-confirmed .att-proof-ico { background: linear-gradient(135deg, #34d399, #059669); }
.att-proof-confirmed .att-proof-title { color: #065f46; margin-bottom: 0; font-size: 1rem; }
/* Rejected variant — verification failed, "please resubmit" (red cross) */
.att-proof-rejected { background: #fef2f2; border-color: #fecaca; }
.att-proof-rejected .att-proof-ico { background: linear-gradient(135deg, #f87171, #dc2626); }
.att-proof-rejected .att-proof-title { color: #991b1b; }
.att-proof-rejected .att-proof-sub { color: #b91c1c; }

/* One-time "Payment received!" confirmation header — student portal.
   Mobile: stacked (icon + copy, then the two stat cells). Desktop (≥720px): the
   copy and stats sit side-by-side so the card stays low and wide (Windows view). */
.spr { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 16px;
    padding: 1.05rem 1.15rem; margin-bottom: 1.2rem; }
.spr-top { display: flex; align-items: flex-start; gap: .85rem; }
.spr-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 1.15rem;
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: 0 4px 12px rgba(5,150,105,.25); }
.spr-body { flex: 1; min-width: 0; }
.spr-titlerow { display: flex; align-items: center; gap: .6rem; }
.spr-title { font-weight: 800; font-size: 1.05rem; color: #065f46; }
.spr-paid { margin-left: auto; flex: none; font-size: .68rem; font-weight: 800;
    letter-spacing: .06em; color: #047857; background: #d1fae5; border: 1px solid #a7f3d0;
    border-radius: 999px; padding: .18rem .6rem; }
.spr-x { flex: none; border: 0; background: none; color: #6b7280; font-size: 1rem;
    cursor: pointer; padding: .15rem .3rem; border-radius: 8px; line-height: 1; }
.spr-x:hover { background: #dcfce7; color: #065f46; }
.spr-sub { color: #047857; font-size: .92rem; line-height: 1.45; margin-top: .2rem; }
.spr-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: .9rem;
    border-top: 1px solid #bbf7d0; padding-top: .9rem; }
.spr-stat { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.spr-stat + .spr-stat { border-left: 1px solid #bbf7d0; }
.spr-stat i { color: #059669; font-size: 1.05rem; }
.spr-stat-l { font-size: .72rem; font-weight: 600; color: #6b7280; letter-spacing: .02em; }
.spr-stat-v { font-weight: 800; color: #065f46; font-size: .98rem; }
@media (min-width: 720px) {
    .spr { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 1.35rem; }
    .spr-top { flex: 1 1 auto; align-items: center; }
    .spr-stats { flex: none; margin-top: 0; border-top: 0; padding-top: 0;
        border-left: 1px solid #bbf7d0; padding-left: 1.25rem; gap: 1.25rem; }
    .spr-stat { justify-content: flex-start; }
    .spr-stat + .spr-stat { border-left: 0; }
}

/* "You have free access!" card — student portal (Free Access grants).
   Same responsive pattern as .spr: stacked on phones (mock), copy | stats
   side-by-side on desktop/Windows widths. Blue palette per the mock. */
.sfa { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 16px;
    padding: 1.05rem 1.15rem; margin-bottom: 1.2rem; }
.sfa-top { display: flex; align-items: flex-start; gap: .85rem; }
.sfa-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 1.25rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 12px rgba(37,99,235,.25); }
.sfa-body { flex: 1; min-width: 0; }
.sfa-titlerow { display: flex; align-items: center; gap: .6rem; }
.sfa-title { font-weight: 800; font-size: 1.05rem; color: #1e3a8a; }
.sfa-title span { color: #2563eb; }
.sfa-pill { margin-left: auto; flex: none; font-size: .68rem; font-weight: 800;
    letter-spacing: .06em; color: #2563eb; background: #fff; border: 1px solid #93c5fd;
    border-radius: 999px; padding: .18rem .6rem; }
.sfa-sub { color: #1e40af; font-size: .92rem; line-height: 1.45; margin-top: .2rem; }
.sfa-sub b { font-weight: 800; color: #2563eb; }
.sfa-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: .9rem;
    border-top: 1px solid #bfdbfe; padding-top: .9rem; }
.sfa-stat { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.sfa-stat + .sfa-stat { border-left: 1px solid #bfdbfe; }
.sfa-stat i { color: #2563eb; font-size: 1.05rem; }
.sfa-stat-l { font-size: .72rem; font-weight: 700; color: #6b7280;
    letter-spacing: .04em; text-transform: uppercase; }
.sfa-stat-v { font-weight: 800; color: #1e3a8a; font-size: .98rem; }
@media (min-width: 720px) {
    .sfa { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 1.35rem; }
    .sfa-top { flex: 1 1 auto; align-items: center; }
    .sfa-stats { flex: none; margin-top: 0; border-top: 0; padding-top: 0;
        border-left: 1px solid #bfdbfe; padding-left: 1.25rem; gap: 1.25rem; }
    .sfa-stat { justify-content: flex-start; }
    .sfa-stat + .sfa-stat { border-left: 0; }
}

/* "Payment due soon!" card — student portal DUE SOON standing (owner mock).
   Orange palette; same responsive pattern as .spr/.sfa: stacked on phones,
   copy | stats side-by-side on desktop/Windows widths; the "Click here to pay"
   button stays full-width and opens the payment overlay sheet (.sod-payoverlay). */
.sds { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 16px;
    padding: 1.05rem 1.15rem; margin-bottom: 1.2rem; }
.sds-top { display: flex; align-items: flex-start; gap: .85rem; }
.sds-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 1.2rem;
    background: linear-gradient(135deg, #fb923c, #ea580c);
    box-shadow: 0 4px 12px rgba(234,88,12,.28); }
.sds-body { flex: 1; min-width: 0; }
.sds-titlerow { display: flex; align-items: center; gap: .6rem; }
.sds-title { font-weight: 800; font-size: 1.05rem; color: #ea580c; }
.sds-pill { margin-left: auto; flex: none; font-size: .68rem; font-weight: 800;
    letter-spacing: .06em; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d;
    border-radius: 999px; padding: .18rem .6rem; }
.sds-x { flex: none; border: 0; background: none; color: #6b7280; font-size: 1rem;
    cursor: pointer; padding: .15rem .3rem; border-radius: 8px; line-height: 1; }
.sds-x:hover { background: #ffedd5; color: #9a3412; }
.sds-sub { color: #431407; font-size: .92rem; line-height: 1.5; margin-top: .25rem; }
.sds-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: .9rem;
    border-top: 1px solid #fed7aa; padding-top: .9rem; }
.sds-stat { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.sds-stat + .sds-stat { border-left: 1px solid #fed7aa; }
.sds-stat i { color: #ea580c; font-size: 1.05rem; }
.sds-stat-l { font-size: .72rem; font-weight: 700; color: #6b7280; letter-spacing: .02em; }
.sds-stat-v { font-weight: 800; color: #431407; font-size: .98rem; }
.sds-pay { display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; margin-top: .95rem; border: 0; border-radius: 12px; cursor: pointer;
    padding: .85rem 1rem; font: inherit; font-weight: 800; font-size: .98rem; color: #fff;
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 6px 16px rgba(234,88,12,.3); }
.sds-pay:hover { filter: brightness(1.06); }
.sds-pay .fa-chevron-right { font-size: .8rem; opacity: .9; }
@media (min-width: 720px) {
    .sds-main { display: flex; align-items: center; gap: 1.25rem; }
    .sds-top { flex: 1 1 auto; align-items: center; }
    .sds-stats { flex: none; margin-top: 0; border-top: 0; padding-top: 0;
        border-left: 1px solid #fed7aa; padding-left: 1.25rem; gap: 1.25rem; }
    .sds-stat { justify-content: flex-start; }
    .sds-stat + .sds-stat { border-left: 0; }
}


/* per-student attendance filter bar (staff modal) */
.att-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.att-presets { display: inline-flex; gap: .3rem; background: #eef2f7; border-radius: 10px; padding: .25rem; }
.att-preset { border: none; background: transparent; color: var(--text-muted); font-weight: 700;
    font-size: .82rem; padding: .4rem .8rem; border-radius: 8px; cursor: pointer; }
.att-preset.active { background: var(--emerald); color: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.att-custom { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-muted); }
.att-custom input { padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.att-filter-bar .att-download, .att-filter-bar #attDownload { margin-left: auto; }

/* "everyone" attendance grid export toolbar (admin tab) */
.att-grid-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .8rem; margin-bottom: 1rem; }
.att-grid-bar-label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
    color: var(--text-heading); }
.att-grid-bar-label i { color: var(--text-muted); }
.att-grid-bar-fields { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.att-grid-bar-fields label { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem;
    color: var(--text-muted); font-weight: 600; }
.att-grid-bar-fields input[type="date"],
.att-grid-bar-fields select { padding: .4rem .55rem; border: 1px solid var(--border);
    border-radius: 8px; font: inherit; background: #fff; }

/* financial-standing pill (attendance) */
.att-standing { display: inline-flex; align-items: center; border-radius: 999px; padding: .2rem .6rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .01em; }
.att-standing.active { background: var(--emerald-soft); color: var(--emerald-dark); }
.att-standing.due { background: #fef3c7; color: #92400e; }
.att-standing.overdue { background: var(--red-soft); color: var(--red); }
.att-standing.churned { background: #ede9fe; color: #6d28d9; }
.att-standing.cancelled { background: rgba(148,163,184,.18); color: #475569; }
.att-standing.refund { background: #ffe4e6; color: #be123c; }
.att-standing.free { background: #ccfbf1; color: #0f766e; }
.att-standing.paused { background: rgba(56,189,248,.16); color: #0ea5e9; }
.att-standing.inactive { background: #e2e8f0; color: #475569; }
.att-standing-custom { border: 1px solid transparent; }

/* ── Students-attendance sub-tabs (Overview / Attendance Importer) ─────────── */
.att-tabs { display: inline-flex; gap: .3rem; margin-bottom: 1rem; padding: .3rem;
    background: var(--surface-2, #f1f5f9); border: 1px solid var(--border); border-radius: 12px; }
.att-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem;
    border: 0; background: transparent; border-radius: 9px; font: inherit; font-weight: 700;
    font-size: .85rem; color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s; }
.att-tab:hover { color: var(--text-heading); }
.att-tab.on { background: var(--emerald); color: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.18); }

/* ── Attendance Importer (CSV → class_attendance) — dark, scoped to .attimp ── */
.attimp {
    --ai-bg-main: #060b13; --ai-panel: #0d1523; --ai-card: #151e2f; --ai-border: #233147;
    --ai-text: #f8fafc; --ai-muted: #94a3b8; --ai-blue: #2563eb; --ai-green: #10b981;
    --ai-red: #ef4444; --ai-purple: #8b5cf6; --ai-blue-hover: #1d4ed8;
    background: var(--ai-bg-main); color: var(--ai-text); border: 1px solid var(--ai-border);
    border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 18px; font-size: 13px; }
.attimp .ai-header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex-wrap: wrap; background: var(--ai-panel); padding: 18px 20px; border-radius: 10px; border: 1px solid var(--ai-border); }
.attimp .ai-title { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 12px; font-weight: 800; }
.attimp .ai-title-ico { background: rgba(37,99,235,.15); color: var(--ai-blue); padding: 10px 14px;
    border-radius: 10px; border: 1px solid rgba(37,99,235,.3); font-size: 16px; }
.attimp .ai-sub { font-size: 12.5px; color: var(--ai-muted); font-weight: 500; margin-top: 3px; }
.attimp .ai-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.attimp .ai-btn { background: transparent; border: 1px solid var(--ai-border); color: var(--ai-text);
    padding: 9px 15px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px; }
.attimp .ai-btn:hover { background: rgba(255,255,255,.05); }
.attimp .ai-btn:disabled { opacity: .5; cursor: not-allowed; }
.attimp .ai-btn-green { border-color: var(--ai-green); color: var(--ai-green); }
.attimp .ai-btn-green:hover:not(:disabled) { background: rgba(16,185,129,.1); }
.attimp .ai-btn-primary { background: var(--ai-blue); border-color: var(--ai-blue); color: #fff; }
.attimp .ai-btn-primary:hover:not(:disabled) { background: var(--ai-blue-hover); }

.attimp .ai-stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; background: var(--ai-panel); padding: 18px 28px; border-radius: 10px; border: 1px solid var(--ai-border); }
.attimp .ai-step { display: flex; align-items: center; gap: 11px; color: var(--ai-muted); }
.attimp .ai-step.on { color: var(--ai-text); }
.attimp .ai-step-c { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ai-border);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.attimp .ai-step.on .ai-step-c { background: var(--ai-blue); border-color: var(--ai-blue); color: #fff; }
.attimp .ai-step.done .ai-step-c { background: rgba(16,185,129,.15); border-color: var(--ai-green); color: var(--ai-green); }
.attimp .ai-step-d { color: var(--ai-border); font-weight: 700; }
.attimp .ai-step small { color: var(--ai-muted); }

.attimp .ai-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.attimp .ai-panel { background: var(--ai-panel); border: 1px solid var(--ai-border); border-radius: 10px; padding: 22px; }
.attimp .ai-panel + .ai-panel { margin-top: 18px; }
.attimp .ai-h3 { margin: 0 0 18px; font-size: 12px; text-transform: uppercase; color: var(--ai-muted);
    letter-spacing: .5px; border-bottom: 1px solid var(--ai-border); padding-bottom: 11px; font-weight: 700; }
.attimp .ai-h3 .ai-soft { text-transform: none; color: var(--ai-muted); font-weight: 500; }

.attimp .ai-drop { border: 2px dashed var(--ai-border); border-radius: 10px; padding: 34px 18px;
    text-align: center; margin-bottom: 18px; background: var(--ai-card); transition: border-color .12s, background .12s; }
.attimp .ai-drop.drag { border-color: var(--ai-blue); background: rgba(37,99,235,.08); }
.attimp .ai-drop-ico { font-size: 26px; margin-bottom: 8px; color: var(--ai-green); }
.attimp .ai-drop small { color: var(--ai-muted); font-size: 12px; display: block; margin: 4px 0; }
.attimp .ai-file { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--ai-card); padding: 11px 12px; border-radius: 8px; border: 1px solid var(--ai-border); margin-bottom: 18px; }
.attimp .ai-file .ai-ok { color: var(--ai-green); border: 1px solid var(--ai-green); border-radius: 50%;
    width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.attimp .ai-field { margin-bottom: 16px; }
.attimp .ai-field label { display: block; margin-bottom: 7px; color: var(--ai-muted); font-weight: 600; }
.attimp .ai-input, .attimp select.ai-input { background: var(--ai-card); color: var(--ai-text);
    border: 1px solid var(--ai-border); padding: 9px 11px; border-radius: 8px; width: 100%; outline: none; font: inherit; }
.attimp .ai-input:focus { border-color: var(--ai-blue); }
.attimp .ai-info { display: flex; gap: 10px; background: rgba(37,99,235,.05); border: 1px solid rgba(37,99,235,.2);
    padding: 13px; border-radius: 8px; color: var(--ai-muted); font-size: 12px; line-height: 1.5; }
.attimp .ai-info b { color: var(--ai-blue); }

.attimp .ai-srow { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.attimp .ai-srow:last-child { border: 0; padding-bottom: 0; }
.attimp .ai-green-t { color: var(--ai-green); font-weight: 700; }
.attimp .ai-blue-t { color: var(--ai-blue); font-weight: 700; }
.attimp .ai-red-t { color: var(--ai-red); font-weight: 700; }
.attimp .ai-row-dupe { opacity: .55; }

.attimp .ai-alert { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.3); color: var(--ai-green);
    padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.attimp .ai-tablewrap { overflow-x: auto; border: 1px solid var(--ai-border); border-radius: 8px; background: var(--ai-card); }
/* Full-grid preview: scroll both axes, keep header + first columns pinned. */
.attimp .ai-tallwrap { max-height: 62vh; overflow: auto; }
.attimp table.ai-table { width: 100%; border-collapse: collapse; }
.attimp .ai-table th, .attimp .ai-table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--ai-border);
    white-space: nowrap; font-size: 12px; }
.attimp .ai-table th { color: var(--ai-muted); font-weight: 600; }
.attimp .ai-table th.ai-date, .attimp .ai-table td.ai-date { text-align: center; line-height: 1.35; }
.attimp .ai-table tr:hover { background: rgba(255,255,255,.02); }
.attimp .ai-table td.ai-noclass { text-align: center; color: var(--ai-muted); }
.attimp .ai-grid-table thead th { position: sticky; top: 0; z-index: 3; background: var(--ai-card); }
/* Pin the Name column so it stays visible while scrolling wide date grids. */
.attimp .ai-grid-table th:first-child, .attimp .ai-grid-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--ai-card); }
.attimp .ai-grid-table thead th:first-child { z-index: 4; }
.attimp .ai-cbx { appearance: none; width: 18px; height: 18px; border: 1px solid var(--ai-border); border-radius: 4px;
    background: transparent; display: grid; place-content: center; margin: 0 auto; }
.attimp .ai-cbx::before { content: ""; width: 10px; height: 10px; transform: scale(0); background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.attimp .ai-cbx.on { background: var(--ai-blue); border-color: var(--ai-blue); }
.attimp .ai-cbx.on::before { transform: scale(1); }
.attimp .ai-issue { color: var(--ai-red); font-size: 11px; }

.attimp .ai-legend { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 16px;
    color: var(--ai-muted); font-size: 12px; }
.attimp .ai-legend span { display: inline-flex; align-items: center; gap: 7px; }
.attimp .ai-tag { padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; border: 1px solid; display: inline-block; }
.attimp .ai-tag.active { color: var(--ai-green); border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.1); }
.attimp .ai-tag.blue { color: var(--ai-blue); border-color: rgba(37,99,235,.3); background: rgba(37,99,235,.1); }
.attimp .ai-tag.free { color: var(--ai-purple); border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.1); }
.attimp .ai-tag.muted { color: var(--ai-muted); border-color: var(--ai-border); background: transparent; }

.attimp .ai-info-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; margin-top: 18px; }
.attimp .ai-bottom { background: var(--ai-bg-main); border: 1px solid var(--ai-border); border-radius: 8px; padding: 22px; }
.attimp .ai-steps4 { display: flex; justify-content: space-between; gap: 12px; text-align: center; font-size: 12px;
    color: var(--ai-muted); margin-top: 16px; }
.attimp .ai-req { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px;
    color: var(--ai-text); font-size: 12px; }
.attimp .ai-req li::before { content: "✓"; color: var(--ai-green); margin-right: 8px; font-weight: 700; }
.attimp .ai-foot { background: var(--ai-panel); border: 1px solid var(--ai-border); color: var(--ai-muted);
    padding: 14px 18px; border-radius: 8px; font-size: 13px; display: flex; gap: 10px; align-items: center; }
.attimp .ai-hidden-file { display: none; }
@media (max-width: 960px) {
    .attimp .ai-grid { grid-template-columns: 1fr; }
    .attimp .ai-info-grid { grid-template-columns: 1fr; }
    .attimp .ai-stepper { justify-content: flex-start; }
}
/* Custom financial-status manager (Settings) */
.cstat-block { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.cstat-list { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.cstat-empty { color: var(--text-muted); font-size: .85rem; font-style: italic; }
.cstat-row { display: flex; align-items: center; gap: .55rem; }
.cstat-row .att-standing-custom { min-width: 110px; justify-content: center; }
.cstat-row .cstat-name { flex: 1; min-width: 0; }
.cstat-row .cstat-clr { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border);
    border-radius: 8px; background: #fff; cursor: pointer; }
.cstat-del { border: none; background: none; color: var(--red); cursor: pointer; padding: .35rem .5rem;
    border-radius: 8px; }
.cstat-del:hover { background: var(--red-soft); }
.cstat-add { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; }
.cstat-add input[type=text] { flex: 1; min-width: 0; }
.cstat-add input[type=color] { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border);
    border-radius: 8px; background: #fff; cursor: pointer; }
/* Financial-status picker modal (CRM Students kebab) */
.fst-list { display: flex; flex-direction: column; gap: .5rem; }
.fst-opt { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff;
    cursor: pointer; transition: border-color .12s, background .12s; }
.fst-opt:hover { border-color: var(--brand); background: var(--brand-soft, #eef2ff); }
.fst-opt.on { border-color: var(--brand); background: var(--brand-soft, #eef2ff); }
.fst-chk { margin-left: auto; color: var(--emerald-dark); }
.fst-empty { color: var(--text-muted); font-size: .9rem; line-height: 1.5; padding: .5rem 0; }
.att-standing-row { display: flex; align-items: center; gap: .5rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: 1rem; }
.st-filter-chip { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem;
    font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.st-filter-clear { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #cbd5e1;
    background: #fff; color: #475569; border-radius: 999px; padding: .25rem .6rem; font-size: .76rem;
    font-weight: 700; cursor: pointer; }
.st-filter-clear:hover { background: #f1f5f9; }

/* ── Student payment-required block screen (redesigned) ─────────────────────── */
.att-block-card { padding: 1.6rem 1.6rem 1.4rem; }
/* header: red avatar initials + lock "PAYMENT REQUIRED" label */
.att-avatar.att-avatar-red { background: linear-gradient(135deg, #f87171, #dc2626); }
.att-payreq { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem;
    font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #dc2626; }

/* soft alert banner (red for overdue/blocked, amber for due-soon) */
.att-alert { display: flex; align-items: flex-start; gap: .85rem; border-radius: 14px;
    padding: 1rem 1.15rem; margin-bottom: 1.3rem; border: 1px solid transparent; }
.att-alert-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; }
.att-alert-body { min-width: 0; }
.att-alert-title { font-weight: 800; color: var(--text-heading); line-height: 1.4; }
.att-alert-sub { font-size: .86rem; color: var(--text-muted); margin-top: .15rem; }
.att-alert-red { background: #fef2f2; border-color: #fecaca; }
.att-alert-red .att-alert-ico { background: #ef4444; }
.att-alert-red .att-alert-title { color: #b91c1c; }
.att-alert-amber { background: #fffbeb; border-color: #fde68a; }
.att-alert-amber .att-alert-ico { background: #f59e0b; }
.att-alert-amber .att-alert-title { color: #92400e; }
.att-alert-blue { background: #eff6ff; border-color: #bfdbfe; }
.att-alert-blue .att-alert-ico { background: #3b82f6; }
.att-alert-blue .att-alert-title { color: #1e40af; }
.att-alert-green { background: #f0fdf4; border-color: #bbf7d0; }
.att-alert-green .att-alert-ico { background: #22c55e; }
.att-alert-green .att-alert-title { color: #166534; }

/* collapsed "Pay now" expander — payment methods hide behind one button so they
   never dominate the screen; tapping expands card pay + the method accordions */
.paynow { margin-bottom: 1.3rem; }
.paynow-btn { display: inline-flex; align-items: center; gap: .55rem; border: none; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font-weight: 800;
    font-size: .95rem; padding: .8rem 1.5rem; border-radius: 12px; box-shadow: var(--shadow-sm);
    font-family: inherit; transition: filter .15s ease; }
.paynow-btn:hover { filter: brightness(1.08); }
.paynow-chev { font-size: .8rem; transition: transform .18s ease; }
.paynow-btn.paynow-open .paynow-chev { transform: rotate(180deg); }
.paynow-panel { margin-top: 1rem; }
.paynow-card { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
@media (max-width: 460px) {
    .paynow-btn { width: 100%; justify-content: center; }
}

/* amount-due card: big figure · due date · purple Pay now */
.adc { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; border: 1px solid var(--border);
    border-radius: 16px; padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; background: #fff; box-shadow: var(--shadow-sm); }
.adc-label { font-size: .8rem; color: var(--text-muted); font-weight: 600; margin-bottom: .25rem; }
.adc-amount { flex: 1 1 auto; min-width: 140px; }
.adc-figure { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.3rem;
    line-height: 1; color: var(--red); display: flex; align-items: baseline; gap: .1rem; }
.adc-figure .adc-cur { font-size: 1.7rem; }
.adc-figure .adc-usd { font-size: .9rem; font-weight: 700; color: var(--text-muted); margin-left: .35rem; align-self: flex-end; }
.adc-figure.adc-na { color: var(--text-faint); }
.adc-divider { width: 1px; align-self: stretch; background: var(--border); }
.adc-due { flex: 1 1 auto; min-width: 160px; display: flex; align-items: center; gap: .8rem; }
.adc-due-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #eef3fe;
    display: flex; align-items: center; justify-content: center; color: var(--acad-blue); font-size: 1.05rem; }
.adc-due-date { font-weight: 800; color: var(--text-heading); }
.adc-overdue-tag { color: var(--red); font-weight: 700; font-size: .82rem; margin-left: .2rem; }
.adc-pay { flex: 0 0 auto; text-align: center; }
.adc-paynow { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 100%;
    border: none; cursor: pointer; font: inherit; font-weight: 800; font-size: 1rem; color: #fff;
    background: linear-gradient(135deg, #7c6cff, #5b4be0); padding: .85rem 1.7rem; border-radius: 12px;
    box-shadow: 0 8px 22px rgba(91, 75, 224, .35); transition: filter .15s, transform .05s; }
.adc-paynow:hover { filter: brightness(1.07); }
.adc-paynow:active { transform: translateY(1px); }
.adc-paynow:disabled { opacity: .65; cursor: default; }
.adc-secure { font-size: .78rem; color: var(--text-muted); margin-top: .45rem; font-weight: 600; }

/* "Other payment methods" centered heading with rule */
.att-methods-sep { display: flex; align-items: center; gap: 1rem; margin: .4rem 0 1.1rem; }
.att-methods-sep::before, .att-methods-sep::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.att-methods-sep span { font-weight: 800; color: var(--text-heading); font-size: .95rem; white-space: nowrap; }

/* branded payment-method cards */
.spm-list { display: flex; flex-direction: column; gap: .8rem; }
.spm-card { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border);
    border-radius: 14px; padding: 1rem 1.15rem; background: #fff; box-shadow: var(--shadow-sm); }
.spm-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; }
.spm-main { flex: 1 1 180px; min-width: 0; }
.spm-name { font-weight: 800; color: var(--text-heading); font-size: 1.02rem; }
.spm-desc { font-size: .82rem; color: var(--text-muted); margin-top: .1rem; }
.spm-chip { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem;
    background: #eef3fe; color: var(--acad-blue); border: 1px solid #d7e3fc; border-radius: 999px;
    padding: .3rem .7rem; font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; font-family: inherit; }
button.spm-chip { cursor: pointer; transition: background .15s, border-color .15s; }
button.spm-chip:hover { background: #e1ebfd; border-color: #bcd2fa; }
.spm-details { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.spm-field { min-width: 0; }
.spm-field-label { display: block; font-size: .76rem; color: var(--text-muted); font-weight: 600; }
.spm-field-val { display: block; font-weight: 800; color: var(--text-heading); font-size: .9rem; overflow-wrap: anywhere; }
button.spm-field-val { background: none; border: 0; padding: 0; margin-top: .1rem; font-family: inherit;
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; text-align: left; transition: color .15s; }
button.spm-field-val:hover { color: var(--acad-blue); }
.spm-copy-ico { font-size: .72rem; opacity: .5; }
.spm-copy:hover .spm-copy-ico { opacity: .85; }
.spm-actionable { cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .05s; }
.spm-actionable:hover { border-color: var(--acad-blue); box-shadow: var(--shadow-md); }
.spm-actionable:active { transform: translateY(1px); }
.spm-actionable:focus-visible { outline: 2px solid var(--acad-blue); outline-offset: 2px; }
.spm-chevron { flex: none; color: var(--text-faint); font-size: .95rem; }
.spm-actionable:hover .spm-chevron { color: var(--acad-blue); }

/* accordion payment methods (student payment card): tap a row to reveal details +
   inline proof upload that posts to /api/student/submit-proof */
.pmacc-list { display: flex; flex-direction: column; gap: .8rem; }
.pmacc { border: 1px solid var(--border); border-radius: 14px; background: #fff;
    overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.pmacc.open { border-color: var(--acad-blue); box-shadow: var(--shadow-md); }
.pmacc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; background: none; border: 0; padding: 1rem 1.15rem; cursor: pointer;
    font-family: inherit; text-align: left; transition: background .15s; }
.pmacc-head:hover { background: #f8fafc; }
.pmacc-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.pmacc-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; }
.pmacc-titles { min-width: 0; }
.pmacc-name { font-weight: 800; color: var(--text-heading); font-size: 1rem; }
.pmacc-desc { font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.pmacc-right { display: flex; align-items: center; gap: .9rem; flex: none; }
.pmacc-payto { text-align: right; }
.pmacc-payto span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); }
.pmacc-payto b { font-size: .8rem; color: var(--text-heading); }
.pmacc-chev { color: var(--text-faint); font-size: .9rem; transition: transform .3s ease; }
.pmacc.open .pmacc-chev { transform: rotate(180deg); color: var(--acad-blue); }
.pmacc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.pmacc.open .pmacc-panel { max-height: 800px; }
.pmacc-panel-inner { padding: 0 1.15rem 1.15rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.pmacc-chiprow { margin-bottom: .9rem; }
.pmacc-chiplabel { display: block; font-size: .76rem; color: var(--text-muted); font-weight: 600; margin-bottom: .35rem; }
.pmacc-chip { display: inline-flex; align-items: center; gap: .4rem; background: #eef3fe; color: var(--acad-blue);
    border: 1px solid #d7e3fc; border-radius: 999px; padding: .35rem .75rem; font-size: .82rem; font-weight: 700;
    overflow-wrap: anywhere; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.pmacc-chip:hover { background: #e1ebfd; border-color: #bcd2fa; }
.pmacc-grid { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-bottom: 1rem; background: #f8fafc;
    border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.pmacc-field { min-width: 0; }
.pmacc-field-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); font-weight: 600; }
.pmacc-field-val { background: none; border: 0; padding: 0; margin-top: .15rem; font-family: inherit; font-weight: 800;
    color: var(--text-heading); font-size: .86rem; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: .35rem;
    cursor: pointer; text-align: left; transition: color .15s; }
.pmacc-field-val:hover { color: var(--acad-blue); }
.pmacc-copy-ico { font-size: .72rem; opacity: .5; }
.pmacc-copy:hover .pmacc-copy-ico { opacity: .85; }
.pmacc-upload { border: 2px dashed var(--border); border-radius: 12px; padding: 1.1rem; text-align: center; background: #fff; }
.pmacc-upload-label { display: block; margin-bottom: .7rem; font-weight: 700; color: var(--text-heading); font-size: .9rem; }
.pmacc-file { display: block; width: 100%; font-size: .8rem; color: var(--text-muted); margin-bottom: .5rem; }
.pmacc-file::file-selector-button { margin-right: .9rem; padding: .5rem .9rem; border: 0; border-radius: 8px;
    background: #eef3fe; color: var(--acad-blue); font-weight: 700; font-size: .8rem; cursor: pointer; font-family: inherit; }
.pmacc-file::file-selector-button:hover { background: #e1ebfd; }
.pmacc-fname { font-size: .78rem; color: var(--text-muted); margin-bottom: .6rem; overflow-wrap: anywhere; }
.pmacc-fname:empty { display: none; }
.pmacc-submit { width: 100%; background: #16a34a; color: #fff; border: 0; border-radius: 10px; padding: .65rem 1rem;
    font-weight: 700; font-size: .9rem; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center;
    justify-content: center; gap: .5rem; transition: background .15s; }
.pmacc-submit:hover { background: #15803d; }
.pmacc-submit:disabled { opacity: .7; cursor: default; }
.pmacc-thanks { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #15803d;
    font-weight: 700; font-size: .88rem; padding: .4rem; }
.att-renew .pmacc-list { gap: .8rem; }
@media (max-width: 460px) {
    .pmacc-payto { display: none; }
}

/* secure footer */
.att-secure-foot { display: flex; align-items: center; gap: .85rem; margin-top: 1.4rem;
    background: #f5f3ff; border: 1px solid #e4d8fb; border-radius: 14px; padding: 1rem 1.15rem; }
.att-secure-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #ede9fe;
    display: flex; align-items: center; justify-content: center; color: var(--acad-purple); font-size: 1.05rem; }
.att-secure-title { font-weight: 800; color: var(--acad-purple); }
.att-secure-sub { font-size: .82rem; color: var(--text-muted); margin-top: .1rem; }

/* responsive — stack the amount-due card + method cards on tablet/phone */
@media (max-width: 720px) {
    .adc { flex-direction: column; align-items: stretch; gap: .9rem; }
    .adc-divider { display: none; }
    .adc-pay { text-align: stretch; }
    .att-block-card { padding: 1.3rem 1.2rem; }
}
@media (max-width: 460px) {
    .spm-card { flex-wrap: wrap; }
    .spm-details { width: 100%; gap: 1rem; }
    .spm-chevron { display: none; }
    .adc-figure { font-size: 2rem; }
}

/* ════════════ APP SHELL ════════════ */
/* Fixed viewport-height frame: the shell fills exactly one screen and never lets the
   whole page scroll — long page content scrolls inside .content instead, so the
   sidebar + topbar stay put (consistent "no whole-page scroll" with the auth screens). */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

.sidebar {
    width: 256px; flex-shrink: 0;
    background: var(--sidebar-grad);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    border-right: 1px solid rgba(255,255,255,.05);
    transition: width .2s ease;
}
.sb-brand { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: .7rem; }
.sb-mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(16,185,129,.35); }
.sb-mark i { color: #fff; font-size: 1.05rem; }
.sb-mark-logo { background: #fff; padding: 4px; overflow: hidden; }
.sb-mark-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sb-brand-name { font-size: 1.02rem; font-weight: 800; color: #f0f6ff; line-height: 1.1; }
.sb-brand-sub { font-size: .58rem; font-weight: 700; color: var(--emerald); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }

.profile-hero { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.4rem 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.avatar-ring { width: 68px; height: 68px; border-radius: 50%; border: 2.5px solid var(--emerald); padding: 3px; display: flex; align-items: center; justify-content: center; }
.avatar-circle { width: 100%; height: 100%; border-radius: 50%; background: #0d2444; color: var(--emerald); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.35rem; font-family: 'Plus Jakarta Sans', sans-serif; }
.hero-name { font-size: .98rem; font-weight: 700; color: #f0f6ff; text-align: center; line-height: 1.2; }

.goback-side { margin: .85rem .9rem .2rem; color: #cdd9ee; font-weight: 600; font-size: .9rem; }
.goback-side .goback-circle { width: 36px; height: 36px; font-size: .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.goback-side:hover { color: #fff; }
.sb-nav { padding: .75rem .65rem; flex: 1; overflow-y: auto; }
.nav-item {
    padding: .8rem .9rem; margin-bottom: .25rem; border-radius: 11px; cursor: pointer;
    color: #93a4bd; display: flex; align-items: center; gap: 12px;
    font-weight: 600; font-size: .9rem; transition: all .2s var(--fluid);
}
.nav-item i { font-size: .95rem; width: 18px; text-align: center; opacity: .7; transition: all .2s; }
.nav-item:hover:not(.active) { background: rgba(255,255,255,.05); color: #f0f6ff; }
.nav-item:hover:not(.active) i { opacity: 1; }
.nav-item.active { background: linear-gradient(90deg, rgba(16,185,129,.28), rgba(16,185,129,.09));
    color: #6ee7b7; font-weight: 700; box-shadow: inset 3px 0 0 0 var(--emerald); }
.nav-item.active i { opacity: 1; color: #34d399; }
.sb-nav .nav-item { user-select: none; -webkit-user-select: none; }
.sb-nav .nav-item .nav-label { flex: 1; }
.sb-nav .nav-item .nav-grip { width: auto; margin-left: auto; opacity: 0; cursor: grab; font-size: .78rem; transition: opacity .2s; }
.sb-nav .nav-item:hover .nav-grip { opacity: .5; }
.sb-nav .nav-item .nav-grip:active { cursor: grabbing; }
.sb-nav .nav-item.dragging { opacity: .55; background: rgba(255,255,255,.07); }
.sb-foot {
    padding: .65rem .65rem 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
    max-height: 200px;
    opacity: 1;
    transition: max-height .28s ease, opacity .22s ease, padding .25s ease;
}
.sb-foot--no-anim { transition: none !important; }
.sb-foot--collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.sb-foot .nav-item { color: #c98a85; }
.sb-foot .nav-item:hover { background: rgba(226,89,80,.1); color: #ff8079; }
.sb-foot-toggle {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 100%; padding: 7px 0 5px;
    background: none; border: none; border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: none;
    color: rgba(255,255,255,.55); font-size: .75rem; cursor: pointer;
    transition: color .2s, background .15s;
}
.sb-foot-toggle:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }

/* #mainArea is the single shared container every view renders into (standard topbar +
   .content layouts AND custom ones like the CRM's .crm-top/.crm-body). Make IT the lone
   internal scroll region so no view can be clipped by the shell's overflow:hidden — the
   page itself never scrolls, only this area does. */
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2.25rem; gap: 1rem; flex-wrap: wrap; }
.topbar h1 { font-size: 1.45rem; font-weight: 800; color: var(--text-heading); }
.topbar .sub { font-size: .85rem; color: var(--text-muted); margin-top: 2px; }
.content { padding: 0 2.25rem 3rem; }

/* Staff dark — filled page-section banner */
body.staffdark .topbar {
    background: linear-gradient(135deg, #0d1829 0%, #111c35 100%);
    border-bottom: 1px solid #1e2d4a;
    padding: 1.6rem 2.25rem;
    flex-shrink: 0;
}
body.staffdark .topbar h1 {
    font-size: 1.55rem;
    font-weight: 800;
    color: #e2e8f0;
}
body.staffdark .topbar .sub {
    font-size: .88rem;
    color: #64748b;
    margin-top: 3px;
}

/* ════════════ COMPONENTS ════════════ */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 1.6rem; }
.section-title { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.section-title i { color: var(--emerald); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: .7rem 1.2rem; border: none; border-radius: 10px;
    font-size: .92rem; font-weight: 700; color: #fff;
    background: var(--navy-900); transition: all .18s var(--fluid);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-emerald { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); }
.btn-red { background: var(--red); }
.btn-amber { background: var(--amber); color: #1f2937; }
.btn-ghost { background: #fff; color: var(--text-body); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: #f8fafc; color: var(--text-heading); box-shadow: none; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-sm { padding: .5rem .85rem; font-size: .82rem; border-radius: 8px; }

/* Clock hero */
.clock-hero { text-align: center; padding: 2.5rem 1.5rem; position: relative; overflow: hidden; }
.clock-hero.live { background: linear-gradient(135deg, #0d1b2e, #102a4c); border-color: #102a4c; }
.clock-hero.live .big-clock, .clock-hero.live .big-date { color: #f0f6ff; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: .5rem 1.05rem; border-radius: 999px; font-size: .85rem; font-weight: 700; margin-bottom: 1.4rem; }
.status-pill.in { background: var(--emerald-soft); color: var(--emerald); border: 1px solid var(--emerald-border); }
.status-pill.out { background: #f1f5f9; color: var(--text-muted); border: 1px solid var(--border); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.share-warn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.2rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); color: #b45309; font-size: .88rem; font-weight: 600; }
.clock-hero.live .share-warn { color: #fcd34d; background: rgba(245,158,11,.16); }
.big-clock { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 3.4rem; font-weight: 800; color: var(--text-heading); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.big-date { color: var(--text-muted); font-size: .95rem; margin-top: .5rem; }
.elapsed { font-size: 1.05rem; color: var(--emerald); font-weight: 700; margin: 1rem 0 0; font-variant-numeric: tabular-nums; }
.hero-started { margin-top: 1rem; font-size: .85rem; color: var(--text-faint); }
.clock-hero.live .hero-started { color: #6b85a8; }
/* === Clock portal (unified landing tab for every department) ================= */
.clkp { gap: 1.1rem; }
.clkp-hero { position: relative; overflow: hidden; text-align: center; padding: 2.6rem 1.6rem 2.2rem; border: 1px solid rgba(16,185,129,.22); background: radial-gradient(130% 150% at 50% -30%, #0f3d2e 0%, #0b2a20 55%, #082018 100%); box-shadow: 0 24px 60px rgba(4,18,12,.45); color: #eafff5; }
.clkp-hero .sched-line { color: #bfe9d6; }
.clkp-hero .sched-line.ready { color: #6ee7b7; }
.clkp-hero .sched-line.in { color: #34d399; }
.clkp-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 80% at 22% 60%, rgba(16,185,129,.26), transparent 60%), radial-gradient(50% 70% at 82% 40%, rgba(45,212,191,.18), transparent 62%); animation: tlhWave 8s ease-in-out infinite alternate; }
.clkp-laptop { position: absolute; right: 1.4rem; bottom: 1.1rem; width: 120px; height: 90px; opacity: .9; z-index: 1; pointer-events: none; }
.clkp-hero > *:not(.clkp-glow):not(.clkp-laptop) { position: relative; z-index: 2; }
.clkp-badge { display: inline-flex; align-items: center; gap: 8px; padding: .5rem 1.1rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.3rem; }
.clkp-badge.on { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 8px 22px rgba(16,185,129,.5); }
.clkp-badge.off { background: rgba(255,255,255,.08); color: #9fd9c2; border: 1px solid rgba(255,255,255,.14); }
.clkp-state { display: inline-flex; align-items: center; gap: 7px; padding: .3rem .85rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: -.7rem 0 1.1rem; background: rgba(255,255,255,.08); color: #cbeadd; border: 1px solid rgba(255,255,255,.16); }
.clkp-state i { font-size: .7rem; }
.clkp-state-available { background: rgba(16,185,129,.16); color: #6ee7b7; border-color: rgba(16,185,129,.35); }
.clkp-state-lunch { background: rgba(249,115,22,.16); color: #fdba74; border-color: rgba(249,115,22,.35); }
.clkp-state-break { background: rgba(217,70,239,.16); color: #f0abfc; border-color: rgba(217,70,239,.35); }
.clkp-state-finished { background: rgba(6,182,212,.16); color: #67e8f9; border-color: rgba(6,182,212,.35); }
.clkp-bdot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: liveNowPulse 1.4s ease-out infinite; }
.clkp-clock { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 4rem; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.clkp-date { color: #9fd9c2; font-size: .98rem; margin-top: .55rem; }
.clkp-brand { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .95rem; letter-spacing: .06em; color: #eafff5; }
.clkp-brand i { color: #34d399; }
.clkp-stats { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem auto 0; max-width: 460px; }
.clkp-stat { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: .9rem 1rem; }
.clkp-stat-label { font-size: .76rem; color: #9fd9c2; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.clkp-stat-label i { font-size: .72rem; }
.clkp-stat-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.clkp-action { margin-top: 1.6rem; }
.clkp-share { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.3rem; padding: .6rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 700; background: rgba(16,185,129,.16); border: 1px solid rgba(52,211,153,.4); color: #6ee7b7; }
.clkp-hint { margin-top: 1.3rem; font-size: .82rem; color: #8fcab4; display: inline-flex; align-items: center; gap: .5rem; }
.clkp-next-action { margin-top: 1.1rem; }
.clkp-paydate { display: flex; align-items: center; gap: 1rem; background: linear-gradient(120deg, rgba(16,185,129,.10), rgba(59,130,246,.08)); border: 1px solid rgba(52,211,153,.28); }
.clkp-paydate-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; color: #10b981; background: rgba(16,185,129,.14); border: 1px solid rgba(52,211,153,.35); }
.clkp-paydate-label { font-size: .78rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.clkp-paydate-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: #0f766e; margin-top: .15rem; }
.clkp-paydate-sub { font-size: .8rem; color: #64748b; margin-top: .15rem; }
.sched-clock-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.sched-clock-hint .gate-action { margin-top: 0; }
@media (max-width: 560px) {
    .clkp-clock { font-size: 3rem; }
    .clkp-laptop { display: none; }
    .clkp-stats { flex-direction: column; }
    .sched-clock-hint { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .clkp-glow { animation: none; } .clkp-bdot { animation: none; } }
/* ── Clock-in gate (shown until a worker clocks in; no nav, only the clock) ── */
.gate-wrap { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(160deg, #eef3fb 0%, #f7fafe 45%, #eaf0fa 100%); }
.gate-top { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; }
.gate-brand { display: flex; align-items: center; gap: .7rem; }
.gate-brand .sb-mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.gate-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--text-heading); line-height: 1.1; }
.gate-brand-sub { font-size: .8rem; color: var(--text-muted); }
.gate-logout { background: #fff; border: 1px solid var(--border); color: var(--text-muted); border-radius: 10px; padding: .5rem .9rem; font-weight: 600; }
.gate-logout:hover { color: var(--red); border-color: var(--red); }
.gate-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.gate-hero { max-width: 540px; width: 100%; }
.gate-sched { margin: 1.3rem auto 0; max-width: 420px; font-size: .9rem; padding: .7rem 1rem; border-radius: 12px; line-height: 1.5; }
.gate-sched.ready { background: var(--emerald-soft); color: var(--emerald-dark); border: 1px solid var(--emerald-border); }
.gate-sched.wait { background: #f1f5f9; color: var(--text-muted); border: 1px solid var(--border); }
.gate-action { margin-top: 1.6rem; }
.gate-hint { margin-top: 1.4rem; font-size: .82rem; color: var(--text-faint); display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 540px) { .gate-brand-sub { display: none; } .big-clock { font-size: 2.7rem; } }
/* "LIVE NOW" pill shown in the dark-blue clock hero while a class is live */
.live-now-pill { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem; padding: .45rem 1rem; border-radius: 999px; background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(225,29,72,.5); }
.live-now-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: liveNowPulse 1.4s ease-out infinite; }
@keyframes liveNowPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
/* LIVE CLASSES card — appears once the teacher is clocked in, with a popping "Join class now" button */
.live-class-card { text-align: center; padding: 1.8rem 1.5rem; margin: 0 0 1.25rem; border: 1px solid var(--emerald-border); background: linear-gradient(160deg, var(--emerald-soft), var(--white)); }
.lcc-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(225,29,72,.4); }
.lcc-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: liveNowPulse 1.4s ease-out infinite; }
.lcc-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text-heading); margin: .9rem 0 .45rem; letter-spacing: -.02em; }
.lcc-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; color: var(--text-muted); font-size: .9rem; font-weight: 600; margin-bottom: 1.4rem; }
.lcc-meta i { color: var(--emerald); margin-right: .35rem; }
.join-class-btn { display: inline-flex; align-items: center; gap: .65rem; padding: 1rem 2.3rem; border-radius: 14px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; box-shadow: 0 10px 30px rgba(16,185,129,.45); animation: joinPop 1.2s ease-in-out infinite; }
.join-class-btn:hover { filter: brightness(1.06); }
@keyframes joinPop { 0%,100% { transform: scale(1); box-shadow: 0 10px 30px rgba(16,185,129,.45); } 50% { transform: scale(1.06); box-shadow: 0 16px 42px rgba(16,185,129,.72); } }
.lcc-nolink { color: var(--text-muted); font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .join-class-btn { animation: none; } .lcc-dot { animation: none; } }

/* === Teacher LIVE CLASS hero (animated dark spotlight with per-level cards) === */
.tlh-hero { position: relative; overflow: hidden; text-align: center; padding: 2rem 1.6rem 1.9rem; margin: 0 0 1.25rem; border: 1px solid rgba(96,165,250,.28); border-radius: 18px; background: radial-gradient(130% 150% at 50% -25%, #16294d 0%, #0c1730 55%, #0a1020 100%); box-shadow: 0 22px 55px rgba(4,10,25,.55); }
.tlh-inner { position: relative; z-index: 2; }
.tlh-dots { position: absolute; top: 0; right: 0; width: 260px; height: 130px; opacity: .55; pointer-events: none; z-index: 1; background-image: radial-gradient(rgba(96,165,250,.4) 1.3px, transparent 1.6px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(225deg, #000, transparent 72%); mask-image: linear-gradient(225deg, #000, transparent 72%); }
.tlh-wave { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(55% 80% at 20% 55%, rgba(16,185,129,.20), transparent 60%), radial-gradient(50% 70% at 82% 42%, rgba(59,130,246,.18), transparent 62%); animation: tlhWave 8s ease-in-out infinite alternate; }
@keyframes tlhWave { from { transform: translateX(-4%) scale(1); opacity: .8; } to { transform: translateX(4%) scale(1.06); opacity: 1; } }
.tlh-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem 1rem; border-radius: 999px; background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 22px rgba(225,29,72,.45); }
.tlh-pill-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.tlh-pill-dot::before, .tlh-pill-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); animation: tlhRing 1.7s ease-out infinite; }
.tlh-pill-dot::after { animation-delay: .85s; }
@keyframes tlhRing { from { transform: scale(1); opacity: .7; } to { transform: scale(3.4); opacity: 0; } }
.tlh-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.7rem; font-weight: 800; color: #fff; margin: .9rem 0 .5rem; letter-spacing: -.02em; text-transform: uppercase; }
.tlh-time { color: #9fb4d6; font-weight: 700; font-size: .95rem; margin-bottom: 1.5rem; }
.tlh-time i { color: #60a5fa; margin-right: .4rem; }
.tlh-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.tlh-lvl { flex: 1 1 250px; max-width: 330px; display: flex; align-items: center; gap: .9rem; text-align: left; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(148,163,184,.25); background: linear-gradient(160deg, rgba(30,41,59,.6), rgba(15,23,42,.55)); transition: transform .14s ease, box-shadow .14s ease; }
.tlh-lvl:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(4,10,25,.5); }
.tlh-lvl-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.tlh-lvl-info { flex: 1; min-width: 0; }
.tlh-lvl-name { font-weight: 800; color: #fff; font-size: 1.02rem; letter-spacing: .01em; word-break: break-word; }
.tlh-lvl-tier { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: .18rem; }
.tlh-lvl-btn { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .62rem 1rem; border-radius: 10px; color: #fff; font-weight: 800; font-size: .82rem; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: filter .12s ease, transform .12s ease; }
.tlh-lvl-btn:hover { filter: brightness(1.1); transform: translateX(2px); }
.tlh-lvl--green { border-color: rgba(16,185,129,.5); background: linear-gradient(160deg, rgba(16,185,129,.16), rgba(15,23,42,.5)); }
.tlh-lvl--green .tlh-lvl-ic, .tlh-lvl--green .tlh-lvl-btn { background: linear-gradient(135deg, #10b981, #059669); }
.tlh-lvl--green .tlh-lvl-tier { color: #34d399; }
.tlh-lvl--blue { border-color: rgba(59,130,246,.5); background: linear-gradient(160deg, rgba(59,130,246,.16), rgba(15,23,42,.5)); }
.tlh-lvl--blue .tlh-lvl-ic, .tlh-lvl--blue .tlh-lvl-btn { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.tlh-lvl--blue .tlh-lvl-tier { color: #60a5fa; }
.tlh-lvl--purple { border-color: rgba(139,92,246,.5); background: linear-gradient(160deg, rgba(139,92,246,.16), rgba(15,23,42,.5)); }
.tlh-lvl--purple .tlh-lvl-ic, .tlh-lvl--purple .tlh-lvl-btn { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.tlh-lvl--purple .tlh-lvl-tier { color: #a78bfa; }
.tlh-lvl--amber { border-color: rgba(245,158,11,.5); background: linear-gradient(160deg, rgba(245,158,11,.16), rgba(15,23,42,.5)); }
.tlh-lvl--amber .tlh-lvl-ic, .tlh-lvl--amber .tlh-lvl-btn { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tlh-lvl--amber .tlh-lvl-tier { color: #fbbf24; }
.tlh-lvl--pink { border-color: rgba(236,72,153,.5); background: linear-gradient(160deg, rgba(236,72,153,.16), rgba(15,23,42,.5)); }
.tlh-lvl--pink .tlh-lvl-ic, .tlh-lvl--pink .tlh-lvl-btn { background: linear-gradient(135deg, #ec4899, #db2777); }
.tlh-lvl--pink .tlh-lvl-tier { color: #f472b6; }
.tlh-lvl--cyan { border-color: rgba(6,182,212,.5); background: linear-gradient(160deg, rgba(6,182,212,.16), rgba(15,23,42,.5)); }
.tlh-lvl--cyan .tlh-lvl-ic, .tlh-lvl--cyan .tlh-lvl-btn { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.tlh-lvl--cyan .tlh-lvl-tier { color: #22d3ee; }
.tlh-join { display: inline-flex; align-items: center; gap: .65rem; padding: 1rem 2.3rem; border-radius: 14px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; box-shadow: 0 10px 30px rgba(16,185,129,.45); animation: joinPop 1.2s ease-in-out infinite; }
.tlh-join:hover { filter: brightness(1.06); }
.tlh-nolink { color: #9fb4d6; font-size: .9rem; }
@media (max-width: 560px) { .tlh-lvl { flex-direction: column; text-align: center; gap: .7rem; } .tlh-lvl-info { text-align: center; } .tlh-title { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .tlh-wave { animation: none; } .tlh-pill-dot::before, .tlh-pill-dot::after { animation: none; } .tlh-join { animation: none; } }
/* Same-day/time classes: one clock-in button per ready class. */
.clockin-choices { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.clockin-choices .clockin-pick { flex: 0 1 auto; }

/* Stat cards */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--fluid), box-shadow .3s var(--fluid); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--emerald); }
.stat-card h3 { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; display: flex; align-items: center; gap: .45rem; }
.stat-card h3 i { color: var(--emerald); font-size: .8rem; }
.stat-card .value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--text-heading); line-height: 1; margin-top: .55rem; font-variant-numeric: tabular-nums; }

/* Timesheet — per-day group header (date on the left, day total on the right) */
.ts-day-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-bottom: .85rem; margin-bottom: .25rem; border-bottom: 2px solid var(--border); }
.ts-day-date { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--text-heading); display: flex; align-items: center; gap: .5rem; }
.ts-day-date i { color: var(--emerald); }
.ts-day-total { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .95rem; color: var(--emerald); background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); border-radius: 999px; padding: .35rem .85rem; font-variant-numeric: tabular-nums; }
.ts-day-count { font-weight: 600; color: var(--text-muted); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; background: #fafcfe; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
td strong { color: var(--text-heading); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge.active, .badge.open { background: var(--emerald-soft); color: var(--emerald); }
.badge.inactive { background: #f1f5f9; color: var(--text-muted); }
.badge.suspended { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.badge.level { background: #eef3fe; color: var(--acad-blue); }
.badge.manual { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
/* Staff-roster "Anytime clock-in" pill (clock_bypass / class_clock_bypass) — clickable,
   opens the teacher wizard on its Portal step. */
.badge.bypass-pill { cursor: pointer; }
.badge.bypass-pill:hover { background: #fde68a; }
.live-link { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; color: var(--acad-blue); margin-top: 3px; }
.live-link:hover { text-decoration: underline; }
.lv-actions { display: inline-flex; gap: .3rem; }
.badge .dot { width: 6px; height: 6px; }

/* ── Classes list: LIVE NOW rows, schedule cell + schedule popover ────────────── */
.live-count { display: inline-flex; align-items: center; gap: .4rem; margin-left: .7rem; padding: .2rem .6rem; border-radius: 999px; background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.badge.live-badge { background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; letter-spacing: .06em; box-shadow: 0 4px 14px rgba(225,29,72,.4); }
.badge.live-badge .dot { background: #fff; }
tr.live-row > td { background: linear-gradient(90deg, rgba(239,68,68,.10), rgba(239,68,68,.02)); }
tr.live-row > td:first-child { box-shadow: inset 3px 0 0 0 #e11d48; }
body.staffdark .main tr.live-row > td { background: linear-gradient(90deg, rgba(239,68,68,.20), rgba(239,68,68,.05)); }
/* "CLASS IS LIVE RIGHT NOW" banner inside the live class cell */
.live-banner { display: inline-flex; align-items: center; gap: .7rem; margin-top: .6rem; padding: .5rem .7rem; border-radius: 12px; background: rgba(225,29,72,.08); border: 1px solid rgba(225,29,72,.25); white-space: normal; }
body.staffdark .main .live-banner { background: rgba(225,29,72,.16); border-color: rgba(239,68,68,.35); }
.live-orb { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #ff4d5e, #e11d48); box-shadow: 0 0 0 0 rgba(225,29,72,.6); animation: liveNowPulse 1.5s ease-out infinite; }
.live-banner-txt { display: flex; flex-direction: column; line-height: 1.25; }
.live-banner-txt b { font-size: .82rem; color: var(--text-heading); letter-spacing: .02em; }
.live-banner-txt .lb-now { color: #e11d48; }
.live-banner-txt small { color: var(--text-muted); font-size: .72rem; }
.live-join-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 10px; background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; font-size: .82rem; font-weight: 800; text-decoration: none; box-shadow: 0 8px 22px rgba(225,29,72,.45); white-space: nowrap; }
.live-join-btn:hover { filter: brightness(1.06); }
/* Schedule column cell */
.sch-cell { display: flex; flex-direction: column; gap: .15rem; }
.sch-cell .sch-day { font-weight: 700; color: var(--text-heading); }
.sch-cell .sch-time, .sch-cell .sch-dur { font-size: .8rem; color: var(--text-muted); }
.sch-cell .sch-time i, .sch-cell .sch-dur i { color: var(--acad-blue); margin-right: .3rem; }
.btn.btn-xs { padding: .25rem .6rem; font-size: .72rem; border-radius: 8px; }
.sch-view { margin-top: .35rem; align-self: flex-start; }
.sch-cell .sch-day i { color: var(--acad-blue); margin-right: .3rem; }

/* ── Classes tab (admin) redesign: stat cards + rich table + pagination ──────── */
.ctab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.ctab-stat { display: flex; align-items: center; gap: .9rem; padding: 1.15rem 1.25rem; border-radius: 16px; background: linear-gradient(160deg, #102844, #0d2038); border: 1.5px solid rgba(123,150,230,.28); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.ctab-stat-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.25rem; }
.ctab-stat.blue { border-color: rgba(123,150,230,.32); }
.ctab-stat.blue .ctab-stat-ic { background: linear-gradient(135deg, #3b6fe5, #2647c9); box-shadow: 0 8px 18px rgba(42,79,214,.4); }
.ctab-stat.green .ctab-stat-ic { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 18px rgba(16,185,129,.38); }
.ctab-stat.red { border-color: rgba(244,63,94,.5); background: linear-gradient(160deg, #2a1430, #2a0f1d); }
.ctab-stat.red .ctab-stat-ic { background: linear-gradient(135deg, #ff4d5e, #e11d48); box-shadow: 0 8px 18px rgba(225,29,72,.45); }
.ctab-stat.red.on { box-shadow: 0 0 0 1px rgba(244,63,94,.5), 0 12px 30px rgba(225,29,72,.35); }
.ctab-stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.ctab-stat-title { font-weight: 800; font-size: .98rem; color: #fff; margin-top: .25rem; }
.ctab-stat-sub { font-size: .76rem; color: #9fb0d4; margin-top: .15rem; }
.ctab-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; margin-right: .25rem; animation: pulse 1.4s infinite; }

.ctab-card { background: linear-gradient(160deg, #0e2038, #0b1a30); border: 1.5px solid rgba(123,150,230,.22); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.ctab-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.ctab-table thead th { background: linear-gradient(90deg, #1b3f86, #21468f); color: #cfe0ff; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .9rem 1rem; border: none; white-space: nowrap; }
.ctab-table thead th i { color: #8fb2ff; margin-right: .35rem; }
.ctab-table tbody td { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.ctab-table tbody tr:last-child td { border-bottom: none; }
.ctab-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.ctab-tr.live td { background: linear-gradient(90deg, rgba(225,29,72,.14), rgba(225,29,72,.02)); }
.ctab-tr.live td:first-child { box-shadow: inset 3px 0 0 0 #e11d48; }
.ctab-td-class { min-width: 240px; }
.ctab-class { display: flex; align-items: center; gap: .8rem; }
.ctab-cico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.ctab-class-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: .95rem; line-height: 1.25; white-space: normal; }
.ctab-livelink { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .76rem; font-weight: 700; color: #5b93ff; text-decoration: none; }
.ctab-livelink:hover { text-decoration: underline; }
.ctab-liveban { display: flex; align-items: center; gap: .65rem; margin-top: .65rem; padding: .55rem .7rem; border-radius: 12px; background: rgba(225,29,72,.16); border: 1px solid rgba(244,63,94,.4); }
.ctab-liveban-orb { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #ff4d5e, #e11d48); box-shadow: 0 0 0 0 rgba(225,29,72,.6); animation: liveNowPulse 1.5s ease-out infinite; }
.ctab-liveban-txt { display: flex; flex-direction: column; line-height: 1.2; }
.ctab-liveban-txt b { font-size: .76rem; color: #fff; letter-spacing: .02em; }
.ctab-liveban-txt b span { color: #ff8a96; }
.ctab-liveban-txt small { font-size: .7rem; color: #f3c7cf; }
.ctab-join { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 10px; background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; font-weight: 800; font-size: .76rem; text-decoration: none; box-shadow: 0 6px 16px rgba(225,29,72,.4); }
.ctab-subj { color: #dfe7f7; font-weight: 600; white-space: normal; }
.ctab-tag { display: inline-flex; align-items: center; padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.ctab-tag.level { background: rgba(96,165,250,.18); color: #93c5fd; }
.ctab-dash { color: #6b7a99; }
/* Clickable level pill (opens the level's join link) — works for both the plain
   (.badge.level) and rich (.ctab-tag.level) tables. */
.pill-link { cursor: pointer; text-decoration: none; gap: .35rem; transition: filter .12s, transform .12s, box-shadow .12s; }
.pill-link:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,111,229,.25); }
.pill-link i { font-size: .68em; }
span.badge.level.pill-link, a.badge.level.pill-link { display: inline-flex; align-items: center; }
.ctab-mgr { display: inline-flex; align-items: center; gap: .5rem; color: #dfe7f7; font-weight: 600; }
.ctab-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3b6fe5, #2647c9); color: #fff; font-size: .78rem; }
.ctab-students { display: inline-flex; align-items: center; gap: .45rem; color: #dfe7f7; }
.ctab-students-n { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.05rem; color: #fff; }
.ctab-students-l { font-size: .82rem; color: #9fb0d4; }
.ctab-students i { color: #7c8bb8; }
.ctab-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.ctab-pill.active { background: rgba(16,185,129,.18); color: #34d399; }
.ctab-pill.inactive { background: rgba(148,163,184,.16); color: #94a3b8; }
.ctab-pill.live { background: linear-gradient(135deg, #ff4d5e, #e11d48); color: #fff; box-shadow: 0 4px 14px rgba(225,29,72,.4); }
.ctab-pill.live .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.ctab-actions { display: inline-flex; gap: .4rem; }
.ctab-act { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(123,150,230,.3); background: rgba(59,111,229,.12); color: #aebfe6; cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.ctab-act:hover { background: rgba(59,111,229,.28); color: #fff; }
.ctab-act:active { transform: scale(.94); }
.ctab-act.danger { border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.12); color: #fda4af; }
.ctab-act.danger:hover { background: rgba(244,63,94,.28); color: #fff; }
.ctab-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.ctab-foot-l { display: inline-flex; align-items: center; gap: .55rem; color: #cdd9ef; font-size: .85rem; font-weight: 600; }
.ctab-foot-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #3b6fe5, #2647c9); color: #fff; font-size: .78rem; }
.ctab-pages { display: inline-flex; gap: .35rem; margin-left: auto; }
.ctab-pg { min-width: 36px; height: 36px; padding: 0 .5rem; border-radius: 9px; border: 1px solid rgba(123,150,230,.3); background: rgba(59,111,229,.1); color: #aebfe6; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.ctab-pg:hover:not(:disabled) { background: rgba(59,111,229,.26); color: #fff; }
.ctab-pg.on { background: var(--emerald); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(16,185,129,.35); }
.ctab-pg:disabled { opacity: .4; cursor: not-allowed; }
.ctab-pagesize { height: 36px; padding: 0 .7rem; border-radius: 9px; border: 1px solid rgba(123,150,230,.3); background: #0a1626; color: #cdd9ef; font-weight: 600; font-size: .82rem; cursor: pointer; }
@media (max-width: 980px) { .ctab-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ctab-stats { grid-template-columns: 1fr; } .ctab-foot { justify-content: center; } .ctab-pages { margin-left: 0; } }

/* ---- Class Schedule popover (redesigned) ---- */
.csched-modal { max-width: 660px; padding: 0; overflow: hidden; background: linear-gradient(180deg, #f7f9ff 0%, #eef2fc 100%); }
.csched { padding: 1.4rem 1.5rem 1.3rem; }
.csched-head { display: flex; align-items: flex-start; gap: .85rem; position: relative; }
.csched-head-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; background: linear-gradient(135deg, #3b6fe5, #2a4fd6); box-shadow: 0 8px 18px rgba(42,79,214,.32); }
.csched-head-txt h3 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.45rem; font-weight: 800; color: #0f1c3f; letter-spacing: -.01em; }
.csched-head-txt p { margin: .15rem 0 0; color: #6b7794; font-size: .88rem; }
.csched-x { position: absolute; top: -.2rem; right: -.2rem; width: 34px; height: 34px; border: none; background: transparent; color: #8a94ad; font-size: 1.5rem; line-height: 1; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.csched-x:hover { background: rgba(0,0,0,.05); color: #0f1c3f; }
.csched-hero { display: flex; align-items: center; gap: .85rem; margin-top: 1.1rem; padding: .8rem 1rem; border-radius: 15px; background: #fff; border: 1px solid #e6ebf6; box-shadow: 0 4px 14px rgba(20,40,90,.05); }
.csched-hero-av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.05rem; background: linear-gradient(135deg, #3b6fe5, #1f3fc0); }
.csched-hero-name { flex: 1; min-width: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.18rem; color: #0f1c3f; text-transform: uppercase; letter-spacing: .01em; }
.csched-live { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: linear-gradient(135deg, #ff5b6b, #e11d2e); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .04em; box-shadow: 0 6px 16px rgba(225,29,46,.35); }
.csched-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.csched-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .9rem; padding: .9rem; border-radius: 15px; background: #fff; border: 1px solid #e6ebf6; box-shadow: 0 4px 14px rgba(20,40,90,.05); }
.csched-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .55rem .35rem; }
.csched-card-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eaf0ff; color: #2a4fd6; font-size: .9rem; }
.csched-card-l { color: #6b7794; font-weight: 600; font-size: .86rem; }
.csched-card-v { font-weight: 800; color: #0f1c3f; font-size: .9rem; text-align: right; }
.csched-link { color: #2a4fd6; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.csched-link:hover { text-decoration: underline; }
.csched-link i { font-size: .72rem; }
.csched-muted { color: #9aa3ba; }
.csched-allh { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 0 .7rem; }
.csched-allh-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eaf0ff; color: #2a4fd6; font-size: .9rem; flex: none; }
.csched-allh-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.02rem; color: #0f1c3f; }
.csched-allh-sub { color: #6b7794; font-size: .82rem; }
.csched-rows { display: flex; flex-direction: column; gap: .65rem; }
.csched-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 14px; background: linear-gradient(135deg, #16214a, #0e1838); color: #fff; box-shadow: 0 8px 20px rgba(14,24,56,.22); }
.csched-row-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #3b6fe5, #2647c9); color: #fff; font-size: .95rem; }
.csched-row-main { flex: 1; min-width: 0; }
.csched-row-title { font-weight: 800; font-size: .98rem; }
.csched-row-sub { color: #aab6d8; font-size: .8rem; margin-top: .1rem; }
.csched-row-time { flex: none; padding: .4rem .8rem; border-radius: 999px; border: 1px solid rgba(123,150,230,.45); background: rgba(59,111,229,.18); color: #cdd9ff; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.csched-row-chev { flex: none; color: #7c8bb8; font-size: .8rem; }
.csched-empty { color: #6b7794; padding: .5rem .2rem; }
.csched-foot { display: flex; justify-content: flex-end; margin-top: 1.3rem; }
.csched-close { background: linear-gradient(135deg, #3b6fe5, #2a4fd6); color: #fff; border: none; font-weight: 800; padding: .7rem 1.4rem; border-radius: 12px; display: inline-flex; align-items: center; gap: .5rem; box-shadow: 0 8px 18px rgba(42,79,214,.3); }
.csched-close:hover { filter: brightness(1.05); }
@media (max-width: 560px) {
    .csched-grid { grid-template-columns: 1fr; }
    .csched-modal { max-width: 96vw; }
    .csched-hero-name { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .live-orb { animation: none; } }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.filters { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.25rem; }
.filters .field { margin-bottom: 0; }
.filters label { font-size: .72rem; }

.ts-monthbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ts-month-label { font-size: 1.02rem; font-weight: 700; color: var(--text-heading); min-width: 12rem; text-align: center; }
.ts-monthbar .btn i { pointer-events: none; }

.field { margin-bottom: 1.1rem; }
label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; color: var(--text-heading); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="datetime-local"], input[type="date"], select {
    width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--border); border-radius: 9px;
    font-size: .92rem; color: var(--text-heading); background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.filters input, .filters select { padding: .6rem .75rem; font-size: .88rem; }

.muted { color: var(--text-muted); }
/* Attendance delete dialog — stacked radio/checkbox rows */
.radio-row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-weight: 600; color: var(--text-heading); cursor: pointer; }
.radio-row input[type=radio], .radio-row input[type=checkbox] { width: auto; margin: 0; flex: none; accent-color: var(--emerald); }
.radio-row input[type=month], .radio-row select { padding: .3rem .5rem; font-size: .85rem; }
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-icon { font-size: 2.4rem; color: var(--text-faint); margin-bottom: .75rem; }

.actions { display: flex; gap: 6px; }
.icon-btn { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: .4rem .7rem; font-size: .82rem; color: var(--text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; }
.icon-btn:hover { background: #f8fafc; color: var(--text-heading); }
.icon-btn.danger:hover { background: var(--red-soft); color: var(--red); border-color: var(--red-soft); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(13,27,46,.55); display: grid; place-items: center; padding: 20px; z-index: 50; animation: fade .15s; backdrop-filter: blur(2px); }
@keyframes fade { from { opacity: 0; } }
.modal { background: #fff; border-radius: 18px; width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; }
.modal-head { padding: 1.4rem 1.6rem 0; display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-size: 1.2rem; font-weight: 800; color: var(--text-heading); display: flex; align-items: center; gap: .55rem; }
.modal-head h3 i { color: var(--emerald); }
.modal-body { padding: 1.3rem 1.6rem 1.6rem; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: .5rem; }
.close-x { background: none; border: none; font-size: 1.5rem; color: var(--text-faint); line-height: 1; padding: 4px; }
.close-x:hover { color: var(--text-body); }

/* Toast */

/* ── Appointment reminder card stack (.apnt-*, owner rule July 2026) ─────── */

/* Draggable appointment card */
body.staffdark .apnt-top{cursor:grab;}
body.staffdark .apnt-top:active{cursor:grabbing;}
body.staffdark .apnt-card.apnt-dragging{cursor:grabbing;box-shadow:0 16px 48px rgba(0,0,0,.7);transform:scale(1.02);}
body.staffdark .apnt-card.apnt-dragging .apnt-top{cursor:grabbing;}

.apnt-stack{position:fixed;bottom:24px;right:20px;z-index:1500;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;}
.apnt-card{pointer-events:all;width:320px;background:#0d1829;border:1px solid #1e3a5f;border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.55);overflow:hidden;
  transform:translateX(120%);opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .38s ease;}
.apnt-card.apnt-card-show{transform:translateX(0);opacity:1;}
.apnt-card.apnt-card-out{transform:translateX(120%);opacity:0;}
.apnt-card.apnt-card-now{border-color:#f59e0b60;box-shadow:0 8px 32px rgba(245,158,11,.25);}
/* top row */
.apnt-top{display:flex;align-items:center;gap:10px;padding:12px 12px 8px;}
.apnt-ic{width:36px;height:36px;border-radius:50%;background:rgba(99,102,241,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;color:#818cf8;}
.apnt-card-now .apnt-ic{background:rgba(245,158,11,.18);color:#fbbf24;}
.apnt-info{flex:1;min-width:0;}
.apnt-name{font-size:.92rem;font-weight:700;color:#e2eeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.apnt-lbl{font-size:.75rem;margin-top:1px;}
.apnt-lbl-soon{color:#60a5fa;}
.apnt-lbl-now{color:#f87171;font-weight:700;animation:apntLblBlink .9s ease-in-out infinite;}
@keyframes apntLblBlink{0%,100%{opacity:1}50%{opacity:.55}}
.apnt-xbtn{border:none;background:none;color:#4a6080;cursor:pointer;font-size:.85rem;padding:4px;line-height:1;flex-shrink:0;}
.apnt-xbtn:hover{color:#94a3b8;}
/* ── Appointment contact quick actions (Task #1083) ─────────────────────────
   WhatsApp "Message" button (mirrors the small dark call-btn) + clickable
   contact name/avatar → profile. Used on the appointment panel, the countdown
   alert card and the reminder popup — all staff-only dark surfaces. */
.appt-msg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:2px 8px;vertical-align:middle;border:1px solid rgba(56,189,248,.5);border-radius:6px;
  background:rgba(14,165,233,.12);color:#7dd3fc;font-size:12px;font-weight:600;line-height:1.5;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.appt-msg-btn:hover{background:#0284c7;border-color:#0284c7;color:#fff;}
.appt-msg-btn i{font-size:12px;}
.appt-msg-btn-lg{padding:6px 14px;font-size:13px;}
[data-apopen]{cursor:pointer;}
.aac-cname[data-apopen]:hover,.apnt-name[data-apopen]:hover,.appt-ln[data-apopen]:hover,
.appt-lc-name[data-apopen]:hover{text-decoration:underline;}
.apnt-qa{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.apnt-qa .call-btn,.apnt-qa .appt-msg-btn{margin-left:0;padding:3px 7px;}
.appt-lc-qa{display:flex;align-items:center;gap:6px;margin-top:5px;}
.appt-lc-qa .call-btn,.appt-lc-qa .appt-msg-btn{margin-left:0;}
.appt-row-qa{display:flex;align-items:center;gap:5px;margin-left:auto;padding-left:6px;}
.appt-row-qa .call-btn,.appt-row-qa .appt-msg-btn{margin-left:0;padding:2px 6px;}
.aac-actions .call-btn,.aac-actions .appt-msg-btn{margin-left:0;}
/* Highlighted amber "Appointment Note" box (owner mock) — shared by the reminder
   card (top of card), the My Schedule list rows and the per-lead history tab.
   Dark-surface styling works in all three hosts; long notes wrap, never truncate. */
.apnt-notebox{display:flex;align-items:flex-start;gap:9px;margin:10px 12px 2px;padding:9px 11px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.38);border-radius:11px;}
.apnt-notebox-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(245,158,11,.16);color:#fbbf24;font-size:.85rem;margin-top:1px;}
.apnt-notebox-main{flex:1;min-width:0;}
.apnt-notebox-title{font-size:.72rem;font-weight:800;letter-spacing:.03em;color:#fbbf24;}
.apnt-notebox-txt{font-size:.79rem;color:#e2e8f0;line-height:1.45;margin-top:2px;overflow-wrap:anywhere;white-space:pre-wrap;}
.apnt-card .apnt-notebox-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.apnt-card .apnt-notebox-txt.apnt-note-expandable{cursor:pointer;}
.apnt-card .apnt-notebox-txt.apnt-note-open{display:block;-webkit-line-clamp:unset;overflow:visible;}
.apnt-note-more{display:block;font-size:.68rem;font-weight:700;color:#fbbf24;margin-top:3px;cursor:pointer;user-select:none;}
/* host tweaks: list rows / history rows manage their own padding */
.ams-body .apnt-notebox{margin:0 0 7px;}
.appt-h-body .apnt-notebox{margin:4px 0 5px;padding:7px 9px;}
.appt-h-body .apnt-notebox-ic{width:22px;height:22px;font-size:.75rem;}
.appt-h-body .apnt-notebox-txt{font-size:.74rem;}
/* action buttons — 2x2 vivid grid */
.apnt-btns{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px 12px;}
.apnt-btn{
  border:none;border-radius:10px;padding:9px 6px;font-size:.76rem;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.02em;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,opacity .15s;
  position:relative;overflow:hidden;}
.apnt-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 60%);pointer-events:none;}
.apnt-btn i{font-size:.82rem;transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
.apnt-btn:hover{transform:translateY(-2px) scale(1.04);}
.apnt-btn:hover i{transform:scale(1.25) rotate(-5deg);}
.apnt-btn:active{transform:scale(.95);opacity:.85;}
.apnt-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
/* Completed — emerald green */
.apnt-done{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  box-shadow:0 4px 14px rgba(34,197,94,.45);}
.apnt-done:hover{box-shadow:0 6px 20px rgba(34,197,94,.65);}
/* Missed — amber/orange */
.apnt-miss{
  background:linear-gradient(135deg,#d97706,#f59e0b);
  color:#fff;
  box-shadow:0 4px 14px rgba(245,158,11,.45);}
.apnt-miss:hover{box-shadow:0 6px 20px rgba(245,158,11,.65);}
/* Reschedule — electric blue */
.apnt-res{
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);
  color:#fff;
  box-shadow:0 4px 14px rgba(59,130,246,.45);}
.apnt-res:hover{box-shadow:0 6px 20px rgba(59,130,246,.65);}
.apnt-res i{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.apnt-res:hover i{transform:rotate(180deg) scale(1.2);}
/* Dismiss — rose/red */
.apnt-dis{
  background:linear-gradient(135deg,#be123c,#f43f5e);
  color:#fff;
  box-shadow:0 4px 14px rgba(244,63,94,.4);}
.apnt-dis:hover{box-shadow:0 6px 20px rgba(244,63,94,.6);}

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(150%); background: var(--navy-900); color: #fff; padding: .85rem 1.3rem; border-radius: 12px; font-size: .9rem; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 100; transition: transform .35s var(--fluid); max-width: 90vw; display: flex; align-items: center; gap: .6rem; }
.toast::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--emerald); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--red); }
.toast.err::before { content: '\f071'; color: #fff; }

/* ── Student contact profile card (dark blue) ─────────────────────────────── */
.modal-backdrop:has(.scp-card) .modal { max-width: 1040px; background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
.scp-card { background: #1e2f6b; background: linear-gradient(180deg,#1e3a8a,#172554); color: #fff; border-radius: 20px; border: 1px solid #1e40af; box-shadow: 0 25px 60px rgba(2,6,23,.55); overflow: hidden; max-height: 90vh; overflow-y: auto; }
.scp-card ::-webkit-scrollbar { width: 8px; height: 8px; }
.scp-card ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 4px; }
.scp-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: rgba(124,45,18,.4); border-left: 4px solid #f97316; }
.scp-banner-txt { display: flex; align-items: center; gap: 12px; }
.scp-banner-txt > i { color: #fb923c; font-size: 18px; }
.scp-banner-txt h3 { color: #fdba74; font-size: 13px; font-weight: 700; }
.scp-banner-txt p { color: rgba(254,215,170,.8); font-size: 12px; margin-top: 2px; }
.scp-banner-btn { background: rgba(249,115,22,.2); border: 1px solid rgba(249,115,22,.5); color: #fdba74; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.scp-banner-btn:hover { background: rgba(249,115,22,.4); }
.scp-head { position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 30px 28px 26px; background: linear-gradient(135deg,#091828 0%,#122a50 55%,#0e2042 100%); border-bottom: 1px solid rgba(30,64,175,.7); }
.scp-head::before { content:''; position:absolute; left:-40px; top:-40px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(99,102,241,.28) 0%, transparent 65%); pointer-events:none; }
.scp-head::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size:22px 22px; pointer-events:none; }
.scp-id { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; }
.scp-avatar { width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(135deg,#4f46e5,#7c3aed); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #4f46e5, 0 14px 30px rgba(0,0,0,.45); flex-shrink: 0; transition: box-shadow .2s; }
.scp-avatar.active    { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #10b981, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.due       { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #f59e0b, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.overdue   { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #ef4444, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.churned   { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #8b5cf6, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.cancelled { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #64748b, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.free      { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #06b6d4, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.paused    { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #f59e0b, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.refund    { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #ec4899, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.new       { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #60a5fa, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.custom    { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #a78bfa, 0 14px 30px rgba(0,0,0,.45); }
.scp-avatar.inactive  { box-shadow: 0 0 0 3px #122a50, 0 0 0 5px #475569, 0 14px 30px rgba(0,0,0,.45); }
.scp-name { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.scp-contact { font-size: 13px; color: #bfdbfe; font-weight: 500; margin-top: 5px; }
.scp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.scp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.scp-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background .15s, box-shadow .15s, transform .1s; }
.scp-btn:hover { transform: translateY(-1px); }
.scp-btn.ghost { background: rgba(37,99,235,.22); border-color: rgba(59,130,246,.45); color: #bfdbfe; }
.scp-btn.ghost:hover { background: rgba(37,99,235,.42); box-shadow: 0 0 0 3px rgba(59,130,246,.16); color: #fff; }
.scp-btn.primary { background: linear-gradient(135deg,#4f46e5,#6366f1); color: #fff; border-color: rgba(99,102,241,.5); }
.scp-btn.primary:hover { background: linear-gradient(135deg,#6366f1,#818cf8); box-shadow: 0 0 0 3px rgba(99,102,241,.22); }
.scp-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }
.scp-head .att-standing { font-size: .82rem; font-weight: 700; padding: 4px 12px; letter-spacing: .04em; }
.scp-x { background: none; border: none; color: #bfdbfe; font-size: 26px; line-height: 1; padding: 0 6px; cursor: pointer; }
.scp-x:hover { color: #fff; }
.scp-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; padding: 26px 28px; background: rgba(23,37,84,.4); }
.scp-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.scp-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.scp-sec-title, .scp-sec-head h2 { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #93c5fd; margin-bottom: 14px; }
.scp-sec-title::before, .scp-sec-head h2::before { content:''; flex: none; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(180deg,#6366f1,#3b82f6); display: inline-block; }
.scp-sec-title::after { content:''; flex: 1; height: 1px; background: rgba(37,99,235,.3); display: inline-block; }
.scp-sec-head { display: flex; align-items: center; justify-content: space-between; }
/* Per-user collapsible profile sections: chevron in the header; a collapsed
   section shows ONLY its label header (everything else display:none). */
.scp-sec-toggle { flex: none; margin-left: 8px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(147,197,253,.35); border-radius: 6px; background: rgba(37,99,235,.12); color: #93c5fd; font-size: 10px; cursor: pointer; transition: background .15s, color .15s; }
.scp-sec-toggle:hover { background: rgba(37,99,235,.28); color: #dbeafe; }
.scp-sec.scp-collapsed > *:not(.scp-sec-title):not(.scp-sec-head) { display: none !important; }
.scp-sec.scp-collapsed .scp-sec-title, .scp-sec.scp-collapsed .scp-sec-head h2 { margin-bottom: 0; }
.scp-fin { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 14px; }
.scp-fin-card { background: linear-gradient(155deg,rgba(37,99,235,.32) 0%,rgba(30,64,175,.2) 100%); border: 1px solid rgba(59,130,246,.3); border-left: 3px solid #3b82f6; border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; }
.scp-fin-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,rgba(99,102,241,.55),transparent); pointer-events:none; }
.scp-fin-card.paid { border-left-color: #10b981; background: linear-gradient(155deg,rgba(16,185,129,.18) 0%,rgba(30,64,175,.15) 100%); }
.scp-fin-card.paid .lbl { color: #6ee7b7; }
.scp-fin-card.paid .val { color: #4ade80; }
.scp-fin-card.due { border-left-color: #f59e0b; }
.scp-fin-card.due .lbl { color: #fde68a; }
.scp-fin-card.danger { background: linear-gradient(155deg,rgba(127,29,29,.28) 0%,rgba(153,27,27,.15) 100%); border-color: rgba(239,68,68,.35); border-left-color: #ef4444; }
.scp-fin-card.danger .lbl { color: #fca5a5; }
.scp-fin-card.danger .val { color: #f87171; }
.scp-fin-card.ok { border-left-color: #10b981; }
.scp-fin-card.ok .lbl { color: #6ee7b7; }
.scp-fin-card.ok .val { color: #4ade80; }
.scp-fin-card .lbl { font-size: 11px; color: #93c5fd; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.scp-fin-card .val { font-size: 22px; font-weight: 800; color: #fff; }
.scp-tablewrap { background: rgba(15,35,71,.65); border: 1px solid rgba(37,99,235,.38); border-radius: 16px; overflow: hidden; }
.scp-table { width: 100%; border-collapse: collapse; }
.scp-table thead tr { background: rgba(30,58,138,.6); border-bottom: 1px solid rgba(37,99,235,.5); }
.scp-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #93c5fd; font-weight: 700; padding: 11px 14px; }
.scp-table td { font-size: 13px; color: #e0e7ff; padding: 11px 14px; border-bottom: 1px solid rgba(29,78,216,.25); }
.scp-table tbody tr:nth-child(even) { background: rgba(30,58,138,.15); }
.scp-table tbody tr:last-child td { border-bottom: none; }
.scp-table tbody tr:hover { background: rgba(37,99,235,.28); }
.scp-table .r { text-align: right; }
.scp-table .strong { color: #fff; font-weight: 600; }
.scp-table .pos { color: #4ade80; font-weight: 700; }
.scp-dim { color: #60a5fa; opacity: .7; }
.scp-tag { background: rgba(30,58,138,.7); border: 1px solid #2563eb; color: #bfdbfe; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.scp-badge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.scp-badge.ok { background: rgba(20,83,45,.6); border: 1px solid #15803d; color: #4ade80; }
.scp-badge.warn { background: rgba(113,63,18,.6); border: 1px solid #a16207; color: #facc15; }
.scp-badge.bad { background: rgba(127,29,29,.6); border: 1px solid #b91c1c; color: #f87171; }
.scp-link { background: none; border: none; color: #a5b4fc; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.scp-link:hover { color: #c7d2fe; }
.scp-empty { background: rgba(30,64,175,.35); border: 1px dashed #1d4ed8; border-radius: 14px; padding: 18px; text-align: center; color: #93c5fd; font-size: 13px; }
.scp-panel { background: rgba(30,64,175,.5); border: 1px solid #1d4ed8; border-radius: 14px; padding: 18px; }
.scp-mini-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #93c5fd; font-weight: 700; margin-bottom: 8px; }
.scp-dept { display: inline-block; background: #172554; border: 1px solid #2563eb; color: #bfdbfe; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; }
.scp-transfer { border-top: 1px solid #1d4ed8; margin-top: 16px; padding-top: 16px; }
.scp-transfer-row { display: flex; gap: 8px; }
.scp-select { flex: 1; min-width: 0; background: #172554; border: 1px solid #2563eb; color: #fff; font-size: 13px; padding: 9px 10px; border-radius: 10px; cursor: pointer; outline: none; }
.scp-select:focus { border-color: #6366f1; }
.scp-select option { color: #fff; background: #172554; }
.scp-transfer-row .scp-btn { white-space: nowrap; }
.scp-att { background: rgba(30,64,175,.5); border: 1px solid #1d4ed8; border-radius: 14px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scp-att-card { border-radius: 12px; padding: 12px; text-align: center; }
.scp-att-card.ok { background: rgba(20,83,45,.3); border: 1px solid #166534; }
.scp-att-card.bad { background: rgba(127,29,29,.3); border: 1px solid #991b1b; }
.scp-att-card .n { font-size: 22px; font-weight: 800; }
.scp-att-card.ok .n { color: #4ade80; }
.scp-att-card.bad .n { color: #f87171; }
.scp-att-card .l { font-size: 10px; text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.scp-att-card.ok .l { color: #22c55e; }
.scp-att-card.bad .l { color: #ef4444; }
.scp-att-total { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: rgba(30,58,138,.5); border: 1px solid #1d4ed8; border-radius: 12px; }
.scp-att-total span { font-size: 12px; text-transform: uppercase; font-weight: 700; color: #93c5fd; }
.scp-att-total b { font-size: 18px; font-weight: 800; color: #fff; }
.scp-history { display: flex; flex-direction: column; gap: 16px; }
.scp-hist-val { font-size: 14px; font-weight: 600; color: #fff; }
.scp-hist-who { display: flex; align-items: center; gap: 8px; }
.scp-hist-av { width: 26px; height: 26px; border-radius: 50%; background: #172554; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #93c5fd; }
.scp-hist-who span:last-child { font-size: 14px; font-weight: 600; color: #fff; }
.scp-hist-note { font-size: 12px; color: #93c5fd; font-style: italic; margin-top: 6px; }
.scp-hist-div { border-top: 1px solid #1d4ed8; padding-top: 16px; }
/* Transfer & Department History timeline (profile card sidebar) */
.scp-tlpanel { max-height: 340px; overflow-y: auto; }
/* Profile card — narrow modal / phone */
@media (max-width: 600px) {
    .scp-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px; }
    .scp-head { padding: 24px 16px 20px; }
    .scp-avatar { width: 72px; height: 72px; font-size: 22px; }
    .scp-name { font-size: 22px; }
    .scp-actions { gap: 6px; }
    .scp-btn { padding: 7px 14px; font-size: 12px; }
}
.scp-conv-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.scp-conv-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
.scp-conv-item:hover, .scp-conv-item:focus-visible { background: rgba(59, 130, 246, .08); border-color: #1d4ed8; }
.scp-conv-go { flex: 0 0 auto; align-self: center; font-size: 11px; color: #475569; opacity: 0; transition: opacity .12s; }
.scp-conv-item:hover .scp-conv-go, .scp-conv-item:focus-visible .scp-conv-go { opacity: 1; color: #93c5fd; }
.scp-conv-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #172554; border: 1px solid #1d4ed8; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #93c5fd; margin-top: 2px; }
.scp-conv-body { min-width: 0; flex: 1; }
.scp-conv-top { display: flex; align-items: center; gap: 6px; }
.scp-conv-chan { font-size: 12px; font-weight: 600; color: #e0e7ff; }
.scp-conv-when { font-size: 11px; color: #64748b; margin-left: auto; }
.scp-conv-prev { font-size: 12px; color: #8593ad; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scp-conv-prev i { font-size: 10px; opacity: .75; margin-right: 2px; }
.scp-conv-unread { background: #10b981; color: #fff; border-radius: 999px; font-size: .6rem; font-weight: 700; min-width: 16px; text-align: center; padding: 0 .3rem; line-height: 1.7; }
.scp-callhist { display: flex; flex-direction: column; gap: 0; }
.scp-call-row { padding: 8px 4px; border-bottom: 1px solid rgba(71,85,105,.25); border-radius: 6px; transition: background .12s; }
.scp-call-row[data-call] { cursor: pointer; }
.scp-call-row[data-call]:hover { background: rgba(59,130,246,.08); }
.scp-call-row:last-child { border-bottom: none; padding-bottom: 0; }
.scp-call-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scp-call-dir { font-size: 11px; width: 20px; text-align: center; }
.scp-call-dir.in { color: #34d399; }
.scp-call-dir.out { color: #60a5fa; }
.scp-call-when { font-size: 12px; color: #8593ad; }
.scp-call-dur { font-size: 11px; color: #64748b; background: rgba(100,116,139,.15); padding: 1px 6px; border-radius: 999px; }
.scp-call-open { margin-left: auto; flex-shrink: 0; background: none; border: none; color: #475569; font-size: 11px; padding: 2px 4px; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s; }
.scp-call-row[data-call]:hover .scp-call-open, .scp-call-row[data-call]:focus-within .scp-call-open { opacity: 1; color: #93c5fd; }
.scp-call-note { margin-top: 5px; font-size: 12px; color: #cbd5e1; line-height: 1.5; }
.scp-call-note i { color: #fbbf24; margin-right: 4px; font-size: 11px; }
.scp-call-channel { font-size: 11px; padding: 1px 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.scp-call-channel.wa { background: rgba(37,211,102,.15); color: #25d366; }
.scp-call-channel.dp { background: rgba(96,165,250,.15); color: #60a5fa; }
.scp-call-channel.ms { background: rgba(139,92,246,.15); color: #a78bfa; }
.scp-call-channel:not(.wa):not(.dp):not(.ms) { background: rgba(100,116,139,.15); color: #94a3b8; }
.scp-tl { display: flex; flex-direction: column; gap: 14px; }
.scp-tl-item { display: flex; gap: 10px; align-items: flex-start; }
.scp-tl-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #172554; border: 1px solid #1d4ed8; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #93c5fd; margin-top: 2px; }
.scp-tl-item.done .scp-tl-ic { background: rgba(22,163,74,.25); border-color: #16a34a; color: #4ade80; }
.scp-tl-item.bad .scp-tl-ic { background: rgba(220,38,38,.22); border-color: #dc2626; color: #f87171; }
.scp-tl-ic-cb { background: rgba(14,165,233,.2); border-color: #0ea5e9; color: #38bdf8; }
.scp-tl-body { min-width: 0; flex: 1; }
.scp-tl-title { font-size: 13px; font-weight: 600; color: #e0e7ff; line-height: 1.35; }
.scp-tl-title b { color: #fff; }
.scp-tl-item.done .scp-tl-title b { color: #4ade80; }
.scp-tl-sub { font-size: 12px; color: #93c5fd; margin-top: 2px; overflow-wrap: anywhere; }
.scp-tl-when { font-size: 11px; color: #64748b; margin-top: 3px; }
.scp-tl-by { color: #93c5fd; }
@media (max-width: 820px) {
    .scp-grid { grid-template-columns: 1fr; }
    .scp-fin { grid-template-columns: 1fr; }
    .scp-head { flex-direction: column; }
}
@media (max-width: 600px) {
    .scp-fin { grid-template-columns: repeat(2,1fr); }
}

/* On-screen notification popups (top-right, clickable) */
.notif-pop { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 92vw; }
.notif-pop-card { display: flex; align-items: flex-start; gap: .8rem; width: 340px; max-width: 92vw; padding: .9rem 1rem; background: var(--navy-900); color: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); cursor: pointer; transform: translateY(120%); opacity: 0; transition: transform .35s var(--fluid), opacity .35s var(--fluid); }
.notif-pop-card.show { transform: translateY(0); opacity: 1; }
.notif-pop-card.leave { transform: translateX(120%); opacity: 0; }
.notif-pop-card:hover { box-shadow: 0 14px 38px rgba(0,0,0,.35); }
.notif-pop-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--emerald); color: #fff; font-size: 1rem; }
.notif-pop-main { flex: 1; min-width: 0; }
.notif-pop-title { font-weight: 700; font-size: .93rem; line-height: 1.25; }
.notif-pop-body { font-size: .84rem; color: #cdd7e6; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.notif-pop-cta { font-size: .78rem; font-weight: 700; color: var(--amber); margin-top: 6px; }
.notif-pop-x { flex: none; background: transparent; border: none; color: #8aa0bd; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0 0 .3rem; }
.notif-pop-x:hover { color: #fff; }
/* Speaker toggle on the toast — mutes/unmutes the chime without dismissing the card. */
.notif-pop-mute { flex: none; background: transparent; border: none; color: #8aa0bd; font-size: .95rem; line-height: 1; cursor: pointer; padding: .15rem .25rem 0 .1rem; }
.notif-pop-mute:hover { color: #fff; }
.notif-pop-mute.muted { color: #f0a94b; }
.notif-toolbar-btns { display: flex; align-items: center; gap: .4rem; }
/* Phones: lift the stack above the bottom-center toast so neither covers the other. */
@media (max-width: 700px) {
    .notif-pop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 10px; }
    .notif-pop-card { width: min(340px, calc(100vw - 20px)); }
}

.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-load { display: grid; place-items: center; min-height: 50vh; }
.center-load .spinner { border-color: rgba(16,185,129,.25); border-top-color: var(--emerald); width: 34px; height: 34px; }

/* ════════════ CRM — DARK DISPATCH BOARD ════════════ */
.crm { background: #0a1626; min-height: 100vh; margin: -0 0 0 0; }
.main.crm-mode { background: #0a1626; }
/* Dark-blue theme for EVERY staff surface. `body.staffdark` is added by shell()
   (both renderRoleShell and renderTeacherShell) and removed on the login + student
   screens, so login/student portals stay light. Overriding the theme variables
   cascades to .card/.topbar/table/.field/etc.; modals append to <body> so they get
   their own scoped block further below. `background-color` (not `background`) is
   used so any background-image (e.g. select chevrons) is preserved. */
body.staffdark .main {
    background: #0a1626;
    --bg-surface: #0a1626;
    --white: #0f2138;
    --border: rgba(255,255,255,.08);
    --text-heading: #ffffff;
    --text-body: #ffffff;
    --text-muted: #ffffff;
    --text-faint: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
    --shadow-md: 0 10px 30px rgba(0,0,0,.3);
}
body.staffdark .main th { background-color: rgba(255,255,255,.03); }
body.staffdark .main tbody tr:hover { background-color: rgba(255,255,255,.03); }
body.staffdark .main .btn-ghost { background-color: #0f2138; color: var(--text-body); border-color: rgba(255,255,255,.14); }
body.staffdark .main .btn-ghost:hover { background-color: #16294a; color: #fff; }
body.staffdark .main .icon-btn { background-color: #0f2138; border-color: rgba(255,255,255,.12); color: var(--text-muted); }
body.staffdark .main .icon-btn:hover { background-color: #16294a; color: #fff; }
body.staffdark .main input[type="text"], body.staffdark .main input[type="email"], body.staffdark .main input[type="password"],
body.staffdark .main input[type="number"], body.staffdark .main input[type="datetime-local"], body.staffdark .main input[type="date"],
body.staffdark .main select, body.staffdark .main textarea { background-color: #0a1626; color: var(--text-heading); border-color: rgba(255,255,255,.14); }
body.staffdark .main input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); cursor: pointer; }
body.staffdark .main .badge.inactive { background-color: rgba(148,163,184,.16); color: #94a3b8; }
body.staffdark .main .badge.level { background-color: rgba(96,165,250,.16); color: #93c5fd; }
body.staffdark .main .badge.suspended { background-color: rgba(248,113,113,.16); color: #f87171; border-color: rgba(248,113,113,.4); }
body.staffdark .main .status-pill.out { background-color: rgba(255,255,255,.06); }
/* Communication page surfaces */
body.staffdark .main .comm-stat { background-color: #0f2138; }
body.staffdark .main .comm-panel { background-color: #0f2138; }
body.staffdark .main .comm-table th { background-color: rgba(255,255,255,.03); }
body.staffdark .main .comm-table td { border-bottom-color: rgba(255,255,255,.06); }
body.staffdark .main .comm-select, body.staffdark .main .comm-input { background-color: #0a1626; color: var(--text-heading); border-color: rgba(255,255,255,.14); }
body.staffdark .main .comm-select:disabled { background-color: rgba(255,255,255,.04); }
body.staffdark .main .comm-agents { background-color: #0a1626; border-color: rgba(255,255,255,.14); }
body.staffdark .main .comm-agent-tools { border-bottom-color: rgba(255,255,255,.1); }
body.staffdark .main .comm-agent-search.comm-input { background-color: transparent; border: none; }
body.staffdark .main .comm-agent:hover { background-color: #16294a; }
body.staffdark .main .comm-agent-count { background-color: rgba(168,85,247,.16); color: #c4b5fd; }
body.staffdark .main .comm-agent-chk { border-color: rgba(255,255,255,.22); }
body.staffdark .main .comm-agent input:checked ~ .comm-agent-txt .comm-agent-nm { color: #c4b5fd; }
body.staffdark .main .comm-btn { background-color: #0f2138; color: var(--text-body); border-color: rgba(255,255,255,.14); }
body.staffdark .main .comm-btn.ghost:hover { background-color: #16294a; }

/* Live screen viewer (Timesheets → "View screen" on an open entry). Dark by design
   (it shows a live screen image) so it needs no staffdark overrides. */
.swx-btn { background: #1d4ed8; color: #fff; border: none; white-space: nowrap; }
.swx-btn:hover { background: #1e40af; color: #fff; }
body.staffdark .main .swx-btn { background: #2563eb; }
body.staffdark .main .swx-btn:hover { background: #1d4ed8; }
.swx-overlay {
    position: fixed; inset: 0; z-index: 3200; background: rgba(2, 8, 20, .78);
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.swx-modal {
    background: #0b1526; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    width: min(1120px, 96vw); max-height: 94vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 70px rgba(0,0,0,.55); overflow: hidden;
}
.swx-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.swx-title { display: flex; align-items: center; gap: 10px; min-width: 0; color: #e2e8f0; }
.swx-live {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(239,68,68,.16);
    color: #fca5a5; border: 1px solid rgba(239,68,68,.35); border-radius: 999px;
    padding: 2px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
}
.swx-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.swx-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swx-sub { color: #94a3b8; font-size: 13px; white-space: nowrap; }
.swx-close {
    background: rgba(255,255,255,.08); border: none; color: #cbd5e1; width: 32px; height: 32px;
    border-radius: 8px; cursor: pointer; font-size: 15px; flex: 0 0 auto;
}
.swx-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.swx-body {
    position: relative; background: #000; min-height: 240px;
    display: flex; align-items: center; justify-content: center; flex: 1 1 auto; overflow: hidden;
}
.swx-img { max-width: 100%; max-height: calc(94vh - 130px); display: block; }
/* Live camera thumbnail (Task #367) — bottom-right corner overlay in the viewer. */
.swx-cam {
    position: absolute; right: 14px; bottom: 14px; z-index: 5;
    width: 168px; border-radius: 10px; overflow: hidden;
    background: rgba(2, 6, 23, .85); border: 1px solid rgba(148, 163, 184, .35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.swx-cam img { display: block; width: 100%; }
.swx-cam-off {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: #64748b; font-size: 11px; padding: 18px 10px;
}
.swx-cam-off i { font-size: 16px; }
.swx-status {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    color: #94a3b8; font-size: 14px; text-align: center; padding: 46px 20px;
}
.swx-foot {
    padding: 9px 16px; color: #64748b; font-size: 12px; border-top: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; gap: 7px;
}
.swx-headbtns { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.swx-tabs { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; margin-right: 8px; flex-wrap: wrap; }
.swx-tab {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1;
    border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.swx-tab:hover { background: rgba(255,255,255,.14); color: #fff; }
.swx-tab.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.swx-cover {
    display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 12.5px;
    background: rgba(245,158,11,.12); color: #fbbf24; border-bottom: 1px solid rgba(245,158,11,.25);
}
.swx-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px;
    width: 100%; height: 100%; padding: 8px; align-items: center; overflow: auto;
}
.swx-grid.two { grid-template-columns: 1fr 1fr; }
.swx-cell { position: relative; background: #05080f; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
    overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.swx-cell:hover { border-color: #3b82f6; }
.swx-cell img { max-width: 100%; max-height: 100%; display: block; }
.swx-cell-tag { position: absolute; top: 6px; left: 6px; z-index: 1; background: rgba(2,8,20,.7); color: #93c5fd;
    font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; }
.swx-cell-wait { color: #64748b; font-size: 12.5px; padding: 20px; }
.swx-modal:fullscreen { width: 100vw; max-height: 100vh; border-radius: 0; border: none; }
.swx-modal:fullscreen .swx-img { max-height: calc(100vh - 120px); }
@media (max-width: 640px) {
    .swx-overlay { padding: 8px; }
    .swx-sub { display: none; }
    .swx-tabs { order: 3; width: 100%; margin: 6px 0 0; }
    .swx-head { flex-wrap: wrap; }
}

/* Worker multi-monitor banner: fixed bottom bar asking to share the other screen(s). */
.xs-banner {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3300;
    display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 24px));
    background: #0b1526; border: 1px solid rgba(59,130,246,.45); border-radius: 12px;
    padding: 12px 14px; color: #dbe7f6; box-shadow: 0 14px 40px rgba(0,0,0,.5); font-size: 13.5px;
}
.xs-banner > i { color: #60a5fa; font-size: 18px; flex: 0 0 auto; }
.xs-banner .xs-txt { min-width: 0; }
.xs-banner .xs-txt b { color: #fff; }
.xs-banner .xs-share {
    background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 8px 14px;
    font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.xs-banner .xs-share:hover { background: #1d4ed8; }
.xs-banner .xs-share:disabled { opacity: .6; cursor: default; }
.xs-banner .xs-dismiss {
    background: rgba(255,255,255,.08); border: none; color: #94a3b8; width: 28px; height: 28px;
    border-radius: 7px; cursor: pointer; flex: 0 0 auto;
}
.xs-banner .xs-dismiss:hover { background: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 560px) { .xs-banner { flex-wrap: wrap; } .xs-banner .xs-share { width: 100%; } }

/* "View as" — admin preview banner + page. The banner sits above the shell (normal
   flow) so it never overlaps the sidebar; the shell shrinks to fill the rest. */
.imp-bar { display: flex; align-items: center; justify-content: center; gap: 1.2rem; height: 42px; padding: 0 1rem; background: linear-gradient(90deg,#b45309,#d97706); color: #fff; font-size: .85rem; font-weight: 700; }
.imp-bar i { opacity: .92; }
.imp-return { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff; padding: .34rem .9rem; border-radius: 8px; font-weight: 700; font-size: .8rem; cursor: pointer; transition: background .15s; }
.imp-return:hover { background: rgba(255,255,255,.32); }
.imp-empty { opacity: .85; font-weight: 600; font-style: italic; }
.shell.has-imp-bar { height: calc(100vh - 42px); height: calc(100dvh - 42px); }
.viewas-card { max-width: 1000px; }
.viewas-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.viewas-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg,#7c3aed,#a855f7); }
.viewas-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--text-heading); }
.viewas-desc { font-size: .88rem; color: var(--text-muted); margin-top: .25rem; line-height: 1.5; }
.viewas-controls { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.viewas-controls .field { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .4rem; }
.viewas-controls .field label { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.viewas-controls select { padding: .62rem .75rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .9rem; }
.viewas-controls .field input { padding: .62rem .75rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .9rem; }
.viewas-controls .btn { flex: none; height: 44px; }
.viewas-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; max-height: 460px; overflow-y: auto; }
.va-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: .8rem 1rem; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.va-row:hover { border-color: var(--emerald-border, #6ee7b7); box-shadow: 0 2px 10px rgba(16,185,129,.08); }
.va-id { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.va-av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.va-av.av-0 { background: #ede9fe; color: #7c3aed; }
.va-av.av-1 { background: #e0f2fe; color: #0284c7; }
.va-av.av-2 { background: #dcfce7; color: #16a34a; }
.va-av.av-3 { background: #fef3c7; color: #d97706; }
.va-av.av-4 { background: #fce7f3; color: #db2777; }
.va-av.av-5 { background: #ede9fe; color: #6d28d9; }
.va-id-text { min-width: 0; }
.va-row-name { font-weight: 800; color: #0A2540; display: flex; align-items: center; gap: .5rem; }
.va-row-email { font-size: .82rem; color: #64748b; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-dept { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.va-dept-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #f1f5f9; color: #475569; display: grid; place-items: center; font-size: .95rem; }
.va-dept-name { font-weight: 600; color: #0f2540; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-row-status { font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #b45309; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.3); border-radius: 999px; padding: .1rem .5rem; }
.va-row-go { flex: none; height: 40px; }
@media (max-width: 720px) {
    .va-row { grid-template-columns: 1fr auto; gap: .6rem 1rem; }
    .va-dept { grid-column: 1; }
    .va-row-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
/* The Login-as rows keep a white card background even on the dark admin page, so
   force their text dark there (otherwise --text-heading/--text-muted flip to white
   and the worker name + department/email line vanish white-on-white). */
body.staffdark .main .va-row-name { color: #0A2540; }
body.staffdark .main .va-row-email { color: #64748b; }
body.staffdark .main .va-dept-name { color: #0f2540; }
.imp-log-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.imp-log-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: .55rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.imp-log-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
.imp-log-table tr:last-child td { border-bottom: none; }
.imp-log-when { white-space: nowrap; color: var(--text-muted); }
.imp-log-table code { font-size: .82rem; background: rgba(148,163,184,.16); padding: .08rem .35rem; border-radius: 5px; }
.imp-log-method { font-weight: 800; letter-spacing: .02em; }
.imp-log-login { color: #2563eb; font-weight: 700; }
.imp-log-ok { color: var(--text-body); }
.imp-log-fail { color: #dc2626; }
body.staffdark .main .imp-log-table code { background: rgba(255,255,255,.08); color: #cbd5e1; }
body.staffdark .main .imp-log-login { color: #93c5fd; }
body.staffdark .main .imp-log-fail { color: #f87171; }
.crm-top { padding: 1.5rem 2rem 0; }
.crm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.crm-title { display: flex; align-items: center; gap: .7rem; }
.crm-title h1 { font-size: 1.7rem; font-weight: 800; color: #f0f6ff; font-family: 'Plus Jakarta Sans', sans-serif; }
.crm-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(16,185,129,.15); color: var(--emerald); border: 1px solid var(--emerald-border); border-radius: 999px; padding: .25rem .7rem; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.crm-sub { color: #ffffff; font-size: .85rem; margin-top: .25rem; }
.crm-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.crm-btn { display: inline-flex; align-items: center; gap: 7px; padding: .6rem 1rem; border-radius: 9px; font-size: .82rem; font-weight: 700; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #ffffff; transition: all .15s; }
.crm-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.crm-btn.primary { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); border-color: transparent; color: #fff; }
.crm-btn.primary:hover { opacity: .92; }
.crm-btn.danger { color: #ff9a93; border-color: rgba(226,89,80,.35); background: rgba(226,89,80,.12); }
.crm-btn.danger:hover { background: rgba(226,89,80,.22); color: #ffb4ae; }

.crm-tabs { display: flex; gap: .35rem; margin: 1.25rem 0 0; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 2rem; }
.crm-tab { padding: .8rem 1.1rem; font-size: .88rem; font-weight: 700; color: #ffffff; cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: .5rem; }
.crm-tab:hover { color: #ffffff; }
.crm-tab.active { color: #6ee7b7;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06));
    border-radius: 9px 9px 0 0; box-shadow: inset 0 -3px 0 0 var(--emerald); }
.crm-tab.active i { color: #34d399; opacity: 1; }

.crm-body { padding: 1.5rem 2rem 3rem; }

.crm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.crm-stat { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.1rem 1.2rem; position: relative; overflow: hidden; cursor: pointer; transition: all .2s var(--fluid); }
.crm-stat:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); }
.crm-stat.active { border-color: var(--accent, var(--emerald)); box-shadow: 0 0 0 1px var(--accent, var(--emerald)); }
.crm-stat::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--accent, var(--emerald)); }
.crm-stat .st-top { display: flex; align-items: center; justify-content: space-between; }
.crm-stat .st-ico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--accent, var(--emerald)); background: color-mix(in srgb, var(--accent, #10B981) 16%, transparent); }
.crm-stat .st-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.9rem; font-weight: 800; color: #f0f6ff; line-height: 1; margin-top: .55rem; }
.crm-stat .st-label { font-size: .72rem; color: #ffffff; font-weight: 600; margin-top: .3rem; text-transform: uppercase; letter-spacing: .04em; }

.crm-search { display: flex; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.crm-search .inp { position: relative; flex: 1; min-width: 220px; }
.crm-search .inp i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #ffffff; font-size: .9rem; }
.crm-search input, .crm-search select { width: 100%; padding: .7rem .85rem .7rem 2.4rem; background: #0f2138; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #e6eef9; font-size: .9rem; }
.crm-search select { padding-left: .85rem; min-width: 170px; flex: none; }
.crm-search input::placeholder { color: #5b738f; }
.crm-search input:focus, .crm-search select:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.crm-search option { background: #0f2138; }

/* Financial ledger filter panel (Task #144) */
.ldg-filter { margin-bottom: 1.1rem; }
.ldg-searchrow { display: flex; gap: .7rem; align-items: stretch; }
.ldg-scope-chip { display: inline-flex; align-items: center; gap: .5rem; margin-top: .65rem; padding: .45rem .95rem; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.4); border-radius: 999px; color: #6ee7b7; font-size: .85rem; font-weight: 600; }
.ldg-scope-chip button { background: none; border: none; color: #6ee7b7; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.ldg-scope-chip button:hover { color: #fff; }
/* Ledger multi-select + bulk action bar (Task #288) */
.ldg-selth, .ldg-seltd { width: 34px; text-align: center; }
.ldg-selth input, .ldg-seltd input { width: 15px; height: 15px; cursor: pointer; accent-color: #3b82f6; vertical-align: middle; }
.ldg-bulkbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .65rem 0; padding: .55rem .9rem; background: rgba(59,130,246,.10); border: 1px solid rgba(59,130,246,.35); border-radius: 12px; color: #bfdbfe; font-size: .85rem; }
.ldg-bulk-count { font-weight: 600; display: inline-flex; gap: .45rem; align-items: center; }
.ldg-bulk-link { background: none; border: none; color: #93c5fd; text-decoration: underline; cursor: pointer; font-size: .83rem; padding: 0; }
.ldg-bulk-link:hover { color: #fff; }
.ldg-bulk-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.ldg-bulk-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 8px; border: 1px solid rgba(148,163,184,.35); background: rgba(30,41,59,.6); color: #e2e8f0; font-size: .8rem; font-weight: 600; cursor: pointer; }
.ldg-bulk-btn:hover { background: rgba(51,65,85,.8); }
.ldg-bulk-btn.danger { border-color: rgba(239,68,68,.5); color: #fca5a5; }
.ldg-bulk-btn.danger:hover { background: rgba(127,29,29,.45); color: #fecaca; }
.ldg-bulk-btn.ghost { padding: .35rem .5rem; }
@media (max-width: 720px) { .ldg-bulk-actions { margin-left: 0; width: 100%; } }
.ldg-search { position: relative; flex: 1; min-width: 0; }
.ldg-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #3b82f6; font-size: .95rem; }
.ldg-search input { width: 100%; padding: .85rem 1rem .85rem 2.7rem; background: #0b1a2e; border: 1px solid rgba(59,130,246,.28); border-radius: 11px; color: #e6eef9; font-size: .92rem; }
.ldg-search input::placeholder { color: #5b738f; }
.ldg-search input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.ldg-filters-toggle { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.15rem; background: #0b1a2e; border: 1px solid rgba(59,130,246,.35); border-radius: 11px; color: #cfe0f7; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ldg-filters-toggle i.fa-filter { color: #3b82f6; }
.ldg-filters-toggle .ldg-tgl-caret { transition: transform .18s ease; font-size: .78rem; color: #6b85a8; }
.ldg-filters-toggle.open .ldg-tgl-caret { transform: rotate(180deg); }
.ldg-panel { margin-top: .8rem; background: #0b1a2e; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.25rem 1.4rem; }
.ldg-panel[hidden] { display: none; }
.ldg-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.ldg-panel-title { font-size: 1.02rem; font-weight: 700; color: #f0f6ff; }
.ldg-clear { display: inline-flex; align-items: center; gap: .45rem; color: #3b82f6; font-size: .86rem; font-weight: 600; cursor: pointer; }
.ldg-clear:hover { color: #60a5fa; }
/* Ledger contact cell + assign/edit picker */
.ldg-ccell { cursor: pointer; }
.ldg-ccell .ldg-cname { font-weight: 600; color: #7fb3ff; text-decoration: underline dotted rgba(127,179,255,.55); text-underline-offset: 3px; }
.ldg-ccell:hover .ldg-cname { color: #a9ccff; }
.ldg-assign { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; font-size: .74rem; font-weight: 600; color: #34d399; cursor: pointer; }
.ldg-assign:hover { color: #6ee7b7; }
.ldg-picked { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08); border-radius: 8px; font-size: .85rem; }
.ldg-picked i { color: #34d399; }
.ldg-picked a { margin-left: auto; font-size: .75rem; color: #f87171; cursor: pointer; }
.ldg-picked a:hover { color: #fca5a5; }
.ldg-pick-results { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow: auto; margin-top: .3rem; }
.ldg-pick { display: flex; align-items: center; gap: .5rem; text-align: left; width: 100%; padding: .4rem .55rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius: 8px; color: #e7eefc; font-size: .84rem; cursor: pointer; }
.ldg-pick:hover { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.35); }
.ldg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.ldg-field { display: flex; flex-direction: column; gap: .5rem; }
.ldg-field > label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #7f97b5; font-weight: 700; }
.ldg-select { position: relative; }
.ldg-select > i.ldg-lead { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #3b82f6; font-size: .9rem; pointer-events: none; z-index: 1; }
.ldg-select > i.ldg-caret { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #6b85a8; font-size: .78rem; pointer-events: none; }
.ldg-select select { width: 100%; padding: .78rem 2.4rem .78rem 2.5rem; background: #0f2138; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #e6eef9; font-size: .9rem; appearance: none; cursor: pointer; }
.ldg-select select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.ldg-select option { background: #0f2138; }
.ldg-daterange { position: relative; }
.ldg-daterange > summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .78rem 2.4rem .78rem 2.5rem; background: #0f2138; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #e6eef9; font-size: .9rem; cursor: pointer; position: relative; }
.ldg-daterange > summary::-webkit-details-marker { display: none; }
.ldg-daterange > summary > i.ldg-lead { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #3b82f6; font-size: .9rem; }
.ldg-daterange > summary > i.ldg-caret { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #6b85a8; font-size: .78rem; transition: transform .18s ease; }
.ldg-daterange[open] > summary > i.ldg-caret { transform: translateY(-50%) rotate(180deg); }
.ldg-daterange[open] > summary { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.ldg-date-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; min-width: 240px; background: #0f2138; border: 1px solid rgba(59,130,246,.35); border-radius: 11px; padding: .9rem; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.ldg-date-pop label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #7f97b5; font-weight: 700; margin-bottom: .3rem; }
.ldg-date-pop input[type=date] { width: 100%; padding: .55rem .65rem; background: #0b1a2e; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; font-size: .86rem; margin-bottom: .7rem; color-scheme: dark; }
.ldg-date-pop input[type=date]:focus { outline: none; border-color: #3b82f6; }
.ldg-date-pop-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.ldg-date-pop-actions button { padding: .45rem .9rem; border-radius: 8px; font-size: .82rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.ldg-date-pop-actions .ldg-dp-clear { background: transparent; border-color: rgba(255,255,255,.15); color: #cfe0f7; }
.ldg-date-pop-actions .ldg-dp-apply { background: #3b82f6; color: #fff; }
.ldg-actions { margin-top: 1.25rem; }
.ldg-export-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.25rem; background: #0f2138; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #f0f6ff; font-size: .9rem; font-weight: 600; cursor: pointer; }
.ldg-export-btn i { color: #3b82f6; }
.ldg-export-btn:hover { border-color: rgba(59,130,246,.5); }
@media (max-width: 900px) { .ldg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ldg-grid { grid-template-columns: 1fr; } .ldg-searchrow { flex-direction: column; } }

.crm-table-wrap { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; }
.crm-table-scroll { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.crm-table th { text-align: left; padding: .85rem 1.1rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #ffffff; font-weight: 700; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.crm-table td { padding: .8rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.05); color: #ffffff; vertical-align: middle; }
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover { background: rgba(255,255,255,.025); }
.cell-client { display: flex; align-items: center; gap: .7rem; }
.cl-avatar { width: 34px; height: 34px; border-radius: 50%; background: #16294d; color: var(--emerald); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; flex-shrink: 0; }
.cl-name { color: #f0f6ff; font-weight: 600; }
.cl-meta { font-size: .74rem; color: #ffffff; display: flex; align-items: center; gap: 5px; }
.subj { color: #f0f6ff; font-weight: 600; }
.mode-chip { font-size: .72rem; color: #93a4bd; display: inline-flex; align-items: center; gap: 5px; }
.price-input { width: 92px; padding: .45rem .55rem .45rem 1.4rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #f0f6ff; font-size: .85rem; font-weight: 600; }
.price-wrap { position: relative; display: inline-block; }
.price-wrap::before { content: '$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #ffffff; font-size: .82rem; }
.price-input:focus { outline: none; border-color: var(--emerald); }
.crm-select { padding: .42rem 1.8rem .42rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; appearance: none; background-repeat: no-repeat; background-position: right .6rem center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236b85a8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.crm-select:focus { outline: none; }
.st-new { background: rgba(59,130,246,.16); color: #60a5fa; }
.st-pending { background: rgba(245,158,11,.16); color: #fbbf24; }
.st-scheduled { background: rgba(139,92,246,.18); color: #a78bfa; }
.st-completed { background: rgba(16,185,129,.16); color: #34d399; }
.st-cancelled { background: rgba(226,89,80,.16); color: #f87171; }
.tutor-select { background: #0a1626; color: #ffffff; border: 1px solid rgba(255,255,255,.12); padding-left: .7rem; }
.tutor-select.unassigned { color: #ffffff; }
.crm-row-actions { display: flex; gap: 5px; }
.crm-icon-btn { width: 30px; height: 30px; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #93a4bd; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; transition: all .15s; }
.crm-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.crm-icon-btn.danger:hover { background: rgba(226,89,80,.2); color: #ff9a93; border-color: rgba(226,89,80,.35); }
.crm-empty { text-align: center; padding: 3.5rem 1.5rem; color: #ffffff; }
.crm-empty .ic { font-size: 2.6rem; color: #2a3f5f; margin-bottom: .8rem; }
.crm-empty .crm-btn { margin-top: 1rem; }
.crm-load { display: grid; place-items: center; min-height: 40vh; }
.crm-load .spinner { border-color: rgba(16,185,129,.25); border-top-color: var(--emerald); width: 32px; height: 32px; }
.crm-empty h3 { color: #ffffff; font-size: 1.05rem; margin: .2rem 0 .35rem; }
.crm-empty p { font-size: .88rem; max-width: 420px; margin: 0 auto; }

/* ── CRM Dashboard ─────────────────────────────────────────────────────────── */
.dash { display: flex; flex-direction: column; gap: 1.1rem; }
.dash-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.dash-stats.cols-4 { grid-template-columns: repeat(4, 1fr); }
.dash-stats.cols-5 { grid-template-columns: repeat(5, 1fr); }
.dash-stats.cols-6 { grid-template-columns: repeat(6, 1fr); }
.dash-stats.cols-7 { grid-template-columns: repeat(7, 1fr); }
.dash-stats.cols-8 { grid-template-columns: repeat(8, 1fr); }
.dash-stats.cols-9 { grid-template-columns: repeat(9, 1fr); }
@media (max-width: 1200px) { .dash-stats.cols-9 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .dash-stats.cols-9 { grid-template-columns: repeat(2, 1fr); } }
.dash-stats.cols-10 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .dash-stats.cols-10 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .dash-stats.cols-10 { grid-template-columns: repeat(2, 1fr); } }
.dash-stats.cols-11 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .dash-stats.cols-11 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .dash-stats.cols-11 { grid-template-columns: repeat(2, 1fr); } }
.dash-stat { position: relative; background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 1.1rem 1.2rem 1rem; cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s; overflow: hidden; }
.dash-stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ds-accent, #60a5fa); opacity: .9; }
.dash-stat:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.dash-stat-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.dash-stat-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; color: var(--ds-accent, #60a5fa); background: color-mix(in srgb, var(--ds-accent, #60a5fa) 16%, transparent); }
.dash-stat-label { font-size: .82rem; font-weight: 700; color: #aeb9cc; }
.dash-stat-val { font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1; }
.dash-stat-sub { font-size: .76rem; color: #ffffff; margin-top: .35rem; }
.dash-stat-link { margin-top: .8rem; font-size: .78rem; font-weight: 700; color: var(--ds-accent, #60a5fa); display: flex; align-items: center; gap: .35rem; }
.dash-stat.tone-violet { --ds-accent: #a78bfa; }
.dash-stat.tone-blue   { --ds-accent: #60a5fa; }
.dash-stat.tone-green  { --ds-accent: #34d399; }
.dash-stat.tone-amber  { --ds-accent: #fbbf24; }
.dash-stat.tone-red    { --ds-accent: #f87171; }
.dash-stat.tone-slate  { --ds-accent: #94a3b8; }

.dash-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.1rem; }
.dash-panel { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dash-panel-head h3 { font-size: .98rem; font-weight: 700; color: #e6eef9; display: flex; align-items: center; gap: .55rem; }
.dash-panel-head h3 i { color: var(--emerald); }
.dash-link { font-size: .8rem; font-weight: 700; color: #60a5fa; cursor: pointer; }
.dash-link:hover { text-decoration: underline; }
.dash-empty { color: #ffffff; font-size: .85rem; padding: 1.4rem 0; text-align: center; }

.dash-feed { display: flex; flex-direction: column; gap: .15rem; }
.dash-feed-row { display: flex; align-items: center; gap: .8rem; padding: .6rem .25rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.dash-feed-row:last-child { border-bottom: none; }
.dash-feed-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: .82rem; flex-shrink: 0; }
.dash-feed-body { flex: 1; font-size: .85rem; color: #9fb0c7; min-width: 0; }
.dash-feed-body strong { color: #e6eef9; font-weight: 700; }
.dash-feed-time { font-size: .74rem; color: #ffffff; white-space: nowrap; }

.dash-donut-wrap { display: flex; align-items: center; gap: 1.4rem; }
.dash-donut { width: 150px; height: 150px; border-radius: 50%; position: relative; flex-shrink: 0; }
.dash-donut-hole { position: absolute; inset: 26px; background: #0f2138; border-radius: 50%; display: grid; place-content: center; text-align: center; }
.dash-donut-num { font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; }
.dash-donut-cap { font-size: .72rem; color: #ffffff; text-transform: uppercase; letter-spacing: .05em; }
.dash-legend { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.dash-leg-row { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: #aeb9cc; }
.dash-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dash-leg-label { flex: 1; }
.dash-leg-val { color: #e6eef9; font-weight: 700; }

.dash-dl-list { display: flex; flex-direction: column; gap: .6rem; }
.dash-dl-row { display: flex; align-items: center; gap: .85rem; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 11px; padding: .65rem .8rem; }
.dash-dl-date { width: 46px; flex-shrink: 0; text-align: center; background: rgba(96,165,250,.12); border-radius: 9px; padding: .35rem 0; }
.dash-dl-date span { display: block; font-size: .62rem; font-weight: 700; color: #60a5fa; letter-spacing: .05em; }
.dash-dl-date strong { display: block; font-size: 1.1rem; color: #e6eef9; line-height: 1; }
.dash-dl-body { flex: 1; min-width: 0; }
.dash-dl-title { font-size: .88rem; font-weight: 700; color: #e6eef9; }
.dash-dl-meta { font-size: .75rem; color: #ffffff; margin-top: .15rem; }
.dash-badge { font-size: .7rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
.dash-badge.db-red { background: rgba(248,113,113,.16); color: #f87171; }
.dash-badge.db-amber { background: rgba(251,191,36,.16); color: #fbbf24; }
.dash-badge.db-green { background: rgba(52,211,153,.16); color: #34d399; }

.dash-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.dash-sum-cell { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 12px; padding: 1rem; text-align: center; }
.dash-sum-ic { font-size: 1.2rem; }
.dash-sum-num { font-size: 1.6rem; font-weight: 800; color: #fff; margin-top: .4rem; }
.dash-sum-lab { font-size: .75rem; color: #ffffff; margin-top: .2rem; }

.dash-fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dash-fin-cell { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 12px; padding: .85rem .9rem; }
.dash-fin-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: .92rem; flex-shrink: 0; }
.dash-fin-val { font-size: 1.05rem; font-weight: 800; color: #fff; }
.dash-fin-lab { font-size: .74rem; color: #ffffff; }

.dash-team-list { display: flex; flex-direction: column; gap: .35rem; }
.dash-team-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .25rem; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .85rem; }
.dash-team-row:last-child { border-bottom: none; }
.dash-team-name { flex: 1; color: #e6eef9; font-weight: 600; }
.dash-team-stat { color: #9fb0c7; font-size: .8rem; white-space: nowrap; }
.dash-team-stat i { color: #ffffff; margin-right: .25rem; }

/* CRM tasks table helpers */
.tg-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
.tg-amber { background: rgba(251,191,36,.16); color: #fbbf24; }
.tg-red { background: rgba(248,113,113,.16); color: #f87171; }
.tg-gray { background: rgba(148,163,184,.16); color: #94a3b8; }
.status-pill.sp-blue { background: rgba(96,165,250,.16); color: #60a5fa; border: none; margin: 0; padding: .25rem .7rem; font-size: .74rem; }
.status-pill.sp-amber { background: rgba(251,191,36,.16); color: #fbbf24; border: none; margin: 0; padding: .25rem .7rem; font-size: .74rem; }
.status-pill.sp-green { background: rgba(52,211,153,.16); color: #34d399; border: none; margin: 0; padding: .25rem .7rem; font-size: .74rem; }
.task-kind { color: #9fb0c7; font-size: .82rem; }
.task-kind i { color: #ffffff; margin-right: .3rem; }
.task-overdue { color: #f87171; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1100px) {
    .dash-stats,
    .dash-stats.cols-4,
    .dash-stats.cols-5,
    .dash-stats.cols-6,
    .dash-stats.cols-7 { grid-template-columns: repeat(2, 1fr); }
    .dash-row { grid-template-columns: 1fr; }
}

/* ════════════ ADAPTIVE SIDE NAVIGATION ════════════ */
/* Hamburger, backdrop and in-drawer close are hidden in pinned (desktop) mode and
   shown only in drawer mode (narrow screens or a focused full-screen view). */
.sb-menu-btn {
    display: none; position: fixed; top: .85rem; left: .85rem; z-index: 70;
    width: 42px; height: 42px; border: none; border-radius: 11px; cursor: pointer;
    background: var(--navy-900, #0d2444); color: #f0f6ff; font-size: 1.1rem;
    align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(8,20,40,.28);
}
.shell.has-imp-bar .sb-menu-btn { top: calc(.85rem + 40px); }
.sb-menu-btn:hover { filter: brightness(1.12); }
.sb-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(8,16,32,.5); opacity: 0; transition: opacity .2s ease;
}
.sb-backdrop[hidden] { display: none; }
.shell.drawer-open .sb-backdrop { opacity: 1; }
.sb-close {
    display: none; margin-left: auto; width: 34px; height: 34px; flex-shrink: 0;
    border: none; border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,.08); color: #cdd9ee; font-size: 1rem;
    align-items: center; justify-content: center;
}
.sb-close:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Shared drawer presentation — used by the <768px media query AND focus mode. */
.shell.focus-mode .sb-menu-btn,
.shell.focus-mode .sb-close { display: inline-flex; }
.shell.focus-mode .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 84vw;
    z-index: 60; transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 18px 50px rgba(8,16,32,.45);
}
.shell.focus-mode.drawer-open .sidebar { transform: translateX(0); }
.shell.focus-mode .main { width: 100%; }
.shell.focus-mode .topbar { padding-left: 4.25rem; }

/* Desktop manual collapse — a deliberate hide that REFLOWS the content into the freed
   space (true reflow via flex, NOT an overlay). The in-sidebar hide control is shown
   when pinned; collapsing slides the sidebar to zero width and reveals the floating
   show-menu button so the menu can be brought back. */
@media (min-width: 768px) {
    .sb-close { display: inline-flex; }
    .shell.nav-collapsed:not(.focus-mode) .sidebar { width: 0; min-width: 0; overflow: hidden; border-right: none; }
    .shell.nav-collapsed:not(.focus-mode) .sb-menu-btn { display: inline-flex; }
    .shell.nav-collapsed:not(.focus-mode) .topbar { padding-left: 4.25rem; }
}

/* ════════════ ICON RAIL (desktop) ════════════
   The staff sidebar is a permanent slim icon-only rail on desktop (every portal,
   every screen). The top arrow (#sbRailToggle, inside .sb-brand) animates it open
   (.shell.nav-expanded) so the menu names can be read; picking a menu item,
   clicking outside, or the arrow again collapses it back to icons. The mobile
   (<768px) off-canvas drawer and focus-mode drawer keep their full labels. */
@media (min-width: 768px) {
    .shell:not(.focus-mode) .sidebar { width: 76px; overflow: hidden; transition: width .24s cubic-bezier(.4,0,.2,1); }
    .shell.nav-expanded:not(.focus-mode) .sidebar { width: 256px; }
    .shell:not(.focus-mode) .sidebar .nav-item,
    .shell:not(.focus-mode) .sidebar .goback-side { white-space: nowrap; }
    /* On desktop the mobile close button is replaced by the rail toggle. */
    .shell:not(.focus-mode) .sidebar .sb-close { display: none; }
    /* Rail (not expanded): hide logo group + labels, keep toggle centered. */
    .shell:not(.nav-expanded):not(.focus-mode) .sb-brand { padding: 1.1rem .5rem .9rem; justify-content: center; }
    .shell:not(.nav-expanded):not(.focus-mode) .sb-brand > div:first-child,
    .shell:not(.nav-expanded):not(.focus-mode) .sb-brand-name,
    .shell:not(.nav-expanded):not(.focus-mode) .sb-brand-sub,
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .hero-name,
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .cav-side,
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .cq-side,
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .nav-label,
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .nav-grip { display: none; }
    .shell:not(.nav-expanded):not(.focus-mode) .profile-hero { padding: 1rem .4rem .85rem; }
    .shell:not(.nav-expanded):not(.focus-mode) .avatar-ring { width: 46px; height: 46px; border-width: 2px; }
    .shell:not(.nav-expanded):not(.focus-mode) .avatar-circle { font-size: .95rem; }
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .nav-item { justify-content: center; padding: .8rem .4rem; gap: 0; }
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .nav-item i { width: auto; font-size: 1.05rem; }
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .nav-item.active { box-shadow: inset 3px 0 0 0 var(--emerald); }
    .shell:not(.nav-expanded):not(.focus-mode) .sb-nav { padding: .75rem .45rem; }
    /* Nav badges ride the icon's corner in the rail. */
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .nav-item { position: relative; }
    .shell:not(.nav-expanded):not(.focus-mode) .sidebar .nav-item .notif-badge { position: absolute; top: 4px; right: 6px; }
    .shell:not(.nav-expanded):not(.focus-mode) .goback-side { font-size: 0; margin: .85rem auto .2rem; display: flex; justify-content: center; }
    /* Footer items carry bare text nodes (no .nav-label) — hide via font-size. */
    .shell:not(.nav-expanded):not(.focus-mode) .sb-foot .nav-item { font-size: 0; }
    .shell:not(.nav-expanded):not(.focus-mode) .sb-foot .nav-item .notif-badge { font-size: .62rem; }
}
.sb-rail-toggle { display: none; }
@media (min-width: 768px) {
    /* Toggle lives in .sb-brand; always visible at the top of the rail. */
    .shell:not(.focus-mode) .sb-rail-toggle {
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; width: 32px; height: 32px; padding: 0;
        background: none; border: none; border-radius: 6px;
        color: rgba(255,255,255,.45); font-size: .85rem; cursor: pointer;
        transition: color .2s, background .15s;
    }
    .shell:not(.focus-mode) .sb-rail-toggle:hover { color: #fff; background: rgba(255,255,255,.06); }
    /* Expanded: push the toggle to the far right of the brand row. */
    .shell.nav-expanded:not(.focus-mode) .sb-rail-toggle { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none !important; }
}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 767px) {
    .sb-menu-btn, .sb-close { display: inline-flex; }
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 84vw;
        z-index: 60; transform: translateX(-100%); transition: transform .2s ease;
        box-shadow: 0 18px 50px rgba(8,16,32,.45);
    }
    .shell.drawer-open .sidebar { transform: translateX(0); }
    .main { width: 100%; }
    .content { padding-left: 1.1rem; padding-right: 1.1rem; }
    .topbar { padding-left: 4.25rem; padding-right: 1.1rem; }
    .big-clock { font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar, .shell.focus-mode .sidebar, .sb-backdrop { transition: none; }
}

/* ── Financial system ───────────────────────────────────────────────────────── */
.fin-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; gap: .1rem .15rem; -webkit-overflow-scrolling: touch;
    margin: 1.1rem 0 0; padding: 0 1.2rem; background: #0a1626;
    border: none; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
/* Finance layout: header + tab bar stay fixed, only the tab BODY scrolls — so the
   tab bar is always visible no matter which tab is open or how long its content is.
   (Plain position:sticky is unreliable when the scroll container is a flex column,
   which #mainArea is, so we give the body its own scroll region instead.) */
.main.fin-mode { overflow: hidden; }
.main.fin-mode > .crm-top,
.main.fin-mode > .fin-tabs { flex: 0 0 auto; }
.main.fin-mode > #finBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.fin-tabs::-webkit-scrollbar { height: 6px; }
.fin-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }
.fin-tabs .crm-tab { flex: 0 0 auto; }
.fin-tabs .crm-tab { white-space: nowrap; padding: .8rem .8rem; font-size: .82rem; font-weight: 600;
    color: #cdd8e8; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fin-tabs .crm-tab i { font-size: .8rem; opacity: 1; color: inherit; }
.fin-tabs .crm-tab:hover { color: #ffffff; background: rgba(255,255,255,.04); }
/* Finance tabs share the system-wide emerald active treatment (was a divergent red). */
.fin-tabs .crm-tab.active { color: #6ee7b7; font-weight: 800;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06));
    border-bottom: 2px solid transparent; border-radius: 9px 9px 0 0;
    box-shadow: inset 0 -3px 0 0 var(--emerald); }
.fin-tabs .crm-tab.active i { opacity: 1; color: #34d399; }
@media (max-width: 640px) { .fin-tabs .crm-tab { padding: .7rem .6rem; font-size: .78rem; } }
.fin-tab-badge { display: inline-flex; align-items: center; margin-left: .45rem; padding: .12rem .42rem;
    font-size: .58rem; font-weight: 800; letter-spacing: .06em; line-height: 1; border-radius: 999px;
    color: #fff; background: linear-gradient(90deg, #3b82f6, #6366f1); text-transform: uppercase; }
.fin-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 1.3rem; }
@media (max-width: 1100px) { .fin-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .fin-summary { grid-template-columns: repeat(2, 1fr); } }
.fin-sum-card { display: flex; align-items: center; gap: .85rem; background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.1rem 1.15rem; }
.fin-sum-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--accent, #10b981); background: color-mix(in srgb, var(--accent, #10b981) 16%, transparent); }
.fin-sum-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: #f0f6ff; line-height: 1.1; }
.fin-sum-label { font-size: .72rem; color: #9fb2cc; font-weight: 600; margin-top: .2rem; }
.fin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.fin-card-sub { font-size: .7rem; color: #5b738f; margin-top: .4rem; }
.fin-grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.1rem; margin-bottom: 1.3rem; }
.fin-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
@media (max-width: 980px) { .fin-grid2 { grid-template-columns: 1fr; } }
.fin-panel { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.1rem 1.2rem; }
.fin-panel.mini { padding: 1rem 1.1rem; }
.fin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.fin-panel-head h3 { font-size: .95rem; font-weight: 800; color: #f0f6ff; font-family: 'Plus Jakarta Sans', sans-serif; display: flex; align-items: center; gap: .5rem; }
.fin-panel-head h3 i { color: var(--emerald); }
.fin-desc { color: #e6eef9; font-weight: 600; }
.fin-sub { font-size: .74rem; color: #ffffff; margin-top: 2px; }
.fin-pos { color: #34d399; font-weight: 700; }
.fin-neg { color: #f87171; font-weight: 700; }
/* Email-verified expense subtraction (Task #956): badge + de-emphasized amount */
.exp-subtracted-pill { background: rgba(148,163,184,.16); color: #94a3b8; }
.fin-neg.exp-subtracted-amt { color: #64748b; text-decoration: line-through; font-weight: 500; }
.rex-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.rex-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: .9rem 1rem; }
.rex-stat-v { font-size: 1.35rem; font-weight: 800; color: #f0f6ff; font-family: 'Plus Jakarta Sans', sans-serif; }
.rex-stat-l { font-size: .74rem; color: #94a3b8; font-weight: 600; margin-top: 2px; }
.rex-stat-s { font-size: .7rem; color: #64748b; margin-top: 3px; }
.rex-stat-danger { border-color: rgba(248,113,113,.35); }
.rex-stat-danger .rex-stat-v { color: #f87171; }
.rex-stat-warn { border-color: rgba(245,158,11,.35); }
.rex-stat-warn .rex-stat-v { color: #fbbf24; }
.rex-h { font-size: .9rem; font-weight: 800; color: #f0f6ff; font-family: 'Plus Jakarta Sans', sans-serif; margin: 1.2rem 0 .6rem; }
tr.rex-paused { opacity: .6; }
.rex-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.rex-chip { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .25rem .6rem; font-size: .78rem; color: #e6eef9; }
.rex-chip button { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.rex-chip button:hover { color: #f87171; }
.crm-pill { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.fin-bar-row { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.fin-bar-label { width: 64px; font-size: .8rem; color: #ffffff; font-weight: 600; }
.fin-bar { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.fin-bar-fill { height: 100%; background: linear-gradient(90deg, var(--emerald-dark), var(--emerald)); border-radius: 999px; }
.fin-bar-val { width: 92px; text-align: right; font-size: .82rem; color: #f0f6ff; font-weight: 700; }
.fin-mini-row { display: flex; align-items: center; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .85rem; color: #ffffff; }
.fin-mini-row:last-child { border-bottom: none; }
.fin-mini-row b { color: #f0f6ff; }
.fin-mini-row.big { padding: .7rem 0; font-size: .95rem; }
.fin-mini-row.big b { font-size: 1.05rem; }
.fin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
/* Adjust-payment dialog (Task #409): per-slice preview chips + duplicate-period warning */
.laj-slices { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.laj-slice { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; padding: .18rem .45rem; font-size: .74rem; white-space: nowrap; }
.laj-overlap-warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.35); border-radius: 10px; padding: .6rem .75rem; margin: .4rem 0 .6rem; font-size: .82rem; }
.laj-ov-head { font-weight: 700; color: #f59e0b; margin-bottom: .35rem; }
.laj-ov-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .25rem 0; border-top: 1px solid rgba(245,158,11,.15); }
.laj-ov-row:first-of-type { border-top: none; }
.laj-ov-del { margin-left: auto; color: #f87171 !important; font-size: .78rem; padding: .2rem .5rem; }
.fin-cta-panel { max-width: 460px; margin: 2.5rem auto; text-align: center; background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 2.5rem 2rem; }
.fin-cta-ic { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 1.2rem; display: grid; place-items: center; font-size: 1.6rem; color: var(--accent, var(--emerald)); background: color-mix(in srgb, var(--accent, #10B981) 16%, transparent); }
.fin-cta-panel h2 { font-size: 1.35rem; font-weight: 800; color: #f0f6ff; font-family: 'Plus Jakarta Sans', sans-serif; margin-bottom: .5rem; }
.fin-cta-panel p { color: #ffffff; font-size: .9rem; margin-bottom: 1.4rem; }
.fin-setting-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: .85rem 1.1rem; margin-bottom: 1.2rem; color: #ffffff; font-size: .88rem; }
.fin-setting-bar b { color: #f0f6ff; }
.fin-setting-bar i { color: var(--emerald); margin-right: .3rem; }
.cx-f { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #93a4bd; }
.cx-f input, .cx-f select { padding: .5rem .6rem; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: #0a1729; color: #eaf2ff; font-size: .92rem; text-transform: none; letter-spacing: 0; }
.cx-f input:focus, .cx-f select:focus { outline: none; border-color: var(--emerald); }
.fin-filter-bar { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.fin-filter-bar label { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; color: #9fb0c6; text-transform: uppercase; letter-spacing: .03em; }
.fin-filter-bar select, .fin-filter-bar input { padding: .5rem .7rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; font-size: .88rem; }
.fin-filter-bar .crm-btn { align-self: flex-end; }
.fin-share-edit { display: flex; gap: .5rem; align-items: center; }
.fin-share-edit input { width: 80px; padding: .5rem .7rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; }
.set-row { display: flex; gap: .6rem; align-items: center; }
.set-row input { width: 120px; }
.fin-section-h { font-size: 1rem; font-weight: 800; color: #f0f6ff; font-family: 'Plus Jakarta Sans', sans-serif; margin: 0 0 .9rem; }
.crm-table .crm-btn { padding: .4rem .7rem; font-size: .76rem; }
.fin-links { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .2rem; }
.fin-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; font-size: .78rem; color: var(--emerald); cursor: pointer; text-decoration: none; }
.fin-links .fin-link { margin-top: 0; }
.fin-link:hover { text-decoration: underline; filter: brightness(1.15); }
.fin-link i { font-size: .7rem; }
.fin-subtabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.3rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .1rem; }
.fin-subtab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; background: transparent; border: none; border-bottom: 2px solid transparent; color: #9fb0c6; font-size: .85rem; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; }
.fin-subtab i { font-size: .8rem; }
.fin-subtab:hover { color: #e6eef9; }
.fin-subtab.active { color: #6ee7b7; font-weight: 700;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06));
    border-radius: 9px 9px 0 0; box-shadow: inset 0 -3px 0 0 var(--emerald); }
.fin-subtab.active i { color: #34d399; }
.row-flash { animation: rowFlash 2s ease-out; }
@keyframes rowFlash { 0%, 35% { background: rgba(16,185,129,.22); } 100% { background: transparent; } }

/* ── Finance Overview dashboard (design rebuild) ───────────────────────────── */
.ov-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.3rem; }
@media (max-width: 1200px) { .ov-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .ov-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ov-cards { grid-template-columns: 1fr; } }
.ov-card { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 1.2rem 1.25rem; transition: transform .18s var(--fluid), border-color .18s; }
.ov-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent, #10B981) 45%, transparent); }
.ov-card-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; color: var(--accent, #10B981); background: color-mix(in srgb, var(--accent, #10B981) 18%, transparent); margin-bottom: .9rem; }
.ov-card-label { font-size: .78rem; color: #9fb0c6; font-weight: 600; }
.ov-card-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.65rem; font-weight: 800; color: #f0f6ff; line-height: 1.1; margin: .3rem 0 .5rem; }
.fin-health-desc { font-size: .74rem; color: #8496ad; line-height: 1.4; }
/* Overview period filter bar (This month / Last month / Quarter / Year / All time). */
.ov-period-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ov-period-label { font-size: .78rem; color: #9fb0c6; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; margin-right: .2rem; }
/* Clickable Overview KPI cards — drill into the matching finance sub-tab. */
.ov-card.ov-card-click { cursor: pointer; }
.ov-card.ov-card-click:hover { box-shadow: 0 8px 22px rgba(0,0,0,.28); border-color: color-mix(in srgb, var(--accent, #10B981) 65%, transparent); }
.ov-card.ov-card-click:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, #10B981) 75%, transparent); outline-offset: 2px; }
/* Clickable Financial Health cards — drill down into the Financial Ledger. */
.ov-card.fin-health-link { cursor: pointer; }
.ov-card.fin-health-link:hover { box-shadow: 0 8px 22px rgba(0,0,0,.28); border-color: color-mix(in srgb, var(--accent, #10B981) 65%, transparent); }
.ov-card.fin-health-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, #10B981) 75%, transparent); outline-offset: 2px; }
.fin-health-go { font-size: .72rem; font-weight: 700; color: var(--accent, #10B981); margin-top: .55rem; display: inline-flex; align-items: center; gap: .35rem; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.ov-card.fin-health-link:hover .fin-health-go, .ov-card.fin-health-link:focus-visible .fin-health-go { opacity: 1; transform: translateX(0); }
.ov-card.fin-health-active { border-color: var(--accent, #10B981); box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.ov-card.fin-health-active .fin-health-go { opacity: 1; transform: translateX(0); }
/* In-page Health drill-down (Task #298): the records behind a clicked card, expanded
   beneath the scoreboard on the SAME page. */
.fh-drill { margin-top: 1.1rem; }
.fh-drill-panel { background: #131b2b; border: 1px solid #26324a; border-top: 3px solid var(--accent, #10B981); border-radius: 12px; overflow: hidden; }
.fh-drill-head { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; border-bottom: 1px solid #26324a; }
.fh-drill-title { font-weight: 800; color: #e6edf7; display: inline-flex; align-items: center; gap: .55rem; }
.fh-drill-title i { color: var(--accent, #10B981); }
.fh-drill-total { font-size: .82rem; font-weight: 700; color: var(--accent, #10B981); margin-left: auto; }
.fh-drill-close { background: transparent; border: 1px solid #33415c; color: #9fb0c8; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fh-drill-close:hover { background: #1c2740; color: #e6edf7; }
.fh-drill-load, .fh-drill-empty { padding: 1.6rem 1.1rem; color: #8496ad; text-align: center; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.fh-drill-tablewrap { max-height: 420px; overflow: auto; }
.fh-drill-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.fh-drill-table thead th { position: sticky; top: 0; background: #182236; color: #9fb0c8; font-weight: 700; text-align: left; padding: .55rem .9rem; border-bottom: 1px solid #26324a; white-space: nowrap; }
.fh-drill-table tbody td { padding: .5rem .9rem; border-bottom: 1px solid #1e293b; color: #dbe4f0; }
.fh-drill-table tbody tr:hover td { background: #172032; }
.fh-drill-table .fh-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.fh-drill-table .fh-neg { color: #f87171; }
.fh-drill-table .fh-muted { color: #8496ad; }
.fh-drill-table .fh-act { width: 2.2rem; text-align: right; }
.fh-del { background: none; border: none; color: #64748b; cursor: pointer; padding: .3rem .45rem; border-radius: 6px; font-size: .82rem; line-height: 1; transition: color .15s, background .15s; }
.fh-del:hover { color: #f87171; background: rgba(248, 113, 113, .12); }
.fh-del:disabled { opacity: .4; cursor: default; }
.ov-card-delta { font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.ov-card-delta.up { color: #34d399; }
.ov-card-delta.down { color: #f87171; }
.ov-card-delta span { color: #5b738f; font-weight: 500; }
.ov-card-sub { font-size: .76rem; color: #5b738f; font-weight: 500; }
.ov-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 980px) { .ov-grid3 { grid-template-columns: 1fr; } }
.ov-viewall { background: none; border: none; color: var(--emerald); font-size: .8rem; font-weight: 700; cursor: pointer; }
.ov-viewall:hover { text-decoration: underline; filter: brightness(1.15); }
.ov-mini-table th, .ov-mini-table td { font-size: .8rem; }
.ov-inv-id { color: var(--emerald); font-weight: 700; font-size: .78rem; }
.ov-tx-list { display: flex; flex-direction: column; }
.ov-tx-item { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.ov-tx-item:last-child { border-bottom: none; }
.ov-tx-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .8rem; flex: none; }
.ov-tx-ico.in { background: rgba(16,185,129,.16); color: #34d399; }
.ov-tx-ico.out { background: rgba(248,113,113,.16); color: #f87171; }
.ov-tx-main { flex: 1; min-width: 0; }
.ov-tx-desc { color: #e6eef9; font-weight: 600; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-tx-sub { color: #5b738f; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-tx-right { text-align: right; flex: none; }
.ov-tx-amt { font-weight: 700; font-size: .84rem; }
.ov-tx-date { color: #5b738f; font-size: .72rem; margin-top: 2px; }

/* ── CRM student status / payment / profile ─────────────────────────────────── */
.fin-toggle { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid transparent; padding: .32rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; cursor: pointer; transition: filter .15s; }
.fin-toggle:hover { filter: brightness(1.12); }
.fin-toggle.on { background: rgba(16,185,129,.16); color: #34d399; border-color: rgba(16,185,129,.35); }
.fin-toggle.off { background: rgba(148,163,184,.14); color: #94a3b8; border-color: rgba(148,163,184,.3); }
.fin-toggle.susp { background: rgba(248,113,113,.16); color: #f87171; border-color: rgba(248,113,113,.4); }
.crm-pill.pill-paid { background: rgba(16,185,129,.16); color: #34d399; }
.crm-pill.pill-owing { background: rgba(248,113,113,.16); color: #f87171; }
.iset-hr { height: 1px; background: rgba(148,163,184,.18); border: 0; margin: 1rem 0 .8rem; }

/* ── Active Students roster ─────────────────────────────────────────────── */
.crm-table.st-roster th.st-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.crm-table.st-roster th.st-sortable:hover { color: #fff; }
.crm-table.st-roster td { vertical-align: top; }
.cls-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cls-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(59,130,246,.14); color: #93c5fd;
    border: 1px solid rgba(59,130,246,.3); border-radius: 999px; padding: .2rem .6rem; font-size: .74rem; font-weight: 600; }
.cls-pill b { color: #fff; font-weight: 700; }
.cls-total { margin-top: 6px; font-size: .74rem; color: #94a3b8; }
.cls-total b { color: #34d399; }
.act-flag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: .22rem .6rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; }
.act-flag.af-active { background: rgba(16,185,129,.16); color: #34d399; border-color: rgba(16,185,129,.35); }
.act-flag.af-due { background: rgba(245,158,11,.16); color: #fbbf24; border-color: rgba(245,158,11,.35); }
.act-flag.af-overdue { background: rgba(248,113,113,.16); color: #f87171; border-color: rgba(248,113,113,.4); }
.act-flag.af-none { background: rgba(148,163,184,.16); color: #cbd5e1; border-color: rgba(148,163,184,.3); }
.act-flag.af-ended { background: rgba(148,163,184,.12); color: #94a3b8; border-color: rgba(148,163,184,.25); }
.act-flag.af-paused { background: rgba(56,189,248,.16); color: #38bdf8; border-color: rgba(56,189,248,.35); }
.st-tag { display: inline-block; background: rgba(148,163,184,.16); color: #cbd5e1; border-radius: 6px;
    padding: .15rem .5rem; font-size: .72rem; font-weight: 600; }
.st-comment { min-width: 120px; max-width: 220px; cursor: text; font-size: .8rem; color: #e2e8f0;
    border-radius: 7px; padding: .3rem .45rem; border: 1px dashed transparent; transition: border-color .15s; }
.st-comment:hover { border-color: rgba(148,163,184,.4); }
.st-comment-input { width: 100%; background: rgba(15,23,42,.6); border: 1px solid var(--emerald); color: #fff;
    border-radius: 6px; padding: .3rem .45rem; font-size: .8rem; }
.st-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.st-pager-info { font-size: .8rem; color: #94a3b8; font-weight: 600; }
.col-mgr { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin: .5rem 0 1rem; }
.col-mgr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .5rem .7rem; }
.col-mgr-lbl { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.col-mgr-lbl input[disabled] + * { opacity: .6; }
.col-mgr-ord { display: inline-flex; gap: 6px; }
.col-mgr-ord .crm-btn { padding: .3rem .55rem; }
.field-hint { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #94a3b8; margin: .35rem 0 0; }
.field-hint i { color: #64748b; }
.login-remember { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .2rem; font-size: .85rem; color: #64748b; cursor: pointer; user-select: none; }
.login-remember input { width: 15px; height: 15px; accent-color: var(--emerald, #10b981); cursor: pointer; }
.fin-check { display: flex; align-items: center; gap: .55rem; margin: .2rem 0 .4rem; font-size: .85rem; color: #ffffff; cursor: pointer; }
.fin-check input { width: 16px; height: 16px; accent-color: var(--emerald); cursor: pointer; }
.fin-muted { color: #5b738f; font-size: .85rem; padding: .4rem 0 .8rem; }
.enr-list { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow: auto;
    background: rgba(15,23,42,.4); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .5rem; }
.enr-row { display: flex; align-items: center; gap: 10px; padding: .35rem .5rem; border-radius: 7px; cursor: pointer;
    font-size: .85rem; color: #e2e8f0; }
.enr-row:hover { background: rgba(255,255,255,.04); }
.enr-row input { width: 16px; height: 16px; accent-color: var(--emerald); cursor: pointer; }
.enr-name { flex: 1; font-weight: 600; }
/* Duplicate-contact inline banner in Add-contact modal */
#sDupBanner[hidden] { display: none !important; }
#sDupBanner a.sdup-view:hover { opacity: .85; }

.enr-sub { color: #94a3b8; font-weight: 500; font-size: .78rem; }
.enr-price { color: #34d399; font-weight: 700; font-size: .78rem; white-space: nowrap; }
.enr-empty { color: #94a3b8; font-size: .82rem; padding: .4rem .2rem; }
.confirm-intro { color: var(--text-heading); font-size: .95rem; line-height: 1.55; margin: 0 0 1.1rem; }
.tech-route-choices { display: flex; flex-direction: column; gap: .75rem; margin: 0 0 1rem; }
.tech-route-opt { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: .95rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--text-heading); cursor: pointer; transition: border-color .15s, background .15s, transform .05s; }
.tech-route-opt:hover { border-color: var(--accent, #4f8cff); background: rgba(79,140,255,.08); }
.tech-route-opt:active { transform: translateY(1px); }
.tech-route-ic { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(79,140,255,.14); color: var(--accent, #4f8cff); font-size: 1.1rem; }
.tech-route-txt { display: flex; flex-direction: column; gap: .15rem; }
.tech-route-txt b { font-size: .98rem; }
.tech-route-txt small { color: var(--text-muted, #9aa4b2); font-size: .82rem; }
.fin-profile-head { display: flex; align-items: flex-start; gap: 1rem; }
.cl-avatar.lg { width: 54px; height: 54px; font-size: 1.1rem; }
h4.fin-sub { font-size: .95rem; font-weight: 800; color: #f0f6ff; margin: 1.3rem 0 .6rem; font-family: 'Plus Jakarta Sans', sans-serif; }

/* ── Payment methods ──────────────────────────────────────────────────────────── */
.pm-list { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; margin: 0 auto; }
.pm-card { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; transition: border-color .15s, opacity .15s; }
.pm-card.off { opacity: .72; }
.pm-card.off .pm-body { opacity: .5; pointer-events: none; }
.pm-head { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.1rem; background: linear-gradient(90deg, rgba(16,185,129,.16), rgba(16,185,129,.04)); border-bottom: 1px solid rgba(255,255,255,.06); }
.pm-card.off .pm-head { background: rgba(148,163,184,.08); }
.pm-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(16,185,129,.18); color: #34d399; font-size: 1rem; flex: 0 0 auto; }
.pm-card.off .pm-icon { background: rgba(148,163,184,.16); color: #94a3b8; }
.pm-meta { flex: 1; min-width: 0; }
.pm-name { font-weight: 800; color: #f0f6ff; font-size: .95rem; font-family: 'Plus Jakarta Sans', sans-serif; }
.pm-desc { color: #9fb2c9; font-size: .8rem; margin-top: .15rem; }
.pm-switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.pm-switch input { opacity: 0; width: 0; height: 0; }
.pm-slider { position: absolute; inset: 0; background: rgba(148,163,184,.35); border-radius: 999px; transition: background .15s; }
.pm-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.pm-switch input:checked + .pm-slider { background: var(--emerald); }
.pm-switch input:checked + .pm-slider::before { transform: translateX(20px); }
.pm-body { padding: 1rem 1.1rem 1.1rem; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.pm-field { display: flex; flex-direction: column; gap: .35rem; }
.pm-field label { font-size: .76rem; font-weight: 700; color: #9fb2c9; }
.pm-field input, .pm-field select { padding: .55rem .7rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; font-size: .88rem; width: 100%; }
.pm-field input:focus, .pm-field select:focus { outline: none; border-color: var(--emerald); }
.pm-hint { color: #5b738f; font-size: .78rem; margin-top: .8rem; }
@media (max-width: 560px) { .pm-grid { grid-template-columns: 1fr; } }

/* ── Classes ──────────────────────────────────────────────────────────────────── */
.cl-head-left { display: flex; align-items: center; gap: .9rem; }
.cl-att-bar { display: flex; align-items: center; gap: .7rem; background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1.1rem; }
.cl-att-bar label { font-size: .82rem; font-weight: 700; color: #ffffff; }
.cl-att-bar label i { color: var(--emerald); margin-right: .35rem; }
.cl-att-bar input { padding: .45rem .6rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; font-size: .85rem; }
.att-toggle { display: inline-flex; gap: .35rem; }
.att-btn { padding: .35rem .65rem; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #9fb2c9; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.att-btn i { margin-right: .25rem; }
.att-btn:hover { border-color: rgba(255,255,255,.3); }
.att-btn.present.on { background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.4); color: #34d399; }
.att-btn.absent.on { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.4); color: #f87171; }

/* ── Internal Team / Leads ──────────────────────────────────────────────────── */
.lead-filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.lead-filters select, .lead-filters input { padding: .5rem .65rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; font-size: .85rem; }
.lead-filters input[type="search"] { flex: 1; min-width: 200px; }
.lead-filters select:focus, .lead-filters input:focus { outline: none; border-color: var(--emerald); }
/* Amber sweep chip: reassigned-but-unassigned leads left behind by a termination */
.lead-filters .reassigned-sweep { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.45); border-radius: 8px; color: #fbbf24; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lead-filters .reassigned-sweep:hover { background: rgba(245,158,11,.24); }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .lead-grid { grid-template-columns: 1fr; } }
.lead-status { padding: .3rem 1.6rem .3rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: #0a1626 no-repeat right .55rem center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239fb2c9' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); color: #ffffff; font-size: .76rem; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lead-status:focus { outline: none; border-color: var(--emerald); }
.lead-status.ls-active { background-color: rgba(16,185,129,.18); border-color: rgba(16,185,129,.4); color: #34d399; }
.lead-status.ls-inactive { background-color: rgba(148,163,184,.16); border-color: rgba(148,163,184,.4); color: #cbd5e1; }
.lead-status option { background: #0f2138; color: #e6eef9; }
.tr-mode { display: flex; flex-direction: column; gap: .5rem; }
.tr-mode-opt { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; cursor: pointer; font-size: .85rem; color: #ffffff; transition: border-color .15s, background .15s; }
.tr-mode-opt:has(input:checked) { border-color: var(--emerald); background: rgba(16,185,129,.08); }
.tr-mode-opt input { accent-color: var(--emerald); }
.tr-mode-opt i { color: var(--emerald); }
.tr-keepowner { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; font-size: .82rem; color: #cfe0f5; }
.tr-keepowner .tr-ic { position: static; transform: none; width: 28px; height: 28px; flex: 0 0 auto; }
.tr-history { margin-top: .4rem; border-top: 1px solid rgba(255,255,255,.07); }
.tr-item { padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.tr-item > span:first-child { color: #ffffff; font-weight: 600; }
.tr-item i { color: var(--emerald); margin: 0 .3rem; font-size: .72rem; }
.tr-context { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .7rem .8rem; margin: .2rem 0 .9rem; display: flex; flex-direction: column; gap: .45rem; }
.tr-context-row { display: flex; gap: .7rem; align-items: baseline; font-size: .82rem; }
.tr-context-k { flex: 0 0 88px; color: #ffffff; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .68rem; }
.tr-context-v { color: #dbe5f2; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tr-chip { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #8ff0cf; border-radius: 999px; padding: .12rem .55rem; font-size: .74rem; font-weight: 600; }
.tr-reason-tag { display: inline-block; background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.35); color: #c3c6ff; border-radius: 6px; padding: .1rem .45rem; font-size: .72rem; font-weight: 600; }

/* ── Dark "Transfer to department" modal (lead + student) ─────────────────────
   Modals live outside .main so they default to the white .modal background. The
   transfer modal opts into a dark navy/blue treatment via the .tr-modal marker on
   its modal-body, scoped here so nothing leaks onto other (white) modals. */
.modal-backdrop:has(.tr-modal) .modal {
    background: radial-gradient(130% 100% at 50% -10%, #15294d 0%, #0d1f3a 50%, #0a1730 100%);
    border: 1px solid rgba(96,165,250,.28);
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(96,165,250,.06);
    max-width: 480px;
}
.tr-modal, .tr-modal p, .tr-modal .field > label { color: #e6eef9; }
.tr-modal .field > label { font-weight: 600; font-size: .82rem; display: block; margin-bottom: .45rem; color: #cfe0f5; }
.tr-modal .fin-muted { color: #9fb2c9; }
/* Header badge + square close button */
.modal-head.tr-head { padding: 1.5rem 1.6rem 0; }
.modal-head.tr-head h3 { color: #fff; gap: .75rem; align-items: center; }
.tr-badge { width: 46px; height: 46px; border-radius: 14px; display: inline-grid; place-items: center;
    background: linear-gradient(135deg, #3b82f6, #7c3aed); box-shadow: 0 8px 22px rgba(79,70,229,.45); }
.modal-head.tr-head h3 .tr-badge i { color: #fff; font-size: 1.15rem; }
.modal-head.tr-head .close-x { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px; color: #cbd5e1; display: grid; place-items: center; font-size: 1.4rem; }
.modal-head.tr-head .close-x:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Context card (lead) */
.tr-modal .tr-context { flex-direction: row; align-items: stretch; justify-content: space-between;
    gap: .8rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: .9rem 1rem; }
.tr-ctx-left { display: flex; gap: .85rem; align-items: flex-start; min-width: 0; }
.tr-ctx-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; font-size: .95rem; }
.tr-ctx-title { font-weight: 700; color: #fff; font-size: .95rem; }
.tr-ctx-line { color: #9fb2c9; font-size: .84rem; margin-top: .15rem; word-break: break-word; }
.tr-ctx-info { align-self: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(96,165,250,.55); display: grid; place-items: center; color: #60a5fa; font-size: 1rem; }
/* Inputs with leading gradient icon + chevron */
.tr-control { position: relative; }
.tr-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
    border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: .85rem; pointer-events: none; }
.tr-ic.tr-ic-top { top: 11px; transform: none; }
.tr-ic-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.tr-ic-violet { background: linear-gradient(135deg, #7c3aed, #6366f1); }
.tr-control select, .tr-control textarea { width: 100%; padding: .8rem 2.6rem .8rem 3.1rem;
    background: #0a1730; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
    font-size: .92rem; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.tr-control textarea { min-height: 88px; resize: vertical; }
.tr-control select:focus, .tr-control textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.tr-control select option { background: #0f2138; color: #fff; }
.tr-control select::placeholder, .tr-control textarea::placeholder { color: #6f87a6; }
.tr-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #7f9bbd;
    pointer-events: none; font-size: .8rem; }
/* Send-to radio cards */
.tr-modal .tr-mode { gap: .6rem; }
.tr-modal .tr-mode-opt { display: flex; flex-flow: row nowrap; align-items: center; gap: .7rem;
    padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px; background: rgba(255,255,255,.02); color: #e6eef9; }
.tr-modal .tr-mode-opt .tr-opt-txt { flex: 1 1 auto; min-width: 0; }
.tr-modal .tr-mode-opt:has(input:checked) { border-color: #3b82f6; background: rgba(59,130,246,.12);
    box-shadow: inset 0 0 0 1px rgba(59,130,246,.45); }
.tr-modal .tr-mode-opt input { accent-color: #3b82f6; width: 18px; height: 18px; flex: 0 0 auto; }
.tr-opt-ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb); font-size: .9rem; }
.tr-modal .tr-mode-opt .tr-opt-ic i { color: #fff; margin: 0; }
.tr-opt-txt { font-size: .9rem; line-height: 1.3; }
.tr-opt-txt b { color: #fff; font-weight: 700; }
.tr-opt-sub { color: #9fb2c9; font-weight: 400; }
/* Footer buttons */
.btn-tr { background: linear-gradient(135deg, #3b82f6, #7c3aed); color: #fff; box-shadow: 0 8px 22px rgba(79,70,229,.4); }
.btn-tr:hover { filter: brightness(1.07); }
.tr-modal .btn-ghost { background: rgba(255,255,255,.05); color: #dbe5f2; border: 1px solid rgba(255,255,255,.18); }
.tr-modal .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.tr-modal .modal-foot { margin-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.1rem; }
/* Lead history list on dark */
.tr-modal .section-title { color: #cfe0f5; }
.tr-modal .tr-item .muted { color: #9fb2c9; }
/* Detail popups reusing the dark card treatment (tech review, academy review, notes) */
.modal-head.tr-head h3 .tr-ref { color: #9fb2c9; font-weight: 500; font-size: .92rem; }
.tr-modal .note-modal-meta { color: #9fb2c9; }
.tr-modal .note-modal-text { color: #f0f6ff; }
.tr-modal .aca-lbl { color: #cfe0f5; }
.tr-modal .aca-review-grid > div { color: #dbe6f4; }
.tr-modal .agent-dim { color: #9fb2c9; }
.tr-modal .agent-contacts-lbl { color: #cfe0f5; }
.tr-modal h4.fin-sub { color: #f0f6ff; }
.tr-modal .iset-note { color: #e6eef9; }
.tr-modal .last-transfer { color: #b9c8db; }
.tr-modal .pv-attrib { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #dbe5f2; }
.tr-modal .pv-attrib.ok { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); color: #8ff0cf; }
.tr-modal .inp,
.tr-modal select.inp, .tr-modal textarea.inp, .tr-modal input.inp {
    width: 100%; background: #0a1730; color: #fff; border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; padding: .6rem .75rem; font-size: .9rem;
}
.tr-modal .inp:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.tr-modal select.inp option { background: #0f2138; color: #fff; }
.tr-modal .modal-foot { flex-wrap: wrap; }

/* ── Compact Academy request rows (one line high where possible) ─────────────── */
.aca-table td { padding: .5rem .8rem; }
.aca-table td { white-space: nowrap; }
.aca-table .agent-avatar { width: 28px; height: 28px; font-size: .64rem; }
.aca-table .agent-contact { align-items: center; }
.aca-table .agent-contact .agent-name { display: inline; }
.aca-table .agent-contact .agent-cmeta { display: inline; margin: 0 0 0 .4rem; }
.aca-table .last-transfer { display: block; margin-top: .1rem; }
.aca-table .lead-substatus { display: inline-block; margin: 0 0 0 .3rem; vertical-align: middle; }
.aca-table .note-view-btn { margin-top: 0; white-space: nowrap; }

/* ── Notifications ───────────────────────────────────────────────────────────── */
.notif-trigger { position: relative; }
.notif-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; }
.notif-badge.hidden { display: none; }
.notif-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.notif-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; margin: 0 -.4rem; }
.notif-item { display: flex; gap: .7rem; padding: .7rem .6rem; border-radius: 10px; cursor: pointer; transition: background .12s; }
.notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item.unread { background: rgba(16,185,129,.07); }
.notif-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.16); color: #34d399; }
.notif-main { min-width: 0; }
.notif-title { font-weight: 700; color: #e6eef9; font-size: .86rem; display: flex; align-items: center; gap: .4rem; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); }
.notif-body { color: #9fb2c9; font-size: .8rem; margin-top: .12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-time { color: #6b7e96; font-size: .72rem; margin-top: .18rem; }

/* ── Lead webhook card ──────────────────────────────────────────────────────── */
.wh-loading { padding: 1.2rem 0; display: flex; justify-content: center; }
.wh-body { display: flex; flex-direction: column; gap: 1rem; margin-top: .6rem; }
.wh-row label { display: block; font-size: .78rem; font-weight: 700; color: #ffffff; margin-bottom: .35rem; }
.wh-copy { display: flex; gap: .5rem; }
.wh-copy input { flex: 1; padding: .55rem .7rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }
.wh-sample { background: #0a1626; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: .7rem .8rem; color: #b9c8db; font-size: .76rem; white-space: pre-wrap; word-break: break-all; margin: 0 0 .5rem; overflow-x: auto; }
.wh-foot { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.07); padding-top: .9rem; }
code { background: rgba(255,255,255,.08); padding: .08rem .35rem; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: .82em; }

/* ── CRM Contacts (unified directory) ─────────────────────────────────────────── */
.ct-layout { display: grid; grid-template-columns: 232px 1fr; gap: 1.25rem; align-items: start; }
.ct-side { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: .7rem; position: sticky; top: 1rem; }
.ct-side-h { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5b7390; padding: .7rem .6rem .35rem; }
.ct-side-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 9px; cursor: pointer; color: #aebccd; font-size: .85rem; font-weight: 600; transition: background .12s, color .12s; }
.ct-side-item i { width: 16px; text-align: center; font-size: .82rem; color: #ffffff; }
.ct-side-item:hover { background: rgba(255,255,255,.05); color: #e6eef9; }
.ct-side-item.active { background: linear-gradient(90deg, rgba(16,185,129,.26), rgba(16,185,129,.09));
    color: #6ee7b7; box-shadow: inset 3px 0 0 0 var(--emerald); }
.ct-side-item.active i { color: #34d399; }
.ct-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-side-count { font-size: .72rem; font-weight: 800; color: #ffffff; background: rgba(255,255,255,.06); border-radius: 999px; padding: .08rem .5rem; min-width: 22px; text-align: center; }
.ct-side-item.active .ct-side-count { background: rgba(16,185,129,.25); color: #aef0d4; }

.ct-main { min-width: 0; }
.ct-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.ct-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: .55rem; background: #0f2138; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .55rem .85rem; }
.ct-search i { color: #ffffff; font-size: .85rem; }
.ct-search input { flex: 1; background: transparent; border: none; outline: none; color: #e6eef9; font-size: .85rem; }
.ct-search input::placeholder { color: #5b7390; }
.ct-select { background: #0f2138; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .55rem .85rem; color: #ffffff; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ct-select option { background: #0f2138; }
.ct-meta { font-size: .76rem; color: #ffffff; font-weight: 600; margin-bottom: .7rem; }

.ct-table-wrap { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; overflow-x: auto; }
.ct-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.ct-table thead th { text-align: left; padding: .8rem 1rem; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5b7390; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.ct-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .12s; }
.ct-table tbody tr:last-child { border-bottom: none; }
.ct-table tbody tr:hover { background: rgba(255,255,255,.035); }
.ct-table td { padding: .7rem 1rem; color: #ffffff; vertical-align: middle; white-space: nowrap; }
.ct-muted { color: #ffffff; }
.ct-bal-owe { color: #ff9a93; font-weight: 700; }

.ct-contact { display: flex; align-items: flex-start; gap: .6rem; }
.ct-avatar { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.ct-namewrap { min-width: 0; max-width: 230px; display: flex; flex-direction: column; gap: 1px; }
.ct-name { font-weight: 700; color: #f0f6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-cline { font-size: .72rem; color: #b8c6d8; display: flex; align-items: center; gap: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-cline i { width: 12px; font-size: .66rem; color: #5b7390; flex-shrink: 0; text-align: center; }
.ct-email { color: #ffffff; }

.ct-program { white-space: normal; max-width: 180px; }

.ct-type { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; padding: .18rem .6rem; }

.ct-pill { display: inline-block; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: .2rem .6rem; border: 1px solid transparent; }
.sp-blue { background: rgba(96,165,250,.16); color: #93c5fd; border-color: rgba(96,165,250,.4); }
.sp-amber { background: rgba(251,191,36,.16); color: #fcd34d; border-color: rgba(251,191,36,.4); }
.sp-violet { background: rgba(167,139,250,.16); color: #c4b5fd; border-color: rgba(167,139,250,.4); }
.sp-green { background: rgba(16,185,129,.18); color: #34d399; border-color: rgba(16,185,129,.4); }
.sp-red { background: rgba(248,113,113,.16); color: #f87171; border-color: rgba(248,113,113,.4); }
.sp-gray { background: rgba(148,163,184,.16); color: #94a3b8; border-color: rgba(148,163,184,.35); }

.ct-tag { display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 6px; padding: .14rem .45rem; margin: 0 .25rem .15rem 0; }
.tg-green { background: rgba(16,185,129,.14); color: #34d399; }
.tg-amber { background: rgba(251,191,36,.14); color: #fcd34d; }
.tg-red { background: rgba(248,113,113,.14); color: #f87171; }
.tg-gray { background: rgba(148,163,184,.14); color: #94a3b8; }

.ct-add-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .5rem; }
.ct-add-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 1.1rem .6rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #ffffff; cursor: pointer; transition: all .15s; }
.ct-add-card:hover { background: rgba(16,185,129,.12); border-color: var(--emerald-border); transform: translateY(-2px); }
.ct-add-card i { font-size: 1.3rem; color: var(--emerald); }
.ct-add-card span { font-weight: 800; color: #f0f6ff; font-size: .9rem; }
.ct-add-card small { color: #ffffff; font-size: .72rem; }

.ct-layout.collapsed { grid-template-columns: 1fr; }
.ct-side-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .35rem .3rem .65rem; }
.ct-side-title { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5b7390; }
.ct-collapse-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: #0f2138; border: 1px solid rgba(255,255,255,.12); color: #aebccd; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; }
.ct-collapse-btn:hover { background: rgba(255,255,255,.07); color: #e6eef9; }
.ct-show-lists { display: inline-flex; align-items: center; gap: .45rem; background: #0f2138; border: 1px solid rgba(255,255,255,.12); color: #aebccd; border-radius: 10px; padding: .55rem .85rem; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .12s, color .12s; }
.ct-show-lists:hover { background: rgba(255,255,255,.07); color: #e6eef9; }

.ct-filter-btn { display: inline-flex; align-items: center; gap: .45rem; background: #0f2138; border: 1px solid rgba(255,255,255,.1); color: #e6eef9; border-radius: 10px; padding: .55rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; }
.ct-filter-btn:hover { border-color: rgba(255,255,255,.25); }
.ct-filter-btn.has { border-color: var(--emerald-border); color: #aef0d4; }
.ct-filter-badge { background: var(--emerald); color: #04240f; border-radius: 999px; font-size: .7rem; font-weight: 800; padding: .02rem .42rem; }

.ct-filterbar { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: .75rem; margin-bottom: .6rem; display: flex; flex-direction: column; gap: .6rem; }
.ct-filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ct-fchip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(16,185,129,.14); color: #aef0d4; border: 1px solid rgba(16,185,129,.3); border-radius: 999px; padding: .2rem .3rem .2rem .65rem; font-size: .74rem; font-weight: 700; }
.ct-fchip button { background: rgba(255,255,255,.1); border: none; color: #d6f5e8; width: 17px; height: 17px; border-radius: 50%; cursor: pointer; font-size: .62rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ct-fchip button:hover { background: rgba(248,113,113,.45); color: #fff; }
.ct-fclear { background: none; border: none; color: #f87171; font-size: .74rem; font-weight: 700; cursor: pointer; margin-left: .2rem; }
.ct-fclear:hover { text-decoration: underline; }
.ct-filter-add { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ct-fval-input { background: #0f2138; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .5rem .7rem; color: #e6eef9; font-size: .82rem; width: 130px; }
.ct-fval-input:focus { outline: none; border-color: var(--emerald-border); }
.ct-fadd { display: inline-flex; align-items: center; gap: .35rem; background: var(--emerald); color: #04240f; border: none; border-radius: 10px; padding: .52rem .85rem; font-size: .8rem; font-weight: 800; cursor: pointer; }
.ct-fadd:hover { filter: brightness(1.08); }

@media (max-width: 880px) {
    .ct-layout { grid-template-columns: 1fr; }
    .ct-side { position: static; display: flex; flex-wrap: wrap; gap: .3rem; }
    .ct-side-top { width: 100%; }
    .ct-side-h { width: 100%; }
    .ct-add-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ct-toolbar { gap: .45rem; }
    .ct-search { min-width: 100%; order: -1; }
    .ct-filter-add { flex-direction: column; align-items: stretch; }
    .ct-filter-add .ct-select, .ct-fval-input, .ct-fadd { width: 100%; }
}

/* ── Settings: integration cards (Stripe / Email / Chat) ──────────────────────── */
.settings-wrap { display: flex; flex-direction: column; gap: 1.1rem; max-width: 920px; }
/* ── Settings landing: numbered category card grid (owner mock) ─────────────── */
/* Per-category accent: --setg-a solid accent, --setg-asoft translucent fill,
   --setg-aline border tint. New categories only need one accent class. */
body.staffdark .setg-blue   { --setg-a: #3b82f6; --setg-asoft: rgba(59,130,246,.14);  --setg-aline: rgba(59,130,246,.45); }
body.staffdark .setg-green  { --setg-a: #22c55e; --setg-asoft: rgba(34,197,94,.13);   --setg-aline: rgba(34,197,94,.45); }
body.staffdark .setg-purple { --setg-a: #a855f7; --setg-asoft: rgba(168,85,247,.14);  --setg-aline: rgba(168,85,247,.45); }
body.staffdark .setg-orange { --setg-a: #f97316; --setg-asoft: rgba(249,115,22,.14);  --setg-aline: rgba(249,115,22,.45); }
body.staffdark .setg-pink   { --setg-a: #ec4899; --setg-asoft: rgba(236,72,153,.14);  --setg-aline: rgba(236,72,153,.45); }
body.staffdark .setg-cyan   { --setg-a: #38bdf8; --setg-asoft: rgba(56,189,248,.14);  --setg-aline: rgba(56,189,248,.45); }
body.staffdark .setg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; max-width: 1320px; align-items: stretch; }
@media (max-width: 1240px) { body.staffdark .setg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { body.staffdark .setg-grid { grid-template-columns: 1fr; } }
body.staffdark .setg-card {
    display: flex; flex-direction: column;
    background: linear-gradient(165deg, #0b1830 0%, #081121 100%);
    border: 1.5px solid var(--setg-aline); border-radius: 18px;
    padding: 1.2rem 1.15rem 1.1rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 0 40px rgba(255,255,255,.015);
}
body.staffdark .setg-head { display: flex; align-items: flex-start; gap: .85rem; width: 100%;
    background: none; border: none; padding: 0 0 1rem; text-align: left; cursor: pointer; color: inherit; }
body.staffdark .setg-ico { flex: none; width: 54px; height: 54px; border-radius: 50%;
    background: var(--setg-a); color: #fff; font-size: 1.35rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 22px var(--setg-asoft), 0 6px 16px rgba(0,0,0,.35); }
body.staffdark .setg-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.staffdark .setg-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.12rem; color: #fff; }
body.staffdark .setg-desc { font-size: .8rem; color: #94a3b8; line-height: 1.4; }
body.staffdark .setg-chev { color: #94a3b8; font-size: .85rem; margin-top: .35rem; transition: transform .15s var(--fluid), color .15s; }
body.staffdark .setg-head:hover .setg-chev { color: var(--setg-a); transform: translateX(3px); }
body.staffdark .setg-rows { flex: 1; display: flex; flex-direction: column; gap: .6rem;
    border-top: 1px solid rgba(255,255,255,.08); padding-top: .95rem; }
body.staffdark .setg-row { display: flex; align-items: center; gap: .65rem; min-width: 0; }
body.staffdark .setg-row-ico { flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: var(--setg-a); color: #fff; font-size: .82rem;
    display: flex; align-items: center; justify-content: center; }
body.staffdark .setg-row-label { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; color: #e2e8f0; line-height: 1.3; }
body.staffdark .setg-setup { flex: none; display: inline-flex; align-items: center; gap: .4rem;
    font-size: .76rem; font-weight: 800; color: var(--setg-a);
    background: rgba(255,255,255,.02); border: 1.5px solid var(--setg-aline);
    border-radius: 999px; padding: .38rem .8rem; cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s; }
body.staffdark .setg-setup:hover { background: var(--setg-asoft); box-shadow: 0 0 14px var(--setg-asoft); }
body.staffdark .setg-configure { margin-top: 1rem; width: 100%; display: flex; align-items: center;
    justify-content: space-between; gap: .8rem; padding: .85rem 1.05rem;
    background: var(--setg-asoft); border: 1px solid var(--setg-aline); border-radius: 12px;
    color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer;
    transition: background .15s, box-shadow .15s; }
body.staffdark .setg-configure:hover { box-shadow: 0 0 18px var(--setg-asoft); }
body.staffdark .setg-configure i { transition: transform .15s var(--fluid); }
body.staffdark .setg-configure:hover i { transform: translateX(4px); }
/* Focused / chapter sub-view header: back pill + category breadcrumb */
body.staffdark .setg-crumb { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .1rem; }
body.staffdark .setg-back { display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 700; color: #cbd5e1;
    background: #0a1626; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
    padding: .5rem .95rem; cursor: pointer; transition: color .15s, border-color .15s; }
body.staffdark .setg-back:hover { color: #fff; border-color: rgba(255,255,255,.3); }
/* The crumb category chip is the persistent "you are here" marker inside a settings
   chapter/focus view — same active language (accent fill + accent text + edge bar). */
body.staffdark .setg-crumb-cat { display: inline-flex; align-items: center; gap: .45rem;
    color: var(--setg-a); font-weight: 800; font-size: .9rem;
    background: var(--setg-asoft); border-radius: 999px; padding: .45rem .95rem;
    box-shadow: inset 3px 0 0 0 var(--setg-a); }
body.staffdark .setg-crumb-sep { color: #64748b; font-weight: 600; }
body.staffdark .setg-crumb-row { color: #e2e8f0; font-weight: 700; font-size: .86rem; }
/* Row-level Setup deep link that lands inside a shared card (e.g. Receipt currency) */
body.staffdark .setg-focus-field { border-radius: 12px; padding: .65rem; margin: -.65rem;
    background: rgba(59,130,246,.08); box-shadow: 0 0 0 1.5px rgba(59,130,246,.5); }
.ghl-dept-title { font-size: .9rem; font-weight: 700; color: #e6eef9; margin: .1rem 0 .7rem; display: flex; align-items: center; gap: .45rem; }
.ghl-dept-title i { color: #60a5fa; font-size: .9em; }
.iset-card { padding: 1.4rem 1.5rem; }
.iset-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.iset-status { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .25rem .7rem; border: 1px solid transparent; }
.iset-status.ok { background: rgba(16,185,129,.16); color: #34d399; border-color: rgba(16,185,129,.4); }
.iset-status.off { background: rgba(148,163,184,.14); color: #94a3b8; border-color: rgba(148,163,184,.3); }
.iset-status.warn { background: rgba(251,191,36,.14); color: #fbbf24; border-color: rgba(251,191,36,.4); }
.iset-status.bad { background: rgba(248,113,113,.14); color: #f87171; border-color: rgba(248,113,113,.4); }
.iset-badges { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.ghl-test-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.ghl-test-result { font-size: .8rem; font-weight: 600; }
.ghl-test-result.muted { color: #94a3b8; }
.ghl-test-result.ok { color: #34d399; }
.ghl-test-result.err { color: #f87171; }
.ghl-empty { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .2rem; padding: .7rem .85rem; border: 1px dashed #2a3650; border-radius: 10px; background: rgba(148, 163, 184, .06); color: #94a3b8; font-size: .82rem; }
.ghl-empty i { color: #64748b; }
.ghl-hist { margin-top: .9rem; border-top: 1px dashed #2a3650; padding-top: .7rem; }
.ghl-hist-head { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.ghl-hist-empty { font-size: .8rem; color: #64748b; }
.ghl-hist-item { border-bottom: 1px solid rgba(148, 163, 184, .1); }
.ghl-hist-item:last-child { border-bottom: 0; }
.ghl-hist-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .8rem; }
.ghl-hist-toggle { background: none; border: 1px solid rgba(148, 163, 184, .25); border-radius: 6px; color: #94a3b8; font-size: .68rem; font-weight: 700; padding: .15rem .45rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ghl-hist-toggle:hover { color: #cbd5e1; border-color: rgba(148, 163, 184, .5); }
.ghl-hist-toggle.none { border: 0; cursor: default; color: #475569; padding: .15rem .45rem; }
.ghl-hist-payload { margin: 0 0 .5rem; }
.ghl-hist-payload pre { margin: 0; background: #0b1220; border: 1px solid rgba(148, 163, 184, .18); border-radius: 8px; padding: .6rem .7rem; font-size: .7rem; line-height: 1.45; color: #cbd5e1; max-height: 16rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ghl-hist-ev { font-weight: 700; color: #cbd5e1; }
.ghl-hist-time { color: #94a3b8; font-size: .74rem; }
.ghl-hist-out { font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.ghl-hist-out.ok { color: #34d399; }
.ghl-hist-out.err { color: #f87171; }
.iset-sub { color: #ffffff; font-size: .84rem; margin: 0 0 1rem; }
.iset-sub code { font-size: .8em; }
.iset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
.iset-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.iset-colh { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5b7390; margin: .2rem 0 .7rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.iset-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.iset-chip { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: #9db4d4; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: .22rem .5rem; }
.iset-note { display: flex; align-items: center; gap: .55rem; font-size: .76rem; color: #ffffff; background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.18); border-radius: 9px; padding: .6rem .8rem; margin: 1rem 0 0; }
.iset-note i { color: #60a5fa; }
.iset-verify { display: none; align-items: center; gap: .5rem; font-size: .8rem; border-radius: 9px; padding: .6rem .8rem; margin-top: .8rem; }
.iset-verify.pending { display: flex; color: #ffffff; background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.2); }
.iset-verify.ok { display: flex; color: #34d399; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.28); }
.iset-verify.bad { display: flex; color: #f87171; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.28); }
.iset-divider { height: 1px; background: rgba(255,255,255,.08); margin: 1.1rem 0; }

/* WhatsApp Business API settings page (dedicated card, owner mock) */
body.staffdark .wab-card { padding: 0; overflow: hidden; }
body.staffdark .wab-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.6rem; background: linear-gradient(135deg, #25d366, #128c7e); }
body.staffdark .wab-banner-l { display: flex; align-items: center; gap: 1rem; min-width: 0; }
body.staffdark .wab-banner-ico { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; }
body.staffdark .wab-banner-title { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.2; }
body.staffdark .wab-banner-sub { font-size: .82rem; color: rgba(255,255,255,.9); margin-top: .2rem; }
body.staffdark .wab-badge { flex-shrink: 0; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: .32rem .8rem; border: 1px solid transparent; }
body.staffdark .wab-badge.on { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.5); }
body.staffdark .wab-badge.off { background: rgba(15,23,42,.28); color: #fff; border-color: rgba(255,255,255,.35); }
body.staffdark .wab-body { display: grid; grid-template-columns: 1fr 260px; gap: 1.6rem; padding: 1.5rem 1.6rem 1.7rem; }
body.staffdark .wab-main { min-width: 0; }
body.staffdark .wab-sec-h { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5b7390; margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
body.staffdark .wab-field { margin-bottom: 1rem; }
body.staffdark .wab-field > label { display: block; font-size: .78rem; font-weight: 700; color: #cbd7ea; margin-bottom: .35rem; }
body.staffdark .wab-field > label .muted { font-weight: 500; color: #6b7f9c; }
body.staffdark .wab-field input { width: 100%; padding: .6rem .75rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6eef9; font-size: .85rem; }
body.staffdark .wab-field input:focus { outline: none; border-color: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.15); }
body.staffdark .wab-field input[readonly] { color: #93a4bd; background: #0b1424; cursor: not-allowed; }
body.staffdark .wab-help { font-size: .72rem; color: #6b7f9c; margin-top: .3rem; line-height: 1.4; }
body.staffdark .wab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
body.staffdark .wab-webhook { margin-top: .5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
body.staffdark .wab-copyrow { display: flex; gap: .5rem; }
body.staffdark .wab-copyrow input { flex: 1; padding: .6rem .75rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #9db4d4; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
body.staffdark .wab-copyrow .btn { flex-shrink: 0; }
body.staffdark .wab-rail { align-self: start; display: flex; flex-direction: column; gap: .7rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1.1rem; }
body.staffdark .wab-enable { display: flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 600; color: #e6eef9; cursor: pointer; margin-bottom: .3rem; }
body.staffdark .wab-enable input { width: 16px; height: 16px; accent-color: #25d366; }
body.staffdark .wab-btn { width: 100%; justify-content: center; }
@media (max-width: 900px) {
    body.staffdark .wab-body { grid-template-columns: 1fr; }
    body.staffdark .wab-grid { grid-template-columns: 1fr; }
    body.staffdark .wab-rail { order: -1; }
}
.wise-bal { display: inline-block; font-weight: 800; color: #34d399; margin-right: .6rem; }
body.staffdark .pr-payopt { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; margin-bottom: .5rem; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; cursor: pointer; font-size: .88rem; transition: border-color .15s, background .15s; }
body.staffdark .pr-payopt:hover { border-color: rgba(16,185,129,.4); }
body.staffdark .pr-payopt input[type="radio"] { margin-top: .25rem; accent-color: #10b981; }
body.staffdark .pr-payopt input[type="radio"]:checked + span { color: #fff; }
body.staffdark .pr-payopt:has(input:checked) { border-color: rgba(16,185,129,.55); background: rgba(16,185,129,.08); }
.stripe-refund-list { display: flex; flex-direction: column; gap: .4rem; }
.stripe-refund-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; background: #0a1626; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; cursor: pointer; font-size: .85rem; }
.stripe-refund-row:hover { border-color: rgba(16,185,129,.4); }
.iset-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.iset-foot-split { justify-content: space-between; align-items: center; }
.iset-foot-right { display: flex; gap: .6rem; flex-wrap: wrap; }
.iset-quick { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.em-preset.active { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.em-enc { display: flex; gap: 1rem; align-items: center; padding-top: .35rem; }
.em-radio { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 600; color: #ffffff; cursor: pointer; }
.em-radio input { accent-color: var(--emerald); }
.em-logo { border: 2px dashed rgba(255,255,255,.16); border-radius: 12px; padding: 1rem; text-align: center; background: #0a1626; cursor: pointer; transition: border-color .15s; }
.em-logo.drag { border-color: var(--emerald); }
.em-logo-prev img { width: 100%; max-width: 100%; height: auto; border-radius: 8px; display: block; }
.em-logo-ph { color: #5b7390; font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.em-logo-ph i { font-size: 1.5rem; color: rgba(255,255,255,.18); margin-bottom: .2rem; }
.em-logo-ph small { color: #475569; font-size: .72rem; }
.em-logo-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.em-tip { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.22); border-radius: 10px; padding: .7rem .85rem; margin-top: .4rem; }
.em-tip b { display: block; font-size: .76rem; color: #34d399; margin-bottom: .25rem; }
.em-tip p { margin: 0; font-size: .76rem; color: #9db4d4; line-height: 1.55; }
.em-tip b.muted, .em-tip a { color: inherit; }

.iset-fieldrow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; padding: .6rem .2rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.iset-fieldrow:last-of-type { border-bottom: none; }
.iset-fieldname { font-size: .86rem; font-weight: 600; color: #ffffff; display: flex; align-items: center; gap: .5rem; }
.iset-fieldname i { color: #ffffff; width: 15px; text-align: center; }
.iset-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: #ffffff; font-weight: 600; cursor: pointer; }
.iset-toggle input { accent-color: var(--emerald); }

.iset-preview { margin-top: 1rem; background: #0a1626; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.cwp-head { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); color: #fff; font-weight: 700; font-size: .82rem; padding: .65rem .85rem; display: flex; align-items: center; gap: .5rem; }
.cwp-dot { width: 8px; height: 8px; border-radius: 50%; background: #b9f5dc; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.cwp-body { padding: .85rem; display: flex; flex-direction: column; gap: .5rem; }
.cwp-msg { background: rgba(255,255,255,.06); color: #e6eef9; font-size: .8rem; padding: .55rem .7rem; border-radius: 10px 10px 10px 2px; align-self: flex-start; max-width: 90%; }
.cwp-input { font-size: .78rem; color: #ffffff; border: 1px dashed rgba(255,255,255,.16); border-radius: 8px; padding: .5rem .6rem; }
.cwp-empty { font-size: .76rem; color: #5b7390; font-style: italic; }

@media (max-width: 820px) {
    .iset-grid, .iset-cols { grid-template-columns: 1fr; gap: .2rem; }
    .iset-cols { gap: 1.2rem; }
}

/* ── Settings: notification settings groups ───────────────────────────────────── */
.nset-groups { display: flex; flex-direction: column; gap: 1.1rem; }
.nset-group { border: 1px solid rgba(255,255,255,.08); border-radius: 13px; overflow: hidden; background: #0a1626; }
.nset-grouphead { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; color: #fff; }
.nset-grouphead.green { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); }
.nset-grouphead.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.nset-grouphead.amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.nset-grouphead > i { font-size: 1.1rem; opacity: .95; width: 22px; text-align: center; }
.nset-gtitle { font-weight: 800; font-size: .92rem; }
.nset-gsub { font-size: .76rem; opacity: .88; margin-top: .1rem; }
.nset-rows { padding: .5rem .85rem .7rem; }
.nset-row { display: flex; align-items: center; gap: 1rem; padding: .7rem .25rem; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; position: relative; }
.nset-row:last-child { border-bottom: none; }
.nset-row-num { cursor: default; }
.nset-num { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; color: var(--muted, #94a3b8); font-size: .85rem; white-space: nowrap; }
.nset-num input { width: 74px; padding: .45rem .55rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: inherit; font-size: .9rem; text-align: center; }
.nset-rowtext { flex: 1; }
.nset-rowtitle { font-weight: 700; font-size: .86rem; color: #e6eef9; }
.nset-rowdesc { font-size: .77rem; color: #ffffff; margin-top: .12rem; }
.nset-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.nset-box { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; transition: all .12s ease; }
.nset-box i { font-size: .68rem; color: #fff; opacity: 0; transform: scale(.6); transition: all .12s ease; }
.nset-row input:checked ~ .nset-box { background: var(--emerald); border-color: var(--emerald); }
.nset-row input:checked ~ .nset-box i { opacity: 1; transform: scale(1); }
.nset-row input:focus-visible ~ .nset-box { box-shadow: 0 0 0 3px rgba(16,185,129,.3); }
.nset-row:hover .nset-box { border-color: rgba(255,255,255,.4); }

/* ── CRM student row kebab menu ────────────────────────────────────────────────── */
.btn-danger { background: #ef4444; color: #fff; border: 1px solid #ef4444; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.crm-kebab { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #9db4d4; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease; }
.crm-kebab:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.crm-menu { position: fixed; z-index: 4000; min-width: 224px; background: #0e1d33; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .4rem; box-shadow: 0 18px 48px rgba(0,0,0,.5); animation: crmMenuIn .1s ease; }
@keyframes crmMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.crm-menu-item { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; background: none; border: none; color: #dbe6f4; font-size: .85rem; font-weight: 600; padding: .55rem .65rem; border-radius: 8px; cursor: pointer; transition: background .1s ease; font-family: inherit; }
.crm-menu-item i { width: 16px; text-align: center; color: #ffffff; font-size: .82rem; }
.crm-menu-item:hover { background: rgba(16,185,129,.14); color: #fff; }
.crm-menu-item:hover i { color: var(--emerald); }
.crm-menu-item:disabled { opacity: .42; cursor: not-allowed; }
.crm-menu-item:disabled:hover { background: none; color: #dbe6f4; }
.crm-menu-item:disabled:hover i { color: #ffffff; }
.crm-menu-item.danger { color: #f87171; }

/* ── Academy department portal ─────────────────────────────────────────────── */
/* Dashboard header: graduation-cap badge + title + subtitle (mockup match). */
.aca-head-left { display: flex; align-items: center; gap: 1rem; }
.aca-badge { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7); box-shadow: 0 10px 26px rgba(124,58,237,.4); }
/* Top tabs above the stat cards — active tab underlined. */
.aca-tabs { display: flex; gap: .4rem; border-bottom: 1px solid rgba(255,255,255,.08); margin: 0 0 1.4rem; }
.aca-tab { background: none; border: none; padding: .7rem 1.1rem; font-size: .92rem; font-weight: 700; color: #ffffff; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .12s ease; }
.aca-tab:hover { color: #ffffff; }
.aca-tab.on { color: #6ee7b7;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06));
    border-radius: 9px 9px 0 0; box-shadow: inset 0 -3px 0 0 var(--emerald); }
/* Teacher "My Classes" sub-tabs (light mode): Active classes / Recent classes. */
.mc-tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--border); margin: 0 0 1.4rem; }
.mc-tab { background: none; border: none; padding: .7rem 1.1rem; font-size: .92rem; font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .45rem; transition: color .12s ease; }
.mc-tab:hover { color: var(--text-body); }
.mc-tab.on { color: var(--emerald, #10B981);
    background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(16,185,129,.05));
    border-radius: 9px 9px 0 0; box-shadow: inset 0 -3px 0 0 var(--emerald, #10B981); }
body.staffdark .mc-tab.on { color: #6ee7b7;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06)); }
body.staffdark .mc-tab.on i { color: #34d399; }
/* Colored request-type pill — hue driven by --svc per service. */
.aca-svc-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .26rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap;
    color: var(--svc, #94a3b8); background: color-mix(in srgb, var(--svc, #94a3b8) 16%, transparent); border: 1px solid color-mix(in srgb, var(--svc, #94a3b8) 42%, transparent); }
/* Result-count footer line under the table. */
.aca-foot { padding: .85rem 1.2rem; border-top: 1px solid rgba(255,255,255,.07); font-size: .8rem; color: #ffffff; font-weight: 600; }
.aca-toolbar .pv-select { min-width: 0; }
.aca-toolbar .agent-search { margin-left: auto; }
.aca-toolbar #acaNew { background: linear-gradient(135deg, #7c3aed, #a855f7); border: none; color: #fff; }
.aca-toolbar #acaNew:hover { opacity: .92; }
@media (max-width: 900px) { .aca-toolbar .agent-search { margin-left: 0; } }
.aca-svc { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.aca-due-late { color: #f87171; font-weight: 700; }
.aca-lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #ffffff; margin: .9rem 0 .35rem; }
.aca-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .25rem; }
.aca-review-grid > div { font-size: .9rem; color: #dbe6f4; }
.aca-transfer-who { font-size: .9rem; color: #dbe6f4; margin-bottom: .5rem; }
.aca-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.aca-svc-card { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding: .8rem .5rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: #dbe6f4; font-family: inherit; cursor: pointer; transition: all .12s ease; }
.aca-svc-card:hover { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); }
.aca-svc-card.on { background: rgba(16,185,129,.2); border-color: var(--emerald); color: #fff; box-shadow: 0 0 0 1px var(--emerald) inset; }
.aca-svc-emoji { font-size: 1.5rem; line-height: 1; }
.aca-svc-name { font-size: .78rem; font-weight: 600; }
@media (max-width: 720px) {
    .aca-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .aca-review-grid { grid-template-columns: 1fr; }
}
.crm-menu-item.danger i { color: #f87171; }
.crm-menu-item.danger:hover { background: rgba(239,68,68,.14); color: #fca5a5; }
.crm-menu-item.danger:hover i { color: #fca5a5; }
.crm-menu-div { height: 1px; background: rgba(255,255,255,.09); margin: .35rem .3rem; }

/* ── Agent lead profile / edit ─────────────────────────────────────────────── */
.agent-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; margin: 0 .35rem .35rem 0; border-radius: 999px; font-size: .76rem; font-weight: 600; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #c4d2e6; }
.agent-chip.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.agent-chip.on i { color: #fbbf24; }
.agent-contacts-view { display: flex; flex-direction: column; gap: .55rem; }
.agent-contacts-view > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.agent-contacts-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #ffffff; font-weight: 700; min-width: 64px; }
.agent-month { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: .7rem .8rem; margin-bottom: .8rem; background: #0f2138; }
.agent-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font-weight: 700; color: #e6eef9; }
.agent-month-total { color: #34d399; font-weight: 800; }
.agent-edit-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .55rem; }
.agent-edit-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.02); cursor: pointer; }
.agent-edit-row:hover { border-color: rgba(255,255,255,.16); }
.agent-edit-val { flex: 1; color: #e6eef9; font-size: .88rem; }
.agent-edit-pref { font-size: .72rem; color: #ffffff; font-weight: 600; }
.agent-detail-row > td { background: #0b1828; padding: 0; }
.agent-detail-body { padding: 1rem 1.2rem; }
.agent-detail-body .fin-sub:first-child { margin-top: 0; }

/* ── Edit-profile modal (unified lead/student editor) ─────────────────────────
   Dark blue background + white text. Applied via .edit-profile-dark so it is
   identical across EVERY department portal and the admin. ─────────────────── */
.modal-backdrop:has(.modal.edit-profile-dark) .modal,
.modal.edit-profile-dark {
    background: radial-gradient(130% 100% at 50% -10%, #15294d 0%, #0d1f3a 50%, #0a1730 100%);
    border: 1px solid rgba(96,165,250,.28);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.edit-profile-dark .modal-head h3 { color: #ffffff; }
.edit-profile-dark .modal-head h3 i { color: #34d399; }
.edit-profile-dark .close-x { color: #cbd5e1; }
.edit-profile-dark .close-x:hover { color: #ffffff; }
.edit-profile-dark .fin-sub,
.edit-profile-dark h4.fin-sub { color: #f0f6ff; }
.edit-profile-dark .fin-muted { color: #9fb2c9; }
.edit-profile-dark .field input,
.edit-profile-dark .field textarea,
.edit-profile-dark .modal-body input,
.edit-profile-dark .modal-body textarea {
    background: #0a1730; color: #ffffff; border: 1.5px solid rgba(255,255,255,.14);
}
.edit-profile-dark .field input::placeholder,
.edit-profile-dark .field textarea::placeholder,
.edit-profile-dark .modal-body input::placeholder,
.edit-profile-dark .modal-body textarea::placeholder { color: #6f87a6; }
.edit-profile-dark .field input:focus,
.edit-profile-dark .field textarea:focus,
.edit-profile-dark .modal-body input:focus,
.edit-profile-dark .modal-body textarea:focus {
    outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
.edit-profile-dark .agent-edit-row { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.edit-profile-dark .agent-edit-row:hover { border-color: rgba(96,165,250,.4); }
.edit-profile-dark .agent-edit-val { color: #e6eef9; }
.edit-profile-dark .agent-edit-pref { color: #9fb2c9; }
.edit-profile-dark .btn-ghost { background: rgba(255,255,255,.05); color: #dbe5f2; border: 1.5px solid rgba(255,255,255,.18); }
.edit-profile-dark .btn-ghost:hover { background: rgba(255,255,255,.12); color: #ffffff; }
/* Full-edit student form (openStudentModal) opened from the profile card (Task #848):
   same dark-blue palette + refined label/list styling as the scp-card header. */
.edit-profile-dark .field > label {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #9fb2c9; margin-bottom: .35rem; display: block;
}
.edit-profile-dark .field input,
.edit-profile-dark .field textarea { border-radius: 10px; }
.edit-profile-dark .field input[type="date"] { color-scheme: dark; }
.edit-profile-dark .fin-check { color: #e6eef9; }
.edit-profile-dark .fin-check input { accent-color: #34d399; }
.edit-profile-dark .enr-list { background: rgba(10,23,48,.65); border-color: rgba(255,255,255,.12); }
.edit-profile-dark .enr-row { color: #e6eef9; }
.edit-profile-dark .enr-row:hover { background: rgba(96,165,250,.1); }
.edit-profile-dark .enr-sub,
.edit-profile-dark .enr-empty { color: #9fb2c9; }
.edit-profile-dark .modal-foot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1rem; margin-top: 1rem; }
.edit-profile-dark .suspend-banner { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }

/* ── Teacher onboarding wizard ─────────────────────────────────────────────── */
.btn-indigo { background: #6366f1; color: #fff; border: 1px solid #6366f1; }
.btn-indigo:hover { background: #4f46e5; border-color: #4f46e5; }
.modal.modal-wide { max-width: 760px; }
.tw { padding: 1.1rem 1.6rem 1.6rem; }
.tw-steps { display: flex; align-items: center; gap: 4px; margin: .4rem 0 1.3rem; }
.tw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.tw-step:disabled { cursor: default; opacity: .55; }
.tw-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #eef2f7; color: var(--text-muted); border: 2px solid #e2e8f0; font-size: .8rem; transition: all .15s; }
.tw-step.active .tw-dot { background: #eef0ff; color: #6366f1; border-color: #6366f1; }
.tw-step.done .tw-dot { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.tw-lbl { font-size: .68rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.tw-step.active .tw-lbl { color: #4f46e5; }
.tw-step.done .tw-lbl { color: var(--emerald); }
.tw-line { flex: 1; height: 2px; background: #e2e8f0; margin: 0 2px; align-self: flex-start; margin-top: 17px; min-width: 12px; }
.tw-head { display: flex; align-items: center; gap: 12px; margin-bottom: 1.2rem; }
.tw-num { width: 32px; height: 32px; border-radius: 50%; background: #eef0ff; color: #6366f1; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.tw-head h3 { font-size: 1.1rem; font-weight: 800; color: var(--text-heading); }
.tw-head p { font-size: .82rem; margin-top: 1px; }
.tw-form { animation: fade .15s; }
.tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.tw-grid .tw-wide { grid-column: 1 / -1; }
.mtab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mtab-opt {
    display: flex; align-items: center; gap: 10px;
    background: #f6f7fb; border: 1.5px solid var(--border); border-radius: 14px;
    padding: .75rem 1rem; font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); min-height: 52px;
}
.mtab-opt:hover { border-color: #c7ccf2; background: #f0f1fb; box-shadow: 0 2px 8px rgba(79,70,229,.1); }
.mtab-opt input { width: 18px; height: 18px; accent-color: #4f46e5; cursor: pointer; flex: none; }
.mtab-opt i { color: var(--text-muted); width: 18px; text-align: center; font-size: .95rem; flex: none; }
/* Super Admin "System access" confirmation list — every section locked-on (no limits). */
.mtab-opt.is-locked { cursor: default; background: #f0fdf4; border-color: #bbf7d0; box-shadow: none; }
.mtab-opt.is-locked:hover { border-color: #bbf7d0; background: #f0fdf4; box-shadow: none; }
.mtab-opt.is-locked input { cursor: default; accent-color: #16a34a; }
.mtab-opt.is-locked i { color: #16a34a; }
.tw-superhint { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 .6rem; font-size: .82rem; }
.tw-superhint i { color: #16a34a; }
.tw-roflag { display: inline-block; margin-left: .4rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: .08rem .45rem; vertical-align: middle; }
.tw-section { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: .3rem 0 .9rem; }
.tw-info { display: flex; align-items: flex-start; gap: 8px; background: #eef0ff; border: 1px solid #dfe2fb; color: #4f46e5; border-radius: 10px; padding: .7rem .9rem; font-size: .82rem; line-height: 1.4; }
.tw-info i { margin-top: 2px; }
.tw-pwrow { display: flex; gap: 8px; }
.tw-pwrow input { flex: 1; }
.tw-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1.2rem; }
.tw-foot-split { justify-content: space-between; }
.tw-foot-actions { display: flex; gap: 10px; align-items: center; }
.tw-linkbox { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-bottom: 1.1rem; }
.tw-linklabel { font-size: .8rem; font-weight: 700; color: var(--text-heading); display: flex; align-items: center; gap: 7px; margin-bottom: .6rem; }
.tw-linklabel i { color: #6366f1; }
.tw-linkbox input { background: #fff; font-size: .82rem; color: var(--text-muted); margin-bottom: .7rem; }
.tw-linkbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.tw-danger { background: var(--red-soft); border: 1px solid rgba(239,68,68,.25); border-radius: 12px; padding: 1rem; }
.tw-danger-h { font-size: .82rem; font-weight: 800; color: #dc2626; display: flex; align-items: center; gap: 7px; }
.tw-danger p { font-size: .8rem; color: #b91c1c; margin: .45rem 0 .8rem; line-height: 1.45; }
.tw-ssn { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 1rem; }
.tw-ssn-h { font-size: .82rem; font-weight: 800; color: #c2410c; display: flex; align-items: center; gap: 7px; margin-bottom: .7rem; }
.tw-ssn-note { font-size: .76rem; color: #9a3412; margin-top: .6rem; display: flex; align-items: center; gap: 6px; }
.tw-doc-empty { font-size: .82rem; color: var(--text-muted); padding: .6rem 0; }
.tw-doc { display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: .55rem .8rem; margin-bottom: .5rem; }
.tw-doc > i { color: #6366f1; }
.tw-doc-meta { flex: 1; font-size: .82rem; color: var(--text-heading); display: flex; flex-direction: column; }
.tw-doc-meta .muted { font-size: .74rem; }
.tw-docadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.tw-docadd select, .tw-docadd input { width: auto; flex: 1; min-width: 130px; margin: 0; }
.tw-done { text-align: center; padding: 1.5rem 1rem 1rem; animation: fade .2s; }
.tw-done-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--emerald); color: #fff; display: grid; place-items: center; font-size: 1.9rem; margin: 0 auto 1.1rem; box-shadow: 0 10px 26px rgba(16,185,129,.4); }
.tw-done h3 { font-size: 1.25rem; font-weight: 800; color: var(--text-heading); }
.tw-done p { margin-top: .4rem; }
.tw-done-btns { display: flex; gap: 10px; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
@media (max-width: 560px) { .tw-grid { grid-template-columns: 1fr; } .tw-lbl { display: none; } }

/* ── Dark "New Team Member Account" wizard (SCOPED to .tw-modal only) ─────────
   The team-member wizard reuses the light .tw-* markup but renders on a dark
   surface to match the mockup. Every rule below is namespaced under .tw-modal so
   the rest of the (light) app is untouched. --tw-accent is set per step in JS
   (blue → purple → cyan → amber → green). */
.tw-modal { --tw-bg: #050B14; --tw-panel: #0F172A; --tw-input: #1E293B; --tw-border: #334155;
    --tw-text: #F8FAFC; --tw-muted: #94A3B8; --tw-accent: #3b82f6;
    background: var(--tw-panel); border: 1px solid var(--tw-border); }
.tw-modal .modal-head { padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--tw-border); }
.tw-modal .modal-head h3 { color: var(--tw-text); }
.tw-modal .modal-head h3 i { color: var(--tw-accent); }
.tw-modal .close-x { color: var(--tw-muted); }
.tw-modal .close-x:hover { color: var(--tw-text); }
.tw-modal .tw { color: var(--tw-text); }
.tw-modal .tw-head h3 { color: var(--tw-text); }
.tw-modal .tw-head p, .tw-modal .muted, .tw-modal .field label { color: var(--tw-muted); }
.tw-modal .tw-num { background: var(--tw-accent); color: #fff; }
/* Stepper dots — each its own mockup color; active gets a soft ring. */
.tw-modal .tw-dot { background: var(--tw-input); border-color: var(--tw-border); color: var(--tw-muted); }
.tw-modal .tw-lbl { color: var(--tw-muted); }
.tw-modal .tw-line { background: var(--tw-border); }
.tw-modal .tw-step:nth-of-type(1) .tw-dot { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.tw-modal .tw-step:nth-of-type(2) .tw-dot { background: #a855f7; border-color: #a855f7; color: #fff; }
.tw-modal .tw-step:nth-of-type(3) .tw-dot { background: #06b6d4; border-color: #06b6d4; color: #fff; }
.tw-modal .tw-step:nth-of-type(4) .tw-dot { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.tw-modal .tw-step:nth-of-type(5) .tw-dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.tw-modal .tw-step.active .tw-dot { box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.tw-modal .tw-step.active .tw-lbl, .tw-modal .tw-step.done .tw-lbl { color: var(--tw-text); }
/* Inputs */
.tw-modal input, .tw-modal select, .tw-modal textarea {
    background: var(--tw-input); border: 1px solid var(--tw-border); color: var(--tw-text); }
.tw-modal input::placeholder { color: #64748b; }
.tw-modal input:focus, .tw-modal select:focus, .tw-modal textarea:focus {
    outline: none; border-color: var(--tw-accent); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.tw-modal select option { background: var(--tw-panel); color: var(--tw-text); }
/* Section labels + info / boxes */
.tw-modal .tw-section { color: var(--tw-muted); }
.tw-modal .tw-info { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.32); color: #bfdbfe; }
.tw-modal .tw-linkbox { background: var(--tw-bg); border-color: var(--tw-border); }
.tw-modal .tw-linklabel { color: var(--tw-text); }
.tw-modal .tw-linklabel i { color: var(--tw-accent); }
.tw-modal .tw-linkbox input { background: var(--tw-input); color: var(--tw-muted); }
.tw-modal .tw-danger { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.32); }
.tw-modal .tw-danger-h { color: #f87171; }
.tw-modal .tw-danger p { color: #fca5a5; }
.tw-modal .tw-ssn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.32); }
.tw-modal .tw-ssn-h { color: #fbbf24; }
.tw-modal .tw-ssn-note { color: #fcd34d; }
.tw-modal .tw-doc, .tw-modal .tw-selfinfo { background: var(--tw-bg); border-color: var(--tw-border); }
.tw-modal .tw-doc-meta, .tw-modal .tw-doc-meta strong { color: var(--tw-text); }
.tw-modal .tw-doc > i { color: var(--tw-accent); }
.tw-modal .tw-doc-empty { color: var(--tw-muted); }
.tw-modal .mtab-opt { background: var(--tw-input); border-color: var(--tw-border); color: var(--tw-text); }
.tw-modal .mtab-opt i { color: var(--tw-muted); }
.tw-modal .mtab-opt:hover { border-color: var(--tw-accent); }
.tw-modal .tw-superhint i, .tw-modal .mtab-opt.is-locked i { color: #34d399; }
/* Footer buttons — primary action uses the step accent; ghost goes dark. */
.tw-modal .tw-foot .btn-emerald { background: var(--tw-accent); border-color: var(--tw-accent); box-shadow: none; }
.tw-modal .tw-foot .btn-emerald:hover { filter: brightness(1.08); }
.tw-modal .btn-ghost { color: var(--tw-text); border: 1px solid var(--tw-border); background: transparent; }
.tw-modal .btn-ghost:hover { background: var(--tw-input); }
/* Class-schedule picker (Teacher Department) */
.tw-classlist { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; margin-bottom: 1.1rem; }
.tw-classrow { display: flex; align-items: flex-start; gap: 10px; background: var(--tw-bg); border: 1px solid var(--tw-border); border-radius: 10px; padding: .6rem .8rem; cursor: pointer; transition: border-color .12s; }
.tw-classrow:hover { border-color: var(--tw-accent); }
.tw-classrow input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--tw-accent); flex-shrink: 0; }
.tw-classmeta { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; color: var(--tw-text); min-width: 0; }
.tw-classsched { font-size: .77rem; color: var(--tw-muted); margin-top: 2px; }
.tw-classsched i { color: var(--tw-accent); margin-right: 4px; }
.tw-classitem { display: flex; flex-direction: column; gap: 6px; }
.tw-levellist { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 2px 32px; padding: .55rem .7rem; background: var(--tw-bg); border: 1px dashed var(--tw-border); border-radius: 9px; }
.tw-levelhint { font-size: .73rem; color: var(--tw-muted); margin-bottom: 2px; }
.tw-levelhint i { color: var(--tw-accent); margin-right: 5px; }
.tw-levelrow { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: .85rem; color: var(--tw-text); }
.tw-levelrow input { width: 15px; height: 15px; accent-color: var(--tw-accent); flex-shrink: 0; }
.tw-levelrow input:disabled { opacity: .4; cursor: not-allowed; }
.tw-levelrow input:disabled + .tw-levelname { opacity: .5; }
.tw-levelname { min-width: 0; }
.lcc-levels { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Dark "Create Live Class" wizard (SCOPED to .ccw only) ───────────────────
   The rest of TutorClock stays light; every rule here is namespaced under .ccw
   so the dark theme can never leak out. Colors mirror the approved mockup. */
.ccw-modal { background: #050B14; border: 1px solid #334155; max-width: 920px; width: 96vw; padding: 0; overflow: hidden; }
.ccw {
    --ccw-page: #050B14; --ccw-panel: #0F172A; --ccw-input: #1E293B; --ccw-border: #334155;
    --ccw-text: #F8FAFC; --ccw-muted: #94A3B8; --ccw-primary: #2563EB; --ccw-primary-h: #1D4ED8;
    --ccw-success: #10B981; --ccw-success-bg: rgba(16,185,129,.1); --ccw-danger: #EF4444;
    display: flex; flex-direction: column; max-height: 92vh; background: var(--ccw-page);
    color: var(--ccw-text); font-family: 'Inter', system-ui, sans-serif; border-radius: 12px; overflow: hidden;
}
.ccw * { box-sizing: border-box; }
.ccw-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--ccw-border); flex-shrink: 0; }
.ccw-title { text-align: center; }
.ccw-title h1 { font-size: 1.15rem; margin: 0; font-weight: 600; color: var(--ccw-text); }
.ccw-sub { font-size: .78rem; color: var(--ccw-primary); display: block; margin-top: 3px; }
.ccw-btn-ghost { background: transparent; color: var(--ccw-text); border: 1px solid var(--ccw-border); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: .85rem; display: inline-flex; align-items: center; gap: 7px; }
.ccw-btn-ghost:hover { background: var(--ccw-input); }
.ccw-main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 26px 20px; overflow-y: auto; }
.ccw-panel { background: var(--ccw-panel); border: 1px solid var(--ccw-border); border-radius: 12px; width: 100%; max-width: 760px; display: flex; flex-direction: column; box-shadow: 0 10px 25px -5px rgba(0,0,0,.5); animation: ccwFade .3s ease-in-out; }
@keyframes ccwFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ccw-phead { padding: 18px 26px; border-bottom: 1px solid var(--ccw-border); display: flex; align-items: center; gap: 14px; }
.ccw-phead.split { justify-content: space-between; }
.ccw-phead h2 { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--ccw-text); }
.ccw-phead-sub { font-size: .82rem; color: var(--ccw-muted); display: block; margin-top: 2px; }
.ccw-badge { background: var(--ccw-primary); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: bold; flex-shrink: 0; }
.ccw-pbody { padding: 26px; }
.ccw-fg { margin-bottom: 18px; }
.ccw label { display: block; font-size: .82rem; color: var(--ccw-muted); margin-bottom: 7px; }
.ccw input[type="text"], .ccw input[type="url"], .ccw input[type="number"], .ccw input[type="date"], .ccw input[type="time"], .ccw select, .ccw textarea {
    width: 100%; background: var(--ccw-page); border: 1px solid var(--ccw-border); color: var(--ccw-text);
    padding: 10px 12px; border-radius: 6px; font-size: .92rem; font-family: inherit;
}
.ccw textarea { resize: vertical; }
.ccw input:focus, .ccw select:focus, .ccw textarea:focus { outline: none; border-color: var(--ccw-primary); }
.ccw select option { background: var(--ccw-panel); color: var(--ccw-text); }
.ccw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ccw-or { display: flex; gap: 10px; align-items: center; }
.ccw-or > * { flex: 1; }
.ccw-or .ccw-orsep { flex: 0; color: var(--ccw-muted); font-weight: 500; font-size: .85rem; }
.ccw small.ccw-hint { color: var(--ccw-muted); margin-top: 5px; display: block; font-size: .76rem; }
/* Multi-select staff pills */
.ccw-ms { background: var(--ccw-page); border: 1px solid var(--ccw-border); border-radius: 6px; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 42px; }
.ccw-pill { background: var(--ccw-input); border: 1px solid var(--ccw-border); color: var(--ccw-text); padding: 4px 10px; border-radius: 16px; font-size: .82rem; display: inline-flex; align-items: center; gap: 8px; animation: ccwFade .2s; }
.ccw-pill-x { color: var(--ccw-muted); cursor: pointer; font-weight: bold; font-size: 1rem; line-height: 1; }
.ccw-pill-x:hover { color: var(--ccw-danger); }
.ccw-ms select { background: transparent; border: none; color: var(--ccw-muted); font-size: .88rem; outline: none; flex: 1; min-width: 140px; padding: 4px; width: auto; }
/* Level boxes (step 2) */
.ccw-levelbox { background: var(--ccw-page); border: 1px solid var(--ccw-border); border-radius: 8px; padding: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.ccw-levelic { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
.ccw-ic-blue { background: rgba(37,99,235,.2); color: var(--ccw-primary); }
.ccw-ic-green { background: rgba(16,185,129,.2); color: var(--ccw-success); }
.ccw-leveld { flex: 1; min-width: 0; }
.ccw-leveld h4 { margin: 0 0 4px; font-size: 1rem; color: var(--ccw-text); }
.ccw-leveld p { margin: 0; font-size: .78rem; color: var(--ccw-muted); }
.ccw-levellink { flex: 2; display: flex; flex-direction: column; }
.ccw-levellink label { font-size: .72rem; margin-bottom: 4px; }
.ccw-levellink input { background: var(--ccw-input); padding: 8px; font-size: .82rem; }
/* Zoom-link status pills on the Add Levels step (auto-generated by default;
   "Use my own link" is the explicit manual override). */
.ccw-lvlauto { display: flex; align-items: center; gap: 7px; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .35); color: #34d399; border-radius: 6px; padding: 8px 10px; font-size: .8rem; font-weight: 600; }
.ccw-ownlink { font-size: .76rem; margin-top: 6px; display: flex; align-items: center; gap: 6px; cursor: pointer; opacity: .85; }
.ccw-ownlink input { width: auto; margin: 0; }
.ccw-lvlstat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccw-lvlpill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.ccw-lvlpill.ok { background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .4); color: #34d399; }
.ccw-lvlpill.custom { background: rgba(96, 165, 250, .12); border: 1px solid rgba(96, 165, 250, .4); color: #60a5fa; }
.ccw-lvlpill.pending { background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .4); color: #fbbf24; }
.ccw-lvlpill.err { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .45); color: #f87171; }
.ccw-lvlretry { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(248, 113, 113, .55); color: #f87171; border-radius: 999px; padding: 4px 12px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.ccw-lvlretry:hover { background: rgba(248, 113, 113, .12); }
.ccw-lvlerrmsg { color: #f87171; font-size: .72rem; margin-top: 4px; line-height: 1.35; }
.ccw-lvl-errbox { border-color: rgba(248, 113, 113, .45) !important; }
.ccw-levelrm { color: var(--ccw-danger); cursor: pointer; padding: 8px; background: none; border: none; font-size: .95rem; }
.ccw-note { background: var(--ccw-input); padding: 12px; border-radius: 6px; font-size: .82rem; color: var(--ccw-muted); display: flex; gap: 10px; align-items: flex-start; }
.ccw-addlevel { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; background: var(--ccw-page); border: 1px dashed var(--ccw-border); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.ccw-addlevel .ccw-fg { margin: 0; flex: 1; min-width: 120px; }
/* Day pills (step 3) */
.ccw-days { display: flex; gap: 8px; flex-wrap: wrap; }
.ccw-day { padding: 8px 12px; background: var(--ccw-page); border: 1px solid var(--ccw-border); border-radius: 6px; font-size: .82rem; cursor: pointer; color: var(--ccw-muted); user-select: none; }
.ccw-day.sel { background: var(--ccw-primary); color: #fff; border-color: var(--ccw-primary); }
.ccw-slotlist { margin-top: 4px; }
.ccw-slotrow { display: flex; align-items: center; gap: 10px; background: var(--ccw-page); border: 1px solid var(--ccw-border); border-radius: 6px; padding: 9px 12px; margin-bottom: 8px; font-size: .85rem; }
.ccw-slotrow .ccw-slotmeta { flex: 1; }
.ccw-slotrow .muted { color: var(--ccw-muted); font-size: .78rem; }
.ccw-leveledit { color: var(--ccw-muted); cursor: pointer; padding: 8px; background: none; border: none; font-size: .9rem; }
.ccw-leveledit:hover { color: var(--ccw-primary); }
.ccw-slotedit-acts { display: flex; align-items: center; gap: 2px; }
.ccw-levelrm.ok { color: #16a34a; }
/* Large labeled "Save Schedule" confirm button (replaces the old tiny green check). */
.ccw-saveslot { padding: 9px 16px; font-size: .88rem; white-space: nowrap; }
.ccw-slotedit { flex-wrap: wrap; }
.ccw-slotedit-fields { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.ccw-slotedit-fields select { padding: 7px 9px; background: var(--ccw-input); border: 1px solid var(--ccw-border); border-radius: 6px; color: var(--ccw-text); font-size: .82rem; }
/* Footer */
.ccw-foot { padding: 18px 26px; border-top: 1px solid var(--ccw-border); display: flex; justify-content: space-between; gap: 10px; }
.ccw-foot.end { justify-content: flex-end; }
.ccw-btn { background: var(--ccw-primary); color: #fff; border: none; padding: 10px 22px; border-radius: 6px; font-size: .92rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ccw-btn:hover { background: var(--ccw-primary-h); }
.ccw-btn:disabled { opacity: .6; cursor: default; }
.ccw-btn.success { background: var(--ccw-success); }
.ccw-btn.success:hover { background: #059669; }
.ccw-err { color: #fca5a5; font-size: .82rem; margin-top: 10px; min-height: 1em; }
.ccw-checklist { background: var(--ccw-input); border-radius: 6px; padding: 10px; max-height: 220px; overflow-y: auto; }
.ccw-checkrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .88rem; }
.ccw-checkrow:last-child { margin-bottom: 0; }
.ccw-checkrow input { width: auto; }
.ccw select[size] { height: auto; background: var(--ccw-input); }
/* Reminder setup step (step 6) */
.ccw-rtog { display: flex !important; align-items: center; gap: 10px; font-size: .92rem; color: var(--ccw-text) !important; margin-bottom: 18px; cursor: pointer; }
.ccw-rtog input { width: auto; }
.ccw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ccw-chip { background: var(--ccw-page); border: 1px solid var(--ccw-border); color: var(--ccw-muted); padding: 7px 12px; border-radius: 18px; font-size: .82rem; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 7px; transition: all .12s; }
.ccw-chip:hover { border-color: var(--ccw-primary); }
.ccw-chip.on { background: var(--ccw-primary); color: #fff; border-color: var(--ccw-primary); }
.ccw-chip .ccw-pill-x { color: rgba(255,255,255,.85); }
.ccw-mini { background: transparent; border: none; color: var(--ccw-primary); cursor: pointer; font-size: .78rem; padding: 2px 4px; }
.ccw-mini:hover { text-decoration: underline; }
.ccw-pholds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ccw-phold { background: var(--ccw-input); border: 1px solid var(--ccw-border); color: var(--ccw-primary); padding: 4px 9px; border-radius: 6px; font-size: .76rem; font-family: monospace; cursor: pointer; }
.ccw-phold:hover { border-color: var(--ccw-primary); background: var(--ccw-page); }
/* Bottom creation-flow tracker */
.ccw-tracker { background: var(--ccw-panel); border-top: 1px solid var(--ccw-border); padding: 16px 24px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }
.ccw-tracker-h { font-weight: 600; margin-right: 12px; font-size: .9rem; }
.ccw-track { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--ccw-muted); }
.ccw-track.active { color: var(--ccw-text); }
.ccw-tracknum { width: 24px; height: 24px; border-radius: 50%; background: var(--ccw-input); display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.ccw-track.active .ccw-tracknum { background: var(--ccw-primary); color: #fff; }
.ccw-track.done .ccw-tracknum { background: var(--ccw-success); color: #fff; }
.ccw-arrow { color: var(--ccw-border); }
/* Summary tables (step 6) */
.ccw-summary { background: var(--ccw-page); border: 1px solid var(--ccw-border); border-radius: 8px; padding: 18px; margin-bottom: 18px; }
.ccw-summary h3 { margin: 0 0 12px; font-size: 1rem; border-bottom: 1px solid var(--ccw-border); padding-bottom: 10px; color: var(--ccw-text); }
.ccw-summary .ccw-grid2 { gap: 12px 18px; }
.ccw-summary .ccw-grid2 > div { font-size: .9rem; }
.ccw-summary table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ccw-summary th, .ccw-summary td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--ccw-border); }
.ccw-summary th { color: var(--ccw-muted); font-weight: normal; }
.ccw-summary td { color: var(--ccw-text); }
.ccw-link { color: var(--ccw-primary); }
/* Success screen */
.ccw-success { text-align: center; max-width: 480px; padding: 46px 30px; }
.ccw-success-ic { width: 80px; height: 80px; background: var(--ccw-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; color: #fff; margin: 0 auto 20px; border: 8px solid var(--ccw-success-bg); }
.ccw-success h2 { color: var(--ccw-text); margin: 0 0 10px; }
.ccw-success p { color: var(--ccw-muted); margin-bottom: 28px; }
.ccw-success-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 620px) { .ccw-grid2 { grid-template-columns: 1fr; } .ccw-levelbox { flex-wrap: wrap; } .ccw-levellink { flex: 1 1 100%; } .ccw-tracker { gap: 8px; } .ccw-arrow { display: none; } }

/* Quote modal — Stripe link toggle */
.q-stripe-toggle { display: flex; align-items: flex-start; gap: 9px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: .7rem .85rem; margin: .2rem 0 .4rem; font-size: .82rem; line-height: 1.4; color: var(--text-body); cursor: pointer; }
.q-stripe-toggle input { margin-top: 2px; flex-shrink: 0; accent-color: var(--emerald); }
.q-stripe-toggle i { color: var(--emerald); margin-right: 3px; }

/* ── Send Quote modal (CRM) ──────────────────────────────────────────────── */
.modal-body textarea { width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--border); border-radius: 9px; font-size: .92rem; color: var(--text-heading); background: #fff; resize: vertical; min-height: 70px; transition: border-color .15s, box-shadow .15s; }
.modal-body textarea:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.q-client { background: linear-gradient(135deg, var(--navy-900), #1a2d4a); border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1.3rem; }
.q-client-name { color: #fff; font-weight: 700; font-size: .95rem; }
.q-client-sub { color: #9fb3cc; font-size: .82rem; margin-top: 2px; }
.q-label { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .55rem; }
.q-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 1rem; }
.q-method { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #fff; border: 1.5px solid var(--border); border-radius: 11px; padding: .8rem .4rem; transition: all .15s; }
.q-method:hover { border-color: #c7d2e5; background: #f8fafc; }
.q-method.on { border-color: #6366f1; background: #eef0ff; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.q-method-ic { font-size: 1.15rem; display: grid; place-items: center; }
.q-method-lbl { font-size: .72rem; font-weight: 700; color: var(--text-heading); text-align: center; line-height: 1.15; }
.q-note { display: flex; align-items: flex-start; gap: 8px; background: #eef0ff; border: 1px solid #dfe2fb; color: #4f46e5; border-radius: 10px; padding: .65rem .85rem; font-size: .8rem; line-height: 1.4; margin-bottom: 1.3rem; }
.q-note i { margin-top: 2px; flex-shrink: 0; }
.q-ptype { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-ptype-btn { display: flex; align-items: center; justify-content: center; gap: 7px; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: .7rem; font-size: .85rem; font-weight: 700; color: var(--text-body); transition: all .15s; }
.q-ptype-btn:hover { border-color: #c7d2e5; }
.q-ptype-btn.on { background: #6366f1; border-color: #6366f1; color: #fff; }
.q-ptype-btn.is-disabled { opacity: .4; cursor: not-allowed; }
.q-foot { justify-content: stretch; gap: 10px; margin-top: 1.3rem; }
.q-foot .btn-emerald { flex: 1; }
.q-done { text-align: center; padding: .5rem 0 1.2rem; }
.q-done-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--emerald); color: #fff; display: grid; place-items: center; font-size: 1.5rem; margin: 0 auto .9rem; box-shadow: 0 10px 24px rgba(16,185,129,.4); }
.q-done h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-heading); }
.q-done p { margin-top: .35rem; font-size: .85rem; }

/* ── Send Quote: logo banner + class selection ─────────────────────────────── */
.q-brand { display: flex; justify-content: center; margin: -.4rem 0 1rem; }
.q-logo { height: 60px; width: auto; object-fit: contain; }
.q-label-hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); opacity: .85; }
.q-classes { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.3rem; max-height: 190px; overflow-y: auto; }
.q-classes-empty { font-size: .82rem; color: var(--text-muted); background: #f8fafc; border: 1px dashed var(--border); border-radius: 10px; padding: .7rem .85rem; }
.q-class { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1.5px solid var(--border); border-radius: 11px; padding: .65rem .85rem; cursor: pointer; transition: all .15s; }
.q-class:hover { border-color: #c7d2e5; background: #f8fafc; }
.q-class:has(input:checked) { border-color: #10b981; background: #ecfdf5; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.q-class input { width: 18px; height: 18px; accent-color: #10b981; flex-shrink: 0; }
.q-class-info { display: flex; flex-direction: column; line-height: 1.2; }
.q-class-name { font-weight: 700; font-size: .85rem; color: var(--text-heading); }
.q-class-sub { font-size: .76rem; color: var(--text-muted); margin-top: 1px; }
.q-class-price { margin-left: auto; font-weight: 800; font-size: .85rem; color: #0f9d6b; white-space: nowrap; }
.q-class-price-unit { font-weight: 600; font-size: .68rem; color: var(--text-muted); margin-left: 2px; }

/* ── Payment-confirm reactivation alert + due-date choice ──────────────────── */
.pa-react-alert { display: flex; gap: .6rem; align-items: flex-start; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px; padding: .75rem .85rem; margin: 0 0 1rem; font-size: .82rem; line-height: 1.4; color: #065f46; }
.pa-react-alert i { color: #0f9d6b; margin-top: 2px; font-size: 1rem; }
.pa-anchor { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.pa-anchor-opt { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem; cursor: pointer; transition: border-color .12s, background .12s; }
.pa-anchor-opt:hover { border-color: #6ee7b7; background: #f8fefb; }
.pa-anchor-opt input { margin-top: 3px; accent-color: #0f9d6b; }
.pa-anchor-opt span { display: flex; flex-direction: column; gap: 2px; }
.pa-anchor-opt strong { font-size: .84rem; font-weight: 700; color: var(--text); }
.pa-anchor-opt small { font-size: .74rem; color: var(--text-muted); }

/* ── Invoices: linked-class pills + proof link ─────────────────────────────── */
.inv-classes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.inv-class-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 2px 9px; }
.inv-proof-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .74rem; font-weight: 600; color: #4f46e5; background: none; border: none; cursor: pointer; padding: 0; }
.inv-proof-link:hover { text-decoration: underline; }
/* ── Pending Quotes (Draft invoices) section ────────────────────────────────── */
.inv-pq-section { margin-bottom: 1.4rem; }
.inv-pq-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .7rem 1rem; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2); border-bottom: none; border-radius: 10px 10px 0 0; }
.inv-pq-header + .crm-table-wrap { border-radius: 0 0 14px 14px; }
.inv-pq-title { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 700; color: #a5b4fc; }
.inv-pq-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: .72rem; font-weight: 800; background: #6366f1; color: #fff; border-radius: 20px; }
.inv-pq-actions { display: flex; align-items: center; gap: 8px; }

/* ── Class time slots (class modal) ────────────────────────────────────────── */
.slot-section { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); }
.slot-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: .7rem; }
.slot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0f1f33; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: .5rem .75rem; font-size: .85rem; color: #e6eef9; }
.slot-row span, .slot-row b, .slot-row i { color: #e6eef9; }
.slot-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: .6rem; }
.slot-add select, .slot-add input[type="time"], .slot-add input[type="date"] { background: #0a1626; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #e6eef9; padding: .45rem .55rem; font-size: .85rem; }
.slot-add input[type="date"]::-webkit-calendar-picker-indicator, .slot-add input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); cursor: pointer; }
.slot-add-adv { flex-direction: column; align-items: stretch; gap: 10px; }
.slot-add-adv .sl-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.slot-add-adv select, .slot-add-adv input[type="time"], .slot-add-adv input[type="date"], .slot-add-adv input[type="number"] { background: #0a1626; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #e6eef9; padding: .45rem .55rem; font-size: .85rem; }
.slot-add-adv input[type="date"]::-webkit-calendar-picker-indicator, .slot-add-adv input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); cursor: pointer; }
.sl-mini { display: flex; flex-direction: column; gap: 3px; }
.sl-mini > span { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: #8a98ad; }
.sl-mini input[type="number"] { width: 110px; }
.sl-days { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sl-days-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: #8a98ad; }
.sl-day-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-chip { position: relative; cursor: pointer; user-select: none; }
.sl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sl-chip span { display: inline-block; padding: .4rem .6rem; border-radius: 8px; background: #0a1626; border: 1px solid rgba(255,255,255,.14); color: #c4d0e0; font-size: .8rem; }
.sl-chip input:checked + span { background: #10b981; border-color: #10b981; color: #04130d; font-weight: 600; }
.sl-end { padding-top: 4px; border-top: 1px dashed rgba(255,255,255,.1); }
/* Dark-blue dropdown lists need light text so options stay readable. */
select option, select optgroup { background: #0f2138; color: #e6eef9; }

/* ── Verification (audit) log modal ────────────────────────────────────────── */
.audit-list { display: flex; flex-direction: column; gap: 1rem; }
.audit-item { background: #0f1f33; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .8rem; }
.audit-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8rem; margin-bottom: .5rem; }
.audit-facts { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--text-muted); margin-bottom: .6rem; }
.audit-facts i { margin-right: 5px; color: var(--emerald); }
/* Class list — weekly schedule lines under the Subject column */
.cls-sched { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.cls-sched-row { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
    color: var(--text-muted); font-weight: 600; }
.cls-sched-row i { color: var(--emerald); }
.cls-sched.muted { font-size: .78rem; }

.audit-shot { display: block; width: 100%; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); cursor: zoom-in; }
.audit-shot-actions { display: flex; gap: 8px; margin-top: .55rem; }

/* Full-screen verification screenshot viewer (Download + X to close) */
.shot-viewer { position: fixed; inset: 0; z-index: 4000; background: rgba(2,6,16,.93);
    display: flex; align-items: center; justify-content: center; padding: 64px 20px 20px; }
.shot-viewer img { max-width: 96vw; max-height: 88vh; border-radius: 8px; object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.shot-viewer-bar { position: absolute; top: 14px; right: 16px; display: flex; gap: 10px; }
.shot-viewer-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px; padding: .5rem .8rem; font-size: .85rem; font-weight: 600; }
.shot-viewer-btn:hover { background: rgba(255,255,255,.22); }
.shot-viewer-close { padding: .5rem .68rem; }

/* ── Agent Portal dashboard ──────────────────────────────────────────────── */
.main.crm-mode .agent-top,
.agent-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.agent-greet h1 { font-size: 1.7rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.01em; }
.agent-greet h1 .wave { display: inline-block; }
.agent-sub { color: #ffffff; font-size: .9rem; margin-top: .35rem; }
.agent-meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.agent-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 1px solid rgba(255,255,255,.1); }
.agent-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.agent-pill.on { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.4); color: #34d399; }
.agent-pill.off { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.3); color: #94a3b8; }
.agent-clock { display: flex; flex-direction: column; align-items: flex-end; padding: .5rem 1rem; border-radius: 12px; background: #0f2138; border: 1px solid rgba(255,255,255,.08); }
.agent-clock.live { border-color: rgba(16,185,129,.4); box-shadow: 0 0 0 1px rgba(16,185,129,.15); }
.agent-clock-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #ffffff; font-weight: 700; }
.agent-clock-val { font-size: 1.3rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.agent-clock.live .agent-clock-val { color: #34d399; }

.agent-stats { margin-bottom: 1.5rem; }

.agent-leads { overflow-x: hidden; max-width: 100%; }
.agent-leads-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.agent-leads-title { font-size: 1rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: .5rem; }
.agent-leads-title i { color: #a78bfa; }
.agent-leads-sub { font-size: .78rem; color: #ffffff; margin-top: .2rem; }
.agent-leads-tools { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.agent-search { position: relative; display: flex; align-items: center; }
.agent-search i { position: absolute; left: .75rem; color: #ffffff; font-size: .8rem; pointer-events: none; }
.agent-search input { background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: .55rem .8rem .55rem 2rem; color: #e6eef9; font-size: .84rem; min-width: 220px; }
.agent-search input:focus { outline: none; border-color: var(--emerald); }

.agent-contact { display: flex; align-items: center; gap: .7rem; }
.agent-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #a78bfa); color: #fff; font-size: .76rem; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.agent-name { font-weight: 700; color: #fff; }
.agent-cmeta { font-size: .76rem; color: #ffffff; margin-top: .15rem; }
/* "Last sent to X by Y" line — shown in every department portal. Inherits the
   surrounding text color (light on dark dashboards, dark on white modals/tables)
   so it stays legible everywhere. */
.last-transfer { font-size: .72rem; opacity: .85; margin-top: .2rem; display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; line-height: 1.3; }
.last-transfer i { font-size: .66rem; opacity: .8; }
.last-transfer b { font-weight: 600; }
.agent-dim { color: #ffffff; }
.agent-flag { font-size: 1.05rem; }
.agent-you { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #ffffff; }
.agent-you-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.agent-broadcast { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: #94a3b8; }
.agent-broadcast i { font-size: .72rem; }
.agent-empty { padding: 2.5rem 1rem; text-align: center; color: #ffffff; font-size: .9rem; }
.agent-empty i { margin-right: .4rem; }

.lead-pill { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; border: 1px solid rgba(255,255,255,.14); background: #0a1626; color: #ffffff; }
.lead-pill.ls-active { background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.4); color: #34d399; }
.lead-pill.ls-new { background: rgba(56,128,255,.16); border-color: rgba(56,128,255,.4); color: #7aa7ff; }
.lead-pill.ls-pending { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.45); color: #fbbf24; }
.lead-pill.ls-quoted { background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.45); color: #60a5fa; }
.lead-pill.ls-inactive { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.4); color: #cbd5e1; }
.lead-pill.ls-churned { background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.45); color: #94a3b8; }
.lead-pill.ls-rejected { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.45); color: #f87171; }
.lead-pill.ls-free { background: rgba(45,212,191,.16); border-color: rgba(45,212,191,.45); color: #2dd4bf; }
.agent-pending-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: #fbbf24; padding: .25rem .5rem; }
.agent-proof-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; border-radius: 8px; padding: .25rem .5rem; margin-right: .4rem; }
.agent-proof-tag.wait { color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.32); }
.agent-proof-tag.ok { color: #34d399; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.32); }
.agent-proof-tag.draft { color: #a5b4fc; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.3); }
/* Active-card rows that are ALSO on the Due Soon call list (dual-bucket copy) */
.agent-duecall-badge { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .68rem; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.32); border-radius: 8px; padding: .18rem .45rem; white-space: nowrap; }
.agent-duecall-badge i { font-size: .62rem; }
tr.agent-duecall-row > td { background: rgba(251,191,36,.05); }
tr.agent-duecall-row > td:first-child { box-shadow: inset 3px 0 0 rgba(251,191,36,.55); }
.agent-churn-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; color: #94a3b8; background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.3); border-radius: 8px; padding: .25rem .5rem; max-width: 380px; }
/* Do-not-contact / cooldown chips on archived contact rows. */
.arch-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700; border-radius: 8px; padding: .18rem .45rem; margin-top: .35rem; }
.arch-badge.dnc { color: #f87171; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.34); }
.arch-badge.cooldown { color: #94a3b8; background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.3); }
.arch-badge.eligible { color: #34d399; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); }
.arch-badge.reactivated { color: #a78bfa; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.32); }
/* DNC inline badge — used in profile card name, roster contact cell, inbox thread header */
.scp-dnc-badge, .ibx-dnc-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; margin-left: 6px; color: #f87171; background: rgba(248,113,113,.13); border: 1px solid rgba(248,113,113,.38); vertical-align: middle; }
.scp-dnc-badge i, .ibx-dnc-tag i { font-size: 9px; }

/* Appointment / callback badge (Task #478) — an upcoming booking chip on a lead row. */
.arch-badge.appt { color: #60a5fa; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.32); }

/* ── All .agent-leads tables — responsive (Task #810) ────────────────────────
   The .agent-leads wrapper is shared by the Agent, PV, Academy and Technical
   listing tables. Each has a different column layout so column hiding is
   keyed on the table's own modifier class. Open/Transfer row buttons on the
   agent table fold into the kebab via JS at ≤860px (PV/Academy/Tech only
   have a kebab already).
   Agent table   — .crm-table (no pv-table class)
     col: Contact(1) Source(2) Country(3) Status(4) Assigned(5) Created(6) Actions(7)
   PV table      — .crm-table.pv-table (not .aca-table, not .tech-table)
     col: Reference(1) Customer(2) Amount(3) Source(4) Receipt(5) Country(6)
          Date(7) [dynamic: Expires+DaysLeft | AssignedTo] Status(last-1) Actions(last)
   Academy table — .crm-table.aca-table
     col: Bulk(1) #(2) ID/Ref(3) Student(4) ReqType(5) SvcDetails(6)
          Priority(7) Status(8) AssignedTo(9) DueDate(10) Actions(11)
   Tech table    — .crm-table.tech-table
     col: Contact(1) IssueType(2) Device/App(3) Status(4) AssignedTo(5) Updated(6) Actions(7) */

@media (max-width: 1100px) {
    /* Agent — hide Assigned (col 5) */
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) th:nth-child(5),
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) td:nth-child(5) { display: none; }
    /* PV — hide Country (col 6) */
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) th:nth-child(6),
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) td:nth-child(6) { display: none; }
    /* Academy — hide Priority (col 7) + Assigned To (col 9) */
    .agent-leads .crm-table.aca-table th:nth-child(7),
    .agent-leads .crm-table.aca-table td:nth-child(7),
    .agent-leads .crm-table.aca-table th:nth-child(9),
    .agent-leads .crm-table.aca-table td:nth-child(9) { display: none; }
    /* Tech — hide Assigned To (col 5) */
    .agent-leads .crm-table.tech-table th:nth-child(5),
    .agent-leads .crm-table.tech-table td:nth-child(5) { display: none; }
}
@media (max-width: 860px) {
    /* Agent — hide Source (col 2) + Country (col 3) */
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) th:nth-child(2),
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) td:nth-child(2),
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) th:nth-child(3),
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) td:nth-child(3) { display: none; }
    /* Open/Transfer buttons hidden here are surfaced as kebab items via JS (agent table only). */
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) td.actions [data-aedit],
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) td.actions [data-atransfer] { display: none; }
    /* PV — hide Source (col 4) + Receipt (col 5) */
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) th:nth-child(4),
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) td:nth-child(4),
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) th:nth-child(5),
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) td:nth-child(5) { display: none; }
    /* Academy — hide Service Details (col 6) + Due Date (col 10) */
    .agent-leads .crm-table.aca-table th:nth-child(6),
    .agent-leads .crm-table.aca-table td:nth-child(6),
    .agent-leads .crm-table.aca-table th:nth-child(10),
    .agent-leads .crm-table.aca-table td:nth-child(10) { display: none; }
    /* Tech — hide Device/App (col 3) + Updated (col 6) */
    .agent-leads .crm-table.tech-table th:nth-child(3),
    .agent-leads .crm-table.tech-table td:nth-child(3),
    .agent-leads .crm-table.tech-table th:nth-child(6),
    .agent-leads .crm-table.tech-table td:nth-child(6) { display: none; }
    /* Prevent the search bar enforcing a wide minimum on tablets. */
    .agent-leads .agent-search input { min-width: 140px; }
}
@media (max-width: 620px) {
    /* Agent — hide Status (col 4) */
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) th:nth-child(4),
    .agent-leads .crm-table:not(.pv-table):not(.aca-table):not(.tech-table) td:nth-child(4) { display: none; }
    /* PV — hide Date (col 7) + any dynamic middle cols (Expires/DaysLeft/AssignedTo).
       nth-child(n+7):nth-last-child(n+3) targets every col from position 7 onward
       that is not Status (nth-last-child(2)) or Actions (nth-last-child(1)). */
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) th:nth-child(n+7):nth-last-child(n+3),
    .agent-leads .crm-table.pv-table:not(.aca-table):not(.tech-table) td:nth-child(n+7):nth-last-child(n+3) { display: none; }
    /* Academy — hide # (col 2) */
    .agent-leads .crm-table.aca-table th:nth-child(2),
    .agent-leads .crm-table.aca-table td:nth-child(2) { display: none; }
    .agent-leads .agent-search input { min-width: 0; flex: 1; }
}

/* ── Big appointment countdown alert (Task #483) ─────────────────────────────
   Fixed prominent card (top-right) with live HRS:MINS:SECS countdown. Two
   phases: "coming up" (orange) before the appointment, "due now" (red) once
   the scheduled time has passed. Pulsing glow gated by prefers-reduced-motion. */
.aac-wrap { position: fixed; top: 70px; right: 16px; z-index: 4200;
    width: min(560px, calc(100vw - 32px)); background: #080e1d; color: #e8eef7;
    border: 1.5px solid rgba(251,191,36,.5); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(2,8,23,.65); overflow: hidden; }
.aac-wrap.aac-due { border-color: rgba(239,68,68,.55); }
@keyframes aacPop { from { transform: translateY(-18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .aac-wrap { animation: aacPop .38s ease, aacGlow 2.6s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .aac-wrap { animation: none; } }
    @keyframes aacGlow { 0%,100% { box-shadow: 0 24px 60px rgba(2,8,23,.65), 0 0 0 0 rgba(251,191,36,0); }
                         50%  { box-shadow: 0 24px 60px rgba(2,8,23,.65), 0 0 26px 8px rgba(251,191,36,.28); } }
    .aac-wrap.aac-due { animation: aacPop .38s ease, aacGlowRed 2.2s ease-in-out infinite; }
    @keyframes aacGlowRed { 0%,100% { box-shadow: 0 24px 60px rgba(2,8,23,.65), 0 0 0 0 rgba(239,68,68,0); }
                             50%  { box-shadow: 0 24px 60px rgba(2,8,23,.65), 0 0 26px 8px rgba(239,68,68,.32); } } }
.aac-head { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem;
    background: linear-gradient(90deg, rgba(251,191,36,.1), rgba(251,191,36,0));
    border-bottom: 1px solid rgba(251,191,36,.2); }
.aac-wrap.aac-due .aac-head { background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,0));
    border-bottom-color: rgba(239,68,68,.28); }
.aac-alarm { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.aac-alarm i { color: #fbbf24; }
.aac-wrap.aac-due .aac-alarm i { color: #f87171; }
.aac-headline { flex: 1 1 auto; min-width: 0; }
.aac-badge { display: inline-block; padding: .13rem .5rem; border-radius: 4px; font-size: .63rem;
    font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    background: rgba(251,191,36,.18); color: #fbbf24; margin-bottom: .28rem; }
.aac-wrap.aac-due .aac-badge { background: rgba(239,68,68,.22); color: #f87171; }
.aac-title { margin: 0; font-size: .98rem; font-weight: 800; line-height: 1.25; }
.aac-sub { margin: .18rem 0 0; font-size: .76rem; color: #9fb2cc; }
.aac-timer-block { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.aac-apt-time { font-size: .7rem; color: #9fb2cc; text-align: center; line-height: 1.45; }
.aac-apt-time strong { display: block; font-size: .8rem; color: #e8eef7; font-weight: 700; }
.aac-apt-time em { display: block; color: #fbbf24; font-style: normal; font-size: .76rem; font-weight: 600; }
.aac-wrap.aac-due .aac-apt-time em { color: #f87171; }
.aac-cd { text-align: center; }
.aac-cd-label { font-size: .6rem; color: #fbbf24; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; margin-bottom: .12rem; }
.aac-wrap.aac-due .aac-cd-label { color: #f87171; }
.aac-cd-digits { display: block; font-size: 1.75rem; font-weight: 900; letter-spacing: .04em; color: #fbbf24;
    line-height: 1; font-variant-numeric: tabular-nums; }
.aac-wrap.aac-due .aac-cd-digits { color: #f87171; font-size: 1.1rem; }
.aac-cd-sublabels { display: flex; gap: .75rem; font-size: .56rem; color: #9fb2cc; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; justify-content: center; margin-top: .1rem; }
.aac-urgent-pill { display: flex; align-items: center; gap: .28rem; padding: .22rem .6rem;
    border-radius: 20px; background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.38);
    color: #fbbf24; font-size: .7rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; flex-shrink: 0; }
.aac-urgent-dot { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24;
    animation: aacDotPulse 1.4s ease-in-out infinite; }
@keyframes aacDotPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .aac-urgent-dot { animation: none; } }
.aac-wrap.aac-due .aac-urgent-pill { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.38); color: #f87171; }
.aac-wrap.aac-due .aac-urgent-dot { background: #f87171; }
.aac-collapse-btn { background: none; border: none; color: #9fb2cc; cursor: pointer;
    font-size: .9rem; flex-shrink: 0; padding: .3rem .5rem; border-radius: 6px; line-height: 1; }
.aac-collapse-btn:hover { color: #e8eef7; }
.aac-body { padding: .7rem 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.aac-wrap.aac-collapsed .aac-body { display: none; }
.aac-contact-row { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.aac-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(251,191,36,.15);
    color: #fbbf24; font-size: .82rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aac-wrap.aac-due .aac-avatar { background: rgba(239,68,68,.15); color: #f87171; }
.aac-cname { font-weight: 700; font-size: .88rem; }
.aac-cmeta { font-size: .72rem; color: #9fb2cc; margin-top: .08rem; }
.aac-actions { display: flex; flex-wrap: wrap; gap: .38rem; }
.aac-actions .btn { padding: .3rem .65rem; font-size: .74rem; }
.aac-footer { display: flex; align-items: center; justify-content: space-between;
    padding: .45rem 1rem; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); }
.aac-wrap.aac-collapsed .aac-footer { border-top: 0; padding-top: 0; padding-bottom: 0; height: 0; overflow: hidden; }
.aac-more { font-size: .71rem; color: #9fb2cc; }
.aac-dismiss-btn { background: none; border: 1px solid rgba(255,255,255,.14); color: #9fb2cc;
    font-size: .71rem; font-weight: 600; padding: .2rem .58rem; border-radius: 6px; cursor: pointer; }
.aac-dismiss-btn:hover { color: #e8eef7; border-color: rgba(255,255,255,.32); }
/* Archive-reason radio choices in the "mark not interested" modal. */
.arch-choice { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .65rem; margin-bottom: .5rem; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .86rem; }
.arch-choice input { margin-top: .2rem; }
.arch-choice:has(input:checked) { border-color: #f87171; background: rgba(248,113,113,.06); }
.arch-choice .fin-muted { display: block; font-weight: 400; margin-top: .1rem; }
.lead-status-note { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lead-status-note .muted { font-size: .8rem; }

/* ── Payment-Verification portal ───────────────────────────────────────────── */
.pv-title-badge { color: #34d399; font-size: .7em; vertical-align: middle; }
.dash-stat.is-metric { cursor: default; }
.dash-stat.is-metric:hover { transform: none; box-shadow: none; }
.pv-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.4rem 0 1rem; }
.pv-toolbar .agent-search input { min-width: 200px; }
.pv-toolbar .pv-select, .pv-toolbar .pv-amt, .pv-toolbar .pv-date { width: auto; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: .55rem .7rem; color: #e6eef9; font-size: .82rem; transition: border-color .15s, box-shadow .15s; }
.pv-toolbar .pv-amt { width: 110px; }
.pv-toolbar .pv-date { color-scheme: dark; min-width: 150px; }
.pv-toolbar .pv-date::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.55); cursor: pointer; }
.pv-toolbar .pv-amt::placeholder { color: #ffffff; }
.pv-toolbar .pv-select:focus, .pv-toolbar .pv-amt:focus, .pv-toolbar .pv-date:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
#pvExport { margin-left: auto; }
.pv-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.pv-chip { padding: .4rem .8rem; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #9db4d4; cursor: pointer; transition: all .12s ease; }
.pv-chip:hover { background: rgba(255,255,255,.1); color: #fff; }
.pv-chip.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.pv-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; color: #9db4d4; font-weight: 700; white-space: nowrap; }
.pv-proof-link { background: none; border: none; color: #60a5fa; cursor: pointer; font-size: .8rem; font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; padding: 0; }
.pv-proof-link:hover { color: #93c5fd; text-decoration: underline; }
.lead-pill.ls-escalated { background: rgba(251,146,60,.16); border-color: rgba(251,146,60,.45); color: #fb923c; }
/* ── Payment-verification "Review" modal (light/white modal — readable on #fff) ── */
.modal-backdrop:has(.pv-rev-card) .modal { max-width: 560px; }
/* Wise send-all confirm/results dialogs: 3-column worker tables need more room than the 460px default */
.modal-backdrop:has(.wsa-head) .modal { max-width: 720px; }
.modal-backdrop:has(.wsa-head) .modal td { white-space: normal; }
@media (max-width: 520px) {
    .modal-backdrop:has(.wsa-head) .modal th, .modal-backdrop:has(.wsa-head) .modal td { padding: .55rem .45rem; font-size: .78rem; }
    .modal-backdrop:has(.wsa-head) .modal td .lead-pill { font-size: .6rem; padding: .16rem .4rem; }
}
.pv-rev-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.pv-rev-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #475569; font-weight: 800; font-size: .82rem; letter-spacing: .02em; }
.pv-rev-amount { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; margin-bottom: 1.1rem; border-radius: 14px; background: linear-gradient(135deg, #ecfdf5, #f0fdfa); border: 1px solid #bbf7d0; }
.pv-rev-amount-k { font-size: .76rem; font-weight: 700; color: #047857; text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .45rem; }
.pv-rev-amount-v { font-size: 1.7rem; font-weight: 800; color: #065f46; line-height: 1; }
/* "Original $X — code YOOS20OFF (20% off) — $Y" line (receipts mirror; student cards + PV verify) */
.disc-applied { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .3rem .6rem; border-radius: 999px; background: #fefce8; border: 1px solid #fde68a; color: #92400e; font-size: .78rem; font-weight: 700; }
.disc-applied i { color: #d97706; }
.pv-rev-disc { margin: -.55rem 0 1.1rem; }
.pv-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem 1.2rem; margin-bottom: 1.1rem; }
.pv-rev-grid > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pv-rev-grid > div.pv-rev-wide { grid-column: span 3; }
.pv-rev-k { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 800; }
.pv-rev-v { font-size: .92rem; color: #0f172a; font-weight: 600; word-break: break-word; }
.pv-attribs { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 1.1rem; }
.pv-attrib { font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; }
.pv-attrib.ok { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
/* Assigned-reviewer badge on PV pending rows (round-robin auto-assignment). */
.pv-assignee { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: #475569; white-space: nowrap; }
.pv-assignee i { color: #6366f1; font-size: .72rem; }
.pv-assignee.is-me { color: #4338ca; }
.pv-attrib.bad { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.pv-attrib.warn { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
/* "Confirmed by Stripe" rows inside the PV proof box (webhook-confirmed payments). */
.pv-stripe-confirm { margin-bottom: .55rem; flex-wrap: wrap; }
.pv-stripe-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; font-weight: 500; opacity: .85; word-break: break-all; }
.pv-rev-sub { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #475569; margin: 0 0 .55rem; display: flex; align-items: center; gap: .45rem; }
.pv-rev-sub i { color: var(--emerald); }
.pv-proof-box { min-height: 60px; padding: .85rem; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; }
.pv-proof-box .iset-note { color: #475569; }
.pv-proof-img { max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid #e2e8f0; margin-top: .5rem; }
.pv-proof-meta { font-size: .78rem; color: #475569; font-weight: 600; margin-bottom: .4rem; }
/* Action bar — four clearly readable buttons + Close */
.pv-rev-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.3rem; }
.pv-act { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1rem; border-radius: 12px; font-size: .92rem; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; transition: transform .08s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease; }
.pv-act:hover { transform: translateY(-1px); }
.pv-act:active { transform: translateY(0); }
.pv-act i { font-size: 1rem; }
.pv-act-ok { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 6px 16px rgba(16,185,129,.28); }
.pv-act-bad { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 6px 16px rgba(239,68,68,.28); }
.pv-act-neutral { background: #fff; color: #1e293b; border-color: #cbd5e1; }
.pv-act-neutral:hover { background: #f8fafc; border-color: #94a3b8; }
.pv-act-danger { background: #fff; color: #dc2626; border-color: #fca5a5; }
.pv-act-danger:hover { background: #fef2f2; border-color: #f87171; }
.pv-act-close { background: #f1f5f9; color: #475569; border-color: #e2e8f0; grid-column: span 2; }
.pv-act-close:hover { background: #e2e8f0; color: #1e293b; }
/* ── PV Review modal — DARK redesign (owner mock, July 2026). Staff views run under
   body.staffdark, so these override the light rules above only there; nothing leaks
   into the student portal or other modals (all selectors ride .pv-rev-card). ── */
body.staffdark .modal-backdrop:has(.pv-rev-card) .modal { max-width: 640px; background: #0b1524; border: 1px solid rgba(148,163,184,.16); }
body.staffdark .pv-rev-head h3 { display: flex; align-items: center; gap: .65rem; color: #fff; }
body.staffdark .pv-rev-head .pv-rev-hic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(16,185,129,.18); color: #34d399; font-size: 1.05rem; }
body.staffdark .pv-rev-ref { color: #94a3b8; }
/* Light-green amount banner pops on the dark card (per mock) — keep the light bg. */
body.staffdark .pv-rev-amount { background: #eafcf1; border: 1.5px solid #34d399; }
body.staffdark .pv-rev-amount-k { color: #047857; }
body.staffdark .pv-rev-amount-v { color: #059669; font-size: 1.85rem; }
/* Icon-tile info grid */
.pv-ig { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.pv-ig-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pv-ig-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .98rem; background: #eef2f7; color: #475569; }
body.staffdark .pv-ic-blue { background: rgba(59,130,246,.2); color: #60a5fa; }
body.staffdark .pv-ic-purple { background: rgba(139,92,246,.22); color: #a78bfa; }
body.staffdark .pv-ic-orange { background: rgba(249,115,22,.22); color: #fb923c; }
body.staffdark .pv-ic-green { background: rgba(16,185,129,.2); color: #34d399; }
body.staffdark .pv-rev-grid { gap: 1rem 1rem; }
/* Mock layout per tile: icon + LABEL on one row, the value below spanning full width. */
body.staffdark .pv-rev-grid > div.pv-ig { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .35rem .6rem; align-items: center; align-content: start; }
body.staffdark .pv-ig .pv-ig-body { display: contents; }
body.staffdark .pv-ig .pv-rev-v { grid-column: 1 / -1; }
body.staffdark .pv-ig .pv-ig-date { grid-column: 1 / -1; }
body.staffdark .pv-rev-grid .pv-ig-div { border-top: 1px solid rgba(148,163,184,.14); padding-top: 1rem; }
body.staffdark .pv-rev-k { color: #94a3b8; }
body.staffdark .pv-rev-v { color: #e6eef9; }
.pv-ig-date { font-size: .82rem; color: #94a3b8; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
/* Attribution / history chips on the dark card */
body.staffdark .pv-rev-card .pv-attrib { border-color: rgba(148,163,184,.22); background: rgba(148,163,184,.08); color: #cbd5e1; }
body.staffdark .pv-rev-card .pv-attrib.ok { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.1); color: #6ee7b7; }
body.staffdark .pv-rev-card .pv-attrib.bad { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); color: #fca5a5; }
body.staffdark .pv-rev-card .pv-attrib.warn { border-color: rgba(251,146,60,.4); background: rgba(251,146,60,.1); color: #fdba74; }
/* Proof of payment — dark section + compact file row */
body.staffdark .pv-rev-sub { color: #cbd5e1; border-top: 1px solid rgba(148,163,184,.14); padding-top: 1rem; }
body.staffdark .pv-rev-sub i { color: #34d399; }
body.staffdark .pv-rev-card .pv-proof-box { border-color: rgba(148,163,184,.18); background: rgba(148,163,184,.06); color: #cbd5e1; }
body.staffdark .pv-rev-card .pv-proof-box .iset-note { color: #94a3b8; }
body.staffdark .pv-rev-card .pv-proof-meta { color: #94a3b8; }
.pv-proof-row { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pv-proof-thumbwrap { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(148,163,184,.25); }
.pv-proof-thumb { width: 100%; height: 100%; object-fit: cover; }
.pv-proof-thumb-doc { font-size: 1.3rem; color: #ef4444; background: rgba(255,255,255,.08); }
.pv-proof-rowmeta { flex: 1 1 auto; min-width: 0; font-size: .84rem; font-weight: 600; color: #cbd5e1; word-break: break-word; }
.pv-proof-rowmeta b { color: #e6eef9; font-weight: 700; }
.pv-proof-dl { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-left: 1px solid rgba(148,163,184,.2); padding-left: .6rem; color: #cbd5e1; font-size: 1.05rem; text-decoration: none; transition: color .15s; }
.pv-proof-dl:hover { color: #fff; }
/* Action buttons — solid green/red keep their gradients; neutrals go dark-outline,
   danger goes red-outline, Close is a full-width dark bar. */
body.staffdark .pv-rev-card .pv-act-neutral { background: rgba(13,27,46,.7); color: #e6eef9; border-color: rgba(148,163,184,.3); }
body.staffdark .pv-rev-card .pv-act-neutral:hover { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.5); }
body.staffdark .pv-rev-card .pv-act-danger { background: rgba(13,27,46,.7); color: #f87171; border-color: rgba(239,68,68,.5); }
body.staffdark .pv-rev-card .pv-act-danger:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.7); }
body.staffdark .pv-rev-card .pv-act-close { background: rgba(148,163,184,.08); color: #cbd5e1; border-color: rgba(148,163,184,.22); }
body.staffdark .pv-rev-card .pv-act-close:hover { background: rgba(148,163,184,.16); color: #fff; }
/* Responsive: 3-col row collapses on phones; action grid goes single column very narrow. */
@media (max-width: 560px) {
    body.staffdark .pv-rev-grid { grid-template-columns: 1fr; }
    body.staffdark .pv-rev-grid > div.pv-rev-wide { grid-column: span 1; }
    body.staffdark .pv-rev-grid .pv-ig { border-top: 1px solid rgba(148,163,184,.14); padding-top: 1rem; }
    body.staffdark .pv-rev-grid .pv-ig:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 420px) {
    body.staffdark .pv-rev-card .pv-rev-actions { grid-template-columns: 1fr; }
    body.staffdark .pv-rev-card .pv-act-close { grid-column: span 1; }
}
.btn-warn { background: linear-gradient(135deg, #f59e0b, #f7901e); color: #fff; border: 1px solid transparent; }
.btn-warn:hover { opacity: .92; }
.btn-ghost.danger { color: #f87171; border-color: rgba(248,113,113,.35); }
@media (max-width: 760px) { .pv-rev-grid { grid-template-columns: repeat(2, 1fr); } .pv-rev-grid > div.pv-rev-wide { grid-column: span 2; } .pv-rev-actions { grid-template-columns: 1fr; } .pv-act-close { grid-column: span 1; } #pvExport { margin-left: 0; } }

@media (max-width: 900px) {
    .agent-top { flex-direction: column; }
    .agent-search input { min-width: 140px; }
}

.agent-dash { padding: 1.8rem 2.25rem 3rem; }
@media (max-width: 760px) { .agent-dash { padding: 1.2rem 1.1rem 2.5rem; } }

/* ── One-screen department dashboards (Agent / PV / Academy / Technical) ─────
   The PAGE never scrolls: the dashboard fills the main area and only the
   listing region scrolls internally. Opt-in via .dash-fit on .agent-dash so
   other .agent-dash screens (e.g. Earnings) keep normal page scrolling.
   #mainArea is the flex-col scroller — position:sticky is unreliable there,
   so we pin by giving the list its own overflow sub-region instead. */
.main:has(> .agent-dash.dash-fit) { overflow: hidden; }
.agent-dash.dash-fit { display: flex; flex-direction: column; height: 100%; min-height: 0;
    padding: 1.1rem 1.6rem 1.1rem; }
.agent-dash.dash-fit > .agent-top { margin-bottom: .85rem; flex: 0 0 auto; }
.agent-dash.dash-fit .agent-stats { margin-bottom: .85rem; flex: 0 0 auto; }
.agent-dash.dash-fit .pv-toolbar { margin: 0 0 .7rem; flex: 0 0 auto; }
.agent-dash.dash-fit .aca-tabs { flex: 0 0 auto; }
/* The scrollable listing regions, one per dashboard */
.agent-dash.dash-fit > #agentListing,
.agent-dash.dash-fit > #acaListing { flex: 1 1 auto; min-height: 0; overflow: auto; }
.agent-dash.dash-fit > .pv-view-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.agent-dash.dash-fit > .pv-view-pane > #pvListing { flex: 1 1 auto; min-height: 0; overflow: auto; }
.agent-dash.dash-fit > .tech-tickets-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.agent-dash.dash-fit > .tech-tickets-card > .crm-table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Shared All Contacts / Academy Active-Students lists: the list region is the
   internal scroller so the FULL table stays reachable under the screen-fit
   shell (the toolbar + header stay pinned above it). */
.agent-dash.dash-fit > .aca-contacts-toolbar { flex: 0 0 auto; }
.agent-dash.dash-fit > .allct-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.allct-scroll .data-table thead th { position: sticky; top: 0; z-index: 2; background: #0a1626; }
/* Compact chrome so header + stat cards + toolbar + list all fit the viewport */
.agent-dash.dash-fit .agent-greet h1 { font-size: clamp(1.1rem, 2.2vh, 1.55rem); }
.agent-dash.dash-fit .agent-sub { font-size: clamp(.72rem, 1.4vh, .88rem); margin-top: .2rem; }
.agent-dash.dash-fit .dash-stat { padding: clamp(.55rem, 1.4vh, 1rem) clamp(.65rem, 1.2vw, 1.05rem); }
.agent-dash.dash-fit .dash-stat-val { font-size: clamp(1.05rem, 2.6vh, 1.7rem); }
.agent-dash.dash-fit .dash-stat-label { font-size: clamp(.62rem, 1.25vh, .78rem); }
.agent-dash.dash-fit .dash-stat-sub { font-size: clamp(.58rem, 1.15vh, .72rem); }
.agent-dash.dash-fit .dash-stat-link { font-size: clamp(.58rem, 1.15vh, .72rem); margin-top: .25rem; }
@media (max-height: 800px) {
    .agent-dash.dash-fit { padding: .8rem 1.4rem .8rem; }
    .agent-dash.dash-fit > .agent-top { margin-bottom: .55rem; }
    .agent-dash.dash-fit .agent-stats { margin-bottom: .55rem; gap: .6rem; }
    .agent-dash.dash-fit .dash-stat-sub { display: none; }
}
/* Phones keep normal page scrolling — a fixed-height grid is unusable there. */
@media (max-width: 860px) {
    .main:has(> .agent-dash.dash-fit) { overflow-y: auto; }
    .agent-dash.dash-fit { height: auto; display: block; }
    .agent-dash.dash-fit > #agentListing,
    .agent-dash.dash-fit > #acaListing,
    .agent-dash.dash-fit > .allct-scroll,
    .agent-dash.dash-fit > .pv-view-pane > #pvListing,
    .agent-dash.dash-fit > .tech-tickets-card > .crm-table-scroll { overflow: visible; }
}

/* My Earnings */
.earn-hero { display: flex; align-items: center; gap: 1.1rem; margin: 1.4rem 0 1.6rem; padding: 1.3rem 1.5rem; border-radius: 16px;
    background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(59,130,246,.12)); border: 1px solid rgba(16,185,129,.32); }
.earn-hero-ic { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; color: #34d399; background: rgba(16,185,129,.2); border: 1px solid rgba(16,185,129,.4); }
.earn-hero-label { color: #ffffff; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.earn-hero-type { color: #e7eefb; font-size: 1.15rem; font-weight: 700; margin-top: .15rem; }
.earn-hero-rate { color: #34d399; font-size: 1.5rem; font-weight: 800; margin-top: .1rem; }
.earn-note { margin-top: 1.4rem; padding: .85rem 1.1rem; border-radius: 12px; background: #0a1626; border: 1px solid rgba(255,255,255,.1); color: #ffffff; font-size: .85rem; line-height: 1.5; }
.earn-note i { color: #60a5fa; margin-right: .45rem; }
/* Card-tabs: clicking a stat card swaps the single listing panel below it. */
#agentListing { margin-bottom: 1.5rem; }
.dash-stat.active { border-color: var(--ds-accent, #60a5fa); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-accent, #60a5fa) 55%, transparent), 0 12px 26px rgba(0,0,0,.4); background: color-mix(in srgb, var(--ds-accent, #60a5fa) 13%, #0f2138); }
.dash-stat.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ds-accent, #60a5fa); }
/* Full-width earnings panel under the listing. */
.earn-card { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.3rem 1.4rem 1.5rem; }
.earn-card + .earn-card { margin-top: 1.5rem; }
.earn-section-head { display: flex; align-items: center; gap: .55rem; font-size: 1rem; font-weight: 800; color: #e7eefb; margin-bottom: 1rem; }
.earn-section-head i { color: #34d399; }
.earn-amt { text-align: right; font-weight: 800; color: #34d399; white-space: nowrap; }
.earn-empty { text-align: center; padding: 2.6rem 1rem; color: #9fb0c7; }
.earn-empty i { font-size: 2rem; color: #5a6b85; display: block; margin-bottom: .7rem; }
.earn-empty p { font-size: .9rem; margin: 0; }
.earn-card .earn-hero { margin: 0 0 1.1rem; }
.earn-card .earn-mini { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.earn-card .earn-note { margin-top: 1.1rem; }
@media (max-width: 600px) { .earn-card .earn-mini { grid-template-columns: 1fr; } }

.agent-filter { background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: .55rem 2rem .55rem .8rem; color: #e6eef9; font-size: .84rem; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239fb2c9' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
.agent-filter:focus { outline: none; border-color: var(--emerald); }
.agent-filter option { background: #0f2138; color: #e6eef9; }

.topbar-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.agent-qfilters { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.agent-qchip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; background: #0f2138; border: 1px solid rgba(255,255,255,.1); color: #9fb2c9; font-size: .84rem; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.agent-qchip i { font-size: .8rem; }
.agent-qchip:hover { color: #e6eef9; border-color: rgba(255,255,255,.22); }
.agent-qchip.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.agent-qcount { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px; background: rgba(255,255,255,.08); color: #ffffff; font-size: .72rem; font-weight: 800; }
.agent-qchip.on .agent-qcount { background: rgba(255,255,255,.25); color: #fff; }
.crm-tasks-empty { padding: 2.2rem 1rem; text-align: center; color: #8aa0ba; font-weight: 600; }

/* ── Communication: voice broadcast studio ──────────────────────────────────── */
.comm-wrap { padding: 1.6rem 1.9rem 3rem; width: 100%; }
.comm-head h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--text-heading); display: flex; align-items: center; gap: .6rem; }
.comm-head h1 i { color: var(--acad-purple); }
.comm-head p { color: var(--text-muted); font-size: .9rem; margin-top: .25rem; }
.comm-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 1.2rem 0 1.4rem; }

/* ── Communication Dashboard tab ───────────────────────────────────────────── */
body.staffdark .cdash-wrap { padding: .5rem 0; }
body.staffdark .cdash-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem .8rem; }
body.staffdark .cdash-header-l { display: flex; align-items: center; gap: .7rem; }
body.staffdark .cdash-hic { font-size: 1.4rem; color: #6ee7b7; }
body.staffdark .cdash-header h2 { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; margin: 0; }
body.staffdark .cdash-stats { display: grid; grid-template-columns: repeat(6,1fr); gap: .9rem; padding: 0 1.2rem 1.2rem; }
body.staffdark .cdash-stat { display: flex; align-items: center; gap: .8rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 1rem 1.1rem; }
body.staffdark .cdash-stat-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; flex-shrink: 0; }
body.staffdark .cdash-stat-n { font-size: 1.65rem; font-weight: 800; color: #f1f5f9; line-height: 1.1; }
body.staffdark .cdash-stat-n.cdash-miss { color: #f87171; }
body.staffdark .cdash-stat-l { font-size: .72rem; color: #64748b; margin-top: .1rem; }
body.staffdark .cdash-section-title { padding: .2rem 1.2rem .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #64748b; text-transform: uppercase; }
body.staffdark .cdash-quicks { display: flex; flex-wrap: wrap; gap: .8rem; padding: 0 1.2rem 1.2rem; }
body.staffdark .cdash-quick { display: flex; align-items: center; gap: .8rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: .85rem 1.1rem; cursor: pointer; min-width: 180px; flex: 1; transition: background .15s, border-color .15s; }
body.staffdark .cdash-quick:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
body.staffdark .cdash-quick-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; color: #fff; flex-shrink: 0; }
body.staffdark .cdash-quick-label { font-weight: 700; color: #e2e8f0; font-size: .88rem; flex: 1; }
body.staffdark .cdash-quick-arrow { color: #475569; font-size: .72rem; }
body.staffdark .cdash-quick:hover .cdash-quick-arrow { color: #94a3b8; }
@media (max-width: 1100px) { body.staffdark .cdash-stats { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px)  { body.staffdark .cdash-stats { grid-template-columns: repeat(2,1fr); } }

/* ── Calls log tab ─────────────────────────────────────────────────────────── */
body.staffdark .clog-wrap { padding: .5rem 0; }
body.staffdark .clog-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem .8rem; }
body.staffdark .clog-header-l { display: flex; align-items: center; gap: .7rem; }
body.staffdark .clog-header-r { display: flex; align-items: center; gap: .65rem; }
body.staffdark .clog-hic { font-size: 1.4rem; color: #f87171; }
body.staffdark .clog-hic-badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(239,68,68,.14); color: #f87171; font-size: 1.15rem; flex-shrink: 0; }
body.staffdark .clog-header h2 { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; margin: 0; }
body.staffdark .clog-header-sub { font-size: .78rem; color: #64748b; margin-top: .1rem; }
body.staffdark .clog-date-btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1; border-radius: 8px; padding: .42rem .85rem; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; appearance: none; -webkit-appearance: none; }
body.staffdark .clog-date-btn:hover, body.staffdark .clog-date-btn:focus { background: rgba(255,255,255,.12); color: #f1f5f9; outline: none; }
body.staffdark .clog-date-btn option { background: #0e1726; color: #e2e8f0; }
body.staffdark .clog-report-btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #94a3b8; border-radius: 8px; padding: .45rem 1rem; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
body.staffdark .clog-report-btn:hover { background: rgba(255,255,255,.12); color: #f1f5f9; }
body.staffdark .clog-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; padding: 0 1.2rem 1.2rem; }
body.staffdark .clog-stat { display: flex; align-items: center; gap: .8rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 1rem 1.1rem; }
body.staffdark .clog-stat-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; flex-shrink: 0; }
body.staffdark .clog-stat-ic.in    { background: linear-gradient(135deg,#6366f1,#818cf8); }
body.staffdark .clog-stat-ic.out   { background: linear-gradient(135deg,#22c55e,#4ade80); }
body.staffdark .clog-stat-ic.miss  { background: linear-gradient(135deg,#ef4444,#f87171); }
body.staffdark .clog-stat-ic.total { background: linear-gradient(135deg,#0ea5e9,#38bdf8); }
body.staffdark .clog-stat-ic.done  { background: linear-gradient(135deg,#22c55e,#4ade80); }
body.staffdark .clog-stat-ic.cb    { background: linear-gradient(135deg,#f59e0b,#fbbf24); }
body.staffdark .clog-stat-ic.avg   { background: linear-gradient(135deg,#a855f7,#c084fc); }
body.staffdark .clog-stat-n { font-size: 1.65rem; font-weight: 800; color: #f1f5f9; line-height: 1.1; }
body.staffdark .clog-stat-n.miss { color: #f87171; }
body.staffdark .clog-stat-n.done { color: #4ade80; }
body.staffdark .clog-stat-n.cb { color: #fbbf24; }
body.staffdark .clog-stat-n.avg { color: #c084fc; }
body.staffdark .clog-stat-l { font-size: .72rem; color: #64748b; margin-top: .1rem; }
body.staffdark .clog-sub { font-size: .68rem; margin-top: .18rem; font-weight: 600; color: #64748b; }
body.staffdark .clog-sub.warn { color: #f87171; }
body.staffdark .clog-vs { font-size: .68rem; margin-top: .18rem; font-weight: 600; }
body.staffdark .clog-vs.up   { color: #34d399; }
body.staffdark .clog-vs.down { color: #f87171; }
body.staffdark .clog-vs.flat { color: #64748b; }
body.staffdark .clog-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 0 1.2rem 1.2rem; }
body.staffdark .clog-panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; overflow: hidden; }
body.staffdark .clog-panel-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
body.staffdark .clog-panel-title { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: #94a3b8; display: flex; align-items: center; gap: .45rem; }
body.staffdark .clog-panel-title.miss { color: #f87171; }
body.staffdark .clog-panel-title.done { color: #34d399; }
body.staffdark .clog-panel-title.cb { color: #38bdf8; }
body.staffdark .clog-count { color: #64748b; font-weight: 400; }
body.staffdark .clog-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 99px; font-size: .72rem; font-weight: 800; padding: 0 6px; }
body.staffdark .clog-badge.miss { background: rgba(239,68,68,.25); color: #f87171; }
body.staffdark .clog-badge.done { background: rgba(52,211,153,.2); color: #34d399; }
body.staffdark .clog-badge.cb { background: rgba(56,189,248,.2); color: #38bdf8; }
body.staffdark .clog-view-all { background: none; border: 1px solid rgba(99,102,241,.5); border-radius: 8px; padding: .3rem .8rem; color: #6366f1; font-size: .78rem; cursor: pointer; font-weight: 600; }
body.staffdark .clog-view-all:hover { color: #818cf8; }
body.staffdark .clog-view-all.miss { color: #f87171; border-color: rgba(239,68,68,.5); }
body.staffdark .clog-view-all.miss:hover { background: rgba(239,68,68,.1); }
body.staffdark .clog-view-all.done { color: #34d399; border-color: rgba(52,211,153,.5); }
body.staffdark .clog-view-all.done:hover { background: rgba(52,211,153,.1); }
body.staffdark .clog-time-ago { font-size: .72rem; color: #64748b; margin-top: .1rem; }
.wac2-unassigned-tag { margin: .3rem 1rem 0; padding: .35rem .6rem; border-radius: 8px; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.35); color: #fbbf24; font-size: .72rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
body.staffdark .clog-stat .clog-stat-l { letter-spacing: .05em; font-weight: 600; }
body.staffdark .clog-table-wrap { overflow-x: auto; }
body.staffdark .clog-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
body.staffdark .clog-table thead tr { border-bottom: 1px solid rgba(255,255,255,.08); }
body.staffdark .clog-table thead th { padding: .55rem .7rem; font-size: .65rem; font-weight: 700; letter-spacing: .06em; color: #64748b; text-transform: uppercase; text-align: left; }
body.staffdark .clog-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
body.staffdark .clog-table tbody tr:hover { background: rgba(255,255,255,.04); }
body.staffdark .clog-contact { display: flex; align-items: center; gap: .55rem; }
body.staffdark .clog-name { font-weight: 600; color: #e2e8f0; font-size: .79rem; }
body.staffdark .clog-phone { font-size: .68rem; color: #64748b; }
body.staffdark .clog-av { width: 30px; height: 30px; border-radius: 50%; background: rgba(99,102,241,.3); color: #818cf8; display: grid; place-items: center; font-size: .65rem; font-weight: 700; flex-shrink: 0; }
body.staffdark .clog-agent { display: flex; align-items: center; gap: .4rem; color: #94a3b8; font-size: .78rem; }
body.staffdark .clog-dim { color: #64748b; font-size: .75rem; }
body.staffdark .clog-table td { padding: .6rem .7rem; vertical-align: middle; }
/* Call Back Required table: fixed column layout so all 7 columns fit the panel
   width without horizontal scrolling; long content truncates or wraps instead
   of forcing the table wider. (.clog-table-wrap overflow-x stays as a safety
   net for very narrow viewports.) */
body.staffdark .clog-table.miss { table-layout: fixed; }
body.staffdark .clog-table.miss thead th { padding: .55rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .clog-table.miss td { padding: .6rem .4rem; }
body.staffdark .clog-table.miss th:nth-child(1) { width: 22%; }
body.staffdark .clog-table.miss th:nth-child(2) { width: 13%; }
body.staffdark .clog-table.miss th:nth-child(3) { width: 12%; }
body.staffdark .clog-table.miss th:nth-child(4) { width: 15%; }
body.staffdark .clog-table.miss th:nth-child(5) { width: 12%; }
body.staffdark .clog-table.miss th:nth-child(6) { width: 10%; }
body.staffdark .clog-table.miss th:nth-child(7) { width: 16%; }
body.staffdark .clog-table.miss .clog-contact > div:last-child { min-width: 0; flex: 1; }
body.staffdark .clog-table.miss .clog-name,
body.staffdark .clog-table.miss .clog-email,
body.staffdark .clog-table.miss .clog-phone,
body.staffdark .clog-table.miss .clog-agent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .clog-table.miss .clog-agent { min-width: 0; }
body.staffdark .clog-table.miss .clog-agent > div:last-child { min-width: 0; flex: 1; overflow: hidden; }
body.staffdark .clog-table.miss .clog-pill { white-space: normal; padding: .2rem .45rem; font-size: .66rem; }
body.staffdark .clog-table.miss .clog-fin-pill { white-space: normal; padding: .18rem .45rem; font-size: .66rem; }
body.staffdark .clog-table.miss .clog-mc { white-space: nowrap; }
body.staffdark .clog-table.miss .clog-act-group { gap: .22rem; flex-wrap: wrap; justify-content: flex-end; }
body.staffdark .clog-table.miss .clog-act-btn { width: 26px; height: 26px; font-size: .72rem; }
@media (max-width: 1100px) {
    body.staffdark .clog-table.miss { min-width: 640px; }
}
body.staffdark .clog-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; border-radius: 6px; font-size: .7rem; font-weight: 700; }
body.staffdark .clog-pill.missed { background: rgba(239,68,68,.18); color: #f87171; }
body.staffdark .clog-pill.in { background: rgba(52,211,153,.15); color: #34d399; }
body.staffdark .clog-pill.out { background: rgba(96,165,250,.15); color: #60a5fa; }
body.staffdark .clog-pill.done { background: rgba(52,211,153,.15); color: #34d399; }
body.staffdark .clog-pill.cb { background: rgba(56,189,248,.15); color: #38bdf8; }
body.staffdark .clog-mc { font-weight: 700; color: #94a3b8; font-size: .78rem; }
body.staffdark .clog-mc-mid { color: #fb923c; }
body.staffdark .clog-mc-high { color: #f87171; }
body.staffdark .clog-high-tag { background: #f87171; color: #fff; border-radius: 4px; padding: 1px 5px; font-size: .62rem; font-weight: 800; }
body.staffdark .clog-dur { color: #94a3b8; font-family: monospace; }
body.staffdark .clog-acts { text-align: right; }
body.staffdark .clog-act-group { display: inline-flex; align-items: center; gap: .28rem; }
body.staffdark .clog-act-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; width: 30px; height: 30px; display: inline-grid; place-items: center; color: #94a3b8; cursor: pointer; font-size: .8rem; }
body.staffdark .clog-act-btn:hover:not(:disabled) { background: rgba(99,102,241,.3); color: #c7d2fe; border-color: #6366f1; }
body.staffdark .clog-act-btn:disabled { opacity: .4; cursor: default; }
body.staffdark .clog-outcome-note { font-size: .78rem; color: #cbd5e1; line-height: 1.35; max-width: 180px; display: inline-block; word-break: break-word; }
body.staffdark .clog-outcome-cell { max-width: 200px; }
body.staffdark .clog-act-call:hover:not(:disabled) { background: rgba(52,211,153,.18); color: #34d399; border-color: #34d399; }
body.staffdark .clog-act-wa:hover:not(:disabled)   { background: rgba(37,211,102,.18); color: #25d366; border-color: #25d366; }
body.staffdark .clog-act-called { background: rgba(52,211,153,.22) !important; color: #34d399 !important; border-color: #34d399 !important; }
body.staffdark .clog-row-called { opacity: .65; }
body.staffdark .clog-claim-btn { background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.4); color: #818cf8; border-radius: 8px; padding: .25rem .65rem; font-size: .73rem; cursor: pointer; font-weight: 600; }
body.staffdark .clog-claim-btn:hover { background: rgba(99,102,241,.35); }
body.staffdark .clog-fin-pill { display: inline-flex; align-items: center; padding: .18rem .5rem; border-radius: 6px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
body.staffdark .clog-fin-active   { background: rgba(52,211,153,.18); color: #34d399; }
body.staffdark .clog-fin-due-soon { background: rgba(251,146,60,.18);  color: #fb923c; }
body.staffdark .clog-fin-overdue  { background: rgba(239,68,68,.18);   color: #f87171; }
body.staffdark .clog-fin-churned  { background: rgba(239,68,68,.12);   color: #ef4444; }
body.staffdark .clog-fin-cancelled{ background: rgba(100,116,139,.15); color: #94a3b8; }
body.staffdark .clog-fin-free     { background: rgba(99,102,241,.18);  color: #818cf8; }
body.staffdark .clog-fin-new      { background: rgba(168,85,247,.15);  color: #c084fc; }
body.staffdark .clog-fin-inactive { background: rgba(100,116,139,.12); color: #64748b; }
body.staffdark .clog-phone-row { display: flex; align-items: center; gap: .3rem; }
body.staffdark .clog-wa-dot { color: #25d366; font-size: .8rem; line-height: 1; }
body.staffdark .clog-agent-name { font-size: .77rem; color: #cbd5e1; font-weight: 600; display: block; }
body.staffdark .clog-agent-role { font-size: .65rem; color: #64748b; }
body.staffdark .clog-wave-wrap { display: flex; align-items: center; gap: .38rem; }
body.staffdark .clog-play-btn { width: 22px; height: 22px; border-radius: 50%; background: rgba(99,102,241,.3); border: none; color: #818cf8; display: grid; place-items: center; font-size: .58rem; cursor: pointer; flex-shrink: 0; }
body.staffdark .clog-play-btn:hover { background: rgba(99,102,241,.5); }
body.staffdark .clog-wave { display: flex; align-items: center; gap: 1px; height: 20px; }
body.staffdark .clog-wbar { display: inline-block; width: 2px; background: rgba(99,102,241,.55); border-radius: 1px; }
body.staffdark .clog-wave-dur { font-size: .68rem; color: #64748b; font-family: monospace; white-space: nowrap; }
body.staffdark .clog-empty { text-align: center; padding: 2rem; color: #475569; font-size: .85rem; }
body.staffdark .clog-view-all-foot { display: block; text-align: center; width: 100%; background: none; border: none; border-top: 1px solid rgba(255,255,255,.06); color: #6366f1; font-size: .8rem; font-weight: 600; padding: .7rem; cursor: pointer; }
body.staffdark .clog-view-all-foot:hover { color: #818cf8; background: rgba(99,102,241,.08); }
body.staffdark .clog-view-all-foot.miss { color: #f87171; }
body.staffdark .clog-view-all-foot.miss:hover { background: rgba(239,68,68,.08); color: #fca5a5; }
body.staffdark .clog-view-all-foot.done { color: #34d399; }
body.staffdark .clog-view-all-foot.done:hover { background: rgba(52,211,153,.08); color: #6ee7b7; }
body.staffdark .clog-legend { padding: .6rem 1.2rem 1rem; font-size: .7rem; color: #475569; display: flex; flex-direction: column; gap: .2rem; }
body.staffdark .clog-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 3px; }
body.staffdark .clog-dot.miss { background: #f87171; }
body.staffdark .clog-dot.mid { background: #fb923c; }
body.staffdark .clog-dot.low { background: #60a5fa; }
body.staffdark .clog-dot.none { background: #475569; }
@media (max-width: 900px) {
    body.staffdark .clog-stats { grid-template-columns: repeat(3,1fr); }
    body.staffdark .clog-panels { grid-template-columns: 1fr; }
}
.comm-tab { background: none; border: none; padding: .7rem 1.05rem; font-size: .9rem; font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.comm-tab.on { color: var(--emerald, #10B981);
    background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(16,185,129,.05));
    border-radius: 9px 9px 0 0; box-shadow: inset 0 -3px 0 0 var(--emerald, #10B981); }
body.staffdark .comm-tab.on { color: #6ee7b7;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06)); }
.comm-tab:hover { color: var(--text-heading); }

.comm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.comm-stat { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: #fff; }
.comm-stat-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; }
.comm-stat.tone-violet .comm-stat-ic { background: linear-gradient(135deg,#7c3aed,#a855f7); }
.comm-stat.tone-blue .comm-stat-ic { background: linear-gradient(135deg,#2563eb,#3b82f6); }
.comm-stat.tone-green .comm-stat-ic { background: linear-gradient(135deg,#16a34a,#22c55e); }
.comm-stat.tone-amber .comm-stat-ic { background: linear-gradient(135deg,#f59e0b,#f7901e); }
.comm-stat-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--text-heading); line-height: 1; }
.comm-stat-label { font-size: .8rem; font-weight: 700; color: var(--text-body); margin-top: .3rem; }
.comm-stat-sub { font-size: .72rem; color: var(--text-faint); }

.comm-panel { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.3rem 1.4rem; margin-bottom: 1.3rem; }
.comm-panel-head { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--text-heading); margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.agentcall-list { display: flex; flex-direction: column; gap: .55rem; }
.agentcall-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft, #f8f8fb); }
.agentcall-who { display: flex; align-items: center; gap: .7rem; }
.agentcall-dot { width: 9px; height: 9px; border-radius: 50%; background: #c7c9d4; flex: 0 0 auto; }
.agentcall-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.agentcall-name { font-weight: 700; font-size: .9rem; color: var(--text-heading); }
.agentcall-sub { font-size: .74rem; color: var(--text-faint); }
.calldir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem; }
.calldir-field { display: flex; flex-direction: column; gap: .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.calldir-field select { min-width: 220px; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text-heading); font-size: .9rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
.calldir .comm-btn.primary { width: auto; padding: .62rem 1.4rem; }
.calldir-static { padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; color: var(--text-heading); font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: normal; min-width: 220px; }
body.staffdark .main .calldir-field select { background: #0f2138; color: var(--text-body); border-color: rgba(255,255,255,.14); }
.comm-compose { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 1.6rem; }
.comm-step { font-weight: 800; color: var(--text-heading); font-size: .9rem; margin-bottom: .8rem; }
.comm-lbl { display: block; font-size: .78rem; font-weight: 700; color: var(--text-muted); margin: .7rem 0 .35rem; }
.comm-radio { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .2rem; cursor: pointer; }
.comm-radio input { margin-top: .2rem; accent-color: var(--acad-purple); }
.comm-radio b { display: block; font-size: .88rem; color: var(--text-heading); }
.comm-radio small { display: block; font-size: .76rem; color: var(--text-faint); }
.comm-select, .comm-input { width: 100%; padding: .6rem .7rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .88rem; color: var(--text-heading); background: #fff; }
.comm-select:disabled { background: #f1f5f9; color: var(--text-faint); }
select.comm-select[multiple] { padding: .3rem; }

/* Specific Agents — styled searchable checklist (replaces the raw multi-select) */
.comm-agents { border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.comm-agents.is-off { opacity: .55; pointer-events: none; }
.comm-agent-tools { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
.comm-agent-search.comm-input { border: none; padding: .35rem .4rem; font-size: .84rem; background: transparent; }
.comm-agent-search.comm-input:focus { outline: none; }
.comm-agent-count { flex: none; font-size: .74rem; font-weight: 700; color: var(--acad-purple); background: #f5f3ff; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.comm-agent-count:empty { display: none; }
.comm-agent-list { max-height: 176px; overflow-y: auto; padding: .3rem; }
.comm-agent { display: flex; align-items: center; gap: .6rem; padding: .42rem .5rem; border-radius: 9px; cursor: pointer; }
.comm-agent:hover { background: #f8fafc; }
.comm-agent input { display: none; }
.comm-agent-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7c3aed,#a855f7); letter-spacing: .02em; }
.comm-agent-txt { min-width: 0; display: flex; flex-direction: column; }
.comm-agent-nm { font-size: .85rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-agent-dep { font-size: .72rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-agent-chk { margin-left: auto; flex: none; font-size: .8rem; color: #fff; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; background: transparent; transition: background .12s, border-color .12s; }
.comm-agent-chk::before { visibility: hidden; }
.comm-agent input:checked ~ .comm-agent-chk { background: var(--acad-purple); border-color: var(--acad-purple); }
.comm-agent input:checked ~ .comm-agent-chk::before { visibility: visible; }
.comm-agent input:checked ~ .comm-agent-txt .comm-agent-nm { color: var(--acad-purple); }
.comm-agent-empty { padding: .7rem; font-size: .82rem; color: var(--text-faint); }
.comm-how { margin-top: 1rem; font-size: .8rem; color: var(--text-muted); background: #f5f3ff; border: 1px solid #e9d5ff; border-radius: 12px; padding: .8rem .9rem; line-height: 1.45; }
.comm-how i { color: var(--acad-purple); margin-right: .35rem; }

.comm-voice-col { background: linear-gradient(160deg,#1e1b3a,#0f172a); border-radius: 16px; padding: 1.3rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.comm-voice-col .comm-step { color: #fff; align-self: flex-start; }
.comm-mic { width: 96px; height: 96px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; font-size: 2rem; box-shadow: 0 10px 30px rgba(124,58,237,.5); transition: transform .15s, box-shadow .15s; margin: .5rem 0; touch-action: none; }
.comm-mic:hover { transform: scale(1.04); }
.comm-mic.rec { background: linear-gradient(135deg,#ef4444,#f87171); animation: commPulse 1.1s ease-out infinite; }
@keyframes commPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 100% { box-shadow: 0 0 0 26px rgba(239,68,68,0); } }
.comm-mic-hint { color: #c7d2fe; font-size: .82rem; line-height: 1.4; min-height: 2.4em; }
.comm-mic-hint small { color: #94a3b8; }
.comm-timer { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: 1.05rem; margin: .7rem 0; letter-spacing: .03em; }
.comm-preview { width: 100%; margin: .4rem 0 .8rem; height: 34px; }
.comm-preview.hidden { display: none; }

.comm-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text-body); font-size: .82rem; font-weight: 700; cursor: pointer; }
.comm-btn.ghost:hover { background: #f1f5f9; }
.comm-btn.primary { background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; border: none; width: 100%; justify-content: center; padding: .75rem; font-size: .9rem; }
.comm-btn.primary:disabled { opacity: .5; cursor: not-allowed; }

.comm-table-wrap { border: 1px solid var(--border); border-radius: 14px; overflow: auto; }
.comm-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.comm-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: #f8fafc; padding: .7rem .9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.comm-table td { padding: .75rem .9rem; border-bottom: 1px solid #eef2f7; color: var(--text-body); vertical-align: middle; }
.comm-table tr:last-child td { border-bottom: none; }
.comm-unheardrow { background: #faf5ff; }
.comm-btitle { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--text-heading); }
.comm-btitle i { color: var(--acad-purple); }
.comm-dim { color: var(--text-faint); white-space: nowrap; }
.comm-prio { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.comm-prio.prio-high { background: #fee2e2; color: #b91c1c; }
.comm-prio.prio-med { background: #fef3c7; color: #b45309; }
.comm-prio.prio-low { background: #dcfce7; color: #15803d; }
.comm-ok { color: var(--acad-green); font-weight: 700; }
.comm-wait { color: var(--text-faint); font-weight: 700; }
.comm-empty { text-align: center; color: var(--text-faint); padding: 2rem; }
.comm-empty i { margin-right: .4rem; }
.comm-listeners-pick { max-width: 460px; margin-bottom: 1.2rem; }
.comm-listen-sum { font-weight: 700; color: var(--text-heading); margin-bottom: .8rem; }
.comm-newbanner { display: flex; align-items: center; gap: .8rem; background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; padding: .9rem 1.2rem; border-radius: 14px; margin-bottom: 1.3rem; font-weight: 600; }
.comm-newbanner i { font-size: 1.1rem; }
.comm-newbanner .comm-btn { margin-left: auto; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4); width: auto; }
.comm-pop .notif-pop-ico { background: linear-gradient(135deg,#7c3aed,#a855f7) !important; color: #fff; }

/* ── Go Live composer button ─────────────────────────────────────────────── */
.comm-golive-ic { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; margin: .6rem 0; font-size: 1.9rem; color: #fff; background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow: 0 10px 30px rgba(124,58,237,.5); }
.comm-livetag { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: #fee2e2; color: #b91c1c; }
.comm-livetag i { font-size: .7rem; }

/* ── Live broadcast (admin speaker) panel ────────────────────────────────── */
.comm-live-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; }
.comm-live-stage { background: linear-gradient(160deg,#1e1b3a,#0f172a); border-radius: 18px; padding: 1.8rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.comm-live-badge { display: inline-flex; align-items: center; gap: .45rem; background: #ef4444; color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .08em; padding: .25rem .7rem; border-radius: 999px; }
.comm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: liveBlink 1s steps(2) infinite; }
@keyframes liveBlink { 50% { opacity: .25; } }
.comm-live-title { color: #fff; font-weight: 800; font-size: 1.1rem; margin: .8rem 0 1.2rem; }
.comm-live-mic { position: relative; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; font-size: 2.3rem; box-shadow: 0 12px 34px rgba(124,58,237,.55); }
.comm-live-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(168,85,247,.55); animation: commPulse 1.4s ease-out infinite; }
.comm-live-timer { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: 1.5rem; letter-spacing: .04em; margin: 1rem 0 .4rem; }
.comm-live-meta { display: flex; align-items: center; gap: .8rem; color: #c7d2fe; font-size: .82rem; margin-bottom: 1.3rem; }
.comm-live-actions { display: flex; gap: .7rem; }
.comm-live-actions .comm-btn { width: auto; }
.comm-btn.danger { background: linear-gradient(135deg,#ef4444,#f87171); color: #fff; border: none; }
.comm-btn.ghost.on { background: #fde68a; border-color: #f59e0b; color: #92400e; }
.comm-live-side { border: 1px solid var(--border); border-radius: 18px; padding: 1.2rem; background: #fff; }
.comm-count { display: inline-block; min-width: 22px; text-align: center; background: var(--acad-purple); color: #fff; border-radius: 999px; font-size: .72rem; padding: .1rem .45rem; margin-left: .4rem; }
.comm-live-listeners { margin-top: .9rem; display: flex; flex-direction: column; gap: .6rem; max-height: 340px; overflow: auto; }
.comm-live-listener { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid #eef2f7; border-radius: 10px; }
.comm-live-listener-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acad-green); box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: commPulse 1.6s ease-out infinite; }
.comm-live-listener-name { font-weight: 700; color: var(--text-heading); font-size: .85rem; }

/* ── Listener: incoming-call modal + ringing ─────────────────────────────── */
.call-overlay { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; background: rgba(15,23,42,.62); backdrop-filter: blur(4px); }
.call-card { width: 360px; max-width: 92vw; background: linear-gradient(160deg,#1e1b3a,#0f172a); color: #fff; border-radius: 22px; padding: 2.2rem 1.8rem; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: callIn .35s var(--fluid); }
@keyframes callIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.call-pulse { width: 96px; height: 96px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow: 0 0 0 0 rgba(168,85,247,.6); animation: callRing 1.2s ease-out infinite; }
.call-card.urgent .call-pulse { background: linear-gradient(135deg,#ef4444,#f87171); box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
@keyframes callRing { 0% { box-shadow: 0 0 0 0 rgba(168,85,247,.55); } 100% { box-shadow: 0 0 0 30px rgba(168,85,247,0); } }
.call-from { font-weight: 800; font-size: 1.25rem; }
.call-title { color: #c7d2fe; margin: .3rem 0; font-size: .95rem; }
.call-sub { color: #94a3b8; font-size: .8rem; margin-bottom: 1.6rem; }
.call-actions { display: flex; gap: 1rem; justify-content: center; }
.call-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.4rem; border-radius: 999px; border: none; cursor: pointer; font-weight: 800; font-size: .9rem; color: #fff; }
.call-btn.accept { background: linear-gradient(135deg,#22c55e,#16a34a); }
.call-btn.decline { background: linear-gradient(135deg,#ef4444,#dc2626); }
.call-btn:hover { transform: translateY(-1px); }

.incall-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3900; display: flex; align-items: center; gap: .6rem; background: var(--navy-900); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: .85rem; font-weight: 600; }
.incall-bar i { color: #c7d2fe; }
.incall-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: liveBlink 1s steps(2) infinite; }
.incall-bar button { display: inline-flex; align-items: center; gap: .4rem; margin-left: .5rem; background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; border: none; border-radius: 999px; padding: .4rem .8rem; font-weight: 700; cursor: pointer; }
.incall-bar button#inCallMic { background: rgba(255,255,255,.16); }
.incall-bar button#inCallMic i { color: #fff; }
.incall-bar button#inCallMic.on { background: linear-gradient(135deg,#22c55e,#16a34a); }

@media (max-width: 1000px) {
    .comm-stats { grid-template-columns: repeat(2, 1fr); }
    .comm-compose { grid-template-columns: 1fr; }
    .comm-live-grid { grid-template-columns: 1fr; }
}

/* ── Technical department portal ─────────────────────────────────────────── */
.lead-pill.ts-new { background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.45); color: #c4b5fd; }
.lead-pill.ts-progress { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.45); color: #93c5fd; }
.lead-pill.ts-resolved { background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.45); color: #34d399; }
.lead-pill.ts-cant { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.45); color: #fbbf24; }
.lead-pill.ts-setup { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.5); color: #fcd34d; }
.lead-pill i { margin-right: .25rem; }
.lead-substatus { margin-top: .35rem; }

.tech-wave { display: inline-block; }

/* Redesigned Technical portal — stat cards (icon badge + value/label), full-width table, pager. */
.tech-card .tech-card-row { display: flex; align-items: center; gap: .85rem; margin-bottom: .65rem; }
.tech-card .dash-stat-ic { width: 48px; height: 48px; border-radius: 13px; font-size: 1.2rem; flex: 0 0 auto; }
.tech-card .tech-card-main { min-width: 0; }
.tech-card .dash-stat-val { font-size: 1.95rem; }
.tech-card .dash-stat-label { margin-top: .15rem; }

.tech-tickets-card .agent-leads-head { align-items: flex-start; }
.tech-tickets-card .agent-leads-tools .pv-select { width: auto; background: #0a1626; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: .55rem .7rem; color: #e6eef9; font-size: .82rem; }
.tech-tickets-card .agent-leads-tools .agent-search input { min-width: 190px; }
.tech-export { background: linear-gradient(135deg, #7c3aed, #a78bfa); }

.tech-table thead th { text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; color: #ffffff; }
.tech-assigned { display: inline-flex; align-items: center; gap: .45rem; color: #ffffff; }
.tech-assigned i { color: #7aa7ff; }
.tech-upd-time { font-size: .74rem; margin-top: .15rem; }

.agent-avatar.av-0 { background: linear-gradient(135deg, #6366f1, #a78bfa); }
.agent-avatar.av-1 { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.agent-avatar.av-2 { background: linear-gradient(135deg, #10b981, #34d399); }
.agent-avatar.av-3 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.agent-avatar.av-4 { background: linear-gradient(135deg, #ec4899, #f472b6); }
.agent-avatar.av-5 { background: linear-gradient(135deg, #ef4444, #fb7185); }

.tech-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .9rem 1.2rem; border-top: 1px solid rgba(255,255,255,.07); }
.tech-showing { color: #ffffff; font-size: .8rem; }
.tech-pager { display: flex; align-items: center; gap: .3rem; }
.tech-page { min-width: 32px; height: 32px; padding: 0 .45rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #9db4d4; font-size: .8rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease; }
.tech-page:hover:not(:disabled) { background: rgba(255,255,255,.1); color: #fff; }
.tech-page.on { background: linear-gradient(135deg, #7c3aed, #a78bfa); border-color: transparent; color: #fff; }
.tech-page:disabled { opacity: .4; cursor: default; }
.tech-ellip { color: #ffffff; padding: 0 .15rem; }

.tech-issue-cell { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #e6eefb; }
.tech-issue-cell i { color: #7aa7ff; }
.tech-prio { padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: capitalize; }
.tech-prio-high { background: rgba(248,113,113,.16); color: #f87171; border: 1px solid rgba(248,113,113,.4); }
.tech-prio-medium { background: rgba(245,158,11,.16); color: #fbbf24; border: 1px solid rgba(245,158,11,.4); }
.tech-prio-low { background: rgba(148,163,184,.16); color: #cbd5e1; border: 1px solid rgba(148,163,184,.4); }
.tech-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .4rem 0; }
.tech-review-foot { flex-wrap: wrap; gap: .5rem; }

.tech-tk { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: .7rem .85rem; margin-bottom: .6rem; background: rgba(255,255,255,.03); }
.tech-tk-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tech-tk-type { font-weight: 600; color: #ffffff; font-size: .82rem; }
.tech-tk-type i { color: #7aa7ff; margin-right: .25rem; }
.tech-tk-date { margin-left: auto; color: #7f93ad; font-size: .76rem; }
.tech-tk-meta { color: #93a4bd; font-size: .8rem; margin-top: .3rem; }
.tech-tk-res { margin-top: .45rem; color: #34d399; font-size: .82rem; font-weight: 600; }
.tech-tk-res i { margin-right: .3rem; }
.tech-res-aca { display: flex; align-items: flex-start; gap: .55rem; margin: .2rem 0 .2rem; padding: .7rem .8rem; border: 1px solid #dbe3ef; border-radius: 10px; background: #f8fafc; cursor: pointer; font-size: .9rem; color: #1f2937; font-weight: 600; }
.tech-res-aca input { margin-top: .15rem; width: 16px; height: 16px; cursor: pointer; }
.tech-res-aca i { color: #f59e0b; margin-right: .25rem; }

@media (max-width: 1000px) {
    .tech-detail-grid { grid-template-columns: 1fr; }
}

/* ── Student portal responsiveness (phones & tablets) ───────────────────────── */
@media (max-width: 720px) {
    /* Mobile: fit the WHOLE student attendance view on one screen — NO scrolling. The
       card is a flex column filling the viewport; every section is compacted and the
       per-section margins collapse into the column gap so the live hero, stats, the two
       class cards and the contact block all fit without a scrollbar. */
    .acct-view.att-view { height: 100svh; overflow: hidden; padding: 10px; align-items: stretch; }
    .att-card { display: flex; flex-direction: column; gap: .65rem; max-height: 100%; overflow: hidden;
        padding: 1rem 1rem 1.1rem; border-radius: 16px; }
    .att-top, .att-stats, .att-mini-row, .att-live-hero, .att-nextpay, .att-card .att-contact { margin: 0; }
    .att-name { font-size: 1.08rem; }
    .att-class-row { flex-direction: column; align-items: flex-start; gap: .7rem; }
    .att-join-btn, .att-class-nolink { width: 100%; justify-content: center; }

    /* live spotlight — keep the design, just shrink it; stacks + centers */
    .att-live-hero { gap: .55rem; }
    .att-live-spot { text-align: center; padding: .9rem 1rem; gap: .7rem; border-radius: 16px; }
    .lh-head { flex-direction: column; gap: .6rem; }
    .lh-body { width: 100%; }
    .lh-badge { margin: 0 auto; }
    .lh-orb { width: 44px; height: 44px; font-size: 1.05rem; }
    .lh-title { font-size: .98rem; margin: .25rem 0 .12rem; }
    .lh-name { font-size: .85rem; }
    .lh-sched { justify-content: center; font-size: .76rem; margin-top: .2rem; }
    .lh-join { width: 100%; justify-content: center; padding: .6rem 1rem; font-size: .92rem; }
    .lh-soon { width: 100%; justify-content: center; padding: .55rem 1rem; font-size: .82rem; }
    .lh-levels { grid-template-columns: 1fr; gap: .55rem; text-align: left; }
    .lh-lvl { padding: .8rem .9rem; }

    /* stats — compact 3-up */
    .att-stats { gap: .5rem; }
    .att-stat { padding: .55rem .4rem; border-radius: 11px; }
    .att-stat .n { font-size: 1.25rem; }
    .att-stat .l { font-size: .6rem; margin-top: .15rem; letter-spacing: .04em; }

    /* the two class cards stay side by side, compact */
    .att-mini-row { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .att-mini-card { padding: .6rem .65rem; gap: .25rem; border-radius: 12px; }
    .att-mini-label { font-size: .58rem; }
    .att-mini-name { font-size: .82rem; }
    .att-mini-when, .att-mini-empty { font-size: .72rem; }
    .att-mini-cta { display: none; }

    /* history (revealed by a stat tap) scrolls inside itself, never the page */
    .att-history { margin: 0; max-height: 40vh; overflow-y: auto; }

    /* contact block — a single centered row of circular icon buttons (icon-only,
       matching the email/desktop treatment) instead of a card grid, so the four
       contact actions line up neatly across the bottom on phones. */
    .att-card .att-contact { padding: .8rem .8rem .9rem; border-radius: 14px; }
    .att-card .att-contact-head { margin-bottom: .6rem; }
    .att-card .att-contact-badge { width: 38px; height: 38px; font-size: 1rem; margin-bottom: .3rem; }
    .att-card .att-contact-title { font-size: 1.08rem; }
    .att-card .att-contact-sub, .att-card .att-contact-note { display: none; }
    .att-card .att-contact-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem; max-width: none; }
    .att-card .att-contact-btn { padding: 0; gap: 0; }
    .att-card .att-contact-ic { width: 52px; height: 52px; font-size: 1.3rem; box-shadow: 0 4px 11px rgba(15,31,58,.16); }
}
@media (max-width: 460px) {
    /* keep stats 3-up (compact) even on the smallest phones so the page still fits */
    .att-stat .n { font-size: 1.15rem; }
    .att-avatar { width: 40px; height: 40px; font-size: .95rem; }
    .att-table th, .att-table td { padding: .55rem .6rem; font-size: .78rem; }
    .lh-orb { width: 40px; height: 40px; font-size: 1rem; }
    .acct-view.att-view { padding: 8px; }
    .att-card { padding: .85rem .85rem .95rem; gap: .55rem; }
}

/* ── Work-shift clock card (non-teaching worker portals) ─────────────────────── */
.shift-clock-card { margin-bottom: 1rem; border-left: 3px solid var(--accent, #10b981); }
.shift-clock-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.shift-clock-info { min-width: 0; }
.shift-elapsed { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-faint); }
.shift-elapsed.on { color: #10b981; }
.shift-clock-card .sched-line { margin-top: .35rem; font-size: .9rem; }

/* ── Work Schedules admin ─────────────────────────────────────────────────────── */
.ws-chip { display: inline-block; background: rgba(99,102,241,.12); color: var(--text); border: 1px solid rgba(99,102,241,.25);
    border-radius: 999px; padding: .15rem .55rem; font-size: .78rem; margin: .1rem .15rem; white-space: nowrap; }
.ws-chip-lunch { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.ws-chip-break { background: #fdf4ff; border-color: #f5d0fe; color: #a21caf; }
.ws-chip-finish { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.ws-chip i { font-size: .7rem; opacity: .8; }
/* ── Edit / New work schedule modal: fit the whole thing on screen, no scroll ──
   The base rule makes every <select> 100% wide, which stretched the first control
   and pushed the rest of the slot row past the modal edge (horizontal scrollbar).
   Pin compact explicit widths so each row fits on one line, and tighten the
   vertical rhythm so the modal fits the viewport. User request, July 2026. */
.modal-backdrop:has(.ws-sched-modal) .modal { max-width: 600px; max-height: 94vh; }
.modal-head.ws-sched-modal { padding-top: 1.1rem; }
.ws-sched-modal + .modal-body { padding: 1rem 1.4rem 1.1rem; }
.ws-sched-modal + .modal-body .field { margin-bottom: .7rem; }
.ws-sched-modal + .modal-body .ws-hint { margin: .1rem 0 .4rem; font-size: .76rem; line-height: 1.35; }
.ws-sched-modal + .modal-body .ws-paytoggle { margin: .2rem 0; }
.ws-slot-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.ws-slot-row select, .ws-slot-row input { width: auto; min-width: 0; padding: .48rem .45rem; font-size: .85rem; }
.ws-slot-row .wsKind { flex: 0 1 92px; }
.ws-slot-row .wsDay { flex: 1 1 80px; }
.ws-slot-row .wsStart, .ws-slot-row .wsEnd { flex: 0 1 80px; width: 80px; }
.ws-slot-row .wsGrace { flex: 0 1 58px; width: 58px; }
.ws-slot-row .ws-dash { flex: 0 0 auto; }
.ws-slot-row .wsDel { flex: 0 0 auto; }
.ws-hint { font-size: .8rem; color: var(--text-muted); margin: .15rem 0 .5rem; }
.ws-paytoggle { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .3rem 0; cursor: pointer; }
.ws-paytoggle input { accent-color: #10b981; }
.ws-dash { color: var(--text-faint); font-size: .85rem; }
/* Assigned-worker pills in the Work Schedules table */
.ws-assigned { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ws-assign-pill { font-size: .78rem; font-weight: 600; color: #0f2540; background: #eef2f7; border: 1px solid var(--border); border-radius: 999px; padding: .12rem .55rem; }
.ws-assign-more { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
/* Manage-workers modal (assign / unassign / switch department) */
.sa-section { margin-bottom: 1.1rem; }
.sa-label { font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem; }
.sa-list { display: flex; flex-direction: column; gap: .5rem; }
.sa-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,200px) auto; align-items: center; gap: .6rem; padding: .55rem .65rem; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; }
.sa-row-id { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.sa-row-name { font-weight: 700; color: #0A2540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-dept { padding: .45rem .55rem; border: 1.5px solid var(--border); border-radius: 9px; font-size: .85rem; }
.sa-add { display: flex; gap: .5rem; align-items: center; }
.sa-add select { flex: 1; padding: .55rem .6rem; border: 1.5px solid var(--border); border-radius: 9px; font-size: .9rem; }
@media (max-width: 560px) {
    .sa-row { grid-template-columns: 1fr; }
}

/* "View note" affordance + popup — read a transfer note (any department) or a
   technical ticket's issue details in full. */
.note-view-btn { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem;
    background: rgba(99, 102, 241, .1); color: #4f46e5; border: 1px solid rgba(99, 102, 241, .25);
    border-radius: 999px; padding: .12rem .55rem; font-size: .76rem; font-weight: 600;
    cursor: pointer; line-height: 1.3; transition: background .15s ease, border-color .15s ease; }
.note-view-btn:hover { background: rgba(99, 102, 241, .18); border-color: rgba(99, 102, 241, .45); }
.note-view-btn i { font-size: .72rem; }
.note-modal-meta { color: var(--text-faint, #6b7280); font-size: .82rem; margin-bottom: .6rem;
    padding-bottom: .55rem; border-bottom: 1px solid rgba(148, 163, 184, .25); }
.note-modal-text { white-space: pre-wrap; word-break: break-word; line-height: 1.55; font-size: .95rem; }

/* ── Sidebar avatar image (worker profile picture) ───────────────────────── */
.avatar-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* ── Worker self-service Settings page ───────────────────────────────────── */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.ws-card { background: var(--card, #0f2138); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.5rem; }
.ws-card h3 { margin: 0 0 1rem; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.ws-card h3 i { color: var(--emerald); }
.ws-avatar-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ws-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #0d2444; color: var(--emerald);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 2rem; flex-shrink: 0; border: 2px solid rgba(255,255,255,.1); }
.ws-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-avatar-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
/* Desktop notifier app download card (worker + admin Settings) */
.dapp-btns { display: flex; gap: .6rem; flex-wrap: wrap; margin: .35rem 0 .9rem; }
.dapp-btns .crm-btn { flex: 1 1 200px; justify-content: center; }
.dapp-steps { border-top: 1px dashed rgba(255,255,255,.12); padding-top: .75rem; }
.dapp-steps p { margin: 0 0 .55rem; font-size: .85rem; color: var(--muted, #94a3b8); line-height: 1.45; }
.dapp-steps p strong { color: var(--ink, #e2e8f0); }
.iset-card .dapp-card { border: 0; background: transparent; padding: 0; }
/* ── Multi-department login chooser (owner mock, July 2026) ────────────────── */
.dcx-view { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: clamp(.8rem, 3vh, 2rem) 1rem;
    background: radial-gradient(1200px 700px at 50% -10%, #0c2050 0%, #071129 55%, #04091a 100%); }
.dcx-card { position: relative; width: 100%; max-width: 640px;
    background: linear-gradient(180deg, rgba(17,33,66,.85), rgba(9,18,40,.92));
    border: 1px solid rgba(96,165,250,.18); border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
    padding: clamp(1.1rem, 3.5vh, 2rem) clamp(1rem, 4vw, 2.4rem) clamp(1rem, 3vh, 1.7rem); }
.dcx-back { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.05); border: 1px solid rgba(96,165,250,.3); color: #93c5fd;
    border-radius: 10px; padding: .45rem .9rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s; }
.dcx-back:hover { background: rgba(59,130,246,.18); color: #ffffff; }
.dcx-hero { text-align: center; padding-top: .6rem; }
.dcx-ic-wrap { position: relative; display: inline-block; margin-bottom: .5rem; }
.dcx-ic { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #2563eb, #0b2a6b 75%); color: #dbeafe; font-size: 1.7rem;
    border: 1px solid rgba(147,197,253,.35); box-shadow: 0 0 32px rgba(37,99,235,.5); }
.dcx-spark { position: absolute; color: #fbbf24; font-size: .8rem; opacity: .9; pointer-events: none; }
.dcx-spark.s1 { top: -6px; left: -18px; }
.dcx-spark.s2 { bottom: 2px; right: -20px; font-size: .6rem; }
.dcx-spark.s3 { top: 6px; right: -26px; color: #60a5fa; font-weight: 700; }
.dcx-spark.s4 { bottom: -8px; left: -24px; color: #60a5fa; font-weight: 700; font-size: .95rem; }
.dcx-title { margin: .2rem 0 0; color: #ffffff; font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
.dcx-title span { color: #3b82f6; }
.dcx-title-line { position: relative; height: 2px; max-width: 340px; margin: .55rem auto .8rem;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.7), transparent); }
.dcx-title-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px;
    border-radius: 50%; background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,.9); }
.dcx-sub { margin: 0 auto; max-width: 460px; color: #b9c9e2; font-size: .93rem; line-height: 1.55; }
.dcx-sub strong { color: #60a5fa; font-weight: 700; }
.dcx-list { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.2rem; }
.dcx-opt { display: flex; align-items: stretch; gap: 0; width: 100%; padding: 0; overflow: hidden; text-align: left;
    border-radius: 14px; border: 1px solid rgba(147,197,253,.35); cursor: pointer; font: inherit;
    background: linear-gradient(90deg, #1d4ed8 0%, #16307f 45%, #101f52 100%);
    box-shadow: 0 8px 24px rgba(13,42,107,.45); transition: transform .12s, box-shadow .15s, filter .15s; }
.dcx-opt.alt { background: linear-gradient(90deg, #6d28d9 0%, #4c1d95 45%, #241154 100%); border-color: rgba(196,181,253,.35);
    box-shadow: 0 8px 24px rgba(76,29,149,.45); }
.dcx-opt:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.dcx-opt:disabled { opacity: .6; cursor: wait; }
.dcx-opt-ic { flex: 0 0 84px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #ffffff;
    background: rgba(255,255,255,.14); }
.dcx-opt.alt .dcx-opt-ic { background: rgba(255,255,255,.16); }
.dcx-opt-body { flex: 1; display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1rem; min-width: 0; }
.dcx-opt-name { color: #ffffff; font-weight: 800; font-size: 1.02rem; }
.dcx-opt-desc { color: rgba(226,236,252,.82); font-size: .82rem; line-height: 1.4; }
.dcx-opt-go { flex: 0 0 auto; align-self: center; margin-right: 1rem; width: 36px; height: 36px; border-radius: 50%;
    background: #2563eb; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: .8rem;
    box-shadow: 0 0 14px rgba(37,99,235,.55); }
.dcx-opt.alt .dcx-opt-go { background: #7c3aed; box-shadow: 0 0 14px rgba(124,58,237,.55); }
.dcx-opt-go .spinner { width: 15px; height: 15px; border-width: 2px; }
.dcx-secure { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 1rem;
    padding: .65rem .9rem; border-radius: 12px; border: 1px solid rgba(96,165,250,.18);
    background: rgba(255,255,255,.03); color: #9fb2c9; font-size: .82rem; }
.dcx-secure-ic { color: #60a5fa; font-size: .9rem; }
@media (max-width: 480px) {
    .dcx-card { padding-top: 3.2rem; }
    .dcx-opt-ic { flex-basis: 62px; font-size: 1.35rem; }
    .dcx-opt-body { padding: .8rem .8rem; }
}

/* ── Remote View Monitor (admin Remote Viewer tab) ─────────────────────────── */
.rvw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.rvw-stats { display: flex; gap: .75rem; flex-wrap: wrap; }
.rvw-stat { display: flex; align-items: center; gap: .7rem; background: var(--card, #0f2138); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: .7rem 1.1rem; min-width: 150px; }
.rvw-stat-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.rvw-stat-ic.blue { background: rgba(59,130,246,.15); color: #60a5fa; }
.rvw-stat-ic.green { background: rgba(34,197,94,.15); color: #22c55e; font-size: .7rem; }
.rvw-stat-ic.red { background: rgba(239,68,68,.15); color: #ef4444; font-size: .7rem; }
.rvw-stat-l { font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: #9fb2c9; text-transform: uppercase; }
.rvw-stat-v { font-size: 1.25rem; font-weight: 800; color: #ffffff; line-height: 1.15; }
.rvw-filterbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.rvw-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .85rem; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.12); color: #cbd9ea; font: inherit; font-size: .84rem; font-weight: 600;
    transition: border-color .15s, background .15s; }
.rvw-chip:hover { border-color: rgba(96,165,250,.5); color: #ffffff; }
.rvw-chip.sel { background: rgba(59,130,246,.18); border-color: #3b82f6; color: #ffffff; }
.rvw-chip-n { background: rgba(255,255,255,.12); border-radius: 999px; padding: .05rem .5rem; font-size: .74rem; }
.rvw-chip.sel .rvw-chip-n { background: rgba(59,130,246,.45); }
.rvw-search { position: relative; margin-left: auto; }
.rvw-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #6f87a6; font-size: .8rem; }
.rvw-search input { background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.12); border-radius: 10px; color: #ffffff;
    padding: .5rem .8rem .5rem 2.1rem; font: inherit; font-size: .86rem; width: 190px; }
.rvw-search input::placeholder { color: #6f87a6; }
.rvw-search input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.rvw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .9rem; }
.rvw-card { position: relative; background: var(--card, #0f2138); border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    padding: 1.1rem .9rem .9rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .18rem;
    min-width: 0; overflow: hidden; }
.rvw-num { position: absolute; top: .55rem; left: .55rem; min-width: 22px; height: 22px; padding: 0 .3rem; border-radius: 6px;
    background: rgba(59,130,246,.18); color: #93c5fd; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rvw-ava { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #0d2444; color: #60a5fa;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem;
    border: 2px solid rgba(255,255,255,.14); margin-bottom: .35rem; }
.rvw-ava.on { border-color: #22c55e; }
.rvw-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rvw-name { font-weight: 700; color: #ffffff; font-size: .93rem; max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rvw-dept { font-size: .78rem; color: #9fb2c9; max-width: 100%; overflow-wrap: anywhere; }
.rvw-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; margin-top: .1rem; }
.rvw-status .rvw-dot { width: 8px; height: 8px; border-radius: 50%; }
.rvw-status.on { color: #34d399; } .rvw-status.on .rvw-dot { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.7); }
.rvw-status.off { color: #f87171; } .rvw-status.off .rvw-dot { background: #ef4444; }
.rvw-view { width: 100%; margin-top: .6rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .5rem .6rem; border-radius: 9px; border: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
    background: #2563eb; color: #ffffff; transition: background .15s; }
.rvw-view:hover { background: #1d4ed8; }
.rvw-view:disabled { background: rgba(255,255,255,.08); color: #6f87a6; cursor: not-allowed; }
.rvw-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--card, #0f2138); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .7rem 1rem; margin-top: 1.1rem;
    font-size: .82rem; color: #9fb2c9; }
.rvw-foot-l { display: inline-flex; align-items: center; gap: .55rem; }
.rvw-shield { width: 28px; height: 28px; border-radius: 8px; background: rgba(59,130,246,.15); color: #60a5fa;
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.rvw-legend { display: inline-flex; align-items: center; gap: 1rem; }
.rvw-legend strong { color: #e6eef9; }
@media (max-width: 720px) { .rvw-search { margin-left: 0; width: 100%; } .rvw-search input { width: 100%; } }

/* Payment method card — icon tile picker + dark details field */
.wspay-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9fb2c9; margin: 0 0 .5rem; }
.wspay-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.wspay-m { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .4rem .6rem;
    background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.12); border-radius: 12px;
    color: #cbd9ea; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.wspay-m i { font-size: 1.15rem; color: #7e94b0; transition: color .15s; }
.wspay-m:hover { border-color: rgba(52,211,153,.45); color: #ffffff; }
.wspay-m.sel { background: rgba(16,185,129,.12); border-color: #34d399; color: #ffffff; }
.wspay-m.sel i { color: #34d399; }
.wspay-details { margin-bottom: .9rem; }
.wspay-ta { width: 100%; resize: vertical; min-height: 64px; padding: .7rem .85rem; border-radius: 10px;
    background: #0a1730; color: #ffffff; border: 1.5px solid rgba(255,255,255,.14); font: inherit; font-size: .92rem; line-height: 1.45; }
.wspay-ta::placeholder { color: #6f87a6; }
.wspay-ta:focus { outline: none; border-color: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.wspay-hint { display: flex; align-items: center; gap: .4rem; margin: .45rem 0 0; font-size: .78rem; color: #7e94b0; }
.wspay-hint i { font-size: .72rem; }
.wspay-save { width: 100%; justify-content: center; }

/* ── Payout modal: worker's saved payment details ────────────────────────── */
.po-payinfo { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); border-radius: 12px;
    padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; line-height: 1.5; }
.po-payinfo b { color: var(--emerald); }

/* ── Teacher wizard: worker-set profile + payment (read-only) ─────────────── */
.tw-selfinfo { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .75rem 1rem; }
.tw-selfinfo-av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #0d2444; color: var(--emerald);
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.tw-selfinfo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-selfinfo-pay { font-size: .95rem; line-height: 1.45; }

/* ── My Profile (read-only staff self-view) ───────────────────────────────── */
.prof-wrap { max-width: 760px; margin: 0 auto; }
.prof-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.prof-head .avatar-ring.lg { width: 76px; height: 76px; }
.prof-title { margin: 0; font-size: 1.4rem; color: var(--text-heading); }
.prof-sub { color: var(--text-muted); font-size: .9rem; margin-top: .15rem; }
.prof-status { margin-left: auto; }
.prof-note { display: flex; align-items: center; gap: .5rem; background: var(--emerald-soft); color: var(--emerald-dark); border: 1px solid var(--emerald-border); border-radius: 10px; padding: .65rem .9rem; font-size: .85rem; margin: 0 0 1.1rem; }
.prof-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.prof-card-title { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.prof-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.prof-card-title + .prof-row { border-top: none; }
.prof-label { color: var(--text-muted); font-size: .88rem; flex: 0 0 auto; }
.prof-value { color: var(--text-heading); font-size: .92rem; font-weight: 600; text-align: right; word-break: break-word; }
.prof-row-docs { align-items: flex-start; }
.prof-row-docs .prof-value { flex: 1; text-align: left; font-weight: 500; }
.prof-docs { display: flex; flex-direction: column; gap: .5rem; }
.prof-doc { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text-heading); background: var(--bg-surface); transition: border-color .15s, background .15s; }
.prof-doc:hover { border-color: var(--emerald-border); background: var(--emerald-soft); }
.prof-doc > .fa-file-lines { color: var(--emerald); }
.prof-doc-name { display: flex; flex-direction: column; font-size: .88rem; font-weight: 600; }
.prof-doc-sub { font-size: .74rem; color: var(--text-muted); font-weight: 500; margin-top: .1rem; }
.prof-doc-open { margin-left: auto; color: var(--text-faint); font-size: .8rem; }
.prof-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.prof-card-head .prof-card-title { margin: 0; }
.prof-card-head + .prof-row, .prof-card-head + #profContactView .prof-row:first-child { border-top: none; }
.prof-edit .prof-row { align-items: center; }
.prof-edit input[type="text"] { flex: 1; min-width: 0; max-width: 60%; }
.prof-edit-actions { display: flex; justify-content: flex-end; gap: .6rem; padding-top: .9rem; }
@media (max-width: 560px) {
    .prof-row { flex-direction: column; gap: .2rem; }
    .prof-value { text-align: left; }
    .prof-edit input[type="text"] { max-width: 100%; width: 100%; }
}

/* ── My Schedules page ───────────────────────────────────────────────────────── */
.sched-today { margin-bottom: 1rem; }
.sched-today-head { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; }
.sched-today.on .sched-today-head { color: var(--emerald-dark); }
.sched-today.on { border-left: 4px solid var(--emerald, #10b981); }
.sched-today.off .sched-today-head { color: var(--text-heading); }
.sched-today.off { border-left: 4px solid var(--border); }
.sched-next { margin-top: .7rem; font-size: .95rem; color: var(--text-body); }
.sched-next.muted { color: var(--text-muted); }
.sched-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sched-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: 999px;
    font-size: .85rem; background: #eef2f7; border: 1px solid var(--border); color: var(--text-body); }
.sched-chip i { opacity: .8; }
.sched-chip.class { background: var(--emerald-soft, #ecfdf5); border-color: var(--emerald-border, #a7f3d0); color: var(--emerald-dark, #065f46); }
.sched-chip.work { background: #eef4ff; border-color: #c7d8ff; color: #1d4ed8; }
.sched-chip.lunch { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.sched-chip.break { background: #fdf4ff; border-color: #f5d0fe; color: #a21caf; }
.sched-chip.finish { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.sched-chip.done { opacity: .5; }
.sched-chip-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.sched-clock { margin-bottom: 1rem; }
.sched-clock.on .big-clock.on { color: var(--emerald-dark, #065f46); }
.gate-sched.in { background: var(--emerald-soft, #ecfdf5); color: var(--emerald-dark, #065f46); border: 1px solid var(--emerald-border, #a7f3d0); }
.status-pill.in { color: var(--emerald-dark, #065f46); }
.status-pill.in .dot { background: var(--emerald, #10b981); }
.sched-day { display: flex; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.sched-day:first-of-type { border-top: none; }
.sched-day-name { flex: 0 0 110px; font-weight: 700; color: var(--text-heading); padding-top: .35rem; }
@media (max-width: 560px) {
    .sched-day { flex-direction: column; gap: .4rem; }
    .sched-day-name { flex: none; padding-top: 0; }
}

/* Upcoming class reminders (My Schedules, read-only) */
.rem-list { display: flex; flex-direction: column; gap: .6rem; }
.rem-item { border: 1px solid var(--border); border-radius: 12px; padding: .7rem .85rem; background: #fbfcfe; }
.rem-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.rem-when { font-variant-numeric: tabular-nums; color: var(--text-heading); }
.rem-cls { color: var(--text-body); font-weight: 600; }
.rem-cls i { opacity: .7; margin-right: .3rem; }
.rem-recips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .1rem; }
.rem-tag { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; background: #eef4ff; border: 1px solid #c7d8ff; color: #1d4ed8; }
.rem-fires { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.rem-fire { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; border: 1px solid var(--border); background: #f1f5f9; color: var(--text-body); }
.rem-fire i { font-size: .78rem; }
.rem-fire.sent { background: var(--emerald-soft, #ecfdf5); border-color: var(--emerald-border, #a7f3d0); color: var(--emerald-dark, #065f46); }
.rem-fire.pending { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.rem-fire-state { text-transform: uppercase; font-size: .66rem; letter-spacing: .04em; opacity: .8; }

/* ── "All Status" cross-department overview (admin Financial tab + manager grid) ─── */
.pv-view-pane { display: block; }
.as-cards { margin-bottom: 1.4rem; }
.as-panel { background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 1.1rem 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.as-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.as-panel-title { font-size: 1.12rem; font-weight: 700; color: #e9eef6; display: flex; align-items: center; gap: .45rem; }
.as-hint { color: #64748b; font-size: .85rem; }
.as-panel-sub { color: #94a3b8; font-size: .85rem; margin-top: .2rem; }
.as-search { min-width: 230px; }
.as-table { width: 100%; }
.as-table thead th { font-size: .68rem; letter-spacing: .04em; color: #93a4bd; text-transform: uppercase; white-space: nowrap; padding: .55rem .7rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.as-table tbody td { padding: .7rem .7rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.as-num-h, .as-num { text-align: center; }
.as-table thead th:first-child, .as-table tbody td:first-child { text-align: left; }
.as-agent { display: flex; align-items: center; gap: .7rem; }
.as-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 38px; }
.as-av-fb { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#334155,#475569); color: #e2e8f0; font-weight: 700; font-size: .8rem; }
.as-agent-name { font-weight: 700; color: #e9eef6; }
.as-agent-role { font-size: .78rem; color: #8aa0bd; margin-top: .1rem; }
.as-num .as-n { display: block; font-weight: 700; font-size: 1.02rem; }
.as-num .as-p { display: block; font-size: .72rem; color: #7c8aa3; margin-top: .1rem; }
.as-num.as-active .as-n   { color: #34d399; }
.as-num.as-due_soon .as-n { color: #fbbf24; }
.as-num.as-overdue .as-n  { color: #f87171; }
.as-num.as-churned .as-n  { color: #a78bfa; }
.as-num.as-cancelled .as-n{ color: #fb7185; }
.as-num.as-pending .as-n  { color: #60a5fa; }
.as-num.as-new .as-n      { color: #2dd4bf; }
.as-num.as-total .as-n    { color: #c4b5fd; font-size: 1.18rem; }
.as-h-active { color: #34d399; } .as-h-due_soon { color: #fbbf24; } .as-h-overdue { color: #f87171; }
.as-h-churned { color: #a78bfa; } .as-h-cancelled { color: #fb7185; } .as-h-pending { color: #60a5fa; } .as-h-new { color: #2dd4bf; }
.as-table tfoot .as-total-row td { border-top: 2px solid rgba(255,255,255,.12); border-bottom: none; padding-top: .85rem; background: rgba(255,255,255,.02); }
.as-table tfoot .as-total-row .as-agent-name { letter-spacing: .03em; }
.as-foot { display: flex; align-items: center; gap: .9rem; background: #0f2138; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: .9rem 1.1rem; }
.as-foot-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(96,165,250,.16); color: #60a5fa; display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.as-foot-title { font-weight: 700; color: #e9eef6; margin-bottom: .12rem; }
.as-foot-text { flex: 1 1 auto; color: #94a3b8; font-size: .85rem; }
.as-foot-updated { color: #7c8aa3; font-size: .8rem; white-space: nowrap; }
@media (max-width: 900px) { .as-foot { flex-wrap: wrap; } .as-foot-updated { width: 100%; } }

/* ── Department reports (per-department per-agent performance grid) ── */
.rep-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.rep-tab { padding: .5rem .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: #0f2138; color: #aeb9cc; font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .15s; }
.rep-tab:hover { border-color: rgba(255,255,255,.22); color: #e9eef6; }
.rep-tab.active { background: var(--emerald); border-color: var(--emerald); color: #fff;
    box-shadow: 0 4px 12px rgba(16,185,129,.35); }
/* Department reports sub-tab switcher (Performance / Call Log / Recordings). */
.rep-modebar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .9rem; }
.rep-modebtn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #10233c; color: #aeb9cc; font-weight: 700; font-size: .88rem; cursor: pointer; transition: all .15s; }
.rep-modebtn:hover { border-color: rgba(255,255,255,.26); color: #e9eef6; }
.rep-modebtn.active { background: var(--emerald); border-color: var(--emerald); color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,.32); }
.rep-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.rep-live { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #9fe6c0; text-transform: uppercase; }
.rep-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: repLivePulse 1.8s ease-out infinite; }
@keyframes repLivePulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.rep-tool-right { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rep-select { background: #0f2138; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #e9eef6; padding: .5rem .7rem; font: inherit; font-size: .84rem; cursor: pointer; }
.rep-cards { margin-bottom: 1.2rem; position: relative; z-index: 1; isolation: isolate; }
.rep-cards .dash-stat { cursor: default; }
.rep-cards .dash-stat:hover { transform: none; box-shadow: none; }
.as-panel { position: relative; z-index: 0; }
/* Fit-to-width grid: no horizontal scroll. Fixed layout lets the many status columns
   share the available width evenly; the agent column takes what it needs, numbers stay
   centered and compact (value over percentage), and the rate bar column is capped. */
.report-portal .crm-table-scroll { overflow-x: visible; }
.rep-table { table-layout: fixed; width: 100%; }
.rep-table thead th { padding: .5rem .3rem; font-size: .62rem; }
.rep-table tbody td { padding: .6rem .3rem; }
.rep-table .as-num .as-n { font-size: .92rem; }
.rep-table .as-num .as-p { font-size: .64rem; }
.rep-table thead th:first-child, .rep-table tbody td:first-child { width: 15%; padding-left: .5rem; }
.rep-table .as-agent { gap: .5rem; }
.rep-table .as-agent .as-av { width: 30px; height: 30px; flex: 0 0 30px; }
.rep-table .as-agent-name { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; }
.rep-table .as-agent-role { font-size: .68rem; overflow: hidden; text-overflow: ellipsis; }
.rep-table .rep-rate-h { text-align: left; width: 12%; }
.rep-rate-cell { display: flex; align-items: center; gap: .4rem; }
.report-bar { flex: 1 1 auto; height: 8px; min-width: 32px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.report-bar-fill { height: 100%; border-radius: 999px; transition: width .3s; }
.report-bar-fill.tone-good { background: #22c55e; }
.report-bar-fill.tone-mid { background: #f59e0b; }
.report-bar-fill.tone-low { background: #ef4444; }
.report-bar-val { font-weight: 800; font-size: .78rem; color: #e9eef6; min-width: 30px; text-align: right; }
.rep-table .rep-act-h { width: 34px; }
.rep-act-cell { text-align: right; white-space: nowrap; }
.rep-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0 .2rem; }
.rep-pager-info { font-size: .82rem; font-weight: 700; color: #aeb9cc; }
/* Very tight screens: allow the grid to scroll rather than crush columns illegibly. */
@media (max-width: 900px) { .report-portal .crm-table-scroll { overflow-x: auto; } .rep-table { table-layout: auto; min-width: 720px; } }
@media (max-width: 760px) { .rep-toolbar { flex-direction: column; align-items: stretch; } .rep-tool-right { justify-content: space-between; } }

/* ── Department reports: dedicated dark-blue analytics backdrop + vivid readable cards ─
   #mainArea gets .report-portal only while the reports view is mounted; navigating to any
   other tab rebuilds the shell (fresh #mainArea) so the class never leaks. */
#mainArea.report-portal {
    background:
        radial-gradient(1100px 520px at 8% -12%, rgba(37,99,235,.28) 0%, rgba(37,99,235,0) 60%),
        radial-gradient(900px 500px at 108% 0%, rgba(59,130,246,.16) 0%, rgba(59,130,246,0) 55%),
        linear-gradient(180deg, #081733 0%, #0a1c3d 55%, #0b1e42 100%);
}
.report-portal .topbar h1 { color: #eef4ff; }
.report-portal .topbar .sub { color: #9fb4d6; }
/* Vivid per-tone metric cards: a tinted glass panel so numbers stay high-contrast on navy. */
.report-portal .rep-cards .dash-stat {
    background:
        linear-gradient(158deg, color-mix(in srgb, var(--ds-accent, #60a5fa) 26%, #0b1d3d) 0%,
                                 color-mix(in srgb, var(--ds-accent, #60a5fa) 10%, #0a1a37) 82%);
    border: 1px solid color-mix(in srgb, var(--ds-accent, #60a5fa) 46%, transparent);
    box-shadow: 0 12px 28px rgba(2,8,23,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.report-portal .rep-cards .dash-stat::before { height: 4px; opacity: 1; }
.report-portal .rep-cards .dash-stat-ic {
    background: color-mix(in srgb, var(--ds-accent, #60a5fa) 34%, transparent);
    color: #fff;
}
.report-portal .rep-cards .dash-stat-label { color: #dbe6fa; }
.report-portal .rep-cards .dash-stat-val { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
/* Keep the tabs, toolbar controls and table panel legible on the deeper navy. */
.report-portal .rep-tab { background: rgba(9,24,52,.72); border-color: rgba(255,255,255,.14); }
.report-portal .rep-tab.active { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.report-portal .rep-select,
.report-portal .agent-search { background: rgba(9,24,52,.72); border-color: rgba(255,255,255,.14); }
.report-portal .as-panel {
    background: rgba(9,22,48,.78);
    border: 1px solid rgba(120,160,220,.16);
    box-shadow: 0 14px 34px rgba(2,8,23,.4);
    backdrop-filter: blur(2px);
}

/* ── Class materials (admin manager modal + teacher Materials tab + PDF viewer) ── */
.mat-admin { width: min(560px, 92vw); display: flex; flex-direction: column; gap: 1rem; }
.mat-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mat-admin-head h3 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.mat-admin-add { background: #f6f8fc; border: 1px solid #e6ebf3; border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.mat-kinds { display: flex; gap: .5rem; flex-wrap: wrap; }
.mat-kind { flex: 1 1 0; min-width: 110px; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .7rem; border: 1px solid #d8e0ec; background: #fff; border-radius: 10px; font-weight: 600; color: #475569; cursor: pointer; transition: all .15s; }
.mat-kind:hover { border-color: #94a3b8; }
.mat-kind.on { border-color: #10b981; background: #ecfdf5; color: #047857; box-shadow: 0 0 0 2px rgba(16,185,129,.15); }
.mat-admin-add .field { display: flex; flex-direction: column; gap: .3rem; }
.mat-admin-add .field label { font-size: .82rem; font-weight: 600; color: #475569; }
.mat-admin-add input[type=text], .mat-admin-add input:not([type]), .mat-admin-add input[type=file] { width: 100%; padding: .55rem .7rem; border: 1px solid #d8e0ec; border-radius: 9px; font: inherit; }
.mat-admin-list { display: flex; flex-direction: column; gap: .5rem; max-height: 44vh; overflow: auto; }
.mat-arow { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border: 1px solid #e6ebf3; border-radius: 11px; background: #fff; }
.mat-aicon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; font-size: 1rem; }
.mat-aicon.youtube { background: #fee2e2; color: #dc2626; }
.mat-aicon.pdf { background: #fee2e2; color: #b91c1c; }
.mat-aicon.link { background: #dbeafe; color: #2563eb; }
.mat-ainfo { flex: 1 1 auto; min-width: 0; }
.mat-ainfo b { display: block; color: #1e293b; }
.mat-ainfo small { display: block; color: #64748b; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Teacher Materials tab */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: .8rem; }
.mat-card { border: 1px solid #e6ebf3; border-radius: 14px; padding: 1rem; background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.mat-card.mat-yt { padding: 0; overflow: hidden; }
.mat-embed { width: 100%; position: relative; padding-top: 56.25%; background: #0f172a; }
.mat-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mat-embed-bad { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #f87171; padding-top: 0; height: 150px; }
.mat-card.mat-yt .mat-card-name { padding: .7rem .9rem; }
.mat-card-name { font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: .45rem; }
.mat-card-ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.mat-card-ic.pdf { background: #fee2e2; color: #b91c1c; }
.mat-card-ic.link { background: #dbeafe; color: #2563eb; }
.mat-card-note { font-size: .74rem; color: #94a3b8; }
.mat-card .btn-sm { padding: .45rem .8rem; font-size: .85rem; }

/* View-only PDF viewer */
.mat-viewer { width: min(960px, 95vw); height: min(88vh, 1000px); display: flex; flex-direction: column; }
.mat-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #e6ebf3; }
.mat-viewer-head b { display: flex; align-items: center; gap: .5rem; }
.mat-viewer-acts { display: flex; align-items: center; gap: .35rem; }
.mat-viewer-body { flex: 1 1 auto; min-height: 0; margin-top: .8rem; display: flex; }
.mat-viewer-frame { flex: 1 1 auto; width: 100%; height: 100%; border: 1px solid #e6ebf3; border-radius: 10px; }
/* When the viewer is fullscreen, fill the screen and drop the modal rounding */
.mat-viewer:fullscreen { width: 100vw; height: 100vh; background: #fff; padding: 1rem; }
.mat-viewer:fullscreen .mat-viewer-frame { border-radius: 0; }

/* Department Resources / Knowledge Base */
.rsc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.rsc-search { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #d8e0ec; border-radius: 10px; padding: .5rem .75rem; min-width: min(320px, 100%); color: #94a3b8; }
.rsc-search input { border: 0; outline: none; flex: 1 1 auto; font-size: .92rem; color: #1e293b; background: none; }
.rsc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rsc-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #d8e0ec; background: #fff; color: #475569; border-radius: 999px; padding: .38rem .8rem; font-size: .82rem; font-weight: 600; cursor: default; }
button.rsc-chip { cursor: pointer; }
button.rsc-chip:hover { border-color: #93c5fd; color: #1d4ed8; }
button.rsc-chip.active { background: #065f46; border-color: #065f46; color: #fff; }
.rsc-card { border: 1px solid #e6ebf3; border-radius: 14px; padding: 1rem; background: #fff; display: flex; flex-direction: column; gap: .55rem; }
.rsc-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rsc-kind { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.rsc-card-title { font-weight: 700; color: #1e293b; }
.rsc-card-desc { font-size: .85rem; color: #64748b; flex: 1 1 auto; }
.rsc-card-foot { margin-top: auto; }
.rsc-reader { width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.rsc-reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #e6ebf3; }
.rsc-reader-head h2 { margin: .45rem 0 .15rem; }
.rsc-reader-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-top: .9rem; color: #334155; line-height: 1.65; font-size: .95rem; }
.rsc-reader-body p { margin: 0 0 .9rem; white-space: normal; overflow-wrap: anywhere; }
.rsc-table { width: 100%; border-collapse: collapse; }
.rsc-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: .5rem .6rem; border-bottom: 1px solid #e6ebf3; }
.rsc-table td { padding: .65rem .6rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.rsc-t-title { font-weight: 700; color: #1e293b; }
.rsc-t-desc { font-size: .8rem; color: #94a3b8; margin-top: 2px; }
.rsc-dept { display: inline-block; background: #f1f5f9; color: #475569; border-radius: 7px; padding: .18rem .5rem; font-size: .76rem; font-weight: 600; margin: 1px 0; }
.rsc-t-acts { white-space: nowrap; text-align: right; }

/* ── Resources dark-blue theme (white text everywhere for visibility) ───────── */
.rsc-dark { background: #0d1f3c; border-radius: 16px; padding: 1.1rem; }
.rsc-dark, .rsc-dark .rsc-card-title, .rsc-dark .rsc-t-title, .rsc-dark h2, .rsc-dark .section-title { color: #fff; }
.rsc-dark .section-title i { color: #6ee7b7; }
.rsc-dark .card { background: #12294d; border: 1px solid #274672; box-shadow: none; }
.rsc-dark .rsc-search { background: #12294d; border-color: #33517d; color: #9db4d6; }
.rsc-dark .rsc-search input { color: #fff; }
.rsc-dark .rsc-search input::placeholder { color: #8ba3c7; }
.rsc-dark .rsc-chip { background: #12294d; border-color: #33517d; color: #dbe7f8; }
.rsc-dark button.rsc-chip:hover { border-color: #60a5fa; color: #fff; }
.rsc-dark button.rsc-chip.active { background: #10b981; border-color: #10b981; color: #fff; }
.rsc-dark .rsc-card { background: #16305a; border-color: #2e4e7e; }
.rsc-dark .rsc-kind { color: #9db4d6; }
.rsc-dark .rsc-card-desc, .rsc-dark .rsc-t-desc, .rsc-dark .muted { color: #c3d3ec; }
.rsc-dark .rsc-card-snippet { font-size: .8rem; color: #dbe7f8; background: #0d1f3c; border: 1px solid #2e4e7e; border-radius: 9px; padding: .5rem .6rem; line-height: 1.5; overflow-wrap: anywhere; }
.rsc-dark .rsc-card-snippet i { color: #6ee7b7; margin-right: .3rem; font-size: .7rem; }
.rsc-hl { background: #facc15; color: #1e293b; border-radius: 3px; padding: 0 2px; font-weight: 700; }
.rsc-dark .rsc-table th { color: #9db4d6; border-bottom-color: #2e4e7e; }
.rsc-dark .rsc-table td { border-bottom-color: #22406b; color: #e7eefa; }
.rsc-dark .rsc-dept { background: #0d1f3c; color: #dbe7f8; }
.rsc-dark .icon-btn { background: #16305a; border-color: #33517d; color: #dbe7f8; }
.rsc-dark .icon-btn:hover { background: #1d3c6e; color: #fff; }
.rsc-dark .fin-empty, .rsc-dark .fin-empty i { color: #c3d3ec; }
/* In-place (same screen) resource detail view */
.rsc-detail { display: flex; flex-direction: column; gap: .9rem; }
.rsc-back { align-self: flex-start; background: #16305a; border: 1px solid #33517d; color: #fff; border-radius: 9px; padding: .45rem .85rem; font-weight: 600; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.rsc-back:hover { background: #1d3c6e; border-color: #60a5fa; }
.rsc-detail-card { background: #12294d; border: 1px solid #274672; border-radius: 14px; padding: 1.2rem 1.3rem; color: #fff; }
.rsc-detail-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.rsc-detail-card h2 { margin: .2rem 0 .3rem; color: #fff; }
.rsc-detail-desc { color: #c3d3ec; margin: 0 0 .8rem; }
.rsc-detail-body { color: #e7eefa; line-height: 1.7; font-size: .96rem; border-top: 1px solid #2e4e7e; padding-top: 1rem; }
.rsc-detail-body p { margin: 0 0 .95rem; white-space: normal; overflow-wrap: anywhere; }
.rsc-detail-frame { width: 100%; height: min(74vh, 900px); border: 0; border-radius: 10px; background: #fff; }

/* New/Edit resource dialog — a compact two-column grid so the whole form fits on
   screen without vertical or horizontal scrolling (user request, July 2026). The
   modal is widened to hold the card; header/description/full-width fields/actions
   span both columns, everything else pairs up (Title|Category, Content|Departments). */
.modal-backdrop:has(.rsc-editor) .modal { max-width: min(840px, 96vw); }
.rsc-editor { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; align-items: start;
    width: 100%; max-height: 92vh; overflow-x: hidden; overflow-y: auto; }
.rsc-editor > h2 { grid-column: 1 / -1; }
.rsc-editor > p { grid-column: 1 / -1; margin-bottom: .3rem !important; }
.rsc-editor .fld { grid-column: auto; margin: 0; min-width: 0; }
.rsc-editor .rsc-full { grid-column: 1 / -1; }
.rsc-editor label { margin-bottom: .25rem; font-size: .76rem; }
.rsc-editor input, .rsc-editor select { padding: .5rem .7rem; font-size: .88rem; }
.rsc-editor textarea { width: 100%; height: 150px; min-height: 90px; resize: vertical; padding: .5rem .7rem; font-size: .88rem; box-sizing: border-box; }
.rsc-editor-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .6rem; margin-top: .3rem; }
.rsc-kind-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.rsc-kind-opt { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid #d8e0ec; background: #fff; color: #475569; border-radius: 10px; padding: .42rem .7rem; font-weight: 600; font-size: .82rem; cursor: pointer; }
.rsc-kind-opt.active { border-color: #10b981; color: #047857; background: #ecfdf5; }
.rsc-dept-pick { display: flex; flex-direction: column; gap: .3rem; max-height: 172px; overflow: auto; border: 1px solid #d8e0ec; border-radius: 9px; padding: .5rem .6rem; background: #fff; }
.rsc-dept-opt { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: #334155; cursor: pointer; }
@media (max-width: 620px) {
    .rsc-editor { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
    .rsc-editor .fld { grid-column: 1 / -1; }
    .rsc-editor textarea { height: 110px; }
}

/* Materials library (admin) */
.mat-lib { width: min(720px, 94vw); }
.mat-lib-tabs { display: flex; gap: .4rem; border-bottom: 1px solid #e6ebf3; }
.mat-lib-tab { display: flex; align-items: center; gap: .4rem; padding: .55rem .85rem; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; color: #64748b; cursor: pointer; }
.mat-lib-tab:hover { color: #334155; }
.mat-lib-tab.on { color: #047857;
    background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(16,185,129,.05));
    border-radius: 9px 9px 0 0; box-shadow: inset 0 -3px 0 0 #10b981; }
body.staffdark .mat-lib-tab.on { color: #6ee7b7;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06)); }
body.staffdark .mat-lib-tab.on i { color: #34d399; }
.mat-lib-body { display: flex; flex-direction: column; gap: 1rem; max-height: 66vh; overflow: auto; padding-top: .25rem; }
.mat-cls-list { display: flex; flex-direction: column; gap: .35rem; max-height: 160px; overflow: auto; border: 1px solid #d8e0ec; border-radius: 9px; padding: .55rem .65rem; background: #fff; }
.mat-cls-opt { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: #334155; cursor: pointer; }
.mat-vis-opts { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.mat-autosave { font-size: .8rem; color: #047857; display: flex; align-items: center; gap: .4rem; margin: -.2rem 0 .1rem; }
.mat-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.mat-chip { font-size: .72rem; font-weight: 600; background: #eef2f9; color: #475569; border-radius: 999px; padding: .12rem .5rem; }
.mat-chip-none { background: #fef3c7; color: #92400e; }
.mat-vis-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.mat-vis { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; border-radius: 999px; padding: .12rem .5rem; }
.mat-vis.on { background: #ecfdf5; color: #047857; }
.mat-vis.off { background: #f1f5f9; color: #94a3b8; }
.mat-arow-acts { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.mat-preview-note { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #475569; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: .55rem .8rem; }
.mat-preview { display: flex; flex-direction: column; gap: 1rem; }

/* Student portal "My materials" block */
.att-materials { margin-top: 1.4rem; }
/* Student class-recordings list (rides the materials section styling) */
.stu-rec-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.stu-rec-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: .65rem .9rem; }
.stu-rec-name { font-weight: 700; color: #1e293b; font-size: .93rem; }
.stu-rec-sub { color: #64748b; font-size: .8rem; margin-top: .15rem; }
.att-mat-head { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: #1e293b; font-size: 1.05rem; }

/* ── Materials modals: size the wrapper to its panel (the base .modal caps at
   460px, but these panels are wider) and make everything fit on mobile ─────── */
.modal-backdrop:has(.mat-admin) .modal,
.modal-backdrop:has(.mat-viewer) .modal { max-width: none; width: auto; }
.modal-backdrop:has(.mat-admin) .modal { padding: 1.3rem 1.4rem 1.4rem; }

@media (max-width: 560px) {
    /* Library / edit panels use the full small screen, with a small frame. */
    .modal-backdrop:has(.mat-admin) { padding: 10px; }
    .modal-backdrop:has(.mat-admin) .modal { padding: 1rem 1rem 1.1rem; border-radius: 14px; }
    .mat-admin, .mat-lib { width: 100%; max-width: 100%; }
    .mat-admin-head h3 { font-size: 1.05rem; }
    /* Type buttons stack two-up so their labels never clip. */
    .mat-kind { min-width: 0; flex: 1 1 calc(50% - .25rem); font-size: .85rem; padding: .5rem .45rem; }
    /* Tabs scroll sideways instead of squishing. */
    .mat-lib-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mat-lib-tab { flex: 0 0 auto; padding: .55rem .7rem; font-size: .85rem; }
    /* Library rows let their actions wrap under the name when tight. */
    .mat-arow { flex-wrap: wrap; }
    .mat-ainfo { flex: 1 1 60%; }
    .mat-arow-acts { margin-left: auto; }
    .mat-grid { gap: .8rem; }
    .mat-vis-opts { gap: .9rem; }
    /* PDF viewer fills the whole phone screen. */
    .modal-backdrop:has(.mat-viewer) { padding: 0; }
    .modal-backdrop:has(.mat-viewer) .modal { max-height: 100vh; border-radius: 0; }
    .mat-viewer { width: 100vw; max-width: 100vw; height: 100vh; border-radius: 0;
        padding: .7rem .7rem .9rem; box-sizing: border-box; }
    .mat-viewer-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; font-size: .95rem; }
}

/* ════════════════════════ BULK ACTIONS (multi-select) ════════════════════════ */
.bulk-th, .bulk-td { width: 38px; text-align: center; padding-left: 10px !important; padding-right: 4px !important; }
.bulk-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.bulk-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--emerald, #10b981); margin: 0; }
.bulk-bar {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 1200; display: flex; align-items: center; gap: 1.2rem;
    background: linear-gradient(160deg, #1e293b, #0f172a); color: #fff;
    border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    padding: .65rem .8rem .65rem 1.05rem; box-shadow: 0 18px 50px rgba(0,0,0,.45);
    max-width: calc(100vw - 32px); animation: bulkBarIn .18s ease;
}
@keyframes bulkBarIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.bulk-bar-l { display: flex; align-items: center; gap: .55rem; font-size: .88rem; white-space: nowrap; }
.bulk-bar-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
    padding: 0 .45rem; border-radius: 999px; background: var(--emerald, #10b981); color: #04261a; font-weight: 800; font-size: .85rem;
}
.bulk-link { background: none; border: none; color: #7dd3fc; cursor: pointer; font-size: .82rem; text-decoration: underline; padding: 0 0 0 .4rem; }
.bulk-link:hover { color: #bae6fd; }
.bulk-bar-r { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.bulk-bar-x { background: rgba(255,255,255,.08); border: none; color: #cbd5e1; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.bulk-bar-x:hover { background: rgba(255,255,255,.18); color: #fff; }
.bulk-res-grp { margin-top: .9rem; }
.bulk-res-h { font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .35rem; }
.bulk-res-h.skip { color: #d97706; }
.bulk-res-h.fail { color: #dc2626; }
.bulk-res-items { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; padding: .4rem .55rem; }
.bulk-res-row { display: flex; gap: .6rem; font-size: .82rem; padding: .12rem 0; }
.bulk-res-id { font-weight: 700; color: #334155; min-width: 64px; }
.bulk-res-rsn { color: #64748b; }
@media (max-width: 560px) {
    .bulk-bar { flex-direction: column; align-items: stretch; gap: .55rem; left: 12px; right: 12px; transform: none; bottom: 12px; }
    @keyframes bulkBarIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    .bulk-bar-r { justify-content: center; }
}

/* ── Shared list pager + row-number column (Leads / Contacts / Academy) ── */
.num-th, .num-td { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.num-td { color: var(--text-faint); font-weight: 600; font-size: .82rem; }
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1.1rem; border-top: 1px solid var(--border); }
.list-foot-sum { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.list-foot-rpp { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.list-rpp-sel { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-body); font-weight: 600; font-size: .82rem; cursor: pointer; }
.list-foot-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.list-pg-btn, .list-pg-num { min-width: 32px; height: 32px; padding: 0 .5rem; border: 1px solid var(--border); background: #fff; border-radius: 8px; color: var(--text-body); font-weight: 600; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.list-pg-btn:hover:not(:disabled), .list-pg-num:hover:not(.on) { border-color: var(--emerald); color: var(--emerald-dark); }
.list-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.list-pg-num.on { background: var(--emerald); border-color: var(--emerald); color: #fff; cursor: default; }
.list-pg-gap { padding: 0 2px; color: var(--text-faint); }
@media (max-width: 640px) { .list-foot-sum { order: 3; flex: 1 0 100%; } }

/* Dark-card variants (Contacts + Academy tables sit on #0f2138 cards). */
.ct-table-scroll { overflow-x: auto; }
.ct-table-wrap .list-foot, #acaFoot .list-foot { border-top-color: rgba(255,255,255,.08); }
.ct-table-wrap .list-foot-sum, #acaFoot .list-foot-sum,
.ct-table-wrap .list-foot-rpp, #acaFoot .list-foot-rpp { color: #94a3b8; }
.ct-table-wrap .list-pg-btn, .ct-table-wrap .list-pg-num, .ct-table-wrap .list-rpp-sel,
#acaFoot .list-pg-btn, #acaFoot .list-pg-num, #acaFoot .list-rpp-sel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #e2e8f0; }
.ct-table-wrap .list-rpp-sel option, #acaFoot .list-rpp-sel option { color: #0f2138; }
.ct-table-wrap .list-pg-btn:hover:not(:disabled), .ct-table-wrap .list-pg-num:hover:not(.on),
#acaFoot .list-pg-btn:hover:not(:disabled), #acaFoot .list-pg-num:hover:not(.on) { border-color: var(--emerald); color: #fff; }
.ct-table-wrap .list-pg-num.on, #acaFoot .list-pg-num.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }

/* Students attendance — dark-blue themed view (scoped to .att-dark, sub-tabs + panel) */
.content.att-dark {
    background: linear-gradient(165deg, #0a1a33 0%, #0d2246 55%, #0a1730 100%);
    border: 1px solid #16305a;
    border-radius: 18px;
    padding: 1.15rem 1.35rem 1.6rem;
    margin-bottom: 2rem;
    color: #eaf2ff;
    box-shadow: 0 22px 50px -26px rgba(6, 18, 40, .8);
    min-height: 60vh;
}
.att-dark .att-grid-bar.card { background: rgba(255,255,255,.045); border: 1px solid rgba(120,160,220,.18); color: #eaf2ff; box-shadow: none; }
.att-dark .att-grid-bar-label { color: #eaf2ff; }
.att-dark .att-grid-bar-label i { color: #4ea1ff; }
.att-dark .att-grid-bar-fields label { color: #b7c8e6; }
.att-dark .att-grid-bar-fields input[type="date"],
.att-dark .att-grid-bar-fields select { background: rgba(3,10,24,.55); border: 1px solid rgba(120,160,220,.28); color: #eaf2ff; }
.att-dark .att-grid-bar-fields input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }
.att-dark .att-grid-bar .btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(120,160,220,.28); color: #eaf2ff; }
.att-dark .att-grid-bar .btn-ghost:hover { background: rgba(255,255,255,.14); }
.att-dark .empty { color: #b7c8e6; }
.att-dark .empty-icon { color: #4ea1ff; opacity: .8; }
.att-dark .center-load .spinner { border-top-color: #4ea1ff; }

/* Visual attendance Grid sub-tab (on-screen students × dates matrix, dark) */
.att-vgrid-nav { display: inline-flex; align-items: center; gap: .35rem; }
.att-vgrid-month { color: #eaf2ff; font-weight: 800; font-size: .92rem; margin: 0 .5rem 0 .35rem; white-space: nowrap; }
.att-vgrid-meta { color: #b7c8e6; font-size: .82rem; margin: .2rem 0 .6rem; }
.att-vgrid-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: 0 0 .6rem; color: #9fb3d8; font-size: .78rem; }
.att-vgrid-legend .att-vgl-item { display: inline-flex; align-items: center; gap: .32rem; white-space: nowrap; }
.att-vgrid-legend .att-vgl-p { color: #4ade80; font-size: .82rem; }
.att-vgrid-scroll { overflow: auto; max-height: 68vh; border: 1px solid rgba(120,160,220,.22); border-radius: 12px; background: rgba(3,10,24,.45); }
table.att-vgrid { border-collapse: separate; border-spacing: 0; font-size: .78rem; color: #dbe7fb; min-width: 100%; }
table.att-vgrid th, table.att-vgrid td { border-right: 1px solid rgba(120,160,220,.14); border-bottom: 1px solid rgba(120,160,220,.14); padding: .3rem .45rem; text-align: center; white-space: nowrap; }
table.att-vgrid thead th { position: sticky; top: 0; z-index: 2; background: #0d1e3a; color: #b7c8e6; font-weight: 700; }
table.att-vgrid th.vg-nm, table.att-vgrid td.vg-nm { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 175px; max-width: 260px; background: #0d1e3a; white-space: normal; }
table.att-vgrid thead th.vg-nm { z-index: 3; }
table.att-vgrid td.vg-nm b { color: #eaf2ff; font-weight: 700; }
table.att-vgrid .vg-em { color: #7e93b8; font-size: .68rem; font-weight: 400; overflow-wrap: anywhere; }
table.att-vgrid th.vg-dt { font-size: .68rem; padding: .35rem .3rem; }
table.att-vgrid td.vg-p { background: rgba(34,197,94,.18); color: #4ade80; font-weight: 800; }
table.att-vgrid td.vg-a { background: rgba(239,68,68,.16); color: #f87171; font-weight: 800; }
table.att-vgrid td.vg-x { background: rgba(100,116,139,.16); color: #94a3b8; font-weight: 800; }
table.att-vgrid td.vg-b { color: #46587a; }
table.att-vgrid .vg-sum { font-weight: 700; color: #eaf2ff; }
table.att-vgrid tbody tr:hover td { background-color: rgba(78,161,255,.08); }
table.att-vgrid tbody tr:hover td.vg-p { background-color: rgba(34,197,94,.28); }
table.att-vgrid tbody tr:hover td.vg-a { background-color: rgba(239,68,68,.26); }
table.att-vgrid tbody tr:hover td.vg-x { background-color: rgba(100,116,139,.26); }
table.att-vgrid tbody tr:hover td.vg-nm { background-color: #12294e; }
table.att-vgrid td.vg-p svg { display: inline-block; vertical-align: middle; }

/* Settings → Attendance session icons */
.ats-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.ats-prev { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(120,160,220,.25); border-radius: 8px; background: rgba(3,10,24,.45); flex: 0 0 auto; }
.ats-row input.ats-name { flex: 1 1 140px; min-width: 120px; }
.ats-row input[type="time"] { width: 108px; }
.ats-row input[type="color"] { width: 40px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid rgba(120,160,220,.25); background: rgba(3,10,24,.45); cursor: pointer; }
.ats-dash { color: #7e93b8; }
.ats-icon-wrap select { min-width: 120px; }
.ats-del { padding: .3rem .55rem; color: #f87171; }
.ats-multi .ats-multi-lbl { color: #dbe7fb; font-weight: 600; flex: 1 1 auto; }

/* ── Free Access grant dialog + expiry hints (Task #179) ─────────────────── */
.fin-until { margin-top: .2rem; font-size: .72rem; color: #93a9cd; white-space: nowrap; }
.fin-until i { margin-right: .2rem; color: #7e93b8; }
/* Exact day count under every Financial Status pill (all staff views). */
.fin-days { margin-top: .2rem; font-size: .72rem; font-weight: 700; color: #93a9cd; white-space: nowrap; }
.fin-days i { margin-right: .2rem; }
.fin-days.due { color: #f59e0b; }
.fin-days.over { color: #ef4444; }
.modal-foot-gap { flex: 1 1 auto; }
#faForm .hint { display: block; margin-top: .25rem; font-size: .74rem; color: #7e93b8; }
.fa-aud { margin-top: 1.1rem; border-top: 1px solid rgba(120,160,220,.18); padding-top: .8rem; }
.fa-aud-title { margin: 0 0 .55rem; font-size: .85rem; color: #dbe7fb; }
.fa-aud-title i { margin-right: .35rem; color: #7e93b8; }
.fa-aud-row { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; border-bottom: 1px dashed rgba(120,160,220,.12); }
.fa-aud-row:last-child { border-bottom: 0; }
.fa-aud-row .scp-badge { flex: 0 0 auto; }
.fa-aud-body { font-size: .8rem; color: #b9c9e4; line-height: 1.35; }
.fa-aud-meta { display: block; color: #8ba1c4; font-size: .75rem; margin-top: .1rem; }

/* ── Students roster: filter bar + inline editors ─────────────────────────── */
.st-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .55rem .75rem .1rem; }
.st-filter-pill { display: inline-flex; align-items: center; gap: .35rem; background: rgba(52,211,153,.12);
    border: 1px solid rgba(52,211,153,.35); color: #a7f3d0; border-radius: 999px; padding: .22rem .4rem .22rem .65rem;
    font-size: .78rem; font-weight: 600; max-width: 320px; }
.st-filter-pill button { background: none; border: 0; color: #a7f3d0; cursor: pointer; font-size: .95rem;
    line-height: 1; padding: 0 .2rem; border-radius: 50%; }
.st-filter-pill button:hover { color: #fff; background: rgba(52,211,153,.25); }
.st-inline { cursor: pointer; border-radius: 6px; min-width: 60px; }
.st-inline:hover { outline: 1px dashed rgba(148,163,184,.45); outline-offset: 3px; }
.st-filter-modal .stf-chks { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.st-filter-modal .stf-chk { display: inline-flex; align-items: center; gap: .35rem; background: rgba(15,23,42,.5);
    border: 1px solid rgba(120,160,220,.18); border-radius: 8px; padding: .3rem .55rem; font-size: .8rem; cursor: pointer; }
.st-filter-modal .stf-chk:has(input:checked) { border-color: var(--emerald); background: rgba(52,211,153,.1); }
.st-filter-modal .stf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; margin-top: .4rem; }
.st-filter-modal .stf-pair { display: flex; gap: .5rem; }
.st-filter-modal .stf-pair input { min-width: 0; }
@media (max-width: 640px) { .st-filter-modal .stf-grid { grid-template-columns: 1fr; } }

/* ════════════ DARK-BLUE STAFF THEME — body-level surfaces ════════════
   `body.staffdark` is added by shell() for every staff portal and removed on the
   login + student screens. The `.main` token flip lives in the block above; this
   section darkens everything that renders OUTSIDE .main (modals, toasts) plus the
   view components that hard-code light backgrounds. Dark-native modals keep their
   own palettes: .ccw-modal, .tw-modal, .edit-profile-dark are excluded via :where()
   (zero specificity) so the :has()-based special treatments (.tr-modal gradient,
   .scp-card transparent shell) still win. */
body.staffdark { background: #0a1626; }

/* Theme tokens for every modal opened from a staff screen — descendants using
   var(--white)/var(--text-*)/var(--border) flip automatically. */
body.staffdark .modal {
    --bg-surface: #0a1626;
    --white: #0f2138;
    --border: rgba(255,255,255,.12);
    --text-heading: #ffffff;
    --text-body: #e6eef9;
    --text-muted: #b8c6da;
    --text-faint: #93a5c0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
    --shadow-md: 0 10px 30px rgba(0,0,0,.3);
}
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal):not(.edit-profile-dark)) {
    background: #0f2138;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    color: var(--text-body);
}
/* Form controls inside generic staff modals (wizard modals style their own). */
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="text"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="email"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="password"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="number"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="datetime-local"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="date"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="month"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) input[type="time"],
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) select,
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) textarea {
    background-color: #0a1626; color: var(--text-heading); border-color: rgba(255,255,255,.16);
}
body.staffdark .modal select option { background: #0f2138; color: #fff; }
body.staffdark .modal input[type="date"]::-webkit-calendar-picker-indicator,
body.staffdark .modal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.staffdark .modal input[type="month"]::-webkit-calendar-picker-indicator,
body.staffdark .modal input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); cursor: pointer; }
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) .btn-ghost { background-color: #0f2138; color: var(--text-body); border-color: rgba(255,255,255,.18); }
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) .btn-ghost:hover { background-color: #16294a; color: #fff; }
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) .icon-btn { background-color: #0f2138; border-color: rgba(255,255,255,.14); color: var(--text-muted); }
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) .icon-btn:hover { background-color: #16294a; color: #fff; }
body.staffdark .modal .fin-muted { color: #9fb2c9; }
body.staffdark .modal:where(:not(.ccw-modal):not(.tw-modal)) .modal-body textarea { background: #0a1626; color: var(--text-heading); border-color: rgba(255,255,255,.16); }
/* Quote / payment dialogs */
body.staffdark .modal .q-method,
body.staffdark .modal .q-ptype-btn,
body.staffdark .modal .q-class { background: #0a1626; border-color: rgba(255,255,255,.16); }
body.staffdark .modal .q-method:hover,
body.staffdark .modal .q-class:hover { background: #16294a; border-color: rgba(255,255,255,.28); }
body.staffdark .modal .q-class:has(input:checked) { background: rgba(16,185,129,.12); border-color: #10b981; }
body.staffdark .modal .q-classes-empty { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
body.staffdark .modal .q-stripe-toggle { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.35); }
body.staffdark .modal .pa-anchor-opt { background: #0a1626; }
body.staffdark .modal .pa-anchor-opt:hover { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.4); }
/* PV review card */
body.staffdark .modal .pv-attrib { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--text-body); }
body.staffdark .modal .pv-attrib.bad { background: rgba(239,68,68,.12); border-color: rgba(248,113,113,.4); color: #fca5a5; }
body.staffdark .modal .pv-attrib.warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #fcd34d; }
body.staffdark .modal .pv-proof-box { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--text-body); }
body.staffdark .modal .pv-act-neutral { background: #0a1626; color: var(--text-body); border-color: rgba(255,255,255,.22); }
body.staffdark .modal .pv-act-neutral:hover { background: #16294a; border-color: rgba(255,255,255,.35); }
body.staffdark .modal .pv-act-danger { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(248,113,113,.4); }
body.staffdark .modal .pv-act-danger:hover { background: rgba(239,68,68,.2); border-color: #f87171; }
body.staffdark .modal .pv-act-close { background: rgba(255,255,255,.08); color: #cbd5e1; border-color: rgba(255,255,255,.16); }
/* Misc modal rows */
body.staffdark .modal .mtab-opt { background: #0a1626; border-color: rgba(255,255,255,.14); }
body.staffdark .modal .mtab-opt.is-locked { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.35); }
body.staffdark .modal .enroll-row { background: #0a1626; border-color: rgba(255,255,255,.14); }
body.staffdark .modal .enroll-row:hover { background: #16294a; }
body.staffdark .modal .sa-row { background: #0a1626; border-color: rgba(255,255,255,.14); }
body.staffdark .modal .tech-res-aca { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: var(--text-body); }
body.staffdark .modal .st-filter-clear { background: #0f2138; color: #cbd5e1; border-color: rgba(255,255,255,.16); }
body.staffdark .modal .st-filter-clear:hover { background: #16294a; }
/* Materials admin modal */
body.staffdark .modal .mat-admin-add { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
body.staffdark .modal .mat-kind { background: #0a1626; border-color: rgba(255,255,255,.16); color: var(--text-muted); }
body.staffdark .modal .mat-kind:hover { background: #16294a; color: #fff; }
body.staffdark .modal .mat-arow,
body.staffdark .modal .mat-card { background: #0f2138; border-color: rgba(255,255,255,.12); }
body.staffdark .modal .mat-cls-list { background: #0a1626; border-color: rgba(255,255,255,.16); }
body.staffdark .modal .mat-preview-note { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.35); color: #bae6fd; }
body.staffdark .modal .mat-vis.off { background: rgba(255,255,255,.08); color: #94a3b8; }
/* Teacher-wizard link/doc boxes appear in generic modals too */
body.staffdark .modal:where(:not(.tw-modal)) .tw-linkbox { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
body.staffdark .modal:where(:not(.tw-modal)) .tw-linkbox input { background: #0a1626; color: var(--text-muted); }
body.staffdark .modal:where(:not(.tw-modal)) .tw-doc { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
body.staffdark .modal:where(:not(.tw-modal)) .tw-ssn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); }
/* Attendance range presets / tabs (per-student modal + main attendance view) */
body.staffdark .att-presets { background: rgba(255,255,255,.07); }
body.staffdark .att-preset { color: #b8c6da; }
body.staffdark .att-preset.active { background: var(--emerald); color: #fff; box-shadow: none; }
body.staffdark .att-custom input { background: #0a1626; color: #fff; border-color: rgba(255,255,255,.16); }
body.staffdark .main .att-tabs { background: rgba(255,255,255,.07); }
body.staffdark .main .att-tab { color: #b8c6da; }
body.staffdark .main .att-tab:hover { color: #fff; }
body.staffdark .main .att-tab.on { background: var(--emerald); color: #fff; box-shadow: none; }

/* ── Components inside .main that hard-code light backgrounds ── */
body.staffdark .main .csched-hero,
body.staffdark .main .csched-grid { background: #0f2138; border-color: rgba(255,255,255,.1); box-shadow: none; }
body.staffdark .main .gate-logout { background: #0f2138; border-color: rgba(255,255,255,.16); }
body.staffdark .main .gate-sched.wait { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
body.staffdark .main .status-pill.out { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
body.staffdark .main .mtab-opt { background: #0f2138; border-color: rgba(255,255,255,.14); }
body.staffdark .main .mtab-opt.is-locked { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.35); }
body.staffdark .main .enroll-row { background: #0f2138; border-color: rgba(255,255,255,.14); }
body.staffdark .main .enroll-row:hover { background: #16294a; }
body.staffdark .main .sa-row { background: #0f2138; border-color: rgba(255,255,255,.14); }
body.staffdark .main .tech-res-aca { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: var(--text-body); }
body.staffdark .main .st-filter-clear { background: #0f2138; color: #cbd5e1; border-color: rgba(255,255,255,.16); }
body.staffdark .main .st-filter-clear:hover { background: #16294a; }
body.staffdark .main .rem-item { background: #0f2138; border-color: rgba(255,255,255,.12); }
body.staffdark .main .rem-fire { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
body.staffdark .main .rem-fire.pending { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #fcd34d; }
body.staffdark .main .comm-how { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.35); }
body.staffdark .main .comm-unheardrow { background: rgba(139,92,246,.1); }
body.staffdark .main .comm-live-side { background-color: #0f2138; }
body.staffdark .main .calldir-field select,
body.staffdark .main .calldir-static { background-color: #0a1626; color: var(--text-heading); border-color: rgba(255,255,255,.16); }
body.staffdark .main .mat-admin-add { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
body.staffdark .main .mat-kind { background: #0f2138; border-color: rgba(255,255,255,.16); color: var(--text-muted); }
body.staffdark .main .mat-kind:hover { background: #16294a; color: #fff; }
body.staffdark .main .mat-arow,
body.staffdark .main .mat-card { background: #0f2138; border-color: rgba(255,255,255,.12); }
body.staffdark .main .mat-cls-list { background: #0a1626; border-color: rgba(255,255,255,.16); }
body.staffdark .main .mat-preview-note { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.35); color: #bae6fd; }
body.staffdark .main .mat-vis.off { background: rgba(255,255,255,.08); color: #94a3b8; }
body.staffdark .main .tw-linkbox { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
body.staffdark .main .tw-linkbox input { background: #0a1626; color: var(--text-muted); }
body.staffdark .main .tw-doc { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }

/* ── Internal staff chat (Communication → Chat) ───────────────────────────────
   ONE dark design for every portal/department (self-contained colors, never
   themed by the surrounding portal). Full-screen when the Chat tab is active. */
/* On-screen popup for an incoming chat message (top-right, above everything).
   Same dark chat design; slides in, auto-hides, click = open the conversation. */
.chat-notif { position: fixed; top: 18px; right: 18px; z-index: 120; display: flex; gap: .7rem; align-items: flex-start;
    width: 340px; max-width: calc(100vw - 36px); padding: .8rem .9rem; border-radius: 14px; cursor: pointer;
    background: #14141f; color: #e6e6f0; border: 1px solid rgba(124,92,255,.45);
    box-shadow: 0 18px 50px rgba(0,0,0,.5); opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .3s; }
.chat-notif.show { opacity: 1; transform: translateY(0); }
.chat-notif:hover { border-color: #7c5cff; }
.chat-notif .chat-ava { flex: 0 0 auto; }
.chat-notif-txt { flex: 1; min-width: 0; }
.chat-notif-title { font-weight: 700; font-size: .88rem; color: #fff; }
.chat-notif-name { font-size: .76rem; color: #b9b9cd; margin-top: 1px; }
.chat-notif-body { font-size: .82rem; color: #c9c9dd; margin-top: .3rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.chat-notif-x { flex: 0 0 auto; border: 0; background: transparent; color: #8a8aa3; cursor: pointer; font-size: .85rem; padding: .1rem .2rem; }
.chat-notif-x:hover { color: #fff; }

.comm-head { position: relative; }
.comm-head-actions { position: absolute; top: 2px; right: 0; display: flex; gap: .5rem; align-items: center; }
/* Chat tab fills the WHOLE working area exactly (like a broadcast screen) in EVERY
   portal — admin and all department shells share the same #mainArea container. The
   wrapper flexes to the full height of #mainArea and the scroller itself is locked
   (:has) so the page can never scroll — only the conversation list and the message
   thread scroll internally. Fits any screen. */
.main:has(> #commWrap.chat-full) { overflow: hidden; }
.comm-wrap.chat-full { display: flex; flex-direction: column; max-width: none; width: 100%; flex: 1 1 0; height: auto; min-height: 0; overflow: hidden; padding: 1rem 1.4rem 1.1rem; }
.comm-wrap.chat-full .comm-head h1 { font-size: 1.25rem; }
.comm-wrap.chat-full .comm-head p { display: none; }
.comm-wrap.chat-full .comm-tabs { margin-top: .6rem; }
.comm-wrap.chat-full #commBody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.comm-wrap.chat-full #commBody .chat-wrap { flex: 1; height: auto; min-height: 0; }

.chat-wrap { display: flex; gap: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; overflow: hidden; background: #0a0a12; color: #e6e6f0; height: min(72vh, 760px); min-height: 460px; }
.chat-side { width: 320px; min-width: 250px; flex: 0 0 auto; border-right: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; background: #0a0a12; }
.chat-side-head { display: flex; gap: .5rem; align-items: center; padding: .7rem .7rem .45rem; }
.chat-newbtn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 0; background: #7c5cff; color: #fff; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.chat-newbtn:hover { background: #6a4ae6; }
.chat-searchbox { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: #14141f; }
.chat-searchbox i { font-size: .8rem; color: #8a8aa3; }
.chat-searchbox input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #e6e6f0; }
.chat-searchbox input::placeholder { color: #6f6f8a; }
.chat-sliders { border: 0; background: transparent; color: #8a8aa3; cursor: pointer; padding: 0 .1rem; font-size: .85rem; }
.chat-sliders:hover { color: #c4b5fd; }
.chat-filters { display: flex; gap: .4rem; align-items: center; padding: .2rem .7rem .6rem; flex-wrap: wrap; }
.chat-fpill { border: 1px solid rgba(255,255,255,.14); background: #14141f; color: #b9b9cd; border-radius: 999px; padding: .3rem .85rem; font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.chat-fpill.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.chat-fdept { position: relative; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.14); background: #14141f; border-radius: 999px; padding: 0 .7rem 0 0; }
.chat-fdept.on { border-color: var(--emerald); background: rgba(16,185,129,.18); }
.chat-fdept select { appearance: none; -webkit-appearance: none; border: 0; outline: none; background: transparent; color: #b9b9cd; font: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .3rem .3rem .85rem; cursor: pointer; max-width: 150px; }
.chat-fdept select option { background: #14141f; color: #e6e6f0; }
.chat-fdept i { font-size: .6rem; color: #8a8aa3; pointer-events: none; }
.chat-convs { flex: 1; overflow-y: auto; padding: .25rem .45rem .6rem; }
.chat-sideempty { padding: 1.4rem 1rem; text-align: center; color: #8a8aa3; font-size: .9rem; line-height: 1.5; }
.chat-conv { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .6rem; cursor: pointer; border-radius: 12px; margin-bottom: 2px; }
.chat-conv:hover { background: rgba(255,255,255,.05); }
.chat-conv.on { background: linear-gradient(135deg, rgba(109,40,217,.55), rgba(76,29,149,.45)); }
.chat-ava { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; background: #334; }
.chat-ava.lg { width: 46px; height: 46px; }
.chat-ava.tone-violet { background: linear-gradient(135deg,#7c3aed,#4f46e5); }
.chat-ava.tone-blue   { background: linear-gradient(135deg,#2563eb,#0ea5e9); }
.chat-ava.tone-green  { background: linear-gradient(135deg,#059669,#10b981); }
.chat-ava.tone-pink   { background: linear-gradient(135deg,#db2777,#ef4444); }
.chat-ava.tone-orange { background: linear-gradient(135deg,#ea580c,#f59e0b); }
.chat-ava.tone-cyan   { background: linear-gradient(135deg,#0891b2,#06b6d4); }
.chat-ava.tone-amber  { background: linear-gradient(135deg,#d97706,#facc15); }
.chat-ava.tone-slate  { background: linear-gradient(135deg,#334155,#64748b); }
.chat-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #0a0a12; }
.chat-convmid { flex: 1; min-width: 0; }
.chat-convtop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.chat-convname { font-weight: 700; font-size: .92rem; color: #f2f2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-convagent { font-size: .76rem; color: #9a9ab3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-convrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1px; }
.chat-convprev { flex: 1; min-width: 0; font-size: .8rem; color: #8a8aa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv.on .chat-convagent, .chat-conv.on .chat-convprev { color: #d6ccf5; }
.chat-convtime { flex: 0 0 auto; font-size: .72rem; color: #7d7d97; }
.chat-conv.on .chat-convtime { color: #d6ccf5; }
.chat-pill { flex: 0 0 auto; background: #7c3aed; color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 700; min-width: 18px; text-align: center; padding: .12rem .4rem; }
.chat-dim { color: #7d7d97; font-style: italic; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #0d0d16; border-left: 1px solid rgba(255,255,255,.04); }
.chat-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; color: #8a8aa3; }
.chat-none i { font-size: 2.2rem; opacity: .5; }
.chat-none.small { padding: 1rem; }
.chat-thread-head { display: flex; gap: .7rem; align-items: center; padding: .8rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.09); background: #0a0a12; }
.chat-threadsub { font-size: .8rem; color: #9a9ab3; margin-top: 1px; }
.chat-onlinetxt { color: #22c55e; font-weight: 600; }
.chat-onlinedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin: 0 2px 1px 4px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.chat-more { text-align: center; padding-bottom: .5rem; }
.chat-day { text-align: center; margin: .6rem 0 .4rem; }
.chat-day span { font-size: .74rem; color: #b9b9cd; background: #191926; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: .22rem .95rem; }
.chat-msg { display: flex; align-items: flex-end; gap: .55rem; }
.chat-msg.mine { justify-content: flex-end; }
.chat-msgava { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; font-weight: 700; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.chat-bubble { max-width: min(68%, 560px); background: #1b1b28; border: 1px solid rgba(255,255,255,.05); border-radius: 16px 16px 16px 4px; padding: .55rem .8rem .45rem; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; color: #ececf4; }
.chat-msg.mine .chat-bubble { background: linear-gradient(135deg,#6d28d9,#4f46e5); border-color: transparent; color: #fff; border-radius: 16px 16px 4px 16px; }
.chat-meta { display: inline-block; float: right; font-size: .68rem; opacity: .65; margin: .45rem 0 0 .7rem; }
.chat-ticks { margin-left: .35rem; letter-spacing: -3px; }
.chat-ticks.read { color: #7dd3fc; }
.chat-att { display: block; cursor: zoom-in; margin: .15rem 0 .35rem; }
.chat-att img { max-width: 260px; max-height: 240px; border-radius: 10px; display: block; }
.chat-attachprev { display: flex; align-items: center; gap: .6rem; margin: 0 1rem; padding: .45rem .6rem; background: #14141f; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.chat-attachprev img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.chat-attachprev span { flex: 1; min-width: 0; font-size: .8rem; color: #b9b9cd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attachprev button { border: 0; background: transparent; color: #8a8aa3; font-size: 1.1rem; cursor: pointer; }
.chat-attachprev button:hover { color: #f87171; }
.chat-compose { position: relative; display: flex; gap: .6rem; align-items: flex-end; padding: .8rem 1rem 1rem; }
.chat-composebar { flex: 1; display: flex; gap: .35rem; align-items: flex-end; background: #14141f; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .3rem .45rem; }
.chat-composebar:focus-within { border-color: #7c3aed; }
.chat-composebar textarea { flex: 1; resize: none; max-height: 120px; border: 0; outline: none; background: transparent; padding: .42rem .3rem; font: inherit; color: #ececf4; }
.chat-composebar textarea::placeholder { color: #6f6f8a; }
.chat-iconbtn { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: #9a9ab3; font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-iconbtn:hover { background: rgba(255,255,255,.07); color: #e6e6f0; }
.chat-sendbtn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(124,58,237,.4); }
.chat-sendbtn:hover { filter: brightness(1.1); }
.chat-emojipop { position: absolute; bottom: calc(100% + 2px); right: 60px; background: #191926; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: .5rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: .15rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 30; }
.chat-emojipop button { border: 0; background: transparent; font-size: 1.15rem; padding: .25rem; border-radius: 8px; cursor: pointer; }
.chat-emojipop button:hover { background: rgba(255,255,255,.09); }
.chat-imgview { position: fixed; inset: 0; z-index: 1000; background: rgba(5,5,10,.9); display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
.chat-imgview img { max-width: 92vw; max-height: 88vh; border-radius: 12px; }
.chat-imgview-x { position: absolute; top: 14px; right: 20px; border: 0; background: transparent; color: #fff; font-size: 2rem; cursor: pointer; }
.chat-newsearch { padding: .8rem 1rem .3rem; }
.chat-newlist { flex: 1; overflow-y: auto; padding: .4rem .8rem 1rem; }
.chat-newgroup-h { display: flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a8aa3; padding: .8rem .4rem .35rem; }
.chat-newperson { display: flex; gap: .65rem; align-items: center; padding: .55rem .6rem; border-radius: 12px; cursor: pointer; }
.chat-newperson:hover { background: rgba(124,58,237,.16); }
.chat-newperson .chat-convagent { font-size: .74rem; }
.chat-newgo { color: #6f6f8a; font-size: .75rem; }
/* Group conversations */
.chat-msgsender { font-size: .72rem; font-weight: 700; color: #b7a6f7; margin-bottom: .15rem; }
.chat-newgroupbtn { margin-left: auto; white-space: nowrap; }
.chat-grpperson input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #7c3aed; cursor: pointer; }
.chat-grpname { display: block; width: 100%; margin-bottom: .55rem; border: 1px solid rgba(255,255,255,.14); background: #14141f; color: #e6e6f0; border-radius: 10px; padding: .55rem .8rem; font: inherit; font-size: .88rem; outline: none; }
.chat-grpname:focus { border-color: #7c3aed; }
@media (max-width: 760px) {
    .chat-wrap { flex-direction: column; height: auto; }
    .chat-side { width: auto; min-width: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
    .chat-convs { max-height: 260px; }
    .chat-main { min-height: 420px; }
    .comm-head-actions { position: static; margin-top: .6rem; }
    /* Full-screen chat still fits exactly on phones: the sidebar keeps a capped
       list and the thread flexes into whatever height is left — no page scroll. */
    .comm-wrap.chat-full #commBody .chat-wrap { flex-direction: column; }
    .comm-wrap.chat-full .chat-side { flex: 0 0 auto; }
    .comm-wrap.chat-full .chat-convs { max-height: 30vh; }
    .comm-wrap.chat-full .chat-main { flex: 1 1 auto; min-height: 0; }
}


/* ════════════ STUDENT OVERDUE DASHBOARD (dark) ════════════
   The redesigned "payment overdue / suspended for non-payment" student screen:
   dark navy full-page dashboard — greeting header, red alert hero (overdue amount
   + days pill + Pay Now expander), Account Summary + What-happens-next cards,
   contact block. Desktop = two-column grid; phone = compact single column. */
/* The dashboard fills EXACTLY one viewport — no page scroll on phone or desktop.
   Sections compress via vh-based clamp() sizing; overflow:auto is only a safety
   valve for unusually short screens (no scrollbar appears when everything fits). */
.sod-view { display: flex; background: #070d1c; height: 100vh; height: 100dvh;
    overflow: auto; box-sizing: border-box;
    padding: clamp(8px, 1.4vh, 20px) clamp(10px, 2vw, 20px); }
.sod-wrap { width: 100%; max-width: 1000px; margin: auto; display: flex;
    flex-direction: column; gap: clamp(.4rem, 1.2vh, .95rem); min-height: 0; }
.sod-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sod-hi h1 { font-family: 'Plus Jakarta Sans', sans-serif; color: #fff;
    font-size: clamp(1.08rem, 2.3vh, 1.55rem); font-weight: 800;
    letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.sod-wave { font-size: 1.35rem; }
.sod-hi-sub { color: #8b9bb8; font-size: .9rem; margin-top: .15rem; }
.sod-headright { display: flex; align-items: center; gap: .6rem; }
.sod-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; color: #fff; font-weight: 800;
    font-size: .95rem; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 6px 18px rgba(239,68,68,.35); }
.sod-back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06); color: #8b9bb8; font-size: .95rem; transition: background .15s, color .15s; }
.sod-back:hover { background: rgba(255,255,255,.13); color: #fff; }

.sod-hero { border: 1px solid rgba(239,68,68,.45); border-radius: 20px;
    padding: clamp(.75rem, 1.7vh, 1.4rem) clamp(.85rem, 1.6vw, 1.5rem);
    background: linear-gradient(120deg, rgba(127,29,29,.38), rgba(13,21,38,.4) 60%), #10182b;
    box-shadow: 0 0 46px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.05); }
.sod-hero-main { display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1.15rem); }
/* Attention-grabbing warning sign: slow gentle shake + blinking red glow. */
@keyframes sodShake {
    0%, 60%, 100% { transform: rotate(0); }
    64% { transform: rotate(-8deg); }
    68% { transform: rotate(7deg); }
    72% { transform: rotate(-6deg); }
    76% { transform: rotate(5deg); }
    80% { transform: rotate(-3deg); }
    84% { transform: rotate(2deg); }
    88% { transform: rotate(-1deg); }
    92% { transform: rotate(0); }
}
@keyframes sodBlink {
    0%, 100% { box-shadow: 0 0 14px 2px rgba(239,68,68,.35); opacity: .92; }
    50% { box-shadow: 0 0 34px 12px rgba(239,68,68,.55); opacity: 1; }
}
.sod-hero-ico { width: clamp(46px, 6.5vh, 62px); height: clamp(46px, 6.5vh, 62px);
    flex: none; border-radius: 50%; color: #fff; font-size: clamp(1.05rem, 2vh, 1.45rem);
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #ef4444, #7f1d1d); box-shadow: 0 0 26px rgba(239,68,68,.5);
    animation: sodShake 2.8s ease-in-out infinite, sodBlink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sod-hero-ico { animation: none; } }
.sod-hero-msg { flex: 1 1 auto; min-width: 0; }
.sod-hero-msg h2 { color: #fff; font-size: clamp(1rem, 2vh, 1.28rem); font-weight: 800; margin: 0 0 .3rem; letter-spacing: -.01em; }
.sod-hero-msg p { color: #b6c2d9; font-size: clamp(.78rem, 1.5vh, .92rem); margin: 0; line-height: 1.45; }
/* Mock hero (SAME on phone and desktop): two centered stat columns split by a
   divider, then the full-width blocked pill, PAY NOW and View Payment Details. */
.sod-stats { display: grid; grid-template-columns: 1fr 1fr; text-align: center;
    margin-top: clamp(.55rem, 1.3vh, 1rem); padding-top: clamp(.5rem, 1.2vh, .9rem);
    border-top: 1px solid rgba(255,255,255,.08); }
.sod-stat { min-width: 0; }
.sod-stat-days { border-left: 1px solid rgba(255,255,255,.08); }
.sod-amt-label { color: #8b9bb8; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sod-amt { color: #ef4444; font-size: clamp(1.35rem, 3vh, 1.95rem); font-weight: 800; line-height: 1.1; margin-top: .25rem;
    font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.sod-days-pill { display: flex; align-items: center; justify-content: center; gap: .45rem;
    width: 100%; box-sizing: border-box; background: rgba(239,68,68,.14);
    border: 1px solid rgba(239,68,68,.4); color: #fca5a5; border-radius: 999px;
    padding: clamp(.3rem, .8vh, .45rem) .8rem; margin-top: clamp(.5rem, 1.2vh, .9rem);
    font-size: clamp(.7rem, 1.4vh, .8rem); font-weight: 700; white-space: normal; text-align: center; }
.sod-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex: none;
    box-shadow: 0 0 8px rgba(239,68,68,.9); }
.sod-paybtn { width: 100%; border: none; border-radius: 12px; color: #fff; font-weight: 800;
    font-size: clamp(.92rem, 1.8vh, 1.05rem); letter-spacing: .03em;
    padding: clamp(.6rem, 1.3vh, .85rem) 1rem; display: flex; align-items: center;
    justify-content: center; gap: .55rem; font-family: inherit;
    margin-top: clamp(.55rem, 1.3vh, 1rem);
    background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 10px 26px rgba(239,68,68,.35);
    transition: filter .15s, transform .1s; }
.sod-paybtn:hover { filter: brightness(1.08); }
.sod-paybtn:active { transform: translateY(1px); }
/* Full-width outlined "View Payment Details" button (mock) — opens the pay sheet. */
.sod-detailsbtn { width: 100%; margin-top: clamp(.55rem, 1.2vh, .9rem); border-radius: 12px;
    border: 1px solid rgba(239,68,68,.5); background: rgba(239,68,68,.08); color: #f87171;
    font-weight: 700; font-size: clamp(.82rem, 1.5vh, .92rem); font-family: inherit;
    padding: clamp(.55rem, 1.2vh, .75rem) 1rem; display: flex; align-items: center;
    justify-content: center; gap: .55rem; transition: background .15s, color .15s; }
.sod-detailsbtn:hover { background: rgba(239,68,68,.16); color: #fca5a5; }

/* Payment overlay sheet — Pay Now / View Payment Details open it; the dashboard
   behind stays a single non-scrolling screen, only the sheet scrolls internally. */
.sod-payoverlay { position: fixed; inset: 0; z-index: 400; background: rgba(3,7,18,.72);
    backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; }
.sod-payoverlay[hidden] { display: none; }
.sod-paysheet { background: #0d1526; border: 1px solid rgba(255,255,255,.12); width: 100%;
    max-width: 640px; max-height: 86vh; max-height: 86dvh; overflow: auto; box-sizing: border-box;
    border-radius: 20px 20px 0 0; padding: 1.1rem 1.1rem 1.3rem;
    animation: sodSheetUp .22s ease-out; }
@keyframes sodSheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) {
    .sod-payoverlay { align-items: center; padding: 2rem; }
    .sod-paysheet { border-radius: 20px; }
}
.sod-paysheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.sod-paysheet-head h3 { color: #fff; font-size: 1.05rem; font-weight: 800; margin: 0;
    display: flex; align-items: center; gap: .55rem; }
.sod-paysheet-head h3 i { color: #f87171; }
.sod-paysheet-close { width: 36px; height: 36px; flex: none; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #8b9bb8;
    font-size: .95rem; transition: background .15s, color .15s; }
.sod-paysheet-close:hover { background: rgba(255,255,255,.13); color: #fff; }
.sod-paysheet-due { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); border-radius: 12px;
    padding: .65rem .9rem; margin-bottom: .9rem; }
.sod-paysheet-due span { color: #8b9bb8; font-size: .8rem; font-weight: 700; }
.sod-paysheet-due b { color: #f87171; font-size: 1.25rem; font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif; }
.sod-paysheet-due em { color: #fca5a5; font-size: .78rem; font-style: normal; font-weight: 700; }

.sod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.5rem, 1.2vh, 1.15rem); }
.sod-card { background: #0d1526; border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
    padding: clamp(.7rem, 1.5vh, 1.2rem) clamp(.75rem, 1.4vw, 1.3rem); min-width: 0; }
.sod-card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: clamp(.45rem, 1vh, .85rem); }
.sod-card-head h3 { color: #fff; font-size: 1.02rem; font-weight: 800; margin: 0; flex: 1 1 auto; }
.sod-card-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: .95rem; }
.sod-ico-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.sod-ico-amber { background: rgba(245,158,11,.16); color: #fbbf24; }
.sod-badge { flex: none; background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.4); color: #f87171;
    font-size: .64rem; font-weight: 800; letter-spacing: .08em; border-radius: 999px; padding: .24rem .6rem; }
.sod-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: clamp(.32rem, .75vh, .58rem) 0; border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: clamp(.78rem, 1.5vh, .9rem); }
.sod-row:last-child { border-bottom: none; }
.sod-row span { color: #8b9bb8; }
.sod-row b { color: #e7edf7; font-weight: 700; text-align: right; }
.sod-red { color: #f87171 !important; }
.sod-next { display: flex; flex-direction: column; gap: clamp(.5rem, 1.1vh, .95rem); }
.sod-next-row { display: flex; align-items: flex-start; gap: .8rem; }
.sod-next-ico { width: clamp(30px, 4vh, 36px); height: clamp(30px, 4vh, 36px);
    flex: none; border-radius: 10px; background: rgba(148,163,184,.12);
    color: #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.sod-ni-amber { background: rgba(245,158,11,.14); color: #fbbf24; }
.sod-ni-green { background: rgba(34,197,94,.14); color: #4ade80; }
.sod-next-row b { display: block; color: #e7edf7; font-size: clamp(.78rem, 1.5vh, .9rem); font-weight: 700; }
.sod-next-row span { display: block; color: #8b9bb8; font-size: clamp(.7rem, 1.35vh, .8rem); margin-top: .1rem; line-height: 1.35; }

/* Dark re-skin of the shared blocks reused inside the dashboard */
.sod-view .att-empty { color: #8b9bb8; margin-top: 1rem; }
.sod-view .att-methods-sep span { color: #e7edf7; }
.sod-view .att-methods-sep::before, .sod-view .att-methods-sep::after { background: rgba(255,255,255,.1); }
.sod-view .pmacc { background: #0d1526; border-color: rgba(255,255,255,.12); box-shadow: none; }
.sod-view .pmacc.open { border-color: rgba(59,130,246,.6); }
.sod-view .pmacc-head:hover { background: rgba(255,255,255,.04); }
.sod-view .pmacc-name { color: #fff; }
.sod-view .pmacc-desc { color: #8b9bb8; }
.sod-view .pmacc-payto span { color: #64748b; }
.sod-view .pmacc-payto b { color: #e7edf7; }
.sod-view .pmacc-chev { color: #64748b; }
.sod-view .pmacc-panel-inner { border-top-color: rgba(255,255,255,.08); }
.sod-view .pmacc-chiplabel { color: #8b9bb8; }
.sod-view .pmacc-chip { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.4); color: #93c5fd; }
.sod-view .pmacc-chip:hover { background: rgba(59,130,246,.22); }
.sod-view .pmacc-grid { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.sod-view .pmacc-field-label { color: #64748b; }
.sod-view .pmacc-field-val { color: #e7edf7; }
.sod-view .pmacc-field-val:hover { color: #93c5fd; }
.sod-view .pmacc-upload { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.14); }
.sod-view .pmacc-upload-label { color: #e7edf7; }
.sod-view .pmacc-file { color: #8b9bb8; }
.sod-view .pmacc-fname { color: #8b9bb8; }
.sod-view .att-proof-pending { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3); }
.sod-view .att-proof-pending .att-proof-title { color: #e7edf7; }
.sod-view .att-proof-pending .att-proof-sub { color: #8b9bb8; }
.sod-view .att-contact { background: #0d1526; border-color: rgba(255,255,255,.08); margin-top: 0;
    padding: clamp(.6rem, 1.4vh, 1.3rem) 1rem clamp(.65rem, 1.5vh, 1.3rem); }
.sod-view .att-contact-head { margin-bottom: clamp(.4rem, 1vh, 1rem); }
.sod-view .att-contact-badge { display: none; }
.sod-view .att-contact-title { color: #fff; font-size: clamp(1rem, 2vh, 1.4rem); }
.sod-view .att-contact-sub { color: #8b9bb8; font-size: clamp(.72rem, 1.4vh, .88rem); margin-top: .2rem; }
.sod-view .att-contact-list { gap: clamp(.9rem, 3vw, 2rem); }
.sod-view .att-contact-btn { padding: 0; }
.sod-view .att-contact-ic { width: clamp(44px, 6vh, 58px); height: clamp(44px, 6vh, 58px);
    font-size: clamp(1.05rem, 2vh, 1.4rem); }
.sod-view .att-contact-label { color: #e7edf7; }
.sod-view .att-contact-note, .sod-view .att-contact-val { color: #8b9bb8; }

/* Tablet & phone: compact everything so the whole dashboard fits one phone screen
   with NO scrolling (mock). The phone mock shows ONLY the Account Summary card, so
   the "What happens next?" companion card is hidden and the grid goes single column. */
@media (max-width: 860px) {
    .sod-grid { grid-template-columns: 1fr; gap: .55rem; }
    .sod-card-next { display: none; }
    .sod-amt { font-size: 1.6rem; }
}
@media (max-width: 720px) {
    .sod-hi h1 { font-size: clamp(1rem, 2.1vh, 1.25rem); }
    .sod-hi-sub { font-size: clamp(.68rem, 1.35vh, .8rem); }
    .sod-avatar { width: clamp(32px, 4.4vh, 38px); height: clamp(32px, 4.4vh, 38px); font-size: .82rem; }
    .sod-back { width: 36px; height: 36px; }
    .sod-hero { border-radius: 16px; }
    .sod-hero-msg h2 { font-size: clamp(.92rem, 1.9vh, 1.05rem); }
    .sod-hero-msg p { font-size: clamp(.72rem, 1.4vh, .82rem); }
    .sod-amt { font-size: clamp(1.15rem, 2.6vh, 1.5rem); }
    .sod-paybtn { padding: clamp(.55rem, 1.2vh, .8rem) 1.1rem; font-size: .9rem; }
    .sod-card { border-radius: 15px; }
    .sod-card-head { gap: .5rem; }
    .sod-card-head h3 { font-size: clamp(.8rem, 1.6vh, .95rem); }
    .sod-card-ico { width: clamp(28px, 3.8vh, 34px); height: clamp(28px, 3.8vh, 34px); font-size: .8rem; border-radius: 9px; }
    .sod-badge { font-size: .56rem; padding: .18rem .45rem; }
    .sod-row { font-size: clamp(.68rem, 1.35vh, .8rem); gap: .5rem; }
    .sod-next-row { gap: .55rem; }
    .sod-next-row b { font-size: clamp(.68rem, 1.35vh, .8rem); }
    .sod-next-row span { font-size: clamp(.62rem, 1.25vh, .72rem); }
    .sod-view .att-contact-ic { width: clamp(38px, 5.2vh, 48px); height: clamp(38px, 5.2vh, 48px);
        font-size: clamp(.95rem, 1.8vh, 1.2rem); }
    .sod-view .att-contact-list { gap: clamp(.7rem, 5vw, 1.4rem); }
}
@media (max-width: 460px) {
    .sod-hero-main { gap: .6rem; }
    .sod-days-pill { font-size: clamp(.6rem, 1.25vh, .7rem); padding: .22rem .55rem; }
    .sod-stats { margin-top: .35rem; padding-top: .6rem; }
    .sod-detailsbtn { font-size: .78rem; }
    .sod-view .att-contact { padding-left: .6rem; padding-right: .6rem; }
}

/* ── Student post-payment "Thank You" screen (.sty-*) ─────────────────────────
   Dark full-screen confirmation shown after a proof submission or a successful
   card payment (rides on .sod-view for the dark palette + contact restyle). */
.sty-view { text-align: center; }
.sty-wrap { max-width: 1000px; gap: clamp(.7rem, 1.8vh, 1.2rem); }
.sty-hero { display: flex; flex-direction: column; align-items: center; }
.sty-hero-art { position: relative; width: clamp(120px, 18vh, 170px); height: clamp(120px, 18vh, 170px);
    margin-bottom: clamp(.6rem, 1.6vh, 1.1rem); }
.sty-hero-ico { position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #274690 0%, #16244d 58%, #101a38 100%);
    box-shadow: 0 0 0 1px rgba(99, 140, 255, .16), 0 14px 42px rgba(20, 45, 120, .45);
    display: flex; align-items: center; justify-content: center; }
.sty-hero-ico > i { font-size: clamp(2.6rem, 7vh, 4rem); color: #eef3ff;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.sty-check { position: absolute; right: 14%; bottom: 12%;
    width: clamp(34px, 5.4vh, 48px); height: clamp(34px, 5.4vh, 48px); border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(.95rem, 2.2vh, 1.3rem);
    box-shadow: 0 6px 18px rgba(34, 197, 94, .45), 0 0 0 4px #0a1228; }
.sty-spark { position: absolute; color: #93c5fd; opacity: .9; }
.sty-spark i { font-size: .8rem; }
.sty-spark-a { top: 4%; left: -14%; color: #86efac; }
.sty-spark-a i { font-size: 1.05rem; }
.sty-spark-b { top: -8%; right: -6%; }
.sty-spark-c { bottom: 2%; left: -22%; color: #60a5fa; }
.sty-spark-c i { font-size: .65rem; }
.sty-spark-d { bottom: -10%; right: -18%; color: #86efac; }
.sty-spark-d i { font-size: .7rem; }
.sty-title { font-family: 'Plus Jakarta Sans', sans-serif; color: #fff; margin: 0;
    font-size: clamp(1.9rem, 5vh, 3rem); font-weight: 800; letter-spacing: -.02em; }
.sty-blue { color: #3b82f6; font-weight: 700; margin-top: .45rem;
    font-size: clamp(.95rem, 2.2vh, 1.25rem); }
.sty-sub { color: #c6d2e8; margin-top: .5rem; max-width: 34rem;
    font-size: clamp(.85rem, 1.9vh, 1.05rem); line-height: 1.45; }
.sty-card { background: #0d1526; border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px; padding: clamp(.9rem, 2.4vh, 1.6rem); }
.sty-patience { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.6rem);
    text-align: left; }
.sty-pat-left { flex: 1.35; display: flex; gap: clamp(.7rem, 1.8vw, 1.1rem); align-items: flex-start; }
.sty-pat-right { flex: 1; display: flex; flex-direction: column; align-items: flex-start;
    gap: .55rem; }
.sty-pat-ico { flex: none; width: clamp(44px, 6.4vh, 60px); height: clamp(44px, 6.4vh, 60px);
    border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.1rem, 2.6vh, 1.5rem); box-shadow: 0 8px 22px rgba(59, 130, 246, .35); }
.sty-pat-cal { border-radius: 14px; }
.sty-pat-title { color: #fff; font-weight: 800; font-size: clamp(.95rem, 2.1vh, 1.15rem); }
.sty-pat-hours { color: #3b82f6; font-weight: 800; font-size: clamp(1.2rem, 2.9vh, 1.7rem);
    margin-top: .1rem; }
.sty-pat-note { color: #b9c6de; font-size: clamp(.78rem, 1.7vh, .92rem); line-height: 1.45;
    margin-top: .35rem; }
.sty-pat-div { align-self: stretch; width: 1px; background: rgba(255, 255, 255, .1); }
.sty-back { margin: 0 auto; background: none; border: 1px solid rgba(255, 255, 255, .18);
    color: #c6d2e8; border-radius: 999px; padding: .5rem 1.1rem; font-size: .85rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.sty-back:hover { background: rgba(255, 255, 255, .06); color: #fff; }
@media (max-width: 640px) {
    .sty-patience { flex-direction: column; align-items: stretch; }
    .sty-pat-div { width: auto; height: 1px; }
    .sty-pat-right { flex-direction: row; align-items: flex-start; gap: .8rem; }
    .sty-pat-right .sty-pat-note { margin-top: .15rem; }
}

/* Sign out from the pinned Thank You screen (top-right, same pill as the overdue dash) */
.sty-wrap { position: relative; }
.sty-signout { position: absolute; top: 0; right: 0; z-index: 2; }
@media (max-width: 460px) { .sty-signout { top: .2rem; right: .2rem; } }

/* ── ACCESS REMOVED screen (.sen-*) ────────────────────────────────────────
   Dark full-page screen for students whose action flag is ended (churned /
   cancelled / refund — owner mock, July 2026): hero video icon with a red X
   badge, big "Access Removed" title, cancelled-by-administration copy, red
   ACCOUNT STATUS | CANCELLED-ON stat card, contact cards, IMPORTANT note,
   security bar and a LOG OUT pill. ONE layout at EVERY width (phone looks
   the same as Windows — owner rule): a single centered column, vh-clamped so
   the whole page fits 100dvh with NO scrolling (overflow:auto is only a
   failsafe for very short screens). */
.sen-view { height: 100vh; height: 100dvh; overflow: auto;
    padding: clamp(8px, 1.6vh, 20px) clamp(10px, 2.5vw, 24px); }
.sen-wrap { max-width: 720px; width: 100%; margin: auto;
    gap: clamp(.45rem, 1.4vh, .95rem); }
.sen-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.sen-view .sod-avatar { background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 6px 18px rgba(59,130,246,.35); }
.sen-name { color: #fff; font-weight: 800; font-size: clamp(.95rem, 1.9vh, 1.2rem);
    line-height: 1.15; }
.sen-crumb { color: #60a5fa; font-size: clamp(.6rem, 1.3vh, .68rem); font-weight: 800;
    letter-spacing: .1em; margin-top: .15rem; }
.sen-help { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
    color: #e7edf7; font: inherit; font-weight: 700; font-size: clamp(.72rem, 1.5vh, .85rem);
    padding: .42rem .85rem; cursor: pointer; transition: background .15s; white-space: nowrap; }
.sen-help:hover { background: rgba(255,255,255,.13); }
.sen-help i { color: #8b9bb8; }
.sen-hero { display: flex; flex-direction: column; align-items: center;
    gap: clamp(.35rem, 1.1vh, .7rem); padding-top: clamp(.1rem, .8vh, .5rem); }
.sen-hero-ico { position: relative; width: clamp(62px, 10.5vh, 104px); height: clamp(62px, 10.5vh, 104px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: clamp(1.6rem, 4.2vh, 2.5rem);
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 0 0 8px rgba(59,130,246,.14), 0 0 50px rgba(59,130,246,.45); }
.sen-hero-ban { position: absolute; right: -5px; bottom: -2px; width: clamp(26px, 4.2vh, 40px);
    height: clamp(26px, 4.2vh, 40px); border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: #fff; font-size: clamp(.85rem, 2vh, 1.2rem);
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border: 3px solid #070d1c; box-shadow: 0 6px 18px rgba(239,68,68,.45); }
.sen-title { font-family: "Plus Jakarta Sans", sans-serif; margin: 0; color: #fff;
    font-weight: 800; letter-spacing: .02em; text-align: center;
    font-size: clamp(1.55rem, 4.4vh, 2.5rem); line-height: 1.05; }
.sen-title span { color: #ef4444; }
.sen-headline { color: #fff; font-weight: 800; text-align: center;
    font-size: clamp(.95rem, 2.1vh, 1.15rem); }
.sen-sub { margin: 0; text-align: center; color: #b9c5da;
    font-size: clamp(.82rem, 1.8vh, .98rem); line-height: 1.4; }
.sen-copy { margin: 0; text-align: center; color: #d7dfee;
    font-size: clamp(.8rem, 1.7vh, .95rem); line-height: 1.45; max-width: 36em;
    align-self: center; }
.sen-copy b { color: #60a5fa; font-weight: 800; }
.sen-status { display: flex; align-items: center; justify-content: center;
    gap: clamp(.8rem, 3.5vw, 1.8rem); border-radius: 16px;
    border: 1px solid rgba(239,68,68,.55); background: rgba(239,68,68,.06);
    box-shadow: 0 0 24px rgba(239,68,68,.12) inset, 0 0 18px rgba(239,68,68,.12);
    padding: clamp(.55rem, 1.5vh, .95rem) clamp(.8rem, 2.5vw, 1.3rem); }
.sen-stat { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, .75rem); min-width: 0; }
.sen-stat-ico { flex: none; width: clamp(36px, 5.4vh, 48px); height: clamp(36px, 5.4vh, 48px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #ef4444; font-size: clamp(.9rem, 2vh, 1.2rem);
    background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); }
.sen-stat-div { width: 1px; align-self: stretch; background: rgba(255,255,255,.14); }
.sen-status-l { color: #b9c5da; font-size: clamp(.6rem, 1.3vh, .74rem); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sen-status-v { color: #ef4444; font-weight: 800; letter-spacing: .04em;
    font-size: clamp(.95rem, 2.1vh, 1.25rem); margin-top: .1rem; white-space: nowrap; }
.sen-status-date { color: #fff; }
/* Contact block: compact single row of icon cards, tightened for the one-screen fit. */
.sen-view .att-contact { padding: clamp(.55rem, 1.5vh, 1rem) clamp(.7rem, 2vw, 1.2rem); }
.sen-view .att-contact-head { margin-bottom: clamp(.3rem, .9vh, .7rem); }
.sen-view .att-contact-title { font-size: clamp(.95rem, 1.9vh, 1.25rem); }
.sen-view .att-contact-list { gap: clamp(.8rem, 3vw, 1.7rem); }

/* ── Blocked-screen contact grid (Paused Now + Service Ended) ────────────────
   Override the default horizontal row with a 2×2 card grid so the four
   contact options (Zoom, WhatsApp, Email, Call) look like the mockup. */
.sen-view .att-contact-list,
.spa-view .att-contact-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    justify-content: initial;
    max-width: none;
}
.sen-view .att-contact-btn,
.spa-view .att-contact-btn {
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 1rem .75rem .85rem;
    gap: .5rem;
    min-height: 110px;
    position: relative;
}
.sen-view .att-contact-btn:hover,
.spa-view .att-contact-btn:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-2px);
}
.sen-view .att-contact-ic,
.spa-view .att-contact-ic {
    width: 56px; height: 56px; border-radius: 50%; font-size: 1.3rem;
}
.sen-view .att-contact-txt,
.spa-view .att-contact-txt {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.sen-view .att-contact-label,
.spa-view .att-contact-label {
    color: #e2e8f0; font-size: .78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
}
.sen-view .att-contact-note,
.spa-view .att-contact-note {
    color: #8296ad; font-size: .7rem; display: block; text-align: center;
}
.sen-view .att-contact-val,
.spa-view .att-contact-val { display: none; }
.sen-view .att-contact-zbtn,
.spa-view .att-contact-zbtn { display: none; }
/* Per-button brand colors for the blocked screens */
.sen-view .att-contact-email .att-contact-ic,
.spa-view .att-contact-email .att-contact-ic {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.sen-view .att-contact-call .att-contact-ic,
.spa-view .att-contact-call .att-contact-ic {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}
/* Service Ended title: all-caps with flanking red lines */
.sen-ended .sen-title {
    font-size: clamp(1.5rem, 4vh, 2.2rem);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex; align-items: center; gap: .75rem;
}
.sen-ended .sen-title::before,
.sen-ended .sen-title::after {
    content: ''; flex: 1; height: 2px;
    background: linear-gradient(to right, transparent, #ef4444);
    border-radius: 2px; min-width: 20px;
}
.sen-ended .sen-title::after { background: linear-gradient(to left, transparent, #ef4444); }
/* Hero icon glow — shared base for both blocked screens */
.sen-hero-ico,
.spa-hero-ico {
    background: radial-gradient(circle at 50% 50%, rgba(59,130,246,.25) 0%, transparent 70%);
}
/* Paused: extra gold glow on the clock badge */
.spa-hero-clock { filter: drop-shadow(0 0 8px rgba(251,191,36,.7)); }
/* Service-Ended: extra red glow on the ban badge */
.sen-hero-ban { filter: drop-shadow(0 0 8px rgba(239,68,68,.8)); }
/* Service-Ended status card: glowing red border */
.sen-ended .sen-status {
    border-color: rgba(239,68,68,.55);
    background: rgba(239,68,68,.06);
    box-shadow: 0 0 18px rgba(239,68,68,.18);
}
.sen-ended .sen-stat-ico {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.35);
    color: #ef4444;
}
/* Paused status card: glowing gold border */
.spa-status {
    box-shadow: 0 0 18px rgba(251,191,36,.18);
}
/* Contact head on blocked screens: smaller badge, centre-aligned */
.sen-view .att-contact-badge,
.spa-view .att-contact-badge {
    background: rgba(255,255,255,.1);
    color: #93c5fd;
}
.sen-view .att-contact-title,
.spa-view .att-contact-title { color: #f1f5f9; font-size: 1rem; }
.sen-view .att-contact-sub,
.spa-view .att-contact-sub { color: #8296ad; font-size: .8rem; }
.sen-important { display: flex; align-items: center; gap: clamp(.6rem, 2vw, .9rem);
    border-radius: 14px; background: rgba(59,130,246,.07);
    border: 1px solid rgba(59,130,246,.3);
    padding: clamp(.5rem, 1.3vh, .8rem) clamp(.8rem, 2vw, 1.2rem); }
.sen-important-ico { flex: none; width: clamp(32px, 4.4vh, 42px); height: clamp(32px, 4.4vh, 42px);
    border-radius: 11px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: clamp(.85rem, 1.8vh, 1.05rem);
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 14px rgba(59,130,246,.35); }
.sen-important-t { color: #60a5fa; font-weight: 800; font-size: clamp(.64rem, 1.4vh, .78rem);
    letter-spacing: .08em; }
.sen-important-body p { margin: .15rem 0 0; color: #b9c5da;
    font-size: clamp(.74rem, 1.6vh, .88rem); line-height: 1.4; }
.sen-lockbar { display: flex; align-items: center; justify-content: center; gap: .6rem;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04); color: #b9c5da; font-weight: 600;
    font-size: clamp(.7rem, 1.5vh, .85rem); text-align: center;
    padding: clamp(.45rem, 1.2vh, .7rem) 1rem; }
.sen-lockbar i { color: #8b9bb8; flex: none; }
.sen-logout { align-self: center; display: inline-flex; align-items: center; gap: .55rem;
    border-radius: 999px; border: 1.5px solid rgba(239,68,68,.65);
    background: rgba(239,68,68,.08); color: #f87171; font: inherit; font-weight: 800;
    letter-spacing: .08em; font-size: clamp(.76rem, 1.6vh, .9rem);
    padding: clamp(.45rem, 1.2vh, .65rem) clamp(1.4rem, 5vw, 2.4rem);
    cursor: pointer; transition: background .15s; }
.sen-logout:hover { background: rgba(239,68,68,.16); }
@media (max-width: 460px) {
    .sen-help { font-size: .72rem; padding: .4rem .7rem; }
    .sen-status { flex-wrap: wrap; }
}

/* ── Paused Now screen (.spa-*) ─────────────────────────────────────────────
   Rides the .sen-view base (dark, 100dvh one-screen fit, vh-clamped sizes).
   Differences from the ended screen: blue pause hero icon with an orange clock
   badge, gold "Now" accent + gold status card with the paused-on date, and the
   IMPORTANT card sits in a right rail on desktop (≥1000px) per the owner mock,
   stacked below the contact cards on phones. */
.spa-grid { display: flex; flex-direction: column; gap: clamp(.55rem, 1.6vh, 1.1rem); min-height: 0; }
.spa-main { display: flex; flex-direction: column; gap: clamp(.55rem, 1.6vh, 1.1rem); min-width: 0; }
.spa-side { display: flex; flex-direction: column; min-width: 0; }
.spa-hero-ico { position: relative; width: clamp(62px, 10.5vh, 104px); height: clamp(62px, 10.5vh, 104px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #3b82f6, #1d4ed8 70%);
    border: clamp(4px, .8vh, 7px) solid rgba(59,130,246,.22);
    box-shadow: 0 0 clamp(18px, 4vh, 40px) rgba(59,130,246,.45);
    color: #fff; font-size: clamp(1.5rem, 3.4vh, 2.4rem); }
.spa-hero-clock { position: absolute; right: -5px; bottom: -2px;
    width: clamp(26px, 4.2vh, 40px); height: clamp(26px, 4.2vh, 40px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f59e0b; border: 3px solid #0b1533; color: #fff;
    font-size: clamp(.7rem, 1.6vh, 1rem); }
.spa-title span { color: #fbbf24; }
.spa-copy b { color: #fbbf24; }
.spa-status { border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.06);
    justify-content: center; text-align: left; }
.spa-stat-ico { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35);
    color: #fbbf24; }
.spa-status-v { color: #fbbf24; }
.spa-status-date { display: inline-flex; align-items: center; gap: .45rem; color: #d7dfee;
    font-size: clamp(.68rem, 1.5vh, .84rem); font-weight: 700; margin-top: .2rem; }
.spa-status-date i { color: #8b9bb8; }
.spa-important { align-items: flex-start; }
.spa-important .sen-important-body p + p { margin-top: clamp(.35rem, 1vh, .6rem);
    padding-top: clamp(.35rem, 1vh, .6rem); border-top: 1px solid rgba(255,255,255,.1); }
/* SERVICE ENDED (owner mock): phones = single centered column (IMPORTANT below the
   contacts); desktop ≥1000px = IMPORTANT as a right rail beside the hero — same
   pattern as the Paused Now screen. Both fit 100dvh with no page scroll. */
.sen-grid { display: flex; flex-direction: column; gap: clamp(.45rem, 1.4vh, .95rem); min-height: 0; }
.sen-maincol { display: flex; flex-direction: column; gap: clamp(.45rem, 1.4vh, .95rem); min-width: 0; }
.sen-side { display: flex; flex-direction: column; min-width: 0; }
.sen-ended .sen-important { align-items: flex-start; }
.sen-ended .sen-important .sen-important-body p + p { margin-top: clamp(.35rem, 1vh, .6rem);
    padding-top: clamp(.35rem, 1vh, .6rem); border-top: 1px solid rgba(255,255,255,.1); }
@media (min-width: 1000px) {
    .sen-ended .sen-wrap { max-width: 1060px; }
    .sen-ended .sen-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 280px);
        align-items: start; }
    .sen-ended .sen-side { position: sticky; top: 0; }
    .sen-ended .sen-side .sen-important { flex-direction: column; }
}
@media (min-width: 1000px) {
    /* Owner mock (Windows): IMPORTANT card becomes a right rail beside the hero. */
    .spa-view .sen-wrap { max-width: 1060px; }
    .spa-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 280px);
        align-items: start; }
    .spa-side { position: sticky; top: 0; }
    .spa-side .spa-important { flex-direction: column; }
}

/* ── SUPER-COMPACT PINNED HEADERS (owner request, July 2026) ─────────────────
   1) Every stat/header card row is rendered SUPER SMALL across all portals
      (admin + every department) so data gets the screen space.
   2) Table column headers PIN while scrolling: table wrappers become their own
      vertical scroll region (the codebase's proven sub-region pattern — plain
      sticky is unreliable against the #mainArea flex-col scroller) and thead
      cells stick to the top of that region with an opaque background.
   3) Inside .dash-fit dashboards the LISTING is already the scroller, so the
      inner table wrapper goes overflow:visible and the thead pins against the
      listing region instead (horizontal overflow scrolls at the listing). */

/* 1 ── super-small header boxes, everywhere */
.topbar { padding: .65rem 2.25rem; }
.topbar h1 { font-size: 1.1rem; }
.topbar .sub { font-size: .74rem; margin-top: 1px; }
.stat-row { gap: .55rem; margin: .7rem 0; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.stat-card { padding: .5rem .7rem; border-radius: 10px; }
.stat-card h3 { font-size: .58rem; gap: .3rem; }
.stat-card h3 i { font-size: .62rem; }
.stat-card .value { font-size: 1.05rem; margin-top: .25rem; }
/* Financial header cards: ALL boxes on ONE line, never wrapping (owner rule).
   grid-auto-flow:column gives every card an equal share of one row no matter
   how many cards there are; narrow screens scroll the row sideways instead. */
.ov-cards, .fin-cards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ov-cards > *, .fin-cards > * { min-width: 0; }
/* .dash-stats.dash-stats doubles specificity so it also beats every .cols-N
   variant (incl. their responsive re-wraps) — one row, always. */
.dash-stats.dash-stats, .stat-row.stat-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.dash-stats > *, .stat-row > * { min-width: 0; }
@media (max-width: 900px) {
    .ov-cards, .fin-cards, .dash-stats.dash-stats, .stat-row.stat-row {
        overflow-x: auto; grid-auto-columns: minmax(140px, 1fr); scrollbar-width: thin;
    }
}
.ov-cards { gap: .55rem; margin-bottom: .75rem; }
.ov-card { padding: .5rem .65rem; border-radius: 10px; }
.ov-card-ico { width: 22px; height: 22px; border-radius: 7px; font-size: .66rem; margin-bottom: .3rem; }
.ov-card-label { font-size: .64rem; }
.ov-card-val { font-size: 1.02rem; margin: .12rem 0 .2rem; }
.ov-card-delta, .ov-card-sub { font-size: .62rem; }
.fin-cards { gap: .55rem; margin-bottom: .75rem; }
.fin-cards > * { padding: .5rem .65rem !important; border-radius: 10px; }
.dash-stats { gap: .55rem; }
.dash-stat { padding: .45rem .6rem .45rem; border-radius: 10px; }
.dash-stat::before { height: 2px; }
.dash-stat-top { gap: .38rem; margin-bottom: .28rem; }
.dash-stat-ic { width: 20px; height: 20px; border-radius: 6px; font-size: .6rem; }
.dash-stat-label { font-size: .6rem; }
.dash-stat-val { font-size: 1.02rem; }
.dash-stat-sub { font-size: .58rem; margin-top: .12rem; }
.dash-stat-link { margin-top: .28rem; font-size: .6rem; }
.agent-stats { margin-bottom: .7rem; }
.as-cards { margin-bottom: .7rem; }

/* ── Department dashboard stat cards — restored prominent tile size ───────────
   The super-compact rules above shrink .dash-stat globally with low specificity.
   .agent-dash.dash-fit .dash-stat (3 classes) outranks the compact .dash-stat
   (1 class) AND the existing clamp-based dash-fit rules at their original site,
   so placing them after both guarantees these larger values always win.
   .agent-dash wraps Agent, PV, Technical, and Academy dashboards. */
.agent-dash.dash-fit .dash-stats { gap: 1rem; }
.agent-dash.dash-fit .agent-stats { margin-bottom: 1rem; }
.agent-dash.dash-fit .dash-stat {
    padding: 1.1rem 1.2rem 1rem;
    border-radius: 14px;
}
.agent-dash.dash-fit .dash-stat::before { height: 3px; }
.agent-dash.dash-fit .dash-stat-top { gap: .6rem; margin-bottom: .65rem; }
.agent-dash.dash-fit .dash-stat-ic {
    width: 40px; height: 40px;
    border-radius: 12px; font-size: 1.05rem;
}
.agent-dash.dash-fit .dash-stat-label { font-size: .82rem; }
.agent-dash.dash-fit .dash-stat-val { font-size: 2rem; }
.agent-dash.dash-fit .dash-stat-sub { font-size: .75rem; margin-top: .35rem; display: block; }
.agent-dash.dash-fit .dash-stat-link { font-size: .78rem; margin-top: .75rem; }
/* Tech cards use a side-by-side icon + value layout — preserve that after the
   general overrides above would otherwise stomp the original .tech-card sizes. */
.agent-dash.dash-fit .tech-card .dash-stat-ic { width: 48px; height: 48px; border-radius: 13px; font-size: 1.2rem; }
.agent-dash.dash-fit .tech-card .dash-stat-val { font-size: 1.9rem; }

/* ── Short-screen safety (≤768 px viewport height): clamp the fixed values above ──
   The overrides above use fixed rem/px values that look great on normal-height
   screens but can push the stat-card row past the viewport on laptops and iPads
   in portrait. This block (same specificity, placed after, so it wins) substitutes
   viewport-height-relative clamp() values so the cards shrink gracefully.           */
@media (max-height: 768px) {
    .agent-dash.dash-fit .dash-stats { gap: clamp(.5rem, 1.2vh, 1rem); }
    .agent-dash.dash-fit .agent-stats { margin-bottom: clamp(.5rem, 1.2vh, 1rem); }
    .agent-dash.dash-fit .dash-stat {
        padding: clamp(.55rem, 1.4vh, 1.1rem) clamp(.65rem, 1.2vw, 1.2rem);
    }
    .agent-dash.dash-fit .dash-stat-val { font-size: clamp(1.05rem, 2.6vh, 2rem); }
    .agent-dash.dash-fit .dash-stat-label { font-size: clamp(.62rem, 1.25vh, .82rem); }
    .agent-dash.dash-fit .dash-stat-sub {
        font-size: clamp(.58rem, 1.15vh, .75rem);
        margin-top: clamp(.15rem, .8vh, .35rem);
    }
    .agent-dash.dash-fit .dash-stat-link {
        font-size: clamp(.58rem, 1.15vh, .78rem);
        margin-top: clamp(.2rem, 1vh, .75rem);
    }
    .agent-dash.dash-fit .dash-stat-ic {
        width: clamp(30px, 5vh, 40px);
        height: clamp(30px, 5vh, 40px);
        font-size: clamp(.85rem, 1.4vh, 1.05rem);
    }
    .agent-dash.dash-fit .tech-card .dash-stat-ic {
        width: clamp(34px, 6vh, 48px);
        height: clamp(34px, 6vh, 48px);
        font-size: clamp(.95rem, 1.6vh, 1.2rem);
    }
    .agent-dash.dash-fit .tech-card .dash-stat-val { font-size: clamp(1rem, 2.5vh, 1.9rem); }
}

/* ── Extra-short-screen safety (≤600 px tall): further tighten the agent-dash
   stat cards so they never clip on older laptops or DevTools docked tall.     */
@media (max-height: 600px) {
    .agent-dash.dash-fit .dash-stats { gap: clamp(.25rem, .8vh, .5rem); }
    .agent-dash.dash-fit .agent-stats { margin-bottom: clamp(.25rem, .8vh, .5rem); }
    .agent-dash.dash-fit .dash-stat {
        padding: clamp(.35rem, 1vh, .55rem) clamp(.45rem, .9vw, .65rem);
        min-height: 0;
    }
    .agent-dash.dash-fit .dash-stat-val { font-size: clamp(.88rem, 2vh, 1.05rem); }
    .agent-dash.dash-fit .dash-stat-label { font-size: clamp(.53rem, .9vh, .62rem); }
    .agent-dash.dash-fit .dash-stat-sub {
        font-size: clamp(.5rem, .85vh, .58rem);
        margin-top: clamp(.08rem, .5vh, .15rem);
    }
    .agent-dash.dash-fit .dash-stat-link {
        font-size: clamp(.5rem, .85vh, .58rem);
        margin-top: clamp(.1rem, .7vh, .2rem);
    }
    .agent-dash.dash-fit .dash-stat-ic {
        width: clamp(22px, 4vh, 30px);
        height: clamp(22px, 4vh, 30px);
        font-size: clamp(.68rem, 1.1vh, .85rem);
    }
    .agent-dash.dash-fit .tech-card .dash-stat-ic {
        width: clamp(24px, 4.5vh, 34px);
        height: clamp(24px, 4.5vh, 34px);
        font-size: clamp(.75rem, 1.3vh, .95rem);
    }
    .agent-dash.dash-fit .tech-card .dash-stat-val { font-size: clamp(.84rem, 1.9vh, 1rem); }
}

/* ── Teacher portal stat-card summary row (Today / This week / Sessions) ──────
   body.staffdark .stat-card has specificity (0,2,1) which outranks the compact
   section's .stat-card (0,1,0), restoring the teacher hero stats to a readable
   size that matches the dept-dashboard tile standard. */
body.staffdark .stat-row { gap: .85rem; margin: 1.1rem 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
body.staffdark .stat-card { padding: 1.1rem 1.4rem; border-radius: 14px; background: #0f2138; border-color: rgba(255,255,255,.09); }
body.staffdark .stat-card h3 { font-size: .72rem; gap: .45rem; color: #9fb0c6; }
body.staffdark .stat-card h3 i { font-size: .82rem; color: var(--emerald); }
body.staffdark .stat-card .value { font-size: 1.65rem; margin-top: .45rem; color: #f0f6ff; }

@media (max-height: 768px) {
    body.staffdark .stat-row { gap: clamp(.4rem, .9vh, .85rem); margin: clamp(.45rem, 1vh, 1.1rem) 0; }
    body.staffdark .stat-card { padding: clamp(.5rem, 1.3vh, 1.1rem) clamp(.6rem, 1.1vw, 1.4rem); }
    body.staffdark .stat-card h3 { font-size: clamp(.6rem, 1.2vh, .72rem); }
    body.staffdark .stat-card .value { font-size: clamp(1.1rem, 2.5vh, 1.65rem); margin-top: clamp(.2rem, .9vh, .45rem); }
}

/* ── Extra-short-screen safety (≤600 px tall): further compress the teacher
   hero stat row so it stays fully visible at ≤600 px and ≤480 px heights.
   min-height:0 lets the grid/flex container shrink below its content size.  */
@media (max-height: 600px) {
    body.staffdark .stat-row {
        gap: clamp(.2rem, .6vh, .4rem);
        margin: clamp(.2rem, .55vh, .45rem) 0;
        min-height: 0;
    }
    body.staffdark .stat-card {
        padding: clamp(.3rem, .85vh, .5rem) clamp(.45rem, .9vw, .6rem);
        min-height: 0;
    }
    body.staffdark .stat-card h3 { font-size: clamp(.53rem, .95vh, .6rem); }
    body.staffdark .stat-card .value {
        font-size: clamp(.88rem, 1.9vh, 1.1rem);
        margin-top: clamp(.08rem, .45vh, .2rem);
    }
}

/* 2 ── pinned table headers: wrapper = its own vertical scroll region */
.table-wrap, .crm-table-scroll {
    overflow: auto;
    max-height: max(320px, calc(100dvh - 285px));
}
.table-wrap thead th, .table-wrap table:not(:has(thead)) tr:first-child th,
.crm-table-scroll thead th {
    position: sticky; top: 0; z-index: 6;
}
/* Opaque header backgrounds so rows never show through while pinned */
.crm-table-scroll thead th, .crm-table thead th { background: #16283e; }
.table-wrap thead th, .table-wrap table:not(:has(thead)) tr:first-child th { background: #fafcfe; }
body.staffdark .main .table-wrap thead th,
body.staffdark .main .table-wrap table:not(:has(thead)) tr:first-child th { background: #14243b; }
body.staffdark .main .table-wrap .ctab-table thead th { background: #1b3f86; }

/* 3 ── dash-fit dashboards: the listing region is the scroller, pin there */
.agent-dash.dash-fit .crm-table-scroll,
.agent-dash.dash-fit .table-wrap { overflow: visible; max-height: none; }
/* Modals keep their original behavior (the dialog is its own scroll region —
   no nested scrollbars inside popups) */
.modal .table-wrap, .modal .crm-table-scroll { overflow: visible; overflow-x: auto; max-height: none; }

/* 4 ── Financial portal: the overview cards stay pinned at the top of the
   scrolling tab body (finBody is a plain block scroller — sticky is reliable) */
.main.fin-mode > #finBody .ov-cards {
    position: sticky; top: 0; z-index: 12;
    background: #0a1626; padding-top: .6rem; margin-top: -.6rem;
}

/* ═══ GLOBAL LOADING BAR + PERCENTAGE (all portals — see gload in app.js) ═══ */
#gloadbar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000;
    background: rgba(99, 102, 241, .12); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
#gloadbar.on { opacity: 1; }
#gloadfill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #6366f1, #3b82f6, #22d3ee);
    box-shadow: 0 0 8px rgba(59, 130, 246, .7);
    transition: width .18s ease;
}
#gloadpct {
    position: fixed; top: 10px; right: 12px; z-index: 100000;
    display: flex; align-items: center; gap: .45rem;
    background: rgba(15, 26, 46, .92); color: #e2e8f0;
    border: 1px solid rgba(99, 102, 241, .45); border-radius: 999px;
    padding: .3rem .7rem; font-size: .72rem; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .35);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
#gloadpct.on { opacity: 1; transform: translateY(0); }
.gload-spin {
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, .35); border-top-color: #60a5fa;
    animation: gloadspin .7s linear infinite;
}
@keyframes gloadspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gload-spin { animation: none; } }

/* ── Recycle Bin (admin Restore menu) + delete-confirm impact ─────────────── */
.del-impact { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 10px; padding: .65rem .85rem; margin: .6rem 0; }
.del-impact-t { font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.del-impact ul { margin: 0; padding-left: 1.2rem; font-size: .85rem; }
.del-impact li { margin: .15rem 0; }
.del-recycle-note { font-size: .82rem; opacity: .8; margin: .5rem 0 0; }
.del-recycle-note i { color: #34d399; margin-right: .3rem; }

body.staffdark .rb-view { padding: 1.2rem; }
body.staffdark .rb-head { display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .8rem; margin-bottom: .9rem; }
body.staffdark .rb-head h2 { margin: 0; font-size: 1.25rem; }
body.staffdark .rb-head h2 i { color: #34d399; margin-right: .4rem; }
body.staffdark .rb-retention { display: flex; align-items: center; gap: .45rem; font-size: .85rem; opacity: .95; }
body.staffdark .rb-retention input { width: 5.2rem; }
body.staffdark .rb-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; }
body.staffdark .rb-tab { border: 1px solid rgba(148, 163, 184, .3); background: transparent;
    color: inherit; border-radius: 999px; padding: .4rem .95rem; cursor: pointer; font-size: .85rem; }
body.staffdark .rb-tab.on { background: var(--emerald); border-color: var(--emerald); color: #fff; font-weight: 700; }
body.staffdark .rb-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
body.staffdark .rb-filters select, body.staffdark .rb-filters input { max-width: 12rem; }
body.staffdark .rb-bulkbar { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem;
    padding: .5rem .8rem; border-radius: 10px; background: rgba(96, 165, 250, .1);
    border: 1px solid rgba(96, 165, 250, .3); font-size: .85rem; }
body.staffdark .rb-tbl td { vertical-align: top; }
body.staffdark .rb-kind { display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    background: rgba(148, 163, 184, .15); border: 1px solid rgba(148, 163, 184, .3);
    font-size: .74rem; white-space: nowrap; }
body.staffdark .rb-label { font-weight: 600; }
body.staffdark .rb-childs { font-size: .8rem; opacity: .85; }
body.staffdark .rb-done { opacity: .55; }
body.staffdark .rb-restored { color: #34d399; font-size: .8rem; white-space: nowrap; }
body.staffdark .rb-diff { font-size: .78rem; margin: .12rem 0; }
body.staffdark .rb-diff i { font-size: .65rem; opacity: .6; margin: 0 .2rem; }
body.staffdark .rb-old { color: #f87171; text-decoration: line-through; }
body.staffdark .rb-new { color: #34d399; }
body.staffdark .rb-diff-more { font-size: .74rem; opacity: .65; margin-top: .15rem; }
body.staffdark .rb-difftd { max-width: 26rem; }
body.staffdark .rb-pager { display: flex; align-items: center; gap: .8rem; justify-content: center;
    margin-top: .9rem; font-size: .85rem; opacity: .9; }
.rb-snap { max-height: 45vh; overflow: auto; border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 10px; padding: .5rem .75rem; margin-bottom: .7rem; }
.rb-snap-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem;
    padding: .18rem 0; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.rb-snap-row:last-child { border-bottom: 0; }
.rb-snap-row span { opacity: .7; white-space: nowrap; }
.rb-snap-row b { text-align: right; word-break: break-word; }
.rb-snap-child { font-size: .82rem; margin: .2rem 0; }
@media (max-width: 720px) {
    body.staffdark .rb-filters select, body.staffdark .rb-filters input { max-width: 100%; flex: 1 1 45%; }
    body.staffdark .rb-difftd { max-width: none; }
}

/* ══════════════════════ ACCOUNT HEALTH (staff, dark) ══════════════════════ */
body.staffdark .ah-wrap { display: flex; flex-direction: column; gap: 1.1rem; }
body.staffdark .ah-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
body.staffdark .ah-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
body.staffdark .ah-sub { color: #94a3b8; font-size: .9rem; margin-top: .25rem; }
body.staffdark .ah-datechip { display: inline-flex; align-items: center; gap: .5rem; background: rgba(15,31,58,.6); border: 1px solid rgba(148,163,184,.2); color: #cbd5e1; border-radius: 10px; padding: .5rem .85rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
body.staffdark .ah-datechip i { color: #60a5fa; }
body.staffdark .ah-viewall { background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.3); color: #93c5fd; font-weight: 600; font-size: .78rem; padding: .32rem .75rem; border-radius: 8px; cursor: pointer; transition: background .15s; }
body.staffdark .ah-viewall:hover { background: rgba(59,130,246,.24); }
body.staffdark .ah-alert-link { cursor: pointer; transition: background .15s, border-color .15s; }
body.staffdark .ah-alert-txt { flex: 1; min-width: 0; }
body.staffdark .ah-alert-chev { flex: 0 0 auto; color: #94a3b8; font-size: 1.05rem !important; align-self: center; transition: transform .15s; }
body.staffdark .ah-alert-link:hover .ah-alert-chev { transform: translateX(3px); }
body.staffdark .ah-viewall i { font-size: .66rem; margin-left: .3rem; transition: transform .15s; }
body.staffdark .ah-viewall:hover i { transform: translateX(2px); }
/* Card header title with a small coloured icon tile (mock). */
body.staffdark .ah-card-ttl { display: inline-flex; align-items: center; gap: .55rem; }
body.staffdark .ah-card-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
body.staffdark .ah-card-ic-amber { background: rgba(245,158,11,.16); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
body.staffdark .ah-card-ic-purple { background: rgba(168,85,247,.16); color: #d8b4fe; border: 1px solid rgba(168,85,247,.3); }
/* Boxed "tap any warning" hint bar (mock). */
body.staffdark .ah-hintbar { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .7rem .9rem; border-radius: 11px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.22); color: #cbd5e1; font-size: .82rem; }
body.staffdark .ah-hintbar i { color: #7dd3fc; font-size: 1rem; flex: 0 0 auto; }
/* Bottom stat tiles: Total Active Points / Total Warnings / expiry info note (mock). */
body.staffdark .ah-tiles { display: grid; grid-template-columns: auto auto minmax(180px, 1fr); gap: .7rem; margin-top: .9rem; align-items: stretch; }
body.staffdark .ah-tile { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; padding: .75rem .95rem; }
body.staffdark .ah-tile-lbl { color: #94a3b8; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
body.staffdark .ah-tile-row { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
body.staffdark .ah-tile-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
body.staffdark .ah-tile-ic-blue { background: rgba(59,130,246,.16); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
body.staffdark .ah-tile-ic-purple { background: rgba(168,85,247,.16); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }
body.staffdark .ah-tile-num { font-size: 1.5rem; font-weight: 800; line-height: 1; }
body.staffdark .ah-tile-note { display: flex; align-items: center; gap: .6rem; color: #94a3b8; font-size: .78rem; line-height: 1.4; }
body.staffdark .ah-tile-info { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(59,130,246,.16); color: #60a5fa; font-size: .8rem; }
@media (max-width: 560px) { body.staffdark .ah-tiles { grid-template-columns: 1fr 1fr; } body.staffdark .ah-tile-note { grid-column: 1 / -1; } }
body.staffdark .ah-viewfull { width: 100%; margin-top: .9rem; padding: .8rem 0 0; border: 0; border-top: 1px solid rgba(148,163,184,.15); background: none; color: #60a5fa; font-weight: 600; font-size: .86rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: color .15s; }
body.staffdark .ah-viewfull:hover { color: #93c5fd; }
body.staffdark .ah-viewfull i { transition: transform .15s; }
body.staffdark .ah-viewfull:hover i { transform: translateX(3px); }
body.staffdark .ah-card { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.16); border-radius: 16px; padding: 1.15rem 1.25rem; }
body.staffdark .ah-card-h { font-weight: 700; font-size: 1.02rem; margin-bottom: .9rem; }
body.staffdark .ah-card-h-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
body.staffdark .ah-filters { display: flex; gap: .5rem; align-items: center; }
body.staffdark .ah-select, body.staffdark .ah-input { background: rgba(15,23,42,.6); border: 1px solid rgba(148,163,184,.28); color: #e2e8f0; border-radius: 10px; padding: .5rem .7rem; font-size: .88rem; font-family: inherit; }
body.staffdark textarea.ah-input { width: 100%; resize: vertical; }

/* Gauge / donut */
body.staffdark .ah-gauge { position: relative; width: 190px; height: 190px; flex: 0 0 auto; }
body.staffdark .ah-gauge-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
body.staffdark .ah-gauge-num { font-size: 40px; font-weight: 800; line-height: 1; }
body.staffdark .ah-gauge-num span { font-size: 18px; color: #94a3b8; font-weight: 600; }
body.staffdark .ah-gauge-lbl { color: #94a3b8; font-size: .78rem; margin-top: .3rem; }
body.staffdark .ah-gauge-pct { font-weight: 700; font-size: .95rem; margin-top: .25rem; }

/* Worker hero */
body.staffdark .ah-hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
body.staffdark .ah-hero-body { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
body.staffdark .ah-hero-info { flex: 1 1 240px; }
body.staffdark .ah-hero-level { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; }
body.staffdark .ah-hero-copy { color: #cbd5e1; font-size: .9rem; margin: .5rem 0 .8rem; }
body.staffdark .ah-hero-stats { display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; color: #cbd5e1; }
body.staffdark .ah-hero-stats i { color: #94a3b8; width: 18px; text-align: center; margin-right: .4rem; }
body.staffdark .ah-hero-stats b { margin-left: .3rem; }

/* Level cards */
body.staffdark .ah-lvl-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; }
body.staffdark .ah-lvl-card { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.16); border-left: 4px solid var(--lc); border-radius: 12px; padding: .7rem .85rem; }
body.staffdark .ah-lvl-card.on { background: color-mix(in srgb, var(--lc) 14%, transparent); border-color: var(--lc); }
body.staffdark .ah-lvl-head { display: flex; align-items: center; gap: .55rem; }
body.staffdark .ah-lvl-head i { color: var(--lc); font-size: 1.1rem; }
body.staffdark .ah-lvl-name { font-weight: 700; font-size: .9rem; }
body.staffdark .ah-lvl-range { color: #94a3b8; font-size: .72rem; }
body.staffdark .ah-lvl-big { font-size: 1.4rem; font-weight: 800; margin-top: .45rem; color: var(--lc); }
body.staffdark .ah-lvl-sub { color: #94a3b8; font-size: .72rem; }
body.staffdark .ah-lvl-bar { height: 6px; border-radius: 6px; background: rgba(148,163,184,.18); margin-top: .55rem; overflow: hidden; }
body.staffdark .ah-lvl-bar span { display: block; height: 100%; width: 100%; border-radius: 6px; }

/* Alert */
body.staffdark .ah-alert { display: flex; gap: .8rem; align-items: flex-start; border-radius: 14px; padding: 1rem 1.1rem; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); }
body.staffdark .ah-alert i { font-size: 1.2rem; color: #60a5fa; margin-top: .1rem; }
body.staffdark .ah-alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
body.staffdark .ah-alert-warning i { color: #f59e0b; }
body.staffdark .ah-alert-at_risk { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.35); }
body.staffdark .ah-alert-at_risk i { color: #f97316; }
body.staffdark .ah-alert-termination { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); }
body.staffdark .ah-alert-termination i { color: #ef4444; }
body.staffdark .ah-lockbar { display: flex; gap: .9rem; align-items: center; border-radius: 14px; padding: 1rem 1.1rem; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.4); flex-wrap: wrap; }
body.staffdark .ah-lockbar > i { color: #ef4444; font-size: 1.25rem; }
body.staffdark .ah-lockbar-txt { flex: 1; min-width: 220px; }
body.staffdark .ah-lockbar-title { font-weight: 700; color: #fecaca; }
body.staffdark .ah-lockbar-sub { color: #cbd5e1; font-size: .85rem; margin-top: .2rem; }
body.staffdark .ah-lockbar-pay { text-align: right; padding-left: 1rem; border-left: 1px solid rgba(239,68,68,.3); }
body.staffdark .ah-lockbar-pay-lbl { color: #94a3b8; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
body.staffdark .ah-lockbar-pay-val { font-weight: 700; font-size: 1.05rem; color: #f8fafc; }
@media (max-width: 560px) { body.staffdark .ah-lockbar-pay { text-align: left; padding-left: 0; border-left: 0; } }
body.staffdark .ah-alert-title { font-weight: 700; }
body.staffdark .ah-alert-sub { color: #cbd5e1; font-size: .85rem; margin-top: .2rem; }

/* Tables */
body.staffdark .ah-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
body.staffdark .ah-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
body.staffdark .ah-table th { text-align: left; color: #94a3b8; font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 1px solid rgba(148,163,184,.2); }
body.staffdark .ah-table td { padding: .6rem .6rem; border-bottom: 1px solid rgba(148,163,184,.1); vertical-align: top; }
body.staffdark .ah-table .ah-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
body.staffdark .ah-table .btn-sm[data-ah-view] {
    background: linear-gradient(135deg, var(--emerald), var(--emerald-dark));
    color: #fff; font-weight: 700; border: none;
    display: inline-flex; align-items: center; gap: .35rem;
    box-shadow: 0 2px 10px rgba(16,185,129,.3);
    transition: opacity .15s, transform .12s;
}
body.staffdark .ah-table .btn-sm[data-ah-view]:hover { opacity: .9; transform: translateY(-1px); }
body.staffdark .ah-table-scroll { overflow: auto; max-height: 60vh; }
body.staffdark .ah-table-wide th, body.staffdark .ah-table-wide td { white-space: nowrap; }
body.staffdark .ah-pill { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 18%, transparent); }
body.staffdark .ah-status-tag { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); }
body.staffdark .ah-empty { text-align: center; color: #94a3b8; padding: 1.4rem; font-size: .9rem; }
body.staffdark .ah-empty i { margin-right: .4rem; color: #10b981; }
body.staffdark .ah-panel { background: rgba(15,31,58,.5); border: 1px solid rgba(148,163,184,.15); border-radius: 12px; padding: 1rem 1.1rem; }
body.staffdark .ah-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
body.staffdark .ah-panel-title { font-weight: 700; font-size: 1rem; color: #e2e8f0; }
body.staffdark .ah-loading { text-align: center; color: #94a3b8; padding: 1.6rem; font-size: .9rem; }
body.staffdark .ah-delta-up { color: #f87171; font-weight: 700; font-variant-numeric: tabular-nums; }
body.staffdark .ah-delta-down { color: #34d399; font-weight: 700; font-variant-numeric: tabular-nums; }
body.staffdark .ah-note { color: #94a3b8; font-size: .78rem; margin-top: .7rem; }
body.staffdark .ah-note i { margin-right: .35rem; }
body.staffdark .ah-tot-lbl { color: #94a3b8; font-size: .78rem; }
body.staffdark .ah-tot-num { font-size: 1.4rem; font-weight: 800; }

/* Admin stat cards */
body.staffdark .ah-stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
body.staffdark .ah-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.16); border-top: 3px solid var(--sc); border-radius: 14px; padding: .95rem 1rem; }
body.staffdark .ah-stat-h { display: flex; align-items: center; gap: .5rem; color: #cbd5e1; font-size: .82rem; font-weight: 600; }
body.staffdark .ah-stat-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sc) 20%, transparent); color: var(--sc); font-size: .8rem; }
body.staffdark .ah-stat-num { font-size: 2rem; font-weight: 800; margin: .35rem 0 .1rem; }
body.staffdark .ah-stat-sub { color: #94a3b8; font-size: .76rem; margin-bottom: .5rem; }

/* Admin mid grid */
body.staffdark .ah-mid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
body.staffdark .ah-dist { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
body.staffdark .ah-legend { flex: 1 1 150px; display: flex; flex-direction: column; gap: .5rem; }
body.staffdark .ah-leg-row { display: flex; align-items: center; gap: .5rem; font-size: .84rem; }
body.staffdark .ah-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
body.staffdark .ah-leg-lbl { flex: 1; }
body.staffdark .ah-leg-val { color: #94a3b8; }
body.staffdark .ah-sumlist { display: flex; flex-direction: column; }
body.staffdark .ah-sum-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid rgba(148,163,184,.12); font-size: .88rem; }
body.staffdark .ah-sum-row:last-child { border-bottom: none; }
body.staffdark .ah-sum-row i { color: #94a3b8; width: 18px; text-align: center; margin-right: .4rem; }
body.staffdark .ah-toplist { display: flex; flex-direction: column; gap: .55rem; }
body.staffdark .ah-toprow { display: flex; align-items: center; gap: .6rem; }
body.staffdark .ah-rank { width: 22px; height: 22px; border-radius: 50%; background: rgba(148,163,184,.2); display: inline-flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; flex: 0 0 auto; }
body.staffdark .ah-topname { flex: 1; min-width: 0; }
body.staffdark .ah-topname > div:first-child { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .ah-topmail { color: #94a3b8; font-size: .74rem; font-weight: 400; }
body.staffdark .ah-pts-pill { padding: .15rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 18%, transparent); }
body.staffdark .ah-toplvl { font-size: .78rem; font-weight: 600; }

/* Admin employee table */
body.staffdark .ah-emp { display: flex; align-items: center; gap: .55rem; }
body.staffdark .ah-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(99,102,241,.25); color: #c7d2fe; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex: 0 0 auto; }
body.staffdark .ah-mini-bar { height: 7px; border-radius: 6px; background: rgba(148,163,184,.18); overflow: hidden; }
body.staffdark .ah-mini-bar span { display: block; height: 100%; border-radius: 6px; }
body.staffdark .ah-count { color: #94a3b8; font-size: .8rem; margin-top: .7rem; }
body.staffdark .ah-row-actions { white-space: nowrap; display: flex; gap: .35rem; }
body.staffdark .ah-danger { color: #fca5a5; border-color: rgba(239,68,68,.4); }

/* Add-warning / detail modal */
body.staffdark .ah-modal h3 { margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; }
body.staffdark .ah-modal h3 i { color: #f59e0b; }
body.staffdark .ah-modal-wide { min-width: min(720px, 88vw); }
/* Worker health detail modal — fit to the viewport: widen the shell so nothing is cut
   off, and make the warnings table the ONE internal scroll region (no page scroll, no
   horizontal/double scrollbars). */
.modal-backdrop:has(.ah-modal-wide) .modal { max-width: min(980px, 95vw); padding: 1.5rem 1.6rem 1.4rem; overflow: hidden; }
body.staffdark .ah-modal-wide { display: flex; flex-direction: column; max-height: 88vh; min-width: 0; }
body.staffdark .ah-modal-wide > h3,
body.staffdark .ah-modal-wide > .ah-detail-top,
body.staffdark .ah-modal-wide > .ah-reinstate,
body.staffdark .ah-modal-wide > .ah-detail-actions,
body.staffdark .ah-modal-wide > .ah-modal-actions { flex: 0 0 auto; }
body.staffdark .ah-modal-wide > .ah-table-scroll { flex: 1 1 auto; min-height: 90px; max-height: none; overflow-y: auto; overflow-x: hidden; }
/* Detail table: NEVER break words mid-character. Short columns (Pts, Source,
   Status, actions) stay on one line; only Date and Type/Reason wrap, and only at
   whole-word boundaries so the pills read "Automatic" / "Resolved", not "Automat
   ic" / "Resolv ed". */
body.staffdark .ah-modal-wide .ah-table th,
body.staffdark .ah-modal-wide .ah-table td { white-space: normal; overflow-wrap: normal; word-break: normal; }
body.staffdark .ah-modal-wide .ah-table th:nth-child(3), body.staffdark .ah-modal-wide .ah-table td:nth-child(3),
body.staffdark .ah-modal-wide .ah-table th:nth-child(4), body.staffdark .ah-modal-wide .ah-table td:nth-child(4),
body.staffdark .ah-modal-wide .ah-table th:nth-child(5), body.staffdark .ah-modal-wide .ah-table td:nth-child(5),
body.staffdark .ah-modal-wide .ah-table th:nth-child(6), body.staffdark .ah-modal-wide .ah-table td:nth-child(6) { white-space: nowrap; }
body.staffdark .ah-modal-wide .ah-table td:nth-child(2) { min-width: 200px; }
body.staffdark .ah-modal-wide .ah-src, body.staffdark .ah-modal-wide .ah-pill { white-space: nowrap; }
body.staffdark .ah-modal-wide .ah-row-actions { flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
body.staffdark .ah-modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
body.staffdark .ah-req { color: #ef4444; }
body.staffdark .ah-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; margin: .5rem 0; }
body.staffdark .ah-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }
/* Close (and any secondary footer button) as a readable dark pill — .btn-secondary has
   no global styles, so the browser default was near-invisible on the dark modal. */
body.staffdark .ah-modal-wide .ah-modal-actions .btn-secondary {
    background: rgba(13,27,46,.65); border: 1px solid rgba(148,163,184,.28);
    color: #e2e8f0; font-weight: 600; border-radius: 10px;
    padding: .55rem 1.1rem; font-size: .84rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
body.staffdark .ah-modal-wide .ah-modal-actions .btn-secondary:hover { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.45); }

/* ── Account Health secondary buttons (Task #336) ─────────────────────────────
   .btn-secondary has NO global definition anywhere, so outside the two spots
   patched above (modal footers, detail actions) these buttons fell back to the
   browser-default light background while the dark theme painted their text
   white — white on white. Give EVERY .btn-secondary under the staff dark theme
   the same readable dark pill (Export CSV/PDF, Test Letter, history CSV/PDF,
   and any future Account Health surface). Contrast: #e2e8f0 text on the
   ~#0d1b2e pill ≈ 13:1 (WCAG AA needs 4.5:1). */
body.staffdark .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    background: rgba(13,27,46,.65); border: 1px solid rgba(148,163,184,.28);
    color: #e2e8f0; font-weight: 600; border-radius: 10px;
    padding: .55rem 1.1rem; font-size: .84rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
body.staffdark .btn-secondary:hover:not(:disabled) { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.45); }
body.staffdark .btn-secondary:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
body.staffdark .btn-secondary:disabled { opacity: .45; cursor: not-allowed; }
body.staffdark .btn-secondary.btn-sm { padding: .45rem .8rem; font-size: .8rem; }
/* Semantic accents keep their colours but readable: emerald ≈ 9.6:1, red ≈ 5.6:1
   on the dark pill. */
body.staffdark .btn-secondary.ah-good { color: #6ee7b7; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }
body.staffdark .btn-secondary.ah-good:hover:not(:disabled) { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.6); }
body.staffdark .btn-secondary.ah-danger { color: #f87171; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }
body.staffdark .btn-secondary.ah-danger:hover:not(:disabled) { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.6); }
/* The roster's bare "View Details" button (class btn-sm only, no .btn) was also
   browser-default white; same dark pill, compact. :not(.btn) keeps real .btn
   buttons (Add Warning etc.) untouched. */
body.staffdark .ah-wrap .ah-table button.btn-sm:not(.btn),
body.staffdark .ah-modal .ah-table button.btn-sm:not(.btn) {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(13,27,46,.65); border: 1px solid rgba(148,163,184,.28);
    color: #e2e8f0; font-weight: 600; border-radius: 8px; cursor: pointer;
    transition: background .15s, border-color .15s;
}
body.staffdark .ah-wrap .ah-table button.btn-sm:not(.btn):hover:not(:disabled),
body.staffdark .ah-modal .ah-table button.btn-sm:not(.btn):hover:not(:disabled) { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.45); }

/* ── Worker: clickable warning rows + reason column ────────────────────────── */
body.staffdark .ah-row-click { cursor: pointer; transition: background .12s; }
body.staffdark .ah-row-click:hover { background: rgba(148,163,184,.08); }
body.staffdark .ah-row-click:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
body.staffdark .ah-reason-cell { max-width: 320px; color: #cbd5e1; font-size: .82rem; }
body.staffdark .ah-muted { color: #64748b; }
body.staffdark .ah-ack-flag { display: inline-block; margin-top: .2rem; padding: .1rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #fca5a5; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.35); white-space: nowrap; }
body.staffdark .ah-ack-flag i { margin-right: .25rem; }
/* Final-warning / termination visual pulse on the status hero */
body.staffdark .ah-final-alert { position: relative; animation: ahFinalPulse 1.8s ease-in-out infinite; }
@keyframes ahFinalPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.0); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,.18); } }
body.staffdark .ah-final-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fecaca; background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.5); animation: ahBadgeBlink 1.2s steps(1) infinite; }
@keyframes ahBadgeBlink { 0%,60% { opacity: 1; } 61%,100% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { body.staffdark .ah-final-alert, body.staffdark .ah-final-badge { animation: none; } }

/* ── Worker: warning detail card ──────────────────────────────────────────── */
.modal-backdrop:has(.ah-wd) .modal { max-width: 480px; padding: 0; overflow: hidden; }
body.staffdark .ah-wd { display: flex; flex-direction: column; max-height: 90vh; }
body.staffdark .ah-wd-head { display: flex; align-items: flex-start; gap: .8rem; padding: 1.15rem 1.3rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; }
body.staffdark .ah-wd-head.ah-wd-active { background: linear-gradient(180deg, rgba(239,68,68,.12), transparent); }
body.staffdark .ah-wd-head.ah-wd-expired { background: linear-gradient(180deg, rgba(148,163,184,.1), transparent); }
body.staffdark .ah-wd-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; color: #fca5a5; background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.35); }
body.staffdark .ah-wd-htxt h3 { margin: 0; font-size: 1.05rem; }
body.staffdark .ah-wd-htxt p { margin: .2rem 0 0; color: #94a3b8; font-size: .8rem; }
body.staffdark .ah-wd-body { padding: 1.1rem 1.3rem; overflow: auto; }
body.staffdark .ah-wd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
body.staffdark .ah-wd-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.16); border-radius: 11px; padding: .6rem .7rem; }
body.staffdark .ah-wd-lbl { color: #94a3b8; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
body.staffdark .ah-wd-val { margin-top: .3rem; font-size: 1.05rem; font-weight: 700; }
body.staffdark .ah-wd-reason p { margin: .35rem 0 0; color: #e2e8f0; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
body.staffdark .ah-wd-acknote { margin-top: 1rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fecaca; font-size: .84rem; }
body.staffdark .ah-wd-acknote i { margin-right: .4rem; }
body.staffdark .ah-wd-acked { margin-top: 1rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; font-size: .84rem; }
body.staffdark .ah-wd-acked i { margin-right: .4rem; }
body.staffdark .ah-wd-foot { padding: .9rem 1.3rem 1.15rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: flex-end; gap: .6rem; }

/* ── Worker: forced acknowledgement popup (blocking) ──────────────────────── */
.ah-forced-backdrop { z-index: 90; background: rgba(13,27,46,.82); backdrop-filter: blur(4px); }
.modal-backdrop.ah-forced-backdrop:has(.ah-forced) .modal, body.staffdark .ah-forced { max-width: 460px; padding: 0; overflow: hidden; }
body.staffdark .ah-forced .ah-forced-head { text-align: center; padding: 1.5rem 1.4rem 1.1rem; background: linear-gradient(180deg, rgba(239,68,68,.16), transparent); border-bottom: 1px solid rgba(255,255,255,.08); }
body.staffdark .ah-forced-ic { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto .7rem; display: grid; place-items: center; font-size: 1.6rem; color: #fca5a5; background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.45); animation: ahFinalPulse 1.8s ease-in-out infinite; }
body.staffdark .ah-forced-head h3 { margin: 0; font-size: 1.2rem; }
body.staffdark .ah-forced-head p { margin: .35rem 0 0; color: #cbd5e1; font-size: .86rem; }
body.staffdark .ah-forced-body { padding: 1.1rem 1.4rem; }
body.staffdark .ah-forced-type { font-size: 1rem; font-weight: 700; }
body.staffdark .ah-forced-pts { color: #fca5a5; font-weight: 800; margin-left: .4rem; }
body.staffdark .ah-forced-date { color: #94a3b8; font-size: .8rem; margin-top: .2rem; }
body.staffdark .ah-forced-reason { margin-top: .9rem; }
body.staffdark .ah-forced-reason p { margin: .35rem 0 0; color: #e2e8f0; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
body.staffdark .ah-forced-foot { padding: .3rem 1.4rem 1.4rem; }
body.staffdark .ah-forced-foot .btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) { body.staffdark .ah-forced-ic { animation: none; } }

/* ── Add Warning modal (professional redesign) ─────────────────────────────── */
.modal-backdrop:has(.aw-modal) .modal { max-width: 540px; padding: 0; overflow: hidden; }
body.staffdark .aw-modal { display: flex; flex-direction: column; max-height: 90vh; }
body.staffdark .aw-modal .aw-head { display: flex; align-items: flex-start; gap: .85rem; padding: 1.25rem 1.4rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,0)); }
body.staffdark .aw-modal .aw-head-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; color: #fbbf24; background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.35); box-shadow: 0 0 0 4px rgba(245,158,11,.06); }
body.staffdark .aw-modal .aw-head-txt h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
body.staffdark .aw-modal .aw-head-txt p { margin: .2rem 0 0; font-size: .82rem; color: #9fb2c9; line-height: 1.35; }
body.staffdark .aw-modal .aw-x { position: absolute; top: .9rem; right: 1rem; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.06); color: #9fb2c9; cursor: pointer; font-size: .95rem; transition: .15s; }
body.staffdark .aw-modal .aw-x:hover { background: rgba(255,255,255,.12); color: #fff; }
body.staffdark .aw-modal .aw-body { padding: 1.2rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
body.staffdark .aw-modal .aw-field { display: flex; flex-direction: column; gap: .4rem; }
body.staffdark .aw-modal .aw-field > label { font-size: .78rem; font-weight: 600; color: #cbd5e1; }
body.staffdark .aw-modal .aw-muted { color: #6b7f99; font-weight: 400; }
body.staffdark .aw-modal .aw-req { color: #f87171; }
body.staffdark .aw-modal .aw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
body.staffdark .aw-modal .aw-ctrl { width: 100%; background: #0a1626; border: 1px solid rgba(255,255,255,.14); color: #e6eef9; border-radius: 10px; padding: .6rem .75rem; font-size: .88rem; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
body.staffdark .aw-modal .aw-ctrl:focus { outline: 0; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
body.staffdark .aw-modal textarea.aw-ctrl { resize: vertical; min-height: 72px; }
body.staffdark .aw-modal .aw-select-wrap { position: relative; }
body.staffdark .aw-modal .aw-in-ic { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #6b7f99; font-size: .82rem; pointer-events: none; }
body.staffdark .aw-modal select.aw-has-ic { padding-left: 2rem; }
body.staffdark .aw-modal .aw-stepper { display: flex; align-items: stretch; }
body.staffdark .aw-modal .aw-step { width: 38px; flex: none; border: 1px solid rgba(255,255,255,.14); background: #0f2138; color: #cbd5e1; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: .15s; }
body.staffdark .aw-modal .aw-step:first-child { border-radius: 10px 0 0 10px; border-right: 0; }
body.staffdark .aw-modal .aw-step:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
body.staffdark .aw-modal .aw-step:hover { background: #16294a; color: #fff; }
body.staffdark .aw-modal .aw-stepper .aw-pts { border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
body.staffdark .aw-modal .aw-stepper .aw-pts::-webkit-outer-spin-button, body.staffdark .aw-modal .aw-stepper .aw-pts::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.staffdark .aw-modal .aw-impact { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
body.staffdark .aw-modal .aw-impact:empty { display: none; }
body.staffdark .aw-modal .aw-impact.is-term { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }
body.staffdark .aw-modal .aw-imp-flow { display: flex; align-items: center; gap: 1rem; }
body.staffdark .aw-modal .aw-imp-col { display: flex; flex-direction: column; gap: .1rem; }
body.staffdark .aw-modal .aw-imp-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7f99; }
body.staffdark .aw-modal .aw-imp-pts { font-size: 1.4rem; font-weight: 800; color: #e6eef9; line-height: 1; }
body.staffdark .aw-modal .aw-imp-ar { color: #6b7f99; font-size: .9rem; }
body.staffdark .aw-modal .aw-imp-lvl { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--lc, #cbd5e1); background: color-mix(in srgb, var(--lc, #64748b) 15%, transparent); border: 1px solid color-mix(in srgb, var(--lc, #64748b) 40%, transparent); padding: .35rem .7rem; border-radius: 999px; }
body.staffdark .aw-modal .aw-imp-note { font-size: .78rem; color: #cbd5e1; line-height: 1.4; display: flex; gap: .45rem; align-items: flex-start; padding-top: .55rem; border-top: 1px dashed rgba(255,255,255,.1); }
body.staffdark .aw-modal .aw-imp-note i { color: #fbbf24; margin-top: .1rem; }
body.staffdark .aw-modal .aw-impact.is-term .aw-imp-note i { color: #f87171; }
body.staffdark .aw-modal .aw-file { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.02); color: #9fb2c9; font-size: .85rem; cursor: pointer; transition: .15s; }
body.staffdark .aw-modal .aw-file:hover { border-color: rgba(245,158,11,.5); color: #e6eef9; background: rgba(245,158,11,.05); }
body.staffdark .aw-modal .aw-file i { color: #f59e0b; }
body.staffdark .aw-modal .aw-file.has-file { border-style: solid; border-color: rgba(16,185,129,.4); color: #a7f3d0; background: rgba(16,185,129,.06); }
body.staffdark .aw-modal .aw-file.has-file i { color: #34d399; }
body.staffdark .aw-modal .aw-err { color: #f87171; font-size: .76rem; }
body.staffdark .aw-modal .aw-err:empty { display: none; }
body.staffdark .aw-modal .aw-toggles { display: flex; flex-direction: column; gap: .6rem; }
body.staffdark .aw-modal .aw-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; cursor: pointer; }
body.staffdark .aw-modal .aw-toggle:hover { border-color: rgba(255,255,255,.2); }
body.staffdark .aw-modal .aw-toggle-txt { display: flex; flex-direction: column; gap: .12rem; }
body.staffdark .aw-modal .aw-toggle-txt b { font-size: .84rem; font-weight: 600; color: #e6eef9; }
body.staffdark .aw-modal .aw-toggle-txt small { font-size: .73rem; color: #7c8ea6; }
body.staffdark .aw-modal .aw-switch { position: relative; flex: none; width: 40px; height: 22px; }
body.staffdark .aw-modal .aw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
body.staffdark .aw-modal .aw-slider { position: absolute; inset: 0; background: rgba(255,255,255,.16); border-radius: 999px; transition: .18s; }
body.staffdark .aw-modal .aw-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; }
body.staffdark .aw-modal .aw-switch input:checked + .aw-slider { background: #10b981; }
body.staffdark .aw-modal .aw-switch input:checked + .aw-slider::before { transform: translateX(18px); }
body.staffdark .aw-modal .aw-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.4rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.15); }
body.staffdark .aw-modal .aw-btn-ghost { padding: .6rem 1.1rem; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: #cbd5e1; font-size: .86rem; font-weight: 600; cursor: pointer; transition: .15s; }
body.staffdark .aw-modal .aw-btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
body.staffdark .aw-modal .aw-btn-primary { padding: .6rem 1.3rem; border-radius: 9px; border: 0; background: linear-gradient(180deg, #f59e0b, #d97706); color: #1a1200; font-size: .86rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; box-shadow: 0 4px 14px rgba(245,158,11,.3); transition: .15s; }
body.staffdark .aw-modal .aw-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(245,158,11,.42); }
@media (max-width: 560px) {
    body.staffdark .aw-modal .aw-row2 { grid-template-columns: 1fr; }
    body.staffdark .aw-modal .aw-imp-flow { flex-wrap: wrap; }
    body.staffdark .aw-modal .aw-imp-lvl { margin-left: 0; }
}
body.staffdark .ah-detail-top { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1rem; }
body.staffdark .ah-detail-top .btn { margin-left: auto; }
/* "Add Warning" per the mock: a white pill with dark text so it pops on the dark modal. */
body.staffdark .ah-modal-wide .ah-detail-top .btn {
    background: #f8fafc; color: #0f172a; border: 1px solid rgba(148,163,184,.35);
    border-radius: 10px; font-weight: 700;
}
body.staffdark .ah-modal-wide .ah-detail-top .btn:hover { background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
body.staffdark .btn-xs { padding: .28rem .6rem; font-size: .74rem; border-radius: 8px; background: rgba(148,163,184,.14); border: 1px solid rgba(148,163,184,.3); color: #e2e8f0; cursor: pointer; }

/* Tabbed admin shell */
body.staffdark .ah-top-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
body.staffdark .ah-range { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #94a3b8; }
body.staffdark .ah-tabbar { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 1px solid rgba(148,163,184,.16); padding-bottom: .1rem; }
body.staffdark .ah-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; font-size: .86rem; font-weight: 600; color: #94a3b8; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; }
body.staffdark .ah-tab:hover { color: #e2e8f0; }
body.staffdark .ah-tab.on { color: #6ee7b7;
    background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.06));
    border-radius: 9px 9px 0 0; box-shadow: inset 0 -3px 0 0 var(--emerald); }
body.staffdark .ah-tab.on i { color: #34d399; }
body.staffdark #ahTabBody { display: flex; flex-direction: column; gap: 1.1rem; }
body.staffdark .ah-add-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.5rem 1.25rem; }
body.staffdark .ah-add-ic { font-size: 2.4rem; color: #f59e0b; }
body.staffdark .ah-mini-tag { display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; padding: .08rem .38rem; border-radius: 6px; background: rgba(59,130,246,.18); color: #93c5fd; margin-left: .35rem; }
body.staffdark .ah-pts-in { width: 90px; }
/* Decision buttons: ONE line, never wrapping (owner mock) — dark pills with icon +
   label, red accents on destructive actions. On narrower widths the pills compress
   (smaller padding/font), and below 760px they go icon-first (labels hidden) so the
   row still fits on a single line instead of overflowing. */
body.staffdark .ah-detail-actions { display: flex; gap: .5rem; flex-wrap: nowrap; margin-bottom: 1rem; min-width: 0; }
body.staffdark .ah-detail-actions > button {
    flex: 0 1 auto; min-width: 0; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    background: rgba(13,27,46,.65); border: 1px solid rgba(148,163,184,.28);
    color: #e2e8f0; font-weight: 600; border-radius: 10px;
    padding: .55rem .9rem; font-size: .84rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
body.staffdark .ah-detail-actions > button:hover:not(:disabled) { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.45); }
body.staffdark .ah-detail-actions > button.ah-danger { color: #f87171; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.07); }
body.staffdark .ah-detail-actions > button.ah-danger:hover:not(:disabled) { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.6); }
body.staffdark .ah-detail-actions > button.ah-good { color: #6ee7b7; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.06); }
body.staffdark .ah-detail-actions > button.ah-good:hover:not(:disabled) { background: rgba(16,185,129,.14); }
body.staffdark .ah-detail-actions > button:disabled { opacity: .4; cursor: not-allowed; }
body.staffdark .ah-detail-actions > button i { flex: none; }
@media (max-width: 1080px) {
    body.staffdark .ah-detail-actions { gap: .4rem; }
    body.staffdark .ah-detail-actions > button { padding: .5rem .6rem; font-size: .76rem; gap: .35rem; }
}
@media (max-width: 760px) {
    /* Icon-first: hide the text labels (font-size 0 collapses the text node), keep
       the icons readable — the six pills stay on one line on phones. */
    body.staffdark .ah-detail-actions > button { font-size: 0; gap: 0; padding: .55rem .7rem; flex: 1 1 0; }
    body.staffdark .ah-detail-actions > button i { font-size: .95rem; }
}
/* Reinstated ex-terminated worker: auto-assignment state banner + re-enable action */
body.staffdark .ah-reinstate { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .65rem .85rem; margin-bottom: 1rem; border-radius: 10px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.4); font-size: .84rem; color: #e2e8f0; }
body.staffdark .ah-reinstate .ah-reinstate-txt { flex: 1 1 260px; }
body.staffdark .ah-reinstate .ah-reinstate-txt i { color: #f59e0b; margin-right: .35rem; }
body.staffdark .ah-reinstate .btn { flex: 0 0 auto; }
body.staffdark .ah-reinstate.ah-reinstate-on { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); }
body.staffdark .ah-reinstate.ah-reinstate-on .ah-reinstate-txt i { color: #4ade80; }
body.staffdark .ah-alert-review { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); }
body.staffdark .ah-alert-review i { color: #f87171; }

@media (max-width: 980px) {
    body.staffdark .ah-hero-grid, body.staffdark .ah-tables, body.staffdark .ah-mid-grid { grid-template-columns: 1fr; }
    body.staffdark .ah-stats-grid { grid-template-columns: 1fr 1fr; }
    body.staffdark .ah-lvl-cards { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
    body.staffdark .ah-stats-grid, body.staffdark .ah-lvl-cards, body.staffdark .ah-modal-2col { grid-template-columns: 1fr 1fr; }
    body.staffdark .ah-hero-body { flex-direction: column; align-items: flex-start; }
}

/* ── Account Health — colourful polish + department highlighting ──────────────── */
/* Gradient page title so the section reads as a premium dashboard. */
body.staffdark .ah-title { background: linear-gradient(90deg, #fff 0%, #93c5fd 55%, #a7f3d0 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Stat cards: subtle top glow in the card's accent colour + hover lift. */
body.staffdark .ah-stat { position: relative; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 10%, transparent), rgba(255,255,255,.02)); }
body.staffdark .ah-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sc) 45%, transparent);
    box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--sc) 60%, transparent); }
body.staffdark .ah-stat-num { color: #f8fafc; }
body.staffdark .ah-stat-ic { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 8%, transparent); }
/* Accent card header (Health by Department). */
body.staffdark .ah-card-h-accent { display: flex; align-items: center; gap: .5rem; }
body.staffdark .ah-card-h-accent i { color: #60a5fa; }

/* Coloured department chip — every department gets its own stable hue. */
body.staffdark .ah-dept-pill { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
    padding: .16rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.3;
    color: var(--dc, #cbd5e1); background: color-mix(in srgb, var(--dc, #64748b) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--dc, #64748b) 40%, transparent); }
body.staffdark .ah-dept-pill i { font-size: .68rem; opacity: .85; }
body.staffdark .ah-dept-pill.ah-dept-none { color: #64748b; background: rgba(148,163,184,.1); border-color: rgba(148,163,184,.2); }
/* Avatar tinted to the person's department colour. */
body.staffdark .ah-avatar { background: color-mix(in srgb, var(--dc, #6366f1) 26%, transparent);
    color: color-mix(in srgb, var(--dc, #c7d2fe) 75%, #fff); border: 1px solid color-mix(in srgb, var(--dc, #6366f1) 45%, transparent); }
body.staffdark .ah-toprow-meta { margin-top: .2rem; }

/* Source tag (Automatic / Manual) as coloured pills — icon-led. */
body.staffdark .ah-src { display: inline-flex; align-items: center; gap: .32rem; padding: .14rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
body.staffdark .ah-src i { font-size: .66rem; opacity: .9; }
body.staffdark .ah-src-auto { color: #93c5fd; background: rgba(59,130,246,.16); border: 1px solid rgba(59,130,246,.3); }
body.staffdark .ah-src-manual { color: #d8b4fe; background: rgba(168,85,247,.16); border: 1px solid rgba(168,85,247,.3); }

/* ── Warning "Type" highlight badge — colour + icon per type, glowing for severe.
   Makes the Type column read at a glance across every Account Health table. ── */
body.staffdark .ah-type { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
    padding: .22rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.25;
    color: var(--tc, #cbd5e1); background: color-mix(in srgb, var(--tc, #64748b) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--tc, #64748b) 42%, transparent);
    transition: transform .12s ease, box-shadow .12s ease; }
body.staffdark .ah-type i { font-size: .8rem; flex: 0 0 auto; }
body.staffdark tr:hover .ah-type { transform: translateY(-1px); box-shadow: 0 3px 12px color-mix(in srgb, var(--tc) 28%, transparent); }
/* Severe types (no-show, missed shift, monitoring off, GPS, abandonment) glow + the
   warning icon gently shakes so the eye lands on the worst offences first. */
body.staffdark .ah-type-high { border-color: color-mix(in srgb, var(--tc) 60%, transparent);
    background: color-mix(in srgb, var(--tc) 22%, transparent);
    animation: ahTypeGlow 2s ease-in-out infinite; }
body.staffdark .ah-type-high i { animation: ahTypeShake 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes ahTypeGlow { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc) 0%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 22%, transparent); } }
@keyframes ahTypeShake { 0%,86%,100% { transform: rotate(0); } 88% { transform: rotate(-11deg); }
    91% { transform: rotate(9deg); } 94% { transform: rotate(-7deg); } 97% { transform: rotate(4deg); } }

/* Points chip — colour scales with severity (green credit → amber → red). */
body.staffdark .ah-ptbadge { display: inline-block; min-width: 2.1rem; text-align: center;
    padding: .16rem .5rem; border-radius: 8px; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--pc, #f59e0b); background: color-mix(in srgb, var(--pc, #f59e0b) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc, #f59e0b) 40%, transparent); }
body.staffdark .ah-table .ah-num .ah-ptbadge { text-align: center; }

/* Audit-log action chip — a subtle highlighted token for the "Action" column. */
body.staffdark .ah-audit-action { display: inline-block; padding: .14rem .55rem; border-radius: 7px;
    font-size: .76rem; font-weight: 700; background: rgba(99,102,241,.16); border: 1px solid rgba(99,102,241,.3); }

/* Gentle entrance so the Account Health views feel alive when a tab loads. */
body.staffdark .ah-wrap .ah-card,
body.staffdark .ah-wrap .ah-stat,
body.staffdark .ah-wrap .ah-panel { animation: ahRise .35s ease both; }
@keyframes ahRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.staffdark .ah-table tbody tr { transition: background .12s ease; }
body.staffdark .ah-table-wide tbody tr:hover { background: rgba(148,163,184,.07); }

@media (prefers-reduced-motion: reduce) {
    body.staffdark .ah-type-high, body.staffdark .ah-type-high i,
    body.staffdark .ah-wrap .ah-card, body.staffdark .ah-wrap .ah-stat,
    body.staffdark .ah-wrap .ah-panel, body.staffdark .ah-type { animation: none; transition: none; }
}

/* Health-by-Department grid. */
body.staffdark .ah-deptgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
body.staffdark .ah-deptrow { border: 1px solid color-mix(in srgb, var(--dc) 30%, rgba(148,163,184,.16));
    border-left: 4px solid var(--dc); border-radius: 12px; padding: .8rem .9rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 9%, transparent), rgba(255,255,255,.02)); }
body.staffdark .ah-deptrow-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
/* Long / auto-generated department names truncate with an ellipsis instead of
   spilling out of the pill; the icon stays fixed and the full name is in title. */
body.staffdark .ah-deptrow-name { min-width: 0; flex: 0 1 auto; }
body.staffdark .ah-deptrow-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .ah-deptrow-meta { flex: 0 0 auto; margin-left: auto; display: flex; align-items: baseline; gap: .45rem; }
body.staffdark .ah-deptrow-n { color: #94a3b8; font-size: .76rem; white-space: nowrap; }
body.staffdark .ah-deptrow-pts { font-weight: 800; font-size: .95rem; color: #f8fafc; white-space: nowrap; }
body.staffdark .ah-deptrow-bar { height: 7px; border-radius: 6px; background: rgba(148,163,184,.16); overflow: hidden; margin: .6rem 0 .45rem; }
body.staffdark .ah-deptrow-bar span { display: block; height: 100%; border-radius: 6px; }
body.staffdark .ah-deptrow-sub { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; color: #94a3b8; flex-wrap: wrap; }
body.staffdark .ah-deptrow-worst { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }

/* ── White text in Account Health views + the Work Schedules "Weekly times",
   keeping ONLY the highlight colours (status/source/level/dept pills, AUTO tag,
   coloured point numbers, legend/level labels). User request, July 2026. Scoped
   to these views (not global) so nothing else changes. Every element that carries
   a highlight colour is excluded: class-coloured pills/badges by class, and any
   inline-coloured number/label via [style*="color"] (a positive number renders
   white; a coloured one keeps its inline colour). Icons/SVG keep their own fill. */
body.staffdark .ah-wrap, body.staffdark .ah-modal-wide,
body.staffdark .ah-wrap *:not(i):not(svg):not(path):not(circle):not(rect):not(line):not(.ah-pill):not(.ah-src):not(.ah-type):not(.ah-ptbadge):not(.ah-status-tag):not(.ah-pts-pill):not(.ah-mini-tag):not(.ah-dept-pill):not(.ah-toplvl):not(.ah-dot):not(.ah-leg-dot):not(.ah-ack-flag):not(.ah-title):not(.ah-tab):not(.ah-tab-badge):not([style*="color"]),
body.staffdark .ah-modal-wide *:not(i):not(svg):not(path):not(circle):not(rect):not(line):not(.ah-pill):not(.ah-src):not(.ah-type):not(.ah-ptbadge):not(.ah-status-tag):not(.ah-pts-pill):not(.ah-mini-tag):not(.ah-dept-pill):not(.ah-toplvl):not(.ah-dot):not(.ah-leg-dot):not(.btn):not(.ah-danger):not(.ah-good):not(.ah-tab):not(.ah-tab-badge):not([style*="color"]) {
    color: #ffffff !important;
}
/* Work Schedules — plain weekly-time chips go white; the lunch/break/finish chips
   keep their highlight colour. */
body.staffdark .ws-chip:not([class*="ws-chip-"]) { color: #ffffff; }

/* Worker Account Health "Recent Warnings" / "Warning History" cards: the old
   6/7-column tables were unreadably cramped at half-card width (Type badges
   letter-wrapping vertically, "POIN TS" headers, Reason under the Source badge,
   wrapping Status pills). The preview cards now render each warning as a stacked
   list row (.ah-wl-item): type badge + points/source/status pills on top, the
   reason on its own clamped line, then a muted date/expiry meta line. Scoped to
   .ah-tables ONLY — the full-history modal (.ah-modal-wide) and admin views keep
   their real tables. Redesign, July 2026. */
body.staffdark .ah-tables .ah-wl { display: flex; flex-direction: column; gap: .6rem; }
body.staffdark .ah-tables .ah-wl-item {
    display: block; border: 1px solid rgba(148,163,184,.14); background: rgba(255,255,255,.02);
    border-radius: 12px; padding: .7rem .85rem; cursor: pointer;
    transition: background .13s, border-color .13s;
}
body.staffdark .ah-tables .ah-wl-item:hover,
body.staffdark .ah-tables .ah-wl-item:focus-visible { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.35); outline: none; }
body.staffdark .ah-tables .ah-wl-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem .6rem; flex-wrap: wrap; }
body.staffdark .ah-tables .ah-wl-badges { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
/* Badges/pills inside the preview rows must never wrap mid-word. */
body.staffdark .ah-tables .ah-type, body.staffdark .ah-tables .ah-src,
body.staffdark .ah-tables .ah-pill, body.staffdark .ah-tables .ah-ptbadge { white-space: nowrap; }
body.staffdark .ah-tables .ah-wl-reason { margin: .5rem 0 .4rem; font-size: .84rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
body.staffdark .ah-tables .ah-wl-meta { display: flex; align-items: center; gap: .35rem 1rem; flex-wrap: wrap; font-size: .74rem; font-weight: 600; }
body.staffdark .ah-tables .ah-wl-when, body.staffdark .ah-tables .ah-wl-exp { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
body.staffdark .ah-tables .ah-wl-meta i { font-size: .72rem; opacity: .85; }
/* Buttons: keep "View All" / "View Full Warning History" on one tidy line. */
body.staffdark .ah-viewall { display: inline-flex; align-items: center; white-space: nowrap; }
body.staffdark .ah-viewfull { white-space: nowrap; }

/* ── Warning tables: kill the leaked light-theme header + row highlight ──────────
   The base stylesheet sets `th { background:#fafcfe }` and `tbody tr:hover {
   background:#f8fafc }` GLOBALLY. Inside the dark Account Health views/modals
   (which sit outside `.main`, so the dark override never reaches them) that painted
   the header bar and the hovered row white — white text on white, unreadable.
   Give the header a solid dark background (also pin it while scrolling) and swap the
   hover for a subtle dark tint so every word stays obvious on every device. The
   coloured Type / Source / Points / Status badges keep their own highlight colours. */
body.staffdark .ah-wrap .ah-table thead th,
body.staffdark .ah-modal-wide .ah-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #14233c; color: #9fb2c9;
    border-bottom: 1px solid rgba(148,163,184,.22);
}
body.staffdark .ah-wrap .ah-table tbody tr:hover,
body.staffdark .ah-wrap .ah-table tbody tr:hover td,
body.staffdark .ah-modal-wide .ah-table tbody tr:hover,
body.staffdark .ah-modal-wide .ah-table tbody tr:hover td {
    background: rgba(93,124,168,.14);
}

/* Improve-account action button (green). */
body.staffdark .btn-sm.ah-good { color: #6ee7b7; border-color: rgba(16,185,129,.4); }
body.staffdark .btn-sm.ah-good:hover:not(:disabled) { background: rgba(16,185,129,.12); }
body.staffdark .btn-sm.ah-good:disabled { opacity: .4; cursor: not-allowed; }

/* ── Drop Points modal (green goodwill theme, rides the .aw-modal chrome) ─────── */
body.staffdark .dp-modal .aw-head { background: linear-gradient(180deg, rgba(16,185,129,.12), rgba(16,185,129,0)); align-items: center; }
body.staffdark .dp-modal .dp-head-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    font-size: 1.15rem; color: #6ee7b7; background: rgba(16,185,129,.16); border: 1px solid rgba(16,185,129,.35); box-shadow: 0 0 0 4px rgba(16,185,129,.06); }
body.staffdark .dp-modal .aw-head-title { font-size: 1.15rem; font-weight: 700; color: #fff; }
body.staffdark .dp-modal .aw-head-sub { margin-top: .2rem; font-size: .82rem; color: #9fb2c9; line-height: 1.35; }
body.staffdark .dp-modal .aw-lbl { font-size: .78rem; font-weight: 600; color: #cbd5e1; }
body.staffdark .dp-modal .aw-hint { font-size: .74rem; color: #7c8ea6; }
body.staffdark .dp-modal .aw-hint b { color: #cbd5e1; }
body.staffdark .dp-modal .aw-input { width: 100%; background: #0a1626; border: 1px solid rgba(255,255,255,.14); color: #e6eef9;
    border-radius: 10px; padding: .6rem .75rem; font-size: .88rem; font-family: inherit; resize: vertical; transition: border-color .15s, box-shadow .15s; }
body.staffdark .dp-modal .aw-input:focus { outline: 0; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
body.staffdark .dp-modal .aw-step:hover { background: #143726; color: #6ee7b7; }
body.staffdark .dp-modal .aw-pts:focus { outline: 0; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
body.staffdark .dp-modal .dp-impact { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.25); }
body.staffdark .dp-modal .dp-imp-note i { color: #34d399; }
body.staffdark .dp-modal .aw-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem .85rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; cursor: pointer; }
body.staffdark .dp-modal .aw-toggle > span:first-child { display: flex; flex-direction: column; gap: .12rem; }
body.staffdark .dp-modal .aw-toggle b { font-size: .84rem; font-weight: 600; color: #e6eef9; }
body.staffdark .dp-modal .aw-toggle small { font-size: .73rem; color: #7c8ea6; }
body.staffdark .dp-modal .aw-btn-good { padding: .6rem 1.3rem; border-radius: 9px; border: 0; background: linear-gradient(180deg, #10b981, #059669);
    color: #04140d; font-size: .86rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
    box-shadow: 0 4px 14px rgba(16,185,129,.3); transition: .15s; }
body.staffdark .dp-modal .aw-btn-good:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(16,185,129,.42); }

/* ── Knowledge Base (staff Resources tab) ─────────────────────────────────────
   The staff Resources tab redesigned as a dark Knowledge Base landing. All rules
   scoped under body.staffdark so nothing leaks into the student portal. */
body.staffdark .kb-wrap { color: #e8eefc; max-width: 1240px; margin: 0 auto; }
body.staffdark .kb-head h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 .25rem; color: #fff; }
body.staffdark .kb-head .kb-sub { color: #94a6c9; font-size: .95rem; margin-bottom: 1.1rem; }
body.staffdark .kb-head { position: relative; }
body.staffdark .kb-head .kb-new { position: absolute; right: 0; top: 0; }
@media (max-width: 720px) {
    body.staffdark .kb-head .kb-new { position: static; display: inline-flex; margin-bottom: .6rem; }
}
/* Admin management strip on KB cards (admin Resources tab). */
.rsc-card-admin { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(148, 166, 201, .22); }
.rsc-card-depts { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; font-size: .78rem; }
.rsc-card-acts { display: flex; gap: 4px; flex-shrink: 0; }
/* "Daily required" pill on non-video cards (videos use the thumbnail overlay). */
.rsc-doc-req { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; background: #7c2d12; color: #fdba74; border-radius: 7px; padding: .16rem .5rem; font-size: .7rem; font-weight: 700; white-space: nowrap; }
body.staffdark .kb-search { position: relative; margin-bottom: 1rem; }
body.staffdark .kb-search > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #6f83a8; }
body.staffdark .kb-search input {
    width: 100%; box-sizing: border-box; padding: .85rem 1rem .85rem 2.6rem;
    background: #0e1830; border: 1px solid #26365a; border-radius: 12px; color: #eaf0ff; font-size: .95rem;
}
body.staffdark .kb-search input:focus { outline: none; border-color: #4f7cf6; box-shadow: 0 0 0 3px rgba(79,124,246,.18); }
body.staffdark .kb-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }
body.staffdark .kb-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; cursor: pointer;
    background: #0f1a33; border: 1px solid #26365a; border-radius: 10px;
    color: #a9bbdd; font-size: .85rem; font-weight: 600; transition: all .15s;
}
body.staffdark .kb-chip:hover { border-color: #3a5490; color: #dbe6ff; }
body.staffdark .kb-chip.active { background: var(--emerald); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.35); }

body.staffdark .kb-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.2rem; align-items: start; }
body.staffdark .kb-col-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
body.staffdark .kb-col-side { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }

/* Cards */
body.staffdark .kb-card { background: #0d1730; border: 1px solid #22345a; border-radius: 16px; padding: 1.1rem 1.2rem; }
body.staffdark .kb-card-title { font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: .8rem; }
body.staffdark .kb-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
body.staffdark .kb-card-head .kb-card-title { margin: 0; }
body.staffdark .kb-sub-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7d90b6; margin: 1rem 0 .6rem; }
body.staffdark .kb-empty { color: #7386ab; font-size: .88rem; padding: .6rem 0; }

/* Hero */
body.staffdark .kb-hero {
    display: flex; align-items: center; gap: 1rem; overflow: hidden; position: relative;
    background: radial-gradient(1200px 300px at 90% -40%, rgba(124,92,252,.35), transparent),
                linear-gradient(135deg,#122246,#0c1730); border: 1px solid #2a3f6b; border-radius: 18px; padding: 1.6rem 1.7rem;
}
body.staffdark .kb-hero-txt { flex: 1; min-width: 0; }
body.staffdark .kb-hero-txt h2 { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0 0 .5rem; }
body.staffdark .kb-hero-txt p { color: #b6c6e6; font-size: .92rem; max-width: 460px; margin: 0 0 1rem; }
body.staffdark .kb-hero-btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; cursor: pointer;
    background: linear-gradient(135deg,#3b6ef5,#7c5cfc); color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: .88rem;
}
body.staffdark .kb-hero-btn:hover { filter: brightness(1.08); }
body.staffdark .kb-hero-art { font-size: 4.5rem; color: #6f8fe0; opacity: .85; padding-right: .5rem; }

/* Browse by category */
body.staffdark .kb-sec-title { font-size: 1.05rem; font-weight: 700; color: #fff; }
body.staffdark .kb-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
body.staffdark .kb-cat-card {
    display: flex; flex-direction: column; gap: .5rem; text-align: left; cursor: pointer;
    background: #0d1730; border: 1px solid #22345a; border-radius: 14px; padding: 1rem; transition: all .15s; color: inherit;
}
body.staffdark .kb-cat-card:hover { border-color: #3f5da0; transform: translateY(-2px); }
body.staffdark .kb-cat-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; }
body.staffdark .kb-cat-ic.blue { background: rgba(59,110,245,.16); color: #6f9bff; }
body.staffdark .kb-cat-ic.green { background: rgba(34,197,94,.16); color: #55d98a; }
body.staffdark .kb-cat-ic.purple { background: rgba(139,92,246,.16); color: #b18bff; }
body.staffdark .kb-cat-ic.amber { background: rgba(245,158,11,.16); color: #ffc14d; }
body.staffdark .kb-cat-ic.teal { background: rgba(20,184,166,.16); color: #4fd8c4; }
body.staffdark .kb-cat-name { font-weight: 700; color: #fff; font-size: .95rem; }
body.staffdark .kb-cat-desc { color: #8598bd; font-size: .78rem; line-height: 1.3; flex: 1; }
body.staffdark .kb-cat-foot { display: flex; align-items: center; justify-content: space-between; color: #9fb2d6; font-size: .8rem; font-weight: 600; margin-top: .3rem; }
body.staffdark .kb-cat-foot i { color: #5a74ad; }

/* Lower row: recently updated + need help */
body.staffdark .kb-lower { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.2rem; }
body.staffdark .kb-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #1b2a49; cursor: pointer; }
body.staffdark .kb-row:last-of-type { border-bottom: none; }
body.staffdark .kb-row:hover .kb-row-title { color: #fff; }
body.staffdark .kb-row-ic { color: #5f79b0; }
body.staffdark .kb-row-title { flex: 1; min-width: 0; color: #cdd9f2; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .kb-row-time { color: #7688ac; font-size: .78rem; white-space: nowrap; }
body.staffdark .kb-row-chev { color: #4a608f; font-size: .75rem; }
body.staffdark .kb-tag { font-size: .7rem; font-weight: 700; padding: .18rem .5rem; border-radius: 6px; white-space: nowrap; }
body.staffdark .kb-tag.blue { background: rgba(59,110,245,.18); color: #85a9ff; }
body.staffdark .kb-tag.green { background: rgba(34,197,94,.18); color: #63e19a; }
body.staffdark .kb-tag.purple { background: rgba(139,92,246,.18); color: #bd9bff; }
body.staffdark .kb-tag.amber { background: rgba(245,158,11,.18); color: #ffcb63; }
body.staffdark .kb-tag.teal { background: rgba(20,184,166,.18); color: #5fe0cd; }
body.staffdark .kb-link { display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; cursor: pointer; color: #6f9bff; font-weight: 700; font-size: .85rem; padding: .7rem 0 0; }
body.staffdark .kb-link.center { width: 100%; justify-content: center; padding-top: .8rem; }
body.staffdark .kb-link:hover { color: #9dbcff; }
body.staffdark .kb-link-sm { background: none; border: none; cursor: pointer; color: #6f9bff; font-weight: 600; font-size: .8rem; }
body.staffdark .kb-link-sm:hover { color: #9dbcff; }
body.staffdark .kb-help { display: flex; align-items: center; gap: .8rem; overflow: hidden; }
body.staffdark .kb-help-txt { flex: 1; min-width: 0; }
body.staffdark .kb-help-txt p { color: #97a9cd; font-size: .85rem; margin: 0 0 .9rem; }
body.staffdark .kb-help-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; cursor: pointer; background: #16294d; border: 1px solid #3a5490; color: #bcd0f5; border-radius: 9px; font-weight: 700; font-size: .84rem; }
body.staffdark .kb-help-btn:hover { background: #1d345f; color: #fff; }
body.staffdark .kb-help-art { font-size: 3.4rem; color: #34518c; opacity: .6; }

/* Training sidebar card */
body.staffdark .kb-continue { background: #0b1428; border: 1px solid #26365a; border-radius: 13px; padding: .9rem 1rem; }
body.staffdark .kb-cont-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
body.staffdark .kb-cont-head > span:first-child { display: inline-flex; align-items: center; gap: .45rem; color: #8fb0ff; font-weight: 700; font-size: .82rem; }
body.staffdark .kb-inprog { font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 20px; background: rgba(139,92,246,.2); color: #c3a6ff; }
body.staffdark .kb-inprog.start { background: rgba(148,163,184,.2); color: #b7c3d9; }
body.staffdark .kb-cont-name { color: #fff; font-weight: 600; font-size: .9rem; margin-bottom: .6rem; }
body.staffdark .kb-bar { height: 8px; background: #1a2848; border-radius: 20px; overflow: hidden; }
body.staffdark .kb-bar-fill { height: 100%; background: linear-gradient(90deg,#4f7cf6,#8b5cf6); border-radius: 20px; transition: width .4s; }
body.staffdark .kb-bar-row { display: flex; align-items: center; justify-content: space-between; margin-top: .55rem; }
body.staffdark .kb-bar-row > span { color: #93a6ca; font-size: .78rem; font-weight: 600; }
body.staffdark .kb-cont-btn { padding: .45rem .95rem; cursor: pointer; background: linear-gradient(135deg,#3b6ef5,#7c5cfc); border: none; border-radius: 8px; color: #fff; font-weight: 700; font-size: .8rem; }
body.staffdark .kb-cont-btn:hover { filter: brightness(1.08); }
body.staffdark .kb-train-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
body.staffdark .kb-train-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: .9rem; flex-shrink: 0; }
body.staffdark .kb-train-ic.c0 { background: rgba(59,110,245,.9); }
body.staffdark .kb-train-ic.c1 { background: rgba(139,92,246,.9); }
body.staffdark .kb-train-ic.c2 { background: rgba(20,184,166,.9); }
body.staffdark .kb-train-ic.c3 { background: rgba(236,72,153,.9); }
body.staffdark .kb-train-ic.c4 { background: rgba(245,158,11,.9); }
body.staffdark .kb-train-meta { flex: 1; min-width: 0; }
body.staffdark .kb-train-name { color: #dbe6fb; font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .kb-train-time { color: #7688ac; font-size: .76rem; }
body.staffdark .kb-start { padding: .4rem .85rem; cursor: pointer; background: #16294d; border: 1px solid #3a5490; color: #bcd0f5; border-radius: 8px; font-weight: 700; font-size: .78rem; }
body.staffdark .kb-start:hover { background: #1d345f; color: #fff; }
body.staffdark .kb-browse-all { width: 100%; margin-top: .9rem; padding: .6rem; cursor: pointer; background: rgba(124,92,252,.12); border: 1px solid #3d4f86; color: #b6a0ff; border-radius: 10px; font-weight: 700; font-size: .84rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
body.staffdark .kb-browse-all:hover { background: rgba(124,92,252,.22); color: #d3c6ff; }

/* Popular articles */
body.staffdark .kb-pop-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #1b2a49; cursor: pointer; }
body.staffdark .kb-pop-row:last-of-type { border-bottom: none; }
body.staffdark .kb-pop-row > i:first-child { color: #5f79b0; }
body.staffdark .kb-pop-row > span { flex: 1; min-width: 0; color: #cdd9f2; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .kb-pop-row:hover > span { color: #fff; }
body.staffdark .kb-pop-row > i:last-child { color: #4a608f; font-size: .75rem; }

/* Training "mark complete" bar inside the detail view */
body.staffdark .kb-complete-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid #22345a; }
body.staffdark .kb-done-tag { display: inline-flex; align-items: center; gap: .45rem; color: #55d98a; font-weight: 700; font-size: .9rem; }

/* Contact / how-to modals */
body.staffdark .kb-contact-card, .kb-contact-card { max-width: 440px; }
.kb-reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.kb-reader-head h2 { margin: 0; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .5rem; }
.kb-contact-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.kb-contact-row { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1px solid #26365a; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; }
.kb-contact-row:hover { border-color: #4f7cf6; }
.kb-howto { margin: .5rem 0 0; padding-left: 1.1rem; line-height: 1.7; }
.kb-howto li { margin-bottom: .4rem; }

/* Responsive */
@media (max-width: 1000px) {
    body.staffdark .kb-grid { grid-template-columns: 1fr; }
    body.staffdark .kb-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
    body.staffdark .kb-cat-grid { grid-template-columns: repeat(2, 1fr); }
    body.staffdark .kb-lower { grid-template-columns: 1fr; }
    body.staffdark .kb-hero-art { display: none; }
}

/* ══════════ Video resources: cards, player, recorder studio, training gate ══════════ */
/* Video card (KB gallery + admin browser) */
.rsc-card-video .rsc-vthumb { margin: -4px -4px 10px; }
.rsc-vthumb {
    position: relative; display: block; width: calc(100% + 8px); aspect-ratio: 16/9;
    border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0;
    background: #0b1220;
}
.rsc-vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsc-vthumb-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #475569; font-size: 2rem; background: linear-gradient(135deg, #0f172a, #1e293b);
}
.rsc-vplay {
    position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(15, 23, 42, .72); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 1.15rem; padding-left: 4px;
    border: 2px solid rgba(255,255,255,.75); transition: transform .15s, background .15s;
}
.rsc-vthumb:hover .rsc-vplay { transform: scale(1.08); background: rgba(37, 99, 235, .85); }
.rsc-vdur {
    position: absolute; right: 8px; bottom: 8px; background: rgba(2, 6, 23, .8); color: #fff;
    font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px;
}
.rsc-vreq {
    position: absolute; left: 8px; top: 8px; background: rgba(217, 119, 6, .92); color: #fff;
    font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
}
.rsc-views { margin-left: auto; color: #94a3b8; font-size: .78rem; display: inline-flex; align-items: center; gap: 5px; }
.rsc-card-video .rsc-card-foot { display: flex; align-items: center; }
.rsc-req-row { display: flex; align-items: flex-start; gap: 9px; font-weight: 400 !important; cursor: pointer; line-height: 1.45; }
.rsc-req-row input { margin-top: 3px; flex: 0 0 auto; }

/* Required-viewing schedule panel (inside the resource editor) */
.rsc-sched { margin-top: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; display: flex; flex-direction: column; gap: 8px; }
.rsc-sched-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rsc-sched-row > label { flex: 0 0 76px; font-size: .8rem; font-weight: 600; color: #475569; margin: 0; }
.rsc-sched-row select, .rsc-sched-row input[type="date"] { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .85rem; background: #fff; }
.rsc-sched-n { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: #475569; }
.rsc-sched-n input { width: 70px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .85rem; }
.rsc-sched-end { font-size: .78rem; }

/* Full-screen video player overlay */
.vplay-backdrop {
    position: fixed; inset: 0; z-index: 1200; background: rgba(2, 6, 23, .88);
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.vplay-card {
    width: min(1100px, 100%); max-height: 96vh; display: flex; flex-direction: column;
    background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.vplay-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.vplay-title { color: #f1f5f9; font-weight: 800; font-size: 1.02rem; }
.vplay-desc { color: #94a3b8; font-size: .82rem; margin-top: 2px; }
.vplay-x {
    margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid #334155;
    background: #1e293b; color: #cbd5e1; cursor: pointer; font-size: 1rem;
}
.vplay-x:hover { background: #334155; color: #fff; }
.vplay-card video { width: 100%; max-height: 72vh; background: #000; display: block; outline: none; }
.vplay-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 16px; color: #94a3b8; font-size: .8rem;
}
.vplay-done { color: #34d399; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* Daily watch-before-work gate */
.twg-view {
    min-height: 100vh; min-height: 100dvh; background: linear-gradient(160deg, #0b1220, #111c33 55%, #0b1220);
    padding: 18px clamp(14px, 4vw, 48px) 48px; color: #e2e8f0;
}
.twg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(20px, 5vh, 52px); }
.twg-brand { font-weight: 800; color: #93c5fd; display: inline-flex; align-items: center; gap: 9px; }
.twg-view .btn-ghost { color: #cbd5e1; border-color: #334155; }
.twg-hero { text-align: center; max-width: 620px; margin: 0 auto clamp(22px, 4vh, 40px); }
.twg-ic {
    width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; font-size: 1.9rem;
    background: rgba(37, 99, 235, .16); color: #60a5fa; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(96, 165, 250, .35);
}
.twg-hero h1 { color: #f8fafc; font-size: clamp(1.3rem, 3.2vw, 1.7rem); margin-bottom: 8px; }
.twg-hero p { color: #94a3b8; font-size: .92rem; line-height: 1.55; }
.twg-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.twg-card {
    display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: center;
    background: #101a2f; border: 1px solid #1e293b; border-radius: 14px; padding: 14px;
}
.twg-card .rsc-vthumb { width: 100%; margin: 0; }
.twg-card-title { font-weight: 800; color: #f1f5f9; margin-bottom: 4px; }
.twg-card-desc { color: #94a3b8; font-size: .84rem; margin-bottom: 10px; }
.twg-card-quiz {
    color: #fbbf24; font-size: .78rem; font-weight: 700; margin-bottom: 10px;
    display: inline-flex; align-items: center; gap: 6px;
}
@media (max-width: 640px) { .twg-card { grid-template-columns: 1fr; } }

/* Video quiz — badge, admin builder (light editor modal) and player panel (dark) */
.rsc-vquiz {
    position: absolute; left: 8px; bottom: 8px; background: rgba(37, 99, 235, .92); color: #fff;
    font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
}
.rsc-quiz-set { display: flex; flex-direction: column; gap: 9px; }
.rsc-quiz-retry { font-size: .86rem; color: #475569; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rsc-quiz-retry select { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 8px; }
.rsc-quiz-build { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 12px; }
.rsc-quiz-qs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.rsc-quiz-q { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.rsc-quiz-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rsc-quiz-q-n { font-weight: 800; color: #2563eb; font-size: .82rem; }
.rsc-quiz-q-head select { padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .82rem; }
.rsc-quiz-q > input[type="text"] { width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 8px; }
.rsc-quiz-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.rsc-quiz-opt { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.rsc-quiz-opt input[type="text"] { flex: 1; padding: 5px 9px; border: 1px solid #cbd5e1; border-radius: 8px; }
.rsc-quiz-opt-fixed { font-weight: 600; }
.rsc-quiz-del {
    flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid #e2e8f0; border-radius: 7px;
    background: #fff; color: #94a3b8; cursor: pointer; margin-left: auto;
}
.rsc-quiz-del:hover { color: #dc2626; border-color: #fecaca; }
.rsc-quiz-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rsc-qres { max-width: 720px; }
.vplay-quiz { padding: 14px 16px; overflow-y: auto; }
.vplay-quiz-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.vplay-quiz-head i { color: #60a5fa; font-size: 1.15rem; margin-top: 2px; }
.vplay-quiz-head b { color: #f1f5f9; display: block; }
.vplay-quiz-head span { color: #94a3b8; font-size: .84rem; }
.vplay-quiz-qs { display: flex; flex-direction: column; gap: 14px; }
.vplay-quiz-q { background: #101a2f; border: 1px solid #1e293b; border-radius: 12px; padding: 12px 14px; }
.vplay-quiz-qt { color: #e2e8f0; font-weight: 700; margin-bottom: 8px; }
.vplay-quiz-opt {
    display: flex; align-items: center; gap: 9px; color: #cbd5e1; font-size: .9rem;
    padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.vplay-quiz-opt:hover { background: rgba(37, 99, 235, .12); }
.vplay-quiz-msg { margin-top: 10px; font-size: .88rem; min-height: 1.2em; }
.vplay-quiz-msg.bad { color: #f87171; }
.vplay-quiz-acts { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.vplay-quiz-pass {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    color: #34d399; padding: 18px 10px;
}
.vplay-quiz-pass i { font-size: 2rem; }
.vplay-quiz-pass b { color: #f1f5f9; font-size: 1.05rem; }
.vplay-quiz-pass span { color: #94a3b8; font-size: .86rem; }

/* Screen Recorder studio (admin) — dark, scoped under .srx-* */
.srx-backdrop {
    position: fixed; inset: 0; z-index: 1190; background: rgba(2, 6, 23, .9);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.srx-card {
    width: min(1180px, 100%); max-height: 96vh; display: flex; flex-direction: column;
    background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; overflow: hidden;
    color: #e2e8f0; box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.srx-head { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid #1e293b; }
.srx-title { font-weight: 800; color: #f1f5f9; display: inline-flex; align-items: center; gap: 9px; }
.srx-title i { color: #f87171; }
.srx-keys { display: flex; gap: 7px; margin-left: 6px; }
.srx-keys span { font-size: .7rem; font-weight: 700; color: #94a3b8; background: #1e293b; border: 1px solid #334155; border-radius: 6px; padding: 2px 8px; }
.srx-x { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; cursor: pointer; }
.srx-x:hover { background: #334155; color: #fff; }
.srx-body { overflow: auto; }
.srx-setup { text-align: center; padding: clamp(24px, 5vh, 48px) 22px; max-width: 560px; margin: 0 auto; }
.srx-setup-art {
    width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 22px; font-size: 2.1rem;
    background: rgba(37, 99, 235, .15); color: #60a5fa; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(96, 165, 250, .3);
}
.srx-setup h2 { color: #f8fafc; margin-bottom: 8px; }
.srx-setup p { color: #94a3b8; font-size: .9rem; margin-bottom: 20px; }
.srx-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; text-align: left; }
.srx-opt {
    display: flex; align-items: center; gap: 10px; background: #101a2f; border: 1px solid #1e293b;
    border-radius: 11px; padding: 11px 13px; cursor: pointer; font-size: .88rem; color: #cbd5e1;
}
.srx-opt input { accent-color: #2563eb; }
.srx-opt i { color: #60a5fa; width: 18px; text-align: center; }
.srx-start { width: 100%; padding: 12px; font-size: .95rem; }
.srx-note { color: #64748b; font-size: .78rem; margin-top: 12px; }
@media (max-width: 560px) { .srx-opts { grid-template-columns: 1fr; } }
.srx-live { display: flex; flex-direction: column; }
.srx-live-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #1e293b; }
.srx-live-sp { flex: 1; }
.srx-rec { display: inline-flex; align-items: center; gap: 8px; color: #f87171; font-weight: 800; font-size: .84rem; }
.srx-rec.paused { color: #fbbf24; }
.srx-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: srxBlink 1.1s infinite; }
.srx-rec.paused .srx-dot { animation: none; }
@keyframes srxBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.srx-timer { font-variant-numeric: tabular-nums; font-weight: 800; color: #f1f5f9; }
.srx-stage { background: #000; display: flex; align-items: center; justify-content: center; }
.srx-stage video { width: 100%; max-height: 64vh; display: block; }
.srx-review { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
.srx-review-stage { background: #000; display: flex; align-items: center; justify-content: center; }
.srx-review-stage video { width: 100%; max-height: 78vh; display: block; }
.srx-form { padding: 18px; overflow: auto; max-height: 78vh; }
.srx-form-meta { color: #34d399; font-weight: 700; font-size: .85rem; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.srx-form .fld { margin-bottom: 12px; }
.srx-form label { color: #cbd5e1; }
.srx-form input[type="text"], .srx-form select, .srx-form textarea {
    background: #101a2f; border-color: #334155; color: #f1f5f9;
}
.srx-form .rsc-dept-pick { background: #101a2f; border-color: #334155; }
.srx-form .rsc-dept-opt { color: #cbd5e1; }
.srx-review-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 860px) { .srx-review { grid-template-columns: 1fr; } .srx-form, .srx-review-stage video { max-height: none; } }

/* "Reassigned" badge — a lead redistributed after its owner's account was terminated */
.reassigned-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 3px; padding: 1px 7px;
    font-size: 10.5px; font-weight: 700; line-height: 1.5;
    color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
    border-radius: 999px; white-space: nowrap;
}
body.staffdark .reassigned-badge { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.4); color: #fbbf24; }

/* ── Load-failure error card (Task #334 — blank-screen killer) ─────────────── */
.load-fail {
    max-width: 420px; margin: 3.5rem auto; padding: 2.2rem 1.8rem;
    text-align: center; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}
.load-fail-ic {
    width: 52px; height: 52px; margin: 0 auto 1rem; display: flex;
    align-items: center; justify-content: center; border-radius: 50%;
    background: #fef2f2; color: #dc2626; font-size: 1.4rem;
}
.load-fail h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: #0f172a; }
.load-fail p { margin: 0 0 1.2rem; font-size: .88rem; color: #64748b; line-height: 1.5; word-break: break-word; }
.load-fail .load-fail-retry { min-width: 130px; justify-content: center; }
body.staffdark .load-fail { background: #131c2e; border-color: #24334d; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
body.staffdark .load-fail h3 { color: #e2e8f0; }
body.staffdark .load-fail p { color: #8fa3c0; }
body.staffdark .load-fail-ic { background: rgba(220, 38, 38, .14); color: #f87171; }

/* ── Lead Owner picker + owner cell avatars (Task #346) ────────────────────── */
.st-ownercell { display: flex; align-items: center; gap: 7px; }
.st-owner-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-av {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden; background: #16294a;
    border: 1px solid rgba(255, 255, 255, .14); vertical-align: middle;
}
.stop-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stop-av-ini { color: #cbd5e1; font-weight: 700; letter-spacing: .3px; }
/* Light-theme (non-staffdark) fallback so the cell avatar never goes invisible. */
body:not(.staffdark) .stop-av { background: #e2e8f0; border-color: #cbd5e1; }
body:not(.staffdark) .stop-av-ini { color: #475569; }

/* Dark-native picker panel (matches the owner's mock). */
.modal:has(.stop-panel) {
    background: #0d1b2e; border: 1px solid rgba(148, 163, 184, .22);
    max-width: 380px; width: min(380px, 94vw); padding: 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.stop-panel { display: flex; flex-direction: column; max-height: min(78vh, 620px); }
.stop-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 6px;
}
.stop-title {
    font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
    color: #dbe6f5;
}
.stop-head-r { display: flex; align-items: center; gap: 10px; }
.stop-head .close-x { color: #8fa3c0; }
.stop-head .close-x:hover { color: #e2e8f0; }
.stop-unassign {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .35);
    color: #f87171; border-radius: 999px; padding: 4px 10px; font-size: 11.5px;
    font-weight: 600; cursor: pointer;
}
.stop-unassign:hover { background: rgba(248, 113, 113, .18); }
.stop-sub { padding: 0 16px 10px; font-size: 12px; color: #8fa3c0; }
.stop-list { flex: 1 1 auto; overflow-y: auto; border-top: 1px solid rgba(148, 163, 184, .14); }
.stop-row {
    display: flex; align-items: center; gap: 11px; padding: 10px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.stop-row.cur { background: rgba(59, 130, 246, .08); }
.stop-meta { flex: 1 1 auto; min-width: 0; }
.stop-name { font-size: 13.5px; font-weight: 700; color: #eef4fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-email { font-size: 11.5px; color: #8fa3c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-pick {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #2563eb; border: none; color: #fff; font-size: 13px; cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.stop-pick:hover { background: #3b82f6; transform: scale(1.06); }
.stop-pick:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.stop-curpill {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(52, 211, 153, .16); border: 1px solid rgba(52, 211, 153, .45);
    color: #34d399; font-size: 12px;
}
.stop-empty { padding: 22px 16px; text-align: center; font-size: 12.5px; color: #8fa3c0; }
.stop-pager {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px 14px;
    border-top: 1px solid rgba(148, 163, 184, .14);
}
.stop-pg {
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13, 27, 46, .65); border: 1px solid rgba(148, 163, 184, .28);
    color: #e2e8f0; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.stop-pg:hover:not(:disabled) { background: #16294a; border-color: rgba(148, 163, 184, .45); }
.stop-pg.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.stop-pg:disabled { opacity: .4; cursor: default; }
.stop-pg:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
/* ── Camera + wired-connection compliance (Task #367) ─────────────────────── */
/* Friendly reminder overlay — full-screen blocking, gentle copy, no counts. */
body.staffdark .comp-pop {
    position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
    background: rgba(2, 6, 23, .82); backdrop-filter: blur(4px); padding: 18px;
}
body.staffdark .comp-pop-card {
    background: #0f172a; border: 1px solid rgba(148, 163, 184, .3); border-radius: 20px;
    padding: 38px 34px 30px; max-width: 520px; width: 100%; text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: compPopIn .18s ease-out;
}
@keyframes compPopIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
body.staffdark .comp-pop-icon {
    width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
    background: rgba(96, 165, 250, .14); color: #60a5fa; border: 1px solid rgba(96, 165, 250, .4);
}
body.staffdark .comp-pop-title { font-size: 1.35rem; font-weight: 800; color: #f1f5f9; margin-bottom: 8px; }
body.staffdark .comp-pop-msg { color: #cbd5e1; font-size: 1.02rem; line-height: 1.5; margin-bottom: 20px; }
body.staffdark .comp-pop-ok { display: block; width: 100%; }
@media (prefers-reduced-motion: reduce) {
    body.staffdark .comp-pop-card { animation: none; }
}

/* Camera Compliance report card (Reports tab). */
.cc-card { margin-top: 1.4rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; }
body.staffdark .cc-card { background: #0f172a; border-color: rgba(148, 163, 184, .25); }
.cc-card .rep-card-head h3 { margin: 0 0 4px; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.cc-card .rep-card-head { margin-bottom: 12px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cc-table th { text-align: left; padding: 8px 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.cc-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
body.staffdark .cc-table th { color: #94a3b8; border-bottom-color: rgba(148, 163, 184, .25); }
body.staffdark .cc-table td { border-bottom-color: rgba(148, 163, 184, .12); }
.cc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.cc-ok  { background: rgba(52, 211, 153, .14); color: #059669; }
.cc-bad { background: rgba(248, 113, 113, .14); color: #dc2626; }
.cc-unk { background: rgba(148, 163, 184, .16); color: #64748b; }
.cc-na  { background: rgba(148, 163, 184, .1); color: #94a3b8; }
.cc-exc { background: rgba(96, 165, 250, .14); color: #2563eb; }
body.staffdark .cc-ok  { color: #34d399; }
body.staffdark .cc-bad { color: #f87171; }
body.staffdark .cc-unk, body.staffdark .cc-na { color: #94a3b8; }
body.staffdark .cc-exc { color: #60a5fa; }
.cc-live { color: #059669; font-weight: 700; }
body.staffdark .cc-live { color: #34d399; }
.cc-actions { text-align: right; white-space: nowrap; }
.cc-actions .btn { margin-left: 6px; }

/* ── Admin Knowledge Base dashboard (dark, owner mock) ─────────────────────────
   Everything scoped under body.staffdark .kbd-wrap so nothing leaks into the
   student portal or the staff (non-admin) Knowledge Base. */
body.staffdark .kbd-wrap { background: #0a1428; border-radius: 16px; padding: 1.1rem 1.2rem 0.8rem; color: #e7eefa; }
body.staffdark .kbd-wrap .kbd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
body.staffdark .kbd-wrap .kbd-head-txt h2 { color: #fff; font-size: 1.45rem; margin: 0 0 2px; }
body.staffdark .kbd-wrap .kbd-head-txt p { color: #8ba3c7; font-size: .85rem; margin: 0; }
body.staffdark .kbd-wrap .kbd-head-acts { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
body.staffdark .kbd-wrap .kbd-btn-ghost { background: #12294d; border: 1px solid #33517d; color: #dbe7f8; border-radius: 9px; padding: .5rem .85rem; font-size: .85rem; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-btn-ghost:hover { border-color: #60a5fa; color: #fff; }
body.staffdark .kbd-wrap .kbd-bell { background: #12294d; border: 1px solid #33517d; color: #dbe7f8; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-bell:hover { border-color: #60a5fa; color: #fff; }
body.staffdark .kbd-wrap .kbd-ava { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
body.staffdark .kbd-wrap .kbd-topgrid { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: stretch; margin-bottom: .9rem; }
body.staffdark .kbd-wrap .kbd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
body.staffdark .kbd-wrap .kbd-kpi { background: #101f3d; border: 1px solid #22406b; border-radius: 13px; padding: .75rem .8rem; display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }
body.staffdark .kbd-wrap .kbd-kpi-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-kpi-ic.blue { background: rgba(59,130,246,.18); color: #60a5fa; }
body.staffdark .kbd-wrap .kbd-kpi-ic.cyan { background: rgba(34,211,238,.15); color: #22d3ee; }
body.staffdark .kbd-wrap .kbd-kpi-ic.green { background: rgba(34,197,94,.16); color: #4ade80; }
body.staffdark .kbd-wrap .kbd-kpi-ic.orange { background: rgba(245,158,11,.16); color: #fbbf24; }
body.staffdark .kbd-wrap .kbd-kpi-ic.purple { background: rgba(168,85,247,.16); color: #c084fc; }
body.staffdark .kbd-wrap .kbd-kpi-label { color: #8ba3c7; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .kbd-wrap .kbd-kpi-n { color: #fff; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
body.staffdark .kbd-wrap .kbd-delta { font-size: .7rem; color: #8ba3c7; display: block; }
body.staffdark .kbd-wrap .kbd-delta.up { color: #4ade80; }
body.staffdark .kbd-wrap .kbd-delta.down { color: #f87171; }
body.staffdark .kbd-wrap .kbd-datecard { background: #101f3d; border: 1px solid #22406b; border-radius: 13px; padding: .75rem .9rem; display: flex; gap: .6rem; align-items: center; color: #dbe7f8; }
body.staffdark .kbd-wrap .kbd-datecard i { color: #60a5fa; font-size: 1.1rem; }
body.staffdark .kbd-wrap .kbd-date { font-size: .82rem; font-weight: 700; color: #fff; white-space: nowrap; }
body.staffdark .kbd-wrap .kbd-time { font-size: .74rem; color: #8ba3c7; }
body.staffdark .kbd-wrap .kbd-filters { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
body.staffdark .kbd-wrap .kbd-search { flex: 1 1 260px; display: flex; align-items: center; gap: .5rem; background: #101f3d; border: 1px solid #33517d; border-radius: 10px; padding: .5rem .75rem; color: #8ba3c7; }
body.staffdark .kbd-wrap .kbd-search input { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: .87rem; min-width: 0; }
body.staffdark .kbd-wrap .kbd-search input::placeholder { color: #8ba3c7; }
body.staffdark .kbd-wrap .kbd-filters select { background: #101f3d; border: 1px solid #33517d; color: #dbe7f8; border-radius: 10px; padding: .5rem .6rem; font-size: .82rem; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-chiprow { display: flex; align-items: center; gap: .6rem; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; }
body.staffdark .kbd-wrap .kbd-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
body.staffdark .kbd-wrap .kbd-chip { background: #101f3d; border: 1px solid #33517d; color: #dbe7f8; border-radius: 999px; padding: .42rem .8rem; font-size: .8rem; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-chip:hover { border-color: #60a5fa; color: #fff; }
body.staffdark .kbd-wrap .kbd-chip.active { background: #10b981; border-color: #10b981; color: #fff; }
body.staffdark .kbd-wrap .kbd-chip.vid.active { background: #10b981; border-color: #10b981; }
body.staffdark .kbd-wrap .kbd-chip-n { opacity: .75; font-size: .72rem; margin-left: 2px; }
body.staffdark .kbd-wrap .kbd-viewtog { display: flex; gap: .3rem; }
body.staffdark .kbd-wrap .kbd-tog { background: #101f3d; border: 1px solid #33517d; color: #8ba3c7; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-tog.active { color: #fff; border-color: var(--emerald); background: var(--emerald); }
body.staffdark .kbd-wrap .kbd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: .9rem; align-items: start; }
body.staffdark .kbd-wrap .kbd-sec { background: #0e1c38; border: 1px solid #1d3a63; border-radius: 15px; padding: .9rem; margin-bottom: .9rem; }
body.staffdark .kbd-wrap .kbd-sec-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; }
body.staffdark .kbd-wrap .kbd-sec-ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(59,130,246,.18); color: #60a5fa; display: flex; align-items: center; justify-content: center; }
body.staffdark .kbd-wrap .kbd-sec-title { color: #fff; font-weight: 700; font-size: 1rem; }
body.staffdark .kbd-wrap .kbd-sec-sub { color: #8ba3c7; font-size: .76rem; }
body.staffdark .kbd-wrap .kbd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .7rem; }
body.staffdark .kbd-wrap .kbd-cards.list { grid-template-columns: 1fr; }
body.staffdark .kbd-wrap .kbd-card { background: #13284c; border: 1px solid #2e4e7e; border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
body.staffdark .kbd-wrap .kbd-card.list { flex-direction: row; align-items: stretch; }
body.staffdark .kbd-wrap .kbd-card.list .kbd-thumb, body.staffdark .kbd-wrap .kbd-card.list .kbd-dochead { width: 190px; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; background: #0a1428; border: none; padding: 0; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.staffdark .kbd-wrap .kbd-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #33517d; font-size: 1.6rem; }
body.staffdark .kbd-wrap .kbd-play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%; background: rgba(10,20,40,.72); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; pointer-events: none; }
body.staffdark .kbd-wrap .kbd-thumb:hover .kbd-play { background: #2563eb; }
body.staffdark .kbd-wrap .kbd-dur { position: absolute; right: 7px; bottom: 7px; background: rgba(3,10,23,.85); color: #fff; font-size: .68rem; padding: 2px 6px; border-radius: 6px; }
body.staffdark .kbd-wrap .kbd-ribbon { position: absolute; left: 0; top: 9px; color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .3px; padding: 3px 9px 3px 7px; border-radius: 0 7px 7px 0; text-transform: uppercase; }
body.staffdark .kbd-wrap .kbd-ribbon.new { background: #16a34a; }
body.staffdark .kbd-wrap .kbd-ribbon.req { background: #ea580c; }
body.staffdark .kbd-wrap .kbd-ribbon.pop { background: #059669; }
body.staffdark .kbd-wrap .kbd-ribbon.upd { background: #2563eb; }
body.staffdark .kbd-wrap .kbd-dochead { position: relative; width: 100%; aspect-ratio: 16/7; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: #fff; font-size: 1.35rem; background: linear-gradient(135deg, #1e3a8a, #1e293b); }
body.staffdark .kbd-wrap .kbd-dochead.pdf { background: linear-gradient(135deg, #7f1d1d, #1e293b); }
body.staffdark .kbd-wrap .kbd-dochead.link { background: linear-gradient(135deg, #155e75, #1e293b); }
body.staffdark .kbd-wrap .kbd-dochead.file { background: linear-gradient(135deg, #4d7c0f, #1e293b); }
body.staffdark .kbd-wrap .kbd-dochead.text { background: linear-gradient(135deg, #3730a3, #1e293b); }
body.staffdark .kbd-wrap .kbd-dockind { font-size: .68rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .5px; }
body.staffdark .kbd-wrap .kbd-card-body { padding: .65rem .7rem .6rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 0; }
body.staffdark .kbd-wrap .kbd-card-title { background: none; border: none; padding: 0; text-align: left; color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; line-height: 1.3; }
body.staffdark .kbd-wrap .kbd-card-title:hover { color: #93c5fd; }
body.staffdark .kbd-wrap .kbd-card-desc { color: #9db4d6; font-size: .76rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.staffdark .kbd-wrap .kbd-card-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
body.staffdark .kbd-wrap .kbd-pill { background: #0d1f3c; border: 1px solid #2e4e7e; color: #bcd0ec; font-size: .66rem; padding: 2px 8px; border-radius: 999px; }
body.staffdark .kbd-wrap .kbd-pill.none { color: #6d84a8; border-style: dashed; }
body.staffdark .kbd-wrap .kbd-card-meta { margin-top: auto; display: flex; align-items: center; gap: .7rem; color: #8ba3c7; font-size: .7rem; border-top: 1px solid #22406b; padding-top: .5rem; }
body.staffdark .kbd-wrap .kbd-card-meta i { margin-right: 2px; }
body.staffdark .kbd-wrap .kbd-kebab-slot { margin-left: auto; position: relative; }
body.staffdark .kbd-wrap .kbd-kebab { background: none; border: none; color: #8ba3c7; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
body.staffdark .kbd-wrap .kbd-kebab:hover { color: #fff; background: #1d3c6e; }
body.staffdark .kbd-wrap .kbd-menu { position: absolute; right: 0; bottom: calc(100% + 6px); background: #16305a; border: 1px solid #33517d; border-radius: 10px; padding: .3rem; z-index: 30; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
body.staffdark .kbd-wrap .kbd-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: none; color: #dbe7f8; font-size: .8rem; padding: .42rem .55rem; border-radius: 7px; cursor: pointer; text-align: left; }
body.staffdark .kbd-wrap .kbd-menu button:hover { background: #1d3c6e; color: #fff; }
body.staffdark .kbd-wrap .kbd-menu button.danger { color: #fca5a5; }
body.staffdark .kbd-wrap .kbd-menu button.danger:hover { background: rgba(239,68,68,.15); }
body.staffdark .kbd-wrap .kbd-viewall-row { text-align: center; margin-top: .8rem; }
body.staffdark .kbd-wrap .kbd-viewall { background: #101f3d; border: 1px solid #33517d; color: #dbe7f8; border-radius: 999px; padding: .5rem 1.1rem; font-size: .8rem; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-viewall:hover { border-color: #60a5fa; color: #fff; }
body.staffdark .kbd-wrap .kbd-panel { background: #0e1c38; border: 1px solid #1d3a63; border-radius: 15px; padding: .85rem .9rem; margin-bottom: .9rem; min-width: 0; }
body.staffdark .kbd-wrap .kbd-panel-title { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: .7rem; }
body.staffdark .kbd-wrap .kbd-panel-title i { color: #60a5fa; }
body.staffdark .kbd-wrap .kbd-panel-tag { margin-left: auto; font-size: .68rem; font-weight: 600; color: #8ba3c7; background: #101f3d; border: 1px solid #22406b; padding: 2px 8px; border-radius: 999px; }
body.staffdark .kbd-wrap .kbd-link-sm { margin-left: auto; background: none; border: none; color: #60a5fa; font-size: .74rem; cursor: pointer; }
body.staffdark .kbd-wrap .kbd-donut-wrap { display: flex; gap: .8rem; align-items: center; }
body.staffdark .kbd-wrap .kbd-donut { width: 110px; height: 110px; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-donut-n { fill: #fff; font-size: 20px; font-weight: 800; }
body.staffdark .kbd-wrap .kbd-donut-l { fill: #8ba3c7; font-size: 9px; }
body.staffdark .kbd-wrap .kbd-legend { flex: 1; min-width: 0; }
body.staffdark .kbd-wrap .kbd-leg-row { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: #dbe7f8; padding: 2.5px 0; }
body.staffdark .kbd-wrap .kbd-leg-row.inline { display: inline-flex; margin-right: .8rem; }
body.staffdark .kbd-wrap .kbd-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-leg-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .kbd-wrap .kbd-leg-n { color: #8ba3c7; font-size: .72rem; }
body.staffdark .kbd-wrap .kbd-mv-row { display: flex; align-items: center; gap: .55rem; width: 100%; background: #101f3d; border: 1px solid #22406b; border-radius: 10px; padding: .5rem .6rem; margin-bottom: .45rem; cursor: pointer; text-align: left; color: inherit; }
body.staffdark .kbd-wrap .kbd-mv-row:hover { border-color: #60a5fa; }
body.staffdark .kbd-wrap .kbd-mv-ic { color: #60a5fa; }
body.staffdark .kbd-wrap .kbd-mv-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.staffdark .kbd-wrap .kbd-mv-title { color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .kbd-wrap .kbd-mv-views { color: #8ba3c7; font-size: .68rem; }
body.staffdark .kbd-wrap .kbd-mv-rank { width: 22px; height: 22px; border-radius: 50%; background: #22406b; color: #dbe7f8; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-mv-rank.r1 { background: #b45309; color: #fff; }
body.staffdark .kbd-wrap .kbd-mv-rank.r2 { background: #475569; color: #fff; }
body.staffdark .kbd-wrap .kbd-mv-rank.r3 { background: #78350f; color: #fff; }
body.staffdark .kbd-wrap .kbd-act-row { display: flex; gap: .55rem; padding: .4rem 0; border-bottom: 1px solid #16305a; }
body.staffdark .kbd-wrap .kbd-act-row:last-child { border-bottom: none; }
body.staffdark .kbd-wrap .kbd-act-ava { width: 28px; height: 28px; border-radius: 50%; background: #22406b; color: #dbe7f8; font-size: .74rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-act-txt { font-size: .76rem; color: #c3d3ec; line-height: 1.35; min-width: 0; }
body.staffdark .kbd-wrap .kbd-act-txt b { color: #fff; }
body.staffdark .kbd-wrap .kbd-act-time { color: #6d84a8; font-size: .68rem; margin-top: 1px; }
body.staffdark .kbd-wrap .kbd-bottom { display: grid; grid-template-columns: 1.1fr 1.3fr .8fr; gap: .9rem; }
body.staffdark .kbd-wrap .kbd-tp-row { display: flex; align-items: center; gap: .55rem; padding: .38rem 0; }
body.staffdark .kbd-wrap .kbd-tp-rank { width: 22px; height: 22px; border-radius: 6px; background: #22406b; color: #dbe7f8; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-tp-rank.r1 { background: #b45309; color: #fff; }
body.staffdark .kbd-wrap .kbd-tp-meta { flex: 1; min-width: 0; }
body.staffdark .kbd-wrap .kbd-tp-head { display: flex; justify-content: space-between; gap: .5rem; }
body.staffdark .kbd-wrap .kbd-tp-title { color: #fff; font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .kbd-wrap .kbd-tp-views { color: #8ba3c7; font-size: .68rem; white-space: nowrap; }
body.staffdark .kbd-wrap .kbd-tp-bar { height: 5px; background: #16305a; border-radius: 999px; margin-top: 4px; overflow: hidden; }
body.staffdark .kbd-wrap .kbd-tp-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 999px; }
body.staffdark .kbd-wrap .kbd-tp-pct { color: #8ba3c7; font-size: .68rem; white-space: nowrap; flex: 0 0 auto; }
body.staffdark .kbd-wrap .kbd-chart { width: 100%; height: auto; }
body.staffdark .kbd-wrap .kbd-chart-legend { margin-bottom: .3rem; }
body.staffdark .kbd-wrap svg .kbd-grid { stroke: #1d3a63; stroke-width: 1; }
body.staffdark .kbd-wrap svg .kbd-ax { fill: #6d84a8; font-size: 9px; }
body.staffdark .kbd-wrap .kbd-qas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
body.staffdark .kbd-wrap .kbd-qa { background: #101f3d; border: 1px solid #22406b; color: #dbe7f8; border-radius: 11px; padding: .6rem .4rem; font-size: .72rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
body.staffdark .kbd-wrap .kbd-qa:hover { border-color: #60a5fa; color: #fff; }
body.staffdark .kbd-wrap .kbd-qa-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(59,130,246,.18); color: #60a5fa; display: flex; align-items: center; justify-content: center; }
body.staffdark .kbd-wrap .kbd-empty { color: #6d84a8; font-size: .8rem; padding: .4rem 0; }
body.staffdark .kbd-wrap .kbd-foot { text-align: center; color: #6d84a8; font-size: .72rem; padding: 1rem 0 .4rem; }
@media (max-width: 1350px) {
    body.staffdark .kbd-wrap .kbd-kpis { grid-template-columns: repeat(3, 1fr); }
    body.staffdark .kbd-wrap .kbd-bottom { grid-template-columns: 1fr 1fr; }
    body.staffdark .kbd-wrap .kbd-qapanel { grid-column: 1 / -1; }
    body.staffdark .kbd-wrap .kbd-qas { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1100px) {
    body.staffdark .kbd-wrap .kbd-grid { grid-template-columns: 1fr; }
    body.staffdark .kbd-wrap .kbd-topgrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    body.staffdark .kbd-wrap .kbd-kpis { grid-template-columns: repeat(2, 1fr); }
    body.staffdark .kbd-wrap .kbd-bottom { grid-template-columns: 1fr; }
    body.staffdark .kbd-wrap .kbd-qas { grid-template-columns: repeat(3, 1fr); }
    body.staffdark .kbd-wrap .kbd-card.list { flex-direction: column; }
    body.staffdark .kbd-wrap .kbd-card.list .kbd-thumb, body.staffdark .kbd-wrap .kbd-card.list .kbd-dochead { width: 100%; }
}

/* ── Two-state clock-in screen (Task #357, owner mocks) — navy dashboard with a
   status pill, giant clock, stat cards, schedule strip, state banner (green
   "not open yet" gradient vs glowing gold CLOCK IN NOW), four info cards and a
   tip bar. Scoped under body.staffdark so nothing leaks into the student portal. */
body.staffdark .main .clkw { gap: 1rem; }
body.staffdark .main .clkw-hero { position: relative; overflow: hidden; text-align: center; padding: 2.4rem 1.6rem 2rem; border-radius: 20px; border: 1px solid rgba(96,165,250,.18); background: radial-gradient(120% 140% at 50% -20%, #17224d 0%, #0d1633 55%, #080f26 100%); box-shadow: 0 24px 60px rgba(2,6,23,.55); color: #e6ecff; }
body.staffdark .main .clkw-hero.on { border-color: rgba(52,211,153,.3); }
body.staffdark .main .clkw-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(55% 80% at 12% 60%, rgba(59,130,246,.18), transparent 60%), radial-gradient(45% 70% at 88% 30%, rgba(37,99,235,.16), transparent 62%); animation: tlhWave 9s ease-in-out infinite alternate; }
body.staffdark .main .clkw-face { position: absolute; top: 1.2rem; right: 1.4rem; width: 110px; height: 110px; opacity: .9; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 18px rgba(59,130,246,.55)); }
body.staffdark .main .clkw-hero > *:not(.clkw-bg):not(.clkw-face) { position: relative; z-index: 2; }
body.staffdark .main .clkw-pill { display: inline-flex; align-items: center; gap: 8px; padding: .5rem 1.15rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.2rem; border: 1px solid transparent; }
body.staffdark .main .clkw-pill.out { color: #4ade80; border-color: rgba(74,222,128,.45); background: rgba(74,222,128,.07); }
body.staffdark .main .clkw-pill.ready { color: #4ade80; border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.09); box-shadow: 0 0 18px rgba(74,222,128,.18); }
body.staffdark .main .clkw-pill.working { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 8px 22px rgba(16,185,129,.5); }
body.staffdark .main .clkw-pdot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: liveNowPulse 1.4s ease-out infinite; }
body.staffdark .main .clkw-clockrow { display: flex; align-items: baseline; justify-content: center; gap: .5rem; }
body.staffdark .main .clkw-clock { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(3rem, 8vw, 4.6rem); font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 30px rgba(147,197,253,.35); }
body.staffdark .main .clkw-ampm { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: #a5b4fc; }
body.staffdark .main .clkw-date { color: #93a5d8; margin-top: .55rem; font-size: 1rem; }
body.staffdark .main .clkw-stats { display: flex; justify-content: center; gap: 1rem; margin: 1.6rem auto 0; max-width: 560px; }
body.staffdark .main .clkw-stat { flex: 1; display: flex; align-items: flex-start; gap: .85rem; text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.18); border-radius: 16px; padding: 1rem 1.1rem; }
body.staffdark .main .clkw-stat-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; }
body.staffdark .main .clkw-stat-ic.green { color: #34d399; background: rgba(16,185,129,.14); border: 1px solid rgba(52,211,153,.4); }
body.staffdark .main .clkw-stat-ic.blue { color: #60a5fa; background: rgba(59,130,246,.14); border: 1px solid rgba(96,165,250,.4); }
body.staffdark .main .clkw-stat-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fa3d4; }
body.staffdark .main .clkw-stat-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.45rem; font-weight: 800; color: #fff; margin-top: .2rem; font-variant-numeric: tabular-nums; }
body.staffdark .main .clkw-stat-sub { font-size: .8rem; color: #7c8db5; margin-top: .15rem; }
body.staffdark .main .clkw-sched { display: flex; align-items: center; gap: .9rem; text-align: left; margin: 1.1rem auto 0; max-width: 760px; background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.15); border-radius: 14px; padding: .85rem 1rem; }
body.staffdark .main .clkw-sched-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; color: #60a5fa; background: rgba(59,130,246,.14); border: 1px solid rgba(96,165,250,.35); }
body.staffdark .main .clkw-sched-title { font-weight: 700; color: #e6ecff; }
body.staffdark .main .clkw-sched-sub { font-size: .82rem; color: #8fa3d4; margin-top: .15rem; }
body.staffdark .main .clkw-sched-btn { margin-left: auto; flex: none; }
body.staffdark .main .clkw-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.1rem; text-align: left; margin: 1.3rem auto 0; max-width: 760px; border-radius: 18px; padding: 1.1rem 1.3rem; }
body.staffdark .main .clkw-banner.wait { background: linear-gradient(120deg, #10b981 0%, #14b8a6 60%, #0ea5a3 100%); box-shadow: 0 14px 36px rgba(16,185,129,.3); justify-content: center; }
body.staffdark .main .clkw-banner.wait .clkw-btitle { color: #fff; }
body.staffdark .main .clkw-banner.wait .clkw-bsub { color: #d1fae5; }
body.staffdark .main .clkw-banner.wait .clkw-orb { color: #a7f3d0; background: rgba(4,47,36,.55); border-color: rgba(255,255,255,.35); box-shadow: none; }
body.staffdark .main .clkw-banner.ready { background: linear-gradient(120deg, #0c1533 0%, #111c3f 100%); border: 1px solid rgba(251,191,36,.35); box-shadow: 0 0 0 1px rgba(251,191,36,.12), 0 16px 40px rgba(251,191,36,.12); }
body.staffdark .main .clkw-orb { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #6ee7b7; background: #06281f; border: 2px solid rgba(110,231,183,.6); box-shadow: 0 0 0 6px rgba(110,231,183,.15), 0 0 24px rgba(52,211,153,.5); }
body.staffdark .main .clkw-btitle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 800; color: #fff; }
body.staffdark .main .clkw-bsub { font-size: .88rem; color: #9db1e0; margin-top: .2rem; }
body.staffdark .main .clkw-shimmer { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 85% 50%, rgba(251,191,36,.16), transparent 60%); animation: tlhWave 6s ease-in-out infinite alternate; }
body.staffdark .main .clkw-chevs { display: inline-flex; gap: .15rem; color: #f59e0b; font-size: 1.4rem; margin-left: auto; }
body.staffdark .main .clkw-chevs i { animation: clkwChev 1.2s ease-in-out infinite; opacity: .4; }
body.staffdark .main .clkw-chevs i:nth-child(2) { animation-delay: .15s; }
body.staffdark .main .clkw-chevs i:nth-child(3) { animation-delay: .3s; }
body.staffdark .main .clkw-cta { position: relative; overflow: hidden; flex: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.7rem; border-radius: 16px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .05em; color: #3b2b03; background: linear-gradient(135deg, #fde047 0%, #fbbf24 45%, #f59e0b 100%); box-shadow: 0 0 0 4px rgba(251,191,36,.18), 0 10px 34px rgba(251,191,36,.5); animation: clkwGlow 1.6s ease-in-out infinite; transition: transform .15s ease; }
body.staffdark .main .clkw-cta:hover { transform: translateY(-1px); }
body.staffdark .main .clkw-cta:disabled { opacity: .7; cursor: default; animation: none; }
body.staffdark .main .clkw-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: clkwSheen 2.4s ease-in-out infinite; }
body.staffdark .main .clkw-cta-sm { padding: .7rem 1.1rem; font-size: .9rem; }
body.staffdark .main .clkw-choices { display: flex; flex-direction: column; gap: .6rem; margin-left: auto; }
body.staffdark .main .clkw-action { margin-top: 1.4rem; }
body.staffdark .main .clkw-hint { margin-top: 1.2rem; font-size: .82rem; color: #7c8db5; display: inline-flex; align-items: center; gap: .5rem; }
body.staffdark .main .clkw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
body.staffdark .main .clkw-info { padding: 1.15rem 1.2rem; border-radius: 16px; }
body.staffdark .main .clkw-info-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; margin-bottom: .7rem; }
body.staffdark .main .clkw-info-ic.green { color: #34d399; background: rgba(16,185,129,.14); border: 1px solid rgba(52,211,153,.4); }
body.staffdark .main .clkw-info-ic.blue { color: #60a5fa; background: rgba(59,130,246,.14); border: 1px solid rgba(96,165,250,.4); }
body.staffdark .main .clkw-info-ic.purple { color: #c4b5fd; background: rgba(139,92,246,.14); border: 1px solid rgba(167,139,250,.4); }
body.staffdark .main .clkw-info-ic.amber { color: #fbbf24; background: rgba(245,158,11,.14); border: 1px solid rgba(251,191,36,.4); }
body.staffdark .main .clkw-info-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body.staffdark .main .clkw-info-label.green { color: #34d399; }
body.staffdark .main .clkw-info-label.blue { color: #60a5fa; }
body.staffdark .main .clkw-info-label.purple { color: #c4b5fd; }
body.staffdark .main .clkw-info-label.amber { color: #fbbf24; }
body.staffdark .main .clkw-info-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 800; color: #fff; margin-top: .3rem; }
body.staffdark .main .clkw-info-sub { font-size: .82rem; color: #8fa3d4; margin-top: .25rem; }
body.staffdark .main .clkw-tipbar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; border-radius: 16px; }
body.staffdark .main .clkw-tip-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; color: #60a5fa; background: rgba(59,130,246,.14); border: 1px solid rgba(96,165,250,.4); }
body.staffdark .main .clkw-tip-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #60a5fa; }
body.staffdark .main .clkw-tip-text { color: #c7d4f2; margin-top: .15rem; }
body.staffdark .main .clkw-tip-quote { margin-left: auto; font-size: 1.6rem; color: rgba(96,165,250,.5); }
@keyframes clkwChev { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes clkwGlow { 0%, 100% { box-shadow: 0 0 0 4px rgba(251,191,36,.15), 0 10px 30px rgba(251,191,36,.4); } 50% { box-shadow: 0 0 0 9px rgba(251,191,36,.28), 0 14px 44px rgba(251,191,36,.65); } }
@keyframes clkwSheen { 0% { left: -60%; } 55% { left: 120%; } 100% { left: 120%; } }
@media (max-width: 980px) {
    body.staffdark .main .clkw-grid { grid-template-columns: repeat(2, 1fr); }
    body.staffdark .main .clkw-face { display: none; }
}
@media (max-width: 640px) {
    body.staffdark .main .clkw-grid { grid-template-columns: 1fr; }
    body.staffdark .main .clkw-stats { flex-direction: column; }
    body.staffdark .main .clkw-banner { flex-direction: column; text-align: center; }
    body.staffdark .main .clkw-banner.ready .clkw-cta { width: 100%; justify-content: center; }
    body.staffdark .main .clkw-chevs { display: none; }
    body.staffdark .main .clkw-sched { flex-direction: column; align-items: flex-start; }
    body.staffdark .main .clkw-sched-btn { margin-left: 0; }
    body.staffdark .main .clkw-choices { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    body.staffdark .main .clkw-cta, body.staffdark .main .clkw-cta::after,
    body.staffdark .main .clkw-chevs i, body.staffdark .main .clkw-shimmer,
    body.staffdark .main .clkw-pdot, body.staffdark .main .clkw-bg { animation: none !important; }
}
/* Waiting-state banner: the CLOCK IN NOW button is present but disabled/muted. */
body.staffdark .main .clkw-banner.wait { justify-content: flex-start; }
body.staffdark .main .clkw-banner.wait .clkw-cta { margin-left: auto; background: rgba(4,47,36,.4); color: #d1fae5; box-shadow: none; animation: none; }
body.staffdark .main .clkw-banner.wait .clkw-cta::after { display: none; }
@media (max-width: 640px) { body.staffdark .main .clkw-banner.wait .clkw-cta { margin-left: 0; width: 100%; justify-content: center; } }

/* ── Resume screen-sharing banner (worker keep-alive, owner rule July 2026 rev.) ──
   A lost share / page refresh never clocks the worker out: this fixed banner rides
   above every staff view until they resume sharing. Staff-scoped so it can never
   leak into the student portal. */
body.staffdark .resume-share-banner {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 5000; display: flex; align-items: center; gap: .8rem;
    max-width: min(92vw, 720px); padding: .75rem 1rem;
    background: #2b1d0e; border: 1px solid #b45309; border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.45); color: #fde68a;
    font-size: .92rem; line-height: 1.35;
}
body.staffdark .resume-share-banner .rsb-icon { color: #f59e0b; font-size: 1.1rem; flex: 0 0 auto; }
body.staffdark .resume-share-banner .rsb-copy { flex: 1 1 auto; }
body.staffdark .resume-share-banner .rsb-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .95rem; border: 0; border-radius: 9px; cursor: pointer;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a1206;
    font-weight: 700; font-size: .88rem;
}
body.staffdark .resume-share-banner .rsb-btn:hover { filter: brightness(1.08); }
body.staffdark .resume-share-banner .rsb-btn:disabled { opacity: .7; cursor: default; }
@media (max-width: 640px) {
    body.staffdark .resume-share-banner { flex-wrap: wrap; justify-content: center; text-align: center; }
    body.staffdark .resume-share-banner .rsb-btn { width: 100%; justify-content: center; }
}

/* ── KB Dashboard TABLE view (admin Resources, .kbd-dash mode) ──────────────
   One-screen layout: the category chips hide, the card grid is replaced by a
   paginated table styled to the dark mockup. Scoped under body.staffdark. */
body.staffdark .kbd-dash .kbd-chips { display: none; }
body.staffdark .kbd-dash .kbd-chiprow { justify-content: flex-end; margin-bottom: .7rem; }
body.staffdark .kbd-wrap .kbdt-card { background: #101f3d; border: 1px solid #22406b; border-radius: 13px; padding: 0; overflow: hidden; }
body.staffdark .kbd-wrap .kbdt-scroll { overflow-x: auto; }
body.staffdark .kbd-wrap table.kbdt { width: 100%; border-collapse: collapse; font-size: .84rem; }
body.staffdark .kbd-wrap .kbdt thead th { text-align: left; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #8ba3c7; background: #0d1a34; padding: .6rem .75rem; border-bottom: 1px solid #22406b; white-space: nowrap; }
body.staffdark .kbd-wrap .kbdt tbody td { padding: .55rem .75rem; border-bottom: 1px solid #182f55; color: #dbe7f8; vertical-align: middle; }
body.staffdark .kbd-wrap .kbdt tbody tr:last-child td { border-bottom: 0; }
body.staffdark .kbd-wrap .kbdt tbody tr:hover td { background: #12264a; }
body.staffdark .kbd-wrap .kbdt-res { display: flex; align-items: center; gap: .6rem; min-width: 220px; max-width: 340px; }
body.staffdark .kbd-wrap .kbdt-ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: rgba(59,130,246,.16); color: #60a5fa; }
body.staffdark .kbd-wrap .kbdt-meta { display: flex; flex-direction: column; min-width: 0; }
body.staffdark .kbd-wrap .kbdt-title { background: none; border: 0; padding: 0; color: #fff; font-weight: 600; font-size: .86rem; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
body.staffdark .kbd-wrap .kbdt-title:hover { color: #60a5fa; }
body.staffdark .kbd-wrap .kbdt-desc { color: #8ba3c7; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
body.staffdark .kbd-wrap .kbdt-kind { display: inline-flex; align-items: center; gap: .35rem; color: #b7c9e6; font-size: .8rem; white-space: nowrap; }
body.staffdark .kbd-wrap .kbdt-status { display: inline-block; padding: .16rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
body.staffdark .kbd-wrap .kbdt-status.published { background: rgba(52,211,153,.15); color: #34d399; }
body.staffdark .kbd-wrap .kbdt-status.draft { background: rgba(148,163,184,.16); color: #a7b6cd; }
body.staffdark .kbd-wrap .kbdt-num { text-align: center; font-variant-numeric: tabular-nums; }
body.staffdark .kbd-wrap .kbdt thead th:nth-child(5), body.staffdark .kbd-wrap .kbdt thead th:nth-child(6), body.staffdark .kbd-wrap .kbdt thead th:nth-child(8) { text-align: center; }
body.staffdark .kbd-wrap .kbdt-comp { min-width: 130px; }
body.staffdark .kbd-wrap .kbdt-bar { display: inline-block; vertical-align: middle; width: 74px; height: 6px; border-radius: 999px; background: #1c355f; overflow: hidden; margin-right: .45rem; }
body.staffdark .kbd-wrap .kbdt-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #22d3ee); }
body.staffdark .kbd-wrap .kbdt-pct { font-size: .76rem; color: #b7c9e6; font-variant-numeric: tabular-nums; }
body.staffdark .kbd-wrap .kbdt-date { color: #8ba3c7; white-space: nowrap; font-size: .78rem; }
body.staffdark .kbd-wrap .kbdt-acts { white-space: nowrap; }
body.staffdark .kbd-wrap .kbdt-act { background: none; border: 0; color: #8ba3c7; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: .82rem; }
body.staffdark .kbd-wrap .kbdt-act:hover { background: #1c355f; color: #fff; }
body.staffdark .kbd-wrap .kbdt-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .6rem .8rem; border-top: 1px solid #22406b; background: #0d1a34; }
body.staffdark .kbd-wrap .kbdt-showing { color: #8ba3c7; font-size: .78rem; }
body.staffdark .kbd-wrap .kbdt-pager { display: inline-flex; gap: .3rem; }
body.staffdark .kbd-wrap .kbdt-pg { min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid #33517d; background: #12294d; color: #dbe7f8; cursor: pointer; font-size: .8rem; padding: 0 .45rem; }
body.staffdark .kbd-wrap .kbdt-pg:hover:not(:disabled) { border-color: #60a5fa; color: #fff; }
body.staffdark .kbd-wrap .kbdt-pg.active { background: #2563eb; border-color: #2563eb; color: #fff; }
body.staffdark .kbd-wrap .kbdt-pg:disabled { opacity: .4; cursor: default; }
body.staffdark .kbd-wrap .kbdt-per { color: #8ba3c7; font-size: .78rem; display: inline-flex; align-items: center; gap: .4rem; }
body.staffdark .kbd-wrap .kbdt-per select { background: #12294d; border: 1px solid #33517d; color: #dbe7f8; border-radius: 7px; padding: .25rem .4rem; font-size: .78rem; }
@media (max-width: 1400px) {
    body.staffdark .kbd-wrap .kbdt thead th:nth-child(8), body.staffdark .kbd-wrap .kbdt tbody td:nth-child(8) { display: none; }
}
@media (max-width: 900px) {
    body.staffdark .kbd-wrap .kbdt thead th:nth-child(7), body.staffdark .kbd-wrap .kbdt tbody td:nth-child(7) { display: none; }
}

/* ── New Resource editor (dark redesign, .rsc2 — self-scoped) ─────────────── */
.modal-backdrop:has(.rsc2) .modal { max-width: min(1080px, 96vw); }
.rsc-editor.rsc2 { display: block; background: #0d1b36; border: 1px solid #22406b; border-radius: 16px; color: #dbe7f8; max-height: 92vh; overflow-y: auto; padding: 1.15rem 1.25rem; }
.rsc2 .rsc2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rsc2 .rsc2-head h2 { color: #fff; margin: 0 0 2px; font-size: 1.25rem; }
.rsc2 .rsc2-sub { color: #8ba3c7; font-size: .84rem; margin: 0; }
.rsc2 .rsc2-x { background: #12294d; border: 1px solid #33517d; color: #dbe7f8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; flex: 0 0 auto; }
.rsc2 .rsc2-x:hover { border-color: #60a5fa; color: #fff; }
.rsc2 .rsc2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 1.1rem; align-items: start; }
.rsc2 .rsc2-main { min-width: 0; }
.rsc2 .fld { margin: 0 0 .85rem; }
.rsc2 label { color: #b7c9e6; font-size: .76rem; font-weight: 600; margin-bottom: .3rem; }
.rsc2 .muted { color: #8ba3c7; }
.rsc2 .rsc2-req { color: #f87171; }
.rsc2 input[type="text"], .rsc2 input[type="date"], .rsc2 input[type="number"], .rsc2 select, .rsc2 textarea {
    background: #0a1428; border: 1px solid #2b4a78; color: #e7eefa; border-radius: 9px; padding: .5rem .7rem; font-size: .88rem; width: 100%; box-sizing: border-box; }
.rsc2 input:focus, .rsc2 select:focus, .rsc2 textarea:focus { outline: none; border-color: #60a5fa; }
.rsc2 .rsc2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.rsc2 .rsc2-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.rsc2 .rsc2-kind { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; background: #101f3d; border: 1px solid #2b4a78; border-radius: 11px; padding: .6rem .65rem; cursor: pointer; color: #dbe7f8; }
.rsc2 .rsc2-kind:hover:not(:disabled) { border-color: #60a5fa; }
.rsc2 .rsc2-kind.active { border-color: #3b82f6; background: rgba(59,130,246,.12); }
.rsc2 .rsc2-kind:disabled { opacity: .38; cursor: default; }
.rsc2 .rsc2-kind-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(59,130,246,.16); color: #60a5fa; font-size: .85rem; margin-bottom: .15rem; }
.rsc2 .rsc2-kind-name { font-weight: 600; font-size: .8rem; color: #fff; }
.rsc2 .rsc2-kind-sub { font-size: .68rem; color: #8ba3c7; }
.rsc2 .rsc2-kind-check { display: none; position: absolute; top: .45rem; right: .45rem; width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: .6rem; align-items: center; justify-content: center; }
.rsc2 .rsc2-kind.active .rsc2-kind-check { display: inline-flex; }
.rsc2 .rsc2-editorbox { border: 1px solid #2b4a78; border-radius: 10px; overflow: hidden; }
.rsc2 .rsc2-editorbox textarea { border: 0; border-radius: 0; min-height: 170px; resize: vertical; display: block; }
.rsc2 .rsc2-toolbar { display: flex; gap: .2rem; align-items: center; background: #101f3d; border-bottom: 1px solid #2b4a78; padding: .3rem .4rem; }
.rsc2 .rsc2-toolbar button { background: none; border: 0; color: #b7c9e6; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: .8rem; }
.rsc2 .rsc2-toolbar button:hover { background: #1c355f; color: #fff; }
.rsc2 .rsc2-tb-sep { width: 1px; height: 18px; background: #2b4a78; margin: 0 .25rem; }
.rsc2 .rsc2-mustrow { display: flex; align-items: flex-start; gap: .6rem; background: #101f3d; border: 1px solid #2b4a78; border-radius: 11px; padding: .7rem .8rem; }
.rsc2 .rsc2-must-txt { font-size: .82rem; color: #b7c9e6; flex: 1; }
.rsc2 .rsc2-must-txt b { color: #fff; }
.rsc2 .rsc2-recbadge { flex: 0 0 auto; background: rgba(251,191,36,.15); color: #fbbf24; font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; align-self: center; }
.rsc2 .rsc2-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; margin-top: 2px; }
.rsc2 .rsc2-switch input { opacity: 0; width: 0; height: 0; }
.rsc2 .rsc2-slider { position: absolute; inset: 0; background: #2b4a78; border-radius: 999px; cursor: pointer; transition: background .15s; }
.rsc2 .rsc2-slider::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .15s; }
.rsc2 .rsc2-switch input:checked + .rsc2-slider { background: #3b82f6; }
.rsc2 .rsc2-switch input:checked + .rsc2-slider::before { transform: translateX(16px); }
.rsc2 .rsc-sched { background: #101f3d; border: 1px solid #2b4a78; border-radius: 10px; margin-top: .55rem; padding: .7rem .8rem; }
.rsc2 .rsc-sched-row label { color: #8ba3c7; }
.rsc2 .rsc-sched-row select, .rsc2 .rsc-sched-row input { width: auto; }
.rsc2 .rsc-quiz-set, .rsc2 .rsc-quiz-build { background: #101f3d; border: 1px solid #2b4a78; border-radius: 10px; padding: .7rem .8rem; }
.rsc2 .rsc-quiz-build { margin-top: .55rem; }
.rsc2 .rsc-req-row { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: #b7c9e6; font-weight: 400; }
.rsc2 .rsc-req-row b { color: #fff; }
.rsc2 .rsc-req-row input[type="checkbox"] { width: auto; margin-top: 2px; }
.rsc2 .rsc-quiz-q { background: #0a1428; border: 1px solid #2b4a78; border-radius: 9px; padding: .6rem .7rem; margin-bottom: .55rem; }
.rsc2 .rsc-quiz-opt input[type="radio"] { width: auto; }
.rsc2 .btn-light { background: #12294d; border: 1px solid #33517d; color: #dbe7f8; }
.rsc2 .btn-light:hover { border-color: #60a5fa; color: #fff; }
.rsc2 .rsc2-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .55rem; }
.rsc2 .rsc2-dept { position: relative; display: flex; gap: .55rem; align-items: flex-start; background: #101f3d; border: 1px solid #2b4a78; border-radius: 11px; padding: .6rem .65rem; cursor: pointer; font-weight: 400; }
.rsc2 .rsc2-dept:hover { border-color: #60a5fa; }
.rsc2 .rsc2-dept:has(input:checked) { border-color: #3b82f6; background: rgba(59,130,246,.12); }
.rsc2 .rsc2-dept input { position: absolute; opacity: 0; pointer-events: none; }
.rsc2 .rsc2-dept-ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(139,92,246,.16); color: #a78bfa; flex: 0 0 auto; font-size: .8rem; }
.rsc2 .rsc2-dept-meta { display: flex; flex-direction: column; min-width: 0; }
.rsc2 .rsc2-dept-name { font-size: .8rem; font-weight: 600; color: #fff; }
.rsc2 .rsc2-dept-sub { font-size: .68rem; color: #8ba3c7; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rsc2 .rsc2-dept-check { display: none; position: absolute; top: .45rem; right: .45rem; width: 16px; height: 16px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: .55rem; align-items: center; justify-content: center; }
.rsc2 .rsc2-dept:has(input:checked) .rsc2-dept-check { display: inline-flex; }
.rsc2 .rsc2-side { position: sticky; top: 0; }
.rsc2 .rsc2-tips { background: linear-gradient(160deg, #4c1d95, #5b21b6 55%, #6d28d9); border: 1px solid #7c3aed; border-radius: 13px; padding: .9rem .95rem; color: #ede9fe; }
.rsc2 .rsc2-tips-title { font-weight: 700; font-size: .88rem; color: #fff; margin-bottom: .5rem; display: flex; align-items: center; gap: .45rem; }
.rsc2 .rsc2-tips-title i { color: #fbbf24; }
.rsc2 .rsc2-tips ul { margin: 0 0 .8rem; padding-left: 1.05rem; display: flex; flex-direction: column; gap: .4rem; font-size: .78rem; line-height: 1.4; }
.rsc2 .rsc2-vis { background: rgba(255,255,255,.09); border-radius: 10px; padding: .6rem .7rem; font-size: .75rem; line-height: 1.45; color: #ddd6fe; }
.rsc2 .rsc2-vis-h { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; margin-bottom: .2rem; }
.rsc2 .rsc2-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #22406b; }
@media (max-width: 860px) {
    .rsc2 .rsc2-grid { grid-template-columns: 1fr; }
    .rsc2 .rsc2-side { position: static; order: 2; }
    .rsc2 .rsc2-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rsc2 .rsc2-row2 { grid-template-columns: 1fr; }
}

/* Class recordings — "processing / not synced yet" rows (Task #383) */
.rec-processing { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rec-proc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border: 1px dashed #f0b429; border-radius: 10px; background: rgba(240, 180, 41, .08); font-size: .92em; }
.rec-proc-dot { width: 9px; height: 9px; border-radius: 50%; background: #f0b429; flex: 0 0 auto; animation: recProcPulse 1.6s ease-in-out infinite; }
.rec-proc-tag { margin-left: auto; color: #b07d10; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rec-proc-tag i { animation: recProcSpin 1.8s linear infinite; }
@keyframes recProcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes recProcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rec-proc-dot, .rec-proc-tag i { animation: none; } }

/* Settings → Zoom meeting hosts */
.zm-host-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; margin-top: 6px; }
.zm-host-row > i { color: #2563eb; font-size: 18px; }
.zm-host-name { font-weight: 600; }
.zm-host-mail { font-size: 12px; }
.zm-host-del { margin-left: auto; }

/* ── Manage account (staff) — temp password box ─────────────────────────────── */
body.staffdark .stf-pwbox {
    display: flex; align-items: center; gap: 8px;
    background: rgba(148, 163, 184, .08);
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 8px; padding: 8px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem; letter-spacing: .05em;
}
body.staffdark .stf-pwbox span { flex: 1; word-break: break-all; }

/* Secondary (previous/alternate) contact line on the student profile card */
.scp-contact2 { font-size: 12px; color: #93c5fd; opacity: .85; margin-top: 2px; }

/* ── Point Rules condition engine (Task #424) — Account Health Settings ───── */
body.staffdark .ahpr { display: flex; flex-direction: column; gap: 14px; }
body.staffdark .ahpr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.staffdark .ahpr-globals {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: rgba(23, 37, 84, .35); border: 1px solid rgba(59, 130, 246, .25);
    border-radius: 12px; padding: 12px 16px;
}
body.staffdark .ahpr-g-title { display: flex; align-items: center; gap: 10px; min-width: 170px; }
body.staffdark .ahpr-g-title i { font-size: 1.2rem; }
body.staffdark .ahpr-g-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; flex: 1; }
body.staffdark .ahpr-g-fields .field { margin: 0; display: flex; flex-direction: column; gap: 4px; }
body.staffdark .ahpr-g-fields .field label { font-size: .72rem; }
body.staffdark .ahpr-master { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
body.staffdark .ahpr-table th { white-space: nowrap; }
body.staffdark .ahpr-th-sub { font-weight: 400; font-size: .68rem; opacity: .6; text-transform: none; letter-spacing: 0; }
body.staffdark .ahpr-name { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
body.staffdark .ahpr-name i { width: 18px; text-align: center; }
body.staffdark .ahpr-ce { display: flex; align-items: center; gap: 6px; }
body.staffdark .ahpr-every { font-size: .78rem; opacity: .75; }
body.staffdark .ahpr-ce-unit { width: 92px; }
body.staffdark .ahpr-table input.ah-input { width: 68px; }
body.staffdark .ahpr-globals input.ah-input { width: 76px; }
body.staffdark .ahpr-tiers { display: flex; gap: 6px; }
body.staffdark .ahpr-tier-lb { display: flex; flex-direction: column; gap: 2px; font-size: .62rem; white-space: nowrap; }
body.staffdark .ahpr-table input.ahpr-tier { width: 58px; }
body.staffdark .ahpr-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
body.staffdark .ahpr-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
body.staffdark .ahpr-knob { position: absolute; inset: 0; background: rgba(148, 163, 184, .35); border-radius: 999px; transition: background .15s; cursor: pointer; }
body.staffdark .ahpr-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
body.staffdark .ahpr-switch input:checked + .ahpr-knob { background: #2563eb; }
body.staffdark .ahpr-switch input:checked + .ahpr-knob::after { transform: translateX(18px); }
body.staffdark .ahpr-switch input:focus-visible + .ahpr-knob { outline: 2px solid #93c5fd; outline-offset: 2px; }
body.staffdark .ahpr-del { background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
body.staffdark .ahpr-del:hover { background: rgba(239, 68, 68, .15); }
body.staffdark .ahpr-actions { text-align: center; }
body.staffdark .ahpr-table.ahpr-off tbody { opacity: .45; }
body.staffdark .ahpr-notes { font-size: .78rem; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
    body.staffdark .ahpr-knob, body.staffdark .ahpr-knob::after { transition: none; }
}

/* "Notification" Reminder Type (#424): a small corner card instead of the
   full-screen blocking overlay — same copy, non-blocking. */
body.staffdark .comp-pop.comp-pop-mini {
    inset: auto 18px 18px auto; background: none; backdrop-filter: none; padding: 0;
    align-items: flex-end; justify-content: flex-end;
}
body.staffdark .comp-pop.comp-pop-mini .comp-pop-card { max-width: 340px; padding: 20px 18px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
body.staffdark .comp-pop.comp-pop-mini .comp-pop-icon { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 10px; }
body.staffdark .comp-pop.comp-pop-mini .comp-pop-title { font-size: 1.02rem; }
body.staffdark .comp-pop.comp-pop-mini .comp-pop-msg { font-size: .85rem; margin-bottom: 12px; }

/* ── Student Class Recordings page (.srx-*) — owner mocks, July 2026 ─────── */
.srx-entry { display: flex; align-items: center; gap: .85rem; width: 100%;
    margin-top: 1rem; padding: .95rem 1.05rem; border-radius: 16px; cursor: pointer;
    border: 1px solid #2a3658; text-align: left;
    background: linear-gradient(120deg, #101a33, #182448);
    box-shadow: 0 8px 22px rgba(5, 10, 25, .25); transition: transform .12s ease, box-shadow .12s ease; }
.srx-entry:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(5, 10, 25, .35); }
.srx-entry-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; color: #fff; font-size: 1.15rem;
    background: linear-gradient(135deg, #7b2ff7, #f107a3); }
.srx-entry-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.srx-entry-txt b { color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.srx-entry-txt span { color: #93a3c8; font-size: .8rem; }
.srx-entry-go { color: #93a3c8; font-size: .95rem; }

.srx-view { min-height: 100vh; min-height: 100dvh; background: #070d1c;
    display: flex; flex-direction: column; box-sizing: border-box;
    padding: clamp(10px, 2vh, 26px) clamp(10px, 2.4vw, 26px) 0; }
.srx-wrap { width: 100%; max-width: 1120px; margin: 0 auto; flex: 1;
    display: flex; flex-direction: column; gap: .95rem; padding-bottom: 96px; }
.srx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.srx-back { margin-bottom: .8rem; }
.srx-h1 { font-family: 'Plus Jakarta Sans', sans-serif; color: #fff; margin: 0;
    font-size: clamp(1.45rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.srx-h1sub { color: #93a3c8; font-size: .92rem; margin-top: .3rem; }
.srx-head-art { flex: 0 0 auto; width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px);
    border-radius: 22px; display: grid; place-items: center; color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    background: linear-gradient(135deg, #396afc, #7b2ff7);
    box-shadow: 0 12px 30px rgba(57, 106, 252, .35); }

.srx-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.srx-chips::-webkit-scrollbar { display: none; }
.srx-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
    padding: .5rem .95rem; border-radius: 999px; font-size: .84rem; font-weight: 700;
    color: #b9c6e4; background: #121c36; border: 1px solid #26335a; cursor: pointer;
    transition: background .12s ease, color .12s ease; white-space: nowrap; }
.srx-chip:hover { background: #182448; }
.srx-chip.on { color: #fff; background: linear-gradient(120deg, #3b82f6, #6d28d9); border-color: transparent; }
.srx-chip.lvl.on { background: linear-gradient(120deg, #059669, #10b981); }
.srx-chip.fav i { color: #f43f5e; }
.srx-chip.fav.on { background: linear-gradient(120deg, #e11d48, #f43f5e); }
.srx-chip.fav.on i { color: #fff; }
.srx-chip-n { opacity: .75; font-weight: 600; }

.srx-controls { display: flex; gap: .6rem; flex-wrap: wrap; }
.srx-selwrap { display: inline-flex; align-items: center; gap: .5rem; padding: 0 .85rem;
    border-radius: 12px; background: #121c36; border: 1px solid #26335a; color: #93a3c8; }
.srx-selwrap i { font-size: .8rem; }
.srx-selwrap select { appearance: none; -webkit-appearance: none; background: transparent;
    border: 0; color: #dbe4f8; font-size: .86rem; font-weight: 600; padding: .6rem .2rem;
    outline: none; cursor: pointer; }
.srx-selwrap select option { background: #121c36; color: #dbe4f8; }

.srx-month { margin-top: .35rem; }
.srx-month-head { display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin: .35rem 0 .7rem; }
.srx-month-head h2 { color: #fff; font-size: 1.02rem; font-weight: 800; margin: 0;
    letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
.srx-month-n { color: #7c8bb0; font-size: .78rem; font-weight: 700; background: #121c36;
    border: 1px solid #26335a; border-radius: 999px; padding: .12rem .55rem; }
.srx-viewall { border: 0; background: none; color: #60a5fa; font-size: .84rem;
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.srx-viewall:hover { color: #93c5fd; }
.srx-morebtn { display: block; width: 100%; margin-top: .7rem; padding: .6rem;
    border-radius: 12px; border: 1px dashed #2a3658; background: none; color: #93a3c8;
    font-size: .85rem; font-weight: 700; cursor: pointer; }
.srx-morebtn:hover { background: #101a33; color: #dbe4f8; }

.srx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.srx-card { background: #0e1730; border: 1px solid #223054; border-radius: 16px;
    overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.srx-card:hover { transform: translateY(-2px); border-color: #33477e;
    box-shadow: 0 12px 28px rgba(4, 8, 20, .45); }
.srx-card:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.srx-thumb { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.srx-g0 { background: linear-gradient(135deg, #7b2ff7, #f107a3); }
.srx-g1 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.srx-g2 { background: linear-gradient(135deg, #059669, #34d399); }
.srx-g3 { background: linear-gradient(135deg, #f97316, #f43f5e); }
.srx-g4 { background: linear-gradient(135deg, #6366f1, #06b6d4); }
.srx-g5 { background: linear-gradient(135deg, #d946ef, #6d28d9); }
.srx-thumb-art { color: rgba(255, 255, 255, .28); font-size: 2.6rem; }
.srx-tag { position: absolute; top: .55rem; left: .55rem; color: #fff; font-size: .68rem;
    font-weight: 800; letter-spacing: .02em; background: rgba(7, 13, 28, .55);
    backdrop-filter: blur(4px); border-radius: 999px; padding: .22rem .6rem; }
.srx-playglyph { position: absolute; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: .95rem; padding-left: 3px;
    background: rgba(7, 13, 28, .5); border: 2px solid rgba(255, 255, 255, .85);
    transition: transform .12s ease, background .12s ease; }
.srx-card:hover .srx-playglyph { transform: scale(1.08); background: rgba(7, 13, 28, .72); }
.srx-durbadge { position: absolute; bottom: .55rem; right: .55rem; color: #fff;
    font-size: .7rem; font-weight: 700; background: rgba(7, 13, 28, .65);
    border-radius: 8px; padding: .2rem .5rem; display: inline-flex; align-items: center; gap: .3rem; }
.srx-meta { padding: .75rem .85rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.srx-title { color: #fff; font-weight: 800; font-size: .93rem; letter-spacing: -.01em;
    line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srx-sub { display: flex; gap: .8rem; color: #7c8bb0; font-size: .76rem; flex-wrap: wrap; }
.srx-sub i { margin-right: .25rem; }
.srx-row2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.srx-teacher { color: #93a3c8; font-size: .78rem; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.srx-teacher i { margin-right: .3rem; }
.srx-actions { display: inline-flex; align-items: center; gap: .15rem; }
.srx-heart, .srx-kebab { border: 0; background: none; color: #7c8bb0; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-size: .92rem; transition: background .12s ease, color .12s ease; }
.srx-heart:hover, .srx-kebab:hover { background: #182448; color: #dbe4f8; }
.srx-heart.on { color: #f43f5e; }
.srx-kmenu { position: fixed; z-index: 300; width: 200px; background: #101a33;
    border: 1px solid #2a3658; border-radius: 12px; padding: .35rem;
    box-shadow: 0 16px 40px rgba(3, 6, 16, .6); }
.srx-kmenu button { display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .55rem .7rem; border: 0; border-radius: 8px; background: none;
    color: #dbe4f8; font-size: .86rem; font-weight: 600; cursor: pointer; text-align: left; }
.srx-kmenu button:hover { background: #182448; }
.srx-empty { text-align: center; color: #7c8bb0; padding: 3rem 1rem; display: flex;
    flex-direction: column; align-items: center; gap: .5rem; }
.srx-empty i { font-size: 2rem; color: #33477e; }
.srx-empty b { color: #dbe4f8; font-size: 1rem; }
.srx-empty span { font-size: .85rem; }

.srx-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 220; display: none;
    background: rgba(10, 16, 34, .96); backdrop-filter: blur(8px);
    border-top: 1px solid #223054; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); }
.srx-nav button { flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: .2rem; border: 0; background: none; color: #7c8bb0; font-size: .66rem;
    font-weight: 700; cursor: pointer; padding: .35rem 0; border-radius: 10px; }
.srx-nav button i { font-size: 1.05rem; }
.srx-nav button.on, .srx-nav button:hover { color: #60a5fa; }
@media (max-width: 860px) {
    .srx-nav { display: flex; }
    .srx-head-art { display: none; }
    .srx-grid { grid-template-columns: 1fr; gap: .7rem; }
    .srx-card { flex-direction: row; align-items: stretch; }
    .srx-thumb { flex: 0 0 138px; aspect-ratio: auto; min-height: 104px; }
    .srx-thumb-art { font-size: 1.6rem; }
    .srx-playglyph { width: 36px; height: 36px; font-size: .8rem; }
    .srx-tag { font-size: .58rem; padding: .16rem .45rem; }
    .srx-durbadge { font-size: .62rem; bottom: .4rem; right: .4rem; }
    .srx-meta { flex: 1; min-width: 0; padding: .6rem .65rem; }
    .srx-title { font-size: .87rem; }
}

/* ── Custom protected player + mini bar (.svp-*) ─────────────────────────── */
body.svp-lock { overflow: hidden; }
.svp-overlay { position: fixed; inset: 0; z-index: 400; background: #05080f;
    display: flex; flex-direction: column; }
.svp-overlay[hidden], .svp-mini[hidden] { display: none; }
.svp-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #05080f; }
.svp-top { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; }
.svp-titlebox { flex: 1; min-width: 0; text-align: center; }
.svp-title { color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svp-sub { color: #7c8bb0; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svp-iconbtn { border: 0; background: #121c36; color: #dbe4f8; width: 40px; height: 40px;
    border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: .95rem;
    position: relative; transition: background .12s ease; flex: 0 0 auto; }
.svp-iconbtn:hover { background: #1d2a4f; }
.svp-skip b { position: absolute; font-size: .5rem; font-weight: 800; top: 55%; left: 50%;
    transform: translate(-50%, -50%); }
.svp-stage { flex: 1; position: relative; min-height: 0; display: flex; background: #000; }
.svp-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.svp-wm { position: absolute; top: 12%; left: 8%; color: rgba(255, 255, 255, .32);
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; pointer-events: none;
    user-select: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    transition: top 1.4s ease, left 1.4s ease; z-index: 5; }
.svp-spin { position: absolute; inset: 0; display: grid; place-items: center;
    color: #93a3c8; font-size: 2rem; pointer-events: none; }
.svp-err { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
    color: #fecaca; background: rgba(127, 29, 29, .85); border-radius: 10px;
    padding: .55rem .9rem; font-size: .84rem; white-space: nowrap; }
.svp-ctrl { padding: .6rem .95rem calc(.85rem + env(safe-area-inset-bottom)); }
.svp-seekrow { display: flex; align-items: center; gap: .7rem; }
.svp-time { color: #93a3c8; font-size: .74rem; font-variant-numeric: tabular-nums; min-width: 40px; }
.svp-time:last-child { text-align: right; }
.svp-seek { flex: 1; appearance: none; -webkit-appearance: none; height: 5px;
    border-radius: 999px; background: #223054; outline: none; cursor: pointer; }
.svp-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px;
    height: 15px; border-radius: 50%; background: #60a5fa; border: 0; cursor: pointer; }
.svp-seek::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%;
    background: #60a5fa; border: 0; cursor: pointer; }
.svp-btns { display: flex; align-items: center; justify-content: center; gap: 1.1rem;
    margin-top: .55rem; position: relative; }
.svp-playbtn { border: 0; width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
    color: #fff; font-size: 1.25rem; display: grid; place-items: center; padding-left: 2px;
    background: linear-gradient(135deg, #3b82f6, #6d28d9);
    box-shadow: 0 10px 26px rgba(59, 130, 246, .4); }
.svp-fsbtn { position: absolute; right: 0; }

.svp-mini { position: fixed; left: .6rem; right: .6rem; z-index: 230;
    bottom: calc(.6rem + env(safe-area-inset-bottom)); display: flex; align-items: center;
    gap: .4rem; background: #101a33; border: 1px solid #2a3658; border-radius: 14px;
    padding: .5rem .6rem; box-shadow: 0 14px 34px rgba(3, 6, 16, .6); overflow: hidden; }
@media (max-width: 860px) { .svp-mini { bottom: calc(66px + env(safe-area-inset-bottom)); } }
@media (min-width: 861px) { .svp-mini { left: auto; width: 380px; } }
.svp-mini-prog { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #223054; }
.svp-mini-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3b82f6, #a855f7); }
.svp-mini-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
    border: 0; background: none; cursor: pointer; text-align: left; padding: 0; }
.svp-mini-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center; color: #fff; font-size: .8rem;
    background: linear-gradient(135deg, #7b2ff7, #f107a3); }
.svp-mini-txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.svp-mini-txt b { color: #fff; font-size: .8rem; font-weight: 800; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.svp-mini-txt span { color: #7c8bb0; font-size: .68rem; }
.svp-mini-btns { display: inline-flex; align-items: center; gap: .25rem; }
.svp-mini-btns .svp-iconbtn { width: 34px; height: 34px; font-size: .8rem; }
.svp-mini-play { border: 0; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    color: #fff; font-size: .85rem; display: grid; place-items: center;
    background: linear-gradient(135deg, #3b82f6, #6d28d9); }

/* ── Student dark HOME (.sho-view — owner mocks, July 2026) ─────────────────────
   App-style home for ALLOWED students (Action Flag active/due_soon, not free
   access). Rides the classic att-* building blocks with dark overrides; the
   classic white card branch is untouched. Bottom nav reuses .srx-nav. */
.acct-view.att-view.sho-view { display: block; background: #070d1c; min-height: 100vh; min-height: 100dvh;
    padding: 18px 16px 26px; }
.sho-wrap { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sho-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sho-view .att-name { color: #f1f5fd; font-size: 1.15rem; }
.sho-view .att-role { color: #60a5fa; }
.sho-view .goback { color: #cdd8f2; }
.sho-view .goback-circle { background: #131c36; border: 1px solid #26345c; color: #cdd8f2; box-shadow: none; }

/* status banner (green all-set) — dark treatment + right-side calendar chip */
.att-alert-cal { display: none; }
.sho-view .att-alert { margin-bottom: 0; }
.sho-view .att-renew { margin: 0; }
.sho-view .att-alert-green { background: linear-gradient(100deg, rgba(16,80,48,.35), rgba(13,33,58,.55));
    border-color: rgba(34,197,94,.35); align-items: center; }
.sho-view .att-alert-green .att-alert-title { color: #4ade80; }
.sho-view .att-alert-green .att-alert-sub { color: #b9c8e6; }
.sho-view .att-alert-green .att-alert-cal { display: flex; align-items: center; justify-content: center;
    flex: none; margin-left: auto; width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid rgba(34,197,94,.4); background: rgba(34,197,94,.12); color: #4ade80; font-size: 1.1rem; }
.sho-view .att-alert-blue { background: rgba(23,37,84,.5); border-color: rgba(59,130,246,.4); }
.sho-view .att-alert-blue .att-alert-title { color: #93c5fd; }
.sho-view .att-alert-blue .att-alert-sub { color: #b9c8e6; }

/* two-column zone: hero left, stats + class cards right (desktop) */
.sho-grid { display: flex; flex-direction: column; gap: 14px; }
.sho-hero-col { min-width: 0; display: flex; flex-direction: column; }
.sho-side-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sho-view .att-live-hero { margin-bottom: 0; flex: 1; }
.sho-view .att-live-spot { flex: 1; justify-content: center; }
@media (min-width: 1000px) {
    .sho-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
}

/* idle hero (nothing live right now) */
.sho-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .55rem; min-height: 190px; padding: 1.5rem 1.2rem; border-radius: 20px;
    background: radial-gradient(120% 150% at 18% 0%, #1c1546 0%, #0d1530 58%);
    border: 1px solid #2b2a5e; }
.sho-idle-orb { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; background: linear-gradient(135deg, #4338ca, #7c3aed); color: #fff;
    font-size: 1.35rem; box-shadow: 0 12px 30px rgba(124,58,237,.35); }
.sho-idle-title { color: #f1f5fd; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.08rem; }
.sho-idle-sub { color: #93a3c8; font-size: .85rem; }
.sho-idle-sub b { color: #cdd8f2; }

/* stat tiles — dark, icon chip + left-aligned figures (mock) */
.att-stat-ic { display: none; }
.sho-view .att-stats { margin: 0; gap: 10px; }
.sho-view .att-stat { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic n" "l l";
    align-items: center; gap: .35rem .6rem; text-align: left; background: #0d1530; border-color: #223054; }
.sho-view .att-stat .att-stat-ic { grid-area: ic; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; font-size: .92rem; background: rgba(148,163,184,.14); color: #93a3c8; }
.sho-view .att-stat .n { grid-area: n; }
.sho-view .att-stat .l { grid-area: l; color: #7c8bb0; margin-top: 0; font-size: .62rem; letter-spacing: .08em; }
.sho-view .att-stat.present { background: rgba(16,80,48,.22); border-color: rgba(34,197,94,.32); }
.sho-view .att-stat.present .att-stat-ic { background: rgba(34,197,94,.16); color: #4ade80; }
.sho-view .att-stat.present .n { color: #4ade80; }
.sho-view .att-stat.absent { background: rgba(88,18,32,.22); border-color: rgba(239,68,68,.36); }
.sho-view .att-stat.absent .att-stat-ic { background: rgba(239,68,68,.16); color: #f87171; }
.sho-view .att-stat.absent .n { color: #f87171; }
.sho-view .att-stat.total { background: rgba(23,37,84,.35); border-color: rgba(59,130,246,.36); }
.sho-view .att-stat.total .att-stat-ic { background: rgba(59,130,246,.16); color: #60a5fa; }
.sho-view .att-stat.total .n { color: #93c5fd; }
.sho-view .att-stat.is-active { box-shadow: 0 0 0 2px #60a5fa inset; }
.sho-view .att-stat.present.is-active { box-shadow: 0 0 0 2px #4ade80 inset; }
.sho-view .att-stat.absent.is-active { box-shadow: 0 0 0 2px #f87171 inset; }

/* class mini cards — dark */
.sho-view .att-mini-row { margin: 0; gap: 10px; }
.sho-view .att-mini-card { background: #0d1530; border-color: #223054; }
.sho-view .att-mini-card.is-live { background: rgba(16,80,48,.18); border-color: rgba(34,197,94,.45); box-shadow: none; }
.sho-view .att-mini-label { color: #7c8bb0; }
.sho-view .att-mini-name { color: #f1f5fd; }
.sho-view .att-mini-when, .sho-view .att-mini-empty { color: #93a3c8; }
.sho-view .att-mini-cta { color: #60a5fa; }
.sho-view .att-mini-card.is-tap:hover { box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.sho-view .att-chip-lvl { background: rgba(180,83,9,.18); color: #fbbf24; border-color: rgba(251,191,36,.35); }

/* history + wallet — dark */
.sho-view .att-history { margin: 0; }
.sho-view .att-table-wrap { border-color: #223054; background: #0d1530; }
.sho-view .att-table th { color: #7c8bb0; background: #101a38; border-color: #223054; }
.sho-view .att-table td { color: #dbe6f8; border-color: #1a2547; }
.sho-view .att-empty, .sho-view .att-empty-box { color: #7c8bb0; }
.sho-view .att-wallet { margin: 0; background: rgba(91,33,182,.16); border: 1px solid rgba(139,92,246,.4);
    border-radius: 14px; padding: .8rem 1rem; }
.sho-view .att-wallet-amt { color: #c4b5fd; }
.sho-view .att-wallet-note { color: #a78bfa; }

/* action cards — purple recordings + blue schedule (mock) */
.sho-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sho-act { position: relative; display: flex; align-items: center; gap: .85rem; border: 0; border-radius: 18px;
    padding: 1rem 1.1rem; cursor: pointer; text-align: left; color: #fff; overflow: hidden;
    transition: transform .12s, box-shadow .12s; }
.sho-act:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.45); }
.sho-act-rec { background: linear-gradient(120deg, #5b21b6, #7c3aed 55%, #9333ea); }
.sho-act-sched { background: linear-gradient(120deg, #1d4ed8, #2563eb 55%, #3b82f6); }
.sho-act-ic { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px;
    background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.sho-act-wa { position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%;
    background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-style: normal; border: 2px solid rgba(7,13,28,.5); }
.sho-act-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sho-act-txt b { font-size: .98rem; font-family: 'Plus Jakarta Sans', sans-serif; }
.sho-act-txt span { font-size: .76rem; opacity: .85; }
.sho-act-go { flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; font-size: .8rem; }
@media (max-width: 460px) {
    .sho-act { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .95rem 1rem 1.05rem; }
    .sho-act-go { position: absolute; right: .85rem; bottom: .85rem; margin: 0; }
}

/* materials + contact — dark */
.sho-view .att-materials { margin-top: 0; background: #0d1530; border: 1px solid #223054;
    border-radius: 18px; padding: 1rem 1.1rem; color: #dbe6f8; }
.sho-view .att-materials h3, .sho-view .att-materials h4, .sho-view .att-materials b { color: #f1f5fd; }
.sho-view .att-contact { margin-top: .4rem; background: #0d1530; border-color: #223054; }
.sho-view .att-contact-title { color: #f1f5fd; }
.sho-view .att-contact-sub { color: #93a3c8; }

/* bottom nav — extends .srx-nav; phones/tablets only */
.sho-nav { display: none; }
@media (max-width: 999px) {
    .sho-nav { display: flex; }
    .acct-view.att-view.sho-view { padding-bottom: 88px; }
}
.sho-nav button.on { color: #60a5fa; }
.sho-nav-msg i { position: relative; }
.sho-nav-msg i::after { content: ""; position: absolute; top: -3px; right: -7px; width: 8px; height: 8px;
    border-radius: 50%; background: #ef4444; border: 1.5px solid #0a1022; }

/* embedded recordings section — desktop widths only (phones use the action card) */
.sho-recs { display: none; }
@media (min-width: 1000px) { .sho-recs { display: block; } }
.sho-recs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: .6rem; }
.sho-recs-txt h2 { margin: 0; color: #f1f5fd; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; }
.sho-recs-sub { color: #93a3c8; font-size: .85rem; margin-top: .15rem; }
.sho-recs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: .75rem; }
.sho-chips { flex: 1 1 320px; min-width: 0; }
.sho-controls { flex: none; }
.sho-strip-wrap { position: relative; }
.sho-strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px .5rem; scrollbar-width: thin; }
.sho-strip .srx-card { flex: 0 0 210px; }
.sho-strip-empty { flex: 1 1 100%; }
.sho-strip-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; width: 36px; height: 36px;
    border-radius: 50%; border: 1px solid #26345c; background: rgba(13,21,48,.94); color: #dbe6f8;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.sho-strip-arrow:hover { background: #182446; }
.sho-strip-arrow.prev { left: -12px; }
.sho-strip-arrow.next { right: -12px; }

/* View Schedule sheet (rides .sod-payoverlay/.sod-paysheet) */
.sho-schedsheet { max-width: 560px; }
.sho-sched-list { display: flex; flex-direction: column; gap: 8px; padding: 0 1.1rem 1.1rem; overflow-y: auto; }
.sho-sched-row { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; cursor: pointer;
    background: #101a38; border: 1px solid #223054; border-radius: 14px; padding: .75rem .85rem; color: #dbe6f8; }
.sho-sched-row:hover { border-color: #33477e; background: #131f42; }
.sho-sched-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(59,130,246,.16);
    color: #60a5fa; display: flex; align-items: center; justify-content: center; }
.sho-sched-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sho-sched-txt b { color: #f1f5fd; font-size: .92rem; }
.sho-sched-txt > span { color: #93a3c8; font-size: .8rem; }
.sho-sched-go { margin-left: auto; color: #55648c; font-size: .8rem; }
.sho-sched-empty { padding: 1.4rem 1.1rem 1.6rem; text-align: center; color: #93a3c8; }
.sho-sched-empty i { display: block; font-size: 1.5rem; margin-bottom: .5rem; color: #55648c; }

/* the classic one-screen mobile clamp must NOT apply to the scrolling dark home */
@media (max-width: 720px) {
    .acct-view.att-view.sho-view { height: auto; min-height: 100svh; overflow: visible; padding: 12px 12px 88px; }
    .sho-view .att-live-hero, .sho-view .att-stats, .sho-view .att-mini-row { margin: 0; }
    .sho-view .att-name { font-size: 1.05rem; }
}
.sho-act[hidden] { display: none !important; }
.sho-strip-arrow[hidden] { display: none !important; }

/* ── Settings → Developer tools → Clean system (Task #441, dev only) ── */
body.staffdark .setg-red { --setg-a: #ef4444; --setg-asoft: rgba(239,68,68,.14); --setg-aline: rgba(239,68,68,.45); }
.cleansys-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(239,68,68,.35); border-radius: 10px; background: rgba(239,68,68,.06); }
.cleansys-warn { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: #b91c1c; }
body.staffdark .cleansys-warn { color: #f87171; }
.cleansys-list { margin: 10px 0 14px; padding-left: 20px; max-height: 190px; overflow: auto; font-size: .92rem; }
.cleansys-list li { margin: 2px 0; }
/* ── Clean-system section selector (Task #730) ── */
.cws-selall-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cws-selall { display: flex; align-items: center; gap: 6px; font-size: .93rem; cursor: pointer; }
.cws-selall input[type=checkbox] { width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; }
.cws-selall input.partial { opacity: .65; }
.cws-total { font-size: .85rem; color: #6b7280; }
body.staffdark .cws-total { color: #9ca3af; }
.cws-sections { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; margin-bottom: 12px; }
body.staffdark .cws-sections { border-color: #374151; }
.cws-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.cws-row:hover { background: rgba(59,130,246,.07); }
.cws-row-locked { cursor: default; opacity: .8; }
.cws-row input[type=checkbox] { width: 15px; height: 15px; accent-color: #3b82f6; cursor: pointer; flex-shrink: 0; }
.cws-row-locked input[type=checkbox] { cursor: not-allowed; }
.cws-label { font-weight: 500; }
.cws-count { font-size: .82rem; color: #6b7280; white-space: nowrap; }
body.staffdark .cws-count { color: #9ca3af; }
.cws-req-note { grid-column: 1 / -1; font-size: .78rem; color: #2563eb; margin-left: 23px; }
body.staffdark .cws-req-note { color: #60a5fa; }
.cws-code-dest { font-size: .9rem; color: #059669; margin: 8px 0; }
body.staffdark .cws-code-dest { color: #34d399; }
.cws-code-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.cws-code-input { width: 120px; font-size: 1.4rem; letter-spacing: 6px; font-family: monospace; text-align: center; padding: 8px 12px; border: 2px solid #d1d5db; border-radius: 8px; }
body.staffdark .cws-code-input { background: #1f2937; border-color: #374151; color: #f3f4f6; }
.cws-code-input:focus { border-color: #3b82f6; outline: none; }
.cws-code-input:disabled { opacity: .5; cursor: not-allowed; }
.cws-err { color: #dc2626; font-size: .88rem; margin: 6px 0; }

/* ── Clock landing: shift-status hero + BREAK/LUNCH/FINISH cards (Task #443) ──
   Dark-navy verdict banner + moment cards on the staff Clock landing, styled
   after the student .sod/.sen dark screens. Scoped under body.staffdark so
   nothing leaks into the student portal; the body-level .csx-alert banner is
   only ever created from staff code. */
body.staffdark .csx-hero { position: relative; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    background: linear-gradient(135deg, #0b1428 0%, #101d3a 60%, #0d1830 100%);
    border: 1px solid rgba(148,163,184,.16); border-radius: 16px; padding: 1.15rem 1.35rem 1.15rem 1.5rem;
    margin-bottom: 1rem; overflow: hidden; }
body.staffdark .csx-hero::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; }
body.staffdark .csx-orb { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 1.35rem; flex: 0 0 auto; }
body.staffdark .csx-copy { flex: 1 1 220px; min-width: 0; }
body.staffdark .csx-title { font-size: 1.28rem; font-weight: 800; color: #f1f5f9; letter-spacing: .01em; }
body.staffdark .csx-sub { color: #9fb0cc; font-size: .92rem; margin-top: .2rem; }
body.staffdark .csx-chips { display: flex; gap: .7rem; flex-wrap: wrap; }
body.staffdark .csx-chip { background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px; padding: .5rem .9rem; min-width: 112px; text-align: center; }
body.staffdark .csx-chip-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8fa2c0; }
body.staffdark .csx-chip-val { font-size: 1.05rem; font-weight: 800; color: #e8eefb; margin-top: .15rem; font-variant-numeric: tabular-nums; }
body.staffdark .csx-late::before, body.staffdark .csx-missed::before { background: #ef4444; }
body.staffdark .csx-late .csx-orb, body.staffdark .csx-missed .csx-orb { background: rgba(239,68,68,.16); color: #f87171; }
body.staffdark .csx-late .csx-title span, body.staffdark .csx-missed .csx-title span { color: #f87171; }
body.staffdark .csx-late .csx-orb i { animation: csxShake 2.4s ease-in-out infinite; }
body.staffdark .csx-early::before { background: #f5b83d; }
body.staffdark .csx-early .csx-orb { background: rgba(245,184,61,.15); color: #fbbf24; }
body.staffdark .csx-early .csx-title span { color: #fbbf24; }
body.staffdark .csx-nosched::before { background: #3b82f6; }
body.staffdark .csx-nosched .csx-orb { background: rgba(59,130,246,.15); color: #60a5fa; }
body.staffdark .csx-nosched .csx-title span { color: #60a5fa; }
body.staffdark .csx-carry { opacity: .88; }
.csx-fade { opacity: 0 !important; transition: opacity .35s ease; }
@keyframes csxShake { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-9deg); }
    92% { transform: rotate(8deg); } 95% { transform: rotate(-5deg); } }
body.staffdark .csx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: .9rem; margin-bottom: 1rem; }
body.staffdark .csx-mcard { background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 100%), #0d1830;
    border: 1px solid rgba(148,163,184,.16); border-radius: 14px; padding: 1rem 1.1rem; }
body.staffdark .csx-mic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center;
    justify-content: center; font-size: 1.05rem; background: rgba(59,130,246,.14); color: #60a5fa; margin-bottom: .55rem; }
body.staffdark #csxM-break .csx-mic { background: rgba(16,185,129,.14); color: #34d399; }
body.staffdark #csxM-lunch .csx-mic { background: rgba(245,184,61,.15); color: #fbbf24; }
body.staffdark #csxM-finish .csx-mic { background: rgba(167,139,250,.15); color: #a78bfa; }
body.staffdark .csx-mlabel { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8fa2c0; }
body.staffdark .csx-mval { font-size: 1.12rem; font-weight: 800; color: #eef3fc; margin-top: .15rem; font-variant-numeric: tabular-nums; }
body.staffdark .csx-msub { color: #9fb0cc; font-size: .84rem; margin-top: .3rem; }
body.staffdark .csx-off .csx-mic { background: rgba(148,163,184,.12); color: #7c8db0; }
body.staffdark .csx-off .csx-mval { color: #94a3b8; }
body.staffdark .csx-now { border-color: rgba(16,185,129,.5); box-shadow: 0 0 0 1px rgba(16,185,129,.25); }
body.staffdark .csx-done { opacity: .72; }
body.staffdark .csx-prog { height: 6px; border-radius: 999px; background: rgba(148,163,184,.18); margin-top: .55rem; overflow: hidden; }
body.staffdark .csx-prog i { display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #34d399); transition: width .8s linear; }
.csx-alert { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4000;
    display: flex; align-items: center; gap: .8rem; max-width: min(480px, calc(100vw - 28px));
    background: linear-gradient(135deg, #0b1428, #14264a); color: #eef3fc;
    border: 1px solid rgba(148,163,184,.3); border-radius: 14px; padding: .8rem 1rem;
    box-shadow: 0 18px 48px rgba(2,6,18,.55); animation: csxDrop .4s ease; }
.csx-alert-ic { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center;
    justify-content: center; font-size: 1.1rem; background: rgba(59,130,246,.18); color: #60a5fa; }
.csx-alert-break .csx-alert-ic { background: rgba(16,185,129,.18); color: #34d399; }
.csx-alert-lunch .csx-alert-ic { background: rgba(245,184,61,.18); color: #fbbf24; }
.csx-alert-finish .csx-alert-ic { background: rgba(167,139,250,.18); color: #a78bfa; }
.csx-alert-copy { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.csx-alert-copy b { font-size: 1rem; }
.csx-alert-copy span { font-size: .85rem; color: #b9c6dd; }
.csx-alert-x { background: none; border: 0; color: #8fa2c0; font-size: 1.3rem; cursor: pointer; line-height: 1; padding: .2rem .35rem; }
.csx-alert-x:hover { color: #fff; }
@keyframes csxDrop { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
@media (prefers-reduced-motion: reduce) {
    body.staffdark .csx-late .csx-orb i { animation: none; }
    .csx-alert { animation: none; }
    body.staffdark .csx-prog i { transition: none; }
}

/* ── Demo walkthrough engine (builder + report modals, staff player overlay) ── */
/* Builder / report modals (ride inside the shared .card modal, staff-only). */
.demo-build, .demo-report { width: min(780px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.demo-build-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.demo-build-head h2 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.demo-build-body { overflow: auto; padding: 4px 2px; display: flex; flex-direction: column; gap: 16px; }
.demo-build-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(128,128,128,.28); }
.demo-foot-spacer { flex: 1; }
.demo-build-empty { text-align: center; padding: 40px 20px; color: var(--muted, #8a97ad); }
.demo-build-empty i { font-size: 2rem; opacity: .6; display: block; margin-bottom: 10px; }
.demo-build .fld input, .demo-build .fld textarea { width: 100%; }
.demo-step { border: 1px solid rgba(128,128,128,.24); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.demo-step-head { display: flex; align-items: center; justify-content: space-between; }
.demo-step-num { font-weight: 700; font-size: .95rem; }
.demo-step-tools { display: flex; gap: 4px; }
.demo-star { color: #ef4444; }
.demo-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-shot { position: relative; width: 120px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(128,128,128,.28); }
.demo-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-shot-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: .72rem; }
.demo-shot-add { width: 120px; height: 84px; border-radius: 8px; border: 1.5px dashed rgba(128,128,128,.5); background: transparent; color: var(--muted, #8a97ad); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .8rem; }
.demo-shot-add:hover { border-color: #3b82f6; color: #3b82f6; }
.demo-qs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.demo-q { border: 1px solid rgba(128,128,128,.24); border-radius: 10px; padding: 12px; }
.demo-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.demo-q-num { font-weight: 700; font-size: .82rem; }
.demo-q-head .demo-qtype { margin-left: auto; }
.demo-qtext { width: 100%; margin-bottom: 10px; }
.demo-opts { display: flex; flex-direction: column; gap: 8px; }
.demo-opt { display: flex; align-items: center; gap: 10px; }
.demo-opt .demo-opttext { flex: 1; }
/* Report table */
.demo-rep-top { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 14px 0 18px; }
.demo-rep-stat { display: flex; flex-direction: column; }
.demo-rep-n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.demo-rep-l { font-size: .78rem; color: var(--muted, #8a97ad); }
.demo-rep-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: rgba(59,130,246,.15); color: #3b82f6; font-size: .78rem; font-weight: 600; }
.demo-report #demoReportBody { overflow: auto; }
.demo-rep-table { display: flex; flex-direction: column; min-width: 560px; }
.demo-rep-h, .demo-rep-r { display: grid; grid-template-columns: 1.4fr 1.4fr .8fr 1fr .9fr .9fr; gap: 10px; align-items: center; padding: 10px 8px; }
.demo-rep-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8a97ad); border-bottom: 1px solid rgba(128,128,128,.28); }
.demo-rep-r { border-bottom: 1px solid rgba(128,128,128,.16); font-size: .88rem; }
.demo-rep-name { font-weight: 600; }
.demo-rep-tag { font-weight: 400; }
.demo-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: .76rem; font-weight: 600; }
.demo-pill.ok { background: rgba(34,197,94,.16); color: #16a34a; }
.demo-pill.pend { background: rgba(148,163,184,.18); color: #64748b; }

/* Staff player overlay — self-contained dark theme (works with or without staffdark). */
.demo-play-backdrop { position: fixed; inset: 0; z-index: 4000; background: rgba(8,12,20,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.demo-play-card { width: min(980px, 100%); max-height: 92vh; background: #0f1626; color: #e8eefb; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; overflow: hidden; }
.demo-play-body { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 22px 24px 26px; }
.demo-play-card .icon-btn { color: #cdd8f0; background: transparent; border: none; }
.demo-play-card .icon-btn:hover { background: rgba(255,255,255,.1); }
.demo-play-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.demo-play-kind { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7aa2ff; }
.demo-play-htxt h2 { margin: 4px 0 0; font-size: 1.35rem; }
.demo-play-progress { margin: 18px 0 6px; }
.demo-prog-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.demo-prog-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #22c55e); border-radius: 99px; transition: width .3s ease; }
.demo-prog-txt { margin-top: 8px; font-size: .82rem; color: #9fb0cc; }
.demo-play-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-top: 16px; min-height: 0; }
.demo-play-nav { display: flex; flex-direction: column; gap: 6px; }
.demo-nav-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; font-size: .86rem; background: rgba(255,255,255,.03); border: 1px solid transparent; color: #9fb0cc; }
.demo-nav-row.active { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.4); color: #eaf1ff; font-weight: 600; }
.demo-nav-row.done { color: #cfe9d6; }
.demo-nav-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: rgba(255,255,255,.08); flex: none; }
.demo-nav-row.done .demo-nav-ic { background: #22c55e; color: #05210f; }
.demo-nav-row.active .demo-nav-ic { background: #3b82f6; color: #fff; }
.demo-nav-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-play-main { min-width: 0; }
.demo-play-steptitle { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }
.demo-play-stepnum { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7aa2ff; margin-right: 8px; }
.demo-play-shots { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.demo-play-shots img { width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); display: block; }
.demo-play-expl { color: #cdd8f0; line-height: 1.55; margin-bottom: 16px; }
.demo-play-quiz, .demo-play-continue { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; }
.demo-play-continue { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.demo-quiz-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 14px; color: #eaf1ff; }
.demo-quiz-q { margin-bottom: 16px; }
.demo-quiz-qt { font-weight: 600; margin-bottom: 8px; }
.demo-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.demo-quiz-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.demo-quiz-opt:hover { background: rgba(255,255,255,.07); }
.demo-quiz-opt input { accent-color: #3b82f6; }
.demo-feedback { font-size: .88rem; }
.demo-feedback.bad { color: #ff9c9c; margin-bottom: 4px; }
.demo-play-done { text-align: center; padding: 44px 20px; }
.demo-done-ic { font-size: 3rem; color: #22c55e; margin-bottom: 12px; }
.demo-done-ic.muted { color: #8a97ad; }
.demo-play-done h2 { margin: 0 0 8px; }
.demo-play-done p { color: #aebbd4; margin: 0 auto 18px; max-width: 460px; }
@media (max-width: 720px) {
    .demo-play-grid { grid-template-columns: 1fr; }
    .demo-play-nav { flex-direction: row; flex-wrap: wrap; }
    .demo-nav-title { display: none; }
    .demo-nav-row { padding: 8px; }
    .demo-rep-h, .demo-rep-r { grid-template-columns: 1.4fr 1fr .8fr .9fr; }
    .demo-rep-h span:nth-child(4), .demo-rep-r span:nth-child(4) { display: none; }
}

/* ── Overdue "so sad" crier (.aod-*) ── a crying character peeks in every 2 minutes carrying
   its Amount-due placard, with real tears (water) falling from the eyes. Character and
   amount slide in together. Lives in the agent Overdue card (position:relative,
   overflow:hidden — the whole cluster is clipped off-card while away). */
/* the crier peeks above the top edge of ONLY its Overdue card, and rides above its
   neighbours (z-index) as it hops in from the right. The horizontal hop-in overshoot is
   contained by the agent dash's own `.main{overflow:hidden}` wrapper (no page scrollbar),
   while the upward peek stays visible because it sits inside that wrapper. */
.dash-stat:has(.aod-corner) { overflow: visible; z-index: 5; }
.aod-corner {
    position: absolute; top: -52px; right: 12px; width: 92px; height: 54px; z-index: 3;
    pointer-events: none;
    opacity: 0;
    animation: aod-jump 120s linear infinite;
}
/* sized so the boy rides in the dark band ABOVE the cards and, at rest (translateY 0),
   sits with his feet on the card's 3px red top strip — never down inside the box body */
.aod-guy {
    position: absolute; right: 0; bottom: 0; width: 40px; height: 54px;
}
.aod-guy img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(0 5px 9px rgba(0,0,0,.45));
    animation: aod-bob 2.4s ease-in-out infinite;
}
.aod-drop {
    position: absolute; width: 6px; height: 9px; background: linear-gradient(#bae6fd, #38bdf8);
    border-radius: 50% 50% 50% 50% / 45% 45% 60% 60%;
    box-shadow: 0 0 5px rgba(56,189,248,.75);
    opacity: 0; animation: aod-fall 1.15s ease-in infinite;
}
.aod-drop-l { top: 40%; left: 34%; }
.aod-drop-r { top: 40%; left: 58%; animation-delay: .55s; }
/* the placard is pinned OUT OF FLOW to the left of the boy, its bottom resting on the
   card's top edge — so the money sits ON TOP of the box and never overlaps the box body.
   Out of flow keeps the corner's width fixed so the run-in geometry is unaffected. */
.aod-due {
    position: absolute; right: 46px; bottom: 1px; white-space: nowrap;
    background: rgba(24,12,12,.94); border: 1px solid rgba(248,113,113,.55);
    border-radius: 10px; padding: .1rem .45rem .16rem; text-align: center;
    box-shadow: 0 6px 14px rgba(0,0,0,.45);
    opacity: 0; animation: aod-due-show 120s linear infinite;
}
.aod-due b { display: block; font-size: 1rem; font-weight: 800; color: #fca5a5; line-height: 1.15; }
.aod-due span { display: block; font-size: .5rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fca5a5; opacity: .8; }
/* the crier hops in from the RIGHT edge of the row, bouncing across the tops of the
   neighbouring cards, and lands (stops) on the Overdue card — then holds a few seconds
   and fades. Parked invisible at translateX(0) the rest of the 2-min cycle (no overflow). */
@keyframes aod-jump {
    0%    { opacity: 0; transform: translateX(0)    translateY(0); }
    2.3%  { opacity: 0; transform: translateX(700%) translateY(0); }
    2.6%  { opacity: 1; transform: translateX(700%) translateY(-4px); }
    3.5%  { opacity: 1; transform: translateX(540%) translateY(-14px); }
    4.3%  { opacity: 1; transform: translateX(400%) translateY(0); }
    5.1%  { opacity: 1; transform: translateX(260%) translateY(-14px); }
    5.9%  { opacity: 1; transform: translateX(140%) translateY(0); }
    6.6%  { opacity: 1; transform: translateX(50%)  translateY(-12px); }
    7.2%  { opacity: 1; transform: translateX(10%)  translateY(-4px); }
    7.6%  { opacity: 1; transform: translateX(0)    translateY(0); }
    13.5% { opacity: 1; transform: translateX(0)    translateY(0); }
    14.3% { opacity: 0; transform: translateX(0)    translateY(0); }
    100%  { opacity: 0; transform: translateX(0)    translateY(0); }
}
/* the Amount-due placard only shows once the boy is SEATED on the Overdue card, so it
   never trails through the neighbouring boxes during the run-in */
@keyframes aod-due-show {
    0%, 7.2% { opacity: 0; }
    7.6%, 13.5% { opacity: 1; }
    14.3%, 100% { opacity: 0; }
}
@keyframes aod-bob { 0%,100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-3px) rotate(2.5deg); } }
@keyframes aod-fall {
    0%   { transform: translateY(0) scale(.5); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: .9; }
    100% { transform: translateY(24px) scale(1); opacity: 0; }
}
@media (max-width: 900px) {
    /* the stat row switches to overflow-x:auto below 900px, which clips the band the crier
       rides in — hide the decoration rather than let it render half-broken over the card body */
    .aod-corner { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .aod-corner { animation: none; opacity: 1; transform: none; }
    .aod-guy img { animation: none; }
    .aod-drop { animation: none; opacity: 0; }
    .aod-due { animation: none; opacity: 1; }
}

/* Reveal toggle for the Stripe secret key field (see the pasted value) */
.secret-reveal-wrap { position: relative; display: block; }
.secret-reveal-wrap input { width: 100%; padding-right: 74px; }
.secret-reveal-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 4px 12px; }

/* ════════════ OMNICHANNEL INBOX (staff, dark) ════════════
   Two-pane inbox (conversation list + thread) for WhatsApp / Messenger / Dialpad.
   Scoped under .staffdark so it never leaks into the student portal. The incoming/
   active call bar is appended to <body> and stays unscoped so it can ring from any
   staff tab. Mirrors the internal-chat height model (min(74vh,820px)). */
/* ════════════════════════ Inbox — 3-column redesign ═══════════════════════════
   Left conversation list (channel + status filters) · center rich chat · right
   customer/account panel. Scoped under body.staffdark. The global call bar CSS
   below this block is intentionally left unscoped. */
.staffdark .ibx { display: flex; flex-direction: column; height: min(84vh, 940px); min-height: 520px; color: #e6edf6; }
.staffdark .ibx-top { display: flex; align-items: center; gap: 1rem; padding: .2rem .2rem 1rem; flex-wrap: wrap; }
.staffdark .ibx-top-title h1 { margin: 0; font-size: 1.5rem; font-weight: 800; color: #f2f6fc; }
.staffdark .ibx-top-sub { font-size: .82rem; color: #8593ad; margin-top: .15rem; }
.staffdark .ibx-top-search { flex: 1; min-width: 220px; max-width: 460px; margin-left: auto; display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: #0e1728; }
.staffdark .ibx-top-search i { color: #7d8aa3; font-size: .85rem; }
.staffdark .ibx-top-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #e6edf6; }
.staffdark .ibx-top-search input::placeholder { color: #6b7893; }
.staffdark .ibx-dpbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px; padding: .6rem 1.1rem; font: inherit; font-weight: 700; font-size: .88rem; color: #fff; cursor: pointer; background: linear-gradient(135deg,#7c3aed,#5b21b6); box-shadow: 0 6px 18px rgba(124,58,237,.35); }
.staffdark .ibx-dpbtn:hover { filter: brightness(1.08); }
.staffdark .ibx-campbtn { background: linear-gradient(135deg,#059669,#047857); box-shadow: 0 6px 18px rgba(5,150,105,.35); }

/* Campaign compliance pre-send check (Task #597) */
.staffdark .modal-backdrop:has(.wacc-modal) .modal { max-width: 620px; background: #0b1524; border: 1px solid rgba(148,163,184,.16); }
.staffdark .wacc-modal .modal-head h3 { color: #f2f6fc; }
.staffdark .wacc-modal .modal-head h3 i { color: #25d366; }
.staffdark .wacc-modal .close-x { color: #8593ad; }
.staffdark .wacc-modal .close-x:hover { color: #e6edf6; }
.staffdark .wacc-intro { font-size: .86rem; line-height: 1.5; color: #c4cede; margin: 0 0 .9rem; }
.staffdark .wacc-run { display: flex; align-items: center; gap: .8rem; margin-bottom: .2rem; }
.staffdark .wacc-out { margin-top: .8rem; }
.staffdark .wacc-empty { text-align: center; padding: 1.4rem .5rem; color: #8593ad; font-size: .88rem; }
.staffdark .wacc-empty.err { color: #fca5a5; }
.staffdark .wacc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-bottom: .8rem; }
.staffdark .wacc-card { border-radius: 12px; padding: .7rem .5rem; text-align: center; border: 1px solid rgba(255,255,255,.1); background: #0e1728; }
.staffdark .wacc-card .wacc-num { font-size: 1.4rem; font-weight: 800; color: #f2f6fc; line-height: 1; }
.staffdark .wacc-card .wacc-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: #8593ad; margin-top: .35rem; }
.staffdark .wacc-card.ok { border-color: rgba(16,185,129,.5); } .staffdark .wacc-card.ok .wacc-num { color: #34d399; }
.staffdark .wacc-card.warn { border-color: rgba(245,158,11,.5); } .staffdark .wacc-card.warn .wacc-num { color: #fbbf24; }
.staffdark .wacc-card.blk { border-color: rgba(239,68,68,.5); } .staffdark .wacc-card.blk .wacc-num { color: #f87171; }
.staffdark .wacc-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.staffdark .wacc-pill { border: 1px solid rgba(255,255,255,.14); background: #0e1728; color: #c4cede; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .78rem; cursor: pointer; }
.staffdark .wacc-pill.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.staffdark .wacc-list { display: flex; flex-direction: column; gap: .4rem; max-height: 320px; overflow: auto; }
.staffdark .wacc-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .7rem; border-radius: 10px; background: #0e1728; border: 1px solid rgba(255,255,255,.08); border-left: 3px solid transparent; }
.staffdark .wacc-row.ok { border-left-color: #10b981; } .staffdark .wacc-row.warn { border-left-color: #f59e0b; } .staffdark .wacc-row.blk { border-left-color: #ef4444; }
.staffdark .wacc-who { display: flex; flex-direction: column; min-width: 0; }
.staffdark .wacc-name { font-weight: 700; color: #e6edf6; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staffdark .wacc-phone { font-size: .74rem; color: #8593ad; }
.staffdark .wacc-verdict { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; text-align: right; flex: 0 0 auto; max-width: 58%; }
.staffdark .wacc-vpill { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.staffdark .wacc-vpill.ok { background: rgba(16,185,129,.16); color: #34d399; }
.staffdark .wacc-vpill.warn { background: rgba(245,158,11,.16); color: #fbbf24; }
.staffdark .wacc-vpill.blk { background: rgba(239,68,68,.16); color: #f87171; }
.staffdark .wacc-reason { font-size: .72rem; color: #8593ad; line-height: 1.3; }
@media (max-width: 560px) { .staffdark .wacc-cards { grid-template-columns: repeat(2, 1fr); } .staffdark .wacc-verdict { max-width: 50%; } }

/* WhatsApp compliance decision log (Task #596) */
.staffdark .ibx-logbtn { background: linear-gradient(135deg,#4f46e5,#4338ca); box-shadow: 0 6px 18px rgba(79,70,229,.35); }
.staffdark .modal-backdrop:has(.walog-modal) .modal { max-width: 660px; background: #0b1524; border: 1px solid rgba(148,163,184,.16); }
.staffdark .walog-modal .modal-head h3 { color: #f2f6fc; }
.staffdark .walog-modal .modal-head h3 i { color: #818cf8; }
.staffdark .walog-modal .close-x { color: #8593ad; }
.staffdark .walog-modal .close-x:hover { color: #e6edf6; }
.staffdark .walog-intro { font-size: .86rem; line-height: 1.5; color: #c4cede; margin: 0 0 .9rem; }
.staffdark .walog-empty { text-align: center; padding: 1.4rem .5rem; color: #8593ad; font-size: .88rem; }
.staffdark .walog-empty.err { color: #fca5a5; }
.staffdark .walog-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-bottom: .8rem; }
.staffdark .walog-card { border-radius: 12px; padding: .7rem .5rem; text-align: center; border: 1px solid rgba(255,255,255,.1); background: #0e1728; }
.staffdark .walog-card .walog-num { font-size: 1.4rem; font-weight: 800; color: #f2f6fc; line-height: 1; }
.staffdark .walog-card .walog-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: #8593ad; margin-top: .35rem; }
.staffdark .walog-card.ok { border-color: rgba(16,185,129,.5); } .staffdark .walog-card.ok .walog-num { color: #34d399; }
.staffdark .walog-card.warn { border-color: rgba(245,158,11,.5); } .staffdark .walog-card.warn .walog-num { color: #fbbf24; }
.staffdark .walog-card.blk { border-color: rgba(239,68,68,.5); } .staffdark .walog-card.blk .walog-num { color: #f87171; }
.staffdark .walog-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.staffdark .walog-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.staffdark .walog-pill { border: 1px solid rgba(255,255,255,.14); background: #0e1728; color: #c4cede; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .78rem; cursor: pointer; }
.staffdark .walog-pill.on { background: #4338ca; border-color: #4338ca; color: #fff; }
.staffdark .walog-convfilter { display: flex; align-items: center; gap: .4rem; }
.staffdark .walog-convfilter label { font-size: .74rem; color: #8593ad; }
.staffdark .walog-convfilter select { background: #0e1728; color: #e6edf6; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: .35rem .5rem; font: inherit; font-size: .78rem; max-width: 200px; }
.staffdark .walog-list { display: flex; flex-direction: column; gap: .45rem; max-height: 360px; overflow: auto; }
.staffdark .walog-row { padding: .6rem .75rem; border-radius: 10px; background: #0e1728; border: 1px solid rgba(255,255,255,.08); border-left: 3px solid transparent; }
.staffdark .walog-row.ok { border-left-color: #10b981; } .staffdark .walog-row.warn { border-left-color: #f59e0b; } .staffdark .walog-row.blk { border-left-color: #ef4444; }
.staffdark .walog-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.staffdark .walog-who { display: flex; flex-direction: column; min-width: 0; }
.staffdark .walog-name { font-weight: 700; color: #e6edf6; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staffdark .walog-time { font-size: .72rem; color: #8593ad; }
.staffdark .walog-vpill { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.staffdark .walog-vpill.ok { background: rgba(16,185,129,.16); color: #34d399; }
.staffdark .walog-vpill.warn { background: rgba(245,158,11,.16); color: #fbbf24; }
.staffdark .walog-vpill.blk { background: rgba(239,68,68,.16); color: #f87171; }
.staffdark .walog-reason { font-size: .8rem; color: #c4cede; margin-top: .35rem; line-height: 1.35; }
.staffdark .walog-metas { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .4rem; }
.staffdark .walog-meta { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: #8593ad; }
.staffdark .walog-meta i { opacity: .8; }
.staffdark .walog-meta.err { color: #fca5a5; }
@media (max-width: 560px) { .staffdark .walog-cards { grid-template-columns: repeat(2, 1fr); } .staffdark .walog-convfilter select { max-width: 140px; } }

.staffdark .ibx-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; overflow: hidden; background: #080c15; }

/* ── Left list ── */
.staffdark .ibx-list { width: 340px; min-width: 300px; flex: 0 0 auto; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.07); background: #0b1120; }
.staffdark .ibx-list-head { padding: .8rem .8rem .6rem; display: flex; flex-direction: column; gap: .6rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.staffdark .ibx-chan-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.staffdark .ibx-cpill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255,255,255,.12); background: #131c30; color: #aab6ce; border-radius: 999px; padding: .3rem .7rem; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.staffdark .ibx-cpill .ibx-cnt { background: rgba(255,255,255,.12); border-radius: 999px; padding: .02rem .4rem; font-size: .68rem; min-width: 18px; text-align: center; }
.staffdark .ibx-cpill.on { color: #fff; border-color: transparent; }
.staffdark .ibx-cpill.on.ch-all { background: #33415a; }
.staffdark .ibx-cpill.on.ch-wa { background: linear-gradient(135deg,#25d366,#128c7e); }
.staffdark .ibx-cpill.on.ch-ms { background: linear-gradient(135deg,#0084ff,#0064d6); }
.staffdark .ibx-cpill.on.ch-dp { background: linear-gradient(135deg,#7c3aed,#5b21b6); }
.staffdark .ibx-cpill.on .ibx-cnt { background: rgba(255,255,255,.28); }
.staffdark .ibx-filter-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.staffdark .ibx-fpill { border: 0; background: transparent; color: #8593ad; border-radius: 8px; padding: .25rem .55rem; font-size: .76rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.staffdark .ibx-fpill:hover { background: rgba(255,255,255,.05); color: #c3cee1; }
.staffdark .ibx-fpill.on { background: rgba(16,185,129,.16); color: #34d399; }
.staffdark .ibx-search-in { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: #131c30; }
.staffdark .ibx-search-in i { font-size: .78rem; color: #7d8aa3; }
.staffdark .ibx-search-in input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #e6edf6; }
.staffdark .ibx-search-in input::placeholder { color: #6b7893; }

.staffdark .ibx-items { flex: 1; overflow-y: auto; padding: .35rem; }
.staffdark .ibx-item { display: flex; gap: .65rem; align-items: flex-start; width: 100%; text-align: left; padding: .6rem .55rem; cursor: pointer; border: 0; background: transparent; border-radius: 12px; margin-bottom: 2px; font-family: inherit; color: inherit; position: relative; }
.staffdark .ibx-item:hover { background: rgba(255,255,255,.05); }
.staffdark .ibx-item.on { background: linear-gradient(135deg, rgba(16,185,129,.24), rgba(5,150,105,.14)); }
.staffdark .ibx-item.unread::before { content: ''; position: absolute; left: 1px; top: 50%; transform: translateY(-50%); width: 3px; height: 26px; border-radius: 2px; background: #10b981; }

.staffdark .ibx-av { position: relative; flex: 0 0 auto; }
.staffdark .ibx-av-img { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem; font-weight: 700; background: #33415a; }
.staffdark .ibx-av-img img { width: 100%; height: 100%; object-fit: cover; }
.staffdark .ibx-av-dot { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0b1120; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .55rem; }
.staffdark .ibx-av-dot.ch-wa { background: #25d366; }
.staffdark .ibx-av-dot.ch-ms { background: #0084ff; }
.staffdark .ibx-av-dot.ch-dp { background: #7c3aed; }
.staffdark .ibx-av-dot.ch-x { background: #64748b; }

.staffdark .ibx-item-main { flex: 1; min-width: 0; }
.staffdark .ibx-item-top { display: flex; align-items: center; gap: .4rem; }
.staffdark .ibx-name { font-weight: 700; font-size: .9rem; color: #e7edf7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staffdark .ibx-item.unread .ibx-name { color: #fff; }
.staffdark .ibx-time { margin-left: auto; flex: 0 0 auto; font-size: .7rem; color: #7d8aa3; }
.staffdark .ibx-item-prev { font-size: .8rem; color: #8593ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.staffdark .ibx-item.unread .ibx-item-prev { color: #c3cee1; font-weight: 600; }
.staffdark .ibx-item-prev i { font-size: .68rem; opacity: .7; margin-right: .1rem; }
.staffdark .ibx-item-foot { display: flex; align-items: center; gap: .5rem; margin-top: 4px; }
.staffdark .ibx-owner { font-size: .72rem; color: #7d8aa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staffdark .ibx-owner i { font-size: .62rem; margin-right: .25rem; }
.staffdark .ibx-unassigned { font-size: .72rem; color: #c99a4a; font-weight: 600; }
.staffdark .ibx-unread { margin-left: auto; flex: 0 0 auto; background: #10b981; color: #fff; border-radius: 999px; font-size: .66rem; font-weight: 700; min-width: 18px; text-align: center; padding: .1rem .4rem; }
/* Task #1175 — per-row read/unread toggle: hover-revealed, sits before the right badge */
.staffdark .ibx-readtoggle { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: #7d8aa3; font-size: .72rem; opacity: 0; cursor: pointer; transition: opacity .12s, background .12s, color .12s; }
.staffdark .ibx-item:hover .ibx-readtoggle, .staffdark .ibx-readtoggle:focus-visible { opacity: 1; }
.staffdark .ibx-readtoggle:hover { background: rgba(125,138,163,.18); color: #c3cee1; }
.staffdark .ibx-readtoggle ~ .ibx-unread, .staffdark .ibx-readtoggle ~ .ibx-tag { margin-left: 0; }
.staffdark .ibx-badge { flex: 0 0 auto; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 5px; padding: .1rem .35rem; }
.staffdark .ibx-badge.student { background: rgba(16,185,129,.18); color: #34d399; }
.staffdark .ibx-badge.lead { background: rgba(96,165,250,.18); color: #7fb4ff; }
.staffdark .ibx-item-standing { padding: 1px 0 2px; }
.staffdark .ibx-standing { display: inline-flex; align-items: center; border-radius: 4px; padding: .1rem .45rem; font-size: .62rem; font-weight: 700; line-height: 1.6; letter-spacing: .02em; }
.staffdark .ibx-standing.active { background: rgba(16,185,129,.18); color: #34d399; }
.staffdark .ibx-standing.due { background: rgba(251,191,36,.15); color: #fbbf24; }
.staffdark .ibx-standing.overdue { background: rgba(239,68,68,.18); color: #f87171; }
.staffdark .ibx-standing.churned { background: rgba(139,92,246,.14); color: #a78bfa; }
.staffdark .ibx-standing.cancelled { background: rgba(148,163,184,.12); color: #94a3b8; }
.staffdark .ibx-standing.refund { background: rgba(251,113,133,.14); color: #fb7185; }
.staffdark .ibx-standing.free { background: rgba(20,184,166,.14); color: #2dd4bf; }
.staffdark .ibx-standing.paused { background: rgba(56,189,248,.12); color: #38bdf8; }
.staffdark .ibx-standing.inactive { background: rgba(100,116,139,.14); color: #94a3b8; }
.staffdark .ibx-standing.new { background: rgba(99,102,241,.14); color: #a5b4fc; }
.staffdark .ibx-empty-list { padding: 2rem 1rem; text-align: center; color: #7d8aa3; font-size: .88rem; line-height: 1.6; }
.staffdark .ibx-empty-list i { display: block; font-size: 1.8rem; opacity: .5; margin-bottom: .5rem; }

/* ── Center thread ── */
.staffdark .ibx-thread { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #070b14; }
.staffdark .ibx-th { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.staffdark .ibx-th-head { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); background: #0b1120; }
.staffdark .ibx-back { display: none; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: #aab6ce; cursor: pointer; font-size: 1rem; }
.staffdark .ibx-back:hover { background: rgba(255,255,255,.07); }
.staffdark .ibx-th-id { flex: 1; min-width: 0; }
.staffdark .ibx-th-name { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1rem; color: #f2f6fc; }
.staffdark .ibx-th-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staffdark .ibx-th-meta { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #8593ad; margin-top: 2px; flex-wrap: wrap; }
.staffdark .ibx-th-meta .ibx-dot { opacity: .5; }
/* Inbox thread — ownership row (primary owner chip + secondary assignee chips) */
.staffdark .ibx-ownership-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.staffdark .ibx-owner-chip { display: inline-flex; align-items: center; gap: .3rem; background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.28); color: #fcd34d; border-radius: 999px; padding: .18rem .55rem; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.staffdark .ibx-owner-chip i { font-size: .62rem; color: #fcd34d; }
.staffdark .ibx-sd-chip { display: inline-flex; align-items: center; gap: .3rem; background: rgba(99,179,237,.1); border: 1px solid rgba(99,179,237,.25); color: #7eb8f0; border-radius: 999px; padding: .18rem .55rem; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.staffdark .ibx-sd-chip i { font-size: .62rem; }
/* Done Assisting button — teal accent, stands out from normal action buttons */
.staffdark .ibx-th-done-assist { background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.4) !important; color: #34d399 !important; }
.staffdark .ibx-th-done-assist:hover { background: rgba(16,185,129,.22) !important; }
/* assist_done system row — softer green tint vs. the default grey */
.staffdark .ibx-event.ibx-sys.ibx-sys-done { color: #34d399; }
.staffdark .ibx-event.ibx-sys.ibx-sys-done .ibx-event-ic { background: rgba(16,185,129,.25); color: #34d399; }
.staffdark .ibx-event.ibx-sys.ibx-evt-sr { font-size: .69rem; padding: .18rem .65rem; border: 1px solid rgba(99,102,241,.22); border-radius: 20px; background: rgba(99,102,241,.07); gap: .35rem; }
.staffdark .ibx-event.ibx-evt-sr .ibx-event-ic { background: none; width: 14px; height: 14px; font-size: .58rem; color: #a5b4fc; }
.staffdark .ibx-event.ibx-evt-sr .ibx-event-title { color: #c7d2fe; font-size: .69rem; font-weight: 500; gap: .3rem; }
.staffdark .ibx-th-actions { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; }
.staffdark .ibx-callbtns { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.staffdark .ibx-chanbtn { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: 999px; padding: .5rem .85rem; font: inherit; font-weight: 700; font-size: .8rem; color: #fff; cursor: pointer; white-space: nowrap; }
.staffdark .ibx-chanbtn:hover { filter: brightness(1.09); }
/* Task #666 — owner-locked call buttons (lead belongs to someone else) */
.staffdark .ibx-chanbtn:disabled, .staffdark .ibx-chanbtn:disabled:hover { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.call-btn-locked, body.staffdark .call-btn-locked { opacity: .45; cursor: not-allowed; }
.call-btn-locked:hover { transform: none; }
.staffdark .ibx-chanbtn.ch-wa { background: linear-gradient(135deg,#25d366,#0f9d58); box-shadow: 0 4px 14px rgba(37,211,102,.28); }
.staffdark .ibx-chanbtn.ch-video, .staffdark .ibx-chanbtn.ch-call { background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 4px 14px rgba(59,130,246,.28); }
.staffdark .ibx-chanbtn.ch-dp { background: linear-gradient(135deg,#8b5cf6,#6d28d9); box-shadow: 0 4px 14px rgba(124,58,237,.28); }
.staffdark .ibx-chanbtn.ch-ms { background: linear-gradient(135deg,#0084ff,#0064d6); box-shadow: 0 4px 14px rgba(0,132,255,.28); }
.staffdark .ibx-th-actrow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.staffdark .ibx-th-sm { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .5rem .8rem; font: inherit; font-weight: 600; font-size: .8rem; color: #c3cee1; background: #131c30; cursor: pointer; white-space: nowrap; }
.staffdark .ibx-th-sm:hover { background: rgba(255,255,255,.09); color: #fff; }
.staffdark .ibx-th-caret { font-size: .6rem; opacity: .7; }
.staffdark .ibx-th-more { padding: .5rem .62rem; }
.staffdark .ibx-th-prof.on { background: linear-gradient(135deg, rgba(16,185,129,.26), rgba(5,150,105,.16)); border-color: rgba(16,185,129,.55); color: #6ee7b7; }
.staffdark .ibx-th-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.staffdark .ibx-th-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.staffdark .ibx-th-dot.off { background: #64748b; }
.staffdark .ibx-th-chan { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.staffdark .ibx-th-chan.ch-wa { color: #34d399; }
.staffdark .ibx-th-chan.ch-ms { color: #7fb4ff; }
.staffdark .ibx-th-chan.ch-dp { color: #b794f6; }
.staffdark .ibx-th-chan.ch-sms { color: #7fb4ff; }
.staffdark .ibx-th-chan.ch-x { color: #8593ad; }
.staffdark .ibx-th-num { color: #8593ad; }
.staffdark .ibx-star { border: 0; background: transparent; color: #6b7893; cursor: pointer; font-size: .95rem; padding: .1rem .2rem; }
.staffdark .ibx-star:hover { color: #f0b35a; }

.staffdark .ibx-msgs { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; background: linear-gradient(180deg,#070b14,#0a0f1c); }
.staffdark .ibx-daysep { text-align: center; margin: .7rem 0 .5rem; }
.staffdark .ibx-daysep span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7d8aa3; background: rgba(255,255,255,.05); border-radius: 999px; padding: .2rem .7rem; }
.staffdark .ibx-msg { display: flex; }
.staffdark .ibx-msg.out { justify-content: flex-end; }
.staffdark .ibx-bubble { max-width: min(74%, 560px); background: #16203a; border: 1px solid rgba(255,255,255,.05); border-radius: 14px 14px 14px 4px; padding: .55rem .8rem .4rem; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; color: #e7edf7; }
.staffdark .ibx-msg.out .ibx-bubble { background: linear-gradient(135deg,#0d7a54,#10b981); border-color: transparent; color: #fff; border-radius: 14px 14px 4px 14px; }
.staffdark .ibx-bubble.failed { background: #3a1620; border: 1px solid rgba(248,113,113,.4); }
.staffdark .ibx-msg-meta { display: block; text-align: right; font-size: .64rem; opacity: .72; margin-top: .35rem; }
.staffdark .ibx-empty-msgs { margin: auto; color: #7d8aa3; font-size: .88rem; }

/* Call / voicemail / recording event rows */
.staffdark .ibx-event { align-self: center; width: min(78%, 460px); display: flex; gap: .7rem; align-items: flex-start; background: #101a30; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: .6rem .8rem; margin: .2rem 0; }
.staffdark .ibx-event-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: #fff; background: #33415a; }
.staffdark .ibx-event.ok .ibx-event-ic { background: linear-gradient(135deg,#0d7a54,#10b981); }
.staffdark .ibx-event.missed .ibx-event-ic { background: linear-gradient(135deg,#dc2626,#b91c1c); }
.staffdark .ibx-event.vm .ibx-event-ic { background: linear-gradient(135deg,#7c3aed,#5b21b6); }
.staffdark .ibx-event-main { flex: 1; min-width: 0; }
.staffdark .ibx-event-title { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; color: #dfe7f3; }
.staffdark .ibx-event.missed .ibx-event-title { color: #f0a8a8; }
.staffdark .ibx-event-dur { font-weight: 500; color: #8593ad; }
.staffdark .ibx-event-t { margin-left: auto; font-size: .68rem; color: #7d8aa3; font-weight: 500; }
.staffdark .ibx-callmeta-wait { display: inline-flex; gap: .4rem; align-items: center; font-size: .78rem; color: #9fb0cc; font-style: italic; margin-top: .35rem; }

/* Waveform audio player (voice notes + call recordings + voicemail) */
.staffdark .ibx-wave { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; background: rgba(0,0,0,.22); border-radius: 999px; padding: .3rem .5rem .3rem .35rem; }
.staffdark .ibx-msg.out .ibx-wave { background: rgba(0,0,0,.16); }
.staffdark .ibx-wave-play { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #10b981; color: #fff; cursor: pointer; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.staffdark .ibx-msg.out .ibx-wave-play { background: #fff; color: #0d7a54; }
.staffdark .ibx-wave-bars { flex: 1; min-width: 60px; display: flex; align-items: center; gap: 2px; height: 26px; overflow: hidden; }
.staffdark .ibx-wave-bars i { flex: 1; min-width: 2px; max-width: 3px; background: currentColor; opacity: .45; border-radius: 2px; }
.staffdark .ibx-wave.playing .ibx-wave-bars i { opacity: .8; }
.staffdark .ibx-wave-dur { flex: 0 0 auto; font-size: .68rem; opacity: .8; min-width: 34px; text-align: right; }
.staffdark .ibx-wave-dl { flex: 0 0 auto; color: inherit; opacity: .6; font-size: .74rem; text-decoration: none; }
.staffdark .ibx-wave-dl:hover { opacity: 1; }

/* Department Call Queue (Task #628) */
.staffdark .cq-dept-block { background: #0e1728; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1rem; }
.staffdark .cq-dept-head { font-weight: 700; margin-bottom: .6rem; }
.staffdark .cq-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.staffdark .cq-table th { text-align: left; color: #9fb0cc; font-weight: 600; padding: .4rem .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.staffdark .cq-table td { padding: .45rem .5rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.staffdark .cq-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: #1e293b; color: #cbd6ea; }
.staffdark .cq-pill.cq-appointment, .staffdark .cq-pill.cq-urgent { background: rgba(248,113,113,.18); color: #fca5a5; }
.staffdark .cq-pill.cq-overdue, .staffdark .cq-pill.cq-due_today { background: rgba(251,191,36,.18); color: #fcd34d; }
.staffdark .cq-pill.cq-new_lead, .staffdark .cq-pill.cq-new_request, .staffdark .cq-pill.cq-new_issue { background: rgba(96,165,250,.18); color: #93c5fd; }
.staffdark .cq-lock { color: #fbbf24; margin-left: .35rem; }

/* Worker MY QUEUE — call-queue overlay (Task #634) */

/* ── MY QUEUE redesigned loading screen (.cqwl-*, owner mockup July 2026) ─── */
body.staffdark .cqwl-wrap{display:flex;flex-direction:column;gap:0;background:#080f1f;color:#c8d8f0;}
/* ── HERO ── */
body.staffdark .cqwl-hero{text-align:center;padding:.9rem 1rem .6rem;background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(30,64,175,.35) 0%,transparent 70%);}
body.staffdark .cqwl-title{margin:0 0 .3rem;font-size:1.35rem;font-weight:800;color:#e2eeff;}
body.staffdark .cqwl-accent{color:#3b9eff;}
body.staffdark .cqwl-subtitle{margin:0 0 .9rem;font-size:.8rem;color:#6888a8;}
body.staffdark .cqwl-analyze{margin:.7rem 0 0;font-size:.77rem;color:#7090b0;}
/* ── STAGE (waveforms + ring) ── */
body.staffdark .cqwl-stage{display:flex;align-items:center;justify-content:center;gap:0;height:110px;}
/* Sound-wave bars */
body.staffdark .cqwl-wave{display:flex;align-items:center;gap:2px;height:80px;padding:0 6px;}
body.staffdark .cqwl-bar{width:3px;border-radius:2px;background:linear-gradient(to top,#1d4ed8,#3b9eff80);
  animation:cqwlWave 1.1s ease-in-out infinite alternate;
  animation-delay:calc(var(--bi)*55ms);}
body.staffdark .cqwl-wave-l .cqwl-bar{height:calc(12px + 28px * sin((var(--bi) / 15) * 3.14));}
body.staffdark .cqwl-wave-r .cqwl-bar{background:linear-gradient(to top,#92400e,#f59e0b80);
  height:calc(12px + 28px * sin(((15 - var(--bi)) / 15) * 3.14));}
@keyframes cqwlWave{
  0%{transform:scaleY(.35);opacity:.5}
  50%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(.55);opacity:.65}}
/* Rotating ring */
body.staffdark .cqwl-ring-wrap{position:relative;width:110px;height:110px;flex-shrink:0;}
body.staffdark .cqwl-ring-svg{position:absolute;inset:0;width:100%;height:100%;
  animation:cqwlSpin 2.2s linear infinite;}
@keyframes cqwlSpin{to{transform:rotate(360deg)}}
body.staffdark .cqwl-ring-track{stroke:#0f2040;stroke-width:5;}
body.staffdark .cqwl-ring-arc{stroke:url(#cqwlGrad);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:246;stroke-dashoffset:72;}
/* We use a CSS gradient on the SVG via a filter trick — just use two colors */
body.staffdark .cqwl-ring-arc{stroke:#3b9eff;}
/* Logo inside ring */
body.staffdark .cqwl-ic-bg{position:absolute;inset:12px;border-radius:50%;
  background:linear-gradient(145deg,#08111e,#0d1e36);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 28px rgba(59,158,255,.3),0 0 12px rgba(245,158,11,.15);}
body.staffdark .cqwl-ic-inner{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
body.staffdark .cqwl-ring-logo{width:64px;height:64px;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(245,158,11,.5));}
/* ── CALL VOLUME STRIP ── */
body.staffdark .cqwl-vol-strip{display:flex;align-items:center;gap:.75rem;
  margin:.8rem .9rem .5rem;padding:.65rem .9rem;
  background:#0c1830;border:1px solid #1a2f52;border-radius:12px;}
body.staffdark .cqwl-vol-left{display:flex;align-items:center;gap:.55rem;flex-shrink:0;}
body.staffdark .cqwl-vol-left > i{color:#60a5fa;font-size:.95rem;}
body.staffdark .cqwl-vol-lbl{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:#6888a8;text-transform:uppercase;white-space:nowrap;}
body.staffdark .cqwl-vol-sub{font-size:.65rem;color:#445566;white-space:nowrap;}
body.staffdark .cqwl-vol-num{font-size:1.35rem;font-weight:800;color:#e2eeff;white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto;}
body.staffdark .cqwl-vol-unit{font-size:.72rem;color:#6888a8;font-weight:400;}
body.staffdark .cqwl-vol-spark{flex-shrink:0;}
body.staffdark .cqwl-live-pill{display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;background:#0d3320;border:1px solid #16a34a50;
  font-size:.65rem;font-weight:700;color:#4ade80;white-space:nowrap;}
body.staffdark .cqwl-live-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;
  animation:cqwlLivePulse 1.2s ease-in-out infinite;}
@keyframes cqwlLivePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 #4ade8080}50%{opacity:.7;box-shadow:0 0 0 4px #4ade8000}}
/* ── 4 STAT CARDS ── */
body.staffdark .cqwl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.1rem .9rem .7rem;}
body.staffdark .cqwl-sc{background:#0c1830;border:1px solid #1a2f52;border-radius:12px;padding:.6rem .55rem .5rem;text-align:center;}
body.staffdark .cqwl-sc-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .35rem;font-size:.9rem;}
body.staffdark .cqwl-sc-blue{background:rgba(37,99,235,.2);color:#60a5fa;}
body.staffdark .cqwl-sc-purple{background:rgba(124,58,237,.2);color:#a78bfa;}
body.staffdark .cqwl-sc-orange{background:rgba(217,119,6,.2);color:#fbbf24;}
body.staffdark .cqwl-sc-green{background:rgba(22,163,74,.2);color:#4ade80;}
body.staffdark .cqwl-sc-num{font-size:1.3rem;font-weight:800;color:#e2eeff;line-height:1;}
body.staffdark .cqwl-sc-lbl{font-size:.65rem;font-weight:700;color:#4a9eff;margin:.18rem 0 .08rem;letter-spacing:.02em;}
body.staffdark .cqwl-sc-sub{font-size:.62rem;color:#445877;}
body.staffdark .cqwl-amber{color:#fbbf24;}
body.staffdark .cqwl-green{color:#4ade80;}
/* ── 5-STEP PIPELINE ── */
body.staffdark .cqwl-pipe{display:flex;align-items:flex-start;justify-content:center;
  gap:0;padding:.2rem .7rem .8rem;overflow:hidden;}
body.staffdark .cqwl-step{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  flex:0 0 auto;width:60px;opacity:.45;transition:opacity .35s;}
body.staffdark .cqwl-step.cqwl-step-done{opacity:1;}
body.staffdark .cqwl-step-ic{width:44px;height:44px;border-radius:50%;
  background:#0e1f3a;border:2px solid #1a3060;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#4a6a9a;
  transition:border-color .35s,color .35s,background .35s;}
body.staffdark .cqwl-step-done .cqwl-step-ic{background:rgba(37,99,235,.22);border-color:#3b82f6;color:#60a5fa;}
body.staffdark .cqwl-step:nth-child(3) .cqwl-step-ic{background:rgba(217,119,6,.18);border-color:#d97706;color:#fbbf24;}
body.staffdark .cqwl-step-lbl{font-size:.58rem;font-weight:600;color:#6888a8;text-align:center;line-height:1.3;}
body.staffdark .cqwl-step-ck{width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
body.staffdark .cqwl-step-ring{width:16px;height:16px;border-radius:50%;border:2px solid #1e3a60;}
body.staffdark .cqwl-ck-icon{color:#4ade80;font-size:.88rem;}
body.staffdark .cqwl-pipe-line{flex:1;height:2px;background:#1a2f52;margin-top:21px;min-width:8px;position:relative;overflow:hidden;}
body.staffdark .cqwl-pipe-fill{position:absolute;inset:0;background:linear-gradient(90deg,#3b82f6,#818cf8);width:0;transition:width .4s ease;}
body.staffdark .cqwl-pipe-fill.cqwl-fill-active{width:100%;}
/* ── FOOTER ── */
body.staffdark .cqwl-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.6rem .9rem .75rem;border-top:1px solid #0f1f38;}
body.staffdark .cqwl-foot-l,.staffdark .cqwl-foot-r{display:flex;align-items:center;gap:.5rem;font-size:.68rem;color:#4a6080;max-width:55%;}
body.staffdark .cqwl-foot-l i,.staffdark .cqwl-foot-r i{color:#6888a8;flex-shrink:0;}
body.staffdark .cqwl-foot-r{flex-direction:column;align-items:flex-end;gap:.1rem;text-align:right;max-width:30%;}
/* ── Updated header avatar dot ── */
body.staffdark .cqw-head-av{background:linear-gradient(135deg,#1a3a8f,#2563eb);position:relative;border-radius:14px!important;}
body.staffdark .cqw-head-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#4ade80;border:2px solid #0e1728;animation:cqwlLivePulse 1.2s ease-in-out infinite;}

.staffdark .cqw-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border: 1px solid rgba(96,165,250,.45); border-radius: 999px; background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .04em; cursor: pointer; box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.staffdark .cqw-btn:hover { filter: brightness(1.12); }
.staffdark .cqw-btn i { font-size: .85rem; }
.staffdark .cqw-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; }
.staffdark .cqw-badge.hidden { display: none; }
/* MY QUEUE — floating draggable/minimizable panel (replaces old fullscreen overlay) */
.staffdark .cqw-float { position: fixed; z-index: 1200; width: 500px; max-width: calc(100vw - 16px); background: #0b1424; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(37,99,235,.18); overflow: hidden; top: 8vh; right: 20px; left: auto; transition: box-shadow .15s; }
.staffdark .cqw-float:hover { box-shadow: 0 32px 90px rgba(0,0,0,.72), 0 0 0 1px rgba(37,99,235,.28); }
/* Minimized: collapse body, round all corners */
.staffdark .cqw-float.cqw-minimized { border-radius: 12px; }
.staffdark .cqw-float.cqw-minimized .cqw-body { display: none; }
.staffdark .cqw-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); background: #0e1728; cursor: grab; user-select: none; }
.staffdark .cqw-head:active { cursor: grabbing; }
.staffdark .cqw-float.cqw-minimized .cqw-head { border-bottom: none; border-radius: 12px; }
.staffdark .cqw-head-l { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.staffdark .cqw-head-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(37,99,235,.22); color: #93c5fd; font-size: 1rem; flex: 0 0 auto; }
.staffdark .cqw-head h2 { margin: 0; font-size: 1.05rem; }
.staffdark .cqw-sub { color: #9fb0cc; font-size: .78rem; margin-top: .1rem; }
.staffdark .cqw-head-r { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.staffdark .cqw-x { border: 0; background: rgba(255,255,255,.06); color: #cbd6ea; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: .95rem; flex: 0 0 auto; }
.staffdark .cqw-x:hover { background: rgba(255,255,255,.12); }
.staffdark .cqw-body { padding: 1.15rem; min-height: 180px; overflow-y: auto; max-height: calc(100vh - 120px); }
.staffdark .cqw-gate { text-align: center; padding: 1.4rem .6rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.staffdark .cqw-gate > i { font-size: 1.9rem; color: #fbbf24; }
.staffdark .cqw-gate h3 { margin: 0; font-size: 1.02rem; }
.staffdark .cqw-gate p { margin: 0 0 .4rem; color: #9fb0cc; font-size: .86rem; max-width: 340px; }
/* Auto-dialer countdown (owner rule: next call ~1 min after wrap-up) */
.staffdark .cqw-gate-count > i { color: #60a5fa; }
.staffdark .cqw-countdown { font-size: 2.7rem; font-weight: 800; letter-spacing: .06em; color: #7cc0ff; font-variant-numeric: tabular-nums; line-height: 1; margin: .15rem 0 .3rem; }
.staffdark .cqw-auto-note { margin: 0 0 .9rem; color: #86efac; font-size: .82rem; }
.staffdark .cqw-auto-note i { margin-right: .3rem; }
.staffdark .cqw-claim { text-align: center; padding: 1rem .5rem 1.2rem; }
.staffdark .cqw-claim-num { font-size: 2.6rem; font-weight: 800; color: #93c5fd; line-height: 1.1; }
.staffdark .cqw-claim-sub { color: #9fb0cc; font-size: .86rem; margin: .2rem 0 1rem; }
.staffdark .cqw-claim-btn { font-size: .95rem; padding: .7rem 1.6rem; border-radius: 999px; }
.staffdark .cqw-empty-ic { font-size: 2rem; color: #34d399; margin-bottom: .4rem; }
.staffdark .cqw-claim h3 { margin: .2rem 0; font-size: 1.02rem; }
.staffdark .cqw-task { display: flex; flex-direction: column; gap: .65rem; }
.staffdark .cqw-task-top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.staffdark .cqw-cat { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: #1e293b; color: #cbd6ea; }
.staffdark .cqw-cat-appointment, .staffdark .cqw-cat-urgent { background: rgba(248,113,113,.18); color: #fca5a5; }
.staffdark .cqw-cat-overdue, .staffdark .cqw-cat-due_today { background: rgba(251,191,36,.18); color: #fcd34d; }
.staffdark .cqw-cat-new_lead, .staffdark .cqw-cat-new_request, .staffdark .cqw-cat-new_issue { background: rgba(96,165,250,.18); color: #93c5fd; }
.staffdark .cqw-waited { color: #9fb0cc; font-size: .76rem; display: inline-flex; align-items: center; gap: .3rem; }
.staffdark .cqw-task-name { font-size: 1.25rem; font-weight: 800; }
.staffdark .cqw-task-phone { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding: .55rem 1.05rem; border-radius: 12px; background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.4); color: #6ee7b7; font-weight: 700; font-size: 1.02rem; text-decoration: none; }
.staffdark .cqw-task-phone:hover { background: rgba(52,211,153,.22); }
.staffdark .cqw-task-nophone { color: #fca5a5; font-size: .84rem; }
.staffdark .cqw-task-reason { color: #cbd6ea; font-size: .86rem; background: #0e1728; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: .55rem .7rem; }
.staffdark .cqw-note-label { display: flex; flex-direction: column; gap: .3rem; color: #9fb0cc; font-size: .78rem; font-weight: 600; }
.staffdark .cqw-note { width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #0e1728; color: #e7edf7; font-size: .86rem; }
.staffdark .cqw-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: .2rem; }
.staffdark .cqw-oc { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem .4rem; border-radius: 11px; border: 1px solid transparent; font-weight: 700; font-size: .82rem; cursor: pointer; }
.staffdark .cqw-oc-done { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.4); color: #6ee7b7; }
.staffdark .cqw-oc-miss { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.38); color: #fcd34d; }
.staffdark .cqw-oc-resched { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.4); color: #93c5fd; }
.staffdark .cqw-oc:hover { filter: brightness(1.15); }
.staffdark .cqw-resched { display: flex; gap: .55rem; align-items: center; }
.staffdark .cqw-resched.hidden { display: none; }
@media (max-width: 520px) {
    .staffdark .cqw-outcomes { grid-template-columns: 1fr; }
    .staffdark .cqw-float { width: calc(100vw - 16px); right: 8px; left: 8px; top: auto; bottom: 8px; }
}
/* Admin/owner queue participation: sidebar MY QUEUE button + department picker */
.staffdark .cq-side { margin-top: .55rem; display: flex; justify-content: center; }
.staffdark .cq-side:empty { display: none; }
.staffdark .cqw-adminpick > i { color: #60a5fa; }
/* Call priority reorder modal (owner rule, July 2026) */
.staffdark .cqa-ord-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; max-height: 46vh; overflow: auto; }
.staffdark .cqa-ord-row { display: flex; align-items: center; gap: 10px; background: #10192b; border: 1px solid #24324a; border-radius: 10px; padding: 8px 10px; }
.staffdark .cqa-ord-rank { width: 22px; height: 22px; border-radius: 50%; background: #1d2a41; color: #93a6c4; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.staffdark .cqa-ord-name { flex: 1; color: #e2e8f0; font-weight: 600; font-size: 13.5px; }
.staffdark .cqa-ord-btns { display: inline-flex; gap: 4px; }
.staffdark .cqa-ord-mv { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #2b3a55; background: #16223a; color: #9fb3d4; cursor: pointer; }
.staffdark .cqa-ord-mv:hover:not(:disabled) { background: #1f2f4d; }
.staffdark .cqa-ord-mv:disabled { opacity: .35; cursor: default; }
.staffdark .cqw-pick-list { display: flex; flex-direction: column; gap: .55rem; width: 100%; max-width: 380px; margin-top: .3rem; }
.staffdark .cqw-pick { display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem; border-radius: 12px; border: 1px solid rgba(96,165,250,.35); background: #0e1728; color: #e7edf7; font-weight: 700; font-size: .88rem; cursor: pointer; text-align: left; }
.staffdark .cqw-pick:hover { background: #16233a; border-color: rgba(96,165,250,.6); }
.staffdark .cqw-pick > i { color: #93c5fd; }
.staffdark .cqw-pick-role { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9fb0cc; background: #1e293b; padding: .18rem .55rem; border-radius: 999px; }
.staffdark .cqw-linkbtn { background: none; border: none; padding: 0; color: #93c5fd; font-size: inherit; font-family: inherit; text-decoration: underline; cursor: pointer; }
.staffdark .cqw-linkbtn:hover { color: #bfdbfe; }
.staffdark .cqw-cti-warn { display: flex; align-items: center; gap: .6rem; background: #1e2a42; border: 1px solid #f59e0b55; border-radius: 8px; padding: .65rem .85rem; margin-bottom: .7rem; font-size: .84rem; color: #fde68a; }
.staffdark .cqw-cti-warn > i { font-size: 1.1rem; color: #f59e0b; flex-shrink: 0; }
.staffdark .cqw-cti-warn-text { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.staffdark .cqw-cti-warn-text strong { color: #fde68a; font-size: .88rem; }
.staffdark .cqw-cti-warn-text span { color: #9fb0cc; font-size: .8rem; }
.staffdark .cqw-cti-open-btn { flex-shrink: 0; background: #f59e0b; color: #0f1829; border: none; border-radius: 5px; padding: .3rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.staffdark .cqw-cti-open-btn:hover { background: #fbbf24; }

/* Locked system workflow read-only view (Task #634) */
.staffdark .au-locked { max-width: 720px; margin: 0 auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.staffdark .au-locked-banner { display: flex; align-items: flex-start; gap: .7rem; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.35); border-radius: 12px; padding: .8rem 1rem; color: #fcd34d; font-size: .87rem; }
.staffdark .au-locked-banner i { margin-top: .15rem; }
.staffdark .au-locked-card { background: #0e1728; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .9rem; }
.staffdark .au-locked-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.staffdark .au-locked-head h2 { margin: 0; font-size: 1.12rem; display: flex; align-items: center; gap: .55rem; }
.staffdark .au-locked-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: 999px; background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.4); color: #6ee7b7; font-size: .74rem; font-weight: 700; }
.staffdark .au-locked-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: pulse 1.6s infinite; }
.staffdark .au-spacer { flex: 1; }
.staffdark .au-locked-sec h3 { margin: 0 0 .5rem; font-size: .86rem; color: #9fb0cc; text-transform: uppercase; letter-spacing: .05em; }
.staffdark .au-locked-order { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; color: #64748b; font-size: .74rem; }
.staffdark .au-locked-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: #1e293b; color: #cbd6ea; font-size: .78rem; font-weight: 600; text-transform: capitalize; }
.staffdark .au-locked-chip b { color: #93c5fd; }
.staffdark .au-locked-stats { display: flex; gap: 2rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.07); padding-top: .9rem; }
.staffdark .au-locked-stats > div { display: flex; flex-direction: column; gap: .15rem; }
.staffdark .au-locked-num { font-weight: 800; font-size: 1.05rem; }
.staffdark .au-locked-foot { margin: 0; font-size: .8rem; }
.staffdark .au-muted { color: #9fb0cc; font-size: .87rem; margin: 0; }

/* Admin Call Logs (Task #605) */
.staffdark .calllog-wrap { display: flex; flex-direction: column; gap: 1rem; }
.staffdark .calllog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.staffdark .calllog-title { margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: .55rem; }
.staffdark .calllog-sub { color: #9fb0cc; font-size: .85rem; margin-top: .2rem; }
.staffdark .calllog-live { background: #0e1728; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: .85rem 1rem; }
.staffdark .calllog-live-empty { color: #9fb0cc; font-size: .88rem; display: flex; align-items: center; gap: .5rem; }
.staffdark .calllog-live-empty i { color: #34d399; }
.staffdark .calllog-live-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #e7edf7; display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.staffdark .cl-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: clPulse 1.6s infinite; }
@keyframes clPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.staffdark .calllog-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.staffdark .cl-live-card { background: #12203a; border: 1px solid rgba(96,165,250,.25); border-radius: 12px; padding: .7rem .8rem; }
.staffdark .cl-live-row1 { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
.staffdark .cl-live-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staffdark .cl-live-row2 { color: #9fb0cc; font-size: .78rem; margin-top: .35rem; }
.staffdark .cl-chan { color: #cbd6ea; }
.staffdark .cl-live-timer { margin-top: .5rem; font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 700; color: #7dd3fc; }
.staffdark .cl-muted { color: #6b7a93; }
.staffdark .calllog-filters { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.staffdark .calllog-filters label { display: flex; flex-direction: column; gap: .28rem; font-size: .74rem; font-weight: 600; color: #9fb0cc; text-transform: uppercase; letter-spacing: .02em; }
.staffdark .calllog-filters input, .staffdark .calllog-filters select { background: #0e1728; border: 1px solid rgba(255,255,255,.12); color: #e7edf7; border-radius: 9px; padding: .45rem .55rem; font-size: .88rem; }
.staffdark .calllog-search { flex: 1 1 200px; }
.staffdark .calllog-search input { width: 100%; }
.staffdark .calllog-count { color: #9fb0cc; font-size: .82rem; margin-bottom: .5rem; }
.staffdark .calllog-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.staffdark .calllog-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.staffdark .calllog-table th { text-align: left; padding: .6rem .7rem; background: #0e1728; color: #9fb0cc; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; position: sticky; top: 0; }
.staffdark .calllog-table td { padding: .55rem .7rem; border-top: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.staffdark .calllog-table tbody tr:hover, .staffdark .calllog-table tbody tr:hover { background: rgba(255,255,255,.02); }
.staffdark .cl-badge { display: inline-block; padding: .16rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.staffdark .cl-badge-green { background: rgba(52,211,153,.16); color: #6ee7b7; }
.staffdark .cl-badge-blue { background: rgba(96,165,250,.16); color: #93c5fd; }
.staffdark .cl-badge-red { background: rgba(248,113,113,.16); color: #fca5a5; }
.staffdark .cl-badge-amber { background: rgba(245,158,11,.16); color: #fcd34d; }
.staffdark .cl-audio { height: 34px; max-width: 220px; }
.staffdark .calllog-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .9rem; }
.staffdark .cl-pageinfo { color: #9fb0cc; font-size: .84rem; }
/* Recordings sub-tab — card grid, each with a full-width audio player. */
.staffdark .rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; }
.staffdark .rec-card { background: #0f2138; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.staffdark .rec-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.staffdark .rec-who { font-weight: 700; color: #e9eef6; display: inline-flex; align-items: center; gap: .45rem; }
.staffdark .rec-meta { color: #9fb0cc; font-size: .8rem; }
.staffdark .rec-audio { width: 100%; height: 36px; }
.staffdark .rec-unavailable { display: flex; align-items: center; gap: .45rem; color: #9fb0cc; font-size: .82rem; font-style: italic; padding: .5rem 0; }

/* Internal note rows */
.staffdark .ibx-note { align-self: center; width: min(78%, 500px); background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.28); border-radius: 12px; padding: .55rem .75rem; margin: .2rem 0; }
.staffdark .ibx-note-head { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; color: #f0b35a; text-transform: uppercase; letter-spacing: .02em; }
.staffdark .ibx-note-t { margin-left: auto; font-weight: 500; color: #9fb0cc; text-transform: none; }
.staffdark .ibx-note-body { font-size: .86rem; color: #e7edf7; margin-top: .3rem; line-height: 1.45; overflow-wrap: anywhere; }

/* Composer */
.staffdark .ibx-composer { border-top: 1px solid rgba(255,255,255,.06); padding: .55rem .9rem .8rem; background: #0b1120; }
.staffdark .ibx-comp-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.staffdark .ibx-comp-tab { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; border-radius: 8px; padding: .28rem .6rem; color: #fff; }
.staffdark .ibx-comp-tab.ch-wa { background: rgba(37,211,102,.2); color: #34d399; }
.staffdark .ibx-comp-tab.ch-ms { background: rgba(0,132,255,.2); color: #7fb4ff; }
.staffdark .ibx-comp-tab.ch-dp { background: rgba(124,58,237,.2); color: #b794f6; }
.staffdark .ibx-comp-row { display: flex; gap: .6rem; align-items: flex-end; }
.staffdark .ibx-composer textarea { flex: 1; resize: none; max-height: 120px; border: 1px solid rgba(255,255,255,.12); outline: none; background: #131c30; border-radius: 18px; padding: .6rem .9rem; font: inherit; color: #e7edf7; line-height: 1.4; }
.staffdark .ibx-composer textarea:focus { border-color: #10b981; }
.staffdark .ibx-composer textarea::placeholder { color: #6b7893; }
.staffdark .ibx-comp-tools { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; }
.staffdark .ibx-tool { width: 34px; height: 40px; border-radius: 9px; border: 0; background: transparent; color: #8593ad; cursor: pointer; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; }
.staffdark .ibx-tool:hover { background: rgba(255,255,255,.07); color: #c3cee1; }
.staffdark .ibx-tool-wide { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; width: auto; height: 40px; padding: 0 .85rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #131c30; color: #c3cee1; font: inherit; font-weight: 600; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.staffdark .ibx-tool-wide:hover { background: rgba(255,255,255,.09); color: #fff; }
.staffdark .ibx-tool.recording { color: #fff; background: #ef4444; }
.staffdark .ibx-tool.recording:hover { color: #fff; background: #dc2626; }
/* Task #1085 — subtle "Template · name" tag on template chat bubbles */
.staffdark .ibx-tpl-tag { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .35rem; padding: .14rem .5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.09); color: #cfe6da; font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.staffdark .ibx-msg.in .ibx-tpl-tag { color: #aab8d0; }
.staffdark .ibx-tpl-tag + .inbox-txt { display: block; white-space: pre-wrap; }
.staffdark .inbox-txt a, .staffdark .inbox-cap a { color: #9fd0ff; text-decoration: underline; word-break: break-word; }
.staffdark .ibx-msg.out .inbox-txt a, .staffdark .ibx-msg.out .inbox-cap a { color: #eafff5; }
.staffdark .ibx-voicebar { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; padding: .4rem .55rem; background: #131c30; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.staffdark .ibx-voicebar .ibx-vrec { color: #ef4444; display: inline-flex; animation: ibxVRec 1s ease-in-out infinite; }
.staffdark .ibx-voicebar .ibx-vtime { font-variant-numeric: tabular-nums; color: #e7edf7; font-weight: 600; font-size: .85rem; min-width: 34px; }
.staffdark .ibx-voicebar .ibx-vwave { display: inline-flex; align-items: center; gap: 2px; flex: 1; overflow: hidden; height: 24px; }
.staffdark .ibx-voicebar .ibx-vwave i { display: inline-block; width: 2px; border-radius: 2px; background: #5b6b8c; }
.staffdark .ibx-voicebar .ibx-vhint { color: #8593ad; font-size: .8rem; flex: 0 0 auto; }
.staffdark .ibx-vbtn { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: 0 0 auto; }
.staffdark .ibx-vcancel { background: rgba(255,255,255,.08); color: #c3cee1; }
.staffdark .ibx-vcancel:hover { background: rgba(255,255,255,.15); color: #fff; }
.staffdark .ibx-vsend { background: #10b981; color: #fff; }
.staffdark .ibx-vsend:hover { background: #0ea371; }
@keyframes ibxVRec { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .staffdark .ibx-voicebar .ibx-vrec { animation: none; } }
.staffdark .ibx-send { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 1.1rem; border-radius: 12px; border: 0; background: linear-gradient(135deg,#0d7a54,#10b981); color: #fff; font: inherit; font-weight: 800; font-size: .86rem; cursor: pointer; box-shadow: 0 4px 14px rgba(16,185,129,.35); white-space: nowrap; }
.staffdark .ibx-send.ch-ms { background: linear-gradient(135deg,#0084ff,#0064d6); box-shadow: 0 4px 14px rgba(0,132,255,.32); }
.staffdark .ibx-send:hover { filter: brightness(1.1); }
.staffdark .ibx-send:disabled { opacity: .5; cursor: default; }
.staffdark .ibx-send .fa-chevron-down { font-size: .66rem; opacity: .85; border-left: 1px solid rgba(255,255,255,.3); padding-left: .55rem; margin-left: .1rem; }
.staffdark .ibx-composer-off { padding: .95rem 1rem; text-align: center; color: #8593ad; font-size: .84rem; border-top: 1px solid rgba(255,255,255,.06); background: #0b1120; }
.staffdark .ibx-composer-off i { color: #7c8bb0; margin-right: .35rem; }

/* WhatsApp Meta compliance banner (Task #591) */
.staffdark .ibx-comp-compliance { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; padding: .5rem .75rem; border-radius: 10px; font-size: .8rem; line-height: 1.35; border: 1px solid transparent; }
.staffdark .ibx-comp-compliance[hidden] { display: none; }
.staffdark .ibx-comp-compliance i { flex: 0 0 auto; }
.staffdark .ibx-comp-compliance span { flex: 1; }
.staffdark .ibx-comp-compliance b { font-weight: 700; }
.staffdark .ibx-comp-compliance.ok { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
.staffdark .ibx-comp-compliance.warn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #fcd34d; }
.staffdark .ibx-comp-compliance.blk { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.32); color: #fca5a5; }
.staffdark .ibx-comp-tpl { flex: 0 0 auto; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 8px; padding: .3rem .6rem; font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.staffdark .ibx-comp-tpl:hover { background: rgba(255,255,255,.08); }
/* ── Approved-template picker overlay (Task #652 — .ibx-tplov-*) ──────────────
   ONE fixed dark overlay above the conversation (replaces the old .ibx-tpl-*
   modal markup whose classes had no CSS — the stacked-inline-panels bug). */
.ibx-tplov-back { position: fixed; inset: 0; z-index: 1300; background: rgba(2,6,23,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.ibx-tplov { width: min(880px, 100%); max-height: min(86vh, 720px); display: flex; flex-direction: column; background: #0f172a; border: 1px solid #24324b; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.55); color: #e2e8f0; overflow: hidden; }
.ibx-tplov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .95rem 1.1rem; border-bottom: 1px solid #1e293b; }
.ibx-tplov-ttl { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ibx-tplov-ttl b { font-size: .98rem; }
.ibx-tplov-ttl small { display: block; color: #94a3b8; font-size: .78rem; margin-top: .12rem; }
.ibx-tplov-wa { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: rgba(37,211,102,.14); color: #25d366; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.ibx-tplov-x { flex: 0 0 auto; border: 0; background: transparent; color: #94a3b8; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .1rem .35rem; border-radius: 8px; }
.ibx-tplov-x:hover { color: #f8fafc; background: rgba(255,255,255,.08); }
.ibx-tplov-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 0; }
.ibx-tplov-list { min-height: 0; overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.ibx-tplov-row { display: flex; align-items: flex-start; gap: .6rem; text-align: left; width: 100%; padding: .65rem .7rem; border: 1px solid #24324b; background: #111c31; border-radius: 12px; cursor: pointer; color: inherit; font: inherit; }
.ibx-tplov-row:hover { border-color: #33507a; }
.ibx-tplov-row.on { border-color: #25d366; background: rgba(37,211,102,.08); }
.ibx-tplov-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #33507a; display: flex; align-items: center; justify-content: center; font-size: .6rem; color: transparent; margin-top: .1rem; }
.ibx-tplov-row.on .ibx-tplov-check { background: #25d366; border-color: #25d366; color: #052e16; }
.ibx-tplov-meta { min-width: 0; display: flex; flex-direction: column; gap: .28rem; }
.ibx-tplov-name { font-weight: 700; font-size: .88rem; word-break: break-word; }
.ibx-tplov-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.ibx-tplov-pill { font-size: .66rem; font-weight: 600; letter-spacing: .03em; border-radius: 6px; padding: .1rem .4rem; background: rgba(148,163,184,.14); color: #94a3b8; }
.ibx-tplov-pill.cat { background: rgba(96,165,250,.14); color: #93c5fd; text-transform: capitalize; }
.ibx-tplov-pill.vars { background: rgba(251,191,36,.14); color: #fcd34d; }
.ibx-tplov-snip { color: #94a3b8; font-size: .78rem; line-height: 1.35; }
.ibx-tplov-side { min-height: 0; overflow: auto; border-left: 1px solid #1e293b; background: #0b1424; padding: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.ibx-tplov-sec { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.ibx-tplov-prev { background: #0b141a; border-radius: 12px; padding: .8rem; border: 1px solid #1e293b; }
.ibx-tplov-bubble { background: #005c4b; color: #e7fbe9; border-radius: 10px 10px 10px 2px; padding: .5rem .6rem .35rem; font-size: .82rem; line-height: 1.4; max-width: 100%; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.ibx-tplov-bhead { font-weight: 700; margin-bottom: .25rem; }
.ibx-tplov-bfoot { color: rgba(231,251,233,.62); font-size: .72rem; margin-top: .3rem; }
.ibx-tplov-btime { text-align: right; color: rgba(231,251,233,.6); font-size: .64rem; margin-top: .25rem; }
.ibx-tplov-btime i { color: #53bdeb; }
.ibx-tplov-bubble mark { background: rgba(255,255,255,.18); color: inherit; border-radius: 4px; padding: 0 .15rem; }
.ibx-tplov-varph { color: #fcd34d; font-weight: 600; }
.ibx-tplov-vars { display: flex; flex-direction: column; gap: .5rem; }
.ibx-tplov-var { display: flex; flex-direction: column; gap: .22rem; font-size: .74rem; color: #94a3b8; }
.ibx-tplov-var input { background: #111c31; border: 1px solid #24324b; border-radius: 8px; color: #e2e8f0; padding: .45rem .55rem; font-size: .82rem; }
.ibx-tplov-var input:focus { outline: none; border-color: #25d366; }
.ibx-tplov-foot { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding: .8rem 1.1rem; border-top: 1px solid #1e293b; }
.ibx-tplov-cancel { border: 1px solid #33415c; background: transparent; color: #cbd5e1; border-radius: 9px; padding: .5rem .95rem; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ibx-tplov-cancel:hover { background: rgba(255,255,255,.06); }
.ibx-tplov-send { border: 0; background: #16a34a; color: #fff; border-radius: 9px; padding: .5rem 1.05rem; font-size: .84rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.ibx-tplov-send:hover { background: #15803d; }
.ibx-tplov-send:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) {
    .ibx-tplov-body { grid-template-columns: 1fr; overflow: auto; }
    .ibx-tplov-list { overflow: visible; }
    .ibx-tplov-side { border-left: 0; border-top: 1px solid #1e293b; overflow: visible; }
}

/* ── WhatsApp Templates manager card (Task #652 — .watm-*) ──────────────────── */
body.staffdark .watm-card { margin-top: 14px; }
body.staffdark .watm-banner { flex-wrap: wrap; gap: .6rem; }
body.staffdark .watm-headbtns { display: flex; gap: .5rem; flex-wrap: wrap; }
body.staffdark .watm-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: .6rem; }
body.staffdark .watm-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; color: #7d8aa3; padding: 1.6rem 1rem; }
body.staffdark .watm-empty i { font-size: 2rem; opacity: .5; }
body.staffdark .watm-empty b { color: #cbd5e1; }
body.staffdark .watm-empty span { font-size: .82rem; max-width: 520px; line-height: 1.45; }
body.staffdark .watm-err { color: #fca5a5; font-size: .84rem; }
body.staffdark .watm-row { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem .8rem; border: 1px solid #24324b; border-radius: 12px; background: #111c31; }
body.staffdark .watm-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .32rem; font-size: .68rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .22rem .6rem; margin-top: .1rem; white-space: nowrap; }
body.staffdark .watm-pill.ok { background: rgba(34,197,94,.14); color: #4ade80; }
body.staffdark .watm-pill.pend { background: rgba(251,191,36,.14); color: #fcd34d; }
body.staffdark .watm-pill.rej { background: rgba(239,68,68,.14); color: #fca5a5; }
body.staffdark .watm-pill.ver { background: rgba(96,165,250,.14); color: #93c5fd; }
body.staffdark .watm-pill.draft { background: rgba(148,163,184,.14); color: #a8b4c7; }
body.staffdark .watm-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
body.staffdark .watm-name { font-weight: 700; font-size: .9rem; color: #e2e8f0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; word-break: break-word; }
body.staffdark .watm-tag { font-size: .66rem; font-weight: 600; border-radius: 6px; padding: .1rem .4rem; background: rgba(148,163,184,.14); color: #94a3b8; }
body.staffdark .watm-tag.cat { background: rgba(96,165,250,.14); color: #93c5fd; text-transform: capitalize; }
body.staffdark .watm-tag.meta { background: rgba(167,139,250,.14); color: #c4b5fd; }
body.staffdark .watm-snip { color: #94a3b8; font-size: .8rem; line-height: 1.4; }
body.staffdark .watm-reason { color: #fca5a5; font-size: .78rem; line-height: 1.4; }
body.staffdark .watm-acts { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
body.staffdark .watm-del { color: #fca5a5; }
@media (max-width: 640px) {
    body.staffdark .watm-row { flex-wrap: wrap; }
    body.staffdark .watm-acts { width: 100%; justify-content: flex-start; }
}

/* ── Template builder overlay (Task #652 — .watb-*) ─────────────────────────── */
.watb-back { position: fixed; inset: 0; z-index: 1300; background: rgba(2,6,23,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.watb { width: min(980px, 100%); max-height: min(92vh, 800px); display: flex; flex-direction: column; background: #0f172a; border: 1px solid #24324b; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.55); color: #e2e8f0; overflow: hidden; }
.watb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .95rem 1.1rem; border-bottom: 1px solid #1e293b; }
.watb-ttl { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.watb-ttl b { font-size: .98rem; }
.watb-ttl small { display: block; color: #94a3b8; font-size: .78rem; margin-top: .12rem; }
.watb-wa { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: rgba(37,211,102,.14); color: #25d366; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.watb-x { flex: 0 0 auto; border: 0; background: transparent; color: #94a3b8; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .1rem .35rem; border-radius: 8px; }
.watb-x:hover { color: #f8fafc; background: rgba(255,255,255,.08); }
.watb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; }
.watb-form { min-height: 0; overflow: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.watb-grid { display: grid; grid-template-columns: 1fr 180px; gap: .7rem; }
.watb-field { display: flex; flex-direction: column; gap: .3rem; }
.watb-field > span { font-size: .76rem; font-weight: 700; color: #cbd5e1; }
.watb-field > span em { font-style: normal; font-weight: 500; color: #64748b; }
.watb-field input[type="text"], .watb-field select, .watb-field textarea { background: #111c31; border: 1px solid #24324b; border-radius: 9px; color: #e2e8f0; padding: .55rem .65rem; font-size: .86rem; font-family: inherit; width: 100%; }
.watb-field input:focus, .watb-field select:focus, .watb-field textarea:focus { outline: none; border-color: #25d366; }
.watb-field input[readonly] { opacity: .6; cursor: not-allowed; }
.watb-field textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
.watb-field small { color: #64748b; font-size: .7rem; }
.watb-field.bad input, .watb-field.bad textarea, .watb-field.bad select { border-color: #ef4444; }
.watb-field.bad > span { color: #fca5a5; }
.watb-field.sm > span { font-size: .7rem; }
.watb-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.watb-cat { display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; text-align: left; padding: .6rem .7rem; border: 1px solid #24324b; background: #111c31; border-radius: 11px; cursor: pointer; color: #cbd5e1; font: inherit; font-size: .82rem; font-weight: 700; }
.watb-cat i { color: #94a3b8; }
.watb-cat small { font-weight: 500; font-size: .68rem; color: #64748b; line-height: 1.3; }
.watb-cat:hover:not(:disabled) { border-color: #33507a; }
.watb-cat.on { border-color: #25d366; background: rgba(37,211,102,.08); }
.watb-cat.on i { color: #25d366; }
.watb-cat.dis, .watb-cat:disabled { opacity: .45; cursor: not-allowed; }
.watb-bodybar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.watb-addvar { border: 1px dashed #33507a; background: transparent; color: #93c5fd; border-radius: 8px; padding: .3rem .6rem; font-size: .74rem; font-weight: 600; cursor: pointer; }
.watb-addvar:hover { background: rgba(96,165,250,.08); }
.watb-exwrap { display: flex; flex-direction: column; gap: .5rem; border: 1px solid #24324b; border-radius: 11px; padding: .7rem; background: rgba(251,191,36,.04); }
.watb-exgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .55rem; }
.watb-sec { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.watb-sec em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.watb-errs { border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.08); border-radius: 11px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.watb-errs-h { color: #fca5a5; font-weight: 700; font-size: .8rem; }
.watb-err { color: #fecaca; font-size: .78rem; line-height: 1.45; }
.watb-okmsg { border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.08); border-radius: 11px; padding: .7rem .8rem; color: #86efac; font-size: .8rem; }
.watb-side { min-height: 0; overflow: auto; border-left: 1px solid #1e293b; background: #0b1424; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.watb-phone { background: #0b141a; border: 1px solid #1e293b; border-radius: 14px; padding: .9rem .7rem; min-height: 140px; }
.watb-bubble { background: #005c4b; color: #e7fbe9; border-radius: 10px 10px 10px 2px; padding: .5rem .6rem .35rem; font-size: .82rem; line-height: 1.4; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.watb-bhead { font-weight: 700; margin-bottom: .25rem; }
.watb-bfoot { color: rgba(231,251,233,.62); font-size: .72rem; margin-top: .3rem; }
.watb-btime { text-align: right; color: rgba(231,251,233,.6); font-size: .64rem; margin-top: .25rem; }
.watb-btime i { color: #53bdeb; }
.watb-bubble mark { background: rgba(255,255,255,.18); color: inherit; border-radius: 4px; padding: 0 .15rem; }
.watb-bempty { color: rgba(231,251,233,.5); }
.watb-varph { color: #fcd34d; font-weight: 600; }
.watb-hint { color: #7d8aa3; font-size: .76rem; line-height: 1.5; }
.watb-hint i { color: #60a5fa; }
.watb-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1.1rem; border-top: 1px solid #1e293b; flex-wrap: wrap; }
.watb-foot-r { display: flex; gap: .55rem; flex-wrap: wrap; }
.watb-cancel { border: 1px solid #33415c; background: transparent; color: #cbd5e1; border-radius: 9px; padding: .5rem .95rem; font-size: .84rem; font-weight: 600; cursor: pointer; }
.watb-cancel:hover { background: rgba(255,255,255,.06); }
.watb-verify { border: 1px solid #33507a; background: transparent; color: #93c5fd; border-radius: 9px; padding: .5rem .9rem; font-size: .84rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.watb-verify:hover { background: rgba(96,165,250,.08); }
.watb-save { border: 1px solid #33415c; background: rgba(255,255,255,.05); color: #e2e8f0; border-radius: 9px; padding: .5rem .9rem; font-size: .84rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.watb-save:hover { background: rgba(255,255,255,.1); }
.watb-submit { border: 0; background: #16a34a; color: #fff; border-radius: 9px; padding: .5rem 1.05rem; font-size: .84rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.watb-submit:hover { background: #15803d; }
.watb-verify:disabled, .watb-save:disabled, .watb-submit:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
    .watb-body { grid-template-columns: 1fr; overflow: auto; }
    .watb-form { overflow: visible; }
    .watb-side { border-left: 0; border-top: 1px solid #1e293b; overflow: visible; }
    .watb-grid, .watb-cats { grid-template-columns: 1fr; }
}

/* Shared empty / media states (media helpers still emit .inbox-* classes) */
.staffdark .inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; color: #7d8aa3; font-size: .92rem; text-align: center; padding: 1.6rem; }
.staffdark .inbox-empty i { font-size: 2.4rem; opacity: .45; }
.staffdark .inbox-media { max-width: 240px; max-height: 240px; border-radius: 10px; display: block; }
.staffdark .inbox-video { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; }
.staffdark .inbox-file { display: inline-flex; gap: .4rem; align-items: center; color: inherit; text-decoration: underline; }
.staffdark .inbox-cap { margin-top: .3rem; }
.staffdark .inbox-medialink { display: inline-block; }
.staffdark .inbox-dl { display: inline-flex; gap: .35rem; align-items: center; margin-top: .3rem; font-size: .78rem; color: #9fd0ff; text-decoration: none; opacity: .9; }
.staffdark .inbox-dl:hover { text-decoration: underline; opacity: 1; }
.staffdark .ibx-msg.out .inbox-dl { color: #eafff5; }
.staffdark .inbox-media-wait { display: inline-flex; gap: .4rem; align-items: center; font-size: .82rem; color: #9fb0cc; font-style: italic; }
.staffdark .inbox-media-fail { color: #f0a0a0; font-style: normal; }
.staffdark .inbox-fail { color: #f87171; }

/* ── Right customer / account panel ── */
.staffdark .ibx-panel { flex: 0 0 auto; width: 0; overflow: hidden; display: flex; flex-direction: column; border-left: 0 solid rgba(255,255,255,.09); background: #0b1120; transition: width .28s cubic-bezier(.4,0,.2,1); }
.staffdark .ibx.profile-open .ibx-panel { width: 340px; border-left-width: 1px; overflow-y: auto; overflow-x: hidden; }
.staffdark .ibx-panel-bar, .staffdark .ibx-panel-in, .staffdark .ibx-panel-empty { width: 340px; box-sizing: border-box; flex: 0 0 auto; }
.staffdark .ibx-panel-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); background: #0b1120; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #9fb0cc; }
.staffdark .ibx-panel-bar i { color: #10b981; margin-right: .35rem; }
.staffdark .ibx-panel-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: #131c30; color: #aab6ce; cursor: pointer; font-size: .9rem; }
.staffdark .ibx-panel-x:hover { background: rgba(255,255,255,.09); color: #fff; }
.staffdark .ibx-panel-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; color: #7d8aa3; font-size: .85rem; text-align: center; padding: 1.6rem; }
.staffdark .ibx-panel-empty i { font-size: 2rem; opacity: .45; }
.staffdark .ibx-panel-in { padding: 1rem .9rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.staffdark .ibx-phero { display: flex; align-items: center; gap: .7rem; }
.staffdark .ibx-phero .ibx-av-img { width: 52px; height: 52px; }
.staffdark .ibx-phero-name { font-size: 1.05rem; font-weight: 800; color: #f2f6fc; }
.staffdark .ibx-phero-sub { font-size: .78rem; color: #8593ad; margin-top: 1px; }
.staffdark .ibx-psec { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; overflow: hidden; }
.staffdark .ibx-psec-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .8rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9fb0cc; background: rgba(255,255,255,.03); }
.staffdark .ibx-psec-h i { color: #10b981; margin-right: .35rem; }
.staffdark .ibx-psec-link { border: 0; background: transparent; color: #7fb4ff; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.staffdark .ibx-psec-link:hover { text-decoration: underline; }
.staffdark .ibx-psec-b { padding: .6rem .8rem .7rem; }
.staffdark .ibx-prow { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .28rem 0; font-size: .84rem; border-top: 1px solid rgba(255,255,255,.05); }
.staffdark .ibx-prow:first-child { border-top: 0; }
.staffdark .ibx-plabel { flex: 0 0 auto; color: #8593ad; }
.staffdark .ibx-pval { text-align: right; color: #e7edf7; overflow-wrap: anywhere; }
.staffdark .ibx-pval a { color: #9fd0ff; text-decoration: none; }
.staffdark .ibx-pval a:hover { text-decoration: underline; }
.staffdark .ibx-pmuted { color: #7d8aa3; font-size: .84rem; font-style: italic; }
.staffdark .ibx-danger { color: #f87171; font-weight: 700; }
.staffdark .ibx-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .12rem .55rem; background: rgba(255,255,255,.08); color: #cfe; }
.staffdark .ibx-chip.ch-wa { background: rgba(37,211,102,.18); color: #34d399; }
.staffdark .ibx-chip.ch-ms { background: rgba(0,132,255,.18); color: #7fb4ff; }
.staffdark .ibx-chip.ch-dp { background: rgba(124,58,237,.2); color: #b794f6; }
.staffdark .ibx-status { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .12rem .6rem; text-transform: capitalize; background: rgba(148,163,184,.2); color: #cbd5e1; }
.staffdark .ibx-status.active, .staffdark .ibx-status.free-access { background: rgba(16,185,129,.18); color: #34d399; }
.staffdark .ibx-status.due-soon { background: rgba(245,158,11,.18); color: #fbbf24; }
.staffdark .ibx-status.overdue, .staffdark .ibx-status.churned, .staffdark .ibx-status.cancelled, .staffdark .ibx-status.refund { background: rgba(239,68,68,.18); color: #f87171; }
.staffdark .ibx-status.paused, .staffdark .ibx-status.inactive, .staffdark .ibx-status.new { background: rgba(96,165,250,.18); color: #7fb4ff; }
.staffdark .ibx-qa-grid { display: grid; grid-template-columns: 1fr; gap: .4rem; }
/* Inbox "Quotes & payments" quick-action sheet (renders in a standard light modal) */
.ibx-qp .ibx-qp-who { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--border, #e5e7eb); }
.ibx-qp .ibx-qp-who-name { font-weight: 700; font-size: 1.02rem; }
.ibx-qp .ibx-qp-who-sub { color: #6b7280; font-size: .86rem; margin-top: .12rem; }
.ibx-qp .ibx-qp-sec-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: .55rem; display: flex; align-items: center; gap: .4rem; }
.ibx-qp .ibx-qp-list { display: flex; flex-direction: column; gap: .5rem; max-height: 260px; overflow-y: auto; }
.ibx-qp .ibx-qp-inv { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .75rem; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: #fafafa; }
.ibx-qp .ibx-qp-inv-main { display: flex; flex-direction: column; min-width: 0; }
.ibx-qp .ibx-qp-inv-desc { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-qp .ibx-qp-inv-meta { color: #9ca3af; font-size: .78rem; margin-top: .1rem; }
.ibx-qp .ibx-qp-inv-right { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.ibx-qp .ibx-qp-inv-amt { font-weight: 700; font-size: .9rem; }
.ibx-qp .ibx-pmuted { color: #6b7280; font-size: .88rem; font-style: italic; padding: .3rem 0; }
.ibx-qp .ibx-status { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .12rem .6rem; text-transform: capitalize; background: #eef1f5; color: #475569; }
.ibx-qp .ibx-status.paid, .ibx-qp .ibx-status.active { background: #dcfce7; color: #15803d; }
.ibx-qp .ibx-status.due-soon, .ibx-qp .ibx-status.pending { background: #fef3c7; color: #b45309; }
.ibx-qp .ibx-status.overdue, .ibx-qp .ibx-status.cancelled, .ibx-qp .ibx-status.refund, .ibx-qp .ibx-status.void { background: #fee2e2; color: #b91c1c; }
.ibx-qp .ibx-status.superseded { background: #e5e7eb; color: #6b7280; }
.ibx-qp .ibx-qp-acts { display: flex; gap: .6rem; margin-top: 1.1rem; }
.ibx-qp .ibx-qp-acts .btn { flex: 1; justify-content: center; }
.staffdark .ibx-qa { display: inline-flex; align-items: center; gap: .55rem; width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.1); background: #131c30; color: #dfe7f3; border-radius: 10px; padding: .55rem .7rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.staffdark .ibx-qa i { color: #8fb3ff; width: 16px; text-align: center; }
.staffdark .ibx-qa:hover { background: rgba(255,255,255,.08); }
.staffdark .ibx-qa.call { background: linear-gradient(135deg,#0d7a54,#10b981); border-color: transparent; color: #fff; }
.staffdark .ibx-qa.call i { color: #fff; }

/* ── List header top row (All Channels + icon actions) ── */
.staffdark .ibx-list-head-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.staffdark .ibx-allchan { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(255,255,255,.12); background: #131c30; color: #dfe7f3; border-radius: 999px; padding: .4rem .8rem; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.staffdark .ibx-allchan:hover { background: rgba(255,255,255,.08); }
.staffdark .ibx-allchan i { font-size: .6rem; opacity: .7; }
.staffdark .ibx-list-head-icons { display: flex; align-items: center; gap: .2rem; }
.staffdark .ibx-lh-ic { width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent; color: #8593ad; cursor: pointer; font-size: .85rem; }
.staffdark .ibx-lh-ic:hover { background: rgba(255,255,255,.08); color: #dfe7f3; }
.staffdark .ibx-sort { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: #131c30; color: #8593ad; cursor: pointer; font-size: .82rem; }
.staffdark .ibx-sort:hover { background: rgba(255,255,255,.08); color: #dfe7f3; }
.staffdark .ibx-kbd { flex: 0 0 auto; font-size: .68rem; font-weight: 700; color: #6b7893; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: .1rem .4rem; }

/* ── List item foot (assignment + tags) ── */
.staffdark .ibx-assign { font-size: .72rem; color: #7d8aa3; }
.staffdark .ibx-tag { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; text-transform: uppercase; letter-spacing: .02em; background: rgba(148,163,184,.2); color: #cbd5e1; }
.staffdark .ibx-tag.missed { background: rgba(239,68,68,.18); color: #f87171; }
.staffdark .ibx-tag.vm { background: rgba(124,58,237,.2); color: #b794f6; }
.staffdark .ibx-tag.dp { background: rgba(139,92,246,.18); color: #c4b5fd; }
.staffdark .ibx-tag.urgent { background: rgba(245,158,11,.2); color: #fbbf24; }
.staffdark .ibx-pv-voice { color: #b794f6; }
.staffdark .ibx-pv-missed { color: #f87171; }
/* Task #656: a missed-call preview line reads danger-toned in the inbox list */
.staffdark .ibx-prev-missed { color: #f87171; }
.staffdark .ibx-prev-missed i { opacity: 1; }
.staffdark .ibx-item.unread .ibx-prev-missed { color: #fca5a5; }

/* ── Load more / empty states ── */
.staffdark .ibx-loadmore { padding: .7rem .8rem 1rem; text-align: center; }
.staffdark .ibx-loadmore button { border: 1px solid rgba(255,255,255,.12); background: #131c30; color: #cbd5e1; border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.staffdark .ibx-loadmore button:hover { background: rgba(255,255,255,.08); color: #fff; }
.staffdark .ibx-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.6rem; color: #7d8aa3; font-size: .85rem; text-align: center; }

/* ── Message avatars (incoming only) ── */
.staffdark .ibx-mav { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; align-self: flex-end; margin-right: .5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#334155,#1e293b); color: #cbd5e1; font-size: .68rem; font-weight: 700; }
.staffdark .ibx-mav img { width: 100%; height: 100%; object-fit: cover; }
.staffdark .ibx-msg.out .ibx-mav { display: none; }

/* ── Call / system event extras ── */
.staffdark .ibx-event-sub { font-size: .72rem; color: #8593ad; margin-top: 2px; }
.staffdark .ibx-event-go { align-self: center; margin-left: .4rem; color: #6b7893; font-size: .78rem; }
.staffdark .ibx-note .ibx-event-go { display: none; }
.staffdark .ibx-event-chan { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px; font-size: .6rem; font-weight: 800; color: #fff; background: #475569; }
.staffdark .ibx-event-chan.ch-dp { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.staffdark .ibx-event-lock { color: #7d8aa3; font-size: .7rem; }
.staffdark .ibx-event.ibx-sys { background: transparent; border: 0; align-self: center; width: auto; max-width: 78%; padding: .3rem .6rem; color: #7d8aa3; font-size: .76rem; justify-content: center; }
.staffdark .ibx-event.ibx-call { align-items: flex-start; }

/* ── Hidden audio element for recordings ── */
.staffdark .ibx-wave-audio { display: none; }

/* ── Right panel: account extras ── */
.staffdark .ibx-phero-id { min-width: 0; flex: 1; }
.staffdark .ibx-next { font-weight: 700; color: #e7edf7; }
.staffdark .ibx-pref { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; margin-left: .25rem; background: rgba(255,255,255,.08); color: #cbd5e1; font-size: .72rem; }
.staffdark .ibx-pref.ch-wa { background: rgba(37,211,102,.18); color: #34d399; }
.staffdark .ibx-pref.ch-ms { background: rgba(0,132,255,.18); color: #7fb4ff; }
.staffdark .ibx-pref.ch-dp { background: rgba(124,58,237,.2); color: #b794f6; }
.staffdark .ibx-teach { display: inline-flex; align-items: center; gap: .4rem; }
.staffdark .ibx-teach-av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#334155,#1e293b); color: #cbd5e1; font-size: .62rem; font-weight: 700; }
.staffdark .ibx-cs-wa { color: #34d399; }
.staffdark .ibx-cs-ms { color: #7fb4ff; }
.staffdark .ibx-cs-dp { color: #b794f6; }
.staffdark .ibx-inline-wa { color: #34d399; }
.staffdark .ibx-cb-yes { color: #fbbf24; font-weight: 700; }
.staffdark .ibx-warn { color: #fbbf24; font-weight: 700; }

/* ── Full-bleed inbox mode (Task: full-screen inbox) ──
   When the Inbox tab is active, shell() renders #mainArea with .main-ibxfull:
   no page scroll, no padding chrome — the three panes stretch edge-to-edge and
   the thread column runs the full viewport height (internal scrolling only),
   with a brief zoom-in entrance. */
.staffdark .main-ibxfull { overflow: hidden; display: flex; flex-direction: column; padding: .7rem .85rem .85rem; }
.staffdark .main-ibxfull .ibx { flex: 1 1 auto; height: auto; min-height: 0; animation: ibxEnter .3s cubic-bezier(.4,0,.2,1); }
@keyframes ibxEnter { from { opacity: 0; transform: scale(.982); } to { opacity: 1; transform: none; } }
.staffdark .main-ibxfull .ibx-top { padding: .1rem .15rem .85rem; }
@media (max-width: 820px) { .staffdark .main-ibxfull { overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) { .staffdark .main-ibxfull .ibx { animation: none; } }

/* ── Admin-only list filters: agent (owner) + department ── */
.staffdark .ibx-admin-filters { display: flex; gap: .45rem; margin-top: .55rem; }
.staffdark .ibx-fsel { flex: 1 1 0; min-width: 0; padding: .42rem .5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #131c30; color: #dfe7f3; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.staffdark .ibx-fsel:hover { background: #182238; }
.staffdark .ibx-fsel:focus { outline: none; border-color: rgba(16,185,129,.5); }

/* ── Responsive: collapse to single column ── */
@media (max-width: 820px) {
    .staffdark .ibx { height: auto; min-height: 0; flex: 1 1 auto; }
    .staffdark .ibx-top-search { order: 3; margin-left: 0; max-width: none; width: 100%; }
    .staffdark .ibx-list { width: auto; min-width: 0; flex: 1 1 auto; border-right: 0; }
    .staffdark .ibx-thread { display: none; }
    .staffdark .ibx.thread-open .ibx-list { display: none; }
    .staffdark .ibx.thread-open .ibx-thread { display: flex; flex: 1 1 auto; }
    .staffdark .ibx.profile-open .ibx-panel { width: 300px; }
    .staffdark .ibx.profile-open .ibx-panel-bar, .staffdark .ibx.profile-open .ibx-panel-in, .staffdark .ibx.profile-open .ibx-panel-empty { width: 300px; }
    .staffdark .ibx-back { display: inline-flex; align-items: center; justify-content: center; }
    .staffdark .ibx-body { height: 78vh; }
}
@media (max-width: 560px) {
    .staffdark .ibx.profile-open .ibx-thread { display: none; }
    .staffdark .ibx.profile-open .ibx-panel { width: 100%; }
    .staffdark .ibx.profile-open .ibx-panel-bar, .staffdark .ibx.profile-open .ibx-panel-in, .staffdark .ibx.profile-open .ibx-panel-empty { width: 100%; }
}

/* Global incoming / active WhatsApp call bar — appended to <body>, unscoped so it
   rings from any staff tab. */
.inbox-callbar { position: fixed; right: 18px; bottom: 18px; z-index: 1200; display: flex; align-items: center; gap: .8rem; background: #0b1120; color: #e6edf6; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: .7rem .9rem; box-shadow: 0 14px 40px rgba(0,0,0,.5); min-width: 280px; max-width: min(92vw, 380px); }
.inbox-callbar.in-call { border-color: rgba(16,185,129,.5); }
.inbox-callbar .icb-ring { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#25d366,#128c7e); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.inbox-callbar .icb-ring.live { background: linear-gradient(135deg,#0d7a54,#10b981); }
.inbox-callbar .icb-ring:not(.live) { animation: icbRing 1s ease-in-out infinite; }
@keyframes icbRing { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.inbox-callbar .icb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.inbox-callbar .icb-txt b { font-size: .88rem; }
.inbox-callbar .icb-txt span { font-size: .78rem; color: #9fb0cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-callbar .icb-acts { flex: 0 0 auto; display: flex; gap: .4rem; }
.inbox-callbar .icb-btn { border: 0; border-radius: 9px; padding: .5rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer; font-family: inherit; color: #fff; display: inline-flex; align-items: center; gap: .35rem; }
.inbox-callbar .icb-ans { background: #22c55e; }
.inbox-callbar .icb-rej, .inbox-callbar .icb-hang { background: #ef4444; }
.inbox-callbar .icb-btn:hover { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .inbox-callbar .icb-ring:not(.live) { animation: none; } }

/* ════ Visual Automation Builder (Task #580) — scoped under staff dark theme ══ */
/* ── Automation list page (full-width, no sidebar) ── */
body.staffdark .au-list-page { display: flex; flex-direction: column; gap: 1.2rem; padding: .2rem 0; }
body.staffdark .au-lp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
body.staffdark .au-lp-title { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: .55rem; }
body.staffdark .au-lp-title i { color: #6ea8ff; }
body.staffdark .au-lp-body { overflow-x: auto; }
body.staffdark .au-lp-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
body.staffdark .au-lp-table th { text-align: left; padding: .7rem 1rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #9fb0cc; background: rgba(255,255,255,.03); white-space: nowrap; }
body.staffdark .au-lp-table td { padding: .7rem 1rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .9rem; vertical-align: middle; }
body.staffdark .au-lp-row { cursor: default; transition: background .12s; }
body.staffdark .au-lp-row:hover { background: rgba(110,168,255,.06); }
body.staffdark .au-lp-name-cell { display: flex; align-items: center; gap: .55rem; }
body.staffdark .au-lp-name { font-weight: 600; }
body.staffdark .au-lp-trigger-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: #9fb0cc; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .18rem .65rem; white-space: nowrap; }
body.staffdark .au-lp-trigger-badge i { color: #8fb3ff; }
body.staffdark .au-lp-num { font-size: .88rem; color: #9fb0cc; }
body.staffdark .au-lp-date { font-size: .82rem; color: #9fb0cc; white-space: nowrap; }
body.staffdark .au-lp-actions-cell { display: flex; gap: .3rem; justify-content: flex-end; }
body.staffdark .au-lp-locked-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fcd34d; white-space: nowrap; }
body.staffdark .au-lp-loading { padding: 2.5rem 1rem; text-align: center; color: #9fb0cc; }
body.staffdark .au-lp-empty { text-align: center; padding: 4rem 1rem; color: #9fb0cc; }
body.staffdark .au-lp-empty i { font-size: 2.6rem; opacity: .4; display: block; margin-bottom: .8rem; }
body.staffdark .au-lp-empty h3 { margin: 0 0 .5rem; color: #e6edf6; }
/* Inbound webhook collapsible section */
body.staffdark .au-lp-webhook-wrap { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
body.staffdark .au-lp-webhook-toggle { width: 100%; display: flex; align-items: center; gap: .55rem; padding: .75rem 1rem; background: rgba(255,255,255,.02); color: #9fb0cc; font-size: .88rem; font-family: inherit; border: 0; cursor: pointer; text-align: left; }
body.staffdark .au-lp-webhook-toggle:hover { background: rgba(255,255,255,.04); color: #e6edf6; }
body.staffdark .au-lp-webhook-toggle i:first-child { color: #6ea8ff; }
body.staffdark .au-lp-chevron { margin-left: auto; transition: transform .2s; font-size: .75rem; }
body.staffdark .au-lp-chevron.au-chevron-open { transform: rotate(180deg); }
body.staffdark .au-lp-webhook-body { border-top: 1px solid rgba(255,255,255,.08); }
body.staffdark .au-lp-webhook-inner { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
body.staffdark .au-list { padding-bottom: 3rem; }
body.staffdark .au-loading { padding: 2rem; color: #9fb0cc; }
body.staffdark .au-muted { color: #9fb0cc; }
body.staffdark .au-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
body.staffdark .au-head h2 { margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
body.staffdark .au-head p { margin: 0; }
body.staffdark .au-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
body.staffdark .au-table th { text-align: left; padding: .7rem .8rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #9fb0cc; background: rgba(255,255,255,.03); }
body.staffdark .au-table td { padding: .65rem .8rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .9rem; vertical-align: middle; }
body.staffdark .au-actions-cell { display: flex; gap: .35rem; justify-content: flex-end; }
body.staffdark .au-empty { text-align: center; padding: 3rem 1rem; color: #9fb0cc; }
body.staffdark .au-empty i { font-size: 2.4rem; opacity: .5; display: block; margin-bottom: .6rem; }
body.staffdark .au-inbound { margin-top: 1.8rem; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1rem 1.1rem; }
body.staffdark .au-inbound h3 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
body.staffdark .au-inbound-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
body.staffdark .au-input { background: #0b1120; color: #e6edf6; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: .5rem .6rem; font-family: inherit; font-size: .9rem; width: 100%; }
body.staffdark textarea.au-input { resize: vertical; }
body.staffdark .au-inbound-row .au-input { flex: 1; min-width: 220px; }
body.staffdark .au-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: #cfe; white-space: nowrap; }
body.staffdark .au-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
body.staffdark .au-switch input { opacity: 0; width: 0; height: 0; }
body.staffdark .au-switch span { position: absolute; inset: 0; background: rgba(255,255,255,.18); border-radius: 999px; cursor: pointer; transition: .2s; }
body.staffdark .au-switch span:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
body.staffdark .au-switch input:checked + span { background: #22c55e; }
body.staffdark .au-switch input:checked + span:before { transform: translateX(18px); }
body.staffdark .au-switch.big { width: 46px; height: 25px; }
body.staffdark .au-switch.big span:before { width: 19px; height: 19px; }
body.staffdark .au-switch.big input:checked + span:before { transform: translateX(21px); }

/* ── Builder page (full-screen, no sidebar) ── */
body.staffdark .au-builder-page { display: flex; flex-direction: column; height: calc(100vh - 68px); min-height: 520px; }
body.staffdark .au-topbar { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: rgba(10,17,34,.92); border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; flex-shrink: 0; backdrop-filter: blur(4px); }
body.staffdark .au-back-btn { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #9fb0cc; font-size: .84rem; font-family: inherit; padding: .38rem .75rem; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
body.staffdark .au-back-btn:hover { background: rgba(255,255,255,.11); color: #e6edf6; }
body.staffdark .au-topbar-sep { width: 1px; height: 20px; background: rgba(255,255,255,.1); }
body.staffdark .au-name { background: transparent; color: #e6edf6; border: 1px solid transparent; border-radius: 8px; padding: .38rem .6rem; font-size: .97rem; font-weight: 600; font-family: inherit; min-width: 180px; max-width: 280px; transition: border-color .15s, background .15s; }
body.staffdark .au-name:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
body.staffdark .au-name:focus { outline: none; border-color: #6ea8ff; background: rgba(11,17,32,.8); }
body.staffdark .au-tb-name { font-size: .97rem; font-weight: 600; color: #e6edf6; }
body.staffdark .au-en-badge-wrap { display: flex; align-items: center; }
body.staffdark .au-en-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .22rem .65rem; border-radius: 999px; white-space: nowrap; }
body.staffdark .au-en-badge.on { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.35); color: #86efac; }
body.staffdark .au-en-badge.off { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #9fb0cc; }
body.staffdark .au-tb-switch { margin-left: -.1rem; }
body.staffdark .au-spacer { flex: 1; }
body.staffdark .au-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: #9fb0cc; white-space: nowrap; }
/* builder body: canvas + step panel side by side */
body.staffdark .au-builder-body { flex: 1; display: flex; position: relative; min-height: 0; overflow: hidden; }
body.staffdark .au-canvas { position: relative; flex: 1; overflow: hidden; background: #070d1a; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; cursor: grab; }
body.staffdark .au-canvas:active { cursor: grabbing; }
body.staffdark .au-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: 1px; height: 1px; }
body.staffdark .au-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
body.staffdark .au-edges path { pointer-events: stroke; }
body.staffdark .au-edge { fill: none; stroke: #4f6b9a; stroke-width: 2.5; cursor: pointer; }
body.staffdark .au-edge:hover { stroke: #ef4444; }
body.staffdark .au-edge.yes { stroke: #22c55e; }
body.staffdark .au-edge.no { stroke: #f59e0b; }
body.staffdark .au-edge.temp { stroke: #8fb3ff; stroke-dasharray: 6 5; pointer-events: none; }
/* ── GHL-style node cards ── */
body.staffdark .au-node { position: absolute; background: #141e36; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.5); user-select: none; overflow: visible; }
body.staffdark .au-node.sel { border-color: #6ea8ff; box-shadow: 0 0 0 2px rgba(110,168,255,.45), 0 8px 28px rgba(0,0,0,.55); }
body.staffdark .au-node-trigger { border-color: rgba(139,92,246,.45); }
body.staffdark .au-node-action { border-color: rgba(59,130,246,.35); }
body.staffdark .au-node-branch { border-color: rgba(245,158,11,.4); }
/* left accent bar */
body.staffdark .au-node-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 14px 0 0 14px; }
body.staffdark .au-accent-trigger { background: #8b5cf6; }
body.staffdark .au-accent-action { background: #3b82f6; }
body.staffdark .au-accent-branch { background: #f59e0b; }
body.staffdark .au-accent-sys { background: rgba(139,163,247,.4); }
/* node inner layout */
body.staffdark .au-node-inner { display: flex; align-items: center; gap: .65rem; padding: .7rem .7rem .7rem 1rem; cursor: grab; min-height: 56px; }
body.staffdark .au-node-icon-wrap { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.staffdark .au-node-icon-wrap.au-accent-trigger { background: rgba(139,92,246,.22); color: #c4b5fd; }
body.staffdark .au-node-icon-wrap.au-accent-action { background: rgba(59,130,246,.2); color: #93c5fd; }
body.staffdark .au-node-icon-wrap.au-accent-branch { background: rgba(245,158,11,.18); color: #fcd34d; }
body.staffdark .au-node-icon-wrap.au-accent-sys { background: rgba(139,163,247,.1); color: #a9c3ff; }
body.staffdark .au-node-content { flex: 1; min-width: 0; }
body.staffdark .au-node-type-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9fb0cc; margin-bottom: .1rem; }
body.staffdark .au-node-title { font-size: .88rem; font-weight: 600; color: #e6edf6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .au-node-sub { font-size: .76rem; color: #7896b8; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .au-node-menu-btn { background: none; border: 0; color: #9fb0cc; font-size: .9rem; cursor: pointer; padding: .2rem; border-radius: 6px; flex-shrink: 0; opacity: 0; transition: opacity .15s, color .15s; }
body.staffdark .au-node:hover .au-node-menu-btn { opacity: 1; }
body.staffdark .au-node-menu-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.1); }
body.staffdark .au-node-lock-icon { color: #fbbf24; font-size: .78rem; flex-shrink: 0; opacity: .7; }
.au-opts-dropdown { position: fixed; z-index: 3000; background: #1e293b; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 4px; min-width: 130px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.au-opts-dropdown button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: 7px 12px; background: none; border: none; color: #e2e8f0; font-size: .85rem; cursor: pointer; border-radius: 5px; text-align: left; white-space: nowrap; }
.au-opts-dropdown button:hover { background: rgba(255,255,255,.08); }
.au-opts-dropdown [data-opts-del] { color: #f87171; }
.au-opts-dropdown [data-opts-del]:hover { background: rgba(248,113,113,.1); }
/* "+" add-below button: appears as a floating circle below the node */
body.staffdark .au-add-below { position: absolute; bottom: -18px; left: calc(50% - 12px); width: 24px; height: 24px; border-radius: 50%; background: #1e3a5f; border: 1.5px solid #6ea8ff; color: #6ea8ff; font-size: .7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 4; opacity: 0; transition: opacity .15s, background .15s, transform .15s; }
body.staffdark .au-node:hover .au-add-below { opacity: 1; }
body.staffdark .au-add-below:hover { background: #6ea8ff; color: #070d1a; transform: scale(1.15); }
/* connection handles */
body.staffdark .au-handle { position: absolute; width: 14px; height: 14px; background: #0b1120; border: 2px solid #6ea8ff; border-radius: 50%; cursor: crosshair; z-index: 2; }
body.staffdark .au-handle-in { top: -8px; left: calc(50% - 7px); border-color: #9fb0cc; }
body.staffdark .au-handle-out { bottom: -8px; left: calc(50% - 7px); }
body.staffdark .au-h-true { left: calc(30% - 7px); border-color: #22c55e; }
body.staffdark .au-h-false { left: calc(70% - 7px); border-color: #f59e0b; }
body.staffdark .au-handle span { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: .62rem; color: #9fb0cc; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
/* Task #989 — multi-branch handles (positioned inline), placeholder trigger, exec-count badge */
body.staffdark .au-h-multi { border-color: #a78bfa; }
body.staffdark .au-node-placeholder { border-style: dashed; border-color: #6ea8ff; }
body.staffdark .au-node-placeholder .au-node-title { color: #6ea8ff; }
body.staffdark .au-node-stat { display: inline-flex; align-items: center; gap: .2rem; margin-left: .4rem; padding: 0 .35rem; border-radius: 8px; background: rgba(110,168,255,.14); color: #6ea8ff; font-size: .64rem; font-weight: 700; }
body.staffdark .au-node-stat.has-fail { background: rgba(239,68,68,.16); color: #f87171; }
/* Task #1264 — misconfigured-step + failure visibility */
body.staffdark .au-node-fails { display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem; padding: 0 .35rem; border-radius: 8px; background: rgba(239,68,68,.16); color: #f87171; font-size: .64rem; font-weight: 700; }
body.staffdark .au-node-cfg-err { display: inline-flex; align-items: center; margin-left: .35rem; color: #fbbf24; font-size: .72rem; }
body.staffdark .au-node-invalid { border-color: rgba(251,191,36,.55); box-shadow: 0 0 0 1px rgba(251,191,36,.25); }
body.staffdark .au-sp-cfg-warn { display: flex; align-items: flex-start; gap: .45rem; margin-bottom: .7rem; padding: .5rem .6rem; border-radius: 8px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); color: #fcd34d; font-size: .8rem; }
body.staffdark .au-sp-cfg-warn i { margin-top: .12rem; }
body.staffdark .au-lp-fail-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(239,68,68,.16); color: #f87171; font-size: .68rem; font-weight: 700; }
body.staffdark .au-run-filter { margin: .4rem 0 .55rem; }
body.staffdark .au-run-filter .au-input { max-width: 180px; }
body.staffdark .au-run-list { max-height: 55vh; overflow-y: auto; }
body.staffdark .au-run-row { padding: .5rem .6rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; margin-bottom: .4rem; cursor: pointer; background: rgba(255,255,255,.03); }
body.staffdark .au-run-row:hover { background: rgba(110,168,255,.08); border-color: rgba(110,168,255,.3); }
body.staffdark .au-run-who { font-size: .84rem; color: #e8eefc; margin-bottom: .15rem; }
body.staffdark .au-run-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .72rem; flex-wrap: wrap; }
body.staffdark .au-run-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .au-run-pill.good { background: rgba(16,185,129,.16); color: #34d399; }
body.staffdark .au-run-pill.bad { background: rgba(239,68,68,.16); color: #f87171; }
body.staffdark .au-run-pill.wait { background: rgba(245,158,11,.16); color: #fbbf24; }
body.staffdark .au-run-detail-head { margin: .3rem 0 .6rem; font-size: .84rem; color: #e8eefc; }
body.staffdark .au-run-trace { max-height: 50vh; overflow-y: auto; }
body.staffdark .au-run-step { display: flex; align-items: flex-start; gap: .5rem; padding: .45rem .55rem; border-radius: 8px; margin-bottom: .35rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); font-size: .8rem; color: #dbe4f5; }
body.staffdark .au-run-step i { margin-top: .15rem; color: #34d399; }
body.staffdark .au-run-step.bad { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }
body.staffdark .au-run-step.bad i { color: #f87171; }
body.staffdark .au-run-step-info { flex: 1 1 auto; min-width: 0; }
body.staffdark .au-run-step-err { color: #fca5a5; font-size: .72rem; margin-top: .15rem; word-break: break-word; }
/* condition-group clause rows */
body.staffdark .au-clause { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .4rem; }
body.staffdark .au-clause .au-input { flex: 1 1 40%; min-width: 90px; }
body.staffdark .au-clause-sep { flex-basis: 100%; font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: #9fb0cc; }
body.staffdark .au-clause-del { flex: 0 0 auto; }
/* Task #1168 — searchable tag picker (add_tag / remove_tag inspector) */
/* Task #1262 — trigger filter chips + status checkbox list */
body.staffdark .au-trig-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
body.staffdark .au-trig-chips:empty { display: none; }
body.staffdark .au-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem; font-size: .78rem; color: #dbe4f5; background: rgba(110,168,255,.14); border: 1px solid rgba(110,168,255,.3); border-radius: 999px; }
body.staffdark .au-chip-x { background: none; border: none; color: #9fb0cc; cursor: pointer; font-size: .85rem; line-height: 1; padding: 0; }
body.staffdark .au-chip-x:hover { color: #ff8a8a; }
body.staffdark .au-trig-checks { display: flex; flex-direction: column; gap: .28rem; max-height: 220px; overflow-y: auto; padding: .45rem .55rem; background: #141b2b; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; }
body.staffdark .au-check-row { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: #dbe4f5; cursor: pointer; }
body.staffdark .au-check-row input { accent-color: #6ea8ff; }
body.staffdark .au-tagpick { position: relative; }
body.staffdark .au-tagpick-menu { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; max-height: 220px; overflow-y: auto; background: #141b2b; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
body.staffdark .au-tagpick-item { padding: .4rem .6rem; font-size: .82rem; color: #dbe4f5; cursor: pointer; }
body.staffdark .au-tagpick-item:hover { background: rgba(110,168,255,.14); }
body.staffdark .au-tagpick-create { color: #6ea8ff; font-weight: 600; border-top: 1px solid rgba(255,255,255,.08); }
body.staffdark .au-tagpick-empty { padding: .45rem .6rem; font-size: .78rem; color: #9fb0cc; }
/* Task #1169 — contact tag chips editor (roster inline / profile card / form-sub modal) */
body.staffdark .tagchips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
body.staffdark .tagchip { display: inline-flex; align-items: center; gap: .25rem; background: rgba(148,163,184,.16); color: #cbd5e1; border-radius: 6px; padding: .12rem .45rem; font-size: .76rem; line-height: 1.3; white-space: nowrap; }
body.staffdark .tagchip-x { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0 .05rem; }
body.staffdark .tagchip-x:hover { color: #f87171; }
body.staffdark .tagchips-add { position: relative; display: inline-block; }
body.staffdark .tagchips-add input { width: 110px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.22); border-radius: 6px; color: #dbe4f5; font-size: .76rem; padding: .14rem .4rem; outline: none; }
body.staffdark .tagchips-add input:focus { border-color: #6ea8ff; border-style: solid; }
body.staffdark .tagchips-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 1300; min-width: 180px; max-height: 220px; overflow-y: auto; background: #141b2b; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
body.staffdark .tagchips-menu[hidden] { display: none; }
body.staffdark .tagchips-item { padding: .4rem .6rem; font-size: .82rem; color: #dbe4f5; cursor: pointer; white-space: nowrap; }
body.staffdark .tagchips-item:hover { background: rgba(110,168,255,.14); }
body.staffdark .tagchips-create { color: #6ea8ff; font-weight: 600; border-top: 1px solid rgba(255,255,255,.08); }
body.staffdark .tagchips-empty { padding: .45rem .6rem; font-size: .78rem; color: #9fb0cc; }
body.staffdark .tagchips-hint { flex-basis: 100%; font-size: 11px; margin-top: 2px; line-height: 1.35; }
body.staffdark .scp-tagrow { margin-top: .45rem; }
/* multi-branch inspector cards */
body.staffdark .au-mbr { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .6rem; margin-bottom: .6rem; background: rgba(255,255,255,.03); }
body.staffdark .au-mbr-head { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
/* flow settings modal */
body.staffdark .au-fs-row { display: flex; gap: .6rem; }
body.staffdark .au-fs-row .au-f { flex: 1; }
body.staffdark .au-fs-days { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: .4rem 0; }
body.staffdark .au-fs-day { font-size: .8rem; }
body.staffdark .au-check { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: #dbe4f5; margin: .3rem 0; }
body.staffdark .au-zoombar { position: absolute; right: 12px; bottom: 12px; display: flex; gap: .35rem; background: rgba(11,17,32,.85); padding: .3rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); z-index: 5; }
body.staffdark .btn.tiny { padding: .3rem .5rem; font-size: .78rem; }
/* queue dept control rows */
body.staffdark .au-queue-dept-row { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
body.staffdark .au-queue-dept-row:last-child { border-bottom: 0; }
body.staffdark .au-queue-dept-row span:first-child { flex: 1; font-weight: 600; }
body.staffdark .au-queue-state { min-width: 54px; text-align: right; }

/* ── Step Configuration Panel (slide-in right drawer) ── */
body.staffdark .au-step-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 340px; background: #0f1729; border-left: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; z-index: 20; transform: translateX(0); transition: transform .22s cubic-bezier(.4,0,.2,1); box-shadow: -8px 0 32px rgba(0,0,0,.45); }
body.staffdark .au-step-panel.au-sp-hidden { transform: translateX(100%); pointer-events: none; }
body.staffdark .au-sp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: #9fb0cc; text-align: center; gap: .6rem; padding: 2rem; }
body.staffdark .au-sp-empty i { font-size: 2rem; opacity: .35; }
body.staffdark .au-sp-empty p { margin: 0; font-size: .88rem; }
body.staffdark .au-sp-header { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
body.staffdark .au-sp-hicon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
body.staffdark .au-sp-hicon.au-accent-trigger { background: rgba(139,92,246,.22); color: #c4b5fd; }
body.staffdark .au-sp-hicon.au-accent-action { background: rgba(59,130,246,.2); color: #93c5fd; }
body.staffdark .au-sp-hicon.au-accent-branch { background: rgba(245,158,11,.18); color: #fcd34d; }
body.staffdark .au-sp-hicon.au-accent-sys { background: rgba(139,163,247,.1); color: #a9c3ff; }
body.staffdark .au-sp-hinfo { flex: 1; min-width: 0; }
body.staffdark .au-sp-htitle { font-weight: 700; font-size: .94rem; color: #e6edf6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staffdark .au-sp-badge { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .12rem .5rem; border-radius: 999px; margin-top: .2rem; }
body.staffdark .au-sp-badge-trigger { background: rgba(139,92,246,.18); color: #c4b5fd; }
body.staffdark .au-sp-badge-action { background: rgba(59,130,246,.16); color: #93c5fd; }
body.staffdark .au-sp-badge-branch { background: rgba(245,158,11,.16); color: #fcd34d; }
body.staffdark .au-sp-badge-sys { background: rgba(139,163,247,.1); color: #a9c3ff; }
body.staffdark .au-sp-close { background: none; border: 0; color: #9fb0cc; font-size: 1rem; cursor: pointer; padding: .3rem; border-radius: 6px; flex-shrink: 0; line-height: 1; }
body.staffdark .au-sp-close:hover { color: #e6edf6; background: rgba(255,255,255,.08); }
body.staffdark .au-sp-body { flex: 1; overflow-y: auto; padding: 1rem; }
body.staffdark .au-sp-body p.au-muted { margin: 0 0 .9rem; }
body.staffdark .au-sp-foot { padding: .8rem 1rem; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
body.staffdark .au-branch-yes { color: #86efac; }
body.staffdark .au-branch-no { color: #fca5a5; }
body.staffdark .au-add-section-label { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9fb0cc; margin: 0 0 .45rem; }
body.staffdark .au-add-sep { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: .8rem 0; }
/* field form */
body.staffdark .au-f { display: block; margin-bottom: .8rem; }
body.staffdark .au-f > span { display: block; font-size: .78rem; color: #9fb0cc; margin-bottom: .3rem; }
body.staffdark .au-hint { font-size: .78rem; margin-top: .8rem; }
body.staffdark .au-hint code, body.staffdark .au-muted code { background: rgba(255,255,255,.08); padding: .05rem .3rem; border-radius: 5px; font-size: .85em; }

/* modal + add menu */
body.staffdark .au-modal-ov, .au-modal-ov { position: fixed; inset: 0; background: rgba(3,7,18,.7); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
body.staffdark .au-modal, .au-modal-ov .au-modal { background: #0f1729; color: #e6edf6; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1.3rem; width: min(560px, 96vw); max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
body.staffdark .au-modal h3 { margin: 0 0 1rem; }
body.staffdark .au-modal-foot { margin-top: 1.1rem; display: flex; justify-content: flex-end; gap: .5rem; }
body.staffdark .au-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
body.staffdark .au-add-item { display: flex; align-items: center; gap: .55rem; padding: .8rem .9rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: #e6edf6; cursor: pointer; font-size: .9rem; font-family: inherit; text-align: left; }
body.staffdark .au-add-item:hover { background: rgba(110,168,255,.14); border-color: #6ea8ff; }
body.staffdark .au-add-item i { color: #8fb3ff; width: 1.2rem; text-align: center; }
body.staffdark .au-logs { display: flex; flex-direction: column; gap: .6rem; }
body.staffdark .au-log-row { border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: .55rem .7rem; }
body.staffdark .au-log-act { display: inline-block; font-size: .78rem; padding: .1rem .45rem; border-radius: 6px; margin: .1rem .15rem 0 0; background: rgba(34,197,94,.16); color: #86efac; }
body.staffdark .au-log-act.bad { background: rgba(239,68,68,.18); color: #fca5a5; }

/* Built-in system flow (locked Call Queue workflows) — full GHL-style read-only nodes */
body.staffdark .au-node-sys { border-color: rgba(139,163,247,.35); background: rgba(15,22,46,.95); }
body.staffdark .au-node-sys .au-node-inner { cursor: default; }
body.staffdark .au-node-sys .au-node-title { color: #a9c3ff; }
body.staffdark .au-node-sys .au-node-sub { color: #7896b8; }
body.staffdark .au-node-sys.au-sys-cond { border-color: rgba(245,158,11,.38); }
body.staffdark .au-node-sys.au-sys-cond .au-accent { background: rgba(245,158,11,.55); }
body.staffdark .au-node-sys.au-sys-cond .au-node-title { color: #fbd38d; }
body.staffdark .au-node-sys.au-sys-end { border-color: rgba(255,255,255,.1); background: rgba(11,17,32,.9); }
body.staffdark .au-node-sys.au-sys-end .au-accent { background: rgba(139,163,247,.3); }
body.staffdark .au-node-sys.au-sys-end .au-node-title { color: #c6d2e4; }
/* Dialpad node detail rows */
body.staffdark .au-dp-rows { display: flex; flex-direction: column; gap: .22rem; margin: .5rem 0; padding: .4rem .5rem; background: rgba(0,0,0,.18); border-radius: 7px; }
body.staffdark .au-dp-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .73rem; min-height: 18px; }
body.staffdark .au-dp-row-lbl { color: #6b82a0; white-space: nowrap; }
body.staffdark .au-dp-row-val { color: #c6d5e8; text-align: right; word-break: break-all; max-width: 120px; }
body.staffdark .au-sys-yn { position: absolute; bottom: -8px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 0 .35rem; border-radius: 6px; background: #0d1526; pointer-events: none; }
body.staffdark .au-sys-yn.yes { left: 22%; color: #86efac; border: 1px solid rgba(34,197,94,.4); }
body.staffdark .au-sys-yn.no { left: 62%; color: #fbd38d; border: 1px solid rgba(245,158,11,.4); }
body.staffdark .au-edge.sys { stroke-dasharray: 7 5; opacity: .85; pointer-events: none; cursor: default; }

@media (max-width: 860px) {
    body.staffdark .au-builder-page { height: auto; min-height: 0; }
    body.staffdark .au-builder-body { min-height: 420px; height: 60vh; }
    body.staffdark .au-step-panel { position: fixed; top: auto; bottom: 0; right: 0; left: 0; width: 100%; height: 55vh; border-left: none; border-top: 1px solid rgba(255,255,255,.1); transform: translateY(0); }
    body.staffdark .au-step-panel.au-sp-hidden { transform: translateY(100%); }
    body.staffdark .au-add-grid { grid-template-columns: 1fr; }
    body.staffdark .au-name { min-width: 120px; max-width: 180px; }
}

/* ── Card grid list page ── */
body.staffdark .au-lp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
body.staffdark .au-lp-card { background: #0f1729; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.1rem 1.2rem 1rem; display: flex; flex-direction: column; gap: .7rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; overflow: hidden; }
body.staffdark .au-lp-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--au-card-accent, #6ea8ff); border-radius: 4px 0 0 4px; }
body.staffdark .au-lp-card:hover { border-color: rgba(110,168,255,.4); box-shadow: 0 4px 20px rgba(0,0,0,.35); }
body.staffdark .au-lp-card-top { display: flex; align-items: center; gap: .7rem; }
body.staffdark .au-lp-card-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
body.staffdark .au-lp-card-name { font-size: .97rem; font-weight: 700; color: #e6edf6; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .au-lp-card-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
body.staffdark .au-lp-card-trig { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: #9fb0cc; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
body.staffdark .au-lp-card-trig i { color: #7896b8; }
body.staffdark .au-lp-status-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
body.staffdark .au-lp-status-pill.au-pill-active { background: rgba(34,197,94,.13); border: 1px solid rgba(34,197,94,.35); color: #86efac; }
body.staffdark .au-lp-status-pill.au-pill-paused { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #9fb0cc; }
body.staffdark .au-lp-status-pill.au-pill-locked { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.28); color: #fcd34d; }
body.staffdark .au-lp-card-foot { display: flex; align-items: center; gap: .5rem; border-top: 1px solid rgba(255,255,255,.06); padding-top: .65rem; margin-top: .1rem; }
body.staffdark .au-lp-card-date { font-size: .78rem; color: #9fb0cc; flex: 1; }
body.staffdark .au-lp-card-actions { display: flex; gap: .3rem; align-items: center; }
body.staffdark .au-lp-card-open-hint { color: var(--au-card-accent, #6ea8ff); font-size: .85rem; opacity: .7; }
body.staffdark .au-lp-card-agent-dial { cursor: pointer; }
body.staffdark .au-lp-empty-below { border-top: 1px solid rgba(255,255,255,.07); margin-top: 1.5rem; padding-top: 1.5rem; text-align: center; color: #9fb0cc; }
body.staffdark .au-lp-empty-below i { font-size: 2rem; opacity: .35; display: block; margin-bottom: .6rem; }
body.staffdark .au-lp-empty-below h3 { margin: 0 0 .4rem; color: #e6edf6; font-size: 1rem; }
body.staffdark .au-lp-empty-below p { margin: 0 0 .8rem; font-size: .88rem; }

/* ── Task #1263 — "Add variable" picker + clipboard chip ── */
body.staffdark .au-f { position: relative; }
body.staffdark .au-var-btn { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; padding: .12rem .5rem; font-size: .68rem; border-radius: 7px; background: rgba(110,168,255,.12); border: 1px solid rgba(110,168,255,.35); color: #6ea8ff; cursor: pointer; transition: background .12s; vertical-align: middle; }
body.staffdark .au-var-btn:hover { background: rgba(110,168,255,.25); }
body.staffdark .au-var-menu { position: absolute; z-index: 30; top: 1.6rem; left: 0; right: 0; max-height: 240px; overflow: auto; background: #0f1729; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.5); padding: .3rem; }
body.staffdark .au-var-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .42rem .55rem; border: 0; background: transparent; color: #e6edf6; font-size: .8rem; border-radius: 8px; cursor: pointer; text-align: left; }
body.staffdark .au-var-item:hover { background: rgba(110,168,255,.12); }
body.staffdark .au-var-item code { font-size: .68rem; color: #8ab4ff; background: rgba(110,168,255,.1); padding: .08rem .35rem; border-radius: 5px; }
body.staffdark .au-clip-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; font-size: .72rem; border-radius: 999px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #4ade80; white-space: nowrap; }
body.staffdark .au-clip-chip[hidden] { display: none; }

/* ── Edge midpoint "+" buttons ── */
body.staffdark .au-edge-plus { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #1e3a5f; border: 1.5px solid #6ea8ff; color: #6ea8ff; font-size: .6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 6; opacity: .55; transition: opacity .18s, background .15s, transform .15s; transform: translate(-50%, -50%); pointer-events: auto; }
body.staffdark .au-edge-plus:hover { opacity: 1; background: #6ea8ff; color: #070d1a; transform: translate(-50%, -50%) scale(1.18); }

/* ── Step picker slide-in drawer (from left) ── */
body.staffdark .au-step-picker { position: absolute; left: 0; top: 0; bottom: 0; width: 320px; background: #0f1729; border-right: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; z-index: 25; transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1); box-shadow: 8px 0 32px rgba(0,0,0,.45); }
body.staffdark .au-step-picker.au-stp-open { transform: translateX(0); }
body.staffdark .au-stp-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
body.staffdark .au-stp-title { font-weight: 700; font-size: .94rem; color: #e6edf6; flex: 1; }
body.staffdark .au-stp-close { background: none; border: 0; color: #9fb0cc; font-size: 1rem; cursor: pointer; padding: .3rem; border-radius: 6px; line-height: 1; }
body.staffdark .au-stp-close:hover { color: #e6edf6; background: rgba(255,255,255,.08); }
body.staffdark .au-stp-search-wrap { padding: .65rem 1rem .4rem; flex-shrink: 0; }
body.staffdark .au-stp-search { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .42rem .7rem; color: #e6edf6; font-family: inherit; font-size: .88rem; }
body.staffdark .au-stp-search:focus { outline: none; border-color: #6ea8ff; }
body.staffdark .au-stp-body { flex: 1; overflow-y: auto; padding: .4rem .9rem 1.2rem; }
body.staffdark .au-stp-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9fb0cc; margin: .85rem 0 .3rem; }
body.staffdark .au-stp-item { display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; border-radius: 10px; cursor: pointer; transition: background .12s; }
body.staffdark .au-stp-item:hover { background: rgba(110,168,255,.1); }
body.staffdark .au-stp-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .78rem; }
body.staffdark .au-stp-item-text { flex: 1; min-width: 0; }
body.staffdark .au-stp-label { font-size: .86rem; color: #e6edf6; font-weight: 600; }
body.staffdark .au-stp-desc { font-size: .73rem; color: #9fb0cc; margin-top: .05rem; }
body.staffdark .au-stp-item[hidden] { display: none; }

/* ── Pause queue right-rail ── */
body.staffdark .au-pause-rail { width: 240px; flex-shrink: 0; background: #0b1120; border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; overflow-y: auto; }
body.staffdark .au-pause-rail-head { padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9fb0cc; display: flex; align-items: center; gap: .5rem; }
body.staffdark .au-pause-rail-body { padding: .6rem .85rem; flex: 1; }
body.staffdark .au-pause-row { display: flex; align-items: center; gap: .5rem; padding: .42rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
body.staffdark .au-pause-row:last-child { border-bottom: 0; }
body.staffdark .au-pause-row-name { flex: 1; font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .au-pause-state { font-size: .74rem; color: #9fb0cc; white-space: nowrap; }

/* ── Dialpad pinned canvas node ── */
body.staffdark .au-dp-node { position: absolute; top: 14px; right: 14px; z-index: 10; background: #0f1729; border: 1px solid rgba(110,168,255,.3); border-radius: 14px; padding: .7rem .9rem; min-width: 200px; max-width: 240px; box-shadow: 0 4px 18px rgba(0,0,0,.5); }
body.staffdark .au-dp-node-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
body.staffdark .au-dp-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(59,130,246,.18); color: #93c5fd; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
body.staffdark .au-dp-title { font-weight: 700; font-size: .82rem; color: #e6edf6; }
body.staffdark .au-dp-sub { font-size: .7rem; color: #9fb0cc; margin-top: .08rem; }
body.staffdark .au-dp-status-row { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #9fb0cc; margin-bottom: .15rem; }
body.staffdark .au-dp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
body.staffdark .au-dp-dot.ok { background: #22c55e; }
body.staffdark .au-dp-dot.err { background: #ef4444; }
body.staffdark .au-dp-dot.unk { background: #9fb0cc; animation: pulse 1.8s infinite; }
body.staffdark .au-dp-node-btn { margin-top: .5rem; width: 100%; padding: .32rem; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #9fb0cc; font-size: .76rem; font-family: inherit; cursor: pointer; }
body.staffdark .au-dp-node-btn:hover { background: rgba(255,255,255,.1); color: #e6edf6; }

/* ── Circular icon badge for node cards ── */
body.staffdark .au-node-icon-wrap { border-radius: 50% !important; width: 36px; height: 36px; }
body.staffdark .au-sp-hicon { border-radius: 50% !important; }

@media (max-width: 860px) {
    body.staffdark .au-step-picker { width: 100%; left: 0; right: 0; top: auto; bottom: 0; height: 65vh; transform: translateY(100%); border-right: none; border-top: 1px solid rgba(255,255,255,.1); }
    body.staffdark .au-step-picker.au-stp-open { transform: translateY(0); }
    body.staffdark .au-pause-rail { width: 100%; max-height: 200px; border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
    body.staffdark .au-lp-card-grid { grid-template-columns: 1fr; }
}

/* ── Incoming WhatsApp call: compact panel DOCKED to the right (no overlay) ──────
   The card reuses the .call-card base, but the container is a right-docked panel —
   NOT a full-screen dimming overlay — that slides in from the edge, so staff can
   keep working while it rings. Scoped under .wacall-dock so it wins over the base
   purple ring. Only staff trigger
   this, so — like .call-overlay — it isn't gated on body.staffdark. */
.wacall-dock { position: fixed; top: 78px; right: 20px; z-index: 4000; animation: wacallSlideIn .4s var(--fluid); }
@keyframes wacallSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.wacall-dock .wacall-card { width: 300px; max-width: calc(100vw - 32px); padding: 1.5rem 1.3rem 1.4rem; border-radius: 18px; background: linear-gradient(160deg,#0b3d2e,#08241b); position: relative; animation: none; box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(37,211,102,.2); }
.wacall-dock .wacall-min { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; color: #cbd5e1; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .7; padding: 0 .2rem; }
.wacall-dock .wacall-min:hover { opacity: 1; }
.wacall-dock .wacall-pulse { width: 64px; height: 64px; margin: .2rem auto .85rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.85rem; color: #fff; background: linear-gradient(135deg,#25d366,#128c7e); box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: waRing 1.2s ease-out infinite; }
.wacall-dock .call-from { font-size: 1.1rem; }
.wacall-dock .wacall-num { color: #a7f3d0; font-size: .85rem; margin-top: .1rem; letter-spacing: .02em; }
.wacall-dock .call-sub { color: #86efac; font-size: .78rem; margin-bottom: 1.1rem; }
.wacall-dock .call-actions { gap: .6rem; }
.wacall-dock .wacall-btn { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 999px; border: 0; cursor: pointer; font-weight: 800; font-size: .85rem; color: #fff; font-family: inherit; }
.wacall-dock .wacall-btn.ans { background: linear-gradient(135deg,#22c55e,#16a34a); }
.wacall-dock .wacall-btn.dec { background: linear-gradient(135deg,#ef4444,#dc2626); }
.wacall-dock .wacall-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
@keyframes waRing { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 100% { box-shadow: 0 0 0 20px rgba(37,211,102,0); } }
@media (max-width: 480px) { .wacall-dock { top: 12px; right: 12px; left: 12px; } .wacall-dock .wacall-card { width: auto; } }

/* Persistent floating "calling" icon — stays on screen the whole time a call rings;
   click re-opens the docked panel. */
.wacall-fab { position: fixed; right: 20px; bottom: 20px; z-index: 3999; width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg,#25d366,#128c7e); box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 0 0 rgba(37,211,102,.6); display: grid; place-items: center; animation: waFabPulse 1.4s ease-out infinite; }
.wacall-fab .wacall-fab-ic { font-size: 1.7rem; display: grid; place-items: center; animation: icbRing 1s ease-in-out infinite; }
.wacall-fab .wacall-fab-badge { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: #ef4444; border: 2px solid #08241b; }
@keyframes waFabPulse { 0% { box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 0 0 rgba(37,211,102,.55); } 100% { box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 0 22px rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) { .wacall-dock, .wacall-dock .wacall-pulse, .wacall-fab, .wacall-fab .wacall-fab-ic { animation: none !important; } }

/* ── Incoming-call popup redesign (Task #899 — owner mock) ───────────────────
   Dark navy "WhatsApp Audio Call" card with live caller CRM info. Rides inside
   the existing .wacall-dock (fixed, high z-index); dragging pins it via
   .wacall-dragged (inline left/top set by JS). Scoped under .wacall-dock .wac2
   so the legacy .wacall-card rules never bleed in. */
.wacall-dock.wacall-dragged { animation: none; }
.wacall-dock .wacall-card.wac2 {
    width: 348px; max-width: calc(100vw - 24px); padding: .8rem .85rem .75rem;
    background: linear-gradient(170deg,#0a1428 0%,#0c1a33 55%,#0a1225 100%);
    border-radius: 20px; text-align: center; color: #e2e8f0;
    box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(56,109,190,.25);
    max-height: calc(100vh - 90px); overflow: auto; overscroll-behavior: contain;
}
.wac2 .wac2-head { display: flex; align-items: center; gap: .5rem; cursor: grab; user-select: none; touch-action: none; }
.wac2 .wac2-head:active { cursor: grabbing; }
.wac2 .wacall-min.wac2-min { position: static; width: 34px; height: 30px; border-radius: 10px; background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.22); color: #cbd5e1; font-size: .85rem; display: grid; place-items: center; flex: 0 0 auto; }
.wac2 .wac2-head-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 800; font-size: .95rem; color: #f1f5f9; }
.wac2 .wac2-wa-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; color: #fff; background: linear-gradient(135deg,#25d366,#128c7e); }
.wac2 .wac2-enc { display: inline-block; font-size: .56rem; line-height: 1.25; color: #86efac; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); border-radius: 10px; padding: .28rem .5rem; text-align: left; }
.wac2 .wac2-enc i { color: #22c55e; margin-right: .2rem; }
.wac2 .wac2-incoming { display: flex; align-items: center; justify-content: center; gap: .4rem; color: #4ade80; font-size: .78rem; font-weight: 700; margin: .45rem 0 .3rem; }
.wac2 .wac2-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: wac2Blink 1.1s ease-in-out infinite; }
@keyframes wac2Blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.wac2 .wac2-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.wac2 .wac2-eq i { width: 3px; border-radius: 2px; background: #4ade80; animation: wac2Eq 1s ease-in-out infinite; }
.wac2 .wac2-eq i:nth-child(1) { height: 6px; } .wac2 .wac2-eq i:nth-child(2) { height: 11px; animation-delay: .15s; }
.wac2 .wac2-eq i:nth-child(3) { height: 8px; animation-delay: .3s; } .wac2 .wac2-eq i:nth-child(4) { height: 12px; animation-delay: .45s; }
@keyframes wac2Eq { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.wac2 .wac2-biz { margin: .15rem 0 .5rem; }
.wac2 .wac2-biz-logo { width: 74px; height: 74px; margin: 0 auto .35rem; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 0 0 10px rgba(59,130,246,.08), 0 0 0 20px rgba(59,130,246,.04); }
.wac2 .wac2-biz-logo img { width: 84%; height: 84%; object-fit: contain; }
.wac2 .wac2-biz-name { font-weight: 900; font-size: 1.12rem; color: #f8fafc; }
.wac2 .wac2-verified { color: #f59e0b; font-size: .85rem; }
.wac2 .wac2-biz-sub { color: #94a3b8; font-size: .78rem; margin-top: .1rem; }
.wac2 .wac2-caller { display: flex; align-items: flex-start; gap: .7rem; text-align: left; background: rgba(30,58,110,.22); border: 1px solid rgba(96,140,220,.2); border-radius: 14px; padding: .65rem .7rem; position: relative; }
.wac2 .wac2-ava { position: relative; flex: 0 0 auto; }
.wac2 .wac2-ava-in { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#1d4ed8,#3b82f6); box-shadow: 0 0 0 2px rgba(96,165,250,.6); }
.wac2 .wac2-ava-in img { width: 100%; height: 100%; object-fit: cover; }
.wac2 .wac2-ava-init { font-weight: 900; font-size: 1.25rem; color: #fff; }
.wac2 .wac2-ava-badge { position: absolute; right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; color: #fff; background: #22c55e; border: 2px solid #0c1a33; }
.wac2 .wac2-caller-txt { flex: 1; min-width: 0; }
.wac2 .wac2-name { font-weight: 900; font-size: 1.05rem; color: #f8fafc; }
.wac2 .wac2-standing { margin-top: .15rem; }
.wac2 .wac2-pill { display: inline-block; font-size: .62rem; font-weight: 800; padding: .14rem .5rem; border-radius: 999px; border: 1px solid transparent; letter-spacing: .02em; }
.wac2 .wac2-pill-active, .wac2 .wac2-pill-free { background: rgba(34,197,94,.14); color: #4ade80; border-color: rgba(34,197,94,.4); }
.wac2 .wac2-pill-due { background: rgba(245,158,11,.14); color: #fbbf24; border-color: rgba(245,158,11,.4); }
.wac2 .wac2-pill-overdue, .wac2 .wac2-pill-churned, .wac2 .wac2-pill-cancelled, .wac2 .wac2-pill-refund { background: rgba(239,68,68,.14); color: #f87171; border-color: rgba(239,68,68,.4); }
.wac2 .wac2-pill-paused { background: rgba(56,189,248,.14); color: #7dd3fc; border-color: rgba(56,189,248,.4); }
.wac2 .wac2-pill-new, .wac2 .wac2-pill-inactive, .wac2 .wac2-pill-custom { background: rgba(148,163,184,.14); color: #cbd5e1; border-color: rgba(148,163,184,.35); }
.wac2 .wac2-num { font-weight: 800; font-size: .95rem; color: #f1f5f9; margin-top: .3rem; letter-spacing: .02em; }
.wac2 .wac2-kind { color: #86efac; font-size: .72rem; margin-top: .15rem; }
.wac2 .wac2-kind i { margin-right: .2rem; }
.wac2 .wac2-country { position: absolute; top: .6rem; right: .65rem; font-size: .68rem; font-weight: 700; color: #e2e8f0; background: rgba(15,30,60,.75); border: 1px solid rgba(148,163,184,.28); border-radius: 999px; padding: .22rem .55rem; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.wac2 .wac2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-top: .5rem; }
.wac2 .wac2-stat { display: flex; flex-direction: column; align-items: center; gap: .18rem; padding: .45rem .15rem; border-right: 1px solid rgba(96,140,220,.16); }
.wac2 .wac2-stat:last-child { border-right: 0; }
.wac2 .wac2-stat i { color: #60a5fa; font-size: .95rem; }
.wac2 .wac2-stat i.wac2-green { color: #4ade80; }
.wac2 .wac2-stat-lbl { color: #94a3b8; font-size: .6rem; }
.wac2 .wac2-stat-val { color: #f1f5f9; font-size: .68rem; font-weight: 800; line-height: 1.25; }
.wac2 .wac2-dim { color: #64748b; font-weight: 600; }
.wac2 .wac2-last { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; padding: .5rem .65rem; border-radius: 12px; background: rgba(30,58,110,.18); border: 1px solid rgba(96,140,220,.16); font-size: .72rem; }
.wac2 .wac2-last-lbl { color: #94a3b8; font-weight: 700; }
.wac2 .wac2-last-lbl i { margin-right: .3rem; color: #60a5fa; }
.wac2 .wac2-last-val { color: #e2e8f0; font-weight: 700; }
.wac2 .wac2-quick { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .45rem; }
.wac2 .wac2-quick-btn { display: flex; align-items: center; gap: .55rem; text-align: left; padding: .55rem .65rem; border-radius: 12px; background: rgba(30,58,110,.18); border: 1px solid rgba(96,140,220,.2); color: #e2e8f0; cursor: pointer; font-family: inherit; }
.wac2 .wac2-quick-btn:hover { background: rgba(43,78,140,.3); }
.wac2 .wac2-quick-btn:disabled { opacity: .55; cursor: default; }
.wac2 .wac2-quick-btn i { color: #60a5fa; font-size: 1.05rem; }
.wac2 .wac2-quick-btn i.wac2-remind-ic { color: #93c5fd; }
.wac2 .wac2-quick-btn b { display: block; font-size: .78rem; }
.wac2 .wac2-quick-btn small { display: block; color: #94a3b8; font-size: .64rem; }
.wac2 .wac2-answer { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .65rem; }
.wac2 .wac2-act { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.wac2 .wac2-round { width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 1.35rem; display: grid; place-items: center; font-family: inherit; }
.wac2 .wac2-dec { background: radial-gradient(circle at 35% 30%, #f87171, #dc2626); box-shadow: 0 0 0 0 rgba(239,68,68,.5); animation: wac2PulseR 1.3s ease-out infinite; }
.wac2 .wac2-ans { background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a); box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: wac2PulseG 1.3s ease-out infinite; }
.wac2 .wac2-round:hover { filter: brightness(1.08); transform: translateY(-1px); }
@keyframes wac2PulseR { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 100% { box-shadow: 0 0 0 14px rgba(239,68,68,0); } }
@keyframes wac2PulseG { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 100% { box-shadow: 0 0 0 14px rgba(34,197,94,0); } }
.wac2 .wac2-act-lbl b { display: block; font-size: .78rem; color: #f1f5f9; }
.wac2 .wac2-act-lbl small { display: block; color: #94a3b8; font-size: .62rem; }
.wac2 .wac2-chev { display: inline-flex; gap: 2px; font-style: normal; font-size: .8rem; font-weight: 900; align-self: center; margin-bottom: 1.1rem; }
.wac2 .wac2-chev i { font-style: normal; opacity: .25; animation: wac2Chev 1.2s ease-in-out infinite; }
.wac2 .wac2-chev-r { color: #f87171; }
.wac2 .wac2-chev-l { color: #4ade80; }
.wac2 .wac2-chev-r i:nth-child(2), .wac2 .wac2-chev-l i:nth-child(2) { animation-delay: .2s; }
.wac2 .wac2-chev-r i:nth-child(3), .wac2 .wac2-chev-l i:nth-child(3) { animation-delay: .4s; }
@keyframes wac2Chev { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
.wac2 .wac2-lock { margin-top: .6rem; padding: .45rem .6rem; border-radius: 999px; background: rgba(15,30,60,.6); border: 1px solid rgba(148,163,184,.18); color: #94a3b8; font-size: .68rem; }
.wac2 .wac2-lock i { margin-right: .3rem; }
@media (max-width: 480px) { .wacall-dock .wacall-card.wac2 { width: auto; } .wac2 .wac2-stats { grid-template-columns: repeat(2, 1fr); } .wac2 .wac2-stat:nth-child(2n) { border-right: 0; } }
@media (prefers-reduced-motion: reduce) { .wac2 .wac2-dot, .wac2 .wac2-eq i, .wac2 .wac2-dec, .wac2 .wac2-ans, .wac2 .wac2-chev i { animation: none !important; } }

/* ── Incoming Dialpad call notification bar ──────────────────────────────────
   Simple fixed top-right bar — staff answer via the CTI, so we just surface
   caller identity (name + number). Disappears when dp-call-end arrives or the
   5-second active-calls poll returns no ringing Dialpad rows. */
.dp-ring-bar { position: fixed; top: 16px; right: 20px; z-index: 4001; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem .6rem .85rem; border-radius: 10px; background: #1e293b; border: 1px solid #334155; box-shadow: 0 8px 24px rgba(0,0,0,.4); color: #f1f5f9; font-size: .92rem; max-width: 340px; animation: dpRingSlideIn .3s ease; }
@keyframes dpRingSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.dp-ring-icon { font-size: 1.2rem; color: #60a5fa; animation: dpRingPulse 1.1s ease-in-out infinite; flex-shrink: 0; }
@keyframes dpRingPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.dp-ring-body { flex: 1; line-height: 1.35; }
.dp-ring-num { color: #93c5fd; font-size: .83rem; margin-left: .25rem; }
.dp-ring-dismiss { background: transparent; border: 0; color: #94a3b8; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .15rem; flex-shrink: 0; }
.dp-ring-dismiss:hover { color: #f1f5f9; }

/* ── Call Availability pill (Task #614, Task #651, Task #771) ────────────────
   Self-set, informational-only staff status (Available / Break / Lunch / Clocked
   Out). The pill now lives INSIDE the sidebar profile-hero for EVERY staff role
   (cav-side variant), rendered by shell() so it survives view swaps. Scoped under
   body.staffdark so nothing leaks into the student portal. */
body.staffdark .shell { position: relative; }
body.staffdark .cav-btn {
    display: flex; align-items: center; gap: .55rem;
    background: #0f1f33; border: 1px solid rgba(148,163,184,.28); color: #e2e8f0;
    padding: .5rem .95rem; border-radius: 999px;
    font-size: .84rem; font-weight: 600; font-family: inherit; cursor: pointer;
    box-shadow: 0 8px 22px rgba(2,6,23,.38);
    transition: background .15s ease, border-color .15s ease;
}
body.staffdark .cav-btn:hover { background: #152a44; border-color: rgba(148,163,184,.5); }
body.staffdark .cav-btn .fa-phone { color: #38bdf8; font-size: .8rem; }
body.staffdark .cav-caret { font-size: .68rem; opacity: .75; }
/* Status label in the trigger button — colored to match the current status, no dot. */
body.staffdark .cav-btn .cav-lbl-available  { color: #4ade80; }
body.staffdark .cav-btn .cav-lbl-break      { color: #fbbf24; }
body.staffdark .cav-btn .cav-lbl-lunch      { color: #f87171; }
body.staffdark .cav-btn .cav-lbl-clocked_out { color: #94a3b8; }
body.staffdark .cav-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
body.staffdark .cav-dot.cav-available { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
body.staffdark .cav-dot.cav-break { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
body.staffdark .cav-dot.cav-lunch { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
body.staffdark .cav-dot.cav-clocked_out, body.staffdark .cav-dot.cav-offline { background: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.22); }
body.staffdark .cav-menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 195px;
    background: #0e1e33; border: 1px solid rgba(148,163,184,.22); border-radius: 14px;
    padding: .4rem; box-shadow: 0 18px 44px rgba(2,6,23,.55);
}
body.staffdark .cav-menu[hidden] { display: none; }
body.staffdark .cav-opt {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    background: none; border: 0; color: #cbd5e1; padding: .55rem .7rem;
    border-radius: 9px; font-size: .85rem; font-weight: 500; font-family: inherit;
    cursor: pointer; text-align: left;
}
body.staffdark .cav-opt:hover { background: rgba(148,163,184,.13); color: #fff; }
body.staffdark .cav-opt .cav-check { margin-left: auto; opacity: 0; font-size: .72rem; color: #34d399; }
body.staffdark .cav-opt.on { color: #fff; }
body.staffdark .cav-opt.on .cav-check { opacity: 1; }
/* Staff-list availability pill (admin/manager Internal Team view). */
body.staffdark .cav-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: rgba(148,163,184,.12); color: #cbd5e1; white-space: nowrap; }
body.staffdark .cav-pill .cav-dot { width: 7px; height: 7px; box-shadow: none; }
body.staffdark .cav-pill.cav-available { color: #4ade80; background: rgba(34,197,94,.12); }
body.staffdark .cav-pill.cav-break { color: #fbbf24; background: rgba(245,158,11,.12); }
body.staffdark .cav-pill.cav-lunch { color: #f87171; background: rgba(239,68,68,.12); }
body.staffdark .cav-pill.cav-clocked_out, body.staffdark .cav-pill.cav-offline { color: #94a3b8; background: rgba(100,116,139,.14); }
/* ── Sidebar profile-hero variant (Task #651, Task #771) ─────────────────────
   The pill lives IN-FLOW inside the sidebar profile-hero for every staff role.
   Position goes relative (no absolute overlay); the dropdown drops full-width
   below the pill. The sidebar has no overflow clipping (only .sb-nav scrolls)
   in BOTH pinned and drawer modes, so the menu just needs a z-index to layer
   above the nav below it. */
body.staffdark .cav.cav-side {
    position: relative; top: auto; right: auto; z-index: 20;
    width: 100%; margin-top: .35rem;
}
body.staffdark .cav-side .cav-btn {
    width: 100%; justify-content: center;
    padding: .45rem .8rem; font-size: .8rem;
    background: rgba(255,255,255,.06); border-color: rgba(148,163,184,.24);
    box-shadow: none;
}
body.staffdark .cav-side .cav-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(148,163,184,.45); }
body.staffdark .cav-side .cav-menu { left: 0; right: 0; min-width: 0; }

/* ── Dialpad mini dialer (browser-only CTI embed, Task #630 — owner snippet) ── */
#dp-fab { position: fixed; bottom: 22px; right: 22px; z-index: 9999; width: 56px; height: 56px;
    border-radius: 50%; background: #22c55e; color: #fff; font-size: 24px; display: flex;
    align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
#dp-panel { position: fixed; bottom: 88px; right: 22px; z-index: 10000; width: 400px; background: #111827;
    border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.85);
    display: none; flex-direction: column; overflow: hidden; font-family: system-ui, sans-serif; }
#dp-panel.open { display: flex; }
#dp-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08); }
#dp-title { font-weight: 800; color: #f0f6ff; font-size: 15px; }
#dp-status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; }
#dp-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; display: inline-block; }
#dp-dot.on { background: #22c55e; }
#dp-close { background: none; border: none; color: #64748b; cursor: pointer; font-size: 16px; }
#dp-cti-iframe { width: 100%; height: 540px; border: 0; display: block; background: #fff; }
@media (max-width: 768px) { #dp-panel { width: calc(100vw - 24px); right: 12px; } }

/* ── Click-to-call (Dialpad) button — inline across staff CRM surfaces ─────── */
body.staffdark .call-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 2px 8px; margin-left: 8px; vertical-align: middle;
    border: 1px solid rgba(34, 197, 94, .55); border-radius: 6px;
    background: rgba(22, 163, 74, .14); color: #4ade80;
    font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
body.staffdark .call-btn:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
body.staffdark .call-btn:disabled { opacity: .6; cursor: default; }
body.staffdark .call-btn i { font-size: 11px; }
body.staffdark .call-btn-lg { padding: 6px 14px; font-size: 13px; margin-left: 10px; }
body.staffdark .call-btn-dnc { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.10); color: #f87171; opacity: .85; cursor: not-allowed; }
body.staffdark .call-btn-dnc:hover { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.45); color: #f87171; transform: none; }

/* ── Dialpad REST settings section (Task #635) + own-line header chip ───────── */
#dp-line { font-size: .72rem; font-weight: 600; color: #6ee7b7; background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.35); border-radius: 999px; padding: 2px 8px; margin-left: 8px; }
body.staffdark .dp-table-wrap { overflow-x: auto; margin-top: 8px; }
body.staffdark .dp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
body.staffdark .dp-table th, body.staffdark .dp-table td { text-align: left; padding: 8px 10px;
    border-bottom: 1px solid rgba(148,163,184,.15); vertical-align: top; }
body.staffdark .dp-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
body.staffdark .dp-cell-sub { font-size: .72rem; }
body.staffdark .dp-numchip { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.35); color: #93c5fd; margin: 1px 0; }
body.staffdark .dp-numchip i { font-style: normal; color: #94a3b8; font-size: .68rem; }
body.staffdark .dp-pool { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
body.staffdark .dp-assign-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.staffdark .dp-assign-row select { min-width: 130px; max-width: 190px; }
body.staffdark .dp-rest-err { color: #fca5a5; }
/* Lines & Licenses by department (July 2026): per-department seat groups */
body.staffdark .dp-deptgrp { margin-top: 6px; }
body.staffdark .dp-deptgrp-h { display: flex; align-items: center; gap: 8px; font-weight: 700;
    font-size: .85rem; color: #e2e8f0; margin: 12px 0 0; }
/* Amber SETUP notice when no Dialpad API key is connected — visually distinct
   from the mini-dialer Client ID status pills above. */
body.staffdark .dp-keynotice { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px;
    padding: 14px 16px; border: 1px solid rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .08);
    border-radius: 12px; }
body.staffdark .dp-keynotice-ico { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
    background: rgba(245, 158, 11, .18); color: #fbbf24; display: flex; align-items: center;
    justify-content: center; font-size: 1rem; }
body.staffdark .dp-keynotice b { color: #fde68a; }
body.staffdark .dp-keynotice p { margin: 4px 0 0; font-size: .82rem; color: #cbd5e1; }
body.staffdark .dp-keynotice .dp-keynotice-note { color: #94a3b8; font-size: .78rem; }
body.staffdark .dp-keynotice .dp-keynotice-note i { color: #60a5fa; margin-right: 4px; }

/* ── Call Disposition overlay — two-step dark design (Task #871) ─────────────
   under body.staffdark (staff-only surface — never reaches the student portal). */
body.staffdark .cdw-overlay{position:fixed;inset:0;z-index:1300;background:rgba(3,7,17,.86);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:20px 12px;backdrop-filter:blur(3px);}
body.staffdark .cdw-sheet{width:min(540px,100%);background:#0d1526;border:1px solid #1d2a47;border-radius:20px;color:#e7ecf7;box-shadow:0 26px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;}
body.staffdark .cdw-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #16223c;}
body.staffdark .cdw-head-ic{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4f46e5);display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;flex:0 0 auto;}
body.staffdark .cdw-back{width:36px;height:36px;border-radius:50%;background:#141f38;border:1px solid #26355c;color:#9db1d8;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
body.staffdark .cdw-back:hover{border-color:#3b5bb0;color:#fff;}
body.staffdark .cdw-head-t{flex:1;min-width:0;}
body.staffdark .cdw-head-t.center{text-align:center;}
body.staffdark .cdw-head h2{margin:0;font-size:18px;color:#fff;font-weight:700;}
body.staffdark .cdw-head-sub{font-size:12px;color:#8ea2c9;margin-top:2px;}
body.staffdark .cdw-x{background:none;border:0;color:#8ea2c9;font-size:18px;cursor:pointer;padding:6px 8px;border-radius:8px;flex:0 0 auto;}
body.staffdark .cdw-x:hover{color:#fff;background:#16223c;}
body.staffdark .cdw-body{padding:14px 18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:calc(100vh - 180px);}
body.staffdark .cdw-contact{background:#0c1530;border:1px solid #1d2a47;border-radius:13px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
body.staffdark .cdw-cid{display:flex;align-items:center;gap:11px;min-width:180px;}
body.staffdark .cdw-avatar{width:44px;height:44px;border-radius:50%;background:#1d4ed8;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 auto;}
body.staffdark .cdw-cname{font-weight:700;font-size:15px;color:#fff;}
body.staffdark .cdw-cphone{font-size:12.5px;color:#9db1d8;}
body.staffdark .cdw-cust{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:10.5px;font-weight:700;color:#4ade80;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);border-radius:999px;padding:2px 9px;}
body.staffdark .cdw-cstats{display:flex;flex-wrap:wrap;gap:8px 20px;flex:1;justify-content:flex-end;}
body.staffdark .cdw-cstat{display:flex;flex-direction:column;gap:2px;min-width:90px;}
body.staffdark .cdw-cstat span{font-size:10px;color:#7f93bd;text-transform:uppercase;letter-spacing:.4px;}
body.staffdark .cdw-cstat b{font-size:12.5px;color:#dbe6ff;font-weight:600;}
body.staffdark .cdw-cstat b i.fa-arrow-up{color:#60a5fa;}
body.staffdark .cdw-cstat b i.fa-arrow-down{color:#4ade80;}
body.staffdark .cdw-issue{display:block;font-style:normal;font-size:11px;color:#8ea2c9;margin-top:2px;}
body.staffdark .cdw-search{flex-basis:100%;display:flex;flex-direction:column;gap:6px;}
body.staffdark .cdw-search label{font-size:12px;color:#f3b34c;font-weight:600;}
body.staffdark .cdw-search input{background:#0a1122;border:1px solid #26355c;border-radius:9px;color:#e7ecf7;padding:9px 12px;font-size:13px;width:100%;}
body.staffdark .cdw-search-res{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow:auto;}
body.staffdark .cdw-search-hit{display:flex;justify-content:space-between;gap:10px;background:#0e1832;border:1px solid #223058;border-radius:8px;padding:8px 12px;color:#e7ecf7;cursor:pointer;text-align:left;font-size:12.5px;}
body.staffdark .cdw-search-hit:hover{border-color:#3b82f6;background:#12204a;}
body.staffdark .cdw-search-hit span{color:#8ea2c9;font-size:12px;}
body.staffdark .cdw-search-none{color:#8ea2c9;font-size:12px;padding:4px 2px;}
body.staffdark .cdw-steps{display:flex;align-items:center;padding:0 2px;}
body.staffdark .cdw-step-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
body.staffdark .cdw-step-num{width:28px;height:28px;border-radius:50%;background:#1e293b;border:2px solid #334680;color:#7f93bd;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
body.staffdark .cdw-step-item.active .cdw-step-num{background:#6d28d9;border-color:#7c3aed;color:#fff;}
body.staffdark .cdw-step-item.done .cdw-step-num{background:#16a34a;border-color:#22c55e;color:#fff;font-size:10px;}
body.staffdark .cdw-step-lbl{font-size:11px;color:#7f93bd;font-weight:600;}
body.staffdark .cdw-step-item.active .cdw-step-lbl{color:#a78bfa;}
body.staffdark .cdw-step-item.done .cdw-step-lbl{color:#4ade80;}
body.staffdark .cdw-step-line{flex:1;height:2px;background:#223058;margin:0 8px;margin-bottom:14px;}
body.staffdark .cdw-step-line.done{background:#22c55e;}
body.staffdark .cdw-s1-title{font-size:16px;font-weight:700;color:#fff;}
body.staffdark .cdw-s1-sub{font-size:12px;color:#8ea2c9;}
body.staffdark .cdw-options,body.staffdark .cdw-reasons{display:flex;flex-direction:column;gap:8px;}
body.staffdark .cdw-opt-row{display:flex;align-items:center;gap:12px;background:#0e1832;border:1.5px solid #1d2a47;border-radius:13px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s;}
body.staffdark .cdw-opt-row:hover{border-color:#3b5bb0;background:#111f3a;}
body.staffdark .cdw-opt-row.sel{border-color:#7c3aed;background:#130c2a;}
body.staffdark .cdw-opt-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto;}
body.staffdark .cdw-opt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
body.staffdark .cdw-opt-main b{font-size:13.5px;font-weight:700;color:#fff;}
body.staffdark .cdw-opt-main span{font-size:11.5px;color:#8ea2c9;}
body.staffdark .cdw-opt-radio{width:22px;height:22px;border-radius:50%;border:2px solid #334680;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:10px;}
body.staffdark .cdw-opt-row.sel .cdw-opt-radio{border-color:#7c3aed;color:#a78bfa;}
body.staffdark .cdw-opt-row:not(.sel) .cdw-opt-radio{color:transparent;}
body.staffdark .cdw-opt-arr{font-size:12px;color:#334680;flex:0 0 auto;}
body.staffdark .cdw-s1-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0c2118;border:1px solid #1e4d33;border-radius:12px;padding:11px 14px;}
body.staffdark .cdw-s1-banner-main{display:flex;align-items:flex-start;gap:9px;}
body.staffdark .cdw-s1-banner-main>i{color:#4ade80;font-size:16px;margin-top:2px;flex:0 0 auto;}
body.staffdark .cdw-s1-banner-main b{display:block;font-size:12.5px;color:#4ade80;font-weight:700;}
body.staffdark .cdw-s1-banner-main span{font-size:11.5px;color:#6fbf92;}
body.staffdark .cdw-change-btn{flex:none;background:none;border:1px solid #1e4d33;color:#4ade80;border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
body.staffdark .cdw-change-btn:hover{border-color:#22c55e;}
body.staffdark .cdw-reasons-title{font-size:14.5px;font-weight:700;color:#fff;}
body.staffdark .cdw-req{color:#f87171;font-style:normal;}
body.staffdark .cdw-opt{color:#7f93bd;font-style:normal;font-size:12px;font-weight:600;}
body.staffdark .cdw-reasons-sub{font-size:12px;color:#8ea2c9;}
/* Task #910: admin grouped reasons — dept section headers */
body.staffdark .cdw-rgroup{display:flex;flex-direction:column;gap:6px;}
body.staffdark .cdw-rgroup-hd{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7f93bd;padding:8px 0 2px;border-top:1px solid #1d2a47;margin-top:4px;}
body.staffdark .cdw-rgroup:first-child .cdw-rgroup-hd{border-top:none;margin-top:0;padding-top:0;}
body.staffdark .cdw-reasons-grouped{display:flex;flex-direction:column;gap:0;}
body.staffdark .cdw-notes-section{display:flex;flex-direction:column;gap:6px;}
body.staffdark .cdw-notes-title{font-size:14px;font-weight:700;color:#fff;}
body.staffdark .cdw-notes-section textarea{width:100%;min-height:76px;background:#0a1122;border:1px solid #26355c;border-radius:10px;color:#e7ecf7;padding:10px 12px;font-size:13px;resize:vertical;font-family:inherit;}
body.staffdark .cdw-notes-section textarea:focus{outline:none;border-color:#3b82f6;}
body.staffdark .cdw-count{text-align:right;font-size:11px;color:#7f93bd;}
body.staffdark .cdw-sched-block{display:flex;flex-direction:column;gap:6px;}
body.staffdark .cdw-sched-row{display:flex;gap:8px;align-items:center;}
body.staffdark .cdw-sched-input{flex:1;background:#0a1122;border:1px solid #26355c;border-radius:10px;color:#e7ecf7;padding:9px 12px;font-size:13px;font-family:inherit;min-width:0;}
body.staffdark .cdw-sched-input:focus{outline:none;border-color:#fb923c;}
body.staffdark .cdw-sched-tz{font-size:11px;color:#7f93bd;display:flex;align-items:center;gap:5px;}
body.staffdark .cdw-foot-2{display:grid;grid-template-columns:1fr 1.8fr;gap:10px;padding:12px 18px 16px;border-top:1px solid #16223c;}
body.staffdark .cdw-btn{border-radius:11px;padding:11px 16px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;font-family:inherit;}
body.staffdark .cdw-btn:disabled{opacity:.55;cursor:default;}
body.staffdark .cdw-btn-back{background:#0d1834;border-color:#26355c;color:#dbe6ff;}
body.staffdark .cdw-btn-back:hover:not(:disabled){border-color:#3b5bb0;}
body.staffdark .cdw-btn-complete{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;}
body.staffdark .cdw-btn-complete:hover:not(:disabled){filter:brightness(1.08);}
body.staffdark .cdw-foot{display:grid;grid-template-columns:1fr 1.6fr 1.6fr;gap:12px;padding:14px 22px 6px;}
body.staffdark .cdw-btn-main{display:flex;align-items:center;gap:8px;}
body.staffdark .cdw-btn-sub{font-size:10.5px;font-weight:500;opacity:.75;}
body.staffdark .cdw-btn-cancel{background:#0d1834;border-color:#26355c;color:#dbe6ff;justify-content:center;}
body.staffdark .cdw-btn-cancel:hover{border-color:#3b5bb0;}
body.staffdark .cdw-btn-save{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;}
body.staffdark .cdw-btn-save:hover{filter:brightness(1.08);}
body.staffdark .cdw-btn-next{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;}
body.staffdark .cdw-btn-next:hover{filter:brightness(1.08);}
body.staffdark .cdw-footnote{text-align:center;font-size:11.5px;color:#7f93bd;padding:8px 20px 16px;}
body.staffdark .cdw-card{background:#0c1530;border:1px solid #1d2a47;border-radius:13px;padding:13px 16px;}
body.staffdark .cdw-card-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff;}
body.staffdark .cdw-step{width:24px;height:24px;border-radius:50%;background:#1e293b;border:1px solid #334680;color:#9db1d8;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;}
body.staffdark .cdw-card-sub{font-size:12px;color:#8ea2c9;margin:4px 0 10px 32px;}
body.staffdark .cdw-cats{display:flex;flex-direction:column;gap:6px;}
body.staffdark .cdw-cats.cdw-cats-wa{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
body.staffdark .cdw-cat{border-radius:11px;padding:11px;border:1px solid #223058;display:flex;flex-direction:column;gap:6px;background:#0a1329;cursor:pointer;transition:box-shadow .15s,border-color .15s;}
body.staffdark .cdw-cat.sel{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6;}
body.staffdark .cdw-cat-head{display:flex;align-items:flex-start;gap:8px;}
body.staffdark .cdw-cat-head i{font-size:14px;margin-top:2px;}
body.staffdark .cdw-cat-head b{display:block;font-size:13px;}
body.staffdark .cdw-cat-head span{display:block;font-size:10px;color:#7f93bd;margin-top:1px;}
body.staffdark .cdw-subopt{display:flex;align-items:center;gap:8px;background:#0d1834;border:1px solid #223058;border-radius:9px;padding:7px 10px;font-size:12.5px;color:#dbe6ff;cursor:pointer;transition:border-color .12s;}
body.staffdark .cdw-subopt:hover{border-color:#3b5bb0;}
body.staffdark .cdw-subopt input{accent-color:#60a5fa;margin:0;flex:0 0 auto;}
body.staffdark .cdw-subopt:has(input:checked){border-color:#60a5fa;background:#12224a;}
body.staffdark .cdw-assign-row{margin-top:12px;}
body.staffdark .cdw-assign-row.hidden{display:none;}
body.staffdark .cdw-assign-row label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#7f93bd;text-transform:uppercase;letter-spacing:.4px;font-weight:600;max-width:340px;}
body.staffdark .cdw-assign-row select{background:#0a1122;border:1px solid #26355c;border-radius:9px;color:#e7ecf7;padding:8px 11px;font-size:13px;font-family:inherit;}
body.staffdark .cdw-card.hidden{display:none;}
body.staffdark .cdw-wa-card .cdw-card-title .fa-whatsapp{color:#25d366;font-size:15px;}
body.staffdark .cdw-wa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px 10px;margin-top:10px;}
body.staffdark .cdw-wa-grid>div{display:flex;flex-direction:column;gap:3px;background:#0d1834;border:1px solid #223058;border-radius:8px;padding:6px 9px;}
body.staffdark .cdw-wa-grid span{font-size:10px;color:#7f93bd;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
body.staffdark .cdw-wa-grid b{font-size:12px;color:#dbe6ff;font-weight:600;}
body.staffdark .cdw-wa-msg{margin-top:10px;background:#0c2118;border:1px solid #1e4d33;border-radius:8px;padding:7px 9px;}
body.staffdark .cdw-wa-msg span{font-size:10px;color:#6fbf92;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
body.staffdark .cdw-wa-msg p{margin:4px 0 0;font-size:12px;color:#dbe6ff;white-space:pre-wrap;word-break:break-word;max-height:80px;overflow:auto;}
body.staffdark .cdw-wa-dispos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:5px 8px;}
@media (max-width:600px){
  body.staffdark .cdw-cstats{justify-content:flex-start;}
  body.staffdark .cdw-foot-2,body.staffdark .cdw-foot{grid-template-columns:1fr;}
  body.staffdark .cdw-cats.cdw-cats-wa{grid-template-columns:1fr;}
}
/* ── Admin Call Queue dashboard (Task #650, owner dark mockup) ─────────────── */
body.staffdark .cqa-wrap{background:#0b1322;border:1px solid #1c2a44;border-radius:16px;padding:0 0 4px;color:#dbe6f7;overflow:hidden;}
body.staffdark .cqa-head{display:flex;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid #1c2a44;background:#0d1729;flex-wrap:wrap;}
body.staffdark .cqa-head-title{display:flex;align-items:center;gap:12px;min-width:260px;}
body.staffdark .cqa-head-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:18px;}
body.staffdark .cqa-head-title h2{margin:0;font-size:17px;letter-spacing:.04em;color:#f2f6ff;text-transform:uppercase;}
body.staffdark .cqa-sub{font-size:12px;color:#7b8db0;}
body.staffdark .cqa-stats{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap;}
body.staffdark .cqa-stat{background:#111d33;border:1px solid #223353;border-radius:12px;padding:8px 14px;display:flex;flex-direction:column;gap:2px;min-width:96px;}
body.staffdark .cqa-stat-l{font-size:10.5px;color:#7b8db0;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}
body.staffdark .cqa-stat-v{font-size:19px;font-weight:800;}
body.staffdark .cqa-stat-v small{font-size:12px;font-weight:600;color:#7b8db0;}
body.staffdark .cqa-c-blue{color:#60a5fa;} body.staffdark .cqa-c-green{color:#4ade80;}
body.staffdark .cqa-c-purple{color:#c084fc;} body.staffdark .cqa-c-orange{color:#fbbf24;}
body.staffdark .cqa-c-red{color:#f87171;}
body.staffdark .cqa-close{background:#15213a;border:1px solid #26365a;color:#9fb0d0;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:15px;flex:0 0 auto;}
body.staffdark .cqa-close:hover{background:#1d2c4c;color:#fff;}
body.staffdark .cqa-filters{display:flex;gap:12px;align-items:flex-end;padding:14px 20px;border-bottom:1px solid #1c2a44;flex-wrap:wrap;}
body.staffdark .cqa-filters label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#7b8db0;text-transform:none;font-weight:600;}
body.staffdark .cqa-filters select,body.staffdark .cqa-search-in input{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:10px;padding:8px 10px;font-size:12.5px;min-width:150px;}
body.staffdark .cqa-search{flex:1;min-width:220px;}
body.staffdark .cqa-search-in{position:relative;display:block;}
body.staffdark .cqa-search-in i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#5c6f93;font-size:12px;}
body.staffdark .cqa-search-in input{width:100%;padding-left:30px;box-sizing:border-box;}
body.staffdark .cqa-reset{background:#15213a;border:1px solid #26365a;color:#9fb0d0;border-radius:10px;padding:9px 14px;font-size:12.5px;cursor:pointer;font-weight:600;}
body.staffdark .cqa-reset:hover{background:#1d2c4c;color:#fff;}
body.staffdark .cqa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;padding:14px 20px;}
body.staffdark .cqa-card{background:#101a2e;border:1px solid #223353;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--acc);}
body.staffdark .cqa-card-title{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--acc);display:flex;align-items:center;gap:7px;}
body.staffdark .cqa-card-mid{display:flex;gap:12px;align-items:flex-start;}
body.staffdark .cqa-card-total{font-size:26px;font-weight:800;color:#f2f6ff;line-height:1;}
body.staffdark .cqa-card-total-l{font-size:10.5px;color:#7b8db0;margin:2px 0 8px;}
body.staffdark .cqa-donut{width:52px;height:52px;border-radius:50%;position:relative;}
body.staffdark .cqa-donut span{position:absolute;inset:12px;border-radius:50%;background:#101a2e;}
body.staffdark .cqa-card-cats{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
body.staffdark .cqa-cat-row{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:#aebbd6;}
body.staffdark .cqa-cat-row b{color:#f2f6ff;}
body.staffdark .cqa-cat-empty{color:#5c6f93;font-style:italic;}
body.staffdark .cqa-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;}
body.staffdark .cqa-card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1c2a44;padding-top:8px;font-size:11.5px;color:#7b8db0;gap:6px;flex-wrap:wrap;}
body.staffdark .cqa-card-foot b{color:#f2f6ff;}
/* Task #659 — Break/Lunch hold-release grace chip + editor modal */
body.staffdark .cqa-grace{background:#101d36;border:1px solid #24365c;color:#9fb2d6;border-radius:999px;padding:2.5px 9px;font-size:10.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:border-color .15s,color .15s;}
body.staffdark .cqa-grace:hover{border-color:#3d5a94;color:#dbe6ff;}
body.staffdark .cqa-grace i{font-size:10px;color:#60a5fa;}
body.staffdark .cqa-grace-modal{max-width:420px;background:#0d1830;border:1px solid #24365c;color:#dbe6ff;}
body.staffdark .cqa-grace-modal h3{margin:0 0 10px;font-size:16px;color:#f2f6ff;display:flex;align-items:center;gap:8px;}
body.staffdark .cqa-grace-modal h3 i{color:#60a5fa;}
body.staffdark .cqa-grace-sub{font-size:12.5px;line-height:1.55;color:#9fb2d6;margin:0 0 14px;}
body.staffdark .cqa-grace-sub b{color:#f2f6ff;}
body.staffdark .cqa-grace-lab{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#9fb2d6;margin-bottom:16px;}
body.staffdark .cqa-grace-lab input{background:#101d36;border:1px solid #24365c;color:#f2f6ff;border-radius:8px;padding:8px 10px;font-size:14px;width:140px;}
body.staffdark .cqa-grace-btns{display:flex;justify-content:flex-end;gap:8px;}
/* ── Task #734: Follow-Up Ladder tab modal (.cqal-*) ─────────────────────── */
body.staffdark .cqal-modal{max-width:820px;width:95vw;background:#0d1830;border:1px solid #24365c;color:#dbe6ff;padding:0;display:flex;flex-direction:column;max-height:88vh;}
body.staffdark .cqal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid #1a2a48;}
body.staffdark .cqal-head h3{margin:0 0 3px;font-size:17px;color:#f2f6ff;display:flex;align-items:center;gap:8px;}
body.staffdark .cqal-dept-sub{font-size:12px;color:#7a96be;}
body.staffdark .cqal-body{display:grid;grid-template-columns:1fr 280px;gap:0;overflow:auto;flex:1;}
@media(max-width:700px){body.staffdark .cqal-body{grid-template-columns:1fr;}}
body.staffdark .cqal-col-stages{padding:16px 18px;border-right:1px solid #1a2a48;}
body.staffdark .cqal-col-outcomes{padding:16px 16px;background:#0a1526;}
body.staffdark .cqal-col-title{font-size:11px;font-weight:700;letter-spacing:.06em;color:#5a7aa0;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
body.staffdark .cqal-window-note{font-size:11.5px;color:#7a96be;background:#0f1e38;border:1px solid #1a2d50;border-radius:8px;padding:7px 10px;margin-bottom:12px;display:flex;align-items:flex-start;gap:7px;line-height:1.45;}
body.staffdark .cqal-window-note b{color:#dbe6ff;}
body.staffdark .cqal-stage{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:flex-start;}
body.staffdark .cqal-stage-react{border:1px solid #3b2a60;border-radius:10px;padding:8px;background:#130e24;}
body.staffdark .cqal-step{width:26px;height:26px;border-radius:50%;background:#1a2e52;color:#60a5fa;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;}
body.staffdark .cqal-stage-body{padding-bottom:2px;}
body.staffdark .cqal-stage-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:3px;}
body.staffdark .cqal-stage-lbl{font-size:13px;font-weight:600;color:#dbe6ff;}
body.staffdark .cqal-day-pill{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;}
body.staffdark .cqal-timing{font-size:11.5px;color:#7a96be;margin-bottom:4px;display:flex;align-items:center;gap:5px;}
body.staffdark .cqal-cat{margin-bottom:2px;}
body.staffdark .cqal-connector{text-align:center;color:#2a3d5e;font-size:11px;padding:2px 0 2px 13px;}
body.staffdark .cqal-churn-note{margin-top:12px;font-size:11.5px;color:#f59e0b;background:#1a120a;border:1px solid #3a2000;border-radius:8px;padding:8px 10px;display:flex;align-items:flex-start;gap:7px;line-height:1.45;}
body.staffdark .cqal-outcome{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #111e35;}
body.staffdark .cqal-outcome:last-of-type{border-bottom:none;}
body.staffdark .cqal-outcome>i{font-size:15px;margin-top:2px;flex:0 0 auto;}
body.staffdark .cqal-outcome-lbl{font-size:12.5px;font-weight:600;color:#dbe6ff;line-height:1.35;}
body.staffdark .cqal-outcome-desc{font-size:11px;color:#7a96be;margin-top:2px;line-height:1.4;}
body.staffdark .cqal-lock-note{margin-top:14px;font-size:11px;color:#7a96be;background:#0f1e38;border:1px solid #1a2d50;border-radius:8px;padding:8px 10px;line-height:1.5;}
body.staffdark .cqal-lock-note b{color:#dbe6ff;}
body.staffdark .cqa-avail-mini{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.3);border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700;}
body.staffdark .cqa-avail-mini.zero{background:rgba(148,163,184,.1);color:#94a3b8;border-color:rgba(148,163,184,.25);}
body.staffdark .cqa-table-scroll{overflow-x:auto;padding:0 8px;}
body.staffdark .cqa-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1180px;}
body.staffdark .cqa-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#7b8db0;text-align:left;padding:9px 10px;border-bottom:1px solid #1c2a44;white-space:nowrap;}
body.staffdark .cqa-table td{padding:9px 10px;border-bottom:1px solid #16223a;vertical-align:middle;color:#cdd9ef;}
body.staffdark .cqa-table tbody tr:hover td{background:#101c33;}
body.staffdark .cqa-num{color:#7b8db0;font-variant-numeric:tabular-nums;}
body.staffdark .cqa-stu{display:flex;align-items:center;gap:9px;min-width:150px;}
body.staffdark .cqa-ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:0 0 auto;}
body.staffdark .cqa-name{font-weight:700;color:#f2f6ff;white-space:nowrap;}
body.staffdark .cqa-phone{font-size:11px;color:#7b8db0;white-space:nowrap;}
body.staffdark .cqa-dept-pill{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap;}
body.staffdark .cqa-agent-n{font-weight:600;color:#e6edfb;white-space:nowrap;}
body.staffdark .cqa-avail{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;margin-top:2px;}
body.staffdark .cqa-avail-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
body.staffdark .cqa-avail-ok{color:#4ade80;} body.staffdark .cqa-avail-busy{color:#c084fc;}
body.staffdark .cqa-avail-warn{color:#fbbf24;} body.staffdark .cqa-avail-off{color:#94a3b8;}
body.staffdark .cqa-cat-pill{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap;}
body.staffdark .cqa-pri{font-weight:700;font-size:11.5px;white-space:nowrap;}
body.staffdark .cqa-pri i{font-size:10px;}
body.staffdark .cqa-pri-high{color:#f87171;} body.staffdark .cqa-pri-med{color:#fbbf24;}
body.staffdark .cqa-reason{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.staffdark .cqa-when{white-space:nowrap;color:#9fb0d0;}
body.staffdark .cqa-when.cqa-c-orange{color:#fbbf24;font-weight:600;}
body.staffdark .cqa-status{border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap;}
body.staffdark .cqa-st-queued{background:rgba(96,165,250,.13);color:#60a5fa;border:1px solid rgba(96,165,250,.32);}
body.staffdark .cqa-st-assigned{background:rgba(192,132,252,.13);color:#c084fc;border:1px solid rgba(192,132,252,.32);}
body.staffdark .cqa-st-completed{background:rgba(74,222,128,.13);color:#4ade80;border:1px solid rgba(74,222,128,.32);}
body.staffdark .cqa-st-removed{background:rgba(148,163,184,.12);color:#94a3b8;border:1px solid rgba(148,163,184,.3);}
body.staffdark .cqa-actions{white-space:nowrap;}
body.staffdark .cqa-act{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #26365a;background:#15213a;color:#9fb0d0;cursor:pointer;font-size:12px;margin-right:5px;text-decoration:none;}
body.staffdark .cqa-act-call{color:#4ade80;border-color:rgba(74,222,128,.35);}
body.staffdark .cqa-act:hover{background:#1d2c4c;color:#fff;}
body.staffdark .cqa-empty{padding:44px 20px;text-align:center;color:#5c6f93;font-size:13.5px;display:flex;flex-direction:column;gap:10px;align-items:center;}
body.staffdark .cqa-empty i{font-size:26px;opacity:.6;}
body.staffdark .cqa-empty-cards{grid-column:1/-1;padding:22px;}
body.staffdark .cqa-foot{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid #1c2a44;flex-wrap:wrap;}
body.staffdark .cqa-foot-left{display:flex;align-items:center;gap:12px;font-size:12px;color:#9fb0d0;}
body.staffdark .cqa-foot-left label{display:flex;align-items:center;gap:8px;font-size:12px;color:#7b8db0;white-space:nowrap;}
body.staffdark .cqa-foot-left select{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:8px;padding:5px 8px;font-size:12px;}
body.staffdark .cqa-muted{color:#5c6f93;font-size:11.5px;}
body.staffdark .cqa-pgwrap{display:flex;gap:5px;align-items:center;margin:0 auto;}
body.staffdark .cqa-pg{min-width:30px;height:30px;border-radius:8px;border:1px solid #223353;background:#111d33;color:#9fb0d0;cursor:pointer;font-size:12px;padding:0 7px;}
body.staffdark .cqa-pg.cur{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:700;}
body.staffdark .cqa-pg:disabled{opacity:.35;cursor:default;}
body.staffdark .cqa-pg:not(:disabled):not(.cur):hover{background:#1d2c4c;color:#fff;}
body.staffdark .cqa-pg-ell{color:#5c6f93;padding:0 3px;}
body.staffdark .cqa-foot-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
body.staffdark .cqa-toggle-l{display:flex;align-items:center;gap:9px;font-size:12px;color:#9fb0d0;cursor:pointer;}
body.staffdark .cqa-toggle{width:52px;height:24px;border-radius:999px;background:#223353;position:relative;display:inline-block;transition:background .15s;cursor:pointer;}
body.staffdark .cqa-toggle .cqa-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;font-size:0;display:grid;place-items:center;color:#065f46;font-weight:800;}
body.staffdark .cqa-toggle.on{background:#16a34a;}
body.staffdark .cqa-toggle.on .cqa-knob{left:30px;font-size:7.5px;}
body.staffdark .cqa-export{background:#15213a;border:1px solid #26365a;color:#dbe6f7;border-radius:10px;padding:9px 15px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
body.staffdark .cqa-export:hover{background:#1d2c4c;}
body.staffdark .cqa-tznote{text-align:center;font-size:11px;color:#5c6f93;padding:8px 0 10px;}
body.staffdark .cqa-info-modal{background:#0f1a2f;color:#dbe6f7;border:1px solid #223353;max-width:520px;}
body.staffdark .cqa-info-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #1c2a44;}
body.staffdark .cqa-info-head h3{margin:0;font-size:15px;color:#f2f6ff;display:flex;gap:9px;align-items:center;}
body.staffdark .cqa-info-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px;}
body.staffdark .cqa-inforow{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:#7b8db0;}
body.staffdark .cqa-inforow b{color:#e6edfb;text-align:right;font-weight:600;}
body.staffdark .cqa-info-audit{border-top:1px solid #1c2a44;margin-top:8px;padding-top:10px;}
body.staffdark .cqa-info-audit-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7b8db0;margin-bottom:7px;}
body.staffdark .cqa-auditrow{display:flex;gap:10px;font-size:11.5px;color:#aebbd6;padding:3px 0;}
body.staffdark .cqa-auditrow span{color:#5c6f93;white-space:nowrap;flex:0 0 auto;}
@media (max-width:900px){
  body.staffdark .cqa-stats{margin-left:0;width:100%;}
  body.staffdark .cqa-foot-right{margin-left:0;}
}

/* ── Task #741: Calls Priority Setup & Call Back Setup screens (.cqs-* / .cbc-*) ── */
body.staffdark .cqs-wrap,.cbc-wrap{max-width:1050px;margin:0 auto;padding:20px 24px 40px;}
body.staffdark .cqs-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:13px;color:#7b8db0;}
body.staffdark .cqs-back{background:none;border:none;color:#4e8ff8;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:7px;display:flex;align-items:center;gap:6px;}
body.staffdark .cqs-back:hover{background:#1a2d4d;}
body.staffdark .cqs-bc-sep{color:#3c4f6f;}
body.staffdark .cqs-bc-cur{color:#dbe6f7;font-weight:600;}
body.staffdark .cqs-header{margin-bottom:22px;}
body.staffdark .cqs-header h2{font-size:22px;font-weight:700;color:#f2f6ff;margin:0 0 6px;display:flex;align-items:center;gap:10px;}
body.staffdark .cqs-sub{font-size:13px;color:#7b8db0;margin:0;}
body.staffdark .cqs-section{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;margin-bottom:18px;overflow:hidden;}
body.staffdark .cqs-section-head{padding:13px 18px;background:#111f35;border-bottom:1px solid #1c2a44;font-weight:700;font-size:13.5px;color:#dbe6f7;display:flex;align-items:center;gap:8px;}
body.staffdark .cqs-section-body{padding:16px 18px;}
body.staffdark .cqs-hint{font-size:12px;color:#5c6f93;margin:0 0 14px;}
body.staffdark .cqs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
body.staffdark .cqs-label{font-size:13px;color:#9fb0d0;min-width:200px;}
body.staffdark .cqs-input{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:8px;padding:7px 10px;font-size:13px;width:120px;}
body.staffdark .cqs-saved{font-size:12px;padding:3px 0;}
body.staffdark .cqs-saved.ok{color:#34d399;}
body.staffdark .cqs-saved.err{color:#f87171;}
body.staffdark .cqs-setup-btn{background:#1a2d4d!important;color:#a8c0e8!important;}
body.staffdark .cqs-setup-btn:hover{background:#223550!important;}
body.staffdark .cqs-table{width:100%;border-collapse:collapse;font-size:13px;}
body.staffdark .cqs-table thead th{padding:7px 10px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5c6f93;border-bottom:1px solid #1c2a44;}
body.staffdark .cqs-table tbody tr{border-bottom:1px solid #131f30;}
body.staffdark .cqs-table tbody tr:last-child{border-bottom:none;}
body.staffdark .cqs-cat-row td{padding:8px 10px;color:#dbe6f7;}
body.staffdark .cqs-cat-row.cqs-dragging{opacity:.45;background:#0a1120;}
body.staffdark .cqs-drag-handle{cursor:grab;color:#3c4f6f;width:28px;text-align:center;}
body.staffdark .cqs-drag-handle:active{cursor:grabbing;}
body.staffdark .cqs-cat-pos{color:#5c6f93;width:28px;text-align:center;font-weight:700;}
body.staffdark .cqs-cat-name{font-weight:600;color:#dbe6f7;}
body.staffdark .cqs-sla-in{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:4px 8px;font-size:12px;width:68px;}
body.staffdark .cqs-cat-status{font-size:11.5px;font-weight:600;}
body.staffdark .cqs-cat-status.top{color:#fbbf24;}
body.staffdark .cqs-cat-status.hi{color:#60a5fa;}
body.staffdark .cqs-cat-status.lo{color:#5c6f93;}
body.staffdark .cqs-dept-section{margin-bottom:16px;}
body.staffdark .cqs-dept-foot{display:flex;align-items:center;gap:12px;margin-top:14px;}
/* Call Back Setup extra styles */
body.staffdark .cbc-wrap{max-width:1050px;margin:0 auto;padding:20px 24px 40px;}
body.staffdark .cbc-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
body.staffdark .cbc-dept-pick{font-size:13px;color:#7b8db0;display:flex;flex-direction:column;gap:5px;}
body.staffdark .cbc-dept-sel{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:9px;padding:7px 12px;font-size:13px;min-width:200px;}
body.staffdark .cbc-sections{display:flex;flex-direction:column;gap:0;}
body.staffdark .cbc-table{width:100%;border-collapse:collapse;font-size:13px;}
body.staffdark .cbc-table thead th{padding:7px 10px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5c6f93;border-bottom:1px solid #1c2a44;}
body.staffdark .cbc-table tbody tr{border-bottom:1px solid #131f30;}
body.staffdark .cbc-table tbody tr:last-child{border-bottom:none;}
body.staffdark .cbc-step-row td{padding:8px 10px;color:#dbe6f7;vertical-align:middle;}
body.staffdark .cbc-step-num{color:#5c6f93;width:32px;text-align:center;font-weight:700;}
body.staffdark .cbc-inp{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:6px 10px;font-size:13px;}
body.staffdark .cbc-sel{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:6px 8px;font-size:13px;}
body.staffdark .cbc-wait-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
body.staffdark .cbc-wait-num{width:70px;}
body.staffdark .cbc-lock-chk,.cbc-day-chk{accent-color:#3b82f6;}
body.staffdark .cbc-tog-label{display:flex;align-items:center;gap:7px;font-size:13px;color:#9fb0d0;cursor:pointer;}
body.staffdark .cbc-del-btn{background:none;border:none;color:#f87171;cursor:pointer;padding:4px 8px;border-radius:6px;}
body.staffdark .cbc-del-btn:hover{background:#2d1c1c;}
body.staffdark .cbc-del-cell{width:40px;}
body.staffdark .cbc-lock-cell{width:160px;}
body.staffdark .cbc-ladder-foot,.cbc-sect-foot{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
body.staffdark .cbc-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
body.staffdark .cbc-days{display:flex;gap:10px;flex-wrap:wrap;}
body.staffdark .cbc-day-lbl{display:flex;align-items:center;gap:5px;font-size:13px;color:#9fb0d0;cursor:pointer;}
body.staffdark .cbc-avail{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px;}
body.staffdark .cbc-avail-available{background:#0d2e1d;color:#34d399;}
body.staffdark .cbc-avail-on_call{background:#1e1033;color:#a78bfa;}
body.staffdark .cbc-avail-break,.cbc-avail-lunch{background:#2c1c05;color:#fbbf24;}
body.staffdark .cbc-avail-offline,.cbc-avail-clocked_out{background:#1a1a2e;color:#5c6f93;}
body.staffdark .cbc-audit-table .cbc-audit-changes{font-family:monospace;font-size:11px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5c6f93;}
@media (max-width:700px){
  body.staffdark .cqs-wrap,.cbc-wrap{padding:14px 12px 30px;}
  body.staffdark .cbc-head-row{flex-direction:column;}
  body.staffdark .cqs-row,.cbc-row{flex-direction:column;align-items:flex-start;}
  body.staffdark .cqs-label{min-width:unset;}
}

/* ── Task #741: Calls Priority – tab switcher ── */
body.staffdark .cqs-tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid #1c2a44;padding-bottom:0;}
body.staffdark .cqs-tab{background:none;border:none;border-bottom:2px solid transparent;color:#7b8db0;cursor:pointer;font-size:13.5px;font-weight:600;padding:9px 16px;margin-bottom:-1px;border-radius:0;transition:color .15s,border-color .15s;}
body.staffdark .cqs-tab.active{color:#4e8ff8;border-bottom-color:#4e8ff8;}
body.staffdark .cqs-tab:hover{color:#a8c0e8;}
/* ── Volume slider ── */
body.staffdark .cqs-vol-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px;}
body.staffdark .cqs-vol-track{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px;}
body.staffdark .cqs-vol-slider{width:100%;accent-color:#3b82f6;cursor:pointer;height:5px;}
body.staffdark .cqs-vol-scale{display:flex;justify-content:space-between;font-size:10px;color:#5c6f93;}
body.staffdark .cqs-vol-btn{background:#1a2d4d;border:1px solid #223353;color:#a8c0e8;cursor:pointer;border-radius:7px;width:30px;height:30px;display:grid;place-items:center;font-size:13px;flex-shrink:0;}
body.staffdark .cqs-vol-btn:hover{background:#253f63;}
body.staffdark .cqs-vol-chip{background:#1a2d4d;border:1px solid #223353;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;color:#a8c0e8;white-space:nowrap;flex-shrink:0;}
body.staffdark .cqs-vol-info{background:#0d1825;border:1px solid #1c2a44;border-radius:9px;padding:10px 14px;font-size:12px;color:#7b8db0;display:flex;gap:8px;align-items:flex-start;}
body.staffdark .cqs-tog-lbl{display:flex;align-items:center;gap:7px;font-size:13px;color:#9fb0d0;cursor:pointer;}
/* ── Agent Priority tab layout ── */
body.staffdark .cqs-agent-layout{display:grid;grid-template-columns:230px 1fr;gap:16px;min-height:380px;}
body.staffdark .cqs-agent-sidebar{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;}
body.staffdark .cqs-agent-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #1c2a44;}
body.staffdark .cqs-agent-search i{color:#5c6f93;flex-shrink:0;}
body.staffdark .cqs-agent-search input{background:none;border:none;color:#dbe6f7;font-size:13px;flex:1;outline:none;}
body.staffdark #cqsAgList{flex:1;overflow-y:auto;}
body.staffdark .cqs-agent-row{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid #131f30;transition:background .12s;}
body.staffdark .cqs-agent-row:hover{background:#111d33;}
body.staffdark .cqs-agent-row.selected{background:#1a2d4d;}
body.staffdark .cqs-agent-av{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
body.staffdark .cqs-agent-info{flex:1;min-width:0;}
body.staffdark .cqs-agent-info b{display:block;font-size:13px;font-weight:600;color:#dbe6f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.staffdark .cqs-agent-stat{font-size:10.5px;color:#5c6f93;}
body.staffdark .cqs-agent-rank{background:#1a2d4d;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700;color:#7b8db0;flex-shrink:0;}
body.staffdark .cqs-agent-footer{padding:10px 12px;border-top:1px solid #1c2a44;}
body.staffdark .cqs-dept-chg-lbl{font-size:11px;color:#5c6f93;display:flex;flex-direction:column;gap:4px;}
body.staffdark .cqs-agent-main{flex:1;overflow:visible;}
body.staffdark .cqs-agent-header{display:flex;align-items:center;gap:14px;background:#111f35;border:1px solid #1c2a44;border-radius:14px;padding:14px 18px;margin-bottom:14px;}
body.staffdark .cqs-agent-av-lg{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px;flex-shrink:0;}
body.staffdark .cqs-agent-hname{font-size:16px;font-weight:700;color:#f2f6ff;}
body.staffdark .cqs-agent-hmeta{font-size:12px;color:#7b8db0;margin-top:3px;}
body.staffdark .cqs-agent-avpill{padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;}
/* Distribution preview strip */
body.staffdark .cqs-distrib-strip{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
body.staffdark .cqs-distrib-step{display:flex;align-items:center;gap:4px;}
body.staffdark .cqs-distrib-num{width:26px;height:26px;border-radius:50%;background:#1a2d4d;border:1px solid #3b82f6;color:#60a5fa;font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;}
body.staffdark .cqs-distrib-label{font-size:11px;color:#9fb0d0;font-weight:600;}
body.staffdark .cqs-distrib-arrow{color:#3c4f6f;font-size:16px;margin:0 2px;}
@media (max-width:800px){body.staffdark .cqs-agent-layout{grid-template-columns:1fr;}}
/* ── Task #741: Call Back Setup – two-panel layout ── */
body.staffdark .cbc-layout{display:grid;grid-template-columns:220px 1fr;gap:0;min-height:480px;}
body.staffdark .cbc-nav-panel{background:#0d1825;border:1px solid #1c2a44;border-radius:14px 0 0 14px;display:flex;flex-direction:column;padding:14px 0;min-height:480px;}
body.staffdark .cbc-nav-dept-wrap{padding:0 14px 12px;border-bottom:1px solid #1c2a44;margin-bottom:8px;}
body.staffdark .cbc-nav{display:flex;flex-direction:column;gap:2px;padding:0 8px;}
body.staffdark .cbc-nav-link{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:#7b8db0;font-size:13px;cursor:pointer;transition:background .12s,color .12s;}
body.staffdark .cbc-nav-link:hover{background:#111d33;color:#a8c0e8;}
body.staffdark .cbc-nav-link.active{background:#1a2d4d;color:#60a5fa;font-weight:600;}
body.staffdark .cbc-config-source{margin-top:auto;padding:12px 14px;border-top:1px solid #1c2a44;}
body.staffdark .cbc-cs-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#5c6f93;margin-bottom:6px;}
body.staffdark .cbc-cs-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;margin-bottom:5px;}
body.staffdark .cbc-cs-badge.custom{background:#1a3a5c;color:#60a5fa;}
body.staffdark .cbc-cs-badge.default{background:#1a2d1a;color:#34d399;}
body.staffdark .cbc-cs-link{display:block;font-size:11px;color:#4e8ff8;cursor:pointer;margin-top:4px;}
body.staffdark .cbc-main-area{background:#0a1120;border:1px solid #1c2a44;border-left:none;border-radius:0 14px 14px 0;padding:20px 22px;flex:1;}
body.staffdark .cbc-section-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
body.staffdark .cbc-section-title{font-size:18px;font-weight:700;color:#f2f6ff;margin:0;}
body.staffdark .cbc-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* Ladder locked row */
body.staffdark .cbc-step-locked td{background:#0d1825;opacity:.85;}
body.staffdark .cbc-locked-lbl{display:flex;align-items:center;gap:7px;color:#7b8db0;}
body.staffdark .cbc-locked-badge{display:inline-flex;align-items:center;gap:5px;background:#1a2d4d;border:1px solid #223353;border-radius:20px;padding:2px 9px;font-size:11px;color:#7b8db0;font-weight:600;}
body.staffdark .cbc-constraint-notice{background:#0d1a0d;border:1px solid #22543d;border-radius:9px;padding:9px 13px;font-size:12px;color:#34d399;margin-bottom:12px;display:flex;gap:8px;align-items:center;}
body.staffdark .cbs-field-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
body.staffdark .cbc-stepper{display:flex;align-items:center;gap:8px;}
body.staffdark .cbc-audit-changes{font-family:monospace;font-size:11px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5c6f93;}
@media (max-width:760px){
  body.staffdark .cbc-layout{grid-template-columns:1fr;}
  body.staffdark .cbc-nav-panel{border-radius:14px;min-height:unset;}
  body.staffdark .cbc-main-area{border-left:1px solid #1c2a44;border-radius:14px;margin-top:12px;}
}
/* ── Admin "Assign to staff" dialog (inbox header/quick action + lead profile) ── */
.aso .field input[type=text] { width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--border, #e5e7eb); border-radius: 9px; font-size: .92rem; }
.aso-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; margin-top: .6rem; }
.aso-list > :first-child { border-top: 0; }
.aso-group { position: sticky; top: 0; z-index: 1; background: #f8fafc; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; padding: .35rem .75rem; border-top: 1px solid var(--border, #e5e7eb); }
.aso-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; cursor: pointer; border-top: 1px solid #f1f5f9; }
.aso-row:hover { background: #f8fafc; }
.aso-row input { flex: 0 0 auto; }
.aso-row-name { font-weight: 600; font-size: .92rem; }
.aso-row-sub { color: #6b7280; font-size: .8rem; margin-left: auto; text-align: right; }

/* ── Task #749: Calls Priority Setup redesign (.cps-*) ─────────────────────── */
body.staffdark .cps-wrap{max-width:1280px;margin:0 auto;padding:20px 22px 40px;}
body.staffdark .cps-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;color:#7b8db0;}
body.staffdark .cps-back{background:none;border:none;color:#4e8ff8;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:7px;display:flex;align-items:center;gap:6px;}
body.staffdark .cps-back:hover{background:#1a2d4d;}
body.staffdark .cps-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
body.staffdark .cps-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:240px;}
body.staffdark .cps-header-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:19px;flex-shrink:0;}
body.staffdark .cps-header-text h2{margin:0 0 3px;font-size:20px;font-weight:700;color:#f2f6ff;letter-spacing:.02em;}
body.staffdark .cps-header-text p{margin:0;font-size:12.5px;color:#7b8db0;}
body.staffdark .cps-header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
body.staffdark .cps-btn-ghost{background:#151f35;border:1px solid #243555;color:#9fb0d0;padding:8px 14px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;}
body.staffdark .cps-btn-ghost:hover{background:#1d2d4a;color:#dbe6f7;}
body.staffdark .cps-btn-primary{background:#2563eb;border:none;color:#fff;padding:8px 16px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;}
body.staffdark .cps-btn-primary:hover{background:#1d4ed8;}
body.staffdark .cps-btn-primary:disabled{opacity:.55;cursor:default;}
body.staffdark .cps-tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid #1c2a44;}
body.staffdark .cps-tab{background:none;border:none;border-bottom:2px solid transparent;color:#7b8db0;cursor:pointer;font-size:13.5px;font-weight:600;padding:9px 18px;margin-bottom:-1px;transition:color .15s,border-color .15s;}
body.staffdark .cps-tab.active{color:#4e8ff8;border-bottom-color:#4e8ff8;}
body.staffdark .cps-tab:hover:not(.active){color:#a8c0e8;}
/* Three-column layout */
body.staffdark .cps-cols{display:grid;grid-template-columns:210px 1fr 260px;gap:16px;align-items:start;}
/* Left sidebar */
body.staffdark .cps-sidebar{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px;}
body.staffdark .cps-sidebar-card{background:#0d1825;border:1px solid #1c2a44;border-radius:13px;overflow:hidden;}
body.staffdark .cps-sidebar-head{padding:10px 14px;background:#111f35;border-bottom:1px solid #1c2a44;font-size:11.5px;font-weight:700;color:#7b8db0;text-transform:uppercase;letter-spacing:.05em;}
body.staffdark .cps-sidebar-body{padding:12px 14px;}
body.staffdark .cps-dept-sel{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:9px;padding:8px 10px;font-size:13px;width:100%;}
body.staffdark .cps-nav{display:flex;flex-direction:column;gap:1px;}
body.staffdark .cps-nav-link{background:none;border:none;color:#7b8db0;cursor:pointer;font-size:12.5px;font-weight:600;text-align:left;padding:7px 10px;border-radius:8px;display:flex;align-items:center;gap:7px;width:100%;transition:background .12s,color .12s;}
body.staffdark .cps-nav-link:hover,.cps-nav-link.active{background:#1a2d4a;color:#a8c0e8;}
body.staffdark .cps-nav-link.active{color:#60a5fa;}
body.staffdark .cps-impact-count{font-size:22px;font-weight:800;color:#fbbf24;line-height:1;}
body.staffdark .cps-impact-sub{font-size:11.5px;color:#7b8db0;margin-top:3px;}
body.staffdark .cps-impact-warn{font-size:11px;color:#f59e0b;margin-top:7px;background:#1c1500;border:1px solid #3d2c00;border-radius:7px;padding:5px 8px;line-height:1.4;}
/* Center content */
body.staffdark .cps-center{display:flex;flex-direction:column;gap:16px;}
body.staffdark .cps-section{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;overflow:hidden;}
body.staffdark .cps-section-head{padding:12px 18px;background:#111f35;border-bottom:1px solid #1c2a44;font-weight:700;font-size:13.5px;color:#dbe6f7;display:flex;align-items:center;gap:8px;}
body.staffdark .cps-section-body{padding:16px 18px;}
body.staffdark .cps-hint{font-size:12px;color:#5c6f93;margin:0 0 14px;line-height:1.5;}
/* Volume control row */
body.staffdark .cps-vol-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px;}
body.staffdark .cps-vol-track{flex:1;min-width:160px;display:flex;flex-direction:column;gap:4px;}
body.staffdark .cps-vol-slider{width:100%;accent-color:#3b82f6;cursor:pointer;height:5px;}
body.staffdark .cps-vol-scale{display:flex;justify-content:space-between;font-size:10px;color:#5c6f93;}
body.staffdark .cps-vol-num{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:5px 8px;font-size:13px;width:70px;text-align:center;}
body.staffdark .cps-vol-unit{display:flex;gap:0;background:#111d33;border:1px solid #223353;border-radius:8px;overflow:hidden;}
body.staffdark .cps-vol-unit-btn{background:none;border:none;color:#7b8db0;cursor:pointer;padding:5px 10px;font-size:12px;font-weight:600;}
body.staffdark .cps-vol-unit-btn.active{background:#1e3a6e;color:#60a5fa;}
/* Follow-up ladder */
body.staffdark .cps-ladder{width:100%;border-collapse:collapse;font-size:13px;}
body.staffdark .cps-ladder thead th{padding:7px 10px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5c6f93;border-bottom:1px solid #1c2a44;}
body.staffdark .cps-ladder tbody tr{border-bottom:1px solid #131f30;}
body.staffdark .cps-ladder tbody tr:last-child{border-bottom:none;}
body.staffdark .cps-ladder-row td{padding:9px 10px;color:#dbe6f7;vertical-align:middle;}
body.staffdark .cps-ladder-row.locked td{color:#9fb0d0;}
body.staffdark .cps-lock-ico{color:#5c6f93;font-size:11px;margin-left:4px;}
body.staffdark .cps-step-num{color:#5c6f93;width:26px;text-align:center;font-weight:700;}
body.staffdark .cps-step-drag{cursor:grab;color:#3c4f6f;width:24px;text-align:center;}
body.staffdark .cps-step-drag:active{cursor:grabbing;}
body.staffdark .cps-step-name{font-weight:600;}
body.staffdark .cps-step-delay-in{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:4px 8px;font-size:12px;width:62px;}
body.staffdark .cps-step-del{background:none;border:none;color:#f87171;cursor:pointer;padding:4px 8px;border-radius:6px;font-size:13px;}
body.staffdark .cps-step-del:hover{background:#2d1c1c;}
body.staffdark .cps-ladder-add{background:#111d33;border:1px dashed #2b3a55;color:#7b8db0;cursor:pointer;padding:7px 14px;border-radius:9px;font-size:13px;font-weight:600;width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;}
body.staffdark .cps-ladder-add:hover{border-color:#4e8ff8;color:#a8c0e8;background:#141f35;}
/* SLA priority grid */
body.staffdark .cps-sla-table{width:100%;border-collapse:collapse;font-size:13px;}
body.staffdark .cps-sla-table thead th{padding:7px 10px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5c6f93;border-bottom:1px solid #1c2a44;}
body.staffdark .cps-sla-table tbody tr{border-bottom:1px solid #131f30;}
body.staffdark .cps-sla-table tbody tr:last-child{border-bottom:none;}
body.staffdark .cps-sla-row td{padding:9px 10px;color:#dbe6f7;vertical-align:middle;}
body.staffdark .cps-sla-drag{cursor:grab;color:#3c4f6f;width:24px;text-align:center;}
body.staffdark .cps-sla-drag:active{cursor:grabbing;}
body.staffdark .cps-cat-pos{color:#5c6f93;width:28px;text-align:center;font-weight:700;}
body.staffdark .cps-cat-name{font-weight:600;}
body.staffdark .cps-sla-in-wrap{display:flex;align-items:center;gap:5px;}
body.staffdark .cps-sla-in{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:4px 8px;font-size:12px;width:68px;}
body.staffdark .cps-sla-unit{font-size:11.5px;color:#7b8db0;}
body.staffdark .cps-sla-unit-toggle{display:flex;gap:0;background:#111d33;border:1px solid #223353;border-radius:7px;overflow:hidden;margin-left:4px;}
body.staffdark .cps-sla-unit-btn{background:none;border:none;color:#7b8db0;cursor:pointer;padding:3px 8px;font-size:11px;font-weight:600;}
body.staffdark .cps-sla-unit-btn.active{background:#1e3a6e;color:#60a5fa;}
body.staffdark .cps-cat-on-wrap{display:flex;align-items:center;gap:5px;}
body.staffdark .cps-cat-status{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;}
body.staffdark .cps-cat-status.top{background:#1c1500;color:#fbbf24;}
body.staffdark .cps-cat-status.hi{background:#0f1e40;color:#60a5fa;}
body.staffdark .cps-cat-status.lo{background:#0d1625;color:#5c6f93;}
/* Reactivation / Churn settings */
body.staffdark .cps-field-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
body.staffdark .cps-field-label{font-size:13px;color:#9fb0d0;min-width:180px;}
body.staffdark .cps-field-input{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:8px;padding:7px 10px;font-size:13px;width:110px;}
body.staffdark .cps-field-unit{font-size:12px;color:#7b8db0;}
body.staffdark .cps-field-select{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:8px;padding:7px 10px;font-size:13px;}
body.staffdark .cps-toggle-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#9fb0d0;cursor:pointer;}
/* Right rail */
body.staffdark .cps-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:12px;}
body.staffdark .cps-rail-card{background:#0d1825;border:1px solid #1c2a44;border-radius:13px;overflow:hidden;}
body.staffdark .cps-rail-head{padding:11px 14px;background:#111f35;border-bottom:1px solid #1c2a44;font-weight:700;font-size:13px;color:#dbe6f7;display:flex;align-items:center;gap:7px;}
body.staffdark .cps-rail-body{padding:13px 14px;}
body.staffdark .cps-day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:10px;}
body.staffdark .cps-day-lbl{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:#7b8db0;cursor:pointer;}
body.staffdark .cps-day-lbl input{accent-color:#3b82f6;width:14px;height:14px;}
body.staffdark .cps-time-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12.5px;color:#9fb0d0;}
body.staffdark .cps-time-in{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:5px 8px;font-size:12.5px;width:90px;}
body.staffdark .cps-rail-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap;}
body.staffdark .cps-rail-label{font-size:12.5px;color:#9fb0d0;flex:1;}
body.staffdark .cps-rail-input{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:5px 8px;font-size:12.5px;width:68px;}
body.staffdark .cps-rail-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
body.staffdark .cps-rail-tag{background:#111d33;border:1px solid #223353;border-radius:20px;padding:3px 10px;font-size:12px;color:#a8c0e8;display:flex;align-items:center;gap:4px;}
body.staffdark .cps-rail-tag-del{background:none;border:none;color:#f87171;cursor:pointer;padding:0 2px;font-size:11px;line-height:1;}
body.staffdark .cps-rail-tag-add{display:flex;align-items:center;gap:4px;margin-top:4px;}
body.staffdark .cps-rail-tag-in{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:7px;padding:4px 8px;font-size:12px;flex:1;}
body.staffdark .cps-rail-tag-btn{background:#1a2d4d;border:1px solid #223353;color:#a8c0e8;cursor:pointer;border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600;}
/* Save bar */
body.staffdark .cps-save-bar{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 18px;background:#0a1120;border:1px solid #1c2a44;border-radius:12px;}
body.staffdark .cps-saved-msg{font-size:12.5px;}
body.staffdark .cps-saved-msg.ok{color:#34d399;}
body.staffdark .cps-saved-msg.err{color:#f87171;}
/* Agent tab layout */
body.staffdark .cps-agent-layout{display:grid;grid-template-columns:220px 1fr;gap:16px;min-height:380px;}
body.staffdark .cps-agent-sidebar{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;}
body.staffdark .cps-agent-list{overflow-y:auto;flex:1;}
body.staffdark .cps-agent-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #131f30;display:flex;align-items:center;gap:9px;}
body.staffdark .cps-agent-item:last-child{border-bottom:none;}
body.staffdark .cps-agent-item.active{background:#142035;}
body.staffdark .cps-agent-item:hover:not(.active){background:#0f1e32;}
body.staffdark .cps-agent-avail{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
body.staffdark .cps-agent-avail.available{background:#34d399;}
body.staffdark .cps-agent-avail.on_call{background:#c084fc;}
body.staffdark .cps-agent-avail.break,.cps-agent-avail.lunch{background:#fbbf24;}
body.staffdark .cps-agent-avail.offline,.cps-agent-avail.clocked_out{background:#3c4f6f;}
body.staffdark .cps-agent-name{font-size:13px;font-weight:600;color:#dbe6f7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.staffdark .cps-agent-panel{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;overflow:hidden;}
body.staffdark .cps-agent-panel-head{padding:12px 16px;background:#111f35;border-bottom:1px solid #1c2a44;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
body.staffdark .cps-agent-panel-name{font-weight:700;font-size:14px;color:#f2f6ff;}
body.staffdark .cps-agent-tabs{display:flex;gap:4px;}
body.staffdark .cps-agtab{background:none;border:none;color:#7b8db0;cursor:pointer;font-size:12px;font-weight:600;padding:5px 10px;border-radius:7px;}
body.staffdark .cps-agtab.active{background:#1a2d4a;color:#60a5fa;}
body.staffdark .cps-agent-panel-body{padding:14px 16px;}
@media (max-width:1100px){body.staffdark .cps-cols{grid-template-columns:190px 1fr 230px;}}
@media (max-width:900px){body.staffdark .cps-cols{grid-template-columns:1fr;} body.staffdark .cps-sidebar,body.staffdark .cps-rail{position:static;} body.staffdark .cps-agent-layout{grid-template-columns:1fr;}}
@media (max-width:600px){body.staffdark .cps-wrap{padding:12px 10px 30px;} body.staffdark .cps-header{flex-direction:column;} body.staffdark .cps-header-actions{width:100%;justify-content:flex-end;}}

/* ── Task #658: WARNINGS review queue + worker proof preview ─────────────── */
/* Pending-review count badge (Warnings tab + per-employee queue groups). Dark
   text on amber — excluded from the staffdark white-text wildcard above. */
.ah-tab-badge { background: #f59e0b; color: #0f172a; border-radius: 999px; padding: 0 7px; margin-left: 6px; font-size: 11px; font-weight: 800; display: inline-block; min-width: 18px; text-align: center; line-height: 17px; }
/* Explainer line under the queue header. */
.ah-qhint { padding: 10px 14px 12px; font-size: 12.5px; color: #94a3b8; line-height: 1.5; }
.ah-qgroup { margin-top: 12px; }
/* Attached proof on the worker ack screens (detail modal + forced popup). */
.ah-wd-proof { margin-top: 12px; }
.ah-wd-proof-img { max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid rgba(148,163,184,.35); display: block; margin-top: 6px; }
.ah-wd-proof-txt { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; background: rgba(15,23,42,.55); border: 1px solid rgba(148,163,184,.25); border-radius: 8px; padding: 10px; margin: 6px 0 0; font-size: 12px; color: #cbd5e1; }

/* ── Dark "Wise payout account" form (owner mock July 2026, SCOPED to .wpa-modal) ──
   ONE form for every surface: staff profile card, admin Payroll "Edit info" and the
   emailed payout-setup link — dark navy regardless of the page theme. */
.wpa-modal { background: #0A1728; border: 1px solid #223550; max-width: 520px; color: #E2E8F0; }
.wpa-modal .modal-head h3 { color: #fff; }
.wpa-modal .modal-head h3 i { color: #34D399; }
.wpa-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(16,185,129,.16); display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex: none; }
.wpa-sub { color: #8FA3BC; margin: 0 0 16px; line-height: 1.55; font-size: .92rem; }
.wpa-modal .field label, .wpa-modal label { color: #D7E1EE; }
.wpa-opt { color: #64748B; font-weight: 500; }
.wpa-modal input[type="text"], .wpa-modal input[type="email"], .wpa-modal input[type="date"], .wpa-modal select {
    background: #0D1E33; border: 1.5px solid #2A3F5C; color: #EAF1F8; border-radius: 10px;
}
.wpa-modal input::placeholder { color: #5B6E86; }
.wpa-modal input:focus, .wpa-modal select:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.wpa-modal select {
    appearance: none; -webkit-appearance: none; padding-right: 2.3rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: 12px 8px;
}
.wpa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wpa-verified { display: flex; align-items: center; gap: 6px; color: #34D399; font-size: .82rem; font-weight: 600; margin: -.55rem 0 1rem; }
.wpa-verified[hidden] { display: none; }
.wpa-modal .btn-ghost { background: transparent; border: 1.5px solid #2A3F5C; color: #E2E8F0; }
.wpa-modal .btn-ghost:hover { background: rgba(148,163,184,.1); }
.wpa-modal .close-x { color: #7C8FA8; }
.wpa-modal .close-x:hover { color: #fff; }
.wpa-modal .muted { color: #8FA3BC; }
.wpa-modal .login-err { color: #F87171; }
body.staffdark .main .wpa-modal .btn-ghost { background: transparent; border-color: #2A3F5C; color: #E2E8F0; }
@media (max-width: 520px) { .wpa-row { grid-template-columns: 1fr; gap: 0; } }

/* ═══════════════ SMART PDF FORMS & E-SIGNATURE (admin Documents tab) ═══════════════
   Dark DocuSign-style builder per owner mockup: bg #071A2F, panels #102B4C,
   cards #132F53, accent #2563EB. Everything scoped .esg-* under body.staffdark. */
body.staffdark .esg-wrap { background: #071A2F; margin: 0; max-width: none; padding: 1.1rem 1.4rem 2rem; }
body.staffdark .esg-buckets { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
body.staffdark .esg-bucket { display: flex; align-items: center; gap: .5rem; background: #102B4C; border: 1px solid #1D3B63; border-radius: 10px; padding: .55rem .8rem; color: #B9CCE4; font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
body.staffdark .esg-bucket i { color: #5E81AC; font-size: .85rem; }
body.staffdark .esg-bucket b { background: #0B2240; border-radius: 999px; padding: .1rem .5rem; font-size: .75rem; color: #7FA3CC; }
body.staffdark .esg-bucket:hover { border-color: #2563EB; }
body.staffdark .esg-bucket.on { background: #2563EB; border-color: #2563EB; color: #fff; }
body.staffdark .esg-bucket.on i, body.staffdark .esg-bucket.on b { color: #fff; background: rgba(255,255,255,.18); }
body.staffdark .esg-bucket.esg-soon { opacity: .55; cursor: default; }
body.staffdark .esg-toolbar { display: flex; gap: .6rem; align-items: center; margin-bottom: .9rem; flex-wrap: wrap; }
body.staffdark .esg-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: .5rem; background: #102B4C; border: 1px solid #1D3B63; border-radius: 9px; padding: .5rem .75rem; }
body.staffdark .esg-search i { color: #5E81AC; font-size: .82rem; }
body.staffdark .esg-search input { flex: 1; background: none; border: 0; outline: 0; color: #E7EFFA; font-size: .86rem; }
body.staffdark .esg-search input::placeholder { color: #57749B; }
body.staffdark .esg-search-sm { padding: .38rem .6rem; margin: .3rem 0 .45rem; min-width: 0; }
body.staffdark .esg-select, body.staffdark .esg-input { background: #0B2240; border: 1px solid #1D3B63; border-radius: 8px; color: #E7EFFA; padding: .48rem .6rem; font-size: .85rem; width: 100%; }
body.staffdark .esg-select { width: auto; }
body.staffdark .esg-input:focus, body.staffdark .esg-select:focus { outline: none; border-color: #2563EB; }
body.staffdark textarea.esg-input { resize: vertical; font-family: inherit; }
body.staffdark .esg-dim { color: #7FA3CC; }
body.staffdark .esg-chip { display: inline-flex; align-items: center; border: 1px solid var(--c); color: var(--c); border-radius: 999px; padding: .06rem .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: color-mix(in srgb, var(--c) 12%, transparent); }
body.staffdark .esg-row { display: flex; align-items: center; gap: .9rem; background: #102B4C; border: 1px solid #1D3B63; border-radius: 12px; padding: .8rem 1rem; margin-bottom: .55rem; cursor: pointer; transition: border-color .15s; }
body.staffdark .esg-row:hover { border-color: #2563EB; }
body.staffdark .esg-row-icon { width: 42px; height: 42px; border-radius: 10px; background: #132F53; display: flex; align-items: center; justify-content: center; color: #4F8EF7; font-size: 1.05rem; flex: none; }
body.staffdark .esg-row-main { flex: 1; min-width: 0; }
body.staffdark .esg-row-title { color: #EDF3FB; font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
body.staffdark .esg-row-meta { color: #7FA3CC; font-size: .78rem; margin-top: .18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staffdark .esg-row-when { color: #57749B; font-size: .76rem; flex: none; }
body.staffdark .esg-row-acts { display: flex; gap: .25rem; flex: none; }
body.staffdark .esg-ib { background: none; border: 1px solid transparent; border-radius: 8px; color: #7FA3CC; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .82rem; transition: color .12s, background .12s; }
body.staffdark .esg-ib:hover:not(:disabled) { background: #132F53; color: #E7EFFA; }
body.staffdark .esg-ib:disabled { opacity: .35; cursor: default; }
body.staffdark .esg-ib-danger:hover:not(:disabled) { color: #F87171; }
body.staffdark .esg-prog { margin-top: .35rem; display: flex; align-items: center; gap: .55rem; max-width: 320px; }
body.staffdark .esg-prog small, body.staffdark .esg-reqs-sum small { color: #7FA3CC; font-size: .72rem; white-space: nowrap; }
body.staffdark .esg-prog-bar { flex: 1; height: 6px; border-radius: 999px; background: #0B2240; overflow: hidden; }
body.staffdark .esg-prog-bar span { display: block; height: 100%; border-radius: 999px; background: #10B981; transition: width .3s; }
/* ── builder ── */
body.staffdark .esg-build { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #071A2F; }
body.staffdark .esg-bhead { display: flex; align-items: center; gap: .8rem; padding: .65rem 1rem; background: #102B4C; border-bottom: 1px solid #1D3B63; flex: none; }
body.staffdark .esg-bhead-main { flex: 1; min-width: 0; }
body.staffdark .esg-btitle { background: none; border: 1px solid transparent; border-radius: 7px; color: #EDF3FB; font-size: 1.02rem; font-weight: 700; padding: .15rem .4rem; width: 100%; max-width: 480px; }
body.staffdark .esg-btitle:hover:not(:disabled), body.staffdark .esg-btitle:focus { border-color: #1D3B63; background: #0B2240; outline: none; }
body.staffdark .esg-bhead-meta { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: #7FA3CC; margin-top: .15rem; flex-wrap: wrap; }
body.staffdark .esg-bhead-acts { display: flex; gap: .45rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
body.staffdark .esg-palette { display: flex; gap: .3rem; padding: .45rem .9rem; background: #0D2440; border-bottom: 1px solid #1D3B63; overflow-x: auto; flex: none; }
body.staffdark .esg-tool { display: flex; flex-direction: column; align-items: center; gap: .18rem; background: none; border: 1px solid transparent; border-radius: 9px; color: #8FAED2; padding: .4rem .65rem; font-size: .66rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
body.staffdark .esg-tool i { font-size: .95rem; }
body.staffdark .esg-tool:hover { background: #132F53; color: #E7EFFA; }
body.staffdark .esg-tool.on { background: #2563EB; border-color: #2563EB; color: #fff; }
body.staffdark .esg-bwrap { flex: 1; display: flex; min-height: 0; }
body.staffdark .esg-thumbs { width: 118px; flex: none; overflow-y: auto; background: #0D2440; border-right: 1px solid #1D3B63; padding: .7rem .55rem; }
body.staffdark .esg-thumb { position: relative; border: 2px solid #1D3B63; border-radius: 7px; overflow: hidden; margin-bottom: .55rem; cursor: pointer; background: #fff; }
body.staffdark .esg-thumb.on { border-color: #2563EB; }
body.staffdark .esg-thumb canvas { display: block; width: 100%; }
body.staffdark .esg-thumb span { position: absolute; right: 4px; bottom: 4px; background: rgba(7,26,47,.85); color: #B9CCE4; font-size: .64rem; font-weight: 700; border-radius: 5px; padding: .05rem .35rem; }
body.staffdark .esg-stage { flex: 1; overflow: auto; padding: 1.4rem; background: #0B2240; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; min-width: 0; }
body.staffdark .esg-stage.esg-place { cursor: crosshair; }
body.staffdark .esg-stage-load { color: #7FA3CC; display: flex; align-items: center; gap: .6rem; margin: auto; font-size: .88rem; }
body.staffdark .esg-page { position: relative; flex: none; background: #fff; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
body.staffdark .esg-page canvas { display: block; border-radius: 4px; }
body.staffdark .esg-ovl { position: absolute; inset: 0; }
body.staffdark .esg-f { position: absolute; border: 1.5px dashed var(--fc, #F59E0B); background: color-mix(in srgb, var(--fc, #F59E0B) 16%, transparent); border-radius: 3px; cursor: grab; display: flex; align-items: center; overflow: hidden; }
body.staffdark .esg-f.lock { cursor: default; }
body.staffdark .esg-f.sel { border-style: solid; border-width: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc, #F59E0B) 30%, transparent); z-index: 2; }
body.staffdark .esg-f-lab { display: flex; align-items: center; gap: .25rem; font-size: .62rem; font-weight: 700; color: var(--fc, #F59E0B); padding: 0 .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: brightness(.72) saturate(1.4); }
body.staffdark .esg-f-lab b { color: #DC2626; }
body.staffdark .esg-f-rs { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--fc, #F59E0B); cursor: nwse-resize; }
body.staffdark .esg-f.k-text, body.staffdark .esg-f.k-file { --fc: #F59E0B; }
body.staffdark .esg-f.k-checkbox, body.staffdark .esg-f.k-radio { --fc: #3B82F6; }
body.staffdark .esg-f.k-date { --fc: #38BDF8; }
body.staffdark .esg-f.k-dropdown { --fc: #6366F1; }
body.staffdark .esg-f.k-signature, body.staffdark .esg-f.k-initials { --fc: #A855F7; }
body.staffdark .esg-f.k-image { --fc: #10B981; }
body.staffdark .esg-f.k-checkbox .esg-f-lab i, body.staffdark .esg-f.k-radio .esg-f-lab i { margin: auto; }
body.staffdark .esg-f.k-checkbox .esg-f-lab, body.staffdark .esg-f.k-radio .esg-f-lab { padding: 0; width: 100%; justify-content: center; }
body.staffdark .esg-f.k-checkbox .esg-f-lab :not(i), body.staffdark .esg-f.k-radio .esg-f-lab b { display: none; }
body.staffdark .esg-side { width: 300px; flex: none; background: #102B4C; border-left: 1px solid #1D3B63; display: flex; flex-direction: column; min-height: 0; }
body.staffdark .esg-side-tabs { display: flex; flex: none; border-bottom: 1px solid #1D3B63; }
body.staffdark .esg-stab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: #7FA3CC; font-size: .78rem; font-weight: 700; padding: .65rem .4rem; cursor: pointer; }
body.staffdark .esg-stab.on { color: #fff; border-bottom-color: #2563EB; }
body.staffdark .esg-side-body { flex: 1; overflow-y: auto; padding: .9rem; }
body.staffdark .esg-side-empty { text-align: center; color: #7FA3CC; font-size: .82rem; padding: 2.2rem .8rem; }
body.staffdark .esg-side-empty i { font-size: 1.5rem; color: #33517A; display: block; margin-bottom: .6rem; }
body.staffdark .esg-side-note { color: #B9CCE4; font-size: .82rem; line-height: 1.45; }
body.staffdark .esg-side-note i { color: #4F8EF7; font-size: 1.1rem; }
body.staffdark .esg-side-note p { margin: .5rem 0; }
body.staffdark .esg-props .field-label, body.staffdark .esg-send-body .field-label, body.staffdark .modal .field-label { display: block; color: #8FAED2; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin: .7rem 0 .25rem; }
body.staffdark .esg-prop-kind { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: #EDF3FB; font-size: .85rem; background: #132F53; border: 1px solid #1D3B63; border-radius: 9px; padding: .55rem .7rem; }
body.staffdark .esg-prop-kind i { color: var(--fc, #4F8EF7); }
body.staffdark .esg-prop-acts { display: flex; gap: .5rem; margin-top: 1rem; }
body.staffdark .esg-check { display: flex; align-items: flex-start; gap: .5rem; color: #B9CCE4; font-size: .8rem; margin-top: .55rem; cursor: pointer; }
body.staffdark .esg-check input { margin-top: .2rem; accent-color: #2563EB; }
body.staffdark .esg-check-hero { background: #132F53; border: 1px solid #1D3B63; border-radius: 9px; padding: .6rem .7rem; margin: 0 0 .4rem; }
body.staffdark .esg-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #102B4C; border-top: 1px solid #1D3B63; padding: .45rem 1rem; flex: none; }
body.staffdark .esg-save-ind { color: #10B981; font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
body.staffdark .esg-locked .esg-save-ind { color: #7FA3CC; }
body.staffdark .esg-foot-right { display: flex; align-items: center; gap: .45rem; color: #7FA3CC; font-size: .78rem; }
body.staffdark .esg-foot-right #esgZoomPct { min-width: 42px; text-align: center; }
/* ── recipients / requests panels ── */
body.staffdark .esg-so-idx { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #2563EB; color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
body.staffdark .esg-send-order { display: flex; flex-direction: column; gap: .45rem; margin: .6rem 0; }
body.staffdark .esg-so-row { display: flex; align-items: center; gap: .6rem; background: #132F53; border: 1px solid #1D3B63; border-radius: 9px; padding: .5rem .65rem; color: #E7EFFA; font-size: .84rem; }
body.staffdark .esg-so-row small { display: block; color: #7FA3CC; font-size: .72rem; }
body.staffdark .esg-rec-row { display: flex; align-items: flex-start; gap: .5rem; background: #132F53; border: 1px solid #1D3B63; border-radius: 10px; padding: .55rem; margin-bottom: .5rem; }
body.staffdark .esg-rec-row .esg-so-idx { margin-top: .35rem; }
body.staffdark .esg-rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
body.staffdark .esg-rec-acts { display: flex; flex-direction: column; gap: .1rem; }
body.staffdark .esg-rec-acts .esg-ib { width: 24px; height: 22px; font-size: .68rem; }
body.staffdark .esg-reqs-sum { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
body.staffdark .esg-req-row { display: flex; align-items: flex-start; gap: .55rem; background: #132F53; border: 1px solid #1D3B63; border-radius: 10px; padding: .6rem .65rem; margin-bottom: .5rem; }
body.staffdark .esg-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #2563EB; color: #fff; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
body.staffdark .esg-req-main { flex: 1; min-width: 0; color: #E7EFFA; font-size: .82rem; }
body.staffdark .esg-req-main small { display: block; margin-top: .15rem; }
body.staffdark .esg-req-decline { color: #F87171 !important; font-style: italic; }
body.staffdark .esg-req-acts { display: flex; gap: .15rem; flex: none; }
/* ── send modal internals ── */
body.staffdark .esg-send-body { max-height: 66vh; overflow-y: auto; }
body.staffdark .esg-send-depts { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
body.staffdark .esg-send-depts .esg-check { margin-top: .25rem; }
body.staffdark .esg-send-workers { max-height: 200px; overflow-y: auto; border: 1px solid #1D3B63; border-radius: 9px; padding: .35rem .6rem; background: #0B2240; }
body.staffdark .esg-send-workers .esg-check { margin-top: .3rem; }
body.staffdark .esg-send-meta { display: flex; gap: .8rem; margin-top: .5rem; }
body.staffdark .esg-send-meta > div { flex: 1; }
/* ── audit modal ── */
body.staffdark .esg-audit-body { max-height: 62vh; overflow-y: auto; }
body.staffdark .esg-audit-row { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid #1D3B63; }
body.staffdark .esg-audit-row:last-child { border-bottom: 0; }
body.staffdark .esg-audit-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; background: #132F53; color: #4F8EF7; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
body.staffdark .esg-audit-main { flex: 1; min-width: 0; color: #E7EFFA; font-size: .83rem; }
body.staffdark .esg-audit-detail { color: #B9CCE4; font-size: .78rem; margin-top: .12rem; }
body.staffdark .esg-audit-tech { color: #57749B; font-size: .7rem; margin-top: .1rem; }
body.staffdark .esg-audit-when { color: #7FA3CC; font-size: .74rem; flex: none; }
/* ── responsive: side panel collapses under 1100px, thumbs hide under 860px ── */
@media (max-width: 1100px) {
    body.staffdark .esg-side { width: 250px; }
}
@media (max-width: 900px) {
    body.staffdark .esg-thumbs { display: none; }
    body.staffdark .esg-bwrap { flex-direction: column; }
    body.staffdark .esg-side { width: auto; max-height: 42vh; border-left: 0; border-top: 1px solid #1D3B63; }
    body.staffdark .esg-row-when { display: none; }
}

/* ── My Documents — worker eSignature portal (Task #691) ───────────────────── */
.wsg-pill { display: inline-flex; align-items: center; border: 1px solid; border-radius: 999px; padding: .1rem .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
body.staffdark .wsg-group { margin-bottom: 1.2rem; }
body.staffdark .wsg-group-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7E96B8; margin: 0 0 .55rem; }
body.staffdark .wsg-row { display: flex; align-items: center; gap: .9rem; background: #132F53; border: 1px solid #1D3B63; border-radius: 12px; padding: .8rem 1rem; margin-bottom: .55rem; cursor: pointer; transition: border-color .15s, transform .1s; }
body.staffdark .wsg-row:hover { border-color: #2563EB; }
body.staffdark .wsg-row-ico { width: 40px; height: 40px; border-radius: 10px; background: #2563EB22; color: #60A5FA; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
body.staffdark .wsg-row-main { flex: 1; min-width: 0; }
body.staffdark .wsg-row-title { font-weight: 700; color: #E8F0FB; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
body.staffdark .wsg-row-sub { font-size: .8rem; color: #7E96B8; margin-top: .15rem; }
body.staffdark .wsg-row-act { flex-shrink: 0; }
body.staffdark .wsg-due-soon { color: #f59e0b; }
body.staffdark .wsg-note { display: flex; gap: .6rem; align-items: flex-start; background: #10335F; border: 1px solid #1D4E8F; color: #B9D2F0; border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; margin-bottom: .8rem; }
body.staffdark .wsg-note i { margin-top: .15rem; }
body.staffdark .wsg-note-amber { background: #3A2A0E; border-color: #7C5A1A; color: #FBD38D; }
body.staffdark .wsg-note-red { background: #3B1519; border-color: #7F2A33; color: #FCA5A5; }
body.staffdark .wsg-body { display: flex; gap: 1.1rem; align-items: flex-start; }
body.staffdark .wsg-pages { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
body.staffdark .wsg-side { width: 300px; flex-shrink: 0; position: sticky; top: 8px; display: flex; flex-direction: column; gap: .8rem; }
body.staffdark .wsg-card { background: #132F53; border: 1px solid #1D3B63; border-radius: 12px; padding: .9rem 1rem; }
body.staffdark .wsg-card-title { font-weight: 700; color: #E8F0FB; font-size: .9rem; margin-bottom: .55rem; }
body.staffdark .wsg-prog { height: 8px; background: #0D2440; border-radius: 999px; overflow: hidden; }
body.staffdark .wsg-prog-bar { height: 100%; background: #2563EB; border-radius: 999px; transition: width .25s; }
body.staffdark .wsg-missing { margin-top: .6rem; color: #f59e0b; font-size: .8rem; }
body.staffdark .wsg-agree { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: #B9CCE4; cursor: pointer; }
body.staffdark .wsg-agree input { margin-top: .15rem; }
.wsg-page { position: relative; background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.45); border-radius: 4px; overflow: hidden; }
.wsg-overlay { position: absolute; inset: 0; }
.wsg-field { position: absolute; box-sizing: border-box; }
.wsg-field.wsg-miss { outline: 2px solid #ef4444; outline-offset: 1px; border-radius: 4px; }
.wsg-in { width: 100%; height: 100%; box-sizing: border-box; border: 1.5px dashed rgba(37,99,235,.65); background: rgba(37,99,235,.08); color: #111827; border-radius: 3px; padding: 0 4px; font-family: inherit; }
body.staffdark .wsg-field .wsg-in { color: #111827; background: rgba(37,99,235,.08); }
.wsg-in:focus { outline: none; border-style: solid; border-color: #2563EB; background: rgba(37,99,235,.12); }
.wsg-in:disabled { opacity: .75; cursor: not-allowed; }
.wsg-static { width: 100%; height: 100%; overflow: hidden; color: #111827; display: flex; align-items: center; padding: 0 3px; }
.wsg-tick { width: 100%; height: 100%; border: 1.5px dashed rgba(37,99,235,.65); background: rgba(37,99,235,.08); border-radius: 4px; cursor: pointer; color: #1D4ED8; display: flex; align-items: center; justify-content: center; font-size: .8em; padding: 0; }
.wsg-tick.on { border-style: solid; border-color: #2563EB; background: rgba(37,99,235,.15); }
.wsg-tick-radio { border-radius: 50%; }
.wsg-dot { width: 55%; height: 55%; border-radius: 50%; background: #1D4ED8; display: block; }
.wsg-tick:disabled { opacity: .75; cursor: not-allowed; }
.wsg-sigbtn { width: 100%; height: 100%; border: 1.5px dashed #F59E0B; background: rgba(253,224,71,.25); color: #92400E; border-radius: 4px; cursor: pointer; font-weight: 700; font-size: .72rem; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: 0 4px; overflow: hidden; white-space: nowrap; }
.wsg-sigbtn:hover { background: rgba(253,224,71,.4); }
.wsg-sigimg { width: 100%; height: 100%; object-fit: contain; }
.wsg-sig-redo { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #1D3B63; background: #132F53; color: #B9CCE4; cursor: pointer; font-size: .6rem; display: flex; align-items: center; justify-content: center; }
.wsg-sig-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; }
.wsg-sig-tab { flex: 1; border: 1px solid #d1d5db; background: transparent; border-radius: 8px; padding: .45rem .6rem; cursor: pointer; font-weight: 600; font-size: .82rem; color: inherit; }
body.staffdark .wsg-sig-tab { border-color: #1D3B63; color: #B9CCE4; }
.wsg-sig-tab.active { border-color: #2563EB; background: rgba(37,99,235,.12); color: #2563EB; }
body.staffdark .wsg-sig-tab.active { color: #60A5FA; }
.wsg-pad { width: 100%; height: auto; background: #fff; border: 1px dashed #94a3b8; border-radius: 8px; touch-action: none; cursor: crosshair; display: block; }
.wsg-type-preview { background: #fff; color: #111827; border: 1px dashed #94a3b8; border-radius: 8px; min-height: 84px; display: flex; align-items: center; justify-content: center; font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; font-size: 2.2rem; margin-top: .5rem; overflow: hidden; padding: .3rem .6rem; text-align: center; }
.wsg-acct-docs { display: flex; flex-direction: column; max-height: 220px; overflow: auto; border: 1px solid rgba(148,163,184,.25); border-radius: 8px; }
.wsg-acct-doc { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-bottom: 1px solid rgba(148,163,184,.15); }
.wsg-acct-doc:last-child { border-bottom: none; }
@media (max-width: 900px) {
    body.staffdark .wsg-body { flex-direction: column-reverse; }
    body.staffdark .wsg-side { width: 100%; position: static; }
}
/* On-page signing fields sit on the WHITE PDF page — they must beat the staff
   dark-theme input skin (body.staffdark .main input[...]) with higher specificity. */
body.staffdark .main .wsg-field input.wsg-in, body.staffdark .main .wsg-field select.wsg-in {
    background-color: rgba(37,99,235,.08); color: #111827; border-color: rgba(37,99,235,.65);
}
body.staffdark .main .wsg-field input.wsg-in:focus, body.staffdark .main .wsg-field select.wsg-in:focus {
    border-color: #2563EB; background-color: rgba(37,99,235,.12); box-shadow: none;
}
body.staffdark .main .wsg-field input.wsg-in:disabled { opacity: .8; }
body.staffdark .main .wsg-field input[type="date"].wsg-in::-webkit-calendar-picker-indicator { filter: none; opacity: .55; }

/* ══ Mandatory-document lockdown screen (Task #692) — dark navy, .edg-* ═══════
   Fullscreen blocking screen that replaces the whole portal while a mandatory /
   emergency document is pending. Owner palette: #071A2F / #0A2540 / #102B4C /
   #132F53, blue #2563EB, red #EF4444. Not scoped under body.staffdark — it can
   render before shell() (login landing straight into the gate). */
.edg-view{min-height:100vh;background:#071A2F;display:flex;flex-direction:column;gap:16px;padding:16px clamp(12px,3vw,40px) 34px}
.edg-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.edg-brand{color:#e2e8f0;font-weight:700;font-size:1.02rem;display:flex;gap:10px;align-items:center}
.edg-brand i{color:#2563EB}
.edg-hero{background:linear-gradient(180deg,#0A2540,#102B4C);border:1px solid #1d3a63;border-radius:16px;padding:24px clamp(16px,4vw,42px);text-align:center;color:#cbd5e1}
.edg-hero h1{color:#fff;font-size:clamp(1.15rem,2.6vw,1.6rem);margin:10px 0 8px}
.edg-hero p{max-width:660px;margin:0 auto;line-height:1.55;font-size:.92rem}
.edg-ic{width:54px;height:54px;border-radius:50%;background:#2563EB22;border:1px solid #2563EB55;display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;color:#3b82f6}
.edg-hero-red{border-color:#EF444466}
.edg-hero-red .edg-ic{background:#EF444422;border-color:#EF444455;color:#EF4444;animation:edgPulse 1.6s ease-in-out infinite}
@keyframes edgPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion: reduce){.edg-hero-red .edg-ic{animation:none}}
.edg-main{background:#0A2540;border:1px solid #132F53;border-radius:16px;padding:clamp(10px,2vw,20px);flex:1;min-height:320px}
@media (max-width:720px){.edg-view{padding:12px 10px 24px}.edg-hero{padding:18px 14px}}

/* Task #692 — send-dialog enforcement flags + Live Requests board */
body.staffdark .esg-send-flags{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
body.staffdark .esg-live-wrap{display:flex;flex-direction:column;gap:14px}
body.staffdark .esg-live-card{background:var(--panel,#0f172a);border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:14px 16px}
body.staffdark .esg-live-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;align-items:baseline}
body.staffdark .esg-live-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.staffdark .esg-live-table{width:100%;border-collapse:collapse;font-size:.85rem}
body.staffdark .esg-live-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;padding:6px 8px;border-bottom:1px solid rgba(148,163,184,.15)}
body.staffdark .esg-live-table td{padding:8px;border-bottom:1px solid rgba(148,163,184,.08);vertical-align:top}
body.staffdark .esg-live-table tr:last-child td{border-bottom:none}
@media (max-width:720px){body.staffdark .esg-live-table th:nth-child(3),body.staffdark .esg-live-table td:nth-child(3){display:none}}

body.staffdark .cqw-wa-pill{display:inline-flex;align-items:center;gap:5px;background:#0c2118;border:1px solid #1e4d33;color:#4ade80;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600;}
/* ── Task #744: MY QUEUE ranked list view (.cqw-ql-*) ──────────────────────── */
.staffdark .cqw-ql{display:flex;flex-direction:column;gap:0;}
.staffdark .cqw-ql-tbl{width:100%;border-collapse:collapse;font-size:.8rem;}
.staffdark .cqw-ql-tbl thead tr{border-bottom:1px solid rgba(255,255,255,.09);}
.staffdark .cqw-ql-tbl th{padding:.45rem .5rem;text-align:left;color:#7b8db0;font-size:.71rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.staffdark .cqw-ql-tbl td{padding:.55rem .5rem;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;}
.staffdark .cqw-ql-tbl tbody tr:last-child td{border-bottom:none;}
.staffdark .cqw-ql-tbl tbody tr:hover td{background:rgba(255,255,255,.025);}
.staffdark .cqw-ql-mine td{background:rgba(37,99,235,.1);border-left:3px solid #2563eb;}
.staffdark .cqw-ql-mine:hover td{background:rgba(37,99,235,.15)!important;}
.staffdark .cqw-ql-rank{color:#60a5fa;font-weight:700;font-size:.85rem;text-align:center;width:28px;}
.staffdark .cqw-ql-rank i{color:#60a5fa;font-size:.8rem;}
.staffdark .cqw-ql-name{font-weight:600;color:#e2e8f0;max-width:130px;}
.staffdark .cqw-ql-phone{color:#7b8db0;font-size:.72rem;font-weight:400;margin-top:.1rem;display:block;}
.staffdark .cqw-ql-amt{color:#fbbf24;font-weight:700;white-space:nowrap;text-align:right;}
.staffdark .cqw-ql-empty{text-align:center;color:#7b8db0;padding:1.4rem .5rem;font-style:italic;}
.staffdark .cqw-ql-pages{display:flex;align-items:center;justify-content:space-between;padding:.6rem .5rem;border-top:1px solid rgba(255,255,255,.07);}
.staffdark .cqw-ql-page-info{font-size:.76rem;color:#7b8db0;}
.staffdark .cqw-ql-cta{padding:.9rem .5rem .7rem;text-align:center;border-top:1px solid rgba(255,255,255,.07);}
.staffdark .cqw-ql-cta .cqw-auto-note{margin:.2rem 0 .8rem;}
/* Task #744: queue count badge in header + numbered pagination */
.staffdark .cqw-head-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:#2563eb;color:#fff;border-radius:10px;font-size:.72rem;font-weight:700;vertical-align:middle;margin-left:.3rem;}
.staffdark .cqw-ql-pg-nums{display:flex;align-items:center;gap:.2rem;}
.staffdark .cqw-pg-btn{min-width:28px;height:28px;padding:0 5px;}
.staffdark .cqw-pg-active{background:#2563eb !important;color:#fff !important;border-color:#2563eb !important;}
/* Task #744: CURRENTLY WORKING pinned card */
.staffdark .cqw-ql-pinned{background:rgba(37,99,235,.13);border:1px solid rgba(37,99,235,.3);border-radius:10px;margin:.5rem .5rem .75rem;padding:.65rem .75rem;}
.staffdark .cqw-ql-pinned-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#60a5fa;margin-bottom:.5rem;display:flex;align-items:center;gap:.35rem;}
.staffdark .cqw-ql-pinned-body{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .6rem;}
.staffdark .cqw-ql-rank-mine{background:#2563eb;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0;}
.staffdark .cqw-ql-name-text{font-weight:600;color:#e6edfb;font-size:.85rem;}
.staffdark .cqw-ql-outcome-btn{margin-left:auto;flex-shrink:0;}
/* Phone column styles */
.staffdark .cqw-ql-phone-col{white-space:nowrap;}
.staffdark .cqw-ql-ph{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;}
.staffdark .cqw-ph-call{color:#60a5fa;font-size:.82rem;text-decoration:none;line-height:1;}
.staffdark .cqw-ph-call:hover{color:#93c5fd;}
.staffdark .cqw-ph-copy{background:none;border:none;color:#7b8db0;font-size:.78rem;cursor:pointer;padding:0 2px;line-height:1;}
.staffdark .cqw-ph-copy:hover{color:#93c5fd;}
.staffdark .cqw-ph-num{font-size:.78rem;color:#94a3b8;}
/* Footer */
.staffdark .cqw-ql-footer{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid rgba(255,255,255,.07);gap:.5rem;flex-wrap:wrap;}
.staffdark .cqw-ql-live{font-size:.72rem;color:#7b8db0;display:flex;align-items:center;gap:.3rem;}
.staffdark .cqw-ql-cooldown{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;color:#93c5fd;background:rgba(96,165,250,.07);border-radius:6px;padding:.2rem .5rem;}
body.staffdark .cqa-wa-edit{border-top:1px solid #1c2a44;margin-top:8px;padding-top:10px;display:flex;flex-direction:column;gap:8px;}
body.staffdark .cqa-wa-note{margin:0;font-size:11.5px;color:#7b8db0;}
body.staffdark .cqa-wa-lab{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#7f93bd;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
body.staffdark .cqa-wa-lab input{background:#0d1834;border:1px solid #223058;border-radius:8px;color:#e6edfb;padding:7px 9px;font-size:12.5px;color-scheme:dark;}
/* Task #726 — Win-back calls listing (churned sequences awaiting reactivation) */
body.staffdark .cqa-wb-modal{max-width:640px;}
body.staffdark .cqa-wb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid #1c2a44;}
body.staffdark .cqa-wb-row:last-child{border-bottom:none;}
body.staffdark .cqa-wb-main{display:flex;flex-direction:column;gap:2px;min-width:150px;flex:1;}
body.staffdark .cqa-wb-main b{font-size:13px;color:#e6edfb;}
body.staffdark .cqa-wb-phone{font-size:11.5px;color:#7b8db0;}
body.staffdark .cqa-wb-dates{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:#7f93bd;}
body.staffdark .cqa-wb-dates b{color:#ffd479;font-weight:600;}
body.staffdark .cqa-wb-moved{font-size:10px;color:#7fb2ff;margin-left:4px;}
body.staffdark .cqa-wb-edit{flex-basis:100%;display:flex;flex-direction:column;gap:8px;padding:8px 0 2px;}
body.staffdark .cqa-wb-edit[hidden]{display:none;}
body.staffdark .cqa-wb-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
body.staffdark .cqa-wb-profile{color:#7fb2ff;border-color:#26365a;}
/* ── Task #741: Overview cards + delete button ── */
body.staffdark .cbc-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:4px 0 8px;}
body.staffdark .cbc-ov-card{background:#0d1825;border:1px solid #1c2a44;border-radius:12px;padding:14px 16px;}
body.staffdark .cbc-ov-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#4e8ff8;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
body.staffdark .cbc-ov-row{font-size:13px;color:#b8ccec;margin-bottom:5px;display:flex;align-items:baseline;gap:6px;}
body.staffdark .cbc-ov-num{width:22px;height:22px;border-radius:50%;background:#1a2d4d;border:1px solid #3b82f6;color:#60a5fa;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0;}
body.staffdark .cbc-ov-dim{color:#5c6f93;font-size:11.5px;margin-left:auto;}
body.staffdark .cbc-ov-label{min-width:56px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5c6f93;flex-shrink:0;}
/* Delete category button in priority table */
body.staffdark .cqs-del-cat{padding:2px 7px;font-size:11px;line-height:1.4;border-radius:6px;opacity:.55;transition:opacity .12s;}
body.staffdark .cqs-del-cat:hover{opacity:1;color:#f87171;border-color:#f87171;}
/* ── Task #741: Agent panel tabs + panes ── */
body.staffdark .cqs-agent-htabs{display:flex;gap:4px;margin-top:10px;flex-wrap:wrap;}
body.staffdark .cqs-agtab{font-size:12px;padding:4px 10px;border-radius:8px;border:1px solid #26365a;background:transparent;color:#7b8db0;cursor:pointer;transition:all .12s;}
body.staffdark .cqs-agtab.active{background:#1a2d4d;color:#60a5fa;border-color:#3b82f6;}
body.staffdark .cqs-agtab:hover:not(.active){background:#131f30;color:#a8bbd6;}
body.staffdark .cqs-agtab-pane[hidden]{display:none;}
/* ── Task #741: Active Sequences Impact sidebar panel ── */
body.staffdark .cbc-impact-panel{margin-top:14px;padding:12px;background:#0d1825;border:1px solid #1c2a44;border-radius:10px;}
body.staffdark .cbc-impact-num{font-size:22px;font-weight:700;color:#ffd479;}
body.staffdark .cbc-impact-label{font-size:12px;color:#7b8db0;}
body.staffdark .cbc-impact-count{margin:4px 0;}
/* ── Task #741: inline spinner-sm ── */
body.staffdark .spinner-sm{display:inline-block;width:12px;height:12px;border:2px solid #26365a;border-top-color:#60a5fa;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Appointment Global Button + Panel ───────────────────────────────────── */
body.staffdark .appt-gbl-btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:700;letter-spacing:.5px;cursor:pointer;white-space:nowrap;transition:background .18s,transform .12s;position:relative;text-transform:uppercase;}
body.staffdark .appt-gbl-btn:hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed);transform:translateY(-1px);}
body.staffdark .appt-gbl-btn i{font-size:13px;}
body.staffdark .appt-gbl-badge{background:#e53e3e;color:#fff;font-size:10px;font-weight:800;border-radius:10px;padding:1px 6px;margin-left:2px;min-width:18px;text-align:center;line-height:16px;display:inline-block;}
body.staffdark .appt-gbl-badge.hidden{display:none;}
body.staffdark .appt-gbl-clock{font-size:11px;font-weight:700;letter-spacing:.3px;background:rgba(0,0,0,.25);border-radius:10px;padding:1px 7px;margin-left:1px;white-space:nowrap;display:inline-block;}
body.staffdark .appt-gbl-clock.hidden{display:none;}
body.staffdark .appt-gbl-btn.appt-gbl-btn-now{background:linear-gradient(135deg,#b45309,#d97706)!important;box-shadow:0 0 0 3px rgba(245,158,11,.35);animation:apptGblNowPulse 1.4s ease-in-out infinite;}
body.staffdark .appt-gbl-btn.appt-gbl-btn-now .appt-gbl-clock{background:rgba(0,0,0,.30);font-size:10.5px;}
/* Appointment button wrapper + reminder list */
/* colored status dot */
@keyframes apptDotBlink{0%,100%{opacity:1}50%{opacity:.3}}
/* text */
/* In the sidebar variant the wrap goes full-width */
@keyframes apptGblNowPulse{0%,100%{box-shadow:0 0 0 3px rgba(245,158,11,.35);}50%{box-shadow:0 0 0 7px rgba(245,158,11,.0);}}
body.staffdark .appt-side{margin:6px 0 4px;}

/* Panel overlay + modal card (matches My Queue popup style) */
#apptPanelWrap{position:fixed;inset:0;z-index:1200;background:rgba(4,10,22,.75);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden;animation:apptFadeIn .2s ease both;}
#apptPanelBd{display:none;}
.appt-panel{position:relative;width:100%;max-width:1180px;height:calc(100dvh - 2rem);max-height:820px;background:#0b1424;border:1px solid rgba(255,255,255,.09);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;animation:apptPopIn .28s cubic-bezier(.22,1,.36,1) both;}
@keyframes apptFadeIn{from{opacity:0}to{opacity:1}}
@keyframes apptFadeOut{from{opacity:1}to{opacity:0}}
@keyframes apptPopIn{from{opacity:0;transform:scale(.96) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes apptPopOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-8px)}}
#apptPanelWrap.appt-closing{animation:apptFadeOut .2s ease both;}
#apptPanelWrap.appt-closing .appt-panel{animation:apptPopOut .2s cubic-bezier(.55,0,1,.45) both;}
@media(max-width:540px){#apptPanelWrap{padding:.5rem;}
.appt-panel{height:calc(100dvh - 1rem);max-height:none;border-radius:14px;}}
/* Inline appointments (comm/worker hub Appointments tab) — same appt-* design, no modal chrome */
.appt-inline{display:block;width:100%;}
.appt-inline .appt-panel-inline{position:relative;width:100%;max-width:none;height:auto;max-height:none;border-radius:14px;box-shadow:none;animation:none;background:#0b1424;overflow:visible;}
.appt-inline .appt-body{overflow:visible;}
/* My Schedule tab (.ams-*) */
.ams-list{display:flex;flex-direction:column;overflow-y:auto;flex:1;}
.ams-hdr{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem .4rem;font-size:.72rem;font-weight:700;letter-spacing:.07em;color:#9fb0cc;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;background:#0b1424;z-index:1;}
.ams-hdr-due{color:#fca5a5;}
.ams-hdr-past{color:#64748b;}
.ams-cnt{margin-left:.3rem;padding:.1rem .42rem;border-radius:999px;background:rgba(255,255,255,.09);font-size:.68rem;}
.ams-row{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s;}
.ams-row:last-child{border-bottom:none;}
.ams-row:hover{background:rgba(255,255,255,.03);}
.ams-due{background:rgba(239,68,68,.06);}
.ams-due:hover{background:rgba(239,68,68,.1);}
.ams-past{opacity:.78;}
.ams-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.82rem;background:rgba(37,99,235,.2);color:#93c5fd;margin-top:.1rem;}
.ams-due .ams-ic{background:rgba(239,68,68,.2);color:#fca5a5;}
.ams-past .ams-ic{background:rgba(100,116,139,.2);color:#94a3b8;}
.ams-body{flex:1;min-width:0;}
.ams-name{font-size:.88rem;font-weight:700;color:#e7edf7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ams-kind{font-size:.76rem;color:#9fb0cc;margin-top:.1rem;}
.ams-time{font-size:.73rem;color:#64748b;margin-top:.2rem;display:flex;align-items:center;gap:.3rem;}
.ams-tail{flex:0 0 auto;display:flex;align-items:center;margin-top:.15rem;}
.ams-pill{display:inline-block;padding:.18rem .52rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;}
.ams-pill-due{background:rgba(239,68,68,.22);color:#fca5a5;border:1px solid rgba(239,68,68,.35);}
.ams-pill-up{background:rgba(37,99,235,.18);color:#93c5fd;border:1px solid rgba(37,99,235,.3);}
.ams-pill-done{background:rgba(52,211,153,.15);color:#6ee7b7;border:1px solid rgba(52,211,153,.3);}
.ams-pill-miss{background:rgba(251,191,36,.15);color:#fcd34d;border:1px solid rgba(251,191,36,.3);}
.ams-pill-cancel{background:rgba(100,116,139,.15);color:#94a3b8;border:1px solid rgba(100,116,139,.3);}
.appt-ams-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:.5rem;padding:2.5rem 1rem;color:#64748b;text-align:center;}
.appt-ams-empty i{font-size:2rem;color:#2563eb;opacity:.6;}
.appt-ams-empty p{margin:0;font-size:.9rem;}
.appt-ams-empty .appt-ams-sub{font-size:.8rem;}

/* Panel header */
.appt-ph{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid #1e2d4a;flex-shrink:0;background:#0d1829;}
.appt-ph-left{display:flex;align-items:center;gap:12px;}
.appt-ph-ic{width:36px;height:36px;background:linear-gradient(135deg,#7c3aed,#6d28d9);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-shrink:0;}
.appt-ph-h{font-size:16px;font-weight:700;color:#e2e8f0;margin:0 0 2px;}
.appt-ph-sub{font-size:11px;color:#4a5568;margin:0;}
.appt-ph-close{background:none;border:none;color:#4a5568;font-size:20px;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .15s,color .15s;line-height:1;}
.appt-ph-close:hover{background:#1e2d4a;color:#e2e8f0;}

/* Selected lead card */
.appt-lead-card{background:#101c33;border-bottom:1px solid #1e2d4a;padding:14px 16px;flex-shrink:0;}
.appt-lead-card.hidden{display:none;}
.appt-lc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.appt-lc-head{display:flex;align-items:flex-start;gap:11px;flex:1;min-width:0;}
.appt-lc-av{width:40px;height:40px;border-radius:50%;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.appt-lc-info{min-width:0;}
.appt-lc-name{font-size:14px;font-weight:700;color:#e2e8f0;margin-bottom:3px;}
.appt-lc-meta{font-size:11px;color:#64748b;margin-top:1px;display:flex;align-items:center;gap:5px;}
.appt-lc-meta i{font-size:10px;color:#374155;}
.appt-lc-prof{background:none;border:none;color:#10b981;font-size:11px;font-weight:600;cursor:pointer;padding:0;white-space:nowrap;flex-shrink:0;transition:color .15s;}
.appt-lc-prof:hover{color:#34d399;}
.appt-lc-status{background:#0a1323;border:1px solid #1a2c44;border-radius:9px;padding:11px 13px;}
.appt-lc-shead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.appt-lc-slbl{font-size:10px;font-weight:700;letter-spacing:.7px;color:#374155;text-transform:uppercase;}
.appt-lc-sgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 6px;}
.appt-lc-cell{min-width:0;}
.appt-lc-sk{font-size:10px;color:#374155;margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:3px;}
.appt-lc-arr{color:#374155;font-size:9px;}
.appt-lc-sv{font-size:12px;font-weight:600;color:#c4cfe4;}

/* Tab bar */
.appt-tabs-row{display:flex;border-bottom:1px solid #1e2d4a;flex-shrink:0;background:#0d1829;}
.appt-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;padding:11px 6px;font-size:11px;font-weight:600;color:#4a5568;cursor:pointer;transition:color .15s,border-color .15s;text-align:center;white-space:nowrap;}
.appt-tab.on{color:#7c3aed;border-bottom-color:#7c3aed;}
.appt-tab:hover:not(.on){color:#94a3b8;}

/* Scrollable body */
.appt-body{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;min-height:0;}
.appt-body-load{display:flex;align-items:center;justify-content:center;padding:40px;color:#4a5568;}
.appt-body-err{display:flex;align-items:center;gap:8px;padding:24px 18px;color:#4a5568;font-size:13px;}

/* Leads tab header */
.appt-leads-hdr{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;border-bottom:1px solid #1a2744;background:#0d1829;flex-shrink:0;}
.appt-leads-cnt{font-size:11px;font-weight:700;color:#4a5568;letter-spacing:.5px;white-space:nowrap;}
.appt-srch-wrap{display:flex;align-items:center;gap:7px;background:#0a1323;border:1px solid #1a2744;border-radius:7px;padding:6px 10px;flex:1;}
.appt-srch-wrap i{color:#374155;font-size:12px;flex-shrink:0;}
.appt-srch{background:none;border:none;outline:none;color:#c4cfe4;font-size:12px;width:100%;}
.appt-srch::placeholder{color:#374155;}
.appt-filter-btn{background:none;border:1px solid #1a2744;color:#4a5568;border-radius:7px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .12s,color .12s;}
.appt-filter-btn:hover{background:#1a2744;color:#94a3b8;}

/* Leads table */
.appt-tbl-outer{overflow-x:auto;overflow-y:visible;}
.appt-tbl{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;}
.appt-tbl thead th{padding:8px 8px;background:#0a1323;color:#374155;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-align:left;border-bottom:1px solid #1a2744;}
.appt-th-lead{padding-left:14px !important;}
.appt-tbl tbody tr{border-bottom:1px solid #111e36;cursor:pointer;transition:background .12s;}
.appt-tbl tbody tr:hover{background:#101c33;}
.appt-tbl tbody tr.appt-lead-sel{background:#130d2e !important;}
.appt-tbl td{padding:9px 8px;vertical-align:middle;color:#94a3b8;overflow:hidden;}
.appt-lead-cell{display:flex;align-items:center;gap:8px;}
.appt-radio{width:16px;height:16px;border-radius:50%;border:2px solid #2a3a58;flex-shrink:0;transition:border-color .12s,background .12s;}
.appt-radio-on{border-color:#3b82f6;background:radial-gradient(circle at center,#3b82f6 40%,transparent 41%);}
.appt-av{width:30px;height:30px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.appt-ln{font-size:12px;font-weight:600;color:#c4cfe4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.appt-le{font-size:10px;color:#4a5568;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.appt-amt{font-size:12px;font-weight:600;color:#c4cfe4;white-space:nowrap;}
.appt-empty{text-align:center;padding:24px !important;color:#4a5568;}

/* Status / standing pills */
.appt-s-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;display:inline-block;}
.appt-s-active{background:#14532d;color:#4ade80;}
.appt-s-soon{background:#78350f;color:#fbbf24;}
.appt-s-over{background:#7f1d1d;color:#f87171;}
.appt-s-cancel{background:#1e293b;color:#64748b;}
.appt-s-new{background:#1e3a5f;color:#93c5fd;}
.appt-sb-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;display:inline-block;}
.appt-sb-pay{background:#134e4a;color:#2dd4bf;}
.appt-sb-past{background:#7f1d1d;color:#f87171;}
.appt-sb-cancel{background:#1e293b;color:#64748b;}
.appt-sb-na{background:#1e293b;color:#64748b;}

/* Pagination */
.appt-pg-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-top:1px solid #111e36;}
.appt-pg{display:flex;align-items:center;gap:3px;}
.appt-pg-arr{background:none;border:1px solid #1a2744;color:#4a5568;border-radius:5px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;transition:background .12s,color .12s;}
.appt-pg-arr:hover:not(:disabled){background:#1a2744;color:#94a3b8;}
.appt-pg-arr:disabled{opacity:.35;cursor:default;}
.appt-pg-n{background:none;border:1px solid #1a2744;color:#64748b;border-radius:5px;min-width:26px;height:26px;padding:0 5px;font-size:12px;cursor:pointer;transition:background .12s,color .12s;}
.appt-pg-n:hover:not(.on){background:#1a2744;color:#94a3b8;}
.appt-pg-n.on{background:#7c3aed;border-color:#7c3aed;color:#fff;}
.appt-pg-info{font-size:11px;color:#374155;}

/* Details tab */
.appt-details-pane{padding:18px 16px 8px;}
.appt-dp-for{font-size:12px;color:#4a5568;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1e2d4a;}
.appt-dp-for strong{color:#c4cfe4;}
.appt-dp-field{margin-bottom:14px;}
.appt-dp-field label{display:block;font-size:11px;font-weight:600;color:#64748b;margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.appt-dp-field select,.appt-dp-field input[type=datetime-local],.appt-dp-field textarea{width:100%;background:#0a1323;border:1px solid #1a2744;border-radius:7px;color:#c4cfe4;padding:9px 11px;font-size:13px;outline:none;transition:border-color .15s;box-sizing:border-box;}
.appt-dp-field select:focus,.appt-dp-field input:focus,.appt-dp-field textarea:focus{border-color:#7c3aed;}
.appt-dp-field textarea{resize:vertical;font-family:inherit;}
.appt-opt{color:#374155;font-weight:400;}
.appt-dp-err{background:#1c0a0a;border:1px solid #7f1d1d;border-radius:6px;color:#f87171;padding:8px 11px;font-size:12px;margin-bottom:10px;}
.appt-dp-err.hidden{display:none;}
.appt-dp-foot{padding:6px 0 4px;display:flex;justify-content:flex-end;}

/* History tab */
.appt-history-pane{padding:10px 14px;}
.appt-h-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #111e36;}
.appt-h-row:last-child{border-bottom:none;}
.appt-h-ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px;}
.appt-h-sched .appt-h-ic{background:#172554;color:#93c5fd;}
.appt-h-done  .appt-h-ic{background:#14532d;color:#4ade80;}
.appt-h-miss  .appt-h-ic{background:#7f1d1d;color:#f87171;}
.appt-h-cancel .appt-h-ic{background:#1e293b;color:#64748b;}
.appt-h-kind{font-size:12px;font-weight:600;color:#c4cfe4;}
.appt-h-time{font-size:11px;color:#4a5568;margin:2px 0;}
.appt-h-note{font-size:11px;color:#64748b;margin:3px 0;}
.appt-h-meta{font-size:10px;color:#374155;}
.appt-h-status{background:#1e293b;color:#64748b;padding:1px 5px;border-radius:4px;font-size:10px;font-weight:600;text-transform:capitalize;}

/* Panel footer */
.appt-pf{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid #1a2744;flex-shrink:0;background:#0a1323;gap:10px;}
.appt-pf.appt-pf-hidden{display:none;}
.appt-pf-cancel{background:none;border:1px solid #1a2744;color:#64748b;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,color .12s;}
.appt-pf-cancel:hover{background:#1a2744;color:#94a3b8;}
.appt-pf-cont{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:8px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,opacity .15s;white-space:nowrap;}
.appt-pf-cont:hover:not(:disabled){background:linear-gradient(135deg,#8b5cf6,#7c3aed);}
.appt-pf-cont:disabled{opacity:.45;cursor:not-allowed;}

/* ── Appointment stats bar ───────────────────────────────────────────────────── */
.appt-stats-row{display:flex;align-items:stretch;background:#0a1222;border-bottom:1px solid #1a2744;flex-shrink:0;}
.appt-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.6rem .3rem .55rem;gap:2px;position:relative;cursor:pointer;border:none;background:transparent;transition:background .15s;}.appt-stat:hover{background:rgba(255,255,255,.04);}.appt-stat.appt-stat-active{background:rgba(99,102,241,.13);}.appt-stat.appt-stat-active .appt-stat-l{color:#818cf8;}.appt-stat.appt-stat-active::after{content:"";position:absolute;bottom:0;left:15%;right:15%;height:2px;background:#818cf8;border-radius:2px 2px 0 0;}
.appt-stat-div::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:1px;background:#1a2744;}
.appt-stat-n{font-size:1.25rem;font-weight:800;color:#e2e8f0;line-height:1;}
.appt-stat-l{font-size:.65rem;font-weight:600;color:#4a5568;letter-spacing:.04em;text-transform:uppercase;}
.appt-stat-due-n{color:#f87171;}
.appt-stat-done-n{color:#4ade80;}
.appt-stat-cancel-n{color:#64748b;}

/* Appointment table — appointment cell & due-now row */
.appt-appt-cell{white-space:normal;line-height:1.2;}
.appt-appt-date{font-size:12px;font-weight:600;color:#c4cfe4;}
.appt-appt-time{font-size:10px;color:#4a5568;margin-top:1px;}
.appt-row-due-pill{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:rgba(239,68,68,.18);color:#f87171;padding:1px 5px;border-radius:4px;margin-top:3px;}
.appt-row-due td{background:rgba(239,68,68,.04);}
.appt-row-past td{opacity:.65;}
.appt-lead-sel td{background:#130d2e !important;}

/* ── Connected with Client screen (.cqwc-*) ─────────────────────────────── */
body.staffdark .cqwc-wrap{display:flex;flex-direction:column;gap:.55rem;padding:.1rem 0;}
body.staffdark .cqwc-head{text-align:center;padding:.2rem 0 0;}
body.staffdark .cqwc-title{font-size:1.35rem;font-weight:800;color:#60a5fa;margin:0 0 .2rem;}
body.staffdark .cqwc-accent-green{color:#4ade80;}
body.staffdark .cqwc-sub{color:#7b93b8;font-size:.8rem;margin:0;}
/* Stage */
body.staffdark .cqwc-stage{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.1rem 0;}
body.staffdark .cqwc-waves{display:flex;align-items:center;gap:2px;height:60px;overflow:hidden;}
body.staffdark .cqwc-bar{width:3px;border-radius:2px;animation:cqwcWave .85s ease-in-out infinite alternate;}
body.staffdark .cqwc-bar-l{background:linear-gradient(to top,#7c3aed,#a78bfa);animation-delay:calc(var(--bi)*58ms);height:calc(18%+(var(--bi)%7)*9%);}
body.staffdark .cqwc-bar-r{background:linear-gradient(to top,#059669,#4ade80);animation-delay:calc(var(--bi)*52ms);height:calc(15%+(var(--bi)%7)*10%);}
@keyframes cqwcWave{to{transform:scaleY(1.9);opacity:.65;}}
/* Avatar ring */
body.staffdark .cqwc-avatar-wrap{position:relative;width:110px;height:130px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
body.staffdark .cqwc-ring-svg{position:absolute;top:0;left:0;width:110px;height:110px;}
body.staffdark .cqwc-ring-track{stroke:rgba(59,130,246,.15);stroke-width:3;}
body.staffdark .cqwc-ring-arc{stroke:url(#cqwcArcGrad);stroke-width:3;stroke-dasharray:326;stroke-dashoffset:0;stroke-linecap:round;animation:cqwcSpin 2.2s linear infinite;transform-origin:50% 50%;}
@keyframes cqwcSpin{to{stroke-dashoffset:-326;}}
body.staffdark .cqwc-avatar-ic{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:86px;height:86px;background:linear-gradient(145deg,#1e3a5f,#0d2140);border-radius:50%;border:2px solid rgba(59,130,246,.25);}
body.staffdark .cqwc-initials{font-size:1.5rem;font-weight:800;color:#60a5fa;letter-spacing:.02em;}
body.staffdark .cqwc-next-badge{margin-top:auto;background:transparent;border:1px solid rgba(74,222,128,.5);color:#4ade80;font-size:.6rem;font-weight:700;letter-spacing:.07em;padding:.15rem .5rem;border-radius:20px;white-space:nowrap;}
/* Info card */
body.staffdark .cqwc-info-card{background:#0b1628;border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.6rem;}
body.staffdark .cqwc-id-row{display:flex;align-items:flex-start;gap:.65rem;flex-wrap:wrap;}
body.staffdark .cqwc-avatar-sm{width:42px;height:42px;background:rgba(59,130,246,.13);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
body.staffdark .cqwc-avatar-sm i{color:#60a5fa;font-size:1rem;}
body.staffdark .cqwc-id-main{flex:1 1 150px;display:flex;flex-direction:column;gap:.25rem;}
body.staffdark .cqwc-name-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
body.staffdark .cqwc-name{font-size:1.1rem;font-weight:800;color:#e2e8f0;}
body.staffdark .cqwc-star{color:#94a3b8;font-size:.82rem;}
body.staffdark .cqwc-id-sub{display:flex;align-items:center;gap:.7rem;font-size:.8rem;flex-wrap:wrap;}
body.staffdark .cqwc-phone{color:#60a5fa;display:flex;align-items:center;gap:.28rem;}
body.staffdark .cqwc-loc{color:#94a3b8;display:flex;align-items:center;gap:.28rem;}
body.staffdark .cqwc-source{text-align:right;flex-shrink:0;margin-left:auto;}
body.staffdark .cqwc-source-lbl{font-size:.68rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;}
body.staffdark .cqwc-source-val{display:flex;align-items:center;gap:.3rem;font-size:.82rem;color:#cbd5e1;margin-top:.15rem;}
body.staffdark .cqwc-source-ic{width:24px;height:24px;background:rgba(37,99,235,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#60a5fa;font-size:.72rem;}
/* Badges */
body.staffdark .cqwc-badge{padding:.16rem .5rem;border-radius:20px;font-size:.7rem;font-weight:700;}
body.staffdark .cqwc-badge-new,.cqwc-badge-inactive{background:rgba(100,116,139,.2);color:#94a3b8;border:1px solid rgba(100,116,139,.3);}
body.staffdark .cqwc-badge-active{background:rgba(52,211,153,.15);color:#6ee7b7;border:1px solid rgba(52,211,153,.3);}
body.staffdark .cqwc-badge-due_soon{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3);}
body.staffdark .cqwc-badge-overdue{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.3);}
body.staffdark .cqwc-badge-churned,.cqwc-badge-cancelled{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2);}
/* Overview + activity */
body.staffdark .cqwc-overview-row{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;}
body.staffdark .cqwc-section-lbl{font-size:.66rem;font-weight:700;letter-spacing:.08em;color:#3b82f6;margin-bottom:.4rem;}
body.staffdark .cqwc-field{display:flex;align-items:center;gap:.45rem;font-size:.78rem;padding:.22rem 0;border-bottom:1px solid rgba(255,255,255,.04);}
body.staffdark .cqwc-field:last-child{border-bottom:none;}
body.staffdark .cqwc-field-k{color:#64748b;min-width:75px;flex-shrink:0;}
body.staffdark .cqwc-field-v{color:#cbd5e1;}
body.staffdark .cqwc-red{color:#fca5a5;}
body.staffdark .cqwc-activity{display:flex;align-items:center;gap:.45rem;font-size:.78rem;padding:.22rem 0;border-bottom:1px solid rgba(255,255,255,.04);}
body.staffdark .cqwc-activity:last-child{border-bottom:none;}
body.staffdark .cqwc-activity i{width:16px;text-align:center;flex-shrink:0;}
body.staffdark .cqwc-activity span:nth-child(2){flex:1;color:#cbd5e1;}
body.staffdark .cqwc-act-time{color:#475569;font-size:.72rem;}
body.staffdark .cqwc-act-phone{color:#4ade80;}
body.staffdark .cqwc-act-wait{color:#fbbf24;}
body.staffdark .cqwc-act-retry{color:#a78bfa;}
/* Stats row */
body.staffdark .cqwc-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;}
body.staffdark .cqwc-stat{background:#0b1628;border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:.55rem .6rem;display:flex;flex-direction:column;gap:.1rem;}
body.staffdark .cqwc-stat-ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-bottom:.15rem;flex-shrink:0;}
body.staffdark .cqwc-sic-blue{background:rgba(59,130,246,.2);color:#60a5fa;}
body.staffdark .cqwc-sic-purple{background:rgba(139,92,246,.2);color:#a78bfa;}
body.staffdark .cqwc-sic-orange{background:rgba(245,158,11,.2);color:#fbbf24;}
body.staffdark .cqwc-sic-green{background:rgba(52,211,153,.2);color:#6ee7b7;}
body.staffdark .cqwc-stat-num{font-size:1.25rem;font-weight:800;color:#e2e8f0;line-height:1.1;}
body.staffdark .cqwc-amber{color:#fbbf24;}
body.staffdark .cqwc-stat-green{color:#4ade80;}
body.staffdark .cqwc-stat-lbl{font-size:.7rem;font-weight:600;color:#94a3b8;}
body.staffdark .cqwc-stat-sub{font-size:.62rem;color:#475569;}
body.staffdark .cqwc-spark{display:block;width:100%;height:22px;margin:.08rem 0;}
body.staffdark .cqwc-stat-bar{height:3px;border-radius:2px;margin-top:2px;}
body.staffdark .cqwc-sb-blue{background:linear-gradient(90deg,#1d4ed8,#60a5fa);}
body.staffdark .cqwc-sb-purple{background:linear-gradient(90deg,#6d28d9,#a78bfa);}
body.staffdark .cqwc-sb-orange{background:linear-gradient(90deg,#b45309,#fbbf24);}
body.staffdark .cqwc-sb-green{background:linear-gradient(90deg,#065f46,#4ade80);}
/* Actions */
body.staffdark .cqwc-actions{display:flex;flex-direction:column;gap:.45rem;}
body.staffdark .cqwc-wrap-btn{align-self:stretch;}
body.staffdark .cqwc-wrap-sub{color:#64748b;font-size:.76rem;margin:0;}
body.staffdark .cqwc-note-label{font-size:.78rem;color:#94a3b8;display:flex;flex-direction:column;gap:.25rem;}
body.staffdark .cqwc-note{background:#0b1628;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#e2e8f0;padding:.45rem .65rem;font-size:.88rem;width:100%;box-sizing:border-box;}
body.staffdark .cqwc-ocs{display:grid;grid-template-columns:repeat(3,1fr);gap:.38rem;}
body.staffdark .cqwc-oc{border:none;border-radius:9px;padding:.55rem .35rem;font-size:.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.28rem;}
body.staffdark .cqwc-oc-done{background:#065f46;color:#4ade80;}
body.staffdark .cqwc-oc-done:hover{background:#047857;}
body.staffdark .cqwc-oc-miss{background:#450a0a;color:#fca5a5;}
body.staffdark .cqwc-oc-miss:hover{background:#7f1d1d;}
body.staffdark .cqwc-oc-sched{background:#1e1b4b;color:#a78bfa;}
body.staffdark .cqwc-oc-sched:hover{background:#312e81;}
body.staffdark .cqwc-resched{display:flex;gap:.45rem;align-items:center;}
body.staffdark .cqwc-resched.hidden{display:none;}

/* ── Workflow Design Screen (.cqaw-*) ─────────────────────────────────────── */
body.staffdark .cqaw-wrap{max-width:1200px;margin:0 auto;padding:20px 24px 40px;}
body.staffdark .cqaw-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
body.staffdark .cqaw-topbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
body.staffdark .cqaw-title{font-size:16px;font-weight:700;color:#f2f6ff;display:flex;align-items:center;gap:8px;}
body.staffdark .cqaw-badge-active{background:#0d3322;color:#34d399;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid #134a33;text-transform:uppercase;letter-spacing:.05em;}
body.staffdark .cqaw-dept-sel{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:9px;padding:6px 10px;font-size:12.5px;}
body.staffdark .cqaw-topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
body.staffdark .cqaw-body{display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:start;}
@media(max-width:1024px){body.staffdark .cqaw-body{grid-template-columns:1fr;}}
body.staffdark .cqaw-main{display:flex;flex-direction:column;gap:16px;}
body.staffdark .cqaw-sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:20px;}
/* Sections */
body.staffdark .cqaw-section{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;overflow:hidden;}
body.staffdark .cqaw-section-head{padding:13px 18px;background:#111f35;border-bottom:1px solid #1c2a44;font-weight:700;font-size:13.5px;color:#dbe6f7;display:flex;align-items:center;gap:8px;justify-content:space-between;}
body.staffdark .cqaw-link{background:none;border:none;color:#4e8ff8;cursor:pointer;font-size:12px;padding:0;display:flex;align-items:center;gap:5px;}
body.staffdark .cqaw-link:hover{color:#93c5fd;}
/* Priority cards */
body.staffdark .cqaw-pri-cards{display:flex;gap:10px;padding:16px;overflow-x:auto;flex-wrap:wrap;}
body.staffdark .cqaw-pri-card{display:flex;align-items:flex-start;gap:10px;background:#111d33;border:1px solid #1c2a44;border-radius:12px;padding:12px 14px;min-width:150px;flex:1;position:relative;}
body.staffdark .cqaw-pri-num{position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;background:#1d3058;color:#93a6c4;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
body.staffdark .cqaw-pri-ico{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#1d3a8a,#4c1d95);color:#a5b4fc;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
body.staffdark .cqaw-pri-info{flex:1;min-width:0;}
body.staffdark .cqaw-pri-label{font-weight:700;font-size:12.5px;color:#dbe6f7;line-height:1.3;}
body.staffdark .cqaw-pri-desc{font-size:11px;color:#5c6f93;margin-top:2px;line-height:1.4;}
body.staffdark .cqaw-pri-bar{display:flex;align-items:center;gap:10px;padding:12px 16px 16px;border-top:1px solid #1c2a44;}
body.staffdark .cqaw-pri-track{flex:1;height:4px;background:#1c2a44;border-radius:2px;position:relative;}
body.staffdark .cqaw-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);top:-3px;transform:translateX(-50%);}
body.staffdark .cqaw-pri-bar-lo{font-size:11px;color:#4e8ff8;font-weight:600;white-space:nowrap;}
body.staffdark .cqaw-pri-bar-hi{font-size:11px;color:#5c6f93;font-weight:600;white-space:nowrap;}
/* Flowchart */
body.staffdark .cqaw-fc-scroll{overflow-x:auto;padding:20px 16px 16px;}
body.staffdark .cqaw-fc-row{display:flex;align-items:center;gap:0;min-width:max-content;}
body.staffdark .cqaw-fc-node{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 14px;background:#111d33;border:1px solid #1c2a44;border-radius:12px;min-width:90px;text-align:center;}
body.staffdark .cqaw-fc-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;background:#1d3058;}
body.staffdark .cqaw-fc-check .cqaw-fc-ico{background:#0a2540;color:#60a5fa;}
body.staffdark .cqaw-fc-load .cqaw-fc-ico{background:#0f2d1f;color:#34d399;}
body.staffdark .cqaw-fc-gate .cqaw-fc-ico{background:#2c1c05;color:#fbbf24;}
body.staffdark .cqaw-fc-dial .cqaw-fc-ico{background:#1d1042;color:#c084fc;}
body.staffdark .cqaw-fc-result .cqaw-fc-ico{background:#0d2e1d;color:#4ade80;}
body.staffdark .cqaw-fc-skip .cqaw-fc-ico{background:#1c1832;color:#a78bfa;}
body.staffdark .cqaw-fc-lbl{font-size:11.5px;font-weight:700;color:#dbe6f7;line-height:1.3;}
body.staffdark .cqaw-fc-sub{font-size:10px;color:#5c6f93;}
body.staffdark .cqaw-fc-arr{color:#3c4f6f;font-size:14px;padding:0 6px;flex-shrink:0;}
body.staffdark .cqaw-fc-appt-wrap{display:flex;align-items:center;gap:0;}
body.staffdark .cqaw-fc-branch{display:flex;flex-direction:column;gap:6px;padding:0 8px;}
body.staffdark .cqaw-fc-branch-up,.cqaw-fc-branch-dn{display:flex;align-items:center;gap:6px;}
body.staffdark .cqaw-fc-yes{font-size:10px;font-weight:700;color:#34d399;background:#0d2e1d;border-radius:4px;padding:1px 5px;}
body.staffdark .cqaw-fc-no{font-size:10px;font-weight:700;color:#f87171;background:#2d1414;border-radius:4px;padding:1px 5px;min-width:24px;}
body.staffdark .cqaw-fc-what-wrap{display:flex;align-items:flex-start;gap:10px;}
body.staffdark .cqaw-fc-outcomes{display:flex;flex-direction:column;gap:4px;padding-left:4px;}
body.staffdark .cqaw-fc-out{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:6px;white-space:nowrap;}
body.staffdark .cqaw-fc-out-0{background:#0d3322;color:#34d399;}
body.staffdark .cqaw-fc-out-1{background:#1a1c2e;color:#9fb0d0;}
body.staffdark .cqaw-fc-out-2{background:#1a1c2e;color:#9fb0d0;}
body.staffdark .cqaw-fc-out-3{background:#1a1c2e;color:#9fb0d0;}
body.staffdark .cqaw-fc-out-4{background:#2d1414;color:#f87171;}
body.staffdark .cqaw-fc-out-5{background:#2d1414;color:#f87171;}
/* Config tables */
body.staffdark .cqaw-tables{display:flex;flex-direction:column;gap:14px;}
body.staffdark .cqaw-table-card{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;overflow:hidden;}
body.staffdark .cqaw-tc-head{padding:12px 16px;background:#111f35;border-bottom:1px solid #1c2a44;font-weight:700;font-size:13px;color:#dbe6f7;display:flex;align-items:center;gap:8px;justify-content:space-between;}
body.staffdark .cqaw-tc-edit{background:none;border:none;color:#4e8ff8;cursor:pointer;font-size:12px;padding:0;}
body.staffdark .cqaw-tc-edit:hover{color:#93c5fd;}
body.staffdark .cqaw-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
body.staffdark .cqaw-tbl thead th{padding:7px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5c6f93;border-bottom:1px solid #1c2a44;}
body.staffdark .cqaw-tbl tbody tr{border-bottom:1px solid #0f1a2e;}
body.staffdark .cqaw-tbl tbody tr:last-child{border-bottom:none;}
body.staffdark .cqaw-tbl td{padding:8px 14px;color:#dbe6f7;vertical-align:middle;}
body.staffdark .cqaw-dim{color:#5c6f93;font-size:12px;}
body.staffdark .cqaw-flag-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;}
body.staffdark .cqaw-flag-ok{background:#0d3322;color:#34d399;}
body.staffdark .cqaw-flag-warn{background:#2c1a0a;color:#fbbf24;}
body.staffdark .cqaw-flag-muted{background:#1a1c2e;color:#9fb0d0;}
body.staffdark .cqaw-flag-danger{background:#2d1414;color:#f87171;}
/* Key Rules */
body.staffdark .cqaw-rules{background:#0a1a2e;border:1px solid #1c2a44;border-radius:14px;padding:16px 18px;}
body.staffdark .cqaw-rules-head{font-weight:700;font-size:13px;color:#dbe6f7;display:flex;align-items:center;gap:8px;margin-bottom:10px;}
body.staffdark .cqaw-rules-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
body.staffdark .cqaw-rules-list li{font-size:12.5px;color:#9fb0d0;line-height:1.5;}
body.staffdark .cqaw-rules-list li b{color:#dbe6f7;}
/* Sidebar panels */
body.staffdark .cqaw-panel{background:#0d1825;border:1px solid #1c2a44;border-radius:14px;overflow:hidden;}
body.staffdark .cqaw-panel-head{padding:11px 15px;background:#111f35;border-bottom:1px solid #1c2a44;font-weight:700;font-size:12.5px;color:#dbe6f7;display:flex;align-items:center;gap:7px;}
body.staffdark .cqaw-panel-body{padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;}
body.staffdark .cqaw-field-lbl{font-size:11.5px;color:#7b8db0;font-weight:600;display:flex;flex-direction:column;gap:5px;}
body.staffdark .cqaw-inp{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:8px;padding:7px 10px;font-size:12.5px;width:100%;box-sizing:border-box;}
body.staffdark .cqaw-sel{background:#111d33;border:1px solid #223353;color:#dbe6f7;border-radius:8px;padding:7px 10px;font-size:12.5px;width:100%;box-sizing:border-box;}
body.staffdark .cqaw-days{display:flex;flex-wrap:wrap;gap:6px;}
body.staffdark .cqaw-day-lbl{display:flex;align-items:center;gap:4px;font-size:11.5px;color:#9fb0d0;cursor:pointer;}
body.staffdark .cqaw-day-chk{accent-color:#3b82f6;}
body.staffdark .cqaw-time-row{display:flex;gap:8px;}
body.staffdark .cqaw-range{width:100%;accent-color:#3b82f6;}
body.staffdark .cqaw-range-val{font-size:12px;color:#4e8ff8;font-weight:700;margin-left:auto;}
body.staffdark .cqaw-tog-lbl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#9fb0d0;cursor:pointer;}
body.staffdark .cqaw-hint{font-size:11.5px;color:#5c6f93;margin:0;}
body.staffdark .cqaw-summary-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
body.staffdark .cqaw-sum-tile{background:#111d33;border:1px solid #1c2a44;border-radius:10px;padding:10px 12px;text-align:center;}
body.staffdark .cqaw-sum-ico{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;margin:0 auto 5px;}
body.staffdark .cqaw-sum-ico.ok{background:#0d3322;color:#34d399;}
body.staffdark .cqaw-sum-ico.warn{background:#2c1a0a;color:#fbbf24;}
body.staffdark .cqaw-sum-label{font-size:10.5px;color:#5c6f93;font-weight:600;}
body.staffdark .cqaw-sum-val{font-size:11px;color:#dbe6f7;font-weight:700;margin-top:2px;}
body.staffdark .cqaw-save-msg{font-size:13px;padding:4px 8px;text-align:right;min-height:22px;}
body.staffdark .cqaw-save-msg.ok{color:#34d399;}
body.staffdark .cqaw-save-msg.err{color:#f87171;}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENT AUTO-DIALING WORKFLOW  (.caqw-*)   Task #781
   Scoped under .caqw-page — never bleeds into the student portal or other
   staff views. Uses the existing staffdark palette (#0d1b2e dark bg).
   ═══════════════════════════════════════════════════════════════════════════ */

.caqw-page{background:#0f1929;min-height:100%;font-family:inherit;color:#dbe6f7;overflow-x:hidden;}

/* ── Header ─────────────────────────────────────────────────────────────── */
.caqw-hdr{background:#0d1b2e;border-bottom:1px solid #1e3050;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:30;}
.caqw-hdr-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.caqw-hdr-title{font-size:16px;font-weight:700;color:#dbe6f7;display:flex;align-items:center;gap:8px;}
.caqw-hdr-title i{color:#00b4d8;}
.caqw-active-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.4px;}
.caqw-active-badge.active{background:rgba(52,211,153,.15);color:#34d399;border:1px solid rgba(52,211,153,.3);}
.caqw-active-badge.active i{color:#34d399;}
.caqw-active-badge.paused{background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.3);}
.caqw-active-badge.paused i{color:#f87171;}
.caqw-hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.caqw-hbtn{background:transparent;border:1px solid #2a4060;color:#8aa0c0;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center;gap:6px;}
.caqw-hbtn:hover:not(:disabled){background:#1e3050;color:#dbe6f7;}
.caqw-hbtn:disabled{opacity:.45;cursor:not-allowed;}
.caqw-hbtn.primary{background:#00b4d8;border-color:#00b4d8;color:#fff;}
.caqw-hbtn.primary:hover{background:#0095b3;}
.caqw-dialer-lbl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.caqw-dialer-lbl input{display:none;}
.caqw-dialer-lbl-txt{font-size:12px;color:#8aa0c0;}

/* toggle switch (shared by header and sidebar panels) */
.caqw-toggle{display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0;}
.caqw-toggle input{display:none;}
.caqw-toggle-track{width:36px;height:20px;background:#2a4060;border-radius:10px;position:relative;transition:background .2s;flex-shrink:0;}
.caqw-toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#8aa0c0;transition:transform .2s,background .2s;}
.caqw-toggle input:checked + .caqw-toggle-track{background:#00b4d8;}
.caqw-toggle input:checked + .caqw-toggle-track::after{transform:translateX(16px);background:#fff;}
.caqw-dialer-lbl .caqw-toggle-track{display:inline-block;}

/* ── Info banner ─────────────────────────────────────────────────────────── */
.caqw-info-banner{background:#0d2540;border:1px solid #1a4a80;color:#90caf9;padding:10px 20px;font-size:13px;display:flex;align-items:center;gap:10px;line-height:1.5;}
.caqw-info-banner i{color:#00b4d8;flex-shrink:0;}

/* ── Priority Order ─────────────────────────────────────────────────────── */
.caqw-priority-sec{background:#0d1b2e;border-bottom:1px solid #1e3050;padding:14px 20px;}
.caqw-priority-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.caqw-priority-title{font-size:13px;font-weight:700;color:#8aa0c0;letter-spacing:.5px;text-transform:uppercase;}
.caqw-priority-title em{font-weight:400;font-style:normal;color:#5c6f93;}
.caqw-edit-order-btn{background:#1e3050;border:1px solid #2a4060;color:#00b4d8;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;}
.caqw-edit-order-btn:hover{background:#243a5e;}
.caqw-priority-cards{display:flex;align-items:center;flex-wrap:nowrap;gap:0;overflow-x:auto;padding-bottom:4px;}
.caqw-cat-card{background:#132030;border:2px solid var(--cat-accent,#2a4060);border-radius:10px;padding:10px 12px;min-width:110px;max-width:130px;text-align:center;flex-shrink:0;position:relative;transition:transform .15s;}
.caqw-cat-card:hover{transform:translateY(-2px);}
.caqw-cat-num{position:absolute;top:6px;left:8px;font-size:11px;font-weight:700;color:var(--cat-accent,#8aa0c0);background:rgba(0,0,0,.3);border-radius:4px;padding:1px 5px;}
.caqw-cat-icon{font-size:20px;color:var(--cat-accent,#8aa0c0);margin:18px 0 6px;}
.caqw-cat-label{font-size:11.5px;font-weight:700;color:#dbe6f7;line-height:1.3;margin-bottom:4px;}
.caqw-cat-sub{font-size:10.5px;color:#5c6f93;line-height:1.3;}
.caqw-cat-arrow{color:#2a4060;font-size:14px;flex-shrink:0;padding:0 4px;}
.caqw-priority-grad{display:flex;align-items:center;gap:12px;margin-top:10px;}
.caqw-grad-hi,.caqw-grad-lo{font-size:11px;color:#5c6f93;white-space:nowrap;}
.caqw-grad-bar{flex:1;height:6px;border-radius:3px;background:linear-gradient(to right,#3b82f6,#8b5cf6,#ef4444,#f59e0b,#6366f1,#10b981,#6b7280);}

/* ── Body layout ─────────────────────────────────────────────────────────── */
.caqw-body{display:flex;gap:0;align-items:flex-start;padding:0;}
.caqw-main{flex:1;min-width:0;padding:16px 20px;overflow-x:auto;}
.caqw-sidebar{width:300px;min-width:260px;max-width:320px;flex-shrink:0;background:#0a1520;border-left:1px solid #1e3050;padding:12px;display:flex;flex-direction:column;gap:12px;min-height:calc(100vh - 160px);}

/* ── Flowchart ──────────────────────────────────────────────────────────── */
.caqw-flow-wrap{background:#0d2540;border:1px solid #1a4a80;border-radius:10px;margin-bottom:14px;overflow:hidden;}
.caqw-flow-header{background:#0a1a30;padding:10px 16px;font-size:12px;font-weight:700;color:#8aa0c0;letter-spacing:.6px;display:flex;align-items:center;gap:12px;}
.caqw-flow-badge{background:rgba(0,180,216,.15);border:1px solid rgba(0,180,216,.3);color:#00b4d8;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;}
.caqw-flow-body{padding:14px 16px;display:flex;gap:16px;flex-wrap:wrap;}
.caqw-flow-steps{display:flex;align-items:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:0;flex:1;}
.caqw-flow-step-wrap{display:flex;align-items:center;flex-shrink:0;position:relative;}
.caqw-flow-step{background:#132030;border:2px solid #1e3050;border-radius:8px;padding:10px 10px 8px;width:110px;font-size:11px;text-align:center;flex-shrink:0;}
.caqw-flow-step.caqw-flow-diamond{border-color:#f59e0b;background:#1a1a0a;}
.caqw-flow-step.caqw-flow-skip{border-color:#2a4060;background:#111d2b;width:100px;margin-top:8px;font-size:10.5px;}
.caqw-flow-num{font-size:13px;font-weight:800;color:#00b4d8;margin-bottom:4px;}
.caqw-flow-step.caqw-flow-diamond .caqw-flow-num{color:#f59e0b;}
.caqw-flow-title{font-size:10.5px;font-weight:700;color:#dbe6f7;line-height:1.3;margin-bottom:4px;}
.caqw-flow-sub{font-size:9.5px;color:#5c6f93;line-height:1.35;}
.caqw-flow-arrow{color:#2a4060;padding:0 4px;font-size:14px;flex-shrink:0;}
.caqw-flow-yn{display:flex;justify-content:space-between;margin-top:6px;}
.caqw-yn{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;}
.caqw-yn.yes{background:rgba(52,211,153,.15);color:#34d399;}
.caqw-yn.no{background:rgba(248,113,113,.15);color:#f87171;}
.caqw-flow-skip-wrap{display:flex;flex-direction:column;align-items:center;margin-left:4px;}
.caqw-flow-skip-connector{width:2px;height:20px;background:#2a4060;margin-bottom:0;}
/* Results column */
.caqw-flow-results{display:flex;flex-direction:column;gap:6px;min-width:220px;}
.caqw-result-chip{display:flex;align-items:flex-start;gap:10px;background:#132030;border-radius:7px;padding:8px 10px;border-left:3px solid #2a4060;font-size:11.5px;line-height:1.35;}
.caqw-result-chip i{flex-shrink:0;margin-top:2px;font-size:14px;}
.caqw-result-chip strong{display:block;font-size:11.5px;color:#dbe6f7;}
.caqw-result-body{font-size:10.5px;color:#5c6f93;margin-top:2px;}
.caqw-result-green{border-left-color:#34d399;} .caqw-result-green i{color:#34d399;}
.caqw-result-yellow{border-left-color:#f59e0b;} .caqw-result-yellow i{color:#f59e0b;}
.caqw-result-red{border-left-color:#f87171;} .caqw-result-red i{color:#f87171;}

/* ── Queue note ─────────────────────────────────────────────────────────── */
.caqw-queue-note{background:#0d2030;border:1px solid #1e4060;border-radius:8px;padding:10px 14px;font-size:12.5px;color:#8aa0c0;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;line-height:1.5;}
.caqw-queue-note i{color:#00b4d8;flex-shrink:0;margin-top:2px;}

/* ── Bottom panels grid ─────────────────────────────────────────────────── */
.caqw-panels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;}
.caqw-panel{background:#0d1b2e;border:1px solid #1e3050;border-radius:10px;display:flex;flex-direction:column;overflow:hidden;}
.caqw-panel-head{background:#0a1520;padding:10px 14px;display:flex;align-items:baseline;gap:8px;border-bottom:1px solid #1e3050;}
.caqw-panel-head>span{font-size:12px;font-weight:700;color:#8aa0c0;letter-spacing:.5px;text-transform:uppercase;}
.caqw-panel-head>em{font-size:11px;color:#3d5070;font-style:normal;}
.caqw-panel-content{flex:1;padding:12px;overflow-x:auto;}
.caqw-panel-foot{padding:8px 12px;border-top:1px solid #1a2f4a;display:flex;justify-content:flex-end;}
.caqw-foot-btn{background:#1a2f4a;border:1px solid #2a4060;color:#8aa0c0;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s;}
.caqw-foot-btn:hover{background:#243a5e;color:#dbe6f7;}

/* Tables inside panels */
.caqw-table{width:100%;border-collapse:collapse;font-size:12px;}
.caqw-table th{background:#0a1520;color:#5c6f93;font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:6px 10px;text-align:left;border-bottom:1px solid #1e3050;}
.caqw-table td{padding:7px 10px;border-bottom:1px solid #11253a;color:#c0d0e8;vertical-align:middle;}
.caqw-table tr:last-child td{border-bottom:none;}
.caqw-table tr:hover td{background:rgba(255,255,255,.03);}
.caqw-tc{text-align:center;}
.caqw-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle;}
.caqw-action-pill{display:inline-block;background:#132030;border:1px solid #1e3050;border-radius:12px;padding:2px 9px;font-size:11px;color:#8aa0c0;}
.caqw-icon-btn{background:transparent;border:none;color:#3d5070;cursor:pointer;padding:3px 5px;border-radius:4px;transition:color .15s,background .15s;}
.caqw-icon-btn:hover{color:#00b4d8;background:#0d2030;}

/* Win-Back flow diagram */
.caqw-wb-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0;}
.caqw-wb-stage{background:#132030;border:1px solid #1e3050;border-radius:8px;padding:10px 14px;text-align:center;min-width:90px;}
.caqw-wb-days-stage{border-color:#00b4d8;background:#0d2030;}
.caqw-wb-icon{font-size:18px;color:#8aa0c0;display:block;margin-bottom:4px;}
.caqw-wb-lbl{font-size:11.5px;color:#8aa0c0;line-height:1.35;}
.caqw-wb-note{font-size:10px;color:#3d5070;}
.caqw-wb-days-val{font-size:22px;font-weight:700;color:#00b4d8;margin-bottom:2px;}
.caqw-wb-arr{color:#2a4060;font-size:14px;}

/* Key Rules list */
.caqw-rules-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;}
.caqw-rules-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#8aa0c0;line-height:1.4;}
.caqw-rules-list li i{color:#34d399;flex-shrink:0;margin-top:2px;}

/* Workflow Summary */
.caqw-sum-cards{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.caqw-sum-card{background:#132030;border:1px solid #1e3050;border-radius:8px;padding:10px 12px;text-align:center;flex:1;min-width:80px;}
.caqw-sum-icon{font-size:20px;color:#00b4d8;margin-bottom:6px;display:block;}
.caqw-sum-label{font-size:11px;font-weight:700;color:#dbe6f7;line-height:1.3;}
.caqw-sum-sub{font-size:10px;color:#5c6f93;line-height:1.3;margin-top:3px;}
.caqw-sum-stats{display:flex;gap:12px;flex-wrap:wrap;}
.caqw-sum-stat{display:flex;flex-direction:column;align-items:center;min-width:60px;}
.caqw-sum-stat-val{font-size:18px;font-weight:700;color:#dbe6f7;}
.caqw-sum-stat-key{font-size:10.5px;color:#5c6f93;margin-top:2px;}
.caqw-green{color:#34d399 !important;}

/* ── Right sidebar panels ───────────────────────────────────────────────── */
.caqw-spanel{background:#0d1b2e;border:1px solid #1e3050;border-radius:10px;overflow:hidden;}
.caqw-spanel-head{background:#0a1520;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1e3050;gap:8px;}
.caqw-spanel-head>span{font-size:11.5px;font-weight:700;color:#8aa0c0;letter-spacing:.4px;text-transform:uppercase;flex:1;}
.caqw-spanel-head>em{font-size:10.5px;color:#3d5070;font-style:normal;text-transform:uppercase;}
.caqw-spanel-body{padding:10px 12px;display:flex;flex-direction:column;gap:9px;}
.caqw-field-row{display:flex;flex-direction:column;gap:4px;}
.caqw-flabel{font-size:11px;color:#5c6f93;font-weight:600;}
/* Task #793: seconds-based number inputs */
.caqw-num-row{display:flex;align-items:center;gap:6px;}
.caqw-num-input{background:#0a1520;border:1px solid #2a4060;color:#c0d0e8;padding:5px 8px;border-radius:6px;font-size:12.5px;width:80px;outline:none;text-align:right;}
.caqw-num-input:focus{border-color:#00b4d8;}
.caqw-unit{font-size:11px;color:#5c6f93;}
/* Emergency stop header button */
.caqw-hbtn-stop{background:transparent;border-color:#6b2020;color:#e05060;}
.caqw-hbtn-stop:hover:not(:disabled){background:#3a1010;color:#ff7080;border-color:#e05060;}
/* Last saved indicator */
.caqw-last-saved{font-size:11px;color:#3d5070;margin-right:4px;font-style:italic;}
/* Dialpad Connection status panel */
.caqw-dp-status-row,.caqw-dp-info-row{display:flex;align-items:center;gap:6px;font-size:12px;color:#8aa0c0;padding:3px 0;border-bottom:1px solid #0d1e30;}
.caqw-dp-status-row:last-of-type,.caqw-dp-info-row:last-of-type{border-bottom:none;}
.caqw-dp-label{flex:1;}
.caqw-dp-info-row{justify-content:space-between;color:#5c6f93;}
.caqw-dp-info-row .caqw-flabel{min-width:130px;}
.caqw-dp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.caqw-dot-green{background:#22c55e;box-shadow:0 0 4px #22c55e80;}
.caqw-dot-amber{background:#f59e0b;box-shadow:0 0 4px #f59e0b80;}
.caqw-dot-red{background:#ef4444;box-shadow:0 0 4px #ef444480;}
.caqw-dp-btns{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.caqw-dp-btn{background:#112030;border:1px solid #2a4060;color:#8aa0c0;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;}
.caqw-dp-btn:hover:not(:disabled){background:#1e3050;color:#dbe6f7;}
.caqw-dp-btn:disabled{opacity:.4;cursor:not-allowed;}
.caqw-dp-err{padding:10px;font-size:12px;color:#e05060;text-align:center;}
/* Agent queue section */
.caqw-agent-queue-section{background:#060e18;border:1px solid #1e3050;border-radius:8px;margin:12px 16px;overflow:hidden;}
.caqw-aq-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#0a1520;border-bottom:1px solid #1e3050;}
.caqw-aq-head>span:first-child{font-size:11.5px;font-weight:700;color:#8aa0c0;letter-spacing:.4px;text-transform:uppercase;flex:1;}
.caqw-aq-status{font-size:11px;border-radius:4px;padding:2px 8px;}
.caqw-aq-status.ok{background:#0a2a18;color:#22c55e;}
.caqw-aq-status.blocked{background:#2a0d0d;color:#e05060;}
.caqw-aq-refresh-btn{background:transparent;border:none;color:#5c6f93;cursor:pointer;padding:2px 6px;border-radius:4px;font-size:13px;}
.caqw-aq-refresh-btn:hover{color:#8aa0c0;background:#1e3050;}
.caqw-aq-loading,.caqw-aq-empty,.caqw-aq-blocked,.caqw-aq-err{padding:16px;text-align:center;font-size:12px;color:#5c6f93;}
.caqw-aq-loading{display:flex;align-items:center;justify-content:center;gap:8px;}
.caqw-aq-empty{color:#22c55e;}
.caqw-aq-blocked,.caqw-aq-err{color:#e05060;}
.caqw-aq-list{display:flex;flex-direction:column;}
.caqw-aq-row{display:grid;grid-template-columns:24px 8px 1fr auto auto auto;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #0d1e30;transition:background .12s;}
.caqw-aq-row:hover{background:#0d1e30;}
.caqw-aq-row:last-child{border-bottom:none;}
.caqw-aq-num{font-size:11px;color:#3d5070;font-weight:700;text-align:center;}
.caqw-aq-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.caqw-aq-name{font-size:12.5px;color:#c0d0e8;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.caqw-aq-cat{font-size:11px;color:#5c6f93;white-space:nowrap;}
.caqw-aq-appt{font-size:11px;color:#f59e0b;white-space:nowrap;}
.caqw-aq-dial-btn{background:#00b4d8;border:none;color:#fff;padding:4px 10px;border-radius:5px;font-size:11.5px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background .15s;white-space:nowrap;}
.caqw-aq-dial-btn:hover{background:#0095b3;}
.caqw-aq-more{padding:8px 12px;font-size:11px;color:#3d5070;text-align:center;border-top:1px solid #0d1e30;}
.caqw-sel{background:#0a1520;border:1px solid #2a4060;color:#c0d0e8;padding:6px 8px;border-radius:6px;font-size:12px;width:100%;outline:none;cursor:pointer;}
.caqw-sel:focus{border-color:#00b4d8;}
.caqw-sel:disabled{opacity:.4;cursor:not-allowed;}
.caqw-days-row{display:flex;gap:5px;flex-wrap:wrap;}
.caqw-day-lbl{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#8aa0c0;cursor:pointer;user-select:none;}
.caqw-day-lbl input{width:13px;height:13px;accent-color:#00b4d8;}
.caqw-time-row{flex-direction:row;gap:10px;}
.caqw-time-row>div{flex:1;}
.caqw-time{background:#0a1520;border:1px solid #2a4060;color:#c0d0e8;padding:6px 8px;border-radius:6px;font-size:12px;width:100%;outline:none;box-sizing:border-box;}
.caqw-time:focus{border-color:#00b4d8;}
.caqw-time:disabled{opacity:.4;}
.caqw-panel-btn{background:#00b4d8;border:none;color:#fff;padding:8px 14px;border-radius:6px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;width:100%;justify-content:center;}
.caqw-panel-btn:hover:not(:disabled){background:#0095b3;}
.caqw-panel-btn:disabled{opacity:.4;cursor:not-allowed;}
.caqw-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#8aa0c0;}

/* Sliders */
.caqw-slider-grp{display:flex;flex-direction:column;gap:4px;}
.caqw-slider-lbl{font-size:11.5px;color:#8aa0c0;display:flex;justify-content:space-between;align-items:center;}
.caqw-sval{font-size:13px;font-weight:700;color:#00b4d8;}
.caqw-slider{width:100%;accent-color:#00b4d8;cursor:pointer;}
.caqw-slider:disabled{opacity:.4;}
.caqw-slider-ends{display:flex;justify-content:space-between;font-size:10.5px;color:#3d5070;}

/* Win-Back stepper */
.caqw-stepper{display:flex;align-items:center;gap:6px;}
.caqw-step-btn{background:#1a2f4a;border:1px solid #2a4060;color:#8aa0c0;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.caqw-step-btn:hover:not(:disabled){background:#243a5e;color:#dbe6f7;}
.caqw-step-btn:disabled{opacity:.4;cursor:not-allowed;}
.caqw-step-input{background:#0a1520;border:1px solid #2a4060;color:#dbe6f7;width:60px;text-align:center;padding:5px 6px;border-radius:6px;font-size:13px;outline:none;}
.caqw-step-input:disabled{opacity:.4;}
.caqw-step-add{background:#0d2030;border:1px solid #00b4d8;color:#00b4d8;padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s;}
.caqw-step-add:hover:not(:disabled){background:#132030;}
.caqw-step-add:disabled{opacity:.4;cursor:not-allowed;}
.caqw-text-input{background:#0a1520;border:1px solid #2a4060;color:#c0d0e8;padding:6px 8px;border-radius:6px;font-size:12px;width:100%;outline:none;box-sizing:border-box;}
.caqw-text-input:focus{border-color:#00b4d8;}
.caqw-text-input:disabled{opacity:.4;}

/* ── Edit Order modal list ───────────────────────────────────────────────── */
.caqw-order-list{display:flex;flex-direction:column;gap:6px;}
.caqw-order-item{display:flex;align-items:center;gap:10px;background:#0a1520;border:1px solid #1e3050;border-radius:7px;padding:9px 12px;cursor:grab;transition:background .15s;font-size:13px;color:#c0d0e8;}
.caqw-order-item:active{cursor:grabbing;}
.caqw-order-item.caqw-dragging{opacity:.5;background:#0d2030;}
.caqw-grip{color:#3d5070;font-size:14px;}
.caqw-order-num{font-size:12px;font-weight:700;color:#5c6f93;min-width:18px;text-align:center;}

/* ── Modal tables ───────────────────────────────────────────────────────── */
.caqw-modal-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.caqw-modal-tbl th{background:#0a1520;color:#5c6f93;font-size:11px;font-weight:700;padding:7px 10px;text-align:left;border-bottom:1px solid #1e3050;}
.caqw-modal-tbl td{padding:7px 8px;border-bottom:1px solid #0d2030;vertical-align:middle;}
.caqw-modal-tbl tr:last-child td{border-bottom:none;}
.caqw-modal-tbl tr.caqw-focus-row td{background:#0d2a18;border-color:#34d399;}
.caqw-minput{background:#0a1520;border:1px solid #2a4060;color:#c0d0e8;padding:5px 7px;border-radius:5px;font-size:12px;outline:none;}
.caqw-minput:focus{border-color:#00b4d8;}
.caqw-minput-wide{width:180px;}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1100px){
    .caqw-body{flex-direction:column;}
    .caqw-sidebar{width:100%;max-width:100%;border-left:none;border-top:1px solid #1e3050;min-height:auto;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
}
@media(max-width:700px){
    .caqw-hdr{padding:10px 12px;}
    .caqw-hdr-title{font-size:13px;}
    .caqw-priority-cards{gap:0;}
    .caqw-main{padding:12px;}
    .caqw-flow-body{flex-direction:column;}
    .caqw-flow-results{min-width:0;width:100%;}
    .caqw-panels-grid{grid-template-columns:1fr;}
    .caqw-sidebar{grid-template-columns:1fr;}
}

/* ── Service Request dialog — dept picker toggle buttons (legacy) ─────────── */
.sr-dept-btn {
    flex: 1; padding: .65rem 1rem; border-radius: 9px;
    border: 1.5px solid var(--border, #dee2e8); background: var(--surface, #f8fafc);
    font-size: .91rem; font-weight: 600; color: var(--text-body, #344054);
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
}
.sr-dept-btn:hover { border-color: #10b981; background: #f0fdf4; color: #059669; }
.sr-dept-btn.sr-dept-active { border-color: #10b981; background: #f0fdf4; color: #047857; font-weight: 700; }

/* ── Service Request dialog — radio-card dept picker ─────────────────────── */
.srd-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .25rem; }
.srd-card {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem .85rem; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e2e8f0; background: #f8fafc;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.srd-card:hover { border-color: #94a3b8; background: #f1f5f9; }
.srd-card.srd-card-active { border-color: #10b981; background: #f0fdf4; }
.srd-badge {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem;
}
.srd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.srd-name { font-size: .93rem; font-weight: 700; color: #0f1f3a; }
.srd-desc { font-size: .8rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srd-radio { width: 17px; height: 17px; flex-shrink: 0; accent-color: #10b981; cursor: pointer; }
.staffdark .srd-card { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.staffdark .srd-card:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.staffdark .srd-card.srd-card-active { border-color: #10b981; background: rgba(16,185,129,.1); }
.staffdark .srd-name { color: #e2e8f0; }
.staffdark .srd-desc { color: #94a3b8; }

/* ── Inactivity auto-logout warning overlay (Task #827) ─────────────────────── */
/* Full-screen dark scrim rendered above everything when the idle timer nears     */
/* its limit. Staff can dismiss it to reset the timer; at zero, auto clock-out.  */
.ia-warn-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(5, 15, 30, .82);
    display: flex; align-items: center; justify-content: center;
    animation: iaFadeIn .22s ease;
}
@keyframes iaFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ia-warn-card {
    background: #0e1f38; border: 1.5px solid rgba(239, 68, 68, .45);
    border-radius: 18px; padding: 2.2rem 2.4rem 1.9rem;
    max-width: 440px; width: 92%; text-align: center;
    box-shadow: 0 8px 48px rgba(0,0,0,.55);
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.ia-warn-ico {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(239, 68, 68, .18); border: 2px solid rgba(239, 68, 68, .4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.85rem; color: #ef4444;
    animation: iaPulse 2s infinite;
}
@keyframes iaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
    50%       { box-shadow: 0 0 0 10px rgba(239,68,68,.0); }
}
.ia-warn-title {
    font-size: 1.4rem; font-weight: 700; color: #f1f5f9; letter-spacing: -.02em;
}
.ia-warn-body {
    font-size: .97rem; line-height: 1.6; color: #94a3b8;
}
.ia-warn-body b { color: #ef4444; }
.ia-warn-btn {
    margin-top: .5rem; padding: .75rem 1.6rem; font-size: .97rem; font-weight: 700;
    border-radius: 10px; cursor: pointer; width: 100%;
}
@media (max-width: 480px) {
    .ia-warn-card { padding: 1.6rem 1.3rem 1.5rem; }
    .ia-warn-title { font-size: 1.2rem; }
}

/* ── Agent Earnings (cycle-aware commission screen) ─────────────────────── */
body.staffdark .agc-cyclebar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
body.staffdark .agc-cycle-info { text-align:right; }
body.staffdark .agc-cycle-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; }
body.staffdark .agc-cycle-dates { font-weight:700; font-size:1.05rem; color:#e2e8f0; }
body.staffdark .agc-cycle-payout { font-size:.85rem; color:#94a3b8; }
body.staffdark .agc-cycle-payout b { color:#34d399; }
body.staffdark .agc-cycle-sel { background:#0f172a; color:#e2e8f0; border:1px solid #334155; border-radius:8px; padding:8px 10px; font-size:.88rem; }
body.staffdark .agc-banner { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.35); color:#fde68a; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:.9rem; display:flex; gap:10px; align-items:center; }
body.staffdark .agc-kpis { margin-bottom:14px; }
body.staffdark .agc-kpi-sub { font-size:.76rem; color:#94a3b8; margin-top:4px; }
body.staffdark .dash-stat.tone-violet .dash-stat-ic { background:rgba(167,139,250,.15); color:#a78bfa; }
body.staffdark .agc-tl { display:flex; align-items:flex-start; gap:0; padding:14px 4px 4px; overflow-x:auto; }
body.staffdark .agc-tl-step { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:86px; text-align:center; }
body.staffdark .agc-tl-dot { width:26px; height:26px; border-radius:50%; border:2px solid #334155; background:#0f172a; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#34d399; }
body.staffdark .agc-tl-step.done .agc-tl-dot { border-color:#34d399; background:rgba(52,211,153,.15); }
body.staffdark .agc-tl-step.now .agc-tl-dot { border-color:#34d399; box-shadow:0 0 0 4px rgba(52,211,153,.18); background:#34d399; }
body.staffdark .agc-tl-lbl { font-size:.75rem; color:#94a3b8; max-width:96px; }
body.staffdark .agc-tl-step.now .agc-tl-lbl { color:#e2e8f0; font-weight:600; }
body.staffdark .agc-tl-line { flex:1; height:2px; background:#334155; margin-top:12px; min-width:18px; }
body.staffdark .agc-tl-line.done { background:#34d399; }
body.staffdark .agc-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0; }
body.staffdark .agc-glance-row { display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid rgba(148,163,184,.08); font-size:.92rem; color:#cbd5e1; }
body.staffdark .agc-glance-row b { margin-left:auto; color:#e2e8f0; }
body.staffdark .agc-glance-total { border-bottom:none; font-weight:600; color:#e2e8f0; }
body.staffdark .agc-glance-ic { width:20px; text-align:center; }
body.staffdark .agc-payout-card { text-align:center; }
body.staffdark .agc-payout-amt { font-size:2.1rem; font-weight:800; color:#34d399; margin-top:8px; }
body.staffdark .agc-payout-date { color:#e2e8f0; margin:4px 0; font-size:.95rem; }
body.staffdark .agc-payout-sub { color:#94a3b8; font-size:.87rem; }
body.staffdark .agc-payout-disc { color:#64748b; font-size:.78rem; margin-top:10px; line-height:1.4; }
body.staffdark .agc-charts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:start; }
body.staffdark .agc-donut-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
body.staffdark .agc-donut { position:relative; width:170px; height:170px; margin:0 auto; }
body.staffdark .agc-donut-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
body.staffdark .agc-donut-num { font-weight:800; font-size:1.15rem; color:#e2e8f0; }
body.staffdark .agc-donut-lbl { font-size:.72rem; color:#94a3b8; }
body.staffdark .agc-legend { display:flex; flex-direction:column; gap:6px; flex:1; min-width:150px; }
body.staffdark .agc-leg { display:flex; align-items:center; gap:8px; font-size:.84rem; color:#cbd5e1; }
body.staffdark .agc-leg b { margin-left:auto; color:#e2e8f0; }
body.staffdark .agc-dot { width:10px; height:10px; border-radius:50%; flex:none; }
body.staffdark .agc-linesvg { width:100%; height:130px; display:block; }
body.staffdark .agc-line-lbls { display:flex; justify-content:space-between; font-size:.75rem; color:#64748b; margin-top:4px; }
body.staffdark .agc-line-empty { text-align:center; color:#64748b; padding:26px 10px; font-size:.88rem; }
body.staffdark .agc-line-empty i { font-size:1.6rem; display:block; margin-bottom:8px; color:#334155; }
body.staffdark .agc-side { display:flex; flex-direction:column; gap:14px; }
body.staffdark .agc-rate-card { text-align:center; }
body.staffdark .agc-rate-val { font-size:1.9rem; font-weight:800; color:#60a5fa; margin-top:6px; }
body.staffdark .agc-rate-sub { color:#94a3b8; font-size:.85rem; }
body.staffdark .agc-remind-list { margin:6px 0 0; padding-left:18px; color:#cbd5e1; font-size:.86rem; display:flex; flex-direction:column; gap:8px; line-height:1.45; }
body.staffdark .agc-remind-list b { color:#fde68a; }
body.staffdark .agc-search { background:#0f172a; color:#e2e8f0; border:1px solid #334155; border-radius:8px; padding:7px 10px; font-size:.85rem; width:190px; }
body.staffdark .agc-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 12px; }
body.staffdark .agc-tab { background:#0f172a; border:1px solid #334155; color:#94a3b8; border-radius:999px; padding:6px 13px; font-size:.83rem; cursor:pointer; }
body.staffdark .agc-tab.active { background:rgba(52,211,153,.14); border-color:#34d399; color:#a7f3d0; }
body.staffdark .agc-tab-n { opacity:.7; font-size:.76rem; margin-left:3px; }
body.staffdark .agc-table th.agc-sort { cursor:pointer; user-select:none; white-space:nowrap; }
body.staffdark .agc-pager { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.85rem; }
@media (max-width: 980px) {
    body.staffdark .agc-charts { grid-template-columns:1fr; }
    body.staffdark .agc-2col { grid-template-columns:1fr; }
    body.staffdark .agc-cycle-info { text-align:left; }
}

/* ── Timesheets sub-tabs + Commission tab (admin) ───────────────────────── */
body.staffdark .ts-subtabs { display:flex; gap:6px; padding:0 24px; margin-top:-6px; }
body.staffdark .ts-subtab { background:transparent; border:none; border-bottom:2px solid transparent; color:#94a3b8; padding:9px 14px; font-size:.9rem; cursor:pointer; display:flex; align-items:center; gap:7px; }
body.staffdark .ts-subtab.active { color:#34d399; border-bottom-color:#34d399; font-weight:600; }
body.staffdark .ts-subtab:hover { color:#e2e8f0; }
body.staffdark .cmt-modal-backdrop, body.staffdark .cmt-drawer-backdrop { position:fixed; inset:0; background:rgba(2,6,23,.66); z-index:1200; display:flex; align-items:center; justify-content:center; }
body.staffdark .cmt-modal { background:#0f172a; border:1px solid #334155; border-radius:14px; padding:22px 24px; width:min(440px, 92vw); color:#e2e8f0; }
body.staffdark .cmt-modal h3 { margin:0 0 10px; font-size:1.05rem; display:flex; align-items:center; gap:9px; }
body.staffdark .cmt-modal p { color:#cbd5e1; font-size:.9rem; line-height:1.5; }
body.staffdark .cmt-modal-stats { display:flex; gap:12px; margin:12px 0; }
body.staffdark .cmt-modal-stats > div { flex:1; background:rgba(148,163,184,.07); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
body.staffdark .cmt-modal-stats span { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; }
body.staffdark .cmt-modal-stats b { font-size:1.05rem; color:#34d399; }
body.staffdark .cmt-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
body.staffdark .cmt-drawer-backdrop { justify-content:flex-end; align-items:stretch; }
body.staffdark .cmt-drawer { background:#0f172a; border-left:1px solid #334155; width:min(560px, 96vw); height:100%; overflow-y:auto; display:flex; flex-direction:column; }
body.staffdark .cmt-drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:18px 20px 12px; border-bottom:1px solid rgba(148,163,184,.12); position:sticky; top:0; background:#0f172a; z-index:1; }
body.staffdark .cmt-drawer-head h3 { margin:0 0 3px; color:#e2e8f0; font-size:1.05rem; }
body.staffdark .cmt-drawer-body { padding:14px 20px 24px; display:flex; flex-direction:column; gap:12px; }
body.staffdark .cmt-entry { border:1px solid rgba(148,163,184,.14); border-radius:11px; padding:12px 14px; background:rgba(148,163,184,.04); }
body.staffdark .cmt-entry-proj { border-style:dashed; opacity:.85; }
body.staffdark .cmt-entry-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; color:#e2e8f0; }
body.staffdark .cmt-entry-meta { font-size:.83rem; margin-bottom:8px; line-height:1.45; }
body.staffdark .cmt-entry-meta b { color:#34d399; }
body.staffdark .cmt-entry-edit { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
body.staffdark .cmt-entry-edit select, body.staffdark .cmt-entry-edit input { background:#0b1222; color:#e2e8f0; border:1px solid #334155; border-radius:7px; padding:6px 8px; font-size:.82rem; }
body.staffdark .cmt-entry-edit .cmt-e-amt { width:92px; }
body.staffdark .cmt-entry-edit .cmt-e-note { flex:1; min-width:130px; }

/* ── Department action bar atop inbox lead chats (Task #851) ─────────────── */
.staffdark .ibx-deptbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .45rem .9rem; border-bottom: 1px solid rgba(148,163,184,.14); background: rgba(30,41,59,.55); flex: 0 0 auto; }
.staffdark .ibx-deptbar-lbl { font-size: .7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .35rem; margin-right: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.staffdark .ibx-dept-act { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; color: #cbd5e1; background: rgba(51,65,85,.55); border: 1px solid rgba(148,163,184,.22); border-radius: 16px; padding: .28rem .7rem; cursor: pointer; transition: background .15s, border-color .15s; }
.staffdark .ibx-dept-act:hover:not(:disabled) { background: rgba(71,85,105,.6); border-color: rgba(148,163,184,.4); }
.staffdark .ibx-dept-act:disabled { opacity: .45; cursor: not-allowed; }
.staffdark .ibx-dept-act.ok { color: #6ee7b7; border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); }
.staffdark .ibx-dept-act.ok:hover:not(:disabled) { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.55); }
.staffdark .ibx-dept-act.bad { color: #fca5a5; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.1); }
.staffdark .ibx-dept-act.bad:hover:not(:disabled) { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.55); }
/* kind='action' system bubbles (dept action trail) */
.staffdark .ibx-event.ibx-sys.ibx-evt-act { font-size: .69rem; padding: .18rem .65rem; border: 1px solid rgba(148,163,184,.25); border-radius: 20px; background: rgba(148,163,184,.08); gap: .35rem; }
.staffdark .ibx-event.ibx-evt-act .ibx-event-ic { background: none; width: 14px; height: 14px; font-size: .58rem; color: #cbd5e1; }
.staffdark .ibx-event.ibx-evt-act .ibx-event-title { color: #e2e8f0; font-size: .69rem; font-weight: 600; gap: .3rem; }
.staffdark .ibx-event.ibx-evt-act.ibx-act-ok { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.08); }
.staffdark .ibx-event.ibx-evt-act.ibx-act-ok .ibx-event-ic { color: #6ee7b7; }
.staffdark .ibx-event.ibx-evt-act.ibx-act-bad { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }
.staffdark .ibx-event.ibx-evt-act.ibx-act-bad .ibx-event-ic { color: #fca5a5; }
.staffdark .ibx-event.ibx-evt-act.ibx-act-warn { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); }
.staffdark .ibx-event.ibx-evt-act.ibx-act-warn .ibx-event-ic { color: #fcd34d; }

/* ── Call Queue Dept Admin Panel (Task #905) ─────────────────────────────── */
body.staffdark .cqd-wrap { display:flex; flex-direction:column; gap:0; min-height:100%; background:#0b1220; }
body.staffdark .cqd-head { display:flex; align-items:center; gap:14px; padding:20px 26px 16px; border-bottom:1px solid rgba(148,163,184,.12); background:#0f172a; flex-shrink:0; }
body.staffdark .cqd-head-ico { width:40px; height:40px; border-radius:10px; background:rgba(59,130,246,.18); display:flex; align-items:center; justify-content:center; color:#60a5fa; font-size:1.1rem; flex-shrink:0; }
body.staffdark .cqd-head-txt { flex:1; min-width:0; }
body.staffdark .cqd-head-txt h2 { margin:0 0 2px; font-size:1.15rem; color:#e2e8f0; font-weight:700; }
body.staffdark .cqd-head-sub { font-size:.82rem; color:#64748b; }
body.staffdark .cqd-close { background:none; border:none; color:#64748b; font-size:1.2rem; cursor:pointer; padding:6px; border-radius:7px; }
body.staffdark .cqd-close:hover { color:#e2e8f0; background:rgba(148,163,184,.08); }
/* Dept switcher tabs */
body.staffdark .cqd-tabs { display:flex; gap:6px; padding:12px 26px 0; border-bottom:1px solid rgba(148,163,184,.1); background:#0f172a; flex-shrink:0; overflow-x:auto; }
body.staffdark .cqd-tab { background:none; border:none; border-bottom:2px solid transparent; color:#64748b; padding:8px 14px; font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:color .15s; }
body.staffdark .cqd-tab.active { color:#60a5fa; border-bottom-color:#60a5fa; }
body.staffdark .cqd-tab:hover:not(.active) { color:#94a3b8; }
/* Main body */
body.staffdark .cqd-body { display:grid; grid-template-columns:1fr 260px; gap:0; flex:1; min-height:0; overflow:auto; }
body.staffdark .cqd-main { padding:22px 24px; display:flex; flex-direction:column; gap:18px; border-right:1px solid rgba(148,163,184,.09); overflow-y:auto; }
body.staffdark .cqd-side { padding:18px 16px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; }
/* Dept header row (name + ON/OFF toggle) */
body.staffdark .cqd-dept-hdr { display:flex; align-items:center; gap:12px; }
body.staffdark .cqd-dept-name { font-size:1rem; font-weight:700; color:#e2e8f0; flex:1; }
body.staffdark .cqd-dept-role { font-size:.74rem; color:#64748b; text-transform:uppercase; letter-spacing:.05em; }
body.staffdark .cqd-toggle-row { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
body.staffdark .cqd-toggle-lbl { font-size:.78rem; color:#94a3b8; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
body.staffdark .cqd-toggle { position:relative; width:48px; height:26px; }
body.staffdark .cqd-toggle input { opacity:0; width:0; height:0; }
body.staffdark .cqd-toggle-slider { position:absolute; cursor:pointer; inset:0; background:#334155; border-radius:13px; transition:background .2s; }
body.staffdark .cqd-toggle-slider:before { content:''; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#94a3b8; border-radius:50%; transition:transform .2s, background .2s; }
body.staffdark .cqd-toggle input:checked + .cqd-toggle-slider { background:#1d4ed8; }
body.staffdark .cqd-toggle input:checked + .cqd-toggle-slider:before { transform:translateX(22px); background:#fff; }
body.staffdark .cqd-toggle-on-txt { font-size:.78rem; font-weight:700; color:#60a5fa; }
body.staffdark .cqd-toggle-off-txt { font-size:.78rem; font-weight:700; color:#64748b; }
/* Volume + Limit cards side-by-side */
body.staffdark .cqd-card-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
body.staffdark .cqd-card { background:#142031; border:1px solid rgba(148,163,184,.11); border-radius:13px; padding:16px 18px; }
body.staffdark .cqd-card-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#64748b; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
body.staffdark .cqd-card-val { font-size:2rem; font-weight:800; color:#e2e8f0; line-height:1; }
body.staffdark .cqd-card-sub { font-size:.78rem; color:#64748b; margin:4px 0 14px; }
body.staffdark .cqd-range-row { display:flex; align-items:center; gap:8px; }
body.staffdark .cqd-range-btn { background:rgba(148,163,184,.1); border:none; color:#94a3b8; width:28px; height:28px; border-radius:7px; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.staffdark .cqd-range-btn:hover { background:rgba(148,163,184,.2); color:#e2e8f0; }
body.staffdark .cqd-range { -webkit-appearance:none; appearance:none; flex:1; height:5px; border-radius:3px; background:rgba(148,163,184,.18); outline:none; cursor:pointer; }
body.staffdark .cqd-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#3b82f6; cursor:pointer; box-shadow:0 0 0 3px rgba(59,130,246,.25); }
body.staffdark .cqd-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#3b82f6; cursor:pointer; border:none; }
body.staffdark .cqd-range-hint { font-size:.72rem; color:#64748b; margin-top:8px; }
/* Priority overview pills */
body.staffdark .cqd-pov-title { font-size:.78rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
body.staffdark .cqd-pov-row { display:flex; flex-wrap:wrap; gap:8px; }
body.staffdark .cqd-pov-pill { display:flex; align-items:center; gap:7px; background:rgba(148,163,184,.07); border:1px solid rgba(148,163,184,.12); border-radius:22px; padding:5px 12px; }
body.staffdark .cqd-pov-pill-ic { font-size:.82rem; }
body.staffdark .cqd-pov-pill-name { font-size:.8rem; color:#94a3b8; font-weight:600; }
body.staffdark .cqd-pov-pill-count { font-size:.8rem; font-weight:700; color:#e2e8f0; }
body.staffdark .cqd-pov-pill-pct { font-size:.72rem; color:#64748b; }
body.staffdark .cqd-pov-empty { font-size:.82rem; color:#475569; font-style:italic; }
/* Priority table */
body.staffdark .cqd-pt-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
body.staffdark .cqd-pt-title { font-size:.78rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; }
body.staffdark .cqd-pt-save { background:#1d4ed8; border:none; color:#fff; font-size:.78rem; font-weight:600; border-radius:7px; padding:5px 13px; cursor:pointer; }
body.staffdark .cqd-pt-save:hover { background:#2563eb; }
body.staffdark .cqd-pt-save:disabled { opacity:.45; cursor:not-allowed; }
body.staffdark .cqd-pt-cancel { background:none; border:1px solid rgba(148,163,184,.2); color:#64748b; font-size:.78rem; border-radius:7px; padding:5px 10px; cursor:pointer; margin-right:4px; }
body.staffdark .cqd-pt-cancel:hover { border-color:rgba(148,163,184,.4); color:#94a3b8; }
body.staffdark .cqd-pt-table { width:100%; border-collapse:collapse; }
body.staffdark .cqd-pt-table th { font-size:.7rem; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:.05em; padding:0 8px 8px; text-align:left; border-bottom:1px solid rgba(148,163,184,.1); }
body.staffdark .cqd-pt-row { border-bottom:1px solid rgba(148,163,184,.06); transition:background .12s; }
body.staffdark .cqd-pt-row:hover { background:rgba(148,163,184,.04); }
body.staffdark .cqd-pt-row.cqd-dragging { opacity:.45; }
body.staffdark .cqd-pt-row.cqd-drag-over { border-top:2px solid #3b82f6; }
body.staffdark .cqd-pt-row td { padding:9px 8px; vertical-align:middle; }
body.staffdark .cqd-pt-rank { font-size:.78rem; font-weight:700; color:#475569; min-width:28px; text-align:center; }
body.staffdark .cqd-pt-drag { color:#334155; cursor:grab; font-size:.9rem; }
body.staffdark .cqd-pt-drag:active { cursor:grabbing; }
body.staffdark .cqd-pt-cat { display:flex; align-items:center; gap:8px; }
body.staffdark .cqd-pt-cat-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
body.staffdark .cqd-pt-cat-name { font-size:.85rem; color:#cbd5e1; font-weight:600; }
body.staffdark .cqd-pt-desc { font-size:.78rem; color:#475569; }
body.staffdark .cqd-pt-count { font-size:.85rem; font-weight:700; color:#e2e8f0; text-align:right; }
body.staffdark .cqd-pt-pct { font-size:.75rem; color:#64748b; text-align:right; }
body.staffdark .cqd-pt-enable label { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:.78rem; color:#64748b; }
body.staffdark .cqd-pt-enable input[type=checkbox] { accent-color:#3b82f6; }
/* Right-side stats panel */
body.staffdark .cqd-stat-card { background:#142031; border:1px solid rgba(148,163,184,.11); border-radius:11px; padding:14px; }
body.staffdark .cqd-stat-card-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#475569; margin-bottom:10px; }
body.staffdark .cqd-stat-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid rgba(148,163,184,.07); }
body.staffdark .cqd-stat-row:last-child { border-bottom:none; }
body.staffdark .cqd-stat-label { font-size:.8rem; color:#94a3b8; }
body.staffdark .cqd-stat-val { font-size:.9rem; font-weight:700; color:#e2e8f0; }
body.staffdark .cqd-stat-val.green { color:#34d399; }
body.staffdark .cqd-stat-val.blue { color:#60a5fa; }
body.staffdark .cqd-stat-val.yellow { color:#fbbf24; }
/* Today's progress bar */
body.staffdark .cqd-prog-bar-wrap { margin-top:8px; }
body.staffdark .cqd-prog-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; font-size:.78rem; }
body.staffdark .cqd-prog-num { color:#e2e8f0; font-weight:700; }
body.staffdark .cqd-prog-max { color:#64748b; }
body.staffdark .cqd-prog-bar { height:7px; border-radius:4px; background:rgba(148,163,184,.12); overflow:hidden; }
body.staffdark .cqd-prog-fill { height:100%; border-radius:4px; background:#3b82f6; transition:width .4s; }
body.staffdark .cqd-prog-fill.near { background:#f59e0b; }
body.staffdark .cqd-prog-fill.full { background:#ef4444; }
/* Agents mini list */
body.staffdark .cqd-agent-list { display:flex; flex-direction:column; gap:4px; }
body.staffdark .cqd-agent-row { display:flex; align-items:center; gap:7px; }
body.staffdark .cqd-agent-ava { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; color:#fff; flex-shrink:0; }
body.staffdark .cqd-agent-name { font-size:.78rem; color:#94a3b8; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.staffdark .cqd-agent-avail { font-size:.7rem; font-weight:600; }
body.staffdark .cqd-agent-avail.ok { color:#34d399; }
body.staffdark .cqd-agent-avail.busy { color:#f472b6; }
body.staffdark .cqd-agent-avail.warn { color:#fbbf24; }
body.staffdark .cqd-agent-avail.off { color:#475569; }
/* Win-back Campaign card (Task #906) */
body.staffdark .cqd-wb-card { background:#0f1f35; border:1px solid rgba(99,102,241,.25); border-radius:11px; padding:14px; }
body.staffdark .cqd-wb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
body.staffdark .cqd-wb-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#818cf8; display:flex; align-items:center; gap:6px; }
body.staffdark .cqd-wb-badge { font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; flex-shrink:0; }
body.staffdark .cqd-wb-badge.on { background:rgba(52,211,153,.15); color:#34d399; border:1px solid rgba(52,211,153,.3); }
body.staffdark .cqd-wb-badge.off { background:rgba(100,116,139,.12); color:#64748b; border:1px solid rgba(100,116,139,.2); }
body.staffdark .cqd-wb-stat-row { display:flex; gap:6px; margin-bottom:10px; }
body.staffdark .cqd-wb-stat { flex:1; background:rgba(255,255,255,.04); border-radius:8px; padding:8px 6px; text-align:center; }
body.staffdark .cqd-wb-stat-val { font-size:1.25rem; font-weight:800; color:#e2e8f0; line-height:1; }
body.staffdark .cqd-wb-stat-lbl { font-size:.62rem; color:#475569; margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
body.staffdark .cqd-wb-next { font-size:.75rem; color:#64748b; margin-bottom:10px; text-align:center; }
body.staffdark .cqd-wb-next span { color:#94a3b8; font-weight:600; }
body.staffdark .cqd-wb-btn { display:block; width:100%; padding:8px; background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.3); color:#818cf8; border-radius:8px; cursor:pointer; font-size:.78rem; font-weight:700; text-align:center; transition:background .15s; }
body.staffdark .cqd-wb-btn:hover { background:rgba(99,102,241,.25); }
/* Win-back modal (Task #906) */
body.staffdark .cqd-wb-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9200; display:flex; align-items:center; justify-content:center; }
body.staffdark .cqd-wb-modal { background:#0f172a; border:1px solid rgba(148,163,184,.15); border-radius:16px; width:min(480px,95vw); max-height:85vh; overflow-y:auto; display:flex; flex-direction:column; }
body.staffdark .cqd-wb-modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 0; }
body.staffdark .cqd-wb-modal-title { font-size:1rem; font-weight:700; color:#e2e8f0; display:flex; align-items:center; gap:8px; }
body.staffdark .cqd-wb-modal-close { background:none; border:none; color:#64748b; font-size:1.1rem; cursor:pointer; padding:4px; border-radius:7px; }
body.staffdark .cqd-wb-modal-close:hover { color:#e2e8f0; background:rgba(148,163,184,.08); }
body.staffdark .cqd-wb-modal-body { padding:18px 20px 22px; display:flex; flex-direction:column; gap:16px; }
body.staffdark .cqd-wb-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
body.staffdark .cqd-wb-row-lbl { font-size:.82rem; color:#94a3b8; font-weight:600; flex:1; }
body.staffdark .cqd-wb-row-sub { font-size:.74rem; color:#475569; margin-top:2px; }
body.staffdark .cqd-wb-section { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#475569; padding-bottom:6px; border-bottom:1px solid rgba(148,163,184,.08); }
body.staffdark .cqd-wb-toggle { position:relative; width:44px; height:24px; flex-shrink:0; }
body.staffdark .cqd-wb-toggle input { opacity:0; width:0; height:0; }
body.staffdark .cqd-wb-toggle-slider { position:absolute; cursor:pointer; inset:0; background:#334155; border-radius:12px; transition:background .2s; }
body.staffdark .cqd-wb-toggle-slider:before { content:''; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#94a3b8; border-radius:50%; transition:transform .2s, background .2s; }
body.staffdark .cqd-wb-toggle input:checked + .cqd-wb-toggle-slider { background:#4f46e5; }
body.staffdark .cqd-wb-toggle input:checked + .cqd-wb-toggle-slider:before { transform:translateX(20px); background:#fff; }
body.staffdark .cqd-wb-interval { display:flex; align-items:center; gap:8px; }
body.staffdark .cqd-wb-interval-num { width:56px; background:#1e293b; border:1px solid rgba(148,163,184,.2); color:#e2e8f0; font-size:.9rem; font-weight:700; border-radius:8px; padding:5px 8px; text-align:center; }
body.staffdark .cqd-wb-interval-lbl { font-size:.78rem; color:#64748b; }
body.staffdark .cqd-wb-check-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
body.staffdark .cqd-wb-check-row input[type=checkbox] { accent-color:#4f46e5; width:16px; height:16px; flex-shrink:0; cursor:pointer; }
body.staffdark .cqd-wb-check-lbl { font-size:.82rem; color:#94a3b8; }
body.staffdark .cqd-wb-check-sub { font-size:.73rem; color:#475569; }
body.staffdark .cqd-wb-hours { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.staffdark .cqd-wb-hours-field { display:flex; flex-direction:column; gap:4px; }
body.staffdark .cqd-wb-hours-field label { font-size:.72rem; color:#475569; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
body.staffdark .cqd-wb-hours-input { background:#1e293b; border:1px solid rgba(148,163,184,.2); color:#e2e8f0; font-size:.85rem; border-radius:7px; padding:6px 10px; width:100%; }
body.staffdark .cqd-wb-days { display:flex; gap:5px; flex-wrap:wrap; }
body.staffdark .cqd-wb-day { padding:4px 9px; border-radius:6px; font-size:.75rem; font-weight:600; cursor:pointer; border:1px solid rgba(148,163,184,.18); color:#64748b; background:none; transition:all .15s; }
body.staffdark .cqd-wb-day.sel { background:rgba(79,70,229,.2); border-color:rgba(99,102,241,.4); color:#818cf8; }
body.staffdark .cqd-wb-save { display:block; width:100%; padding:11px; background:#4f46e5; border:none; color:#fff; border-radius:10px; cursor:pointer; font-size:.92rem; font-weight:700; transition:background .15s; margin-top:4px; }
body.staffdark .cqd-wb-save:hover { background:#4338ca; }
body.staffdark .cqd-wb-save:disabled { background:#1e293b; color:#475569; cursor:not-allowed; }
/* Follow-up ladder link */
body.staffdark .cqd-ladder-link { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:#3b82f6; background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.25); border-radius:8px; padding:6px 12px; cursor:pointer; text-decoration:none; transition:background .15s; }
body.staffdark .cqd-ladder-link:hover { background:rgba(59,130,246,.18); }
/* Loading + empty */
body.staffdark .cqd-loading { display:flex; align-items:center; justify-content:center; padding:60px 0; color:#475569; gap:10px; font-size:.9rem; }
body.staffdark .cqd-empty { text-align:center; padding:60px 24px; color:#475569; }
body.staffdark .cqd-empty i { font-size:2rem; margin-bottom:12px; display:block; }
/* Responsive collapse */
@media(max-width:860px) {
    body.staffdark .cqd-body { grid-template-columns:1fr; }
    body.staffdark .cqd-side { border-top:1px solid rgba(148,163,184,.09); }
    body.staffdark .cqd-card-row { grid-template-columns:1fr; }
}
body.staffdark .cqd-pt-add-sel { background:#1e293b; border:1px solid rgba(148,163,184,.2); color:#94a3b8; font-size:.78rem; border-radius:7px; padding:4px 8px; cursor:pointer; }
body.staffdark .cqd-pt-add-sel:focus { outline:none; border-color:#3b82f6; }
body.staffdark .cqd-pt-remove { background:none; border:none; color:#475569; cursor:pointer; font-size:.82rem; padding:4px 6px; border-radius:5px; }
body.staffdark .cqd-pt-remove:hover { color:#ef4444; background:rgba(239,68,68,.1); }
.agc-installment{display:inline-block;font-size:.7rem;font-weight:700;background:#dbeafe;color:#1d4ed8;border-radius:4px;padding:1px 6px;margin-left:4px;letter-spacing:.02em;vertical-align:middle;}
body.staffdark .agc-installment{background:#1d3a5f;color:#60a5fa;}

/* ── Financial requests (Task #968) ─────────────────────────────────────── */
.fin-until.fin-grace { color: #34d399; }
.fin-until.fin-grace i { color: #34d399; }
.fr-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.fr-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .8rem; }
.fr-meta > div { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
.fr-meta .fin-muted { font-size: .72rem; }
.fr-reason { background: rgba(148, 163, 184, .12); border-left: 3px solid #94a3b8; border-radius: 6px; padding: .55rem .7rem; font-size: .85rem; margin-bottom: .85rem; white-space: pre-wrap; }
.fr-reason i { color: #94a3b8; margin-right: .35rem; font-size: .75rem; }
.fr-adjust { border: 1px dashed rgba(148, 163, 184, .4); border-radius: 8px; padding: .6rem .7rem .1rem; margin-bottom: .8rem; }
.fr-type { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--frc, #94a3b8); background: color-mix(in srgb, var(--frc, #94a3b8) 14%, transparent); border: 1px solid color-mix(in srgb, var(--frc, #94a3b8) 40%, transparent); border-radius: 999px; padding: .18rem .6rem; white-space: nowrap; }
.fr-reason-cell { max-width: 220px; font-size: .8rem; color: #93a9cd; }
@media (max-width: 560px) { .fr-two { grid-template-columns: 1fr; } .fr-meta { gap: .7rem; } }

/* Financial requests — per-row actions, requester-side history, pending badges (Task #968) */
.fr-rowacts { display: flex; flex-wrap: wrap; gap: .35rem; }
.fr-rowacts .crm-btn { white-space: nowrap; }
.fr-hist { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: .55rem .75rem; margin-bottom: .9rem; }
body.staffdark .fr-hist { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .25); }
.fr-hist-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; padding: .2rem 0; }
.fr-pending-note { display: flex; gap: .55rem; align-items: flex-start; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4); color: inherit; border-radius: 10px; padding: .7rem .85rem; font-size: .9rem; line-height: 1.45; margin-bottom: .6rem; }
.fr-pending-note i { color: #f59e0b; margin-top: .15rem; }
.fr-card-pending { margin-left: auto; flex: 0 0 auto; }

/* ── Contact merge dialog (Task #950) ─────────────────────────────────────── */
.mgc-ov { z-index: 1300; } /* merge dialog rides above the fixed .bulk-bar (z-index 1200) */
.mgc-modal { max-width: 860px; width: min(860px, 94vw); }
.mgc-scroll { overflow: auto; max-height: 52vh; border: 1px solid rgba(148, 163, 184, .25); border-radius: 10px; }
.mgc-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mgc-table th, .mgc-table td { padding: .5rem .6rem; border-bottom: 1px solid rgba(148, 163, 184, .18); text-align: left; vertical-align: top; }
.mgc-table thead th { position: sticky; top: 0; background: var(--card, #fff); z-index: 1; }
.mgc-flabel { font-weight: 600; white-space: nowrap; width: 1%; }
.mgc-conf { display: inline-block; min-width: 1rem; text-align: center; border-radius: 50%; background: #f59e0b; color: #fff; font-weight: 700; font-size: .7rem; line-height: 1rem; }
.mgc-primary { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 700; }
.mgc-pname { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgc-meta { font-size: .72rem; opacity: .75; margin-top: .15rem; }
.mgc-badge { display: inline-block; padding: .05rem .45rem; border-radius: 99px; background: rgba(59, 130, 246, .15); color: #3b82f6; font-size: .68rem; font-weight: 700; }
.mgc-badge.cust { background: rgba(16, 185, 129, .15); color: #10b981; }
.mgc-pick { display: flex; align-items: flex-start; gap: .4rem; cursor: pointer; }
.mgc-pick span { word-break: break-word; }
.mgc-val.dim { opacity: .6; }
.mgc-empty { opacity: .45; }
body.staffdark .mgc-table thead th { background: #1e293b; }

/* Possible-duplicates review modal (Task #960) */
.dupg-modal { max-width: 720px; width: min(720px, 94vw); }
.dupg-modal .modal-body { max-height: 72vh; overflow: auto; }
.dupg-group { border: 1px solid rgba(148, 163, 184, .25); border-radius: 10px; margin-bottom: .7rem; overflow: hidden; }
.dupg-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .5rem .7rem; background: rgba(148, 163, 184, .08); border-bottom: 1px solid rgba(148, 163, 184, .18); }
.dupg-kind { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 99px; font-size: .7rem; font-weight: 700; }
.dupg-kind.email { background: rgba(59, 130, 246, .15); color: #3b82f6; }
.dupg-kind.phone { background: rgba(245, 158, 11, .15); color: #d97706; }
.dupg-key { font-size: .78rem; font-weight: 600; opacity: .85; word-break: break-all; }
.dupg-count { font-size: .72rem; opacity: .65; }
.dupg-head .dupg-merge { margin-left: auto; }
.dupg-member { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .45rem .7rem; border-bottom: 1px solid rgba(148, 163, 184, .12); font-size: .8rem; }
.dupg-member:last-child { border-bottom: 0; }
.dupg-name { font-weight: 600; }
.dupg-info { opacity: .7; word-break: break-all; }
.dupg-added { margin-left: auto; font-size: .72rem; opacity: .55; white-space: nowrap; }
body.staffdark .dupg-kind.phone { color: #fbbf24; }
/* ── ALL CONTACTS (worker portals — Agent / PV / Technical / Academy) ─────────
   Dark contact-list per the owner's mock. Scoped under body.staffdark so nothing
   leaks into the student portal (staff dark theme rule). */
.staffdark .sac-wrap { display: flex; flex-direction: column; gap: 1rem; }
.staffdark .sac-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.staffdark .sac-head-left { display: flex; align-items: center; gap: .9rem; }
.staffdark .sac-badge {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, #4f7cff, #7c4dff); color: #fff; font-size: 1.15rem;
    box-shadow: 0 6px 18px rgba(79, 124, 255, .35);
}
.staffdark .sac-title { margin: 0; font-size: 1.35rem; font-weight: 800; color: #fff; }
.staffdark .sac-sub { color: #93a1bd; font-size: .82rem; margin-top: .15rem; }
.staffdark .sac-hint { color: #6ea8ff; font-weight: 600; }
.staffdark .sac-total-card {
    display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem;
    background: linear-gradient(160deg, #101a30, #0c1526); border: 1px solid #223154;
    border-radius: 14px;
}
.staffdark .sac-total-card > i { color: #6ea8ff; font-size: 1.3rem; }
.staffdark .sac-total { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.1; }
.staffdark .sac-total-lbl { font-size: .72rem; color: #8fa0c2; }
.staffdark .sac-search {
    position: relative; display: flex; align-items: center;
    background: #0d1628; border: 1px solid #24345c; border-radius: 12px;
    padding: 0 .95rem; transition: border-color .18s, box-shadow .18s;
}
.staffdark .sac-search:focus-within {
    border-color: #4f7cff; box-shadow: 0 0 0 3px rgba(79, 124, 255, .18);
}
.staffdark .sac-search > i { color: #62729a; font-size: .95rem; }
.staffdark .sac-search input {
    flex: 1; background: transparent; border: 0; outline: 0; color: #e8eeff;
    font-size: .95rem; padding: .78rem .8rem; min-width: 0;
}
.staffdark .sac-search input::placeholder { color: #5d6c92; }
.staffdark .sac-search input::-webkit-search-cancel-button { filter: invert(.7); }
.staffdark .sac-spin { opacity: 0; transition: opacity .15s; color: #6ea8ff; width: 1.1rem; text-align: center; }
.staffdark .sac-spin.on { opacity: 1; }
.staffdark .sac-table-wrap {
    background: #0c1526; border: 1px solid #1d2c4e; border-radius: 14px; overflow: auto;
}
.staffdark .sac-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.staffdark .sac-table thead th {
    text-align: left; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    color: #7f90b5; padding: .8rem 1rem; border-bottom: 1px solid #1d2c4e;
    white-space: nowrap; user-select: none; background: #0e1930;
    position: sticky; top: 0; z-index: 1;
}
.staffdark .sac-table th[data-sort] { cursor: pointer; }
.staffdark .sac-table th[data-sort]:hover { color: #c6d4f5; }
.staffdark .sac-sortic i { margin-left: .3rem; font-size: .68rem; color: #55648c; }
.staffdark .sac-sortic i.sac-sorted { color: #6ea8ff; }
.staffdark .sac-table tbody td {
    padding: .7rem 1rem; border-bottom: 1px solid #15223e; font-size: .86rem; color: #cfd9f2;
    vertical-align: middle;
}
.staffdark .sac-table tbody tr:last-child td { border-bottom: 0; }
.staffdark .sac-row { cursor: pointer; transition: background .12s; }
.staffdark .sac-row:hover { background: #101d38; }
.staffdark #sacBody.sac-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }
.staffdark .sac-contact { display: flex; align-items: center; gap: .7rem; min-width: 200px; }
.staffdark .sac-av {
    width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
    color: #fff; font-weight: 700; font-size: .8rem; flex: 0 0 auto; letter-spacing: .02em;
}
.staffdark .sac-av.sm { width: 28px; height: 28px; font-size: .66rem; }
.staffdark .sac-cname { font-weight: 700; color: #f1f5ff; }
.staffdark .sac-cmail { font-size: .74rem; color: #7c8cb0; margin-top: .1rem; }
.staffdark .sac-phone i, .staffdark .sac-dept i { color: #5f7bd9; margin-right: .4rem; font-size: .8rem; }
.staffdark .sac-owner { display: flex; align-items: center; gap: .55rem; }
.staffdark .sac-dim { color: #55648c; }
.staffdark .sac-actions { white-space: nowrap; text-align: right; }
.staffdark .sac-th-actions { text-align: right; }
.staffdark .sac-open {
    background: #2563eb; color: #fff; border: 0; border-radius: 9px; cursor: pointer;
    padding: .45rem .95rem; font-size: .8rem; font-weight: 700;
    transition: background .15s, transform .1s;
}
.staffdark .sac-open:hover { background: #3b76f6; }
.staffdark .sac-open:active { transform: scale(.97); }
.staffdark .sac-open i { margin-right: .35rem; }
.staffdark .sac-kebab {
    background: transparent; border: 0; color: #8fa0c2; cursor: pointer;
    padding: .45rem .6rem; border-radius: 8px; margin-left: .25rem; font-size: .9rem;
}
.staffdark .sac-kebab:hover { background: #1a2947; color: #fff; }
.staffdark .sac-empty {
    text-align: center; color: #7c8cb0; padding: 2.2rem 1rem !important; font-size: .9rem;
}
.staffdark .sac-empty i { margin-right: .45rem; color: #55648c; }
.staffdark .sac-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding: .1rem .2rem;
}
.staffdark .sac-showing { color: #8fa0c2; font-size: .8rem; }
.staffdark .sac-pager { display: flex; align-items: center; gap: .35rem; }
.staffdark .sac-pg {
    min-width: 34px; height: 34px; border-radius: 9px; border: 1px solid #24345c;
    background: #0d1628; color: #c6d4f5; cursor: pointer; font-size: .8rem; font-weight: 600;
    transition: background .12s, border-color .12s;
}
.staffdark .sac-pg:hover:not(:disabled) { background: #16244300; border-color: #3b5292; }
.staffdark .sac-pg.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.staffdark .sac-pg:disabled { opacity: .35; cursor: default; }
.staffdark .sac-ell { color: #55648c; padding: 0 .15rem; }
.staffdark .sac-psize {
    margin-left: .5rem; background: #0d1628; color: #c6d4f5; border: 1px solid #24345c;
    border-radius: 9px; height: 34px; padding: 0 .5rem; font-size: .8rem; cursor: pointer;
}
@media (max-width: 720px) {
    .staffdark .sac-head { flex-direction: column; align-items: flex-start; }
    .staffdark .sac-foot { justify-content: center; }
}

/* ── PV dashboard big request tab buttons (Task #998, owner mock) ─────────── */
body.staffdark .pv-req-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: .75rem 0 .9rem; }
body.staffdark .pv-req-tab {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .85rem .9rem; border-radius: 12px; border: 1px solid transparent;
    font-weight: 800; font-size: .82rem; letter-spacing: .04em; color: #0b1220;
    cursor: pointer; transition: filter .15s, transform .1s; min-height: 54px;
}
body.staffdark .pv-req-tab:hover { filter: brightness(1.08); }
body.staffdark .pv-req-tab:active { transform: translateY(1px); }
body.staffdark .pv-req-tab.active { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
body.staffdark .pv-req-tab .prt-count {
    background: rgba(0, 0, 0, .28); color: #fff; border-radius: 999px;
    min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .45rem; font-size: .8rem;
}
body.staffdark .pv-req-tab.prt-gold  { background: #f5b942; }
body.staffdark .pv-req-tab.prt-blue  { background: #4f8ef7; color: #fff; }
body.staffdark .pv-req-tab.prt-green { background: #22b573; color: #fff; }
body.staffdark .pv-req-tab.prt-red   { background: #e5484d; color: #fff; }
@media (max-width: 960px) { body.staffdark .pv-req-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { body.staffdark .pv-req-tabs { grid-template-columns: 1fr; } }

/* Refund destination picker in the decide dialog */
.fr-method .fr-method-opt { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; cursor: pointer; }
.fr-method .fr-method-other { width: 100%; margin-top: .35rem; }

/* Financial Requests block on the unified profile card */
.scp-freq-row { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid rgba(148, 163, 184, .18); }
.scp-freq-row:last-child { border-bottom: 0; }
.scp-freq-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(148, 163, 184, .12); }
.scp-freq-top { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.scp-freq-sub { font-size: .82rem; opacity: .85; margin-top: .15rem; }
.scp-freq-when { font-size: .75rem; opacity: .6; margin-top: .1rem; }

/* ══════════ .frw — 4-step request wizards (Extension/Discount/Refund/Cancellation/DND) ══════════
   Self-contained DARK modal (like .ccw) so it looks the same from every portal. */
.frw-modal { background: #050B14; border: 1px solid #334155; max-width: 860px; width: 96vw; padding: 0; overflow: hidden; }
.frw {
    --frw-panel: #0F172A; --frw-input: #1E293B; --frw-border: #334155;
    --frw-text: #F8FAFC; --frw-muted: #94A3B8;
    display: flex; flex-direction: column; max-height: 92vh; background: #050B14;
    color: var(--frw-text); font-family: 'Inter', system-ui, sans-serif; border-radius: 12px; overflow: hidden;
}
.frw * { box-sizing: border-box; }
.frw-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--frw-border); }
.frw-back { background: none; border: 1px solid var(--frw-border); color: var(--frw-muted); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; flex: none; }
.frw-back:hover { color: var(--frw-text); border-color: #475569; }
.frw-ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex: none; }
.frw-title { font-weight: 700; font-size: 1.05rem; }
.frw-sub { color: var(--frw-muted); font-size: .8rem; margin-top: .1rem; }
.frw-steps { display: flex; align-items: center; gap: .45rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--frw-border); flex-wrap: wrap; }
.frw-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--frw-muted); white-space: nowrap; }
.frw-chip-n { width: 22px; height: 22px; border-radius: 50%; background: var(--frw-input); border: 1px solid var(--frw-border); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; }
.frw-chip.on { color: var(--frw-text); font-weight: 600; }
.frw-chip.on .frw-chip-n { background: #2563EB; border-color: #2563EB; color: #fff; }
.frw-chip.done .frw-chip-n { background: #10B981; border-color: #10B981; color: #fff; }
.frw-chip-line { flex: 1 1 14px; min-width: 14px; height: 1px; background: var(--frw-border); }
.frw-body { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; padding: 1.1rem 1.2rem; overflow-y: auto; }
.frw-sec-h { font-weight: 700; margin-bottom: .2rem; }
.frw-sec-sub { color: var(--frw-muted); font-size: .82rem; margin-bottom: .8rem; }
.frw-opt { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--frw-border); border-radius: 10px; margin-bottom: .55rem; cursor: pointer; background: var(--frw-panel); transition: border-color .12s; }
.frw-opt:hover { border-color: #475569; }
.frw-opt.on { border-color: #2563EB; background: rgba(37,99,235,.08); }
.frw-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--frw-border); margin-top: .15rem; flex: none; }
.frw-opt.on .frw-dot { border-color: #2563EB; box-shadow: inset 0 0 0 3.5px #2563EB; }
.frw-opt-t { display: flex; flex-direction: column; gap: .12rem; font-size: .85rem; }
.frw-opt-t span { color: var(--frw-muted); font-size: .76rem; }
.frw-check .frw-tick { margin-left: auto; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--frw-border); display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; color: transparent; flex: none; }
.frw-check.on .frw-tick { background: #2563EB; border-color: #2563EB; color: #fff; }
.frw-two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.frw-main .field { margin-bottom: .7rem; }
.frw-main .field label { display: block; font-size: .78rem; color: var(--frw-muted); margin-bottom: .3rem; }
.frw-main input, .frw-main select, .frw-main textarea {
    width: 100%; background: var(--frw-input); border: 1px solid var(--frw-border); color: var(--frw-text);
    border-radius: 8px; padding: .5rem .6rem; font: inherit; font-size: .85rem;
}
.frw-main input:focus, .frw-main select:focus, .frw-main textarea:focus { outline: none; border-color: #2563EB; }
.frw-main .fin-muted { color: var(--frw-muted); font-size: .76rem; }
.frw-main .fr-two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.frw-card { background: var(--frw-panel); border: 1px solid var(--frw-border); border-radius: 12px; padding: .85rem .9rem; margin-bottom: .8rem; }
.frw-card-h { font-weight: 700; font-size: .82rem; margin-bottom: .6rem; }
.frw-who { display: flex; align-items: center; gap: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--frw-border); margin-bottom: .55rem; }
.frw-ava { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; font-weight: 700; flex: none; }
.frw-who-n { font-weight: 600; font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.frw-lead-pill { font-size: .58rem; font-weight: 700; letter-spacing: .05em; background: rgba(37,99,235,.18); color: #93c5fd; border-radius: 999px; padding: .12rem .45rem; }
.frw-who-c { color: var(--frw-muted); font-size: .74rem; margin-top: .1rem; }
.frw-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .78rem; color: var(--frw-muted); padding: .28rem 0; }
.frw-row-v { color: var(--frw-text); font-weight: 600; text-align: right; }
.frw-review { background: var(--frw-panel); border: 1px solid var(--frw-border); border-radius: 12px; padding: .6rem .9rem; }
.frw-cov { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; }
.frw-cov-ic { width: 26px; text-align: center; font-size: .95rem; flex: none; }
.frw-cov-t { display: flex; flex-direction: column; font-size: .78rem; }
.frw-cov-t span { color: var(--frw-muted); font-size: .7rem; }
.frw-cov-sub { color: var(--frw-muted); font-size: .74rem; margin-bottom: .45rem; }
.frw-blocked { margin-left: auto; font-size: .62rem; font-weight: 700; color: #fca5a5; background: rgba(239,68,68,.14); border-radius: 999px; padding: .15rem .5rem; }
.frw-err { margin: 0 1.2rem; }
.frw-foot { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .9rem 1.2rem; border-top: 1px solid var(--frw-border); }
.frw-foot-r { display: flex; gap: .6rem; }
.frw-btn-ghost { background: none; border: 1px solid var(--frw-border); color: var(--frw-muted); border-radius: 8px; padding: .5rem .95rem; font: inherit; font-size: .84rem; cursor: pointer; }
.frw-btn-ghost:hover { color: var(--frw-text); border-color: #475569; }
.frw-btn-next { border: none; color: #fff; border-radius: 8px; padding: .5rem 1.1rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.frw-btn-next:disabled { opacity: .6; cursor: default; }
.frw-dnd-live .frw-btn-ghost { width: 100%; margin-top: .4rem; }
.frw .fr-pending-note { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.4); color: #fcd34d; border-radius: 10px; padding: .8rem .9rem; font-size: .82rem; }
@media (max-width: 760px) {
    .frw-body { grid-template-columns: 1fr; }
    .frw-two, .frw-main .fr-two { grid-template-columns: 1fr; }
}

/* ── Discount Code generator (Task #1007) — dark, scoped under staffdark ── */
body.staffdark .dcw-gen-btn{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:10px;
  border:1px solid rgba(245,158,11,.55);cursor:pointer;font-weight:800;letter-spacing:.04em;font-size:.78rem;
  color:#1a1204;background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 4px 14px rgba(245,158,11,.35);
}
body.staffdark .dcw-gen-btn:hover{filter:brightness(1.08)}
body.staffdark .dcw-pop{
  position:fixed;z-index:1200;left:50%;top:8vh;transform:translateX(-50%);
  width:min(860px,94vw);max-height:86vh;display:flex;
}
body.staffdark .dcw-card{
  flex:1;display:flex;flex-direction:column;overflow:auto;border-radius:16px;
  background:#0f172a;border:1px solid #27354d;box-shadow:0 24px 70px rgba(0,0,0,.6);color:#e2e8f0;
}
body.staffdark .dcw-card-wide{width:100%}
body.staffdark .dcw-head{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;cursor:grab;user-select:none;
  background:linear-gradient(135deg,#1e293b,#111a2c);border-bottom:1px solid #27354d;
}
body.staffdark .dcw-head-title{flex:1;font-weight:800;font-size:1rem}
body.staffdark .dcw-head-title i{color:#fbbf24;margin-right:.35rem}
body.staffdark .dcw-hbtn{
  background:rgba(148,163,184,.12);border:1px solid #33415c;color:#cbd5e1;border-radius:8px;
  padding:.35rem .7rem;cursor:pointer;font-size:.8rem;
}
body.staffdark .dcw-hbtn:hover{background:rgba(148,163,184,.22)}
body.staffdark .dcw-x{font-size:1.1rem;line-height:1;padding:.25rem .6rem}
body.staffdark .dcw-steps{display:flex;align-items:center;gap:.4rem;padding:.8rem 1.1rem;border-bottom:1px solid #1e293b;flex-wrap:wrap}
body.staffdark .dcw-step{display:flex;align-items:center;gap:.4rem;opacity:.55}
body.staffdark .dcw-step.on,body.staffdark .dcw-step.done{opacity:1}
body.staffdark .dcw-step-n{
  width:1.55rem;height:1.55rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#1e293b;border:1px solid #33415c;font-size:.75rem;font-weight:800;
}
body.staffdark .dcw-step.on .dcw-step-n{background:#f59e0b;border-color:#f59e0b;color:#160f02}
body.staffdark .dcw-step.done .dcw-step-n{background:#10b981;border-color:#10b981;color:#04150e}
body.staffdark .dcw-step-l{font-size:.78rem;font-weight:700}
body.staffdark .dcw-step-bar{flex:0 0 1.1rem;height:2px;background:#33415c;border-radius:2px}
body.staffdark .dcw-main{display:flex;gap:1rem;padding:1rem 1.1rem;align-items:flex-start}
body.staffdark .dcw-body{flex:1;min-width:0}
body.staffdark .dcw-preview{flex:0 0 235px}
@media (max-width:760px){body.staffdark .dcw-main{flex-direction:column}body.staffdark .dcw-preview{flex:1;width:100%}}
body.staffdark .dcw-prev-title{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:.45rem}
body.staffdark .dcw-prev-card{
  border-radius:12px;padding:.9rem;text-align:center;margin-bottom:.7rem;
  background:linear-gradient(135deg,rgba(251,191,36,.16),rgba(245,158,11,.06));border:1px dashed rgba(245,158,11,.55);
}
body.staffdark .dcw-prev-pct{font-size:1.5rem;font-weight:900;color:#fbbf24}
body.staffdark .dcw-prev-pct span{font-size:.95rem}
body.staffdark .dcw-prev-code{font-family:ui-monospace,monospace;font-weight:800;letter-spacing:.08em;margin-top:.25rem;color:#fde68a}
body.staffdark .dcw-prev-name{font-size:.78rem;color:#94a3b8;margin-top:.2rem}
body.staffdark .dcw-prev-rows div{display:flex;justify-content:space-between;gap:.6rem;padding:.32rem 0;border-bottom:1px solid #1e293b;font-size:.78rem}
body.staffdark .dcw-prev-rows span{color:#94a3b8}
body.staffdark .dcw-prev-rows b{text-align:right}
body.staffdark .dcw-tiles{display:flex;gap:.7rem;margin-bottom:1rem}
body.staffdark .dcw-tile{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.8rem;border-radius:12px;cursor:pointer;
  background:#111a2c;border:1px solid #33415c;color:#e2e8f0;
}
body.staffdark .dcw-tile i{font-size:1.1rem;color:#fbbf24}
body.staffdark .dcw-tile span{font-weight:800;font-size:.85rem}
body.staffdark .dcw-tile small{color:#94a3b8;font-size:.7rem}
body.staffdark .dcw-tile.on{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b inset}
body.staffdark .dcw-tile.is-disabled{opacity:.45;cursor:not-allowed}
body.staffdark .dcw-field{margin-bottom:.85rem}
body.staffdark .dcw-field label{display:block;font-size:.76rem;font-weight:700;color:#94a3b8;margin-bottom:.3rem}
body.staffdark .dcw-field input[type=text],body.staffdark .dcw-field input[type=date],
body.staffdark .dcw-field input[type=number],body.staffdark .dcw-field input[type=search]{
  width:100%;padding:.55rem .7rem;border-radius:9px;background:#111a2c;border:1px solid #33415c;color:#e2e8f0;font-size:.88rem;
}
body.staffdark .dcw-field .dcw-ro{opacity:.65;cursor:not-allowed}
body.staffdark .dcw-two{display:flex;gap:.8rem}
body.staffdark .dcw-two .dcw-field{flex:1}
body.staffdark .dcw-slider-row{display:flex;align-items:center;gap:.8rem}
body.staffdark .dcw-slider-row input[type=range]{flex:1;accent-color:#f59e0b}
body.staffdark .dcw-slider-row input[type=number]{width:5.2rem}
body.staffdark .dcw-code-row{display:flex;gap:.5rem}
body.staffdark .dcw-code-row input{flex:1;font-family:ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
body.staffdark .dcw-regen{
  border-radius:9px;border:1px solid rgba(245,158,11,.55);background:rgba(245,158,11,.14);color:#fbbf24;
  padding:0 .8rem;cursor:pointer;
}
body.staffdark .dcw-regen:hover{background:rgba(245,158,11,.25)}
body.staffdark .dcw-radios{display:flex;flex-direction:column;gap:.55rem}
body.staffdark .dcw-radio{
  display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border-radius:11px;cursor:pointer;
  background:#111a2c;border:1px solid #33415c;
}
body.staffdark .dcw-radio.on{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b inset}
body.staffdark .dcw-radio input{margin-top:.2rem;accent-color:#f59e0b}
body.staffdark .dcw-radio b{display:block;font-size:.86rem}
body.staffdark .dcw-radio small{display:block;color:#94a3b8;font-size:.74rem;margin-top:.1rem}
body.staffdark .dcw-stu-results{display:flex;flex-direction:column;gap:.3rem;margin-top:.4rem}
body.staffdark .dcw-stu-hit{
  text-align:left;padding:.5rem .7rem;border-radius:9px;background:#111a2c;border:1px solid #33415c;color:#e2e8f0;cursor:pointer;
}
body.staffdark .dcw-stu-hit:hover{border-color:#f59e0b}
body.staffdark .dcw-stu-hit small{color:#94a3b8;margin-left:.35rem}
body.staffdark .dcw-dim{color:#94a3b8;font-size:.78rem}
body.staffdark .dcw-review div{display:flex;justify-content:space-between;gap:.8rem;padding:.5rem 0;border-bottom:1px solid #1e293b;font-size:.85rem}
body.staffdark .dcw-review span{color:#94a3b8}
body.staffdark .dcw-review b{text-align:right}
body.staffdark .dcw-foot{display:flex;justify-content:space-between;gap:.7rem;padding:.85rem 1.1rem;border-top:1px solid #1e293b}
body.staffdark .dcw-done{text-align:center;padding:1.6rem 1.2rem}
body.staffdark .dcw-done-ic{font-size:2.2rem;color:#10b981;margin-bottom:.5rem}
body.staffdark .dcw-done-pct{font-size:1.25rem;font-weight:900;color:#fbbf24}
body.staffdark .dcw-done-code{
  font-family:ui-monospace,monospace;font-size:1.5rem;font-weight:800;letter-spacing:.12em;color:#fde68a;
  padding:.7rem 1rem;margin:.6rem auto .9rem;max-width:22rem;border-radius:12px;
  background:rgba(245,158,11,.1);border:1px dashed rgba(245,158,11,.6);
}
body.staffdark .dcw-hist{padding:1rem 1.1rem;overflow:auto}
body.staffdark .dcw-table{width:100%;border-collapse:collapse;font-size:.82rem}
body.staffdark .dcw-table th{text-align:left;color:#94a3b8;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .55rem;border-bottom:1px solid #27354d}
body.staffdark .dcw-table td{padding:.55rem;border-bottom:1px solid #1e293b;vertical-align:top}
body.staffdark .dcw-pill{display:inline-block;padding:.14rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.04em}
body.staffdark .dcw-pill-green{background:rgba(16,185,129,.16);color:#34d399;border:1px solid rgba(16,185,129,.4)}
body.staffdark .dcw-pill-gray{background:rgba(148,163,184,.14);color:#94a3b8;border:1px solid rgba(148,163,184,.35)}
body.staffdark .dcw-pill-red{background:rgba(239,68,68,.14);color:#f87171;border:1px solid rgba(239,68,68,.4)}
body.staffdark .dcw-row-acts{display:flex;gap:.35rem;justify-content:flex-end}
body.staffdark .dcw-hbtn-danger{color:#f87171;border-color:rgba(239,68,68,.4)}
body.staffdark .dcw-hbtn-danger:hover{background:rgba(239,68,68,.16)}
body.staffdark .dcw-edit-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.8rem}
body.staffdark .dcw-pill-blue{background:rgba(59,130,246,.14);color:#60a5fa;border:1px solid rgba(59,130,246,.4)}
/* Quote-modal discount code row (light + dark modals both use .q-*) */
.q-disc-row{display:flex;gap:.5rem;align-items:stretch}
.q-disc-row .btn{white-space:nowrap}
/* ── Monthly Check-Ups (Technical) ─────────────────────────────────────────── */
.dash-stat.tone-cyan { --ds-accent: #22d3ee; }
body.staffdark .dash-stat.tone-cyan .dash-stat-ic { background: rgba(34,211,238,.15); color: #22d3ee; }
.checkup-badge {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    background: rgba(34,211,238,.14); color: #0e7490;
    border: 1px solid rgba(34,211,238,.4);
}
body.staffdark .checkup-badge { color: #67e8f9; }
.fin-until.checkup-badge { display: inline-flex; }
.scp-cu-due { font-size: 12px; vertical-align: middle; margin-left: 8px; }

body.staffdark .tcu-back { margin-bottom: 10px; }
.tcu-hdr-ic { color: #22d3ee; margin-right: 6px; }
.tcu-months { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin: 14px 0; }
.tcu-month-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
body.staffdark .tcu-monthpick-wrap {
    display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px;
    border: 1px solid rgba(148, 163, 184, .25); border-radius: 10px;
    background: rgba(15, 23, 42, .6); color: #94a3b8;
}
body.staffdark .tcu-monthpick-wrap select { background: transparent; border: none; }
.tcu-th-cb, .tcu-td-cb { width: 34px; text-align: center; }
.tcu-th-cb input, .tcu-td-cb input { accent-color: #7c5cff; width: 15px; height: 15px; cursor: pointer; }
.tcu-sid { letter-spacing: .02em; }
.tcu-phone { white-space: nowrap; }
body.staffdark .tcu-wa {
    background: none; border: none; cursor: pointer; color: #22c55e;
    font-size: 15px; margin-left: 6px; vertical-align: middle;
}
body.staffdark .tcu-wa:hover { color: #4ade80; }
body.staffdark .tcu-clear { color: #a78bfa; border-color: rgba(167, 139, 250, .35); }
.tcu-per { margin-left: 10px; }
body.staffdark .tcu-month {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #cbd5e1;
}
body.staffdark .tcu-month:hover { border-color: rgba(34,211,238,.45); }
body.staffdark .tcu-month.active { background: rgba(34,211,238,.14); border-color: #22d3ee; color: #e0f2fe; }
body.staffdark .tcu-month.cur .tcu-month-name::after { content: ' •'; color: #22d3ee; }
.tcu-month-name { font-weight: 700; font-size: 13px; }
.tcu-month-due { font-size: 11px; opacity: .75; }
.tcu-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 16px 0; }
body.staffdark .tcu-tab {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13px;
    background: transparent; border: 1px solid rgba(255,255,255,.1); color: #94a3b8;
}
body.staffdark .tcu-tab.active { background: rgba(34,211,238,.15); border-color: #22d3ee; color: #e0f2fe; }
body.staffdark .tcu-tab-n {
    min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px;
    font-size: 11px; background: rgba(255,255,255,.08);
}
body.staffdark .tcu-tab.active .tcu-tab-n { background: rgba(34,211,238,.3); }
.tcu-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; }
.tcu-tools .agent-search { flex: 1 1 220px; }
.tcu-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
body.staffdark .tcu-late  { background: rgba(248,113,113,.16); color: #fca5a5; }
body.staffdark .tcu-today { background: rgba(251,191,36,.18);  color: #fcd34d; }
body.staffdark .tcu-soon  { background: rgba(251,146,60,.15);  color: #fdba74; }
body.staffdark .tcu-up    { background: rgba(148,163,184,.14); color: #cbd5e1; }
body.staffdark .tcu-po-ok   { background: rgba(52,211,153,.15); color: #6ee7b7; }
body.staffdark .tcu-po-warn { background: rgba(251,191,36,.16); color: #fcd34d; }
body.staffdark .tcu-po-bad  { background: rgba(248,113,113,.16); color: #fca5a5; }
body.staffdark .tcu-po-appt  { background: rgba(251,146,60,.16); color: #fdba74; }
body.staffdark .tcu-po-gone  { background: rgba(148,163,184,.16); color: #cbd5e1; }
body.staffdark .tcu-po-retry { background: rgba(96,165,250,.16); color: #93c5fd; }
body.staffdark .tcu-stars { color: #fbbf24; letter-spacing: 1px; }
.tcu-latest { margin-top: 3px; }
body.staffdark .tcu-record.done { opacity: .55; }
.tcu-modal-bg {
    position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
    background: rgba(2,6,23,.7); backdrop-filter: blur(3px); padding: 16px;
}
.tcu-modal {
    width: 100%; max-width: 460px; border-radius: 16px; padding: 18px 20px;
    background: #0f172a; border: 1px solid rgba(255,255,255,.1); color: #e2e8f0;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.tcu-m-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.tcu-m-title { font-weight: 800; font-size: 16px; }
.tcu-m-title i { color: #22d3ee; margin-right: 6px; }
.tcu-m-sub { font-size: 12.5px; color: #94a3b8; margin-top: 2px; }
.tcu-m-x { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 16px; padding: 4px; }
.tcu-m-x:hover { color: #e2e8f0; }
.tcu-m-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.tcu-m-opt {
    display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
    padding: 12px 6px; border-radius: 12px; font-weight: 700; font-size: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #cbd5e1;
}
.tcu-m-opt i { font-size: 17px; }
.tcu-m-opt.tcu-po-ok i { color: #34d399; } .tcu-m-opt.tcu-po-warn i { color: #fbbf24; } .tcu-m-opt.tcu-po-bad i { color: #f87171; }
.tcu-m-opt.picked.tcu-po-ok   { border-color: #34d399; background: rgba(52,211,153,.12); }
.tcu-m-opt.picked.tcu-po-warn { border-color: #fbbf24; background: rgba(251,191,36,.12); }
.tcu-m-opt.picked.tcu-po-bad  { border-color: #f87171; background: rgba(248,113,113,.12); }
.tcu-m-lbl { display: block; font-size: 12px; font-weight: 700; color: #94a3b8; margin-bottom: 5px; }
.tcu-m-note {
    width: 100%; resize: vertical; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #e2e8f0;
}
.tcu-m-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.scp-cu-hist { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.scp-cu-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.scp-cu-month { font-weight: 700; min-width: 66px; }
.scp-cu-by { color: #64748b; }
.scp-cu-note { color: #64748b; font-style: italic; }
.scp-cu-row .tcu-pill { background: rgba(15,23,42,.06); }
.scp-cu-row .tcu-pill i { margin-right: 2px; }
@media (max-width: 720px) {
    .tcu-m-opts { grid-template-columns: 1fr; }
    .tcu-tools { flex-direction: column; align-items: stretch; }
}

/* ── Academy Wellness Check-Ups (.waw-*) — dark, reuses .tcu-* table/strip ──── */
body.staffdark .waw-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0;}
@media(max-width:820px){body.staffdark .waw-cards{grid-template-columns:repeat(2,1fr);}}
body.staffdark .waw-card{display:flex;align-items:center;gap:12px;background:#0d1825;border:1px solid #1c2a44;border-radius:14px;padding:14px 16px;}
body.staffdark .waw-card-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;background:#1d3058;color:#93a6c4;flex-shrink:0;}
body.staffdark .waw-card.tone-amber .waw-card-ic{background:rgba(251,191,36,.16);color:#fcd34d;}
body.staffdark .waw-card.tone-green .waw-card-ic{background:rgba(52,211,153,.15);color:#6ee7b7;}
body.staffdark .waw-card.tone-blue .waw-card-ic{background:rgba(96,165,250,.16);color:#93c5fd;}
body.staffdark .waw-card.tone-slate .waw-card-ic{background:rgba(148,163,184,.14);color:#cbd5e1;}
body.staffdark .waw-card-val{font-size:22px;font-weight:800;color:#f2f6ff;line-height:1;}
body.staffdark .waw-card-lbl{font-size:12px;color:#8ea1c0;margin-top:4px;}
body.staffdark .waw-att{color:#fca5a5;}
.crm-icon-btn.waw-call{color:#4ade80;}
.crm-icon-btn.waw-call.dnc{color:#f87171;opacity:.75;}
/* Compact draggable Creole call form — floats top-left, clears bottom-right dialer */
body.staffdark .waw-form{position:fixed;top:70px;left:40px;z-index:10050;width:400px;max-width:calc(100vw - 24px);max-height:calc(100vh - 90px);display:flex;flex-direction:column;background:#0d1825;border:1px solid #26385c;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;}
body.staffdark .waw-f-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;background:#111f35;border-bottom:1px solid #1c2a44;cursor:move;flex-shrink:0;}
body.staffdark .waw-f-title{font-weight:700;font-size:14px;color:#f2f6ff;display:flex;align-items:center;gap:7px;}
body.staffdark .waw-f-title i{color:#f472b6;}
body.staffdark .waw-f-sub{font-size:11.5px;color:#8ea1c0;margin-top:2px;}
body.staffdark .waw-f-x{background:none;border:none;color:#8ea1c0;font-size:16px;cursor:pointer;}
body.staffdark .waw-f-x:hover{color:#f87171;}
body.staffdark .waw-f-body{padding:12px 14px;overflow-y:auto;}
body.staffdark .waw-f-qs.waw-dim{opacity:.4;pointer-events:none;}
body.staffdark .waw-q{padding:8px 0;border-bottom:1px solid #172438;}
body.staffdark .waw-q-txt{font-size:12.5px;color:#dbe6f7;margin-bottom:6px;}
body.staffdark .waw-q-yn{display:flex;gap:6px;margin-bottom:6px;}
body.staffdark .waw-yn{flex:1;background:#111d33;border:1px solid #26385c;color:#cbd5e1;border-radius:8px;padding:5px 8px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;}
body.staffdark .waw-yn.on{border-color:#4e8ff8;background:rgba(78,143,248,.15);color:#dbeafe;}
body.staffdark .waw-q-note{width:100%;background:#0b1524;border:1px solid #1c2a44;color:#dbe6f7;border-radius:8px;padding:5px 8px;font-size:12px;}
body.staffdark .waw-f-lbl{display:block;font-size:11.5px;color:#8ea1c0;margin:10px 0 5px;font-weight:600;}
body.staffdark .waw-f-note{width:100%;background:#0b1524;border:1px solid #1c2a44;color:#dbe6f7;border-radius:8px;padding:6px 9px;font-size:12.5px;resize:vertical;}
body.staffdark .waw-f-opts{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
body.staffdark .waw-opt{background:#111d33;border:1px solid #26385c;color:#cbd5e1;border-radius:9px;padding:8px 10px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;justify-content:center;text-align:center;}
body.staffdark .waw-opt.tcu-po-ok i{color:#34d399;}body.staffdark .waw-opt.tcu-po-warn i{color:#fbbf24;}body.staffdark .waw-opt.tcu-po-bad i{color:#f87171;}
body.staffdark .waw-opt.tcu-po-appt i{color:#fb923c;}body.staffdark .waw-opt.tcu-po-gone i{color:#94a3b8;}body.staffdark .waw-opt.tcu-po-retry i{color:#60a5fa;}
/* Technical check-up form: multi-choice answer chips + 1–5 star rating */
body.staffdark .tcu-q-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
body.staffdark .tcu-chip{background:#111d33;border:1px solid #26385c;color:#cbd5e1;border-radius:999px;padding:5px 10px;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
body.staffdark .tcu-chip i{color:#8ea1c0;font-size:11px;}
body.staffdark .tcu-chip.on{border-color:#4e8ff8;background:rgba(78,143,248,.14);color:#f2f6ff;}
body.staffdark .tcu-chip.on i{color:#7fb0fb;}
body.staffdark .tcu-appt{margin-top:6px;}
body.staffdark .tcu-stars-in{display:flex;gap:4px;margin-top:6px;}
body.staffdark .tcu-star{background:none;border:none;cursor:pointer;font-size:19px;color:#31405e;padding:2px;}
body.staffdark .tcu-star.on{color:#fbbf24;}
body.staffdark .waw-opt.picked{border-color:#4e8ff8;background:rgba(78,143,248,.14);color:#f2f6ff;}
body.staffdark .waw-f-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
/* Live-call WebRTC connection-failure notice (fail loudly, never silent dead air) */
.rtc-conn-notice{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:12000;max-width:min(560px,calc(100vw - 24px));background:#3b0f14;border:1px solid #7f1d1d;color:#fecaca;border-radius:12px;padding:10px 14px;font-size:12.5px;line-height:1.45;display:flex;align-items:flex-start;gap:9px;box-shadow:0 8px 24px rgba(0,0,0,.45);}
.rtc-conn-notice i{color:#f87171;font-size:14px;margin-top:2px;flex:none;}
.rtc-conn-notice b{color:#fff;}

/* Approve-dialog price preview (Task #1049 — price-driven months + wallet-first math) */
.pa-preview { border: 1px solid var(--border); background: #f8fafc; border-radius: 10px; padding: .55rem .75rem; margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .3rem; }
.pa-pv-row { display: flex; justify-content: space-between; gap: .75rem; font-size: .82rem; color: #334155; }
.pa-pv-row b { color: #0f172a; white-space: nowrap; }
.pa-pv-sub { font-size: .76rem; color: #64748b; }
.pa-pv-warn, .pa-pv-warn b { color: #b45309; }
.pa-grant { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px; padding: .6rem .75rem; margin: 0 0 1rem; font-size: .82rem; line-height: 1.4; cursor: pointer; }
.pa-grant input { margin-top: .2rem; }
.pa-grant[hidden] { display: none; }

/* ═══ Forms & Lead Capture (Task #1028) ═══════════════════════════════════ */
/* CRM Forms module (light, rides the CRM body) */
.fmz-shell { display: flex; flex-direction: column; gap: 14px; }
.fmz-subtabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; }
.fmz-subtab { border: 1px solid #e2e8f0; background: #fff; color: #475569; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.fmz-subtab:hover { border-color: #94a3b8; }
.fmz-subtab.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.fmz-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fmz-chips { display: flex; gap: 5px; }
.fmz-chip { border: 1px solid #e2e8f0; background: #fff; color: #64748b; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.fmz-chip.active { background: #0f172a; border-color: #0f172a; color: #fff; }
/* Task #1077: WhatsApp undelivered count badge + warn-tinted select */
.fmz-wa-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fmz-wa-badge:hover { background: #fee2e2; }
.fmz-in.fmz-wa-warnsel { border-color: #f87171; color: #b91c1c; }
.fmz-ro-pill { background: #fef3c7; color: #92400e; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.fmz-table-wrap { overflow: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.fmz-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fmz-table th { text-align: left; padding: 10px 14px; background: #f8fafc; color: #64748b; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #e2e8f0; }
.fmz-table td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.fmz-table tbody tr:hover { background: #f8fafc; }
.fmz-name { display: flex; align-items: center; gap: 10px; }
.fmz-name > i { color: #2563eb; width: 18px; text-align: center; }
.fmz-name span { display: block; font-size: 11.5px; color: #94a3b8; }
.fmz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fmz-pill.fmz-draft { background: #f1f5f9; color: #64748b; }
.fmz-pill.fmz-active { background: #dcfce7; color: #15803d; }
.fmz-pill.fmz-paused { background: #fef3c7; color: #b45309; }
.fmz-pill.fmz-arch { background: #fee2e2; color: #b91c1c; }
.fmz-rowact { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.fmz-placeholder { text-align: center; padding: 60px 20px; color: #64748b; }
.fmz-ph-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.fmz-placeholder h3 { color: #0f172a; margin: 0 0 6px; }
.fmz-placeholder p { max-width: 420px; margin: 0 auto 16px; }
.fmz-menu { position: fixed; z-index: 4000; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.15); padding: 6px; min-width: 190px; display: flex; flex-direction: column; }
.fmz-menu button { display: flex; align-items: center; gap: 9px; background: none; border: 0; text-align: left; padding: 8px 11px; border-radius: 7px; font-size: 13px; color: #334155; cursor: pointer; }
.fmz-menu button:hover { background: #f1f5f9; }
.fmz-menu button.danger { color: #dc2626; }
.fmz-menu button i { width: 15px; text-align: center; }
/* Create-form wizard */
.fmz-create { width: min(760px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
.fmz-create-body { padding: 4px 18px 14px; overflow: auto; }
.fmz-lb { display: block; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
.fmz-in { width: 100%; border: 1px solid #cbd5e1; border-radius: 9px; padding: 9px 12px; font-size: 14px; }
.fmz-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fmz-mode { border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 14px 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.fmz-mode i { color: #2563eb; font-size: 17px; margin-bottom: 3px; }
.fmz-mode b { font-size: 13.5px; color: #0f172a; }
.fmz-mode span { font-size: 12px; color: #64748b; }
.fmz-mode.active { border-color: #2563eb; background: #eff6ff; }
.fmz-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 240px; overflow: auto; }
.fmz-tpl { border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 10px; text-align: left; cursor: pointer; }
.fmz-tpl i { color: #2563eb; }
.fmz-tpl b { display: block; font-size: 13px; color: #0f172a; margin: 4px 0 2px; }
.fmz-tpl span { font-size: 11.5px; color: #64748b; display: block; }
.fmz-tpl.active { border-color: #2563eb; background: #eff6ff; }
.fmz-type-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.fmz-type { border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.fmz-type.active { border-color: #2563eb; background: #2563eb; color: #fff; }
/* Audit modal */
.fmz-audit { width: min(680px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.fmz-audit-list { overflow: auto; padding: 6px 18px 18px; }
.fmz-audit-row { border-bottom: 1px solid #f1f5f9; padding: 10px 2px; }
.fmz-audit-act { font-weight: 700; color: #0f172a; text-transform: capitalize; font-size: 13.5px; }
.fmz-audit-meta { font-size: 12px; color: #94a3b8; margin-top: 1px; }
.fmz-audit-diff { font-size: 11.5px; color: #64748b; margin-top: 4px; }
.fmz-audit-diff code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; word-break: break-all; }

/* ── Share dialog + Submissions tab (Forms Phase 2) ─────────────────────── */
.fmz-share { width: min(560px, 94vw); }
.fmz-share-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; max-height: 74vh; overflow: auto; }
.fmz-share-warn { background: #fef3c7; color: #92400e; border-radius: 10px; padding: 10px 13px; font-size: 13px; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.fmz-share-lb { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-top: 10px; }
.fmz-share-row { display: flex; gap: 8px; align-items: flex-start; }
.fmz-share-row input, .fmz-share-row textarea { flex: 1; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 9px; color: #334155; background: #f8fafc; min-width: 0; }
.fmz-share-row textarea { resize: vertical; font-family: ui-monospace, monospace; font-size: 12px; }
.fmz-share-hint { font-size: 11.5px; color: #94a3b8; }
.fmz-share-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fmz-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.fmz-stat b { font-size: 17px; color: #0f172a; }
.fmz-stat span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.fmz-spam-n { color: #b91c1c; font-weight: 700; }
.fmz-share-qr { display: flex; gap: 14px; align-items: center; }
.fmz-share-qr img { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.fmz-sub-new td { background: #f0f7ff; }
.fmz-subref { font-weight: 700; letter-spacing: .02em; }
.fmz-subans { max-width: 340px; font-size: 12.5px; color: #64748b; }
.fmz-pill.live { background: #dbeafe; color: #1d4ed8; }
.fmz-pill.warn { background: #fee2e2; color: #b91c1c; }
.fmz-subview { width: min(640px, 94vw); }
.fmz-sub-answers { display: flex; flex-direction: column; gap: 10px; }
.fmz-sub-arow label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: 2px; }
.fmz-sub-arow div { font-size: 14px; color: #1e293b; white-space: pre-wrap; word-break: break-word; }
.fmz-sub-meta { margin-top: 14px; border-top: 1px solid #e2e8f0; padding-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; font-size: 12.5px; color: #475569; }
.fmz-sub-meta span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }

/* ── Builder overlay (.fbx) — self-contained dark, never leaks ───────────── */
body.fbx-open { overflow: hidden; }
.fbx { position: fixed; inset: 0; z-index: 5000; background: #0b1220; color: #e2e8f0; display: flex; flex-direction: column; font-size: 13.5px; }
.fbx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #0f172a; border-bottom: 1px solid #1e293b; }
.fbx-top-l, .fbx-top-c, .fbx-top-r { display: flex; align-items: center; gap: 8px; }
.fbx-title { font-weight: 700; display: flex; align-items: center; gap: 9px; }
.fbx-title i { color: #60a5fa; }
.fbx-dirty { color: #fbbf24; font-size: 11.5px; font-weight: 600; margin-left: 6px; }
.fbx-ic { width: 34px; height: 34px; border-radius: 9px; border: 1px solid #1e293b; background: #111c31; color: #94a3b8; cursor: pointer; }
.fbx-ic:hover:not(:disabled) { color: #e2e8f0; border-color: #334155; }
.fbx-ic.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.fbx-ic:disabled { opacity: .4; cursor: default; }
.fbx-save { background: #16a34a; border: 0; color: #fff; font-weight: 700; padding: 9px 16px; border-radius: 9px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.fbx-save:hover { background: #15803d; }
.fbx-main { flex: 1; display: grid; grid-template-columns: 250px 1fr 300px; min-height: 0; }
.fbx-left { background: #0f172a; border-right: 1px solid #1e293b; overflow: auto; }
.fbx-ro-note { padding: 16px; color: #fbbf24; font-weight: 600; }
.fbx-pal { padding: 12px; }
.fbx-pal-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; margin: 14px 0 7px; }
.fbx-pal-group:first-child { margin-top: 0; }
.fbx-pal-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fbx-pal-item { border: 1px solid #1e293b; background: #111c31; border-radius: 9px; padding: 8px 9px; font-size: 12px; color: #cbd5e1; cursor: grab; display: flex; align-items: center; gap: 7px; }
.fbx-pal-item i { color: #60a5fa; width: 14px; text-align: center; }
.fbx-pal-item:hover { border-color: #3b82f6; }
.fbx-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fbx-pagebar { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid #1e293b; background: #0d1526; }
.fbx-page { border: 1px solid #1e293b; background: #111c31; color: #94a3b8; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fbx-page.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.fbx-page.add { border-style: dashed; }
.fbx-pg-n { width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; }
.fbx-pg-x { opacity: .6; margin-left: 2px; }
.fbx-pg-x:hover { opacity: 1; color: #f87171; }
.fbx-canvas-wrap { flex: 1; overflow: auto; padding: 26px 20px 60px; display: flex; justify-content: center; align-items: flex-start; background: repeating-conic-gradient(#0b1220 0% 25%, #0c1424 0% 50%) 0 0/28px 28px; }
.fbx-canvas { width: 100%; max-width: 720px; transition: max-width .2s; }
.fbx-canvas.fbx-dev-tablet { max-width: 480px; }
.fbx-canvas.fbx-dev-mobile { max-width: 360px; }
.fbx-formcard { background: var(--fbx-form-bg, #fff); color: #0f172a; border-radius: 14px; padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.fbx-form-logo { max-height: 52px; display: block; margin: 0 auto 12px; }
.fbx-form-header { width: 100%; border-radius: 10px; margin-bottom: 14px; display: block; }
.fbx-progress { height: 6px; border-radius: 99px; background: #e2e8f0; margin-bottom: 16px; overflow: hidden; }
.fbx-progress > div { height: 100%; background: var(--fbx-btn, #2563eb); border-radius: 99px; }
.fbx-drop { min-height: 120px; display: flex; flex-direction: column; gap: 10px; border-radius: 10px; }
.fbx-drop.over { outline: 2px dashed #3b82f6; outline-offset: 4px; }
.fbx-empty { border: 1.5px dashed #cbd5e1; border-radius: 10px; padding: 34px 16px; text-align: center; color: #94a3b8; font-size: 13px; }
.fbx-el { position: relative; border: 1.5px solid transparent; border-radius: 9px; padding: 8px 10px; cursor: pointer; }
.fbx-el:hover { border-color: #bfdbfe; }
.fbx-el.sel { border-color: #2563eb; background: #eff6ff; }
.fbx-el.dragging { opacity: .5; }
.fbx-el-lb { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 5px; }
.fbx-el-lb b { color: #dc2626; }
.fbx-el-in { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 11px; font-size: 13.5px; background: #fff; color: #64748b; }
.fbx-el-h { margin: 2px 0; font-size: 19px; color: #0f172a; }
.fbx-el-p { margin: 2px 0; color: #475569; font-size: 13.5px; }
.fbx-el-hr { border: 0; border-top: 1px solid #e2e8f0; margin: 6px 0; }
.fbx-el-img { max-width: 100%; border-radius: 8px; display: block; }
.fbx-el-imgph { border: 1.5px dashed #cbd5e1; border-radius: 8px; padding: 22px; text-align: center; color: #94a3b8; }
.fbx-el-opts { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #475569; }
.fbx-el-opts i { color: #94a3b8; margin-right: 6px; }
.fbx-el-stars { color: #f59e0b; font-size: 17px; display: flex; gap: 3px; }
.fbx-el-tools { position: absolute; top: -12px; right: 8px; display: none; gap: 4px; background: #0f172a; border-radius: 8px; padding: 5px 8px; }
.fbx-el:hover .fbx-el-tools, .fbx-el.sel .fbx-el-tools { display: flex; }
.fbx-el-tools i { color: #94a3b8; cursor: pointer; font-size: 12px; padding: 2px; }
.fbx-el-tools i:hover { color: #fff; }
.fbx-el-tools .fbx-grab { cursor: grab; }
.fbx-el-logic { position: absolute; top: -9px; left: 8px; background: #7c3aed; color: #fff; border-radius: 99px; font-size: 9.5px; padding: 2px 7px; }
.fbx-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fbx-form-btn { background: var(--fbx-btn, #2563eb); color: #fff; border: 0; border-radius: 9px; padding: 10px 20px; font-weight: 700; font-size: 13.5px; }
.fbx-form-btn.ghost { background: #f1f5f9; color: #475569; }
.fbx-right { background: #0f172a; border-left: 1px solid #1e293b; overflow: auto; display: flex; flex-direction: column; }
.fbx-rtabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #1e293b; }
.fbx-rtab { background: none; border: 0; border-bottom: 2px solid transparent; color: #64748b; padding: 11px 4px; font-size: 11px; font-weight: 700; cursor: pointer; }
.fbx-rtab i { display: block; margin: 0 auto 3px; font-size: 13px; }
.fbx-rtab.active { color: #60a5fa; border-bottom-color: #3b82f6; }
.fbx-rbody { padding: 14px; }
.fbx-rsec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; margin: 16px 0 9px; }
.fbx-rsec:first-child { margin-top: 0; }
.fbx-rempty { color: #64748b; text-align: center; padding: 22px 10px; font-size: 12.5px; }
.fbx-frow { margin-bottom: 11px; }
.fbx-frow label { display: block; font-size: 11.5px; color: #94a3b8; font-weight: 600; margin-bottom: 4px; }
.fbx-frow input[type="text"], .fbx-frow input[type="number"], .fbx-frow textarea, .fbx-frow select { width: 100%; background: #111c31; border: 1px solid #1e293b; color: #e2e8f0; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.fbx-frow input[type="color"] { width: 44px; height: 30px; border: 1px solid #1e293b; border-radius: 7px; background: #111c31; padding: 2px; }
.fbx-frow input[type="range"] { width: 100%; }
.fbx-rule { border: 1px solid #1e293b; border-radius: 10px; padding: 11px; margin-bottom: 10px; background: #0d1526; }
.fbx-imgctl { display: flex; gap: 6px; }
@media (max-width: 980px) {
    .fbx-main { grid-template-columns: 200px 1fr 250px; }
}

/* Forms builder — layout palette elements + top-bar status controls (review fixes) */
.fbx-el-cols { display: flex; gap: 10px; }
.fbx-el-cols span { flex: 1; height: 44px; border: 1.5px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; }
.fbx-el-section { font-weight: 800; font-size: 15px; color: #111827; border-bottom: 2px solid #e5e7eb; padding-bottom: 6px; }
.fbx-el-cardblk, .fbx-el-containerblk { border: 1.5px dashed #cbd5e1; border-radius: 10px; padding: 16px; background: #f8fafc; font-weight: 700; color: #475569; font-size: 13px; }
.fbx-el-cardblk { box-shadow: 0 2px 8px rgba(0,0,0,.06); background: #fff; }
.fbx-el-cardblk span, .fbx-el-containerblk span { display: block; font-weight: 500; color: #94a3b8; font-size: 12px; margin-top: 4px; }
.fbx-el-break { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fbx-el-break::before, .fbx-el-break::after { content: ''; flex: 1; border-top: 2px dashed #cbd5e1; }
.fbx-status-sel { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; margin-right: 4px; }
.fbx-save.fbx-pub { background: #16a34a; }
.fbx-save.fbx-sharebtn { background: #2563eb; }
.fbx-save.fbx-sharebtn:hover { background: #1d4ed8; }
.fbx-save.fbx-pub:hover { background: #15803d; }
.fbx-save.fbx-pub.live { background: #d97706; }
.fbx-save.fbx-pub.live:hover { background: #b45309; }
.fbx-formcard { font-family: var(--fbx-font, inherit); }
.fbx-formcard .fbx-el-lb { color: var(--fbx-label, #111827); }
.fbx-drop { gap: var(--fbx-gap, 14px); }

/* ── Forms Phase 5: workflows / analytics / settings tabs ── */
.fmz-pill.ok { background: #dcfce7; color: #15803d; }
.fmz-an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.fmz-an-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.fmz-an-card h4 { margin: 0 0 8px; font-size: 13px; color: #0f172a; }
.fmz-an-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; color: #334155; border-bottom: 1px dashed #f1f5f9; }
.fmz-an-row:last-child { border-bottom: 0; }
.fmz-an-frow { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; color: #334155; }
.fmz-an-bar { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.fmz-an-bar > div { height: 100%; background: #3b82f6; border-radius: 999px; }
.fmz-set-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; max-width: 640px; }
.fmz-set-card h4 { margin: 0 0 6px; font-size: 14px; color: #0f172a; }
.fmz-set-card .fmz-in { margin-bottom: 4px; }

/* ═══ Quiz & Assessment module (Task #1111) ═══ */
/* Admin list (staffdark) */
body.staffdark .qz-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
body.staffdark .qz-tab { background: #1e293b; border: 1px solid #334155; color: #94a3b8; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
body.staffdark .qz-tab.on { background: #10b98122; border-color: #10b981; color: #34d399; }
body.staffdark .qz-tab-n { opacity: .7; font-size: 11px; }
body.staffdark .qz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
body.staffdark .qz-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
body.staffdark .qz-card-top { display: flex; align-items: center; gap: 6px; }
body.staffdark .qz-card-top .qz-kebab { margin-left: auto; background: none; border: none; color: #64748b; cursor: pointer; padding: 4px 8px; }
body.staffdark .qz-card-title { margin: 0; font-size: 16px; color: #f1f5f9; }
body.staffdark .qz-card-meta { font-size: 12px; color: #94a3b8; }
body.staffdark .qz-card-stats { display: flex; gap: 14px; font-size: 12px; color: #cbd5e1; }
body.staffdark .qz-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.qz-pill { display: inline-block; font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 1px 9px; }
body.staffdark .qz-empty { text-align: center; color: #64748b; padding: 60px 0; }
body.staffdark .qz-empty i { font-size: 40px; margin-bottom: 12px; display: block; }
.qz-menu { position: fixed; z-index: 1200; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 4px; display: flex; flex-direction: column; min-width: 180px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.qz-menu button { background: none; border: none; color: #e2e8f0; text-align: left; padding: 8px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.qz-menu button:hover { background: #334155; }
.qz-menu button.danger { color: #f87171; }
body.staffdark .qz-statrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
body.staffdark .qz-stat { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 10px 18px; text-align: center; }
body.staffdark .qz-stat b { display: block; font-size: 20px; color: #f1f5f9; }
body.staffdark .qz-stat span { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
body.staffdark .qz-stat.ok b { color: #34d399; }
body.staffdark .qz-stat.bad b { color: #f87171; }
body.staffdark .qz-subhead { color: #e2e8f0; margin: 22px 0 10px; }

/* Builder wizard + dialogs (.qzw — self-contained dark modal) */
.qzw { position: fixed; inset: 0; z-index: 1100; background: rgba(2,6,23,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.qzw-modal { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; width: min(780px, 100%); max-height: 92vh; display: flex; flex-direction: column; color: #e2e8f0; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.qzw-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #1e293b; }
.qzw-head h2 { margin: 0; font-size: 17px; color: #f1f5f9; }
.qzw-head h2 i { color: #34d399; margin-right: 8px; }
.qzw-x { background: none; border: none; color: #64748b; font-size: 18px; cursor: pointer; }
.qzw-steps { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid #1e293b; font-size: 12px; color: #64748b; flex-wrap: wrap; }
.qzw-step { display: flex; align-items: center; gap: 6px; }
.qzw-step i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #1e293b; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.qzw-step.on { color: #34d399; }
.qzw-step.on i { background: #10b981; color: #04121c; }
.qzw-step.done { color: #94a3b8; }
.qzw-step.done i { background: #10b98144; color: #34d399; }
.qzw-step-sep { flex: 0 0 14px; height: 1px; background: #334155; }
.qzw-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.qzw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid #1e293b; }
.qzw-foot-r { display: flex; gap: 8px; }
.qzw-row { margin-bottom: 12px; }
.qzw-row label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 5px; font-weight: 600; }
.qzw-row label small { font-weight: 400; opacity: .8; }
.qzw-row input[type=text], .qzw-row input[type=number], .qzw-row input[type=datetime-local], .qzw-row select, .qzw-row textarea, .qzw-q textarea, .qzw-q input, .qzw-q select { width: 100%; background: #020617; border: 1px solid #334155; border-radius: 9px; color: #e2e8f0; padding: 8px 11px; font-size: 13px; font-family: inherit; }
.qzw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .qzw-cols { grid-template-columns: 1fr; } }
.qzw-check label { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: #e2e8f0; }
.qzw-check input, .qzw-tg input { width: auto; accent-color: #10b981; }
.qzw-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qzw-tg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cbd5e1; cursor: pointer; }
.qzw-qtools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qzw-qcount { font-size: 12px; color: #94a3b8; }
.qzw-q { background: #020617; border: 1px solid #1e293b; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.qzw-q-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.qzw-q-n { font-weight: 800; color: #34d399; font-size: 13px; }
.qzw-q-head select { width: auto; }
.qzw-q-sec { flex: 1; min-width: 100px; }
.qzw-q-pts { width: 68px !important; }
.qzw-q textarea { margin-bottom: 8px; }
.qzw-q-expl { margin-top: 8px; font-size: 12px !important; }
.qzw-mini { background: #1e293b; border: 1px solid #334155; color: #94a3b8; border-radius: 7px; width: 28px; height: 28px; cursor: pointer; }
.qzw-mini.danger { color: #f87171; }
.qzw-opts { display: flex; flex-direction: column; gap: 6px; }
.qzw-opt { display: flex; align-items: center; gap: 8px; }
.qzw-opt input[type=radio], .qzw-opt input[type=checkbox] { width: auto; accent-color: #10b981; }
.qzw-arrow { color: #64748b; }
.qzw-addopt, .qzw-addq { background: none; border: 1px dashed #334155; color: #94a3b8; border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 13px; width: 100%; }
.qzw-addq { padding: 12px; }
.qzw-addopt:hover, .qzw-addq:hover { border-color: #10b981; color: #34d399; }
.qzw-review { display: flex; flex-direction: column; gap: 8px; }
.qzw-rv { display: flex; justify-content: space-between; gap: 12px; background: #020617; border: 1px solid #1e293b; border-radius: 9px; padding: 9px 13px; font-size: 13px; }
.qzw-rv span { color: #94a3b8; }
.qzw-hint { font-size: 12px; color: #64748b; margin-top: 12px; }
.qza-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 160px; overflow-y: auto; background: #020617; border: 1px solid #1e293b; border-radius: 9px; padding: 10px; }
.qza-hits { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.qza-hit { background: #1e293b; border: 1px solid #334155; color: #e2e8f0; border-radius: 8px; padding: 7px 11px; text-align: left; cursor: pointer; font-size: 13px; }
.qza-hit small { color: #94a3b8; margin-left: 6px; }
.qza-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qza-chip { background: #10b98122; border: 1px solid #10b98155; color: #34d399; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.qza-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; }
/* Attempt review list (shared staff + student) */
.qz-review-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.qz-rq { border: 1px solid #1e293b; border-left: 4px solid #334155; border-radius: 10px; padding: 11px 14px; background: #0f172a; color: #e2e8f0; font-size: 13px; }
.qz-rq.ok { border-left-color: #10b981; }
.qz-rq.bad { border-left-color: #ef4444; }
.qz-rq-head { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.qz-rq-n { background: #1e293b; border-radius: 6px; padding: 1px 7px; font-size: 11px; color: #94a3b8; }
.qz-rq-pts { margin-left: auto; color: #94a3b8; font-size: 11px; white-space: nowrap; }
.qz-rq-a span, .qz-rq-c span { color: #94a3b8; }
.qz-rq-c { color: #34d399; }
.qz-rq-e { margin-top: 6px; color: #fbbf24; font-size: 12px; }

/* Student side (.qzp — dark, standalone; NOT staffdark) */
.qzp-view { min-height: 100dvh; background: linear-gradient(160deg, #0b1226, #101a35 55%, #0b1226); color: #e2e8f0; font-family: inherit; }
.qzp-shell { max-width: 900px; margin: 0 auto; padding: 26px 18px 50px; }
.qzp-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.qzp-top h1 { margin: 0; font-size: 24px; color: #f1f5f9; }
.qzp-top h1 i { color: #fbbf24; margin-right: 10px; }
.qzp-back { align-self: flex-start; background: #1e293b; border: 1px solid #334155; color: #cbd5e1; border-radius: 999px; padding: 7px 15px; cursor: pointer; font-size: 13px; }
.qzp-gh { font-size: 15px; color: #94a3b8; margin: 22px 0 10px; }
.qzp-gh i { margin-right: 7px; }
.qzp-lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.qzp-lcard { background: #0f172aee; border: 1px solid #1e293b; border-radius: 14px; padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.qzp-lcard-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: #f1f5f9; }
.qzp-chip { background: #1e293b; border-radius: 999px; padding: 2px 10px; font-size: 11px; color: #94a3b8; }
.qzp-ldesc { margin: 0; font-size: 12.5px; color: #94a3b8; }
.qzp-lmeta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #cbd5e1; }
.qzp-lscore { font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 5px 10px; }
.qzp-lscore.ok { background: #10b98118; color: #34d399; }
.qzp-lscore.bad { background: #ef444418; color: #f87171; }
.qzp-lact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.qzp-go { background: linear-gradient(135deg, #10b981, #059669); border: none; color: #04121c; font-weight: 700; border-radius: 10px; padding: 9px 16px; cursor: pointer; font-size: 13px; }
.qzp-go.alt { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; }
.qzp-empty { text-align: center; color: #64748b; padding: 70px 0; }
.qzp-empty i { font-size: 42px; display: block; margin-bottom: 12px; }
/* Start screen */
.qzp-startcard { max-width: 560px; margin: 8vh auto 0; background: #0f172aee; border: 1px solid #1e293b; border-radius: 20px; padding: 34px 30px; text-align: center; }
.qzp-start-ico { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #0891b2); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #04121c; }
.qzp-startcard h1 { margin: 0 0 8px; font-size: 22px; color: #f1f5f9; }
.qzp-sdesc { color: #94a3b8; font-size: 14px; margin: 0 0 18px; }
.qzp-sstats { display: flex; justify-content: center; gap: 26px; margin: 18px 0; }
.qzp-sstats b { display: block; font-size: 22px; color: #34d399; }
.qzp-sstats span { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.qzp-snote { font-size: 12px; color: #64748b; margin: 14px 0 18px; }
.qzp-snote.qzp-pausenote { margin: -8px 0 18px; color: #34d399; background: #10b98114; border: 1px solid #10b98133; border-radius: 10px; padding: 8px 12px; }
.qzp-snote.qzp-pausenote i { margin-right: 6px; }
.qzp-warn { color: #fbbf24; font-size: 13px; }
.qzp-bigstart { background: linear-gradient(135deg, #10b981, #059669); border: none; color: #04121c; font-weight: 800; font-size: 16px; border-radius: 12px; padding: 14px 34px; cursor: pointer; box-shadow: 0 10px 26px rgba(16,185,129,.3); }
.qzp-bigstart.sm { font-size: 14px; padding: 10px 22px; }
/* Player */
.qzp-play { display: flex; flex-direction: column; height: 100dvh; }
.qzp-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: #0f172a; border-bottom: 1px solid #1e293b; }
.qzp-hud-l { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #f1f5f9; min-width: 0; }
.qzp-hud-l b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qzp-hud-r { display: flex; align-items: center; gap: 10px; }
.qzp-timer { font-variant-numeric: tabular-nums; background: #1e293b; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700; color: #34d399; }
.qzp-timer.low { color: #fbbf24; }
.qzp-timer.crit { color: #f87171; animation: qzpBlink 1s infinite; }
/* "Timer paused while you were away" banner (Task #1122) */
.qzp-pause-notice { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4000; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 480px); background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 11px 16px; color: #e2e8f0; font-size: 13.5px; line-height: 1.4; box-shadow: 0 12px 30px rgba(2,6,23,.55); animation: qzpPnIn .3s ease; }
.qzp-pause-notice i { color: #34d399; font-size: 17px; flex: none; }
.qzp-pause-notice.hide { opacity: 0; transform: translateX(-50%) translateY(-8px); transition: opacity .4s ease, transform .4s ease; }
@keyframes qzpPnIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .qzp-pause-notice { animation: none; } }
@keyframes qzpBlink { 50% { opacity: .45; } }
.qzp-submitbtn { background: #10b981; border: none; color: #04121c; font-weight: 700; border-radius: 9px; padding: 8px 14px; cursor: pointer; font-size: 13px; }
.qzp-prog { height: 4px; background: #1e293b; }
.qzp-prog-bar { height: 100%; width: 0; background: linear-gradient(90deg, #10b981, #22d3ee); transition: width .25s; }
.qzp-main { flex: 1; display: flex; gap: 16px; padding: 18px; overflow: hidden; max-width: 1000px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.qzp-qarea { flex: 1; overflow-y: auto; min-width: 0; }
.qzp-qcard { background: #0f172aee; border: 1px solid #1e293b; border-radius: 16px; padding: 22px; }
.qzp-qhead { display: flex; justify-content: space-between; font-size: 12px; color: #94a3b8; margin-bottom: 12px; }
.qzp-qtext { margin: 0 0 18px; font-size: 18px; color: #f1f5f9; line-height: 1.45; }
.qzp-media { max-width: 100%; border-radius: 10px; margin-bottom: 14px; }
.qzp-opts { display: flex; flex-direction: column; gap: 9px; }
.qzp-opt { display: flex; align-items: center; gap: 12px; background: #020617; border: 1px solid #334155; color: #e2e8f0; border-radius: 11px; padding: 13px 15px; cursor: pointer; font-size: 14.5px; text-align: left; transition: border-color .12s, background .12s; }
.qzp-opt:hover { border-color: #10b981aa; }
.qzp-opt.on { border-color: #10b981; background: #10b98115; }
.qzp-opt-r, .qzp-opt-c { flex: 0 0 18px; width: 18px; height: 18px; border: 2px solid #475569; border-radius: 50%; }
.qzp-opt-c { border-radius: 5px; }
.qzp-opt.on .qzp-opt-r, .qzp-opt.on .qzp-opt-c { border-color: #10b981; background: radial-gradient(circle, #10b981 45%, transparent 50%); }
.qzp-opt.on .qzp-opt-c { background: #10b981; }
.qzp-text { width: 100%; background: #020617; border: 1px solid #334155; border-radius: 11px; color: #e2e8f0; padding: 13px 15px; font-size: 15px; box-sizing: border-box; }
.qzp-hint { font-size: 12px; color: #94a3b8; margin: 0 0 10px; }
.qzp-match { display: flex; flex-direction: column; gap: 9px; }
.qzp-match-row { display: flex; align-items: center; gap: 12px; }
.qzp-match-l { flex: 1; background: #020617; border: 1px solid #1e293b; border-radius: 9px; padding: 10px 13px; font-size: 14px; }
.qzp-match-row select { flex: 1; background: #020617; border: 1px solid #334155; border-radius: 9px; color: #e2e8f0; padding: 10px 12px; font-size: 14px; }
.qzp-nav { flex: 0 0 190px; background: #0f172aee; border: 1px solid #1e293b; border-radius: 14px; padding: 13px; align-self: flex-start; }
@media (max-width: 760px) { .qzp-nav { display: none; } }
.qzp-nav-h { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px; }
.qzp-nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.qzp-navb { background: #1e293b; border: 1px solid #334155; color: #cbd5e1; border-radius: 7px; height: 28px; cursor: pointer; font-size: 12px; position: relative; }
.qzp-navb.done { background: #10b98126; border-color: #10b98166; color: #34d399; }
.qzp-navb.on { border-color: #22d3ee; box-shadow: 0 0 0 1px #22d3ee inset; }
.qzp-navb.flagged::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; }
.qzp-nav-leg { display: flex; gap: 12px; margin-top: 10px; font-size: 10.5px; color: #94a3b8; }
.qzp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.qzp-dot.done { background: #34d399; }
.qzp-dot.flagged { background: #fbbf24; }
.qzp-foot { display: flex; justify-content: center; gap: 10px; padding: 12px 18px 18px; }
.qzp-fbtn { background: #1e293b; border: 1px solid #334155; color: #cbd5e1; border-radius: 10px; padding: 10px 20px; cursor: pointer; font-size: 14px; }
.qzp-fbtn:disabled { opacity: .4; cursor: default; }
.qzp-fbtn.next { background: #10b981; border-color: #10b981; color: #04121c; font-weight: 700; }
.qzp-fbtn.flag.on { border-color: #fbbf24; color: #fbbf24; }
.qzp-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(2,6,23,.75); display: flex; align-items: center; justify-content: center; padding: 18px; }
.qzp-mcard { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; padding: 26px 28px; text-align: center; color: #e2e8f0; max-width: 420px; width: 100%; }
.qzp-mcard h2 { margin: 0 0 16px; font-size: 19px; color: #f1f5f9; }
.qzp-mstats { display: flex; justify-content: center; gap: 24px; margin-bottom: 14px; }
.qzp-mstats b { display: block; font-size: 22px; color: #34d399; }
.qzp-mstats .warn b { color: #fbbf24; }
.qzp-mstats span { font-size: 11px; color: #94a3b8; text-transform: uppercase; }
.qzp-mact { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
/* Result screen */
.qzp-result { max-width: 760px; }
.qzp-rescard { background: #0f172aee; border: 1px solid #1e293b; border-radius: 20px; padding: 32px 28px; text-align: center; }
.qzp-rescard h1 { margin: 12px 0 6px; font-size: 22px; color: #f1f5f9; }
.qzp-rmeta { font-size: 12px; color: #64748b; margin-top: 10px; }
.qzp-circle { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: conic-gradient(#10b981 calc(var(--p) * 1%), #1e293b 0); position: relative; }
.qzp-circle.bad { background: conic-gradient(#ef4444 calc(var(--p) * 1%), #1e293b 0); }
.qzp-circle::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #0f172a; }
.qzp-circle span { position: relative; font-size: 28px; font-weight: 800; color: #f1f5f9; }
/* Student-portal mini card */
.att-mini-quiz { border-color: #c7d2fe; background: #eef2ff; }
.att-mini-quiz .att-mini-label i { color: #6366f1; }
body.staffdark .qzr-classbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

/* ── Generic staff modal (unlock quiz, edit certificate) ─────────────────────
   .modal-overlay/.modal-card are used by document.body-appended dialogs; without
   these rules the dialog renders unstyled at the bottom of the page. */
.modal-overlay { position: fixed; inset: 0; z-index: 9300; background: rgba(2,6,17,.66); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card { background: #0d1730; border: 1px solid rgba(99,116,158,.35); border-radius: 14px; padding: 20px 22px; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; color: #e2e8f0; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.modal-card h3 { color: #f1f5f9; }
.modal-card .muted { color: #94a3b8; }
.modal-card label { display: block; margin-top: 10px; font-size: .78rem; font-weight: 600; color: #94a3b8; }
.modal-card label input { display: block; width: 100%; margin-top: 4px; background: #0a1226; border: 1px solid rgba(99,116,158,.4); border-radius: 8px; color: #e2e8f0; padding: 9px 11px; font-size: .9rem; }
.modal-card label input:focus { outline: none; border-color: #6366f1; }

/* Task #920: DNC composer lockout — inline warning + visually disabled send */
.ibx-dnc-warn { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #f87171; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.32); border-radius: 8px; padding: 7px 10px; margin: 8px 12px 0; }
.ibx-dnc-warn i { font-size: 11px; }
.ibx-send.dnc-off { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }

/* Task #845: unread pill inside the open thread header */
.staffdark .ibx-th-unread { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: .12rem .5rem; background: rgba(239,68,68,.16); color: #f87171; border: 1px solid rgba(239,68,68,.35); }
.staffdark .ibx-th-unread i { font-size: .58rem; }

/* Task #1161 — appointments View-profile button */
.appt-vp-btn{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:7px;border:1px solid rgba(96,165,250,.4);background:rgba(59,130,246,.12);color:#93c5fd;font-size:.68rem;font-weight:600;cursor:pointer;white-space:nowrap;}
.appt-vp-btn:hover{background:rgba(59,130,246,.25);border-color:rgba(96,165,250,.7);}
.appt-dp-for .appt-vp-btn{margin-left:8px;vertical-align:middle;}

/* Task #1161 — additive editor instant-save controls */
.agent-edit-addrow{display:flex;gap:.5rem;align-items:center;}
.agent-edit-addrow input{flex:1;}
.agent-edit-row-pref{border-color:rgba(52,211,153,.45)!important;background:rgba(16,185,129,.07)!important;}
.agent-edit-pref-badge{color:#34d399;font-weight:700;font-size:.72rem;display:inline-flex;align-items:center;gap:4px;margin-left:auto;}
.agent-edit-pref-btn{margin-left:auto;padding:2px 9px;border-radius:7px;border:1px solid rgba(96,165,250,.4);background:rgba(59,130,246,.12);color:#93c5fd;font-size:.68rem;font-weight:600;cursor:pointer;}
.agent-edit-pref-btn:hover{background:rgba(59,130,246,.25);}

/* Task #1161 — profile card commission-disable panel */
.scp-comm-dis{margin-top:.5rem;padding:.5rem .6rem;border:1px solid rgba(248,113,113,.35);border-radius:9px;background:rgba(127,29,29,.15);}
.scp-comm-btn{margin-top:.45rem;font-size:.72rem;}

/* Duplicate-records merge pill on the admin CRM contact rows */
.ct-dup-merge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(245, 158, 11, .12); color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, .4); border-radius: 999px;
    font-size: 11px; font-weight: 600; padding: 2px 9px; cursor: pointer;
    line-height: 1.5; font-family: inherit;
}
.ct-dup-merge:hover { background: rgba(245, 158, 11, .22); border-color: rgba(245, 158, 11, .65); }

/* ── Communication Hub Bar ───────────────────────────────────────────────────
   Worker portal: a horizontal tab bar across the top of the Communication view
   with colored count badges, drag-to-reorder, and a voice/broadcasts shortcut. */
.comm-hub-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.comm-hub-wrap.hub-chat-full { overflow: hidden; }
.comm-hub-bar { display: flex; align-items: center; gap: .2rem; padding: .55rem .9rem .45rem; border-bottom: 1px solid var(--border, #e2e8f0); flex: 0 0 auto; flex-wrap: wrap; background: var(--surface, #fff); }
.comm-hub-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 10px; font-size: .82rem; font-weight: 700; color: var(--text-muted, #64748b); cursor: pointer; position: relative; border-bottom: 2.5px solid transparent; transition: background .13s, color .13s; user-select: none; }
.comm-hub-tab:hover { background: #f1f5f9; color: var(--text-heading, #1e293b); }
.comm-hub-tab.active { color: var(--acad-purple, #7c3aed); border-bottom-color: var(--acad-purple, #7c3aed); }
.comm-hub-tab.dragging { opacity: .5; }
.comm-hub-tab-label { white-space: nowrap; }
.comm-hub-tab i { font-size: .9rem; }
.comm-hub-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; font-size: .68rem; font-weight: 800; line-height: 1; }
.comm-hub-badge.hidden { display: none; }
.comm-hub-badge-purple { background: #ede9fe; color: #7c3aed; }
.comm-hub-badge-blue { background: #dbeafe; color: #1d4ed8; }
.comm-hub-badge-green { background: #dcfce7; color: #15803d; }
.comm-hub-badge-teal { background: #ccfbf1; color: #0f766e; }
.comm-hub-badge-orange { background: #fff7ed; color: #c2410c; }
.comm-hub-badge-red { background: #fef2f2; color: #dc2626; }
.comm-hub-tab-voice { margin-left: .3rem; }
.comm-hub-bar-spacer { flex: 1 1 auto; }
.comm-hub-mic { flex: 0 0 auto; }
.comm-hub-content { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.comm-hub-wrap.hub-chat-full .comm-hub-content { overflow: hidden; }

/* Stretch the chat-wrap inside the hub content to fill available height */
.comm-hub-content .chat-wrap { height: 100%; }
.comm-hub-content .ibx { height: 100%; }

/* Worker hub Team Chat: broadcasts panel stacked above the chat pane (scrolls). */
.comm-hub-content .team-hub { display: flex; flex-direction: column; gap: 14px; padding: 14px; min-height: 0; }
.comm-hub-content .team-hub .team-hub-bcast { flex: 0 0 auto; }
.comm-hub-content .team-hub .team-hub-chat { flex: 1 1 auto; min-height: 0; }
.comm-hub-content .team-hub .chat-wrap { height: min(72vh, 760px); }

/* Worker hub Dashboard sub-tab off-the-clock prompt */
.hub-clock-gate { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 24px; }
.hub-clock-gate .hcg-card { max-width: 440px; text-align: center; background: #0a0a12; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 34px 28px; color: #e6e6f0; }
.hub-clock-gate .hcg-ic { font-size: 34px; color: #7aa2ff; margin-bottom: 12px; }
.hub-clock-gate .hcg-card h2 { margin: 0 0 10px; font-size: 20px; }
.hub-clock-gate .hcg-card p { margin: 0 0 20px; opacity: .75; line-height: 1.5; font-size: 14px; }

/* dark-theme hub */
body.staffdark .comm-hub-bar { background: #080e1a; border-bottom-color: rgba(255,255,255,.07); }
body.staffdark .comm-hub-tab { color: #8899b3; }
body.staffdark .comm-hub-tab:hover { background: rgba(255,255,255,.05); color: #d4dfef; }
body.staffdark .comm-hub-tab.active { color: #a78bfa; border-bottom-color: #a78bfa; }
body.staffdark .comm-hub-badge-purple { background: rgba(124,58,237,.2); color: #c4b5fd; }
body.staffdark .comm-hub-badge-blue { background: rgba(29,78,216,.2); color: #93c5fd; }
body.staffdark .comm-hub-badge-green { background: rgba(21,128,61,.2); color: #86efac; }
body.staffdark .comm-hub-badge-teal { background: rgba(15,118,110,.2); color: #5eead4; }
body.staffdark .comm-hub-badge-orange { background: rgba(194,65,12,.2); color: #fdba74; }
body.staffdark .comm-hub-badge-red { background: rgba(220,38,38,.2); color: #fca5a5; }

/* hub content area properly fills the main area */
/* The hub tab bar must NEVER scroll away (owner rule, July 2026): the .main
   scroller is disabled whenever the hub is open — only .comm-hub-content
   scrolls, so the bar stays pinned on every tab for every department.
   (position:sticky is unreliable on #mainArea children — see the flex-col
   scroller note; this sub-region pattern is the reliable pin.) */
.main:has(> .comm-hub-wrap) { overflow: hidden; }

/* ── Drag-drop highlight for Team Chat composer ───────────────────────── */
.chat-compose.chat-compose-drag { background: rgba(124,58,237,.08); border-radius: 12px; }
.chat-compose.chat-compose-drag .chat-composebar { border-color: #7c3aed; }

/* ── Non-image file attachment chip (Team Chat) ───────────────────────── */
.chat-attach-file { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; background: rgba(124,58,237,.12); border-radius: 8px; color: #a78bfa; font-size: .82rem; font-weight: 600; }
.chat-attach-file i { font-size: .95rem; }

/* ── Drag-drop highlight for Customer Chat inbox composer ─────────────── */
.ibx-composer.ibx-drag { background: rgba(16,185,129,.06) !important; border-radius: 12px; }
.ibx-composer.ibx-drag textarea { border-color: #10b981 !important; }

/* ── Team Chat: non-image attachment download link (in message bubble) ──── */
.chat-att.chat-att-file { cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .65rem; background: rgba(124,58,237,.1); border-radius: 8px; color: #7c3aed; text-decoration: none; font-size: .83rem; font-weight: 600; max-width: 240px; word-break: break-all; }
.staffdark .chat-att.chat-att-file { background: rgba(167,139,250,.15); color: #c4b5fd; }
.chat-att.chat-att-file i { font-size: 1rem; flex-shrink: 0; }
.chat-att.chat-att-file:hover { background: rgba(124,58,237,.18); }

/* ════════════ ADMIN QUICKBAR ════════════ */
/* Sticky dark icon bar pinned to the top of the admin/manager portal.
   Coexists with the sidebar; scrolls horizontally on narrow screens.
   Scoped under .staffdark so it never bleeds into the student portal. */
body.staffdark .adm-qbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #0d1117;
    border-bottom: 1px solid #1e2530;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
body.staffdark .adm-qbar::-webkit-scrollbar { display: none; }

body.staffdark .adm-qtile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 18px 11px;
    gap: 6px;
    cursor: pointer;
    position: relative;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    color: #8b95a3;
    transition: color .15s, background .15s, border-color .15s;
    min-width: 80px;
    text-align: center;
}
body.staffdark .adm-qtile:hover {
    background: rgba(255,255,255,.06);
    color: #c8d0da;
}
body.staffdark .adm-qtile--active {
    color: #fff;
    border-bottom-color: var(--qc, #60a5fa);
    background: color-mix(in srgb, var(--qc, #60a5fa) 8%, transparent);
}
body.staffdark .adm-qtile--active .adm-qtile-icon-wrap i {
    color: var(--qc, #60a5fa) !important;
    opacity: 1;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--qc, #60a5fa) 70%, transparent));
}

body.staffdark .adm-qtile-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--qc, #60a5fa) 14%, #0d1117);
    transition: background .15s;
}
body.staffdark .adm-qtile--active .adm-qtile-icon-wrap {
    background: color-mix(in srgb, var(--qc, #60a5fa) 22%, #0d1117);
}
body.staffdark .adm-qtile:hover .adm-qtile-icon-wrap {
    background: color-mix(in srgb, var(--qc, #60a5fa) 20%, #0d1117);
}
body.staffdark .adm-qtile-icon-wrap i {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--qc, #60a5fa);
    opacity: .85;
    transition: color .15s, opacity .15s;
}
body.staffdark .adm-qtile:hover .adm-qtile-icon-wrap i {
    opacity: 1;
}

body.staffdark .adm-qtile-label {
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

/* Live-count badge (pill) — top-right of the icon */
body.staffdark .adm-qtile-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    padding: 0 4px;
    border: 1.5px solid #0d1117;
    pointer-events: none;
}
body.staffdark .adm-qtile-badge.hidden { display: none; }

/* Layout: .shell-main-col is the column-flex wrapper that holds the quickbar
   (sticky) + #mainArea (scrolling) together on the right side of .shell. */
.shell-main-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* ── Admin Dashboard tab — full-page tile grid ───────────────────────────── */
body.staffdark .adm-db-page {
    padding: 32px 28px 40px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}
body.staffdark .adm-db-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    max-width: 1100px;
}
body.staffdark .adm-db-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 14px 22px;
    border-radius: 14px;
    border: 1.5px solid #1e2733;
    background: #0d1320;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    color: #8b95a3;
    text-align: center;
    position: relative;
}
body.staffdark .adm-db-tile:hover {
    background: #111c2e;
    border-color: color-mix(in srgb, var(--qc, #60a5fa) 35%, transparent);
    transform: translateY(-2px);
    color: #c8d0da;
}
body.staffdark .adm-db-tile:active {
    transform: translateY(0);
}
body.staffdark .adm-db-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--qc, #60a5fa) 12%, transparent);
}
body.staffdark .adm-db-icon-wrap i {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--qc, #60a5fa);
    transition: filter .15s;
}
body.staffdark .adm-db-tile:hover .adm-db-icon-wrap i {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--qc, #60a5fa) 70%, transparent));
}
body.staffdark .adm-db-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}
/* Badge pill — top-right of the icon wrap */
body.staffdark .adm-db-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
    border: 1.5px solid #0d1320;
    pointer-events: none;
}
body.staffdark .adm-db-badge.hidden { display: none; }

/* ── Worker Contact Quick-Search bar ─────────────────────────────────────── */
body.staffdark .wcs-bar{position:relative;padding:.5rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);background:#080e1c;flex-shrink:0;z-index:10;}
body.staffdark .wcs-row{display:flex;align-items:center;gap:.6rem;background:#0d1825;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.42rem .75rem;}
body.staffdark .wcs-icon{color:#4a6fa5;font-size:.85rem;flex-shrink:0;}
body.staffdark .wcs-input{flex:1;background:transparent;border:none;outline:none;color:#e2e8f0;font-size:.86rem;min-width:0;}
body.staffdark .wcs-input::placeholder{color:#4a6fa5;}
body.staffdark .wcs-results{position:absolute;top:calc(100% - 1px);left:0;right:0;background:#0d1825;border:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.04);border-radius:0 0 10px 10px;box-shadow:0 8px 28px rgba(0,0,0,.5);max-height:340px;overflow-y:auto;z-index:100;}
body.staffdark .wcs-results[hidden]{display:none;}
body.staffdark .wcs-hit{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .13s;}
body.staffdark .wcs-hit:last-child{border-bottom:none;}
body.staffdark .wcs-hit:hover{background:#131f30;}
body.staffdark .wcs-hit-info{flex:1;min-width:0;}
body.staffdark .wcs-hit-name{font-weight:700;color:#e2e8f0;font-size:.87rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.staffdark .wcs-hit-email{font-size:.75rem;color:#4a6fa5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
body.staffdark .wcs-hit-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
body.staffdark .wcs-hit-owner{font-size:.7rem;color:#5a7a9e;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;}
body.staffdark .wcs-hit-shortcut{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;padding:.2rem .55rem;border-radius:6px;border:1px solid rgba(99,179,237,.25);background:rgba(99,179,237,.08);color:#63b3ed;cursor:pointer;white-space:nowrap;transition:background .13s,border-color .13s;}
body.staffdark .wcs-hit-shortcut:hover{background:rgba(99,179,237,.18);border-color:rgba(99,179,237,.45);}
body.staffdark .wcs-none{padding:.85rem 1rem;color:#4a6fa5;font-size:.83rem;}

/* ── Calls tab: Call Back Attempted state + inline pickup confirm (staffdark) ── */
body.staffdark .clog-email { font-size: 11px; color: #64748b; margin-top: 1px; }
body.staffdark tr.clog-row-attempted { background: rgba(56,189,248,.05); }
body.staffdark .clog-cb-confirm { display: inline-flex; align-items: center; gap: 6px; animation: clogSlideIn .25s ease; }
body.staffdark .clog-cb-q { font-size: 11px; color: #94a3b8; white-space: nowrap; }
body.staffdark .clog-cb-yes, body.staffdark .clog-cb-no {
    border: 1px solid rgba(148,163,184,.25); border-radius: 999px; padding: 3px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer; background: transparent; transition: background .15s;
}
body.staffdark .clog-cb-yes { color: #34d399; }
body.staffdark .clog-cb-yes:hover { background: rgba(52,211,153,.15); }
body.staffdark .clog-cb-no { color: #38bdf8; }
body.staffdark .clog-cb-no:hover { background: rgba(56,189,248,.15); }
body.staffdark .clog-pill.pop { animation: clogPillPop .3s ease; }
body.staffdark tr.clog-row-flash { animation: clogRowFlash .8s ease; }
@keyframes clogSlideIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes clogPillPop { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes clogRowFlash { 0% { background: rgba(52,211,153,.18); } 100% { background: transparent; } }

/* ── Appointments panel: design-parity columns, day pills, pagination (Task: appt redesign) ── */
.appt-cell-ic{color:#64748b;font-size:.72rem;margin-right:.25rem;}
.appt-cell-contact{white-space:nowrap;font-size:.82rem;color:#cbd5e1;}
.appt-cell-agent{white-space:nowrap;font-size:.82rem;color:#a5b4fc;}
.appt-day-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;border-radius:.5rem;font-size:.74rem;font-weight:600;white-space:nowrap;border:1px solid transparent;}
.appt-day-up{background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.35);}
.appt-day-today{background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.35);}
.appt-day-past{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.3);}
.appt-notes-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .55rem;border-radius:.45rem;background:rgba(99,102,241,.12);color:#a5b4fc;font-size:.78rem;font-weight:600;}
.appt-row-acts{display:flex;align-items:center;gap:.4rem;justify-content:flex-end;}
.appt-row-kebab{width:1.9rem;height:1.9rem;border-radius:.45rem;border:1px solid rgba(148,163,184,.25);background:transparent;color:#94a3b8;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.appt-row-kebab:hover{background:rgba(148,163,184,.12);color:#e2e8f0;}
.appt-agent-filter{background:#0f172a;color:#e2e8f0;border:1px solid rgba(148,163,184,.3);border-radius:.5rem;padding:.4rem .6rem;font-size:.82rem;max-width:12rem;}
.appt-pgn{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border-top:1px solid rgba(148,163,184,.15);flex-wrap:wrap;}
.appt-pgn-info{font-size:.8rem;color:#94a3b8;flex:1;}
.appt-pgn-btns{display:flex;gap:.3rem;}
.appt-pgn-b{min-width:1.9rem;height:1.9rem;border-radius:.45rem;border:1px solid rgba(148,163,184,.25);background:transparent;color:#cbd5e1;cursor:pointer;font-size:.8rem;}
.appt-pgn-b.on{background:#6d28d9;border-color:#6d28d9;color:#fff;font-weight:700;}
.appt-pgn-b:disabled{opacity:.35;cursor:default;}
.appt-pgn-per{background:#0f172a;color:#e2e8f0;border:1px solid rgba(148,163,184,.3);border-radius:.5rem;padding:.35rem .55rem;font-size:.8rem;}
.appt-stat-arch-n{color:#818cf8;}
.appt-notes-pane{padding:1rem;display:flex;flex-direction:column;gap:.6rem;}
.appt-note-row{display:flex;gap:.7rem;background:rgba(30,41,59,.5);border:1px solid rgba(148,163,184,.15);border-radius:.6rem;padding:.7rem .85rem;}
.appt-note-ic{width:2rem;height:2rem;border-radius:.5rem;background:rgba(99,102,241,.15);color:#a5b4fc;display:flex;align-items:center;justify-content:center;flex:none;}
.appt-note-body{min-width:0;flex:1;}
.appt-note-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.25rem;}
.appt-note-name{font-weight:700;color:#e2e8f0;cursor:pointer;font-size:.85rem;}
.appt-note-name:hover{text-decoration:underline;}
.appt-note-kind{font-size:.72rem;color:#a5b4fc;background:rgba(99,102,241,.12);padding:.1rem .45rem;border-radius:.4rem;}
.appt-note-when{font-size:.74rem;color:#94a3b8;margin-left:auto;}
.appt-note-text{font-size:.82rem;color:#cbd5e1;white-space:pre-wrap;word-break:break-word;}
.appt-tab i{margin-right:.35rem;opacity:.8;}
/* Design-parity column sizing (10-col table; fixed layout retired for auto) */
.appt-tbl{table-layout:auto;}
.appt-tbl th,.appt-tbl td{white-space:nowrap;}
.appt-tbl .appt-th-lead{min-width:150px;}
.appt-cell-contact{max-width:170px;overflow:hidden;text-overflow:ellipsis;}
.appt-cell-agent{max-width:120px;overflow:hidden;text-overflow:ellipsis;}
.appt-day-pill{font-size:.68rem;padding:.22rem .5rem;}

/* ── Appointments panel design-exact pass (owner screenshot parity) ── */
/* Stat cards: gradient bordered tiles with icon square + sparkline */
.appt-stats-row{gap:.6rem;padding:.7rem .8rem;background:#070d1a;border-bottom:1px solid #1a2744;flex-wrap:wrap;}
.appt-stat-card{flex:1;min-width:150px;flex-direction:row;align-items:center;justify-content:flex-start;gap:.6rem;padding:.7rem .8rem;border-radius:12px;border:1px solid rgba(148,163,184,.14);background:linear-gradient(135deg,#0d1526,#0a1120);position:relative;overflow:hidden;}
.appt-stat-card:hover{background:linear-gradient(135deg,#101a30,#0c1426);}
.appt-stat-card.appt-stat-active{border-color:#818cf8;background:linear-gradient(135deg,#141232,#0c1426);}
.appt-stat-card.appt-stat-active::after{content:none;}
.appt-stat-div::before{content:none;}
.appt-stc-all{border-color:rgba(139,92,246,.35);}
.appt-stc-upcoming{border-color:rgba(56,189,248,.3);}
.appt-stc-scheduled{border-color:rgba(239,68,68,.3);}
.appt-stc-completed{border-color:rgba(34,197,94,.3);}
.appt-stc-cancelled{border-color:rgba(148,163,184,.25);}
.appt-stc-archived{border-color:rgba(129,140,248,.3);}
.appt-stat-ic{width:2.2rem;height:2.2rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1rem;flex:none;}
.appt-sic-purple{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;}
.appt-sic-blue{background:rgba(56,189,248,.15);color:#38bdf8;border:1px solid rgba(56,189,248,.4);}
.appt-sic-red{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;}
.appt-sic-green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;}
.appt-sic-gray{background:rgba(226,232,240,.9);color:#0f172a;}
.appt-sic-indigo{background:rgba(129,140,248,.15);color:#818cf8;border:1px solid rgba(129,140,248,.4);}
.appt-stat-mid{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.appt-stat-card .appt-stat-n{font-size:1.35rem;}
.appt-stat-card .appt-stat-l{color:#64748b;}
.appt-stat-spark{position:absolute;right:.6rem;bottom:.5rem;width:3.4rem;height:1.1rem;opacity:.85;}
/* Status pill: dark bordered pill, colored label + trailing dot */
.appt-s-pill{background:#0d1526;border:1px solid rgba(148,163,184,.25);border-radius:7px;padding:3px 9px;position:relative;padding-right:20px;}
.appt-s-pill::after{content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:currentColor;}
.appt-s-active{background:#0d1526;color:#4ade80;border-color:rgba(74,222,128,.35);}
.appt-s-new{background:#0d1526;color:#60a5fa;border-color:rgba(96,165,250,.35);}
.appt-s-soon{background:#0d1526;color:#fbbf24;border-color:rgba(251,191,36,.35);}
.appt-s-over{background:#0d1526;color:#f87171;border-color:rgba(248,113,113,.35);}
.appt-s-cancel{background:#7f1d1d;color:#fecaca;border-color:rgba(239,68,68,.45);}
/* PAYING N/A pill */
.appt-sb-na{background:#131c2e;color:#8b98ab;border:1px solid rgba(148,163,184,.2);border-radius:7px;}
/* Square action buttons: solid green call / solid blue message */
.appt-sq-btn{width:1.85rem;height:1.85rem;border-radius:.5rem;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;vertical-align:middle;transition:filter .15s;}
.appt-sq-btn:hover{filter:brightness(1.15);}
.appt-sq-btn:disabled{opacity:.35;cursor:not-allowed;}
.appt-sq-call{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;}
.appt-sq-msg{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;}
.appt-cell-contact .appt-sq-call{margin-right:.45rem;}
/* Appointment cell: purple calendar icon + white bold date, gray time */
.appt-appt-date{color:#e2e8f0;font-weight:600;font-size:.8rem;white-space:nowrap;}
.appt-appt-date .appt-cell-ic{color:#a78bfa;}
.appt-appt-time{color:#64748b;font-size:.72rem;margin-left:1.15rem;}
/* Notes chip: dark bordered with icon + white count */
.appt-notes-chip{background:#0d1526;border:1px solid rgba(148,163,184,.25);color:#e2e8f0;}
.appt-notes-chip i{color:#94a3b8;}
/* Filters labeled button + purple slider square */
.appt-filters-lbl{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:.55rem;border:1px solid rgba(148,163,184,.25);background:#0d1526;color:#cbd5e1;font-size:.8rem;font-weight:600;cursor:pointer;}
.appt-filters-lbl:hover{background:#131c30;}
.appt-filter-btn{background:linear-gradient(135deg,#6d28d9,#7c3aed) !important;border:none !important;color:#fff !important;}

/* Worker hub Team Chat — two headline sections (call panel + chat inbox) with
   voice broadcasts in a collapsible section below */
.comm-hub-content .team-hub .team-hub-call { flex: 0 0 auto; }
.comm-hub-content .team-hub details.team-hub-bcast > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: #0a0a12; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: #cbd5e1; font-weight: 600; font-size: .92rem; user-select: none; }
.comm-hub-content .team-hub details.team-hub-bcast > summary::-webkit-details-marker { display: none; }
.comm-hub-content .team-hub details.team-hub-bcast > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: .75rem; opacity: .6; transition: transform .15s; }
.comm-hub-content .team-hub details.team-hub-bcast[open] > summary::after { transform: rotate(180deg); }
.comm-hub-content .team-hub details.team-hub-bcast > #thBroadcasts { margin-top: 10px; }

/* ── Worker Team Chat redesign (owner mock, July 2026): Inbox / Call Teammate tabs ── */
.comm-hub-content .team-hub .th-tabs { display: flex; gap: 10px; flex: 0 0 auto; }
.th-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: #0a0a12; color: #cbd5e1; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.th-tab:hover { background: #14141f; }
.th-tab.active { background: #7c5cff; border-color: #7c5cff; color: #fff; box-shadow: 0 6px 18px rgba(124,92,255,.35); }
.chat-newbig { flex: 0 0 auto; margin: .6rem .7rem .7rem; padding: .7rem 1rem; border: 0; border-radius: 12px; background: #7c5cff; color: #fff; font-weight: 700; font-size: .92rem; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: background .15s; }
.chat-newbig:hover { background: #6a4ae6; }
.chat-thread-head { position: relative; }
.chat-headactions { margin-left: auto; display: flex; gap: .35rem; }
.chat-headicon { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: #a78bfa; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.chat-headicon:hover { background: rgba(124,92,255,.15); }
.chat-headpop { position: absolute; top: calc(100% + 6px); right: 12px; z-index: 30; background: #14141f; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .8rem 1rem; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.chat-headpop-name { font-weight: 700; color: #fff; margin-bottom: .3rem; }
.chat-headpop-row { color: #b9b9cd; font-size: .85rem; display: flex; align-items: center; gap: .4rem; padding: .12rem 0; }