/* ==========================================================================
   SMARTCAMS — Legacy Ceremonial Theme (v2, luxury pass)
   PSMZA Convocation Award Management System

   FIX NOTE: the previous bug was inherited light text (h1–h6 / .text-white /
   .text-light utility classes from the old dark theme) surviving inside the
   new light parchment cards, because those selectors weren't being beaten in
   specificity. This version explicitly pairs background + text color for
   every zone, and force-overrides every common "light text" pattern inside
   .card with higher-specificity rules so nothing can leak through again —
   regardless of stylesheet load order.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Backdrop — leather-bound ledger cover. Single warm brown hue family,
       varied only in lightness (like a spotlight on a book cover) —
       avoids the muddy look of mixing unrelated hues. */
    --bg-leather-deep:  #140d08;
    --bg-leather-mid:   #2b1c10;
    --bg-leather-warm:  #3d2814;
    --glow-amber: rgba(184, 134, 58, 0.22);

    /* Surface — where text lives. Always solid, always light. */
    --surface-parchment: #FBF5E7;
    --surface-parchment-dim: #F3E9D2;
    --surface-white: #FFFFFF;

    /* Ink — text colors, tuned for AA+ contrast on parchment */
    --ink-strong: #201709;
    --ink-soft:   #5B4A2F;
    --ink-muted:  #8C7A57;

    /* Color-block accents — richer, deeper, more foil-like */
    --gold:        #B8863A;
    --gold-bright: #E7B65A;
    --gold-foil:   linear-gradient(135deg, #E7B65A 0%, #B8863A 45%, #8C5F1F 100%);
    --maroon:      #6E1220;
    --maroon-deep: #4A0C15;
    --success:     #2F6F4E;
    --danger:      #9B2C2C;

    --radius: 1rem;
    --shadow-card: 0 16px 36px rgba(13, 11, 22, 0.32);
}

body {
    background:
        radial-gradient(circle at 50% -5%, var(--glow-amber) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg-leather-warm) 0%, var(--bg-leather-mid) 45%, var(--bg-leather-deep) 100%);
    background-attachment: fixed;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--surface-parchment); /* body text only shows OUTSIDE cards, on dark bg */
    min-height: 100vh;
}

h1, h2, h3, .display-title {
    font-family: 'Merriweather', 'Playfair Display', Georgia, serif;
    font-weight: 900;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   CARDS — every text element inside is force-paired with the parchment
   surface. This is a broad safety net (low specificity) followed by more
   specific rules for labels/muted text so nothing white can survive here.
   ========================================================================== */
.card {
    background: var(--surface-parchment) !important;
    border: 1px solid rgba(184, 134, 58, 0.4) !important;
    border-top: 4px solid var(--gold) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-card) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card::before {
    /* gold foil corner flourish — the one signature ornament */
    content: '';
    position: absolute;
    top: -1px; right: -1px;
    width: 42px; height: 42px;
    background: var(--gold-foil);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    opacity: 0.9;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(13, 11, 22, 0.4) !important;
}

/* Safety net: catch every descendant first */
.card, .card * {
    color: var(--ink-strong) !important;
}
/* Then re-specify the softer roles at higher specificity so they still win */
.card .card-subtitle,
.card .text-muted,
.card small,
.card .label,
.card .stat-label {
    color: var(--ink-soft) !important;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.card .stat-value,
.card h1, .card h2, .card h3 {
    color: var(--ink-strong) !important;
    font-family: 'Merriweather', 'Playfair Display', Georgia, serif;
}
/* Explicitly defeat any leftover light-theme utility classes */
.card .text-white,
.card .text-light,
.card [class*="text-white"],
.card [class*="text-light"] {
    color: var(--ink-strong) !important;
}

/* Optional two-tone header band for cards that use .card-header —
   this is where the real color-block "撞色" lives: maroon block with
   gold/parchment text, cleanly separated from the parchment body. */
.card-header {
    background: var(--maroon) !important;
    border-bottom: 2px solid var(--gold) !important;
    padding: 0.9rem 1.25rem;
}
.card-header, .card-header * {
    color: var(--surface-parchment) !important;
    font-family: 'Merriweather', 'Playfair Display', Georgia, serif;
    letter-spacing: 0.05em;
}

/* Status chips — keep these color-blocked and legible on their own */
.badge, .pending, [class*="badge"] {
    background: var(--gold) !important;
    color: var(--ink-strong) !important;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 0.4rem;
}

/* ==========================================================================
   FORM INPUTS
   ========================================================================== */
.form-control, .form-select {
    background: var(--surface-white) !important;
    border: 1.5px solid #D9CDB2 !important;
    color: var(--ink-strong) !important;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    border-radius: 0.6rem;
    transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
    background: var(--surface-white) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(184, 134, 58, 0.22) !important;
    color: var(--ink-strong) !important;
}
.form-control::placeholder { color: var(--ink-muted) !important; opacity: 1; }
label { color: var(--surface-parchment) !important; font-weight: 600; font-size: 0.85rem; }
.card label { color: var(--ink-soft) !important; }

.input-group-text {
    background: var(--surface-parchment-dim) !important;
    border: 1.5px solid #D9CDB2 !important;
    color: var(--maroon) !important;
    border-right: none;
    border-radius: 0.6rem 0 0 0.6rem;
}
.input-group .form-control { border-left: none; border-radius: 0 0.6rem 0.6rem 0; }

/* ==========================================================================
   BUTTONS — flat color-blocked, gold-foil primary for the "luxury" ask
   ========================================================================== */
.btn-primary {
    background: var(--gold-foil) !important;
    border: none !important;
    color: var(--ink-strong) !important;
    font-weight: 700;
    border-radius: 0.6rem !important;
    padding: 0.85rem 1.6rem;
    letter-spacing: 0.4px;
    box-shadow: 0 6px 18px rgba(184, 134, 58, 0.4);
    transition: all 0.15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(184, 134, 58, 0.55); }

.btn-maroon {
    background: var(--maroon) !important;
    border: none !important;
    color: var(--surface-parchment) !important;
    font-weight: 700;
    border-radius: 0.6rem !important;
    padding: 0.85rem 1.6rem;
    box-shadow: 0 6px 18px rgba(110, 18, 32, 0.4);
}
.btn-maroon:hover { background: var(--maroon-deep) !important; color: var(--gold-bright) !important; transform: translateY(-1px); }

.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid var(--gold) !important;
    color: var(--gold-bright) !important;
    font-weight: 600;
    border-radius: 0.6rem !important;
}
.btn-outline-primary:hover { background: var(--gold) !important; color: var(--ink-strong) !important; }

.btn-success {
    background: var(--success) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0.6rem !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(47, 111, 78, 0.35);
}
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(47, 111, 78, 0.45); }

/* ==========================================================================
   NAVBAR / SIDEBAR — solid deep navy, gold hairline, stays on dark bg
   so no card-contrast rules apply here — this part was already fine.
   ========================================================================== */
.navbar, .sidebar {
    background: var(--bg-leather-deep) !important;
    border-bottom: 1px solid rgba(184, 134, 58, 0.3);
    color: var(--surface-parchment) !important;
}
.navbar a, .sidebar a, .navbar .nav-link, .sidebar .nav-link {
    color: rgba(251, 245, 231, 0.72) !important;
}
.navbar a.active, .sidebar a.active,
.navbar .nav-link.active, .sidebar .nav-link.active,
.sidebar .nav-link.bg-primary {
    color: var(--ink-strong) !important;
    background: var(--gold-foil) !important;
    border-radius: 0.5rem;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.alert-danger { background: #F7E3E3 !important; border: 1px solid var(--danger) !important; color: #7A1F1F !important; border-radius: 0.6rem; }
.alert-success { background: #E4F0E9 !important; border: 1px solid var(--success) !important; color: #1F4D36 !important; border-radius: 0.6rem; }

/* ==========================================================================
   AUTH CARD — certificate treatment
   Auto-targets any .card that contains a password field (login/register),
   via :has(), so no HTML class changes are needed. Upgrades it from a
   generic bootstrap card into something that reads like a diploma: a
   double gold frame, a soft halo behind it, generous breathing room, and
   a fixed icon-badge color so nothing clashes with the palette.
   ========================================================================== */
.card:has(input[type="password"]) {
    max-width: 480px;
    margin: 4.5rem auto;
    padding: 3rem 2.75rem 2.25rem !important;
    border: 1.5px solid rgba(184, 134, 58, 0.55) !important;
    outline: 1px solid rgba(184, 134, 58, 0.28);
    outline-offset: 7px;
    box-shadow:
        0 0 0 1px rgba(184, 134, 58, 0.12),
        0 30px 70px rgba(20, 13, 8, 0.55),
        0 0 120px rgba(184, 134, 58, 0.18) !important;
}

/* fix the clashing icon badge (was flat bootstrap blue) */
.card:has(input[type="password"]) .rounded-circle,
.card:has(input[type="password"]) [class*="bg-primary"] {
    background: var(--gold-foil) !important;
    width: 64px !important;
    height: 64px !important;
    box-shadow:
        0 0 0 7px rgba(184, 134, 58, 0.14),
        0 8px 20px rgba(184, 134, 58, 0.45) !important;
}
.card:has(input[type="password"]) .rounded-circle i,
.card:has(input[type="password"]) .rounded-circle svg {
    color: var(--ink-strong) !important;
    fill: var(--ink-strong) !important;
}

/* title block — bigger, more spaced, more "engraved" */
.card:has(input[type="password"]) h1,
.card:has(input[type="password"]) h2,
.card:has(input[type="password"]) h3,
.card:has(input[type="password"]) .card-title {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em;
    margin-top: 0.75rem;
}
.card:has(input[type="password"]) h1 + p,
.card:has(input[type="password"]) h2 + p,
.card:has(input[type="password"]) h3 + p,
.card:has(input[type="password"]) .card-title + p {
    font-size: 0.72rem !important;
    letter-spacing: 0.14em;
    color: var(--ink-soft) !important;
    padding-bottom: 1.4rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid rgba(184, 134, 58, 0.35);
    position: relative;
}
/* small diamond ornament centered on the divider line */
.card:has(input[type="password"]) h1 + p::after,
.card:has(input[type="password"]) h2 + p::after,
.card:has(input[type="password"]) h3 + p::after,
.card:has(input[type="password"]) .card-title + p::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -5px;
    width: 9px; height: 9px;
    background: var(--surface-parchment);
    border: 1.5px solid var(--gold);
    transform: translateX(-50%) rotate(45deg);
}

/* form fields — a touch taller, quieter borders, more premium feel */
.card:has(input[type="password"]) .form-control {
    padding: 0.95rem 1.1rem;
    border-color: #E3D3AE !important;
}
.card:has(input[type="password"]) .form-control:focus {
    box-shadow: 0 0 0 5px rgba(184, 134, 58, 0.16) !important;
}
.card:has(input[type="password"]) label {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

/* submit button — shine sweep on hover, small caps spacing */
.card:has(input[type="password"]) .btn-primary {
    width: 100%;
    padding: 1rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}
.card:has(input[type="password"]) .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}
.card:has(input[type="password"]) .btn-primary:hover::after {
    left: 130%;
}

/* footer link line — quieter, gold accent link */
.card:has(input[type="password"]) a {
    color: var(--maroon) !important;
    font-weight: 700;
}
.card:has(input[type="password"]) a:hover {
    color: var(--gold) !important;
}

/* ==========================================================================
   AUTH SPLIT LAYOUT (optional) — left photo panel + right certificate card.
   Requires wrapping your existing login markup like this in the HTML:

   <div class="auth-split">
     <div class="auth-split__image" style="background-image:url('/images/convocation-hero.jpg')"></div>
     <div class="auth-split__form">
       ... your existing .card (with the password field) goes here, unchanged ...
     </div>
   </div>

   Swap the inline background-image url for your own PSMZA convocation photo.
   The certificate card itself needs no width changes — it keeps the
   comfortable proportions from the section above.
   ========================================================================== */
.auth-split {
    display: flex;
    min-height: 100vh;
}
.auth-split__image {
    flex: 1.15;
    position: relative;
    background-image: url('../../uploads/images/b3.png');
    background-size: cover;
    background-position: center 40%;
}
.auth-split__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 13, 8, 0.15) 0%,
        rgba(20, 13, 8, 0.55) 65%,
        rgba(20, 13, 8, 0.88) 100%);
}
.auth-split__form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% -5%, var(--glow-amber) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg-leather-warm) 0%, var(--bg-leather-mid) 45%, var(--bg-leather-deep) 100%);
    padding: 2rem;
}
.auth-split__form .card:has(input[type="password"]) {
    margin: 0 !important;
}
@media (max-width: 900px) {
    .auth-split { flex-direction: column; }
    .auth-split__image { flex: 0 0 220px; }
}

/* ==========================================================================
   AUTH FULL-BLEED LAYOUT (chosen over the split version) — the convocation
   photo fills the whole screen, card floats centered on top. The overlay is
   a vignette (lighter center, darker edges) purely to tint the photo into
   the site's leather/gold palette — it isn't there to protect text contrast,
   since the certificate card underneath is already a solid opaque surface.

   Usage in HTML:
   <div class="auth-fullbleed">
     ... your existing .card (with the password field) goes here, unchanged ...
     ... an optional .auth-watermark line goes here too — it's pinned to the
     bottom of this container via absolute positioning, so it always sits
     on top of the background photo, never below it ...
   </div>
   ========================================================================== */
.auth-fullbleed {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    background-image: url('../../uploads/images/b3.png');
    background-size: cover;
    background-position: center 38%;
    padding: 4vh 2rem 5rem; /* extra bottom padding so the card never overlaps the watermark */
}
.auth-fullbleed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 22%,
        rgba(20, 13, 8, 0.80) 0%,
        rgba(20, 13, 8, 0.78) 20%,
        rgba(20, 13, 8, 0.30) 40%,
        rgba(20, 13, 8, 0.55) 65%,
        rgba(20, 13, 8, 0.90) 100%);
}
.auth-fullbleed .card:has(input[type="password"]) {
    position: relative;
    z-index: 1;
}

/* Pinned to the bottom of the background image itself — always visible
   on top of the photo, never falls below it onto plain body background */
.auth-watermark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.75rem;
    z-index: 1;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(251, 245, 231, 0.75);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   REGISTER PAGE — wider card override (more fields than login, needs room)
   ========================================================================== */
.register-page .card:has(input[type="password"]) {
    width: 100% !important;
    max-width: 9000px !important;
}

/* ==========================================================================
   AWARD CATEGORIES DYNAMIC ACCENTS (ACAD, INDUS, LEAD, VOL, ENT, SPORT)
   ========================================================================== */
.card[data-award-code="ACAD"] { --award-accent: #B8863A; --award-foil: linear-gradient(135deg, #E7B65A 0%, #B8863A 45%, #8C5F1F 100%); }
.card[data-award-code="INDUS"] { --award-accent: #2A52BE; --award-foil: linear-gradient(135deg, #4A75EE 0%, #2A52BE 45%, #152A75 100%); }
.card[data-award-code="LEAD"] { --award-accent: #6E1220; --award-foil: linear-gradient(135deg, #9E2235 0%, #6E1220 45%, #3D070F 100%); }
.card[data-award-code="VOL"] { --award-accent: #2F6F4E; --award-foil: linear-gradient(135deg, #4EA878 0%, #2F6F4E 45%, #173B28 100%); }
.card[data-award-code="ENT"] { --award-accent: #6B21A8; --award-foil: linear-gradient(135deg, #9333EA 0%, #6B21A8 45%, #3B0764 100%); }
.card[data-award-code="SPORT"] { --award-accent: #C2410C; --award-foil: linear-gradient(135deg, #F97316 0%, #C2410C 45%, #7C2D12 100%); }

/* 覆蓋卡片頂部邊框與角落金箔色彩 */
.card[data-award-code] {
    border-top: 4px solid var(--award-accent, var(--gold)) !important;
}
.card[data-award-code]::before {
    background: var(--award-foil, var(--gold-foil)) !important;
}

/* 已申請過的卡片微調視覺層次，讓它與未申請的有所區隔 */
.card.applied-card {
    background: #F4EEDC !important; /* 稍微深一點點的羊皮紙色 */
    border-color: rgba(184, 134, 58, 0.6) !important;
}

/* ==========================================================================
   SMARTCAMS — Dashboard Polish Layer
   Shared visual language for Student / Academic Advisor / Administrator
   ========================================================================== */
.smart-dashboard { padding-bottom: 3rem !important; }
.dashboard-hero {
    padding: 1.5rem 1.65rem;
    border: 1px solid rgba(231,182,90,.32);
    border-left: 4px solid var(--gold-bright);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(74,12,21,.92), rgba(20,13,8,.92));
    box-shadow: 0 16px 36px rgba(13,11,22,.25);
}
.dashboard-hero h1, .dashboard-hero .h2 { color: var(--surface-parchment) !important; }
.dashboard-hero-subtitle, .dashboard-hero .text-light, .dashboard-hero small { color: rgba(251,245,231,.78) !important; }
.dashboard-eyebrow { display:inline-block; margin-bottom:.45rem; color:var(--gold-bright); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.dashboard-hero-action { white-space:nowrap; }
.dashboard-section-kicker { color:var(--gold-bright); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.dashboard-section-title { color:var(--surface-parchment); font-family:'Merriweather','Playfair Display',Georgia,serif; }
.dashboard-section-note { color:rgba(251,245,231,.62); }
.dashboard-stat-card { min-height:185px; border-top-width:3px !important; }
.dashboard-stat-link { cursor:pointer; }
.dashboard-stat-link:hover { transform:translateY(-5px); }
.dashboard-stat-priority { border-top-color:var(--maroon) !important; }
.dashboard-stat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.dashboard-stat-icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(184,134,58,.14); color:var(--maroon) !important; font-size:1.15rem; }
.dashboard-stat-icon i, .dashboard-stat-arrow i { color:inherit !important; }
.dashboard-stat-arrow { color:var(--ink-muted) !important; }
.dashboard-stat-label { color:var(--ink-soft) !important; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.dashboard-stat-value { margin:.25rem 0 .35rem; color:var(--ink-strong) !important; font-family:'Merriweather','Playfair Display',Georgia,serif; font-size:2.35rem; font-weight:900; line-height:1; }
.dashboard-stat-caption { color:var(--ink-muted) !important; font-size:.82rem; line-height:1.45; }
.dashboard-mini-card { min-height:132px; }
.dashboard-mini-value { color:var(--ink-strong) !important; font-family:'Merriweather','Playfair Display',Georgia,serif; font-size:1.9rem; font-weight:900; }
.dashboard-large-icon { width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(184,134,58,.13); color:var(--maroon) !important; font-size:1.5rem; }
.dashboard-large-icon i { color:inherit !important; }
.dashboard-section-card { overflow:hidden; }
.dashboard-quick-action { display:flex; align-items:center; gap:.9rem; padding:1rem; border:1px solid #ded1b5; border-radius:.75rem; background:#fffaf0; text-decoration:none; transition:.18s ease; }
.dashboard-quick-action:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 20px rgba(80,55,20,.10); }
.dashboard-quick-action > i { flex:0 0 42px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--maroon); color:var(--surface-parchment) !important; font-size:1rem; }
.dashboard-quick-action span { display:flex; flex-direction:column; }
.dashboard-quick-action strong { color:var(--ink-strong) !important; font-size:.9rem; }
.dashboard-quick-action small { color:var(--ink-muted) !important; font-size:.76rem; text-transform:none; letter-spacing:0; margin-top:.15rem; }
.dashboard-workflow { display:grid; gap:.8rem; }
.dashboard-workflow-step { display:flex; gap:1rem; align-items:flex-start; padding:.9rem 1rem; border-radius:.75rem; text-decoration:none; background:#fffaf0; border:1px solid #e5d8bd; }
.dashboard-workflow-step:hover { border-color:var(--gold); }
.dashboard-workflow-step > span { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--gold-foil); color:var(--ink-strong) !important; font-weight:900; font-size:.72rem; }
.dashboard-workflow-step div { display:flex; flex-direction:column; }
.dashboard-workflow-step strong { color:var(--ink-strong) !important; }
.dashboard-workflow-step small { color:var(--ink-muted) !important; text-transform:none; letter-spacing:0; margin-top:.12rem; }
.dashboard-status-line { display:flex; gap:.9rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid rgba(184,134,58,.18); }
.dashboard-status-line:last-child { border-bottom:0; }
.status-dot { flex:0 0 12px; width:12px; height:12px; border-radius:50%; margin-top:.35rem; box-shadow:0 0 0 4px rgba(184,134,58,.12); }
.status-dot.done { background:var(--success); }
.status-dot.current { background:var(--gold); }
.dashboard-status-line div { display:flex; flex-direction:column; }
.dashboard-status-line strong { color:var(--ink-strong) !important; }
.dashboard-status-line small { color:var(--ink-muted) !important; text-transform:none; letter-spacing:0; margin-top:.12rem; }
@media (max-width: 767.98px) { .dashboard-hero { padding:1.2rem; } .dashboard-stat-card { min-height:160px; } .dashboard-hero-action { width:100%; } }