/* MR. LEATHER: shared tokens and application primitives. Loaded for screen only. */
@font-face{font-family:'Expo Arabic';src:url('../fonts/Expo-Arabic-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Expo Arabic';src:url('../fonts/Expo-Arabic-Book.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Expo Arabic';src:url('../fonts/Expo-Arabic-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
.reference-ui #pos-success[hidden],.reference-ui #pos-transaction[hidden],.reference-ui #checkout-error[hidden],.reference-ui #pos-success a[hidden]{display:none!important}
.reference-ui .pos-success{max-width:760px;margin-inline:auto;border-block-start:3px solid var(--brand)}
.reference-ui .pos-success>.ui-icon{width:32px;height:32px;color:var(--brand)}
.reference-ui .pos-success h2{font-size:22px;margin-block:var(--space-3)}
.reference-ui .pos-success .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.reference-ui .pos-success:focus{outline:2px solid var(--brand);outline-offset:4px}
/* Operational detail primitives share existing tokens; no print or workflow rules. */
.reference-ui .section-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);margin-block:0 var(--space-4);grid-column:1/-1}
.reference-ui .section-heading h2,.reference-ui .section-heading h3{margin:0;font-size:16px;font-weight:500}
.reference-ui .section-heading p{margin:0;font-size:12px;color:var(--text-secondary)}
.reference-ui .record-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);margin:var(--space-4) 0}
.reference-ui .record-meta>div{min-width:0;border-inline-start:2px solid var(--border);padding-inline-start:var(--space-3)}
.reference-ui .record-meta dt{font-size:11px;color:var(--text-secondary);margin-bottom:var(--space-1)}
.reference-ui .record-meta dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.reference-ui .record-meta :is(time,.numeric){font-variant-numeric:tabular-nums}
.reference-ui .record-timeline{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-4);padding:0;margin:var(--space-4) 0}
.reference-ui .record-timeline li{flex:1;min-width:140px;padding-block-start:var(--space-3);border-block-start:2px solid var(--border);font-size:12px}
.reference-ui .record-timeline time{display:block;color:var(--text-secondary);font-size:11px;font-variant-numeric:tabular-nums}
.reference-ui .detail-stack{display:grid;gap:var(--space-4);min-width:0}
.reference-ui .report-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--space-4);margin:0}
.reference-ui .report-metric{min-width:0;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface)}
.reference-ui .report-metric>dt{font-size:12px;color:var(--text-secondary);margin-bottom:var(--space-2)}
.reference-ui .report-metric>dd{margin:0;overflow-wrap:anywhere}
.reference-ui .report-metric>dd>.numeric{font-size:24px;font-weight:500}
.reference-ui .report-metric-wide{grid-column:1/-1}
.reference-ui .pos-workspace{min-width:0}
.reference-ui .pos-cart-head{display:grid;grid-template-columns:minmax(180px,1fr) 76px 100px 90px 44px;gap:8px;min-width:570px;padding:12px;color:var(--text-secondary);font-size:11px;border-bottom:1px solid var(--border)}
.reference-ui .pos-cart .section-heading{position:sticky;inset-inline-start:0}
.reference-ui .totals .section-heading{padding-bottom:var(--space-3);border-bottom:1px solid var(--border);margin-bottom:0}
.reference-ui .totals .money-row{background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius-control);padding:var(--space-4);align-items:center}
.reference-ui .totals #estimated{font-size:28px;font-family:var(--font-numeric);font-variant-numeric:tabular-nums}
.reference-ui .content form#checkout{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);align-content:start}
.reference-ui .content form#checkout>*{grid-column:1/-1;min-width:0}
.reference-ui .content form#checkout>label{margin:0}
.reference-ui .content form#checkout>label:has(input:is([name="payments[cash]"],[name="payments[card]"],[name="customer_name"],[name="customer_phone"])){grid-column:auto}
.reference-ui .content .pos-cart>.section-heading{padding:var(--space-3);margin:0}
.reference-ui .content .pos-cart:has(#cart>.hint) .pos-cart-head{display:none}
.reference-ui .content .detail-stack>.card{margin:0}
.reference-ui .content .numeric{font-family:var(--font-numeric);font-variant-numeric:tabular-nums;white-space:nowrap}
.reference-ui .content td .record-code{display:block;font-size:11px;color:var(--text-secondary);direction:ltr;text-align:start;unicode-bidi:isolate}
.reference-ui .content .permission-group>summary{cursor:pointer;padding:var(--space-3);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);border-radius:var(--radius-control);transition:background-color var(--motion-fast)}
.reference-ui .content .permission-group>summary:hover{background:var(--surface-subtle)}
.reference-ui .content .permission-group>summary h3{margin:0;font-size:15px}
.reference-ui .content .permission-group>summary small{color:var(--text-secondary)}
.reference-ui .content .permission-group>summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.reference-ui .content .permission-group[open]>summary{margin-bottom:var(--space-3);border-bottom:1px solid var(--border)}
/* Executive landing page, scoped independently from operational and print screens. */
.reference-ui .content:has(.executive-dashboard){padding-top:24px}
.reference-ui .content:has(.executive-dashboard)>.pagehead{margin-bottom:18px}
.reference-ui .executive-date{color:var(--text-secondary);font-size:13px}
.reference-ui .executive-dashboard{display:grid;gap:16px;min-width:0}
.reference-ui .executive-dashboard .ui-card{margin:0;padding:18px;min-width:0}
.reference-ui .executive-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:142px;padding:24px 28px;border:1px solid #3e3831;border-radius:var(--radius-card);color:#faf7f0;background:radial-gradient(ellipse at 85% 20%,#51443855,transparent 65%),repeating-linear-gradient(116deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(112deg,#3b332b,#1f1d1a 65%,#29241f)}
.reference-ui .executive-hero:after{content:"";position:absolute;z-index:-1;inset-block:-100px;inset-inline-start:64%;width:90px;transform:rotate(28deg);border-inline:1px solid #b192673b;box-shadow:8px 0 14px #0005,-5px 0 10px #0004;background:#14120f33}
.reference-ui .executive-hero h2{font-size:26px;line-height:1.4;margin:4px 0 8px;color:inherit;font-weight:500}
.reference-ui .executive-hero p{font-size:13px;margin:0;color:#ded8cf}
.reference-ui .executive-eyebrow{font-size:14px;color:#e6e0d7}
.reference-ui .executive-scope{font-size:12px;border:1px solid #e1d7c733;padding:6px 12px;border-radius:20px;color:#e6e0d7;align-self:flex-end}
.reference-ui .executive-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.reference-ui .executive-kpi{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.reference-ui .executive-kpi>.ui-icon{position:absolute;inset-inline-end:18px;top:18px;box-sizing:content-box;padding:10px;background:var(--surface-subtle);border-radius:50%;color:var(--text-primary)}
.reference-ui .executive-kpi>strong{font-size:27px;font-weight:500;line-height:1.4;max-width:calc(100% - 48px);overflow-wrap:anywhere}
.reference-ui .executive-kpi>h2{font-size:14px;font-weight:500;color:var(--text-secondary);margin:0;padding-inline-end:40px}
.reference-ui .executive-kpi>small{font-size:11px;color:var(--text-muted);line-height:1.6;margin-top:4px}
.reference-ui .executive-kpi>a{font-size:12px;margin-top:auto;padding-top:8px;display:flex;gap:16px;align-items:center;min-height:32px}
.reference-ui .executive-primary{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.reference-ui .executive-secondary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:stretch;min-width:0}
.reference-ui .executive-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;height:auto;padding:0;border:0;background:transparent}
.reference-ui .executive-section-head>h2{font-size:16px;line-height:1.6;margin:0;font-weight:500}
.reference-ui .executive-section-head>a,.reference-ui .executive-footer-link{font-size:12px}
.reference-ui .executive-note{font-size:11px;line-height:1.7;color:var(--text-muted);margin:8px 0 0}
.reference-ui .executive-activity :is(th,td){padding:9px 8px;font-size:11px}
.reference-ui .executive-activity th{background:transparent}
.reference-ui .executive-dashboard .executive-activity :is(th,td){padding:7px 8px}
.reference-ui .executive-activity .ui-badge{font-size:11px;line-height:16px;padding:2px 8px}
.reference-ui .executive-activity time{white-space:nowrap;direction:ltr;display:inline-block;font-size:10px}
.reference-ui .executive-action{overflow-wrap:anywhere}
.reference-ui .executive-subject{display:block;font-size:10px!important}
.reference-ui .executive-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;direction:ltr;padding:8px 0 0;position:relative}
.reference-ui .executive-chart-day{display:flex;flex-direction:column;align-items:center;min-width:0}
.reference-ui .executive-chart-value{font-size:10px;color:var(--text-secondary);margin-bottom:5px;max-width:100%;overflow-wrap:anywhere;text-align:center}
.reference-ui .executive-chart-track{height:125px;width:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--border-strong);background:repeating-linear-gradient(to top,transparent 0 30px,var(--border) 31px,transparent 32px)}
.reference-ui .executive-chart-track>span{display:block;width:65%;max-width:35px;background:#c1b09c;border-radius:3px 3px 0 0}
.reference-ui .executive-chart-day>time{font-size:10px;color:var(--text-secondary);margin-top:9px;direction:rtl;text-align:center;line-height:1.5}
.reference-ui .executive-zero{font-size:12px;text-align:center;color:var(--text-secondary);margin:12px 0 0}
.reference-ui .executive-branch-row{display:grid;grid-template-columns:minmax(70px,1fr) minmax(35px,1fr) auto;gap:12px;align-items:center;margin:16px 0;font-size:12px}
.reference-ui .executive-branch-row>bdi{font-size:12px;font-variant-numeric:tabular-nums}
.reference-ui .executive-branch-row progress{appearance:none;display:block;height:8px;border:0;border-radius:3px;background:var(--surface-subtle)}
.reference-ui .executive-branch-row progress::-webkit-progress-bar{background:var(--surface-subtle);border-radius:3px}
.reference-ui .executive-branch-row progress::-webkit-progress-value{background:#c1b09c;border-radius:3px}
.reference-ui .executive-branch-row progress::-moz-progress-bar{background:#c1b09c;border-radius:3px}
.reference-ui .executive-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 12px}
.reference-ui .executive-work-grid>a{background:var(--surface-subtle);border:1px solid var(--border);border-radius:8px;padding:12px 5px;text-align:center;display:flex;flex-direction:column;gap:8px;color:var(--text-primary);font-size:11px;text-decoration:none}
.reference-ui .executive-work-grid>a:hover{border-color:var(--brand);background:var(--brand-subtle)}
.reference-ui .executive-work-grid strong{font-size:25px;line-height:1.3;font-weight:500}
.reference-ui .executive-buckets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.reference-ui .executive-buckets>div{border-bottom:1px solid var(--border);padding:7px 0;display:flex;justify-content:space-between;gap:8px;align-items:center}
.reference-ui .executive-buckets dt{font-size:12px;color:var(--text-secondary)}
.reference-ui .executive-buckets dd{margin:0;font-size:19px;font-weight:500}
@media(max-width:1200px){.reference-ui .executive-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-ui .executive-secondary{grid-template-columns:1fr 1fr}.reference-ui .executive-secondary>.executive-inventory{grid-column:1/-1}}
@media(max-width:1000px){.reference-ui .executive-primary{grid-template-columns:1fr}}
@media(max-width:600px){.reference-ui .executive-kpis,.reference-ui .executive-secondary{grid-template-columns:1fr}.reference-ui .executive-hero{padding:22px;min-height:142px;align-items:flex-start;flex-direction:column;gap:12px}.reference-ui .executive-scope{align-self:flex-start}.reference-ui .executive-chart{gap:5px}.reference-ui .executive-dashboard .ui-card{padding:16px}.reference-ui .executive-hero h2{font-size:23px}.reference-ui .executive-date{font-size:11px}.reference-ui .executive-kpi>small{min-height:0}}
:root {
  /* MR. LEATHER palette: forest, ivory, leather and a restrained brass signature. */
  --brand:#174638; --brand-hover:#10382c; --brand-dark:#102e25; --brand-subtle:#eaf1ec;
  --background:#f4f5f1; --surface:#fffefa; --surface-subtle:#f5f6f2; --surface-elevated:#ffffff;
  --stone:#e8e9e1; --brass:#bcab7f;
  --text-primary:#1d2924; --text-secondary:#516158; --text-muted:#68766e;
  --border:#e0e5dd; --border-strong:#bfcac0;
  --success:#27634a; --success-subtle:#edf4ee; --warning:#815c1f; --warning-subtle:#faf3e4;
  --danger:#9b4540; --danger-subtle:#faefed; --info:#3a627a; --info-subtle:#edf3f7;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px;
  --radius-control:6px; --radius-card:9px; --radius-pill:999px;
  /* Locally supplied Expo: Book 400, Medium 500, Light 300. Never synthesize bold. */
  --font-ui:'Expo Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --font-numeric:'Expo Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --text-xs:11px; --text-sm:13px; --text-base:14px; --text-section:17px; --text-title:28px;
  --shadow-surface:0 1px 2px #102e2504; --shadow-raised:0 5px 18px #102e2508;
  --focus-ring:0 0 0 3px #17463824; --motion-fast:180ms; --motion-ease:cubic-bezier(.2,.65,.3,1);
  --control-height:40px;
  --shell-charcoal:#123c30; --shell-text:#e2eae3; --shell-muted:#a9beb1;
}
/* Full-application additions keep all legacy behavior hooks and print styles intact. */
.reference-ui .content .ui-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;align-items:start}
.reference-ui .ui-form>:is(.grid,.table-wrap,.option-grid,.alert,.ui-alert,fieldset,details,h2,h3,p,script,.form-section,.form-actions,button){grid-column:1/-1}
.reference-ui .ui-form>button{justify-self:start}
.reference-ui .ui-form>[id]{grid-column:1/-1}
.reference-ui .content .grid{gap:16px 24px;min-width:0}
.reference-ui .content .grid>*{min-width:0}
.reference-ui .content .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;align-items:end}
.reference-ui .content .filters.compact{grid-template-columns:minmax(180px,2fr) minmax(140px,1fr) auto}
.reference-ui .content .filters>button{justify-self:start;align-self:end}
.reference-ui .content .filters :is(input,select){margin-top:0}
.reference-ui .content :is(input[type=checkbox],input[type=radio]){width:18px;height:18px;min-height:18px;padding:0;margin:0;accent-color:var(--brand);vertical-align:middle;flex:none}
.reference-ui .content label:has(>input[type=checkbox]){display:flex;gap:8px;align-items:center}
.reference-ui .content select[multiple]{min-height:130px}
.reference-ui .content [hidden]{display:none!important}
.reference-ui .content .field-error{display:block;color:var(--danger);font-size:12px;font-weight:400;margin-top:5px}
.reference-ui .content label:has(.field-error) :is(input,select,textarea){border-color:var(--danger)}
.reference-ui .content fieldset{border:0;margin:0;padding:0;min-width:0}
.reference-ui .content legend{font-weight:500;font-size:16px;padding:0;margin:0 0 12px}
.reference-ui .content .form-section{border-top:1px solid var(--border);padding-top:20px;margin-top:4px}
.reference-ui .content .form-actions{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:16px}
.reference-ui .content :is(.actions,.legend){gap:12px;flex-wrap:wrap}
.reference-ui .content .actions{align-items:start}
.reference-ui .content .actions form{min-width:0;flex:1 1 230px}
.reference-ui .content form:not(.ui-form):where(:not(.filter-toolbar))>label{margin-bottom:14px}
.reference-ui .content form:not(.ui-form):where(:not(.filter-toolbar,.variant-print))>button{margin-top:12px}
.reference-ui .content .actions form+form{border-inline-start:1px solid var(--border);padding-inline-start:16px}
.reference-ui .content :is(.button,a.primary){display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border-radius:8px;background:var(--brand);color:white;font-size:13px;font-weight:500;text-decoration:none}
.reference-ui .content :is(.button,a.primary):hover{background:var(--brand-hover);text-decoration:none}
.reference-ui .content :is(.danger,.ui-button-danger){background:var(--danger-subtle);border:1px solid #e6c8c8;color:var(--danger)}
.reference-ui .content :is(.danger,.ui-button-danger):hover{background:var(--danger);color:white}
.reference-ui .content :is(.link,.link-button,button[type=button],button[onclick="print()"]){background:transparent;color:var(--brand);border-color:var(--border-strong)}
.reference-ui .content :is(.link,.link-button,button[type=button]):hover{background:var(--brand-subtle);color:var(--brand)}
.reference-ui .content .badge{font-size:12px;padding:3px 9px;font-weight:500}
.reference-ui .content :is(.badge.on,.legend .on){color:var(--success);background:var(--success-subtle)}
.reference-ui .content :is(.badge.off,.legend .off){color:var(--danger);background:var(--danger-subtle)}
.reference-ui .content .muted,.reference-ui .content .hint{color:var(--text-secondary);font-size:13px}
.reference-ui .content .metric-grid,.reference-ui .content .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-bottom:20px}
.reference-ui .content .metric{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.reference-ui .content .metric strong{font:600 26px/1.6 var(--font-ui);font-variant-numeric:tabular-nums}
.reference-ui .content .metric span{font-size:13px;color:var(--text-secondary)}
.reference-ui .content .cards>.card{margin:0}
.reference-ui .content .summary{grid-template-columns:minmax(100px,180px) minmax(0,1fr);font-size:14px;margin:0 0 20px}
.reference-ui .content .summary dd{overflow-wrap:anywhere}
.reference-ui .content td{font-variant-numeric:tabular-nums}
.reference-ui .content .table-wrap input:not([type=checkbox]):not([type=hidden]),.reference-ui .content .table-wrap select{min-width:100px}
.reference-ui .content pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;background:var(--surface-subtle);padding:12px;border:1px solid var(--border);border-radius:8px}
.reference-ui .content details:not(.nav-group)>summary{cursor:pointer;padding:10px 0;color:var(--text-secondary)}
.reference-ui .content .product-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.reference-ui .content .product-card{border-color:var(--border);padding:16px;color:var(--text-primary);min-width:0}
.reference-ui .content .product-card:hover{text-decoration:none;border-color:var(--border-strong);background:var(--surface-subtle)}
.reference-ui .content .product-card>div{min-width:0;overflow-wrap:anywhere}
.reference-ui .content .product-card h3{font-size:16px;margin:4px 0}
.reference-ui .content .product-card strong{font-variant-numeric:tabular-nums}
.reference-ui .content .image-placeholder{background:var(--surface-subtle);color:var(--text-muted);border:1px solid var(--border)}
.reference-ui .content .product-thumbnail{width:120px;height:120px;object-fit:cover;border-radius:8px}
.reference-ui .content .choice{padding:10px 12px;border-color:var(--border);background:var(--surface-subtle);border-radius:8px}
.reference-ui .content .choice:has(input:checked){border-color:var(--brand);background:var(--brand-subtle)}
.reference-ui .content .qty{background:transparent;font-variant-numeric:tabular-nums}
.reference-ui .content .item-row{padding:16px;border:1px solid var(--border);border-radius:8px;margin-bottom:12px;background:var(--surface-subtle)}
.reference-ui .content .permissions>div{gap:20px;padding:12px 0;border-color:var(--border)}
.reference-ui .content .permissions small{display:block;font-weight:400;color:var(--text-muted);overflow-wrap:anywhere}
.reference-ui .content .permissions select{flex:none;width:190px}
.reference-ui .content .legend{font-size:12px}
.reference-ui .content .data-tree{margin:0;display:grid;gap:8px}
.reference-ui .content .data-tree>div{display:grid;grid-template-columns:minmax(90px,180px) minmax(0,1fr);gap:16px;padding:12px;border-bottom:1px solid var(--border)}
.reference-ui .content .data-tree dt{font-size:12px;color:var(--text-secondary);overflow-wrap:anywhere}
.reference-ui .content .data-tree dd{margin:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.reference-ui .content .data-tree .data-tree{border-inline-start:2px solid var(--border);padding-inline-start:12px}
.reference-ui .content .pos-shell{grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:start}
.reference-ui .content .pos-bar{background:var(--surface);color:var(--text-primary);border:1px solid var(--border);border-radius:12px;gap:12px;flex-wrap:wrap}
.reference-ui .content .session-status{background:var(--success-subtle);color:var(--success);border-radius:20px;font-size:12px}
.reference-ui .content .session-status.closed{background:var(--danger-subtle);color:var(--danger)}
.reference-ui .content .scan-input{min-height:52px;font-size:17px;border:2px solid var(--brand);margin:0}
.reference-ui .content .pos-cart{padding:0;overflow-x:auto}
.reference-ui .content #cart{min-height:160px}
.reference-ui .content #cart>.hint{padding:28px;text-align:center}
.reference-ui .content .cart-row{grid-template-columns:minmax(180px,1fr) 76px 100px 90px 44px;min-width:570px;gap:8px;padding:12px}
.reference-ui .content .cart-row>*:nth-child(4){display:block}
.reference-ui .content .cart-row small{display:block;color:var(--text-secondary);font-size:12px}
.reference-ui .content .cart-row :is(input,select,button){min-height:44px}
.reference-ui .content .totals{position:sticky;top:16px}
.reference-ui .content .totals.ui-form{grid-template-columns:minmax(0,1fr)}
.reference-ui .content .inline-action{display:inline-block;margin:0 8px 12px 0}
.reference-ui .content .pagination-links{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.reference-ui .content .pagination-links :is(a,span){min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border:1px solid var(--border);border-radius:8px}
.reference-ui .content .pagination-links [aria-current=page]{background:var(--brand-subtle);color:var(--brand);border-color:var(--brand)}
.reference-ui .content .pagination-links [aria-disabled=true]{color:var(--text-muted);background:var(--surface-subtle)}
.reference-ui .content .ui-form #dynamic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reference-ui .content .ui-form #dynamic input{min-width:0}
.reference-ui .content .totals label{margin-bottom:12px}
.reference-ui .content .totals .money-row{border-block:1px solid var(--border);padding:16px 0;margin:16px 0;align-items:center}
.reference-ui .content #estimated{font-size:26px;font-variant-numeric:tabular-nums}
.reference-ui .content .pay-btn{width:100%;min-height:52px;font-size:16px}
.reference-ui .content .grand{font-size:24px;gap:16px;flex-wrap:wrap;border-color:var(--border);font-variant-numeric:tabular-nums}
.reference-ui .content .pin-panel{max-width:460px;margin:32px auto}
.reference-ui .content .pin-panel input[name=pin]{font-size:28px;letter-spacing:12px;text-align:center;min-height:56px}
.reference-ui.ui-auth,.reference-ui.ui-error{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--background);padding:24px;font-family:var(--font-ui);box-sizing:border-box}
.reference-ui.ui-auth .login-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 28px #29272408;border-radius:14px;padding:36px}
.reference-ui.ui-auth h1{font-size:28px;margin:32px 0 8px}
.reference-ui.ui-auth .wide{width:100%}
.reference-ui.ui-error>.content{margin:0;width:min(520px,100%);padding:32px;text-align:center}
.reference-ui.ui-error h1{font-size:56px;font-weight:500;margin:20px 0;color:var(--brand)}
.reference-ui.ui-error .brand{font:20px Georgia}
@media(max-width:1100px){.reference-ui .content .pos-shell{grid-template-columns:1fr}.reference-ui .content .totals{position:static}}
@media(max-width:800px){.reference-ui .content .ui-form,.reference-ui .content .filters,.reference-ui .content .filters.compact{grid-template-columns:1fr 1fr}.reference-ui .content .actions form+form{border-inline-start:0;padding-inline-start:0}.reference-ui .content .data-tree>div{grid-template-columns:1fr;gap:8px}}
@media(max-width:540px){.reference-ui .content .ui-form,.reference-ui .content .filters,.reference-ui .content .filters.compact{grid-template-columns:minmax(0,1fr)}.reference-ui .content .permissions>div{flex-wrap:wrap}.reference-ui .content .permissions select{width:100%}.reference-ui.ui-auth{padding:16px}.reference-ui.ui-auth .login-card{padding:24px}.reference-ui .content .product-hero{grid-template-columns:1fr}.reference-ui .content .product-hero img{max-width:100%}}
.app-shell{background:var(--background)}
.app-shell>.sidebar,.app-shell>main>.app-topbar{font-family:var(--font-ui)}
.app-shell>main{min-width:0}
.app-topbar{height:64px;padding-inline:32px;gap:16px;background:var(--surface);border-color:var(--border)}
.app-topbar .topbar-context{color:var(--text-secondary);font-size:13px;flex:1}
.app-topbar .topbar-user{font-size:13px;line-height:1.4;text-align:end}
.app-topbar .topbar-user b{font-weight:500}.app-topbar small{font-size:12px;color:var(--text-muted);margin-top:3px}
.reference-ui{font-family:var(--font-ui);color:var(--text-primary);font-size:14px;line-height:1.65}
.reference-ui .content{max-width:none;padding:28px 32px 40px;min-width:0}
.reference-ui .pagehead{gap:20px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.reference-ui .pagehead h1{font-size:30px;font-weight:500;line-height:1.4;letter-spacing:-.5px}
.reference-ui .page-description{color:var(--text-secondary);margin:6px 0 0;font-size:14px}
.reference-ui .page-actions{display:flex;gap:8px;align-items:center}
.reference-ui h2,.reference-ui h3{font-size:18px;font-weight:500;line-height:1.5;margin:0 0 12px}
.reference-ui p{margin:0 0 12px}
.reference-ui .content a{color:var(--brand);text-decoration:none}
.reference-ui .content a:hover{text-decoration:underline;text-underline-offset:4px}
.reference-ui .content :is(button,.primary,.ui-button){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid transparent;border-radius:var(--radius-control);font:600 13px var(--font-ui);line-height:1.5;background:var(--brand);color:white;cursor:pointer;text-decoration:none;transition:background 120ms ease}
.reference-ui .content :is(button,.primary,.ui-button):hover{background:var(--brand-hover);text-decoration:none}
.reference-ui .content .ui-button-secondary{background:var(--brand-subtle);color:var(--brand)}
.reference-ui .content .ui-button-outline{background:var(--surface);border-color:var(--border-strong);color:var(--text-primary)}
.reference-ui .content .ui-button-ghost{background:transparent;color:var(--brand)}
.reference-ui .content .ui-button-danger{background:var(--danger);color:white}
.reference-ui .content .ui-button-sm{min-height:32px;padding:4px 10px;font-size:12px}
.reference-ui .content :is(button,.ui-button):active{transform:translateY(1px)}
.reference-ui .content :is(button,input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
.reference-ui .content :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.reference-ui .content :is(input,select,textarea){min-width:0;min-height:40px;margin-top:6px;padding:8px 11px;border:1px solid var(--border-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--text-primary);font:14px var(--font-ui);line-height:1.5}
.reference-ui .content textarea{height:auto;min-height:100px}
.reference-ui .content [aria-invalid=true]{border-color:var(--danger);background:var(--danger-subtle)}
.reference-ui .content label{display:block;margin:0;font-size:13px;font-weight:500;color:var(--text-secondary)}
.reference-ui .card,.reference-ui .ui-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;box-shadow:none;margin-bottom:20px;min-width:0}
.reference-ui .filter-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end}
.reference-ui .filter-actions{display:flex;align-items:end;gap:8px}
.reference-ui .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.reference-ui .kpi-grid .ui-stat{margin:0;padding:18px 20px}
.reference-ui .ui-stat-label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.reference-ui .ui-stat-value{display:block;font-size:28px;font-weight:500;line-height:1.5;margin-top:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reference-ui .ui-stat-meta{display:block;font-size:12px;color:var(--text-muted);margin-top:4px}
.reference-ui .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.reference-ui .welcome-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.reference-ui .welcome-panel h2{margin-bottom:4px;font-size:20px}.reference-ui .welcome-panel p{margin:0;color:var(--text-secondary)}
.reference-ui .ui-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.reference-ui .ui-alert,.reference-ui .alert{padding:12px 16px;border:1px solid var(--border);border-radius:8px;margin-bottom:20px;font-size:13px;line-height:1.7}
.reference-ui .ui-alert p{margin:4px 0 0}.reference-ui .ui-alert-info{background:var(--info-subtle);color:var(--info)}
.reference-ui .alert.ok,.reference-ui .ui-alert-success{background:var(--success-subtle);color:var(--success)}
.reference-ui .alert.error,.reference-ui .ui-alert-danger{background:var(--danger-subtle);color:var(--danger)}
.reference-ui .ui-alert-warning{background:var(--warning-subtle);color:var(--warning)}
.reference-ui .table-wrap{padding:0;overflow:auto;max-width:100%;scrollbar-width:thin}
.reference-ui table{font-size:13px;width:100%;border-collapse:collapse}
.reference-ui th,.reference-ui td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--border);line-height:1.6}
.reference-ui th{font-weight:500;font-size:12px;color:var(--text-secondary);background:var(--surface-subtle)}
.reference-ui tbody tr:last-child td{border-bottom:0}.reference-ui tbody tr:hover{background:var(--surface-subtle)}
.reference-ui td small{font-size:12px;color:var(--text-muted)}
.reference-ui .numeric{font-variant-numeric:tabular-nums;white-space:nowrap}.reference-ui bdi{font-variant-numeric:tabular-nums}
.reference-ui .ui-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:30px;font-size:12px;font-weight:500;white-space:nowrap;background:#f0efed;color:var(--text-secondary)}
.reference-ui .ui-badge-success{background:var(--success-subtle);color:var(--success)}
.reference-ui .ui-badge-warning{background:var(--warning-subtle);color:var(--warning)}
.reference-ui .ui-badge-danger{background:var(--danger-subtle);color:var(--danger)}
.reference-ui .ui-badge-info{background:var(--info-subtle);color:var(--info)}
.reference-ui .status-tabs{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:0 0 12px;margin:0 0 20px;border-bottom:1px solid var(--border)}
.reference-ui .status-tabs a{flex:none;white-space:nowrap;padding:8px 12px;border-radius:8px;color:var(--text-secondary);font-size:13px}
.reference-ui .status-tabs a:hover{background:var(--surface);text-decoration:none}
.reference-ui .status-tabs a[aria-current=page]{background:var(--brand-subtle);color:var(--brand);font-weight:500}
.reference-ui .empty-state{text-align:center;white-space:normal;padding:36px 20px;color:var(--text-secondary)}
.reference-ui .empty-state .ui-icon{width:28px;height:28px;margin-bottom:8px}.reference-ui .empty-state h3{font-size:15px;margin-bottom:4px}.reference-ui .empty-state p{font-size:13px;margin:0}
.reference-ui .analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.reference-ui .analytics-grid .card{margin-bottom:20px}
.reference-ui .trend-row{display:grid;grid-template-columns:100px minmax(0,1fr) 110px;gap:16px;align-items:center;padding:8px 0;font-size:13px}
.reference-ui progress{width:100%;height:7px;accent-color:var(--brand)}
.reference-ui .operational-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin:0}
.reference-ui .operational-list>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding:12px 0;font-size:13px}.reference-ui .operational-list dt{color:var(--text-secondary)}.reference-ui .operational-list dd{margin:0;font-variant-numeric:tabular-nums}
.reference-ui .content nav[role=navigation]{margin:20px 0;display:block;font-size:13px}.reference-ui .content nav[role=navigation] svg{width:18px;height:18px}.reference-ui .content nav[role=navigation] a{display:inline-flex;margin:0;padding:6px 10px}.reference-ui .content nav[role=navigation]>div{gap:12px;flex-wrap:wrap}
@media(max-width:1150px){.reference-ui .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-ui .filter-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-ui .analytics-grid{grid-template-columns:1fr}.reference-ui .operational-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.app-topbar{padding-inline:16px}.reference-ui .content{padding:24px 20px}.app-topbar .topbar-context{display:none}.app-topbar .topbar-user{margin-inline-start:auto}.reference-ui .pagehead h1{font-size:28px}}
@media(max-width:540px){.reference-ui .content{padding:20px 16px}.reference-ui .kpi-grid,.reference-ui .filter-panel,.reference-ui .operational-list{grid-template-columns:1fr}.reference-ui .pagehead{gap:16px}.reference-ui .pagehead h1{font-size:28px}.reference-ui .welcome-panel{align-items:flex-start}.reference-ui .trend-row{grid-template-columns:82px minmax(0,1fr);gap:8px}.reference-ui .trend-row .numeric{grid-column:2}.reference-ui .card{padding:16px}.reference-ui .table-wrap{padding:0}}
/* Premium polish: one shared screen layer, no behavior or print overrides. */
.reference-ui{line-height:1.7;font-weight:400}
.reference-ui :is(h1,h2,h3,label,button){letter-spacing:normal}
.reference-ui :is(bdi,.numeric,.ui-stat-value){font-variant-numeric:tabular-nums lining-nums}
.reference-ui .pagehead{margin-bottom:var(--space-5);gap:var(--space-4)}
.reference-ui .pagehead h1{font-size:28px;font-weight:500;letter-spacing:0;line-height:1.4}
.reference-ui .page-description{font-size:13px;margin-top:var(--space-1);color:var(--text-muted)}
.reference-ui .page-actions{flex-wrap:wrap}
.reference-ui .content{padding-block:var(--space-6) var(--space-8)}
.reference-ui .content :is(h2,h3){font-weight:500}
.reference-ui .card,.reference-ui .ui-card{padding:var(--space-4);box-shadow:var(--shadow-surface);margin-bottom:var(--space-4)}
.reference-ui .content .table-wrap{padding:0}
.reference-ui .content a{transition:color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.reference-ui .content :is(button,.primary,.ui-button,.button){min-height:var(--control-height);border-radius:var(--radius-control);font-weight:500;transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
.reference-ui .content :is(.ui-button-secondary,.ui-button-outline,button[type=button]){background:var(--surface-elevated);border:1px solid var(--border-strong);color:var(--text-primary)}
.reference-ui .content :is(.ui-button-secondary,.ui-button-outline,button[type=button]):hover{background:var(--surface-subtle);border-color:var(--brand);color:var(--text-primary)}
.reference-ui .content :is(.ui-button-ghost,.link,.link-button){background:transparent;border-color:transparent;color:var(--brand)}
.reference-ui .content :is(.ui-button-ghost,.link,.link-button):hover{background:var(--brand-subtle);color:var(--brand-hover)}
.reference-ui .content :is(.danger,.ui-button-danger){background:var(--danger-subtle);border-color:var(--danger-subtle);color:var(--danger)}
.reference-ui .content :is(.danger,.ui-button-danger):hover{background:var(--danger);border-color:var(--danger);color:#fff}
.reference-ui .content .ui-button-icon{padding:var(--space-2);aspect-ratio:1;min-width:var(--control-height)}
.reference-ui .content :is(button,.ui-button,.primary,.button):active:not(:disabled):not([aria-disabled=true]){transform:translateY(1px);box-shadow:none}
.reference-ui .content :is(button,input,select,textarea):disabled{opacity:.5;background:var(--surface-subtle);color:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none}
.reference-ui .content :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--brand);outline-offset:3px;box-shadow:var(--focus-ring)}
.reference-ui .content :is(input,select,textarea){min-height:var(--control-height);font-size:14px;border-color:var(--border-strong);transition:border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
.reference-ui .content :is(input,select,textarea):hover:not(:disabled){border-color:var(--text-muted)}
.reference-ui .content :is(input,select,textarea):focus-visible{outline-offset:0;border-color:var(--brand)}
.reference-ui .content :is(input,textarea)::placeholder{color:var(--text-muted);font-size:12px;opacity:.85}
.reference-ui .content input[type=file]{padding:5px 8px;font-size:12px;overflow:hidden}
.reference-ui .content input[type=file]::file-selector-button{font:500 12px var(--font-ui);border:1px solid var(--border);border-radius:5px;background:var(--surface-subtle);color:var(--text-primary);padding:5px 10px;margin-inline-end:10px;cursor:pointer;transition:background-color var(--motion-fast) var(--motion-ease)}
.reference-ui .content input[type=file]::file-selector-button:hover{background:var(--brand-subtle)}
.reference-ui .content label{font-size:12px;font-weight:500;color:var(--text-secondary)}
.reference-ui .content label:has(>input[required],>select[required],>textarea[required])::before{content:"*";color:var(--brand);margin-inline-end:var(--space-1)}
.reference-ui .content .ui-form{gap:var(--space-4) var(--space-6)}
.reference-ui .content .form-section{margin-top:var(--space-2);padding-top:var(--space-4)}
.reference-ui .content .field-error{font-size:12px;border-inline-start:2px solid var(--danger);padding-inline-start:var(--space-2)}
.reference-ui .content :is([aria-invalid=true],label:has(.field-error) input,label:has(.field-error) select,label:has(.field-error) textarea){border-color:var(--danger)}
.reference-ui .content :is(.filters,.filter-panel){background:var(--surface-subtle);padding:var(--space-3) var(--space-4);gap:var(--space-3);border-radius:var(--radius-card);box-shadow:none;margin-bottom:var(--space-4)}
.reference-ui .content :is(.filters,.filter-panel)>label{margin-bottom:0}
.reference-ui .content :is(.filters,.filter-panel)>button{margin-top:0;align-self:end}
.reference-ui .content :is(.filters,.filter-panel) :is(input,select){background:var(--surface-elevated);font-size:13px}
.reference-ui .content :is(th,td){padding:10px 14px;font-size:12px;line-height:1.65}
.reference-ui .content th{font-size:11px;font-weight:500;color:var(--text-secondary);background:var(--surface-subtle)}
.reference-ui .content thead th{position:sticky;inset-block-start:0;z-index:1}
.reference-ui .content tbody tr{transition:background-color var(--motion-fast) var(--motion-ease)}
.reference-ui .content tbody tr:hover{background:#f3f1eb}
.reference-ui .content td :is(button,.button,.primary){min-height:32px;padding:4px 10px;font-size:12px}
.reference-ui .content td>.numeric{display:inline-block;text-align:end}
.reference-ui .content td small{font-size:11px}
.reference-ui .content td details>summary{padding:2px 0;min-height:24px}
.reference-ui .content .ui-event-key{font-size:10px;line-height:1.4;margin-top:2px}
.reference-ui .content .table-wrap{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.reference-ui .ui-badge,.reference-ui .content .badge{font-size:11px;font-weight:500;line-height:1.6;border-radius:6px;padding:3px 8px;border:1px solid #00000005}
.reference-ui .ui-badge-neutral{background:#efeee8;color:var(--text-secondary)}
.reference-ui .ui-alert,.reference-ui .alert{border-radius:var(--radius-control);border-inline-start-width:3px;padding:10px 14px;margin-bottom:var(--space-4)}
.reference-ui .alert.ok,.reference-ui .ui-alert-success{border-inline-start-color:var(--success)}
.reference-ui .alert.error,.reference-ui .ui-alert-danger{border-inline-start-color:var(--danger)}
.reference-ui .ui-alert-info{border-inline-start-color:var(--info)}
.reference-ui .ui-alert-warning{border-inline-start-color:var(--warning)}
.reference-ui .empty-state{padding:var(--space-8) var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.reference-ui .empty-state-symbol{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface-subtle);color:var(--brand);margin-bottom:var(--space-1)}
.reference-ui .empty-state .ui-icon{width:23px;height:23px;margin:0;stroke-width:1.4}
.reference-ui .empty-state h3{margin:0;font-size:15px;font-weight:500;color:var(--text-primary)}
.reference-ui .empty-state p{max-width:40ch;font-size:12px;line-height:1.8;color:var(--text-muted);margin:0}
.reference-ui .content .status-tabs{gap:var(--space-1);padding-bottom:var(--space-2);margin-bottom:var(--space-4)}
.reference-ui .status-tabs a{font-size:12px;padding:7px 12px;border-radius:var(--radius-control)}
.reference-ui .content .ui-pagination{display:flex!important;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-4) 0!important}
.reference-ui .content .pagination-links :is(a,span){min-width:32px;min-height:32px;border-radius:6px;font-size:12px}
.reference-ui .content .product-card{background:var(--surface);border-radius:var(--radius-card);transition:border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
.reference-ui .content .product-card:hover{box-shadow:var(--shadow-raised)}
.reference-ui .ui-audit-event{font-size:12px;overflow-wrap:anywhere}
.reference-ui .ui-event-key{display:block;color:var(--text-muted);font-size:10px;font-family:var(--font-numeric)}
/* App shell: existing identity and navigation, not new controls. */
.app-shell.reference-ui .app-topbar{height:62px;background:var(--surface-elevated);padding-inline:var(--space-8)}
.app-shell.reference-ui .topbar-context{font-size:12px;display:flex;align-items:center;gap:var(--space-3)}
.app-shell.reference-ui .topbar-context:before{content:"";width:3px;height:16px;background:var(--brand);border-radius:2px}
.app-shell.reference-ui .topbar-user{display:flex;align-items:center;gap:var(--space-3);text-align:start}
.app-shell.reference-ui .topbar-avatar{width:34px;height:34px;border-radius:10px;background:var(--shell-charcoal);color:#e5d5bc;display:grid;place-items:center;flex:none;border:1px solid #45483d;font-size:15px}
.app-shell.reference-ui .topbar-identity{min-width:0}
.app-shell.reference-ui .topbar-identity b{font-size:12px;font-weight:500}
.app-shell.reference-ui .topbar-identity small{font-size:11px;color:var(--text-muted);margin-top:2px}
.app-shell.reference-ui .sidebar{background:var(--shell-charcoal);color:var(--shell-text);gap:var(--space-5)}
.app-shell.reference-ui .sidebar .brand{font-size:21px;letter-spacing:1.5px;padding:0 10px 6px}
.app-shell.reference-ui .sidebar .brand small{font-size:10px;color:var(--shell-muted);margin-top:10px}
.app-shell.reference-ui .sidebar .sidebar-nav{scrollbar-color:#626456 transparent;padding-inline:2px}
.app-shell.reference-ui .sidebar :is(.nav-home,summary){min-height:43px;padding:10px;gap:11px;margin:3px 0;border:1px solid transparent;border-radius:var(--radius-control);font-size:12px;color:var(--shell-text);transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.app-shell.reference-ui .sidebar :is(.nav-home,summary)>svg:first-child{width:19px;height:19px;stroke-width:1.5}
.app-shell.reference-ui .sidebar :is(summary,.nav-home):hover{background:#ffffff08;border-color:#ffffff0a;color:#fff}
.app-shell.reference-ui .sidebar :is(.is-active>summary,.nav-home.is-active){background:#36382e;color:#e7d7bc;border-color:#c5b08a1f;box-shadow:inset -2px 0 #af9268;font-weight:500}
.app-shell.reference-ui .sidebar .nav-children{margin:5px 20px 10px 0;padding-inline-start:12px;border-right:0;border-inline-start:1px solid #4c5042}
.app-shell.reference-ui .sidebar .nav-children a{padding:7px 10px;font-size:12px;color:#babfb1;transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}
.app-shell.reference-ui .sidebar .nav-children a:hover{background:#ffffff08;color:#fff}
.app-shell.reference-ui .sidebar .nav-children a.is-active{background:#3c3d32;color:#e9d9ba;box-shadow:inset -2px 0 #af9268}
.app-shell.reference-ui .sidebar .nav-chevron{transition:transform var(--motion-fast) var(--motion-ease)}
.app-shell.reference-ui .sidebar details[open] .nav-children{animation-duration:var(--motion-fast)}
.app-shell.reference-ui .sidebar-logout{border-color:#44473c;padding-top:var(--space-2)}
.app-shell.reference-ui .sidebar-logout button{font-size:12px;color:var(--shell-text);min-height:40px;border-radius:var(--radius-control);transition:background-color var(--motion-fast) var(--motion-ease)}
.app-shell.reference-ui .sidebar-logout button:hover{background:#ffffff08}
.app-shell.reference-ui .sidebar :is(a,summary,button):focus-visible{outline-color:#d6c3a2}
/* Executive composition: quiet data, slim welcome, coherent widget surfaces. */
.reference-ui .executive-dashboard{gap:var(--space-4)}
.reference-ui .executive-date{font-size:11px;color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 12px;background:var(--surface-subtle)}
.reference-ui .executive-hero{min-height:124px;padding:22px 26px;border-radius:var(--radius-card);background:radial-gradient(ellipse at 95% 0%,#79664822,transparent 70%),repeating-linear-gradient(125deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(115deg,#3b352d,#25241f 60%,#292620);border-color:#443d32}
.reference-ui .executive-hero:after{inset-inline-start:70%;width:72px;border-inline:1px dashed #b2a18055;background:#13170f22;box-shadow:6px 0 12px #0003,-3px 0 8px #0003}
.reference-ui .executive-hero h2{font-size:25px;font-weight:500;margin-block:4px 6px}
.reference-ui .executive-eyebrow{font-size:12px;color:#d6d9cb}
.reference-ui .executive-hero p{font-size:12px;color:#c5cbbc}
.reference-ui .executive-scope{font-size:11px;background:#ffffff04;border-color:#c6cbb32b;padding:5px 11px}
.reference-ui .executive-dashboard .executive-kpi{padding:var(--space-4);gap:3px;border-block-start:2px solid #d9cbb5;transition:border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
.reference-ui .executive-kpi:focus-within{border-color:var(--brand);box-shadow:var(--focus-ring)}
.reference-ui .executive-kpi>.ui-icon{padding:7px;border:1px solid var(--border);background:var(--surface-subtle);border-radius:10px;width:18px;height:18px;top:var(--space-4);inset-inline-end:var(--space-4);stroke-width:1.5}
.reference-ui .executive-kpi>strong{font-size:29px;font-weight:500;line-height:1.3;font-family:var(--font-numeric)}
.reference-ui .executive-kpi>h2{font-size:12px;color:var(--text-secondary);font-weight:500}
.reference-ui .executive-kpi>small{font-size:11px;line-height:1.6;color:var(--text-muted)}
.reference-ui .executive-kpi>a{padding-top:7px;min-height:30px;font-size:11px;gap:var(--space-2)}
.reference-ui .executive-section-head{margin-bottom:var(--space-3)}
.reference-ui .executive-section-head>h2{font-size:15px;font-weight:500}
.reference-ui .executive-dashboard .executive-chart-empty{padding:var(--space-5) var(--space-3);min-height:180px;justify-content:center;margin-top:var(--space-3);background:var(--surface-subtle);border-radius:var(--radius-control);border:1px dashed var(--border)}
.reference-ui .executive-chart-empty .empty-state-symbol{background:var(--surface-elevated);width:40px;height:40px}
.reference-ui .executive-period{display:flex;align-items:center;justify-content:center;gap:var(--space-3);color:var(--text-muted);font-size:11px;margin-top:var(--space-3)}
.reference-ui .executive-chart-track>span{background:#b6a386;border-radius:4px 4px 0 0}
.reference-ui .executive-chart-track{border-color:var(--border);background:repeating-linear-gradient(to top,transparent 0 30px,#e5e4dc88 31px,transparent 32px)}
.reference-ui .executive-dashboard .executive-activity :is(th,td){padding:8px;line-height:1.6}
.reference-ui .executive-activity th{background:transparent}
.reference-ui .executive-activity td:first-child{font-size:10px;color:var(--text-muted)}
.reference-ui .executive-activity .ui-audit-event{font-size:11px}
.reference-ui .executive-activity .ui-badge{font-size:10px;font-weight:500;padding:2px 7px}
.reference-ui .executive-secondary>.ui-card{display:flex;flex-direction:column;padding:var(--space-4)}
.reference-ui .executive-secondary>.ui-card>.executive-note:last-child,.reference-ui .executive-footer-link{margin-top:auto;padding-top:var(--space-3)}
.reference-ui .executive-work-grid{gap:var(--space-2);margin:var(--space-3) 0}
.reference-ui .executive-work-grid>a{background:var(--surface-subtle);padding:12px 6px;border-radius:var(--radius-control);font-size:11px}
.reference-ui .executive-work-grid>a:hover{background:var(--brand-subtle);border-color:#c8b494;text-decoration:none}
.reference-ui .executive-work-grid strong{font-size:25px;font-weight:500}
.reference-ui .executive-buckets{gap:var(--space-2) var(--space-4);margin:0 0 var(--space-2)}
.reference-ui .executive-buckets>div{padding:8px 0}
.reference-ui .executive-buckets dt{font-size:11px}
.reference-ui .executive-buckets dd{font-family:var(--font-numeric);font-size:21px;font-weight:500}
.reference-ui .executive-branch-row{font-size:11px;margin:12px 0;gap:var(--space-2)}
.reference-ui .executive-note{font-size:11px}
/* Quiet authentication surfaces share the same offline typography and controls. */
.reference-ui.ui-auth{background:radial-gradient(ellipse at 50% 15%,#eae5d8,transparent 65%),var(--background)}
.reference-ui.ui-auth .login-card{border-block-start:3px solid var(--brand);box-shadow:var(--shadow-raised);padding:var(--space-8)}
.reference-ui.ui-auth h1{font-weight:500;letter-spacing:0}
.reference-ui.ui-error>.content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card)}
@media(max-width:1100px){.reference-ui .content :is(.filters,.filter-panel){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.app-shell.reference-ui .app-topbar{padding-inline:var(--space-4)}.app-shell.reference-ui .topbar-context{display:none}.reference-ui .content{padding:var(--space-5)}.reference-ui .pagehead h1{font-size:26px}.reference-ui .content :is(button,input,select,.primary,.button){min-height:42px}}
@media(max-width:540px){.reference-ui .content{padding:var(--space-4)}.reference-ui .content :is(.filters,.filter-panel,.ui-form,.ui-form #dynamic){grid-template-columns:minmax(0,1fr)}.reference-ui .pagehead{gap:var(--space-3)}.reference-ui .pagehead h1{font-size:25px}.reference-ui .page-actions{max-width:100%}.reference-ui .executive-hero{padding:var(--space-5);min-height:138px}.reference-ui .executive-hero h2{font-size:23px}.reference-ui .executive-kpi>strong{font-size:28px}.reference-ui .executive-date{font-size:10px}.reference-ui .executive-dashboard .executive-chart-empty{min-height:190px}.reference-ui .content :is(button,input,select,.primary,.button){min-height:44px}.reference-ui .content :is(input[type=checkbox],input[type=radio]){min-height:18px}.reference-ui .content .pagination-links :is(a,span){min-height:40px;min-width:40px}.reference-ui.ui-auth .login-card{padding:var(--space-6)}}
@media(prefers-reduced-motion:reduce){.reference-ui *,.reference-ui *:before,.reference-ui *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.reference-ui .content :is(button,.ui-button,.primary,.button):active{transform:none!important}}

/* Product management workspace — scoped to the two product management screens. */
.reference-ui .product-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.reference-ui .product-summary .ui-stat{padding:var(--space-4);box-shadow:none;border-radius:var(--radius-card)}
.reference-ui .product-summary .ui-stat-value{font-size:25px;margin-top:2px}





.reference-ui .product-add .ui-icon{width:17px;height:17px}
.reference-ui .product-table-wrap{margin:0;border-radius:var(--radius-card)}
.reference-ui .product-table{min-width:980px}
.reference-ui .product-table :is(th,td){padding:11px 13px;vertical-align:middle}
.reference-ui .product-table tbody tr{transition:background-color var(--motion-fast) var(--motion-ease)}
.reference-ui .product-table tbody tr:hover{background:var(--surface-subtle)}
.reference-ui .product-table td small{font-size:10px;color:var(--text-muted);margin-top:2px}
.reference-ui .product-identity{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.reference-ui .product-identity img,.reference-ui .product-thumb-placeholder{width:46px;height:46px;border-radius:9px;object-fit:cover;flex:none;border:1px solid var(--border)}
.reference-ui .product-thumb-placeholder{display:grid;place-items:center;background:var(--surface-subtle);color:var(--text-muted);font:600 11px Georgia,serif;letter-spacing:1px}
.reference-ui .product-identity strong{display:block;color:var(--text-primary);font-size:13px;line-height:1.5}
.reference-ui .product-identity code{display:block;margin-top:2px;color:var(--text-muted);font-size:10px;direction:ltr;text-align:right}
.reference-ui .product-row-actions{display:flex;align-items:center;justify-content:center;gap:5px}
.reference-ui .product-row-actions a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--radius-control);color:var(--text-secondary)}
.reference-ui .product-row-actions a:hover{background:var(--brand-subtle);border-color:var(--brand);color:var(--brand);text-decoration:none}
.reference-ui .product-row-actions .ui-icon{width:17px;height:17px}
.reference-ui .empty-action{text-align:center;margin-top:var(--space-4)}
.reference-ui .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reference-ui .product-stepper{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 var(--space-4);padding:4px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface-elevated);box-shadow:var(--shadow-surface)}
.reference-ui .product-stepper a{display:flex;align-items:center;gap:var(--space-2);min-height:42px;padding:7px 10px;border-radius:8px;color:var(--text-secondary);font-size:12px}
.reference-ui .product-stepper a:hover{background:var(--brand-subtle);color:var(--brand);text-decoration:none}
.reference-ui .product-stepper span{width:23px;height:23px;display:grid;place-items:center;flex:none;border:1px solid var(--border-strong);border-radius:50%;font-size:10px;font-weight:500}
.reference-ui .product-wizard{display:grid;gap:var(--space-4);padding-bottom:72px}
.reference-ui .product-wizard>.card{margin:0;scroll-margin-top:16px}
.reference-ui .product-create-section{padding:var(--space-6)}
.reference-ui .product-create-section .section-heading{padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}
.reference-ui .step-kicker{display:block;margin-bottom:3px;color:var(--brand);font-size:10px;font-weight:500;letter-spacing:.04em}
.reference-ui .product-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6)}
.reference-ui .product-form-grid>*{min-width:0}
.reference-ui .product-form-grid .full-field{grid-column:1/-1}
.reference-ui .product-upload{padding:var(--space-5);border:1px dashed var(--border-strong);border-radius:var(--radius-control);background:var(--surface-subtle);transition:border-color var(--motion-fast),background-color var(--motion-fast)}
.reference-ui .product-upload:focus-within{border-color:var(--brand);background:var(--brand-subtle)}
.reference-ui .product-upload>label{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;cursor:pointer}
.reference-ui .product-upload>label .ui-icon{width:26px;height:26px;color:var(--brand)}
.reference-ui .product-upload>label span{color:var(--text-secondary);font-size:11px}
.reference-ui .product-upload>input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.reference-ui .product-image-preview{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)}
.reference-ui .product-image-preview figure{margin:0;width:92px}
.reference-ui .product-image-preview img{display:block;width:92px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.reference-ui .product-image-preview figcaption{font-size:9px;color:var(--text-secondary);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reference-ui .product-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}
.reference-ui .product-chips label{position:relative;cursor:pointer;margin:0}
.reference-ui .product-chips input{position:absolute;opacity:0;pointer-events:none}
.reference-ui .product-chips span{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:38px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-secondary);font-size:12px;transition:color var(--motion-fast),border-color var(--motion-fast),background-color var(--motion-fast),box-shadow var(--motion-fast)}
.reference-ui .product-chips input:checked+span{color:var(--brand);border-color:var(--brand);background:var(--brand-subtle);box-shadow:inset 0 0 0 1px var(--brand)}
.reference-ui .product-chips input:checked+span:before{content:'✓';margin-inline-end:6px;font-weight:500}
.reference-ui .product-chips input:focus-visible+span{outline:2px solid var(--brand);outline-offset:3px}
.reference-ui .receiving-branch{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);align-items:end;gap:var(--space-5);padding:var(--space-4);margin-bottom:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--brand-subtle)}
.reference-ui .receiving-branch label{margin:0}
.reference-ui .receiving-branch p{margin:0;color:var(--text-secondary);font-size:12px}
.reference-ui .bulk-quantity{display:flex;align-items:end;gap:var(--space-3);margin-bottom:var(--space-4)}
.reference-ui .bulk-quantity label{width:min(220px,100%);margin:0}
.reference-ui .bulk-quantity button{white-space:nowrap}
.reference-ui .product-variant-matrix{border:1px solid var(--border);border-radius:var(--radius-control)}
.reference-ui .product-variant-matrix table{min-width:650px}
.reference-ui .product-variant-matrix :is(th,td){padding:9px 12px}
.reference-ui .product-variant-matrix input{margin:0;min-height:36px}
.reference-ui .matrix-empty{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--text-secondary)}
.reference-ui .matrix-empty strong{color:var(--text-primary)}
.reference-ui .product-review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:0}
.reference-ui .product-review>div{padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface-subtle)}
.reference-ui .product-review dt{font-size:10px;color:var(--text-muted);margin-bottom:3px}
.reference-ui .product-review dd{margin:0;font-weight:500;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.reference-ui .product-save-bar{position:sticky;z-index:5;bottom:var(--space-3);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4);padding:11px var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-card);background:var(--surface-elevated);box-shadow:0 10px 30px #25251f17}
.reference-ui .product-save-bar p{margin:0;text-align:center;color:var(--text-secondary);font-size:12px}
.reference-ui .product-save-bar>a{min-height:40px;display:inline-flex;align-items:center;padding:8px 15px;border:1px solid var(--border);border-radius:var(--radius-control);color:var(--text-secondary)}
@media(max-width:1000px){.reference-ui .product-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-ui .product-stepper a{justify-content:center;font-size:0}.reference-ui .product-stepper a span{font-size:10px}.reference-ui .product-review{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.reference-ui .product-form-grid,.reference-ui .receiving-branch{grid-template-columns:1fr}.reference-ui .product-create-section{padding:var(--space-4)}.reference-ui .product-save-bar{grid-template-columns:auto 1fr}.reference-ui .product-save-bar p{display:none}}
@media(max-width:430px){.reference-ui .product-summary{grid-template-columns:1fr 1fr}.reference-ui .product-summary .ui-stat{padding:var(--space-3)}.reference-ui .product-summary .ui-stat-value{font-size:21px}.reference-ui .product-review{grid-template-columns:1fr}.reference-ui .bulk-quantity{align-items:stretch;flex-direction:column}.reference-ui .bulk-quantity label,.reference-ui .bulk-quantity button{width:100%}}
@media(prefers-reduced-motion:reduce){.reference-ui .product-table tbody tr,.reference-ui .product-upload,.reference-ui .product-chips span{transition:none!important}}
/* Premium commerce surfaces. This stylesheet is loaded with media="screen". */
.app-shell.reference-ui { background:var(--background); font-size:var(--text-base); }
.app-shell.reference-ui>main { min-width:0; min-height:100vh; }
.reference-ui .content { max-width:1600px; margin-inline:auto; padding:28px 32px 40px; }
.reference-ui .pagehead { gap:var(--space-4); margin-bottom:var(--space-6); align-items:center; }
.reference-ui .pagehead h1 { font-size:var(--text-title); line-height:1.5; font-weight:500; letter-spacing:-.5px; }
.reference-ui .page-description { margin:3px 0 0; font-size:var(--text-sm); color:var(--text-muted); }
.reference-ui .page-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.app-shell.reference-ui .app-topbar { height:60px; padding-inline:32px; background:var(--surface-elevated); border-color:var(--border); }
.app-shell.reference-ui .topbar-avatar { border-radius:50%; border:1px solid var(--border); color:var(--brand); background:var(--brand-subtle); }
.app-shell.reference-ui .sidebar { background:var(--brand-dark); gap:var(--space-5); padding-top:30px; }
.app-shell.reference-ui .sidebar .brand { color:var(--surface); font-size:22px; letter-spacing:1.3px; padding-bottom:16px; border-bottom:1px solid #ffffff12; }
.app-shell.reference-ui .sidebar .brand span { color:var(--brass); }
.app-shell.reference-ui .sidebar :is(summary,.nav-home):hover { background:#ffffff08; border-color:transparent; }
.app-shell.reference-ui .sidebar :is(.is-active>summary,.nav-home.is-active) { background:#244a3b; color:#fffefa; border-color:#ffffff0b; box-shadow:inset -2px 0 var(--brass); }
.app-shell.reference-ui .sidebar .nav-children { border-color:#3e5d4f; }
.app-shell.reference-ui .sidebar .nav-children a { color:#c6d5ca; font-size:12px; min-height:36px; display:flex; align-items:center; }
.app-shell.reference-ui .sidebar .nav-children a.is-active { background:#294e3e; color:#fffefa; box-shadow:inset -2px 0 var(--brass); }
.app-shell.reference-ui .sidebar .nav-section-label { border-color:#ffffff18; color:var(--shell-muted); }
.app-shell.reference-ui .sidebar-logout { border-color:#ffffff18; }
.reference-ui .content :is(.card,.ui-card) { box-shadow:none; }
.reference-ui .content .table-wrap { padding:0; max-width:100%; overscroll-behavior-inline:contain; }
.reference-ui .content table { font-size:var(--text-sm); }
.reference-ui .content table :is(th,td) { padding:10px 14px; line-height:1.6; border-bottom:1px solid var(--border); }
.reference-ui .content table th { color:var(--text-secondary); font-size:var(--text-xs); font-weight:500; background:var(--surface-subtle); }
.reference-ui .content table tbody tr:hover { background:var(--brand-subtle); }
.reference-ui .content table tbody tr:last-child td { border-bottom:0; }
.reference-ui .content table td.numeric { text-align:end; font-variant-numeric:tabular-nums; }
.reference-ui .content td form { margin:0; }
.reference-ui .content :is(input,select,textarea) { font-size:var(--text-sm); background:var(--surface-elevated); border-color:var(--border-strong); transition:border-color var(--motion-fast),box-shadow var(--motion-fast); }
.reference-ui .content :is(input,select,textarea):focus { border-color:var(--brand); box-shadow:var(--focus-ring); outline:0; }
.reference-ui .content :is(label,legend) { font-size:var(--text-sm); color:var(--text-secondary); }
.reference-ui .content fieldset { min-width:0; border:0; margin:0; padding:0; }
.reference-ui .content legend { margin-bottom:var(--space-2); }
.reference-ui .content :is(button,.primary,.ui-button,.button) { transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast); }
.reference-ui .content :is(a.button,button.secondary,.outline) { background:var(--surface); border:1px solid var(--border-strong); color:var(--text-primary); }
.reference-ui .content :is(a.button,button.secondary,.outline):hover { background:var(--brand-subtle); color:var(--brand); border-color:var(--brand); }
.reference-ui .content .link { background:transparent; color:var(--brand); border:1px solid var(--border); padding:5px 10px; min-height:32px; }
.reference-ui .content .danger { color:var(--danger); background:var(--danger-subtle); }
.reference-ui .content :is(a,button,summary):focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.reference-ui .content [hidden] { display:none!important; }
.reference-ui .content .executive-hero { background:var(--brand-dark); border-color:var(--brand); min-height:112px; box-shadow:none; }
.reference-ui .executive-hero:after { display:none; }
.reference-ui .executive-hero :is(p,.executive-eyebrow) { color:#d4e1d6; }
.reference-ui .executive-kpi { border-block-start-color:var(--border)!important; }
.reference-ui .executive-chart-track>span,.reference-ui .executive-branch-track>span { background:#8fae99; }
.reference-ui .executive-work-grid>a:hover { border-color:var(--brand); }
.reference-ui .product-summary { gap:0; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-card); overflow:hidden; }
.reference-ui .product-summary .ui-stat { border:0; border-inline-end:1px solid var(--border); border-radius:0; margin:0; padding:14px 20px; }
.reference-ui .product-summary .ui-stat:last-child { border:0; }
.reference-ui .product-summary .ui-stat-value { font-size:25px; font-weight:500; }

.reference-ui .product-table { min-width:940px; }
.reference-ui .product-identity img,.reference-ui .product-thumb-placeholder { width:52px; height:58px; border-radius:5px; }
.reference-ui .product-workbench { display:grid; gap:var(--space-5); }
.reference-ui .product-overview { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:40px; padding:24px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); }
.reference-ui .product-gallery { min-width:0; }
.reference-ui .gallery-main { display:block; width:100%; height:auto; max-height:360px; aspect-ratio:1; object-fit:contain; background:var(--surface-subtle); border-radius:6px; }
.reference-ui .gallery-empty { min-height:280px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; background:var(--brand-subtle); color:var(--brand); }
.reference-ui .gallery-empty>span { font:22px Georgia,serif; letter-spacing:2px; }
.reference-ui .gallery-thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.reference-ui .content .gallery-thumbs button { width:58px; height:58px; padding:3px; background:var(--surface); border:1px solid var(--border); }
.reference-ui .gallery-thumbs button[aria-pressed=true] { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.reference-ui .gallery-thumbs img { width:100%; height:100%; object-fit:cover; border-radius:3px; }
.reference-ui .product-overview-copy { display:flex; flex-direction:column; align-items:flex-start; padding-block:12px; min-width:0; }
.reference-ui .product-eyebrow { display:flex; gap:16px; align-items:center; color:var(--text-muted); font-size:12px; width:100%; justify-content:space-between; }
.reference-ui .product-overview-copy h2 { font-size:30px; line-height:1.4; margin:18px 0 5px; font-weight:500; }
.reference-ui .product-model { color:var(--text-muted); font-size:12px; letter-spacing:1px; }
.reference-ui .product-description { color:var(--text-secondary); font-size:14px; margin:18px 0; line-height:1.8; overflow-wrap:anywhere; }
.reference-ui .product-price { display:flex; flex-direction:column; gap:2px; }
.reference-ui .product-price>small { color:var(--text-muted); font-size:11px; }
.reference-ui .product-price>bdi { font-size:29px; font-weight:500; color:var(--brand); }
.reference-ui .product-cost { display:flex; gap:12px; font-size:12px; color:var(--text-muted); margin-top:5px; }
.reference-ui .product-facts { display:flex; flex-wrap:wrap; gap:32px; margin:22px 0; }
.reference-ui .product-facts dt { color:var(--text-muted); font-size:11px; }
.reference-ui .product-facts dd { margin:2px 0 0; font-size:13px; font-weight:500; }
.reference-ui .product-quicklinks { display:flex; flex-wrap:wrap; gap:18px; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); width:100%; font-size:12px; }
.reference-ui .inventory-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); }
.reference-ui .inventory-strip>div { padding:14px 18px; border-inline-end:1px solid var(--border); }
.reference-ui .inventory-strip>div:last-child { border:0; }
.reference-ui .inventory-strip dt { font-size:11px; color:var(--text-muted); }
.reference-ui .inventory-strip dd { font-size:24px; font-weight:500; margin:3px 0 0; }
.reference-ui .product-workbench>.card { margin:0; }
.reference-ui .product-data-section { padding:0; overflow:hidden; }
.reference-ui .product-data-section>.section-heading { padding:16px 20px; margin:0; }
.reference-ui .branch-stock-table { min-width:740px; }
.reference-ui .content .stock-available { color:var(--brand); font-weight:500; background:#eaf1ec66; }
.reference-ui .barcode-value { font:12px ui-monospace,Consolas,monospace; }
.reference-ui .product-options-panel>summary { cursor:pointer; font-size:14px; font-weight:500; padding-block:4px; }
.reference-ui .product-options-panel>summary>span { font-size:11px; color:var(--text-muted); font-weight:400; margin-inline-start:12px; }
.reference-ui .product-options-panel .product-chips { margin-bottom:16px; }
.reference-ui .product-stepper { box-shadow:none; border-radius:6px; background:var(--surface); }
.reference-ui .product-stepper span { color:var(--brand); border-color:var(--border-strong); background:var(--brand-subtle); }
.reference-ui .product-chips span { border-radius:6px; }
.reference-ui .product-chips input:checked+span { box-shadow:none; }
.reference-ui .product-wizard { gap:16px; padding-bottom:0; }
.reference-ui .product-create-section { padding:22px 24px; }
.reference-ui .product-save-bar { box-shadow:var(--shadow-raised); }
.reference-ui .product-edit-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:20px; align-items:start; }
.reference-ui .product-edit-grid .card { margin:0; }
.reference-ui .product-edit-grid .option-grid { display:flex; flex-wrap:wrap; gap:12px; }
.reference-ui .product-edit-grid .product-thumbnail { width:120px; height:140px; object-fit:contain; background:var(--surface-subtle); }
.reference-ui .pos-bar { background:var(--brand-dark); padding:12px 18px; border-radius:6px; font-size:12px; flex-wrap:wrap; gap:10px; }
.reference-ui .pos-shell { grid-template-columns:minmax(0,1fr) minmax(320px,370px); gap:20px; align-items:start; }
.reference-ui .pos-shell .totals { top:76px; }
.reference-ui .scan-input { border:1px solid var(--brand)!important; background:var(--surface-elevated); min-height:52px!important; font-size:16px!important; }
.reference-ui .content .payment-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0; }
.reference-ui .payment-methods label { cursor:pointer; position:relative; margin:0; }
.reference-ui .payment-methods input { position:absolute; opacity:0; width:1px; }
.reference-ui .payment-methods span { display:block; text-align:center; border:1px solid var(--border); border-radius:6px; padding:10px 6px; color:var(--text-secondary); }
.reference-ui .payment-methods input:checked+span { color:var(--brand); border-color:var(--brand); background:var(--brand-subtle); font-weight:500; }
.reference-ui .payment-methods input:focus-visible+span { outline:2px solid var(--brand); outline-offset:2px; }
.reference-ui .checkout-disclosure { border-block-start:1px solid var(--border); padding-top:12px; }
.reference-ui .checkout-disclosure summary { cursor:pointer; color:var(--text-secondary); font-size:12px; margin-bottom:8px; }
.reference-ui .checkout-disclosure label { display:block; margin-top:8px; }
.reference-ui .checkout-change { display:flex; justify-content:space-between; font-size:13px; color:var(--brand); background:var(--brand-subtle); padding:10px 12px; border-radius:6px; }
.reference-ui #payment-panel { display:grid; gap:14px; padding-top:14px; border-top:1px solid var(--border); }
.reference-ui #payment-panel>label { margin:0; }
.reference-ui #open-payment { width:100%; }
.reference-ui .pos-stage { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:var(--text-muted); font-size:11px; }
.reference-ui .pos-stage strong { color:var(--brand); }
.reference-ui .pos-cart .cart-row { min-width:570px; grid-template-columns:minmax(180px,1fr) 76px 100px 90px 44px; }
.reference-ui .pos-cart .cart-row>*:nth-child(4) { display:block; }
.reference-ui .content .pos-cart { overflow-x:auto; }
@media(min-width:1600px){.reference-ui .content{padding-inline:44px}}
@media(max-width:1100px){.reference-ui .pos-shell{grid-template-columns:minmax(0,1fr)}.reference-ui .pos-shell .totals{position:static}.reference-ui .product-overview{gap:24px}.reference-ui .inventory-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.reference-ui .product-edit-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:800px){.reference-ui .content{padding:22px 20px}.app-shell.reference-ui .app-topbar{padding-inline:20px}.reference-ui .product-overview{grid-template-columns:minmax(200px,.8fr) minmax(0,1fr);gap:20px;padding:18px}.reference-ui .product-price>bdi{font-size:24px}}
@media(max-width:540px){.reference-ui .content{padding:20px 14px 28px}.reference-ui .pagehead{align-items:flex-start;flex-direction:column;gap:12px}.reference-ui .pagehead h1{font-size:25px}.reference-ui .product-overview{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}.reference-ui .gallery-main{max-height:310px}.reference-ui .product-overview-copy{padding:0}.reference-ui .product-overview-copy h2{font-size:26px}.reference-ui .inventory-strip>div{padding:12px 10px}.reference-ui .inventory-strip dt{font-size:10px}.reference-ui .inventory-strip dd{font-size:21px}.reference-ui .product-summary .ui-stat{padding:12px 14px}.reference-ui .product-facts{gap:22px}.reference-ui .product-create-section{padding:18px 16px}.reference-ui .product-stepper a{min-height:40px}.reference-ui .pos-stage{flex-wrap:wrap}.reference-ui .content .payment-methods span{min-height:44px}.reference-ui .product-row-actions a{min-width:40px;min-height:40px}}
@media(prefers-reduced-motion:reduce){.reference-ui *{transition:none!important;animation:none!important}}

/* UX SYSTEM V2 — typography and paired column contracts. No workflow/print rules. */
.reference-ui{font-synthesis:none}
.reference-ui :is(input,select,textarea,button){font-family:var(--font-ui)}
.reference-ui :is(b,strong){font-weight:500}
.reference-ui .content :is(label,input,select,textarea),.app-shell.reference-ui .sidebar .nav-children a{font-weight:400}
.reference-ui .content :is(h1,h2,h3,th,button,.button,.primary,.ui-button,legend),.reference-ui .topbar-identity b{font-weight:500}
.reference-ui .content :is(th,td){vertical-align:middle;text-align:start}
.reference-ui .content table td.numeric{ text-align:start }
.reference-ui .content table :is(th,td).col-number{ text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap }
.reference-ui .content table :is(th,td):is(.col-status,.col-actions,.col-check){text-align:center}
.reference-ui .content table :is(th,td).col-date{text-align:start;white-space:nowrap}
.reference-ui .content .table-v2{width:100%;border-collapse:collapse;table-layout:fixed}
.reference-ui .content .table-v2 :is(th,td){padding:12px 14px}
.reference-ui .content .table-v2 th{font-size:12px;line-height:1.6}
.reference-ui .content .table-v2 td{font-size:13px;line-height:1.65}
.reference-ui .content .table-v2 .col-actions>div{justify-content:center}
.reference-ui .content .table-v2 .col-number>.numeric{font-size:14px}
.reference-ui .content .table-v2 .col-date time{display:inline-block;direction:ltr;unicode-bidi:isolate}
.reference-ui .content :is(.record-code,.barcode-value,.product-identity code){direction:ltr;unicode-bidi:isolate;text-align:right;font-family:var(--font-ui)}
.reference-ui .content .table-v2 td :is(.record-code,.barcode-value){white-space:nowrap}
.reference-ui .content .table-v2 col.identity{width:240px}
.reference-ui .content .table-v2 col.variant{width:175px}
.reference-ui .content .table-v2 col.branch{width:145px}
.reference-ui .content .table-v2 col.quantity{width:95px}
.reference-ui .content .table-v2 col.money{width:150px}
.reference-ui .content .table-v2 col.status{width:95px}
.reference-ui .content .table-v2 col.date{width:115px}
.reference-ui .content .table-v2 col.actions{width:108px}
.reference-ui #product-variants .table-v2{min-width:920px}



.reference-ui .inventory-table{min-width:1130px}
.reference-ui .inventory-table .product-identity img,.reference-ui .inventory-table .product-thumb-placeholder{width:44px;height:52px;object-fit:cover;flex:none}
.reference-ui .inventory-table .product-identity{gap:10px;min-width:0}
.reference-ui .inventory-table .product-identity>div{min-width:0}
.reference-ui .inventory-table .product-identity strong{white-space:normal;overflow-wrap:anywhere}
.reference-ui .inventory-table .stock-available{background:var(--brand-subtle)}
.reference-ui .content .inventory-table .stock-available>.numeric{font-size:19px;font-weight:500}
.reference-ui .inventory-table .stock-empty{background:var(--warning-subtle);color:var(--warning)}
.reference-ui .inventory-table .stock-note{display:block;font-size:11px;font-weight:400;color:inherit}
.reference-ui .inventory-table .stock-damaged{color:var(--danger)}
.reference-ui .inventory-table .stock-inspection{color:var(--info)}
.reference-ui .inventory-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--text-muted);font-size:12px}
.reference-ui .content:has(#pos-transaction){max-width:none;padding:20px 24px 28px}
.reference-ui .content:has(#pos-transaction) .pagehead{margin-bottom:12px}
.reference-ui #pos-transaction .pos-stage{margin-bottom:10px}
.reference-ui #pos-transaction .pos-bar{margin-bottom:16px;padding:10px 14px}
.reference-ui #pos-transaction .pos-shell{grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.reference-ui .content .pos-cart{padding:0;min-height:230px}
.reference-ui #pos-transaction .pos-cart table{min-width:770px;table-layout:fixed}
.reference-ui .content .pos-cart td{padding:12px 10px;vertical-align:top}
.reference-ui .pos-cart .cart-name{display:block;font-size:14px;margin-bottom:2px}
.reference-ui .pos-cart .cart-option,.reference-ui .pos-cart .cart-model{display:block;color:var(--text-muted);font-size:11px}
.reference-ui .content .quantity-stepper{display:grid;grid-template-columns:30px 42px 30px;align-items:center;direction:ltr;gap:0}
.reference-ui .content .quantity-stepper input{width:42px;padding:5px 0;text-align:center;min-height:36px;border-radius:0;appearance:textfield;margin:0}
.reference-ui .quantity-stepper input::-webkit-inner-spin-button{appearance:none}
.reference-ui .content .quantity-stepper button{min-height:36px;padding:0;border:1px solid var(--border-strong);background:var(--surface);color:var(--brand);font-size:18px;border-radius:4px}
.reference-ui .cart-discount summary{font-size:11px;cursor:pointer;white-space:nowrap;color:var(--brand)}
.reference-ui .cart-discount :is(input,select){min-height:34px;margin-top:6px}
.reference-ui .cart-line-total{font-weight:500}
.reference-ui .cart-price-note{font-size:10px;color:var(--text-muted);white-space:normal;display:block}
.reference-ui .content .cart-remove{border:0;background:transparent;color:var(--danger);width:36px;height:36px;padding:8px}
.reference-ui .cart-remove svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.reference-ui .content #checkout{padding:18px;gap:12px}
.reference-ui .content #checkout-error{margin:0;font-size:13px;scroll-margin-top:85px}
.reference-ui .content #checkout .money-row{padding:12px;gap:10px;flex-wrap:wrap}
.reference-ui .content #checkout #estimated{font-size:25px}
.reference-ui .content #checkout .pay-btn{font-size:17px;min-height:48px;width:100%}
.reference-ui .tender-tools{display:flex;justify-content:flex-start;margin-top:6px}
.reference-ui .content .tender-tools button{min-height:32px;font-size:11px;padding:4px 10px}
.reference-ui .checkout-totals{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-secondary)}
.reference-ui .checkout-balance{padding:10px 12px;background:var(--surface-subtle);border-radius:6px;display:grid;gap:6px}
.reference-ui .payment-blocker{font-size:11px;line-height:1.7;color:var(--text-muted);margin:0}
.reference-ui .content .pos-cart :is(th,td).col-number{padding-inline:10px}
@media(min-width:1450px){.app-shell.reference-ui:has(#pos-transaction)>.sidebar{width:220px}.app-shell.reference-ui:has(#pos-transaction)>main{margin-right:220px}}
@media(max-width:1250px){.reference-ui #pos-transaction .pos-shell{grid-template-columns:minmax(0,1fr)}.reference-ui #pos-transaction .totals{position:static;max-width:none}}

@media(max-width:540px){.reference-ui .content:has(#pos-transaction){padding:18px 14px}.reference-ui .content .table-v2 :is(th,td){padding:11px 12px}.reference-ui .content .pos-cart td{padding:10px}}
/* POS V3: compact product/color groups; authoritative quote/payment states. */
.product-search-group{background:var(--surface,#fffefb);border:1px solid var(--border,#e3e6df);border-radius:12px;padding:14px 16px;text-align:start}
.product-search-group h3{font-size:15px;font-weight:500;margin:0;display:inline}
.product-search-group>bdi{font-size:12px;color:#657467;margin-inline-start:12px}
.product-search-group p{font-size:12px;margin:10px 0 6px;color:#526054}
.variant-choices{display:flex;flex-wrap:wrap;gap:7px}
.variant-choice{border:1px solid #d1dbd2;background:#f4f7f1;color:#174638;padding:8px 11px;border-radius:8px;font-size:12px;min-height:40px;box-shadow:none}
.variant-choice:hover:not(:disabled),.variant-choice:focus-visible{background:#e6eee2;border-color:#174638}
.variant-choice:disabled{opacity:.48;cursor:not-allowed}
#pos-transaction .search-results{display:grid;gap:8px;max-height:340px;overflow:auto}
.quote-status{font-size:12px;color:#174638;margin:8px 0}
.quote-stale .quote-status{color:#866424}
.quote-stale #estimated,.quote-stale .cart-line-total{opacity:.5}
.quote-breakdown{font-size:12px;color:#657467;border-block:1px solid #e4e7de;padding:9px 0;margin-block:10px}
.quote-breakdown>div{display:flex;justify-content:space-between;gap:10px;margin-block:4px}
.payment-validation{font-size:12px;color:#9f342c;line-height:1.7}
@media(max-width:600px){.product-search-group{padding:12px}.variant-choice{flex:1 1 130px}#pos-transaction .search-results{max-height:290px}}
/* Calm products and inventory: scoped presentation, no changes to POS or print. */
.reference-ui .calm-summary{grid-template-columns:repeat(2,minmax(0,1fr));max-width:540px}
.reference-ui .calm-summary .ui-stat{display:flex;align-items:center;justify-content:space-between;gap:20px}
.reference-ui .calm-summary .ui-stat-value{margin:0}
.reference-ui .content .filter-toolbar{display:grid;align-items:end;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-4)}
.reference-ui .content .filter-toolbar>label{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
.reference-ui .content .filter-toolbar :is(input:not([type=hidden]),select){height:var(--control-height);min-height:var(--control-height);margin:0;min-width:0}
.reference-ui .filter-actions{display:flex;align-self:end;align-items:center;gap:var(--space-2)}
.reference-ui .content .filter-actions :is(button,a){height:var(--control-height);min-height:var(--control-height);margin:0;white-space:nowrap}
.reference-ui .filter-toolbar--products{grid-template-columns:minmax(0,2fr) minmax(150px,1fr) auto}
.reference-ui .filter-toolbar--inventory{grid-template-columns:minmax(180px,2fr) repeat(2,minmax(120px,1fr)) auto}
.reference-ui .filter-toolbar--inventory .inventory-filter-more{order:1}
.reference-ui .filter-toolbar--sales{grid-template-columns:repeat(6,minmax(0,1fr)) auto}
@media(min-width:901px) and (max-width:1360px){.reference-ui .filter-toolbar--sales{grid-template-columns:repeat(3,minmax(0,1fr)) auto}.reference-ui .filter-toolbar--sales>label:nth-child(4){grid-column:1}.reference-ui .filter-toolbar--sales .filter-actions{grid-column:4;grid-row:2}}
@media(max-width:900px){.reference-ui .content .filter-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-ui .filter-toolbar--inventory>label:first-child{grid-column:1/-1}}
@media(max-width:540px){.reference-ui .content .filter-toolbar{--control-height:44px;grid-template-columns:minmax(0,1fr)}.reference-ui .filter-actions>*{flex:1}}
.reference-ui .content .calm-table{table-layout:fixed}
.reference-ui .content .calm-table :is(th,td){padding:14px 16px;vertical-align:middle;text-align:center;font-variant-numeric:tabular-nums}
.reference-ui .content .calm-table th{font-weight:500}
.reference-ui .content .calm-table td{font-weight:400}
.reference-ui .content .calm-table :is(th,td):first-child{text-align:start}
.reference-ui .content .calm-table form{margin:0}
.reference-ui .content .calm-table form>button{margin:0}
.reference-ui .content .calm-variants :is(th,td):first-child{text-align:center}
.reference-ui .content .calm-table :is(th,td).col-number{text-align:center;font-variant-numeric:tabular-nums}
.reference-ui .content .calm-table :is(th,td).col-status,.reference-ui .content .calm-table :is(th,td).col-actions{text-align:center}
.reference-ui .content .calm-table :is(th,td).col-date{text-align:center}
.reference-ui .calm-products{min-width:880px}
.reference-ui .calm-product-overview .product-overview{grid-template-columns:minmax(220px,280px) minmax(0,1fr);align-items:start;gap:24px;padding:20px}
.reference-ui .calm-product-overview .gallery-main{height:260px;max-height:none;aspect-ratio:auto;object-fit:contain;background:#f5f4ef}
.reference-ui .calm-product-overview .gallery-empty{min-height:260px;border-radius:6px}
.reference-ui .calm-product-overview .gallery-thumbs{margin-top:8px;gap:6px}
.reference-ui .calm-product-overview .gallery-thumbs button{width:44px;height:44px;min-height:44px}
.reference-ui .calm-product-overview .gallery-thumbs img{object-fit:contain}
.reference-ui .calm-product-overview .product-overview-copy{padding:0}
.reference-ui .calm-product-overview .product-eyebrow{justify-content:flex-start;flex-wrap:wrap;gap:10px}
.reference-ui .calm-product-overview .product-overview-copy h2{margin:4px 0 0;font-size:26px;line-height:1.25;overflow-wrap:anywhere}
.reference-ui .calm-product-overview .product-model{line-height:1.5;overflow-wrap:anywhere}
.reference-ui .calm-product-overview .product-description{margin:4px 0 6px;line-height:1.65}
.reference-ui .calm-product-overview .product-price{gap:0}
.reference-ui .calm-product-overview .product-price>small{line-height:1.5}
.reference-ui .calm-product-overview .product-price>bdi{font-size:26px;line-height:1.3;overflow-wrap:anywhere}
.reference-ui .calm-product-overview .product-cost{display:block;max-width:100%;padding:0;font-size:12px;margin:2px 0 0}
.reference-ui .calm-product-overview .product-cost>summary{min-height:32px;padding-block:6px;line-height:20px;box-sizing:border-box}
.reference-ui .calm-product-overview .product-cost>span{margin-inline-end:8px}
.reference-ui .calm-product-overview .primary-stock{margin:2px 0 0}
.reference-ui .calm-product-overview .primary-stock>div{align-items:center;gap:14px;min-height:34px}
.reference-ui .calm-product-overview .primary-stock dd{font-size:24px;line-height:1.25}
.reference-ui .calm-product-overview .product-overview-copy>.hint{margin:4px 0;font-size:12px}
.reference-ui .calm-product-overview .product-quicklinks{margin-top:6px;padding-top:4px;gap:4px 18px}
.reference-ui .calm-product-overview .product-quicklinks>a{display:inline-flex;align-items:center;min-height:32px}
.reference-ui .product-cost summary{cursor:pointer;color:var(--text-secondary)}
.reference-ui .primary-stock{margin:16px 0 0}
.reference-ui .primary-stock>div{display:flex;align-items:baseline;gap:18px}
.reference-ui .primary-stock dt{font-size:13px;color:var(--text-secondary)}
.reference-ui .primary-stock dd{margin:0;font-size:28px;font-weight:500;color:var(--brand)}
.reference-ui .calm-product-overview .branch-stock-table{min-width:0}
.reference-ui #product-variants .calm-variants{min-width:690px}
.reference-ui .barcode-cell{display:inline-flex;align-items:flex-start;gap:8px;text-align:left;direction:ltr}
.reference-ui .barcode-stack{display:flex;flex-direction:column;min-width:0}
.reference-ui .barcode-stack .barcode-value{display:flex;align-items:center;min-height:32px}
.reference-ui .content .barcode-cell .print-icon{width:32px;height:32px;min-height:32px;padding:6px}
.reference-ui .table-date{display:inline-flex;flex-direction:column;align-items:center}
.reference-ui .table-date small{margin:2px 0 0;color:var(--text-muted)}
.reference-ui .calm-sales{min-width:760px}
.reference-ui .variant-print{margin:0}
.reference-ui .print-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:7px;background:transparent;color:var(--brand);border:1px solid var(--border);border-radius:7px;box-shadow:none}
.reference-ui .variant-sku{display:block;margin:2px 0 0;font-size:11px;color:var(--text-muted)}
.reference-ui .stock-details{margin:0;font-size:12px;white-space:normal}
.reference-ui .stock-details summary{display:inline-flex;align-items:center;justify-content:center;gap:6px;list-style:none;cursor:pointer;color:var(--brand);padding-block:3px;line-height:1.6}
.reference-ui .stock-details summary::-webkit-details-marker{display:none}
.reference-ui .stock-details summary::before{content:"◂";flex:none}
.reference-ui .stock-details[open]>summary::before{transform:rotate(-90deg)}
.reference-ui .stock-details dl{margin:8px 0 0;padding:10px;background:var(--surface-muted,#f5f5ef);border-radius:6px}
.reference-ui .stock-details dl>div{display:flex;justify-content:space-between;gap:12px;margin-block:4px}
.reference-ui .stock-details dd{margin:0;font-variant-numeric:tabular-nums}
.reference-ui .stock-details .hint{font-size:10px;line-height:1.7;margin-bottom:0}
.reference-ui .stock-indicator{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:4px}
.reference-ui .inventory-option{display:block;font-size:12px;margin-top:5px}
.reference-ui .inventory-barcode{font-size:10px;color:var(--text-muted)}
.reference-ui .calm-inventory{min-width:680px}
.reference-ui .calm-inventory .stock-available{background:transparent}

.reference-ui .inventory-filter-more{grid-column:1/-1;grid-row:auto;font-size:12px}
.reference-ui .inventory-filter-more>label{max-width:220px;margin-top:8px}
.reference-ui .inventory-filter-more summary{cursor:pointer;color:var(--text-secondary)}
@media(max-width:800px){.reference-ui .calm-product-overview .product-overview{grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:20px}.reference-ui .inventory-filter-more{grid-row:auto}}
@media(max-width:900px){
 .reference-ui .calm-product-overview .product-overview{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
 .reference-ui .calm-product-overview .product-gallery{width:100%;max-width:340px;justify-self:center}
 .reference-ui .calm-product-overview .gallery-main{height:240px}
 .reference-ui .calm-product-overview .gallery-empty{min-height:240px}
 .reference-ui .calm-product-overview .product-overview-copy{width:100%}
 .reference-ui .calm-product-overview .product-cost>summary,.reference-ui .calm-product-overview .product-quicklinks>a{min-height:44px}
}
@media(max-width:540px){
 .reference-ui .calm-product-overview .product-overview{grid-template-columns:minmax(0,1fr)}
 .reference-ui .calm-product-overview .gallery-main{max-height:270px}
 
 .reference-ui .content :is(.calm-products,.calm-inventory){min-width:0;display:block}
 .reference-ui :is(.calm-products,.calm-inventory) colgroup{display:none}
 .reference-ui :is(.calm-products,.calm-inventory) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .reference-ui :is(.calm-products,.calm-inventory) tbody{display:block}
 .reference-ui :is(.calm-products,.calm-inventory) tr{display:grid;grid-template-columns:1fr 1fr;padding:12px 6px;border-bottom:1px solid var(--border)}
 .reference-ui .content :is(.calm-products,.calm-inventory) td{display:block;border:0;padding:7px 10px;min-width:0;text-align:start}
 .reference-ui :is(.calm-products,.calm-inventory) td:first-child,.reference-ui :is(.calm-products,.calm-inventory) td[colspan]{grid-column:1/-1}
 .reference-ui :is(.calm-products,.calm-inventory) td[data-label]::before{content:attr(data-label);display:block;color:var(--text-secondary);font-size:10px;margin-bottom:3px}
 .reference-ui .calm-inventory .inventory-details-cell{grid-column:1/-1}
 .reference-ui .calm-products .col-actions{grid-column:1/-1}
 .reference-ui .content .calm-product-overview .branch-stock-table :is(th,td){padding:10px 7px;white-space:normal;overflow-wrap:anywhere}
}