/* Styles for the app (app.html). Shares its palette with site.css. */
/* Refined dark: layered charcoal surfaces, hairline borders, crimson used sparingly (shared palette with site.css). */
:root {
--bg:#09090b; --card:#111114; --card-2:#17171b; --raised:#1f1f24; --raised-2:#26262c;
--line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
--ink:#f4f4f5; --muted:#a1a1aa; --faint:#8e8e98;
--red:#c81e33; --red-hover:#dc2c42; --red-text:#f0606e; --red-soft:rgba(200,30,51,.13); --red-line:rgba(226,56,78,.38);
--good:#3ecf8e; --good-soft:rgba(62,207,142,.12);
--warn:#f5b544; --warn-soft:rgba(245,181,68,.11);
--radius:14px;
color-scheme:dark; /* dark scrollbars and native controls */
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14.5px/1.5 Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased;
background-image:radial-gradient(900px 400px at 50% -120px, rgba(200,30,51,.09), transparent 70%); background-repeat:no-repeat; }
.num, input[type=number] { font-variant-numeric:tabular-nums; }
.i { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }
/* ---------- header ---------- */
header { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
padding:12px 24px; background:rgba(9,9,11,.75); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.brand { font-weight:600; font-size:16px; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; }
.brand img { width:24px; height:24px; display:block; }
nav { display:flex; gap:2px; padding:3px; background:var(--card); border:1px solid var(--line-2); border-radius:11px; }
nav button { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--muted); padding:6px 13px;
border-radius:8px; font-weight:500; box-shadow:none; }
nav button .i { color:var(--faint); transition:color .15s; }
nav button:hover { color:var(--ink); background:transparent; }
nav button.active { background:var(--raised); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5); }
nav button.active .i { color:var(--red-text); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:4px; }
#savedFlag { display:inline-flex; align-items:center; gap:5px; margin-right:6px; color:var(--good); font-size:12.5px; font-weight:500;
opacity:0; transition:opacity .3s; }
#savedFlag.show { opacity:1; }
.cloud-status { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:13.5px; color:var(--muted); cursor:default; }
.cloud-status.hidden { display:none; }
.cloud-status[data-state=saved] .i { color:var(--good); }
.cloud-status[data-state=offline] { color:var(--warn); }
.cloud-status[data-state=saving] .i { animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
/* My Account: sections of rows (label and text on the left, a button on the right) */
.account-section { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.account-row { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 0 0; }
.account-row .sub { margin:2px 0 0; }
.account-row > button { flex:none; }
.signin-foot { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.signin-foot .link-btn { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
/* Bottle details */
.bi-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px 16px; margin:16px 0 4px; }
.bi-facts dt { font-size:12px; color:var(--muted); } .bi-facts dd { margin:2px 0 0; font-weight:600; }
.bi-block { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.bi-block .sub { margin:2px 0 8px; }
.bottle-link { font-size:14px; padding:0; color:var(--ink); text-align:left; }
#bottleRows td.num .icon-btn + .icon-btn { margin-left:2px; }
.versions { max-height:50vh; overflow:auto; border:1px solid var(--line); border-radius:12px; }
.versions .version { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--line); }
.versions .version:first-child { border-top:0; }
.versions .version.current { background:var(--card); }
.example-banner { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; justify-content:space-between; margin:0 0 20px;
padding:12px 16px; border-radius:12px; border:1px solid var(--red-line); background:var(--red-soft); font-size:14px; }
#feedbackForm textarea { width:100%; resize:vertical; font:inherit; background:var(--bg); color:var(--ink); border:1px solid var(--line-2);
border-radius:10px; padding:10px 12px; }
.add-row { display:flex; gap:8px; flex-wrap:wrap; }
.add-row .btn-add { flex:1 1 220px; }
.prep-line select { max-width:260px; }
.unit-amt { display:inline-flex; align-items:center; gap:6px; margin-left:8px; color:var(--muted); font-size:13px; }
.unit-amt input { width:72px; }
.unit-amt select { width:auto; padding-right:22px; }
#otherRows .prep-line select[data-f=prepId] { max-width:240px; }
#prepTotal { font-size:13.5px; color:var(--muted); }
.pour-presets { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 0; }
.pour-presets:empty { display:none; }
.chip { padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600; }
.kind-tag { margin-left:8px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.04em;
text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); vertical-align:2px; }
.checklist { margin:0 0 20px; padding:14px 18px; }
.checklist-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.checklist ol { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:6px; }
.checklist li button { width:100%; display:flex; align-items:center; justify-content:flex-start; gap:10px; text-align:left; padding:9px 12px; font-weight:500; }
.checklist li.done button { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-2); }
.checklist li.done .i { color:var(--good); }
.dot-num { width:20px; height:20px; flex:none; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; font-weight:700;
background:var(--red-soft); color:var(--red-text); border:1px solid var(--red-line); }
.help { width:18px; height:18px; padding:0; margin-left:4px; border-radius:50%; font-size:11px; font-weight:700; line-height:1;
display:inline-grid; place-items:center; vertical-align:1px; color:var(--muted); background:var(--card-2); border:1px solid var(--line-2); box-shadow:none; }
.help:hover { color:var(--ink); }
.help-pop { position:fixed; z-index:1000; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.45; font-weight:400;
text-transform:none; letter-spacing:0; color:var(--ink); background:var(--raised-2); border:1px solid var(--line-2); box-shadow:0 12px 30px rgba(0,0,0,.5); }
/* Build: drink list + editor. The list sits beside the editor on wide screens, and is a slide-in panel otherwise. */
.build-layout { display:block; }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 16px; }
.crumb-path { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.crumb-path .sep, #crumbPath .sep { color:var(--faint); }
#crumbPath { display:inline-flex; align-items:center; gap:8px; color:var(--muted); }
#crumbPath strong { color:var(--ink); }
.back-link { padding-left:6px; }
.drink-list { position:fixed; top:0; left:0; bottom:0; z-index:60; width:min(340px, 88vw); border-radius:0 16px 16px 0; overflow:auto;
transform:translateX(-105%); transition:transform .2s ease; margin:0; padding:16px; }
.drink-list.open { transform:none; }
.dl-backdrop { position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.55); }
.dl-head { display:flex; align-items:center; gap:10px; }
.dl-new { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
#dlSearch { width:100%; margin:0 0 10px; text-align:left; }
.dl-items { display:flex; flex-direction:column; gap:2px; }
.dl-group { margin:10px 4px 4px; }
.dl-item { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:8px 10px;
border:1px solid transparent; background:transparent; box-shadow:none; border-radius:9px; font-weight:500; }
.dl-item:hover { background:var(--card-2); }
.dl-item.current { background:var(--red-soft); border-color:var(--red-line); }
.dl-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.dl-price { flex:none; color:var(--muted); font-variant-numeric:tabular-nums; font-size:13px; }
.dl-price.warn { color:var(--warn); }
.dl-item.blank { font-style:italic; color:var(--muted); }
#menuNewDrink { width:auto; }
@media (min-width: 1360px) {
main:has(#tab-builder:not(.hidden)) { max-width:1500px; } /* room for the list, the editor and the price panel */
main:has(#tab-overview:not(.hidden) #menuTable:not(.no-sales)) { max-width:1500px; } /* room for Sold and Profit made */
#buildNewDrink { display:none; }
.build-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start; }
.drink-list { position:sticky; top:86px; transform:none; transition:none; width:auto; max-height:calc(100vh - 110px);
border-radius:var(--radius); z-index:auto; }
.dl-close, #openDrinkList, .dl-backdrop { display:none !important; }
}
.order-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin:0 0 20px; padding:12px 16px; }
.soon { opacity:.75; }
.soon-tag { margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.03em;
color:var(--warn); background:var(--warn-soft); border:1px solid rgba(245,181,68,.3); white-space:nowrap; }
.soon-list { margin:0 0 4px; padding-left:20px; color:var(--muted); font-size:14px; }
.soon-list li { margin:6px 0; }
.lbl-short { display:none; }
.account-note { margin:14px 0 0; font-size:13px; color:var(--muted); }
.account-status { display:flex; gap:8px; align-items:flex-start; padding:12px 14px; border-radius:10px; background:var(--card); border:1px solid var(--line-2); }
.account-status .i { margin-top:3px; }
#syncExport { padding:0; border:0; background:none; box-shadow:none; color:var(--red-text); font:inherit; text-decoration:underline; text-underline-offset:3px; }
main { max-width:1200px; margin:0 auto; padding:32px 24px 64px; }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin:32px 0 12px; font-weight:600; }
h2:first-child { margin-top:0; }
.card { background:linear-gradient(180deg, var(--card-2), var(--card)); border:1px solid var(--line); border-radius:var(--radius);
padding:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.3); }
.muted { color:var(--muted); }
.hidden { display:none !important; }
/* ---------- controls ---------- */
input, select, button { font:inherit; color:var(--ink); }
input, select { background:var(--bg); border:1px solid var(--line-2); border-radius:9px; padding:8px 11px;
transition:border-color .15s, box-shadow .15s, background .15s; }
input:hover, select:hover { border-color:rgba(255,255,255,.18); }
input:focus, select:focus { outline:none; border-color:var(--red-text); box-shadow:0 0 0 3px var(--red-soft); }
input::placeholder { color:var(--faint); }
input[type=number] { width:110px; text-align:right; }
input.invalid { border-color:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }
select { cursor:pointer; }
button { display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; border:1px solid var(--line-2);
background:var(--card-2); border-radius:9px; padding:8px 14px; font-weight:500;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.3);
transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
button:hover { background:var(--raised); border-color:rgba(255,255,255,.18); }
button:focus-visible { outline:none; box-shadow:0 0 0 3px var(--red-soft); border-color:var(--red-text); }
.btn-red { color:#fff; border-color:transparent; background:linear-gradient(180deg, #d9283e, #b3172b);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.5), 0 8px 22px -10px rgba(200,30,51,.75); }
.btn-red:hover { background:linear-gradient(180deg, #e5354b, #c21d31); border-color:transparent; }
button:disabled, button:disabled:hover { opacity:.45; cursor:not-allowed; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--muted); box-shadow:none; }
.btn-ghost:hover { color:var(--ink); background:var(--raised); border-color:transparent; }
.btn-add { width:100%; margin-top:12px; padding:10px; background:transparent; border:1px dashed var(--line-2); color:var(--muted); box-shadow:none; }
.btn-add:hover { border-color:var(--red-line); color:var(--ink); background:var(--red-soft); }
.icon-btn { width:32px; height:32px; padding:0; background:transparent; border-color:transparent; color:var(--faint); box-shadow:none; }
.icon-btn:hover { color:var(--red-text); background:var(--red-soft); border-color:transparent; }
.btn-lg { padding:11px 20px; font-size:15px; }
/* ---------- tables ---------- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 10px; white-space:nowrap; }
th { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:500; border-bottom:1px solid var(--line-2); }
td { border-bottom:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:rgba(255,255,255,.018); }
td.num, th.num { text-align:right; }
td.strong { font-weight:600; }
input.name { width:100%; min-width:180px; }
/* ---------- empty states ---------- */
.empty { text-align:center; padding:64px 20px; }
.empty::before { content:""; display:block; width:52px; height:52px; margin:0 auto 18px; border-radius:14px; border:1px solid var(--line-2);
background:url("/favicon.svg") center / 26px no-repeat, linear-gradient(180deg, var(--raised), var(--card-2));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -10px rgba(200,30,51,.5); }
.empty .big { font-size:21px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px; }
.empty p { margin:0 auto 24px; color:var(--muted); max-width:520px; }
.empty button + button { margin-left:8px; }
.empty p .link-btn { margin:0 !important; } /* links inside a sentence aren't spaced like buttons */
/* ---------- builder ---------- */
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px; }
.toolbar select { min-width:220px; }
.toolbar .spacer { flex:1; }
.title-row { display:flex; flex-wrap:wrap; gap:16px; align-items:end; }
.title-row label, .field { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); font-weight:500; }
#cName { font-size:21px; font-weight:600; letter-spacing:-.02em; padding:10px 12px; min-width:260px; }
.builder-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
.summary { position:sticky; top:86px; background:radial-gradient(320px 180px at 50% 0%, rgba(200,30,51,.12), transparent 70%), linear-gradient(180deg, var(--card-2), var(--card)); }
.summary .label { font-size:11px; color:var(--faint); font-weight:500; text-transform:uppercase; letter-spacing:.09em; }
.price { font-size:46px; font-weight:600; color:var(--ink); letter-spacing:-.045em; line-height:1.1; margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.sub { font-size:12.5px; color:var(--muted); }
.kv { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.kv .v { font-weight:600; font-size:16px; }
.summary hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.summary input { width:120px; }
.pill { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:500; }
.pill.good { background:var(--good-soft); color:var(--good); box-shadow:inset 0 0 0 1px rgba(62,207,142,.22); }
.pill.warn { background:var(--warn-soft); color:var(--warn); box-shadow:inset 0 0 0 1px rgba(245,181,68,.22); }
.good { color:var(--good); } .warn { color:var(--warn); }
/* Staff logins (team.js): what each role sees */
.counter-intro, .owner-only-note { display:none; }
body:is([data-role=manager], [data-role=counter]) :is(.owner-only, [data-example]) { display:none !important; }
body[data-role=counter] .cards-count .not-staff, body[data-role=counter] label:has(#onlyBelow) { display:none; }
body[data-role=counter] table.cards.cards-count tr { grid-template-columns:1fr auto; grid-template-areas:"name hand"; }
body[data-role=counter] .cards-count td:nth-child(2) { grid-area:hand; }
.cards-count tr.counted td:first-child { box-shadow:inset 3px 0 var(--good); }
.my-counts { margin-top:14px; }
.my-counts.hidden { display:none; }
.team-holder .team-email { font-weight:600; }
body[data-role=manager] .owner-only-note { display:block; }
.role-banner { display:flex; gap:12px 18px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; }
.role-banner.hidden { display:none; }
.role-banner p { margin:4px 0 0; }
.role-choices { display:flex; gap:8px; flex-wrap:wrap; }
.add-owner { margin:0 0 10px; padding:10px 12px; border-radius:10px; border:1px dashed var(--line-2); font-size:13.5px; color:var(--muted); }
.add-owner.hidden { display:none; }
.team-role { flex:none; }
body[data-role=counter] .counter-intro { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
nav button[data-tab=rnd] { display:none; }
body:is([data-role=counter]) nav button[data-tab=rnd] { display:inline-flex; }
body[data-role=counter] :is(nav button:not([data-tab=inventory]):not([data-tab=rnd]), #checklist, #exampleBanner, #topLosses, #staffCounts,
#invSwitch, #varianceCard, #receiveCard, #inventoryValue, #downloadInventory, #openSales, #useAllPars,
#openArrange, #safetyField, #usageNote, #parExplainer, #onlyWithDistField, #countRows [data-offers], #countRows [data-use-par], #bottlesEmpty, [data-inv-panel=bottles], #yourBarSection) { display:none !important; }
.counter-intro p { margin:4px 0 0; }
.staff-inbox .inbox-row { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line); margin-top:10px; }
.inbox-actions { display:flex; gap:8px; }
.dl-item.suggestion { border-style:dashed; }
.dl-item.rnd .dl-name::before, .dl-item.suggestion .dl-name::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#7aa7ff; margin-right:7px; vertical-align:middle; }
.rnd-note { margin:-6px 0 14px; padding:10px 14px; border-radius:10px; background:var(--card); border:1px dashed var(--line-2); font-size:13.5px; color:var(--muted); }
nav button.has-news, #openDrinkList.has-news { position:relative; }
nav button.has-news::after, #openDrinkList.has-news::after { content:""; position:absolute; top:6px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--red-text); }
.team-working, .team-section { padding:14px 0 0; margin-top:14px; border-top:1px solid var(--line); }
.team-working { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:14px; }
.team-working.hidden, .team-section.hidden { display:none; }
.team-row { display:flex; gap:8px; align-items:center; padding:6px 0; }
.team-email { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.team-add { display:flex; gap:8px; margin-top:8px; }
.team-add input { flex:1; min-width:0; text-align:left; }
.bar-choices { display:grid; gap:8px; }
.bar-choice { display:flex; gap:12px; align-items:center; text-align:left; padding:12px 14px; justify-content:flex-start; }
.bar-choice > span { display:flex; flex-direction:column; }
.field-label { font-size:13px; font-weight:500; color:var(--muted); margin:14px 0 6px; }
.suggest-lines { display:grid; gap:8px; margin-bottom:8px; }
.suggest-line { display:flex; gap:8px; align-items:center; }
.suggest-line select { flex:1; min-width:0; }
.suggest-line input { width:80px; }
.form-dialog textarea { width:100%; margin-top:6px; resize:vertical; font:inherit; background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; }
.rnd-intro { display:flex; gap:14px; align-items:flex-start; }
.rnd-intro > .i { width:26px; height:26px; color:var(--red-text); flex:none; margin-top:2px; }
.rnd-intro p { margin:4px 0 0; }
.rnd-form { display:grid; gap:14px; max-width:640px; }
.rnd-form .field { display:grid; gap:6px; }
.rnd-form .field-label { margin:0; }
.rnd-form > .btn-sm { justify-self:start; }
.rnd-form .actions { display:flex; justify-content:flex-end; gap:8px; }
.rnd-form textarea { width:100%; resize:vertical; font:inherit; background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; }
.my-suggestions .my-sg:first-child { border-top:0; }
.my-suggestions .my-sg { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:14px; }
.sg-lines { width:100%; border-collapse:collapse; margin-bottom:10px; }
.sg-lines td { padding:6px 4px; border-top:1px solid var(--line); font-size:14px; }
.sg-lines td.amt { width:70px; color:var(--muted); }
.sg-note { font-style:italic; color:var(--muted); }
/* Inventory tab switcher: Count · Variance · Receive */
.inv-switch { display:flex; gap:4px; padding:4px; margin-bottom:18px; background:var(--card); border:1px solid var(--line); border-radius:12px; width:max-content; max-width:100%; }
.inv-switch button { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--muted); padding:8px 16px; border-radius:9px; font-weight:500; box-shadow:none; }
.inv-switch button[aria-selected=true] { background:var(--card-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.inv-switch button[aria-selected=true] .i { color:var(--red-text); }
.inv-badge { white-space:nowrap; margin-left:2px; padding:1px 7px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--red-soft); color:var(--red-text); font-variant-numeric:tabular-nums; }
@media (max-width:600px) { .inv-switch { width:100%; } .inv-switch button { flex:1 1 auto; justify-content:center; padding:8px 6px; gap:5px; font-size:14px; } .inv-switch .i { display:none; } }
/* Sign in window: Continue with Google (Google's button guidelines: white, the G mark, their wording) */
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 16px; border-radius:10px;
background:#fff; color:#1f1f1f; border:1px solid #dadce0; font-weight:500; font-size:15px; box-shadow:none; }
.btn-google:hover { background:#f6f8fa; color:#1f1f1f; }
.btn-google:disabled { opacity:.6; }
.g-logo { width:18px; height:18px; flex:none; }
.auth-mode { display:flex; gap:4px; padding:4px; margin-bottom:14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
.auth-mode button { flex:1; border:0; background:transparent; color:var(--muted); padding:7px 10px; border-radius:7px; font-weight:500; box-shadow:none; }
.auth-mode button[aria-selected=true] { background:var(--card-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.auth-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.auth-links .link-btn { padding:0; font-size:13px; }
.or-line { display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--faint); font-size:12.5px; }
.or-line::before, .or-line::after { content:""; flex:1; border-top:1px solid var(--line); }
/* Reviewing a staff count */
.cards-review tr.off td:not(.cr-use) { opacity:.45; }
.cards-review tr.big [data-diff] { color:var(--warn); font-weight:600; }
.cards-review input[data-n] { width:90px; }
.cards-review .flag { margin-top:2px; }
@media (max-width: 600px) {
table.cards.cards-review tr { grid-template-columns:auto 1fr 1fr 1fr; grid-template-areas:"use name name name" ". cnt now diff"; }
.cards-review td:nth-child(1) { grid-area:use; } .cards-review td:nth-child(2) { grid-area:name; }
.cards-review td:nth-child(3) { grid-area:cnt; } .cards-review td:nth-child(4) { grid-area:now; } .cards-review td:nth-child(5) { grid-area:diff; }
.cards-review input[data-n] { width:100%; }
}
/* Coming soon: get notified */
.notify-box { margin:16px 0 0; padding:14px 16px; border-radius:12px; border:1px solid var(--line-2); background:var(--card); }
.notify-form { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.notify-form input { flex:1 1 200px; min-width:0; text-align:left; }
.pill.bad { background:var(--red-soft); color:var(--red-text); box-shadow:inset 0 0 0 1px var(--red-line); }
.bad-text { color:var(--red-text); }
/* Menu tab: sales columns appear once sales are imported; menu-mix labels sit under the status pill */
.no-sales .sales-col { display:none; }
.mix-tag { display:block; width:max-content; margin-top:4px; font-size:11px; color:var(--muted); }
.mix-tag::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; background:var(--faint); }
.mix-star::before { background:var(--good); } .mix-workhorse::before { background:var(--warn); }
.mix-puzzle::before { background:#7aa7ff; } .mix-dog::before { background:var(--red-text); }
/* Inventory tab: Top losses card and Variance */
.losses .k { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); }
.losses .big { font-size:24px; font-weight:600; letter-spacing:-.03em; margin:4px 0 2px; color:var(--red-text); font-variant-numeric:tabular-nums; }
.losses-head { display:flex; gap:10px; align-items:center; }
.losses-head > .i { width:22px; height:22px; flex:none; }
.losses-list { list-style:none; margin:12px 0 0; padding:0; }
.losses-list li { padding:10px 0; border-top:1px solid var(--line); }
.ll-main { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.ll-main .link-btn { padding:0; font-weight:600; font-size:14.5px; }
.ll-amt { font-weight:600; font-variant-numeric:tabular-nums; color:var(--red-text); }
.variance-empty p { margin:4px 0 12px; color:var(--muted); }
.cards-variance tr.problem td:first-child { box-shadow:inset 3px 0 var(--red-text); }
.cards-variance tr.watch td:first-child, .cards-variance tr.under td:first-child { box-shadow:inset 3px 0 var(--warn); }
@keyframes flash { from { background:var(--red-soft); } to { background:transparent; } }
tr.flash td { animation:flash 1.6s ease-out; }
/* ---------- overview ---------- */
tr.cat-head td { padding:24px 10px 8px; border-bottom:1px solid var(--line-2); font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.1em; color:var(--red-text); }
tbody tr.cat-head:first-child td { padding-top:12px; }
tr.cat-head:hover { background:transparent; }
tr.cat-head .count { color:var(--faint); font-weight:500; margin-left:6px; }
#bottleRows select { max-width:220px; }
#liquorRows input[data-f=pourOz] { width:80px; }
.unit { display:inline-block; width:48px; text-align:left; margin-left:6px; font-size:12px; color:var(--muted); }
/* searchable bottle picker */
.bottle-pick { display:flex; justify-content:space-between; align-items:center; width:100%; min-width:200px; text-align:left; font-weight:500; }
.bottle-pick::after { content:""; width:8px; height:8px; margin:0 2px 3px 10px; border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint); transform:rotate(45deg); }
.bottle-pick .ph { color:var(--faint); }
#picker { position:absolute; z-index:50; background:var(--card-2); border:1px solid var(--line-2); border-radius:12px; padding:8px;
box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); animation:fadeUp .15s ease-out; }
#picker { display:flex; flex-direction:column; }
#picker input { width:100%; margin-bottom:6px; flex:none; }
#pickerList { min-height:0; flex:1 1 auto; }
.smart-hidden { position:absolute !important; opacity:0; pointer-events:none; width:1px !important; height:1px; overflow:hidden; }
.smart-pick { max-width:100%; }
.pk-item.current { font-weight:600; }
#bottleSearch { min-width:220px; flex:0 1 300px; }
#pickerList { max-height:300px; overflow-y:auto; }
.pk-group { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--red-text); padding:8px 10px 4px; }
.pk-item { display:flex; justify-content:space-between; gap:12px; padding:7px 10px; border-radius:8px; cursor:pointer; }
.pk-item:hover { background:var(--raised); }
.pk-item.active { background:var(--red-soft); }
.pk-item .m { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.pk-item.new { color:var(--red-text); font-weight:600; margin-top:4px; }
.pk-empty { padding:10px; color:var(--muted); font-size:13px; }
.pk-item .cat-hint { color:var(--muted); font-size:12px; white-space:nowrap; }
.suggest { position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:5; background:var(--card-2); border:1px solid var(--line-2);
border-radius:12px; padding:6px; max-height:230px; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.7);
color:var(--ink); font-size:14px; font-weight:500; animation:fadeUp .12s ease-out; }
.suggest b, #pickerList b { color:var(--red-text); font-weight:700; }
/* menu summary cards */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:18px; }
.stat { background:linear-gradient(180deg, var(--card-2), var(--card)); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
min-width:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.stat .k { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); }
.stat .v { font-size:27px; font-weight:600; letter-spacing:-.035em; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.stat .s { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
th[data-sort] { cursor:pointer; user-select:none; }
th[data-sort]:hover { color:var(--ink); }
th.sorted { color:var(--red-text); }
/* Menu table: two-line headings (e.g. "Profit / drink") so every column fits next to the sales columns */
.cards-menu th { white-space:normal; vertical-align:bottom; line-height:1.35; }
th.sorted::after { content:" ↓"; }
th.sorted.asc::after { content:" ↑"; }
#overviewRows tr { cursor:pointer; }
#overviewRows tr td:first-child { border-left:3px solid transparent; }
#overviewRows tr.below td:first-child { border-left-color:var(--warn); }
#overviewRows tr:hover td:first-child { color:var(--red-text); }
/* ---------- modal & toast ---------- */
dialog { background:linear-gradient(180deg, var(--card-2), var(--card)); color:var(--ink); border:1px solid var(--line-2); border-radius:18px;
padding:26px; width:min(440px, 92vw); box-shadow:0 40px 100px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
dialog::backdrop { background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
dialog h3 { margin:0 0 18px; font-size:18px; font-weight:600; letter-spacing:-.02em; }
dialog .fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
dialog .fields .field:first-child { grid-column:1 / -1; }
#bottleDialog input, #bottleDialog select { width:100% !important; text-align:left !important; }
dialog .actions .spacer { flex:1; }
/* supplier price import */
dialog.wide { width:min(1120px, 96vw); max-height:92vh; overflow-y:auto; }
dialog h4 { margin:24px 0 10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
#impText, #salesText, #bimpText { width:100%; min-height:200px; resize:vertical; font:13px/1.5 ui-monospace, "Cascadia Mono", Menlo, monospace;
background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:10px; padding:12px; }
#impText:focus, #salesText:focus, #bimpText:focus { outline:none; border-color:var(--red-text); box-shadow:0 0 0 3px var(--red-soft); }
.btn-like { display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid var(--line-2); background:var(--card-2);
border-radius:9px; padding:8px 14px; font-weight:500; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.btn-like:hover { background:var(--raised); border-color:rgba(255,255,255,.18); }
.btn-like.btn-red { color:#fff; border-color:transparent; background:linear-gradient(180deg, #d9283e, #b3172b); }
.btn-like.btn-red:hover { background:linear-gradient(180deg, #e5354b, #c21d31); }
.imp-map { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:end; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:12px; margin-bottom:14px; }
.imp-map select { background:var(--card); min-width:160px; }
.imp-map input[type=number] { width:80px; background:var(--card); }
.check { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding-bottom:9px; cursor:pointer; }
.check input, #impRows input[type=checkbox] { width:16px; height:16px; accent-color:var(--red-text); }
.imp-table { max-height:40vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.imp-table th { position:sticky; top:0; background:var(--card); z-index:1; }
.imp-table select { max-width:230px; }
#impRows tr.off td, #bimpRows tr.off td { opacity:.5; }
#bimpRows tr.off td:first-child { opacity:1; }
#impRows tr.off td:first-child, #impRows tr.off td:nth-child(3) { opacity:1; }
.flag { font-size:12px; color:var(--warn); white-space:normal; min-width:160px; }
.up { color:var(--warn); } .down { color:var(--good); }
.usage-bar { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:10px 12px; margin:0 0 10px;
background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.usage-bar .sub { flex:1; min-width:200px; }
.usage-bar .inline-field input { width:64px; }
.sug { display:inline-flex; align-items:center; gap:6px; }
#salesText { min-height:110px; height:110px; }
#salesRows select { max-width:240px; }
#salesRows input[type=number] { width:70px; }
.receive-row { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.receive-row p { margin:2px 0 0; }
#rcvRows input[type=number] { width:84px; }
#rcvRows input[type=checkbox] { width:16px; height:16px; accent-color:var(--red-text); }
#rcvRows tr.off td { opacity:.5; }
#rcvRows tr.off td:first-child { opacity:1; }
.rcv-new { display:grid; gap:6px; margin-top:6px; }
.rcv-new input, .rcv-new select { width:100%; max-width:230px; }
@media (max-width: 600px) { /* one card per invoice line: the phone is where invoices get scanned */
.rcv-table { max-height:none; border:0; overflow:visible; }
.rcv-table thead { display:none; }
.rcv-table table, .rcv-table tbody { display:block; }
#rcvRows tr { display:grid; grid-template-columns:24px repeat(3, minmax(0, 1fr)); gap:10px; padding:14px 0; border-bottom:1px solid var(--line); }
#rcvRows td { display:block; padding:0; border:0; text-align:left; }
#rcvRows td:nth-child(2) { grid-column:2 / -1; }
#rcvRows td:nth-child(3) { grid-column:1 / -1; }
#rcvRows td:nth-child(4) { grid-column:1 / 3; }
#rcvRows td[data-label]::before { content:attr(data-label); display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
#rcvRows select, .rcv-new input, .rcv-new select { max-width:none; width:100%; }
#rcvRows input[type=number] { width:100%; }
}
.scan-guide { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 16px; }
.scan-guide > div { padding:12px 14px; border-radius:12px; border:1px solid var(--line-2); background:var(--card); }
.scan-guide h4 { margin:0 0 6px; display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.scan-guide .ok h4 { color:var(--good); } .scan-guide .no h4 { color:var(--warn); }
.scan-guide ul { margin:0; padding-left:18px; font-size:13.5px; color:var(--muted); }
.scan-guide li { margin:3px 0; }
.scan-callout { padding:12px 14px; border-radius:12px; border:1px solid var(--red-line); background:var(--red-soft); margin:0 0 4px; }
.scan-callout p { margin:0 0 10px; }
.scan-busy { text-align:center; padding:28px 0 12px; }
.spinner { width:34px; height:34px; margin:0 auto 14px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--red-text);
animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.scan-error { padding:12px 14px; border-radius:12px; border:1px solid rgba(245,181,68,.35); background:var(--warn-soft); color:var(--warn); }
.scan-error ul { margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:13.5px; }
#backupDialog .backup-row { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); }
#backupDialog .backup-row p { margin:2px 0 0; }
#backupDialog .backup-row > :last-child { white-space:nowrap; flex:none; }
@media (max-width: 600px) {
.scan-guide { grid-template-columns:1fr; } #backupDialog .backup-row { flex-direction:column; }
#bottlesTable > .toolbar { display:grid; grid-template-columns:1fr; }
#bottlesTable > .toolbar .spacer { display:none; }
#bottlesTable > .toolbar > span:first-child { order:-2; } #bottlesTable > .toolbar [data-scan] { order:-1; }
}
.rcv-check { padding:10px 12px; border-radius:10px; margin:0 0 12px; font-size:13px; border:1px solid var(--line-2); background:var(--card); }
.rcv-check.warn { color:var(--warn); border-color:rgba(245,181,68,.35); background:var(--warn-soft); }
.trend { font-size:11px; font-weight:600; margin-top:2px; cursor:help; }
.trend.up { color:var(--warn); } .trend.down { color:var(--good); }
dialog .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
#toast { position:fixed; right:20px; bottom:20px; max-width:380px; background:var(--raised); border:1px solid var(--line-2);
border-radius:12px; padding:12px 16px; box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); font-size:14px;
transform:translateY(20px); opacity:0; pointer-events:none; transition:transform .2s, opacity .2s; white-space:pre-line; }
#toast.show { transform:none; opacity:1; pointer-events:auto; }
#toast button { margin-left:12px; padding:4px 12px; background:var(--card-2); color:var(--ink); }
#toast button:hover { background:var(--red); border-color:transparent; color:#fff; }
/* ---------- motion ---------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes flash { from { background:var(--red-soft); } to { background:transparent; } }
@keyframes bump { 0% { transform:scale(1); } 40% { transform:scale(1.05); } 100% { transform:scale(1); } }
section.enter { animation:fadeUp .22s ease-out; }
tr.row-in { animation:fadeUp .25s ease-out; }
tr.flash td { animation:flash 1.4s ease-out; }
.price { transform-origin:left center; }
.price.bump { animation:bump .3s ease-out; }
footer { text-align:center; color:var(--faint); font-size:12px; padding:0 24px 32px; }
footer a { color:var(--muted); }
@media (max-width: 900px) {
.builder-grid { grid-template-columns:minmax(0,1fr); }
.summary { position:static; }
}
@media (max-width: 600px) {
header { padding:12px 16px; }
.header-right .btn-ghost { flex-direction:column; gap:2px; padding:4px 6px; font-size:10.5px; font-weight:500; min-width:52px; } /* icon with a short label under it */
.header-right .btn-ghost .i { width:18px; height:18px; }
.cloud-status { flex-direction:column; gap:2px; padding:4px 6px; font-size:10.5px; font-weight:500; min-width:52px; }
.cloud-status .i { width:18px; height:18px; }
.lbl-long { display:none; } .lbl-short { display:inline !important; }
#savedFlag { display:none; } /* the save status in the header says it on phones */
#menuStats { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:0 -16px 14px; padding:0 16px 4px; scrollbar-width:none; }
#menuStats .stat { flex:0 0 44%; scroll-snap-align:start; grid-column:auto !important; }
#toast { left:12px; right:12px; bottom:12px; max-width:none; font-size:13.5px; }
main { padding:20px 16px 48px; }
nav { order:3; width:100%; justify-content:space-between; }
nav button { flex:1 1 0; min-width:0; flex-direction:column; gap:3px; padding:6px 2px; font-size:11.5px; } /* four tabs: icon above label */
nav button .i { width:18px; height:18px; }
.card { padding:16px; }
#cName { min-width:0; width:100%; }
.title-row label:first-child { flex:1 1 100%; }
/* Tables become stacked cards: one grid per row, small labels from data-label. */
.desktop-only { display:none !important; }
.phone-only { display:block !important; }
table.cards thead { display:none; }
table.cards, table.cards tbody { display:block; }
table.cards tr { display:grid; gap:10px 12px; align-items:end; padding:14px 0; border-bottom:1px solid var(--line); }
table.cards tbody tr:last-child { border-bottom:0; }
table.cards td { display:block; border:0; padding:0; min-width:0; white-space:normal; text-align:left; }
table.cards td[data-label]::before { content:attr(data-label); display:block; margin-bottom:4px; font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
table.cards input, table.cards select, table.cards .bottle-pick { width:100%; min-width:0; max-width:none; }
table.cards tr.cat-head { display:block; padding:18px 0 6px; }
table.cards tr.cat-head td { padding:0; }
table.cards td[colspan] { grid-column:1 / -1; }
.cards-bottles tr { grid-template-columns:1fr 1fr 1fr auto; grid-template-areas:"name name name del" "cat cat cat cat" "cost ml cpo cpo"; }
.cards-bottles td:nth-child(1) { grid-area:name; } .cards-bottles td:nth-child(2) { grid-area:cat; }
.cards-bottles td:nth-child(3) { grid-area:cost; } .cards-bottles td:nth-child(4) { grid-area:ml; }
.cards-bottles td:nth-child(5) { grid-area:cpo; font-size:16px; } .cards-bottles td:nth-child(6) { grid-area:del; }
.cards-liquor tr { grid-template-columns:1fr 1fr auto; grid-template-areas:"bottle bottle del" "pour line line"; }
.cards-liquor td:nth-child(1) { grid-area:bottle; } .cards-liquor td:nth-child(2), .cards-liquor td:nth-child(3) { display:none; }
.cards-liquor td:nth-child(4) { grid-area:pour; } .cards-liquor td:nth-child(5) { grid-area:line; font-size:16px; text-align:right; }
.cards-liquor td:nth-child(6) { grid-area:del; }
.cards-liquor td:nth-child(4) input { width:calc(100% - 60px); }
.cards-others tr { grid-template-columns:auto auto 1fr auto; grid-template-areas:"name name name del" "amt unit line line"; }
.cards-others td:nth-child(1) { grid-area:name; } .cards-others td:nth-child(2) { grid-area:amt; }
.cards-others td:nth-child(3) { grid-area:unit; } .cards-others td:nth-child(4) { grid-area:line; text-align:right; font-size:16px; }
.cards-others td:nth-child(5) { grid-area:del; }
.cards-others .unit-amt { margin-left:0; }
#bottleRows select { max-width:none; }
.stats { grid-template-columns:1fr 1fr; gap:10px; }
.stat { padding:12px 14px; }
.stat .v { font-size:22px; }
.stat:last-child:nth-child(odd) { grid-column:1 / -1; }
table.cards.cards-menu tr { grid-template-columns:repeat(3, 1fr) auto; grid-template-areas:"name name status del" "cost sugg menu ." "margin profit pour ." "sold made . ."; padding-left:12px; }
.cards-menu tr.below { box-shadow:inset 3px 0 var(--warn); }
.cards-menu td:nth-child(1) { grid-area:name; font-size:16px; border-left:0 !important; }
.cards-menu td:nth-child(2) { grid-area:cost; } .cards-menu td:nth-child(3) { display:none; }
.cards-menu td:nth-child(4) { grid-area:sugg; } .cards-menu td:nth-child(5) { grid-area:menu; }
.cards-menu td:nth-child(6) { grid-area:margin; } .cards-menu td:nth-child(7) { grid-area:pour; }
.cards-menu td:nth-child(8) { grid-area:profit; } .cards-menu td:nth-child(9) { grid-area:sold; } .cards-menu td:nth-child(10) { grid-area:made; }
.cards-menu td:nth-child(11) { grid-area:status; text-align:right; align-self:start; } .cards-menu td:nth-child(11) .mix-tag { margin-left:auto; }
.cards-menu td:nth-child(12) { grid-area:del; align-self:start; }
table.cards.cards-variance tr { padding-left:12px; grid-template-columns:repeat(4, 1fr); grid-template-areas:"name name name status" "start recv end lost" "act exp diff diff"; }
.cards-variance td:nth-child(1) { grid-area:name; font-size:16px; box-shadow:none !important; } .cards-variance td:nth-child(2) { grid-area:start; }
.cards-variance td:nth-child(3) { grid-area:recv; } .cards-variance td:nth-child(4) { grid-area:end; }
.cards-variance td:nth-child(5) { grid-area:act; } .cards-variance td:nth-child(6) { grid-area:exp; }
.cards-variance td:nth-child(7) { grid-area:diff; } .cards-variance td:nth-child(8) { grid-area:lost; }
.cards-variance td:nth-child(9) { grid-area:status; text-align:right; align-self:start; }
.cards-variance tr.problem { box-shadow:inset 3px 0 var(--red-text); } .cards-variance tr.watch, .cards-variance tr.under { box-shadow:inset 3px 0 var(--warn); }
table.cards.cards-count tr { grid-template-columns:repeat(4, 1fr); grid-template-areas:"name name name name" "par hand ord need" "use use sug sug"; }
.cards-count td:nth-child(1) { grid-area:name; } .cards-count td:nth-child(2) { grid-area:par; }
.cards-count td:nth-child(3) { grid-area:hand; } .cards-count td:nth-child(4) { grid-area:ord; }
.cards-count td:nth-child(5) { grid-area:need; } .cards-count td:nth-child(6) { grid-area:use; } .cards-count td:nth-child(7) { grid-area:sug; }
table.cards.cards-order tr { grid-template-columns:1fr 1fr 1fr auto; grid-template-areas:"name name name del" "qty unit line line" "src src src src"; }
.cards-order td:nth-child(1) { grid-area:name; } .cards-order td:nth-child(2) { grid-area:qty; }
.cards-order td:nth-child(3) { grid-area:unit; } .cards-order td:nth-child(4) { grid-area:line; }
.cards-order td:nth-child(5) { grid-area:src; } .cards-order td:nth-child(6) { grid-area:del; }
table.cards.cards-history tr { grid-template-columns:1fr 1fr; grid-template-areas:"dist status" "sent deliv" "items total"; }
.cards-history td:nth-child(1) { grid-area:sent; } .cards-history td:nth-child(2) { grid-area:dist; font-size:16px; }
.cards-history td:nth-child(3) { grid-area:deliv; } .cards-history td:nth-child(4) { grid-area:items; }
.cards-history td:nth-child(5) { grid-area:total; } .cards-history td:nth-child(6) { grid-area:status; text-align:right; }
table.cards.cards-offers tr { grid-template-columns:1fr 1fr 1fr auto; grid-template-areas:"dist dist dist del" "price size unit unit" "sku sku dep dep"; }
.cards-offers td:nth-child(1) { grid-area:dist; } .cards-offers td:nth-child(2) { grid-area:price; }
.cards-offers td:nth-child(3) { grid-area:size; } .cards-offers td:nth-child(4) { grid-area:sku; }
.cards-offers td:nth-child(5) { grid-area:dep; } .cards-offers td:nth-child(6) { grid-area:unit; }
.cards-offers td:nth-child(7) { grid-area:del; }
.order-head { flex-direction:column; }
.order-actions > * { flex:1 1 auto; justify-content:center; }
.dist { grid-template-columns:1fr; }
.inline-field input { width:100%; }
}
.phone-only { display:none; }
/* ---------- ordering ---------- */
.link-btn { background:none; border:0; padding:4px 0 0; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; }
.link-btn:hover { color:var(--red-text); background:none; }
.link-btn.warn { color:var(--warn); }
#bottleRows .link-btn, #countRows .link-btn { display:block; }
.inline-field { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); }
.inline-field input { width:200px; text-align:left; }
.dist-list .dist { display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.dist-actions { display:flex; gap:4px; }
#countSearch { min-width:220px; }
.order-card { margin-bottom:16px; }
.order-card h3 { margin:0; font-size:18px; }
.order-head { display:flex; justify-content:space-between; gap:8px 16px; margin-bottom:10px; }
.deadline { font-size:13px; font-weight:600; color:var(--muted); }
.deadline.soon { color:var(--red-text); }
.cards-order select { max-width:340px; }
.cards-order input[type=number], .cards-count input[type=number] { width:84px; }
.sub.warn { color:var(--warn); }
.meter { height:8px; border-radius:999px; background:var(--raised); overflow:hidden; margin:14px 0 6px; }
.meter > div { height:100%; background:var(--warn); border-radius:999px; }
.meter.met > div { background:var(--good); }
.fix { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin-top:12px; padding:12px 14px;
border-radius:10px; border:1px solid rgba(251,191,36,.35); background:var(--warn-soft); font-size:14px; }
.fix.none { display:block; color:var(--muted); }
.fix b { color:var(--ink); }
.order-totals { margin-top:12px; max-width:360px; margin-left:auto; }
.order-totals .kv { padding:6px 0; font-size:14px; }
.order-totals .kv.grand { font-size:17px; font-weight:800; }
.order-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; justify-content:flex-end; }
.btn-a { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; font-weight:500; text-decoration:none; border:1px solid var(--line-2); }
.unassigned { margin:8px 0 0; padding-left:18px; }
.unassigned li { margin:4px 0; }
.keg-sizes { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--muted); font-weight:600; }
.keg-sizes button { padding:4px 10px; font-size:12px; }
dialog.form-dialog { width:min(560px, 94vw); max-height:92vh; overflow-y:auto; }
dialog.wide-ish { width:min(820px, 96vw); }
.form-dialog .fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-dialog .field.full { grid-column:1 / -1; }
.form-dialog .field input, .form-dialog .field select { width:100%; text-align:left; }
.form-dialog fieldset.days { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 14px; }
.form-dialog fieldset.days legend { padding:0; margin-bottom:6px; }
.form-dialog fieldset.days label, .check-row span { display:flex; align-items:center; gap:6px; color:var(--ink); font-weight:500; font-size:14px; }
.form-dialog input[type=checkbox] { width:16px !important; height:16px; accent-color:var(--red-text); }
#offerBody input[type=number] { width:96px; }
#offerBody input[data-f=sku] { width:110px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
/* ---------- print (spec sheet / menu) ---------- */
#printArea { display:none; }
@media print {
@page { margin:16mm; }
body { background:#fff !important; color:#111; }
body > *:not(#printArea) { display:none !important; }
#printArea { display:block; }
.pr-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:3px solid #ff2d3d; padding-bottom:8px; margin-bottom:14px; }
.pr-head h1 { margin:0; font-size:24px; letter-spacing:-.02em; }
.pr-head div { color:#666; font-size:12px; }
.pr-item, .pr-menu { break-inside:avoid; padding:10px 0 12px; border-bottom:1px solid #ddd; }
.pr-menu { border-bottom:0; padding:8px 0; }
.pr-title { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.pr-title h2 { margin:0 0 6px; font-size:16px; font-weight:700; color:#111; text-transform:none; letter-spacing:0; }
.pr-title span { font-weight:700; }
.pr-section { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#111; margin:22px 0 10px; padding-bottom:4px; border-bottom:1px solid #bbb; }
.pr-spec { width:100%; border-collapse:collapse; font-size:13px; }
.pr-spec td { padding:2px 0; border:0; white-space:normal; }
.pr-spec .amt { width:90px; color:#333; }
.pr-spec .r { text-align:right; color:#555; font-variant-numeric:tabular-nums; }
.pr-foot { margin-top:6px; font-size:12px; color:#555; }
.pr-desc { color:#555; font-size:13px; font-style:italic; }
}
/* ---------- stock take (one item at a time) ---------- */
dialog.stock-dialog { width:min(560px, 96vw); padding:0; }
.stock-top { display:flex; align-items:center; gap:10px; padding:12px 16px; }
.stock-top select { flex:1; min-width:0; }
.stock-progress { height:4px; background:var(--line); }
.stock-progress > div { height:100%; background:var(--red-text); transition:width .2s; }
.stock-card { padding:22px 22px 8px; text-align:center; }
.stock-card h3 { font-size:24px; margin:6px 0 4px; }
.stock-label { margin:22px 0 8px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.stepper { display:flex; align-items:center; justify-content:center; gap:18px; }
.stepper button { width:64px; height:64px; border-radius:16px; font-size:30px; font-weight:500; padding:0; }
.stepper output { min-width:80px; font-size:44px; font-weight:600; font-variant-numeric:tabular-nums; }
.tenths { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; max-width:380px; margin:0 auto; }
.tenths button { height:48px; font-size:17px; font-weight:600; padding:0; }
.tenths button[aria-pressed=true] { background:var(--red); border-color:transparent; color:#fff; }
.stock-total { margin:20px 0 4px; font-size:15px; }
.stock-nav { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:10px; padding:14px 16px 16px; border-top:1px solid var(--line); }
.stock-nav button { height:52px; font-size:16px; justify-content:center; }
@media (max-width: 600px) { dialog.stock-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0;
display:flex; flex-direction:column; } dialog.stock-dialog:not([open]) { display:none; } .stock-card { flex:1; } }
/* ---------- arrange count order (drag to reorder) ---------- */
.sort-list { display:flex; flex-direction:column; gap:6px; }
.sort-row { display:flex; align-items:center; gap:10px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.sort-row .grow { flex:1; min-width:0; white-space:normal; }
.sort-row input[data-rename] { flex:1; min-width:0; text-align:left; }
.sort-row select { max-width:180px; }
.sort-row.dragging { border-color:var(--red-line); box-shadow:0 6px 20px rgba(0,0,0,.45); }
.handle { width:32px; height:32px; padding:0; cursor:grab; touch-action:none; color:var(--faint); background:transparent; border-color:transparent; box-shadow:none; font-size:18px; }
.handle:focus-visible { outline:2px solid var(--red-text); }
.arrange-group { margin:12px 0; }
.arrange-group .cat-label { margin:0 0 6px; }
.cat-label { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--red-text); }
.cat-head .cnt { margin-left:6px; color:var(--faint); font-weight:500; text-transform:none; letter-spacing:0; }
#cGoalNote { font-weight:400; }
@media (max-width: 600px) { /* Menu tab tools: a tidy 2-column grid instead of ragged wrapping */
#tab-overview .card > .toolbar { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
#tab-overview .card > .toolbar #sortPick, #tab-overview .card > .toolbar #salesPeriod { grid-column:1 / -1; max-width:none; }
#tab-overview .card > .toolbar select { width:100%; min-width:0; }
#tab-overview .card > .toolbar .spacer { display:none; }
#tab-overview .card > .toolbar button { justify-content:center; font-size:13px; padding:8px; }
}
#overviewRows td:first-child { white-space:normal; min-width:150px; } /* long names (and a type tag) wrap instead of widening the table */
.kind-tag { display:inline-block; }
@media (max-width: 600px) { /* other ingredients on phones: fixed-size amount, unit and cost boxes so nothing is cut off */
.cards-others .unit-amt { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; }
.cards-others .unit-amt input { width:58px !important; flex:none; padding-left:6px; padding-right:6px; }
.cards-others .unit-amt select { width:90px !important; flex:none; padding-left:10px; }
}
.btn-sm { padding:5px 10px; font-size:12.5px; gap:5px; }
.btn-sm .i { width:14px; height:14px; }
#buildNewDrink { width:auto; }
@media (max-width: 600px) { .checklist li.done { display:none; } } /* phones: only the steps still to do */
.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; }
#overviewRows [data-del-drink] { opacity:.6; } #overviewRows tr:hover [data-del-drink] { opacity:1; }
@media (max-width: 600px) { /* Inventory: usage controls as a compact two-column grid instead of a tall stack */
.usage-bar { display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; padding:10px; }
.usage-bar > .sub:first-child, .usage-bar #inventoryValue { grid-column:1 / -1; }
.usage-bar .btn-ghost { justify-content:flex-start; padding:6px 4px; font-size:13px; }
.usage-bar .inline-field input { width:56px; }
.usage-bar #downloadInventory { order:5; } .usage-bar #inventoryValue { order:9; } .usage-bar #useAllPars { order:10; grid-column:1 / -1; }
}