/* ─────────────────────────────────────────────────────────────────────────────
   WESA Holdings — Shared Design System
   Dark glass · Brand-aware primary · Amber accent
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#06060f;color:#e2e8f0;min-height:100vh;-webkit-font-smoothing:antialiased}

/* ── Date/time picker — dark colour scheme ── */
input[type="date"],input[type="time"]{color-scheme:dark}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(2) hue-rotate(200deg);
  cursor: pointer;
  opacity: 0.8;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.04)}66%{transform:translate(-20px,15px) scale(.97)}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}

.au {animation:fadeUp .45s ease both}
.au1{animation:fadeUp .45s .06s ease both}
.au2{animation:fadeUp .45s .12s ease both}
.au3{animation:fadeUp .45s .18s ease both}
.au4{animation:fadeUp .45s .24s ease both}
.au5{animation:fadeUp .45s .30s ease both}
.au6{animation:fadeUp .45s .36s ease both}
.ai {animation:fadeIn  .4s ease both}
.as {animation:scaleIn .4s ease both}

/* ── Background Orbs ── */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;animation:orbFloat 18s ease-in-out infinite}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(99,102,241,.17) 0%,transparent 70%);top:-160px;left:-160px}
.orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(245,158,11,.11) 0%,transparent 70%);bottom:-120px;right:-120px;animation-delay:-9s}
.orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(168,85,247,.09) 0%,transparent 70%);top:40%;left:58%;animation-delay:-4s}

/* ── Glass Cards ── */
.glass{background:rgba(13,11,28,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,.14);border-radius:16px}
.gcard{background:rgba(13,11,28,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,.14);border-radius:16px;transition:border-color .25s,transform .25s,box-shadow .25s}
.gcard:hover{border-color:rgba(99,102,241,.3);transform:translateY(-2px);box-shadow:0 12px 40px rgba(99,102,241,.09)}

.stat-card{background:rgba(13,11,28,.65);backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,.14);border-radius:16px;padding:22px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.6),transparent)}
.stat-card:hover{border-color:rgba(99,102,241,.28);transform:translateY(-2px);box-shadow:0 12px 40px rgba(99,102,241,.09)}

/* ── Typography ── */
.gradient-text{background:linear-gradient(135deg,#818cf8 0%,#a78bfa 50%,#f59e0b 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-title{font-size:1.55rem;font-weight:700;color:#f1f5f9;letter-spacing:-.02em;margin:0}
.section-title{font-size:1rem;font-weight:600;color:#f1f5f9;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.section-title svg{color:#818cf8;width:17px;height:17px;flex-shrink:0}
.muted{color:#64748b}
.label,.form-label{display:block;font-size:.75rem;font-weight:500;color:#94a3b8;margin-bottom:6px;letter-spacing:.02em}
.field-error{font-size:.73rem;color:#f87171;margin-top:5px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .25s ease;line-height:1;font-family:inherit}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-lg{padding:13px 24px;font-size:.95rem;border-radius:12px}
.btn-md{padding:10px 20px;font-size:.875rem;border-radius:10px}
.btn-sm{padding:7px 14px;font-size:.8rem;border-radius:8px}
.btn-xs{padding:5px 11px;font-size:.73rem;border-radius:7px}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff}
.btn-primary:hover{background:linear-gradient(135deg,#818cf8,#6366f1);box-shadow:0 0 28px rgba(99,102,241,.5);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-amber{background:linear-gradient(135deg,#f59e0b,#d97706);color:#06060f}
.btn-amber:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 0 28px rgba(245,158,11,.45);transform:translateY(-1px)}
.btn-ghost{background:rgba(99,102,241,.08);color:#818cf8;border:1px solid rgba(99,102,241,.2)}
.btn-ghost:hover{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.38);transform:translateY(-1px)}
.btn-danger{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.22)}
.btn-danger:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.38)}

/* ── Inputs ── */
.input,.form-control{width:100%;background:rgba(10,8,20,.85);border:1px solid rgba(99,102,241,.18);color:#e2e8f0;border-radius:10px;padding:10px 14px;font-size:.875rem;transition:border-color .2s,box-shadow .2s,background .2s;font-family:inherit}
.input:focus,.form-control:focus{outline:none;border-color:rgba(99,102,241,.55);box-shadow:0 0 0 3px rgba(99,102,241,.1);background:rgba(15,12,30,.95)}
.input::placeholder,.form-control::placeholder{color:#475569}
select.input option,select.form-control option{background:#0d0b1c;color:#e2e8f0}
textarea.input,textarea.form-control{resize:vertical}
.input-wrap{position:relative}
.input-wrap .i-pfx{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#475569;width:16px;height:16px;pointer-events:none;z-index:2}
.input-wrap .input{padding-left:40px}
/* Our own i-pfx icon (calendar/clock) sits on the left of date & time fields —
   suppress the browser's own picker glyph on the right so it doesn't look like
   a duplicate icon. Left at opacity 0 (not display:none) so the native picker
   is still there to click/tap, just invisible. Note: the picker-indicator
   pseudo-element positions itself within the input's own box regardless of
   the input's CSS `position` — do NOT add `position:relative` to the input
   here, it made the (now-positioned) input paint over the i-pfx icon and
   hide it, since both become part of the same positioned-stacking order and
   the input comes after the icon in the DOM. */
.input-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.input-wrap input[type="time"]::-webkit-calendar-picker-indicator{opacity:0;-webkit-appearance:none;position:absolute;right:0;top:0;height:100%;width:36px;margin:0;padding:0;cursor:pointer}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.badge svg{width:10px;height:10px}
.b-pending  {background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.22)}
.b-submitted{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.22)}
.b-confirmed,.b-paid,.b-completed{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.22)}
.b-cancelled{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.22)}
.b-progress {background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.22)}
.b-sent         {background:rgba(99,102,241,.12);color:#818cf8;border:1px solid rgba(99,102,241,.22)}
.b-draft        {background:rgba(100,116,139,.12);color:#94a3b8;border:1px solid rgba(100,116,139,.22)}
.b-quote        {background:var(--brand-primary-dim);color:var(--brand-primary);border:1px solid var(--brand-border)}
.b-quote-declined{background:rgba(100,116,139,.12);color:#94a3b8;border:1px solid rgba(100,116,139,.22)}
.b-overdue  {background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.22)}

.dot{display:inline-block;width:7px;height:7px;border-radius:50%;animation:pulseDot 2s ease-in-out infinite}

/* ── Alerts ── */
.alert{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border-radius:12px;font-size:.875rem;animation:fadeUp .35s ease both}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alert-success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);color:#6ee7b7}
.alert-error  {background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); color:#fca5a5}
.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);color:#fcd34d}
.alert-info   {background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.25);color:#a5b4fc}

/* ── Tables ── */
.table-wrap{background:rgba(13,11,28,.5);border:1px solid rgba(99,102,241,.12);border-radius:16px;overflow:hidden;overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead{background:rgba(8,7,18,.75)}
thead th{padding:11px 16px;text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#475569;white-space:nowrap}
tbody tr{border-top:1px solid rgba(99,102,241,.07);transition:background .15s ease}
tbody tr:hover{background:rgba(99,102,241,.05)}
tbody td{padding:13px 16px;font-size:.875rem;color:#cbd5e1;vertical-align:middle}

/* ── Navigation ── */
.topnav{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;background:rgba(6,6,15,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(99,102,241,.1);display:flex;align-items:center}
.topnav-inner{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:2px;width:100%}
.topnav-logo{display:flex;align-items:center;gap:9px;margin-right:18px;text-decoration:none;flex-shrink:0}
.logo-box{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#4f46e5);display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(99,102,241,.45);transition:box-shadow .3s}
.topnav-logo:hover .logo-box{box-shadow:0 0 30px rgba(99,102,241,.7)}
.logo-box svg{width:15px;height:15px;color:#fff}
.logo-name{font-size:.95rem;font-weight:700;color:#f1f5f9;letter-spacing:-.01em}
.logo-tag{font-size:.7rem;font-weight:600;color:#818cf8;background:rgba(99,102,241,.12);padding:2px 7px;border-radius:100px;border:1px solid rgba(99,102,241,.2);margin-left:4px}
.nav-a{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;color:#64748b;font-size:.8rem;font-weight:500;text-decoration:none;transition:color .18s,background .18s;white-space:nowrap}
.nav-a svg{width:14px;height:14px;flex-shrink:0}
.nav-a:hover{color:#e2e8f0;background:rgba(99,102,241,.09)}
.nav-a.active{color:#818cf8;background:rgba(99,102,241,.12)}
.nav-spacer{height:56px;flex-shrink:0}
.nav-logout{background:none;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;color:#64748b;font-size:.8rem;font-weight:500;transition:color .18s,background .18s}
.nav-logout:hover{color:#f87171;background:rgba(239,68,68,.08)}
.nav-logout svg{width:14px;height:14px}

/* ── Pills (filter) ── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:100px;font-size:.75rem;font-weight:600;text-decoration:none;border:1px solid rgba(99,102,241,.18);color:#64748b;transition:all .2s}
.pill:hover{color:#e2e8f0;border-color:rgba(99,102,241,.38);background:rgba(99,102,241,.08)}
.pill.active{color:#818cf8;border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.12)}
[data-brand] .pill:hover{color:var(--brand-primary);border-color:var(--brand-border);background:var(--brand-primary-dim)}
[data-brand] .pill.active{color:var(--brand-primary);border-color:var(--brand-border);background:var(--brand-primary-dim)}
/* Light mode pill visibility */
html[data-theme="light"] .pill{color:#1a3460;border-color:rgba(26,52,96,.28);background:rgba(255,255,255,.35)}
html[data-theme="light"] .pill:hover{color:#0f172a;border-color:rgba(26,52,96,.5);background:rgba(255,255,255,.6)}
html[data-theme="light"] .pill.active{color:var(--brand-primary);border-color:var(--brand-border);background:rgba(255,255,255,.55)}


/* ── Layout ── */
.page   {max-width:1200px;margin:0 auto;padding:36px 24px;position:relative;z-index:1}
.page-md{max-width:860px; margin:0 auto;padding:36px 24px;position:relative;z-index:1}
.page-sm{max-width:520px; margin:0 auto;padding:48px 24px;position:relative;z-index:1}
.auth-card{background:rgba(13,11,28,.82);backdrop-filter:blur(24px);border:1px solid rgba(99,102,241,.18);border-radius:20px;padding:36px;animation:scaleIn .4s ease both}
.divider{border:none;border-top:1px solid rgba(99,102,241,.1);margin:20px 0}
.info-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#475569;margin-bottom:5px}
.info-value{font-size:.875rem;color:#e2e8f0}

/* ── Icon circle ── */
.ic{display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}
.ic svg{flex-shrink:0}
.ic-sm{width:32px;height:32px}.ic-sm svg{width:14px;height:14px}
.ic-md{width:40px;height:40px}.ic-md svg{width:18px;height:18px}
.ic-lg{width:48px;height:48px}.ic-lg svg{width:22px;height:22px}
.ic-indigo{background:rgba(99,102,241,.15);color:#818cf8}
.ic-amber {background:rgba(245,158,11,.15);color:#f59e0b}
.ic-green {background:rgba(16,185,129,.15);color:#10b981}
.ic-red   {background:rgba(239,68,68,.15); color:#f87171}
.ic-blue  {background:rgba(59,130,246,.15);color:#60a5fa}
.ic-purple{background:rgba(168,85,247,.15);color:#c084fc}

/* ── Calendar ── */
.cal-day{border-radius:10px;min-height:76px;padding:8px;display:flex;flex-direction:column;border:1px solid rgba(99,102,241,.1);background:rgba(13,11,28,.5);transition:border-color .2s,background .2s;position:relative;overflow:hidden}
.cal-day:hover{border-color:rgba(99,102,241,.25);background:rgba(99,102,241,.04)}
.cal-day.blocked{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.18)}
.cal-day.has-booking{background:rgba(99,102,241,.07);border-color:rgba(99,102,241,.25)}
.cal-day.is-today{border-color:rgba(99,102,241,.5)}
.cal-day.is-today::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#6366f1,#a78bfa)}
.cal-day-num{font-size:.8rem;font-weight:600;color:#94a3b8}
.cal-day.is-today .cal-day-num{color:#818cf8}

/* ── Feature cards (public) ── */
.feature-card{background:rgba(13,11,28,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,.14);border-radius:16px;padding:24px;transition:border-color .25s,transform .25s,box-shadow .25s}
.feature-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-3px);box-shadow:0 14px 44px rgba(99,102,241,.1)}

/* ── Hero image sections (public pages) ── */
.hero-bg{position:relative;border-radius:20px;overflow:hidden;min-height:420px;display:flex;align-items:center}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,6,15,.88) 0%,rgba(6,6,15,.55) 60%,rgba(6,6,15,.15) 100%)}
.hero-bg-content{position:relative;z-index:2;padding:56px 48px;max-width:600px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;font-size:.75rem;font-weight:600;letter-spacing:.02em}
.hero-badge-indigo{background:rgba(99,102,241,.18);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ── Mobile hamburger nav ── */
.mob-ham{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:7px;border:none;background:rgba(99,102,241,.08);border-radius:8px;cursor:pointer;margin-left:auto;flex-shrink:0}
.mob-ham span{display:block;width:100%;height:2px;background:#94a3b8;border-radius:2px;transition:transform .25s,opacity .25s}
.mob-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-ham.open span:nth-child(2){opacity:0}
.mob-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob-drawer{display:none;flex-direction:column;gap:4px;padding:12px 16px 16px;border-top:1px solid rgba(99,102,241,.1);background:rgba(6,6,15,.97);position:absolute;top:56px;left:0;right:0;z-index:199}
.mob-drawer-a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;color:#94a3b8;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .18s,background .18s}
.mob-drawer-a:hover{color:#e2e8f0;background:rgba(99,102,241,.09)}
.mob-drawer-sep{border:none;border-top:1px solid rgba(99,102,241,.1);margin:8px 0}
.mob-drawer-actions{display:flex;gap:8px}

/* ── Responsive nav — hide desktop links/actions on mobile ── */
@media(max-width:768px){
  .nav-a{display:none}
  .nav-desktop-actions{display:none!important}
  .nav-logout-wrap{display:none!important}
  .mob-ham{display:flex}
}

/* ── Page hero background layer (all public pages) ── */
.wesa-bg-outer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#060c1a}
.wesa-bg-img-layer{
  position:absolute;top:-26%;left:-26%;right:-26%;bottom:-26%;
  background:url('/images/wesa-hero-bg.jpg') center 40%/cover no-repeat;
  transform:scale(0.68);transform-origin:center center;
  transition:opacity .7s ease
}
.wesa-bg-dim{position:absolute;inset:0;background:rgba(4,8,22,.55)}
html[data-theme="light"] .wesa-bg-img-layer{background-image:url('/images/wesa-hero-bg-light.jpg')!important;background-size:cover!important;background-position:center 40%!important}
html[data-theme="light"] .wesa-bg-dim{background:rgba(220,235,255,.55)!important}
/* Body transparent so fixed bg shows; hide orbs when bg layer present */
body[data-brand]{background:transparent}
body[data-brand] .orb{display:none!important}
/* All public page content above the fixed bg */
body[data-brand] .page-wrap,body[data-brand] .page-md,body[data-brand] main{position:relative;z-index:1}

/* ── Site footer — glass, all brands ── */
.site-footer{border-top:1px solid rgba(255,255,255,.10);text-align:center;padding:32px 24px;font-size:.8rem;margin-top:64px;position:relative;z-index:1;background:rgba(4,8,22,.30);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.site-footer a{color:rgba(215,232,255,.85);text-decoration:none;transition:color .18s}
.site-footer a:hover{color:#fff}
.site-footer p{color:rgba(200,222,255,.80)}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.footer-links a{color:rgba(215,232,255,.85)!important;text-decoration:none;transition:color .18s,transform .18s;display:inline-block}
.footer-links a:hover{color:#fff!important;transform:translateY(-2px)}
/* Light mode footer */
html[data-theme="light"] .site-footer{background:rgba(215,235,255,.28)!important;border-top:1px solid rgba(0,0,100,.10)!important;backdrop-filter:blur(28px)!important;-webkit-backdrop-filter:blur(28px)!important}
html[data-theme="light"] .site-footer a{color:#1a3460!important}
html[data-theme="light"] .site-footer a:hover{color:#0f172a!important}
html[data-theme="light"] .site-footer p{color:#334155!important}
html[data-theme="light"] .footer-links a{color:#1a3460!important}
html[data-theme="light"] .footer-links a:hover{color:#0f172a!important}

/* ── Invoice mobile card view ── */
.inv-card{background:rgba(13,11,28,.65);border:1px solid rgba(99,102,241,.14);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.inv-card-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.inv-card-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#475569}
.inv-card-value{font-size:.875rem;color:#e2e8f0;text-align:right}
.inv-card-actions{display:flex;gap:8px;margin-top:4px}

/* ── Responsive breakpoints ── */
@media(max-width:640px){
  .hero-bg-content{padding:32px 24px}
  .page-md{padding:20px 16px}
  .page{padding:20px 16px}
  .inv-table-wrap{display:none}
  .inv-cards{display:flex!important;flex-direction:column;gap:12px}
}
@media(min-width:641px){
  .inv-cards{display:none!important}
}

/* ─────────────────────────────────────────────────────────────────────────────
   WESA Holdings — Per-brand CSS variable overrides
   Applied via data-brand attribute on <body> set by Thymeleaf from BrandContext.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── G4S (default) — dark navy + electric blue ── */
:root, [data-brand="g4s"] {
  --brand-primary:     #4ab0e8;
  --brand-primary-dim: rgba(74,176,232,.15);
  --brand-accent:      #0d2060;
  --brand-accent-dim:  rgba(13,32,96,.25);
  --brand-glow:        rgba(74,176,232,.32);
  --brand-border:      rgba(74,176,232,.2);
}

/* ── QuantumFix — dark + emerald green ── */
[data-brand="qf"] {
  --brand-primary:     #1d9e75;
  --brand-primary-dim: rgba(29,158,117,.15);
  --brand-accent:      #085041;
  --brand-accent-dim:  rgba(8,80,65,.25);
  --brand-glow:        rgba(29,158,117,.32);
  --brand-border:      rgba(29,158,117,.2);
}

/* ── WESA Holdings — dark teal/blue ── */
[data-brand="wesa"] {
  --brand-primary:     #4ab0e8;
  --brand-primary-dim: rgba(74,176,232,.13);
  --brand-accent:      #1a3a6b;
  --brand-accent-dim:  rgba(26,58,107,.25);
  --brand-glow:        rgba(74,176,232,.28);
  --brand-border:      rgba(74,176,232,.18);
}

/* Apply variables to shared UI */
[data-brand] .logo-box {
  background: linear-gradient(135deg, var(--brand-accent), color-mix(in srgb, var(--brand-primary) 30%, transparent));
  box-shadow: 0 0 18px var(--brand-glow);
}
[data-brand] .topnav { border-bottom-color: var(--brand-border); }
[data-brand] .logo-tag { color: var(--brand-primary); background: var(--brand-primary-dim); border-color: var(--brand-border); }
[data-brand] .nav-a.active { color: var(--brand-primary); background: var(--brand-primary-dim); }
[data-brand] .nav-a:hover { color: var(--brand-primary); }
[data-brand] .glass, [data-brand] .gcard { border-color: var(--brand-border); }
[data-brand] .gcard:hover { border-color: var(--brand-primary); box-shadow: 0 12px 40px var(--brand-primary-dim); }
[data-brand] .stat-card { border-color: var(--brand-border); }
[data-brand] .stat-card::before { background: linear-gradient(90deg, transparent, var(--brand-primary), transparent); }
[data-brand] .btn-primary { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); }
[data-brand] .btn-primary:hover { box-shadow: 0 0 28px var(--brand-glow); }
[data-brand] .btn-ghost { color: var(--brand-primary); border-color: var(--brand-border); background: var(--brand-primary-dim); }
[data-brand] .input:focus, [data-brand] .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-dim); }
[data-brand] .section-title i { color: var(--brand-primary); }
[data-brand] .site-footer a:hover { color: var(--brand-primary); }
[data-brand] .orb-1 { background: radial-gradient(circle, var(--brand-primary-dim) 0%, transparent 70%); }
[data-brand] .orb-2 { background: radial-gradient(circle, var(--brand-accent-dim) 0%, transparent 70%); }

/* Brand gradient text */
[data-brand="g4s"] .gradient-text {
  background: linear-gradient(135deg, #4ab0e8 0%, #85b7eb 50%, #b5d4f4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-brand="qf"] .gradient-text {
  background: linear-gradient(135deg, #1d9e75 0%, #5dcaa5 50%, #9fe1cb 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Shared layout helpers ── */
.side-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:780px){.side-grid{grid-template-columns:1fr}}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{padding:10px 14px;text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#475569}
.admin-table td{padding:12px 14px;font-size:.85rem;color:#cbd5e1;border-top:1px solid rgba(99,102,241,.07)}
.form-input{width:100%;background:rgba(10,8,20,.85);border:1px solid rgba(99,102,241,.18);color:#e2e8f0;border-radius:10px;padding:10px 14px;font-size:.875rem;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.form-input:focus{outline:none;border-color:rgba(99,102,241,.55);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.form-input::placeholder{color:#475569}
select.form-input option{background:#0d0b1c;color:#e2e8f0}

/* ─────────────────────────────────────────────────────────────────────────────
   Light theme — public pages only (data-theme="light" on body)
   Admin/customer pages keep the dark theme unchanged.
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"]{background:#fff;color:#0f172a}
[data-theme="light"] .topnav{background:rgba(255,255,255,.95);border-bottom-color:#e2e8f0}
[data-theme="light"] .topnav-logo .logo-name{color:#0f172a}
[data-theme="light"] .nav-a{color:#475569}
[data-theme="light"] .nav-a:hover{color:#0f172a;background:#f1f5f9}
[data-theme="light"] .nav-a.active{color:var(--brand-primary);background:var(--brand-primary-dim)}
[data-theme="light"] .mob-ham{background:#f1f5f9}
[data-theme="light"] .mob-ham span{background:#475569}
[data-theme="light"] .mob-drawer{background:#fff;border-top-color:#e2e8f0}
[data-theme="light"] .mob-drawer-a{color:#475569}
[data-theme="light"] .mob-drawer-a:hover{color:#0f172a;background:#f1f5f9}
[data-theme="light"] .mob-drawer-sep{border-top-color:#e2e8f0}
[data-theme="light"] .mob-drawer-actions .btn-ghost{color:var(--brand-primary);border-color:var(--brand-border)}
[data-theme="light"] .glass{background:#fff;backdrop-filter:none;border-color:#e2e8f0}
[data-theme="light"] .gcard{background:#f8fafc;backdrop-filter:none;border-color:#e2e8f0}
[data-theme="light"] .gcard:hover{border-color:var(--brand-primary);box-shadow:0 8px 28px var(--brand-primary-dim);transform:translateY(-2px)}
[data-theme="light"] .feature-card{background:#f8fafc;backdrop-filter:none;border-color:#e2e8f0}
[data-theme="light"] .feature-card:hover{border-color:var(--brand-primary);box-shadow:0 8px 28px var(--brand-primary-dim);transform:translateY(-3px)}
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3{color:#0f172a}
[data-theme="light"] p{color:#475569}
[data-theme="light"] .hero-bg:not(.hero-dark-bg) .hero-bg-overlay{background:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 55%,rgba(255,255,255,.1) 100%)}
[data-theme="light"] .hero-badge-indigo{background:var(--brand-primary-dim);color:var(--brand-accent);border-color:var(--brand-border)}
[data-theme="light"] .hero-badge-green{background:rgba(29,158,117,.1);color:#085041;border:1px solid rgba(29,158,117,.25)}
[data-theme="light"] .ic-indigo,[data-theme="light"] .ic-blue{background:var(--brand-primary-dim);color:var(--brand-primary)}
[data-theme="light"] .ic-green{background:rgba(29,158,117,.12);color:#1d9e75}
[data-theme="light"] .ic-amber{background:rgba(245,158,11,.1);color:#b45309}
[data-theme="light"] .btn-ghost{color:var(--brand-primary);border-color:var(--brand-border);background:var(--brand-primary-dim)}
[data-theme="light"] .btn-ghost:hover{background:var(--brand-primary-dim);border-color:var(--brand-primary)}
[data-theme="light"] .input,[data-theme="light"] .form-control{background:#fff;border-color:#e2e8f0;color:#0f172a}
[data-theme="light"] .input::placeholder,[data-theme="light"] .form-control::placeholder{color:#94a3b8}
/* Fix: brand-global dark placeholder invisible in light mode */
html[data-theme="light"] body[data-brand] input::placeholder,html[data-theme="light"] body[data-brand] textarea::placeholder{color:#94a3b8!important}
/* footer light-mode now handled globally above */
[data-theme="light"] .orb-1,[data-theme="light"] .orb-2,[data-theme="light"] .orb-3{opacity:.25}
[data-brand="g4s"][data-theme="light"] .orb-1{background:radial-gradient(circle,rgba(74,176,232,.12) 0%,transparent 70%)}
[data-brand="g4s"][data-theme="light"] .orb-2{background:radial-gradient(circle,rgba(13,32,96,.06) 0%,transparent 70%)}
[data-brand="qf"][data-theme="light"] .orb-1{background:radial-gradient(circle,rgba(29,158,117,.12) 0%,transparent 70%)}
[data-brand="qf"][data-theme="light"] .orb-2{background:radial-gradient(circle,rgba(8,80,65,.06) 0%,transparent 70%)}
[data-brand="wesa"][data-theme="light"] .orb-1{background:radial-gradient(circle,rgba(74,176,232,.1) 0%,transparent 70%)}
[data-brand="wesa"][data-theme="light"] .orb-2{background:radial-gradient(circle,rgba(26,58,107,.06) 0%,transparent 70%)}
[data-brand="harvest"][data-theme="light"] .orb-1{background:radial-gradient(circle,rgba(21,128,61,.12) 0%,transparent 70%)}
[data-brand="harvest"][data-theme="light"] .orb-2{background:radial-gradient(circle,rgba(5,46,22,.06) 0%,transparent 70%)}

/* ── Light mode: customer / standalone page components ───────────────────── */
[data-theme="light"] .stat-card{background:#f8fafc;border-color:#e2e8f0;backdrop-filter:none}
[data-theme="light"] .stat-card::before{background:linear-gradient(90deg,transparent,var(--brand-primary),transparent);opacity:.3}
[data-theme="light"] .table-wrap{background:#fff;border-color:#e2e8f0}
[data-theme="light"] thead{background:#f1f5f9}
[data-theme="light"] thead th{color:#64748b}
[data-theme="light"] tbody td{color:#334155}
[data-theme="light"] tbody tr{border-top-color:#e2e8f0}
[data-theme="light"] tbody tr:hover{background:var(--brand-primary-dim)}
[data-theme="light"] .inv-card{background:#f8fafc;border-color:#e2e8f0}
[data-theme="light"] .inv-card-label{color:#64748b}
[data-theme="light"] .inv-card-value{color:#1e293b}
[data-theme="light"] .auth-card{background:#fff;border-color:#e2e8f0;backdrop-filter:none}
[data-theme="light"] .page-title{color:#0f172a}
[data-theme="light"] .section-title{color:#1e293b}
[data-theme="light"] .info-label{color:#64748b}
[data-theme="light"] .info-value{color:#1e293b}
[data-theme="light"] .nav-logout{color:#475569}
[data-theme="light"] .nav-logout:hover{color:#ef4444;background:rgba(239,68,68,.06)}
[data-theme="light"] .divider{border-top-color:#e2e8f0}
[data-theme="light"] .alert-info{background:rgba(74,176,232,.05);border-color:rgba(74,176,232,.2);color:#0369a1}

/* ── Dark mode: override inline light-theme colours on public pages ──────── */
/* Public pages (dj-hire, privacy, about etc.) hardcode color:#0f172a inline; these rules win via !important */
body[data-theme="dark"] .page-md h1,
body[data-theme="dark"] .page-md h2,
body[data-theme="dark"] .page-md h3,
body[data-theme="dark"] .page h2,
body[data-theme="dark"] .page h3{color:#f1f5f9!important}
body[data-theme="dark"] .feature-card h2,
body[data-theme="dark"] .feature-card h3{color:#f1f5f9!important}
body[data-theme="dark"] .feature-card p,
body[data-theme="dark"] .feature-card ul li,
body[data-theme="dark"] .glass p{color:#94a3b8!important}
/* Lang-switcher button text invisible in dark (inline color:#1e293b) */
body[data-theme="dark"] .lang-switcher>button,
body[data-theme="dark"] .topnav .lang-switcher>button{color:#e2e8f0!important}

/* ─────────────────────────────────────────────────────────────────────────────
   Additional theme / brand fixes — appended
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Brand-aware ic-indigo / ic-blue in all modes ── */
[data-brand] .ic-indigo,[data-brand] .ic-blue{background:var(--brand-primary-dim);color:var(--brand-primary)}

/* ── Restore brand subtitle colours overridden by .feature-card p / .glass p !important ── */
body[data-theme="dark"] .feature-card p[style*="color:#4ab0e8"]{color:#4ab0e8!important}
body[data-theme="dark"] .feature-card p[style*="color:#1d9e75"]{color:#1d9e75!important}
body[data-theme="dark"] .glass p[style*="color:#4ab0e8"]{color:#4ab0e8!important}
/* "Based in" dark navy invisible in dark → brand primary */
body[data-theme="dark"] p[style*="color:#1a3a6b"]{color:var(--brand-primary)!important}

/* ── Enquiry / public form: labels + inputs in dark mode ── */
body[data-theme="dark"] .glass label{color:#94a3b8!important}
body[data-theme="dark"] .glass input:not([type="submit"]):not([type="button"]),
body[data-theme="dark"] .glass select,
body[data-theme="dark"] .glass textarea{background:rgba(10,8,20,.85)!important;border-color:rgba(99,102,241,.18)!important;color:#e2e8f0!important}

/* ── Select <option> elements follow theme ── */
[data-theme="light"] select.input option,
[data-theme="light"] select.form-control option{background:#fff;color:#0f172a}
[data-theme="light"] select.input,
[data-theme="light"] select.form-control{background:#fff;color:#0f172a}
/* Dark mode: ensure select options remain dark */
[data-theme="dark"] select.input option,
[data-theme="dark"] select.form-control option{background:#0d0b1c;color:#e2e8f0}

/* ── Date/time pickers in light mode ── */
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"]{color-scheme:light;color:#0f172a}

/* ── Google Places autocomplete in light mode ── */
[data-theme="light"] .pac-container{background:#fff!important;border-color:#e2e8f0!important}
[data-theme="light"] .pac-item{color:#334155!important;border-top-color:#e2e8f0!important}
[data-theme="light"] .pac-item:hover{background:#f1f5f9!important}
[data-theme="light"] .pac-item-query{color:#0f172a!important}

/* ── Logo name in standalone light mode pages (login, register) ── */
[data-theme="light"] .logo-name{color:#0f172a}

/* ── Dashboard alert banners: readable text in light mode ── */
[data-theme="light"] p[style*="color:#fca5a5"]{color:#b91c1c!important}
[data-theme="light"] p[style*="color:#fde68a"]{color:#92400e!important}
[data-theme="light"] p[style*="color:#bfdbfe"]{color:#1d4ed8!important}
[data-theme="light"] a[style*="color:#fbbf24"]{color:#92400e!important}
[data-theme="light"] a[style*="color:#f87171"]{color:#b91c1c!important}
/* Alert badge muted text in light */
[data-theme="light"] .page p[style*="color:#94a3b8"]{color:#64748b!important}

/* ── .card component (profile / customer pages) ── */
.card{border-radius:16px;padding:24px;border:1px solid rgba(99,102,241,.14)}
[data-theme="light"] .card{background:#fff;border-color:#e2e8f0}
[data-theme="light"] .card h2{color:#0f172a!important}

/* ── .label in light mode: use readable slate ── */
[data-theme="light"] .label,[data-theme="light"] .form-label{color:#475569}

/* ── Alert classes: light mode override ── */
[data-theme="light"] .alert-success{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3);color:#065f46}
[data-theme="light"] .alert-error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:#b91c1c}

/* ── .gcard in light mode for customer pages ── */
[data-theme="light"] .gcard{background:#f8fafc;border-color:#e2e8f0;backdrop-filter:none}

/* ── Lang-switcher button text invisible in light mode (inline color:#e2e8f0) ── */
[data-theme="light"] .lang-switcher>button{color:#334155!important}

/* ── Brand logo image in .logo-box: remove gradient background,
   and stop the fixed 32px box from squishing the logo image
   (flex items shrink replaced elements like <img> below their
   intrinsic size by default unless flex-shrink:0 is set) ── */
.logo-box-img{background:transparent!important;box-shadow:none!important;padding:2px;width:auto!important;height:auto!important;flex-shrink:0}
.logo-box-img img{flex-shrink:0}

/* ── WESANA W-mark logo (about page + admin navbars): white in dark mode, natural blue gradient in light mode ── */
.wesa-nav-logo{transition:filter .3s;display:inline-block;vertical-align:middle}

/* G4S navbar logo wrapper (customer navbars). The logo artwork itself is now
   the full-colour "4" mark used across the public pages — it already reads
   fine on both light and dark navbars, so no forced silhouette/recolour is
   applied here (that used to be needed for the old solid-white glyph). */
.g4s-nav-badge{display:inline-flex;align-items:center;flex-shrink:0}

/* ── Damage liability clause: body text readable in light mode ── */
[data-theme="light"] .damage-clause p[style*="color:#94a3b8"]{color:#475569!important}
[data-theme="light"] .damage-clause span[style*="color:#e2e8f0"]{color:#334155!important}

/* ── Mobile nav: hide lang-switcher from topnav (available in mob-drawer) ── */
@media(max-width:768px){
  .topnav-inner .lang-switcher{display:none!important}
  .topnav-inner .nav-logout-wrap{display:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN STAT-CARD SUB-ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
.stat-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.stat-card-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8}
.stat-card-value{font-size:2rem;font-weight:700;color:#f1f5f9;line-height:1;margin-bottom:4px}
.stat-card-sub{font-size:.72rem;color:#64748b}
[data-theme="light"] .stat-card-label{color:#64748b}
[data-theme="light"] .stat-card-value{color:#0f172a}
[data-theme="light"] .stat-card-sub{color:#94a3b8}
[data-theme="light"] .ic-red{background:rgba(239,68,68,.08);color:#dc2626}
[data-theme="light"] .ic-blue{background:var(--brand-primary-dim);color:var(--brand-primary)}
/* Admin inline color:#f1f5f9 overrides in light mode */
[data-theme="light"] [style*="color:#f1f5f9"]{color:#0f172a!important}
[data-theme="light"] [style*="color:#e2e8f0"]{color:#334155!important}
[data-theme="light"] [style*="color:#94a3b8"]{color:#475569!important}
[data-theme="light"] [style*="color:#64748b"]{color:#64748b!important}
[data-theme="light"] [style*="color:#fca5a5"],[data-theme="light"] [style*="color:#f87171"]{color:#dc2626!important}
[data-theme="light"] [style*="color:#fcd34d"]{color:#b45309!important}
[data-theme="light"] [style*="background:rgba(13,11,28"]{background:#f8fafc!important}
[data-theme="light"] [style*="background:rgba(6,6,15"]{background:#f8fafc!important}
[data-theme="light"] [style*="background:rgba(239,68,68,.06)"]{background:rgba(239,68,68,.04)!important;border-color:rgba(239,68,68,.12)!important}
[data-theme="light"] [style*="background:rgba(245,158,11,.08)"]{background:rgba(245,158,11,.05)!important}
/* Gradient text stays readable — must reset webkit-text-fill-color or color: is ignored */
[data-theme="light"] .gradient-text{
  color:var(--brand-primary)!important;
  -webkit-text-fill-color:var(--brand-primary)!important;
  background:none!important;
  -webkit-background-clip:unset!important;
  background-clip:unset!important}
/* Admin page body bg in light mode */
body[data-theme="light"]{background:#f0f4f8}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — scroll-reveal + entrance + micro-interactions
   ═══════════════════════════════════════════════════════════════════════════ */

/* Entrance keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-ring{0%{transform:scale(.95);box-shadow:0 0 0 0 var(--brand-primary-dim)}70%{transform:scale(1);box-shadow:0 0 0 10px transparent}100%{transform:scale(.95);box-shadow:0 0 0 0 transparent}}

/* Scroll-reveal base — hidden until JS adds .revealed */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-24px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal-left.revealed{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.reveal-scale.revealed{opacity:1;transform:scale(1)}

/* Page load entrance — .au, .au1 … .au6 (already in templates) */
.au {animation:fadeUp .55s cubic-bezier(.16,1,.3,1) both}
.au1{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .08s both}
.au2{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .16s both}
.au3{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .24s both}
.au4{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .32s both}
.au5{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .40s both}
.au6{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .48s both}

/* Navbar slide-down */
.topnav{animation:slideDown .4s cubic-bezier(.16,1,.3,1) both}

/* Stat-cards hover pop */
.stat-card{transition:border-color .25s,transform .25s,box-shadow .25s}
.stat-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 44px rgba(0,0,0,.18)}
[data-theme="light"] .stat-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.08)}

/* Button micro press */
.btn{transition:transform .12s,box-shadow .12s,background .18s,border-color .18s,color .18s}
.btn:active{transform:scale(.97)}

/* Card hover lifts */
.gcard{transition:border-color .25s,transform .25s,box-shadow .25s}
.feature-card,.portal-card{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.feature-card:hover{transform:translateY(-5px)}

/* Logo box pulse on hover */
.topnav-logo:hover .logo-box{animation:pulse-ring 1.2s ease-out}

/* Nav link underline sweep */
.nav-a{position:relative}
.nav-a::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:2px;background:var(--brand-primary);border-radius:2px;transition:left .2s,right .2s}
.nav-a:hover::after,.nav-a.active::after{left:8px;right:8px}

/* Input focus glow */
.input:focus{box-shadow:0 0 0 3px var(--brand-primary-dim);transition:box-shadow .2s,border-color .2s}

/* Alert slide-in */
.alert{animation:fadeLeft .35s cubic-bezier(.16,1,.3,1) both}

/* ic icon spin on hover */
.ic:hover i{transform:rotate(8deg);transition:transform .2s}

/* Mob-drawer slide-in */
.mob-drawer{transition:opacity .2s}

/* ── Admin theme button: outside nav-logout-wrap so stays visible on mobile ── */
@media(max-width:768px){
  /* Theme button sits directly in topnav-inner for admin — keep visible */
  .topnav-inner>#themeBtn{display:flex!important}
}
/* Admin topnav WESA scheme when data-brand="wesa" */
[data-brand="wesa"] .logo-tag{color:var(--brand-primary);background:var(--brand-primary-dim);border-color:var(--brand-border)}

/* ── Light-mode hero overlay — only for non-dark heroes; hero-dark-bg keeps its inline dark gradient ─ */
[data-theme="light"] .hero-bg:not(.hero-dark-bg) .hero-bg-overlay{
  background:linear-gradient(135deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.65) 55%,rgba(255,255,255,.12) 100%)!important}
/* ── Light-mode hero text — overlay turns white → text must be dark ─────────── */
[data-theme="light"] .hero-bg-content h1{color:#0f172a!important}
[data-theme="light"] .hero-bg-content h2{color:#0f172a!important}
[data-theme="light"] .hero-bg-content p{color:#334155!important}
[data-theme="light"] .hero-bg-content [style*="color:#94a3b8"]{color:#475569!important}
[data-theme="light"] .hero-bg-content [style*="color:#64748b"]{color:#475569!important}
/* Gradient text inside hero — use solid brand color (not gradient) in light mode */
[data-theme="light"] .hero-bg-content .gradient-text{
  color:var(--brand-primary)!important;
  -webkit-text-fill-color:var(--brand-primary)!important;
  background:none!important;
  -webkit-background-clip:unset!important;background-clip:unset!important}
/* ── Admin text clarity improvements ───────────────────────────────────────── */
/* Light mode admin text */
[data-theme="light"] .admin-table th{color:#374151}
[data-theme="light"] .admin-table td{color:#1e293b}
/* Improve dark mode table text */
.admin-table td{color:#e2e8f0}
.admin-table th{color:#94a3b8}
/* gcard section heading in dark mode */
.gcard h2,.gcard h3{color:#f1f5f9}
[data-theme="light"] .gcard h2,[data-theme="light"] .gcard h3{color:#0f172a}
/* Stat card improvement — stronger border per brand */
[data-brand] .stat-card{border-color:var(--brand-border);box-shadow:0 4px 24px rgba(0,0,0,.12)}
html[data-theme="light"] body[data-brand] .stat-card{background:#fff;border-color:var(--brand-border);box-shadow:0 2px 12px rgba(0,0,0,.06)}
/* Admin nav text always clear */
[data-brand] .topnav .logo-name{font-weight:700}
[data-brand][data-theme="light"] .topnav{background:rgba(255,255,255,.97);border-bottom-color:var(--brand-border)}
/* Action-needed alerts — stronger text */
[data-theme="light"] .alert-row{color:#1e293b!important}
/* Better contrast for muted text in admin dark mode */
.muted,[class*="muted"]{color:#94a3b8}
[data-theme="light"] .muted,[data-theme="light"] [class*="muted"]{color:#64748b}

/* ── Light-mode: fix inline color:#f1f5f9 (designed for dark bg → invisible on white) ── */
[data-theme="light"] *[style*="color:#f1f5f9"]{color:#0f172a!important}
[data-theme="light"] *[style*="color:#94a3b8"]{color:#64748b!important}
[data-theme="light"] .glass h2,[data-theme="light"] .glass h3{color:#0f172a!important}

/* ── Dark-overlay hero (e.g. about page) — keep text white even in light mode ── */
/* The .hero-dark-bg class marks heroes whose overlay has a dark inline style    */
/* and therefore must NOT have their heading turned dark by the global override. */
[data-theme="light"] .hero-dark-bg .hero-bg-content h1 {
  color: #f1f5f9 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
[data-theme="light"] .hero-dark-bg .hero-bg-content p {
  color: #cbd5e1 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
/* Ensure .hero-bg itself has a dark fallback in case the image fails to load */
.hero-bg { background: #06060f; }

/* ── Status badge light-mode visibility ────────────────────────────────────── */
[data-theme="light"] .b-submitted,
[data-theme="light"] .b-pending{background:rgba(180,83,9,.1);color:#92400e;border-color:rgba(180,83,9,.28)}
[data-theme="light"] .b-draft{background:rgba(71,85,105,.1);color:#374151;border-color:rgba(71,85,105,.26)}
[data-theme="light"] .b-sent{background:rgba(37,99,235,.1);color:#1d4ed8;border-color:rgba(37,99,235,.26)}
[data-theme="light"] .b-quote{background:var(--brand-primary-dim);color:var(--brand-accent);border-color:var(--brand-border)}
[data-theme="light"] .b-quote-declined{background:rgba(71,85,105,.08);color:#475569;border-color:rgba(71,85,105,.22)}
[data-theme="light"] .b-overdue,
[data-theme="light"] .b-cancelled{background:rgba(185,28,28,.1);color:#b91c1c;border-color:rgba(185,28,28,.26)}
[data-theme="light"] .b-confirmed,
[data-theme="light"] .b-paid,
[data-theme="light"] .b-completed{background:rgba(5,150,105,.1);color:#065f46;border-color:rgba(5,150,105,.26)}

/* ── Light-mode icon & text contrast improvements ────────────────────────── */
/* Calendar day numbers: #94a3b8 is too faint on white */
[data-theme="light"] .cal-day-num { color: #374151 !important; }
[data-theme="light"] .cal-day.is-today .cal-day-num { color: var(--brand-primary) !important; }
/* Calendar time-block pills: inline #c4b5fd (light purple) invisible on white */
[data-theme="light"] *[style*="color:#c4b5fd"] { color: #5b21b6 !important; }
/* Cal-day background: the dark glass default is invisible in light mode */
[data-theme="light"] .cal-day { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .cal-day:hover { background: var(--brand-primary-dim); border-color: var(--brand-primary); }
[data-theme="light"] .cal-day.blocked { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); }
[data-theme="light"] .cal-day.has-booking { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.3); }
[data-theme="light"] .cal-day.is-today { border-color: var(--brand-primary); background: var(--brand-primary-dim); }
/* Nav icons in light mode: ensure adequate contrast */
[data-theme="light"] .topnav [data-lucide] { color: inherit; }
[data-theme="light"] .nav-a [data-lucide] { color: #475569; }
[data-theme="light"] .nav-a.active [data-lucide] { color: var(--brand-primary); }
/* Any remaining inline light-purple (#818cf8, #a78bfa) invisible on white */
[data-theme="light"] *[style*="color:#818cf8"] { color: var(--brand-primary) !important; }
[data-theme="light"] *[style*="color:#a78bfa"] { color: #6d28d9 !important; }

/* ── Light-mode: action-needed alert section ─────────────────────────────── */
[data-theme="light"] .action-alert-section {
  background: rgba(239,68,68,.05) !important;
  border-color: rgba(239,68,68,.25) !important;
}
[data-theme="light"] .action-alert-title { color: #b91c1c !important; }
[data-theme="light"] .action-alert-row.action-alert-danger {
  background: rgba(239,68,68,.08) !important; border-color: rgba(220,38,38,.3) !important; color: #7f1d1d !important;
}
[data-theme="light"] .action-alert-row.action-alert-danger span { color: #7f1d1d !important; }
[data-theme="light"] .action-alert-row.action-alert-danger strong { color: #b91c1c !important; }
[data-theme="light"] .action-alert-row.action-alert-danger [data-lucide] { color: #dc2626 !important; }
[data-theme="light"] .action-alert-row.action-alert-warning {
  background: rgba(245,158,11,.08) !important; border-color: rgba(217,119,6,.3) !important; color: #78350f !important;
}
[data-theme="light"] .action-alert-row.action-alert-warning span { color: #78350f !important; }
[data-theme="light"] .action-alert-row.action-alert-warning strong { color: #b45309 !important; }
[data-theme="light"] .action-alert-row.action-alert-warning [data-lucide] { color: #d97706 !important; }
[data-theme="light"] .action-alert-row.action-alert-info {
  background: rgba(99,102,241,.08) !important; border-color: rgba(99,102,241,.3) !important; color: #312e81 !important;
}
[data-theme="light"] .action-alert-row.action-alert-info span { color: #312e81 !important; }
[data-theme="light"] .action-alert-row.action-alert-info strong { color: #4338ca !important; }
[data-theme="light"] .action-alert-row.action-alert-info [data-lucide] { color: #6366f1 !important; }
[data-theme="light"] .action-alert-row.action-alert-success {
  background: rgba(16,185,129,.08) !important; border-color: rgba(5,150,105,.25) !important; color: #064e3b !important;
}
[data-theme="light"] .action-alert-row.action-alert-success span { color: #064e3b !important; }
[data-theme="light"] .action-alert-row.action-alert-success strong { color: #059669 !important; }
[data-theme="light"] .action-alert-row.action-alert-success [data-lucide] { color: #10b981 !important; }

/* ── Light-mode: calendar cell visibility ────────────────────────────────── */
[data-theme="light"] .cal-day { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .cal-day:hover { background: var(--brand-primary-dim) !important; border-color: var(--brand-primary) !important; }
[data-theme="light"] .cal-day.blocked { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.3) !important; }
[data-theme="light"] .cal-day.has-booking { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.4) !important; }
[data-theme="light"] .cal-day.is-today { border-color: var(--brand-primary) !important; background: var(--brand-primary-dim) !important; }
[data-theme="light"] .cal-day-num { color: #374151 !important; }
[data-theme="light"] .cal-day.is-today .cal-day-num { color: var(--brand-primary) !important; }
[data-theme="light"] .cal-day [data-lucide] { color: #64748b !important; }

/* ── Light-mode: users page label/text contrast ───────────────────────────── */
[data-theme="light"] *[style*="color:#cbd5e1"] { color: #374151 !important; }
[data-theme="light"] .glass label { color: #374151 !important; }
[data-theme="light"] .glass .form-label { color: #374151 !important; }
[data-theme="light"] input[type="checkbox"] { accent-color: var(--brand-primary); }
[data-theme="light"] .badge-admin    { background: rgba(99,102,241,.12) !important; color: #3730a3 !important; border-color: rgba(99,102,241,.35) !important; }
[data-theme="light"] .badge-staff    { background: rgba(16,185,129,.12) !important; color: #065f46 !important; border-color: rgba(16,185,129,.35) !important; }
[data-theme="light"] .badge-customer { background: rgba(245,158,11,.12) !important; color: #78350f !important; border-color: rgba(245,158,11,.35) !important; }

/* ── WESA brand: gradient-text uses brand blue ───────────────────────────── */
[data-brand="wesa"] .gradient-text {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #7dd3f8 45%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Light-mode: .gcard inline text colors ───────────────────────────────── */
/* Inline color:#f1f5f9 (white) is invisible on light gcard background */
[data-theme="light"] .gcard *[style*="color:#f1f5f9"] { color: #0f172a !important; }
[data-theme="light"] .gcard *[style*="color:#94a3b8"] { color: #475569 !important; }
[data-theme="light"] .gcard .section-title            { color: #0f172a !important; }
[data-theme="light"] .gcard .label                    { color: #64748b !important; }
/* Travel estimate & surcharge text */
[data-theme="light"] .gcard *[style*="color:#fbbf24"] { color: #b45309 !important; }
[data-theme="light"] .gcard *[style*="color:#f59e0b"] { color: #b45309 !important; }
/* Map-pin and icon that use brand-primary are already brand-aware */
/* "All bookings" and section links - already brand-primary after template fix */

/* ── Light-mode: customer alert banners ──────────────────────────────────── */
/* Danger (overdue invoices) */
[data-theme="light"] .customer-alert-row.customer-alert-danger {
  background: rgba(239,68,68,.07) !important;
  border-color: rgba(220,38,38,.3) !important;
}
[data-theme="light"] .customer-alert-row.customer-alert-danger *[style*="color:#fca5a5"] { color: #b91c1c !important; }
[data-theme="light"] .customer-alert-row.customer-alert-danger *[style*="color:#f87171"] { color: #dc2626 !important; }
[data-theme="light"] .customer-alert-row.customer-alert-danger *[style*="color:#94a3b8"] { color: #6b7280 !important; }
[data-theme="light"] .customer-alert-row.customer-alert-danger [data-lucide] { color: #dc2626 !important; }
/* Warning (unpaid invoices) */
[data-theme="light"] .customer-alert-row.customer-alert-warning {
  background: rgba(245,158,11,.07) !important;
  border-color: rgba(217,119,6,.3) !important;
}
[data-theme="light"] .customer-alert-row.customer-alert-warning *[style*="color:#fde68a"] { color: #92400e !important; }
[data-theme="light"] .customer-alert-row.customer-alert-warning *[style*="color:#fbbf24"] { color: #b45309 !important; }
[data-theme="light"] .customer-alert-row.customer-alert-warning *[style*="color:#94a3b8"] { color: #6b7280 !important; }
[data-theme="light"] .customer-alert-row.customer-alert-warning [data-lucide] { color: #d97706 !important; }
/* Info (active jobs) */
[data-theme="light"] .customer-alert-row.customer-alert-info {
  background: rgba(59,130,246,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
}
[data-theme="light"] .customer-alert-row.customer-alert-info *[style*="color:#bfdbfe"] { color: #1e40af !important; }
[data-theme="light"] .customer-alert-row.customer-alert-info *[style*="color:#60a5fa"] { color: #2563eb !important; }
[data-theme="light"] .customer-alert-row.customer-alert-info *[style*="color:#94a3b8"] { color: #6b7280 !important; }
[data-theme="light"] .customer-alert-row.customer-alert-info [data-lucide] { color: #3b82f6 !important; }

/* ── Light-mode: alert-warning class (missing from earlier rules) ─────────── */
[data-theme="light"] .alert-warning { background:rgba(245,158,11,.08) !important; border-color:rgba(217,119,6,.3) !important; color:#78350f !important; }
[data-theme="light"] .alert-danger  { background:rgba(239,68,68,.08) !important; border-color:rgba(220,38,38,.25) !important; color:#7f1d1d !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ELEGANT MICRO-INTERACTIONS & POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Smooth page transitions ── */
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page,.page-md,.page-sm{animation:pageIn .38s cubic-bezier(.16,1,.3,1) both}

/* ── Badge pop-in ── */
@keyframes badgePop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.badge{animation:badgePop .3s cubic-bezier(.34,1.56,.64,1) both}

/* ── Glass card shimmer border on hover ── */
.glass{position:relative;overflow:hidden}
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,rgba(99,102,241,.07) 50%,transparent 70%);transform:translateX(-100%);transition:transform .55s ease;pointer-events:none}
.glass:hover::after{transform:translateX(100%)}

/* ── Smooth table row entrance ── */
tbody tr{animation:fadeIn .3s ease both}
tbody tr:nth-child(1){animation-delay:.02s}
tbody tr:nth-child(2){animation-delay:.05s}
tbody tr:nth-child(3){animation-delay:.08s}
tbody tr:nth-child(4){animation-delay:.11s}
tbody tr:nth-child(5){animation-delay:.14s}
tbody tr:nth-child(6){animation-delay:.17s}
tbody tr:nth-child(7){animation-delay:.20s}
tbody tr:nth-child(8){animation-delay:.23s}
tbody tr:nth-child(9){animation-delay:.26s}
tbody tr:nth-child(10){animation-delay:.29s}

/* ── Smooth focus ring on all interactive elements ── */
:focus-visible{outline:2px solid var(--brand-primary,#818cf8);outline-offset:3px;border-radius:6px}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand-primary,#818cf8);outline-offset:3px}

/* ── Smooth scrollbar (WebKit) — brand-aware, no hardcoded indigo ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brand-primary-dim,rgba(0,0,0,.15));border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--brand-border,rgba(0,0,0,.25))}
[data-theme="light"]::-webkit-scrollbar-thumb{background:rgba(0,0,0,.13)}
[data-theme="light"]::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.22)}

/* ── Nav link active indicator ── */
.nav-a.active::after{left:6px;right:6px;opacity:1}

/* ── Stat card number count-up visual ── */
.stat-card-value{transition:color .3s}

/* ── Smooth icon transitions ── */
[data-lucide]{transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .18s}
.btn:hover [data-lucide]{transform:scale(1.18)}
.btn:active [data-lucide]{transform:scale(.9)}

/* ── Footer link hover lift ── */
.footer-links a{transition:color .18s,transform .18s;display:inline-block}
.footer-links a:hover{transform:translateY(-2px);color:var(--brand-primary)}

/* ── Auth card entrance ── */
.auth-card{animation:scaleIn .42s cubic-bezier(.16,1,.3,1) both;animation-delay:.05s}

/* ── Toaster / flash messages slide-in ── */
.alert{animation:fadeLeft .35s cubic-bezier(.16,1,.3,1) both;animation-delay:.05s}

/* ── Mob drawer entrance ── */
@keyframes drawerSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mob-drawer[style*="flex"]{animation:drawerSlide .22s cubic-bezier(.16,1,.3,1) both}

/* ── Scroll progress indicator (add via JS) ── */
#scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--brand-primary,#818cf8),var(--brand-accent,#4f46e5));z-index:9999;transition:width .1s linear;will-change:width}

/* ── Dark-mode inline-colour corrections ────────────────────────────────────
   Public pages (dj-hire, it-services, enquiry, privacy, about) carry many
   hardcoded light-mode inline colours.  These attribute-selector rules flip
   them to readable equivalents when the user switches to dark mode, without
   requiring us to touch every template element.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] [style*="color:#0f172a"]{color:#e2e8f0!important}
[data-theme="dark"] [style*="color:#64748b"]{color:#94a3b8!important}
[data-theme="dark"] [style*="color:#334155"]{color:#94a3b8!important}
[data-theme="dark"] [style*="color:#475569"]{color:#8fa3b8!important}
[data-theme="dark"] [style*="color:#1e293b"]{color:#cbd5e1!important}

/* ── Reduced motion — respect system preference ── */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .orb{animation:none}
  .au,.au1,.au2,.au3,.au4,.au5,.au6,.ai,.as{animation:none;opacity:1;transform:none}
  .reveal,.reveal-left,.reveal-scale{opacity:1;transform:none;transition:none}
}

/* ── About page — people grid (desktop 2-col, mobile ordered 1-6) ─────────── */
.about-people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 36px 32px;
  margin-bottom: 48px;
  border-color: rgba(74,176,232,.15);
  align-items: start;
}
.about-people-grid > .apg-bio-prince  { grid-column: 1; grid-row: 1 / span 3; }
.about-people-grid > .apg-role-1      { grid-column: 2; grid-row: 1; }
.about-people-grid > .apg-role-2      { grid-column: 2; grid-row: 2; }
.about-people-grid > .apg-role-3      { grid-column: 2; grid-row: 3; }
.about-people-grid > .apg-bio-leh     { grid-column: 1; grid-row: 4; display:flex;flex-direction:column;gap:16px; }
.about-people-grid > .apg-role-4      { grid-column: 2; grid-row: 4; }

@media (max-width: 680px) {
  .about-people-grid {
    grid-template-columns: 1fr;
    padding: 24px 16px;
  }
  .about-people-grid > .apg-bio-prince,
  .about-people-grid > .apg-role-1,
  .about-people-grid > .apg-role-2,
  .about-people-grid > .apg-role-3,
  .about-people-grid > .apg-bio-leh,
  .about-people-grid > .apg-role-4 {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}
/* ── Explicit html bg for brand pages (body is transparent) ── */
html[data-theme="dark"]{background:#06060f}
html[data-theme="light"]{background:#fff}

/* ── CSS variable for theme-aware heading text ── */
:root { --text-heading: #f1f5f9; }
html[data-theme="light"] { --text-heading: #0f172a; }

/* ── Shared language switcher (matches the one on wesanagroup.com's
   home page) — used by .lang-switcher across the public pages so the
   dropdown is the same component, and correctly themed, everywhere. ── */
.fc-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(4,14,40,.45);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.20);border-radius:20px;
  padding:7px 14px;cursor:pointer;
  font-size:.8rem;font-weight:700;color:rgba(220,235,255,.92);
  white-space:nowrap;text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.fc-btn:hover{background:rgba(16,36,90,.80);border-color:rgba(255,255,255,.35);transform:scale(1.04)}
.fc-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
html[data-theme="light"] .fc-btn{background:rgba(15,35,80,.06);border-color:rgba(15,35,80,.14);color:#334155}
html[data-theme="light"] .fc-btn:hover{background:rgba(15,35,80,.12);border-color:rgba(15,35,80,.24)}

.lang-drop{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(4,14,40,.68);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:6px;min-width:168px;z-index:500;
  box-shadow:0 12px 36px rgba(0,0,0,.40);
}
html[data-theme="light"] .lang-drop{background:rgba(255,255,255,.92);border-color:rgba(15,35,80,.12);box-shadow:0 12px 36px rgba(15,35,80,.16)}
.lang-drop a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;text-decoration:none;font-size:.82rem;font-weight:600;color:rgba(200,225,255,.80);transition:background .13s,color .13s}
.lang-drop a.active{background:rgba(74,176,232,.16);color:#7dd3fc}
.lang-drop a:hover{background:rgba(255,255,255,.08);color:#fff}
html[data-theme="light"] .lang-drop a{color:#334155}
html[data-theme="light"] .lang-drop a:hover{background:rgba(15,35,80,.07);color:#0f172a}
html[data-theme="light"] .lang-drop a.active{background:rgba(26,86,219,.10);color:#1a56db}