:root {
  --ink: #14211d;
  --muted: #65716d;
  --line: #d9ded8;
  --panel: #ffffff;
  --canvas: #f4f7f2;
  --green: #1d6f55;
  --green-dark: #183c34;
  --amber: #c58a22;
  --red: #b84a3a;
  --blue: #2f5f9f;
  --shadow: 0 10px 30px rgba(22, 33, 29, 0.08);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* Etiquetas de bodega: hoja física 210 x 270 mm, 8 x 6. */
.labels-module { overflow: hidden; }
.labels-heading,
.labels-actions,
.labels-workspace,
.label-entry-card,
.label-product-found {
  display: flex;
  gap: 12px;
}
.labels-heading { align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.labels-heading h3 { margin: 6px 0 3px; font-size: 22px; }
.labels-heading p { margin: 0; color: var(--muted); }
.module-chip { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #e6f2ea; color: #0e6840; font-size: 11px; font-weight: 800; }
.labels-count { min-width: 108px; display: grid; justify-items: center; padding: 10px 14px; border-radius: 12px; background: #f2f7f3; color: #153d2e; }
.labels-count strong { font-size: 28px; line-height: 1; }
.labels-count span,.labels-count small { font-size: 11px; }
.label-entry-card { display: grid; grid-template-columns: minmax(190px,240px) auto minmax(0,1fr); align-items: end; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf8; }
.label-entry-card label { display: grid; gap: 5px; font-size: 11px; font-weight: 800; color: #31463d; }
.label-entry-card input { height: 38px; min-width: 0; }
.label-entry-card .label-product-found { display: grid; grid-template-columns: repeat(6,minmax(70px,1fr)); gap:7px; align-self:stretch; margin:0; padding:4px 7px; border-left:3px solid #0e6840; background:#f4f8f5; }
.label-product-found div { min-width: 0; }
.label-product-found span { display: block; color: var(--muted); font-size: 10px; line-height: 1.1; text-transform: uppercase; }
.label-product-found strong { display: block; overflow-wrap: anywhere; font-size: 12px; line-height: 1.2; }
.label-product-found div:nth-child(4) { text-align: center; }
.label-empty-search { align-self:stretch; display:flex; align-items:center; margin:0; padding:6px 9px; border:1px dashed #b9c9bf; border-radius:8px; color:var(--muted); font-size:10px; }
.label-settings { margin: 10px 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfb; }
.label-settings summary { padding: 10px 12px; color: var(--green-dark); font-size: 13px; font-weight: 900; cursor: pointer; }
.label-settings-grid { display: grid; grid-template-columns: repeat(3,minmax(130px,180px)) minmax(220px,1fr); gap: 10px; align-items: end; padding: 0 12px 10px; }
.label-settings-grid label { gap: 4px; font-size: 11px; }
.label-settings-grid input,.label-settings-grid select { min-height: 36px; height: 36px; }
.label-layout-result { min-height: 52px; display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 8px; padding: 6px 10px; border-radius: 7px; background: #eaf3ed; }
.label-layout-result strong { grid-row: 1 / 3; align-self: center; color: var(--green); font-size: 22px; }
.label-layout-result span,.label-layout-result small { font-size: 11px; }
.label-field-picker { display: grid; grid-template-columns:1fr 1fr; gap: 7px 10px; padding: 8px 0 12px; }
.label-field-picker label { display: inline-flex; grid-template-columns: auto 1fr; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.label-field-picker input { width: 15px; min-height: 15px; height: 15px; margin: 0; }
.label-advanced-settings { border-top: 1px solid var(--line); }
.label-advanced-settings summary { padding: 8px 12px; font-size: 11px; font-weight: 800; }
.label-advanced-settings > div { display: grid; grid-template-columns: repeat(5,minmax(120px,170px)); gap: 10px; padding: 0 12px 10px; }
.label-advanced-settings label { gap: 3px; font-size: 10px; }
.label-advanced-settings input { min-height: 34px; height: 34px; }
.label-local-editor { display: grid; grid-template-columns: auto repeat(4,minmax(110px,145px)) minmax(150px,1fr); gap: 9px; align-items: end; padding: 9px 12px; border-top: 1px solid var(--line); }
.label-local-editor > strong { align-self: center; color: var(--green-dark); font-size: 11px; }
.label-local-editor label { gap: 3px; font-size: 10px; }
.label-local-editor input { min-height: 34px; height: 34px; }
.label-local-editor > span { align-self: center; color: var(--muted); font-size: 10px; }
.label-single-editor { display:grid; grid-template-columns:minmax(250px,330px) minmax(300px,560px); gap:14px; align-items:start; justify-content:start; padding:14px 18px; border-top:1px solid var(--line); background:#eef3f7; }
.label-single-editor > div:first-child { display: grid; gap: 5px; }
.label-single-editor > div:first-child strong { color: var(--green-dark); font-size: 14px; }
.label-single-editor > div:first-child span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.label-editor-tools .label-settings-grid { display:grid; grid-template-columns:1fr; gap:7px; padding:7px 0 12px; }
.label-editor-tools .label-layout-result { min-height:42px; }
.label-editor-tools .label-advanced-settings { border:0; }
.label-editor-tools .label-advanced-settings summary { padding:8px 0; }
.label-editor-tools .label-advanced-settings > div { grid-template-columns:1fr 1fr; gap:6px; padding:0 0 10px; }
.label-single-preview { max-width: 100%; display: grid; place-items: stretch; justify-self: center; border: 1px dashed #7990a6; background: #fff; box-shadow: 6px 8px 0 rgba(53,72,91,.16); overflow: hidden; }
.label-single-preview > span { place-self: center; padding: 20px; color: var(--muted); text-align: center; }
.label-single-preview .product-label { width: 100%; height: 100%; }
.label-single-preview .product-label-details { font-size: clamp(7px,.8vw,12px); }
.label-single-preview [data-draggable-local] { z-index: 3; cursor: move; touch-action: none; outline: 2px dashed #2f67d8; outline-offset: 2px; background: rgba(255,255,255,.94); }
.labels-actions { position: sticky; top: 74px; z-index: 7; align-items: center; flex-wrap: wrap; margin: 12px 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.96); }
.labels-actions span { color: var(--muted); font-size: 11px; }
.labels-workspace { align-items: flex-start; }
.labels-list-card { flex: 1 1 48%; min-width: 0; }
.labels-preview-card { flex: 1 1 52%; min-width: 0; }
.labels-list-card h4,.labels-preview-card h4 { margin: 5px 0 9px; }
.labels-table td { vertical-align: middle; }
.labels-table td small { display: block; color: var(--muted); font-size: 10px; }
.labels-table input { width: 68px; height: 32px; }
.label-preview-scroll { max-height:none; overflow:visible; padding:10px; border-radius:10px; background:#dfe5e1; }
.label-page-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.label-page-toolbar h4 { margin-right:auto; }
.label-page-toolbar .mini-link.active { background:var(--green); color:#fff; }
.label-preview-sheet { display: grid; gap: 6px; margin: 0 auto 18px; }
.label-preview-sheet:last-child { margin-bottom: 0; }
.label-preview-sheet > strong { color: #32443d; font-size: 12px; }
.label-preview-page { position: relative; width: min(100%, 700px); aspect-ratio: 210 / 297; margin: 0 auto; overflow: hidden; background: white; box-shadow: 0 5px 18px rgba(0,0,0,.16); }
.label-preview-page::after { content:"Área útil según márgenes"; position:absolute; z-index:20; pointer-events:none; left:var(--page-pad-left-pct,0%); top:var(--page-pad-top-pct,0%); right:calc(var(--page-pad-right-pct,0%)); bottom:calc(var(--page-pad-bottom-pct,0%)); box-sizing:border-box; border:1px dashed rgba(15,107,67,.45); color:rgba(15,107,67,.55); font-size:9px; }
.label-preview-grid { position: absolute; inset: var(--page-pad-top-pct,0%) 0 0 var(--page-pad-left-pct,0%); width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--label-cols,8),var(--label-width-pct,12.5%)); grid-template-rows: repeat(var(--label-rows,6),var(--label-height-pct,16.6667%)); gap: var(--label-gap-y-pct,0%) var(--label-gap-x-pct,0%); align-content: start; justify-content: start; }
.placed-label { position: absolute; box-sizing: border-box; }
.placed-label > .product-label { width: 100%; height: 100%; }
.product-label { position: relative; container-type: size; min-width: 0; min-height: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; padding: 2.5%; color: #081a4a; background-color: white; background-image: linear-gradient(#0c3485,#0c3485),linear-gradient(#0c3485,#0c3485),linear-gradient(#0c3485,#0c3485),linear-gradient(#0c3485,#0c3485),linear-gradient(#0c3485,#0c3485),linear-gradient(#0c3485,#0c3485),linear-gradient(#0c3485,#0c3485),linear-gradient(#0c3485,#0c3485); background-repeat: no-repeat; background-size: 12% 1.5px,1.5px 8%,12% 1.5px,1.5px 8%,12% 1.5px,1.5px 8%,12% 1.5px,1.5px 8%; background-position: left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom; }
.label-element { position: absolute !important; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; line-height: 1.05; }
.label-element small { display: block; flex:0 0 auto; width: 100%; color: #526174; font-size: clamp(4px,5cqh,11px); line-height:1; font-weight: 900; }
.label-element > span { display: grid; flex:1 1 auto; width: 100%; max-width:100%; min-height:0; box-sizing:border-box; place-items:center; overflow: hidden; overflow-wrap: anywhere; white-space:normal; font-size: clamp(5px,7cqh,18px); font-weight: 800; }
.label-element-logo { padding: 1%; }
.label-element-logo .product-label-logo { width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: contain; }
.product-label.printer-brother-ql700 .label-element-logo .product-label-logo { transform: rotate(-90deg); width: 92% !important; height: 92% !important; max-width:none; }
.label-element-description > span { color:#081a4a; text-transform:uppercase; }
.label-element-local { color: #111827; }
.label-element-local { background:#fff !important; }
.label-element-local > span { flex:1 1 auto; width:100%; height:auto; min-height:0; border:1px solid #334155; border-radius:3px; box-sizing:border-box; background:#fff !important; }
.label-single-preview [data-label-element] { z-index: 2; cursor: move; touch-action: none; overflow: visible; outline: 1.5px dashed transparent; outline-offset: 1px; background-color: transparent; }
.label-single-preview [data-label-element]:hover { outline-color: rgba(47,103,216,.38); }
.label-single-preview [data-label-element].label-element-selected { z-index: 4; outline-color: #2f67d8; background-color: rgba(255,255,255,.94); }
.label-resize-handle { position: absolute; z-index: 12; display: none; width: 14px; height: 14px; border: 2px solid #fff; border-radius:2px; background: #2563eb; box-shadow: 0 0 0 1px #2563eb; pointer-events:auto; }
.label-element-selected > .label-resize-handle { display: block; }
.label-move-grip { position:absolute; z-index:13; display:none; right:6px; top:5px; width:38px; height:14px; border:2px solid white; border-radius:7px; background:repeating-linear-gradient(90deg,#2563eb 0 4px,#93b4ff 4px 6px); box-shadow:0 0 0 1px #2563eb; cursor:move; pointer-events:auto; }
.label-element-selected > .label-move-grip { display:block; }
.handle-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.handle-n { left: calc(50% - 7px); top: -7px; cursor: ns-resize; }
.handle-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.handle-e { right: -7px; top: calc(50% - 7px); cursor: ew-resize; }
.handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.handle-s { left: calc(50% - 7px); bottom: -7px; cursor: ns-resize; }
.handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.handle-w { left: -7px; top: calc(50% - 7px); cursor: ew-resize; }
.handle-n,.handle-s { width:44px; margin-left:-15px; }
.handle-e,.handle-w { height:44px; margin-top:-15px; }
.label-single-preview [contenteditable] { cursor:move; pointer-events:none; }
.label-single-preview [contenteditable].label-text-editing { position:relative; z-index:15; cursor:text; pointer-events:auto; }
.label-single-preview [contenteditable]:focus { outline: 2px solid #f59e0b; background: #fff8db; }
.label-font-inspector { display:grid; grid-template-columns:1fr auto; gap:6px 8px; align-items:end; padding:8px; border:1px solid #bfd0c6; border-radius:8px; background:#fff; }
.label-font-inspector strong { grid-column:1/-1; font-size:11px; color:var(--green-dark); }
.label-font-inspector label { display:grid; gap:3px; font-size:10px; font-weight:800; }
.label-font-inspector input { height:34px; }
.label-preview-editor-column { position:sticky; top:8px; display:grid; gap:8px; align-content:start; justify-items:center; min-width:0; }
.label-font-inspector-top { width:min(100%,520px); box-sizing:border-box; grid-template-columns:minmax(180px,1fr) auto; }
.label-measurements { display:grid; gap:5px; margin-top:5px; }
.label-measurements > strong { font-size:11px; color:var(--green-dark); }
.label-measurements > div { max-width:100%; overflow-x:auto; border:1px solid #d2ddd7; border-radius:7px; background:#fff; }
.label-measurements table { width:100%; border-collapse:collapse; font-size:9px; }
.label-measurements th,.label-measurements td { padding:3px; border-bottom:1px solid #e4ebe7; text-align:left; }
.label-measurements thead th { background:#edf4ef; white-space:nowrap; }
.label-measurements tbody tr.active { background:#fff5d8; }
.label-measurements input { width:58px; min-width:52px; height:28px; padding:3px 5px; font-size:9px; }
.label-measurements small { color:var(--muted); font-size:9px; line-height:1.25; }
.label-surface-panel { align-self:stretch; display:flex; flex-direction:column; gap:9px; min-width:0; padding:10px; border:1px solid #c8d5ce; border-radius:9px; background:#f8fbf9; }
.label-surface-panel > strong { color:var(--green-dark); font-size:13px; }
.label-surface-panel > small { color:var(--muted); font-size:10px; line-height:1.3; }
.label-surface-details { margin-top:6px; border:1px solid #c8d5ce; border-radius:8px; background:#f8fbf9; }
.label-surface-details summary { padding:8px; cursor:pointer; color:var(--green-dark); font-size:11px; font-weight:900; }
.label-surface-details .label-surface-panel { border:0; border-top:1px solid #d7e1dc; border-radius:0; }
.surface-size-inputs { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.surface-size-inputs label { display:grid; gap:3px; color:#31463d; font-size:10px; font-weight:800; }
.surface-size-inputs input { min-width:0; height:34px; }
.surface-zoom { display:grid; gap:3px; color:#31463d; font-size:10px; font-weight:800; }
.surface-zoom input { width:100%; }
.surface-viewport { width:360px; height:300px; max-width:100%; overflow:auto; padding:8px; border:1px solid #cad5cf; border-radius:7px; background:#dde5e0; }
.surface-stage { position:relative; min-width:30px; min-height:24px; margin:100px; border:2px solid #455a64; border-radius:4px; background:linear-gradient(135deg,#eef2f0 25%,#e2e8e4 25%,#e2e8e4 50%,#eef2f0 50%,#eef2f0 75%,#e2e8e4 75%); background-size:12px 12px; overflow:visible; }
.surface-stage::before { content:"SUPERFICIE"; position:absolute; inset:4px auto auto 5px; color:#60736a; font-size:8px; font-weight:900; }
.surface-label-preview { position:absolute; z-index:2; box-sizing:border-box; border:2px solid #0c3485; background:rgba(255,255,255,.9); cursor:move; touch-action:none; }
.surface-label-preview > .product-label { width:100%; height:100%; }
.surface-label-preview.folds-surface { box-shadow:inset 0 0 0 3px rgba(245,158,11,.5); }
.product-label.background-regions { background-color:#fff; background-image:url("assets/label-regions-background.png"); background-repeat:no-repeat; background-position:center; background-size:100% 100%; }
.product-label.background-none { background:#fff; background-image:none; }
.product-label.background-regions::after { content:none; }
.product-label.background-regions .label-element { z-index:2; }
.label-background-image { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.product-label-back { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%; padding:7%; text-align:center; color:#081a4a; }
.product-label-back .back-logo { width:75%; height:25%; object-fit:contain; }
.product-label-back > strong { font-size:12cqh; line-height:1.02; color:#111827; }
.product-label-back > span { position:relative; z-index:2; font-size:7cqh; font-weight:850; }
.product-label-back > strong,.product-label-back > .back-logo { position:relative; z-index:2; }
.label-counter { position:absolute; z-index:25; top:2.5%; right:3%; color:#081a4a; font-size:clamp(5px,4cqh,11px); line-height:1; font-weight:950; }
.cut-mark { position:absolute; z-index:30; display:block; width:var(--cut-mark-mm,2mm); height:var(--cut-mark-mm,2mm); pointer-events:none; box-sizing:border-box; }
.cut-tl { left:0; top:0; border-left:1.5px solid #0c3485; border-top:1.5px solid #0c3485; }
.cut-tr { right:0; top:0; border-right:1.5px solid #0c3485; border-top:1.5px solid #0c3485; }
.cut-bl { left:0; bottom:0; border-left:1.5px solid #0c3485; border-bottom:1.5px solid #0c3485; }
.cut-br { right:0; bottom:0; border-right:1.5px solid #0c3485; border-bottom:1.5px solid #0c3485; }
.label-add-after-editor { display: flex; align-items: end; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: #f8faf8; }
.label-add-after-editor label { display: grid; gap: 4px; width: 145px; color: #31463d; font-size: 11px; font-weight: 800; }
.label-add-after-editor input { height: 38px; }
.label-add-after-editor > span { align-self: center; color: var(--muted); font-size: 11px; }
.product-label-logo { width: 88%; height: 19%; margin: 0 auto 2%; object-fit: contain; flex: 0 0 auto; }
.product-label-name { height: 26%; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: #111827; font-size: clamp(5px,.72vw,10px); font-weight: 900; line-height: 1.02; text-transform: uppercase; }
.product-label-details { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 1px 3px; overflow: hidden; color: #172554; font-size: clamp(3px,.38vw,6px); line-height: 1.05; }
.product-label-details span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.product-label-details b { display: block; color: #526174; font-size: .82em; }
.product-label-bottom { min-height: 24%; display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 3%; align-items: end; }
.product-label-system,.product-label-local { min-width: 0; }
.product-label-system small,.product-label-local small { display: block; font-size: clamp(3px,.38vw,6px); font-weight: 900; }
.product-label-system { grid-column: 2; text-align: center; }
.product-label-system strong { display: block; overflow: hidden; text-align: center; font-size: clamp(6px,.8vw,12px); line-height: 1; }
.product-label-local { position: absolute; left: var(--local-x); top: var(--local-y); width: var(--local-w); height: var(--local-h); display: flex; flex-direction: column; }
.product-label-local strong { flex: 1 1 auto; min-height: 0; }
.product-label.content-horizontal { display: grid; grid-template-columns: 34% 66%; grid-template-rows: 42% 30% 28%; align-items: stretch; }
.product-label.content-horizontal .product-label-logo { grid-column: 1; grid-row: 1 / 4; width: 94%; height: 100%; margin: 0; }
.product-label.content-horizontal .product-label-name { grid-column: 2; grid-row: 1; width: 100%; height: auto; }
.product-label.content-horizontal .product-label-details { grid-column: 2; grid-row: 2; width: 100%; height: auto; }
.product-label.content-horizontal .product-label-bottom { grid-column: 2; grid-row: 3; width: 100%; height: auto; }
.product-label-local strong { display: flex; align-items: center; justify-content: center; height: 1.5em; overflow: hidden; border: 1px solid #334155; border-radius: 3px; color: #111827; font-size: clamp(5px,.65vw,10px); }
#labelPrintArea { display: none; }

@media (max-width: 1100px) {
  .label-entry-card { grid-template-columns: minmax(180px,1fr) auto; }
  .label-entry-card .label-product-found,.label-entry-card .label-empty-search { grid-column:1 / -1; }
  .label-product-found { grid-template-columns: repeat(3,1fr); }
  .label-settings-grid { grid-template-columns: repeat(2,1fr); }
  .label-local-editor { grid-template-columns: repeat(2,1fr); }
  .label-local-editor > strong,.label-local-editor > span { grid-column: 1 / -1; }
  .label-single-editor { grid-template-columns: 1fr; }
  .label-surface-panel { width:min(100%,520px); justify-self:center; }
  .labels-workspace { flex-direction: column; }
  .labels-list-card,.labels-preview-card { width: 100%; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { width: 210mm !important; height: 297mm !important; margin: 0 !important; padding: 0 !important; background: white !important; }
  body.printing-labels #loginScreen, body.printing-labels .sidebar, body.printing-labels .topbar { display:none !important; }
  body.printing-labels #appShell, body.printing-labels .workspace, body.printing-labels #content { display:block !important; width:210mm !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; }
  body.printing-labels #content > :not(#labelPrintArea) { display:none !important; }
  body.printing-labels #labelPrintArea { display:block !important; position:relative; width:210mm; margin:0; padding:0; }
  .label-print-page { position: relative; box-sizing: border-box; width: 210mm; height: 297mm; margin: 0; padding: 0; overflow: hidden; break-after: page; page-break-after: always; }
  .label-print-page:last-child { break-after: auto; page-break-after: auto; }
  .label-print-page.skip-label-print { display:none !important; }
  body.printing-labels.printer-brother-ql700,
  body.printing-labels.printer-brother-ql700 #appShell,
  body.printing-labels.printer-brother-ql700 .workspace,
  body.printing-labels.printer-brother-ql700 #content,
  body.printing-labels.printer-brother-ql700 #labelPrintArea { width:auto !important; height:auto !important; min-height:0 !important; }
  body.printing-labels.printer-brother-ql700 .brother-label-page { margin:0 !important; padding:0 !important; overflow:hidden !important; }
  body.printing-labels.printer-brother-ql700 .brother-label-page .placed-label { left:0 !important; top:0 !important; width:100% !important; height:100% !important; }
  body.printing-labels.printer-brother-ql700 .brother-label-page .cut-mark { display:none !important; }
  .label-print-page .product-label { width:100%; height:100%; padding:2.5%; background-size:var(--cut-mark-mm,2mm) .2mm,.2mm var(--cut-mark-mm,2mm),var(--cut-mark-mm,2mm) .2mm,.2mm var(--cut-mark-mm,2mm),var(--cut-mark-mm,2mm) .2mm,.2mm var(--cut-mark-mm,2mm),var(--cut-mark-mm,2mm) .2mm,.2mm var(--cut-mark-mm,2mm); }
  .label-print-page,.label-print-page * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .label-print-page .cut-mark { z-index:999 !important; width:var(--cut-mark-mm,2mm) !important; height:var(--cut-mark-mm,2mm) !important; }
  .label-print-page .cut-tl { left:.25mm !important; top:.25mm !important; border-left:.35mm solid #000 !important; border-top:.35mm solid #000 !important; }
  .label-print-page .cut-tr { right:.25mm !important; top:.25mm !important; border-right:.35mm solid #000 !important; border-top:.35mm solid #000 !important; }
  .label-print-page .cut-bl { left:.25mm !important; bottom:.25mm !important; border-left:.35mm solid #000 !important; border-bottom:.35mm solid #000 !important; }
  .label-print-page .cut-br { right:.25mm !important; bottom:.25mm !important; border-right:.35mm solid #000 !important; border-bottom:.35mm solid #000 !important; }
}

[hidden] {
  display: none !important;
}

.login-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 32px clamp(22px, 7vw, 92px);
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(12, 15, 13, 0.86), rgba(12, 15, 13, 0.28) 48%, rgba(12, 15, 13, 0.78)),
    url("assets/login-background.png");
  background-position: center, center;
  background-size: cover, 100% 100%;
  background-repeat: no-repeat;
  background-color: #14120f;
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.24)),
    radial-gradient(circle at 77% 45%, rgba(197, 138, 34, 0.16), rgba(0, 0, 0, 0) 30%);
  pointer-events: none;
}

.login-screen::after {
  content: "QUILUMBA";
  position: absolute;
  left: clamp(24px, 6vw, 88px);
  bottom: clamp(28px, 8vh, 80px);
  color: rgba(255, 255, 255, 0.08);
  font-size: clamp(44px, 8vw, 118px);
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
}

.login-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(236, 225, 201, 0.36);
  border-radius: 8px;
  background: rgba(252, 250, 244, 0.86);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--amber), var(--green));
}

.login-brand-shell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(24, 60, 52, 0.14);
}

.login-brand-shell span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.login-mark {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  filter: drop-shadow(0 10px 18px rgba(24, 60, 52, 0.18));
}

.login-signal-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.login-signal-row span,
.login-signal-row strong,
.login-demo-row span,
.login-demo-row strong {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(24, 60, 52, 0.12);
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-lockup.small {
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-lockup.small span {
  display: block;
  margin-top: 2px;
  color: #b6c7bf;
  font-size: 12px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.1;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 16px;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.login-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
}

.login-message {
  min-height: 24px;
  margin: 0;
  border: 1px solid rgba(24, 60, 52, 0.12);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.login-message:empty {
  display: none;
}

.login-message.error {
  color: var(--red);
}

.login-demo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.branch-summary {
  border: 1px solid #c7d8cf;
  border-radius: 6px;
  padding: 10px 12px;
  background: #edf4ef;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.notice {
  margin-bottom: 14px;
  border: 1px solid #c7d8cf;
  border-radius: 6px;
  padding: 10px 12px;
  background: #edf4ef;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.notice.warn {
  border-color: #ead3a5;
  background: #fff2d6;
  color: #875a05;
}

label {
  display: grid;
  gap: 7px;
  color: #273530;
  font-size: 13px;
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  background: #fff;
  color: var(--ink);
}

.primary-button,
.secondary-button,
.ghost-button,
.table-button {
  border-radius: 6px;
  border: 1px solid transparent;
  min-height: 38px;
  padding: 8px 12px;
  font-weight: 700;
}

.primary-button {
  background: var(--green-dark);
  color: #fff;
}

.secondary-button {
  background: #fff;
  border-color: var(--line);
  color: var(--green-dark);
}

.ghost-button {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.table-button {
  min-height: 30px;
  padding: 5px 9px;
  background: #edf4ef;
  border-color: #c7d8cf;
  color: var(--green-dark);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  transition: grid-template-columns 180ms ease;
}

.app-shell:has(.sidebar:hover),
.app-shell:has(.sidebar:focus-within) {
  grid-template-columns: 236px minmax(0, 1fr);
}

.sidebar {
  background: var(--green-dark);
  color: #fff;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.sidebar .brand-mark {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.sidebar .brand-lockup.small > div,
.nav-label {
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 140ms ease, width 140ms ease;
}

.app-shell:has(.sidebar:hover) .sidebar .brand-lockup.small > div,
.app-shell:has(.sidebar:focus-within) .sidebar .brand-lockup.small > div,
.app-shell:has(.sidebar:hover) .nav-label,
.app-shell:has(.sidebar:focus-within) .nav-label {
  width: auto;
  opacity: 1;
}

.nav-list {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.nav-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  padding: 8px;
  text-align: left;
  color: #dbe7e1;
  background: transparent;
  font-weight: 700;
}

.app-shell:has(.sidebar:hover) .nav-item,
.app-shell:has(.sidebar:focus-within) .nav-item {
  justify-content: flex-start;
  padding: 10px 12px;
}

.nav-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.provider-filter-bar {
  align-items: flex-start;
  position: relative;
  flex-wrap: wrap;
  min-height: 42px;
}

.provider-filter-bar .secondary-button,
.provider-filter-bar .pill {
  align-self: flex-start;
  height: auto;
  min-height: 36px;
}

.provider-filter-bar .inline-filter {
  align-items: flex-start;
}

.provider-filter-bar select[multiple] {
  width: 250px;
  max-height: 128px;
}

.provider-brand-picker {
  position: relative;
  width: 270px;
  flex: 0 0 270px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.provider-supplier-picker {
  width: 300px;
  flex-basis: 300px;
}

.provider-brand-picker summary {
  cursor: pointer;
  min-height: 36px;
  padding: 7px 10px;
  font-weight: 700;
}

.provider-brand-picker[open] { z-index: 30; }

.provider-brand-picker[open] .provider-brand-search,
.provider-brand-picker[open] .provider-brand-checks,
.provider-brand-picker[open] .provider-brand-actions {
  position: absolute;
  left: -1px;
  width: 420px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 55, 43, 0.14);
}

.provider-brand-picker[open] .provider-brand-search { top: 36px; }
.provider-brand-picker[open] .provider-brand-checks { top: 87px; }
.provider-brand-picker[open] .provider-brand-actions { top: 298px; }

.provider-brand-checks {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  max-height: 210px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line);
  overflow: auto;
}

.provider-brand-search {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: #f7faf8;
}

.provider-brand-search input {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.provider-brand-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  background: #f7faf8;
}

.provider-brand-actions span {
  color: var(--muted);
  font-size: 12px;
}

.provider-brand-actions .primary-button {
  min-height: 34px;
  padding: 7px 16px;
}

.compact-provider-setting input {
  width: 82px;
}

.workspace {
  min-width: 0;
  max-width: 100%;
}

.topbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.switch {
  display: inline-flex;
  align-items: center;
  grid-template-columns: none;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.switch input {
  width: 18px;
  min-height: 18px;
}

.status-pill,
.pill,
.user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  background: #e8f3ed;
  color: var(--green-dark);
  white-space: nowrap;
}

.user-pill {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  flex: 1 1 180px;
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill.offline,
.pill.warn {
  background: #fff2d6;
  color: #875a05;
}

.pill.danger {
  background: #f9e4df;
  color: var(--red);
}

.pill.blue {
  background: #e8eef8;
  color: var(--blue);
}

.content {
  padding: 20px 22px 34px;
  min-width: 0;
  max-width: 100%;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.metrics {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.grid.two {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
}

.full-width-stack {
  grid-template-columns: 1fr;
}

.panel,
.product-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 4px 14px rgba(22, 33, 29, 0.04);
  min-width: 0;
  max-width: 100%;
}

.panel {
  padding: 16px;
}

.metric {
  min-height: 104px;
  padding: 16px;
}

.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-head,
.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.metric small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.info-button,
.info-close {
  width: 30px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.info-button.mini {
  width: 24px;
  min-height: 24px;
  font-size: 12px;
  padding: 0;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 33, 29, 0.22);
}

.info-dialog {
  width: min(430px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.info-dialog p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 150px 220px auto auto auto auto;
  gap: 10px;
  margin-bottom: 14px;
}

.toolbar-hint {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.table-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.table-summary strong {
  color: var(--green-dark);
  font-size: 20px;
}

.connected-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 12px;
  margin-bottom: 14px;
}

.connected-panel strong {
  font-size: 13px;
}

.connected-panel .source-note {
  margin-top: 8px;
}

.table-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.product-table-scroll {
  max-height: 62vh;
}

.inventory-scroll {
  max-height: 68vh;
}

.dashboard-scroll {
  max-height: 420px;
}

.queue-scroll {
  max-height: 320px;
}

.order-scroll {
  max-height: 58vh;
}

.group-scroll {
  max-height: 360px;
  margin-top: 10px;
}

.product-table-scroll .data-table {
  min-width: 1280px;
}

.inventory-scroll .data-table,
.order-table {
  min-width: 1500px;
}

.compact-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.compact-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.policy-table {
  min-width: 1220px;
}

.mini-input {
  width: 76px;
  min-height: 32px;
  padding: 5px 7px;
  font-size: 13px;
}

.policy-editor {
  display: grid;
  grid-template-columns: 28px 64px 28px auto;
  align-items: center;
  gap: 6px;
  min-width: 170px;
}

.local-stock-branch {
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid #d9e4de;
  border-radius: 8px;
  background: #fff;
}

.local-stock-branch > strong {
  color: var(--green-dark);
  font-size: 12px;
}

.policy-editor .policy-pill {
  grid-column: 1 / -1;
}

.policy-input {
  width: 72px;
}

.policy-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.policy-pill.manual {
  background: #e8eefb;
  color: #2f5f9f;
}

.policy-pill.auto {
  background: #edf4ef;
  color: var(--green-dark);
}

.policy-pill.new {
  background: #fff8e8;
  color: #875a05;
}

.policy-row-manual td {
  background: #f5f7fd;
}

.policy-row-auto td {
  background: #f7faf7;
}

.policy-row-new td {
  background: #fffbf0;
}

.selected-row td {
  background: #edf4ef;
}

.total-row td {
  background: #f7f9f6;
  font-weight: 800;
}

.grouped-stock-table,
.search-stock-table {
  min-width: 1420px;
}

.grouped-stock-table th,
.grouped-stock-table td {
  vertical-align: middle;
  padding-top: 7px;
  padding-bottom: 7px;
}

.grouped-stock-table th:nth-child(1) { width: 210px; }
.grouped-stock-table th:nth-child(2) { width: 105px; }
.grouped-stock-table th:nth-child(3) { width: 185px; }
.grouped-stock-table th:nth-child(4) { width: 250px; }
.grouped-stock-table th:nth-child(5) { width: 125px; }
.grouped-stock-table th:nth-child(6) { width: 320px; }
.grouped-stock-table th:nth-child(7) { width: 90px; }
.grouped-stock-table th:nth-child(8) { width: 120px; }
.grouped-stock-table th:nth-child(9) { width: 175px; }

.inventory-family-start td {
  border-top: 8px solid #f1f5f2;
}

.warehouse-linked-row td {
  background: #fff;
}

.warehouse-linked-row:hover td {
  background: #f7faf7 !important;
}

.unlinked-local-row td {
  background: #fff;
}

.stock-row-zero td {
  color: #7a514b;
}

.inventory-local-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.inventory-row-flags,
.inventory-motor-chips,
.inventory-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.inventory-motor-chips {
  min-width: 285px;
  gap: 4px;
}

.inventory-motor-chips .motor-chip {
  padding: 2px 6px;
  font-size: 10px;
}

.inventory-row-actions {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.association-badge,
.system-code-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.association-badge.master {
  background: #f6d9d4;
  color: #9c3022;
}

.association-badge.linked {
  background: #e6f2e9;
  color: var(--green-dark);
}

.association-badge.unlinked {
  background: #f2f3f2;
  color: #67706b;
}

.system-code-pill {
  background: #e9f3ec;
  color: var(--green-dark);
}

.local-description-note {
  display: block;
  margin-top: 4px;
  color: #b54838;
  font-size: 10px;
  font-weight: 800;
}

.local-product-code {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.linked-family-row td:first-child {
  border-left: 3px solid #2a8b5a;
}

.inventory-family-start.linked-family-row td:first-child {
  border-top-left-radius: 7px;
}

.inventory-family-end.linked-family-row td:first-child {
  border-bottom-left-radius: 7px;
}

.warehouse-master-stock {
  background: inherit !important;
  box-shadow: none;
}

.inventory-stock-value {
  color: #08723f;
  font-size: 16px;
  white-space: nowrap;
}

.inventory-stock-value small {
  font-size: 11px;
}

.inventory-stock-value.zero {
  color: var(--red);
}

.compact-order-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.order-search-toolbar {
  position: sticky;
  top: 74px;
  z-index: 8;
  grid-template-columns: minmax(320px, 1fr) auto auto;
  margin: 8px 0 10px;
  padding: 8px;
  background: #f7faf7;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.search-toolbar {
  position: sticky;
  top: 74px;
  z-index: 8;
  background: #f7faf7;
}

.provider-filter-bar {
  position: sticky;
  top: 74px;
  z-index: 8;
  background: #fff;
  padding-block: 6px;
}

.compact-order-actions .primary-button,
.compact-order-actions .secondary-button {
  min-height: 36px;
  padding: 7px 12px;
}

.grouped-stock-table tbody tr {
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.grouped-stock-table tbody tr:hover td {
  background: #f5faf6;
}

.group-zero td {
  background: #fff1ed;
}

.group-zero:hover td {
  background: #ffe8e2;
}

.stock-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 30px;
  border: 1px solid #bdd5c7;
  border-radius: 6px;
  background: #edf4ef;
  color: var(--green-dark);
  font-weight: 900;
}

.stock-number.zero {
  border-color: #efb8ad;
  background: #fce2dd;
  color: var(--red);
}

.grouped-badges {
  min-width: 300px;
}

.local-stock-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(315px, 1fr));
  gap: 5px;
  min-width: 650px;
}

.local-stock-line {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) 44px 82px minmax(64px, auto);
  align-items: center;
  gap: 7px;
  border: 1px solid #c7d8cf;
  border-radius: 6px;
  padding: 5px 7px;
  background: #f7faf7;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
}

.local-stock-line strong {
  justify-self: center;
  font-size: 13px;
}

.local-stock-line em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.local-stock-line small {
  justify-self: end;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.local-stock-line.warehouse {
  border-color: #b8d0c4;
  background: #edf4ef;
}

.local-stock-line.low {
  border-color: #ead3a5;
  background: #fff8e8;
  color: #875a05;
}

.local-stock-line.zero {
  border-color: #efb8ad;
  background: #fff1ed;
  color: var(--red);
}

.mini-link {
  min-height: 24px;
  border: 1px solid #c7d8cf;
  border-radius: 999px;
  padding: 2px 7px;
  background: #fff;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.local-motor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.motor-audit {
  display: grid;
  gap: 5px;
  min-width: 190px;
}

.motor-local-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
}

.motor-local-line span {
  min-width: 52px;
  color: var(--muted);
  font-weight: 800;
}

.motor-local-line em,
.motor-local-line b {
  border-radius: 999px;
  padding: 2px 6px;
  font-style: normal;
  font-weight: 900;
}

.motor-local-line em {
  background: #e8f2ed;
  color: var(--green-dark);
}

.motor-local-line b {
  background: #fce2dd;
  color: var(--red);
}

.motor-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
}

.motor-chip.ok {
  background: #e8f2ed;
  color: var(--green-dark);
}

.motor-chip.review {
  background: #fff8e8;
  color: #875a05;
}

.motor-chip.missing {
  background: #fce2dd;
  color: var(--red);
}

.replenishment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.replenishment-grid .panel:last-child {
  grid-column: 1 / -1;
}

.match-good td {
  background: #edf4ef;
}

.match-review td {
  background: #fff8e8;
}

.order-table input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
}

.muted-text {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.stock-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 180px;
}

.stock-badge {
  display: inline-flex;
  border: 1px solid #c7d8cf;
  border-radius: 999px;
  padding: 3px 7px;
  background: #edf4ef;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.stock-badge.low {
  border-color: #ead3a5;
  background: #fff2d6;
  color: #875a05;
}

.stock-badge.zero {
  border-color: #efb8ad;
  background: #fce2dd;
  color: var(--red);
}

.tab-panel {
  padding: 10px;
}

.order-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.home-module {
  margin-top: 16px;
}

.home-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.home-tab {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.home-tab.active {
  border-color: #c7d8cf;
  background: #edf4ef;
}

.home-tab span {
  font-weight: 800;
}

.home-tab strong {
  font-size: 20px;
}

.home-order-table {
  min-width: 1180px;
}

.tab-button {
  flex: 0 0 210px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.tab-button.active {
  border-color: #c7d8cf;
  background: #edf4ef;
}

.tab-button span,
.tab-button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-button span {
  font-weight: 800;
}

.tab-button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.product-list {
  display: grid;
  gap: 10px;
}

.product-detail-panel {
  background: linear-gradient(180deg, #ffffff, #fbfcfa);
}

.product-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.product-detail-hero h3 {
  margin-top: 8px;
  font-size: 20px;
}

.product-detail-hero p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 14px;
}

.decision-grid .detail-cell {
  background: #f7f9f6;
}

.inline-filter {
  width: min(260px, 100%);
}

.inline-filter select {
  min-height: 36px;
}

.product-card {
  padding: 14px;
}

.product-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.product-title {
  display: grid;
  gap: 5px;
}

.product-title strong {
  font-size: 17px;
}

.meta-row,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #f2f4f1;
  color: #3e4a45;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-cell {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}

.detail-cell span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: #52625c;
  font-size: 12px;
  text-transform: uppercase;
  background: #f7f9f6;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.admin-form button,
.check-list {
  grid-column: 1 / -1;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  background: #fbfcfa;
  font-size: 11px;
}

.check-row input {
  width: 16px;
  min-height: 16px;
}

.supplier-filter {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.5fr);
  gap: 12px;
  margin: 14px 0;
}

.supplier-filter .actions-row {
  grid-column: 1 / -1;
  margin-top: 0;
}

.brand-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  max-height: 132px;
  overflow: auto;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 130px;
}

.architecture-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.architecture-item {
  border-left: 4px solid var(--green);
  padding: 10px 12px;
  background: #fbfcfa;
}

.architecture-item strong {
  display: block;
  margin-bottom: 4px;
}

.empty {
  padding: 30px;
  text-align: center;
  color: var(--muted);
}

.source-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .local-stock-list {
    grid-template-columns: 1fr;
    min-width: 330px;
  }

  .provider-brand-checks {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .app-shell {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .app-shell:has(.sidebar:hover),
  .app-shell:has(.sidebar:focus-within) {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sidebar .brand-lockup.small > div,
  .nav-label {
    width: auto;
    opacity: 1;
  }

  .brand-lockup.small {
    border-bottom: 0;
  }

  .nav-list {
    display: flex;
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
  }

  .nav-item {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .grid.metrics,
  .grid.two,
  .replenishment-grid,
  .decision-grid,
  .architecture-list,
  .toolbar,
  .connected-panel,
  .form-row,
  .admin-form,
  .check-list,
  .supplier-filter,
  .brand-checks,
  .home-tabs {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .content,
  .topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .product-head {
    flex-direction: column;
  }

  .product-detail-hero {
    flex-direction: column;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: auto auto 1fr;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .user-pill {
    grid-column: 1 / 3;
    width: 100%;
    max-width: 100%;
  }

  #logoutButton {
    grid-column: 3;
    justify-self: end;
  }
}
 .inventory-source-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
 .inventory-source-grid article { padding:16px; border:1px solid #d5e3dd; border-radius:8px; background:#f6faf8; }
 .inventory-pagination { display:flex; align-items:center; justify-content:center; gap:18px; padding:16px; }