/*
 * Canonical visual layer for Warehouse Magadan.
 * Loaded after every feature stylesheet. New UI must use these tokens and
 * component rules instead of adding another one-off colour or control size.
 */
:root {
  color-scheme: light;
  --muted-2: #59656d;
  --ds-content-width: 1600px;
  /* Runtime geometry of the host viewport, inherited by embedded modals only. */
  --ds-form-visible-top: 0px;
  --ds-form-visible-height: 100dvh;
  /* Seasonal illustration tokens: no semantic status or business colour changes. */
  --ds-holiday-gold: #dbad57;
  --ds-holiday-coral: #dc826b;
  --ds-holiday-ice: #dcecf0;
  --ds-holiday-evergreen: #589486;
  --ds-holiday-header-height: 32px;
  --ds-holiday-day-width: 96px;
  --ds-holiday-month-width: 176px;
  --ds-holiday-burst-radius: 56px;
  --ds-holiday-scene-width: 320px;
  --ds-holiday-scene-height: 160px;
  --ds-holiday-night: #18374b;
  --ds-holiday-frost: #91becb;
  --ds-holiday-spark-opacity: .95;
  --ds-holiday-viewport-burst-radius: clamp(72px, 14vmin, 180px);
  --ds-holiday-frost-size: clamp(96px, 22vmin, 240px);
  --ds-holiday-overlay-z: 30;
  --ds-holiday-snow-cap-height: 10px;
  --ds-holiday-snow-cap-duration: 40s;
  --ds-document-record-columns: minmax(0, 1.7fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.2fr);
  --ds-monthly-trip-field-min-width: 120px;
  --ds-card-min-width: 560px;
  --ds-card-compact-min-width: 320px;
  --ds-card-form-min-width: 480px;
  --ds-card-account-min-width: 720px;
  --ds-card-wide-min-width: 720px;
  --ds-card-ledger-min-width: 880px;
  --ds-card-copy-min-width: 240px;
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-auto: auto;
  --ds-gap-caption: var(--ds-space-1);
  --ds-gap-control: var(--ds-space-2);
  --ds-gap-block: var(--ds-space-4);
  --ds-gap-section: var(--ds-space-5);
  --ds-surface-padding: var(--ds-space-4);
  --ds-button-padding-block: 7px;
  --ds-button-padding-inline: 14px;
  --ds-control-padding-block: var(--ds-space-2);
  --ds-control-padding-inline: 10px;
  --ds-textarea-padding-block: 9px;
  --ds-textarea-padding-inline: 10px;
  --ds-table-cell-padding-block: 9px;
  --ds-table-cell-padding-inline: 10px;
  --ds-table-heading-padding-block: 10px;
  --ds-table-heading-padding-inline: 10px;
  --ds-attendance-day-width: calc(4em + var(--ds-space-4));
  --ds-attendance-employee-width: 12rem;
  --ds-calendar-month-min-width: var(--ds-card-copy-min-width);
  --ds-calendar-quarter-min-width: calc(3 * var(--ds-calendar-month-min-width) + 2 * var(--ds-gap-block) + 2 * var(--ds-surface-padding) + 2 * var(--ds-border-width));
  --ds-status-padding-block: 3px;
  --ds-status-padding-inline: 7px;
  --ds-dialog-header-padding: var(--ds-space-1) var(--ds-space-0) var(--ds-space-3);
  --ds-dialog-footer-padding: var(--ds-space-3) var(--ds-space-0) var(--ds-space-1);
  --ds-dialog-header-margin: calc(-1 * var(--ds-space-1)) var(--ds-space-0) var(--ds-gap-block);
  --ds-control-height: 42px;
  --ds-button-height: 34px;
  /* Compact document-entry matrix: keep full legal numeric precision visible. */
  --ds-input-matrix-date-width: 16ch;
  --ds-input-matrix-vehicle-width: 28ch;
  --ds-input-matrix-choice-control-width: 20ch;
  --ds-input-matrix-custom-width: 24ch;
  --ds-input-matrix-liters-width: 14ch;
  --ds-input-matrix-money-width: 20ch;
  --ds-input-matrix-action-width: 20ch;
  --ds-compact-height: 28px;
  --ds-compact-control-size: var(--ds-space-6);
  --ds-icon-button-size: 36px;
  --ds-touch-height: 44px;
  --ds-choice-control-size: var(--ds-space-4);
  --ds-radius-none: 0;
  --ds-radius-control: 8px;
  --ds-radius-compact: 6px;
  --ds-radius-surface: 12px;
  --ds-radius-pill: 999px;
  --ds-focus-width: 2px;
  --ds-font-family-body: Inter, system-ui, sans-serif;
  --ds-font-family-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --ds-font-size-meta: 10px;
  --ds-font-size-caption: 11px;
  --ds-font-size-body: 13px;
  --ds-font-size-heading-block: 16px;
  --ds-font-size-heading-section: 20px;
  --ds-font-size-heading-page: 24px;
  --ds-font-weight-normal: 400;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;
  --ds-font-weight-strong: 800;
  --ds-line-height-tight: 1;
  --ds-line-height-compact: 1.25;
  --ds-line-height-body: 1.45;
  --ds-line-height-relaxed: 1.6;
  --ds-letter-spacing-normal: 0;
  --ds-letter-spacing-compact: .04em;
  --ds-letter-spacing-label: .08em;
  --ds-letter-spacing-eyebrow: .12em;
  --ds-letter-spacing-display: .16em;
  --ds-text-transform-normal: none;
  --ds-text-transform-label: uppercase;
  --ds-text: var(--ink);
  --ds-text-muted: var(--muted-2);
  --ds-surface: var(--panel);
  --ds-surface-subtle: var(--paper);
  --ds-surface-muted: color-mix(in srgb, var(--ds-surface) 82%, var(--ds-border));
  --ds-document-paper: #fff;
  --ds-border: var(--line);
  --ds-color-transparent: transparent;
  --ds-color-on-accent: #fff;
  --ds-border-width: 1px;
  --ds-border-default: var(--ds-border-width) solid var(--line);
  --ds-border-transparent: 1px solid transparent;
  --ds-shadow-dialog-header: 0 9px 14px -16px rgba(0, 0, 0, .85);
  --ds-shadow-dialog-footer: 0 -9px 14px -16px rgba(0, 0, 0, .85);
  --ds-shadow-notice: 0 14px 36px rgba(0, 0, 0, .28);
  --ds-shadow-none: none;
  --ds-motion-fast: 160ms;
  --ds-loading-overlay: color-mix(in srgb, var(--ink) 58%, var(--ds-color-transparent));
  --ds-loading-panel-width: 420px;
  --ds-loading-visual-size: 160px;
  --ds-attachment-preview-size: 160px;
  --ds-equipment-selection-list-height: 160px;
  --ds-loading-box-size: var(--ds-space-5);
  --ds-loading-line-size: 2px;
  --ds-loading-scene-height: 132px;
  --ds-loading-motion-cycle: 1800ms;
  --ds-loading-motion-document: 1500ms;
  --ds-loading-motion-worker: 900ms;
  --ds-loading-panel-shadow: 0 24px 72px rgba(0, 0, 0, .34);
  --ds-info: #2f657d;
  --ds-info-bg: #eaf3f7;
  --ds-success: #216437;
  --ds-success-bg: #edf8f0;
  --ds-warning: #8f4b18;
  --ds-warning-bg: #fff3e7;
  --ds-danger: #9c3029;
  --ds-danger-bg: #fff0ee;
  --ds-disabled-opacity: .55;
  --ds-accent-text: #a94420;
  --ds-primary-bg: #c85125;
  --ds-primary-hover: #b8461f;
  --ds-primary-text: #fff;
  --ds-danger-button-border: #842c26;
  --ds-danger-button-bg: #a83b32;
  --ds-danger-button-hover: #8f3029;
  --ds-required: #c7362f;
  --ds-thumbnail-bg: #26343a;
  --ds-record-link: #17556a;
  --ds-record-link-hover: #a94420;
  --ds-notice-bg: #27343e;
  --ds-notice-text: #fff;
  --ds-notice-button-bg: #344650;
  --ds-notice-max-width: 520px;
  --ds-document-asset-dialog-width: 920px;
  --ds-document-asset-preview-height: clamp(288px, 42vh, 512px);
  --ds-document-asset-preview-mobile-height: clamp(224px, 34vh, 320px);
  --ds-brand-logo-preview-size: calc(var(--ds-space-6) * 2 + var(--ds-space-2));
  --ds-brand-favicon-preview-size: calc(var(--ds-space-6) + var(--ds-space-5));
  --ds-brand-logo-image-size: calc(var(--ds-space-6) + var(--ds-space-5));
  --ds-brand-favicon-image-size: var(--ds-icon-button-size);
  --ds-registry-actions-width: calc(var(--ds-space-6) * 7);
  --ds-object-activity-filter-min-width: 220px;
  --ds-account-filter-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto;
  --ds-account-summary-columns: var(--ds-icon-button-size) minmax(0, 1fr) minmax(0, .4fr) calc(var(--ds-space-6) * 4) var(--ds-space-4);
  --ds-permission-columns: minmax(0, 1fr) auto auto;
  --ds-permission-list-height: 320px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --muted-2: #a8b6bc;
  --ds-info: #91c8df;
  --ds-info-bg: #18303a;
  --ds-success: #88d5a4;
  --ds-success-bg: #173025;
  --ds-warning: #f1bc84;
  --ds-warning-bg: #3b291e;
  --ds-danger: #ffaaa2;
  --ds-danger-bg: #3a2221;
  --ds-accent-text: #ffad88;
  --ds-required: #ff7f70;
  --ds-record-link: #91c8df;
  --ds-record-link-hover: #ffad88;
}

html { background: var(--paper); color: var(--ink); scrollbar-gutter: stable; }

/* Expandable account directory: the same column and width in both states. */
.ds-account-directory { display: grid; gap: var(--ds-gap-block); min-width: 0; }
.ds-account-directory.ds-surface { border: 0; border-radius: 0; background: var(--ds-color-transparent); }
.ds-account-create { padding: var(--ds-surface-padding); }
.ds-account-create > summary { cursor: pointer; font-weight: var(--ds-font-weight-bold); }
.ds-account-create > form { margin-top: var(--ds-gap-block); }
.ds-account-create > form > button { justify-self: start; }
#user-password-form[hidden],
.ds-record-accordion-panel[hidden],
.ds-account-error[hidden],
#user-directory-pagination[hidden] { display: none !important; }
.ds-account-tools, .ds-account-counters, .ds-account-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-gap-block);
}
.ds-account-tools { justify-content: space-between; }
.ds-account-counters { font-size: var(--ds-font-size-caption); }
.ds-account-counters strong { font-size: var(--ds-font-size-body); margin-right: var(--ds-gap-caption); }
.ds-account-filters { display: grid; grid-template-columns: var(--ds-account-filter-columns); gap: var(--ds-gap-control); align-items: end; padding: var(--ds-surface-padding); }
.ds-account-filters > label, .ds-account-section > label, .ds-account-columns > label {
  display: grid; gap: var(--ds-gap-control); min-width: 0; margin: 0;
}
.ds-account-filters > button { min-height: var(--ds-control-height); }
#user-directory-message:empty { display: none; }
.ds-record-accordion-list { display: grid; gap: var(--ds-gap-control); min-width: 0; }
.ds-record-accordion { border: var(--ds-border-default); border-radius: var(--ds-radius-control); background: var(--ds-surface); min-width: 0; overflow: clip; container: ds-record / inline-size; }
.ds-record-accordion:has([aria-expanded="true"]) { border-color: var(--ds-accent-text); }
.ds-record-accordion-heading { margin: 0; font: inherit; }
.ds-record-accordion-toggle {
  display: grid; grid-template-columns: var(--ds-account-summary-columns); gap: var(--ds-gap-block); align-items: center;
  width: 100%; height: auto; min-height: var(--ds-touch-height); padding: var(--ds-space-3) var(--ds-space-4);
  border: 0; border-radius: 0; background: var(--ds-color-transparent); color: var(--ds-text); text-align: left;
  font-size: var(--ds-font-size-body); font-weight: var(--ds-font-weight-normal); white-space: normal;
}
.ds-record-accordion-toggle:hover { background: var(--ds-surface-subtle); color: var(--ds-text); }
.ds-record-accordion-toggle:focus-visible { outline-offset: calc(-1 * var(--ds-focus-width)); }
.ds-record-avatar { display: grid; place-items: center; width: var(--ds-icon-button-size); height: var(--ds-icon-button-size); border-radius: var(--ds-radius-control); color: var(--ds-accent-text); background: var(--ds-warning-bg); font-weight: var(--ds-font-weight-bold); }
.ds-record-identity { display: grid; gap: var(--ds-gap-caption); min-width: 0; }
.ds-record-identity strong { overflow-wrap: anywhere; }
.ds-record-identity small, .ds-record-role { color: var(--ds-text-muted); font-size: var(--ds-font-size-caption); overflow-wrap: anywhere; }
.ds-record-expander { justify-self: end; color: var(--ds-text-muted); }
.ds-record-accordion-toggle > .ds-status { justify-self: start; }
.ds-record-accordion-panel { padding: var(--ds-surface-padding); border-top: var(--ds-border-default); }
.ds-account-editor, .ds-account-section { display: grid; gap: var(--ds-gap-block); min-width: 0; }
.ds-account-section { align-content: start; }
.ds-account-section h4 { margin: 0; font-size: var(--ds-font-size-body); }
.ds-account-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-gap-section); }
.ds-account-section .ds-account-columns { gap: var(--ds-gap-control); }
.ds-account-editor input, .ds-account-editor select { max-width: 100%; min-width: 0; }
.ds-account-section > button { justify-self: start; }
.ds-account-section > .check, .ds-permission-row > .check { display: flex; align-items: center; gap: var(--ds-gap-control); min-height: var(--ds-control-height); margin: 0; }
.ds-account-section > .check > input, .ds-permission-row > .check > input {
  flex: 0 0 var(--ds-choice-control-size); width: var(--ds-choice-control-size); height: var(--ds-choice-control-size); min-height: 0; padding: 0; margin: 0;
}
.ds-permission-group { min-width: 0; margin: 0; padding: var(--ds-space-3); border: var(--ds-border-default); border-radius: var(--ds-radius-control); }
.ds-permission-group legend { padding-inline: var(--ds-gap-caption); font-weight: var(--ds-font-weight-bold); }
.ds-permission-row { display: grid; grid-template-columns: var(--ds-permission-columns); gap: var(--ds-gap-control); align-items: center; border-bottom: var(--ds-border-default); }
.ds-permission-row:last-child { border-bottom: 0; }
.ds-permission-row > span { overflow-wrap: anywhere; }
.ds-permission-row > .check { font-size: var(--ds-font-size-caption); }
.ds-permission-category-list { max-height: var(--ds-permission-list-height); overflow: auto; }
.ds-record-categories > summary { cursor: pointer; min-height: var(--ds-control-height); align-content: center; font-weight: var(--ds-font-weight-bold); }
.ds-account-footer { border-top: var(--ds-border-default); padding-top: var(--ds-gap-block); }
.ds-account-footer > small { flex: 1 1 0; }
.ds-account-footer > .compact-actions { margin-left: auto; }
.ds-account-error { color: var(--ds-danger); margin: 0; padding: var(--ds-space-3); background: var(--ds-danger-bg); border-radius: var(--ds-radius-control); }
@media(max-width: 760px) {
  .ds-account-filters { grid-template-columns: minmax(0, 1fr); }
}
body { min-width: 0; overflow-x: hidden; text-rendering: optimizeLegibility; }

/* One shared horizontal grid for the header, navigation and page body. */
.site-header-inner { width: min(var(--ds-content-width), 100%); }
.tabs {
  padding-left: max(24px, calc((100vw - var(--ds-content-width)) / 2));
  padding-right: max(24px, calc((100vw - var(--ds-content-width)) / 2));
}
.tab { width: min(var(--ds-content-width), calc(100% - 48px)); }

/* A server-backed profile preference may expand the shared page grid. */
@media (min-width: 761px) {
  :root[data-layout-width="wide"] {
    --ds-content-width: 100vw;
    --content-width: 100vw;
  }
  :root[data-layout-width="wide"] .site-header {
    padding-right: var(--ds-space-2);
    padding-left: var(--ds-space-2);
  }
  /* Themes sets the preferred standard width inline. Expand the header itself
     without overriding or discarding that per-user preference. */
  :root[data-layout-width="wide"] .site-header-inner { width: 100%; }
  :root[data-layout-width="wide"] .tabs {
    padding-right: var(--ds-space-2);
    padding-left: var(--ds-space-2);
  }
  :root[data-layout-width="wide"] .tab {
    width: calc(100% - (2 * var(--ds-space-2)));
    max-width: none;
  }
}

/* Typography hierarchy. Feature screens can vary weight, not meaning. */
label { color: var(--ink); }
.field-hint,
label > small,
.muted { color: var(--muted-2); line-height: 1.4; }
.field-hint,
label > small { font-size: 10px; font-weight: 400; }
.eyebrow { color: var(--ds-accent-text); }

/*
 * Canonical vertical rhythm. The object card is the reference component:
 * 4 px inside a title/caption pair, 8 px between adjacent controls,
 * 16 px inside a block and 24 px between independent sections.
 */
:is(.section-heading, .dialog-heading, .objects-heading, .operations-head) {
  gap: var(--ds-gap-block);
}
:is(.section-heading, .dialog-heading) > div:first-child {
  display: grid;
  gap: var(--ds-gap-caption);
  min-width: 0;
}
:is(.section-heading, .dialog-heading, .objects-heading, .operations-head) :is(h1, h2, h3, p) {
  margin: 0;
}
.section-heading { margin: 0 0 var(--ds-gap-block); }
:is(.card, .tab, dialog, .object-detail-section) .section-heading { margin-bottom: var(--ds-gap-block); }
:is(.objects-heading, .operations-head) { margin-bottom: var(--ds-gap-block); }
.object-profile-grid { gap: var(--ds-gap-block); }
#object-form { gap: var(--ds-gap-block); }
.object-detail-section,
#object-shared-section {
  margin-top: var(--ds-gap-section);
  padding-top: var(--ds-gap-block);
  border-top: 1px solid var(--line);
}
.object-detail-section > .section-heading,
#object-shared-section > .section-heading { margin-bottom: var(--ds-gap-block); }

/* Standard controls. Dense tables use the compact rules below. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
select {
  min-height: var(--ds-control-height);
  padding: 8px 10px;
  border-color: var(--line);
  border-radius: var(--ds-radius-control);
  background: var(--panel);
  color: var(--ink);
  line-height: 1.25;
}
textarea {
  min-height: 84px;
  padding: 9px 10px;
  border-color: var(--line);
  border-radius: var(--ds-radius-control);
  background: var(--panel);
  color: var(--ink);
  line-height: 1.4;
}

.ds-toolbar input:is([type="checkbox"], [type="radio"]) {
  flex: 0 0 var(--ds-choice-control-size);
  width: var(--ds-choice-control-size);
  min-width: var(--ds-choice-control-size);
  height: var(--ds-choice-control-size);
  min-height: var(--ds-choice-control-size);
  padding: 0;
  margin: 0;
}
.ds-toolbar .check { min-height: var(--ds-control-height); gap: var(--ds-gap-control); }
input::placeholder,
textarea::placeholder { color: var(--muted-2); opacity: .88; }

button,
.button-link,
a.secondary {
  min-height: var(--ds-button-height);
  border-radius: var(--ds-radius-control);
  font-size: 11px;
  line-height: 1.2;
}
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--ds-button-padding-block) var(--ds-button-padding-inline);
  font-weight: var(--ds-font-weight-semibold);
  text-decoration: none;
}
.compact-button {
  min-height: var(--ds-compact-height);
  padding: var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-compact);
  font-size: var(--ds-font-size-caption);
  line-height: var(--ds-line-height-tight);
}
button { border-color: var(--ds-primary-bg); background: var(--ds-primary-bg); color: var(--ds-primary-text); }
button:hover { background: var(--ds-primary-hover); }
button:not(.icon-button):not(.table-sort-button):not(.table-sort-label):not(.category-heading-button):not(.category-width-button):not(.category-toggle):not(.category-edit):not(.category-branch-toggle):not(.category-order-controls button):not(.ds-record-accordion-toggle):not(.stock-alert-link) {
  padding: 7px 12px;
}
button.secondary,
.ghost,
a.secondary {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel) 70%, var(--line));
  color: var(--ink);
}
[data-theme="dark"] :is(button.secondary, .ghost, a.secondary) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel) 70%, var(--line));
  color: var(--ink);
}
button.secondary:hover,
.ghost:hover,
a.secondary:hover { border-color: var(--accent); background: color-mix(in srgb, var(--panel) 86%, var(--accent)); }
a.secondary.compact-button {
  min-height: var(--ds-compact-height);
  border-radius: var(--ds-radius-compact);
}
.danger-button { border-color: #842c26; background: #a83b32; color: #fff; }
.danger-button:hover { background: #8f3029; }
.registry-tab.active,
.map-layer-button.active { border-color: var(--ds-primary-bg); background: var(--ds-primary-bg); color: var(--ds-primary-text); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ds-focus-width) solid var(--accent);
  outline-offset: 2px;
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] { opacity: var(--ds-disabled-opacity); cursor: not-allowed; filter: none; }

/* File controls look like the rest of the action system in both themes. */
input[type="file"] { min-height: var(--ds-control-height); padding: 4px; }
input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 9px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-control);
  background: color-mix(in srgb, var(--panel) 70%, var(--line));
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--panel) 86%, var(--accent)); }

/* A label grid reserves two caption lines, so controls in one row start level. */
:is(
  .form-grid,
  .details-edit-grid,
  .object-fields,
  .registry-fields,
  .report-step-grid,
  .transfer-act-grid,
  .power-attorney-grid,
  .profile-document-fields,
  .vehicle-fields-grid,
  .vehicle-details-grid,
  .vehicle-record-grid,
  .vehicle-maintenance-grid,
  .vehicle-part-form-grid,
  .vehicle-part-transaction-grid,
  .admin-form-grid,
  .admin-navigation-fields
) > label:not(.check):has(> input, > select, > textarea) {
  display: grid;
  grid-template-rows: minmax(2.7em, auto) auto auto;
  align-content: start;
  gap: 5px;
  min-width: 0;
  margin: 0;
  font-size: 11px;
}
.field-label-caption { align-items: baseline; min-width: 0; }
.required-marker { color: #c7362f !important; }
[data-theme="dark"] .required-marker { color: #ff7f70 !important; }

/* Dense, data-first contexts deliberately use one compact tier. */
:is(.equipment-table, .reconcile-table, .batch-edit-table, .receipt-lines-table) :is(input, select, button:not(.table-sort-button)) {
  min-height: var(--ds-compact-height);
  padding: 4px 6px;
  border-radius: var(--ds-radius-compact);
  font-size: 10px;
}
button:is(.model-list-photo, .photo-thumb) {
  padding: var(--ds-space-0) !important;
}
.table-sort-button { width: 22px; height: 22px; min-height: 22px; border-radius: 5px; color: var(--muted-2); }
.column-drag-mark,
.category-count,
.category-icon-fallback { color: var(--muted-2); }
.category-heading-button,
.category-width-button,
.category-edit,
.category-branch-toggle { width: 28px; height: 28px; min-height: 28px; padding: 0; }
.category-toggle { width: 32px; height: 32px; min-height: 32px; padding: 0; }
.icon-button { width: var(--ds-icon-button-size); height: var(--ds-icon-button-size); min-height: var(--ds-icon-button-size); padding: 0; }
:is(.icon-button, .table-columns-button, .icon-action, .header-icon) {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  text-align: center;
}
:is(.icon-button, .table-columns-button, .icon-action, .header-icon) > :is(img, svg) {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}
.ds-icon-control {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  padding: 0 !important;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}
.ds-icon-control > .ds-icon-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.ds-icon-control > :is(img, svg, .header-tool-mark, .header-avatar) {
  flex: 0 0 auto;
  margin: auto;
}
.table-settings-header > .ds-icon-control,
.table-settings-cell > .ds-icon-control {
  display: flex !important;
  float: none !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
}
.ds-icon-control.hidden {
  display: none !important;
}

/* Wide profile keeps the operations header and grouped document labels on one row. */
@media (min-width: 1201px) {
  :root[data-layout-width="wide"] .operations-head {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
  }
  :root[data-layout-width="wide"] .operation-tabs,
  :root[data-layout-width="wide"] .operation-head-actions {
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  :root[data-layout-width="wide"] .operation-tabs {
    justify-content: flex-start;
  }
  :root[data-layout-width="wide"] .operation-head-actions {
    min-width: 0;
    justify-content: flex-end;
    overflow-x: auto;
  }
  :root[data-layout-width="wide"] .operation-group-row th {
    white-space: nowrap;
  }
}

/* Cards, tables and statuses share the same surface language. */
.card,
.toolbar,
.equipment-table-wrap,
.object-card,
.vehicle-card { border-color: var(--line); border-radius: var(--ds-radius-surface); }
.equipment-table th,
.reconcile-table th,
.batch-edit-table th { color: var(--ink); }
.operation-note,
.notice-panel,
.vehicle-vin-result { border-radius: var(--ds-radius-control); }
.operation-note.info { border-color: var(--ds-info); background: var(--ds-info-bg); color: var(--ds-info); }
.operation-note.warning { border-color: var(--ds-warning); background: var(--ds-warning-bg); color: var(--ds-warning); }
.operation-note.success { border-color: var(--ds-success); background: var(--ds-success-bg); color: var(--ds-success); }
.operation-note.danger,
.operation-note.error { border-color: var(--ds-danger); background: var(--ds-danger-bg); color: var(--ds-danger); }

/* All scrolling dialogs keep their identity and critical actions visible. */
dialog.card { border-radius: var(--ds-radius-surface); color: var(--ink); background: var(--panel); }
dialog.card > .dialog-heading,
dialog.card form > .dialog-heading {
  position: sticky;
  top: calc(-1 * var(--ds-space-1));
  z-index: 40;
  margin: calc(-1 * var(--ds-space-1)) 0 var(--ds-gap-block);
  padding: var(--ds-space-1) 0 var(--ds-space-3);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 9px 14px -16px rgba(0, 0, 0, .85);
}
dialog.card > .dialog-actions,
dialog.card form > .dialog-actions {
  position: sticky;
  bottom: calc(-1 * var(--ds-space-1));
  z-index: 35;
  margin-top: var(--ds-gap-section);
  padding: var(--ds-space-3) 0 var(--ds-space-1);
  border-top: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 -9px 14px -16px rgba(0, 0, 0, .85);
}
.object-dialog-actions { isolation: isolate; }
.dialog-actions,
.compact-actions { gap: var(--ds-space-2); }
.custom-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
}
.custom-field-row > span { min-width: 0; }
.custom-field-row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.custom-field-row-actions .compact-button {
  min-height: var(--ds-compact-height);
  padding: var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-compact);
  font-size: var(--ds-font-size-caption);
  line-height: var(--ds-line-height-tight);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .custom-field-row { grid-template-columns: minmax(0, 1fr); }
  .custom-field-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}
.dialog-heading .icon-button { flex: 0 0 var(--ds-icon-button-size); }

/* Technical thumbnails remain legible without forcing a white square. */
[data-theme="dark"] :is(.model-list-thumbnail, .photo-thumb img, .photo-card img, .object-card-photo, .object-photo-preview) {
  background: #26343a;
}
[data-theme="dark"] :is(.model-list-thumbnail, .photo-thumb img, .photo-card img, .object-card-photo img, .object-photo-preview img) {
  color: var(--ink);
}
.admin-sidebar button.active { background: var(--paper) !important; color: var(--ds-accent-text) !important; }
[data-theme="dark"] .admin-sidebar button:hover,
[data-theme="dark"] .admin-sidebar button.active { background: #24353c !important; color: #ffad88 !important; }
.operation-document-link,
.table-link { color: #17556a; }
[data-theme="dark"] .operation-document-link,
[data-theme="dark"] .table-link { color: #91c8df; }

/* Clear, stable notification placement. A popover remains above modal backdrops. */
#notice {
  position: fixed;
  inset: auto var(--ds-space-4) var(--ds-space-4) auto;
  display: grid;
  grid-template-columns: minmax(var(--ds-space-0), 1fr) auto;
  align-items: center;
  gap: var(--ds-gap-control);
  width: min(var(--ds-notice-max-width), calc(100vw - var(--ds-space-6)));
  max-width: var(--ds-notice-max-width);
  margin: var(--ds-space-0);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: var(--ds-border-default);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--ds-color-transparent));
  border-radius: var(--ds-radius-control);
  background: var(--ds-notice-bg);
  color: var(--ds-notice-text);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
  letter-spacing: var(--ds-letter-spacing-normal);
  box-shadow: var(--ds-shadow-notice);
  opacity: 0;
  transform: translateY(var(--ds-space-2));
  transition: opacity var(--ds-motion-fast), transform var(--ds-motion-fast);
  pointer-events: none;
}
#notice:popover-open,
#notice.show { opacity: 1; transform: translateY(var(--ds-space-0)); pointer-events: auto; }
#notice[data-kind="error"] { border-color: var(--ds-danger); }
.notice-copy { display: grid; min-width: var(--ds-space-0); gap: var(--ds-gap-caption); }
#notice-time { color: color-mix(in srgb, var(--ds-notice-text) 72%, var(--ds-color-transparent)); font-size: var(--ds-font-size-meta); }
#notice-message { overflow-wrap: anywhere; }
.notice-actions { display: flex; align-items: center; gap: var(--ds-gap-control); }
#notice-report { white-space: nowrap; }
#notice-close { flex: 0 0 var(--ds-icon-button-size); border-color: color-mix(in srgb, var(--ds-notice-text) 35%, var(--ds-color-transparent)); background: var(--ds-notice-button-bg); color: var(--ds-notice-text); }
.has-equipment-bottom-scroll #notice { bottom: calc(var(--ds-space-6) + var(--ds-space-1)); }

/* Telegram has a dedicated admin section; the full activity table spans the component below access. */
#admin-telegram-settings { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, .9fr); gap: var(--ds-gap-block) var(--ds-gap-section); }
#admin-telegram-settings > .section-heading { grid-column: 1 / -1; }
#telegram-status,
#telegram-form { grid-column: 1; }
.telegram-access-panel { grid-column: 1 / -1; }
.telegram-activity-panel { grid-column: 1 / -1; }
.telegram-log-panel { grid-column: 2; grid-row: 2 / span 2; display: grid; align-content: start; gap: var(--ds-gap-control); min-width: var(--ds-space-0); }
.telegram-log-panel .section-heading { margin: var(--ds-space-0); }
.telegram-log-panel h3 { margin: var(--ds-space-0); font-size: var(--ds-font-size-heading-block); }
.telegram-log-table { width: 100%; min-width: 620px; }
.telegram-log-table td:last-child { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 980px) {
  #admin-telegram-settings { grid-template-columns: minmax(var(--ds-space-0), 1fr); }
  #admin-telegram-settings > *,
  .telegram-log-panel { grid-column: 1; grid-row: auto; }
}

.vehicle-monthly-report-dialog form,
.vehicle-monthly-report-section,
.vehicle-monthly-report-rows,
.vehicle-monthly-trip-row,
.vehicle-monthly-fuel-row,
.vehicle-monthly-trip-row label,
.vehicle-monthly-fuel-row label { min-width: 0; max-width: 100%; }
.vehicle-monthly-trip-row input,
.vehicle-monthly-trip-row select,
.vehicle-monthly-fuel-row input,
.vehicle-monthly-fuel-row select { min-width: 0; max-width: 100%; }
.vehicle-monthly-trip-actions { flex-wrap: wrap; gap: var(--ds-gap-control); }

/* Global search is an independent component. It must not inherit header div flex. */
.site-header {
  position: relative;
  z-index: 100;
  overflow: visible;
}
.site-header-inner,
.header-tools,
.global-search {
  min-width: 0;
  overflow: visible;
}
.global-search .search-results {
  z-index: 110;
  display: grid;
  grid-auto-flow: row;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  right: auto;
  left: 0;
  max-height: min(520px, calc(100dvh - 92px));
  padding: var(--ds-space-1);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}
.global-search .search-result,
.search-page-result {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  gap: 2px var(--ds-space-3);
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--ds-radius-compact);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.global-search .search-result:hover,
.global-search .search-result:focus-visible,
.search-page-result:hover,
.search-page-result:focus-visible { background: var(--paper); }
.search-result-group {
  display: grid;
  min-width: 0;
}
.search-result-group + .search-result-group {
  margin-top: var(--ds-space-1);
  padding-top: var(--ds-space-1);
  border-top: 1px solid var(--line);
}
.search-result-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  min-height: 28px;
  padding: 4px 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.search-result-group-count {
  min-width: 1.6em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.search-result-group-list { display: grid; min-width: 0; }
.global-search .search-result.search-result-grouped,
.search-page-result.search-result-grouped {
  grid-template-columns: minmax(0, 1fr);
}
.search-result-type {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.search-result-title,
.search-result-subtitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-title { font-weight: 700; }
.search-result-subtitle { color: var(--muted); font-size: .82rem; }
.search-results-footer { padding: var(--ds-space-2); }
.search-results-footer button { width: 100%; }
.search-page-results { display: grid; gap: var(--ds-space-3); }
.search-page-results .search-result-group {
  gap: var(--ds-space-1);
  padding: var(--ds-space-2);
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-surface);
  background: var(--panel);
}
.search-page-results .search-result-group + .search-result-group { margin-top: 0; }
.search-page-results .search-result-group-heading {
  min-height: 32px;
  padding: 4px 8px;
  color: var(--ink);
  font-size: .8rem;
}
.search-page-result {
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  min-height: 62px;
  border: 1px solid var(--line);
  background: transparent;
}
.search-page-toolbar { grid-template-columns: minmax(240px, 1fr) auto; }
.search-page-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin: var(--ds-space-3) 0;
  padding: 0;
  border: 0;
}
.search-page-filters legend {
  width: 100%;
  margin-bottom: var(--ds-space-1);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}
.search-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-compact);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.search-filter:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.search-filter input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.search-filter small { min-width: 1.5ch; color: var(--muted); text-align: right; }
.search-page-summary { min-height: 1.25em; margin: 0 0 var(--ds-space-3); }
.objects-heading + .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-gap-control);
  align-items: center;
}
.objects-heading + .toolbar > * { min-width: 0; flex: 0 1 auto; }
.objects-heading + .toolbar > input { width: auto; flex: 1 1 260px; }
.objects-heading + .toolbar > select { width: auto; flex: 0 1 auto; min-height: var(--ds-control-height); }
.objects-heading + .toolbar .object-group-control { flex: 0 0 auto; max-width: 100%; white-space: normal; }
.object-card.is-inactive {
  border-style: dashed;
  background: var(--ds-surface-muted);
}
.object-card-title-static,
.object-card-title-static:hover { color: var(--ink); cursor: default; }
.object-card-activity { justify-self: start; }
.objects-heading-actions { align-self: flex-start; }
.view-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1);
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-control);
  background: var(--panel);
}
.view-mode-switch button {
  min-height: 28px;
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 0;
  border-radius: var(--ds-radius-compact);
  background: transparent;
  color: var(--ink);
}
.view-mode-switch button:hover { background: var(--ds-surface-muted); filter: none; }
.view-mode-switch button.active,
.view-mode-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
#objects-list.object-list-view { display: block; }
#objects-list.object-card-view { display: block; width: 100%; }
#objects-list.object-card-view > .object-grid { width: 100%; }
.object-list-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-control);
  background: var(--paper);
}
.object-list-wrap { max-width: 100%; min-width: 0; }
.object-list-table { min-width: 0; table-layout: fixed; }
.object-list-table [data-column="photo"] { text-align: center; }
.object-list-table th[data-config-column] { padding-right: var(--ds-space-1); }
.object-list-table .column-resizer { right: 0; }
.object-list-table .column-resizer::after { background: var(--line); }
.object-table-hint { margin: var(--ds-space-2) 0 var(--ds-space-4); font-size: var(--ds-font-size-caption); }
/* Label itself is the keyboard-accessible sort target; resizing never invokes it. */
.equipment-table button.table-sort-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  max-width: calc(100% - 16px);
  min-height: var(--ds-compact-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-compact);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: normal;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.table-sort-label span:first-child { min-width: 0; }
.table-sort-label [data-sort-indicator] { flex: none; color: var(--muted-2); }
.table-sort-label.active [data-sort-indicator] { color: var(--accent); }
.table-sort-label:hover { text-decoration: underline; }
.object-list-table td {
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.object-list-table td small {
  display: block;
  margin-top: var(--ds-gap-caption);
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.object-list-title { font-weight: 800; }
.object-list-primary .ds-status { margin-left: var(--ds-gap-control); }
.object-list-photo { vertical-align: middle; }
.object-list-photo-static { cursor: default; }
.object-list-links { white-space: nowrap; }
.object-list-links .link-chip + .link-chip { margin-left: var(--ds-gap-caption); }
.object-list-row.is-inactive { background: var(--ds-surface-muted); }
.object-list-row.is-inactive td { border-bottom-style: dashed; }

@media (max-width: 1200px) {
  .objects-heading + .toolbar {
    grid-template-columns: minmax(var(--ds-space-0), 1fr) minmax(var(--ds-object-activity-filter-min-width), auto) minmax(130px, 170px) minmax(170px, 210px);
  }
}

@media (max-width: 760px) {
  .site-header-inner { flex-wrap: wrap; gap: var(--ds-gap-control); }
  .site-header-inner > .site-brand { flex: 1 1 100%; min-width: 0; }
  .site-brand > div { min-width: 0; }
  .site-brand strong, .site-brand > div > span { overflow-wrap: anywhere; }
  .site-header-inner > .header-tools { flex: 1 1 100%; flex-wrap: wrap; }
  .header-tools > button { min-width: var(--ds-touch-height); min-height: var(--ds-touch-height); }
  .header-tools .global-search { position: relative; inset: auto; flex: 1 1 100%; width: 100%; order: 1; }
  .objects-heading { display: grid; gap: var(--ds-gap-control); }
  .objects-heading + .toolbar { align-items: stretch; }
  .objects-heading + .toolbar > input,
  .objects-heading + .toolbar > select { width: 100%; flex: 0 0 auto; }
  .objects-heading-actions { width: 100%; justify-content: space-between; }
  /* Keep headings reachable for sorting/resizing; cards remain a separate mode. */
  .equipment-table button.table-sort-label { min-height: var(--ds-touch-height); }
}

/*
 * The object dialog is the reference for every data modal. Feature wizards may
 * have more steps, but use the same themed surfaces, rhythm and fixed actions.
 */
.report-card,
.report-upload-card,
.report-preview-card,
.report-recognition,
.report-generated-title {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}
.report-card {
  gap: var(--ds-gap-block);
  padding: var(--ds-surface-padding);
}
.report-card h3,
.report-step h3,
.report-upload-card h3 { color: var(--ink); }
.report-card-meta,
.report-equipment-row small,
.report-selected-count,
.report-field-example { color: var(--muted-2); }
.report-wizard-dialog {
  display: none;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  background: var(--panel);
  color: var(--ink);
}
.report-wizard-dialog[open] { display: grid; }
.report-wizard-dialog > .dialog-heading {
  position: relative;
  top: auto;
  z-index: 2;
  margin: 0;
  padding: var(--ds-space-4);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  box-shadow: none;
}
.report-wizard-steps {
  gap: var(--ds-gap-caption);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--panel);
}
.report-wizard-steps li {
  border-color: var(--line);
  color: var(--muted-2);
}
.report-wizard-steps li.active { color: var(--ink); }
.report-wizard-dialog form {
  min-height: 0;
  height: auto;
  padding: var(--ds-space-4);
  overflow: auto;
}
.report-wizard-footer {
  position: relative !important;
  bottom: auto;
  z-index: 2;
  gap: var(--ds-gap-control);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 -9px 14px -16px rgba(0, 0, 0, .85);
}
.report-upload-card,
.report-preview-card,
.report-recognition { background: var(--paper); }
.report-recognition-body,
.report-equipment-panel,
.report-attachment { border-color: var(--line); }
.report-status.draft { background: var(--ds-warning-bg); color: var(--ds-warning); }
.report-status.finalized { background: var(--ds-success-bg); color: var(--ds-success); }

/* Semantic status surfaces must keep their contrast in both themes. */
.transit-fields,
.transit-reminders {
  border-color: color-mix(in srgb, var(--ds-warning) 45%, var(--line));
  background: var(--ds-warning-bg);
  color: var(--ink);
}
.transit-fields legend { color: var(--ds-warning); }
.transit-reminder.overdue {
  border-color: color-mix(in srgb, var(--ds-danger) 55%, var(--line));
  background: var(--ds-danger-bg);
  color: var(--ink);
}
.transit-reminder.overdue small { color: var(--ds-danger); }

/* Serial numbers are primary technical identifiers, not secondary captions. */
.serial-link,
.serial-number-value {
  max-width: 100%;
  overflow: hidden;
  color: var(--ds-accent-text);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.serial-number-value { font-weight: 800; }

/* Directory toolbar: controls on the first row, persistent view state below. */
#equipment .toolbar { display: grid; gap: var(--ds-gap-control); }
.equipment-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-gap-control);
  min-width: 0;
}
.equipment-toolbar-main > input { flex: 1 1 280px; min-width: 220px; }
.equipment-toolbar-main > button { flex: 0 0 auto; white-space: nowrap; }
.equipment-toolbar-options { display: flex; align-items: center; min-height: 28px; width: 100%; }
.equipment-toolbar-options .equipment-expand-control { margin: 0; }

/* Model and serial dialogs use the same explicit view/edit contract as objects. */
.entity-summary { margin: 0; }
.entity-view-mode .entity-edit-fields,
#model-dialog.entity-view-mode .details-edit-grid,
#model-dialog.entity-view-mode #model-form-error { display: none !important; }
#model-dialog.entity-view-mode :is(
  #model-photo-upload-label,
  .photo-delete,
  #model-modification-add,
  #model-analog-add,
  .model-analog-remove,
  .model-family-rename
) { display: none !important; }
#equipment-details-dialog.entity-view-mode #equipment-details-edit-form,
#equipment-details-dialog.entity-view-mode #details-shared-link-controls,
#equipment-details-dialog.entity-view-mode #details-shared-list .entity-row > button { display: none !important; }
.entity-dialog-actions {
  margin-top: var(--ds-gap-section);
  padding: var(--ds-space-3) 0 var(--ds-space-1);
  background: var(--panel);
}
.entity-summary .serial-number-value { display: inline-block; }
#model-serial-section .serial-link,
#model-network-section .serial-link {
  min-height: var(--ds-button-height);
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-control);
  background: color-mix(in srgb, var(--panel) 70%, var(--line));
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}
#model-serial-section .serial-link:hover,
#model-network-section .serial-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 86%, var(--accent));
}
#model-network-section .serial-link small { font-size: 11px; font-weight: 500; }

/* Object cards open read-only. Editing is an explicit mode. */
.object-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-2) var(--ds-space-5);
  align-content: start;
  padding: var(--ds-space-4);
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-surface);
  background: var(--paper);
}
.object-summary.hidden { display: none; }
.object-summary-item { min-width: 0; }
.object-summary-item dt { color: var(--muted); font-size: .75rem; font-weight: 700; }
.object-summary-item dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.object-summary-item.object-summary-wide { grid-column: 1 / -1; }
.object-summary a { color: var(--ds-accent-text); }
.object-dialog.object-view-mode .object-fields,
.object-dialog.object-view-mode .photo-upload,
.object-dialog.object-view-mode #object-map-actions,
.object-dialog.object-view-mode #object-delete,
.object-dialog.object-view-mode #object-copy,
.object-dialog.object-view-mode :is(
  #object-channel-link-controls,
  #object-shared-link-controls,
  #client-equipment-form,
  #object-zip-add
) { display: none !important; }
.object-dialog.object-view-mode .object-profile-grid { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
.object-antenna-field input { max-width: 108px; }
.object-history-disclosure { border: 1px solid var(--line); border-radius: var(--ds-radius-compact); background: var(--panel); overflow: clip; }
.object-history-disclosure > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 42px; padding: 9px 12px; color: var(--ink); cursor: pointer; font-weight: 750; list-style: none; }
.object-history-disclosure > summary::-webkit-details-marker { display: none; }
.object-history-disclosure > summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 1.25rem; line-height: 1; transform: rotate(90deg); transition: transform .16s ease; }
.object-history-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.object-history-disclosure[open] > summary::after { transform: rotate(-90deg); }
.object-history-count { margin-left: auto; color: var(--muted); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.object-history-disclosure > summary::after { margin-left: 0; }
.object-history-body { margin: 0; border: 0; border-radius: 0; }
.object-history-disclosure .card-history-list { padding: var(--ds-space-3); }

/* Semantic widths: use the content, not a generic full-width field. */
.field-size-xs { width: 8ch; max-width: 100%; }
.field-size-sm { width: 16ch; max-width: 100%; }
.field-size-md { width: 30ch; max-width: 100%; }
.field-size-full { width: 100%; }

/* Registry rows use natural, numeric order. Linked spots look like table text. */
.registry-object-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-accent-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}
.registry-object-link:hover { background: transparent; color: var(--ink); }
.registry-management-address {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-gap-control);
  max-width: 100%;
}
.registry-management-value {
  min-width: var(--ds-space-0);
  overflow: hidden;
  text-overflow: ellipsis;
}
.registry-management-copy {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--ds-compact-control-size);
  inline-size: var(--ds-compact-control-size);
  min-inline-size: var(--ds-compact-control-size);
  block-size: var(--ds-compact-control-size);
  min-block-size: var(--ds-compact-control-size);
  padding: var(--ds-space-0);
  line-height: var(--ds-line-height-tight);
}
.monitor-state {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-compact-height);
  padding: var(--ds-status-padding-block) var(--ds-status-padding-inline);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-font-size-meta);
  font-weight: var(--ds-font-weight-strong);
}
.registry-table { table-layout: fixed; }
.registry-table th,
.registry-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-table.registry-table .registry-actions-column,
.equipment-table.registry-table .table-settings-header,
.equipment-table.registry-table .table-settings-cell { width: var(--ds-registry-actions-width); min-width: var(--ds-registry-actions-width); text-align: center; }
.registry-table .registry-actions-cell { display: table-cell; vertical-align: middle; }
.registry-actions-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.registry-row-actions,
.registry-remote-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-1); }
.registry-row-actions { width: 100%; }
html[data-layout-width="wide"] :is(.tab, dialog) table { min-width: 100%; }
.registry-edit-button {
  width: var(--ds-compact-height);
  min-width: var(--ds-compact-height);
  height: var(--ds-compact-height);
  min-height: var(--ds-compact-height);
  padding: var(--ds-space-0);
}
.columns-list .column-order-actions {
  display: grid;
  grid-template-columns: repeat(2, var(--ds-compact-control-size));
  gap: var(--ds-space-1);
}
.columns-list .column-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: var(--ds-compact-control-size);
  min-inline-size: var(--ds-compact-control-size);
  block-size: var(--ds-compact-control-size);
  min-block-size: var(--ds-compact-control-size);
  padding: var(--ds-space-0);
  line-height: var(--ds-line-height-tight);
}
.admin-document-retention-form { display: grid; gap: var(--ds-space-4); }
.admin-document-retention-form .admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  gap: var(--ds-space-3) var(--ds-space-4);
  justify-content: start;
  align-items: end;
}
.admin-document-retention-form .admin-form-grid label { min-width: 0; }
.admin-document-retention-form .admin-form-grid input { width: 140px; max-width: 100%; }
.admin-document-retention-form > button[type="submit"] { justify-self: start; width: auto; }
@media (max-width: 560px) {
  .admin-document-retention-form .admin-form-grid { grid-template-columns: 1fr; }
}
.storage-status {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-compact);
  background: var(--paper);
}
.storage-status-ok { border-color: color-mix(in srgb, var(--ds-success) 50%, var(--line)); color: var(--ds-success); }
.storage-status-error { border-color: color-mix(in srgb, var(--ds-danger) 50%, var(--line)); color: var(--ds-danger); }

@media (max-width: 760px) {
  .site-header { padding-inline: 14px; }
  .tabs { padding-left: 8px; padding-right: 8px; }
  .tab { width: calc(100% - 28px); padding-bottom: 36px; }
  button,
  .button-link,
  a.secondary { min-height: 40px; }
  .icon-button { width: 40px; height: 40px; min-height: 40px; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions > button { flex: 1 1 150px; }
  .category-sidebar-resizer { right: 0; width: 10px; }
  .category-sidebar-resizer::after { left: 4px; }
  .global-search .search-results { width: 100%; max-width: 100%; min-width: 0; left: 0; right: auto; }
  .search-page-toolbar,
  .objects-heading + .toolbar { grid-template-columns: 1fr; }
  .object-summary { grid-template-columns: 1fr; }
  .object-summary-item.object-summary-wide { grid-column: auto; }
  .object-dialog.object-view-mode .object-profile-grid { grid-template-columns: 1fr; }
  .equipment-toolbar-main { display: grid; grid-template-columns: 1fr; }
  .equipment-toolbar-main > input,
  .equipment-toolbar-main > button { width: 100%; min-width: 0; }
  :is(
    .form-grid,
    .details-edit-grid,
    .object-fields,
    .registry-fields,
    .report-step-grid,
    .transfer-act-grid,
    .power-attorney-grid,
    .profile-document-fields,
    .vehicle-fields-grid,
    .vehicle-details-grid,
    .vehicle-record-grid,
    .vehicle-maintenance-grid,
    .vehicle-part-form-grid,
    .vehicle-part-transaction-grid,
    .admin-form-grid,
    .admin-navigation-fields
  ) > label:not(.check):has(> input, > select, > textarea) {
    grid-template-rows: auto auto auto;
  }
}

@media (max-width: 420px) {
  .tab { width: calc(100% - 20px); }
  .toolbar { min-width: 0; }
  .toolbar > :is(input, select, button) { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.entity-record-link{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--link-color,#176b87);
  padding:0;
  font:inherit;
  font-weight:700;
  line-height:inherit;
  text-align:left;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  cursor:pointer;
}
.entity-record-link:hover{color:var(--accent,#d85a24)}

/*
 * Canonical data table: the equipment directory is the reference.
 * Every entity link in a table uses one typography contract regardless of
 * the feature module that rendered the cell.
 */
.equipment-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
}
.equipment-table th {
  padding: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}
.equipment-table td,
.equipment-table.compact-rows td {
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.45;
}
.equipment-table :is(
  .equipment-title,
  .table-link,
  .entity-record-link,
  .registry-object-link,
  .operation-document-link,
  .serial-link.serial-number-value
) {
  display: inline;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ds-record-link);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.equipment-table :is(
  .equipment-title,
  .table-link,
  .entity-record-link,
  .registry-object-link,
  .operation-document-link,
  .serial-link.serial-number-value
):is(:hover, :focus-visible) {
  border-bottom-color: currentColor;
  background: transparent;
  color: var(--ds-record-link-hover);
  filter: none;
}
.equipment-table .table-settings-header,
.equipment-table .table-settings-cell {
  width: 52px;
  padding-right: 10px;
  padding-left: 10px;
  text-align: center;
  vertical-align: middle;
}
.equipment-table .table-settings-header .table-columns-button {
  float: none;
  display: inline-grid;
  width: var(--ds-compact-height);
  height: var(--ds-compact-height);
  min-height: var(--ds-compact-height);
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

.section-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-space-2);
}
.object-equipment-move-dialog { width: min(760px, calc(100% - 32px)); }
.object-equipment-move-dialog select { min-height: 240px; }
.object-dialog.object-view-mode #object-equipment-move-add { display: none !important; }

/*
 * Canonical component instances. Legacy names receive these classes in
 * design-system.js so screens cannot drift by reimplementing the same role.
 */
.ds-surface {
  border: var(--ds-border-default);
  border-radius: var(--ds-radius-surface);
  background: var(--ds-surface);
  color: var(--ds-text);
}
.ds-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ds-gap-control);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}
.ds-toolbar.ds-toolbar--fields { flex-wrap: wrap; align-items: flex-end; }
.ds-toolbar--fields > label { min-width: 0; margin: var(--ds-space-0); }
.ds-toolbar--fields :is(input, select, button) { margin: var(--ds-space-0); }
.ds-toolbar--fields > button { min-height: var(--ds-control-height); max-width: 100%; }
.toolbar.reconcile-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-gap-control);
}
.reconcile-toolbar .reconcile-toolbar-field {
  flex: 1 1 var(--ds-card-copy-min-width);
  min-width: 0;
}
.reconcile-toolbar :is(button, .reconcile-full-height-control) {
  flex: 0 1 auto;
  max-width: 100%;
  width: auto;
}
.ds-dialog-header {
  position: sticky;
  top: calc(-1 * var(--ds-space-1));
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-gap-block);
  margin: var(--ds-dialog-header-margin);
  padding: var(--ds-dialog-header-padding);
  border: var(--ds-border-transparent);
  border-bottom: var(--ds-border-default);
  border-radius: var(--ds-radius-none);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  line-height: var(--ds-line-height-body);
  box-shadow: var(--ds-shadow-dialog-header);
}
.ds-dialog-actions {
  position: sticky;
  bottom: calc(-1 * var(--ds-space-1));
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-gap-control);
  margin-top: var(--ds-gap-section);
  padding: var(--ds-dialog-footer-padding);
  border: var(--ds-border-transparent);
  border-top: var(--ds-border-default);
  border-radius: var(--ds-radius-none);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  line-height: var(--ds-line-height-compact);
  box-shadow: var(--ds-shadow-dialog-footer);
}
.ds-data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
}
.ds-data-table th {
  padding: var(--ds-table-heading-padding-block) var(--ds-table-heading-padding-inline);
  border-bottom: var(--ds-border-default);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-compact);
}
.ds-data-table td {
  padding: var(--ds-table-cell-padding-block) var(--ds-table-cell-padding-inline);
  border-bottom: var(--ds-border-default);
  color: var(--ds-text);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
}
/* Configured column widths must not depend on the current page's shortest cells. */
.ds-data-table--fixed {
  table-layout: fixed;
  min-width: var(--ds-space-0);
}
.ds-data-table--fixed th,
.ds-data-table--fixed td:not(.actions-column) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-data-table--fixed button.table-sort-label {
  white-space: nowrap;
  overflow-wrap: normal;
}
.ds-data-table--fixed .table-sort-label > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Every date keeps the same width, including dates carrying report provenance. */
.ds-data-table.ds-attendance-matrix {
  width: calc(var(--ds-attendance-employee-width) + var(--ds-attendance-days) * var(--ds-attendance-day-width));
}
.ds-attendance-employee-column { width: var(--ds-attendance-employee-width); }
.ds-attendance-day-column { width: var(--ds-attendance-day-width); }
.ds-attendance-matrix td,
.ds-attendance-matrix th {
  vertical-align: top;
  padding-inline: var(--ds-space-2);
}
.ds-attendance-matrix select,
.ds-attendance-matrix [data-timesheet-employee] {
  width: 100%;
  min-width: var(--ds-space-0);
  max-width: 100%;
}
.ds-attendance-matrix [data-timesheet-employee] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-attendance-hint {
  display: block;
  margin-top: var(--ds-gap-caption);
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: var(--ds-font-size-caption);
  line-height: var(--ds-line-height-body);
}
.ds-attendance-matrix thead th:not(:first-child) { padding-inline: var(--ds-space-1); }
.ds-attendance-matrix thead .ds-attendance-hint {
  white-space: nowrap;
  overflow-wrap: normal;
}
.ds-attendance-matrix :is(th, td).ds-attendance-rest { color: var(--ds-info); background: var(--ds-info-bg); }
.ds-attendance-matrix :is(th, td).ds-attendance-holiday { color: var(--ds-warning); background: var(--ds-warning-bg); }
.ds-attendance-rest select { background: var(--ds-info-bg); }
.ds-attendance-holiday select { background: var(--ds-warning-bg); }
.ds-attendance-matrix td.ds-attendance-missing { background: var(--ds-warning-bg); }

/* Annual production calendar: a read-only Monday-first variant of the shared table. */
.ds-calendar-quarter {
  margin-block: var(--ds-gap-section);
  padding: var(--ds-surface-padding);
  max-width: calc(3 * var(--ds-calendar-month-min-width) + 2 * var(--ds-gap-block));
  box-sizing: content-box;
  background: var(--ds-surface-subtle);
}
.ds-calendar-quarter > h3 { margin-top: var(--ds-space-0); }
.ds-calendar-month { width: 100%; table-layout: fixed; }
.ds-calendar-month caption { padding-block: var(--ds-space-2); font-weight: var(--ds-font-weight-bold); color: var(--ds-text); }
.ds-calendar-month :is(th, td) { padding: var(--ds-space-1); text-align: center; white-space: nowrap; font-size: var(--ds-font-size-body); }
.ds-calendar-month td { height: var(--ds-compact-control-size); }
.ds-calendar-month sup { font-size: var(--ds-font-size-meta); }
.ds-calendar-month .ds-calendar-empty { background: var(--ds-surface-subtle); }
.ds-calendar-rest { color: var(--ds-info); background: var(--ds-info-bg); }
.ds-calendar-holiday { color: var(--ds-warning); background: var(--ds-warning-bg); }
.ds-calendar-month .ds-calendar-changed { outline: var(--ds-focus-width) dashed var(--ds-danger); outline-offset: calc(-1 * var(--ds-focus-width)); }
.ds-calendar-legend, .ds-calendar-totals { display: flex; flex-wrap: wrap; gap: var(--ds-gap-control); align-items: baseline; font-size: var(--ds-font-size-caption); }
.ds-calendar-legend > span { padding: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-compact); }
.ds-calendar-totals > strong { flex-basis: 100%; }
.ds-attendance-missing select { border-color: var(--ds-warning); }
.ds-attendance-warning { color: var(--ds-warning); }
.ds-attendance-legend { margin-block: var(--ds-gap-block); }
.ds-attendance-legend dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-card-copy-min-width)), 1fr));
  gap: var(--ds-gap-control) var(--ds-gap-block);
}
.ds-attendance-legend dl > div { display: flex; gap: var(--ds-gap-control); }
.ds-attendance-legend dt { font-weight: var(--ds-font-weight-semibold); }
.ds-attendance-legend dd { margin: var(--ds-space-0); }
#timesheet-message:empty { display: none; }
/* One row of semantic fields, not the small-font dense registry tier. */
.ds-input-matrix-wrap {
  container: ds-input-matrix / inline-size;
  font-size: var(--ds-font-size-body);
}
.ds-input-matrix.ds-input-matrix--compact {
  --ds-input-matrix-choice-width: var(--ds-input-matrix-choice-control-width);
  --ds-input-matrix-control-height: var(--ds-button-height);
  width: min(100%, calc(var(--ds-input-matrix-date-width) + var(--ds-input-matrix-vehicle-width) + var(--ds-input-matrix-choice-width) + var(--ds-input-matrix-liters-width) + var(--ds-input-matrix-money-width) + var(--ds-input-matrix-action-width) + (12 * var(--ds-space-2))));
  table-layout: fixed;
}
.ds-input-matrix.ds-input-matrix--compact:has(.ds-input-matrix-choice input:not([hidden])) {
  --ds-input-matrix-choice-width: calc(var(--ds-input-matrix-choice-control-width) + var(--ds-input-matrix-custom-width) + var(--ds-gap-control));
}
.ds-input-matrix .ds-input-matrix-col--date { width: calc(var(--ds-input-matrix-date-width) + (2 * var(--ds-space-2))); }
.ds-input-matrix .ds-input-matrix-col--vehicle { width: calc(var(--ds-input-matrix-vehicle-width) + (2 * var(--ds-space-2))); }
.ds-input-matrix .ds-input-matrix-col--choice { width: calc(var(--ds-input-matrix-choice-width) + (2 * var(--ds-space-2))); }
.ds-input-matrix .ds-input-matrix-col--liters { width: calc(var(--ds-input-matrix-liters-width) + (2 * var(--ds-space-2))); }
.ds-input-matrix .ds-input-matrix-col--money { width: calc(var(--ds-input-matrix-money-width) + (2 * var(--ds-space-2))); }
.ds-input-matrix .ds-input-matrix-col--action { width: calc(var(--ds-input-matrix-action-width) + (2 * var(--ds-space-2))); }
.ds-input-matrix-field--liters { --ds-input-matrix-field-width: var(--ds-input-matrix-liters-width); }
.ds-input-matrix-field--money { --ds-input-matrix-field-width: var(--ds-input-matrix-money-width); }
.ds-input-matrix.ds-input-matrix--compact :is(th, td) {
  padding: var(--ds-space-2);
  vertical-align: top;
}
.ds-input-matrix.ds-input-matrix--compact td :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([hidden]), select, button) {
  display: block;
  box-sizing: border-box;
  width: min(100%, var(--ds-input-matrix-field-width, 100%));
  min-width: var(--ds-space-0);
  max-width: 100%;
  height: var(--ds-input-matrix-control-height);
  min-height: var(--ds-input-matrix-control-height);
  margin: var(--ds-space-0);
  padding: var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-compact);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-compact);
}
.ds-input-matrix .ds-input-matrix-choice {
  grid-template-columns: minmax(0, var(--ds-input-matrix-choice-control-width)) minmax(0, 1fr);
  align-items: start;
}
.ds-input-matrix.ds-input-matrix--compact .ds-input-matrix-choice > select {
  max-width: var(--ds-input-matrix-choice-control-width);
}
@media (max-width: 760px) {
  .ds-input-matrix.ds-input-matrix--compact {
    --ds-input-matrix-control-height: var(--ds-touch-height);
  }
}
/* Standard grades need 118ch of fields plus 96px of padding, not the Other reserve. */
@container ds-input-matrix (max-width: 134ch) {
  .ds-input-matrix.ds-input-matrix--compact {
    display: block;
    width: 100%;
  }
  .ds-input-matrix.ds-input-matrix--compact :is(colgroup, thead) { display: none; }
  .ds-input-matrix.ds-input-matrix--compact tbody { display: grid; gap: var(--ds-gap-control); }
  .ds-input-matrix.ds-input-matrix--compact tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: var(--ds-border-default);
    border-radius: var(--ds-radius-control);
  }
  .ds-input-matrix.ds-input-matrix--compact td { display: block; min-width: var(--ds-space-0); border: 0; }
  .ds-input-matrix.ds-input-matrix--compact td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--ds-gap-caption);
    font-size: var(--ds-font-size-caption);
    color: var(--ds-text-muted);
  }
  .ds-input-matrix.ds-input-matrix--compact td:has(.ds-input-matrix-choice) { grid-column: 1 / -1; }
}
/* Only a visible custom-name field needs the extra 24ch + 8px of the Other pair. */
@container ds-input-matrix (max-width: 158ch) {
  .ds-input-matrix.ds-input-matrix--compact:has(.ds-input-matrix-choice input:not([hidden])) {
    display: block;
    width: 100%;
    & :is(colgroup, thead) { display: none; }
    & tbody { display: grid; gap: var(--ds-gap-control); }
    & tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: var(--ds-border-default);
      border-radius: var(--ds-radius-control);
    }
    & td { display: block; min-width: var(--ds-space-0); border: 0; }
    & td[data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: var(--ds-gap-caption);
      font-size: var(--ds-font-size-caption);
      color: var(--ds-text-muted);
    }
    & td:has(.ds-input-matrix-choice) { grid-column: 1 / -1; }
  }
}
@container ds-input-matrix (max-width: 74ch) {
  .ds-input-matrix.ds-input-matrix--compact:has(.ds-input-matrix-choice input:not([hidden])) tr,
  .ds-input-matrix.ds-input-matrix--compact tr { grid-template-columns: minmax(0, 1fr); }
}
.ds-record-link {
  display: inline;
  max-width: 100%;
  min-height: var(--ds-space-0);
  padding: var(--ds-space-0);
  overflow: hidden;
  border: var(--ds-border-transparent);
  border-radius: var(--ds-radius-none);
  background: var(--ds-color-transparent);
  color: var(--ds-record-link);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
  letter-spacing: var(--ds-letter-spacing-normal);
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-record-link:is(:hover, :focus-visible) {
  border-bottom: var(--ds-border-default);
  background: var(--ds-color-transparent);
  color: var(--ds-record-link-hover);
}
.ds-feedback {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: var(--ds-border-default);
  border-radius: var(--ds-radius-control);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-caption);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
}
.ds-feedback:is(.info) { border-color: var(--ds-info); background: var(--ds-info-bg); color: var(--ds-info); }
.ds-feedback:empty { display: none; }
.ds-feedback:is(.success, .storage-status-ok) { border-color: var(--ds-success); background: var(--ds-success-bg); color: var(--ds-success); }
.ds-feedback:is(.warning) { border-color: var(--ds-warning); background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-feedback:is(.danger, .error, .storage-status-error) { border-color: var(--ds-danger); background: var(--ds-danger-bg); color: var(--ds-danger); }
.ds-status {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-compact-height);
  padding: var(--ds-status-padding-block) var(--ds-status-padding-inline);
  border: var(--ds-border-transparent);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-info-bg);
  color: var(--ds-info);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-meta);
  font-weight: var(--ds-font-weight-strong);
  line-height: var(--ds-line-height-compact);
  letter-spacing: var(--ds-letter-spacing-normal);
}
.ds-status.monitor-state-up { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-status.monitor-state-degraded { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-status.monitor-state-down { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ds-data-table > tbody > tr.ds-record-deleted > td {
  background: var(--ds-danger-bg);
  border-bottom-color: var(--ds-danger);
}
.ds-status.monitor-state-unknown { background: var(--ds-info-bg); color: var(--ds-info); }
.ds-status.monitor-state-disabled { background: var(--ds-surface-muted); color: var(--ds-text-muted); }

/* Shared screen composition is applied only after tokens and components. */
.ds-screen {
  box-sizing: border-box;
  width: min(var(--ds-content-width), calc(100% - (2 * var(--ds-space-5))));
  max-width: 100%;
  min-width: var(--ds-space-0);
  margin: var(--ds-space-0) var(--ds-space-auto);
  padding: var(--ds-space-5) var(--ds-space-0) var(--ds-space-6);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
}
/* Nested panels share their screen's content box, not a second page gutter. */
.ds-screen > .ds-screen {
  width: 100%;
}
.ds-screen-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-gap-block);
  margin: var(--ds-space-0) var(--ds-space-0) var(--ds-gap-block);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  line-height: var(--ds-line-height-body);
}
.ds-screen-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-gap-block);
  max-width: 100%;
  min-width: var(--ds-space-0);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}
/* One inbox pattern for every alert kind, including dynamically inserted rows. */
.ds-notification-dialog .ds-dialog-header h2 {
  font-size: var(--ds-font-size-heading-section);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-compact);
}
.ds-notification-dialog .ds-dialog-header p {
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
}
.ds-notification-inbox {
  display: grid;
  gap: var(--ds-gap-section);
  min-width: var(--ds-space-0);
  container: ds-notification / inline-size;
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}
.ds-notification-inbox > .ds-notification-section {
  display: grid;
  gap: var(--ds-gap-block);
  min-width: var(--ds-space-0);
  margin: var(--ds-space-0);
  padding: var(--ds-space-0);
  border: var(--ds-space-0);
}
/* Hidden categories must not create another line below the dialog header. */
.ds-notification-section:not(.hidden) ~ .ds-notification-section:not(.hidden) {
  padding-top: var(--ds-gap-section);
  border-top: var(--ds-border-default);
}
.ds-notification-section h3 {
  margin: var(--ds-space-0);
  font-size: var(--ds-font-size-heading-block);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-compact);
}
.ds-notification-section .grid-list { gap: var(--ds-space-0); min-width: var(--ds-space-0); }
.ds-notification-section .ds-notification-heading {
  align-items: center;
  margin: var(--ds-space-0);
  gap: var(--ds-gap-control);
}
.ds-notification-heading > .ds-notification-actions { margin-inline-start: auto; }
.ds-notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-gap-block);
  min-width: var(--ds-space-0);
  padding: var(--ds-space-3) var(--ds-space-0);
  border-bottom: var(--ds-border-default);
}
.ds-notification-item:last-child { border-bottom: var(--ds-space-0); }
.ds-notification-copy { display: grid; gap: var(--ds-gap-caption); min-width: var(--ds-space-0); }
.ds-notification-copy > * { margin: var(--ds-space-0); min-width: var(--ds-space-0); overflow-wrap: anywhere; }
.ds-notification-copy > .ds-notification-title {
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-body);
}
.ds-notification-dialog .ds-notification-description,
.ds-notification-actions > span {
  margin: var(--ds-space-0);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
  color: var(--ds-text-muted);
}
.ds-notification-meta,
.ds-notification-dialog .ds-notification-status {
  margin: var(--ds-space-0);
  font-size: var(--ds-font-size-caption);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-body);
  color: var(--ds-text-muted);
}
.ds-notification-meta:empty,
.ds-notification-status:empty { display: none; }
.ds-notification-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--ds-gap-control);
  max-width: 100%;
  min-width: var(--ds-space-0);
}
.ds-notification-actions > button {
  max-width: 100%;
  min-height: var(--ds-button-height);
  font-size: var(--ds-font-size-caption);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-compact);
  white-space: normal;
}
.ds-notification-copy > button.stock-alert-link {
  justify-self: start;
  min-height: var(--ds-space-0);
  padding: var(--ds-space-0);
  white-space: normal;
}
@media (max-width: 760px) {
  .ds-notification-actions > button { min-height: var(--ds-touch-height); }
}
@container ds-notification (max-width: 480px) {
  .ds-notification-item { grid-template-columns: minmax(0, 1fr); }
  .ds-notification-item > .ds-notification-actions { justify-self: end; }
}
.ds-form-grid {
  display: grid;
  gap: var(--ds-gap-block);
  min-width: var(--ds-space-0);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}

/* Independent blocks fit the available container, not the viewport alone.
 * Explicit instances only: never turn tables, timelines or wizard steps into cards.
 * No dense packing/order: visual order must stay the same as keyboard/DOM order.
 */
.ds-card-grid.ds-card-grid {
  --ds-grid-card-min-width: var(--ds-card-min-width);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-grid-card-min-width)), 1fr));
  grid-auto-flow: row;
  align-items: start;
  gap: var(--ds-gap-block);
  min-width: 0;
  max-width: 100%;
}
.ds-card-grid.ds-card-grid--compact { --ds-grid-card-min-width: var(--ds-card-compact-min-width); }
.ds-card-grid.ds-card-grid--calendar {
  --ds-grid-card-min-width: var(--ds-calendar-month-min-width);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-grid-card-min-width)), var(--ds-grid-card-min-width)));
  justify-content: start;
}
.ds-card-grid.ds-card-grid--calendar-year {
  --ds-grid-card-min-width: var(--ds-calendar-quarter-min-width);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-grid-card-min-width)), var(--ds-grid-card-min-width)));
  justify-content: start;
  margin-block: var(--ds-gap-section);
}
.ds-card-grid--calendar-year > .ds-calendar-quarter {
  margin: var(--ds-space-0);
  max-width: var(--ds-calendar-quarter-min-width);
  box-sizing: border-box;
}
.ds-card-grid.ds-card-grid--form { --ds-grid-card-min-width: var(--ds-card-form-min-width); }
.ds-card-grid.ds-record-accordion-list { --ds-grid-card-min-width: var(--ds-card-account-min-width); }
.ds-card-grid.ds-card-grid--wide { --ds-grid-card-min-width: var(--ds-card-wide-min-width); }
.ds-card-grid.ds-card-grid--ledger { --ds-grid-card-min-width: var(--ds-card-ledger-min-width); }
.ds-card-grid > * { min-width: 0; max-width: 100%; margin: 0; }
.ds-card-grid > :is(p, h2, h3, .section-heading, .empty-operation, .ds-card-grid-span) { grid-column: 1 / -1; }
.ds-flow-record.ds-flow-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-gap-block);
  min-width: 0;
}
.ds-flow-record > :first-child { flex: 1 1 var(--ds-card-copy-min-width); min-width: 0; overflow-wrap: anywhere; }
.ds-flow-record > :last-child {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-gap-control);
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
}
.ds-flow-record > :last-child > * { max-width: 100%; white-space: normal; }
/* Form breakpoints follow the card, not the monitor. Mid-size cards keep two
 * sections but stack their field pairs, avoiding both narrow inputs and tall forms. */
@container ds-record (max-width: 680px) {
  .ds-account-editor > .ds-account-columns { grid-template-columns: minmax(0, 1fr); }
}
@container ds-record (min-width: 681px) and (max-width: 900px) {
  .ds-account-section .ds-account-columns { grid-template-columns: minmax(0, 1fr); }
}
@container ds-record (max-width: 600px) {
  .ds-record-accordion-toggle { grid-template-columns: var(--ds-icon-button-size) minmax(0, 1fr) var(--ds-space-4); gap: var(--ds-gap-control); }
  .ds-record-role, .ds-record-accordion-toggle > .ds-status { grid-column: 2; justify-self: start; }
  .ds-record-expander { grid-column: 3; grid-row: 1; }
}
@container ds-record (max-width: 520px) {
  .ds-account-section .ds-account-columns { grid-template-columns: minmax(0, 1fr); }
  .ds-account-footer > small { flex-basis: 100%; }
  .ds-account-footer > .compact-actions { margin-left: 0; flex-wrap: wrap; }
}
@container ds-record (max-width: 400px) {
  .ds-permission-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds-permission-row > span { grid-column: 1 / -1; padding-top: var(--ds-gap-control); }
}

/*
 * Legacy screen containers keep their intrinsic table/form width inside the
 * canonical screen. Horizontal scrolling belongs to the local table wrapper,
 * never to the whole screen or to an adjacent grid column.
 */
.ds-screen :is(
  .operation-layout,
  .operation-form,
  .operation-history,
  .admin-shell,
  .admin-content,
  .admin-pane,
  .equipment-table-wrap,
  .login-history-wrap,
  .receipt-table-wrap,
  .registry-table-wrap,
  .reconcile-table-wrap
) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: var(--ds-space-0);
}
.ds-screen :is(
  .equipment-table-wrap,
  .login-history-wrap,
  .receipt-table-wrap,
  .registry-table-wrap,
  .reconcile-table-wrap
) {
  overflow-x: auto;
}
.ds-screen .equipment-workspace,
.ds-screen .equipment-workspace > * {
  box-sizing: border-box;
  max-width: 100%;
  min-width: var(--ds-space-0);
}

/* Personal themes: bounded tokens only; independent cards retain intrinsic height. */
.personal-theme-card form, .branding-design-code[open], .admin-design-code-shell[open] { display: grid; gap: var(--ds-gap-block); min-width: 0; }
.personal-theme-card .branding-foundation-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; }
.personal-theme-card .branding-foundation-grid :is(input,select) { height: var(--ds-control-height); min-height: var(--ds-control-height); }
.branding-design-code > summary, #admin-document-retention-block > summary, .admin-design-code-shell > summary { cursor: pointer; font-weight: 700; min-height: var(--ds-button-height); }
.design-component-gallery { margin-top: var(--ds-gap-block); }
.design-component-gallery section { min-width: 0; padding: var(--ds-surface-padding); border: var(--ds-border-default); border-radius: var(--ds-radius-surface); }
.design-swatch { display: inline-flex; padding: 8px 12px; border: var(--ds-border-default); border-radius: var(--ds-radius-control); background: var(--panel); }
.design-swatch--header { background: var(--navy); color: white; }
.design-swatch--accent { background: var(--accent); color: white; }
#admin-module-reminders { margin-bottom: var(--ds-gap-block); }
#admin-publication-file { overflow-wrap: anywhere; }
.personal-theme-card .ds-toolbar, [data-admin-pane="applications"] .ds-toolbar { flex-wrap: wrap; }
[data-admin-pane="applications"] .form-row { align-items: start; }
/* The shared section layout must not override the admin tab state. */
.admin-pane.ds-screen-section:not(.active) { display: none; }
.admin-pane.ds-screen-section.active { display: grid; }

@media (max-width: 980px) {
  .ds-screen .operation-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .section-heading-actions { width: 100%; justify-content: stretch; }
  .section-heading-actions > button { flex: 1 1 220px; }
}

/* Shared form-host variant. The default modal geometry remains unchanged. */
.warehouse-form-workspace { min-width: 0; margin-block: var(--ds-gap-block); }
.warehouse-form-tabs { display: flex; flex-wrap: wrap; gap: var(--ds-gap-control); align-items: center; }
.warehouse-form-tab { display: inline-flex; gap: var(--ds-space-1); align-items: center; min-width: 0; max-width: 100%; }
.warehouse-form-tab > [role="tab"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--ds-card-copy-min-width); }
.warehouse-form-tabs [aria-selected="true"] { background: var(--ds-primary-bg); color: var(--ds-primary-text); }
.warehouse-form-panels, .warehouse-form-panel { min-width: 0; }
.warehouse-form-frame { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: var(--ds-space-0); border: var(--ds-border-default); border-radius: var(--ds-radius-surface); background: var(--ds-surface); }
.warehouse-workspace-active > .tab.active { display: none; }
body.warehouse-form-entry, body.warehouse-form-surface { margin: var(--ds-space-0); padding: var(--ds-space-2); min-width: 0; overflow-x: hidden; }
/* A same-origin form frame follows content height, not its own viewport floor.
 * Keep normal flow (including margins); do not clip nested dialogs or hide
 * overflow as a substitute for measuring the complete editable surface. */
body.warehouse-form-embedded { display: flow-root; height: auto; min-height: var(--ds-space-0); }
body.warehouse-form-embedded dialog:modal {
  position: fixed; top: calc(var(--ds-form-visible-top) + var(--ds-form-visible-height) / 2); bottom: auto;
  margin-block: var(--ds-space-0); transform: translateY(-50%);
  max-height: max(var(--ds-space-0), calc(var(--ds-form-visible-height) - 2 * var(--ds-surface-padding))); overflow: auto;
}
.warehouse-form-entry .site-header, .warehouse-form-entry #app, .warehouse-form-entry #holiday-viewport-effects,
.warehouse-form-surface .site-header, .warehouse-form-surface #app,
.warehouse-form-surface #holiday-viewport-effects, .warehouse-form-embedded #test-environment-banner { display: none; }
.warehouse-form-entry > main, .warehouse-form-surface > main { margin: var(--ds-space-0); padding: var(--ds-space-0); }
.warehouse-form-surface dialog.form-surface-root[open] { position: static; inset: auto; transform: none; width: 100%; min-width: 0; max-width: none; height: auto; max-height: none; margin: var(--ds-space-0); box-sizing: border-box; overflow: visible; }
.warehouse-form-surface .form-surface-root .dialog-heading, .warehouse-form-surface .form-surface-root .dialog-actions { max-width: 100%; }
@media (max-width: 760px) {
  .warehouse-form-tab > button, .warehouse-form-tabs > button { min-height: var(--ds-touch-height); }
  .warehouse-form-tab > [role="tab"] { max-width: calc(100vw - 4 * var(--ds-surface-padding) - var(--ds-touch-height)); }
}