/* ═══════════════════════════════════════════════════════════════
   RESET & ROOT
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    /* Page background — real pastel steel blue */
    --bg:        #A8C8E8;

    /* Card surfaces */
    --surface:   #EAF3FC;
    --surface-2: #D4E8F8;

    /* Glass */
    --glass:     rgba(234,243,252,0.82);
    --glass-hi:  rgba(255,255,255,0.94);

    /* Borders */
    --border:    rgba(80,135,195,0.28);
    --border-hi: rgba(80,135,195,0.50);

    /* Blues — primary */
    --blue:      #3A72BE;
    --blue-d:    #2A5EA8;
    --blue-g:    rgba(58,114,190,0.14);
    --blue-light:#DBEAFE;

    /* Purples */
    --purple:    #8059D8;
    --purple-g:  rgba(128,89,216,0.13);

    /* Cyan */
    --cyan:      #0FA8C8;
    --cyan-g:    rgba(15,168,200,0.12);

    /* Green */
    --green:     #18B888;
    --green-g:   rgba(24,184,136,0.12);

    /* Red */
    --red:       #E05858;
    --red-g:     rgba(224,88,88,0.12);

    /* Gold / metal */
    --gold:      #D4960E;
    --gold-g:    rgba(212,150,14,0.13);
    --silver:    #6A88A8;
    --silver-g:  rgba(106,136,168,0.13);
    --bronze:    #B06830;
    --bronze-g:  rgba(176,104,48,0.13);

    /* Orange */
    --orange:    #D87830;
    --orange-g:  rgba(216,120,48,0.12);

    /* Track colors */
    --teal:      #0EA89A;
    --teal-g:    rgba(14,168,154,0.12);
    --violet:    #7048D8;
    --violet-g:  rgba(112,72,216,0.12);
    --coral:     #E06060;
    --coral-g:   rgba(224,96,96,0.12);
    --amber:     #D4900E;
    --amber-g:   rgba(212,144,14,0.12);

    /* Text — dark navy for contrast on light cards */
    --text:      #162840;
    --text2:     #304A68;
    --textm:     #6888A8;

    /* Sidebar — separate variables, sidebar is deep blue */
    --sb-bg:     #3A6898;
    --sb-text:   #E8F3FC;
    --sb-text2:  rgba(232,243,252,0.72);
    --sb-textm:  rgba(232,243,252,0.48);
    --sb-border: rgba(255,255,255,0.12);
    --sb-hover:  rgba(255,255,255,0.10);
    --sb-active: rgba(255,255,255,0.18);

    /* Layout */
    --sb-w:      236px;
    --r:         20px;
    --rsm:       14px;
    --shadow:    0 4px 20px rgba(20,50,100,0.13);
    --shadow-md: 0 8px 32px rgba(20,50,100,0.18);
    --shadow-lg: 0 16px 56px rgba(20,50,100,0.25);
}

html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND — richer pastel blue blobs
   ═══════════════════════════════════════════════════════════════ */
.bg-wrap {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background: linear-gradient(145deg, #90BCE0 0%, #A0C4E6 35%, #B0CEEC 65%, #9AC0E4 100%);
}
.blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); pointer-events: none;
}
.b1 { width:700px;height:700px;background:radial-gradient(circle,rgba(60,104,152,0.40) 0%,transparent 65%);top:-220px;left:-200px;animation:blob1 22s ease-in-out infinite; }
.b2 { width:600px;height:600px;background:radial-gradient(circle,rgba(128,89,216,0.22) 0%,transparent 65%);bottom:-170px;right:-170px;animation:blob2 28s ease-in-out infinite; }
.b3 { width:440px;height:440px;background:radial-gradient(circle,rgba(14,168,200,0.24) 0%,transparent 65%);top:40%;left:55%;animation:blob3 20s ease-in-out infinite; }
.b4 { width:370px;height:370px;background:radial-gradient(circle,rgba(200,170,255,0.20) 0%,transparent 65%);top:15%;right:8%;animation:blob4 32s ease-in-out infinite; }
@keyframes blob1 { 0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,60px) scale(1.05)}66%{transform:translate(50px,-50px) scale(0.95)} }
@keyframes blob2 { 0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-70px,-60px) scale(1.04)}66%{transform:translate(-100px,40px) scale(0.97)} }
@keyframes blob3 { 0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.08)} }
@keyframes blob4 { 0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(40px,-60px) scale(0.92)}70%{transform:translate(-30px,30px) scale(1.06)} }
.grid-overlay { display: none; }

/* ═══════════════════════════════════════════════════════════════
   AUTH GATE
   ═══════════════════════════════════════════════════════════════ */
.auth-gate {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.auth-card-wrap {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; max-width: 420px;
}
.auth-mascot {
    width: 130px; height: 130px; object-fit: contain;
    margin-bottom: -22px; z-index: 1; position: relative;
    filter: drop-shadow(0 8px 22px rgba(58,114,190,0.28));
}
@keyframes mascotBob {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}
.auth-card {
    background: var(--surface);
    border: 1.5px solid var(--border-hi);
    border-radius: 28px;
    padding: 44px 44px 44px;
    padding-top: 36px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
}
.auth-logo-wm {
    position: absolute; width: 420px; height: 420px; object-fit: contain;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    opacity: 0.07; pointer-events: none; user-select: none;
}
.auth-org {
    font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 900;
    color: var(--blue); letter-spacing: 4px; margin-top: 2px;
}
.auth-title { font-size: 16px; color: var(--text2); font-weight: 700; }
.auth-body { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.auth-label { font-size: 12px; color: var(--textm); text-align: left; margin-bottom: -8px; font-weight: 700; letter-spacing: 0.4px; }
.auth-input {
    width: 100%; background: var(--surface-2);
    border: 1.5px solid var(--border-hi); border-radius: var(--rsm);
    padding: 13px 16px; color: var(--text);
    font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.auth-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,114,190,0.15); }
.auth-input::placeholder { color: var(--textm); font-weight: 400; }
.auth-btn {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff; border: none; border-radius: var(--rsm);
    font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
    cursor: pointer; transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(58,114,190,0.35);
    letter-spacing: 0.3px;
}
.auth-btn:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(58,114,190,0.45); }
.auth-err { font-size: 13px; color: var(--red); min-height: 18px; font-weight: 700; }
.auth-desc { font-size: 13px; color: var(--text2); line-height: 1.65; margin-top: 4px; font-weight: 600; }
.auth-role-row { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.auth-role-btn {
    flex: 1; padding: 12px 8px;
    background: var(--surface-2); border: 1.5px solid var(--border);
    border-radius: var(--rsm); color: var(--text2);
    font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all .2s; text-align: center;
}
.auth-role-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-g); }
.auth-back { font-size: 13px; color: var(--textm); cursor: pointer; margin-top: 4px; font-weight: 700; }
.auth-back:hover { color: var(--text2); }
.auth-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.auth-link:hover { color: var(--blue-d); }
.auth-steps { display: flex; flex-direction: column; gap: 12px; text-align: left; width: 100%; }
.auth-step { display: flex; align-items: flex-start; gap: 12px; }
.auth-step-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px;
    box-shadow: 0 2px 8px rgba(58,114,190,0.35);
}
.auth-step-txt { font-size: 13px; color: var(--text2); line-height: 1.6; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.portal-shell {
    position: relative; z-index: 1;
    display: flex; min-height: 100vh;
}

/* ─── SIDEBAR — deep pastel navy ──────────────────────────────── */
.sidebar {
    width: var(--sb-w); flex-shrink: 0;
    background: var(--sb-bg);
    border-right: none;
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 50; overflow: hidden;
    transition: transform .3s ease;
    box-shadow: 4px 0 32px rgba(20,50,100,0.22);
}
.sb-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 18px 18px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}
.sb-logo {
    width: 34px; height: 34px; object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) brightness(1.15);
}
.sb-org {
    font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 900;
    color: var(--sb-text); letter-spacing: 1.5px; line-height: 1.2;
}
.sb-portal-lbl { font-size: 9px; color: var(--sb-textm); letter-spacing: 1.5px; margin-top: 2px; font-weight: 700; }

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

.sb-section-lbl {
    font-family: 'Nunito', sans-serif; font-size: 9px; font-weight: 800;
    letter-spacing: 1.5px; color: var(--sb-textm);
    padding: 14px 8px 6px; text-transform: uppercase;
}
.sb-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: var(--rsm);
    color: var(--sb-text2); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all .18s;
    position: relative; text-decoration: none;
    border: none; background: none; width: 100%; text-align: left;
    font-family: 'Nunito', sans-serif;
}
.sb-item:hover { background: var(--sb-hover); color: var(--sb-text); }
.sb-item.active {
    background: var(--sb-active);
    color: var(--sb-text); font-weight: 800;
    border-radius: var(--rsm);
}
.sb-item.active::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 4px 4px 0;
    background: rgba(255,255,255,0.85);
}
.sb-item .sb-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 15px; }
.sb-notif-badge {
    margin-left: auto; background: var(--red); color: #fff;
    font-size: 10px; font-weight: 800; border-radius: 100px;
    padding: 2px 7px; min-width: 18px; text-align: center;
}
.sb-divider { height: 1px; background: var(--sb-border); margin: 8px 10px; border-radius: 2px; }

.sb-footer { flex-shrink: 0; border-top: 1px solid var(--sb-border); }
.sb-user {
    padding: 14px 18px 10px;
    display: flex; align-items: center; gap: 11px;
}
.sb-av {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.sb-av svg { width: 100%; height: 100%; display: block; }
.sb-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sb-name { font-weight: 800; font-size: 13px; color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-meta { font-size: 11px; color: var(--sb-text2); margin-top: 1px; font-weight: 600; }
.sb-logout-btn {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: var(--sb-text2); padding: 6px 7px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.sb-logout-btn:hover { background: rgba(255,60,60,.18); color: #ff8080; }
.sb-lb-link {
    display: flex; align-items: center; gap: 6px;
    margin: 0 14px 16px; padding: 10px 14px;
    border: 1px solid var(--sb-border); border-radius: var(--rsm);
    color: var(--sb-text2); font-size: 12px; text-decoration: none;
    transition: all .2s; font-weight: 700;
    background: rgba(0,0,0,0.12);
}
.sb-lb-link:hover { border-color: rgba(255,255,255,0.35); color: var(--sb-text); background: rgba(255,255,255,0.1); }

/* ─── MAIN CONTENT ────────────────────────────────────────────── */
.portal-main {
    flex: 1; margin-left: var(--sb-w);
    min-height: 100vh; overflow-x: hidden;
}
.view-root { padding: 28px 32px 80px; max-width: 1080px; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE SIDEBAR TOGGLE
   ═══════════════════════════════════════════════════════════════ */
.mob-toggle {
    display: none;
    position: fixed; top: 14px; left: 14px; z-index: 60;
    width: 42px; height: 42px; border-radius: 14px;
    background: var(--sb-bg); box-shadow: var(--shadow-md);
    border: 1px solid var(--sb-border); color: var(--sb-text);
    cursor: pointer; align-items: center; justify-content: center;
    transition: opacity .2s;
}
.mob-toggle:hover { opacity: .85; }
.sidebar-open .mob-toggle { left: calc(var(--sb-w) + 10px); }

/* ═══════════════════════════════════════════════════════════════
   VIEW HEADER
   ═══════════════════════════════════════════════════════════════ */
.view-header {
    margin-bottom: 24px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.view-title {
    font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 900;
    color: var(--text); letter-spacing: -0.3px;
}
.view-subtitle { font-size: 13px; color: var(--textm); margin-top: 5px; font-weight: 600; }
.view-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   CARDS & PANELS
   ═══════════════════════════════════════════════════════════════ */
.card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 22px 24px;
}
.card + .card { margin-top: 12px; }
.card-title {
    font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800;
    letter-spacing: 1.5px; color: var(--textm); margin-bottom: 14px;
    text-transform: uppercase;
}
.card-grid { display: grid; gap: 12px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Stat mini-card */
.stat-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 18px 16px;
    display: flex; align-items: center; gap: 14px;
    transition: transform .2s, box-shadow .2s;
    box-shadow: var(--shadow);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.stat-val {
    font-family: 'Nunito', sans-serif; font-size: 24px; font-weight: 900; line-height: 1;
    color: var(--blue);
}
.stat-lbl { font-size: 12px; color: var(--textm); margin-top: 4px; font-weight: 600; }

/* Icon variants */
.s-blue   { background: var(--blue-g);   border: 1.5px solid rgba(58,114,190,0.22); }
.s-purple { background: var(--purple-g); border: 1.5px solid rgba(128,89,216,0.22); }
.s-cyan   { background: var(--cyan-g);   border: 1.5px solid rgba(15,168,200,0.22); }
.s-green  { background: var(--green-g);  border: 1.5px solid rgba(24,184,136,0.22); }
.s-gold   { background: var(--gold-g);   border: 1.5px solid rgba(212,150,14,0.22); }
.s-red    { background: var(--red-g);    border: 1.5px solid rgba(224,88,88,0.22); }
.v-purple { color: var(--purple); }
.v-cyan   { color: var(--cyan); }
.v-green  { color: var(--green); }
.v-gold   { color: var(--gold); }
.v-blue   { color: var(--blue); }

/* ═══════════════════════════════════════════════════════════════
   HOURS GOAL — card, progress bar, ranking
   ═══════════════════════════════════════════════════════════════ */
.stat-hours-card {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.stat-hours-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue); }
.stat-val-of {
    font-size: 14px; font-weight: 700; color: var(--textm);
    line-height: 1; padding-bottom: 1px;
}
.hours-goal-track {
    height: 6px; background: var(--surface-2); border-radius: 99px;
    margin: 7px 0 5px; overflow: hidden;
}
.hours-goal-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--blue) 0%, #5BA8F0 100%);
    transition: width .5s ease;
}
.hours-goal-milestone {
    font-size: 10px; font-weight: 700; color: var(--textm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hours-goal-hint { color: var(--blue); font-weight: 700; }
.hours-rank-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.hours-rank-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 100px; padding: 5px 14px;
    font-size: 12px; font-weight: 700; color: var(--text2);
    box-shadow: var(--shadow);
}
.hours-rank-chap { background: var(--blue-g); border-color: rgba(58,114,190,0.30); color: var(--blue-d); }

/* ── Hours Goal Modal ── */
.goal-slider-wrap { text-align: center; margin-bottom: 20px; }
.goal-val-display {
    font-size: 36px; font-weight: 900; color: var(--blue);
    font-family: 'Nunito', sans-serif; line-height: 1; margin-bottom: 12px;
}
.goal-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 8px; border-radius: 99px;
    background: var(--surface-2); outline: none; cursor: pointer;
    border: 1.5px solid var(--border);
}
.goal-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--blue); cursor: pointer;
    box-shadow: 0 2px 8px rgba(58,114,190,.40);
    border: 3px solid #fff;
    transition: box-shadow .2s;
}
.goal-slider::-webkit-slider-thumb:hover { box-shadow: 0 2px 14px rgba(58,114,190,.55); }
.goal-slider::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--blue); cursor: pointer; border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(58,114,190,.40);
}
.goal-slider-labels {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--textm); margin-top: 6px; font-weight: 600;
}
.goal-awards-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-bottom: 14px;
}
.goal-award-item {
    text-align: center; padding: 10px 6px; border-radius: 14px;
    border: 1.5px solid var(--border); background: var(--surface);
    transition: all .2s; opacity: 0.5;
}
.goal-award-item.goal-award-earned { opacity: 1; border-color: var(--green); background: var(--green-g); }
.goal-award-item.goal-award-selected { opacity: 1; border-color: var(--blue); background: var(--blue-g); }
.goal-award-item.goal-award-earned.goal-award-selected { border-color: var(--green); background: var(--green-g); }
.goal-award-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.goal-award-label { font-size: 9px; font-weight: 700; color: var(--text2); line-height: 1.2; margin-bottom: 3px; }
.goal-award-hrs { font-size: 10px; color: var(--textm); font-weight: 700; }
.goal-milestone-hint {
    font-size: 13px; font-weight: 700; color: var(--blue); text-align: center;
    min-height: 20px; padding: 6px 0;
}

/* ═══════════════════════════════════════════════════════════════
   PILLS / BADGES
   ═══════════════════════════════════════════════════════════════ */
.pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 4px 10px;
    border-radius: 100px; white-space: nowrap; vertical-align: middle;
    font-family: 'Nunito', sans-serif;
}
.pill-notstarted { background: rgba(104,136,168,.15); color: #486080; border: 1.5px solid rgba(104,136,168,.32); }
.pill-inprogress { background: var(--blue-g);   color: var(--blue);   border: 1.5px solid rgba(58,114,190,.28); }
.pill-submitted  { background: var(--cyan-g);   color: var(--cyan);   border: 1.5px solid rgba(15,168,200,.28); }
.pill-approved   { background: var(--green-g);  color: var(--green);  border: 1.5px solid rgba(24,184,136,.28); }
.pill-revision   { background: var(--orange-g); color: var(--orange); border: 1.5px solid rgba(216,120,48,.28); }
.pill-overdue    { background: var(--red-g);    color: var(--red);    border: 1.5px solid rgba(224,88,88,.28); }
.pill-confirmed  { background: var(--green-g);  color: var(--green);  border: 1.5px solid rgba(24,184,136,.28); }
.pill-pending    { background: var(--orange-g); color: var(--orange); border: 1.5px solid rgba(216,120,48,.28); }
.pill-upcoming   { background: var(--blue-g);   color: var(--blue);   border: 1.5px solid rgba(58,114,190,.28); }
.pill-completed  { background: var(--green-g);  color: var(--green);  border: 1.5px solid rgba(24,184,136,.28); }
.pill-cancelled  { background: var(--red-g);    color: var(--red);    border: 1.5px solid rgba(224,88,88,.28); }

/* Track pills */
.pill-curriculum { background: var(--teal-g);   color: var(--teal);   border: 1.5px solid rgba(14,168,154,.28); }
.pill-operations { background: var(--violet-g); color: var(--violet); border: 1.5px solid rgba(112,72,216,.28); }
.pill-publicity  { background: var(--coral-g);  color: var(--coral);  border: 1.5px solid rgba(224,96,96,.28); }

/* Tier badges — kept for director panel only */
.tier-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 800; padding: 4px 11px;
    border-radius: 100px; white-space: nowrap;
    font-family: 'Nunito', sans-serif;
}
.tier-1 { background: rgba(104,136,168,.15); color: #486080; border: 1.5px solid rgba(104,136,168,.32); }
.tier-2 { background: var(--blue-g);  color: var(--blue);   border: 1.5px solid rgba(58,114,190,.28); }
.tier-3 { background: var(--purple-g);color: var(--purple); border: 1.5px solid rgba(128,89,216,.28); }
.tier-4 { background: var(--gold-g);  color: var(--gold);   border: 1.5px solid rgba(212,150,14,.28); }
.tier-exec { background: var(--gold-g); color: var(--gold); border: 1.5px solid rgba(212,150,14,.32); }

/* Win type pills */
.win-task       { background: var(--blue-g);   color: var(--blue);   border: 1.5px solid rgba(58,114,190,.28); }
.win-session    { background: var(--green-g);  color: var(--green);  border: 1.5px solid rgba(24,184,136,.28); }
.win-rankup     { background: var(--gold-g);   color: var(--gold);   border: 1.5px solid rgba(212,150,14,.28); }
.win-crosstrack { background: var(--purple-g); color: var(--purple); border: 1.5px solid rgba(128,89,216,.28); }
.win-spotlight  { background: var(--orange-g); color: var(--orange); border: 1.5px solid rgba(216,120,48,.28); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px; border-radius: var(--rsm);
    font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all .2s; border: none;
    text-decoration: none; white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff; box-shadow: 0 4px 16px rgba(58,114,190,.30);
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(58,114,190,.42); }
.btn-ghost {
    background: var(--surface); border: 1.5px solid var(--border);
    color: var(--text2);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-g); }
.btn-danger { background: var(--red-g); border: 1.5px solid rgba(224,88,88,.30); color: var(--red); }
.btn-danger:hover { background: rgba(224,88,88,.20); }
.btn-success { background: var(--green-g); border: 1.5px solid rgba(24,184,136,.30); color: var(--green); }
.btn-sm { padding: 7px 13px; font-size: 12px; }
.btn-full { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 700; color: var(--text2); }
.form-hint  { font-size: 11px; color: var(--textm); margin-top: -2px; font-weight: 600; }
.form-input, .form-select, .form-textarea {
    background: var(--surface-2); border: 1.5px solid var(--border-hi);
    border-radius: var(--rsm); padding: 11px 14px;
    color: var(--text); font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600;
    outline: none; transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,114,190,.13);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--textm); font-weight: 400; }
.form-select { cursor: pointer; }
.form-select option { background: #EAF3FC; color: var(--text); }
.form-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.form-grid { display: grid; gap: 14px; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-err { font-size: 12px; color: var(--red); margin-top: 4px; font-weight: 700; }
.form-row { display: flex; gap: 10px; align-items: flex-end; }

/* ═══════════════════════════════════════════════════════════════
   TASK CARDS
   ═══════════════════════════════════════════════════════════════ */
.task-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 22px 24px;
    transition: border-color .2s, box-shadow .2s;
    position: relative; box-shadow: var(--shadow);
}
.task-card + .task-card { margin-top: 10px; }
.task-card.overdue   { border-left: 4px solid var(--red);    border-color: rgba(224,88,88,.35); }
.task-card.approved  { border-left: 4px solid var(--green);  border-color: rgba(24,184,136,.35); }
.task-card.revision  { border-left: 4px solid var(--orange); border-color: rgba(216,120,48,.35); }
.task-card.inprog    { border-left: 4px solid var(--blue);   border-color: rgba(58,114,190,.35); }
.task-card.submitted { border-left: 4px solid var(--cyan);   border-color: rgba(15,168,200,.35); }
.task-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.task-info { flex: 1; min-width: 0; }
.task-name { font-weight: 800; font-size: 15px; color: var(--text); line-height: 1.3; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.task-desc { font-size: 13px; color: var(--text2); line-height: 1.65; margin-bottom: 12px; font-weight: 600; }
.task-donewhen {
    font-size: 12px; color: var(--text2);
    background: var(--surface-2); border: 1.5px solid var(--border);
    border-radius: 10px; padding: 8px 13px; margin-bottom: 12px;
    line-height: 1.55; font-weight: 600;
}
.task-donewhen strong { color: var(--blue); }
.task-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.task-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--blue); padding: 6px 12px;
    background: var(--blue-g); border: 1.5px solid rgba(58,114,190,.22);
    border-radius: 10px; text-decoration: none; transition: opacity .2s; font-weight: 700;
}
.task-link:hover { opacity: .8; }
.task-director-note {
    background: var(--orange-g); border: 1.5px solid rgba(216,120,48,.25);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.task-director-note strong { font-size: 11px; color: var(--orange); display: block; margin-bottom: 4px; font-weight: 800; }
.task-director-note p { font-size: 13px; color: var(--text2); font-weight: 600; }
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task-submit-row { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 220px; }
.task-submit-row .form-input { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   WINS BOARD
   ═══════════════════════════════════════════════════════════════ */
.wins-feed { display: flex; flex-direction: column; gap: 10px; }
.win-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 18px 22px;
    transition: border-color .2s, box-shadow .2s;
    animation: fadeSlideIn .35s ease both; box-shadow: var(--shadow);
}
.win-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-md); }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.win-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.win-names { font-weight: 800; font-size: 14px; color: var(--text); flex: 1; }
.win-time { font-size: 11px; color: var(--textm); white-space: nowrap; font-weight: 600; }
.win-text { font-size: 14px; color: var(--text2); line-height: 1.65; font-weight: 600; }
.win-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.win-posted-by { font-size: 11px; color: var(--textm); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-radius: var(--r);
    background: var(--surface); border: 1.5px solid var(--border);
    cursor: pointer; transition: all .2s; box-shadow: var(--shadow);
}
.notif-item.unread { background: #DCF0FC; border-color: rgba(58,114,190,.35); }
.notif-item.unread::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--blue); flex-shrink: 0; margin-top: 5px;
}
.notif-item:not(.unread)::before { content: ''; width: 8px; height: 8px; flex-shrink: 0; }
.notif-body { flex: 1; min-width: 0; }
.notif-type { font-size: 11px; font-weight: 800; color: var(--textm); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.notif-content { font-size: 13px; color: var(--text2); line-height: 1.5; font-weight: 600; }
.notif-time { font-size: 11px; color: var(--textm); white-space: nowrap; margin-top: 4px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   MY PROGRESS (no longer in nav, styles kept for safety)
   ═══════════════════════════════════════════════════════════════ */
.progress-journey { display: flex; flex-direction: column; gap: 10px; }
.tier-step {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 18px 22px;
    transition: border-color .2s; box-shadow: var(--shadow);
}
.tier-step.current { border-color: rgba(58,114,190,.4); background: #DCF0FC; }
.tier-step.completed { border-color: rgba(24,184,136,.3); }
.tier-step.locked { opacity: .55; }
.tier-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tier-step-icon { font-size: 24px; }
.tier-step-name { font-weight: 800; font-size: 16px; color: var(--text); }
.tier-step-lbl { font-size: 11px; color: var(--textm); margin-top: 2px; font-weight: 600; }
.tier-step-status { margin-left: auto; }
.criteria-list { display: flex; flex-direction: column; gap: 8px; }
.criteria-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); line-height: 1.4; font-weight: 600; }
.criteria-item.met { color: var(--green); }
.criteria-check {
    width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border-hi); font-size: 11px;
}
.criteria-item.met .criteria-check { background: var(--green); border-color: var(--green); color: #fff; }
.progress-bar-wrap { margin-top: 12px; }
.progress-bar-track { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar-fill { height: 100%; border-radius: 4px; transition: width .8s cubic-bezier(.4,0,.2,1); background: linear-gradient(90deg, var(--blue), var(--purple)); }
.progress-bar-lbl { font-size: 11px; color: var(--textm); margin-top: 5px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   SESSIONS
   ═══════════════════════════════════════════════════════════════ */
.session-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 22px 24px;
    transition: border-color .2s; box-shadow: var(--shadow);
}
.session-card + .session-card { margin-top: 10px; }
.session-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.session-info { flex: 1; }
.session-name { font-weight: 800; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.session-detail { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.session-detail-item { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 5px; font-weight: 600; }
.session-spots { font-size: 12px; color: var(--textm); font-weight: 600; }
.session-spots strong { color: var(--cyan); }
.session-attendees { font-size: 12px; color: var(--textm); margin-top: 6px; line-height: 1.6; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   DIRECTOR: ROSTER TABLE
   ═══════════════════════════════════════════════════════════════ */
.table-wrap {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); overflow: auto; box-shadow: var(--shadow);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
    padding: 13px 16px; text-align: left;
    font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; color: var(--textm);
    border-bottom: 1.5px solid var(--border);
    background: var(--surface-2); position: sticky; top: 0; white-space: nowrap; text-transform: uppercase;
}
.data-table thead th.col-r { text-align: right; }
.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr.row-alert { background: rgba(224,88,88,.05); }
.data-table tbody tr.row-alert:hover { background: rgba(224,88,88,.10); }
.data-table td { padding: 13px 16px; vertical-align: middle; color: var(--text); }
.data-table td.col-r { text-align: right; }
.td-name { font-weight: 800; font-size: 14px; }
.td-sub  { font-size: 11px; color: var(--textm); margin-top: 2px; font-weight: 600; }
.td-num  { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800; color: var(--blue); }
.td-alert { color: var(--red); font-size: 11px; font-weight: 700; }
.clickable-row { cursor: pointer; }
.row-detail {
    padding: 14px 16px 18px; background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text2); line-height: 1.6; font-weight: 600;
}
.row-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.row-detail-item label { font-size: 10px; color: var(--textm); display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════
   DIRECTOR: TAB PANEL
   ═══════════════════════════════════════════════════════════════ */
.panel-tabs {
    display: flex; gap: 6px; margin-bottom: 20px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 6px; flex-wrap: wrap; box-shadow: var(--shadow);
}
.panel-tab {
    padding: 10px 18px; border-radius: var(--rsm);
    font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--textm); cursor: pointer; transition: all .2s;
    background: transparent; border: 1.5px solid transparent;
}
.panel-tab.active { background: var(--blue-g); color: var(--blue); border-color: rgba(58,114,190,.25); font-weight: 800; }
.panel-tab:hover:not(.active) { color: var(--text); background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════════════
   CONTENT CALENDAR
   ═══════════════════════════════════════════════════════════════ */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.cal-day-header { padding: 10px 8px; text-align: center; font-size: 10px; font-weight: 800; color: var(--textm); letter-spacing: 1px; background: var(--surface-2); border-bottom: 1.5px solid var(--border); text-transform: uppercase; }
.cal-day { min-height: 80px; padding: 8px 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .15s; font-size: 11px; background: var(--surface); }
.cal-day:hover { background: var(--surface-2); }
.cal-day-num { font-size: 12px; color: var(--text2); margin-bottom: 4px; font-weight: 700; }
.cal-entry { background: var(--blue-g); border: 1.5px solid rgba(58,114,190,.22); border-radius: 6px; padding: 3px 6px; font-size: 10px; color: var(--blue); margin-bottom: 3px; cursor: pointer; line-height: 1.3; font-weight: 700; }
.cal-entry.approved { background: var(--green-g); color: var(--green); border-color: rgba(24,184,136,.22); }
.cal-entry.overdue  { background: var(--red-g);   color: var(--red);   border-color: rgba(224,88,88,.22); }

/* ═══════════════════════════════════════════════════════════════
   INLINE LEADERBOARD
   ═══════════════════════════════════════════════════════════════ */
.lb-tabs {
    display: flex; gap: 6px; margin-bottom: 18px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 6px; box-shadow: var(--shadow);
}
.lb-tab {
    flex: 1; padding: 10px 14px; border-radius: var(--rsm);
    background: transparent; border: 1.5px solid transparent;
    color: var(--textm); font-family: 'Nunito', sans-serif;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s;
}
.lb-tab.active { background: var(--blue-g); color: var(--blue); border-color: rgba(58,114,190,.25); font-weight: 800; }
.lb-tab:hover:not(.active) { color: var(--text); background: var(--surface-2); }
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-bottom: 16px; }
.pod-card {
    background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
    padding: 24px 16px 20px; text-align: center; cursor: pointer;
    border-top: 4px solid; transition: transform .2s, box-shadow .2s;
    position: relative; box-shadow: var(--shadow);
}
.pod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pod-card.p1 { border-top-color: var(--gold); }
.pod-card.p2 { border-top-color: var(--silver); }
.pod-card.p3 { border-top-color: var(--bronze); }
.pod-card.p1::before { content:'👑'; position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:22px; }
.pod-rank { font-family:'Nunito',sans-serif; font-size:20px; font-weight:900; margin-bottom:10px; }
.p1 .pod-rank { color:var(--gold); }
.p2 .pod-rank { color:var(--silver); }
.p3 .pod-rank { color:var(--bronze); }
.pod-av {
    width:62px;height:62px;border-radius:50%;overflow:hidden;margin:0 auto 10px;
    border:2.5px solid var(--border-hi);display:flex;align-items:center;justify-content:center;
    position: relative; background: var(--surface-2);
}
.p1 .pod-av { width:70px;height:70px; border-color: var(--gold); box-shadow: 0 0 16px rgba(212,150,14,.25); }
.p2 .pod-av { border-color: var(--silver); }
.p3 .pod-av { border-color: var(--bronze); }
.pod-av svg { width:100%;height:100%;display:block; }
.pod-av img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }
.pod-name { font-weight:800; font-size:13px; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text); }
.pod-disc { font-size:11px; color:var(--textm); font-weight:600; }
.pod-stat { font-family:'Nunito',sans-serif; font-size:22px; font-weight:900; color:var(--blue); margin-top:6px; }
.p1 .pod-stat { font-size:26px; }
.pod-stat-lbl { font-size:10px; color:var(--textm); margin-top:2px; font-weight:700; }

.lb-list { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; margin-top: 14px; box-shadow: var(--shadow); }
.lb-search-row { padding: 13px 18px; border-bottom: 1.5px solid var(--border); display: flex; align-items: center; gap: 8px; background: var(--surface-2); }
.lb-search { background: none; border: none; outline: none; color: var(--text); font-family: 'Nunito', sans-serif; font-size: 14px; flex: 1; font-weight: 600; }
.lb-search::placeholder { color: var(--textm); font-weight: 400; }
.lb-row { display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s; }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--surface-2); }
.lb-row-rank { font-family:'Nunito',sans-serif; font-size:15px; font-weight:800; color:var(--textm); min-width:32px; text-align:right; }
.lb-row-av { width:38px;height:38px;border-radius:50%;overflow:hidden;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;background:var(--surface-2); }
.lb-row-av svg { width:100%;height:100%;display:block; }
.lb-row-av img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }
.lb-row-info { flex:1; min-width:0; }
.lb-row-name { font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text); }
.lb-row-sub { font-size:11px; color:var(--textm); font-weight:600; }
.lb-row-stat { text-align:right; }
.lb-row-val { font-family:'Nunito',sans-serif; font-size:16px; font-weight:900; color:var(--blue); }
.lb-row-lbl { font-size:10px; color:var(--textm); font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state { text-align: center; padding: 48px 24px; color: var(--textm); font-size: 14px; font-weight: 600; }
.empty-icon { font-size: 40px; margin-bottom: 14px; }
.empty-title { font-weight: 800; color: var(--text2); margin-bottom: 6px; }
.empty-mascot {
    width: 96px; height: 96px; object-fit: contain; margin-bottom: 12px;
    filter: drop-shadow(0 4px 14px rgba(58,114,190,0.18));
    animation: mascotBob 3s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD QUICK CARDS
   ═══════════════════════════════════════════════════════════════ */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-two-col { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }

/* Track banner */
.dash-track-banner {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--track-color) 32%, transparent);
    border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.dash-track-icon { font-size: 28px; flex-shrink: 0; }
.dash-track-info { flex: 1; min-width: 0; }
.dash-track-name { font-size: 16px; font-weight: 800; color: var(--track-color); }
.dash-track-sub { font-size: 11px; color: var(--textm); margin-top: 2px; font-weight: 600; }

/* Directors card */
.dash-directors-card { padding: 16px 18px; }
.dash-dir-row { display: flex; align-items: center; gap: 12px; }
.dash-dir-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.dash-dir-title { font-size: 10px; font-weight: 800; color: var(--textm); text-transform: uppercase; letter-spacing: .06em; }
.dash-dir-name { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 1px; }
.dash-dir-discord { font-size: 11px; color: var(--textm); margin-top: 2px; }
.dash-wide { grid-column: 1/-1; }
.cycle-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 22px 24px;
    display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow);
}
.cycle-ring-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.cycle-ring-wrap svg { width:100%;height:100%;transform:rotate(-90deg); }
.cycle-track { fill:none;stroke:var(--border-hi);stroke-width:5; }
.cycle-fill  { fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round; transition:stroke-dasharray .8s; }
.cycle-lbl { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Nunito',sans-serif; }
.cycle-day { font-size:17px;font-weight:900;color:var(--blue); }
.cycle-of  { font-size:8px;color:var(--textm);font-weight:700; }
.cycle-info { flex:1; }
.cycle-name { font-weight:800;font-size:14px;color:var(--text); }
.cycle-meta { font-size:12px;color:var(--textm);margin-top:4px;font-weight:600; }
.cycle-phase { font-size:12px;color:var(--cyan);margin-top:6px;font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   PRESIDENT PANEL
   ═══════════════════════════════════════════════════════════════ */
.nomination-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 18px 22px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: var(--shadow);
}
.nomination-card + .nomination-card { margin-top: 10px; }
.nom-info { flex: 1; }
.nom-name { font-weight: 800; font-size: 15px; margin-bottom: 4px; color: var(--text); }
.nom-meta { font-size: 12px; color: var(--textm); line-height: 1.5; font-weight: 600; }
.nom-note { font-size: 13px; color: var(--text2); margin-top: 6px; font-style: italic; font-weight: 600; }
.nom-actions { display: flex; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
#toast-wrap { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; align-items: flex-end; }
.toast {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 16px; padding: 13px 20px;
    font-size: 13px; color: var(--text); font-weight: 700;
    box-shadow: var(--shadow-lg);
    animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
    max-width: 300px; line-height: 1.4;
    display: flex; align-items: center; gap: 8px;
}
.toast.success { border-color: rgba(24,184,136,.5); background: #DAFAEF; }
.toast.error   { border-color: rgba(224,88,88,.5);  background: #FAE0E0; }
.toast.out { animation: toastOut .25s ease forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateY(10px) scale(.96)} to{opacity:1;transform:none} }
@keyframes toastOut { to{opacity:0;transform:translateY(6px) scale(.96)} }

/* ═══════════════════════════════════════════════════════════════
   LOADING OVERLAY — image background with deep blue tint
   ═══════════════════════════════════════════════════════════════ */
.portal-loading {
    position: fixed; inset: 0; z-index: 300; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .9s cubic-bezier(.4,0,.2,1);
    background: #254870;
}
.portal-loading.hidden { opacity: 0; pointer-events: none; }
.portal-loading.pl-init { display: none; }

/* Restore the background image */
.pl-bg {
    position: absolute; inset: -6%;
    background: url('../volunteeringimage.jpg') center/cover no-repeat;
    animation: plZoom 12s ease-out forwards;
}
@keyframes plZoom { from{transform:scale(1.1)} to{transform:scale(1.0)} }

/* Deep blue vignette over the image */
.pl-vignette {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 75% 75% at 50% 48%, transparent 20%, rgba(20,50,100,.7) 100%),
        linear-gradient(to bottom, rgba(20,50,100,.72) 0%, rgba(20,50,100,.35) 45%, rgba(20,50,100,.88) 100%);
}

/* Keep scan line hidden — not needed in new design */
.pl-scan { display: none; }

/* Floating particles — restore */
.pl-particles { position: absolute; inset: 0; pointer-events: none; }
.pl-p {
    position: absolute; bottom: -8px; left: var(--x);
    width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
    background: rgba(200,230,255,.9);
    box-shadow: 0 0 8px 1px rgba(180,215,255,.6);
    animation: plFloat var(--dur, 4s) ease-in var(--d, 0s) infinite;
    opacity: 0;
}
@keyframes plFloat {
    0%   { transform: translateY(0) scale(1);   opacity: 0; }
    8%   { opacity: .9; }
    85%  { opacity: .35; }
    100% { transform: translateY(-108vh) scale(.5); opacity: 0; }
}

/* Main loading content */
.pl-inner {
    position: relative; z-index: 2; text-align: center;
    animation: plRise .8s cubic-bezier(.4,0,.2,1) .15s both;
}
@keyframes plRise { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }

.pl-logo-wrap { position: relative; width: 116px; height: 116px; margin: 0 auto 30px; }
.pl-logo {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2;
    animation: plPulse 2.6s ease-in-out infinite;
}
@keyframes plPulse {
    0%,100% { filter: drop-shadow(0 0 18px rgba(180,215,255,.5)) brightness(1.08); }
    50%     { filter: drop-shadow(0 0 56px rgba(180,215,255,1.0)) brightness(1.22); }
}

/* Orbiting rings */
.pl-orbit {
    position: absolute; inset: -20px; border-radius: 50%;
    border: 1px solid rgba(200,230,255,.28);
    animation: spin 3.2s linear infinite;
}
.pl-orbit::before {
    content: ''; position: absolute;
    top: -4px; left: 50%; transform: translateX(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #93C5FD;
    box-shadow: 0 0 12px 3px rgba(147,197,253,.9);
}
.pl-orbit-2 {
    inset: -36px; border-color: rgba(196,181,253,.2);
    animation-duration: 5.5s; animation-direction: reverse;
}
.pl-orbit-2::before { background: #C4B5FD; box-shadow: 0 0 12px 3px rgba(196,181,253,.9); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading text — light on dark image */
.pl-org {
    font-family: 'Nunito', sans-serif;
    font-size: 30px; font-weight: 900; letter-spacing: 10px;
    color: #E8F3FC; margin-bottom: 10px; line-height: 1;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.pl-org span {
    display: inline-block;
    animation: plLetter .35s cubic-bezier(.34,1.56,.64,1) calc(.08s + var(--i,0) * .05s) both;
}
.pl-sp { display: inline-block; width: .55em; }
@keyframes plLetter {
    from { opacity: 0; transform: translateY(26px) scale(.75); }
    to   { opacity: 1; transform: none; }
}

.pl-tagline {
    font-family: 'Nunito', sans-serif; font-size: 9.5px; font-weight: 800;
    letter-spacing: 5px; color: rgba(180,215,255,.9); text-transform: uppercase;
    opacity: 0;
    animation: plFadeSlide .35s ease .45s forwards;
    margin-bottom: 30px;
}
@keyframes plFadeSlide { from{opacity:0;transform:translateY(8px)} to{opacity:.9;transform:none} }

.pl-sep {
    width: 200px; height: 1px; margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, rgba(147,197,253,.6) 40%, rgba(196,181,253,.5) 60%, transparent);
    opacity: 0;
    animation: plFadeSlide .3s ease .5s forwards;
}

.pl-bar-wrap {
    position: relative; width: 240px; height: 3px; background: rgba(255,255,255,.12);
    border-radius: 3px; overflow: visible; margin: 0 auto 16px;
    opacity: 0;
    animation: plFadeSlide .3s ease .5s forwards;
}
.pl-bar-glow {
    position: absolute; top: -4px; left: 0; width: 40px; height: 11px;
    border-radius: 6px; background: rgba(147,197,253,.5); filter: blur(6px);
    animation: plBarGlowMove .9s cubic-bezier(.4,0,.6,1) .55s forwards;
    opacity: 0; animation-fill-mode: both;
}
@keyframes plBarGlowMove { 0%{left:0%;opacity:0} 5%{opacity:1} 100%{left:calc(100% - 40px);opacity:.7} }
.pl-bar-fill {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, #93C5FD, #C4B5FD, #67E8F9, #93C5FD);
    background-size: 300% 100%;
    animation: plBarFill .9s cubic-bezier(.4,0,.6,1) .55s forwards, plShimmer 1.4s linear infinite;
}
@keyframes plBarFill { to { width: 100%; } }
@keyframes plShimmer { from{background-position:0%} to{background-position:300%} }

.pl-status {
    font-family: 'Nunito', sans-serif; font-size: 9px; font-weight: 800;
    letter-spacing: 3px; color: rgba(180,215,255,.5); text-transform: uppercase;
    opacity: 0;
    animation: plFadeSlide .3s ease .55s forwards, plStatusBlink 1.6s ease-in-out .85s infinite;
}
@keyframes plStatusBlink { 0%,100%{opacity:.38} 50%{opacity:.82} }

/* ═══════════════════════════════════════════════════════════════
   TRACK ACCENT BORDERS
   ═══════════════════════════════════════════════════════════════ */
.track-teal   { border-color: rgba(14,168,154,.38) !important; }
.track-violet { border-color: rgba(112,72,216,.38) !important; }
.track-coral  { border-color: rgba(224,96,96,.38) !important; }
.accent-teal   { color: var(--teal); }
.accent-violet { color: var(--violet); }
.accent-coral  { color: var(--coral); }
.accent-amber  { color: var(--amber); }

/* ═══════════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════════ */
.section-title {
    font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800;
    letter-spacing: 2px; color: var(--textm); margin-bottom: 12px; text-transform: uppercase;
}
.muted { color: var(--textm); }
.text-small { font-size: 12px; }
.mt-4  { margin-top: 4px;  } .mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; } .mt-20 { margin-top: 20px; }
.mb-4  { margin-bottom: 4px; } .mb-12 { margin-bottom: 12px; }
.mb-20 { margin-bottom: 20px; }
.flex  { display: flex; } .flex-center { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.flex-1 { flex: 1; } .text-right { text-align: right; }
hr.divider { border: none; border-top: 1.5px solid var(--border); margin: 16px 0; }
.spinner { display:inline-block;width:14px;height:14px;border:2px solid rgba(58,114,190,.2);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar-open .sidebar { transform: none; }
    .portal-main { margin-left: 0; }
    .view-root { padding: 16px 16px 80px; }
    .mob-toggle { display: flex; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-two-col { grid-template-columns: 1fr; }
    .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .form-grid-2 { grid-template-columns: 1fr; }
    .lb-podium { grid-template-columns: 1fr 1.1fr 1fr; gap: 6px; }
}
@media (max-width: 520px) {
    .card-grid-4, .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; }
    .panel-tabs { flex-direction: column; }
    .panel-tab { text-align: center; }
    .auth-card { padding: 32px 24px; }
    .auth-mascot { width: 108px; height: 108px; margin-bottom: -18px; }
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC ENTRANCE — image background, visible and clear
   ═══════════════════════════════════════════════════════════════ */
.cin-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: #254870;
    display: flex; align-items: center; justify-content: center;
    animation: cinIn .4s ease-out;
    pointer-events: all;
    overflow: hidden;
}
.cin-overlay.cin-out { animation: cinOut .5s ease-in forwards; }
@keyframes cinIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes cinOut { to   { opacity: 0; pointer-events: none } }

/* The background image — clearly visible */
.cin-bg {
    position: absolute; inset: 0;
    background: url('../volunteeringimage.jpg') center/cover no-repeat;
    transform: scale(1.04);
    animation: cinZoom 8s ease-out forwards;
}
@keyframes cinZoom { from{transform:scale(1.08)} to{transform:scale(1.0)} }

/* Deep blue overlay for text contrast, lighter in center */
.cin-bg-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(20,50,95,.45) 0%, rgba(20,50,95,.72) 100%),
        linear-gradient(to bottom, rgba(20,50,95,.55) 0%, rgba(20,50,95,.28) 40%, rgba(20,50,95,.78) 100%);
}

.cin-content {
    position: relative; z-index: 1; text-align: center;
    animation: cinSlide .55s ease-out .15s both;
}
@keyframes cinSlide { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }

.cin-logo { font-family: 'Nunito', sans-serif; font-size: 52px; font-weight: 900; margin-bottom: 22px; }
.cin-welcome {
    font-family: 'Nunito', sans-serif;
    font-size: 11px; letter-spacing: 4px;
    color: rgba(200,225,255,.80); margin-bottom: 10px; text-transform: uppercase; font-weight: 700;
}
.cin-name {
    font-family: 'Nunito', sans-serif;
    font-size: 28px; font-weight: 900;
    margin-bottom: 10px; line-height: 1.2; color: #E8F3FC;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.cin-track { font-size: 14px; color: rgba(200,225,255,.88); margin-bottom: 32px; font-weight: 700; }
.cin-bar-wrap { width: 240px; height: 4px; background: rgba(255,255,255,.18); border-radius: 4px; overflow: hidden; margin: 0 auto; }
.cin-bar {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #93C5FD, #C4B5FD);
    animation: cinBar 2.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cinBar { from { width: 0 } to { width: 100% } }

.cin-logo-img {
    width: 90px; height: 90px; object-fit: contain;
    display: block; margin: 0 auto 22px;
    animation: cinLogoIn .7s cubic-bezier(.34,1.4,.64,1) .2s both;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.4)) brightness(1.1);
}
@keyframes cinLogoIn { from{opacity:0;transform:scale(.65)} to{opacity:1;transform:scale(1)} }

/* ═══════════════════════════════════════════════════════════════
   CURRICULUM ASSIGNMENT CARDS
   ═══════════════════════════════════════════════════════════════ */
.curr-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 22px 24px;
    transition: border-color .2s, box-shadow .2s; margin-bottom: 10px; box-shadow: var(--shadow);
}
.curr-card.curr-locked    { border-color: rgba(224,88,88,.22); }
.curr-card.curr-completed { border-color: rgba(24,184,136,.28); opacity: .72; }
.curr-card.curr-credited  { border-left: 4px solid var(--green); }
.curr-header { display: flex; align-items: flex-start; gap: 12px; }
.curr-title { font-weight: 800; font-size: 15px; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
.curr-meta { font-size: 12px; color: var(--textm); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.curr-countdown { font-size: 11px; font-weight: 800; color: var(--teal); background: var(--teal-g); border: 1.5px solid rgba(14,168,154,.28); border-radius: 100px; padding: 3px 11px; white-space: nowrap; }
.curr-open-badge { font-size: 11px; font-weight: 700; color: var(--teal); background: var(--teal-g); border: 1.5px solid rgba(14,168,154,.28); border-radius: 100px; padding: 3px 11px; white-space: nowrap; }
.curr-lock-badge { font-size: 11px; font-weight: 700; color: var(--textm); background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 100px; padding: 3px 11px; white-space: nowrap; }
.curr-reg-badge  { font-size: 11px; font-weight: 800; color: var(--blue); background: var(--blue-g); border: 1.5px solid rgba(58,114,190,.28); border-radius: 100px; padding: 3px 11px; white-space: nowrap; }
.curr-credit-badge { font-size: 11px; font-weight: 800; color: var(--green); background: var(--green-g); border: 1.5px solid rgba(24,184,136,.28); border-radius: 100px; padding: 3px 11px; white-space: nowrap; }
.curr-done-badge { font-size: 11px; font-weight: 800; color: var(--green); background: var(--green-g); border: 1.5px solid rgba(24,184,136,.28); border-radius: 100px; padding: 3px 11px; white-space: nowrap; }
.curr-full-badge { font-size: 10px; font-weight: 800; color: var(--red); background: var(--red-g); border: 1.5px solid rgba(224,88,88,.28); border-radius: 100px; padding: 2px 9px; }
.curr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Slot bar */
.slot-bar-track { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.slot-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--teal), #2dd4bf); transition: width .6s cubic-bezier(.4,0,.2,1); }
.slot-info { font-size: 11px; color: var(--textm); margin-top: 4px; font-weight: 600; }

/* Volunteer chips */
.vol-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vol-chip { font-size: 11px; padding: 4px 11px; border-radius: 100px; background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text2); white-space: nowrap; font-weight: 700; }
.vol-chip.chip-credited { background: var(--green-g); border-color: rgba(24,184,136,.3); color: var(--green); }

/* Track pill for Media/Design */
.pill-media-design { background: var(--coral-g); color: var(--coral); border: 1.5px solid rgba(224,96,96,.28); }

/* ─── Sidebar overlay for mobile ─────────────────────────────── */
.sidebar-open .portal-main::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(20,45,80,.25); backdrop-filter: blur(4px);
    z-index: 40;
}

/* ─── Assignment Detail / Edit Modal ────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(20,45,80,.3); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; transition: opacity .2s ease;
}
.modal-overlay.modal-in { opacity: 1; }
.modal-box {
    background: var(--surface); border: 1.5px solid var(--border-hi);
    border-radius: 22px; width: 100%; max-width: 560px;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 24px 72px rgba(20,50,100,.25);
    transform: translateY(12px); transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.modal-in .modal-box { transform: translateY(0); }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1.5px solid var(--border);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
    border-radius: 22px 22px 0 0;
}
.modal-title { font-size: 15px; font-weight: 800; color: var(--text); }
.modal-close {
    background: var(--surface-2); border: 1.5px solid var(--border);
    color: var(--textm); border-radius: 10px;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; flex-shrink: 0; transition: background .15s;
}
.modal-close:hover { background: var(--blue-g); color: var(--blue); border-color: rgba(58,114,190,.3); }
.modal-body { padding: 22px 24px 26px; }
.modal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.modal-chip { font-size: 12px; padding: 4px 12px; border-radius: 100px; background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text2); font-weight: 700; }
.modal-signup-close { font-size: 13px; color: var(--blue); background: var(--blue-g); border: 1.5px solid rgba(58,114,190,.22); border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; line-height: 1.5; font-weight: 700; }
.modal-section { margin-top: 18px; }
.modal-section-title { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--textm); text-transform: uppercase; margin-bottom: 8px; }
.modal-instructions { font-size: 13px; color: var(--text2); line-height: 1.7; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 16px; white-space: pre-wrap; font-weight: 600; }

/* Signup-close notice on volunteer cards */
.curr-signup-close { font-size: 12px; color: var(--blue); margin-top: 5px; line-height: 1.4; font-weight: 600; }

/* ─── Simple card for All tab ───────────────────────────────── */
.curr-simple-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 6px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 14px; transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow);
}
.curr-simple-row:hover { border-color: var(--border-hi); box-shadow: var(--shadow-md); }
.curr-simple-row.done { opacity: 0.55; }
.curr-simple-icon { font-size: 15px; flex-shrink: 0; }
.curr-simple-name { font-size: 13px; font-weight: 700; color: var(--text); }
.curr-simple-meta { font-size: 11px; color: var(--textm); margin-top: 1px; font-weight: 600; }
.curr-simple-badge { flex-shrink: 0; margin-left: auto; }

.curr-card.curr-credited { opacity: 0.62; }

/* ─── Slot system ───────────────────────────────────────────── */
.slot-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.vol-slot { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; transition: opacity .15s; }
.slot-filled   { background: rgba(58,114,190,.08); border: 1.5px solid rgba(58,114,190,.22); color: var(--text); }
.slot-you      { background: rgba(58,114,190,.16); border: 1.5px solid rgba(58,114,190,.45); color: var(--blue); }
.slot-empty    { background: transparent; border: 1.5px dashed rgba(80,130,180,.25); color: var(--textm); }
.slot-credited { background: rgba(24,184,136,.10); border: 1.5px solid rgba(24,184,136,.32); color: var(--green); }
.vol-slot-av { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; letter-spacing: 0; }
.slot-filled .vol-slot-av   { background: rgba(58,114,190,.18); color: var(--blue); }
.slot-you .vol-slot-av      { background: rgba(58,114,190,.28); color: var(--blue); }
.slot-empty .vol-slot-av    { background: rgba(80,130,180,.10); color: var(--textm); font-size: 12px; }
.slot-credited .vol-slot-av { background: rgba(24,184,136,.2); color: var(--green); }
.vol-slot-name { line-height: 1; }

.curr-card.curr-clickable { cursor: pointer; }
.curr-card.curr-clickable:hover { border-color: rgba(58,114,190,.30); box-shadow: var(--shadow-md); }

.curr-subsection { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.curr-subsection-lbl { font-size: 10px; font-weight: 800; color: var(--textm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }

.curr-waiting { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--orange); background: var(--orange-g); border: 1.5px solid rgba(216,120,48,.22); border-radius: 8px; padding: 5px 12px; }

/* ─── ACTIVITIES VIEW ────────────────────────── */
.activities-section-label { font-size:10px;font-weight:800;color:var(--textm);text-transform:uppercase;letter-spacing:.1em;padding:4px 0 10px; }

/* ─── EVENT CARDS ────────────────────────────── */
.ev-card { border-left: 3px solid var(--violet); }
.ev-tag { font-size:10px;font-weight:800;padding:3px 9px;border-radius:100px; }
.ev-tag-assembly   { background:var(--blue-g);color:var(--blue);border:1.5px solid rgba(58,114,190,.22); }
.ev-tag-leadership { background:var(--gold-g);color:var(--gold);border:1.5px solid rgba(212,150,14,.22); }
.chapter-label-badge { font-size:11px;font-weight:700;padding:4px 11px;border-radius:100px;background:var(--purple-g);color:var(--purple);border:1.5px solid rgba(128,89,216,.25); }

/* ─── ROLE BADGE IN SLOT ─────────────────────── */
.slot-role-badge { font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;background:var(--gold-g);color:var(--gold);margin-left:4px;white-space:nowrap; }

/* ─── GIVE HOURS – REMOVE CHIP ───────────────── */
.vol-chip-row { display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px; }
.give-hrs-chip { display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;background:rgba(58,114,190,.08);border:1.5px solid rgba(58,114,190,.22);font-size:12px;font-weight:700;transition:all .15s; }
.give-hrs-chip.vol-excluded { background:var(--red-g);border-color:rgba(224,88,88,.28);color:var(--textm);text-decoration:line-through;opacity:.5; }
.remove-vol-btn { background:none;border:none;color:var(--textm);cursor:pointer;font-size:13px;padding:0 2px;line-height:1;transition:color .15s; }
.remove-vol-btn:hover { color:var(--red); }

/* ─── DIRECTOR VIEW TOGGLE ───────────────────── */
.view-toggle-btn { font-size:11px;padding:5px 12px;border-radius:100px; }

/* ─── MY CHAPTER ─────────────────────────────── */
.chapter-rep-card { display:flex;align-items:center;gap:16px;padding:18px 22px;margin-bottom:18px; }

/* ─── AUTH CODE LOGIN ────────────────────────── */
.auth-link-btn { background:none;border:none;color:var(--blue);cursor:pointer;font-size:inherit;padding:0;text-decoration:underline;font-weight:700; }
.auth-role-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0; }

/* ─── CHAPTER COMBO (searchable dropdown) ────── */
.chap-combo { position:relative; }
.chap-combo-trigger { display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none; }
.chap-combo-trigger.open { border-color:var(--blue); box-shadow:0 0 0 4px rgba(58,114,190,.13); }
.chap-combo-caret { font-size:11px;color:var(--textm);transition:transform .15s;flex-shrink:0; }
.chap-combo-trigger.open .chap-combo-caret { transform:rotate(180deg); }
.chap-combo-panel { position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;background:var(--surface);border:1.5px solid rgba(58,114,190,.3);border-radius:var(--rsm);overflow:hidden;box-shadow:var(--shadow-lg); }
.chap-combo-search { width:100%;padding:10px 13px;background:var(--surface-2);border:none;border-bottom:1.5px solid var(--border);border-radius:0;color:var(--text);font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;outline:none; }
.chap-combo-search::placeholder { color:var(--textm);font-weight:400; }
.chap-combo-opts { max-height:200px;overflow-y:auto; }
.chap-combo-opt { padding:10px 14px;font-size:13px;color:var(--text2);cursor:pointer;transition:background .1s;font-weight:600; }
.chap-combo-opt:hover { background:var(--blue-g);color:var(--text); }
.chap-combo-opt.selected { color:var(--blue);font-weight:800;background:rgba(58,114,190,.10); }
.chap-combo-none { color:var(--textm);cursor:default;font-style:italic; }

/* ═══════════════════════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════════════════════ */
.cal-loading { color: var(--textm); font-size: 13px; padding: 24px 0; }
.cal-month-block { margin-bottom: 32px; }
.cal-month-title {
    font-size: 15px; font-weight: 800; color: var(--text);
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-day-header {
    text-align: center; font-size: 10px; font-weight: 800;
    color: var(--textm); text-transform: uppercase; letter-spacing: .06em;
    padding: 6px 0;
}
.cal-cell {
    min-height: 72px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 8px; font-size: 12px;
    transition: border-color .15s;
}
.cal-cell-empty { background: transparent; border-color: transparent; min-height: 72px; }
.cal-cell.cal-today {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue), inset 0 0 0 9999px rgba(56,189,248,.06);
}
.cal-cell.cal-has-notes { border-color: rgba(255,255,255,.2); }
.cal-date-num {
    font-size: 11px; font-weight: 800; color: var(--textm);
    margin-bottom: 4px;
}
.cal-today .cal-date-num {
    color: var(--blue); background: rgba(56,189,248,.15);
    border-radius: 50%; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
}
.cal-note {
    font-size: 10px; color: var(--text2); font-weight: 600;
    background: rgba(56,189,248,.1); border-radius: 4px;
    padding: 2px 5px; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}