:root {
  color-scheme: dark;
  --bg: #071426;
  --panel: #0d2138;
  --panel-soft: #102944;
  --line: #23415e;
  --text: #f3f7fc;
  --muted: #a7b9ce;
  --primary: #28a7ff;
  --positive: #42d28c;
  --danger: #ff7373;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fc;
  --panel: #ffffff;
  --panel-soft: #edf4fb;
  --line: #cdddea;
  --text: #102033;
  --muted: #5e7186;
  --primary: #087dcc;
  --positive: #168451;
  --danger: #be3c4a;
}
:root[data-theme="light"] .login-card { background: linear-gradient(145deg, #fff, #edf4fb); box-shadow: 0 24px 80px #19385824; }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .organization-choice,
:root[data-theme="light"] .role-preset,
:root[data-theme="light"] .two-factor-settings,
:root[data-theme="light"] .notification-item,
:root[data-theme="light"] .report-output { background: #fff; }
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] th { background: #edf4fb; }
:root[data-theme="light"] .nav button:hover,
:root[data-theme="light"] .nav button.active,
:root[data-theme="light"] .notification-item.unread { background: #dceeff; }
:root[data-theme="light"] .modal { background: #fff; box-shadow: 0 26px 90px #1938583d; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 440px); padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, #102a46, #0a192c); box-shadow: 0 24px 80px #0007; }
.brand { display: flex; gap: 12px; align-items: center; font-weight: 800; font-size: 22px; }
.brand img { width: 42px; height: 42px; border-radius: 12px; }
.eyebrow { color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 28px 0 8px; }
h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.muted { color: var(--muted); line-height: 1.5; }
.field { display: grid; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 14px; }
input, select, textarea { min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #08182b; color: var(--text); padding: 0 14px; outline: none; }
textarea { padding-block: 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px #28a7ff22; }
.button { min-height: 48px; border: 0; border-radius: 12px; padding: 0 16px; background: var(--primary); color: #061322; font-weight: 800; }
.button.secondary { background: transparent; border: 1px solid var(--line); color: var(--text); }
.button.compact { min-height: 36px; padding: 0 12px; font-size: 13px; }
.error { margin-top: 16px; color: var(--danger); min-height: 20px; }
.link-button { margin-top:14px; border:0; background:transparent; color:var(--primary); font-weight:700; width:100%; }
.organization-choice-list { display:grid; gap:10px; margin-top:20px; }
.organization-choice { width:100%; display:grid; gap:4px; text-align:left; padding:15px; border:1px solid var(--line); border-radius:14px; background:#08182b; color:var(--text); }
.organization-choice:hover:not(:disabled), .organization-choice:focus-visible { border-color:var(--primary); box-shadow:0 0 0 3px #28a7ff22; outline:0; }
.organization-choice:disabled { cursor:wait; opacity:.72; }
.organization-choice span, .organization-choice small { color:var(--muted); }
.organization-choice strong { font-size:16px; }
.recovery-codes { display:grid; gap:8px; margin-top:18px; padding:14px; border:1px solid #806d32; border-radius:12px; background:#382f17; color:#f7e7a0; font-size:13px; }
.recovery-codes code { white-space:pre-wrap; color:var(--text); }
.shell { display: grid; grid-template-columns: minmax(190px, 204px) minmax(0, 1fr); min-height: 100vh; }
.sidebar { display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line); background:#091a2d; padding:12px 8px 10px; position:sticky; top:0; height:100vh; overflow:hidden; }
.sidebar .brand { padding:3px 8px 13px; font-size:18px; gap:10px; }
.sidebar .brand img { width:34px; height:34px; border-radius:10px; }
.nav { display:grid; gap:2px; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 3px 6px 0; scrollbar-width:thin; scrollbar-color:#47637d transparent; }
.nav::-webkit-scrollbar { width:6px; }
.nav::-webkit-scrollbar-thumb { border-radius:8px; background:#47637d; }
.nav button { text-align:left; border:0; border-radius:8px; min-height:34px; padding:7px 9px; color:var(--muted); background:transparent; font-size:13px; font-weight:650; line-height:1.2; }
.nav button:hover, .nav button.active { color: var(--text); background: #153b60; }
.sidebar-foot { flex:0 0 auto; margin:6px 3px 0 0; padding:8px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.3; }
.content { padding: 28px; max-width: 1500px; width: 100%; margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-bottom: 28px; flex-wrap:wrap; }
.topbar h1 { font-size: 28px; }
.topbar-tools { display:flex; gap:12px; align-items:center; justify-content:flex-end; flex:1 1 620px; flex-wrap:wrap; }
.global-search { position:relative; flex:1 1 270px; max-width:390px; min-width:220px; }
.global-search input { width:100%; min-height:40px; padding-inline:13px; }
.global-search-results { position:absolute; z-index:30; top:calc(100% + 7px); left:0; right:0; max-height:min(520px, calc(100vh - 130px)); overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 20px 48px #0005; padding:7px; }
.global-search-heading, .global-search-empty { color:var(--muted); font-size:12px; padding:9px 10px; }
.global-search-row { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:2px 9px; width:100%; padding:10px; border:0; border-radius:10px; background:transparent; color:var(--text); text-align:left; }
.global-search-row:hover, .global-search-row:focus-visible { background:var(--panel-soft); outline:0; }
.global-search-row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-search-row small { grid-column:2; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-search-type { align-self:start; color:var(--primary); font-size:11px; font-weight:800; padding-top:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
.profile { display: flex; gap: 10px; align-items: center; color: var(--muted); flex-wrap:wrap; justify-content:flex-end; }
.branch-switch { display:grid; gap:3px; font-size:11px; color:var(--muted); }
.branch-switch select { min-height:36px; max-width:180px; padding:0 9px; font-size:13px; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #1e527e; color: white; font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 18px; }
.metric-label { color: var(--muted); font-size: 13px; }
.metric { margin-top: 8px; font-weight: 800; font-size: 28px; }
.delivery-metrics { margin: 18px 0; }
.delivery-problem { border-color: #d95d5d; }
.delivery-action { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 78%, var(--accent) 22%); }
.delivery-action h3 { margin: 0 0 6px; }
.delivery-success { padding: 12px 14px; border: 1px solid #2f9e72; border-radius: 12px; color: #2f9e72; background: color-mix(in srgb, var(--panel) 80%, #2f9e72 20%); }
.dashboard-widget-options { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:18px 0; }
.check-option { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--text); cursor:pointer; }
.check-option input { inline-size:18px; block-size:18px; accent-color:var(--accent); }
.panel { margin-top: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panel h2 { margin: 0; font-size: 20px; }
.route-date { margin-top: 0; min-width: 170px; }
.route-metrics { margin-top: 18px; }
.route-actions { display:flex; gap:8px; flex-wrap:wrap; }
.route-map-panel { overflow:hidden; }
.route-map-select { max-width:420px; margin:0 0 14px; }
.route-map-frame { display:block; width:100%; min-height:380px; border:1px solid var(--line); border-radius:14px; background:#08182b; }
.access-status { font-size:22px; }
.role-preset-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.role-preset { display:grid; gap:6px; border:1px solid var(--line); border-radius:12px; padding:14px; background:#08182b; }
.role-preset span, .role-preset small { color:var(--muted); }
.two-factor-settings { display:grid; gap:6px; margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#08182b; }
.two-factor-settings p { margin:0; }
.two-factor-disable { display:grid; gap:10px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.next-actions { margin:0; padding-left:20px; color:var(--muted); display:grid; gap:8px; }
.recipe-items-head { margin-top:20px; margin-bottom:10px; }
.recipe-items-head h3 { margin:0; }
.recipe-items { display:grid; gap:8px; }
.recipe-item { display:grid; grid-template-columns:minmax(0,1fr) 130px auto; gap:8px; }
.movement-items { display:grid; gap:8px; margin-top:10px; }
.movement-item { display:grid; grid-template-columns:minmax(0,2fr) minmax(100px,0.7fr) minmax(110px,0.8fr) auto; gap:8px; align-items:end; }
.receipt-items-head { margin-top:20px; margin-bottom:10px; }
.receipt-items-head h3 { margin:0; }
.sales-fast-buttons { display:grid; gap:10px; margin:20px 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:#08182b; }
.sales-fast-buttons h3 { margin:0; font-size:15px; }
.sales-fast-buttons p { margin:3px 0 0; font-size:13px; }
.sales-fast-button-list { display:flex; flex-wrap:wrap; gap:8px; }
.sales-fast-button-list .button { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:260px; text-align:left; }
.sales-fast-button-list .button strong { white-space:nowrap; color:var(--accent); }
.receipt-total { margin:14px 0 0; text-align:right; font-size:16px; }
.qr-payload { display:block; overflow-wrap:anywhere; margin-top:16px; padding:12px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); white-space:pre-wrap; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.table-search { display: grid; gap: 7px; margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { padding: 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-weight: 650; background: #0b1d32; }
tr:last-child td { border-bottom: 0; }
.empty { padding: 48px 20px; color: var(--muted); text-align: center; }
.loading { padding: 80px; color: var(--muted); text-align: center; }
.status { color: var(--positive); font-weight: 700; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: #020914aa; }
.modal { width: min(100%, 620px); max-height: min(760px, calc(100vh - 36px)); overflow: auto; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #0b2037; box-shadow: 0 26px 90px #0009; }
.modal h2 { margin: 0 0 6px; }
.modal-divider { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.report-output { max-height: 360px; overflow: auto; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #08182b; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.notifications-list { display:grid; gap:8px; max-height:520px; overflow:auto; }
.notification-item { width:100%; display:grid; gap:4px; text-align:left; border:1px solid var(--line); border-radius:12px; padding:13px; background:#08182b; color:var(--text); }
.notification-item span { color:var(--muted); font-size:12px; }
.notification-item.unread { border-color:#2b86c8; background:#102b47; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field fieldset, fieldset.field { min-inline-size: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
fieldset.field legend { padding: 0 6px; color: var(--muted); }
.check-list { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.check-list label { display: inline-flex; gap: 8px; align-items: center; color: var(--text); }
.check-list input { min-height: auto; width: 18px; height: 18px; padding: 0; }
.permission-check-list { max-height: 260px; overflow: auto; align-content: start; padding-right: 6px; }
.permission-check-list label { min-width: min(100%, 260px); font-size: 13px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.filters-disclosure { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; background: #08182b; }
.filters-disclosure summary { display:flex; align-items:center; min-height:50px; cursor:pointer; font-weight:700; list-style:none; }
.filters-disclosure .filters-summary { margin-left:10px; overflow:hidden; color:var(--muted); font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.filters-disclosure summary::after { content:'⌄'; margin-left:auto; color:var(--muted); transition:transform .16s ease; }
.filters-disclosure[open] summary::after { transform:rotate(180deg); }
.filters-disclosure summary::-webkit-details-marker { display:none; }
.filters-disclosure .form-grid { margin:0 0 14px; }
.mobile-top { display: none; }
/* Do not confuse a desktop browser with a phone merely because the user
   increased Chrome zoom. On a desktop the compact sidebar remains the stable
   navigation surface; the mobile layout is reserved for touch-sized screens. */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .content { padding: 18px; }
  .topbar-tools { width:100%; flex-basis:100%; }
  .global-search { max-width:none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .dashboard-widget-options { grid-template-columns:1fr; }
  .profile span { display: none; }
  .branch-switch { width:100%; }
  .branch-switch select { max-width:none; width:100%; }
  .recipe-item { grid-template-columns:1fr; }
  .movement-item { grid-template-columns:1fr; }
  .route-map-frame { min-height:300px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
}
@media (max-width: 640px) {
  /* Only data-entry forms become sheets. Confirmation, audit and error dialogs
     deliberately stay centered so a destructive action never feels like a
     casual continuation of the list. */
  .modal-backdrop:has(form.modal:not(.audited-action-form):not(#route-skip-form)) { display:flex; align-items:flex-end; padding:56px 0 0; overflow:hidden; }
  .modal-backdrop:has(form.modal:not(.audited-action-form):not(#route-skip-form)) .modal { width:100%; max-height:calc(var(--workspace-sheet-viewport-height, 100dvh) - 12px); margin:0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; overscroll-behavior:contain; scroll-padding-bottom:104px; }
  .modal-backdrop:has(form.modal:not(.audited-action-form):not(#route-skip-form)) .modal .form-actions { position:sticky; bottom:calc(-20px - env(safe-area-inset-bottom)); margin-inline:-18px; margin-bottom:0; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); background:#0b2037; border-top:1px solid var(--line); }
  .modal-backdrop:has(form.modal:not(.audited-action-form):not(#route-skip-form)) .modal .form-actions .button { flex:1 1 auto; }
}
:root[data-theme="light"] .modal-backdrop:has(form.modal:not(.audited-action-form):not(#route-skip-form)) .modal .form-actions { background: #fff; }
:root[data-theme="light"] .filters-disclosure { background:#f7fbff; }