/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · genre: operational dashboard · macrostructure: Stat-Led
 * theme: Atelier · anchor hue: Archive oxblood · audience: chủ shop · use: nắm số liệu hằng ngày ngay lập tức · tone: vận hành cao cấp
 * contrast: pass (40–41) · nav: N9 sidebar · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · icons: pass (30) · responsive: pass (34, 49–57) */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a { white-space: nowrap; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
input, select { outline: 2px solid transparent; outline-offset: 1px; }
button:disabled, input:disabled, select:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
i { width: 1.1rem; height: 1.1rem; stroke-width: 1.8; }
.splash { position: fixed; z-index: 30; inset: 0; display: grid; place-content: center; gap: var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); text-align: center; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out); }
.splash img { width: min(16rem, 58vw); max-height: 10rem; object-fit: contain; }
.splash span { font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; }
.splash.is-gone { opacity: 0; visibility: hidden; }
.app { min-height: 100dvh; }
.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 17.25rem; padding: var(--space-lg) var(--space-md); border-inline-end: var(--rule); background: var(--color-paper); }
.brand-lockup { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm) var(--space-xl); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; letter-spacing: .04em; }
.brand-lockup img { width: 2rem; height: 2rem; border-radius: var(--radius-sm); object-fit: cover; }
.shop-card { padding: var(--space-md); border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper-2); }
.shop-card__line { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; }
.shop-card strong { display: block; font-size: var(--text-sm); }
.shop-card small, .profile small { color: var(--color-muted); font-size: var(--text-xs); }
.nav-list { display: grid; gap: var(--space-2xs); margin-top: var(--space-xl); }
.nav-list p { margin: var(--space-md) var(--space-sm) var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: var(--space-sm); min-height: 2.75rem; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink-2); text-align: start; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav-item b { display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-inline-start: auto; border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); }
.nav-item.is-active { background: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) and (pointer: fine) { .nav-item:not(.is-active):hover { background: var(--color-paper-2); transform: translateX(2px); } }
.profile { display: flex; align-items: center; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-lg); border-top: var(--rule); }
.profile > span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-gold-soft); color: var(--color-ink); font-size: var(--text-xs); font-weight: 700; }
.profile div { min-width: 0; flex: 1; }.profile strong { display: block; font-size: var(--text-sm); }
.icon-btn, .bell-btn { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover, .bell-btn:hover { background: var(--color-paper-2); } }
.icon-btn:active, .bell-btn:active, .btn:active { transform: translateY(1px); }
.main { min-height: 100dvh; margin-inline-start: 17.25rem; padding: 0 clamp(var(--space-md), 3vw, var(--space-3xl)) var(--space-3xl); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 6.25rem; border-bottom: var(--rule); }
.topbar p, .overline, .section-heading span, .form-header span, .cart header span { margin: 0 0 var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.topbar h1 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.top-actions { display: flex; align-items: center; gap: var(--space-xs); }.search-trigger, .date-chip { display: flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink-2); }
.search-trigger { min-width: 14rem; }.search-trigger span { flex: 1; text-align: start; }.search-trigger kbd { padding: .1rem .3rem; border-radius: .25rem; background: var(--color-paper-2); font-size: var(--text-xs); }
.bell-btn { position: relative; border: var(--rule); }.bell-btn b { position: absolute; top: .25rem; right: .25rem; display: grid; place-items: center; min-width: 1rem; height: 1rem; border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-accent-ink); font-size: .6rem; }
.view { display: none; padding-top: clamp(var(--space-xl), 4vw, var(--space-3xl)); }.view.is-visible { display: block; animation: view-enter var(--dur-base) var(--ease-out); }
@keyframes view-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); align-items: stretch; gap: clamp(var(--space-lg), 4vw, var(--space-3xl)); padding-bottom: var(--space-2xl); border-bottom: var(--rule); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: var(--space-lg); }.hero-copy h2, .view-intro h2 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: var(--text-display); font-style: normal; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.hero-copy p, .view-intro p { max-width: 58ch; margin: var(--space-lg) 0 0; color: var(--color-muted); }.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 2.75rem; padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn--ink { background: var(--color-ink); color: var(--color-paper); }.btn--line { background: var(--color-paper); color: var(--color-ink); }.btn--wide { width: 100%; }
@media (hover: hover) and (pointer: fine) { .btn--ink:hover { background: var(--color-accent); color: var(--color-accent-ink); }.btn--line:hover { background: var(--color-paper-2); } }
.command-sheet { display: flex; flex-direction: column; justify-content: space-between; min-height: 22rem; padding: var(--space-lg); border: var(--rule); border-radius: var(--radius-lg); background: var(--color-paper-2); color: var(--color-ink); }.command-sheet__top, .command-sheet__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; }.circle-stat { display: grid; place-content: center; width: 11.5rem; height: 11.5rem; margin: auto; border: 1px solid var(--color-accent); border-radius: 50%; text-align: center; }.circle-stat strong { color: var(--color-accent); font-family: var(--font-display); font-size: 3.5rem; line-height: 1; }.circle-stat small { margin-top: var(--space-xs); font-size: var(--text-xs); }.command-sheet__bottom button { display: flex; align-items: center; gap: var(--space-2xs); padding: 0; border: 0; background: transparent; color: var(--color-accent); font-weight: 600; }
.dashboard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-bottom: var(--space-lg); }.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }.metric-strip article { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 7.75rem; padding: var(--space-md); border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper-2); }.metric-strip article:first-child { background: var(--color-ink); color: var(--color-paper); }.metric-strip span, .report-cards span { display: block; color: var(--color-muted); font-size: var(--text-sm); }.metric-strip article:first-child span, .metric-strip article:first-child small { color: var(--color-paper-3); }.metric-strip strong, .report-cards strong { display: block; margin: var(--space-xs) 0; font-family: var(--font-display); font-size: clamp(1.65rem, 2.25vw, 2.2rem); line-height: 1; letter-spacing: -.025em; }.metric-strip small, .report-cards small { color: var(--color-muted); font-size: var(--text-xs); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-lg); margin-top: var(--space-lg); }.panel { border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper); }.alert-panel, .movement-panel, .recent-purchases, .report-sheet { padding: var(--space-lg); }.section-heading, .cart header, .form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }.section-heading h3, .cart h3, .form-header h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }.text-link { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0; border: 0; background: transparent; color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; }.text-link--danger { color: var(--color-error); }
.alert-list, .movement-list { display: grid; margin-top: var(--space-lg); }.alert-row, .movement-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: var(--rule); }.alert-row:first-child, .movement-row:first-child { border-top: 0; }.alert-row__icon, .movement-row__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-warning); }.movement-row__icon { background: var(--color-paper-2); color: var(--color-accent); }.alert-row div, .movement-row div { min-width: 0; flex: 1; }.alert-row strong, .movement-row strong { display: block; font-size: var(--text-sm); }.alert-row small, .movement-row small { color: var(--color-muted); font-size: var(--text-xs); }.status-tag { padding: .25rem .45rem; border-radius: var(--radius-round); background: var(--color-warning-soft); color: var(--color-warning); font-size: var(--text-xs); font-weight: 700; }.status-tag--good { background: var(--color-success-soft); color: var(--color-success); }.status-tag--late { background: var(--color-error-soft); color: var(--color-error); }
.view-intro { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); padding-bottom: var(--space-xl); }.view-intro h2 { font-size: clamp(2.5rem, 4vw, 4rem); }.view-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-sm); }.rule-note { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); color: var(--color-muted); font-size: var(--text-sm); }
.warehouse-select { display: grid; gap: var(--space-xs); min-width: 13rem; }.warehouse-select label, .warehouse-filter, .customer-input label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }.warehouse-select select, .warehouse-filter select, .purchase-form input, .purchase-form select, .customer-input input { width: 100%; min-height: 2.75rem; margin-top: var(--space-xs); padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }.warehouse-select select:hover, .warehouse-filter select:hover, .purchase-form input:hover, .purchase-form select:hover, .customer-input input:hover { background: var(--color-paper-2); }
.sales-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .48fr); gap: var(--space-lg); }.catalog { min-width: 0; }.catalog-tools { display: flex; gap: var(--space-xs); margin-bottom: var(--space-lg); }.catalog-tools label { display: flex; flex: 1; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); }.catalog-tools input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--color-ink); }.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }.product-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 12rem; padding: var(--space-md); border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper); text-align: start; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }.product-card__tone { width: 2rem; height: 2rem; margin-bottom: auto; border-radius: 50% 50% 40% 40%; background: var(--color-product-1); }.tone-one .product-card__tone { background: var(--color-product-1); }.tone-two .product-card__tone { background: var(--color-product-2); }.tone-three .product-card__tone { background: var(--color-product-3); }.tone-four .product-card__tone { background: var(--color-product-4); }.tone-five .product-card__tone { background: var(--color-product-5); }.tone-six .product-card__tone { background: var(--color-product-6); }.product-card small { color: var(--color-muted); font-size: var(--text-xs); }.product-card strong { margin-top: var(--space-xs); font-size: var(--text-sm); }.product-card b { margin-top: var(--space-xs); color: var(--color-accent); font-size: var(--text-sm); }@media (hover: hover) and (pointer: fine) { .product-card:hover { background: var(--color-paper-2); transform: translateY(-2px); } }
.cart { position: sticky; top: var(--space-md); align-self: start; overflow: clip; border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper); }.cart header { padding: var(--space-lg); border-bottom: var(--rule); }.bill-scan { padding: var(--space-md) var(--space-lg); border-bottom: var(--rule); background: var(--color-paper-2); }.bill-scan > label, .purchase-scan-field { display: block; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; }.bill-scan > small { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }.scan-input { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); }.scan-input input { flex: 1; min-width: 0; min-height: 2.75rem; margin-top: 0; padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }.scan-input input:hover { background: var(--color-paper-2); }.scan-input .icon-btn { flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem; border: var(--rule); background: var(--color-paper); }.purchase-scan-field .scan-input { margin-top: var(--space-xs); }.cart-items { min-height: 12rem; padding: 0 var(--space-lg); }.empty-cart { display: grid; place-content: center; min-height: 12rem; color: var(--color-muted); text-align: center; }.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); padding: var(--space-md) 0; border-bottom: var(--rule); }.cart-line strong { display: block; font-size: var(--text-sm); }.cart-line small { color: var(--color-muted); font-size: var(--text-xs); }.quantity { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-xs); }.quantity button { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: var(--rule); border-radius: 50%; background: var(--color-paper); }.quantity span { min-width: 1rem; text-align: center; font-size: var(--text-xs); }.customer-input { padding: var(--space-md) var(--space-lg); border-top: var(--rule); }.cart-total { display: grid; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-paper-2); }.cart-total > div { display: flex; justify-content: space-between; font-size: var(--text-sm); }.cart-total > div:last-of-type { padding-top: var(--space-sm); border-top: var(--rule); font-weight: 700; }.cart-total > div:last-of-type strong { color: var(--color-accent); font-size: var(--text-md); }
.purchase-form { padding: var(--space-lg); }.form-header { padding-bottom: var(--space-lg); border-bottom: var(--rule); }.form-header small { color: var(--color-muted); font-size: var(--text-xs); }.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); padding: var(--space-lg) 0; }.form-grid label { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }.form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule); }.form-actions p { display: flex; align-items: center; gap: var(--space-xs); margin: 0; color: var(--color-muted); font-size: var(--text-sm); }.recent-purchases { margin-top: var(--space-lg); }.history-row { display: grid; grid-template-columns: 1.1fr .8fr .55fr .75fr; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: var(--rule); font-size: var(--text-sm); }.history-row small { color: var(--color-muted); }
.inventory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }.segmented { display: flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-sm); background: var(--color-paper-2); }.segmented button { min-height: 2.25rem; padding: 0 var(--space-sm); border: 0; border-radius: .4rem; background: transparent; font-size: var(--text-sm); }.segmented button.is-active { background: var(--color-paper); box-shadow: 0 1px 2px var(--color-rule); }.warehouse-filter { display: flex; align-items: center; gap: var(--space-sm); }.warehouse-filter select { width: 11rem; margin: 0; }.inventory-table-wrap { overflow: auto; }.inventory-table { width: 100%; border-collapse: collapse; min-width: 43rem; }.inventory-table th { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule); color: var(--color-muted); font-size: var(--text-xs); text-align: start; text-transform: uppercase; }.inventory-table td { padding: var(--space-md); border-bottom: var(--rule); font-size: var(--text-sm); }.inventory-table td small { color: var(--color-muted); }.inventory-table tr:last-child td { border-bottom: 0; }.warehouses-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); }.warehouse-card { padding: var(--space-lg); border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper-2); }.warehouse-card span { display: block; color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }.warehouse-card strong { display: block; margin: var(--space-xs) 0; font-family: var(--font-display); font-size: var(--text-xl); }.warehouse-card small { display: block; color: var(--color-muted); font-size: var(--text-xs); }.warehouse-card > small:first-child { color: var(--color-accent); font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.report-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }.report-cards article { padding: var(--space-lg); border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper); }.report-cards article > i { margin-bottom: var(--space-xl); color: var(--color-accent); }.report-sheet { margin-top: var(--space-lg); }.report-row { display: grid; grid-template-columns: 1fr 5fr auto; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-top: var(--rule); }.report-row small { color: var(--color-muted); }.bar { height: .5rem; overflow: clip; border-radius: var(--radius-round); background: var(--color-paper-2); }.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.permission-layout { display: grid; grid-template-columns: minmax(16rem, .62fr) minmax(0, 1.38fr); gap: var(--space-lg); }.staff-panel, .permission-panel { padding: var(--space-lg); }.staff-panel .section-heading small { color: var(--color-muted); font-size: var(--text-xs); }.staff-list { display: grid; margin-top: var(--space-lg); }.staff-row { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 4rem; padding: var(--space-sm) 0; border: 0; border-top: var(--rule); background: transparent; text-align: start; }.staff-row.is-selected { color: var(--color-accent); }.staff-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-gold-soft); color: var(--color-ink); font-size: var(--text-xs); font-weight: 700; }.staff-row div { min-width: 0; flex: 1; }.staff-row strong { display: block; font-size: var(--text-sm); }.staff-row small { color: var(--color-muted); font-size: var(--text-xs); }.staff-role { padding: .2rem .45rem; border-radius: var(--radius-round); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }.staff-row.is-selected .staff-role { background: var(--color-accent-soft); color: var(--color-accent); }.role-field { display: grid; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }.role-field select { min-height: 2.5rem; padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }.permission-note { margin: var(--space-lg) 0 var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }.permission-table { display: grid; }.permission-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 4.75rem); align-items: center; min-height: 3.75rem; border-top: var(--rule); }.permission-row.is-head { min-height: 2.5rem; color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }.permission-row > span:not(:first-child), .permission-row label { display: grid; place-items: center; }.permission-row label { min-height: 2.75rem; }.permission-row input { width: 1rem; height: 1rem; accent-color: var(--color-accent); }.permission-row small { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }.modal .employee-form { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }.employee-form label { display: grid; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }.employee-form input { min-height: 2.75rem; padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }.employee-permissions { margin-top: var(--space-lg); }.employee-permissions > strong { display: block; margin-bottom: var(--space-xs); }.employee-permission-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 4.25rem); align-items: center; padding: var(--space-sm) 0; border-top: var(--rule); font-size: var(--text-sm); }.employee-permission-row label { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); font-size: var(--text-xs); font-weight: 500; }.employee-permission-row input { accent-color: var(--color-accent); }
dialog { width: min(31rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-paper); color: var(--color-ink); box-shadow: 0 1rem 4rem var(--color-ink-2); }dialog::backdrop { background: var(--color-overlay); }.modal { padding: var(--space-xl); }.modal h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); }.modal p { color: var(--color-muted); }.modal-actions { display: flex; justify-content: end; gap: var(--space-sm); margin-top: var(--space-xl); }.scanner-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }.scanner-modal__head span { display: block; margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; }.scanner-modal video { display: block; width: 100%; min-height: 14rem; margin-top: var(--space-lg); border-radius: var(--radius-md); background: var(--color-ink); object-fit: cover; }.scanner-modal p { margin-bottom: 0; }.warehouse-manager-list { display: grid; margin-top: var(--space-lg); border-top: var(--rule); }.warehouse-manager-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule); }.warehouse-manager-row span { min-width: 0; }.warehouse-manager-row strong, .warehouse-manager-row small { display: block; }.warehouse-manager-row strong { font-size: var(--text-sm); }.warehouse-manager-row small { color: var(--color-muted); font-size: var(--text-xs); }.warehouse-manager-row b { flex: 0 0 auto; color: var(--color-accent); font-size: var(--text-sm); }.warehouse-form { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }.warehouse-form > label { display: grid; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }.warehouse-form input { width: 100%; min-height: 2.75rem; padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }.invoice { text-align: center; }.invoice img { max-width: 10rem; max-height: 4.5rem; object-fit: contain; }.invoice hr { border: 0; border-top: var(--rule); margin: var(--space-lg) 0; }.invoice-line { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; text-align: start; font-size: var(--text-sm); }.invoice-total { font-size: var(--text-md); font-weight: 700; }.toast { position: fixed; z-index: 40; right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); max-width: calc(100% - 2rem); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); opacity: 0; pointer-events: none; transform: translateY(.5rem); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }.toast.is-visible { opacity: 1; transform: translateY(0); }.only-mobile, .mobile-nav { display: none; }
@media (max-width: 59.99rem) { .sidebar { z-index: 20; transform: translateX(-105%); transition: transform var(--dur-base) var(--ease-out); }.sidebar.is-open { transform: translateX(0); }.scrim { position: fixed; z-index: 19; inset: 0; background: var(--color-scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }.scrim.is-open { opacity: 1; pointer-events: auto; }.main { margin-inline-start: 0; padding-bottom: calc(var(--space-3xl) + 4.5rem + env(safe-area-inset-bottom)); }.topbar .only-mobile { display: none; }.brand-lockup .only-mobile { display: inline-grid; margin-inline-start: auto; }.mobile-nav { position: fixed; z-index: 15; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(4.5rem + env(safe-area-inset-bottom)); padding: var(--space-xs) var(--space-2xs) calc(var(--space-xs) + env(safe-area-inset-bottom)); border-top: var(--rule); background: var(--color-paper); box-shadow: 0 -.5rem 1.5rem var(--color-overlay); }.mobile-nav__item { display: grid; justify-items: center; align-content: center; gap: var(--space-2xs); min-width: 0; min-height: 3.5rem; padding: var(--space-2xs); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; line-height: 1; }.mobile-nav__item i { width: 1.25rem; height: 1.25rem; }.mobile-nav__item span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }.mobile-nav__item.is-active { background: var(--color-accent-soft); color: var(--color-accent); }.mobile-nav__item:active { transform: translateY(1px); }.hero-split, .dashboard-grid, .sales-layout, .permission-layout { grid-template-columns: minmax(0, 1fr); }.metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.command-sheet { min-height: 16rem; }.cart { position: static; order: -1; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .main { padding-inline: var(--space-md); }.topbar { min-height: 5rem; }.top-actions .search-trigger, .date-chip { display: none; }.top-actions { margin-inline-start: auto; }.dashboard-actions { justify-content: stretch; }.dashboard-actions .btn { flex: 1; }.view-intro, .inventory-toolbar, .form-actions { align-items: flex-start; flex-direction: column; }.view-intro h2 { font-size: clamp(2.4rem, 15vw, 3.4rem); }.hero-copy h2 { font-size: clamp(2.8rem, 16vw, 4rem); }.metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-strip article, .metric-strip article + article { min-height: 6.75rem; padding: var(--space-md); border: var(--rule); border-radius: var(--radius-md); }.metric-strip article:first-child { border: var(--rule); background: var(--color-ink); }.metric-strip strong { font-size: clamp(1.45rem, 7.5vw, 1.8rem); }.product-grid, .form-grid, .warehouses-row, .report-cards { grid-template-columns: 1fr; }.product-card { min-height: 8rem; }.product-card__tone { margin-bottom: var(--space-lg); }.segmented { width: 100%; overflow-x: auto; }.warehouse-filter { width: 100%; justify-content: space-between; }.warehouse-filter select { flex: 1; }.history-row { grid-template-columns: 1fr 1fr; }.history-row > :last-child { display: none; }.report-row { grid-template-columns: 1fr auto; }.report-row .bar { grid-column: 1 / -1; }.rule-note { white-space: normal; }.permission-row { grid-template-columns: minmax(0, 1fr) repeat(3, 3.25rem); }.employee-permission-row { grid-template-columns: minmax(0, 1fr) repeat(3, 3.25rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; } }
.auth-shell { display: grid; min-height: 100dvh; padding: var(--space-lg); place-items: center; background: var(--color-paper-2); }.auth-card { width: min(29rem, 100%); padding: var(--space-xl); border: var(--rule); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: 0 1rem 3rem var(--color-overlay); }.auth-brand { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; letter-spacing: .04em; }.auth-brand img { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); object-fit: cover; }.auth-copy { margin-top: var(--space-2xl); }.auth-copy h1 { margin-top: var(--space-xs); font-size: var(--text-2xl); line-height: 1.1; }.auth-copy p { max-width: 55ch; color: var(--color-muted); }.auth-form { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }.auth-form label { display: grid; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }.auth-form input { width: 100%; min-height: 2.75rem; padding: 0 var(--space-sm); border: var(--rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }.auth-form input:hover { background: var(--color-paper-2); }.auth-note { min-height: 1lh; margin: 0; color: var(--color-muted); font-size: var(--text-xs); }
.app[hidden], .auth-shell[hidden] { display: none !important; }
.auth-form label[hidden] { display: none !important; }
.product-card__image { width: 100%; aspect-ratio: 4 / 3; margin-bottom: auto; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-paper-2); }.product-manager { margin-top: var(--space-lg); padding: var(--space-lg); }.product-manager__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); }.product-manager-card { overflow: clip; border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper-2); }.product-manager-card__image, .product-detail__image, .product-upload-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--color-paper-3); color: var(--color-muted); object-fit: cover; }.product-manager-card__body { padding: var(--space-md); }.product-manager-card__body small, .product-manager-card__body span { display: block; color: var(--color-muted); font-size: var(--text-xs); }.product-manager-card__body strong { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); }.product-manager-card__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); }.product-upload-preview { margin-top: var(--space-xs); border: var(--rule); border-radius: var(--radius-sm); }.product-upload-preview img { width: 100%; height: 100%; object-fit: cover; }.product-detail__image { margin-top: var(--space-lg); border-radius: var(--radius-md); }.product-detail__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 59.99rem) { .product-manager__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .auth-card { padding: var(--space-lg); }.product-manager__grid { grid-template-columns: 1fr; } }