/* Allure Essence – v1.5. Colours sampled from the owner's reference video ("Glassy SideBar V5"):
     smoked charcoal #25201d · taupe glass #685a52 / #6d5e5b · bronze glow #90552b / #73604f · wood #875d43
     warm wall #8e7d74 · deep shadow #191514 · coral badge #e4603c (sampled #dc6f4f through the glass)
   Applied to the sidebar, cards, buttons, charts and backdrop. Layout and figures are unchanged.
   Motion: one short transition when the sidebar opens or closes; none under prefers-reduced-motion. */
:root {
  --sidebar: 268px; --side-gap: 14px;
  --coral: #e4603c; --coral-ink: #f6a889; --bronze: #90552b; --bronze-2: #73604f; --wood: #875d43; --smoke: #25201d; --taupe: #685a52;
  --gold: #e4603c; --gold-ink: #f6a889; --gold-soft: rgba(228, 96, 60, .2);
  --surface: rgba(58, 49, 44, .56); --bg: #191514;
  --m-sales: #f3ece4; --m-profit: #e4603c; --m-bottles: #7fb3b8; --m-cash: #e9c9a0;
}
html, body { background-color: #191514; background:
    radial-gradient(44vw 40vw at 14% 6%, rgba(142, 125, 116, .72), transparent 64%),
    radial-gradient(36vw 34vw at 88% 10%, rgba(135, 93, 67, .62), transparent 66%),
    radial-gradient(46vw 42vw at 92% 92%, rgba(144, 85, 43, .7), transparent 66%),
    radial-gradient(42vw 40vw at 6% 96%, rgba(115, 96, 79, .6), transparent 66%),
    radial-gradient(40vw 34vw at 52% 52%, rgba(104, 90, 82, .34), transparent 70%),
    linear-gradient(160deg, #3a302a 0%, #25201d 46%, #191514 100%) fixed; }

/* ---------- floating glass sidebar (desktop / tablet only) */
.sidebar { inset: var(--side-gap) auto var(--side-gap) var(--side-gap); width: calc(var(--sidebar) - var(--side-gap)); border-radius: 30px; padding: 16px 12px 14px;
  background-color: transparent; background-image:
    linear-gradient(180deg, rgba(109, 94, 91, .78) 0%, rgba(74, 64, 59, .74) 16%, rgba(37, 32, 29, .8) 44%, rgba(115, 96, 79, .74) 74%, rgba(144, 85, 43, .82) 100%);
  border: 1px solid rgba(255, 255, 255, .32); border-right: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 -18px 40px rgba(144, 85, 43, .28) inset, 0 28px 60px rgba(0, 0, 0, .5), 0 0 44px rgba(144, 85, 43, .22);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  transition: width .26s ease; overflow-x: hidden; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.main-col { transition: margin-left .26s ease; }
.sidebar .side-brand { position: relative; padding: 4px 6px 16px; gap: 12px; color: #fff; min-height: 60px; }
.sidebar .side-brand .logo { display: inline-grid; width: 40px; height: 40px; border-radius: 50%; flex: none; font-size: .86rem;
  background: radial-gradient(circle at 30% 25%, #ff8a66, #e4603c 55%, #b8421f); color: #fff; box-shadow: 0 6px 16px rgba(228, 96, 60, .45); }
.brand-name { display: grid; line-height: 1.2; font-size: 1rem; white-space: nowrap; }
.brand-name small { font-size: .72rem; font-weight: 500; color: rgba(255, 255, 255, .7); }
.nav-toggle { margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 0; background: #fff; color: #25201d; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: transform .26s ease; }
.nav-toggle svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.nav-toggle:hover { background: #f3ece4; } .nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-group { color: rgba(255, 255, 255, .58); font-weight: 650; padding: 14px 12px 6px; white-space: nowrap; }
.nav-item { position: relative; color: #fff; border-radius: 999px; padding: 9px 12px; min-height: 42px; border: 1.5px solid transparent; white-space: nowrap; font-weight: 550; }
.nav-item svg { color: #fff; flex: none; }
.nav-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-item[aria-current=page] { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); color: #fff; font-weight: 650;
  border-color: rgba(255, 255, 255, .78); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 20px rgba(0, 0, 0, .28); }
.nav-item[aria-current=page] svg { color: #fff; }
.nav-item .count { background: var(--coral); color: #fff; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; font-size: .72rem;
  box-shadow: 0 0 0 2px rgba(37, 32, 29, .45); }
.nav-item .tag { color: #fff; border-color: rgba(255, 255, 255, .4); }

/* collapsed: icons only, names as tooltips */
body.nav-collapsed { --sidebar: 96px; }
body.nav-collapsed .sidebar { padding-left: 10px; padding-right: 10px; overflow: visible; }
body.nav-collapsed .brand-name, body.nav-collapsed .nav-label, body.nav-collapsed .nav-item .tag { display: none; }
body.nav-collapsed .side-brand { flex-direction: column; gap: 10px; padding: 4px 0 12px; align-items: center; }
body.nav-collapsed .nav-toggle { margin: 0; transform: rotate(180deg); }
body.nav-collapsed .nav-group { font-size: 0; padding: 8px 0; margin: 0 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
body.nav-collapsed .nav-item { justify-content: center; padding: 9px 0; width: 46px; height: 46px; margin: 2px auto; border-radius: 50%; }
body.nav-collapsed .nav-item .count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; font-size: .64rem; padding: 0 4px; }
body.nav-collapsed .nav-item::after { content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: #f3ece4; color: #25201d; font-size: .8rem; font-weight: 650; padding: 5px 11px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 40; }
body.nav-collapsed .nav-item:hover::after, body.nav-collapsed .nav-item:focus-visible::after { opacity: 1; }

/* ---------- top bar floats too; phone bottom bar is a compact glass strip */
.topbar { margin: var(--side-gap) var(--side-gap) 0 0; border-radius: 22px; top: var(--side-gap); border: 1px solid rgba(255, 255, 255, .18);
  background-color: rgba(52, 44, 40, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 14px 30px rgba(0, 0, 0, .34); }
.page { padding-right: calc(20px + var(--side-gap)); }
@media (max-width: 760px) {
  .topbar { margin: 8px 8px 0; top: 8px; border-radius: 18px; }
  .page { padding-right: 12px; }
  .bottombar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 24px; padding-bottom: 0; height: 62px;
    background-color: transparent; background-image: linear-gradient(180deg, rgba(104, 90, 82, .86), rgba(52, 44, 40, .9) 55%, rgba(144, 85, 43, .86));
    border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 34px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
  .bottombar a, .bottombar button { color: rgba(255, 255, 255, .78); height: 60px; border-radius: 20px; }
  .bottombar svg { color: #fff; }
  .bottombar [aria-current=page] { color: #fff; }
  .bottombar [aria-current=page]::before { content: ""; position: absolute; inset: 5px 8px; border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, .75);
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); z-index: -1; }
  .bottombar [aria-current=page] svg { color: #fff; }
  .bottombar .count { background: var(--coral); color: #fff; }
  .page { padding-bottom: calc(var(--bottombar) + 44px + env(safe-area-inset-bottom)); }
  .sheet { background-color: rgba(44, 37, 33, .96); border-radius: 26px 26px 0 0; }
  .sheet .nav-item { color: #fff; border-radius: 16px; } .sheet .nav-item svg { color: #fff; }
  .sheet .nav-item[aria-current=page] { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .12); }
}

/* ---------- sampled palette on cards, buttons and tiles */
.card, .scan-card { background-image: linear-gradient(140deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 40%, rgba(144, 85, 43, .1) 100%); border-color: rgba(255, 255, 255, .16); }
.btn.primary, .btn.gold { background: linear-gradient(180deg, #f07a57, #dd5631); border-color: #f39a7d; color: #1c0f0a;
  box-shadow: 0 8px 22px rgba(228, 96, 60, .34), 0 1px 0 rgba(255, 255, 255, .35) inset; }
.btn.primary:hover, .btn.gold:hover { background: linear-gradient(180deg, #f68d6c, #e4603c); }
.chip[aria-pressed=true], .seg button[aria-pressed=true] { background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08)); color: #fff;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .72) inset; }
.tab[aria-selected=true] { border-color: var(--coral); }
.logo { background: radial-gradient(circle at 30% 25%, #ff8a66, #e4603c 55%, #b8421f); color: #fff; }
.count-badge, .tab .count { background: var(--coral); color: #fff; }
.new-tag, .step .s-num { background: var(--coral); color: #fff; }
.kind.now { color: #2a1a10; background: #e9c9a0; }
.hero.m-cash { background: linear-gradient(155deg, rgba(228, 96, 60, .94) 0%, rgba(176, 84, 44, .93) 52%, rgba(144, 85, 43, .94) 100%); border-color: rgba(255, 214, 190, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 26px 56px rgba(144, 85, 43, .5), 0 3px 8px rgba(0, 0, 0, .3); }
.hero.m-cash .spark .sp-dot { stroke: #a34a22; }
.hero:hover, .hero:focus-visible, a.kpi:hover { border-color: rgba(228, 96, 60, .65); }
.attn-card { border-color: rgba(228, 96, 60, .4); }
.scan-btn { border-color: rgba(228, 96, 60, .7); background: rgba(228, 96, 60, .16); }
.arrival-steps li.on { background: rgba(228, 96, 60, .2); border-color: rgba(228, 96, 60, .6); }
.hc.l1 { background: #4c3a30; } .hc.l2 { background: #73503a; } .hc.l3 { background: #a55a36; } .hc.l4 { background: #e4603c; } .hc.l5 { background: #f8c3ad; }
.chart .bar { fill: var(--coral); } .chart-bars .p { background: linear-gradient(180deg, #f07a57, #c9502c); }
.p-main .fill, .hbar .fill { background: linear-gradient(90deg, #c9502c, #f07a57); }
.live-chart .bar-g.sel .hit { fill: rgba(228, 96, 60, .2); }
tr.row-new { animation-name: row-new-coral; }
@keyframes row-new-coral { 0% { background: rgba(228, 96, 60, .45); } 100% { background: transparent; } }
.hero.changed { animation-name: fig-flash-coral; }
@keyframes fig-flash-coral { 0% { box-shadow: 0 0 0 3px rgba(228, 96, 60, .8), 0 24px 52px rgba(0, 0, 0, .45); } 100% { box-shadow: 0 0 0 0 rgba(228, 96, 60, 0), 0 24px 52px rgba(0, 0, 0, .45); } }
.prov { color: #2a1a10; background: #e9c9a0; }

/* ---------- trend chart: area + lines */
.chart-wrap.m-sales { --accent: #f3ece4; } .chart-wrap.m-profit { --accent: #e4603c; } .chart-wrap.m-bottles { --accent: #7fb3b8; }
.chart-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 14px; margin-bottom: 4px; }
.trend .area { fill: url(#area-fill); stroke: none; }
.trend .line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.trend .line.main { stroke: var(--accent); stroke-width: 2.4; }
.trend .line.second { stroke: #e4603c; stroke-width: 2; }
.trend .line.prev { stroke: rgba(255, 255, 255, .55); stroke-width: 1.8; stroke-dasharray: 5 5; }
.trend .dot { fill: var(--accent); stroke: #2a231f; stroke-width: 2; opacity: 1; }
.trend .dot.zero { fill: rgba(255, 255, 255, .35); stroke: none; }
.trend .bar-g.sel .dot { stroke: #fff; stroke-width: 2; }
.legend { color: var(--ink-2); flex-wrap: wrap; row-gap: 4px; }
.legend .lg { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--accent); border-radius: 2px; margin-right: 6px; vertical-align: 3px; background: none; }
.legend .lg.second { border-top-color: #e4603c; } .legend .lg.prev { border-top: 2px dashed rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: no-preference) {
  .trend .line.main { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw-line .7s ease-out forwards; }
  .hb-fill { animation: grow-bar .5s ease-out; transform-origin: left center; }
  .donut .slice { animation: fade-in .45s ease-out; }
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes grow-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- branch comparison bars */
.hbar2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; padding: 9px 0; background: none; border: 0;
  border-top: 1px solid rgba(255, 255, 255, .09); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.hbar2:first-child { border-top: 0; } .hbar2:hover .hb-track { background: rgba(255, 255, 255, .2); }
.hb-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.hb-name i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.hb-track { grid-column: 1 / -1; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hbar2 .muted { grid-column: 1 / -1; }

/* ---------- share donut */
.donut-wrap { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 16px; align-items: center; }
.donut { position: relative; aspect-ratio: 1; }
.donut svg { width: 100%; height: 100%; display: block; }
.donut .ring { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 18; }
.donut .slice { fill: none; stroke-width: 18; cursor: pointer; outline: none; transition: stroke-width .15s ease; }
.donut .slice:hover, .donut .slice:focus-visible, .donut .slice.sel { stroke-width: 23; }
.donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 0 30px; }
.donut-mid b { font-size: 1.05rem; color: #fff; } .donut-mid span { font-size: .72rem; color: var(--muted); }
.donut-legend { display: grid; gap: 2px; min-width: 0; }
.dl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 12px; border: 1px solid transparent;
  background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.dl:hover, .dl.sel { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.dl i { width: 12px; height: 12px; border-radius: 4px; } .dl span { display: grid; min-width: 0; font-weight: 600; font-size: .88rem; }
.dl small { font-weight: 500; color: var(--muted); font-size: .72rem; } .dl em { font-style: normal; color: var(--muted); font-size: .8rem; min-width: 34px; text-align: right; }

/* ---------- opening inventory, customer requests */
.open-branch { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); } .open-branch:first-child { border-top: 0; padding-top: 0; }
.open-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
.open-figs span { display: grid; gap: 1px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.open-figs i { font-style: normal; font-size: .72rem; color: var(--muted); } .open-figs b { font-size: 1.05rem; } .open-figs small { font-size: .72rem; color: var(--muted); }
.req-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .09); }
.req-row:first-child { border-top: 0; } .req-row .thumb { width: 56px; height: 56px; border-radius: 12px; }
.req-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.modal .seg { display: flex; } .modal .seg button { flex: 1; white-space: normal; line-height: 1.2; }

@media (max-width: 1100px) { .open-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .donut { width: 170px; } .donut-legend { width: 100%; }
  .req-row { grid-template-columns: auto minmax(0, 1fr); } .req-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .chart-top { align-items: flex-start; } .legend { font-size: .72rem; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .main-col, .nav-toggle, .donut .slice, body.nav-collapsed .nav-item::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar { background-image: none; background-color: #2e2723; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bottombar { background-image: none; background-color: #2e2723; } .hero.m-cash { background: #c9502c; }
}