/* Capricorn Security Group brand (capricornsecurity.co.uk): charcoal, red #E42313, Rethink Sans + Raleway */
:root {
  --navy: #212121;
  --navy-2: #333333;
  --accent: #212121;
  --primary: #e42313;
  --primary-dark: #b81c0f;
  --bg: #f4f4f4;
  --card: #fff;
  --text: #212121;
  --muted: #6b6b6b;
  --border: #e3e3e3;
  --font-head: "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --green: #11845b;
  --green-bg: #e3f6ee;
  --red: #c4302b;
  --red-bg: #fdecea;
  --amber: #a86700;
  --amber-bg: #fff4dc;
  --blue: #0056a7;
  --blue-bg: #f0f6fa;
  --radius: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 14px/1.5 Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-variant-numeric: lining-nums; color: var(--text); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, .btn, .nav a, .table th, .tabs button, .stat b, .totals .grand { font-family: var(--font-head); }
h1 { font-size: clamp(20px, 1.4vw + 12px, 26px); margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 18px; margin: 24px 0 12px; }
h3 { font-size: 15px; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.pre { white-space: pre-wrap; }
.right { text-align: right; }
.center { text-align: center; }
.mt { margin-top: 16px; }
.hidden { display: none !important; }
.loading { padding: 48px; text-align: center; color: var(--muted); }
.empty { color: var(--muted); padding: 12px 0; margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid #dcdcdc; background: #fff; color: var(--text); font: 600 14px/1.2 var(--font-head); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s; }
.btn:hover { background: #f5f5f5; border-color: #cfcfcf; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(228,35,19,.25); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(228,35,19,.22); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: #000; border-color: #000; }
.btn-danger-ghost { color: var(--primary); border-color: transparent; background: transparent; }
.btn-danger-ghost:hover { background: var(--red-bg); border-color: transparent; }
.btn-ghost-light { background: transparent; color: #d6d6d6; border-color: rgba(255,255,255,.2); }
.btn-ghost-light:hover { background: rgba(255,255,255,.08); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn-block { width: 100%; justify-content: center; }
.icon-btn { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; margin-left: auto; }
.link-btn:hover { color: var(--red); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Shell */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.back { font-size: 13px; color: var(--muted); display: inline-block; margin-bottom: 4px; }

/* Cards & layout */
.card { background: var(--card); border: 1px solid #e8e8e8; border-radius: 14px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 20px; }
.two-col > .card { margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 18px 20px; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
a.stat:hover { border-color: #d6d6d6; box-shadow: 0 6px 18px rgba(0,0,0,.07); transform: translateY(-1px); text-decoration: none; }
.stat b { display: block; font: 700 clamp(24px, 1.4vw + 12px, 32px)/1.15 var(--font-head); letter-spacing: -.01em; }
.stat span { color: var(--muted); font-size: 13px; }
.notice { background: var(--blue-bg); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.notice-green { background: var(--green-bg); }
.notice-red { background: var(--red-bg); }

/* Tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font: 700 11.5px var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: #777; padding: 10px 12px; border-bottom: 1px solid #eaeaea; background: #fafafa; white-space: nowrap; }
.table th:first-child { border-top-left-radius: 10px; } .table th:last-child { border-top-right-radius: 10px; }
.table td { padding: 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: #fafafa; }
.nowrap { white-space: nowrap; }
.table th.right, .table td.right { text-align: right; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input[type=search] { flex: 1; min-width: 200px; }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; text-transform: capitalize; background: #eeeeee; color: #4a4a4a; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }

/* Forms */
input, select, textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid #dcdcdc; border-radius: 10px; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(228,35,19,.2); border-color: var(--primary); }
input[type=checkbox] { width: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 16px; }
.grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; }
.field label { font-size: 13px; font-weight: 600; }
.field small { color: var(--muted); }
.auth-card .field { margin-bottom: 14px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.inline-search { max-width: 220px; }
.copybox { font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin: 8px 0; }
.items input.num { width: 90px; }
.items input.time { width: 110px; }
.items td { padding: 6px; vertical-align: middle; }
.items .item-cell { min-width: 220px; }
.items .item-cell select { margin-bottom: 4px; }
.items .rate { display: flex; gap: 4px; }
.items .rate select { width: 72px; padding-left: 6px; padding-right: 4px; }

.dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 0 0 12px; }
.dl dt { color: var(--muted); font-size: 13px; }
.dl dd { margin: 0; }

.totals { margin: 16px 0 20px auto; max-width: 300px; }
.totals > div { display: flex; justify-content: space-between; padding: 4px 0; }
.totals .grand { border-top: 2px solid var(--text); margin-top: 6px; padding-top: 8px; font-size: 17px; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.timeline li:last-child { border-bottom: 0; }
.tl-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; }
.roster-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; }
.roster-item:has(input:checked) { border-color: var(--primary); background: var(--red-bg); }
.roster-item input { margin-top: 3px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(33,33,33,.55); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 150; overflow-y: auto; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-wide { max-width: 820px; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 20px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 8px; opacity: 0; transition: .25s; z-index: 3000; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: var(--red); }

/* Auth */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, #000, var(--navy)); }
.auth-card { background: #fff; padding: 32px; border-radius: 14px; width: 100%; max-width: 400px; overflow: hidden; }
.auth-logo { background: var(--navy); margin: -32px -32px 24px; padding: 22px 32px; border-bottom: 4px solid var(--primary); }
.auth-logo .logo-full { height: 40px; }
.auth-card h2 { margin-top: 0; }
.auth-links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }

/* Client portal */
.portal-head { background: var(--navy); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 24px 0 4px; border-bottom: 4px solid var(--primary); }
.portal-user { display: flex; gap: 12px; align-items: center; }
.tabs { display: flex; gap: 4px; background: #fff; border-bottom: 1px solid var(--border); padding: 0 24px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 14px 16px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; position: relative; }
.tabs button.active { color: var(--primary); border-color: var(--primary); }
.dot { display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; margin-left: 4px; }
.portal-main { max-width: 960px; margin: 0 auto; padding: 24px; }
.dep-card details summary { cursor: pointer; font-weight: 600; margin: 8px 0; }

/* Quotes (public + portal) */
.quote-page { max-width: 860px; margin: 24px auto; background: #fff; padding: 40px; border-radius: 12px; border: 1px solid var(--border); }
.quote-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--navy); color: #fff; margin: -40px -40px 24px; padding: 22px 40px; border-radius: 12px 12px 0 0; border-bottom: 4px solid var(--primary); font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.quote-banner .logo-full { height: 44px; }
.quote-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid var(--primary); padding-bottom: 16px; margin-bottom: 8px; }
.quote-head h1 { color: var(--navy); }
.quote-meta { display: flex; justify-content: space-between; gap: 20px; margin: 16px 0; }
.terms { border-top: 1px solid var(--border); padding-top: 12px; color: var(--muted); }

/* Responsive */
.nav-scrim { display: none; }
/* Tablets and small laptops: sidebar slides in from a menu button */
@media (max-width: 760px) {
  .quote-banner { margin: -20px -20px 20px; padding: 16px 20px; border-radius: 0; font-size: 15px; }
  .quote-banner .logo-full { height: 32px; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 8px; }
  .card { padding: 16px; overflow-x: auto; }
  .table { font-size: 13px; }
  .quote-page { padding: 20px; margin: 0; border-radius: 0; }
  .quote-head, .quote-meta { flex-direction: column; }
  .quote-head .right, .quote-meta .right { text-align: left; }
  .portal-main { padding: 16px; }
  .portal-head { padding-right: 12px; }
  .portal-user .small { display: none; }
  .page-head { align-items: stretch; }
  .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
  .tabs { padding: 0 8px; }
  .tabs button { padding: 12px 10px; }
}
/* Phones: tables become stacked cards, modals become bottom sheets */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; } /* stops iOS zooming into fields */
  .table.stack thead { display: none; }
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
  .table.stack tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  .table.stack tr:last-child { border-bottom: 0; }
  .table.stack td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  .table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; flex-shrink: 0; }
  .table.stack td:first-child { text-align: left; }
  .table.stack td:first-child::before { display: none; }
  .table.stack td:empty { display: none; }
  .table.stack.items td input, .table.stack.items td select { max-width: 60%; }
  .table.stack.items td.item-cell { display: block; }
  .table.stack.items td.item-cell > * { max-width: none; }
  .table.stack.items .rate { max-width: 60%; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { border-radius: 14px 14px 0 0; max-height: 94vh; overflow-y: auto; }
  .modal footer { position: sticky; bottom: 0; background: #fff; }
  .modal footer .btn { flex: 1; justify-content: center; }
  .card-head { flex-wrap: wrap; }
  .totals { max-width: none; }
}

@media print {
  body { background: #fff; }
  .no-print, .toast, .sidebar, .topbar, .nav-scrim { display: none !important; }
  #main { padding: 0; max-width: none; }
  .card { break-inside: avoid; border: 0; padding: 0 0 12px; }
  .quote-page { border: 0; margin: 0; padding: 0; max-width: none; }
  .quote-banner { margin: 0 0 24px; border-radius: 0; }
}

/* Staff profile: photo, uniform, messages */
.mt-sm { margin-top: 6px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font: 600 12px var(--font-head); }
.avatar-lg { width: 88px; height: 88px; font-size: 28px; }
.person { display: flex; align-items: center; gap: 10px; color: inherit; }
.profile-head { display: flex; align-items: flex-end; gap: 16px; }
.avatar-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.avatar-btn > span:not(.avatar) { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.avatar-btn:hover > span:not(.avatar), .avatar-btn:focus-visible > span:not(.avatar) { opacity: 1; }
.profile-card { display: flex; align-items: center; gap: 16px; }
.profile-card h2 { margin: 0; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
h4 { font: 600 13px var(--font-head); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 10px; }
.uniform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.dl-sizes { grid-template-columns: 130px 1fr; }
.issues { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.issue { white-space: nowrap; }
.stats { display: grid; gap: clamp(10px, 1vw, 16px); margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.stat { display: block; }
.stat-alert { border-color: var(--primary); }
.stat-alert b { color: var(--primary); }
.nav-count { background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 6px; }
.thread { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px 2px 12px; }
.msg { max-width: 80%; background: var(--bg); border-radius: 12px; padding: 10px 14px; align-self: flex-start; }
.msg-mine { align-self: flex-end; background: var(--red-bg); }
.msg-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.msg-file { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.msg-file .link-btn { margin-left: 0; color: var(--primary); }
.msg-form { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 8px; }
.msg-form input[type=file] { flex: 1; min-width: 0; border: 0; padding: 4px 0; }
@media (max-width: 760px) {
  .uniform-grid, .grid-3 { grid-template-columns: 1fr; }
  .profile-head { align-items: center; }
  .avatar-lg { width: 64px; height: 64px; font-size: 22px; }
  .msg { max-width: 92%; }
}

/* Staff overview dashboard */
.stat-good b { color: var(--green); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 20px; }
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; padding: 2px 0; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; }
.bar { display: block; height: 100%; min-width: 3px; background: var(--navy); border-radius: 0 4px 4px 0; }
.bar-row:hover .bar { background: var(--primary); }
.bar-val { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 64px; text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; margin: 4px 0 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.sw-green { background: #1f8a5b; } .sw-amber { background: #e0a526; } .sw-red { background: var(--primary); } .sw-grey { background: #c4c4c4; }
.cred-bars { display: grid; gap: 16px; }
.cred-row { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; align-items: center; }
.cred-label { font-weight: 600; }
.stack-bar { display: flex; gap: 2px; height: 18px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.seg { display: block; min-width: 4px; }
.seg:hover { opacity: .8; }
.cred-counts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); }
.cred-counts b { color: var(--text); }
@media (max-width: 640px) {
  .cred-row { grid-template-columns: 1fr; }
  .cred-counts { grid-column: 1; }
}

/* Printable staff overview */
.sheet { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 40px; max-width: 900px; overflow: hidden; }
.sheet > section, .sheet-grid > section { margin-bottom: 22px; }
.sheet-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.sheet-head h2 { margin: 0 0 2px; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 32px; }
.sheet .dl { grid-template-columns: 140px 1fr; }
.sheet-foot { border-top: 1px solid var(--border); padding-top: 10px; margin: 0; }
@media (max-width: 760px) {
  .sheet { padding: 20px; border-radius: 0; margin: 0 -16px; border-left: 0; border-right: 0; }
  .sheet .quote-banner { margin: -20px -20px 20px; }
}
@media print {
  .sheet { border: 0; padding: 0; max-width: none; }
  .sheet .quote-banner { margin: 0 0 20px; border-radius: 0; }
  .sheet section { break-inside: avoid; }
  .sheet .table.stack thead { display: table-header-group; }
  .badge { border: 1px solid currentColor; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Vetting */
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.checklist li { color: var(--muted); }
.checklist li.done { color: var(--green); font-weight: 600; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 6px 16px; }

/* Team chat */
#main.main-chat { max-width: none; padding-bottom: clamp(12px, 2vw, 24px); }
.portal-main.chat-mode { max-width: 1280px; padding: 0; }
.portal-main.chat-mode > p { display: none; }
.chat-app { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 360px; }
.portal-main.chat-mode .chat-app { border-radius: 0; border-width: 0 1px; }
.chat-list { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 0; }
.chat-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 14px 8px; }
.chat-list-head h2 { margin: 0; font-size: 20px; }
.chat-search { margin: 0 14px 8px; width: auto; }
.chat-items { flex: 1; overflow-y: auto; min-height: 0; }
.chat-notify { padding: 0 14px; }
.chat-notify:not(:empty) { padding: 10px 14px; border-top: 1px solid var(--border); }
.chat-notify .notice { margin: 0; }
.chat-item { display: flex; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid #f1f1f1; }
.chat-item:hover { background: #fafafa; }
.chat-item.active { background: var(--red-bg); }
.chat-item-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-item-top, .chat-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.chat-item-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.chat-item.unread .chat-time { color: var(--primary); font-weight: 700; }
.chat-preview { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.unread .chat-preview { color: var(--text); font-weight: 600; }
.chat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font: 700 14px var(--font-head); }
.chat-avatar.chat-deployment { background: var(--primary); font-size: 18px; }
.chat-avatar.chat-general { background: #5b5b5b; }
.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #efeae2; }
.chat-empty { margin: auto; text-align: center; color: var(--muted); padding: 24px; }
.chat-empty-icon { font-size: 44px; }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--border); }
.chat-back { display: none; }
.chat-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 2px; }
.chat-title > span:last-child { display: grid; min-width: 0; }
.chat-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 12px clamp(10px, 3vw, 40px); display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.chat-day { text-align: center; margin: 10px 0 6px; }
.chat-day span { background: #fff; color: var(--muted); font-size: 12px; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.chat-system { align-self: center; background: #fff7d6; color: #5c4b00; font-size: 12px; padding: 4px 10px; border-radius: 8px; margin: 6px 0; text-align: center; max-width: 90%; }
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble { max-width: min(78%, 560px); background: #fff; border-radius: 10px; padding: 6px 9px 4px; box-shadow: 0 1px 1px rgba(0,0,0,.08); overflow-wrap: anywhere; }
.bubble-row.mine .bubble { background: #ffe2df; }
.bubble-name { font-size: 12.5px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.office-tag { font-size: 10px; background: var(--navy); color: #fff; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.chat-text { white-space: pre-wrap; }
.bubble-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.bubble-del { border: 0; background: none; cursor: pointer; font-size: 11px; opacity: 0; padding: 0 2px; }
.bubble:hover .bubble-del, .bubble-del:focus { opacity: .7; }
@media (pointer: coarse) { .bubble-del { opacity: .5; } }
.chat-img img { display: block; max-width: 100%; max-height: 320px; border-radius: 6px; margin-bottom: 2px; }
.chat-file { display: block; padding: 8px; background: rgba(0,0,0,.04); border-radius: 6px; margin-bottom: 2px; }
.chat-compose-wrap { background: #f0f0f0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
.chat-compose { display: flex; align-items: flex-end; gap: 6px; }
.chat-compose textarea { flex: 1; resize: none; border-radius: 20px; padding: 9px 14px; max-height: 140px; line-height: 1.4; }
.chat-attach { cursor: pointer; padding: 8px; }
.chat-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0; }
.chat-send:hover { background: var(--primary-dark); }
.chat-readonly { text-align: center; color: var(--muted); font-size: 13px; padding: 8px; }
.member-list { display: grid; gap: 2px; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.member .chat-avatar { width: 34px; height: 34px; font-size: 12px; }
.member-main { flex: 1; min-width: 160px; display: grid; }
.member-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.danger-zone { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.pick-search { margin: 8px 0; }
@media (max-width: 760px) {
  .chat-app { grid-template-columns: 1fr; border-radius: 0; border-left: 0; border-right: 0; }
  #main.main-chat { padding: 0; }
  .chat-app .chat-pane { display: none; }
  .chat-app.has-active .chat-pane { display: flex; }
  .chat-app.has-active .chat-list { display: none; }
  .chat-back { display: inline-block; }
  .bubble { max-width: 86%; }
}

/* Phone app: install / notification banners, sign-in */
.app-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--navy); color: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); border-left: 4px solid var(--primary); max-width: 560px; margin: 0 auto; }
.app-banner img { width: 40px; height: 40px; border-radius: 10px; }
.app-banner-icon { font-size: 26px; }
.app-banner > div:not(.app-banner-actions) { flex: 1; min-width: 180px; display: grid; gap: 2px; font-size: 13px; }
.app-banner > div span { color: #d6d6d6; }
.app-banner-actions { display: flex; gap: 6px; margin-left: auto; }
.ios-share { display: inline-block; border: 1px solid #d6d6d6; border-radius: 4px; padding: 0 4px; font-size: 11px; }
.app-banner + .app-banner { bottom: calc(110px + env(safe-area-inset-bottom)); }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 14px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.auth-card .btn-block + .muted { margin-top: 6px; }
.chat-archived { border-top: 1px solid var(--border); }
.chat-archived summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--muted); }
.chat-archived > p { margin: 0 14px 6px; }
.chat-archived .chat-item { opacity: .75; }
.chat-readonly .btn { margin-left: 8px; }

/* ---------- Staff app ---------- */
.ico { width: 22px; height: 22px; flex-shrink: 0; }
.ico-sm { width: 16px; height: 16px; vertical-align: -3px; }
.avatar-sm { width: 30px; height: 30px; font-size: 11px; }
.avatar-xl { width: 84px; height: 84px; font-size: 26px; }
.avatar-xxl { width: 152px; height: 152px; font-size: 46px; }
.only-mobile { display: none; }
.sp { min-height: 100dvh; background: #f3f2ef; }
.sp-top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid #e6e6e6; padding-top: env(safe-area-inset-top); }
.sp-top-inner { max-width: 1180px; margin: 0 auto; height: 60px; padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.sp-brand { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 0; font: 800 19px var(--font-head); color: var(--navy); letter-spacing: -.01em; }
.sp-brand img { width: 34px; height: 34px; }
.icon-btn2 { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.icon-btn2:hover { background: #f0f0f0; }
.icon-btn2:active { background: #e6e6e6; }
.icon-btn2.sm { width: 34px; height: 34px; border-radius: 10px; }
.icon-btn2.sm .ico { width: 18px; height: 18px; }
.sp-burger { margin-left: -8px; }
.sp-top-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.head-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font: 700 10.5px/18px var(--font-head); box-shadow: 0 0 0 2px #fff; }
.sp-me-btn { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 6px 4px 4px; border-radius: 999px; cursor: pointer; font: 600 14px var(--font-head); color: var(--text); }
.sp-me-btn:hover { background: #f0f0f0; }
.sp-me-btn > span:not(.avatar) { display: none; }
.sp-topnav { display: none; }
.sp-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px #fff; }
.sp-msgbar { position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 35; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  border: 0; background: var(--primary); color: #fff; padding: 10px 16px; font: 600 13.5px var(--font-head); cursor: pointer; text-align: left; animation: slideDown .25s ease-out; }
.sp-msgbar span, .sp-msgbar b { display: inline-flex; align-items: center; gap: 6px; }
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 12px calc(88px + env(safe-area-inset-bottom)); }
.sp-main.wide { max-width: 1180px; }
.sp-main.chat-mode { max-width: 1280px; padding: 0; }
.sp-main.chat-mode #chatMount { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
.sp-main.chat-mode .chat-app { border-radius: 0; border-width: 0; }
.sp .card { border-radius: 16px; border: 1px solid #e8e8e8; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 18px; margin-bottom: 12px; }

/* Bottom tab bar (phones) */
.sp-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #e6e6e6; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
.sp-nav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; border-radius: 12px;
  font: 600 11px var(--font-head); color: #777; cursor: pointer; transition: color .15s; }
.sp-nav button .ico { width: 24px; height: 24px; transition: transform .15s; }
.sp-nav button.active { color: var(--primary); }
.sp-nav button.active .ico { stroke-width: 2.2; transform: translateY(-1px); }
.sp-nav .sp-dot { top: 5px; left: calc(50% + 7px); }

/* Burger drawer */
.sp-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
.sp-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(86vw, 320px); background: #fff; display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-102%); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 40px rgba(0,0,0,.18); padding-bottom: env(safe-area-inset-bottom); }
.menu-open .sp-scrim { opacity: 1; }
.menu-open .sp-drawer { transform: none; }
.drawer-head { position: relative; display: grid; justify-items: start; gap: 2px; padding: calc(56px + env(safe-area-inset-top)) 20px 18px; border-bottom: 1px solid #eee; }
.drawer-cover { position: absolute; inset: 0 0 auto; height: calc(72px + env(safe-area-inset-top)); background: linear-gradient(120deg, var(--navy) 0%, #3b3b3b 60%, var(--primary) 140%); }
.drawer-head .avatar { position: relative; box-shadow: 0 0 0 4px #fff; margin-bottom: 8px; }
.drawer-head b { font: 700 18px var(--font-head); }
.drawer-head .small { color: var(--muted); }
.drawer-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; color: #fff; }
.drawer-close:hover { background: rgba(255,255,255,.15); }
.drawer-links { display: grid; padding: 8px; }
.drawer-links hr { border: 0; border-top: 1px solid #eee; margin: 6px 10px; }
.drawer-links button { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 0; background: none; border-radius: 12px; font: 600 15px var(--font-head); color: var(--text); cursor: pointer; text-align: left; }
.drawer-links button:hover { background: #f4f4f4; }
.drawer-links button.active { background: var(--red-bg); color: var(--primary); }
.drawer-links button.danger { color: var(--primary); }
.drawer-links .sp-dot { position: static; margin-left: auto; box-shadow: none; }
.drawer-foot { margin-top: auto; padding: 16px 22px 20px; border-top: 1px solid #eee; line-height: 1.6; }

/* Home */
.home-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.home-left { display: none; }
.home-feed, .home-right, .home-left { min-width: 0; }
.hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hero-top h1 { font-size: clamp(19px, 2.4vw, 24px); }
.clock-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: #f7f7f7; border: 1px solid #ececec; margin: 0; }
.clock-card > div { flex: 1; display: grid; gap: 1px; min-width: 0; }
.clock-card b { font: 700 16px var(--font-head); }
.clock-card .small { color: var(--muted); }
.clock-card.on { background: var(--green-bg); border-color: #bfe6d3; }
.clock-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.clock-card.on .clock-ico { color: var(--green); }
.clock-btn { flex-shrink: 0; min-width: 108px; min-height: 48px; justify-content: center; border-radius: 999px; background: var(--green); border-color: var(--green); color: #fff; font: 700 15px var(--font-head); box-shadow: 0 4px 12px rgba(17,132,91,.25); }
.clock-btn:hover { background: #0d6b49; }
.clock-btn.out { background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 12px rgba(228,35,19,.25); }
.alert-card { border-left: 4px solid; }
.alert-card p { margin: 10px 0 0; }
.alert-urgent { border-left-color: var(--primary) !important; background: #fff6f5; }
.alert-important { border-left-color: #e0a526 !important; background: #fffaf0; }
.alert-info { border-left-color: var(--blue) !important; }
.alert-top { display: flex; gap: 12px; align-items: flex-start; }
.alert-top > div { display: grid; gap: 2px; }
.alert-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0; }
.alert-urgent .alert-ico { color: var(--primary); } .alert-important .alert-ico { color: #b7790f; } .alert-info .alert-ico { color: var(--blue); }
.alert-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.id-tile { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 14px 16px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  background: linear-gradient(120deg, var(--navy), #3a3a3a); color: #fff; font: inherit; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.id-tile > span:not(.avatar) { flex: 1; display: grid; }
.id-tile .small { color: #cfcfcf; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--primary); color: #fff; font: 700 12px var(--font-head); vertical-align: 2px; margin-left: 4px; }
.todo-list { display: grid; gap: 10px; }
.todo { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: #fafafa; border: 1px solid #efefef; }
.todo-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.todo-red .todo-ico { background: #ffe9e7; color: var(--primary); }
.todo-amber .todo-ico { background: #fff3d6; color: #b7790f; }
.todo-main { flex: 1; min-width: 0; }
.todo-main p { margin: 3px 0 0; color: var(--muted); }
.todo-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.all-good { display: flex; align-items: center; gap: 12px; }
.all-good > div { display: grid; }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-head > div { display: grid; }
.post-avatar { width: 44px; height: 44px; border-radius: 50%; }
.post-title { font-size: 17px; margin: 0 0 4px; }
.post-body { margin: 0; color: #333; }
.post-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; }
.post.pinned { box-shadow: inset 3px 0 0 var(--primary), 0 1px 2px rgba(0,0,0,.04); }
.news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.news-list li { display: grid; gap: 4px; }
.news-list a { font-weight: 600; color: var(--text); line-height: 1.35; }
.news-list a:hover { color: var(--primary); }
.mini-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 12px; }
.mini-list li { display: flex; gap: 12px; align-items: center; }
.mini-list li > span:last-child { display: grid; min-width: 0; }
.mini-date { width: 46px; flex-shrink: 0; text-align: center; border-radius: 10px; background: var(--red-bg); color: var(--primary); font: 600 11px var(--font-head); text-transform: uppercase; padding: 4px 0; }
.mini-date b { display: block; font-size: 18px; line-height: 1.1; color: var(--text); }
.kit-ico { width: 38px; height: 38px; border-radius: 10px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card { display: grid; gap: 8px; }
.contact-card h3 { margin-bottom: 4px; }
.quick-links { padding: 6px !important; display: grid; }
.quick-links button { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border: 0; background: none; border-radius: 10px; font: 600 14px var(--font-head); color: var(--text); cursor: pointer; text-align: left; }
.quick-links button span { flex: 1; }
.quick-links button:hover { background: #f4f4f4; }
.quick-links .ico-sm { color: #aaa; }

/* Profile card (home left column) */
.pcard { padding: 0 !important; overflow: hidden; text-align: center; }
.pcard-cover { height: 64px; background: linear-gradient(120deg, var(--navy) 0%, #3b3b3b 55%, var(--primary) 150%); }
.pcard-avatar { border: 0; background: none; padding: 0; margin: -42px auto 0; display: block; cursor: pointer; border-radius: 50%; }
.pcard-avatar .avatar { box-shadow: 0 0 0 4px #fff; }
.pcard-body { display: grid; gap: 2px; padding: 8px 16px 14px; }
.pcard-name { font: 700 17px var(--font-head); }
.pcard-stats { border-top: 1px solid #eee; padding: 10px 16px; display: grid; gap: 8px; text-align: left; }
.pcard-stats div { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.pcard-stats b { color: var(--text); }
.pcard-actions { border-top: 1px solid #eee; padding: 12px 16px 16px; display: grid; gap: 8px; }
.pcard-actions .btn { justify-content: center; }

/* Licences list */
.cred-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; }
.cred { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.cred:last-child { border-bottom: 0; }
.cred-ico { width: 42px; height: 42px; border-radius: 12px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy); }
.cred-ico.ok { background: var(--green-bg); color: var(--green); }
.cred-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.cred-status { display: grid; justify-items: end; gap: 3px; text-align: right; }
.cred-sub { font-size: 11.5px; color: var(--muted); }
.cred-list.compact .cred-ico { width: 34px; height: 34px; border-radius: 10px; }
.cred-list.compact .cred-ico .ico { width: 18px; height: 18px; }
.cred-list.compact .cred-main .small { display: none; }

/* Profile page */
.profile-hero { padding: 0 !important; overflow: hidden; }
.profile-cover { height: clamp(110px, 22vw, 200px); background: radial-gradient(circle at 85% 20%, rgba(228,35,19,.55), transparent 45%), linear-gradient(120deg, #161616, var(--navy) 50%, #3a3a3a);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px 20px; }
.profile-cover img { height: 30px; opacity: .55; }
.profile-id { position: relative; padding: 0 20px 20px; display: grid; gap: 14px; }
.profile-avatar { margin-top: clamp(-76px, -11vw, -50px); }
.profile-avatar .avatar { box-shadow: 0 0 0 5px #fff; width: clamp(100px, 18vw, 152px); height: clamp(100px, 18vw, 152px); }
.profile-headline h1 { font-size: clamp(22px, 3vw, 28px); }
.profile-headline p { margin: 2px 0; }
.profile-headline .ico-sm { margin-right: 2px; }
.profile-headline .sep { margin: 0 8px; }
.profile-headline .tags { margin-top: 8px; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-cols { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; }
.info-list li .ico { color: #888; margin-top: 2px; }
.info-list li > span { display: grid; }
.size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.size-grid div { background: #f6f6f6; border-radius: 10px; padding: 8px 10px; display: grid; }
.size-grid span { font-size: 11.5px; color: var(--muted); }
.size-grid b { font: 700 16px var(--font-head); }

@media (max-width: 759px) {
  .only-mobile { display: flex; }
  .sp-main { padding-left: 10px; padding-right: 10px; }
  .sp .card { padding: 16px; border-radius: 14px; }
  .sp-brand span { display: none; }
  .sp-brand { margin: 0 auto 0 0; }
  .profile-actions .btn { flex: 1; justify-content: center; }
  .cred-status .badge { font-size: 11px; }
}
@media (min-width: 760px) {
  .sp-nav { display: none; }
  .sp-burger { display: none; }
  .sp-main { padding: 20px 16px 40px; }
  .sp-main.chat-mode { padding: 16px; }
  .sp-main.chat-mode #chatMount { padding-bottom: 0; }
  .sp-main.chat-mode .chat-app { border-radius: 16px; border-width: 1px; }
  .sp-topnav { display: flex; gap: 2px; margin-left: 8px; height: 100%; }
  .sp-topnav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 76px; padding: 0 8px; border: 0; background: none;
    font: 600 12px var(--font-head); color: #6b6b6b; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s; }
  .sp-topnav button:hover { color: var(--text); }
  .sp-topnav button.active { color: var(--text); border-bottom-color: var(--text); }
  .sp-topnav .sp-dot { top: 10px; left: calc(50% + 8px); }
  .sp-me-btn > span:not(.avatar) { display: inline; }
  .sp-msgbar { top: 61px; border-radius: 0 0 12px 12px; max-width: 600px; margin: 0 auto; }
  .sp-drawer { left: auto; right: 0; transform: translateX(102%); }
  .home-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .home-right { position: sticky; top: 76px; }
  .profile-id { grid-template-columns: auto 1fr auto; align-items: end; }
  .profile-cols { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
@media (min-width: 1080px) {
  .home-grid { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  .home-left { display: block; position: sticky; top: 76px; }
  .id-tile.only-mobile { display: none; }
}

/* Digital ID card */
.idcard-wrap { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.idcard { width: min(100%, 360px); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center; }
.idcard-band { background: var(--navy); padding: 16px; border-bottom: 5px solid var(--primary); }
.idcard-band img { height: 38px; max-width: 100%; }
.idcard-body { padding: 18px 18px 12px; }
.idcard-photo { width: 132px; height: 132px; margin: -2px auto 10px; border-radius: 14px; overflow: hidden; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 40px var(--font-head); border: 3px solid var(--primary); }
.idcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.idcard h2 { margin: 0; font-size: 22px; }
.idcard-role { color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.idcard-sia { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-align: left; background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 13.5px; }
.idcard-sia dt { color: var(--muted); }
.idcard-sia dd { margin: 0; font-weight: 600; }
.idcard-ok { color: var(--green); font-weight: 700; margin-left: 4px; }
.idcard-bad { color: var(--primary); font-weight: 700; margin-left: 4px; }
.idcard-qr { display: grid; justify-items: center; gap: 4px; }
.qr-box { width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.qr-box svg { width: 100%; height: 100%; }
.idcard-live { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font: 600 12px var(--font-head); color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.idcard-foot { background: var(--bg); padding: 10px; font-size: 12px; color: var(--muted); }
.idcard-close { border: 0; border-radius: 999px; padding: 10px 20px; background: #fff; color: var(--text); font: 600 14px var(--font-head); cursor: pointer; }

/* Department tags */
.tag { display: inline-flex; align-items: center; gap: 4px; background: #f1f1f1; color: #333; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tag-lg { font-size: 13px; padding: 4px 6px 4px 12px; }
.tag-x { border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--muted); padding: 0 4px; }
.tag-x:hover { color: var(--primary); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tag-check input { position: absolute; opacity: 0; pointer-events: none; }
.tag-check span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.tag-check input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.tag-check input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Office shop */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.subtabs a { padding: 10px 14px; font: 600 14px var(--font-head); color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.subtabs a.active { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.product-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.product-admin { display: flex; gap: 12px; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.product-admin:hover { border-color: var(--primary); }
.product-admin.inactive { opacity: .55; }
.product-admin-body { display: grid; gap: 3px; min-width: 0; }
.product-img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 30px; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-img.sm { width: 44px; height: 44px; font-size: 20px; }
.thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.order-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.po-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 12px; }
.setup-steps { padding-left: 18px; display: grid; gap: 8px; }

/* Staff shop */
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 6px; }
.shop-head h2 { margin: 0; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; }
.chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 14px; font: 600 13px var(--font-head); cursor: pointer; white-space: nowrap; }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.product { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.product .product-img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; font-size: 44px; }
.product-body { padding: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-body p { margin: 0; }
.price { font: 700 16px var(--font-head); color: var(--primary); }
.product-buy { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.product-buy select { flex: 1; min-width: 0; padding: 6px 8px; }
.product-buy .btn { flex-shrink: 0; }
.order-list { display: grid; gap: 10px; }
.order-row { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.order-row:last-child { border-bottom: 0; }
.order-row > div:first-child { display: grid; gap: 4px; min-width: 0; }
.order-row-end { display: grid; justify-items: end; align-content: start; gap: 6px; }
.basket { display: grid; gap: 10px; }
.basket-line { display: flex; align-items: center; gap: 10px; }
.basket-name { flex: 1; display: grid; min-width: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.qty button { width: 32px; height: 32px; border: 0; background: #fff; font-size: 18px; cursor: pointer; }
.qty span { min-width: 22px; text-align: center; font-weight: 700; }
.basket-price { min-width: 64px; text-align: right; }
.code-row { display: flex; gap: 8px; margin: 14px 0 0; }
.code-row input { flex: 1; text-transform: uppercase; }
.pay-options { display: grid; gap: 8px; margin-bottom: 8px; }
.pay-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.pay-option:has(input:checked) { border-color: var(--primary); background: var(--red-bg); }
.pay-option input { width: auto; margin-top: 3px; }
.pay-option > span { display: grid; gap: 2px; }
.wage-box { background: var(--bg); border-radius: 10px; padding: 12px; display: grid; gap: 10px; margin-bottom: 8px; }
.consent { align-items: flex-start; font-weight: 500; font-size: 13px; }
.consent input { margin-top: 3px; }
@media (max-width: 420px) {
  .sp-nav button { font-size: 10.5px; }
  .sp-nav-icon { font-size: 18px; }
}

/* Clock in / out */
.clock-wrap { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.85); display: flex; align-items: flex-end; justify-content: center; }
.clock-sheet { width: min(100%, 520px); max-height: 100dvh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
.clock-head { display: flex; justify-content: space-between; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-head); font-size: 18px; }
.clock-body { padding: 12px 14px; display: grid; gap: 10px; overflow-y: auto; }
.clock-gps { font-size: 13px; padding: 9px 12px; border-radius: 10px; background: var(--bg); }
.clock-gps.ok { background: var(--green-bg); }
.clock-gps.far { background: #fff4f3; }
.clock-cam { position: relative; justify-self: center; width: min(100%, calc(52dvh * 3 / 4)); aspect-ratio: 3 / 4; background: #111; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.clock-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.clock-cam img { width: 100%; height: 100%; object-fit: contain; background: #111; }
.clock-cam-msg { color: #ddd; padding: 20px; text-align: center; }
.clock-foot { padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.clock-shutter { min-height: 54px; font-size: 16px; justify-content: center; border-radius: 14px; }
.clock-confirm { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.clock-confirm .btn { justify-content: center; min-height: 54px; border-radius: 14px; }
.clock-cell { display: flex; align-items: center; gap: 8px; }
.clock-cell > span { display: grid; gap: 2px; }
.clock-thumb { width: 44px; height: 44px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; flex-shrink: 0; background: var(--bg); }
.clock-thumb img { width: 100%; height: 100%; object-fit: cover; }
.clock-photo { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #111; border-radius: 10px; }


/* ---------- Admin layout ---------- */
.shell { display: flex; min-height: 100vh; background: #f3f2ef; }
.sidebar { width: 252px; background: var(--navy); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex-shrink: 0; transition: width .2s ease; z-index: 40; }
.brand { display: flex; align-items: center; min-height: 64px; padding: 14px 20px; }
.brand.dark { color: var(--navy); padding: 0 0 16px; }
.logo-full { display: block; height: 30px; width: auto; max-width: 100%; }
.brand .logo-mark { display: none; width: 36px; height: 36px; }
.nav { flex: 1; overflow-y: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.nav-group { font: 700 10.5px var(--font-head); letter-spacing: .09em; text-transform: uppercase; color: #8a8a8a; padding: 16px 10px 6px; white-space: nowrap; }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: #cfcfcf; font: 600 14px var(--font-head); white-space: nowrap; transition: background .15s, color .15s; }
.nav a .ico { width: 20px; height: 20px; opacity: .8; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav a.active { background: rgba(255,255,255,.11); color: #fff; }
.nav a.active .ico { color: var(--primary); filter: brightness(1.35) saturate(1.1); opacity: 1; }
.nav a.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nav-count { margin-left: auto; background: var(--primary); color: #fff; border-radius: 999px; font: 700 11px/18px var(--font-head); min-width: 20px; padding: 0 6px; text-align: center; }
.sidebar-foot { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-collapse { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: none; color: #9a9a9a; border-radius: 10px; font: 600 13px var(--font-head); cursor: pointer; white-space: nowrap; }
.nav-collapse:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-collapse .ico { width: 20px; height: 20px; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 clamp(16px, 2.5vw, 32px);
  background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid #e6e6e6; }
.topbar-burger, .topbar-mark { display: none; }
.topbar-mark { width: 32px; height: 32px; }
.topbar-title { font: 700 18px var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer; font: 600 13px var(--font-head); color: var(--text); }
.user-btn:hover { background: #f0f0f0; }
.user-email { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.14); padding: 6px; z-index: 50; }
.user-pop-head { display: grid; gap: 2px; padding: 10px 12px; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.user-pop a, .user-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 10px; font: 600 14px var(--font-head); color: var(--text); cursor: pointer; text-align: left; }
.user-pop a:hover, .user-pop button:hover { background: #f4f4f4; text-decoration: none; }
#main { width: 100%; max-width: none; padding: clamp(16px, 2.5vw, 32px); }
.page-head h1 { font-size: clamp(22px, 1.2vw + 14px, 30px); letter-spacing: -.01em; }
.nav-scrim { display: none; }
body.nav-collapsed .sidebar { width: 76px; }
body.nav-collapsed .nav-label, body.nav-collapsed .nav-group, body.nav-collapsed .brand .logo-full { display: none; }
body.nav-collapsed .brand { justify-content: center; padding: 14px 0; }
body.nav-collapsed .brand .logo-mark { display: block; }
body.nav-collapsed .nav a, body.nav-collapsed .nav-collapse { justify-content: center; padding: 11px 0; }
body.nav-collapsed .nav a.active::before { left: -12px; }
body.nav-collapsed .nav-count { position: absolute; top: 3px; right: 6px; margin: 0; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
body.nav-collapsed .nav-collapse .ico { transform: scaleX(-1); }
@media (min-width: 1800px) {
  .two-col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); }
}
@media (max-width: 1024px) {
  .sidebar, body.nav-collapsed .sidebar { position: fixed; left: 0; width: 272px; transform: translateX(-102%); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
  body.nav-collapsed .nav-label, body.nav-collapsed .nav-group, body.nav-collapsed .brand .logo-full { display: revert; }
  body.nav-collapsed .brand .logo-mark { display: none; }
  body.nav-collapsed .nav a { justify-content: flex-start; padding: 9px 10px; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; }
  .sidebar-foot { display: none; }
  .topbar-burger { display: inline-flex; margin-left: -8px; }
  .topbar-mark { display: block; }
}
@media (max-width: 640px) {
  .user-email, .topbar-live span { display: none; }
  .topbar { gap: 8px; }
  .topbar-title { font-size: 16px; }
}

/* ---------- Live operations display ---------- */
body.live-mode .sidebar, body.live-mode .topbar { display: none !important; }
body.live-mode, body.live-mode .shell { background: #121211; }
body.live-mode #main { padding: 0; }
.live { --panel: #1f1f1d; --line: #34342f; --t1: #f0efec; --t2: #c3c2b7; --t3: #8f8e86; --series: #3987e5;
  min-height: 100vh; display: flex; flex-direction: column; gap: clamp(10px, .9vw, 18px); padding: clamp(10px, 1.1vw, 22px); background: #121211; color: var(--t1); }
.live-head { display: flex; align-items: center; gap: 16px; }
.live-brand { display: flex; align-items: center; gap: 14px; }
.live-brand img { height: clamp(26px, 1.8vw, 36px); }
.live-brand span { font: 700 clamp(15px, 1vw, 20px) var(--font-head); color: var(--t2); padding-left: 14px; border-left: 1px solid var(--line); }
.live-clock { margin-left: auto; display: grid; justify-items: end; }
.live-clock b { font: 700 clamp(26px, 2.2vw, 44px)/1 var(--font-head); font-variant-numeric: tabular-nums; }
.live-clock span { color: var(--t3); font-size: 13px; }
.live-actions { display: flex; align-items: center; gap: 8px; }
.live-pulse { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-head); letter-spacing: .08em; color: var(--t2); padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; }
.live-pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0ca30c; animation: pulse 1.6s infinite; }
.live-pulse .ico { display: none; }
.live-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--t2); cursor: pointer; }
.live-btn:hover { color: #fff; border-color: #55554e; text-decoration: none; }
.live-body { flex: 1; min-height: 0; display: grid; gap: inherit; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); }
.live-body > .loading { grid-column: 1 / -1; color: var(--t3); }
.live-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: inherit; }
.live-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(12px, 1vw, 20px); display: grid; align-content: start; gap: 4px; min-width: 0; }
.lk-label { color: var(--t2); font: 600 13px var(--font-head); }
.lk-value { font: 700 clamp(28px, 2.4vw, 48px)/1.05 var(--font-head); letter-spacing: -.02em; }
.lk-sub { color: var(--t3); font-size: 12.5px; }
.live-kpi.hero { background: linear-gradient(140deg, #1f2b3d, var(--panel) 70%); border-color: #2f4566; }
.live-kpi.hero .lk-value { font-size: clamp(40px, 3.6vw, 72px); }
.live-kpi.bad .lk-value { color: #ff6b62; } .live-kpi.good .lk-value { color: #3fcf6b; }
.live-kpi.warn .lk-sub, .live-kpi.down .lk-sub { color: #ff8a80; } .live-kpi.up .lk-sub { color: #3fcf6b; }
.live-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(12px, 1vw, 20px); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.live-panel h3 { display: flex; align-items: center; gap: 8px; font: 700 15px var(--font-head); color: var(--t1); margin: 0 0 6px; }
.live-panel h3 .ico { color: var(--t3); }
.live-panel h3 span { margin-left: auto; color: var(--t3); font: 600 12.5px var(--font-head); }
.live-sub { margin: 0 0 10px; color: var(--t3); font-size: 12px; }
.live-empty { margin: auto; color: var(--t3); text-align: center; }
.live-more { color: var(--t3); font-size: 12px; margin: 6px 0 0; }
.p-onshift { grid-column: span 3; } .p-revenue { grid-column: span 5; } .p-cover { grid-column: span 4; }
.p-upcoming { grid-column: span 3; } .p-hours { grid-column: span 3; } .p-comp { grid-column: span 4; } .p-depts { grid-column: span 2; }
/* columns */
.cols { position: relative; flex: 1; min-height: 160px; }
.cols-grid { position: absolute; inset: 0 0 24px 40px; }
.cols-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cols-line span { position: absolute; left: -42px; top: -8px; width: 36px; text-align: right; font-size: 10.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
.cols-bars { position: absolute; inset: 0 0 0 40px; display: flex; gap: 2px; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.col-track { flex: 1; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.col-track > i { position: relative; display: block; width: min(24px, 70%); min-height: 0; background: var(--series); opacity: .72; border-radius: 4px 4px 0 0; transition: opacity .15s; }
.col-track > i.em { opacity: 1; }
.col:hover .col-track > i { opacity: 1; filter: brightness(1.15); }
.col-val { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font: 700 12px var(--font-head); color: var(--t1); white-space: nowrap; }
.col-track > .col-val.bad { bottom: auto; top: 0; color: #fab219; }
.col-label { height: 24px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--t3); white-space: nowrap; }
.col-label small { color: #6c6b65; }
.bullet .cols-grid { bottom: 24px; }
.tick { position: absolute; left: 50%; transform: translate(-50%, 50%); width: min(32px, 92%); height: 3px; border-radius: 2px; background: #e8e7e2; }
.tick.short { background: #fab219; }
.live-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--t2); margin: 0 0 10px; }
.live-legend span { display: inline-flex; align-items: center; gap: 6px; }
.live-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.live-legend .sw-bar { background: var(--series); }
.live-legend .sw-tick { width: 14px; height: 3px; background: #e8e7e2; }
/* lists */
.live-people, .live-deps { list-style: none; margin: 0; padding: 0; display: grid; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.live-people li, .live-deps li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.live-people li:last-child, .live-deps li:last-child { border-bottom: 0; }
.live-people img, .lp-ph { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #333; }
.lp-main, .ld-main { flex: 1; min-width: 0; display: grid; }
.lp-main b, .ld-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-main span, .ld-main span { color: var(--t3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-time, .ld-side { display: grid; justify-items: end; text-align: right; }
.lp-time b { font-variant-numeric: tabular-nums; }
.lp-time span, .ld-side span { font-size: 12px; color: var(--t3); }
.lp-flag { font-style: normal; font-size: 11px; color: #fab219; }
.ld-date { width: 44px; flex-shrink: 0; text-align: center; border-radius: 10px; background: #2a2a27; color: var(--t3); font: 600 11px var(--font-head); text-transform: uppercase; padding: 4px 0; }
.ld-date b { display: block; font-size: 18px; color: var(--t1); line-height: 1.1; }
.live-deps li.now .ld-date { background: var(--series); color: #fff; }
.live-deps li.now .ld-side b { color: #6aa8ff; }
.ld-side .bad, .ls-val .bad { color: #ff6b62; } .ld-side .good, .ls-val .good { color: #3fcf6b; } .ls-val .warn { color: #fab219; }
/* stacked status bars */
.live-stacks { display: grid; gap: 14px; margin-top: 4px; }
.ls-row { display: grid; grid-template-columns: minmax(80px, 110px) 1fr minmax(70px, auto); align-items: center; gap: 12px; font-size: 13px; }
.ls-label { color: var(--t2); }
.ls-bar { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; background: #2a2a27; }
.ls-bar i { display: block; min-width: 3px; }
.ls-val { text-align: right; color: var(--t3); font-size: 12px; white-space: nowrap; }
/* horizontal bars */
.hb { display: grid; gap: 10px; }
.hb-row { display: grid; grid-template-columns: minmax(60px, 40%) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.hb-label { color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 12px; }
.hb-track i { display: block; height: 100%; min-width: 3px; background: var(--series); border-radius: 0 4px 4px 0; }
.hb-val { font-variant-numeric: tabular-nums; }
.live-tip { position: fixed; z-index: 200; background: #f0efec; color: #1a1a19; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.tip-bad { color: #d03b3b; font-weight: 700; }
@media (min-width: 1400px) and (min-height: 760px) {
  .live { height: 100vh; }
  .live-body { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: unset; }
}
@media (max-width: 1399px) {
  .live-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-onshift, .p-revenue, .p-cover, .p-upcoming, .p-hours, .p-comp, .p-depts { grid-column: span 6; }
}
@media (max-width: 760px) {
  .live-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-onshift, .p-revenue, .p-cover, .p-upcoming, .p-hours, .p-comp, .p-depts { grid-column: 1 / -1; }
  .live-brand span, .live-clock span { display: none; }
}

/* GuardProtect support mode */
.support-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px clamp(16px, 2.5vw, 32px); background: #1e3a8a; color: #dbeafe; font-size: 13px; }
.support-bar a { color: #fff; font-weight: 700; margin-left: auto; }

/* Billing */
.bill-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px clamp(16px, 2.5vw, 32px); background: #eff6ff; color: #1e3a8a; font-size: 13px; border-bottom: 1px solid #dbeafe; }
.bill-bar b { margin-left: auto; }
.bill-bar:hover { text-decoration: none; filter: brightness(.98); }
.bill-bar.warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.bill-bar.bad { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.billing-status .badge { font-size: 15px; padding: 4px 12px; }
.billing-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.billing-points li { display: flex; gap: 8px; align-items: flex-start; }
.billing-points .ico-sm { color: var(--green); margin-top: 2px; }
.auth-card.billing-only { max-width: 860px; }
.auth-card.billing-only .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ACT certificates sent by staff */
.act-up { margin: 4px 0 0; color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.act-pending td { background: #fffbeb; }
.act-pending-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Staff page: certificates to check */
.certs-card .card-head { margin-bottom: 8px; }
.cert-list { display: grid; }
.cert-person { padding: 12px 0; border-top: 1px solid #f0f0f0; }
.cert-person:first-child { border-top: 0; padding-top: 4px; }
.cert-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cert-who > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cert-doc { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 0 50px; padding: 8px 10px; background: #fafafa; border-radius: 10px; }
.cert-what { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cert-acts { display: inline-flex; gap: 6px; flex: none; }
.btn.ib { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn.ib .ico { width: 17px; height: 17px; margin: 0; }
.btn.ib-ok { color: #0a7a0a; border-color: #bfe3bf; }
.btn.ib-ok:hover { background: #ecf8ec; }
.btn.ib-no { color: #c2271b; border-color: #f0c4c0; }
.btn.ib-no:hover { background: #fdeeec; }
@media (max-width: 600px) { .cert-doc { margin-left: 0; flex-wrap: wrap; } }
.cert-empty { margin: 0; }

/* Chat group photos */
.chat-avatar.has-photo { background: #ddd; overflow: hidden; padding: 0; }
.chat-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-avatar-xl { width: 88px; height: 88px; font-size: 30px; }
.group-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }

/* Toolbars: search grows, filters stay compact on one row */
.toolbar { align-items: center; }
.toolbar select, .toolbar input:not([type=search]) { width: auto; min-width: 150px; }
@media (max-width: 640px) { .toolbar select, .toolbar input { width: 100%; } }

/* Sites */
.site-overview { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.map-card { padding: 10px !important; display: grid; gap: 8px; }
.site-map { height: clamp(260px, 38vh, 420px); border-radius: 12px; overflow: hidden; background: #e9eef3; z-index: 0; }
.map-empty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--muted); }
.plan-sections .field { margin-bottom: 14px; }
.plan-view section { margin-bottom: 18px; }
.plan-view h3 { margin: 0 0 6px; font-size: 16px; }
.plan-view p { margin: 0; }
.plan-meta { margin-bottom: 12px; }
.roster-templates { display: grid; gap: 10px; }
.rt-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid #ececec; border-radius: 12px; }
.rt-days { display: flex; gap: 4px; margin-top: 6px; }
.rt-days span { font: 600 11px var(--font-head); padding: 2px 6px; border-radius: 6px; background: #f1f1f1; color: #aaa; }
.rt-days span.on { background: var(--navy); color: #fff; }
.roster-table select.staff-multi { min-width: 180px; height: 74px; }
.site-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.site-card { display: grid; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.site-card:hover { border-color: var(--primary); }
.msg-system { align-self: center; background: #fff7d6; max-width: 92%; }
.print-plan { background: #fff; }
.print-plan .sheet { margin: 0 auto; }

/* Event deployment plan editor & view */
.control-toggle { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #f6f7fb; border: 1px dashed #d7dbe7; margin: 4px 0 12px; }
.control-toggle .btn { margin-left: auto; }
.plan-groups { display: grid; gap: 10px; }
.plan-group { border: 1px solid #ececec; border-radius: 12px; background: #fff; }
.plan-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; font: 700 15px var(--font-head); }
.plan-group > summary::-webkit-details-marker { display: none; }
.plan-group > summary::after { content: '▸'; color: #999; transition: transform .15s; }
.plan-group[open] > summary::after { transform: rotate(90deg); }
.plan-group > summary small { margin-left: auto; font: 500 12px var(--font-head); color: var(--muted); }
.plan-group[open] > summary { border-bottom: 1px solid #f0f0f0; }
.plan-group > .grid, .plan-group > .field, .plan-group > .plan-table { margin: 14px 16px; }
.plan-table h4 { margin-bottom: 6px; }
.plan-actions { position: sticky; bottom: 0; background: #fff; padding: 12px 0; border-top: 1px solid #f0f0f0; z-index: 2; }
.plan-block { margin-bottom: 22px; }
.plan-block h3 { font-size: 17px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); display: inline-block; }
.plan-sec { margin-bottom: 12px; }
.plan-sec h5 { margin: 0 0 3px; font: 700 13.5px var(--font-head); }
.plan-sec p { margin: 0; }
.plan-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.plan-facts div { background: #f6f6f6; border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.plan-facts span { font-size: 11.5px; color: var(--muted); }
.risk { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 700 11.5px var(--font-head); }
.risk-low { background: var(--green-bg); color: var(--green); } .risk-medium { background: #fff3d6; color: #92400e; }
.risk-high, .risk-very-high { background: var(--red-bg); color: var(--primary); }

/* Control room */
.cr .cr-head { flex-wrap: wrap; }
.cr-badge { display: inline-flex; align-items: center; gap: 6px; font: 800 12px var(--font-head); letter-spacing: .12em; background: var(--primary); color: #fff; padding: 6px 10px; border-radius: 8px; }
.cr .live-brand span[data-title] { border-left: 0; padding-left: 0; color: var(--t1); font-size: clamp(16px, 1.3vw, 22px); }
.cr-alert { display: flex; gap: 4px; background: #1a1a18; padding: 4px; border-radius: 12px; border: 1px solid var(--line); }
.cr-alert button { border: 0; background: none; color: var(--t3); font: 700 12.5px var(--font-head); padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.cr-alert button.on[data-alert=normal] { background: #0ca30c; color: #fff; }
.cr-alert button.on[data-alert=heightened] { background: #fab219; color: #1a1a19; }
.cr-alert button.on[data-alert=critical] { background: #d03b3b; color: #fff; }
.cr[data-alert=critical] { box-shadow: inset 0 0 0 4px #d03b3b; }
.cr[data-alert=heightened] { box-shadow: inset 0 0 0 4px #fab219; }
.cr-grid { flex: 1; min-height: 0; display: grid; gap: inherit; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr) minmax(260px, 1fr); }
.cr-grid > .live-panel { overflow-y: auto; }
.cr-occ-num { font: 800 clamp(48px, 5vw, 96px)/1 var(--font-head); letter-spacing: -.03em; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.cr-capbar { height: 10px; background: #2a2a27; border-radius: 6px; overflow: hidden; }
.cr-capbar i { display: block; height: 100%; width: 0; background: #0ca30c; transition: width .3s; }
.cr-capbar i.warn { background: #fab219; } .cr-capbar i.bad { background: #d03b3b; }
.cr-occ-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 6px; }
.cr-occ-btns button, .cr-counter button, .cr-close { border: 1px solid var(--line); background: #2a2a27; color: var(--t1); border-radius: 10px; padding: 10px 6px; font: 700 14px var(--font-head); cursor: pointer; }
.cr-occ-btns .in { border-color: #1f5f2a; } .cr-occ-btns .out { border-color: #6b2622; }
.cr-occ-btns button:active, .cr-counter button:active { transform: scale(.97); }
.cr-totals { color: var(--t3); }
.cr-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cr-counter { background: #262624; border-radius: 12px; padding: 8px 10px; display: grid; gap: 2px; }
.cr-counter span { font-size: 12px; color: var(--t2); }
.cr-counter b { font: 800 26px var(--font-head); }
.cr-counter div { display: flex; gap: 4px; }
.cr-counter button { flex: 1; padding: 4px; }
.cr-logform { display: grid; grid-template-columns: 140px 110px 160px 1fr auto; gap: 6px; margin: 4px 0 8px; }
.cr-logform select, .cr-logform input { background: #262624; color: var(--t1); border-color: var(--line); }
.cr-filter { font-size: 12.5px; color: var(--t3); margin-bottom: 6px; }
.cr-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow-y: auto; min-height: 0; }
.cr-entry { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: #262624; border-radius: 10px; border-left: 4px solid #555; }
.cr-entry.sev-medium { border-left-color: #fab219; } .cr-entry.sev-high { border-left-color: #ec835a; } .cr-entry.sev-critical { border-left-color: #d03b3b; background: #3a1f1d; }
.cr-entry.closed { opacity: .55; }
.cr-time { font: 700 13px var(--font-head); font-variant-numeric: tabular-nums; color: var(--t2); min-width: 44px; }
.cr-body { flex: 1; display: grid; gap: 2px; }
.cr-loc { font-size: 11.5px; background: #333; border-radius: 6px; padding: 0 6px; justify-self: start; color: var(--t2); }
.cr-text { white-space: pre-wrap; }
.cr-by { font-size: 11px; color: var(--t3); }
.cr-close { padding: 4px 10px; font-size: 12px; }
.cr-status { display: grid; gap: 8px; }
.cr-status label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); }
.cr-status select { width: auto; background: #262624; color: var(--t1); border-color: var(--line); padding: 6px 8px; }
.cr-mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.cr-mini span { color: var(--t3); }
.cr-mini a { color: #8ab4ff; }
.cr-off { margin: auto; text-align: center; max-width: 520px; display: grid; gap: 12px; justify-items: center; padding: 40px 20px; }
@media (min-width: 1200px) { .cr { height: 100vh; } }
@media (max-width: 1100px) { .cr-grid { grid-template-columns: 1fr; } .cr-logform { grid-template-columns: 1fr 1fr; } .cr-logform input[name=text] { grid-column: 1 / -1; } }

/* Client portal (profile layout) */
.cp-narrow { max-width: 920px; margin: 0 auto; }
.cp .page-head h2 { margin: 0; }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.doc-list li { display: flex; gap: 12px; align-items: center; }
.doc-main { display: grid; min-width: 0; }
.doc-main a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clickable-li { cursor: pointer; border-radius: 10px; padding: 4px; margin: -4px; }
.clickable-li:hover { background: #f6f6f6; }
.site-hero .site-cover { height: clamp(200px, 30vh, 320px); padding: 0; display: block; background: #e9eef3; }
.site-hero .profile-id { padding-top: 16px; }
.site-card .kit-ico { margin-bottom: 4px; }
@media (max-width: 759px) { .cp-upload-btn span { display: none; } }
/* Full-screen boards (live display, control room): no banners */
body.live-mode .bill-bar, body.live-mode .support-bar, body.live-mode .app-banner { display: none !important; }

/* Events (site → events → deployments) */
.event-list { display: grid; gap: 8px; }
.event-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border, #e3e6ee); border-radius: 12px; background: var(--card, #fff); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.event-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.event-card > .ico-sm { margin-left: auto; flex-shrink: 0; opacity: .5; }
.event-date { width: 52px; flex-shrink: 0; text-align: center; border-radius: 10px; background: var(--red-bg); color: var(--primary); font: 600 11px var(--font-head); text-transform: uppercase; padding: 6px 0; }
.event-date b { display: block; font-size: 20px; line-height: 1.1; color: var(--text); }
.event-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.event-cover { display: flex; align-items: flex-end; padding: 16px 20px; background: linear-gradient(135deg, var(--primary), #1d2433); }
.event-date-lg { width: 76px; background: #fff; }
.event-date-lg b { font-size: 28px; }
.profile-cover.event-cover { height: 140px; min-height: 0; }

/* Dot plans (event → Dot plan tab, and read-only in the control room) */
.dp-card .card-head { flex-wrap: wrap; gap: 10px; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--card); color: inherit; font: 600 13px var(--font-head, inherit); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.chip.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.chip.active .muted { color: rgba(255,255,255,.8); }
.dp-empty { text-align: center; padding: 40px 16px; }
.dp-empty p { max-width: 520px; margin: 8px auto 16px; }
.dp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.dp-stage { position: relative; isolation: isolate; z-index: 0; }
.dp-map { height: min(72vh, 760px); border-radius: 12px; overflow: hidden; background: #e9ecf2; border: 1px solid var(--border); }
.dp-map.dp-adding, .dp-map.dp-adding .leaflet-interactive { cursor: crosshair; }
.dp-tools { position: absolute; left: 56px; top: 10px; z-index: 500; display: flex; gap: 8px; align-items: center; }
.dp-tools .btn.active { background: #16a34a; border-color: #16a34a; }
.dp-hint { background: rgba(17,24,39,.85); color: #fff; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; }
.dp-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: min(72vh, 760px); }
.dp-side input[type=search] { width: 100%; }
.dp-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.dp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dp-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dp-legend b { color: var(--text); }
.dp-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; border: 1px solid var(--border); border-radius: 10px; }
.dp-list li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.dp-list li:last-child { border-bottom: 0; }
.dp-list li:hover { background: rgba(0,0,0,.03); }
.dp-list li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dp-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-dot-wrap { background: none; border: 0; }
.dp-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); font: 800 10px/1 var(--font-head, sans-serif); letter-spacing: -.02em; overflow: hidden; white-space: nowrap; }
.dp-dot-open { background: #fff; color: var(--c); border: 2px dashed var(--c); }
.dp-dot-sm { width: 14px; height: 14px; flex-shrink: 0; border-width: 2px; box-shadow: none; }
.dp-pop { font-size: 13px; }
.dp-pop-role { display: inline-block; font: 700 11px var(--font-head, sans-serif); text-transform: uppercase; letter-spacing: .06em; color: var(--c); margin-bottom: 2px; }
.dp-pop-name { display: block; font-size: 16px; margin-bottom: 6px; }
.dp-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.dp-pop dt { color: #6b7280; }
.dp-pop dd { margin: 0; }
.dp-pop-actions { display: flex; gap: 6px; margin-top: 10px; }
@media (max-width: 900px) {
  .dp { grid-template-columns: 1fr; }
  .dp-map { height: 60vh; }
  .dp-side { max-height: none; }
  .dp-list { max-height: 320px; }
}
/* Control room overlay */
.cr-dots { position: fixed; inset: 0; z-index: 2000; background: #111110; display: flex; flex-direction: column; padding: 14px; gap: 12px; }
.cr-dots-head { display: flex; align-items: center; gap: 14px; color: var(--t1, #fff); }
.cr-dots-head .live-btn { margin-left: auto; }
.cr-dots-body { flex: 1; min-height: 0; }
.cr-dots .dp { height: 100%; }
.cr-dots .dp-map, .cr-dots .dp-side { height: 100%; max-height: none; }
.cr .dp-side { background: #1a1a18; border-radius: 12px; padding: 10px; color: #eee; }
.cr .dp-list { border-color: #333; }
.cr .dp-list li { border-color: #333; }
.cr .dp-list li:hover { background: #262624; }
.cr .dp-legend b { color: #fff; }
.cr .chip { background: #1a1a18; border-color: #333; color: #ddd; }
.cr .chip.active { background: var(--primary); color: #fff; }
.dp-share { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: #f6f7fb; border: 1px dashed #d7dbe7; }
/* Dot plan print: plan + dots on page 1, then the list */
body.pp { margin: 0; padding: 0; }
.pp-sheet { max-width: none; width: 277mm; padding: 0; margin: 0 auto; box-sizing: border-box; border: 0; border-radius: 0; overflow: visible; }
.pp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.pp-head h1 { margin: 0; }
.pp-head p { margin: 2px 0 0; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.pp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pp-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.pp-legend i.pp-open { border: 2px dashed #475569; width: 9px; height: 9px; }
.pp-stage { position: relative; width: 100%; margin: 0 auto 12px; border: 1px solid #ccc; overflow: hidden; break-inside: avoid; page-break-after: always; }
.pp-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pp-stage.pp-map { width: 277mm; height: 165mm; }
.pp-stage > .pp-dot { position: absolute; transform: translate(-50%, -50%); }
.pp-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; overflow: visible; }
html:has(.pp), .pp { background: #fff; }
.pp-table .pp-dot { width: 30px; height: 30px; }
.pp-listhead { margin: 0 0 8px; }
@media print { .pp-stage { page-break-after: always; } }

/* Control room: left column (occupancy, footfall, counters) · centre (dot plan, log) · right (status, deployments, staff) */
.cr .cr-grid { grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr) minmax(260px, 1fr); }
.cr-col { display: flex; flex-direction: column; gap: inherit; min-height: 0; overflow-y: auto; }
.cr-col > .live-panel { flex: none; overflow: visible; }
.cr-center { display: grid; grid-template-rows: auto minmax(0, 1.15fr) minmax(0, 1fr); gap: inherit; min-height: 0; min-width: 0; }
.cr-center > .live-panel { overflow: hidden; }
.cr-log { overflow-y: auto !important; }
.cr-dotpanel h3 .dp-chips { margin-left: auto; color: inherit; font: inherit; }
.cr-dotpanel h3 .dp-chips + .cr-mini-btn { margin-left: 6px; }
.cr-dotpanel h3 .dp-chips:empty + .cr-mini-btn { margin-left: auto; }
.cr-mini-btn { width: 30px; height: 30px; }
.cr .chip { padding: 4px 10px; font-size: 12px; }
.cr-dotmount { flex: 1; min-height: 0; }
.cr-dotmount .dp { height: 100%; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; }
.cr-dotmount .dp-map { height: 100%; min-height: 220px; }
.cr-dotmount .dp-side { max-height: none; height: 100%; padding: 8px; gap: 8px; }
.cr-dotmount .dp-side input[type=search] { padding: 6px 10px; font-size: 13px; }
.cr .dp-side input[type=search] { background: #121211; color: var(--t1); border-color: #333; }
.cr .dp-legend { color: var(--t3); }
.cr .dp-list li .muted { color: var(--t3); }
.cr .dp-foot .btn { background: #262624; color: var(--t1); border-color: #333; }
.cr-seg { display: inline-flex; gap: 2px; background: #1a1a18; border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin: 2px 0 8px; align-self: flex-start; }
.cr-seg button { border: 0; background: none; color: var(--t3); font: 700 12px var(--font-head); padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.cr-seg button.on { background: #2f2f2b; color: var(--t1); }
.cr-foot-title { margin-left: 0 !important; color: var(--t1) !important; font: 700 15px var(--font-head) !important; }
.cr-chart { min-height: 160px; }
.cr-chart svg { display: block; overflow: visible; }
.cr-gl { stroke: #2c2c29; stroke-width: 1; }
.cr-base { stroke: #4a4a44; stroke-width: 1; }
.cr-ax { fill: var(--t3); font: 600 10.5px var(--font-head); }
.cr-bar { fill: var(--series); }
.cr-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cr-hit { fill: transparent; }
.cr-hit:hover { fill: rgba(255,255,255,.05); }
.cr-peaklbl { fill: var(--t1); font: 700 11px var(--font-head); }
.cr-peak { color: var(--t2); margin: 6px 0 0; }
.cr-peak b { color: var(--t1); }
.cr-deps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-deps > li { background: #1a1a18; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.cr-deps > li.today { border-color: #2f4566; }
.cr-dep-head { display: flex; justify-content: space-between; gap: 8px; }
.cr-dep-head span { color: var(--t2); white-space: nowrap; font-weight: 700; }
.cr-dep-head .cr-short { color: #ff8a80; }
.cr-dep-time { display: block; color: var(--t3); font-size: 12px; margin-top: 2px; }
.cr-deps details { margin-top: 4px; }
.cr-deps summary { cursor: pointer; color: var(--t2); font-size: 12px; }
.cr-deps details ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.cr-deps details li span { color: var(--t3); }
.cr .cr-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .cr .cr-grid { grid-template-columns: 1fr 1fr; }
  .cr-center { grid-column: 1 / -1; order: -1; grid-template-rows: auto 60vh auto; }
}
@media (max-width: 760px) {
  .cr .cr-grid { grid-template-columns: 1fr; }
  .cr-dotmount .dp { grid-template-columns: 1fr; }
  .cr-dotmount .dp-side { height: auto; max-height: 260px; }
}
@media (min-width: 1201px) { .live.cr { height: 100vh; } }

/* Events overview (all events, all sites) */
.viewseg { display: inline-flex; gap: 2px; background: #f1f1f4; border-radius: 10px; padding: 3px; }
.viewseg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: 600 13px var(--font-head); padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.viewseg button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ev-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ev-toolbar input[type=search] { flex: 1 1 240px; }
.ev-month { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: 15px; }
.ev-month:first-child { margin-top: 4px; }
.ev-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 150px 96px auto; }
.ev-staff { display: grid; gap: 3px; justify-items: start; }
.ev-staff b { font-size: 14px; }
.ev-bar { width: 120px; height: 6px; border-radius: 4px; background: #eceef3; overflow: hidden; }
.ev-bar i { display: block; height: 100%; border-radius: 4px; }
.ev-bar i.full { background: var(--green); } .ev-bar i.mid { background: var(--amber); } .ev-bar i.low { background: var(--red, #d03b3b); }
.ev-when { font: 600 12.5px var(--font-head); color: var(--muted); text-align: right; }
.ev-when.now { color: var(--green); }
@media (max-width: 760px) {
  .ev-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ev-row .ev-staff { grid-column: 2; }
  .ev-row .ev-when { grid-column: 2; text-align: left; }
  .ev-row > .ico-sm { grid-row: 1; grid-column: 3; }
}
.cal-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.cal-head h3 { margin: 0 8px; min-width: 170px; text-align: center; }
.cal { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-dow, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow span { padding: 6px 8px; font: 600 12px var(--font-head); color: var(--muted); background: #fafafa; border-bottom: 1px solid var(--border); }
.cal-day { min-height: 104px; padding: 4px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-week:last-child .cal-day { border-bottom: 0; }
.cal-day:last-child { border-right: 0; }
.cal-day.out { background: #fafafa; }
.cal-day.out .cal-num { color: #bbb; }
.cal-day.today .cal-num { background: var(--primary); color: #fff; }
.cal-num { align-self: flex-start; font: 600 12px var(--font-head); padding: 2px 6px; border-radius: 999px; }
.cal-ev { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 3px 6px; font: 600 11.5px var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #fff; background: #6b7280; }
.cal-ev.st-planning { background: #92400e; } .cal-ev.st-confirmed { background: #15803d; } .cal-ev.st-live { background: #2563eb; } .cal-ev.st-completed { background: #6b7280; } .cal-ev.st-cancelled { background: #b91c1c; opacity: .6; }
.cal-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key .cal-ev { width: 12px; height: 12px; padding: 0; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) { .cal-day { min-height: 70px; } .cal-ev { font-size: 10px; padding: 2px 3px; } }
.cr-h-title { white-space: nowrap; font: inherit; }
.cr-dotpanel h3 .dp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.cr-side h3.mt, .cr-side .mt { margin-top: 16px; }
.cr-side .cr-status { margin-bottom: 4px; }
.cr-deps .live-empty { list-style: none; background: none; border: 0; padding: 4px 0; text-align: left; }

/* Football fixtures */
.fx-card { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 16px; padding: 6px 0; }
.fx-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.fx-team b { font: 700 clamp(15px, 1.4vw, 20px) var(--font-head); }
.fx-crest { width: 64px; height: 64px; object-fit: contain; }
.fx-crest-x { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef0f5; font: 800 26px var(--font-head); color: var(--muted); }
.fx-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.fx-ko, .fx-score { font: 800 clamp(30px, 3vw, 44px)/1 var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fx-date { color: var(--muted); font-size: 13px; }
.fx-until { font: 700 12px var(--font-head); color: var(--primary); }
.fx-meta { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13px; }
.fx-compact { gap: 4px 10px; padding: 0; }
.fx-compact .fx-crest { width: 30px; height: 30px; }
.fx-compact .fx-crest-x { font-size: 14px; }
.fx-compact .fx-team { flex-direction: row; gap: 6px; }
.fx-compact .fx-team:first-child { justify-content: flex-end; text-align: right; }
.fx-compact .fx-team:first-child b { order: -1; }
.fx-compact .fx-team b { font-size: 14px; }
.fx-compact .fx-ko, .fx-compact .fx-score { font-size: 18px; }
.fx-compact .fx-date { font-size: 11.5px; }
.fx-modal { display: grid; gap: 14px; }
.fx-home { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fx-home > .fx-crest { width: 44px; height: 44px; }
.fx-home > span { display: flex; flex-direction: column; flex: 1; }
.fx-home .fx-search, .fx-home .fx-results { flex-basis: 100%; }
.fx-search { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-search input { flex: 1 1 220px; }
.fx-results { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.fx-results:empty { display: none; }
.fx-result { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.fx-result:hover { border-color: var(--primary); }
.fx-result .fx-crest { width: 32px; height: 32px; }
.fx-result > span { display: flex; flex-direction: column; }
.fx-pick { flex-direction: column; align-items: stretch; gap: 2px; }
.fx-pick > .small { text-align: center; }
.fx-pick.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.brief-h { margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; }
#briefForm .brief-h:first-of-type { border-top: 0; padding-top: 0; }

/* Deployment requirements */
.req-empty { text-align: center; padding: 36px 16px; }
.req-empty p { max-width: 640px; margin: 8px auto 16px; }
.req-empty .actions { justify-content: center; }
.req-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.req-toolbar input[type=search] { flex: 1 1 240px; }
.req-table td { vertical-align: top; }
.req-staff { min-width: 230px; }
.req-pick { display: flex; align-items: center; gap: 6px; }
.req-pick input { flex: 1; min-width: 140px; padding: 5px 8px; font-size: 13px; }
.req-staff > .small { display: block; margin-top: 4px; }
.req-staff .btn-xs { margin-top: 4px; }
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 7px; }
.req-none .req-pick input { border-color: var(--red, #d03b3b); }
.req-likely .req-pick input { border-color: var(--amber); }
.fx-away { opacity: .75; }
.fx-away:hover, .fx-away.on { opacity: 1; }
.reuse-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reuse-card h3 { margin: 0 0 2px; }
.reuse-card p { margin: 0; }
.tpl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tpl-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.tpl-list li > div { display: flex; flex-direction: column; min-width: 0; }

/* Staff import */
.imp-drop { text-align: center; padding: 32px 16px; border: 2px dashed var(--border); }
.imp-drop.over { border-color: var(--primary); background: rgba(0,0,0,.02); }
.imp-drop > div .ico { width: 34px; height: 34px; color: var(--muted); }
.imp-drop p { max-width: 720px; margin: 6px auto 12px; }
.imp-opts { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 8px 0; }
.imp-opts label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.imp-tabs { overflow-x: auto; }
.imp-table td { vertical-align: top; }
.imp-diff, .imp-warn { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; }
.imp-diff span { display: inline-block; min-width: 150px; color: var(--muted); }
.imp-diff s { color: var(--muted); }
.imp-warn li::before { content: "⚠ "; color: var(--amber); }
.imp-apply { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; box-shadow: 0 6px 24px rgba(0,0,0,.12); z-index: 5; }
.imp-done h3 { display: flex; align-items: center; gap: 8px; color: var(--green); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 10px; }
.pager > span { margin-right: auto; }
.cr-updated { color: var(--t3); white-space: nowrap; }
.live-btn.spin .ico { animation: crspin 0.8s linear infinite; }
@keyframes crspin { to { transform: rotate(360deg); } }
/* Staff picker pop-up */
.picker-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-bar input[type=search] { flex: 1 1 260px; }
.picker-sum { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 8px 0; font-size: 13px; color: var(--muted); }
.picker-all { display: inline-flex; gap: 6px; margin-left: auto; }
.picker-list { display: grid; gap: 4px; max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.picker-row.on { border-color: var(--primary); background: rgba(0,0,0,.02); }
.picker-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.picker-sia { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.team-table td { vertical-align: middle; }
.picker-bar select { width: auto; flex: 0 1 220px; }
.action-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.action-card h3 { margin: 0 0 2px; }
.action-card p { margin: 0; }
.dash-alert-btn.has-alerts { border-color: var(--red, #d03b3b); color: var(--red, #d03b3b); font-weight: 700; }
.dash-dept { width: auto; min-width: 200px; }
.dash-staff .stat { text-align: left; font: inherit; cursor: default; }
.dash-staff button.stat { cursor: pointer; }
.dash-cred td, .dash-cred th { text-align: center; }
.dash-cred td:first-child, .dash-cred th:first-child { text-align: left; }
.dash-cred .dash-bad { font-weight: 700; color: var(--red, #d03b3b); }
.dash-cred .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.dash-alert-list { max-height: 60vh; overflow-y: auto; }
/* Qualifications chart (staff overview) */
.qchart-wrap { overflow-x: auto; }
.qchart { display: block; width: 100%; height: auto; }
.q-grid { stroke: #ececec; }
.q-base { stroke: #bbb; }
.q-ax { fill: var(--muted); font: 600 11px var(--font-head); }
.q-bar { fill: var(--navy); }
.q-val { fill: var(--text); font: 700 11px var(--font-head); }
.q-lbl { fill: var(--text); font: 500 11px var(--font-head); }
.q-hit { fill: transparent; }
.q-col { cursor: pointer; outline: none; }
.q-col:hover .q-hit, .q-col:focus .q-hit { fill: rgba(0,0,0,.04); }
.q-col:hover .q-bar { fill: var(--primary); }
.q-tip { position: fixed; z-index: 200; background: #1f1f1d; color: #f0efec; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.q-tip .muted { color: #b5b4ac; }
.qchart { width: auto; max-width: none; }
.page-head .actions select { width: auto; }

/* Import pop-up */
.imp-menu { display: grid; gap: 10px; }
.imp-menu-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; }
.imp-menu-item:hover { border-color: var(--primary); background: var(--bg); }
.imp-menu-item > span { display: flex; flex-direction: column; gap: 3px; }
.imp-menu-item .ico { flex: none; margin-top: 2px; }
.imp-types { display: grid; gap: 6px; }
.imp-type { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.imp-type.off { opacity: .55; }
.imp-type input[type=text] { width: 100%; }
@media (max-width: 640px) { .imp-type { grid-template-columns: auto 1fr; } .imp-type > :last-child { grid-column: 1 / -1; } }

/* Supervisor picker on the deployment form */
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }

/* Supervisor's event view (staff app) */
.sv { display: grid; gap: 14px; min-width: 0; }
.sv > * { margin: 0; }
.sv-back { justify-self: start; }
.sv-hero { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.sv-hero-main { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 320px; }
.sv-hero h1 { margin: 0 0 2px; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.sv-date { flex: none; width: 58px; height: 62px; border-radius: 10px; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .75rem; text-transform: uppercase; }
.sv-date b { font-size: 1.5rem; line-height: 1; }
.sv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 5; }
.sv-tabs::-webkit-scrollbar { display: none; }
.sv-tabs button { flex: none; border: 0; background: none; padding: 9px 14px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.sv-tabs button.active { background: var(--navy); color: #fff; }
.sv-tabs button.active .muted { color: rgba(255,255,255,.75); }
[data-sv-pane] { display: grid; gap: 14px; min-width: 0; }
[data-sv-pane] > .card { margin: 0; }
.sv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-stats .stat { margin: 0; }
.sv-dep .card-head { flex-wrap: wrap; gap: 8px; }
.sv-dep-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sv-h { margin: 14px 0 6px; font-size: .95rem; }
.sv-team { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; }
.sv-team li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; flex-wrap: wrap; }
.sv-team li + li { border-top: 1px solid var(--border); }
.sv-team-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.sv-team-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sv-docs a { color: inherit; }
.sv-home { border-left: 4px solid var(--blue); }
.sv-home .card-head h3 { display: flex; align-items: center; gap: 6px; }
.sv-home-row { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sv-home-row > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv .dp-stage { min-height: 360px; }
@media (max-width: 640px) {
  .sv-stats { grid-template-columns: 1fr 1fr; }
  .sv-stats .stat:last-child { grid-column: 1 / -1; }
  .sv-actions, .sv-actions .btn { width: 100%; }
  .sv-actions .btn { justify-content: center; }
  .sv-tabs { top: calc(62px + env(safe-area-inset-top)); }
  .sv .dl { grid-template-columns: 1fr; }
}
.sv-contact { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Settings: check all SIA licences */
.sia-job-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sia-progress { height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden; margin: 6px 0; }
.sia-progress span { display: block; height: 100%; background: var(--green); border-radius: 6px; transition: width .4s; }
.sia-stats { margin: 12px 0; }
.stat-warn { border-color: var(--amber); } .stat-warn b { color: var(--amber); }
.sia-probs { max-height: 360px; overflow: auto; }
.sia-nums { display: grid; gap: 6px; }

/* Public quote: toolbar above the letterhead; deposit; terms */
.quote-toolbar { position: sticky; top: 0; z-index: 5; max-width: 860px; margin: 16px auto -8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.06); font-size: 14px; }
.quote-toolbar .actions { margin: 0; flex-wrap: nowrap; }
@media (max-width: 640px) { .quote-toolbar { margin: 0; border-radius: 0; border-width: 0 0 1px; } .quote-toolbar > span { font-size: 13px; } }
.totals .deposit-row { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }
.totals .deposit-row span { display: flex; flex-direction: column; }
.totals .deposit-row small { color: var(--muted); font-size: 12px; font-weight: 400; }
.quote-terms { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
.quote-terms h3 { font-size: 15px; margin: 0 0 6px; }
.quote-terms .pre { font-size: 12.5px; line-height: 1.55; color: #333; }
@media print { .quote-terms { break-inside: auto; } .quote-terms h3 { break-after: avoid; } }
.terms-pick { display: grid; gap: 8px; margin: 6px 0 12px; }
.terms-pick details { margin-left: 26px; }
.terms-pick details .pre { max-height: 220px; overflow: auto; background: var(--bg); border-radius: 8px; padding: 10px; font-size: 12.5px; }

/* Office alerts bell (top bar) */
.alerts-menu { position: relative; }
.alerts-btn { position: relative; }
.alerts-btn.has-new { color: var(--primary); }
.alerts-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font: 700 11px/18px var(--font-head); text-align: center; }
.alerts-pop { width: min(380px, calc(100vw - 24px)); max-height: min(520px, 75vh); overflow: auto; padding: 0; }
.alerts-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; }
.alerts-list { list-style: none; margin: 0; padding: 4px; }
.user-pop .alert-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border: 0; background: none; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.user-pop .alert-item:hover { background: #f4f4f4; }
.alert-item.unread { background: var(--blue-bg); }
.alert-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-weight: 400; }
.alert-main b { font-family: var(--font-head); font-size: 14px; }
.alert-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.alert-ico.ok { background: var(--green-bg); color: var(--green); } .alert-ico.bad { background: var(--red-bg); color: var(--red); }
.alert-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: 6px; }
.alerts-pop .empty { padding: 14px; }
.user-pop .alerts-head .link-btn { width: auto; padding: 4px 8px; color: var(--primary); font-size: 13px; }
.quote-page #respond { margin-top: 24px; scroll-margin-top: 80px; }

/* Staff overview: clickable bars */
button.bar-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
button.bar-row:hover, button.bar-row:focus-visible { background: var(--bg); }
button.seg { border: 0; padding: 0; cursor: pointer; }
.cred-counts .link-btn { font: inherit; color: inherit; text-decoration: underline dotted; }
.people-list { max-height: 60vh; overflow: auto; }

/* Staff profile: drop a picture anywhere to set the photo */
.photo-drop { position: relative; }
.photo-drop::after { content: attr(data-drop-label); position: fixed; inset: 12px; z-index: 120; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
  border: 3px dashed var(--primary); border-radius: 18px; background: rgba(255,255,255,.88); color: var(--text); font: 700 22px var(--font-head); pointer-events: none; }
.avatar-btn.busy { opacity: .5; pointer-events: none; }
.pref-imp { max-height: 50vh; overflow: auto; }
.pref-gap { max-height: 55vh; overflow: auto; }
.shift-imp { max-height: 48vh; overflow: auto; } .site-map { display: grid; gap: 8px; margin-top: 10px; } .site-map label { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .site-map select { min-width: 260px; } .imp-stats { margin: 4px 0 10px; }

/* Deployment attendance */
.att-cell select { min-width: 130px; font-weight: 600; }
.att-cell select.att-confirmed { color: var(--blue); border-color: var(--blue); }
.att-cell select.att-attended { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.att-cell select.att-blowout { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.blow-detail { color: var(--red); margin-top: 4px; max-width: 360px; }
.rel-stats { margin-bottom: 12px; }
.att-cell { width: 210px; } .att-cell select { width: 100%; }

/* Help & support */
.help-search { position: relative; margin-bottom: 12px; }
.help-search span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.help-search input { width: 100%; padding: 14px 14px 14px 44px; font-size: 16px; border-radius: 12px; }
.help-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.help-cats .chip { display: inline-flex; align-items: center; gap: 6px; }
.help-group { margin-bottom: 22px; }
.help-group h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 10px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.help-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.help-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(0,0,0,.06); text-decoration: none; }
.help-card b { font-family: var(--font-head); font-size: 15px; }
.help-card span { color: var(--muted); font-size: 13px; }
.help-card small { margin-top: auto; padding-top: 6px; color: var(--primary); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.help-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.help-steps li { counter-increment: step; position: relative; padding: 4px 0 4px 48px; font-size: 15px; line-height: 1.55; }
.help-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font: 700 15px/32px var(--font-head); text-align: center; }
.help-tips { margin-top: 20px; padding: 14px 16px; background: var(--blue-bg); border-radius: 10px; }
.help-tips b { display: flex; align-items: center; gap: 6px; color: var(--blue); }
.help-tips ul { margin: 6px 0 0; padding-left: 20px; }

/* Staff documents shared with the client */
.share-on { font-size: 15px; margin: 4px 0 10px; }
.share-types { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px 26px; }
.sd-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin: 8px 0; background: var(--blue-bg); border-radius: 10px; }
.sd-name { font-weight: 600; color: var(--primary); text-align: left; }
.sd-list { display: grid; gap: 12px; max-height: 60vh; overflow: auto; }
.sd-person { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.sd-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sd-row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.sd-label { font-weight: 600; font-size: 13px; color: var(--muted); }
.sd-docs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 560px) { .sd-row { grid-template-columns: 1fr; gap: 4px; } }
.sd-head { flex-direction: row; align-items: center; gap: 12px; }
.sd-head > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.sd-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--bg); }
.sd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-stats { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; margin-left: 8px; }
.share-log { max-height: 40vh; overflow: auto; }

/* Public upload page (staff send documents through a link) */
.up-page { max-width: 560px; margin: 0 auto 40px; padding: 0 16px; }
.up-page .quote-banner { margin: 0 -16px 20px; border-radius: 0; }
.up-page h1 { margin: 0 0 6px; font-size: 28px; }
.up-lead { font-size: 16px; line-height: 1.5; }
.up-note { background: var(--card); border-left: 4px solid var(--primary); padding: 10px 12px; border-radius: 6px; }
.up-card { margin: 14px 0; }
.up-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 17px; }
.up-tick { display: none; align-items: center; gap: 4px; color: var(--green); font-size: 14px; font-weight: 700; }
.up-card.sent { border-color: var(--green); }
.up-card.sent .up-tick { display: inline-flex; }
.up-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.up-row input[data-code] { flex: 1; min-width: 160px; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.up-pick { flex: 1; min-width: 200px; justify-content: center; overflow: hidden; }
.up-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-card label.small { display: grid; gap: 4px; margin-top: 8px; }
.up-msg.ok { color: var(--green); font-weight: 600; } .up-msg.bad { color: var(--red); font-weight: 600; }
.up-foot { margin-top: 18px; text-align: center; }

/* Request documents */
.dr-items { display: grid; gap: 6px; margin-bottom: 8px; }
.dr-who { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dr-chosen { margin: 10px 0; }
.dr-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-height: 140px; overflow: auto; }
.dr-results { max-height: 50vh; overflow: auto; }
.dr-wa { color: #128c4b; border-color: #128c4b; }
.dr-stats { margin: 8px 0; }
.dr-sms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .dr-sms > span:first-child { font-weight: 600; }
.sms-stats .stat small { display: block; margin-top: 2px; }

/* Deployments planner (Gantt) */
.seg-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.seg-switch a, .seg-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font: 600 14px var(--font-head); color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: none; }
.seg-switch a + a, .seg-switch button + button { border-left: 1px solid var(--border); }
.seg-switch .active { background: var(--navy); color: #fff; }
.seg-switch.sm a, .seg-switch.sm button { padding: 6px 11px; font-size: 13px; }
.gp-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 16px; }
.gp-nav { display: flex; gap: 6px; align-items: center; }
.gp-range { margin-left: 8px; font-family: var(--font-head); font-size: 16px; }
.gp-opts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.gp-opts select { width: auto; min-width: 0; padding-top: 6px; padding-bottom: 6px; }
.gp-opts label { white-space: nowrap; }
.gp-opts label.small { display: inline-flex; align-items: center; gap: 6px; }
.gp-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 4px 2px 8px; font-size: 14px; }
.gp-sum { display: inline-flex; align-items: center; gap: 6px; }
.gp-sum i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gp-sum.full i, .gp-sf-full, .gp-sw.gp-sf-full { background: #0ca30c; }
.gp-sum.most i, .gp-sf-most, .gp-sw.gp-sf-most { background: #fab219; }
.gp-sum.low i, .gp-sf-low, .gp-sw.gp-sf-low { background: #d03b3b; }
.gp-sum.none i, .gp-sf-none, .gp-sw.gp-sf-none { background: #9a9890; }
.gp-st-planned { background: #2a78d6; } .gp-st-confirmed { background: #0f8a5f; } .gp-st-completed { background: #9a9890; } .gp-st-cancelled, .gp-sf-cancelled { background: #c3c2b7; }
.gp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin: 0 2px 10px; }
.gp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gp-sw { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.gp-card { padding: 0; overflow: hidden; }
.gp-scroll { overflow: auto; max-height: calc(100vh - 290px); }
.gp { position: relative; display: grid; grid-template-columns: var(--side) var(--W); width: calc(var(--side) + var(--W)); }
.gp-corner, .gp-head { position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--border); }
.gp-corner { left: 0; z-index: 4; display: flex; align-items: flex-end; padding: 10px 14px; font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-right: 1px solid var(--border); }
.gp-head { display: flex; }
.gp-day { position: relative; flex: none; width: var(--dayW); padding: 8px 0 6px; text-align: center; border-left: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.gp-day span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.gp-day b { font: 700 16px var(--font-head); }
.gp-day em { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.gp-day.wk { background: #f6f6f4; }
.gp-day.today b { color: #fff; background: var(--primary); border-radius: 50%; width: 26px; height: 26px; line-height: 26px; }
.gp-site { position: sticky; left: 0; z-index: 2; background: var(--card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.gp-site b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-row { position: relative; border-bottom: 1px solid var(--border); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--dayW) - 1px), var(--border) calc(var(--dayW) - 1px), var(--border) var(--dayW)); }
.gp-wk { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.025); pointer-events: none; }
.gp-bar-item { position: absolute; height: 38px; border: 0; border-radius: 7px; padding: 3px 8px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 1px; color: #fff; font: 600 12px var(--font-head); cursor: pointer; overflow: hidden; box-shadow: 0 0 0 2px var(--card); text-align: left; }
.gp-bar-item:hover, .gp-bar-item:focus-visible { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--card), 0 3px 10px rgba(0,0,0,.18); z-index: 1; }
.gp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.gp-sub { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; opacity: .95; white-space: nowrap; overflow: hidden; }
.gp-sub > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.gp-bar-item.tiny { align-items: center; padding: 0; }
.gp-num { flex: none; background: rgba(0,0,0,.18); border-radius: 4px; padding: 1px 5px; font-variant-numeric: tabular-nums; }
.gp-sf-most, .gp-st-cancelled, .gp-sf-cancelled { color: #1f1f1f; }
.gp-sf-most .gp-num, .gp-sf-cancelled .gp-num, .gp-st-cancelled .gp-num { background: rgba(0,0,0,.1); }
.gp-bar-item.is-cancelled { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.45) 6px 9px); text-decoration: line-through; }
.gp-bar-item.is-done { opacity: .7; }
.gp-bar-item.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gp-bar-item.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gp-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); z-index: 2; pointer-events: none; }
.gp-now::before { content: ''; position: absolute; top: 46px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.gp-pop-top { display: flex; gap: 6px; margin-bottom: 10px; }
.gp-meter { height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden; max-width: 320px; margin-bottom: 4px; }
.gp-meter span { display: block; height: 100%; border-radius: 6px; }
.gp-team { max-height: 40vh; overflow: auto; }
.text-red { color: var(--red); }
@media (max-width: 700px) { .gp-site { padding: 8px 10px; } }

/* Duplicate / templates */
.dup-dates { display: grid; gap: 6px; margin-bottom: 8px; }
.dup-row { display: flex; align-items: center; gap: 10px; }
.dup-row input { max-width: 200px; }
.tpl-box { border-left: 4px solid var(--primary); }
.tpl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tpl-row select { flex: 1; min-width: 220px; }
.tpl-row input[type=date] { max-width: 180px; }

/* Repeating deployments */
.rep-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.rep-day input { position: absolute; opacity: 0; pointer-events: none; }
.rep-day span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font: 600 14px var(--font-head); cursor: pointer; background: var(--card); }
.rep-day input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.rep-day input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.rep-preview { margin-top: 12px; padding: 12px; background: var(--bg); border-radius: 10px; }
.rep-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 160px; overflow: auto; }
.rep-list span, .rep-list a { padding: 4px 8px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text); text-decoration: none; }
.rep-list.series a { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
.rep-list.series a small { color: var(--muted); font-size: 11px; }
.rep-list.series a.here { border-color: var(--primary); background: var(--red-bg); font-weight: 700; }
.rep-list.series a.cancelled { text-decoration: line-through; opacity: .6; }
.series-box { border-left: 4px solid var(--blue); }
.gp-st-booked { background: #6250d6; }
.req-note { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.notice-amber { background: var(--amber-bg); border-color: var(--amber); }

/* Client portal: request staff (weekly table) */
.rq-week { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.rq-week b { font-family: var(--font-head); font-size: 16px; }
.rq-table td { vertical-align: top; padding: 6px; }
.rq-table input { width: 100%; min-width: 0; padding: 6px 8px; }
.rq-table input[type=time] { min-width: 96px; }
.rq-table .rq-num { width: 70px; }
.rq-table tr.rq-extra td { border-top: 0; padding-top: 0; }
.rq-table tr.rq-past { opacity: .5; }
.rq-table td:nth-child(2) { min-width: 150px; } .rq-table td:nth-child(6) { min-width: 140px; }
/* Every map keeps its layers inside its own box, so pop-ups always sit above maps. */
.leaflet-container { isolation: isolate; z-index: 0; }
.rq-table td:nth-child(2) { min-width: 130px; } .rq-table td:nth-child(6) { min-width: 110px; }
.rq-table input[type=time] { min-width: 88px; }
.rq-table td:last-child .btn { white-space: nowrap; padding: 4px 8px; font-size: 12px; }
@media (min-width: 900px) { .modal-wide:has(.rq-table) { max-width: 1100px; width: 96vw; } }
.rq-table select { width: 100%; min-width: 150px; padding: 6px 8px; }
.cp-wide { max-width: 1320px; margin: 0 auto; }
.gp-add { margin-top: 4px; align-self: flex-start; color: var(--primary); font-weight: 700; }
.gp-row.can-add { cursor: copy; }
.gp-row.can-add:hover { background-color: rgba(228, 35, 19, .03); }
.gp-hint { margin-left: auto; }
.gp-print { margin-left: 10px; }
.up-choices { display: grid; gap: 8px; margin: 8px 0; }
.up-choice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; font-size: 15px; }
.up-choice:has(input:checked) { border-color: var(--primary); background: var(--red-bg); font-weight: 600; }
.up-choice input { width: 18px; height: 18px; accent-color: var(--primary); }
.up-own { margin: 6px 0 4px; font-size: 15px; }
.up-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.up-sizes label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.up-sizes input { font-size: 16px; }

/* Deployment logistics: drivers and uniform sizes */
.lg-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.lg-stat { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lg-stat:hover, .lg-stat:focus-visible { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lg-stat b { font-size: 24px; line-height: 1.1; }
.lg-stat span { font-size: 12.5px; color: var(--muted, #667); }
.lg-stat.lg-kit { border-top: 3px solid #2a78d6; }
.lg-stat.warn { border-color: #fab219; border-top: 3px solid #fab219; }
#logistics h4 { margin: 12px 0 6px; }
.lg-drivers { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-driver { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13px; }
.lg-driver small { width: 100%; color: var(--muted, #667); }
.lg-table th { width: 150px; white-space: nowrap; font-weight: 600; }
.lg-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border-radius: 999px; background: var(--chip, rgba(42, 120, 214, .1)); font-size: 12.5px; cursor: default; }
.lg-missing { margin-top: 8px; }

/* Client logo box and the deployment plan print pop-up */
.logo-box { border: 1px dashed var(--border); border-radius: 10px; min-height: 84px; display: flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 8px; background: #fff; }
.logo-box img { max-width: 100%; max-height: 90px; object-fit: contain; }
.drag > .logo-box, .logo-box:focus { border-color: var(--accent); outline: none; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 28px; }
.pk-grid h4 { margin: 4px 0 8px; }
.pk-grid > div > .check { display: flex; margin-bottom: 6px; }
.pk-sub { margin: -2px 0 10px 26px; display: grid; gap: 4px; }
.pk-off { opacity: .45; pointer-events: none; }
.pk-grid .check input[type=radio] { width: auto; flex: none; margin-top: 3px; }
.pk-grid .check { align-items: flex-start; gap: 8px; }
#docLogoCard .logo-box { max-width: 380px; }
.email-acts { align-items: center; flex-wrap: wrap; gap: 8px; } .email-acts select { width: auto; display: inline-block; padding: 4px 8px; margin: 0 4px; }

/* Help: screenshots under each step and the step player */
.help-steps li > div + .help-shot { margin-top: 10px; }
.help-shot { display: block; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; max-width: 640px; width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.help-shot img { display: block; width: 100%; height: auto; }
.help-shot:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.modal.modal-player { max-width: min(1180px, 96vw); width: 100%; }
.help-player { display: grid; gap: 10px; }
.hp-stage { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #f4f4f4; aspect-ratio: 16 / 10; width: min(100%, calc((100vh - 270px) * 1.6)); margin: 0 auto; }
.hp-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hp-cap { display: grid; gap: 4px; min-height: 64px; font-size: 15px; line-height: 1.45; }
.hp-num { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-bar [data-hp=prev], .hp-bar [data-hp=next] { width: 38px; font-size: 18px; }
.hp-dots { display: inline-flex; gap: 6px; margin-left: auto; }
.hp-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: #d0d0d0; cursor: pointer; }
.hp-dots button.on { background: var(--primary, #e42313); }
@media print { .help-shot { max-width: 120mm; box-shadow: none; break-inside: avoid; } }

/* Availability (staff app + staff profile): same look as the staff app's cards and lists */
.av { display: grid; gap: 12px; }
.av-hero { display: flex; align-items: center; gap: 14px; }
.av-hero h2 { margin: 0 0 2px; font-size: 20px; }
.av-cols { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .av-cols { grid-template-columns: minmax(0, 1fr) 340px; } }
.av-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.av-head > div { display: grid; text-align: center; }
.av-head b { font-size: 16px; }
.av-back { transform: rotate(180deg); }
.av-head .icon-btn2:disabled { opacity: .3; cursor: default; }
.av-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.av-chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f4f4f4; }
.av-chip.av-all { background: var(--green-bg, #e6f5e6); color: var(--green, #0a6a0a); }
.av-chip.av-am, .av-chip.av-pm { background: var(--amber-bg, #fff4dc); color: var(--amber, #a86700); }
.av-chip.av-off { background: var(--red-bg, #fde8e6); color: var(--red, #b3261e); }
.av-list .cred { flex-wrap: wrap; }
.av-list .cred:last-child { border-bottom: 0; }
.av-date { flex-direction: column; gap: 0; line-height: 1; }
.av-date small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.av-date b { font-size: 16px; }
.av-day.today .av-date { background: var(--primary, #e42313); color: #fff; }
.av-day.today .av-date small { color: rgba(255,255,255,.85); }
.av-today { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary, #e42313); margin-left: 4px; }
.av-day.past { opacity: .55; }
.av-day .link-btn { font-size: inherit; padding: 0; }
.av-seg { display: inline-flex; gap: 3px; padding: 3px; background: #f1f1f1; border-radius: 12px; }
.av-seg button { border: 0; background: transparent; border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: #555; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.av-seg button:hover { color: #111; }
.av-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.av-seg button.on.av-all { color: var(--green, #0a6a0a); }
.av-seg button.on.av-am, .av-seg button.on.av-pm { color: var(--amber, #a86700); }
.av-seg button.on.av-off { color: var(--red, #b3261e); }
.av-seg button.on.soft { box-shadow: none; background: rgba(255,255,255,.6); }
.av-usual .cred { flex-wrap: nowrap; }
.av-usual .cred-main { flex: 0 0 96px; }
.av-select { flex: 1 1 auto; width: 1px; min-width: 0; max-width: 100%; padding: 7px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.av-select.av-all { color: var(--green, #0a6a0a); } .av-select.av-am, .av-select.av-pm { color: var(--amber, #a86700); } .av-select.av-off { color: var(--red, #b3261e); }
.av-office-head { display: grid; gap: 2px; margin: 4px 0 10px; }
.av-office-head h3 { margin: 0; }
@media (max-width: 640px) {
  .av-list .av-day .av-seg { width: 100%; margin-left: 54px; width: calc(100% - 54px); }
  .av-seg button { flex: 1; padding: 9px 2px; font-size: 12.5px; }
  .av-hero h2 { font-size: 18px; }
}

/* Auto-fill drafts */
.gp-bar-item.has-draft, .gp-bar-item.has-draft:hover { background: #f9d3e5 !important; color: #7d1048 !important; border: 1px solid #e0418e !important; }
.gp-bar-item.has-draft .gp-num, .gp-bar-item.has-draft .gp-sub { color: #9b1a5c !important; }
.gp-sw.gp-draft, .gp-sum.draft i { background: #f9d3e5; border: 1px solid #e0418e; }
.gp-sum.draft { color: #9b1a5c; font-weight: 600; }
.gp-commit { background: #e0418e; border-color: #e0418e; color: #fff; }
.gp-commit:hover { background: #c22f77; border-color: #c22f77; color: #fff; }
.badge-pink { background: #f9d3e5; color: #9b1a5c; }
.commit-list { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; max-height: 40vh; overflow: auto; }
.audit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow: auto; }
.audit-list > li { border-left: 3px solid var(--border); padding: 2px 0 2px 12px; }
.audit-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.audit-list ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: #444; }
.gp-af { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: #fafafa; }
.af-sum { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; }
.af-list { display: grid; gap: 6px; max-height: 52vh; overflow: auto; padding: 2px; }
.af-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; }
.af-row.on { border-color: var(--primary, #e42313); background: #fff8f7; }
.af-main { display: grid; flex: 1; min-width: 0; }
.af-tags { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.af-skips { display: grid; gap: 4px; margin-top: 10px; }
.af-skip summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.af-skip div { padding: 6px 0 0 14px; line-height: 1.6; }
.draft-card { border: 2px dashed #e0418e; background: #fdf0f6; }

/* Deployment team: compliance for the shift */
.comply { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 0; font-family: inherit; }
.comply .ico { width: 14px; height: 14px; }
.comply.ok { background: var(--green-bg); color: var(--green); }
.comply.bad { background: var(--red-bg); color: var(--red); cursor: pointer; }
.comply.bad:hover { filter: brightness(.96); }
.comply-req { color: var(--red); border-color: #f0c4c0; }
.comply-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Week calendar of events (Events → Week, Dashboard) */
.wk-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wk-head b { font-size: 15px; margin-left: 6px; }
.wk-head .muted { margin-left: auto; }
.wk-grid { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.wk-days, .wk-lanes, .wk-deps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wk-day { padding: 8px; border-right: 1px solid var(--border); background: #fafafa; display: flex; gap: 6px; align-items: baseline; }
.wk-day:last-child, .wk-deps > div:last-child { border-right: 0; }
.wk-day span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.wk-day b { font-size: 17px; }
.wk-day.we { background: #f4f4f4; }
.wk-day.today { background: var(--primary, #e42313); } .wk-day.today span, .wk-day.today b { color: #fff; }
.wk-lanes { gap: 6px 0; padding: 8px 0; min-height: 90px; align-content: start; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 7 - 1px), var(--border) calc(100% / 7 - 1px), var(--border) calc(100% / 7)); }
.wk-ev { margin: 0 4px; border: 0; border-radius: 9px; padding: 7px 9px; text-align: left; color: #fff; display: grid; gap: 2px; cursor: pointer; font: inherit; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.wk-ev b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ev > span { font-size: 11.5px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ev.st-planning { background: #92400e; } .wk-ev.st-confirmed { background: #15803d; } .wk-ev.st-live { background: #2563eb; } .wk-ev.st-completed { background: #6b7280; }
.wk-ev.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; } .wk-ev.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.wk-ev:hover { filter: brightness(1.08); }
.wk-staff { justify-self: start; background: rgba(255,255,255,.2); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.wk-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); margin: 18px 0; }
.wk-deps > div { padding: 6px 8px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 12px; }
.wk-deps > div.today { background: #fff5f4; }
.wk-list { display: none; }
@media (max-width: 760px) {
  .wk-grid { display: none; }
  .wk-list { display: grid; gap: 8px; }
  .wk-li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
  .wk-li-day { width: 42px; height: 42px; border-radius: 12px; background: #f4f4f4; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex: none; }
  .wk-li-day span { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 700; } .wk-li-day b { font-size: 16px; }
  .wk-li.today .wk-li-day { background: var(--primary, #e42313); } .wk-li.today .wk-li-day span, .wk-li.today .wk-li-day b { color: #fff; }
  .wk-li-evs { display: grid; gap: 6px; flex: 1; min-width: 0; padding-top: 2px; }
  .wk-li-evs .wk-ev { margin: 0; grid-column: auto !important; }
}
.role-table select { width: auto; min-width: 190px; }
.role-add { display: flex; gap: 8px; margin-top: 10px; max-width: 460px; }
.rate-in { display: inline-flex; align-items: center; gap: 4px; }
.rate-in input { width: 110px; text-align: right; }
.rate-table td { vertical-align: middle; }
.inc-total { font-size: 18px; color: var(--green, #0a6a0a); }
.inc-table tr.inc-sum td { border-top: 2px solid #212121; font-weight: 800; }
#incSum { margin-left: auto; }

/* BS7858 vetting: applicant link (vt-*) */
.vt-page { max-width: 720px; }
.vt-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 16px 0 8px; }
.vt-steps button { border: 0; background: none; display: grid; justify-items: center; gap: 4px; padding: 4px 0; cursor: pointer; font: inherit; color: var(--muted); }
.vt-steps i { width: 30px; height: 30px; border-radius: 50%; background: #ececec; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 13px; color: #555; }
.vt-steps span { font-size: 11px; line-height: 1.2; text-align: center; }
.vt-steps button.ok i { background: var(--green-bg); color: var(--green); }
.vt-steps button.on i { background: var(--primary); color: #fff; } .vt-steps button.on span { color: var(--text, #222); font-weight: 700; }
.vt-bar { height: 6px; border-radius: 3px; background: #ececec; overflow: hidden; margin-bottom: 14px; } .vt-bar i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.vt-card { display: grid; gap: 12px; } .vt-h { margin: 0; }
.vt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .vt-grid .full { grid-column: 1 / -1; }
.vt-f { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; } .vt-f > span { color: #333; } .vt-f small { font-weight: 500; color: var(--muted); }
.vt-f input, .vt-f select, .vt-f textarea { font: 15px inherit; font-family: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; width: 100%; background: #fff; }
.vt-f input:disabled { background: #f4f4f4; color: #999; }
.vt-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: #fff; }
.vt-item-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vt-gaps { display: grid; gap: 8px; } .vt-gap { border: 1px solid #f3c9c4; background: var(--red-bg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; } .vt-gap b { color: var(--red); display: flex; align-items: center; gap: 6px; }
.vt-q { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .vt-q b { font-size: 14.5px; }
.vt-yn { display: inline-flex; gap: 6px; } .vt-yn label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; cursor: pointer; font-weight: 600; font-size: 14px; }
.vt-yn label.on, .vt-yn label:has(input:checked) { border-color: var(--primary); background: #fff5f4; } .vt-yn input { accent-color: var(--primary); }
.vt-doc.sent { border-color: #bfe3bf; background: #f6fcf6; } .vt-ok { color: var(--green); font-weight: 700; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.vt-consent { background: #fafafa; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14px; } .vt-consent ul { margin: 6px 0; padding-left: 20px; }
.vt-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 0; }
.vt-missing { color: var(--red); }
.vt-done { display: inline-flex; align-items: center; gap: 8px; background: var(--green-bg); color: var(--green); font-weight: 700; padding: 10px 16px; border-radius: 999px; }
.vt-claim { display: grid; gap: 2px; border-left: 4px solid var(--primary); }
@media (max-width: 560px) { .vt-grid { grid-template-columns: 1fr; } .vt-steps span { display: none; } }

/* BS7858 vetting: office profile (vp-*) */
.vp-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; align-items: start; }
.vp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vp-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .vp-checklist i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; background: #ececec; color: #888; font-weight: 700; font-size: 12px; }
.vp-checklist li.ok i { background: var(--green-bg); color: var(--green); } .vp-checklist small { display: block; color: var(--red); }
.vp-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 12px; }
.vp-check { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 6px; } .vp-check.passed { border-color: #bfe3bf; background: #f6fcf6; } .vp-check.failed { border-color: #f3c9c4; background: #fff7f6; }
.vp-check-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .vp-check p { margin: 0; }
.vp-check-f { display: flex; gap: 6px; flex-wrap: wrap; } .vp-check-f select { width: auto; flex: 0 0 auto; } .vp-check-f input { flex: 1 1 140px; min-width: 0; } .vp-check-f input[type=date] { flex: 0 0 150px; }
.vp-check textarea { min-height: 34px; }
.vp-acts { display: grid; gap: 10px; }
.vp-act { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 8px; } .vp-act.ok { border-color: #bfe3bf; background: #f6fcf6; } .vp-act p { margin: 0; }
.vp-act-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .vp-ref { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.vp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .vp-list li { display: grid; gap: 1px; }
.vp-start { display: flex; gap: 16px; align-items: flex-start; } .vp-start p { max-width: 640px; }
.vp-meter { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: #ececec; overflow: hidden; vertical-align: middle; } .vp-meter i { display: block; height: 100%; background: var(--green); }
@media (max-width: 900px) { .vp-top, .vp-two { grid-template-columns: 1fr; } }

/* GuardProtect admin: company profile and add-ons */
.pf-head { gap: 14px; margin-top: 6px; } .pf-head h1 { margin: 0; }
.pf-h { margin: 22px 0 10px; font-size: 18px; }
.pf-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.pf-addons > .actions { grid-column: 1 / -1; }
.pf-addon { display: grid; gap: 12px; border-top: 4px solid #d5d5d5; } .pf-addon.on { border-top-color: var(--green); }
.pf-addon h3 { margin: 0 0 2px; } .pf-addon p { margin: 0; }
.pf-addon-h { display: flex; gap: 12px; align-items: flex-start; }
.pf-ico { width: 42px; height: 42px; border-radius: 12px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; flex: none; }
.pf-addon.on .pf-ico { background: var(--green-bg); color: var(--green); }
.pf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.pf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-switch span { width: 46px; height: 26px; border-radius: 13px; background: #ccc; position: relative; transition: background .15s; flex: none; }
.pf-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.pf-switch input:checked + span { background: var(--green); } .pf-switch input:checked + span::after { transform: translateX(20px); }
.pf-switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-usage > div { background: #fafafa; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; } .pf-usage b { font-size: 20px; } .pf-usage span { font-size: 12px; color: var(--muted); } .pf-usage small { font-size: 11.5px; color: var(--muted); }
.pf-usage > div.bad b { color: var(--red); }

/* Vetting link: full browser width on computers */
.vt-banner { margin: 0 0 20px; border-radius: 0; padding-left: max(16px, calc((100vw - 1180px) / 2)); padding-right: max(16px, calc((100vw - 1180px) / 2)); }
.up-page.vt-page { max-width: 1180px; padding: 0 16px; }
.vt-page .vt-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .vt-page h1 { font-size: 32px; }
  .vt-page .vt-grid { grid-template-columns: repeat(3, 1fr); }
  .vt-page .vt-item .vt-grid { grid-template-columns: repeat(3, 1fr); }
  .vt-page .vt-steps span { font-size: 13px; }
  .vt-page .vt-yn label { padding: 8px 22px; }
  .vt-page .up-lead { max-width: 820px; }
}
.vt-item.flash, .vp-act.flash { box-shadow: 0 0 0 3px var(--primary); transition: box-shadow .3s; }
.vt-tlcard { margin-bottom: 14px; } .vt-tlhead { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* Vetting timeline (Gantt of addresses and activity) */
.tl { --lh: 30px; display: grid; gap: 6px; }
.tl-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: stretch; }
.tl-label { display: grid; align-content: center; } .tl-label b { font-size: 13.5px; } .tl-label small { color: var(--muted); font-size: 11.5px; }
.tl-track { position: relative; height: calc(var(--lanes, 1) * var(--lh) + 4px); background: repeating-linear-gradient(90deg, #f7f7f7 0, #f7f7f7 1px, transparent 1px, transparent 10%); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tl-axis .tl-track { height: 20px; border: 0; background: none; overflow: visible; }
.tl-axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--muted); } .tl-axis .tl-now { transform: translateX(-100%); color: var(--primary); }
.tl-out { position: absolute; top: 0; bottom: 0; left: 0; background: repeating-linear-gradient(135deg, #f1f1f1 0 6px, #e8e8e8 6px 12px); }
.tl-bar { position: absolute; height: calc(var(--lh) - 6px); margin-top: 3px; border: 0; border-radius: 6px; padding: 0 8px; color: #fff; font: 600 12px/1 inherit; font-family: inherit; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; display: flex; align-items: center; min-width: 6px; }
.tl-bar span { overflow: hidden; text-overflow: ellipsis; }
.tl-addresses { background: #6b7c93; }
.tl-activity { background: #2a78d6; } .tl-activity.tt-unemployed, .tl-activity.tt-travel, .tl-activity.tt-carer, .tl-activity.tt-other { background: #8b6fd6; } .tl-activity.tt-education { background: #2a9d8f; }
.tl-bar.ok { box-shadow: inset 0 -4px 0 #0ca30c; }
.tl-bar:hover { filter: brightness(1.1); }
.tl-gap { position: absolute; top: 2px; border: 2px dashed #d03b3b; background: repeating-linear-gradient(135deg, rgba(208,59,59,.12) 0 6px, rgba(208,59,59,.22) 6px 12px); border-radius: 6px; color: #b3261e; font: 700 11.5px inherit; font-family: inherit; display: flex; align-items: center; justify-content: center; min-width: 22px; overflow: hidden; white-space: nowrap; padding: 0; }
button.tl-gap { cursor: pointer; } button.tl-gap:hover { background: rgba(208,59,59,.28); }
.tl-gap.explained { border-color: #c98a00; color: #8a5a00; background: repeating-linear-gradient(135deg, rgba(250,178,25,.15) 0 6px, rgba(250,178,25,.28) 6px 12px); }
.tl-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-left: 140px; }
.tl-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.tl-key .k-addr { background: #6b7c93; } .tl-key .k-job { background: #2a78d6; } .tl-key .k-other { background: #8b6fd6; } .tl-key .k-gap { border: 2px dashed #d03b3b; background: rgba(208,59,59,.15); } .tl-key .k-exp { border: 2px dashed #c98a00; background: rgba(250,178,25,.2); }
.tl-ok { color: var(--green); font-weight: 600; font-size: 13px; margin: 0 0 0 140px; }
@media (max-width: 640px) { .tl-row { grid-template-columns: 1fr; gap: 3px; } .tl-key, .tl-ok { margin-left: 0; } .tl { --lh: 26px; } }
.tl-gap { z-index: 2; }
.tl-gaplist { list-style: none; margin: 4px 0 0 140px; padding: 0; display: grid; gap: 6px; }
.tl-gaplist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--red-bg); border: 1px solid #f3c9c4; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.tl-gaplist small { color: var(--muted); }
@media (max-width: 640px) { .tl-gaplist { margin-left: 0; } .tl-gaplist li .btn { width: 100%; } }
.tl-gap { background: repeating-linear-gradient(135deg, rgba(208,59,59,.14) 0 6px, rgba(208,59,59,.26) 6px 12px), #fff; box-shadow: 0 0 0 2px #fff; }
.tl-gap.explained { background: repeating-linear-gradient(135deg, rgba(250,178,25,.18) 0 6px, rgba(250,178,25,.32) 6px 12px), #fff; }
button.tl-gap:hover { background: repeating-linear-gradient(135deg, rgba(208,59,59,.24) 0 6px, rgba(208,59,59,.36) 6px 12px), #fff; }

/* Office "View as client" preview of a client's event page */
body.cv-open { overflow: hidden; }
.cv-overlay { position: fixed; inset: 0; z-index: 900; overflow-y: auto; background: #f3f2ef; }
.cv-overlay .sp { min-height: auto; }
.cv-overlay .sp-main { padding-bottom: 40px; }
.cv-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: #1f2937; color: #fff; font-size: 14px; }
.cv-bar .btn { background: #fff; }
.ce-stats { margin-bottom: 12px; }
.ce-thread .thread { max-height: 420px; }
.msg-tag { font-size: 12px; margin: 2px 0 4px; }
.msg-tag a, .msg-tag .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }

/* Event logo (event page header and the client's event cover); company logo when the event has none */
.event-cover .ev-logo { margin-right: auto; align-self: center; }
.ev-logo { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 10px; box-sizing: border-box; background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ev-logo img { width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 0; opacity: 1; }
.profile-cover .ev-logo img { height: 100%; opacity: 1; }
.ev-logo-sm { width: 44px; height: 44px; padding: 5px; border-radius: 10px; box-shadow: none; border: 1px solid var(--line, #e5e5e5); vertical-align: middle; margin-right: 12px; }
.ev-title { display: flex; align-items: center; }
.ev-logo-card { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.ev-logo-card > div:first-child { flex: 1 1 260px; }
.ev-logo-card h3 { margin: 0 0 4px; }
@media (max-width: 600px) { .ev-logo { width: 72px; height: 72px; } }

/* Public / private switch on documents */
.vis-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted, #666); white-space: nowrap; }
.vis-toggle i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #cfcfcf; transition: background .15s; flex: none; }
.vis-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.vis-toggle.on { color: #137333; font-weight: 600; }
.vis-toggle.on i { background: #1e9e4a; }
.vis-toggle.on i::after { transform: translateX(14px); }
.vis-toggle:disabled { opacity: .5; cursor: wait; }

/* Client print choice */
.pk-choices { display: grid; gap: 8px; margin-top: 10px; }
.pk-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, #e3e3e3); border-radius: 12px; cursor: pointer; }
.pk-choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, #fff); }
.pk-choice.pk-off { opacity: .5; cursor: default; }
body.cv-open .modal-backdrop { z-index: 1000; }
.pk-choices label.pk-choice { display: flex; flex-direction: row; justify-content: flex-start; text-align: left; margin: 0; font-weight: 400; }
.pk-choices label.pk-choice input[type=radio] { width: 16px; height: 16px; min-width: 0; flex: 0 0 16px; margin: 3px 0 0; padding: 0; }
.pk-choices label.pk-choice > span { flex: 1 1 auto; display: grid; gap: 2px; }

/* Client portal logins (office) */
.pu-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
.pu-pw { display: flex; gap: 6px; }
.pu-pw input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }
.pu-preview { position: sticky; top: 0; }
.pu-preview-head { display: grid; gap: 2px; margin-bottom: 6px; }
.pu-preview iframe, iframe.pu-sent { width: 100%; height: 560px; border: 1px solid var(--line, #e3e3e3); border-radius: 10px; background: #f3f2ef; }
iframe.pu-sent { margin-top: 10px; }
.pu-table td { vertical-align: top; }
.nowrap { white-space: nowrap; }
@media (max-width: 820px) { .pu-grid { grid-template-columns: 1fr; } .pu-preview iframe { height: 420px; } }
/* Client portal: reminder to replace an emailed password */
.pw-nudge { display: flex; align-items: center; gap: 14px; border-left: 4px solid var(--primary); }
.pw-nudge > div { flex: 1; } .pw-nudge p { margin: 2px 0 0; }
@media (min-width: 900px) { .modal-wide:has(.pu-grid) { max-width: 1080px; width: 96vw; } }
/* Client portal activity log */
.pa-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pa-head select { width: auto; min-width: 200px; }
.pa-wrap { max-height: 60vh; overflow-y: auto; }

/* ---- Zone counter (public, counter.html): dark, high contrast, big targets for outdoor use ---- */
body.zc-body { background: #111; color: #f2f2f2; margin: 0; -webkit-tap-highlight-color: transparent; }
body.zc-body.zc-alert { background: #2a0d0d; }
.zc { max-width: 560px; margin: 0 auto; padding: 0 12px 32px; font-family: var(--font-body, system-ui); }
.zc-head { display: flex; align-items: center; gap: 12px; padding: 12px 2px; position: sticky; top: 0; background: inherit; z-index: 5; }
body.zc-body .zc-head { background: #111; } body.zc-alert .zc-head { background: #2a0d0d; }
.zc-head img { height: 30px; max-width: 90px; object-fit: contain; }
.zc-head > div { flex: 1; min-width: 0; display: grid; }
.zc-head b { font-size: 19px; line-height: 1.2; } .zc-head span { font-size: 12px; color: #a8a8a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-who { background: #262626; color: #ddd; border: 1px solid #3a3a3a; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-alertmsg:empty { display: none; } .zc-alertmsg { background: #c62828; color: #fff; font-weight: 700; text-align: center; padding: 8px; border-radius: 10px; margin-bottom: 8px; }
.zc-main { background: #1c1c1c; border: 1px solid #2c2c2c; border-radius: 18px; padding: 16px 18px; text-align: center; }
.zc-main[data-level=warn] { border-color: #b7791f; } .zc-main[data-level=bad] { border-color: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,.35); }
.zc-label { font-size: 13px; color: #a8a8a8; text-transform: uppercase; letter-spacing: .08em; }
.zc-count { font-size: clamp(64px, 22vw, 104px); font-weight: 800; line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.zc-cap { color: #c8c8c8; font-size: 15px; }
.zc-bar { height: 10px; background: #2e2e2e; border-radius: 99px; overflow: hidden; margin: 10px 0 8px; }
.zc-bar i { display: block; height: 100%; background: #2e9e57; border-radius: 99px; transition: width .2s; }
.zc-bar i.warn { background: #e0a020; } .zc-bar i.bad { background: #e53935; }
.zc-inout { font-size: 13px; color: #a8a8a8; }
.zc-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.zc-btn { border: 0; border-radius: 18px; padding: 22px 8px; color: #fff; font: inherit; display: grid; gap: 2px; cursor: pointer; touch-action: manipulation; user-select: none; }
.zc-btn b { font-size: 40px; line-height: 1; } .zc-btn span { font-size: 15px; font-weight: 600; opacity: .9; }
.zc-btn.in { background: #1f8a4c; } .zc-btn.out { background: #c62828; }
.zc-btn:active, .zc-small button:active { transform: scale(.97); filter: brightness(1.15); }
.zc-small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.zc-small button { border: 1px solid #333; background: #1c1c1c; color: #fff; border-radius: 12px; padding: 12px 0; font: inherit; font-size: 17px; font-weight: 700; touch-action: manipulation; }
.zc-small button.in { color: #6fdc98; } .zc-small button.out { color: #ff8a80; }
.zc-sync { text-align: center; font-size: 12px; color: #8a8a8a; margin: 8px 0 4px; min-height: 16px; }
.zc-sync.busy { color: #e0c060; } .zc-sync.off { color: #fff; background: #b71c1c; border-radius: 8px; padding: 4px; }
.zc-card { background: #1c1c1c; border: 1px solid #2c2c2c; border-radius: 16px; padding: 14px; margin-top: 10px; }
.zc-card h3 { margin: 0 0 10px; font-size: 13px; color: #a8a8a8; text-transform: uppercase; letter-spacing: .08em; }
.zc-inc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.zc-inc button { border: 1px solid #383838; background: #262626; color: #f2f2f2; border-radius: 12px; padding: 12px 4px; font: inherit; font-size: 14px; font-weight: 600; touch-action: manipulation; }
.zc-inc button.main { background: var(--primary, #e42313); border-color: transparent; color: #fff; font-size: 16px; grid-column: span 1; }
.zc-inc button.main:first-child { grid-column: 1 / span 2; } .zc-inc button.main:nth-child(2) { grid-column: 3; }
.zc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.zc-stats div { background: #232323; border-radius: 10px; padding: 8px 2px; } .zc-stats b { display: block; font-size: 22px; } .zc-stats span { font-size: 11px; color: #a8a8a8; }
.zc-total { margin-top: 10px; font-size: 15px; } .zc-total b { color: #fff; }
.zc-zones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .zc-zones:empty { display: none; }
.zc-zones span { background: #232323; border-radius: 99px; padding: 4px 10px; font-size: 12px; color: #c8c8c8; }
.zc-zones span.warn { color: #f0c060; } .zc-zones span.bad { color: #ff8a80; }
.zc-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zc-recent li { font-size: 14px; display: block; border-bottom: 1px solid #2a2a2a; padding-bottom: 7px; }
.zc-t { color: #8a8a8a; margin-right: 8px; font-variant-numeric: tabular-nums; } .zc-by { float: right; color: #8a8a8a; font-size: 12px; }
.zc-note { color: #bdbdbd; font-size: 13px; margin-top: 2px; } .zc-none { color: #8a8a8a; }
.zc-foot { text-align: center; font-size: 12px; color: #777; margin-top: 16px; }
.zc-err h2 { margin-top: 0; color: #fff; } .zc-err p { color: #ccc; }
.zc-sheet { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.zc-sheet-box { background: #1e1e1e; color: #f2f2f2; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 12px; max-height: 92dvh; overflow-y: auto; }
.zc-sheet-box h2 { margin: 0; font-size: 22px; } .zc-sheet-box p { margin: 0; color: #bbb; font-size: 14px; }
.zc-sheet-box input, .zc-sheet-box textarea { background: #111; color: #fff; border: 1px solid #3a3a3a; border-radius: 12px; padding: 14px; font: inherit; font-size: 17px; width: 100%; box-sizing: border-box; }
.zc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zc-chips label { cursor: pointer; } .zc-chips input { position: absolute; opacity: 0; width: 0; }
.zc-chips span { display: inline-block; border: 1px solid #444; border-radius: 99px; padding: 9px 14px; font-size: 14px; }
.zc-chips input:checked + span { background: var(--primary, #e42313); border-color: transparent; color: #fff; font-weight: 700; }
.zc-num { display: flex; align-items: center; gap: 12px; } .zc-num span { flex: 1; color: #bbb; }
.zc-num button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #444; background: #262626; color: #fff; font-size: 22px; }
.zc-num b { font-size: 24px; min-width: 32px; text-align: center; }
.zc-sheet-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.zc-sheet-btns .btn, .zc-sheet-box .btn-block { padding: 14px; font-size: 16px; }
.zc-sheet-btns .btn:not(.btn-primary) { background: #2a2a2a; color: #fff; border-color: #3a3a3a; }

/* ---- Event zones (office) ---- */
.zn-stats .zn-total small { font-size: 15px; color: var(--muted, #777); font-weight: 600; }
.zn-bar { height: 8px; background: #ececec; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.zn-bar i { display: block; height: 100%; background: #2e9e57; border-radius: 99px; }
.zn-bar i.warn { background: #e0a020; } .zn-bar i.bad { background: #e53935; }
.zn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.zn-card { border: 1px solid var(--line, #e5e5e5); border-radius: 14px; padding: 14px; display: grid; gap: 6px; background: #fff; }
.zn-card.warn { border-color: #e0a020; } .zn-card.bad { border-color: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,.15); }
.zn-top { display: flex; justify-content: space-between; align-items: center; } .zn-top b { font-size: 16px; }
.zn-count { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .zn-count small { font-size: 16px; color: var(--muted, #777); font-weight: 600; }
.zn-meta { color: var(--muted, #666); }
.zn-inc { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted, #666); } .zn-inc b { color: var(--text, #111); }
.zn-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .zn-actions .icon-btn { margin-left: auto; }
.zn-qr { display: grid; gap: 10px; justify-items: center; text-align: center; }
.zn-qrbox { width: min(280px, 70vw); aspect-ratio: 1; display: grid; place-items: center; } .zn-qrbox svg { width: 100%; height: 100%; }
.zn-qr .copybox { width: 100%; font-size: 12px; }

/* ---- Zones report ---- */
.zr-main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }
.zr-head h1 { margin: 0 0 4px; } .zr-tiles small { display: block; font-size: 12px; margin-top: 4px; }
.zr-chart { position: relative; width: 100%; } .zr-chart svg { display: block; overflow: visible; }
.zr-gl { stroke: #ececec; stroke-width: 1; } .zr-ax { font-size: 11px; fill: #777; font-family: inherit; }
.zr-cross { stroke: #999; stroke-width: 1; stroke-dasharray: 3 3; }
.zr-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); min-width: 150px; z-index: 2; }
.zr-tip div { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .zr-tip div b { margin-left: auto; padding-left: 10px; }
.zr-tip i, .zr-legend i, .zr-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.zr-key { margin-right: 6px; vertical-align: middle; }
.zr-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; margin-bottom: 8px; } .zr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.zr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 760px) { .zr-two { grid-template-columns: 1fr; } }
.zr-hbars { display: grid; gap: 8px; }
.zr-hrow { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.zr-hrow > div { height: 14px; } .zr-hrow i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.zr-log { max-height: 420px; overflow-y: auto; }
body.zr-print .zr-main { padding: 0; }

/* ---- Control room: zones panel ---- */
.cr-zonelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cr-zonelist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; }
.cr-zonelist li .cr-capbar { grid-column: 1 / -1; margin: 2px 0; } .cr-zonelist li small { grid-column: 1 / -1; opacity: .7; }
.cr-zonelist li b small { opacity: .7; font-weight: 500; }
.cr-zonelist li.warn > b { color: #f0b429; } .cr-zonelist li.bad > b { color: #ff6b6b; }
.cr-zonelist .cr-capbar i.warn { background: #e0a020; } .cr-zonelist .cr-capbar i.bad { background: #e53935; }
/* Client staff request: title / requested by; account holder */
.rq-top { margin-bottom: 4px; } .rq-who { padding: 9px 0; font-weight: 600; }
.req-files { margin-top: 4px; } .req-files a { font-weight: 600; }
.am-row select { width: 100%; max-width: 420px; } .am-contact { margin: 6px 0 10px; line-height: 1.5; }

/* ---- Client portal on phones: deployments agenda and the request form ---- */
.ag { display: grid; gap: 14px; }
.ag-day h4 { margin: 4px 2px 8px; font-size: 14px; color: var(--muted, #666); font-weight: 700; }
.ag-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; font: inherit; color: inherit; cursor: pointer; }
.ag-row:active { background: #f7f7f7; }
.ag-time { display: grid; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; } .ag-time small { font-weight: 500; color: var(--muted, #777); font-size: 12px; }
.ag-main { display: grid; min-width: 0; } .ag-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-wait { color: #9a6700; }
.ag-staff { display: grid; text-align: center; font-weight: 800; font-size: 16px; border-radius: 10px; padding: 4px 8px; background: #f1f1f1; min-width: 44px; }
.ag-staff small { font-size: 10px; font-weight: 600; opacity: .75; }
.ag-staff.ok { background: #e3f4ea; color: #146c3a; } .ag-staff.mid { background: #fff3d6; color: #8a5a00; } .ag-staff.low { background: #fde4e4; color: #a32020; }
.ag-past summary { cursor: pointer; font-weight: 600; padding: 6px 2px; }
.mb { margin-bottom: 12px; }
.rq-sites { display: grid; gap: 8px; }
.rq-site { display: grid; text-align: left; gap: 2px; padding: 14px; border: 1px solid #e3e3e3; border-radius: 12px; background: #fff; font: inherit; cursor: pointer; }
/* Request form, phone layout */
.rq-days { display: grid; gap: 8px; }
.rq-day { border: 1px solid #e6e6e6; border-radius: 14px; padding: 10px 12px; background: #fff; display: grid; gap: 8px; }
.rq-day.on { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent); }
.rq-day.rq-more { margin-top: -4px; border-style: dashed; }
.rq-day.rq-past { opacity: .5; }
.rq-dhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; }
.rq-dhead > div { display: grid; }
.rq-day select, .rq-day input { width: 100%; box-sizing: border-box; font-size: 16px; }
.rq-3 { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; }
.rq-3 label { display: grid; gap: 3px; font-size: 12px; color: var(--muted, #666); min-width: 0; }
.rq-3 input[type=time] { padding-left: 6px; padding-right: 4px; min-width: 0; }
.rq-step { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; border: 1px solid var(--line, #d9d9d9); border-radius: 10px; overflow: hidden; }
.rq-step button { border: 0; background: #f3f3f3; height: 100%; min-height: 40px; font-size: 18px; font-weight: 700; color: inherit; }
.rq-step input { border: 0 !important; text-align: center; padding: 0 !important; min-width: 0; height: 40px; border-radius: 0; -moz-appearance: textfield; }
.rq-step input::-webkit-outer-spin-button, .rq-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rq-cardbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .rq-cardbtns .link-btn { margin-left: auto; color: var(--muted, #777); }
@media (max-width: 700px) {
  .rq-phone .rq-top { grid-template-columns: 1fr; gap: 8px; }
  .rq-phone .rq-top .hint { display: none; }
  .rq-phone .rq-who { padding: 2px 0; }
  .rq-phone .rq-week { position: sticky; top: -1px; z-index: 2; background: #fff; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; }
  .rq-phone .rq-week b { font-size: 15px; }
  /* The calendar on a phone: just the grid and the week controls. */
  .cp .gp-legend, .cp .gp-hint, .cp .gp-print, .cp .gp-opts label:has([data-by]), .cp .gp-opts label:has([data-cancelled]) { display: none !important; }
  .cp .gp-range { font-size: 15px; white-space: nowrap; }
}
/* Zone counter: request help */
.zc-sos { width: 100%; margin-top: 10px; border: 0; border-radius: 16px; padding: 16px; background: #f59e0b; color: #111; display: grid; gap: 2px; font: inherit; cursor: pointer; box-shadow: 0 0 0 3px rgba(245,158,11,.25); touch-action: manipulation; }
.zc-sos b { font-size: 22px; } .zc-sos span { font-size: 13px; font-weight: 600; opacity: .8; }
.zc-sos:active { transform: scale(.98); }
.zc-helpcount { color: #f59e0b; margin-left: 6px; }
.zc-helpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zc-helpgrid label { cursor: pointer; } .zc-helpgrid input { position: absolute; opacity: 0; width: 0; }
.zc-helpgrid span { display: flex; align-items: center; gap: 8px; border: 1px solid #444; border-radius: 12px; padding: 12px 10px; font-size: 14px; font-weight: 600; min-height: 48px; box-sizing: border-box; }
.zc-helpgrid span i { font-style: normal; font-size: 20px; }
.zc-helpgrid label.urg span { border-color: #7f1d1d; }
.zc-helpgrid input:checked + span { background: #f59e0b; border-color: #f59e0b; color: #111; }
.zc-helpgrid label.urg input:checked + span { background: #e53935; border-color: #e53935; color: #fff; }
.zc-urgent { display: flex; gap: 10px; align-items: center; font-size: 15px; } .zc-urgent input { width: 22px; height: 22px; }
.zc-rqs li.zc-rq { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border-left: 4px solid #666; padding-left: 10px; }
.zc-rq.open { border-left-color: #f59e0b; } .zc-rq.assigned, .zc-rq.onway { border-left-color: #2e9e57; } .zc-rq.done, .zc-rq.cancelled { opacity: .55; }
.zc-rq.urgent.open { border-left-color: #e53935; }
.zc-rqstate { display: block; font-size: 13px; color: #c8c8c8; margin-top: 2px; } .zc-rq.onway .zc-rqstate { color: #6fdc98; }
.zc-x { background: #2a2a2a; color: #ddd; border: 1px solid #3a3a3a; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; }
/* Control room: requests from zones */
.cr-reqs.has-open { box-shadow: 0 0 0 2px #e53935 inset; }
.cr-reqs.flash { animation: crflash 1.2s ease-out 3; }
@keyframes crflash { 0% { background: rgba(245,158,11,.45); } 100% { background: transparent; } }
.cr-reqn { font-size: 12px; font-weight: 600; opacity: .8; } .cr-reqn.cr-reqn-on { color: #f59e0b; opacity: 1; }
.cr-reqlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
.cr-req { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); border-left: 4px solid #f59e0b; }
.cr-req.urgent.open { border-left-color: #e53935; background: rgba(229,57,53,.12); }
.cr-req.assigned, .cr-req.onway { border-left-color: #2e9e57; }
.cr-req-ico { font-size: 22px; line-height: 1; }
.cr-req-main { display: grid; gap: 2px; min-width: 0; font-size: 13px; } .cr-req-main b { font-size: 15px; } .cr-req-main em { opacity: .85; }
.cr-req-main > span { opacity: .8; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cr-req-state { opacity: 1 !important; } .cr-req.onway .cr-req-state b { color: #6fdc98; }
.cr-urg { font-style: normal; background: #e53935; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 4px; letter-spacing: .05em; vertical-align: 2px; }
.cr-req-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 190px; }

.cr-center > .cr-reqs { max-height: 34vh; display: flex; flex-direction: column; } .cr-reqs .cr-reqlist { max-height: none; flex: 1; min-height: 0; }
.cr-reqs:not(.has-items) .cr-reqlist .live-empty { padding: 4px 0; font-size: 13px; }

/* ===== Control room v2: operator screen, drawers, job tickets, wallboard ===== */
.cr { height: 100vh; overflow: hidden; }
.cr-head { flex-wrap: wrap; row-gap: 8px; }
.cr-cap { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 200px; }
.cr-cap b { font: 800 clamp(24px, 2vw, 34px) var(--font-head); font-variant-numeric: tabular-nums; line-height: 1; }
.cr-cap span { color: var(--t3); font-size: 13px; font-weight: 600; }
.cr-cap .cr-capbar { grid-column: 1 / -1; height: 6px; margin-top: 6px; }
.cr-cap.warn b { color: #fab219; } .cr-cap.bad b { color: #ff6b6b; } .cr-cap.bad { border-color: #d03b3b; }
.cr .live-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.cr-logbtn { height: 40px; font-size: 15px; }
.cr-tbtn { width: auto; padding: 0 10px; gap: 6px; } .cr-tbtn span:empty { display: none; } .cr-tbtn span { font-weight: 700; color: var(--t1); }
.cr .live-btn.on { border-color: #3987e5; color: #fff; background: #1d3557; width: auto; padding: 0 10px; gap: 6px; } .cr-tlabel:empty { display: none; } .cr-tlabel { font-size: 12px; font-weight: 700; }
.cr-grid2 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 320px); gap: inherit; }
.cr-dual .cr-grid2 { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(240px, 300px); }
.cr-grid2 .cr-center { display: flex; flex-direction: column; gap: inherit; min-height: 0; }
.cr-grid2 .cr-center > .cr-log { flex: 1; }
.cr-side2 { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.cr-fold { padding: 0; flex: none; } .cr-fold > summary { list-style: none; cursor: pointer; padding: 12px 14px; } .cr-fold > summary::-webkit-details-marker { display: none; }
.cr-fold > summary h3 { margin: 0; } .cr-fold > summary h3::after { content: '▸'; margin-left: auto; color: var(--t3); transition: transform .15s; } .cr-fold[open] > summary h3::after { transform: rotate(90deg); }
.cr-fold[open] > summary { padding-bottom: 6px; } .cr-fold > :not(summary) { padding: 0 14px 14px; }
.cr-fold h3 span[data-zonesum] { margin-left: auto; }
.cr-dualnote { color: var(--t3); padding: 0 4px; }
.cr-mini h4, .cr-fold h4 { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--t3); }
/* Positions board */
.cr-pos { overflow: hidden; } .cr-poslist { overflow-y: auto; min-height: 0; flex: 1; display: grid; gap: 10px; align-content: start; }
.cr-pc { font-size: 12px; } .cr-bad { color: #ff6b6b; } .cr-warn { color: #fab219; }
.cr-zgroup { display: grid; gap: 4px; }
.cr-zhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 4px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.cr-zhead b { font-size: 14px; } .cr-zhead > span { color: var(--t3); font-size: 12px; } .cr-zmgr { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; color: var(--t2) !important; }
.cr-post { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03); border-left: 3px solid #2e9e57; cursor: pointer; }
.cr-post:hover { background: rgba(255,255,255,.07); }
.cr-cs { font: 800 13px var(--font-head); color: var(--t1); background: rgba(255,255,255,.07); border-radius: 6px; padding: 3px 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-pmain { display: grid; min-width: 0; } .cr-pmain b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-pmain small { color: var(--t3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-st { font-size: 11.5px; font-weight: 700; color: #6fdc98; white-space: nowrap; } .cr-st i { font-style: normal; font-weight: 500; opacity: .8; }
.cr-post.st-break { border-left-color: #fab219; } .cr-post.st-break .cr-st { color: #fab219; }
.cr-post.st-responding, .cr-post.st-roaming { border-left-color: #3987e5; } .cr-post.st-responding .cr-st, .cr-post.st-roaming .cr-st { color: #7fb2f0; }
.cr-post.st-offpost, .cr-post.st-vacant { border-left-color: #d03b3b; } .cr-post.st-offpost .cr-st, .cr-post.st-vacant .cr-st { color: #ff8a80; }
.cr-post.st-notin { border-left-color: #6b6b66; } .cr-post.st-notin .cr-st { color: var(--t3); }
.cr-post.st-vacant .cr-pmain b { color: #ff8a80; }
.cr-menu { position: fixed; z-index: 60; background: #2a2a27; border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; gap: 4px; min-width: 190px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.cr-menu b { font-size: 13px; padding: 2px 6px 6px; color: var(--t1); }
.cr-menu button { text-align: left; background: none; border: 0; color: var(--t2); padding: 8px 10px; border-radius: 8px; font: 600 14px var(--font-body, inherit); cursor: pointer; } .cr-menu button:hover { background: rgba(255,255,255,.08); color: #fff; } .cr-menu button.on { background: #1d3557; color: #fff; }
/* Jobs & log */
.cr-log { min-height: 0; } .cr-logfilter { margin-bottom: 8px; }
.cr-entries { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; display: grid; gap: 6px; align-content: start; }
.cr-ticket { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 4px solid #3987e5; cursor: pointer; }
.cr-ticket:hover { background: rgba(255,255,255,.09); }
.cr-ticket.sev-high { border-left-color: #fab219; } .cr-ticket.sev-critical { border-left-color: #ff4d4d; background: rgba(208,59,59,.12); } .cr-ticket.closed { opacity: .6; border-left-color: #555; }
.cr-tno { font: 800 16px var(--font-head); color: var(--t1); }
.cr-thead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cr-thead b { font-size: 15px; }
.cr-tstate { margin-left: auto; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; background: #1d3557; color: #9cc4f5; } .cr-tstate.closed { background: #2b2b28; color: var(--t3); }
.cr-ticket .cr-text { display: block; color: var(--t2); font-size: 13.5px; margin: 2px 0; } .cr-ticket .cr-by { font-size: 12px; color: var(--t3); } .cr-ticket .cr-by i { font-style: normal; color: #fab219; }
.cr-entry { opacity: .85; }
/* Job form (light modal) */
.cr-prio { display: flex; gap: 6px; flex-wrap: wrap; } .cr-prio input { position: absolute; opacity: 0; width: 0; }
.cr-prio span { display: inline-block; padding: 8px 12px; border: 1px solid #ddd; border-radius: 99px; font-weight: 600; font-size: 13px; cursor: pointer; }
.cr-prio input:checked + .sev-low { background: #e7f0fd; border-color: #3987e5; } .cr-prio input:checked + .sev-medium { background: #fff3d6; border-color: #e0a020; }
.cr-prio input:checked + .sev-high { background: #ffe1c7; border-color: #e07020; } .cr-prio input:checked + .sev-critical { background: #e53935; border-color: #e53935; color: #fff; }
.cr-outcome { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 8px; }
.cr-tview .dl { margin-bottom: 10px; } .cr-thist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.cr-thist li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 14px; } .cr-thist li span { color: var(--muted, #777); font-variant-numeric: tabular-nums; } .cr-thist small { display: block; color: var(--muted, #888); font-size: 12px; }
.cr-thist li.close div { font-weight: 700; } .cr-closebox { border-top: 1px solid #eee; margin-top: 12px; padding-top: 6px; }
.cr-tview .cr-tstate { margin-left: 0; }
/* Drawers */
.cr-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 92vw); z-index: 40; background: #191917; border-left: 1px solid var(--line); box-shadow: -20px 0 40px rgba(0,0,0,.45); display: flex; flex-direction: column; padding: 14px; gap: 10px; color: var(--t1); }
.cr-dhead { display: flex; gap: 10px; align-items: center; } .cr-dhead b { font: 700 18px var(--font-head); white-space: nowrap; }
.cr-dhead input { flex: 1; background: #121211; border: 1px solid var(--line); color: var(--t1); border-radius: 10px; padding: 9px 12px; font: inherit; }
.cr-dbody { overflow-y: auto; flex: 1; min-height: 0; }
.cr-dtable { width: 100%; border-collapse: collapse; font-size: 14px; } .cr-dtable th { text-align: left; color: var(--t3); font-size: 12px; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #191917; }
.cr-dtable td { padding: 8px; border-bottom: 1px solid #2a2a27; vertical-align: top; } .cr-dtable .small { color: var(--t3); }
.cr-dsub { margin: 14px 0 4px; font-size: 15px; } .cr-dsub span { color: var(--t3); font-weight: 500; font-size: 13px; margin-left: 6px; }
.cr-stbtn { border: 1px solid var(--line); background: #262623; color: #6fdc98; border-radius: 99px; padding: 4px 10px; font: 700 12px inherit; cursor: pointer; white-space: nowrap; }
.cr-stbtn.st-break { color: #fab219; } .cr-stbtn.st-responding, .cr-stbtn.st-roaming { color: #7fb2f0; } .cr-stbtn.st-offpost { color: #ff8a80; }
.cr-att { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; background: #2b2b28; color: var(--t2); }
.cr-att.att-in { background: rgba(46,158,87,.2); color: #6fdc98; } .cr-att.att-out { color: var(--t3); } .cr-att.att-late { background: rgba(208,59,59,.25); color: #ff8a80; } .cr-att.att-due { color: #9cc4f5; } .cr-att.att-blowout { background: #3a1d1d; color: #ff8a80; }
.cr-seg button.warn { color: #ff8a80; }
/* Wallboard */
.cr-wall .cr-wallgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: inherit; }
.cr-wall .cr-col { display: flex; flex-direction: column; gap: inherit; min-height: 0; } .cr-wall .cr-col > .live-panel { min-height: 0; }
.cr-wall .cr-log, .cr-wall .cr-pos { flex: 1; } .cr-wall .cr-zones { flex: 1; overflow-y: auto; }
.cr-wall .cr-cap b { font-size: clamp(34px, 3vw, 54px); } .cr-wall .cr-cap { min-width: 280px; }
.cr-wall .cr-zonelist li > span, .cr-wall .cr-zonelist li > b { font-size: 18px; }
.cr-wall .cr-ticket { cursor: default; } .cr-wall .cr-req-main b { font-size: 18px; }
.cr-wall .cr-reqs { max-height: none; flex: none; }
.cr-alert-show { font: 800 16px var(--font-head); text-transform: uppercase; letter-spacing: .06em; padding: 10px 16px; border-radius: 12px; background: #1b3b26; color: #6fdc98; }
.cr-alert-show.lvl-heightened { background: #4a3510; color: #fab219; } .cr-alert-show.lvl-critical { background: #d03b3b; color: #fff; animation: crflash 1.2s ease-out infinite; }
.cr-status b { color: var(--t1); }
@media (max-width: 1100px) { .cr { height: auto; overflow: visible; } .cr-grid2, .cr-wall .cr-wallgrid { grid-template-columns: 1fr; } .cr-pos { max-height: 60vh; } }
.cr .live-panel h3 span[data-foot-title] { margin-left: 0; color: var(--t1); font: inherit; }
/* Control room: clock in / out, weather, traffic, throughput */
.cr-dact { text-align: right; white-space: nowrap; }
.cr-clk { border: 1px solid #2e9e57; background: rgba(46,158,87,.15); color: #6fdc98; border-radius: 8px; padding: 5px 10px; font: 700 12px inherit; cursor: pointer; }
.cr-clk.out { border-color: #6b6b66; background: #262623; color: var(--t2); }
.cr-byc { font-style: normal; font-size: 10px; font-weight: 800; background: #3a3a35; color: var(--t2); border-radius: 4px; padding: 0 4px; }
.cr-wx { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--t1); font: 600 14px var(--font-head); cursor: pointer; white-space: nowrap; }
.cr-wx b { font-size: 17px; } .cr-wx small { color: var(--t3); } .cr-wx.warn { border-color: #fab219; } .cr-wxwarn { font-style: normal; color: #fab219; }
.cr-wxnow { display: flex; gap: 12px; align-items: center; } .cr-wxic { font-size: 34px; line-height: 1; } .cr-wxnow b { font-size: 22px; } .cr-wxnow small { display: block; color: var(--t3); font-size: 12.5px; }
.cr-wxalert { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: rgba(250,178,25,.15); color: #fab219; font-weight: 700; font-size: 13px; }
.cr-wxhours { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 10px; text-align: center; }
.cr-wxhours div { background: rgba(255,255,255,.04); border-radius: 8px; padding: 6px 2px; display: grid; gap: 1px; } .cr-wxhours div.warn { box-shadow: 0 0 0 1px #fab219 inset; }
.cr-wxhours span, .cr-wxhours small { font-size: 11px; color: var(--t3); } .cr-wxhours i { font-style: normal; font-size: 18px; } .cr-wxhours b { font-size: 13px; }
.cr-wxsrc { color: var(--t3); margin: 6px 0 0; }
[data-traffic] h4 { margin: 14px 0 6px; }
.cr-traffic { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-traffic li { display: grid; gap: 1px; padding: 6px 8px; border-left: 3px solid #6b6b66; background: rgba(255,255,255,.03); border-radius: 6px; font-size: 13px; }
.cr-traffic li.mag-2 { border-left-color: #fab219; } .cr-traffic li.mag-3, .cr-traffic li.mag-4 { border-left-color: #ff6b6b; }
.cr-traffic small, .cr-traffic span { color: var(--t3); }
.cr-trlinks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; } .cr-trlinks a { color: #7fb2f0; }
.cr-rate { display: block; font-style: normal; font-size: 11.5px; color: #7fb2f0; font-weight: 600; }
.cr-wall .cr-rate { font-size: 14px; }
.cr-wall .cr-wxpanel { flex: none; }
/* Control room: positions kept by control, assigning */
.cr-pos h3 .cr-mini-btn { margin-left: auto; font-size: 18px; font-weight: 700; }
.cr-needbtn { height: 30px; padding: 0 10px; background: #262623; color: var(--t1); border: 1px solid var(--line); }
.cr-needs button { width: 100%; text-align: left; display: flex; gap: 6px; align-items: center; border: 1px solid #6b4d10; background: rgba(250,178,25,.12); color: #fab219; border-radius: 10px; padding: 7px 10px; font: 600 12.5px inherit; cursor: pointer; margin-bottom: 8px; }
.cr-needs b { color: #ffd479; }
.cr-posq { width: 100%; box-sizing: border-box; background: #121211; border: 1px solid var(--line); color: var(--t1); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; margin-bottom: 8px; }
.cr-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; } .cr-menu .cr-danger { color: #ff8a80; }
.cr-freechips { display: flex; flex-wrap: wrap; gap: 6px; } .cr-freechips span { background: rgba(250,178,25,.12); color: #fab219; border-radius: 99px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.cr-qsel, .cr-drawer .cr-radioin { background: #121211; color: var(--t1); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; }
.cr-drawer .cr-radioin { width: 64px; }
.cr-drawer .cr-seg button[data-addpos2], .cr-drawer .cr-seg button[data-clearall] { color: #7fb2f0; }
.cr-addpos input, .cr-addpos select { width: 100%; box-sizing: border-box; } .cr-addpos td { padding: 4px; } .cr-addpos .cr-radioin { max-width: 80px; }
.cr-needs button { display: block; line-height: 1.45; } .cr-needs button svg { vertical-align: -2px; margin-right: 4px; }
/* Event page: Add-ons tab */
.ao-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ao-card { display: grid; gap: 10px; align-content: start; }
.ao-head { display: flex; gap: 12px; align-items: flex-start; } .ao-head h3 { margin: 0 0 4px; } .ao-head p { margin: 0; }
.ao-locked { opacity: .75; background: #fafafa; }
.ao-bill { margin: 0; }
.pf-items summary { cursor: pointer; } .pf-items ul { margin: 6px 0 0; padding-left: 18px; }

/* ===== GuardProtect alerts banner (all apps) ===== */
.gp-alerts { display: grid; gap: 0; }
.gp-alerts-top { position: relative; z-index: 45; }
.gp-alert { display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: #fff7e0; border-bottom: 1px solid #f0d58a; color: #5a4300; font-size: 14px; }
.gp-alert > div { flex: 1; display: grid; gap: 1px; } .gp-alert small { color: #7a6420; }
.gp-alert-ic { font-size: 18px; }
.gp-alert-system { background: #fdecea; border-color: #f3b4ae; color: #7a1a12; } .gp-alert-system small { color: #7a1a12; }
.gp-alert.sev-critical { background: #c62828; border-color: #a01f1f; color: #fff; } .gp-alert.sev-critical small { color: #ffe1de; }
.gp-alert-billing { background: #eef3ff; border-color: #c3d3f7; color: #1d3a7a; }
.gp-alert-info { background: #eef6f1; border-color: #bfe0cb; color: #14532d; }
.gp-alert-x { border: 0; background: none; font-size: 20px; color: inherit; opacity: .6; cursor: pointer; padding: 0 4px; } .gp-alert-x:hover { opacity: 1; }
/* ===== Help & support: tickets and what's new ===== */
.help-tabs { margin-bottom: 14px; }
.st-intro { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; } .st-intro h3 { margin: 0 0 4px; } .st-intro p { margin: 0; }
.st-unread td { background: #fffbea; }
.st-cats { display: flex; flex-wrap: wrap; gap: 6px; } .st-cats input { position: absolute; opacity: 0; width: 0; }
.st-cats span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line, #ddd); border-radius: 99px; cursor: pointer; font-size: 14px; }
.st-cats input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.st-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.st-thread { max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.wn-list { display: grid; gap: 12px; max-width: 820px; }
.wn-post h3 { margin: 6px 0; } .wn-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .wn-head .actions { margin-left: auto; }
.wn-new { border-left: 4px solid var(--primary); }
.wn-dot { display: inline-block; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.wn-body { color: var(--text-2, #333); line-height: 1.55; }
/* ===== GuardProtect admin: control panel ===== */
.gpo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.gpo-tile { background: #fff; border: 1px solid var(--line, #e5e5e5); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.gpo-tile span { font-size: 13px; color: var(--muted, #666); } .gpo-tile b { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; } .gpo-tile small { color: var(--muted, #777); font-size: 12px; }
.gpo-tile.warn { border-color: #e0a020; background: #fffaf0; } .gpo-tile.bad { border-color: #e53935; background: #fff5f4; } .gpo-tile.bad b { color: #c62828; }
.gpo-devbar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; background: #fff; } .gpo-devbar i { display: block; height: 100%; }
.gpo-devkey { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; } .gpo-devkey span { display: inline-flex; gap: 6px; align-items: center; } .gpo-devkey i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .gpo-devkey small { color: var(--muted, #888); }
.gpo-alertcard { border-color: #e53935; }
.gpo-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } @media (max-width: 900px) { .gpo-two { grid-template-columns: 1fr; } }
.gpo-clash { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .gpo-clash li { border-left: 3px solid #e0a020; padding: 6px 10px; background: #fffaf0; border-radius: 6px; font-size: 14px; }
.gpo-clash li div { font-size: 13px; color: #444; } .gpo-clash li div span { font-weight: 700; margin-right: 6px; }
.gpo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gpo-list li { padding: 6px 4px; border-bottom: 1px solid #f0f0f0; }
.gpo-table td { vertical-align: top; }
.gp-wallwrap { padding: 18px 24px; background: var(--bg, #f3f2ef); min-height: 100vh; }
.gpo-wall .gpo-tile b { font-size: 40px; } .gpo-wall h1 { font-size: 30px; } .gpo-wall .gpo-table { font-size: 15px; }
/* ===== GuardProtect admin: tickets ===== */
.tk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .tk-bar input { flex: 1; min-width: 200px; max-width: 360px; }
.tk-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 12px; align-items: start; } @media (max-width: 900px) { .tk-grid { grid-template-columns: 1fr; } }
.tk-list { padding: 6px; max-height: calc(100vh - 230px); overflow-y: auto; display: grid; gap: 4px; }
.tk-item { text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 10px; display: grid; gap: 3px; cursor: pointer; font: inherit; color: inherit; }
.tk-item:hover { background: #f6f6f6; } .tk-item.on { background: #eef3ff; border-color: #c3d3f7; } .tk-item.unread .tk-subj { font-weight: 700; }
.tk-top { display: flex; justify-content: space-between; gap: 8px; } .tk-top small { color: var(--muted, #888); white-space: nowrap; }
.tk-subj { font-size: 14px; } .tk-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); display: inline-block; margin-left: 4px; }
.tk-view { min-height: 400px; } .tk-vhead h2 { margin: 0 0 4px; font-size: 20px; }
.tk-ctl { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; } .tk-ctl label { display: grid; gap: 3px; font-size: 12px; color: var(--muted, #666); }
.tk-ctx code { font-size: 12px; } .tk-thread { max-height: 48vh; overflow-y: auto; margin: 10px 0; }
.tk-reply textarea { width: 100%; box-sizing: border-box; }

/* ===== Sign-in screens: security photo with the company's colours over it, the sign-in box on top ===== */
.auth-wrap {
  position: relative; isolation: isolate; flex-direction: column; gap: 14px;
  min-height: 100vh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--navy) url('/img/login-security.jpg') 28% center / cover no-repeat;
}
.auth-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--navy) 92%, transparent) 0%, color-mix(in srgb, var(--navy) 72%, transparent) 45%, color-mix(in srgb, var(--primary) 62%, transparent) 100%);
}
.auth-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(0,0,0,.35) 100%); }
.auth-card {
  max-width: 420px; border-radius: 18px; padding: 30px 30px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  animation: authIn .35s ease-out;
}
@keyframes authIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-logo { margin: -30px -30px 24px; padding: 22px 30px; }
.auth-card h2 { font-size: 24px; margin-bottom: 14px; }
.auth-card input { font-size: 16px; } /* no zoom on iPhone */
.auth-card .btn-primary.btn-block { padding-top: 13px; padding-bottom: 13px; font-size: 16px; }
.auth-code { font: 700 28px/1.2 ui-monospace, Menlo, Consolas, monospace !important; letter-spacing: 10px; text-align: center; }
.auth-links { gap: 12px; flex-wrap: wrap; }
.auth-foot { margin: 0; text-align: center; color: rgba(255,255,255,.82); font-size: 13px; display: grid; gap: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.auth-foot span { font-size: 12px; color: rgba(255,255,255,.6); } .auth-foot b { color: #fff; }
@media (max-width: 520px) {
  .auth-wrap { justify-content: flex-end; padding-bottom: max(20px, env(safe-area-inset-bottom)); background-position: 22% 30%; }
  .auth-card { padding: 26px 22px 22px; border-radius: 22px; }
  .auth-logo { margin: -26px -22px 20px; padding: 20px 22px; }
}
/* Sign-in layout: officer on the left on wide screens, in the top half on phones. */
.auth-wrap::before { background: linear-gradient(160deg, color-mix(in srgb, var(--navy) 84%, transparent) 0%, color-mix(in srgb, var(--navy) 58%, transparent) 45%, color-mix(in srgb, var(--primary) 55%, transparent) 100%); }
@media (min-width: 960px) {
  .auth-wrap { align-items: flex-end; padding-right: max(6vw, 40px); background-position: 20% center; }
  .auth-wrap > .auth-card, .auth-wrap > .auth-foot { width: 420px; }
}
@media (max-width: 520px) {
  .auth-wrap { background-size: auto 58vh; background-position: 31% top; }
  .auth-wrap::before { background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 55%, transparent) 0%, color-mix(in srgb, var(--navy) 70%, transparent) 45%, var(--navy) 62%, color-mix(in srgb, var(--primary) 70%, var(--navy)) 100%); }
}
@media (max-width: 520px) {
  /* Zoomed so the officer's SECURITY back panel sits in the space above the sign-in box. */
  .auth-wrap { background-size: auto 140vh; background-position: 28% -56vh; }
}

/* ===== Sign-in box as frosted glass: the photo shows through, blurred, with a dark tint so white text stays readable ===== */
.auth-wrap > .auth-card:not(.billing-only) {
  background: rgba(10, 14, 24, .42);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 60px rgba(0,0,0,.35);
  color: #fff;
}
.auth-wrap > .auth-card:not(.billing-only) .auth-logo { background: transparent; border-bottom: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 -3px 0 var(--primary); }
.auth-wrap > .auth-card:not(.billing-only) :is(h2, h3, label, p, b) { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.auth-wrap > .auth-card:not(.billing-only) .muted { color: rgba(255,255,255,.78) !important; }
.auth-wrap > .auth-card:not(.billing-only) input {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff;
}
.auth-wrap > .auth-card:not(.billing-only) input::placeholder { color: rgba(255,255,255,.6); }
.auth-wrap > .auth-card:not(.billing-only) input:focus { outline: none; background: rgba(255,255,255,.22); border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent); }
.auth-wrap > .auth-card:not(.billing-only) input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px rgba(30,34,44,.92) inset; caret-color: #fff; }
.auth-wrap > .auth-card:not(.billing-only) .btn:not(.btn-primary) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.auth-wrap > .auth-card:not(.billing-only) .btn:not(.btn-primary):hover { background: rgba(255,255,255,.22); }
.auth-wrap > .auth-card:not(.billing-only) .or { color: rgba(255,255,255,.75); }
.auth-wrap > .auth-card:not(.billing-only) .or::before, .auth-wrap > .auth-card:not(.billing-only) .or::after { border-top-color: rgba(255,255,255,.3); }
.auth-wrap > .auth-card:not(.billing-only) a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
/* Browsers without backdrop blur: a darker tint instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-wrap > .auth-card:not(.billing-only) { background: rgba(10, 14, 24, .78); }
}
/* The photo can show more now the box is see-through. */
@media (max-width: 520px) {
  .auth-wrap { background-size: cover; background-position: 30% center; }
  .auth-wrap::before { background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 45%, transparent) 0%, color-mix(in srgb, var(--navy) 55%, transparent) 50%, color-mix(in srgb, var(--primary) 55%, var(--navy)) 100%); }
}
@media (max-width: 520px) { .auth-wrap { background-size: auto 140vh; background-position: 28% -56vh; } }
/* Photo: officer walking away on the right of a tall picture. Computers: box on the left so he stays clear; phones: zoomed so his SECURITY vest sits above the box. */
.auth-wrap { background-position: 72% 46%; }
@media (min-width: 960px) {
  .auth-wrap { align-items: flex-start; padding-right: 16px; padding-left: max(6vw, 40px); background-position: center 46%; }
}
@media (min-width: 521px) and (max-width: 959px) { .auth-wrap { justify-content: flex-end; background-position: center bottom; } }
@media (max-width: 520px) { .auth-wrap { background-size: auto 110vh; background-position: 100% -32vh; } }

/* Room for the phone's status bar and notch (iPhone app, home-screen app); zero in a normal browser. */
.topbar { height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  padding-left: max(clamp(16px, 2.5vw, 32px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 2.5vw, 32px), env(safe-area-inset-right)); }
.portal-head { padding-top: env(safe-area-inset-top); }
.cv-bar { padding-top: calc(10px + env(safe-area-inset-top)); }
@media (max-width: 1024px) { .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } }
/* Full-screen views (live display, control room and its pop-outs, admin wallboard, ID card) also keep clear of the notch and home bar. */
.live {
  padding-top: max(clamp(10px, 1.1vw, 22px), env(safe-area-inset-top)); padding-bottom: max(clamp(10px, 1.1vw, 22px), env(safe-area-inset-bottom));
  padding-left: max(clamp(10px, 1.1vw, 22px), env(safe-area-inset-left)); padding-right: max(clamp(10px, 1.1vw, 22px), env(safe-area-inset-right));
}
.cr-dots { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.gp-wallwrap { padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.cr-drawer { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
/* Notification and account pop-ups: on phones, pinned under the header across the screen instead of hanging off the bell. */
@media (max-width: 640px) {
  .topbar .user-pop { position: fixed; top: calc(64px + env(safe-area-inset-top) + 6px); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; max-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); overflow-y: auto; }
}
/* Control room on a phone: keep the event name in the header. */
.cr .live-brand span[data-title] { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr .live-brand { min-width: 0; }

/* Subcontractors: report date range, totals row, printed heading */
.rep-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 4px 0 16px; }
.rep-range .field { margin: 0; min-width: 0; }
.rep-stats { margin: 4px 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rep-actions { margin-bottom: 14px; }
#repOut h4 { margin: 18px 0 8px; font-family: var(--font-head); }
.rep-total td { border-top: 2px solid var(--border); }
.print-only { display: none; }
@media print { .print-only { display: block; } .rep-print-head h2 { margin: 0 0 4px; } .rep-print-head p { margin: 0 0 14px; color: #555; } #subReport .table-wrap { overflow: visible; } }

/* Staff tags: picker on the staff form (kept apart from the department picker) and chips */
.stag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tag.stag { background: #e8f0fb; color: #1d4f91; }
.stag-list .tag-lg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legacy-example { word-break: break-all; }

/* Staff printouts (Sites → Deployments) */
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sp-head h4 { margin: 0; }
.sp-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-list { display: grid; gap: 2px; max-height: 300px; overflow: auto; border: 1px solid var(--line, #e3e3e3); border-radius: 10px; padding: 6px 10px; margin-top: 8px; }
.sp-list .sp-dep { align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line, #eee); margin: 0; }
.sp-list .sp-dep:last-child { border-bottom: 0; }
.sp-list .sp-past b { color: var(--muted, #777); }
.sp-sent { display: block; }
.sp-email { margin-top: 12px; }

/* Subcontractor orders (deployment form) and subcontractor portal */
.so-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto 36px; gap: 8px; align-items: center; margin: 8px 0; }
@media (max-width: 640px) { .so-row { grid-template-columns: minmax(0, 1fr) 80px 36px; } .so-row .so-st { grid-column: 1 / -1; order: 4; } }
.so-card .so-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.so-card h3 { margin: 0 0 2px; }
.so-dl { margin: 12px 0; }
.so-team { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.so-person { background: var(--soft, #f3f3f1); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.so-pick { max-height: 360px; }
.sub-docs { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sub-doc.ok { color: #15803d; } .sub-doc.no { color: #b91c1c; font-weight: 600; }
.sp-paper { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
@media (max-width: 520px) { .sp-paper { grid-template-columns: 1fr; } }

/* Deployment team: the name opens duties; their icons sit after it. */
.team-name { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.team-name:hover b { text-decoration: underline; color: var(--primary); }
.team-tag { font-size: 14px; line-height: 1; }
.team-tag-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Event → Matrix tab: response team matrix editor and its print preview. */
.mx-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.mx-fields label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.mx-logos { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
.mx-logos .logo-box { width: 150px; height: 90px; }
.mx-edit input { width: 100%; min-width: 78px; padding: 6px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: inherit; }
.mx-edit .mx-cs { min-width: 64px; width: 72px; }
.mx-edit td, .mx-edit th { padding: 4px; vertical-align: middle; }
.mx-edit tr.mx-sh td { background: #ececec; }
.mx-colh { display: flex; align-items: center; gap: 2px; }
.mx-colh input { font-weight: 700; }
.mx-tools { font-size: 12px; min-width: 168px; }
.mx-tools > div { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mx-tools label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mx-tools .link-btn { margin-left: 4px; }
.mx-tools input[type=checkbox] { width: auto; min-width: 0; }
.mx-preview { overflow-x: auto; }
.mx-preview .mx-sheet { box-sizing: content-box; padding: 8mm; border: 1px solid var(--border); }
.mx-tpls { margin: 6px 0 0 18px; }
.mx-edit input[data-f=name] { min-width: 140px; }
/* Matrix: the name dropdown (staff with the row's call sign who are booked first). */
.mx-dd { position: fixed; z-index: 60; max-height: 320px; overflow-y: auto; background: var(--card, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 4px; }
.mx-dd-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 4px; }
.mx-dd-h.mx-dd-match { color: var(--primary); }
.mx-dd-o { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 7px; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.mx-dd-o:hover, .mx-dd-o.on { background: var(--soft, #f1f4f9); }
.mx-dd-cs { color: #d4a000; margin-right: 6px; }
.pref-cs input { width: 190px; padding: 6px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: inherit; }
/* Preferred staff: search; uniform & kit pop-up. */
.pref-search { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.pref-search input { flex: 1; max-width: 420px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; font: inherit; background: var(--card); color: inherit; }
.uk-grid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 20px; }
.uk-issue { display: grid; grid-template-columns: 2fr 1fr .7fr 1.1fr; gap: 8px 12px; align-items: end; }
.uk-issue .uk-notes { grid-column: 1 / 4; }
@media (max-width: 700px) { .uk-grid, .uk-issue { grid-template-columns: 1fr; } .uk-issue .uk-notes { grid-column: auto; } }
.pref-table th.pref-kit, .pref-table td.pref-kit { min-width: 110px; }
.pref-table td.pref-kit .muted { font-size: 11.5px; }

/* Staff app: Staff KPIs & debriefs (supervisors and managers). */
.kp-head h2 { margin: 6px 0 2px; }
.kp-days, .kp-tabs { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.kp-deps { display: grid; gap: 10px; }
.kp-dep, .kp-person { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.kp-person { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; }
.kp-person > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.kp-dep:hover, .kp-person:hover { border-color: var(--primary); }
.kp-tags { display: flex; gap: 6px; margin-top: 4px; }
.kp-search { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--card); color: inherit; }
.kp-people { display: grid; gap: 8px; }
.kp-done { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.kp-who { display: flex; gap: 14px; align-items: center; margin: 10px 0 14px; }
.kp-who h3 { margin: 0; }
.kp-photo { width: 96px; height: 120px; flex: none; border-radius: 12px; background: #eceae4; display: grid; place-items: center; overflow: hidden; }
.kp-photo img { width: 100%; height: 100%; object-fit: cover; }
.kp-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.kp-q.kp-miss > span { color: var(--red, #dc2626); font-weight: 600; }
.kp-scale, .kp-yn { display: flex; gap: 6px; }
.kp-scale button, .kp-yn button { min-width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: inherit; font: 700 15px var(--font-head, inherit); cursor: pointer; }
.kp-yn button { min-width: 56px; }
.kp-scale button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.kp-yn button.on[data-v="yes"] { background: #16a34a; border-color: #16a34a; color: #fff; }
.kp-yn button.on[data-v="no"] { background: #dc2626; border-color: #dc2626; color: #fff; }
.kp-team { display: grid; gap: 10px; }
.kp-tm { display: grid; grid-template-columns: 1fr 150px; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kp-tm input { grid-column: 1 / -1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: inherit; font: inherit; }
.kp textarea { width: 100%; }

/* Deployment page: Staff KPIs & debrief. */
.kr-sum { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin: 6px 0 12px; }
.kr-cat { display: grid; grid-template-columns: 190px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.kr-bar { height: 8px; background: #eceae4; border-radius: 99px; overflow: hidden; }
.kr-bar i { display: block; height: 100%; border-radius: 99px; }
.kr-green { background: #16a34a; } .kr-amber { background: #f59e0b; } .kr-red { background: #dc2626; }
.kr-chk { font-size: 13px; padding: 3px 0; display: flex; gap: 8px; align-items: center; }
.kr-feedback { background: var(--soft, #f4f6fb); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.kr-feedback p { margin: 4px 0 0; }
.kr-ph { width: 44px; height: 54px; border-radius: 8px; object-fit: cover; display: block; }
.kr-noph { background: #eceae4; }
.kr-debrief { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.kr-dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; font-size: 14px; }
.kr-dl dt { font-weight: 600; } .kr-dl dd { margin: 0; white-space: pre-wrap; }
.kr-one { display: grid; grid-template-columns: 220px 1fr; gap: 18px; }
.kr-one img { width: 100%; border-radius: 12px; }
@media (max-width: 760px) { .kr-sum, .kr-one, .kr-dl { grid-template-columns: 1fr; } .kr-cat { grid-template-columns: 1fr 1fr 30px; } }
@media (max-width: 560px) { .kp-q { flex-direction: column; align-items: stretch; gap: 6px; } .kp-scale button, .kp-yn button { flex: 1; } }
.kr-cats-staff { max-width: 560px; margin-bottom: 12px; }
.kr-row { cursor: pointer; }
.kr-row:hover td { background: var(--soft, #f4f6fb); }
/* Reports */
.rep-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 8px 0 14px; }
.rep-filters label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; }
.rep-filters input, .rep-filters select { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: inherit; font: inherit; font-weight: 400; min-width: 140px; max-width: 240px; }
.kprep-wrap { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: #fff; overflow-x: auto; }
.kprep-wrap .kprep { max-width: 186mm; margin: 0 auto; }

/* Incidents (office) */
.inc-row { cursor: pointer; }
.inc-row:hover td { background: var(--soft, #f4f6fb); }
.inc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 520px; }
.inc-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.inc-counts span { background: var(--soft, #f1f4f9); border-radius: 99px; padding: 4px 10px; font-size: 13px; }
.inc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.inc-photos figure { margin: 0; display: grid; gap: 4px; }
.inc-photos img, .inc-photos video { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.inc-file { display: grid; place-items: center; height: 150px; border: 1px dashed var(--border); border-radius: 10px; }
.inc-photos .link-btn { margin: 0; justify-self: start; }

/* Staff app: incident log */
.ia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.ia-btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 16px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: inherit; font: 700 15px var(--font-head, inherit); cursor: pointer; text-align: left; min-height: 64px; }
.ia-btn:active { transform: scale(.98); }
.ia-btn .ia-ic { font-size: 24px; }
.ia-btn b { font-size: 20px; }
.ia-incident, .ia-ejection { border-color: #fecaca; background: #fff5f5; }
.ia-firstaid, .ia-police, .ia-welfare { border-color: #bfdbfe; background: #f5f9ff; }
.ia-engagement { border-color: #bbf7d0; background: #f4fdf7; }
.ia-problem { border-color: #fde68a; background: #fffbeb; }
.ia-loghead { display: flex; justify-content: space-between; align-items: baseline; }
.ia-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ia-log li { display: grid; grid-template-columns: 44px 28px 1fr; gap: 6px; padding: 10px; border: 1px solid var(--border); border-left: 4px solid #9ca3af; border-radius: 10px; }
.ia-log li.sev-medium { border-left-color: #f59e0b; } .ia-log li.sev-high { border-left-color: #dc2626; }
.ia-log li.ia-none { display: block; border: 0; color: var(--muted); }
.ia-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.ia-log .ia-ic { font-size: 18px; }
.ia-ph { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.ia-ph img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.ia-undo { margin: 0; color: var(--primary); }
.ia-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-sev { display: flex; gap: 6px; }
.ia-sev button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: inherit; font-weight: 700; cursor: pointer; }
.ia-sev button.on[data-s="low"] { background: #6b7280; color: #fff; border-color: #6b7280; }
.ia-sev button.on[data-s="medium"] { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.ia-sev button.on[data-s="high"] { background: #dc2626; color: #fff; border-color: #dc2626; }
.ia-phs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ia-phs span { position: relative; }
.ia-phs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.ia-phs button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #111; color: #fff; cursor: pointer; }
.ia-more summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.ia-form textarea, .ia-form input:not([type=file]) { width: 100%; }
/* Event report pop-up */
.er-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }

/* Reports page: a button for each report, grouped */
.rp-group { margin: 6px 0 26px; }
.rp-group h2 { font-size: 18px; margin: 0 0 2px; }
.rp-group > p { margin: 0 0 12px; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rp-card { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rp-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.rp-card b { display: block; font-family: var(--font-head); font-size: 15px; margin-bottom: 3px; }
.rp-card .small { display: block; line-height: 1.45; }
.rp-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); color: var(--primary); }
.rp-ic .ico, .rp-ic svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .modal-report { max-width: 1120px; width: 96vw; } }
.rep-acts { display: flex; gap: 8px; margin-left: auto; align-items: flex-end; }
.rk-wrap { background: #e9e9e9; padding: 18px; max-height: 68vh; overflow: auto; }
.rk-wrap > .rk { background: #fff; width: 182mm; max-width: 100%; margin: 0 auto; padding: 14mm 14mm 18mm; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.rk-wrap.rk-land > .rk { width: 269mm; }
.modal-report .kprep-wrap:not(.rk-wrap) { max-height: 68vh; overflow: auto; }

/* Staff clock-in link (clock.html) */
.ck-body { background: var(--bg); }
.ck { max-width: 480px; margin: 0 auto; padding: 14px 14px 28px; }
.ck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--navy); color: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.ck-head img { height: 30px; max-width: 60%; object-fit: contain; }
.ck-head span { font: 700 15px var(--font-head); }
.ck-card { background: var(--card); border-radius: 16px; padding: 20px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ck-card h1 { font-size: 24px; margin: 0 0 4px; }
.ck-card h2 { font-size: 16px; margin: 18px 0 8px; }
.ck-card .field { display: grid; gap: 5px; margin: 12px 0; font-weight: 600; font-size: 14px; }
.ck-card .field input { font-size: 17px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.ck-big { font-size: 17px; padding: 15px; border-radius: 13px; margin-top: 14px; }
.ck-gps { font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--bg); color: var(--muted); margin: 6px 0; }
.ck-gps.ok { background: #e7f6ee; color: #11653f; } .ck-gps.bad { background: #fdecea; color: #a1281e; }
.ck-gps .btn { margin-left: 6px; }
.ck-status { padding: 10px 12px; border-radius: 10px; background: var(--bg); margin: 8px 0 0; }
.ck-status.on { background: #e7f6ee; color: #11653f; }
.ck-places { display: grid; gap: 8px; }
.ck-place { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: #fff; }
.ck-place:has(input:checked) { border-color: var(--primary); background: #fff5f4; }
.ck-place input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.ck-place span { display: grid; gap: 2px; } .ck-place b { font: 600 15px var(--font-head); } .ck-place small { color: var(--muted); font-size: 12.5px; }
.ck-other { font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); }
.ck-back { display: block; margin: 14px auto 0; color: var(--muted); font-size: 13.5px; }
.ck-cam { position: relative; aspect-ratio: 3 / 4; background: #111; border-radius: 14px; overflow: hidden; margin-top: 12px; }
.ck-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-cam img { width: 100%; height: 100%; object-fit: contain; display: block; background: #111; }
.ck-cam video { transform: scaleX(-1); }
.ck-cammsg { position: absolute; inset: 0; display: grid; place-items: center; color: #ddd; padding: 20px; text-align: center; }
.ck-confirm { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 14px; }
.ck-confirm .btn { padding: 14px; font-size: 16px; border-radius: 12px; }
.ck-done { text-align: center; }
.ck-tick { width: 72px; height: 72px; border-radius: 50%; background: #11845b; color: #fff; display: grid; place-items: center; font-size: 38px; margin: 6px auto 12px; }
.ck-done p { margin: 8px 0; }
.ck-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 14px; }
.ck-set .copybox { width: 100%; margin-bottom: 8px; }

/* Rota grid (#/rota) */
.rt-bar { display: flex; gap: 14px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }
.rt-bar input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; min-width: 260px; font: inherit; background: var(--card); }
.rt-wrap { overflow: auto; max-height: calc(100vh - 210px); border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.rt { display: grid; min-width: max-content; }
.rt > div { border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.rt-h { position: sticky; top: 0; z-index: 3; background: var(--navy); color: #fff; padding: 7px 9px; font-size: 12px; }
.rt-h b { font-family: var(--font-head); font-size: 12.5px; display: block; margin-bottom: 3px; }
.rt-hdep { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11.5px; color: #ddd; margin-top: 2px; }
.rt-hdep .rt-short { color: #ffb4ac; }
.rt-mini { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 6px; font-size: 11px; padding: 1px 7px; cursor: pointer; }
.rt-mini:hover { background: rgba(255,255,255,.12); }
.rt-sticky { position: sticky; left: 0; z-index: 2; background: #fff; }
.rt-sticky2 { position: sticky; left: 190px; z-index: 2; background: #f5f7fc; }
.rt-h.rt-sticky, .rt-h.rt-sticky2 { z-index: 4; background: var(--navy); }
.rt-name { padding: 8px 10px; display: flex; align-items: center; }
.rt-name .person { gap: 8px; } .rt-name a { color: inherit; } .rt-name .small { display: block; }
.rt-role { padding: 8px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; }
.rt-cell { padding: 5px; min-height: 76px; background: #fafafa; position: relative; display: grid; gap: 5px; align-content: start; }
.rt-cell.rt-none { background: repeating-linear-gradient(135deg, #f6f6f6, #f6f6f6 6px, #efefef 6px, #efefef 12px); }
.rt-cell.rt-off { background: #fdf3f2; }
.rt-add { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: transparent; font-size: 22px; cursor: pointer; }
.rt-cell:hover .rt-add { color: var(--primary); background: rgba(228,35,19,.04); }
.rt-unav { position: absolute; bottom: 5px; left: 7px; font-size: 10.5px; color: #b91c1c; pointer-events: none; }
.rt-card { background: #fff; border: 1px solid #c9d7f2; border-left: 3px solid #5b8def; border-radius: 7px; padding: 5px 6px; font-size: 11.5px; display: grid; gap: 3px; transition: box-shadow .2s; }
.rt-card.rt-confirmed { border-left-color: #2563eb; background: #f4f8ff; }
.rt-card.rt-attended { border-left-color: #11845b; background: #f2fbf6; border-color: #bfe6d2; }
.rt-card.rt-blowout { border-left-color: #9a9a9a; background: #f1f1f1; border-color: #ddd; }
.rt-card.rt-saved { box-shadow: 0 0 0 2px #11845b55; }
.rt-draft { border: 1.5px dashed #9ab3e6; border-left: 3px dashed #5b8def; background: #fbfdff; color: #3b5ba5; }
.rt-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.rt-dep { color: #2f56b5; font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.rt-x { border: 0; background: none; color: #999; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.rt-x:hover { color: var(--primary); }
.rt-lbl { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: .04em; }
.rt-times { display: flex; align-items: center; gap: 3px; }
.rt-times input { width: 64px; padding: 2px 5px; font-size: 12.5px; font-variant-numeric: tabular-nums; border: 1px solid #b8c8ea; border-radius: 5px; background: #dce8ff; font-weight: 600; }
.rt-in { padding: 2px 5px; font-size: 11.5px; border: 1px solid #e0e0e0; border-radius: 5px; background: #fff; }
.rt-st { padding: 2px 4px; font-size: 11.5px; border: 1px solid #e0e0e0; border-radius: 5px; background: #fff; }
.rt-att { display: flex; gap: 4px; align-items: center; font-size: 11.5px; } .rt-att i { color: #aaa; font-style: normal; }
.rt-blow { color: #8a1c13; font-size: 10.5px; font-weight: 600; }
.rt-pick { display: grid; gap: 8px; }

.rt-times input::-webkit-calendar-picker-indicator { display: none; }
.rt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .rt-two input { min-width: 0; }

/* Requirements: date column, import mapper, day timeline (reqImport.js, reqTimeline.js) */
.req-date { padding: 4px 6px; font-size: 13px; width: 132px; }
.req-view { margin: 10px 0 4px; }
.req-view .active { background: var(--navy); color: #fff; }
.ri-top { display: flex; flex-wrap: wrap; gap: 12px; } .ri-top .field { flex: 1 1 260px; }
.ri-map td { vertical-align: middle; } .ri-map select { width: 100%; min-width: 180px; } .ri-off td:first-child b { color: var(--muted); }
.ri-h { margin: 14px 0 6px; } .ri-prev { max-height: 260px; overflow: auto; } .ri-prev td { white-space: nowrap; }
@media (min-width: 900px) { .modal-wide:has(.ri) { max-width: 1000px; width: 96vw; } }
.gt-bar-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin: 8px 0; }
.gt-days { display: flex; flex-wrap: wrap; gap: 6px; } .gt-opts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.gt-opts select { padding: 4px 8px; font-size: 13px; margin-left: 4px; } .gt-chk { display: inline-flex; gap: 6px; align-items: center; }
.gt-warn { color: var(--red); }
.gt-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 10px; color: var(--muted); } .gt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gt-k { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.gt-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.gt { --gt-lab: 230px; position: relative; min-width: 900px; font-size: 13px; }
.gt-row { display: grid; grid-template-columns: var(--gt-lab) 1fr; border-bottom: 1px solid #f0f0f0; min-height: 30px; }
.gt-lab { padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; min-width: 0; border-right: 1px solid var(--border); position: sticky; left: 0; background: var(--card); z-index: 2; }
.gt-lab b, .gt-lab small, .gt-lab a, .gt-lab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gt-lab small { color: var(--muted); font-size: 11.5px; }
.gt-track { position: relative; }
.gt-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, #ececec 1px, transparent 1px); background-size: calc(100% / var(--h)) 100%; pointer-events: none; }
.gt-axis { position: sticky; top: 0; z-index: 3; background: var(--card); min-height: 26px; }
.gt-hours, .gt-cells { display: grid; grid-template-columns: repeat(var(--h), 1fr); }
.gt-hours span { font-size: 11.5px; color: var(--muted); padding: 6px 0 0 4px; border-left: 1px solid #ececec; font-variant-numeric: tabular-nums; }
.gt-cover .gt-cells span { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border-left: 2px solid var(--card); font-variant-numeric: tabular-nums; }
.gt-cover .gt-cells .ok { background: var(--green-bg); color: var(--green); } .gt-cover .gt-cells .short { background: var(--red-bg); color: var(--red); }
.gt-group { padding: 7px 10px 5px; background: #fafafa; border-bottom: 1px solid var(--border); position: sticky; left: 0; }
.gt-sect { font: 700 11.5px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: #f4f4f4; }
.gt-bar { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; display: flex; align-items: center; overflow: hidden; min-width: 3px; text-decoration: none; cursor: default; }
.gt-bar span { padding: 0 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-dep, .gt-k.gt-dep { background: var(--navy); color: #fff; } a.gt-dep { cursor: pointer; }
.gt-person, .gt-k.gt-person { background: #5b6b7d; color: #fff; } .gt-out { background: repeating-linear-gradient(135deg, #e0e0e0 0 5px, #f2f2f2 5px 10px); color: var(--muted); text-decoration: line-through; }
.gt-subrow .gt-lab { padding-left: 22px; } .gt-sub { font-weight: 500; }
.gt-exact, .gt-k.gt-exact { background: var(--green-bg); color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.gt-likely, .gt-k.gt-likely { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber); }
.gt-none, .gt-k.gt-none { background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.gt-open, .gt-k.gt-open { background: repeating-linear-gradient(135deg, #fff 0 5px, #f0f0f0 5px 10px); color: var(--muted); box-shadow: inset 0 0 0 1.5px #b9b9b9; }
.gt-bar:hover { filter: brightness(.95); }
.gt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); z-index: 4; pointer-events: none; }
.gt-tip { position: fixed; z-index: 1000; background: #212121; color: #fff; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.45; max-width: 280px; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.gt-cover .gt-cells .on { background: #eef1f4; color: var(--navy); }

/* ---- Event RAMS (views/rams.js) ---- */
.ra-empty p { max-width: 760px; }
.ra-busy { display: flex; gap: 16px; align-items: center; }
.ra-busy h3 { margin: 0 0 4px; }
.ra-spin { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid var(--border, #e5e5e5); border-top-color: var(--primary); animation: ra-spin 0.9s linear infinite; }
@keyframes ra-spin { to { transform: rotate(360deg); } }
.ra-gaps { margin: 12px 0; padding: 10px 14px; border-radius: 8px; background: var(--amber-bg); display: grid; gap: 4px; }
.ra-gap { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92em; cursor: pointer; }
.ra-gap input { margin-top: 3px; }
.ra-gap.done span { text-decoration: line-through; opacity: 0.6; }
.ra-tbl { min-width: 1180px; }
.ra-tbl td { vertical-align: top; }
.ra-tbl textarea, .ra-tbl input { width: 100%; min-width: 0; font-size: 0.9em; }
.ra-tbl textarea + textarea { margin-top: 4px; }
.ra-tbl td:nth-child(3) { width: 22%; }
.ra-tbl td:nth-child(6) { width: 28%; }
.ra-tbl .ra-area { width: 110px; }
.ra-tbl .ra-n { width: auto; padding: 2px 4px; }
.ra-tbl [data-score] div { margin-top: 6px; }
.ra-method { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ra-sec { border: 1px solid var(--border, #e5e5e5); border-radius: 8px; padding: 8px; display: grid; gap: 6px; }
.ra-sec-h { display: flex; gap: 6px; }
.ra-sec-h input { flex: 1; font-weight: 600; }
.ra-sec textarea { width: 100%; }
.ra-src { margin: 0; padding-left: 18px; }
.ra-write h4 { margin: 14px 0 6px; }
.ra-doc { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--border, #eee); cursor: pointer; }
.ra-doc input { margin-top: 3px; }
.ra-doc small { display: block; color: var(--muted); }
.ra-doc.off { opacity: 0.6; cursor: default; }
.ra-sys { display: grid; gap: 4px; }
.ra-warn { background: var(--amber-bg); color: var(--amber); padding: 8px 12px; border-radius: 8px; }
@media (max-width: 640px) {
  .ra-tbl { min-width: 0; }
  .ra-tbl.stack td { display: block; text-align: left; padding: 4px 0; }
  .ra-tbl.stack td::before { display: block; margin-bottom: 2px; }
  .ra-tbl.stack td:nth-child(n) { width: 100%; }
  .ra-tbl.stack .ra-area { width: 100%; }
  .ra-tbl.stack [data-score] div { display: inline-block; margin: 0 0 0 8px; }
}

/* ---- Site patrols (views/patrols.js) ---- */
.pt-empty p { max-width: 760px; }
.pt-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pt-filters .field { margin: 0; }
.pt-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.pt-quick .check { margin-left: 6px; }
.pt-quick [data-sum] { margin-left: auto; }
.pt-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.pt-map { height: 560px; border-radius: 10px; border: 1px solid var(--border, #e5e5e5); z-index: 0; }
.pt-list { max-height: 560px; overflow: auto; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.85em; margin-bottom: 6px; }
.pt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.pt-tbl td { vertical-align: top; }
.pt-pin { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font: 700 10px/1 'Rethink Sans', Arial, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pt-pin-sm { width: auto; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; box-shadow: none; border: 0; }
.pt-pin-wrap { background: none; border: 0; }
@media (max-width: 900px) {
  .pt-body { grid-template-columns: 1fr; }
  .pt-map { height: 380px; }
  .pt-list { max-height: none; }
  .pt-quick [data-sum] { margin-left: 0; width: 100%; }
}

/* Staff profile: header with the photo and key figures, then tabs */
.sd-hero { display: flex; align-items: center; gap: 20px; margin: 8px 0 14px; }
.sd-hero .avatar-lg { width: 104px; height: 104px; font-size: 32px; }
.sd-id { flex: 1; min-width: 0; display: grid; gap: 5px; }
.sd-id h1 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.sd-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sd-contact a { color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-acts { display: flex; gap: 8px; align-items: flex-start; align-self: flex-start; }
.sd-more { position: relative; }
.sd-more > summary { list-style: none; }
.sd-more > summary::-webkit-details-marker { display: none; }
.sd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; display: grid; }
.sd-menu > a, .sd-menu > button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; text-decoration: none; }
.sd-menu > a:hover, .sd-menu > button:hover { background: var(--bg); }
.sd-menu .danger { color: var(--primary); }
.sd-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-bottom: 14px; }
.sd-stats a.stat { text-decoration: none; }
.sd-stats a.stat:hover { border-color: #cfcfcf; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.sd-stats .stat b small { font-size: .55em; color: var(--muted); font-weight: 600; }
.stat-warn b { color: var(--amber); }
.sd-glance { grid-template-columns: 150px 1fr; }
.sd-next { list-style: none; margin: 0; padding: 0; display: grid; }
.sd-next li + li { border-top: 1px solid var(--border); }
.sd-next a { display: grid; gap: 2px; padding: 9px 0; color: var(--text); text-decoration: none; }
.sd-next a:hover b { color: var(--primary); }
@media (max-width: 760px) {
  .sd-hero { flex-wrap: wrap; gap: 14px; }
  .sd-hero .avatar-lg { width: 72px; height: 72px; font-size: 24px; }
  .sd-acts { width: 100%; }
  .sd-acts > .btn { flex: 1; }
  .sd-stats { grid-template-columns: repeat(2, 1fr); }
}
.sd-chips > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.sd-chips > span > i { font-style: normal; color: var(--muted); }
.sd-chips { gap: 6px 14px; }
.sp-frame { width: 100%; min-height: 80vh; border: 0; border-radius: 12px; background: #e9e9e9; display: block; }
.rec-acts { margin-left: auto; display: flex; gap: 10px; }
.sp-opt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.sp-opt select { width: auto; padding: 8px 10px; }
.sd-menu .check { padding: 7px 10px; white-space: nowrap; }

/* Site → Banned list */
.bn-bar { display: grid; gap: 8px; margin-bottom: 8px; }
.bn-bar input[type=search] { max-width: 420px; }
.bn-list { display: grid; gap: 10px; }
.bn-card { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fff; }
.bn-card.active { border-left: 4px solid var(--primary); }
.bn-card.lifted { opacity: .75; }
.bn-photo { width: 64px; height: 76px; border-radius: 10px; object-fit: cover; flex: none; background: var(--bg); }
.bn-ini { display: flex; align-items: center; justify-content: center; font: 700 20px var(--font-head); color: var(--muted); }
.bn-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bn-top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bn-top .badge { margin-left: auto; }
.bn-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .bn-card { flex-wrap: wrap; } .bn-acts { width: 100%; justify-content: flex-start; } .bn-top .badge { margin-left: 0; } }
/* Site → Counter */
.sc-cfg { margin-bottom: 14px; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sc-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); }
.sc-list li:first-child { border-top: 0; }
.sc-list li.urgent { background: var(--red-bg); margin: 0 -10px; padding: 9px 10px; border-radius: 8px; }
.sc-acts { display: flex; gap: 6px; flex: none; }
.dept-feat { color: var(--primary); font-weight: 600; }
.dept-name { font: inherit; color: inherit; padding: 0; }
.bcrp-strip { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
/* Staff app incident form: location and BCRP */
.ia-geo { padding: 8px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); margin-bottom: 10px; }
.ia-geo.ok { background: var(--green-bg); color: var(--green); }
.ia-geo.off { background: var(--amber-bg); color: var(--amber); }
.ia-bcrp { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.ia-bcrp summary { font-weight: 700; cursor: pointer; }
.ia-bcrp[open] summary { margin-bottom: 8px; }
.ia-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ia-num { justify-content: flex-start; }
.ia-num button { background: #fff; color: var(--text); border-color: var(--border); }
.ia-bcrp label.check { display: flex; gap: 10px; align-items: center; margin: 8px 0; text-align: left; } .ia-bcrp label.check input { width: auto; flex: none; margin: 0; }
.sp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }