/* BG DXB Members Portal look: glass panels with morning, afternoon and night themes.
   Loaded after the page's own styles, so these rules restyle every screen. Only colours, type, surfaces and motion live here. */

@font-face{font-family:'Manrope'; src:url('fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight:200 800; font-display:swap;}
@font-face{font-family:'Inter'; src:url('fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap;}

:root,:root[data-theme="morning"]{
  color-scheme:light;
  --ground:#E4F0EC; --ink:#0F2E2C; --ink-soft:#3F5552; --heading:#0E4F4C;
  --glass:rgba(255,255,255,.70); --glass-strong:rgba(255,255,255,.90); --glass-edge:rgba(255,255,255,.85); --line:rgba(16,48,47,.15); --soft:rgba(16,48,47,.06);
  --field:rgba(255,255,255,.78); --track:#CDDBD6; --shadow-c:rgba(15,46,44,.14);
  --paid:#008672; --review:#B5780F; --pending:#90A5A0; --paid-ink:#006A5A; --review-ink:#855808;
  --paid-soft:rgba(0,134,114,.14); --review-soft:rgba(181,120,15,.16);
  --primary:#0E4F4C; --on-primary:#FFFFFF; --link:#0B6A63; --danger:#A63A33; --danger-soft:rgba(166,58,51,.11);
  --note-bg:rgba(181,120,15,.13); --note-line:rgba(181,120,15,.38); --note-ink:#6E4907;
  --orb-a:#79D2C2; --orb-b:#F1C98A; --orb-c:#A8D5E6; --tip-bg:#0F2E2C; --tip-ink:#FFFFFF; --side:rgba(11,59,57,.93); --on-side:#D8EAE6; --side-on:#FFFFFF; --side-on-ink:#0F2E2C;
}
:root[data-theme="afternoon"]{
  color-scheme:light;
  --ground:#E2ECF5; --ink:#102A3D; --ink-soft:#3C5365; --heading:#0F4A6B;
  --glass:rgba(255,255,255,.70); --glass-strong:rgba(255,255,255,.90); --glass-edge:rgba(255,255,255,.85); --line:rgba(16,42,61,.15); --soft:rgba(16,42,61,.06);
  --field:rgba(255,255,255,.78); --track:#CCD8E3; --shadow-c:rgba(16,42,61,.14);
  --paid:#0A7EA4; --review:#C2711A; --pending:#8FA3B4; --paid-ink:#086283; --review-ink:#8C4F0E;
  --paid-soft:rgba(10,126,164,.14); --review-soft:rgba(194,113,26,.16);
  --primary:#0F4A6B; --on-primary:#FFFFFF; --link:#0B5F85; --danger:#A63A33; --danger-soft:rgba(166,58,51,.11);
  --note-bg:rgba(194,113,26,.13); --note-line:rgba(194,113,26,.38); --note-ink:#74410A;
  --orb-a:#8CCBEE; --orb-b:#F3D08F; --orb-c:#8ADBCF; --tip-bg:#102A3D; --tip-ink:#FFFFFF; --side:rgba(15,74,107,.94); --on-side:#DCEBF5; --side-on:#FFFFFF; --side-on-ink:#102A3D;
}
:root[data-theme="night"]{
  color-scheme:dark;
  --ground:#0B1220; --ink:#EAF0F8; --ink-soft:#B4C2D6; --heading:#F2C46B;
  --glass:rgba(24,36,56,.68); --glass-strong:rgba(21,32,51,.94); --glass-edge:rgba(255,255,255,.14); --line:rgba(255,255,255,.14); --soft:rgba(255,255,255,.07);
  --field:rgba(10,16,28,.55); --track:#33435E; --shadow-c:rgba(0,0,0,.42);
  --paid:#3C9BD8; --review:#BC8019; --pending:#5F7290; --paid-ink:#7CC0EE; --review-ink:#EDBD6A;
  --paid-soft:rgba(60,155,216,.20); --review-soft:rgba(188,128,25,.24);
  --primary:#F2B544; --on-primary:#0B1220; --link:#7CC0EE; --danger:#F09A92; --danger-soft:rgba(240,154,146,.15);
  --note-bg:rgba(188,128,25,.20); --note-line:rgba(237,189,106,.42); --note-ink:#F4D49B;
  --orb-a:#1E6FA8; --orb-b:#8A5F14; --orb-c:#0E6B62; --tip-bg:#EAF0F8; --tip-ink:#0B1220; --side:rgba(8,13,24,.78); --on-side:#C8D4E6; --side-on:#F2B544; --side-on-ink:#0B1220;
}
@property --ground{syntax:'<color>'; inherits:true; initial-value:#E4F0EC}
@property --ink{syntax:'<color>'; inherits:true; initial-value:#0F2E2C}
@property --glass{syntax:'<color>'; inherits:true; initial-value:transparent}
@property --orb-a{syntax:'<color>'; inherits:true; initial-value:transparent}
@property --orb-b{syntax:'<color>'; inherits:true; initial-value:transparent}
@property --orb-c{syntax:'<color>'; inherits:true; initial-value:transparent}
html.theme-switching{transition:--ground .7s ease,--ink .7s ease,--glass .7s ease,--orb-a .7s ease,--orb-b .7s ease,--orb-c .7s ease;}

/* The page's existing names for colours now follow the theme */
:root,:root[data-theme]{
  --navy:var(--heading); --navy-light:var(--link); --green:var(--paid); --green-ink:var(--paid-ink); --amber:var(--review-ink); --blue:var(--track); --blue-ink:var(--link);
  --bg:var(--ground); --card:var(--glass); --border:var(--line); --text:var(--ink); --muted:var(--ink-soft); --red:var(--danger);
  --radius:16px; --shadow:0 10px 30px var(--shadow-c);
  --viz-pending:var(--track); --viz-submitted:var(--review); --viz-completed:var(--paid);
}

body{font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; background:var(--ground); color:var(--ink);}
h1,h2,.login-title,.kpi-value,.stat .num,.tally b,.totals-strip b,.mini-kpis b{font-family:'Manrope','Segoe UI',system-ui,sans-serif;}
.kpi-value,.stat .num,.totals-strip b,.mini-kpis b,.data-table td,.gval,.tally{font-variant-numeric:tabular-nums;}
h2{font-weight:600;}
h1,h2{text-wrap:balance;}
.ic{color:inherit;} h2 .ic{color:var(--paid-ink);}

/* Moving background */
.fx-bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--ground);}
.fx-orb{position:absolute; border-radius:50%; opacity:.8;}
.fx-a{width:46vmax; height:46vmax; left:-12vmax; top:-14vmax; background:radial-gradient(circle,var(--orb-a) 0%,transparent 68%); animation:fxDriftA 22s ease-in-out infinite alternate;}
.fx-b{width:38vmax; height:38vmax; right:-10vmax; top:26%; background:radial-gradient(circle,var(--orb-b) 0%,transparent 68%); animation:fxDriftB 28s ease-in-out infinite alternate;}
.fx-c{width:36vmax; height:36vmax; left:20%; bottom:-16vmax; background:radial-gradient(circle,var(--orb-c) 0%,transparent 68%); animation:fxDriftC 34s ease-in-out infinite alternate;}
@keyframes fxDriftA{to{transform:translate(9vmax,10vmax) scale(1.14);}}
@keyframes fxDriftB{to{transform:translate(-11vmax,-7vmax) scale(.88);}}
@keyframes fxDriftC{to{transform:translate(7vmax,-9vmax) scale(1.1);}}

/* Glass */
.card,.kpi,.stat,.login-card,.modal{border-color:var(--glass-edge);}
.card,.kpi,.stat,.login-card{background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:var(--shadow);}
.card .card,.card .kpi,.card .stat,.modal .card,.modal .kpi{-webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; background:var(--soft); border-color:var(--line);}
.card{transition:box-shadow .25s ease;}
.kpi,.stat{border-left:1px solid var(--glass-edge); transition:transform .22s ease,box-shadow .22s ease;}
.kpi.clickable:hover{transform:translateY(-3px); box-shadow:0 18px 40px var(--shadow-c);}
.kpi.k-pending,.kpi.k-submitted,.kpi.k-completed{border-left-color:var(--glass-edge);}
.kpi.active{box-shadow:0 0 0 2px var(--primary);}
.kpi-value{letter-spacing:0;}
.kpi-label{display:flex; align-items:center; gap:6px; font-size:14px;}
.kpi-ic{display:flex; color:var(--ink-soft);}
.k-completed .kpi-ic{color:var(--paid-ink);}
.k-submitted .kpi-ic{color:var(--review-ink);}

/* Theme box */
.theme-pick{display:inline-flex; margin:0; font-size:12px; font-weight:600; color:var(--ink);}
.theme-pick select{width:auto; min-height:40px; padding:6px 8px; border-radius:10px; font-size:14px !important; font-weight:600; cursor:pointer; background:var(--field); color:var(--ink); border:1px solid var(--line);}
.theme-pick option{color:#102A3D; background:#fff;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.topbar-mark,.side-mark{flex:none; width:32px; height:32px; stroke:var(--heading);}
.side-mark{stroke:var(--side-on);}

/* Buttons and fields */
button{transition:transform .14s ease,filter .14s ease,background-color .2s ease,opacity .15s ease;}
button:hover{filter:brightness(1.06);}
button:active{transform:scale(.97);}
:focus-visible{outline:2px solid var(--link); outline-offset:2px;}
.btn-primary,.pay-step{background:var(--primary); color:var(--on-primary);}
.btn-secondary,.modal-home,.seg-toggle{background:var(--soft); color:var(--ink); border:1px solid var(--line);}
.btn-secondary:hover{background:var(--soft);}
.btn-green,.pay-btn{background:var(--paid); color:#fff;}
:root[data-theme="night"] .btn-green,:root[data-theme="night"] .pay-btn{color:#06121F;}
.btn-danger-outline{background:transparent; color:var(--danger); border:1px solid var(--danger);}
.error{background:var(--danger-soft); color:var(--danger);}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=date],input[type=search],select,textarea,.sortbar select{background:var(--field); color:var(--ink); border-color:var(--line);}
input:focus,select:focus,textarea:focus{border-color:var(--link); box-shadow:0 0 0 4px var(--soft);}
.sortbar button{background:var(--field); color:var(--ink);}
.seg-toggle button{color:var(--ink-soft);}
.seg-toggle button.on{background:var(--primary); color:var(--on-primary); box-shadow:none;}
.member-row input[type=checkbox],.pay-ack input{accent-color:var(--paid);}

/* Chips */
.chip,.chip2{background:var(--soft); color:var(--ink); border-color:var(--line);}

/* Lists and tables */
.vlist-head{background:var(--glass-strong);}
.vlist-row:hover,.member-row:hover,.gbar:hover,.data-table tbody tr.click:hover td{background:var(--soft);}
.mini-kpis div,.totals-strip{background:var(--soft);}
.gtrack,.progress-bar{background:var(--track);}
.gtrack span.seg-pending,.gtrack .seg-pending{background:transparent;}
table.pm tr.grp td{background:var(--soft);}
.swt span{background:var(--track);}
.flag{background:var(--note-bg); color:var(--note-ink);}
.warn-note,.note-box{background:var(--note-bg); border:1px solid var(--note-line); color:var(--note-ink);}
.ok-box{background:var(--paid-soft); border:1px solid var(--paid); color:var(--ink);}

/* Status pills */
.badge{letter-spacing:.02em;}
.badge.Submitted{background:var(--review-soft); color:var(--review-ink);}
.badge.Completed{background:var(--paid-soft); color:var(--paid-ink);}
.badge.Failed{background:var(--danger-soft); color:var(--danger);}
.badge.SignedOut{background:var(--soft); color:var(--ink-soft);}
.stat.pending .num{color:var(--ink);}
.stat.submitted .num{color:var(--review-ink);}
.stat.completed .num{color:var(--paid-ink);}

/* WhatsApp reminders */
.wa-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; min-height:52px; padding:8px 0; border-top:1px solid var(--line); font-size:14px;}
.wa-actions{display:flex; flex-wrap:wrap; gap:8px;}
.wa-row .btn-green{min-height:44px; font-size:14px;}
.btn-wa{display:inline-flex; align-items:center; justify-content:center; gap:7px; max-width:100%; text-align:center; min-height:44px; padding:0 14px; border-radius:10px; background:#0B7A3E; color:#fff !important; font-size:14px; font-weight:600; text-decoration:none; transition:transform .14s ease,filter .14s ease;}
.btn-wa:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn-wa:active{transform:scale(.97);}
.btn-wa.wa-group{width:100%; margin:0 0 12px;}

/* Payment instructions are written by Admins on a white page, so they stay light in every theme. */
.pay-instr,.pay-disc,.pay-sample,.rte,.rte-tb,.pay-cap{color:#2B2A26;}
.pay-instr{background:#F8F7F0; border-color:#DDDAC4;}
.pay-disc{background:#FBF3F1;}
.pay-sample,.rte,.rte-tb,.rte-tb button{background:#fff;}
.pay-mini{color:var(--ink-soft);}

/* Sticky bars and pop-ups */
.action-bar{background:none;}
.action-bar .inner{background:var(--primary); color:var(--on-primary); box-shadow:0 12px 30px var(--shadow-c);}
.modal-backdrop{background:rgba(6,14,24,.45); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}
.modal{background:var(--glass-strong); color:var(--ink); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.viz-tip{background:var(--tip-bg); color:var(--tip-ink);}

/* Log in */
.login-shell{position:relative; background:none; gap:clamp(20px,5vw,72px); flex-wrap:wrap; align-content:center;}
.login-hero{display:flex; flex-direction:column; gap:14px; flex:0 1 460px; min-width:min(100%,320px);}
.login-mark{width:clamp(58px,8vw,92px); height:clamp(58px,8vw,92px); stroke:var(--heading);}
.login-title{margin:0; font-size:clamp(34px,5.2vw,64px); line-height:1.02; font-weight:600; color:var(--ink);}
.login-card{flex:0 1 400px; max-width:400px; border:1px solid var(--glass-edge); border-radius:22px;}
.login-note{margin:14px 0 0; font-size:14px; line-height:1.45; color:var(--ink-soft);}
.login-theme{position:absolute; top:14px; right:14px;}
.fx-mark-line{stroke-dasharray:1; stroke-dashoffset:0; animation:fxDraw 1.5s ease-out both;}
@keyframes fxDraw{from{stroke-dashoffset:1;}}
#loginBtn{position:relative; overflow:hidden;}
#loginBtn::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%); transform:translateX(-100%); animation:fxSheen 4s ease-in-out infinite; pointer-events:none;}
@keyframes fxSheen{55%,100%{transform:translateX(100%);}}

/* Entrances */
@keyframes fxRise{from{opacity:0; transform:translateY(16px) scale(.988);}}
@keyframes fxPop{from{opacity:0; transform:scale(.82);}}
@keyframes fxGrow{from{clip-path:inset(0 100% 0 0 round 5px);}to{clip-path:inset(0 0 0 0 round 5px);}}
@keyframes fxFade{from{opacity:0;}}
@keyframes fxPulse{to{transform:scale(3.2); opacity:0;}}
.login-hero,.login-card{animation:fxRise .7s cubic-bezier(.2,.8,.2,1) both;}
.login-card{animation-delay:.14s;}
.main:not(.hidden){animation:fxFade .45s ease both;}
.modal-backdrop:not(.hidden){animation:fxFade .2s ease both;}
.modal-backdrop:not(.hidden) .modal{animation:fxRise .34s cubic-bezier(.2,.8,.2,1) both;}
.fx-enter > .card,.fx-enter .kpi,.fx-enter .card{animation:fxRise .62s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--fx-i,0) * 55ms);}
.fx-enter .gtrack,.fx-enter .progress-bar{animation:fxGrow 1s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(180ms + var(--fx-i,0) * 45ms);}
.fx-enter .ring{animation:fxPop .7s cubic-bezier(.2,1.2,.4,1) both;}
.fx-pulse{position:relative; display:inline-block; width:9px; height:9px; margin-left:8px; border-radius:50%; background:var(--review); vertical-align:1px;}
.fx-pulse::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--review); animation:fxPulse 1.8s ease-out infinite;}

/* App frame: side menu on computers, bottom tabs on phones */
.side{position:fixed; inset:0 auto 0 0; width:216px; z-index:12; display:flex; flex-direction:column; gap:10px; padding:16px 12px; background:var(--side); color:var(--on-side); overflow-y:auto; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);}
.side-brand{display:flex; align-items:center; gap:10px; width:100%; padding:2px 8px 10px; background:none; color:var(--side-on); font-family:'Manrope','Segoe UI',sans-serif; font-size:22px; font-weight:600; text-align:left;}
.side-nav{display:flex; flex-direction:column; gap:4px; flex:1 1 auto;}
.nav-item{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 12px; border-radius:10px; background:none; color:var(--on-side); font-size:14px; font-weight:400; text-align:left;}
.side .nav-item:hover{background:rgba(255,255,255,.12); transform:translateX(3px);}
.side .nav-item.active,.side .nav-item.active:hover{background:var(--side-on); color:var(--side-on-ink); font-weight:600; transform:none;}
.side-foot{display:flex; flex-direction:column; gap:2px; padding-top:10px; border-top:1px solid rgba(255,255,255,.18);}
.side-who{padding:0 8px 8px; overflow-wrap:anywhere;}
.side-who .name{font-size:14px; font-weight:600; color:var(--side-on);}
.side-who .role{font-size:12px; color:var(--on-side);}
.side-link{display:flex; align-items:center; gap:8px; width:100%; min-height:38px; padding:0 8px; border-radius:8px; background:none; color:var(--on-side); font-size:14px; font-weight:400; text-align:left;}
.side-link:hover{background:rgba(255,255,255,.12);}
.main{margin-left:216px; min-width:0;}
.apphead{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 24px; background:var(--glass-strong); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
.apphead h1{margin:0; flex:1 1 auto; min-width:0; font-size:22px; color:var(--ink);}
.head-mark{display:none; flex:none; padding:0; background:none;}
.head-actions{display:flex; align-items:center; gap:8px; flex:none;}
.head-btn{min-height:40px; padding:0 14px; border-radius:10px; background:var(--field); color:var(--ink); border:1px solid var(--line); font-size:14px; font-weight:600;}
.wrap,.wrap#dashboardBody{max-width:1560px; margin:0; padding:20px 24px 28px;}
.bottomnav{display:none;}
.more-who{padding:0 0 10px;}
.more-list{display:flex; flex-direction:column; gap:2px;}
.more-row{display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:0 10px; border-radius:10px; background:none; color:var(--ink); font-size:14px; font-weight:400; text-align:left; border-top:1px solid var(--line);}
.more-row:hover{background:var(--soft);}

/* Overview */
.ev-pick{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px;}
.ev-pick label{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:14px; color:var(--ink-soft);}
.ev-pick select{flex:0 1 340px; width:auto; min-height:44px;}
.card h2{display:flex; align-items:center; gap:7px; font-size:16px; color:var(--ink);}
.card h2 .ic{margin:0;}
.ov-top{display:grid; grid-template-columns:minmax(330px,1.7fr) repeat(3,minmax(130px,1fr)); gap:14px; margin-bottom:14px; align-items:stretch;}
.ov-top > *{margin:0; min-width:0;}
.ov-hero{display:flex; align-items:center; gap:18px; margin-bottom:14px;}
.ov-top .ov-hero{margin:0;}
.ov-hero-text{display:flex; flex-direction:column; gap:6px; min-width:0;}
.ov-hero-text .muted{font-size:14px;}
.ov-money{font-family:'Manrope','Segoe UI',sans-serif; font-size:28px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums;}
.ring{position:relative; flex:none;}
.ring svg{display:block; width:100%; height:100%;}
.ring .seg-completed{stroke:var(--paid);}
.ring .seg-submitted{stroke:var(--review);}
.ring-mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05;}
.ring-mid b{font-family:'Manrope','Segoe UI',sans-serif; font-size:28px; font-variant-numeric:tabular-nums;}
.ring-mid span{font-size:12px; color:var(--ink-soft);}
.ov-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px;}
.ov-tiles .kpi{margin:0; padding:12px;}
.ov-charts{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:stretch; margin-bottom:14px;}
.ov-charts > .card{margin:0;}
.ov-stack{display:flex; flex-direction:column; gap:14px; min-width:0;}
.ov-stack .card{margin:0; flex:1 1 auto;}
.ov-pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:14px; align-items:start; margin-bottom:14px;}
.ov-pair .card{margin:0;}
.ov-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin-bottom:10px;}
.ov-head h2{margin:0;}
.ov-controls{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.ov-foot{margin:0;}
.gbars{margin-top:10px;}

/* Lists that open instantly */
.pick-pop{position:fixed; z-index:200; display:flex; flex-direction:column; max-height:340px; background:var(--glass-strong); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 44px var(--shadow-c); overflow:hidden;}
:root[data-theme="morning"] .pick-pop,:root[data-theme="afternoon"] .pick-pop{background:#fff;}
:root[data-theme="night"] .pick-pop{background:#18263A;}
.pick-search{flex:none; margin:8px; width:calc(100% - 16px) !important;}
.pick-list{overflow-y:auto; padding:4px; -webkit-overflow-scrolling:touch;}
.pick-opt{display:block; width:100%; min-height:40px; padding:9px 12px; border-radius:8px; background:none; color:var(--ink); font-size:14px; font-weight:400; text-align:left; white-space:normal;}
.pick-opt:hover,.pick-opt:focus-visible{background:var(--soft); outline:none; filter:none;}
.pick-opt.on{background:var(--primary); color:var(--on-primary); font-weight:600;}
.pick-opt:disabled{opacity:.5; cursor:default;}
.pick-none{padding:12px; font-size:14px; color:var(--ink-soft);}
.pick-sheet{left:0 !important; right:0; bottom:0; top:auto !important; width:auto !important; max-height:70vh; border-radius:18px 18px 0 0; border-width:1px 0 0;}
.pick-sheet .pick-opt{min-height:48px; font-size:14px;}

/* Review */
.rv-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:14px;}
.rv-head .seg-toggle button{min-height:40px;}
.rv-search,.toolbar input.rv-search{flex:1 1 220px; min-width:0; width:auto;}
.rv-list{display:flex; flex-direction:column; gap:10px;}
.rv-row{display:grid; grid-template-columns:minmax(200px,1.3fr) auto minmax(280px,auto); column-gap:20px; row-gap:8px; align-items:center; margin:0; padding:14px 16px;}
.rv-main{min-width:0;}
.rv-title{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:14px;}
.rv-nums{display:flex; gap:20px;}
.rv-nums div{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15;}
.rv-nums b{font-family:'Manrope','Segoe UI',sans-serif; font-size:22px; font-variant-numeric:tabular-nums;}
.rv-nums span{font-size:12px; color:var(--ink-soft);}
.rv-acts{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px;}
.rv-acts button,.rv-link{display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 12px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none;}
.rv-flagged{border-color:var(--review);}
.rv-flags{grid-column:1 / -1; display:flex; flex-direction:column; gap:6px; margin:0; padding:10px 12px; list-style:none; background:var(--note-bg); border:1px solid var(--note-line); border-radius:10px; color:var(--note-ink); font-size:14px; font-weight:400;}
.rv-flags li{display:flex; align-items:flex-start; gap:8px;}
.rv-flags svg{flex:none; margin-top:2px;}
.rv-mini-flag{display:inline-flex; align-items:center; gap:5px; margin-top:4px; color:var(--review-ink); font-size:12px; font-weight:600;}
.ev-report{min-height:44px;}
.rv-people{grid-column:1 / -1; font-size:14px;}
.rv-people summary{cursor:pointer; color:var(--link); font-weight:600; min-height:28px;}

@media (max-width:1180px){
  .ov-top{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ov-top .ov-hero{grid-column:1 / -1;}
  .ov-charts{grid-template-columns:minmax(0,1fr);}
  .rv-row{grid-template-columns:minmax(0,1fr) auto;}
  .rv-acts{grid-column:1 / -1; justify-content:flex-start;}
}
@media (max-width:859px){
  .side{display:none;}
  .main{margin-left:0;}
  .apphead{padding:8px 14px; min-height:56px;}
  .apphead h1{font-size:22px;}
  .head-mark{display:flex;}
  .head-btn{display:none;}
  .wrap,.wrap#dashboardBody{padding:14px 14px 92px;}
  .bottomnav{position:fixed; inset:auto 0 0 0; z-index:12; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); background:var(--glass-strong); border-top:1px solid var(--line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  .bottomnav .nav-item{flex-direction:column; justify-content:center; gap:3px; min-height:62px; padding:4px 2px; border-radius:0; color:var(--ink-soft); font-size:12px; text-align:center;}
  .bottomnav .nav-item.active{color:var(--ink); font-weight:600; box-shadow:inset 0 3px 0 var(--paid);}
  .action-bar{bottom:70px;}
  .ov-top{gap:10px;}
  .ov-top .kpi{padding:12px 10px;}
  .ov-top .kpi-sub,.ov-tiles .kpi-sub{display:none;}
  .kpi-label{font-size:12px; align-items:flex-start;}
  .kpi-value{font-size:22px;}
  .ev-pick select{flex:1 1 100%;}
  .rv-acts button,.rv-link{flex:1 1 auto;}
  .wa-row .btn-green,.wa-actions,.wa-actions .btn-wa{flex:1 1 100%; width:100%;}
  .btn-wa{text-align:center;}
}
/* Phones: the colours sit still, because moving them behind glass drains the battery */
@media (max-width:859px){
  .fx-orb{animation:none;}
  .card,.kpi,.stat,.login-card{-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
  .login-shell{align-items:stretch; justify-content:center; padding-top:64px;}
  .login-hero{flex:none; width:100%;}
  .login-card{flex:none; width:100%; max-width:none;}
}

/* Slower devices, browsers without blur, and people who ask for less */
html.fx-lite .fx-orb{animation:none;}
html.fx-lite .card,html.fx-lite .kpi,html.fx-lite .stat,html.fx-lite .login-card,html.fx-lite .apphead,html.fx-lite .side,html.fx-lite .bottomnav,html.fx-lite .modal,html.fx-lite .modal-backdrop{-webkit-backdrop-filter:none; backdrop-filter:none;}
html.fx-lite .card,html.fx-lite .kpi,html.fx-lite .stat,html.fx-lite .login-card{background:var(--glass-strong);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.kpi,.stat,.login-card{background:var(--glass-strong);}
}
@media (prefers-reduced-transparency:reduce){
  .card,.kpi,.stat,.login-card,.apphead,.side,.bottomnav,.modal{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-strong);}
  .fx-orb{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}

/* One set of text sizes for every screen: 12 small, 14 normal, 16 card titles, 22 page titles, 28 big numbers. */
html{-webkit-text-size-adjust:100%;}
body,button,input,select,textarea,table,.pick-opt{font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;}
body,.data-table,.data-table td,table.pm td,.member-row,.vlist-row,.gbar,.info,.tally,.chip2,.more-row,label,input,select,textarea,button,.btn-primary,.btn-secondary,.btn-green,.btn-danger-outline,.btn-small,.btn-wa,.tab-btn,.nav-item,.side-link,.legend button,.pay-instr,.pay-disc,.rte,.modal .btn-primary,.pay-btn,.rv-acts button,.rv-title,.wa-row,.ov-hero-text .muted,.ev-pick label,.warn-note,.note-box,.error{font-size:14px;}
body{line-height:1.5; font-weight:400; font-variant-numeric:tabular-nums;}
*{letter-spacing:normal;}
.muted,.kpi-sub,.kpi-label,.its,.role,.badge,.flag,.chip,.data-table th,.vlist-head,.vlist-head *,table.pm th,table.pm .d,.data-table .sub,.side-who .role,.ring-mid span,.rv-nums span,.gval,.gval b,.viz-note,.pay-mini,.pay-cap,.login-note,.rv-mini-flag,.rv-people,.modal-home,.sortbar,.sortbar select,.sortbar button,.bottomnav .nav-item,.c-group-m,.ov-foot,details.dd summary,.head-btn,.theme-pick select{font-size:12px;}
.head-btn,.theme-pick select{font-size:14px !important;}
.login-note,.muted,.its,.role{font-weight:400;}
.badge,.vlist-head,.vlist-head *,table.pm th,table.pm tr.grp td{text-transform:none;}
.data-table th,.vlist-head,.vlist-head *,table.pm th,.kpi-label,label,.btn-primary,.btn-secondary,.btn-green,.btn-danger-outline,.btn-wa,.rv-acts button,b,strong,.name,.gname,.badge,.c-its,.seg-toggle button{font-weight:600;}
h1,h2,h3,.side-brand{font-family:'Manrope','Inter','Segoe UI',sans-serif; font-weight:700;}
h2,h3,.card h2,.modal h2,.side-brand,.tally b,.totals-strip b{font-size:16px;}
.apphead h1,h1,.rv-nums b,.mini-kpis b,.ov-money,.ring-mid b{font-size:22px;}
.kpi-value,.stat .num{font-size:28px;}
.login-title{font-size:clamp(34px,5.2vw,64px);}
.kpi-value,.stat .num,.ov-money,.ring-mid b,.rv-nums b,.mini-kpis b,.tally b,.totals-strip b,.rv-stats b{font-family:'Manrope','Inter','Segoe UI',sans-serif; font-weight:700; line-height:1.15;}
.kpi-label,.kpi-sub{line-height:1.35;}
.kpi{padding:14px 16px;}
.kpi-sub{margin-top:4px; color:var(--ink-soft);}
.kpi-value{margin-top:4px;}
.mini-kpis div{font-size:12px; color:var(--ink-soft);}
.mini-kpis b{margin-bottom:2px; color:var(--ink);}
.totals-strip{font-size:12px;}
.rv-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:12px;}
.rv-stats > div{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px; background:var(--glass); border:1px solid var(--glass-edge);}
.rv-stats span{font-size:12px; color:var(--ink-soft);}
.rv-stats b{font-size:16px;}

/* Widgets */
.ov-widgets{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px; margin-bottom:14px;}
.widget{display:flex; flex-direction:column; margin:0; padding:16px; min-width:0;}
.widget h2{margin:0 0 6px;}
.spark{display:block; width:100%; height:44px; margin-top:auto; padding-top:10px; box-sizing:content-box;}
.widget-bar{display:flex; gap:2px; height:10px; margin-top:auto; border-radius:4px; overflow:hidden; background:var(--track);}
.widget .kpi-sub + .widget-bar{margin-top:12px;}
.widget-bar span{display:block; height:100%;}
.widget-foot{margin-top:8px; padding-top:8px; border-top:1px solid var(--line);}
.heat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(18px,1fr)); gap:3px; margin-top:12px;}
.heat{aspect-ratio:1; min-width:0; padding:0; border-radius:4px; background:var(--paid);}
.heat:hover{filter:none; outline:2px solid var(--ink); outline-offset:1px;}
@media (max-width:859px){
  input,select,textarea,.theme-pick select{font-size:16px !important;}
  .heat-grid{grid-template-columns:repeat(auto-fill,minmax(26px,1fr));}
}
h1,h2,.badge,.login-title{letter-spacing:normal;}
.login-title{font-weight:700;}
.vlist-head .c-mobile,.vlist-head .c-email,.vlist-head .c-dob,.vl-master.vlist-head .c-mobile,.vl-master.vlist-head .c-email,.vl-master.vlist-head .c-dob{font-size:12px;}
.dash-side .mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}