/* 0.24.0 operator workspace. Lucide assets are bundled locally. */

body { font-size:14px; }
.ui-icon { display:inline-block; width:20px; height:20px; flex:0 0 20px; vertical-align:middle; pointer-events:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.button > [data-button-label] { min-width:0; }
.button:disabled { cursor:not-allowed; }
.button[aria-busy=true] { cursor:wait; }
.button.secondary { background:var(--panel); border-color:var(--line); }
.button.secondary:hover { background:var(--panel-2); border-color:var(--line); }
.panel,.metric,.camera-card { box-shadow:0 2px 8px var(--overlay); }
.sidebar { background:var(--panel-2); padding:20px 12px 14px; }
.brand { padding-bottom:18px; }
.brand small { letter-spacing:0; line-height:1.6; }
.brand-mark { border-radius:13px; box-shadow:0 5px 14px var(--overlay); }
.navigation-search { position:relative; display:block; margin:0 4px 15px; }
.navigation-search > .ui-icon { position:absolute; left:11px; top:12px; color:var(--muted); }
.navigation-search input { padding-left:37px; padding-right:34px; background:var(--panel); font-size:13px; }
.navigation-search button { position:absolute; right:3px; top:3px; width:36px; height:38px; min-height:38px; padding:4px; background:transparent; color:var(--muted); border:0; cursor:pointer; }
.navigation-empty { color:var(--muted); padding:12px; font-size:13px; }
nav a,nav summary { display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 12px; line-height:1.35; }
nav details a { display:flex; gap:8px; padding:8px 10px 8px 16px; margin-left:15px; min-height:38px; border-left:1px solid var(--line); border-radius:0 8px 8px 0; }
nav details a .ui-icon { width:16px; height:16px; flex-basis:16px; opacity:.8; }
nav summary::after { margin-left:auto; float:none; }
nav a.active { background:var(--accent-soft); color:var(--accent); font-weight:650; box-shadow:inset 3px 0 var(--overlay); }
nav details:has(a.active)>summary { color:var(--accent); }
.topbar { background:var(--panel); }
.topbar h1 { font-size:22px; letter-spacing:-.02em; }
.eyebrow { color:var(--muted); letter-spacing:.07em; }
.page-header p { max-width:760px; font-size:13px; line-height:1.55; }
.page-header { align-items:center; }
.page-header .actions { margin-top:0; }
.toolbar { padding:14px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; align-items:end; }
.toolbar > .button { align-self:end; }
.field { color:var(--muted); font-size:13px; }
.field small { color:var(--muted); }
input,select,textarea { border-color:var(--line); }
input:disabled,select:disabled { background:var(--panel-2); color:var(--muted); }
.panel h3 { color:var(--accent); }
.metric { padding:14px 16px; }
.metric strong { font-size:26px; font-variant-numeric:tabular-nums; margin-top:5px; letter-spacing:-.03em; }
.metric span .ui-icon { width:17px; height:17px; margin-right:6px; color:var(--muted); }
.grid.workspace-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.workspace-metrics .metric { border-top:3px solid var(--line); }
.workspace-metrics .metric:last-child { border-top-color:var(--line-strong); }
.operations-grid { align-items:start; }
.operation-card { align-self:start; padding:16px; overflow:hidden; }
.operation-card > header { padding-bottom:12px; border-bottom:1px solid var(--line); }
.lane-heading { display:flex; align-items:center; gap:9px; }
.lane-heading .ui-icon { background:var(--accent-soft); color:var(--accent); width:34px; height:34px; padding:7px; border-radius:9px; flex-basis:34px; }
.live-frame-button { position:relative; margin-bottom:12px; border-radius:12px; background:var(--camera-bg); }
.dashboard-live-frame { max-height:200px; object-fit:contain; }
.live-frame-hint { position:absolute; right:9px; bottom:9px; padding:4px 8px; color:var(--on-accent); background:var(--camera-bg); font-size:11px; border-radius:7px; }
.device-state { margin-bottom:12px; font-size:12px; gap:8px; }
.lane-diagnostics { border-top:1px solid var(--line); padding-top:10px; margin-top:12px; color:var(--muted); }
.lane-diagnostics summary { cursor:pointer; font-size:12px; }
.lane-diagnostics .device-state { margin:10px 0 0; }
.vehicle-summary { align-items:flex-start; padding:13px; border:1px solid var(--line); background:var(--panel-2); gap:12px; margin:12px 0; }
.vehicle-summary > .thumbnail,.vehicle-summary > .thumbnail-placeholder { flex:0 0 84px; width:84px; height:54px; }
.vehicle-title { display:flex; align-items:center; gap:8px; }
.vehicle-title .plate { font-size:19px; letter-spacing:.02em; }
.vehicle-summary .quick-list { margin-top:10px; }
.vehicle-summary .quick-list .button { min-height:36px; font-size:12px; padding:7px 9px; }
.vehicle-summary .quick-list .ui-icon { width:16px; height:16px; flex-basis:16px; }
.lane-context { font-size:12px; line-height:1.5; padding:9px 11px; border-radius:9px; background:var(--panel-2); color:var(--muted); margin:10px 0; }
.lane-context.warning { background:var(--warning-soft); color:var(--warning); }
.lane-context a { color:inherit; text-underline-offset:3px; }
.operator-plate-form { border:1px solid var(--line); padding:12px; margin:12px 0; background:var(--panel); }
.operator-plate-form input { font-family:ui-monospace,Consolas,monospace; font-size:17px; letter-spacing:.02em; }
.operator-plate-form small { line-height:1.45; }
.operator-plate-form [data-operator-message] { min-height:2.9em; }
.operator-plate-form [data-next-operator-passage] { grid-column:1/-1; justify-self:start; }
.exit-session-summary { background:var(--panel-2); padding:14px; gap:14px; border-color:var(--line); margin:12px 0; }
.exit-session-summary .amount-due { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.exit-session-summary .amount-due strong { font-size:26px; letter-spacing:-.03em; color:var(--accent); }
.exit-session-summary small { font-size:12px; margin-top:0; }
.exit-session-summary strong { font-size:16px; }
.barrier-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.barrier-actions .button { font-size:13px; padding:10px 8px; }
.payment-row { background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-top:2px; }
.payment-row > div:first-child { align-items:flex-start; }
.payment-row .plate { font-size:16px; }
.payment-row .status { margin-bottom:5px; }
.workspace-disclosure { border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-top:16px; }
.workspace-disclosure > summary { display:flex; align-items:center; gap:9px; padding:14px 16px; cursor:pointer; font-weight:650; list-style:none; }
.workspace-disclosure > summary::after { content:'⌄'; margin-left:auto; color:var(--muted); }
.workspace-disclosure[open]>summary { border-bottom:1px solid var(--line); }
.workspace-disclosure > .disclosure-body { padding:16px; }
.workspace-disclosure .occupancy-grid:first-child { margin-top:0; }
.workspace-secondary { color:var(--muted); font-size:12px; }
.workspace-secondary .button { font-size:12px; min-height:36px; }
.route-page > section + section { margin-top:16px; }
.table-wrap { border-radius:12px; }
thead th { font-size:11px; color:var(--muted); background:var(--panel-2); }
tbody td { vertical-align:top; line-height:1.5; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:focus-within { background:var(--panel-2); }
.status { font-weight:550; font-size:11px; line-height:1.45; }
.pagination { align-items:center; flex-wrap:wrap; gap:10px; }
.pagination .actions { margin-top:0; }
.form-dialog { border-radius:16px; }
.dialog-header { position:sticky; top:0; background:var(--panel); z-index:2; }
.dialog-footer { position:sticky; bottom:0; background:var(--panel); border-top:1px solid var(--line); z-index:2; }
.permission-section { background:var(--panel); }
.permission-option { padding:5px 2px; }
.notification-symbol { width:34px; height:34px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); border-radius:10px; flex-shrink:0; }
.notification-item.WARNING .notification-symbol { background:var(--warning-soft); color:var(--warning); }
.notification-item.ERROR .notification-symbol,.notification-item.CRITICAL .notification-symbol { background:var(--danger-soft); color:var(--danger); }
.notification-item { grid-template-columns:34px minmax(0,1fr) auto; gap:12px; }
.notification-item time { font-size:11px; color:var(--muted); }
@media(min-width:901px){.sidebar{scrollbar-width:thin}.grid.workspace-metrics{gap:12px}}
@media(max-width:1100px){.grid.workspace-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  .grid.workspace-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .workspace-metrics .metric { padding:11px; }
  .workspace-metrics .metric strong { font-size:24px; }
  .workspace-metrics .metric span { font-size:11px; }
  .workspace-metrics .metric span .ui-icon { display:none; }
  .operation-card { padding:12px; }
  .lane-heading .ui-icon { width:30px; height:30px; flex-basis:30px; }
  .barrier-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .barrier-actions .button:last-child { grid-column:1/-1; }
  .exit-session-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exit-session-summary .amount-due { flex-wrap:wrap; }
  .toolbar { padding:10px; }
  .workspace-disclosure > .disclosure-body { padding:12px; }
  .page-header .actions { width:100%; }
}

@media(max-width:900px){.sidebar:not(.open){box-shadow:none}}

/* Live input indicators: labels remain meaningful without colour. */
.sensor-panel { margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.sensor-panel-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.sensor-panel-heading > span { font-size:11px; color:var(--muted); }
.sensor-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sensor-indicator { padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); min-width:0; }
.sensor-input-heading { display:flex; flex-wrap:wrap; gap:4px 8px; justify-content:space-between; font-size:12px; }
.sensor-input-heading span { color:var(--muted); white-space:nowrap; }
.sensor-input-state { display:flex; align-items:center; gap:7px; margin:9px 0 6px; font-size:12px; line-height:1.4; }
.sensor-light { width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--overlay); }
.sensor-indicator[data-state=ACTIVE] { border-color:var(--line-strong); background:var(--panel-2); }
.sensor-indicator[data-state=ACTIVE] .sensor-light { background:var(--warning); box-shadow:0 0 0 3px var(--overlay); }
.sensor-indicator[data-state=IDLE] .sensor-light { background:var(--success); box-shadow:0 0 0 3px var(--overlay); }
.sensor-indicator[data-state=ERROR] .sensor-light { background:var(--danger); box-shadow:0 0 0 3px var(--overlay); }
.sensor-indicator[data-state=DISABLED] { background:var(--accent-soft); }
.operation-card .sensor-indicator small { font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.sensor-phase { font-size:12px; margin:10px 0 5px; line-height:1.5; }
.sensor-panel > small { font-size:11px; line-height:1.5; }
@media(max-width:420px){ .sensor-input-grid { grid-template-columns:1fr; } }

/* Group actions stay visible beside the plate list on desktop and mobile. */
#groupRows .actions { flex-direction:column; align-items:stretch; }
#groupRows .button { white-space:normal; }
@media(min-width:681px){ #groupRows .actions { min-width:142px; max-width:190px; } }

.payment-history-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.payment-history-filters label{display:flex;flex-direction:column;gap:5px;min-width:140px;max-width:240px}.payment-ledger td small{display:block;max-width:240px;overflow-wrap:anywhere;color:var(--muted)}.payment-ledger .table-scroll,.payment-ledger .table-wrap{overflow-x:auto}.payment-categories{margin:18px 0}.payment-ledger .metrics{margin:16px 0}
.payment-ledger{min-width:0;max-width:100%}.payment-ledger .pagination{display:flex;flex-wrap:wrap;gap:10px}.payment-ledger .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.payment-ledger .metrics strong{font-size:clamp(20px,2.2vw,30px);overflow-wrap:anywhere}@media(max-width:700px){.payment-ledger .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-history-filters label{flex:1;max-width:100%}}