:root {
  color-scheme: light;
  --bg: #f9f4ee;
  --paper: rgba(255, 255, 255, .73);
  --ink: #282c35;
  --muted: #7a7b83;
  --line: rgba(154, 135, 119, .14);
  --green: #3f7455;
  --light: #e6f2e7;
  --warn: #996b25;
  --red: #b85249;
  --accent: #c56633;
  --accent-light: #fce8d9;
  --shadow: 0 6px 28px rgba(129, 91, 61, .045), inset 0 1px 0 rgba(255, 255, 255, .92);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 8% 75%, #f5d8c280, transparent 40%), radial-gradient(ellipse at 75% 0%, #f8e3d240, transparent 46%), linear-gradient(120deg, #faf7f2, #faf5f0 65%, #f5eee5); background-attachment: fixed; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline-offset: 4px; }
:focus-visible { outline: 2px solid #b05b2d; }
button { cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
a { color: var(--accent); text-underline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
.icon { flex: 0 0 auto; vertical-align: middle; }
[hidden] { display: none !important; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 100; background: white; padding: 12px; left: 15px; top: 12px; }
.shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; }
aside { position: sticky; top: 0; height: 100dvh; padding: 31px 14px 20px; display: flex; flex-direction: column; gap: 42px; background: rgba(255, 251, 246, .46); border-right: 1px solid rgba(255, 255, 255, .85); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; padding: 0 8px; }
.brandmark { display: grid; place-items: center; background: linear-gradient(145deg, #e99b63, #cf6a32); color: #fff; width: 33px; height: 36px; border-radius: 10px; box-shadow: 0 5px 11px #bd6d2f18, inset 0 1px 0 #ffffff80; }
.brandmark .icon { width: 24px; height: 24px; }
.logo { display: block; font-size: 26px; letter-spacing: -1.2px; font-weight: 740; line-height: 1.2; }
.logo sup { font-size: 10px; vertical-align: top; position: relative; top: 4px; margin-left: 1px; letter-spacing: 0; }
.brandnote { display: block; color: #858181; font-size: 9px; margin-top: 5px; white-space: nowrap; }
nav { display: grid; gap: 8px; }
nav a { color: #52535b; padding: 13px 13px; display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 13px; border: 1px solid transparent; border-radius: 13px; min-height: 48px; }
nav a .icon { width: 21px; height: 21px; }
nav a.active { background: linear-gradient(100deg, #fce8d7d9, #fce8dad9); color: #af5428; border-color: #fff7ed; box-shadow: inset 0 1px 0 #ffffff90; font-weight: 600; }
nav a:hover { background: #ffffff8f; }
nav a.active:hover { background: var(--accent-light); }
.asidebottom { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 9px; border: 1px solid #ffffffb3; border-radius: 16px; background: #ffffff66; min-width: 0; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: linear-gradient(150deg, #f5dac5, #d6bbaa); color: #6a5144; font-weight: 650; }
.user-info { min-width: 0; flex: 1; }
.user-info strong { display: block; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.user-info small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.main { min-width: 0; padding: 0 28px 26px; max-width: 2000px; }
.topbar { min-height: 88px; display: flex; align-items: center; gap: 24px; justify-content: space-between; }
.global-search { display: flex; align-items: center; min-width: 180px; width: min(56%, 700px); gap: 3px; padding: 4px 10px; background: #f1f0eea1; border: 1px solid #ffffff; border-radius: 18px; box-shadow: inset 0 1px 1px #ffffff; }
.global-search input { width: 100%; border: 0; background: transparent; color: var(--ink); outline: none; padding: 8px 2px; font-size: 13px; }
.global-search:focus-within { outline: 2px solid #c68b5a66; outline-offset: 2px; }
.topright { display: flex; gap: 22px; align-items: center; font-size: 11px; color: #606169; }
.online, .today { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.online .dot { color: #58a26a; }
.today { border-left: 1px solid var(--line); padding-left: 22px; }
.today .icon { width: 18px; height: 18px; }
.icon-button { border: 0; padding: 7px; background: transparent; color: #656672; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-width: 32px; min-height: 32px; }
.icon-button:hover:not(:disabled) { background: #ffffffb3; color: var(--accent); }
.contextbar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 22px; min-height: 25px; gap: 15px; }
.crumb { font-size: 11px; color: #8b8683; }
.update-time { font-size: 10px; color: #89848a; }
.environment { font-size: 10px !important; background: #fff9f1ab !important; padding: 5px 8px !important; border-radius: 8px !important; color: #9a714f !important; }
.demo { font-size: 9px; color: var(--warn); background: #fff4dd; border-radius: 7px; padding: 5px 8px; }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 23px; }
h1 { font-size: 30px; font-weight: 690; line-height: 1.2; letter-spacing: -.9px; margin: 0 0 8px; overflow-wrap: anywhere; }
h2 { font-size: 17px; line-height: 1.35; font-weight: 630; letter-spacing: -.35px; margin: 0; display: flex; align-items: center; gap: 9px; }
h2 .icon { width: 18px; height: 18px; color: #666975; }
h3 { font-size: 14px; margin: 0 0 12px; font-weight: 600; }
p { line-height: 1.65; }
.sub { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #ddd8d2; background: linear-gradient(#fffffff0, #faf9f6e6); border-radius: 12px; padding: 11px 16px; font-size: 12px; color: #55545a; font-weight: 550; line-height: 1.4; box-shadow: 0 2px 6px #82756308, inset 0 1px 0 #ffffff; white-space: nowrap; }
.btn .icon { width: 17px; height: 17px; }
.btn.primary { color: #623b25; border-color: #e2ad83; background: linear-gradient(135deg, #f3c59f, #e6ac7e); box-shadow: 0 5px 12px #c5773920, inset 0 1px 0 #ffd2ae80; }
.btn:hover:not(:disabled) { filter: brightness(.975); }
.btn.small { font-size: 11px; padding: 7px 10px; border-radius: 9px; }
.btn.danger { color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 22px 0; }
.stat { border: 1px solid #ffffffed; border-radius: 18px; box-shadow: var(--shadow); background: var(--paper); display: flex; align-items: flex-start; gap: 13px; padding: 20px 16px; min-width: 0; }
.stat-icon { width: 45px; height: 45px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; }
.stat-icon .icon { width: 23px; height: 23px; }
.peach { background: #fce7d9; color: #bd7444; }
.sage { background: #e5eee2; color: #6b8c67; }
.sand { background: #f7edd8; color: #a58349; }
.rose { background: #f0e6e2; color: #9b797b; }
.stat-content { min-width: 0; }
.statlabel { color: #858089; font-size: 11px; }
.statvalue { font-weight: 660; font-size: 27px; letter-spacing: -.65px; margin: 3px 0 4px; font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }
.statvalue small { font-size: 16px; font-weight: 550; }
.statvalue.moneyvalue { font-size: clamp(17px, 1.5vw, 26px); }
.statfoot { font-size: 10px; color: #939097; }
.panel, .card { background: var(--paper); border: 1px solid #ffffffed; border-radius: 18px; box-shadow: var(--shadow); min-width: 0; }
.panel { margin: 20px 0; overflow: hidden; }
.panelhead { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panelhead p { margin: 5px 0 0; }
.panelhead a { flex-shrink: 0; }
.subtle-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #85818a; text-decoration: none; }
.subtle-link .icon { width: 14px; height: 14px; }
.subtle-link:hover { color: var(--accent); }
.inventory-panel .panelhead { padding-bottom: 12px; }
.stock-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 18px; flex-wrap: wrap; }
.filter-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.filter-tab { border: 1px solid #dedbd6; border-radius: 100px; padding: 7px 12px; background: #faf9f7a8; color: #83808a; font-size: 11px; white-space: nowrap; }
.filter-tab span { opacity: .75; margin-left: 3px; }
.filter-tab.active { color: #af6739; border-color: #e2ae87; background: #fff0e3a8; box-shadow: inset 0 0 0 2px #ffffff9c; }
.filter-tab:hover { border-color: #cbab90; }
.stock-search { display: flex; align-items: center; gap: 7px; min-width: 150px; max-width: 260px; flex: 1; background: #ffffff91; border: 1px solid var(--line); padding: 7px 10px; border-radius: 10px; }
.stock-search .icon { color: #969098; width: 15px; height: 15px; }
.stock-search input { padding: 0; border: 0; background: none; min-width: 0; width: 100%; font-size: 11px; color: var(--ink); outline: none; }
.stock-search:focus-within { outline: 2px solid #c68b5a66; outline-offset: 2px; }
.tablewrap { overflow: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { color: #85808a; font-size: 10px; font-weight: 500; background: #fbfaf9a6; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 17px; white-space: nowrap; }
td { padding: 13px 17px; border-bottom: 1px solid #bcb2a31f; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fff6ed82; }
.inventory-panel table { min-width: 780px; }
.inventory-panel td { padding: 10px 14px; height: 63px; }
.inventory-panel th { padding: 12px 14px; }
.inventory-panel th:nth-child(n+3):nth-child(-n+7) { text-align: right; }
.productcell { min-width: 190px; font-weight: 560; }
.productcell small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 400; }
.product-name-cell { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.product-name-cell:hover { color: var(--accent); }
.product-name-cell > span:last-child { min-width: 115px; max-width: 310px; }
.product-thumb { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #ffffff; border-radius: 9px; background: #efede9a1; object-fit: contain; }
.product-thumb.placeholder { display: grid; place-items: center; color: #c2b4a8; background: linear-gradient(135deg, #f5eee7, #eee8e0); }
.sku { color: #8b8382; font: 11px/1.5 ui-monospace, SFMono-Regular, monospace; white-space: nowrap; }
.qty { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { font-weight: 600; }
.available { color: var(--green); }
.quantity-badge { display: inline-block; min-width: 50px; text-align: center; padding: 4px 9px; border-radius: 9px; background: #e8f3e4b0; font-size: 12px; }
.quantity-badge.low { background: #fff0d4d6; color: var(--warn); }
.quantity-badge.zero { background: #edeae680; color: #9d9290; }
.price-cell { color: #66616b; font-size: 11px; }
.row-action { width: 32px; padding-left: 0 !important; }
.row-action a { display: inline-flex; color: #a29b95; padding: 4px; border-radius: 6px; }
.row-action .icon { width: 14px; height: 14px; }
.sort-heading { border: 0; padding: 0; background: none; font: inherit; color: inherit; white-space: nowrap; }
.sort-heading.active { color: var(--accent); font-weight: 600; }
.sort-heading span { margin-left: 4px; }
.table-footer { padding: 13px 21px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #8d8690; font-size: 10px; }
.pagination { display: flex; align-items: center; gap: 11px; }
.pagination .icon-button { border: 1px solid var(--line); background: #ffffff8c; border-radius: 10px; min-width: 28px; min-height: 28px; padding: 5px; }
.pagination .icon { width: 14px; height: 14px; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.twocol .panel { margin-top: 0; }
.list, .stores { padding: 0 22px; }
.listitem { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; font-size: 12px; border-top: 1px solid var(--line); }
.listitem small { display: block; font-size: 10px; margin-top: 5px; color: var(--muted); }
.listitem a { text-decoration: none; color: var(--ink); }
.expiry-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; font-size: 11px; }
.expiry-preview > span { color: #9b9090; font-size: 10px; }
.expiry-preview strong { color: #77706e; font-weight: 500; white-space: nowrap; }
.panel-note { padding: 9px 22px 16px; display: flex; gap: 8px; align-items: center; font-size: 10px; color: var(--warn); }
.panel-note .icon { width: 14px; height: 14px; }
.store { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.storeicon { width: 35px; height: 35px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; }
.storeicon .icon { width: 18px; height: 18px; }
.store-main { min-width: 0; flex: 1; }
.storetitle { font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.store small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--green); background: #e8f2e4; padding: 5px 9px; border-radius: 10px; font-weight: 550; white-space: nowrap; }
.pill.warn { background: #fcf0dc; color: var(--warn); }
.pill.red { background: #fae8e3; color: var(--red); }
.pill.gray { background: #efebe7; color: #8e827a; }
.pill.dark { background: #ece6e4; color: #8c6d69; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock-note { color: #948b86; font-size: 11px; margin-top: 8px; }
.notice { padding: 15px 18px; border: 1px solid #dfe5d2; border-radius: 14px; background: #f3f5e9cc; display: flex; gap: 12px; align-items: center; font-size: 12px; margin: 14px 0; line-height: 1.6; }
.notice.warn { background: #fff2e3; border-color: #f1d6b7; }
.notice p { margin: 7px 0; }
.empty { padding: 32px 20px; text-align: center; color: #a19792; font-size: 12px; }
.empty.compact { padding: 22px 10px; }
.muted { color: var(--muted); }
.block { display: block; margin-top: 6px; }
.link { border: 0; padding: 0; color: var(--accent); background: transparent; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 9px; color: #a49a92; font-size: 9px; margin: 24px 0 0; }
footer > span { display: inline-flex; align-items: center; gap: 5px; }
footer .icon { width: 11px; height: 11px; }
.product-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 11px; color: #a29791; margin: 2px 0 20px; }
.product-breadcrumb a { display: flex; align-items: center; gap: 4px; color: #8d8580; text-decoration: none; }
.product-breadcrumb .icon { width: 13px; height: 13px; }
.product-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.product-summary .panel:first-child, .history-panel { margin-top: 0; }
.product-card { padding: 12px 12px 0; }
.product-media { position: relative; }
.product-photo { display: block; background: #fffdf9; border-radius: 12px; overflow: hidden; }
.product-photo img { display: block; width: 100%; height: 265px; object-fit: contain; }
.product-photo-empty { height: 250px; background: radial-gradient(ellipse at 50% 35%, #fffcf6, #eee3d5aa); border: 1px solid #ffffffcc; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #a99380; }
.product-photo-empty .icon { width: 56px; height: 56px; stroke-width: 1; opacity: .65; margin-bottom: 5px; }
.product-photo-empty span { font-size: 13px; }
.product-photo-empty small { font-size: 10px; color: #b0a498; }
.photo-edit { position: absolute; top: 10px; right: 10px; }
.photo-edit .btn { font-size: 10px; padding: 7px 10px; background: #ffffffd4; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: #ffffffd6; }
.product-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 14px 0; }
.product-metrics > div { padding: 9px; background: #f8f6f28a; border-radius: 10px; min-width: 0; }
.product-metrics small { font-size: 9px; color: #8a8283; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.product-metrics small .icon { width: 13px; height: 13px; }
.product-metrics strong { display: block; font-size: 21px; font-weight: 630; letter-spacing: -.5px; margin-top: 5px; overflow-wrap: anywhere; }
.product-metrics strong span { font-size: 12px; font-weight: 500; }
.product-prices { display: grid; grid-template-columns: 1fr 1fr; padding: 17px 6px 20px; border-top: 1px solid var(--line); gap: 12px; }
.product-prices > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.product-prices small { font-size: 10px; color: #8a8283; display: block; margin-bottom: 5px; }
.product-prices strong { font-size: 17px; font-weight: 630; overflow-wrap: anywhere; }
.product-expiry th { font-size: 9px; }
.product-expiry td { padding: 10px 12px; font-size: 11px; }
.product-expiry .btn { padding: 5px 7px; font-size: 10px; border-radius: 8px; }
.history-panel { padding-bottom: 4px; }
#productHistory { max-height: min(760px, calc(100dvh - 310px)); min-height: 260px; overflow: auto; scrollbar-width: thin; scrollbar-color: #d4c3b2 transparent; }
.event-order a { color: inherit; text-decoration: none; }
.event-order a:hover { text-decoration: underline; }
.readonly-label { display: flex; gap: 6px; align-items: center; color: #99908d; font-size: 9px; white-space: nowrap; }
.readonly-label .icon { width: 14px; height: 14px; }
.history-filters { padding: 0 22px 17px; border-bottom: 1px solid var(--line); }
.timeline { margin: 0; padding: 5px 22px 0 38px; list-style: none; }
.timeline-event { position: relative; padding: 20px 0 18px 17px; border-bottom: 1px solid var(--line); }
.timeline-event::before { content: ''; position: absolute; left: -12px; top: 26px; bottom: -25px; width: 1px; background: #dfdbd5; }
.timeline-event:last-child::before { bottom: 24px; }
.timeline-event:last-child { border-bottom: 0; }
.timeline-dot { position: absolute; width: 12px; height: 12px; left: -17.5px; top: 26px; border: 2px solid #b0a9a0; background: #f9f6ef; border-radius: 50%; }
.increase > .timeline-dot { border-color: #90b38b; background: #dfecd8; }
.decrease > .timeline-dot { border-color: #cc8f7e; background: #f8e6df; }
.hold > .timeline-dot { border-color: #d6b577; background: #fcf1da; }
.event-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.event-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.event-title h3 { font-size: 13px; margin: 0; font-weight: 600; }
.event-top time { font-size: 9px; color: #94898b; text-align: right; flex-shrink: 0; margin-top: 3px; }
.movement { display: inline-flex; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.movement.increase { background: #e7f0df; color: #678457; }
.movement.decrease { background: #f7e5de; color: #b5725c; }
.movement.hold { background: #fcf0d7; color: #b28a42; }
.event-changes { font-size: 11px; color: #7b737b; line-height: 1.7; margin-top: 7px; overflow-wrap: anywhere; }
.event-changes strong { font-weight: 600; color: #60585e; }
.event-source { display: flex; align-items: center; gap: 7px; color: #827b83; font-size: 10px; margin-top: 9px; overflow-wrap: anywhere; }
.event-source .icon { width: 13px; height: 13px; }
.event-order { color: #9e8980; font-size: 10px; margin: 5px 0 0 20px; }
.event-reason { color: #91857d; font-size: 10px; font-style: italic; margin: 7px 0 0; overflow-wrap: anywhere; }
.event-id { font-size: 8px; color: #b8afa8; display: block; margin-top: 7px; }
.history-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 22px; font-size: 9px; color: #a2968e; border-top: 1px solid var(--line); }
.history-pagination .btn { font-size: 10px; padding: 7px 10px; }
.history-security { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 15px 18px 18px; font-size: 9px; color: #ada098; text-align: center; }
.history-security .icon { width: 13px; height: 13px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { padding: 25px; }
.card p, .card li { font-size: 12px; line-height: 1.85; }
.card ul { padding-left: 20px; }
.card .store { justify-content: space-between; align-items: center; }
.card .store > div { min-width: 0; }
.card .actions { margin-top: 12px; }
.wrap { min-width: 180px; white-space: normal; line-height: 1.8; }
.historydate { min-width: 140px; }
.search, .filter { background: #ffffffc9; border: 1px solid #ddd5cc; border-radius: 10px; padding: 10px 12px; color: var(--ink); font-size: 12px; max-width: 100%; }
.toolbar { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin: 16px 0; }
.error { color: var(--red); font-size: 12px; margin: 13px 0 0; line-height: 1.6; }
dialog { width: min(650px, calc(100vw - 32px)); max-height: 90dvh; border: 1px solid #ffffff; border-radius: 22px; background: #fffaf5f5; color: var(--ink); padding: 0; box-shadow: 0 30px 120px #69432933; }
dialog::backdrop { background: #65514240; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modalhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 23px 26px; border-bottom: 1px solid var(--line); }
.modalhead h2 { font-size: 20px; }
.close { border: 0; width: 29px; height: 29px; border-radius: 50%; background: #eee7df; color: #9b897d; font-size: 21px; }
.modalbody { padding: 25px 26px; }
.modalbody p { font-size: 12px; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; font-size: 12px; color: #787075; }
.field.full { grid-column: 1 / -1; }
.field input, .field select { border: 1px solid #ddd4c9; border-radius: 11px; padding: 12px; width: 100%; min-width: 0; background: #ffffffd4; color: var(--ink); }
.field small { color: #a4968c; font-size: 10px; line-height: 1.6; }
.field input:read-only { background: #f5efe6; color: #9e8c7a; }
input:disabled, select:disabled { opacity: .65; }
.modalfoot { display: flex; justify-content: flex-end; margin-top: 24px; gap: 9px; }
.image-editor { display: grid; gap: 12px; }
.image-editor img { max-width: 300px; max-height: 240px; width: 100%; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.image-editor input[type=file] { max-width: 100%; font-size: 11px; }
.image-editor .btn { justify-self: start; }
.lineRow { display: grid; grid-template-columns: minmax(0, 1fr) 75px 28px; gap: 8px; margin-bottom: 12px; }
.lineRow input, .lineRow select { min-width: 0; width: 100%; }
.login { max-width: 430px; margin: 12vh auto; padding: 32px; background: var(--paper); border: 1px solid #fff; border-radius: 24px; box-shadow: var(--shadow); }
.login .logo { padding: 0; color: #8d6550; }
.login h1 { margin: 30px 0 25px; }
.login .field { margin-top: 18px; }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 30; padding: 15px 21px; border: 1px solid #ffffffb3; border-radius: 15px; background: #544337ef; color: #fffaf1; box-shadow: 0 10px 45px #56403025; max-width: min(470px, calc(100vw - 32px)); font-size: 12px; line-height: 1.6; display: none; }
.toast.show { display: block; }
@supports (backdrop-filter: blur(1px)) { .panel, .card, .stat { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } }
@media (min-width: 1600px) { .main { padding-left: 36px; padding-right: 36px; } .stat { padding: 23px; } .product-photo img, .product-photo-empty { height: 320px; } }
@media (max-width: 1250px) { .shell { grid-template-columns: 210px minmax(0, 1fr); } .brandmark { display: none; } .brand { padding-left: 12px; } .main { padding-left: 20px; padding-right: 20px; } .topright { gap: 12px; } .today { display: none; } .stat { gap: 9px; padding: 16px 12px; } .stat-icon { width: 34px; height: 34px; border-radius: 10px; } .stat-icon .icon { width: 19px; height: 19px; } .statvalue { font-size: 24px; } .statlabel { font-size: 10px; } .product-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 14px; } .product-metrics { grid-template-columns: 1fr; gap: 4px; } .product-metrics > div { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; } .product-metrics strong { margin: 0; font-size: 19px; } .event-top { flex-direction: column; gap: 3px; } .product-prices strong { font-size: 14px; } .readonly-label { font-size: 0; } .product-expiry .tablewrap table { min-width: 355px; } }
@media (max-width: 980px) { .shell { grid-template-columns: 190px minmax(0, 1fr); } aside { padding: 24px 10px 16px; gap: 30px; } .logo { font-size: 24px; } .brandnote { font-size: 8px; } nav a { padding: 12px 10px; gap: 9px; font-size: 12px; } nav a .icon { width: 18px; height: 18px; } .main { padding: 0 17px 20px; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .statvalue.moneyvalue { font-size: 23px; } .twocol { grid-template-columns: 1fr; gap: 0; } .cards { grid-template-columns: 1fr; } .product-layout { grid-template-columns: 1fr; } .product-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .product-metrics > div { display: block; } .product-metrics strong { margin-top: 4px; } .product-photo img { height: 280px; } .product-photo-empty { height: 200px; } .readonly-label { font-size: 9px; } .event-top { flex-direction: row; } .history-panel { margin-top: 0; } .global-search { width: 100%; } .online { font-size: 0; gap: 0; } .topbar { gap: 13px; min-height: 78px; } .heading { flex-wrap: wrap; } .contextbar .update-time { display: none; } .table-footer { flex-wrap: wrap; } }
@media (max-width: 640px) { #productHistory { max-height: 68dvh; } .shell { display: block; } aside { position: relative; height: auto; padding: 19px 14px 8px; gap: 16px; border: 0; border-bottom: 1px solid #ffffff; } .brand { padding: 0 5px; gap: 10px; } .brandmark { display: grid; width: 30px; height: 32px; } .logo { font-size: 24px; } .brandnote { font-size: 8px; } nav { display: flex; overflow-x: auto; gap: 5px; padding: 0 0 5px; } nav a { flex-shrink: 0; font-size: 11px; padding: 8px 10px; min-height: 36px; border-radius: 10px; gap: 6px; } nav a .icon { width: 15px; height: 15px; } .asidebottom { display: none; } .main { padding: 0 14px 22px; } .topbar { min-height: 70px; gap: 8px; } .global-search { border-radius: 14px; padding: 2px 6px; } .global-search input { font-size: 11px; } .topright { gap: 5px; } .topright .online { display: none; } .contextbar { margin-bottom: 18px; gap: 8px; } .crumb { font-size: 9px; } h1 { font-size: 27px; } .heading { gap: 13px; margin-bottom: 17px; } .sub { font-size: 11px; } .btn { font-size: 11px; padding: 10px 12px; border-radius: 10px; } .actions { gap: 7px; } .stats { gap: 9px; margin: 18px 0; } .stat { border-radius: 15px; padding: 15px 11px; gap: 8px; } .stat-icon { width: 29px; height: 29px; border-radius: 9px; } .stat-icon .icon { width: 17px; height: 17px; } .statvalue { font-size: 23px; } .statvalue.moneyvalue { font-size: 16px; } .statlabel { font-size: 9px; } .statfoot { font-size: 8px; } .statvalue small { font-size: 12px; } .panel { border-radius: 15px; margin: 16px 0; } h2 { font-size: 16px; } .panelhead { padding: 18px 16px; } .stock-tools { padding: 0 16px 15px; gap: 11px; } .filter-tab { padding: 7px 9px; font-size: 10px; } .filter-tabs { gap: 5px; } .stock-search { max-width: none; min-width: 100%; } .table-footer { padding: 11px 14px; gap: 7px; } .pagination { gap: 8px; } .list, .stores { padding: 0 16px; } .store { gap: 9px; } .storetitle { font-size: 11px; } .store small { font-size: 9px; } .storeicon { width: 30px; height: 30px; } .pill { font-size: 9px; padding: 4px 7px; } .product-breadcrumb { font-size: 10px; margin-bottom: 17px; } .product-metrics { gap: 4px; } .product-metrics > div { padding: 7px; } .product-metrics small { font-size: 8px; } .product-metrics small .icon { display: none; } .product-metrics strong { font-size: 19px; } .product-metrics strong span { font-size: 10px; } .product-prices { padding: 14px 5px 17px; } .product-prices small { font-size: 9px; } .product-prices strong { font-size: 14px; } .product-photo img { height: 245px; } .product-photo-empty { height: 200px; } .history-filters { padding: 0 16px 15px; } .timeline { padding-left: 31px; padding-right: 16px; } .timeline-event { padding-left: 12px; } .event-top { flex-direction: column; gap: 4px; } .event-title h3 { font-size: 12px; } .event-changes { font-size: 11px; } .event-source { font-size: 9px; } .readonly-label { font-size: 8px; } .history-security { font-size: 8px; } .history-pagination { padding: 13px 16px; flex-wrap: wrap; } .formgrid { grid-template-columns: 1fr; } .field.full { grid-column: auto; } .modalhead, .modalbody { padding: 20px; } .modalhead h2 { font-size: 19px; } .toast { bottom: 15px; right: 15px; } .login { margin: 8vh 16px; padding: 25px; } .card { padding: 20px; } footer { font-size: 8px; } .stock-note { font-size: 10px; } }
@media (prefers-reduced-transparency: reduce) { aside, .panel, .stat, .card { background: #fffaf5; backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* Working warehouse documents and control screens */
aside{overflow-y:auto}nav{gap:3px}nav a{min-height:42px;padding-top:10px;padding-bottom:10px}
.warehouse-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.mini-metric{display:grid;gap:7px;background:#fff8efb3;border:1px solid #fff;border-radius:14px;padding:16px}.mini-metric>span{display:flex;align-items:center;gap:6px;font-size:10px;color:#a08065}.mini-metric .icon{width:15px;height:15px}.mini-metric strong{font-size:20px;font-weight:650}.mini-metric small{color:#a2978a;font-size:9px}.recipe-row{display:grid;grid-template-columns:minmax(0,1fr) 80px 29px;gap:8px;margin:10px 0}.receipt-row{border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:14px;background:#fffdf8}.receipt-line-title{display:flex;align-items:center;gap:9px;margin-bottom:15px}.receipt-line-title small{font-size:10px;color:var(--muted)}.receipt-line-title .close{margin-left:auto;flex-shrink:0}.preflight-box{font-size:11px;line-height:1.6;margin:12px 0 22px;max-height:520px;overflow:auto}.preflight-box .listitem small{display:block}.count-actual{width:110px}.report-values{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}.report-values small{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.report-values strong{font-size:21px;overflow-wrap:anywhere}.report-values>div{min-width:0}.count-actual:read-only{border:0;background:transparent}
@media(max-width:1150px){.warehouse-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.mini-metric{padding:12px}.mini-metric strong{font-size:18px}.report-values{grid-template-columns:1fr}.receipt-line-title{flex-wrap:wrap}.recipe-row{grid-template-columns:minmax(0,1fr) 62px 29px}}

/* Working warehouse UI 0.10.1 */
.workspace-badge{font-size:12px;color:#55725b;background:#edf3e9;padding:7px 12px;border-radius:20px}
.guide-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}.guide-section{padding:26px;margin-top:22px}.guide-layout .guide-section{margin-top:0}.guide-section h2{margin:0 0 14px;font-size:20px}.guide-section p,.guide-section li{line-height:1.7;color:var(--text,#384039)}.guide-section li{margin:8px 0}.guide-attention{border-color:#d5b88d;background:rgba(255,244,224,.65)}
.order-filters{padding:22px;margin-bottom:20px}.order-filters fieldset{margin:0;border:0;padding:0}.order-filters legend{font-weight:650;margin-bottom:16px}.status-checkboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px}.status-checkboxes label{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--line,#e6ddd2);border-radius:12px;cursor:pointer}.status-checkboxes input{width:17px;height:17px;accent-color:#63795a;margin-top:3px}.status-checkboxes small{display:block;color:var(--muted,#7d807b);font-size:12px}.filter-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;color:var(--muted,#7d807b);font-size:13px}
.inventory-group th{background:#f1e9df;border-top:15px solid #fffaf6;padding:15px!important;text-align:left}.inventory-group strong{display:inline-block;margin-right:14px}.inventory-group small{display:block;font-weight:400;color:#7a7b73;margin-top:4px}.inventory-operator{display:flex;flex-direction:column;gap:5px;padding:15px;background:#f3ede4;border-radius:12px;margin-bottom:16px}.inventory-operator small{color:#74766e}.count-actual{max-width:160px}
@media(max-width:900px){.guide-layout{grid-template-columns:1fr}.guide-section{padding:18px}.status-checkboxes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Warehouse removal and inventory lookup */
.inventory-searchbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0 16px}.inventory-searchbar .stock-search{flex:1;min-width:230px}.inventory-searchbar [role="status"]{color:var(--muted);font-size:13px}.inventory-searchbar input{width:100%}tr[data-inventory-group][hidden],tr[data-inventory-row][hidden],[hidden]#inventorySearchEmpty{display:none!important}.confirm-check{display:flex;align-items:flex-start;gap:10px;line-height:1.6;margin:18px 0}.confirm-check input{margin-top:6px;flex:none;width:auto}.archive-note{padding:12px 20px;margin:0;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}

/* Orders: compact controls, matching the warm glass panels. */
.orders-toolbar{display:flex;align-items:end;gap:12px;padding:18px 20px;overflow:visible;flex-wrap:wrap;position:relative;z-index:3}
.order-search{display:flex;align-items:center;gap:10px;flex:1 1 280px;border:1px solid var(--line);background:#ffffffc9;border-radius:14px;padding:5px 6px 5px 14px;min-height:48px;color:var(--muted)}
.order-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:8px 0}.order-search:focus-within{border-color:#d6a179;box-shadow:0 0 0 3px #e9b88c24}.order-search .icon{flex:none;width:18px}.order-search .btn{flex:none}
.order-store-filter{display:grid;gap:5px;min-width:185px}.order-store-filter>span,.order-filter-caption{font-size:10px;color:var(--muted);letter-spacing:.03em}.order-store-filter select{font:inherit;font-size:12px;min-height:48px;padding:11px 30px 11px 13px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:#ffffffc9;width:100%}
.order-status-menu{position:relative;min-width:190px}.order-status-menu summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 16px;gap:4px 10px;min-height:48px;padding:9px 13px;border:1px solid var(--line);border-radius:14px;background:#ffffffc9;font-size:12px}.order-status-menu summary::-webkit-details-marker{display:none}.order-filter-caption{grid-column:1}.order-status-menu summary .icon{grid-column:2;grid-row:1/3;align-self:center;width:16px;transform:rotate(90deg)}.order-status-menu[open] summary{border-color:#d6a179}.order-status-menu[open] summary .icon{transform:rotate(-90deg)}
.order-status-popover{position:absolute;top:calc(100% + 8px);right:0;width:285px;max-width:calc(100vw - 48px);border:1px solid var(--line);border-radius:18px;padding:12px;background:#fffdf9;box-shadow:0 15px 45px #52371a20;z-index:8}.order-status-actions{display:flex;justify-content:space-between;gap:10px;padding:0 0 9px;border-bottom:1px solid var(--line);margin-bottom:5px}#orderStatusOptions{max-height:360px;overflow-y:auto}.order-status-option{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;font-size:12px;cursor:pointer}.order-status-option:hover{background:#f4eadd}.order-status-option input{width:16px;height:16px;accent-color:#b68257;margin:0}.order-status-option small{margin-left:auto;color:var(--muted);font-size:11px}.order-reset{min-height:48px}.order-list-summary{display:flex;justify-content:space-between;gap:12px;padding:15px 20px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}.orders-table{overflow:hidden}.orders-table .tablewrap{border-radius:0}.order-pagination{gap:5px}.order-page{border:1px solid transparent;background:transparent;border-radius:10px;min-width:34px;height:34px;font:inherit;font-size:12px;cursor:pointer;color:var(--muted)}.order-page:hover{background:#efe4d6}.order-page.active{background:#ead4bc;color:#5d4029;border-color:#dfbea0;font-weight:600}.page-gap{color:var(--muted);font-size:12px}#orderResults[aria-busy=true]{opacity:.65;pointer-events:none;transition:opacity .12s}.orders-table .table-footer{gap:12px}
@media(max-width:640px){.orders-toolbar{padding:14px;gap:10px}.order-search{flex-basis:100%}.order-store-filter{min-width:0;flex:1 1 45%}.order-status-menu{min-width:0;flex:1 1 45%;align-self:end}.order-reset{min-height:34px;padding:6px 10px;margin-left:auto}.order-list-summary{padding:12px 14px;font-size:10px}.order-pagination{gap:2px}.order-page{min-width:29px;height:32px}.order-status-popover{right:0}.order-store-filter select{font-size:11px}.order-status-menu summary{font-size:11px}.order-search input{font-size:12px}}