:root {
  color-scheme: light;
  --ink: #183137;
  --muted: #667b7f;
  --nav: #edf4f3;
  --surface: #fff;
  --canvas: #f5f8f7;
  --line: #dce7e5;
  --accent: #108b87;
  --accent-dark: #08716f;
  --brand-dark: #0b293a;
  --accent-soft: #e2f4f2;
  --danger: #a33b3b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #eaf4f3 0%, #f5f8f7 60%); }
.login-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: 0 20px 50px #24234412; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.brand-logo-wrap { position: relative; width: 150px; height: 48px; display: block; flex: 0 0 auto; overflow: hidden; border-radius: 9px; background: white; }
.brand-logo { position: absolute; left: 0; top: -47px; display: block; width: 150px; height: 150px; object-fit: contain; }
.brand h1 { font-size: 1.25rem; margin: 0; }
.brand p { color: var(--muted); margin: 3px 0 0; font-size: .88rem; }
.field { display: grid; gap: 7px; margin: 15px 0; }
label { font-size: .88rem; font-weight: 650; }
input, select { min-height: 44px; border: 1px solid #c7d8d6; border-radius: 10px; padding: 9px 12px; color: var(--ink); background: white; }
input:focus, select:focus, button:focus-visible { outline: 3px solid #108b8744; outline-offset: 2px; }
.btn { border: 0; border-radius: 10px; min-height: 44px; padding: 10px 15px; font-weight: 700; color: white; background: var(--accent-dark); }
.btn:hover { background: #075b5a; }
.btn.secondary { color: var(--accent-dark); background: var(--accent-soft); }
.btn.ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.btn.danger { background: var(--danger); }
.btn.small { min-height: 36px; padding: 7px 11px; font-size: .88rem; }
.message { margin: 12px 0; padding: 11px 13px; border-radius: 10px; background: var(--accent-soft); color: #145f5c; }
.message.error { background: #fff0ef; color: #8f2e2e; }
.topbar { min-height: 68px; color: #f6fbfa; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 24px; background: var(--brand-dark); }
.topbar .brand { margin: 0; }
.topbar .brand p, .topbar .brand h1 { color: #f6fbfa; }
.topbar .btn.ghost { color: white; border-color: #ffffff66; }
.user-chip { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.sidebar { align-self: start; position: sticky; top: 0; height: calc(100vh - 68px); overflow-y: auto; padding: 20px 13px; background: var(--nav); border-right: 1px solid var(--line); }
.sidebar-nav { display: grid; gap: 18px; }
.nav-section { min-width: 0; }
.nav-section-title { margin: 0 10px 7px; color: #70878a; font-size: .68rem; line-height: 1.3; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-section-links { display: grid; gap: 3px; }
.nav-button { display: block; width: 100%; min-height: 42px; text-align: left; border: 0; border-radius: 9px; padding: 10px 12px; color: #40595d; background: transparent; font-size: .91rem; font-weight: 650; }
.nav-button:hover { color: var(--accent-dark); background: #ffffffa8; }
.nav-button.active { color: #075f5d; background: white; box-shadow: inset 3px 0 0 var(--accent), 0 2px 7px #123c3a0c; font-weight: 750; }
.content { min-width: 0; max-width: 1240px; width: 100%; padding: 30px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-heading h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.eyebrow { color: var(--accent-dark); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.muted { color: var(--muted); }
.card { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 20px; margin-bottom: 18px; box-shadow: 0 6px 18px #24234408; }
.card h3 { margin: 0 0 14px; font-size: 1.05rem; }
.table-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.table-heading h3 { margin: 0; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.stat strong { display: block; font-size: 1.55rem; margin-top: 4px; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { border-bottom: 1px solid var(--line); padding: 11px 9px; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.negative { color: var(--danger); font-weight: 800; }
.camera { overflow: hidden; border-radius: 14px; background: #101024; min-height: 220px; display: grid; place-items: center; }
.camera video, .camera img { width: 100%; max-height: 430px; object-fit: contain; display: block; }
.camera-placeholder { color: #e6e5f1; padding: 35px; text-align: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.count-row, .allocation-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line); }
.count-row > *, .allocation-card > *, .field, .searchable-field { min-width: 0; }
.count-row label { display: block; min-height: 2.4em; overflow-wrap: anywhere; line-height: 1.2; }
.count-row input { width: 100%; min-width: 0; }
.allocation-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; margin: 10px 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
.allocation-products { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; align-items: start; }
.allocation-product-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fdfdff; }
.allocation-product-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.allocation-lot-field { grid-column: 1 / -1; width: 100%; margin: 0; }
.allocation-availability { display: block; min-height: 1.3em; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.allocation-product-row > .btn { grid-column: 1 / -1; justify-self: start; }
.allocation-product-picker { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.allocation-empty { grid-column: 1 / -1; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.status-pill { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: .75rem; font-weight: 800; color: #145f5c; background: var(--accent-soft); }
.status-pill.warn { color: #875d16; background: #fff5d9; }
.status-pill.soon { color: #8a4a00; background: #fff0dc; }
.block { display: block; margin-top: 4px; }
.product-ai-summary { margin: -4px 0 14px; }
.product-ai-table { min-width: 850px; }
.product-ai-table .check-field { display: inline-flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; }
.product-ai-table input[type="checkbox"] { min-height: 18px; width: 18px; margin: 0; accent-color: var(--accent); }
.empty { padding: 25px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 12px; }
.dashboard-filters { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.dashboard-filters .field { min-width: 180px; margin: 0; }
.dashboard-range-tools { display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 8px; }
.dashboard-range-tools > span { margin-right: 4px; font-size: .86rem; }
.dashboard-period-summary { margin: 14px 0 0; color: var(--muted); font-size: .88rem; }
.dashboard-period-summary strong { color: var(--ink); font-weight: 650; }
.dashboard-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dashboard-charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dashboard-charts-grid > .card { min-width: 0; margin-bottom: 0; }
.dashboard-trend-card { grid-column: 1 / -1; }
.dashboard-columns > .card { min-width: 0; }
.dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.metric-bars { display: grid; gap: 14px; }
.metric-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 1.25fr) auto; align-items: center; gap: 10px; font-size: .88rem; }
.metric-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-bar-filter { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--accent-dark); font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dashboard-bar-filter:hover { text-decoration: underline; }
.metric-bar-track { height: 11px; overflow: hidden; border-radius: 99px; background: #e5eeed; }
.metric-bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0b293a, #108b87); }
.metric-bar-row strong { min-width: 90px; text-align: right; font-size: .82rem; }
.chart-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.dashboard-svg { display: block; width: 100%; min-width: 700px; height: auto; }
.movement-svg { min-width: 760px; }
.chart-gridline { stroke: #e2eae9; stroke-width: 1; }
.chart-zero-line { stroke: #9b9aab; stroke-width: 1.5; }
.chart-axis-label { fill: var(--muted); font: 12px Inter, ui-sans-serif, system-ui, sans-serif; }
.chart-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { stroke: white; stroke-width: 2; cursor: help; }
.movement-bar { opacity: .88; }
.movement-bar:hover { opacity: 1; }
.movement-received { fill: #368b69; }
.movement-dispatched { fill: #0b5364; }
.movement-adjusted { fill: #d28a2c; }
.chart-legend i.movement-received { background: #368b69; }
.chart-legend i.movement-dispatched { background: #0b5364; }
.chart-legend i.movement-adjusted { background: #d28a2c; }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; color: var(--muted); font-size: .82rem; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend > span > i, .chart-legend-toggle > i, .donut-legend-item > i { display: inline-block; width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; }
.chart-legend-toggle { display: inline-flex; min-width: 0; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font: inherit; cursor: pointer; }
.chart-legend-toggle.is-hidden { color: var(--muted); opacity: .58; text-decoration: line-through; }
.series-color-0 { color: #0b293a; }
.series-color-1 { color: #368b69; }
.series-color-2 { color: #d28a2c; }
.series-color-3 { color: #2484a6; }
.series-color-4 { color: #bd5b68; }
.series-color-5 { color: #9a6a98; }
.series-color-6 { color: #6d8791; }
.series-color-7 { color: #9a7440; }
.chart-line.series-color-0 { stroke: #0b293a; }
.chart-line.series-color-1 { stroke: #368b69; }
.chart-line.series-color-2 { stroke: #d28a2c; }
.chart-line.series-color-3 { stroke: #2484a6; }
.chart-line.series-color-4 { stroke: #bd5b68; }
.chart-line.series-color-5 { stroke: #9a6a98; }
.chart-point.series-color-0 { fill: #0b293a; }
.chart-point.series-color-1 { fill: #368b69; }
.chart-point.series-color-2 { fill: #d28a2c; }
.chart-point.series-color-3 { fill: #2484a6; }
.chart-point.series-color-4 { fill: #bd5b68; }
.chart-point.series-color-5 { fill: #9a6a98; }
.donut-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 8px; }
.donut-svg { display: block; width: 180px; max-width: 100%; height: auto; overflow: visible; }
.donut-track, .donut-segment { fill: none; }
.donut-track { stroke: #e5eeed; stroke-width: 26; }
.donut-segment { stroke-width: 26; transition: opacity .15s ease; }
.donut-segment.series-color-0 { stroke: #0b293a; }
.donut-segment.series-color-1 { stroke: #368b69; }
.donut-segment.series-color-2 { stroke: #d28a2c; }
.donut-segment.series-color-3 { stroke: #2484a6; }
.donut-segment.series-color-4 { stroke: #bd5b68; }
.donut-segment.series-color-5 { stroke: #9a6a98; }
.donut-total { fill: var(--ink); font-size: 17px; font-weight: 800; }
.donut-caption { fill: var(--muted); font-size: 10px; }
.donut-legend { display: grid; gap: 6px; min-width: 0; }
.donut-legend-item { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 5px 4px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.donut-legend-item:hover:not(.is-static) { background: #eef6f5; }
.donut-legend-item > span { display: grid; min-width: 0; gap: 2px; overflow-wrap: anywhere; font-size: .85rem; }
.donut-legend-item small { color: var(--muted); font-size: .75rem; }
.donut-legend-item > i.series-color-0, .chart-legend-toggle > i.series-color-0 { background: #0b293a; }
.donut-legend-item > i.series-color-1, .chart-legend-toggle > i.series-color-1 { background: #368b69; }
.donut-legend-item > i.series-color-2, .chart-legend-toggle > i.series-color-2 { background: #d28a2c; }
.donut-legend-item > i.series-color-3, .chart-legend-toggle > i.series-color-3 { background: #2484a6; }
.donut-legend-item > i.series-color-4, .chart-legend-toggle > i.series-color-4 { background: #bd5b68; }
.donut-legend-item > i.series-color-5, .chart-legend-toggle > i.series-color-5 { background: #9a6a98; }
.donut-legend-item > i.series-color-6, .chart-legend-toggle > i.series-color-6 { background: #6d8791; }
.donut-legend-item > i.series-color-7, .chart-legend-toggle > i.series-color-7 { background: #9a7440; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sales-map-canvas { position: relative; width: 100%; height: min(58vh, 500px); min-height: 350px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #e4ecef; cursor: grab; touch-action: none; }
.sales-map-canvas.dragging { cursor: grabbing; }
.sales-map-svg { display: block; width: 100%; height: 100%; }
.map-tile { pointer-events: none; }
.map-point { fill: #108b87; fill-opacity: .9; stroke: white; stroke-width: 3; cursor: pointer; filter: drop-shadow(0 2px 4px #0b293a66); }
.map-point:hover, .map-point:focus-visible { fill: #e06a38; fill-opacity: 1; stroke-width: 4; outline: none; }
.map-no-points, .map-loading { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(320px, 86%); padding: 12px 15px; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 10px; background: #ffffffec; color: var(--muted); text-align: center; pointer-events: none; }
.map-attribution { display: flex; justify-content: flex-end; margin-top: 6px; font-size: .75rem; }
.map-attribution a { color: var(--muted); }
.map-caption { margin: 8px 0 0; font-size: .86rem; }
.customer-picker { position: relative; }
.search-select { position: relative; min-width: 0; }
.search-select > input[role="combobox"] { width: 100%; min-width: 0; }
.search-select-options { position: absolute; z-index: 8; top: calc(100% - 1px); left: 0; right: 0; max-height: 290px; overflow: auto; border: 1px solid #c7d8d6; border-radius: 0 0 10px 10px; background: white; box-shadow: 0 12px 25px #1831371f; }
.search-select-option { display: grid; width: 100%; gap: 3px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.search-select-option:hover, .search-select-option:focus { background: #eaf5f4; }
.search-select-option small, .search-select-empty { color: var(--muted); }
.search-select-empty { padding: 12px; font-size: .88rem; }
.customer-options { position: absolute; z-index: 5; top: calc(100% - 1px); left: 0; right: 0; max-height: 260px; overflow: auto; border: 1px solid #c7d8d6; border-radius: 0 0 10px 10px; background: white; box-shadow: 0 12px 25px #1831371f; }
.customer-option { display: grid; width: 100%; gap: 3px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.customer-option:hover, .customer-option:focus { background: #eaf5f4; }
.customer-option small { color: var(--muted); }
.customer-no-results { padding: 12px; color: var(--muted); font-size: .88rem; }
.quick-customer summary { color: var(--accent-dark); font-weight: 700; cursor: pointer; }
.quick-customer input { flex: 1 1 180px; }
.customer-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.customer-form-grid .field { min-width: 0; }
.customer-form-actions { grid-column: 1 / -1; }
.check-field { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.check-field input { width: 18px; height: 18px; min-height: auto; padding: 0; margin: 0; accent-color: var(--accent-dark); }
.field-label { display: block; margin-bottom: 8px; font-size: .88rem; font-weight: 650; }
.role-checkboxes { display: flex; flex-wrap: wrap; gap: 14px; }
.user-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.user-card { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.user-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.user-card-heading > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.user-card-heading span:not(.status-pill) { color: var(--muted); font-size: .84rem; }
.user-card .field { margin: 5px 0; }
.receipt-primary { border-top: 4px solid var(--accent); }
.receipt-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.receipt-heading h3 { margin: 5px 0; font-size: 1.25rem; }
.receipt-heading p { margin: 0; }
.receipt-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(100px, .55fr) minmax(150px, .8fr) minmax(150px, .9fr) auto; gap: 12px; align-items: end; margin-top: 16px; }
.receipt-form .field { margin: 0; min-width: 0; }
.receipt-form .btn { white-space: nowrap; }
.receipt-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 13px; }
.receipt-stock { min-height: 1.25em; margin: 12px 0 0; font-size: .88rem; }
.profile-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.profile-fields > div { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fcfefd; overflow-wrap: anywhere; }
.profile-fields strong { line-height: 1.45; }
.dispatch-detail { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfa; }
.dispatch-detail-heading, .remittance-detail-heading, .query-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dispatch-detail-heading h3 { margin: 0; }
.dispatch-detail-heading p { margin: 4px 0 0; }
.remittance-detail { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.remittance-detail-heading > div { display: grid; gap: 4px; }
.cancelled-row { color: var(--muted); background: #faf7f7; }
.dispatch-pagination { justify-content: space-between; margin-top: 14px; }
.table-filters { align-items: end; margin-bottom: 14px; }
.table-filters .field { min-width: 170px; margin: 0; }
.table-filters .field:first-child { flex: 1 1 260px; }
.remittance-tracking-table { min-width: 1040px; }
.remittance-tracking-table th, .remittance-tracking-table td { vertical-align: top; white-space: normal; }
.remittance-tracking-table td:first-child { min-width: 190px; }
.remittance-tracking-table td:nth-child(2) { min-width: 180px; }
.remittance-tracking-table td:nth-child(4), .remittance-tracking-table td:nth-child(5) { min-width: 245px; }
.tracking-status { display: grid; gap: 8px; min-width: 220px; }
.tracking-status .check-field { display: inline-flex; align-items: center; gap: 8px; }
.tracking-status input[type="checkbox"] { min-height: 18px; width: 18px; margin: 0; accent-color: var(--accent); }
.tracking-fields { display: grid; gap: 7px; }
.tracking-fields label { display: grid; gap: 4px; color: var(--muted); font-size: .78rem; }
.tracking-fields input { min-height: 38px; padding: 7px 9px; }
.tracking-fields .btn { justify-self: start; }
.query-toolbar { align-items: end; margin-bottom: 16px; }
.query-toolbar .field { min-width: min(330px, 100%); margin: 0; }
.query-columns { margin: 4px 0 20px; }
.query-column-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; }
.query-filters { margin-bottom: 14px; }
.query-actions { flex-wrap: wrap; }
.query-actions > input { min-width: min(290px, 100%); flex: 1 1 220px; }
.timeline-chart { display: grid; gap: 12px; }
.timeline-row { display: grid; grid-template-columns: 74px repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; }
.timeline-row > strong { font-size: .82rem; }
.timeline-series { display: flex; align-items: center; min-width: 0; gap: 7px; }
.timeline-bar { display: block; height: 12px; min-width: 2px; border-radius: 99px; }
.timeline-bar.received, .timeline-legend i.received { background: #368b69; }
.timeline-bar.dispatched, .timeline-legend i.dispatched { background: #5550a6; }
.timeline-bar.adjusted, .timeline-legend i.adjusted { background: #d28a2c; }
.timeline-value { min-width: 38px; color: var(--muted); font-size: .78rem; }
.timeline-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; color: var(--muted); font-size: .82rem; }
.timeline-legend span { display: flex; align-items: center; gap: 6px; }
.timeline-legend i { width: 10px; height: 10px; border-radius: 50%; }
.filter-actions { align-self: end; }
button:disabled { cursor: not-allowed; opacity: .58; }
@media (max-width: 760px) {
  .topbar { padding: 10px 15px; }
  .topbar .brand { gap: 8px; }
  .topbar .brand-logo-wrap { width: 110px; height: 36px; }
  .topbar .brand-logo { width: 110px; height: 110px; top: -34px; }
  .topbar .brand h1 { font-size: 1.05rem; }
  .topbar .user-chip span { display: none; }
  .layout { display: block; }
  .sidebar { display: block; height: auto; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 7px 9px; position: sticky; top: 0; z-index: 2; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-nav { display: flex; width: max-content; min-width: 100%; align-items: center; gap: 5px; }
  .nav-section { display: flex; align-items: center; gap: 4px; }
  .nav-section-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .nav-section-links { display: flex; align-items: center; gap: 3px; }
  .nav-button { min-height: 40px; white-space: nowrap; width: auto; padding: 9px 11px; font-size: .85rem; }
  .content { padding: 18px 14px 40px; }
  .count-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
  .count-row > div:first-child { grid-column: 1 / -1; }
  .count-row .field label { min-height: 0; }
  .count-row .remove-line { grid-column: 1 / -1; justify-self: start; }
  .allocation-card { grid-template-columns: 1fr; }
  .allocation-product-row { grid-template-columns: minmax(0, 1fr) 100px; }
  .allocation-product-picker select { flex: 1; min-width: 0; }
  .page-heading { display: block; }
  .page-heading .toolbar { margin-top: 13px; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-charts-grid { grid-template-columns: 1fr; }
  .dashboard-trend-card { grid-column: auto; }
  .metric-bar-row { grid-template-columns: minmax(85px, .9fr) minmax(55px, 1fr) auto; gap: 7px; }
  .metric-bar-row strong { min-width: 70px; font-size: .76rem; }
  .customer-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .receipt-form { grid-template-columns: 1fr 1fr; }
  .receipt-form .btn { grid-column: 1 / -1; }
  .profile-fields { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: 58px minmax(0, 1fr); gap: 7px 10px; }
  .timeline-row > strong { grid-row: span 3; }
  .timeline-series { min-height: 18px; }
  .timeline-series::before { width: 62px; flex: 0 0 62px; color: var(--muted); font-size: .7rem; }
  .timeline-series:nth-child(2)::before { content: 'Entradas'; }
  .timeline-series:nth-child(3)::before { content: 'Salidas'; }
  .timeline-series:nth-child(4)::before { content: 'Ajustes'; }
  .timeline-series .timeline-value { min-width: 32px; }
  .dispatch-detail { padding: 12px; }
  .remittance-detail { padding: 10px; }
  .search-select-options, .customer-options { max-height: 40vh; }
  .filter-actions { width: 100%; }
  .receipt-heading { display: block; }
  .receipt-heading .status-pill { margin-top: 12px; }
  .sales-map-canvas { height: 58vh; min-height: 320px; }
  .map-toolbar { align-items: flex-start; }
}
@media (max-width: 430px) { .customer-form-grid, .receipt-form { grid-template-columns: 1fr; } .customer-form-actions, .receipt-form .btn { grid-column: auto; } .count-row { grid-template-columns: 1fr; } .count-row > div:first-child, .count-row .remove-line { grid-column: auto; } .query-toolbar .field { min-width: 100%; } .dashboard-filters .field { min-width: 100%; } .dashboard-range-tools > span { width: 100%; } .donut-layout { grid-template-columns: 132px minmax(0, 1fr); gap: 10px; } .donut-svg { width: 132px; } .query-column-grid { grid-template-columns: 1fr; } }

.mcp-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--page, #f5f5fb); }
.mcp-auth-card { width: min(100%, 540px); padding: 28px; border: 1px solid var(--line, #deddeb); border-radius: 18px; background: var(--surface, #fff); box-shadow: 0 18px 54px rgb(29 26 82 / 10%); }
.mcp-auth-card .brand { margin-bottom: 22px; }
.mcp-auth-card .brand h1 { margin: 0 0 4px; }
.mcp-auth-card h2 { margin-top: 22px; }
.mcp-auth-card .field { margin: 18px 0; }
.mcp-auth-card .muted { margin-top: 18px; line-height: 1.5; }
.mcp-auth-error { padding: 12px 14px; border-radius: 10px; color: #902c2c; background: #fff0ee; }
.mcp-auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mcp-auth-card [hidden] { display: none !important; }
@media (max-width: 520px) { .mcp-auth-shell { padding: 12px; } .mcp-auth-card { padding: 20px; } }

#connection-banner { position: sticky; top: 0; z-index: 50; padding: 9px 16px; text-align: center; font-size: .88rem; font-weight: 700; color: #5c3b00; background: #ffe8a8; }
#connection-banner[hidden] { display: none; }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.task-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f7f7fb; }
.task-list li.warn { border-color: #e6c36a; background: #fff8e3; }
.audit-filters { margin-bottom: 14px; }
.audit-filters input { flex: 1 1 260px; }
.audit-details { min-width: 180px; max-width: 320px; }
.audit-details summary { color: var(--accent-dark); font-weight: 700; cursor: pointer; }
.audit-details pre { max-width: 300px; max-height: 180px; overflow: auto; padding: 8px; border-radius: 8px; background: #f2f7f6; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .74rem; }
@media (max-width: 520px) { .task-list li { flex-direction: column; align-items: flex-start; } }

.message.success { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #8fd1a4; border-left: 6px solid #1f9d55; color: #14532d; background: #e6f6ec; font-size: 1rem; animation: success-in .35s ease-out; }
.message.success strong { display: block; font-size: 1.1rem; }
.success-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: #1f9d55; font-size: 1.4rem; font-weight: 800; }
.message.success.out { border-color: #e6c36a; border-left-color: #d98a00; color: #5c3b00; background: #fff6df; }
.message.success.out .success-icon { background: #d98a00; }
@keyframes success-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .message.success { animation: none; } }

/* Maquetación: campos que no se encimen ni empujen la página en tableta */
.field input, .field select { width: 100%; min-width: 0; }
.camera [hidden] { display: none; }
.chart-legend-toggle { min-height: 36px; }
.donut-legend-item { padding: 9px 4px; }
.dashboard-bar-filter { padding: 6px 0; }
@media (max-width: 1000px) {
  .allocation-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .allocation-card > .btn { grid-column: 1 / -1; justify-self: start; }
  .receipt-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .receipt-form .btn { grid-column: 1 / -1; }
}
@media (max-width: 1000px) { .dashboard-columns { grid-template-columns: 1fr; } }

.backup-warning { border-color: #e6c36a; background: #fffbee; }
code { padding: 1px 5px; border-radius: 5px; background: #eeedfa; font-size: .85em; }

/* A single compact list keeps product names and quantities visible on phones. */
.dispatch-editor .allocation-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; border: 0; }
.dispatch-editor .allocation-products { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dispatch-editor .allocation-product-row { grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; }
.dispatch-editor .allocation-product-row > .btn { grid-column: 3; grid-row: 1; }
.dispatch-editor .allocation-lot-field { grid-column: 1 / -1; }
.dispatch-editor .allocation-product-row input { width: 100%; min-height: 44px; }
@media (max-width: 600px) {
  .dispatch-editor .allocation-card { grid-template-columns: minmax(0, 1fr); }
  .dispatch-editor .allocation-product-row { grid-template-columns: minmax(0, 1fr) 76px; gap: 6px 10px; }
  .dispatch-editor .allocation-product-row > .btn { grid-column: 2; grid-row: 2; justify-self: end; }
  .dispatch-editor .allocation-lot-field { grid-column: 1; grid-row: 2; }
  .dispatch-editor .allocation-lot-field label { font-size: .72rem; }
  .dispatch-editor .allocation-lot-field select { font-size: .8rem; }
  .dispatch-editor .allocation-product-row strong { font-size: .9rem; }
}
/* Compact seller workflow and customer → product history. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.dispatch-editor .allocation-product-row { grid-template-columns: minmax(0,1fr) 72px 32px; gap: 2px 10px; padding: 9px 0; }
.dispatch-editor .allocation-product-row > .btn { grid-column: 3; grid-row: 1; padding: 4px; min-height: 44px; font-size: 1.3rem; }
.dispatch-editor .allocation-product-row strong { font-size: .9rem; line-height: 1.25; }
.dispatch-editor .allocation-product-row input { text-align: center; padding: 6px; }
.allocation-lot-details { grid-column: 1 / -1; color: var(--muted); font-size: .74rem; }
.allocation-lot-details summary { cursor: pointer; padding: 2px 0; }
.document-picker { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px; }
.document-picker label { display: block; }
.product-list-heading { display: grid; grid-template-columns: minmax(0,1fr) 72px 32px; gap: 10px; color: var(--muted); text-transform: uppercase; font-size: .72rem; font-weight: 700; padding: 8px 0; border-bottom: 1px solid var(--line); }
.product-list-heading > :nth-child(2) { text-align: right; }
.dispatch-source { margin-bottom: 14px; }
.camera-tools summary { cursor: pointer; font-weight: 600; }
.camera-tools[open] > .toolbar { margin-top: 14px; }
.dispatch-actions { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.dispatch-client { padding: 0; border-bottom: 1px solid var(--line); margin: 0; }
.dispatch-client > summary { display: flex; align-items: center; gap: 12px; justify-content: space-between; cursor: pointer; padding: 14px 0; list-style: none; }
.dispatch-client > summary::before { content: '▸'; color: var(--accent); }
.dispatch-client[open] > summary::before { content: '▾'; }
.dispatch-client > summary > span:first-of-type { flex: 1; min-width: 0; }
.dispatch-client strong, .compact-product span { overflow-wrap: anywhere; }
.dispatch-client small, .compact-product small { display: block; color: var(--muted); font-size: .75rem; font-weight: 400; margin-top: 3px; }
.dispatch-units { text-align: right; font-weight: 700; }
.dispatch-units small { font-size: .67rem; }
.compact-products { margin: 0 0 8px 18px; }
.compact-products .product-list-heading { grid-template-columns: minmax(0,1fr) 64px; }
.compact-product { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.compact-product > strong { text-align: right; }
.document-actions { padding: 4px 0 12px 18px; }
.document-actions .btn.ghost { color: #a13c3c; }
.invoice-order-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px 0; }
.invoice-order-form label { flex: 1; min-width: 130px; }
.order-status { font-size: .74rem; color: var(--muted); max-width: 110px; text-align: right; }
.dispatch-client[hidden] { display: none; }
@media(max-width:600px) {
 .dispatch-editor .allocation-product-row { grid-template-columns: minmax(0,1fr) 64px 30px; }
 .dispatch-editor .allocation-product-row > .btn { grid-column: 3; grid-row: 1; }
 .document-picker { grid-template-columns: 100px minmax(0,1fr); }
 .dispatch-client > summary strong { font-size: .9rem; }
 .dispatch-actions > .btn { flex: 1; }
 .compact-products { margin-left: 12px; }
}
.dispatch-editor.hide-product-dates .allocation-lot-details { display: none; }
.dispatch-editor .allocation-availability[hidden] { display: none; }
.dispatch-editor .allocation-product-row strong { font-weight: 500; }
.dispatch-editor #toggle-product-dates { margin-bottom: 6px; padding-left: 0; }
.new-dispatch-heading { margin-bottom: 10px; }
.new-dispatch-heading .eyebrow, .new-dispatch-heading p { display: none; }
.dispatch-source { margin-bottom: 10px; }
.dispatch-source > .muted { font-size: .78rem; }
.camera-tools { padding: 10px 14px; margin-bottom: 12px; }
.dispatch-editor { padding: 14px; }
.dispatch-editor > .page-heading { display: none; }
.dispatch-editor .allocation-card { margin: 0; gap: 10px; }
.dispatch-editor .allocation-product-row { padding-top: 6px; padding-bottom: 6px; }
@media(max-width:600px) {
 .dispatch-source > .muted { display: none; }
 .new-dispatch-heading h2 { font-size: 1.45rem; }
}
.stocktake-toolbar { display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:12px; }
.stocktake-toolbar > label { flex:1;min-width:130px; }
.stocktake-header,.stocktake-row { display:grid;grid-template-columns:minmax(150px,1fr) 75px 100px 75px;align-items:center;gap:12px; }
.stocktake-header { position:sticky;top:0;z-index:2;background:#f3f8f8;font-size:.76rem;font-weight:700;padding:10px 0;border-bottom:1px solid var(--line); }
.stocktake-row { padding:9px 0; }
.stocktake-row > :not(:first-child),.stocktake-header > :not(:first-child) { text-align:right; }
.stocktake-row input { width:100%;min-height:44px;padding:6px; }
.stocktake-row strong { font-size:.88rem;overflow-wrap:anywhere; }
.stocktake-row small { display:block;color:var(--muted);font-size:.74rem;margin-top:3px; }
.stocktake-item { border-bottom:1px solid var(--line); }
.stocktake-position { display:flex;gap:8px;align-items:center;padding:0 0 9px; }
.stocktake-position label { flex:1; }
.stocktake-position input { min-width:0;width:100%; }
.stocktake-footer { border-top:1px solid var(--line);margin-top:16px;padding-top:12px;display:grid;gap:12px; }
.stocktake-footer > .btn { justify-self:start; }
#stocktake-history > details { padding:10px 0;border-bottom:1px solid var(--line); }
@media(max-width:600px) {
 .stocktake-editor { padding:12px; }
 .stocktake-header,.stocktake-row { grid-template-columns:minmax(0,1fr) 40px 62px 44px;gap:6px; }
 .stocktake-header { font-size:.67rem; }
 .stocktake-row strong { font-size:.82rem; }
 .stocktake-row small { font-size:.69rem; }
 .stocktake-row input { padding:4px; }
}
.stocktake-toolbar input,.stocktake-toolbar select { width:100%;min-width:0; }
.stocktake-position label,.stocktake-row > * { min-width:0; }

/* One module per task; secondary sections stay inside their module. */
.workspace-tabs { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line); }
.workspace-tabs .btn { min-height:44px; }
.entry-expiry { display:flex;align-items:center;gap:10px;font-size:.72rem;color:var(--muted);padding:0 0 6px; }
.entry-expiry input { max-width:160px;min-height:32px;padding:3px 6px;font-size:.78rem; }
@media(max-width:600px) { .workspace-tabs { gap:4px; } .workspace-tabs .btn { padding:7px 9px;font-size:.78rem; } }
.invoice-order-form > div,.invoice-order-form > label { flex:1 1 160px;min-width:0;max-width:100%; }
.invoice-order-form input,.invoice-order-form select { width:100%;min-width:0;max-width:100%; }
.route-movement { padding:12px;border:1px solid var(--line);border-radius:10px; }
@media(max-width:600px) { .route-movement > div,.route-movement > label { flex-basis:100%; } }

.module-switcher { display:none; }
@media(max-width:760px) {
 .sidebar { display:none; }
 .module-switcher { display:block;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--nav); }
 .module-switcher label { display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--muted); }
 .module-switcher select { flex:1;min-width:0;font-weight:700;color:var(--accent-dark); }
}