:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --ink: #172033;
  --muted: #65748b;
  --line: #dce4ef;
  --line-strong: #c9d5e4;
  --brand: #1769e0;
  --brand-dark: #0f56c2;
  --brand-soft: #eaf2ff;
  --danger: #d92d3d;
  --warning: #d97706;
  --ok: #16834a;
  --shadow-sm: 0 4px 14px rgba(35, 52, 78, .06);
  --shadow-lg: 0 22px 55px rgba(24, 39, 63, .18);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.auth-pending { overflow:hidden; }
body.auth-pending .app-shell { visibility:hidden; }
.auth-screen { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:#eef3fa; }
.auth-screen[hidden] { display:none; }
.auth-card { width:min(420px,100%); padding:24px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 18px 50px rgba(30,50,80,.14); }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-brand p,.auth-brand h1 { margin:0; }
.auth-brand p { color:var(--muted); font-size:11px; font-weight:750; }
.auth-brand h1 { margin-top:2px; font-size:25px; }
.auth-form { display:grid; gap:12px; }
.auth-form[hidden] { display:none; }
.auth-form label { margin:0; }
.auth-form .primary-button { width:100%; min-height:44px; margin-top:3px; }
.auth-intro { margin:0 0 2px; color:var(--muted); font-size:13px; line-height:1.45; }
.auth-error { min-height:18px; margin-top:10px; color:var(--danger); font-size:12px; font-weight:700; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 27px; line-height: 1.15; }
h2 { margin-bottom: 16px; font-size: 19px; }
h3 { margin: 0; font-size: 15px; }

.app-shell { width: min(1540px, 100%); margin: 0 auto; padding: 20px; }
.topbar {
  position: sticky;
  top: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  margin: 0 0 16px 232px;
  padding: 10px 16px;
  border: 1px solid rgba(220, 228, 239, .9);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
  font-weight: 900;
}
.eyebrow { margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.topbar-date { color: var(--muted); font-size: 13px; text-transform: capitalize; }
.topbar-account { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.current-user { min-width:0; padding-left:12px; border-left:1px solid var(--line); text-align:right; }
.current-user span,.current-user small { display:block; }
.current-user span { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:800; }
.current-user small { margin-top:2px; color:var(--muted); font-size:9px; }
.logout-button { flex:0 0 36px; }

.layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 16px; }
.tabs {
  position: sticky;
  top: 12px;
  align-self: start;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 43px;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}
.tab:hover { color: var(--ink); background: var(--panel-soft); }
.tab.is-active { color: var(--brand); background: var(--brand-soft); }
.tab-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}
.tab.is-active .tab-icon { color: #fff; border-color: var(--brand); background: var(--brand); }
.more-tab { display: none; }
.more-tab.has-active-section { color: var(--brand); }

.workspace, .content-block, .form-card, .stat-card { min-width: 0; }
.panel { display: none; }
.panel.is-active { display: block; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card, .content-block, .form-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.stat-card { padding: 16px; }
.stat-card span, .stat-card small { display: block; color: var(--muted); }
.stat-card strong { display: block; margin: 7px 0 2px; font-size: 28px; line-height: 1; }
.stat-card.warning strong { color: var(--warning); }
.two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.split-view { display: block; }
.content-block, .form-card { padding: 16px; }
.block-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.block-head h2 { margin: 0 auto 0 0; }
.search-input { width: min(230px, 38%); }

.ghost-button, .primary-button, .secondary-button, .danger-button, .text-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 13px;
  font-weight: 800;
  text-decoration: none;
}
.ghost-button, .secondary-button { color: var(--ink); border-color: var(--line-strong); background: #fff; }
.ghost-button:hover, .secondary-button:hover { border-color: #aebdd0; background: var(--panel-soft); }
.primary-button { color: #fff; background: var(--brand); }
.primary-button:hover { background: var(--brand-dark); }
.danger-button { color:#fff; border-color:var(--danger); background:var(--danger); }
.danger-button:hover { background:#b91c2c; }
.primary-button:disabled, .secondary-button:disabled, .ghost-button:disabled { cursor: not-allowed; opacity: .45; }
.compact { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.open-form-button { white-space: nowrap; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; }
.form-actions, .inline-fields, .mini-actions { display: flex; gap: 9px; }
.form-field { margin-bottom: 12px; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.field-label-row label { margin: 0; }
.inline-add-button { min-height: 26px; border: 0; border-radius: 6px; padding: 3px 6px; color: var(--brand); background: transparent; font-size: 11px; font-weight: 850; }
.inline-add-button:hover { background: var(--brand-soft); }
.appointment-conflict { display: grid; gap: 4px; margin: 2px 0 14px; padding: 12px; border: 1px solid #f2c184; border-left: 4px solid var(--warning); border-radius: 7px; color: #8a4b06; background: #fff8e8; }
.appointment-conflict[hidden] { display: none; }
.appointment-conflict > strong { color: #713b03; font-size: 14px; }
.appointment-conflict > span { font-size: 12px; line-height: 1.4; }
.conflict-list { display: grid; gap: 6px; margin-top: 5px; }
.conflict-list > div { padding-top: 6px; border-top: 1px solid #f2d8ad; }
.conflict-list b, .conflict-list span { display: block; }
.conflict-list b { font-size: 11px; text-transform: capitalize; }
.conflict-list span { margin-top: 2px; color: #7b5a2d; font-size: 11px; line-height: 1.35; }
.search-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.search-select { position: relative; }
.search-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 8px 12px; color: var(--ink); background: #fff; text-align: left; }
.search-select-trigger:hover { border-color: #aebdd0; }
.search-select.is-open .search-select-trigger { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(23, 105, 224, .12); }
.search-select-value { min-width: 0; }
.search-select-value strong, .search-select-value small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select-value strong { font-size: 13px; }
.search-select-value small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.search-select-trigger:not(.has-value) strong { color: var(--muted); font-weight: 650; }
.search-select-arrow { width: 8px; height: 8px; flex: 0 0 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.search-select.is-open .search-select-arrow { transform: translateY(2px) rotate(225deg); }
.search-select-panel { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 70; display: none; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-lg); }
.search-select.is-open .search-select-panel { display: block; }
.search-select-input { min-height: 40px; margin-bottom: 7px; background: var(--panel-soft); }
.search-select-options { display: grid; gap: 3px; max-height: min(300px, 42dvh); overflow-y: auto; overscroll-behavior: contain; }
.search-select-option { position: relative; display: flex; align-items: center; width: 100%; min-height: 46px; border: 0; border-radius: 6px; padding: 7px 35px 7px 10px; color: var(--ink); background: transparent; text-align: left; }
.search-select-option:hover { background: var(--panel-soft); }
.search-select-option.is-selected { color: var(--brand); background: var(--brand-soft); }
.search-select-option span, .search-select-option strong, .search-select-option small { display: block; min-width: 0; }
.search-select-option strong { font-size: 13px; }
.search-select-option small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.search-select-option.is-selected::after { content: ""; position: absolute; top: 50%; right: 14px; width: 6px; height: 11px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: translateY(-60%) rotate(45deg); }
.search-select-empty { padding: 16px 10px; color: var(--muted); font-size: 12px; text-align: center; }

label { display: grid; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 12px; font-weight: 800; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 78px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa8ba; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(23, 105, 224, .12); }
.inline-fields > label { flex: 1; }
.total-box { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; padding: 13px; border: 1px solid #cfe0fb; border-radius: 7px; background: var(--brand-soft); }
.total-box span { color: var(--muted); font-weight: 800; }
.total-box strong { font-size: 21px; }

.inventory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.inventory-heading h2 { margin: 2px 0 0; font-size: 24px; }
.inventory-block-head { align-items:center; gap:8px; }
.inventory-block-head .compact,.inventory-block-head .search-input { height:42px; min-height:42px; }
.inventory-block-head .open-form-button { flex:0 0 auto; margin:0; }
.inventory-data-actions { display:flex; align-items:center; gap:6px; margin:0; }
.inventory-data-actions .secondary-button { display:inline-flex; align-items:center; justify-content:center; min-width:104px; margin:0; gap:0; color:var(--ink); white-space:nowrap; line-height:1; }
.inventory-data-actions .file-button { margin:0; color:var(--ink); font-size:13px; font-weight:800; }
.inventory-data-actions .file-button input { cursor:pointer; }
.inventory-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.inventory-tab { min-height: 36px; border: 0; border-radius: 6px; padding: 7px 12px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.inventory-tab:hover { color: var(--ink); background: var(--panel-soft); }
.inventory-tab.is-active { color: var(--brand); background: var(--brand-soft); }
.inventory-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.inventory-summary article { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.inventory-summary span, .inventory-summary strong, .inventory-summary small { display: block; }
.inventory-summary span, .inventory-summary small { color: var(--muted); }
.inventory-summary span { font-size: 11px; font-weight: 750; }
.inventory-summary strong { margin: 5px 0 2px; font-size: 19px; white-space: nowrap; }
.inventory-summary small { font-size: 10px; }
.inventory-summary article.warning strong { color: var(--warning); }
.inventory-view[hidden] { display: none; }
.stock-actions { margin-top: 10px; }
.stock-action { min-height: 33px; border: 1px solid; border-radius: 7px; padding: 6px 10px; font-size: 12px; font-weight: 800; }
.stock-action.incoming { color: var(--ok); border-color: #b9dfca; background: #edf9f2; }
.stock-action.incoming:hover { border-color: var(--ok); }
.stock-action.writeoff { color: var(--danger); border-color: #f0c3c8; background: #fff4f5; }
.stock-action.writeoff:hover { border-color: var(--danger); }
.stock-action.market { color: var(--brand); border-color: #b9d2f5; background: var(--brand-soft); }
.stock-action.market:hover { border-color: var(--brand); }
.stock-action:disabled { cursor: not-allowed; opacity: .45; }
.supplier-price-inline { display:flex; align-items:center; gap:8px 12px; margin-top:10px; padding:8px 10px; border:1px solid #cfe0fb; border-radius:7px; color:var(--brand); background:var(--brand-soft); }
.supplier-price-inline span { color:var(--muted); font-size:10px; font-weight:750; }
.supplier-price-inline strong { font-size:14px; white-space:nowrap; }
.supplier-price-inline small { margin-left:auto; color:var(--muted); font-size:10px; }
.stock-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; margin: 2px 0 14px; padding: 10px 12px; border: 1px solid #cfe0fb; border-radius: 7px; color: var(--brand); background: var(--brand-soft); }
.stock-preview span, .stock-preview strong, .stock-preview small { display: block; }
.stock-preview span { font-size: 11px; font-weight: 750; }
.stock-preview strong { font-size: 17px; }
.stock-preview small { margin-top: 3px; color: var(--danger); font-size: 10px; }
.stock-preview.is-danger { color: var(--danger); border-color: #f0c3c8; background: #fff4f5; }
.inventory-count-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; align-items:end; margin-bottom:12px; }
.inventory-count-toolbar label { margin:0; }
.inventory-count-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.inventory-count-summary span { padding:7px 10px; border-radius:999px; background:var(--panel-soft); color:var(--muted); font-size:11px; font-weight:800; }
.inventory-count-list { display:grid; gap:7px; }
.inventory-count-row { display:grid; grid-template-columns:minmax(0,1fr) 110px 130px 110px; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.inventory-count-name strong,.inventory-count-name small { display:block; }
.inventory-count-name small { margin-top:3px; color:var(--muted); }
.inventory-count-row label { margin:0; font-size:10px; color:var(--muted); }
.inventory-count-row input { margin-top:3px; }
.inventory-difference { font-weight:850; text-align:right; }
.inventory-difference.positive { color:var(--ok); }.inventory-difference.negative { color:var(--danger); }
.movement-item { grid-template-columns: minmax(0, 1fr); }
.movement-badge { display: inline-flex; align-items: center; min-height: 23px; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 850; }
.movement-badge.incoming { color: var(--ok); background: #edf9f2; }
.movement-badge.outgoing { color: var(--danger); background: #fff0f1; }
.movement-quantity.positive { color: var(--ok); }
.movement-quantity.negative { color: var(--danger); }

.finance-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.finance-heading h2 { margin: 2px 0 0; font-size: 24px; }
.finance-period-card { min-width:560px; padding:7px; border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:var(--shadow-sm); }
.finance-period-presets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.finance-period-button { min-height:34px; border:0; border-radius:7px; padding:6px 10px; color:var(--muted); background:transparent; font-size:11px; font-weight:800; }
.finance-period-button:hover { color:var(--ink); background:var(--panel-soft); }
.finance-period-button.is-active { color:#fff; background:var(--brand); box-shadow:0 4px 10px rgba(23,105,224,.22); }
.finance-date-controls { display:none; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:7px; align-items:end; margin-top:7px; padding:8px; border-radius:8px; background:var(--panel-soft); }
.finance-period-card.is-custom .finance-date-controls { display:grid; }
.finance-date-controls label { margin:0; }.finance-date-controls label span { display:block; margin:0 0 4px; color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; }
.finance-date-controls input { min-height:36px; padding-block:6px; background:#fff; }.finance-date-arrow { align-self:center; color:var(--muted); text-align:center; }
.product-pricing-card { margin-bottom:14px; padding:11px; border:1px solid var(--line); border-radius:9px; background:var(--panel-soft); }
.product-pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.product-pricing-grid label { min-width:0; margin:0; }.product-pricing-grid input { height:44px; min-height:44px; background:#fff; }
.product-pricing-card > small { display:block; margin-top:8px; color:var(--brand); font-size:10px; font-weight:750; }
.markup-presets { display:grid; grid-template-columns:auto repeat(5,minmax(0,1fr)); gap:4px; align-items:center; margin-top:8px; }.markup-presets > span { margin-right:4px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.markup-presets button { min-width:0; min-height:29px; border:1px solid var(--line); border-radius:6px; padding:3px; color:var(--muted); background:#fff; font-size:9px; font-weight:800; }.markup-presets button:hover { color:var(--brand); border-color:#a9c8f5; background:var(--brand-soft); }
.finance-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.finance-summary article { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.finance-summary span, .finance-summary strong, .finance-summary small { display: block; }
.finance-summary span, .finance-summary small { color: var(--muted); }
.finance-summary span { font-size: 11px; font-weight: 750; }
.finance-summary strong { margin: 6px 0 3px; font-size: 21px; white-space: nowrap; }
.finance-summary small { font-size: 10px; }
.finance-summary article.warning strong { color: var(--danger); }
.finance-tabs { display: inline-flex; gap: 4px; margin-bottom: 10px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.finance-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; border: 0; border-radius: 6px; padding: 7px 13px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.finance-tab:hover { color: var(--ink); background: var(--panel-soft); }
.finance-tab.is-active { color: var(--brand); background: var(--brand-soft); }
.finance-tab span { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; color: var(--danger); background: #fff0f1; font-size: 10px; }
.finance-view[hidden] { display: none; }
.finance-block-head .search-input { margin-left: 2px; }
.finance-operation { align-items: center; }
.finance-badge { display: inline-flex; align-items: center; min-height: 23px; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 850; }
.finance-badge.income { color: var(--ok); background: #edf9f2; }
.finance-badge.expense { color: var(--danger); background: #fff0f1; }
.report-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.report-heading h2 { margin:2px 0 0; font-size:24px; }
.report-period-card { min-width:650px; padding:7px; border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:var(--shadow-sm); }
.report-period-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.report-period-presets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.report-period-button { min-height:36px; border:0; border-radius:7px; padding:6px 9px; color:var(--muted); background:transparent; font-size:11px; font-weight:800; }
.report-period-button:hover { color:var(--ink); background:var(--panel-soft); }.report-period-button.is-active { color:#fff; background:var(--brand); box-shadow:0 4px 10px rgba(23,105,224,.22); }
.report-export-button { min-width:145px; }
.report-date-controls { display:none; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:7px; align-items:end; margin-top:7px; padding:8px; border-radius:8px; background:var(--panel-soft); }
.report-period-card.is-custom .report-date-controls { display:grid; }
.report-date-controls label { margin:0; }.report-date-controls label span { display:block; margin:0 0 4px; color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; }
.report-date-controls input { min-height:36px; padding-block:6px; background:#fff; }.report-date-arrow { align-self:center; color:var(--muted); text-align:center; }
.report-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:12px; }
.report-summary article { min-width:0; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:var(--shadow-sm); }
.report-summary span,.report-summary strong,.report-summary small { display:block; }
.report-summary span,.report-summary small { color:var(--muted); }.report-summary span { font-size:11px; font-weight:750; }
.report-summary strong { margin:6px 0 3px; font-size:20px; white-space:nowrap; }.report-summary small { font-size:10px; }
.report-summary article.warning strong { color:var(--danger); }
.report-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.report-table-wrap { max-width:100%; overflow-x:auto; }
.report-table { width:100%; min-width:980px; border-collapse:collapse; }
.report-table th,.report-table td { padding:10px 9px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.report-table th { color:var(--muted); background:var(--panel-soft); font-size:10px; text-transform:uppercase; }
.report-table th:first-child,.report-table th:nth-child(2),.report-table td:first-child,.report-table td:nth-child(2) { text-align:left; }
.report-table td small { display:block; margin-top:3px; color:var(--muted); }.report-empty { padding:28px!important; color:var(--muted); text-align:center!important; }
.positive-money, .paid-text { color: var(--ok) !important; }
.negative-money, .debt-text { color: var(--danger) !important; }
.payment-action { color: var(--ok); border-color: #b9dfca; background: #edf9f2; }
.payment-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.payment-preview > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); }
.payment-preview span, .payment-preview strong, .payment-preview small { display: block; }
.payment-preview span { color: var(--muted); font-size: 10px; }
.payment-preview strong { margin-top: 4px; font-size: 14px; white-space: nowrap; }
.payment-preview > span { grid-column: 1 / -1; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 7px; text-align: center; }
.payment-preview small { grid-column: 1 / -1; color: var(--danger); font-size: 11px; }
.payment-preview.is-danger > div:last-of-type { border-color: #efb9bf; background: #fff4f5; }
.payment-preview.is-danger > div:last-of-type strong { color: var(--danger); }

.dashboard-debt-block { margin-bottom: 14px; }
.dashboard-debt-head { align-items: center; }
.dashboard-debt-head > div:first-child { margin-right: auto; }
.dashboard-debt-head h2 { margin: 2px 0 0; }
.dashboard-debt-total { min-width: 130px; padding: 7px 10px; border: 1px solid #f0c3c8; border-radius: 7px; background: #fff4f5; }
.dashboard-debt-total span, .dashboard-debt-total strong { display: block; }
.dashboard-debt-total span { color: var(--muted); font-size: 10px; font-weight: 750; }
.dashboard-debt-total strong { margin-top: 2px; color: var(--danger); font-size: 16px; }
.dashboard-debt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashboard-debt-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 12px; border: 1px solid var(--line); border-left: 4px solid #e98c97; border-radius: 8px; background: #fff; }
.dashboard-debt-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.dashboard-debt-main > div { min-width: 0; }
.dashboard-debt-main strong, .dashboard-debt-main span { display: block; }
.dashboard-debt-main > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-debt-main span, .dashboard-debt-meta { color: var(--muted); font-size: 11px; }
.dashboard-debt-main .debt-text { flex: 0 0 auto; font-size: 15px; white-space: nowrap; }
.dashboard-debt-meta { display: grid; gap: 3px; grid-column: 1; }
.dashboard-debt-card > button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.dashboard-debt-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed #b9dfca; border-radius: 8px; color: var(--ok); background: #f4fbf7; text-align: center; }
.dashboard-debt-empty strong, .dashboard-debt-empty span { display: block; }
.dashboard-debt-empty span { margin-top: 3px; color: var(--muted); font-size: 12px; }

.list { display: grid; gap: 8px; }
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.item:hover { border-color: #c4d1e1; box-shadow: 0 4px 14px rgba(35, 52, 78, .05); }
.item-main { min-width: 0; }
.item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; font-weight: 850; }
.item-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: 13px; }
.item-meta strong { color: var(--ink); }
.item-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.badge { display: inline-flex; align-items: center; min-height: 23px; border-radius: 999px; padding: 3px 8px; color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 850; }
.badge.danger { color: var(--danger); background: #fff0f1; }
.badge.ok { color: var(--ok); background: #edf9f2; }
.item-actions { display: flex; align-items: start; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

.client-card { display: block; padding: 0; overflow: hidden; }
.client-card.is-expanded { border-color: #9fc2f4; box-shadow: 0 8px 24px rgba(23, 105, 224, .09); }
.client-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; }
.client-identity { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.client-avatar { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 18px; font-weight: 900; }
.client-main { min-width: 0; }
.client-main .item-title { margin: 1px 0 4px; }
.client-contacts { display: flex; flex-wrap: wrap; gap: 4px 13px; color: var(--muted); font-size: 12px; }
.client-contacts a { color: var(--muted); overflow-wrap: anywhere; text-decoration: none; }
.client-contacts a:hover { color: var(--brand); }
.client-card-stats { display: grid; grid-template-columns: 150px 150px minmax(120px, 1fr) minmax(120px, 1fr); gap: 8px; padding: 0 14px 14px 67px; }
.client-stat-button, .client-money-stat { min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); }
.client-stat-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.client-stat-button:hover { border-color: #a9c7ef; color: var(--brand); background: #f3f7ff; }
.client-stat-button.is-active { border-color: var(--brand); color: #fff; background: var(--brand); }
.client-stat-button strong { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; color: var(--brand); background: #fff; font-size: 11px; }
.client-money-stat { display: flex; flex-direction: column; justify-content: center; padding: 7px 10px; }
.client-money-stat span, .client-money-stat strong { display: block; }
.client-money-stat span { color: var(--muted); font-size: 10px; font-weight: 750; }
.client-money-stat strong { margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }
.client-money-stat.has-debt { border-color: #f0c3c8; background: #fff4f5; }
.client-money-stat.has-debt strong { color: var(--danger); }
.client-details-panel { padding: 16px; border-top: 1px solid #cfe0f6; background: #f7faff; animation: client-details-in .2s ease-out; }
@keyframes client-details-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.client-details-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.client-details-head span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.client-details-head h3 { margin: 3px 0 0; font-size: 17px; }
.client-vehicle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.client-vehicle-card, .client-order-card { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.client-vehicle-card { padding: 13px; }
.client-vehicle-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.client-vehicle-head span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.client-vehicle-head h4 { margin: 3px 0 0; font-size: 15px; }
.plate-badge { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #aeb9c8; border-radius: 5px; background: #fff; font-size: 11px; }
.client-vehicle-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin: 12px 0 0; }
.client-vehicle-facts > div { padding: 8px 0; border-top: 1px solid var(--line); }
.client-vehicle-facts dt { color: var(--muted); font-size: 10px; }
.client-vehicle-facts dd { margin: 3px 0 0; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.client-vehicle-vin { margin: 10px 0 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.client-vehicle-vin span { margin-right: 6px; color: var(--ink); font-weight: 850; }
.client-vehicle-note { margin-top: 10px; padding: 9px 10px; border-left: 3px solid var(--warning); border-radius: 0 6px 6px 0; background: #fff8e8; }
.client-vehicle-note span { color: var(--warning); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.client-vehicle-note p { margin: 3px 0 0; font-size: 11px; line-height: 1.4; }
.client-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.client-order-history { display: grid; gap: 8px; }
.client-order-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) 155px; gap: 12px 16px; align-items: start; padding: 13px; }
.client-order-date span, .client-order-date strong { display: block; }
.client-order-date span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.client-order-date strong { margin-top: 5px; color: var(--brand); font-size: 11px; }
.client-order-main { min-width: 0; }
.client-order-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.client-order-title h4 { min-width: 0; margin: 1px 0 0; font-size: 14px; line-height: 1.35; }
.client-order-status { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; }
.client-order-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; color: var(--muted); font-size: 11px; }
.client-order-main > p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.client-order-money { display: grid; gap: 4px; }
.client-order-money > div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.client-order-money span { color: var(--muted); font-size: 10px; }
.client-order-money strong { font-size: 11px; text-align: right; }
.client-order-money .has-debt strong { color: var(--danger); }
.client-order-money .is-paid strong { color: var(--ok); }
.client-order-actions { grid-column: 2 / 4; justify-content: flex-end; margin-top: -2px; }
.client-detail-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border: 1px dashed #b8c9df; border-radius: 8px; background: #fff; }
.client-detail-empty strong, .client-detail-empty span { display: block; }
.client-detail-empty span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.client-details-head-actions { display:flex; align-items:center; gap:7px; }
.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #fff;
  font-weight: 800;
}
.icon-button:hover { color: var(--ink); border-color: #b8c7d8; background: var(--panel-soft); }
.icon-button.delete { color: var(--danger); }
.icon-button.edit::before { content: ""; width: 15px; height: 4px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.icon-button.edit::after { content: ""; position: absolute; width: 3px; height: 5px; border: 1px solid currentColor; background: #fff; transform: translate(-5px, 5px) rotate(-45deg); }
.icon-button.delete::before, .icon-button.delete::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 2px; background: currentColor; }
.icon-button.delete::before { transform: translate(-50%, -50%) rotate(45deg); }
.icon-button.delete::after { transform: translate(-50%, -50%) rotate(-45deg); }
.icon-button.print::before { content: ""; width: 16px; height: 10px; border: 2px solid currentColor; border-radius: 2px; transform: translateY(2px); }
.icon-button.print::after { content: ""; position: absolute; top: 7px; left: 50%; width: 10px; height: 10px; border: 1px solid currentColor; background: #fff; transform: translateX(-50%); }
.text-icon-button { min-height: 36px; color: var(--brand); border-color: #cfe0fb; background: var(--brand-soft); font-size: 12px; }
.empty-state { padding: 22px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); background: var(--panel-soft); text-align: center; }
.empty-state strong, .empty-state span { display: block; }

.calendar-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.day-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); text-align: left; }
.day-card:hover { border-color: #b9c8da; }
.day-card strong, .day-card span { display: block; }
.day-card strong { font-size: 13px; text-transform: capitalize; }
.day-card span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.day-card.today { border-color: #aac8f5; background: #f5f9ff; }
.day-card.is-selected { color: #fff; border-color: var(--brand); background: var(--brand); }
.day-card.is-selected span { color: #dceaff; }
.selected-day-block { margin-bottom: 14px; }
.section-kicker { margin: 0 0 3px; color: var(--brand); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.workday-head { align-items: flex-start; }
.workday-head > div:first-child { margin-right: auto; }
.workday-head h2 { width: auto; text-transform: capitalize; }
.day-controls { display: flex; align-items: center; gap: 7px; }
.workday-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); }
.workday-summary > div { padding: 8px 11px; border-right: 1px solid var(--line); background: #fff; }
.workday-summary > div:last-child { border-right: 0; }
.workday-summary span, .workday-summary strong { display: block; }
.workday-summary span { color: var(--muted); font-size: 11px; font-weight: 750; }
.workday-summary strong { margin-top: 3px; font-size: 17px; }
.schedule-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.schedule-column { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); overflow: visible; }
.schedule-column-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 11px; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; background: #fff; }
.schedule-column-head strong, .schedule-column-head span { display: block; }
.schedule-column-head span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.load-indicator { min-width: 62px; text-align: right; }
.load-indicator strong { color: var(--brand); font-size: 12px; }
.load-indicator > span { display: block; width: 62px; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #e4eaf2; }
.load-indicator i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.schedule-column-body { max-height: min(500px, 62dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.schedule-timeline { display: grid; gap: 6px; padding: 7px; }
.free-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; border: 1px dashed #a9bad0; border-radius: 7px; padding: 5px 9px; color: var(--brand); background: #fff; text-align: left; }
.free-slot:hover { border-color: var(--brand); background: var(--brand-soft); }
.free-slot strong { font-size: 11px; }
.free-slot span { color: var(--muted); font-size: 10px; }
.schedule-entry { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; border: 1px solid currentColor; border-left-width: 4px; border-radius: 7px; padding: 8px 9px; }
.schedule-time strong, .schedule-time span { display: block; }
.schedule-time strong { color: var(--ink); font-size: 14px; }
.schedule-time span { margin-top: 1px; color: var(--muted); font-size: 10px; }
.schedule-entry-main { display: grid; gap: 2px; min-width: 0; }
.schedule-client { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-vehicle { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-entry p { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.schedule-entry-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.schedule-entry .item-actions { flex-wrap: nowrap; justify-content: flex-end; padding-top: 0; }
.schedule-entry .item-actions button { min-height: 30px; }
.cancelled-entries { display: grid; gap: 7px; padding: 0 8px 8px; }
.cancelled-entries > span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }

.status-menu { position: relative; display: inline-flex; z-index: 3; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; border: 0; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 850; }
.status-arrow { line-height: 1; opacity: .75; }
.status-options { position: absolute; top: calc(100% + 7px); left: 0; display: none; min-width: 172px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-lg); }
.status-menu.is-open { z-index: 30; }
.status-menu.is-open .status-options { display: grid; gap: 3px; }
.status-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; border: 0; border-radius: 6px; padding: 7px 9px; text-align: left; font-size: 12px; font-weight: 750; }
.status-option span { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.status-planned, .status-open { color: #1769e0; background-color: #eaf2ff; }
.status-arrived { color: #6f4bc8; background-color: #f3efff; }
.status-work { color: #d65a08; background-color: #fff2e8; }
.status-wait { color: #a96305; background-color: #fff7df; }
.status-ready { color: #16834a; background-color: #edf9f2; }
.status-done { color: #087a70; background-color: #e9f8f6; }
.status-cancelled { color: #d92d3d; background-color: #fff0f1; }
.status-paid { color: #4058ba; background-color: #edf0ff; }
.status-closed { color: #58677b; background-color: #eef2f6; }

.line-editor { margin-bottom: 15px; }
.line-list { display: grid; gap: 8px; }
.line-row { display: grid; grid-template-columns: minmax(0, 1fr) 82px 38px; gap: 7px; align-items: start; }
.work-line { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.work-line-head { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 7px; }
.work-line-fields { display: grid; grid-template-columns: minmax(0, 1fr) 98px 70px; gap: 7px; }
.work-line .icon-button, .work-line input, .work-line select { background: #fff; }
.line-search-select { min-width: 0; }
.line-search-select .search-select-trigger { min-height: 42px; padding-block: 7px; }
.line-search-select .search-select-value strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#orderForm.drawer-form { width: min(780px, 100%); padding-right: 28px; padding-left: 28px; }
.order-form-header { padding: 1px 52px 17px 0; }
.order-form-header h2 { margin: 2px 0 0; padding-right: 0; font-size: 24px; }
.order-form-section { padding: 18px 0; border-top: 1px solid var(--line); }
.order-section-heading { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin-bottom: 13px; }
.order-section-heading > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--brand); background: var(--brand-soft); font-size: 12px; font-weight: 900; }
.order-section-heading h3 { font-size: 16px; }
.order-section-heading .secondary-button { min-height: 34px; }
.order-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.order-form-grid > label, .order-form-grid > .form-field { min-width: 0; margin-bottom: 11px; }
#orderForm .line-editor { margin-bottom: 0; }
.order-line-labels { display: grid; grid-template-columns: minmax(0, 1fr) 98px 70px 38px; gap: 7px; padding: 0 9px 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.order-line-labels.product-labels { grid-template-columns: minmax(0, 1fr) 82px 38px; }
.order-cost-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.order-cost-summary > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); }
.order-cost-summary span, .order-cost-summary strong { display: block; }
.order-cost-summary span { color: var(--muted); font-size: 10px; font-weight: 750; }
.order-cost-summary strong { margin-top: 3px; font-size: 14px; overflow-wrap: anywhere; }
.order-form-actions { display: grid; grid-template-columns: minmax(130px, 1fr) auto auto; align-items: center; }
.order-action-total span, .order-action-total strong { display: block; }
.order-action-total span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.order-action-total strong { margin-top: 2px; font-size: 20px; }
#orderForm.drawer-form .order-form-actions { bottom: -24px; margin-right: -28px; margin-left: -28px; padding-right: 28px; padding-left: 28px; }
.history-list { display: grid; gap: 6px; margin-top: 9px; }
.history-row { padding: 9px; border-left: 3px solid #bdd3f2; border-radius: 0 6px 6px 0; color: var(--muted); background: var(--panel-soft); font-size: 12px; }

.employee-stats { display: grid; gap: 8px; }
.employee-stat-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; min-width:0; padding:13px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.employee-stat-row > div { min-width:0; padding:8px; border-radius:6px; background:var(--panel-soft); }
.employee-stat-row > div:first-child { grid-column:1/-1; padding:0 0 10px; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.employee-stat-row > div:not(:first-child) strong { margin-top:4px; font-size:14px; white-space:nowrap; }
.employee-stat-row span { display: block; color: var(--muted); font-size: 12px; }
.employee-stat-row strong { display: block; }
.payroll-block, .payroll-history-block { margin-top:14px; }
.payroll-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.payroll-heading h2 { margin:2px 0 0; }.payroll-heading label { width:210px; margin:0; }
.payroll-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.payroll-summary article { min-width:0; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.payroll-summary span,.payroll-summary small { display:block; color:var(--muted); font-size:12px; }.payroll-summary strong { display:block; margin:7px 0 3px; font-size:20px; }
.payroll-summary .warning strong,.payroll-card-stats .has-debt strong { color:var(--danger); }
.payroll-list { display:grid; gap:9px; }
.payroll-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }
.payroll-person { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.payroll-person strong,.payroll-person span { display:block; }.payroll-person span { margin-top:3px; color:var(--muted); font-size:12px; }
.payroll-card-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.payroll-card-stats > div { min-width:0; padding:11px 14px; border-right:1px solid var(--line); }.payroll-card-stats > div:last-child { border-right:0; }
.payroll-card-stats span,.payroll-card-stats strong { display:block; }.payroll-card-stats span { color:var(--muted); font-size:11px; }.payroll-card-stats strong { margin-top:4px; overflow-wrap:anywhere; }
.payroll-payment-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:9px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.payroll-payment-preview > div { min-width:0; padding:8px; border-radius:6px; background:#fff; }.payroll-payment-preview span,.payroll-payment-preview strong { display:block; }.payroll-payment-preview span { color:var(--muted); font-size:11px; }.payroll-payment-preview strong { margin-top:4px; }
.payroll-payment-preview > small { grid-column:1/-1; color:var(--danger); font-weight:700; }
.settings-preview { margin-top: 13px; }
.supplier-api-settings { margin-top:14px; }
.supplier-api-settings .block-head > div:first-child { margin-right:auto; }
.supplier-api-settings .block-head h2 { margin:2px 0 0; }
.supplier-api-state { padding:6px 9px; border-radius:999px; color:var(--danger); background:#fff0f1; font-size:11px; font-weight:850; }
.supplier-api-state.is-ready { color:var(--ok); background:#edf9f2; }
.supplier-api-form { display:grid; grid-template-columns:minmax(220px,1.3fr) minmax(170px,1fr) minmax(190px,1fr) auto; gap:9px; align-items:end; margin-top:13px; }
.supplier-api-form label { min-width:0; margin:0; }
.supplier-api-form button { min-height:42px; }
.supplier-session-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto auto; gap:9px; align-items:end; margin-top:13px; }
.supplier-session-form label { min-width:0; margin:0; }
.supplier-session-form button { min-height:42px; }
.supplier-helper-setup { display:grid; grid-template-columns:auto auto minmax(220px,1fr); gap:9px 12px; align-items:center; margin-top:13px; }
.supplier-helper-setup .primary-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; text-decoration:none; white-space:nowrap; }
.supplier-helper-setup > span { color:var(--muted); font-size:11px; line-height:1.45; }
.supplier-helper-help { margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.supplier-helper-help summary { cursor:pointer; font-weight:700; }
.supplier-helper-help p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.supplier-public-info { display:flex; align-items:center; gap:8px 12px; margin-top:13px; padding:11px 12px; border:1px solid #b9dfca; border-radius:8px; background:#f4fbf7; }
.supplier-public-info strong { color:var(--ok); white-space:nowrap; }
.supplier-public-info span { color:var(--muted); font-size:11px; }
.supplier-public-info a { margin-left:auto; white-space:nowrap; }
.settings-card { display: grid; gap: 7px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.settings-card strong { font-size: 17px; }
.settings-card span, .settings-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.user-management { margin-top:14px; }
.user-list { display:grid; gap:7px; }
.user-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.user-row.is-disabled { background:var(--panel-soft); opacity:.72; }
.user-row-main { min-width:0; }
.user-row-title { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.user-row-title strong { overflow-wrap:anywhere; }
.user-login { margin-top:3px; color:var(--muted); font-size:10px; }
.user-role-badge { padding:3px 6px; border-radius:999px; color:var(--brand); background:var(--brand-soft); font-size:9px; font-weight:850; }
.user-self-badge,.user-disabled-badge { padding:3px 6px; border-radius:999px; font-size:9px; font-weight:850; }
.user-self-badge { color:#087963; background:#e8f8f3; }
.user-disabled-badge { color:#a02332; background:#fff0f2; }
.user-permission-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.user-permission-tags span { padding:3px 6px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:9px; }
.user-editor { width:min(680px,100%); }
.user-editor-heading { padding-right:45px; }
.user-editor-heading h2 { margin:2px 0 15px; }
.permission-editor { display:grid; gap:6px; margin:14px 0; }
.permission-editor h3 { margin:0 0 3px; font-size:14px; }
.permission-editor > label { display:grid; grid-template-columns:20px minmax(0,1fr); gap:9px; align-items:start; margin:0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--panel-soft); cursor:pointer; }
.permission-editor input,.user-active-toggle input { width:17px; height:17px; margin:1px 0 0; accent-color:var(--brand); }
.permission-editor strong,.permission-editor small { display:block; }
.permission-editor small { margin-top:2px; color:var(--muted); font-size:10px; font-weight:500; }
.user-active-toggle { display:flex; align-items:center; gap:9px; margin:2px 0 9px; }
.user-active-toggle span { font-weight:750; }

.vehicle-details-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 101;
  width: min(620px, 100%);
  height: 100dvh;
  overflow-y: auto;
  padding: 26px;
  border-left: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  pointer-events: none;
  transform: translateX(105%);
  transition: transform .22s ease, visibility 0s .22s;
}
.vehicle-details-drawer.is-open { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
.vehicle-detail-header { padding-right: 48px; }
.vehicle-detail-header h2 { margin-bottom: 7px; font-size: 24px; }
.vehicle-owner-line { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; }
.vehicle-owner-line a { color: var(--brand); font-weight: 750; text-decoration: none; }
.vehicle-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 12px; }
.vehicle-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.vehicle-metrics > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.vehicle-metrics span, .vehicle-metrics strong { display: block; }
.vehicle-metrics span { color: var(--muted); font-size: 11px; }
.vehicle-metrics strong { margin-top: 5px; font-size: 15px; overflow-wrap: anywhere; }
.vehicle-detail-section { padding: 18px 0; border-top: 1px solid var(--line); }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.detail-section-head h3 { font-size: 16px; }
.detail-section-head > span { color: var(--muted); font-size: 12px; }
.vehicle-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.vehicle-facts > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.vehicle-facts dt { color: var(--muted); font-size: 11px; }
.vehicle-facts dd { margin: 4px 0 0; font-weight: 750; overflow-wrap: anywhere; }
.recommendation-box { margin-top: 12px; padding: 12px; border-left: 3px solid var(--warning); border-radius: 0 7px 7px 0; background: #fff8e8; }
.recommendation-box span { color: var(--warning); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.recommendation-box p { margin: 5px 0 0; line-height: 1.45; }
.vehicle-timeline { display: grid; gap: 0; }
.vehicle-timeline-item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding-bottom: 18px; }
.vehicle-timeline-item:not(:last-child)::before { content: ""; position: absolute; top: 14px; bottom: 0; left: 7px; width: 1px; background: var(--line-strong); }
.timeline-marker { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 2px; border: 3px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px var(--line-strong); background: var(--brand); }
.timeline-marker.appointment-marker { background: var(--warning); }
.timeline-content { min-width: 0; padding: 0 0 2px; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.timeline-head > span { color: var(--muted); font-size: 11px; }
.timeline-content h4 { margin: 7px 0 5px; font-size: 14px; line-height: 1.35; }
.timeline-content > p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.timeline-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.drawer-form {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  width: min(450px, 100%);
  height: 100dvh;
  overflow-y: auto;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  pointer-events: none;
  transform: translateX(105%);
  transition: transform .22s ease, visibility 0s .22s;
}
.drawer-form.is-open { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
.drawer-form h2 { padding-right: 46px; }
.drawer-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font-size: 21px; }
.drawer-form .form-actions { position: sticky; bottom: -24px; z-index: 4; margin: 18px -24px -24px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
.import-mapping-form { width:min(880px,100%); }
.import-mapping-heading { display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:8px; }.import-mapping-heading h2 { margin:2px 0 0; }.import-mapping-heading > span { max-width:45%; padding:7px 10px; border-radius:6px; color:var(--muted); background:var(--panel-soft); font-size:12px; overflow-wrap:anywhere; }
.import-settings-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.import-template-bar { display:grid; grid-template-columns:minmax(180px,1fr) auto auto; gap:7px; margin:14px 0 4px; }
.import-column-map { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.import-map-row { display:grid; grid-template-columns:145px minmax(0,1fr); align-items:center; gap:8px; margin:0; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--panel-soft); }
.import-map-row > span { font-size:12px; font-weight:800; }.import-map-row select { min-width:0; }.import-map-row small { grid-column:2; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.import-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 8px; }.import-preview-head h3 { margin:0; }.import-preview-head span { color:var(--muted); font-size:12px; }
.import-preview-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.import-preview-table { width:100%; border-collapse:collapse; font-size:11px; }.import-preview-table th,.import-preview-table td { max-width:220px; padding:8px 9px; border-bottom:1px solid var(--line); overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; }.import-preview-table th { color:var(--muted); background:var(--panel-soft); }.import-preview-table tr:last-child td { border-bottom:0; }
.supplier-price-drawer { width:min(780px,100%); }
.supplier-price-heading { padding-right:48px; }
.supplier-price-heading h2 { margin:2px 0 5px; padding:0; font-size:23px; }
.supplier-price-heading > span { color:var(--muted); font-size:12px; font-weight:750; }
.supplier-price-query { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; }
.supplier-price-query label { min-width:0; margin:0; }
.supplier-price-progress { margin:15px 0 10px; }
.supplier-price-loading,.supplier-price-complete,.supplier-price-message { display:flex; align-items:center; gap:11px; min-height:58px; padding:11px 12px; border:1px solid #cfe0fb; border-radius:8px; background:var(--brand-soft); }
.supplier-price-loading i { width:22px; height:22px; flex:0 0 22px; border:3px solid #cfe0fb; border-top-color:var(--brand); border-radius:50%; animation:supplier-price-spin .8s linear infinite; }
.supplier-price-loading strong,.supplier-price-loading span,.supplier-price-complete strong,.supplier-price-complete span,.supplier-price-message strong,.supplier-price-message span { display:block; }
.supplier-price-loading span,.supplier-price-complete span,.supplier-price-message span { margin-top:3px; color:var(--muted); font-size:11px; }
.supplier-price-complete { color:var(--ok); border-color:#b9dfca; background:#edf9f2; }
.supplier-price-complete { justify-content:space-between; }
.supplier-price-complete .secondary-button { flex:0 0 auto; margin-left:auto; }
.supplier-price-message { display:grid; color:var(--ink); border-color:var(--line); background:var(--panel-soft); }
.supplier-price-browser-wait { gap:3px; }
.supplier-price-waiting-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.supplier-price-message.is-error { color:var(--danger); border-color:#f0c3c8; background:#fff4f5; }
.supplier-price-message .secondary-button { justify-self:start; margin-top:4px; }
@keyframes supplier-price-spin { to { transform:rotate(360deg); } }
.supplier-price-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.supplier-price-summary article { min-width:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.supplier-price-summary span,.supplier-price-summary strong,.supplier-price-summary small { display:block; }
.supplier-price-summary span,.supplier-price-summary small { color:var(--muted); font-size:10px; }
.supplier-price-summary strong { margin:5px 0 3px; font-size:18px; overflow-wrap:anywhere; }
.supplier-price-summary article:first-child strong { color:var(--ok); }
.supplier-price-waiting { grid-column:1/-1; padding:18px; border:1px dashed var(--line-strong); border-radius:8px; color:var(--muted); text-align:center; }
.supplier-price-selection:empty { display:none; }
.supplier-price-selection { margin-bottom:10px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.supplier-selection-main { margin-bottom:9px; }
.supplier-selection-main span,.supplier-selection-main strong,.supplier-selection-main small { display:block; }
.supplier-selection-main span,.supplier-selection-main small,.supplier-selection-note { color:var(--muted); font-size:10px; }
.supplier-selection-main strong { margin:3px 0; }
.supplier-offer-list { display:grid; gap:6px; max-height:min(480px,52dvh); overflow-y:auto; overscroll-behavior:contain; padding-right:2px; }
.supplier-offer { display:grid; grid-template-columns:60px minmax(0,1fr) 125px; gap:10px; align-items:center; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.supplier-offer.is-best { border-color:#9dd4b6; box-shadow:inset 3px 0 var(--ok); background:#f4fbf7; }
.supplier-offer-pick { display:flex; align-items:center; gap:7px; min-width:0; }
.supplier-offer-pick input { width:17px; height:17px; flex:0 0 17px; margin:0; accent-color:var(--brand); }
.supplier-offer-rank { color:var(--muted); font-size:10px; font-weight:850; }
.supplier-offer.is-best .supplier-offer-rank { color:var(--ok); }
.supplier-offer-main { min-width:0; }
.supplier-offer-main strong,.supplier-offer-main span,.supplier-offer-main small,.supplier-offer-price strong,.supplier-offer-price span { display:block; }
.supplier-offer-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.supplier-analog-badge { display:inline-block; margin-left:5px; padding:2px 5px; border-radius:999px; color:#8a5b00; background:#fff2cc; font-size:9px; font-style:normal; vertical-align:1px; }
.supplier-offer-main span,.supplier-offer-main small,.supplier-offer-price span { margin-top:3px; color:var(--muted); font-size:10px; }
.supplier-offer-price { text-align:right; }
.supplier-offer-price strong { font-size:16px; white-space:nowrap; }
.supplier-offer.is-best .supplier-offer-price strong { color:var(--ok); }
.supplier-offers-more { padding:10px; color:var(--muted); font-size:11px; text-align:center; }
.control-center-block { margin-bottom:14px; }.control-center-block .block-head h2 { margin:2px 0 0; }
.control-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.control-summary button { min-width:0; min-height:74px; border:1px solid var(--line); border-radius:8px; padding:11px 12px; color:var(--ink); background:var(--panel-soft); text-align:left; }
.control-summary button:hover { border-color:var(--brand); background:var(--brand-soft); }.control-summary span,.control-summary strong { display:block; }.control-summary span { color:var(--muted); font-size:11px; }.control-summary strong { margin-top:7px; font-size:19px; overflow-wrap:anywhere; }
.control-alert-list { display:grid; gap:7px; margin-top:10px; }.control-alert-list article { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--line); border-radius:8px; }.control-alert-list strong,.control-alert-list small { display:block; }.control-alert-list small { margin-top:3px; color:var(--muted); font-size:11px; }.control-dot { width:9px; height:9px; border-radius:50%; background:var(--warning); }.control-dot.danger { background:var(--danger); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 100; visibility: hidden; opacity: 0; background: rgba(20, 31, 49, .36); transition: opacity .2s, visibility .2s; }
body.drawer-open, body.vehicle-details-open { overflow: hidden; }
body.drawer-open .drawer-backdrop, body.vehicle-details-open .drawer-backdrop { visibility: visible; opacity: 1; }
.print-only { display: none; }

@media (max-width: 1040px) {
  .app-shell { padding: 14px; }
  .topbar { margin-left: 0; }
  .layout { grid-template-columns: 1fr; }
  .tabs { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { width: auto; flex: 0 0 auto; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-heading { display:grid; align-items:start; }.report-period-card { min-width:0; width:100%; }
  .report-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.report-columns { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  body { padding-bottom: 76px; }
  .app-shell { padding: calc(10px + env(safe-area-inset-top)) 10px 20px; }
  .auth-screen { padding:12px; }
  .auth-card { padding:20px 16px; }
  .topbar { top: 6px; min-height: 58px; margin-bottom: 10px; padding: 8px 10px; }
  .topbar-account { gap:7px; }
  .topbar-date { display:none; }
  .current-user { padding-left:0; border-left:0; }
  .current-user span { max-width:120px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  h1 { font-size: 21px; }
  .eyebrow { font-size: 10px; }
  .topbar-date { display: none; }
  .layout { display: block; }

  .tabs {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(24, 39, 63, .09);
  }
  .tabs .tab-secondary { display: none; }
  .more-tab { display: flex; }
  .tab { flex-direction: column; justify-content: center; gap: 2px; min-height: 55px; padding: 3px 2px; border-radius: 6px; font-size: 10px; text-align: center; }
  .tab-icon { width: 25px; height: 25px; flex-basis: 25px; border: 0; background: transparent; }
  .tab.is-active .tab-icon { color: var(--brand); border-color: transparent; background: transparent; }

  .tabs.is-more-open {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -20px 50px rgba(24, 39, 63, .22);
  }
  .tabs.is-more-open .tab-primary { display: none; }
  .tabs.is-more-open .tab-secondary { display: flex; flex-direction: row; justify-content: flex-start; gap: 9px; min-height: 48px; padding: 8px 10px; font-size: 13px; text-align: left; }
  .tabs.is-more-open .more-tab { grid-column: 1 / -1; flex-direction: row; min-height: 44px; font-size: 12px; }

  .content-block { padding: 12px; }
  .block-head { flex-wrap: wrap; }
  .block-head h2 { width: 100%; margin-bottom: 2px; }
  .open-form-button { flex: 1; }
  .search-input { width: 100%; order: 3; }
  .two-column, .stats-grid { grid-template-columns: 1fr; gap: 10px; }
  .inventory-heading { display: grid; align-items: start; gap: 10px; }
  .inventory-heading h2 { font-size: 21px; }
  .inventory-data-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; order: 2; }
  .inventory-data-actions .secondary-button { width: 100%; }
  .inventory-data-actions .danger-button { grid-column:1/-1; width:100%; }
  .inventory-block-head .open-form-button { width:100%; flex:none; }
  .inventory-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .inventory-tab { min-width: 0; padding-inline: 6px; }
  .inventory-summary { display: flex; gap: 8px; margin-right: -10px; margin-left: -10px; padding: 0 10px 4px; overflow-x: auto; scrollbar-width: none; }
  .inventory-summary::-webkit-scrollbar { display: none; }
  .inventory-summary article { flex: 0 0 164px; }
  .stock-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .stock-actions .market { grid-column:1/-1; }
  .supplier-price-inline { display:grid; grid-template-columns:1fr auto; }
  .supplier-price-inline small { grid-column:1/-1; margin:0; }
  .inventory-count-toolbar { grid-template-columns:1fr 1fr; }
  .inventory-count-toolbar label { grid-column:1/-1; }
  .inventory-count-row { grid-template-columns:minmax(0,1fr) 90px; }
  .inventory-count-row .inventory-book,.inventory-count-row .inventory-difference { text-align:left; }
  .product-pricing-card { padding:9px; }.product-pricing-grid { gap:5px; }.product-pricing-grid label { font-size:10px; }.product-pricing-grid input { padding-right:7px; padding-left:7px; }
  .markup-presets { grid-template-columns:repeat(5,minmax(0,1fr)); }.markup-presets > span { grid-column:1/-1; margin:0 0 1px; }
  .finance-heading { display: grid; align-items: start; gap: 10px; }
  .finance-heading h2 { font-size: 21px; }
  .finance-period-card { min-width:0; width:100%; padding:6px; }
  .finance-period-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .finance-period-button { min-height:38px; padding:6px 4px; }
  .finance-date-controls { grid-template-columns:1fr; }
  .finance-date-arrow { display:none; }
  .finance-summary { display: flex; gap: 8px; margin-right: -10px; margin-left: -10px; padding: 0 10px 4px; overflow-x: auto; scrollbar-width: none; }
  .finance-summary::-webkit-scrollbar { display: none; }
  .finance-summary article { flex: 0 0 164px; }
  .finance-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .finance-tab { justify-content: center; min-width: 0; }
  .finance-block-head .primary-button, .finance-block-head .secondary-button { flex: 1; }
  .payment-preview { grid-template-columns: 1fr; }
  .report-heading h2 { font-size:21px; }
  .report-period-card { width:100%; padding:6px; }.report-period-top { grid-template-columns:1fr; }.report-period-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }.report-period-button { min-height:38px; padding:6px 4px; }.report-export-button { width:100%; }
  .report-date-controls { grid-template-columns:1fr; }.report-date-arrow { display:none; }
  .report-summary { display:flex; gap:8px; margin-right:-10px; margin-left:-10px; padding:0 10px 5px; overflow-x:auto; scrollbar-width:none; }
  .report-summary::-webkit-scrollbar { display:none; }.report-summary article { flex:0 0 168px; }
  .report-table-wrap { margin-right:-12px; margin-left:-12px; padding:0 12px; }
  .report-table { min-width:760px; font-size:12px; }
  .report-table th,.report-table td { padding:9px 7px; }
  .report-columns { gap:10px; }
  .dashboard-debt-head > div:first-child { width: 100%; }
  .dashboard-debt-total { flex: 1; }
  .dashboard-debt-list { grid-template-columns: 1fr; }
  .dashboard-debt-card { grid-template-columns: minmax(0, 1fr); }
  .dashboard-debt-card > button { grid-column: 1; grid-row: auto; width: 100%; }

  .calendar-strip { display: flex; overflow-x: auto; gap: 7px; margin: 0 -10px 10px; padding: 0 10px 5px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .calendar-strip::-webkit-scrollbar { display: none; }
  .day-card { flex: 0 0 112px; scroll-snap-align: start; }
  .workday-head > div:first-child { width: 100%; }
  .day-controls { display: grid; grid-template-columns: 38px 1fr 38px; width: 100%; }
  .day-controls .primary-button { grid-column: 1 / -1; }
  .workday-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workday-summary > div:nth-child(2) { border-right: 0; }
  .workday-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .selected-day-block, .schedule-board, .schedule-column, .schedule-entry { min-width: 0; max-width: 100%; }
  .schedule-board { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; gap: 9px; overflow: visible; }
  .schedule-column-body { max-height: min(480px, 58dvh); }
  .schedule-entry { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
  .schedule-entry-side { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; }
  .schedule-entry-side .status-menu { justify-self: start; }
  .schedule-entry .item-actions { display: grid; grid-template-columns: minmax(0, 1fr) 34px 34px; width: 100%; }
  .schedule-entry .item-actions > button { min-width: 0; width: 100%; }
  .item { grid-template-columns: 1fr; padding: 12px; }
  .item-actions { width: 100%; justify-content: stretch; padding-top: 2px; }
  .item-actions > button { flex: 1; }
  .item-meta { display: grid; gap: 4px; }
  .item.client-card { padding: 0; }
  .client-card-top { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
  .client-card-top .item-actions { width: auto; padding-top: 0; }
  .client-card-top .item-actions > button { flex: 0 0 36px; }
  .client-avatar { flex-basis: 38px; width: 38px; height: 38px; font-size: 16px; }
  .client-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 12px; }
  .client-stat-button, .client-money-stat { min-height: 46px; }
  .client-details-panel { padding: 13px 12px; }
  .client-details-head { align-items: flex-start; }
  .client-details-head-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .client-vehicle-grid { grid-template-columns: 1fr; }
  .client-order-card { grid-template-columns: 1fr; gap: 9px; }
  .client-order-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .client-order-date strong { margin-top: 0; }
  .client-order-title { display: grid; }
  .client-order-status { justify-self: start; }
  .client-order-money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-order-money > div { display: block; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
  .client-order-money strong { display: block; margin-top: 3px; text-align: left; overflow-wrap: anywhere; }
  .client-order-actions { grid-column: 1; justify-content: stretch; margin-top: 0; }
  .client-order-actions > button { flex: 1; }
  .client-detail-empty { display: grid; padding: 14px; }
  .client-detail-empty > button { width: 100%; }
  .status-options { left: auto; right: 0; }

  .drawer-form, .vehicle-details-drawer { width: 100%; padding: calc(18px + env(safe-area-inset-top)) 14px 18px; }
  .user-row { grid-template-columns:1fr; }
  .user-row .item-actions { width:100%; }
  .user-row .item-actions button { flex:1; }
  .import-settings-row,.import-column-map,.import-template-bar { grid-template-columns:1fr; }.import-map-row { grid-template-columns:120px minmax(0,1fr); }.import-mapping-heading { display:grid; }.import-mapping-heading > span { max-width:100%; }
  .supplier-api-settings .block-head > div:first-child { width:100%; }
  .supplier-api-form { grid-template-columns:1fr; }
  .supplier-api-form button { width:100%; }
  .supplier-session-form { grid-template-columns:1fr; }
  .supplier-session-form button { width:100%; }
  .supplier-helper-setup { grid-template-columns:1fr; }
  .supplier-helper-setup .primary-button,.supplier-helper-setup button { width:100%; }
  .supplier-public-info { align-items:flex-start; flex-wrap:wrap; }
  .supplier-public-info span { flex:1 1 180px; }
  .supplier-public-info a { width:100%; margin-left:0; }
  .supplier-price-query { grid-template-columns:1fr; }
  .supplier-price-waiting-actions { display:grid; grid-template-columns:1fr; }
  .supplier-price-waiting-actions > * { width:100%; }
  .supplier-price-summary { grid-template-columns:1fr; }
  .supplier-price-selection button { width:100%; }
  .supplier-offer-list { max-height:min(470px,50dvh); }
  .supplier-offer { grid-template-columns:minmax(0,1fr) auto; gap:7px 9px; }
  .supplier-offer-pick { grid-column:1/-1; }
  .supplier-offer-main strong { white-space:normal; }
  .supplier-offer-price { align-self:start; }
  .supplier-price-complete { align-items:flex-start; flex-wrap:wrap; }
  .supplier-price-complete .secondary-button { width:100%; margin-left:0; }
  .control-summary { display:flex; gap:8px; margin-right:-10px; margin-left:-10px; padding:0 10px 4px; overflow-x:auto; }.control-summary button { flex:0 0 155px; }.control-alert-list article { grid-template-columns:10px minmax(0,1fr); }.control-alert-list article button { grid-column:2; width:100%; }
  .drawer-form { max-width: 100vw; overflow-x: hidden; }
  #orderForm.drawer-form { width: 100%; padding-right: 14px; padding-left: 14px; }
  .order-form-header { padding-bottom: 14px; }
  .order-form-header h2 { font-size: 22px; }
  .order-form-section { padding: 15px 0; }
  .order-section-heading { grid-template-columns: 28px minmax(0, 1fr); }
  .order-section-heading .secondary-button { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
  .order-form-grid { grid-template-columns: 1fr; }
  .order-line-labels { display: none; }
  .work-line-head { grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; }
  .work-line-fields { grid-template-columns: minmax(0, 1fr) 82px 58px; gap: 6px; }
  .line-row { grid-template-columns: minmax(0, 1fr) 58px 34px; gap: 6px; }
  .work-line-head .icon-button, .line-row .icon-button { min-width: 34px; min-height: 42px; }
  .order-cost-summary { gap: 6px; }
  .order-cost-summary > div { padding: 9px 8px; }
  .order-cost-summary strong { font-size: 12px; }
  .field-label-row { flex-wrap: wrap; }
  .inline-add-button { max-width: 100%; overflow-wrap: anywhere; text-align: right; }
  .drawer-close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
  .drawer-form .form-actions { bottom: -18px; margin: 16px -14px -18px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .form-actions, .inline-fields, .work-line-head, .work-line-fields, .line-row { display: grid; grid-template-columns: 1fr; }
  #orderForm.drawer-form .order-form-actions { bottom: -18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
  #orderForm .order-action-total { grid-column: 1 / -1; }
  #orderForm .work-line-head { grid-template-columns: minmax(0, 1fr) 34px; }
  #orderForm .work-line-fields { grid-template-columns: minmax(0, 1fr) 82px 58px; }
  #orderForm .line-row { grid-template-columns: minmax(0, 1fr) 58px 34px; }
  .form-actions .primary-button, .form-actions .secondary-button { width: 100%; }
  .employee-stat-row { grid-template-columns:1fr 1fr; }.employee-stat-row > div:first-child { grid-column:1/-1; }
  .payroll-heading { display:grid; align-items:start; }.payroll-heading label { width:100%; }
  .payroll-summary { display:flex; gap:8px; margin-right:-10px; margin-left:-10px; padding:0 10px 4px; overflow-x:auto; scrollbar-width:none; }
  .payroll-summary::-webkit-scrollbar { display:none; }.payroll-summary article { flex:0 0 165px; }
  .payroll-person { align-items:flex-start; }.payroll-person .primary-button { flex:0 0 auto; }
  .payroll-card-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .payroll-card-stats > div { border-bottom:1px solid var(--line); }.payroll-card-stats > div:nth-child(2n) { border-right:0; }.payroll-card-stats > div:last-child { grid-column:1/-1; border-bottom:0; }
  .payroll-payment-preview { grid-template-columns:1fr; }.payroll-payment-preview > small { grid-column:1; }
  .vehicle-quick-actions { grid-template-columns: 1fr; }
  .vehicle-facts { grid-template-columns: 1fr; }
  .vehicle-details-drawer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  input,select,textarea,button { font-size:16px; }
  .compact,.tab,.finance-tab,.inventory-tab,.icon-button,.finance-period-button,.markup-presets button { font-size:12px; }
}