:root {
  --ink: #18231f;
  --muted: #74817b;
  --line: #e1e7e3;
  --paper: #fff;
  --canvas: #f5f7f4;
  --green: #287c6d;
  --green-dark: #1d6659;
  --green-soft: #e4f1ed;
  --amber: #d18b20;
  --red: #d85046;
  --purple: #7653a7;
  --blue: #477ca8;
  --shadow: 0 10px 35px rgba(32, 54, 45, .07);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 254px; padding: 27px 18px 18px; display: flex; flex-direction: column; background: #172a25; color: #eef7f2; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 31px; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.07); font-weight: 800; }
.brand-mark span { color: #5dbea9; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }.brand small { margin-top: 4px; color: #94aaa2; font-size: 11px; }
.nav-label { margin: 0 12px 9px; color: #718b82; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.main-nav { display: grid; gap: 3px; }
.nav-button { width: 100%; min-height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 9px; background: transparent; color: #adbbb6; cursor: pointer; text-align: left; font-size: 13px; transition: .18s ease; }
.nav-button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-button.active { background: #275e52; box-shadow: inset 3px 0 0 #68c6af; color: #fff; }
.nav-button > span:nth-child(2) { flex: 1; }
.nav-icon { width: 20px; color: #9bb0a8; font-size: 20px; text-align: center; }
.nav-button.active .nav-icon { color: #8ad4c1; }
.nav-button b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 99px; background: #d79b36; color: #fff; font-size: 10px; }
.side-card { margin: auto 3px 17px; padding: 17px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: linear-gradient(145deg, rgba(63,130,114,.27), rgba(255,255,255,.03)); }
.side-icon { width: 38px; height: 38px; margin-bottom: 13px; display: grid; place-items: center; border-radius: 10px; background: rgba(91,190,168,.16); color: #6ed0b8; font-size: 24px; }
.side-card strong { font-size: 13px; }.side-card p { margin: 7px 0 13px; color: #9db2aa; font-size: 11px; line-height: 1.55; }
.side-card .link-button { color: #7bd1bc; }
.user-card { padding: 18px 7px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #d8a057; color: #3a2a14; font-size: 10px; font-weight: 800; }
.user-card > div:nth-child(2) { flex: 1; min-width: 0; }.user-card strong, .user-card small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.user-card strong { font-size: 11px; }.user-card small { margin-top: 3px; color: #829a91; font-size: 9px; }.user-card > span { color: #718b82; font-size: 11px; }

.workspace { width: calc(100% - 254px); min-height: 100vh; margin-left: 254px; }
.topbar { position: sticky; top: 0; z-index: 30; height: 68px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: #9aa39f; font-size: 11px; }.breadcrumb i { font-size: 18px; font-style: normal; }.breadcrumb strong { color: #3a4a44; }
.top-actions { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.global-search, .table-search { display: flex; align-items: center; gap: 8px; color: #8b9691; }
.global-search { width: min(335px, 35vw); height: 37px; padding: 0 12px; border: 1px solid #eef1ef; border-radius: 9px; background: #f5f7f5; }
.global-search input, .table-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.icon-button { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.notification { position: relative; }.notification i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #e85f54; }
.mobile-menu { display: none; font-size: 18px; }

.button { min-height: 37px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 9px; font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer; transition: .18s ease; }
.button.primary { background: var(--green); color: #fff; box-shadow: 0 5px 13px rgba(40,124,109,.18); }.button.primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.button.secondary { border: 1px solid var(--line); background: #fff; color: #3f514a; }.button.secondary:hover { border-color: #bdcac5; background: #fafbfa; }
.button.full { width: 100%; }
.link-button { padding: 0; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 750; cursor: pointer; }.link-button.centered { margin: 13px auto 0; }

.content { max-width: 1510px; margin: 0 auto; padding: 28px 34px 50px; }
.view { display: none; animation: fade-up .3s ease; }.view.active { display: block; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }
.page-heading { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.eyebrow { margin: 0 0 7px !important; color: var(--green) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .13em; text-transform: uppercase; }
.page-heading h1 { margin: 0 0 6px; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.14; letter-spacing: -.04em; }.page-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.panel { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: 0 6px 28px rgba(31,54,44,.04); }
.panel-head { padding: 17px 19px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.panel-head h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; }.panel-head p { margin: 4px 0 0; color: #8b9691; font-size: 9px; }

.metric-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.metric-card { position: relative; min-height: 104px; padding: 17px 17px 15px 59px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 5px 22px rgba(34,56,47,.035); }
.metric-icon { position: absolute; top: 17px; left: 15px; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; font-weight: 800; }.metric-icon.mint { background: #e2f1ec; color: var(--green); }.metric-icon.amber { background: #f8ecd7; color: #bf7a16; }.metric-icon.purple { background: #ede6f5; color: var(--purple); }.metric-icon.blue { background: #e4edf6; color: var(--blue); }
.metric-card > small { color: #76827d; font-size: 10px; font-weight: 650; }.metric-card > strong { margin: 5px 0; display: block; font-size: 23px; letter-spacing: -.04em; }.metric-card > strong em { color: #61716a; font-size: 10px; font-style: normal; letter-spacing: 0; }.metric-card p { margin: 0; color: #89938f; font-size: 9px; }.metric-card p.positive { color: var(--green); font-weight: 750; }.metric-card p.warning-copy { color: #c67b16; font-weight: 750; }.metric-card p span { margin-left: 3px; color: #89938f; font-weight: 400; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .66fr); gap: 14px; align-items: stretch; }
.stock-panel { min-width: 0; overflow: hidden; }.stock-list { border-top: 1px solid var(--line); }
.stock-row { width: 100%; min-height: 72px; padding: 9px 15px 9px 17px; display: grid; grid-template-columns: 42px minmax(160px, 1.5fr) 75px minmax(105px, .9fr) 104px 15px; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #edf0ee; background: #fff; text-align: left; cursor: pointer; }.stock-row:last-child { border-bottom: 0; }.stock-row:hover { background: #fafcfb; }
.stock-info, .stock-location, .stock-level { min-width: 0; }.stock-info strong, .stock-info span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.stock-info strong { font-size: 10.5px; }.stock-info span { margin-top: 4px; color: #8a9691; font-size: 9px; }.stock-location span, .stock-level span { display: block; margin-bottom: 4px; color: #99a29e; font-size: 8px; }.stock-location strong { font-size: 9px; }.stock-level-head { display: flex; justify-content: space-between; align-items: flex-end; }.stock-level strong { font-size: 11px; }.stock-level small { color: #98a19d; font-size: 8px; font-weight: 500; }
.progress { height: 4px; overflow: hidden; border-radius: 99px; background: #edf0ee; }.progress i { display: block; height: 100%; border-radius: inherit; }.progress i.good { background: #48a78e; }.progress i.warning { background: #db9b34; }.progress i.critical { background: #df645b; }.progress i.expiry { background: #8561ae; }
.status-pill { width: max-content; min-height: 23px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; font-size: 8px; font-weight: 750; white-space: nowrap; }.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }.status-pill.good { background: #e7f3ef; color: #347968; }.status-pill.good::before { background: #3c9a82; }.status-pill.warning { background: #faf0dd; color: #aa6b15; }.status-pill.warning::before { background: #d69530; }.status-pill.critical { background: #fae9e7; color: #bc4d45; }.status-pill.critical::before { background: #da5c53; }.status-pill.expiry { background: #f0eaf6; color: #74549a; }.status-pill.expiry::before { background: #8561ae; }

.bottle { position: relative; width: 35px; height: 49px; flex: 0 0 auto; filter: drop-shadow(0 5px 4px rgba(54,78,68,.1)); --cap: #2676c9; --glass: #d8eef7; }.bottle.large { width: 42px; height: 59px; }.bottle-cap { position: absolute; top: 0; left: 31%; width: 38%; height: 11%; border-radius: 3px 3px 1px 1px; background: var(--cap); }.bottle-neck { position: absolute; top: 9%; left: 35%; width: 30%; height: 15%; border: 1px solid rgba(58,80,71,.08); background: color-mix(in srgb, var(--glass), white 25%); }.bottle-body { position: absolute; inset: 21% 11% 0; overflow: hidden; border: 1px solid rgba(50,74,64,.12); border-radius: 4px 4px 8px 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--glass), white 15%), var(--glass) 60%, color-mix(in srgb, var(--glass), white 40%)); }.bottle-body::before { content: ""; position: absolute; top: 7%; bottom: 18%; left: 16%; width: 14%; border-radius: 99px; background: rgba(255,255,255,.45); }.bottle-body i { position: absolute; top: 36%; right: 12%; left: 12%; padding: 2px 0; border: 1px solid rgba(45,65,57,.08); background: rgba(255,255,255,.83); color: #4a5752; font-size: 6px; font-style: normal; font-weight: 800; text-align: center; }

.prep-card { padding: 0 17px 17px; overflow: hidden; background: linear-gradient(170deg, #f6faf8, #fff 45%); }.prep-hero { position: relative; margin: 0 -17px 16px; padding: 18px 18px 17px; overflow: hidden; background: linear-gradient(135deg, #173b33, #245e51); color: #fff; }.prep-hero::after { content: ""; position: absolute; top: -45px; right: -55px; width: 140px; height: 140px; border: 26px solid rgba(255,255,255,.04); border-radius: 50%; }.prep-hero > span { color: #8ee0cb; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.prep-hero h2 { position: relative; z-index: 1; margin: 15px 0 8px; font-size: 20px; line-height: 1.15; letter-spacing: -.03em; }.prep-hero p { position: relative; z-index: 1; max-width: 210px; margin: 0; color: #bdd0c9; font-size: 9.5px; line-height: 1.5; }.prep-card > label { display: block; margin-bottom: 6px; color: #68766f; font-size: 9px; font-weight: 750; }
.select-field, .modal-label input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #dfe5e1; border-radius: 8px; outline: none; background: #fff; color: #34443e; font-size: 10px; }.select-field:focus, .modal-label input:focus, .form-grid input:focus { border-color: #77ae9f; box-shadow: 0 0 0 3px rgba(40,124,109,.08); }
.set-preview { min-height: 63px; margin: 12px 0; padding: 9px 11px; display: flex; align-items: center; gap: 12px; border-radius: 9px; background: #f2f6f4; }.mini-stack { min-width: 58px; display: flex; align-items: center; padding-left: 5px; }.mini-stack .bottle + .bottle { margin-left: -14px; }.set-preview strong, .set-preview span { display: block; }.set-preview strong { font-size: 10px; }.set-preview span { margin-top: 4px; color: #839089; font-size: 8px; }
.chart-panel { min-width: 0; min-height: 270px; }.small-filter { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #5f6e68; font-size: 9px; }.chart-summary { padding: 2px 19px; display: flex; align-items: baseline; gap: 7px; }.chart-summary strong { font-size: 25px; letter-spacing: -.04em; }.chart-summary span { color: #89948f; font-size: 9px; }.chart-summary em { padding: 3px 5px; border-radius: 4px; background: var(--green-soft); color: var(--green); font-size: 8px; font-style: normal; font-weight: 750; }
.line-chart { position: relative; height: 165px; margin: 3px 19px 14px; }.chart-grid { position: absolute; inset: 0 0 20px; display: flex; flex-direction: column; justify-content: space-between; }.chart-grid i { height: 1px; background: #edf0ee; }.line-chart svg { position: absolute; inset: 0 0 20px; width: 100%; height: calc(100% - 20px); }.line-chart .area { fill: url(#area); }.line-chart .line { fill: none; stroke: var(--green); stroke-width: 2.5; vector-effect: non-scaling-stroke; }.chart-labels { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; color: #a1aaa6; font-size: 7px; }
.activity-list { padding: 2px 17px 10px; }.activity { padding: 12px 0; display: flex; align-items: center; gap: 9px; border-top: 1px solid #edf0ee; }.activity-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #e4f2ed; color: #347d6c; }.activity.out .activity-icon { background: #f7eae7; color: #c55a4f; }.activity > div:nth-child(2) { flex: 1; min-width: 0; }.activity strong, .activity p { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.activity strong { font-size: 9.5px; }.activity p { margin: 3px 0 0; color: #8d9793; font-size: 8px; }.activity time { color: #98a19d; font-size: 8px; }

.toolbar { margin-bottom: 12px; display: flex; gap: 8px; }.table-search { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.inventory-table { overflow: hidden; }.table-head, .table-row { padding: 0 18px; display: grid; grid-template-columns: minmax(240px, 1.8fr) .55fr .6fr .6fr .7fr 1fr; align-items: center; gap: 14px; }.table-head { height: 39px; border-bottom: 1px solid var(--line); background: #f7f9f7; color: #87928d; font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.table-row { min-height: 70px; border-bottom: 1px solid #edf0ee; font-size: 10px; }.table-row:last-child { border-bottom: 0; }.table-row > span { color: #6f7c76; }.table-product { display: flex; align-items: center; gap: 11px; min-width: 0; }.table-product strong, .table-product span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.table-product span { margin-top: 3px; color: #89948f; font-size: 8.5px; }.location-tag { width: max-content; padding: 5px 7px; border-radius: 6px; background: #f0f3f1; color: #596962 !important; font-weight: 650; }.empty-state { padding: 58px 20px; text-align: center; }.empty-state strong { display: block; margin-bottom: 5px; }.empty-state span { color: var(--muted); font-size: 10px; }

.sampling-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 15px; align-items: start; }.sampling-form, .set-result { padding: 24px; }.step-label { margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }.step-label > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e2f1ed; color: var(--green); font-size: 11px; font-weight: 800; }.step-label strong { font-size: 13px; }.step-label p { margin: 3px 0 0; color: #8b9691; font-size: 9px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid label, .modal-label { display: block; color: #63726b; font-size: 9px; font-weight: 750; }.form-grid input, .form-grid select { width: 100%; height: 40px; margin-top: 7px; padding: 0 11px; border: 1px solid #dfe5e1; border-radius: 8px; outline: 0; background: #fff; color: var(--ink); font-size: 10px; }.form-grid .wide { grid-column: 1 / -1; }.divider { height: 1px; margin: 26px 0 23px; background: var(--line); }
.result-badge { padding: 6px 9px; display: inline-flex; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.set-result h2 { margin: 15px 0 4px; font-size: 21px; letter-spacing: -.03em; }.set-result > p { margin: 0 0 18px; color: #839089; font-size: 10px; }.result-items { border-top: 1px solid var(--line); }.result-item { padding: 12px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.result-item > div:nth-child(2) { flex: 1; min-width: 0; }.result-item strong, .result-item span { display: block; }.result-item strong { font-size: 9.5px; }.result-item span { margin-top: 3px; color: #8b9691; font-size: 8px; }.result-item b { font-size: 14px; }.result-total { padding: 15px 0 18px; display: flex; justify-content: space-between; font-size: 10px; }.result-total span { color: #7a8781; }.result-total strong { font-size: 12px; }

.order-callout { margin-bottom: 13px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid #d5e9e2; border-radius: 11px; background: #edf6f2; }.order-callout > div { display: flex; align-items: center; gap: 10px; }.order-callout > div > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: var(--green); }.order-callout strong { font-size: 10px; }.order-callout p { margin: 3px 0 0; color: #728079; font-size: 9px; }.order-callout > strong { color: var(--green); }.order-table .table-head, .order-table .table-row { grid-template-columns: minmax(230px, 1.5fr) .55fr .6fr .6fr .55fr .7fr; }.order-qty { color: var(--green) !important; font-weight: 800; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, .6fr); gap: 15px; }.report-feature { min-height: 340px; }.report-feature .panel-head > strong { font-size: 18px; }.bar-chart { height: 250px; padding: 30px 30px 20px; display: flex; align-items: flex-end; gap: 18px; }.bar-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }.bar-chart i { width: min(44px, 70%); border-radius: 6px 6px 2px 2px; background: linear-gradient(#3b8e7c, #85c5b6); }.bar-chart span { color: #8d9893; font-size: 8px; }.quality-card { padding: 28px; }.quality-card > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 24px; }.quality-card h2 { margin: 20px 0 18px; font-size: 16px; }.quality-card > strong { display: block; color: var(--green); font-size: 38px; letter-spacing: -.05em; }.quality-card p { color: #77847e; font-size: 10px; line-height: 1.6; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; background: rgba(15,31,26,.58); backdrop-filter: blur(4px); }.modal { position: relative; width: min(430px, 100%); padding: 25px; border-radius: 16px; background: #fff; box-shadow: 0 28px 80px rgba(14,35,28,.28); animation: pop-in .23s ease; }@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(8px); } }.modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f2f5f3; font-size: 21px; cursor: pointer; }.scanner-icon { width: 48px; height: 48px; margin-bottom: 17px; display: grid; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 28px; }.modal h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.03em; }.modal > p:not(.eyebrow) { margin: 0 0 18px; color: #7b8782; font-size: 10px; }.modal-label { margin: 14px 0; }.modal-label > .select-field, .modal-label > input { margin-top: 7px; }
.scanned-product { margin-top: 10px; padding: 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #e4ebe7; border-radius: 10px; background: #f5f8f6; }.scanned-product > div:nth-child(2) { flex: 1; }.scanned-product strong, .scanned-product span { display: block; }.scanned-product strong { font-size: 10px; }.scanned-product span { margin-top: 4px; color: #7f8c86; font-size: 8px; }
.movement-tabs { margin: 16px 0; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 8px; background: #f0f3f1; }.movement-tabs button { height: 32px; border: 0; border-radius: 6px; background: transparent; color: #7e8a84; font-size: 8px; font-weight: 750; cursor: pointer; }.movement-tabs button.active { background: #fff; color: var(--green); box-shadow: 0 2px 8px rgba(28,54,44,.08); }.qty-input { height: 40px; margin-top: 7px; display: grid; grid-template-columns: 40px 1fr 40px; overflow: hidden; border: 1px solid #dfe5e1; border-radius: 8px; }.qty-input button { border: 0; background: #f6f8f6; font-size: 18px; cursor: pointer; }.qty-input input { min-width: 0; border: 0; border-right: 1px solid #e7ebe8; border-left: 1px solid #e7ebe8; outline: 0; text-align: center; font-weight: 750; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 150; width: min(370px, calc(100vw - 32px)); padding: 13px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #173b33; color: #fff; box-shadow: 0 20px 50px rgba(16,39,32,.28); animation: toast-in .28s ease; }@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }.toast > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #63bca6; }.toast > div { flex: 1; }.toast strong { font-size: 10px; }.toast p { margin: 3px 0 0; color: #bcd2ca; font-size: 9px; line-height: 1.45; }.toast button { border: 0; background: transparent; color: #9fb8af; font-size: 18px; cursor: pointer; }.scrim { display: none; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 290px; }
  .chart-panel, .activity-panel { grid-column: 1 / -1; }
  .activity-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.activity { border-top: 1px solid var(--line); }
  .stock-row { grid-template-columns: 42px minmax(145px, 1.4fr) 60px minmax(100px, .8fr) 95px 12px; gap: 9px; }
  .table-head, .table-row { grid-template-columns: minmax(220px, 1.6fr) .5fr .55fr .55fr .65fr .9fr; gap: 9px; }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: .25s ease; box-shadow: 20px 0 50px rgba(13,32,25,.18); }.sidebar.open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 35; border: 0; background: rgba(14,29,24,.45); }.scrim.visible { display: block; }
  .workspace { width: 100%; margin-left: 0; }.mobile-menu { display: grid; }.breadcrumb { display: none; }.topbar { padding: 0 20px; gap: 12px; }.top-actions { width: calc(100% - 45px); }.global-search { width: 100%; max-width: none; }
  .content { padding: 24px 20px 45px; }.dashboard-grid { grid-template-columns: 1fr; }.chart-panel, .activity-panel { grid-column: auto; }.activity-list { display: block; }
  .sampling-layout, .report-grid { grid-template-columns: 1fr; }.inventory-table { overflow-x: auto; }.table-head, .table-row { min-width: 830px; }
}

@media (max-width: 600px) {
  .topbar { padding: 0 14px; }.top-actions .primary { width: 37px; padding: 0; }.top-actions .primary b { display: none; }.content { padding: 20px 14px 40px; }.page-heading { align-items: flex-start; }.page-heading > .secondary { display: none; }.page-heading h1 { font-size: 24px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.metric-card { min-height: 113px; padding: 50px 12px 12px; }.metric-icon { top: 12px; left: 12px; }.metric-card > strong { font-size: 20px; }.metric-card p span { display: none; }
  .stock-row { grid-template-columns: 38px 1fr 22px 13px; padding: 10px 12px; }.stock-location, .stock-level { display: none; }.stock-info strong { white-space: normal; }.status-pill { width: 22px; padding: 0; justify-content: center; font-size: 0; }.status-pill::before { width: 6px; height: 6px; }
  .chart-labels span:nth-child(even) { display: none; }.toolbar { flex-wrap: wrap; }.table-search { flex-basis: 100%; }.form-grid { grid-template-columns: 1fr; }.form-grid .wide { grid-column: auto; }.sampling-form, .set-result { padding: 19px; }
  .order-callout { align-items: flex-start; flex-direction: column; }.order-callout > strong { margin-left: 41px; }.bar-chart { padding-right: 14px; padding-left: 14px; gap: 7px; }.modal { padding: 20px; }
}

@media print {
  .sidebar, .topbar, .button, .link-button, .toast { display: none !important; }
  .workspace { width: 100%; margin: 0; }.content { padding: 20px; }.view { display: none !important; }.view.active { display: block !important; }.panel { box-shadow: none; }
}