:root { --ink: #17241f; --muted: #66736e; --canvas: #faf8f3; --surface: #fff; --line: #dfe3de; --primary: #173f4b; --accent: #c4512d; --oat: #f6f1e8; --mist: #c8d8d5; --blue: #3f6878; --blue-soft: #d8e3e6; --forest: var(--primary); --lime: var(--blue-soft); --orange: var(--accent); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "DM Sans", system-ui, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
.portal-shell { display: grid; min-height: 100vh; grid-template-columns: 224px 1fr; }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 1.5rem 1rem; color: #eff6f1; background: radial-gradient(circle at 25% 12%, rgb(200 216 213 / 13%), transparent 16rem), linear-gradient(165deg, #123843, var(--primary) 58%, #315d6c); }
.portal-brand { display: flex; align-items: center; gap: .75rem; margin: 0 .65rem 2.25rem; color: white; font-family: Manrope, sans-serif; font-size: 1.3rem; font-weight: 800; text-decoration: none; }
.brand-mark { position: relative; display: block; width: 1.8rem; height: 1.8rem; border-radius: 38% 62% 56% 44%; background: var(--accent); transform: rotate(18deg); }.brand-mark::after { content: ""; position: absolute; inset: 29%; border-radius: 50%; background: var(--oat); }.brand-mark i { display: none; }
.sidebar nav { display: grid; gap: .35rem; }
.sidebar nav a, .settings-button { display: flex; width: 100%; min-height: 2.8rem; align-items: center; gap: .8rem; padding: .7rem .8rem; border: 0; border-radius: 8px; color: #c1d0cd; background: transparent; font-size: .9rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.sidebar nav a:hover, .sidebar nav a.active, .settings-button:hover { color: white; background: rgb(255 255 255 / 9%); }
.sidebar nav a.active { color: #ffd4c5; }
.sidebar svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar nav a:first-child svg { fill: currentColor; stroke: none; }
.nav-count { margin-left: auto; min-width: 1.5rem; padding: .1rem .35rem; border-radius: 999px; color: var(--forest); background: var(--lime); font-size: .7rem; text-align: center; }
.sidebar-bottom { display: grid; gap: 1rem; margin-top: auto; }
.operator { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: .65rem; padding: 1rem .5rem 0; border-top: 1px solid rgb(255 255 255 / 12%); }
.avatar { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; color: white; background: var(--accent); font-size: .75rem; font-weight: 800; }
.operator > span:nth-child(2) { display: grid; min-width: 0; }.operator strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.operator small { color: #9db0a8; font-size: .7rem; }.operator-signout { color: #9db0a8; text-decoration: none; }
.portal-main { min-width: 0; padding: 0 2.25rem 4rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.65rem 0; border-bottom: 1px solid var(--line); }
.kicker { margin: 0 0 .2rem; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { font-family: Manrope, sans-serif; } h1 { margin: 0; font-size: 1.75rem; } h2 { margin: .2rem 0 0; font-size: 1.35rem; }
.topbar-actions { display: flex; align-items: center; gap: .75rem; }
.connection-status { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .7rem; border-radius: 999px; color: #246c45; background: #e3f4e7; font-size: .73rem; font-weight: 700; }.connection-status i { width: .45rem; height: .45rem; border-radius: 50%; background: #39a967; box-shadow: 0 0 0 3px rgb(57 169 103 / 15%); }
.icon-button { position: relative; display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; }.icon-button svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; }.icon-button i { position: absolute; top: .55rem; right: .6rem; width: .42rem; height: .42rem; border: 2px solid white; border-radius: 50%; background: #e63e32; }
.location-picker { display: grid; grid-template-columns: 2rem 1fr 1rem; align-items: center; gap: .65rem; min-width: 210px; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: white; text-align: left; }.location-logo { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 7px; color: white; background: #921d2c; font-family: Georgia, serif; font-size: .65rem; font-weight: 800; }.location-picker > span:nth-child(2) { display: grid; }.location-picker strong { font-size: .78rem; }.location-picker small { color: var(--muted); font-size: .67rem; }.location-picker svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.5rem 0; }
.metrics article { display: grid; grid-template-columns: 2.65rem 1fr; align-items: start; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: white; }.metric-icon { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: 9px; }.metric-icon svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.metric-icon.urgent { color: #a63728; background: #fff0eb; }.metric-icon.preparing { color: #735814; background: #fff5d8; }.metric-icon.ready { color: #28714c; background: #e4f5e9; }.metric-icon.sales { color: #3a568b; background: #e9effb; }
.metrics article div { display: grid; grid-template-columns: auto 1fr; align-items: end; }.metrics small { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; font-weight: 600; }.metrics strong { margin-top: .15rem; font-family: Manrope, sans-serif; font-size: 1.55rem; line-height: 1; }.metrics article div span { margin-left: .45rem; color: var(--muted); font-size: .67rem; }
.orders-section { padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: white; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.section-title h2 span { display: inline-grid; min-width: 1.5rem; height: 1.5rem; place-items: center; margin-left: .35rem; border-radius: 999px; color: white; background: var(--accent); font-family: "DM Sans", sans-serif; font-size: .72rem; vertical-align: middle; }
.refresh-button { display: flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: .75rem; font-weight: 700; cursor: pointer; }.refresh-button svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.source-filters { display: flex; gap: .5rem; margin: 1.25rem 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); overflow-x: auto; }.source-filters button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; padding: .48rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: .72rem; font-weight: 700; cursor: pointer; }.source-filters button.active { color: white; border-color: var(--forest); background: var(--forest); }.source-filters button > span:last-child { display: grid; min-width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; color: var(--muted); background: var(--canvas); font-size: .62rem; }.source-dot { width: .45rem; height: .45rem; border-radius: 50%; }.source-uber { background: #06c167; }.source-doordash { background: #eb1700; }.source-website { background: #536fd1; }.source-phone { background: #9a6ac1; }
.order-list { display: grid; gap: .75rem; }.order-card { display: grid; grid-template-columns: 105px minmax(190px, .8fr) minmax(240px, 1.25fr) 150px; border: 1px solid var(--line); border-radius: 11px; background: white; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }.order-card:hover { border-color: #c5cec7; box-shadow: 0 8px 24px rgb(28 57 47 / 8%); }.order-card.new-order { border-color: #efb5a9; box-shadow: inset 3px 0 #e45136; }
.order-source { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .35rem; padding: 1rem .6rem; text-align: center; }.source-panel-uber { background: #eefaf2; }.source-panel-doordash { background: #fff2ef; }.source-panel-website { background: #f0f3ff; }.source-panel-phone { background: #f7f0fa; }.source-logo { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 8px; color: white; background: var(--forest); font-size: .68rem; font-weight: 800; }.source-panel-uber .source-logo { background: #000; }.source-panel-doordash .source-logo { background: #eb1700; }.source-panel-website .source-logo { background: #536fd1; }.source-panel-phone .source-logo { background: #8654a5; }.order-source strong { font-size: .7rem; }.order-source small { color: var(--muted); font-size: .64rem; }
.order-summary, .order-items, .order-actions { padding: 1rem 1.15rem; border-left: 1px solid var(--line); }.order-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.status { display: inline-flex; padding: .25rem .45rem; border-radius: 5px; font-size: .62rem; font-weight: 800; text-transform: uppercase; }.status-new { color: #a33828; background: #ffede9; }.status-accepted { color: #315792; background: #eaf0fc; }.status-preparing { color: #806218; background: #fff3d1; }.status-ready { color: #247047; background: #e2f5e8; }.placed-time { margin-left: .4rem; color: var(--muted); font-size: .68rem; }.order-heading > strong { font-size: .9rem; }.order-summary h3 { margin: .75rem 0 .2rem; font-size: .95rem; }.order-summary > p { margin: 0; color: var(--muted); font-size: .68rem; }.order-summary > p strong { color: var(--ink); }.acceptance-timer { display: flex; align-items: center; gap: .35rem; margin-top: .75rem; color: #b13d2c; font-size: .68rem; font-weight: 700; }.acceptance-timer svg { width: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.status-refundfailed { color: #9b3326; background: #fff0ed; }.customer-phone { display: inline-flex; margin-top: .45rem; color: #2f6475; font-size: .72rem; font-weight: 750; text-decoration: none; }.customer-phone:hover { text-decoration: underline; }.order-action-message { grid-column: 1 / -1; padding: .75rem 1rem; border-radius: 8px; font-size: .78rem; font-weight: 700; }.order-action-message.success { color: #215f42; background: #e5f5eb; border: 1px solid #b8dfc7; }.order-action-message.error { color: #9b3326; background: #fff0ed; border: 1px solid #efb8ae; }
.order-items-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }.order-items-heading > strong { display: flex; align-items: center; gap: .38rem; font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; }.order-items-heading > strong b { display: grid; min-width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 6px; color: white; background: var(--accent); font-size: .75rem; }.order-items-heading.complete > strong b { background: #2d7651; }.order-items-heading > span { color: var(--muted); font-size: .62rem; white-space: nowrap; }.order-items ul { display: grid; gap: .42rem; margin: .7rem 0 0; padding: 0; list-style: none; }.order-items li { display: grid; grid-template-columns: 2rem 1fr; align-items: start; gap: .48rem; font-size: .74rem; }.item-quantity { display: grid; min-width: 2rem; height: 1.45rem; place-items: center; border: 1px solid #e7c6b9; border-radius: 6px; color: #9f3e20; background: #fff3ee; font-size: .69rem; font-weight: 900; }.order-items li.complete .item-quantity { color: #256744; border-color: #a9d2b8; background: #e4f5e9; }.order-items li.complete div > strong { color: #28714c; }.order-items li div { display: grid; gap: .08rem; min-width: 0; }.order-items li div > strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }.order-items li small { overflow: hidden; color: var(--muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }.additional-item-count { margin: .55rem 0 0 2.48rem; color: var(--blue); font-size: .65rem; font-weight: 800; }.instructions { margin: .65rem 0 0; padding: .5rem .6rem; border-radius: 6px; color: #6f571e; background: #fff7dc; font-size: .65rem; }.instructions strong { margin-right: .3rem; text-transform: uppercase; }.review-items-button { display: flex; width: 100%; align-items: center; gap: .45rem; margin-top: .75rem; padding: .55rem .65rem; border: 1px solid #b8c9ce; border-radius: 7px; color: var(--primary); background: #f4f8f8; font-size: .68rem; font-weight: 850; cursor: pointer; }.review-items-button:hover { border-color: var(--blue); background: var(--blue-soft); }.review-items-button.complete { color: #256744; border-color: #9fcdb0; background: #eef9f2; }.review-items-button.complete:hover { background: #e0f3e7; }.review-items-button svg { width: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }.review-items-button > span { margin-left: auto; padding: .16rem .38rem; border-radius: 999px; color: white; background: var(--blue); font-size: .58rem; }.review-items-button.complete > span { background: #2d7651; }
.order-actions { display: flex; justify-content: center; flex-direction: column; gap: .45rem; }.order-actions button { width: 100%; padding: .58rem .65rem; border-radius: 7px; font-size: .7rem; font-weight: 800; cursor: pointer; }.accept, .handoff-button { border: 1px solid var(--forest); color: white; background: var(--forest); }.accept:hover, .handoff-button:hover { color: var(--forest); background: var(--blue-soft); }.ready-button { display: flex; align-items: center; justify-content: center; gap: .42rem; border: 1.5px solid #2d7651; color: #256744; background: #f8fffa; }.ready-button:hover { color: white; background: #2d7651; }.ready-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }.deny { border: 1px solid #eccac4; color: #a63728; background: #fff; }
.empty-orders { padding: 4rem 1rem; text-align: center; }.empty-orders span { display: grid; width: 3rem; height: 3rem; place-items: center; margin: auto; border-radius: 50%; color: #28714c; background: #e4f5e9; font-weight: 800; }.empty-orders h3 { margin: .8rem 0 .2rem; }.empty-orders p { margin: 0; color: var(--muted); }
.portal-error span { color: #a63728; background: #fff0eb; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 1.25rem; background: rgb(11 28 23 / 62%); backdrop-filter: blur(5px); animation: modal-fade-in .16s ease-out; }
.portal-modal { position: relative; width: min(100%, 500px); padding: 2rem; border: 1px solid rgb(255 255 255 / 55%); border-radius: 18px; background: white; box-shadow: 0 28px 80px rgb(8 28 22 / 30%); animation: modal-rise-in .2s ease-out; }
.modal-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--canvas); cursor: pointer; }.modal-close:hover { background: #e9ede9; }.modal-close:disabled { cursor: not-allowed; opacity: .5; }.modal-close svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.modal-icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 1.15rem; border-radius: 11px; }.modal-icon-danger { color: #a63728; background: #fff0eb; }.modal-icon svg { width: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.modal-kicker { margin: 0 0 .35rem; color: #a63728; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.portal-modal h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.025em; }.modal-copy { margin: .7rem 0 1.35rem; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.modal-order-summary { display: grid; gap: 0; margin: 0; padding: .2rem 1rem; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); }.modal-order-summary div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }.modal-order-summary div:last-child { border-bottom: 0; }.modal-order-summary dt { color: var(--muted); font-size: .74rem; }.modal-order-summary dd { margin: 0; font-size: .8rem; font-weight: 800; text-align: right; }.modal-order-summary div:last-child dd { color: #a63728; font-size: .95rem; }
.modal-inline-error { margin-top: .8rem; padding: .7rem .8rem; border: 1px solid #efb8ae; border-radius: 8px; color: #9b3326; background: #fff0ed; font-size: .75rem; font-weight: 700; line-height: 1.45; }
.modal-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: .65rem; margin-top: 1.35rem; }.modal-actions button { min-height: 3rem; padding: .75rem 1rem; border-radius: 9px; font-size: .76rem; font-weight: 800; cursor: pointer; }.modal-actions button:disabled { cursor: wait; opacity: .68; }.modal-cancel { border: 1px solid var(--line); background: white; }.modal-cancel:hover { background: var(--canvas); }.modal-confirm-danger { display: flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid #9f3022; color: white; background: #a63728; }.modal-confirm-danger:hover { background: #8d2c21; }.button-spinner { width: .9rem; height: .9rem; border: 2px solid rgb(255 255 255 / 35%); border-top-color: white; border-radius: 50%; animation: modal-spin .7s linear infinite; }
.modal-icon-ready { color: #256744; background: #e6f5eb; }.ready-modal-kicker { color: #256744; }.ready-order-summary div:last-child dd { color: #256744; }.modal-confirm-ready { display: flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid #2d7651; color: white; background: #2d7651; }.modal-confirm-ready:hover { background: #245f42; }.modal-confirm-ready svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.prep-modal { width: min(100%, 680px); height: min(90dvh, 820px); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; overflow: hidden; }.prep-modal-icon { flex: 0 0 auto; color: var(--accent); background: #fff0e9; }.prep-modal-kicker { flex: 0 0 auto; color: var(--accent); }.prep-progress-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .2rem; font-size: .74rem; }.prep-progress-heading span { color: var(--blue); font-weight: 850; }.prep-progress { flex: 0 0 auto; height: .5rem; margin: .55rem 0 1rem; border-radius: 999px; background: #e9eeeb; overflow: hidden; }.prep-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #dd7655); transition: width .2s ease; }.prep-checklist { display: grid; flex: 1 1 auto; grid-auto-rows: max-content; align-content: start; gap: .55rem; min-height: 7rem; padding: .1rem .65rem .1rem 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--blue) #edf1ef; scrollbar-gutter: stable; scrollbar-width: thin; }.prep-checklist::-webkit-scrollbar { width: .65rem; }.prep-checklist::-webkit-scrollbar-track { border-radius: 999px; background: #edf1ef; }.prep-checklist::-webkit-scrollbar-thumb { border: 2px solid #edf1ef; border-radius: 999px; background: var(--blue); }.prep-checklist-item { --item-progress: 0%; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: stretch; min-height: 4.25rem; border: 1px solid var(--line); border-radius: 10px; background: white; overflow: hidden; transition: border-color .15s ease, background .2s ease; }.prep-checklist-item.partial { border-color: #e4c86c; background: linear-gradient(90deg, #fff1ae 0 var(--item-progress), white var(--item-progress) 100%); }.prep-checklist-item.complete { border-color: #9fcfb0; background: #e7f6ec; }.prep-item-main { display: grid; width: 100%; min-height: 4.25rem; grid-template-columns: 2.5rem 2.8rem 1fr; align-items: center; gap: .75rem; min-width: 0; padding: .78rem .85rem; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }.prep-item-main:hover:not(:disabled) { background: rgb(255 255 255 / 28%); }.prep-item-main:disabled { opacity: 1; cursor: default; }.prep-unit-status { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1.5px solid #aebbb5; border-radius: 8px; color: var(--muted); background: white; font-size: .63rem; font-weight: 900; }.prep-checklist-item.partial .prep-unit-status { color: #775814; border-color: #d5ae3f; background: #fff7d7; }.prep-checklist-item.complete .prep-unit-status { color: white; border-color: #2d7651; background: #2d7651; }.prep-unit-status svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }.prep-item-quantity { display: grid; min-width: 2.8rem; height: 2rem; place-items: center; border-radius: 7px; color: #9f3e20; background: #fff0e9; font-size: .9rem; font-weight: 900; }.prep-checklist-item.partial .prep-item-quantity { color: #775814; background: #fff7d7; }.prep-checklist-item.complete .prep-item-quantity { color: #256744; background: #d4eddd; }.prep-item-copy { display: grid; gap: .12rem; min-width: 0; }.prep-item-copy strong { font-size: .82rem; }.prep-item-copy small { color: var(--muted); font-size: .66rem; }.prep-item-copy small:last-child { color: var(--blue); font-weight: 750; }.prep-checklist-item.partial .prep-item-copy small:last-child { color: #6f5614; }.prep-checklist-item.complete .prep-item-copy strong { color: #28714c; }.prep-checklist-item.complete .prep-item-copy small:last-child { color: #28714c; }.prep-item-undo { display: flex; align-items: center; align-self: stretch; gap: .3rem; padding: 0 .75rem; border: 0; border-left: 1px solid rgb(23 36 31 / 12%); color: #6d5a22; background: rgb(255 255 255 / 58%); font-size: .66rem; font-weight: 850; cursor: pointer; }.prep-checklist-item.complete .prep-item-undo { color: #256744; }.prep-item-undo:hover { background: white; }.prep-item-undo svg { width: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.prep-special-instructions { flex: 0 0 auto; display: grid; gap: .25rem; margin-top: .8rem; padding: .75rem .85rem; border-radius: 8px; color: #6f571e; background: #fff7dc; font-size: .7rem; }.prep-special-instructions strong { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }.prep-modal-footer { display: flex; flex: 0 0 auto; justify-content: space-between; gap: .7rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }.prep-modal-footer button { min-height: 2.75rem; padding: .65rem .9rem; border-radius: 8px; font-size: .73rem; font-weight: 850; cursor: pointer; }.prep-reset-button { border: 1px solid var(--line); color: var(--muted); background: white; }.prep-reset-button:hover { color: #9b3326; border-color: #efb8ae; background: #fff0ed; }.prep-done-button { border: 1px solid var(--primary); color: white; background: var(--primary); }.prep-done-button:hover { background: var(--blue); }
.settings-modal-icon { color: var(--blue); background: var(--blue-soft); }.settings-kicker { color: var(--accent); }.preference-row { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }.preference-icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 9px; color: var(--blue); background: white; }.preference-icon svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.preference-copy { display: grid; gap: .18rem; }.preference-copy strong { font-size: .83rem; }.preference-copy small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.toggle-switch { position: relative; width: 2.75rem; height: 1.55rem; padding: 0; border: 1px solid #bdc8c2; border-radius: 999px; background: #d7ddd9; cursor: pointer; transition: background .18s ease, border-color .18s ease; }.toggle-switch span { position: absolute; top: 3px; left: 3px; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgb(23 36 31 / 20%); transition: transform .18s ease; }.toggle-switch.enabled { border-color: var(--accent); background: var(--accent); }.toggle-switch.enabled span { transform: translateX(1.18rem); }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }.settings-footer > span { color: var(--muted); font-size: .72rem; font-weight: 700; }.test-chime-button { display: flex; align-items: center; gap: .4rem; padding: .62rem .8rem; border: 1px solid var(--primary); border-radius: 8px; color: white; background: var(--primary); font-size: .72rem; font-weight: 800; cursor: pointer; }.test-chime-button:disabled { border-color: var(--line); color: #9aa49f; background: var(--canvas); cursor: not-allowed; }.test-chime-button svg { width: .85rem; fill: currentColor; stroke: none; }
.settings-page-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--line); }.settings-page-header h1 { margin: .15rem 0 .35rem; font-size: 2.2rem; letter-spacing: -.04em; }.settings-page-header > div > p:last-child { margin: 0; color: var(--muted); font-size: .88rem; }.back-to-dashboard { display: flex; align-items: center; gap: .4rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 9px; color: var(--primary); background: white; font-size: .75rem; font-weight: 800; text-decoration: none; }.back-to-dashboard:hover { border-color: var(--blue); background: var(--blue-soft); }.back-to-dashboard svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-panel { width: min(100%, 760px); margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 16px 45px rgb(23 63 75 / 7%); }.settings-panel-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.25rem; }.settings-panel-heading .kicker { margin-bottom: .15rem; color: var(--accent); }.settings-panel-heading h2 { margin: 0; }.settings-panel-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); }.settings-panel-icon svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.settings-footer > span { display: inline-flex; align-items: center; gap: .42rem; }.settings-footer > span i { width: .48rem; height: .48rem; border-radius: 50%; background: #aeb8b3; }.settings-footer > span i.enabled { background: #2d7651; box-shadow: 0 0 0 3px rgb(45 118 81 / 12%); }
.settings-note { display: flex; width: min(100%, 760px); gap: .45rem; margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--accent); color: var(--muted); background: var(--oat); font-size: .73rem; line-height: 1.5; }.settings-note strong { color: var(--ink); }
@keyframes modal-fade-in { from { opacity: 0; } }
@keyframes modal-rise-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes modal-spin { to { transform: rotate(360deg); } }
#blazor-error-ui { position: fixed; right: 1rem; bottom: 1rem; display: none; padding: 1rem; color: white; background: #9e2f23; z-index: 1000; }
.account-page { min-height: 100dvh; background: var(--canvas); }
.login-shell { display: grid; min-height: 100dvh; grid-template-columns: minmax(330px, .9fr) minmax(440px, 1.1fr); }
.login-brand-panel { display: flex; justify-content: space-between; flex-direction: column; padding: clamp(2rem, 5vw, 5rem); color: white; background: radial-gradient(circle at 25% 25%, rgb(216 255 112 / 16%), transparent 28rem), linear-gradient(145deg, #102c24, var(--forest)); }
.login-brand { display: inline-flex; align-items: center; align-self: flex-start; gap: .75rem; color: white; font-family: Manrope, sans-serif; font-size: 1.45rem; font-weight: 800; text-decoration: none; }
.login-brand-panel h1 { max-width: 680px; margin: .7rem 0 1.2rem; font-size: clamp(2.6rem, 5vw, 5.6rem); line-height: .98; letter-spacing: -.06em; }
.login-brand-panel > div > p:last-child { max-width: 540px; color: rgb(255 255 255 / 70%); font-size: 1.05rem; line-height: 1.65; }
.login-brand-panel > small { color: rgb(255 255 255 / 48%); }
.login-kicker { margin: 0; color: #b9d866; font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.login-form-panel { display: grid; place-items: center; padding: 2rem; background: #fbfcfa; }
.login-form-wrap { width: min(100%, 460px); }
.login-form-wrap h2 { margin: .65rem 0 .45rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.045em; }
.login-intro, .login-help { color: var(--muted); line-height: 1.55; }
.login-form-wrap form { display: grid; gap: .5rem; margin-top: 2rem; }
.login-form-wrap form > label:not(.remember-row) { margin-top: .65rem; font-size: .78rem; font-weight: 800; }
.login-form-wrap form > input { width: 100%; min-height: 3.3rem; padding: .85rem 1rem; border: 1px solid #cfd8d1; border-radius: 10px; color: var(--ink); background: white; outline: none; }
.login-form-wrap form > input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgb(28 57 47 / 10%); }
.remember-row { display: flex; align-items: center; gap: .55rem; margin: .7rem 0; color: var(--muted); font-size: .78rem; }
.remember-row input { accent-color: var(--forest); }
.login-form-wrap form > button, .logout-card button { display: flex; min-height: 3.35rem; align-items: center; justify-content: space-between; padding: .85rem 1.05rem; border: 1px solid var(--forest); border-radius: 10px; color: white; background: var(--forest); font-weight: 800; cursor: pointer; }
.login-form-wrap form > button:hover, .logout-card button:hover { color: var(--forest); background: var(--lime); }
.login-errors, .field-error { color: #a63728; font-size: .76rem; }
.login-errors ul { margin: 0; padding: .8rem 1rem .8rem 2rem; border-radius: 8px; background: #fff0eb; }
.login-help { margin-top: 1.5rem; font-size: .78rem; }
.account-page--simple { display: grid; place-items: center; padding: 1rem; }
.logout-card { width: min(100%, 440px); padding: 2rem; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 24px 70px rgb(28 57 47 / 12%); }
.logout-card p { color: var(--muted); line-height: 1.55; }
.logout-card form { display: flex; gap: .75rem; margin-top: 1.5rem; }
.logout-card form > * { flex: 1; }
.logout-card a { display: grid; place-items: center; color: var(--forest); font-weight: 700; }
@media (max-width: 1100px) { .metrics { grid-template-columns: repeat(2, 1fr); }.order-card { grid-template-columns: 95px 1fr 1fr; }.order-actions { grid-column: 2 / -1; flex-direction: row; border-top: 1px solid var(--line); }.order-actions button { width: auto; flex: 1; } }
@media (max-width: 820px) { .login-shell { grid-template-columns: 1fr; }.login-brand-panel { min-height: 250px; padding: 2rem; }.login-brand-panel h1 { margin-block: 2rem .75rem; font-size: clamp(2.5rem, 11vw, 4.3rem); }.login-brand-panel > small { display: none; }.login-form-panel { padding: 3rem 1.25rem; } }
@media (max-width: 760px) { .portal-shell { grid-template-columns: 1fr; }.sidebar { position: static; height: auto; padding: 1rem; }.portal-brand { margin-bottom: 1rem; }.sidebar nav { grid-template-columns: repeat(2, 1fr); }.sidebar nav a { justify-content: center; font-size: 0; }.sidebar nav a svg { width: 1.35rem; }.nav-count, .operator { display: none; }.sidebar-bottom { margin-top: .5rem; }.settings-button { justify-content: center; }.portal-main { padding: 0 1rem 2rem; }.topbar { align-items: flex-start; }.connection-status, .icon-button { display: none; }.location-picker { min-width: auto; grid-template-columns: 2rem 1rem; }.location-picker > span:nth-child(2) { display: none; }.metrics { grid-template-columns: 1fr 1fr; }.order-card { grid-template-columns: 78px 1fr; }.order-items, .order-actions { grid-column: 1 / -1; border-top: 1px solid var(--line); }.order-items { border-left: 0; }.orders-section { padding: 1rem; } }
@media (max-width: 480px) { .metrics { grid-template-columns: 1fr; }.portal-main { padding-inline: .65rem; }.topbar h1 { font-size: 1.4rem; }.section-title .refresh-button { font-size: 0; }.order-card { grid-template-columns: 68px 1fr; }.order-source strong { display: none; }.portal-modal { padding: 1.4rem; }.modal-actions { grid-template-columns: 1fr; }.modal-cancel { order: 2; }.prep-item-main { grid-template-columns: 2.2rem 2.3rem 1fr; gap: .45rem; padding-inline: .6rem; }.prep-unit-status { width: 2rem; height: 2rem; }.prep-item-quantity { min-width: 2.3rem; }.prep-item-undo { padding-inline: .55rem; font-size: 0; }.prep-item-undo svg { width: 1rem; }.prep-modal-footer { flex-direction: column-reverse; }.prep-modal-footer button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .portal-modal, .button-spinner { animation: none; } }

/* Space-saving portal navigation */
.portal-nav-toggle { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.portal-shell { display: block; min-height: 100vh; }
.sidebar { position: fixed; z-index: 1200; inset: 0 auto 0 0; width: min(280px, 88vw); height: 100dvh; padding: 1.25rem 1rem; box-shadow: 18px 0 55px rgb(8 28 22 / 24%); transform: translateX(-105%); transition: transform .22s ease; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 .35rem 2rem .65rem; }
.sidebar-heading .portal-brand { margin: 0; }
.sidebar nav { grid-template-columns: 1fr; }
.sidebar nav a { justify-content: flex-start; font-size: .9rem; }
.sidebar-bottom { margin-top: auto; }
.sidebar .settings-button { justify-content: flex-start; }
.sidebar .operator { display: grid; }
.nav-open-button, .nav-close-button { display: grid; place-items: center; border: 1px solid var(--line); cursor: pointer; }
.nav-open-button { position: fixed; z-index: 1050; top: 1.35rem; left: 1.15rem; width: 2.7rem; height: 2.7rem; border-radius: 10px; color: white; background: var(--primary); box-shadow: 0 8px 24px rgb(23 63 75 / 22%); transition: opacity .15s ease, transform .15s ease; }
.nav-open-button:hover { background: var(--blue); transform: translateY(-1px); }
.nav-close-button { width: 2.3rem; height: 2.3rem; border-color: rgb(255 255 255 / 18%); border-radius: 9px; color: white; background: rgb(255 255 255 / 7%); }
.nav-open-button svg, .nav-close-button svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-scrim { position: fixed; z-index: 1150; inset: 0; background: rgb(8 28 22 / 46%); opacity: 0; pointer-events: none; transition: opacity .2s ease; backdrop-filter: blur(2px); }
.portal-nav-toggle:checked + .nav-open-button { opacity: 0; pointer-events: none; transform: translateX(-.5rem); }
.portal-nav-toggle:checked ~ .portal-shell .sidebar { transform: translateX(0); }
.portal-nav-toggle:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }
.portal-main { width: 100%; min-width: 0; padding: 0 clamp(1rem, 2.5vw, 2.75rem) 4rem clamp(4.8rem, 6vw, 6rem); }

/* Operational summary and view controls */
.metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-actions { display: flex; align-items: center; gap: .65rem; }
.view-toggle { display: inline-flex; padding: .2rem; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); }
.view-toggle button { display: inline-flex; align-items: center; gap: .38rem; min-height: 2rem; padding: .4rem .62rem; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .69rem; font-weight: 800; cursor: pointer; }
.view-toggle button.active { color: white; background: var(--primary); box-shadow: 0 3px 8px rgb(23 63 75 / 18%); }
.view-toggle svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Three-panel order board */
.operations-board { display: grid; grid-template-columns: repeat(3, minmax(310px, 1fr)); align-items: start; gap: 1rem; min-width: 0; padding-bottom: .35rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--blue) var(--canvas); scrollbar-width: thin; }
.operation-column { min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.operation-column > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .2rem .25rem .8rem; font-family: Manrope, sans-serif; font-size: .82rem; font-weight: 800; }
.operation-column > header::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--blue); }
.operation-column > header span { margin-right: auto; }
.operation-column > header b { display: grid; min-width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 999px; color: var(--muted); background: white; font-family: "DM Sans", sans-serif; font-size: .64rem; }
.attention-column > header::before { background: var(--accent); box-shadow: 0 0 0 4px rgb(196 81 45 / 10%); }
.progress-column > header::before { background: #b78b28; box-shadow: 0 0 0 4px rgb(183 139 40 / 10%); }
.ready-column > header::before { background: #2d7651; box-shadow: 0 0 0 4px rgb(45 118 81 / 10%); }
.operation-column-orders { display: grid; gap: .75rem; }
.column-empty { min-height: 7rem; margin: 0; padding: 2rem 1rem; border: 1px dashed #ccd4cf; border-radius: 9px; color: var(--muted); background: rgb(255 255 255 / 55%); font-size: .72rem; text-align: center; }
.operations-board .order-card { height: 350px; min-height: 350px; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; }
.order-card { border-width: 3px; }
.order-card.new-order { box-shadow: none; }
.order-source-copy { display: grid; gap: .05rem; min-width: 0; }
.operations-board .order-source { position: relative; justify-content: flex-start; flex-direction: row; gap: .55rem; min-height: 3.55rem; padding: .55rem 7.3rem .55rem .65rem; color: var(--ink); background: linear-gradient(120deg, #edf4f6, #dcebef); text-align: left; }
.operations-board .order-source .source-logo { width: 1.9rem; height: 1.9rem; }
.operations-board .order-source-copy strong { color: var(--ink); }
.operations-board .order-source-copy small { color: var(--muted); }
.compact-order-heading { position: absolute; top: 50%; right: .6rem; display: grid; justify-items: center; gap: .18rem; transform: translateY(-50%); }
.compact-order-heading .status { padding: .2rem .35rem; white-space: nowrap; }
.compact-order-heading small { color: var(--muted); font-size: .6rem; white-space: nowrap; }
.operations-board .order-summary, .operations-board .order-items, .operations-board .order-actions { grid-column: auto; padding: .62rem .68rem; border-top: 1px solid var(--line); border-left: 0; }
.operations-board .order-summary { display: block; min-height: 3rem; }
.compact-customer-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .12rem .65rem; }
.compact-customer-line h3 { min-width: 0; margin: 0; overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.compact-customer-line > span { justify-self: end; color: var(--ink); font-size: .67rem; font-weight: 800; text-transform: capitalize; }
.compact-customer-line .customer-phone { grid-column: 1 / -1; justify-self: start; margin: 0; font-size: .67rem; line-height: 1.2; }
.operations-board .acceptance-timer { width: 100%; margin-top: .3rem; }
.operations-board .order-items { display: flex; min-height: 0; flex-direction: column; }
.operations-board .order-items-heading > strong b { width: 2rem; min-width: 2rem; height: 1.45rem; }
.operations-board .order-items-heading > strong > span { white-space: nowrap; }
.operations-board .order-items-heading em { color: var(--primary); font-style: normal; font-weight: 900; letter-spacing: 0; }
.operations-board .order-items ul { gap: .34rem; margin-top: .5rem; padding-right: .25rem; }
.operations-board .order-items-preview { height: 5.05rem; max-height: 5.05rem; align-content: start; grid-auto-rows: min-content; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--blue) transparent; scrollbar-gutter: stable; scrollbar-width: thin; }
.operations-board .order-items li { min-height: 1.45rem; }
.operations-board .review-items-button { margin-top: auto; padding-block: .42rem; }
.operations-board .instructions { max-height: 2.25rem; margin-top: .35rem; padding-block: .35rem; overflow-y: auto; }
.operations-board .order-actions { flex-direction: row; gap: .38rem; }
.operations-board .order-actions button { width: auto; flex: 1; }
.operations-board .ready-button { line-height: 1.25; }
.ready-button:disabled { color: var(--accent); border-color: var(--accent); background: #fff8f4; opacity: 1; cursor: not-allowed; box-shadow: none; }
.ready-button:disabled:hover { color: var(--accent); border-color: var(--accent); background: #fff8f4; }

/* Consistent list cards with a three-row, internally scrollable item preview */
.order-card.list-card { height: 230px; min-height: 230px; }
.order-card.list-card .order-summary,
.order-card.list-card .order-items,
.order-card.list-card .order-actions { min-height: 0; }
.order-card.list-card .order-items { display: flex; flex-direction: column; padding: .75rem .9rem; overflow: hidden; }
.order-card.list-card .order-items-preview { height: 5.05rem; max-height: 5.05rem; flex: 0 0 5.05rem; gap: .34rem; margin-top: .5rem; padding-right: .25rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--blue) transparent; scrollbar-gutter: stable; scrollbar-width: thin; }
.order-card.list-card .order-items li { min-height: 1.45rem; }
.order-card.list-card .review-items-button { margin-top: auto; padding-block: .42rem; }
.order-card.list-card .instructions { max-height: 2.25rem; margin-top: .35rem; padding-block: .35rem; overflow-y: auto; }

@media (max-width: 1100px) {
    .order-card.list-card { height: 285px; min-height: 285px; }
}

@media (max-width: 760px) {
    .order-card.list-card { height: 430px; min-height: 430px; }
}

@media (max-width: 900px) {
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-main { padding-right: 1rem; padding-left: 4.5rem; }
    .section-title { align-items: flex-start; }
    .section-actions { align-items: flex-end; flex-direction: column-reverse; }
}

@media (max-width: 600px) {
    .portal-main { padding: 0 .65rem 2rem; }
    .nav-open-button { top: .85rem; left: .7rem; width: 2.45rem; height: 2.45rem; }
    .topbar { min-height: 4.3rem; padding-left: 3.1rem; }
    .metrics { grid-template-columns: 1fr; }
    .section-title { align-items: stretch; flex-direction: column; }
    .section-actions { align-items: stretch; flex-direction: row; justify-content: space-between; }
    .view-toggle { flex: 1; }
    .view-toggle button { justify-content: center; flex: 1; }
    .operations-board { grid-template-columns: repeat(3, minmax(285px, 86vw)); }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .nav-open-button, .nav-scrim { transition: none; }
}

/* Compact dashboard chrome: prioritize live orders above the fold */
.topbar { min-height: 4.35rem; gap: 1rem; padding: .7rem 0; }
.topbar > div:first-child { display: flex; align-items: baseline; gap: .85rem; min-width: 0; }
.topbar > div:first-child .kicker { order: 2; margin: 0; font-size: .62rem; white-space: nowrap; }
.topbar h1 { font-size: 1.45rem; white-space: nowrap; }
.topbar-actions { gap: .5rem; }
.connection-status { padding: .34rem .58rem; }
.icon-button { width: 2.3rem; height: 2.3rem; }
.location-picker { min-width: 195px; padding: .32rem .48rem; }
.location-logo { width: 1.8rem; height: 1.8rem; }
.nav-open-button { top: .82rem; }

.metrics { gap: .65rem; padding: .7rem 0; }
.metrics article { min-height: 3.8rem; grid-template-columns: 2.15rem 1fr; align-items: center; gap: .62rem; padding: .55rem .7rem; border-radius: 10px; }
.metric-icon { width: 2.15rem; height: 2.15rem; border-radius: 8px; }
.metric-icon svg { width: 1rem; }
.metrics article div { align-items: center; }
.metrics small { font-size: .65rem; }
.metrics strong { margin-top: .08rem; font-size: 1.25rem; }
.metrics article div span { overflow: hidden; margin-left: .35rem; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }

.orders-section { padding: .85rem 1rem 1rem; }
.orders-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.orders-toolbar .section-title { display: block; min-width: 185px; }
.orders-toolbar .section-title .kicker { margin-bottom: .08rem; font-size: .59rem; }
.orders-toolbar .section-title h2 { margin: 0; font-size: 1.05rem; white-space: nowrap; }
.orders-toolbar .section-title h2 span { min-width: 1.25rem; height: 1.25rem; font-size: .61rem; }
.orders-toolbar .source-filters { min-width: 0; gap: .35rem; margin: 0; padding: 0; border: 0; }
.orders-toolbar .source-filters button { gap: .32rem; padding: .36rem .55rem; font-size: .65rem; }
.orders-toolbar .section-actions { justify-self: end; }
.orders-toolbar .view-toggle button { min-height: 1.85rem; padding: .34rem .52rem; font-size: .64rem; }
.orders-section > .order-list { padding-top: .8rem; }

@media (max-width: 1100px) {
    .orders-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 700px) {
    .topbar > div:first-child { display: grid; gap: .05rem; }
    .topbar > div:first-child .kicker { order: 0; font-size: .55rem; }
    .topbar h1 { font-size: 1.2rem; }
    .metrics { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; }
    .metrics article { min-width: 150px; }
    .orders-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    .orders-toolbar .source-filters { padding-bottom: .1rem; }
}

/* Owner reports */
.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; }
.reports-header { display: flex; min-height: 7rem; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.reports-header h1 { font-size: 1.8rem; }
.reports-header > div:first-child > p:last-child { margin: .3rem 0 0; color: var(--muted); font-size: .76rem; }
.report-range { display: grid; gap: .28rem; min-width: 170px; }
.report-range label, .report-filters label > span { color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.report-range select, .report-filters input, .report-filters select { min-height: 2.35rem; padding: .5rem .65rem; border: 1px solid #cfd7d2; border-radius: 8px; color: var(--ink); background: white; font-size: .7rem; outline: none; }
.report-range select:focus, .report-filters input:focus, .report-filters select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(63 104 120 / 10%); }
.reports-state { display: grid; min-height: 55vh; place-items: center; align-content: center; gap: .65rem; color: var(--muted); }
.reports-state.reports-denied > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: var(--accent); background: #fff0eb; font-size: 1.2rem; font-weight: 900; }
.reports-state h1, .reports-state p { margin: 0; text-align: center; }
.reports-state p { max-width: 520px; }
.reports-state a { padding: .6rem .8rem; border-radius: 8px; color: white; background: var(--primary); font-size: .72rem; font-weight: 800; text-decoration: none; }
.report-error { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid #efb8ae; border-radius: 8px; color: #9b3326; background: #fff0ed; font-size: .75rem; font-weight: 700; }
.report-tabs { display: flex; align-items: center; gap: .35rem; margin: 1rem 0; padding: .25rem; border: 1px solid var(--line); border-radius: 10px; background: white; width: max-content; }
.report-tabs button { display: inline-flex; min-height: 2.15rem; align-items: center; gap: .42rem; padding: .45rem .72rem; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 800; cursor: pointer; }
.report-tabs button.active { color: white; background: var(--primary); box-shadow: 0 4px 10px rgb(23 63 75 / 16%); }
.report-tabs svg { width: .92rem; height: .92rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.report-tabs button > span { display: grid; min-width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 999px; color: var(--muted); background: var(--canvas); font-size: .58rem; }
.report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.report-kpis article { display: grid; min-height: 5.8rem; grid-template-columns: 2.55rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: white; }
.report-kpi-icon { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: 9px; color: var(--blue); background: #e8f0f2; }
.report-kpi-icon.revenue { color: #247047; background: #e4f5e9; }.report-kpi-icon.orders { color: var(--accent); background: #fff0eb; }.report-kpi-icon.average { color: #806218; background: #fff3d1; }
.report-kpi-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.report-kpis article > div { display: grid; min-width: 0; }
.report-kpis small { color: var(--muted); font-size: .62rem; font-weight: 700; }
.report-kpis strong { margin: .08rem 0; overflow: hidden; font-family: Manrope, sans-serif; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.report-kpis strong.text-value { font-size: .9rem; }
.report-kpis article > div > span { overflow: hidden; color: var(--muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.report-insights-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: .8rem; margin-top: .8rem; padding-bottom: 3rem; }
.report-panel { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: white; }
.report-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.report-panel > header .kicker { margin-bottom: .12rem; color: var(--accent); font-size: .57rem; }
.report-panel > header h2 { margin: 0; font-size: 1rem; }
.report-panel > header > span { color: var(--muted); font-size: .62rem; font-weight: 700; }
.report-empty { display: grid; min-height: 10rem; place-items: center; margin: 0; color: var(--muted); font-size: .72rem; text-align: center; }
.sales-bars { display: flex; height: 14rem; align-items: end; gap: clamp(.25rem, 1vw, .65rem); padding-top: 1rem; overflow-x: auto; }
.sales-bar-column { display: grid; min-width: 34px; height: 100%; flex: 1; grid-template-rows: 1rem 1fr 1rem; align-items: end; gap: .25rem; text-align: center; }
.sales-bar-value, .sales-bar-column small { color: var(--muted); font-size: .52rem; font-style: normal; white-space: nowrap; }
.sales-bar-track { position: relative; height: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #f1f5f4, #f7f5ef); overflow: hidden; }
.sales-bar-track i { position: absolute; right: 0; bottom: 0; left: 0; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #6e94a1, var(--primary)); }
.financial-breakdown { display: grid; gap: .02rem; margin: 0; }
.financial-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; padding: .53rem 0; border-bottom: 1px solid #edf0ed; font-size: .69rem; }
.financial-breakdown dt { color: var(--muted); }.financial-breakdown dd { margin: 0; font-weight: 800; }.financial-breakdown dd.negative { color: #a33828; }
.financial-breakdown > div.net { margin-bottom: .28rem; border-color: var(--ink); color: var(--ink); font-size: .76rem; }.financial-breakdown > div.net dt { color: var(--ink); font-weight: 800; }
.report-note { margin: .8rem 0 0; padding: .65rem .7rem; border-left: 3px solid var(--blue); color: var(--muted); background: #f3f7f7; font-size: .59rem; line-height: 1.45; }
.ranked-items { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.ranked-items li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; }
.ranked-items li > b { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 6px; color: var(--accent); background: #fff0eb; font-size: .62rem; }
.ranked-items li > div { display: grid; gap: .25rem; min-width: 0; }.ranked-items li > div strong { overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.ranked-items li > div span { height: .35rem; border-radius: 999px; background: #edf1ef; overflow: hidden; }.ranked-items li > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #df8162); }
.ranked-items li > em { color: var(--blue); font-size: .67rem; font-style: normal; font-weight: 900; }
.demand-highlight { display: flex; align-items: center; gap: .7rem; padding: .75rem; border-radius: 9px; background: var(--oat); }
.demand-highlight > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 8px; color: var(--blue); background: white; }.demand-highlight svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.demand-highlight > div { display: grid; }.demand-highlight small { color: var(--muted); font-size: .59rem; }.demand-highlight strong { font-size: .85rem; }
.mix-list { display: grid; gap: .65rem; margin-top: 1rem; }.mix-list > div { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; align-items: end; gap: .25rem .6rem; }.mix-list > div > span { display: flex; justify-content: space-between; gap: 1rem; font-size: .66rem; }.mix-list > div > span em { color: var(--muted); font-size: .58rem; font-style: normal; }.mix-list > div > div { height: .38rem; border-radius: 999px; background: #edf1ef; overflow: hidden; }.mix-list > div > div i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }.mix-list > div > strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: .68rem; text-align: right; }
.status-summary { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }.status-summary > span { display: inline-flex; align-items: center; gap: .28rem; padding: .3rem .42rem; border-radius: 999px; color: var(--muted); background: var(--canvas); font-size: .56rem; }.status-summary b { color: var(--ink); }.report-status { width: .4rem; height: .4rem; border-radius: 50%; background: var(--blue); }.report-status.status-completed { background: #2d7651; }.report-status.status-refunded, .report-status.status-cancelled { background: var(--accent); }

/* Historical order ledger */
.order-history-panel { margin-bottom: 3rem; border: 1px solid var(--line); border-radius: 13px; background: white; overflow: hidden; }
.report-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(120px, .65fr)) auto; align-items: end; gap: .6rem; padding: .9rem; background: #f7f5ef; }
.report-filters label { display: grid; gap: .3rem; min-width: 0; }.report-filters input, .report-filters select { width: 100%; }
.report-search > div { position: relative; }.report-search svg { position: absolute; top: 50%; left: .65rem; width: .9rem; fill: none; stroke: var(--muted); stroke-width: 2; transform: translateY(-50%); }.report-search input { padding-left: 2rem; }
.clear-report-filters { min-height: 2.35rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; font-size: .67rem; font-weight: 800; cursor: pointer; }.clear-report-filters:hover { color: var(--accent); border-color: #e7b5a5; }
.report-table-summary { padding: .65rem .9rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .64rem; }.report-table-summary strong { color: var(--ink); }.report-table-summary span { margin: 0 .35rem; }
.report-table-wrap { overflow-x: auto; }.report-table { width: 100%; border-collapse: collapse; font-size: .68rem; }.report-table th { padding: .58rem .7rem; color: var(--muted); background: #fbfcfa; text-align: left; white-space: nowrap; }.report-table th.number, .report-table td.number { text-align: right; }.report-table th button { padding: 0; border: 0; color: inherit; background: none; font-size: .61rem; font-weight: 850; text-transform: uppercase; cursor: pointer; }.report-table td { padding: .7rem; border-top: 1px solid #edf0ed; vertical-align: middle; white-space: nowrap; }.report-table tbody tr:hover { background: #fafcfa; }.report-table td > strong, .report-table td > small { display: block; }.report-table td > small { max-width: 190px; margin-top: .12rem; overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; }.order-number { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--blue); font-size: .65rem; font-weight: 800; }
.history-status { display: inline-flex; padding: .26rem .42rem; border-radius: 5px; color: var(--blue); background: #e8f0f2; font-size: .57rem; font-weight: 850; text-transform: uppercase; }.history-status.status-completed, .history-status.status-ready { color: #247047; background: #e2f5e8; }.history-status.status-refunded, .history-status.status-cancelled, .history-status.status-refundfailed { color: #a33828; background: #ffede9; }.history-status.status-refundpending, .history-status.status-preparing { color: #806218; background: #fff3d1; }
.view-report-order { padding: .42rem .58rem; border: 1px solid var(--primary); border-radius: 7px; color: var(--primary); background: white; font-size: .62rem; font-weight: 850; cursor: pointer; }.view-report-order:hover { color: white; background: var(--primary); }.table-empty { min-height: 14rem; }
.report-pagination { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .64rem; }.report-pagination > div { display: flex; gap: .4rem; }.report-pagination button { padding: .42rem .62rem; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: .62rem; font-weight: 800; cursor: pointer; }.report-pagination button:disabled { opacity: .45; cursor: default; }

/* Report order details modal */
.report-order-modal { width: min(100%, 680px); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; overflow: hidden; }
.report-modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }.report-modal-heading h2 { margin: 0; font-size: 1.4rem; }.report-modal-heading p { margin: .22rem 0 0; color: var(--muted); font-size: .66rem; }
.report-order-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1rem 0; }.report-order-facts > div { display: grid; align-content: start; gap: .14rem; min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); }.report-order-facts small { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.report-order-facts strong { overflow: hidden; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }.report-order-facts span { overflow: hidden; color: var(--muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.report-modal-items { display: flex; min-height: 7rem; flex: 1; flex-direction: column; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.report-modal-items-heading { display: flex; justify-content: space-between; padding: .7rem 0; font-size: .67rem; }.report-modal-items-heading span { color: var(--muted); }.report-modal-item-scroll { display: grid; align-content: start; gap: .45rem; min-height: 0; padding: .05rem .5rem .65rem 0; overflow-y: auto; scrollbar-color: var(--blue) transparent; }.report-modal-line { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; }.report-modal-line > b { display: grid; width: 2rem; height: 1.55rem; place-items: center; border-radius: 6px; color: var(--accent); background: #fff0eb; font-size: .65rem; }.report-modal-line > div { display: grid; min-width: 0; }.report-modal-line > div strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.report-modal-line small { color: var(--muted); font-size: .57rem; }.report-modal-line > span { font-size: .68rem; font-weight: 850; }
.report-modal-totals { display: grid; gap: .35rem; width: min(100%, 280px); align-self: end; margin: .8rem 0; }.report-modal-totals > div { display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; }.report-modal-totals dd { margin: 0; color: var(--ink); font-weight: 800; }.report-modal-totals > div.total { padding-top: .38rem; border-top: 1px solid var(--ink); color: var(--ink); font-size: .75rem; font-weight: 900; }
.report-modal-done { align-self: end; min-width: 110px; padding: .65rem .8rem; border: 1px solid var(--primary); border-radius: 8px; color: white; background: var(--primary); font-size: .7rem; font-weight: 850; cursor: pointer; }

/* Recoverable service and exception states */
.portal-service-error { display: grid; width: min(100%, 720px); min-height: 360px; grid-template-columns: 3rem minmax(0, 1fr); align-content: center; gap: 1rem; margin: clamp(2rem, 8vh, 6rem) auto; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #efd0c7; border-radius: 18px; background: white; box-shadow: 0 20px 60px rgb(23 63 75 / 8%); }
.portal-service-error > span, .portal-error-mark { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 12px; color: var(--accent); background: #fff0eb; font-family: Manrope, sans-serif; font-size: 1.25rem; font-weight: 900; }
.portal-service-error h1, .portal-error-card h1 { margin: .3rem 0 .65rem; font-family: Manrope, sans-serif; letter-spacing: -.04em; }
.portal-service-error p { margin: 0 0 .45rem; color: var(--muted); line-height: 1.55; }.portal-service-error p:first-child { color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.portal-service-error small, .portal-error-card small { display: block; color: var(--muted); font-size: .65rem; }.portal-service-error div > div, .portal-error-card > div { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.15rem; }.portal-service-error a, .portal-error-card a { padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 8px; color: var(--primary); background: white; font-size: .72rem; font-weight: 850; text-decoration: none; }.portal-service-error a:first-child, .portal-error-card a:first-child { color: white; border-color: var(--primary); background: var(--primary); }
.portal-error-card { width: min(calc(100% - 2rem), 570px); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 25px 75px rgb(23 63 75 / 16%); }.portal-error-card > p:not(.login-kicker) { color: var(--muted); line-height: 1.6; }

@media (max-width: 1150px) {
    .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-filters { grid-template-columns: repeat(3, minmax(140px, 1fr)); }.report-search { grid-column: span 2; }
}
@media (max-width: 850px) {
    .reports-header { align-items: stretch; flex-direction: column; gap: .75rem; }.report-range { width: min(100%, 240px); }
    .report-insights-grid { grid-template-columns: 1fr; }.financial-panel { grid-row: auto; }
    .report-order-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .reports-header { padding-left: 3.1rem; }.reports-header h1 { font-size: 1.45rem; }.reports-header > div:first-child > p:last-child { line-height: 1.4; }
    .report-tabs { width: 100%; }.report-tabs button { justify-content: center; flex: 1; }
    .report-kpis { grid-template-columns: 1fr; }.report-insights-grid { margin-top: .65rem; }
    .report-filters { grid-template-columns: 1fr 1fr; }.report-search { grid-column: 1 / -1; }.clear-report-filters { align-self: end; }
    .report-order-facts { grid-template-columns: 1fr; }.report-modal-heading { flex-direction: column; }.report-modal-done { width: 100%; }
}