:root {
  --graphite: #333a44;
  --graphite-2: #4b535c;
  --ink: #182029;
  --ink-on-dark: #f7f8f6;
  --lime: #77bc1f;
  --lime-2: #8bf50a;
  --brand-yellow: #ffd206;
  --brand-orange: #f57e2d;
  --brand-burgundy: #990033;
  --brand-pink: #f58bc9;
  --brand-blue: #09a9de;
  --brand-cyan: #52d4e3;
  --brand-teal: #25808a;
  --light: #e4e5e5;
  --white: #fefefe;
  --muted: #69717a;
  --line: rgba(51, 58, 68, 0.14);
  --accent-soft: #eff9e4;
  --surface: #3e4650;
  --surface-soft: #f4f5f3;
  --surface-panel: #414952;
  --surface-panel-2: #353d46;
  --row-a: #d8ddda;
  --row-b: #c7cfca;
  --green-row: #c8ddb8;
  --green-row-strong: #bdd3ac;
  --soon: #f5edce;
  --danger: #f3d7d0;
  --bg: #333a44;
  --radius: 8px;
  --shadow: 0 18px 60px rgba(24, 32, 41, 0.16);
}

.international-launch {
  height: 32px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--brand-yellow);
  color: var(--ink);
  background: var(--brand-orange);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}
.international-launch:hover,
.international-launch:focus-visible {
  border-color: var(--brand-yellow);
  color: var(--ink);
  background: var(--brand-yellow);
}
@media (min-width: 761px) and (max-width: 1400px) {
  .international-launch {
    padding-inline: 8px;
    font-size: 10px;
  }
}

#internationalDialog { width: min(1800px, calc(100vw - 48px)); max-width: none; padding: 0; color: var(--ink-on-dark); background: transparent; border: 0; }
.international-dialog { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); max-height: 94vh; overflow: hidden; border: 0; border-radius: 8px; background: var(--surface-panel-2); }
.international-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; background: var(--ink); }
.international-topbar > div { display: flex; align-items: center; gap: 12px; }
.international-topbar h2 { margin: 0; font-size: 25px; }
#internationalCount { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; color: var(--ink); background: var(--brand-orange); font-weight: 800; }
.international-top-actions { display: flex; align-items: center; gap: 8px; }
.international-tabs { display: flex; gap: 0; padding: 0 20px; background: var(--ink); border-bottom: 1px solid rgba(247,248,245,.12); }
.international-tabs button { min-width: 150px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; }
.international-tabs button.active { color: var(--ink-on-dark); border-bottom-color: var(--brand-orange); background: rgba(245,126,45,.14); }
.international-top-actions .international-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.international-top-actions .international-filter-toggle[aria-expanded="true"] {
  border-color: var(--brand-cyan);
}
.international-filters.is-mobile-collapsed { display: none; }
.international-filters { display: grid; grid-template-columns: 140px minmax(280px, 420px) 200px; width: fit-content; max-width: calc(100% - 40px); box-sizing: border-box; gap: 14px; margin: 8px 20px; padding: 8px 0; align-items: end; }
.international-filters label { display: grid; min-width: 0; gap: 6px; }
.international-filters input, .international-filters select { width: 100%; min-width: 0; min-height: 36px; box-sizing: border-box; }
.international-table-wrap {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 229, 229, .46) var(--surface-panel-2);
}
.international-table-wrap::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.international-table-wrap::-webkit-scrollbar-track {
  background: var(--surface-panel-2);
}
.international-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid var(--surface-panel-2);
  border-radius: 7px;
  background: rgba(228, 229, 229, .46);
}
.international-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(228, 229, 229, .68);
}
.international-table-wrap::-webkit-scrollbar-corner {
  background: var(--surface-panel-2);
}
.international-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
.international-table th { position: sticky; top: 0; z-index: 2; height: 52px; padding: 8px; color: var(--white); background: var(--ink); text-align: center; }
.international-table td { padding: 9px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: var(--surface-soft); text-align: center; vertical-align: middle; overflow-wrap: normal; word-break: normal; }
.international-table tbody tr:nth-child(even) td { background: var(--row-a); }
.international-table tbody tr.international-row--delivered > td {
  background: #e8f3f1;
}
.international-table tbody tr.international-row--complete > td,
.international-table tbody tr.international-row--complete:nth-child(even) > td {
  background: #e5f1dc;
}
.international-table tbody tr.international-row--complete > td:first-child {
  box-shadow: inset 4px 0 0 var(--lime);
}
.international-table tbody tr.international-row--delivered:not(.international-row--complete) > td:first-child {
  box-shadow: inset 4px 0 0 var(--cyan);
}
.international-table tbody tr.international-row--complete .international-status {
  border-color: #67a91b;
  background: #d6ebc5;
  color: #23420f;
}
.international-table th:nth-child(1), .international-table td:nth-child(1) { width: 4%; }
.international-table th:nth-child(2), .international-table td:nth-child(2) { width: 6%; }
.international-table th:nth-child(3), .international-table td:nth-child(3), .international-table th:nth-child(4), .international-table td:nth-child(4) { width: 8%; }
.international-table th:nth-child(5), .international-table td:nth-child(5) { width: 6%; }
.international-table th:nth-child(6), .international-table td:nth-child(6) { width: 10%; }
.international-table th:nth-child(7), .international-table td:nth-child(7) { width: 6%; }
.international-table th:nth-child(8), .international-table td:nth-child(8) { width: 4%; }
.international-table th:nth-child(9), .international-table td:nth-child(9),
.international-table th:nth-child(10), .international-table td:nth-child(10) { width: 5%; }
.international-table th:nth-child(11), .international-table td:nth-child(11) { width: 6%; }
.international-table th:nth-child(12), .international-table td:nth-child(12), .international-table th:nth-child(13), .international-table td:nth-child(13), .international-table th:nth-child(14), .international-table td:nth-child(14) { width: 6%; }
.international-table th:nth-child(15), .international-table td:nth-child(15) { width: 7%; }
.international-table th:nth-child(16), .international-table td:nth-child(16) { width: 7%; }
.international-table td:nth-child(6) { padding-inline: 3px; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.international-table th { white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.international-status { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-height: 30px; padding: 5px 8px; border: 1px solid var(--graphite-2); border-radius: 6px; background: var(--light); color: var(--ink); font-weight: 800; line-height: 1.15; text-align: center; white-space: nowrap; }
.international-status[data-status="Передано"],
.international-status[data-status="Получено"] { border-color: var(--lime); background: var(--accent-soft); }
.international-status[data-status="Передано частично"],
.international-status[data-status="Получено частично"] { border-color: var(--lime); background: var(--green-row); }
.international-status[data-status="В транзите"] { border-color: var(--brand-orange); background: var(--soon); }
.international-status-content { display: grid; align-items: center; justify-items: center; min-width: 0; max-width: 100%; }
.international-actions { display: grid; grid-template-columns: repeat(2, 34px); align-items: center; justify-content: center; gap: 6px; }
.international-actions button, .international-document-button, .international-movement { min-height: 32px; padding: 4px 8px; font-size: 12px; }
.international-actions > [data-intl-stock] { grid-column: 1 / -1; width: 100%; }
.international-actions .stock-action-icon-button { flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 5px; }
.international-row-actions { display: grid; gap: 5px; width: 100%; }
.international-row-actions button { width: 100%; min-width: 0; min-height: 30px; padding: 4px 5px; font-size: 11px; }
.international-action-label { display: none; }
.international-document-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid #d66b16;
  border-radius: 50%;
  color: var(--ink);
  background: var(--brand-orange);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.international-tracking span { display: inline-block; margin: 2px; padding: 4px 6px; border-radius: 4px; color: var(--white); background: var(--graphite-2); }
.international-tracking-link {
  display: inline-grid;
  place-items: center;
  gap: 2px;
  width: auto;
  min-width: 72px;
  min-height: 42px;
  margin: 2px;
  padding: 5px 8px;
  border: 1px solid #d1aa00;
  border-radius: 6px;
  background: #ffd206;
  color: #252c34;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.international-tracking-link strong { font-size: 12px; }
.international-tracking-link span { margin: 0; padding: 0; color: #252c34; background: transparent; font-size: 10px; font-weight: 800; }
.international-tracking-link:hover,
.international-tracking-link:focus-visible {
  border-color: #f57e2d;
  background: #ffe052;
  color: #252c34;
}
.international-received-dates { display: grid; justify-items: center; gap: 3px; font-weight: 800; }
.international-movements { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 6px; }
.international-movement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: stretch;
  gap: 3px;
  width: min(100%, 138px);
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid #73b72b;
  border-radius: 6px;
  color: var(--ink);
  background: #eef7e8;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
}
.international-movement-open { display: grid; justify-items: center; gap: 2px; min-width: 0; min-height: 38px; padding: 2px 3px; border: 0; background: transparent; color: inherit; line-height: inherit; }
.international-movement-open > span { max-width: 100%; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.international-movement-open > strong { white-space: nowrap; }
.international-movement-open:hover,
.international-movement-open:focus-visible { background: rgba(119,188,31,.18); }
.international-movement-delete { align-self: stretch; width: 26px; min-width: 26px; min-height: 38px; padding: 4px; border: 0; background: transparent; }
.international-movement-delete svg { width: 18px; height: 18px; }
.international-movement-delete:hover,
.international-movement-delete:focus-visible { background: #fbeaea; }
.international-movement-remove {
  display: inline-grid;
  place-items: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #fff;
  background: #bd4545;
  font-size: 15px;
  line-height: 1;
}
.international-empty { height: 150px; color: rgba(32,42,50,.65) !important; }
#internationalEditDialog, #internationalStockDialog { max-width: none; padding: 0; color: var(--ink-on-dark); background: transparent; border: 0; }
#internationalEditDialog { width: min(94vw, 1060px); }
#internationalStockDialog { width: min(92vw, 720px); overflow: visible; }
.international-edit-dialog, .international-stock-dialog { max-height: 92vh; overflow: auto; padding: 20px; border: 1px solid rgba(247,248,245,.14); border-radius: 8px; background: var(--surface); }
.international-stock-dialog { overflow: visible; }
.international-stock-dialog .custom-select.open { z-index: 100; }
.international-stock-dialog .custom-select-menu { max-height: min(280px, calc(100dvh - 190px)); }
.international-edit-dialog header, .international-stock-dialog header, .international-edit-dialog footer, .international-stock-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.international-edit-dialog h2, .international-stock-dialog h2, .international-lines-section h3, .international-tracking-section h3 { margin: 0; }
.international-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.international-edit-grid label, .international-stock-fields label { display: grid; gap: 5px; }
.international-edit-grid input, .international-edit-grid select, .international-edit-grid textarea, .international-stock-fields input, .international-stock-fields select { width: 100%; }
.international-wide-field { grid-column: span 2; }
.international-edit-grid .international-note-field { grid-column: 3; grid-row: 3 / span 2; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.international-note-field textarea { box-sizing: border-box; min-height: 64px; resize: vertical; }
.international-attached-documents { grid-column: 1 / -1; min-width: 0; display: grid; gap: 6px; }
.international-attached-documents h3 { margin: 0; font-size: 14px; }
.international-attached-documents p { margin: 0; }
.international-attached-document { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.international-attached-document button { min-height: 40px; padding: 8px 12px; }
.international-attached-documents a { display: block; padding: 8px 10px; border: 1px solid rgba(245,126,45,.45); border-radius: 6px; color: var(--ink-on-dark); background: rgba(245,126,45,.08); overflow-wrap: anywhere; }
.international-file-section { grid-column: 1 / -1; display: grid; gap: 10px; min-width: 0; margin-top: 8px; padding: 14px; border: 1px solid rgba(247,248,245,.14); border-radius: 6px; background: rgba(24,32,41,.14); }
.international-file-section h3 { margin: 0; font-size: 16px; }
.international-file-picker { width: min(100%, 480px); min-width: 0; font-size: 13px; color: rgba(255,255,255,.76); }
.international-file-picker input { min-width: 0; }
.international-file-actions { display: grid; gap: 8px; min-width: 0; }
.international-file-actions[hidden] { display: none; }
.international-file-actions .tracking-recognition-choice-actions button { min-height: 38px; }
#internationalDocumentStatus:empty { display: none; }
#internationalDocumentStatus { display: block; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.76); }
.international-file-section .international-attached-documents { padding-top: 12px; border-top: 1px solid rgba(247,248,245,.14); }
.international-file-section .international-attached-documents h3 { font-size: 14px; }
.international-file-section .international-attached-documents p { font-size: 13px; color: rgba(255,255,255,.76); }
.international-lines-section, .international-tracking-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(247,248,245,.12); }
.international-tracking-section { padding-bottom: 0; }
.international-lines-section > div:first-child { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.international-tracking-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; }
.international-tracking-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.international-tracking-heading span { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 600; white-space: nowrap; }
#internationalChooseTracking { min-height: 36px; margin: 0; padding: 6px 12px; border: 1px solid var(--brand-yellow); }
#internationalChooseTracking:hover,
#internationalChooseTracking:focus-visible { color: var(--ink); background: var(--brand-yellow); }
#internationalChooseTracking:disabled { border-color: rgba(247,248,245,.24); color: rgba(255,255,255,.62); background: transparent; cursor: not-allowed; }
#internationalLines { display: grid; gap: 8px; margin-top: 10px; }
.international-line-editor { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(85px, .65fr) minmax(125px, 1fr) minmax(145px, 1.1fr) 36px; gap: 8px; align-items: end; padding-block: 8px; border-bottom: 1px solid #657078; }
.international-line-editor > label { min-width: 0; }
.international-line-editor input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; }
.international-edit-dialog .international-line-editor [data-intl-equipment-select] { width: 100%; min-width: 0; height: 36px; min-height: 36px; box-sizing: border-box; padding: 6px 9px; }
.international-line-editor .custom-select { min-width: 0; }
.international-line-editor .custom-select-menu { position: fixed; right: auto; bottom: auto; box-sizing: border-box; max-height: min(280px, 38dvh); margin: 0; }
.international-line-editor [data-intl-line="equipment"]:not([hidden]) { margin-top: 5px; }
.international-line-editor output { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 7px 9px; border: 1px solid rgba(228, 229, 229, 0.18); border-radius: 6px; background: rgba(24, 32, 41, 0.18); color: var(--ink-on-dark); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.international-line-editor > [data-intl-remove-line] { grid-column: -2; grid-row: 1; }
.international-position-operations { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.international-position-operations > div { width: 100%; display: flex; align-items: center; gap: 12px; }
.international-position-operations > div > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.international-position-operations > .international-position-action {
  width: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.international-line-editor .international-position-action > label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  width: auto;
  min-height: 36px;
  margin: 0;
  color: var(--ink-on-dark);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.international-line-editor .international-position-action input {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
}
.international-line-editor .international-position-operations button { width: auto; min-width: 42px; padding-inline: 12px; }
.international-line-editor .international-position-operations .stock-action-icon-button { flex: 0 0 42px; width: 42px; padding: 0; }
.international-line-values > div { box-sizing: border-box; padding: 6px 0; display: flex; align-items: center; justify-content: center; word-break: normal; overflow-wrap: normal; }
.international-line-values > div + div { border-top: 1px solid #aeb9b5; }
.international-badge-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.international-badge-list > button { flex-shrink: 0; margin: 0; }
.international-line-editor > label { align-self: start; }
.international-line-editor label { min-height: 0; }
.international-line-editor label { display: grid; gap: 5px; }
.international-line-editor button { width: 42px; height: 42px; padding: 0; }
#internationalTrackingChoices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 7px;
  max-height: none;
  margin: 8px 0 0;
  padding-right: 0;
  overflow: visible;
}
.international-tracking-section #internationalTrackingChoices > p { margin: 0; padding: 4px 0 2px; color: rgba(255,255,255,.72); font-size: 13px; }
.international-edit-dialog .international-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 16px 0 0; padding: 12px 0 8px; border: 0; border-top: 1px solid rgba(247,248,245,.12); background: transparent; }
.international-edit-dialog .international-edit-actions { flex-wrap: wrap; }
.international-edit-dialog .international-edit-actions button { width: auto; min-width: 108px; min-height: 44px; padding: 10px 16px; white-space: nowrap; }
.international-edit-dialog { padding: 16px 16px 8px; }
.international-edit-dialog header { flex-wrap: wrap; }
.international-edit-dialog .international-line-editor input,
.international-edit-dialog .international-line-editor output { min-height: 36px; padding: 6px 9px; }
.international-edit-dialog .international-line-editor button { height: 36px; min-height: 36px; }
.international-edit-dialog .international-line-editor .custom-select-button {
  display: block;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 6px 34px 6px 9px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.international-edit-dialog .international-line-editor .custom-select-menu button {
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 7px 10px;
  white-space: normal;
}
.international-edit-dialog .international-line-editor > [data-intl-remove-line] { width: 36px; min-width: 36px; }
@media (min-width: 761px) and (max-width: 1000px) {
  .international-line-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .international-line-editor > label:first-child { grid-column: 1 / 3; }
  .international-line-editor > [data-intl-remove-line] { grid-column: 3; }
  .international-line-editor > label:nth-of-type(2) { grid-column: 1; }
  .international-line-editor > label:nth-of-type(3) { grid-column: 2 / 4; }
  .international-line-editor > label:nth-of-type(4) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .international-edit-dialog .international-line-editor input,
  .international-edit-dialog .international-line-editor output { min-height: 44px; }
  .international-edit-dialog .international-line-editor [data-intl-equipment-select] { height: 44px; min-height: 44px; }
  .international-edit-dialog .international-line-editor button { height: 44px; min-height: 44px; }
  .international-edit-dialog .international-line-editor > [data-intl-remove-line] { width: 44px; min-width: 44px; }
}
#internationalTrackingChoices label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(247,248,245,.12);
  border-radius: 6px;
  line-height: 1.35;
}
#internationalTrackingChoices label span { min-width: 0; overflow-wrap: anywhere; }
#internationalTrackingChoices label.selected { border-color: var(--brand-orange); background: rgba(245,126,45,.14); }
#internationalTrackingChoices input { flex: 0 0 auto; }
.international-linked-tracking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 210, 6, .42);
  border-radius: 6px;
  background: rgba(255, 210, 6, .08);
}
.international-linked-tracking span { min-width: 0; overflow-wrap: anywhere; }
.international-linked-tracking button {
  position: relative;
  z-index: 2;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 6px;
  border: 1px solid #d85b5b;
  background: #a93f43;
  touch-action: manipulation;
}
.international-linked-tracking button svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; }
.international-linked-tracking.is-removing { opacity: .55; pointer-events: none; }
.international-linked-tracking button:hover,
.international-linked-tracking button:focus-visible { background: #c6494e; }
.international-edit-dialog footer, .international-stock-dialog footer { justify-content: flex-end; margin-top: 18px; }
.international-stock-dialog footer { flex-wrap: wrap; }
.international-stock-dialog footer button { max-width: 100%; white-space: normal; }
.international-edit-dialog > footer {
  position: static;
  flex: 0 0 auto;
  min-height: 66px;
  margin: 14px -20px -20px;
  padding: 11px 20px;
  border-top: 1px solid rgba(247,248,245,.12);
  background: #39414a;
}
.international-edit-dialog > footer button {
  min-width: 132px;
  min-height: 42px;
  padding: 8px 18px;
}
.international-edit-dialog > footer .stock-action-icon-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 4px;
}
.international-stock-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.international-stock-matches { display: grid; gap: 8px; margin-top: 14px; }
.international-stock-matches > label { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(247,248,245,.13); border-radius: 6px; }
.international-stock-matches > label.similar { border-color: rgba(255,210,6,.45); }
.international-stock-matches > label.exact { border-color: rgba(126,224,0,.45); }
.international-stock-matches > label span { display: grid; gap: 3px; width: 100%; }
.international-stock-matches small { color: rgba(247,248,245,.65); }
.international-stock-matches select { width: 100%; margin-top: 5px; }

@media (max-width: 900px) {
  #internationalDialog { width: calc(100vw - 24px); height: calc(100dvh - 24px); margin: 12px; }
  .international-dialog { min-height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); border-radius: 8px; }
  .international-topbar { align-items: stretch; flex-direction: column; padding: 14px; }
  .international-topbar > div { justify-content: space-between; flex-wrap: wrap; }
  .international-topbar h2 { font-size: 22px; }
  .international-top-actions button { flex: 1 1 auto; }
  .international-tabs { padding: 0 14px; }
  .international-tabs button { flex: 1; min-width: 0; }
  .international-filters { grid-template-columns: 120px minmax(180px, 1fr) 180px; width: auto; max-width: none; margin: 8px 14px; padding: 6px 0; }
  .international-table-wrap { padding: 0 12px 18px; overflow: visible; }
  .international-table, .international-table tbody { display: block; width: 100%; min-width: 0; }
  .international-table thead { display: none; }
  .international-table tr { display: grid; width: 100%; margin: 10px 0; padding: 8px; border: 1px solid rgba(247,248,245,.12); border-radius: 8px; background: var(--surface); }
  .international-table td, .international-table tbody tr:nth-child(even) td { display: grid; grid-template-columns: 115px minmax(0, 1fr); align-items: center; width: auto !important; height: auto !important; min-height: 42px; padding: 7px; color: var(--ink-on-dark); background: transparent; border: 0; border-bottom: 1px solid rgba(247,248,245,.08); text-align: left; overflow: visible; }
  .international-table td:nth-child(6) { white-space: normal; font-size: inherit; }
  .international-table td::before { content: attr(data-label); color: rgba(247,248,245,.62); font-size: 12px; font-weight: 700; }
  .international-table .international-cell-value,
  .international-table td > button,
  .international-table td > div {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
  }
  .international-table .international-line-values > div {
    justify-content: flex-start;
    text-align: left;
  }
  .international-table td[data-label="Документы"],
  .international-table td[data-label="Трекинг"],
  .international-table td[data-label="Дата получения"],
  .international-table td[data-label="Статус"],
  .international-table td[data-label="Действия"] {
    min-height: 64px;
  }
  .international-table td[data-label="Документы"] > *,
  .international-table td[data-label="Трекинг"] > * {
    margin: 0;
  }
  .international-table td[data-label="Действия"] {
    align-items: start;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .international-table td[data-label="Действия"]::before {
    align-self: start;
    padding-top: 8px;
  }
  .international-table td[data-label="Действия"] .international-actions {
    align-self: start;
    margin: 0;
  }
  .international-table td:empty { display: none; }
  .international-edit-dialog { min-height: 100dvh; max-height: none; border-radius: 0; }
  #internationalEditDialog { width: 100%; margin: 0; }
  .international-edit-grid, .international-stock-fields { grid-template-columns: 1fr; }
  .international-wide-field { grid-column: auto; }
  .international-edit-grid .international-note-field { grid-column: auto; grid-row: auto; }
  .international-line-editor { grid-template-columns: repeat(2, minmax(0, 1fr)) 42px; }
  .international-line-editor > label:first-child { grid-column: 1 / 3; }
  .international-line-editor > label:nth-of-type(2) { grid-column: 1; }
  .international-line-editor > label:nth-of-type(3) { grid-column: 2 / 4; }
  .international-line-editor > label:nth-of-type(4) { grid-column: 1 / -1; }
  .international-line-editor > [data-intl-remove-line] { grid-column: 3; }
  #internationalTrackingChoices { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #internationalDialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); margin: 6px; }
  .international-dialog { min-height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .international-topbar { gap: 10px; padding: 10px; }
  .international-topbar h2 { font-size: 19px; line-height: 1.15; }
  .international-top-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .international-top-actions button { width: 100%; min-width: 0; padding-inline: 8px; }
  .international-top-actions > #internationalFiltersToggle { grid-column: 1; grid-row: 1; }
  .international-top-actions > #internationalImportButton { grid-column: 2; grid-row: 1; }
  .international-top-actions > #internationalAddButton { grid-column: 1; grid-row: 2; }
  .international-top-actions > [data-dialog-refresh] { grid-column: 2; grid-row: 2; justify-self: stretch; }
  .international-top-actions > [data-close] { grid-column: 1 / -1; grid-row: 3; }
  .international-tabs { padding: 0 8px; }
  .international-tabs button { padding-inline: 6px; font-size: 13px; }
  .international-top-actions .international-filter-toggle[aria-expanded="true"] { color: var(--ink-on-dark); background: rgba(82, 212, 227, .12); }
  .international-filters { grid-template-columns: 1fr; gap: 10px; margin: 8px; padding: 6px 0; }
  .international-filters.is-mobile-collapsed { display: none; }
  .international-table-wrap { min-height: 0; padding: 0 8px 12px; overflow-x: hidden; overflow-y: auto; }
  .international-table tr { max-width: 100%; margin: 8px 0; padding: 6px; overflow: hidden; box-sizing: border-box; }
  .international-table td, .international-table tbody tr:nth-child(even) td { grid-template-columns: 94px minmax(0, 1fr); max-width: 100%; padding: 7px 5px; box-sizing: border-box; }
  .international-table td::before { align-self: center; padding-top: 0; line-height: 1.25; }
  .international-table td[data-label="Документы"] > *,
  .international-table td[data-label="Трекинг"] > * { justify-self: start; }
  .international-table .international-cell-value,
  .international-table .international-line-values,
  .international-table .international-line-values > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .international-document-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 50%; }
  .international-tracking-item { --international-tracking-size: 44px; }
  .international-table td[data-label="Статус"] { align-items: center; padding-top: 10px; padding-bottom: 10px; }
  .international-table td[data-label="Статус"]::before,
  .international-table td[data-label="Статус"] .international-status-content { align-self: center; }
  .international-status-content { display: grid; align-items: center; justify-items: start; gap: 8px; width: 100%; min-width: 0; }
  .international-status { width: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .international-movements { display: grid; justify-content: stretch; width: 100%; margin-top: 0; }
  .international-movement { grid-template-columns: minmax(0, 1fr) 44px; width: 100%; max-width: 240px; min-height: 54px; }
  .international-movement-open { min-height: 48px; padding: 5px 8px; }
  .international-movement-delete { width: 44px; min-width: 44px; min-height: 48px; }
  .international-table td[data-label="Действия"] { align-items: start; min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
  .international-actions { display: flex; align-items: center; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; }
  .international-actions > [data-intl-stock] { flex: 1 0 100%; width: 100%; min-height: 44px; }
  .international-actions .stock-action-icon-button { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .international-table td[data-label="Действия"] > button { width: 100%; min-height: 44px; }
  .international-row-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .international-row-actions button { min-height: 44px; font-size: 12px; }
  #internationalEditDialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  .international-edit-dialog { width: 100%; min-height: 100dvh; max-height: 100dvh; padding: 12px 12px 6px; overflow-x: hidden; overflow-y: auto; }
  .international-edit-dialog > header { position: sticky; top: -12px; z-index: 6; margin: -12px -12px 0; padding: 12px; background: var(--surface); }
  .international-edit-dialog h2 { min-width: 0; font-size: 20px; line-height: 1.2; }
  .international-edit-dialog header button { flex: 0 0 auto; }
  .international-edit-grid { gap: 10px; margin-top: 12px; }
  .international-line-editor { grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; gap: 6px; }
  .international-line-editor button { width: 44px; height: 44px; }
  .international-tracking-heading { align-items: flex-start; }
  #internationalChooseTracking { width: 100%; }
  .international-linked-tracking { grid-template-columns: minmax(0, 1fr) 44px; padding: 7px; }
  .international-linked-tracking button { width: 44px; min-width: 44px; height: 44px; }
  .international-attached-document { grid-template-columns: minmax(0, 1fr); }
  .international-attached-document button { width: 100%; min-height: 44px; }
  .international-edit-dialog .international-edit-actions { padding-bottom: 8px; }
  #internationalStockDialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); margin: 6px; }
  .international-stock-dialog { max-height: calc(100dvh - 12px); padding: 12px; overflow-x: hidden; overflow-y: auto; }
  .international-stock-dialog header { align-items: flex-start; }
  .international-stock-dialog h2 { font-size: 21px; line-height: 1.2; }
  .international-stock-dialog footer button { flex: 1 1 0; min-width: 0; }
}

/* Compact desktop table: preserve columns without letting content cross borders. */
@media (min-width: 901px) and (max-width: 1650px) {
  .international-table { font-size: clamp(9px, .72vw, 11px); }
  .international-table th {
    height: 46px;
    padding: 5px 3px;
    font-size: clamp(8px, .66vw, 10px);
    line-height: 1.08;
  }
  .international-table td {
    padding: 6px 4px;
    line-height: 1.22;
    overflow: hidden;
  }
  .international-table .international-cell-value,
  .international-table .international-line-values,
  .international-table .international-line-values > div {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .international-table .international-status {
    min-width: 0;
    max-width: 100%;
    min-height: 28px;
    padding: 4px 5px;
    font-size: clamp(8px, .68vw, 10px);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .international-table td[data-label="Действия"] > button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 3px;
    font-size: clamp(8px, .68vw, 10px);
    white-space: normal;
  }
  .international-row-actions button {
    min-height: 32px;
    padding: 4px 3px;
    font-size: clamp(8px, .68vw, 10px);
  }
  .international-table .international-tracking-link {
    min-width: 0;
    max-width: 100%;
    padding-inline: 4px;
  }
}


* { box-sizing: border-box; }
[hidden] { display: none !important; }
html,
body {
  min-height: 100%;
  background: #333a44;
}
body {
  margin: 0;
  color: var(--ink-on-dark);
  background:
    linear-gradient(180deg, rgba(51, 58, 68, .96), rgba(39, 45, 52, .98)),
    url("/assets/bg-dark-lines.webp") center / cover fixed;
  font: 14px/1.35 "Inter", "Segoe UI", Arial, sans-serif;
}
[hidden] { display: none !important; }
dialog:not([open]) { display: none !important; }
button, input, select, textarea { font: inherit; }
button {
  border: 0;
  background: var(--graphite);
  color: #fff;
  padding: 8px 13px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
}
button:hover { background: var(--graphite-2); }
.filters > button,
.login-panel button,
.dialog-panel > button,
.stack-form button {
  background: var(--lime);
  color: var(--graphite);
}
.filters > button:hover,
.login-panel button:hover,
.dialog-panel > button:hover,
.stack-form button:hover {
  background: var(--lime-2);
}
label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.app-shell label,
dialog label {
  color: rgba(247, 248, 246, .68);
}
.login-panel label {
  color: var(--muted);
}
input, select, textarea {
  border: 1px solid rgba(228, 229, 229, 0.18);
  border-radius: var(--radius);
  padding: 7px 9px;
  min-width: 0;
  color: var(--ink-on-dark);
  background: rgba(24, 32, 41, 0.3);
  caret-color: var(--lime);
  accent-color: var(--lime);
}
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
}
select {
  background-color: #303842;
  color: var(--ink-on-dark);
}
select:focus,
input:focus,
textarea:focus {
  outline: 2px solid rgba(119, 188, 31, .45);
  outline-offset: 1px;
  border-color: rgba(119, 188, 31, .65);
}
select option {
  background: #303842;
  color: #eef2ee;
}
select option:checked {
  background: #46503f;
  color: #ffffff;
}
select option:hover {
  background: #414a54;
  color: #ffffff;
}
input::placeholder, textarea::placeholder { color: rgba(247, 248, 246, .52); }
textarea { min-height: 64px; resize: vertical; }
textarea.compact-note {
  min-height: 36px;
  height: 36px;
  resize: none;
  overflow: hidden;
}
textarea.compact-note.expanded {
  min-height: 92px;
  height: 92px;
  resize: vertical;
  overflow: auto;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 74% 18%, rgba(119, 188, 31, 0.16), transparent 30%),
    linear-gradient(135deg, #fefefe 0%, #e4e5e5 100%);
}
.login-panel {
  width: min(390px, calc(100vw - 40px));
  display: grid;
  gap: 16px;
  padding: 28px;
  background: rgba(254, 254, 254, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.login-panel,
.login-panel * {
  box-sizing: border-box;
}
.login-brand {
  width: 100%;
  overflow: hidden;
}
.login-brand img {
  width: 164px;
  margin-bottom: 14px;
}
.login-panel h1 {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
  font-weight: 600;
  color: #3a4350;
  white-space: normal;
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-bottom: 2px;
}
.login-panel label {
  width: 100%;
}
.login-panel input,
.login-panel button {
  width: 100%;
  max-width: 100%;
}
.login-panel p { margin: 4px 0 0; color: var(--muted); }
.form-error { color: #a42323; min-height: 18px; }

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(51, 58, 68, .98), rgba(39, 45, 52, .98)),
    url("/assets/bg-dark-lines.webp") center / cover fixed;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  background:
    linear-gradient(90deg, rgba(51, 58, 68, 0.98), rgba(75, 83, 92, 0.93)),
    url("/assets/bg-dark-lines.webp") center / cover;
  border-bottom: 1px solid rgba(228, 229, 229, 0.16);
  color: var(--white);
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand-logo-dark {
  width: 150px;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .16));
}
.topbar h1 { margin: 0; font-size: 22px; }
.topbar p { margin: 2px 0 0; color: rgba(254, 254, 254, .72); }
.topbar nav,
.topbar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nav-group--modules {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.spec-workbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  grid-column: 7;
  grid-row: 1 / span 2;
  min-height: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  overflow: visible;
  border-bottom: 0;
  background: transparent;
  width: fit-content;
  justify-self: end;
  gap: 8px;
}
.spec-workbar-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  max-width: 100%;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(82, 212, 227, 0.24);
  border-radius: 8px;
  background: rgba(37, 128, 138, 0.12);
}
.spec-workbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding-inline: 10px;
  background: rgba(254, 254, 254, 0.08);
  border: 1px solid rgba(82, 212, 227, 0.30);
  white-space: nowrap;
}
.spec-workbar-button:hover {
  background: var(--lime);
  color: var(--graphite);
}
.spec-workbar-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (min-width: 761px) and (max-width: 1400px) {
  .spec-workbar-button {
    padding-inline: 7px;
    font-size: 10px;
  }
  .spec-workbar .spec-workbar-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .spec-workbar-label {
    grid-column: 1 / -1;
    min-height: 20px;
    padding-right: 0;
    padding-bottom: 5px;
    border-right: 0;
    border-bottom: 1px solid rgba(82, 212, 227, 0.26);
  }
  .spec-workbar-button {
    width: 100%;
  }
}
.task-tracker-launch {
  margin: auto 0;
  width: auto;
  min-width: 86px;
  min-height: 32px;
  height: 32px;
  align-self: flex-end;
  padding: 0 14px;
  border: 1px solid #52d4e3;
  background: #25808a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.task-tracker-launch:hover,
.task-tracker-launch:focus-visible {
  border-color: #52d4e3;
  background: #52d4e3;
  color: var(--ink);
}
@media (min-width: 1101px) {
  .spec-workbar {
    grid-column: 6;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-self: stretch;
    align-items: stretch;
    gap: 0;
  }

  .task-tracker-launch {
    margin: 0;
    align-self: center;
    justify-self: end;
  }

  .spec-workbar-group {
    width: fit-content;
    justify-self: end;
  }
}
.spec-workbar-label {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding-right: 8px;
  border-right: 1px solid rgba(82, 212, 227, 0.26);
  color: rgba(247, 248, 246, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}
.topbar button,
.spec-workbar-button {
  background: rgba(254, 254, 254, 0.08);
  border: 1px solid rgba(254, 254, 254, 0.18);
}
.spec-workbar-button {
  border-color: rgba(82, 212, 227, 0.30);
}
.nav-group--modules button {
  border-color: rgba(254, 254, 254, 0.18);
}
.topbar button:hover,
.spec-workbar-button:hover {
  background: var(--lime);
  color: var(--graphite);
}
.warehouse-all-button {
  background: var(--lime) !important;
  color: var(--graphite) !important;
}
.warehouse-all-button:hover {
  background: var(--lime-2) !important;
  color: var(--graphite) !important;
}
.filters {
  display: grid;
  grid-template-columns: 110px minmax(170px, 260px) minmax(120px, 180px) minmax(135px, 170px) minmax(155px, 220px) 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(53, 61, 70, .96);
  border-bottom: 1px solid rgba(228, 229, 229, 0.12);
}
.filters > label:has(#statusFilter) {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.filters > label:has(#statusFilter) .custom-select,
.filters > label:has(#statusFilter) .custom-select-button,
#statusFilter {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 761px) {
  .app-shell > .filters > label:has(#statusFilter) {
    width: 300px !important;
    max-width: 100% !important;
    justify-self: start !important;
  }
}
.period-filter {
  grid-column: 1 / 7;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(126px, 150px) minmax(150px, 180px) minmax(150px, 190px) minmax(130px, 170px) max-content;
  align-items: end;
  justify-content: start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding-top: 2px;
}
.period-filter button {
  height: 36px;
  background: rgba(254, 254, 254, 0.08);
  border: 1px solid rgba(254, 254, 254, 0.18);
  color: var(--ink-on-dark);
}
.period-filter button:hover {
  background: rgba(254, 254, 254, 0.14);
  color: #fff;
}
.period-filter #missingStockFilterButton.is-active {
  border-color: var(--lime);
  background: rgba(113, 190, 16, 0.16);
  color: #fff;
}
select.has-custom-select {
  display: none;
}
.custom-select {
  position: relative;
}
.custom-select-button {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 34px 7px 12px;
  border: 1px solid rgba(254, 254, 254, 0.18);
  border-radius: var(--radius);
  background: rgba(254, 254, 254, 0.08);
  color: var(--ink-on-dark);
  text-align: left;
  font-weight: 700;
}
.custom-select-button::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 5px;
  color: rgba(247, 248, 246, .86);
  font-size: 20px;
  line-height: 1;
}
.custom-select.searchable::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 5px;
  pointer-events: none;
  color: rgba(247, 248, 246, .86);
  font-size: 20px;
  line-height: 1;
}
.custom-select-search {
  box-sizing: border-box;
  font: inherit;
  cursor: text;
}
.custom-select-search::-webkit-search-cancel-button { display: none; }
.filters .custom-select-button {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}
.custom-select.open .custom-select-button {
  border-color: rgba(254, 254, 254, 0.34);
  background: rgba(254, 254, 254, 0.12);
  box-shadow: 0 0 0 2px rgba(119, 188, 31, .34);
}
.custom-select-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow: auto;
  padding: 4px;
  border: 1px solid rgba(254, 254, 254, 0.18);
  border-radius: 6px;
  background: #343c45;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}
#editDocumentType + .custom-select .custom-select-menu {
  top: auto;
  bottom: calc(100% + 4px);
  max-height: min(280px, calc(40dvh / var(--editor-scale, 1)));
}
#editLineDialog {
  box-sizing: border-box;
  width: min(920px, calc(100vw / var(--editor-scale, 1) - 16px));
  max-width: calc(100vw / var(--editor-scale, 1) - 16px) !important;
  max-height: calc(100dvh / var(--editor-scale, 1) - 16px) !important;
  overflow: auto;
}
#editLineForm { min-width: 0; max-width: 100%; box-sizing: border-box; }
#editLineForm h2 { overflow-wrap: anywhere; }
#editLineDocuments .attached-item { grid-template-columns: minmax(0, 1fr) 44px; }
#editLineDocuments .attached-open-button { min-width: 0; background: var(--accent, #80bf16); border-radius: 6px; padding: 6px; box-sizing: border-box; }
#editLineDocuments .attached-open-button strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#editLineDocuments .stock-action-icon-button { width: 44px; height: 44px; }
.custom-select-menu button {
  width: 100%;
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  color: #eef2ee;
  text-align: left;
  font-weight: 600;
}
.custom-select-menu button:hover,
.custom-select-menu button:focus {
  background: rgba(254, 254, 254, 0.10);
  color: #fff;
  outline: none;
}
.custom-select-menu button.selected {
  background: rgba(119, 188, 31, .18);
  color: #fff;
}
.custom-select-empty {
  margin: 0;
  padding: 10px;
  color: #c6cdd2;
  font-size: 13px;
  text-align: center;
}
select option:checked,
select option:hover,
select option:focus {
  background: #46503f linear-gradient(#46503f, #46503f);
  color: #ffffff;
  box-shadow: 0 0 0 100px #46503f inset;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 1px;
  background: rgba(228, 229, 229, 0.12);
  padding: 1px 20px;
}
.metric-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(65, 73, 82, .96);
  border-top: 3px solid rgba(254, 254, 254, 0.12);
  border-radius: 0;
  color: var(--ink-on-dark);
  text-align: left;
  min-width: 0;
}
.metric-card:hover {
  background: rgba(75, 83, 92, .98);
  color: var(--ink-on-dark);
  border-top-color: rgba(119, 188, 31, .76);
}
.metric-card:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
  border-top-color: var(--lime);
}
.metrics span { color: rgba(247, 248, 246, .68); font-size: 12px; }
.metrics strong { font-size: 20px; }
.workspace {
  --side-pane-width: clamp(340px, 18vw, 420px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px var(--side-pane-width);
  gap: 0;
  padding: 10px 12px 14px;
  overflow: hidden;
  background: rgba(39, 45, 52, .92);
}
.workspace.resizing {
  cursor: col-resize;
  user-select: none;
}
.workspace.resizing * {
  user-select: none;
}
.workspace-splitter {
  position: relative;
  cursor: col-resize;
  min-width: 10px;
  border-radius: 8px;
}
.workspace-splitter::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(228, 229, 229, .18);
}
.workspace-splitter:hover::before,
.workspace-splitter:focus-visible::before,
.workspace.resizing .workspace-splitter::before {
  width: 3px;
  background: rgba(119, 188, 31, .72);
}
.workspace-splitter:focus-visible {
  outline: 1px solid rgba(119, 188, 31, .72);
  outline-offset: -1px;
}
.table-pane, .side-pane section {
  background: var(--surface-panel);
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: var(--radius);
}
.table-pane {
  overflow-y: auto;
  overflow-x: hidden;
}
.digest-table, .summary-table {
  width: 100%;
  border-collapse: collapse;
}
.digest-table {
  table-layout: fixed;
  width: calc(100% - 2px);
  max-width: 100%;
  font-size: clamp(10px, .72vw, 13px);
}
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--graphite);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  border-right: 1px solid rgba(255,255,255,.24);
}
.digest-table th {
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.digest-table th[data-sort-key] {
  cursor: pointer;
  position: sticky;
  padding-left: 8px;
  padding-right: 8px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-overflow: clip;
  user-select: none;
}

@media (min-width: 761px) and (max-width: 1600px) {
  .digest-table th,
  .digest-table th[data-sort-key] {
    padding-inline: 2px;
    font-size: 8px;
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }
  .digest-table td {
    padding-inline: 2px;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.15;
  }
  .digest-table tbody td:nth-child(15) {
    box-shadow: inset -1px 0 rgba(53, 61, 70, .12);
  }
  .digest-table td > span,
  .digest-table td > small {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .digest-table .delivery-substatus {
    font-size: 7px;
  }
  .digest-table .ship-input {
    min-width: 0;
    max-width: calc(100% - 4px);
    font-size: 8px;
  }
  .digest-table .shipment-dates-cell {
    gap: 2px;
  }
}
.digest-table th[data-sort-key]::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 2px;
  width: 0.6em;
  color: var(--accent-blue);
  font-size: 11px;
  line-height: 1;
}
.digest-table th.dashboard-sort-active[data-sort-direction="desc"]::after {
  content: "↓";
}
.digest-table th.dashboard-sort-active[data-sort-direction="asc"]::after {
  content: "↑";
}
td {
  height: 28px;
  padding: 4px 6px;
  border: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.digest-table th,
.digest-table td {
  line-height: 1.2;
  min-width: 0;
}
#digestTable th,
#digestTable td { border: 0; }
#digestTable td { box-shadow: none; }
.digest-table tbody tr:hover td {
  filter: none;
}
.digest-table tbody tr.selected:hover td {
  filter: none;
}
.digest-table td:nth-child(1),
.digest-table td:nth-child(3),
.digest-table td:nth-child(4),
.digest-table td:nth-child(5),
.digest-table td:nth-child(6),
.digest-table td:nth-child(8),
.digest-table td:nth-child(9),
.digest-table td:nth-child(10),
.digest-table td:nth-child(13),
.digest-table td:nth-child(14),
.digest-table td:nth-child(15),
.digest-table td:nth-child(16) {
  font-variant-numeric: tabular-nums;
}
.digest-table th:nth-child(1), .digest-table td:nth-child(1),
.digest-table th:nth-child(2), .digest-table td:nth-child(2),
.digest-table th:nth-child(3), .digest-table td:nth-child(3) {
  position: sticky;
}
.digest-table th:nth-child(1), .digest-table td:nth-child(1) { left: 0; }
.digest-table th:nth-child(2), .digest-table td:nth-child(2) { left: 3%; }
.digest-table th:nth-child(3), .digest-table td:nth-child(3) { left: 12.2%; }
.digest-table thead th:nth-child(1),
.digest-table thead th:nth-child(2),
.digest-table thead th:nth-child(3) {
  z-index: 4;
}
.digest-table tbody td:nth-child(1),
.digest-table tbody td:nth-child(2),
.digest-table tbody td:nth-child(3) {
  z-index: 1;
  box-shadow: none;
}
.digest-table th:nth-child(1), .digest-table td:nth-child(1) { width: 3%; }
.digest-table th:nth-child(2), .digest-table td:nth-child(2) { width: 9.2%; }
.digest-table th:nth-child(3), .digest-table td:nth-child(3) { width: 6.2%; }
.digest-table th:nth-child(4), .digest-table td:nth-child(4) { width: 5.4%; }
.digest-table th:nth-child(5), .digest-table td:nth-child(5) { width: 5.9%; }
.digest-table th:nth-child(6), .digest-table td:nth-child(6) { width: 3.1%; }
.digest-table th:nth-child(7), .digest-table td:nth-child(7) { width: 8.0%; }
.digest-table th:nth-child(8), .digest-table td:nth-child(8) { width: 3.3%; }
.digest-table th:nth-child(9), .digest-table td:nth-child(9) { width: 5.6%; }
.digest-table th:nth-child(10), .digest-table td:nth-child(10) { width: 5.2%; }
.digest-table th:nth-child(11), .digest-table td:nth-child(11) { width: 5.4%; }
.digest-table th:nth-child(12), .digest-table td:nth-child(12) { width: 5.0%; }
.digest-table th:nth-child(13), .digest-table td:nth-child(13) { width: 5.0%; }
.digest-table th:nth-child(14), .digest-table td:nth-child(14) { width: 3.1%; }
.digest-table th:nth-child(15), .digest-table td:nth-child(15) { width: 6.0%; }
.digest-table th:nth-child(16), .digest-table td:nth-child(16) { width: 5.1%; }
.digest-table th:nth-child(17), .digest-table td:nth-child(17) { width: 6.8%; }
@media (min-width: 1381px) {
  .digest-table th[data-sort-key] {
    padding-inline: 2px;
    font-size: clamp(10px, .55vw, 12px);
    white-space: nowrap;
  }
}
@media (max-width: 1380px) {
  .digest-table th:nth-child(1), .digest-table td:nth-child(1) { width: 6%; }
  .digest-table th:nth-child(2), .digest-table td:nth-child(2) { left: 6%; }
  .digest-table th:nth-child(3), .digest-table td:nth-child(3) { left: 15.2%; }
}
.row-number-cell {
  text-align: center;
  white-space: nowrap;
}
.row-select {
  width: 14px;
  height: 14px;
  margin: 0 3px 0 0;
  accent-color: var(--lime);
  cursor: pointer;
  vertical-align: middle;
}
.row-number-cell span {
  vertical-align: middle;
  font-size: 10px;
  line-height: 1.2;
}
.digest-table td.row-number-cell {
  padding-left: 2px;
  padding-right: 2px;
}
.row-number-cell .row-select {
  margin-right: 2px;
}
.bulk-selection-status {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(119, 188, 31, .35);
  border-radius: 7px;
  background: rgba(119, 188, 31, .10);
  color: var(--ink-on-dark);
  font-size: 12px;
}
.bulk-selection-status span {
  color: rgba(247, 248, 246, .72);
}
.bulk-selection-status .selection-warning {
  color: #f3c8c4;
}
.digest-table td.shipped-cell {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
.digest-table td.shipped-cell .ship-input {
  width: min(78px, calc(100% - 4px));
  height: 24px;
  padding: 2px 4px;
  text-align: center;
  display: block;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
  background: rgba(254, 254, 254, .78);
  border-color: rgba(51, 58, 68, .12);
  font-variant-numeric: tabular-nums;
}
.handoff-dashboard-status {
  display: block;
  margin-top: 5px;
  padding-left: 5px;
  border-left: 3px solid var(--brand-orange);
  color: inherit;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.handoff-dashboard-status[hidden] { display: none !important; }
.handoff-dashboard-status.is-returned { border-left-color: #e95b5b; color: #9f2020; }
#digestTable .handoff-dashboard-status {
  box-sizing: border-box;
  max-width: 100%;
  font-size: inherit;
  overflow-wrap: anywhere;
  word-break: normal;
}
.logistics-acceptance-status { line-height: 1.4; overflow-wrap: anywhere; }
.stock-transit-card[data-transit-international-line] { cursor: pointer; }
.stock-transit-card[data-transit-international-line]:focus-visible,
#internationalBody tr[data-intl-line]:focus { outline: 2px solid #f57e2d; outline-offset: -2px; }
#internationalBody tr.international-row-highlight > td {
  border-top: 3px solid var(--brand-orange) !important;
  border-bottom: 3px solid var(--brand-orange) !important;
}
#internationalBody tr.international-row-highlight > td:first-child {
  border-left: 3px solid var(--brand-orange) !important;
}
#internationalBody tr.international-row-highlight > td:last-child {
  border-right: 3px solid var(--brand-orange) !important;
}
@media (max-width: 900px) {
  /* Status backgrounds stay light in the card layout: keep values and labels dark. */
  .international-table td { column-gap: 8px; }
  .international-table td::before { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .international-table tbody tr.international-row--delivered > td { background: #e8f3f1; }
  .international-table tbody tr.international-row--complete > td,
  .international-table tbody tr.international-row--complete:nth-child(even) > td { background: #e5f1dc; }
  .international-table tbody tr:is(.international-row--delivered, .international-row--complete) > td {
    color: var(--ink);
  }
  .international-table tbody tr:is(.international-row--delivered, .international-row--complete) > td::before {
    color: var(--ink);
  }
  #internationalBody tr.international-row-highlight {
    outline: 3px solid var(--brand-orange);
    outline-offset: -3px;
  }
  #internationalBody tr.international-row-highlight > td {
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #internationalBody tr.international-row-highlight > td:first-child { border-left: 0 !important; }
  #internationalBody tr.international-row-highlight > td:last-child { border-right: 0 !important; }
}
.doc-badges {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.doc-badges-button {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100%;
}
.doc-badges-button:hover {
  background: transparent;
}
.doc-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--graphite);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.doc-spec {
  background: #78bd1f;
}
.doc-shipment {
  background: #9fcb63;
  max-width: none;
  min-width: 32px;
  padding: 0 7px;
  border-radius: 999px;
  white-space: nowrap;
}
td:nth-child(2) { text-align: left; }
.digest-table td:nth-child(7) { text-align: center; }
tr.group-a td { background: var(--row-a); }
tr.group-b td { background: var(--row-b); }
tr.done td {
  background: var(--green-row);
  color: #182029;
}
.digest-table td:nth-child(11),
.digest-table td:nth-child(11) > span {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  line-height: 1.25;
}
.digest-table td:nth-child(11) > span { font-size: inherit; }
.digest-table td:nth-child(11) > .delivery-substatus { font-size: .9em; }
.digest-table td:nth-child(11) { padding-left: 3px; padding-right: 3px; }
tr.overdue td:nth-child(11), tr.overdue td:nth-child(12) { background: var(--danger); }
.digest-table th:nth-child(12),
.digest-table td:nth-child(12) {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
td.status-danger {
  background: var(--danger) !important;
}
tr.soon:not(.done) td {
  background: var(--soon);
  color: #182029;
}
td.delay-late {
  background: #f1ccc9 !important;
  color: #7f2525;
  font-weight: 800;
}
td.delay-early,
td.delay-ok {
  background: rgba(200, 221, 184, .92) !important;
  color: #203220;
  font-weight: 800;
}
tr.selected td {
  box-shadow: none !important;
  border-top: 1px solid rgba(119, 188, 31, .72) !important;
  border-bottom: 1px solid rgba(119, 188, 31, .72) !important;
}
tr.selected td:first-child {
  border-left: 1px solid rgba(119, 188, 31, .72) !important;
}
tr.selected td:last-child {
  border-right: 1px solid rgba(119, 188, 31, .72) !important;
}
tr.selected td::after {
  content: none;
}
tr.selected {
  outline: none;
}
tr.selected.done td {
  box-shadow: none !important;
  border-top: 1px solid rgba(73, 129, 55, .76) !important;
  border-bottom: 1px solid rgba(73, 129, 55, .76) !important;
}
tr.selected.done td:first-child {
  border-left: 1px solid rgba(73, 129, 55, .76) !important;
}
tr.selected.done td:last-child {
  border-right: 1px solid rgba(73, 129, 55, .76) !important;
}
tr.selected.done {
  outline: none;
}
.side-pane {
  display: grid;
  grid-template-rows: minmax(110px, var(--shipment-pane-height, 1fr)) 10px minmax(140px, 1fr);
  gap: 14px;
  min-height: 0;
  container-type: inline-size;
}
.side-pane.shipment-empty {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  height: 100%;
}
.side-pane.shipment-empty #shipmentPane {
  display: block;
  overflow: visible;
}
.side-pane.shipment-empty .side-pane-splitter {
  display: none;
}
.side-pane.shipment-empty #summaryPane {
  min-height: 0;
  height: 100%;
}
.side-pane-splitter {
  position: relative;
  min-height: 10px;
  cursor: row-resize;
  border-radius: 8px;
}
.side-pane-splitter::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(228, 229, 229, .18);
}
.side-pane-splitter:hover::before,
.side-pane-splitter:focus-visible::before,
.side-pane.resizing-vertical .side-pane-splitter::before {
  height: 3px;
  background: rgba(119, 188, 31, .72);
}
.side-pane-splitter:focus-visible {
  outline: 1px solid rgba(119, 188, 31, .72);
  outline-offset: -1px;
}
.side-pane section {
  padding: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 229, 229, .42) var(--surface-panel);
}
.side-pane section::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.side-pane section::-webkit-scrollbar-track {
  background: var(--surface-panel);
}
.side-pane section::-webkit-scrollbar-thumb {
  border: 2px solid var(--surface-panel);
  border-radius: 7px;
  background: rgba(228, 229, 229, .42);
}
.side-pane section::-webkit-scrollbar-thumb:hover {
  background: rgba(228, 229, 229, .64);
}
.side-pane section::-webkit-scrollbar-corner {
  background: var(--surface-panel);
}
.side-pane h2 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink-on-dark);
}
#summaryPane {
  position: relative;
  min-height: 140px;
}
#summaryPane h2 {
  position: sticky;
  top: -14px;
  z-index: 6;
  margin: -14px -14px 0;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, rgba(62, 70, 80, 0.98), rgba(62, 70, 80, 0.96));
  border-bottom: 1px solid rgba(228, 229, 229, 0.12);
}
.active-row-number {
  display: inline-block;
  margin-left: 6px;
  color: rgba(247, 248, 246, .70);
  font-size: 13px;
  font-weight: 700;
}
.shipment-pane-empty {
  min-height: 58px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(228, 229, 229, .14);
  border-radius: 6px;
  background: rgba(51, 58, 68, .42);
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  color: rgba(228, 229, 229, .66);
}
.shipment-pane-empty strong {
  color: var(--ink-on-dark);
  font-size: 16px;
}
.shipment-pane-empty span {
  max-width: 270px;
  font-size: 13px;
  line-height: 1.4;
}
.stack-form { display: grid; gap: 10px; }
.side-pane *,
.side-pane *::before,
.side-pane *::after {
  min-width: 0;
}
.side-pane input,
.side-pane textarea,
.side-pane .custom-select,
.side-pane .custom-select-button,
.side-pane .document-uploader,
.side-pane .attached-documents {
  width: 100%;
  max-width: 100%;
}
.side-pane .custom-select-button {
  padding-right: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-pane .custom-select-button::after {
  right: 9px;
}
.side-pane input[type="file"] {
  font-size: 11px;
  overflow: hidden;
}
.side-pane input[type="file"]::file-selector-button {
  max-width: 112px;
  padding: 4px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container (max-width: 300px) {
  .side-pane h2 {
    font-size: 15px;
  }
  .stack-form {
    gap: 7px;
  }
  .document-uploader {
    padding: 7px;
  }
  .side-pane label {
    font-size: 10px;
  }
  .side-pane input,
  .side-pane textarea,
  .side-pane .custom-select-button {
    height: 30px;
    padding-left: 7px;
    padding-right: 24px;
    font-size: 10px;
  }
  .side-pane input[type="file"] {
    font-size: 10px;
  }
  .side-pane input[type="file"]::file-selector-button {
    max-width: 96px;
    padding: 3px 5px;
  }
  .stack-form button {
    min-height: 32px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 11px;
  }
  .shipment-dates-block {
    grid-template-columns: minmax(0, 1fr) 30px;
  }
  .shipment-dates-block > .date-add-button {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box;
  }
  .attached-item a {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  .summary-table th[data-short]::after,
  .summary-table td {
    font-size: 9px;
  }
}

@media (max-width: 760px) {
  #trackingDialog,
  #trackingDialog[open],
  .tracking-dialog,
  .tracking-table-wrap,
  .tracking-table,
  .tracking-table tbody,
  .tracking-table tbody tr {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .tracking-table tbody td,
  .tracking-table tbody tr:nth-child(even) td,
  .tracking-table tbody tr:hover td {
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tracking-table .tracking-mobile-value {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .tracking-table .tracking-documents-cell {
    align-items: center !important;
  }
}
.date-entry {
  position: relative;
  display: grid;
}
.date-entry input[type="text"] {
  width: 100%;
  padding-right: 42px;
}
.date-picker-button {
  position: absolute;
  right: 9px;
  top: 50%;
  width: 18px;
  max-width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-height: 18px;
  padding: 0;
  box-sizing: border-box;
  transform: translateY(-50%);
  border: 0;
  border-radius: 3px;
  background: transparent !important;
  color: #05080a !important;
}
.date-picker-button::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 12px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 2px;
}
.date-picker-button::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -4px 0 currentColor;
}
.date-picker-button:hover {
  background: rgba(254, 254, 254, 0.10) !important;
}
.visually-hidden-date {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 30px;
  height: 30px;
  opacity: 0;
  pointer-events: none;
}
.note-field {
  gap: 5px;
}
.shipment-dates-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: start;
}
.shipment-dates-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  grid-column: 1 / -1;
  gap: 8px;
  color: rgba(247, 248, 246, .68);
  font-size: 12px;
}
.shipment-dates-list {
  display: grid;
  grid-column: 1;
  gap: 6px;
}
.shipment-dates-block > .date-add-button {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
}
.shipment-dates-list .shipment-date-row:only-child {
  grid-template-columns: minmax(0, 1fr);
}
.shipment-dates-list .shipment-date-row:only-child .shipment-date-remove-placeholder {
  display: none;
}
.shipment-date-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
  min-height: 30px;
}
.shipment-date-row .date-entry {
  width: 100%;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  align-self: center;
}
.shipment-date-row .date-entry input[type="text"] {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  box-sizing: border-box !important;
}
.shipment-date-remove,
.shipment-date-remove-placeholder,
.date-add-button {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.date-add-button {
  position: relative;
  border: 1px solid rgba(119, 188, 31, 0.72);
  border-radius: 999px;
  background: rgba(119, 188, 31, 0.13) !important;
  color: #77bc1f !important;
  font-size: 0;
}
.date-add-button:hover {
  border-color: #77bc1f;
  color: #f7f8f6 !important;
  background: rgba(119, 188, 31, 0.82) !important;
  box-shadow: 0 0 0 2px rgba(119, 188, 31, 0.20);
}
.date-add-button::before,
.date-add-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.date-add-button::after {
  width: 2px;
  height: 15px;
}
.shipment-dates-block > .date-add-button {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
  align-self: end;
}
.shipment-date-remove {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  align-self: center;
  background: rgba(158, 63, 63, 0.92) !important;
  color: #fff !important;
}
.shipment-date-remove:hover {
  background: #b84a4a !important;
}
.shipment-date-remove-placeholder {
  visibility: hidden;
}
.shipment-dates-cell {
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
  max-height: 34px;
  overflow: hidden;
  line-height: 1.15;
  font-size: 12px;
  font-weight: 400;
  font-family: inherit;
  color: inherit;
}
.shipment-dates-cell span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.note-toggle {
  height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(254, 254, 254, 0.08);
  border: 1px solid rgba(254, 254, 254, 0.16);
  color: rgba(247, 248, 246, .82);
  font-size: 11px;
  font-weight: 700;
}
.note-toggle:hover {
  background: rgba(254, 254, 254, 0.14);
}
.stack-form .secondary-action {
  background: rgba(254, 254, 254, 0.08);
  border: 1px solid rgba(254, 254, 254, 0.18);
  color: var(--ink-on-dark);
}
.stack-form .secondary-action:hover {
  background: rgba(254, 254, 254, 0.14);
}
.compact-secondary-action {
  justify-self: start;
  width: auto;
  padding: 6px 10px;
  border: 1px solid rgba(254, 254, 254, 0.18);
  border-radius: 6px;
  background: rgba(254, 254, 254, 0.08) !important;
  color: rgba(247, 248, 246, .88) !important;
  font-size: 12px;
}
.compact-secondary-action:hover {
  background: rgba(254, 254, 254, 0.14) !important;
}
.selection-actions {
  display: grid;
  grid-template-columns: minmax(104px, .72fr) minmax(210px, 1.28fr);
  gap: 6px;
  align-items: center;
}
.selection-actions.has-selection {
  padding: 6px;
  border: 1px solid rgba(119, 188, 31, .2);
  border-radius: 8px;
  background: rgba(119, 188, 31, .06);
}
.selection-actions:empty {
  display: none;
}
.active-row-actions {
  display: flex !important;
  justify-content: start;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.active-row-actions #selectSpecRowsButton {
  flex: 0 1 auto;
  box-sizing: border-box;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  line-height: 1;
  white-space: nowrap;
}
.active-row-actions #selectedLineHistoryButton {
  flex: 0 0 auto;
  width: auto;
  min-width: 76px;
  max-width: max-content;
  padding: 0 12px;
  white-space: nowrap;
}
.active-row-actions[hidden] {
  display: none !important;
}
#shipmentForm #shipmentQuantity {
  width: min(180px, 100%);
  min-width: 0;
  max-width: 180px;
}
.active-row-actions button,
.selection-actions .compact-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  font-size: 11px;
  font-weight: 800;
}
.active-row-actions .stock-action-icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 4px;
}
.active-row-actions .danger-action {
  background: #9e3f3f !important;
  color: #fff !important;
}
.active-row-actions .danger-action:hover {
  background: #b84a4a !important;
}
.selection-actions .compact-secondary-action {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding-left: 6px;
  padding-right: 6px;
}
#clearSelectedRowsButton[hidden] + #selectSpecRowsButton {
  grid-column: 1 / -1;
}
@container (max-width: 390px) {
  .active-row-actions #selectSpecRowsButton {
    flex-basis: auto;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    height: 32px;
    min-height: 32px;
  }
  .selection-actions {
    grid-template-columns: 1fr;
  }
  .selection-actions .compact-secondary-action {
    white-space: normal;
    line-height: 1.2;
    min-height: 30px;
  }
}
.document-uploader {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.22);
}
.document-targets:empty {
  display: none;
}
.document-targets {
  display: grid;
  gap: 7px;
}
.target-note,
.target-title {
  color: rgba(247, 248, 246, .72);
  font-size: 12px;
  font-weight: 700;
}
.target-list {
  display: grid;
  gap: 5px;
  max-height: 155px;
  overflow: auto;
  padding-right: 3px;
}
.target-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid rgba(228, 229, 229, 0.10);
  border-radius: 6px;
  background: rgba(254, 254, 254, 0.05);
  color: var(--ink-on-dark);
}
.target-row input {
  width: 16px;
  height: 16px;
  padding: 0;
}
.target-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attached-documents:empty { display: none; }
.document-uploader-title {
  color: rgba(247, 248, 246, .72);
  font-size: 13px;
  font-weight: 800;
}
.attached-documents {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.24);
}
.attached-title {
  color: rgba(247, 248, 246, .68);
  font-size: 12px;
  font-weight: 700;
}
.attached-list {
  display: grid;
  gap: 6px;
}
.attached-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 7px;
  align-items: center;
}
.attached-open-button {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink-on-dark);
  text-decoration: none;
  min-width: 0;
}
.attached-open-button:hover {
  background: transparent;
}
.attached-open-button:hover strong { text-decoration: underline; }
.attached-item span {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--lime);
  color: var(--graphite);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attached-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.attached-item [data-delete-document] {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  background: #9e3f3f;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .10);
  line-height: 1;
}
.attached-item [data-delete-document]:hover {
  background: #b84a4a;
}
.shipment-stock-status:empty {
  display: none;
}
.shipment-stock-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.24);
}
.shipment-stock-copy {
  min-width: 0;
}
.shipment-stock-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.shipment-stock-heading span::after {
  content: " ·";
}
.shipment-stock-card span,
.shipment-stock-card em {
  display: block;
  color: rgba(247, 248, 246, .68);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.shipment-stock-card strong {
  display: inline;
  margin: 0;
  color: var(--ink-on-dark);
  font-size: 15px;
}
.shipment-stock-details {
  grid-column: 1 / -1;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.shipment-stock-card button {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.shipment-stock-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.shipment-stock-actions button {
  min-width: 0;
  white-space: nowrap;
}
.shipment-stock-actions .shipment-stock-delete {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 4px;
  background: #aa4141;
  color: #fff;
}
.shipment-stock-actions .shipment-stock-delete:hover {
  background: #bf4b4b;
}
.shipment-stock-card.is-linked {
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-rows: auto auto;
  align-items: center;
  border-color: rgba(111, 198, 18, 0.45);
}
.shipment-stock-card.is-linked .shipment-stock-heading {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.shipment-stock-card.is-linked .shipment-stock-heading span {
  color: var(--lime);
}
.shipment-stock-card.is-linked .shipment-stock-details {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.shipment-stock-card.is-linked .shipment-stock-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  border: 0;
}
.shipment-stock-card.is-linked .shipment-stock-actions button {
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

@media (max-width: 760px) {
  .shipment-stock-card.is-linked {
    grid-template-columns: 1fr;
  }

  .shipment-stock-card.is-linked .shipment-stock-actions {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: flex-start;
  }
}
.shipment-stock-card.stock-status-pulse {
  box-shadow: 0 0 0 2px rgba(119, 188, 31, 0.42);
}
.shipment-stock-existing-note {
  grid-column: 1 / -1;
  margin-top: -4px;
  color: #9be54a;
  font-size: 12px;
  font-weight: 800;
}
.shipment-stock-card.is-pending {
  border-color: rgba(82, 212, 227, 0.45);
}
.shipment-stock-card.is-missing {
  border-color: rgba(255, 184, 77, 0.5);
}
.app-notice {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid rgba(119, 188, 31, 0.65);
  border-radius: 8px;
  background: #303842;
  color: var(--ink-on-dark);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .16s ease, transform .16s ease;
}
.app-notice.visible {
  opacity: 1;
  transform: translateY(0);
}
#documentsDialog {
  width: min(760px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px));
}
.documents-dialog {
  width: 100%;
  max-width: 100%;
}
.documents-dialog-body {
  display: grid;
  gap: 10px;
}
.documents-dialog-list {
  display: grid;
  gap: 8px;
}
.documents-dialog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.24);
}
.documents-dialog-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.documents-dialog-meta strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.documents-dialog-type {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(119, 188, 31, 0.18);
  color: #cfeaa4;
  font-size: 11px;
  font-weight: 800;
}
.documents-dialog-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.documents-dialog-actions button,
.documents-dialog-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  background: rgba(254, 254, 254, 0.08);
  color: var(--ink-on-dark);
  text-decoration: none;
  font-weight: 700;
}
.documents-dialog-actions button {
  cursor: pointer;
}
.documents-dialog-actions button:hover,
.documents-dialog-actions a:hover {
  background: rgba(254, 254, 254, 0.16);
}
#documentPreviewDialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(860px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
#documentPreviewDialog .document-preview-dialog {
  width: 100%;
  box-sizing: border-box;
}
#documentPreviewDialog .dialog-panel {
  height: 100%;
  max-height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}
#documentPreviewDialog.document-preview-compact {
  height: auto;
}
#documentPreviewDialog.document-preview-compact .dialog-panel {
  height: auto;
  min-height: 0;
  grid-template-rows: auto auto;
}
.document-preview-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}
.document-preview-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.document-preview-toolbar button,
.document-preview-toolbar a,
.document-preview-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  background: rgba(254, 254, 254, 0.08);
  color: var(--ink-on-dark);
  text-decoration: none;
  font-weight: 700;
}
.document-preview-toolbar button {
  cursor: pointer;
}
.document-preview-toolbar button:hover,
.document-preview-toolbar a:hover,
.document-preview-empty a:hover {
  background: rgba(254, 254, 254, 0.16);
}
.document-preview-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: block;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: #fff;
}
.document-preview-surface {
  width: 100%;
  min-height: min(82vh, 980px);
  max-height: min(82vh, 980px);
  overflow: auto;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
}
.document-preview-image {
  max-width: 100%;
  height: auto;
  display: block;
}
.document-preview-text {
  width: 100%;
  min-height: min(82vh, 980px);
  max-height: min(82vh, 980px);
  overflow: auto;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: #fff;
  color: #182029;
  white-space: pre-wrap;
  word-break: break-word;
  font: 13px/1.45 Consolas, "Courier New", monospace;
}
.document-preview-empty {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.24);
}
.summary-table {
  table-layout: fixed;
  background: var(--surface-panel-2);
  border: 0;
  border-radius: 6px;
  overflow: visible;
}
.summary-table th {
  position: sticky;
  top: 33px;
  z-index: 5;
  height: 42px;
  padding: 6px 6px;
  font-size: 12px;
  line-height: 1.12;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--graphite);
  border: 0;
}
.summary-table th[data-short] {
  overflow: hidden;
  text-overflow: clip;
}
.summary-table th:nth-child(1),
.summary-table td:nth-child(1) {
  width: 32%;
}
.summary-table th:nth-child(2),
.summary-table td:nth-child(2) {
  width: 13%;
}
.summary-table th:nth-child(3),
.summary-table td:nth-child(3) {
  width: 15%;
}
.summary-table th:nth-child(4),
.summary-table td:nth-child(4) {
  width: 11%;
}
.summary-table th:nth-child(5),
.summary-table td:nth-child(5) {
  width: 15%;
}
.summary-table th:nth-child(6),
.summary-table td:nth-child(6) {
  width: 14%;
}
.summary-table th:nth-child(n+5) {
  padding-inline: 3px;
  white-space: nowrap;
}
.summary-table td {
  height: 30px;
  text-align: center;
  background: #dfe4e1;
  border: 0;
  color: var(--ink);
}
.summary-table tr:nth-child(even) td {
  background: #c8d0cb;
}
.summary-table td:first-child {
  text-align: left;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-table .summary-deficit-negative {
  background: #e8cbc3 !important;
  color: #641f1f;
  font-weight: 800;
}
.summary-table .summary-deficit-positive {
  background: #c8ddbd !important;
  color: #133c1f;
  font-weight: 800;
}

body.density-compact .digest-table {
  font-size: clamp(9px, .68vw, 12px);
}
body.density-compact th {
  padding: 6px 5px;
  line-height: 1.05;
}
body.density-compact td {
  height: 24px;
  padding: 2px 5px;
}
body.density-compact .digest-table td.shipped-cell .ship-input {
  height: 22px;
  width: min(72px, calc(100% - 4px));
}
body.density-compact .bulk-selection-status {
  padding: 6px 8px;
  font-size: 11px;
}
body.density-compact .summary-table td {
  height: 26px;
  font-size: 11px;
}
body.density-compact .warehouse-table th,
body.density-compact .warehouse-table td {
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 11px;
}
body.density-compact .warehouse-equipment {
  font-size: 11px;
}

dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  border: 1px solid rgba(228, 229, 229, 0.16);
  border-radius: var(--radius);
  padding: 0;
  color: var(--ink-on-dark);
  background: var(--surface-panel);
  overflow-x: hidden;
}
dialog::backdrop { background: rgba(15, 30, 34, .62); }
.dialog-drag-handle { cursor: grab; touch-action: none; }
.dialog-drag-handle :is(button, a, input, select, textarea, label) { touch-action: auto; }
dialog.is-dialog-dragging { user-select: none; }
dialog.is-dialog-dragging .dialog-drag-handle { cursor: grabbing; }
dialog.is-dialog-dragging::backdrop { background: rgba(15, 30, 34, .18); }

#warehouseDialog {
  width: min(1880px, calc(100vw - 24px));
  max-width: min(1880px, calc(100vw - 24px));
  min-width: min(1880px, calc(100vw - 24px));
  margin: 12px auto;
  max-height: calc(100vh - 24px);
}

.dialog-panel {
  box-sizing: border-box;
  min-width: 0;
  padding: 18px;
  display: grid;
  gap: 14px;
}
.dialog-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dialog-panel h2 { margin: 0; }
.dialog-panel,
.dialog-panel p,
.dialog-panel td {
  color: var(--ink-on-dark);
}
.dialog-panel input,
.dialog-panel select,
.dialog-panel textarea {
  color: var(--ink-on-dark);
  background: rgba(24, 32, 41, 0.24);
  border-color: rgba(228, 229, 229, 0.16);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wide-field {
  grid-column: 1 / -1;
}
#manualDialog {
  width: min(1120px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  overflow-x: hidden;
}
.manual-dialog {
  width: 100%;
  max-width: 100%;
  max-height: min(820px, calc(100vh - 48px));
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}
.manual-dialog *,
.manual-dialog *::before,
.manual-dialog *::after {
  box-sizing: border-box;
  min-width: 0;
}
.manual-dialog .form-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(210px, 0.85fr);
}
.manual-dialog input,
.manual-dialog select {
  width: 100%;
}
.manual-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: 6px;
  background: rgba(24, 32, 41, 0.18);
}
.manual-section h3,
.manual-lines-header h3 {
  margin: 0;
  color: var(--ink-on-dark);
  font-size: 16px;
}
.manual-notice {
  padding: 12px 14px;
  border: 1px solid rgba(119, 188, 31, 0.45);
  border-radius: 6px;
  background: rgba(119, 188, 31, 0.10);
  color: var(--ink-on-dark);
  line-height: 1.45;
}
.manual-notice strong {
  color: #ffffff;
}
.manual-lines-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.manual-lines {
  display: grid;
  gap: 8px;
}
.manual-line {
  display: grid;
  grid-template-columns: minmax(170px, 1.8fr) minmax(58px, .45fr) minmax(96px, .65fr) minmax(78px, .52fr) minmax(108px, .72fr) minmax(102px, .72fr) 30px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(228, 229, 229, 0.10);
  border-radius: 6px;
  background: rgba(254, 254, 254, 0.04);
}
.manual-line label {
  min-width: 0;
}
.manual-line input {
  width: 100%;
}
.delete-manual-line {
  width: 32px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  background: #9e3f3f;
  color: #fff;
}
.delete-manual-line:hover {
  background: #b84a4a;
}
@media (max-width: 1040px) {
  #manualDialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
  .manual-dialog {
    padding: 14px;
  }
  .manual-dialog .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manual-line {
    grid-template-columns: minmax(0, 1.6fr) minmax(70px, .55fr) minmax(110px, .85fr) minmax(92px, .72fr);
  }
  .manual-line .manual-period {
    grid-column: span 2;
  }
  .manual-line .delete-manual-line {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
  }
}
@media (max-width: 760px) {
  .manual-dialog .form-grid {
    grid-template-columns: 1fr;
  }
  .manual-line {
    grid-template-columns: minmax(0, 1fr) 32px;
  }
  .manual-line label,
  .manual-line .manual-period {
    grid-column: 1;
  }
  .manual-line .delete-manual-line {
    grid-column: 2;
    grid-row: 1;
  }
}
.preview {
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 6px;
  padding: 10px;
  background: rgba(24, 32, 41, 0.24);
}
.preview-source {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(254, 254, 254, 0.06);
  color: var(--ink-on-dark);
}
.preview-source span {
  color: rgba(247, 248, 246, 0.72);
  font-size: 12px;
}
.preview-item {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: 6px;
  background: rgba(24, 32, 41, 0.18);
}
.preview-item.warning {
  border: 1px solid rgba(119, 188, 31, 0.45);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(119, 188, 31, 0.10);
}
.preview-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.preview-title span,
.preview-warning {
  color: rgba(247, 248, 246, 0.76);
}
.preview-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.preview-edit-grid label {
  display: grid;
  gap: 4px;
}
.preview-edit-grid .wide-field {
  grid-column: 1 / -1;
}
.preview-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.preview-fields div {
  padding: 7px 8px;
  border-radius: 5px;
  background: rgba(254, 254, 254, 0.06);
}
.preview-fields dt {
  color: rgba(247, 248, 246, 0.62);
  font-size: 11px;
}
.preview-fields dd {
  margin: 2px 0 0;
  color: var(--ink-on-dark);
  font-weight: 700;
}
.preview-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.preview-table th,
.preview-table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(228, 229, 229, 0.10);
  color: var(--ink-on-dark);
}
.preview-table th {
  background: #303842;
}
.preview-table td {
  background: rgba(254, 254, 254, 0.04);
}
.preview-table th:first-child,
.preview-table td:first-child {
  text-align: left;
  width: 28%;
}
.preview-edit-table input,
.preview-edit-table select {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
}
.preview-edit-table td {
  vertical-align: middle;
}
.preview:empty { display: none; }
.tabs {
  display: flex;
  gap: 8px;
}
.tab {
  background: #e8eef1;
  color: var(--ink);
}
.tab.active {
  background: var(--lime);
  color: var(--graphite);
}
.reference-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.reference-controls .tab {
  flex: 0 0 160px;
  height: 46px;
  padding: 0 16px;
}
.reference-search {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgba(247, 248, 246, .78);
  font-weight: 700;
}
.reference-sort {
  flex: 0 1 290px;
  min-width: 230px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: rgba(247, 248, 246, .78);
  font-weight: 700;
}
.reference-sort select {
  height: 42px;
  min-width: 0;
  width: 100%;
}
.reference-spec-filter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(228, 229, 229, 0.18);
  border-radius: 6px;
  background: rgba(254, 254, 254, 0.06);
  color: rgba(247, 248, 246, .78);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.reference-spec-filter input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cyan);
}
.reference-search input {
  min-width: 0;
  height: 42px;
}
.reference-search button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(228, 229, 229, 0.22);
  border-radius: 6px;
  background: rgba(254, 254, 254, 0.08);
  color: var(--ink-on-dark);
  font-size: 22px;
  line-height: 1;
}
.reference-search button:hover {
  border-color: var(--cyan);
  background: rgba(82, 212, 227, 0.16);
}
@media (max-width: 1280px) {
  .reference-controls {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .reference-search {
    flex-basis: 100%;
    grid-template-columns: auto minmax(0, 1fr) 42px;
  }

  .reference-sort {
    flex: 1 1 260px;
  }
}
#referencesDialog {
  width: min(1500px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
}

.reference-dialog {
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 24px);
}
.reference-panel {
  min-height: 0;
  max-height: calc(100vh - 220px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 18px;
  scrollbar-gutter: stable;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 6px;
  background: #303945;
}
.reference-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.reference-table th {
  position: sticky;
  top: 0;
}
.reference-table td {
  height: 54px;
  vertical-align: middle;
}
.reference-table td:first-child {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(247, 248, 246, .88);
}
.reference-new-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  margin-left: 8px;
  padding: 2px 4px 2px 8px;
  border-radius: 999px;
  background: rgba(82, 212, 227, 0.20);
  border: 1px solid rgba(82, 212, 227, 0.65);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}

.reference-new-badge button {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(228, 229, 229, 0.82);
  background: rgba(228, 229, 229, 0.16);
  color: var(--light);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.reference-new-badge button:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.reference-mark-read {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(228, 229, 229, 0.35);
  background: rgba(228, 229, 229, 0.08);
  color: var(--light);
  font-weight: 800;
  cursor: pointer;
}

.reference-mark-read:hover {
  border-color: var(--cyan);
}

.reference-merge-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(82, 212, 227, 0.45);
  background: rgba(37, 128, 138, 0.16);
  color: var(--light);
  font-weight: 800;
  cursor: pointer;
}

.reference-merge-button:hover {
  border-color: var(--cyan);
  background: rgba(82, 212, 227, 0.18);
}

.reference-table--customers th:nth-child(1),
.reference-table--customers td:nth-child(1),
.reference-table--customers th:nth-child(2),
.reference-table--customers td:nth-child(2) {
  width: calc((100% - 96px) / 2);
}

.reference-table--equipment th:nth-child(1),
.reference-table--equipment td:nth-child(1),
.reference-table--equipment th:nth-child(2),
.reference-table--equipment td:nth-child(2),
.reference-table--equipment th:nth-child(3),
.reference-table--equipment td:nth-child(3) {
  width: calc((100% - 172px) / 3);
}

.reference-table th:last-child,
.reference-table td:last-child {
  width: 96px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.reference-table--equipment th:last-child,
.reference-table--equipment td:last-child {
  width: 172px;
}

.reference-table th:last-child,
.reference-table td:last-child {
  border-right: 0;
}

.reference-table input {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  display: block;
}
.reference-add-row td {
  background: rgba(82, 212, 227, 0.08);
}
.reference-add-row input {
  border-style: dashed;
}
#settingsDialog,
.settings-dialog {
  width: min(620px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}
.settings-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: 6px;
  background: rgba(24, 32, 41, 0.20);
}
.settings-section h3 {
  margin: 0;
  color: var(--ink-on-dark);
  font-size: 16px;
}
.settings-section label {
  color: rgba(247, 248, 246, .72);
}
.settings-section input {
  width: 160px;
}
.settings-section > button {
  justify-self: start;
}
.settings-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.settings-actions button {
  height: 42px;
  background: rgba(254, 254, 254, 0.08);
  border: 1px solid rgba(254, 254, 254, 0.18);
  color: var(--ink-on-dark);
}
.settings-actions button:hover {
  background: var(--lime);
  color: var(--graphite);
}
.build-version {
  align-self: center;
  margin-left: auto;
  padding: 0 4px;
  color: rgba(247, 248, 246, 0.52);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.metric-dialog {
  max-height: min(760px, calc(100vh - 48px));
}
.metric-list {
  max-height: 560px;
  overflow: auto;
  display: grid;
  gap: 14px;
}
.metric-money {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(86px, auto);
  gap: 1px;
  min-height: 86px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(228, 229, 229, 0.12);
  align-items: stretch;
}
.metric-money button {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 86px;
  padding: 12px;
  background: var(--surface-panel-2);
  border-radius: 0;
  color: var(--ink-on-dark);
  text-align: left;
  border: 0;
  border-top: 3px solid transparent;
}
.metric-money button:hover {
  background: rgba(75, 83, 92, .98);
}
.metric-money button.active {
  border-top-color: var(--lime);
}
.metric-money span {
  display: block;
  color: rgba(247, 248, 246, .68);
  font-size: 12px;
  line-height: 1.25;
}
.metric-money strong {
  display: block;
  color: var(--ink-on-dark);
  font-size: 18px;
  line-height: 1.2;
}
.money-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.money-detail h3 {
  margin: 0;
  color: var(--ink-on-dark);
  font-size: 16px;
}
.metric-section-title {
  margin: 2px 0 -2px;
  color: var(--ink-on-dark);
  font-size: 16px;
}
.metric-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  border-radius: 6px;
}
.metric-detail-table th {
  position: sticky;
  top: 0;
}
.metric-detail-table th:nth-child(1),
.metric-detail-table td:nth-child(1) {
  width: 25%;
}
.metric-detail-table th:nth-child(2),
.metric-detail-table td:nth-child(2) {
  width: 16%;
}
.metric-detail-table th:nth-child(3),
.metric-detail-table td:nth-child(3) {
  width: 16%;
}
.metric-detail-table td {
  text-align: left;
  white-space: normal;
  vertical-align: top;
  background: #dfe4e1;
  color: var(--ink);
}
.metric-detail-table tr:nth-child(even) td {
  background: #c8d0cb;
}
.money-detail-table th:nth-child(1),
.money-detail-table td:nth-child(1) {
  width: 28%;
}
.money-detail-table th:nth-child(2),
.money-detail-table td:nth-child(2) {
  width: 16%;
}
.money-detail-table th:nth-child(3),
.money-detail-table td:nth-child(3) {
  width: auto;
}
.money-detail-table th:nth-child(4),
.money-detail-table td:nth-child(4) {
  width: 18%;
  text-align: right;
}
.history-dialog {
  max-height: min(760px, calc(100vh - 48px));
}
.history-tabs {
  margin-bottom: 12px;
}
.history-tabs .tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.history-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  min-width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background: #25808A;
  color: transparent;
  font-size: 0;
  line-height: 0;
  flex: 0 0 auto;
}
#settingsHistoryButton .history-unread-badge {
  margin-left: 2px;
}
.history-list {
  max-height: 580px;
  overflow: auto;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.history-table th {
  position: sticky;
  top: 0;
}
.history-table th:nth-child(1),
.history-table td:nth-child(1) {
  width: 120px;
}
.history-table th:nth-child(2),
.history-table td:nth-child(2) {
  width: 110px;
}
.history-table th:nth-child(3),
.history-table td:nth-child(3) {
  width: 180px;
}
.history-table td {
  text-align: left;
  white-space: normal;
  vertical-align: top;
  background: #dfe4e1;
  color: var(--ink);
}
.history-table tr:nth-child(even) td {
  background: #c8d0cb;
}
.history-table tr.history-row--link {
  cursor: pointer;
}
.history-table tr.history-row--link:hover td {
  background: #cfeef1;
}
.spec-history-year {
  margin-bottom: 18px;
}
.spec-history-year h3 {
  margin: 0 0 8px;
  color: var(--paper);
  font-size: 16px;
}
.spec-history-table th:nth-child(1),
.spec-history-table td:nth-child(1) {
  width: 170px;
}
.spec-history-table th:nth-child(2),
.spec-history-table td:nth-child(2) {
  width: auto;
}
.spec-history-table th:nth-child(3),
.spec-history-table td:nth-child(3) {
  width: 150px;
}
.spec-history-table th:nth-child(4),
.spec-history-table td:nth-child(4) {
  width: 120px;
}
.users-dialog {
  max-height: min(760px, calc(100vh - 48px));
  width: min(1450px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
#usersForm {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.user-create {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: 6px;
  background: rgba(24, 32, 41, 0.22);
}
.user-create h3 {
  margin: 0;
  color: var(--ink-on-dark);
  font-size: 16px;
}
.user-create > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding-right: 34px;
  color: var(--ink-on-dark);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.user-create > summary::-webkit-details-marker {
  display: none;
}
.user-create > summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #77bc1f;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}
.user-create[open] > summary::after {
  content: "−";
}
.user-create[open] > summary {
  margin-bottom: 10px;
}
.password-note {
  margin: -4px 0 0;
  color: rgba(247, 248, 246, .68);
  font-size: 12px;
}
.user-create-grid {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(160px, 210px) minmax(130px, 150px) minmax(100px, 112px);
  gap: 10px;
  align-items: end;
  min-width: 0;
}
.users-list {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: 6px;
  background: rgba(24, 32, 41, 0.18);
}
.users-grid {
  display: grid;
  min-width: 1280px;
  width: 100%;
  overflow: visible;
}

@media (min-width: 761px) {
  #usersDialog .users-list {
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
  }

  #usersDialog .users-grid {
    overflow: visible;
  }

  #usersDialog .users-grid-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    display: grid;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  }
}
.session-monitor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(228, 229, 229, 0.12);
  background: rgba(24, 32, 41, 0.24);
}
.session-monitor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.session-monitor-heading h3,
.session-monitor-heading p {
  margin: 0;
}
.session-monitor-heading h3 {
  color: var(--ink-on-dark);
  font-size: 17px;
}
.session-monitor-heading p {
  margin-top: 3px;
  color: rgba(247, 248, 246, .62);
  font-size: 12px;
}
.session-online-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(54, 200, 211, .48);
  border-radius: 6px;
  color: #dffcff;
  background: rgba(31, 143, 153, .2);
  font-weight: 800;
}
.session-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  gap: 8px;
  justify-content: start;
  align-items: start;
}
.session-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 10px;
  border: 1px solid rgba(228, 229, 229, .12);
  border-radius: 6px;
  color: rgba(247, 248, 246, .68);
  background: rgba(62, 70, 80, .72);
  font-size: 12px;
}
.session-card.is-online {
  border-color: rgba(119, 188, 31, .55);
}
.session-card-user {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-on-dark);
  font-size: 14px;
}
.session-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7f8993;
}
.session-card.is-online .session-status-dot {
  background: #77bc1f;
  box-shadow: 0 0 0 3px rgba(119, 188, 31, .16);
}
.session-state {
  color: rgba(247, 248, 246, .72);
  font-weight: 800;
  text-align: right;
}
.session-card > span:not(.session-state) {
  grid-column: 1 / -1;
  line-height: 1.35;
}
.session-period {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-card > span b {
  color: rgba(247, 248, 246, .78);
}
.session-card:not(.is-online) .session-state {
  color: rgba(247, 248, 246, .52);
}
.login-history {
  border: 1px solid rgba(228, 229, 229, .12);
  border-radius: 6px;
  overflow: hidden;
}
.login-history summary {
  padding: 10px 12px;
  color: var(--ink-on-dark);
  font-weight: 800;
  cursor: pointer;
}
.login-history summary span {
  margin-left: 6px;
  color: #36c8d3;
}
.login-history-list {
  max-height: 230px;
  overflow-y: auto;
  border-top: 1px solid rgba(228, 229, 229, .1);
}
.login-history-row {
  display: grid;
  grid-template-columns: minmax(100px, 1.1fr) repeat(4, minmax(110px, 1fr));
  gap: 10px;
  padding: 9px 12px;
  color: rgba(247, 248, 246, .68);
  font-size: 12px;
  border-bottom: 1px solid rgba(228, 229, 229, .08);
}
.login-history-row strong {
  color: var(--ink-on-dark);
}
@media (max-width: 760px) {
  #usersDialog .session-monitor {
    padding: 12px !important;
    border: 1px solid rgba(228, 229, 229, .12) !important;
    border-radius: 12px !important;
  }
  #usersDialog .session-monitor-heading {
    align-items: flex-start !important;
  }
  #usersDialog .session-monitor-heading h3 {
    font-size: 17px !important;
  }
  #usersDialog .session-online-count {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  #usersDialog .session-cards {
    grid-template-columns: minmax(0, 360px) !important;
    justify-content: start !important;
  }
  #usersDialog .session-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-width: 0 !important;
  }
  #usersDialog .login-history-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}
.users-dialog *,
.users-list *,
.user-create * {
  box-sizing: border-box;
}
.users-dialog input,
.users-dialog select,
.users-dialog button {
  max-width: 100%;
}
.users-grid-head,
.user-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(150px, .9fr) minmax(100px, .55fr) minmax(130px, .7fr) minmax(300px, 1.7fr) minmax(300px, 1.7fr) minmax(200px, 1.15fr) minmax(100px, .55fr);
  column-gap: 12px;
  align-items: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.users-grid-head {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 11px 12px;
  background: #303842;
  color: var(--ink-on-dark);
  font-weight: 800;
  text-align: center;
  border-bottom: 1px solid rgba(254, 254, 254, .12);
}
.user-row {
  padding: 9px 12px;
  min-height: 58px;
  background: rgba(62, 70, 80, .76);
  border-bottom: 1px solid rgba(254, 254, 254, .08);
}
.user-row:nth-child(odd) {
  background: rgba(55, 64, 73, .86);
}
.user-row:last-child {
  border-bottom: 0;
}
.user-field {
  display: grid;
  gap: 5px;
  align-self: center;
  min-width: 0;
  padding-right: 10px;
}
.user-field > span {
  display: none;
}
.user-field input,
.user-field select {
  width: 100%;
  color: #f7f8f6;
  background: rgba(24, 32, 41, .42);
  border-color: rgba(254, 254, 254, .18);
  height: 36px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-field input:focus,
.user-field select:focus {
  background: rgba(24, 32, 41, .56);
}
.user-field input::placeholder {
  color: rgba(247, 248, 246, .62);
}
.password-field {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}
.password-field input {
  width: 100%;
  padding-right: 52px;
}
.user-password {
  display: grid !important;
  justify-self: center;
  width: min(100%, 250px);
  visibility: visible;
  opacity: 1;
}
.users-grid-head span:nth-child(7) {
  width: min(100%, 250px);
  justify-self: center;
  text-align: center;
}
.user-password .password-field {
  display: grid !important;
  visibility: visible;
  opacity: 1;
}
.user-password input[data-user-field="password"] {
  display: block !important;
  visibility: visible;
  opacity: 1;
  min-width: 0;
  background: rgba(24, 32, 41, .58);
  border-color: rgba(254, 254, 254, .24);
}
.password-field button {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 38px;
  min-width: 38px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #c9d0d4;
  line-height: 1;
  white-space: nowrap;
  border-radius: 50%;
}
.password-field .icon-eye {
  display: inline-grid;
  place-items: center;
}
.icon-eye::before {
  content: "";
  width: 22px;
  height: 14px;
  border: 2px solid #c9d0d4;
  border-radius: 50% / 58%;
  transform: rotate(-2deg);
}
.icon-eye::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #eef1f2;
  border-radius: 50%;
  background: #3f4851;
}
.icon-eye.is-visible::before,
.icon-eye.is-visible::after {
  border-color: #f4f6f7;
}
.password-field button:hover {
  background: rgba(255, 255, 255, .08);
  color: #eef1f2;
}
.password-field button:focus-visible {
  outline: 2px solid rgba(238, 241, 242, .38);
  outline-offset: 2px;
}
.user-active-toggle,
.user-stock-toggle,
.user-task-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 36px;
  min-width: 0;
  padding: 0 8px;
  color: var(--ink-on-dark);
  font-size: 13px;
}
.user-active-toggle input,
.user-stock-toggle input,
.user-task-toggle input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
}
.user-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  align-self: center;
  min-width: 0;
  padding-left: 8px;
}
.user-actions .stock-action-icon-button {
  margin: 0;
  padding: 0;
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
}
.danger-action {
  background: #9e3f3f;
  color: #fff;
  border-color: rgba(255, 255, 255, .10);
}
.danger-action:hover {
  background: #b84a4a;
}
#usersDialog,
.users-dialog {
  width: min(1960px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
}
.users-grid-head,
.user-row {
  grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, .55fr) minmax(0, .7fr) minmax(0, 1.7fr) minmax(0, 1.7fr) minmax(150px, 1.15fr) 86px;
  column-gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
}

@media (min-width: 761px) {
  #usersDialog .users-list { overflow-x: hidden; }
  #usersDialog .users-grid { min-width: 0; }
  #usersDialog .user-actions { gap: 6px; width: 86px; overflow: hidden; }
  #usersDialog .users-grid-head span:last-child { white-space: nowrap; }
  #usersDialog .user-password { min-width: 0; overflow: hidden; }
}

.user-stock-permissions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  min-height: 40px;
  padding: 3px;
  border: 1px solid rgba(254, 254, 254, .14);
  border-radius: 6px;
  background: rgba(24, 32, 41, .30);
}

.user-stock-permissions label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border-right: 1px solid rgba(254, 254, 254, .10);
  font-size: 13px;
  white-space: nowrap;
}

.user-stock-permissions label:last-child {
  border-right: 0;
}

.user-stock-permissions input {
  flex: 0 0 auto;
}

.user-stock-permissions--all {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dff3c6;
  border-color: rgba(119, 188, 31, .42);
  background: rgba(119, 188, 31, .10);
  font-size: 14px;
}

.user-stock-permissions.is-unavailable {
  border-color: rgba(254, 254, 254, .08);
  background: rgba(24, 32, 41, .18);
  opacity: .55;
}

.user-stock-permissions.is-unavailable label {
  color: rgba(247, 248, 246, .55);
  cursor: not-allowed;
}

.user-spec-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(119, 188, 31, .30);
  border-radius: 6px;
  color: #dff3c6;
  background: rgba(119, 188, 31, .08);
  font-size: 13px;
  font-weight: 800;
}

.user-spec-toggle input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
}

.user-spec-toggle.is-unavailable {
  color: rgba(247, 248, 246, .50);
  border-color: rgba(254, 254, 254, .08);
  background: rgba(24, 32, 41, .18);
  opacity: .55;
  cursor: not-allowed;
}
.user-field {
  padding-right: 0;
}
.user-password {
  justify-self: stretch;
  width: 100%;
}
.users-grid-head span:nth-child(7) {
  width: auto;
}
.user-password .password-field,
.password-field {
  display: block;
}
.password-field button {
  width: 38px;
  min-width: 38px;
}
.user-actions {
  padding-left: 0;
}
.reference-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 42px;
  text-align: center;
  white-space: nowrap;
}
.reference-actions button {
  min-width: 0;
  white-space: nowrap;
  margin: 0;
}
.reference-actions .stock-action-icon-button {
  align-self: center;
  flex: 0 0 30px;
}

.reference-name-cell {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
}

.reference-row-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 42px;
  padding: 0;
}

.reference-row-select input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cyan);
}

.reference-row-select span {
  display: none;
}

.reference-name-cell > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
}

.reference-name-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.reference-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  grid-column: 1 / -1;
  margin-top: -6px;
}

.reference-source-badge,
.reference-shared-stock-badge,
.reference-non-stock-badge,
.reference-conflict-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid rgba(228, 229, 229, 0.28);
  border-radius: 999px;
  background: rgba(228, 229, 229, 0.08);
  color: rgba(247, 248, 246, 0.82);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.reference-source-badge--spec {
  border-color: rgba(119, 188, 31, 0.58);
  color: var(--brand-green);
}

.reference-source-badge--stock {
  border-color: rgba(82, 212, 227, 0.58);
  color: var(--cyan);
}

.reference-source-badge--manual {
  border-color: rgba(255, 210, 6, 0.6);
  color: #ffd206;
}

.reference-source-badge--import {
  border-color: rgba(9, 169, 222, 0.6);
  color: #09a9de;
}

.reference-shared-stock-badge {
  border-color: rgba(82, 212, 227, 0.55);
  background: rgba(82, 212, 227, 0.12);
  color: #dffaff;
}

.reference-non-stock-badge {
  border-color: rgba(228, 229, 229, 0.45);
  background: rgba(228, 229, 229, 0.09);
  color: rgba(247, 248, 246, 0.82);
}

.reference-stock-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.reference-non-stock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(82, 212, 227, 0.34);
  border-radius: 7px;
  background: rgba(37, 128, 138, 0.12);
  color: rgba(247, 248, 246, 0.88);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.reference-non-stock-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cyan);
}

.reference-stock-cell--disabled .reference-non-stock-toggle {
  border-color: rgba(82, 212, 227, 0.62);
  background: rgba(82, 212, 227, 0.15);
  color: #dffaff;
}

.reference-stock-cell--disabled input[data-equipment-stock-name] {
  opacity: 0.7;
  background: rgba(228, 229, 229, 0.07);
  color: rgba(247, 248, 246, 0.7);
  cursor: not-allowed;
}

.reference-shared-group-row td {
  position: relative;
  padding: 12px 10px 8px;
  background: transparent !important;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}

.reference-shared-group-row td::before {
  content: "";
  position: absolute;
  inset: 0 0 0;
  border: 2px solid rgba(82, 212, 227, 0.42);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: transparent;
  pointer-events: none;
}

.reference-shared-group-row td::after {
  content: "";
  position: absolute;
  inset: 2px 2px 0;
  border-radius: 7px 7px 0 0;
  background: rgba(37, 128, 138, 0.16);
  pointer-events: none;
}

.reference-shared-group-row td > * {
  position: relative;
  z-index: 2;
}

.reference-shared-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid rgba(82, 212, 227, 0.38);
  border-radius: 999px;
  background: rgba(82, 212, 227, 0.08);
  color: rgba(247, 248, 246, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.reference-shared-group span {
  color: var(--cyan);
}

.reference-shared-group strong {
  color: var(--light);
  font-size: 13px;
}

.reference-grouped-row td:first-child {
  padding-left: 18px;
}

.reference-grouped-row td {
  background: rgba(37, 128, 138, 0.12) !important;
}

.reference-grouped-row td:first-child {
  box-shadow: inset 2px 0 0 rgba(82, 212, 227, 0.42);
}

.reference-grouped-row td:last-child {
  box-shadow: inset -2px 0 0 rgba(82, 212, 227, 0.42);
}

.reference-grouped-row--end td {
  border-bottom: 0;
  box-shadow: none;
}

.reference-shared-group-end-row td {
  position: relative;
  height: 16px;
  padding: 0;
  background: transparent !important;
  border: 0;
}

.reference-shared-group-end-row td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  border: 2px solid rgba(82, 212, 227, 0.42);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: transparent;
  pointer-events: none;
}

.reference-shared-group-end-row td::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 6px;
  border-radius: 0 0 7px 7px;
  background: rgba(37, 128, 138, 0.16);
  pointer-events: none;
}

.reference-conflict-badge {
  border-color: rgba(245, 126, 45, 0.68);
  background: rgba(245, 126, 45, 0.14);
  color: #ffd8c2;
}

.reference-stock-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(82, 212, 227, 0.55);
  border-radius: 6px;
  background: rgba(82, 212, 227, 0.12);
  color: var(--ink-on-dark);
  font-size: 13px;
  font-weight: 800;
}
.reference-stock-link:hover {
  border-color: var(--cyan);
  background: rgba(82, 212, 227, 0.24);
}
.reference-highlight td {
  background: rgba(82, 212, 227, 0.18) !important;
  box-shadow:
    inset 0 2px 0 var(--cyan),
    inset 0 -2px 0 var(--cyan);
}
.reference-highlight td:first-child {
  box-shadow:
    inset 2px 0 0 var(--cyan),
    inset 0 2px 0 var(--cyan),
    inset 0 -2px 0 var(--cyan);
}
.reference-highlight td:last-child {
  box-shadow:
    inset -2px 0 0 var(--cyan),
    inset 0 2px 0 var(--cyan),
    inset 0 -2px 0 var(--cyan);
}
.reference-highlight input {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(82, 212, 227, 0.28);
}
.stock-reference-back-action {
  margin-left: auto;
}

.reference-actions .stock-action-icon-button.is-saving {
  background: rgba(82, 212, 227, 0.16);
  box-shadow: 0 0 0 1px rgba(82, 212, 227, 0.38);
}

.reference-actions .stock-action-icon-button.is-saved {
  background: rgba(119, 188, 31, 0.14);
  box-shadow: 0 0 0 1px rgba(119, 188, 31, 0.42);
}
.empty-list {
  margin: 0;
  padding: 18px;
  color: rgba(247, 248, 246, .68);
}

@media (max-width: 1380px) {
  .workspace {
    --side-pane-width: clamp(220px, 22vw, 340px);
  }
  .digest-table {
    font-size: clamp(8.5px, .7vw, 10px);
  }
  th {
    padding: 6px 2px;
    font-size: clamp(8px, .66vw, 9px);
    line-height: 1.05;
  }
  td { padding: 3px 3px; }
  .side-pane section { padding: 10px; }
  .side-pane {
    gap: 10px;
  }
  .side-pane h2 {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .stack-form {
    gap: 8px;
  }
  .stack-form button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 12px;
  }
  .side-pane input,
  .side-pane textarea,
  .side-pane .custom-select-button {
    height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 11px;
  }
  .side-pane textarea.compact-note {
    height: 32px;
    min-height: 32px;
  }
  .document-uploader,
  .attached-documents {
    padding: 8px;
  }
  .document-uploader {
    gap: 7px;
  }
  .note-toggle {
    height: 22px;
    padding: 0 6px;
    font-size: 10px;
  }
  .summary-table th {
    height: 36px;
    padding: 5px 3px;
    font-size: 0;
    line-height: 1.05;
  }
  .summary-table th[data-short]::after {
    content: attr(data-short);
    display: block;
    font-size: clamp(8px, .78vw, 10px);
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .summary-table td {
    padding: 4px 5px;
    font-size: clamp(10px, .9vw, 12px);
  }
  .summary-table th:nth-child(1),
  .summary-table td:nth-child(1) {
    width: 32%;
  }
  .summary-table th:nth-child(2),
  .summary-table td:nth-child(2) {
    width: 13%;
  }
  .summary-table th:nth-child(3),
  .summary-table td:nth-child(3) {
    width: 15%;
  }
  .summary-table th:nth-child(4),
  .summary-table td:nth-child(4) {
    width: 11%;
  }
  .summary-table th:nth-child(5),
  .summary-table td:nth-child(5) {
    width: 15%;
  }
  .summary-table th:nth-child(6),
  .summary-table td:nth-child(6) {
    width: 14%;
  }
  .digest-table th:nth-child(2), .digest-table td:nth-child(2) { width: 8.0%; }
  .digest-table th:nth-child(7), .digest-table td:nth-child(7) { width: 7.3%; }
  .digest-table th:nth-child(11), .digest-table td:nth-child(11) { width: 5.2%; }
  .digest-table th:nth-child(13), .digest-table td:nth-child(13) { width: 4.6%; }
  .digest-table th:nth-child(15), .digest-table td:nth-child(15) { width: 5.4%; }
  .digest-table th:nth-child(17), .digest-table td:nth-child(17) { width: 6.2%; }
  .digest-table th:nth-child(17) {
    font-size: clamp(7.5px, .62vw, 8.5px);
  }
  .digest-table th[data-short] {
    font-size: 0;
  }
  .digest-table th[data-short]::before {
    content: attr(data-short);
    display: block;
    font-size: clamp(7.5px, .7vw, 9px);
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    text-align: center;
  }
  .digest-table td.shipped-cell .ship-input {
    width: min(70px, calc(100% - 4px));
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9px;
  }
  .attached-item a {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .doc-badge {
    min-width: 18px;
    height: 20px;
    padding: 0 3px;
    font-size: 9px;
  }
}


.mobile-view {
  display: none;
  min-height: 0;
  padding: 10px 12px 14px;
  overflow-y: auto;
}

.mobile-cards {
  display: grid;
  gap: 12px;
}

.mobile-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: 12px;
  background: var(--surface-panel);
}

.mobile-card--done {
  background: rgba(200, 221, 184, .94);
  color: var(--ink);
}

.mobile-card--partial,
.mobile-card--work {
  background: rgba(216, 221, 218, .94);
  color: var(--ink);
}

.mobile-card--soon {
  background: rgba(245, 237, 206, .96);
  color: var(--ink);
}

.mobile-card--overdue,
.mobile-card--late {
  background: rgba(243, 215, 208, .96);
  color: var(--ink);
}

.mobile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mobile-card-title-block {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.mobile-card-title-block h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.mobile-card-subtitle {
  font-size: 13px;
  opacity: .82;
}

.mobile-card-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mobile-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(24, 32, 41, .12);
}

.mobile-status-pill--signal {
  background: rgba(119, 188, 31, .18);
}

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

.mobile-card-meta div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(24, 32, 41, .08);
}

.mobile-card-meta span {
  font-size: 11px;
  opacity: .75;
}

.mobile-card-meta strong {
  font-size: 14px;
  line-height: 1.25;
}

.mobile-card-details {
  border-radius: 10px;
  background: rgba(24, 32, 41, .08);
  overflow: hidden;
}

.mobile-card-details summary {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.mobile-card-details summary::-webkit-details-marker {
  display: none;
}

.mobile-card-details summary span:first-child {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}

.mobile-card-details summary span:last-child {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.mobile-card-lines {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.mobile-line-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid rgba(24, 32, 41, .08);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mobile-line-item:first-child {
  border-top: 0;
}

.mobile-line-item.selected {
  border-color: rgba(82, 212, 227, 0.5);
  border-radius: 8px;
  background: rgba(82, 212, 227, 0.12);
  padding: 8px;
}

.shipment-pane-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shipment-pane-title-row h2 {
  margin: 0;
}

.mobile-close-shipment {
  display: none;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}

.mobile-line-top,
.mobile-line-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mobile-line-top strong {
  font-size: 14px;
}

.mobile-line-bottom {
  font-size: 12px;
  opacity: .82;
}

.mobile-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.mobile-doc-summary {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mobile-doc-badge-button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
}

.mobile-doc-badge-button:hover,
.mobile-doc-badge-button:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid rgba(82, 212, 227, .75);
  outline-offset: 2px;
}

.mobile-date-summary {
  font-size: 12px;
  opacity: .78;
  text-align: right;
}

.mobile-empty {
  padding: 18px;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: 10px;
  background: var(--surface-panel);
  color: rgba(247, 248, 246, .74);
  text-align: center;
}

@media (max-width: 1400px) {
  .app-shell {
    height: auto;
    min-height: 100vh;
    grid-template-rows: auto auto auto auto;
    overflow: visible;
  }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters > label,
  .filters .custom-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .period-filter {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }
  .spec-workbar {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .manual-line {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 32px;
  }
  .manual-equipment,
  .manual-period {
    grid-column: span 2;
  }
  .topbar,
  .topbar-nav {
    align-items: flex-start;
  }
  .nav-group {
    flex-wrap: wrap;
  }
  .spec-workbar-label {
    width: 100%;
    min-height: 0;
    padding: 0;
    border-right: 0;
  }
}
@media (max-width: 1024px) {
  .workspace { display: none; }
  .mobile-view { display: block; min-height: 0; }
  .workspace-splitter { display: none; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body.mobile-shipment-open {
    overflow: hidden;
  }
  body.mobile-shipment-open .workspace {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: block;
    width: 100vw;
    height: 100dvh;
    background: rgba(24, 32, 41, .62);
  }
  body.mobile-shipment-open .workspace > .table-pane,
  body.mobile-shipment-open .workspace > .workspace-splitter {
    display: none;
  }
  body.mobile-shipment-open .side-pane {
    position: absolute;
    inset: 0 0 0 auto;
    display: block;
    width: min(560px, 100vw);
    height: 100dvh;
    padding: 12px;
    overflow-y: auto;
    background: var(--surface-panel);
    box-shadow: -16px 0 40px rgba(24, 32, 41, .35);
  }
  body.mobile-shipment-open #summaryPane,
  body.mobile-shipment-open .side-pane-splitter {
    display: none;
  }
  body.mobile-shipment-open #shipmentPane {
    min-height: 100%;
  }
  body.mobile-shipment-open .mobile-close-shipment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 680px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px;
  }
  .app-brand {
    width: 100%;
    min-width: 0;
    gap: 12px;
  }
  .app-brand h1 {
    font-size: 20px;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  .brand-logo-dark {
    width: 124px;
  }
  .topbar nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .spec-workbar { padding: 0; }
  .spec-workbar-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .topbar nav button {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
  }
  .filters {
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }
  .filters > button {
    width: 100%;
  }
  .period-filter {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1px 14px;
  }
  .metric-card {
    min-width: 0;
  }
  .form-grid { grid-template-columns: 1fr; }
  .manual-line {
    grid-template-columns: 1fr 32px;
  }
  .manual-line label {
    grid-column: 1;
  }
  .mobile-view {
    padding: 10px 14px 14px;
  }
  .mobile-card { padding: 12px; }
  .mobile-card-header,
  .mobile-card-footer,
  .mobile-line-top,
  .mobile-line-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-card-pills {
    justify-content: flex-start;
  }
  .mobile-card-meta {
    grid-template-columns: 1fr;
  }
}

/* Mobile tasks are a touch-first working screen, independent of drag-and-drop. */
@media (max-width: 680px) {
  #taskTrackerDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #taskTrackerDialog .task-tracker-dialog {
    width: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 14px 12px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
  }

  .task-tracker-topbar {
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .task-tracker-brand {
    width: 100% !important;
    gap: 10px !important;
  }

  .task-tracker-brand img { width: 104px !important; }
  .task-tracker-brand h2 {
    font-size: 27px !important;
    line-height: 1.15 !important;
    transform: none !important;
  }

  .task-tracker-top-actions {
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
  }

  .task-tracker-back {
    min-width: 88px !important;
    min-height: 44px !important;
  }

  .task-tracker-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .task-tracker-panel {
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }

  .task-tracker-section-head {
    min-height: 44px !important;
    margin-bottom: 12px !important;
    align-items: center !important;
    flex-direction: row !important;
  }

  .task-tracker-section-head h3 { font-size: 18px !important; }
  .task-tracker-add-icon {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .task-tracker-inline-form,
  .task-tracker-all-form,
  .task-tracker-group-tools,
  .task-tracker-filters {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .task-tracker-inline-form input,
  .task-tracker-inline-form select,
  .task-tracker-inline-form button,
  .task-tracker-group-tools input,
  .task-tracker-group-tools button,
  .task-tracker-filters input,
  .task-tracker-filters select,
  .task-tracker-filters .custom-select-button {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  .task-tracker-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .task-tracker-tabs button {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 5px 7px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .task-tracker-group-chips {
    flex-wrap: nowrap !important;
    margin: 0 -2px 14px !important;
    padding: 2px !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
  }

  .task-tracker-group-chips button {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    height: auto !important;
    white-space: nowrap !important;
  }

  .task-tracker-drop-group { padding: 6px 0 !important; }
  .task-tracker-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 10px !important;
    cursor: default !important;
  }

  .task-tracker-check {
    position: relative !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .task-tracker-check::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 2px solid rgba(247,248,245,.28);
    border-radius: 50%;
  }

  .task-tracker-card.is-done .task-tracker-check::before {
    border-color: var(--task-green);
    background: var(--task-green);
  }

  .task-tracker-title {
    height: 44px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .task-tracker-caption {
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    font-size: 12px !important;
  }

  .task-tracker-caption span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .task-tracker-card-actions {
    grid-column: 2 !important;
    justify-content: flex-end !important;
    gap: 2px !important;
  }
  .task-tracker-edit,
  .task-tracker-delete {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .task-tracker-card-meta {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .task-tracker-card-meta select,
  .task-tracker-card-meta input,
  .task-tracker-card-meta .custom-select-button {
    min-height: 44px !important;
    height: 44px !important;
  }

  .task-review-toolbar { gap: 10px !important; }
  .task-review-filters { grid-template-columns: minmax(0, 1fr) !important; }
  .task-review-filters button,
  .task-review-toolbar > #taskTrackerReadAll,
  .task-review-main,
  .task-review-open {
    min-height: 44px !important;
  }
}

@media (max-width: 860px) {
  .user-create-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .user-create-grid {
    grid-template-columns: 1fr;
  }
  .users-grid-head {
    display: none;
  }
  .user-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .user-field > span {
    display: block;
    color: rgba(247, 248, 246, .68);
    font-size: 12px;
  }
  .user-active-toggle,
  .user-stock-toggle,
  .user-task-toggle {
    justify-content: flex-start;
  }
  .user-actions {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}


.dialog-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.warehouse-dialog {
  width: min(96vw, 1840px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 24px);
  margin: auto;
}

.warehouse-body {
  display: grid;
  gap: 16px;
  min-height: 0;
}

.warehouse-toolbar {
  display: grid;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.16);
}

.warehouse-toolbar-main {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.warehouse-filter-row {
  display: grid;
  grid-template-columns: 110px 170px 170px 170px 130px 260px;
  gap: 8px;
  align-items: end;
}

.warehouse-filter-row label {
  min-width: 0;
}

.warehouse-filter-row select,
.warehouse-filter-row input,
.warehouse-filter-row button {
  width: 100%;
}

#warehouseResetDatesButton {
  min-width: 0;
  padding: 10px 12px;
  line-height: 1.1;
}

.warehouse-year-badge {
  color: #fff;
  font-weight: 700;
}

.warehouse-toolbar-note {
  color: rgba(247, 248, 246, .7);
  font-size: 12px;
  text-align: right;
}

.warehouse-table-panel,
.warehouse-group-editor {
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.14);
  padding: 14px;
  min-height: 0;
}

.warehouse-table-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.warehouse-group-editor {
  display: grid;
  gap: 10px;
}

.warehouse-group-editor-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.warehouse-group-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.warehouse-group-customers {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  padding-right: 4px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.warehouse-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-on-dark);
}

.warehouse-checkbox input {
  min-width: auto;
}

.warehouse-group-header {
  width: 100%;
  padding: 3px 7px;
  min-height: 24px;
  background: rgba(53, 61, 70, 0.78);
  color: #fff;
  border: 1px solid rgba(228, 229, 229, 0.14);
  font-size: 11px;
  line-height: 1.05;
}

.warehouse-group-header:hover {
  background: rgba(69, 78, 89, 0.92);
}

.warehouse-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 5px;
  align-items: center;
}

.warehouse-group-manage {
  min-width: 26px;
  width: 26px;
  height: 24px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  background: rgba(53, 61, 70, 0.78);
  color: #fff;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.warehouse-group-manage:hover {
  background: rgba(69, 78, 89, 0.92);
}

.warehouse-group-edit-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.warehouse-detail-panel {
  border: 1px solid rgba(228, 229, 229, 0.12);
  border-radius: var(--radius);
  background: rgba(24, 32, 41, 0.14);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.warehouse-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.warehouse-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.icon-print-button,
.icon-excel-button {
  width: 38px;
  min-width: 38px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(119, 188, 31, 0.48);
  border-radius: 8px;
  color: var(--lime);
}
.icon-print-button:hover,
.icon-excel-button:hover {
  background: rgba(119, 188, 31, 0.12);
  border-color: rgba(119, 188, 31, 0.8);
}
.warehouse-action-icon {
  width: 25px;
  height: 25px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.warehouse-action-icon circle,
.warehouse-action-fill {
  fill: currentColor;
  stroke: none;
}
.icon-excel-button .warehouse-action-icon {
  width: 29px;
  height: 29px;
}
.warehouse-detail-meta {
  display: grid;
  gap: 4px;
}

.warehouse-detail-meta strong {
  color: #fff;
  font-size: 18px;
}

.warehouse-detail-meta span {
  color: rgba(247, 248, 246, .72);
  font-size: 12px;
}

.warehouse-detail-wrap {
  max-height: 58vh;
  overflow: auto;
  border: 1px solid rgba(228, 229, 229, 0.1);
  border-radius: 8px;
}

.warehouse-detail-table {
  width: max-content;
  min-width: max-content;
  border-collapse: collapse;
  table-layout: auto;
}

.warehouse-detail-table th,
.warehouse-detail-table td {
  min-width: 0;
  width: auto;
  text-align: center;
  padding: 4px 6px;
  line-height: 1.08;
  font-size: 11px;
  vertical-align: middle;
}

.warehouse-detail-table thead th {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.05;
  height: 32px;
}

.warehouse-detail-table thead th,
.warehouse-detail-table .warehouse-detail-qty,
.warehouse-detail-table .warehouse-detail-deadline-col {
  text-align: center !important;
  justify-content: center;
}

.warehouse-detail-table th:first-child,
.warehouse-detail-table td:first-child {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  text-align: left;
}

.warehouse-detail-table thead th:not(:first-child) {
  white-space: nowrap;
}

.warehouse-detail-table thead tr:first-child th:not(:first-child):not(:last-child) {
  min-width: max-content;
  max-width: none;
  padding-left: 10px;
  padding-right: 10px;
}

.warehouse-detail-table thead tr:nth-child(2) th:not(:last-child) {
  min-width: 68px;
}

.warehouse-detail-table--excel thead th {
  background: rgba(53, 61, 70, 0.98);
  color: #fff;
  font-weight: 700;
}
.warehouse-detail-table thead tr:nth-child(1) th {
  top: 0;
  z-index: 8;
}
.warehouse-detail-table thead tr:nth-child(2) th {
  top: 32px;
  z-index: 7;
}
.warehouse-detail-table thead tr:nth-child(3) th {
  top: 64px;
  z-index: 6;
}
.warehouse-detail-table thead tr:nth-child(1) th[rowspan="3"] {
  top: 0;
  z-index: 9;
}

.warehouse-detail-table--excel tbody td {
  background: rgba(248, 248, 246, 0.96);
  color: var(--ink);
}

.warehouse-detail-table--excel tbody tr:nth-child(even) td {
  background: #e2e7e4;
}

.warehouse-detail-table--excel tbody .warehouse-sticky-col {
  background: #f4e8b8;
}

.warehouse-detail-table--excel tbody tr:nth-child(even) .warehouse-sticky-col {
  background: #eedfa3;
}

.warehouse-detail-table--excel thead .warehouse-detail-group-0 {
  background: rgba(53, 61, 70, 0.98);
}

.warehouse-detail-table--excel thead .warehouse-detail-group-1 {
  background: #46515d;
}

.warehouse-detail-table--excel tbody td.warehouse-detail-group-0 {
  background: rgba(248, 248, 246, 0.96);
}

.warehouse-detail-table--excel tbody td.warehouse-detail-group-1 {
  background: #edf1ef;
}

.warehouse-detail-table--excel tbody tr:nth-child(even) td.warehouse-detail-group-0 {
  background: #e2e7e4;
}

.warehouse-detail-table--excel tbody tr:nth-child(even) td.warehouse-detail-group-1 {
  background: #d6deda;
}

.warehouse-detail-qty {
  min-width: 56px;
  font-weight: 700;
}

.warehouse-detail-deadline-col {
  min-width: 68px !important;
  width: 68px;
  max-width: 68px;
}

.warehouse-detail-deadline {
  font-size: 11px;
  color: #20303d;
}

.warehouse-table-wrap {
  max-height: calc(100vh - 250px);
  overflow: auto;
}

.warehouse-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Mobile card labels share this markup with the desktop table. Keep them
   out of the desktop layout; mobile media queries below enable them. */
.warehouse-table--summary .warehouse-mobile-row {
  display: contents;
}

.warehouse-table--summary .warehouse-mobile-label {
  display: none;
}

.warehouse-table th,
.warehouse-table td {
  min-width: 92px;
  text-align: center;
  padding: 3px 4px;
  line-height: 1.15;
  font-size: 12px;
}

.warehouse-table thead th {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
}

.warehouse-table th:first-child,
.warehouse-table td:first-child {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  text-align: left;
}

.warehouse-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(53, 61, 70, 0.98);
  box-shadow: 1px 0 0 rgba(228, 229, 229, 0.12);
}

.warehouse-table tbody .warehouse-sticky-col {
  background: rgba(216, 221, 218, 0.96);
  color: var(--ink);
}

.warehouse-equipment {
  color: var(--ink);
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.warehouse-total {
  font-weight: 800;
  color: #fff;
}

.warehouse-stock-cell input {
  width: 100%;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 2px;
  min-height: 24px;
  font-size: 12px;
}

.warehouse-deficit.negative {
  background: rgba(243, 215, 208, 0.9);
  color: #5b1f1f;
  font-weight: 800;
}

.warehouse-deficit.positive {
  background: rgba(200, 221, 184, 0.92);
  color: #17341b;
  font-weight: 800;
}

@media (max-width: 1200px) {
  .warehouse-toolbar {
    align-items: start;
  }

  .warehouse-toolbar-main {
    align-items: start;
    flex-direction: column;
  }

  .warehouse-filter-row {
    grid-template-columns: 1fr 1fr;
  }
}

.warehouse-current-stock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(182, 188, 189, 0.78);
  color: #fff;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.warehouse-stock-cell--shared .warehouse-current-stock {
  padding-left: 4px;
  padding-right: 4px;
  border-color: rgba(82, 212, 227, 0.45);
}

.warehouse-shared-stock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(82, 212, 227, 0.2);
  border: 1px solid rgba(82, 212, 227, 0.65);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.warehouse-stock-location-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(37, 128, 138, 0.26);
  border: 1px solid rgba(82, 212, 227, 0.72);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.warehouse-stock-cell--multi-location .warehouse-current-stock {
  padding-left: 6px;
  padding-right: 6px;
  border-color: rgba(82, 212, 227, 0.45);
}

.warehouse-stock-breakdown-table th:nth-child(1),
.warehouse-stock-breakdown-table td:nth-child(1) {
  width: 48%;
}

.warehouse-stock-breakdown-table th:nth-child(2),
.warehouse-stock-breakdown-table td:nth-child(2) {
  width: 22%;
  text-align: center;
}

.warehouse-current-stock:hover,
.warehouse-current-stock:focus-visible {
  border-color: var(--brand-green, #72bf00);
  background: rgba(162, 170, 171, 0.92);
  outline: none;
}

.warehouse-need-button {
  width: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.warehouse-need-button:hover,
.warehouse-need-button:focus-visible {
  background: rgba(82, 212, 227, 0.18);
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.warehouse-need-dialog {
  width: min(880px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
}

.warehouse-need-body {
  max-height: 560px;
  overflow: auto;
}

.warehouse-need-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.warehouse-need-table th,
.warehouse-need-table td {
  padding: 10px 12px;
  border: 1px solid rgba(51, 58, 68, 0.18);
}

.warehouse-need-table th {
  position: sticky;
  top: 0;
  background: #303945;
  color: var(--ink-on-dark);
}

.warehouse-need-table td {
  background: #e4e9e6;
  color: var(--ink);
}

.warehouse-need-table tr:nth-child(even) td {
  background: #d4ddda;
}

.warehouse-need-row-link {
  cursor: pointer;
}

.warehouse-need-row-link:hover td {
  background: rgba(82, 212, 227, 0.22);
}

.warehouse-need-table th:nth-child(1),
.warehouse-need-table td:nth-child(1) {
  width: 22%;
}

.warehouse-need-table th:nth-child(2),
.warehouse-need-table td:nth-child(2) {
  width: 38%;
}

.warehouse-need-table th:nth-child(3),
.warehouse-need-table td:nth-child(3) {
  width: 24%;
}

.warehouse-need-table th:nth-child(4),
.warehouse-need-table td:nth-child(4) {
  width: 16%;
  text-align: center;
  font-weight: 800;
}

.warehouse-need-spec {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(37, 128, 138, 0.55);
  border-radius: 6px;
  background: rgba(82, 212, 227, 0.14);
  color: var(--graphite);
  font-weight: 800;
  text-align: left;
}

.warehouse-need-spec:hover,
.warehouse-need-spec:focus-visible {
  border-color: var(--cyan);
  background: rgba(82, 212, 227, 0.28);
}

.warehouse-need-selected {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(228, 229, 229, 0.18);
}

.warehouse-need-selected > * {
  padding: 14px;
  background: #e4e9e6;
  color: var(--ink);
}

.warehouse-need-selected strong {
  color: var(--graphite);
}

#stockDialog {
  box-sizing: border-box;
  width: min(1800px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  min-width: 0;
  height: min(1080px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  margin: 10px auto;
  overflow: hidden;
}

.stock-dialog {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  max-height: none;
  padding: 14px;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}

.stock-dialog *,
.stock-dialog *::before,
.stock-dialog *::after {
  box-sizing: border-box;
}

.stock-dialog > header {
  flex: 0 0 auto;
  min-width: 0;
  gap: 10px;
  padding-bottom: 10px;
}

.stock-dialog > header h2 {
  flex: 0 0 auto;
  margin: 0;
}

.stock-dialog > header .dialog-header-actions {
  min-width: 0;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stock-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  min-width: 0;
  gap: 9px;
  overflow: hidden;
}

.stock-toolbar,
.stock-page-settings {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(228, 229, 229, 0.13);
  border-radius: 7px;
  background: rgba(45, 53, 62, 0.7);
}

.stock-year-control {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  gap: 0;
  align-self: center;
}

.stock-year-control .custom-select {
  width: 100%;
}

.stock-year-control select,
.stock-year-control .custom-select-button {
  height: 38px;
  min-height: 38px;
}

.stock-page-tabs {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  padding: 0 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.stock-page-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid rgba(228, 229, 229, 0.2);
  background: rgba(77, 86, 96, 0.86);
}

.stock-page-tab.active {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime);
}

.stock-page-tab--summary {
  border-color: rgba(82, 212, 227, 0.48);
  background: #11545c;
  color: #f2fbfc;
}

.stock-page-tab--summary:hover,
.stock-page-tab--summary.active {
  border-color: #52d4e3;
  background: #0d6670;
  box-shadow: 0 0 0 2px #52d4e3;
}

.stock-page-tab--add {
  width: 44px;
  min-width: 44px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(228, 229, 229, 0.2);
  border-radius: var(--radius);
  background: rgba(77, 86, 96, 0.86);
  box-shadow: none;
  overflow: hidden;
}

.stock-page-tab--add span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
}

.stock-page-tab--add span::before,
.stock-page-tab--add span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: #f7f8f6;
  transform: translate(-50%, -50%);
}

.stock-page-tab--add span::after {
  width: 3px;
  height: 18px;
}

.stock-page-tab--add:hover {
  border-color: #52d4e3;
  background: rgba(82, 212, 227, 0.12);
  box-shadow: 0 0 0 1px rgba(82, 212, 227, 0.45);
}

.stock-page-settings label {
  flex: 1 1 260px;
  min-width: 180px;
  max-width: 520px;
}

.stock-page-settings label:has(#stockPageName) {
  flex: 0 0 180px;
  max-width: 180px;
}

.stock-page-settings .stock-location-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: 38px;
  min-width: 0;
  max-width: none;
  margin-left: auto;
  white-space: nowrap;
}

.stock-page-settings .stock-location-control select {
  width: 150px;
  min-width: 150px;
}

.stock-page-settings .stock-exclude-control {
  display: inline-flex;
  flex: 0 0 auto;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  height: 38px;
  min-width: 0;
  max-width: none;
  margin: 0;
  white-space: nowrap;
  color: rgba(247, 248, 246, 0.78);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.stock-page-settings .stock-exclude-control input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #52d4e3;
}

.stock-import-page-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 38px;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid rgba(82, 212, 227, 0.72);
}

.stock-save-page-action,
.stock-delete-page-action {
  align-self: end;
  margin-bottom: 3px;
}

.stock-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 420px);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  gap: 9px;
  overflow: hidden;
}

.stock-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  gap: 9px;
  overflow: hidden;
}

.stock-summary-location-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.stock-location-navigation {
  flex: 0 0 auto;
  padding: 8px;
  border: 1px solid rgba(228, 229, 229, 0.13);
  border-radius: 7px;
  background: rgba(45, 53, 62, 0.7);
}

.stock-summary-location-tab {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid rgba(228, 229, 229, 0.24);
  border-radius: 7px;
  background: rgba(72, 82, 94, 0.82);
  color: var(--ink-on-dark);
  font-weight: 800;
  cursor: pointer;
}

.stock-summary-location-tab[draggable="true"] {
  cursor: grab;
}

.stock-summary-location-tab--dragging {
  opacity: 0.58;
  cursor: grabbing;
}

.stock-summary-location-tab--drop-target {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 2px rgba(82, 212, 227, 0.55);
}

.stock-summary-location-tab:hover {
  border-color: var(--cyan);
}

.stock-summary-location-tab.active {
  border-color: var(--cyan);
  background: rgba(37, 128, 138, 0.92);
  box-shadow: inset 0 0 0 1px rgba(82, 212, 227, 0.45);
}

.stock-transit-navigation-tab {
  margin-left: auto;
  border-color: rgba(245, 184, 52, 0.72);
  background: rgba(101, 78, 29, 0.72);
}

.stock-transit-navigation-tab:hover,
.stock-transit-navigation-tab.active {
  border-color: #f5b834;
  background: #b57a12;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 148, 0.45);
}

.stock-transit-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(200px, 300px) minmax(200px, 300px) minmax(160px, 220px);
  justify-content: start;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 7px;
  background: rgba(53, 61, 70, 0.92);
}

.stock-transit-toolbar label {
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  line-height: 1.15;
  text-align: left;
}

.stock-transit-toolbar input,
.stock-transit-toolbar select,
.stock-transit-toolbar .custom-select-button {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
}
.stock-transit-toolbar .custom-select {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0;
}

.stock-transit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr));
  gap: 10px;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
}

.stock-transit-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(228, 229, 229, 0.16);
  border-left: 4px solid #f5b834;
  border-radius: 7px;
  background: rgba(53, 61, 70, 0.94);
}

.stock-transit-card--received { border-left-color: var(--lime); }
.stock-transit-toolbar,
.stock-transit-list,
.stock-transit-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.stock-transit-card > *,
.stock-transit-card-head > *,
.stock-transit-route > *,
.stock-transit-meta > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.stock-transit-meta { align-items: center; }
.stock-transit-card .stock-transit-meta button { width: auto; flex: 0 1 auto; }
@media (max-width: 760px) {
  #stockDialog .stock-transit-toolbar { grid-template-columns: minmax(0, 1fr); }
  #stockDialog .stock-transit-toolbar input,
  #stockDialog .stock-transit-toolbar select,
  #stockDialog .stock-transit-toolbar .custom-select-button {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
  }
  #stockDialog .stock-transit-toolbar .custom-select {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0;
  }
  #stockDialog .stock-transit-list { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  #stockDialog .stock-transit-card { padding: 12px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .stock-transit-toolbar {
    grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(150px, 1fr));
  }
}
.stock-transit-card--cancelled { border-left-color: #b8bec3; opacity: 0.78; }

.stock-transit-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stock-transit-card h3,
.stock-transit-card p {
  margin: 0;
}

.stock-transit-card h3 {
  color: var(--ink-on-dark);
  font-size: 17px;
}

.stock-transit-card p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.stock-transit-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(245, 184, 52, 0.18);
  color: #ffd978;
  font-size: 12px;
  font-weight: 900;
}

.stock-transit-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--ink-on-dark);
}

.stock-transit-route strong:last-child { text-align: right; }
.stock-transit-route span { color: #f5b834; font-size: 20px; }

.stock-transit-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.stock-transit-values div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  background: rgba(24, 32, 41, 0.25);
}

.stock-transit-values dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.stock-transit-values dd {
  margin: auto 0 0;
  line-height: 1.25;
  color: var(--ink-on-dark);
  font-weight: 900;
}

.stock-transit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: rgba(247, 248, 246, 0.78);
  font-size: 12px;
}

.stock-transit-meta button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cyan);
  text-decoration: underline;
}

.stock-transit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.stock-transit-actions button {
  min-width: 120px;
  min-height: 40px;
}

.stock-summary-location {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 7px;
  background: rgba(53, 61, 70, 0.92);
}

.stock-summary-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 10px 9px;
  color: rgba(247, 248, 246, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.stock-summary-search input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 10px;
  color: var(--ink-on-dark);
  background: rgba(24, 32, 41, 0.28);
  border: 1px solid rgba(228, 229, 229, 0.16);
  border-radius: 7px;
}

.stock-summary-table {
  width: 100%;
  table-layout: fixed;
}

.stock-summary-table col:nth-child(1) {
  width: var(--stock-summary-equipment-width, 28%);
}

.stock-summary-table col:nth-child(2) {
  width: var(--stock-summary-description-width, 58%);
}

.stock-summary-table col:nth-child(3) {
  width: var(--stock-summary-balance-width, 14%);
}

.stock-summary-table tbody tr {
  cursor: pointer;
}

.stock-summary-table tbody tr:hover td {
  background: #d5ebe2;
}

.stock-summary-table th:first-child {
  position: static;
  min-width: 0;
  max-width: none;
  text-align: left;
  overflow: visible;
}

.stock-summary-table td:first-child {
  position: static;
  min-width: 0;
  max-width: none;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-summary-table th:nth-child(2) {
  min-width: 0;
  max-width: none;
  text-align: left;
  overflow: visible;
}

.stock-summary-table td:nth-child(2) {
  min-width: 0;
  max-width: none;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-summary-table th:nth-child(3) {
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  overflow: visible;
}

.stock-summary-table td:nth-child(3) {
  min-width: 0;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-summary-table td:nth-child(3).stock-closing {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.stock-summary-table th {
  position: sticky;
}

.stock-column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 6;
  width: 8px;
  height: 100%;
  min-width: 8px;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
}

.stock-column-resizer--left {
  right: auto;
  left: -4px;
}

.stock-column-resizer:hover,
.stock-column-resizing .stock-column-resizer {
  background: rgba(82, 212, 227, 0.36);
}

.stock-column-resizing {
  cursor: col-resize;
  user-select: none;
}

.stock-ledger-panel,
.stock-movement-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 7px;
  background: rgba(53, 61, 70, 0.92);
}

.stock-ledger-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stock-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.stock-section-heading h3,
.stock-section-heading p {
  margin: 0;
}

.stock-section-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.stock-page-search {
  display: grid;
  grid-template-columns: auto minmax(180px, 260px);
  align-items: center;
  gap: 8px;
  color: rgba(247, 248, 246, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.stock-page-search input {
  width: 100%;
  height: 32px;
  padding: 5px 10px;
  color: var(--ink-on-dark);
  background: rgba(24, 32, 41, 0.28);
  border: 1px solid rgba(228, 229, 229, 0.16);
  border-radius: 7px;
}

.stock-table-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #303945;
  scrollbar-gutter: auto;
  scrollbar-color: rgba(228, 229, 229, 0.5) #303945;
  scrollbar-width: thin;
}

.stock-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.stock-table-wrap::-webkit-scrollbar-track {
  background: #303945;
}

.stock-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #303945;
  border-radius: 7px;
  background: rgba(228, 229, 229, 0.5);
}

.stock-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.stock-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 7px;
  background: #303945;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.stock-table td {
  height: 36px;
  padding: 3px 5px;
  border-bottom: 1px solid rgba(53, 61, 70, 0.1);
  background: #edf0ee;
  color: var(--ink);
  text-align: center;
}

.stock-table tbody tr:nth-child(even) td {
  background: #dfe5e2;
}

.stock-table tbody tr.selected td {
  box-shadow: inset 0 1px 0 var(--lime), inset 0 -1px 0 var(--lime);
}

.stock-table input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px 6px;
  border-color: rgba(53, 61, 70, 0.17);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}

.stock-dialog input,
.stock-dialog textarea,
.reference-dialog input,
.reference-dialog textarea {
  user-select: text;
}

.stock-table th:first-child,
.stock-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 0;
  max-width: none;
}

.stock-table th:first-child {
  z-index: 5;
}

.stock-table th:nth-child(2),
.stock-table td:nth-child(2) {
  min-width: 0;
  max-width: none;
  text-align: left;
}

.stock-table th:nth-child(n+3),
.stock-table td:nth-child(n+3) {
  min-width: 82px;
}

.stock-table th:last-child,
.stock-table td:last-child {
  border-right: 0;
}

.stock-number-input {
  text-align: center;
}

.stock-closing {
  font-weight: 800;
  color: #17341b;
}

.stock-closing.negative {
  background: #f3d7d0 !important;
  color: #5b1f1f;
}

.stock-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
  text-align: center;
  min-width: 150px;
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
}

.stock-table tbody tr.autosaved .stock-actions::after,
.stock-table tbody tr.autosave-error .stock-actions::after {
  position: absolute;
  right: 4px;
  bottom: -15px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.stock-table tbody tr.autosaved .stock-actions::after {
  content: "Сохранено";
  background: rgba(119, 188, 31, 0.92);
  color: #182029;
}

.stock-table tbody tr.autosave-error .stock-actions::after {
  content: "Ошибка";
  background: rgba(184, 67, 67, 0.94);
  color: #fff;
}

.stock-table .stock-col-actions {
  width: 150px;
  min-width: 150px;
}

.stock-action-icon-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

.stock-action-icon-button svg,
.stock-action-icon-button img {
  width: 27px;
  height: 27px;
  display: block;
  flex: 0 0 auto;
}

.stock-action-icon-button .stock-action-svg--save {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.stock-action-icon-button .stock-action-svg--delete {
  width: 27px;
  height: 27px;
}

.stock-action-icon-button .stock-action-svg--transfer {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.stock-action-icon-button .warehouse-group-edit-icon {
  width: 25px;
  height: 25px;
}
.stock-action-icon-button--transfer {
  color: inherit;
}
.stock-action-icon-button--transfer:hover {
  background: transparent;
}
.stock-action-icon-button--reference img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  transform: translateY(1px);
}

.stock-action-icon-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.stock-action-icon-button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.stock-transfer-dialog {
  width: min(520px, calc(100vw - 32px));
}

#stockTransitReceiveDialog {
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 32px);
}

.stock-transit-receive-dialog {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.stock-transit-receive-dialog > p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 7px;
  background: rgba(24, 32, 41, 0.24);
  font-weight: 800;
}

.stock-transit-receive-dialog .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stock-transit-receive-note {
  grid-column: 1 / -1;
}

.stock-transit-receive-dialog .primary-action {
  justify-self: end;
  min-width: 150px;
}

@media (max-width: 760px) {
  .stock-transit-navigation-tab { margin-left: 0; }
  .stock-transit-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stock-transit-list { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .stock-transit-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stock-transit-actions button { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 520px) {
  .stock-transit-toolbar { grid-template-columns: minmax(0, 1fr); }
  .stock-transit-card-head { display: grid; }
  .stock-transit-status { justify-self: start; }
  .stock-transit-receive-dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
  .stock-transit-receive-note { grid-column: auto; }
}
.stock-transfer-dialog > p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 8px;
  background: rgba(24, 32, 41, 0.24);
  color: rgba(247, 248, 246, 0.86);
  font-weight: 800;
}
.stock-transfer-dialog .primary-action {
  justify-self: end;
  min-width: 140px;
}
.stock-add-row td {
  background: #cfd7d3 !important;
}

.stock-add-trigger-row td {
  height: 38px;
  padding-top: 4px;
  padding-bottom: 4px;
  background: #cfd7d3 !important;
}

.stock-add-trigger-row td[colspan] {
  border-bottom: 0;
  background: #303945 !important;
  box-shadow: none !important;
}

.stock-add-inline-button {
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(82, 212, 227, 0.65);
  border-radius: 999px;
  background: rgba(82, 212, 227, 0.12);
  color: #25808a;
}

.stock-add-row-actions {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
  vertical-align: middle;
  overflow: hidden;
}

.stock-add-row-action-set {
  width: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.stock-add-row-action-set .stock-action-icon-button + .stock-action-icon-button {
  margin-left: 0;
}

.stock-add-inline-button span {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
}

.stock-add-inline-button span::before,
.stock-add-inline-button span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.stock-add-inline-button span::after {
  width: 2px;
  height: 11px;
}

.stock-add-inline-button:hover {
  border-color: #25808a;
  color: #f2fbfc;
  background: #25808a;
  box-shadow: 0 0 0 2px rgba(37, 128, 138, 0.22);
}

.stock-movement-panel {
  min-width: 0;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.stock-item-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(228, 229, 229, 0.14);
}

.stock-item-summary-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-right: 10px;
}

.stock-item-summary-top span {
  color: var(--muted);
  font-size: 12px;
}

.stock-item-summary-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stock-item-summary-field input,
.stock-item-summary-field textarea {
  width: 100%;
  min-width: 0;
  color: var(--ink-on-dark);
  background: rgba(24, 32, 41, 0.28);
  border-color: rgba(228, 229, 229, 0.18);
  user-select: text;
}

.stock-item-summary-field textarea {
  min-height: 58px;
  resize: vertical;
}

.stock-item-summary b {
  flex: 0 0 auto;
  color: var(--lime);
  font-size: 18px;
  line-height: 1.1;
  white-space: nowrap;
  margin-top: 3px;
}

.stock-movement-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px;
  border-radius: 7px;
  background: rgba(45, 53, 62, 0.72);
}

.stock-movement-form label:nth-child(4),
.stock-movement-form button {
  grid-column: 1 / -1;
}

.stock-history h3 {
  margin: 16px 0 8px;
}

.stock-history-row {
  position: relative;
  margin-bottom: 6px;
  padding: 8px 82px 8px 10px;
  border-left: 3px solid #7b858f;
  border-radius: 4px;
  background: rgba(45, 53, 62, 0.74);
}

.stock-history-row.opening { border-left-color: #8da1a3; }
.stock-history-row.receipt { border-left-color: var(--lime); }
.stock-history-row.issue {
  border-left-color: #52D4E3;
}
.stock-history-row.write_off { border-left-color: #b84343; }

.stock-history-row > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.stock-history-row span,
.stock-history-row p {
  color: var(--muted);
}

.stock-history-row p {
  margin: 4px 0 0;
}

.stock-history-row > button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  min-height: 26px;
  padding: 0;
}

.stock-movement-form.editing {
  outline: 1px solid rgba(111, 194, 18, 0.65);
}

.stock-movement-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.stock-movement-form-actions button {
  flex: 1 1 0;
}

.stock-history-actions {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.stock-history-actions .stock-action-icon-button {
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
}

.stock-history-actions .stock-action-icon-button svg {
  width: 22px;
  height: 22px;
}

.flexcom-toolbar {
  align-items: center;
  width: 100%;
  min-height: 54px;
  overflow: hidden;
}

.flexcom-toolbar .stock-page-tabs {
  flex: 1 1 auto;
}

.flexcom-stock-heading {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(260px, 1fr) auto auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(228, 229, 229, 0.13);
  border-radius: 7px;
  background: rgba(45, 53, 62, 0.7);
}

.flexcom-heading-copy {
  min-width: 0;
}

.flexcom-table-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
}

.flexcom-table-picker select {
  width: 100%;
  min-width: 0;
}

.flexcom-table-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.flexcom-stock-heading h3,
.flexcom-stock-heading p {
  margin: 0;
}

.flexcom-stock-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.flexcom-stock-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0 4px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #303945;
  scrollbar-gutter: stable;
}

.flexcom-stock-card {
  width: 100%;
  min-width: 860px;
  margin: 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  overflow: visible;
  background: #edf0ee;
}

.flexcom-stock-title-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(280px, 1.35fr) auto auto;
  gap: 8px;
  align-items: end;
  padding: 5px 6px;
  background: #303945;
}

.flexcom-item-heading > th {
  position: sticky;
  left: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.flexcom-title-field {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: #d5dadd;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}

.flexcom-title-field > span {
  min-width: 0;
  white-space: nowrap;
}

.flexcom-stock-title-row input,
.flexcom-stock-title-row textarea {
  min-width: 0;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid #aeb6b9;
  background: #f2f4f3;
  color: #26313b;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
}

.flexcom-stock-title-row textarea {
  height: auto;
  overflow: hidden;
  resize: vertical;
}

.flexcom-equipment-input {
  font-weight: 800;
}

.flexcom-table-wrap {
  width: 100%;
  min-width: 860px;
  overflow: visible;
}

.flexcom-ledger-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--ink);
  font-size: 12px;
}

.flexcom-ledger-table th {
  padding: 4px 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: #303945;
  color: #fff;
  line-height: 1.15;
  text-align: center;
}

.flexcom-ledger-table td {
  height: auto;
  min-height: 27px;
  padding: 2px 4px;
  border-right: 1px solid rgba(53, 61, 70, 0.12);
  border-bottom: 1px solid rgba(53, 61, 70, 0.12);
  background: #f2f4f3;
  text-align: center;
}

.flexcom-ledger-table tbody tr:nth-child(even) td {
  background: #dfe5e2;
}

.flexcom-ledger-table th:nth-child(1) { width: 30px; }
.flexcom-ledger-table th:nth-child(2),
.flexcom-ledger-table th:nth-child(4),
.flexcom-ledger-table th:nth-child(6) { width: 185px; }
.flexcom-ledger-table th:nth-child(3),
.flexcom-ledger-table th:nth-child(5),
.flexcom-ledger-table th:nth-child(7) { width: 64px; }
.flexcom-ledger-table th:nth-child(8) { width: 94px; }
.flexcom-ledger-table th:nth-child(9) { width: 106px; }

.flexcom-ledger-table input,
.flexcom-ledger-table textarea {
  width: 100%;
  min-width: 0;
  min-height: 22px;
  padding: 1px 5px;
  border: 1px solid rgba(53, 61, 70, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font: inherit;
  text-align: center;
}

.flexcom-ledger-table textarea {
  height: auto;
  min-height: 23px;
  overflow: hidden;
  resize: vertical;
  color: #26313b;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}

.flexcom-ledger-table tbody td:first-child {
  color: #26313b;
  font-weight: 700;
}

.flexcom-row-balance,
.flexcom-card-total {
  font-weight: 800;
}

.flexcom-row-balance.negative,
.flexcom-card-total.negative {
  background: #f3d7d0 !important;
  color: #5b1f1f;
}

.flexcom-ledger-table tfoot td {
  padding: 3px 5px;
  background: #cfd7d3;
  font-weight: 800;
}

.flexcom-ledger-table tfoot td:first-child {
  text-align: right;
}

.flexcom-row-actions {
  white-space: nowrap;
}

.flexcom-row-actions button,
.flexcom-ledger-table tfoot button,
.flexcom-stock-title-row button {
  min-height: 25px;
  padding: 3px 7px;
  font-size: 11px;
}

.flexcom-new-table {
  display: grid;
  grid-template-columns: minmax(160px, 0.6fr) minmax(220px, 1.4fr) auto;
  flex: 0 0 auto;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--lime);
  border-radius: 7px;
  background: rgba(45, 53, 62, 0.92);
}

.flexcom-new-table[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .flexcom-stock-heading {
    grid-template-columns: 1fr auto;
  }

  .flexcom-heading-copy,
  .flexcom-table-picker {
    grid-column: 1 / -1;
  }

  .flexcom-stock-title-row,
  .flexcom-new-table {
    grid-template-columns: 1fr auto;
  }

  .flexcom-equipment-field,
  .flexcom-description-field {
    grid-column: 1 / -1;
  }

  .flexcom-new-table input:nth-child(2) {
    grid-column: 1 / -1;
  }
}

#stockImportPreviewDialog,
#stockImportPreviewDialog[open] {
  width: min(1380px, calc(100vw - 24px)) !important;
  max-width: min(1380px, calc(100vw - 24px)) !important;
  height: min(900px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.stock-import-preview-dialog {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 20px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  box-sizing: border-box;
}

.stock-import-preview-dialog > header,
.stock-import-preview-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-import-preview-dialog h2 { margin: 0 0 4px; }
.stock-import-preview-dialog p { margin: 0; color: rgba(247, 248, 246, .68); }
.stock-import-preview-dialog > footer { justify-content: flex-end; }
.stock-import-preview-dialog > footer > span { margin-right: auto; font-weight: 800; color: #ffd206; }
.stock-import-preview-dialog > footer button { min-width: 150px; }

.stock-import-preview-table-wrap {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(228, 229, 229, .16);
  border-radius: 6px;
}

.stock-import-preview-table {
  width: 100%;
  min-width: 1060px;
  table-layout: fixed;
  border-collapse: collapse;
}

.stock-import-preview-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 8px;
  text-align: center;
  background: #303945;
  color: #fff;
}

.stock-import-preview-table td { padding: 4px; border: 1px solid rgba(53, 61, 70, .14); background: #e7ebe9; }
.stock-import-preview-table tbody tr:nth-child(even) td { background: #dce3df; }
.stock-import-preview-table input,
.stock-import-preview-table select {
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 5px 8px;
  border-radius: 4px;
  background: #fff;
  color: #182029;
}
.stock-import-preview-table th:nth-child(1) { width: 27%; }
.stock-import-preview-table th:nth-child(2) { width: 20%; }
.stock-import-preview-table th:nth-child(3) { width: 14%; }
.stock-import-preview-table th:nth-child(4) { width: 23%; }
.stock-import-preview-table th:nth-child(5) { width: 11%; }
.stock-import-preview-table th:nth-child(6) { width: 5%; }
.stock-import-preview-table td:last-child { text-align: center; }
.stock-import-movement-summary { color: #4f5a65 !important; font-weight: 700; }
.stock-import-closing { color: #182029 !important; text-align: center; font-weight: 900; }

@media (max-width: 760px) {
  #stockImportPreviewDialog,
  #stockImportPreviewDialog[open] {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
  }
  .stock-import-preview-dialog { padding: 12px; }
  .stock-import-preview-dialog > header { align-items: start; }
  .stock-import-preview-dialog h2 { font-size: 21px; }
  .stock-import-preview-dialog > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .stock-import-preview-dialog > footer > span { grid-column: 1 / -1; margin: 0; }
  .stock-import-preview-dialog > footer button { min-width: 0; }
}

/* The Flexcom page is a single spreadsheet workspace. Only this area scrolls. */
#stockDialog:has(.flexcom-stock-list) .stock-dialog {
  grid-template-rows: auto minmax(0, 1fr);
}

#stockDialog:has(.flexcom-stock-list) .stock-body {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  #stockDialog .stock-location-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 8px;
  }

  #stockDialog .stock-location-navigation .stock-summary-location-tab {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
}

#stockDialog:has(.flexcom-stock-list) .flexcom-stock-list {
  min-height: 0;
  border: 1px solid rgba(228, 229, 229, 0.14);
  border-radius: 7px;
}

@media (max-width: 920px) {
  #stockDialog:has(.flexcom-stock-list) .stock-dialog > header .dialog-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #stockDialog:has(.flexcom-stock-list) .stock-toolbar {
    flex-wrap: nowrap;
  }

  #stockDialog:has(.flexcom-stock-list) .stock-page-tabs {
    overflow-x: auto;
  }
}

@media (max-width: 1280px) {
#stockDialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
  }

  .stock-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 10px;
  }

  .stock-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(270px, 31vw, 360px);
  }

  .stock-table {
    font-size: 12px;
  }

  .stock-table th {
    padding: 6px 5px;
  }

  .stock-table th:first-child,
  .stock-table td:first-child {
    min-width: 135px;
  }

  .stock-table th:nth-child(2),
  .stock-table td:nth-child(2) {
    min-width: 160px;
  }
}

@media (max-width: 920px) {
#stockDialog {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    margin: 4px auto;
  }

  .stock-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 8px;
  }

  .stock-dialog > header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .stock-dialog > header .dialog-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .stock-dialog > header .dialog-header-actions button {
    flex: 1 1 145px;
  }

  .stock-toolbar,
  .stock-page-settings {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .stock-year-control {
    flex-basis: 100px;
  }

  .stock-page-tabs {
    flex: 1 1 260px;
  }

  .stock-workspace {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .stock-ledger-panel {
    min-height: 52dvh;
  }

  .stock-movement-panel {
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .stock-dialog > header h2 {
    font-size: 20px;
  }

  .stock-page-settings label,
  .stock-page-settings button {
    flex: 1 1 100%;
    max-width: none;
  }

  .stock-section-heading {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
  }

  .stock-page-search {
    grid-template-columns: 1fr;
  }

  .stock-section-heading p {
    display: none;
  }

  .stock-movement-form {
    grid-template-columns: 1fr;
  }

  .stock-movement-form label,
  .stock-movement-form > label:nth-of-type(4),
  .stock-movement-form button {
    grid-column: 1;
  }
}


.warehouse-table--excel-look thead th {
  background: rgba(53, 61, 70, 0.98);
  color: #fff;
  font-weight: 700;
}

.warehouse-table--excel-look tbody td {
  background: rgba(248, 248, 246, 0.96);
  color: var(--ink);
}

.warehouse-table--excel-look tbody tr:nth-child(even) td {
  background: #e2e7e4;
}

.warehouse-table--excel-look tbody .warehouse-sticky-col {
  background: #f4e8b8;
}

.warehouse-table--excel-look tbody tr:nth-child(even) .warehouse-sticky-col {
  background: #eedfa3;
}

.warehouse-table--excel-look tbody .warehouse-total {
  color: #c11919;
  font-weight: 800;
}

.warehouse-group-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.warehouse-group-header {
  flex: 1 1 auto;
}

/* Flexcom ledger alignment */
.flexcom-stock-card {
  min-width: 0;
}

.flexcom-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.flexcom-ledger-table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
}

.flexcom-ledger-table .flexcom-col-index { width: 44px; }
.flexcom-ledger-table .flexcom-col-qty { width: 86px; }
.flexcom-ledger-table .flexcom-col-balance { width: 126px; }
.flexcom-ledger-table .flexcom-col-actions { width: 126px; }

.flexcom-ledger-table th,
.flexcom-ledger-table td {
  box-sizing: border-box;
  vertical-align: middle;
}

.flexcom-ledger-table th {
  padding: 6px 7px;
}

.flexcom-ledger-table td {
  padding: 5px 6px;
}

.flexcom-ledger-table tbody td:first-child {
  text-align: center;
  white-space: nowrap;
}

.flexcom-ledger-table input,
.flexcom-ledger-table textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 4px 7px;
  border-radius: 5px;
}

.flexcom-ledger-table input[type="number"] {
  text-align: center;
}

.flexcom-ledger-table textarea {
  line-height: 1.25;
  resize: vertical;
}

.flexcom-stock-title-row {
  grid-template-columns: minmax(190px, 0.42fr) minmax(360px, 1fr) 34px 34px;
  gap: 8px;
  align-items: end;
}

.flexcom-stock-title-row input,
.flexcom-stock-title-row textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 30px;
}

.flexcom-stock-title-row .stock-action-icon-button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.flexcom-row-actions {
  text-align: center;
  white-space: nowrap;
}

.flexcom-row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 28px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.flexcom-row-actions button + button {
  margin-left: 4px;
}

.flexcom-row-actions .stock-action-icon-button {
  width: 28px;
  padding: 0;
}

.flexcom-ledger-table tfoot td {
  padding: 6px 7px;
  vertical-align: middle;
}

.flexcom-ledger-table tfoot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 28px;
  padding: 0 10px;
}

@media (max-width: 1400px) {
  .flexcom-ledger-table {
    min-width: 1080px;
    font-size: 11px;
  }

  .flexcom-stock-title-row {
    grid-template-columns: minmax(160px, 0.42fr) minmax(260px, 1fr) 32px 32px;
  }

  .flexcom-ledger-table .flexcom-col-qty { width: 76px; }
  .flexcom-ledger-table .flexcom-col-balance { width: 112px; }
  .flexcom-ledger-table .flexcom-col-actions { width: 112px; }
}
/* End Flexcom ledger alignment */

/* Mobile app ergonomics */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    width: 100%;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    gap: 10px;
  }

  .app-brand {
    align-items: center;
  }

  .brand-logo-dark {
    width: 96px;
    flex: 0 0 auto;
  }

  .app-brand h1 {
    font-size: 18px;
  }

  .topbar p {
    font-size: 12px;
  }

  .topbar-nav,
  .topbar nav {
    grid-template-columns: 1fr;
  }

  .nav-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

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

  .filters {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    width: 100%;
    overflow: hidden;
  }

  .filters label,
  .period-filter label {
    min-width: 0;
    width: 100%;
  }

  .filters select,
  .filters input,
  .filters .custom-select,
  .filters .custom-select-button {
    width: 100%;
    max-width: 100%;
  }

  .period-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 0;
  }

  .spec-workbar-group {
    gap: 8px;
  }

  .spec-workbar-button {
    width: 100%;
    min-height: 40px;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
  }

  .metric-card {
    padding: 9px 10px;
    min-height: 64px;
  }

  .metric-card span {
    font-size: 11px;
    line-height: 1.2;
  }

  .metric-card strong {
    font-size: 20px;
  }

  .metric-detail-table,
  .money-detail-table {
    display: block;
    min-width: 0;
  }

  .metric-detail-table thead,
  .money-detail-table thead {
    display: none;
  }

  .metric-detail-table tbody,
  .metric-detail-table tr,
  .money-detail-table tbody,
  .money-detail-table tr {
    display: grid;
    gap: 8px;
  }

  .metric-detail-table tr,
  .money-detail-table tr {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(228, 229, 229, 0.88);
  }

  .metric-detail-table td,
  .money-detail-table td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent !important;
    overflow-wrap: anywhere;
  }

  dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  .dialog-panel,
  .manual-dialog,
  .reference-dialog,
  .settings-dialog,
  .history-dialog,
  .users-dialog,
  .warehouse-dialog,
  .stock-dialog,
  .documents-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: 14px;
    overflow: auto;
  }

  .dialog-panel header,
  .stock-dialog > header {
    position: sticky;
    top: -14px;
    z-index: 8;
    margin: -14px -14px 12px;
    padding: 12px 14px;
    background: var(--surface-panel);
    border-bottom: 1px solid rgba(228, 229, 229, 0.14);
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
  }

  .dialog-panel header h2,
  .stock-dialog > header h2 {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
  }

  .dialog-header-actions,
  .stock-dialog > header .dialog-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
    justify-content: stretch;
  }

  .dialog-header-actions button,
  .stock-dialog > header .dialog-header-actions button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }

  .workspace {
    display: block;
    min-height: 0;
  }

  .table-pane,
  .workspace-splitter,
  .side-pane-splitter,
  #summaryPane {
    display: none;
  }

  .side-pane {
    display: none;
  }

  body.mobile-shipment-open .side-pane {
    display: block;
  }

  .side-pane section,
  #shipmentPane {
    border-radius: 0;
  }

  #shipmentPane {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    max-height: 72dvh;
    overflow: auto;
    padding: 14px;
    border-top: 1px solid rgba(82, 212, 227, 0.35);
    box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.28);
  }

  .shipment-pane-title-row {
    position: sticky;
    top: -14px;
    z-index: 1;
    margin: -14px -14px 12px;
    padding: 12px 14px;
    background: var(--surface-panel);
    border-bottom: 1px solid rgba(228, 229, 229, 0.12);
  }

  .mobile-close-shipment {
    display: inline-flex;
  }

  .stack-form,
  .shipment-dates-block,
  .document-uploader {
    gap: 10px;
  }

  .selection-actions,
  .active-row-actions,
  .document-uploader-actions {
    grid-template-columns: 1fr;
  }

  .stock-toolbar,
  .stock-page-form-row,
  .stock-location-tabs,
  .stock-summary-grid,
  .warehouse-toolbar-main,
  .warehouse-filter-row,
  .reference-toolbar,
  .users-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stock-page-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .stock-toolbar {
    align-items: stretch;
    padding: 10px;
    border-radius: 8px;
  }

  .stock-toolbar .stock-year-control,
  .stock-toolbar .stock-year-control .custom-select,
  .stock-toolbar .stock-year-control .custom-select-button {
    width: 100%;
  }

  .stock-page-settings {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
  }

  .stock-summary-location-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .stock-page-tab,
  .stock-add-page-tab,
  .stock-location-tab,
  .stock-summary-location-tab {
    flex: 0 0 auto;
    min-height: 40px;
    justify-content: center;
  }

  .stock-section-heading {
    padding: 12px;
  }

  .stock-section-heading h3 {
    font-size: 21px;
    line-height: 1.15;
  }

  .stock-summary-search {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 0 12px 12px;
  }

  .stock-summary-search input {
    width: 100%;
  }

  .stock-body,
  .warehouse-body,
  .references-body,
  .history-list,
  .users-body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .stock-table-wrap,
  .flexcom-table-wrap,
  .stock-summary-table-wrap,
  .warehouse-table-wrap,
  .warehouse-detail-table-wrap,
  .reference-table-wrap,
  .history-list,
  .users-list,
  .documents-dialog-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stock-table,
  .flexcom-ledger-table,
  .stock-summary-table,
  .warehouse-table,
  .warehouse-detail-table,
  .reference-table,
  .history-table,
  .users-grid {
    min-width: 760px;
  }

  .stock-summary-location .stock-table-wrap {
    max-height: none;
    overflow: visible;
  }

  .stock-summary-table {
    display: block;
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
  }

  .stock-summary-table colgroup,
  .stock-summary-table thead {
    display: none;
  }

  .stock-summary-table tbody,
  .stock-summary-table tr {
    display: grid;
  }

  .stock-summary-table tr {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(24, 32, 41, 0.08);
    background: rgba(228, 229, 229, 0.92);
  }

  .stock-summary-table tr:nth-child(even) {
    background: rgba(216, 221, 218, 0.92);
  }

  .stock-summary-table td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    overflow-wrap: anywhere;
  }

  .stock-summary-table td:first-child {
    grid-column: 1;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
  }

  .stock-summary-table td:nth-child(2) {
    grid-column: 1;
    color: rgba(24, 32, 41, 0.72);
    font-size: 14px;
  }

  .stock-summary-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    min-width: 54px !important;
    text-align: center !important;
    font-size: 18px;
    font-weight: 800;
  }

  .warehouse-toolbar {
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
  }

  .warehouse-toolbar-main {
    display: grid;
    gap: 6px;
  }

  .warehouse-toolbar-note {
    margin-top: 0;
    line-height: 1.3;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .warehouse-filter-row {
    grid-template-columns: 1fr;
  }

  .warehouse-filter-row label,
  .warehouse-filter-row .custom-select,
  .warehouse-filter-row .custom-select-button,
  .warehouse-filter-row input,
  .warehouse-filter-row button {
    width: 100%;
    max-width: 100%;
  }

  .warehouse-table-wrap {
    max-height: none;
    overflow: visible;
  }

  .warehouse-table-panel,
  .warehouse-group-editor {
    max-width: 100%;
    padding: 12px;
    border-radius: 8px;
  }

  .warehouse-table-panel-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
  }

  .warehouse-detail-meta {
    min-width: 0;
  }

  .warehouse-detail-meta strong {
    font-size: 20px;
  }

  .warehouse-detail-meta span {
    line-height: 1.25;
  }

  .warehouse-detail-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  .warehouse-table--summary {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .warehouse-table--summary thead {
    display: none;
  }

  .warehouse-table--summary tbody,
  .warehouse-table--summary tr {
    display: grid;
  }

  .warehouse-table--summary tr {
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(228, 229, 229, 0.92);
  }

  .warehouse-table--summary td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(44px, max-content);
    align-items: center;
    gap: 10px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px;
    padding: 7px 0 !important;
    border: 0;
    border-top: 1px solid rgba(24, 32, 41, 0.08);
    background: transparent !important;
    box-shadow: none;
    text-align: right;
    color: var(--ink);
    line-height: 1.18;
  }

  .warehouse-table--summary td:first-child {
    border-top: 0;
  }

  .warehouse-table--summary td::before {
    content: attr(data-label);
    min-width: 0;
    color: rgba(24, 32, 41, 0.68);
    font-weight: 700;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.15;
  }

  .warehouse-table--summary .warehouse-equipment {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    font-size: 17px;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .warehouse-table--summary .warehouse-equipment::before {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
  }

  .warehouse-table--summary .warehouse-need-button,
  .warehouse-table--summary .warehouse-current-stock {
    justify-self: end;
    margin-left: auto;
  }

  .warehouse-table--summary .warehouse-total,
  .warehouse-table--summary .warehouse-deficit {
    font-weight: 800;
  }

  .warehouse-table--summary .warehouse-deficit.negative {
    color: #761b1b;
  }

  .warehouse-table--summary .warehouse-deficit.positive {
    color: #17341b;
  }

  .stock-summary-grid {
    grid-template-columns: 1fr;
  }

  .stock-summary-card,
  .warehouse-card,
  .reference-dialog section,
  .settings-dialog section {
    border-radius: 8px;
  }

  .reference-toolbar {
    align-items: stretch;
  }

  .reference-toolbar > *,
  .reference-toolbar input,
  .reference-toolbar select,
  .reference-toolbar button {
    width: 100%;
    max-width: 100%;
  }

  .history-table th,
  .history-table td {
    white-space: normal;
  }

  .documents-dialog-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Mobile refinement pass: keep every module visually aligned on narrow screens. */
@media (max-width: 760px) {
  * {
    box-sizing: border-box;
  }

  body {
    background: var(--page-bg);
  }

  dialog {
    overflow: auto;
    background: transparent;
  }

  .dialog-panel,
  .manual-dialog,
  .reference-dialog,
  .settings-dialog,
  .history-dialog,
  .users-dialog,
  .warehouse-dialog,
  .stock-dialog,
  .documents-dialog {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    padding: 16px;
    border: 0;
    background: var(--surface-panel);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .stock-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
    max-height: 100dvh;
  }

  .stock-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 18px;
    -webkit-overflow-scrolling: touch;
  }

  .dialog-panel header,
  .stock-dialog > header {
    margin: -16px -16px 16px;
    padding: 18px 16px 16px;
    border-bottom: 1px solid rgba(228, 229, 229, 0.14);
    background: var(--surface-panel);
  }

  .dialog-panel header h2,
  .stock-dialog > header h2 {
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .dialog-header-actions {
    grid-template-columns: 1fr;
  }

  .dialog-header-actions button,
  .stock-dialog > header .dialog-header-actions button,
  .warehouse-all-button,
  .secondary-action,
  .danger-action {
    min-height: 48px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.15;
  }

  .dialog-header-actions button:focus-visible,
  .stock-dialog > header .dialog-header-actions button:focus-visible,
  .warehouse-all-button:focus-visible,
  .secondary-action:focus-visible,
  .danger-action:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    box-shadow: none;
  }

  .warehouse-body,
  .stock-body {
    gap: 14px;
    width: 100%;
    min-width: 0;
  }

  .warehouse-toolbar,
  .stock-toolbar,
  .stock-page-settings,
  .warehouse-table-panel,
  .stock-summary-location,
  .stock-summary-card {
    width: 100%;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(228, 229, 229, 0.12);
    background: rgba(24, 32, 41, 0.16);
  }

  .warehouse-toolbar,
  .stock-toolbar,
  .stock-page-settings {
    padding: 14px;
  }

  .warehouse-year-badge,
  .warehouse-detail-meta strong,
  .stock-section-heading h3 {
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .warehouse-toolbar-note,
  .warehouse-detail-meta span,
  .stock-section-heading p {
    max-width: 100%;
    color: rgba(247, 248, 246, 0.7);
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
  }

  .warehouse-filter-row,
  .filters,
  .period-filter {
    width: 100%;
    min-width: 0;
  }

  .warehouse-filter-row label,
  .filters label,
  .period-filter label,
  .stock-summary-search {
    display: grid;
    gap: 6px;
    color: rgba(247, 248, 246, 0.68);
    font-size: 15px;
    font-weight: 700;
  }

  .warehouse-filter-row input,
  .warehouse-filter-row button,
  .filters input,
  .filters button,
  .period-filter input,
  .period-filter button,
  .custom-select,
  .custom-select-button,
  .stock-summary-search input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .warehouse-filter-row input,
  .filters input,
  .period-filter input,
  .custom-select-button,
  .stock-summary-search input {
    height: 48px;
    border-radius: 10px;
    padding: 10px 40px 10px 14px;
    font-size: 17px;
  }

  .stock-page-tabs {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .stock-page-tab,
  .stock-add-page-tab,
  .stock-location-tab,
  .stock-summary-location-tab {
    min-height: 46px;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 17px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .stock-page-settings {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .stock-page-settings input {
    height: 46px;
    border-radius: 10px;
  }

  .stock-page-settings label,
  .stock-page-settings label:has(#stockPageName),
  .stock-page-settings .stock-location-control,
  .stock-page-settings .stock-exclude-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  .stock-page-settings label:has(#stockPageName) {
    display: grid;
    gap: 6px;
  }

  .stock-save-page-action,
  .stock-delete-page-action {
    justify-self: center;
  }

  .stock-page-settings .stock-location-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
  }

  .stock-page-settings .stock-location-control select,
  .stock-page-settings .stock-location-control .custom-select {
    width: 100%;
    min-width: 0;
  }

  .stock-page-settings .stock-exclude-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 38px;
    height: auto;
    white-space: normal;
    line-height: 1.25;
    font-size: 15px;
  }

  .stock-import-page-action {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    font-size: 18px;
  }

  .stock-summary-location-tabs {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .stock-section-heading {
    padding: 16px 16px 10px;
  }

  .stock-summary-search {
    padding: 0 16px 14px;
  }

  .stock-summary-location .stock-table-wrap,
  .warehouse-table-wrap {
    padding: 0 14px 14px;
  }

  .stock-summary-table tr,
  .warehouse-table--summary tr {
    border: 0;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 14px 12px 14px 14px;
    background: #e4e5e5;
    box-shadow: 0 1px 0 rgba(24, 32, 41, 0.08);
  }

  .stock-summary-table tr {
    grid-template-columns: minmax(0, 1fr) 68px;
    align-items: start;
    overflow: visible;
  }

  .stock-summary-table tr:nth-child(even),
  .warehouse-table--summary tr:nth-child(even) {
    background: #d8ddda;
  }

  .stock-summary-table td,
  .warehouse-table--summary td {
    color: var(--ink);
  }

  .stock-summary-table td:first-child,
  .warehouse-table--summary .warehouse-equipment {
    grid-column: 1;
    grid-row: 1;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.18;
    min-width: 0;
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .stock-summary-table td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.25;
    min-width: 0;
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .stock-summary-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: end;
    align-self: start;
    min-width: 48px !important;
    max-width: 68px;
    margin-top: 2px;
    padding: 7px 10px !important;
    border-radius: 999px;
    background: rgba(24, 32, 41, 0.12) !important;
    font-size: 18px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
  }

  .warehouse-table--summary td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(48px, max-content);
    align-items: center;
    min-height: 42px;
    gap: 10px;
    padding: 7px 0 !important;
    text-align: right;
    line-height: 1.18;
  }

  .warehouse-table--summary td + td {
    border-top: 1px solid rgba(24, 32, 41, 0.08);
  }

  .warehouse-table--summary td::before {
    min-width: 0;
    font-size: 15px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .warehouse-table--summary td:not(.warehouse-equipment) {
    font-variant-numeric: tabular-nums;
  }

  .warehouse-table--summary td:not(.warehouse-equipment) > :not(:first-child),
  .warehouse-table--summary td:not(.warehouse-equipment) > button,
  .warehouse-table--summary td:not(.warehouse-equipment) {
    justify-items: stretch;
  }

  .warehouse-table--summary td:not(.warehouse-equipment) {
    justify-content: stretch;
  }

  .warehouse-table--summary td:not(.warehouse-equipment)::after {
    content: "";
    display: none;
  }

  .warehouse-table--summary .warehouse-equipment {
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: left;
  }

  .warehouse-table--summary .warehouse-equipment::before {
    font-size: 14px;
  }

  .warehouse-table--summary .warehouse-need-button,
  .warehouse-table--summary .warehouse-current-stock {
    width: auto;
    min-width: 48px;
    max-width: 88px;
    justify-self: end;
    text-align: center;
  }

  .warehouse-table--summary td:not(.warehouse-equipment):not(.warehouse-stock-cell) {
    justify-items: stretch;
  }

  .warehouse-table--summary td:not(.warehouse-equipment):not(.warehouse-stock-cell) {
    text-align: right;
  }

  .warehouse-detail-actions .icon-print-button,
  .warehouse-detail-actions .icon-excel-button {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .stock-workspace {
    display: block;
    min-width: 0;
    overflow: visible;
  }

  .stock-ledger-panel,
  .stock-movement-panel {
    width: 100%;
    min-width: 0;
    border-radius: 12px;
  }

  .stock-ledger-panel .stock-section-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stock-page-search {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .stock-page-search input {
    width: 100%;
    height: 48px;
    border-radius: 10px;
  }

  .stock-page-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
  }

  .stock-page-table colgroup,
  .stock-page-table thead {
    display: none;
  }

  .stock-page-table tbody {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
  }

  .stock-page-table tbody tr {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 70px;
    gap: 8px 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: #e4e5e5;
    box-shadow: 0 1px 0 rgba(24, 32, 41, 0.08);
  }

  .stock-page-table tbody tr:nth-child(even) {
    background: #d8ddda;
  }

  .stock-page-table tbody tr.selected {
    outline: 2px solid #0e9a8f;
    outline-offset: 0;
  }

  .stock-page-table tbody td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    color: var(--ink);
    box-shadow: none !important;
    overflow: visible;
  }

  .stock-page-table .stock-select-col {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .stock-page-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .stock-page-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .stock-page-table td:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
  }

  .stock-page-table td:nth-child(5),
  .stock-page-table td:nth-child(6),
  .stock-page-table td:nth-child(7) {
    display: none;
  }

  .stock-page-table td:nth-child(8) {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
    min-width: 54px !important;
    padding: 7px 10px !important;
    border-radius: 999px;
    background: rgba(24, 32, 41, 0.12) !important;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .stock-page-table td:nth-child(9) {
    grid-column: 3;
    grid-row: 3;
    align-self: end;
    justify-self: end;
  }

  .stock-page-table input {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(254, 254, 254, 0.72);
    color: var(--ink);
    white-space: normal;
    text-overflow: clip;
  }

  .stock-page-table td:nth-child(2) input {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
  }

  .stock-page-table td:nth-child(3) input {
    font-size: 15px;
    line-height: 1.25;
  }

  .stock-page-table .stock-number-input {
    max-width: 120px;
    text-align: center;
  }

  .stock-page-table .stock-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  .stock-page-table .stock-row-select-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .modal,
  .stock-dialog,
  .references-modal,
  .settings-modal,
  .shipment-groups-modal {
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
  }

  .stock-dialog .modal-content,
  .modal-content,
  .references-modal .modal-content,
  .settings-modal .modal-content,
  .shipment-groups-modal .modal-content {
    width: min(100%, 560px);
    max-width: 100%;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
  }

  .stock-dialog .modal-content {
    padding: 16px;
  }

  .stock-dialog .modal-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
  }

  .stock-dialog .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .stock-dialog .modal-actions button {
    width: 100%;
    min-height: 52px;
  }

  .stock-top-panel,
  .stock-page-settings,
  .stock-location-tabs,
  .stock-workspace,
  .stock-ledger-panel,
  .stock-summary-grid,
  .stock-summary-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .stock-pages-nav {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 8px;
    scrollbar-width: thin;
  }

  .stock-pages-nav button,
  .stock-location-tabs button {
    flex: 0 0 auto;
    min-width: 118px;
    max-width: 72vw;
    height: 52px;
    padding: 0 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stock-location-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stock-location-tabs button {
    width: 100%;
    max-width: none;
  }

  .stock-page-settings {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 14px !important;
  }

  .stock-page-settings label,
  .stock-page-settings label:has(#stockPageName),
  .stock-page-settings .stock-location-control,
  .stock-page-settings .stock-exclude-control,
  .stock-page-settings .stock-import-page-action {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .stock-page-settings input,
  .stock-page-settings select,
  .stock-page-settings .custom-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .stock-page-settings .stock-location-control {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    height: auto !important;
  }

  .stock-page-settings .stock-exclude-control {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 38px !important;
    height: auto !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 15px !important;
  }

  .stock-save-page-action,
  .stock-delete-page-action {
    justify-self: center !important;
  }

  .stock-import-page-action {
    height: 52px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
  }

  .stock-ledger-panel {
    overflow: hidden;
  }

  .stock-page-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .stock-page-table tbody {
    display: grid !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 0 12px 12px !important;
    box-sizing: border-box !important;
  }

  .stock-page-table tbody tr {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 8px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .stock-page-table .stock-select-col {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;
  }

  .stock-page-table td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .stock-page-table td:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .stock-page-table td:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 120px);
    gap: 8px;
    align-items: center;
  }

  .stock-page-table td:nth-child(4)::before {
    content: "На 01.01";
    color: #58616a;
    font-size: 13px;
    font-weight: 800;
  }

  .stock-page-table td:nth-child(8) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    min-width: 44px !important;
    max-width: 64px !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
  }

  .stock-page-table td:nth-child(9) {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    align-self: center !important;
    justify-self: stretch !important;
    padding-top: 4px !important;
  }

  .stock-page-table .stock-actions {
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .stock-page-table input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stock-page-table td:nth-child(2) input,
  .stock-page-table td:nth-child(3) input {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  .stock-page-table .stock-number-input {
    max-width: 120px !important;
  }
}

@media (max-width: 760px) {
  .stock-page-table td:nth-child(4)::before {
    content: "01.01" !important;
  }

  #referencesDialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .reference-dialog {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 100dvh;
    padding: 16px;
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .reference-dialog > header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 14px;
  }

  .reference-dialog > header h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.12;
  }

  .reference-dialog > header button {
    width: 100%;
    min-height: 50px;
  }

  .reference-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  .reference-controls .tab,
  .reference-spec-filter,
  .reference-sort,
  .reference-search,
  .reference-merge-button,
  .reference-mark-read {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
  }

  .reference-controls .tab {
    flex: none;
    height: 52px;
    border-radius: 10px;
  }

  .reference-spec-filter {
    justify-content: flex-start;
    padding: 0 14px;
    white-space: normal;
    line-height: 1.2;
  }

  .reference-sort {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .reference-sort select {
    height: 48px;
  }

  .reference-search {
    grid-template-columns: 1fr 48px;
    gap: 8px;
  }

  .reference-search > span,
  .reference-sort > span {
    display: block;
    color: rgba(247, 248, 246, 0.72);
    font-size: 14px;
    font-weight: 800;
  }

  .reference-search > span {
    grid-column: 1 / -1;
  }

  .reference-search input {
    width: 100%;
    height: 48px;
  }

  .reference-search button {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .reference-merge-button,
  .reference-mark-read {
    min-height: 50px;
    border-radius: 10px;
  }

  .reference-panel {
    max-height: calc(100dvh - 390px);
    min-height: 260px;
    padding: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: auto;
    border-radius: 12px;
  }

  .reference-table {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .reference-table thead {
    display: none;
  }

  .reference-table tbody {
    display: grid;
    gap: 10px;
    padding: 12px;
    box-sizing: border-box;
  }

  .reference-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    background: rgba(42, 52, 63, 0.94);
    overflow: hidden;
  }

  .reference-table tbody tr:not(.reference-shared-group-row):not(.reference-shared-group-end-row) {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .reference-table tbody td,
  .reference-table th:last-child,
  .reference-table td:last-child,
  .reference-table--equipment td,
  .reference-table--customers td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    text-align: left !important;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .reference-table tbody td::before {
    display: block;
    margin-bottom: 5px;
    color: rgba(247, 248, 246, 0.52);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
  }

  .reference-table--customers td:nth-child(1)::before {
    content: "Заказчик";
  }

  .reference-table--customers td:nth-child(2)::before {
    content: "Название для отчета";
  }

  .reference-table--equipment td:nth-child(1)::before {
    content: "Название в спецификации";
  }

  .reference-table--equipment td:nth-child(2)::before {
    content: "Складская позиция";
  }

  .reference-table--equipment td:nth-child(3)::before {
    content: "Название для отчета";
  }

  .reference-table td:last-child::before {
    content: "Действия";
  }

  .reference-name-cell {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
  }

  .reference-row-select {
    margin-top: 2px;
  }

  .reference-name-cell > div,
  .reference-name-text {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .reference-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
  }

  .reference-stock-cell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
  }

  .reference-non-stock-toggle {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .reference-table input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    box-sizing: border-box;
  }

  .reference-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 4px !important;
  }

  .reference-actions::before {
    width: 100%;
    margin-bottom: 2px;
  }

  .reference-actions button,
  .reference-stock-link {
    flex: 0 0 auto;
  }

  .reference-stock-link {
    min-width: 82px;
    height: 42px;
    border-radius: 9px;
  }

  .reference-shared-group-row,
  .reference-shared-group-end-row {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .reference-shared-group-row td,
  .reference-shared-group-end-row td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .reference-shared-group {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .reference-shared-group span,
  .reference-shared-group strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .reference-grouped-row {
    border-left: 2px solid rgba(82, 212, 227, 0.52);
    border-right: 2px solid rgba(82, 212, 227, 0.52);
    border-radius: 0 !important;
    background: rgba(37, 128, 138, 0.15) !important;
  }

  .reference-grouped-row--end {
    border-bottom: 2px solid rgba(82, 212, 227, 0.52);
    border-radius: 0 0 12px 12px !important;
    margin-bottom: 8px;
  }

  .reference-add-row {
    border: 1px dashed rgba(82, 212, 227, 0.55);
    background: rgba(82, 212, 227, 0.08) !important;
  }

  .reference-highlight {
    outline: 2px solid var(--cyan);
    outline-offset: -2px;
  }
}

@media (max-width: 760px) {
  #documentsDialog,
  #documentPreviewDialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .documents-dialog,
  .document-preview-dialog {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 100dvh;
    padding: 16px;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .documents-dialog > header,
  .document-preview-dialog > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin: 0 0 14px;
  }

  .documents-dialog > header h2,
  .document-preview-dialog > header h2 {
    margin: 0;
    max-width: 100%;
    font-size: clamp(25px, 8vw, 34px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .documents-dialog > header button,
  .document-preview-dialog > header button {
    width: 100%;
    min-height: 50px;
    border-radius: 10px;
  }

  .documents-dialog-body {
    max-height: calc(100dvh - 145px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
  }

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

  .documents-dialog-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    min-height: 0;
    padding: 14px;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .documents-dialog-meta {
    min-width: 0;
    gap: 7px;
  }

  .documents-dialog-meta strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.22;
  }

  .documents-dialog-type {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.1;
  }

  .documents-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .documents-dialog-actions button,
  .documents-dialog-actions a {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 10px;
    box-sizing: border-box;
  }

  #documentPreviewDialog .dialog-panel {
    height: 100dvh;
    max-height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .document-preview-body {
    min-height: 0;
    max-height: calc(100dvh - 145px);
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .document-preview-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: stretch;
  }

  .document-preview-toolbar button,
  .document-preview-toolbar a,
  .document-preview-empty a {
    width: 100%;
    min-height: 46px;
    border-radius: 10px;
    box-sizing: border-box;
  }

  .document-preview-frame {
    width: 100%;
    height: calc(100dvh - 220px);
    min-height: 360px;
    max-height: none;
    border-radius: 12px;
  }

  .document-preview-surface,
  .document-preview-text {
    width: 100%;
    min-height: 0;
    max-height: calc(100dvh - 220px);
    border-radius: 12px;
    box-sizing: border-box;
  }

  .document-preview-empty {
    align-content: start;
    min-height: 0;
    padding: 14px;
    border-radius: 12px;
  }
}

@media (max-width: 760px) {
  .stock-ledger-panel {
    border-radius: 14px;
    overflow: hidden !important;
  }

  .stock-ledger-panel .stock-section-heading {
    padding: 16px;
  }

  .stock-ledger-panel .stock-section-heading h3 {
    font-size: 27px;
    line-height: 1.1;
    margin: 0;
  }

  .stock-page-search {
    margin-top: 8px;
  }

  .stock-page-search label {
    font-size: 15px;
    line-height: 1.2;
  }

  .stock-page-search input {
    height: 48px;
    padding: 0 14px;
    font-size: 16px;
  }

  .stock-page-table tbody {
    gap: 12px !important;
    padding: 0 14px 16px !important;
  }

  .stock-page-table tbody tr {
    position: relative;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 54px !important;
    grid-template-areas:
      "marker title qty"
      "marker desc qty"
      "marker start qty"
      "actions actions actions" !important;
    gap: 7px 10px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .stock-page-table tbody td {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
  }

  .stock-page-table .stock-select-col {
    grid-area: marker !important;
    align-self: start !important;
    justify-self: center !important;
    padding-top: 2px !important;
  }

  .stock-page-table td:nth-child(2) {
    grid-area: title !important;
    min-width: 0 !important;
  }

  .stock-page-table td:nth-child(3) {
    grid-area: desc !important;
    min-width: 0 !important;
  }

  .stock-page-table td:nth-child(4) {
    grid-area: start !important;
    display: block !important;
    min-width: 0 !important;
  }

  .stock-page-table td:nth-child(4)::before {
    display: none !important;
    content: "" !important;
  }

  .stock-page-table td:nth-child(8) {
    grid-area: qty !important;
    align-self: start !important;
    justify-self: end !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 38px !important;
    padding: 7px 4px !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    word-break: normal !important;
    overflow: hidden !important;
  }

  .stock-page-table td:nth-child(9) {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
    padding-top: 6px !important;
  }

  .stock-page-table td:nth-child(2) input,
  .stock-page-table td:nth-child(3) input,
  .stock-page-table td:nth-child(4) input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .stock-page-table td:nth-child(2) input {
    padding-right: 2px !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
  }

  .stock-page-table td:nth-child(3) input {
    color: #3f4a54 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
  }

  .stock-page-table td:nth-child(4) input {
    width: auto !important;
    max-width: 110px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(24, 32, 41, 0.09) !important;
    color: #3f4a54 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .stock-page-table .stock-row-select-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 13px !important;
  }

  .stock-page-table .stock-actions {
    gap: 10px !important;
  }

  .stock-page-table .stock-action-icon-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

@media (max-width: 760px) {
  .stock-dialog .modal-content {
    padding: 14px !important;
  }

  .stock-ledger-panel,
  .stock-summary-location {
    overflow: hidden !important;
  }

  .stock-table-wrap,
  .flexcom-table-wrap,
  .stock-summary-location .stock-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  .stock-page-table,
  .stock-summary-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .stock-page-table colgroup,
  .stock-page-table thead,
  .stock-summary-table colgroup,
  .stock-summary-table thead {
    display: none !important;
  }

  .stock-page-table tbody,
  .stock-summary-table tbody {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    padding: 0 12px 14px !important;
    box-sizing: border-box !important;
  }

  .stock-page-table tbody tr {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 56px !important;
    grid-template-areas:
      "marker title qty"
      "marker desc qty"
      "actions actions actions" !important;
    gap: 8px 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .stock-page-table tbody td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .stock-page-table .stock-select-col {
    grid-area: marker !important;
    align-self: start !important;
    justify-self: center !important;
    padding-top: 1px !important;
  }

  .stock-page-table td:nth-child(2) {
    grid-area: title !important;
  }

  .stock-page-table td:nth-child(3) {
    grid-area: desc !important;
  }

  .stock-page-table td:nth-child(4),
  .stock-page-table td:nth-child(5),
  .stock-page-table td:nth-child(6),
  .stock-page-table td:nth-child(7) {
    display: none !important;
  }

  .stock-page-table td:nth-child(4)::before {
    display: none !important;
    content: "" !important;
  }

  .stock-page-table td:nth-child(8) {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: start !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 34px !important;
    padding: 6px 4px !important;
    border-radius: 999px !important;
    background: rgba(24, 32, 41, 0.12) !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    overflow: hidden !important;
  }

  .stock-page-table td:nth-child(9) {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 8px !important;
    overflow: visible !important;
  }

  .stock-page-table input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--ink) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  .stock-page-table input:focus {
    border-radius: 6px !important;
    box-shadow: 0 0 0 2px rgba(82, 212, 227, 0.45) !important;
    background: rgba(255, 255, 255, 0.25) !important;
  }

  .stock-page-table td:nth-child(2) input {
    padding-right: 2px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 26px !important;
  }

  .stock-page-table td:nth-child(3) input {
    color: #3f4a54 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 24px !important;
  }

  .stock-page-table .stock-row-select-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 13px !important;
  }

  .stock-page-table .stock-action-icon-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .stock-summary-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "title qty"
      "desc qty" !important;
    gap: 6px 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .stock-summary-table td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .stock-summary-table td:first-child {
    grid-area: title !important;
    color: var(--ink) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  .stock-summary-table td:nth-child(2) {
    grid-area: desc !important;
    color: #3f4a54 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  .stock-summary-table td:nth-child(3) {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: start !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 34px !important;
    padding: 6px 4px !important;
    border-radius: 999px !important;
    background: rgba(24, 32, 41, 0.12) !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    overflow: hidden !important;
  }
}

/* Final mobile warehouse cards: long group names must never break row alignment. */
@media (max-width: 760px) {
  #warehouseDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #warehouseDialog .warehouse-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #warehouseDialog .warehouse-body {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: 22px !important;
  }

  .warehouse-table-panel {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .warehouse-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .warehouse-table--summary {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  .warehouse-table--summary colgroup,
  .warehouse-table--summary thead {
    display: none !important;
  }

  .warehouse-table--summary tbody {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .warehouse-table--summary tbody tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    background: #e4e5e5 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .warehouse-table--summary tbody tr:nth-child(even) {
    background: #d8ddda !important;
  }

  .warehouse-table--summary td {
    display: block !important;
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(24, 32, 41, 0.08) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    text-align: right !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    font-variant-numeric: tabular-nums;
  }

  .warehouse-table--summary .warehouse-sticky-col {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }

  .warehouse-table--summary td::before {
    content: none !important;
    display: none !important;
  }

  .warehouse-table--summary .warehouse-mobile-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
  }

  .warehouse-table--summary .warehouse-mobile-label {
    flex: 1 1 auto !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 12px !important;
    color: #5b656e !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
  }

  .warehouse-table--summary .warehouse-mobile-row > .warehouse-mobile-value,
  .warehouse-table--summary .warehouse-mobile-row > .warehouse-need-button,
  .warehouse-table--summary .warehouse-mobile-row > .warehouse-current-stock {
    flex: 0 0 64px !important;
    align-self: center !important;
    justify-self: auto !important;
  }

  .warehouse-table--summary .warehouse-mobile-row > .warehouse-mobile-value {
    display: inline-flex !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .warehouse-table--summary .warehouse-equipment {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 72px !important;
    padding: 0 0 16px !important;
    margin: 0 0 2px !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(24, 32, 41, 0.08) !important;
    text-align: left !important;
    color: #121922 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .warehouse-table--summary .warehouse-equipment .warehouse-equipment-name {
    display: block !important;
    margin-top: 8px !important;
    min-width: 0 !important;
    color: #121922 !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  .warehouse-table--summary .warehouse-equipment .warehouse-mobile-label {
    display: block !important;
    padding-right: 0 !important;
    color: #5b656e !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  .warehouse-table--summary .warehouse-equipment + td {
    border-top: 0 !important;
    padding-top: 10px !important;
  }

  .warehouse-table--summary td:not(.warehouse-equipment) {
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  .warehouse-table--summary td:not(.warehouse-equipment) > button,
  .warehouse-table--summary .warehouse-current-stock {
    justify-self: end !important;
  }

  .warehouse-table--summary .warehouse-need-button,
  .warehouse-table--summary .warehouse-current-stock {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 30px !important;
    padding: 5px 9px !important;
    border-radius: 9px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .warehouse-table--summary .warehouse-total,
  .warehouse-table--summary .warehouse-deficit {
    align-items: center !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  .warehouse-table--summary .warehouse-total .warehouse-mobile-value,
  .warehouse-table--summary .warehouse-deficit .warehouse-mobile-value {
    font-size: 18px !important;
    font-weight: 950 !important;
  }
}

/* Final mobile stock card geometry: no clipped titles, no narrow description, no fixed balance pill. */
@media (max-width: 760px) {
  #stockDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #stockDialog .stock-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #stockDialog .stock-body {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: 22px !important;
  }

  .stock-ledger-panel,
  .stock-summary-location {
    min-height: 0 !important;
    overflow: visible !important;
  }

  .stock-table-wrap,
  .flexcom-table-wrap,
  .stock-summary-location .stock-table-wrap {
    overflow: visible !important;
  }

  .stock-ledger-panel .stock-section-heading {
    overflow: visible !important;
  }

  .stock-ledger-panel .stock-section-heading h3 {
    min-height: 0 !important;
    padding-bottom: 2px !important;
    font-size: 28px !important;
    line-height: 1.18 !important;
    overflow: visible !important;
  }

  .stock-page-table tbody tr {
    grid-template-columns: 34px minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "marker title title"
      "marker desc qty"
      "actions actions actions" !important;
    gap: 7px 12px !important;
    align-items: start !important;
    padding: 14px 12px 12px !important;
    overflow: visible !important;
  }

  .stock-page-table td:nth-child(2) {
    grid-area: title !important;
    overflow: visible !important;
  }

  .stock-page-table td:nth-child(3) {
    grid-area: desc !important;
    overflow: hidden !important;
  }

  .stock-page-table td:nth-child(2) input {
    height: auto !important;
    min-height: 54px !important;
    padding: 0 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .stock-page-table td:nth-child(3) input {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stock-page-table td:nth-child(8) {
    grid-area: qty !important;
    width: auto !important;
    min-width: 50px !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .stock-summary-table tr {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "title qty"
      "desc qty" !important;
    gap: 7px 12px !important;
    align-items: start !important;
    padding: 14px 12px 12px !important;
    overflow: visible !important;
  }

  .stock-summary-table td:nth-child(1) {
    grid-area: title !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .stock-summary-table td:nth-child(2) {
    grid-area: desc !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .stock-summary-table td:nth-child(3) {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    min-width: 50px !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: rgba(24, 32, 41, 0.12) !important;
    color: var(--ink) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

/* Last mobile warehouse override: cards use real rows, not table-cell sizing. */
@media (max-width: 760px) {
  .warehouse-table-panel {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 18px !important;
    overflow: visible !important;
  }

  .warehouse-table-wrap {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .warehouse-table--summary,
  .warehouse-table--summary tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .warehouse-table--summary tbody {
    display: grid !important;
    gap: 14px !important;
  }

  .warehouse-table--summary tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 16px 18px !important;
    overflow: hidden !important;
  }

  .warehouse-table--summary td {
    display: block !important;
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(24, 32, 41, 0.08) !important;
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .warehouse-table--summary td::before {
    content: none !important;
    display: none !important;
  }

  .warehouse-table--summary .warehouse-mobile-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
  }

  .warehouse-table--summary .warehouse-mobile-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 10px !important;
    color: #5b656e !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }

  .warehouse-table--summary .warehouse-mobile-value,
  .warehouse-table--summary .warehouse-need-button,
  .warehouse-table--summary .warehouse-current-stock {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 30px !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .warehouse-table--summary .warehouse-equipment {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 16px !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(24, 32, 41, 0.08) !important;
  }

  .warehouse-table--summary .warehouse-equipment .warehouse-mobile-label,
  .warehouse-table--summary .warehouse-equipment .warehouse-equipment-name {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .warehouse-table--summary .warehouse-equipment .warehouse-equipment-name {
    margin-top: 8px !important;
    color: #121922 !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Final stock mobile override: fixes stock scrolling and card geometry. */
@media (max-width: 760px) {
  #stockDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #stockDialog .stock-dialog {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #stockDialog .stock-body {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 32px !important;
  }

  #stockDialog .stock-summary-grid,
  #stockDialog .stock-summary-location,
  #stockDialog .stock-table-wrap {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #stockDialog .stock-summary-table tbody,
  #stockDialog .stock-page-table tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 12px 18px !important;
  }

  #stockDialog .stock-summary-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "title qty"
      "desc qty" !important;
    gap: 8px 14px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 16px 14px !important;
    overflow: visible !important;
  }

  #stockDialog .stock-summary-table td {
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #stockDialog .stock-summary-table td:nth-child(1) {
    grid-area: title !important;
    color: var(--ink) !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  #stockDialog .stock-summary-table td:nth-child(2) {
    grid-area: desc !important;
    color: #3f4a54 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 24px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #stockDialog .stock-summary-table td:nth-child(3) {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: start !important;
    width: max-content !important;
    min-width: 52px !important;
    max-width: none !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(24, 32, 41, 0.12) !important;
    color: var(--ink) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

/* Mobile warehouse details dialog: keep the breakdown high and compact. */
@media (max-width: 760px) {
  #warehouseNeedDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    overflow: auto !important;
    background: transparent !important;
    align-items: flex-start !important;
  }

  #warehouseNeedDialog .warehouse-need-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, auto) !important;
    align-content: start !important;
    gap: 12px !important;
    width: min(100%, 620px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 auto !important;
    padding: 14px !important;
    border-radius: 10px !important;
    overflow: auto !important;
  }

  #warehouseNeedDialog .warehouse-need-dialog header {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.14) !important;
    background: transparent !important;
  }

  #warehouseNeedTitle {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  #warehouseNeedDialog .dialog-header-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 92px !important;
    justify-content: start !important;
  }

  #warehouseNeedDialog .dialog-header-actions button {
    width: 100% !important;
    min-width: 92px !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  #warehouseNeedDialog .warehouse-need-body {
    max-height: none !important;
    overflow: visible !important;
  }

  #warehouseNeedDialog .warehouse-need-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
  }

  #warehouseNeedDialog .warehouse-need-table th,
  #warehouseNeedDialog .warehouse-need-table td {
    padding: 8px 7px !important;
    line-height: 1.18 !important;
    vertical-align: middle !important;
  }

  #warehouseNeedDialog .warehouse-need-table th {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  #warehouseNeedDialog .warehouse-need-spec {
    min-height: 34px !important;
    padding: 6px 8px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #warehouseNeedDialog .warehouse-need-selected {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  #warehouseNeedDialog .warehouse-need-selected > div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: #e4e9e6 !important;
    color: var(--ink) !important;
    box-sizing: border-box !important;
  }

  #warehouseNeedDialog .warehouse-need-selected span {
    color: #5b656e !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  #warehouseNeedDialog .warehouse-need-selected strong {
    min-width: 0 !important;
    color: var(--graphite) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Last warehouse mobile height fix: the dark panel must wrap every summary card. */
@media (max-width: 760px) {
  #warehouseDialog {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #warehouseDialog .warehouse-dialog {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #warehouseDialog .warehouse-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 28px !important;
  }

  #warehouseDialog .warehouse-table-panel {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #warehouseDialog .warehouse-table-wrap {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Last stock pages mobile override: stable cards for warehouse page rows. */
@media (max-width: 760px) {
  #stockDialog .stock-page-settings {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    gap: 8px !important;
    align-items: end !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #stockDialog .stock-page-settings label:has(#stockPageName) {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #stockDialog .stock-page-settings .stock-location-control,
  #stockDialog .stock-page-settings .stock-exclude-control,
  #stockDialog .stock-page-settings .stock-import-page-action {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #stockDialog .stock-page-settings .stock-save-page-action,
  #stockDialog .stock-page-settings .stock-delete-page-action {
    justify-self: stretch !important;
    align-self: end !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #stockDialog .stock-page-settings .stock-save-page-action {
    grid-column: 2 !important;
  }

  #stockDialog .stock-page-settings .stock-delete-page-action {
    grid-column: 3 !important;
  }

  #stockDialog .stock-ledger-panel,
  #stockDialog .stock-table-wrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #stockDialog .stock-page-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    overflow: visible !important;
  }

  #stockDialog .stock-page-table colgroup,
  #stockDialog .stock-page-table thead {
    display: none !important;
  }

  #stockDialog .stock-page-table tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 12px 16px !important;
    box-sizing: border-box !important;
  }

  #stockDialog .stock-page-table tbody tr {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) 78px !important;
    grid-template-areas:
      "marker title qty"
      "desc desc desc"
      "actions actions actions" !important;
    gap: 10px 14px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #stockDialog .stock-page-table tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #stockDialog .stock-page-table .stock-select-col {
    grid-area: marker !important;
    align-self: start !important;
    justify-self: center !important;
  }

  #stockDialog .stock-page-table td:nth-child(2) {
    grid-area: title !important;
  }

  #stockDialog .stock-page-table td:nth-child(3) {
    grid-area: desc !important;
    padding-left: 0 !important;
  }

  #stockDialog .stock-page-table td:nth-child(4),
  #stockDialog .stock-page-table td:nth-child(5),
  #stockDialog .stock-page-table td:nth-child(6),
  #stockDialog .stock-page-table td:nth-child(7) {
    display: none !important;
  }

  #stockDialog .stock-page-table td:nth-child(8) {
    grid-area: qty !important;
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: rgba(24, 32, 41, 0.12) !important;
    color: var(--ink) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #stockDialog .stock-page-table td:nth-child(9) {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(37, 128, 138, 0.55) !important;
  }

  #stockDialog .stock-page-table input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  #stockDialog .stock-page-table td:nth-child(2) input {
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1.14 !important;
  }

  #stockDialog .stock-page-table td:nth-child(3) input {
    color: #2f3b45 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
  }

  #stockDialog .stock-page-table .stock-row-select-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 16px !important;
  }

  #stockDialog .stock-page-table .stock-action-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Last mobile references override: readable card layout for directories. */
@media (max-width: 760px) {
  #referencesDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #referencesDialog .reference-dialog {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #referencesDialog .reference-panel,
  #referencesDialog .reference-table-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #referencesDialog .reference-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  #referencesDialog .reference-table thead,
  #referencesDialog .reference-table colgroup {
    display: none !important;
  }

  #referencesDialog .reference-table tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #referencesDialog .reference-table tbody tr:not(.reference-shared-group-row):not(.reference-shared-group-end-row) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 14px 14px !important;
    border: 1px solid rgba(82, 212, 227, 0.45) !important;
    border-radius: 12px !important;
    background: rgba(42, 74, 84, 0.88) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #referencesDialog .reference-table tbody tr:not(.reference-shared-group-row):not(.reference-shared-group-end-row)::before,
  #referencesDialog .reference-table tbody tr:not(.reference-shared-group-row):not(.reference-shared-group-end-row)::after {
    content: none !important;
    display: none !important;
  }

  #referencesDialog .reference-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  #referencesDialog .reference-table td::before {
    display: block !important;
    margin: 0 0 10px !important;
    color: rgba(247, 248, 246, 0.58) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
  }

  #referencesDialog .reference-table td:first-child::before {
    margin-top: 0 !important;
  }

  #referencesDialog .reference-name-cell {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-width: 0 !important;
    padding-top: 2px !important;
  }

  #referencesDialog .reference-row-select {
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  #referencesDialog .reference-row-select span,
  #referencesDialog .reference-row-select input {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  #referencesDialog .reference-name-cell > div,
  #referencesDialog .reference-name-text {
    min-width: 0 !important;
    max-width: 100% !important;
    color: rgba(247, 248, 246, 0.92) !important;
    font-size: 18px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #referencesDialog .reference-stock-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #referencesDialog .reference-non-stock-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 !important;
    color: rgba(247, 248, 246, 0.86) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  #referencesDialog .reference-non-stock-toggle input {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #referencesDialog .reference-non-stock-toggle span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #referencesDialog .reference-table input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #referencesDialog .reference-table input:disabled {
    opacity: 0.85 !important;
  }

  #referencesDialog .reference-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(82, 212, 227, 0.45) !important;
  }

  #referencesDialog .reference-actions::before {
    content: none !important;
    display: none !important;
  }

  #referencesDialog .reference-stock-link {
    min-width: 86px !important;
    height: 42px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }

  #referencesDialog .reference-actions .stock-action-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  #referencesDialog .reference-shared-group-row,
  #referencesDialog .reference-shared-group-end-row {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 4px 0 8px !important;
    overflow: visible !important;
  }

  #referencesDialog .reference-shared-group-row td,
  #referencesDialog .reference-shared-group-end-row td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #referencesDialog .reference-shared-group-row td::before,
  #referencesDialog .reference-shared-group-end-row td::before {
    content: none !important;
    display: none !important;
  }

  #referencesDialog .reference-shared-group-end-row {
    display: none !important;
  }

  #referencesDialog .reference-shared-group {
    display: grid !important;
    gap: 4px !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(82, 212, 227, 0.45) !important;
    background: rgba(42, 82, 92, 0.92) !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  #referencesDialog .reference-shared-group span,
  #referencesDialog .reference-shared-group strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #referencesDialog .reference-shared-group span {
    color: rgba(247, 248, 246, 0.64) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
  }

  #referencesDialog .reference-shared-group strong {
    color: rgba(247, 248, 246, 0.96) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
  }

  #referencesDialog .reference-grouped-row,
  #referencesDialog .reference-grouped-row--end {
    border-radius: 12px !important;
    border: 1px solid rgba(82, 212, 227, 0.45) !important;
  }

  #referencesDialog .reference-grouped-row::before,
  #referencesDialog .reference-grouped-row::after,
  #referencesDialog .reference-grouped-row--end::before,
  #referencesDialog .reference-grouped-row--end::after {
    content: none !important;
    display: none !important;
  }
}

/* Absolute last reference spacing fix: remove grouped inset lines and add air. */
@media (max-width: 760px) {
  #referencesDialog .reference-table tbody {
    gap: 18px !important;
  }

  #referencesDialog .reference-table tbody tr:not(.reference-shared-group-row):not(.reference-shared-group-end-row) {
    gap: 18px !important;
    padding: 24px 16px 18px !important;
    box-shadow: none !important;
  }

  #referencesDialog .reference-table td,
  #referencesDialog .reference-grouped-row td,
  #referencesDialog .reference-grouped-row td:first-child,
  #referencesDialog .reference-grouped-row td:last-child,
  #referencesDialog .reference-grouped-row--end td {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
  }

  #referencesDialog .reference-table td::before {
    margin-bottom: 14px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  #referencesDialog .reference-name-cell {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-top: 0 !important;
  }

  #referencesDialog .reference-stock-cell {
    gap: 12px !important;
  }

  #referencesDialog .reference-table--equipment td:nth-child(2)::before {
    margin-bottom: 18px !important;
  }

  #referencesDialog .reference-table--equipment td:nth-child(2) .reference-stock-cell {
    padding-top: 2px !important;
  }

  #referencesDialog .reference-actions {
    margin-top: 2px !important;
    padding-top: 12px !important;
  }
}

/* Absolute last stock mobile fix: scroll, one-line descriptions, elastic quantity pill. */
@media (max-width: 760px) {
  #stockDialog {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #stockDialog .stock-dialog,
  #stockDialog .stock-body,
  #stockDialog .stock-summary-grid,
  #stockDialog .stock-summary-location,
  #stockDialog .stock-table-wrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #stockDialog .stock-summary-table tr {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "title qty"
      "desc qty" !important;
    grid-auto-rows: auto !important;
    gap: 10px 14px !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 14px !important;
    overflow: visible !important;
  }

  #stockDialog .stock-summary-table td,
  #stockDialog .stock-page-table td {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #stockDialog .stock-summary-table td:nth-child(1) {
    grid-area: title !important;
    align-self: start !important;
    padding-right: 4px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  #stockDialog .stock-summary-table td:nth-child(2) {
    grid-area: desc !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 22px !important;
  }

  #stockDialog .stock-summary-table td:nth-child(2),
  #stockDialog .stock-page-table td:nth-child(3) input {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #stockDialog .stock-summary-table td:nth-child(3),
  #stockDialog .stock-page-table td:nth-child(8) {
    grid-area: qty !important;
    align-self: start !important;
    display: inline-flex !important;
    width: max-content !important;
    min-width: 52px !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  #stockDialog .stock-page-table tbody tr {
    grid-auto-rows: auto !important;
    height: auto !important;
    gap: 10px 14px !important;
  }

  #stockDialog .stock-page-table td:nth-child(2) input {
    height: auto !important;
    line-height: 1.12 !important;
  }

  #stockDialog .stock-page-table td:nth-child(3) input {
    height: 22px !important;
    line-height: 22px !important;
  }
}

/* Final mobile document dialog polish: compact header and tidy document cards. */
@media (max-width: 760px) {
  #documentsDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #documentsDialog .documents-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #documentsDialog .documents-dialog > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.12) !important;
  }

  #documentsDialog .documents-dialog > header h2 {
    margin: 0 !important;
    max-width: 100% !important;
    color: var(--ink-on-dark) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #documentsDialog .documents-dialog > header button {
    width: auto !important;
    min-width: 96px !important;
    max-width: 128px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    align-self: center !important;
    justify-self: end !important;
  }

  #documentsDialog .documents-dialog-body {
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px 4px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #documentsDialog .documents-dialog-list {
    display: grid !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  #documentsDialog .documents-dialog-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(24, 32, 41, 0.24) !important;
    box-sizing: border-box !important;
  }

  #documentsDialog .documents-dialog-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #documentsDialog .documents-dialog-type {
    justify-self: start !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #documentsDialog .documents-dialog-meta strong {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: var(--ink-on-dark) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  #documentsDialog .documents-dialog-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #documentsDialog .documents-dialog-actions button,
  #documentsDialog .documents-dialog-actions a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}

/* Final mobile settings polish: compact, readable, no giant close block. */
@media (max-width: 760px) {
  #settingsDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #settingsDialog .settings-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #settingsDialog .settings-dialog > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.12) !important;
  }

  #settingsDialog .settings-dialog > header h2 {
    margin: 0 !important;
    color: var(--ink-on-dark) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  #settingsDialog .settings-dialog > header button {
    width: auto !important;
    min-width: 96px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    justify-self: end !important;
  }

  #settingsDialog #settingsForm {
    display: grid !important;
    gap: 12px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px 4px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #settingsDialog .settings-section {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 12px !important;
    background: rgba(24, 32, 41, 0.20) !important;
    box-sizing: border-box !important;
  }

  #settingsDialog .settings-section h3 {
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.18 !important;
  }

  #settingsDialog .settings-section label {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    color: rgba(247, 248, 246, .72) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  #settingsDialog .settings-section input,
  #settingsDialog .settings-section select,
  #settingsDialog .settings-section .custom-select,
  #settingsDialog .settings-section .custom-select-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
  }

  #settingsDialog .settings-section > button,
  #settingsDialog .settings-actions button {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    justify-self: stretch !important;
  }

  #settingsDialog .settings-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #settingsDialog .settings-actions button:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  #settingsDialog .settings-dialog > header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  #settingsDialog .build-version {
    margin-left: 0;
    justify-self: end;
  }
}

/* Absolute last reference stock field spacing. */
@media (max-width: 760px) {
  #referencesDialog .reference-table--equipment td:nth-child(2) {
    padding-top: 8px !important;
  }

  #referencesDialog .reference-table--equipment td:nth-child(2)::before {
    display: block !important;
    margin-bottom: 22px !important;
  }

  #referencesDialog .reference-table--equipment td:nth-child(2) .reference-stock-cell {
    display: grid !important;
    gap: 14px !important;
    padding-top: 4px !important;
  }

  #referencesDialog .reference-table--equipment td:nth-child(2) .reference-non-stock-toggle {
    min-height: 48px !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
  }

  #referencesDialog .reference-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    min-height: 48px !important;
  }

  #referencesDialog .reference-stock-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    line-height: 1 !important;
    align-self: center !important;
  }

  #referencesDialog .reference-actions .stock-action-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  #referencesDialog .reference-actions .stock-action-icon-button svg,
  #referencesDialog .reference-actions .stock-action-icon-button img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
}

/* Hidden rows must stay hidden after mobile card display overrides. */
@media (max-width: 760px) {
  #referencesDialog .reference-table tr[hidden],
  #referencesDialog .reference-table tbody tr[hidden],
  #referencesDialog .reference-table tbody tr[hidden]:not(.reference-shared-group-row):not(.reference-shared-group-end-row) {
    display: none !important;
  }
}

/* Mobile history: compact header and card rows. */
@media (max-width: 760px) {
  #historyDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #historyDialog .history-dialog {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #historyDialog .history-dialog > header {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.14) !important;
    background: transparent !important;
  }

  #historyDialog .history-dialog > header h2 {
    margin: 0 !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  #historyDialog .history-dialog > header button {
    width: auto !important;
    min-width: 96px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
  }

  #historyDialog .history-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }

  #historyDialog .history-tabs .tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #historyDialog .history-list {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #historyDialog .spec-history-year {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
  }

  #historyDialog .spec-history-year h3 {
    margin: 0 !important;
    color: var(--ink-on-dark) !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  #historyDialog .history-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  #historyDialog .history-table thead,
  #historyDialog .history-table colgroup {
    display: none !important;
  }

  #historyDialog .history-table tbody {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #historyDialog .history-table tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #e4e9e6 !important;
    color: var(--ink) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #historyDialog .history-table tr:nth-child(even) {
    background: #d4ddda !important;
  }

  #historyDialog .history-table td {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  #historyDialog .history-table td::before {
    content: attr(data-label) !important;
    display: block !important;
    color: #5b656e !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 2px !important;
    line-height: 1.15 !important;
  }

  #historyDialog .history-mobile-value {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  #historyDialog .history-table td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #historyDialog .history-row--link {
    cursor: pointer !important;
    outline: 1px solid rgba(82, 212, 227, 0.32) !important;
  }
}

/* Compact mobile settings: controls should fit content, not stretch into panels. */
@media (max-width: 760px) {
  #settingsDialog {
    padding: 10px !important;
  }

  #settingsDialog .settings-dialog {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  #settingsDialog .settings-dialog > header {
    gap: 10px !important;
    padding-bottom: 10px !important;
  }

  #settingsDialog .settings-dialog > header h2 {
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  #settingsDialog .settings-dialog > header button {
    min-width: 88px !important;
    width: 88px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
  }

  #settingsDialog #settingsForm {
    gap: 10px !important;
    align-content: start !important;
  }

  #settingsDialog .settings-section {
    gap: 10px !important;
    align-content: start !important;
    padding: 12px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #settingsDialog .settings-section h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  #settingsDialog .settings-section label {
    gap: 6px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  #settingsDialog .settings-section input,
  #settingsDialog .settings-section select,
  #settingsDialog .settings-section .custom-select,
  #settingsDialog .settings-section .custom-select-button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 15px !important;
    line-height: 42px !important;
  }

  #settingsDialog .settings-section > button,
  #settingsDialog .settings-actions button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  #settingsDialog .settings-actions {
    gap: 8px !important;
  }
}

/* Settings mobile: remove empty stretched space inside sections. */
@media (max-width: 760px) {
  #settingsDialog .settings-dialog {
    grid-template-rows: auto auto !important;
    align-content: start !important;
  }

  #settingsDialog #settingsForm {
    height: auto !important;
    max-height: calc(100dvh - 86px) !important;
    align-content: start !important;
    align-items: start !important;
    grid-auto-rows: max-content !important;
  }

  #settingsDialog .settings-section {
    height: auto !important;
    max-height: none !important;
    align-self: start !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
  }
}

/* Final mobile users dialog: real cards, compact form, no clipped table columns. */
@media (max-width: 760px) {
  #usersDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #usersDialog .users-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #usersDialog .users-dialog > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.12) !important;
  }

  #usersDialog .users-dialog > header h2 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #usersDialog .users-dialog > header button {
    width: 88px !important;
    min-width: 88px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    justify-self: end !important;
  }

  #usersDialog #usersForm {
    display: grid !important;
    gap: 10px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px 4px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #usersDialog .user-create {
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(24, 32, 41, 0.20) !important;
  }

  #usersDialog .user-create h3 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  #usersDialog .user-create-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #usersDialog .user-create-grid label {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: rgba(247, 248, 246, .72) !important;
  }

  #usersDialog .user-create-grid input,
  #usersDialog .user-create-grid select,
  #usersDialog .user-create-grid .custom-select,
  #usersDialog .user-create-grid .custom-select-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
  }

  #usersDialog .user-create-grid .password-field {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 8px !important;
  }

  #usersDialog .user-create-grid button,
  #usersDialog .user-create > button,
  #usersDialog button[data-create-user] {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  #usersDialog .users-list {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  #usersDialog .users-grid {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #usersDialog .users-grid-head {
    display: none !important;
  }

  #usersDialog .user-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(228, 229, 229, 0.12) !important;
    border-radius: 12px !important;
    background: rgba(62, 70, 80, .76) !important;
    box-sizing: border-box !important;
  }

  #usersDialog .user-row:nth-child(odd) {
    background: rgba(55, 64, 73, .86) !important;
  }

  #usersDialog .user-field {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  #usersDialog .user-field > span {
    display: block !important;
    color: rgba(247, 248, 246, .68) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  #usersDialog .user-field input,
  #usersDialog .user-field select,
  #usersDialog .user-field .custom-select,
  #usersDialog .user-field .custom-select-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
  }

  #usersDialog .password-field {
    position: relative !important;
    display: block !important;
  }

  #usersDialog .password-field input {
    padding-right: 54px !important;
  }

  #usersDialog .user-create-grid .password-field button,
  #usersDialog .password-field button {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
  }

  #usersDialog .user-active-toggle,
  #usersDialog .user-stock-toggle,
  #usersDialog .user-task-toggle {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  #usersDialog .user-active-toggle input,
  #usersDialog .user-stock-toggle input,
  #usersDialog .user-task-toggle input {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
  }

  #usersDialog .user-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(228, 229, 229, 0.10) !important;
  }

  #usersDialog .user-actions .stock-action-icon-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Emergency mobile users reset: prevent the list from overlapping the create form. */
@media (max-width: 760px) {
  #usersDialog[open] {
    display: block !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #usersDialog .users-dialog,
  #usersDialog #usersForm {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  #usersDialog .users-dialog > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.12) !important;
  }

  #usersDialog .users-dialog > header h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #usersDialog .users-dialog > header button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 88px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
  }

  #usersDialog .user-create,
  #usersDialog .users-list {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #usersDialog .user-create {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  #usersDialog .user-create h3 {
    margin: 0 0 10px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  #usersDialog .user-create-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #usersDialog .user-create-grid label {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #usersDialog .users-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #usersDialog .user-row {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    overflow: visible !important;
  }

  #usersDialog .user-field,
  #usersDialog .user-password {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  #usersDialog .user-active-toggle,
  #usersDialog .user-stock-toggle,
  #usersDialog .user-task-toggle {
    min-height: 28px !important;
  }

  #usersDialog .user-actions {
    justify-content: flex-end !important;
  }

  #usersDialog .user-stock-permissions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 6px !important;
    border: 1px solid rgba(254, 254, 254, .14) !important;
    border-radius: 8px !important;
    background: rgba(24, 32, 41, .30) !important;
  }

  #usersDialog .user-stock-permissions label {
    justify-content: flex-start !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(254, 254, 254, .08) !important;
  }

  #usersDialog .user-stock-permissions label:last-child {
    border-bottom: 0 !important;
  }
}

/* Shared task tracker */
#taskTrackerDialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.task-tracker-dialog {
  width: 100%;
  min-height: 100dvh;
  max-height: none;
  overflow: auto;
  padding: clamp(18px, 2.5vw, 38px);
}
.task-tracker-dialog > header > div { min-width: 0; }
.task-tracker-subtitle {
  margin: 3px 0 0;
  color: rgba(247, 248, 246, .62);
  font-size: 13px;
}
.task-tracker-toolbar,
.task-tracker-create {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(170px, .7fr) minmax(210px, auto);
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(228, 229, 229, .12);
  border-radius: 8px;
  background: rgba(33, 42, 51, .26);
}
.task-tracker-toolbar label,
.task-tracker-create label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: rgba(247, 248, 246, .68);
  font-size: 12px;
  font-weight: 800;
}
.task-tracker-toolbar input,
.task-tracker-toolbar select,
.task-tracker-create input,
.task-tracker-create select,
.task-tracker-group-tools input {
  width: 100%;
  min-width: 0;
  height: 40px;
}
.task-tracker-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.task-tracker-tabs button { min-height: 40px; }
.task-tracker-tabs button.active {
  border-color: #52d4e3;
  background: #25808a;
  color: #fff;
}
.task-tracker-create {
  grid-template-columns: minmax(260px, 1.5fr) minmax(160px, .6fr) 150px minmax(135px, auto) auto;
  margin-top: 10px;
}
.task-tracker-focus-check {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(228, 229, 229, .14);
  border-radius: 6px;
  color: #f7f8f6 !important;
}
.task-tracker-focus-check input { width: 19px; height: 19px; }
.task-tracker-group-tools {
  display: flex;
  gap: 8px;
  width: min(520px, 100%);
  margin: 10px 0 0 auto;
}
.task-tracker-section {
  margin-top: 12px;
  border-top: 1px solid rgba(228, 229, 229, .12);
  padding-top: 12px;
}
.task-tracker-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.task-tracker-section-title h3 { margin: 0; }
.task-tracker-section-title span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: rgba(82, 212, 227, .13);
  color: #52d4e3;
  font-weight: 800;
}
.task-tracker-list { display: grid; gap: 8px; }
.task-tracker-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(228, 229, 229, .12);
  border-left: 3px solid #52d4e3;
  border-radius: 7px;
  background: rgba(62, 70, 80, .72);
}
.task-tracker-card.is-overdue { border-left-color: #f57e2d; }
.task-tracker-card.is-done { opacity: .7; border-left-color: #77bc1f; }
.task-tracker-complete { display: grid; place-items: center; }
.task-tracker-complete input { width: 21px; height: 21px; margin: 0; }
.task-tracker-card-main { display: grid; gap: 7px; min-width: 0; }
.task-tracker-title {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  font-weight: 800;
}
.task-tracker-card.is-done .task-tracker-title { text-decoration: line-through; }
.task-tracker-card-meta {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 170px;
  gap: 8px;
}
.task-tracker-card-meta select,
.task-tracker-card-meta input { width: 100%; min-width: 0; height: 34px; }
.task-tracker-date { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: center; color: rgba(247,248,246,.62); font-size: 12px; }
.task-tracker-card-actions { display: flex; align-items: center; gap: 7px; }
.task-tracker-card-actions button { min-height: 36px; padding: 0 11px; }
.task-tracker-card-actions .task-focus-button,
.task-tracker-card-actions .task-delete-button { width: 36px; min-width: 36px; padding: 0; font-size: 19px; }
.task-focus-button.active { color: #ffd206; border-color: #ffd206; }
.task-delete-button:hover { background: #a84444; color: #fff; }
.task-tracker-empty { margin: 0; padding: 18px; text-align: center; color: rgba(247,248,246,.56); }

@media (max-width: 760px) {
  .spec-workbar { align-items: stretch; }
  .task-tracker-launch { width: 100%; margin-left: 0; }
  #taskTrackerDialog { width: 100%; max-width: 100%; margin: 0; }
  .task-tracker-dialog { min-height: 100dvh; max-height: none; border-radius: 0; }
  .task-tracker-toolbar,
  .task-tracker-create { grid-template-columns: 1fr; }
  .task-tracker-group-tools { display: grid; grid-template-columns: 1fr; }
  .task-tracker-card { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  .task-tracker-card-actions { grid-column: 2; justify-content: flex-end; }
  .task-tracker-card-meta { grid-template-columns: 1fr; }
}

/* Task tracker: mirrors the standalone tracker interface. */
#taskTrackerDialog {
  --task-green: #7ee000;
  --task-turquoise: #36c6c9;
  --task-muted: #aeb6bf;
  --task-line: rgba(247, 248, 245, .12);
  --task-line-soft: rgba(247, 248, 245, .07);
  color: #f7f8f5;
  background: #2d333b;
}
#taskTrackerDialog .task-tracker-dialog {
  width: min(1680px, calc(100% - 56px));
  min-height: 100dvh;
  margin: 0 auto;
  padding: 34px 0 56px;
  overflow: visible;
}
.task-tracker-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}
.task-tracker-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 47px;
}
.task-tracker-brand img { display: block; width: 150px; height: 47px; object-fit: contain; }
.task-tracker-brand h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 47px;
  font-weight: 700;
  transform: translateY(-4px);
}
.task-tracker-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.task-tracker-top-actions p { margin: 0; color: var(--task-muted); font-size: 13px; text-transform: lowercase; }
.task-tracker-top-actions button { min-height: 38px; }
.task-tracker-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: 92px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(247, 248, 245, .18);
  border-radius: 8px;
  background: rgba(247, 248, 245, .06);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.task-tracker-back:hover { border-color: var(--task-turquoise); background: rgba(54, 198, 201, .12); }
#taskTrackerDialog .task-tracker-top-actions {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  gap: 12px;
  padding-right: 4px;
}
#taskTrackerDialog .task-tracker-top-actions p { min-width: 0; overflow-wrap: anywhere; }
#taskTrackerBackButton {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 76px !important;
  max-width: 100%;
  min-height: 44px !important;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
#taskTrackerBackButton:focus:not(:focus-visible) { outline: none; }
#taskTrackerBackButton:focus-visible { outline: 2px solid var(--task-turquoise); outline-offset: 2px; }
.task-tracker-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.task-tracker-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--task-line-soft);
  border-radius: 14px;
  background: rgba(37, 43, 50, .62);
}
.task-tracker-panel.is-drag-over {
  border-color: rgba(82, 212, 227, .72);
  background: rgba(82, 212, 227, .08);
}
.task-tracker-section-head { display: flex; align-items: center; justify-content: space-between; min-height: 43px; gap: 18px; margin-bottom: 16px; }
.task-tracker-section-head h3 { margin: 0; font-size: 18px; }
.task-tracker-section-head p { margin: 0 0 5px; color: var(--task-turquoise); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.task-tracker-add-icon {
  width: 22px; min-width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #25808a; border: 1px solid rgba(82, 212, 227, .65); border-radius: 999px; background: rgba(82, 212, 227, .12);
}
.task-tracker-add-icon span { position: relative; display: block; width: 11px; height: 11px; }
.task-tracker-add-icon span::before, .task-tracker-add-icon span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px;
  background: currentColor; transform: translate(-50%, -50%);
}
.task-tracker-add-icon span::after { width: 2px; height: 11px; }
.task-tracker-add-icon:hover { color: #f2fbfc; border-color: #25808a; background: #25808a; box-shadow: 0 0 0 2px rgba(37,128,138,.22); }
.task-tracker-inline-form, .task-tracker-group-tools { display: grid; gap: 10px; margin-bottom: 16px; }
.task-tracker-inline-form { grid-template-columns: minmax(0, 1fr) 190px 110px; }
.task-tracker-all-form { grid-template-columns: minmax(0, 1fr) 190px 150px 110px; }
.task-tracker-inline-form[hidden] { display: none; }
.task-tracker-group-tools { grid-template-columns: minmax(0, 1fr) 110px; width: 100%; margin: 0 0 16px; }
.task-tracker-inline-form input, .task-tracker-inline-form select, .task-tracker-group-tools input { width: 100%; height: 38px; min-width: 0; }
.task-tracker-inline-form button, .task-tracker-group-tools button { height: 38px; color: #14200c; background: var(--task-green); font-weight: 700; }

/* iPad: a half-width task panel is too narrow for its forms and filters. */
@media (min-width: 681px) and (max-width: 1100px) {
  #taskTrackerDialog .task-tracker-dialog {
    width: calc(100% - 24px);
    padding: 20px 0 36px;
  }
  #taskTrackerDialog .task-tracker-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  #taskTrackerDialog .task-tracker-panel {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  #taskTrackerDialog #taskTrackerFocusList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #taskTrackerDialog .task-tracker-all-form {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr) 150px 104px;
  }
  #taskTrackerDialog .task-review-toolbar {
    align-items: start;
    flex-wrap: wrap;
  }
}

/* iPad may request a desktop viewport up to 1366px; use touch capability too. */
@media (hover: none) and (pointer: coarse) and (min-width: 681px) and (max-width: 1400px) {
  #taskTrackerDialog .task-tracker-dialog {
    width: calc(100% - 24px);
    padding: 20px 0 36px;
  }
  #taskTrackerDialog .task-tracker-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  #taskTrackerDialog .task-tracker-panel {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  #taskTrackerDialog #taskTrackerFocusList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #taskTrackerDialog .task-tracker-all-form {
    grid-template-columns: minmax(0, 1fr) 150px 110px;
  }
  #taskTrackerDialog .task-tracker-all-form > input:first-child {
    grid-column: 1 / -1;
    width: 100%;
  }
  #taskTrackerDialog .task-tracker-all-form > .custom-select,
  #taskTrackerDialog .task-tracker-all-form > select:first-of-type {
    grid-column: 1;
  }
  #taskTrackerDialog .task-review-toolbar {
    align-items: start;
    flex-wrap: wrap;
  }
}
.task-tracker-group-manager {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 0;
  margin: -6px 0 14px;
}
.task-tracker-group-manager:empty {
  display: none;
}
.task-tracker-group-manager p {
  margin: 0;
  color: var(--task-muted);
  font-size: 12px;
}
.task-tracker-group-manage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--task-line-soft);
  border-radius: 999px;
  background: rgba(247, 248, 245, .035);
  color: #f7f8f5;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}
.task-tracker-group-manage-chip:hover {
  border-color: rgba(82, 212, 227, .44);
  background: rgba(82, 212, 227, .08);
}
.task-tracker-group-manage-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
  padding: 0 9px 0 11px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: transparent;
  color: #f7f8f5;
  font-size: 12px;
  font-weight: 800;
}
.task-tracker-group-manage-open:hover {
  background: rgba(82, 212, 227, .10);
}
.task-tracker-group-manage-open span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-tracker-group-manage-open strong {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: #1c2127;
  background: var(--task-turquoise);
  font-size: 10px;
}
.task-tracker-group-manage-delete {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(247, 248, 245, .12);
  border-radius: 0 999px 999px 0;
  background: rgba(247, 248, 245, .04);
  color: rgba(247, 248, 245, .72);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.task-tracker-group-manage-delete:hover {
  color: #fff;
  background: rgba(240, 92, 92, .28);
}
.task-tracker-inline-form .custom-select-button {
  color: var(--ink-on-dark);
  border-color: rgba(254, 254, 254, .18);
  background: rgba(254, 254, 254, .08);
}
.task-tracker-inline-form .custom-select.open .custom-select-button {
  border-color: rgba(254, 254, 254, .34);
  background: rgba(254, 254, 254, .12);
}
#taskTrackerDialog .task-tracker-inline-form .custom-select-menu {
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(340px, calc(100vw - 32px));
  padding: 6px;
  border-color: rgba(247, 248, 245, .14);
  border-radius: 9px;
  background: #303740;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}
#taskTrackerDialog .task-tracker-inline-form .custom-select-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  height: auto;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #eef2ee;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
}
#taskTrackerDialog .task-tracker-inline-form .custom-select-menu button:hover,
#taskTrackerDialog .task-tracker-inline-form .custom-select-menu button:focus-visible {
  border-color: rgba(82, 212, 227, .28);
  background: rgba(82, 212, 227, .12);
  color: #fff;
  outline: none;
}
#taskTrackerDialog .task-tracker-inline-form .custom-select-menu button.selected {
  border-color: rgba(82, 212, 227, .42);
  background: rgba(82, 212, 227, .18);
  color: #fff;
}
.task-tracker-tabs { position: relative; z-index: 2; display: inline-flex; width: fit-content; gap: 3px; margin-bottom: 12px; padding: 3px; border: 1px solid var(--task-line-soft); border-radius: 8px; background: rgba(247,248,245,.025); pointer-events: auto; }
.task-tracker-tabs button { position: relative; z-index: 1; min-height: 30px; padding: 0 12px; color: var(--task-muted); border: 0; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 500; cursor: pointer; pointer-events: auto; }
.task-tracker-tabs button.active { color: #eafcfc; border: 0; background: rgba(54,198,201,.16); }
.task-review-tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px; border-radius: 999px; color: #172127; background: #52d4e3; font-size: 10px; font-weight: 800; pointer-events: none; }
.task-review-tab-badge[hidden] { display: none; }
.task-review-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.task-review-toolbar[hidden] { display: none; }
.task-review-toolbar button { min-height: 34px; padding: 0 12px; border-color: rgba(82,212,227,.42); background: transparent; }
.task-review-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.task-review-filters button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; color: var(--task-muted); border-color: var(--task-line-soft); background: rgba(247,248,245,.025); font-size: 12px; white-space: nowrap; }
.task-review-filters button.active { color: #f7f8f5; border-color: rgba(82,212,227,.62); background: rgba(37,128,138,.28); }
.task-review-filters button span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #dce4e5; background: rgba(247,248,245,.1); font-size: 10px; font-weight: 800; }
.task-review-filters button.active span { color: #172127; background: #52d4e3; }
.task-review-card { overflow: hidden; border: 1px solid var(--task-line-soft); border-radius: 10px; background: rgba(247,248,245,.035); }
.task-review-card.is-unread { border-color: rgba(82,212,227,.48); background: rgba(82,212,227,.07); }
.task-review-main { display: grid; grid-template-columns: 9px minmax(0,1fr) 20px; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 10px 13px; border: 0; border-radius: 0; background: transparent; text-align: left; }
.task-review-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.task-review-card.is-unread .task-review-dot { background: #52d4e3; box-shadow: 0 0 0 3px rgba(82,212,227,.12); }
.task-review-copy { display: grid; gap: 3px; min-width: 0; }
.task-review-copy strong { overflow: hidden; color: #f7f8f5; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.task-review-copy > span { overflow: hidden; color: var(--task-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.task-review-chevron { color: var(--task-muted); font-size: 18px; transition: transform .16s ease; }
.task-review-main[aria-expanded="true"] .task-review-chevron { transform: rotate(180deg); }
.task-review-details { padding: 0 13px 12px 33px; }
.task-review-details[hidden] { display: none; }
.task-review-details p { margin: 0 0 10px; color: rgba(247,248,245,.78); font-size: 12px; line-height: 1.45; }
.task-review-open { min-height: 34px; padding: 0 14px; color: #eafcfc; border-color: rgba(82,212,227,.55); background: rgba(37,128,138,.22); }
.task-tracker-filters { display: grid; grid-template-columns: minmax(420px, 1fr) 180px; gap: 10px; margin-bottom: 14px; }
.task-tracker-filters-toggle { display: none; }
@media (max-width: 900px), (any-pointer: coarse) {
  #taskTrackerDialog .task-tracker-filters-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0 0 10px; padding: 6px 12px; border: 1px solid #52d4e3; }
  #taskTrackerDialog:not(.task-filters-expanded) #taskTrackerFilters,
  #taskTrackerDialog:not(.task-filters-expanded) #taskTrackerGroupChips,
  #taskTrackerDialog:not(.task-filters-expanded) #taskTrackerReviewFilters { display: none !important; }
}
.task-tracker-filters input, .task-tracker-filters select { width: 100%; height: 38px; min-width: 0; }
.task-tracker-group-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.task-tracker-group-chips button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; color: #f7f8f5; border: 1px solid var(--task-line); background: transparent; font-size: 13px; }
.task-tracker-group-chips button.active { border-color: rgba(54,198,201,.58); background: rgba(54,198,201,.14); }
.task-tracker-group-chips strong, .task-tracker-group-heading span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; color: #1c2127; background: var(--task-turquoise); font-size: 11px; }
.task-tracker-group-chips em { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; color: rgba(247,248,245,.58); border-radius: 999px; font-style: normal; font-size: 15px; }
.task-tracker-group-chips em:hover { color: #fff; background: rgba(247,248,245,.1); }
.task-tracker-list-heading { display: none; }
.task-tracker-list { display: grid; gap: 10px; }
.task-tracker-empty { display: grid; place-items: center; min-height: 104px; margin: 0; color: var(--task-muted); border: 1px dashed var(--task-line); border-radius: 12px; }
.task-tracker-drop-group { display: grid; gap: 8px; padding: 10px; border: 1px solid transparent; border-radius: 12px; transition: border-color .14s ease, background .14s ease; }
.task-tracker-drop-group.is-drag-over { border-color: rgba(82,212,227,.7); background: rgba(82,212,227,.09); }
.task-tracker-drop-list { display: grid; gap: 10px; min-height: 0; }
.task-tracker-drop-list:empty { display: none; }
.task-tracker-group-heading { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0 2px; color: var(--task-muted); }
.task-tracker-group-heading strong { color: #f7f8f5; font-size: 15px; }
.task-tracker-card { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 12px 14px; border: 1px solid var(--task-line-soft); border-radius: 12px; background: rgba(247,248,245,.035); cursor: grab; }
.task-tracker-card:active { cursor: grabbing; }
.task-tracker-card.is-dragging { opacity: .32; }
.task-tracker-card button, .task-tracker-card input, .task-tracker-card select { cursor: auto; }
.task-tracker-card.is-overdue { border-left: 1px solid var(--task-line-soft); }
.task-tracker-card.is-done { opacity: .48; border-left: 1px solid var(--task-line-soft); }
.task-tracker-check { width: 18px; min-width: 18px; height: 18px; padding: 0; border: 1.5px solid rgba(247,248,245,.22); border-radius: 50%; background: transparent; }
.task-tracker-card.is-done .task-tracker-check { border-color: var(--task-green); background: var(--task-green); }
.task-tracker-card-main { display: block; min-width: 0; }
.task-tracker-title-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.task-tracker-title { width: 100%; height: 26px; min-width: 0; padding: 0; border: 0; border-radius: 0; color: #fff; background: transparent; font-size: 13px; font-weight: 500; }
.task-tracker-title:focus { box-shadow: none; border: 0; }
.task-tracker-card.is-done .task-tracker-title { text-decoration: line-through; }
.task-tracker-caption { display: flex; align-items: center; gap: 10px; min-width: 0; color: rgba(174,182,191,.48); font-size: 11px; }
.task-tracker-caption span { white-space: nowrap; }
.task-tracker-caption span + span::before { content: "·"; margin-right: 10px; color: rgba(174,182,191,.3); }
.task-tracker-card-meta { display: grid; grid-template-columns: 180px 140px; gap: 8px; margin-top: 5px; }
.task-tracker-card-meta[hidden] { display: none; }
.task-tracker-card-meta select, .task-tracker-card-meta input { width: 100%; height: 30px; min-width: 0; border-radius: 8px; background: transparent; }
.task-tracker-card-actions { display: flex; align-items: center; gap: 8px; }
.task-tracker-edit, .task-tracker-delete { width: 32px; min-width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; color: var(--task-muted); border: 1px solid transparent; background: transparent; }
.task-tracker-edit svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.task-tracker-edit .warehouse-group-edit-icon {
  width: 25px;
  height: 25px;
  margin: 0;
}
.task-tracker-card.is-editing .task-tracker-edit { color: var(--task-turquoise); border-color: rgba(54,198,201,.35); }
.task-tracker-delete span { position: relative; display: block; width: 14px; height: 14px; }
.task-tracker-delete span::before, .task-tracker-delete span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%,-50%) rotate(45deg); }
.task-tracker-delete span::after { transform: translate(-50%,-50%) rotate(-45deg); }

@media (max-width: 1050px) {
  .task-tracker-workspace, .task-tracker-inline-form, .task-tracker-all-form, .task-tracker-group-tools, .task-tracker-filters { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  #taskTrackerDialog .task-tracker-dialog { width: min(100% - 24px, 1160px); padding-top: 28px; }
  .task-tracker-topbar, .task-tracker-section-head { align-items: flex-start; flex-direction: column; }
  .task-tracker-top-actions { width: 100%; justify-content: space-between; }
  .task-tracker-back { width: auto; max-width: 100%; }
  .task-tracker-brand { gap: 16px; }
  .task-tracker-brand img { width: 138px; height: auto; }
  .task-tracker-card { grid-template-columns: 28px minmax(0, 1fr); }
  .task-tracker-card-actions { grid-column: 2; }
  .task-tracker-card-meta { grid-template-columns: 1fr; }
  .task-tracker-caption { flex-wrap: wrap; row-gap: 2px; }
  .task-review-toolbar { align-items: stretch; flex-direction: column; }
  .task-review-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .task-review-filters button { justify-content: space-between; width: 100%; }
  .task-review-toolbar > #taskTrackerReadAll { width: 100%; }
}

/* Final mobile history card layout: every field owns its height. */
@media (max-width: 760px) {
  #historyDialog .history-table,
  #historyDialog .history-table tbody,
  #historyDialog .history-table tr,
  #historyDialog .history-table td {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #historyDialog .history-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  #historyDialog .history-table tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    overflow: visible !important;
  }

  #historyDialog .history-table td {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    transform: none !important;
    text-align: left !important;
  }

  #historyDialog .history-table td + td {
    padding-top: 2px !important;
  }

  #historyDialog .history-table td::before {
    flex: 0 0 auto !important;
    position: static !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  #historyDialog .history-mobile-value {
    flex: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    font-size: 15px !important;
    line-height: 1.28 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

.stock-issue-dialog {
  width: min(1180px, calc(100vw - 32px));
  display: grid;
  gap: 16px;
}

.stock-issue-body {
  display: grid;
  gap: 12px;
}

.stock-issue-summary {
  display: grid;
  grid-template-columns: 1.2fr .55fr .85fr .85fr 1.3fr;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(24, 32, 41, 0.22);
}

.stock-issue-summary div {
  display: grid;
  gap: 3px;
}

.stock-issue-summary span {
  color: rgba(247, 248, 246, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.stock-issue-summary strong {
  color: var(--ink-on-dark);
  font-size: 16px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

#shipmentStockStatus label:has([data-stock-ignore]) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#shipmentStockStatus [data-stock-ignore] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; }
#missingStockFilterButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1;
  border-radius: 6px;
  padding-inline: 14px;
  white-space: nowrap;
}
.missing-stock-filter-label { min-width: 0; white-space: nowrap; }
#missingStockFilterButton:focus:not(:focus-visible) { outline: none; }
#missingStockFilterButton:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.missing-stock-filter-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; }
.missing-stock-filter-clear svg,
.missing-stock-filter-clear img { display: block; width: 22px; height: 22px; }
.stock-issue-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.stock-document-dialog {
  width: min(760px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
}

.shipment-document-type-dialog {
  width: 100%;
  display: grid;
  gap: 16px;
}

#shipmentDocumentTypeDialog {
  width: min(680px, calc(100vw - 32px)) !important;
  max-width: min(680px, calc(100vw - 32px)) !important;
  padding: 0 !important;
}

#shipmentDocumentTypeDialog .shipment-document-type-dialog {
  padding: 22px 28px 28px !important;
  border-radius: 12px !important;
}

#shipmentDocumentTypeDialog .shipment-document-type-dialog > header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  margin: 0 !important;
}

#shipmentDocumentTypeDialog .shipment-document-type-dialog > header h2 {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
}

.shipment-document-type-dialog p {
  margin: 0;
  color: rgba(247, 248, 246, 0.78);
  font-size: 16px;
  line-height: 1.35;
}

.shipment-document-number-field {
  display: grid;
  gap: 7px;
  margin: 0;
  color: rgba(247, 248, 246, 0.78);
  font-size: 15px;
  font-weight: 800;
}

.shipment-document-number-field span {
  display: inline;
  color: rgba(247, 248, 246, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.shipment-document-number-field input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  font-size: 17px;
}

.shipment-document-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.shipment-document-type-options button {
  min-height: 58px;
  border: 1px solid rgba(82, 212, 227, 0.45);
  border-radius: 10px;
  background: rgba(82, 212, 227, 0.12);
  color: var(--ink-on-dark);
  font-size: 18px;
  font-weight: 900;
}

.shipment-document-type-options [data-shipment-document-type="SPEC"] {
  grid-column: 1 / -1;
}

.shipment-document-type-options button:hover,
.shipment-document-type-options button:focus-visible {
  border-color: rgba(119, 188, 31, 0.9);
  background: rgba(119, 188, 31, 0.18);
}

.stock-document-dialog p {
  margin: 0;
  color: rgba(247, 248, 246, 0.78);
  font-size: 16px;
  line-height: 1.35;
}

.stock-document-dialog textarea {
  min-height: 92px;
  resize: vertical;
}

.stock-document-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

/* Keep the document prerequisite dialog compact and visually balanced. */
#stockDocumentDialog {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: min(760px, calc(100vw - 32px)) !important;
  padding: 0 !important;
}

#stockDocumentDialog .stock-document-dialog {
  width: 100% !important;
  max-width: 100% !important;
  padding: 22px 24px 24px !important;
  gap: 16px !important;
}

#stockDocumentDialog .stock-document-dialog > header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
}

#stockDocumentDialog .stock-document-dialog > header h2 {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
}

#stockDocumentDialog .stock-document-dialog > p {
  max-width: 680px;
}

#stockDocumentDialog .stock-document-dialog > label {
  display: grid;
  gap: 7px;
  margin: 0;
}

#stockDocumentDialog .stock-document-dialog textarea {
  width: 100%;
  min-height: 88px;
  box-sizing: border-box;
}

#stockDocumentDialog .stock-document-actions {
  grid-template-columns: minmax(0, 1fr) minmax(120px, .65fr) minmax(0, 1.45fr);
  width: 100%;
  gap: 10px;
}

#stockDocumentDialog .stock-document-actions button {
  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 0 14px;
  line-height: 1.15;
  white-space: normal;
}

.document-uploader-attention {
  outline: 3px solid rgba(82, 212, 227, 0.75);
  outline-offset: 4px;
  border-radius: 12px;
  animation: documentAttentionPulse 1.15s ease-in-out infinite alternate;
}

.field-error {
  border-color: #f05c5c !important;
  box-shadow: 0 0 0 3px rgba(240, 92, 92, 0.18) !important;
}

@keyframes documentAttentionPulse {
  from { outline-color: rgba(82, 212, 227, 0.50); }
  to { outline-color: rgba(119, 188, 31, 0.88); }
}

@media (max-width: 760px) {
  #stockIssueDialog,
  #stockDocumentDialog,
  #shipmentDocumentTypeDialog {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 10px;
  }

  .stock-issue-dialog,
  .stock-document-dialog,
  .shipment-document-type-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    border-radius: 12px;
    padding: 14px;
  }

  .stock-issue-summary {
    grid-template-columns: 1fr;
  }

  .stock-document-actions,
  .shipment-document-type-options,
  .stock-issue-actions {
    grid-template-columns: 1fr;
  }

  .shipment-document-type-options button,
  .stock-document-actions button,
  .stock-issue-actions button,
  .stock-document-dialog textarea,
  .stock-issue-dialog select {
    width: 100%;
  }

  #stockDocumentDialog .stock-document-dialog {
    padding: 16px !important;
    gap: 14px !important;
  }

  #stockDocumentDialog .stock-document-dialog > header h2 {
    font-size: 24px !important;
  }

  #stockDocumentDialog .stock-document-actions {
    grid-template-columns: 1fr;
  }
}

/* Final stock transfer confirmation layout. */
#stockIssueDialog {
  width: min(1280px, calc(100vw - 56px)) !important;
  max-width: min(1280px, calc(100vw - 56px)) !important;
  padding: 0 !important;
}

#stockIssueDialog .stock-issue-dialog {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding: 22px 26px 24px !important;
  border-radius: 12px !important;
}

#stockIssueDialog .stock-issue-dialog > header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 0 6px !important;
}

#stockIssueDialog .stock-issue-dialog > header h2 {
  display: block !important;
  margin: 0 !important;
  color: var(--ink-on-dark) !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
}

#stockIssueDialog .stock-issue-body {
  display: grid !important;
  gap: 12px !important;
}

#stockIssueDialog .stock-issue-summary {
  display: grid !important;
  grid-template-columns: .7fr .7fr 1fr 1fr 1.2fr !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  background: rgba(24, 32, 41, 0.22) !important;
}

#stockIssueDialog .stock-issue-summary div,
#stockIssueDialog .stock-issue-summary label {
  min-width: 0 !important;
}

#stockIssueDialog .stock-issue-summary div {
  display: grid !important;
  grid-template-rows: auto 34px !important;
  gap: 5px !important;
  align-items: center !important;
}

#stockIssueDialog .stock-issue-summary label {
  display: grid !important;
  grid-template-rows: auto 34px !important;
  gap: 5px !important;
  margin: 0 !important;
}

#stockIssueDialog .stock-issue-summary input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

#stockIssueDialog .stock-issue-summary strong {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.1 !important;
}

.stock-issue-candidates {
  display: grid;
  gap: 8px;
}

.stock-issue-preview {
  padding: 10px 12px;
  border: 1px solid rgba(119, 188, 31, 0.44);
  border-radius: 8px;
  background: rgba(119, 188, 31, 0.12);
  color: #f4f8ef;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.stock-issue-candidate {
  display: grid;
  grid-template-columns: 34px .9fr .9fr minmax(180px, 1.4fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(82, 212, 227, 0.26);
  border-radius: 9px;
  background: rgba(24, 32, 41, 0.16);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stock-issue-candidate.selected {
  border-color: rgba(119, 188, 31, 0.85);
}

.stock-issue-candidate small {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(119, 188, 31, 0.2);
  color: #b9f06d;
  font-size: 11px;
  font-weight: 900;
}

.stock-issue-candidate span,
.stock-issue-candidate mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(228, 229, 229, 0.14);
  color: var(--ink-on-dark);
  font-style: normal;
  font-weight: 900;
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}

.stock-issue-candidate strong,
.stock-issue-candidate em,
.stock-issue-candidate b {
  min-width: 0;
  color: var(--ink-on-dark);
  font-style: normal;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.stock-issue-candidate em {
  color: rgba(247, 248, 246, 0.72);
}

.stock-issue-empty {
  padding: 12px 14px;
  border: 1px dashed rgba(82, 212, 227, 0.44);
  border-radius: 9px;
  color: rgba(247, 248, 246, 0.78);
  font-weight: 800;
}

.stock-issue-skip-reason {
  padding: 12px;
  border: 1px solid rgba(255, 184, 77, 0.42);
  border-radius: 8px;
  background: rgba(255, 184, 77, 0.08);
}

.stock-issue-skip-reason textarea {
  min-height: 82px;
  resize: vertical;
}

#stockIssueDialog .stock-issue-manual {
  display: grid;
  gap: 10px;
}

#stockIssueDialog .stock-issue-dialog > label,
#stockIssueDialog .stock-issue-manual > span {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  color: rgba(247, 248, 246, 0.74) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.stock-issue-location-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stock-issue-location-buttons button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(82, 212, 227, 0.35);
  border-radius: 9px;
  background: rgba(24, 32, 41, 0.18);
  color: var(--ink-on-dark);
  font-weight: 900;
}

.stock-issue-location-buttons button.active {
  border-color: rgba(119, 188, 31, 0.9);
  background: rgba(119, 188, 31, 0.18);
}

.stock-issue-manual-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
}

.stock-issue-manual-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(82, 212, 227, 0.26);
  border-radius: 9px;
  background: rgba(24, 32, 41, 0.16);
  color: var(--ink-on-dark);
  text-align: left;
  cursor: pointer;
}

.stock-issue-manual-row.selected {
  border-color: rgba(119, 188, 31, 0.9);
  background: rgba(119, 188, 31, 0.16);
}

.stock-issue-manual-row strong,
.stock-issue-manual-row span,
.stock-issue-manual-row em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.stock-issue-manual-row span,
.stock-issue-manual-row em {
  color: rgba(247, 248, 246, 0.72);
  font-style: normal;
  font-weight: 800;
}

.stock-issue-manual-row mark {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(228, 229, 229, 0.14);
  color: var(--ink-on-dark);
  font-weight: 900;
}

#stockIssueDialog #stockIssueSelect,
#stockIssueDialog #stockIssueManualSearch {
  width: 100% !important;
  min-height: 48px !important;
  color: var(--ink-on-dark) !important;
  background-color: #55606b !important;
  border-color: rgba(228, 229, 229, 0.24) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

#stockIssueDialog .stock-issue-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}

#stockIssueDialog .stock-issue-actions button {
  min-width: 132px !important;
  height: 46px !important;
}

@media (max-width: 760px) {
  #stockIssueDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 10px !important;
  }

  #stockIssueDialog .stock-issue-dialog {
    padding: 14px !important;
  }

  #stockIssueDialog .stock-issue-summary,
  .stock-issue-candidate,
  .stock-issue-manual-row {
    grid-template-columns: 1fr !important;
  }

  .stock-issue-candidate small {
    justify-self: start;
  }

  .stock-issue-manual-rows {
    grid-template-columns: 1fr;
    max-height: 260px;
  }

  .stock-issue-manual-row mark {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }

  #stockIssueDialog .stock-issue-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #stockIssueDialog .stock-issue-actions button {
    width: 100% !important;
  }
}

/* Stock balance pills must keep text inside the oval. */
.stock-item-summary-balance,
.stock-balance-pill,
.stock-summary-balance,
.stock-issue-candidate mark {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.stock-item-summary-balance {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: 100% !important;
  min-height: 38px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: clamp(11px, 1.4vw, 16px) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

/* Final layout for the document gate in the stock shipment flow. */
#stockDocumentDialog[open] {
  width: min(680px, calc(100vw - 24px)) !important;
  max-width: min(680px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  margin: auto !important;
  padding: 0 !important;
}

#stockDocumentDialog[open] .stock-document-dialog {
  width: 100% !important;
  max-width: none !important;
  padding: 20px 22px 22px !important;
  gap: 14px !important;
}

#stockDocumentDialog[open] .stock-document-dialog textarea {
  min-height: 76px !important;
}

#stockDocumentDialog[open] .stock-document-actions {
  grid-template-columns: minmax(0, 1fr) minmax(96px, .62fr) minmax(0, 1.35fr) !important;
  gap: 8px !important;
}

#stockDocumentDialog[open] .stock-document-actions button {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}

@media (max-width: 620px) {
  #stockDocumentDialog[open] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  #stockDocumentDialog[open] .stock-document-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Compact document step used by the double-click stock shipment flow. */
#stockDocumentDialog[open] {
  width: min(620px, calc(100vw - 24px)) !important;
  max-width: min(620px, calc(100vw - 24px)) !important;
}

#stockDocumentDialog[open] .stock-document-dialog {
  padding: 16px 18px 18px !important;
  gap: 10px !important;
}

#stockDocumentDialog[open] .stock-document-dialog > header {
  gap: 12px !important;
}

#stockDocumentDialog[open] .stock-document-dialog > header h2 {
  font-size: 20px !important;
  line-height: 1.2 !important;
}

#stockDocumentDialog[open] .stock-document-dialog > p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#stockDocumentDialog[open] .stock-document-dialog > label {
  gap: 5px !important;
  font-size: 12px !important;
}

/* Unified mobile application layer. Keep new and existing content equally usable. */
.mobile-filters-toggle {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  button,
  input,
  select,
  textarea,
  .custom-select-trigger {
    max-width: 100%;
  }

  .topbar {
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .topbar-nav,
  .nav-group {
    gap: 6px !important;
  }

  .topbar-nav button,
  .spec-workbar button,
  .task-tracker-launch,
  .metric-card,
  .mobile-card button,
  .mobile-card summary,
  dialog button,
  dialog .tab,
  dialog input,
  dialog select,
  dialog .custom-select-trigger {
    min-height: 44px !important;
  }

  .filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .mobile-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(82, 212, 227, 0.55);
    background: rgba(37, 128, 138, 0.18);
    color: var(--ink-on-dark);
    font-weight: 900;
  }

  .filters:not(.mobile-filters-expanded) > label,
  .filters:not(.mobile-filters-expanded) > .period-filter {
    display: none !important;
  }

  .filters > label,
  .period-filter,
  .period-filter > label,
  .period-filter > button,
  .filters .custom-select,
  .filters .custom-select-trigger,
  .filters input,
  .filters select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .period-filter {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .spec-workbar,
  .spec-workbar-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  .spec-workbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .spec-workbar-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .spec-workbar-label {
    grid-column: 1 / -1;
  }

  .task-tracker-launch {
    width: 100% !important;
    margin: 0 !important;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  .metric-card {
    min-width: 0 !important;
    padding: 9px 10px !important;
  }

  .mobile-card,
  .stock-card,
  .stock-mobile-card,
  .warehouse-summary-card,
  .history-mobile-card,
  .reference-table tbody tr,
  .stock-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 190px;
  }

  .mobile-card-footer,
  .mobile-line-actions,
  .reference-actions,
  .stock-row-actions {
    gap: 8px !important;
  }

  .mobile-card-footer button,
  .mobile-line-actions button,
  .reference-actions button,
  .stock-row-actions button,
  .stock-action-icon-button,
  .document-badge,
  [data-documents-row] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.mobile-shipment-open {
    overflow: hidden !important;
  }

  body.mobile-shipment-open .side-pane {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: auto !important;
  }

  body.mobile-shipment-open #shipmentPane {
    min-height: 100dvh !important;
    max-height: none !important;
    padding: 12px !important;
  }

  body.mobile-shipment-open .shipment-pane-title-row {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 8px 0 10px;
    background: var(--panel, #424c56);
  }

  body.mobile-shipment-open .mobile-close-shipment {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
  }

  .stock-page-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: auto !important;
    padding: 2px 2px 8px !important;
  }

  .stock-page-tabs > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-height: 44px !important;
    max-width: 82vw !important;
  }

  dialog[open] {
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }

  dialog[open] > header,
  dialog[open] [class$="-dialog"] > header {
    position: sticky;
    top: 0;
    z-index: 8;
  }

  .reference-dialog,
  .history-dialog,
  .settings-dialog,
  .warehouse-dialog,
  .stock-dialog,
  .documents-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .reference-controls,
  .reference-toolbar,
  .warehouse-toolbar,
  .stock-toolbar {
    min-width: 0 !important;
  }

  .reference-table td,
  .reference-table th,
  .history-table td,
  .history-table th {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #stockDocumentDialog[open] .stock-document-actions button {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  #settingsDialog button,
  #settingsDialog input,
  #settingsDialog select,
  #settingsDialog .custom-select-trigger,
  #usersDialog button,
  #usersDialog input,
  #usersDialog select,
  #historyDialog button,
  #referencesDialog button,
  #referencesDialog input,
  #referencesDialog select {
    height: 44px !important;
    min-height: 44px !important;
    max-height: none !important;
  }

  #settingsDialog .settings-dialog > header button,
  #settingsDialog .settings-section > button,
  #settingsDialog .settings-actions button,
  #settingsDialog .settings-section input,
  #settingsDialog .settings-section select,
  #settingsDialog .settings-section .custom-select-button {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

@media (max-width: 390px) {
  .spec-workbar-group,
  .metrics {
    grid-template-columns: 1fr !important;
  }

  .app-brand h1 {
    font-size: 17px !important;
  }

  .mobile-card {
    padding: 12px !important;
  }
}

/* Mobile user permissions need their own labels because the desktop table header is hidden. */
@media (max-width: 760px) {
  #usersDialog .user-active-toggle,
  #usersDialog .user-spec-toggle,
  #usersDialog .user-stock-permissions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-content: stretch !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(228, 229, 229, .12) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  #usersDialog .user-active-toggle::before,
  #usersDialog .user-spec-toggle::before,
  #usersDialog .user-stock-permissions::before {
    grid-column: 1 / -1;
    display: block;
    margin-bottom: 2px;
    color: rgba(247, 248, 246, .68);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
  }

  #usersDialog .user-active-toggle::before {
    content: "Доступ к системе";
  }

  #usersDialog .user-spec-toggle::before {
    content: "Работа со спецификациями";
  }

  #usersDialog .user-stock-permissions::before {
    content: "Редактирование складов";
  }
  #usersDialog .user-tracking-toggle.user-stock-permissions::before {
    content: "Редактирование трекинга";
  }

  #usersDialog .user-stock-permissions > label {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-content: start !important;
    gap: 10px !important;
  }

  #usersDialog .user-stock-permissions--all > strong {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Keep the mobile users title bar intact; only the body below it scrolls. */
@media (max-width: 760px) {
  #usersDialog {
    padding: 8px !important;
    overflow: hidden !important;
  }

  #usersDialog .users-dialog#usersForm {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 12px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  #usersDialog .users-dialog#usersForm > header {
    position: relative !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(228, 229, 229, .14) !important;
    background: #414a54 !important;
  }

  #usersDialog .users-dialog#usersForm > header h2 {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(20px, 6vw, 24px) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  #usersDialog .users-dialog#usersForm > header button {
    align-self: center !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 92px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  #usersDialog .user-create {
    min-height: 0 !important;
  }

  #usersDialog .users-list {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* Mobile task titles grow with their text and never run under the actions. */
.task-tracker-title {
  display: block;
  field-sizing: fixed;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.task-tracker-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 680px) {
  #taskTrackerDialog .task-tracker-topbar {
    align-items: stretch !important;
  }

  #taskTrackerDialog .task-tracker-brand {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
  }

  #taskTrackerDialog .task-tracker-brand img {
    width: 150px !important;
    height: auto !important;
    align-self: center !important;
  }

  #taskTrackerDialog .task-tracker-brand h2 {
    align-self: center !important;
    margin: 0 !important;
    font-size: 27px !important;
    line-height: 1.1 !important;
  }

  #taskTrackerDialog .task-tracker-card-main,
  #taskTrackerDialog .task-tracker-title-row {
    width: 100% !important;
    min-width: 0 !important;
  }

  #taskTrackerDialog .task-tracker-title {
    field-sizing: content !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    padding: 4px 0 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
  }

  #taskTrackerDialog .task-tracker-card-actions {
    grid-column: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  #taskTrackerDialog .task-tracker-card-footer {
    min-height: 36px !important;
    margin-top: 1px !important;
  }

  #taskTrackerDialog .task-tracker-caption {
    flex: 1 1 auto !important;
  }

  #taskTrackerDialog .task-tracker-edit,
  #taskTrackerDialog .task-tracker-delete {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
}

/* Restore the original compact task geometry on wide screens. */
@media (min-width: 681px) {
  #taskTrackerDialog .task-tracker-card {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 92px 12px 14px !important;
    align-items: center !important;
  }

  #taskTrackerDialog .task-tracker-card-main,
  #taskTrackerDialog .task-tracker-title-row {
    min-height: 0 !important;
    height: auto !important;
  }

  #taskTrackerDialog .task-tracker-title {
    field-sizing: fixed !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    line-height: 26px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #taskTrackerDialog .task-tracker-card-footer {
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }

  #taskTrackerDialog .task-tracker-card-actions,
  #taskTrackerDialog .task-tracker-caption {
    min-height: 0 !important;
    height: 32px !important;
  }

  #taskTrackerDialog .task-tracker-card-actions {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 380px) {
  #taskTrackerDialog .task-tracker-brand {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #taskTrackerDialog .task-tracker-brand img {
    width: 132px !important;
  }

  #taskTrackerDialog .task-tracker-brand h2 {
    font-size: 24px !important;
  }
}

#stockDocumentDialog[open] .stock-document-dialog textarea {
  min-height: 68px !important;
  height: 68px !important;
  padding: 9px 11px !important;
  font-size: 13px !important;
}

#stockDocumentDialog[open] .stock-document-actions button {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

/* One fixed numeric column in every mobile warehouse summary card. */
@media (max-width: 760px) {
  #warehouseDialog .warehouse-table--summary .warehouse-mobile-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #warehouseDialog .warehouse-table--summary .warehouse-mobile-label {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #warehouseDialog .warehouse-table--summary .warehouse-mobile-value,
  #warehouseDialog .warehouse-table--summary .warehouse-need-button,
  #warehouseDialog .warehouse-table--summary .warehouse-current-stock {
    grid-column: 2 !important;
    justify-self: stretch !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }

  #warehouseDialog .warehouse-table--summary .warehouse-equipment .warehouse-mobile-label,
  #warehouseDialog .warehouse-table--summary .warehouse-equipment .warehouse-equipment-name {
    grid-column: 1 / -1 !important;
  }
}

/* Touch-friendly metric filters and readable result cards on phones. */
@media (max-width: 760px) {
  #metricDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #metricDialog .metric-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #metricDialog .metric-dialog > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 4px 0 10px !important;
    background: var(--surface-panel, #424c56) !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.14) !important;
  }

  #metricDialog .metric-dialog > header h2 {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  #metricDialog .metric-dialog > header button {
    justify-self: end !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  #metricDialog .metric-list {
    align-content: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    padding: 12px 0 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #metricDialog .metric-money {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    min-height: 0 !important;
    gap: 2px !important;
  }

  #metricDialog .metric-money button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  #metricDialog .metric-money span {
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #metricDialog .metric-money strong {
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-variant-numeric: tabular-nums !important;
  }

  #metricDialog .money-detail h3,
  #metricDialog .metric-section-title {
    margin: 2px 0 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  #metricDialog .metric-detail-table,
  #metricDialog .metric-detail-table tbody {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  #metricDialog .metric-detail-table tr {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    background: #dfe4e1 !important;
    box-sizing: border-box !important;
  }

  #metricDialog .metric-detail-table tr:nth-child(even) {
    background: #c8d0cb !important;
  }

  #metricDialog .metric-detail-table td,
  #metricDialog .money-detail-table td {
    display: grid !important;
    grid-template-columns: minmax(98px, 36%) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #metricDialog .metric-detail-table td::before,
  #metricDialog .money-detail-table td::before {
    content: attr(data-label) !important;
    display: block !important;
    color: #5b656e !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }
}

/* The full specification list is a card stream on phones, not a sized table. */
@media (max-width: 760px) {
  #metricDialog .metric-spec-list,
  #metricDialog .metric-spec-list tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    table-layout: auto !important;
    contain: none !important;
    content-visibility: visible !important;
  }

  #metricDialog .metric-spec-list tbody {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    gap: 12px !important;
  }

  #metricDialog .metric-spec-list tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 8px !important;
    overflow: visible !important;
    contain: none !important;
    content-visibility: visible !important;
  }

  #metricDialog .metric-spec-list td {
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Main mobile filters must never inherit the desktop six-column placement. */
@media (max-width: 760px) {
  .app-shell > .filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .app-shell > .filters > .mobile-filters-toggle,
  .app-shell > .filters > label,
  .app-shell > .filters > .period-filter,
  .app-shell > .filters > .spec-workbar,
  .app-shell > .filters > .task-tracker-launch {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .app-shell > .filters > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .app-shell > .filters .custom-select,
  .app-shell > .filters .custom-select-trigger,
  .app-shell > .filters .custom-select-button,
  .app-shell > .filters input,
  .app-shell > .filters select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-shell > .filters > .period-filter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .app-shell > .filters > .period-filter > * {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Settings header stays inset and balanced inside the mobile dialog. */
@media (max-width: 760px) {
  #settingsDialog[open] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #settingsDialog[open] .settings-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  #settingsDialog[open] .settings-dialog > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 10px 14px !important;
    border-bottom: 1px solid rgba(228, 229, 229, 0.12) !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #settingsDialog[open] .settings-dialog > header h2 {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #settingsDialog[open] .settings-dialog > header button {
    justify-self: end !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 2px solid rgba(247, 248, 246, .92) !important;
    border-radius: 10px !important;
    background: #303842 !important;
    color: #f7f8f6 !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  #settingsDialog[open] #settingsForm {
    max-height: calc(100dvh - 132px) !important;
    padding: 0 2px 8px 0 !important;
  }
}

@media (max-width: 390px) {
  #settingsDialog[open] .settings-dialog > header h2 {
    font-size: 22px !important;
  }

  #settingsDialog[open] .settings-dialog > header button {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    padding-inline: 8px !important;
    font-size: 13px !important;
  }
}

/* Warehouse summary cards always show what each mobile value means. */
@media (max-width: 760px) {
  #warehouseDialog .warehouse-table--summary .warehouse-mobile-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #warehouseDialog .warehouse-table--summary .warehouse-mobile-label {
    display: block !important;
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    color: #5b656e !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #warehouseDialog .warehouse-table--summary .warehouse-mobile-value,
  #warehouseDialog .warehouse-table--summary .warehouse-need-button,
  #warehouseDialog .warehouse-table--summary .warehouse-current-stock {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    text-align: center !important;
  }

  #warehouseDialog .warehouse-table--summary .warehouse-equipment .warehouse-mobile-label,
  #warehouseDialog .warehouse-table--summary .warehouse-equipment .warehouse-equipment-name {
    grid-column: 1 / -1 !important;
  }
}

/* Compact action dialogs should follow their content size; avoid broad full-screen dialog overrides. */
#stockTransferDialog[open] {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: min(560px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#stockTransferDialog[open] .stock-transfer-dialog {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
  margin: 0 !important;
  padding: 20px 22px 22px !important;
  gap: 14px !important;
  overflow-y: auto !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

#stockTransferDialog[open] .dialog-panel.stock-transfer-dialog {
  min-height: 0 !important;
}

#stockTransferDialog[open] .stock-transfer-dialog > header {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(228, 229, 229, 0.12) !important;
  box-sizing: border-box !important;
}

#stockTransferDialog[open] .stock-transfer-dialog > header h2 {
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

#stockTransferDialog[open] .stock-transfer-dialog > header button {
  justify-self: end !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 2px solid rgba(247, 248, 246, .92) !important;
  border-radius: 10px !important;
  background: #303842 !important;
  color: #f7f8f6 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#stockTransferDialog[open] .stock-transfer-dialog > p {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#stockTransferDialog[open] .stock-transfer-dialog .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 16px !important;
}

#stockTransferDialog[open] .stock-transfer-dialog label {
  min-width: 0 !important;
}

#stockTransferDialog[open] .stock-transfer-dialog input,
#stockTransferDialog[open] .stock-transfer-dialog select,
#stockTransferDialog[open] .stock-transfer-dialog .custom-select,
#stockTransferDialog[open] .stock-transfer-dialog .custom-select-button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  box-sizing: border-box !important;
}

#stockTransferDialog[open] .stock-transfer-dialog .primary-action {
  justify-self: end !important;
  width: auto !important;
  min-width: 150px !important;
  height: 46px !important;
  margin: 0 !important;
}

@media (max-width: 560px) {
  #stockTransferDialog[open] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #stockTransferDialog[open] .stock-transfer-dialog {
    max-height: calc(100dvh - 24px) !important;
    padding: 16px !important;
  }

  #stockTransferDialog[open] .stock-transfer-dialog > header h2 {
    font-size: 22px !important;
  }

  #stockTransferDialog[open] .stock-transfer-dialog > header button {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 15px !important;
  }

  #stockTransferDialog[open] .stock-transfer-dialog .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #stockTransferDialog[open] .stock-transfer-dialog .primary-action {
    justify-self: stretch !important;
    width: 100% !important;
  }
}

/* Stock pages stay fully visible instead of running outside the phone screen. */
@media (max-width: 760px) {
  #stockDialog .stock-page-tabs,
  #stockDialog .flexcom-toolbar .stock-page-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    box-sizing: border-box !important;
  }

  #stockDialog .stock-page-tabs > *,
  #stockDialog .stock-page-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
    scroll-snap-align: none !important;
  }

  #stockDialog .stock-page-tabs::before,
  #stockDialog .stock-page-tabs::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 360px) {
  #stockDialog .stock-page-tabs,
  #stockDialog .flexcom-toolbar .stock-page-tabs {
    gap: 6px !important;
  }

  #stockDialog .stock-page-tab {
    padding-inline: 7px !important;
    font-size: 14px !important;
  }
}

/* Warehouse item cards: keep editable content readable on light mobile rows. */
@media (max-width: 760px) {
  #stockDialog .stock-page-table tbody tr:not(.stock-add-trigger-row) {
    color: #17202a !important;
  }

  #stockDialog .stock-page-table tbody tr:not(.stock-add-trigger-row) input,
  #stockDialog .stock-page-table tbody tr:not(.stock-add-trigger-row) textarea {
    color: #17202a !important;
    caret-color: #17202a !important;
  }

  #stockDialog .stock-page-table tbody tr:not(.stock-add-trigger-row) input::placeholder,
  #stockDialog .stock-page-table tbody tr:not(.stock-add-trigger-row) textarea::placeholder {
    color: #68737c !important;
    opacity: 1 !important;
  }

  #stockDialog .stock-page-table tbody tr:not(.stock-add-trigger-row) td:nth-child(3) input::placeholder {
    color: #59656e !important;
    font-weight: 700 !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-trigger-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: #dfe4e1 !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-trigger-row td {
    display: none !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-trigger-row .stock-select-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
  }

  #stockDialog .stock-add-trigger-row .stock-add-inline-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "title title"
      "desc desc"
      "opening actions" !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-row td:nth-child(4) {
    grid-area: opening !important;
    display: block !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-row td:nth-child(8) {
    display: none !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-row td:nth-child(9) {
    width: auto !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  #stockDialog .stock-page-table tbody tr.stock-add-row .stock-number-input {
    min-height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(37, 128, 138, 0.55) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.48) !important;
  }
}

/* Metric filter results: long values must grow the card instead of overlapping. */
@media (max-width: 760px) {
  #metricDialog .metric-detail-table,
  #metricDialog .money-detail-table,
  #metricDialog .metric-detail-table tbody,
  #metricDialog .money-detail-table tbody {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #metricDialog .metric-detail-table tr,
  #metricDialog .money-detail-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  #metricDialog .metric-detail-table td,
  #metricDialog .money-detail-table td {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    align-self: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #metricDialog .metric-detail-table td::before,
  #metricDialog .money-detail-table td::before {
    position: static !important;
    align-self: start !important;
    margin: 0 !important;
  }
}

/* Keep this last: collapsed filters must beat every mobile layout override. */
@media (max-width: 760px) {
  .app-shell > .filters:not(.mobile-filters-expanded) > label,
  .app-shell > .filters:not(.mobile-filters-expanded) > .period-filter {
    display: none !important;
  }

  .app-shell > .filters:not(.mobile-filters-expanded) > .mobile-filters-toggle {
    display: flex !important;
  }
}

/* Mobile warehouse names shrink by content length instead of being clipped. */
@media (max-width: 760px) {
  #stockDialog .stock-page-table td:nth-child(2) .stock-equipment-name {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  #stockDialog .stock-page-table .stock-equipment-name--lg {
    font-size: 20px !important;
  }

  #stockDialog .stock-page-table .stock-equipment-name--md {
    font-size: 17px !important;
  }

  #stockDialog .stock-page-table .stock-equipment-name--sm {
    font-size: 14px !important;
  }

  #stockDialog .stock-page-table .stock-equipment-name--xs {
    font-size: 12px !important;
  }
}

.stock-mobile-readable-value {
  display: none;
}

@media (min-width: 921px) and (max-width: 1360px) {
  #stockDialog .stock-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(320px, 52dvh) auto;
    overflow-y: auto;
  }

  #stockDialog .stock-ledger-panel,
  #stockDialog .stock-movement-panel {
    min-width: 0;
  }

  #stockDialog .stock-page-table .stock-col-description,
  #stockDialog .stock-page-table th:nth-child(3),
  #stockDialog .stock-page-table td:nth-child(3) {
    width: min(var(--stock-page-description-width, 32%), 150px) !important;
  }

  #stockDialog .stock-page-table th:nth-child(n+4):nth-child(-n+8),
  #stockDialog .stock-page-table td:nth-child(n+4):nth-child(-n+8) {
    min-width: 64px;
  }
}

/* On phones the warehouse text reads in full; tapping switches to editing. */
@media (max-width: 760px) {
  #stockDialog .stock-page-table .stock-mobile-readable-cell {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #stockDialog .stock-page-table .stock-mobile-readable-value {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: #121922 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    letter-spacing: 0 !important;
  }

  #stockDialog .stock-page-table .stock-mobile-readable-value--equipment {
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.14 !important;
  }

  #stockDialog .stock-page-table .stock-mobile-readable-value--description {
    color: #26323b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
  }

  #stockDialog .stock-page-table .stock-mobile-readable-cell > input {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 34px !important;
    opacity: 0 !important;
    cursor: text !important;
  }

  #stockDialog .stock-page-table .stock-mobile-readable-cell:focus-within > .stock-mobile-readable-value {
    display: none !important;
  }

  #stockDialog .stock-page-table .stock-mobile-readable-cell:focus-within > input {
    position: static !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(37, 128, 138, 0.65) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.46) !important;
    opacity: 1 !important;
  }
}

/* Mobile stock history keeps dates and action icons in separate columns. */
@media (max-width: 760px) {
  #stockDialog .stock-history-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 68px !important;
    grid-template-areas:
      "heading actions"
      "note note" !important;
    align-items: start !important;
    gap: 6px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 10px 10px 10px 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #stockDialog .stock-history-row > div:first-child {
    grid-area: heading !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #stockDialog .stock-history-row > div:first-child strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #stockDialog .stock-history-row > div:first-child span {
    white-space: nowrap !important;
    text-align: right !important;
  }

  #stockDialog .stock-history-row > p {
    grid-area: note !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #stockDialog .stock-history-row > .stock-history-actions {
    position: static !important;
    inset: auto !important;
    grid-area: actions !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: 68px !important;
    min-width: 68px !important;
    margin: 0 !important;
  }

  #stockDialog .stock-history-actions .stock-action-icon-button {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
}

/* Last word for small action modals: they must stay compact like confirmation dialogs. */
#stockTransferDialog,
#stockTransferDialog[open] {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: min(760px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Tracking module */
.spec-workbar-modules {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}
.tracking-launch {
  width: auto;
  min-width: 92px;
  height: 32px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--brand-orange);
  background: var(--brand-yellow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.tracking-launch:hover,
.tracking-launch:focus-visible { border-color: var(--brand-orange); background: var(--brand-orange); color: var(--ink); }

#trackingDialog {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: 100vw;
  height: auto;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: #2d333b;
}
.tracking-dialog {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100dvh;
  padding: 24px;
  box-sizing: border-box;
}
.tracking-location-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid rgba(228, 229, 229, .14);
  border-radius: 7px;
  background: rgba(24, 32, 41, .28);
}
.tracking-location-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(247, 248, 246, .72);
  font-size: 14px;
  font-weight: 800;
}
.tracking-location-tabs button b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  font-size: 11px;
}
.tracking-location-tabs button.active b { background: rgba(37, 44, 52, .14); }
.tracking-location-tabs button.active {
  border-color: #ffd206;
  background: #ffd206;
  color: #252c34;
}
.tracking-filters {
  display: grid;
  grid-template-columns: 165px 190px 280px 220px 220px 150px;
  align-items: end;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}
.tracking-filters label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  color: rgba(247, 248, 246, .72);
  font-size: 12px;
  font-weight: 800;
}
.tracking-filters select,
.tracking-filters input,
.tracking-filters > button {
  height: 42px !important;
  min-height: 42px !important;
}
.tracking-filters .custom-select,
.tracking-filters .custom-select-button,
.tracking-filter-date-entry { width: 100%; height: 42px !important; min-height: 42px !important; }
.tracking-filters .custom-select-button { padding-top: 0; padding-bottom: 0; }
.tracking-filters .custom-select-button::after { top: 9px; }
.tracking-filters select,
.tracking-filters input { width: 100%; }
.tracking-filters > button { padding: 0 16px; line-height: 1; white-space: nowrap; }
.tracking-filter-date-entry { width: 100%; min-width: 0; }
.tracking-search-filter { display: none !important; }
@media (min-width: 761px) and (max-width: 1600px) {
  .tracking-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
}
.tracking-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(228, 229, 229, .14);
}
.tracking-title-group,
.tracking-top-actions { display: flex; align-items: center; gap: 12px; }
.tracking-title-group { min-width: 0; }
.tracking-top-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.tracking-title-group h2 { margin: 0; font-size: 30px; letter-spacing: 0; }
.tracking-title-group > span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  background: rgba(255, 210, 6, .16);
  color: #ffd206;
  font-weight: 900;
}
.tracking-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid #ffd206;
  border-radius: 999px;
  background: #ffd206;
  color: #252c34;
}
.tracking-add-button span { position: relative; width: 16px; height: 16px; }
.tracking-add-button span::before,
.tracking-add-button span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.tracking-add-button span::after { width: 2px; height: 16px; }
.tracking-add-button:hover { border-color: #ffe36a; background: #ffe052; color: #1d232a; }
.tracking-file-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 118px;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 210, 6, .55);
  border-radius: 6px;
  background: rgba(255, 210, 6, .08);
  color: #f7f8f6;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.tracking-file-action:hover { border-color: #ffd206; background: rgba(255, 210, 6, .14); color: #fff; }
.tracking-file-icon-action {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 38px;
  padding: 0;
}
.tracking-file-icon-action .warehouse-action-icon { width: 29px; height: 29px; display: block; }
.tracking-file-direction {
  position: absolute;
  right: 2px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffd206;
  color: #252c34;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.tracking-table-wrap {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(228, 229, 229, .13);
  border-radius: 8px;
  background: rgba(33, 42, 51, .42);
}
.tracking-link-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 7px 10px 7px 14px;
  border: 1px solid rgba(255, 210, 6, .72);
  border-radius: 7px;
  background: rgba(255, 210, 6, .10);
  color: #f7f8f6;
  font-weight: 800;
}
.tracking-link-mode-banner button { min-height: 30px; padding: 0 12px; }
.tracking-row-link-action {
  min-height: 30px;
  padding: 0 10px;
  border-color: #ffd206;
  background: #ffd206;
  color: #252c34;
  font-weight: 900;
  white-space: nowrap;
}
.tracking-table .tracking-actions-cell > .tracking-row-link-action {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  padding: 6px 3px;
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tracking-row-unlink-action { min-height: 34px; padding: 0 12px; border-color: var(--brand-orange); background: rgba(245,126,45,.16); color: var(--ink); font-weight: 900; white-space: nowrap; }
.tracking-row-unlink-action:hover,
.tracking-row-unlink-action:focus-visible { background: var(--brand-orange); }
.tracking-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tracking-table th,
.tracking-table td {
  min-width: 0;
  padding: 7px 6px;
  border-right: 1px solid rgba(53, 61, 70, .10);
  border-bottom: 1px solid rgba(53, 61, 70, .12);
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tracking-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 48px;
  background: #303945;
  color: #fff;
  font-weight: 900;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.tracking-sort-button {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 2px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  letter-spacing: 0;
}
.tracking-sort-button:hover,
.tracking-sort-button:focus-visible { background: rgba(255, 210, 6, .10); color: #fff; }
.tracking-sort-button.active { color: #ffd206; }
.tracking-sort-button.active::after {
  content: "↓";
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  color: #ffd206;
  font-size: 13px;
}
.tracking-table th[aria-sort="ascending"] .tracking-sort-button.active::after { content: "↑"; }
.tracking-table td {
  height: 38px;
  background: #edf0ee;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.tracking-table .tracking-mobile-value {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.tracking-table tbody tr:nth-child(even) td { background: #dfe5e2; }
.tracking-table tbody tr:hover td { background: #d5ebe2; }
.tracking-table tbody tr.is-newly-added td {
  background: #d4eee2;
  box-shadow: inset 0 2px 0 #58b957, inset 0 -2px 0 #58b957;
}
.tracking-table td:nth-child(3),
.tracking-table td:nth-child(4),
.tracking-table td:nth-child(5),
.tracking-table td:nth-child(6),
.tracking-table td:nth-child(10),
.tracking-table td:nth-child(13),
.tracking-table td:nth-child(14) { text-align: left; }
.tracking-table th:nth-child(1) { width: 4.5%; }
.tracking-table th:nth-child(2) { width: 6.5%; }
.tracking-table th:nth-child(3),
.tracking-table th:nth-child(4),
.tracking-table th:nth-child(5),
.tracking-table th:nth-child(6) { width: 5.5%; }
.tracking-table th:nth-child(7) { width: 6.5%; }
.tracking-table th:nth-child(8),
.tracking-table th:nth-child(9) { width: 7%; }
.tracking-table th:nth-child(10) { width: 9%; }
.tracking-table th:nth-child(11),
.tracking-table th:nth-child(12) { width: 4.5%; }
.tracking-table th:nth-child(13),
.tracking-table td:nth-child(13) {
  width: var(--tracking-documents-column-width, 76px);
}
.tracking-table th:nth-child(13) .tracking-sort-button {
  padding-inline: 2px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.tracking-table th:nth-child(14) { width: 10%; }
.tracking-table th:nth-child(15) { width: 7%; }
.tracking-table th:last-child,
.tracking-table td:last-child {
  width: 124px;
  min-width: 124px;
  max-width: 124px;
  padding-inline: 4px;
}
.tracking-table th:last-child { background: #303945; }
.tracking-table tbody tr:nth-child(odd) td:last-child { background: #edf0ee; }
.tracking-table tbody tr:nth-child(even) td:last-child { background: #dfe5e2; }
.tracking-table tbody tr:hover td:last-child { background: #d5ebe2; }
.tracking-number { text-align: right !important; }
.tracking-table td:nth-child(10) .tracking-mobile-value { white-space: pre-line; }
.tracking-documents-cell { text-align: center !important; }
.tracking-documents-cell .tracking-documents-marker {
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid #ad8d00;
  border-radius: 50%;
  background: #ffcf00;
  color: #17212b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
.tracking-documents-cell .tracking-documents-marker:hover,
.tracking-documents-cell .tracking-documents-marker:focus-visible {
  border-color: #f57e2d;
  background: #ffe052;
  color: #17212b;
}
.tracking-specifications-cell { text-align: center !important; }
.tracking-specification-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.tracking-specification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #6cae2c;
  border-radius: 5px;
  background: #e8f5dc;
  color: #315d16;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.tracking-specification-badge:hover,
.tracking-specification-badge:focus-visible {
  border-color: #4f8f1e;
  background: #d9efc5;
  color: #244b0e;
}
.tracking-specification-badge.is-international {
  border-color: #dd6d19;
  background: #f57e2d;
  color: #182029;
}
.tracking-specification-badge.is-international:hover,
.tracking-specification-badge.is-international:focus-visible {
  border-color: #ffd206;
  background: #ff943f;
  color: #182029;
}
.tracking-document-buttons {
  display: inline-grid;
  grid-auto-flow: row;
  justify-items: stretch;
  width: max-content;
  max-width: calc(var(--tracking-documents-column-width, 112px) - 12px);
  gap: 5px;
}
.tracking-document-buttons > button {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.tracking-documents-cell button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  min-height: 38px;
  height: auto;
  padding: 5px 9px;
  border: 1px solid #1d737d;
  border-radius: 6px;
  background: #257f8a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.tracking-documents-cell button:hover {
  border-color: #155d65;
  background: #1d6f79;
}
.tracking-documents-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 7px;
  transform: rotate(38deg);
  box-sizing: border-box;
}
.tracking-documents-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 3px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
}
.tracking-documents-button-text {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .tracking-table th:nth-child(13),
  .tracking-table td:nth-child(13) {
    white-space: normal;
  }

  .tracking-table thead th:not(:nth-child(14)),
  .tracking-table tbody td:not(:nth-child(14)) {
    text-align: center !important;
  }

  .tracking-table thead th:not(:nth-child(14)) .tracking-sort-button {
    justify-content: center;
    text-align: center;
  }

  .tracking-table thead th:nth-child(14),
  .tracking-table tbody td:nth-child(14) {
    text-align: left !important;
  }
}

@media (min-width: 1600px) {
  .tracking-table {
    table-layout: auto;
  }

  .tracking-table th:nth-child(13),
  .tracking-table td:nth-child(13) {
    width: var(--tracking-documents-column-width, 76px);
    min-width: var(--tracking-documents-column-width, 76px);
    white-space: nowrap;
  }
}
.tracking-actions-cell { text-align: center !important; vertical-align: middle !important; }
.tracking-actions { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.tracking-actions .stock-action-icon-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
.entity-history-icon {
  padding: 0 4px !important;
  color: #24303b !important;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}
.entity-history-icon:hover,
.entity-history-icon:focus-visible { color: #0e6872 !important; }
.stock-item-history-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.history-action-svg { display: block; width: 32px; height: 32px; }
.stock-item-history-button:hover,
.stock-item-history-button:focus-visible {
  background: transparent;
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(1.08);
}
.tracking-empty { height: 160px; text-align: center !important; color: rgba(247, 248, 246, .58); }
.tracking-load-error { color: #ffb3ad !important; }

#trackingImportDialog,
#trackingImportDialog[open] {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #2d333b;
}
.tracking-import-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  width: 100%;
  height: 100dvh;
  padding: 22px;
  box-sizing: border-box;
}
.tracking-import-dialog > header,
.tracking-import-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tracking-import-dialog h2 { margin: 0 0 4px; font-size: 26px; }
.tracking-import-dialog p { margin: 0; color: rgba(247, 248, 246, .66); }
.tracking-import-dialog > footer { justify-content: flex-end; }
.tracking-import-dialog > footer > span { margin-right: auto; font-weight: 800; color: #ffd206; }
.tracking-import-dialog > footer button { min-width: 130px; }
.tracking-import-table-wrap { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; border: 1px solid rgba(228,229,229,.15); }
.tracking-import-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.tracking-import-table th { position: sticky; top: 0; z-index: 2; padding: 8px 4px; background: #303945; color: #fff; line-height: 1.1; }
.tracking-import-table td { padding: 3px; border: 1px solid rgba(53,61,70,.14); background: #e7ebe9; }
.tracking-import-table tbody tr:nth-child(even) td { background: #dce3df; }
.tracking-import-table input { width: 100%; min-width: 0; height: 36px; min-height: 36px; padding: 4px 6px; border-radius: 4px; background: #fff; color: #182029; font-size: 11px; }
.tracking-import-table th:nth-child(1) { width: 5%; }
.tracking-import-table th:nth-child(2), .tracking-import-table th:nth-child(7) { width: 6.5%; }
.tracking-import-table th:nth-child(8), .tracking-import-table th:nth-child(9) { width: 7.5%; }
.tracking-import-table th:nth-child(10), .tracking-import-table th:nth-child(13) { width: 10%; }
.tracking-import-table th:nth-child(11), .tracking-import-table th:nth-child(12) { width: 4.5%; }
.tracking-import-table th:nth-child(14) { width: 3%; }
.tracking-import-delete { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 6px; background: #b74343; color: #fff; font-size: 20px; }

#trackingEditDialog,
#trackingEditDialog[open] {
  width: min(1040px, calc(100vw - 32px)) !important;
  max-width: min(1040px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#trackingEditDialog .dialog-panel.tracking-edit-dialog,
#trackingEditDialog[open] .dialog-panel.tracking-edit-dialog {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  margin: 0 !important;
  padding: 18px 22px 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
#trackingEditDialog .tracking-edit-dialog > header {
  position: static !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
}
.tracking-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 10px;
}
.tracking-edit-grid label {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 5px;
  min-width: 0;
}
.tracking-edit-grid input,
.tracking-edit-grid textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tracking-edit-grid input:not([type="file"]),
.tracking-edit-grid .tracking-date-entry {
  height: 42px;
  min-height: 42px;
}
.tracking-edit-grid .tracking-date-entry input { height: 100%; min-height: 0; }
.tracking-date-entry { width: 100%; min-width: 0; }
.tracking-comments-field { grid-column: span 2; }
.tracking-cargo-field { grid-column: span 1; }
.tracking-cargo-field textarea {
  height: 42px;
  min-height: 42px;
  max-height: 150px;
  resize: none;
  overflow-y: auto;
  line-height: 1.35;
}
.tracking-comments-field textarea { min-height: 44px; height: 44px; resize: vertical; }
.tracking-files-field { grid-column: span 2; }
.tracking-files-field input[type="file"] {
  height: 42px;
  min-height: 42px;
  padding: 5px 7px;
  line-height: 30px;
}
.tracking-files-field input[type="file"]::file-selector-button {
  height: 30px;
  margin: 0 8px 0 0;
  padding: 0 10px;
  vertical-align: middle;
}
.tracking-recognition-result {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(82, 212, 227, .42);
  border-radius: 6px;
  background: rgba(82, 212, 227, .09);
  color: #f4f7f7;
}
.tracking-recognition-card {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(82, 212, 227, .28);
  border-radius: 6px;
  background: rgba(20, 35, 40, .28);
}
.tracking-recognition-card.is-warning { border-color: rgba(255, 210, 6, .42); }
.tracking-recognition-card label { gap: 4px; }
.tracking-recognition-card input { height: 38px !important; min-height: 38px !important; }
.tracking-recognition-result[hidden] { display: none; }
.tracking-recognition-result.is-warning {
  border-color: rgba(255, 210, 6, .42);
  background: rgba(255, 210, 6, .08);
}
.tracking-recognition-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tracking-recognition-heading > strong { min-width: 0; overflow-wrap: anywhere; }
.tracking-recognition-heading-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tracking-recognition-heading .tracking-recognition-remove {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  background: rgba(183, 67, 67, .88);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.tracking-recognition-heading .tracking-recognition-remove:hover { background: #c84a4a; }
.tracking-recognition-heading .tracking-recognition-remove:disabled { cursor: wait; opacity: .45; }
.tracking-recognition-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tracking-recognition-choice-actions button {
  width: auto;
  min-height: 34px;
  padding: 6px 12px;
}
.tracking-recognition-choice-actions button:first-child {
  border-color: rgba(82, 212, 227, .62);
  background: rgba(37, 128, 138, .34);
  color: #fff;
}
.tracking-recognition-choice-actions button:disabled { cursor: wait; opacity: .55; }
.tracking-recognition-heading button {
  width: auto;
  min-height: 32px;
  padding: 5px 9px;
  border-color: rgba(82, 212, 227, .5);
  background: rgba(82, 212, 227, .12);
  color: #d9fbff;
}
.tracking-recognition-result span,
.tracking-recognition-result small { color: rgba(247, 248, 246, .75); }
.tracking-attached-documents { display: grid; gap: 6px; }
.tracking-attached-title { color: rgba(247, 248, 246, .68); font-size: 12px; font-weight: 800; }
.tracking-attached-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid rgba(228, 229, 229, .11);
  border-radius: 7px;
}
.tracking-attached-item > button:first-of-type {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f7f8f6;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracking-attached-item a { color: #7de2ec; font-size: 13px; }
.tracking-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; min-width: 0; padding: 8px 0 0; }
.tracking-edit-actions button { width: auto; min-width: 150px; max-width: 100%; min-height: 44px; height: auto; padding: 10px 18px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.tracking-edit-actions .stock-action-icon-button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 5px;
}

@media (max-width: 760px) {
  .spec-workbar-modules { display: grid; grid-template-columns: 1fr 1fr; }
  .task-tracker-launch, .tracking-launch { width: 100%; margin: 0; }
  .spec-workbar-modules .international-launch {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px;
  }
  .tracking-dialog {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }
  .tracking-location-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    gap: 6px;
    padding: 6px;
  }
  .tracking-location-tabs button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: center;
    justify-content: stretch;
    gap: 4px;
    min-width: 0;
    min-height: 42px;
    padding: 0 8px;
    font-size: clamp(9px, 2.8vw, 11px);
  }
  .tracking-location-tabs button span {
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tracking-location-tabs button b {
    min-width: 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
  }
  .tracking-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 4px 0 10px;
  }
  .tracking-title-group { gap: 8px; min-width: 0; }
  .tracking-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }
  .tracking-top-actions .tracking-tasks-button {
    min-width: 0;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tracking-top-actions .dialog-refresh-status:empty {
    display: none;
  }
  .tracking-top-actions .tracking-file-action { display: none !important; }
  .tracking-top-actions > button:not(.tracking-add-button) {
    min-width: 0;
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .tracking-add-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1;
    box-sizing: border-box;
    align-self: center;
  }
  .tracking-add-button span,
  .tracking-add-button span::before { width: 14px; }
  .tracking-add-button span::after { height: 14px; }
  .tracking-filters { grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .tracking-filters .tracking-search-filter {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .tracking-filters .tracking-recipient-filter {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .tracking-filters > label:not(.tracking-search-filter):nth-of-type(1),
  .tracking-filters > label:not(.tracking-search-filter):nth-of-type(2) { grid-row: 3; }
  .tracking-filters label { gap: 3px; font-size: 10px; }
  .tracking-filters select,
  .tracking-filters input,
  .tracking-filters > button,
  .tracking-filters .custom-select,
  .tracking-filters .custom-select-button,
  .tracking-filter-date-entry {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }
  .tracking-filters input { padding: 0 10px !important; }
  .tracking-filters .custom-select-button { padding: 0 30px 0 10px !important; }
  .tracking-filters .custom-select-button::after { top: 7px !important; right: 10px; }
  .tracking-filter-date-entry .date-picker-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
  .tracking-filters > button {
    grid-column: 1 / -1;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 12px !important;
  }
  .tracking-title-group h2 { font-size: 24px; line-height: 1; }
  .tracking-title-group > span { min-width: 26px; height: 24px; padding: 0 7px; font-size: 12px; }

  .tracking-table-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .tracking-table,
  .tracking-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .tracking-table thead { display: none; }
  .tracking-table tbody {
    display: grid;
    gap: 10px;
    padding-bottom: 10px;
  }
  .tracking-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(228, 229, 229, .16);
    border-radius: 8px;
    background: #edf0ee;
    box-shadow: 0 2px 7px rgba(12, 20, 27, .16);
  }
  .tracking-table tbody tr:nth-child(even) { background: #e3e8e5; }
  .tracking-table tbody td,
  .tracking-table tbody tr:nth-child(even) td,
  .tracking-table tbody tr:hover td,
  .tracking-table tbody tr:nth-child(odd) td:last-child,
  .tracking-table tbody tr:nth-child(even) td:last-child,
  .tracking-table tbody tr:hover td:last-child {
    position: static;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 38px;
    padding: 9px 11px;
    border-right: 0;
    border-bottom: 1px solid rgba(53, 61, 70, .12);
    background: transparent;
    color: #17202a;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .tracking-table tbody td::before {
    content: attr(data-label);
    color: #69737d;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
  }
  .tracking-mobile-value { min-width: 0; overflow-wrap: anywhere; }
  .tracking-table tbody td:has(> .tracking-mobile-value:empty) { display: none; }
  .tracking-table tbody td:nth-child(1),
  .tracking-table tbody td:nth-child(2) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    background: #d5ded9;
    font-size: 15px;
    font-weight: 900;
  }
  .tracking-table tbody td:nth-child(1)::before,
  .tracking-table tbody td:nth-child(2)::before,
  .tracking-table tbody td:nth-child(1) .tracking-mobile-value,
  .tracking-table tbody td:nth-child(2) .tracking-mobile-value {
    align-self: center;
    line-height: 1;
    white-space: nowrap;
  }
  .tracking-table tbody td:nth-child(2) { text-align: right !important; }
  .tracking-table tbody td:nth-child(2)::before { text-align: right; }
  .tracking-table tbody td:nth-child(2) .tracking-mobile-value { text-align: right; }
  .tracking-table tbody td:nth-child(n+3) { grid-column: 1 / -1; }
  .tracking-table tbody td:empty { display: none; }
  .tracking-table .tracking-document-buttons {
    justify-content: flex-start;
  }
  .tracking-table .tracking-document-buttons > button {
    float: none;
    justify-self: start;
    min-width: 88px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
  }
  .tracking-documents-cell.is-empty { display: none !important; }
  .tracking-specifications-cell.is-empty { display: none !important; }
  .tracking-specification-badges { justify-content: flex-start; }
  .tracking-table .tracking-actions-cell {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center !important;
    min-height: 48px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 0;
  }
  .tracking-table .tracking-actions-cell::before,
  .tracking-table .tracking-actions-cell .tracking-actions {
    align-self: center;
    line-height: 1;
  }
  .tracking-table .tracking-actions-cell .tracking-actions {
    height: auto;
    min-height: 38px;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }
  .tracking-actions .stock-action-icon-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 7px;
  }
  .tracking-empty {
    display: block !important;
    grid-column: 1 / -1 !important;
    min-height: 110px !important;
    padding: 34px 16px !important;
    text-align: center !important;
  }

  #trackingEditDialog,
  #trackingEditDialog[open] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  #trackingEditDialog .dialog-panel.tracking-edit-dialog,
  #trackingEditDialog[open] .dialog-panel.tracking-edit-dialog {
    gap: 12px !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 14px !important;
  }
  #trackingEditDialog .tracking-edit-dialog > header {
    gap: 10px !important;
    padding: 0 0 10px !important;
  }
  #trackingEditDialog .tracking-edit-dialog > header h2 { font-size: 23px; }
  #trackingEditDialog .tracking-edit-dialog > header button {
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0 12px;
  }
  .tracking-edit-grid { grid-template-columns: 1fr; }
  .tracking-edit-grid { gap: 10px; }
  .tracking-edit-grid input,
  .tracking-edit-grid textarea { min-height: 46px; }
  .tracking-edit-grid textarea { height: 72px; }
  .tracking-date-entry { min-height: 46px; }
  .tracking-files-field input[type="file"] { height: auto; min-height: 46px; padding: 7px; }
  .tracking-comments-field,
  .tracking-cargo-field,
  .tracking-files-field { grid-column: auto; }
  .tracking-edit-actions { display: grid; grid-template-columns: 1fr; }
  .tracking-edit-actions button { width: 100%; min-width: 0; min-height: 48px; }
  .tracking-edit-actions:has(.stock-action-icon-button) {
    display: flex;
    justify-content: flex-end;
  }
  .tracking-edit-actions .stock-action-icon-button {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
  }
  .tracking-attached-item { grid-template-columns: minmax(0, 1fr) auto 42px; }
  .tracking-attached-item > button:last-child { width: 42px; min-width: 42px; height: 42px; }
}

#stockTransferDialog .dialog-panel.stock-transfer-dialog,
#stockTransferDialog[open] .dialog-panel.stock-transfer-dialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  margin: 0 !important;
  padding: 22px 26px 24px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

#stockTransferDialog .stock-transfer-dialog > header,
#stockTransferDialog[open] .stock-transfer-dialog > header {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
}

#stockTransferDialog .stock-transfer-dialog .form-grid,
#stockTransferDialog[open] .stock-transfer-dialog .form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 18px !important;
}

#stockTransferDialog .stock-transfer-dialog .primary-action,
#stockTransferDialog[open] .stock-transfer-dialog .primary-action {
  justify-self: end !important;
  align-self: start !important;
  width: 180px !important;
  min-width: 180px !important;
  height: 46px !important;
  min-height: 46px !important;
}

@media (max-width: 760px) {
  #stockTransferDialog,
  #stockTransferDialog[open] {
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: min(760px, calc(100vw - 24px)) !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    margin: auto !important;
    padding: 0 !important;
  }

  #stockTransferDialog .dialog-panel.stock-transfer-dialog,
  #stockTransferDialog[open] .dialog-panel.stock-transfer-dialog {
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 18px !important;
  }
}

@media (max-width: 560px) {
  #stockTransferDialog .stock-transfer-dialog .form-grid,
  #stockTransferDialog[open] .stock-transfer-dialog .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #stockTransferDialog .stock-transfer-dialog .primary-action,
  #stockTransferDialog[open] .stock-transfer-dialog .primary-action {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

#stockTransitReceiveDialog,
#stockTransitReceiveDialog[open] {
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

#stockTransitReceiveDialog .dialog-panel.stock-transit-receive-dialog,
#stockTransitReceiveDialog[open] .dialog-panel.stock-transit-receive-dialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  margin: 0 !important;
  padding: 20px 24px 22px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

#stockTransitReceiveDialog .stock-transit-receive-dialog > header,
#stockTransitReceiveDialog[open] .stock-transit-receive-dialog > header {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
}

#stockTransitReceiveDialog .stock-transit-receive-dialog .primary-action,
#stockTransitReceiveDialog[open] .stock-transit-receive-dialog .primary-action {
  justify-self: end !important;
  width: 150px !important;
  min-width: 150px !important;
  min-height: 44px !important;
}

@media (max-width: 520px) {
  #stockTransitReceiveDialog .dialog-panel.stock-transit-receive-dialog,
  #stockTransitReceiveDialog[open] .dialog-panel.stock-transit-receive-dialog {
    padding: 16px !important;
  }

  #stockTransitReceiveDialog .stock-transit-receive-dialog .primary-action,
  #stockTransitReceiveDialog[open] .stock-transit-receive-dialog .primary-action {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}
.logistics-launch { display: inline-flex; align-items: center; gap: 8px; }
.tracking-launch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: visible !important;
}
.tracking-notification-badge {
  position: absolute;
  top: -7px;
  right: -2px;
  z-index: 2;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e63b3b;
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  box-shadow: 0 2px 5px rgba(14, 20, 26, .28);
  text-rendering: geometricPrecision;
}
.tracking-notification-badge[hidden] { display: none; }
.notifications-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 37px;
  padding: 0 !important;
  overflow: visible !important;
  margin-left: auto;
  margin-right: -8px;
}
.notifications-button svg { display:block; width:29px; height:29px; overflow:visible; }
.notifications-button svg rect { fill:#fff; stroke:var(--lime, #8bc53f); stroke-width:2; }
.notifications-button svg path { fill:none; stroke:var(--lime, #8bc53f); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 760px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .topbar {
    position: sticky;
    padding: 10px 12px 12px;
    gap: 8px;
  }
  .topbar .app-brand {
    min-height: 48px;
    padding-right: 52px;
    box-sizing: border-box;
  }
  .topbar .atlas-brand-copy {
    min-width: 0;
    overflow: hidden;
  }
  .topbar .atlas-brand-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .topbar-nav,
  .topbar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .topbar .nav-group {
    display: contents;
  }
  .topbar nav button:not(.notifications-button) {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.15;
  }
  .topbar #logoutButton {
    grid-column: 1 / -1;
  }
  .topbar .notifications-button {
    position: absolute;
    top: 13px;
    right: 12px;
    z-index: 2;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px !important;
    border-radius: 7px;
    margin-left: 0;
    margin-right: 0;
  }
  .topbar .notifications-button svg {
    width: 25px;
    height: 25px;
  }
}
#notificationsDialog,
#notificationAlertDialog {
  height: auto !important;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}
#notificationsDialog { width: min(680px, calc(100vw / var(--notification-scale, 1) - 24px)); max-height: calc(100dvh / var(--notification-scale, 1) - 24px); }
.notifications-dialog-panel {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh / var(--notification-scale, 1) - 24px);
  margin: 0;
  padding: 20px;
  overflow: auto;
  background: var(--surface-panel, #414952);
  box-sizing: border-box;
}
.notifications-dialog-panel header p { margin: 4px 0 0; color: var(--muted, #bac4cf); }
.notifications-list { display: grid; gap: 10px; margin-top: 16px; }
.notification-item {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid rgba(228, 229, 229, .14);
  border-left: 4px solid #73808c;
  border-radius: 6px;
  background: #353e47;
}
.notification-item.is-unread { border-left-color: #e95b5b; background: #3e4148; }
.notification-item > div { display: flex; justify-content: space-between; gap: 12px; }
.notification-item time, .notification-item > span { color: var(--muted, #bac4cf); font-size: 12px; }
.notification-item p { margin: 0; overflow-wrap: anywhere; }
.notification-item button { justify-self: end; }
.notifications-empty { color: var(--muted, #bac4cf); text-align: center; }
#notificationAlertDialog {
  width: min(520px, calc(100vw / var(--notification-scale, 1) - 24px));
  max-height: calc(100dvh / var(--notification-scale, 1) - 24px);
}
.notification-alert-panel {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh / var(--notification-scale, 1) - 24px);
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(228, 229, 229, .18);
  border-top: 4px solid #e95b5b;
  border-radius: 8px;
  background: var(--surface-panel, #414952);
  box-shadow: 0 20px 55px rgba(7, 13, 19, .4);
  box-sizing: border-box;
}
.notification-alert-panel > p { margin: 8px 0 20px; line-height: 1.5; overflow-wrap: anywhere; }
.notification-alert-panel footer { display: flex; justify-content: flex-end; }
@media (max-width: 520px) {
  .notification-item > div { display: grid; }
  .notification-item button, .notification-alert-panel footer button { width: 100%; }
}
#logisticsReturnDialog {
  width: min(520px, calc(100vw / var(--return-scale, 1) - 16px));
  max-width: calc(100vw / var(--return-scale, 1) - 16px);
  max-height: calc(100dvh / var(--return-scale, 1) - 16px);
  height: auto !important;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}
.logistics-return-dialog {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh / var(--return-scale, 1) - 16px);
  height: auto !important;
  min-height: 0 !important;
  gap: 18px;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(228, 229, 229, .18);
  border-radius: 8px;
  background: var(--surface-panel, #414952);
  box-shadow: 0 18px 45px rgba(8, 15, 22, .32);
  overflow: auto;
  box-sizing: border-box;
}
.logistics-return-dialog > label { display: grid; gap: 8px; }
.logistics-return-dialog textarea { width: 100%; min-height: 92px; resize: vertical; box-sizing: border-box; }
.logistics-return-dialog footer { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 520px) {
  .logistics-return-dialog footer { display: grid; grid-template-columns: 1fr; }
  .logistics-return-dialog footer button { width: 100%; }
}
.tracking-tasks-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: visible;
  border: 1px solid rgba(255, 210, 6, .7);
  background: transparent;
}
.tracking-tasks-button:hover { border-color: #ffd206; background: rgba(255, 210, 6, .12); }
.tracking-tasks-button.active { border-color: #ffd206; color: #ffd206; }
.tracking-tasks-button span {
  position: absolute;
  top: -9px;
  right: -9px;
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid #2d333b;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.tracking-dialog { position: relative; }
.tracking-logistics-panel {
  position: absolute;
  z-index: 20;
  top: 78px;
  right: 24px;
  width: min(760px, calc(100% - 48px));
  min-height: 350px;
  max-height: min(680px, calc(100dvh - 110px));
  padding: 16px;
  overflow-y: auto;
  border: 1px solid rgba(255, 210, 6, .55);
  border-radius: 8px;
  background: #343d47;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}
.tracking-logistics-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tracking-logistics-panel-header h3 { margin: 0 0 3px; color: #f7f8f6; font-size: 20px; }
.tracking-logistics-panel-header span { color: rgba(247, 248, 246, .65); font-size: 12px; }
.tracking-logistics-panel-header button { width: 34px; height: 34px; min-width: 34px; padding: 0; font-size: 22px; line-height: 1; }
.tracking-logistics-panel .logistics-tabs { margin: 0 0 12px; }
.tracking-logistics-panel .logistics-cards { max-width: none; }
.shipment-dates-cell {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  max-height: none;
  overflow: visible;
}
.shipment-document-numbers { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; align-items: end; }
.shipment-document-numbers > span { grid-column: 1 / -1; }
#documentNumbersList { display: grid; grid-column: 1; gap: 6px; min-width: 0; }
.shipment-document-number-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.shipment-document-number-row input { width: 100%; min-width: 0; }
.shipment-document-number-row button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 3px; }
.shipment-document-numbers > .date-add-button { grid-column: 2; grid-row: 2; align-self: end; }
.shipment-tracking-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-width: 0; }
button.tracking-link-badge.tracking-number-badge {
  border-radius: 50%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
button.international-tracking-link {
  box-sizing: border-box;
  width: var(--international-tracking-size, 30px) !important;
  min-width: var(--international-tracking-size, 30px) !important;
  height: var(--international-tracking-size, 30px) !important;
  min-height: var(--international-tracking-size, 30px) !important;
  padding: 0 !important;
  margin: 0;
  border-radius: 50%;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: 10px;
  align-content: center;
}
.international-tracking-item { display: grid; justify-items: center; align-content: start; gap: 5px; }
.international-tracking-date { font-size: 11px; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; color: inherit; }
@media (min-width: 901px) {
  .international-table td.international-documents,
  .international-table td.international-tracking {
    vertical-align: middle;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .international-table td.international-documents > .international-badge-list,
  .international-table td.international-tracking > .international-badge-list {
    align-items: center;
  }
  .international-table tr.has-international-tracking td.international-documents > .international-badge-list {
    transform: translateY(-10px);
  }
}
.doc-badges, .mobile-doc-summary { flex-wrap: wrap; }
.shipment-date-values { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.shipment-date-values span { width: auto; max-width: 100%; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; }
.tracking-link-badge { width: 26px; height: 26px; min-width: 26px; padding: 0; border-radius: 50%; border: 1px solid #ad8d00; background: #ffcf00; color: #17212b; display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.tracking-link-badge span { width: auto; font-size: 10px; }

/* Keep document and tracking badges identical, including button defaults. */
.doc-badge,
button.tracking-link-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px;
  padding: 0 !important;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}

.digest-table .doc-badges-button {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 3px;
}

.digest-table .doc-shipment {
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 27px) !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex: 0 1 auto;
  padding: 0 4px !important;
  border-radius: 5px;
  font-size: clamp(6px, .55vw, 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.digest-table .doc-spec {
  flex: 0 0 24px;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}

@media (max-width: 760px) {
  .doc-badge,
  button.tracking-link-badge {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px;
    font-size: 12px;
  }
}
.delivery-substatus { display: block; margin-top: 3px; font-size: 11px; line-height: 1.15; color: #51606c; }
.delivery-substatus--delayed { color: #9a3030; font-weight: 700; }
.delivery-substatus--delivered { color: #33721f; font-weight: 700; }
.delivery-substatus--partial { color: #8a6800; font-weight: 700; }
.delivery-substatus--neutral { color: #68727a; }
.shipment-logistics-panel { display: grid; gap: 11px; padding: 14px; border: 1px solid rgba(255,207,0,.58); border-radius: 6px; background: rgba(255,207,0,.04); }
.shipment-logistics-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
#shipmentTrackingCount { width: 34px; text-align: center; justify-self: end; }
.shipment-logistics-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 8px;
}
.shipment-logistics-actions > button { grid-column: 1; width: 100%; min-width: 0; }
.shipment-logistics-actions > .tracking-not-required-toggle { grid-column: 1; }
.shipment-logistics-heading span { color: #ffcf00; font-weight: 900; }
.shipment-tracking-links { display: grid; gap: 8px; }
.shipment-tracking-link { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.shipment-tracking-link > .tracking-unlink { justify-self: end; align-self: center; margin: 0; }
.shipment-logistics-heading,
.shipment-tracking-links,
.shipment-tracking-link { width: 100%; min-width: 0; box-sizing: border-box; }
.shipment-tracking-link > button:first-child { min-width: 0; min-height: 44px; text-align: left; display: flex; align-items: center; padding: 7px 11px; border: 1px solid #ffcf00; background: #ffcf00; color: #182029; }
.shipment-tracking-link > button:first-child:hover,
.shipment-tracking-link > button:first-child:focus-visible { background: #ffcf00; color: var(--ink); }
.shipment-tracking-link span, .shipment-tracking-empty { min-width: 0; font-size: 12px; opacity: .88; overflow-wrap: anywhere; }
.shipment-tracking-link span { color: inherit; opacity: 1; }
.shipment-tracking-link span strong { color: inherit; font-size: 13px; }
.tracking-unlink { align-self: center; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px; padding: 5px !important; border-color: rgba(245,126,45,.65) !important; background: rgba(245,126,45,.10) !important; }
.tracking-unlink:hover,
.tracking-unlink:focus-visible { background: rgba(245,126,45,.24) !important; }
.shipment-logistics-actions .compact-secondary-action { min-height: 42px; border-color: rgba(255,207,0,.78); background: rgba(255,207,0,.16) !important; color: #ffcf00 !important; }
.shipment-logistics-actions .compact-secondary-action:hover,
.shipment-logistics-actions .compact-secondary-action:focus-visible { border-color: #ffcf00; background: rgba(255,207,0,.28) !important; color: #fff1ad !important; }
.tracking-not-required-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 6px 2px;
  white-space: normal;
}
.tracking-not-required-toggle input {
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 0;
}
.tracking-not-required-toggle span { min-width: 0; overflow-wrap: anywhere; }
.module-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; }
.logistics-dialog-panel { min-height: 100%; padding: 22px; background: #29323c; color: #f5f7f8; }
.logistics-dialog-panel > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.logistics-dialog-panel h2 { margin: 0; }
.logistics-dialog-panel header p { margin: 5px 0 0; opacity: .72; }
.logistics-tabs { display: flex; gap: 6px; margin: 20px 0 14px; overflow-x: auto; }
.logistics-tabs button { white-space: nowrap; }
.logistics-tabs button.active { background: #ffcf00; color: #17212b; }
.logistics-cards { display: grid; gap: 10px; max-width: 1050px; }
.logistics-card { padding: 14px; border: 1px solid #596674; border-left: 4px solid #ffcf00; border-radius: 6px; background: #333e49; }
.logistics-card--delayed { border-left-color: #e15a5a; }
.logistics-card--done { border-left-color: #78bd42; opacity: .85; }
.logistics-card header, .logistics-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logistics-card header div { display: grid; gap: 3px; }
.logistics-card header span, .logistics-card time { opacity: .75; font-size: 13px; }
.logistics-card footer { justify-content: flex-start; flex-wrap: wrap; }
.logistics-empty { padding: 28px; text-align: center; opacity: .72; }
.user-active-toggle { display: grid; gap: 5px; align-content: center; }
.user-active-toggle label { display: flex; align-items: center; gap: 5px; }
@media (max-width: 700px) {
  .shipment-logistics-actions { align-items: stretch; flex-direction: column; }
  .tracking-link-mode-banner { align-items: stretch; flex-direction: column; }
  .logistics-dialog-panel { padding: 14px; }
  .logistics-card header { align-items: flex-start; flex-direction: column; }
  .tracking-logistics-panel { top: 70px; right: 10px; width: calc(100% - 20px); min-height: min(350px, calc(100dvh - 82px)); max-height: calc(100dvh - 82px); padding: 12px; }
}

/* Standard edit/delete actions are bare icons in every module. */
button.stock-action-icon-button,
button.stock-action-icon-button--delete,
button.tracking-unlink,
button.shipment-stock-delete,
button.shipment-date-remove,
button.tracking-import-delete {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
button.stock-action-icon-button:hover,
button.stock-action-icon-button:focus-visible,
button.stock-action-icon-button--delete:hover,
button.stock-action-icon-button--delete:focus-visible,
button.tracking-unlink:hover,
button.tracking-unlink:focus-visible,
button.shipment-stock-delete:hover,
button.shipment-stock-delete:focus-visible,
button.shipment-date-remove:hover,
button.shipment-date-remove:focus-visible,
button.tracking-import-delete:hover,
button.tracking-import-delete:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .international-table .international-actions .international-action-button {
    display: inline-flex;
    flex: 1 1 calc(50% - 4px);
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(228, 229, 229, .24) !important;
    border-radius: 6px !important;
    background: rgba(247, 248, 246, .08) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
  }
  .international-table .international-actions .international-action-button--delete {
    border-color: #c95757 !important;
    background: #b74343 !important;
  }
  .international-table .international-actions .international-action-button svg {
    display: none;
  }
  .international-table .international-actions .international-action-label {
    display: inline;
  }
}

@media (max-width: 760px) {
  .active-row-actions {
    display: flex !important;
  }
  .active-row-actions #selectSpecRowsButton {
    min-height: 36px;
    white-space: normal;
    line-height: 1.15;
  }
}

/* Keep laptop filters in deterministic rows; auto-placement can overlap custom selects. */
@media (min-width: 761px) and (max-width: 1400px) {
  .app-shell > .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, max-content) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
  }

  .app-shell > .filters > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .app-shell > .filters > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .app-shell > .filters > label:nth-of-type(3) { grid-column: 1; grid-row: 2; }
  .app-shell > .filters > label:nth-of-type(4) { grid-column: 2; grid-row: 2; }
  .app-shell > .filters > label:nth-of-type(5) { grid-column: 1 / -1; grid-row: 3; }

  .app-shell > .filters > .period-filter {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-shell > .filters > .spec-workbar {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Align document and tracking counters/actions to one right edge in the side pane. */
.side-pane .attached-item,
.side-pane .shipment-tracking-link {
  grid-template-columns: minmax(0, 1fr) 34px;
}
.side-pane .shipment-logistics-heading {
  grid-template-columns: minmax(0, 1fr) 34px;
}
.side-pane .shipment-logistics-actions {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.side-pane .shipment-logistics-actions > button,
#shipmentBlocks .shipment-logistics-actions > button,
.side-pane #legacyLogisticsHandoff > button {
  grid-column: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  white-space: normal !important;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.side-pane #legacyLogisticsHandoff {
  grid-column: 1 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.side-pane #legacyLogisticsHandoff[hidden] { display: none; }
.side-pane :is(#shipmentForm, #legacyShipmentFields) > .shipment-note-panel {
  display: grid;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid rgba(228, 229, 229, .18);
  border-radius: 7px;
  background: rgba(24, 32, 41, .16);
  justify-self: start;
}
.side-pane :is(#shipmentForm, #legacyShipmentFields) > .shipment-note-panel > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.side-pane :is(#shipmentForm, #legacyShipmentFields) > .shipment-note-panel > button[type="submit"] { min-height: 42px; }
.side-pane :is(#shipmentForm, #legacyShipmentFields) > .document-uploader {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  justify-self: start;
}
.side-pane :is(#shipmentForm, #legacyShipmentFields) > .document-uploader > * {
  box-sizing: border-box;
  width: calc(100% - 42px);
  max-width: calc(100% - 42px);
}

.side-pane .attached-item [data-delete-document],
.side-pane .shipment-tracking-link > .tracking-unlink {
  grid-column: 2;
  width: 34px !important;
  min-width: 34px !important;
  justify-self: end;
  margin: 0 !important;
  text-align: right;
}
.side-pane #shipmentTrackingCount {
  grid-column: 2;
  width: 34px !important;
  min-width: 34px !important;
  justify-self: end;
  text-align: right;
}


@container (max-width: 300px) {
  .side-pane .shipment-logistics-panel {
    padding: 8px;
  }
}

/* Long selected values must stay inside their own dashboard filter column. */
.app-shell > .filters > label,
.app-shell > .filters > label > .custom-select {
  min-width: 0 !important;
  max-width: 100% !important;
}

.app-shell > .filters > label > .custom-select {
  width: 100% !important;
}

.app-shell > .filters > label > .custom-select > .custom-select-button {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: 38px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The long stock-movement status gets the wider share of its filter row. */
@media (min-width: 761px) and (max-width: 1400px) {
  .app-shell > .filters {
    grid-template-columns: minmax(0, 3fr) minmax(180px, 2fr) !important;
  }
}

@media (min-width: 1401px) {
  .app-shell > .filters {
    grid-template-columns:
      100px
      minmax(150px, 220px)
      minmax(110px, 150px)
      minmax(150px, 190px)
      300px
      minmax(0, 1fr);
  }
}

/* The document delete, tracking count and unlink action share one vertical axis. */
.side-pane .attached-documents,
.side-pane .shipment-logistics-panel {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.side-pane .attached-item [data-delete-document],
.side-pane .shipment-tracking-link > .tracking-unlink,
.side-pane #shipmentTrackingCount {
  place-self: center !important;
  text-align: center !important;
}

/* Balanced dashboard controls for scaled desktop displays and laptop screens. */
@media (min-width: 1100px) and (max-width: 1700px) {
  .app-shell > .filters {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, max-content) !important;
    gap: 10px !important;
    align-items: end !important;
  }

  .app-shell > .filters > label:nth-of-type(1) { grid-column: 1 / span 1; grid-row: 1; }
  .app-shell > .filters > label:nth-of-type(2) { grid-column: 2 / span 3; grid-row: 1; }
  .app-shell > .filters > label:nth-of-type(3) { grid-column: 5 / span 2; grid-row: 1; }
  .app-shell > .filters > label:nth-of-type(4) { grid-column: 7 / span 3; grid-row: 1; }
  .app-shell > .filters > label:nth-of-type(5) { grid-column: 10 / span 3; grid-row: 1; }

  .app-shell > .filters > .period-filter {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: 140px 140px 160px 150px minmax(190px, 240px) !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: end !important;
  }

  .app-shell > .filters #missingStockFilterButton {
    width: 100% !important;
    max-width: 240px !important;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  .app-shell > .filters > .spec-workbar {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    align-items: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  .app-shell > .filters .spec-workbar-group {
    display: flex !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .app-shell > .filters .spec-workbar-label {
    width: auto !important;
    min-height: 36px !important;
    padding: 0 10px 0 0 !important;
    border-right: 1px solid rgba(82, 212, 227, 0.26) !important;
    border-bottom: 0 !important;
  }

  .app-shell > .filters .spec-workbar-modules {
    justify-self: end !important;
    width: auto !important;
  }

  .app-shell > .filters .spec-workbar-button,
  .app-shell > .filters .spec-workbar-modules > button {
    min-height: 36px !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

.dialog-refresh-button {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 8px !important;
  border: 1px solid rgba(254, 254, 254, .28) !important;
  border-radius: 6px !important;
  background: rgba(254, 254, 254, .08) !important;
  color: #fff !important;
}

.dialog-refresh-status {
  flex: 0 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.dialog-refresh-button svg {
  display: block;
  width: 20px;
  height: 20px;
}

.dialog-refresh-button:hover,
.dialog-refresh-button:focus-visible {
  border-color: var(--lime) !important;
  background: rgba(119, 188, 31, .18) !important;
  color: var(--lime) !important;
}

.dialog-refresh-button.is-refreshing svg {
  animation: dialog-refresh-spin .8s linear infinite;
}

@keyframes dialog-refresh-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .dialog-refresh-status {
    font-size: 10px;
  }

  .dialog-refresh-button {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 7px !important;
  }
}
@media (max-width: 680px) {
  #taskTrackerDialog .task-tracker-top-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  #taskTrackerDialog #taskTrackerToday { margin-right: auto; }
  #taskTrackerDialog .dialog-refresh-status:empty { display: none; }
  #taskTrackerDialog .dialog-refresh-status:not(:empty) { order: 4; flex-basis: 100%; text-align: left; }
}
/* Передача сохраненной отгрузки логисту */
#logisticsHandoffDialog { width:min(760px, calc(100vw / var(--handoff-scale, 1) - 16px)) !important; max-width:calc(100vw / var(--handoff-scale, 1) - 16px) !important; height:auto !important; min-height:0 !important; max-height:calc(100dvh / var(--handoff-scale, 1) - 16px) !important; margin:auto; padding:0 !important; border:0 !important; border-radius:8px; background:transparent !important; overflow:hidden !important; box-sizing:border-box; }
.logistics-handoff-dialog { width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:calc(100dvh / var(--handoff-scale, 1) - 16px) !important; margin:0 !important; border:1px solid rgba(228,229,229,.16); border-radius:8px; background:var(--surface-panel, #414952) !important; overflow:auto !important; box-sizing:border-box; }
.logistics-handoff-dialog > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.logistics-handoff-dialog * { min-width:0; }
.logistics-handoff-dialog > header h2 { margin:0; }
.logistics-handoff-dialog > header p { margin:4px 0 0; color:var(--muted, #bac4cf); }
.logistics-handoff-summary dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.logistics-handoff-summary dl > div { min-width:0; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.035); }
.logistics-handoff-summary dl > .is-wide { grid-column:1 / -1; }
.logistics-handoff-summary dt { color:var(--muted, #bac4cf); font-size:.82rem; }
.logistics-handoff-summary dd { margin:3px 0 0; overflow-wrap:anywhere; font-weight:700; }
.logistics-handoff-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.logistics-handoff-fields label { display:grid; gap:5px; }
.logistics-handoff-fields input { width:100%; }
.logistics-handoff-dimensions { display:grid; gap:8px; margin-top:14px; }
.logistics-handoff-dimensions[hidden] { display:none; }
.logistics-handoff-dimensions h3 { margin:0; font-size:1rem; }
#logisticsHandoffDimensions { display:grid; gap:8px; }
#logisticsHandoffDimensions fieldset { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:8px; min-width:0; margin:0; padding:8px 10px 10px; border:1px solid rgba(255,255,255,.12); border-radius:8px; }
#logisticsHandoffDimensions legend { padding:0 5px; color:var(--muted, #bac4cf); font-size:.8rem; font-weight:700; }
#logisticsHandoffDimensions label { display:grid; gap:4px; color:var(--muted, #bac4cf); font-size:.76rem; }
#logisticsHandoffDimensions input { box-sizing:border-box; width:100%; min-width:0; }
#logisticsHandoffDimensions fieldset > span { align-self:center; padding-top:18px; color:var(--muted, #bac4cf); }
.logistics-handoff-card-dimensions { margin-top:-4px; color:rgba(255,255,255,.78); font-size:.88rem; }
.logistics-handoff-dialog > footer { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.logistics-handoff-documents { display:flex; flex-wrap:wrap; gap:6px; }
.logistics-handoff-documents a { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 9px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:inherit; text-decoration:none; }
.logistics-handoff-documents a b { display:grid; place-items:center; min-width:25px; height:25px; padding:0 5px; border-radius:999px; background:#8bc53f; color:#17330a; font-size:.76rem; }
.logistics-handoff-documents a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logistics-handoff-empty { color:var(--muted, #bac4cf); }
.logistics-handoff-state { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:rgba(255,193,7,.17); color:#ffd76b; font-weight:700; font-size:.82rem; }
.logistics-handoff-state.is-completed { background:rgba(139,197,63,.17); color:#aee56b; }
.logistics-handoff-returned {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border-left: 3px solid #e95b5b;
  background: rgba(233, 91, 91, .12);
  color: #f7d6d6;
  box-sizing: border-box;
}
.logistics-handoff-returned strong { color: #ff8e8e; }
.logistics-handoff-returned span { overflow-wrap: anywhere; }
.tracking-document-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:0; }
.tracking-source-document-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:0; }
.tracking-source-document-badges.is-three { display:grid; grid-template-columns:auto auto; justify-content:center; }
.tracking-source-document-badges.is-three .tracking-document-badge.is-spec { grid-column:1 / -1; justify-self:center; }
.tracking-document-badge { display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 6px; border-radius:999px; background:#9bcc5e; color:#16340a; font-weight:800; font-size:.75rem; text-decoration:none; }
.tracking-document-badge.is-spec { background:#73c20c; }
.tracking-document-badge.is-own { background:#ffc400; color:#332800; }
.tracking-linked-document-label { color:var(--muted, #bac4cf); font-size:.75rem; }
.logistics-card--handoff .logistics-handoff-documents { margin:8px 0; }

@media (max-width: 700px) {
  .logistics-handoff-dialog { width:calc(100vw / var(--handoff-scale, 1) - 16px); }
  .logistics-handoff-summary dl, .logistics-handoff-fields { grid-template-columns:1fr; }
  .logistics-handoff-summary dl > .is-wide { grid-column:auto; }
  .logistics-handoff-dialog > header, .logistics-handoff-dialog > footer { flex-wrap:wrap; }
  .logistics-handoff-dialog > header button { margin-left:auto; }
}