/* Modern workspace composition. Business surfaces stay solid and readable. */
:root { --r:16px; --r-sm:9px; --sidebar-w:232px; --nav-surface:#F0F1F3; --nav-active:#E2E4E8; --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
:root[data-theme="dark"] { --nav-surface:#17181B; --nav-active:#2B2D32; }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { --nav-surface:#17181B; --nav-active:#2B2D32; } }
body { background:var(--canvas); }
body::before { content:none; }
.sidebar { margin:0; padding:28px 14px 16px; gap:4px; border-radius:0; border:0; border-right:1px solid var(--border); background:var(--nav-surface); box-shadow:none; }
.brand { padding:0 12px 18px; flex-direction:column; align-items:center; gap:8px; }
.brand-badge,.login-badge { padding:0; border:0; background:none; box-shadow:none; border-radius:0; color-scheme:inherit; }
.brand-badge { width:176px; max-width:100%; padding:8px; background:none; border-radius:0; }
/* Trim the transparent PNG's blank vertical margins in the layout. */
.brand-badge .brand-logo,.topbar-logo .brand-logo { display:block; width:100%; max-width:none; height:auto; aspect-ratio:736 / 250; object-fit:cover; object-position:center; }
.brand-lockup { display:block; width:100%; height:auto; color:var(--text); overflow:visible; }
.brand-caption { width:176px; max-width:100%; text-align:center; color:var(--text-dim); font-size:12px; letter-spacing:.02em; }
.nav { gap:3px; margin-top:0; }
.nav-group-label { margin:17px 12px 5px; font-size:11px; font-weight:500; letter-spacing:.01em; text-transform:none; }
.nav-item { min-height:40px; padding:9px 12px; gap:10px; border-radius:9px; font-size:13.5px; border:0; transition:background .15s,color .15s; }
.nav-item .nav-ico { width:18px; height:18px; opacity:.85; }
.nav-item:hover { background:color-mix(in srgb,var(--text) 5%,transparent); }
.nav-item.active { background:var(--nav-active); color:var(--text); font-weight:600; box-shadow:none; }
.nav-item.active::before { content:none; }
.nav-badge { font-family:var(--ui); font-size:11px; font-weight:500; color:var(--text-dim); background:color-mix(in srgb,var(--text) 8%,transparent); height:19px; min-width:19px; }
.sidebar-foot { padding-top:18px; gap:10px; }
.lang-current { min-height:36px; padding:6px 10px; border:0; background:transparent; border-radius:9px; }
.lang-current:hover { background:var(--nav-active); }
.account-pill { padding:10px 8px; border:0; border-radius:10px; background:transparent; margin-bottom:2px; }
.account-avatar { border-radius:50%; border:0; background:var(--nav-active); color:var(--text); }
.account-role { font-family:var(--ui); font-size:10.5px; text-transform:none; letter-spacing:0; color:var(--text-dim); margin-top:4px; }
.logout-btn { border:0; min-height:32px; background:transparent; }
.health-pill { padding:8px 10px; border:0; background:transparent; font-family:var(--ui); font-size:11px; }
.view { padding:32px 32px 0; }
.view-head { border-bottom:0; padding-bottom:0; margin-bottom:28px; align-items:center; gap:20px; }
.view-head h1 { font-size:30px; font-weight:650; line-height:1.2; letter-spacing:-.035em; }
.view-sub { margin-top:8px; max-width:64ch; font-size:14px; color:var(--text-dim); line-height:1.55; }
.ghost-btn,.btn { border-radius:9px; }
.view-head .ghost-btn { flex-shrink:0; color:var(--text-dim); background:transparent; border-color:var(--border); box-shadow:none; padding:8px 12px; font-size:12.5px; }
.view-head .ghost-btn:hover { color:var(--text); background:var(--surface); border-color:var(--border-bright); }
.panel-grid { gap:24px; padding-bottom:32px; }
.panel,.status-card,.job-card,.mk-gd-card,.hot-lead { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); backdrop-filter:none; -webkit-backdrop-filter:none; }
.panel { min-width:0; }
.panel h2,.panel-title,.mk-h,.set-h { color:var(--text); font-family:var(--ui); font-size:16px; font-weight:600; letter-spacing:-.015em; line-height:1.4; margin-bottom:18px; }
.mk-foot { font-family:var(--ui); font-size:11.5px; line-height:1.6; padding:16px 0 0; color:var(--text-dim); }
.panel table,.qt-pre { background:var(--surface); }
.panel th { font-family:var(--ui); font-size:11.5px; letter-spacing:.01em; text-transform:none; padding-top:12px; padding-bottom:12px; }
.panel td { padding-top:12px; padding-bottom:12px; }
.mk-cards { gap:16px; margin-bottom:20px; }
.mk-card { padding:16px; border-radius:12px; background:var(--input); }
.mk-val,.adsx-val { font-family:var(--ui); font-weight:650; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.metric { min-width:0; }
.metric-label { font-size:12px; color:var(--text-dim); line-height:1.45; margin-bottom:7px; }
.metric-value { font-family:var(--ui); font-size:24px; font-weight:650; letter-spacing:-.025em; line-height:1.2; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
/* A real toolbar reserves its full height before any camera tile. */
.cam-panel { padding:24px; }
.cam-section-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 20px; margin-bottom:20px; }
.cam-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cam-heading .mk-h { margin:0; }
.cam-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--text-dim); }
.cam-status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--good); }
.cam-status.off::before { background:var(--text-faint); }
.cam-actions { display:flex; gap:8px; flex-wrap:wrap; }
.cam-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; float:none; margin:0; border:1px solid var(--border); border-radius:9px; padding:7px 11px; background:var(--surface); color:var(--text-dim); font-size:12px; font-weight:500; line-height:1.4; cursor:pointer; }
.cam-actions button:hover { background:var(--input); color:var(--text); border-color:var(--border-bright); }
.cam-actions svg { width:15px; height:15px; flex:none; }
.cam-grid { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:0; }
.cam-tile,.cam-tile.on { border-radius:12px; border:1px solid var(--border); background:var(--surface); box-shadow:none; transition:border-color .15s; }
.cam-tile:hover { border-color:var(--border-bright); }
.cam-label { min-height:44px; padding:10px 12px; background:var(--surface); font-size:13px; font-weight:550; gap:8px; }
.cam-zone { font-size:11px; font-weight:400; }
.cam-ptz-btn { background:var(--surface); border:1px solid var(--border); backdrop-filter:none; -webkit-backdrop-filter:none; min-height:28px; }
.cam-panel>.mk-foot { font-size:11px; padding-top:14px; }
/* Quotes reads as an inbox, rather than boxes inside boxes. */
.qt-cols { gap:24px; grid-template-columns:minmax(280px,340px) minmax(0,1fr); }
.qt-list { background:var(--surface); border:1px solid var(--border); border-radius:16px; gap:0; padding:8px; }
.qt-list>.panel { border:0; border-radius:0; background:var(--surface); box-shadow:none; padding:14px 4px 6px; }
.qt-list>.panel+.panel { border-top:1px solid var(--border); margin-top:12px; }
.qt-sec .mk-h { font-size:12px; color:var(--text-dim); letter-spacing:0; margin:0 8px 12px; }
.qt-sec-n { font-family:var(--ui); }
.qt-row { padding:14px 12px; margin-top:3px; border:0; border-radius:9px; }
.qt-row:hover { background:var(--input); }
.qt-row.sel { background:var(--nav-active); border:0; }
.qt-ref { font-family:var(--ui); font-size:12px; color:var(--text-dim); font-weight:500; }
.qt-cust { font-size:14px; font-weight:600; }
.qt-total { font-family:var(--ui); font-variant-numeric:tabular-nums; font-size:12px; }
.qt-age,.qt-counts,.qt-mac,.qt-lang { font-family:var(--ui); }
.qt-detail { gap:20px; }
.qt-detail>.panel { background:var(--surface); }
.qt-detail>.qt-review { background:var(--warn-soft); }
.qt-detail>.qt-blocked { background:var(--bad-soft); }
.qt-detail .qt-actions { gap:10px; margin-top:20px; }
.qt-actions .btn { padding:8px 12px; background:var(--input); }
.qt-actions .qt-btn-edit:not(:disabled) { color:var(--text) !important; border-color:var(--border-bright) !important; }
.qt-in { background:var(--input); border-radius:8px; }
.qt-pre { border-radius:10px; padding:16px; }
.qt-sub-h { font-family:var(--ui); text-transform:none; letter-spacing:0; font-size:12px; margin-top:18px; }
.qt-ed-btns { gap:10px; padding-top:16px; }
.qt-mobile-nav,.qt-detail .qt-actions { background:var(--surface); }
.adsx-tile { border-radius:12px; background:var(--input); padding:18px; }
.adsx-chartbox { background:var(--surface); padding:20px; border-radius:12px; }
.adsx-head { gap:16px; margin-bottom:20px; }
.adsx-seg { padding:4px; border-radius:9px; background:var(--input); }
.adsx-seg button { border-radius:6px; }
.mk-control { border-radius:12px; padding:16px; gap:12px; }
.status-grid,.settings-body { gap:20px; padding-bottom:32px; }
.status-card { padding:20px; }
.settings-body { max-width:820px; }
.set-section+.set-section { margin-top:24px; }
.set-row { gap:16px; }
.ui-modal-card,.doc-modal-card { border-radius:18px; background:var(--surface); padding:28px; }
.ui-modal-actions { gap:12px; margin-top:24px; }
.login-overlay { background:var(--canvas); overflow-y:auto; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:36px; box-shadow:0 24px 70px -36px rgba(0,0,0,.25); }
.login-badge { width:190px; max-width:80%; margin:0 auto 28px; }
.login-field { margin-bottom:18px; }
.login-submit { margin-top:12px; }
.topbar { background:var(--surface); border-bottom:1px solid var(--border); }
.topbar-brand { flex-direction:column; gap:2px; }
.topbar-logo { width:108px; background:none; padding:2px 4px; border-radius:0; color-scheme:inherit; }
.topbar-logo .brand-lockup { width:102px; height:38px; }
.topbar-name { width:100%; text-align:center; font-size:10px; line-height:1.2; color:var(--text-dim); }
.topbar .icon-btn { background:transparent; border:0; border-radius:8px; }
@media (max-width:1199px) {
  .cam-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .cam-panel { padding:20px; }
  .view { padding:28px 24px 0; }
  .qt-cols { grid-template-columns:minmax(250px,32%) minmax(0,1fr); gap:20px; }
}
@media (max-width:860px) {
  .sidebar { margin:0; top:0; bottom:0; width:260px; border-radius:0; padding-top:calc(24px + var(--safe-top)); box-shadow:8px 0 40px -20px rgba(0,0,0,.35); }
  .view { padding:24px 20px 0; }
  .view-head { margin-bottom:24px; gap:12px; }
  .view-head h1 { font-size:27px; }
  .qt-cols { display:block; }
  .qt-list,.qt-detail { overflow:visible; }
  .qt-list { padding-bottom:12px; }
  .qt-detail>.panel+.panel { margin-top:20px; }
}
@media (max-width:560px) {
  .view { padding:22px 16px 0; }
  .view-head { align-items:flex-start; margin-bottom:22px; gap:12px; }
  .view-head h1 { font-size:26px; }
  .view-head .ghost-btn { min-height:44px; font-size:0; padding:10px; gap:0; }
  .view-head .ghost-btn svg { width:18px; height:18px; }
  .view-sub { font-size:13px; }
  .panel { padding:18px; }
  .panel-grid { gap:20px; }
  .cam-panel { padding:16px; }
  .cam-section-head { margin-bottom:16px; gap:12px; }
  .cam-actions { width:100%; }
  .cam-actions button { min-height:44px; flex:1; padding:10px 8px; }
  .cam-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .cam-label { font-size:14px; min-height:46px; flex-wrap:nowrap; }
  .cam-ptz { grid-template-columns:repeat(3,36px); grid-template-rows:repeat(3,36px); }
  .cam-ptz-btn { min-height:36px; }
  .qt-list>.panel { padding:14px 4px 6px; }
  .ui-modal-card,.doc-modal-card { padding:22px; }
  .login-card { padding:28px 24px; }
  .login-overlay { padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
  .metric-value { font-size:22px; }
}
@media (prefers-reduced-motion:reduce) { .cam-tile,.nav-item { transition:none; } }
/* Shared action groups remain separate from text, even with long labels. */
.fz-review,.mk-draft { gap:20px; padding:16px 0; }
.fz-review-act,.mk-draft-act { display:flex; gap:10px; flex-wrap:wrap; }
.fz-vat { min-width:0 !important; max-width:100%; }
.mk-foot:has(>.rc-rename-input) { flex-wrap:wrap; gap:10px !important; padding-top:14px; }
.rc-rename-input,.job-answer-in { min-width:0; }
.set-account .sa-text { min-width:0; }
.set-account .sa-email { overflow-wrap:anywhere; }
.set-account .sa-role { font-family:var(--ui); color:var(--text-dim); text-transform:none; letter-spacing:0; }
.pe-row,.pk-row,.tp-row,.job-actions,.job-head,.lp-head,.lp-machine-head,.status-card-head { flex-wrap:wrap; gap:12px; }
.pk-row>span { min-width:0; overflow-wrap:anywhere; }
.lp-machine-act { white-space:normal; flex-wrap:wrap; gap:10px; }
.ui-modal-card { max-height:calc(100dvh - 48px); overflow-y:auto; }
.ios-toggle { min-height:27px; flex-shrink:0; }
.ios-toggle.on { background:var(--good); }
.ios-toggle.live.on { background:var(--warn); }
.user-row { gap:12px; padding:16px 0; flex-wrap:wrap; }
.user-row .ur-info { min-width:160px; }
.user-row .ur-meta { font-family:var(--ui); }
.ur-resetlink,.ur-reset2fa { margin-right:0; }
.adsx-t-val { font-family:var(--ui); font-weight:650; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
@media (max-width:600px) {
  .fz-review,.mk-draft { flex-direction:column; align-items:stretch; gap:14px; }
  .fz-review-act,.mk-draft-act { justify-content:flex-start; }
  .rc-rename-input { flex-basis:100% !important; }
  .user-row .ur-info { flex-basis:calc(100% - 48px); min-width:0; }
  .user-row .ur-email { white-space:normal; overflow-wrap:anywhere; }
  .user-row .role-tag { margin-left:0; }
  .job-answer { flex-wrap:wrap; gap:10px; }
  .job-answer-in { flex-basis:100%; }
  .lp-proc-name { flex-basis:100px; }
  .lp-proc-val { min-width:56px; }
  .tp-row input { min-width:0; max-width:100%; }
  .ur-reset-panel .rl-row { flex-wrap:wrap; }
  .ur-reset-panel .rl-url { flex-basis:100%; }
}
/* Approval queues use the same section rhythm as the other workspaces. */
.approvals-body { display:flex; flex-direction:column; gap:24px; padding-bottom:32px; }
.approvals-body>* { flex-shrink:0; }
#apprMiddle { display:flex; flex-direction:column; gap:24px; }
.approval-card { margin-bottom:0; padding:24px; gap:16px; }
.approval-actions { gap:10px; }
.approval-amount { margin-top:8px; font-family:var(--ui); font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 28px; margin:24px 0 8px; }
.metric-grid>.metric { padding:0 0 18px; border-bottom:1px solid var(--border); }
.metric-value>span[style*="display:block"] { font-size:12px !important; font-weight:400 !important; line-height:1.6 !important; opacity:1 !important; letter-spacing:0; color:var(--text-dim); }
.metric-grid-vat { gap:24px; margin-top:20px; }
.metric-grid-vat>.metric { border-bottom:0; padding-bottom:10px; }
.fz-column { min-width:0; max-width:100%; }
.fz-vat [data-vatsel] { font-size:12px !important; padding:6px 10px !important; min-height:32px; margin-left:4px !important; border-radius:7px !important; }
.status-card .state,.status-detail { font-family:var(--ui); letter-spacing:0; }
.lp-section-title,.lp-pill,.job-status,.jobs-group-label { font-family:var(--ui); letter-spacing:.02em; }
.mkt-ranges { display:inline-flex; flex-wrap:wrap; gap:6px; }
.mkt-range { margin-left:0 !important; padding:6px 10px !important; border-radius:8px !important; }
.mkt-leg { padding:6px 8px !important; margin:0 6px 6px 0 !important; }
@media (max-width:700px) {
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
  .metric-value { font-size:22px; }
  .approvals-body,#apprMiddle { gap:20px; }
  .approval-card { padding:18px; }
}
@media (max-width:380px) { .metric-grid { grid-template-columns:minmax(0,1fr); } }
.rc-vacuum { background:var(--input); color:var(--text-dim); border-color:var(--border); font-weight:500; }
#ingestLiveWrap>.mk-foot,#ingestDoneWrap>.mk-foot { padding-top:0; }
#ingestLiveWrap .mk-h,#ingestDoneWrap .mk-h { margin-bottom:12px; }
.qt-blocked { padding:18px 24px; }
.qt-blocked .mk-h { margin-bottom:10px; font-size:14px; }
.qt-blocked .mk-foot { padding-top:4px; }
.status-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1100px) { .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .status-grid { grid-template-columns:minmax(0,1fr); } .qt-blocked { padding:16px 18px; } }
/* Outer containers never scroll when an editor asks to reveal a field. */
html,body,.main,.view { overflow:clip; }
.view-head { flex-direction:row; }
.view-head>div:first-child { min-width:0; }
.view-head .updated { font-family:var(--ui); font-size:11px; max-width:150px; text-align:right; }
.fz-yr [data-qsel] { font-size:12px !important; padding:7px 10px !important; min-height:36px; border-radius:7px !important; }
.lp-title,.lp-section-h { font-size:14px; font-weight:600; text-transform:none; letter-spacing:0; }
.lp-sub,.lp-vstate { font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; }
@media (max-width:560px) {
  .metric-value { font-size:20px; }
  .fz-yr [data-qsel],.fz-vat [data-vatsel] { min-height:44px; }
  .cam-ptz { grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,44px); }
  .cam-ptz-btn { min-height:44px; }
}
.coming-text { opacity:1 !important; }
#ingestLiveBody>span { opacity:1 !important; }
/* Grid tracks must permit the view's own scroller to shrink below content size. */
#app { grid-template-rows:minmax(0,1fr); }
.main { min-height:0; }
@media (max-width:860px) { #app { grid-template-rows:auto minmax(0,1fr); } }
/* VAT summaries may share a row with comparisons; preserve complete amounts. */
.metric-grid-vat { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
.metric-value { overflow-wrap:normal; word-break:normal; }
/* The standalone iPhone shell extends behind system bars. Insets belong on
   fixed overlays and the topbar; views already begin below that topbar. */
.login-overlay { padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
.ui-modal { padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
.ui-modal-card { max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px); }
.doc-modal { padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
.cam-fs { padding:calc(6px + var(--safe-top)) calc(6px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(6px + var(--safe-left)); }
.frigate-ov { padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
@media (max-width:860px), (max-width:1024px) and (max-height:560px) and (pointer:coarse) {
  #app { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .topbar { display:flex; padding:calc(10px + var(--safe-top)) calc(16px + var(--safe-right)) 10px calc(16px + var(--safe-left)); }
  .topbar .icon-btn { min-width:44px; min-height:44px; flex-shrink:0; }
  .topbar-brand { min-width:0; }
  .sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:min(280px,calc(100vw - var(--safe-right) - 48px)); padding:calc(24px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); overflow-x:hidden; overscroll-behavior:contain; transform:translateX(-104%); border-radius:0; box-shadow:8px 0 40px -20px rgba(0,0,0,.35); }
  #app.nav-open .sidebar { transform:none; }
  #app.nav-open .scrim { display:block; }
  .sidebar>.brand,.sidebar>.nav,.sidebar>.sidebar-foot { min-width:0; flex-shrink:0; }
  .nav-item { min-width:0; }
  .nav-item>span:not(.nav-badge) { min-width:0; overflow-wrap:anywhere; }
  .nav-badge { flex-shrink:0; }
  .main { grid-row:2; }
  .view { padding-left:calc(20px + var(--safe-left)); padding-right:calc(20px + var(--safe-right)); }
  .panel-grid,.status-grid,.settings-body { padding-bottom:calc(32px + var(--safe-bottom)); }
  .approvals-body { padding-bottom:calc(32px + var(--safe-bottom)); }
  .changes-scroll { padding-bottom:calc(24px + var(--safe-bottom)); }
  .quotes-scroll { padding-bottom:calc(16px + var(--safe-bottom)); }
  .qt-ed-btns { padding-bottom:calc(12px + var(--safe-bottom)); }
}
@media (max-width:560px), (max-width:1024px) and (max-height:560px) and (pointer:coarse) {
  .view { padding-left:calc(16px + var(--safe-left)); padding-right:calc(16px + var(--safe-right)); }
}