/* SPE BUE Portal — v2 design system (loaded after styles.css).
   Midnight Navy surfaces, Electric Blue primary, Cyan secondary, Amber highlight. */
:root,[data-theme],[data-theme="dark"]{
  --bg:#0B1220;--surface:#151F30;--surface-2:#111A2A;--surface-sunken:#1C283C;
  --text:#F1F5F9;--muted:#94A3B8;--muted-2:#64748B;--border:#243148;--border-strong:#34445F;
  --navy:#3478F6;--navy-strong:#4D8AF8;--navy-light:#7AA6FA;--navy-lighter:#7AA6FA;--navy-deep:#1C283C;
  --cyan:#22D3EE;--gold:#F5B942;--gold-light:#F8CB73;--gold-dark:#F5B942;--gold-darker:#F5B942;--gold-ink:#F5B942;
  --gold-tint:rgba(245,185,66,.12);--danger:#FB7185;--danger-bg:rgba(251,113,133,.12);
  --success:#34D399;--success-bg:rgba(52,211,153,.12);
  --radius-sm:8px;--radius:12px;--radius-lg:16px;
  --shadow-xs:none;--shadow-sm:none;--shadow:0 8px 24px rgba(0,0,0,.35);--shadow-lg:0 16px 40px rgba(0,0,0,.45);
  --sidebar:248px;
}
[data-theme="light"]{
  --bg:#F1F5F9;--surface:#fff;--surface-2:#F8FAFC;--surface-sunken:#EAF0F7;--text:#0B1220;--muted:#475569;--muted-2:#64748B;
  --border:#DDE5F0;--border-strong:#C5D1E3;--navy-strong:#2563EB;--navy-light:#2563EB;--navy-lighter:#3478F6;--navy-deep:#0B1220;
  --gold-dark:#8A5A00;--gold-darker:#8A5A00;--gold-ink:#8A5A00;--gold-tint:rgba(245,185,66,.2);--danger:#DC2626;--success:#047857;
  --shadow:0 8px 24px rgba(11,18,32,.08);
}
body,button,input,select,textarea{font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif}
h1,h2,h3,.page-header h1,.auth-form-inner h2{font-family:'Manrope','Inter',sans-serif;color:var(--text);letter-spacing:-.02em}
::selection{background:rgba(52,120,246,.35)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Surfaces */
.card,.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none;transition:border-color .2s,background .2s}
.card.hoverable:hover,a.card:hover,.stat-card:hover{transform:none;box-shadow:none;border-color:var(--border-strong)}
.card h2{color:var(--text);font-size:16px}
.card h2 .gold-underline{display:none}
.page-header{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.page-header h1{font-size:26px;font-weight:800}
.page-header .eyebrow{color:var(--cyan);letter-spacing:.02em;text-transform:none;font-weight:600}
.stat-card-icon,.stat-card.accent-gold .stat-card-icon{background:rgba(52,120,246,.14);color:var(--navy-light);border-radius:10px}
.stat-card.accent-gold .stat-card-icon{background:var(--gold-tint);color:var(--gold)}
.stat-card-num{font-family:'Manrope',sans-serif}

/* Buttons */
.btn{border-radius:10px;font-weight:600;letter-spacing:0;transition:background .15s,border-color .15s,transform .1s}
.btn-primary{background:var(--navy);color:#fff;box-shadow:none}
.btn-primary:hover:not(:disabled){background:var(--navy-strong);box-shadow:none}
.btn-cta,.btn-gold{background:var(--gold);color:#1a1204;box-shadow:none}
.btn-secondary{background:var(--surface-sunken);color:var(--text);border:1px solid var(--border-strong)}
.btn-secondary:hover:not(:disabled){filter:none;border-color:var(--navy)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border-strong)}
.btn-outline:hover:not(:disabled){border-color:var(--navy);background:rgba(52,120,246,.08)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(251,113,133,.4)}

/* Forms */
label{color:var(--muted);font-weight:600;font-size:12.5px}
input,select,textarea{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:10px;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(52,120,246,.25)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(251,113,133,.15)}
.msg{border-radius:10px;border:1px solid transparent;font-weight:500}
.msg.error{border-color:rgba(251,113,133,.35)}.msg.success{border-color:rgba(52,211,153,.35)}

/* Data */
table{font-size:13.5px}
th{color:var(--muted);font-size:11.5px;text-transform:none;letter-spacing:0;font-weight:600;border-bottom:1px solid var(--border-strong)}
td{border-bottom:1px solid var(--border)}
tbody tr:hover td{background:rgba(52,120,246,.05)}
.badge{font-weight:600;font-size:11.5px}
.badge-gold,.badge-timeout{background:var(--gold-tint);color:var(--gold)}
.badge-navy{background:rgba(52,120,246,.15);color:var(--navy-light)}
.empty-state-rich .es-icon{background:rgba(34,211,238,.1);color:var(--cyan);border:1px solid rgba(34,211,238,.25)}
.empty-state-rich .es-title{color:var(--text)}
#global-toast{background:var(--surface-sunken)!important;color:var(--text)!important;border:1px solid var(--border-strong);border-left:3px solid var(--cyan);border-radius:10px!important;box-shadow:var(--shadow-lg)}
.profile-pop{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-sunken) 50%,var(--surface) 75%);background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px;min-height:16px}
@keyframes sk{to{background-position:-200% 0}}
#ux-bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--navy),var(--cyan));z-index:9999;opacity:0;transition:width .3s,opacity .3s;pointer-events:none}
#ux-bar.on{opacity:1}

/* Shell: topbar (mobile) */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:none}
.topbar button.nav-btn{color:var(--muted);border-radius:10px;font-weight:600;transition:background .15s,color .15s}
.topbar button.nav-btn:hover:not(.active){background:var(--surface-sunken);color:var(--text)}
.topbar button.nav-btn.active{background:rgba(52,120,246,.16);color:var(--text);box-shadow:inset 3px 0 0 var(--navy)}
.nav-toggle-btn span{background:var(--text)}
.topbar-profile-avatar{background:var(--navy);color:#fff;border:0}
.topbar button.nav-btn.logout-btn{color:var(--danger)}
[data-theme] .bn-item{color:var(--muted)}
[data-theme] .bn-item.active{color:var(--text)}
[data-theme] .bn-item.active .bn-ico{background:rgba(52,120,246,.18)}
[data-theme] .bn-item.active .nav-ico{color:var(--navy-light)}
[data-theme] .bn-item.active::before{background:var(--navy)}
.bottom-nav{background:var(--surface);border-top:1px solid var(--border)}

/* Shell: desktop sidebar */
@media(min-width:981px){
  .topbar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);height:auto;padding:20px 14px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:20px;border-right:1px solid var(--border);border-bottom:0;z-index:40}
  .topbar .brand{padding:4px 8px;font-size:17px}
  .topbar nav#nav-links{display:flex;flex-direction:column;align-items:stretch;gap:2px;flex:1;overflow-y:auto}
  .topbar button.nav-btn{width:100%;text-align:left;padding:11px 14px;font-size:14px}
  .topbar button.nav-btn.logout-btn{margin:auto 0 0;border:0;border-top:1px solid var(--border);border-radius:10px;padding-top:12px}
  .topbar-actions{justify-content:space-between;padding:12px 8px 0;border-top:1px solid var(--border)}
  .topbar-profile-name{display:block}
  .page-wrap{margin-left:var(--sidebar);max-width:none;padding:32px clamp(24px,4vw,56px) 72px}
  .page-wrap>div{max-width:1240px;margin-inline:auto}
}

/* Auth */
.auth-wrap{background:var(--bg)}
.auth-hero{background:var(--surface-2);border-right:1px solid var(--border);color:var(--text)}
.auth-hero-noise{display:none}
.auth-hero-brand span{color:var(--navy-light);letter-spacing:.12em}
.auth-hero-brand small{color:var(--muted);text-transform:none;letter-spacing:0;font-size:13px}
.auth-award-badge{background:var(--gold-tint)!important;color:var(--gold)!important;border:1px solid rgba(245,185,66,.3)!important;box-shadow:none!important;border-radius:999px}
.auth-hero-mid h1{color:var(--text)}
.auth-hero-mid p{color:var(--muted)}
.cover-frame{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:none}
.auth-hero-badge{color:var(--muted);border-color:var(--border)}
.learn-more-btn{border:1px solid var(--border-strong);color:var(--text);background:transparent;border-radius:10px}
.join-spe-btn{background:var(--navy);color:#fff;border-radius:10px;box-shadow:none}
.auth-form-side{background:var(--bg);padding:32px 20px}
.auth-form-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;max-width:420px}
.auth-toggle{background:var(--surface-2);border:1px solid var(--border)}
.auth-toggle button{color:var(--muted)}
.auth-toggle button.active{background:var(--navy);color:#fff;box-shadow:none}
.link-btn{color:var(--cyan)}
.otp-input{letter-spacing:.4em;text-align:center;font-weight:700;font-size:20px}

@media(max-width:860px){.auth-hero{border-right:0;border-bottom:1px solid var(--border)}.auth-form-inner{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Neutralise legacy gradients / gold bars (generated from styles.css rules) */
html .topbar-profile-avatar{background:linear-gradient(90deg,var(--navy),var(--cyan))}
html .auth-hero{background:#151F30;border:1px solid #243148}
html .auth-hero-noise{background:#151F30;border:1px solid #243148}
html .cover-frame{backdrop-filter:none}
html .auth-hero-badge{backdrop-filter:none}
html .profile-avatar{background:#151F30;border:1px solid #243148}
html .rate-progress-bar-fill{background:linear-gradient(90deg,var(--navy),var(--cyan))}
html #view-app{background:var(--surface);border:1px solid var(--border)}
html #view-app::before{background:var(--surface);border:1px solid var(--border)}
html .page-wrap::before{background:var(--surface);border:1px solid var(--border)}
html .evaluation-center-card{backdrop-filter:none}
html .evaluation-center-header{backdrop-filter:none}
html .card{backdrop-filter:none}
html .eval-card{background:var(--surface);border:1px solid var(--border)}
html .eval-card::before{background:var(--surface);border:1px solid var(--border)}
html .btn-secondary{background:var(--surface);border:1px solid var(--border)}   /* theme colours (same values as before in dark mode) */
html .topbar{border-top:1px solid var(--border)}
html .mini-stat{border-top:1px solid var(--border)}
html .reg-panel{border-top:1px solid var(--border)}
html .rl-bar span{background:linear-gradient(90deg,var(--navy),var(--cyan))}
html .dash-hero{background:#151F30;border:1px solid #243148}
html .dash-hero::after{background:var(--surface);border:1px solid var(--border)}
html #panel-dashboard .stat-card{border-top:1px solid var(--border)}
html .lr-card{border-top:1px solid var(--border)}
html .lr-photo{background:#151F30;border:1px solid #243148}
html .ev-date-tile{background:#151F30;border:1px solid #243148}
html .dash-hero{background:var(--surface);border:1px solid var(--border)}
html .dash-hero-date{backdrop-filter:none}
html .stat-bar span{background:linear-gradient(90deg,var(--navy),var(--cyan))}
html .lrp-bar span{background:linear-gradient(90deg,var(--navy),var(--cyan))}
html .lrp{border-top:1px solid var(--border)}
html .lrp-photo{background:#151F30;border:1px solid #243148}
html .ev-modal-sheet{border-top:1px solid var(--border)}
html .ev-modal-close{backdrop-filter:none}
html .profile-pop{border-top:1px solid var(--border)}
html body,html #view-app{background:var(--bg)}
html body::before,html body::after{background:none!important}
html .link-btn,html .topbar{text-decoration-color:currentColor;border-top:0}
html .topbar button.nav-btn.active,html .pill-select button.active{border-color:var(--navy);box-shadow:none}
html .topbar button.nav-btn.active{box-shadow:inset 3px 0 0 var(--navy)}
html .stat-card,html .mini-stat,html .card{border-top:1px solid var(--border)}
html .topbar button.nav-btn::after{display:none}
html #view-app::before,html .page-wrap::before,html #view-app::after{display:none}
html .dash-hero-date{border-top:1px solid rgba(255,255,255,.2);backdrop-filter:none}
html .dash-hero{padding-bottom:30px}
html #panel-dashboard .stats-row{margin-top:16px;position:relative}
html .topbar-profile-avatar{background:var(--navy)}
html .dash-hero-date-dow{color:var(--gold)}

/* Admin step-by-step guides removed from view (render code left intact so nothing else breaks) */
html .adm-flow-mount{display:none!important}

/* Standalone attendance list selected in the Track Attendance picker */
.att-standalone-only{display:none}
.att-standalone .att-standalone-only{display:block}
.att-standalone #att-scan-block,.att-standalone #roster-details,.att-standalone #att-tools-block{display:none!important}

/* Logo: transparent gold mark, readable at small sizes */
html .topbar .brand img{height:30px;width:auto;border-radius:0;background:none}
html .topbar .brand span{color:var(--text)}
html .auth-hero-brand{align-items:center;gap:14px}
html .auth-logo{height:54px;width:auto;display:block}
html .auth-hero-brand span{display:none}
html .auth-hero-brand small{font-size:15px;font-weight:600;color:var(--text);letter-spacing:0}

/* Login photo restored (desktop): SPE hero photo with a navy overlay for legibility */
@media(min-width:861px){
  html .auth-hero{background:linear-gradient(90deg,rgba(11,18,32,.92) 0%,rgba(11,18,32,.68) 55%,rgba(11,18,32,.35) 100%),linear-gradient(0deg,rgba(11,18,32,.8) 0%,transparent 40%),url('/spebue_hero.jpg') center/cover no-repeat;border:0}
  html .auth-hero .cover-frame{display:none}
  html .auth-hero-mid h1{font-size:clamp(36px,4.2vw,56px)}
}

/* Profile popover: anchored to the profile button at the bottom of the sidebar */
html .profile-pop{border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
html .profile-pop .profile-avatar{outline:2px solid var(--navy);box-shadow:none;border-color:var(--surface)}
html .pp-list dt{text-transform:none;letter-spacing:0;font-weight:600}
html .pp-list>div{background:var(--surface-2)}
html .topbar-profile[aria-expanded="true"]{border-color:var(--navy)}
@media(min-width:981px){
  html .profile-pop{left:calc(var(--sidebar) + 8px)!important;right:auto!important;top:auto!important;bottom:16px!important;transform-origin:bottom left}
}
html .link-btn{border-bottom:0;text-decoration:underline;text-decoration-color:rgba(34,211,238,.5)}

/* =====================================================================================================
   LIGHT-MODE READABILITY — text that blended into its background.
   Causes: (1) fixed dark colours on buttons, (2) a hero card that lost its dark background but kept its white
   text, (3) amber/cyan "dark-mode" colours used as TEXT on white, (4) the primary blue just under the contrast
   limit for white text. Dark mode is untouched: every rule below only applies when data-theme="light".
   ===================================================================================================== */
[data-theme="light"]{
  --navy:#2563EB;--navy-strong:#1D4ED8;          /* white text on the primary blue: 5.2:1 (was 4.1:1) */
  --danger:#B91C1C;--danger-bg:#FDECEC;           /* red text on pale red / white: >= 5:1 */
  --cyan-ink:#0E7490;
  --whatsapp:#0A7A40;--whatsapp-dark:#076533;     /* white text on the WhatsApp green: >= 4.5:1 */
}
[data-theme="light"] .btn-secondary{background:var(--surface-sunken);border:1px solid var(--border-strong);color:var(--text)}
[data-theme="light"] .btn-secondary:hover:not(:disabled){border-color:var(--navy)}
/* The dashboard hero is a dark card with light text in both themes (its white title was invisible on white). */
[data-theme="light"] .dash-hero{background:#0F1B33;border:1px solid #0F1B33}
/* Amber used as text -> the dark amber "ink" colour */
[data-theme="light"] .badge-gold,[data-theme="light"] .badge-timeout{color:var(--gold-ink)}
[data-theme="light"] .stat-card.accent-gold .stat-card-icon{color:var(--gold-ink)}
[data-theme="light"] .dash-notice-go,[data-theme="light"] .dash-ev-go{color:var(--gold-ink)}
[data-theme="light"] .badge-navy{color:#1D4ED8}
[data-theme="light"] .badge-muted,[data-theme="light"] .reg-chip{color:var(--muted)}
/* Cyan used as text -> readable teal / blue */
[data-theme="light"] .link-btn{color:var(--navy-strong);text-decoration-color:rgba(37,99,235,.45)}
[data-theme="light"] .page-header .eyebrow{color:var(--cyan-ink)}
[data-theme="light"] .empty-state-rich .es-icon{background:rgba(14,116,144,.08);color:var(--cyan-ink);border:1px solid rgba(14,116,144,.25)}
[data-theme="light"] .member-search-wrap .ms-icon{opacity:1;color:var(--muted)}
/* Past events were faded as a whole (opacity .62), which also faded their text below readable contrast */
[data-theme="light"] .event-row.expired{opacity:1;background:var(--surface-2)}
[data-theme="light"] .event-row.expired strong{color:var(--muted)}
/* The little count inside an active filter pill: translucent WHITE on blue was too light for white text */
[data-theme="light"] .reg-filter button.active span,[data-theme="light"] .pill-select button.active span{background:rgba(11,18,32,.28)}
/* The login hero is a DARK photo/panel in both themes, so everything inside it must use the light-on-dark
   colours — otherwise its headline, subtitle and pills were dark text on a dark image in light mode. */
[data-theme="light"] .auth-hero{--text:#F1F5F9;--muted:#CBD5E1;--muted-2:#94A3B8;--border:rgba(255,255,255,.38);--border-strong:rgba(255,255,255,.55);--surface:rgba(255,255,255,.08)}
/* ...and the hero's decorative overlay was being painted with the (white) surface colour, covering the whole card. */
[data-theme="light"] .dash-hero::after{background:none;border:0}
/* A legacy hover rule turned primary-button text near-black (#1a1204): unreadable on the darker hover blue in light mode. */
[data-theme="light"] .btn-primary:hover:not(:disabled){color:#fff}