/* Allure Essence – v1.4 "smoked glass" theme, after the owner's references: dark translucent panels over a warm,
   softly lit backdrop, light text, one orange accent, pill-shaped controls. Colours and surfaces only – every
   layout, screen and figure stays as it was. Loaded after app.css and v13.css.
   Text is light on dark glass throughout (contrast checked against the darkest and the lightest backdrop areas). */
:root {
  color-scheme: dark;
  --bg: #1d1814; --surface: rgba(54, 46, 40, .58); --surface-2: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .13); --line-strong: rgba(255, 255, 255, .26);
  --ink: #f7f2ea; --ink-2: #ddd3c7; --muted: #b9ada0;
  --gold: #f47b20; --gold-ink: #ffb476; --gold-soft: rgba(244, 123, 32, .2);
  --ok: #7fdca6; --ok-soft: rgba(127, 220, 166, .16); --warn: #f5c56b; --warn-soft: rgba(245, 197, 107, .16);
  --bad: #ff9486; --bad-soft: rgba(255, 120, 104, .18); --info: #9cc8f5; --info-soft: rgba(156, 200, 245, .16);
  --glass-blur: blur(24px) saturate(150%);
  --shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 20px 46px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .3);
  --m-sales: #f1e7da; --m-profit: #f47b20; --m-bottles: #7fc4d6; --m-cash: #f6b455;
}
html, body { color: var(--ink); background-color: #1d1814; background:
    radial-gradient(34vw 34vw at 12% 16%, rgba(255, 196, 120, .55), transparent 62%),
    radial-gradient(26vw 26vw at 90% 8%, rgba(255, 170, 90, .42), transparent 64%),
    radial-gradient(44vw 40vw at 4% 96%, rgba(20, 66, 74, .85), transparent 66%),
    radial-gradient(46vw 42vw at 96% 92%, rgba(196, 96, 30, .6), transparent 66%),
    radial-gradient(40vw 36vw at 56% 48%, rgba(120, 78, 44, .5), transparent 70%),
    linear-gradient(150deg, #3a2c20 0%, #241c16 48%, #14110e 100%) fixed; }

/* ---------- glass surfaces */
.card, .sidebar, .topbar, .bottombar, .scan-card {
  background-color: var(--surface);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, 0) 64%);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.topbar { background-color: rgba(38, 32, 27, .66); border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.sidebar { background-color: rgba(38, 32, 27, .6); border-right: 1px solid rgba(255, 255, 255, .1); }
.bottombar { background-color: rgba(34, 28, 24, .82); border-top: 1px solid rgba(255, 255, 255, .12); }
.card-head { border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: none; }
.card-sub-head { border-top-color: rgba(255, 255, 255, .1); }
.modal, .sheet, .login-card, .menu { background-color: rgba(44, 37, 32, .94); background-image: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%);
  border: 1px solid rgba(255, 255, 255, .16); color: var(--ink); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.modal .m-head { background: rgba(44, 37, 32, .98); border-bottom-color: rgba(255, 255, 255, .1); }
.modal-backdrop, .sheet-backdrop { background: rgba(8, 6, 4, .55); }
.notice { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: var(--ink); }
.notice.gap { background: var(--warn-soft); }
.stale { color: var(--ink); background: rgba(245, 197, 107, .16); border-color: rgba(245, 197, 107, .45); }
.unavail, .bar-detail, .cash-drawer, .cash-form, .cd-count { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--ink); }
.cash-total { background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(244, 123, 32, .14)); border-color: rgba(255, 255, 255, .16); }
.ok-note { background: var(--ok-soft); border-color: rgba(127, 220, 166, .4); }
.empty { color: var(--muted); } .empty h3 { color: var(--ink); }

/* ---------- text helpers that were dark-on-light */
h1, h2, h3, b, strong, .page-title, .l-title, .k-value, .h-value { color: var(--ink); }
.kpi .k-value, .h-value { text-shadow: none; }
.kpi .k-label, .h-label, .h-sub, .h-delta, label { color: var(--ink-2); }
.kpi .k-sub, .lrow .l-sub, .p-main .l-sub { color: var(--muted); }
.kpi .k-arrow { color: rgba(255, 255, 255, .3); }
a.kpi:hover, .hero:hover, .hero:focus-visible { border-color: rgba(244, 123, 32, .6); }
.section-label { color: var(--ink-2); }
.link { color: var(--gold-ink); }
.flag { color: var(--bad); }
.help { color: var(--ink-2); border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }

/* ---------- controls */
input, select, textarea { color: var(--ink); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
input::placeholder, textarea::placeholder { color: rgba(247, 242, 234, .45); }
select option { color: #1f1c18; background: #fff; }
input:focus, select:focus, textarea:focus, button:focus-visible, .hero:focus-visible { outline-color: var(--gold); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
.btn { color: var(--ink); background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); }
.btn:hover { background: rgba(255, 255, 255, .17); }
.btn.primary, .btn.gold { background: linear-gradient(180deg, #ff8f35, #ef7417); border-color: #ff9a4a; color: #1b1109; font-weight: 700;
  box-shadow: 0 8px 22px rgba(244, 123, 32, .34), 0 1px 0 rgba(255, 255, 255, .35) inset; }
.btn.primary:hover, .btn.gold:hover { background: linear-gradient(180deg, #ffa052, #f47b20); }
.btn.danger { color: var(--bad); }
.scan-btn { border-color: rgba(244, 123, 32, .7); color: var(--gold-ink); background: rgba(244, 123, 32, .16); }
.chips, .seg { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.chip { color: var(--ink-2); }
.chip[aria-pressed=true], .seg button[aria-pressed=true] { background: var(--gold); color: #1b1109; }
.seg button { color: var(--ink-2); }
.tab { color: var(--ink-2); } .tab[aria-selected=true] { color: var(--ink); border-color: var(--gold); }
.qty button { color: var(--ink); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }

/* ---------- navigation */
.side-brand { color: var(--ink); }
.logo { background: linear-gradient(160deg, #ff9a45, #e56a12); color: #1b1109; }
.nav-group { color: var(--muted); }
.nav-item { color: var(--ink-2); } .nav-item svg { color: var(--ink-2); }
.nav-item:hover { background: rgba(255, 255, 255, .09); color: var(--ink); }
.nav-item[aria-current=page] { background: linear-gradient(180deg, #ff8f35, #ef7417); color: #1b1109; box-shadow: 0 8px 20px rgba(244, 123, 32, .3); }
.nav-item[aria-current=page] svg { color: #1b1109; }
.bottombar a, .bottombar button { color: var(--muted); }
.bottombar [aria-current=page] { color: var(--gold-ink); }
.icon-btn { color: var(--ink); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.menu-item { color: var(--ink); } .menu-item:hover { background: rgba(255, 255, 255, .1); }
.demo-chip { color: #2a1c08; background: #f5c56b; border-color: #f5c56b; }
.build-chip { color: var(--ink-2); background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
.conn { color: var(--ink); background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); }
.conn i { background: #7fdca6; box-shadow: 0 0 0 3px rgba(127, 220, 166, .22); }
.updated { color: var(--muted); }

/* ---------- tables, lists */
.t th { color: var(--muted); background: rgba(255, 255, 255, .05); }
.t td { border-color: rgba(255, 255, 255, .08); }
.t tbody tr:hover, .t tbody tr.click:hover td { background: rgba(255, 255, 255, .06); }
.t tfoot td, .t.rt tfoot tr { background: rgba(255, 255, 255, .06); }
.lrow, button.lrow { border-top-color: rgba(255, 255, 255, .09); color: var(--ink); }
a.lrow:hover, button.lrow:hover, .prow:hover { background: rgba(255, 255, 255, .07); }
.prow { border-top-color: rgba(255, 255, 255, .08); }
.pill.muted { color: var(--ink-2); background: rgba(255, 255, 255, .1); }
.kind.period { color: #b9d8f7; background: rgba(156, 200, 245, .18); }
.kind.now { color: #2a1c08; background: #f6b455; }
.thumb { background: rgba(244, 123, 32, .18); color: var(--gold-ink); }
.thumb.empty { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .22); }
.prow .thumb { box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.prod-card .ph { background-color: rgba(255, 255, 255, .08); }
.hbar .track, .p-main .track { background: rgba(255, 255, 255, .12); }
.count-badge, .nav-item .count, .tab .count, .bottombar .count { background: #ff6a55; color: #1b0d09; }
.toast { background: #f7f2ea; color: #1b1612; } .toast.error { background: #ff9486; color: #2a0d08; }
.step .s-num { background: var(--gold); color: #1b1109; }

/* ---------- dashboard (v13) on dark glass */
.hero { background: rgba(62, 53, 46, .5); border: 1px solid rgba(255, 255, 255, .16); color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 24px 52px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .3); }
.hero::before { background: linear-gradient(140deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, 0) 66%); }
.h-value { color: #fff; }
.hero.m-cash { background: linear-gradient(150deg, rgba(255, 150, 60, .95) 0%, rgba(232, 96, 20, .92) 55%, rgba(190, 62, 14, .92) 100%); border-color: rgba(255, 210, 160, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 26px 56px rgba(214, 90, 16, .42), 0 3px 8px rgba(0, 0, 0, .3); --accent: #fff3e2; }
.hero.m-cash .h-value { color: #fff; text-shadow: 0 2px 10px rgba(110, 40, 0, .35); }
.hero.m-cash .h-label, .hero.m-cash .h-sub, .hero.m-cash .h-delta, .hero.m-cash .h-split i { color: rgba(255, 255, 255, .92); }
.hero.m-cash .h-split { border-top-color: rgba(255, 255, 255, .35); }
.hero.m-cash .kind.now, .cash-cta { color: #fff; background: rgba(40, 18, 4, .55); }
.hero.m-cash .bad-text { color: #fff; text-decoration: underline; } .hero.m-cash .warn-text { color: #fff; }
.hero.m-cash .spark .sp-dot { stroke: #c2500f; }
.hero.m-cash.changed { animation: none; outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.hero.changed { animation: fig-flash-dark 1.5s ease-out 1; }
@keyframes fig-flash-dark { 0% { box-shadow: 0 0 0 3px rgba(244, 123, 32, .8), 0 24px 52px rgba(0, 0, 0, .45); } 100% { box-shadow: 0 0 0 0 rgba(244, 123, 32, 0), 0 24px 52px rgba(0, 0, 0, .45); } }
.h-split { border-top-color: rgba(255, 255, 255, .14); }
.delta { background: rgba(255, 255, 255, .1); color: var(--ink-2); }
.delta.up { color: var(--ok); background: var(--ok-soft); } .delta.down { color: var(--bad); background: var(--bad-soft); }
.delta.none { color: var(--muted); background: transparent; }
.spark .sp-dot { stroke: #2a231e; }
.attn-card { background-color: rgba(60, 48, 40, .6); border-color: rgba(244, 123, 32, .35); }
.lrow.att.warn { border-left-color: #f5c56b; } .lrow.att.bad { border-left-color: #ff7b68; } .lrow.att.info { border-left-color: rgba(156, 200, 245, .6); }
.live-chart .grid-line, .chart .grid-line { stroke: rgba(255, 255, 255, .12); }
.chart .axis { fill: var(--muted); }
.live-chart .hit { fill: transparent; }
.live-chart .bar-g:hover .hit, .live-chart .bar-g:focus-visible .hit { fill: rgba(255, 255, 255, .07); }
.live-chart .bar-g.sel .hit { fill: rgba(244, 123, 32, .2); }
.live-chart .bar-g.sel .bar { stroke: #fff; }
.chart-tip { background: #f7f2ea; color: #1b1612; }
.chart .bar { fill: #f47b20; } .chart .line { stroke: #f7f2ea; }
.chart-bars .s { background: rgba(247, 242, 234, .85); } .chart-bars .p { background: linear-gradient(180deg, #ff9a45, #e56a12); }
.hc { background: rgba(255, 255, 255, .07); }
.hc.l1 { background: #5a3a22; } .hc.l2 { background: #8a4f22; } .hc.l3 { background: #bd6520; } .hc.l4 { background: #f47b20; } .hc.l5 { background: #ffc48a; }
.hc:hover, .hc:focus-visible { outline-color: #fff; }
.heat-grid .hd { color: var(--ink-2); }
.new-tag { background: var(--gold); color: #1b1109; }
tr.row-new { animation-name: row-new-dark; }
@keyframes row-new-dark { 0% { background: rgba(244, 123, 32, .45); } 100% { background: transparent; } }
.cd-moves .in { color: var(--ok); } .cd-moves .out { color: var(--bad); }
.cd-moves summary { color: var(--gold-ink); }

/* ---------- scanner + new stock arrival */
.scan-overlay { background: rgba(6, 5, 4, .86); }
.scan-hero { display: grid; gap: 10px; }
.scan-hero .btn.cam { min-height: 64px; font-size: 1.05rem; border-radius: 18px; }
.arrival-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.arrival-steps li { font-size: .74rem; font-weight: 650; color: var(--ink-2); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px; padding: 8px 8px; display: grid; gap: 2px; }
.arrival-steps li b { font-size: .68rem; color: var(--gold-ink); letter-spacing: .4px; }
.arrival-steps li.on { background: rgba(244, 123, 32, .2); border-color: rgba(244, 123, 32, .6); color: var(--ink); }
.prov { color: #2a1c08; background: #f5c56b; border-radius: 999px; font-size: .68rem; font-weight: 750; padding: 1px 8px; white-space: nowrap; }
.line-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr); gap: 8px; align-items: end; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.line-grid:first-of-type { border-top: 0; }

@media (max-width: 900px) { :root { --glass-blur: blur(14px) saturate(140%); } .arrival-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .line-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .line-grid > :first-child { grid-column: 1 / -1; }
  .t.rt tr { border-bottom-color: rgba(255, 255, 255, .1); }
  .t.rt td::before { color: var(--muted); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .sidebar, .topbar, .bottombar, .hero { background: #2c2520; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero.m-cash { background: #e56a12; }
}
@media print { html, body { background: #fff; color: #000; } }

.modal:has([data-testid="po-form"]) { max-width: 900px; }