/* HOTSPOT LIVE SYSTEM — authenticated modules only. */
/* Uniform base: keep the dark canvas + grid visible on every tab, even if an app sets its own body background. */
html{background:#060911}
body:not(.hotspot-login){background-color:#060911!important}
body:not(.hotspot-login){
  --hs-electric:#63a2ff;--hs-electric-2:#96bcff;--hs-live:#00C805;
  --hs-alert:#ED1B2D;--hs-warning:#ffc763;--hs-bg:#060911;
  --hs-surface:rgba(14,21,33,.88);--hs-raised:rgba(19,29,45,.94);
  --hs-border:rgba(111,153,226,.22);--hs-border-hot:rgba(100,153,255,.72);
  --hs-text:#f2f6ff;--hs-muted:#adb9cd;
  --hs-shadow:0 20px 55px -28px rgba(0,0,0,.92);
  --hs-bloom:0 0 0 1px rgba(99,162,255,.22),0 0 30px -8px rgba(99,162,255,.5),0 22px 55px -28px rgba(15,82,225,.8);
  /* Normalize the different variable dialects used by the standalone modules. */
  --bg:#060911;--bg2:#0b101a;--surface:#0e1521;--surface-2:#131d2d;
  --card:#0e1521;--panel:#0e1521;--line:#263650;--border:#263650;
  --ink:#f2f6ff;--ink-2:#d7e0ef;--ink-3:#aebbd0;--text:#f2f6ff;--txt:#f2f6ff;
  --muted:#adb9cd;--muted2:#738096;--blue:#63a2ff;--brand:#63a2ff;--accent:#63a2ff;
  color-scheme:dark;background:radial-gradient(circle at 76% -8%,rgba(52,111,239,.20),transparent 35%),radial-gradient(circle at 8% 80%,rgba(0,200,5,.08),transparent 29%),#060911;color:var(--hs-text);min-height:100%;position:relative;
}
body:not(.hotspot-login)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.66;background-image:linear-gradient(rgba(96,146,224,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(96,146,224,.045) 1px,transparent 1px),radial-gradient(circle at 75% 15%,rgba(96,150,255,.14),transparent 27%);background-size:30px 30px,30px 30px,auto;animation:hs-grid-drift 22s linear infinite}
body:not(.hotspot-login) :is(.app,main,.content,.page,.wrap){background:transparent!important}

/* Shell and navigation */
body:not(.hotspot-login) :is(.topbar,header,.header,.app-header){background:rgba(7,10,16,.88);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);border-bottom-color:rgba(113,150,209,.18);box-shadow:0 14px 45px -28px rgba(37,103,239,.9)}
body:not(.hotspot-login) :is(.tabs,.subtabs,nav){background:rgba(12,18,29,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(95,129,183,.20)}
body:not(.hotspot-login) :is(.tab,.subtab,nav button,nav a){transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .15s ease,box-shadow .22s ease,text-shadow .22s ease}
body:not(.hotspot-login) :is(.tab,.subtab,nav button,nav a):hover{color:#fff;transform:translateY(-1px);text-shadow:0 0 15px rgba(140,186,255,.72);box-shadow:0 0 24px -6px rgba(99,162,255,.60)}
body:not(.hotspot-login) :is(.tab.active,.subtab.active,nav button.active,nav button.on,nav a.active){color:#dce9ff;border-color:var(--hs-electric);text-shadow:0 0 18px rgba(122,172,255,.9);box-shadow:0 0 0 1px rgba(99,162,255,.35),0 0 25px -4px rgba(99,162,255,.72),inset 0 -16px 30px -22px rgba(99,162,255,.8)}

/* Universal operating surfaces */
body:not(.hotspot-login) :is(.card,.kpi,.store-card,.panel,.box,.tile,.block,.stat,.metric,.widget,.cell,.wk-hero,.tankrow,.c2){border-color:var(--hs-border);background-color:var(--hs-surface);background-image:linear-gradient(125deg,rgba(255,255,255,.025),transparent 32%),repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.009) 0 1px,transparent 1px 4px);box-shadow:var(--hs-shadow),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);position:relative;isolation:isolate;transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease,box-shadow .28s ease,filter .24s ease;animation:hs-rise .52s cubic-bezier(.2,.85,.2,1) both}
body:not(.hotspot-login) :is(.card,.kpi,.store-card,.box,.tile,.stat,.metric,.widget,.cell){overflow:hidden}
/* modals/overlays must scroll, never clip — overrides the card overflow:hidden so a tall dialog can't hide its Save button on any tab */
body:not(.hotspot-login) :is(.modal,.backdrop,dialog){overflow:auto!important;-webkit-overflow-scrolling:touch}
body:not(.hotspot-login) .modal :is(.box,.card,.sheet,.modal-body){overflow:auto!important}
body:not(.hotspot-login) :is(.card,.kpi,.store-card,.box,.tile,.stat,.metric,.widget,.cell)::before{content:"";position:absolute;inset:-80% -45%;z-index:-1;pointer-events:none;background:linear-gradient(108deg,transparent 43%,rgba(116,164,255,.14) 50%,transparent 57%);transform:translateX(-68%);transition:transform 1s ease}
body:not(.hotspot-login) :is(.card,.kpi,.store-card,.box,.tile,.stat,.metric,.widget,.cell):hover::before{transform:translateX(68%)}
body:not(.hotspot-login) :is(.card,.kpi,.store-card,.box,.tile,.stat,.metric,.widget,.cell):hover{transform:translateY(-4px) scale(1.008);border-color:var(--hs-border-hot);box-shadow:var(--hs-bloom);filter:brightness(1.07)}
body:not(.hotspot-login) .panel:hover{border-color:rgba(100,153,255,.42);box-shadow:0 0 0 1px rgba(99,162,255,.16),0 0 34px -12px rgba(99,162,255,.38),var(--hs-shadow)}

/* Numbers and meaning */
body:not(.hotspot-login) :is(.huge,.big,.value,.val,.num,.money,.kpi .value,.kpi .val,.store-card .y,td.n,th.n){font-variant-numeric:tabular-nums;letter-spacing:-.025em}
body:not(.hotspot-login) :is(.huge,.big,.kpi .value,.kpi .val,.store-card .y){text-shadow:0 0 24px rgba(82,139,255,.32);animation:hs-number-enter .72s cubic-bezier(.16,.8,.2,1) both}
body:not(.hotspot-login) :is(.pos,.money.pos,.green,.up-val,.text-good){color:#00C805;text-shadow:0 0 16px rgba(0,200,5,.65)}
body:not(.hotspot-login) :is(.neg,.money.neg,.red,.down-val,.text-bad){color:#ED1B2D;text-shadow:0 0 16px rgba(237,27,45,.58)}
body:not(.hotspot-login) :is(.warn,.text-warn){text-shadow:0 0 15px rgba(255,181,69,.55)}
body:not(.hotspot-login) :is(.kpi.ok,.card.ok,.store-card.ok){box-shadow:0 0 30px -8px rgba(0,200,5,.38),var(--hs-shadow),inset 0 1px rgba(255,255,255,.05)}
body:not(.hotspot-login) :is(.kpi.warn,.card.warn,.store-card.warn){box-shadow:0 0 30px -8px rgba(255,181,69,.36),var(--hs-shadow),inset 0 1px rgba(255,255,255,.05)}
body:not(.hotspot-login) :is(.kpi.bad,.kpi.crit,.card.bad,.store-card.bad){box-shadow:0 0 32px -7px rgba(237,27,45,.44),var(--hs-shadow),inset 0 1px rgba(255,255,255,.05)}

/* Buttons */
body:not(.hotspot-login) :is(button,.btn,.btn-sm,.button,.action,.iconbtn,.fab,input[type="button"],input[type="submit"]){transition:transform .14s ease,box-shadow .22s ease,border-color .18s ease,color .18s ease,background-color .18s ease,filter .18s ease}
body:not(.hotspot-login) :is(button,.btn,.btn-sm,.button,.action,.iconbtn,.fab):not(.tab):not(.subtab){position:relative;overflow:hidden}
body:not(.hotspot-login) :is(button,.btn,.btn-sm,.button,.action,.iconbtn,.fab):not(.tab):not(.subtab)::after{content:"";position:absolute;inset:0 auto 0 -125%;width:65%;pointer-events:none;background:linear-gradient(103deg,transparent,rgba(255,255,255,.27),transparent);transform:skewX(-18deg);transition:left .58s ease}
body:not(.hotspot-login) :is(button,.btn,.btn-sm,.button,.action,.iconbtn,.fab):not(.tab):not(.subtab):hover::after{left:145%}
body:not(.hotspot-login) :is(.btn,.btn-sm,.button,.action,button):not(.btn-danger):not(.danger):not(.tab):not(.subtab):hover{transform:translateY(-2px);border-color:rgba(112,162,255,.9);box-shadow:0 0 0 1px rgba(99,162,255,.45),0 0 26px rgba(99,162,255,.40),0 16px 32px -13px rgba(48,107,232,.85);filter:brightness(1.12)}
body:not(.hotspot-login) :is(.btn-danger,.danger):hover{box-shadow:0 0 0 1px rgba(237,27,45,.7),0 0 28px rgba(237,27,45,.42),0 16px 30px -13px rgba(237,27,45,.8)}
body:not(.hotspot-login) :is(button,.btn,.btn-sm,.button,.action,.iconbtn,.fab):active{transform:translateY(1px) scale(.975)}
body:not(.hotspot-login) :is(.btn.pri,.btn-primary,.btn.primary,.btn-ok,input[type="submit"]){box-shadow:0 0 0 1px rgba(128,174,255,.42),0 0 24px -4px rgba(99,162,255,.62),0 13px 30px -15px rgba(99,162,255,.9),inset 0 1px rgba(255,255,255,.24)}

/* Forms */
body:not(.hotspot-login) :is(input,select,textarea,.input){border-color:rgba(107,141,194,.30);background-color:rgba(8,13,22,.72);box-shadow:inset 0 1px 3px rgba(0,0,0,.42);transition:border-color .18s ease,box-shadow .22s ease,background-color .18s ease,transform .15s ease}
body:not(.hotspot-login) :is(input,select,textarea,.input):hover:not(:focus){border-color:rgba(98,150,248,.62);box-shadow:0 0 0 3px rgba(99,162,255,.09),inset 0 1px 3px rgba(0,0,0,.4)}
body:not(.hotspot-login) :is(input,select,textarea,.input):focus{outline:none;border-color:var(--hs-electric);background-color:rgba(10,17,29,.9);box-shadow:0 0 0 3px rgba(99,162,255,.18),0 0 26px -5px rgba(99,162,255,.55),inset 0 1px 3px rgba(0,0,0,.4)}

/* Live statuses */
body:not(.hotspot-login) :is(.tag,.badge,.pill,.chip,.status,.spill){font-weight:700;transition:filter .2s ease,box-shadow .2s ease,transform .2s ease}
body:not(.hotspot-login) :is(.tag.ok,.tag.good,.badge.good,.pill.good,.status.ok,.status.good,.spill.up){box-shadow:0 0 20px -3px rgba(0,200,5,.68)}
body:not(.hotspot-login) :is(.tag.warn,.tag.soon,.badge.warn,.pill.warn,.status.warn,.spill.attn){box-shadow:0 0 20px -3px rgba(255,181,69,.70)}
body:not(.hotspot-login) :is(.tag.bad,.tag.crit,.tag.now,.tag.miss,.badge.bad,.badge.danger,.pill.bad,.status.bad,.status.danger){box-shadow:0 0 24px -2px rgba(237,27,45,.80);animation:hs-critical-pulse 1.55s ease-in-out infinite}
body:not(.hotspot-login) :is(.dot.g,.dot.good,.dot.ok){background:#00C805;box-shadow:0 0 11px rgba(0,200,5,.95);animation:hs-live-dot 1.25s ease-in-out infinite}
body:not(.hotspot-login) :is(.dot.y,.dot.warn){background:#ffc763;box-shadow:0 0 11px rgba(255,181,69,.9);animation:hs-live-dot 1.55s ease-in-out infinite}
body:not(.hotspot-login) :is(.dot.r,.dot.bad,.dot.danger){background:#ED1B2D;box-shadow:0 0 12px rgba(237,27,45,.98);animation:hs-live-dot .95s ease-in-out infinite}

/* Dense data, alerts, progress */
body:not(.hotspot-login) table{font-variant-numeric:tabular-nums}
body:not(.hotspot-login) thead{background:rgba(19,30,48,.76)}
body:not(.hotspot-login) th{color:#aebbd0;border-color:rgba(101,139,200,.20);background:rgba(21,31,48,.86)}
body:not(.hotspot-login) td{border-color:rgba(91,122,174,.16)}
body:not(.hotspot-login) tbody tr{transition:background-color .18s ease,box-shadow .22s ease,transform .16s ease}
body:not(.hotspot-login) tbody tr:hover{background:rgba(34,66,115,.42);box-shadow:inset 3px 0 0 var(--hs-electric),0 0 28px -10px rgba(99,162,255,.58);transform:translateX(2px)}
body:not(.hotspot-login) :is(.alert-row,.alert,.notice,.notification){transition:transform .18s ease,border-color .2s ease,box-shadow .24s ease}
body:not(.hotspot-login) :is(.alert-row,.alert,.notice,.notification):hover{transform:translateX(3px);border-color:rgba(95,149,255,.56);box-shadow:0 0 28px -10px rgba(99,162,255,.48)}
body:not(.hotspot-login) :is(.alert-row.crit,.alert-row.bad,.alert.danger,.notification.danger){animation:hs-alert-wash 2.2s ease-in-out infinite}
body:not(.hotspot-login) :is(.progress-bar,.bar,.fill,.meter>i){transform-origin:left;animation:hs-progress-arrive .9s cubic-bezier(.16,.86,.2,1) both;filter:drop-shadow(0 0 6px rgba(99,162,255,.55))}
body:not(.hotspot-login) canvas{filter:drop-shadow(0 0 8px rgba(60,123,255,.16))}

/* Entrance staggering */
body:not(.hotspot-login) :is(.grid,.kpi-grid,.cards,.store-grid)>:nth-child(2){animation-delay:.055s}
body:not(.hotspot-login) :is(.grid,.kpi-grid,.cards,.store-grid)>:nth-child(3){animation-delay:.11s}
body:not(.hotspot-login) :is(.grid,.kpi-grid,.cards,.store-grid)>:nth-child(4){animation-delay:.165s}
body:not(.hotspot-login) :is(.grid,.kpi-grid,.cards,.store-grid)>:nth-child(5){animation-delay:.22s}
body:not(.hotspot-login) :is(.grid,.kpi-grid,.cards,.store-grid)>:nth-child(6){animation-delay:.275s}

@keyframes hs-grid-drift{to{background-position:30px 30px,30px 30px,0 0}}
@keyframes hs-rise{from{opacity:0;transform:translateY(17px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes hs-number-enter{from{opacity:0;transform:translateY(8px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes hs-surface-scan{0%,56%{transform:translateX(-68%)}82%,100%{transform:translateX(68%)}}
@keyframes hs-status-breathe{0%,100%{filter:brightness(.96)}50%{filter:brightness(1.18)}}
@keyframes hs-critical-pulse{0%,100%{filter:brightness(.95);box-shadow:0 0 14px -4px rgba(237,27,45,.55)}50%{filter:brightness(1.24);box-shadow:0 0 28px 0 rgba(237,27,45,.88)}}
@keyframes hs-live-dot{0%,100%{opacity:.58;transform:scale(.82)}50%{opacity:1;transform:scale(1.28)}}
@keyframes hs-alert-wash{0%,100%{box-shadow:0 0 18px -10px rgba(237,27,45,.35)}50%{box-shadow:0 0 34px -7px rgba(237,27,45,.62)}}
@keyframes hs-progress-arrive{from{transform:scaleX(0);filter:brightness(1.8) drop-shadow(0 0 12px rgba(99,162,255,.9))}to{transform:scaleX(1)}}

@media(max-width:760px){body:not(.hotspot-login)::before{opacity:.42;background-size:24px 24px,24px 24px,auto}body:not(.hotspot-login) :is(.card,.kpi,.store-card,.box,.tile,.stat,.metric,.widget,.cell):hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){body:not(.hotspot-login),body:not(.hotspot-login)::before,body:not(.hotspot-login) *,body:not(.hotspot-login) *::before,body:not(.hotspot-login) *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* ── iPhone / small-screen accessibility (site-wide) ── */
body:not(.hotspot-login) .modal .box{overflow:auto!important;max-height:92vh}
body:not(.hotspot-login) :is(img,pre,code){max-width:100%}
@media(max-width:640px){
  body:not(.hotspot-login) table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;white-space:nowrap}
  body:not(.hotspot-login) :is(input,select,textarea){font-size:16px}
}

/* ── Native-iOS feel (unified across every module) ──────────────────────────
   Render in San Francisco on Apple devices, remove the Android tap-flash,
   momentum-scroll, honor the iPhone safe areas, and use spring easing. */
body:not(.hotspot-login),
body:not(.hotspot-login) :is(h1,h2,h3,h4,p,span,div,a,button,input,select,textarea,label,td,th,li){
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
body:not(.hotspot-login){overscroll-behavior-y:contain;text-rendering:optimizeLegibility}
body:not(.hotspot-login) :is(.tablewrap,.board,.tasklist,.wgrid,.cal,.wrap,.content,.modal,.box,.hai-msgs){-webkit-overflow-scrolling:touch}
body:not(.hotspot-login) :is(button,.btn,.tab,.subtab,.taskrow,.bcard,.wcard,.kpi,.card,.pill,.chip,.nav button){transition-timing-function:cubic-bezier(.2,.8,.2,1)}
/* iOS never leaves a focus outline box — keep only the soft ring we set elsewhere */
body:not(.hotspot-login) :focus{outline:none}
/* tap targets stay finger-friendly */
body:not(.hotspot-login) :is(button,.btn,.tab,.subtab,.nav button){min-height:38px}
/* respect the iPhone home-indicator / notch */
@supports(padding:max(0px)){
  body:not(.hotspot-login) :is(.wrap,.content){padding-bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px))}
  body:not(.hotspot-login) .topbar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}