/* AMC AutoPOS — Workshop looks (sandbox, Oct 2026). Loaded after themes.css.
   workshop       = "Workshop": timber header/rail + the AMC brand, plain clean black-on-white till. The everyday, sell-it-now look.
   workshop-hero  = "Workshop Hero": the full timber & brass presentation. Light timber keys with dark timber edging,
                    brushed-brass action buttons, a paper docket for the order.
   Brass, not gold. Real timber photographed from Andy's own work. Nothing here changes what the app does. */

/* ================= shared ================= */
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) {
  --brass-hi: #ead39a; --brass: #b8964a; --brass-lo: #7a5f26; --brass-ink: #2b1d0c;
  --burnt: #2a1a0f; --timber-edge: #3b2414;
  --wood-light: url("../assets/workshop/timber_light.jpg?v=2");
  --wood-dark: url("../assets/workshop/timber_dark.jpg");
  --wood-strip: url("../assets/workshop/timber_strip.jpg");
  --brass-tex: url("../assets/workshop/brass_brushed.jpg");
}
/* the rail: real timber, the burnt brand up top */
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .side-rail {
  background: linear-gradient(rgba(30,18,10,.18), rgba(30,18,10,.38)), var(--wood-strip) center / cover !important;
  border-right: 3px solid var(--timber-edge) !important;
  box-shadow: inset -6px 0 14px rgba(0,0,0,.35), 4px 0 18px rgba(0,0,0,.18) !important;
}
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .brand-lockup { flex-direction: column; align-items: center; gap: 10px; }
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .brand-lockup img {
  width: 132px !important; max-width: 132px !important; height: 132px; border-radius: 50% !important; filter: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 0 3px rgba(42,26,15,.55) !important;
}
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .brand-lockup::after {
  content: "AMC AutoPOS"; font: 600 21px/1 Futura, "Futura PT", "Century Gothic", "Avenir Next", system-ui, sans-serif; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff1c8 0%, #e2c27a 45%, #b08a3e 58%, #f0d898 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.7));
}
/* brass nav plates */
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .side-rail .mode-button {
  border-radius: 6px !important; border: 1px solid rgba(0,0,0,.35) !important; font-weight: 700 !important;
}
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .side-rail .mode-button:not(.is-active) {
  background: rgba(20,12,6,.42) !important; color: #f3e6c8 !important; -webkit-text-fill-color: #f3e6c8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .side-rail .mode-button.is-active {
  background: linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.08)), var(--brass-tex) center / cover !important;
  color: var(--brass-ink) !important; -webkit-text-fill-color: var(--brass-ink) !important; text-shadow: 0 1px 0 rgba(255,240,200,.55);
  box-shadow: inset 0 1px 0 rgba(255,245,210,.7), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.4) !important;
}
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) #forceUpdateBtn {
  color: #f3e6c8 !important; background: rgba(20,12,6,.42) !important; border-color: rgba(234,211,154,.35) !important;
}
/* the feel of a real key: a short press-down on every button */
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) :is(button, .mode-button, .product-card) { transition: transform .06s ease, box-shadow .06s ease, filter .12s ease; }
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) :is(button, .product-card):active:not(:disabled) { transform: translateY(2px) scale(.99); }

/* ================= Workshop (clean) ================= */
html[data-theme="workshop"]:not(#_) {
  --ink: #1b1611; --muted: #4a4038; --muted-dark: #6b6058;
  --line: rgba(27,22,17,.14); --line-gold: rgba(184,150,74,.45);
  --paper: #faf8f4; --panel: #ffffff; --panel-raised: #f2eee7;
  --accent: #8a6a2c; --accent-strong: #6e5320; --cyan-electric: #8a6a2c;
  --hl: #8a6a2c; --card-a: #ffffff; --card-b: #fbf9f6; --name: #1b1611; --input: #ffffff; --input-ink: #1b1611;
  --shadow: 0 2px 8px rgba(27,22,17,.07);
  --rail: #3b2414; --nav-ink: #f3e6c8;
}
html[data-theme="workshop"]:not(#_) .product-card { border-radius: 10px !important; }
html[data-theme="workshop"]:not(#_) .product-card:hover:not(:disabled) { border-color: var(--brass) !important; }
html[data-theme="workshop"]:not(#_) .category-button.is-active,
html[data-theme="workshop"]:not(#_) .payment-button.is-active,
html[data-theme="workshop"]:not(#_) .tip-mode-btn.is-active {
  background: var(--burnt) !important; color: #fbf3df !important; -webkit-text-fill-color: #fbf3df !important; border-color: var(--burnt) !important; box-shadow: none !important;
}
html[data-theme="workshop"]:not(#_) .checkout-button {
  background: linear-gradient(rgba(255,255,255,.06), rgba(0,0,0,.06)), var(--brass-tex) center / cover !important;
  color: var(--brass-ink) !important; -webkit-text-fill-color: var(--brass-ink) !important; border: 1px solid var(--brass-lo) !important;
  text-shadow: 0 1px 0 rgba(255,240,200,.5); box-shadow: inset 0 1px 0 rgba(255,245,210,.7), 0 3px 8px rgba(0,0,0,.18) !important; font-weight: 800 !important;
}
html[data-theme="workshop"]:not(#_) .grand-total strong,
html[data-theme="workshop"]:not(#_) .grand-total > :last-child { -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }

/* ================= Workshop Hero (timber & brass) ================= */
html[data-theme="workshop-hero"]:not(#_) {
  --ink: #fbf3e3; --muted: #e6d3b3; --muted-dark: #c9b28e;
  --line: rgba(234,211,154,.22); --line-gold: rgba(234,211,154,.45);
  --paper: #2a1a0f; --panel: #241509; --panel-raised: #f6efe2;
  --accent: #b8964a; --accent-strong: #8a6a2c; --cyan-electric: #d8bb78;
  --hl: #d8bb78; --card-a: #e9d7b6; --card-b: #d9c29a; --name: #2a1a0f; --input: #fffaf0; --input-ink: #2a1a0f;
  --rail: #241509; --nav-ink: #f3e6c8;
}
/* the bench: dark timber behind everything */
html[data-theme="workshop-hero"]:not(#_) body,
html[data-theme="workshop-hero"]:not(#_) .app-shell {
  background: linear-gradient(rgba(16,9,4,.30), rgba(16,9,4,.30)), var(--wood-dark) center / 600px auto repeat !important; color: var(--ink);
}
html[data-theme="workshop-hero"]:not(#_) .work-area :is(h1,h2,h3,label,.section-heading) { color: #fbf3e3 !important; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
html[data-theme="workshop-hero"]:not(#_) .work-area :is(input, select) { background: #fffaf0 !important; color: #2a1a0f !important; border: 2px solid var(--timber-edge) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }

/* timber keys: light timber face, dark timber edging, bevelled, the name burnt in */
html[data-theme="workshop-hero"]:not(#_) .product-card {
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%, rgba(60,30,10,.10)), var(--wood-light) center / 300px auto !important;
  border: 6px solid var(--timber-edge) !important; border-image: var(--wood-dark) 30 / 6px round !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 0 rgba(255,250,235,.55), inset 0 -3px 6px rgba(70,40,15,.25), 0 5px 0 #1d1108, 0 8px 14px rgba(0,0,0,.45) !important;
}
html[data-theme="workshop-hero"]:not(#_) .product-card:hover:not(:disabled) { filter: brightness(1.04); border-color: var(--timber-edge) !important; box-shadow: inset 0 2px 0 rgba(255,250,235,.55), inset 0 -3px 6px rgba(70,40,15,.25), 0 5px 0 #1d1108, 0 10px 18px rgba(0,0,0,.5) !important; }
html[data-theme="workshop-hero"]:not(#_) .product-card:active:not(:disabled) { transform: translateY(4px) !important; box-shadow: inset 0 2px 0 rgba(255,250,235,.4), inset 0 -2px 4px rgba(70,40,15,.25), 0 1px 0 #1d1108, 0 3px 6px rgba(0,0,0,.4) !important; }
html[data-theme="workshop-hero"]:not(#_) .product-card strong { -webkit-text-fill-color: #2a1a0f !important; color: #2a1a0f !important; text-shadow: 0 1px 0 rgba(255,245,225,.6); }
html[data-theme="workshop-hero"]:not(#_) .product-card > span { color: #5c4127 !important; -webkit-text-fill-color: #5c4127 !important; }
html[data-theme="workshop-hero"]:not(#_) .price-row b { color: #2a1a0f !important; -webkit-text-fill-color: #2a1a0f !important; }
html[data-theme="workshop-hero"]:not(#_) .stock-pill { background: rgba(42,26,15,.10) !important; color: #4a3220 !important; -webkit-text-fill-color: #4a3220 !important; border-color: rgba(42,26,15,.3) !important; text-shadow: none !important; }

/* category pegs: small timber, the chosen one in brass */
html[data-theme="workshop-hero"]:not(#_) .category-button:not(.is-active) {
  background: var(--wood-light) center / 200px auto !important; color: #2a1a0f !important; -webkit-text-fill-color: #2a1a0f !important;
  border: 2px solid var(--timber-edge) !important; box-shadow: inset 0 1px 0 rgba(255,250,235,.5), 0 3px 0 #1d1108 !important; font-weight: 800 !important;
}
/* brushed brass: the actions that matter */
html[data-theme="workshop-hero"]:not(#_) :is(.category-button.is-active, .checkout-button, .payment-button.is-active, .tip-mode-btn.is-active, .cash-note-btn.exact-btn) {
  background: linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.06)), var(--brass-tex) center / cover !important;
  color: var(--brass-ink) !important; -webkit-text-fill-color: var(--brass-ink) !important; border: 1px solid var(--brass-lo) !important;
  text-shadow: 0 1px 0 rgba(255,240,200,.55); font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,245,210,.75), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 #5a4419, 0 6px 12px rgba(0,0,0,.35) !important;
}
/* brass screw heads on the big checkout plate */
html[data-theme="workshop-hero"]:not(#_) .checkout-button {
  background:
    radial-gradient(circle at 14px 50%, #5a4419 0 2px, #f1dfa8 3px 5px, #7a5f26 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 14px) 50%, #5a4419 0 2px, #f1dfa8 3px 5px, #7a5f26 6px, transparent 7px),
    linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.06)), var(--brass-tex) center / cover !important;
}

/* the order: a paper docket pinned to the bench */
html[data-theme="workshop-hero"]:not(#_) .cart-panel {
  background: linear-gradient(rgba(16,9,4,.45), rgba(16,9,4,.45)), var(--wood-dark) center / 600px auto !important;
  border-left: 3px solid var(--timber-edge) !important;
}
html[data-theme="workshop-hero"]:not(#_) .cart-panel > * { color: #2a1a0f; }
html[data-theme="workshop-hero"]:not(#_) .cart-card,
html[data-theme="workshop-hero"]:not(#_) .receipt-panel,
html[data-theme="workshop-hero"]:not(#_) .totals-box,
html[data-theme="workshop-hero"]:not(#_) .cart-panel .panel-block {
  background: #fbf6ea !important; border: 1px solid rgba(42,26,15,.18) !important; border-radius: 4px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.35) !important; color: #2a1a0f !important;
}
html[data-theme="workshop-hero"]:not(#_) .cart-panel :is(h2, h3, h4, label, span, strong, b, p, small, div) { color: inherit; }
html[data-theme="workshop-hero"]:not(#_) .cart-panel :is(.cart-card, .totals-box, .receipt-panel) * { color: #2a1a0f !important; -webkit-text-fill-color: #2a1a0f !important; }
html[data-theme="workshop-hero"]:not(#_) .grand-total strong,
html[data-theme="workshop-hero"]:not(#_) .grand-total > :last-child { background: none !important; -webkit-text-fill-color: #2a1a0f !important; color: #2a1a0f !important; }
html[data-theme="workshop-hero"]:not(#_) .cart-panel :is(input, select, textarea) { background: #fffaf0 !important; color: #2a1a0f !important; border: 2px solid var(--timber-edge) !important; }
/* everyday keys on the docket side: plain timber */
html[data-theme="workshop-hero"]:not(#_) :is(.payment-button:not(.is-active), .cash-note-btn:not(.exact-btn), .cash-digit-btn, .tip-quick-btn, .tip-mode-btn:not(.is-active), .qty-controls button) {
  background: var(--wood-light) center / 220px auto !important; color: #2a1a0f !important; -webkit-text-fill-color: #2a1a0f !important;
  border: 2px solid var(--timber-edge) !important; box-shadow: inset 0 1px 0 rgba(255,250,235,.5), 0 3px 0 #1d1108 !important; font-weight: 800 !important;
}
html[data-theme="workshop-hero"]:not(#_) :is(.payment-button, .cash-note-btn, .cash-digit-btn, .tip-quick-btn, .qty-controls button):active { box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 #1d1108 !important; }

/* settings picker previews */
.look-option[data-set-theme="workshop"] { background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,0)), url("../assets/workshop/timber_strip.jpg") left / auto 100% no-repeat, #faf8f4; }
.look-option[data-set-theme="workshop-hero"] { background: linear-gradient(rgba(16,9,4,.35), rgba(16,9,4,.35)), url("../assets/workshop/timber_dark.jpg") center / 300px auto; }
.look-picker .look-option[data-set-theme="workshop-hero"], .look-picker .look-option[data-set-theme="workshop-hero"] b { color: #fbf3e3 !important; }
.look-picker .look-option[data-set-theme="workshop-hero"] small { color: #e6d3b3 !important; }

/* ---- pass 2 ---- */
html[data-theme="workshop-hero"]:not(#_) :is(.work-area, main.app-shell > section, .workspace) { background: transparent !important; }
html[data-theme="workshop-hero"]:not(#_) .cart-panel :is(h1,h2,h3,h4,label,p,small,span,strong,b) { color: #2a1a0f !important; -webkit-text-fill-color: #2a1a0f !important; text-shadow: none !important; }
html[data-theme="workshop-hero"]:not(#_) .stock-pill { color: #4a3220 !important; -webkit-text-fill-color: #4a3220 !important; background: rgba(255,248,232,.55) !important; border: 1px solid rgba(42,26,15,.35) !important; opacity: 1 !important; }
html[data-theme="workshop-hero"]:not(#_) .product-card { background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%, rgba(110,60,20,.16)), var(--wood-light) center / 220px auto !important; }
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) :is(.grand-total strong, .grand-total > :last-child, .grand-total span) { background: none !important; -webkit-text-fill-color: #1b1611 !important; color: #1b1611 !important; text-shadow: none !important; }
html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .brand-lockup img { box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 0 3px rgba(42,26,15,.55) !important; }
/* ---- pass 3: calmer timber faces so the names read first ---- */
html[data-theme="workshop-hero"]:not(#_) .product-card { background: linear-gradient(160deg, rgba(246,230,200,.55), rgba(236,214,176,.42) 50%, rgba(170,120,70,.30)), var(--wood-light) center / 260px auto !important; }
html[data-theme="workshop-hero"]:not(#_) :is(.category-button:not(.is-active), .payment-button:not(.is-active), .cash-note-btn:not(.exact-btn), .cash-digit-btn, .tip-quick-btn, .tip-mode-btn:not(.is-active), .qty-controls button) { background: linear-gradient(rgba(246,230,200,.5), rgba(220,190,150,.4)), var(--wood-light) center / 220px auto !important; }
/* ---- pass 4: other screens in Hero read light-on-dark timber panels ---- */
html[data-theme="workshop-hero"]:not(#_) { --panel-raised: rgba(30,18,10,.84); --panel: rgba(30,18,10,.84); }
html[data-theme="workshop-hero"]:not(#_) .work-area :is(.panel-block, .summary-card, section > div[class]) { border-color: rgba(234,211,154,.25) !important; }
html[data-theme="workshop-hero"]:not(#_) .work-area :is(p, span, small, td, th, li, dt, dd) { color: #f3e6c8; }
.look-option[data-set-theme="workshop"] b, .look-option[data-set-theme="workshop"] small { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.look-option[data-set-theme="workshop"] { background: linear-gradient(rgba(30,18,10,.35), rgba(30,18,10,.35)), url("../assets/workshop/timber_strip.jpg") center / cover !important; }
/* ---- pass 5: rounded keys with a real dark-timber frame (two-layer background, no border-image) ---- */
html[data-theme="workshop-hero"]:not(#_) .product-card {
  border: 7px solid transparent !important; border-image: none !important; border-radius: 14px !important;
  background:
    linear-gradient(160deg, rgba(248,234,206,.62), rgba(238,216,180,.50) 50%, rgba(170,120,70,.32)) padding-box,
    var(--wood-light) center / 260px auto padding-box,
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.32)) border-box,
    var(--wood-dark) center / 180px auto border-box !important;
}
html[data-theme="workshop-hero"]:not(#_) .product-card:hover:not(:disabled) { border-color: transparent !important; }
/* the CHARGE plate: brushed brass with two screw heads */
html[data-theme="workshop-hero"]:not(#_) .checkout-button {
  min-height: 60px !important; border-radius: 10px !important; letter-spacing: .14em; font-size: 19px !important;
  background:
    radial-gradient(circle at 20px 50%, #4a3814 0 1.5px, transparent 2px),
    radial-gradient(circle at 20px 50%, #f4e3b0 0 5px, #8a6a2c 6px 7px, transparent 7.5px),
    radial-gradient(circle at calc(100% - 20px) 50%, #4a3814 0 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 20px) 50%, #f4e3b0 0 5px, #8a6a2c 6px 7px, transparent 7.5px),
    linear-gradient(rgba(255,255,255,.10), rgba(0,0,0,.08)), var(--brass-tex) center / cover !important;
}
/* every other key in the order column: framed light timber */
html[data-theme="workshop-hero"]:not(#_) :is(.category-button:not(.is-active), .payment-button:not(.is-active), .cash-note-btn:not(.exact-btn), .cash-digit-btn, .tip-quick-btn, .tip-mode-btn:not(.is-active), .qty-controls button, #copyReceipt, .receipt-actions button) {
  border: 3px solid transparent !important; color: #2a1a0f !important; -webkit-text-fill-color: #2a1a0f !important; font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,250,235,.5), 0 3px 0 #1d1108 !important;
  background:
    linear-gradient(rgba(248,234,206,.58), rgba(224,196,156,.46)) padding-box,
    var(--wood-light) center / 220px auto padding-box,
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.3)) border-box,
    var(--wood-dark) center / 160px auto border-box !important;
}
/* today's tallies under CHARGE: little brass-edged paper tags */
html[data-theme="workshop-hero"]:not(#_) .status-strip > * {
  background: #fbf6ea !important; border: 1px solid var(--brass) !important; border-radius: 6px !important;
}
html[data-theme="workshop-hero"]:not(#_) .status-strip * { color: #2a1a0f !important; -webkit-text-fill-color: #2a1a0f !important; }
html[data-theme="workshop-hero"]:not(#_) .receipt-content { background: #fffdf7 !important; font-family: "Courier New", ui-monospace, monospace; }

/* Top-bar layouts (tablet / laptop widths): badge and wordmark side by side, never cropped (31 Oct 2026) */
@media (max-width: 1280px) {
  html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .brand-lockup { flex-direction: row !important; align-items: center !important; gap: 10px !important; margin: 0 !important; }
  html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .brand-lockup img { width: 52px !important; max-width: 52px !important; height: 52px !important; max-height: 52px !important; }
  html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .brand-lockup::after { font-size: 18px; white-space: nowrap; }
  html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .side-rail { background: linear-gradient(rgba(30,18,10,.18), rgba(30,18,10,.38)), var(--wood-strip) center / cover !important; }
}
/* Tablet portrait (iPad ~768-1024px): the rail wraps instead of squeezing the Update button (1 Nov 2026) */
@media (max-width: 1100px) and (min-width: 681px) {
  html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .side-rail { flex-wrap: wrap !important; row-gap: 8px !important; }
  html:is([data-theme="workshop"],[data-theme="workshop-hero"]):not(#_) .side-rail .mode-button { padding-left: 12px !important; padding-right: 12px !important; }
}

/* 1 Nov 2026: cash box on tablets and phones. One column, nothing overlaps, readable on the light Workshop look. */
.cash-box.is-visible { grid-template-columns: 1fr !important; align-items: stretch !important; }
.cash-box > label { display: grid !important; grid-template-columns: 1fr !important; gap: 4px; width: 100%; }
.cash-box > label input { width: 100% !important; min-height: 48px; font-size: 20px; box-sizing: border-box; }
.cash-box > label + div { flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
#changeDue { color: #2a1a0e !important; font-size: 24px !important; }
#tipAllChangeBtn { background: #f3e6c4 !important; border: 1px solid #b08a3e !important; color: #3a2414 !important; min-height: 40px; }
#cancelTipChangeBtn { background: #fdecea !important; border: 1px solid #e5a29b !important; color: #9b1c12 !important; min-height: 40px; }