/* ============================================================
   YSS OPERATIONS — DESIGN SYSTEM
   Command-centre theme: black field, hazard-yellow signal,
   off-white readouts, sharp edges, no decoration without function.
   ============================================================ */

:root{
  --bg:            #0a0a0b;
  --bg-raised:     #101113;
  --panel:         #16171a;
  --panel-alt:     #1c1e22;
  --panel-line:    #26282d;
  --yellow:        #ffc72c;
  --yellow-dim:    #8a6d18;
  --yellow-glow:   rgba(255,199,44,.18);
  --white:         #ffffff;
  --grey:          #9a9da3;
  --grey-mid:      #8b8e94;
  --grey-dim:      #5b5e64;
  --green:         #33d17a;
  --green-glow:    rgba(51,209,122,.15);
  --red:           #e0393e;
  --red-glow:      rgba(224,57,62,.15);
  --amber:         #ffb020;

  --font-display:  'Oswald', 'Arial Narrow', sans-serif;
  --font-body:     'Rajdhani', 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Consolas', monospace;

  --radius: 0px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
  margin:0;
}
.mono{ font-family:var(--font-mono); letter-spacing:.02em; }
a{ color:inherit; }
button{ font-family:var(--font-body); cursor:pointer; }
input,select,textarea{ font-family:var(--font-body); }
::selection{ background:var(--yellow); color:#0a0a0b; }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--bg-raised); }
::-webkit-scrollbar-thumb{ background:var(--panel-line); }
::-webkit-scrollbar-thumb:hover{ background:var(--yellow-dim); }

/* ---------- layout shell ---------- */
#app{ min-height:100vh; display:flex; flex-direction:column; }
.hidden{ display:none !important; }

/* ============ LOGIN SCREEN ============ */
.login-screen{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,199,44,.07), transparent 55%),
    var(--bg);
  overflow:hidden;
  padding:32px 20px;
}
.login-scan{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
}
.radar-sweep{
  position:absolute;
  top:50%; left:50%;
  width:1400px; height:1400px;
  margin:-700px 0 0 -700px;
  border-radius:50%;
  background: conic-gradient(from 0deg, rgba(255,199,44,.16), transparent 22%);
  animation: sweep 7s linear infinite;
  opacity:.5;
  pointer-events:none;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
.login-topbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 28px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--grey-mid);
  letter-spacing:.08em;
  z-index:2;
  border-bottom:1px solid var(--panel-line);
}
.login-topbar .status-dot{ background:var(--green); }

.login-hero{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; margin-bottom:34px; }
.login-hero img{ width:min(78vw, 380px); filter:drop-shadow(0 0 26px rgba(255,199,44,.25)); }
.login-hero .eyebrow{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.32em;
  color:var(--yellow);
  text-transform:uppercase;
}
.login-hero .sub{
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--grey-dim);
}

.role-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:14px;
  width:100%;
  max-width:900px;
}
@media (max-width:760px){ .role-grid{ grid-template-columns:repeat(2,1fr); } }

.role-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-top:3px solid var(--yellow-dim);
  padding:26px 16px 20px;
  text-align:center;
  transition:border-color .15s, background .15s, transform .15s;
}
.role-card:hover{
  border-top-color:var(--yellow);
  background:var(--panel-alt);
  transform:translateY(-2px);
}
.role-card .icon{ font-size:26px; margin-bottom:12px; color:var(--yellow); }
.role-card .label{ font-family:var(--font-display); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--red); }
.role-card .desc{ margin-top:6px; font-size:11px; color:var(--grey-dim); font-family:var(--font-mono); }

.login-form{
  position:relative; z-index:2;
  width:100%; max-width:360px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-top:3px solid var(--yellow);
  padding:26px;
  margin-top:22px;
}
.login-form .role-tag{ font-family:var(--font-mono); font-size:11px; color:var(--yellow); letter-spacing:.15em; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center;}
.login-form .role-tag button{ background:none;border:none;color:var(--grey-dim); font-family:var(--font-mono); font-size:11px; text-decoration:underline; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11px; font-family:var(--font-mono); letter-spacing:.1em; color:var(--grey-mid); margin-bottom:6px; text-transform:uppercase;}
.field input, .field select{
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--panel-line);
  color:var(--white);
  padding:11px 12px;
  font-size:14px;
  outline:none;
}
.field input:focus, .field select:focus{ border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; padding:12px 18px;
  font-family:var(--font-display); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:13px;
  background:var(--yellow); color:#0a0a0b;
  transition:background .15s, opacity .15s;
}
.btn:hover{ background:#ffd769; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.block{ width:100%; }
.btn.ghost{ background:transparent; border:1px solid var(--panel-line); color:var(--white); }
.btn.ghost:hover{ border-color:var(--yellow); color:var(--yellow); }
.btn.danger{ background:var(--red); color:#fff; }
.btn.sm{ padding:8px 12px; font-size:11px; }
.login-error{ background:var(--red-glow); border:1px solid var(--red); color:#ffb3b3; font-family:var(--font-mono); font-size:12px; padding:10px 12px; margin-bottom:14px; }
.login-hint{ margin-top:14px; font-family:var(--font-mono); font-size:10.5px; color:var(--grey-dim); line-height:1.6; border-top:1px dashed var(--panel-line); padding-top:12px;}

/* ============ APP SHELL ============ */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width:230px; flex:0 0 230px;
  background:var(--bg-raised);
  border-right:1px solid var(--panel-line);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:220;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid var(--panel-line); }
.sidebar-brand img{ width:34px; }
.sidebar-brand .txt{ font-family:var(--font-display); font-size:14px; letter-spacing:.05em; line-height:1.15; }
.sidebar-brand .txt span{ display:block; font-size:9px; color:var(--yellow); font-family:var(--font-mono); letter-spacing:.15em; }

.nav{ flex:1; overflow-y:auto; padding:10px 0; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 18px;
  font-size:13px; letter-spacing:.03em;
  color:var(--grey-mid);
  border-left:3px solid transparent;
  cursor:pointer;
  transition:all .12s;
}
.nav-item .ic{ width:16px; text-align:center; font-size:14px; }
.nav-item:hover{ background:var(--panel); color:var(--white); }
.nav-item.active{ background:var(--panel); color:var(--yellow); border-left-color:var(--yellow); }
.nav-section{ font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; color:var(--grey-dim); padding:16px 18px 6px; }

.sidebar-foot{ border-top:1px solid var(--panel-line); padding:14px 16px; }
.user-chip{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.user-chip .av{ width:32px; height:32px; background:var(--panel); border:1px solid var(--yellow-dim); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--yellow); font-size:13px; }
.user-chip .meta{ line-height:1.25; overflow:hidden; }
.user-chip .name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-chip .role{ font-size:10px; color:var(--grey-dim); font-family:var(--font-mono); text-transform:uppercase; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:0 22px;
  height:60px;
  border-bottom:1px solid var(--panel-line);
  background:var(--bg-raised);
  position:sticky; top:0; z-index:15;
}
.topbar-left{ display:flex; align-items:center; gap:16px; min-width:0; }
.topbar-title{ font-family:var(--font-display); font-size:16px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.search-box{ position:relative; display:flex; align-items:center; }
.search-box input{
  width:230px; background:var(--panel); border:1px solid var(--panel-line); color:var(--white);
  padding:8px 10px 8px 30px; font-size:12.5px; outline:none;
}
.search-box input:focus{ border-color:var(--yellow); }
.search-box .ic{ position:absolute; left:10px; color:var(--grey-dim); font-size:12px; }
.topbar-right{ display:flex; align-items:center; gap:16px; }
.clock-block{ text-align:right; font-family:var(--font-mono); line-height:1.2; }
.clock-block .time{ font-size:15px; color:var(--yellow); font-weight:600; }
.clock-block .date{ font-size:10px; color:var(--grey-dim); }
.status-pill{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; color:var(--green); border:1px solid var(--panel-line); padding:5px 9px; letter-spacing:.05em; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.6s infinite; }
.status-dot.red{ background:var(--red); box-shadow:0 0 8px var(--red); }
.status-dot.yellow{ background:var(--yellow); box-shadow:0 0 8px var(--yellow); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.bell{ position:relative; font-size:16px; color:var(--grey-mid); }
.bell:hover{ color:var(--yellow); }
.bell .badge{ position:absolute; top:-7px; right:-9px; background:var(--red); color:#fff; font-size:9px; font-family:var(--font-mono); padding:1px 5px; }

/* ---------- mobile: sidebar becomes a slide-in drawer ---------- */
.hamburger-btn{
  display:none;
  align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
  background:var(--panel); border:1px solid var(--panel-line);
  color:var(--white); font-size:16px; cursor:pointer;
}
.hamburger-btn:hover{ border-color:var(--yellow); color:var(--yellow); }
.sidebar-backdrop{ display:none; }

@media (max-width: 860px){
  .hamburger-btn{ display:flex; }
  .shell{ position:relative; }
  .sidebar{
    position:fixed; left:0; top:0; height:100dvh;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:0 0 40px rgba(0,0,0,.6);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop.open{
    display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.6); z-index:210;
  }
  .main{ width:100%; min-width:0; }
  .topbar{ padding:0 12px; gap:8px; }
  .topbar-title{ font-size:13px; }
  .search-box{ display:none; }
  .clock-block{ display:none; }
  .status-pill .pill-label{ display:none; } /* keep the dot, drop the text label */
  .status-pill{ padding:6px; gap:0; }
  .content{ padding:14px; }
}
@media (max-width: 480px){
  .topbar-right{ gap:8px; }
}

/* ---------- ticker ---------- */
.ticker{
  display:flex; align-items:center;
  background:#0d0d0e; border-bottom:1px solid var(--panel-line);
  height:30px; overflow:hidden; position:relative;
}
.ticker .tag{ flex:0 0 auto; background:var(--yellow); color:#0a0a0b; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; padding:0 10px; height:100%; display:flex; align-items:center; z-index:2;}
.ticker-track{ display:flex; white-space:nowrap; animation:ticker 38s linear infinite; }
.ticker-track span{ font-family:var(--font-mono); font-size:11.5px; color:var(--grey-mid); padding:0 26px; }
.ticker-track span b{ color:var(--white); }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- content ---------- */
.content{ padding:22px; flex:1; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.page-head h1{ font-size:22px; }
.page-head .sub{ font-family:var(--font-mono); font-size:11.5px; color:var(--grey-dim); margin-top:4px; letter-spacing:.04em;}
.page-actions{ display:flex; gap:8px; }

/* ---------- stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:22px; }
.stat-card{ background:var(--panel); border:1px solid var(--panel-line); border-top:3px solid var(--yellow-dim); padding:16px 16px 14px; position:relative; }
.stat-card.live{ border-top-color:var(--yellow); }
.stat-card .num{ font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--white); line-height:1; }
.stat-card .lbl{ margin-top:8px; font-size:11px; letter-spacing:.06em; color:var(--grey-mid); text-transform:uppercase; font-family:var(--font-mono);}
.stat-card .delta{ position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:10px; padding:2px 6px; }
.stat-card .delta.good{ color:var(--green); border:1px solid var(--green); }
.stat-card .delta.bad{ color:var(--red); border:1px solid var(--red); }
.stat-card.accent-green{ border-top-color:var(--green); }
.stat-card.accent-red{ border-top-color:var(--red); }

/* ---------- panels / cards ---------- */
.panel{ background:var(--panel); border:1px solid var(--panel-line); margin-bottom:18px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--panel-line); }
.panel-head h3{ font-size:13px; letter-spacing:.06em; }
.panel-body{ padding:16px; }
.panel-body.pad0{ padding:0; }

/* ---------- table ---------- */
.tbl-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
thead th{
  text-align:left; padding:10px 12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--grey-dim); text-transform:uppercase; border-bottom:1px solid var(--panel-line); white-space:nowrap;
  cursor:pointer; user-select:none;
}
thead th:hover{ color:var(--yellow); }
tbody td{ padding:10px 12px; border-bottom:1px solid var(--panel-line); vertical-align:middle; }
tbody tr:hover{ background:var(--panel-alt); }
tbody tr:last-child td{ border-bottom:none; }
.cell-id{ font-family:var(--font-mono); color:var(--grey-mid); }

.tag{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; padding:3px 8px; border:1px solid var(--panel-line); letter-spacing:.03em; white-space:nowrap;}
.tag.green{ color:var(--green); border-color:var(--green); background:var(--green-glow); }
.tag.red{ color:#ff9b9b; border-color:var(--red); background:var(--red-glow); }
.tag.yellow{ color:var(--yellow); border-color:var(--yellow); background:var(--yellow-glow); }
.tag.grey{ color:var(--grey-mid); }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.green{ background:var(--green); box-shadow:0 0 6px var(--green); }
.dot.yellow{ background:var(--yellow); box-shadow:0 0 6px var(--yellow); }
.dot.red{ background:var(--red); box-shadow:0 0 6px var(--red); }

.progress{ height:5px; background:var(--bg-raised); width:100%; position:relative; }
.progress > span{ position:absolute; inset:0 auto 0 0; background:var(--yellow); }
.progress.green > span{ background:var(--green); }
.progress.red > span{ background:var(--red); }

.icon-btn{ background:none; border:1px solid var(--panel-line); color:var(--grey-mid); padding:6px 8px; font-size:12px; }
.icon-btn:hover{ color:var(--yellow); border-color:var(--yellow); }

/* ---------- forms / modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal{ background:var(--panel); border:1px solid var(--panel-line); border-top:3px solid var(--yellow); width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--panel-line); }
.modal-head h3{ font-size:14px; }
.modal-body{ padding:18px; overflow-y:auto; flex:1; min-height:0; }
.modal-head{ flex-shrink:0; }
.modal-foot{ flex-shrink:0; }
.modal > form{ display:flex; flex-direction:column; flex:1; min-height:0; }
.modal-foot{ padding:14px 18px; border-top:1px solid var(--panel-line); display:flex; justify-content:flex-end; gap:8px; }
.close-x{ background:none; border:none; color:var(--grey-mid); font-size:18px; }
.close-x:hover{ color:var(--yellow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }

.shift-target-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:560px){ .shift-target-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:340px){ .shift-target-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- attendance capture ---------- */
.attend-wrap{ max-width:520px; margin:0 auto; }
.attend-step{ background:var(--panel); border:1px solid var(--panel-line); padding:26px; text-align:center; }
.guard-card{ display:flex; gap:14px; align-items:center; text-align:left; background:var(--bg-raised); border:1px solid var(--panel-line); padding:14px; margin-bottom:16px;}
.guard-card .ph{ width:58px; height:58px; background:var(--panel); border:1px solid var(--yellow-dim); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--yellow); font-size:20px; flex:0 0 auto;}
.cam-frame{ position:relative; width:100%; aspect-ratio:4/3; background:#000; border:2px solid var(--yellow-dim); overflow:hidden; margin-bottom:14px; }
.cam-frame video, .cam-frame canvas, .cam-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.cam-frame .corner{ position:absolute; width:22px; height:22px; border:2px solid var(--yellow); }
.cam-frame .c1{ top:6px;left:6px;border-right:none;border-bottom:none; }
.cam-frame .c2{ top:6px;right:6px;border-left:none;border-bottom:none; }
.cam-frame .c3{ bottom:6px;left:6px;border-right:none;border-top:none; }
.cam-frame .c4{ bottom:6px;right:6px;border-left:none;border-top:none; }
.scan-line{ position:absolute; left:0; right:0; height:2px; background:var(--yellow); box-shadow:0 0 10px var(--yellow); animation:scan 1.1s linear infinite; }
@keyframes scan{ 0%{ top:0;} 100%{ top:100%;} }
.verify-result{ padding:22px; text-align:center; }
.verify-result .ic{ font-size:40px; margin-bottom:10px; }
.verify-result.ok .ic{ color:var(--green); }
.verify-result.fail .ic{ color:var(--red); }

/* ---------- attendance grid (guard x day) ---------- */
.att-grid-wrap{ overflow-x:auto; }
.att-grid{ border-collapse:collapse; font-size:11.5px; white-space:nowrap; }
.att-grid th, .att-grid td{ border:1px solid var(--panel-line); padding:0; }
.att-grid thead th{ background:var(--bg-raised); padding:8px 6px; text-align:center; font-family:var(--font-mono); font-size:10px; color:var(--grey-dim); }
.att-grid .num-col{ text-align:center; padding:8px 6px; position:sticky; left:0; background:var(--panel); z-index:2; width:36px; min-width:36px; }
.att-grid thead .num-col{ background:var(--bg-raised); }
.att-grid .name-col{ text-align:left; padding:8px 12px; position:sticky; left:36px; background:var(--panel); z-index:2; min-width:170px; }
.att-grid thead .name-col{ background:var(--bg-raised); }
.att-cell{ width:34px; height:34px; text-align:center; font-family:var(--font-mono); font-weight:700; font-size:10.5px; position:relative; cursor:default; }
.att-cell.band-green{ background:var(--green-glow); color:var(--green); }
.att-cell.band-red{ background:var(--red-glow); color:#ff8f8f; }
.att-cell.band-yellow{ background:var(--yellow-glow); color:var(--yellow); }
.att-cell.band-grey{ color:var(--grey-dim); }
.att-cell .cell-tip{
  display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#0d0e10; border:1px solid var(--panel-line); color:var(--white);
  font-family:var(--font-body); font-weight:400; font-size:11px; white-space:nowrap;
  padding:5px 9px; z-index:80; box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.att-cell:hover .cell-tip{ display:block; }
.att-legend{ display:flex; gap:16px; margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--grey-mid); flex-wrap:wrap;}
.att-legend span{ display:flex; align-items:center; gap:6px; }
.att-legend i{ width:12px; height:12px; display:inline-block; }

/* ---------- notifications drawer ---------- */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; }
.drawer{ position:fixed; top:0; right:0; height:100vh; width:340px; max-width:88vw; background:var(--bg-raised); border-left:1px solid var(--panel-line); z-index:95; display:flex; flex-direction:column; }
.drawer-head{ padding:16px 18px; border-bottom:1px solid var(--panel-line); display:flex; justify-content:space-between; align-items:center;}
.notif-list{ overflow-y:auto; flex:1; }
.notif-item{ padding:13px 18px; border-bottom:1px solid var(--panel-line); display:flex; gap:10px; }
.notif-item .ic{ font-size:14px; margin-top:2px; }
.notif-item .txt{ font-size:12.5px; line-height:1.4; }
.notif-item .t{ font-family:var(--font-mono); font-size:10px; color:var(--grey-dim); margin-top:4px; }

/* ---------- location dashboard (kiosk) ---------- */
.kiosk{ min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }
.kiosk-top{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--panel-line); flex-wrap:wrap; gap:10px; }
.kiosk-top .loc-name{ font-family:var(--font-display); font-size:18px; letter-spacing:.04em; }
.kiosk-body{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media (max-width:820px){ .kiosk-body{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .kiosk-top{ padding:12px 16px; }
  .kiosk-top .clock-block{ display:none; }
  .kiosk-col{ padding:18px; }
}
.kiosk-col{ padding:26px; border-right:1px solid var(--panel-line); }
.kiosk-col:last-child{ border-right:none; }
.kiosk-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px;}

/* ---------- misc ---------- */
.empty{ text-align:center; padding:40px 20px; color:var(--grey-dim); font-family:var(--font-mono); font-size:12px; }
.badge-count{ background:var(--yellow); color:#0a0a0b; font-family:var(--font-mono); font-size:10px; font-weight:700; padding:1px 6px; }
.footnote{ font-family:var(--font-mono); font-size:10.5px; color:var(--grey-dim); margin-top:10px; line-height:1.6;}
.toast-wrap{ position:fixed; bottom:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{ background:var(--panel); border:1px solid var(--yellow); border-left:4px solid var(--yellow); padding:12px 16px; font-size:12.5px; max-width:300px; animation:toastin .2s ease; }
.toast.err{ border-color:var(--red); border-left-color:var(--red); }
@keyframes toastin{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.perm-locked{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; color:var(--grey-dim); font-family:var(--font-mono); text-align:center;}
.perm-locked .ic{ font-size:34px; color:var(--red); margin-bottom:14px;}

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.filter-bar .field{ margin-bottom:0; min-width:140px; }

/* ---------- shift-based location grid (dashboard) ---------- */
.shift-loc-search{ width:220px; background:var(--panel); border:1px solid var(--panel-line); color:var(--white); padding:8px 10px; font-size:12.5px; outline:none; }
.shift-loc-search:focus{ border-color:var(--yellow); }
.shift-loc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.shift-loc-card{ background:var(--bg-raised); border:1px solid var(--panel-line); padding:12px 14px; }
.shift-loc-name{ font-size:12.5px; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shift-loc-name .locid{ font-family:var(--font-mono); font-size:10px; color:var(--grey-dim); font-weight:400; margin-left:6px; }
.shift-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.shift-chip{
  position:relative;
  display:flex; align-items:center; gap:5px;
  background:var(--panel); border:1px solid var(--panel-line);
  padding:5px 9px; cursor:pointer; font-family:var(--font-mono);
  transition:border-color .12s, background .12s;
}
.shift-chip:hover{ border-color:var(--yellow); background:var(--panel-alt); }
.shift-chip .chip-letter{ font-weight:700; font-size:11px; color:var(--grey-mid); }
.shift-chip .chip-frac{ font-size:11px; font-weight:700; }
.shift-chip.status-green .chip-frac{ color:var(--green); }
.shift-chip.status-yellow .chip-frac{ color:var(--yellow); }
.shift-chip.status-red .chip-frac{ color:var(--red); }
.shift-chip.status-grey .chip-frac{ color:var(--grey-mid); }
.shift-chip .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow); box-shadow:0 0 6px var(--yellow); animation:pulse 1.6s infinite; }

.chip-tooltip{
  display:none;
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#0d0e10; border:1px solid var(--yellow-dim); padding:10px 12px;
  min-width:180px; z-index:60; text-align:left; white-space:normal;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.shift-chip:hover .chip-tooltip{ display:block; }
.chip-tooltip::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--yellow-dim);
}
.chip-tooltip .tt-row{ display:flex; justify-content:space-between; gap:14px; font-size:11px; color:var(--grey-mid); margin-bottom:3px; }
.chip-tooltip .tt-row b{ color:var(--white); font-family:var(--font-mono); }
.chip-tooltip .tt-absent{ margin-top:6px; padding-top:6px; border-top:1px solid var(--panel-line); font-size:10.5px; color:var(--red); line-height:1.5; }

.shift-loc-empty{ grid-column:1/-1; text-align:center; padding:24px; color:var(--grey-dim); font-family:var(--font-mono); font-size:12px; }

@media print{
  .sidebar,.topbar,.ticker,.page-actions,.no-print{ display:none !important; }
  body{ background:#fff; color:#000; }
  .content{ padding:0; }
}