:root {
    color-scheme: light;
    --ink: #172329;
    --muted: #66757d;
    --line: #dfe5e3;
    --canvas: #f4f6f3;
    --paper: #ffffff;
    --primary: #0b665d;
    --primary-strong: #084d47;
    --primary-soft: #dff3ee;
    --accent: #f4b63e;
    --accent-soft: #fff1cf;
    --danger: #c33d3d;
    --danger-soft: #fde8e8;
    --success: #19865f;
    --blue: #3274b5;
    --shadow: 0 16px 44px rgba(25, 49, 45, .08);
    --radius: 20px;
    --sidebar: 272px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 16px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; color: var(--ink); background: var(--canvas); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.skip-link { position: fixed; inset: 8px auto auto 8px; z-index: 999; padding: 10px 16px; transform: translateY(-150%); background: var(--ink); color: #fff; border-radius: 10px; }
.skip-link:focus { transform: translateY(0); }

.sidebar { position: fixed; z-index: 40; inset: 0 0 0 auto; width: var(--sidebar); display: flex; flex-direction: column; gap: 16px; padding: 24px 18px; background: #0b2425; color: #ecf8f5; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-mark { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: transparent; color: #fff; font-size: 25px; font-weight: 900; box-shadow: 0 10px 24px rgba(11, 102, 93, .18); overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand > span:last-child { display: grid; min-width: 0; }
.brand strong { font-size: 19px; }
.brand small { color: #9ab4b0; font-size: 11px; }
.compact-brand { min-height: 44px; }
.compact-brand .brand-mark { width: 42px; height: 42px; border-radius: 14px; }
.compact-brand strong { font-size: 16px; }
.compact-brand small { color: #79888d; }
.brand-dark strong { color: #fff; }
.brand-dark small { color: #9ab4b0; }
.main-nav { display: grid; gap: 4px; }
.main-nav a { min-height: 46px; padding: 0 13px; border-radius: 13px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: #bbd0cc; text-decoration: none; font-size: 14px; font-weight: 700; transition: .16s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; background: #ffffff0d; outline: none; }
.main-nav a.active { color: #fff; background: #ffffff13; box-shadow: inset -3px 0 var(--accent); }
.main-nav small { color: #718e89; font-size: 10px; }
.ui-icon { width: 19px; height: 19px; display: inline-block; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-dashboard { --icon: url('../icons/ui/dashboard.svg'); }.icon-pos { --icon: url('../icons/ui/pos.svg'); }.icon-kitchen { --icon: url('../icons/ui/kitchen.svg'); }.icon-shifts { --icon: url('../icons/ui/shifts.svg'); }.icon-products { --icon: url('../icons/ui/products.svg'); }.icon-inventory { --icon: url('../icons/ui/inventory.svg'); }.icon-compliance { --icon: url('../icons/ui/compliance.svg'); }.icon-reports { --icon: url('../icons/ui/reports.svg'); }.icon-reconcile { --icon: url('../icons/ui/reconcile.svg'); }.icon-devices { --icon: url('../icons/ui/devices.svg'); }.icon-users { --icon: url('../icons/ui/users.svg'); }.icon-settings { --icon: url('../icons/ui/settings.svg'); }.icon-profile { --icon: url('../icons/ui/profile.svg'); }.icon-home { --icon: url('../icons/ui/home.svg'); }.icon-refresh { --icon: url('../icons/ui/refresh.svg'); }.icon-fullscreen { --icon: url('../icons/ui/fullscreen.svg'); }.icon-logout { --icon: url('../icons/ui/logout.svg'); }
.main-nav .ui-icon { color: #6f908a; transition: color .16s ease; }.main-nav a:hover .ui-icon { color: #b9ddd5; }.main-nav a.active .ui-icon { color: var(--accent); }
.sidebar-footer { margin-top: auto; border-top: 1px solid #ffffff12; padding-top: 16px; display: grid; gap: 10px; }
.user-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; background: #183c3b; color: #cfe8e3; border-radius: 13px; font-weight: 900; }
.user-card > span:last-child { display: grid; min-width: 0; }
.user-card strong, .user-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card strong { font-size: 13px; }
.user-card small { color: #8ca6a1; font-size: 10px; }
.version { text-align: center; color: #63807b; font-size: 9px; }

.page-shell { min-height: 100vh; margin-right: var(--sidebar); }
[dir="ltr"] .sidebar { inset: 0 auto 0 0; }
[dir="ltr"] .page-shell { margin-right: 0; margin-left: var(--sidebar); }
[dir="ltr"] .topbar-actions { margin-right: 0; margin-left: auto; }
[dir="ltr"] th { text-align: left; }
.page-shell.guest-shell { margin: 0; }
.topbar { min-height: 88px; display: flex; align-items: center; gap: 16px; padding: 16px clamp(18px, 3vw, 38px); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 25; isolation: isolate; }
.topbar h1 { margin: 2px 0 0; font-size: clamp(20px, 2.4vw, 27px); }
.topbar-actions { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.page-content { width: min(1440px, 100%); margin: 0 auto; padding: clamp(18px, 3vw, 38px); }
.guest-shell .page-content { padding: 0; width: 100%; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.eyebrow.light { color: #a9d4cc; }
.menu-toggle { display: none !important; }
.sidebar-scrim { position: fixed; z-index: 35; inset: 0; background: #071b1dcc; backdrop-filter: blur(2px); }

.button, button.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 13px; padding: 9px 16px; text-decoration: none; cursor: pointer; font-weight: 800; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .icon-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(11, 102, 93, .23); outline-offset: 2px; }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button-primary { color: #fff; background: var(--primary); box-shadow: 0 9px 22px rgba(11, 102, 93, .17); }
.button-primary:hover { background: var(--primary-strong); }
.button-secondary { color: var(--ink); background: #fff; border-color: var(--line); }
.button-ghost { color: #aec8c3; background: transparent; border-color: #ffffff17; }
.button-light { color: var(--primary-strong); background: #fff; }
.button-accent { color: #2c2414; background: var(--accent); }
.button-warning { color: #513a09; background: var(--accent-soft); border-color: #f2cc72; }
.button-danger { color: #fff; background: var(--danger); }
.button-large { min-height: 54px; padding-inline: 22px; border-radius: 15px; }
.button-block { width: 100%; }
.button.compact { min-height: 44px; padding: 7px 13px; font-size: 13px; }
.button-row, .form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 13px; display: inline-grid; place-items: center; background: #fff; color: var(--ink); cursor: pointer; font-size: 20px; text-decoration: none; }

.network-status { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: 11px; font-weight: 800; white-space: nowrap; }
.network-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
.network-status.offline { color: var(--danger); }
.status-pill, .status-badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.status-badge.large { padding: 9px 14px; font-size: 12px; }
.status-pill.success, .status-badge.success { color: #11704f; background: #e4f6ef; }
.status-pill.warning, .status-badge.warning { color: #8a5a00; background: var(--accent-soft); }
.status-badge.danger { color: #9c2828; background: var(--danger-soft); }
.status-badge.muted { color: #637078; background: #edf0ef; }
.count-badge { min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 900; }

.flash { width: 100%; margin-bottom: 14px; min-height: 48px; padding: 10px 14px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid; font-size: 13px; font-weight: 700; }
.flash button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 20px; }
.flash-success { color: #126346; border-color: #a8dec9; background: #e9f8f2; }
.flash-error { color: #952c2c; border-color: #efbcbc; background: #fff0f0; }
.flash-info { color: #245d82; border-color: #b7d9eb; background: #edf7fc; }

.hero-band { min-height: 190px; padding: clamp(24px, 4vw, 42px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 15% 120%, #247d70 0, transparent 42%), linear-gradient(120deg, #0a514d, #0b2f33); box-shadow: var(--shadow); overflow: hidden; }
.hero-band .eyebrow { color: #acd4ce; }
.hero-band h2 { max-width: 700px; margin: 8px 0; font-size: clamp(23px, 3vw, 38px); line-height: 1.28; }
.hero-band p { margin: 0; color: #b9d1cd; font-size: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.metric-card { min-height: 138px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; justify-content: center; position: relative; box-shadow: 0 10px 26px rgba(24, 53, 48, .04); overflow: hidden; }
.metric-card.featured { color: #fff; border-color: transparent; background: linear-gradient(145deg, #0e756a, #0a554f); }
.metric-card.featured .metric-label, .metric-card.featured small { color: #bce1da; }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 800; }
.metric-card strong { margin: 8px 0 1px; font-size: clamp(24px, 2.6vw, 33px); line-height: 1.1; }
.metric-card small { color: #849096; font-size: 10px; }
.metric-icon { position: absolute; inset: 14px auto auto 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font-size: 13px; font-weight: 900; }
.metric-icon.mint { color: var(--primary); background: var(--primary-soft); }
.metric-icon.amber { color: #8b5d00; background: var(--accent-soft); }
.metric-icon.blue { color: var(--blue); background: #e5f0fa; }

.content-grid { display: grid; gap: 18px; margin-top: 18px; }
.content-grid.two-thirds { grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); }
.content-grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { padding: clamp(18px, 2.5vw, 26px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 10px 30px rgba(24, 53, 48, .045); min-width: 0; }
.panel-header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-header h3 { margin: 3px 0 0; font-size: 18px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick-grid a { min-height: 120px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; transition: .15s ease; }
.quick-grid a:hover { border-color: #9bc7c0; background: #f5fbf9; transform: translateY(-2px); }
.quick-grid a > span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: auto; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.quick-grid strong { font-size: 13px; }
.quick-grid small { color: var(--muted); font-size: 10px; }
.alert-list { display: grid; }
.alert-list a { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf0ef; text-decoration: none; }
.alert-list a:last-child { border-bottom: 0; }
.alert-list a > span:last-child { display: grid; }
.alert-list strong { font-size: 12px; }
.alert-list small { color: var(--muted); font-size: 10px; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; }
.alert-dot.stock { background: #d6901c; box-shadow: 0 0 0 5px #f8d89c55; }
.alert-dot.expiry { background: var(--danger); box-shadow: 0 0 0 5px #f3adad55; }
.mini-empty { min-height: 120px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.mini-empty > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.mini-empty p { margin: 9px 0 0; font-size: 12px; }
.trust-strip { margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: #e9efec; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-strip > div { display: grid; padding-inline-start: 14px; border-inline-start: 3px solid #bdcbc7; }
.trust-strip span { color: var(--primary); font-size: 9px; font-weight: 900; }
.trust-strip strong { font-size: 12px; }
.trust-strip small { color: var(--muted); font-size: 9px; }

.page-intro { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-intro h2 { margin: 6px 0; font-size: clamp(23px, 3vw, 34px); line-height: 1.3; }
.page-intro p { max-width: 720px; margin: 0; color: var(--muted); font-size: 13px; }
.collapsible { margin-bottom: 18px; box-shadow: 0 20px 60px rgba(20, 58, 51, .11); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid.compact-grid { max-width: 900px; }
.stack-form { display: grid; gap: 15px; }
.form-grid label, .stack-form label, .field, .date-filter label { display: grid; gap: 7px; color: #425159; font-size: 11px; font-weight: 900; }
.span-2 { grid-column: 1 / -1; }
input, select, textarea { width: 100%; min-height: 47px; padding: 10px 12px; border: 1px solid #cfd8d5; border-radius: 12px; background: #fff; color: var(--ink); }
textarea { min-height: 76px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa6aa; }
.check-field { display: flex !important; flex-direction: row; align-items: center; gap: 9px !important; min-height: 44px; }
.check-field input { width: 20px; min-height: 20px; accent-color: var(--primary); }
.setting-checks { display: grid; align-content: end; gap: 5px; }
.form-hint { color: var(--muted); font-size: 10px; line-height: 1.7; }

.table-panel { margin-top: 18px; }
.table-wrap { width: 100%; overflow-x: auto; border-radius: 14px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 12px; }
th { padding: 12px 13px; background: #f2f5f3; color: #67757c; text-align: right; font-size: 10px; }
td { padding: 14px 13px; border-bottom: 1px solid #edf0ef; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfb; }
.table-sub { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.table-search { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.table-search input { min-height: 44px; width: min(220px, 35vw); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags em { padding: 4px 7px; border-radius: 999px; background: #edf4f2; color: #52706a; font-style: normal; font-size: 9px; }
.tags em.danger { color: #9a2e2e; background: var(--danger-soft); }
.status-toggle { min-width: 70px; min-height: 44px; border: 0; border-radius: 999px; cursor: pointer; font-size: 10px; font-weight: 900; }
.status-toggle.on { color: #12694a; background: #e4f6ef; }
.status-toggle.off { color: #7d5555; background: #f3eaea; }
.text-danger { color: var(--danger) !important; font-weight: 800; }
.rank, .code-chip { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }

.inventory-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stock-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 8px 24px rgba(24, 53, 48, .04); }
.stock-card.low { border-color: #ebc98a; background: linear-gradient(180deg, #fffaf0, #fff); }
.stock-card header, .stock-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stock-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.stock-card h3 { margin: 16px 0 0; font-size: 15px; }
.stock-card > small { color: var(--muted); font-size: 9px; }
.stock-amount { margin-top: 18px; display: flex; align-items: baseline; gap: 5px; }
.stock-amount strong { font-size: 26px; }
.stock-amount span { color: var(--muted); font-size: 10px; }
.stock-bar { height: 6px; margin: 10px 0 14px; border-radius: 99px; background: #edf0ef; overflow: hidden; direction: ltr; }
.stock-bar i { display: block; height: 100%; width: var(--stock-level); max-width: 100%; border-radius: inherit; background: var(--primary); }
.stock-card.low .stock-bar i { background: #d29020; }
.stock-card footer { color: var(--muted); font-size: 8px; }

.shift-action-card { padding: clamp(24px, 4vw, 38px); }
.shift-action-card h3 { margin: 16px 0 5px; font-size: 23px; }
.shift-action-card > p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.shift-illustration { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 21px; color: var(--primary); background: var(--primary-soft); font-size: 28px; font-weight: 900; }
.shift-illustration.active { width: auto; padding: 0 16px; }
.rules-card { background: #132d2e; color: #fff; border: 0; }
.rules-card .eyebrow { color: #9ac8c0; }
.rule-list { padding: 0; margin: 0; list-style: none; display: grid; }
.rule-list li { min-height: 67px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 13px; border-bottom: 1px solid #ffffff12; }
.rule-list li:last-child { border: 0; }
.rule-list li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #ffffff10; color: var(--accent); font-weight: 900; }
.rule-list div { display: grid; }
.rule-list strong { font-size: 13px; }
.rule-list small { color: #8facaa; font-size: 10px; }

.compliance-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: 18px; }
.document-list, .safety-timeline { display: grid; }
.document-row { min-height: 66px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #edf0ef; }
.document-row:last-child { border: 0; }
.document-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.document-icon.soon { color: #8a5a00; background: var(--accent-soft); }
.document-icon.expired { color: var(--danger); background: var(--danger-soft); }
.document-row > div { display: grid; }
.document-row strong { font-size: 12px; }
.document-row small { color: var(--muted); font-size: 9px; }
.days-left { font-size: 10px; font-weight: 900; }
.safety-entry { min-height: 72px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf0ef; }
.safety-entry:last-child { border: 0; }
.safety-entry > div { display: grid; }
.safety-entry strong { font-size: 11px; }
.safety-entry small { color: var(--muted); font-size: 9px; }
.safety-entry p { margin: 3px 0 0; color: #6d5353; font-size: 9px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.ok, .status-dot.resolved { background: var(--success); box-shadow: 0 0 0 5px #40b98922; }
.status-dot.warning { background: #d48b15; box-shadow: 0 0 0 5px #e5ac5122; }
.status-dot.critical { background: var(--danger); box-shadow: 0 0 0 5px #db6d6d22; }

.date-filter { display: flex; align-items: flex-end; gap: 8px; }
.date-filter input { min-height: 44px; }
.report-metrics { margin: 0 0 18px; }
.reports-grid { margin-top: 0; }
.hour-chart { height: 230px; display: flex; align-items: stretch; gap: clamp(4px, 1vw, 12px); padding-top: 12px; overflow-x: auto; direction: ltr; }
.hour-bar { flex: 1 0 26px; min-width: 26px; display: grid; grid-template-rows: 1fr 22px; text-align: center; }
.hour-bar > span { height: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); }
.hour-bar i { width: min(24px, 72%); height: var(--bar-height); min-height: 6px; display: block; border-radius: 7px 7px 2px 2px; background: linear-gradient(#20a294, var(--primary)); }
.hour-bar small { padding-top: 5px; color: var(--muted); font-size: 8px; }
.payment-breakdown { display: grid; }
.payment-breakdown > div:not(.mini-empty) { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #edf0ef; font-size: 11px; }
.payment-breakdown span { display: flex; align-items: center; gap: 8px; }
.payment-dot { width: 9px; height: 9px; border-radius: 50%; background: #899; }
.payment-dot.cash { background: var(--success); }.payment-dot.mada { background: var(--blue); }.payment-dot.apple_pay { background: var(--ink); }.payment-dot.card { background: #8756a7; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 18px; }
.brand-picker { grid-column: 1 / -1; min-width: 0; margin: 22px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; }.brand-picker legend { padding-inline: 8px; color: var(--ink); font-size: 13px; font-weight: 900; }.brand-picker > p { margin: 0 0 13px; color: var(--muted); font-size: 10px; }.brand-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.brand-option { cursor: pointer; }.brand-option > input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }.brand-preview { min-height: 96px; padding: 12px; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 15px; background: #f8faf9; transition: .16s ease; }.brand-preview img { width: 62px; height: 62px; border-radius: 18px; }.brand-preview > span { display: grid; }.brand-preview strong { color: var(--ink); font-size: 12px; }.brand-preview small { color: var(--muted); font-size: 9px; }.brand-preview em { grid-column: 1 / -1; display: none; color: var(--primary); font-size: 9px; font-style: normal; font-weight: 900; }.brand-option > input:checked + .brand-preview { border-color: #55aa9d; background: #edf8f5; box-shadow: 0 0 0 3px #0b665d17; }.brand-option > input:checked + .brand-preview em { display: block; }.brand-option > input:focus-visible + .brand-preview { outline: 3px solid rgba(11, 102, 93, .23); outline-offset: 2px; }
.settings-save { grid-column: 1 / -1; min-height: 88px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 18px; color: #fff; background: #132d2e; }
.settings-save > div { display: grid; }
.settings-save strong { font-size: 13px; }
.settings-save small { color: #9cb6b2; font-size: 10px; }
.account-details { margin: 0; display: grid; }.account-details > div { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0ef; }.account-details > div:last-child { border: 0; }.account-details dt { color: var(--muted); font-size: 10px; }.account-details dd { margin: 0; font-size: 12px; font-weight: 800; }

.empty-state { min-height: 60vh; display: grid; place-items: center; align-content: center; text-align: center; padding: 30px; }
.empty-state h2 { margin: 8px 0; font-size: 28px; }
.empty-state p { max-width: 560px; color: var(--muted); }
.empty-code { font-size: 70px; line-height: 1; font-weight: 900; color: #cdd8d5; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .9fr) minmax(460px, 1.1fr); background: #f4f6f3; }
.login-story { position: relative; min-height: 100vh; padding: clamp(40px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; color: #fff; background: radial-gradient(circle at 20% 20%, #16796d 0, transparent 34%), radial-gradient(circle at 80% 90%, #8a6a20 0, transparent 32%), #0b292b; overflow: hidden; }
.login-story::before { content: ""; position: absolute; inset: 8% -15% auto auto; width: 330px; height: 330px; border: 1px solid #ffffff12; border-radius: 50%; box-shadow: 0 0 0 70px #ffffff05, 0 0 0 140px #ffffff03; }
.story-mark { width: 74px; height: 74px; margin-bottom: 34px; display: grid; place-items: center; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px #0004; }
.story-mark img { width: 100%; height: 100%; }

.button-ghost-outline { color: var(--muted); background: #fff; border-color: var(--line); }
.integration-notice { margin: 0 0 18px; padding: 16px 18px; border: 1px solid #e8c77a; border-radius: 17px; color: #6f4d0e; background: #fff8e8; }
.integration-notice strong { display: block; margin-bottom: 4px; font-size: 13px; }
.integration-notice p { margin: 0; font-size: 11px; line-height: 1.8; }
.integration-metrics, .reconciliation-metrics { margin-bottom: 18px; }
.integration-form-panel { margin-bottom: 18px; }
.add-device-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--primary); font-size: 13px; }
.add-device-panel > summary span, .form-note { color: var(--muted); font-size: 10px; font-weight: 600; }
.add-device-panel[open] > summary { margin-bottom: 14px; }
.vendor-fields { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.vendor-fields[hidden] { display: none !important; }
.vendor-fields legend { padding: 0 7px; color: var(--primary); font-size: 10px; font-weight: 900; }
.device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.device-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.device-card h3 { margin: 4px 0 0; }
.device-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.device-details > div { min-width: 0; padding: 10px; border-radius: 12px; background: #f6f8f7; }
.device-details dt { color: var(--muted); font-size: 9px; }
.device-details dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 800; }
.device-diagnostic { margin: 13px 0; padding: 10px 12px; border-radius: 12px; font-size: 10px; line-height: 1.7; }
.device-diagnostic.ok { color: #116448; background: #e8f7f1; }
.device-diagnostic.warning { color: #76520e; background: #fff5dd; }
.device-connection-editor { margin: 13px 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfb; }
.device-connection-editor summary { cursor: pointer; color: var(--primary); font-size: 11px; font-weight: 900; }
.device-connection-editor[open] summary { margin-bottom: 14px; }
.device-connection-editor .form-grid { gap: 10px; }
.device-connection-editor input, .device-connection-editor select { min-height: 41px; }
.drawer-request { margin-top: 14px; padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; border-top: 1px solid var(--line); }
.drawer-request label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.reconciliation-strip { margin: 0 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--line); }
.reconciliation-strip > div { min-height: 86px; padding: 15px; display: grid; place-content: center; gap: 5px; background: #fff; text-align: center; }
.reconciliation-strip span { color: var(--muted); font-size: 10px; font-weight: 800; }
.reconciliation-strip strong { color: var(--primary); font-size: 18px; }
.hardware-action-status { margin: 10px 0 0; padding: 9px 11px; border-radius: 11px; color: #72520f !important; background: #fff4d9; }
.payment-link-warning { padding: 9px 11px; border: 1px solid #ecd18f; border-radius: 11px; color: #72520f; background: #fff8e9; }
.test-result-panel { width: min(720px, calc(100% - 24px)); margin: 18px auto; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.test-result-panel h3 { margin: 0 0 4px; }
.test-result-panel p { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.test-result-panel form:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.test-result-panel input[name="message"] { min-width: 260px; }

/* VORISTA 0.3 — direct ordering and delivery operations */
.storefront-admin-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 18px; }
.storefront-admin-grid > .settings-save { grid-column: 1 / -1; }
.store-hours-list { display: grid; gap: 8px; }
.store-hours-list > div { min-height: 64px; padding: 9px 0; display: grid; grid-template-columns: 90px 1fr 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid #edf0ef; }
.store-hours-list > div:last-child { border: 0; }
.store-hours-list label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 900; }
.store-hours-list input { min-height: 40px; }
.inline-admin-form { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #f8faf9; }
.direct-order-board, .dispatch-board, .driver-jobs { display: grid; gap: 14px; }
.direct-order-card, .dispatch-card, .driver-job { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: 0 8px 28px rgba(24,53,48,.05); }
.direct-order-card.status-placed { border-inline-start: 5px solid var(--accent); }
.direct-order-card.status-accepted { border-inline-start: 5px solid var(--success); }
.direct-order-card > header, .dispatch-card > header, .driver-job > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.direct-order-card > header > div, .dispatch-card > header > div, .driver-job > header > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.direct-order-card > header small, .dispatch-card > header small, .driver-job > header small { grid-column: 2; color: var(--muted); font-size: 9px; }
.wait-chip { min-width: 38px; min-height: 38px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.direct-customer { margin: 15px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.direct-customer > div { min-width: 0; padding: 11px; display: grid; border-radius: 13px; background: #f5f8f7; }
.direct-customer span, .direct-customer small { color: var(--muted); font-size: 8px; }
.direct-customer strong, .direct-customer a { overflow-wrap: anywhere; font-size: 11px; font-weight: 800; }
.direct-items { margin: 0; padding: 0; display: grid; list-style: none; }
.direct-items li { min-height: 42px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #edf0ef; font-size: 11px; }
.direct-items li b { color: var(--primary); }
.direct-items li span { display: grid; }
.direct-items li small { color: var(--muted); font-size: 8px; }
.order-note-box { padding: 10px; border-radius: 11px; color: #74510e; background: #fff6df; font-size: 9px; }
.direct-order-card > footer { margin-top: 14px; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); font-size: 9px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 7px; }
.card-actions form { margin: 0; }
.reject-form, .collect-form { display: flex; align-items: flex-end; gap: 6px; }
.reject-form input, .collect-form input { min-height: 42px; width: 150px; }
.collect-form label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 900; }
.button-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.empty-board { min-height: 210px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-board > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: var(--success); background: #e5f7f0; font-size: 22px; font-weight: 900; }
.empty-board h3 { margin: 10px 0 2px; }
.empty-board p { margin: 0; color: var(--muted); font-size: 10px; }
.dispatch-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 18px; align-items: start; }
.dispatch-card.status-unassigned { border-inline-start: 5px solid var(--accent); }
.dispatch-card.status-failed { border-inline-start: 5px solid var(--danger); }
.dispatch-address { margin: 14px 0; padding: 12px; display: grid; border-radius: 14px; background: #f5f8f7; }
.dispatch-address a { margin-top: 2px; color: var(--primary); font-size: 10px; font-weight: 800; }
.dispatch-address p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }
.dispatch-times { display: flex; flex-wrap: wrap; gap: 8px; }
.dispatch-times span { padding: 6px 9px; border-radius: 9px; color: var(--muted); background: #f2f5f4; font-size: 8px; }
.dispatch-card > footer { margin-top: 13px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-top: 1px solid var(--line); font-size: 9px; }
.dispatch-card > footer form { display: flex; gap: 6px; }
.dispatch-card > footer select { min-height: 42px; min-width: 150px; }
.driver-roster { position: sticky; top: 96px; }
.driver-roster > article { padding: 13px 0; border-bottom: 1px solid #edf0ef; }
.driver-roster > article:last-of-type { border: 0; }
.driver-roster article header, .driver-roster article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.driver-roster article header > div { display: grid; }
.driver-roster article small, .driver-roster article > div span { color: var(--muted); font-size: 8px; }
.driver-roster article > div { margin: 9px 0; }
.driver-roster form { display: grid; gap: 6px; }
.driver-roster .driver-policy-form { margin: 10px 0; grid-template-columns: 1fr 1fr; }
.driver-roster .driver-policy-form button { grid-column: 1 / -1; }
.driver-roster label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 900; }
.driver-roster input { min-height: 41px; }
.driver-page { max-width: 920px; margin: 0 auto; }
.driver-hero { margin-bottom: 16px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 24px; color: #fff; background: #102e2f; }
.driver-hero h2 { margin: 5px 0; }
.driver-hero p { margin: 0; color: #aac0bc; font-size: 10px; }
.driver-status-actions { display: flex; align-items: center; gap: 8px; }
.driver-job.status-assigned { border-inline-start: 5px solid var(--accent); }
.driver-job.status-arrived { border-inline-start: 5px solid var(--success); }
.driver-customer { margin: 14px 0; padding: 14px; border-radius: 16px; background: #f5f8f7; }
.driver-customer h3 { margin: 0; }
.driver-customer p { margin: 4px 0 10px; color: var(--muted); font-size: 10px; }
.driver-customer > div { display: flex; gap: 7px; }
.driver-job-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.delivery-complete, .delivery-fail { min-width: 220px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.delivery-complete summary, .delivery-fail summary { cursor: pointer; font-size: 10px; font-weight: 900; }
.delivery-complete form, .delivery-fail form { margin-top: 9px; display: grid; gap: 7px; }
.delivery-complete label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 900; }
.delivery-complete input, .delivery-fail textarea { min-height: 42px; }
.driver-toast { position: fixed; z-index: 100; inset: auto 20px 20px; padding: 12px 16px; border-radius: 13px; color: #fff; background: var(--success); box-shadow: 0 14px 35px #0003; font-size: 11px; font-weight: 800; }
.driver-toast.error { background: var(--danger); }
.issue-queue { display: grid; gap: 10px; }
.issue-queue article { padding: 14px; border: 1px solid #ecc6c6; border-radius: 15px; background: #fffafa; }
.issue-queue header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.issue-queue header > div { display: grid; }
.issue-queue small { color: var(--muted); font-size: 8px; }
.issue-queue p { margin: 10px 0; color: #5c4848; font-size: 10px; }
.issue-queue form { display: flex; gap: 7px; }
.issue-queue form input { min-height: 42px; }
.translation-editor { min-width: 180px; }
.translation-editor summary { cursor: pointer; color: var(--primary); font-size: 10px; font-weight: 800; }
.translation-editor form { margin-top: 7px; display: grid; gap: 5px; }
.translation-editor input, .translation-editor textarea { min-height: 38px; font-size: 10px; }
.translation-section { margin-bottom: 14px; }
.translation-list { display: grid; }
.translation-list form { min-height: 62px; display: grid; grid-template-columns: minmax(180px,.7fr) minmax(220px,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #edf0ef; }
.translation-list form:last-child { border: 0; }
.translation-list form > div { display: grid; }
.translation-list small { color: var(--muted); font-size: 8px; }
.translation-list input { min-height: 42px; }
.login-story h1 { max-width: 620px; margin: 11px 0 18px; font-size: clamp(38px, 5vw, 66px); line-height: 1.24; letter-spacing: -.04em; }
.login-story > p { max-width: 560px; margin: 0; color: #b0cbc6; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.9; }
.story-stats { margin-top: 54px; display: flex; flex-wrap: wrap; gap: 22px; }
.story-stats span { display: grid; color: #a8c2bd; font-size: 10px; }
.story-stats strong { color: var(--accent); font-size: 17px; }
.login-panel { min-height: 100vh; padding: 40px 24px; display: grid; place-items: center; align-content: center; position: relative; }
.login-card { width: min(430px, 100%); padding: clamp(24px, 5vw, 44px); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(24, 53, 48, .10); }
.login-language { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 12px; }
.login-language a { padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 800; text-decoration: none; }
.login-language a.active { background: var(--primary-soft); color: var(--primary); }
.login-card h2 { margin: 7px 0 6px; font-size: 31px; }
.login-card > p { margin: 0 0 24px; color: var(--muted); font-size: 12px; }
.login-note { display: block; margin-top: 18px; color: #839096; text-align: center; font-size: 9px; }
.mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 24px; }
.legal-line { position: absolute; inset: auto 24px 16px; color: #95a09f; text-align: center; font-size: 9px; }

@media (max-width: 1180px) {
    .metric-grid, .inventory-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-save { grid-column: auto; }
}

@media (max-width: 980px) {
    .sidebar { transform: translateX(105%); transition: transform .2s ease; box-shadow: -30px 0 70px #0004; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .page-shell { margin-right: 0; }
    [dir="ltr"] .page-shell { margin-left: 0; }
    .menu-toggle { display: inline-grid !important; }
    .content-grid.two-thirds, .content-grid.halves, .compliance-grid { grid-template-columns: 1fr; }
    .login-page { grid-template-columns: 1fr; }
    .login-story { display: none; }
    .mobile-brand { display: flex; }
    .storefront-admin-grid, .dispatch-layout { grid-template-columns: 1fr; }
    .storefront-admin-grid > .settings-save { grid-column: auto; }
    .driver-roster { position: static; }
}

@media (max-width: 700px) {
    :root { --radius: 17px; }
    .topbar { min-height: 74px; padding: 12px 14px; }
    .topbar .eyebrow, .topbar-actions .button, .topbar-actions .network-status { display: none; }
    .page-content { padding: 16px 12px 28px; }
    .hero-band { min-height: 220px; align-items: flex-start; flex-direction: column; padding: 24px 20px; }
    .hero-actions { margin-top: auto; width: 100%; }
    .hero-actions .button { flex: 1; }
    .metric-grid, .inventory-cards { gap: 10px; }
    .metric-card { min-height: 125px; padding: 16px; }
    .metric-card strong { font-size: 24px; }
    .trust-strip { grid-template-columns: 1fr; gap: 10px; }
    .page-intro { align-items: stretch; flex-direction: column; }
    .page-intro > .button, .page-intro .button-row .button { flex: 1; }
    .form-grid { grid-template-columns: 1fr; }
    .store-hours-list > div { grid-template-columns: 1fr 1fr; }
    .store-hours-list > div > strong { grid-column: 1 / -1; }
    .direct-customer { grid-template-columns: 1fr; }
    .direct-order-card > footer, .dispatch-card > footer, .driver-hero { align-items: stretch; flex-direction: column; }
    .card-actions, .reject-form, .collect-form, .dispatch-card > footer form { width: 100%; align-items: stretch; flex-direction: column; }
    .reject-form input, .collect-form input, .dispatch-card > footer select { width: 100%; }
    .driver-status-actions { justify-content: space-between; }
    .translation-list form { padding: 10px 0; grid-template-columns: 1fr; }
    .device-grid { grid-template-columns: 1fr; }
    .reconciliation-strip { grid-template-columns: 1fr 1fr; }
    .drawer-request { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .panel { padding: 17px 14px; }
    .table-panel { padding-inline: 10px; }
    .date-filter { width: 100%; }
    .date-filter label { flex: 1; }
    .settings-save { align-items: stretch; flex-direction: column; }
    .brand-options { grid-template-columns: 1fr; }
    .login-panel { padding: 20px 12px; }
    .login-card { border-radius: 22px; }
    .document-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .safety-entry { grid-template-columns: 8px minmax(0, 1fr); padding: 10px 0; }
    .safety-entry > .status-badge { grid-column: 2; }
}

@media (max-width: 430px) {
    .metric-grid, .inventory-cards { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: 1fr 1fr; }
    .quick-grid a { min-height: 110px; padding: 13px; }
    .topbar h1 { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .reconciliation-strip { grid-template-columns: 1fr; }
    .device-details { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}