/* ==========================================================================
   GuardOps — main stylesheet
   Section 1 is copied UNCHANGED from docs/guardops-demo.html so every screen
   looks exactly like the prototype. Section 2 holds additions for the PHP
   build (login screen, extra input types). Edit colours via the :root tokens.
   ========================================================================== */

/* ---------- 1. Prototype styles (verbatim) ---------- */
:root{
  /* Typography: Noto Sans — clear and readable, with matching Hindi / Marathi / Tamil / Telugu / Kannada letters */
  --font-body:'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head:var(--font-body);
  --font-num:var(--font-body);
  /* Teal green palette (2026-10) */
  --paper:#F3F6F6;
  --surface:#FFFFFF;
  --surface-2:#EEF4F3;
  --ink:#16302E;
  --muted:#5E7472;
  --border:#DDE7E6;
  --primary:#1D6B66;
  --primary-ink:#11403D;
  --primary-tint:#E3F0EF;
  --accent:#1F8F5F;
  --accent-tint:#E2F4EA;
  --warn:#C27C0E;
  --warn-tint:#FCF0DA;
  --crit:#D14343;
  --crit-tint:#FBE6E6;
  --highlight:#F5A524;
  /* Left menu: teal panel with white text (white-label agencies get their own colour here) */
  --rail-bg:var(--primary);
  --rail-ink:#FFFFFF;
  --rail-muted:rgba(255,255,255,.72);
  --rail-hover:rgba(255,255,255,.10);
  --rail-active:rgba(255,255,255,.18);
  --rail-line:rgba(255,255,255,.14);
  --shadow: 0 1px 2px rgba(20,32,40,.06), 0 6px 20px -8px rgba(20,32,40,.12);
  --radius: 10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1414;
    --surface:#141D1D;
    --surface-2:#1A2626;
    --ink:#E4EEED;
    --muted:#8FA5A3;
    --border:#243332;
    --primary:#5FA9A3;
    --primary-ink:#BFE3DF;
    --primary-tint:#16302E;
    --accent:#3CC189;
    --accent-tint:#123024;
    --warn:#E8A940;
    --warn-tint:#2E2412;
    --crit:#EF6B6B;
    --crit-tint:#331818;
    --highlight:#F2B84B;
    --rail-bg:#0B1414;
    --rail-ink:#E4EEED;
    --rail-muted:#8FA5A3;
    --rail-hover:rgba(255,255,255,.06);
    --rail-active:rgba(95,169,163,.18);
    --rail-line:#1E2B2A;
    color-scheme:dark;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
    --paper:#0D1414;
    --surface:#141D1D;
    --surface-2:#1A2626;
    --ink:#E4EEED;
    --muted:#8FA5A3;
    --border:#243332;
    --primary:#5FA9A3;
    --primary-ink:#BFE3DF;
    --primary-tint:#16302E;
    --accent:#3CC189;
    --accent-tint:#123024;
    --warn:#E8A940;
    --warn-tint:#2E2412;
    --crit:#EF6B6B;
    --crit-tint:#331818;
    --highlight:#F2B84B;
    --rail-bg:#0B1414;
    --rail-ink:#E4EEED;
    --rail-muted:#8FA5A3;
    --rail-hover:rgba(255,255,255,.06);
    --rail-active:rgba(95,169,163,.18);
    --rail-line:#1E2B2A;
    color-scheme:dark;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,.disp{
  font-family:var(--font-head);
  text-transform:none;
  letter-spacing:0;
  text-wrap:balance;
  font-weight:700;
}
.mono{ font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:0; }
button{ font-family:inherit; }
a{ color:var(--primary); }
::selection{ background:var(--primary-tint); }

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

.rail{
  width:244px; flex:none;
  background:var(--rail-bg); color:var(--rail-ink);
  border-right:1px solid var(--rail-line);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.rail-brand{
  padding:16px 18px 16px;
  border-bottom:1px solid var(--rail-line);
  display:flex; align-items:center; gap:10px;
}
.brand-mark{
  flex:none; width:34px; height:34px; border-radius:9px;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head);
  font-weight:800; font-size:16px; letter-spacing:.02em;
  overflow:hidden;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.rail-brand .word{
  font-family:var(--font-head);
  font-weight:800; font-size:19px; letter-spacing:.02em;
  color:var(--ink); line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail-brand .sub{
  margin-top:3px; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail-brand .brand-text{ min-width:0; flex:1; }
.rail-nav{ padding:10px; display:flex; flex-direction:column; gap:2px; flex:1; }
.rail-btn{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--muted); text-align:left; cursor:pointer;
  font-size:15px; font-weight:500;
}
.rail-btn svg{ width:17px; height:17px; flex:none; }
.rail-btn:hover{ background:var(--rail-hover); color:var(--rail-ink); }
.rail-btn.active{ background:var(--rail-active); color:var(--rail-ink); font-weight:600; }
.rail-btn.active svg{ color:var(--rail-ink); }
.rail-foot{
  padding:14px 16px; border-top:1px solid var(--rail-line);
  font-size:13px; color:var(--rail-muted);
}

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 26px; border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky; top:0; z-index:5;
}
.topbar-title h1{ font-size:20px; margin:0; }
.topbar-title .desc{ font-size:14.5px; color:var(--muted); margin-top:2px; font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:8px; justify-content:flex-end; }
.topbar-right > select{
  flex:0 1 auto; width:auto; min-width:0; max-width:168px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.site-select{
  font-size:14.5px; padding:7px 10px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:inherit;
}
.clock{
  display:flex; align-items:center; gap:6px; flex:none; white-space:nowrap;
  font-size:14.5px; color:var(--muted);
  padding-left:12px; margin-left:2px; border-left:1px solid var(--border);
}
.clock svg{ width:15px; height:15px; flex:none; color:var(--muted); }
.clock b{ color:var(--ink); font-weight:600; font-family:var(--font-num); font-variant-numeric:tabular-nums; }
@media (max-width:860px){
  .topbar-right > select{ max-width:130px; }
}

.content{ padding:24px 26px 60px; max-width:1180px; }
.view{ display:none; }
.view.active{ display:block; }

/* ---------- primitives ---------- */
.grid{ display:grid; gap:14px; }
.stat-row{ grid-template-columns:repeat(6,1fr); margin-bottom:20px; }
@media (max-width:1000px){ .stat-row{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.stat{
  padding:14px 16px; display:flex; flex-direction:column; gap:6px; position:relative;
}
.stat .label{ font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.stat .value{ font-family:var(--font-head); font-size:30px; font-weight:700; line-height:1; }
.stat .value small{ font-size:16px; color:var(--muted); font-weight:600; margin-left:2px; }
.stat .delta{ font-size:13px; font-weight:600; }
.stat .delta.up{ color:var(--accent); }
.stat .delta.down{ color:var(--crit); }
.stat.nav-enabled{ cursor:pointer; transition:box-shadow .15s, border-color .15s, transform .08s; }
.stat.nav-enabled:hover{ border-color:var(--primary); box-shadow:0 1px 2px rgba(20,32,40,.06), 0 10px 22px -8px rgba(26,92,168,.32); }
.stat.nav-enabled:active{ transform:translateY(1px); }
.stat.nav-enabled:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.stat .nav-hint{ position:absolute; top:13px; right:12px; width:13px; height:13px; color:var(--primary); opacity:0; transform:translateX(-3px); transition:opacity .15s, transform .15s; }
.stat.nav-enabled:hover .nav-hint, .stat.nav-enabled:focus-visible .nav-hint{ opacity:1; transform:translateX(0); }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:28px 0 12px; }
.section-head h2{ font-size:17px; margin:0; }
.section-head .hint{ font-size:14px; color:var(--muted); font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.section-head:first-child{ margin-top:0; }

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:13px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.pill .dot{ width:6px; height:6px; border-radius:50%; }
.pill.ok{ background:var(--accent-tint); color:var(--accent); }
.pill.ok .dot{ background:var(--accent); }
.pill.warn{ background:var(--warn-tint); color:var(--warn); }
.pill.warn .dot{ background:var(--warn); }
.pill.crit{ background:var(--crit-tint); color:var(--crit); }
.pill.crit .dot{ background:var(--crit); }
.pill.idle{ background:var(--surface-2); color:var(--muted); }
.pill.idle .dot{ background:var(--muted); }

table{ width:100%; border-collapse:collapse; font-size:15px; }
th{ text-align:left; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--border); }
td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; border-radius:var(--radius); }
.table-wrap.card{ padding:0; }

.btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:7px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  font-size:14.5px; font-weight:600; cursor:pointer;
}
.btn:hover{ background:var(--surface-2); }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover{ filter:brightness(1.06); }
.btn.ghost{ background:transparent; }
.btn:focus-visible, .rail-btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn svg{ width:14px; height:14px; }

.dl-menu{ position:relative; display:inline-block; }
.dl-menu .dl-caret{ width:10px; height:10px; margin-left:1px; opacity:.7; }
.dl-menu-panel{
  position:absolute; right:0; top:calc(100% + 6px);
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  box-shadow:var(--shadow); min-width:176px; z-index:40; padding:4px;
  display:none;
}
.dl-menu-panel.open{ display:block; }
.dl-menu-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:0; padding:7px 9px; border-radius:6px; cursor:pointer;
  font:inherit; font-size:14px; color:var(--ink);
}
.dl-menu-item:hover{ background:var(--surface-2); }
.dl-menu-item svg{ width:13px; height:13px; flex:none; color:var(--muted); }

.two-col{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start; }   /* minmax(0,…): wide tables scroll inside their card instead of widening the page */
@media (max-width:900px){ .two-col{ grid-template-columns:minmax(0,1fr); } }

.checkpoint{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--border);
}
.checkpoint:last-child{ border-bottom:none; }
.cp-num{
  width:24px; height:24px; border-radius:50%; background:var(--surface-2); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:none;
  font-family:var(--font-num);
}
.checkpoint.scanned .cp-num{ background:var(--accent); color:#fff; }
.checkpoint.overdue .cp-num{ background:var(--crit); color:#fff; }
.cp-body{ flex:1; min-width:0; }
.cp-name{ font-weight:600; font-size:15px; }
.cp-meta{ font-size:13.5px; color:var(--muted); margin-top:1px; }

.feed{ display:flex; flex-direction:column; }
.feed-item{ display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); }
.feed-item:last-child{ border-bottom:none; }
.feed-bar{ width:3px; border-radius:2px; flex:none; }
.feed-bar.crit{ background:var(--crit); }
.feed-bar.warn{ background:var(--warn); }
.feed-bar.ok{ background:var(--accent); }
.feed-bar.idle{ background:var(--border); }
.feed-text{ font-size:14.5px; }
.feed-text b{ font-weight:600; }
.feed-time{ font-size:12.5px; color:var(--muted); margin-top:2px; }

.guard-grid{ grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); }
.guard-card{ padding:13px 14px; display:flex; gap:11px; align-items:flex-start; }
.avatar{
  width:36px; height:36px; border-radius:8px; background:var(--primary-tint); color:var(--primary-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex:none;
  font-family:var(--font-head);
}
.guard-name{ font-weight:600; font-size:15px; }
.guard-site{ font-size:13.5px; color:var(--muted); margin-top:1px; }
.guard-status{ margin-top:7px; }

.form-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:minmax(0,1fr); } }
.field{ display:flex; flex-direction:column; gap:5px; }
.field.full{ grid-column:1/-1; }
label{ font-size:13.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=password], input:not([type]), input[type=date], input[type=time], input[type=month], select, textarea{
  font-family:inherit; font-size:15px; padding:9px 10px; border-radius:7px; border:1px solid var(--border);
  background:var(--paper); color:var(--ink); width:100%;
}
textarea{ resize:vertical; min-height:70px; }

.capture-box{
  border:1.5px dashed var(--border); border-radius:9px; padding:16px; text-align:center;
  background:var(--surface-2); cursor:pointer; position:relative;
}
.capture-box:hover{ border-color:var(--primary); }
.capture-box input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.capture-box svg{ width:22px; height:22px; color:var(--muted); margin-bottom:6px; }
.capture-box .cap-label{ font-size:14.5px; font-weight:600; color:var(--ink); }
.capture-box .cap-sub{ font-size:13px; color:var(--muted); margin-top:2px; }
.preview-strip{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.preview-thumb{ width:56px; height:56px; border-radius:7px; overflow:hidden; border:1px solid var(--border); }
.preview-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.incident-grid{ grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
.incident-card{ padding:0; overflow:hidden; }
.incident-photo{
  height:110px; background:linear-gradient(135deg,var(--surface-2),var(--border));
  display:flex; align-items:center; justify-content:center; color:var(--muted); position:relative;
}
.incident-photo img{ width:100%; height:100%; object-fit:cover; }
.incident-photo svg{ width:26px; height:26px; }
.incident-photo.has-photo{ cursor:zoom-in; }
.incident-photo-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px;
  background:rgba(10,14,18,.4); color:#fff; opacity:0; transition:opacity .15s;
  font-size:13px; font-weight:600; font-family:var(--font-body);
}
.incident-photo.has-photo:hover .incident-photo-hint,
.incident-photo.has-photo:focus-visible .incident-photo-hint{ opacity:1; }
.incident-photo-hint svg{ width:15px; height:15px; }

/* ---------- image lightbox (enlarge incident photo evidence) ---------- */
.img-lightbox[hidden]{ display:none; }
.img-lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(8,12,16,.9);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px;
  padding:56px 24px 24px;
}
.img-lightbox img{
  max-width:min(90vw, 900px); max-height:72vh; object-fit:contain;
  border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#111;
}
.img-lightbox-caption{ color:#f2f4f3; font-size:14.5px; text-align:center; max-width:80vw; }
.img-lightbox-close{
  position:fixed; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.img-lightbox-close:hover{ background:rgba(255,255,255,.24); }
.img-lightbox-close svg{ width:16px; height:16px; }
@media (max-width:520px){ .img-lightbox{ padding:48px 12px 16px; } }
/* Added: prev / next when a report has more than one photo (the app allows up to 5) */
.img-lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.img-lightbox-nav:hover{ background:rgba(255,255,255,.24); }
.img-lightbox-nav svg{ width:18px; height:18px; }
.img-lightbox-nav.prev{ left:14px; }
.img-lightbox-nav.next{ right:14px; }

/* Checkpoint scan frequency (Patrol) */
.freq-pill{ background:var(--primary-tint); color:var(--primary-ink); }
.cp-freq-select{ width:auto; font-size:13px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--ink); }
.incident-body{ padding:12px 14px; }
.incident-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.incident-cat{ font-weight:600; font-size:15px; }
.incident-meta{ font-size:13px; color:var(--muted); margin-top:3px; }
.incident-desc{ font-size:14.5px; margin-top:8px; color:var(--ink); }
.incident-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:13px; color:var(--muted); }

.bar-track{ height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); border-radius:4px; }

.summary-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:15px; }
.summary-row:last-child{ border-bottom:none; }
.summary-row.total{ font-weight:700; font-size:16px; padding-top:11px; }
.summary-row span:last-child{ font-family:var(--font-num); }

.format-opt{ font-weight:600; }
.format-opt.active{ background:var(--primary-tint); border-color:var(--primary); color:var(--primary-ink); }

.export-meta{ display:flex; justify-content:space-between; align-items:baseline; margin:12px 0 6px; font-size:13.5px; color:var(--muted); }
.export-meta b{ color:var(--ink); font-family:var(--font-num); font-weight:600; }
.csv-preview{
  width:100%; min-height:170px; max-height:220px; font-family:var(--font-num); font-size:12.5px;
  line-height:1.5; padding:10px 11px; border-radius:8px; border:1px solid var(--border);
  background:var(--paper); color:var(--muted); resize:vertical; white-space:pre;
}

.note{ font-size:13.5px; color:var(--muted); padding:10px 14px; background:var(--surface-2); border-radius:8px; margin-top:14px; }

select.status-sel{ padding:5px 8px; font-size:13.5px; border-radius:6px; }

.hamburger{
  display:none; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); cursor:pointer; flex:none;
}
.hamburger svg{ width:18px; height:18px; }
.rail-overlay{ display:none; position:fixed; inset:0; background:rgba(10,16,20,.45); z-index:40; }
@media (max-width:860px){
  .hamburger{ display:inline-flex; }
  .rail{
    position:fixed; left:0; top:0; z-index:50; width:240px;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:var(--shadow);
  }
  .rail.open{ transform:translateX(0); }
  .rail-overlay.show{ display:block; }
  .content{ padding:18px 16px 48px; }
  .topbar{ padding:12px 16px; }
  .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.role-banner{
  display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:9px;
  background:var(--primary-tint); color:var(--primary-ink); font-size:14.5px; margin-bottom:20px;
  border:1px solid var(--primary);
}
.role-banner svg{ width:16px; height:16px; flex:none; margin-top:1px; }

.role-select{
  font-size:14.5px; padding:7px 10px; border-radius:7px; border:1px solid var(--primary);
  background:var(--primary-tint); color:var(--primary-ink); font-family:inherit; font-weight:600;
}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer;
}
.icon-btn:hover{ background:var(--crit-tint); color:var(--crit); border-color:var(--crit); }
.icon-btn svg{ width:13px; height:13px; }

.qr-wrap{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-top:14px; }
.qr-label{
  width:150px; padding:14px 12px 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface-2); text-align:center; flex:none;
}
.qr-label #qrCanvas{ display:flex; justify-content:center; margin-bottom:8px; }
.qr-label .qr-site{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.qr-label .qr-cp{ font-size:14px; font-weight:700; margin-top:2px; }
.qr-payload{
  flex:1; min-width:220px; font-size:12.5px; padding:10px 12px; border-radius:8px;
  background:var(--paper); border:1px solid var(--border); color:var(--muted); word-break:break-all;
}

.notif-grid{ display:grid; grid-template-columns:auto repeat(4,1fr); gap:10px 14px; align-items:center; font-size:14px; }
.notif-grid .nh{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; text-align:center; }
.notif-grid label.chk{ display:flex; align-items:center; justify-content:center; text-transform:none; letter-spacing:0; font-weight:400; }
.notif-grid input[type=checkbox]{ width:15px; height:15px; accent-color:var(--primary); }

.checklist-panel{ padding:2px 14px 14px 50px; border-bottom:1px solid var(--border); }
.checklist-panel:last-child{ border-bottom:none; }
.chk-item{ display:flex; align-items:center; gap:8px; font-size:14.5px; padding:5px 0; }
.chk-item input{ width:15px; height:15px; accent-color:var(--primary); flex:none; }

#loginScreen .field{ margin-bottom:12px; }
#loginScreen input[type=text]{ font-size:16px; }

.sos-fab{
  position:fixed; right:22px; bottom:22px; z-index:30;
  width:64px; height:64px; border-radius:50%;
  background:var(--crit); color:#fff; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 4px 16px rgba(178,58,58,.45), var(--shadow);
  animation:sosPulse 1.8s ease-in-out infinite;
}
.sos-fab svg{ width:20px; height:20px; }
.sos-fab:hover{ filter:brightness(1.08); }
.sos-fab.armed{ background:#7a1f1f; animation:none; }
@keyframes sosPulse{
  0%,100%{ box-shadow:0 4px 16px rgba(178,58,58,.45), 0 0 0 0 rgba(178,58,58,.45); }
  50%{ box-shadow:0 4px 16px rgba(178,58,58,.45), 0 0 0 10px rgba(178,58,58,0); }
}
.sos-toast{
  position:fixed; right:22px; bottom:94px; z-index:31; max-width:230px;
  background:var(--surface); color:var(--ink); border:1px solid var(--crit); border-left:4px solid var(--crit);
  padding:10px 12px; border-radius:8px; font-size:14px; box-shadow:var(--shadow);
}

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }


/* ---------- 2. Additions for the PHP build ---------- */

/* Base resets the prototype got from its hosting wrapper */
body{ margin:0; }
img{ max-width:100%; }
[hidden]{ display:none !important; }

/* The prototype only styled text/date/time inputs — the real app also
   uses password, email, tel and number fields, so they get the same look. */
input[type=password], input[type=email], input[type=tel], input[type=number]{
  font-family:inherit; font-size:15px; padding:9px 10px; border-radius:7px; border:1px solid var(--border);
  background:var(--paper); color:var(--ink); width:100%;
}

/* Login screen */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; background:var(--paper);
}
#loginScreen input{ font-size:16px; }
.login-card{ width:100%; max-width:420px; padding:24px 24px 20px; }
.login-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px; }
.login-top select{ width:auto; flex:none; }
.login-brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.login-brand .brand-mark{ width:42px; height:42px; border-radius:10px; font-size:17px; }
.login-brand .brand-text{ min-width:0; }
.login-brand .word{
  font-family:var(--font-head);
  font-weight:800; font-size:24px; letter-spacing:.02em; color:var(--ink); line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.login-brand .sub{
  margin-top:3px; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Agency tabs in one row; Facilink's own Super Admin tab on its own row below */
.login-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:14px; }
.login-tabs .btn{ justify-content:center; padding:8px 6px; }
.login-tabs .login-tab-super{ grid-column:1 / -1; font-size:13px; padding:6px; }
.pin-input{ font-family:var(--font-num); letter-spacing:.5em; font-size:18px !important; }
@media (max-width:380px){ .login-tabs{ grid-template-columns:repeat(2,1fr); } }
.login-hint{ font-size:14px; color:var(--muted); margin:0 0 14px; }
.login-form .btn.primary{ width:100%; justify-content:center; padding:10px 13px; font-size:15px; }
.login-row{ display:flex; justify-content:flex-end; margin:-4px 0 12px; }
.login-link{ background:none; border:0; padding:0; font:inherit; font-size:14px; color:var(--primary); cursor:pointer; }
.login-link:hover{ text-decoration:underline; }
.login-link[disabled]{ color:var(--muted); cursor:not-allowed; text-decoration:none; }
.login-msg{ font-size:14px; padding:9px 12px; border-radius:8px; margin-bottom:12px; }
.login-msg.err{ background:var(--crit-tint); color:var(--crit); }
.login-msg.ok{ background:var(--accent-tint); color:var(--accent); }
.login-code{ font-size:14px; color:var(--muted); padding:9px 12px; background:var(--surface-2); border-radius:8px; margin-bottom:12px; }
.login-code b{ color:var(--ink); font-family:var(--font-num); font-size:16px; letter-spacing:.12em; }
.login-foot{ margin-top:16px; font-size:13px; color:var(--muted); text-align:center; }

/* Menu items are links in the PHP build (buttons in the prototype) */
a.rail-btn{ text-decoration:none; }

/* Sidebar footer: signed-in user */
.rail-user{ font-size:14px; color:var(--rail-ink); font-weight:600; }
.rail-user-role{ font-size:12.5px; color:var(--rail-muted); letter-spacing:.04em; text-transform:uppercase; margin-top:1px; }

/* Result message next to a form's submit button */
.form-msg{ font-size:14px; color:var(--muted); }
.form-msg.ok{ color:var(--accent); }
.form-msg.err{ color:var(--crit); }

/* Pop-up panel (QR scanner) */
.modal-overlay{ position:fixed; inset:0; z-index:60; background:rgba(10,16,20,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-card{ width:100%; max-width:420px; max-height:calc(100vh - 32px); overflow:auto; padding:16px 18px; }
.modal-card h3{ font-size:17px; margin:0 0 4px; }
#qrReader{ width:100%; border-radius:8px; overflow:hidden; background:#000; min-height:60px; }
#qrReader video{ width:100% !important; }

/* Today's routes rows are clickable */
.route-row{ cursor:pointer; }
.route-row:hover{ background:var(--surface-2); }
.route-row.active{ background:var(--primary-tint); }
.checkpoint.overdue .cp-meta{ color:var(--crit); }
.cp-actions{ display:flex; gap:6px; align-items:center; flex:none; }

/* ---------- notification bell (topbar) — copied from the prototype ---------- */
.notif-bell{ flex:none; }
.notif-bell-btn{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--muted);
  cursor:pointer; position:relative; flex:none;
}
.notif-bell-btn:hover{ background:var(--surface-2); color:var(--ink); }
.notif-bell-btn svg{ width:17px; height:17px; }
.notif-bell-btn.has-unread{ color:var(--primary); border-color:var(--primary); }
.notif-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--crit); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-num);
  border:2px solid var(--surface);
}
.notif-panel{ width:340px; max-width:calc(100vw - 32px); padding:0; }
.notif-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--border); font-size:14.5px; font-weight:700;
}
.notif-mark-all{
  background:none; border:0; padding:0; color:var(--primary); font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.notif-mark-all:hover{ text-decoration:underline; }
.notif-mark-all[disabled]{ opacity:.45; cursor:not-allowed; text-decoration:none; }
.notif-list{ max-height:340px; overflow-y:auto; }
.notif-item{
  display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; position:relative;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--surface-2); }
.notif-item.unread{ background:var(--primary-tint); }
.notif-dot{ width:7px; height:7px; border-radius:50%; flex:none; margin-top:5px; }
.notif-dot.crit{ background:var(--crit); }
.notif-dot.warn{ background:var(--warn); }
.notif-dot.ok{ background:var(--accent); }
.notif-item-body{ flex:1; min-width:0; }
.notif-item-text{ font-size:14.5px; line-height:1.4; }
.notif-item-time{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.notif-item-clear{
  flex:none; width:22px; height:22px; border-radius:6px; border:0; background:none; color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .12s;
}
.notif-item:hover .notif-item-clear, .notif-item-clear:focus-visible{ opacity:1; }
.notif-item-clear:hover{ background:var(--crit-tint); color:var(--crit); }
.notif-item-clear svg{ width:12px; height:12px; }
.notif-empty{ padding:26px 16px; text-align:center; font-size:14px; color:var(--muted); }
.notif-panel-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; border-top:1px solid var(--border); background:var(--surface-2);
}
.notif-clear-all, .notif-view-all{
  background:none; border:0; padding:0; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.notif-clear-all{ color:var(--muted); }
.notif-clear-all:hover{ color:var(--crit); text-decoration:underline; }
.notif-clear-all[disabled]{ opacity:.45; cursor:not-allowed; text-decoration:none; }
.notif-view-all{ color:var(--primary); }
.notif-view-all:hover{ text-decoration:underline; }
@media (max-width:520px){
  .notif-panel{ position:fixed; right:16px; left:16px; width:auto; top:64px; }
}

/* ---------- Guards & Sites: section tabs, toolbars ---------- */
.gs-tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:14px; }
.gs-tab{ appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:9px 14px; font:600 14.5px var(--font-body); color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:7px; }
.gs-tab:hover{ color:var(--ink); }
.gs-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }
.gs-count{ font:600 12.5px var(--font-num); background:var(--surface-2); color:var(--muted); border-radius:10px; padding:1px 7px; }
.gs-tab.active .gs-count{ background:var(--primary-tint); color:var(--primary-ink); }
.gs-intro{ font-size:14.5px; color:var(--muted); margin:0 0 12px; line-height:1.55; max-width:900px; }
.gs-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.gs-toolbar input[type=search], .gs-toolbar select{ font-size:14px; padding:6px 9px; }
[data-gs-panel] form.card{ margin-bottom:12px; border-left:3px solid var(--primary); }
@media (max-width:700px){ .gs-tab{ padding:8px 9px; font-size:13.5px; } .gs-toolbar input[type=search]{ max-width:none !important; flex:1 1 100%; } }

/* ---------- Attendance: monthly calendar ---------- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cal-head b{ font-size:15px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.cal-day, .cal-dow{ min-width:0; overflow:hidden; }
.cal-dow{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:center; padding:2px 0; }
.cal-day{ min-height:44px; border-radius:7px; padding:4px 5px; font-size:13.5px; border:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; justify-content:space-between; cursor:default; }
.cal-day .n{ font:600 14px var(--font-num); }
.cal-day .s{ font-size:12px; font-weight:700; letter-spacing:.03em; }
.cal-day.present{ background:var(--accent-tint); border-color:transparent; color:var(--accent); }
.cal-day.late{ background:var(--warn-tint); border-color:transparent; color:var(--warn); }
.cal-day.absent{ background:var(--crit-tint); border-color:transparent; color:var(--crit); }
.cal-day.leave{ background:var(--primary-tint); border-color:transparent; color:var(--primary-ink); }
.cal-day.holiday{ background:var(--surface-2); border:1px dashed var(--warn); color:var(--warn); }
.cal-day.off{ background:var(--surface-2); border-color:transparent; color:var(--muted); }
.cal-day.upcoming{ color:var(--muted); }
.cal-day.none{ opacity:.35; }
.cal-day.today{ box-shadow:0 0 0 2px var(--primary); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:13.5px; }
.cal-legend span{ display:flex; align-items:center; gap:5px; }
.cal-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; }

/* ---------- "Are you sure?" dialog (GO.confirm) ---------- */
.go-modal{ position:fixed; inset:0; background:rgba(15,23,32,.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.go-modal-box{ background:var(--surface); color:var(--ink); border-radius:12px; max-width:420px; width:100%; padding:20px 22px; box-shadow:0 18px 50px rgba(0,0,0,.25); }
.go-modal-title{ font-weight:700; font-size:17px; margin-bottom:8px; }
.go-modal-msg{ font-size:15px; line-height:1.55; color:var(--muted); white-space:pre-line; }
.go-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.btn.primary.danger{ background:var(--crit); border-color:var(--crit); }

/* ---------- Date fields shown as dd-mm-yyyy (GO.enhanceDates) ---------- */
.dmy-wrap{ position:relative; display:inline-flex; align-items:center; width:100%; vertical-align:middle; }
.dmy-wrap .dmy-text{ width:100%; padding-right:30px; font-family:var(--font-num); }
.dmy-wrap .dmy-text.dmy-bad{ border-color:var(--crit); }
.dmy-wrap .dmy-native{ position:absolute; left:0; bottom:0; width:100%; height:100%; opacity:0; pointer-events:none; border:0; padding:0; }
.dmy-wrap .dmy-btn{ position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:0; padding:3px; color:var(--muted); cursor:pointer; display:flex; }
.dmy-wrap .dmy-btn:hover{ color:var(--primary); }
.dmy-wrap .dmy-btn:disabled{ opacity:.4; cursor:default; }

/* Incident status history (who changed it, when, comment) */
.inc-history{margin-top:9px;border-left:2px solid var(--border);padding-left:9px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;}
.inc-hist-row.closed{border-left:2px solid var(--ok,#1f9d55);margin-left:-11px;padding-left:9px;}
.inc-hist-note{font-style:italic;color:var(--ink);margin-top:2px;}

/* Profile pictures */
img.avatar-img{object-fit:cover;border-radius:8px;display:block;background:var(--surface-2);}
.pf-avatar{flex:none;display:flex;flex-direction:column;align-items:center;}
.link-btn{background:none;border:0;padding:0;font-size:13px;color:var(--primary);cursor:pointer;text-decoration:underline;}
.who-cell{display:flex;align-items:center;gap:8px;}

/* Profile: Save button stays in reach while scrolling (phones especially) */
#pfSaveBar:not([hidden]){position:sticky;bottom:0;z-index:5;background:var(--paper);padding:10px 84px 10px 0;border-top:1px solid var(--border);margin-top:4px;}

/* ---------- Guard Tracking ---------- */
.tr-layout{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:900px){ .tr-layout{ grid-template-columns:minmax(0,1fr); } }
.tr-map-card{ overflow:hidden; padding:0; }
.tr-map{ height:460px; width:100%; background:var(--surface-2); }
@media (max-width:640px){ .tr-map{ height:340px; } }
.tr-guard{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; border-bottom:1px solid var(--border); padding:9px 12px; text-align:left; cursor:pointer; color:var(--ink); font:inherit; }
.tr-guard:last-child{ border-bottom:0; }
.tr-guard:hover{ background:var(--surface-2); }
.tr-guard-txt{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:14.5px; }
.tr-guard-txt span{ font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-guard .pill{ flex:none; font-size:12px; }
.tr-stats{ grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:0; }
@media (max-width:1000px){ .tr-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .tr-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tr-replay{ display:flex; align-items:center; gap:10px; padding:8px 12px; margin-top:10px; }
.tr-replay input[type=range]{ flex:1; accent-color:var(--primary); }
.tr-replay .btn{ padding:4px 12px; }
.tr-replay .mono{ font-size:13.5px; white-space:nowrap; }
.tr-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--muted); margin-top:8px; }
.tr-legend i{ display:inline-block; width:14px; height:4px; border-radius:2px; vertical-align:middle; margin-right:5px; }
.tr-legend i.ring{ width:10px; height:10px; border-radius:50%; border:2px solid; background:none; }
.tr-bar{ display:grid; grid-template-columns:52px 1fr 44px; align-items:center; gap:8px; font-size:13px; margin:5px 0; }
.tr-bar b{ text-align:right; font-weight:600; }
.tr-tl{ display:flex; align-items:center; gap:9px; padding:7px 12px; border-bottom:1px solid var(--border); font-size:14px; }
.tr-tl:last-child{ border-bottom:0; }
.tr-tl .mono{ font-size:13px; color:var(--muted); width:64px; flex:none; }
.track-chip{ font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--accent-tint); color:var(--accent); white-space:nowrap; }
.track-chip.denied{ background:var(--crit-tint); color:var(--crit); }
@media (max-width:520px){ .track-chip{ font-size:12px; padding:2px 7px; } }

/* Designations (Roles & Permissions) */
.desig-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; margin:0 0 10px; }
.desig-chip{ display:flex; flex-direction:column; gap:4px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); font-size:14.5px; min-width:0; }
.desig-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
.desig-name{ min-width:0; overflow-wrap:anywhere; }
.desig-actions{ display:flex; gap:4px; flex:none; }
.desig-actions .btn{ font-size:12.5px; padding:3px 8px; }
.desig-signin select{ display:block; width:100%; max-width:100%; font-size:13px; padding:3px 6px; margin:3px 0; }
.desig-chip .hint{ font-size:13px; }

/* Phone alarm switch (top bar) */
.alarm-chip{ font:inherit; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:20px; border:1px solid var(--warn); background:var(--warn-tint); color:var(--warn); cursor:pointer; white-space:nowrap; }
.alarm-chip[data-state="on"]{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent); }
.alarm-chip[data-state="blocked"]{ border-color:var(--crit); background:var(--crit-tint); color:var(--crit); }
@media (max-width:520px){ .alarm-chip{ font-size:12px; padding:3px 7px; } }

/* Patrol history */
.hist-filters{ padding:12px 14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; align-items:end; }
.hist-filters .field{ margin:0; }
.hist-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.hist-stats{ grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:0; }
@media (max-width:700px){ .hist-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hist-table td{ vertical-align:top; font-size:14.5px; }
.hist-table tr.hist-missed td:first-child{ box-shadow:inset 3px 0 0 var(--crit); }
.hist-table tr.hist-late td:first-child{ box-shadow:inset 3px 0 0 var(--warn); }
/* Phones: each row becomes a small card */
@media (max-width:640px){
  .hist-table thead{ display:none; }
  .hist-table, .hist-table tbody, .hist-table tr, .hist-table td{ display:block; width:100%; }
  .hist-table tr{ border-bottom:1px solid var(--border); padding:8px 4px; }
  .hist-table td{ border:0 !important; padding:3px 8px; }
  .hist-table td[data-l]::before{ content:attr(data-l); display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
  .hist-table tr.hist-missed td:first-child, .hist-table tr.hist-late td:first-child{ box-shadow:none; }
  .hist-table tr.hist-missed{ box-shadow:inset 3px 0 0 var(--crit); }
  .hist-table tr.hist-late{ box-shadow:inset 3px 0 0 var(--warn); }
}

/* Status boxes only show when they have something to say */
.note:empty{ display:none; }

/* Phones with large text settings: long headings, names and times wrap instead of pushing the page sideways */
.section-head{ flex-wrap:wrap; row-gap:4px; }
.section-head > *{ min-width:0; }
.main{ min-width:0; overflow-x:clip; }
.cp-meta, .incident-meta, .guard-site, .hint{ overflow-wrap:anywhere; }
img, video, canvas{ max-width:100%; }

/* Phones: a shorter top bar — the page description is hidden, the page title stays */
@media (max-width:640px){
  .topbar-title .desc{ display:none; }
  .topbar-title h1{ font-size:20px; }
}

/* ---------- Settings (gear) ---------- */
.settings-btn{ position:relative; width:40px; height:40px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer; }
.settings-btn svg{ width:21px; height:21px; }
.settings-dot{ position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%; background:var(--crit); border:2px solid var(--surface); }
.sheet-overlay{ position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:flex-end; }
.sheet-overlay[hidden]{ display:none; }
.sheet{ background:var(--surface); width:min(420px,100%); height:100%; overflow-y:auto; padding:18px 18px 28px; box-shadow:var(--shadow); }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sheet-head h2{ margin:0; font-size:22px; }
.sheet-close{ width:40px; height:40px; }
.sheet-close svg{ width:20px; height:20px; }
.sheet-user{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--radius); background:var(--surface-2); margin-bottom:16px; }
.sheet-user-name{ font-weight:700; font-size:17px; }
.sheet-user-role{ font-size:14px; color:var(--muted); }
.set-group{ margin-bottom:16px; }
.set-label{ display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.lang-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lang-btn{ font:inherit; font-size:16px; padding:12px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; text-align:center; }
.lang-btn.active{ border-color:var(--primary); background:var(--primary-tint); color:var(--primary-ink); font-weight:700; }
.set-group select{ width:100%; font-size:16px; padding:11px 12px; }
.set-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:14px 12px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; }
.set-icon{ font-size:22px; flex:none; }
.set-name{ font-weight:700; font-size:16px; }
.set-status{ font-size:14.5px; color:var(--muted); margin-top:2px; }
.set-row[data-tone="ok"] .set-status{ color:var(--accent); }
.set-row[data-tone="warn"] .set-status{ color:var(--warn); }
.set-row[data-tone="crit"] .set-status{ color:var(--crit); }
.set-row[data-tone="crit"], .set-row[data-tone="warn"]{ border-color:currentColor; }
.set-row > div:nth-child(2){ flex:1 1 170px; }
.set-action{ flex:none; padding:9px 14px; font-size:15px; margin-left:auto; }
.set-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.set-links .btn{ padding:11px 16px; font-size:15px; }
.set-logout{ color:var(--crit); }
body.sheet-open{ overflow:hidden; }
.alarm-chip, .track-chip{ display:none !important; }   /* replaced by Settings */

/* ---------- Phone header: menu · title · bell · gear ---------- */
@media (max-width:760px){
  .topbar{ flex-wrap:nowrap; gap:10px; padding:10px 12px; }
  .topbar-title{ min-width:0; flex:1; }
  .topbar-title > div{ min-width:0; }
  .topbar-title h1{ font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-title .desc{ display:none; }
  .topbar-right{ flex-wrap:nowrap; gap:8px; }
  .topbar-right > #langSelect, .topbar-right > #siteFilter, .topbar-right > .clock{ display:none; }
  .sheet-overlay{ align-items:flex-end; }
  .sheet{ width:100%; height:auto; max-height:92vh; border-radius:18px 18px 0 0; }
}

/* ---------- Tables on phones: each row becomes a card with labels ---------- */
@media (max-width:640px){
  table.stack thead{ display:none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td{ display:block; width:100%; }
  table.stack tr{ padding:10px 14px; border-bottom:1px solid var(--border); }
  table.stack tr:last-child{ border-bottom:0; }
  table.stack td{ border:0 !important; padding:6px 0 !important; text-align:left !important; display:flow-root;
    font-size:15px; overflow-wrap:anywhere; }
  table.stack td[data-label]{ display:grid !important; grid-template-columns:36% minmax(0,1fr); column-gap:4%; align-items:start; }
  table.stack td[data-label] > .cv{ min-width:0; overflow-wrap:anywhere; }
  table.stack td[data-label]::before{ content:attr(data-label); padding-top:2px;
    font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; line-height:1.3; }
  table.stack td[data-full], table.stack td:not([data-label]){ padding-left:0 !important; }
  table.stack td[data-empty]{ display:none; }
  table.stack td select, table.stack td input[type=text]{ width:100% !important; max-width:100% !important; }
  table.stack td .pill{ white-space:normal; }
  table.stack td, table.stack td .cv{ white-space:normal !important; }
  table.stack td:first-child{ font-weight:700; }
  .table-wrap{ overflow-x:visible; }
  .roster-wrap{ overflow-x:auto; }
  .roster-grid th:first-child, .roster-grid td:first-child{ position:sticky; left:0; background:var(--surface); z-index:1; }
}

/* Phones: controls inside checkpoint rows and the alert-channel grid stay inside the screen */
.checkpoint select, .cp-body select, #routeHint select{ max-width:100% !important; min-width:0; }
@media (max-width:640px){
  .checkpoint{ flex-wrap:wrap; }
  .cp-body{ flex:1 1 200px; }
  .notif-grid{ grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr)) !important; font-size:13px; gap:8px 4px !important; }
  .notif-grid .nh{ font-size:10.5px; letter-spacing:0; overflow-wrap:anywhere; }
}
.stat{ min-width:0; }
.stat .label{ overflow-wrap:anywhere; }

/* Long status lines (pills) wrap instead of running off the screen */
.pill{ max-width:100%; }
@media (max-width:760px){
  .pill{ white-space:normal; line-height:1.35; }
  .content, .content > *, .card, .grid > *, .two-col > *, .tr-layout > *{ min-width:0; max-width:100%; }
  .content input, .content select, .content textarea{ max-width:100%; }
  .cal-day{ padding:3px; font-size:12.5px; }
  .cal-day{ min-height:40px; justify-content:center; align-items:center; }
  .cal-day .n{ font-size:15px; }
  .cal-day .s{ display:none; }            /* colour + legend below say the status */
  .cal-legend{ font-size:14px; }
}
@media (max-width:760px){
  .desig-chip select{ max-width:100%; }
}
@media (max-width:760px){
  .pill{ border-radius:12px; align-items:flex-start; }
  .pill .dot{ margin-top:6px; flex:none; }
  table.stack td .hint{ font-weight:500; }
  .content{ padding-bottom:110px !important; }      /* room so the SOS button never covers the last row */
}

/* Side menu on phones: fits the visible screen (iPhone Safari bar / home bar) so the bottom buttons are reachable */
.rail{ height:100vh; height:100dvh; }
.rail-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:860px){
  .rail{ top:0; bottom:0; height:100dvh; max-height:-webkit-fill-available; overflow:hidden; }
  .rail nav, .rail .rail-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; }
  .rail-foot{ flex:none; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* Holiday = yellow (Late stays orange) */
:root{ --holiday:#c99a06; --holiday-tint:#fdf3c4; }
.cal-day.holiday{ background:var(--holiday-tint); border:1px dashed var(--holiday); color:#8a6a00; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --holiday:#f2c94c; --holiday-tint:rgba(242,201,76,.16); } :root:not([data-theme="light"]) .cal-day.holiday{ color:#f2c94c; } }
:root[data-theme="dark"]{ --holiday:#f2c94c; --holiday-tint:rgba(242,201,76,.16); }
:root[data-theme="dark"] .cal-day.holiday{ color:#f2c94c; }

/* Settings sheet buttons are buttons, not links */
.sheet a.btn, .sheet a.btn:hover{ text-decoration:none; }

/* Menu footer: Settings and Log out look and behave like the menu items above */
.rail-actions{ display:flex; flex-direction:column; gap:2px; margin:10px -6px 0; }
.rail-actions form{ margin:0; }
.rail-actions .rail-btn{ width:100%; position:relative; font:inherit; font-size:15px; font-weight:500; color:var(--rail-muted); }
.rail-actions .rail-btn:hover{ background:var(--rail-hover); color:var(--rail-ink); }
.rail-actions .rail-logout:hover{ background:rgba(209,67,67,.22); color:#fff; }
.rail-actions .settings-dot{ position:static; margin-left:auto; }
.hamburger{ position:relative; }
.hamburger .settings-dot{ top:3px; right:3px; }

/* Phones: one standard button size everywhere (easy to tap, easy to read) */
@media (max-width:760px){
  .btn{ min-height:44px; padding:9px 16px !important; font-size:15px !important; border-radius:9px; justify-content:center; }
  .btn svg{ width:16px; height:16px; }
  .icon-btn{ width:40px; height:40px; border-radius:9px; }
  .icon-btn svg{ width:16px; height:16px; }
  .rail-btn{ min-height:46px; }
}

/* Password / PIN boxes with the eye button */
.pw-wrap{ position:relative; display:block; width:100%; }
.pw-wrap input{ width:100%; padding-right:48px !important; }
.pw-eye{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px; }
.pw-eye:hover{ color:var(--ink); background:var(--surface-2); }
.pw-eye svg{ width:20px; height:20px; }

/* Date range picker (Dashboard charts, Check-in photos): From | To, then preset | Show */
.range-bar{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:12px; align-items:end; }
.range-field{ display:flex; flex-direction:column; gap:5px; min-width:0; margin:0; }
.range-field > span{ font-size:13px; font-weight:600; color:var(--muted); }
.range-field input, .range-field .dmy-wrap, .range-field select{ width:100%; }
.range-bar .btn{ justify-content:center; width:100%; min-height:40px; }
.range-bar.wide{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; }
.range-bar.wide .btn{ width:auto; padding-left:22px; padding-right:22px; }
@media (max-width:760px){
  .range-bar.wide{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .range-bar.wide .range-field.span2, .range-bar.wide .btn{ grid-column:1 / -1; width:100%; }
}

/* Attendance: shift filter chips */
.shift-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.shift-chips:empty{ display:none; }
.shift-chip{ font:inherit; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:8px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; min-height:44px; text-align:left; }
.shift-chip b{ font-size:14.5px; }
.shift-chip span{ font-size:12.5px; color:var(--muted); font-weight:500; }
.shift-chip:hover{ background:var(--surface-2); }
.shift-chip.active{ border-color:var(--primary); background:var(--primary-tint); color:var(--primary-ink); }

/* Attendance: photo thumbnails in the roster and the check-in photo log */
.ci-cell{ display:inline-flex; align-items:center; gap:8px; }
.ph-thumb{ padding:0; border:1px solid var(--border); border-radius:7px; overflow:hidden; width:34px; height:34px; flex:none; cursor:zoom-in; background:var(--surface-2); }
.ph-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:16px; }
.ph-card{ border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--surface); min-width:0; }
.ph-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.ph-head b{ font-size:15px; }
.ph-head-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ph-head .ph-date{ font-size:13px; color:var(--ink); font-weight:600; background:var(--surface-2); padding:2px 8px; border-radius:6px; }
.ph-head span{ font-size:13px; color:var(--muted); }
.ph-head em{ font-style:normal; color:var(--warn); font-weight:600; }
.ph-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ph-shot{ min-width:0; }
.ph-img{ display:block; width:100%; aspect-ratio:3/4; padding:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface-2); cursor:zoom-in; }
.ph-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-none{ display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--muted); cursor:default; }
.ph-time{ display:flex; justify-content:space-between; gap:6px; margin-top:6px; font-size:13px; color:var(--muted); }
.ph-time b{ color:var(--ink); }
.ph-time{ flex-wrap:wrap; }
.ph-time small{ flex-basis:100%; font-size:12.5px; color:var(--muted); }
.ph-lightbox{ position:fixed; inset:0; z-index:3000; background:rgba(10,14,20,.86); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px; }
.ph-lightbox figure{ margin:0; max-width:min(92vw, 520px); text-align:center; }
.ph-lightbox img{ max-width:100%; max-height:72vh; border-radius:10px; display:block; margin:0 auto; }
.ph-lightbox figcaption{ color:#fff; font-size:15px; margin-top:10px; }
@media (max-width:640px){ .photo-grid{ grid-template-columns:minmax(0,1fr); } }

/* Maps keep their layers inside the map box, so the menu, Settings and pop-ups always sit on top */
.tr-map, .tr-map-card, .leaflet-container{ position:relative; z-index:0; isolation:isolate; }

/* Site cards: the state stays on one line as a tag next to (or under) the site name */
.ov-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:6px 10px; flex-wrap:wrap; }
.ov-head h3{ font-size:16px; margin:0; flex:1 1 140px; min-width:0; overflow-wrap:break-word; }
.ov-state{ flex:none; white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--border); border-radius:99px; padding:2px 10px; }
.ph-time{ flex-direction:column; gap:1px; }
@media (max-width:760px){
  .cp-actions{ flex-wrap:wrap; justify-content:flex-end; gap:6px; min-width:0; max-width:100%; }
}
/* Login on small phones: the product name is never cut; the language picker moves under it if needed */
@media (max-width:420px){
  .login-top{ flex-wrap:wrap; }
  .login-brand{ flex:1 1 auto; }
  .login-brand .word{ white-space:normal; overflow:visible; font-size:22px; }
}

/* ---------- Compliance (PSARA) ---------- */
.cmp-license{ padding:16px 18px; margin-bottom:16px; border-left:3px solid var(--primary); background:var(--primary-tint); }
.cmp-lic-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cmp-lic-head svg{ width:18px; height:18px; color:var(--primary-ink); flex:none; }
.cmp-lic-head h3{ margin:0; font-size:15px; color:var(--primary-ink); }
.cmp-lic-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px; }
.cmp-lic-grid span{ display:block; font-size:13px; color:var(--muted); }
.cmp-lic-grid b{ font-size:15.5px; overflow-wrap:anywhere; }
.cmp-bar{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid var(--border); }
.cmp-bar .gs-tabs{ border-bottom:0; }
.cmp-bar .btn{ margin-bottom:8px; }
.cmp-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.cmp-filter{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-btn{ font:inherit; font-size:14px; font-weight:600; padding:7px 13px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; min-height:38px; }
.chip-btn:hover{ background:var(--surface-2); }
.chip-btn.active{ background:var(--primary-tint); border-color:var(--primary); color:var(--primary-ink); }
.cmp-table td{ vertical-align:top; }
.cmp-table input[type=text], .cmp-table select, .cmp-table .dmy-wrap{ width:100%; min-width:120px; }
.cmp-pair{ display:grid; gap:6px; min-width:150px; }
.cmp-reg-head{ margin-bottom:6px; }
.cmp-reg-head h2{ margin:0 0 4px; }
.cmp-reg-head p{ margin:2px 0; }
@keyframes cmpSaved{ from{ box-shadow:0 0 0 3px var(--accent); } to{ box-shadow:0 0 0 3px transparent; } }
.cmp-saved, .cmp-saved + .dmy-text, .dmy-wrap:has(.cmp-saved) .dmy-text{ animation:cmpSaved 1.2s ease-out; }
.cmp-bad, .dmy-wrap:has(.cmp-bad) .dmy-text{ border-color:var(--crit) !important; }
@media (max-width:760px){
  .cmp-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cmp-lic-grid{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .cmp-bar{ border-bottom:0; }
  .cmp-bar .btn{ width:100%; }
  .cmp-table input[type=text], .cmp-table select, .cmp-table .dmy-wrap{ min-width:0; }
  .cmp-pair{ min-width:0; }
}
@media print{
  body.printing-register *{ visibility:hidden !important; }
  body.printing-register #cmpRegister, body.printing-register #cmpRegister *{ visibility:visible !important; }
  body.printing-register #cmpRegister{ position:absolute; left:0; top:0; width:100%; }
  body.printing-register .no-print, body.printing-register .dmy-btn, body.printing-register .sos-fab{ display:none !important; }
  body.printing-register #cmpRegister input, body.printing-register #cmpRegister select{ border:0 !important; background:none !important; padding:0 !important; -webkit-appearance:none; appearance:none; color:#000 !important; }
  body.printing-register #cmpRegister .card{ box-shadow:none; border:1px solid #999; }
  body.printing-register #cmpRegister table{ font-size:11px; }
  body.printing-register #cmpRegister th, body.printing-register #cmpRegister td{ padding:4px 6px; border:1px solid #bbb; }
}
.sa-psara{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); }
@media (max-width:760px){ .sa-psara{ grid-template-columns:minmax(0,1fr); } }
.cmp-table input[data-field="psaraId"]{ min-width:190px; }
@media (max-width:760px){ .cmp-table input[data-field="psaraId"]{ min-width:0; } }
.cmp-register .cmp-table input[type=text], .cmp-register .cmp-table select{ min-width:96px; }
.cmp-register .cmp-table .dmy-wrap{ min-width:136px; }
.cmp-register .cmp-table input[data-field="salary"]{ min-width:80px; }
.cmp-register .cmp-table th, .cmp-register .cmp-table td{ padding-left:8px; padding-right:8px; }
@media (max-width:760px){ .cmp-register .cmp-table input[type=text], .cmp-register .cmp-table select, .cmp-register .cmp-table .dmy-wrap{ min-width:0; } }

/* Offline attendance */
.offline-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.offline-row .hint{ flex:1 1 220px; }
.checkin-head{ align-items:center; flex-wrap:nowrap; }
.checkin-head > div{ min-width:0; }
.checkin-head .hint{ display:block; margin-top:2px; }
.checkin-head .pill{ flex:none; }
.offline-banner{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; border-radius:10px;
  background:var(--warn-tint); color:var(--warn); font-weight:600; margin-bottom:14px; border-left:3px solid var(--warn); }
.offline-banner[hidden]{ display:none; }

/* Patrol: posts and their guards */
.post-bar{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-bottom:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.post-bar:empty{ display:none; }
.post-label{ font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; width:100%; }
.post-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; }
.post-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 10px; border-radius:99px; background:var(--surface-2); font-size:14px; font-weight:600; max-width:100%; }
.post-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
.post-chip.on .dot{ background:var(--accent); }
.post-chip small{ color:var(--accent); font-weight:600; }
.post-chip button{ border:0; background:none; color:var(--muted); cursor:pointer; width:24px; height:24px; display:inline-grid; place-items:center; border-radius:50%; }
.post-chip button:hover{ background:var(--crit-tint); color:var(--crit); }
.post-chip button svg{ width:12px; height:12px; }
.post-add{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; width:100%; }
.post-add select{ flex:1 1 200px; width:auto; min-width:0; }
.post-tools{ display:flex; gap:6px; flex-wrap:wrap; }
.post-new{ padding:14px; margin-bottom:10px; display:grid; gap:10px; }
.post-new[hidden]{ display:none; }
.post-new-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.section-head .btn.ghost#btnNewPost{ margin-left:auto; }

/* Profile: past experience */
.exp-edit{ display:grid; gap:12px; }
.exp-row{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr); gap:8px; padding-bottom:12px; border-bottom:1px dashed var(--border); }
.exp-row .field{ margin:0; }
.exp-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.exp-list{ display:grid; gap:10px; }
.exp-item{ display:grid; gap:2px; padding:10px 12px; border-radius:8px; background:var(--surface-2); }
.exp-item span{ color:var(--muted); font-size:14px; }
@media (max-width:760px){ .exp-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .exp-row .field:nth-child(-n+2){ grid-column:1 / -1; } }

/* Incidents: type filter and lost & found tag */
.inc-filter{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.lf-tag{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0; font-size:14.5px; }
.lf-only[hidden]{ display:none; }
.pill.info{ background:var(--primary-tint); color:var(--primary-ink); }
.pill.info .dot{ background:var(--primary); }

/* Area overview */
.area-kpis{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-bottom:8px; }
.area-kpis .value small{ font-size:16px; color:var(--muted); font-weight:600; }
.area-cities{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.area-cities:empty{ display:none; }
.area-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap:14px; }
.area-site{ padding:14px 16px; border-left:4px solid var(--accent); display:grid; gap:10px; min-width:0; }
.area-site.warn{ border-left-color:var(--warn); }
.area-site.crit{ border-left-color:var(--crit); }
.area-site-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.area-site-head h3{ margin:0; font-size:17px; }
.area-sup{ font-size:14px; overflow-wrap:anywhere; }
.area-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.area-tile{ display:grid; gap:1px; padding:8px 10px; border-radius:8px; background:var(--surface-2); text-decoration:none; color:inherit; min-width:0; }
a.area-tile:hover{ outline:1px solid var(--primary); }
.area-tile span{ font-size:12.5px; color:var(--muted); }
.area-tile b{ font-size:17px; font-variant-numeric:tabular-nums; }
.area-tile small{ font-size:12.5px; }
@media (max-width:1100px){ .area-kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){ .area-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } .area-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cmp-date-note{ font-size:12px; color:var(--muted); margin-top:-3px; }
.cmp-files{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.cmp-file{ display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:14px; text-decoration:none; color:var(--primary); }
.cmp-file svg, .cmp-up svg{ width:14px; height:14px; }
.cmp-up{ font-size:13.5px; padding:5px 10px; min-height:34px; }

/* CSV buttons (Import / Export / Sample CSV) */
.csv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.csv-bar .csv-label { font-weight: 600; font-size: 14px; color: var(--muted); margin-right: 4px; }
.csv-bar .btn svg { width: 16px; height: 16px; }
.csv-bar .csv-note { flex-basis: 100%; margin: 2px 0 0; overflow-wrap: anywhere; }
.csv-bar .csv-note.bad { border-left: 3px solid var(--crit); }
@media (max-width: 560px) { .csv-bar .btn { flex: 1 1 auto; justify-content: center; } }
.csv-bar.csv-inline { display: inline-flex; margin: 0; }
.cmp-lic-form{ align-items:start; }
.cmp-lic-form .field{ margin:0; }
.cmp-lic-actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cmp-lic-actions .note{ margin:0; }
@media (max-width: 720px){ .cmp-lic-grid{ grid-template-columns:1fr; } }

/* Check-in photos screen */
.ph-filter{ padding:14px 16px; display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin-bottom:6px; }
.ph-filter .range-field{ min-width:0; flex:1 1 220px; }
.ph-month{ display:flex; gap:6px; align-items:center; }
.ph-month select{ flex:1; min-width:0; }
.ph-month .btn{ padding:8px 14px; font-size:18px; line-height:1; flex:none; }
.ph-summary{ flex-basis:100%; font-weight:600; color:var(--muted); }
.ph-day{ margin-top:18px; }
.ph-day-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ph-day-head h3{ margin:0; font-size:16px; }
.ph-day .photo-grid{ margin-top:10px; }
.ph-kept{ flex-basis:100%; margin-top:-6px; }
.ph-summary:empty{ display:none; }
/* Check-in photos: little month calendar beside the photos */
.ph-layout{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; align-items:start; margin-top:12px; }
.ph-layout .ph-day:first-child{ margin-top:0; }
.ph-cal{ padding:14px; position:sticky; top:12px; }
.ph-cal-title{ font-weight:700; font-size:15px; margin-bottom:8px; }
.ph-cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.ph-cal-wd{ font-size:11.5px; font-weight:600; color:var(--muted); text-align:center; padding-bottom:2px; }
.ph-cal-cell{ position:relative; aspect-ratio:1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font:inherit; border:1px solid transparent; background:transparent; padding:0; color:var(--muted); min-width:0; }
.ph-cal-cell b{ font-size:13.5px; font-weight:600; }
.ph-cal-cell i{ font-style:normal; font-size:10.5px; font-weight:700; line-height:1; color:var(--primary-ink); }
.ph-cal-cell.empty{ visibility:hidden; }
.ph-cal-cell.future{ opacity:.45; }
.ph-cal-cell.today{ border-color:var(--border); }
button.ph-cal-cell.has{ background:var(--primary-tint); color:var(--ink); cursor:pointer; }
button.ph-cal-cell.has:hover{ border-color:var(--primary); }
button.ph-cal-cell.on{ background:var(--primary); color:#fff; }
button.ph-cal-cell.on i{ color:#fff; }
.ph-cal-foot{ margin-top:10px; font-size:13px; }
.ph-cal-foot .btn{ width:100%; justify-content:center; }
@media (max-width: 900px){
  .ph-layout{ grid-template-columns:1fr; }
  .ph-cal{ position:static; max-width:420px; width:100%; }
}

/* Site picker (Area Officer / Site Manager sites): search + tick boxes */
.site-picker{ border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:10px; max-width:640px; }
.site-picker-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.site-picker-bar input{ flex:1 1 200px; min-width:0; }
.site-picker-bar .btn{ padding:6px 12px; font-size:13.5px; }
.site-picker-list{ max-height:240px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:4px 12px; }
.site-picker-list label{ display:flex; align-items:flex-start; gap:8px; padding:7px 6px; border-radius:8px; cursor:pointer; font-size:14.5px; min-width:0; }
.site-picker-list label:hover{ background:var(--surface-2); }
.site-picker-list label[hidden]{ display:none; }
.site-picker-list input{ width:18px; height:18px; margin-top:2px; accent-color:var(--primary); flex:none; }
.site-picker-list span{ min-width:0; overflow-wrap:anywhere; }
.site-picker-list small{ display:block; color:var(--muted); font-size:12.5px; }
.site-picker-count{ margin-top:6px; font-size:13px; }
.post-cover{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; font-weight:600; }
.post-cover .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.post-cover.ok{ color:var(--accent); }
.post-cover.crit{ color:var(--crit); }
@media (min-width:1300px){ .stat-row{ grid-template-columns:repeat(7, minmax(0,1fr)); } }
@media (min-width:1001px) and (max-width:1299px){ .stat-row{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.site-picker .site-picker-list label{ text-transform:none; letter-spacing:normal; font-size:14.5px; font-weight:400; color:var(--ink); margin:0; }
.site-picker .site-picker-list label b{ font-weight:600; }
.site-picker .site-picker-list small{ text-transform:none; letter-spacing:normal; font-weight:400; }

/* Rights per person: tick boxes (Add Employee form and the Permissions window) */
.perm-pick-field{ margin-top:12px; }
.perm-pick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px 18px; margin-top:8px; }
.perm-pick-group{ min-width:0; }
.perm-pick-title{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:2px 0 4px; }
label.perm-pick-row{ display:flex; align-items:flex-start; gap:8px; padding:6px 6px; border-radius:7px; font-size:14.5px; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--ink); cursor:pointer; margin:0; }
label.perm-pick-row:hover{ background:var(--surface-2); }
label.perm-pick-row input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--primary); }
label.perm-pick-row span{ min-width:0; overflow-wrap:anywhere; }
label.perm-pick-row em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--warn); background:var(--warn-tint); border-radius:10px; padding:1px 7px; margin-left:auto; flex:none; }
label.perm-pick-row.changed{ background:var(--warn-tint); }
.perm-modal{ max-width:760px; width:calc(100vw - 32px); max-height:calc(100vh - 40px); overflow-y:auto; }
.perm-modal .perm-pick{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.icon-btn.perm-custom{ color:var(--warn); border-color:var(--warn); position:relative; }
.icon-btn.perm-custom i{ position:absolute; top:-6px; right:-6px; font-style:normal; font-size:10px; font-weight:700; background:var(--warn); color:#fff; border-radius:8px; padding:0 4px; line-height:14px; }
.cp-name .cp-who{ font-weight:500; color:var(--muted); font-size:.9em; }

/* ---------- Laptop / desktop: compact (phones keep the large, easy-to-tap sizes above) ---------- */
@media (min-width:1024px){
  body{ font-size:14px; line-height:1.5; }
  .rail{ width:216px; }
  .rail-brand{ padding:12px 14px; }
  .brand-mark{ width:30px; height:30px; font-size:14px; }
  .rail-brand .word{ font-size:16.5px; }
  .rail-brand .sub{ font-size:10.5px; }
  .rail-nav{ padding:8px; }
  .rail-btn{ font-size:13.5px; padding:7px 10px; gap:9px; }
  .rail-btn svg{ width:15px; height:15px; }
  .rail-user{ font-size:13px; }
  .rail-user-role{ font-size:11px; }
  .topbar{ padding:10px 22px; }
  .topbar-title h1{ font-size:17px; }
  .topbar-title .desc{ font-size:12.5px; }
  .site-select, .topbar-right > select{ font-size:13px; padding:5px 8px; }
  .content{ padding:18px 22px 48px; max-width:1280px; }
  .section-head{ margin:20px 0 9px; }
  .section-head h2{ font-size:15px; }
  .hint{ font-size:12.5px; }
  .btn{ font-size:13px; padding:6px 11px; }
  label{ font-size:11.5px; }
  input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=password], input:not([type]), input[type=date], input[type=time], input[type=month], select, textarea{ font-size:13.5px; padding:6px 9px; }
  table{ font-size:13.5px; }
  th{ font-size:11px; padding:7px 10px; }
  td{ padding:7px 10px; }
  .pill{ font-size:12px; padding:2px 8px; }
  .stat{ padding:11px 13px; gap:4px; }
  .stat .label{ font-size:11px; }
  .stat .value{ font-size:24px; }
  .stat .value small{ font-size:13.5px; }
  .stat .delta{ font-size:12px; }
  .checkpoint{ padding:8px 12px; gap:10px; }
  .cp-name{ font-size:14px; }
  .cp-meta, .guard-site{ font-size:12.5px; }
  .feed-item{ padding:9px 12px; }
  .feed-text{ font-size:13.5px; }
  .feed-time{ font-size:11.5px; }
  .note{ font-size:12.5px; padding:8px 12px; }
  .gs-tab{ font-size:13.5px; padding:8px 11px; }
}

.alert-map{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; vertical-align:middle; color:var(--crit); background:var(--crit-tint); margin-left:4px; }
.alert-map:hover{ filter:brightness(.95); }
.ph-time .ph-mode{ flex-basis:100%; font-size:12.5px; font-weight:600; }
.ph-mode.on{ color:var(--accent); }
.ph-mode.off{ color:var(--warn); }

/* Statutory register: arms details under an armed guard */
.arms-row td{ background:var(--surface-2); }
.arms-box{ padding:4px 0; }
.arms-title{ font-size:13px; font-weight:700; margin-bottom:8px; }
.arms-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px 12px; }
.arms-field{ display:flex; flex-direction:column; gap:4px; min-width:0; text-transform:none; letter-spacing:0; font-weight:400; }
.arms-field > span{ font-size:12.5px; color:var(--muted); font-weight:600; }
.arms-field input, .arms-field select{ width:100%; min-width:0; }
.arms-val{ font-size:14px; }
.arms-warn{ color:var(--warn); font-weight:700; }
.arms-warn.crit{ color:var(--crit); }

/* Attendance approval by the client */
.ap-wrap{ margin-top:8px; }
.ap-send{ padding:16px 18px; }
.ap-mode{ display:flex; gap:8px; flex-wrap:wrap; }
.ap-mode .btn{ flex:1 1 110px; justify-content:center; }
.ap-range{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ap-range > div{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ap-preview{ margin-top:10px; font-size:14px; color:var(--muted); min-height:1em; }
.ap-actions{ margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ap-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.ap-card{ padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ap-card.pending{ border-left:3px solid var(--warn); }
.ap-card.approved{ border-left:3px solid var(--accent); }
.ap-card.rejected{ border-left:3px solid var(--crit); }
.ap-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.ap-top .pill{ flex:none; }
.ap-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ap-title b{ font-size:15px; overflow-wrap:anywhere; }
.ap-title span{ font-size:13px; color:var(--muted); white-space:nowrap; }
.ap-top{ flex-wrap:wrap; }
.ap-totals{ font-size:14px; }
.ap-meta{ font-size:12.5px; color:var(--muted); }
.ap-note{ font-size:13.5px; background:var(--surface-2); border-radius:8px; padding:8px 10px; overflow-wrap:anywhere; }
.ap-note.ok{ background:var(--accent-tint); }
.ap-note.crit{ background:var(--crit-tint); }
.ap-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.ap-btns .btn{ flex:1 1 auto; justify-content:center; }
.btn.danger-ghost{ color:var(--crit); border-color:var(--crit); background:transparent; }
.go-modal-box.ap-sheet{ max-width:860px; max-height:90vh; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.ap-sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.ap-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.ap-table th, .ap-table td{ text-align:left; padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.ap-table th{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.ap-days summary{ cursor:pointer; font-weight:600; font-size:14px; padding:6px 0; }
@media (max-width:600px){
  .ap-list{ grid-template-columns:minmax(0,1fr); }
  .ap-range{ grid-template-columns:minmax(0,1fr); }
  .go-modal-box.ap-sheet{ padding:16px; }
}
.ap-banner{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-bottom:16px;
  border-radius:10px; background:var(--warn-tint); color:var(--ink); text-decoration:none; border:1px solid var(--warn); }
.ap-banner span{ color:var(--warn); font-weight:700; }

/* Searchable site list (top bar and the phone Settings sheet) */
.ss-wrap{ position:relative; min-width:0; }
.ss-native{ position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; }
.ss-btn{ display:flex; align-items:center; gap:6px; max-width:220px; font:inherit; font-size:14.5px; padding:7px 10px; border-radius:7px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; }
.ss-btn span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-btn svg{ width:15px; height:15px; flex:none; color:var(--muted); }
.ss-wrap.open .ss-btn{ border-color:var(--primary); }
.ss-panel{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:280px; max-width:calc(100vw - 24px);
  background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.16); padding:8px; }
.ss-search{ width:100%; font-size:15px; padding:8px 10px; border-radius:7px; border:1px solid var(--border); margin-bottom:6px; }
.ss-list{ max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.ss-opt{ text-align:left; font:inherit; font-size:14.5px; padding:8px 10px; border-radius:7px; border:0; background:none; color:var(--ink); cursor:pointer; }
.ss-opt:hover, .ss-opt.active{ background:var(--surface-2); }
.ss-opt.on{ font-weight:700; color:var(--primary); }
.ss-empty{ font-size:13.5px; color:var(--muted); padding:8px 10px; }
.ss-sheet, .ss-sheet .ss-btn{ width:100%; max-width:none; }
.ss-sheet .ss-btn{ justify-content:space-between; font-size:16px; padding:10px 12px; }
.ss-sheet .ss-panel{ left:0; right:0; width:auto; }
@media (max-width:760px){ .topbar-right > .ss-top{ display:none; } }
@media (min-width:1024px){ .ss-btn{ font-size:13.5px; padding:5px 9px; } }
.ap-comment{ margin-top:4px; font-weight:400; }
.ap-comment span{ font-weight:700; }
/* Approval cards: full-width View sheet, then a pair of buttons */
.ap-btns .ap-full{ flex:1 1 100%; width:100%; }
.ap-pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.ap-pair .btn{ justify-content:center; width:100%; }
.ap-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:4px; vertical-align:middle; }
.ap-dot.approved{ background:var(--accent); }
.ap-dot.rejected{ background:var(--crit); }
.go-modal-box.ap-cm-box{ max-width:480px; display:flex; flex-direction:column; gap:10px; }
.ap-cm{ border-radius:10px; padding:10px 12px; background:var(--surface-2); }
.ap-cm.ok{ background:var(--accent-tint); }
.ap-cm.crit{ background:var(--crit-tint); }
.ap-cm-who{ font-size:13px; font-weight:700; margin-bottom:4px; }
.ap-cm-text{ font-size:15px; overflow-wrap:anywhere; white-space:pre-line; }
.ap-pair .btn{ white-space:nowrap; padding-left:8px; padding-right:8px; }

/* Guards & Sites → Headcount (budgeted vs actual) */
.gs-count.warn{ background:var(--crit-tint); color:var(--crit); }
.hc-summary{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:12px; }
.hc-tile{ padding:12px 14px; }
.hc-tile-l{ font-size:13px; color:var(--muted); font-weight:600; }
.hc-tile-n{ font:700 26px/1.2 var(--font-num); margin-top:2px; }
.hc-tile-s{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.hc-tile.crit .hc-tile-n{ color:var(--crit); }
.hc-tile.ok .hc-tile-n{ color:var(--accent); }
.hc-tile.warn .hc-tile-n{ color:var(--warn); }
.hc-only{ display:inline-flex; align-items:center; gap:6px; font-size:14px; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); margin:0; }
.hc-only input{ width:auto; }
.hc-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; margin-top:10px; }
.hc-card{ padding:14px 16px; min-width:0; }
.hc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.hc-head b{ font-size:15.5px; overflow-wrap:anywhere; }
.hc-head .pill{ flex:none; }
.hc-line{ font-size:13px; color:var(--muted); margin-top:2px; }
.hc-table{ width:100%; border-collapse:collapse; font-size:14px; }
.hc-table th, .hc-table td{ text-align:left; padding:7px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
.hc-table th{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.hc-num{ width:76px !important; padding:5px 8px !important; font-size:14.5px !important; }
.hc-num.hc-saved{ border-color:var(--accent) !important; }
.hc-add{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.hc-add select{ flex:1 1 140px; width:auto; min-width:0; }
.hc-add .btn{ flex:none; }
@media (max-width:600px){ .hc-list{ grid-template-columns:minmax(0,1fr); } .hc-summary{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .hc-summary{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .hc-tile{ padding:10px; }
  .hc-tile-n{ font-size:22px; }
  .hc-tile-s{ font-size:11.5px; }
  .hc-card .table-wrap{ overflow:visible; }
  .hc-table th, .hc-table td{ padding:7px 4px; font-size:13.5px; }
  .hc-table th{ font-size:10.5px; }
  .hc-table .pill{ font-size:11.5px; padding:2px 7px; white-space:nowrap; }
  .hc-num{ width:58px !important; }
  .hc-add select{ flex:1 1 100%; }
  .hc-add input{ flex:1 1 auto; width:auto !important; }
}
@media (max-width:600px){ .hc-table .pill{ white-space:normal; text-align:center; } }
@media (max-width:600px){
  .hc-table{ table-layout:fixed; }
  .hc-table th:nth-child(1), .hc-table td:nth-child(1){ width:32%; overflow-wrap:anywhere; }
  .hc-table th:nth-child(2), .hc-table td:nth-child(2){ width:24%; }
  .hc-table th:nth-child(3), .hc-table td:nth-child(3){ width:16%; }
  .hc-table th:nth-child(4), .hc-table td:nth-child(4){ width:28%; }
  .hc-table th{ white-space:normal; overflow-wrap:anywhere; letter-spacing:0; }
  .hc-num{ width:100% !important; max-width:64px; }
}
@media (max-width:600px){ .hc-table th{ overflow-wrap:normal; white-space:nowrap; font-size:9.5px; padding-left:3px; padding-right:3px; } }

/* Attendance: not reported for 72 hours (inactive) */
.nr-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.nr-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-left:3px solid var(--crit); min-width:0; }
.nr-main{ min-width:0; }
.nr-main b{ font-size:15px; }
.nr-when{ font-size:13px; color:var(--crit); margin-top:3px; }
.nr-card .btn{ flex:none; }
.gs-tag-nr{ display:inline-block; font-size:11.5px; font-weight:700; color:var(--crit); background:var(--crit-tint); border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
@media (max-width:600px){ .nr-list{ grid-template-columns:minmax(0,1fr); } }
.gs-status{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.gs-status .pill, td .pill.ok{ white-space:nowrap; }
/* Headcount: Edit → Save, site picker */
.hc-head-r{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.hc-edit{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px !important; font-size:13px !important; }
.hc-edit svg{ width:14px; height:14px; }
.hc-card.editing{ outline:2px solid var(--primary); outline-offset:-2px; }
.hc-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.hc-last{ font-size:12px; color:var(--muted); margin-top:10px; }
.ss-inline .ss-panel{ left:0; right:auto; }
.ss-inline .ss-btn{ min-width:220px; justify-content:space-between; }
@media (max-width:600px){ #hcSiteWrap, #hcSiteWrap .ss-wrap, .ss-inline .ss-btn{ width:100%; max-width:none; } .hc-actions .btn{ flex:1; justify-content:center; } }
.ov-city{ width:auto; max-width:200px; font-size:14px; padding:5px 8px; }
.att-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; text-transform:none; letter-spacing:0; white-space:nowrap; margin:0; }
.att-toggle input{ width:16px; height:16px; accent-color:var(--primary); }

/* ---------- Visitors ---------- */
.vis-form{ padding:16px 18px; }
.vis-form.editing{ box-shadow:0 0 0 2px var(--primary); }
.vis-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px 14px; align-items:start; }
.vis-grid .vis-wide{ grid-column:span 2; }
.vis-grid .full-row{ grid-column:1/-1; }
@media (max-width:1180px){ .vis-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:860px){ .vis-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .vis-grid{ grid-template-columns:minmax(0,1fr); } .vis-grid .vis-wide{ grid-column:auto; } }
.vis-check{ display:flex; align-items:center; gap:9px; text-transform:none; letter-spacing:0; font-size:15px; color:var(--ink); cursor:pointer; }
.vis-check input{ width:20px; height:20px; flex:none; accent-color:var(--primary); }
.vis-photo-row{ display:flex; gap:10px; align-items:stretch; }
.vis-capture{ flex:1; min-width:0; padding:10px; min-height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.vis-capture svg{ margin-bottom:3px; }
.vis-thumb{ width:66px; height:66px; flex:none; }
.vis-actions{ margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.vis-done{ margin-top:12px; padding:10px 12px; border-radius:8px; background:var(--accent-tint); color:var(--accent); font-weight:600;
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.vis-wa-big{ background:#1f9d55; border-color:#1f9d55; color:#fff; display:inline-flex; align-items:center; gap:6px; }
.vis-wa-big:hover{ background:#178046; }
.vis-wa{ color:#1f9d55; display:inline-flex; align-items:center; }
.vis-filter{ display:grid; grid-template-columns:170px 170px 170px minmax(0,1fr); gap:10px; margin-bottom:10px; align-items:end; }
@media (max-width:760px){ .vis-filter{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .vis-filter .vis-search{ grid-column:1/-1; } }
.vis-who{ display:flex; gap:8px; align-items:center; min-width:0; }
.vis-av{ width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; flex:none; }
.vis-name{ font-weight:600; overflow-wrap:anywhere; }
.vis-sub{ font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.vis-btns{ white-space:nowrap; text-align:right; }
.vis-btns > * + *{ margin-left:6px; }
.vis-btns .btn{ padding:5px 10px; font-size:13px; }
.vis-btns .icon-btn{ vertical-align:middle; }
.vis-empty{ text-align:center; color:var(--muted); padding:16px !important; }
.vis-remarks{ max-width:220px; overflow-wrap:anywhere; }
@media (max-width:760px){
  .vis-btns{ white-space:normal; text-align:left; }
  .vis-btns .btn{ padding:9px 14px; font-size:15px; margin-top:4px; }
  .vis-remarks{ max-width:none; }
}
.vis-block{ margin-top:6px; }
.vis-name, .vis-who .mono, .vis-sub.mono, .vis-ids .mono{ white-space:nowrap; }
.vis-when{ white-space:nowrap; }
.vis-ids{ font-size:13.5px; line-height:1.5; }
@media (max-width:760px){ .vis-name, .vis-who .mono, .vis-sub.mono, .vis-ids .mono{ white-space:normal; } }
.cmp-table input[data-field="pfUan"], .cmp-table input[data-field="esicNo"]{ min-width:136px; font-family:var(--font-mono, monospace); }
@media (max-width:760px){ .cmp-table input[data-field="pfUan"], .cmp-table input[data-field="esicNo"]{ min-width:0; } }
/* ---------- Tenant Directory ---------- */
.ten-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.ten-actions .csv-bar{ margin:0; }
.ten-intro{ margin:-4px 0 14px; max-width:820px; }
#tenForm{ margin-bottom:16px; }
.ten-filter{ grid-template-columns:minmax(0,1fr) 260px; }
.ten-email{ overflow-wrap:anywhere; }
@media (max-width:760px){ .ten-filter{ grid-template-columns:minmax(0,1fr); } .ten-actions{ justify-content:flex-start; } }
.vis-co{ font-weight:600; font-size:13.5px; overflow-wrap:anywhere; }
#visTenantNote{ color:var(--accent); }
/* Visitors: search the Tenant Directory from the company / host boxes */
.vis-sug-wrap{ position:relative; }
.vis-suggest{ position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:30; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.14); max-height:300px; overflow-y:auto; padding:4px; }
.vis-sug{ display:block; width:100%; text-align:left; border:0; background:none; padding:9px 10px; border-radius:7px; cursor:pointer; font:inherit; color:var(--ink); }
.vis-sug b{ display:block; font-size:14.5px; }
.vis-sug span{ display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
.vis-sug:hover, .vis-sug.on{ background:var(--surface-2); }

/* ---------- Teal theme: left menu details, summary banner, theme picker ---------- */
.rail-btn{ color:var(--rail-muted); }
.rail-brand .word{ color:var(--rail-ink); }
.rail-brand .sub{ color:var(--rail-muted); }
.rail .brand-mark{ background:var(--highlight) !important; color:#1A1A1A; }
.rail-nav{ scrollbar-color:rgba(255,255,255,.25) transparent; }
.rail .avatar, .rail .av-initials{ box-shadow:0 0 0 2px var(--rail-line); }
/* Dashboard "Today's summary": teal banner like the reference design */
#dashboardSummaryCard{ background:linear-gradient(120deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #3FC1B5)) !important; border:0 !important; color:#fff; }
#dashboardSummaryCard h3, #dashboardSummaryCard p, #dashboardSummaryCard #dashboardSummaryText{ color:#fff !important; }
#dashboardSummaryCard svg{ color:#fff; }
:root[data-theme="dark"] #dashboardSummaryCard{ background:linear-gradient(120deg, #16302E, #12403C) !important; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #dashboardSummaryCard{ background:linear-gradient(120deg, #16302E, #12403C) !important; } }
/* Settings: Light / Dark / Same as device */
.theme-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.theme-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.theme-btn .theme-sw{ width:100%; max-width:64px; height:30px; border-radius:6px; border:1px solid var(--border); display:flex; overflow:hidden; }
.theme-btn .theme-sw i{ flex:1; }
.theme-btn.active{ border-color:var(--primary); background:var(--primary-tint); color:var(--primary-ink); }