:root {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #233044;
  background: #f3f5f8;
  font-synthesis: none;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #75a9f9; outline-offset: 3px; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 48px;
  height: 72px;
  padding: 0 32px;
  background: #172439;
  color: white;
  overflow: visible;
}
.brand {
  flex-shrink: 0;
  color: white;
  text-decoration: none;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: .5px;
}
.brand span { color: #a5b8d3; font-weight: 400; }
nav { display: flex; align-self: stretch; gap: 8px; }
nav button {
  padding: 0 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #c7d2e3;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
nav button:hover { background: #22334c; color: white; }
nav button[aria-current="page"] {
  color: white;
  background: #22334c;
  border-bottom-color: #73a7ff;
}
main { padding: 28px 32px 32px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.5px; }
.add-button { padding: 11px 18px; border-radius: 6px; border: 1px solid #bccbde; background: #e3ebf6; color: #516985; font-weight: 600; font-size: 14px; }
.add-button:disabled { cursor: not-allowed; }
.workspace { border: 1px solid #dbe1e9; border-radius: 8px; background: white; overflow: hidden; box-shadow: 0 2px 4px #18253a04; }
.table-scroll { overflow: auto; height: calc(100vh - 304px); min-height: 300px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; text-align: left; }
th { position: sticky; top: 0; z-index: 1; padding: 16px; background: #f8fafc; color: #536174; font-size: 12px; font-weight: 600; white-space: nowrap; border-bottom: 1px solid #dbe1e9; }
td { padding: 13px 16px; border-bottom: 1px solid #e9edf2; vertical-align: top; white-space: nowrap; max-width: 300px; line-height: 1.5; }
td:first-child { font-weight: 600; }
tbody tr:hover { background: #f7faff; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.empty-state { position: sticky; left: 0; padding: 95px 24px; text-align: center; color: #7a8697; font-size: 14px; }
.empty-state strong { display: block; margin-bottom: 8px; color: #536174; font-size: 16px; font-weight: 600; }
.empty-state.is-error { color: #9d3333; }
.table-footer { display: flex; align-items: end; gap: 20px; flex-wrap: wrap; padding: 18px 20px; border-top: 1px solid #dbe1e9; background: #fcfdfe; }
.filter-field { display: grid; gap: 7px; }
.filter-field label { font-size: 12px; font-weight: 600; color: #536174; }
.search-field { width: 330px; max-width: 100%; }
input, select { border: 1px solid #cbd4e0; border-radius: 5px; background: white; color: #233044; padding: 10px 12px; min-height: 40px; font-size: 13px; }
input::placeholder { color: #7a8697; }
select { min-width: 200px; }
.unit-note { margin: 0 0 11px auto; font-size: 13px; color: #647287; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cell-text { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button { border: 1px solid #cbd4e0; border-radius: 5px; padding: 9px 12px; background: white; color: #233044; }
button:hover { background: #edf3fc; }
button:disabled { cursor: not-allowed; opacity: .55; }
.primary { color: white; background: #285eab; border-color: #285eab; }
.primary:hover { background: #1d4a89; }
.toolbar, #stock-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-menu { position: relative; display: flex; }
.nav-options { position: absolute; top: 100%; right: 0; min-width: 210px; background: #22334c; padding: 6px; border-radius: 0 0 6px 6px; box-shadow: 0 5px 15px #0003; z-index: 10; }
.nav-options button { display: block; width: 100%; text-align: left; padding: 12px; }
nav button.active { color: white; background: #22334c; border-bottom-color: #73a7ff; }
tbody tr[tabindex] { cursor: pointer; }
.selected { background: #dbeaff !important; outline: 1px solid #7ba6df; }
.status-0 { background: #eaf3ff; }
.status-1 { background: #fff7dc; }
.status-2 { background: #ffebd8; }
.status-3 { background: #f2e9fb; }
.status-4 { background: #e2f5e8; }
.status-5 { background: #e8edf1; color: #536174; }
.status-6 { background: #f9e5e5; }
.overdue td:first-child { border-left: 5px solid #bf2222; color: #a01818; font-weight: 750; }
.overdue td:nth-child(7) { color: #a01818; font-weight: 700; }
tr[class*="status-"]:hover { filter: brightness(.97); }
dialog { width: min(780px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid #cbd4e0; border-radius: 10px; color: #233044; box-shadow: 0 20px 80px #0b17294d; }
dialog.wide-card { width: min(1250px, calc(100vw - 48px)); }
dialog.new-vehicle-card { width: min(740px, calc(100vw - 32px)); }
.new-vehicle-card .card-content { padding: 16px 20px; }
.new-vehicle-card .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; align-items: start; }
.new-vehicle-card .form-field { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 6px 10px; margin: 0; }
.new-vehicle-card .form-field:has([name="owner"]) { grid-area: 1 / 1; }
.new-vehicle-card .form-field:has([name="manufacturer"]) { grid-area: 2 / 1; }
.new-vehicle-card .form-field:has([name="model"]) { grid-area: 3 / 1; }
.new-vehicle-card .form-field:has([name="vin"]) { grid-area: 4 / 1; }
.new-vehicle-card .form-field:has([name="registration"]) { grid-area: 5 / 1; }
.new-vehicle-card .form-field:has([name="manufacture_month"]) { grid-area: 1 / 2; }
.new-vehicle-card .form-field:has([name="engine_volume"]) { grid-area: 2 / 2; }
.new-vehicle-card .form-field:has([name="fuel_type"]) { grid-area: 3 / 2; }
.new-vehicle-card .form-field:has([name="engine_code"]) { grid-area: 4 / 2; }
.new-vehicle-card .form-field:has([name="power"]) { grid-area: 5 / 2; }
.new-vehicle-card .form-field:has([name="inspection_valid_until"]) { grid-area: 6 / 2; }
.new-vehicle-card .form-field input, .new-vehicle-card .form-field select { width: 100%; max-width: 100%; min-height: 34px; padding: 6px 8px; }
.new-vehicle-card .form-field input[name="vin"] { font-family: Consolas, monospace; width: calc(17ch + 20px); }
.new-vehicle-card .form-field input[name="registration"], .new-vehicle-card .form-field input[name="engine_code"] { width: 120px; }
.new-vehicle-card .form-field input[name="manufacture_month"], .new-vehicle-card .form-field input[name="engine_volume"], .new-vehicle-card .form-field input[name="power"] { width: 90px; }
.new-vehicle-card .form-field input[name="inspection_valid_until"] { width: 145px; }
.new-vehicle-card .form-field button { grid-column: 2; justify-self: start; padding: 6px 10px; }
.new-vehicle-card .form-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.new-vehicle-card input[type="number"]::-webkit-inner-spin-button, .new-vehicle-card input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.new-vehicle-card .form-field.full-width { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
.new-vehicle-card textarea { width: 100%; min-height: 58px; }
@media (max-width: 700px) {
  .new-vehicle-card .form-grid { grid-template-columns: minmax(0, 1fr); }
  .new-vehicle-card .form-grid > .form-field { grid-area: auto; }
  .new-vehicle-card .form-field input, .new-vehicle-card .form-field select { max-width: 205px; }
}
@media (max-width: 380px) { .new-vehicle-card .form-field { grid-template-columns: 90px minmax(0, 1fr); } }
dialog.new-order-card { width: min(570px, calc(100vw - 32px)); }
.new-order-card .card-content { padding: 16px 20px; }
.new-order-card .form-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.new-order-card .form-field { display: grid; grid-template-columns: 185px minmax(0, 1fr); align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.new-order-card .form-grid .form-field { margin-bottom: 0; }
.new-order-card .form-field input, .new-order-card .form-field select { width: 160px; max-width: 100%; min-height: 34px; padding: 6px 8px; }
.new-order-card .form-field input[name="vehicle_label"], .new-order-card .form-field textarea { width: 100%; }
.new-order-card .form-field button { grid-column: 2; justify-self: start; padding: 6px 10px; }
.new-order-card .form-field input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; }
.new-order-card .form-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.new-order-card input[type="number"]::-webkit-inner-spin-button, .new-order-card input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.new-order-card fieldset { min-width: 0; margin: 12px 0 16px; padding: 12px 0; border-width: 1px 0; border-radius: 0; }
.new-order-card textarea { min-height: 64px; }
@media (max-width: 520px) { .new-order-card .form-field { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
dialog::backdrop { background: #17243959; }
.card-header, .card-footer { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: #f8fafc; }
.card-header { justify-content: space-between; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid #dbe1e9; }
.card-header h2 { margin: 0; font-size: 20px; }
.card-footer { justify-content: flex-end; position: sticky; bottom: 0; border-top: 1px solid #dbe1e9; z-index: 2; }
.card-content { padding: 24px; }
.card-error { margin: 12px 24px; padding: 12px; border: 1px solid #dfb2b2; border-radius: 5px; background: #fff1f1; color: #9c2323; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.form-field label { color: #536174; font-size: 12px; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; }
.form-field input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; }
.form-field input[readonly], .form-field textarea[readonly] { background: #f3f5f8; }
.price-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.price-block { min-width: 0; border: 1px solid #dbe1e9; border-radius: 6px; padding: 16px; }
.price-block h3 { margin: 0 0 18px; }
@media (max-width: 760px) { .price-blocks { grid-template-columns: 1fr; } }
.supplier-suggestions { max-height: 220px; overflow-y: auto; border: 1px solid #cbd4e0; border-radius: 5px; }
.supplier-suggestions button { display: block; width: 100%; height: auto; white-space: normal; text-align: left; border: 0; border-radius: 0; }
.supplier-suggestions button[aria-selected="true"] { background: #e5edf8; }
textarea { font: inherit; border: 1px solid #cbd4e0; border-radius: 5px; padding: 10px 12px; resize: vertical; min-height: 80px; font-size: 14px; }
.full-width { grid-column: 1 / -1; }
h3 { margin: 24px 0 14px; font-size: 16px; }
.help-text { font-size: 13px; color: #617188; line-height: 1.6; }
fieldset { border: 1px solid #dbe1e9; border-radius: 6px; padding: 16px; margin: 20px 0; }
legend { font-size: 14px; font-weight: 600; padding: 0 6px; }
.embedded-table { overflow: auto; max-height: 380px; border: 1px solid #dbe1e9; border-radius: 5px; margin: 12px 0; }
.embedded-table td, .embedded-table th { padding: 10px 12px; }
.embedded-table .cell-text { max-width: 250px; }
.management-row { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #dbe1e9; }
.management-row span { flex: 1; }
.jobs-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
.job-list { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid #dbe1e9; padding-right: 12px; }
.job-list button { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-detail { min-width: 0; }
.job-group { background: #edf2f8; font-weight: 600; }
.job-group td { white-space: normal; overflow-wrap: anywhere; }
.photo-gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.photo-gallery img { width: 130px; height: 100px; object-fit: cover; border: 1px solid #cbd4e0; border-radius: 5px; }
summary { cursor: pointer; padding: 16px 0; font-weight: 600; }
@media (max-width: 1100px) { .app-header { gap: 16px; padding: 0 16px; } nav { gap: 0; } nav button { padding: 0 12px; } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .app-header { flex-wrap: wrap; height: auto; padding-top: 12px; } nav { min-height: 56px; flex-wrap: wrap; } .section-heading { align-items: flex-start; flex-direction: column; } .form-grid { grid-template-columns: 1fr; } .jobs-layout { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .app-header { padding: 0 16px; gap: 24px; }
  nav button { padding: 0 14px; }
  main { padding: 24px 16px; }
}
 .import-row { margin: 1rem 0; padding: 1rem; border: 1px solid #ccd3dc; border-radius: 8px; min-width: 0; }
 .import-row legend { font-weight: 600; padding: 0 .4rem; }

.registry-details pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; margin:6px 0 16px; }
.registry-details { padding:12px 0; }
.registry-details details { margin:16px 0; }

.calculation-job { border:1px solid #d4dbe3; border-radius:6px; padding:16px; margin:16px 0; overflow-x:auto; }
.calculation-job table { min-width:760px; }
.quantity-input { appearance: textfield; -moz-appearance: textfield; }
.quantity-input::-webkit-inner-spin-button, .quantity-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-arrows { display: inline-flex; gap: 4px; margin-top: 4px; }
.quantity-arrows button { padding: 2px 12px; }
 .return-warning { color: #8a4600; background: #fff2d5; padding: 10px; border-left: 4px solid #bc7300; }
 .return-summary .cell-text { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: none; }