/* =====================================================================
   Valid8 Connect — shared design layer
   ---------------------------------------------------------------------
   The brand language is lifted from the Valid8 Global marketing site
   (valid8-website/assets/site.css): same navy, same cyan, same self-hosted
   Space Grotesk / Inter / Montserrat, same card and button vocabulary.

   What is deliberately NOT lifted is the marketing site's spacing. Connect
   is an operations tool — managers scan rosters, timelines and coverage —
   so the type scale and padding here stay compact and data-first. Adding
   `class="kiosk"` to <body> scales the touch targets up for the wall panel
   and the phone without changing any of the colours or components.

   Every page links this file. Page <style> blocks should hold layout that
   is genuinely unique to that screen, nothing else.
   ===================================================================== */

/* ---------- self-hosted webfonts (no third-party requests) ----------
   The kiosk lives on bad site signal; a blocking Google Fonts request is
   the last thing a wall panel needs. Same files the marketing site ships. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/montserrat-latin-variable.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}

/* ---------- tokens ----------
   Names are the ones the Connect pages already use, so restyling is a
   token swap rather than a markup rewrite. Values come from the site. */
:root{
  /* ground + surfaces */
  --bg-page:#0B1F3A;
  --bg-page-2:#102842;
  --bg-surface:#16314E;
  --bg-raised:#1B3856;
  --bg-sunken:#102842;

  /* hairlines — translucent, like the site, so they sit on any surface */
  --border-hairline:rgba(255,255,255,.085);
  --border-strong:rgba(255,255,255,.16);

  /* type */
  --ink-primary:#EAF0F8;
  --ink-secondary:#A7B4C6;
  --ink-muted:#7A8799;

  /* brand */
  --accent:#00B4D8;
  --accent-2:#0090AE;
  --accent-bright:#22C9EA;
  --accent-ink:#0B1F3A;
  --accent-glow:rgba(0,180,216,.18);
  --accent-wash:rgba(0,180,216,.09);

  /* states */
  --status-good:#3DDC84;
  --status-warn:#F5B544;
  --status-serious:#EC835A;
  --status-critical:#FF5C5C;

  /* spacing — unchanged; Connect stays dense */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* shape */
  --radius-card:14px;
  --radius-input:10px;
  --radius-pill:999px;

  --shadow-panel:0 2px 14px rgba(0,0,0,.28);
  --shadow-modal:0 18px 50px rgba(0,0,0,.55);
  --shadow-cyan:0 6px 26px -8px var(--accent);

  /* motion */
  --t-fast:120ms; --t-med:200ms; --ease:cubic-bezier(.2,.7,.3,1);

  /* fonts */
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-brand:'Montserrat',ui-sans-serif,system-ui,sans-serif;

  /* dense-UI type scale */
  --fs-page-title:22px;
  --fs-section:15px;
  --fs-body:14px;
  --fs-data:13.5px;
  --fs-meta:12.5px;
  --fs-micro:11.5px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--ink-primary);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-bright)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.018em;line-height:1.15;margin:0}
h1{font-size:var(--fs-page-title)}
h2{font-size:17px}
h3{font-size:15px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--accent-ink)}
.tnum{font-variant-numeric:tabular-nums}
.mono-ish{font-family:var(--font-display);font-variant-numeric:tabular-nums}

/* the site's eyebrow, shrunk for an ops UI */
.eyebrow{
  font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:9px;margin:0 0 var(--sp-3);
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--accent);opacity:.7;flex:none}
.page-sub{color:var(--ink-secondary);font-size:var(--fs-data);margin:6px 0 var(--sp-5);max-width:80ch}
.muted{color:var(--ink-muted)}
.cy{color:var(--accent)}

/* ---------- app chrome ---------- */
.topbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);
  background:rgba(11,31,58,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-hairline);
}
.topbar-brand{display:flex;align-items:center;gap:var(--sp-3)}
.topbar-brand img{height:26px}
.topbar-product{
  font-family:var(--font-display);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border-left:1px solid var(--border-hairline);padding-left:var(--sp-3);
}
.topbar-product .preview-tag{
  color:var(--ink-muted);font-size:10px;letter-spacing:.14em;margin-left:7px;
  font-weight:500;text-transform:uppercase;
}
.topbar-user{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-data);color:var(--ink-secondary)}
main{max-width:1160px;margin:0 auto;padding:var(--sp-6) var(--sp-5)}

/* ---------- surfaces ----------
   The site's cards are a soft top-lit gradient with a cyan hairline across
   the top. Kept, but at ops-tool padding. */
.card,.panel{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--bg-surface),var(--bg-page-2));
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-panel);
}
.card{padding:var(--sp-4) var(--sp-5)}
.card--accent::before,.panel--accent::before{
  content:"";position:absolute;top:0;left:var(--sp-5);right:var(--sp-5);height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:.85;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--border-hairline);
}
.card-title{font-family:var(--font-display);font-size:var(--fs-section);font-weight:600}
.card-note{font-size:var(--fs-meta);color:var(--ink-muted)}
.section-label{
  font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted);
}

/* ---------- buttons ----------
   Pill geometry and the cyan glow from the site; ops-tool sizing. */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-size:var(--fs-data);font-weight:600;letter-spacing:.005em;
  padding:8px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);background:transparent;color:var(--ink-primary);
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
button:not(:disabled):hover,.btn:not(:disabled):hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
button:disabled,.btn:disabled{opacity:.5;cursor:default;transform:none}
button.primary,.btn.primary,.btn--primary{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-cyan);
}
button.primary:not(:disabled):hover,.btn.primary:not(:disabled):hover{
  background:var(--accent-bright);border-color:var(--accent-bright);color:var(--accent-ink);
  box-shadow:0 10px 32px -8px var(--accent);
}
button.quiet,.btn.quiet{border-color:transparent;color:var(--ink-secondary)}
button.quiet:not(:disabled):hover{background:rgba(255,255,255,.05);color:var(--ink-primary);border-color:transparent}
button.danger,.btn.danger{border-color:rgba(255,92,92,.4);color:var(--status-critical)}
button.danger:not(:disabled):hover{background:rgba(255,92,92,.1);border-color:var(--status-critical);color:var(--status-critical)}
.btn-sm,button.btn-sm{padding:5px 12px;font-size:var(--fs-meta)}
.btn-block{width:100%}
.btn-spinner{
  display:inline-block;width:12px;height:12px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:7px;
  animation:btnspin .7s linear infinite;
}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* ---------- forms ---------- */
label{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
input,textarea{width:100%}
/* selects size to their content — a full-width dropdown in a toolbar row
   pushes the rest of the controls onto a second line */
select{width:auto;max-width:100%}
input,select,textarea{
  background:var(--bg-sunken);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-input);
  padding:9px 12px;
  color:var(--ink-primary);
  font-family:var(--font-body);font-size:var(--fs-data);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--ink-muted)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,180,216,.13);
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.field{display:grid;gap:6px}
.field select{width:100%}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}

/* ---------- pills / status ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--radius-pill);
  border:1px solid var(--border-hairline);color:var(--ink-secondary);
  background:rgba(255,255,255,.035);white-space:nowrap;
}
.pill.good,.pill.active{color:var(--status-good);border-color:rgba(61,220,132,.35);background:rgba(61,220,132,.08)}
.pill.warn{color:var(--status-warn);border-color:rgba(245,181,68,.35);background:rgba(245,181,68,.08)}
.pill.serious{color:var(--status-serious);border-color:rgba(236,131,90,.35);background:rgba(236,131,90,.08)}
.pill.critical{color:var(--status-critical);border-color:rgba(255,92,92,.35);background:rgba(255,92,92,.08)}
.pill.accent{color:var(--accent);border-color:rgba(0,180,216,.4);background:var(--accent-wash)}
.pill.inactive{color:var(--ink-muted)}
.pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- data rows ---------- */
.rows{border:1px solid var(--border-hairline);border-radius:var(--radius-card);overflow:hidden;background:var(--bg-page-2)}
.row{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-4);border-top:1px solid var(--border-hairline)}
.row:first-child{border-top:0}
.row:hover{background:rgba(255,255,255,.022)}
.row.dim{opacity:.55}
.row-key{font-family:var(--font-display);font-weight:600;font-size:var(--fs-data);flex:none}
.row-main{flex:1;min-width:0}
.row-sub{color:var(--ink-muted);font-size:var(--fs-meta)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-data)}
th{
  font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);
  text-align:left;padding:9px var(--sp-3);border-bottom:1px solid var(--border-hairline);white-space:nowrap;
}
td{padding:9px var(--sp-3);border-bottom:1px solid var(--border-hairline);color:var(--ink-secondary)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.022)}
.empty-state{color:var(--ink-muted);font-size:var(--fs-data);padding:var(--sp-4) 2px}

/* ---------- toasts ---------- */
#toast-stack{position:fixed;top:16px;right:16px;z-index:4000;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--bg-raised);border:1px solid var(--border-hairline);
  border-left:3px solid var(--status-good);border-radius:var(--radius-input);
  box-shadow:var(--shadow-modal);color:var(--ink-primary);
  font-size:var(--fs-data);line-height:1.45;padding:10px 34px 10px 14px;max-width:360px;
  position:relative;opacity:0;transform:translateY(-6px);
  transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease);
}
.toast.error{border-left-color:var(--status-critical)}
.toast.show{opacity:1;transform:none}
.toast .toast-close{
  position:absolute;top:4px;right:5px;background:none;border:0;color:var(--ink-secondary);
  font-size:14px;font-weight:700;padding:2px 6px;margin:0;border-radius:var(--radius-pill);
}
.toast .toast-close:hover{color:var(--ink-primary);border-color:transparent;transform:none}

/* ---------- auth / narrow pages ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
.auth-card{
  width:100%;max-width:400px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(0,180,216,.10),transparent 62%),
             linear-gradient(168deg,var(--bg-surface),var(--bg-page-2));
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  box-shadow:var(--shadow-modal);padding:var(--sp-6) var(--sp-5);
}
.auth-brand{display:flex;justify-content:center;margin-bottom:var(--sp-4)}
.auth-brand img{height:34px}
.mini-error{color:var(--status-critical);font-size:var(--fs-meta);min-height:1em}
.mini-note{color:var(--ink-muted);font-size:var(--fs-meta)}

/* =====================================================================
   Kiosk / phone scale — body class="kiosk"
   Same brand, sized for a wall panel in a noisy hall: bigger hit areas,
   bigger type, stronger contrast. Colours and components are untouched.
   ===================================================================== */
body.kiosk{font-size:17px;line-height:1.5}
body.kiosk h1{font-size:27px}
body.kiosk .card{padding:var(--sp-5)}
body.kiosk button,body.kiosk .btn{font-size:17px;padding:16px 24px;border-radius:var(--radius-input);min-height:56px}
body.kiosk .btn-sm{font-size:14px;padding:9px 16px;min-height:0}
body.kiosk input,body.kiosk select{font-size:18px;padding:14px 16px;min-height:54px}
body.kiosk label{font-size:12.5px}
body.kiosk .row{padding:var(--sp-4);min-height:64px}
body.kiosk .row-key{font-size:19px}
body.kiosk .row-sub{font-size:14px}
body.kiosk .mini-note{font-size:14px}
body.kiosk .mini-error{font-size:15px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  main{padding:var(--sp-5) var(--sp-4)}
  .field-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar{padding:var(--sp-3) var(--sp-4)}
  .topbar-product .preview-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  button:hover,.btn:hover{transform:none}
}

/* =====================================================================
   Component aliases for the markup Connect already ships
   ---------------------------------------------------------------------
   These map the class names already in the pages onto the components
   above, so the reskin is a stylesheet swap rather than a markup rewrite.
   Nothing here changes structure or behaviour.
   ===================================================================== */

/* the sign-in card every management screen shares */
.login-card{
  width:100%;max-width:400px;margin:10vh auto 0;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(0,180,216,.10),transparent 62%),
             linear-gradient(168deg,var(--bg-surface),var(--bg-page-2));
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  box-shadow:var(--shadow-modal);padding:var(--sp-6) var(--sp-5);
}
.login-card h1{text-align:center;font-size:19px}
.login-card .brand{display:flex;justify-content:center;margin-bottom:var(--sp-4)}
.login-card .brand img{height:32px}
.login-card .field{margin-bottom:var(--sp-3)}
.login-card button.primary,.login-card .primary{width:100%;margin-top:var(--sp-2)}
.gate{
  max-width:440px;margin:12vh auto 0;text-align:center;
  color:var(--ink-secondary);font-size:var(--fs-body);line-height:1.65;
}
.gate button{margin-top:var(--sp-4)}

/* generic panel used by the kiosk-family pages */
.box{
  background:linear-gradient(168deg,var(--bg-surface),var(--bg-page-2));
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-panel);
  padding:var(--sp-5);
  margin-bottom:var(--sp-3);
}
.box.ok{border-color:rgba(61,220,132,.35)}
.brand-header{margin-bottom:var(--sp-3);text-align:center}
.brand-header img{display:block;margin:0 auto}
.page-label,.sub,.subtext{color:var(--ink-secondary);font-size:var(--fs-data);text-align:center}
.sub,.subtext{text-align:inherit}

/* big pickable rows (kiosk person / area lists) */
.result-list{display:flex;flex-direction:column;gap:var(--sp-2);max-height:420px;overflow-y:auto}
.result-row{
  background:var(--bg-sunken);border:1px solid var(--border-hairline);
  border-radius:var(--radius-input);padding:var(--sp-4);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.result-row:hover{border-color:var(--border-strong);background:var(--bg-raised)}
.result-row:active{border-color:var(--accent);background:var(--accent-wash)}
.result-name{font-family:var(--font-display);font-weight:600}
.result-sub{color:var(--ink-secondary);font-size:var(--fs-meta);margin-top:2px}
.back-link{
  color:var(--ink-secondary);font-size:var(--fs-data);display:inline-block;
  margin-bottom:var(--sp-3);cursor:pointer;
}
.back-link:hover{color:var(--accent)}
.chip{
  background:rgba(255,255,255,.035);border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill);color:var(--ink-secondary);
  display:inline-block;font-size:var(--fs-micro);padding:3px 11px;margin-right:6px;
}
.avatar{
  background:var(--accent-wash);border:1px solid rgba(0,180,216,.28);border-radius:50%;
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:14px;font-weight:600;height:40px;width:40px;flex:none;
}

/* The wordmark PNG is the "reverse on navy" cut — it carries an opaque navy
   field. On a card that is lighter than the page it reads as a stray
   rectangle, so give it a deliberate navy plaque instead of a hard edge. */
.login-card .brand img,.brandmark img,.auth-card .auth-brand img{
  background:var(--bg-page);border-radius:8px;padding:7px 12px;
}
