:root {
  /* Preserve the NormaX palette when the browser offers automatic darkening. */
  color-scheme: only light;
  --font-sans: var(--ds-font-sans);
  --nx-ink: var(--ds-heading);
  --nx-green: var(--ds-primary);
  --nx-green-2: var(--ds-primary-hover);
  --nx-green-3: var(--ds-sidebar);
  --nx-accent: var(--ds-primary);
  --nx-accent-soft: rgba(var(--ds-primary-rgb), 0.16);
  --nx-white: var(--ds-card);
  --nx-bg: var(--ds-bg);
  --nx-bg-2: var(--ds-disabled-bg);
  --nx-card: var(--ds-card);
  --nx-text: var(--ds-heading);
  --nx-soft: var(--ds-text-light);
  --nx-muted: var(--ds-placeholder);
  --nx-line: var(--ds-border);
  --nx-line-strong: var(--ds-disabled);
  --nx-table-frame-border: color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border));
  --nx-table-header-border: color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border));
  --nx-table-row-border: color-mix(in srgb, var(--ds-border) 82%, transparent);
  --nx-table-column-border: color-mix(in srgb, var(--ds-border) 72%, transparent);
  --nx-red: var(--ds-danger);
  --nx-red-soft: var(--ds-danger-bg);
  --nx-orange: var(--ds-warning);
  --nx-yellow: var(--ds-warning);
  --nx-yellow-soft: var(--ds-warning-bg);
  --nx-blue: var(--ds-info);
  --nx-blue-soft: var(--ds-info-bg);
  --chart-neutral: #256b7b;
  --chart-teal: #0f766e;
  --chart-success: #2f8f5b;
  --chart-warning: #c47a18;
  --chart-amber: #a96d16;
  --chart-danger: #b84a3a;
  --chart-plum: #755c86;
  --chart-slate: #475569;
  --chart-muted: #7b8794;
  --radius-xs: 10px;
  --radius-sm: var(--ds-radius-input);
  --radius-md: var(--ds-radius-card);
  --radius-lg: var(--ds-radius-modal);
  --shadow-card: var(--ds-shadow-card);
  --shadow-hover: var(--ds-shadow-hover);
  --shadow-line: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  color: var(--nx-text);
  background: var(--nx-bg);
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Machines Phase 1: canonical machine master inside the Workstations area. */
.station-area-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-sm);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.station-area-tabs button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 4px);
  color: var(--ds-text-light);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.station-area-tabs button.active {
  color: #fff;
  background: var(--ds-primary);
}

.machine-master-screen {
  gap: 14px;
}

.machine-master-card .primary-button[data-action="new-machine"],
.machine-master-card .primary-button[data-action="new-machine"] span,
.machine-master-card .primary-button[data-action="new-machine"] svg {
  color: #fff;
}

.machine-filter-card {
  grid-template-columns: minmax(260px, 1.6fr) minmax(190px, 1fr) minmax(150px, .72fr) auto;
}

.machines-table-wrap {
  overflow-x: auto;
}

.machines-table {
  width: 100%;
  min-width: 890px;
  border-collapse: collapse;
  table-layout: fixed;
}

.machines-table th,
.machines-table td {
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.machines-table th:nth-child(1) { width: 13%; }
.machines-table th:nth-child(2) { width: 20%; }
.machines-table th:nth-child(3) { width: 22%; }
.machines-table th:nth-child(4) { width: 17%; }
.machines-table th:nth-child(5) { width: 12%; }
.machines-table th:nth-child(6) { width: 16%; }
.machines-table tbody tr:last-child td { border-bottom: 0; }

.machines-table tbody .machine-table-row {
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.machines-table tbody .machine-table-row:hover,
.machines-table tbody .machine-table-row:focus-visible {
  background: rgba(var(--ds-primary-rgb), .045);
  box-shadow: inset 3px 0 0 var(--ds-primary);
  outline: 0;
}

.machine-station-cell,
.machine-station-cell strong,
.machine-station-cell small {
  display: block;
}

.machine-station-cell small {
  margin-top: 3px;
  color: var(--ds-text-light);
}

.machine-money-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.machine-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.machine-status-badge.active {
  color: var(--ds-success);
  background: rgba(28, 126, 80, .11);
}

.machine-status-badge.inactive {
  color: var(--ds-text-light);
  background: var(--ds-bg);
}

.machine-row-actions {
  min-width: 0;
  justify-content: flex-start;
}

.machine-list-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 260px;
  padding: 42px 24px;
  text-align: center;
}

.machine-list-state > svg {
  width: 36px;
  height: 36px;
  color: var(--ds-primary);
}

.machine-list-state h2,
.machine-list-state p {
  margin: 0;
}

.machine-list-state p {
  color: var(--ds-text-light);
}

.machine-card-list {
  display: none;
}

.machine-master-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.machine-modal-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.machine-master-modal:has(.machine-detail-tabs) {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}
.modal-backdrop.machine-modal-backdrop {
  padding: 16px;
  align-items: center;
  overflow: hidden;
}
.modal-backdrop.machine-modal-backdrop > .machine-master-modal {
  width: min(760px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  margin: 0;
}
.machine-detail-tabs { flex: 0 0 auto; margin: 0; padding: 8px 20px; }
.machine-service-body, .machine-service-editor-body { min-height: 0; overflow-y: auto; padding: 16px 20px; }
.machine-service-modal .flow-modal-head, .machine-service-modal .flow-modal-footer { flex: 0 0 auto; }
.machine-service-form { padding: 0; gap: 14px 18px; overflow: visible; }
.machine-service-form textarea { min-height: 72px; }
.machine-service-optional { min-width: 0; }
.machine-service-optional > summary { cursor: pointer; padding: 10px 0; font-weight: 650; }
.machine-service-entry { border: 1px solid var(--ds-border); border-radius: 8px; margin-top: 12px; background: var(--ds-white, #fff); overflow: hidden; }
.machine-service-entry > summary { display: flex; gap: 16px; align-items: start; justify-content: space-between; cursor: pointer; padding: 14px; background: var(--ds-bg); }
.machine-service-entry > summary > span:first-child { min-width: 0; display: grid; gap: 5px; }
.machine-service-entry > summary small, .machine-service-entry .muted, .machine-service-revision .muted { color: var(--ds-text-light); }
.machine-service-summary { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.machine-service-amount { flex-shrink: 0; font-size: 13px; display: grid; gap: 5px; justify-items: end; }
.machine-service-amount small { font-size: 12px; }
.machine-service-disclosure { display: inline-flex; align-items: center; gap: 5px; color: var(--ds-primary); font-size: 12px; font-weight: 650; }
.machine-service-close-label { display: none; }
.machine-service-entry[open] .machine-service-open-label { display: none; }
.machine-service-entry[open] .machine-service-close-label { display: inline; }
.machine-service-disclosure svg { width: 16px; height: 16px; }
.machine-service-entry[open] .machine-service-disclosure svg { transform: rotate(180deg); }
.machine-service-entry > summary > span:first-child { flex: 1; max-width: 100%; overflow-wrap: anywhere; }
.machine-service-entry-body { padding: 14px; border-top: 1px solid var(--ds-border); }
.machine-service-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.machine-service-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 12px 0; }
.machine-service-facts > div:first-child { grid-column: 1 / -1; }
.machine-service-facts dt { color: var(--ds-text-light); font-size: 12px; }
.machine-service-facts dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.machine-service-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.machine-service-revision + .machine-service-revision { border-top: 1px solid var(--ds-border); margin-top: 16px; padding-top: 12px; }
.machine-service-entry > summary:focus-visible, .machine-service-optional > summary:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; }
@media (max-width: 600px) {
  .machine-service-form, .machine-service-facts { grid-template-columns: minmax(0, 1fr); }
  .machine-service-entry > summary { flex-direction: column; gap: 6px; }
  .machine-service-amount { width: 100%; grid-template-columns: 1fr auto; justify-items: start; }
  .machine-service-amount small { grid-column: 1; }
  .machine-service-disclosure { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .machine-service-body, .machine-service-editor-body { padding: 12px 16px; }
  .machine-master-modal .machine-modal-head-actions .machine-status-badge { display: none; }
  .machine-attachment-upload .machine-service-actions > button { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}

.machine-modal-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.machine-modal-head-actions .machine-status-badge {
  min-height: 30px;
  padding-inline: 12px;
  border: 1px solid rgba(var(--ds-primary-rgb), .12);
}

.machine-master-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px 22px;
  min-height: 0;
  padding: 28px 30px 30px;
  overflow-x: hidden;
  overflow-y: auto;
}

.machine-master-form > .field {
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.machine-master-form > .field > span:first-child {
  min-height: 18px;
  color: var(--ds-heading);
  font-weight: 750;
}

.machine-master-form input,
.machine-master-form select {
  min-height: 44px;
}

.machine-code-field input[readonly] {
  color: var(--ds-text);
  background: rgba(var(--ds-primary-rgb), .035);
  font-weight: 750;
}

.machine-master-form .wide-field {
  grid-column: 1 / -1;
}

.machine-master-form textarea {
  min-height: 104px;
}

.machine-money-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 44px;
}

.machine-money-input input {
  min-width: 0;
  height: 44px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.machine-master-form .machine-money-input .machine-money-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-sizing: border-box;
  color: var(--ds-primary-hover);
  background: var(--ds-primary-light);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.machine-master-form .machine-money-input:focus-within .machine-money-suffix {
  border-color: var(--ds-primary);
}

.machine-modal-error {
  margin: 18px 30px 0;
}

@media (max-width: 1180px) {
  .machine-filter-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .station-area-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
  }

  .machine-filter-card,
  .machine-master-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .machines-table-wrap {
    display: none;
  }

  .machine-card-list {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  .machine-mobile-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    background: var(--ds-card);
  }

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

  .machine-mobile-card h3 {
    margin: 4px 0 0;
    font-size: 16px;
  }

  .machine-mobile-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
  }

  .machine-mobile-card dl div {
    display: grid;
    gap: 3px;
  }

  .machine-mobile-card dt {
    color: var(--ds-text-light);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .machine-mobile-card dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .machine-master-modal {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .machine-master-form {
    flex: 1 1 auto;
    padding: 20px 18px;
  }

  .machine-modal-head-actions {
    gap: 8px;
  }

  .machine-modal-head-actions .machine-status-badge {
    padding-inline: 9px;
  }

  .machine-master-form .wide-field {
    grid-column: auto;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
}

body,
input,
select,
textarea,
button {
  font-family: var(--font-sans);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(var(--ds-primary-border-rgb), 0.25);
  outline-offset: 2px;
}

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  flex: 0 0 auto;
}

.iso-week-hint {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-top: 5px;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  text-transform: none;
  user-select: none;
}

.iso-week-hint[hidden] {
  display: none;
}

.nx-date-control-wrap {
  --nx-date-input-height: 46px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
  gap: 6px;
}

.nx-date-control-wrap .nx-date-input {
  grid-column: 1 / -1;
  min-height: var(--nx-date-input-height);
  width: 100%;
  padding-right: 42px;
}

.nx-date-input.has-invalid-date {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 3px rgba(var(--ds-danger-rgb), 0.12);
}

.nx-calendar-trigger {
  position: absolute;
  right: 8px;
  top: calc(var(--nx-date-input-height) / 2);
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--ds-primary-dark);
  background: transparent;
  transform: translateY(-50%);
}

.nx-calendar-trigger:hover,
.nx-calendar-trigger:focus-visible {
  background: var(--ds-info-bg);
}

.nx-date-control-wrap .iso-week-hint {
  grid-column: 1 / -1;
  margin-top: 0;
}

.nx-calendar-popover {
  position: fixed;
  z-index: 1200;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 18px 44px rgba(var(--ds-sidebar-rgb), 0.18);
}

.nx-calendar-shell {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.nx-calendar-head,
.nx-calendar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nx-calendar-head strong {
  color: var(--ds-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.nx-calendar-head strong span {
  font-weight: 700;
}

.nx-calendar-nav {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  color: var(--ds-primary-dark);
  background: var(--ds-card);
}

.nx-calendar-nav:hover,
.nx-calendar-nav:focus-visible {
  background: var(--ds-info-bg);
}

.nx-calendar-grid {
  display: grid;
  grid-template-columns: 38px repeat(7, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}

.nx-calendar-grid-head {
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.nx-calendar-grid-head.week,
.nx-calendar-week-cell {
  color: var(--ds-placeholder);
  background: var(--ds-disabled-bg);
}

.nx-calendar-week-cell {
  display: inline-grid;
  min-height: 38px;
  place-items: center;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.nx-calendar-day {
  display: inline-grid;
  min-width: 0;
  min-height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ds-heading);
  background: var(--ds-card);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.nx-calendar-day:hover,
.nx-calendar-day:focus-visible,
.nx-calendar-day.active {
  border-color: var(--ds-primary-border);
  background: var(--ds-info-bg);
}

.nx-calendar-day.outside-month {
  color: var(--ds-placeholder);
  background: var(--ds-disabled-bg);
}

.nx-calendar-day.today {
  border-style: dashed;
  border-color: var(--ds-primary-border);
}

.nx-calendar-day.today::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--ds-primary);
}

.nx-calendar-day.selected {
  border-color: var(--ds-primary-dark);
  color: var(--ds-card);
  background: var(--ds-primary);
}

.nx-calendar-day.selected.today::after {
  background: currentColor;
}

.nx-calendar-footer {
  padding-top: 2px;
}

.nx-calendar-popover.is-mobile {
  max-width: none;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .nx-calendar-grid {
    grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  }

  .nx-calendar-day,
  .nx-calendar-week-cell {
    min-height: 40px;
  }
}

.app-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 247, 245, 0.98) 48%, #f0f3f1 100%),
    radial-gradient(circle at 78% 10%, rgba(var(--ds-primary-border-rgb), 0.08), transparent 30%);
}

/* Phase 2E: the one intentional visual difference between a Support session and a real
   Administrator's view. Rendered as a normal-flow sibling ABOVE .app-shell (never inside it,
   never absolutely positioned over it) so it can never cover the sidebar, header, content, or
   any modal overlay — it only ever pushes the shell down, exactly like a second page-level
   region. position:sticky keeps it visible while scrolling without needing a measured
   padding-offset on .app-shell. */
.support-banner {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 20px;
  background: var(--nx-orange, #c47a18);
  color: #fff;
  font-size: 14px;
}

.support-banner-warning {
  background: var(--nx-red, #b84a3a);
}

.support-banner-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.support-banner-text {
  flex: 1 1 auto;
}

.support-banner-end {
  font: inherit;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.support-banner-end:hover {
  background: rgba(255, 255, 255, 0.16);
}

.support-session-ended-notice {
  font-size: 14px;
  color: var(--nx-red, #b84a3a);
  background: var(--nx-red-soft, rgba(184, 74, 58, 0.12));
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
  margin: 0 0 12px;
}

/* Phase 2F: forced first-login password-change gate screen */
.password-gate-title {
  margin: 4px 0 0;
  font-size: 20px;
}

.password-gate-note {
  margin: 8px 0 20px;
  font-size: 14px;
  color: var(--nx-text-muted, #6b7280);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  width: 300px;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 18px 20px;
  color: var(--nx-white);
  background:
    linear-gradient(155deg, rgba(var(--ds-primary-border-rgb), 0.08), transparent 32%),
    linear-gradient(180deg, var(--ds-sidebar), var(--nx-green) 50%, var(--ds-sidebar) 100%);
  box-shadow: 10px 0 28px rgba(var(--ds-sidebar-rgb), 0.12);
}

.sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.035) 100%),
    radial-gradient(circle at 20% 8%, rgba(var(--ds-primary-border-rgb), 0.1), transparent 24%);
}

.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
}

.image-brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.brand.large {
  justify-content: center;
  border-radius: 24px;
  padding: 28px 26px;
  margin-bottom: 34px;
  background:
    linear-gradient(155deg, rgba(var(--ds-primary-border-rgb), 0.18), transparent 38%),
    linear-gradient(180deg, var(--ds-sidebar), var(--nx-green) 60%, var(--ds-sidebar));
  box-shadow: 0 18px 42px rgba(var(--ds-sidebar-rgb), 0.14);
}

.brand.large img {
  max-width: 330px;
}

.sidebar-brand {
  width: 100%;
  margin: 0 0 2px;
}

.sidebar-brand img {
  max-width: 190px;
  max-height: 44px;
}

.company-picker {
  display: grid;
  flex: 0 0 auto;
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow: visible;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 600;
}

.company-picker span {
  color: rgba(255, 255, 255, 0.84);
}

.company-picker select,
.login-panel input,
input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--nx-text);
  background: var(--nx-card);
  box-shadow: var(--shadow-line);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, transform 150ms ease;
}

.company-locked-name {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--nx-white);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-picker select option {
  color: var(--nx-text);
  background: var(--nx-white);
}

.company-picker select:hover,
.login-panel input:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: rgba(var(--ds-primary-border-rgb), 0.58);
}

.nav-list {
  display: grid;
  gap: 12px;
}

.nav-list button,
.sidebar-footer button,
.primary-button,
.secondary-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  min-height: 50px;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.nav-list button,
.sidebar-footer button {
  width: 100%;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}

.nav-list button svg,
.sidebar-footer button svg {
  width: 19px;
  height: 19px;
  opacity: 0.92;
}

.nav-problem-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(220, 38, 38, 0.28);
}

.nav-list button.active {
  color: var(--nx-white);
  border-color: rgba(var(--ds-primary-border-rgb), 0.3);
  background:
    linear-gradient(90deg, rgba(var(--ds-primary-border-rgb), 0.5), rgba(255, 255, 255, 0.065)),
    rgba(255, 255, 255, 0.055);
  box-shadow: inset 4px 0 0 rgba(var(--ds-primary-border-rgb), 0.86), 0 10px 22px rgba(0, 0, 0, 0.08);
}

.nav-list button:hover,
.sidebar-footer button:hover {
  color: var(--nx-white);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.sidebar-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.user-chip {
  display: block;
  color: var(--nx-white);
  font-weight: 600;
}

.content {
  min-width: 0;
  padding: 42px 44px 32px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.title-block p,
.title-block h1,
.title-block span {
  margin: 0;
}

.title-block p {
  color: var(--nx-green);
  font-size: 13px;
  font-weight: 600;
}

.title-block h1 {
  margin-top: 14px;
  color: var(--nx-text);
  font-size: clamp(36px, 4vw, 46px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.02;
}

.title-block h1:first-child {
  margin-top: 0;
}

.title-block span {
  display: block;
  margin-top: 14px;
  color: var(--nx-soft);
  font-size: 15px;
  line-height: 1.6;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.icon-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  color: var(--nx-text);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-card);
}

.icon-button i {
  position: absolute;
  top: -4px;
  right: -1px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: var(--ds-card);
  background: var(--ds-primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--nx-text);
  font-weight: 600;
}

.profile-chip span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  color: var(--ds-card);
  background: var(--ds-primary-hover);
  font-size: 13px;
}

.profile-chip svg {
  width: 16px;
  height: 16px;
}

.profile-chip .profile-chip-icon svg {
  color: var(--ds-card);
}

.notification-wrap {
  position: relative;
}

.notification-profile-chip {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--ds-card);
  background: var(--ds-primary-hover);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.notification-profile-chip > span {
  display: grid;
  place-items: center;
}

.notification-profile-chip svg {
  width: 16px;
  height: 16px;
}

.notification-profile-chip > i {
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--ds-card);
  border-radius: 999px;
  color: #fff;
  background: #dc3545;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.notification-profile-chip:hover,
.notification-profile-chip:focus-visible {
  background: var(--ds-sidebar);
  outline: 3px solid rgba(var(--ds-primary-rgb), 0.16);
}

.notification-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(25, 76, 119, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(7, 36, 68, 0.18);
}

.notification-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(25, 76, 119, 0.12);
}

.notification-panel header strong {
  color: var(--nx-text);
  font-size: 15px;
}

.notification-panel header small {
  color: var(--nx-soft);
  font-size: 12px;
  font-weight: 700;
}

.notification-panel > div {
  display: grid;
  max-height: min(420px, calc(100vh - 180px));
  overflow-y: auto;
}

.notification-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid rgba(25, 76, 119, 0.08);
  color: var(--nx-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.notification-item:hover {
  background: rgba(66, 125, 166, 0.08);
}

.notification-item > span {
  grid-row: span 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  color: var(--nx-green);
  background: rgba(66, 125, 166, 0.12);
}

.notification-item.danger > span {
  color: #b42318;
  background: rgba(244, 63, 94, 0.12);
}

.notification-item.warning > span {
  color: #a15c00;
  background: rgba(245, 158, 11, 0.14);
}

.notification-item.success > span {
  color: #166534;
  background: rgba(34, 197, 94, 0.13);
}

.notification-item strong,
.notification-item small {
  min-width: 0;
}

.notification-item strong {
  overflow: hidden;
  color: var(--nx-text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item small {
  color: var(--nx-soft);
  font-size: 12px;
  line-height: 1.35;
}

.notification-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  color: var(--nx-soft);
  font-size: 13px;
  font-weight: 700;
}

.notification-empty svg {
  color: var(--nx-green);
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--nx-text);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.status-pill svg {
  width: 12px;
  height: 12px;
  color: var(--ds-primary);
}

.dashboard-layout {
  display: grid;
  gap: 22px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(460px, 1.25fr);
  gap: 22px;
  align-items: stretch;
}

.metric-card,
.wide-panel,
.recent-panel,
.quick-panel,
.analytics-panel,
.settings-grid article,
.table-shell,
.empty-state,
.login-panel,
.modal-panel {
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  background: var(--nx-card);
  box-shadow: var(--shadow-card);
}

.metric-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 160px;
  padding: 24px 20px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.metric-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 999px;
  color: var(--nx-green-2);
  background: var(--nx-accent-soft);
}

.metric-icon svg {
  width: 26px;
  height: 26px;
}

.metric-content span {
  display: block;
  color: var(--nx-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.metric-content strong {
  display: block;
  margin-top: 12px;
  color: var(--nx-text);
  font-size: 31px;
  font-weight: 650;
  line-height: 1;
}

.metric-content small {
  display: block;
  margin-top: 12px;
  color: var(--nx-muted);
  font-size: 13px;
  font-weight: 400;
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  color: var(--nx-soft);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
}

.trend svg {
  width: 14px;
  height: 14px;
}

.trend.good {
  color: var(--ds-primary);
}

.trend.danger {
  color: var(--nx-red);
}

.trend.warn {
  color: var(--nx-orange);
}

.tone-red .metric-icon {
  color: var(--nx-red);
  background: var(--nx-red-soft);
}

.tone-amber .metric-icon {
  color: var(--nx-yellow);
  background: var(--nx-yellow-soft);
}

.tone-green .metric-icon,
.tone-blue .metric-icon {
  color: var(--ds-primary-hover);
}

.wide-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
}

.wide-panel h2,
.recent-panel h2,
.quick-panel h2,
.settings-grid h2,
.empty-state h2 {
  margin: 0 0 12px;
  color: var(--nx-text);
  font-size: 20px;
  font-weight: 650;
}

.wide-panel p,
.settings-grid p,
.empty-state p {
  margin: 0;
  color: var(--nx-soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

.production-visual {
  position: relative;
  width: min(420px, 80%);
  min-height: 140px;
  margin: 24px auto 4px;
  opacity: 0.58;
}

.visual-rail {
  position: absolute;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--ds-sidebar-rgb), 0.05), rgba(var(--ds-primary-border-rgb), 0.18));
}

.rail-a {
  left: 8%;
  right: 22%;
  top: 58%;
}

.rail-b {
  left: 43%;
  right: 8%;
  top: 34%;
}

.visual-node {
  position: absolute;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.2);
  border-radius: 18px;
  color: var(--nx-green-2);
  background: rgba(var(--ds-primary-border-rgb), 0.08);
}

.visual-node svg {
  width: 30px;
  height: 30px;
}

.node-a {
  left: 6%;
  top: 30%;
}

.node-b {
  left: 45%;
  top: 8%;
}

.node-c {
  right: 7%;
  top: 48%;
}

.panel-note {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-top: 8px;
  color: var(--nx-soft);
  text-align: center;
}

.panel-note strong {
  color: var(--ds-heading);
  font-size: 16px;
  font-weight: 600;
}

.panel-note span {
  color: var(--nx-muted);
  font-size: 14px;
}

.recent-panel,
.quick-panel {
  padding: 0;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px;
}

.panel-header h2 {
  margin: 0;
}

.secondary-button.compact {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

.compact-table {
  min-width: 100%;
  table-layout: fixed;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--ds-text);
  background: var(--ds-disabled-bg);
  font-size: 12px;
  font-weight: 500;
}

.tag-blue {
  color: var(--ds-info);
  background: var(--nx-blue-soft);
}

.quick-panel {
  padding: 24px 22px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.quick-grid button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 70px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  padding: 14px 13px;
  color: var(--nx-text);
  background: linear-gradient(180deg, var(--ds-card), var(--ds-card));
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.quick-grid button:hover {
  border-color: rgba(var(--ds-primary-border-rgb), 0.34);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.quick-grid svg {
  width: 24px;
  height: 24px;
}

.quick-grid strong,
.quick-grid small {
  display: block;
}

.quick-grid strong {
  font-size: 13px;
  font-weight: 650;
}

.quick-grid small {
  margin-top: 4px;
  color: var(--nx-soft);
  font-size: 11px;
}

.table-shell {
  overflow: hidden;
}

.stations-screen {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.stations-card {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.stations-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), var(--ds-card));
}

.stations-card-header.products-context-header {
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  box-shadow: none;
}

.stations-card-header > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stations-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: min(100%, 560px);
}

.stations-card-actions .primary-button,
.stations-card-actions .primary-button > span,
.stations-card-actions .primary-button svg {
  color: #fff;
}

.stations-filter-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(160px, .8fr) minmax(190px, .9fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg);
}

.station-filter-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.station-filter-field input,
.station-filter-field select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-input);
  padding: 0 12px;
  background: var(--ds-card);
  color: var(--ds-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}

.station-search {
  position: relative;
  display: block;
  min-width: 0;
}

.station-search svg {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  color: var(--nx-green-2);
  transform: translateY(-50%);
  pointer-events: none;
}

.station-search input {
  padding-right: 48px;
}

.stations-filter-card .clear-filter-button {
  align-self: end;
  min-height: 40px;
  white-space: nowrap;
}

.stations-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.stations-mobile-sort,
.stations-mobile-list {
  display: none;
}

.stations-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.stations-table th,
.stations-table td {
  border-right: 0;
  text-align: left;
  vertical-align: middle;
}

.stations-table th {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border));
  text-align: center;
  white-space: normal;
}

.stations-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent);
}

.stations-table th + th,
.stations-table td + td {
  border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent);
}

.stations-table th .sort-header {
  width: 100%;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: center;
  text-transform: inherit;
  white-space: normal;
}

.stations-table th .sort-header svg {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}

.stations-table th:last-child,
.stations-table td:last-child {
  width: 120px;
  text-align: center;
}

.stations-table tbody tr:last-child td {
  border-bottom: 0;
}

.stations-table tbody td:nth-child(3),
.stations-table tbody td:nth-child(4),
.stations-table .station-operator-column {
  text-align: center;
}

.stations-table .station-row-actions {
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.station-operator-count {
  display: inline-flex;
  min-width: 28px;
  justify-content: center;
  font-weight: 600;
}

.stations-table tr[data-action] {
  cursor: pointer;
}

.stations-table tr[data-action]:hover {
  background: rgba(var(--ds-primary-rgb), 0.04);
}

.station-realization-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 138px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  background: var(--ds-card);
  color: var(--ds-text);
}

.station-realization-pill svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.station-realization-pill strong {
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.station-realization-pill.internal {
  border-color: var(--ds-primary-border);
  background: var(--ds-info-bg);
  color: var(--ds-text);
}

.station-realization-pill.external {
  border-color: var(--ds-border);
  background: var(--ds-bg);
  color: var(--ds-text-light);
}

.station-realization-pill.internal strong,
.station-realization-pill.external strong {
  color: inherit;
}

.stations-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 34px 20px;
  border-top: 1px solid var(--ds-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--ds-bg));
}

.stations-pagination-summary {
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}

.stations-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.stations-page-size select {
  min-width: 86px;
}

.stations-empty-state {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 520px;
  padding: 56px 24px 70px;
  text-align: center;
}

.stations-empty-state h2 {
  margin: 4px 0 0;
  color: var(--nx-text);
  font-size: clamp(24px, 3vw, 32px);
}

.stations-empty-state p {
  margin: 0 0 12px;
  color: var(--ds-text);
  font-size: 17px;
}

.stations-empty-state small {
  color: var(--nx-text);
  font-style: italic;
}

.stations-empty-illustration {
  position: relative;
  width: 260px;
  height: 172px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--ds-primary-border-rgb), 0.38), transparent 64%),
    linear-gradient(180deg, rgba(246, 250, 253, 0.96), rgba(var(--ds-primary-border-rgb), 0.28));
}

.machine-body,
.machine-belt,
.machine-arm,
.machine-dot,
.machine-spark {
  position: absolute;
  color: var(--nx-green);
}

.machine-body {
  left: 58px;
  bottom: 40px;
  width: 56px;
  height: 62px;
  border: 3px solid currentColor;
  border-radius: 12px;
  box-shadow: inset 0 0 0 8px rgba(var(--ds-primary-border-rgb), 0.35);
}

.machine-body::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 12px;
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 16px 0 rgba(var(--ds-primary-rgb), 0.6);
}

.machine-belt {
  left: 92px;
  bottom: 36px;
  width: 122px;
  height: 26px;
  border: 3px solid currentColor;
  border-radius: 14px;
}

.machine-belt::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 30px 0 0 currentColor, 60px 0 0 currentColor, 90px 0 0 currentColor;
}

.machine-arm.arm-a {
  left: 128px;
  bottom: 82px;
  width: 62px;
  height: 42px;
  border-top: 4px solid currentColor;
  border-left: 4px solid currentColor;
  transform: skewY(-24deg);
}

.machine-arm.arm-b {
  left: 174px;
  bottom: 78px;
  width: 4px;
  height: 48px;
  background: currentColor;
}

.machine-dot {
  width: 16px;
  height: 16px;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: var(--nx-card);
}

.machine-dot.dot-a {
  left: 120px;
  bottom: 112px;
}

.machine-dot.dot-b {
  left: 166px;
  bottom: 100px;
}

.machine-spark {
  font-weight: 800;
  font-size: 24px;
}

.machine-spark.spark-a {
  left: 30px;
  top: 32px;
}

.machine-spark.spark-b {
  right: 26px;
  top: 40px;
}

.stations-tip-card {
  display: grid;
  grid-template-columns: 52px minmax(170px, 0.7fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 18px;
  margin: 0 34px 34px;
  padding: 18px;
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.42);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(var(--ds-primary-border-rgb), 0.26), rgba(246, 250, 253, 0.95));
}

.stations-tip-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 18px;
  color: var(--nx-green);
  background: rgba(var(--ds-primary-border-rgb), 0.42);
}

.stations-tip-card strong {
  color: var(--nx-text);
}

.stations-tip-card p {
  margin: 6px 0 0;
  color: var(--ds-text);
}

.stations-tip-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.stations-tip-chips span {
  min-height: 38px;
  padding: 9px 18px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  color: var(--nx-text);
  background: var(--nx-card);
  box-shadow: var(--shadow-line);
  font-weight: 700;
}

.stations-tip-chips small {
  color: var(--ds-text-light);
}

.station-create-modal {
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: 0;
}

.station-create-modal .station-modal-header {
  flex: 0 0 auto;
}

.station-modal-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 34px 34px 26px;
  border-bottom: 1px solid var(--nx-line);
}

.station-modal-header h2 {
  margin: 0;
  color: var(--nx-text);
  font-size: 26px;
  font-weight: 800;
}

.station-modal-header p {
  margin: 6px 0 0;
  color: var(--ds-text-light);
}

.station-modal-body {
  display: grid;
  gap: 22px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 34px 26px;
}

.station-create-modal .station-modal-body {
  flex: 1 1 auto;
  max-height: none;
}

.station-modal-section,
.station-usage-card {
  position: relative;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  background: var(--nx-card);
  box-shadow: var(--shadow-line);
}

.station-modal-section {
  padding: 24px;
}

.station-modal-section.compact-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 22px;
  align-items: start;
}

.station-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.station-section-title span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--ds-primary);
  font-weight: 800;
}

.station-section-title h3,
.station-section-title p {
  margin: 0;
}

.station-section-title h3 {
  color: var(--nx-text);
  font-size: 18px;
}

.station-section-title p {
  margin-top: 4px;
  color: var(--ds-text-light);
}

.station-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.8fr);
  gap: 22px 28px;
}

.station-form-grid .field,
.station-form-grid .field span {
  display: grid;
  gap: 8px;
}

.station-form-grid .field input,
.station-form-grid .field select,
.station-form-grid .field textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  color: var(--ds-heading);
  background: var(--nx-card);
  font: inherit;
  outline: none;
}

.station-form-grid .field textarea {
  min-height: 96px;
  padding: 14px 16px;
  resize: vertical;
}

.station-form-grid .field input:focus,
.station-form-grid .field select:focus,
.station-form-grid .field textarea:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 4px rgba(var(--ds-primary-rgb), 0.14);
}

.station-form-grid .field small {
  color: var(--ds-text-light);
}

.station-form-grid .wide-field,
.station-form-grid .full-field {
  grid-column: span 1;
}

.station-form-grid .full-field {
  grid-column: 1 / -1;
}

.field-error {
  color: var(--ds-danger) !important;
  font-weight: 700;
}

.station-info-note {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.72);
  border-radius: var(--radius-sm);
  color: var(--ds-primary-hover);
  background: rgba(246, 250, 253, 0.78);
}

.station-info-note svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--ds-primary);
}

.station-machines-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 90px;
  border: 1px dashed var(--nx-line);
  border-radius: var(--radius-sm);
  color: var(--ds-text);
  background: var(--ds-bg);
}

.station-machines-empty strong,
.station-machines-empty small {
  display: block;
}

.station-machines-empty small {
  margin-top: 4px;
  color: var(--ds-text-light);
}

.station-machines-cell strong,
.station-machines-cell small {
  display: block;
}

.station-machines-cell small,
.muted-cell {
  margin-top: 4px;
  color: var(--ds-text-light);
}

.station-row-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 92px;
  white-space: nowrap;
}

.station-machine-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.station-machine-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  background: var(--ds-bg);
}

.station-machine-row strong,
.station-machine-row small {
  display: block;
}

.station-machine-row small {
  margin-top: 4px;
  color: var(--ds-text-light);
}

.station-machine-backdrop {
  z-index: 60;
}

.station-machine-modal {
  display: flex;
  flex-direction: column;
  width: min(980px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  overflow: hidden;
  padding: 0;
}

.station-machine-modal .station-modal-header,
.station-machine-modal .station-modal-actions {
  flex: 0 0 auto;
}

.station-machine-modal .station-modal-body {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 30px;
}

.station-machine-modal .station-modal-section {
  min-width: 0;
  padding: 22px;
}

.station-machine-modal .station-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 18px 30px 22px;
  box-shadow: 0 -14px 28px rgba(var(--ds-sidebar-rgb), 0.06);
}

.machine-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.machine-form-grid .field,
.machine-form-grid input,
.machine-note-field,
.machine-note-field textarea {
  min-width: 0;
}

.machine-note-field {
  display: grid;
  gap: 8px;
}

.machine-note-field textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--ds-heading);
  background: var(--nx-card);
  font: inherit;
  resize: vertical;
  outline: none;
}

@media (max-height: 760px) {
  .station-machine-modal {
    max-height: calc(100vh - 32px);
  }

  .station-machine-modal .station-modal-header {
    padding: 22px 30px 18px;
  }

  .station-machine-modal .station-modal-body {
    gap: 18px;
    padding-block: 20px;
  }

  .station-machine-modal .station-modal-section {
    padding: 20px;
  }

  .station-machine-modal .station-modal-actions {
    padding-block: 16px 18px;
  }
}

.machine-note-field textarea:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 4px rgba(var(--ds-primary-rgb), 0.14);
}

.station-usage-card {
  display: grid;
  grid-template-columns: 54px minmax(180px, 0.75fr) minmax(0, 1.7fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(90deg, rgba(var(--ds-primary-border-rgb), 0.22), rgba(246, 250, 253, 0.94));
}

.station-usage-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  color: var(--ds-primary);
  background: rgba(var(--ds-primary-border-rgb), 0.44);
}

.station-usage-card strong {
  color: var(--nx-text);
}

.station-usage-card p {
  margin: 5px 0 0;
  color: var(--ds-text-light);
}

.station-usage-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.station-usage-chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  color: var(--ds-primary-hover);
  background: var(--nx-card);
  font-weight: 700;
}

.station-usage-chips svg {
  width: 15px;
  height: 15px;
  color: var(--ds-primary);
}

.team-empty-screen {
  display: grid;
  min-height: clamp(520px, calc(100vh - 250px), 760px);
  padding-top: 10px;
}

.team-empty-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  min-height: clamp(500px, 58vh, 680px);
  padding: clamp(42px, 6vw, 78px);
  border: 1px solid var(--ds-primary-border);
  border-radius: var(--ds-radius-card);
  background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--ds-primary-border) 28%, transparent), transparent 38%), var(--ds-card);
  box-shadow: var(--ds-shadow-card);
  text-align: center;
}

.team-empty-illustration {
  width: min(360px, 72vw);
  color: var(--ds-primary);
}

.team-empty-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.team-orbit {
  fill: none;
  stroke: var(--ds-primary-border);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
}

.team-spark,
.team-mini-dot {
  fill: var(--ds-primary-border);
}

.team-id-card {
  fill: var(--ds-card);
  stroke: var(--ds-primary-border);
  stroke-width: 2;
  filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--ds-heading) 8%, transparent));
}

.team-id-avatar,
.team-id-avatar-fill,
.team-person {
  fill: color-mix(in srgb, var(--ds-primary) 58%, var(--ds-card));
}

.team-id-line {
  fill: none;
  stroke: var(--ds-primary-border);
  stroke-width: 8;
  stroke-linecap: round;
}

.team-plus-circle {
  fill: var(--ds-primary);
  filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--ds-heading) 12%, transparent));
}

.team-plus {
  fill: none;
  stroke: var(--ds-card);
  stroke-width: 6;
  stroke-linecap: round;
}

.team-empty-card h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
}

.team-empty-card p {
  max-width: 680px;
  margin: 0;
  color: var(--ds-text-light);
  font-size: 18px;
  line-height: 1.65;
}

.team-first-member-button {
  margin-top: 8px;
  min-width: 250px;
  justify-content: center;
}

.team-first-member-button svg + svg {
  width: 14px;
  height: 14px;
  margin-left: -11px;
  margin-right: 4px;
}

.team-overview {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.team-list-card {
  overflow: hidden;
}

.team-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nx-line);
  background: var(--ds-card);
}

.team-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), .045);
}

.team-stat-card > span {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 0;
  color: var(--ds-primary);
  background: transparent;
}

.team-stat-card svg {
  width: 22px;
  height: 22px;
}

.team-stat-card em,
.team-stat-card small {
  display: block;
  color: var(--ds-text-light);
  font-style: normal;
}

.team-stat-card em {
  font-weight: 760;
}

.team-stat-card strong {
  display: block;
  margin: 4px 0;
  color: var(--ds-heading);
  font-size: 24px;
  line-height: 1;
}

.team-stat-card.tone-success > span { color: var(--ds-success); }
.team-stat-card.tone-warning > span { color: var(--ds-warning); }
.team-stat-card.tone-neutral > span { color: var(--ds-text-muted); }
.team-stat-card.tone-info > span { color: var(--ds-primary); }

.team-filter-card {
  grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(155px, 1fr)) auto;
}

.team-filter-card .station-filter-field input,
.team-filter-card .station-filter-field select {
  font-weight: 500;
}

.team-table-wrap {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 18px 12px;
  border: 1px solid var(--nx-table-frame-border);
  border-radius: 14px;
  background: var(--ds-card);
  box-shadow: 0 8px 24px rgba(var(--ds-sidebar-rgb), .055);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.team-mobile-list { display: none; }

.team-data-table {
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: collapse;
}

.team-data-table th,
.team-data-table td {
  border-right: 0;
}

.team-data-table th + th,
.team-data-table td + td {
  border-left: 1px solid var(--nx-table-column-border);
}

.team-data-table th {
  border-bottom-color: var(--nx-table-header-border);
  font-family: inherit;
  text-align: center;
  vertical-align: middle;
}

.team-data-table td {
  border-bottom-color: var(--nx-table-row-border);
}

.team-data-table th .sort-header { width: 100%; justify-content: center; font: inherit; font-weight: inherit; line-height: inherit; text-align: center; }
.team-data-table td:nth-child(2), .team-data-table td:nth-child(4), .team-data-table td:nth-child(7), .team-data-table td:nth-child(8) { text-align: center; }
.team-data-table td:nth-child(1), .team-data-table td:nth-child(3), .team-data-table td:nth-child(5), .team-data-table td:nth-child(6) { text-align: left; }

.team-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.team-data-table th:last-child,
.team-data-table td:last-child {
  width: 150px;
  text-align: center;
}

.team-name-cell,
.team-data-table td strong,
.team-data-table td small {
  display: block;
}

.team-note-cell {
  display: block;
  max-width: 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-data-table td small {
  margin-top: 5px;
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 500;
}

.has-active-filter {
  position: relative;
}

.has-active-filter::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-primary);
}

.team-phone-cell,
.team-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.team-phone-cell svg {
  width: 17px;
  height: 17px;
  color: var(--ds-primary);
}

.team-role-badge {
  max-width: 100%;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.team-role-badge > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.team-role-badge-director {
  color: #6B21A8;
  background: #F3E8FF;
  border-color: #C084FC;
}

.team-role-badge-administrator {
  color: #1D4ED8;
  background: #DBEAFE;
  border-color: #60A5FA;
}

.team-role-badge-worker {
  color: #0F766E;
  background: #CCFBF1;
  border-color: #5EEAD4;
}

.team-role-badge-neutral {
  color: #334155;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.team-row-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.team-station-count {
  display: inline-flex;
  min-width: 28px;
  justify-content: center;
  font-weight: 600;
}

.team-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.team-status-badge.active {
  color: #166534;
  background: #dcfce7;
}

.team-status-badge.inactive {
  color: #475569;
  background: #e2e8f0;
}

.team-status-action.deactivate {
  color: #475569;
}

.team-status-action.activate {
  color: #166534;
}

@media (max-width: 1320px) {
  .team-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .team-filter-card {
    grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(160px, 1fr));
  }
}

.active-page {
  color: var(--ds-card) !important;
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary) !important;
}

.team-compact-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 26px;
  padding: 18px;
  border: 1px solid var(--ds-primary-border);
  border-radius: var(--ds-radius-card);
  background: color-mix(in srgb, var(--ds-primary-light) 45%, var(--ds-card));
}

.team-compact-empty > svg {
  width: 24px;
  height: 24px;
  color: var(--ds-primary);
}

.team-compact-empty span {
  display: grid;
  flex: 1;
  gap: 4px;
}

.modal-panel.team-member-modal {
  width: min(1440px, calc(100vw - 40px));
  max-width: min(1440px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.team-member-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 26px 80px 20px 34px;
  border-bottom: 1px solid var(--nx-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ds-primary-light) 28%, var(--nx-card)) 0%, var(--nx-card) 100%);
}

.team-member-header > div {
  min-width: 0;
}

.team-member-header h2 {
  margin: 0;
}

.team-member-header p {
  margin: 6px 0 0;
  color: var(--ds-text-light);
}

.team-member-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 34px 104px;
  align-items: start;
}

.team-member-main,
.team-access-panel,
.team-form-card,
.team-access-card,
.team-invite-card,
.team-role-card,
.team-password-grid,
.team-link-row {
  min-width: 0;
}

.team-form-card,
.team-section-card,
.team-access-card,
.team-invite-card {
  border: 1px solid var(--nx-line);
  border-radius: var(--ds-radius-card);
  background: var(--nx-card);
  box-shadow: var(--ds-shadow-card);
}

.team-form-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.team-section-card {
  min-width: 0;
  padding: 20px;
}

.team-section-password,
.team-form-error {
  grid-column: 1 / -1;
}

.team-member-modal .field,
.team-member-modal .field input,
.team-member-modal .field select,
.team-member-modal .field textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.team-form-card h3,
.team-section-card h3,
.team-access-card h3,
.team-invite-card h3 {
  margin: 0 0 16px;
  color: var(--ds-heading);
}

.team-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.team-section-basics .team-two-col .field:nth-child(3),
.team-section-organization .team-full-field {
  grid-column: 1 / -1;
}

.team-full-field {
  margin-top: 16px;
}

.field b {
  color: var(--ds-danger);
}

.field em {
  display: block;
  margin-top: 7px;
  color: var(--ds-danger);
  font-style: normal;
  font-weight: 600;
}

.team-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.team-role-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--nx-line);
  border-radius: var(--ds-radius-input);
  background: var(--nx-card);
  color: var(--ds-text);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.team-role-card.selected {
  border-color: var(--ds-primary);
  background: color-mix(in srgb, var(--ds-primary-light) 54%, var(--ds-card));
  box-shadow: var(--ds-focus-ring);
}

.team-role-card span {
  color: var(--ds-primary);
}

.team-role-card svg {
  width: 22px;
  height: 22px;
}

.team-role-card small,
.team-muted {
  color: var(--ds-text-light);
  line-height: 1.5;
}

.team-role-card strong {
  overflow-wrap: normal;
  word-break: normal;
}

.team-role-note {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ds-info-bg);
  border-radius: var(--ds-radius-input);
  color: var(--ds-info);
  background: color-mix(in srgb, var(--ds-info-bg) 70%, var(--ds-card));
  font-weight: 600;
}

.team-role-note svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.team-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.team-password-toggle-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 180px;
}

.team-password-toggle-button,
.team-section-card,
.team-member-body > * {
  min-width: 0;
}

.team-field-error {
  display: block;
  margin-top: 8px;
  color: var(--ds-danger);
  font-style: normal;
  font-weight: 700;
}

.team-valid-password,
.team-invite-help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  color: var(--ds-success);
  font-weight: 700;
  line-height: 1.45;
}

.team-valid-password svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.team-invite-help {
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 650;
}

.team-form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--ds-danger) 28%, var(--ds-card));
  border-radius: var(--ds-radius-input);
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
  font-weight: 700;
}

.team-form-error svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.team-access-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

.team-access-card,
.team-invite-card {
  padding: 24px;
}

.team-access-block {
  display: grid;
  gap: 11px;
  padding: 4px 0 0;
  border-top: 1px solid var(--nx-line);
}

.team-access-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.team-access-block strong,
.team-access-block span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.team-access-block strong svg,
.team-access-block span svg {
  width: 16px;
  height: 16px;
  color: var(--ds-primary);
}

.team-access-block span {
  color: var(--ds-text-light);
}

.team-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
  gap: 10px;
  margin: 16px 0;
}

.team-link-row code {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: var(--ds-radius-input);
  color: var(--ds-primary-hover);
  background: var(--ds-bg);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-invite-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.team-invite-actions .compact-command,
.team-link-row .compact-command {
  min-width: 0;
  white-space: normal;
}

.team-member-modal .station-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 16px 34px 20px;
  border-top: 1px solid var(--nx-line);
  background: color-mix(in srgb, var(--nx-card) 96%, var(--ds-bg));
  box-shadow: 0 -14px 28px rgba(var(--ds-sidebar-rgb), 0.06);
}

@media (max-width: 640px) {
  .modal-panel.team-member-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .team-member-header,
  .team-member-body,
  .team-member-modal .station-modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .team-member-header {
    align-items: flex-start;
    gap: 12px;
    padding-top: 22px;
  }

  .team-member-modal .station-modal-actions {
    flex-direction: column-reverse;
  }

  .team-member-modal .station-modal-actions .primary-button,
  .team-member-modal .station-modal-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .team-password-grid {
    grid-template-columns: 1fr;
  }

  .team-password-toggle-button {
    width: 100%;
  }

  .team-section-card,
  .team-access-card,
  .team-invite-card {
    padding: 18px;
  }
}

@media (max-width: 1280px) {
  .modal-panel.team-member-modal {
    width: min(1240px, calc(100vw - 32px));
    max-width: min(1240px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
  }

  .team-member-body {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 22px;
    padding: 22px 28px 104px;
  }

  .team-role-grid {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }
}

@media (max-width: 1180px) {
  .team-filter-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .team-form-card,
  .team-member-body {
    grid-template-columns: 1fr;
  }

  .team-access-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .team-two-col,
  .team-access-panel,
  .team-link-row,
  .team-invite-actions,
  .team-password-grid {
    grid-template-columns: 1fr;
  }

  .team-role-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .modal-panel.team-member-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
}

.station-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 22px 34px 28px;
  border-top: 1px solid var(--nx-line);
  background: var(--nx-card);
}

.station-create-modal .station-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  box-shadow: 0 -14px 28px rgba(var(--ds-sidebar-rgb), 0.06);
}

.station-modal-actions .primary-button,
.station-modal-actions .secondary-button {
  min-width: 180px;
}

@media (max-width: 920px) {
  .station-form-grid,
  .machine-form-grid,
  .station-modal-section.compact-section,
  .station-usage-card {
    grid-template-columns: 1fr;
  }

  .station-usage-chips {
    justify-content: flex-start;
  }
}

@media (max-height: 760px) {
  .station-create-modal {
    max-height: calc(100vh - 28px);
  }

  .station-create-modal .station-modal-header {
    padding: 22px 30px 18px;
  }

  .station-create-modal .station-modal-body {
    gap: 18px;
    padding: 20px 30px;
  }

  .station-create-modal .station-modal-section {
    padding: 20px;
  }

  .station-create-modal .station-modal-actions {
    padding: 16px 30px 18px;
  }
}

@media (max-width: 640px) {
  .station-create-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .station-create-modal .station-modal-header,
  .station-create-modal .station-modal-body,
  .station-create-modal .station-modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .station-create-modal .station-modal-header {
    align-items: flex-start;
    gap: 12px;
    padding-top: 22px;
  }

  .station-create-modal .station-modal-section {
    padding: 18px;
  }

  .station-create-modal .station-modal-actions {
    flex-direction: column-reverse;
  }

  .station-create-modal .station-modal-actions .primary-button,
  .station-create-modal .station-modal-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .station-machine-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .station-machine-modal .station-modal-header,
  .station-machine-modal .station-modal-body,
  .station-machine-modal .station-modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .station-machine-modal .station-modal-header {
    align-items: flex-start;
    gap: 12px;
    padding-top: 22px;
  }

  .station-machine-modal .station-modal-section {
    padding: 18px;
  }

  .station-machine-modal .station-modal-actions {
    flex-direction: column-reverse;
  }

  .station-machine-modal .station-modal-actions .primary-button,
  .station-machine-modal .station-modal-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 780px;
}

th,
td {
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

tbody tr {
  transition: background 150ms ease;
}

tbody tr:hover {
  background: rgba(var(--ds-primary-border-rgb), 0.06);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.analytics-panel {
  display: grid;
  gap: 24px;
  padding: 34px;
}

.bar-row {
  display: grid;
  grid-template-columns: 190px minmax(140px, 1fr) 64px;
  align-items: center;
  gap: 18px;
}

.bar-row span {
  color: var(--nx-soft);
  font-weight: 500;
}

.bar-row div {
  height: 14px;
  border-radius: 999px;
  background: #eef1ef;
  overflow: hidden;
}

.bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--nx-accent);
}

.bar-row strong {
  color: var(--nx-text);
  font-weight: 600;
  text-align: right;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.settings-grid article {
  padding: 30px;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 42px;
  color: var(--nx-soft);
  text-align: center;
}

.empty-state svg {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  color: var(--nx-accent);
}

.content-signature {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
  opacity: 0.82;
}

.content-signature img {
  width: 72px;
  height: auto;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--ds-primary-border-rgb), 0.1), transparent 32%),
    linear-gradient(135deg, #ffffff, var(--nx-bg));
}

.login-panel {
  width: min(100%, 470px);
  padding: 40px;
}

.login-panel form {
  display: grid;
  gap: 20px;
}

.login-panel label {
  display: grid;
  gap: 10px;
  color: var(--nx-soft);
  font-size: 14px;
  font-weight: 600;
}

.primary-button {
  justify-content: center;
  min-height: 52px;
  border: 1px solid var(--nx-green);
  color: var(--nx-white);
  background: var(--nx-green);
  box-shadow: 0 12px 24px rgba(var(--ds-sidebar-rgb), 0.14);
}

.primary-button:hover {
  background: var(--nx-green-2);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(var(--ds-sidebar-rgb), 0.18);
}

.secondary-button {
  border: 1px solid var(--nx-line);
  color: var(--nx-text);
  background: var(--nx-white);
}

.secondary-button:hover {
  border-color: rgba(var(--ds-primary-border-rgb), 0.34);
  background: rgba(var(--ds-primary-border-rgb), 0.06);
  transform: translateY(-1px);
}

.error-box {
  border: 1px solid rgba(194, 58, 58, 0.26);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--nx-red);
  background: var(--nx-red-soft);
  font-weight: 500;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(var(--ds-sidebar-rgb), 0.38);
  backdrop-filter: none;
  filter: none;
}

.modal-panel {
  width: min(100%, 580px);
  padding: 34px;
}

.unsaved-modal-guard {
  z-index: 2600;
  background: rgba(var(--ds-sidebar-rgb), 0.28);
}

.unsaved-modal-panel {
  width: min(calc(100vw - 48px), 520px);
}

.unsaved-modal-panel h2 {
  margin: 0 0 12px;
}

.unsaved-modal-panel p {
  margin: 0 0 24px;
  color: var(--nx-soft);
  line-height: 1.6;
}

.unsaved-modal-panel .modal-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.content-wide {
  overflow-x: clip;
  padding: 36px 34px 24px;
  min-width: 0;
}

.team-actions-trigger { min-width: 92px; justify-content: center; }
.team-action-menu-layer { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.team-action-menu { position: fixed; width: 210px; max-width: calc(100vw - 16px); display: grid; gap: 3px; padding: 7px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); box-shadow: 0 16px 38px rgba(var(--ds-sidebar-rgb),.2); }
.team-action-menu button { width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.team-action-menu button:hover, .team-action-menu button:focus-visible { background: var(--ds-bg-soft); outline: 2px solid rgba(var(--ds-primary-rgb),.18); }
.team-action-menu button.danger { color: var(--ds-danger, #b42318); }
.shipment-action-menu-layer { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.shipment-action-menu { position: fixed; width: 244px; max-width: calc(100vw - 16px); display: grid; gap: 3px; padding: 7px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); box-shadow: 0 16px 38px rgba(var(--ds-sidebar-rgb),.2); }
.shipment-action-menu button { width: 100%; min-height: 38px; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-text); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.shipment-action-menu button:hover, .shipment-action-menu button:focus-visible { background: var(--ds-bg-soft); outline: 2px solid rgba(var(--ds-primary-rgb),.18); }
.shipment-actions-trigger { min-width: 38px; }
.list-actions-trigger { min-width: 38px; }
.list-action-menu-layer { position: fixed; inset: 0; z-index: 2400; background: transparent; }
.list-action-menu { position: fixed; display: grid; gap: 3px; width: 280px; max-width: calc(100vw - 16px); padding: 7px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); box-shadow: 0 18px 44px rgba(var(--ds-sidebar-rgb),.22); }
.list-action-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-text); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.list-action-menu button span { white-space: nowrap; }
.list-action-menu button:hover, .list-action-menu button:focus-visible { background: var(--ds-bg-soft); outline: 2px solid rgba(var(--ds-primary-rgb),.18); }
.list-action-menu button svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ds-primary); }
.list-action-menu button.danger, .list-action-menu button.danger svg { color: var(--ds-danger, #b42318); }
.invoice-actions-trigger { justify-content: center; min-width: 96px; min-height: 36px; padding-inline: 12px; white-space: nowrap; }
.invoice-actions-trigger svg { width: 15px; height: 15px; }
.invoice-action-menu-layer { position: fixed; inset: 0; z-index: 2400; background: transparent; }
.invoice-action-menu { position: fixed; display: grid; gap: 3px; width: 224px; max-width: calc(100vw - 16px); padding: 7px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); box-shadow: 0 18px 44px rgba(var(--ds-sidebar-rgb),.22); }
.invoice-action-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-text); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.invoice-action-menu button:hover, .invoice-action-menu button:focus-visible { background: var(--ds-bg-soft); outline: 2px solid rgba(var(--ds-primary-rgb),.18); }
.invoice-action-menu button svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ds-primary); }
.invoice-action-menu button.danger, .invoice-action-menu button.danger svg { color: var(--ds-danger, #b42318); }
.team-email-modal { width: min(520px, calc(100vw - 24px)); }

.settings-package-support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-package-card{display:flex;gap:16px;padding:22px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-input);background:var(--ds-card)}.settings-package-card>svg{width:28px;height:28px;color:var(--ds-primary);flex:0 0 auto}.settings-package-card small{font-size:11px;color:var(--ds-text-light);font-weight:700}.settings-package-card h3{margin:5px 0 7px;color:var(--ds-heading)}.settings-package-card p,.settings-package-card span{display:block;margin:0 0 7px;color:var(--ds-text-light)}.settings-package-card a{color:var(--ds-primary);font-weight:800;text-decoration:none}.settings-package-card a:hover{text-decoration:underline}

.wo-label-backdrop{z-index:1250}.wo-label-modal{width:min(1180px,calc(100vw - 40px));max-height:calc(100vh - 30px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #c8d9e5;border-radius:22px;box-shadow:0 28px 80px rgba(5,29,48,.26)}.wo-label-body{padding:20px 24px;overflow:auto;display:grid;gap:16px;background:#f5f9fc}.wo-label-step{padding:17px;border:1px solid #d3e1ea;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(18,59,93,.045)}.wo-label-step h3{margin:0 0 12px;color:#153b5a;font-size:15px}.wo-label-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.wo-label-choice,.wo-label-preset,.wo-label-item{border:1px solid #cbdbe6;background:#f9fbfc;border-radius:12px;min-height:52px;padding:11px 13px;text-align:left;color:#173b57;cursor:pointer}.wo-label-choice{display:flex;flex-direction:column;gap:4px}.wo-label-choice small,.wo-label-preset small,.wo-label-item small{color:#60758a}.wo-label-choice.active,.wo-label-preset.active,.wo-label-item.selected{border-color:#2f78a5;background:#eaf4fa;box-shadow:0 0 0 2px rgba(47,120,165,.12)}.wo-label-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.wo-label-item{display:flex;align-items:center;gap:10px}.wo-label-item>span{width:24px;height:24px;border:1px solid #b7cedd;border-radius:7px;display:grid;place-items:center;flex:0 0 auto}.wo-label-item>span svg{width:16px}.wo-label-item div{min-width:0;display:flex;flex-direction:column;gap:3px}.wo-label-preset-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.wo-label-preset{display:flex;min-height:58px;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:3px}.wo-label-custom{display:flex;align-items:end;gap:10px;margin-top:12px}.wo-label-custom label{display:grid;gap:5px;color:#315875;font-size:12px;font-weight:700}.wo-label-custom input{width:140px;min-height:44px;border:1px solid #bfd3e1;border-radius:10px;padding:8px 10px}.wo-label-preview{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:18px;align-items:center;padding:18px;border-radius:16px;background:linear-gradient(145deg,#e9f3f8,#f9fbfc);border:1px solid #c7dce8}.wo-label-preview-shape{aspect-ratio:var(--label-ratio);width:min(100%,280px);max-height:180px;border:1px solid #7899ae;border-radius:10px;background:#fff;padding:8px;display:flex;justify-content:space-between;gap:8px;box-shadow:0 8px 20px rgba(10,45,70,.12)}.wo-label-preview-shape div{min-width:0;display:flex;flex-direction:column;gap:3px}.wo-label-preview-shape b{color:#174665}.wo-label-preview-shape strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wo-label-preview-shape span{font-size:11px;color:#526f83}.wo-label-preview-shape i{width:34%;max-width:72px;align-self:end;color:#102e45}.wo-label-preview-shape i svg{width:100%;height:auto}.wo-label-preview h3{margin:0 0 5px}.wo-label-preview p{margin:0 0 4px;font-weight:800;color:#174665}.wo-label-preview small{color:#60758a}.wo-label-small-warning{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid #ead29b;background:#fff8e6;color:#75540d}.wo-label-small-warning svg{width:20px;flex:0 0 auto}.wo-label-summary{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:13px 15px;border:1px solid #bcd7e7;border-radius:13px;background:#eaf5fb;color:#174665}.wo-label-summary span{padding:5px 9px;border-radius:8px;background:#fff;font-size:12px}.wo-print-loading.compact{min-height:52px}
.wo-label-template-editor>header{display:flex;justify-content:space-between;gap:12px;margin-bottom:13px}.wo-label-template-editor>header h3{margin:0 0 4px}.wo-label-template-editor>header p{margin:0;color:#61798c;font-size:.82rem}.wo-label-field-list{display:grid;gap:7px}.wo-label-field-row{display:grid;grid-template-columns:minmax(150px,1.3fr) auto minmax(104px,.7fr) auto minmax(120px,.8fr);align-items:center;gap:10px;padding:9px 11px;border:1px solid #d7e3eb;border-radius:11px;background:#fbfdfe;color:#214861}.wo-label-field-row>strong{font-size:.82rem}.wo-label-field-row label,.wo-label-custom-text-row label,.wo-label-page-grid label{display:flex;align-items:center;gap:6px;color:#587185;font-size:.72rem;font-weight:700}.wo-label-field-row input[type=number],.wo-label-field-row select,.wo-label-custom-text-row input[type=number],.wo-label-custom-text-row select,.wo-label-page-grid input{min-height:36px;border:1px solid #c9dbe6;border-radius:8px;background:#fff;padding:6px 8px;color:#173d59;font:inherit;box-sizing:border-box}.wo-label-field-row input[type=number]{width:82px}.wo-label-custom-text-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.wo-label-custom-text-row{display:grid;gap:8px;padding:11px;border:1px solid #d7e3eb;border-radius:12px;background:#fbfdfe}.wo-label-custom-text-row>header,.wo-label-custom-text-row>footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.wo-label-custom-text-row>header strong{font-size:.8rem;color:#214861}.wo-label-custom-text-row textarea{width:100%;min-height:62px;resize:vertical;border:1px solid #c9dbe6;border-radius:9px;padding:8px 9px;box-sizing:border-box;color:#173d59;font:inherit}.wo-label-custom-text-row>footer{flex-wrap:wrap}.wo-label-custom-text-row>footer small{margin-left:auto;color:#6b8191}.wo-label-custom-text-row input[type=number]{width:76px}.wo-label-page-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.wo-label-page-grid label{display:grid;gap:5px}.wo-label-page-grid label.is-disabled{opacity:.48}.wo-label-page-grid input{width:100%;min-width:0}.wo-label-print-guidance{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#eef6fa;color:#526f83;font-size:.78rem}.wo-label-template-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}.wo-label-editor-footer{gap:10px}.wo-label-editor-footer .primary-button{margin-left:auto}

@media(max-width:900px){.settings-package-support-grid{grid-template-columns:1fr}.wo-label-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wo-label-modal{width:calc(100vw - 20px)}.wo-label-body{padding:16px}.wo-label-item-grid{grid-template-columns:1fr}.wo-label-field-row{grid-template-columns:minmax(140px,1fr) repeat(2,auto)}.wo-label-field-row>label:nth-of-type(2),.wo-label-field-row>label:nth-of-type(4){grid-column:auto}.wo-label-custom-text-list{grid-template-columns:1fr}.wo-label-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wo-label-backdrop{padding:0}.wo-label-modal{width:100vw;height:100dvh;max-height:none;border-radius:0}.wo-label-body{padding:12px}.wo-label-choice-grid,.wo-label-preset-grid{grid-template-columns:1fr 1fr}.wo-label-choice,.wo-label-preset,.wo-label-item{min-height:48px}.wo-label-custom{display:grid;grid-template-columns:1fr 1fr}.wo-label-custom input{width:100%}.wo-label-custom button{grid-column:1/-1;min-height:44px}.wo-label-preview{grid-template-columns:1fr}.wo-label-preview-shape{max-height:145px}.wo-print-footer{padding:12px}.wo-print-footer button{min-height:44px}.wo-label-field-row{grid-template-columns:1fr 1fr;align-items:end}.wo-label-field-row>strong{grid-column:1/-1}.wo-label-field-row label{justify-content:flex-start}.wo-label-page-grid{grid-template-columns:1fr 1fr}.wo-label-template-actions{display:grid;grid-template-columns:1fr}.wo-label-editor-footer{grid-template-columns:1fr}.wo-label-editor-footer .primary-button{margin-left:0}.settings-package-card{padding:17px}}

/* Materials 3A: versioned base-product BOM */
.product-bom-panel { position: relative; overflow: hidden; border: 1px solid #c9dbea; box-shadow: 0 18px 45px rgba(20, 55, 86, .08); }
.product-bom-head { align-items: flex-start; gap: 20px; }
.product-bom-head p { margin: 5px 0 0; color: #58708a; }
.product-bom-head-actions, .product-bom-row-actions, .product-bom-actions > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-bom-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0 12px; }
.product-bom-lines { display: grid; gap: 14px; }
.product-bom-line { display: grid; grid-template-columns: 40px minmax(150px, 1.2fr) minmax(112px, .55fr) minmax(100px, .45fr) minmax(150px, .72fr) minmax(170px, .82fr) minmax(140px, .9fr) auto; gap: 12px; align-items: stretch; min-width: 0; padding: 16px; border: 1px solid #cbddea; border-radius: 16px; background: linear-gradient(145deg, #fff, #fbfdff); box-shadow: 0 8px 24px rgba(22, 62, 91, .065); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.product-bom-line:hover, .product-bom-line:focus-within { border-color: #78aaca; box-shadow: 0 14px 34px rgba(24, 73, 108, .11); transform: translateY(-1px); }
.product-bom-line > div, .product-bom-line label { min-width: 0; }
.product-bom-material { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; padding: 7px 4px; }
.product-bom-code { color: #123f60; font-size: .92rem; letter-spacing: .025em; overflow-wrap: anywhere; }
.product-bom-name { color: #60758b; line-height: 1.35; overflow-wrap: anywhere; }
.product-bom-field { display: flex; min-width: 0; min-height: 72px; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid #d5e3ed; border-radius: 11px; background: #f7fafc; }
.product-bom-field > span { color: #5c7187; font-size: .72rem; font-weight: 750; line-height: 1.25; }
.product-bom-field .product-bom-value { color: #173f5e; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; }
.product-bom-field.is-centered { align-items: center; text-align: center; }
.product-bom-field.is-money { align-items: flex-end; text-align: right; }
.product-bom-field.is-money .product-bom-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-bom-field.is-note { align-items: flex-start; text-align: left; }
.product-bom-line input { width: 100%; min-height: 42px; border: 1px solid #c8daea; border-radius: 9px; padding: 8px 10px; }
.product-bom-order { display: grid; place-items: center; align-self: center; width: 34px; height: 34px; border: 1px solid #c8ddea; border-radius: 50%; background: linear-gradient(145deg, #f5fafd, #e7f2f8); color: #1b5d86; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.product-bom-unit { color: #234d6d; }
.product-bom-unit input[readonly] { color: #234d6d; font-weight: 800; background: #f3f7fa; cursor: default; }
.product-bom-cost-summary { display: grid; gap: 8px; margin-top: 20px; padding: 20px 22px; border: 1px solid #a9cfba; border-radius: 16px; background: linear-gradient(135deg, #fbfefc 0%, #edf8f1 100%); box-shadow: 0 14px 34px rgba(25, 85, 58, .1), inset 0 1px 0 rgba(255,255,255,.8); }
.product-bom-cost-summary > span { color: #3f6175; font-size: .8rem; font-weight: 800; letter-spacing: .015em; }
.product-bom-cost-summary > strong { color: #17633f; font-size: clamp(1.55rem, 2.7vw, 2.25rem); font-variant-numeric: tabular-nums; line-height: 1.08; }
.product-bom-cost-summary small { color: #60758b; font-size: .78rem; line-height: 1.4; }
.product-bom-cost-summary.partial, .product-bom-cost-summary.unavailable { border-color: #ead39d; background: linear-gradient(145deg, #fffdf8, #fff8e8); box-shadow: 0 10px 28px rgba(136, 91, 17, .07); }
.product-bom-cost-summary.partial > strong, .product-bom-cost-summary.unavailable > strong { color: #8a5a0a; }
.product-bom-line .field-error { color: #b42318; font-size: .72rem; font-weight: 700; }
.product-bom-line input[aria-invalid="true"] { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217,45,32,.09); }
.product-bom-error { margin: 14px 0 0; }
.product-bom-row-actions button, .product-bom-picker header > button, .product-bom-preview header > button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid #cbddea; border-radius: 9px; background: #fff; color: #143d5c; cursor: pointer; }
.product-bom-row-actions button.danger { color: #b42318; border-color: #f2b8b5; }
.product-bom-row-actions button:disabled { opacity: .35; cursor: default; }
.product-bom-note { margin-top: 16px; }
.product-bom-note textarea { min-height: 76px; }
.product-bom-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #dce7ef; color: #60758b; }
.product-bom-picker { position: absolute; z-index: 12; inset: 16px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid #aecde1; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 22px 65px rgba(15, 42, 66, .22); }
.product-bom-picker > header { display: flex; justify-content: space-between; align-items: center; }
.product-bom-picker h4 { margin: 2px 0 0; }
.product-bom-picker-list { display: grid; gap: 7px; max-height: 360px; overflow-y: auto; }
.product-bom-picker-list > button { display: grid; grid-template-columns: minmax(90px, .5fr) minmax(160px, 1.4fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid #d4e2ec; border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.product-bom-picker-list > button:hover, .product-bom-picker-list > button:focus-visible { border-color: #64a0c6; background: #f2f8fc; }
.product-bom-picker-list em { color: #41647e; font-style: normal; font-weight: 800; }

@media (max-width: 1100px) {
  .product-bom-line { grid-template-columns: 44px repeat(2, minmax(0, 1fr)); }
  .product-bom-order { grid-column: 1; grid-row: 1; }
  .product-bom-material { grid-column: 2 / 4; grid-row: 1; }
  .product-bom-quantity, .product-bom-live-price { grid-column: 2; }
  .product-bom-unit, .product-bom-line-cost { grid-column: 3; }
  .product-bom-line-note, .product-bom-row-actions { grid-column: 2 / 4; }
  .product-bom-row-actions { justify-content: flex-end; }
}

@media (max-width: 700px) {
  .product-bom-head, .product-bom-actions { align-items: stretch; flex-direction: column; }
  .product-bom-head-actions, .product-bom-actions > div { width: 100%; }
  .product-bom-head-actions .primary-button, .product-bom-actions button { flex: 1; min-height: 44px; }
  .product-bom-line { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 13px 11px; }
  .product-bom-material { grid-column: 2; grid-row: 1; }
  .product-bom-quantity, .product-bom-unit, .product-bom-live-price, .product-bom-line-cost, .product-bom-line-note { grid-column: 1 / -1; }
  .product-bom-unit { grid-row: auto; }
  .product-bom-field { min-height: 68px; }
  .product-bom-field.is-money { align-items: flex-start; text-align: left; }
  .product-bom-row-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-end; }
  .product-bom-cost-summary { padding: 18px 16px; }
  .product-bom-picker { position: fixed; inset: 0; border-radius: 0; padding: 16px; }
  .product-bom-picker-list > button { grid-template-columns: 1fr auto; }
  .product-bom-picker-list > button span { grid-column: 1 / -1; }
}

/* Materials 3B: frozen work-order item BOM snapshots */
.wo-material-specification-tab { min-width: 0; }
.wo-material-snapshot-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.wo-material-snapshot-heading small { color: #58758b; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.wo-material-snapshot-heading h3 { margin: 4px 0; color: #102d45; }
.wo-material-snapshot-heading p { margin: 0; color: #60758b; }
.wo-material-snapshot-heading > span { padding: 7px 11px; border: 1px solid #c9ddea; border-radius: 999px; background: #f4f9fc; color: #245879; font-weight: 800; white-space: nowrap; }
.wo-material-snapshot-grid { display: grid; gap: 14px; min-width: 0; }
.wo-material-snapshot-card { min-width: 0; padding: 17px; border: 1px solid #cbddea; border-radius: 16px; background: linear-gradient(145deg,#fff,#f9fcfe); box-shadow: 0 10px 28px rgba(21,61,90,.075); }
.wo-material-snapshot-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wo-material-snapshot-card > header small { color: #1a5b83; font-weight: 850; letter-spacing: .03em; }
.wo-material-snapshot-card > header h4 { margin: 4px 0 0; color: #122f47; font-size: 1.05rem; }
.wo-material-snapshot-card > dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.wo-material-snapshot-card > dl > div { min-width: 0; padding: 10px 12px; border: 1px solid #d8e5ee; border-radius: 10px; background: #f7fafc; }
.wo-material-snapshot-card dt { color: #63798c; font-size: .72rem; font-weight: 750; }
.wo-material-snapshot-card dd { margin: 5px 0 0; color: #173f5e; font-weight: 800; overflow-wrap: anywhere; }
.wo-material-snapshot-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.wo-material-snapshot-actions button { min-height: 44px; }
.wo-material-snapshot-detail { margin-top: 15px; padding-top: 15px; border-top: 1px solid #d9e5ed; }
.wo-material-snapshot-detail > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #47677c; }
.wo-material-snapshot-detail > div { display: grid; gap: 9px; }
.wo-material-snapshot-detail article { display: grid; grid-template-columns: minmax(150px,1fr) minmax(0,2fr); gap: 14px; padding: 12px; border: 1px solid #d8e4ed; border-radius: 11px; background: #fff; }
.wo-material-snapshot-detail article > div { display: grid; align-content: center; gap: 3px; min-width: 0; }
.wo-material-snapshot-detail article > div span { color: #60758b; overflow-wrap: anywhere; }
.wo-material-snapshot-detail article dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 0; }
.wo-material-snapshot-detail article dl > div { min-width: 0; padding: 8px 10px; border-radius: 9px; background: #f5f9fc; }
.wo-material-snapshot-empty { margin-top: 15px; padding: 14px; border: 1px dashed #d6bd79; border-radius: 11px; background: #fffaf0; color: #795417; }
.material-completion-refresh-modal .modal-actions button { min-height: 44px; }

@media (max-width: 900px) {
  .wo-material-snapshot-card > dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wo-material-snapshot-detail article { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wo-material-snapshot-heading,.wo-material-snapshot-card > header,.wo-material-snapshot-detail > header { flex-direction: column; align-items: stretch; }
  .wo-material-snapshot-heading > span { align-self: flex-start; }
  .wo-material-snapshot-card { padding: 13px 11px; }
  .wo-material-snapshot-card > dl,.wo-material-snapshot-detail article dl { grid-template-columns: 1fr; }
  .wo-material-snapshot-actions { display: grid; grid-template-columns: 1fr; }
  .wo-material-snapshot-actions button { width: 100%; }
  .material-completion-refresh-modal .modal-actions { display: grid; grid-template-columns: 1fr; }
  .material-completion-refresh-modal .modal-actions button { width: 100%; }
}

.topbar-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.topbar-compact .topbar-actions {
  justify-content: flex-end;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nx-soft);
  font-size: 13px;
  font-weight: 500;
}

.breadcrumb button,
.plain-icon {
  border: 0;
  color: inherit;
  background: transparent;
}

.breadcrumb strong {
  color: var(--nx-text);
}

.detail-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.detail-heading h1 {
  margin-top: 14px;
  font-size: clamp(30px, 3vw, 42px);
  overflow-wrap: anywhere;
}

.detail-action {
  min-height: 50px;
  border-color: var(--nx-line-strong);
  padding: 0 18px;
}

.danger-action {
  border-color: rgba(194, 58, 58, 0.28);
  color: var(--ds-danger);
}

.danger-action:hover {
  border-color: rgba(194, 58, 58, 0.4);
  background: rgba(194, 58, 58, 0.06);
}

.danger-button {
  border-color: rgba(194, 58, 58, 0.34);
  color: var(--nx-red);
  background: var(--nx-white);
  box-shadow: none;
}

.danger-button:hover {
  border-color: rgba(194, 58, 58, 0.5);
  color: var(--nx-red);
  background: var(--nx-red-soft);
  box-shadow: 0 10px 22px rgba(194, 58, 58, 0.08);
}

.success-action {
  border-color: rgba(var(--ds-primary-rgb), 0.24);
  color: var(--ds-primary);
  background: rgba(var(--ds-primary-rgb), 0.08);
}

.work-order-detail {
  display: grid;
  gap: 26px;
  min-width: 0;
  max-width: 100%;
}

.back-overview-button {
  margin-bottom: 16px;
}

.edit-code-shortcut {
  width: 34px;
  height: 34px;
  color: var(--ds-sidebar);
}

.work-order-info-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.work-order-info-panel .soft-icon {
  width: 60px;
  height: 60px;
}

.work-order-info-panel dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  margin: 0;
}

.work-order-info-panel dl div {
  display: grid;
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  border-left: 1px solid var(--nx-line);
}

.work-order-info-panel dt {
  color: var(--nx-soft);
  font-size: 13px;
  font-weight: 600;
}

.work-order-info-panel dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ds-sidebar);
  font-size: 15px;
  font-weight: 760;
}

.work-order-info-panel dd svg {
  width: 16px;
  height: 16px;
}

.info-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.info-dot.good {
  background: var(--ds-primary);
}

.info-dot.warn {
  background: #f2a400;
}

.work-order-qr {
    display: grid;
    width: 98px;
    height: 98px;
  place-items: center;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  background: var(--ds-card);
}

.work-order-qr span {
  display: grid;
  grid-template-columns: repeat(7, 10px);
  gap: 3px;
}

.work-order-qr i {
  width: 10px;
  height: 10px;
  background: var(--ds-card);
}

.work-order-qr i.on {
  background: var(--ds-sidebar);
}

.work-order-qr .valid-qr {
  width: 82px;
  height: 82px;
    display: block;
  }

.work-order-qr-stack {
    display: grid;
    justify-items: center;
    gap: 8px;
  }

.qr-download-button {
    border: 0;
    background: transparent;
    color: var(--nx-green);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
  }

.qr-download-button svg {
    width: 14px;
    height: 14px;
  }

.detail-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--nx-line);
}

.detail-tabs button {
  min-height: 52px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 10px;
  color: var(--nx-soft);
  background: transparent;
  font-weight: 600;
}

.detail-tabs button.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
}

.detail-card {
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  background: var(--nx-card);
  box-shadow: var(--shadow-card);
}

.general-card,
.summary-card,
.items-table-card,
.operation-card,
.status-card,
.problem-cta,
.problem-list,
.problem-thread,
.problem-side .detail-card,
.support-panels .detail-card {
  padding: 26px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.section-title h2,
.detail-card h2 {
  margin: 0;
  color: var(--nx-text);
  font-size: 18px;
  font-weight: 700;
}

.soft-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--ds-primary);
  background: rgba(var(--ds-primary-border-rgb), 0.14);
}

.general-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 24px 30px;
}

.field {
  display: grid;
  gap: 10px;
  color: var(--nx-text);
  font-size: 14px;
  font-weight: 500;
}

.field span,
.qr-block span {
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 600;
}

.wide-field {
  grid-column: 1 / -1;
}

.field textarea {
  min-height: 82px;
  resize: vertical;
}

.work-order-general-grid {
  align-items: start;
}

.work-order-general-grid .field {
  min-width: 0;
  grid-template-rows: auto auto minmax(18px, auto);
  align-content: start;
}

.work-order-general-grid .field > span:first-child {
  display: flex;
  min-height: 38px;
  align-items: flex-end;
  line-height: 1.35;
}

.work-order-general-grid .inline-edit-control,
.work-order-general-grid input,
.work-order-general-grid select,
.work-order-general-grid textarea {
  width: 100%;
  min-width: 0;
}

.work-order-general-grid .field-helper {
  display: block;
  min-height: 18px;
  color: var(--nx-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.work-order-general-grid .empty-helper {
  visibility: hidden;
}

.inline-edit-control {
  position: relative;
  display: block;
}

.inline-edit-control button {
  position: absolute;
  right: 12px;
  top: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--ds-sidebar);
  background: transparent;
  transform: translateY(-50%);
}

.inline-edit-control button:hover {
  background: rgba(var(--ds-primary-border-rgb), 0.1);
}

.inline-edit-control button svg {
  width: 17px;
  height: 17px;
}

.code-edit-field input {
  padding-right: 54px;
}

.autosave-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  border-top: 1px solid var(--nx-line);
  padding-top: 26px;
}

.autosave-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
}

.autosave-state .soft-icon {
  grid-row: span 2;
}

.autosave-state strong {
  font-size: 15px;
}

.autosave-state small {
  color: var(--ds-primary);
  font-size: 13px;
}

.comments-card {
  padding: 26px;
}

.compact-command,
.secondary-button.compact,
.primary-button.compact {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
}

.summary-strip,
.work-kpis,
.problem-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.summary-item,
.work-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.summary-item + .summary-item {
  border-left: 1px solid var(--nx-line);
  padding-left: 16px;
}

.summary-item span,
.work-kpi {
  min-width: 0;
}

.summary-item strong,
.summary-item em,
.summary-item small,
.work-kpi span,
.work-kpi strong {
  display: block;
}

.summary-item em {
  margin-top: 7px;
  color: var(--nx-soft);
  font-style: normal;
}

.summary-item small {
  margin-top: 7px;
  color: var(--nx-muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--ds-info);
  background: var(--nx-blue-soft);
  font-size: 12px;
  font-weight: 700;
}

.status-zavrsen,
.status-zavrseno,
.status-reseno {
  color: var(--ds-primary-hover);
  background: #eef6fb;
}

.status-u-toku {
  color: var(--ds-info);
  background: #e8f3ff;
}

.status-planirano,
.status-zapocni-rad {
  color: var(--ds-text-light);
  background: var(--ds-disabled-bg);
}

.status-pauzirano,
.status-zavrseno-privremeno {
  color: #7a4b0f;
  background: var(--ds-warning-bg);
}

.status-nije-reseno {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.status-neaktivan {
  color: #5f6763;
  background: #ecefed;
}

.work-kpis,
.problem-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.work-kpi,
.problem-kpis .work-kpi {
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: var(--nx-card);
  box-shadow: var(--shadow-card);
}

.work-kpi strong {
  margin-top: 5px;
  font-size: 17px;
}

.work-kpi em {
  color: var(--nx-muted);
  font-style: normal;
}

.work-kpi.good em {
  color: var(--ds-primary);
}

.work-kpi.danger em,
.danger-text {
  color: var(--ds-danger);
}

.work-kpi.warn em {
  color: var(--nx-orange);
}

.good-text {
  color: var(--ds-primary);
}

.items-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
}

.table-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-tools input {
  min-height: 38px;
  width: 220px;
}

.hierarchy-table-wrap {
  overflow-x: auto;
  margin: 0 -26px;
}

.hierarchy-table {
  min-width: 1060px;
}

.hierarchy-table tbody tr.selected-row {
  background: rgba(var(--ds-primary-border-rgb), 0.1);
}

.hierarchy-name {
  display: grid;
  grid-template-columns: 24px 42px minmax(140px, 1fr);
  align-items: center;
  gap: 8px;
}

.hierarchy-name strong {
  color: var(--nx-text);
}

.hierarchy-name small {
  grid-column: 3;
  color: var(--nx-muted);
}

.level-1 .hierarchy-name {
  padding-left: 22px;
}

.level-2 .hierarchy-name {
  padding-left: 44px;
}

.row-toggle,
.row-spacer {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #f2f5f3;
}

.row-code {
  color: #3c4742;
  font-weight: 600;
}

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--nx-text);
  background: var(--ds-card);
  font-size: 11px;
  font-weight: 600;
}

.scrap-number {
  color: var(--ds-danger);
  font-weight: 700;
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-cell i {
  display: block;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: #e7ece9;
}

.progress-cell b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-primary);
}

.progress-cell em {
  color: var(--nx-soft);
  font-style: normal;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--nx-line);
  padding-top: 14px;
  color: var(--nx-soft);
  font-size: 12px;
}

.operation-side,
.problem-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.operation-title {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  background: #f2f5f3;
}

.detail-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin: 18px 0 0;
}

.detail-list dt {
  color: var(--nx-soft);
}

.detail-list dd {
  margin: 0;
  font-weight: 600;
}

.full-button {
  width: 100%;
  justify-content: flex-start;
  margin-top: 10px;
}

.active-soft {
  color: var(--ds-info);
  background: var(--ds-info-bg);
}

.warn-soft {
  color: #a05d0b;
  background: var(--ds-warning-bg);
}

.purple-soft {
  color: var(--ds-info);
  background: var(--ds-info-bg);
}

.support-panels {
  display: grid;
  grid-template-columns: 270px minmax(280px, 1fr) 390px 320px;
  gap: 18px;
  align-items: end;
}

.drawing-list,
.drawing-preview,
.finish-panel {
  min-height: 190px;
}

.drawing-file {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--nx-line);
  padding: 10px 0;
  color: var(--nx-text);
  background: transparent;
  text-align: left;
}

.drawing-file small,
.drawing-file em {
  color: var(--nx-muted);
  font-size: 11px;
  font-style: normal;
}

.blueprint-demo {
  min-height: 150px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background:
    linear-gradient(28deg, transparent 46%, #aab3ae 47%, #aab3ae 48%, transparent 49%),
    linear-gradient(154deg, transparent 45%, #c6ceca 46%, #c6ceca 47%, transparent 48%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(7,31,24,0.05) 19px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(7,31,24,0.05) 19px),
    var(--ds-card);
}

.modal-blueprint {
  min-height: 280px;
}

.mini-form {
  display: grid;
  gap: 12px;
}

.mini-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.mini-form div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.scrap-callout {
  display: flex;
  gap: 12px;
  border: 1px solid var(--ds-primary-border);
  border-radius: var(--radius-sm);
  padding: 18px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.problem-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.problems-layout {
  display: grid;
  grid-template-columns: 380px minmax(420px, 1fr) 320px;
  gap: 18px;
}

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 10px;
  margin-bottom: 14px;
}

.filters select {
  min-height: 40px;
}

.problem-list-item {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--nx-line);
  padding: 14px;
  color: var(--nx-text);
  background: transparent;
  text-align: left;
}

.problem-list-item.active {
  border: 1px solid rgba(194, 58, 58, 0.28);
  border-radius: 12px;
  background: var(--ds-danger-bg);
}

.problem-id {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
  font-weight: 800;
}

.problem-id.large {
  width: 58px;
  height: 48px;
  font-size: 18px;
}

.problem-list-item small {
  display: block;
  margin: 7px 0;
  color: var(--nx-soft);
  line-height: 1.5;
}

.problem-list-item em {
  color: var(--nx-soft);
  font-style: normal;
  line-height: 2;
}

.problem-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.problem-head h2 {
  font-size: 22px;
}

.problem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.problem-tags span {
  border: 1px solid var(--nx-line);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--nx-soft);
  background: var(--ds-card);
}

.thread-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}

.messages {
  display: grid;
  gap: 14px;
}

.message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 999px;
  color: var(--ds-card);
  background: var(--ds-success);
  font-size: 12px;
  font-weight: 800;
}

.message > div:last-child {
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  padding: 12px;
  background: var(--ds-card);
}

.message.blue > div:last-child {
  background: var(--ds-info-bg);
}

.message.system > div:last-child {
  background: var(--ds-warning-bg);
}

.message header {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--nx-soft);
  font-size: 12px;
}

.message header time {
  margin-left: auto;
}

.message p {
  margin: 8px 0 0;
  line-height: 1.5;
}

.message-photos,
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.message-photos button,
.photo-grid button {
  min-height: 76px;
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 45% 40%, #303833, transparent 18%),
    linear-gradient(135deg, #d5d9d6, #777f79);
}

.history-item {
  border-left: 2px solid var(--nx-line);
  padding: 0 0 16px 14px;
}

.history-item span {
  display: block;
  width: 10px;
  height: 10px;
  margin-left: -20px;
  border-radius: 999px;
  background: var(--ds-primary);
}

.history-item small {
  color: var(--nx-soft);
}

.message-input {
  display: grid;
  grid-template-columns: 1fr 36px 36px 82px;
  gap: 8px;
  align-items: center;
}

.message-input button {
  min-height: 40px;
}

.modal-panel h2 {
  margin: 0 0 12px;
}

/* Build 050.6 active visual runtime parity layer. */
.modal-backdrop:has(.flow-modal) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
}

.modal-backdrop:has(.flow-modal) .modal-panel.flow-modal {
  margin-block: auto;
}

.modal-panel.flow-modal {
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  min-width: 0;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ds-text);
  box-shadow: 0 24px 70px rgba(var(--ds-sidebar-rgb), .22);
}

.modal-panel.flow-modal.large {
  width: min(1240px, calc(100vw - 48px));
}

.flow-modal-head {
  flex: 0 0 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ds-primary-border);
  background: linear-gradient(180deg, #fff, rgba(var(--ds-primary-rgb), .035));
}

.flow-modal-icon,
.flow-modal-icon .item-type-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.flow-modal-icon.danger {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.flow-modal-icon svg,
.flow-modal-icon .item-type-icon svg {
  width: 20px;
  height: 20px;
}

.flow-modal-title {
  min-width: 0;
}

.flow-modal-title > span,
.flow-modal-head .flow-modal-title > span {
  display: block;
  margin-bottom: 3px;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.flow-modal-title h2,
.flow-modal > h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.flow-modal-title p,
.flow-modal > p {
  margin: 4px 0 0;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.flow-close-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-heading);
}

.flow-close-button svg {
  width: 18px;
  height: 18px;
}

.flow-modal-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-top: 1px solid var(--ds-primary-border);
  padding: 14px 18px;
  background: rgba(255, 255, 255, .96);
}

.modal-panel.flow-modal > :not(.flow-modal-head):not(.flow-modal-footer):not(header):not(footer) { min-width: 0; }
.modal-panel.flow-modal > .modal-body,
.modal-panel.flow-modal > [class$="-body"],
.modal-panel.flow-modal > [class*=" body"] { overflow-y: auto; overflow-x: hidden; }
.modal-panel.flow-modal table { max-width: none; }
.modal-panel.flow-modal .table-shell,
.modal-panel.flow-modal [class$="-table"],
.modal-panel.flow-modal [class*="-table "] { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }

.runtime-add-item-modal {
  width: min(900px, calc(100vw - 48px));
}

.flow-choice-grid,
.custom-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}

.flow-source-card,
.add-item-choice-card.flow-source-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(56px, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 230px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-heading);
  padding: 18px;
  text-align: left;
  box-shadow: 0 8px 18px rgba(var(--ds-sidebar-rgb), .045);
}

.flow-source-card:hover,
.flow-source-card:focus-visible {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 4px rgba(var(--ds-primary-rgb), .14), 0 14px 28px rgba(var(--ds-sidebar-rgb), .08);
  outline: none;
}

.flow-source-card .choice-icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.flow-source-card small {
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.flow-source-card strong {
  color: var(--ds-heading);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.18;
}

.flow-source-card em {
  color: var(--ds-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
}

.flow-source-card b {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 13px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.runtime-add-item-modal .flow-choice-grid {
  align-items: stretch;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.runtime-add-item-modal .add-item-choice-card.flow-source-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 204px;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(var(--ds-sidebar-rgb), .06);
}

.runtime-add-item-modal .add-item-choice-card.base {
  border-left: 4px solid var(--ds-primary);
}

.runtime-add-item-modal .add-item-choice-card.custom {
  border-left: 4px solid #7aa6c6;
}

.runtime-add-item-modal .add-item-choice-card.flow-source-card:hover {
  border-color: var(--ds-primary);
  box-shadow: 0 14px 30px rgba(var(--ds-sidebar-rgb), .1);
}

.runtime-add-item-modal .add-item-choice-card.flow-source-card:focus-visible {
  border-color: var(--ds-primary-strong);
  background: #dceef8;
  box-shadow: 0 0 0 4px rgba(var(--ds-primary-rgb), .28), 0 12px 28px rgba(var(--ds-sidebar-rgb), .12);
  outline: none;
}

.runtime-add-item-modal .add-item-choice-card.flow-source-card:active {
  border-color: var(--ds-primary-strong);
  background: #d4e9f5;
  box-shadow: inset 0 0 0 1px rgba(var(--ds-sidebar-rgb), .16), 0 8px 18px rgba(var(--ds-sidebar-rgb), .08);
}

.runtime-add-item-modal .flow-source-card .choice-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.runtime-add-item-modal .flow-source-card.custom .choice-icon {
  background: #f0f7fb;
  color: var(--ds-primary-strong);
}

.runtime-add-item-modal .flow-source-card small {
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.runtime-add-item-modal .flow-source-card strong {
  font-size: 21px;
  line-height: 1.15;
}

.runtime-add-item-modal .flow-source-card em {
  min-width: 0;
  font-size: 13px;
}

.runtime-add-item-modal .flow-source-card b {
  min-height: 40px;
  border: 1px solid var(--ds-primary-border);
  background: #fff;
  color: var(--ds-primary-strong);
  white-space: nowrap;
}

.runtime-add-item-modal .flow-source-card.base b {
  border-color: rgba(var(--ds-primary-rgb), .45);
  background: var(--ds-primary-light);
}

.runtime-base-modal .base-modal-header {
  padding: 18px 22px 14px;
  background: linear-gradient(180deg, #fff, rgba(var(--ds-primary-rgb), .035));
}

.runtime-base-modal .base-modal-header .flow-modal-icon {
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.runtime-base-modal .base-modal-header h2 {
  font-size: 24px;
  line-height: 1.15;
}

.runtime-base-modal .base-item-grid {
  padding: 16px 18px 0;
}

.runtime-base-modal .base-runtime-body {
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 16px 18px 14px;
  background: var(--ds-bg-soft);
}

.runtime-base-modal .split-picker {
  display: grid;
  grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.runtime-base-modal .picker-panel,
.runtime-base-modal .preview-panel {
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-card);
}

.runtime-base-modal .picker-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
}

.runtime-base-modal .preview-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 14px;
}

.runtime-base-modal .filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.runtime-base-modal .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.runtime-base-modal .field.wide {
  grid-column: 1 / -1;
}

.runtime-base-modal .field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.runtime-base-modal .field input,
.runtime-base-modal .field select,
.runtime-base-modal .field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-heading);
  padding: 0 11px;
  font-weight: 700;
}

.runtime-base-modal .field textarea {
  min-height: 70px;
  resize: vertical;
  padding: 10px 11px;
  line-height: 1.4;
}

.runtime-base-modal .mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  overflow: hidden;
}

.runtime-base-modal .mode-toggle button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid var(--ds-primary-border);
  background: #fff;
  color: var(--ds-primary-strong);
  font-weight: 800;
}

.runtime-base-modal .mode-toggle button:last-child {
  border-right: 0;
}

.runtime-base-modal .mode-toggle button.active {
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
  box-shadow: inset 0 -2px 0 var(--ds-primary);
}

.runtime-base-modal .base-product-detail {
  display: grid;
  gap: 18px;
}

.runtime-base-modal .base-product-list {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 0;
  overflow: auto;
}

.runtime-base-modal .base-product-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  color: var(--ds-heading);
  text-align: left;
  box-shadow: 0 8px 18px rgba(var(--ds-sidebar-rgb), .045);
}

.runtime-base-modal .base-product-card:hover,
.runtime-base-modal .base-product-card:focus-visible {
  border-color: var(--ds-primary);
  outline: none;
}

.runtime-base-modal .base-product-card.selected {
  border-color: rgba(var(--ds-primary-rgb), .62);
  background: rgba(var(--ds-primary-rgb), .075);
  box-shadow: inset 3px 0 0 var(--ds-primary), 0 10px 22px rgba(var(--ds-primary-rgb), .09);
}

.runtime-base-modal .base-product-card-icon,
.runtime-base-modal .base-product-card-check {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.runtime-base-modal .base-product-card-check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ds-success-bg);
  color: var(--ds-success);
}

.runtime-base-modal .base-product-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.runtime-base-modal .base-product-card-body strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-base-modal .base-product-card-body small {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-base-modal .base-product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.runtime-base-modal .base-product-card-meta em {
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: var(--ds-bg);
  padding: 3px 7px;
  color: var(--ds-primary-hover);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.runtime-base-modal .base-stats {
  gap: 8px;
  border: 0;
  overflow: visible;
}

.runtime-base-modal .base-stat {
  min-height: 74px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
}

.runtime-base-modal .product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--ds-primary-border);
  border-radius: 11px;
  background: linear-gradient(180deg, #fff, var(--ds-primary-light));
  padding: 14px;
}

.runtime-base-modal .base-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  max-width: 100%;
  border: 1px solid #bfe5d0;
  border-radius: 999px;
  background: #eefaf3;
  color: #0f6b3d;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  padding: 0 10px;
  white-space: nowrap;
}

.runtime-base-modal .product-hero h3 {
  margin: 4px 0 5px;
  color: var(--ds-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.runtime-base-modal .product-hero p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.runtime-base-modal .metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.runtime-base-modal .metric {
  display: grid;
  gap: 4px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 9px;
  background: #fff;
  padding: 10px;
}

.runtime-base-modal .metric small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.runtime-base-modal .metric strong {
  color: var(--ds-heading);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.runtime-base-modal .metric-icon,
.runtime-base-modal .row-icon {
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.runtime-base-modal .metric-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.runtime-base-modal .row-icon {
  width: 34px;
  height: 34px;
}

.runtime-base-modal .preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border-bottom: 1px solid var(--ds-primary-border);
  padding: 2px 0 12px;
}

.runtime-base-modal .preview-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: #fff;
  padding: 0 10px;
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.runtime-base-modal .preview-tabs button.active {
  border-color: var(--ds-primary-strong);
  background: var(--ds-primary-strong);
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--ds-primary-rgb), .18);
}

.runtime-base-modal .preview-tabs .tab-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.runtime-base-modal .preview-tabs .tab-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.runtime-base-modal .preview-tabs svg {
  width: 16px;
  height: 16px;
}

.modal-panel.runtime-base-modal .preview-tabs.base-detail-tabs {
  display: flex;
  grid-template-columns: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--ds-primary-border);
  padding: 2px 0 12px;
}

.modal-panel.runtime-base-modal .preview-tabs.base-detail-tabs button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 104px;
  min-height: 34px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-primary-strong);
  padding: 0 12px;
  overflow: visible;
}

.modal-panel.runtime-base-modal .preview-tabs.base-detail-tabs button.active {
  border-color: var(--ds-primary, #4a7fa7);
  background-color: var(--ds-primary, #4a7fa7);
  background-image: none;
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--ds-primary-rgb), .18);
}

.modal-panel.runtime-base-modal .preview-tabs.base-detail-tabs button.active .tab-label,
.modal-panel.runtime-base-modal .preview-tabs.base-detail-tabs button.active .tab-icon,
.modal-panel.runtime-base-modal .preview-tabs.base-detail-tabs button.active svg {
  color: #fff;
}

.modal-panel.runtime-base-modal .preview-tabs.base-detail-tabs .tab-label {
  display: inline;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.runtime-base-modal .tab-panel {
  display: grid;
  gap: 14px;
}

.runtime-base-modal .info-section,
.runtime-base-modal .base-tree-item,
.runtime-base-modal .base-operation-row,
.runtime-base-modal .base-document-card {
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.runtime-base-modal .info-section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.runtime-base-modal .info-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.runtime-base-modal .info-title,
.runtime-base-modal .info-section strong,
.runtime-base-modal .base-tree-item strong,
.runtime-base-modal .base-operation-row strong,
.runtime-base-modal .base-document-card strong {
  color: var(--ds-heading);
  font-weight: 800;
  line-height: 1.25;
}

.runtime-base-modal .info-meta,
.runtime-base-modal .base-operation-row small,
.runtime-base-modal .base-document-card small,
.runtime-base-modal .base-document-card em {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.runtime-base-modal .base-operation-list,
.runtime-base-modal .base-document-list,
.runtime-base-modal .base-tree {
  display: grid;
  gap: 10px;
}

.runtime-base-modal .base-tree-card-list {
  gap: 10px;
}

.runtime-base-modal .base-tree-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 60px;
  border: 1px solid var(--ds-primary-border);
  border-left: 4px solid var(--ds-primary);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.runtime-base-modal .base-tree-card.assembly {
  background: #f8fbfe;
  border-left-color: rgba(var(--ds-primary-rgb), .72);
}

.runtime-base-modal .base-tree-card.position {
  background: #fff;
  border-left-color: rgba(var(--ds-primary-rgb), .5);
}

.runtime-base-modal .base-tree-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.runtime-base-modal .base-tree-card strong {
  min-width: 0;
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-base-modal .base-tree-card strong span {
  text-transform: uppercase;
}

.runtime-base-modal .base-tree-card small {
  min-width: 0;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.runtime-base-modal .base-tree-card em {
  justify-self: end;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  padding: 7px 10px;
  white-space: nowrap;
}

.runtime-base-modal .base-operation-row {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(180px, .75fr) auto;
  gap: 12px;
  align-items: center;
}

.runtime-base-modal .base-operation-copy,
.runtime-base-modal .base-operation-station,
.runtime-base-modal .base-document-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.runtime-base-modal .base-operation-title,
.runtime-base-modal .base-operation-station strong,
.runtime-base-modal .base-document-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-base-modal .action-area {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  border-top: 1px solid var(--ds-primary-border);
  margin-top: 4px;
  padding-top: 18px;
}

.runtime-base-modal .quantity-control {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 5px;
  align-items: center;
}

.runtime-base-modal .quantity-control button {
  height: 38px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-primary-strong);
  font-weight: 800;
}

.runtime-base-modal .quantity-control input {
  text-align: center;
  padding: 0;
}

.runtime-base-modal .modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.runtime-base-modal .footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.progress-ring.operation-progress-ring {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 57%, transparent 59%),
    conic-gradient(var(--ds-primary) calc(var(--p) * 1%), #e3edf5 0);
  color: var(--ds-heading);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.progress-ring.operation-progress-ring.completed {
  background:
    radial-gradient(circle at center, #fff 57%, transparent 59%),
    conic-gradient(var(--ds-success) calc(var(--p) * 1%), #e2f3ea 0);
  color: var(--ds-success);
}

.progress-ring.operation-progress-ring.paused {
  background:
    radial-gradient(circle at center, #fff 57%, transparent 59%),
    conic-gradient(var(--ds-warning) calc(var(--p) * 1%), #f5edd8 0);
  color: #8a6100;
}

.operation-progress-block {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 66px;
}

.operation-progress-block > i {
  display: none;
}

.operation-progress-block small {
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.runtime-line-detail-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.runtime-line-detail-modal .line-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
}

.runtime-line-detail-modal .line-detail-header .flow-modal-icon {
  width: 42px;
  height: 42px;
}

.runtime-line-detail-modal .line-detail-header .flow-modal-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.runtime-line-detail-modal .line-detail-header .flow-modal-title h2 {
  font-size: 22px;
  line-height: 1.15;
}

.runtime-line-detail-modal .line-detail-header .flow-modal-title p {
  overflow: hidden;
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-line-detail-modal .line-detail-header .status-badge {
  justify-self: end;
  white-space: nowrap;
}

.runtime-line-detail-modal .line-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--ds-primary-border);
  padding: 0 16px;
  background: var(--ds-card);
}

.runtime-line-detail-modal .line-detail-tabs button {
  min-height: 40px;
  border: 0;
  border-right: 1px solid var(--ds-primary-border);
  background: transparent;
  padding: 0 14px;
  color: var(--ds-heading);
  font-weight: 800;
}

.runtime-line-detail-modal .line-detail-tabs button.active {
  box-shadow: inset 0 3px 0 var(--ds-primary);
  background: #fff;
}

.runtime-line-detail-modal .line-detail-body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.runtime-line-detail-modal .line-detail-card,
.runtime-line-detail-modal .line-detail-grid,
.runtime-line-detail-modal .line-document-list,
.runtime-line-detail-modal .line-activity-table {
  min-width: 0;
}

.runtime-line-detail-modal .line-detail-card {
  padding: 14px;
  border-radius: 12px;
}

.runtime-line-detail-modal .line-detail-card h3 {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.25;
}

.runtime-line-detail-modal .line-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.runtime-line-detail-modal .line-detail-grid div {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 10px;
}

.runtime-line-detail-modal .line-detail-grid dt {
  font-size: 11px;
  line-height: 1.25;
}

.runtime-line-detail-modal .line-detail-grid dd {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.runtime-line-detail-modal .line-document-list {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.runtime-line-detail-modal .line-document-card {
  min-height: 54px;
  padding: 10px;
  border-radius: 10px;
}

.runtime-line-detail-modal .line-empty-state {
  min-height: 96px;
  padding: 14px;
  border-radius: 12px;
}

.runtime-line-detail-modal .line-activity-table {
  max-height: min(420px, calc(100dvh - 210px));
}

.runtime-line-detail-modal .line-activity-table table {
  min-width: 760px;
}

.runtime-custom-modal {
  width: min(1180px, calc(100vw - 48px));
}

.runtime-custom-modal .custom-modal-footer .custom-total-time {
  margin: 0;
}

.custom-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
}

.custom-structure-panel,
.custom-editor-card {
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
}

.custom-structure-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.custom-structure-panel header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--ds-primary-light);
}

.custom-structure-panel header > span,
.custom-structure-panel button > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  color: var(--ds-primary);
}

.custom-structure-panel small,
.custom-editor-card header span {
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.custom-structure-panel strong {
  color: var(--ds-heading);
  font-size: 13px;
  line-height: 1.2;
}

.custom-structure-panel button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 9px;
  text-align: left;
}

.custom-structure-panel button.active {
  border-color: var(--ds-primary-border);
  background: rgba(var(--ds-primary-rgb), .08);
}

.custom-editor-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.custom-editor-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.custom-editor-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--ds-primary-border);
  padding-bottom: 12px;
}

.custom-editor-card h3 {
  margin: 2px 0 0;
  color: var(--ds-heading);
  font-size: 20px;
  line-height: 1.2;
}

.custom-editor-card p {
  margin: 4px 0 0;
  color: var(--ds-muted);
  font-size: 13px;
}

.custom-root-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.custom-root-secondary section {
  display: grid;
  gap: 10px;
}

.custom-root-secondary h4 {
  margin: 0;
  color: var(--ds-heading);
}

.custom-operations-list .custom-operation-list {
  display: grid;
  gap: 8px;
}

.custom-operation-list-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) 120px auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: left;
}

.custom-operation-list-row:hover,
.custom-operation-list-row:focus-visible {
  border-color: var(--ds-primary);
  outline: none;
}

.custom-operation-list-row .operation-order {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
  font-weight: 800;
}

.custom-operation-list-row strong {
  display: block;
  color: var(--ds-heading);
  font-size: 14px;
}

.custom-operation-list-row small {
  display: block;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.25;
}

.custom-operation-list-row em {
  justify-self: end;
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--ds-warning-bg);
  color: #8a6100;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.custom-operation-list-row.valid em {
  background: var(--ds-success-bg);
  color: var(--ds-success);
}

.custom-operation-editor-grid {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
  gap: 12px;
}

.custom-operation-editor-grid .wide-field {
  grid-column: 1 / -1;
}

.custom-duration-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 118px));
  justify-content: start;
  gap: 10px;
  max-width: 370px;
}

.custom-duration-control label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-primary-border);
  border-radius: 9px;
  background: #fff;
}

.custom-duration-control input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ds-heading);
  font: inherit;
  font-weight: 850;
  padding: 0 12px;
}

.custom-duration-control em {
  min-width: 44px;
  border-left: 1px solid var(--ds-primary-border);
  color: var(--ds-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.custom-root-time-field .custom-duration-control {
  max-width: 340px;
}

.custom-operator-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-operator-checklist label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ds-heading);
  font-weight: 700;
}

.runtime-problem-modal {
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.runtime-problem-modal .flow-modal-footer {
  position: relative;
  z-index: 2;
}

.runtime-problem-modal .problem-modal-body {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 14px;
  overflow: auto;
  padding: 16px 18px 18px;
}

.flow-context-card {
  margin: 16px 18px 0;
}

.runtime-problem-modal .problem-context-card {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 12px;
}

.runtime-problem-modal .problem-context-card div {
  gap: 9px;
}

.runtime-problem-modal .problem-context-card svg {
  width: 18px;
  height: 18px;
  color: var(--ds-primary);
}

.runtime-problem-modal .problem-context-card strong {
  white-space: normal;
}

.runtime-problem-modal .problem-main-grid {
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.runtime-problem-modal .problem-settings-column,
.runtime-problem-modal .problem-evidence-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.runtime-problem-modal .flow-choice-section,
.runtime-problem-modal .problem-description-field,
.runtime-problem-modal .problem-attachments-section {
  margin: 0;
}

.runtime-problem-modal .problem-choice-section h3,
.runtime-problem-modal .problem-attachments-section h3,
.runtime-problem-modal .problem-description-field > span {
  margin: 0 0 8px;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.runtime-problem-modal .problem-card-options,
.runtime-problem-modal .priority-card-options,
.runtime-problem-modal .stop-work-options {
  display: grid;
  gap: 8px;
}

.runtime-problem-modal .problem-card-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.runtime-problem-modal .priority-card-options,
.runtime-problem-modal .stop-work-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.runtime-problem-modal .problem-card-options button,
.runtime-problem-modal .priority-card-options button,
.runtime-problem-modal .stop-work-options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.runtime-problem-modal .problem-card-options button svg,
.runtime-problem-modal .stop-work-options button svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.runtime-problem-modal .problem-card-options button.active,
.runtime-problem-modal .priority-card-options button.active,
.runtime-problem-modal .stop-work-options button.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.runtime-problem-modal .stop-work-options button:hover {
  transform: none;
}

.runtime-problem-modal .problem-description-field {
  display: grid;
  gap: 0;
}

.runtime-problem-modal .problem-description-field textarea {
  min-height: 142px;
  border-color: var(--ds-primary-border);
  border-radius: 9px;
  padding: 12px;
  line-height: 1.45;
}

.runtime-problem-modal .problem-description-field small {
  margin-top: 5px;
}

.runtime-problem-modal .problem-attachment-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.runtime-problem-modal .problem-upload-card {
  min-height: 42px;
  justify-content: flex-start;
}

.runtime-problem-modal .problem-file-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.runtime-problem-modal .problem-file-card {
  min-height: 58px;
  border-color: var(--ds-primary-border);
  background: #fff;
}

.runtime-problem-modal .problem-file-card > button:first-child {
  padding: 8px 10px;
}

.runtime-problem-modal .flow-error {
  margin: 0;
}

@media (max-width: 920px) {
  .runtime-problem-modal {
    width: min(820px, calc(100vw - 28px));
  }

  .runtime-problem-modal .problem-context-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runtime-problem-modal .problem-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .runtime-problem-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .runtime-problem-modal .problem-modal-body {
    padding: 12px;
  }

  .runtime-problem-modal .problem-context-card,
  .runtime-problem-modal .problem-card-options,
  .runtime-problem-modal .priority-card-options,
  .runtime-problem-modal .stop-work-options,
  .runtime-problem-modal .problem-attachment-actions {
    grid-template-columns: 1fr;
  }
}

.flow-error {
  margin: 14px 18px 0;
  border: 1px solid var(--ds-danger-border);
  border-radius: 8px;
  background: var(--ds-danger-bg);
  padding: 10px 12px;
  color: var(--ds-danger);
  font-weight: 800;
}

.runtime-work-entry-modal {
  width: min(1240px, calc(100vw - 48px));
}

.runtime-work-entry-modal > .modal-close {
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
}

.runtime-work-entry-modal > h2 {
  margin: 0;
  border-bottom: 0;
  padding: 20px 68px 4px 24px;
  color: var(--ds-heading);
  font-size: 24px;
  line-height: 1.15;
}

.runtime-work-entry-modal > p {
  margin: 0;
  border-bottom: 1px solid var(--ds-primary-border);
  padding: 0 24px 16px;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
}

.runtime-work-entry-modal .manual-segment-nav {
  gap: 8px;
}

.runtime-work-entry-modal .manual-segment-nav button {
  border-radius: 8px;
  background: #fff;
}

.runtime-work-entry-modal .manual-segment-nav button.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.runtime-work-entry-modal .manual-entry-layout {
  gap: 16px;
}

.runtime-work-entry-modal .manual-summary-rail,
.runtime-work-entry-modal .operator-action-context,
.runtime-work-entry-modal .manual-worker-picker,
.runtime-work-entry-modal .manual-worker-minutes-panel,
.runtime-work-entry-modal .manual-allocation-panel,
.runtime-work-entry-modal .manual-final-summary {
  border-radius: 8px;
}

@media (max-width: 920px) {
  .flow-choice-grid,
  .custom-start-grid {
    grid-template-columns: 1fr;
  }

  .custom-workspace {
    grid-template-columns: 1fr;
  }

  .custom-structure-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .custom-structure-panel header {
    grid-column: 1 / -1;
  }

  .custom-root-secondary,
  .custom-operation-editor-grid {
    grid-template-columns: 1fr;
  }

  .custom-operation-list-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .custom-operation-list-row > span:nth-of-type(n + 3),
  .custom-operation-list-row em {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .modal-panel.flow-modal,
  .modal-panel.flow-modal.large {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 10px;
  }

  .flow-modal-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px;
  }

  .flow-modal-title h2,
  .flow-modal > h2 {
    font-size: 20px;
  }

  .flow-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-modal-footer > div,
  .flow-modal-footer button {
    width: 100%;
  }

  .flow-source-card,
  .add-item-choice-card.flow-source-card {
    min-height: 0;
  }

  .custom-workspace {
    padding: 12px;
  }

  .custom-structure-panel {
    grid-template-columns: 1fr;
  }

  .runtime-work-entry-modal > h2 {
    font-size: 20px;
    padding-left: 18px;
  }

  .runtime-work-entry-modal > p {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.modal-panel p {
  color: var(--nx-soft);
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.modal-grid .wide-field {
  grid-column: 1 / -1;
}

.modal-panel.add-item-choice-shell {
  width: min(940px, calc(100vw - 48px));
  padding: 26px;
}

.add-item-choice-modal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.add-item-choice-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(54px, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 280px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  padding: 22px;
  color: var(--ds-heading);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.add-item-choice-card:hover,
.add-item-choice-card:focus-visible {
  border-color: var(--ds-primary);
  box-shadow: 0 18px 36px rgba(var(--ds-sidebar-rgb), .1);
  outline: none;
}

.add-item-choice-card .choice-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.add-item-choice-card.custom .choice-icon {
  background: var(--ds-warning-bg);
  color: #9a5b00;
}

.add-item-choice-card small {
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
  font-size: 11px;
  font-weight: 800;
}

.add-item-choice-card strong {
  font-size: 22px;
  line-height: 1.15;
}

.add-item-choice-card em {
  color: var(--ds-muted);
  font-style: normal;
  line-height: 1.45;
}

.add-item-choice-card b {
  display: inline-flex;
  justify-self: start;
  min-height: 40px;
  align-items: center;
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: var(--ds-primary);
  font-weight: 800;
}

.modal-panel.finish-operation-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
}

.finish-operation-modal > h2 {
  flex: 0 0 auto;
  margin: 0;
  padding: 28px 74px 8px 30px;
}

.finish-operation-modal > p {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 30px 14px;
}

.finish-modal-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 30px 24px;
}

.finish-operation-modal .modal-grid {
  min-width: 0;
}

.finish-operation-modal .modal-actions {
  flex: 0 0 auto;
  margin: 0;
  border-top: 1px solid var(--nx-line);
  padding: 16px 30px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--nx-card));
}

.scrap-note {
  margin-top: 14px;
  border-radius: 12px;
  padding: 12px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.manual-work-entry-modal .modal-actions:empty {
  display: none;
}

.modal-panel.finish-operation-modal.manual-work-entry-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1240px, calc(100vw - 48px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}

.manual-work-entry-modal .finish-modal-body.manual-work-entry-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.modal-panel.finish-operation-modal.live-finish-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}

.live-finish-modal .finish-modal-body.live-finish-flow {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.live-finish-modal .manual-segment-panels {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px 18px 0;
  overscroll-behavior: contain;
}

.live-finish-modal .modal-grid {
  margin-top: 0;
}

.live-finish-modal .manual-segment-footer {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin: 0 -30px;
}

.manual-work-entry-segmented {
  display: grid;
  gap: 16px;
}

.manual-entry-scroll {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px 18px 0;
  overscroll-behavior: contain;
}

.manual-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 320px);
  gap: 24px;
  align-items: start;
  min-width: 0;
}

.manual-entry-main {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.manual-segment-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.manual-segment-nav button {
  min-height: 44px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ds-primary);
  background: #fff;
  font-weight: 900;
}

.manual-segment-nav button span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  place-items: center;
  border-radius: 999px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
  font-size: 12px;
}

.manual-segment-nav button.active {
  border-color: rgba(37, 99, 235, .35);
  background: var(--ds-primary-light);
}

.manual-segment-nav button.done span {
  color: var(--ds-success);
  background: var(--ds-success-bg);
}

.manual-segment-panel {
  display: none;
}

.manual-segment-panel.active {
  display: grid;
  gap: 14px;
}

.manual-segment-summary,
.manual-final-summary,
.manual-derived-outcome,
.manual-summary-rail,
.manual-plan-time-summary,
.manual-segment-error {
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--ds-bg);
}

.manual-segment-summary {
  display: grid;
  gap: 4px;
}

.manual-segment-summary strong,
.manual-final-summary h3 {
  margin: 0;
  color: var(--ds-heading);
}

.manual-segment-summary span {
  color: var(--ds-muted);
  font-weight: 700;
}

.manual-plan-time-summary dl,
.manual-summary-rail dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.manual-plan-time-summary dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manual-plan-time-summary dt,
.manual-summary-rail dt {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-plan-time-summary dd,
.manual-summary-rail dd {
  margin: 2px 0 0;
  color: var(--ds-heading);
  font-weight: 900;
}

.manual-summary-rail {
  position: sticky;
  top: 12px;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
}

.manual-summary-rail section {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--nx-line);
  padding-bottom: 10px;
}

.manual-summary-rail section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.manual-summary-rail h3,
.manual-derived-outcome h3 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 14px;
}

.manual-summary-rail .attention dd {
  color: var(--ds-warning);
}

.manual-derived-outcome {
  display: grid;
  gap: 5px;
}

.manual-derived-outcome strong {
  color: var(--ds-primary);
  font-size: 16px;
}

.manual-derived-outcome span {
  color: var(--ds-muted);
  font-weight: 800;
}

.live-finish-flow {
  display: grid;
  gap: 16px;
}

.live-finish-stepper button {
  cursor: default;
}

.live-time-summary,
.live-finish-extra {
  display: grid;
  gap: 12px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.live-time-summary header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.live-time-summary h3 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 15px;
}

.live-time-summary header strong,
.live-time-total strong,
.live-worker-time-readonly strong {
  color: var(--ds-primary);
}

.live-time-workers {
  display: grid;
  gap: 8px;
}

.live-time-workers > div,
.live-time-total,
.live-worker-time-readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--ds-bg);
  font-weight: 850;
}

.live-time-workers span,
.live-time-total span,
.live-worker-time-readonly span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.live-time-details,
.live-time-correction {
  border-top: 1px solid var(--nx-line);
  padding-top: 10px;
}

.live-time-details summary,
.live-time-correction summary {
  color: var(--ds-primary);
  cursor: pointer;
  font-weight: 900;
}

.live-time-details p {
  margin: 6px 0 0;
  color: var(--ds-muted);
  font-weight: 750;
}

.manual-segment-error {
  border-color: rgba(220, 38, 38, .28);
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
  font-weight: 800;
}

.manual-segment-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 8px -30px -24px;
  border-top: 1px solid var(--nx-line);
  padding: 14px 30px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), var(--nx-card));
}

.manual-work-entry-modal .manual-segment-footer {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  flex-wrap: wrap;
  margin: 0 -30px;
}

.manual-worker-minutes-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.manual-worker-minutes-panel header,
.manual-worker-minutes-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.manual-worker-minutes-panel h3 {
  margin: 0;
  font-size: 15px;
}

.manual-worker-minutes-panel header span,
.manual-worker-minutes-actions strong {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-worker-minutes-rows {
  display: grid;
  gap: 8px;
}

.manual-worker-minute-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) 32px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 9px 10px;
  font-weight: 850;
}

.manual-worker-minute-row input {
  min-width: 0;
}

.manual-duration-control {
  display: grid;
  gap: 7px;
}

.manual-duration-control > span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-duration-control.compact {
  margin: 0;
}

.manual-duration-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.manual-duration-control.compact .manual-duration-pair {
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: 6px;
}

.manual-duration-pair label {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) max-content;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 0 8px;
  background: #fff;
}

.manual-duration-pair input {
  width: 100%;
  height: 42px;
  min-width: 48px;
  border: 0;
  padding: 0 2px;
  color: var(--ds-heading);
  font: inherit;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
  appearance: textfield;
}

.manual-duration-pair input::-webkit-outer-spin-button,
.manual-duration-pair input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.manual-duration-pair em,
.manual-worker-minute-row em {
  color: var(--ds-muted);
  font-style: normal;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.manual-worker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.manual-worker-chip button {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--ds-primary);
  background: rgba(255, 255, 255, .7);
}

.manual-allocation-totals {
  border-top: 1px solid var(--nx-line);
  padding: 10px 8px 2px;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 900;
}

.manual-final-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}

.manual-final-summary dt {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-final-summary dd {
  margin: 2px 0 0;
  color: var(--ds-heading);
  font-weight: 900;
}

.manual-locked-context,
.manual-worker-picker,
.manual-allocation-panel,
.work-entry-attachments {
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.manual-locked-context dl,
.operator-action-context dl {
  margin: 0;
}

.manual-locked-context dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manual-locked-context dt,
.manual-worker-picker header span,
.manual-allocation-panel header span,
.work-entry-attachments header span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

.manual-locked-context dd {
  margin: 2px 0 0;
  color: var(--ds-heading);
  font-weight: 800;
}

.manual-locked-context.implicit-root-work p {
  margin: 12px 0 0;
  border-top: 1px solid var(--nx-line);
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  padding-top: 10px;
}

.manual-worker-picker,
.manual-allocation-panel,
.work-entry-attachments {
  display: grid;
  gap: 12px;
}

.manual-worker-picker header,
.manual-allocation-panel header,
.work-entry-attachments header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.manual-worker-picker h3,
.manual-allocation-panel h3 {
  margin: 0;
  font-size: 15px;
}

.manual-worker-search {
  display: grid;
  gap: 6px;
}

.manual-worker-search span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-worker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow: auto;
}

.manual-worker-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 800;
}

.manual-worker-choice span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-worker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.manual-worker-chip,
.manual-worker-empty {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}

.manual-worker-chip {
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.manual-worker-empty {
  color: var(--ds-muted);
  background: var(--ds-bg);
}

.manual-allocation-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.manual-allocation-modes label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 800;
}

.manual-allocation-rows {
  overflow: visible;
}

.manual-participation-summary,
.manual-scrap-reason-panel,
.manual-worker-scrap-reasons {
  display: grid;
  gap: 10px;
}

.manual-participation-summary {
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--ds-bg);
}

.manual-participation-summary > strong {
  color: var(--ds-heading);
}

.manual-participation-summary > span,
.manual-worker-scrap-reasons.disabled span {
  color: var(--ds-muted);
  font-weight: 800;
}

.manual-participation-workers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.manual-participation-workers span {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
  font-size: 12px;
  font-weight: 850;
}

.manual-scrap-reason-panel,
.manual-worker-scrap-reasons {
  border-top: 1px solid var(--nx-line);
  padding-top: 10px;
}

.manual-scrap-reason-panel header,
.manual-worker-scrap-reasons header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.manual-scrap-reason-panel h4,
.manual-worker-scrap-reasons h5 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 13px;
}

.manual-scrap-reason-panel header span,
.manual-worker-scrap-reasons header span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-scrap-reason-list {
  display: grid;
  gap: 8px;
}

.manual-scrap-reason-row {
  display: grid;
  grid-template-columns: 120px minmax(180px, 1fr) 32px;
  align-items: end;
  gap: 8px;
}

.manual-scrap-reason-row.has-other-description {
  grid-template-columns: 120px minmax(170px, .85fr) minmax(220px, 1fr) 32px;
}

.manual-scrap-reason-row .scrap-other-description {
  min-width: 0;
}

.manual-scrap-reason-row label,
.manual-worker-allocation-primary label {
  display: grid;
  gap: 5px;
}

.manual-scrap-reason-row span,
.manual-worker-allocation-primary span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.manual-scrap-reason-row input,
.manual-scrap-reason-row select,
.manual-worker-allocation-primary input {
  width: 100%;
  min-width: 0;
}

.manual-worker-allocation-cards {
  display: grid;
  gap: 10px;
}

.manual-worker-allocation-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.manual-worker-allocation-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.manual-worker-allocation-card > header strong {
  color: var(--ds-heading);
}

.manual-worker-allocation-primary {
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  align-items: end;
  gap: 8px;
}

.manual-worker-allocation-primary [data-allocation-duration] {
  grid-column: span 2;
}

.live-finish-flow .manual-worker-allocation-card {
  padding: 10px 12px;
}

.live-finish-flow .manual-worker-allocation-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-finish-flow .live-worker-time-readonly {
  min-height: 44px;
}

.live-time-workers .operator-live-status {
  margin-left: 6px;
  vertical-align: middle;
}

.manual-allocation-empty,
.work-entry-attachment-empty {
  border: 1px dashed var(--nx-line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ds-muted);
  font-weight: 700;
}

.work-entry-attachment-actions,
.work-entry-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-entry-attachment-list:empty {
  display: none;
}

.work-entry-attachment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  gap: 8px;
  min-width: min(260px, 100%);
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.work-entry-attachment-card > button:first-child,
.work-entry-history-attachments button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  color: var(--ds-heading);
  background: transparent;
  text-align: left;
}

.work-entry-attachment-card > .plain-icon {
  align-self: center;
  justify-self: end;
  min-width: 32px;
  width: 32px;
  height: 32px;
}

.work-entry-attachment-card span,
.work-entry-history-attachments span {
  display: grid;
  min-width: 0;
}

.work-entry-attachment-card strong,
.work-entry-history-attachments strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-entry-attachment-card small,
.work-entry-history-attachments small {
  color: var(--ds-muted);
  font-weight: 700;
}

.work-entry-history-attachments {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.work-entry-history-attachments button {
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 10px;
}

@media (max-width: 1100px) {
  .modal-panel.finish-operation-modal.manual-work-entry-modal,
  .modal-panel.finish-operation-modal.live-finish-modal {
    width: min(100%, calc(100vw - 32px));
  }

  .manual-work-entry-modal .manual-entry-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px);
    gap: 18px;
  }
}

@media (max-width: 960px) {
  .modal-panel.finish-operation-modal.manual-work-entry-modal,
  .modal-panel.finish-operation-modal.live-finish-modal {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .manual-work-entry-modal > h2,
  .live-finish-modal > h2 {
    padding: 22px 58px 6px 20px;
  }

  .manual-work-entry-modal > p,
  .manual-work-entry-modal .finish-modal-body.manual-work-entry-body,
  .live-finish-modal > p,
  .live-finish-modal .finish-modal-body.live-finish-flow {
    padding-left: 20px;
    padding-right: 20px;
  }

  .manual-work-entry-modal .manual-entry-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .manual-work-entry-modal .manual-summary-rail {
    position: static;
  }

  .manual-work-entry-modal .manual-segment-footer,
  .live-finish-modal .manual-segment-footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 640px) {
  .modal-panel.add-item-choice-shell {
    width: min(100%, calc(100vw - 24px));
    padding: 20px;
  }

  .add-item-choice-modal {
    grid-template-columns: 1fr;
  }

  .add-item-choice-card {
    min-height: 0;
  }

  .modal-panel.finish-operation-modal {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .finish-operation-modal > h2 {
    padding: 22px 58px 6px 20px;
  }

  .finish-operation-modal > p,
  .finish-modal-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .finish-operation-modal .modal-grid {
    grid-template-columns: 1fr;
  }

  .manual-entry-layout {
    grid-template-columns: 1fr;
  }

  .manual-summary-rail {
    position: static;
  }

  .manual-worker-picker header,
  .manual-allocation-panel header,
  .work-entry-attachments header,
  .work-entry-attachment-actions,
  .manual-worker-minutes-panel header,
  .manual-worker-minutes-actions,
  .live-time-summary header {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-locked-context dl,
  .manual-worker-list,
  .manual-segment-nav,
  .manual-plan-time-summary dl,
  .manual-final-summary dl {
    grid-template-columns: 1fr;
  }

  .manual-worker-minute-row,
  .manual-scrap-reason-row,
  .manual-worker-allocation-primary {
    grid-template-columns: 1fr;
  }

  .manual-worker-allocation-primary [data-allocation-duration] {
    grid-column: auto;
  }

  .live-finish-flow .manual-worker-allocation-primary {
    grid-template-columns: 1fr;
  }

  .manual-segment-footer {
    display: grid;
    grid-template-columns: 1fr;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .finish-operation-modal .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    padding: 14px 20px 18px;
  }
}

@media (max-height: 720px) {
  .finish-operation-modal > h2 {
    padding-top: 20px;
  }

  .finish-modal-body {
    padding-bottom: 18px;
  }

  .finish-operation-modal .modal-actions {
    padding-top: 12px;
    padding-bottom: 14px;
  }
}

.toast {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1500;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  padding: 13px 16px;
  color: var(--nx-text);
  background: var(--ds-card);
  box-shadow: var(--shadow-hover);
  font-weight: 600;
}

#undo-root .undo-strip {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 8px 8px 8px 16px;
  color: #fff;
  background: #1f2937;
  box-shadow: var(--shadow-hover);
  font-weight: 600;
}

#undo-root .undo-countdown {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

#undo-root .undo-countdown svg {
  position: absolute;
  inset: 0;
  width: 30px;
  height: 30px;
  transform: rotate(-90deg);
}

#undo-root .undo-countdown circle {
  fill: none;
  stroke-width: 3;
}

#undo-root .undo-countdown-track {
  stroke: rgba(255, 255, 255, 0.22);
}

#undo-root .undo-countdown-ring {
  stroke: #fbbf24;
  stroke-linecap: round;
  stroke-dasharray: 94.25;
  stroke-dashoffset: 0;
  animation-name: undo-countdown-drain;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

#undo-root .undo-countdown b {
  position: relative;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@keyframes undo-countdown-drain {
  to {
    stroke-dashoffset: 94.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  #undo-root .undo-countdown-ring {
    animation: none;
  }
}

#undo-root .undo-strip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#undo-root .undo-strip button {
  flex: 0 0 auto;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: #1f2937;
  background: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sr-file-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-source-modal {
  width: min(100%, 620px);
}

.photo-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.source-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  padding: 16px;
  color: var(--nx-text);
  background: var(--ds-card);
  text-align: left;
}

.source-option:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.32);
  background: rgba(var(--ds-primary-border-rgb), 0.06);
}

.source-option svg {
  width: 22px;
  height: 22px;
  color: var(--nx-green);
}

.source-option strong,
.source-option small {
  display: block;
}

.source-option small {
  margin-top: 5px;
  color: var(--nx-soft);
  line-height: 1.45;
}

.work-order-list .panel-header {
  padding: 24px;
}

.work-orders-screen {
  display: grid;
  gap: 22px;
}

.work-order-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.work-order-kpi {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 118px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}

.work-order-kpi .soft-icon {
  width: 58px;
  height: 58px;
}

.work-order-kpi div {
  display: grid;
  gap: 3px;
}

.work-order-kpi strong {
  color: var(--ds-sidebar);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}

.work-order-kpi span {
  color: #14231d;
  font-size: 15px;
  font-weight: 700;
}

.work-order-kpi small {
  color: var(--nx-soft);
  font-size: 13.5px;
  font-weight: 600;
}

.work-order-kpi.tone-blue .soft-icon {
  color: #1c6ecb;
  background: var(--ds-info-bg);
}

.work-order-kpi.tone-amber .soft-icon {
  color: #d97706;
  background: var(--ds-warning-bg);
}

.work-order-kpi.tone-red .soft-icon {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.work-order-kpi.tone-purple .soft-icon {
  color: var(--ds-info);
  background: var(--ds-info-bg);
}

.worker-dashboard {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.worker-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--nx-card) 94%, transparent);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}

.worker-tab-button,
.worker-problem-subtabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 12px;
  color: var(--ds-text);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.worker-tab-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.worker-tab-button span,
.worker-problem-subtabs button {
  overflow-wrap: anywhere;
}

.worker-tab-button.active,
.worker-problem-subtabs button.active {
  color: var(--ds-primary);
  border-color: rgba(var(--ds-primary-rgb), 0.2);
  background: var(--ds-primary-light);
}

.worker-tab-button:focus-visible,
.worker-problem-subtabs button:focus-visible,
.worker-unread-banner:focus-visible {
  outline: 3px solid rgba(var(--ds-primary-rgb), 0.28);
  outline-offset: 2px;
}

.worker-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 7px;
  color: #fff;
  background: var(--ds-danger);
  font-size: 12px;
  line-height: 1;
}

.worker-problems-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.worker-problem-subtabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 440px);
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: var(--nx-card);
}

.worker-problem-subtabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 6px;
  color: var(--ds-text-light);
  background: rgba(var(--ds-primary-rgb), 0.08);
  font-size: 12px;
}

.worker-unread-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.22);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ds-heading);
  background: var(--ds-primary-light);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.worker-unread-banner svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--ds-primary);
}

.worker-unread-banner span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.worker-unread-banner strong {
  flex: 0 0 auto;
  color: var(--ds-primary);
}

.worker-account-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: var(--nx-card);
  box-shadow: var(--shadow-card);
}

.worker-account-card > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  min-width: 0;
}

.worker-account-card > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.worker-account-card strong,
.worker-account-card small {
  min-width: 0;
}

.worker-account-card strong {
  color: var(--ds-heading);
}

.worker-account-card small {
  color: var(--ds-text-light);
  font-weight: 650;
}

.worker-account-card .compact-command {
  min-width: 180px;
}

.worker-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.worker-kpi {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 122px;
  padding: 18px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: var(--nx-card);
  box-shadow: var(--shadow-card);
}

.worker-kpi svg {
  width: 24px;
  height: 24px;
  color: var(--ds-primary);
}

.worker-kpi span,
.worker-kpi small {
  color: var(--ds-text-light);
  font-weight: 650;
}

.worker-kpi strong {
  color: var(--ds-heading);
  font-size: 30px;
  line-height: 1;
}

.worker-task-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  min-width: 0;
}

.worker-task-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--nx-line);
  border-left: 5px solid var(--ds-primary);
  border-radius: 8px;
  background: var(--nx-card);
  box-shadow: var(--shadow-card);
}

.worker-task-card.compact {
  gap: 14px;
  padding: 16px;
}

.worker-task-card.compact footer {
  justify-content: stretch;
}

.worker-task-card.compact .worker-action {
  flex-basis: 100%;
}

.worker-problem-card.compact {
  border-left-color: var(--ds-warning);
}

.worker-problem-card.compact.zavrseno {
  border-left-color: var(--ds-success);
}

.worker-task-card.status-zavrseno {
  border-left-color: var(--ds-success);
}

.worker-task-card.status-pauzirano,
.worker-task-card.status-zavrseno-privremeno {
  border-left-color: var(--ds-warning);
}

.worker-task-card header,
.worker-task-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.worker-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.worker-task-card header span,
.worker-task-card header strong,
.worker-task-card header small {
  display: block;
  min-width: 0;
}

.worker-task-card header small {
  margin-top: 4px;
  color: var(--ds-text-light);
}

.worker-task-card h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.worker-task-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.worker-task-card dt {
  margin-bottom: 4px;
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 750;
}

.worker-task-card dd {
  margin: 0;
  color: var(--ds-heading);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.worker-next-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--ds-info-bg);
  border-radius: 8px;
  color: var(--ds-info);
  background: color-mix(in srgb, var(--ds-info-bg) 64%, var(--ds-card));
  font-weight: 700;
  line-height: 1.45;
}

.worker-next-step svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.worker-action {
  flex: 1 1 132px;
  min-width: 0;
  min-height: 48px;
  touch-action: manipulation;
  white-space: normal;
}

.worker-detail-actions {
  gap: 14px;
}

.worker-detail-actions .section-line-title {
  align-items: center;
  gap: 12px;
}

.worker-detail-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  min-width: 0;
}

.worker-detail-action-grid .worker-action {
  width: 100%;
  flex-basis: auto;
}

.worker-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 260px;
  padding: 34px 22px;
  border: 1px dashed var(--nx-line);
  border-radius: 8px;
  color: var(--ds-text-light);
  background: var(--nx-card);
  text-align: center;
}

.worker-empty-state svg {
  width: 36px;
  height: 36px;
  color: var(--ds-primary);
}

.worker-empty-state h2,
.worker-empty-state p {
  margin: 0;
}

.work-orders-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  padding: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}

.work-orders-desktop-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 1fr));
  align-items: end;
  gap: 16px 18px;
}

.work-orders-mobile-filters {
  display: none;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.work-order-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.work-order-context-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.16);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
  font-size: 12px;
  font-weight: 700;
}

.work-orders-toolbar label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: #14231d;
  font-size: 13px;
  font-weight: 700;
}

.work-orders-toolbar select,
.work-orders-toolbar input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--nx-text);
  background: var(--nx-white);
  font: inherit;
  font-size: 14px;
  outline: 0;
}

.work-orders-toolbar select:focus,
.work-orders-toolbar input:focus {
  border-color: rgba(var(--ds-primary-rgb), 0.44);
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-border-rgb), 0.1);
}

.view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  align-self: end;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.18);
  border-radius: 9px;
  padding: 3px;
  background: rgba(var(--ds-primary-border-rgb), 0.05);
}

.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  padding: 0 10px;
  color: var(--nx-soft);
  background: transparent;
  font-size: 11px;
  font-weight: 650;
}

.view-toggle button.active {
  color: var(--nx-green);
  background: var(--nx-white);
  box-shadow: 0 6px 14px rgba(var(--ds-sidebar-rgb), 0.08);
}

.work-search {
  position: relative;
}

.work-search svg {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 18px;
  height: 18px;
  color: var(--nx-soft);
  pointer-events: none;
}

.work-search input {
  padding-right: 44px;
}

.sort-filter {
  grid-column: span 2;
}

.clear-filter-button {
  justify-self: stretch;
  min-height: 50px;
}

.work-order-list-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.work-order-table-wrap {
  overflow-x: auto;
}

.work-orders-table {
  width: 100%;
  min-width: 1328px;
  table-layout: fixed;
}

.work-orders-table .wo-col-code { width: 136px; }
.work-orders-table .wo-col-opened { width: 88px; }
.work-orders-table .wo-col-internal { width: 124px; }
.work-orders-table .wo-col-title { width: 190px; }
.work-orders-table .wo-col-customer { width: 112px; }
.work-orders-table .wo-col-owner { width: 144px; }
.work-orders-table .wo-col-priority { width: 88px; }
.work-orders-table .wo-col-status { width: 88px; }
.work-orders-table .wo-col-due { width: 116px; }
.work-orders-table .wo-col-problems { width: 116px; }
.work-orders-table .wo-col-progress { width: 96px; }
.work-orders-table .wo-col-actions { width: 84px; }

.work-orders-table th,
.work-orders-table td {
  vertical-align: middle;
}

.work-orders-table th {
  white-space: nowrap;
}

.work-orders-table td {
  white-space: normal;
}

.work-orders-table tbody tr.work-order-row {
  cursor: pointer;
}

.work-orders-table tbody tr.work-order-row:hover {
  background: rgba(var(--ds-primary-border-rgb), 0.055);
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.sort-header svg {
  width: 13px;
  height: 13px;
  color: var(--nx-soft);
}

.sort-header.active {
  color: var(--nx-green);
}

.sort-header.static {
  cursor: default;
  color: inherit;
}

.icon-mini {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--nx-green);
  background: transparent;
}

.icon-mini svg {
  width: 14px;
  height: 14px;
}

.icon-mini:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.2);
  background: rgba(var(--ds-primary-border-rgb), 0.07);
}

.icon-mini.danger {
  color: var(--ds-danger);
}

.icon-mini.danger:hover {
  border-color: rgba(225, 29, 46, 0.18);
  background: rgba(225, 29, 46, 0.06);
}

.row-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.icon-action,
.open-row-button,
.open-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(6, 56, 40, 0.08);
  border-radius: 7px;
  color: var(--ds-card);
  background: var(--nx-green);
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(6, 56, 40, 0.12);
}

.open-row-button {
  height: 26px;
  padding: 0 10px;
}

.open-card-button {
  height: 28px;
  min-width: 94px;
  padding: 0 12px;
}

.open-row-button svg,
.open-card-button svg {
  width: 13px;
  height: 13px;
}

.open-row-button:hover,
.open-card-button:hover {
  background: var(--ds-primary-hover);
  box-shadow: 0 10px 20px rgba(var(--ds-primary-hover-rgb), 0.16);
}

.icon-action {
  width: 40px;
  height: 40px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  color: #24302b;
  background: var(--ds-card);
}

.icon-action svg {
  width: 18px;
  height: 18px;
}

.icon-action.primary {
  color: var(--ds-card);
  background: var(--nx-green);
  border-color: var(--nx-green);
  box-shadow: 0 10px 20px rgba(6, 56, 40, 0.16);
}

.icon-action.shipment:not(:disabled) {
  color: var(--nx-green);
}

.icon-action.archive:not(:disabled) {
  color: var(--nx-green);
}

.icon-action:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.icon-action.danger {
  color: var(--ds-danger);
  border-color: rgba(225, 29, 46, 0.18);
}

.icon-action:not(:disabled):hover {
  border-color: rgba(var(--ds-primary-rgb), 0.22);
  background: color-mix(in srgb, var(--ds-card) 88%, var(--ds-primary-light));
  box-shadow: 0 10px 22px rgba(var(--ds-sidebar-rgb), 0.1);
}

.owner-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  font-weight: 700;
}

.owner-cell span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.owner-cell svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--nx-green);
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9.5px;
  font-weight: 700;
}

.priority-nizak {
  color: #476153;
  background: #edf3ef;
}

.priority-srednji {
  color: #9a5a00;
  background: var(--ds-warning-bg);
}

.priority-visok {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.due-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
}

.due-chip.is-today,
.card-dates.is-today strong {
  color: var(--ds-warning);
}

.due-chip.is-overdue,
.card-dates.is-overdue strong {
  color: var(--ds-danger);
}

.work-order-code {
  color: var(--ds-sidebar);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
}

.two-line-cell {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shipment-table button.work-order-code {
  display: inline;
  min-height: 0;
  border: 0;
  padding: 0;
  color: var(--ds-sidebar);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.shipment-table button.work-order-code:hover {
  color: var(--ds-primary);
  text-decoration: underline;
}

.problem-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--nx-text);
  background: var(--nx-white);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.problem-count.has-problems {
  color: var(--ds-warning);
  border-color: rgba(234, 88, 12, 0.24);
  background: var(--ds-warning-bg);
}

.problem-count.no-problems {
  color: #247346;
  border-color: rgba(36, 115, 70, 0.22);
  background: #edf8f1;
}

.wo-progress {
  display: grid;
  gap: 7px;
  min-width: 84px;
}

.wo-progress em {
  color: #203029;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.wo-progress i {
  overflow: hidden;
  display: block;
  width: 76px;
  height: 7px;
  border-radius: 999px;
  background: #e8ece9;
}

.wo-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d6b43, #53965b);
}

.work-order-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  color: #53625a;
  border-top: 1px solid var(--nx-line);
  font-size: 14px;
}

.work-order-pagination > div,
.work-order-pagination label,
.work-order-pagination nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.work-order-pagination select {
  min-height: 38px;
  border: 1px solid var(--nx-line);
  border-radius: 9px;
  padding: 0 12px;
  background: var(--ds-card);
}

.work-order-pagination button {
  display: inline-grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--nx-line);
  border-radius: 9px;
  color: #1d2b25;
  background: var(--ds-card);
  font-weight: 700;
}

.work-order-pagination button svg {
  width: 14px;
  height: 14px;
}

.work-order-pagination button.active {
  color: var(--ds-card);
  background: var(--nx-green);
  border-color: var(--nx-green);
}

.work-order-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.page-gap {
  color: var(--nx-soft);
  padding: 0 2px;
}

.work-order-list-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 320px;
  padding: 42px 24px;
  color: var(--ds-text-light);
  background: var(--nx-card);
  text-align: center;
}

.work-order-list-state svg {
  width: 34px;
  height: 34px;
  color: var(--ds-primary);
}

.work-order-list-state h2,
.work-order-list-state p {
  max-width: 560px;
  margin: 0;
}

.work-order-list-state h2 {
  color: var(--ds-heading);
  font-size: 24px;
  line-height: 1.2;
}

.work-order-list-state p {
  line-height: 1.5;
}

.work-order-list-state.error-state svg {
  color: var(--ds-danger);
}

.work-order-list-state .state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 1500px) {
  .work-order-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-orders-desktop-filters {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .sort-filter {
    grid-column: span 1;
  }
}

@media (max-width: 1180px) {
  .worker-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-order-kpis,
  .work-orders-desktop-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-order-pagination,
  .work-order-pagination > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .worker-kpis,
  .worker-task-list,
  .worker-task-card dl {
    grid-template-columns: 1fr;
  }

  .worker-account-card {
    display: grid;
  }

  .worker-account-card .compact-command {
    width: 100%;
    min-width: 0;
  }

  .worker-task-card {
    padding: 18px;
  }

  .worker-task-card footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .worker-card-badges {
    justify-content: flex-start;
  }

  .worker-action {
    width: 100%;
    min-height: 54px;
  }

  .work-order-kpis,
  .work-orders-desktop-filters {
    grid-template-columns: 1fr;
  }

  .work-order-kpi {
    min-height: 104px;
  }
}

.problem-count:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.24);
  background: rgba(var(--ds-primary-border-rgb), 0.06);
}

.work-order-card-grid {
  display: none;
  gap: 14px;
}

.work-order-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  padding: 16px;
  background: var(--nx-white);
  box-shadow: 0 12px 24px rgba(var(--ds-sidebar-rgb), 0.075);
  cursor: pointer;
}

.work-order-card.is-overdue::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--ds-danger);
}

.work-order-card:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.3);
  box-shadow: 0 18px 34px rgba(var(--ds-sidebar-rgb), 0.1);
}

.work-order-card header,
.work-order-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.work-order-card header > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.work-order-card h2 {
  margin: 0;
  color: #081812;
  font-size: 18px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.work-order-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.work-order-card dl div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.work-order-card dt {
  color: #738078;
  font-size: 11px;
  font-weight: 700;
}

.work-order-card dd {
  min-width: 0;
  margin: 0;
  color: #17231e;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.work-order-card dd .priority-badge,
.work-order-card dd .problem-count {
  justify-self: start;
}

.work-order-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  justify-content: stretch;
}

.work-order-card .open-card-button {
  width: 100%;
  min-height: 48px;
  color: var(--ds-card);
  font-size: 13px;
}

.work-order-card-secondary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
}

.work-order-card .status-badge {
  font-size: 11px;
  padding: 4px 8px;
}

.shipment-disabled-note {
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.work-order-card span,
.work-order-card em {
  font-style: normal;
}

/* Build 003.1 products overview. */
.products-overview {
  display: grid;
  gap: 22px;
}

.product-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.product-kpi {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 106px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: var(--nx-card);
  box-shadow: var(--shadow-card);
}

.product-kpi span,
.product-kpi strong,
.product-kpi em {
  display: block;
}

.product-kpi span {
  color: var(--nx-text);
  font-size: 13px;
  font-weight: 760;
}

.product-kpi strong {
  margin-top: 8px;
  color: #050d09;
  font-size: 27px;
  line-height: 1;
}

.product-kpi em {
  margin-top: 12px;
  color: var(--nx-soft);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
}

.tone-purple .metric-icon {
  color: var(--ds-info);
  background: var(--ds-info-bg);
}

.tone-orange .metric-icon {
  color: #f97316;
  background: var(--ds-warning-bg);
}

.products-table-card {
  overflow: hidden;
  border-radius: var(--radius-md);
  padding: 0;
}

.products-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, 0.56fr)) auto auto;
  gap: 14px;
  align-items: end;
  border-bottom: 1px solid var(--nx-line);
  padding: 20px 24px 18px;
  background: rgba(255, 255, 255, 0.88);
}

.products-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--nx-soft);
  font-size: 11px;
  font-weight: 700;
}

.products-toolbar select,
.products-toolbar input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  padding: 0 13px;
  color: var(--nx-text);
  background: var(--nx-white);
  font: inherit;
  font-size: 13px;
  outline: 0;
}

.products-toolbar select:focus,
.products-toolbar input:focus {
  border-color: rgba(var(--ds-primary-rgb), 0.44);
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-border-rgb), 0.1);
}

.product-search {
  position: relative;
}

.product-search svg {
  position: absolute;
  right: 13px;
  bottom: 12px;
  width: 17px;
  height: 17px;
  color: var(--nx-soft);
  pointer-events: none;
}

.product-search input {
  padding-right: 40px;
}

.products-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-inline: contain;
}

.products-list-card,.products-screen,.product-overview-shell{min-width:0;max-width:100%;}
.products-table-desktop{min-width:1540px;}
.product-stock-split{display:block;white-space:nowrap;color:var(--muted);margin-top:3px;}
.product-reserved-link{font-weight:800;}
.wo-purpose-segments,.base-fulfillment-field{display:flex;gap:8px;flex-wrap:wrap;}
.wo-purpose-segments label,.base-fulfillment-field label{border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;background:#fff;}
.wo-purpose-segments label.active,.base-fulfillment-field label.active{border-color:#2f78aa;background:#edf7ff;color:#124d78;}
.wo-purpose-segments input,.base-fulfillment-field input{margin-right:7px;}
.base-fulfillment-field{grid-column:1/-1;border:0;padding:0;margin:0 0 8px;}
.base-fulfillment-field legend{font-weight:800;margin-bottom:8px;}
.product-stock-reservation-wrap{max-width:100%;overflow:auto;}
.product-stock-reservation-wrap table{width:100%;min-width:760px;border-collapse:collapse;}
.product-stock-reservation-wrap th,.product-stock-reservation-wrap td{border-bottom:1px solid var(--line);text-align:left;}
.product-stock-reservation-wrap td small{display:block;color:var(--muted);}
.product-production-link{font-variant-numeric:tabular-nums;}
.product-production-commitments-modal{display:flex;flex-direction:column;width:min(1120px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:hidden;padding:0;}
.product-production-commitments-modal>.flow-modal-head{flex:0 0 auto;}
.product-production-commitments-summary{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;padding:14px 22px;border-bottom:1px solid var(--ds-border);background:#fff;}
.product-production-commitments-summary>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--ds-border);border-radius:10px;background:var(--ds-bg-subtle,#f8fafc);}
.product-production-commitments-summary span{color:var(--ds-text-muted);font-size:.75rem;font-weight:800;}
.product-production-commitments-summary strong{color:var(--ds-heading);font-size:.96rem;white-space:nowrap;}
.product-production-commitments-summary .total{border-color:rgba(var(--ds-primary-rgb),.28);background:rgba(var(--ds-primary-rgb),.07);}
.product-production-commitments-body{min-height:170px;padding:16px 22px;overflow:auto;background:var(--ds-bg-subtle,#f8fafc);}
.product-production-commitments-table{overflow:auto;border:1px solid var(--ds-border);border-radius:12px;background:#fff;}
.product-production-commitments-table table{width:100%;min-width:980px;border-collapse:collapse;}
.product-production-commitments-table th,.product-production-commitments-table td{border-bottom:1px solid var(--ds-border);text-align:left;vertical-align:middle;}
.product-production-commitments-table tbody tr:last-child td{border-bottom:0;}
.product-production-commitments-table td small{display:block;max-width:220px;margin-top:3px;color:var(--ds-text-muted);font-size:.7rem;}
.product-production-remaining strong{color:var(--ds-primary-strong,#17486d);font-size:1rem;}
.product-production-commitments-cards{display:none;}
.product-production-commitments-loading{padding:28px 0;}
.product-production-commitments-error{display:grid;justify-items:start;gap:12px;padding:18px;border:1px solid rgba(185,28,28,.2);border-radius:12px;background:#fff;}
.product-production-commitments-error p{margin:0;color:var(--ds-heading);font-weight:700;}
.product-production-commitments-modal>.flow-modal-footer{flex:0 0 auto;justify-content:flex-end;}
@media(max-width:1100px){.work-order-create-modal,.add-base-item-modal,.product-stock-reservations-modal{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);}.products-table-wrap{touch-action:pan-x pan-y;}}
@media(max-width:700px){.product-production-commitments-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.product-production-commitments-summary{grid-template-columns:1fr 1fr;padding:12px 14px}.product-production-commitments-summary .total{grid-column:1/-1}.product-production-commitments-body{padding:14px}.product-production-commitments-table{display:none}.product-production-commitments-cards{display:grid;gap:12px}.product-production-commitment-card{display:grid;gap:14px;padding:15px;border:1px solid var(--ds-border);border-radius:13px;background:#fff}.product-production-commitment-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.product-production-commitment-card header>div{display:grid;gap:3px;min-width:0}.product-production-commitment-card header span,.product-production-commitment-card header small{color:var(--ds-text-muted);font-size:.75rem}.product-production-commitment-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding-top:12px;border-top:1px solid var(--ds-border)}.product-production-commitment-card dl>div{display:grid;gap:3px}.product-production-commitment-card dt{color:var(--ds-text-muted);font-size:.68rem;font-weight:800}.product-production-commitment-card dd{margin:0;font-weight:750}.product-production-commitment-card .remaining dd{color:var(--ds-primary-strong,#17486d);font-size:1rem}.product-production-commitment-card>button{justify-self:stretch;justify-content:center}.product-production-commitments-modal>.flow-modal-footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}}

/* Product Stock UX consolidation — Materials visual parity. */
.modal-panel.work-order-create-modal .wo-purpose-row{display:flex;align-items:center;gap:14px;min-height:44px;padding:8px 12px;border:1px solid rgba(var(--ds-primary-rgb),.16);border-radius:10px;background:#fff;}
.modal-panel.work-order-create-modal .wo-purpose-row>strong{flex:0 0 auto;color:var(--ds-heading);font-size:12px;}
.modal-panel.work-order-create-modal .wo-purpose-segments{display:flex;gap:6px;flex-wrap:nowrap;}
.modal-panel.work-order-create-modal .wo-purpose-segments label{display:flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--ds-border);border-radius:999px;background:#f8fafc;font-size:12px;font-weight:800;cursor:pointer;}
.modal-panel.work-order-create-modal .wo-purpose-segments input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.modal-panel.work-order-create-modal .wo-purpose-segments label::before{content:"";width:12px;height:12px;border:1px solid #8395a7;border-radius:50%;background:#fff;box-sizing:border-box;}
.modal-panel.work-order-create-modal .wo-purpose-segments label.active{border-color:var(--ds-primary);color:var(--ds-primary-strong);background:var(--ds-primary-light);box-shadow:none;}
.modal-panel.work-order-create-modal .wo-purpose-segments label.active::before{border:3px solid var(--ds-primary);}
.modal-panel.work-order-create-modal .wo-purpose-segments label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(var(--ds-primary-rgb),.16);}
.modal-panel.work-order-create-modal .wo-create-section-title{margin-bottom:9px;}
.modal-panel.work-order-create-modal .wo-create-card{padding:12px 14px;}
.modal-panel.work-order-create-modal .work-order-create-main{gap:9px;}
.modal-panel.work-order-create-modal input[readonly]{border-color:#d7e0e7;color:#52687b;background:#eef3f6;cursor:not-allowed;}
.wo-settings-guidance{grid-column:1/-1;padding:9px 11px;border:1px solid #f0cf80;border-radius:8px;color:#7a4a00;background:#fff8e7;font-size:12px;font-weight:750;}

.products-list-card{overflow:hidden;border-radius:14px;box-shadow:0 8px 24px rgba(var(--ds-sidebar-rgb),.055);}
.products-filter-card{border-radius:14px;box-shadow:0 8px 24px rgba(var(--ds-sidebar-rgb),.045);}
.products-table{min-width:1260px;table-layout:auto;}
.products-table th,.products-table td{border-right:1px solid rgba(var(--ds-primary-rgb),.07);border-bottom:1px solid var(--ds-border);vertical-align:middle;}
.products-table th:last-child,.products-table td:last-child{border-right:0;}
.products-table th{text-align:center;white-space:nowrap;}
.products-table th .sort-header{width:100%;justify-content:center;text-align:center;white-space:nowrap;}
.products-table th:nth-child(n),.products-table td:nth-child(n){width:auto;}
.products-table th:nth-child(1),.products-table td:nth-child(1){min-width:125px;text-align:left;}
.products-table th:nth-child(2),.products-table td:nth-child(2){min-width:220px;text-align:left;}
.products-table th:nth-child(3),.products-table td:nth-child(3){min-width:70px;}
.products-table th:nth-child(4),.products-table td:nth-child(4),.products-table th:nth-child(5),.products-table td:nth-child(5),.products-table th:nth-child(6),.products-table td:nth-child(6),.products-table th:nth-child(7),.products-table td:nth-child(7),.products-table th:nth-child(8),.products-table td:nth-child(8){min-width:112px;text-align:center;font-variant-numeric:tabular-nums;}
.products-table th:nth-child(5),.products-table td:nth-child(5){border-left:2px solid rgba(var(--ds-primary-rgb),.16);}
.products-table th:nth-child(9),.products-table td:nth-child(9){min-width:105px;text-align:center;}
.products-table th:nth-child(10),.products-table td:nth-child(10){min-width:132px;text-align:center;}
.product-cell-center{text-align:center!important;}.product-number{font-variant-numeric:tabular-nums;font-weight:750;}.product-stock-group-start{border-left:2px solid rgba(var(--ds-primary-rgb),.16)!important;}
.product-row-actions{justify-content:center;flex-wrap:nowrap;gap:5px;}
.product-row-actions .icon-mini{width:32px;height:32px;}
.product-reserved-link,.products-table .material-reserved-link{min-width:30px;min-height:30px;padding:0 6px;border-radius:7px;font-weight:850;}

.product-create-modal{width:min(1180px,calc(100vw - 32px));max-height:calc(100dvh - 28px);overflow:hidden;}
.product-create-modal .product-wizard-body{min-height:0;overflow:auto;}
.product-wizard-tabs{overflow-x:auto;scrollbar-width:thin;}
.product-wizard-tabs button{flex:1 0 max-content;min-width:130px;}
.product-stock-panel{align-self:start;min-width:0;}
.product-stock-panel dt{color:var(--ds-text-muted);font-size:12px;}.product-stock-panel dd{margin:0;color:var(--ds-heading);font-weight:850;font-variant-numeric:tabular-nums;}
.product-stock-actions{display:grid;gap:8px;margin-top:16px;}.product-stock-actions button{width:100%;min-height:40px;}
.product-stock-correction-inline{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:2px solid rgba(var(--ds-primary-rgb),.14);}
.product-stock-correction-inline h4,.product-stock-correction-inline p{margin:0;}.product-stock-correction-inline .field{display:grid;gap:5px;}.product-stock-correction-inline input,.product-stock-correction-inline textarea{width:100%;min-width:0;box-sizing:border-box;}.product-stock-correction-inline>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.product-stock-history-panel{min-width:0;}.product-stock-history-table{max-width:100%;overflow:auto;}.product-stock-history-table table{width:100%;min-width:900px;border-collapse:collapse;}.product-stock-history-table th,.product-stock-history-table td{border-bottom:1px solid var(--ds-border);text-align:left;}.product-stock-history-table th{
}.product-stock-history-state{min-height:260px;display:grid;place-items:center;color:var(--ds-text-muted);}

@media(max-width:1280px){.product-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.products-table-wrap-landscape{overflow-x:auto;}.products-table-landscape{min-width:940px!important;}.products-table-landscape th:nth-child(n),.products-table-landscape td:nth-child(n){width:auto;}.products-table-landscape th:nth-child(1){min-width:210px}.products-table-landscape th:nth-child(4){min-width:190px}.products-table-landscape th:nth-child(7){min-width:130px}}
@media(max-width:860px){.modal-panel.work-order-create-modal .wo-purpose-row{align-items:flex-start;flex-direction:column;gap:8px}.modal-panel.work-order-create-modal .wo-purpose-segments{width:100%}.modal-panel.work-order-create-modal .wo-purpose-segments label{flex:1;justify-content:center;min-height:42px}.product-create-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.product-stock-history-table{display:block}.product-stock-panel{width:100%}}
@media(max-width:560px){.product-create-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.product-wizard-tabs{display:flex!important;overflow-x:auto!important}.product-wizard-tabs button{min-width:128px;min-height:44px}.product-general-grid{grid-template-columns:1fr!important}.product-stock-correction-inline>div{grid-template-columns:1fr}.product-card dl{grid-template-columns:1fr 1fr}}

.products-table {
  width: 100%;
  min-width: 1120px;
}

.products-table th,
.products-table td {
  vertical-align: middle;
}

.products-table th {
  white-space: nowrap;
}

.products-table td {
  border-top: 1px solid var(--nx-line);
}

.products-table tbody tr {
  cursor: pointer;
}

.products-table tbody tr:hover {
  background: rgba(var(--ds-primary-border-rgb), 0.055);
}

.check-cell {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #b9c4bf;
  border-radius: 4px;
  background: var(--ds-card);
}

.product-code-cell {
  display: grid;
  grid-template-columns: 42px auto;
  align-items: center;
  gap: 12px;
}

.product-code-cell strong {
  color: var(--nx-text);
  font-weight: 800;
  white-space: nowrap;
}

.product-type-badge,
.product-type-note {
  display: inline-flex;
}

.product-type-badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.type-finished {
  color: #14723a;
  background: #e6f4e8;
}

.type-assembled {
  color: var(--ds-info);
  background: #e8f1ff;
}

.product-type-note {
  margin-top: 6px;
  color: var(--nx-soft);
  font-size: 12px;
  font-weight: 650;
}

.sort-header.active svg {
  color: var(--nx-green);
}

.mini-progress {
  display: block !important;
}

.mini-progress i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: #e8eeeb;
  overflow: hidden;
}

.mini-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--nx-green);
}

.mini-progress.tone-active b {
  background: #2f6fe4;
}

.mini-progress.tone-success b {
  background: #12843c;
}

.mini-progress.tone-warning b {
  background: #e47d22;
}

.mini-progress.tone-muted b {
  background: #a8b0aa;
}

.work-order-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap: 14px 16px;
}

.work-order-form-grid label {
  display: grid;
  gap: 6px;
  color: #17231e;
  font-size: 11px;
  font-weight: 650;
}

.work-order-form-grid label span b {
  color: var(--ds-danger);
}

.work-order-form-grid input,
.work-order-form-grid select,
.work-order-form-grid textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--nx-line);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--nx-text);
  background: var(--nx-white);
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.work-order-form-grid input[readonly] {
  color: var(--nx-soft);
  background: var(--ds-bg);
}

.empty-work-items {
  min-height: 280px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.empty-work-items p {
  max-width: 560px;
  margin: 0 0 18px;
  color: var(--nx-soft);
  line-height: 1.7;
}

.work-order-items-start {
  display: grid;
  gap: 26px;
}

.items-start-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.initial-items-card {
  overflow: hidden;
  padding: 26px;
}

.initial-items-card .panel-header {
  margin-bottom: 22px;
}

.initial-items-card .table-tools {
  gap: 14px;
}

.initial-items-card .primary-button,
.initial-items-card .secondary-button {
  min-height: 50px;
  border-radius: 11px;
  padding: 0 22px;
  font-size: 15px;
}

.initial-items-table {
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  background: var(--ds-card);
}

.initial-items-table .hierarchy-table {
  min-width: 980px;
}

.items-empty-row td {
  border-bottom: 0;
}

.items-empty-state {
  display: grid;
  justify-items: center;
  gap: 16px;
  min-height: 420px;
  padding: 70px 24px;
  text-align: center;
}

.items-empty-icon {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 18px;
  color: #7f9690;
  background: #edf3f1;
}

.items-empty-icon svg {
  width: 42px;
  height: 42px;
}

.items-empty-state h3 {
  margin: 4px 0 0;
  color: var(--ds-sidebar);
  font-size: 24px;
  line-height: 1.2;
}

.items-empty-state p {
  margin: 0;
  color: #536172;
  font-size: 17px;
}

.items-empty-state div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.items-help-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  color: #536172;
  font-size: 15px;
}

.items-help-note svg {
  width: 22px;
  height: 22px;
}

.work-item-stub-modal {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 18px 0 4px;
  text-align: center;
}

.work-item-stub-modal p {
  max-width: 420px;
  margin: 0;
  color: var(--nx-soft);
}

.work-order-form-grid textarea {
  min-height: 58px;
  resize: vertical;
}

.work-order-form-grid small {
  color: var(--nx-soft);
  font-size: 10px;
  font-weight: 500;
}

.work-order-form-grid .wide-field {
  grid-column: 1 / -1;
}

.work-order-form-grid .name-field {
  grid-column: span 2;
}

.new-customer-button {
  align-self: end;
  min-height: 36px;
  white-space: nowrap;
}

.input-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
}

.input-suffix input {
  border-radius: 7px 0 0 7px;
}

.input-suffix em {
  display: grid;
  place-items: center;
  border: 1px solid var(--nx-line);
  border-left: 0;
  border-radius: 0 7px 7px 0;
  color: var(--nx-soft);
  background: var(--ds-card);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.work-order-create-modal {
  width: min(100%, 1450px);
  max-height: min(92vh, 920px);
  overflow: auto;
  border: 1px solid rgba(228, 233, 230, 0.92);
  border-radius: 16px;
  padding: 46px 50px 40px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 26px 70px rgba(var(--ds-sidebar-rgb), 0.22);
}

.work-order-create-backdrop {
  padding: 28px;
  background: rgba(var(--ds-sidebar-rgb), 0.34);
}

.work-order-modal-header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 54px;
}

.work-order-modal-header .soft-icon {
  width: 72px;
  height: 72px;
}

.work-order-modal-header h2 {
  margin: 0;
  color: var(--ds-sidebar);
  font-size: clamp(30px, 2.4vw, 42px);
  line-height: 1.08;
  font-weight: 780;
}

.work-order-modal-header p {
  margin: 12px 0 0;
  color: #647386;
  font-size: 18px;
  font-weight: 560;
}

.work-order-create-modal .modal-close {
  top: 42px;
  right: 42px;
  width: 44px;
  height: 44px;
  color: #536172;
}

.work-order-create-modal .modal-close svg {
  width: 26px;
  height: 26px;
}

.work-order-create-modal .work-order-form-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.95fr;
  gap: 32px 28px;
}

.wo-modal-field {
  display: grid;
  gap: 11px;
  min-width: 0;
  color: #0c1a14;
  font-size: 17px;
  font-weight: 760;
}

.wo-modal-field b {
  color: var(--ds-danger);
}

.wo-modal-field input,
.wo-modal-field select,
.wo-modal-field textarea {
  width: 100%;
  min-height: 68px;
  border: 1px solid #d6dee3;
  border-radius: 10px;
  padding: 0 22px;
  color: var(--ds-sidebar);
  background: var(--ds-card);
  font-size: 20px;
  font-weight: 520;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(var(--ds-sidebar-rgb), 0.02);
}

.wo-modal-field input::placeholder,
.wo-modal-field textarea::placeholder {
  color: #8a97a6;
}

.wo-modal-field input:focus,
.wo-modal-field select:focus,
.wo-modal-field textarea:focus {
  border-color: rgba(var(--ds-primary-rgb), 0.52);
  box-shadow: 0 0 0 4px rgba(var(--ds-primary-border-rgb), 0.11);
}

.wo-modal-field input[readonly] {
  color: var(--ds-sidebar);
  background: var(--ds-bg);
  font-weight: 780;
}

.wo-modal-field small {
  color: #68778a;
  font-size: 15px;
  font-weight: 520;
}

.wo-modal-field em {
  color: var(--ds-danger);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.wo-modal-field.has-error input,
.wo-modal-field.has-error select,
.wo-modal-field.has-error textarea {
  border-color: rgba(211, 23, 34, 0.55);
  background: var(--ds-danger-bg);
}

.work-order-create-modal .name-field {
  grid-column: span 2;
}

.work-order-create-modal .wide-field {
  grid-column: 1 / -1;
}

.work-order-create-modal textarea {
  min-height: 112px;
  padding-top: 18px;
  line-height: 1.5;
  resize: vertical;
}

.work-order-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  align-items: stretch;
}

.work-order-create-main {
  display: grid;
  gap: 22px;
}

.wo-create-card,
.wo-number-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.wo-create-card {
  padding: 26px;
}

.wo-create-card h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--ds-heading);
  font-size: 21px;
  font-weight: 700;
}

.wo-create-card h3 svg {
  width: 26px;
  height: 26px;
  color: var(--ds-primary);
}

.wo-create-card-grid {
  display: grid;
  gap: 20px 24px;
}

.wo-create-card-grid.two-columns,
.wo-create-card-grid.deadline-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.wo-modal-field.span-all {
  grid-column: 1 / -1;
}

.wo-modal-field.note-field {
  gap: 10px;
}

.wo-priority-field {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.wo-priority-field legend {
  margin: 0;
  padding: 0;
  color: var(--ds-heading);
  font-size: 17px;
  font-weight: 760;
}

.wo-priority-field b {
  color: var(--ds-danger);
}

.wo-priority-segments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  min-height: 68px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
}

.wo-priority-segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  border-right: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-size: 17px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.wo-priority-segment:last-child {
  border-right: 0;
}

.wo-priority-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wo-priority-segment:hover {
  background: var(--ds-bg);
}

.wo-priority-segment.active,
.wo-priority-segment:has(input:checked) {
  color: var(--ds-heading);
  background: var(--ds-primary-light);
  box-shadow: inset 0 0 0 1px var(--ds-primary-border);
}

.priority-dot {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

.priority-dot.low {
  background: var(--ds-success);
}

.priority-dot.medium {
  background: var(--ds-warning);
}

.priority-dot.high {
  background: #f97316;
}

.priority-dot.critical {
  background: var(--ds-danger);
}

.wo-priority-field.has-error .wo-priority-segments {
  border-color: rgba(220, 38, 38, 0.52);
  background: var(--ds-danger-bg);
}

.wo-priority-field em {
  color: var(--ds-danger);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.work-order-create-side {
  min-width: 0;
}

.wo-number-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 44px 32px;
  text-align: center;
}

.wo-number-card > .soft-icon {
  width: 86px;
  height: 86px;
  margin-bottom: 28px;
}

.wo-number-card > p {
  margin: 0 0 12px;
  color: var(--ds-secondary);
  font-size: 17px;
  font-weight: 700;
}

.wo-number-card > strong {
  display: block;
  margin-bottom: 22px;
  color: var(--ds-primary);
  font-size: clamp(32px, 2.4vw, 42px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.wo-generated-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin-bottom: 26px;
  border-radius: 12px;
  padding: 0 16px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
  font-size: 15px;
  font-weight: 800;
}

.wo-generated-badge svg {
  width: 20px;
  height: 20px;
}

.wo-number-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  width: 100%;
  margin: 0 0 34px;
  border: 1px solid var(--ds-primary-border);
  border-radius: var(--ds-radius-card);
  padding: 20px;
  color: var(--ds-text);
  background: rgba(220, 252, 231, 0.32);
  text-align: left;
}

.wo-number-note svg {
  width: 24px;
  height: 24px;
  color: var(--ds-primary);
}

.wo-number-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
}

.wo-created-date {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: auto;
  text-align: left;
}

.wo-created-date .soft-icon {
  width: 54px;
  height: 54px;
  border: 1px solid var(--ds-border);
  color: var(--ds-heading);
  background: var(--ds-card);
}

.wo-created-date span {
  display: block;
  color: var(--ds-secondary);
  font-size: 15px;
  font-weight: 650;
}

.wo-created-date strong {
  display: block;
  margin-top: 5px;
  color: var(--ds-primary);
  font-size: 17px;
  font-weight: 800;
}

.work-order-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 48px;
  border-top: 1px solid var(--nx-line);
  padding-top: 34px;
}

.work-order-modal-actions .secondary-button,
.work-order-modal-actions .primary-button {
  min-width: 118px;
  min-height: 58px;
  border-radius: 12px;
  padding: 0 30px;
  font-size: 17px;
  font-weight: 780;
}

.work-order-modal-actions .primary-button {
  min-width: 228px;
}

@media (max-width: 1180px) {
  .work-order-create-layout {
    grid-template-columns: 1fr;
  }

  .wo-number-card {
    min-height: auto;
  }

  .work-order-create-modal .work-order-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .work-order-create-modal .name-field {
    grid-column: span 1;
  }
}

@media (max-width: 760px) {
  .work-order-create-backdrop {
    padding: 12px;
  }

  .work-order-create-modal {
    padding: 30px 22px 24px;
  }

  .work-order-create-modal .work-order-form-grid {
    grid-template-columns: 1fr;
  }

  .wo-create-card {
    padding: 22px;
  }

  .wo-create-card-grid.two-columns,
  .wo-create-card-grid.deadline-grid {
    grid-template-columns: 1fr;
  }

  .wo-priority-segments {
    grid-template-columns: 1fr 1fr;
  }

  .wo-priority-segment:nth-child(2) {
    border-right: 0;
  }

  .wo-priority-segment:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ds-border);
  }

  .wo-number-card {
    padding: 30px 22px;
  }

  .work-order-modal-header {
    align-items: flex-start;
    margin-bottom: 32px;
  }

  .work-order-modal-actions {
    flex-direction: column-reverse;
  }

  .work-order-modal-actions .secondary-button,
  .work-order-modal-actions .primary-button {
    width: 100%;
  }
}

.delete-confirm-modal {
  width: min(100%, 480px);
  padding: 24px;
}

.delete-confirm-modal h2 .soft-icon {
  color: var(--ds-danger);
  background: rgba(217, 31, 47, 0.08);
}

.modal-panel {
  position: relative;
}

.modal-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 34px;
  color: var(--nx-text);
  font-size: 15px;
  line-height: 1.25;
}

.modal-panel h2 .soft-icon {
  width: 28px;
  height: 28px;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--nx-soft);
  background: transparent;
}

.modal-close:hover {
  color: var(--nx-text);
  background: rgba(var(--ds-sidebar-rgb), 0.06);
}

.warning-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  border: 1px solid rgba(228, 125, 34, 0.16);
  border-radius: 8px;
  padding: 12px;
  color: var(--ds-warning);
  background: var(--ds-warning-bg);
  font-size: 12px;
  font-weight: 600;
}

.warning-strip svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 1540px) {
  .work-orders-toolbar {
    grid-template-columns: auto minmax(170px, 1fr) repeat(4, minmax(106px, 1fr)) auto;
  }
}

@media (max-width: 1420px) {
  .items-layout,
  .problems-layout,
  .support-panels {
    grid-template-columns: 1fr;
  }

  .general-grid,
  .summary-strip,
  .work-kpis,
  .problem-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-block {
    grid-row: auto;
  }
}

/* Build 002 compact density for work-order detail screens. */
.content-wide {
  padding: 16px 20px 14px;
  font-size: 11px;
}

.content-wide .topbar-compact {
  gap: 8px;
  margin-bottom: 10px;
}

.content-wide .topbar-actions {
  gap: 7px;
}

.content-wide .breadcrumb {
  gap: 7px;
  font-size: 10px;
}

.content-wide .detail-heading {
  gap: 10px;
}

.content-wide .detail-heading h1 {
  margin-top: 4px;
  font-size: clamp(22px, 1.75vw, 30px);
  line-height: 1.02;
}

.content-wide .detail-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 10.5px;
}

.content-wide .icon-button,
.content-wide .profile-chip {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.content-wide .profile-chip span {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.work-order-detail {
  gap: 10px;
}

.detail-tabs {
  gap: 16px;
}

.detail-tabs button {
  min-height: 30px;
  padding: 0 7px;
  font-size: 10.5px;
}

.general-card,
.summary-card,
.items-table-card,
.operation-card,
.status-card,
.problem-cta,
.problem-list,
.problem-thread,
.problem-side .detail-card,
.support-panels .detail-card {
  padding: 11px;
}

.detail-card h2,
.section-title h2 {
  font-size: 13px;
}

.section-title {
  gap: 8px;
  margin-bottom: 9px;
}

.soft-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.soft-icon svg {
  width: 14px;
  height: 14px;
}

.general-grid {
  grid-template-columns: repeat(3, minmax(130px, 1fr)) 160px;
  gap: 12px 14px;
}

.field {
  gap: 5px;
  font-size: 12px;
}

.field span,
.qr-block span {
  font-size: 11px;
}

.field input,
.field select,
.field textarea,
.table-tools input,
.filters select {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 10.5px;
}

.field textarea {
  min-height: 46px;
}

.qr-demo {
  width: 118px;
}

.summary-strip,
.work-kpis,
.problem-kpis {
  gap: 7px;
}

.work-kpis,
.problem-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.summary-item,
.work-kpi {
  gap: 7px;
}

.work-kpi,
.problem-kpis .work-kpi {
  min-height: 42px;
  padding: 7px 9px;
}

.work-kpi strong {
  margin-top: 1px;
  font-size: 12px;
}

.work-kpi span,
.work-kpi em,
.summary-item small,
.summary-item em {
  font-size: 9.5px;
}

.status-badge {
  padding: 3px 7px;
  font-size: 9.5px;
}

.items-layout {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 9px;
}

.table-tools {
  gap: 7px;
}

.table-tools input {
  width: 138px;
}

.hierarchy-table-wrap {
  margin: 0 -11px;
}

.hierarchy-table {
  min-width: 720px;
}

.hierarchy-name {
  grid-template-columns: 15px 24px minmax(96px, 1fr);
  gap: 4px;
}

.hierarchy-name small {
  font-size: 8.5px;
}

.level-1 .hierarchy-name {
  padding-left: 9px;
}

.level-2 .hierarchy-name {
  padding-left: 18px;
}

.row-toggle,
.row-spacer {
  width: 15px;
  height: 15px;
}

.doc-chip {
  gap: 4px;
  padding: 2px 4px;
  font-size: 8.5px;
}

.progress-cell {
  gap: 5px;
}

.progress-cell i {
  width: 34px;
  height: 3px;
}

.detail-list {
  gap: 6px 8px;
  margin-top: 8px;
  font-size: 9.5px;
}

.full-button {
  min-height: 29px;
  margin-top: 5px;
  font-size: 10px;
}

.support-panels {
  grid-template-columns: 180px minmax(200px, 1fr) 250px 210px;
  gap: 8px;
}

.drawing-list,
.drawing-preview,
.finish-panel {
  min-height: 112px;
}

.blueprint-demo {
  min-height: 86px;
}

.scrap-callout {
  gap: 7px;
  padding: 8px;
  font-size: 9.5px;
}

.problems-layout {
  grid-template-columns: 250px minmax(310px, 1fr) 220px;
  gap: 9px;
}

.problem-list-item {
  grid-template-columns: 30px 1fr 32px;
  gap: 8px;
  padding: 9px;
}

.problem-id {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.thread-grid {
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 10px;
}

.message {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
}

.avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.message > div:last-child {
  padding: 8px;
}

.message p,
.message header,
.problem-tags span,
.problem-list-item small {
  font-size: 11px;
}

.message-input {
  grid-template-columns: 1fr 28px 28px 66px;
  gap: 6px;
}

.message-input button {
  min-height: 30px;
}

@media (max-width: 1420px) {
  .content-wide .items-layout {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .content-wide .problems-layout {
    grid-template-columns: 270px minmax(320px, 1fr) 230px;
  }

  .content-wide .support-panels {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .content-wide .work-kpis,
  .content-wide .problem-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-panels {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 1360px) {
  .compact-table th:nth-child(6),
  .compact-table td:nth-child(6),
  .compact-table th:nth-child(7),
  .compact-table td:nth-child(7) {
    display: none;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell > .sidebar {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: auto;
    overflow-y: visible;
    box-shadow: none;
  }

  .sidebar-brand img {
    max-width: 300px;
  }

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

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

@media (max-width: 640px) {
  .content,
  .sidebar {
    padding: 20px;
  }

  .topbar,
  .bar-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
    margin-bottom: 30px;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .kpi-grid,
  .settings-grid,
  .nav-list,
  .quick-grid {
    grid-template-columns: 1fr;
  }

  .production-visual {
    width: 100%;
  }

  .status-pill {
    white-space: normal;
  }
}

/* Build 002.2 readability fix for work-order detail screens only. */
.content-wide {
  font-size: 13px;
}

.content-wide .detail-heading h1 {
  font-size: clamp(28px, 2.25vw, 40px);
  line-height: 1.08;
}

.work-order-detail {
  gap: 18px;
}

.detail-tabs {
  gap: 24px;
}

.detail-tabs button {
  min-height: 44px;
  padding: 0 10px;
  font-size: 13.5px;
}

.general-card,
.summary-card,
.items-table-card,
.operation-card,
.status-card,
.problem-cta,
.problem-list,
.problem-thread,
.problem-side .detail-card,
.support-panels .detail-card {
  padding: 22px;
}

.detail-card h2,
.section-title h2,
.panel-header h2 {
  font-size: 17px;
}

.work-kpis,
.problem-kpis {
  gap: 12px;
}

.work-kpi,
.problem-kpis .work-kpi {
  min-height: 72px;
  padding: 14px 16px;
}

.work-kpi strong {
  font-size: 16px;
}

.work-kpi span,
.work-kpi em {
  font-size: 12px;
}

.items-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.hierarchy-table-wrap {
  margin: 0 -22px;
}

.hierarchy-table {
  min-width: 860px;
}

.hierarchy-name {
  grid-template-columns: 24px 46px minmax(180px, 1fr);
  gap: 10px;
}

.hierarchy-name strong {
  font-size: 13.5px;
}

.hierarchy-name small {
  font-size: 12px;
}

.row-toggle,
.row-spacer {
  width: 22px;
  height: 22px;
}

.doc-chip {
  padding: 7px 10px;
  font-size: 12px;
}

.progress-cell i {
  width: 78px;
  height: 6px;
}

.progress-cell em {
  font-size: 12px;
}

.status-badge {
  padding: 6px 10px;
  font-size: 11.5px;
}

.operation-side,
.problem-side {
  gap: 16px;
}

.operation-title {
  padding: 9px 13px;
  font-size: 13px;
}

.detail-list {
  gap: 12px 16px;
  margin-top: 16px;
  font-size: 13px;
}

.full-button {
  min-height: 42px;
  margin-top: 8px;
  padding: 0 14px;
  font-size: 13px;
}

.support-panels {
  grid-template-columns: minmax(280px, 420px);
  gap: 14px;
  align-items: start;
}

.drawing-list {
  min-height: auto;
}

.drawing-file {
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  padding: 13px 0;
  font-size: 13px;
}

.drawing-file small,
.drawing-file em {
  font-size: 12px;
}

.problems-layout {
  grid-template-columns: 340px minmax(520px, 1fr) 300px;
  gap: 18px;
}

.problem-list-item {
  grid-template-columns: 42px 1fr 48px;
  gap: 12px;
  padding: 14px;
}

.problem-list-item strong {
  font-size: 13.5px;
}

.problem-list-item small {
  font-size: 12.5px;
  line-height: 1.55;
}

.problem-id {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.problem-id.large {
  width: 54px;
  height: 46px;
  font-size: 17px;
}

.problem-head {
  gap: 14px;
}

.problem-head h2 {
  font-size: 22px;
}

.problem-tags {
  gap: 9px;
  margin-bottom: 18px;
}

.problem-tags span {
  padding: 8px 11px;
  font-size: 12.5px;
}

.thread-grid {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
}

.messages {
  gap: 14px;
}

.message {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
}

.avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.message > div:last-child {
  padding: 13px;
}

.message header {
  font-size: 12.5px;
}

.message p {
  font-size: 13px;
  line-height: 1.6;
}

.message-input {
  grid-template-columns: 1fr 40px 40px 92px;
  gap: 8px;
}

.message-input input {
  min-height: 44px;
  padding: 0 13px;
  font-size: 13px;
}

.message-input button {
  min-height: 42px;
}

.message-photos,
.photo-grid {
  gap: 10px;
}

.message-photos button,
.photo-grid button {
  min-height: 118px;
  border: 1px solid rgba(var(--ds-sidebar-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.problem-side .detail-card {
  font-size: 13px;
}

.modal-panel {
  width: min(100%, 720px);
  padding: 30px;
}

.modal-panel h2 {
  font-size: 21px;
}

.modal-panel p {
  font-size: 14px;
}

.modal-grid {
  gap: 18px;
}

.modal-grid .field input,
.modal-grid .field select,
.modal-grid .field textarea {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
}

.modal-grid .field textarea {
  min-height: 96px;
}

.modal-actions button {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

.scrap-note {
  margin-top: 16px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
  font-size: 13px;
  font-weight: 650;
}

.preview-modal {
  width: min(100%, 900px);
}

.document-preview-overlay {
  z-index: 220;
}

.modal-blueprint {
  min-height: 520px;
}

.photo-preview-demo {
  min-height: 520px;
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 52% 42%, rgba(18,24,22,0.9) 0 5%, transparent 6%),
    linear-gradient(135deg, rgba(232,235,232,0.95), rgba(133,142,136,0.9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 12px, transparent 12px 24px);
  box-shadow: inset 0 0 70px rgba(7,31,24,0.16);
}

@media (max-width: 1420px) {
  .content-wide .items-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .content-wide .problems-layout {
    grid-template-columns: 320px minmax(460px, 1fr);
  }

  .content-wide .problem-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .content-wide .support-panels {
    grid-template-columns: minmax(280px, 420px);
  }
}

/* Build 002.3 workflow: progressive detail, full-width table and action drawer. */
.content-wide .items-layout {
  grid-template-columns: 1fr;
}

.content-wide .items-table-card {
  overflow: hidden;
}

.content-wide .hierarchy-table {
  width: 100%;
  min-width: 1080px;
}

.content-wide .hierarchy-table th:nth-child(2),
.content-wide .hierarchy-table td:nth-child(2) {
  min-width: 190px;
}

.content-wide .hierarchy-table th:nth-child(10),
.content-wide .hierarchy-table td:nth-child(10) {
  min-width: 110px;
}

.content-wide .hierarchy-table th:nth-child(11),
.content-wide .hierarchy-table td:nth-child(11) {
  min-width: 112px;
}

.position-cell {
  display: inline-grid;
  grid-template-columns: 24px 42px;
  align-items: center;
  gap: 10px;
}

.operation-progress {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.operation-progress i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #e7ece9;
  overflow: hidden;
}

.operation-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-primary);
}

.operation-progress em,
.operation-progress strong {
  color: var(--nx-soft);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.operation-progress strong {
  color: var(--nx-text);
}

.action-drawer-button {
  gap: 7px;
}

.operation-info-panel {
  border-color: rgba(var(--ds-primary-rgb), 0.38);
}

.operation-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr) minmax(280px, 0.9fr);
  gap: 18px;
}

.operation-info-grid h3,
.problem-detail-stack h3 {
  margin: 0 0 12px;
  color: var(--nx-text);
  font-size: 14px;
}

.compact-drawings {
  min-height: auto;
}

.muted-note {
  margin: 0;
  color: var(--nx-soft);
  line-height: 1.6;
}

.operation-history {
  display: grid;
  gap: 0;
}

.operation-history div {
  border-left: 2px solid var(--nx-line);
  padding: 0 0 16px 16px;
}

.operation-history span {
  display: block;
  width: 10px;
  height: 10px;
  margin-left: -22px;
  border-radius: 999px;
  background: var(--ds-primary);
}

.operation-history strong,
.operation-history small {
  display: block;
}

.operation-history small {
  margin-top: 4px;
  color: var(--nx-soft);
  line-height: 1.45;
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: rgba(var(--ds-sidebar-rgb), 0.14);
  backdrop-filter: blur(2px);
}

.operation-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 35;
  display: grid;
  width: min(420px, 92vw);
  height: 100vh;
  align-content: start;
  gap: 20px;
  border-left: 1px solid var(--nx-line);
  padding: 28px;
  background: var(--nx-white);
  box-shadow: -24px 0 60px rgba(var(--ds-sidebar-rgb), 0.16);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--nx-text);
  font-size: 18px;
  font-weight: 750;
}

.operation-drawer .modal-close {
  position: static;
}

.drawer-actions {
  display: grid;
  gap: 10px;
}

.content-wide .problems-layout {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
}

.problem-thread {
  min-height: 640px;
}

.problem-detail-stack {
  display: grid;
  gap: 20px;
}

.problem-detail-stack .detail-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.problem-detail-stack .photo-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.problem-detail-stack .message-photos {
  grid-template-columns: repeat(2, minmax(180px, 240px));
}

.problem-status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1420px) {
  .content-wide .items-layout {
    grid-template-columns: 1fr;
  }

  .operation-info-grid {
    grid-template-columns: 1fr;
  }

  .content-wide .problems-layout {
    grid-template-columns: 1fr;
  }
}

/* Build 002.4 documents workflow: horizontal document strip for selected work-order line. */
.document-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.document-badges button {
  border: 1px solid var(--nx-line);
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--nx-text);
  background: #f9fbfa;
  font-size: 12px;
  font-weight: 700;
}

.document-badges button:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.36);
  background: rgba(var(--ds-primary-border-rgb), 0.08);
}

.no-documents {
  color: var(--nx-muted);
}

.documents-panel {
  border-color: rgba(var(--ds-primary-rgb), 0.44);
  overflow: hidden;
}

.documents-panel-header {
  align-items: start;
  margin-bottom: 16px;
}

.documents-panel-header p {
  margin: 6px 0 0;
  color: var(--nx-soft);
  font-size: 13px;
}

.documents-panel-header p span {
  display: inline-flex;
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 9px;
  color: #136c35;
  background: rgba(var(--ds-primary-border-rgb), 0.12);
  font-weight: 750;
}

.documents-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 240px);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}

.document-card,
.document-add-card,
.document-empty-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 230px;
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  padding: 12px;
  background: var(--ds-card);
  box-shadow: 0 12px 30px rgba(var(--ds-sidebar-rgb), 0.06);
}

.document-thumb {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: #f7faf8;
}

.document-thumb span {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  border-radius: 7px;
  padding: 5px 7px;
  color: var(--nx-text);
  background: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 800;
}

.document-thumb i {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 86px;
}

.photo-document-demo {
  background:
    linear-gradient(135deg, rgba(var(--ds-sidebar-rgb), 0.15), rgba(22, 129, 62, 0.14)),
    linear-gradient(30deg, transparent 44%, rgba(255, 255, 255, 0.65) 45% 50%, transparent 51%),
    linear-gradient(145deg, #5d6b64, #d9dfdc 52%, #79857e);
}

.document-card strong button {
  max-width: 100%;
  border: 0;
  padding: 0;
  color: var(--nx-text);
  background: transparent;
  overflow-wrap: anywhere;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.document-card small {
  color: var(--nx-soft);
  line-height: 1.45;
}

.document-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  margin-top: auto;
}

.document-add-card,
.document-empty-card {
  place-items: center;
  border-style: dashed;
  color: var(--nx-soft);
  text-align: center;
}

.document-add-card svg,
.document-empty-card svg {
  width: 34px;
  height: 34px;
  color: var(--ds-primary);
}

.document-add-card strong,
.document-empty-card strong {
  color: var(--nx-text);
}

.documents-panel footer {
  padding-top: 4px;
  color: var(--nx-soft);
  font-size: 12px;
}

.document-modal {
  width: min(100%, 820px);
}

.wo-document-upload-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.wo-document-dropzone { width: 100%; min-height: 150px; cursor: pointer; }
.wo-document-pending-list { display: grid; gap: 8px; margin: 14px 0; color: var(--nx-soft); }
.wo-document-pending-list[hidden], .wo-document-save-status[hidden] { display: none; }
.document-customer-note { display: grid; margin-top: 16px; }
.wo-document-save-status { margin: 12px 0 0; color: var(--ds-text-light); }
.wo-document-pending-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 11px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); }
.wo-document-pending-thumb { display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--ds-border); border-radius: 7px; background: var(--ds-bg-soft); }
.wo-document-pending-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wo-document-pending-thumb svg { width: 20px; height: 20px; }
.wo-document-pending-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.wo-document-pending-copy strong { color: var(--ds-heading); overflow-wrap: anywhere; }
.wo-document-pending-copy small { color: var(--ds-text-light); }
.wo-document-pending-row .plain-icon { flex: none; margin-left: auto; }
.document-modal-grid .field[hidden] { display: none; }

.document-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.document-modal-grid {
  margin-top: 0;
}

.file-state {
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--nx-soft);
  background: var(--ds-bg);
  font-size: 13px;
}

.document-preview-modal {
  width: min(100%, 820px);
}

.document-preview-demo {
  display: grid;
  place-items: center;
  min-height: 430px;
  border: 1px solid var(--nx-line);
  border-radius: 16px;
  color: var(--ds-card);
  text-align: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(135deg, #24362f, #7b887f 54%, #1c5f38);
}

.document-preview-demo span {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 800;
}

.document-preview-demo strong {
  margin-top: 12px;
  font-size: 22px;
}

.camera-unavailable-modal {
  width: min(100%, 520px);
}

/* Build 003.2 new product modal. */
.product-modal-backdrop {
  align-items: start;
  overflow-y: auto;
}

.product-create-modal {
  width: min(calc(100vw - 48px), 1120px);
  max-height: calc(100vh - 68px);
  margin: 34px 0;
  padding: 0;
  overflow: auto;
}

.product-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid var(--nx-line);
  padding: 28px 30px 22px;
}

.product-modal-header h2 {
  margin: 0;
  color: var(--nx-text);
  font-size: 24px;
  font-weight: 760;
}

.product-modal-header p {
  margin: 8px 0 0;
  color: var(--nx-soft);
}

.product-modal-header .modal-close {
  position: static;
}

.product-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--nx-line);
  background: var(--ds-card);
}

.product-steps button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0 28px;
  color: var(--nx-soft);
  background: transparent;
  font-weight: 760;
}

.product-steps span {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #b9c4bf;
  border-radius: 999px;
  font-size: 12px;
}

.product-steps button.active {
  border-bottom-color: var(--nx-green);
  color: var(--nx-green);
  background: var(--ds-card);
}

.product-steps button.active span {
  border-color: var(--nx-green);
  color: var(--ds-card);
  background: var(--nx-green);
}

.product-steps button.locked {
  opacity: 0.72;
}

.product-error {
  margin: 18px 24px 0;
}

.product-modal-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.16fr) minmax(260px, 0.72fr) minmax(320px, 0.92fr);
  align-items: stretch;
  gap: 22px;
  padding: 28px;
  background:
    radial-gradient(circle at 12% 4%, rgba(76, 143, 86, 0.055), transparent 28%),
    linear-gradient(180deg, var(--ds-card) 0%, var(--ds-card) 100%);
}

.product-middle-column {
  display: grid;
  gap: 16px;
  align-content: start;
}

.product-form-card {
  border: 1px solid var(--nx-line);
  border-radius: 16px;
  padding: 26px;
  background: var(--ds-card);
  box-shadow: 0 18px 42px rgba(11, 39, 29, 0.065);
}

.product-form-card h3 {
  margin: 0 0 24px;
  color: var(--nx-text);
  font-size: 17px;
  font-weight: 760;
}

.product-form-card .field {
  margin-bottom: 20px;
}

.product-form-card .field:last-child {
  margin-bottom: 0;
}

.product-form-card .field b,
.product-radio-group b {
  color: var(--ds-danger);
}

.product-radio-group {
  display: grid;
  gap: 14px;
  border: 0;
  margin: 0 0 22px;
  padding: 0;
}

.product-radio-group legend {
  margin-bottom: 10px;
  color: var(--nx-text);
  font-size: 13px;
  font-weight: 720;
}

.product-radio-group label {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--nx-text);
  font-size: 14px;
  font-weight: 560;
}

.product-type-cards > div {
  display: grid;
  gap: 10px;
}

.product-type-cards label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--nx-line);
  border-radius: 13px;
  padding: 14px 15px;
  background: var(--ds-card);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.product-type-cards label:hover {
  border-color: rgba(41, 126, 68, 0.32);
  background: #f7fbf8;
}

.product-type-cards label.active {
  border-color: rgba(13, 107, 67, 0.58);
  background: linear-gradient(180deg, rgba(49, 132, 75, 0.1), rgba(49, 132, 75, 0.035));
  box-shadow: 0 10px 24px rgba(13, 107, 67, 0.08);
}

.product-type-cards label strong {
  display: block;
  color: var(--nx-text);
  font-size: 14.5px;
  font-weight: 760;
}

.product-type-cards label small {
  display: block;
  margin-top: 4px;
  color: var(--nx-soft);
  font-size: 12.5px;
  font-weight: 520;
  line-height: 1.45;
}

.product-radio-group input {
  width: 19px;
  height: 19px;
  accent-color: var(--nx-green);
}

.product-form-card textarea {
  min-height: 146px;
  resize: vertical;
}

.textarea-counter {
  display: block;
  margin-top: -24px;
  padding-right: 8px;
  color: var(--nx-soft);
  text-align: right;
}

.product-photo-card {
  display: grid;
  align-content: start;
}

.product-photo-dropzone {
  display: grid;
  place-items: center;
  min-height: 350px;
  border: 1px dashed #bac4bf;
  border-radius: 15px;
  padding: 30px;
  color: var(--nx-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 251, 249, 0.95)),
    repeating-linear-gradient(135deg, rgba(13, 107, 67, 0.025) 0 10px, transparent 10px 20px);
  text-align: center;
}

.product-photo-dropzone:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.46);
  background: rgba(var(--ds-primary-border-rgb), 0.045);
}

.product-photo-dropzone svg {
  width: 48px;
  height: 48px;
  color: #8b9690;
}

.product-photo-dropzone strong {
  margin-top: 18px;
  color: var(--nx-text);
  font-size: 15px;
}

.product-photo-dropzone span,
.product-photo-dropzone small {
  display: block;
  margin-top: 12px;
  line-height: 1.55;
}

.product-photo-preview {
  display: grid;
  gap: 14px;
}

.product-photo-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  object-fit: cover;
  background: var(--ds-bg);
}

.product-photo-preview strong {
  color: var(--nx-text);
  overflow-wrap: anywhere;
}

.product-photo-preview div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-documents-step {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.product-documents-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.product-documents-intro > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
}

.product-documents-intro svg {
  grid-row: span 3;
  width: 38px;
  height: 38px;
  color: var(--ds-primary);
}

.product-documents-intro h3,
.product-documents-intro p {
  margin: 0;
}

.product-documents-intro small {
  color: var(--nx-soft);
  line-height: 1.45;
}

.product-document-dropzone {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed #bac4bf;
  border-radius: 15px;
  padding: 28px;
  color: var(--nx-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 249, 0.95)),
    repeating-linear-gradient(135deg, rgba(13, 107, 67, 0.025) 0 10px, transparent 10px 20px);
  text-align: center;
}

.product-document-dropzone:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.46);
  background: rgba(var(--ds-primary-border-rgb), 0.045);
}

.product-document-dropzone svg {
  width: 42px;
  height: 42px;
  color: #8b9690;
}

.product-document-dropzone strong {
  margin-top: 14px;
  color: var(--nx-text);
}

.product-document-dropzone span {
  margin-top: 8px;
  line-height: 1.45;
}

.product-document-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.product-document-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  padding: 12px;
  background: var(--nx-card);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.product-document-card:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.34);
  box-shadow: 0 16px 30px rgba(var(--ds-sidebar-rgb), 0.08);
}

.product-document-preview-button {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  width: 100%;
  min-height: 68px;
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.product-document-preview-button:focus-visible {
  outline: 3px solid rgba(var(--ds-primary-rgb), 0.28);
  outline-offset: 4px;
}

.product-document-preview-button:hover .product-document-thumb,
.product-document-preview-button:focus-visible .product-document-thumb {
  border-color: rgba(var(--ds-primary-rgb), 0.42);
  background: rgba(var(--ds-primary-border-rgb), 0.08);
}

.product-document-thumb {
  display: grid;
  width: 76px;
  height: 62px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  color: var(--ds-primary);
  background: var(--ds-bg);
}

.product-document-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-document-thumb span {
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
}

.product-document-thumb svg {
  width: 22px;
  height: 22px;
}

.product-document-card strong,
.product-document-card small {
  display: block;
  overflow-wrap: anywhere;
}

.product-document-card small {
  margin-top: 5px;
  color: var(--nx-soft);
}

.product-document-empty {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px dashed var(--nx-line);
  border-radius: 14px;
  padding: 24px;
  color: var(--nx-soft);
  text-align: center;
  background: rgba(var(--ds-primary-border-rgb), 0.04);
}

.product-document-empty strong {
  margin-top: 8px;
  color: var(--nx-text);
}

.product-placeholder-step {
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: 42px;
  text-align: center;
}

.product-placeholder-step svg {
  width: 44px;
  height: 44px;
  color: var(--nx-green);
}

.product-placeholder-step h3 {
  margin: 16px 0 8px;
  color: var(--nx-text);
}

.product-placeholder-step p {
  max-width: 430px;
  color: var(--nx-soft);
}

.product-assemblies-step {
  display: grid;
  gap: 24px;
  padding: 24px;
  background: var(--ds-card);
}

.assembly-explainer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.18);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(var(--ds-primary-border-rgb), 0.07), rgba(255, 255, 255, 0.82));
}

.assembly-explainer div {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--nx-green);
  background: rgba(var(--ds-primary-border-rgb), 0.12);
}

.assembly-explainer svg {
  width: 26px;
  height: 26px;
}

.assembly-explainer strong,
.assembly-explainer small {
  display: block;
}

.assembly-explainer strong {
  margin-bottom: 7px;
  color: var(--nx-text);
  font-size: 16px;
}

.assembly-explainer small {
  color: var(--nx-muted);
  font-size: 14px;
  line-height: 1.55;
}

.product-assembly-card {
  display: grid;
  gap: 18px;
}

.product-assembly-card > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.product-assembly-card h3 {
  margin: 0;
  color: var(--nx-text);
  font-size: 18px;
  font-weight: 780;
}

.product-assembly-card p {
  margin: 7px 0 0;
  color: var(--nx-soft);
}

.assembly-table-wrap {
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  background: var(--ds-card);
}

.assembly-table {
  width: 100%;
  border-collapse: collapse;
}

.assembly-table th {
  text-align: left;
}

.assembly-table td {
  border-top: 1px solid var(--nx-line);
}

.assembly-table tbody tr[data-action] {
  cursor: pointer;
}

.assembly-table tbody tr[data-action]:hover {
  background: rgba(var(--ds-primary-border-rgb), 0.045);
}

.assembly-table .row-actions {
  justify-content: flex-start;
}

.assembly-inline-input,
.assembly-inline-select {
  width: min(100%, 320px);
  min-height: 38px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  padding: 8px 11px;
  color: var(--nx-text);
  background: var(--ds-card);
  font: inherit;
  font-weight: 560;
}

.assembly-inline-input:focus,
.assembly-inline-select:focus {
  border-color: rgba(var(--ds-primary-rgb), 0.42);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-border-rgb), 0.1);
}

.assembly-inline-select {
  width: 82px;
  color: var(--nx-green);
  font-weight: 760;
}

.assembly-position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 760;
}

.assembly-position-badge.yes {
  color: var(--ds-primary);
  background: rgba(var(--ds-primary-rgb), 0.17);
}

.assembly-position-badge.no {
  color: #c23a3a;
  background: rgba(194, 58, 58, 0.13);
}

.assembly-table .empty-row td {
  text-align: center;
}

.product-inline-confirm {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(var(--ds-sidebar-rgb), 0.28);
  backdrop-filter: blur(8px);
}

.product-create-modal {
  position: relative;
}

.product-inline-confirm-panel {
  position: relative;
  width: min(100%, 440px);
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  padding: 24px;
  background: var(--ds-card);
  box-shadow: var(--shadow-hover);
}

.product-inline-confirm-panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--nx-text);
  font-size: 17px;
}

.product-inline-confirm-panel p {
  margin: 0 0 16px;
  color: var(--nx-muted);
  line-height: 1.5;
}

.product-inline-confirm-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.product-stations-step {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: var(--ds-card);
}

.stations-step-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.stations-step-heading h3 {
  margin: 0 0 8px;
  color: var(--nx-text);
  font-size: 22px;
  font-weight: 780;
}

.stations-step-heading p {
  margin: 0;
  color: var(--nx-soft);
  font-size: 14px;
}

.station-scope-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 620px);
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  background: var(--ds-card);
}

.station-scope-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border: 0;
  border-right: 1px solid var(--nx-line);
  color: var(--nx-soft);
  background: var(--ds-card);
  font-weight: 760;
}

.station-scope-tabs button:last-child {
  border-right: 0;
}

.station-scope-tabs button.active {
  color: var(--nx-green);
  background: rgba(var(--ds-primary-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--ds-primary-rgb), 0.26);
}

.station-scope-tabs button.locked {
  color: #a1aaa5;
  background: #f7f9f8;
}

.station-scope-tabs svg {
  width: 18px;
  height: 18px;
}

.station-target-list {
  display: grid;
  gap: 14px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: var(--ds-card);
}

.station-target-list header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.station-target-list h4 {
  margin: 0;
  color: var(--nx-text);
  font-size: 16px;
  font-weight: 780;
}

.station-target-list p {
  margin: 4px 0 0;
  color: var(--nx-soft);
}

.station-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.station-target-grid button {
  display: grid;
  gap: 4px;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--nx-text);
  background: var(--ds-card);
  text-align: left;
}

.station-target-grid button.active {
  border-color: rgba(var(--ds-primary-rgb), 0.46);
  background: rgba(var(--ds-primary-rgb), 0.08);
}

.station-target-grid button.locked {
  border-style: dashed;
  color: var(--nx-soft);
  background: #fafbfa;
}

.station-target-grid span,
.station-target-grid small {
  color: var(--nx-soft);
}

.station-table-card {
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  background: var(--ds-card);
}

.station-table {
  width: 100%;
  border-collapse: collapse;
}

.station-table th {
  text-align: left;
}

.station-table td {
  border-top: 1px solid var(--nx-line);
}

.station-table tbody tr[data-action] {
  cursor: pointer;
}

.station-table tbody tr[data-action]:hover,
.station-table tbody tr.selected {
  background: #f3f5f3;
}

.station-empty-state {
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--nx-soft);
  text-align: center;
}

.station-empty-state svg,
.station-details-empty svg {
  width: 42px;
  height: 42px;
  color: #b6c2bd;
}

.station-empty-state strong {
  color: var(--nx-text);
}

.station-details-card {
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  background: var(--ds-card);
}

.station-details-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--nx-line);
  padding: 22px 24px 18px;
}

.station-details-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--nx-text);
  font-size: 20px;
  font-weight: 780;
}

.station-details-card h4 {
  margin: 0 0 18px;
  color: var(--nx-text);
  font-size: 15px;
  font-weight: 780;
}

.station-details-card p {
  margin: 7px 0 0;
  color: var(--nx-soft);
}

.station-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 0;
  padding: 22px 24px;
}

.station-details-grid > section {
  border-right: 1px solid var(--nx-line);
  padding: 0 24px;
}

.station-details-grid > section:first-child {
  padding-left: 0;
}

.station-details-grid > section:last-child {
  border-right: 0;
  padding-right: 0;
}

.station-details-grid .field {
  margin-bottom: 18px;
}

.station-warning {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  border: 1px solid rgba(212, 135, 43, 0.24);
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  color: var(--nx-text);
  background: rgba(212, 135, 43, 0.08);
}

.station-warning svg {
  width: 20px;
  height: 20px;
  color: var(--nx-orange);
}

.station-warning span {
  display: grid;
  gap: 3px;
}

.station-warning small {
  color: var(--nx-soft);
}

.station-details-grid textarea {
  min-height: 104px;
}

.station-people-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.station-person-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  border: 1px solid var(--nx-line);
  border-radius: 11px;
  padding: 9px 11px;
  background: var(--ds-card);
}

.station-person-row svg {
  width: 18px;
  height: 18px;
  color: var(--nx-green);
}

.station-muted {
  border: 1px dashed var(--nx-line);
  border-radius: 11px;
  padding: 14px;
  background: var(--ds-card);
}

.station-add-person {
  width: 170px;
}

.station-details-empty {
  display: grid;
  min-height: 210px;
  place-items: center;
  padding: 28px;
  text-align: center;
}

.station-person-picker {
  width: min(100%, 520px);
}

.station-person-options {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}

.station-person-options label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.station-person-options label:has(input:checked) {
  border-color: rgba(var(--ds-primary-rgb), 0.34);
  background: rgba(var(--ds-primary-rgb), 0.07);
}

.station-person-options input {
  width: 18px;
  height: 18px;
  accent-color: var(--nx-green);
}

.station-person-options span,
.station-person-options small {
  display: block;
}

.station-person-options small {
  margin-top: 3px;
  color: var(--nx-soft);
}

.product-assembly-detail-modal {
  width: min(calc(100vw - 48px), 1180px);
  max-height: calc(100vh - 34px);
  margin: 17px 0;
}

.assembly-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--nx-line);
  padding: 16px 24px;
}

.assembly-detail-top .modal-close {
  position: static;
}

.assembly-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--nx-soft);
  font-size: 13px;
  font-weight: 640;
}

.assembly-breadcrumb button {
  border: 0;
  padding: 0;
  color: var(--nx-soft);
  background: transparent;
  font: inherit;
}

.assembly-breadcrumb strong {
  color: var(--nx-text);
}

.assembly-detail-body {
  display: grid;
  gap: 16px;
  padding: 18px 24px;
  background: var(--ds-card);
}

.assembly-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.assembly-detail-heading h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--nx-text);
  font-size: 30px;
  font-weight: 760;
}

.assembly-detail-heading p {
  margin: 0;
  color: var(--nx-soft);
}

.product-heading-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--ds-primary);
  background: rgba(var(--ds-primary-rgb), 0.18);
  font-size: 13px;
  font-weight: 760;
}

.assembly-positions-button {
  border-color: rgba(var(--ds-primary-rgb), 0.46);
  color: var(--nx-green);
  background: rgba(var(--ds-primary-border-rgb), 0.07);
}

.assembly-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(250px, 0.86fr) minmax(300px, 1.1fr);
  gap: 18px;
}

.product-assembly-detail-modal .product-form-card {
  padding: 18px;
}

.product-assembly-detail-modal .product-form-card h3 {
  margin-bottom: 16px;
}

.product-assembly-detail-modal .product-form-card .field {
  margin-bottom: 14px;
}

.product-assembly-detail-modal .product-form-card textarea {
  min-height: 108px;
}

.assembly-doc-card p {
  margin: -10px 0 16px;
  color: var(--nx-soft);
  font-size: 13px;
}

.assembly-doc-dropzone {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 118px;
  border: 1px dashed #bac4bf;
  border-radius: 12px;
  padding: 14px;
  color: var(--nx-soft);
  background: var(--ds-card);
  text-align: center;
}

.assembly-doc-dropzone:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.46);
  background: rgba(var(--ds-primary-border-rgb), 0.045);
}

.assembly-doc-dropzone svg {
  width: 24px;
  height: 24px;
  color: var(--nx-green);
}

.assembly-doc-dropzone strong {
  margin-top: 10px;
  color: var(--nx-text);
}

.assembly-doc-dropzone span,
.assembly-doc-dropzone small {
  display: block;
  margin-top: 7px;
}

.assembly-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.product-doc-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 112px;
  border: 1px dashed var(--nx-line-strong);
  border-radius: 12px;
  color: var(--nx-soft);
  background: var(--ds-card);
  text-align: center;
}

.product-doc-empty svg {
  color: var(--nx-muted);
}

.product-doc-empty strong {
  color: var(--nx-text);
}

.product-doc-empty span {
  font-size: 13px;
}

.assembly-doc-item {
  display: grid;
  gap: 8px;
}

.assembly-doc-preview {
  display: grid;
  width: 100%;
  aspect-ratio: 1.45 / 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: var(--ds-bg);
}

.assembly-doc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assembly-doc-preview span {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--nx-soft);
}

.assembly-doc-preview svg {
  width: 34px;
  height: 34px;
}

.assembly-doc-item strong {
  color: var(--nx-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.assembly-doc-item small {
  color: var(--nx-soft);
}

.assembly-doc-item div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modal-action-spacer {
  flex: 1;
}

.assembly-preview-panel {
  position: relative;
  width: min(100%, 820px);
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  padding: 24px;
  background: var(--ds-card);
  box-shadow: var(--shadow-hover);
}

.assembly-preview-panel h3 {
  margin: 0 34px 16px 0;
  color: var(--nx-text);
}

.assembly-preview-panel img {
  width: 100%;
  max-height: 68vh;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  object-fit: contain;
  background: var(--ds-bg);
}

.product-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  border-top: 1px solid var(--nx-line);
  padding: 22px 24px;
  background: var(--ds-card);
}

.product-assembly-detail-modal .product-modal-actions {
  padding: 16px 24px;
}

.product-positions-modal {
  width: min(calc(100vw - 40px), 1260px);
  max-height: calc(100vh - 34px);
  margin: 17px 0;
}

.positions-screen-body {
  display: grid;
  gap: 10px;
  padding: 12px 24px;
  background: var(--ds-card);
}

.positions-back-button {
  width: fit-content;
}

.positions-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.positions-heading h2 {
  margin: 0 0 5px;
  color: var(--nx-text);
  font-size: 26px;
  font-weight: 760;
}

.positions-heading p {
  margin: 0;
  color: var(--nx-soft);
}

.positions-table-card,
.position-details-card {
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  background: var(--ds-card);
  overflow: hidden;
}

.positions-table {
  width: 100%;
  border-collapse: collapse;
}

.positions-table th {
  border-bottom: 1px solid var(--nx-line);
  text-align: left;
}

.positions-table td {
  border-bottom: 1px solid var(--nx-line);
  vertical-align: middle;
}

.positions-table tr:last-child td {
  border-bottom: 0;
}

.positions-table tbody tr {
  cursor: pointer;
}

.positions-table tbody tr:hover,
.positions-table tbody tr.selected {
  background: #f2f3f1;
}

.positions-table tbody tr.positions-empty-row,
.positions-table tbody tr.positions-empty-row:hover {
  cursor: default;
  background: var(--ds-card);
}

.positions-empty-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 190px;
  place-content: center;
  color: var(--nx-soft);
  text-align: center;
}

.positions-empty-state strong {
  color: var(--nx-text);
  font-size: 15px;
  font-weight: 760;
}

.positions-empty-state span {
  margin-bottom: 8px;
  font-size: 13px;
}

.empty-box-illustration {
  position: relative;
  display: grid;
  width: 92px;
  height: 68px;
  place-items: center;
  color: #9aa8a0;
}

.empty-box-illustration svg {
  width: 54px;
  height: 54px;
  opacity: 0.68;
}

.empty-box-illustration i {
  position: absolute;
  top: 3px;
  right: 10px;
  width: 42px;
  border-top: 1px dashed #9eb0a6;
  transform: rotate(-18deg);
}

.empty-box-illustration i::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--ds-primary);
  border-right: 1px solid var(--ds-primary);
  transform: rotate(42deg);
}

.position-inline-input {
  width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: var(--nx-text);
  font: inherit;
  font-weight: 620;
}

.position-inline-input.small {
  max-width: 120px;
  font-weight: 520;
}

.position-inline-input:focus {
  border-color: rgba(var(--ds-primary-rgb), 0.42);
  background: var(--ds-card);
  outline: none;
}

.qr-mini svg {
  width: 18px;
  height: 18px;
}

.position-details-card {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
}

.positions-detail-empty {
  min-height: 190px;
  place-items: center;
  justify-content: center;
  color: var(--nx-soft);
  text-align: center;
}

.positions-detail-empty svg {
  width: 44px;
  height: 44px;
  opacity: 0.35;
}

.positions-detail-empty p {
  max-width: 520px;
  font-weight: 650;
}

.position-details-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.position-details-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  color: var(--nx-text);
  font-size: 20px;
  font-weight: 760;
}

.position-details-card h4 {
  margin: 0 0 12px;
  color: var(--nx-text);
  font-size: 14px;
  font-weight: 760;
}

.position-details-card p {
  margin: 0;
  color: var(--nx-soft);
}

.position-details-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) minmax(250px, 0.95fr) minmax(320px, 1.2fr);
  gap: 18px;
}

.position-details-grid > section {
  min-width: 0;
  border-right: 1px solid var(--nx-line);
  padding-right: 18px;
}

.position-details-grid > section:last-child {
  border-right: 0;
  padding-right: 0;
}

.position-details-grid .field {
  margin-bottom: 9px;
}

.position-details-grid textarea {
  min-height: 76px;
}

.position-doc-card p {
  margin: -4px 0 10px;
  color: var(--nx-soft);
  font-size: 12px;
}

.position-doc-dropzone {
  display: grid;
  place-items: center;
  min-height: 76px;
  border: 1px dashed #bac4bf;
  border-radius: 12px;
  padding: 10px;
  color: var(--nx-soft);
  background: var(--ds-card);
  text-align: center;
}

.position-doc-dropzone svg {
  width: 21px;
  height: 21px;
  color: var(--nx-green);
}

.position-doc-dropzone strong {
  margin-top: 5px;
  color: var(--nx-text);
}

.position-doc-dropzone span,
.position-doc-dropzone small {
  display: block;
  margin-top: 4px;
}

.position-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.position-doc-item {
  display: grid;
  gap: 6px;
}

.position-doc-preview {
  display: grid;
  width: 100%;
  height: 78px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: var(--ds-bg);
}

.position-doc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.position-doc-preview span {
  display: grid;
  gap: 7px;
  justify-items: center;
  color: var(--nx-soft);
}

.position-doc-preview svg {
  width: 30px;
  height: 30px;
}

.position-doc-item strong {
  color: var(--nx-text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.position-doc-item small {
  color: var(--nx-soft);
  font-size: 11px;
}

.position-doc-item div {
  display: flex;
  gap: 8px;
}

.position-label-preview {
  width: min(94vw, 980px);
}

.position-label-modal {
  width: min(calc(100vw - 42px), 1060px);
}

.position-label-modal > h2,
.position-label-modal > p {
  display: none;
}

.position-label-card {
  overflow: hidden;
  border: 1px solid #aab4ae;
  border-radius: 22px;
  background: var(--ds-card);
  box-shadow: 0 20px 46px rgba(var(--ds-sidebar-rgb), 0.12);
}

.position-label-card header {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  align-items: center;
  min-height: 104px;
  border-bottom: 1px solid #aeb7b1;
  padding: 24px 32px;
}

.position-label-card header img {
  width: 220px;
  max-width: 100%;
}

.position-label-card header h3 {
  margin: 0;
  color: #030705;
  font-size: 54px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-align: center;
}

.position-label-content {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 500px;
}

.position-label-data {
  display: grid;
  align-content: stretch;
  border-right: 1px solid #aeb7b1;
  padding: 16px 28px;
}

.position-label-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid #c7cfca;
  padding: 22px 0;
}

.position-label-row:last-child {
  border-bottom: 0;
}

.position-label-row > span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid #d9dfdc;
  border-radius: 14px;
  color: #4f5954;
  background: var(--ds-card);
}

.position-label-row svg {
  width: 36px;
  height: 36px;
}

.position-label-row small {
  display: block;
  margin-bottom: 12px;
  color: #555f5a;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.position-label-row strong {
  display: block;
  color: #050807;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.18;
}

.position-label-qr {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  padding: 34px;
}

.qr-box .valid-qr {
  display: block;
  width: 330px;
  height: 330px;
}

.position-label-qr span {
  color: #5d6661;
  font-size: 25px;
  font-weight: 650;
  text-align: center;
}

@media print {
  body:has(.position-label-modal) .app-shell,
  body:has(.position-label-modal) .modal-close,
  body:has(.position-label-modal) .modal-actions {
    display: none !important;
  }

  body:has(.position-label-modal) .modal-backdrop,
  body:has(.position-label-modal) .modal-panel {
    position: static;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    background: var(--ds-card);
    box-shadow: none;
  }

  body:has(.position-label-modal) .position-label-preview {
    width: 100%;
  }

  body:has(.position-label-modal) .position-label-card {
    box-shadow: none;
  }
}

.product-positions-modal .product-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 15px 24px;
}

.product-modal-actions .primary-button,
.product-modal-actions .secondary-button {
  min-width: 170px;
}

@media (max-width: 1180px) {
  .product-modal-grid {
    grid-template-columns: 1fr;
  }

  .product-photo-dropzone {
    min-height: 260px;
  }

  .product-documents-step {
    padding: 18px;
  }

  .product-documents-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .product-documents-intro .primary-button {
    width: 100%;
  }
}

/* Build 002.3 problem workflow: table first, selected problem details below. */
.problems-workflow {
  display: grid;
  gap: 14px;
}

.problem-table-card {
  overflow: hidden;
  padding: 0;
}

.problem-toolbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 18px 18px 0;
}

.problem-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--ds-card);
}

.problem-search input {
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 13px;
  background: transparent;
}

.mini-toggle {
  justify-self: end;
}

.problem-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.problem-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.problem-table th,
.problem-table td {
  border-bottom: 1px solid var(--nx-line);
  text-align: left;
  vertical-align: middle;
}

.problem-table tbody tr {
  cursor: pointer;
}

.problem-table tbody tr:hover,
.problem-table tbody tr.selected-row {
  background: rgba(var(--ds-primary-border-rgb), 0.08);
}

.problem-table td strong,
.problem-table td small {
  display: block;
}

.problem-table td small {
  margin-top: 4px;
  color: var(--nx-soft);
  line-height: 1.4;
}

.problem-code {
  color: var(--ds-danger);
  font-weight: 850;
}

.problem-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.problem-type svg {
  width: 15px;
  height: 15px;
  color: var(--nx-soft);
}

.problem-bottom-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(270px, 0.9fr) minmax(330px, 1.05fr) minmax(210px, 0.65fr);
  gap: 18px;
  border-color: rgba(var(--ds-primary-rgb), 0.45);
  padding: 20px;
}

.problem-bottom-panel h3 {
  margin: 0 0 12px;
  color: var(--nx-text);
  font-size: 14px;
}

.problem-bottom-details {
  padding-right: 14px;
  border-right: 1px solid var(--nx-line);
}

.problem-detail-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.problem-detail-pairs div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.problem-detail-pairs .soft-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.problem-detail-pairs small,
.problem-detail-pairs strong {
  display: block;
}

.problem-detail-pairs small {
  color: var(--nx-soft);
  font-size: 11.5px;
}

.problem-detail-pairs strong {
  margin-top: 3px;
  color: var(--nx-text);
  font-size: 13px;
  line-height: 1.35;
}

.large-photos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.large-photos button {
  min-height: 190px;
}

.compact-messages {
  max-height: 244px;
  overflow: auto;
  gap: 10px;
}

.compact-messages .message {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
}

.compact-messages .avatar {
  width: 30px;
  height: 30px;
}

.compact-messages .message > div:last-child {
  padding: 10px 12px;
}

.compact-messages .message-photos {
  display: none;
}

.problem-bottom-comments .message-input {
  margin-top: 12px;
}

.problem-bottom-status {
  display: grid;
  align-content: start;
  gap: 10px;
}

@media (max-width: 1500px) {
  .problem-bottom-panel {
    grid-template-columns: minmax(280px, 1fr) minmax(270px, 1fr);
  }

  .problem-bottom-details {
    border-right: 0;
  }
}

@media (max-width: 980px) {
  .problem-toolbar,
  .problem-bottom-panel,
  .problem-detail-pairs {
    grid-template-columns: 1fr;
  }
}

/* Build 003 readability pass: keep the Design System, restore desktop legibility. */
html {
  font-size: 16px;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

.content {
  padding: 46px 52px 40px;
}

.content-wide {
  padding: 26px 34px 30px;
}

.title-block p,
.content-wide .title-block p,
.breadcrumb,
.assembly-breadcrumb {
  font-size: 14px;
}

.title-block h1,
.content-wide .title-block h1 {
  font-size: clamp(38px, 3vw, 48px);
  line-height: 1.08;
}

.title-block span {
  font-size: 16px;
  line-height: 1.65;
}

input,
select,
textarea,
.company-picker select,
.login-panel input,
.field input,
.field select,
.field textarea,
.table-tools input,
.filters select,
.work-orders-toolbar select,
.work-orders-toolbar input,
.products-toolbar select,
.products-toolbar input,
.work-order-form-grid input,
.work-order-form-grid select,
.work-order-form-grid textarea,
.modal-grid .field input,
.modal-grid .field select,
.modal-grid .field textarea,
.assembly-inline-input,
.assembly-inline-select,
.position-inline-input,
.problem-search,
.message-input input {
  min-height: 46px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.35;
}

textarea,
.field textarea,
.modal-grid .field textarea {
  min-height: 92px;
  line-height: 1.55;
}

.work-search input,
.product-search input,
.problem-search input {
  font-size: 15px;
}

.primary-button,
.secondary-button,
.compact-command,
.secondary-button.compact,
.primary-button.compact,
.detail-action,
.modal-actions button,
.product-modal-actions .primary-button,
.product-modal-actions .secondary-button,
.view-toggle button {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 700;
}

.primary-button,
.secondary-button {
  min-height: 52px;
}

.compact-command,
.secondary-button.compact,
.primary-button.compact {
  min-height: 42px;
}

.icon-button {
  width: 48px;
  height: 48px;
}

.icon-mini {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.icon-mini svg {
  width: 16px;
  height: 16px;
}

.row-actions {
  gap: 10px;
}

.open-row-button,
.open-card-button {
  min-height: 34px;
  height: auto;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 750;
}

.open-row-button svg,
.open-card-button svg {
  width: 15px;
  height: 15px;
}

.status-badge,
.status-tag,
.priority-badge,
.product-type-badge,
.assembly-position-badge,
.product-heading-badge {
  min-height: 28px;
  padding: 6px 11px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.15;
  font-weight: 760;
}

.work-order-card .status-badge {
  font-size: 12px;
  padding: 6px 10px;
}

.problem-count {
  min-height: 30px;
  padding: 5px 11px;
  font-size: 12.5px;
}

table {
  font-size: 15px;
}

.work-orders-table tbody tr,
.products-table tbody tr,
.hierarchy-table tbody tr,
.assembly-table tbody tr,
.station-table tbody tr,
.positions-table tbody tr,
.problem-table tbody tr {
  min-height: 48px;
}

.work-orders-toolbar,
.products-toolbar,
.problem-toolbar,
.table-tools,
.filters {
  gap: 14px;
}

.work-orders-toolbar select,
.work-orders-toolbar input,
.products-toolbar select,
.products-toolbar input {
  min-width: 150px;
  min-height: 46px;
}

.work-search,
.product-search,
.problem-search {
  min-height: 46px;
}

.work-search input,
.product-search input {
  padding-right: 44px;
}

.product-kpi {
  min-height: 126px;
  padding: 22px 24px;
}

.metric-card {
  min-height: 174px;
  padding: 28px 24px;
}

.metric-content span,
.product-kpi span {
  font-size: 15px;
}

.metric-content small,
.product-kpi em {
  font-size: 14px;
}

.work-card-grid {
  gap: 20px;
}

.work-order-card {
  min-height: 236px;
  padding: 18px 18px 16px;
}

.work-order-card dt {
  font-size: 12px;
}

.work-order-card dd,
.work-order-card header strong,
.work-order-card footer button {
  font-size: 13.5px;
}

.detail-tabs button {
  min-height: 50px;
  padding: 0 16px;
  font-size: 15px;
}

.items-table-card,
.detail-card,
.status-card,
.products-table-card,
.product-assembly-card,
.station-table-card,
.station-details-card,
.positions-table-card,
.position-details-card,
.problem-table-card,
.problem-bottom-panel {
  border-radius: var(--radius-md);
}

.items-table-card,
.status-card,
.detail-card {
  padding: 24px;
}

.hierarchy-table-wrap,
.work-order-table-wrap,
.products-table-wrap,
.problem-table-wrap {
  overflow-x: auto;
}

.progress-text,
.document-badges button,
.table-footer,
.problem-detail-pairs small,
.problem-detail-pairs strong,
.compact-messages .message > div:last-child,
.message p {
  font-size: 13px;
  line-height: 1.5;
}

.problem-bottom-panel {
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
  gap: 22px;
  padding: 24px;
}

.problem-bottom-details {
  border-right: 0;
}

.problem-bottom-status,
.problem-bottom-photos {
  grid-column: span 1;
}

.large-photos button {
  min-height: 210px;
}

.compact-messages {
  max-height: 320px;
}

.product-create-modal {
  width: min(calc(100vw - 48px), 1240px);
}

.product-modal-header h2 {
  font-size: 26px;
}

.product-modal-header p,
.product-form-card h3,
.product-radio-group label,
.assembly-explainer small,
.product-assembly-card p,
.stations-step-heading p {
  font-size: 15px;
}

.product-steps button {
  min-height: 76px;
  font-size: 15px;
}

.product-form-card {
  padding: 26px;
}

.product-modal-grid {
  gap: 22px;
}

.position-inline-input {
  min-height: 38px;
  font-size: 14px;
}

.position-details-grid,
.station-details-grid {
  gap: 0;
}

.position-doc-item strong,
.assembly-doc-item strong,
.document-card strong,
.station-person-row strong {
  font-size: 14px;
}

.position-doc-item small,
.assembly-doc-item small,
.document-card small {
  font-size: 12.5px;
}

/* Sprint Radni nalozi: large creation modal keeps its premium density after global readability rules. */
.work-order-create-modal .wo-modal-field input,
.work-order-create-modal .wo-modal-field select,
.work-order-create-modal .wo-modal-field textarea {
  min-height: 68px;
  padding: 0 22px;
  font-size: 20px;
}

.work-order-create-modal .wo-modal-field textarea {
  min-height: 112px;
  padding-top: 18px;
}

.work-order-create-modal .work-order-modal-actions .secondary-button,
.work-order-create-modal .work-order-modal-actions .primary-button {
  min-height: 58px;
  padding: 0 30px;
  font-size: 17px;
}

/* Sprint Radni nalozi: initial work-order items tab. */
.content-wide .work-order-items-start {
  gap: 26px;
}

.content-wide .items-start-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.content-wide .items-start-kpis .work-kpi {
  min-height: 98px;
  padding: 20px 24px;
}

.content-wide .items-start-kpis .work-kpi strong {
  font-size: 24px;
}

.content-wide .initial-items-card {
  padding: 26px;
}

.content-wide .initial-items-card .panel-header {
  align-items: center;
  margin-bottom: 22px;
}

.content-wide .items-empty-state {
  min-height: 420px;
  padding: 70px 24px;
}

@media (max-width: 1420px) {
  .content-wide .items-start-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .content-wide .items-start-kpis {
    grid-template-columns: 1fr;
  }

  .initial-items-card .panel-header,
  .initial-items-card .table-tools {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Sprint Radni nalozi: detail general tab final layout. */
.content-wide .work-order-detail {
  gap: 26px;
}

.content-wide .detail-tabs {
  gap: 34px;
}

.content-wide .detail-tabs button {
  min-height: 54px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.content-wide .general-card {
  padding: 28px;
}

.content-wide .general-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 24px 30px;
}

.content-wide .general-grid .wide-field {
  grid-column: 1 / -1;
}

.content-wide .field {
  gap: 10px;
  font-size: 15px;
}

.content-wide .field span {
  font-size: 14px;
  font-weight: 700;
}

.content-wide .work-order-general-grid .field > span:first-child {
  min-height: 38px;
  line-height: 1.35;
}

.content-wide .work-order-general-grid .field-helper {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.35;
}

.content-wide .field input,
.content-wide .field select,
.content-wide .field textarea {
  min-height: 54px;
  border-radius: 10px;
  font-size: 16px;
}

.content-wide .field textarea {
  min-height: 112px;
}

.content-wide .section-title {
  gap: 14px;
  margin-bottom: 24px;
}

.content-wide .section-title h2 {
  font-size: 20px;
}

.content-wide .section-title .soft-icon,
.content-wide .autosave-state .soft-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.content-wide .work-order-info-panel {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

@media (max-width: 1420px) {
  .content-wide .work-order-info-panel dl,
  .content-wide .general-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-wide .work-order-info-panel {
    grid-template-columns: 1fr;
  }

  .content-wide .work-order-qr {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .content-wide .work-order-info-panel dl,
  .content-wide .general-grid {
    grid-template-columns: 1fr;
  }

  .content-wide .work-order-general-grid .field > span:first-child {
    min-height: 0;
  }

  .content-wide .work-order-general-grid .empty-helper {
    display: none;
  }

  .content-wide .autosave-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Sprint Radni nalozi: modal Dodaj iz baze. */
.add-base-item-modal {
  display: flex;
  flex-direction: column;
  width: min(1320px, calc(100vw - 48px));
  height: min(900px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: 0;
}

.add-base-item-modal .modal-close {
  top: 26px;
  right: 28px;
}

.base-modal-header {
  flex: 0 0 auto;
  padding: 26px 32px 18px;
  border-bottom: 1px solid var(--border);
}

.base-modal-header h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.base-modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.base-item-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(330px, 35%) minmax(0, 1fr);
  gap: 20px;
  min-height: 0;
  overflow: hidden;
  padding: 20px 24px 0;
}

.base-product-picker,
.base-product-preview {
  min-width: 0;
  min-height: 0;
}

.base-product-picker {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  padding: 14px;
}

.base-product-preview {
  overflow: auto;
  padding-right: 2px;
}

.base-product-detail {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 16px;
}

.base-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  margin-bottom: 12px;
}

.base-search-row label {
  position: relative;
  display: block;
}

.base-search-row label svg {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.base-search-row input,
.base-filter-row select,
.base-entry-row input,
.base-entry-row textarea,
.base-footer-entry input,
.base-footer-entry textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.base-search-row input {
  min-height: 44px;
  padding: 0 16px 0 48px;
}

.base-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.base-filter-row label {
  display: grid;
  gap: 5px;
}

.base-filter-row span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.base-filter-row select {
  min-height: 40px;
  padding: 0 12px;
}

.base-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.base-mode-toggle button {
  min-height: 40px;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--ds-card);
  padding: 0 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.base-mode-toggle button:last-child {
  border-right: 0;
}

.base-mode-toggle button.active {
  background: rgba(var(--ds-primary-rgb), .08);
  color: var(--nx-green);
  box-shadow: inset 0 0 0 1px rgba(var(--ds-primary-rgb), .45);
}

.base-product-list {
  flex: 1 1 auto;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
}

.base-product-list table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.base-product-list th,
.base-product-list td {
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.base-product-list th:first-child,
.base-product-list td:first-child {
  width: 30%;
}

.base-product-list th:last-child,
.base-product-list td:last-child {
  width: 36px;
  text-align: center;
}

.base-product-list td strong {
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.base-product-list td svg {
  width: 18px;
  height: 18px;
  color: var(--nx-green);
}

.base-product-list tr[data-action] {
  cursor: pointer;
}

.base-product-list tr[data-action]:hover,
.base-product-list tr.selected-row {
  background: rgba(var(--ds-primary-rgb), .07);
}

.base-product-list tr.selected-row {
  box-shadow: inset 3px 0 0 var(--nx-green);
}

.base-product-list tr:last-child td {
  border-bottom: 0;
}

.base-empty-list {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 240px;
  color: var(--muted);
  text-align: center;
}

.base-empty-list strong {
  color: var(--ink);
  font-size: 17px;
}

.base-list-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.base-list-footer nav {
  display: flex;
  gap: 6px;
}

.base-list-footer button {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}

.base-list-footer button svg {
  width: 16px;
  height: 16px;
}

.base-list-footer button.active {
  border-color: rgba(var(--ds-primary-rgb), .35);
  background: rgba(var(--ds-primary-rgb), .08);
  color: var(--nx-green);
}

.base-list-footer button:disabled {
  color: var(--muted);
  opacity: .55;
}

.base-product-main {
  display: grid;
  grid-template-columns: minmax(230px, 34%) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.base-detail-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 26px rgba(var(--ds-sidebar-rgb), .05);
  padding: 16px;
}

.base-detail-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.base-detail-card > header strong {
  font-size: 15px;
}

.base-detail-card > header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.base-product-media {
  display: grid;
  align-content: stretch;
  gap: 12px;
}

.base-product-photo {
  display: grid;
  place-items: center;
  min-height: 230px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ds-card), #f5f7f5);
  overflow: hidden;
}

.base-product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-photo svg {
  width: 54px;
  height: 54px;
  color: rgba(var(--ds-sidebar-rgb), .35);
}

.placeholder-photo figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}

.base-product-info h3 {
  margin: 14px 0 12px;
  font-size: 26px;
  line-height: 1.15;
}

.base-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.base-preview-badges span {
  border-radius: 999px;
  background: rgba(var(--ds-primary-rgb), .1);
  padding: 6px 12px;
  color: var(--nx-green);
  font-size: 13px;
  font-weight: 800;
}

.base-product-info dl {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 11px 18px;
  margin: 0;
  font-size: 14px;
}

.base-product-info dt {
  color: var(--muted);
}

.base-product-info dd {
  margin: 0;
  font-weight: 700;
}

.base-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.base-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 6px;
  align-items: center;
  min-height: 92px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
  background: var(--ds-card);
  text-align: center;
}

.base-stat:last-child {
  border-right: 0;
}

.base-stat .soft-icon {
  width: 34px;
  height: 34px;
}

.base-stat span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.base-stat strong {
  font-size: 24px;
  line-height: 1;
}

.base-stat small {
  color: var(--nx-green);
  font-size: 12px;
  font-weight: 700;
}

.planned-time-card {
  background: rgba(var(--ds-primary-rgb), .06);
}

.plain-link {
  border: 0;
  background: transparent;
  color: var(--nx-green);
  font-weight: 800;
}

.base-tab-card {
  flex: 1 1 auto;
  min-height: 220px;
  padding: 0;
  overflow: hidden;
}

.base-detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.base-detail-tabs button {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.base-detail-tabs button:last-child {
  border-right: 0;
}

.base-detail-tabs button.active {
  box-shadow: inset 0 -3px 0 var(--nx-green);
  color: var(--nx-green);
}

.base-tab-panel {
  padding: 20px;
}

.base-tab-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.base-overview-panel {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: 28px;
}

.base-overview-panel section + section {
  border-left: 1px solid var(--border);
  padding-left: 28px;
}

.base-overview-panel h4 {
  margin: 0 0 12px;
  font-size: 14px;
}

.base-overview-panel dl {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 18px;
  margin: 0;
  font-size: 13px;
}

.base-overview-panel dt {
  color: var(--muted);
}

.base-overview-panel dd {
  margin: 0;
  font-weight: 700;
}

.base-overview-panel p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.base-tree {
  display: grid;
  gap: 4px;
}

.tree-line {
  display: grid;
  grid-template-columns: 28px minmax(88px, 132px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

button.tree-line:hover {
  background: rgba(var(--ds-primary-rgb), .06);
}

.tree-line em {
  font-style: normal;
  font-weight: 900;
}

.tree-line span {
  color: var(--muted);
  font-weight: 800;
}

.tree-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tree-line small {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.tree-children {
  margin-left: 30px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.position-line {
  grid-template-columns: 28px minmax(104px, 144px) minmax(0, 1fr) auto;
  background: rgba(var(--ds-sidebar-rgb), .025);
}

.muted-tree,
.base-tree-empty {
  padding: 18px;
  border-radius: 12px;
  background: var(--ds-card);
  color: var(--muted);
}

.base-entry-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  margin-top: 0;
}

.base-entry-row label {
  display: grid;
  gap: 9px;
  font-weight: 800;
}

.base-entry-row label > span b {
  color: var(--danger);
}

.base-quantity-field div {
  display: grid;
  grid-template-columns: 42px minmax(48px, 1fr) 42px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.base-quantity-field button {
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--ds-card);
  color: var(--nx-green);
  font-weight: 800;
}

.base-quantity-field button svg {
  width: 17px;
  height: 17px;
}

.base-quantity-field button:last-child {
  border-right: 0;
  border-left: 1px solid var(--border);
}

.base-quantity-field input {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 800;
}

.base-quantity-field em {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-style: normal;
}

.base-note-field textarea {
  min-height: 40px;
  padding: 11px 12px;
  resize: none;
}

.base-note-field small {
  justify-self: end;
  color: var(--muted);
  font-weight: 600;
}

.base-operation-table {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.base-operation-table table {
  width: 100%;
  border-collapse: collapse;
}

.base-operation-table th,
.base-operation-table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.base-operation-table tr:last-child td {
  border-bottom: 0;
}

.base-operation-table td strong,
.base-operation-table td small {
  display: block;
}

.base-operation-table td small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.base-document-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.base-document-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--ds-card);
}

.base-document-thumb {
  display: grid;
  place-items: center;
  width: 62px;
  height: 54px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.base-document-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.base-document-thumb span {
  display: grid;
  place-items: center;
  gap: 2px;
  color: var(--nx-green);
  font-size: 11px;
  font-weight: 900;
}

.base-document-card strong,
.base-document-card small,
.base-document-card em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-document-card small,
.base-document-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.base-document-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 150px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--ds-card);
  color: var(--muted);
  text-align: center;
}

.base-document-empty strong {
  color: var(--ink);
}

.base-document-empty span {
  max-width: 520px;
  line-height: 1.5;
}

.base-no-product {
  display: grid;
  place-items: center;
  min-height: 620px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

.base-no-product h3 {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 22px;
}

.base-no-product p {
  max-width: 420px;
  margin: 0;
}

.base-modal-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 24px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -14px 30px rgba(var(--ds-sidebar-rgb), .07);
}

.base-footer-entry {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 200px minmax(260px, 1fr);
  gap: 18px;
  max-width: 640px;
}

.base-footer-entry label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.base-footer-entry label > span small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.base-footer-entry .base-quantity-field {
  grid-template-columns: minmax(0, 1fr) auto;
}

.base-footer-entry .base-quantity-field > span {
  grid-column: 1 / -1;
}

.base-footer-entry .base-quantity-field em {
  min-width: 44px;
  min-height: 40px;
  border: 0;
}

.base-modal-footer .primary-button,
.base-modal-footer .secondary-button {
  min-height: 48px;
  padding: 0 28px;
  font-size: 14px;
}

.base-modal-footer .primary-button {
  min-width: 210px;
}

@media (max-width: 1240px) {
  .base-item-grid {
    grid-template-columns: minmax(300px, 38%) minmax(0, 1fr);
  }

  .base-product-main {
    grid-template-columns: 1fr;
  }

  .base-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .base-stat {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .base-stat:nth-child(3n),
  .base-stat:last-child {
    border-right: 0;
  }

  .base-document-list {
    grid-template-columns: 1fr;
  }

  .base-footer-entry {
    grid-template-columns: 170px minmax(220px, 1fr);
  }
}

@media (max-width: 760px) {
  .add-base-item-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .base-modal-header,
  .base-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .base-item-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: auto;
    padding: 14px 16px 0;
  }

  .base-product-picker {
    min-height: 430px;
  }

  .runtime-base-modal .base-product-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .runtime-base-modal .base-product-card-check {
    display: none;
  }

  .base-filter-row,
  .base-stats,
  .base-footer-entry,
  .base-overview-panel {
    grid-template-columns: 1fr;
  }

  .base-overview-panel section + section {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 18px;
    padding-left: 0;
  }

  .base-detail-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .base-stats {
    border-bottom: 0;
  }

  .base-stat,
  .base-stat:nth-child(3n) {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .tree-line,
  .position-line {
    grid-template-columns: 24px minmax(76px, 96px) minmax(0, 1fr);
  }

  .custom-duration-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .problem-attachment-actions {
    grid-template-columns: 1fr;
  }

  .tree-line small {
    grid-column: 3;
    justify-self: start;
    white-space: normal;
  }

  .base-document-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .base-document-card .secondary-button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .base-modal-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .base-modal-footer .primary-button {
    min-width: 0;
  }

  .base-modal-footer .secondary-button {
    order: 3;
  }
}

/* Sprint Radni nalozi: modal Kreiraj custom stavku. */
.custom-item-modal {
  width: min(1460px, calc(100vw - 56px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
}

.custom-item-modal .modal-close {
  top: 24px;
  right: 24px;
}

.custom-modal-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.custom-modal-title > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.custom-modal-title svg {
  width: 22px;
  height: 22px;
}

.custom-modal-title h2 {
  margin: 0;
  font-size: 25px;
}

.custom-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(730px, 100%);
  min-height: 44px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: var(--ds-info-bg);
  color: var(--ds-info);
  padding: 0 18px;
  font-weight: 700;
}

.custom-info-banner svg {
  width: 19px;
  height: 19px;
}

.custom-error {
  margin-bottom: 16px;
}

.custom-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  margin-bottom: 18px;
}

.custom-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--ds-card);
  padding: 20px;
}

.custom-card h3 {
  margin: 0 0 16px;
  font-size: 17px;
}

.custom-card h3 small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.custom-basic-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
}

.custom-basic-grid .wide-field {
  grid-column: 1 / -1;
}

.custom-item-modal .field {
  display: grid;
  gap: 9px;
}

.custom-item-modal .field span {
  font-weight: 800;
}

.custom-item-modal .field b {
  color: var(--danger);
}

.custom-item-modal .field input,
.custom-item-modal .field textarea,
.custom-operation-table input,
.custom-operation-table select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--ds-card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.custom-item-modal .field input {
  min-height: 48px;
  padding: 0 14px;
}

.custom-item-modal .field input[readonly] {
  background: #f7f8f7;
  font-weight: 900;
}

.custom-item-modal .field textarea {
  min-height: 108px;
  padding: 14px;
  resize: vertical;
}

.custom-item-modal .field small,
.custom-card p,
.custom-drag-note {
  color: var(--muted);
  font-size: 13px;
}

.custom-quantity-control {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.custom-quantity-control button {
  border: 0;
  background: #f9faf9;
  font-size: 22px;
  font-weight: 800;
}

.custom-quantity-control input {
  border: 0 !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  text-align: center;
  font-weight: 900;
}

.work-order-quantity-modal {
  max-width: 720px;
  overflow: hidden;
}

.work-order-quantity-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.quantity-contract-note {
  margin: 0;
  border-radius: 10px;
}

.quantity-readonly-grid,
.quantity-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quantity-readonly-card,
.quantity-stat-card {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 76px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  background: #fff;
  padding: 11px 12px;
}

.quantity-readonly-card {
  background: #f8fbfd;
}

.quantity-readonly-card small,
.quantity-stat-card small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quantity-readonly-card strong,
.quantity-stat-card strong {
  min-width: 0;
  color: var(--ds-heading);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.quantity-stat-card.guard {
  border-color: rgba(var(--ds-primary-rgb), .35);
  background: var(--ds-primary-light);
}

.work-order-quantity-control {
  display: grid;
  gap: 8px;
}

.work-order-quantity-control .custom-quantity-control {
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  min-height: 56px;
}

.work-order-quantity-control .custom-quantity-control button {
  font-size: 26px;
}

.work-order-quantity-control .custom-quantity-control button:disabled {
  color: #9fb0bd;
  cursor: not-allowed;
  opacity: .58;
}

.work-order-quantity-control .custom-quantity-control input {
  min-height: 56px;
  font-size: 24px;
}

.quantity-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}

.quantity-modal-footer .secondary-button,
.quantity-modal-footer .primary-button {
  min-height: 44px;
}

@media (max-width: 720px) {
  .quantity-readonly-grid,
  .quantity-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quantity-modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .quantity-modal-footer .secondary-button,
  .quantity-modal-footer .primary-button {
    width: 100%;
  }
}

.custom-attachments-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(250px, .95fr);
  gap: 16px;
  margin-bottom: 16px;
}

.custom-drop-zone {
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 190px;
  border: 1px dashed #b8c2c0;
  border-radius: 12px;
  background: var(--ds-card);
  color: var(--muted);
  text-align: center;
}

.custom-drop-zone svg {
  width: 42px;
  height: 42px;
  color: rgba(var(--ds-sidebar-rgb), .55);
}

.custom-drop-zone strong {
  color: var(--ink);
}

.custom-file-list {
  display: grid;
  align-content: start;
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.custom-empty-files {
  display: grid;
  place-items: center;
  min-height: 188px;
  color: var(--muted);
}

.custom-file-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}

.custom-file-row:last-child {
  border-bottom: 0;
}

.file-type {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #f1f3f2;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.file-type.jpg,
.file-type.png {
  background: rgba(var(--ds-primary-rgb), .1);
  color: var(--nx-green);
}

.file-type.pdf {
  background: rgba(220, 38, 38, .1);
  color: var(--ds-danger);
}

.custom-file-open {
  display: grid;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.custom-file-open small {
  color: var(--muted);
}

.custom-note-field textarea {
  min-height: 74px;
}

.custom-operations-card {
  padding-bottom: 14px;
}

.custom-operations-card p {
  margin: -6px 0 14px;
}

.custom-operation-table-wrap {
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow-x: auto;
}

.custom-operation-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
}

.custom-operation-table th,
.custom-operation-table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.custom-operation-table tbody tr {
  cursor: grab;
}

.custom-operation-table tbody tr:active {
  cursor: grabbing;
}

.custom-operation-table tbody tr:hover {
  background: rgba(var(--ds-primary-rgb), .04);
}

.custom-operation-table tr:last-child td {
  border-bottom: 0;
}

.custom-operation-table select,
.custom-operation-table input {
  min-height: 42px;
  padding: 0 12px;
}

.custom-operator-checklist {
  display: grid;
  gap: 7px;
  min-width: 210px;
  max-height: 142px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--ds-card);
}

.custom-operator-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.custom-operator-checklist input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--ds-primary);
}

.custom-operator-checklist span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-operator-checklist em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.drag-handle {
  color: var(--muted);
}

.drag-handle svg {
  width: 18px;
  height: 18px;
}

.minutes-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.minutes-input input {
  border: 0;
  border-radius: 0;
  font-weight: 900;
  text-align: center;
}

.minutes-input span {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--border);
  background: var(--ds-card);
  color: var(--muted);
  font-weight: 800;
}

.danger-icon {
  color: var(--danger);
}

.add-custom-operation {
  margin-top: 10px;
}

.custom-drag-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.custom-drag-note svg {
  width: 17px;
  height: 17px;
}

.custom-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
}

.custom-modal-footer > div {
  display: flex;
  gap: 14px;
}

.custom-total-time {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 14px;
  min-width: 350px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f8faf8, var(--ds-card));
  padding: 16px 22px;
}

.custom-total-time svg {
  grid-row: span 3;
  align-self: center;
  width: 34px;
  height: 34px;
}

.custom-total-time span,
.custom-total-time small {
  color: var(--muted);
}

.custom-total-time strong {
  font-size: 24px;
}

.custom-modal-footer .primary-button,
.custom-modal-footer .secondary-button {
  min-height: 56px;
  padding: 0 34px;
  font-size: 16px;
}

.custom-modal-footer .primary-button {
  min-width: 320px;
}

.custom-image-preview img {
  display: block;
  max-width: min(760px, 80vw);
  max-height: 70vh;
  border-radius: 14px;
  object-fit: contain;
}

@media (max-width: 1280px) {
  .custom-top-grid,
  .custom-basic-grid,
  .custom-attachments-grid {
    grid-template-columns: 1fr;
  }

  .custom-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .custom-total-time,
  .custom-modal-footer .primary-button {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .custom-item-modal {
    width: calc(100vw - 24px);
    padding: 18px;
  }

  .custom-modal-footer > div {
    flex-direction: column;
  }
}

/* Build 050.6C/D: active Unified Custom Creation Wizard runtime. */
.modal-backdrop.custom-wizard-backdrop {
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 14px 24px 18px;
}

.modal-backdrop.custom-wizard-backdrop .modal-panel.flow-modal.runtime-custom-wizard {
  margin-block: 0;
}

.modal-panel.flow-modal.runtime-custom-wizard {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.modal-panel.flow-modal.runtime-custom-wizard > .flow-modal-head {
  grid-row: 1;
}

.modal-panel.flow-modal.runtime-custom-wizard > .custom-wizard-tabs {
  grid-row: 2;
}

.modal-panel.flow-modal.runtime-custom-wizard > .custom-error {
  grid-row: 3;
}

.modal-panel.flow-modal.runtime-custom-wizard > .custom-wizard-body {
  grid-row: 4;
}

.modal-panel.flow-modal.runtime-custom-wizard > .custom-modal-footer {
  grid-row: 5;
}

.modal-panel.flow-modal.runtime-custom-wizard.custom-choice-shell {
  width: min(960px, calc(100vw - 48px));
  height: auto;
  max-height: min(560px, calc(100dvh - 32px));
}

.modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell {
  width: min(1120px, calc(100vw - 48px));
  height: min(660px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
}

.runtime-custom-wizard .custom-wizard-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--ds-primary-border);
  background: #f8fbfe;
  padding: 0 16px;
}

.runtime-custom-wizard .custom-wizard-tabs button {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--ds-primary-border);
  background: transparent;
  color: var(--ds-heading);
  font-weight: 800;
  padding: 0 18px;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-wizard-tabs button:first-child {
  border-left: 1px solid var(--ds-primary-border);
}

.runtime-custom-wizard .custom-wizard-tabs button.active {
  background: #fff;
  box-shadow: inset 0 3px 0 var(--ds-primary);
  color: var(--ds-heading);
}

.runtime-custom-wizard .custom-wizard-tabs button.locked em,
.runtime-custom-wizard .product-wizard-tabs button.locked em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: var(--ds-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.runtime-custom-wizard .custom-wizard-tabs button.locked svg,
.runtime-custom-wizard .product-wizard-tabs button.locked svg {
  width: 14px;
  height: 14px;
}

.runtime-custom-wizard .custom-error {
  margin: 12px 16px 0;
}

.runtime-custom-wizard .custom-wizard-body {
  min-height: 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  overflow: auto;
  background: linear-gradient(180deg, #f8fbfe 0%, #eef6fb 100%);
  padding: 16px;
}

.modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell .custom-wizard-body {
  overflow-x: hidden;
  overflow-y: auto;
}

.runtime-custom-wizard .custom-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-height: 240px;
  align-content: center;
}

.runtime-custom-wizard .custom-start-card.flow-source-card {
  min-height: 220px;
  align-content: start;
  border-left-width: 4px;
  background: #fff;
  text-align: left;
}

.runtime-custom-wizard .custom-start-card.flow-source-card b {
  justify-self: start;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-heading);
  padding: 0 18px;
  font-style: normal;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-start-card.flow-source-card:hover b,
.runtime-custom-wizard .custom-start-card.flow-source-card:focus-visible b {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
}

.runtime-custom-wizard .custom-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  height: auto;
  min-width: 0;
  min-height: 0;
  align-items: start;
}

.runtime-custom-wizard .custom-main-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  min-width: 0;
  overflow: visible;
}

.runtime-custom-wizard .panel-card {
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.runtime-custom-wizard .custom-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.runtime-custom-wizard .custom-panel-head small,
.runtime-custom-wizard .field > span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.runtime-custom-wizard .custom-panel-head h3 {
  margin: 3px 0 0;
  color: var(--ds-heading);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.runtime-custom-wizard .descriptor {
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  white-space: nowrap;
}

.runtime-custom-wizard .info-box {
  display: grid;
  gap: 5px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-heading);
  padding: 12px 14px;
}

.runtime-custom-wizard .info-box span {
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1.35;
}

.product-wizard-modal .product-wizard-body {
  min-height: 0;
}

.product-wizard-modal .product-assemblies-step,
.product-wizard-modal .product-stations-step,
.product-wizard-modal .product-documents-step {
  min-width: 0;
}

.product-wizard-modal .product-structure-card .product-assemblies-step {
  display: grid;
  gap: 12px;
}

.product-wizard-modal .station-table-card,
.product-wizard-modal .product-assembly-card,
.product-wizard-modal .product-documents-step {
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
}

.product-wizard-modal .station-table-card {
  overflow-x: auto;
}

.product-wizard-modal .station-table td small {
  display: block;
  margin-top: 3px;
  color: var(--ds-muted);
  font-size: 11px;
  line-height: 1.25;
}

.product-wizard-modal .product-photo-card {
  min-width: 0;
}

.locked-material-panel .descriptor.locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.locked-material-panel .descriptor.locked svg {
  width: 15px;
  height: 15px;
}

.material-lock-copy {
  display: grid;
  gap: 10px;
  border: 1px dashed var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-heading);
  padding: 16px;
}

.material-lock-copy p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 14px;
  line-height: 1.45;
}

.runtime-custom-wizard .custom-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.runtime-custom-wizard .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.runtime-custom-wizard .field input,
.runtime-custom-wizard .field select,
.runtime-custom-wizard .field textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-heading);
  font-weight: 700;
}

.runtime-custom-wizard .field small {
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.35;
}

.runtime-custom-wizard .wide-field {
  grid-column: 1 / -1;
}

.runtime-custom-wizard .custom-summary-rail {
  position: static;
  align-self: start;
  display: grid;
  gap: 12px;
  max-height: none;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.runtime-custom-wizard .custom-code-box {
  display: grid;
  gap: 8px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #eef7fd;
  padding: 14px;
}

.runtime-custom-wizard .custom-code-box small,
.runtime-custom-wizard .custom-rail-list span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.runtime-custom-wizard .custom-code-box strong {
  color: var(--ds-heading);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 22px;
  line-height: 1;
}

.runtime-custom-wizard .custom-rail-list {
  display: grid;
  gap: 0;
}

.runtime-custom-wizard .custom-rail-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--ds-primary-border);
  padding: 10px 0;
}

.runtime-custom-wizard .custom-rail-list div:last-child {
  border-bottom: 0;
}

.runtime-custom-wizard .custom-rail-list div:first-child {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-items: start;
}

.runtime-custom-wizard .custom-rail-list strong {
  min-width: 0;
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.runtime-custom-wizard .custom-rail-list div:first-child strong {
  text-align: left;
}

.runtime-custom-wizard .custom-copy-select {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.runtime-custom-wizard .custom-copy-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
}

.runtime-custom-wizard .custom-copy-option {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  text-align: left;
}

.runtime-custom-wizard .custom-copy-option.selected {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  box-shadow: inset 4px 0 0 var(--ds-primary);
}

.runtime-custom-wizard .custom-copy-option small,
.runtime-custom-wizard .custom-copy-preview span,
.runtime-custom-wizard .custom-copy-preview small {
  color: var(--ds-muted);
}

.runtime-custom-wizard .custom-copy-preview {
  display: grid;
  gap: 6px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  padding: 12px;
}

.runtime-custom-wizard .custom-copy-empty {
  display: grid;
  justify-items: start;
  gap: 6px;
  color: var(--ds-muted);
  padding: 12px;
}

.runtime-custom-wizard .custom-stations-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 0;
}

.runtime-custom-wizard .custom-structure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.runtime-custom-wizard .custom-structure-list {
  display: grid;
  gap: 8px;
}

.runtime-custom-wizard .custom-structure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-heading);
  padding: 0;
  text-align: left;
  overflow: hidden;
}

.runtime-custom-wizard .custom-structure-row.level-product {
  border-color: rgba(var(--ds-primary-rgb), .38);
  background: #f7fbff;
}

.runtime-custom-wizard .custom-structure-row.level-assembly {
  margin-left: 18px;
  border-color: rgba(var(--ds-primary-rgb), .34);
  background: #fff;
  box-shadow: inset 4px 0 0 rgba(var(--ds-primary-rgb), .5);
}

.runtime-custom-wizard .custom-structure-row.level-position {
  margin-left: 42px;
  border-color: #f1d38b;
  background: #fffdf7;
  box-shadow: inset 4px 0 0 rgba(245, 158, 11, .55);
}

.runtime-custom-wizard .custom-structure-select {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
}

.runtime-custom-wizard .custom-structure-row.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  box-shadow: inset 4px 0 0 var(--ds-primary);
}

.runtime-custom-wizard .custom-delete-structure {
  justify-self: center;
  border: 1px solid #ffc7c7;
  background: #fff7f7;
}

.runtime-custom-wizard .custom-structure-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.runtime-custom-wizard .custom-structure-copy strong {
  min-width: 0;
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: normal;
}

.runtime-custom-wizard .custom-structure-copy small {
  min-width: 0;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.runtime-custom-wizard .custom-structure-copy span {
  min-width: 0;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.runtime-custom-wizard .custom-structure-row em {
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 10px;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-structure-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(180px, 1fr) minmax(90px, .45fr);
  gap: 10px;
  border-top: 1px solid var(--ds-primary-border);
  background: rgba(255, 255, 255, .74);
  padding: 10px 12px 12px 66px;
}

.runtime-custom-wizard .custom-structure-editor input {
  min-height: 36px;
  font-size: 13px;
  font-weight: 750;
  padding: 0 10px;
}

.runtime-custom-wizard .custom-operation-panel {
  min-height: 0;
  overflow: visible;
}

.runtime-custom-wizard .custom-inline-operation {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(220px, .62fr) 40px;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.runtime-custom-wizard .custom-operation-list {
  display: grid;
  gap: 10px;
}

.runtime-custom-wizard .custom-inline-operation {
  position: relative;
  grid-template-areas:
    "index desc desc delete"
    "index station time delete"
    "index worker worker delete"
    "index station-error time-error delete"
    "index worker-error worker-error delete";
  border: 1px solid var(--ds-primary-border);
  border-left: 4px solid var(--ds-primary);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.runtime-custom-wizard .custom-inline-operation .field {
  min-width: 0;
}

.runtime-custom-wizard .custom-inline-operation .field > span {
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.runtime-custom-wizard .custom-inline-operation input,
.runtime-custom-wizard .custom-inline-operation select {
  min-width: 0;
  min-height: 38px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  padding: 0 9px;
}

.runtime-custom-wizard .custom-op-station select {
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
}

.runtime-custom-wizard .custom-op-station small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.runtime-custom-wizard .custom-op-time {
  min-width: 0;
}

.runtime-custom-wizard .custom-op-time-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.runtime-custom-wizard .custom-op-time-parts label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.runtime-custom-wizard .custom-op-time-parts em {
  color: var(--ds-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.runtime-custom-wizard .custom-inline-operation.needs-work {
  border-left-color: #f6a400;
}

.runtime-custom-wizard .custom-inline-operation.valid {
  border-left-color: var(--ds-success);
}

.runtime-custom-wizard .custom-inline-operation.no-worker-assignment {
  grid-template-columns: 40px 72px minmax(0, 1fr) minmax(220px, .62fr) 40px;
  grid-template-areas:
    "index reorder desc desc delete"
    "index reorder station time delete"
    "index reorder station-error time-error delete";
}

.runtime-custom-wizard .operation-index {
  grid-area: index;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
  font-weight: 900;
}

.runtime-custom-wizard .custom-operation-reorder {
  grid-area: reorder;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
}

.runtime-custom-wizard .custom-operation-reorder .plain-icon {
  width: 32px;
  height: 32px;
}

.runtime-custom-wizard .custom-op-description {
  grid-area: desc;
}

.runtime-custom-wizard .custom-op-station {
  grid-area: station;
}

.runtime-custom-wizard .custom-op-time {
  grid-area: time;
}

.runtime-custom-wizard .custom-worker-field {
  grid-area: worker;
  position: relative;
}

.runtime-custom-wizard .custom-worker-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fbfe);
  color: var(--ds-heading);
  padding: 7px 8px;
  text-align: left;
}

.runtime-custom-wizard .custom-worker-picker-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.runtime-custom-wizard .custom-worker-picker-copy strong {
  min-width: 0;
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-worker-picker-copy small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.runtime-custom-wizard .custom-worker-picker:hover,
.runtime-custom-wizard .custom-worker-picker:focus-visible {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.runtime-custom-wizard .custom-worker-picker b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-worker-picker b span,
.runtime-custom-wizard .custom-worker-picker b svg {
  color: #fff;
}

.runtime-custom-wizard .custom-worker-picker b svg {
  width: 13px;
  height: 13px;
}

.runtime-custom-wizard .worker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.runtime-custom-wizard .worker-chip {
  min-width: 0;
  max-width: 150px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: #eef7fd;
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-custom-wizard .worker-chip.muted {
  background: #f8fbfe;
  color: var(--ds-muted);
}

.runtime-custom-wizard .custom-operator-menu {
  position: absolute;
  z-index: 4;
  left: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 8px;
  width: min(100%, 360px);
  max-height: min(258px, calc(100dvh - 240px));
  overflow: hidden;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(var(--ds-sidebar-rgb), .16);
  padding: 10px;
}

.runtime-custom-wizard .custom-operator-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ds-primary-border);
  padding-bottom: 8px;
}

.runtime-custom-wizard .custom-operator-menu-head small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-operator-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 190px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.runtime-custom-wizard .custom-operator-menu strong {
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
}

.runtime-custom-wizard .custom-operator-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 8px;
}

.runtime-custom-wizard .custom-operator-menu label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-operator-menu input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  accent-color: var(--ds-primary);
}

.runtime-custom-wizard .custom-delete-operation {
  grid-area: delete;
  align-self: start;
  justify-self: center;
  border: 1px solid #ffc7c7;
  background: #fff7f7;
}

.runtime-custom-wizard .custom-row-error {
  color: var(--ds-danger);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.runtime-custom-wizard .custom-row-error.station {
  grid-area: station-error;
}

.runtime-custom-wizard .custom-row-error.time {
  grid-area: time-error;
}

.runtime-custom-wizard .custom-row-error.worker {
  grid-area: worker-error;
}

.runtime-custom-wizard .custom-operations-empty,
.runtime-custom-wizard .custom-empty-files {
  display: grid;
  justify-items: start;
  gap: 6px;
  border: 1px dashed var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-muted);
  padding: 14px;
}

.runtime-custom-wizard .custom-total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #bfe5d0;
  border-radius: 8px;
  background: #eefaf3;
  color: #0f6b3d;
  font-weight: 800;
  margin-top: 12px;
  padding: 12px 14px;
}

.runtime-custom-wizard .custom-total-strip.incomplete {
  border-color: #f7dc9a;
  background: #fff8dd;
  color: #8a5a00;
}

.runtime-custom-wizard .custom-file-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.runtime-custom-wizard .custom-documentation-card {
  align-self: start;
  min-height: 0;
}

.runtime-custom-wizard .custom-documentation-card .custom-panel-head {
  margin-bottom: 14px;
}

.runtime-custom-wizard .custom-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.runtime-custom-wizard .custom-doc-actions .compact-command {
  min-height: 42px;
  padding: 0 14px;
}

.runtime-custom-wizard .custom-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.runtime-custom-wizard .custom-file-open {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ds-heading);
  text-align: left;
}

.runtime-custom-wizard .custom-file-open strong,
.runtime-custom-wizard .custom-file-open small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-custom-wizard .custom-modal-footer {
  margin: 0;
  flex: 0 0 auto;
  border-top: 1px solid var(--ds-primary-border);
  background: #fff;
  box-shadow: 0 -12px 30px rgba(var(--ds-sidebar-rgb), .06);
  min-height: 62px;
  padding: 10px 14px;
  z-index: 3;
}

.runtime-custom-wizard .custom-modal-footer,
.runtime-custom-wizard .custom-modal-footer > div {
  flex-direction: row;
  align-items: center;
}

.runtime-custom-wizard .custom-modal-footer .footer-hint {
  color: var(--ds-muted);
  font-size: 13px;
}

.runtime-custom-wizard .custom-modal-footer .primary-button,
.runtime-custom-wizard .custom-modal-footer .secondary-button {
  min-height: 42px;
  min-width: 0;
  padding: 0 18px;
  font-size: 14px;
}

@media (max-width: 1280px) {
  .modal-backdrop.custom-wizard-backdrop {
    padding: 10px 20px 12px;
  }

  .modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell {
    width: min(1120px, calc(100vw - 40px));
    height: min(560px, calc(100dvh - 28px));
    max-height: calc(100dvh - 28px);
  }

  .modal-panel.flow-modal.runtime-custom-wizard.custom-choice-shell {
    width: min(940px, calc(100vw - 40px));
    height: auto;
    max-height: min(540px, calc(100dvh - 40px));
  }

  .runtime-custom-wizard .flow-modal-head {
    padding: 12px 16px;
  }

  .runtime-custom-wizard .flow-modal-icon {
    width: 36px;
    height: 36px;
  }

  .runtime-custom-wizard .flow-modal-title h2 {
    font-size: 22px;
  }

  .runtime-custom-wizard .custom-wizard-tabs button {
    min-height: 42px;
    padding: 0 16px;
  }

  .runtime-custom-wizard .custom-wizard-body {
    padding: 12px;
  }

  .runtime-custom-wizard .custom-modal-footer,
  .runtime-custom-wizard .custom-modal-footer > div {
    flex-direction: row;
    align-items: center;
  }

  .runtime-custom-wizard .custom-modal-footer {
    gap: 10px;
    padding: 10px 14px;
  }
}

@media (max-height: 820px) {
  .modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell {
    height: min(660px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    overflow: hidden;
  }

  .runtime-custom-wizard .custom-wizard-body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell .custom-wizard-body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (max-width: 1280px) and (max-height: 820px) {
  .modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell {
    height: min(560px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 1180px) {

  .runtime-custom-wizard .custom-content-grid,
  .runtime-custom-wizard .custom-stations-grid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell .custom-wizard-body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .runtime-custom-wizard .custom-main-column {
    overflow: visible;
    padding-right: 0;
  }

  .runtime-custom-wizard .custom-summary-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .runtime-custom-wizard .custom-rail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
}

@media (max-width: 920px) {
  .runtime-custom-wizard .custom-choice-grid,
  .runtime-custom-wizard .custom-field-grid {
    grid-template-columns: 1fr;
  }

  .runtime-custom-wizard .custom-inline-operation {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
      "index desc"
      "index station"
      "index time"
      "index worker"
      "index station-error"
      "index time-error"
      "index worker-error"
      "index delete";
  }

  .runtime-custom-wizard .custom-inline-operation.no-worker-assignment {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
      "index reorder"
      "index desc"
      "index station"
      "index time"
      "index station-error"
      "index time-error"
      "index delete";
  }

  .runtime-custom-wizard .custom-inline-operation .field,
  .runtime-custom-wizard .custom-delete-operation,
  .runtime-custom-wizard .custom-row-error {
    grid-column: 2;
  }

  .runtime-custom-wizard .custom-worker-field,
  .runtime-custom-wizard .custom-row-error.worker {
    grid-column: 2;
  }

  .runtime-custom-wizard .custom-delete-operation {
    justify-self: start;
  }

  .runtime-custom-wizard .custom-operator-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .modal-backdrop.custom-wizard-backdrop {
    align-items: center;
    overflow: hidden;
    padding: 8px;
  }

  .modal-panel.flow-modal.runtime-custom-wizard,
  .modal-panel.flow-modal.runtime-custom-wizard.custom-choice-shell,
  .modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
  }

  .runtime-custom-wizard .custom-wizard-body {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
  }

  .runtime-custom-wizard .custom-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .runtime-custom-wizard .custom-modal-footer {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .runtime-custom-wizard .custom-modal-footer .footer-hint {
    display: none;
  }

  .runtime-custom-wizard .custom-modal-footer > div {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
  }

  .runtime-custom-wizard .custom-modal-footer .primary-button,
  .runtime-custom-wizard .custom-modal-footer .secondary-button {
    flex: 1 1 104px;
    min-height: 38px;
    padding: 0 10px;
  }

  .runtime-custom-wizard .custom-structure-row {
    grid-template-columns: minmax(0, 1fr) 38px;
  }

  .runtime-custom-wizard .custom-structure-row.level-assembly,
  .runtime-custom-wizard .custom-structure-row.level-position {
    margin-left: 0;
  }

  .runtime-custom-wizard .custom-structure-select {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .runtime-custom-wizard .custom-structure-row em {
    justify-self: start;
    grid-column: 2;
  }

  .runtime-custom-wizard .custom-structure-editor {
    grid-template-columns: 1fr;
    padding: 10px 12px 12px 50px;
  }

  .runtime-custom-wizard .custom-rail-list {
    grid-template-columns: 1fr;
  }

  .runtime-custom-wizard .custom-worker-picker {
    grid-template-columns: 1fr;
  }

  .runtime-custom-wizard .custom-worker-picker b {
    justify-self: start;
  }

  .runtime-custom-wizard .custom-operator-menu {
    position: static;
    width: 100%;
    max-height: 260px;
    margin-top: 6px;
  }
}

/* Sprint Radni nalozi: pregled stavki radnog naloga. */
.work-items-overview {
  display: grid;
  gap: 22px;
  min-width: 0;
  max-width: 100%;
}

.work-items-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--ds-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.items-summary-metric {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 5px 16px;
  min-height: 116px;
  padding: 22px 26px;
  border-right: 1px solid var(--border);
}

.items-summary-metric:last-child {
  border-right: 0;
}

.items-summary-metric .soft-icon {
  grid-row: span 3;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.items-summary-metric span,
.items-summary-metric small {
  color: var(--muted);
  font-weight: 700;
}

.items-summary-metric strong {
  font-size: 23px;
  line-height: 1.15;
}

.items-summary-metric.good strong,
.items-summary-metric.good small {
  color: var(--ds-primary-hover);
}

.items-summary-metric.bad strong,
.items-summary-metric.bad small {
  color: var(--ds-danger);
}

.done-total i {
  grid-column: 2;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #e7ece9;
  overflow: hidden;
}

.done-total i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-primary);
}

.items-overview-card {
  padding: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.items-overview-card .panel-header {
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
}

.custom-purple-button {
  border-color: var(--nx-green);
  background: linear-gradient(180deg, var(--nx-green-2), var(--nx-green));
  color: var(--ds-card);
  box-shadow: 0 12px 24px rgba(var(--ds-sidebar-rgb), .18);
}

.custom-purple-button:hover {
  background: linear-gradient(180deg, var(--nx-green-3), var(--nx-green-2));
}

.items-overview-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-bottom: 8px;
}

.items-overview-table-wrap::-webkit-scrollbar {
  height: 10px;
}

.items-overview-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--ds-disabled-bg);
}

.items-overview-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid var(--ds-disabled-bg);
  border-radius: 999px;
  background: rgba(var(--ds-sidebar-rgb), 0.34);
}

.items-overview-table {
  width: 100%;
  min-width: 1480px;
  border-collapse: collapse;
}

.items-overview-table th,
.items-overview-table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.items-overview-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.items-overview-table tbody tr:hover {
  background: rgba(var(--ds-primary-rgb), .035);
}

.overview-number {
  white-space: nowrap;
}

.overview-number .row-toggle,
.overview-number .row-spacer {
  margin-right: 10px;
}

.overview-item-cell {
  position: relative;
  min-width: 270px;
}

.overview-item-cell > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.overview-item-cell strong,
.overview-item-cell small {
  display: block;
}

.overview-item-cell small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--muted);
}

.overview-item-cell .operation-work-description {
  display: block;
  max-width: 420px;
  white-space: normal;
  line-height: 1.35;
}

.overview-item-cell .operation-work-description b {
  color: var(--text);
}

.work-item-kind {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(var(--ds-primary-rgb), .08);
  color: var(--ds-primary-hover);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.work-item-kind.assembly {
  background: var(--ds-info-bg);
  color: var(--ds-info);
}

.work-item-kind.position {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.work-item-kind.operation {
  background: var(--ds-success-bg);
  color: var(--ds-primary-hover);
}

.work-item-operator-select {
  width: min(210px, 100%);
  min-width: 150px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-heading);
  font-weight: 750;
}

.operator-assign-button {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: min(230px, 100%);
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--ds-primary-rgb), .22);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f8fbfd);
  color: var(--ds-heading);
  box-shadow: 0 8px 18px rgba(15, 50, 85, .06);
  cursor: pointer;
}

.operator-assign-button:hover {
  border-color: rgba(var(--ds-primary-rgb), .44);
  background: #fff;
}

.operator-assign-button.empty {
  justify-content: center;
  color: var(--ds-primary);
  font-weight: 850;
}

.operator-assign-button svg {
  width: 16px;
  height: 16px;
}

.operator-assignment-stack {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.operator-stack-label {
  flex-basis: 100%;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.operator-active-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.operator-active-line svg {
  width: 14px;
  height: 14px;
}

.operator-active-line.active {
  color: var(--ds-primary-hover);
}

.operator-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(var(--ds-primary-rgb), .09);
  color: var(--ds-primary-hover);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.operator-chip.more {
  background: var(--ds-warning-bg);
  color: #8a5c00;
}

.operator-assignment-modal {
  width: min(820px, calc(100vw - 40px));
  max-height: min(680px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.operator-assignment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--nx-line);
}

.operator-assignment-header > div {
  display: flex;
  gap: 14px;
  align-items: center;
}

.operator-assignment-header h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.operator-assignment-header p {
  margin: 0;
  color: var(--ds-muted);
  font-weight: 700;
}

.operator-assignment-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 18px 28px 22px;
  overflow-y: auto;
  overflow-x: hidden;
}

.operator-assignment-live-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--ds-warning);
  border-radius: 10px;
  background: var(--ds-warning-bg);
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 700;
}

.operator-assignment-live-note svg { flex: none; width: 16px; height: 16px; }
.operator-assignment-choices { display: grid; gap: 10px; min-width: 0; }
.operator-assignment-choices-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.operator-assignment-choices-heading h3 { margin: 0; color: var(--ds-heading); font-size: 15px; }
.operator-assignment-choices-heading span { color: var(--ds-muted); font-size: 12px; font-weight: 800; }
.operator-assignment-empty { margin: 0; padding: 20px; border: 1px dashed var(--nx-line); border-radius: 10px; color: var(--ds-muted); text-align: center; }

.operator-picker-section {
  display: grid;
  gap: 10px;
}

.operator-picker-section h3,
.operator-history-preview h3 {
  margin: 0;
  font-size: 15px;
  color: var(--ds-heading);
}

.operator-picker-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-picker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 9px 10px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.operator-picker-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--ds-primary);
}

.operator-picker-row:has(input:checked) {
  border-color: rgba(var(--ds-primary-rgb), .42);
  background: rgba(var(--ds-primary-rgb), .06);
}

.operator-picker-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.operator-picker-row strong,
.operator-picker-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-picker-row small {
  color: var(--ds-muted);
  font-weight: 700;
}

.operator-picker-row.is-disabled {
  background: var(--ds-bg);
  color: var(--ds-muted);
  cursor: not-allowed;
}

.operator-picker-row.is-disabled input {
  opacity: .45;
}

.finish-operator-list .operator-picker-row,
.operator-action-list .operator-action-choice {
  min-height: 54px;
}

.operator-live-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--ds-bg);
  color: var(--ds-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.operator-live-status.active {
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
}

.operator-live-status.paused {
  background: var(--ds-warning-bg);
  color: #8a5c00;
}

.operator-live-status.blocked {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.operator-live-status.idle,
.operator-live-status.inactive {
  background: var(--ds-bg);
  color: var(--ds-muted);
}

.operator-action-context {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  background: #f7fbfd;
}

.operator-action-context dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.operator-action-context dt {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.operator-action-context dd {
  margin: 4px 0 0;
  color: var(--ds-heading);
  font-weight: 850;
}

.operator-action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.operator-history-preview {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  background: #fff;
}

.operator-history-preview header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-history-preview header span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.operator-history-preview.is-empty p {
  margin: 0;
  color: var(--ds-muted);
  font-weight: 700;
}

.operator-history-list {
  display: grid;
  gap: 8px;
  max-height: min(360px, 48dvh);
  overflow-y: auto;
  padding-right: 4px;
}

.operator-history-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: #f8fbfd;
}

.operator-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-primary);
}

.operator-history-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.operator-history-row strong,
.operator-history-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-history-preview small {
  display: block;
  color: var(--ds-muted);
  font-weight: 700;
}

.operator-history-row time {
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.operator-history-row em {
  grid-column: 2 / -1;
  color: var(--ds-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.operator-assignment-actions {
  flex-shrink: 0;
  border-top: 1px solid var(--nx-line);
}

.runtime-base-modal .base-selection-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid rgba(var(--ds-primary-rgb),.2);border-radius:9px;background:rgba(var(--ds-primary-rgb),.06)}
.runtime-base-modal .base-selection-summary strong{color:var(--ds-primary);font-size:13px}.runtime-base-modal .base-selection-summary span{color:var(--ds-muted);font-size:11px;text-align:right}
.runtime-base-modal .base-product-card{position:relative;padding:0;overflow:hidden}
.runtime-base-modal .base-product-card.batch-selected{border-color:var(--ds-success);box-shadow:inset 3px 0 0 var(--ds-success),0 8px 18px rgba(var(--ds-sidebar-rgb),.045)}
.runtime-base-modal .base-product-select-toggle{display:grid;place-items:center;width:30px;height:30px;margin-left:11px;border:1px solid var(--ds-primary-border);border-radius:8px;background:#fff;color:#fff;cursor:pointer}
.runtime-base-modal .base-product-select-toggle[aria-pressed="true"]{border-color:var(--ds-success);background:var(--ds-success);color:#fff}
.runtime-base-modal .base-product-select-toggle svg{width:16px;height:16px}
.runtime-base-modal .base-product-inspect{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;width:100%;padding:12px 12px 12px 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.runtime-base-modal .base-product-inspect:focus-visible,.runtime-base-modal .base-product-select-toggle:focus-visible{outline:2px solid rgba(var(--ds-primary-rgb),.38);outline-offset:-2px}
.runtime-base-modal .base-product-inspect-label{color:var(--ds-primary);font-size:11px;font-weight:850}
.runtime-base-modal .base-preview-select-prompt{display:grid;justify-items:start;gap:7px;padding:15px;border:1px dashed var(--ds-primary-border);border-radius:10px;background:var(--ds-bg-soft)}
.runtime-base-modal .base-preview-select-prompt p{margin:0;color:var(--ds-muted);font-size:12px}
.runtime-base-modal .base-review-body{display:block}
@media(min-width:761px){.runtime-base-modal:has(>.base-review-body){height:auto}}
.runtime-base-modal .base-product-review{display:grid;gap:14px;max-width:1050px;margin:0 auto}
.runtime-base-modal .base-product-review>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid var(--ds-primary-border);border-radius:12px;background:#fff}
.runtime-base-modal .base-product-review>header h3{margin:3px 0;color:var(--ds-heading);font-size:20px}.runtime-base-modal .base-product-review>header p{margin:0;color:var(--ds-muted);font-size:13px}.runtime-base-modal .base-product-review>header>strong{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--ds-primary-light);color:var(--ds-primary);font-size:18px}
.runtime-base-modal .base-review-list{display:grid;gap:12px}
.runtime-base-modal .base-review-card{display:grid;gap:10px;padding:14px;border:1px solid var(--ds-primary-border);border-radius:12px;background:#fff;box-shadow:var(--shadow-card)}
.runtime-base-modal .base-review-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.runtime-base-modal .base-review-card>header>div{display:grid;gap:2px;min-width:0}.runtime-base-modal .base-review-card>header small{color:var(--ds-primary);font-size:11px;font-weight:850}.runtime-base-modal .base-review-card>header strong{overflow-wrap:anywhere;color:var(--ds-heading);font-size:16px}.runtime-base-modal .base-review-remove{flex:0 0 auto;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;background:var(--ds-danger-bg)}.runtime-base-modal .base-review-remove:hover{border-color:rgba(225,29,46,.34);background:color-mix(in srgb,var(--ds-danger-bg) 82%,#fff)}.runtime-base-modal .base-review-remove:focus-visible{outline:2px solid rgba(225,29,46,.42);outline-offset:2px}
.runtime-base-modal .base-review-fields{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(120px,.4fr) minmax(240px,1fr) minmax(240px,1.2fr);align-items:start;gap:12px}
.runtime-base-modal .base-review-quantity .quantity-control{display:grid;grid-template-columns:38px minmax(70px,1fr) 38px}.runtime-base-modal .base-review-quantity em{color:var(--ds-muted);font-size:11px;font-style:normal}.runtime-base-modal .base-review-planned{display:grid;gap:7px;padding-top:2px}.runtime-base-modal .base-review-planned span{color:var(--ds-muted);font-size:11px;font-weight:800;text-transform:uppercase}.runtime-base-modal .base-review-planned strong{min-height:40px;padding:10px 11px;border-radius:8px;background:var(--ds-bg-soft);color:var(--ds-heading)}
.runtime-base-modal .base-fulfillment-field{display:flex;grid-column:1/-1;align-content:flex-start;gap:6px;margin:0;padding:0;border:0;flex-wrap:wrap}.runtime-base-modal .base-fulfillment-field legend{width:100%;margin:0 0 1px;color:var(--ds-muted);font-size:11px;font-weight:800;text-transform:uppercase}.runtime-base-modal .base-fulfillment-field label{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--ds-border);border-radius:999px;background:#f8fafc;color:var(--ds-heading);font-size:12px;font-weight:800;line-height:1.2;cursor:pointer}.runtime-base-modal .base-fulfillment-field input{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0,0,0,0)}.runtime-base-modal .base-fulfillment-field label::before{content:"";flex:0 0 auto;width:12px;height:12px;border:1px solid #8395a7;border-radius:50%;background:#fff;box-sizing:border-box}.runtime-base-modal .base-fulfillment-field label.active{border-color:var(--ds-primary);color:var(--ds-primary-strong);background:var(--ds-primary-light);box-shadow:none}.runtime-base-modal .base-fulfillment-field label.active::before{border:3px solid var(--ds-primary)}.runtime-base-modal .base-fulfillment-field label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(var(--ds-primary-rgb),.16)}.runtime-base-modal .base-review-fulfillment{grid-column:auto;margin:0}.runtime-base-modal .base-review-note textarea{min-height:64px}.runtime-base-modal .base-review-note>small{color:var(--ds-muted);font-size:11px;text-align:right}.runtime-base-modal .base-review-source-note{margin-top:20px;padding:11px;border-radius:8px;background:var(--ds-bg-soft);color:var(--ds-primary);font-size:12px;font-weight:800}

@media(max-width:1050px){.runtime-base-modal .split-picker{grid-template-columns:1fr}.runtime-base-modal .base-product-picker{min-height:430px}.runtime-base-modal .base-review-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.runtime-base-modal .base-runtime-body{padding:10px}.runtime-base-modal .base-selection-summary{align-items:flex-start;flex-direction:column}.runtime-base-modal .base-selection-summary span{text-align:left}.runtime-base-modal .base-product-inspect-label{display:none}.runtime-base-modal .base-review-fields{grid-template-columns:1fr}.runtime-base-modal .base-product-review>header{align-items:flex-start}.runtime-base-modal .base-review-card>header{align-items:flex-start}.runtime-base-modal .base-fulfillment-field label{flex:1 1 150px;justify-content:center;min-height:42px;text-align:center}.runtime-base-modal .base-review-remove{width:40px;height:40px;min-width:40px;min-height:40px}.runtime-base-modal .base-modal-footer{align-items:stretch;flex-direction:column}.runtime-base-modal .base-modal-footer .footer-actions{display:grid;grid-template-columns:1fr}.runtime-base-modal .base-modal-footer .primary-button,.runtime-base-modal .base-modal-footer .secondary-button{width:100%;min-width:0}}

.spec-final-line-note{display:block;margin-top:.4rem;color:#526a7d;font-size:.75rem;line-height:1.35;white-space:normal}
.wo-material-source-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.75rem}
.wo-material-contribution-original{display:grid;gap:.2rem;padding:.8rem 1rem;margin-bottom:.85rem;border-radius:.65rem;background:#f3f7fa;color:#315875}
.wo-material-contribution-original span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.wo-material-picker-list.contribution{max-height:15rem;margin:.65rem 0 1rem}
.wo-material-picker-list.contribution button.selected{border-color:#28749d;background:#eaf5fa}
.wo-material-preview-list{display:grid;gap:.75rem}
.wo-material-preview-list article{padding:.85rem;border:1px solid #d7e2e9;border-radius:.7rem;background:#fff}
.wo-material-preview-list header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.wo-material-preview-list header div{display:grid;gap:.15rem}
.wo-material-preview-list header em{font-size:.72rem;color:#315875;font-style:normal}
.wo-material-preview-list dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:.8rem 0 0}
.wo-material-preview-list dl div{display:grid;gap:.15rem}
.wo-material-preview-list dl .wide{grid-column:1/-1}
.wo-material-preview-list dt{font-size:.72rem;color:#60758a}.wo-material-preview-list dd{margin:0;font-weight:600;color:#203d54}
@media(max-width:720px){.wo-material-preview-list dl{grid-template-columns:1fr}}

.support-delete-work-order-modal { width: min(760px, calc(100vw - 32px)); }
.support-delete-work-order-modal .modal-body { display: grid; gap: 18px; padding: 20px 24px; overflow: auto; }
.support-delete-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.support-delete-evidence > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface-soft, #f7f9fc); }
.support-delete-evidence dt { color: var(--ds-text-muted); font-size: .72rem; font-weight: 700; }
.support-delete-evidence dd { margin: 0; font-size: 1rem; font-weight: 800; }
@media (max-width: 700px) { .support-delete-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.operator-assignment-toolbar{display:flex;align-items:end;gap:12px;padding:12px;border:1px solid var(--nx-line);border-radius:12px;background:#f8fbfd}.operator-assignment-toolbar>label:first-child{display:grid;gap:5px;min-width:0;flex:1}.operator-assignment-toolbar label>span{color:var(--ds-muted);font-size:12px;font-weight:850}.operator-assignment-toolbar input[type="text"],.operator-assignment-toolbar input[type="search"],.operator-assignment-toolbar input:not([type]){width:100%;min-height:40px;border:1px solid var(--nx-line);border-radius:9px;padding:0 11px;background:#fff}.operator-recommended-filter{display:flex!important;align-items:center;gap:7px;min-height:40px;white-space:nowrap}.operator-recommended-filter input{width:16px;height:16px;accent-color:var(--ds-primary)}.operator-live-advisory{color:var(--ds-warning)!important;white-space:normal!important}
.operator-assignment-modal .operator-assignment-toolbar{background:#fff}.operator-assignment-modal .operator-workload-sort{display:grid;gap:5px;align-items:stretch;justify-content:initial}.operator-assignment-modal .operator-workload-sort select{min-height:40px}.operator-assignment-modal .operator-picker-list{grid-template-columns:1fr}.operator-assignment-modal .operator-picker-row{min-height:62px}
.operator-batch-modal{display:flex;flex-direction:column;width:min(980px,calc(100vw - 40px));max-height:min(820px,calc(100dvh - 32px));overflow:hidden}.operator-batch-body{display:grid;gap:12px;min-height:0;padding:16px 24px 22px;overflow:auto;background:var(--ds-bg)}.operator-batch-completeness{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid rgba(var(--ds-primary-rgb),.2);border-radius:12px;background:rgba(var(--ds-primary-rgb),.06)}.operator-batch-completeness strong{color:var(--ds-heading)}.operator-batch-completeness span{color:var(--ds-muted);font-size:13px;font-weight:750}.operator-batch-list{display:grid;gap:9px}.operator-batch-operation{overflow:hidden;border:1px solid var(--nx-line);border-radius:12px;background:#fff}.operator-batch-operation.expanded{border-color:rgba(var(--ds-primary-rgb),.42);box-shadow:0 10px 25px rgba(31,75,111,.07)}.operator-batch-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,auto) auto;align-items:center;gap:14px;width:100%;padding:13px 15px;border:0;background:#fff;color:inherit;text-align:left;cursor:pointer}.operator-batch-summary>span:first-child{display:grid;gap:2px;min-width:0}.operator-batch-summary small{color:var(--ds-muted);font-size:11px;font-weight:800}.operator-batch-summary strong{overflow:hidden;color:var(--ds-heading);text-overflow:ellipsis;white-space:nowrap}.operator-batch-summary em{overflow:hidden;color:var(--ds-muted);font-size:12px;font-style:normal;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.operator-batch-selected{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;flex-wrap:wrap}.operator-batch-selected b{max-width:130px;overflow:hidden;padding:4px 7px;border-radius:999px;background:rgba(var(--ds-primary-rgb),.09);color:var(--ds-primary-hover);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.operator-batch-selected b.missing{background:var(--ds-warning-bg);color:#8a5c00}.operator-batch-selected small{display:flex;align-items:center;gap:4px;width:100%;justify-content:flex-end}.operator-batch-operation.expanded .operator-batch-summary>svg{transform:rotate(180deg)}.operator-batch-candidates{display:grid;gap:14px;padding:14px;border-top:1px solid var(--nx-line);background:#f8fbfd}.operator-batch-candidates section{display:grid;gap:8px}.operator-batch-candidates h3{margin:0;color:var(--ds-heading);font-size:13px;text-transform:uppercase;letter-spacing:.05em}.batch-operator-row{grid-template-columns:auto minmax(0,1fr)}.operator-batch-error{padding:10px 12px;border:1px solid var(--ds-danger);border-radius:10px;background:var(--ds-danger-bg);color:var(--ds-danger);font-weight:750}.operator-batch-empty{margin:0;color:var(--ds-muted)}.root-assignment-warning,.items-assignment-warning{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(193,124,0,.28);border-radius:999px;padding:6px 9px;background:var(--ds-warning-bg);color:#805500;font:inherit;font-size:12px;font-weight:850;cursor:pointer;white-space:nowrap}.items-assignment-warning{grid-column:1/-1;justify-self:start}

@media (max-width: 720px) {
  .operator-assignment-modal {
    width: min(100vw - 16px, 100%);
    max-height: calc(100dvh - 16px);
  }

  .operator-assignment-header,
  .operator-assignment-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .operator-picker-list {
    grid-template-columns: 1fr;
  }

  .operator-history-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .operator-history-row time {
    grid-column: 2;
  }

  .operator-assignment-actions {
    flex-direction: column-reverse;
  }

  .operator-assignment-toolbar{align-items:stretch;flex-direction:column}.operator-recommended-filter{min-height:auto}.operator-batch-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.operator-batch-body{padding:12px}.operator-batch-completeness{align-items:flex-start;flex-direction:column;gap:4px}.operator-batch-summary{grid-template-columns:minmax(0,1fr) auto}.operator-batch-selected{grid-column:1/-1;justify-content:flex-start}.operator-batch-selected small{justify-content:flex-start}.operator-batch-summary>svg{grid-column:2;grid-row:1}.operator-batch-candidates .operator-picker-list{grid-template-columns:1fr}

  .operator-assignment-actions .primary-button,
  .operator-assignment-actions .secondary-button {
    width: 100%;
  }
}

.item-type-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(var(--ds-primary-rgb), .08);
  color: var(--nx-green);
}

.item-type-icon svg {
  width: 17px;
  height: 17px;
}

.hierarchy-rail {
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: calc((var(--level) * -24px) + 6px);
  width: 1px;
  background: #dbe4df;
}

.time-stack {
  display: grid;
  gap: 3px;
  white-space: nowrap;
}

.time-stack em {
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.time-stack em.good {
  color: var(--ds-primary-hover);
}

.time-stack em.bad,
.scrap-stack em,
.scrap-stack strong {
  color: var(--ds-danger);
}

.overview-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  border-radius: 8px;
  padding: 5px 12px;
  font-weight: 850;
  white-space: nowrap;
}

.overview-status svg {
  width: 15px;
  height: 15px;
}

.overview-status.u-toku {
  background: var(--ds-success-bg);
  color: var(--ds-primary-hover);
}

.overview-status.pauzirano {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.overview-status.zavrseno {
  background: var(--ds-success-bg);
  color: var(--ds-primary-hover);
}

.overview-status.planirano,
.overview-status.nije-zapoceto {
  background: #f1f3f2;
  color: #425047;
}

.overview-status.zavrseno-privremeno {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.overview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 148px;
  white-space: nowrap;
}

.mini-status-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  font-weight: 850;
}

.mini-status-action svg {
  width: 14px;
  height: 14px;
}

.mini-status-action.start {
  border-color: #d8eaf6;
  background: var(--ds-bg);
  color: var(--ds-primary-hover);
}

.mini-status-action.pause {
  border-color: var(--ds-warning);
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.problem-report-icon,
.item-detail-icon,
.item-delete-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(220, 38, 38, .24);
  border-radius: 9px;
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.item-detail-icon {
  border-color: rgba(var(--ds-primary-rgb), .22);
  background: var(--ds-bg);
  color: var(--nx-green);
}

.item-delete-icon {
  border-color: rgba(220, 38, 38, .28);
  background: #fff7f7;
  color: var(--ds-danger);
}

.problem-report-icon svg,
.item-detail-icon svg,
.item-delete-icon svg {
  width: 17px;
  height: 17px;
}

.problem-report-icon:hover {
  border-color: rgba(220, 38, 38, .45);
  background: var(--ds-danger-bg);
}

.item-detail-icon:hover {
  border-color: rgba(var(--ds-primary-rgb), .42);
  background: var(--ds-success-bg);
}

/* Build 050.5 active Work Order Items runtime. */
.work-order-items-runtime {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  container: items-runtime / inline-size;
}

.items-runtime-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 180px) minmax(170px, 220px) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-card);
}

.items-runtime-toolbar label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.items-runtime-toolbar label span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.items-runtime-toolbar input,
.items-runtime-toolbar select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--nx-line);
  border-radius: 9px;
  background: #fff;
  color: var(--ds-heading);
  font: inherit;
  font-weight: 500;
  padding: 0 11px;
}

.items-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.items-runtime-toolbar > small {
  grid-column: 1 / -1;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 750;
}

.items-root-list {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.root-item-card,
.nested-assembly-card,
.nested-position-card,
.operation-item-card,
.items-empty-panel {
  min-width: 0;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(16, 48, 72, .06);
}

.root-item-card {
  overflow: hidden;
  border: 1px solid rgba(32, 76, 110, .42);
  border-left: 5px solid var(--ds-primary);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(16, 48, 72, .10), 0 2px 6px rgba(16, 48, 72, .05);
}

.root-item-card.expanded {
  position: relative;
  overflow: visible;
}

.root-item-card.expanded:has(.operation-workers-popover) {
  z-index: 4;
}

.root-item-card.status-u-toku,
.operation-item-card.status-u-toku {
  background: linear-gradient(90deg, rgba(var(--ds-primary-rgb), .045), #fff 22%);
}

.work-order-item-note-control textarea,
.work-order-operation-note-modal textarea {
  min-height: 112px;
  resize: vertical;
}

.work-order-operation-note-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.runtime-internal-operation-modal .int-operation-modal-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.operator-assignment-modal .operator-picker-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  cursor: default;
}

.operator-assignment-modal .operator-picker-row > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.operator-assignment-modal .operator-picker-row > label > span { display: grid; gap: 3px; min-width: 0; }
.operator-assignment-modal .operator-picker-row > label em { color: var(--ds-primary-hover); font-size: 11px; font-style: normal; font-weight: 850; }
.operator-assignment-modal .operator-picker-row.is-selected { border-color: rgba(var(--ds-primary-rgb), .42); background: rgba(var(--ds-primary-rgb), .06); }

.operator-workload-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.operator-workload-sort select { min-height: 36px; border: 1px solid var(--nx-line); border-radius: 9px; padding: 0 32px 0 10px; background: #fff; color: var(--ds-heading); font: inherit; }
.operator-workload-toggle { justify-self: start; border: 0; padding: 0; background: transparent; color: var(--ds-primary-strong); font: inherit; font-size: 11px; font-weight: 850; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.operator-workload-detail { display: grid; gap: 6px; padding-top: 7px; border-top: 1px dashed var(--nx-line); }
.operator-workload-detail article { display: grid; gap: 2px; padding: 7px 8px; border-radius: 8px; background: #f8fbfd; }
.operator-workload-detail strong { color: var(--ds-heading); font-size: 11px; }
.operator-workload-detail span, .operator-workload-detail small { color: var(--ds-muted); font-size: 10.5px; font-weight: 700; }

/* Due-date feasibility MVP: scoped Settings calendar and Work Order advisory presentation. */
.settings-planning-calendar .settings-planning-grid {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(420px, 1.6fr);
  gap: 18px;
  align-items: stretch;
}

.settings-workday-card,
.settings-working-days-card,
.settings-non-working-card {
  border: 1px solid #dce7ef;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff 0%, #f8fbfd 100%);
  box-shadow: 0 10px 26px rgba(20, 55, 78, .06);
}

.settings-workday-card,
.settings-working-days-card {
  padding: 20px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}

.settings-workday-card > svg,
.settings-working-days-card > svg { width: 28px; height: 28px; color: #1c7894; }
.settings-workday-card > span,
.settings-working-days-card > span { display: grid; gap: 4px; }
.settings-workday-card small,
.settings-working-days-card small { color: #708697; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.settings-workday-card strong,
.settings-working-days-card strong { color: #143b55; font-size: 24px; }
.settings-working-days-card strong { font-size: 20px; }
.settings-workday-card em,
.settings-working-days-card em { color: #60798b; font-style: normal; }
.settings-workday-card button,
.settings-working-days-card button { grid-column: 1 / -1; justify-self: start; }

.settings-non-working-card { grid-column: 1 / -1; padding: 18px; }
.settings-non-working-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.settings-non-working-card h3 { margin: 0 0 4px; color: #153d58; }
.settings-non-working-card p { margin: 0; color: #6a8192; }
.settings-non-working-card nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.settings-calendar-list { display: grid; gap: 7px; }
.settings-calendar-row { min-height: 42px; display: grid; grid-template-columns: 66px 1fr 34px; gap: 10px; align-items: center; padding: 7px 8px 7px 11px; border: 1px solid #e2ebf1; border-radius: 11px; background: #fff; }
.settings-calendar-type { color: #27718a; background: #eaf6f8; border-radius: 999px; padding: 4px 8px; text-align: center; font-size: 11px; font-weight: 800; }
.settings-calendar-row strong { color: #274b62; font-size: 13px; }
.settings-calendar-empty { padding: 16px; border: 1px dashed #ccdae3; border-radius: 11px; text-align: center; background: #fbfdfe; }
.settings-calendar-empty.error { color: #a13f3f; }
.settings-calendar-modal-grid .settings-calendar-modal-note { grid-column: 1 / -1; margin: 0; color: #688092; font-size: 12px; }
.settings-working-days-field { min-width: 0; margin: 0; padding: 14px; border: 1px solid #dce7ef; border-radius: 13px; }
.settings-working-days-field legend { padding: 0 6px; color: #264d65; font-weight: 800; }
.settings-working-days-selector { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.settings-working-day-toggle { min-width: 0; min-height: 54px; display: grid; place-items: center; gap: 2px; padding: 7px 4px; border: 1px solid #d7e4ec; border-radius: 10px; background: #fff; color: #60798b; cursor: pointer; }
.settings-working-day-toggle span { font-weight: 800; }
.settings-working-day-toggle small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: 10px; }
.settings-working-day-toggle.active { border-color: #3690a8; background: #eaf7f9; color: #176a82; box-shadow: inset 0 0 0 1px rgba(54, 144, 168, .16); }
.settings-working-days-field > .field-helper { display: block; margin-top: 9px; }

.wo-detail-tab-advisory { display: inline-flex; margin-left: 7px; color: #bc711c; }
.wo-detail-tab-advisory svg { width: 15px; height: 15px; }
.wo-general-field.has-advisory input { border-color: #d99a43; box-shadow: 0 0 0 3px rgba(217, 154, 67, .13); background: #fffdfa; }
.wo-due-date-advisory { grid-column: 1 / -1; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 17px 18px; border-radius: 14px; }
.wo-due-date-advisory > svg { width: 25px; height: 25px; margin-top: 1px; }
.wo-due-date-advisory.warning { border: 1px solid #e4b36b; background: linear-gradient(145deg, #fffaf1 0%, #fffdf8 100%); color: #724917; }
.wo-due-date-advisory.neutral { border: 1px solid #cbdce7; background: linear-gradient(145deg, #f6fafc 0%, #fff 100%); color: #395c72; }
.wo-due-date-advisory h3 { margin: 0 0 7px; color: #173f58; font-size: 16px; }
.wo-due-date-advisory p { margin: 0; line-height: 1.5; }
.wo-due-date-advisory-content { display: grid; gap: 10px; }
.wo-due-date-advisory.compact-partial { padding-block: 14px; }
.wo-due-date-data-quality { display: grid; gap: 5px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .58); }
.wo-due-date-data-quality p { color: inherit; font-size: 13px; }
.wo-due-date-advisory dl { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.wo-due-date-advisory dl div { display: grid; gap: 2px; }
.wo-due-date-advisory dt { color: #7c684c; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.wo-due-date-advisory dd { margin: 0; color: #294b60; font-weight: 800; }
.wo-due-date-calculation { overflow: hidden; border: 1px solid rgba(72, 111, 133, .18); border-radius: 10px; background: rgba(255, 255, 255, .5); }
.wo-due-date-calculation summary { padding: 9px 11px; color: #315c73; font-size: 13px; font-weight: 800; cursor: pointer; }
.wo-due-date-calculation[open] summary { border-bottom: 1px solid rgba(72, 111, 133, .14); }
.wo-due-date-calculation dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 11px; }
.wo-due-date-calculation dt { color: #6b7f8c; }
.wo-due-date-calculation dd { font-size: 13px; }
.wo-due-date-calculation dd:has(.wo-due-date-equivalent-note) { display: grid; gap: 3px; }
.wo-due-date-equivalent-note { max-width: 390px; color: #6b8190; font-size: 11px; font-weight: 500; line-height: 1.35; }
.wo-due-date-competitor-trigger { display: inline; margin: 0; padding: 0; border: 0; border-bottom: 1px dotted currentColor; background: transparent; color: #226f91; font: inherit; font-weight: 850; cursor: pointer; }
.wo-due-date-competitor-trigger:hover { color: #155875; }
.wo-due-date-competitor-trigger:focus-visible { outline: 2px solid rgba(34, 111, 145, .34); outline-offset: 3px; border-radius: 3px; }
.wo-due-date-competitor-popover { position: fixed; z-index: 1200; display: grid; grid-template-rows: auto minmax(0, 1fr); max-width: calc(100vw - 24px); overflow: hidden; border: 1px solid #c4d7e2; border-radius: 14px; background: #fff; box-shadow: 0 18px 46px rgba(17, 55, 78, .24); color: #173f58; }
.wo-due-date-competitor-popover:focus { outline: none; }
.wo-due-date-competitor-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border-bottom: 1px solid #dce7ed; background: linear-gradient(145deg, #f5fafc, #fff); }
.wo-due-date-competitor-popover > header > div { display: grid; min-width: 0; gap: 2px; }
.wo-due-date-competitor-popover > header span { color: #588096; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.wo-due-date-competitor-popover > header strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.wo-due-date-competitor-popover > header button { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #d3e1e8; border-radius: 9px; background: #fff; color: #4d7185; cursor: pointer; }
.wo-due-date-competitor-popover > header button svg { width: 15px; height: 15px; }
.wo-due-date-competitor-popover > ul { min-height: 0; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.wo-due-date-competitor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; }
.wo-due-date-competitor-row + .wo-due-date-competitor-row { border-top: 1px solid #edf2f5; }
.wo-due-date-competitor-row:hover { background: #f6fafc; }
.wo-due-date-competitor-copy { display: grid; min-width: 0; gap: 2px; }
.wo-due-date-competitor-copy strong,
.wo-due-date-competitor-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-due-date-competitor-copy strong { color: #173f58; font-size: 13px; }
.wo-due-date-competitor-copy small { color: #6b8190; font-size: 11px; }
.wo-due-date-competitor-copy em { width: max-content; margin-top: 2px; padding: 2px 6px; border-radius: 999px; background: #fff3dc; color: #8a5a19; font-size: 9px; font-style: normal; font-weight: 800; }
.wo-due-date-competitor-row > b { color: #315c73; font-size: 12px; white-space: nowrap; }
.wo-due-date-partial-order + .wo-due-date-partial-order { border-top: 1px solid #edf2f5; }
.wo-due-date-partial-order details { border-radius: 9px; }
.wo-due-date-partial-order details[open] { background: #f8fbfc; }
.wo-due-date-partial-order summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; cursor: pointer; list-style: none; }
.wo-due-date-partial-order summary::-webkit-details-marker { display: none; }
.wo-due-date-partial-order summary:hover { background: #f6fafc; }
.wo-due-date-partial-meta { display: grid; justify-items: end; gap: 2px; text-align: right; }
.wo-due-date-partial-meta b { color: #315c73; font-size: 12px; white-space: nowrap; }
.wo-due-date-partial-meta small { color: #8a5a19; font-size: 10px; font-weight: 750; }
.wo-due-date-missing-list { display: grid; gap: 5px; margin: 0 8px 8px; padding: 8px; border: 1px solid #e5edf1; border-radius: 9px; background: #fff; list-style: none; }
.wo-due-date-missing-list li { display: grid; min-width: 0; gap: 2px; padding: 5px 6px; }
.wo-due-date-missing-list li + li { border-top: 1px solid #edf2f5; }
.wo-due-date-missing-list strong,
.wo-due-date-missing-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-due-date-missing-list strong { color: #173f58; font-size: 12px; }
.wo-due-date-missing-list small { color: #6b8190; font-size: 10px; }
.wo-due-date-missing-list em { color: #8a5a19; font-size: 10px; font-style: normal; font-weight: 750; }
.wo-due-date-priority-impact { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .58); font-weight: 700; }
.wo-due-date-priority-note { color: #75674f; font-size: 13px; }
.wo-due-date-worker-context { display: flex; align-items: flex-start; gap: 8px; color: #355c73; }
.wo-due-date-worker-context > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.wo-due-date-worker-context span { display: grid; gap: 2px; }
.wo-due-date-worker-context small { color: #6b8190; font-weight: 400; }
.wo-due-date-disclaimer { padding-top: 9px; border-top: 1px solid rgba(150, 111, 54, .18); color: #75674f; font-size: 12px; }
.wo-due-date-actions { display: flex; flex-wrap: wrap; gap: 9px; }

@media (max-width: 980px) {
  .settings-planning-calendar .settings-planning-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .settings-non-working-card > header { display: grid; }
  .settings-non-working-card nav { justify-content: flex-start; }
  .settings-calendar-row { grid-template-columns: 62px 1fr 34px; }
  .wo-due-date-advisory { grid-template-columns: 1fr; padding: 15px; }
  .wo-due-date-actions { display: grid; }
  .wo-due-date-calculation dl { grid-template-columns: 1fr; }
  .wo-due-date-competitor-popover.is-mobile { border-radius: 15px; box-shadow: 0 20px 52px rgba(17, 55, 78, .3); }
  .wo-due-date-partial-order summary { grid-template-columns: 1fr; }
  .wo-due-date-partial-meta { justify-items: start; text-align: left; }
  .settings-working-days-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .operator-workload-sort { align-items: stretch; flex-direction: column; }
  .operator-workload-sort select { width: 100%; }
}

.runtime-internal-operation-modal #int-op-description {
  min-height: 86px;
  padding: 12px 14px;
  font-size: 17px;
  font-weight: 520;
  line-height: 1.5;
  resize: vertical;
}

.runtime-internal-operation-modal .int-operation-plan-workers-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.runtime-internal-operation-modal .int-worker-picker-field { position: relative; }

.runtime-internal-operation-modal .int-worker-picker-trigger {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  border: 1px solid #d6dee3;
  border-radius: 10px;
  padding: 0 16px;
  color: var(--ds-sidebar);
  background: var(--ds-card);
  font-size: 15px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.runtime-internal-operation-modal .int-worker-picker-trigger:hover,
.runtime-internal-operation-modal .int-worker-picker-trigger:focus-visible,
.runtime-internal-operation-modal .int-worker-picker-trigger[aria-expanded="true"] {
  border-color: rgba(var(--ds-primary-rgb), .52);
  box-shadow: 0 0 0 4px rgba(var(--ds-primary-border-rgb), .11);
  outline: 0;
}

.runtime-internal-operation-modal .int-worker-picker-trigger svg { width: 18px; height: 18px; }

.int-worker-picker-popup {
  position: absolute;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  width: auto;
  max-width: calc(100vw - 24px);
  max-height: min(420px, 45vh);
  padding: 12px;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--ds-primary-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(var(--ds-sidebar-rgb), .20);
}

.int-worker-picker-popup .manual-worker-search {
  display: grid;
  gap: 5px;
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-weight: 800;
}

.int-worker-picker-popup .manual-worker-search input {
  min-height: 42px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 9px;
  padding: 0 12px;
  font-size: 14px;
}

.int-worker-picker-popup .int-operation-operator-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  gap: 6px;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.int-worker-picker-popup .int-worker-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  background: #fff;
}

.int-worker-picker-popup .int-worker-choice[hidden] { display: none; }

.int-worker-picker-popup .int-worker-choice > label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  cursor: pointer;
}

.int-worker-picker-popup .int-worker-choice:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.int-worker-picker-popup .int-worker-choice input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ds-primary);
}

.int-worker-picker-popup .int-worker-choice strong,
.int-worker-picker-popup .int-worker-choice small { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.int-worker-picker-popup .int-worker-choice > label > span { display: grid; gap: 3px; min-width: 0; }
.int-worker-picker-popup .int-worker-choice strong { flex: 0 1 auto; color: var(--ds-heading); font-size: 13px; }
.int-worker-picker-popup .int-worker-choice small { flex: 1 1 auto; margin-top: 0; color: var(--ds-muted); font-size: 11px; line-height: 1.35; }
.int-worker-picker-popup .int-worker-choice > .int-operator-assignments-toggle { grid-column: 1; grid-row: 2; justify-self: start; min-width: 0; max-width: calc(100% - 42px); margin: 0 8px 8px 34px; white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: 11px; }
.int-worker-picker-popup .int-worker-choice > .int-operator-assignments-list { grid-column: 1 / -1; grid-row: 3; min-width: 0; margin: 0 8px 8px 34px; }

/* Internal creation/editing uses the same bounded frame and worker identity
   treatment as production assignment, without changing selection ownership. */
.runtime-internal-operation-modal #int-op-description { font-size: 13px; min-height: 72px; }
.runtime-internal-operation-modal .nx-modal-head .flow-modal-title h2 { padding-right: 0; }
.runtime-internal-operation-modal .int-worker-picker-trigger { font-size: 13px; font-weight: 650; }
.runtime-internal-operation-modal .manual-worker-chip { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.runtime-internal-operation-modal .manual-worker-chip button { flex: 0 0 20px; }
.operator-assignment-modal .operator-picker-row strong,
.operator-assignment-modal .operator-picker-row small { white-space: normal; overflow-wrap: anywhere; }

.runtime-internal-operation-modal .int-selected-workers-block {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--ds-primary-rgb), .18);
  border-radius: 11px;
  background: rgba(var(--ds-primary-rgb), .045);
}

.runtime-internal-operation-modal .int-selected-workers-block > strong { color: var(--ds-primary-hover); font-size: 12px; }
.runtime-internal-operation-modal .manual-worker-selected { display: flex; flex-wrap: wrap; gap: 7px; }

.runtime-internal-operation-modal .manual-worker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  padding: 6px 8px 6px 10px;
  color: var(--ds-primary-hover);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.runtime-internal-operation-modal .manual-worker-chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: var(--ds-danger);
  background: transparent;
  cursor: pointer;
}

.runtime-internal-operation-modal .manual-worker-chip svg { width: 13px; height: 13px; }
.runtime-internal-operation-modal .manual-worker-empty { color: var(--ds-muted); font-size: 12px; }

@media (max-width: 960px) {
  .runtime-internal-operation-modal .int-operation-plan-workers-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .int-worker-picker-popup {
    width: auto;
    max-height: min(360px, 48vh);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(var(--ds-sidebar-rgb), .12);
  }

  .runtime-internal-operation-modal .manual-worker-selected { display: grid; grid-template-columns: 1fr; }
  .runtime-internal-operation-modal .manual-worker-chip { justify-content: space-between; border-radius: 10px; }
}

/* Micro-polish §5 — scoped compact density for the shared operator-picker-row/-list, matching
   the density technique already used by .manual-work-entry-modal .manual-worker-choice
   elsewhere. Only applied inside the INT operation modal; .operator-picker-row's global size and
   behavior (assign-operators modal, finish picker) is unchanged. */
.runtime-internal-operation-modal .operator-picker-row {
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 40px;
  padding: 6px 9px;
}

.runtime-internal-operation-modal .operator-picker-row input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.runtime-internal-operation-modal .operator-picker-row strong {
  font-size: 12px;
}

.runtime-internal-operation-modal .operator-picker-row small {
  font-size: 10.5px;
}

/* §6 — active-assignment detail: visibility-only expansion, inline (not absolutely positioned,
   so it stays correct inside the modal's own scrolling body), one open at a time via
   state.intOperatorAssignmentsPopoverId — same toggle-driven interaction as the accepted
   operation-workers popover elsewhere, adapted for a scrolling container. */
.int-operator-assignments-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ds-primary-strong);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.int-operator-assignments-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px dashed var(--nx-line);
}

.int-operator-assignment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.int-operator-assignment-code {
  color: var(--ds-heading);
  font-size: 11px;
  font-weight: 850;
}

.int-operator-assignment-name {
  flex-basis: 100%;
  color: var(--ds-muted);
  font-size: 10.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.work-order-operation-note-body {
  flex: 0 1 auto;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
}

.work-order-operation-note-field {
  display: grid;
  gap: 9px;
  margin: 0;
}

.work-order-operation-note-field > span {
  color: var(--ds-primary-strong);
  font-size: .78rem;
  font-weight: 800;
}

.work-order-operation-note-modal .work-order-operation-note-field textarea {
  width: 100%;
  min-height: 132px;
  max-height: 260px;
  box-sizing: border-box;
  padding: 12px 14px;
  line-height: 1.5;
}

.work-order-operation-note-field small {
  display: block;
  margin: 0;
  padding: 0 2px;
  color: var(--ds-text-muted);
  line-height: 1.45;
}

.work-order-operation-note-footer {
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 14px 20px;
}

.work-order-operation-note-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.work-order-operation-note-actions button {
  min-height: 42px;
  white-space: nowrap;
}

.operation-note-action {
  min-height: 44px;
}

.operation-item-card.status-pauzirano {
  border-left: 4px solid var(--ds-warning);
}

.operation-item-card.status-zavrseno {
  border-left: 4px solid var(--ds-success);
}

.work-item-deep-link-highlight {
  animation: work-item-deep-link-pulse 1.8s ease-out 1;
  outline: 3px solid rgba(var(--ds-primary-rgb), .34);
  outline-offset: 2px;
}

@keyframes work-item-deep-link-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--ds-primary-rgb), .28);
  }
  65% {
    box-shadow: 0 0 0 12px rgba(var(--ds-primary-rgb), 0);
  }
  100% {
    box-shadow: none;
  }
}

.root-item-header,
.nested-item-header,
.position-item-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.root-item-header {
  grid-template-columns: minmax(0, 1fr);
}

.root-item-toggle,
.nested-item-header,
.position-item-header {
  min-width: 0;
}

.root-item-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ds-heading);
  text-align: left;
  cursor: pointer;
}

.root-item-toggle.root-item-static {
  grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: default;
}

.root-card-ordinal {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid rgba(var(--ds-primary-rgb), .26);
  border-radius: 10px;
  background: var(--ds-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
}

.item-pictogram {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--ds-primary-rgb), .09);
  color: var(--ds-primary);
}

.item-pictogram.assembly {
  background: var(--ds-info-bg);
  color: var(--ds-info);
}

.item-pictogram.position {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.item-pictogram.operation {
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
}

.item-pictogram svg,
.items-summary-chip svg,
.operation-info svg {
  width: 17px;
  height: 17px;
}

.root-identity,
.nested-identity,
.operation-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.root-identity small,
.nested-identity small,
.operation-identity small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.root-identity > small {
  font-weight: 500;
  text-transform: none;
}

.root-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  color: var(--ds-heading);
  font-size: 17px;
  line-height: 1.2;
}

.root-title-line .root-item-code {
  color: inherit;
  font-size: inherit;
  font-weight: 800;
}

.root-title-line .root-item-name {
  min-width: 0;
  color: inherit;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.root-identity strong,
.nested-identity strong,
.operation-identity strong {
  min-width: 0;
  color: var(--ds-heading);
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: normal;
}

.root-identity em,
.nested-identity em,
.operation-identity em {
  min-width: 0;
  color: var(--ds-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.root-structure-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 0;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.root-structure-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.root-signals,
.nested-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.items-percent,
.doc-chip,
.problem-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff;
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.problem-chip {
  border-color: rgba(220, 38, 38, .2);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.doc-chip {
  background: var(--ds-bg);
  color: var(--ds-primary-hover);
}

.accordion-chevron {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-muted);
  transition: rotate .16s ease;
}

.accordion-chevron:hover { background: var(--ds-bg); color: var(--ds-heading); }

.root-item-card.expanded .accordion-chevron {
  rotate: 180deg;
}

.root-card-actions,
.nested-actions,
.operation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.root-card-actions {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--nx-line);
}

.root-card-primary-actions,
.root-card-utility-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.root-card-utility-actions {
  margin-left: auto;
}

.operation-primary-action,
.operation-secondary-action,
.operation-problem-action,
.operation-edit-action,
.operation-review-action,
.mini-status-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 9px;
  padding: 0 11px;
  font-weight: 850;
  white-space: nowrap;
}

.operation-primary-action,
.mini-status-action.start {
  border: 1px solid var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
}

.operation-secondary-action,
.operation-edit-action,
.operation-review-action,
.mini-status-action.pause {
  border: 1px solid rgba(var(--ds-primary-rgb), .24);
  background: var(--ds-bg);
  color: var(--ds-primary-hover);
}

.root-card-actions .root-icon-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
}

.root-card-actions .root-icon-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.operation-problem-action {
  border: 1px solid rgba(217, 119, 6, .28);
  background: var(--ds-warning-bg);
  color: #8a5c00;
}

.operation-problem-action.open {
  border-color: rgba(220, 38, 38, .26);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.root-delete-action {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(220, 38, 38, .32);
  border-radius: 9px;
  background: #fff7f7;
  color: var(--ds-danger);
}

.root-delete-action.disabled {
  opacity: .42;
  cursor: not-allowed;
}

.root-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

.items-summary-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 7px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: #f8fbfd;
  color: var(--ds-heading);
}

.items-summary-chip svg {
  grid-row: span 2;
  color: var(--ds-primary);
}

.items-summary-chip small {
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.items-summary-chip strong {
  font-size: 12px;
  font-weight: 900;
}

.root-progress-stack {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}

.root-progress-stack .operation-time-deviation {
  grid-column: auto;
  max-width: 100%;
  text-align: center;
}

.stock-fulfilled-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #b9d8c7;
  border-radius: 999px;
  background: #eef9f3;
  color: #176b3a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.stock-fulfilled-chip svg { width: 15px; height: 15px; }

.root-worker-action,
.root-worker-readout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  max-width: 100%;
  border: 1px solid var(--ds-primary-border);
  border-radius: 9px;
  background: #f8fbfe;
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.root-worker-action svg,
.root-worker-readout svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.root-worker-action span,
.root-worker-readout span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-worker-action.is-unassigned {
  border-color: rgba(217, 119, 6, .35);
  background: var(--ds-warning-bg);
  color: #8a5c00;
}

.root-item-body,
.nested-items {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 12px 12px;
}

.root-item-card.expanded .root-card-actions {
  border-bottom: 1px solid rgba(var(--ds-primary-rgb), .20);
}

.root-item-card.expanded .root-item-body {
  padding-top: 14px;
  background: linear-gradient(180deg, rgba(var(--ds-primary-rgb), .025), transparent 72px);
}

.nested-items.level-2,
.nested-items.level-3 {
  padding-left: 18px;
  border-left: 2px solid rgba(var(--ds-primary-rgb), .13);
}

.nested-assembly-card {
  background: linear-gradient(180deg, #f8fbfd, #fff);
}

.nested-position-card {
  background: #fff;
}

.nested-item-header,
.position-item-header {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}

.nested-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--nx-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-primary);
}

.nested-toggle.spacer {
  border-color: transparent;
  background: transparent;
}

.nested-assembly-card.expanded .nested-toggle svg,
.nested-position-card.expanded .nested-toggle svg {
  rotate: 180deg;
}

.operation-item-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(260px, 1.3fr) minmax(120px, .5fr) minmax(220px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  overflow: visible;
}

.operation-state-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ds-primary);
}

.operation-item-card.status-zavrseno .operation-state-rail {
  background: var(--ds-success);
}

.operation-item-card.status-pauzirano .operation-state-rail,
.operation-item-card.status-zavrseno-privremeno .operation-state-rail {
  background: var(--ds-warning);
}

.operation-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.operation-main .overview-status {
  grid-column: 2;
  width: fit-content;
}

.operation-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.operation-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 7px;
  min-width: 0;
}

.operation-info svg {
  grid-row: span 2;
  color: var(--ds-primary);
}

.operation-info small {
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.operation-info strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.operation-workers-info {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
}

.operation-workers-info:has(.operation-workers-popover) {
  z-index: 12;
}

.operation-workers-content {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.operation-workers-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.operation-worker-readout {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ds-heading);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.operation-worker-readout strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-worker-readout:hover strong,
.operation-worker-readout:focus-visible strong {
  color: var(--ds-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.operation-workers-info .operation-worker-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-primary-strong);
  font-size: 11px;
  font-weight: 800;
  padding: 0 8px;
  white-space: nowrap;
}

.operation-workers-info .operation-worker-edit svg {
  grid-row: auto;
  width: 14px;
  height: 14px;
}

.operation-workers-info .operation-worker-edit:hover,
.operation-workers-info .operation-worker-edit:focus-visible {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.operation-workers-popover {
  position: absolute;
  z-index: 24;
  top: calc(100% + 8px);
  left: 22px;
  display: grid;
  gap: 0;
  width: min(280px, calc(100vw - 48px));
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15, 50, 85, .16);
  padding: 10px;
}

.operation-workers-popover section + section {
  margin-top: 10px;
  border-top: 1px solid var(--nx-line);
  padding-top: 10px;
}

.operation-workers-popover small {
  display: block;
  margin-bottom: 6px;
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.operation-workers-popover ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.operation-workers-popover li {
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.operation-workers-popover li.muted {
  color: var(--ds-muted);
  font-weight: 750;
}

.operation-time-deviation {
  grid-column: 2;
  width: fit-content;
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.operation-time-deviation.over {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.operation-time-deviation.behind {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.operation-time-deviation.under {
  background: var(--ds-success-bg);
  color: var(--ds-success);
}

.operation-time-deviation.ahead {
  background: var(--ds-success-bg);
  color: var(--ds-success);
}

.operation-time-deviation.neutral {
  background: var(--ds-bg);
}

.operation-progress-block {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ds-heading);
  font-weight: 900;
}

.operation-progress-block i {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #e7ece9;
  overflow: hidden;
}

.operation-progress-block b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-primary);
}

.operation-progress-block small {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 750;
}

.operation-actions {
  justify-content: stretch;
}

.operation-actions > * {
  flex: 1 1 auto;
}

.items-empty-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
}

.items-empty-panel h2,
.items-empty-panel p {
  margin: 0;
}

.items-empty-nested {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: var(--ds-muted);
  font-weight: 750;
}

@media (max-width: 1180px) {
  .items-runtime-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 170px) minmax(150px, 190px);
  }

  .items-toolbar-actions {
    grid-column: 1 / -1;
  }

  .operation-item-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .operation-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .items-runtime-toolbar,
  .root-item-header,
  .nested-item-header,
  .position-item-header,
  .operation-context {
    grid-template-columns: 1fr;
  }

  .items-toolbar-actions,
  .nested-actions,
  .operation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .root-item-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "ordinal identity chevron"
      "signals signals signals";
    align-items: start;
  }

  .root-card-ordinal {
    grid-area: ordinal;
  }

  .root-identity {
    grid-area: identity;
  }

  .root-signals {
    grid-area: signals;
    justify-content: flex-start;
    padding-top: 8px;
  }

  .root-signals,
  .nested-signals {
    justify-content: flex-start;
  }

  .accordion-chevron {
    grid-area: chevron;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .root-summary-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .root-card-primary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-card-primary-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
  }

  .root-card-utility-actions {
    justify-content: flex-end;
    margin-left: 0;
  }

  .root-card-utility-actions .root-icon-action,
  .root-card-utility-actions .root-delete-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .nested-items.level-2,
  .nested-items.level-3 {
    padding-left: 8px;
  }

  .operation-primary-action,
  .operation-secondary-action,
  .operation-problem-action,
  .operation-edit-action,
  .operation-review-action,
  .mini-status-action {
    min-height: 44px;
    white-space: normal;
  }

  .operation-info strong {
    white-space: normal;
  }

  .operation-workers-popover {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 8px;
  }
}

@container items-runtime (min-width: 761px) and (max-width: 1080px) {
  .items-runtime-toolbar {
    grid-template-columns: minmax(280px, 1fr) minmax(150px, 180px) minmax(170px, 220px);
    align-items: end;
  }

  .items-runtime-toolbar > small {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .items-toolbar-actions {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-content: flex-end;
    width: auto;
  }

  .items-toolbar-actions .compact-command,
  .items-toolbar-actions .compact-command span {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .root-item-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .root-item-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "ordinal identity chevron"
      "signals signals signals";
    align-items: start;
  }

  .root-card-ordinal {
    grid-area: ordinal;
  }

  .root-identity {
    grid-area: identity;
  }

  .root-signals {
    grid-area: signals;
    justify-content: flex-start;
    padding-top: 8px;
  }

  .accordion-chevron {
    grid-area: chevron;
    align-self: center;
  }

  .root-card-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .root-card-actions .operation-problem-action,
  .root-card-actions .operation-edit-action,
  .root-card-actions .operation-review-action {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .root-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .items-summary-chip {
    min-width: 0;
  }

  .nested-item-header,
  .position-item-header {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "toggle pictogram identity"
      ". signals signals"
      ". actions actions";
    align-items: start;
  }

  .nested-toggle {
    grid-area: toggle;
  }

  .nested-item-header .item-pictogram,
  .position-item-header .item-pictogram {
    grid-area: pictogram;
  }

  .nested-identity {
    grid-area: identity;
  }

  .nested-signals {
    grid-area: signals;
    justify-content: flex-start;
  }

  .nested-actions {
    grid-area: actions;
    justify-content: flex-start;
  }

  .operation-item-card {
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas:
      "main progress"
      "context context"
      "actions actions";
    align-items: start;
    gap: 10px 14px;
  }

  .operation-main {
    grid-area: main;
  }

  .operation-context {
    grid-area: context;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-progress-block {
    grid-area: progress;
    justify-self: end;
    justify-items: center;
  }

  .operation-actions {
    grid-area: actions;
    justify-content: flex-start;
    width: 100%;
  }

  .operation-actions > * {
    flex: 0 0 auto;
  }

  .operation-primary-action,
  .operation-secondary-action,
  .operation-problem-action,
  .operation-edit-action,
  .operation-review-action,
  .mini-status-action {
    min-height: 40px;
    white-space: nowrap;
  }

  .operation-identity strong,
  .operation-identity em,
  .operation-info strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* Work-order operations use the same quiet hierarchy as their parent item. */
.work-order-operation-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main status"
    "actions status";
  gap: 15px 22px;
  border: 1px solid #c8d8e7;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(16, 48, 72, .04);
  padding: 17px 18px 16px 19px;
}
.work-order-operation-card .operation-state-rail { width: 3px; background: #87abc6; }
.work-order-operation-card.status-zavrseno .operation-state-rail { background: #70ac91; }

/* Calm item borders, with actions on the left and summary on the right. */
.work-order-items-runtime .items-root-list { gap: 12px; }
.work-order-items-runtime .root-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid #c6d8e8;
  border-left: 3px solid #7da5c4;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(16, 48, 72, .045);
}
.work-order-items-runtime .root-item-header { grid-column: 1 / -1; padding: 11px 13px 5px; }
.work-order-items-runtime .root-summary-strip { grid-column: 2; align-self: center; justify-content: flex-end; gap: 6px; padding: 5px 13px 11px 0; }
.work-order-items-runtime .items-summary-chip { min-height: 36px; padding: 4px 7px; }
.work-order-items-runtime .root-card-actions { grid-column: 1; align-self: center; border-top: 0; padding: 5px 10px 11px 13px; }
.work-order-items-runtime .root-card-primary-actions,
.work-order-items-runtime .root-card-utility-actions { gap: 6px; }
.work-order-items-runtime .root-card-primary-actions :is(.root-worker-action, .operation-primary-action, .operation-problem-action) { padding-inline: 9px; }
.work-order-items-runtime .root-item-body { grid-column: 1 / -1; }
.work-order-items-runtime .root-item-card.expanded .root-card-actions { border-bottom: 0; }
.work-order-items-runtime .root-item-card.expanded .root-item-body { border-top: 1px solid rgba(var(--ds-primary-rgb), .22); padding-top: 10px; }
@container items-runtime (min-width: 821px) {
  .work-order-items-runtime .root-item-toggle { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ordinal identity signals chevron"; align-items: center; }
  .work-order-items-runtime .root-item-toggle.root-item-static { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ordinal identity signals"; }
  .work-order-items-runtime .root-signals { grid-area: signals; justify-content: flex-end; padding-top: 0; }
  .work-order-items-runtime .accordion-chevron { grid-area: chevron; grid-column: auto; grid-row: auto; }
  .work-order-items-runtime .root-summary-strip { display: flex; flex-wrap: wrap; }
}
@container items-runtime (max-width: 1080px) {
  .work-order-items-runtime .root-item-card { grid-template-columns: minmax(0, 1fr); }
  .work-order-items-runtime .root-summary-strip,
  .work-order-items-runtime .root-card-actions { grid-column: 1; }
  .work-order-items-runtime .root-summary-strip { justify-content: flex-start; padding: 4px 13px 11px; }
  .work-order-items-runtime .root-card-actions { border-top: 1px solid var(--nx-line); padding: 9px 13px 5px; }
}

.work-order-operation-card .operation-main { grid-area: main; }
.work-order-operation-card .operation-status { grid-area: status; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; }
.work-order-operation-card .operation-status-top { display: flex; align-items: center; justify-content: flex-end; gap: 13px; }
.work-order-operation-card .operation-utility-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.work-order-operation-card .operation-progress-block {
  justify-items: center;
  flex: 0 0 auto;
}
.work-order-operation-card .operation-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}
.work-order-operation-card .operation-actions > * { flex: 0 0 auto; }
.work-order-operation-card .operation-utility-actions :is(.operation-note-action, .operation-review-action) {
  width: 36px;
  min-width: 36px;
  padding: 0;
}
.work-order-operation-card .operation-utility-actions :is(.operation-note-action, .operation-review-action) span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.operation-sequence {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
}
.work-order-operation-card .operation-identity strong { font-size: 15px; }
.work-order-operation-card .operation-identity em {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-weight: 400;
}
.operation-timing {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}
.operation-compact-metric {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--ds-heading);
  font-size: 11px;
}
.operation-compact-metric small { color: var(--ds-muted); font-size: inherit; }
.operation-compact-metric strong { font-size: inherit; font-weight: 850; }
.operation-compact-metric .operation-time-deviation { grid-column: auto; }
.operation-active-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--ds-success) 35%, var(--ds-border));
  border-radius: 999px;
  background: var(--ds-success-bg);
  color: var(--ds-success);
  font-size: 11px;
  line-height: 1.25;
}
.operation-active-timer svg { width: 12px; height: 12px; flex: 0 0 auto; }
.operation-active-timer small { color: inherit; font-size: inherit; }
.operation-active-timer strong { font-size: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.operation-timing .operation-machine-summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.operation-timing .operation-machine-summary svg { width: 13px; height: 13px; }
.operation-timing .operation-machine-summary small,
.operation-timing .operation-machine-summary strong { font-size: 11px; }

@container items-runtime (max-width: 1080px) {
  .work-order-operation-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "actions actions";
    align-items: start;
  }
  .work-order-operation-card .operation-actions { justify-content: flex-start; }
}

@container items-runtime (max-width: 650px) {
  .work-order-operation-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "status" "actions"; }
  .work-order-operation-card .operation-status { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
  .work-order-operation-card .operation-status-top { justify-content: flex-start; }
  .work-order-operation-card .operation-timing { justify-items: start; }
  .work-order-operation-card .operation-actions { width: 100%; }
  .work-order-operation-card .operation-actions .operation-primary-action,
  .work-order-operation-card .operation-actions .operation-problem-action { flex: 1 1 auto; }
  .root-card-primary-actions .root-worker-action,
  .root-card-primary-actions .root-worker-readout { min-height: 44px; }
}

.line-detail-modal {
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
}

.line-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
  padding: 26px 72px 20px 28px;
  border-bottom: 1px solid var(--nx-line);
}

.line-detail-header > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.line-detail-header h2,
.line-detail-header p {
  margin: 0;
}

.line-detail-header p {
  color: var(--ds-muted);
  font-weight: 750;
}

.line-detail-tabs {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 14px 28px 0;
  background: var(--nx-card);
}

.line-detail-tabs button {
  min-height: 42px;
  border: 1px solid var(--nx-line);
  border-bottom-color: transparent;
  border-radius: 12px 12px 0 0;
  background: var(--ds-bg);
  padding: 0 18px;
  color: var(--ds-muted);
  font-weight: 850;
}

.line-detail-tabs button.active {
  background: #fff;
  color: var(--ds-heading);
}

.line-detail-body {
  display: grid;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 22px 28px 28px;
  background: #fff;
}

.line-detail-card {
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, .92);
}

.line-detail-card h3 {
  margin: 0 0 14px;
}

.line-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.line-detail-grid div {
  min-width: 0;
  border-radius: 12px;
  background: var(--ds-bg);
  padding: 12px;
}

.line-detail-grid dt {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 850;
}

.line-detail-grid dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.line-document-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.line-document-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--nx-line);
  border-radius: 12px;
  background: var(--ds-bg);
  padding: 12px;
  text-align: left;
}

.line-document-card svg {
  flex: 0 0 auto;
  color: var(--nx-green);
}

.line-document-card strong,
.line-document-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-document-card small {
  color: var(--ds-muted);
}

.line-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 150px;
  border: 1px dashed var(--nx-line);
  border-radius: 14px;
  background: var(--ds-bg);
  color: var(--ds-muted);
  text-align: center;
}

.line-empty-state strong {
  color: var(--ds-heading);
}

.line-empty-state span {
  max-width: 520px;
}

.line-activity-table {
  overflow: auto;
  border: 1px solid var(--nx-line);
  border-radius: 14px;
}

.line-assignment-history-list { display: grid; border: 1px solid var(--nx-line); border-radius: 12px; overflow: hidden; }
.line-assignment-history-list > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(120px, auto) minmax(130px, auto); align-items: center; gap: 12px; padding: 10px 12px; background: #fff; }
.line-assignment-history-list > div + div { border-top: 1px solid var(--nx-line); }
.line-assignment-history-list time, .line-assignment-history-list small { color: var(--ds-muted); font-size: 12px; }
.line-assignment-history-list strong { color: var(--ds-heading); font-size: 13px; }
.line-assignment-history-list span { font-size: 13px; }
@media (max-width: 720px) { .line-assignment-history-list > div { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .line-assignment-history-list strong { grid-column: 1; grid-row: 1; } .line-assignment-history-list time { grid-column: 2; grid-row: 1; text-align: right; } .line-assignment-history-list span { grid-column: 1; } .line-assignment-history-list small { grid-column: 1 / -1; } }

.line-activity-table table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.line-activity-table th,
.line-activity-table td {
  border-bottom: 1px solid var(--nx-line);
  text-align: left;
  vertical-align: top;
}

.line-activity-row {
  cursor: pointer;
}

.line-activity-row:hover {
  background: rgba(var(--ds-primary-rgb), .05);
}

.line-activity-row small {
  display: block;
  margin-top: 3px;
  color: var(--ds-muted);
  font-weight: 700;
}

.line-photo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid rgba(var(--ds-primary-rgb), .25);
  border-radius: 999px;
  background: var(--ds-success-bg);
  padding: 0 11px;
  color: var(--ds-primary-hover);
  font-weight: 850;
}

.line-no-photo {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
}

.activity-entry-preview {
  display: grid;
  gap: 16px;
}

.activity-entry-preview dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.activity-entry-preview dl div {
  border-radius: 12px;
  background: var(--ds-bg);
  padding: 12px;
}

.activity-entry-preview dt {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 850;
}

.activity-entry-preview dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.activity-photo-preview {
  margin: 0;
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  background: var(--ds-bg);
  padding: 12px;
}

.activity-photo-preview img {
  display: block;
  width: 100%;
  max-height: 58vh;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

.activity-photo-preview figcaption {
  margin-top: 8px;
  color: var(--ds-muted);
  font-weight: 800;
}

@media (max-width: 820px) {
  .line-detail-modal {
    width: min(100vw - 20px, 100%);
  }

  .line-detail-header,
  .line-detail-tabs,
  .line-detail-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .line-detail-grid,
  .line-document-list,
  .activity-entry-preview dl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .runtime-line-detail-modal {
    width: min(100vw - 48px, 100%);
    max-width: calc(100vw - 48px);
    max-height: calc(100dvh - 16px);
  }

  .runtime-line-detail-modal .line-detail-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 14px 12px 10px;
  }

  .runtime-line-detail-modal .line-detail-header .flow-modal-title {
    min-width: 0;
  }

  .runtime-line-detail-modal .line-detail-header .flow-modal-title h2 {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }

  .runtime-line-detail-modal .line-detail-header .flow-modal-title p {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .runtime-line-detail-modal .line-detail-header .status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .runtime-line-detail-modal .line-detail-header .flow-close-button {
    grid-column: 3;
    grid-row: 1;
  }

  .runtime-line-detail-modal .line-detail-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 12px;
  }

  .runtime-line-detail-modal .line-detail-tabs button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .runtime-line-detail-modal .line-detail-body {
    overflow-x: hidden;
    padding: 12px;
  }

  .runtime-line-detail-modal .line-detail-card {
    padding: 14px;
  }

  .runtime-line-detail-modal .line-activity-table {
    overflow: visible;
  }

  .runtime-line-detail-modal .line-activity-table table,
  .runtime-line-detail-modal .line-activity-table thead,
  .runtime-line-detail-modal .line-activity-table tbody,
  .runtime-line-detail-modal .line-activity-table tr,
  .runtime-line-detail-modal .line-activity-table th,
  .runtime-line-detail-modal .line-activity-table td {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .runtime-line-detail-modal .line-activity-table table {
    min-width: 0;
  }

  .runtime-line-detail-modal .line-activity-table thead {
    display: none;
  }

  .runtime-line-detail-modal .line-activity-table tr {
    border-bottom: 1px solid var(--nx-line);
    padding: 10px 12px;
  }

  .runtime-line-detail-modal .line-activity-table tr:last-child {
    border-bottom: 0;
  }

  .runtime-line-detail-modal .line-activity-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    border-bottom: 0;
    padding: 4px 0;
    overflow-wrap: anywhere;
  }

  .runtime-line-detail-modal .line-activity-table td::before {
    color: var(--ds-muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
  }

  .runtime-line-detail-modal .line-activity-table td:nth-child(1)::before {
    content: "Vreme";
  }

  .runtime-line-detail-modal .line-activity-table td:nth-child(2)::before {
    content: "Akcija";
  }

  .runtime-line-detail-modal .line-activity-table td:nth-child(3)::before {
    content: "Evidentirao";
  }

  .runtime-line-detail-modal .line-activity-table td:nth-child(4)::before {
    content: "Radio";
  }

  .runtime-line-detail-modal .line-activity-table td:nth-child(5)::before {
    content: "Urađeno";
  }

  .runtime-line-detail-modal .line-activity-table td:nth-child(6)::before {
    content: "Škart";
  }

  .runtime-line-detail-modal .line-activity-table td:nth-child(7)::before {
    content: "Prilozi";
  }
}

.item-delete-icon:hover {
  border-color: rgba(220, 38, 38, .52);
  background: var(--ds-danger-bg);
}

.report-problem-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 42px);
  overflow: auto;
  padding: 26px;
}

.report-problem-modal.worker-problem-sheet {
  width: min(720px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  padding: 22px;
  overscroll-behavior: contain;
}

.report-problem-modal h2 {
  margin: 0 0 22px;
  font-size: 22px;
}

.problem-context-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-bottom: 22px;
  border: 1px solid rgba(var(--ds-primary-rgb), .14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--ds-primary-rgb), .05), rgba(var(--ds-primary-rgb), .025));
  padding: 18px;
}

.problem-context-card div {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.problem-context-card svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--nx-green);
}

.problem-context-card small,
.problem-context-card strong {
  display: block;
}

.problem-context-card small {
  color: var(--muted);
  font-size: 12px;
}

.problem-context-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.problem-choice-section {
  margin-bottom: 18px;
}

.problem-choice-section h3,
.problem-attachments-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.problem-choice-section b,
.problem-description-field b {
  color: var(--danger);
}

.problem-card-options,
.priority-card-options {
  display: grid;
  gap: 10px;
}

.problem-card-options {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.priority-card-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.problem-card-options button,
.priority-card-options button,
.stop-work-options button {
  min-height: 62px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--ds-card);
  color: var(--ink);
  font-weight: 800;
}

.problem-card-options button {
  display: grid;
  place-items: center;
  gap: 6px;
  font-size: 12px;
}

.problem-card-options svg {
  width: 20px;
  height: 20px;
}

.problem-card-options button.active {
  border-color: rgba(220, 38, 38, .42);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.priority-card-options button {
  min-height: 38px;
  font-size: 12px;
}

.priority-card-options button.active {
  border-color: rgba(var(--ds-primary-rgb), .44);
  background: rgba(var(--ds-primary-rgb), .08);
  color: var(--nx-green);
}

.stop-work-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stop-work-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 16px;
  background: var(--ds-card);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(var(--ds-sidebar-rgb), .04);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.stop-work-options button:hover {
  transform: translateY(-1px);
}

.stop-work-options button svg {
  width: 18px;
  height: 18px;
}

.stop-work-options .stop-yes {
  border-color: rgba(220, 38, 38, .2);
  color: var(--ds-danger);
}

.stop-work-options .stop-no {
  border-color: rgba(var(--ds-primary-rgb), .2);
  color: var(--nx-green);
}

.stop-work-options .stop-yes.active {
  border-color: rgba(220, 38, 38, .58);
  background: var(--ds-danger-bg);
  box-shadow: 0 12px 28px rgba(220, 38, 38, .12);
}

.stop-work-options .stop-no.active {
  border-color: rgba(var(--ds-primary-rgb), .58);
  background: rgba(var(--ds-primary-rgb), .1);
  box-shadow: 0 12px 28px rgba(var(--ds-primary-rgb), .1);
}

.problem-description-field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 800;
}

.problem-description-field textarea {
  width: 100%;
  min-height: 118px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font: inherit;
  resize: vertical;
}

.problem-description-field small {
  justify-self: end;
  color: var(--muted);
  font-weight: 600;
}

.problem-attachment-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.problem-upload-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ds-primary-hover);
  padding: 8px 14px;
  text-align: left;
  touch-action: manipulation;
}

.problem-upload-card svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ds-primary);
}

.problem-upload-card strong {
  display: block;
  color: var(--ds-heading);
  font-size: 13px;
}

.problem-upload-card small {
  display: block;
  color: var(--ds-muted);
  font-size: 12px;
}

.problem-file-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.problem-file-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ds-card);
}

.problem-file-card > button:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 10px;
  color: var(--ink);
  font-weight: 800;
  text-align: left;
}

.problem-file-card img {
  width: 100%;
  height: 92px;
  object-fit: cover;
}

.problem-file-card svg {
  width: 30px;
  height: 30px;
  color: var(--ds-danger);
}

.problem-file-card span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.problem-file-card span strong,
.problem-file-card span small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-problem-file {
  position: static;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--ds-card);
}

.remove-problem-file svg {
  width: 13px;
  height: 13px;
  color: var(--ink);
}

.problem-add-more-card {
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed #cfd8d4;
  border-radius: 10px;
  background: var(--ds-card);
  color: var(--ink);
  font-weight: 800;
}

.problem-add-more-card svg {
  width: 24px;
  height: 24px;
}

.problem-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

.problem-modal-actions .primary-button,
.problem-modal-actions .secondary-button {
  min-height: 48px;
  padding: 0 24px;
}

@media (max-width: 680px) {
  .report-problem-modal.worker-problem-sheet {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 18px;
  }

  .problem-context-card,
  .problem-attachment-actions,
  .problem-file-grid {
    grid-template-columns: 1fr;
  }

  .problem-card-options,
  .priority-card-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stop-work-options {
    grid-template-columns: 1fr;
  }

  .problem-modal-actions {
    flex-direction: column;
  }

  .problem-modal-actions .primary-button,
  .problem-modal-actions .secondary-button {
    width: 100%;
    min-height: 54px;
  }
}

/* Modul Problemi: centralni pregled svih prijavljenih problema. */
.global-problems-page {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 18px;
  box-sizing: border-box;
}

.global-problems-page > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.global-problem-tabs {
  display: inline-flex;
  align-items: center;
  width: max-content;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-sm);
  background: var(--ds-card);
  box-shadow: var(--shadow-card);
}

.global-problem-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-right: 1px solid var(--ds-border);
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.global-problem-tabs button:last-child {
  border-right: 0;
}

.global-problem-tabs button.active {
  color: var(--ds-primary);
  box-shadow: inset 0 -3px 0 var(--ds-primary);
}

.global-problem-tabs strong {
  font-weight: 800;
}

.global-problem-filters {
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) repeat(4, minmax(160px, .85fr)) minmax(220px, 1.1fr) auto;
  max-width: 100%;
  min-width: 0;
  gap: 16px;
  align-items: center;
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-card);
  box-shadow: var(--shadow-card);
}

.global-problem-filters select,
.global-problem-filters input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-input);
  background: var(--ds-card);
  color: var(--ds-text);
  font: inherit;
}

.global-problem-filters select {
  padding: 0 14px;
}

.date-range-filter,
.global-problem-search {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-input);
  background: var(--ds-card);
}

.date-range-filter input,
.global-problem-search input {
  min-height: 48px;
  border: 0;
  background: transparent;
}

.date-range-filter svg:first-child,
.global-problem-search svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 14px;
  color: var(--ds-primary);
}

.date-range-filter svg:last-child {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  color: var(--ds-text-light);
}

.date-range-filter span {
  color: var(--ds-text-light);
}

.global-problem-search input {
  padding: 0 14px;
}

.global-problems-empty-card {
  display: grid;
  place-items: center;
  min-height: 470px;
  padding: 54px 24px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.global-problems-illustration {
  position: relative;
  width: 210px;
  height: 170px;
  margin-bottom: 20px;
}

.global-problems-illustration::before {
  content: "";
  position: absolute;
  inset: 18px 28px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--ds-primary-border-rgb), .45), rgba(246, 250, 253, .7));
}

.global-problems-illustration span {
  position: absolute;
  left: 62px;
  top: 42px;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 2px solid rgba(var(--ds-primary-rgb), .45);
  border-radius: 24px;
  background: var(--ds-card);
  color: var(--ds-primary);
  box-shadow: var(--shadow-card);
}

.global-problems-illustration span svg {
  width: 42px;
  height: 42px;
}

.global-problems-illustration i,
.global-problems-illustration b,
.global-problems-illustration em {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: var(--ds-primary-light);
}

.global-problems-illustration i {
  left: 42px;
  bottom: 22px;
  width: 48px;
  height: 8px;
}

.global-problems-illustration b {
  right: 40px;
  bottom: 22px;
  width: 56px;
  height: 8px;
}

.global-problems-illustration em {
  right: 44px;
  top: 34px;
  width: 14px;
  height: 14px;
}

.global-problems-empty-card h2,
.global-problem-table-empty h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 26px;
}

.global-problems-empty-card p,
.global-problem-table-empty p {
  max-width: 620px;
  margin: 12px auto 0;
  color: var(--ds-text-light);
  font-size: 17px;
  line-height: 1.6;
}

.global-problem-table-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-card);
  box-shadow: var(--shadow-card);
}

.global-problem-mobile-sort {
  display: none;
}

.global-problem-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.global-problem-table {
  width: 100%;
  min-width: 1220px;
  border-collapse: collapse;
}

.global-problem-table th,
.global-problem-table td {
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.global-problem-table th button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.global-problem-table tr[data-action] {
  cursor: pointer;
}

.global-problem-table tbody tr:hover {
  background: rgba(var(--ds-primary-border-rgb), .16);
}

.global-problem-table td small {
  display: block;
  margin-top: 5px;
  color: var(--ds-text-light);
  font-size: 13px;
}

.global-problem-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  min-width: 0;
  gap: 16px;
  box-sizing: border-box;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--ds-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--ds-bg));
}

.global-problem-pagination-summary {
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}

.global-problem-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  min-width: 0;
}

.global-problem-page-size select {
  min-height: 42px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ds-text);
  background: var(--ds-card);
  font: inherit;
  font-weight: 750;
}

.global-problem-operator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
}

.global-problem-operator i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ds-sidebar);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.problem-status-badge.processing {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.global-problem-table-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  text-align: center;
}

.global-problem-table-empty svg {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  color: var(--ds-primary);
}

.global-problem-info-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-card);
  box-shadow: var(--shadow-card);
}

.global-problem-info-card > svg {
  display: grid;
  width: 32px;
  height: 32px;
  color: var(--ds-primary);
}

.global-problem-info-card p {
  margin: 0;
  color: var(--ds-text);
  line-height: 1.6;
}

.global-problem-info-card strong {
  color: var(--ds-heading);
}

@media (max-width: 1600px) {
  .global-problem-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .global-problem-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .global-problem-filters {
    grid-template-columns: 1fr;
  }

  .global-problem-info-card {
    grid-template-columns: 1fr;
  }

  .global-problem-pagination {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .global-problem-pagination-summary {
    white-space: normal;
  }

  .global-problem-pagination-controls {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .global-problem-page-nav {
    justify-content: center;
    width: 100%;
  }

  .global-problem-page-size {
    width: 100%;
  }

  .global-problem-page-size select {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .global-problems-page,
  .global-problems-page > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .global-problem-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
  }

  .global-problem-tabs button {
    flex: 1 1 calc(50% - 1px);
    justify-content: center;
    min-width: 0;
    padding: 0 14px;
  }

  .global-problem-tabs button:nth-child(2n) {
    border-right: 0;
  }

  .global-problem-tabs button:nth-child(n + 3) {
    border-top: 1px solid var(--ds-border);
  }

  .global-problem-filters {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .global-problem-filters > *,
  .global-problem-filters select,
  .global-problem-filters input,
  .date-range-filter,
  .global-problem-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .date-range-filter {
    flex-wrap: wrap;
    gap: 0 8px;
    padding-right: 10px;
  }

  .date-range-filter input {
    flex: 1 1 120px;
    width: auto;
  }

  .global-problem-table-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .global-problem-mobile-sort {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), var(--ds-bg));
    box-sizing: border-box;
  }

  .global-problem-mobile-sort > div,
  .global-problem-mobile-sort label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--ds-text-light);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .global-problem-mobile-sort strong {
    min-width: 0;
    color: var(--ds-heading);
    font-size: 14px;
    line-height: 1.35;
    text-transform: none;
    overflow-wrap: anywhere;
  }

  .global-problem-mobile-sort select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-input);
    padding: 0 12px;
    background: var(--ds-card);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    text-transform: none;
    box-sizing: border-box;
  }

  .global-problem-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    overflow-y: visible;
  }

  .global-problem-table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .global-problem-table thead {
    display: none;
  }

  .global-problem-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    box-sizing: border-box;
  }

  .global-problem-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    background: var(--ds-card);
    overflow: hidden;
  }

  .global-problem-table tbody tr:hover {
    background: var(--ds-card);
  }

  .global-problem-table td {
    display: grid;
    grid-template-columns: minmax(98px, 35%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 12px;
    border-bottom: 1px solid var(--ds-border);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .global-problem-table td::before {
    content: attr(data-label);
    min-width: 0;
    color: var(--ds-text-light);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .global-problem-table td:last-child {
    border-bottom: 0;
  }

  .global-problem-table td[data-label="Akcije"] {
    align-items: center;
  }

  .global-problem-table td[data-label="Akcije"] .problem-detail-button {
    justify-self: start;
  }

  .global-problem-table .empty-row {
    border: 0;
  }

  .global-problem-table .empty-row td {
    display: block;
  }

  .global-problem-table .empty-row td::before {
    content: none;
  }
}

/* Sprint Radni nalozi: tab Problemi - pregled. */
.problems-overview {
  display: grid;
  gap: 12px;
}

.problems-overview .problem-table-card {
  padding: 0;
  overflow: hidden;
}

.problems-overview .problem-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 8px;
}

.problems-overview .problem-table-head h2 {
  margin: 2px 0 0;
  color: var(--ds-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.problem-table-overline,
.problem-field > span {
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.problem-table-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.problems-overview .problem-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(130px, 0.72fr)) minmax(150px, 0.78fr);
  gap: 10px;
  align-items: end;
  padding: 8px 18px 14px;
}

.problem-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.problems-overview .problem-toolbar select,
.problems-overview .problem-toolbar input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.problems-overview .problem-search {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.problems-overview .problem-search svg {
  position: absolute;
  left: 15px;
  bottom: 11px;
  width: 16px;
  height: 16px;
  color: var(--ds-primary);
}

.problems-overview .problem-search input {
  width: 100%;
  padding: 0 12px 0 40px;
}

.problems-overview .problem-toolbar select {
  padding: 0 12px;
}

.problems-overview .problem-clear-field .compact-command {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
}

.problems-overview .problem-table-wrap {
  overflow: auto;
  max-width: 100%;
  border-top: 1px solid var(--ds-border);
}

.problems-overview .problem-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.problems-overview .problem-click-row {
  cursor: pointer;
}

.problems-overview .problem-click-row:focus-visible {
  outline: 2px solid rgba(var(--ds-primary-rgb), 0.45);
  outline-offset: -2px;
}

.problems-overview .problem-table th:nth-child(1),
.problems-overview .problem-table td:nth-child(1) {
  width: 17%;
}

.problems-overview .problem-table th:nth-child(2),
.problems-overview .problem-table td:nth-child(2) {
  width: 12%;
}

.problems-overview .problem-table th:nth-child(3),
.problems-overview .problem-table td:nth-child(3) {
  width: 10%;
}

.problems-overview .problem-table th:nth-child(4),
.problems-overview .problem-table td:nth-child(4) {
  width: 20%;
}

.problems-overview .problem-table th:nth-child(5),
.problems-overview .problem-table td:nth-child(5) {
  width: 11%;
}

.problems-overview .problem-table th:nth-child(6),
.problems-overview .problem-table td:nth-child(6) {
  width: 16%;
}

.problems-overview .problem-table th:nth-child(7),
.problems-overview .problem-table td:nth-child(7) {
  width: 9%;
}

.problems-overview .problem-table th:nth-child(8),
.problems-overview .problem-table td:nth-child(8) {
  width: 5%;
}

.problems-overview .problem-table td small {
  display: block;
  margin-top: 3px;
  color: var(--ds-text-muted);
  font-size: 12px;
  line-height: 1.32;
}

.problems-overview .sort-header {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  gap: 5px;
  color: var(--ds-heading);
  font-size: 11px;
  font-weight: 800;
}

.problems-overview .sort-header span {
  min-width: 0;
  overflow-wrap: normal;
}

.problem-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--ds-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), var(--ds-bg));
}

.problem-pagination-summary {
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}

.problem-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.problem-page-nav {
  flex-wrap: wrap;
}

.problem-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  min-width: 0;
}

.problem-type svg {
  width: 16px;
  height: 16px;
}

.problem-priority,
.problem-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.problem-code {
  color: var(--ds-danger);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.problem-priority.nizak {
  background: var(--ds-success-bg);
  color: var(--ds-primary-hover);
}

.problem-priority.srednji {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.problem-priority.visok {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.problem-priority.kritican,
.problem-priority.zaustavlja-rad {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.problem-status-badge.open {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.problem-status-badge.resolved {
  background: var(--ds-success-bg);
  color: var(--ds-success-text);
}

.problem-detail-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.2);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-primary-hover);
  box-shadow: 0 8px 18px rgba(var(--ds-sidebar-rgb), 0.06);
}

.problem-detail-button:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.36);
  background: rgba(var(--ds-primary-rgb), .08);
}

.problem-detail-button svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1180px) {
  .problems-overview .problem-toolbar {
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(130px, 0.72fr));
  }

  .problems-overview .problem-clear-field {
    grid-column: span 1;
  }

  .problems-overview .problem-table {
    min-width: 900px;
  }

}

@media (max-width: 860px) {
  .problems-overview .problem-table-head {
    display: grid;
    padding: 14px 14px 8px;
  }

  .problems-overview .problem-toolbar {
    grid-template-columns: 1fr;
    padding: 8px 14px 14px;
  }

  .problems-overview .problem-table-wrap {
    overflow: visible;
  }

  .problems-overview .problem-table {
    min-width: 0;
  }

  .problems-overview .problem-table,
  .problems-overview .problem-table thead,
  .problems-overview .problem-table tbody,
  .problems-overview .problem-table tr,
  .problems-overview .problem-table td {
    display: block;
    width: 100%;
  }

  .problems-overview .problem-table thead {
    display: none;
  }

  .problems-overview .problem-table tbody {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
  }

  .problems-overview .problem-table tbody tr {
    display: grid;
    gap: 0;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: var(--ds-card);
    overflow: hidden;
  }

  .problems-overview .problem-table td {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    border-bottom: 1px solid var(--ds-border);
  }

  .problems-overview .problem-table td::before {
    content: attr(data-label);
    color: var(--ds-text-light);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .problems-overview .problem-table td:last-child {
    border-bottom: 0;
  }

  .problems-overview .problem-table td[data-label="Detalji"] {
    grid-template-columns: 1fr;
  }

  .problems-overview .problem-table td[data-label="Detalji"]::before {
    content: none;
  }

  .problems-overview .problem-table td[data-label="Detalji"] .problem-detail-button {
    width: 100%;
    min-height: 40px;
  }

  .problems-overview .problem-table td[data-label="Detalji"] .problem-detail-button::after {
    content: "Pregled";
    margin-left: 8px;
    font-weight: 800;
  }

  .problems-overview .problem-table td[data-label="Detalji"] .problem-detail-button {
    display: inline-flex;
    justify-content: center;
  }

  .problems-overview .problem-table td small {
    font-size: 11px;
  }

  .problem-pagination {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .problem-pagination-summary {
    white-space: normal;
  }

  .problem-page-nav {
    justify-content: center;
    width: 100%;
  }
}

/* Sprint Radni nalozi: detalj jednog problema. */
.problem-detail-page {
  display: grid;
  gap: 22px;
}

.problem-detail-nav,
.problem-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.problem-detail-header {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.problem-detail-header h2 {
  margin: 0;
  color: var(--nx-ink);
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.05;
  letter-spacing: 0;
}

.problem-detail-actions {
  display: flex;
  gap: 10px;
}

.problem-detail-actions .primary-button[disabled] {
  cursor: default;
  opacity: .75;
}

.problem-detail-actions .resolved-action {
  background: var(--ds-success-bg);
  color: var(--ds-primary-hover);
  box-shadow: none;
}

.problem-context-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-md);
  background: var(--ds-card);
  box-shadow: var(--shadow-card);
}

.problem-context-strip > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 102px;
  padding: 20px 24px;
  border-right: 1px solid var(--nx-line);
}

.problem-context-strip > div:last-child {
  border-right: 0;
}

.problem-context-strip .soft-icon {
  width: 44px;
  height: 44px;
}

.problem-context-strip small,
.problem-context-strip strong {
  display: block;
}

.problem-context-strip small {
  margin-bottom: 5px;
  color: var(--nx-soft);
  font-size: 13px;
}

.problem-context-strip strong {
  color: var(--nx-ink);
  font-size: 16px;
  line-height: 1.25;
}

.problem-detail-grid-page {
  display: grid;
  grid-template-columns: minmax(420px, .86fr) minmax(520px, 1.14fr);
  gap: 24px;
  align-items: start;
}

.problem-detail-card,
.problem-activity-card {
  padding: 0;
  overflow: hidden;
}

.problem-detail-card h3,
.problem-activity-card h3 {
  margin: 0;
  padding: 24px 28px 18px;
  color: var(--nx-ink);
  font-size: 20px;
}

.problem-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 28px;
  border-top: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
}

.problem-detail-meta > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.problem-detail-meta .soft-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.problem-detail-meta small,
.problem-detail-meta strong {
  display: block;
}

.problem-detail-meta small {
  color: var(--nx-soft);
  font-size: 13px;
}

.problem-detail-meta strong {
  margin-top: 4px;
  color: var(--nx-ink);
  font-size: 16px;
  line-height: 1.35;
}

.problem-description-block,
.problem-documents-block {
  padding: 24px 28px;
  border-bottom: 1px solid var(--nx-line);
}

.problem-description-block h4,
.problem-documents-block h4 {
  margin: 0 0 12px;
  color: var(--nx-ink);
  font-size: 16px;
}

.problem-description-block p {
  margin: 0;
  color: var(--nx-text);
  font-size: 16px;
  line-height: 1.7;
}

.problem-resolution-block {
  display: grid;
  gap: 12px;
  margin: 0 28px 24px;
  padding: 16px;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.16);
  border-radius: var(--radius-sm);
  background: var(--ds-success-bg);
}

.problem-resolution-block h4,
.problem-resolution-block p,
.problem-resolution-block dl {
  margin: 0;
}

.problem-resolution-block dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.problem-resolution-block dt {
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 750;
}

.problem-resolution-block dd {
  margin: 4px 0 0;
  color: var(--ds-heading);
  font-weight: 800;
}

.resolution-note-field {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.resolution-note-field textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ds-text);
  background: var(--ds-card);
  font: inherit;
}

.section-line-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-line-title span {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  border-radius: 999px;
  background: var(--nx-accent-soft);
  color: var(--nx-green);
  font-weight: 800;
}

.problem-documents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.problem-document-card,
.problem-add-file-card,
.problem-empty-docs {
  min-height: 132px;
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-sm);
  background: var(--ds-card);
}

.problem-document-card,
.problem-add-file-card {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 14px;
  text-align: left;
}

.problem-document-card:hover,
.problem-add-file-card:hover {
  border-color: rgba(var(--ds-primary-border-rgb), .45);
  box-shadow: 0 12px 26px rgba(var(--ds-sidebar-rgb), .06);
}

.problem-document-card img {
  width: 100%;
  height: 92px;
  border-radius: 10px;
  object-fit: cover;
}

.problem-document-card > svg,
.problem-add-file-card > svg,
.problem-empty-docs > svg {
  width: 34px;
  height: 34px;
  color: var(--nx-green);
}

.problem-document-card span,
.problem-document-card strong,
.problem-document-card small,
.problem-add-file-card strong,
.problem-add-file-card small {
  display: block;
}

.problem-document-card strong {
  color: var(--nx-ink);
  font-size: 14px;
}

.problem-document-card small,
.problem-add-file-card small {
  margin-top: 4px;
  color: var(--nx-soft);
  font-size: 12px;
}

.problem-add-file-card {
  border-style: dashed;
  place-items: center;
  text-align: center;
}

.problem-empty-docs {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  color: var(--nx-soft);
  text-align: center;
}

.problem-source-note,
.success-confirm-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 28px;
  border-radius: 12px;
  background: var(--ds-warning-bg);
  color: #9a5f08;
  padding: 14px 16px;
  font-weight: 650;
}

.success-confirm-note {
  margin: 0;
  background: var(--ds-success-bg);
  color: var(--ds-primary-hover);
}

.problem-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--nx-line);
}

.problem-activity-header h3 {
  border-bottom: 3px solid var(--nx-accent);
}

.problem-activity-header label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 28px;
  color: var(--nx-soft);
  font-size: 14px;
}

.problem-timeline {
  display: grid;
}

.problem-activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--nx-line);
}

.problem-activity-item::before {
  content: "";
  position: absolute;
  left: 52px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--nx-line);
}

.activity-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ds-card);
  border-radius: 999px;
  background: var(--nx-green);
  color: var(--ds-card);
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(var(--ds-sidebar-rgb), .12);
}

.activity-body header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.activity-body header strong {
  color: var(--nx-ink);
  font-size: 16px;
}

.activity-body header span {
  border-radius: 999px;
  background: var(--ds-success-bg);
  color: var(--ds-primary-hover);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
}

.activity-body header time {
  margin-left: auto;
  color: var(--nx-soft);
  font-size: 13px;
}

.activity-body p {
  margin: 10px 0 0;
  color: var(--nx-text);
  font-size: 15px;
  line-height: 1.6;
}

.activity-files {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.activity-files button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  background: var(--ds-card);
  padding: 8px 10px;
  color: var(--nx-text);
  font-weight: 700;
}

.activity-files svg {
  color: var(--nx-green);
}

.problem-detail-composer {
  display: grid;
  gap: 12px;
  padding: 20px 24px 24px;
}

.problem-detail-composer textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--nx-text);
  font: inherit;
  font-size: 15px;
}

.pending-problem-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pending-problem-files span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  background: var(--ds-card);
  padding: 7px 10px;
  color: var(--nx-text);
  font-size: 13px;
  font-weight: 700;
}

.pending-problem-files button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--nx-soft);
}

.pending-problem-files svg {
  width: 15px;
  height: 15px;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.composer-actions small {
  margin-right: auto;
  color: var(--nx-soft);
}

@media (max-width: 1380px) {
  .problem-context-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .problem-context-strip > div {
    border-bottom: 1px solid var(--nx-line);
  }

  .problem-detail-grid-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .problem-context-strip,
  .problem-detail-meta,
  .problem-documents-grid {
    grid-template-columns: 1fr;
  }

  .problem-context-strip > div {
    border-right: 0;
  }

  .problem-detail-nav,
  .problem-activity-header,
  .composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .activity-body header time {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 1480px) {
  .work-items-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .items-summary-metric:nth-child(3) {
    border-right: 0;
  }

  .items-summary-metric:nth-child(n + 4) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 880px) {
  .work-items-summary {
    grid-template-columns: 1fr;
  }

  .items-summary-metric {
    border-right: 0;
    border-top: 1px solid var(--border);
  }

  .items-summary-metric:first-child {
    border-top: 0;
  }

  .items-overview-card .panel-header,
  .items-overview-card .table-tools {
    align-items: stretch;
    flex-direction: column;
  }
}

/* NormaX Design System v1.0 global component standard */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

input,
select,
textarea,
.field input,
.field select,
.field textarea,
.wo-modal-field input,
.wo-modal-field select,
.wo-modal-field textarea,
.products-toolbar input,
.products-toolbar select,
.work-orders-toolbar input,
.work-orders-toolbar select,
.table-tools input,
.filters select,
.assembly-inline-input,
.assembly-inline-select,
.position-inline-input {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-input);
  color: var(--ds-text);
  background-color: var(--ds-card);
}

input::placeholder,
textarea::placeholder {
  color: var(--ds-placeholder);
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.wo-modal-field input:focus,
.wo-modal-field select:focus,
.wo-modal-field textarea:focus,
.products-toolbar input:focus,
.products-toolbar select:focus,
.work-orders-toolbar input:focus,
.work-orders-toolbar select:focus,
.table-tools input:focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus-ring);
}

.primary-button,
.initial-items-card .primary-button,
.work-order-modal-actions .primary-button,
.product-modal-actions .primary-button,
.modal-actions .primary-button,
.finish-modal-actions .primary-button,
.problem-submit-button,
.save-button,
.add-button {
  border-color: var(--ds-primary);
  color: var(--ds-card);
  background: var(--ds-primary);
  box-shadow: 0 10px 22px rgba(var(--ds-primary-rgb), 0.22);
}

.primary-button:hover,
.initial-items-card .primary-button:hover,
.work-order-modal-actions .primary-button:hover,
.product-modal-actions .primary-button:hover,
.modal-actions .primary-button:hover,
.finish-modal-actions .primary-button:hover,
.problem-submit-button:hover,
.save-button:hover,
.add-button:hover {
  border-color: var(--ds-primary-hover);
  background: var(--ds-primary-hover);
  box-shadow: 0 14px 28px rgba(var(--ds-primary-rgb), 0.26);
}

.secondary-button,
.initial-items-card .secondary-button,
.work-order-modal-actions .secondary-button,
.product-modal-actions .secondary-button,
.modal-actions .secondary-button,
.finish-modal-actions .secondary-button,
.compact-command,
.detail-action {
  border-color: var(--ds-border);
  color: var(--ds-heading);
  background: var(--ds-card);
  box-shadow: none;
}

.secondary-button:hover,
.initial-items-card .secondary-button:hover,
.work-order-modal-actions .secondary-button:hover,
.product-modal-actions .secondary-button:hover,
.modal-actions .secondary-button:hover,
.finish-modal-actions .secondary-button:hover,
.compact-command:hover,
.detail-action:hover {
  border-color: var(--ds-primary-border);
  background: var(--ds-primary-light);
}

.danger-action,
.danger-button,
.icon-mini.danger,
.secondary-button.danger-action {
  border-color: rgba(220, 38, 38, 0.45);
  color: var(--ds-danger);
  background: transparent;
}

.danger-action:hover,
.danger-button:hover,
.icon-mini.danger:hover,
.secondary-button.danger-action:hover {
  border-color: var(--ds-danger);
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.card,
.metric-card,
.dashboard-card,
.table-shell,
.modal-panel,
.product-form-card,
.product-kpi,
.work-order-kpi,
.items-table-card,
.detail-card,
.status-card,
.problem-detail-card,
.problem-table-card,
.products-table-card,
.product-assembly-card,
.station-card,
.settings-card,
.analytics-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.analytics-screen {
  display: grid;
  gap: 18px;
}

.analytics-topbar,
.analytics-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.analytics-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.analytics-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ds-text);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.analytics-tabs button.active {
  color: var(--ds-primary);
  border-color: var(--ds-primary);
  background: linear-gradient(180deg, rgba(var(--ds-primary-border-rgb), 0.28), transparent);
}

.analytics-tabs svg,
.analytics-actions svg,
.analytics-filter-row svg {
  width: 18px;
  height: 18px;
}

.analytics-actions,
.analytics-filter-row {
  flex-wrap: wrap;
}

.analytics-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.analytics-filter-row {
  justify-content: flex-start;
}

.analytics-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  color: var(--ds-text);
  background: var(--ds-card);
}

.analytics-period input {
  width: 132px;
  border: 0;
  outline: 0;
  color: var(--ds-heading);
  background: transparent;
  font: inherit;
  font-weight: 600;
}

.analytics-period.compact input {
  width: 126px;
}

.analytics-actions select,
.analytics-filter-row select {
  min-width: 190px;
  min-height: 46px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  color: var(--ds-heading);
  background: var(--ds-card);
  font: inherit;
  font-weight: 500;
}

.analytics-empty-card {
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 44px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
  text-align: center;
}

.analytics-empty-card h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 28px;
}

.analytics-empty-card p {
  max-width: 680px;
  margin: 0;
  color: var(--ds-text-light);
  font-size: 16px;
  line-height: 1.65;
}

.analytics-empty-illustration {
  position: relative;
  width: 180px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 42px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--ds-primary-border-rgb), 0.55), rgba(246, 250, 253, 0.15));
}

.analytics-empty-illustration svg {
  width: 74px;
  height: 74px;
  color: var(--ds-primary);
}

.analytics-empty-illustration i,
.analytics-empty-illustration b,
.analytics-empty-illustration em {
  position: absolute;
  border-radius: 999px;
  background: var(--ds-primary-border);
  opacity: 0.75;
}

.analytics-empty-illustration i {
  width: 42px;
  height: 42px;
  left: 18px;
  bottom: 22px;
}

.analytics-empty-illustration b {
  width: 26px;
  height: 26px;
  right: 24px;
  top: 28px;
}

.analytics-empty-illustration em {
  width: 56px;
  height: 12px;
  left: 62px;
  bottom: 12px;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.analytics-kpi-card,
.analytics-table-card,
.analytics-chart-card,
.analytics-insights {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.analytics-kpi-card {
  display: grid;
  gap: 6px;
  min-height: 124px;
  padding: 18px;
}

.analytics-kpi-card div {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--chart-teal);
  background: color-mix(in srgb, var(--chart-teal) 13%, var(--ds-card));
}

.analytics-kpi-card:nth-child(2) div,
.analytics-kpi-card:nth-child(3) div {
  color: var(--chart-success);
  background: color-mix(in srgb, var(--chart-success) 14%, var(--ds-card));
}

.analytics-kpi-card:nth-child(4) div,
.analytics-kpi-card:nth-child(5) div {
  color: var(--chart-warning);
  background: color-mix(in srgb, var(--chart-warning) 13%, var(--ds-card));
}

.analytics-kpi-card:nth-child(6) div {
  color: var(--chart-danger);
  background: color-mix(in srgb, var(--chart-danger) 12%, var(--ds-card));
}

.analytics-kpi-card svg {
  width: 22px;
  height: 22px;
}

.analytics-kpi-card span {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 500;
}

.analytics-kpi-card strong {
  color: var(--ds-heading);
  font-size: 24px;
  line-height: 1.1;
}

.analytics-kpi-card small {
  color: var(--ds-success);
  font-weight: 600;
}

.analytics-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.9fr);
  gap: 14px;
}

.analytics-table-card,
.analytics-chart-card {
  padding: 18px;
}

.analytics-table-card .panel-header {
  margin-bottom: 12px;
}

.analytics-table-card h2,
.analytics-chart-card h2,
.analytics-insights h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 18px;
}

.analytics-table-wrap {
  overflow-x: auto;
}

.analytics-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.analytics-table th,
.analytics-table td {
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.analytics-table th button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.analytics-table tr[data-action] {
  cursor: pointer;
}

.analytics-table tr[data-action]:hover {
  background: rgba(var(--ds-primary-border-rgb), 0.16);
}

.analytics-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--ds-text-light);
  font-size: 13px;
}

.analytics-mini-bar {
  display: inline-grid;
  grid-template-columns: 72px auto;
  align-items: center;
  gap: 8px;
  min-width: 122px;
}

.analytics-mini-bar b {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--chart-success), var(--chart-teal));
}

.analytics-mini-bar::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 72px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chart-success) 12%, var(--ds-card));
}

.analytics-mini-bar b {
  grid-column: 1;
  grid-row: 1;
}

.analytics-mini-bar em {
  color: var(--ds-text);
  font-style: normal;
  font-weight: 700;
}

.analytics-spark {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 22px;
}

.analytics-spark i {
  width: 12px;
  border-radius: 999px;
  background: var(--chart-success);
}

.analytics-spark i:nth-child(1) { height: 8px; }
.analytics-spark i:nth-child(2) { height: 14px; }
.analytics-spark i:nth-child(3) { height: 11px; }
.analytics-spark i:nth-child(4) { height: 18px; }
.analytics-spark i:nth-child(5) { height: 13px; }
.analytics-spark.warn i { background: var(--chart-danger); }

.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.analytics-columns {
  height: 260px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 12px;
  padding-top: 28px;
}

.analytics-columns button {
  flex: 1;
  display: grid;
  justify-items: center;
  align-items: end;
  gap: 8px;
  border: 0;
  color: var(--ds-text);
  background: transparent;
  cursor: pointer;
}

.analytics-columns span {
  width: min(52px, 80%);
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-color, var(--chart-teal)) 82%, white), var(--chart-color, var(--chart-teal)));
  box-shadow: 0 10px 18px color-mix(in srgb, var(--chart-color, var(--chart-teal)) 18%, transparent);
}

.analytics-columns strong {
  color: var(--ds-heading);
  font-weight: 700;
}

.analytics-columns small {
  max-width: 84px;
  color: var(--ds-text-light);
  font-size: 12px;
  line-height: 1.25;
}

.analytics-line {
  height: 220px;
  display: flex;
  align-items: end;
  gap: 9px;
  padding: 20px 4px;
}

.analytics-line span {
  flex: 1;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-color, var(--chart-success)) 78%, white), var(--chart-color, var(--chart-success)));
}

.analytics-trend-chart {
  display: grid;
  gap: 8px;
  min-height: 240px;
  align-content: center;
}

.analytics-trend-svg {
  width: 100%;
  height: 190px;
  overflow: visible;
  fill: none;
  stroke: none;
  shape-rendering: geometricPrecision;
}

.analytics-trend-area {
  fill: color-mix(in srgb, var(--chart-success) 13%, transparent);
}

.analytics-trend-line-path {
  fill: none;
  stroke: var(--chart-success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.analytics-trend-point {
  fill: var(--chart-success);
  stroke: var(--ds-card);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.analytics-trend-labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  color: var(--ds-text-light);
  font-size: 11px;
  text-align: center;
}

.analytics-trend-labels span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-trend-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--ds-text-light);
  text-align: center;
}

.analytics-trend-empty svg {
  width: 56px;
  height: 56px;
  padding: 14px;
  border-radius: 50%;
  color: var(--chart-slate);
  background: color-mix(in srgb, var(--chart-slate) 12%, var(--ds-card));
}

.analytics-trend-empty strong {
  color: var(--ds-heading);
  font-size: 15px;
}

.analytics-trend-empty span {
  max-width: 280px;
  line-height: 1.45;
}

.analytics-donut-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 240px;
}

.analytics-donut {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.analytics-donut span {
  position: relative;
  z-index: 1;
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: var(--ds-card);
  color: var(--ds-heading);
  text-align: center;
}

.analytics-donut strong {
  font-size: 20px;
}

.analytics-donut small {
  color: var(--ds-text-light);
}

.chart-donut-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: none;
  shape-rendering: geometricPrecision;
}

.chart-donut-segment {
  stroke: var(--ds-card);
  stroke-width: 1.15;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.chart-donut-ring {
  fill: none;
  stroke-width: 38;
  stroke-linecap: butt;
  shape-rendering: geometricPrecision;
}

.analytics-legend,
.analytics-bars {
  display: grid;
  gap: 10px;
}

.analytics-legend button,
.analytics-bars button {
  display: grid;
  align-items: center;
  gap: 8px;
  border: 0;
  color: var(--ds-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.analytics-legend button {
  grid-template-columns: 12px minmax(0, 1fr) auto;
}

.analytics-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chart-teal);
}

.analytics-bars button {
  grid-template-columns: minmax(120px, 1fr) minmax(100px, 1.4fr) auto;
}

.analytics-bars i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chart-warning) 12%, var(--ds-card));
}

.analytics-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--chart-color, var(--chart-warning)) 78%, white), var(--chart-color, var(--chart-warning)));
}

.analytics-no-chart {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--ds-text-light);
  text-align: center;
}

.analytics-insights {
  padding: 18px;
}

.analytics-insights > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.analytics-insights section {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-primary-light);
}

.analytics-insights section > span {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ds-primary);
  background: var(--ds-card);
}

.analytics-insights strong {
  color: var(--ds-heading);
}

.analytics-insights p {
  margin: 0;
  color: var(--ds-text-light);
  line-height: 1.45;
}

.success-text {
  color: var(--ds-success);
  font-weight: 700;
}

.warning-text {
  color: var(--chart-warning);
  font-weight: 700;
}

.danger-text {
  color: var(--ds-danger);
  font-weight: 700;
}

.muted-text {
  color: var(--ds-muted);
  font-weight: 800;
}

@media (max-width: 1380px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-main-grid,
  .analytics-chart-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .analytics-topbar,
  .analytics-filter-row,
  .analytics-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-tabs {
    overflow-x: auto;
  }

  .analytics-actions select,
  .analytics-filter-row select,
  .analytics-period,
  .analytics-actions .compact-command,
  .analytics-filter-row .compact-command {
    width: 100%;
  }

  .analytics-kpi-grid,
  .analytics-insights > div {
    grid-template-columns: 1fr;
  }

  .analytics-donut-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.modal-panel,
.work-order-create-modal,
.product-create-modal {
  border-radius: var(--ds-radius-modal);
  box-shadow: var(--ds-shadow-modal);
}

.modal-panel.work-order-create-modal {
  width: min(calc(100vw - 56px), 1360px);
  max-height: min(94vh, 940px);
  padding: 34px 40px 30px;
}

.modal-panel.work-order-create-modal .work-order-create-layout {
  grid-template-columns: minmax(640px, 1fr) 360px;
}

.modal-panel.work-order-create-modal .work-order-modal-header {
  margin-bottom: 32px;
}

.modal-panel.work-order-create-modal .work-order-modal-header .soft-icon {
  width: 64px;
  height: 64px;
}

.modal-panel.work-order-create-modal .work-order-modal-header h2 {
  font-size: clamp(26px, 2vw, 34px);
}

.modal-panel.work-order-create-modal .work-order-modal-header p {
  margin-top: 8px;
  font-size: 15px;
}

.modal-panel.work-order-create-modal .work-order-create-main {
  gap: 18px;
}

.modal-panel.work-order-create-modal .wo-create-card {
  padding: 22px 24px;
}

.modal-panel.work-order-create-modal .wo-create-card h3 {
  margin-bottom: 18px;
  font-size: 20px;
}

.modal-panel.work-order-create-modal .wo-create-card-grid {
  gap: 16px 24px;
}

.modal-panel.work-order-create-modal .wo-modal-field {
  gap: 9px;
  font-size: 15px;
}

.modal-panel.work-order-create-modal .wo-modal-field input,
.modal-panel.work-order-create-modal .wo-modal-field select,
.modal-panel.work-order-create-modal .wo-modal-field textarea {
  min-height: 58px;
  padding: 0 18px;
  font-size: 17px;
}

.modal-panel.work-order-create-modal .wo-modal-field textarea {
  min-height: 86px;
  padding-top: 14px;
}

.modal-panel.work-order-create-modal .wo-priority-segments {
  min-height: 58px;
}

.modal-panel.work-order-create-modal .wo-priority-segment {
  font-size: 15px;
}

.modal-panel.work-order-create-modal .wo-number-card {
  padding: 34px 28px;
}

.modal-panel.work-order-create-modal .wo-number-card > .soft-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
}

.modal-panel.work-order-create-modal .wo-number-note {
  margin-bottom: 28px;
  padding: 18px;
}

.modal-panel.work-order-create-modal .work-order-modal-actions {
  margin-top: 26px;
  padding-top: 22px;
}

@media (max-width: 1120px) {
  .modal-panel.work-order-create-modal .work-order-create-layout {
    grid-template-columns: 1fr;
  }

  .modal-panel.work-order-create-modal {
    width: min(calc(100vw - 32px), 900px);
  }
}

@media (max-width: 760px) {
  .modal-panel.work-order-create-modal {
    width: min(calc(100vw - 24px), 620px);
    padding: 28px 20px 24px;
  }
}

@media (max-width: 1180px) {
  .stations-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .stations-card-actions {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
  }

  .stations-filter-card {
    grid-template-columns: minmax(220px, 1.2fr) minmax(160px, .8fr);
  }
}

@media (max-width: 760px) {
  .stations-card-header {
    padding: 16px;
  }

  .stations-card-actions,
  .stations-card-actions .compact-command {
    width: 100%;
  }

  .stations-filter-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 16px;
  }

  .station-search,
  .station-filter-field,
  .station-filter-field select,
  .station-filter-field input,
  .stations-filter-card .clear-filter-button {
    width: 100%;
    min-width: 0;
  }

  .stations-empty-state {
    min-height: 440px;
    padding: 42px 18px 54px;
  }

  .stations-empty-illustration {
    transform: scale(0.88);
  }
}

@media (max-width: 640px) {
  .stations-card {
    max-width: 100%;
    min-width: 0;
  }

  .stations-table-wrap {
    display: none;
  }

  .stations-mobile-sort {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), var(--ds-bg));
    box-sizing: border-box;
  }

  .stations-mobile-sort > div,
  .stations-mobile-sort label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--ds-text-light);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .stations-mobile-sort strong {
    min-width: 0;
    color: var(--ds-heading);
    font-size: 14px;
    line-height: 1.35;
    text-transform: none;
    overflow-wrap: anywhere;
  }

  .stations-mobile-sort select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-input);
    padding: 0 12px;
    background: var(--ds-card);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    box-sizing: border-box;
  }

  .stations-mobile-list {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px;
    box-sizing: border-box;
  }

  .stations-pagination {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
  }

  .stations-pagination-summary {
    white-space: normal;
  }

  .stations-pagination-controls {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  .stations-page-nav,
  .stations-page-size {
    width: 100%;
  }

  .stations-page-nav {
    justify-content: center;
    flex-wrap: wrap;
  }

  .stations-page-size {
    justify-content: space-between;
  }

  .stations-page-size select {
    min-width: 130px;
  }

  .station-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
  }

  .station-mobile-actions button {
    flex: 1 1 132px;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
  }
}

table th,
.products-table th,
.work-orders-table th,
.hierarchy-table th,
.assembly-table th,
.station-table th,
.positions-table th,
.problem-table th {
  border-color: var(--ds-border);
}

table td,
.products-table td,
.work-orders-table td,
.hierarchy-table td,
.assembly-table td,
.station-table td,
.positions-table td,
.problem-table td {
  border-color: var(--ds-border);
}

tbody tr:hover,
.products-table tbody tr:hover,
.work-orders-table tbody tr:hover,
.hierarchy-table tbody tr:hover,
.assembly-table tbody tr:hover,
.station-table tbody tr:hover,
.positions-table tbody tr:hover,
.problem-table tbody tr:hover {
  background: var(--ds-bg);
}

.detail-tabs button.active,
.product-steps button.active,
.tabs button.active,
.tab-button.active {
  color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.detail-tabs button.active,
.tabs button.active,
.tab-button.active {
  border-bottom-color: var(--ds-primary);
}

.product-steps button.active span,
.status-badge.success,
.status-badge.done,
.status-badge.completed,
.type-finished,
.pill-success,
.badge-success {
  color: var(--ds-primary-hover);
  background: var(--ds-success-bg);
}

.status-badge,
.priority-badge,
.product-type-badge,
.problem-priority,
.problem-status,
.status-pill,
.badge {
  border-radius: 10px;
  font-weight: 700;
}

.status-badge.in-progress,
.status-badge.active,
.badge-info,
.pill-info {
  color: var(--ds-info);
  background: var(--ds-info-bg);
}

.status-badge.warning,
.priority-badge.medium,
.badge-warning,
.pill-warning {
  color: var(--ds-warning);
  background: var(--ds-warning-bg);
}

.status-badge.danger,
.priority-badge.high,
.priority-badge.critical,
.badge-danger,
.pill-danger {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.soft-icon,
.metric-icon,
.check-icon,
.success-icon {
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.scrap-screen {
  display: grid;
  gap: 22px;
}

.scrap-filter-card,
.scrap-kpi-card,
.scrap-chart-card,
.scrap-list-card,
.scrap-detail-modal {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}

.scrap-filter-card {
  display: grid;
  grid-template-columns: repeat(8, minmax(132px, 1fr));
  gap: 14px;
  padding: 18px;
  align-items: end;
}

.scrap-filter-card label {
  display: grid;
  gap: 7px;
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
}

.scrap-filter-card input,
.scrap-filter-card select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
  color: var(--ds-heading);
  padding: 0 13px;
}

.scrap-date-field,
.scrap-search {
  position: relative;
}

.scrap-date-field svg,
.scrap-search svg {
  position: absolute;
  left: 13px;
  bottom: 13px;
  color: var(--ds-primary);
}

.scrap-date-field input,
.scrap-search input {
  padding-left: 42px;
}

.scrap-filter-card .secondary-button {
  min-height: 44px;
}

.scrap-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.scrap-kpi-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.scrap-kpi-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--chart-danger);
  background: color-mix(in srgb, var(--chart-danger) 12%, var(--ds-card));
}

.scrap-kpi-card:nth-child(2) .scrap-kpi-icon {
  color: var(--chart-warning);
  background: color-mix(in srgb, var(--chart-warning) 13%, var(--ds-card));
}

.scrap-kpi-card:nth-child(3) .scrap-kpi-icon,
.scrap-kpi-card:nth-child(4) .scrap-kpi-icon {
  color: var(--chart-amber);
  background: color-mix(in srgb, var(--chart-amber) 12%, var(--ds-card));
}

.scrap-kpi-card:nth-child(5) .scrap-kpi-icon {
  color: var(--chart-slate);
  background: color-mix(in srgb, var(--chart-slate) 10%, var(--ds-card));
}

.scrap-kpi-card span,
.scrap-kpi-card small {
  display: block;
  color: var(--ds-text-light);
}

.scrap-kpi-card strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--ds-heading);
  font-size: 28px;
  line-height: 1;
}

.scrap-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.scrap-chart-card {
  min-height: 285px;
  padding: 20px;
}

.scrap-chart-card h2 {
  margin: 0 0 18px;
  color: var(--ds-heading);
  font-size: 18px;
}

.scrap-empty-panel {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 12px;
}

.scrap-empty-panel h2 {
  justify-self: start;
  align-self: start;
  width: 100%;
  text-align: left;
}

.scrap-empty-illustration {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 120px;
  border-radius: 48%;
  color: var(--chart-warning);
  background: linear-gradient(135deg, color-mix(in srgb, var(--chart-warning) 18%, var(--ds-card)), rgba(246, 250, 253, 0.92));
}

.scrap-empty-illustration svg:first-child {
  width: 70px;
  height: 70px;
}

.scrap-empty-illustration svg:last-child {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  color: var(--chart-slate);
}

.scrap-empty-panel strong,
.scrap-table-empty h2 {
  color: var(--ds-heading);
  font-size: 22px;
}

.scrap-empty-panel p,
.scrap-table-empty p {
  margin: 0;
  max-width: 360px;
  color: var(--ds-text-light);
  line-height: 1.6;
}

.scrap-donut-wrap {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.scrap-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.scrap-donut span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--ds-card);
  color: var(--ds-heading);
}

.scrap-donut strong {
  font-size: 30px;
  line-height: 1;
}

.scrap-donut small,
.scrap-donut em {
  color: var(--ds-text-light);
  font-style: normal;
}

.scrap-legend,
.scrap-bars {
  display: grid;
  gap: 10px;
}

.scrap-legend button,
.scrap-bars button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  text-align: left;
}

.scrap-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.scrap-legend strong,
.scrap-bars strong {
  color: var(--ds-text-light);
  font-size: 13px;
  white-space: nowrap;
}

.scrap-bars button {
  grid-template-columns: 140px minmax(120px, 1fr) auto;
}

.scrap-bars i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chart-danger) 10%, var(--ds-card));
}

.scrap-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--chart-color, var(--chart-danger)) 78%, white), var(--chart-color, var(--chart-danger)));
}

.scrap-list-card {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.scrap-list-card .panel-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--ds-border);
}

.scrap-list-card .scrap-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.scrap-list-card .scrap-table {
  width: max-content;
  max-width: none;
  min-width: 1120px;
  border-collapse: collapse;
}

.scrap-table th,
.scrap-table td {
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.scrap-table th button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}

.scrap-table tbody tr {
  cursor: pointer;
}

.scrap-table tbody tr:hover {
  background: var(--ds-primary-light);
}

.scrap-table-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 56px 20px;
  text-align: center;
}

.scrap-table-empty div {
  position: relative;
  display: grid;
  place-items: center;
  width: 90px;
  height: 78px;
  color: var(--ds-primary);
  background: var(--ds-info-bg);
  border-radius: 24px;
}

.scrap-table-empty div svg:first-child {
  width: 48px;
  height: 48px;
}

.scrap-table-empty div svg:last-child {
  position: absolute;
  right: -10px;
  bottom: -8px;
  color: var(--ds-warning);
}

@media (max-width: 640px) {
  .scrap-screen .scrap-bars button {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 6px;
  }

  .scrap-screen .scrap-bars span,
  .scrap-screen .scrap-bars strong {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .scrap-screen .scrap-bars i {
    width: 100%;
    min-width: 0;
  }

  .scrap-list-card .scrap-table-wrap {
    overflow-x: visible;
    overflow-y: visible;
  }

  .scrap-list-card .scrap-table {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .scrap-list-card .scrap-table thead {
    display: none;
  }

  .scrap-list-card .scrap-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    box-sizing: border-box;
  }

  .scrap-list-card .scrap-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-input);
    background: var(--ds-card);
    overflow: hidden;
  }

  .scrap-list-card .scrap-table tbody tr:hover {
    background: var(--ds-card);
  }

  .scrap-list-card .scrap-table td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .scrap-list-card .scrap-table td::before {
    content: attr(data-label);
    min-width: 0;
    color: var(--ds-text-light);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .scrap-list-card .scrap-table td[data-label="Akcije"] {
    align-items: center;
  }

  .scrap-list-card .scrap-table td[data-label="Akcije"] .icon-button {
    justify-self: start;
  }

  .scrap-list-card .scrap-table .empty-row {
    border: 0;
  }

  .scrap-list-card .scrap-table .empty-row td {
    display: block;
  }

  .scrap-list-card .scrap-table .empty-row td::before {
    content: none;
  }
}

.scrap-detail-modal {
  width: min(760px, calc(100vw - 36px));
  padding: 0;
  overflow: hidden;
}

.scrap-detail-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  margin: 0 28px 20px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  overflow: hidden;
}

.scrap-detail-grid div {
  display: contents;
}

.scrap-detail-grid dt,
.scrap-detail-grid dd {
  margin: 0;
  padding: 15px 18px;
  border-bottom: 1px solid var(--ds-border);
}

.scrap-detail-grid dt {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-weight: 700;
}

.scrap-detail-grid dd {
  color: var(--ds-heading);
  font-weight: 600;
}

.scrap-detail-grid div:last-child dt,
.scrap-detail-grid div:last-child dd {
  border-bottom: 0;
}

.scrap-detail-modal .modal-actions {
  padding: 18px 28px;
  border-top: 1px solid var(--ds-border);
}

@media (max-width: 1200px) {
  .scrap-filter-card,
  .scrap-kpi-grid,
  .scrap-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scrap-chart-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .scrap-filter-card,
  .scrap-kpi-grid,
  .scrap-chart-grid,
  .scrap-donut-wrap,
  .scrap-detail-grid {
    grid-template-columns: 1fr;
  }

  .scrap-donut {
    justify-self: center;
  }
}

.shipment-screen,
.archive-screen {
  display: grid;
  gap: 12px;
}

.topbar:has(+ #section-root .shipment-screen) {
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-card);
  box-shadow: 0 8px 24px rgba(var(--ds-sidebar-rgb), .05);
}

.topbar:has(+ #section-root .shipment-screen) .title-block {
  min-width: 0;
}

.topbar:has(+ #section-root .shipment-screen) .title-block p {
  margin: 0 0 4px;
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.topbar:has(+ #section-root .shipment-screen) .title-block h1 {
  margin: 0;
  font-size: clamp(24px, 1.95vw, 28px);
  font-weight: 700;
  line-height: 1.08;
}

.topbar:has(+ #section-root .shipment-screen) .title-block span {
  max-width: 720px;
  margin-top: 5px;
  color: #526a82;
  font-size: 12.5px;
  line-height: 1.35;
}

.topbar:has(+ #section-root .shipment-screen) .topbar-actions {
  align-items: center;
  gap: 8px;
}

.topbar:has(+ #section-root .shipment-screen) .notification-trigger,
.topbar:has(+ #section-root .shipment-screen) .profile-chip {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

.shipment-filter-card {
  display: grid;
  grid-template-columns: minmax(126px, .8fr) minmax(126px, .8fr) repeat(3, minmax(140px, 1fr)) minmax(210px, 1.25fr) minmax(136px, .7fr);
  gap: 8px 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.shipment-filter-card label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--ds-text);
  font-weight: 700;
}

.shipment-filter-card label > svg {
  display: none;
}

.shipment-filter-card span {
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.shipment-filter-card input,
.shipment-filter-card select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-heading);
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.shipment-filter-card input:focus,
.shipment-filter-card select:focus,
.inline-select:focus {
  outline: 0;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), .14);
}

.shipment-search {
  grid-column: auto;
}

.shipment-empty-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 520px;
  padding: 74px 24px;
  text-align: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.shipment-empty-illustration {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 132px;
  color: var(--ds-primary);
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(var(--ds-primary-border-rgb), .28), rgba(246, 250, 253, .86));
}

.shipment-empty-illustration svg:first-child {
  width: 86px;
  height: 86px;
}

.shipment-empty-illustration svg:last-child {
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 34px;
  height: 34px;
  color: var(--ds-success);
  background: var(--ds-card);
  border-radius: 999px;
  padding: 5px;
  box-shadow: var(--ds-shadow-card);
}

.archive-empty-card .shipment-empty-illustration svg:last-child {
  display: none;
}

.shipment-empty-card h2 {
  margin: 6px 0 0;
  color: var(--ds-heading);
  font-size: 28px;
}

.shipment-empty-card p {
  margin: 0;
  color: var(--ds-text);
  font-size: 17px;
}

.shipment-list-card {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.shipment-table-wrap {
  overflow-x: auto;
}

.shipment-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

.shipment-table th,
.shipment-table td {
  text-align: left;
  vertical-align: middle;
}

.shipment-table th {
  border-bottom: 1px solid var(--ds-border);
}

.shipment-table th:nth-child(1) { width: 124px; }
.shipment-table th:nth-child(2) { width: 190px; }
.shipment-table th:nth-child(3) { width: 112px; }
.shipment-table th:nth-child(4) { width: 108px; }
.shipment-table th:nth-child(5) { width: 64px; }
.shipment-table th:nth-child(6) { width: 190px; }
.shipment-table th:nth-child(7) { width: 130px; }
.shipment-table th:nth-child(8) { width: 170px; }
.shipment-table th:nth-child(9) { width: 162px; }

.shipment-table tbody tr {
  border-bottom: 1px solid rgba(var(--ds-primary-rgb), .12);
  transition: background .15s ease;
}

.shipment-table tbody tr:last-child {
  border-bottom: 0;
}

.shipment-table tbody tr:hover {
  background: rgba(var(--ds-primary-border-rgb), .16);
}

.shipment-table td small,
.shipment-table td strong {
  display: block;
}

.shipment-table td small {
  margin-top: 3px;
  color: var(--ds-text-light);
  font-size: 11.5px;
  line-height: 1.3;
}

.shipment-table td:nth-child(1) small,
.shipment-table .shipment-owner-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shipment-note-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shipment-table .shipment-customer-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-due-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.shipment-due-date.is-overdue > span:first-child {
  color: var(--ds-danger);
  font-weight: 700;
}

.shipment-overdue-badge.status-badge {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.shipment-owner-name {
  display: block;
  min-width: 0;
  color: var(--ds-text);
  font-weight: 500;
}

.inline-select {
  min-height: 38px;
  border: 1px solid var(--ds-primary-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
  padding: 0 10px;
  font-weight: 700;
}

.avatar-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  font-weight: 700;
}

.shipment-table .inline-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-right: 28px;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.avatar-name i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--ds-sidebar);
  color: #fff;
  font-style: normal;
  font-size: 12px;
}

.shipment-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  color: #53625a;
  border-top: 1px solid var(--ds-border);
  font-size: 14px;
}

.shipment-pagination > div,
.shipment-pagination label,
.shipment-pagination nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shipment-pagination > div {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.shipment-pagination label {
  line-height: 1.25;
}

.shipment-pagination button {
  display: inline-grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: 9px;
  background: var(--ds-card);
  color: var(--ds-heading);
  font-weight: 700;
}

.shipment-pagination button svg {
  width: 14px;
  height: 14px;
}

.shipment-pagination select {
  min-width: 106px;
  min-height: 38px;
  border: 1px solid var(--ds-border);
  border-radius: 9px;
  background: var(--ds-card);
  color: var(--ds-heading);
  padding: 0 12px;
  font-weight: 700;
}

.shipment-pagination button.active,
.shipment-pagination button[aria-current="page"] {
  background: var(--ds-primary);
  color: #fff;
  border-color: var(--ds-primary);
}

.shipment-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shipment-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shipment-info-grid article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.shipment-info-grid svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--ds-primary);
  padding: 8px;
  border-radius: 10px;
  background: var(--ds-primary-light);
}

.shipment-info-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ds-heading);
  font-size: 13.5px;
}

.shipment-info-grid p {
  margin: 0;
  color: var(--ds-text);
  font-size: 12.5px;
  line-height: 1.35;
}

.shipment-table .row-actions {
  gap: 7px;
  justify-content: flex-start;
}

.shipment-table .row-actions .icon-action {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.shipment-table .row-actions .icon-action.review {
  color: var(--ds-primary-hover);
  border-color: var(--ds-primary-border);
  background: var(--ds-primary-light);
}

.shipment-filter-card > .compact-command {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  white-space: nowrap;
}

.icon-action.success {
  color: var(--ds-success);
  border-color: rgba(34, 197, 94, .32);
  background: rgba(34, 197, 94, .08);
}

.icon-action.success:hover {
  color: #fff;
  background: var(--ds-success);
  border-color: var(--ds-success);
}

@media (max-width: 1280px) {
  .shipment-filter-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shipment-search {
    grid-column: auto;
  }

  .shipment-table {
    min-width: 980px;
  }

}

@media (max-width: 860px) {
  .topbar:has(+ #section-root .shipment-screen) {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar:has(+ #section-root .shipment-screen) .topbar-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .shipment-filter-card {
    grid-template-columns: 1fr 1fr;
  }

  .shipment-search {
    grid-column: 1 / -1;
  }

  .shipment-filter-card > .compact-command,
  .shipment-info-grid {
    grid-column: 1 / -1;
  }

  .shipment-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .shipment-pagination > div {
    justify-content: flex-start;
  }

  .shipment-table {
    min-width: 920px;
  }
}

@media (max-width: 560px) {
  .shipment-filter-card {
    grid-template-columns: 1fr;
  }

  .shipment-filter-card > .compact-command,
  .shipment-info-grid {
    grid-column: auto;
  }
}

/* Build 050 - Shipment responsive parity with Work Orders. */
.shipment-table-wrap-landscape,
.shipment-card-grid {
  display: none;
}

.shipment-stacked-cell {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.shipment-stacked-cell strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ds-heading);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shipment-stacked-cell small {
  display: block;
  overflow: hidden;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-card-grid {
  gap: 12px;
  padding: 12px;
}

.shipment-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  padding: 14px;
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.shipment-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.shipment-card button.work-order-code,
.shipment-table button.work-order-code {
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.shipment-card button.work-order-code:hover,
.shipment-table button.work-order-code:hover {
  color: var(--ds-primary);
}

.shipment-card header small {
  display: block;
  margin-top: 4px;
  color: var(--ds-text);
  font-size: 12px;
  line-height: 1.35;
}

.shipment-card .shipment-owner-name {
  justify-self: end;
}

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

.shipment-card dl div {
  display: grid;
  min-width: 0;
  gap: 4px;
  border: 1px solid rgba(var(--ds-primary-border-rgb), .7);
  border-radius: 9px;
  background: var(--ds-bg);
  padding: 10px;
}

.shipment-card dt,
.shipment-card-method > span {
  color: #526a82;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.shipment-card dd {
  overflow: hidden;
  margin: 0;
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.shipment-card-method {
  display: grid;
  gap: 5px;
}

.shipment-card .inline-select {
  width: 100%;
  min-width: 0;
}

.shipment-card-note {
  margin: 0;
  border-top: 1px solid var(--ds-border);
  padding-top: 10px;
  color: var(--ds-text);
  font-size: 12.5px;
  line-height: 1.35;
}

.shipment-card footer .row-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.shipment-card footer .icon-action {
  width: 100%;
  min-width: 0;
  height: 42px;
  border-radius: 9px;
}

@media (min-width: 861px) and (max-width: 1280px) {
  .shipment-table-wrap-desktop {
    display: none;
  }

  .shipment-table-wrap-landscape {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .shipment-table-wrap-landscape .shipment-table {
    min-width: 1120px;
  }

  .shipment-landscape-col-code { width: 150px; }
  .shipment-landscape-col-customer { width: 210px; }
  .shipment-landscape-col-dates { width: 170px; }
  .shipment-landscape-col-items { width: 70px; }
  .shipment-landscape-col-method { width: 190px; }
  .shipment-landscape-col-owner { width: 170px; }
  .shipment-landscape-col-actions { width: 160px; }

  .shipment-table-landscape .inline-select {
    min-height: 34px;
    padding: 0 24px 0 8px;
    font-size: 12px;
  }

  .shipment-table-landscape .shipment-owner-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .shipment-table-landscape .row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
  }

  .shipment-table-landscape .row-actions .icon-action {
    width: 31px;
    min-width: 31px;
    height: 31px;
  }
}

@media (max-width: 860px) {
  .shipment-table-wrap-desktop,
  .shipment-table-wrap-landscape {
    display: none;
  }

  .shipment-card-grid {
    display: grid;
  }

  .shipment-list-card {
    overflow: visible;
  }

  .shipment-pagination {
    gap: 14px;
  }

  .shipment-pagination nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .shipment-card-grid {
    padding: 10px;
  }

  .shipment-card {
    padding: 12px;
  }

  .shipment-card header {
    grid-template-columns: 1fr;
  }

  .shipment-card .shipment-owner-name {
    justify-self: start;
  }

  .shipment-card dl {
    grid-template-columns: 1fr;
  }

  .shipment-card footer .row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shipment-pagination > div,
  .shipment-pagination label,
  .shipment-pagination nav {
    width: 100%;
  }

  .shipment-pagination select {
    flex: 1;
    min-width: 0;
  }
}

/* Build 051.1 - Archived work orders UX. */
.content:has(> .topbar + #section-root .archive-screen) {
  padding-top: 18px;
}

.topbar:has(+ #section-root .archive-screen) {
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), 0.04);
}

.topbar:has(+ #section-root .archive-screen) .title-block {
  min-width: 0;
}

.topbar:has(+ #section-root .archive-screen) .title-block p {
  margin: 0 0 4px;
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.topbar:has(+ #section-root .archive-screen) .title-block h1 {
  margin: 0;
  font-size: clamp(24px, 1.95vw, 28px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}

.topbar:has(+ #section-root .archive-screen) .title-block span {
  max-width: 720px;
  margin-top: 5px;
  color: #526a82;
  font-size: 12.5px;
  line-height: 1.35;
}

.topbar:has(+ #section-root .archive-screen) .topbar-actions {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.topbar:has(+ #section-root .archive-screen) .notification-trigger,
.topbar:has(+ #section-root .archive-screen) .profile-chip {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

.archive-screen,
.archive-screen > *,
.archive-filter-card,
.archive-filter-card *,
.archive-list-card,
.archive-table-wrap,
.archive-table,
.archive-card,
.archive-info-grid,
.archive-pagination {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.archive-screen {
  display: grid;
  width: 100%;
  gap: 12px;
}

.archive-filter-card label > span,
.archive-card dt {
  margin: 0;
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.archive-filter-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.archive-filter-primary,
.archive-filter-dates {
  display: grid;
  gap: 8px 10px;
  align-items: end;
}

.archive-filter-primary {
  grid-template-columns: minmax(260px, 1.6fr) minmax(126px, .72fr) minmax(150px, 1fr) minmax(150px, 1fr);
}

.archive-filter-dates {
  grid-template-columns: repeat(4, minmax(132px, 1fr)) minmax(136px, .7fr);
}

.archive-filter-card label {
  display: grid;
  gap: 4px;
  color: var(--ds-text);
  font-weight: 700;
}

.archive-filter-card label > svg {
  display: none;
}

.archive-filter-card input,
.archive-filter-card select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-heading);
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.archive-filter-card input:focus,
.archive-filter-card select:focus {
  outline: 0;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), .14);
}

.archive-filter-card > .archive-filter-dates > .compact-command {
  align-self: end;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  white-space: nowrap;
}

.archive-list-card {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.archive-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.archive-table-wrap-landscape,
.archive-card-grid {
  display: none;
}

.archive-table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
  border-collapse: collapse;
}

.archive-col-code { width: 140px; }
.archive-col-customer { width: 190px; }
.archive-col-reference { width: 160px; }
.archive-col-created { width: 132px; }
.archive-col-shipped { width: 132px; }
.archive-col-owner { width: 150px; }
.archive-col-status { width: 130px; }
.archive-col-actions { width: 112px; }

.archive-table th,
.archive-table td {
  text-align: left;
  vertical-align: middle;
}

.archive-table th {
  border-bottom: 1px solid var(--ds-border);
}

.archive-table tbody tr {
  border-bottom: 1px solid rgba(var(--ds-primary-border-rgb), .72);
  transition: background .15s ease;
}

.archive-table tbody tr:last-child {
  border-bottom: 0;
}

.archive-table tbody tr:hover {
  background: rgba(var(--ds-primary-border-rgb), .16);
}

.archive-table tbody tr[data-row-open],
.archive-card[data-row-open],
.shipment-table tbody tr[data-row-open],
.shipment-card[data-row-open] {
  cursor: pointer;
}

.archive-table tbody tr[data-row-open]:focus-visible,
.shipment-table tbody tr[data-row-open]:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: -2px;
  background: rgba(var(--ds-primary-border-rgb), .2);
}

.archive-card[data-row-open]:hover,
.archive-card[data-row-open]:focus-visible,
.shipment-card[data-row-open]:hover,
.shipment-card[data-row-open]:focus-visible {
  border-color: var(--ds-primary-border);
  background: rgba(var(--ds-primary-rgb), .04);
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

.archive-table td small,
.archive-table td strong {
  display: block;
}

.archive-table td small {
  margin-top: 3px;
  color: var(--ds-text-light);
  font-size: 11.5px;
  line-height: 1.3;
}

.archive-table .work-order-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
}

.archive-date,
.archive-customer-name,
.archive-owner-name {
  display: block;
  overflow: hidden;
  color: var(--ds-heading);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-table td:nth-child(1) small,
.archive-table td:nth-child(2) small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.archive-stacked-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.archive-reference-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.archive-reference-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-heading);
  font-size: 12.5px;
  font-weight: 500;
}

.archive-stacked-cell small {
  display: block;
  overflow: hidden;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-status-badge.status-badge.muted {
  color: var(--ds-primary-hover);
  border-color: var(--ds-primary-border);
  background: var(--ds-primary-light);
}

.archive-row-actions {
  gap: 7px;
  justify-content: flex-start;
}

.archive-row-actions .icon-action {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.archive-row-actions .archive-copy-action {
  color: var(--ds-primary-hover);
  border-color: var(--ds-primary-border);
  background: var(--ds-primary-light);
}

.archive-card-grid {
  gap: 12px;
  padding: 12px;
}

.archive-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.archive-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.archive-card header .work-order-code {
  display: block;
  color: var(--ds-heading);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}

.archive-card header small {
  display: block;
  margin-top: 4px;
  color: var(--ds-text);
  font-size: 12px;
  line-height: 1.35;
}

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

.archive-card dl div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(var(--ds-primary-border-rgb), .7);
  border-radius: 8px;
  background: var(--ds-bg);
}

.archive-card dd {
  overflow: hidden;
  margin: 0;
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.archive-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.archive-card-actions .compact-command {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.archive-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-top: 1px solid var(--ds-border);
  color: #53625a;
  font-size: 13.5px;
}

.archive-pagination > div,
.archive-pagination label,
.archive-pagination nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.archive-pagination > div {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.archive-pagination button {
  display: inline-grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-heading);
  font-weight: 700;
}

.archive-pagination button svg {
  width: 14px;
  height: 14px;
}

.archive-pagination select {
  min-width: 72px;
  min-height: 38px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-heading);
  padding: 0 12px;
  font-weight: 700;
}

.archive-pagination button.active,
.archive-pagination button[aria-current="page"] {
  border-color: var(--ds-primary);
  color: #fff;
  background: var(--ds-primary);
}

.archive-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.archive-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.archive-info-grid article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.archive-info-grid svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.archive-info-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ds-heading);
  font-size: 13.5px;
}

.archive-info-grid p {
  margin: 0;
  color: var(--ds-text);
  font-size: 12.5px;
  line-height: 1.35;
}

.archive-list-state {
  display: grid;
  justify-items: center;
  gap: 13px;
  min-height: 420px;
  padding: 56px 24px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
  text-align: center;
}

.archive-list-state > svg,
.archive-empty-illustration {
  display: grid;
  place-items: center;
  width: 108px;
  height: 92px;
  color: var(--ds-primary);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(var(--ds-primary-border-rgb), .28), rgba(246, 250, 253, .86));
}

.archive-list-state > svg {
  width: 58px;
  height: 58px;
  padding: 16px;
}

.archive-empty-illustration svg {
  width: 58px;
  height: 58px;
}

.archive-list-state h2 {
  margin: 4px 0 0;
  color: var(--ds-heading);
  font-size: 22px;
  letter-spacing: 0;
}

.archive-list-state p {
  max-width: 560px;
  margin: 0;
  color: var(--ds-text);
  font-size: 15px;
  line-height: 1.45;
}

.archive-state-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1280px) {
  .archive-filter-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-search {
    grid-column: 1 / -1;
  }

  .archive-filter-dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-filter-card > .archive-filter-dates > .compact-command {
    grid-column: 1 / -1;
  }

  .archive-table {
    min-width: 1100px;
  }
}

@media (min-width: 861px) and (max-width: 1280px) {
  .archive-table-wrap-desktop {
    display: none;
  }

  .archive-table-wrap-landscape {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .archive-table-landscape {
    min-width: 1020px;
  }

  .archive-landscape-col-code { width: 145px; }
  .archive-landscape-col-customer { width: 190px; }
  .archive-landscape-col-reference { width: 150px; }
  .archive-landscape-col-dates { width: 180px; }
  .archive-landscape-col-owner { width: 145px; }
  .archive-landscape-col-status { width: 120px; }
  .archive-landscape-col-actions { width: 90px; }

  .archive-table-landscape .row-actions {
    justify-content: flex-end;
    gap: 4px;
  }

  .archive-table-landscape .icon-action {
    width: 31px;
    min-width: 31px;
    height: 31px;
  }

  .archive-table-landscape .status-badge {
    padding-inline: 7px;
    font-size: 10.5px;
  }
}

@media (max-width: 860px) {
  .topbar:has(+ #section-root .archive-screen) {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar:has(+ #section-root .archive-screen) .topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }

  .archive-table-wrap-desktop,
  .archive-table-wrap-landscape {
    display: none;
  }

  .archive-card-grid {
    display: grid;
  }

  .archive-list-card {
    overflow: visible;
  }

  .archive-pagination {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .archive-pagination > div {
    justify-content: flex-start;
  }

  .archive-pagination nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .archive-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .archive-screen {
    gap: 10px;
  }

  .archive-filter-card,
  .archive-card {
    padding: 12px;
  }

  .archive-filter-primary,
  .archive-filter-dates,
  .archive-card header,
  .archive-card dl,
  .archive-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .archive-search,
  .archive-filter-card > .archive-filter-dates > .compact-command {
    grid-column: auto;
  }

  .archive-card-grid {
    padding: 10px;
  }

  .archive-pagination > div,
  .archive-pagination label,
  .archive-pagination nav {
    width: 100%;
  }

  .archive-pagination select {
    flex: 1;
    min-width: 0;
  }

  .archive-state-actions,
  .archive-state-actions .compact-command {
    width: 100%;
  }
}

.notes-screen {
  display: grid;
  gap: 22px;
}

.notes-tabs {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  border-bottom: 1px solid var(--ds-border);
}

.notes-tabs button {
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font-weight: 600;
  padding: 18px 0;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.notes-tabs button.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
}

.notes-filter-card,
.notes-archive-card,
.notes-detail-panel,
.notes-list-panel,
.notes-info-banner {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}

.notes-filter-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(6, minmax(140px, 1fr));
  gap: 18px;
  padding: 22px;
}

.notes-filter-card label,
.note-modal-body label {
  display: grid;
  gap: 8px;
  font-weight: 600;
  color: var(--ds-heading);
}

.notes-filter-card input,
.notes-filter-card select,
.note-modal-body input,
.note-modal-body select,
.note-modal-body textarea {
  min-height: 48px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  padding: 0 14px;
  color: var(--ds-text);
  background: var(--ds-card);
  font: inherit;
}

.note-modal-body textarea {
  padding: 14px;
  resize: vertical;
}

.note-priority-field,
.problem-inline-priority {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.note-priority-field legend,
.problem-inline-priority legend {
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 700;
}

.note-priority-options,
.problem-inline-priority > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.note-priority-choice,
.problem-priority-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
  color: var(--ds-text);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.note-priority-choice {
  justify-content: flex-start;
  padding: 0 36px 0 14px;
  opacity: .72;
}

.note-priority-choice input,
.problem-priority-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.note-priority-choice:hover,
.problem-priority-choice:hover {
  background: var(--ds-primary-light);
  border-color: var(--ds-primary-border);
}

.note-priority-choice.active,
.note-priority-choice:has(input:checked),
.problem-priority-choice.active,
.problem-priority-choice:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  color: var(--ds-heading);
  box-shadow: var(--ds-focus-ring);
}

.note-priority-choice.active,
.note-priority-choice:has(input:checked) {
  opacity: 1;
}

.note-priority-choice .note-priority-check {
  position: absolute;
  right: 10px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: var(--ds-card);
  background: var(--ds-primary);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .18s ease, transform .18s ease;
}

.note-priority-choice.active .note-priority-check,
.note-priority-choice:has(input:checked) .note-priority-check {
  opacity: 1;
  transform: scale(1);
}

.notes-filter-card input:focus,
.notes-filter-card select:focus,
.note-modal-body input:focus,
.note-modal-body select:focus,
.note-modal-body textarea:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus-ring);
}

.notes-filter-card .input-with-icon {
  position: relative;
}

.notes-filter-card .input-with-icon svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-text-light);
}

.notes-filter-card .input-with-icon input {
  width: 100%;
  padding-right: 42px;
}

.notes-clear-filter {
  align-self: end;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--ds-primary);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notes-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr);
  gap: 18px;
  align-items: start;
}

.notes-list-panel,
.notes-detail-panel,
.notes-archive-card {
  overflow: hidden;
}

.notes-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

.notes-list-toolbar div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ds-text-light);
}

.notes-list-toolbar select {
  min-height: 42px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  padding: 0 12px;
  color: var(--ds-heading);
  background: var(--ds-card);
}

.note-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border-top: 1px solid var(--ds-border);
  cursor: pointer;
  background: var(--ds-card);
  transition: background .18s ease, box-shadow .18s ease;
}

.note-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ds-primary-border);
}

.note-row.priority-high::before,
.note-row.priority-critical::before {
  background: var(--ds-danger);
}

.note-row.priority-medium::before {
  background: var(--ds-warning);
}

.note-row.active,
.note-row:hover {
  background: var(--ds-primary-light);
}

.note-row-icon,
.notes-empty-detail > svg {
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-button);
  background: var(--ds-info-bg);
  color: var(--ds-primary);
  display: grid;
  place-items: center;
}

.note-row-main {
  display: grid;
  gap: 8px;
}

.note-row-main > div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.note-row-main p,
.note-row time,
.note-detail small,
.note-more,
.note-modal-files,
.note-relation-hint {
  color: var(--ds-text-light);
}

.note-detail {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.note-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.note-detail-header > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.priority-pill,
.note-relation-badge {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
}

.priority-pill.high,
.priority-pill.critical {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.priority-pill.medium {
  color: var(--ds-warning);
  background: var(--ds-warning-bg);
}

.priority-pill.low,
.note-relation-badge {
  color: var(--ds-primary);
  background: var(--ds-info-bg);
}

.note-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
}

.note-meta-grid > div {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-right: 1px solid var(--ds-border);
}

.note-meta-grid > div:nth-child(3n) {
  border-right: 0;
}

.note-attachments,
.note-modal-body,
.note-modal-grid {
  display: grid;
  gap: 14px;
}

.note-attachment,
.note-modal-files > span {
  display: grid;
  align-items: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  padding: 12px;
  background: var(--ds-card);
  color: var(--ds-text);
  text-align: left;
}

.note-attachment {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
}

.note-modal-files > span {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.note-attachment span:first-child,
.note-modal-files > span svg {
  color: var(--ds-primary);
}

.note-modal-files > span > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  min-width: 0;
}

.note-modal-files > span strong,
.note-modal-files > span small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-modal-files > span small {
  grid-column: 2;
  color: var(--ds-text-light);
}

.note-attachment img,
.note-attachment > svg {
  width: 52px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--ds-info-bg);
}

.note-attachment > svg {
  padding: 10px;
  color: var(--ds-primary);
}

.note-attachment strong,
.note-attachment small {
  display: block;
}

.note-attachment em {
  color: var(--ds-primary);
  font-style: normal;
  font-weight: 800;
}

.note-attachment-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-input);
  padding: 14px;
  color: var(--ds-text-light);
  background: var(--ds-bg);
  font-weight: 700;
}

.note-archive-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notes-empty-state,
.notes-empty-detail {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px;
  color: var(--ds-text);
}

.notes-empty-state.compact {
  min-height: 320px;
}

.notes-illustration {
  width: 220px;
  max-width: 58%;
}

.notes-info-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  color: var(--ds-text);
  background: var(--ds-primary-light);
}

.note-table-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.note-table-title svg {
  color: var(--ds-primary);
}

.note-table-title span {
  display: grid;
  gap: 4px;
}

.note-table-title small {
  color: var(--ds-text-light);
}

.note-modal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.note-upload-zone {
  display: grid;
  width: 100%;
  place-items: center;
  gap: 8px;
  min-height: 120px;
  border: 1px dashed var(--ds-primary-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-primary-light);
  color: var(--ds-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.note-upload-zone:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.note-modal-files {
  min-height: 44px;
}

.note-modal-files span {
  justify-content: space-between;
}

.note-modal-files button {
  border: 0;
  background: transparent;
  color: var(--ds-danger);
  cursor: pointer;
}

.modal-panel.note-preview-modal,
.modal-panel.note-edit-modal {
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .modal-panel.note-preview-modal,
  .modal-panel.note-edit-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 24px 18px;
  }
}

@media (max-width: 1180px) {
  .notes-filter-card,
  .notes-workspace {
    grid-template-columns: 1fr;
  }

  .note-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .note-modal-grid,
  .note-meta-grid {
    grid-template-columns: 1fr;
  }

  .note-row {
    grid-template-columns: 44px 1fr;
  }

  .note-row time {
    grid-column: 2;
  }
}

.settings-page {
  display: grid;
  gap: 24px;
}

.settings-section {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
  padding: var(--ds-space-card);
}

.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.settings-section-header h2,
.settings-section-header h3 {
  margin: 0 0 6px;
  color: var(--ds-heading);
  font-size: 22px;
  font-weight: 700;
}

.settings-section-header p,
.settings-password-card small,
.settings-mini-card small,
.settings-info-item small,
.settings-module-card small,
.settings-module-card p,
.settings-mini-card em,
.settings-password-note {
  margin: 0;
  color: var(--ds-text-light);
}

.settings-company-grid,
.settings-account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 18px;
}

.settings-info-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.settings-info-item,
.settings-logo-panel,
.settings-password-card,
.settings-mini-card,
.settings-module-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
}

.settings-info-item {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.settings-info-item svg,
.settings-module-card > svg,
.settings-mini-card > svg {
  width: 22px;
  height: 22px;
  color: var(--ds-primary);
  flex: 0 0 auto;
}

.settings-info-item span,
.settings-mini-card span,
.settings-module-card span,
.settings-password-card span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.settings-info-item strong,
.settings-password-card strong,
.settings-mini-card strong,
.settings-module-card strong {
  color: var(--ds-heading);
  overflow-wrap: anywhere;
}

.settings-logo-panel {
  min-height: 120px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
}

.settings-logo-panel > span {
  justify-self: start;
  color: var(--ds-text-light);
  font-size: 13px;
}

.settings-logo-panel img {
  max-width: min(300px, 88%);
  max-height: 86px;
  object-fit: contain;
}

.settings-logo-panel strong {
  color: var(--ds-primary);
  font-size: 24px;
}

.settings-password-card {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.settings-app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.settings-module-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-left: 4px solid var(--ds-primary);
}

.settings-module-card .status-badge {
  margin-left: auto;
}

.settings-mini-card {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

.materials-currency-settings-card .settings-section-header {
  align-items: center;
  margin-bottom: 16px;
}

.materials-currency-settings-value {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-primary-light);
}

.materials-currency-settings-value > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--ds-primary);
}

.materials-currency-settings-value > span,
.materials-currency-choice span {
  display: grid;
  gap: 3px;
}

.materials-currency-settings-value small,
.materials-currency-settings-value em,
.materials-currency-choice small {
  color: var(--ds-text-light);
  font-style: normal;
}

.materials-currency-settings-value strong {
  color: var(--ds-heading);
  font-size: 18px;
}

.materials-currency-settings-value em {
  margin-left: auto;
  font-size: 13px;
}

.materials-currency-settings-error {
  margin: 12px 0 0;
}

.materials-currency-setup {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.materials-currency-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.materials-currency-choices legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--ds-heading);
  font-weight: 700;
}

.materials-currency-choice {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
  cursor: pointer;
}

.materials-currency-choice:hover {
  border-color: var(--ds-primary-border);
}

.materials-currency-choice.selected {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  box-shadow: 0 0 0 1px var(--ds-primary);
}

.materials-currency-choice input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--ds-primary);
}

.materials-currency-choice input:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 3px;
}

.materials-currency-choice strong {
  color: var(--ds-heading);
  font-size: 17px;
}

.settings-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.settings-edit-grid.compact {
  grid-template-columns: 1fr;
}

.settings-logo-upload {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  padding: 16px;
  background: var(--ds-primary-light);
}

.settings-logo-upload > span {
  color: var(--ds-heading);
  font-weight: 700;
}

.settings-logo-upload > div {
  min-height: 110px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--ds-primary-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
  color: var(--ds-primary);
  text-align: center;
}

.settings-logo-upload img {
  max-width: min(340px, 92%);
  max-height: 96px;
  object-fit: contain;
}

.settings-logo-upload nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-modal-error,
.field-error {
  color: var(--ds-danger);
  font-style: normal;
  font-weight: 600;
}

.settings-modal-form-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: var(--ds-radius-input);
  background: rgba(220, 38, 38, 0.08);
}

.settings-password-note {
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-primary-light);
}

.modal-panel.settings-modal {
  max-width: 880px;
}

.modal-panel.compact-settings-modal {
  max-width: 560px;
}

@media (max-width: 920px) {
  .settings-company-grid,
  .settings-account-grid,
  .settings-edit-grid {
    grid-template-columns: 1fr;
  }

  .settings-password-card,
  .settings-section-header {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .settings-section {
    padding: 18px;
  }

  .materials-currency-settings-value {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .materials-currency-settings-value em {
    width: 100%;
    margin-left: 38px;
  }

  .materials-currency-choices {
    grid-template-columns: 1fr;
  }
}

.nx-dash {
  display: grid;
  gap: 18px;
  color: var(--ds-text);
}

.nx-dash button {
  font: inherit;
}

.nx-dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 26px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.nx-dash-hero-copy p,
.nx-dash-section-head p {
  margin: 0 0 8px;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nx-dash-hero-copy h1 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 32px;
  line-height: 1.12;
}

.nx-dash-hero-copy span {
  display: block;
  margin-top: 9px;
  color: var(--ds-text);
  font-size: 16px;
  font-weight: 650;
}

.nx-dash-hero-side {
  display: grid;
  justify-items: end;
  gap: 10px;
  min-width: 220px;
}

.nx-dash-date-chip,
.nx-refresh-control,
.nx-dash-hero-side small {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.nx-dash-date-chip {
  padding: 9px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
}

.nx-refresh-control {
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--ds-primary-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.nx-refresh-control:hover {
  background: var(--ds-primary-strong);
}

.nx-dash-hero-side small {
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 700;
}

.nx-dash-section,
.nx-dash-panel {
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.nx-dash-priority {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-color: var(--ds-primary-border);
}

.nx-dash-section-head,
.nx-dash-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.nx-dash-section-head h2,
.nx-dash-panel-head h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 19px;
  line-height: 1.25;
}

.nx-dash-panel-head p {
  margin: 5px 0 0;
  color: var(--ds-text-light);
  font-size: 13px;
  font-weight: 650;
}

.nx-dash-priority-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nx-dash-priority-actions button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-bg-soft);
  color: var(--ds-heading);
  font-weight: 800;
  cursor: pointer;
}

.nx-dash-priority-actions button:hover {
  border-color: var(--ds-primary-border);
  background: var(--ds-primary-light);
}

.nx-dash-queue {
  display: grid;
  gap: 8px;
}

.nx-dash-queue-item,
.nx-dash-empty-priority {
  display: grid;
  grid-template-columns: 42px 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-bg-soft);
  color: var(--ds-text);
  text-align: left;
  cursor: pointer;
}

.nx-dash-queue-item:hover,
.nx-dash-empty-priority:hover,
.nx-dash-stat:hover,
.nx-dash-ready-row:hover,
.nx-dash-signal-panel button:hover,
.nx-dash-suggestion:hover {
  border-color: var(--ds-primary-border);
  background: var(--ds-primary-light);
  box-shadow: var(--ds-shadow-card);
}

.nx-dash-queue-item em {
  color: var(--ds-text-light);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.nx-dash-queue-item i,
.nx-dash-empty-priority > svg,
.nx-dash-stat i,
.nx-dash-ready-row > svg,
.nx-dash-suggestion i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--ds-info-bg);
  color: var(--ds-primary);
  font-style: normal;
}

.nx-dash-queue-item.danger i {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}

.nx-dash-queue-item.warning i {
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.nx-dash-queue-item strong,
.nx-dash-queue-item small,
.nx-dash-empty-priority strong,
.nx-dash-empty-priority small,
.nx-dash-stat strong,
.nx-dash-stat small,
.nx-dash-ready-row strong,
.nx-dash-ready-row small,
.nx-dash-suggestion strong,
.nx-dash-suggestion small {
  display: block;
}

.nx-dash-queue-item strong,
.nx-dash-empty-priority strong {
  color: var(--ds-heading);
  font-size: 14px;
}

.nx-dash-queue-item small,
.nx-dash-empty-priority small {
  margin-top: 3px;
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 650;
}

.nx-dash-queue-item b {
  color: var(--ds-heading);
  font-size: 12px;
  white-space: nowrap;
}

.nx-dash-empty-priority {
  grid-template-columns: 42px minmax(0, 1fr);
}

.nx-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.nx-dash-stat {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 13px;
  align-items: center;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
  color: var(--ds-heading);
  text-align: left;
  cursor: pointer;
}

.nx-dash-stat em {
  display: block;
  margin-top: 4px;
  color: var(--ds-heading);
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.nx-dash-stat small {
  margin-top: 7px;
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 700;
}

.nx-dash-operations-grid,
.nx-dash-context-grid {
  display: grid;
  gap: 14px;
}

.nx-dash-operations-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
}

.nx-dash-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nx-dash-panel {
  overflow: hidden;
}

.nx-dash-panel-head {
  padding: 18px 20px 12px;
}

.nx-dash-panel-head button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ds-primary);
  font-weight: 800;
  cursor: pointer;
}

.nx-dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.nx-dash-table th,
.nx-dash-table td {
  border-top: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.nx-dash-op-name,
.nx-dash-op-name + small {
  display: block;
}

.nx-dash-op-name + small {
  margin-top: 4px;
  color: var(--ds-danger);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-station-mini,
.nx-dash-person-row,
.nx-dash-ready-row,
.nx-dash-signal-panel button,
.nx-dash-suggestion {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dashboard-station-mini svg {
  width: 18px;
  height: 18px;
  color: var(--ds-primary);
}

.nx-dash-list,
.nx-dash-people-list,
.nx-dash-suggestion-list {
  display: grid;
  gap: 8px;
  padding: 0 18px 18px;
}

.nx-dash-ready-row,
.nx-dash-signal-panel button,
.nx-dash-suggestion {
  width: 100%;
  min-height: 56px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-input);
  background: transparent;
  color: var(--ds-text);
  text-align: left;
  cursor: pointer;
}

.nx-dash-ready-row span,
.nx-dash-signal-panel button span,
.nx-dash-suggestion span {
  flex: 1 1 auto;
  min-width: 0;
}

.nx-dash-ready-row em,
.nx-dash-person-row em,
.nx-dash-suggestion b {
  color: var(--ds-text-light);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.nx-dash-person-row {
  justify-content: space-between;
  min-height: 44px;
}

.nx-dash-person-row i {
  display: grid;
  flex: 0 0 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: var(--ds-info-bg);
  color: var(--ds-primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.nx-dash-person-row span {
  flex: 1 1 auto;
  min-width: 0;
}

.nx-dash-person-row strong,
.nx-dash-person-row small,
.nx-dash-signal-panel strong,
.nx-dash-signal-panel small {
  display: block;
}

.nx-dash-person-row small,
.nx-dash-signal-panel small,
.nx-dash-suggestion small {
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 650;
}

.nx-dash-signal-panel {
  padding-bottom: 8px;
}

.nx-dash-signal-panel button {
  margin: 0 18px 8px;
  width: calc(100% - 36px);
}

.nx-dash-suggestions {
  box-shadow: none;
}

.nx-dash-section-head.compact {
  padding: 18px 20px 2px;
}

.nx-dash-suggestion {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
}

.nx-dash-empty-line {
  display: grid;
  min-height: 66px;
  place-items: center;
  color: var(--ds-text-light);
  font-weight: 800;
  text-align: center;
}

@media (min-width: 1301px) {
  .nx-dash-queue-item:nth-child(n+9) {
    display: none;
  }
}

@media (max-width: 1300px) {
  .nx-dash-hero,
  .nx-dash-operations-grid,
  .nx-dash-context-grid {
    grid-template-columns: 1fr;
  }

  .nx-dash-hero-side {
    justify-items: start;
  }

  .nx-dash-queue-item:nth-child(n+6) {
    display: none;
  }
}

@media (max-width: 760px) {
  .nx-dash-hero,
  .nx-dash-priority,
  .nx-dash-panel-head {
    padding: 16px;
  }

  .nx-dash-hero-copy h1 {
    font-size: 26px;
  }

  .nx-dash-hero-side,
  .nx-refresh-control,
  .nx-dash-date-chip {
    width: 100%;
  }

  .nx-dash-stats {
    grid-template-columns: 1fr;
  }

  .nx-dash-section-head,
  .nx-dash-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .nx-dash-priority-actions {
    width: 100%;
  }

  .nx-dash-priority-actions button {
    flex: 1 1 0;
    justify-content: center;
  }

  .nx-dash-queue-item {
    grid-template-columns: 34px 34px minmax(0, 1fr);
  }

  .nx-dash-queue-item b {
    grid-column: 3;
    white-space: normal;
  }

  .nx-dash-table {
    min-width: 640px;
  }

  .nx-dash-operations {
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .nx-dash-queue-item:nth-child(n+4) {
    display: none;
  }

  .nx-dash-queue-item,
  .nx-dash-suggestion {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .nx-dash-queue-item em,
  .nx-dash-suggestion b {
    display: none;
  }
}
/* Dashboard operational command center */
.content.content-dashboard { box-sizing:border-box; height:100vh; padding:14px 20px; overflow:hidden; }
.nx-command-center { grid-template-rows:auto auto auto auto 224px; align-content:start; gap:10px; width:100%; min-width:0; min-height:0; }
.nx-command-header,.nx-command-kpi,.nx-command-panel { border:1px solid var(--ds-border); border-radius:var(--ds-radius-card); background:var(--ds-card); box-shadow:var(--ds-shadow-card); }
.nx-command-header { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; padding:12px 16px; }
.nx-command-heading { min-width:240px; }
.nx-command-header-actions,.nx-command-date,.nx-command-refreshed { display:flex; align-items:center; }
.nx-command-header-actions { justify-content:flex-end; gap:8px; min-width:0; }
.nx-command-date { gap:7px; min-height:38px; padding:0 11px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-input); color:var(--ds-heading); background:var(--ds-bg-soft); font-size:12px; white-space:nowrap; }
.nx-command-date svg { width:16px; height:16px; }
.nx-command-refreshed { color:var(--ds-text-light); font-size:11px; font-weight:700; white-space:nowrap; }
.nx-command-header-actions .nx-refresh-control { flex:0 0 auto; width:38px; height:38px; min-height:38px; padding:0; gap:0; border-radius:999px; color:var(--ds-primary-hover); background:var(--ds-card); }
.nx-command-header-actions .nx-refresh-control svg { width:16px; height:16px; }
.nx-command-header-actions .nx-refresh-control:hover,.nx-command-header-actions .nx-refresh-control:focus-visible { color:var(--ds-primary-hover); background:var(--ds-bg-soft); }
.nx-command-header-actions .notification-trigger,.nx-command-header-actions .profile-chip { width:38px; height:38px; min-height:38px; }
.global-logout-action { flex:0 0 auto; width:38px; height:38px; min-height:38px; color:var(--ds-primary-hover); }
.global-logout-action svg { width:17px; height:17px; }
.nx-command-primary-kpis,.nx-command-secondary-kpis,.nx-command-focus-grid { display:grid; min-width:0; gap:10px; }
.nx-command-primary-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
.nx-dashboard-invoice-kpi>span { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; }
.nx-dashboard-overview .nx-dashboard-invoice-kpi strong { overflow:visible; font-size:13px; white-space:normal; }
.nx-dashboard-overview .nx-command-kpi.nx-dashboard-invoice-kpi em { margin:0; color:var(--ds-text); font-size:13px; font-weight:750; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; }
.nx-dashboard-overview .nx-dashboard-invoice-kpi.danger { border-color:var(--ds-border); }
.nx-dashboard-overview .nx-dashboard-invoice-kpi>i { color:var(--ds-primary); background:transparent; }
.nx-dashboard-overview .nx-dashboard-invoice-kpi.danger em { color:var(--ds-danger); }
.nx-dashboard-invoice-unavailable { padding:12px 14px; border:1px solid var(--ds-border); border-radius:10px; color:var(--ds-text-light); font-size:12px; }
.nx-command-secondary-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
.nx-command-secondary-kpis.count-1 { grid-template-columns:minmax(260px,1fr); }
.nx-command-secondary-kpis.count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.nx-command-kpi { display:grid; grid-template-columns:38px minmax(0,1fr) 16px; align-items:center; gap:11px; min-width:0; min-height:88px; padding:12px 14px; color:var(--ds-heading); text-align:left; cursor:pointer; transition:border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease; }
.nx-command-kpi.compact { min-height:66px; padding-block:9px; }
.nx-command-kpi:hover,.nx-command-kpi:focus-visible,.nx-command-list-row:hover,.nx-command-list-row:focus-visible { border-color:var(--ds-primary-border); box-shadow:var(--ds-shadow-hover); outline:0; }
.nx-command-kpi:hover { transform:translateY(-1px); }
.nx-command-kpi>i,.nx-command-row-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:10px; color:var(--ds-primary); background:var(--ds-info-bg); font-style:normal; }
.nx-command-kpi.warning>i,.nx-command-row-icon.warning { color:var(--ds-warning); background:var(--ds-warning-bg); }
.nx-command-kpi.danger>i { color:var(--ds-danger); background:var(--ds-danger-bg); }
.nx-command-kpi.success>i,.nx-command-row-icon.success { color:var(--ds-success); background:var(--ds-success-bg); }
.nx-command-kpi>i svg,.nx-command-row-icon svg { width:19px; height:19px; }
.nx-command-kpi>span,.nx-command-row-copy { min-width:0; }
.nx-command-kpi strong,.nx-command-kpi em,.nx-command-row-copy strong,.nx-command-row-copy small,.nx-command-row-meta b,.nx-command-row-meta small { display:block; }
.nx-command-kpi strong { overflow:hidden; color:var(--ds-text); font-size:12px; font-weight:800; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.nx-command-kpi em { margin-top:5px; color:var(--ds-heading); font-size:25px; font-style:normal; font-weight:900; line-height:1; }
.nx-command-kpi.compact em { font-size:21px; }
.nx-command-kpi>svg,.nx-command-list-row>svg { width:16px; height:16px; color:var(--ds-placeholder); }
.nx-command-deadline-values { display:flex; gap:14px; margin-top:5px; }
.nx-command-deadline-values em { display:flex; align-items:baseline; gap:4px; margin:0; }
.nx-command-deadline-values small { color:var(--ds-text-light); font-size:11px; font-style:normal; font-weight:750; }
.nx-command-focus-grid { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:0; }
.nx-command-panel { min-width:0; min-height:0; overflow:hidden; }
.nx-command-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:10px 14px; border-bottom:1px solid var(--ds-border); }
.nx-command-panel-head h2 { margin:0; color:var(--ds-heading); font-size:15px; font-weight:850; line-height:1.2; }
.nx-command-panel-head p { margin:3px 0 0; color:var(--ds-text-light); font-size:11px; font-weight:650; }
.nx-command-panel-head button { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 6px; border:0; color:var(--ds-primary); background:transparent; font-size:12px; font-weight:800; cursor:pointer; }
.nx-command-panel-head button svg { width:15px; height:15px; }
.nx-command-list { display:grid; align-content:start; min-height:0; padding:4px 8px 6px; }
.nx-command-list-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto 16px; align-items:center; gap:10px; width:100%; min-width:0; min-height:50px; padding:6px 7px; border:1px solid transparent; border-bottom-color:var(--ds-border); border-radius:8px; color:var(--ds-text); background:transparent; text-align:left; cursor:pointer; }
.nx-command-list-row:last-child { border-bottom-color:transparent; }
.nx-command-order-code { min-width:72px; padding:5px 7px; border-radius:7px; color:var(--ds-primary); background:var(--ds-info-bg); font-size:11px; font-weight:900; text-align:center; }
.nx-command-row-copy strong { overflow:hidden; color:var(--ds-heading); font-size:12px; font-weight:800; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.nx-command-row-copy small,.nx-command-row-meta small { overflow:hidden; margin-top:2px; color:var(--ds-text-light); font-size:10px; font-weight:650; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.nx-command-row-meta { min-width:90px; text-align:right; }
.nx-command-row-meta b { color:var(--ds-heading); font-size:11px; white-space:nowrap; }
.nx-command-row-meta b.danger { color:var(--ds-danger); }
.nx-command-row-meta b.warning { color:var(--ds-warning-text); }
.nx-command-empty { display:grid; min-height:150px; place-content:center; justify-items:center; gap:8px; color:var(--ds-text-light); font-size:12px; font-weight:750; text-align:center; }
.nx-command-empty svg { width:24px; height:24px; color:var(--ds-success); }
.nx-command-analytics-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; height:224px; }
.nx-command-analytics-card { box-sizing:border-box; display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; height:224px; padding:12px 14px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-card); background:var(--ds-card); box-shadow:var(--ds-shadow-card); }
.nx-command-analytics-card>header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.nx-command-analytics-card>header h2 { margin:0; color:var(--ds-heading); font-size:15px; font-weight:850; }
.nx-command-analytics-card>header small { color:var(--ds-text-light); font-size:10px; font-weight:750; }
.nx-command-donut-layout { display:grid; grid-template-columns:172px max-content; align-items:center; justify-content:center; gap:14px; min-height:0; }
.nx-command-donut { position:relative; display:grid; width:172px; height:172px; place-items:center; border-radius:50%; }
.nx-command-donut>span { position:relative; z-index:1; display:grid; width:76px; height:76px; place-content:center; justify-items:center; border-radius:50%; color:var(--ds-heading); background:var(--ds-card); }
.nx-command-donut>span strong { font-size:24px; line-height:1; }
.nx-command-donut>span small { margin-top:3px; color:var(--ds-text-light); font-size:9px; font-weight:700; }
.nx-command-donut-legend { display:grid; gap:6px; width:max-content; max-width:100%; min-width:0; }
.nx-command-donut-legend>button { display:grid; grid-template-columns:9px auto auto; align-items:center; gap:8px; width:max-content; max-width:100%; min-width:0; min-height:34px; padding:4px 7px; border:1px solid transparent; border-radius:8px; color:inherit; background:transparent; text-align:left; cursor:pointer; }
.nx-command-donut-legend>button:hover,.nx-command-donut-legend>button:focus-visible { border-color:var(--ds-primary-border); background:var(--ds-info-bg); outline:0; }
.nx-command-donut-legend i { width:9px; height:9px; border-radius:50%; }
.nx-command-donut-legend span { overflow:hidden; color:var(--ds-text); font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.nx-command-donut-legend strong { color:var(--ds-heading); font-size:13px; }
.chart-donut-svg.interactive [role="button"] { cursor:pointer; outline:none; }
.chart-donut-svg.interactive [role="button"]:focus-visible { filter:drop-shadow(0 0 5px rgba(var(--ds-primary-rgb),.65)); stroke-width:3; }
.nx-command-drilldown-modal { width:min(620px,calc(100vw - 28px)); }
.nx-command-drilldown-list { display:grid; gap:8px; max-height:min(420px,55vh); margin-top:16px; overflow-y:auto; }
.nx-command-drilldown-list article { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 12px; border:1px solid var(--ds-border); border-radius:10px; background:var(--ds-bg-soft); }
.nx-command-drilldown-list article div { min-width:0; }
.nx-command-drilldown-list strong,.nx-command-drilldown-list small { display:block; }
.nx-command-drilldown-list small { margin-top:3px; color:var(--ds-text-light); font-size:11px; line-height:1.4; }
.nx-command-drilldown-list article>span { flex:0 0 auto; color:var(--ds-primary); font-size:11px; font-weight:800; }
.nx-command-drilldown-empty { margin:0; padding:24px; color:var(--ds-text-light); text-align:center; }
.nx-worker-assignment-backdrop{overflow:hidden}
.nx-worker-assignment-modal{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1020px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:min(840px,calc(100dvh - 28px));min-width:0;overflow:hidden;padding:0;border:1px solid rgba(var(--ds-sidebar-rgb),.16);border-radius:var(--ds-radius-modal);box-shadow:0 24px 70px rgba(var(--ds-sidebar-rgb),.22)}
.nx-worker-assignment-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;min-width:0;padding:22px 24px 19px;border-bottom:1px solid var(--ds-border);background:var(--ds-card)}
.nx-worker-assignment-modal-header>div:not(.nx-modal-window-controls){display:grid;gap:4px;min-width:0}.nx-worker-assignment-modal-header>div:not(.nx-modal-window-controls)>small{color:var(--ds-primary);font-size:11px;font-weight:850;letter-spacing:.08em}.nx-worker-assignment-modal-header h2{margin:0;padding:0;color:var(--ds-heading);font-size:24px;overflow-wrap:anywhere}.nx-worker-assignment-modal-header p{margin:0;color:var(--ds-text-light);font-size:13px;overflow-wrap:anywhere}.nx-worker-assignment-modal-header>.flow-close-button{flex:0 0 auto}
.nx-worker-assignment-modal-header>.nx-modal-window-controls{align-self:flex-start;display:inline-flex;flex-direction:row;flex-wrap:nowrap}
.nx-worker-assignment-modal-body{min-width:0;min-height:0;padding:18px 20px 22px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--ds-bg-soft)}
.nx-worker-assignment-modal-footer{display:flex;flex:0 0 auto;justify-content:flex-end;padding:16px 24px 20px;border-top:1px solid var(--ds-border);background:var(--ds-card);box-shadow:0 -10px 24px rgba(var(--ds-sidebar-rgb),.04)}
.nx-worker-assignment-modal-footer .primary-button{min-width:112px}
.nx-worker-assignment-list{display:grid;gap:10px;min-width:0}
.nx-worker-assignment-card{min-width:0;overflow:hidden;border:1px solid var(--ds-border);border-radius:13px;background:var(--ds-card);box-shadow:0 5px 16px rgba(var(--ds-sidebar-rgb),.045)}
.nx-worker-assignment-card>header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;min-width:0;padding:15px 16px;background:var(--ds-card)}
.nx-worker-assignment-identity{min-width:0}.nx-worker-assignment-identity strong,.nx-worker-unassigned-card strong{display:block;color:var(--ds-heading);font-size:14px;overflow-wrap:anywhere}.nx-worker-assignment-identity small,.nx-worker-unassigned-card small{display:block;margin-top:3px;color:var(--ds-text-light);font-size:11px;font-weight:500;overflow-wrap:anywhere}
.nx-worker-assignment-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.nx-worker-assignment-toggle{display:grid;grid-template-columns:auto auto;align-items:center;gap:8px;min-height:38px;padding:5px 11px;border:1px solid rgba(var(--ds-primary-rgb),.22);border-radius:9px;background:var(--ds-primary-light);color:var(--ds-primary);font:inherit;white-space:nowrap;cursor:pointer;transition:background 150ms ease,border-color 150ms ease}.nx-worker-assignment-toggle span{font-size:11px;font-weight:850}.nx-worker-assignment-toggle small{margin:0;padding-left:8px;border-left:1px solid rgba(var(--ds-primary-rgb),.2);color:var(--ds-text-light);font-size:10px;font-weight:700}.nx-worker-assignment-toggle:hover{border-color:var(--ds-primary-border);background:rgba(var(--ds-primary-rgb),.14)}.nx-worker-assignment-toggle:focus-visible{outline:2px solid rgba(var(--ds-primary-rgb),.35);outline-offset:2px}
.nx-worker-assignment-orders{min-width:0;border-top:1px solid var(--ds-border);background:var(--ds-bg-soft)}.nx-worker-assignment-orders-label{padding:9px 16px 7px;color:var(--ds-text-light);font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.nx-worker-assignment-rn-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:9px 16px 11px}.nx-worker-assignment-rn-row+.nx-worker-assignment-rn-row{border-top:1px solid rgba(var(--ds-primary-rgb),.1)}.nx-worker-assignment-rn-row>strong{padding:4px 8px;border-radius:7px;background:#e5f0f7;color:var(--ds-primary);font-size:11px;white-space:nowrap}.nx-worker-assignment-rn-row>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.nx-worker-assignment-rn-row span{min-width:0;color:var(--ds-text);font-size:11px;font-weight:700;overflow-wrap:anywhere}.nx-worker-assignment-rn-row small{flex:0 0 auto;color:var(--ds-text-light);font-size:10px;white-space:nowrap}
.nx-worker-assignment-list.unassigned{grid-template-columns:repeat(2,minmax(0,1fr))}.nx-worker-unassigned-card{display:block;min-width:0;padding:13px 14px;border:1px solid var(--ds-border);border-radius:11px;background:var(--ds-card);box-shadow:0 3px 12px rgba(var(--ds-sidebar-rgb),.035)}
.nx-worker-assignment-detail-view{display:grid;align-content:start;gap:16px;min-width:0}.nx-worker-assignment-back{display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;width:max-content;max-width:100%;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ds-primary);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.nx-worker-assignment-back:hover,.nx-worker-assignment-back:focus-visible{background:var(--ds-primary-light);outline:2px solid rgba(var(--ds-primary-rgb),.22)}.nx-worker-assignment-back svg{width:15px;height:15px}
.nx-worker-assignment-detail-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0;padding:16px 18px;border:1px solid var(--ds-primary-border);border-radius:14px;background:var(--ds-card)}.nx-worker-assignment-detail-summary>div{display:grid;gap:3px;min-width:0}.nx-worker-assignment-detail-summary small{color:var(--ds-primary);font-size:10px;font-weight:850;letter-spacing:.08em}.nx-worker-assignment-detail-summary strong{color:var(--ds-heading);font-size:18px;overflow-wrap:anywhere}.nx-worker-assignment-detail-summary span{color:var(--ds-text-light);font-size:12px;overflow-wrap:anywhere}.nx-worker-assignment-detail-summary>b{flex:0 0 auto;padding:7px 10px;border-radius:9px;background:var(--ds-primary-light);color:var(--ds-primary);font-size:12px}
.nx-worker-assignment-detail-groups{display:grid;gap:12px;min-width:0}.nx-worker-assignment-detail-group{min-width:0;overflow:hidden;border:1px solid var(--ds-border);border-radius:13px;background:var(--ds-card);box-shadow:0 4px 14px rgba(var(--ds-sidebar-rgb),.04)}.nx-worker-assignment-detail-group>header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:11px 14px;border-bottom:1px solid var(--ds-border);background:var(--ds-bg-soft)}.nx-worker-assignment-detail-group>header strong{padding:4px 8px;border-radius:7px;background:#e5f0f7;color:var(--ds-primary);font-size:12px;white-space:nowrap}.nx-worker-assignment-detail-group>header small{min-width:0;color:var(--ds-text-light);font-size:12px;line-height:1.35;overflow-wrap:anywhere}.nx-worker-assignment-detail-group .priority-badge{font-size:10px}
.nx-worker-assignment-detail-rows{min-width:0;padding:0 14px}.nx-worker-assignment-detail-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,auto);align-items:center;gap:20px;min-width:0;padding:14px 0}.nx-worker-assignment-detail-row+.nx-worker-assignment-detail-row{border-top:1px solid rgba(var(--ds-primary-rgb),.1)}.nx-worker-assignment-detail-task{display:grid;gap:3px;min-width:0}.nx-worker-assignment-detail-task strong{color:var(--ds-heading);font-size:14px;font-weight:780;overflow-wrap:anywhere}.nx-worker-assignment-detail-task>span{color:var(--ds-text-light);font-size:12px;overflow-wrap:anywhere}.nx-worker-assignment-detail-side{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:280px}.nx-worker-assignment-detail-meta{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}.nx-worker-assignment-detail-meta>span{display:grid;gap:2px;min-width:96px;text-align:left}.nx-worker-assignment-detail-meta small{color:var(--ds-text-light);font-size:9px;font-weight:750;letter-spacing:.05em;text-transform:uppercase}.nx-worker-assignment-detail-meta strong{color:var(--ds-primary);font-size:11px;font-weight:780;overflow-wrap:anywhere}.nx-worker-assignment-work-entry,.nx-worker-assignment-open-task{min-height:36px;padding:7px 14px;font-size:12px;white-space:nowrap}
.nx-worker-sheet-modal{width:min(600px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow-y:auto}.nx-worker-sheet-modal>small{display:block;margin-bottom:6px;color:var(--ds-primary);font-size:10px;font-weight:800;letter-spacing:.08em}.nx-worker-sheet-note{display:grid;gap:7px;margin-top:18px}.nx-worker-sheet-note>span{color:var(--ds-text);font-size:12px;font-weight:700}.nx-worker-sheet-note textarea{width:100%;min-height:112px;resize:vertical;border:1px solid var(--ds-border);border-radius:10px;padding:11px 12px;color:var(--ds-text);font:500 13px/1.45 inherit}.nx-worker-sheet-note textarea:focus{outline:2px solid rgba(var(--ds-primary-rgb),.18);border-color:var(--ds-primary)}.nx-worker-sheet-note>small{color:var(--ds-text-light);font-size:10px}
@media(max-width:860px){.nx-worker-assignment-card>header{grid-template-columns:1fr}.nx-worker-assignment-actions{justify-content:flex-start;flex-wrap:wrap}.nx-worker-assignment-rn-row>div{align-items:flex-start;flex-direction:column;gap:3px}.nx-worker-assignment-rn-row small{white-space:normal}.nx-worker-assignment-detail-row{grid-template-columns:1fr;gap:10px}.nx-worker-assignment-detail-side{justify-content:space-between;min-width:0;width:100%}}
@media(max-width:600px){.nx-worker-assignment-backdrop{padding:0}.nx-worker-assignment-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}.nx-worker-assignment-modal-header{padding:18px 16px 15px}.nx-worker-assignment-modal-header h2{font-size:20px}.nx-worker-assignment-modal-body{padding:14px}.nx-worker-assignment-modal-footer{padding:12px 14px max(14px,env(safe-area-inset-bottom))}.nx-worker-assignment-modal-footer .primary-button{width:100%}.nx-worker-assignment-actions{display:grid;grid-template-columns:1fr;width:100%}.nx-worker-assignment-toggle,.nx-worker-assignment-actions>.compact-command{width:100%;justify-content:center}.nx-worker-assignment-toggle{grid-template-columns:1fr}.nx-worker-assignment-toggle small{padding:0;border:0}.nx-worker-assignment-list.unassigned{grid-template-columns:1fr}.nx-worker-assignment-rn-row{align-items:start;grid-template-columns:1fr;gap:7px}.nx-worker-assignment-rn-row>strong{justify-self:start}.nx-worker-assignment-detail-summary{align-items:flex-start;flex-direction:column}.nx-worker-assignment-detail-summary>b{align-self:flex-start}.nx-worker-assignment-detail-group>header{align-items:start;grid-template-columns:1fr}.nx-worker-assignment-detail-group>header strong{justify-self:start}.nx-worker-assignment-detail-row{grid-template-columns:1fr;gap:10px}.nx-worker-assignment-detail-side{align-items:stretch;flex-direction:column;min-width:0;width:100%}.nx-worker-assignment-detail-meta{align-items:stretch;justify-content:flex-start;width:100%}.nx-worker-assignment-detail-meta>span{min-width:0;flex:1}.nx-worker-assignment-work-entry,.nx-worker-assignment-open-task{width:100%}}
.nx-command-analytics-unavailable { display:flex; align-items:center; justify-content:center; gap:10px; min-height:0; color:var(--ds-text-light); font-size:11px; font-weight:700; text-align:center; }
.nx-command-analytics-unavailable svg { width:22px; height:22px; color:var(--ds-primary-border); }
@media (max-width:1180px) and (min-width:761px) {
  .content.content-dashboard { padding-inline:14px; }
  .nx-command-header { gap:10px; }
  .nx-command-kpi { padding-inline:10px; }
}
@media (max-width:1180px) and (min-width:981px) {
  .nx-command-donut-layout { grid-template-columns:140px minmax(0,1fr); gap:8px; }
  .nx-command-donut { width:140px; height:140px; }
  .nx-command-donut>span { width:64px; height:64px; }
  .nx-command-donut>span strong { font-size:20px; }
}

@media (max-height:820px) and (min-width:761px) {
  .content.content-dashboard { padding-block:10px; }
  .nx-command-center { gap:8px; }
  .nx-command-header { min-height:66px; padding-block:9px; }
  .nx-command-kpi { min-height:80px; }
  .nx-command-kpi.compact { min-height:60px; }
  .nx-command-panel-head { min-height:52px; padding-block:7px; }
  .nx-command-list-row { min-height:45px; padding-block:4px; }
  .nx-command-center { grid-template-rows:auto auto auto auto 224px; }
}
@media (max-width:760px) {
  .content.content-dashboard { height:auto; min-height:100vh; padding:12px; overflow:visible; }
  .nx-command-center { grid-template-rows:auto; height:auto; gap:12px; }
  .nx-command-header { align-items:stretch; flex-direction:column; padding:14px; }
  .nx-command-header-actions { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:stretch; }
  .nx-command-primary-kpis,.nx-command-secondary-kpis,.nx-command-secondary-kpis.count-1,.nx-command-secondary-kpis.count-2,.nx-command-focus-grid { grid-template-columns:1fr; }
  .nx-command-analytics-row { grid-template-columns:1fr; height:auto; }
  .nx-command-analytics-card { height:190px; }
  .nx-command-kpi,.nx-command-kpi.compact { min-height:72px; }
  .nx-command-list-row { min-height:56px; }
}
@media (max-width:430px) {
  .nx-command-date strong,.nx-command-row-copy small { display:none; }
  .nx-command-list-row { grid-template-columns:auto minmax(0,1fr) 14px; }
  .nx-command-row-meta { grid-column:2; text-align:left; }
  .nx-command-list-row>svg { grid-column:3; grid-row:1/span 2; }
  .nx-command-donut-layout { grid-template-columns:150px minmax(0,1fr); gap:8px; }
  .nx-command-donut { width:150px; height:150px; }
  .nx-command-donut>span { width:68px; height:68px; }
  .nx-command-donut>span strong { font-size:20px; }
}
@media (max-width:360px) {
  .nx-command-analytics-card { height:268px; }
  .nx-command-donut-layout { grid-template-columns:1fr; justify-items:center; gap:4px; }
  .nx-command-donut-legend { justify-items:start; }
}
/* Premium Polish v1.0 - central visual standard */
html {
  font-family: var(--ds-font-sans);
  background: var(--ds-bg);
}

body {
  color: var(--ds-text);
  background:
    radial-gradient(circle at 84% 0%, rgba(var(--ds-primary-border-rgb), 0.3), transparent 30%),
    linear-gradient(180deg, var(--ds-card) 0%, var(--ds-bg) 46%, var(--ds-bg) 100%);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.app-shell {
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--ds-primary-rgb), 0.09), transparent 26%),
    var(--ds-bg);
}

.content {
  padding: 32px 36px 38px;
}

.topbar {
  margin-bottom: 22px;
  gap: 20px;
}

.title-block h1,
.dashboard-hero-title,
.screen-title,
.section-title {
  color: var(--ds-heading);
  letter-spacing: 0;
}

.title-block p,
.screen-subtitle,
.dashboard-hero-subtitle,
.muted,
.hint {
  color: var(--ds-text-light);
}

.sidebar {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--ds-primary-rgb), 0.34), transparent 32%),
    linear-gradient(180deg, var(--ds-sidebar) 0%, color-mix(in srgb, var(--ds-sidebar) 84%, black) 100%);
  border-right: 1px solid rgba(var(--ds-primary-border-rgb), 0.22);
  box-shadow: 18px 0 50px rgba(var(--ds-sidebar-rgb), 0.2);
}

.sidebar::before,
.sidebar::after {
  opacity: 0.28;
}

.sidebar-brand img {
  max-width: 190px;
  max-height: 44px;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.22));
}

.company-locked-name {
  border-color: rgba(var(--ds-primary-border-rgb), 0.34);
  color: var(--ds-card);
  background: rgba(255, 255, 255, 0.06);
}

.nav-list {
  gap: 3px;
}

.nav-list button {
  position: relative;
  gap: 10px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}

.nav-list button svg {
  width: 17px;
  height: 17px;
}

.nav-list button.nav-group-start {
  margin-top: 6px;
}

.nav-list button.nav-group-start::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -4px;
  height: 1px;
  background: rgba(var(--ds-primary-border-rgb), 0.16);
}

.nav-list button:hover {
  border-color: rgba(var(--ds-primary-border-rgb), 0.22);
  color: var(--ds-card);
  background: rgba(var(--ds-primary-rgb), 0.16);
}

.nav-list button.active {
  border-color: rgba(var(--ds-primary-border-rgb), 0.32);
  color: var(--ds-card);
  background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary-hover) 100%);
  box-shadow: 0 14px 28px rgba(var(--ds-primary-rgb), 0.24);
}

.nav-list button.active svg {
  color: var(--ds-card);
}

.sidebar-footer {
  border-top-color: rgba(var(--ds-primary-border-rgb), 0.18);
}

.login-screen {
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--ds-primary-rgb), 0.22), transparent 32%),
    linear-gradient(135deg, var(--ds-sidebar) 0%, var(--ds-primary-hover) 42%, var(--ds-bg) 100%);
}

.login-panel {
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.7);
  border-radius: var(--ds-radius-modal);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ds-shadow-modal);
}

.login-panel input {
  min-height: 48px;
}

.primary-button,
.problem-submit-button,
.save-button,
.add-button,
.dashboard-link-button,
.dashboard-hero-actions .primary-button,
.work-order-modal-actions .primary-button,
.product-modal-actions .primary-button,
.modal-actions .primary-button,
.finish-modal-actions .primary-button {
  border-color: var(--ds-primary);
  color: var(--ds-card);
  background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary-hover) 100%);
  box-shadow: 0 12px 26px rgba(var(--ds-primary-rgb), 0.2);
}

.primary-button:hover,
.problem-submit-button:hover,
.save-button:hover,
.add-button:hover,
.dashboard-link-button:hover,
.dashboard-hero-actions .primary-button:hover,
.work-order-modal-actions .primary-button:hover,
.product-modal-actions .primary-button:hover,
.modal-actions .primary-button:hover,
.finish-modal-actions .primary-button:hover {
  border-color: var(--ds-primary-hover);
  background: linear-gradient(135deg, var(--ds-primary-hover) 0%, var(--ds-sidebar) 100%);
  box-shadow: 0 18px 36px rgba(var(--ds-primary-rgb), 0.26);
  transform: translateY(-1px);
}

.secondary-button,
.compact-command,
.detail-action,
.icon-action,
.icon-mini:not(.danger),
.modal-actions .secondary-button,
.work-order-modal-actions .secondary-button,
.product-modal-actions .secondary-button,
.finish-modal-actions .secondary-button {
  border-color: var(--ds-border);
  color: var(--ds-heading);
  background: var(--ds-card);
  box-shadow: 0 4px 14px rgba(var(--ds-sidebar-rgb), 0.04);
}

.secondary-button:hover,
.compact-command:hover,
.detail-action:hover,
.icon-action:hover,
.icon-mini:not(.danger):hover,
.modal-actions .secondary-button:hover,
.work-order-modal-actions .secondary-button:hover,
.product-modal-actions .secondary-button:hover,
.finish-modal-actions .secondary-button:hover {
  border-color: var(--ds-primary-border);
  color: var(--ds-primary-hover);
  background: var(--ds-primary-light);
}

.danger-action,
.danger-button,
.icon-mini.danger,
.secondary-button.danger-action {
  border-color: rgba(var(--ds-danger-rgb), 0.36);
  color: var(--ds-danger);
  background: transparent;
}

.danger-action:hover,
.danger-button:hover,
.icon-mini.danger:hover,
.secondary-button.danger-action:hover {
  border-color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

input,
select,
textarea,
.field input,
.field select,
.field textarea,
.wo-modal-field input,
.wo-modal-field select,
.wo-modal-field textarea,
.table-tools input,
.table-tools select,
.filters select {
  min-height: 46px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  color: var(--ds-heading);
  background-color: var(--ds-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.wo-modal-field input:focus,
.wo-modal-field select:focus,
.wo-modal-field textarea:focus,
.table-tools input:focus,
.table-tools select:focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--ds-placeholder);
}

.card,
.metric-card,
.dashboard-card,
.dashboard-kpi-card,
.table-shell,
.modal-panel,
.product-form-card,
.product-kpi,
.work-order-kpi,
.items-table-card,
.detail-card,
.status-card,
.problem-detail-card,
.problem-table-card,
.products-table-card,
.product-assembly-card,
.station-card,
.settings-card,
.analytics-card,
.notes-panel,
.scrap-chart-card,
.scrap-kpi-card,
.shipments-table-card,
.archive-table-card,
.team-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.card:hover,
.metric-card:hover,
.dashboard-kpi-card:hover,
.station-card:hover,
.team-card:hover,
.product-kpi:hover,
.work-order-kpi:hover {
  box-shadow: var(--ds-shadow-hover);
}

.modal-panel {
  border-radius: var(--ds-radius-modal);
  box-shadow: var(--ds-shadow-modal);
}

.modal-panel.problem-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  position: relative;
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.runtime-problem-detail-modal .problem-detail-modal-header,
.runtime-problem-detail-modal .problem-detail-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: var(--ds-border);
  background: rgba(255, 255, 255, 0.96);
}

.runtime-problem-detail-modal .problem-detail-modal-header {
  justify-content: space-between;
  padding: 16px 76px 14px 18px;
  border-bottom: 1px solid var(--ds-border);
}

.runtime-problem-detail-modal .flow-close-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.runtime-problem-detail-modal .flow-icon-chip {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.runtime-problem-detail-modal .flow-modal-title h2 {
  font-size: 24px;
  line-height: 1.08;
}

.runtime-problem-detail-modal .problem-detail-modal-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  margin-right: 44px;
}

.problem-detail-modal-body {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: auto;
  background: var(--ds-bg);
}

.runtime-problem-detail-modal .problem-context-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: 8px;
  box-shadow: none;
}

.runtime-problem-detail-modal .problem-context-strip > div {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  min-height: 68px;
  padding: 10px 12px;
}

.runtime-problem-detail-modal .problem-context-strip .soft-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.runtime-problem-detail-modal .problem-context-strip small {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.runtime-problem-detail-modal .problem-context-strip strong {
  font-size: 13px;
  line-height: 1.25;
}

.runtime-problem-detail-modal .problem-detail-grid-page {
  grid-template-columns: minmax(330px, .9fr) minmax(390px, 1.1fr);
  gap: 12px;
}

.runtime-problem-detail-modal .problem-detail-card,
.runtime-problem-detail-modal .problem-activity-card {
  border-radius: 8px;
  box-shadow: none;
}

.runtime-problem-detail-modal .problem-detail-card h3,
.runtime-problem-detail-modal .problem-activity-card h3 {
  padding: 14px 16px 12px;
  font-size: 17px;
}

.runtime-problem-detail-modal .problem-detail-meta {
  gap: 10px;
  padding: 12px 16px;
}

.runtime-problem-detail-modal .problem-detail-meta > div {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
}

.runtime-problem-detail-modal .problem-detail-meta .soft-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.runtime-problem-detail-modal .problem-detail-meta small {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.runtime-problem-detail-modal .problem-detail-meta strong {
  margin-top: 2px;
  font-size: 13px;
}

.runtime-problem-detail-modal .problem-description-block,
.runtime-problem-detail-modal .problem-documents-block {
  padding: 14px 16px;
}

.runtime-problem-detail-modal .problem-description-block h4,
.runtime-problem-detail-modal .problem-documents-block h4 {
  margin-bottom: 8px;
  font-size: 14px;
}

.runtime-problem-detail-modal .problem-description-block p {
  font-size: 14px;
  line-height: 1.5;
}

.runtime-problem-detail-modal .problem-documents-grid {
  gap: 10px;
}

.runtime-problem-detail-modal .section-line-title {
  justify-content: flex-start;
  gap: 7px;
  margin-bottom: 8px;
}

.runtime-problem-detail-modal .section-line-title h4 {
  margin: 0;
}

.runtime-problem-detail-modal .section-line-title span {
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.runtime-problem-detail-modal .problem-document-card,
.runtime-problem-detail-modal .problem-add-file-card,
.runtime-problem-detail-modal .problem-empty-docs {
  min-height: 96px;
  border-radius: 8px;
}

.runtime-problem-detail-modal .problem-document-card,
.runtime-problem-detail-modal .problem-add-file-card {
  gap: 7px;
  padding: 10px;
}

.runtime-problem-detail-modal .problem-document-card img {
  height: 60px;
  border-radius: 7px;
}

.runtime-problem-detail-modal .problem-source-note {
  margin: 14px 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.runtime-problem-detail-modal .problem-activity-header {
  justify-content: flex-start;
  min-height: 48px;
}

.runtime-problem-detail-modal .problem-activity-header h3 {
  padding: 14px 16px 11px;
  font-size: 17px;
}

.runtime-problem-detail-modal .problem-activity-header label {
  padding-right: 16px;
  font-size: 12px;
}

.runtime-problem-detail-modal .problem-activity-item {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
}

.runtime-problem-detail-modal .problem-activity-item::before {
  left: 35px;
}

.runtime-problem-detail-modal .activity-avatar {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.runtime-problem-detail-modal .activity-body header strong {
  font-size: 14px;
}

.runtime-problem-detail-modal .activity-body p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.runtime-problem-detail-modal .activity-files {
  margin-top: 10px;
}

.runtime-problem-detail-modal .problem-detail-composer {
  gap: 8px;
  padding: 12px 16px 14px;
}

.runtime-problem-detail-modal .problem-detail-composer textarea {
  min-height: 70px;
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 13px;
}

.runtime-problem-detail-modal .problem-detail-modal-footer {
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ds-border);
  box-shadow: 0 -10px 24px rgba(var(--ds-sidebar-rgb), 0.05);
}

.runtime-problem-detail-modal .problem-detail-actions {
  margin-left: auto;
}

@media (max-width: 1180px) {
  .runtime-problem-detail-modal .problem-context-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .runtime-problem-detail-modal .problem-detail-grid-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .modal-panel.problem-detail-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .runtime-problem-detail-modal .problem-detail-modal-header,
  .runtime-problem-detail-modal .problem-detail-modal-footer,
  .runtime-problem-detail-modal .problem-detail-actions,
  .runtime-problem-detail-modal .composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .runtime-problem-detail-modal .problem-detail-modal-header {
    padding: 14px 56px 12px 14px;
  }

  .runtime-problem-detail-modal .problem-context-strip,
  .runtime-problem-detail-modal .problem-detail-meta,
  .runtime-problem-detail-modal .problem-documents-grid {
    grid-template-columns: 1fr;
  }

  .runtime-problem-detail-modal .problem-context-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--nx-line);
  }

  .runtime-problem-detail-modal .problem-context-strip > div:last-child {
    border-bottom: 0;
  }
}

.table-shell,
.products-table-card,
.problem-table-card,
.items-table-card,
.scrap-table-card,
.notes-list,
.archive-table-card {
  overflow: hidden;
}

table thead,
.data-table thead {
  color: var(--ds-heading);
  background: linear-gradient(180deg, var(--ds-primary-light) 0%, var(--ds-card) 100%);
}

table tr,
.data-table tr {
  border-color: var(--ds-border);
}

table tbody tr:hover,
.data-table tbody tr:hover,
.work-order-row:hover,
.product-row:hover,
.station-row:hover,
.team-row:hover,
.scrap-row:hover,
.note-row:hover {
  background: rgba(var(--ds-primary-border-rgb), 0.18);
}

.status-badge,
.priority-badge,
.badge,
.ds-badge,
.chip,
.tag {
  border-radius: 999px;
  font-weight: 700;
}

.status-badge.success,
.badge.success,
.ds-badge.success,
.chip.success {
  color: var(--ds-success-text);
  background: var(--ds-success-bg);
}

.status-badge.warning,
.badge.warning,
.ds-badge.warning,
.chip.warning {
  color: var(--ds-warning-text);
  background: var(--ds-warning-bg);
}

.status-badge.danger,
.badge.danger,
.ds-badge.danger,
.chip.danger {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.status-badge.info,
.badge.info,
.ds-badge.info,
.chip.info {
  color: var(--ds-primary-hover);
  background: var(--ds-info-bg);
}

/* "neutral" was already used in markup (worker task type, "Samo pregled", archived Customer) but
   had no color rule — it silently fell back to the default (blue-ish) .status-badge look instead
   of the established neutral-gray token pair already used elsewhere for this exact meaning (see
   .team-stat-card.tone-neutral / .operational-attention.neutral). */
.status-badge.neutral,
.badge.neutral,
.ds-badge.neutral,
.chip.neutral {
  color: var(--ds-text-muted);
  background: var(--ds-bg-soft);
}

.tabs button,
.tab-button,
.analytics-tabs button,
.product-step,
.work-order-tabs button {
  color: var(--ds-text);
}

.tabs button.active,
.tab-button.active,
.analytics-tabs button.active,
.product-step.active,
.work-order-tabs button.active {
  color: var(--ds-primary-hover);
  border-color: var(--ds-primary);
  background: linear-gradient(180deg, rgba(var(--ds-primary-border-rgb), 0.34), rgba(255, 255, 255, 0));
}

.dashboard-screen {
  gap: 20px;
}

.dashboard-kpi-card,
.dashboard-panel,
.dashboard-suggestion {
  border-radius: var(--ds-radius-card);
}

.dashboard-kpi-icon,
.soft-icon,
.empty-illustration,
.metric-icon {
  color: var(--ds-primary);
  background: rgba(var(--ds-primary-border-rgb), 0.28);
}

.dashboard-kpi-card.danger .dashboard-kpi-icon,
.danger-icon {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.dashboard-kpi-card.warning .dashboard-kpi-icon {
  color: var(--ds-warning);
  background: var(--ds-warning-bg);
}

.dashboard-kpi-card.success .dashboard-kpi-icon {
  color: var(--ds-success);
  background: var(--ds-success-bg);
}

.content-signature img {
  opacity: 0.28;
}

.products-table-wrap {
  overflow-x: visible;
}

.products-table {
  min-width: 0;
  table-layout: auto;
}

.products-table th:first-child,
.products-table td:first-child {
  width: 44px;
  text-align: center;
}

.products-table th:nth-child(2),
.products-table td:nth-child(2) {
  width: 132px;
}

.products-table th:nth-child(3),
.products-table td:nth-child(3) {
  min-width: 190px;
}

.products-table th:nth-child(6),
.products-table td:nth-child(6),
.products-table th:nth-child(7),
.products-table td:nth-child(7) {
  width: 104px;
  text-align: center;
}

.products-table th:last-child,
.products-table td:last-child {
  width: 166px;
  text-align: right;
}

.product-code-cell {
  display: flex;
  align-items: center;
}

.product-code-cell strong {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--ds-primary-border-rgb), 0.12);
  font-size: 13px;
  letter-spacing: 0;
}

.products-table .row-actions {
  justify-content: flex-end;
  width: 100%;
}

.products-table .open-row-button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}

.products-table .icon-mini {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.product-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--ds-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--ds-bg));
}

.product-pagination-summary {
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}

.product-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.product-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.product-page-nav button {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ds-text);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.product-page-nav button svg {
  width: 16px;
  height: 16px;
}

.product-page-nav button:hover:not(:disabled),
.product-page-nav button:focus-visible {
  border-color: rgba(var(--ds-primary-rgb), 0.18);
  background: rgba(var(--ds-primary-border-rgb), 0.14);
  outline: 0;
}

.product-page-nav button.active {
  color: var(--ds-card);
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  box-shadow: 0 8px 18px rgba(var(--ds-primary-rgb), 0.22);
}

.product-page-nav button:disabled {
  cursor: default;
  opacity: 0.45;
}

.product-page-nav .page-gap {
  min-width: 20px;
  color: var(--ds-text-light);
  font-weight: 800;
  text-align: center;
}

.product-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-text-light);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.product-page-size select {
  width: auto;
  min-width: 68px;
  height: 34px;
  min-height: 34px;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--ds-primary-border-rgb), 0.08);
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1180px) {

  .products-table th:last-child,
  .products-table td:last-child {
    width: 146px;
  }

  .product-type-badge {
    white-space: normal;
  }
}

@media (max-width: 900px) {
  .products-table-wrap {
    overflow-x: auto;
  }

  .products-table {
    min-width: 820px;
  }

  .product-pagination {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .product-pagination-summary {
    white-space: normal;
  }

  .product-pagination-controls {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .product-page-nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .product-pagination-controls,
  .product-page-size {
    width: 100%;
  }

  .product-page-nav {
    width: 100%;
    justify-content: center;
  }

  .product-page-size {
    justify-content: space-between;
  }
}

@media (max-width: 980px) {
  .content {
    padding: 24px 18px 32px;
  }

  .nav-list button.nav-group-start {
    margin-top: 0;
  }

  .nav-list button.nav-group-start::before {
    display: none;
  }
}

/* Work orders overview: tablet and phone layout polish. */
.work-orders-screen,
.work-order-list-card,
.work-order-table-wrap {
  min-width: 0;
}

.work-orders-screen .work-orders-toolbar > *,
.work-orders-screen .work-order-kpi,
.work-orders-screen .work-order-card {
  min-width: 0;
}

@media (max-width: 1180px) {
  .work-orders-screen {
    gap: 18px;
  }

  .work-orders-screen .work-order-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .work-orders-screen .work-order-kpi {
    min-height: 102px;
    padding: 18px;
    gap: 14px;
  }

  .work-orders-screen .work-order-kpi .soft-icon {
    width: 48px;
    height: 48px;
  }

  .work-orders-screen .work-order-kpi strong {
    font-size: 26px;
  }

  .work-orders-screen .work-orders-toolbar {
    gap: 14px;
    padding: 18px;
  }

  .work-orders-screen .work-orders-desktop-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-orders-screen .work-orders-desktop-filters .work-search,
  .work-orders-screen .work-orders-desktop-filters .sort-filter {
    grid-column: span 2;
  }

  .work-orders-screen .clear-filter-button {
    align-self: end;
    justify-content: center;
    width: 100%;
  }

  .work-orders-screen .work-orders-table {
    min-width: 1328px;
  }
}

@media (max-width: 1024px) {
  .topbar:has(+ #section-root .work-orders-screen) {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
  }

  .topbar:has(+ #section-root .work-orders-screen) .topbar-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .topbar:has(+ #section-root .work-orders-screen) .compact-command {
    flex: 1 1 220px;
    justify-content: center;
  }

  .work-orders-screen .work-order-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-orders-screen .work-orders-desktop-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-orders-screen .work-orders-toolbar {
    border-radius: 14px;
  }

  .work-orders-screen .work-orders-desktop-filters .work-search,
  .work-orders-screen .work-orders-desktop-filters .sort-filter {
    grid-column: 1 / -1;
  }

  .work-orders-screen .work-orders-toolbar select,
  .work-orders-screen .work-orders-toolbar input {
    min-width: 0;
  }

  .work-order-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .work-order-pagination > div,
  .work-order-pagination label,
  .work-order-pagination nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .work-orders-screen .work-order-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-orders-screen .work-order-kpi {
    min-height: 96px;
    padding: 16px;
  }

  .work-orders-screen .work-order-kpi span {
    font-size: 14px;
  }

  .work-orders-screen .work-orders-toolbar {
    gap: 12px;
    padding: 16px;
  }

  .work-orders-screen .work-orders-desktop-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-orders-screen .work-order-table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: auto;
  }

  .work-orders-screen .work-orders-table {
    min-width: 1328px;
  }
}

@media (max-width: 860px) {
  .work-orders-screen .work-order-table-wrap {
    display: none;
  }

  .work-orders-screen .work-order-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .work-orders-screen {
    gap: 16px;
  }

  .work-orders-screen .work-order-kpis,
  .work-orders-screen .work-orders-desktop-filters {
    grid-template-columns: 1fr;
  }

  .work-orders-screen .work-orders-desktop-filters .work-search,
  .work-orders-screen .work-orders-desktop-filters .sort-filter {
    grid-column: auto;
  }

  .work-orders-screen .work-order-kpi {
    min-height: 88px;
  }

  .work-orders-screen .work-orders-toolbar label {
    gap: 7px;
  }

  .work-orders-screen .clear-filter-button {
    min-height: 48px;
  }

  .work-order-pagination nav {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .topbar:has(+ #section-root .work-orders-screen) .compact-command,
  .topbar:has(+ #section-root .work-orders-screen) .primary-button,
  .topbar:has(+ #section-root .work-orders-screen) .secondary-button {
    width: 100%;
  }

  .work-orders-screen .work-orders-toolbar {
    padding: 14px;
  }

  .work-order-pagination {
    padding: 16px;
  }
}

@media (max-width: 560px) {
  .work-orders-screen {
    gap: 14px;
  }

  .work-orders-screen .work-order-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .work-orders-screen .work-order-kpi:last-child {
    grid-column: 1 / -1;
  }

  .work-orders-screen .work-order-kpi {
    min-height: 82px;
    padding: 14px;
  }

  .work-orders-screen .work-order-kpi .soft-icon {
    width: 42px;
    height: 42px;
  }

  .work-orders-screen .work-order-kpi strong {
    font-size: 23px;
  }

  .work-orders-screen .work-order-kpi small {
    font-size: 12px;
  }

  .work-orders-screen .work-orders-toolbar {
    gap: 11px;
    border-radius: 12px;
  }

  .work-orders-screen .work-orders-desktop-filters {
    display: none;
  }

  .work-orders-screen .work-orders-mobile-filters {
    display: grid;
    gap: 10px;
  }

  .work-order-mobile-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
  }

  .work-order-mobile-filter-details {
    width: 100%;
    min-width: 0;
  }

  .work-order-mobile-filter-details summary {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    list-style: none;
  }

  .work-order-mobile-filter-details summary::-webkit-details-marker {
    display: none;
  }

  .work-order-mobile-filter-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    background: var(--nx-white);
  }

  .work-orders-screen .work-order-context-chips {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .work-orders-screen .work-orders-toolbar select,
  .work-orders-screen .work-orders-toolbar input {
    min-height: 46px;
    font-size: 14px;
  }

  .work-order-pagination > div,
  .work-order-pagination label,
  .work-order-pagination nav {
    width: 100%;
  }

  .work-order-pagination nav {
    justify-content: center;
  }

  .work-orders-screen .work-order-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-card-secondary-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .work-order-card .open-card-button {
    height: auto;
    min-height: 50px;
  }
}

/* Tablet responsive containment for wide operational screens. */
.analytics-screen,
.products-overview,
.scrap-screen,
.notes-screen,
.work-orders-screen {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.analytics-screen {
  grid-template-columns: minmax(0, 1fr);
}

.analytics-screen > *,
.products-overview > *,
.scrap-screen > *,
.notes-screen > *,
.work-orders-screen > *,
.analytics-topbar,
.analytics-filter-row,
.analytics-actions,
.analytics-kpi-grid,
.analytics-main-grid,
.analytics-chart-grid,
.analytics-kpi-card,
.analytics-table-card,
.analytics-chart-card,
.analytics-insights,
.product-kpis,
.product-kpi,
.products-table-card,
.products-toolbar,
.product-search,
.scrap-filter-card,
.scrap-kpi-grid,
.scrap-chart-grid,
.scrap-kpi-card,
.scrap-chart-card,
.scrap-list-card,
.notes-filter-card,
.notes-workspace,
.notes-list-panel,
.notes-detail-panel,
.notes-archive-card,
.work-orders-toolbar,
.work-order-list-card {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.analytics-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.analytics-tabs,
.analytics-actions,
.analytics-filter-row {
  min-width: 0;
  max-width: 100%;
}

.analytics-actions {
  flex: 1 1 360px;
  justify-content: flex-end;
}

.analytics-actions > *,
.analytics-filter-row > *,
.product-kpi > *,
.products-toolbar > *,
.scrap-filter-card > *,
.work-orders-toolbar > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.analytics-actions select,
.analytics-filter-row select,
.analytics-period {
  max-width: 100%;
}

.analytics-filter-row select,
.products-toolbar select,
.products-toolbar input,
.work-orders-toolbar select,
.work-orders-toolbar input,
.scrap-filter-card select,
.scrap-filter-card input,
.notes-filter-card select,
.notes-filter-card input {
  min-width: 0;
}

.product-kpi span,
.product-kpi strong,
.product-kpi em {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.analytics-main-grid,
.analytics-chart-grid,
.analytics-kpi-grid,
.notes-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.analytics-table-wrap,
.products-table-wrap,
.scrap-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  contain: inline-size;
  overflow-x: auto;
}

.work-order-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
}

.products-table,
.scrap-table,
.work-orders-table,
.analytics-table {
  max-width: none;
}

@media (min-width: 861px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (min-width: 1181px) {
  .notes-workspace {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  }
}

@media (max-width: 1280px) {
  .products-toolbar,
  .product-kpis,
  .work-orders-desktop-filters {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  .scrap-filter-card,
  .scrap-kpi-grid,
  .scrap-chart-grid,
  .notes-filter-card {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  /* Scrap cards need the usable content width, not the viewport width. */
  .scrap-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .scrap-chart-card,
  .scrap-donut-wrap,
  .scrap-legend,
  .scrap-bars {
    min-width: 0;
  }
}

/* Build 031: scoped mobile modal shell fixes for Team, Station and Scrap detail. */
@media (max-width: 640px) {
  .modal-panel.team-member-modal,
  .station-create-modal,
  .scrap-detail-modal {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(100%, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
  }

  @supports (width: 100dvw) {
    .modal-panel.team-member-modal,
    .station-create-modal,
    .scrap-detail-modal {
      width: min(100%, calc(100dvw - max(16px, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 12px))));
      max-width: calc(100dvw - max(16px, calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 12px)));
    }
  }

  @supports (height: 100dvh) {
    .modal-panel.team-member-modal,
    .station-create-modal,
    .scrap-detail-modal {
      max-height: calc(100dvh - max(16px, calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 12px)));
    }
  }

  .team-member-header,
  .station-create-modal .station-modal-header,
  .scrap-detail-modal .modal-title-row,
  .team-member-modal .station-modal-actions,
  .station-create-modal .station-modal-actions,
  .scrap-detail-modal .modal-actions {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 0;
  }

  .team-member-header,
  .station-create-modal .station-modal-header {
    padding-right: 54px;
  }

  .team-member-header > div,
  .station-create-modal .station-modal-header > div,
  .scrap-detail-modal .modal-title-row > div {
    min-width: 0;
    max-width: 100%;
  }

  .team-member-header h2,
  .team-member-header p,
  .station-create-modal .station-modal-header h2,
  .station-create-modal .station-modal-header p,
  .scrap-detail-modal .modal-title-row h2,
  .scrap-detail-modal .modal-title-row p {
    overflow-wrap: anywhere;
  }

  .team-member-body,
  .station-create-modal .station-modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .team-member-body {
    padding-bottom: 18px;
  }

  .team-member-main,
  .team-access-panel,
  .team-form-card,
  .team-section-card,
  .team-access-card,
  .team-invite-card,
  .team-role-grid,
  .team-role-card,
  .team-two-col,
  .team-password-grid,
  .team-link-row,
  .station-create-modal .station-modal-section,
  .station-create-modal .station-form-grid,
  .station-create-modal .field,
  .station-create-modal .station-info-note,
  .station-create-modal .station-machine-list,
  .station-create-modal .station-machine-row,
  .station-create-modal .station-machines-empty,
  .station-create-modal .station-usage-card,
  .station-create-modal .station-usage-chips,
  .scrap-detail-grid,
  .scrap-detail-grid dt,
  .scrap-detail-grid dd {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .station-create-modal .station-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .station-create-modal .station-form-grid .wide-field,
  .station-create-modal .station-form-grid .full-field,
  .station-create-modal .station-info-note {
    grid-column: 1 / -1;
  }

  .station-create-modal .station-form-grid .field input,
  .station-create-modal .station-form-grid .field select,
  .station-create-modal .station-form-grid .field textarea {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .station-create-modal .station-form-grid .field small,
  .station-create-modal .station-info-note,
  .station-create-modal .station-machines-empty,
  .station-create-modal .station-usage-card p {
    overflow-wrap: anywhere;
  }

  .station-create-modal .station-modal-section.compact-section,
  .station-create-modal .station-machines-empty,
  .station-create-modal .station-machine-row,
  .station-create-modal .station-usage-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .station-create-modal .station-usage-chips {
    justify-content: flex-start;
  }

  .team-member-modal .station-modal-actions,
  .station-create-modal .station-modal-actions,
  .scrap-detail-modal .modal-actions {
    position: relative;
    bottom: auto;
    flex-wrap: wrap;
    margin-top: 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .scrap-detail-modal .modal-title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 22px 18px 18px;
    border-bottom: 1px solid var(--ds-border);
  }

  .scrap-detail-modal .modal-title-row .plain-icon {
    justify-self: end;
  }

  .scrap-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    margin: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .scrap-detail-grid div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .scrap-detail-grid dt,
  .scrap-detail-grid dd {
    overflow-wrap: anywhere;
  }

  .scrap-detail-modal .modal-actions {
    justify-content: stretch;
  }

  .scrap-detail-modal .modal-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }
}

/* Build 050.1 approved Work Orders list overrides. */
.work-orders-screen .work-orders-desktop-filters {
  min-width: 0;
}

.work-orders-screen .work-orders-toolbar {
  grid-template-columns: minmax(0, 1fr);
}

.work-orders-screen .work-orders-mobile-filters {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.work-orders-screen .work-orders-table {
  min-width: 1408px;
  table-layout: fixed;
}

.work-orders-screen .work-orders-table .wo-col-title { width: 170px; }

.work-orders-screen .work-orders-table .wo-col-customer { width: 180px; }

.work-orders-screen .work-orders-table th,
.work-orders-screen .work-orders-table td {
  white-space: normal;
}

.work-orders-screen .row-actions {
  flex-wrap: nowrap;
}

.work-orders-screen .icon-action {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font-weight: 700;
}

.work-orders-screen .work-order-card .open-card-button {
  height: auto;
  min-height: 48px;
  font-weight: 700;
}

.work-orders-screen .status-badge,
.work-orders-screen .priority-badge,
.work-orders-screen .problem-count {
  font-weight: 700;
}

.work-orders-screen .work-orders-toolbar select,
.work-orders-screen .work-orders-toolbar input {
  min-width: 0;
  font-weight: 500;
}

.work-orders-screen .work-order-customer {
  font-weight: 700;
}

.work-orders-screen .owner-cell span {
  font-weight: 500;
}

.work-orders-screen .compact-command {
  min-height: 44px;
}

@media (max-width: 860px) {
  .work-orders-screen .work-order-table-wrap {
    display: none;
  }

  .work-orders-screen .work-order-card-grid {
    display: grid;
  }
}

@media (min-width: 861px) {
  .work-orders-screen .work-order-table-wrap {
    display: block;
  }

  .work-orders-screen .work-order-card-grid {
    display: none;
  }
}

/* Build 050.1 post-QA visual alignment pass. */
.content:has(> .topbar + #section-root .work-orders-screen) {
  padding-top: 18px;
}

.topbar:has(+ #section-root .work-orders-screen) {
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), 0.04);
}

.topbar:has(+ #section-root .work-orders-screen) .title-block {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar:has(+ #section-root .work-orders-screen) .title-block p {
  margin: 0 0 4px;
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.topbar:has(+ #section-root .work-orders-screen) .title-block h1 {
  margin: 0;
  font-size: clamp(24px, 1.95vw, 28px);
  font-weight: 700;
  line-height: 1.08;
}

.topbar:has(+ #section-root .work-orders-screen) .title-block span {
  max-width: 720px;
  margin-top: 5px;
  color: #526a82;
  font-size: 12.5px;
  line-height: 1.35;
}

.topbar:has(+ #section-root .work-orders-screen) .topbar-actions {
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.topbar:has(+ #section-root .work-orders-screen) .compact-command {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 12px;
}

.topbar:has(+ #section-root .work-orders-screen) .primary-button[data-action="new-work-order"] {
  min-height: 40px;
  border-color: var(--ds-primary);
  padding: 0 15px;
  color: var(--ds-card);
  background: var(--ds-primary);
  box-shadow: 0 8px 18px rgba(var(--ds-primary-rgb), 0.2);
  font-weight: 800;
}

.topbar:has(+ #section-root .work-orders-screen) .primary-button[data-action="new-work-order"]:hover {
  border-color: var(--ds-primary-hover);
  color: var(--ds-card);
  background: var(--ds-primary-hover);
  box-shadow: 0 10px 20px rgba(var(--ds-primary-rgb), 0.22);
}

.topbar:has(+ #section-root .work-orders-screen) .notification-trigger,
.topbar:has(+ #section-root .work-orders-screen) .profile-chip {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

.topbar:has(+ #section-root .work-orders-screen) .profile-chip span {
  width: 34px;
  height: 34px;
}

.work-orders-screen {
  gap: 12px;
}

.work-orders-screen .work-order-kpis {
  gap: 10px;
}

.work-orders-screen .work-order-kpi {
  gap: 10px;
  min-height: 78px;
  border-radius: 10px;
  padding: 12px 14px;
}

.work-orders-screen .work-order-kpi .soft-icon {
  width: 40px;
  height: 40px;
}

.work-orders-screen .work-order-kpi div {
  gap: 2px;
}

.work-orders-screen .work-order-kpi strong {
  font-size: 23px;
}

.work-orders-screen .work-order-kpi span {
  font-size: 13px;
}

.work-orders-screen .work-order-kpi small {
  font-size: 11.5px;
  line-height: 1.25;
}

.work-orders-screen .work-orders-toolbar {
  gap: 8px;
  border-radius: 10px;
  padding: 10px 12px;
}

.work-orders-screen .work-order-context-chips {
  gap: 6px;
}

.work-orders-screen .work-order-context-chips span {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11.5px;
}

.work-orders-screen .work-orders-desktop-filters {
  grid-template-columns: minmax(220px, 1.45fr) repeat(4, minmax(116px, 1fr));
  gap: 8px 10px;
}

.work-orders-screen .work-orders-toolbar label {
  gap: 4px;
  font-size: 12px;
}

.work-orders-screen .work-orders-toolbar label > span {
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.work-orders-screen .work-orders-toolbar select,
.work-orders-screen .work-orders-toolbar input {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 13px;
}

.work-orders-screen .work-search svg {
  right: 12px;
  bottom: 10px;
  width: 16px;
  height: 16px;
}

.work-orders-screen .work-search input {
  padding-right: 38px;
}

.work-orders-screen .work-orders-toolbar .compact-command {
  min-height: 38px;
}

.work-orders-screen .work-orders-table tbody td:first-child .work-order-code {
  display: block;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.2;
}

.wo-internal-number {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--ds-heading);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wo-internal-inline {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-orders-screen .work-orders-table tbody td:first-child .status-badge,
.work-orders-screen .work-order-card dd .status-badge {
  border-radius: 0;
  padding: 0;
  color: var(--ds-text-light);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}

.work-orders-screen .two-line-cell,
.work-orders-screen .owner-cell span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
}

.work-orders-screen .problem-count {
  min-width: 28px;
  min-height: 24px;
  padding: 3px 7px;
  font-size: 11.5px;
}

.work-orders-screen .problem-count.no-problems {
  color: var(--ds-text);
  border-color: rgba(var(--ds-primary-border-rgb), 0.26);
  background: var(--ds-card);
}

.work-orders-screen .row-actions {
  gap: 6px;
}

.work-orders-screen .icon-action {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}

.work-orders-screen .wo-progress {
  gap: 5px;
}

.work-orders-screen .wo-progress em {
  font-size: 12.5px;
}

@media (max-width: 1440px) {
  .work-orders-screen .work-orders-table {
    min-width: 1120px;
  }

  .work-orders-screen .work-orders-table .wo-col-code { width: 88px; }
  .work-orders-screen .work-orders-table .wo-col-opened { width: 78px; }
  .work-orders-screen .work-orders-table .wo-col-internal { width: 86px; }
  .work-orders-screen .work-orders-table .wo-col-title { width: 132px; }
  .work-orders-screen .work-orders-table .wo-col-customer { width: 150px; }
  .work-orders-screen .work-orders-table .wo-col-owner { width: 112px; }
  .work-orders-screen .work-orders-table .wo-col-priority { width: 70px; }
  .work-orders-screen .work-orders-table .wo-col-status { width: 72px; }
  .work-orders-screen .work-orders-table .wo-col-due { width: 92px; }
  .work-orders-screen .work-orders-table .wo-col-problems { width: 70px; }
  .work-orders-screen .work-orders-table .wo-col-progress { width: 72px; }
  .work-orders-screen .work-orders-table .wo-col-actions { width: 84px; }

  .work-orders-screen .work-orders-table tbody td:first-child .work-order-code {
    font-size: 12px;
  }

  .work-orders-screen .problem-count {
    min-width: 24px;
    padding: 2px 6px;
    font-size: 10.5px;
  }

  .work-orders-screen .wo-progress em {
    font-size: 11px;
  }

  .work-orders-screen .row-actions {
    gap: 4px;
  }

  .work-orders-screen .icon-action {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .work-orders-screen .work-orders-table th:last-child,
  .work-orders-screen .work-orders-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    background: var(--ds-card);
    box-shadow: -8px 0 14px rgba(var(--ds-sidebar-rgb), 0.08);
  }

  .work-orders-screen .work-orders-table th:last-child {
    z-index: 4;
  }

  .work-orders-screen .work-order-kpi {
    min-height: 76px;
    padding: 11px 13px;
  }

  .work-orders-screen .work-order-kpi .soft-icon {
    width: 38px;
    height: 38px;
  }

  .work-orders-screen .work-orders-toolbar {
    padding: 10px 12px;
  }

  .work-orders-screen .work-orders-desktop-filters {
    grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(112px, 1fr));
  }

  .work-orders-screen .work-orders-desktop-filters .work-search,
  .work-orders-screen .work-orders-desktop-filters .sort-filter {
    grid-column: auto;
  }
}

@media (max-width: 1024px) {
  .topbar:has(+ #section-root .work-orders-screen) {
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .topbar:has(+ #section-root .work-orders-screen) .title-block {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    justify-self: start;
  }

  .topbar:has(+ #section-root .work-orders-screen) .title-block p,
  .topbar:has(+ #section-root .work-orders-screen) .title-block h1,
  .topbar:has(+ #section-root .work-orders-screen) .title-block span {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }

  .topbar:has(+ #section-root .work-orders-screen) .topbar-actions {
    justify-content: flex-start;
    justify-self: start;
    width: 100%;
    flex-wrap: wrap;
  }

  .topbar:has(+ #section-root .work-orders-screen) .compact-command {
    flex: 0 1 auto;
    min-width: max-content;
  }

  .work-orders-screen .work-orders-desktop-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-orders-screen .work-orders-desktop-filters .work-search,
  .work-orders-screen .work-orders-desktop-filters .sort-filter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .work-orders-screen .work-order-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-orders-screen .work-order-kpi:last-child {
    grid-column: auto;
  }

  .work-orders-screen .work-orders-desktop-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  .work-orders-screen .work-orders-desktop-filters .work-search,
  .work-orders-screen .work-orders-desktop-filters .sort-filter {
    grid-column: 1 / -1;
  }

  .work-orders-screen .work-orders-toolbar select,
  .work-orders-screen .work-orders-toolbar input,
  .work-orders-screen .work-orders-toolbar .compact-command {
    min-height: 36px;
  }
}

@media (max-width: 560px) {
  .content:has(> .topbar + #section-root .work-orders-screen) {
    padding-top: 14px;
  }

  .topbar:has(+ #section-root .work-orders-screen) {
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
  }

  .topbar:has(+ #section-root .work-orders-screen) .title-block p {
    margin-bottom: 4px;
    font-size: 10px;
  }

  .topbar:has(+ #section-root .work-orders-screen) .title-block h1 {
    font-size: 23px;
  }

  .topbar:has(+ #section-root .work-orders-screen) .title-block span {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.3;
  }

  .topbar:has(+ #section-root .work-orders-screen) .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .topbar:has(+ #section-root .work-orders-screen) .compact-command,
  .topbar:has(+ #section-root .work-orders-screen) .primary-button,
  .topbar:has(+ #section-root .work-orders-screen) .secondary-button {
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
  }

  .topbar:has(+ #section-root .work-orders-screen) .compact-command span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar:has(+ #section-root .work-orders-screen) .notification-wrap,
  .topbar:has(+ #section-root .work-orders-screen) .profile-chip {
    min-width: 0;
  }

  .topbar:has(+ #section-root .work-orders-screen) .notification-trigger,
  .topbar:has(+ #section-root .work-orders-screen) .profile-chip {
    justify-content: center;
    width: 100%;
    height: 38px;
    min-height: 38px;
    border-radius: 8px;
  }

  .topbar:has(+ #section-root .work-orders-screen) .profile-chip span {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .work-orders-screen .work-order-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .work-orders-screen .work-order-kpi:last-child {
    grid-column: 1 / -1;
  }

  .work-orders-screen .work-order-kpi {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 76px;
    padding: 10px;
  }

  .work-orders-screen .work-order-kpi .soft-icon {
    width: 30px;
    height: 30px;
  }

  .work-orders-screen .work-order-kpi strong {
    font-size: 20px;
    line-height: 1.05;
  }

  .work-orders-screen .work-order-kpi span {
    font-size: 11.5px;
    line-height: 1.15;
  }

  .work-orders-screen .work-order-kpi small {
    font-size: 10.5px;
    line-height: 1.15;
  }

  .work-orders-screen .work-orders-toolbar {
    gap: 8px;
    padding: 10px;
  }

  .work-order-mobile-filter-row,
  .work-order-mobile-filter-grid {
    gap: 8px;
  }

  .work-order-mobile-filter-details summary {
    min-height: 42px;
  }
}

/* Build 050.1 final tablet landscape table mapping. */
.work-orders-screen .work-order-table-wrap-landscape {
  display: none;
}

.work-orders-screen .wo-stacked-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.work-orders-screen .wo-stacked-cell strong,
.work-orders-screen .wo-stacked-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-orders-screen .wo-stacked-cell strong {
  display: -webkit-box;
  color: #17324d;
  font-size: 12.5px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.work-orders-screen .wo-stacked-cell small {
  display: block;
  color: #526a82;
  font-size: 11.25px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.work-orders-screen .wo-landscape-progress {
  max-width: 88px;
}

.work-orders-screen .wo-landscape-progress .wo-progress {
  gap: 3px;
  min-width: 0;
}

.work-orders-screen .wo-landscape-progress .wo-progress em {
  font-size: 11px;
}

.work-orders-screen .wo-landscape-progress .wo-progress i {
  width: 58px;
  height: 5px;
}

@media (min-width: 861px) and (max-width: 1280px) {
  .work-orders-screen .work-order-table-wrap-desktop {
    display: none;
  }

  .work-orders-screen .work-order-table-wrap-landscape {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .work-orders-screen .work-orders-table-landscape {
    width: 100%;
    min-width: 1050px;
  }

  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-code { width: 115px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-opened { width: 78px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-title { width: 235px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-owner { width: 128px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-priority { width: 90px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-status { width: 135px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-due { width: 115px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-problems { width: 70px; }
  .work-orders-screen .work-orders-table-landscape .wo-landscape-col-actions { width: 84px; }

  .work-orders-screen .work-orders-table-landscape th:last-child,
  .work-orders-screen .work-orders-table-landscape td:last-child {
    position: static;
    right: auto;
    z-index: auto;
    background: inherit;
    box-shadow: none;
  }

  .work-orders-screen .work-orders-table-landscape td:last-child {
    background: var(--ds-card);
  }

  .work-orders-screen .work-orders-table-landscape .sort-header {
    max-width: 100%;
  }

  .work-orders-screen .work-orders-table-landscape .sort-header span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .work-orders-screen .work-orders-table-landscape .row-actions {
    justify-content: center;
    gap: 5px;
  }

  .work-orders-screen .work-orders-table-landscape .icon-action {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .work-orders-screen .work-orders-table-landscape .problem-count {
    min-width: 24px;
  }
}

@media (max-width: 860px) {
  .work-orders-screen .work-order-table-wrap-landscape {
    display: none;
  }
}

/* Build 050.2 - New Work Order modal visual authority. */
.work-order-create-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(var(--ds-sidebar-rgb), 0.36);
}

.modal-panel.work-order-create-modal {
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 44px));
  max-height: calc(100dvh - 44px);
  overflow: hidden;
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.72);
  border-radius: 16px;
  padding: 0;
  background: var(--ds-card);
  box-shadow: 0 4px 12px rgba(var(--ds-sidebar-rgb), 0.1), 0 24px 48px rgba(var(--ds-sidebar-rgb), 0.18);
}

.modal-panel.work-order-create-modal .work-order-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  border-bottom: 1px solid rgba(var(--ds-primary-border-rgb), 0.42);
  padding: 18px 20px 14px;
}

.work-order-modal-overline {
  display: block;
  margin-bottom: 6px;
  color: #4f6a85;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.modal-panel.work-order-create-modal .work-order-modal-header h2 {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--ds-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.12;
}

.modal-panel.work-order-create-modal .work-order-modal-header p {
  max-width: 680px;
  margin: 6px 0 0;
  color: #4f6a85;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.work-order-modal-close {
  display: grid;
  width: 38px;
  height: 38px;
  min-width: 38px;
  place-items: center;
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.58);
  border-radius: 9px;
  color: var(--ds-text);
  background: var(--ds-card);
  cursor: pointer;
}

.work-order-modal-close:hover,
.work-order-modal-close:focus-visible {
  border-color: var(--ds-primary-border);
  color: var(--ds-heading);
  background: var(--ds-primary-light);
  outline: 0;
}

.work-order-modal-close:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.work-order-modal-close svg {
  width: 18px;
  height: 18px;
}

.work-order-modal-body {
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  padding: 14px;
  background: var(--ds-bg);
}

.modal-panel.work-order-create-modal .work-order-create-main {
  display: grid;
  gap: 12px;
}

.modal-panel.work-order-create-modal .wo-create-card,
.modal-panel.work-order-create-modal .wo-number-card {
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.58);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 1px 2px rgba(var(--ds-sidebar-rgb), 0.06), 0 8px 20px rgba(var(--ds-sidebar-rgb), 0.06);
}

.modal-panel.work-order-create-modal .wo-create-card {
  padding: 14px;
}

.wo-create-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-panel.work-order-create-modal .wo-create-section-title h3 {
  display: block;
  margin: 0;
  color: var(--ds-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.wo-create-section-title small {
  color: #63768a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.modal-panel.work-order-create-modal .wo-create-card-grid {
  display: grid;
  gap: 12px;
}

.modal-panel.work-order-create-modal .wo-create-card-grid.two-columns,
.modal-panel.work-order-create-modal .wo-create-card-grid.deadline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-panel.work-order-create-modal .wo-modal-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ds-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.modal-panel.work-order-create-modal .wo-modal-field > span,
.modal-panel.work-order-create-modal .wo-priority-field legend {
  color: #4f6a85;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.modal-panel.work-order-create-modal .wo-modal-field b,
.modal-panel.work-order-create-modal .wo-priority-field b {
  color: var(--ds-danger);
}

.modal-panel.work-order-create-modal .wo-modal-field input,
.modal-panel.work-order-create-modal .wo-modal-field select,
.modal-panel.work-order-create-modal .wo-modal-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ds-heading);
  background: var(--ds-card);
  font-size: 13px;
  font-weight: 700;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(var(--ds-sidebar-rgb), 0.02);
}

.modal-panel.work-order-create-modal .wo-modal-field textarea {
  min-height: 88px;
  padding-top: 10px;
  line-height: 1.45;
  resize: vertical;
}

.modal-panel.work-order-create-modal .wo-modal-field input::placeholder,
.modal-panel.work-order-create-modal .wo-modal-field textarea::placeholder {
  color: #8295aa;
}

.modal-panel.work-order-create-modal .wo-modal-field input:focus,
.modal-panel.work-order-create-modal .wo-modal-field select:focus,
.modal-panel.work-order-create-modal .wo-modal-field textarea:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), 0.12);
}

.modal-panel.work-order-create-modal .wo-modal-field input:disabled,
.modal-panel.work-order-create-modal .wo-modal-field select:disabled,
.modal-panel.work-order-create-modal .wo-modal-field textarea:disabled {
  cursor: not-allowed;
  color: #63768a;
  background: #f1f6fb;
}

.modal-panel.work-order-create-modal .wo-modal-field small,
.modal-panel.work-order-create-modal .textarea-counter {
  color: #63768a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.modal-panel.work-order-create-modal .textarea-counter {
  justify-self: end;
}

.modal-panel.work-order-create-modal .wo-modal-field em,
.modal-panel.work-order-create-modal .wo-priority-field em {
  color: var(--ds-danger);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.modal-panel.work-order-create-modal .wo-modal-field.has-error input,
.modal-panel.work-order-create-modal .wo-modal-field.has-error select,
.modal-panel.work-order-create-modal .wo-modal-field.has-error textarea {
  border-color: rgba(220, 38, 38, 0.62);
  background: #fffafa;
}

.modal-panel.work-order-create-modal .wo-priority-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.modal-panel.work-order-create-modal .wo-priority-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  min-height: 38px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: var(--ds-card);
}

.modal-panel.work-order-create-modal .wo-priority-segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border-right: 1px solid var(--ds-primary-border);
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.modal-panel.work-order-create-modal .wo-priority-segment:last-child {
  border-right: 0;
}

.modal-panel.work-order-create-modal .wo-priority-segment:hover {
  color: var(--ds-heading);
  background: #f5faff;
}

.modal-panel.work-order-create-modal .wo-priority-segment:has(input:focus-visible) {
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--ds-primary-hover);
}

.modal-panel.work-order-create-modal .wo-priority-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modal-panel.work-order-create-modal .priority-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ds-primary);
}

.modal-panel.work-order-create-modal .priority-dot.low {
  background: var(--ds-success);
}

.modal-panel.work-order-create-modal .priority-dot.medium {
  background: var(--ds-warning);
}

.modal-panel.work-order-create-modal .priority-dot.high {
  background: var(--ds-danger);
}

.modal-panel.work-order-create-modal .wo-priority-segment.active,
.modal-panel.work-order-create-modal .wo-priority-segment:has(input:checked) {
  z-index: 2;
  color: var(--ds-heading);
  background: #eaf4fb;
  box-shadow: inset 0 0 0 2px var(--ds-primary);
}

.modal-panel.work-order-create-modal .wo-priority-segment.active .priority-dot,
.modal-panel.work-order-create-modal .wo-priority-segment:has(input:checked) .priority-dot {
  width: 13px;
  height: 13px;
  background: var(--ds-primary);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--ds-primary);
}

.modal-panel.work-order-create-modal .wo-priority-segment.active::after,
.modal-panel.work-order-create-modal .wo-priority-segment:has(input:checked)::after {
  content: "✓";
  margin-left: 1px;
  color: var(--ds-primary-hover);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.modal-panel.work-order-create-modal .wo-priority-segment.low.active,
.modal-panel.work-order-create-modal .wo-priority-segment.low:has(input:checked) {
  color: #166534;
  background: #eaf7ee;
  box-shadow: inset 0 0 0 2px var(--ds-success);
}

.modal-panel.work-order-create-modal .wo-priority-segment.low.active .priority-dot,
.modal-panel.work-order-create-modal .wo-priority-segment.low:has(input:checked) .priority-dot {
  background: var(--ds-success);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--ds-success);
}

.modal-panel.work-order-create-modal .wo-priority-segment.low.active::after,
.modal-panel.work-order-create-modal .wo-priority-segment.low:has(input:checked)::after {
  color: #166534;
}

.modal-panel.work-order-create-modal .wo-priority-segment.medium.active,
.modal-panel.work-order-create-modal .wo-priority-segment.medium:has(input:checked) {
  color: #92400e;
  background: #fff7da;
  box-shadow: inset 0 0 0 2px var(--ds-warning);
}

.modal-panel.work-order-create-modal .wo-priority-segment.medium.active .priority-dot,
.modal-panel.work-order-create-modal .wo-priority-segment.medium:has(input:checked) .priority-dot {
  background: var(--ds-warning);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--ds-warning);
}

.modal-panel.work-order-create-modal .wo-priority-segment.medium.active::after,
.modal-panel.work-order-create-modal .wo-priority-segment.medium:has(input:checked)::after {
  color: #92400e;
}

.modal-panel.work-order-create-modal .wo-priority-segment.high.active,
.modal-panel.work-order-create-modal .wo-priority-segment.high:has(input:checked) {
  color: #991b1b;
  background: #fee2e2;
  box-shadow: inset 0 0 0 2px var(--ds-danger);
}

.modal-panel.work-order-create-modal .wo-priority-segment.high.active .priority-dot,
.modal-panel.work-order-create-modal .wo-priority-segment.high:has(input:checked) .priority-dot {
  background: var(--ds-danger);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--ds-danger);
}

.modal-panel.work-order-create-modal .wo-priority-segment.high.active::after,
.modal-panel.work-order-create-modal .wo-priority-segment.high:has(input:checked)::after {
  color: #991b1b;
}

.modal-panel.work-order-create-modal .wo-priority-field.has-error .wo-priority-segments {
  border-color: rgba(220, 38, 38, 0.62);
  background: #fffafa;
}

.work-order-create-error-banner,
.work-order-create-api-banner {
  display: none;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: 10px;
  padding: 10px 12px;
  color: #991b1b;
  background: #fff1f2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.work-order-create-restore-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  border: 1px solid var(--nx-line);
  border-radius: 10px;
  padding: 8px 10px 8px 12px;
  color: var(--nx-text);
  background: var(--ds-card);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.work-order-create-restore-banner svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.work-order-create-restore-banner span {
  flex: 1 1 180px;
}

.modal-panel.work-order-create-modal .work-order-create-general-grid > .work-order-create-restore-banner {
  grid-column: 1 / -1;
}

.work-order-create-error-banner.is-visible,
.work-order-create-api-banner.is-visible {
  display: flex;
}

.work-order-create-error-banner svg,
.work-order-create-api-banner svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.modal-panel.work-order-create-modal .work-order-create-side {
  min-width: 0;
}

.modal-panel.work-order-create-modal .wo-number-card {
  display: grid;
  align-content: start;
  gap: 12px;
  align-self: start;
  padding: 14px;
  text-align: left;
}

.modal-panel.work-order-create-modal .wo-system-code-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 10px;
  padding: 12px;
  background: var(--ds-primary-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.modal-panel.work-order-create-modal .wo-system-code-card span,
.modal-panel.work-order-create-modal .wo-summary-list dt {
  color: #4f6a85;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.modal-panel.work-order-create-modal .wo-system-code-card strong {
  color: var(--ds-heading);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.modal-panel.work-order-create-modal .wo-system-code-card small {
  color: #526a82;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}

.modal-panel.work-order-create-modal .wo-summary-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.modal-panel.work-order-create-modal .wo-summary-list div {
  display: grid;
  gap: 3px;
  border-top: 1px solid rgba(var(--ds-primary-border-rgb), 0.5);
  padding: 10px 0 0;
}

.modal-panel.work-order-create-modal .wo-summary-list div + div {
  margin-top: 10px;
}

.modal-panel.work-order-create-modal .wo-summary-list dd {
  margin: 0;
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.wo-summary-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: var(--ds-primary-hover);
  background: var(--ds-primary-light);
  font-size: 11px;
  font-weight: 800;
}

.modal-panel.work-order-create-modal .wo-number-note {
  margin: 0;
  border: 1px solid rgba(var(--ds-primary-border-rgb), 0.62);
  border-radius: 10px;
  padding: 10px;
  color: #526a82;
  background: var(--ds-card);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}

.modal-panel.work-order-create-modal .work-order-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-top: 1px solid rgba(var(--ds-primary-border-rgb), 0.42);
  padding: 12px 14px;
  background: var(--ds-card);
}

.modal-panel.work-order-create-modal .work-order-modal-actions > span {
  color: #526a82;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
}

.modal-panel.work-order-create-modal .work-order-modal-actions > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.wo-primary-button,
.wo-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 9px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.wo-primary-button {
  min-width: 174px;
  border-color: var(--ds-primary);
  color: var(--ds-card);
  background: var(--ds-primary);
  box-shadow: 0 8px 18px rgba(var(--ds-primary-rgb), 0.18);
}

.wo-primary-button:hover,
.wo-primary-button:focus-visible {
  border-color: var(--ds-primary-hover);
  background: var(--ds-primary-hover);
  outline: 0;
}

.wo-secondary-button {
  color: var(--ds-heading);
  background: var(--ds-card);
}

.wo-secondary-button:hover,
.wo-secondary-button:focus-visible {
  border-color: var(--ds-primary-border);
  background: var(--ds-primary-light);
  outline: 0;
}

.wo-primary-button:disabled,
.wo-secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

.wo-submit-spinner {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.work-order-create-modal.is-submitting .wo-submit-spinner {
  display: inline-block;
}

@media (max-width: 1280px) and (min-width: 861px) {
  .modal-panel.work-order-create-modal {
    width: min(900px, calc(100vw - 44px));
  }

  .work-order-modal-body {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 12px;
    padding: 12px;
  }

  .modal-panel.work-order-create-modal .wo-create-card-grid {
    gap: 10px;
  }
}

@media (max-width: 860px) {
  .work-order-create-backdrop {
    align-items: stretch;
    padding: 10px;
  }

  .modal-panel.work-order-create-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }

  .work-order-modal-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-panel.work-order-create-modal .work-order-create-side {
    order: -1;
  }

  .modal-panel.work-order-create-modal .wo-number-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-panel.work-order-create-modal .wo-system-code-card,
  .modal-panel.work-order-create-modal .wo-number-note {
    grid-column: 1 / -1;
  }

  .modal-panel.work-order-create-modal .wo-create-card-grid.two-columns,
  .modal-panel.work-order-create-modal .wo-create-card-grid.deadline-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .work-order-create-backdrop {
    padding: 0;
  }

  .modal-panel.work-order-create-modal {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .modal-panel.work-order-create-modal .work-order-modal-header {
    padding: 14px;
  }

  .modal-panel.work-order-create-modal .work-order-modal-header h2 {
    font-size: 22px;
  }

  .work-order-modal-body {
    padding: 10px;
  }

  .modal-panel.work-order-create-modal .wo-create-card,
  .modal-panel.work-order-create-modal .wo-number-card {
    padding: 12px;
  }

  .modal-panel.work-order-create-modal .wo-number-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-panel.work-order-create-modal .wo-priority-segments {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .modal-panel.work-order-create-modal .wo-priority-segment {
    min-height: 38px;
    border-right: 0;
  }

  .modal-panel.work-order-create-modal .wo-priority-segment:not(:last-child) {
    border-bottom: 1px solid var(--ds-primary-border);
  }

  .modal-panel.work-order-create-modal .work-order-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-panel.work-order-create-modal .work-order-modal-actions > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .wo-primary-button,
  .wo-secondary-button {
    width: 100%;
  }
}
/* Build 050.3 Work Order Detail Shell */
.content-wide .work-order-detail.work-order-detail-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.content.content-wide:has(> #section-root .work-order-detail-shell) {
  padding: 18px 20px 24px;
}

@media (max-width: 640px) {
  .content.content-wide:has(> #section-root .work-order-detail-shell) {
    padding: 12px 12px 20px;
  }
}

.wo-detail-header,
.wo-detail-summary,
.wo-detail-tabs,
.wo-detail-tab-placeholder {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  box-shadow: var(--shadow-card);
}

.wo-detail-header {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.wo-detail-header-top,
.wo-detail-header-main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.wo-detail-path,
.wo-detail-title-row,
.wo-detail-badges,
.wo-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.wo-detail-back {
  min-height: 34px;
  padding: 0 10px;
}

.wo-detail-overline,
.wo-detail-system-chip,
.wo-detail-meta small,
.wo-detail-summary-item > span {
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.wo-detail-system-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-primary-light);
  white-space: nowrap;
}

.wo-detail-system-chip svg {
  width: 14px;
  height: 14px;
}

.wo-detail-identity {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.content-wide .wo-detail-identity h1,
.wo-detail-identity h1 {
  margin: 0;
  color: var(--ds-text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.wo-detail-heading {
  display: grid;
  gap: 2px;
}

.wo-detail-code {
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  letter-spacing: -.02em;
}

.wo-detail-name {
  color: var(--ds-text-muted);
  font-size: 16px;
  font-weight: 700;
}

.wo-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  min-width: 0;
}

.wo-detail-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  color: var(--ds-text-muted);
  font-size: 13px;
  font-weight: 700;
}

.wo-detail-meta strong {
  color: var(--ds-text);
  font-weight: 800;
}

.wo-detail-actions {
  align-self: stretch;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: 560px;
}

.wo-detail-header-top { align-items: flex-start; }

.wo-detail-action {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.wo-detail-actions .notification-wrap,
.wo-detail-actions .profile-chip {
  flex: 0 0 auto;
}

.wo-detail-actions .icon-button,
.wo-detail-actions .notification-trigger,
.wo-detail-actions .profile-chip {
  width: 38px;
  height: 38px;
  min-height: 38px;
}

.wo-detail-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.wo-detail-summary.is-internal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wo-detail-summary-item {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--ds-primary-rgb), 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ds-card) 0%, var(--ds-primary-light) 100%);
}

.wo-detail-summary-item strong {
  color: var(--ds-text);
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.wo-detail-summary-item small {
  color: var(--ds-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.wo-detail-progress {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--ds-bg);
  overflow: hidden;
}

.wo-detail-progress i,
.wo-detail-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.wo-detail-progress b {
  background: var(--ds-primary);
}

.wo-detail-qr-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.wo-detail-qr-row a,
.wo-detail-qr-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 7px;
  background: var(--ds-card);
  color: var(--ds-primary-hover);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.wo-detail-qr-row svg {
  width: 14px;
  height: 14px;
}

.wo-detail-summary-item.print .wo-detail-qr-row button,
.wo-detail-summary-item.qr .wo-detail-qr-row button {
  width: 100%;
  cursor: pointer;
}

.wo-detail-tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  background: var(--ds-primary-light);
}

.wo-detail-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--ds-border);
  background: transparent;
  color: var(--ds-text-muted);
  padding: 0 18px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.wo-detail-tabs button.active {
  background: var(--ds-card);
  color: var(--ds-primary-hover);
  box-shadow: inset 0 3px 0 var(--ds-primary);
}

.wo-detail-tabs button.locked em {
  display: inline-flex;
  align-items: center;
  color: var(--ds-primary-hover);
}

.wo-detail-tabs button.locked em svg {
  width: 14px;
  height: 14px;
}

.wo-detail-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(var(--ds-primary-rgb), 0.12);
  color: var(--ds-primary-hover);
  font-size: 11px;
  font-weight: 800;
}

.wo-detail-content {
  min-width: 0;
}

.wo-material-specification-tab {
  min-width: 0;
}

.wo-material-specification-tab .locked-material-panel,
.wo-analytics-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.wo-material-specification-tab .locked-material-panel {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-soft);
}

.wo-material-specification-tab .custom-panel-head,
.wo-analytics-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.wo-material-specification-tab .custom-panel-head small,
.wo-analytics-shell small {
  display: block;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.wo-material-specification-tab .custom-panel-head h3,
.wo-analytics-shell h2 {
  margin: 3px 0 0;
  color: var(--ds-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.wo-material-specification-tab .descriptor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.wo-analytics-shell > p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--ds-text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.wo-analytics-neutral-message,
.wo-analytics-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  border: 1px dashed var(--ds-primary-border);
  border-radius: 8px;
  background: rgba(var(--ds-primary-rgb), 0.06);
  color: var(--ds-heading);
  padding: 16px;
}

.wo-analytics-neutral-message.error,
.wo-analytics-error {
  border-color: rgba(190, 70, 70, 0.34);
  background: rgba(190, 70, 70, 0.08);
}

.wo-analytics-neutral-message svg,
.wo-analytics-error svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ds-primary-hover);
}

.wo-analytics-neutral-message.error svg,
.wo-analytics-error svg {
  color: var(--ds-danger);
}

.wo-analytics-neutral-message p,
.wo-analytics-error span {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.wo-analytics-settings-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.wo-analytics-settings-list div {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-page);
  padding: 12px;
}

.wo-analytics-settings-list dt {
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.wo-analytics-settings-list dd {
  margin: 0;
  color: var(--ds-text);
  font-size: 16px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.modal-panel.flow-modal.wo-analytics-modal {
  width: min(640px, calc(100vw - 40px));
  border-color: var(--ds-primary-border);
  box-shadow: 0 24px 70px rgba(var(--ds-sidebar-rgb), .24);
}

.wo-analytics-modal .flow-modal-head {
  padding: 20px 28px;
}

.wo-analytics-modal-body {
  display: grid;
  flex: 1 1 auto;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 20px;
}

.wo-analytics-field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.wo-analytics-field > span:first-child {
  line-height: 1.3;
}

.wo-analytics-field .field-helper,
.wo-analytics-field-error {
  display: block;
  margin: 2px 0 3px;
  line-height: 1.4;
}

.wo-analytics-money-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-self: start;
}

.wo-analytics-money-input input {
  min-width: 0;
  min-height: 44px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wo-analytics-money-input em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--ds-border);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.wo-detail-sticky-header {
  position: static;
  background: var(--ds-bg);
}

@media (min-width: 1024px) and (orientation: landscape),
       (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .wo-detail-sticky-header {
    position: sticky;
    top: 0;
    z-index: 30;
  }
}

.wo-analytics-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.wo-analytics-summary-section,
.wo-analytics-operation {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 13px 14px;
}

.wo-analytics-summary-section {
  box-shadow: 0 1px 2px rgba(20, 42, 76, 0.06);
}

.wo-analytics-summary-section h3,
.wo-analytics-operation strong {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
}

.wo-analytics-summary-section p,
.wo-analytics-operation-note {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.wo-analytics-summary-section small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.wo-analytics-item-list {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.wo-analytics-item-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(32, 76, 110, .42);
  border-left: 5px solid var(--ds-primary);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 249, 255, 0.86), var(--surface) 38%);
  box-shadow: 0 12px 26px rgba(16, 48, 72, .10), 0 2px 6px rgba(16, 48, 72, .05);
}

.wo-analytics-item-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--ds-primary-hover);
  content: "";
}

.wo-analytics-item-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.wo-analytics-item-ordinal {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid rgba(var(--ds-primary-rgb), .26);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--ds-primary-hover), var(--ds-primary));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
}

.wo-analytics-item-card header small,
.wo-analytics-item-card header p,
.wo-analytics-item-note {
  display: block;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.wo-analytics-item-card h3 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.wo-analytics-item-output {
  margin-top: 5px !important;
  color: var(--ds-primary-hover) !important;
  font-weight: 700;
}

.wo-analytics-item-card .status-badge {
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(20, 42, 76, 0.12);
}

.wo-analytics-item-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 8px;
  margin: 14px 0 12px;
}

.wo-analytics-item-metrics > div {
  display: flex;
  min-width: 0;
  min-height: 64px;
  flex-direction: column;
  justify-content: center;
  padding: 9px 10px;
  border: 1px solid rgba(22, 59, 109, 0.18);
  border-radius: 9px;
  background: rgba(235, 242, 252, 0.78);
}

.wo-analytics-item-metrics dt {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.wo-analytics-item-metrics dd {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}

.wo-analytics-item-note {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(22, 59, 109, 0.24);
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
}

.wo-analytics-item-card > footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 59, 109, 0.12);
}

.wo-analytics-operation-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.wo-analytics-operation header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wo-analytics-operation dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}

.wo-analytics-operation dt {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.wo-analytics-operation dd {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
}

.wo-analytics-deviation {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.wo-analytics-deviation.over {
  color: var(--ds-danger);
  background: rgba(190, 70, 70, 0.1);
}

.wo-analytics-deviation.under {
  color: var(--ds-success);
  background: rgba(48, 137, 87, 0.1);
}

.wo-analytics-deviation.neutral {
  color: var(--ds-text-muted);
  background: var(--ds-page);
}

.wo-analytics-field-error {
  color: var(--ds-danger);
  font-size: 12px;
  font-weight: 800;
}

.wo-analytics-field.has-error input,
.wo-analytics-field.has-error select {
  border-color: var(--ds-danger);
}

.modal-panel.flow-modal.wo-analytics-modal .flow-modal-footer {
  margin-top: 8px;
  padding: 18px 28px;
}

@media (max-width: 1100px) {
  .wo-analytics-item-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .wo-analytics-item-metrics {
    grid-template-columns: 1fr;
  }

  .wo-analytics-item-card > header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .wo-analytics-item-card .status-badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .modal-panel.flow-modal.wo-analytics-modal {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
  }

  .wo-analytics-modal .flow-modal-head {
    gap: 12px;
    padding: 18px 22px;
  }

  .wo-analytics-modal-body {
    padding: 20px 22px 18px;
  }

  .modal-panel.flow-modal.wo-analytics-modal .flow-modal-footer {
    padding: 16px 22px;
  }
}

@media (max-width: 480px) {
  .modal-panel.flow-modal.wo-analytics-modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .wo-analytics-modal .flow-modal-head {
    gap: 10px;
    padding: 16px 18px;
  }

  .wo-analytics-modal .flow-modal-title h2 {
    font-size: 20px;
  }

  .wo-analytics-modal-body {
    gap: 16px;
    padding: 18px;
  }

  .modal-panel.flow-modal.wo-analytics-modal .flow-modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 10px;
    padding: 14px 18px 18px;
  }

  .wo-analytics-modal .flow-modal-footer button {
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }
}

.wo-general-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.wo-general-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 1500px) {
  .wo-general-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .wo-general-main > .wo-general-warning {
    grid-column: 1 / -1;
  }
}

.wo-general-section,
.wo-general-save-strip {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-soft);
}

.wo-general-section {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.wo-general-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wo-general-section h2 {
  margin: 0;
  color: var(--ds-text);
  font-size: 18px;
  font-weight: 800;
}

.wo-general-section > header span {
  color: var(--ds-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.wo-general-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.wo-general-field,
.wo-general-priority-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.wo-general-field.wide,
.wo-general-priority-field {
  grid-column: 1 / -1;
}

.wo-general-field-label,
.wo-general-priority-field legend {
  color: var(--ds-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.wo-general-field input,
.wo-general-field select,
.wo-general-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.wo-general-field input,
.wo-general-field select {
  min-height: 42px;
  padding: 0 12px;
}

.wo-general-field textarea {
  min-height: 104px;
  padding: 12px;
  resize: vertical;
}

.wo-general-field input::placeholder,
.wo-general-field textarea::placeholder {
  color: var(--ds-text-light);
}

.wo-general-field input:focus,
.wo-general-field select:focus,
.wo-general-field textarea:focus,
.wo-general-priority-option:has(input:focus-visible) {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), 0.14);
}

.wo-general-field input[readonly],
.wo-general-field textarea[readonly],
.wo-general-field select:disabled {
  background: var(--ds-bg-soft);
  color: var(--ds-text-muted);
}

.wo-general-field small,
.wo-general-priority-field small,
.wo-general-note-meta small {
  color: var(--ds-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.wo-general-field.has-error input,
.wo-general-field.has-error select,
.wo-general-field.has-error textarea,
.wo-general-priority-field.has-error .wo-general-priority-options {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.wo-general-field .field-error,
.wo-general-priority-field .field-error {
  color: var(--ds-danger);
}

.wo-general-priority-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
}

.wo-general-priority-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-right: 1px solid var(--ds-primary-border);
  background: var(--ds-card);
  color: var(--ds-text);
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}

.wo-general-priority-option:last-child {
  border-right: 0;
}

.wo-general-priority-option input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.wo-general-priority-option:hover {
  background: rgba(var(--ds-primary-rgb), 0.05);
}

.wo-general-priority-option.active,
.wo-general-priority-option:has(input:checked) {
  border-color: var(--ds-primary);
  background: rgba(var(--ds-primary-rgb), 0.12);
  color: var(--ds-primary-hover);
  font-weight: 800;
}

.wo-general-priority-option.low.active,
.wo-general-priority-option.low:has(input:checked) {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.wo-general-priority-option.medium.active,
.wo-general-priority-option.medium:has(input:checked) {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

.wo-general-priority-option.high.active,
.wo-general-priority-option.high:has(input:checked) {
  background: rgba(220, 38, 38, 0.13);
  color: #991b1b;
}

.wo-general-legacy-priority {
  margin: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-bg-soft);
  color: var(--ds-text-muted);
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
}

.wo-general-note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wo-general-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #f7c66d;
  border-radius: 8px;
  background: #fff8e8;
  color: #7c4a03;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
}

.wo-general-warning svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.wo-general-save-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
}

.wo-general-save-state {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  color: var(--ds-text-muted);
}

.wo-general-save-state svg {
  width: 16px;
  height: 16px;
  color: var(--ds-primary);
}

.wo-general-save-state strong {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 800;
}

.wo-general-save-state small {
  color: var(--ds-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.wo-general-save-strip.validation-error .wo-general-save-state svg,
.wo-general-save-strip.api-error .wo-general-save-state svg {
  color: var(--ds-danger);
}

.wo-detail-tab-placeholder {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.wo-detail-placeholder-box {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed var(--ds-primary-border);
  border-radius: 8px;
  background: rgba(var(--ds-primary-rgb), 0.06);
  color: var(--ds-text-muted);
  text-align: center;
}

.wo-detail-placeholder-box strong {
  display: block;
  color: var(--ds-text);
  font-size: 17px;
  font-weight: 800;
}

.wo-detail-placeholder-box span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

.wo-documents-tab {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.wo-documents-head,
.wo-documents-head-actions,
.wo-document-actions,
.wo-document-group > header,
.wo-document-group > header div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wo-documents-head {
  justify-content: space-between;
  gap: 14px;
}

.wo-documents-head .section-title small,
.wo-documents-panel header small {
  display: block;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.wo-documents-head .section-title h2 {
  margin: 2px 0 0;
  color: var(--ds-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}

.wo-documents-head-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.wo-documents-count {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.wo-documents-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.38fr);
  gap: 14px;
  min-width: 0;
}

.wo-documents-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ds-card) 0%, var(--ds-bg-soft) 100%);
  padding: 14px;
}

.wo-documents-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.wo-documents-panel h3 {
  margin: 2px 0 0;
  color: var(--ds-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.18;
}

.wo-documents-panel p {
  margin: 5px 0 0;
  color: var(--ds-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.wo-documents-panel > header > span,
.wo-document-group > header > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  background: var(--ds-card);
  color: var(--ds-primary-hover);
  font-size: 12px;
  font-weight: 800;
}

.wo-document-actions {
  flex-wrap: wrap;
}

.wo-document-actions .compact-command,
.wo-documents-head-actions .compact-command {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.wo-document-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.wo-document-list.compact {
  gap: 8px;
}

.wo-document-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: var(--ds-card);
  padding: 9px;
}

.wo-document-card.customer {
  border-left: 3px solid var(--ds-primary);
}

.wo-document-select {
  display: inline-grid;
  place-items: center;
}

.wo-document-select input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.wo-document-open {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.wo-document-open:hover strong,
.wo-document-open:focus-visible strong {
  color: var(--ds-primary-hover);
}

.wo-document-open:focus-visible {
  outline: 3px solid rgba(var(--ds-primary-rgb), 0.2);
  outline-offset: 3px;
  border-radius: 8px;
}

.wo-document-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.wo-document-icon.photo {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}

.wo-document-icon.pdf {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.wo-document-icon.cad {
  background: rgba(217, 119, 6, 0.13);
  color: #92400e;
}

.wo-document-icon svg {
  width: 18px;
  height: 18px;
}

.wo-document-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wo-document-copy strong,
.wo-document-copy small,
.wo-document-copy em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wo-document-copy strong {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.wo-document-copy small,
.wo-document-copy em {
  color: var(--ds-text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.wo-document-copy em {
  white-space: nowrap;
}

.wo-document-group {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: rgba(var(--ds-primary-rgb), 0.035);
  padding: 11px;
}

.wo-document-group > header {
  justify-content: space-between;
}

.wo-document-group > header strong {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 800;
}

.wo-document-group svg {
  width: 16px;
  height: 16px;
  color: var(--ds-primary);
}

.wo-document-group.is-empty {
  background: var(--ds-card);
}

.wo-document-empty-row,
.wo-documents-empty {
  border: 1px dashed var(--ds-primary-border);
  border-radius: 8px;
  background: rgba(var(--ds-primary-rgb), 0.035);
  color: var(--ds-text-muted);
  padding: 14px;
  font-size: 12px;
  font-weight: 700;
}

.wo-documents-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 160px;
  align-content: center;
  text-align: center;
}

.wo-documents-empty svg {
  width: 26px;
  height: 26px;
  color: var(--ds-primary);
}

.wo-documents-empty strong {
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 800;
}

.customer-document-modal .document-source-grid {
  margin-bottom: 12px;
}

.work-order-documents-print-root {
  display: none;
}

@media print {
  @page {
    margin: 12mm;
  }

  body.printing-work-order-documents {
    background: #fff;
  }

  body.printing-work-order-documents .app-shell,
  body.printing-work-order-documents #modal-root,
  body.printing-work-order-documents #toast-root {
    display: none !important;
  }

  body.printing-work-order-documents .work-order-documents-print-root {
    display: block !important;
    padding: 0;
  }

  .wo-print-document-sheet {
    break-after: page;
    page-break-after: always;
    min-height: calc(100vh - 24mm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wo-print-document-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .wo-print-document-sheet img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 24mm);
    object-fit: contain;
    margin: 0 auto;
  }

  .wo-print-document-frame {
    width: 100%;
    height: calc(100vh - 24mm);
    border: 0;
  }
}

@media (max-width: 1280px) and (min-width: 861px) {
  .content-wide .work-order-detail.work-order-detail-shell {
    gap: 10px;
  }

  .wo-detail-header-main {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wo-detail-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .wo-detail-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wo-detail-summary.is-internal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wo-documents-layout {
    grid-template-columns: 1fr;
  }

  .wo-general-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .wo-general-section {
    padding: 14px;
  }
}

@media (max-width: 860px) {
  .wo-analytics-overview,
  .wo-analytics-operation dl {
    grid-template-columns: 1fr;
  }

  .wo-analytics-item-card {
    padding: 14px;
  }

  .wo-analytics-item-card > header {
    display: grid;
  }

  .wo-analytics-item-card > footer {
    justify-content: stretch;
  }

  .wo-analytics-item-card > footer .compact-command {
    width: 100%;
    justify-content: center;
  }
  .wo-detail-header,
  .wo-detail-summary,
  .wo-detail-tab-placeholder,
  .wo-material-specification-tab .locked-material-panel,
  .wo-analytics-shell,
  .wo-documents-tab {
    padding: 12px;
  }

  .wo-detail-header-top,
  .wo-detail-header-main {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wo-detail-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .content-wide .wo-detail-identity h1,
  .wo-detail-identity h1 {
    font-size: 24px;
  }

  .wo-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wo-detail-meta span {
    display: grid;
    gap: 2px;
  }

  .wo-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wo-detail-tabs {
    overflow-x: auto;
  }

  .wo-detail-tabs button {
    min-height: 44px;
    padding: 0 14px;
  }

  .wo-documents-layout {
    grid-template-columns: 1fr;
  }

  .wo-documents-head,
  .wo-material-specification-tab .custom-panel-head,
  .wo-analytics-card-head,
  .wo-documents-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .wo-document-actions,
  .wo-documents-head-actions {
    align-items: stretch;
    width: 100%;
  }

  .wo-document-actions .compact-command,
  .wo-documents-head-actions .compact-command,
  .wo-analytics-card-head .compact-command {
    width: 100%;
  }

  .wo-general-shell {
    grid-template-columns: 1fr;
  }

  .wo-general-save-strip {
    order: 3;
  }

  .wo-analytics-settings-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .wo-detail-title-row,
  .wo-detail-path,
  .wo-detail-actions {
    align-items: flex-start;
  }

  .wo-detail-title-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .content-wide .wo-detail-identity h1,
  .wo-detail-identity h1 {
    font-size: 22px;
  }

  .wo-detail-meta,
  .wo-detail-summary {
    grid-template-columns: 1fr;
  }

  .wo-detail-summary.is-internal {
    grid-template-columns: 1fr;
  }

  .modal-panel.flow-modal.wo-analytics-modal {
    width: calc(100vw - 16px);
  }

  .wo-analytics-money-input {
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .wo-document-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wo-document-card .danger-icon {
    grid-column: 2;
    justify-self: end;
  }

  .wo-detail-action {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .wo-general-section {
    padding: 12px;
  }

  .wo-general-section > header,
  .wo-general-save-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .wo-general-section-grid,
  .wo-general-priority-options {
    grid-template-columns: 1fr;
  }

  .wo-general-priority-option {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--ds-primary-border);
  }

  .wo-general-priority-option:last-child {
    border-bottom: 0;
  }

  .wo-detail-actions .notification-wrap,
  .wo-detail-actions .profile-chip {
    align-self: flex-start;
  }
}

@media (max-width: 920px) {
  .runtime-add-item-modal .flow-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Build 050.6A global modal/button parity layer. */
.modal-backdrop {
  background: rgba(var(--ds-sidebar-rgb), .36);
  backdrop-filter: none;
  filter: none;
}

.primary-button,
button.primary-button,
.primary-button.compact-command,
button.primary-button.compact-command {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(var(--ds-primary-rgb), .22);
  transform: none;
}

.primary-button:hover,
button.primary-button:hover,
.primary-button.compact-command:hover,
button.primary-button.compact-command:hover,
.primary-button:focus-visible,
button.primary-button:focus-visible,
.primary-button.compact-command:focus-visible,
button.primary-button.compact-command:focus-visible {
  border-color: var(--ds-primary-hover);
  background: var(--ds-primary-hover);
  color: #fff;
  box-shadow: 0 12px 26px rgba(var(--ds-primary-rgb), .26);
  transform: none;
}

.primary-button:active,
button.primary-button:active,
.primary-button.compact-command:active,
button.primary-button.compact-command:active {
  border-color: var(--ds-primary-strong);
  background: var(--ds-primary-strong);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--ds-sidebar-rgb), .16), 0 8px 18px rgba(var(--ds-primary-rgb), .16);
  transform: none;
}

.primary-button svg,
button.primary-button svg,
.primary-button.compact-command svg,
button.primary-button.compact-command svg {
  color: currentColor;
}

.wo-detail-completion-slot .wo-quick-complete-action.primary-button {
  border-color: #047857;
  background: #047857;
  color: #fff;
  box-shadow: 0 10px 22px rgba(4, 120, 87, .2);
}

.wo-detail-completion-slot .wo-quick-complete-action.primary-button:hover,
.wo-detail-completion-slot .wo-quick-complete-action.primary-button:focus-visible {
  border-color: #065f46;
  background: #065f46;
  color: #fff;
  box-shadow: 0 12px 26px rgba(4, 120, 87, .25);
}

.wo-detail-completion-slot .wo-quick-complete-action.primary-button:active {
  border-color: #064e3b;
  background: #064e3b;
}

/* Compact next-step dialog shown after a work order is completed. */
.modal-panel.quick-completion-next-step-modal {
  width: min(500px, calc(100vw - 28px));
  padding: 24px;
  border: 1px solid rgba(var(--ds-primary-rgb), .16);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(var(--ds-sidebar-rgb), .2);
}

.quick-completion-next-step-modal > h2 {
  margin: 0 42px 4px 0;
  color: var(--ds-heading);
  font-size: 22px;
  line-height: 1.2;
}

.quick-completion-next-step-modal > p {
  margin: 0;
  color: var(--ds-text-light);
  font-size: 13px;
  line-height: 1.45;
}

.completion-next-step-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #dbe5ed;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbfd 0%, #fff 72%);
}

.completion-next-step-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #eaf3f8;
  color: var(--ds-primary);
}

.completion-next-step-icon > svg {
  width: 27px;
  height: 27px;
}

.completion-next-step-icon > span {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #07805f;
  color: #fff;
}

.completion-next-step-icon > span svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.completion-next-step-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.completion-next-step-copy small {
  color: var(--ds-primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.completion-next-step-copy strong {
  color: var(--ds-heading);
  font-size: 15px;
  line-height: 1.25;
}

.completion-next-step-copy p {
  margin: 0;
  color: var(--ds-text-light);
  font-size: 12px;
  line-height: 1.4;
}

.completion-next-step-arrow {
  display: grid;
  place-items: center;
  color: #8aa0b2;
}

.completion-next-step-arrow svg {
  width: 19px;
  height: 19px;
}

.quick-completion-next-step-modal .modal-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e4ebf1;
}

.quick-completion-next-step-modal .modal-actions button {
  min-height: 42px;
  border-radius: 9px;
}

.quick-completion-next-step-modal .completion-next-step-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.quick-completion-next-step-modal .completion-next-step-action svg {
  width: 18px;
  height: 18px;
}

.quick-completion-next-step-modal.is-archive .completion-next-step-icon {
  background: #eef0f8;
  color: #4f5f91;
}

.quick-completion-next-step-modal.is-stock .completion-next-step-icon {
  background: #eef6ef;
  color: #33724a;
}

@media (max-width: 520px) {
  .modal-panel.quick-completion-next-step-modal {
    padding: 20px;
  }

  .completion-next-step-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .completion-next-step-icon {
    width: 48px;
    height: 48px;
  }

  .completion-next-step-arrow {
    display: none;
  }

  .quick-completion-next-step-modal .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr);
    gap: 8px;
  }
}

.wo-detail-summary.wo-detail-operational {
  grid-template-columns: minmax(260px, 1.05fr) minmax(340px, .9fr);
  align-items: center;
  gap: 22px;
  padding: 16px 18px;
}

.wo-detail-summary.wo-detail-operational.has-completion {
  grid-template-columns: minmax(260px, 1.2fr) minmax(340px, .85fr) minmax(190px, .35fr);
  padding-right: 12px;
}

.wo-detail-progress-panel { min-width: 0; }
.wo-detail-progress-heading,
.wo-detail-progress-ends {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wo-detail-progress-heading {
  margin-bottom: 7px;
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 800;
}
.wo-detail-progress-heading strong { font-size: 19px; font-weight: 900; }
.wo-detail-progress-scale {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--ds-primary-rgb), .28);
  border-radius: 999px;
  background: #e6edf4;
}
.wo-detail-progress-scale > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-primary);
}
.wo-detail-progress-ends {
  margin-top: 4px;
  color: var(--ds-text-light);
  font-size: 10px;
  font-weight: 700;
}
.wo-detail-print-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-left: 1px solid var(--nx-line);
  padding-left: 20px;
}
.wo-detail-print-buttons { display: flex; gap: 9px; }
.wo-detail-print-buttons .wo-detail-print-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 162px;
  min-height: 40px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-primary-hover);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
  white-space: nowrap;
}
.wo-detail-print-buttons .wo-detail-print-trigger svg { width: 15px; height: 15px; }
.wo-detail-print-buttons .wo-detail-print-trigger:hover,
.wo-detail-print-buttons .wo-detail-print-trigger:focus-visible { background: var(--ds-primary-light); }
.wo-detail-completion-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-left: 1px solid var(--nx-line);
  padding-left: 20px;
}
.wo-detail-completion-slot .wo-quick-complete-action { min-width: 176px; min-height: 40px; white-space: nowrap; }
.wo-detail-archive-badge { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .wo-detail-summary.wo-detail-operational,
  .wo-detail-summary.wo-detail-operational.has-completion {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .wo-detail-progress-panel { grid-column: 1 / -1; }
  .wo-detail-print-cluster { justify-self: start; border-left: 0; padding-left: 0; }
  .wo-detail-completion-slot { border-left: 0; padding-left: 0; }
}

@media (max-width: 700px) {
  .wo-detail-summary.wo-detail-operational,
  .wo-detail-summary.wo-detail-operational.has-completion { grid-template-columns: minmax(0, 1fr); }
  .wo-detail-print-cluster,
  .wo-detail-completion-slot { width: 100%; }
  .wo-detail-print-buttons { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .wo-detail-print-cluster.is-internal .wo-detail-print-buttons { grid-template-columns: minmax(0, 1fr); }
  .wo-detail-print-buttons .wo-detail-print-trigger { width: 100%; white-space: normal; }
  .wo-detail-completion-slot { border-left: 0; border-top: 1px solid var(--nx-line); padding: 12px 0 0; }
  .wo-detail-completion-slot .wo-quick-complete-action { width: 100%; justify-content: center; }
}

.items-toolbar-actions .primary-button.compact-command[data-action="open-add-item-chooser"] {
  min-height: 44px;
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(var(--ds-primary-rgb), .22);
  white-space: nowrap;
}

.items-toolbar-actions .primary-button.compact-command[data-action="open-add-item-chooser"]:hover,
.items-toolbar-actions .primary-button.compact-command[data-action="open-add-item-chooser"]:focus-visible {
  border-color: var(--ds-primary-hover);
  background: var(--ds-primary-hover);
  color: #fff;
}

.flow-modal-footer {
  justify-content: flex-end;
}

.modal-panel.flow-modal.runtime-add-item-modal {
  width: min(900px, calc(100vw - 48px));
  max-height: calc(100dvh - 40px);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(var(--ds-sidebar-rgb), .22);
}

.modal-panel.flow-modal.runtime-add-item-modal:focus {
  outline: none;
}

.runtime-add-item-modal .flow-choice-grid {
  background: var(--ds-bg-soft);
}

.runtime-add-item-modal .add-item-choice-card.flow-source-card {
  border-radius: 12px;
  background: #fff;
}

.runtime-add-item-modal .flow-source-card.base b {
  border-color: rgba(var(--ds-primary-rgb), .45);
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
}

.runtime-add-item-modal .flow-source-card.custom b {
  border-color: var(--ds-primary-border);
  background: #fff;
  color: var(--ds-primary-strong);
}

.manual-work-entry-modal.admin-work-flow {
  width: min(1120px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--ds-primary-border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(var(--ds-sidebar-rgb), .24);
}

.base-product-documents-panel { grid-column: 1 / -1; }
.wo-base-product-document-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 12px; }
.wo-base-product-document { display: grid; align-content: start; gap: 10px; min-width: 0; border: 1px solid var(--ds-border); border-radius: 10px; padding: 12px; background: var(--ds-card); }
.wo-base-product-document > header { display: grid; gap: 3px; min-width: 0; }
.wo-base-product-document > header strong { color: var(--ds-text); overflow-wrap: anywhere; }
.wo-base-product-document > header span { color: var(--ds-text-muted); font-size: 11px; font-weight: 750; }
.wo-base-product-document .wo-document-empty-row { min-height: 58px; }
.wo-base-product-document .wo-document-empty-row.error { color: var(--ds-danger, #b42318); }

.manual-work-entry-modal.admin-work-flow > h2 {
  padding: 16px 60px 3px 22px;
  font-size: 22px;
  color: var(--ds-primary-hover);
}

.manual-work-entry-modal.admin-work-flow > p {
  padding: 0 22px 12px;
}

.manual-work-entry-modal.admin-work-flow .finish-modal-body.manual-work-entry-body {
  gap: 10px;
  padding-left: 22px;
  padding-right: 22px;
}

.manual-work-entry-modal.admin-work-flow .manual-segment-nav {
  gap: 7px;
}

.manual-work-entry-modal.admin-work-flow .manual-segment-nav button {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-page);
}

.manual-work-entry-modal.admin-work-flow .manual-segment-nav button.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  box-shadow: 0 3px 8px rgba(var(--ds-primary-rgb), .12);
}

.manual-work-entry-modal.admin-work-flow .manual-segment-nav button span {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.manual-work-entry-modal.admin-work-flow .manual-entry-scroll {
  padding: 0 2px 12px 0;
}

.manual-work-entry-modal.admin-work-flow .manual-entry-layout {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 248px);
  gap: 12px;
}

.manual-work-entry-modal.admin-work-flow .manual-work-entry-segmented:not(.manual-final-step) .manual-entry-layout {
  grid-template-columns: minmax(0, 1fr);
}

.manual-work-entry-modal.admin-work-flow .manual-work-entry-segmented:not(.manual-final-step) .manual-summary-rail {
  display: none;
}

.manual-work-entry-modal.admin-work-flow .manual-entry-main,
.manual-work-entry-modal.admin-work-flow .manual-segment-panel.active {
  gap: 10px;
}

.manual-work-entry-modal.admin-work-flow .modal-grid {
  gap: 10px;
  margin-top: 0;
}

.manual-work-entry-modal.admin-work-flow .operator-action-context,
.manual-work-entry-modal.admin-work-flow .manual-locked-context,
.manual-work-entry-modal.admin-work-flow .manual-worker-picker,
.manual-work-entry-modal.admin-work-flow .manual-worker-minutes-panel,
.manual-work-entry-modal.admin-work-flow .manual-allocation-panel,
.manual-work-entry-modal.admin-work-flow .manual-final-summary,
.manual-work-entry-modal.admin-work-flow .manual-derived-outcome,
.manual-work-entry-modal.admin-work-flow .manual-plan-time-summary,
.manual-work-entry-modal.admin-work-flow .manual-segment-summary,
.manual-work-entry-modal.admin-work-flow .work-entry-attachments {
  padding: 10px 12px;
  border: 1px solid rgba(var(--ds-primary-rgb), .14);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--ds-primary-rgb), .05), #fff);
}

.manual-work-entry-modal.admin-work-flow .operator-action-context {
  margin-bottom: 0;
}

.manual-work-entry-modal.admin-work-flow .operator-action-context dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.manual-work-entry-modal.admin-work-flow .manual-locked-context dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.manual-work-entry-modal.admin-work-flow .manual-locked-context.implicit-root-work p {
  margin-top: 8px;
  padding-top: 8px;
}

.manual-work-entry-modal.admin-work-flow .manual-summary-rail {
  position: static;
  gap: 8px;
  padding: 10px 12px;
  background: #f5fafe;
}

.manual-work-entry-modal.admin-work-flow .manual-summary-rail section {
  gap: 5px;
  padding-bottom: 8px;
}

.manual-work-entry-modal.admin-work-flow .manual-summary-rail dl {
  gap: 6px;
}

.manual-work-entry-modal.admin-work-flow .manual-summary-rail h3 {
  font-size: 13px;
}

.manual-work-entry-modal.admin-work-flow .manual-summary-rail dt,
.manual-work-entry-modal.admin-work-flow .manual-plan-time-summary dt,
.manual-work-entry-modal.admin-work-flow .manual-final-summary dt {
  font-size: 11px;
}

.manual-work-entry-modal.admin-work-flow .manual-summary-rail dd,
.manual-work-entry-modal.admin-work-flow .manual-plan-time-summary dd,
.manual-work-entry-modal.admin-work-flow .manual-final-summary dd {
  font-weight: 800;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-picker,
.manual-work-entry-modal.admin-work-flow .manual-allocation-panel,
.manual-work-entry-modal.admin-work-flow .manual-worker-minutes-panel {
  gap: 10px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-picker header,
.manual-work-entry-modal.admin-work-flow .manual-worker-minutes-panel header,
.manual-work-entry-modal.admin-work-flow .manual-worker-minutes-actions,
.manual-work-entry-modal.admin-work-flow .manual-allocation-panel header {
  gap: 10px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-search {
  gap: 5px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 132px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 40px;
  padding: 7px 9px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-choice input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.manual-work-entry-modal.admin-work-flow .manual-worker-choice:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.manual-work-entry-modal.admin-work-flow .manual-assigned-workers {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(var(--ds-primary-rgb), .18);
  border-radius: 10px;
  background: rgba(var(--ds-primary-rgb), .045);
}

.manual-work-entry-modal.admin-work-flow .manual-assigned-workers h4 {
  margin: 0;
  color: var(--ds-primary-hover);
  font-size: 12px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-list {
  max-height: 168px;
  padding: 2px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-choice span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-minute-row {
  border: 1px solid rgba(var(--ds-primary-rgb), .18);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(var(--ds-sidebar-rgb), .05);
}

.manual-work-entry-modal.admin-work-flow .manual-worker-engagement {
  display: grid;
  gap: 5px;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-engagement > span {
  color: var(--ds-primary-hover);
  font-size: 11px;
  font-weight: 850;
}

.manual-work-entry-modal.admin-work-flow .manual-worker-minute-row {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 238px) 30px;
  gap: 8px;
  padding: 8px 9px;
}

.manual-work-entry-modal.admin-work-flow .manual-duration-control {
  gap: 5px;
}

.manual-work-entry-modal.admin-work-flow .manual-duration-control.compact .manual-duration-pair {
  grid-template-columns: repeat(2, minmax(86px, 1fr));
}

.manual-work-entry-modal.admin-work-flow .manual-duration-pair input {
  height: 36px;
}

.manual-work-entry-modal.admin-work-flow .manual-allocation-modes {
  gap: 8px;
}

.manual-work-entry-modal.admin-work-flow .manual-allocation-modes label {
  min-height: 38px;
  padding: 7px 10px;
}

.manual-work-entry-modal.admin-work-flow .manual-allocation-modes input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.manual-work-entry-modal.admin-work-flow .manual-allocation-modes label:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
}

.manual-work-entry-modal.admin-work-flow .manual-worker-allocation-card {
  gap: 8px;
  padding: 10px;
  border-color: var(--ds-primary-border);
  box-shadow: 0 3px 10px rgba(var(--ds-sidebar-rgb), .06);
}

.manual-work-entry-modal.admin-work-flow .manual-worker-allocation-primary {
  grid-template-columns: repeat(2, minmax(90px, .8fr)) minmax(220px, 1.4fr);
}

.manual-work-entry-modal.admin-work-flow .manual-worker-allocation-primary [data-allocation-duration] {
  grid-column: auto;
}

.manual-work-entry-modal.admin-work-flow .manual-final-summary dl {
  gap: 8px;
  margin-top: 8px;
}

.manual-work-entry-modal.admin-work-flow .manual-segment-panel[data-manual-segment-panel="extra"] textarea {
  min-height: 76px;
}

.manual-work-entry-modal.admin-work-flow .manual-segment-footer {
  gap: 9px;
  margin: 0 -22px;
  padding: 12px 22px 14px;
  border-top: 1px solid var(--ds-primary-border);
  background: #fff;
  box-shadow: 0 -8px 20px rgba(var(--ds-sidebar-rgb), .05);
}

.manual-work-entry-modal.admin-work-flow .manual-work-entry-segmented.manual-final-step [data-action="manual-segment-next"],
.manual-work-entry-modal.admin-work-flow [data-action="manual-segment-next"][hidden],
.manual-work-entry-modal.admin-work-flow [data-action="manual-work-entry-save"][hidden] {
  display: none;
}

@media (max-width: 960px) {
  .manual-work-entry-modal.admin-work-flow {
    width: min(100%, calc(100vw - 24px));
  }

  .manual-work-entry-modal.admin-work-flow .manual-entry-layout,
  .manual-work-entry-modal.admin-work-flow .operator-action-context dl,
  .manual-work-entry-modal.admin-work-flow .manual-locked-context dl {
    grid-template-columns: 1fr;
  }

  .manual-work-entry-modal.admin-work-flow .manual-worker-minute-row,
  .manual-work-entry-modal.admin-work-flow .manual-worker-allocation-primary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .manual-work-entry-modal.admin-work-flow {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .manual-work-entry-modal.admin-work-flow > h2 {
    padding: 16px 58px 3px 16px;
  }

  .manual-work-entry-modal.admin-work-flow > p,
  .manual-work-entry-modal.admin-work-flow .finish-modal-body.manual-work-entry-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .manual-work-entry-modal.admin-work-flow .manual-segment-nav,
  .manual-work-entry-modal.admin-work-flow .manual-worker-list,
  .manual-work-entry-modal.admin-work-flow .manual-plan-time-summary dl,
  .manual-work-entry-modal.admin-work-flow .manual-final-summary dl {
    grid-template-columns: 1fr;
  }

  .manual-work-entry-modal.admin-work-flow .manual-segment-footer {
    grid-template-columns: 1fr;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Work-order Analytics summary and internal drill-down */
.analytics-work-orders-home,
.analytics-selected-work-order {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.analytics-work-orders-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 2px 2px 0;
}
.analytics-work-orders-command > div { min-width: 0; }
.analytics-work-orders-command small { color: #687487; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.analytics-work-orders-command h2 { margin: 4px 0 3px; font-size: 22px; }
.analytics-work-orders-command p { margin: 0; color: #687487; }
.analytics-work-orders-command > button { flex: 0 0 auto; }

.analytics-work-orders-panel,
.analytics-selected-work-order > .wo-analytics-shell {
  min-width: 0;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--border, #dfe5ec);
  border-radius: 18px;
  background: var(--surface, #fff);
}

.analytics-work-orders-heading,
.analytics-selected-header,
.wo-analytics-kpi-group > header,
.wo-analytics-drilldown > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.analytics-work-orders-heading h2,
.analytics-selected-header h2,
.wo-analytics-kpi-group h3,
.wo-analytics-drilldown h3 {
  margin: 4px 0 6px;
}

.analytics-work-orders-heading p,
.analytics-selected-header p {
  margin: 0;
  color: var(--muted, #687487);
}

.analytics-work-orders-heading > span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef4ff;
  color: #2459a9;
  font-weight: 800;
}

.analytics-work-orders-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, .32fr) minmax(230px, .48fr);
  gap: 12px;
  margin: 20px 0;
}

.analytics-work-orders-controls.single { grid-template-columns: minmax(220px, 620px); }
.analytics-work-orders-controls label { position: relative; min-width: 0; }
.analytics-work-orders-controls label svg { position: absolute; left: 13px; top: 50%; width: 17px; transform: translateY(-50%); color: #687487; }
.analytics-work-orders-controls input,
.analytics-work-orders-controls select { width: 100%; min-width: 0; }
.analytics-work-orders-controls input { padding-left: 40px; }
.analytics-new-analysis-note { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; color: #7a541d; font-size: 12px; }
.analytics-new-analysis-note svg { flex: 0 0 auto; width: 15px; }

.analytics-work-order-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.analytics-work-order-card,
.analytics-work-order-choice {
  min-width: 0;
  border: 1px solid #dfe5ec;
  border-radius: 15px;
  background: #fbfcfe;
}

.analytics-work-order-card { display: grid; grid-template-columns: minmax(230px, 1.15fr) minmax(0, 2.4fr) auto; align-items: center; gap: 18px; padding: 13px 15px; background: #fff; }
.analytics-work-order-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.analytics-work-order-card h3 { margin: 2px 0; font-size: 14px; overflow-wrap: anywhere; }
.analytics-work-order-card p { margin: 0; color: #687487; font-size: 12px; }
.analytics-work-order-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.analytics-work-order-card dl div { min-width: 0; }
.analytics-work-order-card dt { color: #687487; font-size: 10px; line-height: 1.25; }
.analytics-work-order-card dd { margin: 2px 0 0; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.analytics-work-order-card .analytics-margin.positive dd { color: var(--ds-success); }
.analytics-work-order-card .analytics-margin.negative dd { color: var(--ds-danger); }
.analytics-work-order-card .analytics-margin.neutral dd { color: var(--ds-muted); }
.analytics-work-order-card footer { display: flex; justify-content: flex-end; }
.analytics-work-order-card footer button { min-width: 92px; }

.analytics-work-order-selector { display: grid; gap: 10px; }
.analytics-work-order-choice { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 14px; }
.analytics-work-order-choice > div { display: grid; gap: 4px; min-width: 0; }
.analytics-work-order-choice strong { font-size: 13px; }
.analytics-work-order-choice > div > span { color: #687487; overflow-wrap: anywhere; }
.analytics-work-order-choice small { display: flex; align-items: center; gap: 6px; color: #8a4b16; }
.analytics-work-order-choice small svg { width: 15px; }
.analytics-work-order-choice > button { min-width: 112px; }
.analytics-empty-state { display: grid; gap: 6px; place-items: start; padding: 24px; border: 1px dashed #ccd5e1; border-radius: 14px; color: #687487; }

.analytics-selected-header { align-items: center; padding-bottom: 8px; }
.analytics-selected-header > div { flex: 1; min-width: 0; }
.analytics-selected-header h2 { overflow-wrap: anywhere; }
.analytics-selected-header .analytics-open-items { flex: 0 0 auto; }

.wo-analytics-report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #cbd9e7;
  border-radius: 14px;
  background: #f6f9fc;
}
.wo-analytics-report-toolbar label { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; min-width: 0; cursor: pointer; }
.wo-analytics-report-toolbar input { width: 17px; height: 17px; margin: 0; }
.wo-analytics-report-toolbar label > span { font-weight: 750; color: #29465f; }
.wo-analytics-report-toolbar label > small { grid-column: 2; color: #687487; line-height: 1.35; }
.wo-analytics-report-toolbar button { flex: 0 0 auto; }

.wo-analytics-kpi-group { margin-top: 24px; }
.wo-analytics-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.wo-analytics-kpi-grid.operations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wo-analytics-kpi-card { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; min-height: 142px; padding: 17px; border: 1px solid #dfe5ec; border-radius: 15px; background: #fbfcfe; text-align: left; color: inherit; }
.wo-analytics-kpi-card.interactive { cursor: pointer; background: #fff; }
.wo-analytics-kpi-card.interactive:hover { border-color: #6f9bd8; box-shadow: 0 8px 24px rgba(36, 89, 169, .09); }
.wo-analytics-kpi-card > span { color: #687487; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.wo-analytics-kpi-card strong { font-size: clamp(18px, 1.6vw, 24px); overflow-wrap: anywhere; }
.wo-analytics-kpi-card.positive strong { color: var(--ds-success); }
.wo-analytics-kpi-card.negative strong { color: var(--ds-danger); }
.wo-analytics-kpi-card.neutral strong { color: inherit; }
.wo-analytics-kpi-card small { color: #687487; line-height: 1.45; }
.wo-analytics-kpi-card > em { position: absolute; right: 13px; top: 13px; color: #2459a9; }
.wo-analytics-kpi-card > em svg { width: 16px; }
.wo-analytics-summary-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.wo-analytics-financial-scope { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid #2459a9; border-radius: 8px; background: #f4f7fb; color: #526175; font-size: 13px; line-height: 1.5; }
.wo-analytics-drilldown { display: grid; gap: 18px; margin-top: 22px; }
.wo-analytics-coverage { padding: 18px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; }
.wo-analytics-coverage p { color: #7c4a1d; }
.wo-analytics-coverage dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.wo-analytics-coverage dd { margin: 3px 0 0; font-weight: 700; }
.wo-material-cost-detail { display: grid; gap: 18px; }
.wo-material-cost-effective { display: grid; gap: 7px; padding: 20px; border: 1px solid #bfd0ea; border-radius: 16px; background: linear-gradient(145deg, #f5f8fd, #fff); }
.wo-material-cost-effective small { color: #687487; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wo-material-cost-effective strong { color: #163f79; font-size: clamp(24px, 3vw, 34px); }
.wo-material-cost-effective span { color: #526175; }
.wo-material-cost-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wo-material-cost-sources article { min-width: 0; padding: 16px; border: 1px solid #dfe5ec; border-radius: 14px; background: #fff; }
.wo-material-cost-sources article.authoritative { border-color: #79b99a; box-shadow: 0 0 0 2px rgba(42, 135, 91, .08); background: linear-gradient(145deg, #f1fbf6, #fff); }
.wo-material-cost-sources article.authoritative header > span { padding: 4px 8px; border-radius: 999px; background: #dff4e8; color: #236844; font-weight: 800; }
.wo-material-cost-sources header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.wo-material-cost-sources header span { color: #687487; font-size: 12px; }
.wo-material-cost-sources dl { display: grid; gap: 8px; margin: 14px 0; }
.wo-material-cost-sources dl div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
.wo-material-cost-sources dt { color: #687487; }
.wo-material-cost-sources dd { min-width: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.wo-material-cost-sources p { margin: 0; color: #526175; line-height: 1.45; }
.wo-material-cost-history { display: grid; gap: 9px; padding: 16px; border: 1px solid #dfe5ec; border-radius: 14px; background: #fbfcfe; }
.wo-material-cost-history h4 { margin: 0 0 4px; }
.wo-material-cost-history > div { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1.65fr); gap: 12px; padding-top: 9px; border-top: 1px solid #e7ebf0; }
.wo-material-cost-history span { color: #687487; overflow-wrap: anywhere; }
.wo-material-cost-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.wo-material-authority-context { display: grid; gap: 5px; margin-top: 14px; padding: 12px; border-radius: 10px; background: #eaf7f0; color: #285e43; }
.wo-material-authority-context span { font-size: 12px; }
.wo-material-authority-context p { color: inherit; }
.wo-material-authority-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wo-material-authority-comparison article { display: grid; gap: 6px; padding: 14px; border: 1px solid #dfe5ec; border-radius: 12px; background: #f8fafc; }
.wo-material-authority-comparison span { color: #687487; font-size: 12px; }
.wo-material-authority-comparison strong { font-size: 18px; color: #173d70; }
.wo-analytics-material-start { display: grid; gap: 14px; padding: 16px; border: 1px solid #dfe5ec; border-radius: 14px; background: #f8fafc; }
.wo-analytics-material-start > header { display: grid; gap: 3px; }
.wo-analytics-material-start > header small { color: #687487; text-transform: uppercase; font-weight: 700; }
.wo-analytics-material-start > header span { color: #687487; font-size: 13px; }

@media (max-width: 1180px) {
  .wo-analytics-kpi-grid,
  .wo-analytics-kpi-grid.operations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-work-order-card { grid-template-columns: minmax(220px, .9fr) minmax(0, 1.6fr) auto; }
  .analytics-work-order-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .analytics-work-order-card { grid-template-columns: minmax(0, 1fr) auto; }
  .analytics-work-order-card dl { grid-column: 1 / -1; grid-row: 2; }
  .analytics-work-order-card footer { grid-column: 2; grid-row: 1; }
  .analytics-work-orders-controls { grid-template-columns: 1fr 1fr; }
  .analytics-work-orders-controls label { grid-column: 1 / -1; }
  .analytics-selected-header { align-items: flex-start; flex-direction: column; }
  .wo-analytics-report-toolbar { align-items: stretch; flex-direction: column; }
}

@media (max-width: 640px) {
  .analytics-work-orders-command { align-items: stretch; flex-direction: column; gap: 12px; }
  .analytics-work-orders-command > button { width: 100%; justify-content: center; }
  .analytics-work-orders-controls,
  .analytics-work-orders-controls.single,
  .wo-analytics-kpi-grid,
  .wo-analytics-kpi-grid.operations,
  .wo-analytics-coverage dl,
  .wo-material-cost-sources,
  .wo-material-authority-comparison,
  .wo-material-cost-history > div { grid-template-columns: 1fr; }
  .analytics-work-order-choice { align-items: stretch; flex-direction: column; }
  .analytics-work-order-card { gap: 10px; padding: 12px; }
  .analytics-work-order-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-work-order-choice button,
  .analytics-work-order-card footer button,
  .analytics-selected-header .analytics-open-items,
  .wo-analytics-report-toolbar button,
  .wo-analytics-summary-actions button,
  .wo-material-cost-actions > button { width: 100%; justify-content: center; }
  .wo-analytics-drilldown > header { flex-direction: column; }
  .analytics-work-orders-panel,
  .analytics-selected-work-order > .wo-analytics-shell { padding: 14px; }
}

/* Build B work-entry wizard: reuse the unified NormaX modal shell. */
.modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell {
  width: min(1120px, calc(100vw - 48px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(var(--ds-sidebar-rgb), .22);
}

.manual-work-entry-modal .manual-work-entry-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 18px;
}

.manual-work-entry-modal .manual-work-entry-header .flow-modal-title {
  min-width: 0;
}

.manual-work-entry-modal .manual-work-entry-header .flow-modal-title h2 {
  font-size: 23px;
}

.manual-work-entry-modal .manual-work-entry-header .flow-modal-title p {
  overflow: hidden;
  color: var(--ds-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0 16px;
}

.manual-work-entry-modal.runtime-custom-wizard[data-manual-external="true"] .manual-segment-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manual-work-entry-modal.runtime-custom-wizard[data-manual-segment-count="2"] .manual-segment-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manual-work-entry-modal.runtime-custom-wizard[data-manual-segment-count="3"] .manual-segment-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manual-work-entry-modal.runtime-custom-wizard[data-manual-segment-count="5"] .manual-segment-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--ds-primary-border);
  border-radius: 0;
  padding: 0 12px;
  background: transparent;
  box-shadow: none;
  color: var(--ds-heading);
  font-size: 13px;
  white-space: nowrap;
}

.manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav button:first-child {
  border-left: 1px solid var(--ds-primary-border);
}

.manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav button.active {
  border-color: var(--ds-primary-border);
  background: #fff;
  box-shadow: inset 0 3px 0 var(--ds-primary);
}

.manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav button span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  place-items: center;
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
  font-size: 11px;
}

.manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav button.done span {
  background: var(--ds-success-bg);
  color: var(--ds-success);
}

.manual-work-entry-modal.runtime-custom-wizard > .manual-segment-error {
  margin: 10px 16px 0;
  padding: 10px 12px;
}

.manual-work-entry-modal [data-scrap-reason][aria-invalid="true"] {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.manual-work-entry-modal.runtime-custom-wizard .manual-work-entry-body {
  padding: 12px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, #f8fbfe 0%, #eef6fb 100%);
  scrollbar-gutter: stable;
}

.manual-work-entry-modal .manual-entry-layout,
.manual-work-entry-modal .manual-entry-main,
.manual-work-entry-modal .manual-segment-panels,
.manual-work-entry-modal .manual-segment-panel.active {
  min-width: 0;
}

.manual-work-entry-modal .manual-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.manual-work-entry-modal .manual-entry-main,
.manual-work-entry-modal .manual-segment-panel.active {
  display: grid;
  gap: 10px;
}

.manual-work-entry-modal .operator-action-context,
.manual-work-entry-modal .manual-locked-context,
.manual-work-entry-modal .manual-worker-picker,
.manual-work-entry-modal .manual-worker-minutes-panel,
.manual-work-entry-modal .manual-allocation-panel,
.manual-work-entry-modal .manual-final-summary,
.manual-work-entry-modal .manual-derived-outcome,
.manual-work-entry-modal .manual-plan-time-summary,
.manual-work-entry-modal .manual-segment-summary,
.manual-work-entry-modal .work-entry-attachments {
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.manual-work-entry-modal .operator-action-context {
  padding: 10px 12px;
  background: #f8fbfe;
}

.manual-work-entry-modal .operator-action-context dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.manual-work-entry-modal .manual-locked-context {
  padding: 11px 13px;
}

.manual-work-entry-modal .manual-locked-context dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.manual-work-entry-modal .manual-locked-context.implicit-root-work p {
  margin-top: 8px;
  padding-top: 8px;
}

.manual-work-entry-modal .manual-result-card {
  padding: 12px 14px;
}

.manual-work-entry-modal .manual-result-card .custom-panel-head {
  margin-bottom: 10px;
}

.manual-work-entry-modal .manual-result-card .custom-panel-head h3 {
  font-size: 18px;
}

.manual-work-entry-modal .manual-result-grid,
.manual-work-entry-modal .manual-metric-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  min-width: 0;
}

.manual-work-entry-modal .manual-metric-fields {
  grid-column: 1 / -1;
}

.manual-work-entry-modal .manual-result-grid .field,
.manual-work-entry-modal .manual-result-grid .manual-duration-control {
  min-width: 0;
}

.manual-work-entry-modal .manual-result-grid .field > span,
.manual-work-entry-modal .manual-worker-search > span,
.manual-work-entry-modal .manual-worker-engagement > span,
.manual-work-entry-modal .manual-worker-allocation-primary span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.manual-work-entry-modal .manual-result-grid input,
.manual-work-entry-modal .manual-result-grid select,
.manual-work-entry-modal .manual-worker-search input,
.manual-work-entry-modal .manual-worker-allocation-primary input,
.manual-work-entry-modal .manual-duration-pair label {
  border-color: var(--ds-primary-border);
  background: #fff;
}

.manual-work-entry-modal .manual-result-grid input,
.manual-work-entry-modal .manual-result-grid select,
.manual-work-entry-modal .manual-worker-search input,
.manual-work-entry-modal .manual-worker-allocation-primary input {
  width: 100%;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  color: var(--ds-heading);
  font-weight: 700;
}

.manual-work-entry-modal .manual-result-grid .nx-date-control-wrap {
  --nx-date-input-height: 42px;
}

.manual-work-entry-modal .manual-readonly-control {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  color: var(--ds-heading);
  background: var(--ds-surface-subtle);
  font-weight: 700;
}

.manual-work-entry-modal .manual-result-duration {
  display: grid;
  grid-template-columns: minmax(0, 360px);
  justify-content: start;
}

.manual-work-entry-modal .manual-result-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.manual-work-entry-modal .manual-plan-time-summary,
.manual-work-entry-modal .manual-segment-summary {
  min-height: 66px;
  padding: 10px 12px;
  background: #f8fbfe;
}

.manual-work-entry-modal .manual-plan-time-summary dl {
  gap: 8px;
}

.work-entry-pace-block {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 12px;
  background: #f8fbfd;
}

.work-entry-cumulative-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.work-entry-cumulative-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: #fff;
}

.work-entry-cumulative-grid dt,
.work-entry-cumulative-grid dd { margin: 0; }
.work-entry-cumulative-grid dt { color: var(--ds-muted); font-size: 11px; font-weight: 750; line-height: 1.3; }
.work-entry-cumulative-grid dd { color: var(--ds-heading); font-size: 14px; font-weight: 850; }

.work-entry-pace-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.work-entry-pace-line span { color: var(--ds-muted); font-size: 12px; font-weight: 800; }
.work-entry-pace-line strong { color: var(--ds-heading); font-size: 14px; text-align: right; }
.work-entry-pace-block.ahead .work-entry-pace-line strong { color: var(--ds-success); }
.work-entry-pace-block.behind .work-entry-pace-line strong { color: var(--ds-danger); }

@media (max-width: 960px) {
  .work-entry-cumulative-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .work-entry-cumulative-grid { grid-template-columns: 1fr; }
  .work-entry-pace-line { align-items: flex-start; flex-direction: column; }
  .work-entry-pace-line strong { text-align: left; }
}

.manual-work-entry-modal .manual-worker-picker,
.manual-work-entry-modal .manual-worker-minutes-panel,
.manual-work-entry-modal .manual-allocation-panel {
  gap: 9px;
  padding: 11px 13px;
}

.manual-work-entry-modal .manual-worker-minutes-panel {
  box-shadow: 0 8px 20px rgba(var(--ds-sidebar-rgb), .05);
}

.manual-work-entry-modal .manual-worker-picker header,
.manual-work-entry-modal .manual-worker-minutes-panel header,
.manual-work-entry-modal .manual-worker-minutes-actions,
.manual-work-entry-modal .manual-allocation-panel header {
  gap: 10px;
}

.manual-work-entry-modal .manual-assigned-workers {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
}

.manual-work-entry-modal .manual-assigned-workers h4,
.manual-work-entry-modal .manual-worker-selected-block > strong {
  margin: 0;
  color: var(--ds-primary-hover);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.manual-work-entry-modal .manual-assigned-workers > div,
.manual-work-entry-modal .manual-worker-selected,
.manual-work-entry-modal .manual-participation-workers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.manual-work-entry-modal .manual-assigned-worker-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid rgba(var(--ds-primary-rgb), .2);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
  font-size: 12px;
  font-weight: 800;
}

.manual-work-entry-modal .manual-assigned-worker-chip svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.manual-work-entry-modal .manual-assigned-worker-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.manual-work-entry-modal .manual-worker-search,
.manual-work-entry-modal .manual-worker-selected-block {
  display: grid;
  gap: 6px;
}

.manual-work-entry-modal .manual-worker-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 126px;
  padding: 1px;
}

.manual-work-entry-modal .manual-worker-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 44px;
  padding: 8px 10px;
  column-gap: 9px;
  align-items: center;
  border-color: var(--ds-primary-border);
}

.manual-work-entry-modal .manual-worker-choice[hidden] {
  display: none;
}

.manual-work-entry-modal .manual-worker-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.manual-work-entry-modal .manual-worker-choice:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  box-shadow: var(--ds-focus-ring);
}

.manual-work-entry-modal .manual-worker-choice span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.manual-work-entry-modal .manual-worker-minutes-actions {
  align-items: stretch;
}

.manual-work-entry-modal .manual-human-effort-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px 12px;
  padding: 7px 10px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 750;
}

.manual-work-entry-modal .manual-human-effort-status strong {
  color: var(--ds-heading);
}

.manual-work-entry-modal .manual-human-effort-status.incomplete {
  border-color: color-mix(in srgb, var(--ds-warning) 34%, var(--ds-card));
  background: color-mix(in srgb, var(--ds-warning-bg) 65%, var(--ds-card));
}

.manual-work-entry-modal .manual-human-effort-status.complete {
  border-color: color-mix(in srgb, var(--ds-success) 28%, var(--ds-card));
  background: var(--ds-success-bg);
}

.manual-work-entry-modal .manual-worker-minute-row {
  grid-template-columns: minmax(150px, 1fr) minmax(230px, 310px) 32px;
  gap: 9px;
  padding: 7px 9px;
  border-color: var(--ds-primary-border);
  border-left: 3px solid var(--ds-primary);
  background: #fff;
  box-shadow: 0 4px 12px rgba(var(--ds-sidebar-rgb), .04);
}

.manual-work-entry-modal .manual-worker-engagement,
.manual-work-entry-modal .manual-worker-duration {
  min-width: 0;
}

.manual-work-entry-modal .manual-duration-control.compact .manual-duration-pair {
  grid-template-columns: repeat(2, minmax(88px, 1fr));
}

.manual-work-entry-modal .manual-duration-pair label {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.manual-work-entry-modal .manual-duration-pair input {
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
}

.manual-work-entry-modal .manual-result-duration .manual-duration-pair input {
  height: 42px;
  min-height: 42px;
}

.manual-work-entry-modal .manual-duration-pair input:focus,
.manual-work-entry-modal .manual-duration-pair input:focus-visible {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus-ring);
}

.manual-work-entry-modal .manual-duration-control.invalid .manual-duration-pair input {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-danger) 12%, transparent);
}

.manual-work-entry-modal .manual-duration-inline-error {
  display: block;
  margin-top: 5px;
  color: var(--ds-danger);
  font-size: 11px;
  font-weight: 750;
}

.manual-work-entry-modal .manual-duration-inline-error[hidden] {
  display: none;
}

.manual-work-entry-modal .manual-allocation-modes {
  gap: 6px;
  flex-wrap: nowrap;
}

.manual-work-entry-modal .manual-allocation-modes label {
  position: relative;
  min-height: 34px;
  gap: 7px;
  padding: 0 11px;
  border-color: var(--ds-primary-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.manual-work-entry-modal .manual-allocation-modes input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.manual-work-entry-modal .manual-allocation-modes label::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid #8395a7;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.manual-work-entry-modal .manual-allocation-modes label:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  color: var(--ds-primary-strong);
  box-shadow: var(--ds-focus-ring);
}

.manual-work-entry-modal .manual-allocation-modes label:has(input:checked)::before {
  border: 3px solid var(--ds-primary);
}

.manual-work-entry-modal .manual-allocation-modes label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), .16);
}

.manual-work-entry-modal .manual-participation-summary,
.manual-work-entry-modal .manual-worker-allocation-card {
  border-color: var(--ds-primary-border);
  background: #f8fbfe;
}

.manual-work-entry-modal .manual-worker-allocation-primary {
  grid-template-columns: repeat(2, minmax(120px, 220px));
  justify-content: start;
}

.manual-work-entry-modal .manual-confirm-grid {
  gap: 10px;
}

.manual-work-entry-modal .manual-confirm-grid textarea {
  min-height: 68px;
}

.manual-work-entry-modal .manual-final-summary,
.manual-work-entry-modal .manual-derived-outcome,
.manual-work-entry-modal .work-entry-attachments {
  padding: 12px 14px;
}

.manual-work-entry-modal .manual-final-summary dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
}

.manual-work-entry-modal .manual-segment-footer {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--ds-primary-border);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -14px 28px rgba(var(--ds-sidebar-rgb), .06);
}

.manual-work-entry-modal .manual-footer-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.manual-work-entry-modal.manual-final-step [data-action="manual-segment-next"],
.manual-work-entry-modal [data-action="manual-segment-prev"][hidden],
.manual-work-entry-modal [data-action="manual-segment-next"][hidden],
.manual-work-entry-modal [data-action="manual-work-entry-save"][hidden] {
  display: none;
}

@media (max-width: 960px) {
  .modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell {
    width: min(100%, calc(100vw - 24px));
    height: min(720px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }

  .manual-work-entry-modal .operator-action-context dl,
  .manual-work-entry-modal .manual-locked-context dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-work-entry-modal .manual-worker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-work-entry-modal .manual-final-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .modal-backdrop.custom-wizard-backdrop.manual-work-entry-backdrop {
    padding: 8px;
  }

  .modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .manual-work-entry-modal .manual-work-entry-header {
    padding: 13px 56px 11px 14px;
  }

  .manual-work-entry-modal .manual-work-entry-header .flow-modal-title h2 {
    font-size: 20px;
  }

  .manual-work-entry-modal .manual-work-entry-header .flow-modal-title p {
    white-space: normal;
  }

  .manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav,
  .manual-work-entry-modal.runtime-custom-wizard[data-manual-external="true"] .manual-segment-nav {
    display: flex;
    overflow-x: auto;
    padding: 0 10px;
  }

  .manual-work-entry-modal.runtime-custom-wizard .manual-segment-nav button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
  }

  .manual-work-entry-modal.runtime-custom-wizard[data-manual-simple="true"] .manual-segment-nav button {
    gap: 5px;
    padding-inline: 6px;
    font-size: 12px;
  }

  .manual-work-entry-modal.runtime-custom-wizard .manual-work-entry-body {
    padding: 12px;
    scrollbar-gutter: auto;
  }

  .manual-work-entry-modal .operator-action-context dl,
  .manual-work-entry-modal .manual-locked-context dl,
  .manual-work-entry-modal .manual-result-grid,
  .manual-work-entry-modal .manual-metric-fields,
  .manual-work-entry-modal .manual-result-readonly-grid,
  .manual-work-entry-modal .manual-worker-list,
  .manual-work-entry-modal .manual-worker-minute-row,
  .manual-work-entry-modal .manual-worker-allocation-primary,
  .manual-work-entry-modal .manual-final-summary dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .manual-work-entry-modal .manual-result-card .custom-panel-head,
  .manual-work-entry-modal .manual-worker-picker header,
  .manual-work-entry-modal .manual-worker-minutes-panel header,
  .manual-work-entry-modal .manual-worker-minutes-actions,
  .manual-work-entry-modal .manual-allocation-panel header {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-work-entry-modal .manual-result-duration {
    grid-template-columns: minmax(0, 1fr);
  }

  .manual-work-entry-modal .manual-human-effort-status {
    justify-content: flex-start;
  }

  .manual-work-entry-modal .manual-allocation-modes {
    width: 100%;
    flex-wrap: wrap;
  }

  .manual-work-entry-modal .manual-allocation-modes label {
    flex: 1 1 150px;
    justify-content: center;
    min-height: 42px;
  }

  .manual-work-entry-modal .manual-segment-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .manual-work-entry-modal .manual-footer-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-work-entry-modal .manual-footer-navigation button {
    width: 100%;
    min-width: 0;
  }

  .manual-work-entry-modal .manual-footer-navigation [data-action="manual-work-entry-save"] {
    grid-column: 1 / -1;
  }
}

@media (min-width: 641px) {
  .modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell {
    height: auto;
  }

  .modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell[data-manual-simple="true"] {
    width: min(820px, calc(100vw - 32px));
  }
}

/* Build 051.2 - Products list, KPI strip, and tabs. */
.products-screen,
.products-screen > *,
.products-context-header,
.products-tabs,
.product-tab-panel,
.products-filter-card,
.products-list-card,
.products-table-wrap,
.products-table,
.product-card,
.product-pagination {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.products-screen {
  display: grid;
  width: 100%;
  gap: 12px;
}

.products-context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.products-context-header > div:first-child {
  display: grid;
  gap: 4px;
}

.products-context-header p,
.products-filter-card label > span,
.product-card dt {
  margin: 0;
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.products-context-header span {
  color: #526a82;
  font-size: 12.5px;
  line-height: 1.35;
}

.products-result-count {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 164px;
  padding: 10px 12px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: var(--ds-primary-light);
}

.products-result-count strong {
  color: var(--ds-primary-hover);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.products-result-count span {
  color: var(--ds-text);
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
}

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

.products-tabs button {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  color: var(--ds-text);
  text-align: left;
  cursor: pointer;
}

.products-tabs button.active {
  border-color: var(--ds-primary);
  background: linear-gradient(180deg, rgba(var(--ds-primary-border-rgb), .3), var(--ds-card));
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), .12);
}

.products-tabs strong {
  color: var(--ds-heading);
  font-size: 14px;
  line-height: 1.2;
}

.products-tabs small {
  color: var(--ds-text-light);
  font-size: 12px;
  line-height: 1.25;
}

.product-tab-panel {
  display: grid;
  gap: 12px;
}

.product-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.product-kpi-grid .product-kpi {
  min-height: 92px;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
}

.product-kpi-grid .product-kpi strong {
  font-size: 25px;
}

.product-kpi-grid .product-kpi span,
.product-kpi-grid .product-kpi em {
  line-height: 1.2;
}

.products-filter-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(140px, .78fr)) auto;
  gap: 8px 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.customer-products-filter-card {
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, .7fr)) auto;
}

.products-filter-card label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--ds-text);
  font-weight: 700;
}

.products-filter-card input,
.products-filter-card select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-heading);
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.products-filter-card input:focus,
.products-filter-card select:focus {
  outline: 0;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), .14);
}

.product-search-field {
  position: relative;
}

.product-search-field svg {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  color: var(--ds-text-light);
  pointer-events: none;
}

.product-search-field input {
  padding-right: 38px;
}

.products-filter-card > .compact-command {
  align-self: end;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  white-space: nowrap;
}

.products-list-card {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.products-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.products-table-wrap-landscape,
.product-card-grid {
  display: none;
}

.products-table {
  width: 100%;
  min-width: 1160px;
  table-layout: fixed;
  border-collapse: collapse;
}

.products-table th,
.products-table td {
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: middle;
}

.products-table td > strong {
  color: inherit;
  font-weight: 700;
}

.shared-table-text,
.shared-table-emphasis {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0;
  line-height: inherit;
}

.shared-table-text {
  font-weight: 400;
}

.shared-table-emphasis {
  font-weight: 700;
}

.products-table th:nth-child(1),
.products-table td:nth-child(1) { width: 132px; }
.products-table th:nth-child(2),
.products-table td:nth-child(2) { width: 190px; }
.products-table th:nth-child(3),
.products-table td:nth-child(3) { width: 172px; }
.products-table th:nth-child(4),
.products-table td:nth-child(4) { width: 174px; }
.products-table th:nth-child(5),
.products-table td:nth-child(5) { width: 132px; }
.products-table th:nth-child(6),
.products-table td:nth-child(6),
.products-table th:nth-child(7),
.products-table td:nth-child(7) {
  width: 94px;
  text-align: center;
}
.products-table th:nth-child(8),
.products-table td:nth-child(8) { width: 112px; }
.products-table th:nth-child(9),
.products-table td:nth-child(9) {
  width: 132px;
  text-align: right;
}

.products-table tbody tr {
  transition: background .15s ease;
}

.products-table tbody tr[data-row-open],
.product-card[data-row-open] {
  cursor: pointer;
}

.products-table tbody tr[data-row-open]:hover,
.products-table tbody tr[data-row-open]:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: -2px;
  background: rgba(var(--ds-primary-border-rgb), .18);
}

.product-card[data-row-open]:hover,
.product-card[data-row-open]:focus-visible {
  border-color: var(--ds-primary-border);
  background: rgba(var(--ds-primary-rgb), .04);
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

.product-code-cell {
  display: flex;
  align-items: center;
}

.product-code-cell strong,
.product-stacked-cell strong,
.product-stacked-cell .shared-table-emphasis {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-code-cell strong:not(.shared-table-emphasis) {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(var(--ds-primary-rgb), .14);
  border-radius: 8px;
  background: rgba(var(--ds-primary-border-rgb), .12);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
}

.product-stacked-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-stacked-cell small {
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-table-meta,
.product-meta-stack > span,
.product-count-pair > span {
  color: var(--ds-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  line-height: inherit;
}

.product-type-badge,
.product-category-badge {
  display: inline-flex;
  max-width: 100%;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
}

.product-category-badge.category-operations {
  color: var(--ds-primary-hover);
  background: var(--ds-primary-light);
}

.product-category-badge.category-simple {
  color: var(--ds-success-text);
  background: var(--ds-success-bg);
}

.customer-product-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.1;
}

.customer-product-source-badge.active {
  color: var(--ds-primary-hover);
  background: var(--ds-primary-light);
}

.customer-product-source-badge.shipment {
  color: #8a4b04;
  background: var(--ds-warning-bg);
}

.customer-product-source-badge.archived {
  color: var(--ds-text-light);
  background: #edf2f7;
}

.product-card header .customer-product-source-badge,
.product-stacked-cell .customer-product-source-badge {
  display: inline-flex;
  margin-top: 3px;
}

.product-count-pair {
  display: grid;
  gap: 4px;
  color: var(--ds-text);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.product-count-pair em {
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}

.product-row-actions {
  justify-content: flex-end;
  gap: 7px;
}

.product-row-actions .open-row-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

.product-row-actions .icon-mini {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.product-card-grid {
  gap: 12px;
  padding: 12px;
}

.product-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.product-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.product-card header strong {
  display: block;
  color: var(--ds-heading);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}

.product-card header span {
  display: block;
  margin-top: 4px;
  color: var(--ds-text);
  font-size: 12.5px;
  line-height: 1.35;
}

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

.product-card dl div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(var(--ds-primary-border-rgb), .7);
  border-radius: 8px;
  background: var(--ds-bg);
}

.product-card dd {
  overflow: hidden;
  margin: 0;
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.manual-work-entry-modal .manual-worker-chip {
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
}

.product-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  width: 100%;
}

.product-card-actions .open-row-button,
.product-card-actions .icon-mini {
  min-height: 44px;
}

.customer-products-table {
  min-width: 980px;
}

.customer-products-table th:nth-child(1),
.customer-products-table td:nth-child(1) { width: 140px; }
.customer-products-table th:nth-child(2),
.customer-products-table td:nth-child(2) { width: 210px; }
.customer-products-table th:nth-child(3),
.customer-products-table td:nth-child(3) { width: 180px; }
.customer-products-table th:nth-child(4),
.customer-products-table td:nth-child(4) { width: 142px; }
.customer-products-table th:nth-child(5),
.customer-products-table td:nth-child(5),
.customer-products-table th:nth-child(6),
.customer-products-table td:nth-child(6) {
  width: 104px;
  text-align: center;
}
.customer-products-table th:nth-child(7),
.customer-products-table td:nth-child(7) { width: 200px; }

.products-list-state {
  display: grid;
  justify-items: center;
  gap: 13px;
  min-height: 340px;
  padding: 48px 24px;
  text-align: center;
}

.products-list-state > svg {
  width: 58px;
  height: 58px;
  padding: 16px;
  color: var(--ds-primary);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(var(--ds-primary-border-rgb), .28), rgba(246, 250, 253, .86));
}

.products-list-state h2 {
  margin: 4px 0 0;
  color: var(--ds-heading);
  font-size: 22px;
  letter-spacing: 0;
}

.products-list-state p {
  max-width: 560px;
  margin: 0;
  color: var(--ds-text);
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 1280px) {
  .product-kpi-grid,
  .products-filter-card {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }

  .products-filter-card .product-search-field,
  .customer-products-filter-card .product-search-field {
    grid-column: 1 / -1;
  }

  .products-table {
    min-width: 1080px;
  }
}

@media (min-width: 861px) and (max-width: 1280px) {
  .products-table-wrap-desktop {
    display: none;
  }

  .products-table-wrap-landscape {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .products-table-landscape {
    min-width: 1080px;
  }

  .products-table-landscape th:nth-child(1),
  .products-table-landscape td:nth-child(1) { width: 210px; }
  .products-table-landscape th:nth-child(2),
  .products-table-landscape td:nth-child(2) { width: 90px; }
  .products-table-landscape th:nth-child(3),
  .products-table-landscape td:nth-child(3) { width: 110px; }
  .products-table-landscape th:nth-child(4),
  .products-table-landscape td:nth-child(4) { width: 170px; }
  .products-table-landscape th:nth-child(5),
  .products-table-landscape td:nth-child(5) { width: 170px; }
  .products-table-landscape th:nth-child(6),
  .products-table-landscape td:nth-child(6) { width: 110px; }
  .products-table-landscape th:nth-child(7),
  .products-table-landscape td:nth-child(7) { width: 90px; }
  .products-table-landscape th:nth-child(8),
  .products-table-landscape td:nth-child(8) { width: 120px; }

  .products-table-landscape .product-row-actions {
    gap: 4px;
  }

  .products-table-landscape .open-row-button {
    min-height: 31px;
    padding: 0 8px;
  }

  .products-table-landscape .icon-mini {
    width: 31px;
    height: 31px;
  }
}

@media (max-width: 860px) {
  .topbar:has(+ #section-root .products-screen) {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar:has(+ #section-root .products-screen) .topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }

  .products-context-header {
    align-items: stretch;
    flex-direction: column;
  }

  .products-result-count {
    justify-items: start;
    width: 100%;
  }

  .products-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .products-table-wrap-desktop,
  .products-table-wrap-landscape,
  .customer-products-table-wrap {
    display: none;
  }

  .product-card-grid,
  .customer-product-card-grid {
    display: grid;
  }

  .products-list-card {
    overflow: visible;
  }

  .product-pagination {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .product-pagination-controls {
    justify-content: flex-start;
  }

  .product-page-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .products-screen {
    gap: 10px;
  }

  .products-context-header,
  .products-filter-card,
  .product-card {
    padding: 12px;
  }

  .products-filter-card,
  .product-card header,
  .product-card dl,
  .product-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .products-filter-card .product-search-field,
  .customer-products-filter-card .product-search-field {
    grid-column: auto;
  }

  .product-card-grid {
    padding: 10px;
  }

  .product-pagination-controls,
  .product-page-size,
  .product-page-nav {
    width: 100%;
  }

  .product-page-size {
    justify-content: space-between;
  }
}

/* Build 051.2 Products UX follow-up */
.products-screen {
  gap: 10px;
}

.product-wizard-modal.product-create-modal,
.modal-panel.flow-modal.runtime-custom-wizard.product-wizard-modal.custom-workspace-shell {
  width: min(96vw, 1400px);
  max-width: min(96vw, 1400px);
  height: min(94vh, calc(100dvh - 24px));
  max-height: min(94vh, calc(100dvh - 24px));
  margin: 0;
  overflow: hidden;
}

.product-wizard-modal .product-modal-header {
  align-items: center;
  min-height: 0;
  padding: 14px 18px;
  gap: 14px;
}

.product-wizard-modal .flow-modal-icon {
  width: 44px;
  height: 44px;
}

.product-wizard-modal .flow-modal-title {
  min-width: 0;
}

.product-wizard-modal .flow-modal-title h2 {
  margin: 2px 0;
  font-size: 26px;
  line-height: 1.12;
}

.product-wizard-modal .custom-wizard-tabs.product-wizard-tabs button {
  min-width: 0;
  gap: 6px;
  padding-inline: 14px;
}

.product-wizard-modal .custom-wizard-tabs.product-wizard-tabs button em {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.product-wizard-modal .custom-wizard-body.product-wizard-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.product-wizard-modal .flow-modal-footer,
.product-wizard-modal .product-modal-actions {
  flex-shrink: 0;
}

.product-wizard-modal .product-photo-card {
  display: none !important;
}

.product-wizard-modal .custom-structure-actions {
  flex-wrap: wrap;
}

.product-wizard-modal .product-structure-list,
.product-wizard-modal .product-operation-list {
  min-width: 0;
}

.product-wizard-modal .product-inline-operation {
  scroll-margin: 14px;
}

.products-table th:last-child,
.products-table td:last-child {
  text-align: center;
}

.product-row-actions {
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.product-card-actions {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  justify-content: end;
}

.product-row-actions .icon-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-action-archive:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.products-screen .product-code-cell strong {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 700;
}

.products-screen .product-table-name {
  font-weight: 400;
}

.product-status-badge.success {
  color: #166534;
  background: #dcfce7;
}

.product-status-badge.warning {
  color: #92400e;
  background: #fef3c7;
}

.product-code-cell,
.product-code-cell strong,
.product-stacked-cell strong,
.product-card header strong {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-pagination,
.product-pagination-controls {
  flex-wrap: wrap;
  overflow: visible;
}

.product-page-size {
  flex: 0 0 auto;
  min-width: 174px;
  overflow: visible;
}

.product-page-size select {
  min-width: 84px;
  padding-right: 32px;
}

@media (max-width: 760px) {
  .product-wizard-modal.product-create-modal,
  .modal-panel.flow-modal.runtime-custom-wizard.product-wizard-modal.custom-workspace-shell {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: min(96dvh, calc(100dvh - 16px));
    max-height: min(96dvh, calc(100dvh - 16px));
  }

  .product-wizard-modal .product-modal-header {
    padding: 12px 14px;
  }

  .product-wizard-modal .flow-modal-title h2 {
    font-size: 22px;
  }
}

/* Build 051.2 Products final follow-up */
.content:has(> .topbar + #section-root .products-screen) {
  padding-top: 18px;
}

.topbar:has(+ #section-root .products-screen) {
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), 0.04);
}

.topbar:has(+ #section-root .products-screen) .title-block {
  flex: 1 1 auto;
  min-width: 0;
}

.module-title-block {
  display: grid;
  min-width: 0;
  gap: 0;
  text-align: left;
}

.products-context-header > .module-title-block {
  gap: 0;
}

.module-title-block p {
  margin: 0 0 4px;
  color: #63768a;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.module-title-block h1 {
  margin: 0;
  color: var(--ds-heading);
  font-family: inherit;
  font-size: clamp(24px, 1.95vw, 28px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}

.module-title-block span {
  display: block;
  max-width: 720px;
  margin-top: 5px;
  color: #526a82;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.35;
}

.topbar:has(+ #section-root .products-screen) .topbar-actions {
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.topbar:has(+ #section-root .products-screen) .compact-command {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 12px;
}

.topbar:has(+ #section-root .products-screen) .notification-trigger,
.topbar:has(+ #section-root .products-screen) .profile-chip {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

.products-tabs button {
  min-height: 46px;
  align-content: center;
}

.products-tabs small {
  display: none;
}

.product-kpi-grid .product-kpi {
  min-height: 78px;
}

.product-kpi-grid .product-kpi em {
  display: none;
}

.product-neutral-meta {
  display: inline;
  color: var(--ds-text);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.product-page-size {
  min-width: 196px;
  padding-right: 12px;
}

.product-page-size select {
  min-width: 98px;
  padding-left: 12px;
  padding-right: 36px;
}

.modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell,
.modal-panel.flow-modal.runtime-custom-wizard.custom-choice-shell,
.product-wizard-modal.product-create-modal,
.modal-panel.flow-modal.runtime-custom-wizard.product-wizard-modal.custom-workspace-shell {
  width: min(96vw, 1400px);
  max-width: min(96vw, 1400px);
  height: min(94vh, calc(100dvh - 24px));
  max-height: min(94vh, calc(100dvh - 24px));
}

.product-wizard-modal .product-modal-header {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  justify-items: start;
}

.product-wizard-modal .product-modal-header .flow-modal-title {
  justify-self: start;
  text-align: left;
}

.product-wizard-modal .product-modal-header .flow-close-button {
  justify-self: end;
}

.product-import-modal .product-modal-header {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  justify-items: center;
}

.product-import-modal .product-modal-header .flow-modal-icon {
  justify-self: start;
}

.product-import-modal .product-modal-header .flow-modal-title {
  justify-self: center;
  text-align: center;
}

.product-import-modal .product-modal-header .flow-close-button {
  justify-self: end;
}

.custom-wizard-tabs button.locked em:empty {
  display: none;
}

.product-import-modal {
  width: min(94vw, 1080px);
  max-width: min(94vw, 1080px);
  max-height: min(92vh, calc(100dvh - 24px));
  overflow: hidden;
}

.product-import-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  display: grid;
  gap: 14px;
  background: var(--ds-bg);
}

.product-import-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-import-guide article,
.product-import-upload,
.product-import-result {
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .05);
}

.product-import-guide article {
  padding: 14px;
}

.product-import-guide h3,
.product-import-example strong,
.product-import-drop strong,
.product-import-preview strong,
.product-import-messages strong {
  margin: 0;
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.product-import-guide ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ds-text);
  font-size: 13px;
  line-height: 1.45;
}

.product-import-example {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.product-import-example span,
.product-import-drop span,
.product-import-result small {
  color: var(--ds-text-light);
  font-size: 12.5px;
  line-height: 1.35;
}

.product-import-upload {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.product-import-drop {
  display: grid;
  gap: 8px;
  justify-items: start;
  min-width: 0;
}

.product-import-drop > svg {
  width: 34px;
  height: 34px;
  color: var(--ds-primary);
}

.product-import-drop > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-import-result {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.product-import-body-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ds-text);
  background: #eff6ff;
  font-size: 12.5px;
  line-height: 1.35;
}

.product-import-body-notice svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ds-primary);
}

.product-import-body-notice span {
  min-width: 0;
}

.product-import-result.muted {
  color: var(--ds-text-light);
}

.product-import-result.has-errors {
  border-color: rgba(239, 68, 68, .32);
  background: #fff7f7;
}

.product-import-result.ready {
  border-color: rgba(34, 197, 94, .32);
  background: #f8fff9;
}

.product-import-messages ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.4;
}

.product-import-messages.error {
  color: #991b1b;
}

.product-import-messages.warning {
  color: #92400e;
}

.product-import-preview {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.product-import-preview table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.product-import-preview th,
.product-import-preview td {
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
}

.product-import-actions {
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shared-import-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 860px) {
  .topbar:has(+ #section-root .products-screen) {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar:has(+ #section-root .products-screen) .topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }

  .product-import-guide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .modal-panel.flow-modal.runtime-custom-wizard.custom-workspace-shell,
  .modal-panel.flow-modal.runtime-custom-wizard.custom-choice-shell,
  .product-wizard-modal.product-create-modal,
  .modal-panel.flow-modal.runtime-custom-wizard.product-wizard-modal.custom-workspace-shell,
  .product-import-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: min(96dvh, calc(100dvh - 16px));
    max-height: min(96dvh, calc(100dvh - 16px));
  }
}

/* Build 051.2 Products final polish */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.products-screen {
  gap: 8px;
}

.product-page-size {
  gap: 12px;
  min-width: 240px;
  padding-left: 14px;
  padding-right: 14px;
}

.product-page-size select {
  flex: 0 0 118px;
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  padding-left: 14px;
  padding-right: 40px;
  text-align: left;
  box-sizing: border-box;
}

.product-wizard-modal .product-modal-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  justify-items: start;
  column-gap: 14px;
  row-gap: 0;
}

.product-wizard-modal .product-modal-header .flow-modal-icon {
  justify-self: start;
}

.product-wizard-modal .product-modal-header .flow-modal-title {
  display: grid;
  gap: 3px;
  justify-self: start;
  max-width: min(760px, 100%);
  text-align: left;
}

.product-wizard-modal .product-modal-header .flow-modal-title > span,
.product-wizard-modal .product-modal-header .flow-modal-title h2,
.product-wizard-modal .product-modal-header .flow-modal-title p {
  text-align: left;
}

.product-wizard-modal .product-modal-header .flow-close-button {
  justify-self: end;
}

.product-wizard-modal .product-general-grid .custom-field-grid,
.station-wizard-modal .station-general-grid .custom-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.station-wizard-modal :is(.station-general-grid, .station-operators-grid, .station-documentation-grid) {
  grid-template-columns: minmax(0, 1fr);
}

.product-wizard-modal .product-category-field,
.station-wizard-modal .station-name-field {
  min-width: 0;
}

.product-wizard-modal .product-weight-price-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.product-wizard-modal .product-weight-price-row .field,
.product-wizard-modal .product-weight-price-row input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.product-wizard-modal[data-product-tab="general"] .product-wizard-body {
  padding-block: 10px;
}

@media (min-width: 561px) {
  .modal-panel.flow-modal.runtime-custom-wizard.product-wizard-modal.custom-workspace-shell[data-product-tab="general"] {
    height: auto;
  }

  .product-wizard-modal[data-product-tab="general"] .product-wizard-body {
    flex: 0 1 auto;
  }
}

.product-wizard-modal .product-general-grid .panel-card {
  padding: 12px 14px;
}

.product-wizard-modal .product-general-grid .custom-panel-head {
  align-items: center;
  margin-bottom: 8px;
}

.product-wizard-modal .product-general-grid .custom-panel-head h3 {
  margin: 0;
  font-size: 18px;
}

.product-wizard-modal .product-general-grid .custom-field-grid {
  gap: 9px 12px;
}

.product-wizard-modal .product-general-grid .field {
  gap: 4px;
}

.product-wizard-modal .product-general-grid textarea#product-description {
  min-height: 58px;
  height: 58px;
  resize: vertical;
}

.product-wizard-modal .product-category-field select,
.station-wizard-modal .station-name-field input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

@media (max-width: 920px) {
  .product-wizard-modal .product-general-grid .custom-field-grid,
  .station-wizard-modal .station-general-grid .custom-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-wizard-modal .product-weight-price-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.station-wizard-modal .station-operator-picker,
.station-wizard-modal .station-operator-priority-list {
  display: grid;
  gap: 12px;
}

.station-wizard-modal .station-operator-picker {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.station-wizard-modal .station-operator-search {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.station-wizard-modal .station-operator-card,
.station-wizard-modal .station-operator-priority-row {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 6px;
}

.station-wizard-modal .station-operator-card {
  cursor: pointer;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  padding: 10px 12px;
}

.station-wizard-modal .station-operator-card input {
  grid-row: span 2;
}

.station-wizard-modal .station-operator-card span {
  display: none;
}

.station-wizard-modal .station-operator-card strong,
.station-wizard-modal .station-operator-card small {
  grid-column: 2;
}

.station-wizard-modal .station-operator-card strong {
  font-size: 14px;
  line-height: 1.25;
}

.station-wizard-modal .station-operator-card small {
  font-size: 12px;
  line-height: 1.3;
}

.station-wizard-modal .station-operator-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(68, 132, 180, 0.14);
}

.station-wizard-modal .station-operator-priority-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px;
}

.station-wizard-modal .station-operator-priority-index {
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.station-wizard-modal .station-operator-priority-row small,
.station-wizard-modal .station-operator-card small {
  color: var(--muted);
  display: block;
}

.station-wizard-modal .station-operator-priority-actions {
  display: inline-flex;
  gap: 6px;
}

.station-wizard-modal .station-code-field input[readonly] {
  background: var(--soft-blue);
  color: var(--primary-dark);
  font-weight: 800;
}

/* Build 053 Team member modal shared shell */
.team-member-wizard-modal.team-member-modal {
  width: min(96vw, 1400px);
  max-width: min(96vw, 1400px);
  height: min(94vh, calc(100dvh - 24px));
  max-height: min(94vh, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.team-member-wizard-modal .product-modal-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  justify-items: start;
  column-gap: 14px;
  row-gap: 0;
  min-height: 0;
  padding: 14px 18px;
}

.team-member-wizard-modal .product-modal-header .flow-modal-icon {
  justify-self: start;
  width: 44px;
  height: 44px;
}

.team-member-wizard-modal .product-modal-header .flow-modal-title {
  display: grid;
  gap: 3px;
  justify-self: start;
  min-width: 0;
  max-width: min(760px, 100%);
  text-align: left;
}

.team-member-wizard-modal .product-modal-header .flow-modal-title > span,
.team-member-wizard-modal .product-modal-header .flow-modal-title h2,
.team-member-wizard-modal .product-modal-header .flow-modal-title p {
  text-align: left;
}

.team-member-wizard-modal .product-modal-header .flow-modal-title h2 {
  margin: 2px 0;
  font-size: 26px;
  line-height: 1.12;
}

.team-member-wizard-modal .product-modal-header .flow-close-button {
  justify-self: end;
}

.team-member-wizard-modal .team-wizard-tabs button {
  min-width: 0;
  gap: 6px;
  padding-inline: 14px;
}

.team-member-wizard-modal .team-member-wizard-body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  align-items: start;
  background: linear-gradient(180deg, #f8fbfe 0%, #eef6fb 100%);
}

.team-member-wizard-modal .team-member-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.team-member-wizard-modal .team-member-main,
.team-member-wizard-modal .team-member-content-grid,
.team-member-wizard-modal .team-modal-card,
.team-member-wizard-modal .team-summary-rail,
.team-member-wizard-modal .team-form-grid,
.team-member-wizard-modal .team-station-picker,
.team-member-wizard-modal .team-selected-stations,
.team-member-wizard-modal .team-document-list {
  min-width: 0;
}

.team-member-wizard-modal .team-member-main {
  display: grid;
  gap: 14px;
}

.team-member-wizard-modal .team-modal-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.team-member-wizard-modal .team-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.team-member-wizard-modal .team-form-grid .field {
  align-self: start;
  min-width: 0;
}

.team-member-wizard-modal .team-form-grid .field input,
.team-member-wizard-modal .team-form-grid .field select,
.team-member-wizard-modal .team-pin-control code {
  box-sizing: border-box;
  min-height: 42px;
  height: 42px;
}

.team-member-wizard-modal .team-form-grid .field textarea {
  min-height: 92px;
}

.team-member-wizard-modal .team-form-grid .wide-field {
  grid-column: 1 / -1;
}

.team-login-access-toggle,
.team-login-access-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  padding: 11px 13px;
}

.team-login-access-toggle {
  justify-content: flex-start;
  cursor: pointer;
}

.team-login-access-toggle > input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.team-login-access-toggle > span,
.team-login-access-state > div > span {
  display: grid;
  gap: 3px;
}

.team-login-access-toggle small,
.team-login-access-state small {
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.35;
}

.team-login-access-state > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.team-login-access-state > div > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--primary);
}

.team-login-access-state.active {
  border-color: color-mix(in srgb, var(--ds-success) 35%, var(--ds-card));
  background: var(--ds-success-bg);
}

.team-member-wizard-modal .team-pin-inline-panel,
.team-member-wizard-modal .team-inline-confirm,
.team-member-wizard-modal .team-document-actions,
.team-member-wizard-modal .team-selected-stations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.team-member-wizard-modal .team-pin-inline-panel {
  justify-content: space-between;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  padding: 12px 14px;
}

.team-member-wizard-modal .team-pin-inline-panel > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.team-member-wizard-modal .team-pin-inline-panel strong,
.team-member-wizard-modal .team-selected-stations strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
}

.team-member-wizard-modal .team-pin-inline-panel p,
.team-member-wizard-modal .team-muted {
  margin: 0;
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1.4;
}

.team-member-wizard-modal .team-pin-field {
  display: grid;
  align-content: start;
  gap: 7px;
}

.team-member-wizard-modal .team-pin-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.team-member-wizard-modal .team-pin-control code {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 0 12px;
}

.team-member-wizard-modal .team-pin-control code:not(.has-pin) {
  color: var(--ds-muted);
}

.team-member-wizard-modal .team-pin-generate-button {
  justify-content: center;
  justify-self: start;
  min-height: 36px;
  width: auto;
}

.team-member-wizard-modal .team-pin-field em {
  color: var(--ds-danger);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.team-member-wizard-modal .team-station-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.team-member-wizard-modal .team-station-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon code state"
    "icon name state";
  align-items: center;
  gap: 3px 10px;
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-heading);
  padding: 10px;
  text-align: left;
}

.team-member-wizard-modal .team-station-card > span {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--primary);
  background: var(--soft-blue);
}

.team-member-wizard-modal .team-station-card strong {
  grid-area: code;
  font-size: 13px;
  font-weight: 800;
}

.team-member-wizard-modal .team-station-card small {
  grid-area: name;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.25;
}

.team-member-wizard-modal .team-station-card em {
  grid-area: state;
  border: 1px solid var(--ds-primary-border);
  border-radius: 999px;
  color: var(--ds-primary-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 8px;
}

.team-member-wizard-modal .team-station-card.selected {
  border-color: var(--primary);
  background: #f8fbfe;
  box-shadow: 0 0 0 2px rgba(68, 132, 180, 0.14);
}

.team-member-wizard-modal .team-selected-stations {
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.team-member-wizard-modal .team-selected-stations span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: #f8fbfe;
  color: var(--ds-heading);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
}

.team-member-wizard-modal .team-selected-stations button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--ds-danger);
  padding: 0;
}

.team-member-wizard-modal .team-document-actions {
  justify-content: flex-start;
}

.team-member-wizard-modal .team-document-dropzone {
  width: 100%;
}

.team-member-wizard-modal .team-document-list .product-document-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.team-member-wizard-modal .team-document-confirm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.team-member-wizard-modal .team-summary-rail {
  position: sticky;
  top: 0;
  align-self: start;
}

.team-member-wizard-modal .team-summary-name strong {
  font-family: inherit;
  font-size: 20px;
  line-height: 1.15;
}

.team-member-wizard-modal .team-summary-rail .custom-rail-list div:first-child {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
}

.team-member-wizard-modal .team-summary-rail .custom-rail-list div:first-child strong {
  text-align: right;
}

.team-member-wizard-modal .team-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.team-member-wizard-modal .team-modal-footer > div {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.team-member-wizard-modal .team-modal-footer-edit {
  justify-content: flex-end;
}

.team-member-wizard-modal .team-modal-footer-create {
  justify-content: flex-end;
}

.team-pin-success-modal {
  width: min(92vw, 560px);
  max-width: min(92vw, 560px);
  overflow: hidden;
}

.team-pin-success-body {
  padding: 18px;
  background: linear-gradient(180deg, #f8fbfe 0%, #eef6fb 100%);
}

.team-pin-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  text-align: center;
}

.team-pin-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--primary);
  background: var(--soft-blue);
}

.team-pin-card code {
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ds-heading);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 10px 18px;
}

.team-pin-card div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.team-pin-card p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .team-member-wizard-modal .team-member-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-member-wizard-modal .team-summary-rail {
    position: static;
  }
}

@media (max-width: 760px) {
  .team-member-wizard-modal.team-member-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: min(96dvh, calc(100dvh - 16px));
    max-height: min(96dvh, calc(100dvh - 16px));
  }

  .team-member-wizard-modal .product-modal-header {
    padding: 12px 14px;
  }

  .team-member-wizard-modal .product-modal-header .flow-modal-title h2 {
    font-size: 22px;
  }

  .team-member-wizard-modal .team-form-grid,
  .team-member-wizard-modal .team-station-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-member-wizard-modal .team-modal-footer,
  .team-member-wizard-modal .team-modal-footer > div {
    align-items: stretch;
    flex-direction: column;
  }

  .team-member-wizard-modal .team-modal-footer .primary-button,
  .team-member-wizard-modal .team-modal-footer .secondary-button {
    width: 100%;
  }
}

@media (min-width: 561px) {
  .modal-panel.flow-modal.runtime-custom-wizard.product-wizard-modal.custom-workspace-shell.team-member-wizard-modal[data-team-tab="general"],
  .modal-panel.flow-modal.runtime-custom-wizard.product-wizard-modal.custom-workspace-shell.station-wizard-modal[data-station-tab="general"] {
    height: auto;
  }
}

/* Analytics external-cost rows and totals. */
.wo-external-cost-detail { display: grid; gap: 16px; }
.wo-external-cost-summary { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(320px, 2fr); gap: 16px; padding: 18px; border: 1px solid var(--ds-border); border-radius: 14px; background: var(--ds-surface, #fff); }
.wo-external-cost-summary > div { display: grid; gap: 5px; }
.wo-external-cost-summary > div small { color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.wo-external-cost-summary > div strong { color: var(--ds-primary); font-size: 1.65rem; }
.wo-external-cost-summary > div span { color: var(--ds-text-muted); }
.wo-external-cost-summary dl { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 10px; margin: 0; }
.wo-external-cost-summary dl div { display: grid; gap: 4px; padding: 11px; border-radius: 10px; background: #f5f8fa; }
.wo-external-cost-summary dt { color: var(--ds-text-muted); font-size: .78rem; }
.wo-external-cost-summary dd { margin: 0; color: var(--ds-text); font-weight: 700; }
.wo-external-cost-commandbar { display: flex; flex-wrap: wrap; gap: 10px; }
.wo-external-cost-tools { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px); gap: 12px; }
.wo-external-cost-tools label { display: grid; gap: 6px; color: var(--ds-text-muted); font-size: .8rem; font-weight: 650; }
.wo-external-cost-tools input, .wo-external-cost-tools select { min-height: 42px; padding: 9px 11px; border: 1px solid var(--ds-border); border-radius: 9px; background: #fff; color: var(--ds-text); }
.wo-external-cost-groups { display: grid; gap: 16px; }
.wo-external-cost-groups > section { display: grid; gap: 8px; }
.wo-external-cost-groups > section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ds-text); }
.wo-external-cost-groups > section > header span { min-width: 28px; padding: 3px 8px; border-radius: 999px; background: #e8f0f6; text-align: center; }
.wo-external-cost-groups > section > div { display: grid; gap: 14px; }
.wo-external-cost-row { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(360px, 2fr) auto; gap: 16px; align-items: center; padding: 18px; border: 1px solid #c7d8e5; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(25, 63, 91, .09); }
.wo-external-cost-row:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.wo-external-cost-main { display: grid; gap: 4px; }
.wo-external-cost-main > span { color: var(--ds-text-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wo-external-cost-main em { color: #765b00; font-style: normal; }
.wo-external-cost-main strong { color: var(--ds-text); }
.wo-external-cost-main small { color: var(--ds-text-muted); }
.wo-external-cost-row dl { display: grid; grid-template-columns: repeat(4, minmax(85px, 1fr)); gap: 8px; margin: 0; }
.wo-external-cost-row dl div { min-width: 0; }
.wo-external-cost-row dt { color: var(--ds-text-muted); font-size: .72rem; }
.wo-external-cost-row dd { overflow: hidden; margin: 3px 0 0; color: var(--ds-text); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.wo-external-cost-row > p { grid-column: 1 / -1; margin: 0; color: var(--ds-text-muted); }
.wo-external-cost-actions { display: flex; gap: 6px; }
.wo-external-cost-attachment-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--ds-border); }
.wo-external-cost-attachment-heading span { min-width: 28px; padding: 3px 8px; border-radius: 999px; background: #e8f0f6; text-align: center; }
.wo-finance-attachment-section { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--ds-border); border-radius: 12px; background: #f8fafc; }
.wo-finance-attachment-section h3, .wo-finance-attachment-section p { margin: 0; }
.wo-finance-attachment-section > p { color: var(--ds-text-muted); font-size: .84rem; }
.wo-finance-attachments { grid-column: 1 / -1; display: grid; gap: 10px; min-width: 0; }
.wo-finance-attachment-list { display: grid; gap: 7px; }
.wo-finance-attachment-list > p { margin: 0; color: var(--ds-text-muted); font-size: .84rem; }
.wo-finance-attachment-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ds-border); border-radius: 9px; background: #fff; }
.wo-finance-attachment-list article > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.wo-finance-attachment-list article strong, .wo-finance-attachment-list article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-finance-attachment-list article small { color: var(--ds-text-muted); }
.wo-finance-attachment-list article > div:last-child { display: flex; gap: 4px; }
.wo-finance-attachment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wo-material-cost-detail > .wo-finance-attachment-section { margin-top: 4px; }
.wo-analytics-external-start, .wo-analytics-initial-costs { display: grid; gap: 12px; }
.wo-analytics-external-start > header { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid var(--ds-border); }
.wo-analytics-external-start > header small { color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.wo-analytics-external-start > header span { color: var(--ds-text-muted); font-size: .82rem; }
.wo-analytics-initial-costs > article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--ds-border); border-radius: 10px; background: #f8fafb; }
.wo-analytics-initial-costs > article > header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.wo-analytics-initial-costs label { display: grid; align-content: start; align-self: start; gap: 5px; color: var(--ds-text-muted); font-size: .8rem; font-weight: 650; }
.wo-analytics-initial-costs label, .wo-analytics-initial-costs .wo-analytics-money-input { min-width: 0; }
.wo-analytics-initial-costs input, .wo-analytics-initial-costs select, .wo-analytics-initial-costs textarea { width: 100%; min-height: 40px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: 8px; background: #fff; }
.wo-external-cost-modal .wo-analytics-modal-body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.wo-external-cost-modal .wo-analytics-field { min-width: 0; align-content: start; align-self: start; }
.wo-analytics-finance-lifecycle-note { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--ds-info-border); border-radius: 8px; background: var(--ds-info-bg); color: var(--ds-text-muted); padding: 10px 12px; font-size: .82rem; }

@media (max-width: 1100px) {
  .wo-external-cost-summary { grid-template-columns: 1fr; }
  .wo-external-cost-row { grid-template-columns: 1fr; }
  .wo-external-cost-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wo-external-cost-summary dl, .wo-external-cost-row dl, .wo-analytics-initial-costs > article, .wo-external-cost-modal .wo-analytics-modal-body { grid-template-columns: 1fr; }
  .wo-external-cost-tools { grid-template-columns: 1fr; }
  .wo-external-cost-actions { flex-direction: column; align-items: stretch; }
  .wo-finance-attachment-list article { grid-template-columns: auto minmax(0, 1fr); }
  .wo-finance-attachment-list article > div:last-child { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Materials catalog foundation */
.content:has(> #section-root .materials-catalog), #section-root:has(> .materials-catalog) { min-width: 0; max-width: 100%; overflow-x: hidden; }
.materials-catalog { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: 18px; overflow-x: hidden; }
.materials-catalog > * { min-width: 0; max-width: 100%; }
.materials-head, .materials-head-actions, .materials-pagination, .materials-pagination > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.materials-head { justify-content: space-between; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: 16px; background: var(--ds-surface,#fff); box-shadow: 0 10px 28px rgba(var(--ds-sidebar-rgb),.055); }
.materials-head h2, .materials-head p, .material-modal h2, .material-modal p { margin: 0; }
.materials-head-actions { flex-wrap: wrap; justify-content: flex-end; }
.materials-head .module-title-block { min-width: 0; }
.materials-head-actions .primary-button { display: inline-flex; align-items: center; gap: 8px; }
.materials-head-actions .primary-button > svg { width: 16px; height: 16px; }
.materials-settings-note { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ds-border); border-radius: 12px; padding: 12px 14px; background: var(--ds-surface, #fff); }
.materials-settings-note span { margin-left: auto; color: var(--ds-text-muted); }
.materials-toolbar { display: grid; grid-template-columns: minmax(240px, 1.8fr) minmax(110px, .72fr) minmax(135px, .88fr) minmax(125px, .82fr) minmax(110px, .72fr) auto; gap: 10px; align-items: end; }
.materials-filter-card { border: 1px solid var(--ds-border); border-radius: 12px; padding: 12px; background: linear-gradient(180deg,var(--ds-card) 0%,var(--ds-bg-soft) 100%); box-shadow: 0 8px 24px rgba(var(--ds-sidebar-rgb),.045); }
.materials-toolbar label, .material-field { display: grid; gap: 6px; min-width: 0; }
.materials-toolbar label > span, .material-field > span { font-size: 11px; font-weight: 800; letter-spacing: .035em; color: var(--ds-text-muted); }
.materials-toolbar label > span { color: #63768a; font-size: 10.5px; letter-spacing: 0; line-height: 1.1; text-transform: uppercase; }
.materials-toolbar input, .materials-toolbar select, .materials-pagination select, .material-field input, .material-field select, .material-field textarea { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid var(--ds-border); border-radius: 10px; padding: 9px 11px; background: var(--ds-surface, #fff); color: inherit; transition: border-color .16s ease, box-shadow .16s ease; }
.materials-toolbar input:focus, .materials-toolbar select:focus, .material-field input:focus, .material-field select:focus, .material-field textarea:focus { outline: 0; border-color: var(--ds-primary, #4a7fa7); box-shadow: 0 0 0 3px rgba(var(--ds-primary-rgb), .12); }
.materials-toolbar input, .materials-toolbar select { color: var(--ds-heading); font: inherit; font-size: 13px; font-weight: 500; text-transform: none; }
.materials-search-control { position: relative; display: flex; align-items: center; }
.materials-search-control > svg { position: absolute; left: 12px; z-index: 1; width: 16px; color: var(--ds-text-muted); pointer-events: none; }
.materials-search-control input { padding-left: 38px; }
.materials-clear-button { min-height: 44px; gap: 7px; white-space: nowrap; }
.materials-clear-button svg { width: 15px; height: 15px; }
.materials-state { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 9px; text-align: center; border: 1px dashed var(--ds-border); border-radius: 14px; padding: 28px; }
.materials-state p { margin: 0; color: var(--ds-text-muted); }
.materials-error { border-style: solid; }
.materials-spinner { width: 28px; height: 28px; border: 3px solid var(--ds-border); border-top-color: var(--ds-accent, #2563eb); border-radius: 50%; animation: materials-spin .8s linear infinite; }
@keyframes materials-spin { to { transform: rotate(360deg); } }
.materials-skeleton { display: grid; gap: 10px; border: 1px solid var(--ds-border); border-radius: 14px; padding: 16px; }
.materials-skeleton span { display: block; height: 44px; border-radius: 9px; background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 45%, #eef2f6 65%); background-size: 240% 100%; animation: materials-shimmer 1.2s infinite linear; }
@keyframes materials-shimmer { to { background-position: -240% 0; } }
.materials-table tbody tr[data-action] { cursor: pointer; }
.materials-table { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border)); border-radius: 14px; background: var(--ds-surface, #fff); box-shadow: 0 8px 24px rgba(var(--ds-sidebar-rgb), .055); }
.materials-table table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1260px; }
.materials-table th, .materials-table td { border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent); border-right: 0; vertical-align: middle; }
.materials-table th + th, .materials-table td + td { border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent); }
.materials-table th { border-bottom-color: color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border)); white-space: normal; text-align: center; }
.materials-table th .sort-header { width: 100%; justify-content: center; gap: 5px; font: inherit; font-weight: inherit; line-height: inherit; text-transform: inherit; white-space: normal; text-align: center; }
.materials-table th .sort-header svg { flex: 0 0 13px; width: 13px; height: 13px; }
.materials-table th[aria-sort="ascending"] .sort-header, .materials-table th[aria-sort="descending"] .sort-header { color: var(--ds-primary-strong, #17486d); }
.materials-table tbody tr:last-child td { border-bottom: 0; }
.materials-table tbody tr { transition: background-color .15s ease; }
.materials-table tbody tr:hover { background: rgba(var(--ds-primary-rgb), .035); }
.material-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
.material-cell-left { text-align: left; }
.material-cell-center { text-align: center; }
.material-cell-right { text-align: right; }
.materials-table .material-group-stock-start, .materials-table .material-group-value-start, .materials-table .material-group-status-start { border-left: 2px solid rgba(var(--ds-primary-rgb), .16); }
.materials-table td.material-stock-reserved, .materials-table td.material-stock-available { background: rgba(var(--ds-primary-rgb), .022); }
.material-value-unavailable { color: var(--ds-text-muted); font-size: 12px; white-space: nowrap; }
.material-actions-cell { display: table-cell; }
.material-actions { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.material-action-button { min-width: 40px !important; min-height: 40px !important; padding: 0 10px !important; gap: 6px; border-radius: 9px; font-size: 12px; }
.material-action-button svg { width: 16px; height: 16px; }
.status-pill { display: inline-flex; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 700; background: #eef2f7; }
.status-pill.active { background: #e8f7ee; color: #176b3a; }
.status-pill.archived { color: var(--ds-text-muted); }
.materials-cards { display: none; }
.materials-pagination { flex-wrap: wrap; }
.materials-pagination label { display: flex; align-items: center; gap: 7px; }
.materials-pagination select { width: auto; min-height: 36px; }
.material-modal-backdrop { padding: 20px; }
.material-modal { display: flex; flex-direction: column; width: min(900px, calc(100vw - 32px)); max-width:calc(100vw - 32px); min-width:0; max-height: calc(100dvh - 40px); overflow: hidden; padding: 0; border-radius: 20px; border-color: rgba(var(--ds-primary-rgb), .2); box-shadow: 0 30px 80px rgba(var(--ds-sidebar-rgb), .24), 0 2px 8px rgba(var(--ds-sidebar-rgb), .08); }
.material-modal-header { display: flex; flex:0 0 auto; min-width:0; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 20px; border-bottom: 1px solid var(--ds-border); background: linear-gradient(180deg, #fff 0%, rgba(var(--ds-primary-rgb), .018) 100%); }
.material-modal-header > div:not(.nx-modal-window-controls) { display: grid; gap: 5px; min-width: 0; }
.material-modal-header h2 { color: var(--ds-heading); font-size: 24px; line-height: 1.15; }
.material-modal-header > div > p:last-child { color: var(--ds-text-muted); font-size: 13px; }
.material-close-button { flex: 0 0 auto; margin: -4px -4px 0 0; }
.material-modal-body { display: grid; flex:1 1 auto; min-width:0; min-height:0; grid-template-columns: minmax(0, 1.9fr) minmax(230px, .9fr); align-items: stretch; gap: 18px; padding: 22px 26px 24px; overflow-y: auto; overflow-x:hidden; background: var(--ds-bg-subtle, #f8fafc); }
.material-api-error { grid-column: 1 / -1; margin: 0; }
.material-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 16px; padding: 20px; border: 1px solid var(--ds-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .045); }
.material-field-wide { grid-column: 1 / -1; }
.material-note-field textarea { min-height: 104px; resize: vertical; line-height: 1.5; white-space: pre-wrap; }
.material-field small { color: var(--ds-text-muted); }
.material-field .field-error { color: #b42318; }
.material-min-tracking { display:flex; align-items:center; gap:12px; min-height:52px; padding:4px 2px; cursor:pointer; color:var(--ds-heading); }
.material-min-tracking input { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.material-switch { position:relative; flex:0 0 46px; width:46px; height:26px; border:1px solid rgba(var(--ds-sidebar-rgb),.22); border-radius:999px; background:#dbe3e8; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.material-switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(var(--ds-sidebar-rgb),.24); transition:transform .16s ease; }
.material-min-tracking input:checked + .material-switch { border-color:var(--ds-primary); background:var(--ds-primary); }
.material-min-tracking input:checked + .material-switch::after { transform:translateX(20px); }
.material-min-tracking input:focus-visible + .material-switch { box-shadow:0 0 0 3px rgba(var(--ds-primary-rgb),.18); }
.material-min-tracking strong { font-size:14px; line-height:1.35; }
.material-readonly { display: flex; flex-direction: column; border: 1px solid rgba(var(--ds-primary-rgb), .24); border-radius: 14px; padding: 20px; background: linear-gradient(155deg, #f8fbfe 0%, #f1f6fa 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.material-readonly h3 { margin: 0 0 15px; color: var(--ds-primary-strong, #17486d); }
.material-readonly dl { margin: 0; display: grid; gap: 0; }
.material-readonly dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, auto); align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid rgba(var(--ds-primary-rgb), .11); }
.material-readonly dl div:last-child { border-bottom: 0; }
.material-readonly dl .material-finance-start { margin-top: 8px; border-top: 2px solid rgba(var(--ds-primary-rgb), .14); }
.material-readonly dt { color: var(--ds-text-muted); }
.material-readonly dd { margin: 0; color: var(--ds-primary-strong, #17486d); font-weight: 800; line-height: 1.4; text-align: right; }
.material-price-incomplete { display: inline-grid; justify-items: end; gap: 3px; max-width: 250px; }
.material-price-incomplete strong { color: #9a5b08; }
.material-price-incomplete small { color: var(--ds-text-muted); font-size: 11px; font-weight: 500; line-height: 1.35; }
.materials-table .material-price-incomplete { justify-items: start; }
.material-readonly p { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(var(--ds-primary-rgb), .11); color: var(--ds-text-muted); font-size: 12px; line-height: 1.5; }
.material-readonly > button { margin-top: 18px; width: 100%; }
.material-reserved-link { appearance:none; border:0; padding:2px 3px; border-radius:6px; background:transparent; color:var(--ds-primary-strong,#17486d); font:inherit; font-weight:850; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.material-reserved-link:hover,.material-reserved-link:focus-visible { background:rgba(var(--ds-primary-rgb),.1); outline:none; }
.material-reservations-modal { display:flex; flex-direction:column; width:min(820px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:hidden; padding:0; border-radius:20px; }
.material-reservations-body { min-height:120px; padding:20px 24px; overflow-y:auto; background:var(--ds-bg-subtle,#f8fafc); }
.material-reservations-list { display:grid; gap:12px; }
.material-reservation-card { min-width:0; padding:17px 18px; border:1px solid var(--ds-border); border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(var(--ds-sidebar-rgb),.045); }
.material-reservation-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.material-reservation-card>header>div { display:grid; gap:3px; min-width:0; }
.material-reservation-card>header small,.material-reservation-card dt { color:var(--ds-text-muted); font-size:11px; font-weight:750; }
.material-reservation-card>header strong { color:var(--ds-heading); font-size:16px; }
.material-reservation-card>header span:not(.priority-badge) { color:var(--ds-text-muted); overflow-wrap:anywhere; }
.material-reservation-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; margin:16px 0 0; padding-top:14px; border-top:1px solid var(--ds-border); }
.material-reservation-card dl>div { display:grid; gap:4px; min-width:0; }
.material-reservation-card dd { margin:0; overflow-wrap:anywhere; }
.material-reservation-card .material-reservation-context { grid-column:1/-1; }
.material-reservation-context dd { display:flex; flex-wrap:wrap; gap:7px; }
.material-reservation-context dd>span { padding:5px 8px; border-radius:8px; background:rgba(var(--ds-primary-rgb),.07); }
.material-reservations-total { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; border-top:1px solid var(--ds-border); background:#fff; color:var(--ds-primary-strong,#17486d); }
.material-reservations-modal > .modal-actions { flex:0 0 auto; margin:0; padding:18px 24px 22px; border-top:1px solid var(--ds-border); background:#fff; }
.material-reservations-loading { padding:10px 0; }
@media (max-width: 600px) {
  .material-reservations-modal { width:100vw; max-width:100vw; max-height:100dvh; border-radius:0; }
  .material-reservations-body { padding:14px; }
  .material-reservation-card dl { grid-template-columns:1fr; }
  .material-reservations-total { padding:14px 18px; }
  .material-reservations-modal > .modal-actions { padding:14px 18px max(18px,env(safe-area-inset-bottom)); }
}
.material-code-with-warning { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.material-warning-indicator { position:relative; display:inline-grid; flex:0 0 34px; place-items:center; width:34px; height:34px; padding:0; border:1px solid transparent; border-radius:999px; background:#fff; box-shadow:0 3px 10px rgba(14,47,72,.1); cursor:pointer; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.material-warning-indicator svg { width:15px; height:15px; }
.material-warning-indicator.warning { border-color:#e8c979; color:#8a570d; background:#fffaf0; }
.material-warning-indicator.danger { border-color:#e8aaaa; color:#a12b2b; background:#fff5f5; }
.material-warning-indicator:hover,.material-warning-indicator:focus-visible { box-shadow:0 5px 14px rgba(14,47,72,.16); transform:translateY(-1px); outline:none; }
.material-warning-indicator>span { position:absolute; top:-5px; right:-5px; display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border:2px solid #fff; border-radius:999px; color:#fff; background:#a12b2b; font-size:9px; font-weight:900; line-height:1; }
.materials-table tr.material-warning-row-danger td,.material-card.material-warning-row-danger { background:#fff7f7; }
.materials-table tr.material-warning-row-min td,.material-card.material-warning-row-min { background:#fffbf2; }
.material-warning-modal { width:min(560px,calc(100vw - 32px)); overflow:hidden; padding:0; border:1px solid #d3e1e9; border-radius:20px; box-shadow:0 28px 80px rgba(8,39,63,.24); }
.material-warning-modal>header { padding:24px 26px 20px; border-bottom:1px solid #d9e5ec; background:linear-gradient(145deg,#fff,#f4f9fc); }
.material-warning-modal>header small { color:#47758f; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.material-warning-modal>header h2 { margin:5px 40px 5px 0; color:#12354d; font-size:1.25rem; }
.material-warning-modal>header p { margin:0; color:#60798a; }
.material-warning-list { display:grid; gap:10px; padding:20px 26px; background:#f8fbfc; }
.material-warning-list article { display:flex; align-items:center; gap:13px; padding:14px 15px; border:1px solid #d7e4eb; border-radius:13px; background:#fff; }
.material-warning-list article>span { display:grid; flex:0 0 34px; place-items:center; width:34px; height:34px; border-radius:10px; background:#eef5f8; color:#27698f; }
.material-warning-list article>span svg { width:17px; height:17px; }
.material-warning-list article>div { display:grid; gap:3px; min-width:0; }
.material-warning-list article small { color:#62798a; font-weight:750; }
.material-warning-list article strong { color:#163c55; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.material-warning-list article.danger { border-color:#edc2c2; background:#fff8f8; }
.material-warning-list article.danger>span { color:#a12b2b; background:#fdeaea; }
.material-warning-list article.warning { border-color:#ecd69e; background:#fffcf4; }
.material-warning-list article.warning>span { color:#8a570d; background:#fff2cd; }
.material-warning-list article.primary { border-color:#bed8e7; background:#f5fbfe; }
.material-warning-modal>.modal-actions { padding:15px 26px; border-top:1px solid #d9e5ec; background:#fff; }
.materials-procurement-trigger { display:inline-flex; align-items:center; gap:9px; }
.materials-procurement-trigger strong { display:grid; place-items:center; min-width:25px; height:25px; padding:0 7px; border-radius:999px; background:rgba(255,255,255,.2); }
.material-procurement-modal { width:min(1480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:0; border-radius:22px; box-shadow:0 30px 90px rgba(8,39,63,.25); }
.material-procurement-modal>header { padding:26px 30px 18px; border-bottom:1px solid #d7e4ec; background:linear-gradient(145deg,#fff,#f4f9fc); }
.material-procurement-modal>header small { color:#37779f; font-weight:850; text-transform:uppercase; letter-spacing:.05em; }
.material-procurement-modal>header h2 { margin:5px 0; color:#102f48; }.material-procurement-modal>header p { margin:0; color:#60778a; }
.procurement-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:18px 30px; }
.procurement-summary>div { display:grid; gap:5px; padding:15px; border:1px solid #cfe0e9; border-radius:14px; background:linear-gradient(145deg,#fff,#f3f8fb); }
.procurement-summary span { color:#60778a; font-size:.76rem; font-weight:750; }.procurement-summary strong { color:#123e5c; font-size:1.45rem; }
.procurement-filters { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:12px; margin:0 30px 16px; }
.procurement-filters label,.procurement-note { display:grid; gap:6px; min-width:0; }.procurement-filters label>span,.procurement-note>span { color:#60778a; font-size:.72rem; font-weight:800; }
.procurement-select-all { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 30px 12px; color:#526d80; }
.procurement-select-all label,.procurement-select { display:flex; align-items:center; gap:10px; font-weight:750; }.procurement-select-all input,.procurement-select input,.procurement-table input { width:20px; height:20px; accent-color:#2779a6; }
.procurement-table { margin:0 30px; overflow-x:auto; border:1px solid #cbdde7; border-radius:15px; box-shadow:0 10px 28px rgba(13,58,89,.07); }
.procurement-table table { width:100%; min-width:1420px; border-collapse:collapse; }.procurement-table th,.procurement-table td { border-right:1px solid rgba(34,104,146,.09); border-bottom:1px solid #d8e5ec; vertical-align:middle; }
.procurement-table th { text-align:center; }.procurement-table td.number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }.procurement-table td.center { text-align:center; }
.procurement-table td.shortage { color:#a12b2b; font-weight:800; }.procurement-table td.recommended { color:#0e527a; font-size:1.04rem; font-weight:900; background:#f0f8fc; }.procurement-table tbody tr:hover { background:#f8fbfd; }
.procurement-table .procurement-supplier-row th { text-align:left; border-top:2px solid #bfd6e3; }
.procurement-table details summary { cursor:pointer; color:#256d98; font-weight:800; }.procurement-sources { display:grid; gap:8px; min-width:270px; padding-top:8px; }.procurement-sources article { padding:9px; border:1px solid #d6e4ec; border-radius:10px; background:#fff; }.procurement-sources article>span { display:block; color:#6b7e8e; font-size:.75rem; }
.scrap-evidence-section { border-color:#e7d1cf; background:linear-gradient(145deg,#fff,#fffafa); }
.scrap-evidence-summary { display:grid; gap:12px; margin:0 20px 16px; padding:14px; border:1px solid #ead3cf; border-radius:14px; background:#fff8f7; color:#713832; }
.scrap-evidence-summary>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.scrap-evidence-summary article { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:10px 12px; border:1px solid #efdeda; border-radius:11px; background:#fff; }.scrap-evidence-summary article div { min-width:0; }.scrap-evidence-summary article span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#687987; font-size:.75rem; }.scrap-evidence-summary article b { white-space:nowrap; color:#a33a31; }
.scrap-evidence-table { margin:0 20px 20px; overflow-x:auto; border:1px solid #d8e3e8; border-radius:14px; background:#fff; }.scrap-evidence-table table { width:100%; min-width:1180px; border-collapse:collapse; }.scrap-evidence-table th,.scrap-evidence-table td { border-right:1px solid #e5edf1; border-bottom:1px solid #dce7ec; vertical-align:middle; }.scrap-evidence-table th { text-align:center; }.scrap-evidence-table td.center { text-align:center; }.scrap-evidence-quantity { text-align:center; }.scrap-evidence-quantity span { display:block; color:#a13b31; font-size:.67rem; font-weight:850; text-transform:uppercase; }.scrap-evidence-quantity strong { color:#9b3028; font-size:1rem; }.scrap-evidence-actions { display:flex; align-items:center; justify-content:center; gap:8px; }
.scrap-evidence-cards { display:none; }.scrap-evidence-card { display:grid; gap:12px; padding:14px; border:1px solid #e3d5d2; border-radius:14px; background:#fff; box-shadow:0 8px 20px rgba(75,34,29,.06); }.scrap-evidence-card header { display:flex; justify-content:space-between; gap:12px; }.scrap-evidence-card header h4 { margin:3px 0 0; }.scrap-evidence-card header>span { align-self:start; padding:6px 9px; border-radius:999px; background:#fff0ee; color:#9b3028; font-size:.74rem; font-weight:850; }.scrap-evidence-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }.scrap-evidence-card dl div { padding:9px; border-radius:9px; background:#f5f8fa; }.scrap-evidence-card dl .wide { grid-column:1/-1; }.scrap-evidence-card dt { color:#687987; font-size:.7rem; }.scrap-evidence-card dd { margin:4px 0 0; overflow-wrap:anywhere; font-weight:750; }
.work-order-scrap-modal { width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; }.work-order-scrap-modal>header { padding-right:54px; }.work-order-scrap-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.work-order-scrap-form .field { display:grid; gap:6px; }.work-order-scrap-form .wide { grid-column:1/-1; }.work-order-scrap-form input,.work-order-scrap-form select,.work-order-scrap-form textarea { width:100%; min-height:44px; box-sizing:border-box; }.work-order-scrap-form textarea { min-height:84px; resize:vertical; }.scrap-remove-summary { grid-column:1/-1; display:flex; justify-content:space-between; gap:12px; padding:13px; border:1px solid #ead3cf; border-radius:12px; background:#fff7f5; }.scrap-remove-summary span { color:#a13b31; font-weight:850; }
.settlement-recorded-scrap { display:grid; gap:16px; }.settlement-recorded-scrap>header { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e6cbc7; border-radius:14px; background:#fff5f3; }.settlement-recorded-scrap>header>span { color:#a23a31; }.settlement-recorded-scrap h3,.settlement-recorded-scrap p { margin:0; }.settlement-recorded-scrap p { margin-top:4px; color:#667d8c; }.settlement-recorded-scrap>div { display:grid; gap:8px; }.settlement-recorded-scrap article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #dbe6eb; border-radius:12px; background:#fff; }.settlement-recorded-scrap article>strong { color:#a13b31; }.settlement-recorded-scrap>footer { display:flex; justify-content:flex-end; gap:10px; }
@media (max-width:900px) { .scrap-evidence-summary>div { grid-template-columns:repeat(2,minmax(0,1fr)); }.scrap-evidence-table { display:none; }.scrap-evidence-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:0 16px 18px; } }
@media (max-width:620px) { .scrap-evidence-summary { margin:0 12px 13px; }.scrap-evidence-summary>div,.scrap-evidence-cards { grid-template-columns:1fr; }.scrap-evidence-cards { margin:0 12px 14px; }.scrap-evidence-card header,.settlement-recorded-scrap article,.settlement-recorded-scrap>footer { flex-direction:column; }.scrap-evidence-actions,.settlement-recorded-scrap>footer button { width:100%; }.scrap-evidence-actions button { flex:1; min-height:44px; }.work-order-scrap-modal { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }.work-order-scrap-form { grid-template-columns:1fr; }.work-order-scrap-form .wide { grid-column:auto; } }
.procurement-sources dl { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:7px 0 0; }.procurement-sources dt { color:#6b7e8e; font-size:.66rem; }.procurement-sources dd { margin:2px 0 0; font-weight:800; }
.procurement-cards { display:none; }.procurement-note { margin:18px 30px 0; }.procurement-note textarea { min-height:82px; resize:vertical; }.material-procurement-modal>.modal-actions { position:sticky; bottom:0; margin-top:18px; padding:16px 30px; background:rgba(255,255,255,.96); border-top:1px solid #d7e4ec; backdrop-filter:blur(10px); }

@media (max-width:1100px) { .procurement-summary { grid-template-columns:repeat(2,1fr); }.procurement-filters { grid-template-columns:1fr 1fr; } }
@media (max-width:720px) {
  .material-procurement-modal { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .material-procurement-modal>header,.procurement-summary { padding-left:18px; padding-right:18px; }.procurement-summary { grid-template-columns:1fr 1fr; gap:8px; }.procurement-filters { grid-template-columns:1fr; margin:0 18px 14px; }
  .procurement-select-all { align-items:flex-start; display:grid; padding:0 18px 12px; }.procurement-table { display:none; }.procurement-cards { display:grid; gap:12px; padding:0 18px; }.procurement-cards>h3 { margin:8px 0 -3px; color:#285f80; font-size:.9rem; }
  .procurement-card { display:grid; gap:13px; padding:15px; border:1px solid #ccdee8; border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(13,58,89,.07); }.procurement-card dl { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0; }.procurement-card dl>div { padding:9px; border-radius:9px; background:#f4f8fa; }.procurement-card dt { color:#647b8d; font-size:.7rem; }.procurement-card dd { margin:3px 0 0; font-weight:800; }.procurement-card .recommended { background:#eaf6fb; }
  .procurement-note { margin:16px 18px 0; }.material-procurement-modal>.modal-actions { display:grid; grid-template-columns:1fr; padding:14px 18px; }.material-procurement-modal>.modal-actions button { min-height:44px; }
  .material-warning-modal { width:calc(100vw - 24px); }
  .material-warning-modal>header,.material-warning-list,.material-warning-modal>.modal-actions { padding-left:18px; padding-right:18px; }
  .material-warning-indicator { flex-basis:40px; width:40px; height:40px; }
  .procurement-sources dl { grid-template-columns:1fr 1fr; }
}

/* Materials modal layer authority: top-level portal, opaque shells and one body scroll region. */
body.material-modal-layer-open { overflow:hidden; }
body.material-modal-layer-open .app-shell { pointer-events:none; }
.modal-backdrop.material-modal-backdrop:has(.flow-modal) { z-index:260; align-items:center; justify-content:center; overflow:hidden; padding:clamp(12px,2vw,24px); isolation:isolate; background:rgba(var(--ds-sidebar-rgb),.56); backdrop-filter:blur(2px); }
.material-modal-backdrop>.modal-panel.flow-modal { position:relative; z-index:1; min-width:0; border-color:rgba(var(--ds-primary-border-rgb),.72); background:#fff; box-shadow:0 30px 90px rgba(7,33,53,.3); }
.modal-panel.flow-modal.material-procurement-modal { width:min(94vw,1480px); height:min(92dvh,980px); max-height:92dvh; overflow:hidden; border-radius:20px; }
.material-procurement-modal>.material-procurement-header { flex:0 0 auto; padding:18px 24px; background:linear-gradient(180deg,#fff,#f4f9fc); }
.material-procurement-modal>.material-procurement-header h2 { margin:0; padding:0; font-size:clamp(20px,2vw,26px); }
.material-procurement-body { display:flex; flex:1 1 auto; flex-direction:column; gap:16px; min-width:0; min-height:0; max-width:100%; padding:18px 24px 22px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; background:#f7fafc; }
.material-procurement-body>.procurement-summary { flex:0 0 auto; padding:0; }
.material-procurement-body>.procurement-filters { flex:0 0 auto; grid-template-columns:minmax(250px,2fr) repeat(3,minmax(150px,1fr)) auto; align-items:end; margin:0; padding:14px; background:#fff; }
.procurement-filters input,.procurement-filters select { width:100%; min-height:44px; box-sizing:border-box; }
.procurement-clear-button { min-height:44px; gap:7px; white-space:nowrap; }
.procurement-clear-button svg { width:15px; height:15px; }
.material-procurement-body>.procurement-select-all { flex:0 0 auto; min-height:44px; padding:10px 14px; border:1px solid #d5e3ea; border-radius:11px; background:#fff; }
.material-procurement-body>.procurement-table { flex:0 0 auto; width:100%; max-width:100%; box-sizing:border-box; margin:0; overflow-x:auto; overflow-y:visible; overscroll-behavior-inline:contain; background:#fff; }
.material-procurement-body>.procurement-table table { min-width:1420px; table-layout:auto; }
.material-procurement-body>.procurement-table th,.material-procurement-body>.procurement-table td { position:static; }
.material-procurement-body>.procurement-table .procurement-supplier-row th { position:static; width:auto; }
.material-procurement-body>.procurement-cards { padding:0; }
.material-procurement-body>.procurement-note { flex:0 0 auto; margin:0; padding:14px; border:1px solid #d5e3ea; border-radius:12px; background:#fff; }
.material-procurement-modal>.material-procurement-footer { flex:0 0 auto; justify-content:flex-end; gap:12px; padding:15px 24px; background:#fff; box-shadow:0 -8px 24px rgba(13,58,89,.06); }
.modal-panel.flow-modal.material-warning-modal { width:min(560px,calc(100vw - 32px)); max-height:min(88dvh,720px); overflow:hidden; border-radius:20px; background:#fff; }
.material-warning-modal>.material-warning-header { flex:0 0 auto; padding:18px 22px; background:linear-gradient(180deg,#fff,#f5f9fc); }
.material-warning-modal>.material-warning-header h2 { margin:0; padding:0; font-size:clamp(18px,2vw,22px); }
.material-warning-body { flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; background:#f8fbfc; }
.material-warning-body>.material-warning-list { padding:20px 22px; background:#f8fbfc; }
.material-warning-modal>.material-warning-footer { flex:0 0 auto; justify-content:flex-end; padding:14px 22px; background:#fff; }

@media (max-width:1100px) {
  .material-procurement-body>.procurement-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .material-procurement-body>.procurement-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .material-procurement-body>.procurement-filters .procurement-clear-button { justify-self:start; }
}

@media (max-width:720px) {
  .modal-backdrop.material-modal-backdrop:has(.material-procurement-modal) { padding:0; }
  .modal-panel.flow-modal.material-procurement-modal { width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .material-procurement-modal>.material-procurement-header { padding:14px 16px; }
  .material-procurement-body { gap:13px; padding:14px 16px 18px; }
  .material-procurement-body>.procurement-summary,.material-procurement-body>.procurement-filters { grid-template-columns:1fr; }
  .material-procurement-body>.procurement-filters .procurement-clear-button { width:100%; justify-content:center; }
  .material-procurement-body>.procurement-select-all { display:grid; align-items:start; padding:12px; }
  .material-procurement-body>.procurement-table { display:none; }
  .material-procurement-body>.procurement-cards { display:grid; padding:0; }
  .material-procurement-modal>.material-procurement-footer { display:grid; grid-template-columns:1fr; padding:12px 16px; }
  .material-procurement-modal>.material-procurement-footer button { width:100%; min-height:44px; }
  .modal-panel.flow-modal.material-warning-modal { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
  .material-warning-modal>.material-warning-header,.material-warning-body>.material-warning-list,.material-warning-modal>.material-warning-footer { padding-left:18px; padding-right:18px; }
}
.materials-table tr.below-min td, .material-card.below-min { background: #fffaf0; }
.materials-settings-note button.active { border-color: #d99a29; background: #fff4d6; color: #7a4300; }
.materials-excel-modal { width: min(1040px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; padding: 0; border-radius: 22px; box-shadow: 0 32px 90px rgba(var(--ds-sidebar-rgb),.25); }
.modal-backdrop.material-modal-backdrop:has(.materials-excel-modal) { backdrop-filter:none; }
.materials-excel-body { display: grid; gap: 22px; min-height: 0; padding: 22px 24px 26px; overflow-y: auto; background: #f5f8fa; }
.materials-excel-topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.materials-excel-workflow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 13px 16px; border: 1px solid #d2e1eb; border-radius: 13px; background: #fff; color: #335c78; font-size: 13px; font-weight: 800; }
.materials-excel-workflow b { color: #7ea3bc; }
.materials-excel-topbar > button { width: auto; white-space: nowrap; }
.materials-excel-group { display: grid; gap: 13px; }
.materials-excel-group > header { display: flex; align-items: baseline; gap: 12px; }
.materials-excel-group > header span { color: #1f668f; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.materials-excel-group > header p { margin: 0; color: #657b8e; font-size: 13px; }
.materials-excel-import-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.materials-excel-tool-card { display: grid; gap: 15px; min-width: 0; padding: 16px; border: 1px solid #d4e2eb; border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(22,62,89,.055); }
.materials-excel-tool-card > div { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.materials-excel-tool-card > div > div { display: grid; gap: 4px; min-width: 0; }
.materials-excel-tool-card strong { color: #102f46; overflow-wrap: anywhere; }
.materials-excel-tool-card small { color: #657b8e; line-height: 1.4; }
.materials-excel-tool-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; background: #eaf4fa; color: #276f99; }
.materials-excel-tool-icon svg { width: 18px; }
.materials-excel-tool-card footer { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.materials-excel-tool-card footer button { min-width: 0; width: 100%; justify-content: center; text-align: center; }
.materials-excel-export-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.materials-excel-export-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 10px; min-height: 54px; padding: 9px 13px; border: 1px solid #d5e2eb; border-radius: 12px; background: #fff; color: #163c57; text-align: left; }
.materials-excel-export-row:hover { border-color: #95bdd3; background: #fafdff; }
.materials-excel-export-row > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #edf6fa; color: #347da5; }
.materials-excel-export-row svg { width: 17px; }
.materials-excel-export-row > svg { color: #7797aa; }
.materials-excel-footer { flex: 0 0 auto; justify-content: flex-end; padding: 14px 24px; background: #fff; }
.materials-excel-preview { gap: 15px; }
.materials-excel-file-summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #d3e2eb; border-radius: 13px; background: #fff; }
.materials-excel-file-summary > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #e9f4fa; color: #2f789f; }
.materials-excel-file-summary > div { display: grid; gap: 3px; min-width: 0; }
.materials-excel-file-summary small { color: #60809a; font-weight: 800; }
.materials-excel-file-summary strong { overflow-wrap: anywhere; }
.materials-excel-counts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.materials-excel-counts button { display: grid; gap: 3px; padding: 13px 15px; border: 1px solid #d7e3eb; border-radius: 12px; background: #fff; color:inherit; text-align:left; cursor:pointer; }
.materials-excel-counts button:hover:not(:disabled) { border-color:#8db7cf; box-shadow:0 5px 14px rgba(22,62,89,.08); }
.materials-excel-counts button.active { border-color:#277aa7; box-shadow:0 0 0 2px rgba(39,122,167,.16); }
.materials-excel-counts button:disabled { cursor:default; opacity:.58; }
.materials-excel-counts strong { font-size: 22px; }
.materials-excel-counts span { color: #647b8d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.materials-excel-counts .ready { border-color: #b9ddc9; background: #f3fbf6; color: #17683b; }
.materials-excel-counts .warning { border-color: #eed9a8; background: #fffaf0; color: #875a05; }
.materials-excel-counts .error { border-color: #efc5c0; background: #fff5f4; color: #9a3025; }
.materials-excel-preview-list { display: grid; gap: 8px; }
.materials-excel-preview-list article { display: grid; grid-template-columns: 108px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #d7e3ea; border-left-width: 4px; border-radius: 11px; background: #fff; }
.materials-excel-preview-list article.ready { border-left-color: #2b9960; }
.materials-excel-preview-list article.warning { border-left-color: #d89a24; }
.materials-excel-preview-list article.error { border-left-color: #c84b3c; }
.materials-excel-status { font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.materials-excel-preview-list article.ready .materials-excel-status { color: #237b4e; }
.materials-excel-preview-list article.warning .materials-excel-status { color: #93600a; }
.materials-excel-preview-list article.error .materials-excel-status { color: #a3362a; }
.materials-excel-preview-list article > div { display: grid; gap: 3px; min-width: 0; }
.materials-excel-preview-list strong,.materials-excel-preview-list small { overflow-wrap: anywhere; }
.materials-excel-preview-list small,.materials-excel-more { color: #657b8e; }
.materials-excel-more { margin: 0; text-align: center; }
.materials-excel-pagination { display:flex; align-items:center; justify-content:center; gap:14px; }
.materials-excel-pagination span { min-width:120px; color:#536f83; font-size:13px; font-weight:850; text-align:center; }
.materials-excel-pagination button { min-width:110px; }
.products-excel-body .materials-excel-topbar > div { display:grid; gap:4px; }
.products-excel-body .materials-excel-topbar > div > strong { color:#173d58; font-size:16px; }
.products-excel-body .materials-excel-topbar > div > small { color:#627b8d; }
.products-excel-kind-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.products-excel-kind-grid > button { display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:12px; min-height:82px; padding:15px; border:1px solid #d2e0e9; border-radius:14px; background:#fff; color:#173d58; text-align:left; box-shadow:0 6px 18px rgba(22,62,89,.045); }
.products-excel-kind-grid > button:hover { border-color:#83b2cc; background:#fbfdfe; box-shadow:0 8px 22px rgba(22,62,89,.08); }
.products-excel-kind-grid > button > span { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:#eaf4fa; color:#26739e; }
.products-excel-kind-grid > button > span svg { width:19px; }
.products-excel-kind-grid > button > div { display:grid; gap:4px; }
.products-excel-kind-grid > button small { color:#647d90; line-height:1.35; }
.products-excel-kind-grid > button > svg { width:17px; color:#7897aa; }
.products-excel-safety-note,.products-excel-catalog-guide { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid #c8e2d4; border-radius:12px; background:#f2faf6; color:#276648; font-size:13px; line-height:1.45; }
.products-excel-safety-note svg { width:17px; flex:0 0 auto; margin-top:1px; }
.products-excel-scope-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,330px); align-items:end; gap:16px; }
.products-excel-scope-head > div { display:flex; align-items:flex-start; gap:12px; }
.products-excel-scope-head > div > span { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:#e7f3f9; color:#25739e; }
.products-excel-scope-head > div > div { display:grid; gap:2px; }
.products-excel-scope-head small { color:#2b789f; font-size:10px; font-weight:900; letter-spacing:.12em; }
.products-excel-scope-head h3,.products-excel-scope-head p { margin:0; }
.products-excel-scope-head h3 { color:#173d58; font-size:19px; }
.products-excel-scope-head p { color:#627b8d; font-size:13px; }
.products-excel-scope-head > label { display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; border:1px solid #cbdce7; border-radius:11px; background:#fff; color:#6b8799; }
.products-excel-scope-head > label:focus-within { border-color:#4e91b6; box-shadow:0 0 0 3px rgba(42,126,170,.12); }
.products-excel-scope-head > label svg { width:17px; }
.products-excel-scope-head input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#153c57; }
.products-excel-selection-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#5c7688; font-size:12px; }
.products-excel-selection-meta strong { color:#1f6f99; }
.products-excel-targets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:390px; overflow:auto; padding:2px; }
.products-excel-target { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:10px; min-width:0; padding:11px 12px; border:1px solid #d4e1ea; border-radius:11px; background:#fff; color:#173d58; text-align:left; }
.products-excel-target:hover { border-color:#8eb7ce; }
.products-excel-target.selected { border-color:#3984aa; background:#f0f8fc; box-shadow:0 0 0 2px rgba(45,127,169,.1); }
.products-excel-check { display:grid; place-items:center; width:22px; height:22px; border:1px solid #adc4d2; border-radius:6px; color:#fff; }
.products-excel-target.selected .products-excel-check { border-color:#2c7da7; background:#2c7da7; }
.products-excel-check svg { width:14px; }
.products-excel-target > div { display:grid; gap:3px; min-width:0; }
.products-excel-target strong,.products-excel-target small { overflow-wrap:anywhere; }
.products-excel-target small { color:#647d90; }
.products-excel-empty { grid-column:1/-1; padding:28px; border:1px dashed #c8d9e4; border-radius:12px; color:#667f90; text-align:center; }
.products-excel-scope-footer { justify-content:space-between; }
.products-excel-scope-footer > div { display:flex; gap:9px; }
.products-excel-catalog-guide { align-items:center; min-height:120px; border-color:#d2e0e9; background:#fff; color:#173d58; }
.products-excel-catalog-guide > svg { width:30px; color:#2d7da6; }
.products-excel-catalog-guide > div { display:grid; gap:5px; }
.products-excel-catalog-guide span { color:#627b8d; }
.products-excel-affected { display:grid; gap:7px; padding:14px; border:1px solid #d2e1e9; border-radius:13px; background:#fff; }
.products-excel-affected header { display:flex; justify-content:space-between; gap:12px; padding-bottom:7px; color:#173d58; }
.products-excel-affected header span { color:#657d8f; font-size:12px; }
.products-excel-affected > div { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:10px; padding:6px 8px; border-radius:8px; background:#f6f9fb; }
.products-excel-affected b { color:#256f97; }
.products-excel-affected small { color:#5f788a; }

@media (max-width: 700px) {
  .products-excel-kind-grid,.products-excel-targets { grid-template-columns:1fr; }
  .products-excel-scope-head { grid-template-columns:1fr; }
  .products-excel-scope-footer,.products-excel-scope-footer > div { display:grid; grid-template-columns:1fr; width:100%; }
  .products-excel-scope-footer button { width:100%; }
  .products-excel-affected header { flex-direction:column; }
  .products-excel-affected > div { grid-template-columns:84px minmax(0,1fr); }
  .products-excel-affected > div small { grid-column:2; }
}
.material-stock-modal { width: min(620px, calc(100vw - 32px)); overflow: hidden; padding: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(var(--ds-sidebar-rgb), .24); }
.material-stock-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 26px; background: var(--ds-bg-subtle, #f8fafc); }
.material-stock-form .error-box, .material-stock-form .material-field:last-child { grid-column: 1 / -1; }
.material-stock-readonly-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 10px; background: #fff; }
.material-stock-readonly-price span { color: var(--ds-text-muted); }
.material-average-price-form .material-stock-readonly-price { grid-column: 1 / -1; }
.material-maintenance-actions { display: grid; gap: 10px; }
.material-maintenance-actions button { width: 100%; min-height: 44px; }
.material-maintenance-actions .secondary-button { align-items: center; justify-content: center; text-align: center; }
.material-price-transition { grid-column: 1 / -1; }
.material-price-transition strong { color: var(--ds-primary-strong, #17486d); }
.material-stock-valuation-guidance { display: grid; gap: 5px; min-height: 44px; padding: 12px 14px; border: 1px solid rgba(var(--ds-primary-rgb), .24); border-radius: 10px; background: rgba(var(--ds-primary-rgb), .07); }
.material-stock-valuation-guidance strong { color: var(--ds-primary-strong, #17486d); }
.material-stock-valuation-guidance span { color: var(--ds-text-muted); font-size: 12px; line-height: 1.45; }
.material-stock-note { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(var(--ds-primary-rgb), .07); color: var(--ds-text-muted); line-height: 1.5; }
.material-field-helper { color: var(--ds-text-muted); line-height: 1.45; }
.material-stock-form textarea { min-height: 92px; resize: vertical; }
.material-modal-actions { flex: 0 0 auto; justify-content: flex-end; gap: 12px; margin: 0; padding: 18px 26px; border-top: 1px solid var(--ds-border); background: #fff; box-shadow: 0 -8px 24px rgba(var(--ds-sidebar-rgb), .045); }
.material-modal-actions button { min-width: 96px; }
.material-detail-modal { width: min(1240px, calc(100vw - 32px)); }
.material-detail-tabs { flex:0 0 auto; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.material-detail-content { flex:1 1 auto; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; }
.material-detail-content [class$="-table"],.material-detail-content .table-shell { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }

/* Commit 4A: RN material specification */
.wo-material-specification { display: grid; gap: 20px; min-width: 0; }
.wo-material-specification-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.wo-material-specification-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.wo-material-specification-actions button { min-height: 44px; white-space: nowrap; }
.wo-material-specification-heading small,.wo-material-source-modal > header small,.wo-material-picker-modal > header small,.wo-material-manual-modal > header small { color: #34739b; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.wo-material-specification-heading h3 { margin: 4px 0 6px; color: #102d45; font-size: clamp(1.35rem,2vw,1.75rem); }
.wo-material-specification-heading p,.wo-material-spec-section > header p { margin: 0; color: #60758b; }

/* Commit 5B: final material settlement */
.wo-material-settlement-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid #d7e4ed; border-radius: 15px; background: linear-gradient(145deg,#fff,#f6fafd); box-shadow: 0 9px 24px rgba(20,61,91,.065); }
.wo-material-settlement-banner > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wo-material-settlement-banner svg { width: 22px; flex: 0 0 auto; color: #347aa5; }
.wo-material-settlement-banner span { display: grid; gap: 3px; }
.wo-material-settlement-banner small { color: #60758b; line-height: 1.4; }
.wo-material-settlement-banner.pending { border-color: #efc774; background: linear-gradient(145deg,#fffdf7,#fff8e8); }
.wo-material-settlement-banner.pending svg { color: #a96508; }
.wo-material-settlement-banner.confirmed { border-color: #9bd3b3; background: linear-gradient(145deg,#fff,#effaf4); }
.wo-material-settlement-banner.confirmed svg { color: #167044; }
.modal-panel.flow-modal.wo-material-settlement-modal { width: min(960px,calc(100vw - 48px)); max-height: calc(100dvh - 40px); overflow: hidden; padding: 0; }
.wo-material-settlement-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 20px; }
.settlement-question { min-height: 310px; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; }
.settlement-question > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #edf5fa; color: #28688f; }
.settlement-question svg { width: 25px; }
.settlement-question h3,.settlement-question p { margin: 0; }
.settlement-question p { color: #60758b; }
.settlement-question > div { display: flex; gap: 10px; margin-top: 8px; }
.settlement-editor,.settlement-review { display: grid; gap: 14px; margin-top: 20px; }
.settlement-editor > header,.settlement-review > header { display: grid; gap: 4px; }
.settlement-editor > header h3,.settlement-editor > header p,.settlement-review > header h3,.settlement-review > header p { margin: 0; }
.settlement-editor > header p,.settlement-review > header p { color: #60758b; }
.settlement-editor article,.settlement-review article { display: grid; grid-template-columns: minmax(180px,1.2fr) minmax(130px,.7fr) minmax(150px,.8fr) minmax(220px,1.2fr); align-items: end; gap: 12px; padding: 15px; border: 1px solid #d7e4ed; border-radius: 14px; background: #fff; }
.settlement-material { display: grid; align-self: center; gap: 3px; min-width: 0; }
.settlement-material span { color: #60758b; overflow-wrap: anywhere; }
.settlement-editor dl,.settlement-review dl { margin: 0; }
.settlement-editor dt,.settlement-review dt,.settlement-editor label > span { color: #60758b; font-size: 12px; font-weight: 700; }
.settlement-editor dd,.settlement-review dd { margin: 4px 0 0; font-weight: 800; }
.settlement-editor label { display: grid; gap: 6px; min-width: 0; }
.settlement-editor input { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid #cbdce8; border-radius: 10px; padding: 9px 11px; }
.settlement-review > header { padding: 16px 18px; border: 1px solid #d5e3ec; border-radius: 14px; background: linear-gradient(135deg,#f8fbfd 0%,#edf5f9 100%); }
.settlement-review > header small { color: #31739b; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.settlement-review-list { display: grid; gap: 12px; }
.settlement-review article { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 14px; padding: 0; overflow: hidden; border-color: #cddde8; box-shadow: 0 10px 26px rgba(18,58,87,.075); }
.settlement-review-identity { display: grid; grid-template-columns: minmax(100px,.35fr) minmax(0,1fr); align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #d9e5ed; background: linear-gradient(180deg,#fff 0%,#f7fafc 100%); }
.settlement-review-identity span { width: max-content; max-width: 100%; padding: 5px 9px; border: 1px solid #bfd4e2; border-radius: 7px; background: #eef6fa; color: #17486d; font-size: 12px; font-weight: 850; letter-spacing: .035em; overflow-wrap: anywhere; }
.settlement-review-identity strong { color: #102c43; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.settlement-review article dl { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; padding: 0 16px; }
.settlement-review article dl > div { min-width: 0; min-height: 82px; display: grid; align-content: space-between; gap: 9px; padding: 12px; border: 1px solid #dce7ee; border-radius: 11px; background: #f6f9fb; }
.settlement-review article dl .planned { background: #f2f7fa; color: #244d69; }
.settlement-review article dl .danger { border-color: #f3cbc5; background: #fff3f1; color: #9f2d20; }
.settlement-review article dl .success { border-color: #bfe3cd; background: #effaf4; color: #176b3a; }
.settlement-review article dl .primary { border-color: #bfd9e8; background: #eaf4fa; color: #17486d; }
.settlement-review article dl .variance { background: #f5f3fa; color: #584b79; }
.settlement-review article dt { color: currentColor; font-size: 11px; font-weight: 800; line-height: 1.25; opacity: .82; }
.settlement-review article dd { color: currentColor; font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; text-align: right; white-space: nowrap; }
.settlement-review article dd small { font-size: 11px; font-weight: 750; opacity: .75; }
.settlement-review-notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 16px 16px; }
.settlement-review-notes p { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-left: 3px solid #d5e1e9; border-radius: 8px; background: #f8fafc; color: #526b80; }
.settlement-review-notes p.danger { border-left-color: #dd7365; background: #fff7f5; }
.settlement-review-notes p.success { border-left-color: #55a878; background: #f4fbf7; }
.settlement-review-notes p strong { color: #294b63; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.settlement-review > footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border: 1px solid #d5e3ec; border-radius: 12px; background: #f8fbfd; }
.settlement-review > footer span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid #d5e3ec; border-radius: 999px; background: #fff; color: #49677d; font-size: 12px; font-weight: 750; }
.settlement-review > footer span.danger { border-color: #f0cbc5; background: #fff5f3; color: #9f2d20; }
.settlement-review > footer span.success { border-color: #c4e2cf; background: #f1faf5; color: #176b3a; }
.settlement-cost-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0 16px; }
.settlement-cost-metrics > div { min-width:0; padding:12px; border:1px solid #d7e4ed; border-radius:11px; background:#f7fafc; }
.settlement-cost-metrics > div.danger { border-color:#f3cbc5; background:#fff3f1; color:#9f2d20; }
.settlement-cost-metrics > div.success { border-color:#bfe3cd; background:#effaf4; color:#176b3a; }
.settlement-cost-metrics > div.primary { border-color:#9fc8df; background:#eaf4fa; color:#123e5d; }
.settlement-cost-metrics dt { color:inherit; font-size:11px; font-weight:800; }
.settlement-cost-metrics dd { margin:7px 0 0; color:inherit; font-size:16px; font-weight:900; text-align:right; font-variant-numeric:tabular-nums; }
.settlement-cost-summary { display:grid; gap:5px; padding:16px 18px; border:1px solid #9fc8df; border-radius:14px; background:linear-gradient(135deg,#f3f9fc,#e8f3f8); }
.settlement-cost-summary span { color:#38637e; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.settlement-cost-summary strong { color:#123e5d; font-size:clamp(1.35rem,2.5vw,1.8rem); font-variant-numeric:tabular-nums; }
.settlement-cost-summary small { color:#60758b; }
.settlement-cost-summary.partial { border-color:#e3c778; background:#fffaf0; }
.wo-material-warehouse-guidance { min-height: 0; margin-top: 14px; padding: 18px; }
.wo-material-warehouse-guidance.confirmed { border-color: #9bd3b3; background: #effaf4; }
@media (max-width: 900px) {
  .wo-material-settlement-banner { align-items: stretch; flex-direction: column; }
  .wo-material-settlement-banner > button { width: 100%; }
  .settlement-editor article { grid-template-columns: 1fr 1fr; }
  .settlement-editor article .settlement-material { grid-column: 1 / -1; }
  .settlement-review article dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settlement-cost-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settlement-review-notes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wo-material-settlement-body { padding: 14px; }
  .settlement-editor article { grid-template-columns: 1fr; }
  .settlement-editor article .settlement-material { grid-column: auto; }
  .settlement-review article dl { grid-template-columns: 1fr; }
  .settlement-cost-metrics { grid-template-columns:1fr; }
  .settlement-review-identity { grid-template-columns: 1fr; }
  .settlement-question > div { width: 100%; flex-direction: column; }
  .settlement-question button { width: 100%; min-height: 46px; }
}
.wo-material-spec-section { min-width: 0; padding: 18px; border: 1px solid #ccdeea; border-radius: 17px; background: #fff; box-shadow: 0 12px 30px rgba(20,61,91,.075); }
.wo-material-spec-section > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 15px; }
.wo-material-spec-section > header h3 { margin: 0 0 5px; color: #12364f; }
.wo-material-spec-section > header button { min-height: 44px; }
.wo-material-spec-table { overflow: hidden; border: 1px solid #bdd3df; border-radius: 13px; background: #fff; box-shadow: 0 9px 24px rgba(17,59,88,.065); }
.wo-material-spec-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wo-material-spec-table th { border-right: 1px solid rgba(158,190,208,.3); text-align: center; vertical-align: middle; }
.wo-material-spec-table td { border-top: 1px solid #d8e5ec; border-right: 1px solid rgba(176,201,215,.24); vertical-align: middle; overflow-wrap: anywhere; }
.wo-material-spec-table th:last-child,.wo-material-spec-table td:last-child { border-right: 0; }
.wo-material-spec-table tbody tr { transition: background-color .16s ease,box-shadow .16s ease; }
.wo-material-spec-table tbody tr:hover { background: #f5f9fc; box-shadow: inset 3px 0 0 #77acc8; }
.wo-material-spec-table td.spec-code,.wo-material-spec-table td.spec-name,.wo-material-spec-table td.spec-note { text-align: left; }
.wo-material-spec-table .spec-quantity,.wo-material-spec-table .spec-unit,.wo-material-spec-table .spec-source,.wo-material-spec-table .spec-status,.wo-material-spec-table .spec-actions-cell { text-align: center; }
.wo-material-spec-table .spec-money { text-align: right; }
.wo-material-spec-table .spec-actions-cell .icon-action { margin-inline: auto; }
.wo-material-spec-table .spec-source-count { justify-content: center; margin-inline: auto; }
.wo-material-spec-table .spec-actions { width: fit-content; justify-content: center; gap: 8px; margin-inline: auto; }
.wo-material-spec-table .spec-actions .icon-action { margin-inline: 0; }
.spec-number { font-variant-numeric: tabular-nums; font-weight: 800; }
.spec-source-count,.spec-overlap-badge { display: inline-flex; width: fit-content; padding: 5px 9px; border: 1px solid #c9ddea; border-radius: 999px; background: #f2f8fb; color: #255c7d; font-size: .72rem; font-weight: 800; }
.spec-overlap-badge { margin: 5px 0 0 8px; border-color: #e6d39d; background: #fff9e9; color: #795b17; }
.spec-actions { display: flex; gap: 7px; }
.spec-actions button { min-width: 44px; min-height: 44px; }
.wo-material-spec-cards { display: none; }
.wo-material-spec-empty { display: grid; gap: 5px; padding: 20px; border: 1px dashed #c9dbe7; border-radius: 13px; background: #f8fbfd; color: #587187; text-align: center; }
.wo-material-missing { margin-top: 15px; padding: 14px; border: 1px solid #ead79f; border-radius: 13px; background: #fffbf1; }
.wo-material-missing > header { display: flex; justify-content: space-between; align-items: center; }
.wo-material-missing h4 { margin: 0; color: #6c501b; }
.wo-material-missing > header span { padding: 4px 8px; border-radius: 999px; background: #f5e5b9; font-weight: 850; }
.wo-material-missing > div { display: grid; gap: 8px; margin-top: 10px; }
.wo-material-missing article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding-top: 9px; border-top: 1px solid #eadfbf; }
.wo-material-missing article > div { display: grid; }
.wo-material-missing article em { color: #8a6017; font-size: .78rem; font-style: normal; font-weight: 800; }
.wo-material-source-modal,.wo-material-picker-modal { width: min(860px,calc(100vw - 28px)); max-height: min(86vh,820px); overflow: auto; }
.wo-material-manual-modal { width: min(680px,calc(100vw - 28px)); }
.wo-material-source-modal > header h2,.wo-material-picker-modal > header h2,.wo-material-manual-modal > header h2 { margin: 5px 0; color: #11324a; }
.wo-material-source-list,.wo-material-picker-list { display: grid; gap: 11px; margin: 18px 0; }
.wo-material-source-list article { padding: 15px; border: 1px solid #d5e3ec; border-radius: 13px; background: #fafdff; }
.wo-material-source-list article > header { display: flex; justify-content: space-between; gap: 12px; }
.wo-material-source-list h3 { margin: 3px 0; }
.wo-material-source-list dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.wo-material-source-list dl div { padding: 10px; border-radius: 9px; background: #f0f6fa; }
.wo-material-source-list dl .wide { grid-column: 1 / -1; }
.wo-material-source-list dt { color: #63798c; font-size: .72rem; }
.wo-material-source-list dd { margin: 4px 0 0; color: #173f5e; font-weight: 800; font-variant-numeric: tabular-nums; }
.wo-material-source-list article > button { margin-left: auto; min-height: 44px; }
.wo-material-picker-list { max-height: 380px; overflow: auto; }
.wo-material-picker-list > button { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-height: 55px; padding: 10px 12px; border: 1px solid #d4e1ea; border-radius: 11px; background: #fff; color: #163d59; text-align: left; }
.wo-material-picker-list > button:hover,.wo-material-picker-list > button:focus-visible { border-color: #4d8bb3; background: #f4f9fc; }
.wo-material-picker-list > button span { display: grid; }
.wo-material-picker-list > button small { color: #60758b; }
.wo-material-picker-list > button em,.wo-material-picker-list > button i { font-size: .75rem; font-style: normal; font-weight: 800; }
.wo-material-picker-list > button i { color: #8a6518; }
.wo-material-manual-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin: 18px 0; }
.wo-material-manual-form .wide { grid-column: 1 / -1; }
.wo-material-manual-form textarea { min-height: 100px; }

/* Commit 4B: resolved RN quantities and saved RN prices */
.wo-material-specification-tab,.wo-material-final-section { min-width: 0; max-width: 100%; }
.wo-material-final-section { padding: 20px; border: 1px solid #9fc4da; border-radius: 19px; background: linear-gradient(145deg,#fff,#f4f9fc); box-shadow: 0 18px 42px rgba(17,59,88,.12); }
.wo-material-final-section > header { display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 14px; margin-bottom: 15px; }
.wo-material-final-section > header small { color: #34739b; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.wo-material-final-section > header h3 { margin: 5px 0; color: #102f48; font-size: 1.35rem; }
.wo-material-final-section > header p { margin: 0; color: #60758b; }
.wo-material-cost-summary { display: grid; align-content: center; gap: 4px; padding: 15px 17px; border: 1px solid #aed6c3; border-radius: 15px; background: linear-gradient(145deg,#eefaf4,#fff); }
.wo-material-cost-summary.unresolved { border-color: #e2c779; background: linear-gradient(145deg,#fff8e5,#fff); }
.wo-material-cost-summary.partial,.wo-material-cost-summary.unavailable { border-color: #c8d6df; background: #f6f9fb; }
.wo-material-cost-summary > span { color: #527086; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.wo-material-cost-summary > strong { color: #123e5d; font-size: clamp(1.25rem,2vw,1.7rem); font-variant-numeric: tabular-nums; }
.wo-material-cost-summary > small { color: #657b8d; }
.wo-material-analytics-contract { display:grid; gap:14px; padding:18px; border:1px solid #cfe0e9; border-radius:14px; background:linear-gradient(145deg,#fff,#f5fafc); }
.wo-material-analytics-contract>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.wo-material-analytics-contract>header>div { display:grid; gap:3px; }
.wo-material-analytics-contract>header small { color:#657b8d; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.wo-material-analytics-contract>header strong { color:#123e5d; font-size:1.05rem; }
.wo-material-analytics-contract>header>span { padding:5px 9px; border-radius:999px; color:#176b3a; background:#e8f7ee; font-size:.75rem; font-weight:850; }
.wo-material-analytics-contract.incomplete>header>span { color:#925b0c; background:#fff4d6; }
.wo-material-analytics-contract dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; }
.wo-material-analytics-contract dl>div { display:grid; gap:5px; padding:12px; border:1px solid #dbe7ed; border-radius:10px; background:#fff; }
.wo-material-analytics-contract dt { color:#657b8d; font-size:.76rem; }
.wo-material-analytics-contract dd { margin:0; color:#123e5d; font-weight:850; overflow-wrap:anywhere; }
.wo-material-analytics-contract dl>.emphasis { border-color:#8db8d0; background:#eef7fb; }
.wo-material-analytics-contract>p { margin:0; color:#657b8d; font-size:.82rem; line-height:1.5; }
@media (max-width:700px) { .wo-material-analytics-contract dl { grid-template-columns:1fr 1fr; } }
.wo-material-spec-table.final { border-color: #a9c8d9; box-shadow: 0 10px 28px rgba(17,59,88,.08); }
.wo-material-final-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; border-radius: 13px; }
.wo-material-final-table-scroll:focus-visible { outline: 3px solid rgba(52,124,168,.22); outline-offset: 3px; }
.wo-material-final-table-scroll .wo-material-spec-table.final { min-width: 1040px; }
.wo-material-spec-table.final table { min-width: 1040px; table-layout: fixed; }
.wo-material-spec-table.final .spec-final-code { width: 8%; }
.wo-material-spec-table.final .spec-final-name { width: 18%; }
.wo-material-spec-table.final .spec-final-quantity { width: 8%; text-align: center; }
.wo-material-spec-table.final .spec-final-on-hand { width: 7%; text-align: center; }
.wo-material-spec-table.final .spec-final-availability { width: 12%; text-align: center; }
.wo-material-spec-table.final .spec-final-unit { width: 5%; text-align: center; }
.wo-material-spec-table.final .spec-final-money { width: 11%; text-align: right; }
.wo-material-spec-table.final .spec-final-status { width: 10%; text-align: center; }
.wo-material-spec-table.final .spec-final-actions { width: 8%; text-align: center; }
.wo-material-spec-table.final .spec-actions { justify-content: center; }
.wo-material-spec-table.final .spec-actions { display: flex; align-items: center; gap: 8px; width: fit-content; margin-inline: auto; }
.wo-material-spec-table.final .spec-final-money,.wo-material-spec-table.final .spec-final-unit,.wo-material-spec-table.final .spec-final-actions,.wo-material-spec-table.final .spec-final-availability .spec-availability-badge { white-space: nowrap; }
.wo-material-spec-table.final .spec-final-status .spec-resolution-badge { display: -webkit-box; max-width: 145px; max-height: 2.4em; margin-inline: auto; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; text-align: center; line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: none; }
.wo-material-spec-table.final .spec-final-actions button { flex: 0 0 auto; }
.wo-material-spec-table.final th { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
.wo-material-spec-table.final td.spec-final-money { white-space: nowrap; }
.wo-material-spec-table .spec-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.wo-material-spec-table thead > tr > th[class] { text-align: center; text-transform: none; }
.wo-material-spec-table .spec-money small { display: block; color: #34739b; font-size: .68rem; }
.spec-resolution-badge { display: inline-flex; max-width: 190px; padding: 6px 9px; border: 1px solid #bfd9cb; border-radius: 999px; background: #eff9f4; color: #226245; font-size: .72rem; font-weight: 850; line-height: 1.25; }
.spec-resolution-badge.warning,.spec-overlap-badge.warning { border-color: #e2c779; background: #fff8e5; color: #765515; }
.spec-notes-indicator { display: block; width: fit-content; margin-top: 5px; color: #4f7187; font-size: .7rem; font-weight: 800; }
.wo-material-final-summaries { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 10px; }
.wo-material-final-summaries > section { min-height: 100%; }
.wo-material-availability-summary { display: grid; align-content: center; gap: 4px; padding: 13px 17px; border: 1px solid #b9d4e3; border-radius: 15px; background: linear-gradient(145deg,#eff7fb,#fff); }
.wo-material-availability-summary.complete { border-color: #e2c779; background: linear-gradient(145deg,#fff8e5,#fff); }
.wo-material-availability-summary.none_required { border-color: #aed6c3; background: linear-gradient(145deg,#eefaf4,#fff); }
.wo-material-availability-summary.unresolved,.wo-material-availability-summary.partial { border-color: #c8d6df; background: #f6f9fb; }
.wo-material-availability-summary > span { color: #527086; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.wo-material-availability-summary > strong { color: #123e5d; font-size: 1.22rem; font-variant-numeric: tabular-nums; }
.wo-material-availability-summary > small { color: #657b8d; }
.spec-availability-badge { display: inline-flex; justify-content: center; max-width: 180px; padding: 6px 9px; border: 1px solid #c7d7e0; border-radius: 999px; background: #f4f7f9; color: #526b7d; font-size: .7rem; font-weight: 850; line-height: 1.25; }
.spec-availability-badge.sufficient { border-color: #b7d9c8; background: #edf9f3; color: #1f6847; }
.spec-availability-badge.shortage { border-color: #e3c879; background: #fff8e4; color: #765515; }
.spec-min-warning { display: block; margin-top: 5px; color: #8a6518; font-size: .68rem; font-weight: 800; }
.wo-material-card-availability { display: grid; justify-items: start; gap: 3px; }
.wo-material-procurement { min-width: 0; padding: 19px; border: 1px solid #c5dbe7; border-radius: 17px; background: linear-gradient(145deg,#fff,#f5f9fc); box-shadow: 0 12px 30px rgba(17,59,88,.08); }
.wo-material-procurement > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.wo-material-procurement > header small { color: #34739b; font-weight: 850; text-transform: uppercase; letter-spacing: .045em; }
.wo-material-procurement h3 { margin: 4px 0; color: #123a56; }
.wo-material-procurement p { margin: 0; color: #61788b; }
.wo-material-procurement.empty { padding: 15px 18px; }
.wo-material-procurement.empty.complete { border-color: #b7d9c8; background: #f1faf5; }
.wo-material-procurement.empty.unresolved { border-color: #e2c779; background: #fffaf0; }
.wo-material-procurement-actions { display: flex; flex: 0 0 auto; gap: 9px; }
.wo-material-procurement-actions button { min-height: 44px; }
.wo-material-procurement-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; border-radius: 13px; }
.wo-material-procurement-table-scroll .wo-material-spec-table.procurement { min-width: 1120px; }
.wo-material-final-section > header > div > small,
.wo-material-final-section > header > div > p { display: none; }
.wo-material-spec-table.procurement .procurement-code { width: 8%; }
.wo-material-spec-table.procurement .procurement-name { width: 20%; }
.wo-material-spec-table.procurement .procurement-required { width: 9%; }
.wo-material-spec-table.procurement .procurement-on-hand { width: 8%; }
.wo-material-spec-table.procurement .procurement-shortage { width: 9%; }
.wo-material-spec-table.procurement .procurement-minimum { width: 8%; }
.wo-material-spec-table.procurement .procurement-replenishment { width: 9%; }
.wo-material-spec-table.procurement .procurement-total { width: 10%; }
.wo-material-spec-table.procurement .procurement-unit { width: 5%; }
.wo-material-spec-table.procurement .procurement-supplier { width: 14%; }
.wo-material-spec-section:not(.manual):not(.scrap-evidence-section) > .wo-material-spec-table .spec-code { width: 10%; }
.wo-material-spec-section:not(.manual):not(.scrap-evidence-section) > .wo-material-spec-table .spec-name { width: 48%; }
.wo-material-spec-section:not(.manual):not(.scrap-evidence-section) > .wo-material-spec-table .spec-quantity { width: 16%; }
.wo-material-spec-section:not(.manual):not(.scrap-evidence-section) > .wo-material-spec-table .spec-unit { width: 7%; }
.wo-material-spec-section:not(.manual):not(.scrap-evidence-section) > .wo-material-spec-table .spec-source { width: 12%; }
.wo-material-spec-section:not(.manual):not(.scrap-evidence-section) > .wo-material-spec-table .spec-actions-cell { width: 7%; }
.wo-material-spec-section.manual > .wo-material-spec-table .spec-code { width: 10%; }
.wo-material-spec-section.manual > .wo-material-spec-table .spec-name { width: 35%; }
.wo-material-spec-section.manual > .wo-material-spec-table .spec-quantity { width: 12%; }
.wo-material-spec-section.manual > .wo-material-spec-table .spec-unit { width: 7%; }
.wo-material-spec-section.manual > .wo-material-spec-table .spec-note { width: 22%; }
.wo-material-spec-section.manual > .wo-material-spec-table .spec-actions-cell { width: 14%; }
.wo-material-spec-table.procurement th { max-width: 150px; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
.wo-material-spec-table.procurement td.spec-quantity,.wo-material-spec-table.procurement td.spec-unit { white-space: nowrap; }
.wo-material-spec-table.procurement .procurement-total { color: #123e5d; font-weight: 900; }
.spec-procurement-warning { display: block; margin-top: 7px; color: #8a6518; font-size: .78rem; font-weight: 800; }
.wo-material-spec-table.procurement .shortage { color: #8a6518; font-weight: 900; }
.wo-material-procurement-cards { display: none; }
.wo-material-procurement-card { display: grid; gap: 11px; min-width: 0; padding: 14px; border: 1px solid #d4e3ec; border-radius: 13px; background: #fff; }
.wo-material-procurement-card header h4 { margin: 3px 0 0; color: #153d59; }
.wo-material-procurement-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.wo-material-procurement-card dl div { padding: 9px; border-radius: 9px; background: #eef5f9; }
.wo-material-procurement-card dl .wide { grid-column: 1 / -1; }
.wo-material-procurement-card dt { color: #60758b; font-size: .72rem; }
.wo-material-procurement-card dd { margin: 4px 0 0; color: #173e59; font-weight: 850; overflow-wrap: anywhere; }
.wo-material-final-cards { display: none; }
.wo-material-warehouse-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.wo-material-warehouse-summary article { display: grid; gap: 4px; min-width: 0; padding: 11px 13px; border: 1px solid #cbdfe9; border-radius: 11px; background: #fff; }
.wo-material-warehouse-summary span { color: #60758b; font-size: .76rem; }
.wo-material-warehouse-summary strong { color: #153d59; font-size: 1.02rem; }
.spec-warehouse-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; border: 1px solid #cadde8; border-radius: 999px; background: #f3f8fb; color: #315a73; font-size: .72rem; font-weight: 850; text-align: center; }
.spec-warehouse-badge.reserved,.spec-warehouse-badge.issued,.spec-warehouse-badge.settled { border-color: #add5c0; background: #eff9f4; color: #226245; }
.spec-warehouse-badge.partially_reserved,.spec-warehouse-badge.partially_issued,.spec-warehouse-badge.scrapped { border-color: #e2c779; background: #fff8e5; color: #765515; }
.wo-material-card-warehouse { display: flex; justify-content: flex-start; }
.wo-material-warehouse-modal { width: min(820px,calc(100vw - 32px)); max-height: min(880px,calc(100dvh - 32px)); overflow-y: auto; }
.wo-material-warehouse-modal > header { padding-right: 54px; }
.wo-material-warehouse-status { display: flex; justify-content: flex-start; margin: 15px 0 12px; }
.wo-material-warehouse-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0; }
.wo-material-warehouse-metrics > div { min-width: 0; padding: 11px; border: 1px solid #d5e3eb; border-radius: 11px; background: #f5f9fb; }
.wo-material-warehouse-metrics dt { color: #60758b; font-size: .72rem; }
.wo-material-warehouse-metrics dd { margin: 5px 0 0; color: #153d59; font-weight: 850; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wo-material-warehouse-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.wo-material-warehouse-actions button { min-height: 44px; }
.wo-material-warehouse-form { display: grid; gap: 12px; margin-top: 16px; padding: 15px; border: 1px solid #cbdfe9; border-radius: 13px; background: #fff; }
.wo-material-warehouse-form label { display: grid; gap: 6px; color: #435d70; font-size: .8rem; font-weight: 750; }
.wo-material-warehouse-form input,.wo-material-warehouse-form textarea { width: 100%; min-height: 44px; box-sizing: border-box; }
.wo-material-warehouse-form textarea { min-height: 88px; resize: vertical; }
.wo-material-warehouse-form .primary-button { justify-self: end; min-height: 44px; }
.wo-material-warehouse-close { margin-top: 16px; }
.wo-material-resolution-modal,.wo-material-price-modal { width: min(720px,calc(100vw - 28px)); }
.wo-material-resolution-modal > header h2,.wo-material-price-modal > header h2 { margin: 5px 0; color: #11324a; }
.wo-material-resolution-basis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 17px 0; }
.wo-material-resolution-basis > div,.wo-material-price-current { display: grid; gap: 4px; padding: 14px; border: 1px solid #d4e3ec; border-radius: 12px; background: #f5f9fc; }
.wo-material-resolution-basis span,.wo-material-price-current span { color: #60758b; font-size: .76rem; font-weight: 800; }
.wo-material-resolution-basis strong,.wo-material-price-current strong { color: #153d59; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.wo-material-resolution-options { display: grid; gap: 9px; margin-bottom: 14px; }
.wo-material-resolution-option { display: grid; gap: 3px; min-height: 68px; padding: 12px 14px; border: 1px solid #cedee8; border-radius: 12px; background: #fff; color: #173d58; text-align: left; cursor: pointer; }
.wo-material-resolution-option:hover,.wo-material-resolution-option:focus-visible,.wo-material-resolution-option.selected { border-color: #347ca8; background: #eff7fb; box-shadow: 0 0 0 3px rgba(52,124,168,.12); }
.wo-material-resolution-option span { color: #60758b; font-size: .8rem; }
.wo-material-resolution-option em { color: #2c688e; font-size: .78rem; font-style: normal; font-weight: 850; }
.wo-material-price-current { margin: 17px 0 13px; }
.wo-material-price-modal textarea { min-height: 90px; }
.wo-material-price-restore { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 12px; border: 1px solid #d7e3eb; border-radius: 11px; background: #f8fbfd; }

@media (max-width: 980px) {
  .wo-material-spec-table { display: none; }
  .wo-material-spec-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .wo-material-spec-card { min-width: 0; padding: 14px; border: 1px solid #d5e3ec; border-radius: 13px; background: #fafdff; }
  .wo-material-spec-card > header { display: flex; justify-content: space-between; gap: 10px; }
  .wo-material-spec-card h4 { margin: 3px 0; color: #153d59; }
  .wo-material-spec-card > header > span { align-self: flex-start; color: #527188; font-size: .74rem; font-weight: 800; }
  .wo-material-spec-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .wo-material-spec-card dl div { padding: 9px; border-radius: 9px; background: #eef5f9; }
  .wo-material-spec-card dl .wide { grid-column: 1 / -1; }
  .wo-material-spec-card dt { color: #60758b; font-size: .72rem; }
  .wo-material-spec-card dd { margin: 4px 0 0; font-weight: 800; overflow-wrap: anywhere; }
  .wo-material-spec-card > button,.wo-material-spec-card footer button { min-height: 44px; }
  .wo-material-spec-card footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wo-material-final-section > header { grid-template-columns: 1fr; }
  .wo-material-final-table-scroll { display: block; }
  .wo-material-final-cards { display: none; }
  .wo-material-procurement > header { flex-direction: column; }
  .wo-material-procurement-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .wo-material-spec-card.manual footer { grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); }
}

@media (max-width: 600px) {
  .wo-material-specification-heading,.wo-material-spec-section > header { flex-direction: column; align-items: stretch; }
  .wo-material-specification-actions { display: grid; width: 100%; }
  .wo-material-specification-actions button { width: 100%; justify-content: center; }
  .wo-material-spec-cards { grid-template-columns: 1fr; }
  .wo-material-final-cards,.wo-material-resolution-basis { grid-template-columns: 1fr; }
  .wo-material-final-summaries { grid-template-columns: 1fr; }
  .wo-material-procurement { padding: 14px 11px; }
  .wo-material-procurement-actions { display: grid; width: 100%; }
  .wo-material-procurement-cards { grid-template-columns: 1fr; }
  .wo-material-spec-section { padding: 13px 11px; }
  .wo-material-spec-section > header button { width: 100%; justify-content: center; }
  .wo-material-missing article { grid-template-columns: 1fr; gap: 5px; }
  .wo-material-source-modal,.wo-material-picker-modal,.wo-material-manual-modal { width: 100vw; max-width: 100vw; min-height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .wo-material-resolution-modal,.wo-material-price-modal { width: 100vw; max-width: 100vw; min-height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .wo-material-price-restore { align-items: stretch; flex-direction: column; }
  .wo-material-source-list article > header { flex-direction: column; }
  .wo-material-source-list dl,.wo-material-manual-form { grid-template-columns: 1fr; }
  .wo-material-manual-form .wide { grid-column: auto; }
  .wo-material-picker-list > button { grid-template-columns: 1fr auto; }
  .wo-material-picker-list > button i { grid-column: 1 / -1; }
}
.material-detail-tabs { display: flex; flex: 0 0 auto; gap: 6px; padding: 10px 26px 0; border-bottom: 1px solid var(--ds-border); background: #fff; }
.material-detail-tabs button { min-height: 44px; padding: 0 15px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ds-text-muted); font: inherit; font-weight: 800; cursor: pointer; }
.material-detail-tabs button[aria-selected="true"] { border-bottom-color: var(--ds-primary); color: var(--ds-primary-strong, #17486d); }
.material-detail-content { min-height: 360px; overflow-y: auto; padding: 22px 26px 24px; background: var(--ds-bg-subtle, #f8fafc); }
.material-detail-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.material-detail-panel-head h3, .material-detail-panel-head p { margin: 0; }
.material-detail-panel-head > div { display: grid; gap: 5px; }
.material-detail-panel-head p { color: var(--ds-text-muted); }
.material-receipts-panel, .material-history-panel { background: linear-gradient(150deg, #f8fbfd 0%, #f3f7fa 100%); }
.material-receipts-table, .material-history-table { width: 100%; border: 1px solid rgba(var(--ds-primary-rgb), .18); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(var(--ds-sidebar-rgb), .07); }
.material-receipts-table table, .material-history-table table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.material-receipts-table th, .material-receipts-table td, .material-history-table th, .material-history-table td { border-bottom: 1px solid var(--ds-border); overflow-wrap: anywhere; text-align: left; vertical-align: middle; }
.material-receipts-table tr:last-child td, .material-history-table tr:last-child td { border-bottom: 0; }
.material-receipt-row, .material-history-row { transition: background-color .16s ease, box-shadow .16s ease; }
.material-receipt-row:hover, .material-history-row:hover { background: rgba(var(--ds-primary-rgb), .045); box-shadow: inset 3px 0 0 rgba(var(--ds-primary-rgb), .42); }
.material-receipts-table .material-actions { flex-wrap: nowrap; justify-content: flex-start; }
.material-receipts-table th:last-child, .material-receipts-table td:last-child { width: 128px; }
.material-receipts-table .sort-header, .material-history-table .sort-header { min-width: 0; width: 100%; justify-content: space-between; padding: 3px 2px; text-align: left; border-radius: 7px; }
.material-receipts-table .sort-header:hover, .material-history-table .sort-header:hover, .material-receipts-table .sort-header:focus-visible, .material-history-table .sort-header:focus-visible { background: rgba(var(--ds-primary-rgb), .09); outline: 2px solid rgba(var(--ds-primary-rgb), .2); outline-offset: 1px; }
.material-receipt-actions-cell { vertical-align: middle !important; }
.material-icon-action { width: 36px; min-width: 36px; height: 36px; min-height: 36px; display: inline-grid; place-items: center; border-radius: 10px; }
.material-icon-action svg { width: 17px; height: 17px; }
.material-icon-action:focus-visible { outline: 3px solid rgba(var(--ds-primary-rgb), .24); outline-offset: 2px; }
.material-history-actor-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.material-history-table th:nth-last-child(-n+7), .material-history-table td:nth-last-child(-n+7) { font-variant-numeric: tabular-nums; }
.material-receipt-cards, .material-history-cards { display: none; }
.material-detail-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.material-detail-pagination > div { display: flex; gap: 8px; }
.material-detail-pagination button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.material-receipt-sort-controls { display: none; }
.material-event-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.material-event-detail-grid > div { min-width: 0; display: grid; gap: 5px; padding: 13px 14px; border: 1px solid rgba(var(--ds-primary-rgb), .14); border-radius: 12px; background: #f8fbfd; }
.material-event-detail-grid > div.wide { grid-column: 1 / -1; }
.material-event-detail-grid span { color: var(--ds-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.material-event-detail-grid strong { overflow-wrap: anywhere; line-height: 1.45; }
.material-event-refs { display: grid; gap: 8px; }
.material-event-refs > span { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-items: center; padding: 9px 10px; border-radius: 9px; background: #fff; text-transform: none; }
.material-event-refs > span svg { grid-row: 1 / 3; width: 18px; height: 18px; }
.material-event-refs > span small { color: var(--ds-text-muted); overflow-wrap: anywhere; }
.material-event-empty { margin: 0; color: var(--ds-text-muted); font-weight: 600; }
.material-receipt-form-panel { display: flex; flex-direction: column; padding-bottom: 0; background: linear-gradient(150deg, #f8fbfd 0%, #f2f7fa 100%); }
.material-receipt-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 18px; padding: 24px; border: 1px solid rgba(var(--ds-primary-rgb), .2); border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(var(--ds-sidebar-rgb), .09), inset 0 1px 0 rgba(255,255,255,.9); }
.material-receipt-form .material-field { min-width: 0; align-content: start; }
.material-receipt-form .material-field > span { min-height: 18px; }
.material-receipt-form input, .material-receipt-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.material-receipt-form input { min-height: 46px; }
.material-receipt-date-field, .material-receipt-supplier-field { grid-column: span 2; align-self: start; }
.material-receipt-quantity-field, .material-receipt-unit-field, .material-receipt-price-field, .material-receipt-currency-field { grid-column: span 1; }
.material-receipt-document-field { grid-column: span 1; max-width: 300px; }
.material-receipt-note-field { grid-column: span 3; }
.material-receipt-form input[readonly] { border-color: rgba(var(--ds-primary-rgb), .14); background: #f5f8fa; color: var(--ds-primary-strong, #17486d); font-weight: 750; }
.material-receipt-form textarea { min-height: 92px; resize: vertical; }
.material-receipt-form-panel > .material-modal-actions { margin: auto -26px 0; }
.material-receipt-local-actions { display: flex; justify-content: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ds-border); }
.material-receipt-form-actions { gap: 12px; padding-block: 18px; box-shadow: 0 -10px 26px rgba(var(--ds-sidebar-rgb), .055); }
.material-receipt-form-actions button { min-width: 132px; min-height: 44px; }
.material-documents-panel { background: linear-gradient(150deg, #f8fbfd 0%, #f2f7fa 100%); }
.material-document-limit { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid rgba(var(--ds-primary-rgb), .18); border-radius: 999px; background: #fff; color: var(--ds-primary-strong, #17486d); font-weight: 800; }
.material-documentation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.material-document-section { min-width: 0; padding: 18px; border: 1px solid rgba(var(--ds-primary-rgb), .17); border-radius: 17px; background: #fff; box-shadow: 0 14px 34px rgba(var(--ds-sidebar-rgb), .075); }
.material-document-section > header, .material-receipt-attachments > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.material-document-section > header { margin-bottom: 16px; }
.material-document-section h4, .material-receipt-attachments h4 { margin: 0; color: var(--ds-primary-strong, #17486d); font-size: 16px; }
.material-document-section header p, .material-receipt-attachments header p { margin: 4px 0 0; color: var(--ds-text-muted); font-size: 12px; }
.material-document-upload-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.material-document-upload-actions select { max-width: 170px; min-height: 42px; }
.material-document-list { display: grid; gap: 12px; }
.material-document-card { min-width: 0; padding: 14px; border: 1px solid rgba(var(--ds-primary-rgb), .14); border-radius: 14px; background: linear-gradient(145deg, #fff 0%, #f9fcfd 100%); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.material-document-card:hover { border-color: rgba(var(--ds-primary-rgb), .32); box-shadow: 0 9px 24px rgba(var(--ds-sidebar-rgb), .08); transform: translateY(-1px); }
.material-document-card > header { display: flex; align-items: center; gap: 11px; min-width: 0; }
.material-document-card > header > div { min-width: 0; display: grid; gap: 3px; }
.material-document-card strong, .material-receipt-attachment strong, .material-receipt-detail-attachments strong { overflow-wrap: anywhere; }
.material-document-card small, .material-receipt-attachment small { color: var(--ds-text-muted); }
.material-document-type { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(var(--ds-primary-rgb), .1); color: var(--ds-primary-strong, #17486d); }
.material-document-type svg, .material-receipt-attachment-count svg { width: 18px; height: 18px; }
.material-document-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; margin: 14px 0 0; }
.material-document-card dl div { min-width: 0; display: grid; gap: 2px; }
.material-document-card dt { color: var(--ds-text-muted); font-size: 11px; }
.material-document-card dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; }
.material-document-card > p { margin: 12px 0 0; padding: 10px; border-radius: 10px; background: rgba(var(--ds-primary-rgb), .045); overflow-wrap: anywhere; }
.material-document-card footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-border); }
.material-document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.material-document-actions .icon-action { width: 42px; min-width: 42px; height: 42px; }
.material-document-link-select { min-width: 0; flex: 1 1 180px; min-height: 42px; }
.material-receipt-attachment-count { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; color: var(--ds-text-muted); }
.material-receipt-attachments { grid-column: 1 / -1; min-width: 0; margin-top: 2px; padding: 16px; border: 1px dashed rgba(var(--ds-primary-rgb), .28); border-radius: 14px; background: rgba(var(--ds-primary-rgb), .025); }
.material-receipt-attachment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.material-receipt-attachment { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(var(--ds-primary-rgb), .14); border-radius: 12px; background: #fff; }
.material-receipt-attachment-meta { min-width: 0; display: grid; gap: 3px; }
.material-receipt-detail-attachments { display: grid; gap: 9px; margin-top: 8px; }
.material-receipt-detail-attachments article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--ds-border); border-radius: 10px; }
.material-receipt-detail-attachments article > div { min-width: 0; display: grid; gap: 2px; }
.status-pill.receipt-confirmed { background: #e8f7ee; color: #176b3a; }
.status-pill.receipt-reversed { background: #fdecec; color: #9b1c1c; }

@media (max-width: 1366px) and (min-width: 1051px) {
  .materials-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .materials-search { grid-column: span 2; }
  .materials-head, .materials-settings-note, .materials-pagination { min-width: 0; max-width: 100%; }
}

@media (max-width: 1050px) {
  .wo-material-warehouse-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wo-material-warehouse-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .material-documentation-grid { grid-template-columns: 1fr; }
  .materials-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .materials-search { grid-column: span 2; }
  .materials-table { display: none; }
  .materials-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .material-card { min-width: 0; display: grid; gap: 14px; border: 1px solid var(--ds-border); border-radius: 14px; padding: 16px; background: var(--ds-surface, #fff); }
  .material-card header, .material-card footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .material-card h3 { margin: 4px 0 0; font-size: 16px; overflow-wrap: anywhere; }
  .material-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .material-card dl div { min-width: 0; display: grid; gap: 3px; }
  .material-card dl .material-card-group-start { padding-top: 10px; border-top: 1px solid rgba(var(--ds-primary-rgb), .14); }
  .material-card dt { font-size: 11px; color: var(--ds-text-muted); }
  .material-card dd { margin: 0; overflow-wrap: anywhere; }
  .material-action-button { min-height: 44px !important; }
  .material-modal-body { grid-template-columns: 1fr; }
  .material-detail-modal { width: min(940px, calc(100vw - 24px)); }
  .material-receipts-table, .material-history-table { display: none; }
  .material-receipt-cards, .material-history-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .material-receipt-card, .material-history-card { min-width: 0; display: grid; gap: 14px; padding: 16px; border: 1px solid rgba(var(--ds-primary-rgb), .16); border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(var(--ds-sidebar-rgb), .07); }
  .material-receipt-card header, .material-receipt-card footer, .material-history-card header, .material-history-card footer { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .material-receipt-card header > div, .material-history-card header > div { min-width: 0; display: grid; gap: 4px; }
  .material-receipt-card dl, .material-history-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
  .material-receipt-card dl div, .material-history-card dl div { min-width: 0; display: grid; gap: 3px; }
  .material-receipt-card dt, .material-history-card dt { color: var(--ds-text-muted); font-size: 11px; }
  .material-receipt-card dd, .material-history-card dd { margin: 0; overflow-wrap: anywhere; }
  .material-receipt-card button, .material-history-card button, .material-detail-tabs button { min-height: 44px; }
  .material-receipt-card .material-icon-action, .material-history-card .material-icon-action { width: 44px; min-width: 44px; }
  .material-receipt-sort-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
  .material-receipt-sort-controls label { display: grid; gap: 6px; color: var(--ds-text-muted); font-size: 12px; font-weight: 750; }
  .material-receipt-sort-controls select { min-width: 0; width: 100%; min-height: 44px; }
  .material-receipt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-receipt-attachment-list { grid-template-columns: 1fr; }
  .material-receipt-date-field, .material-receipt-supplier-field, .material-receipt-quantity-field, .material-receipt-unit-field, .material-receipt-price-field, .material-receipt-currency-field, .material-receipt-document-field { grid-column: span 1; max-width: none; }
  .material-receipt-note-field { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .wo-material-final-table-scroll { display: none; }
  .wo-material-final-cards { display: grid; grid-template-columns: 1fr; gap: 11px; }
  .wo-material-warehouse-summary,.wo-material-warehouse-metrics { grid-template-columns: 1fr; }
  .wo-material-warehouse-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .wo-material-warehouse-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wo-material-warehouse-actions button,.wo-material-warehouse-form .primary-button { width: 100%; }
  .materials-head, .materials-settings-note, .materials-pagination { align-items: stretch; display: grid; }
  .materials-head-actions { display: grid; grid-template-columns: 1fr; }
  .materials-head-actions button { width: 100%; }
  .materials-settings-note span { margin-left: 0; }
  .materials-toolbar { grid-template-columns: 1fr 1fr; }
  .materials-search { grid-column: 1 / -1; }
  .materials-table { display: none; }
  .materials-cards { grid-template-columns: 1fr; gap: 12px; }
  .material-modal-backdrop { padding: 0; }
  .material-modal, .material-stock-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .material-detail-modal { width: 100vw; max-width: 100vw; }
  .material-modal-header { padding: 20px; }
  .material-modal-body { grid-template-columns: 1fr; padding: 16px; }
  .material-stock-form { grid-template-columns: 1fr; padding: 18px; }
  .material-stock-form .material-field { grid-column: 1; }
  .material-form-grid { grid-template-columns: 1fr; padding: 16px; }
  .material-field { grid-column: auto !important; }
  .material-modal-actions { padding: 15px 18px; }
  .material-modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .material-modal-actions button, .material-stock-form input, .material-stock-form textarea { min-width: 0; width: 100%; min-height: 44px; box-sizing: border-box; }
  .material-detail-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 6px 10px 0; overflow: visible; }
  .material-detail-tabs button { min-width: 0; width: 100%; padding: 0 7px; font-size: 12px; }
  .material-detail-content { min-height: 0; padding: 16px; }
  .material-detail-panel-head { display: grid; }
  .material-detail-panel-head button { width: 100%; min-height: 44px; }
  .material-receipt-cards, .material-history-cards { grid-template-columns: 1fr; gap: 12px; }
  .material-receipt-form { grid-template-columns: 1fr; padding: 15px; }
  .material-receipt-form .material-field { grid-column: 1; }
  .material-receipt-form input, .material-receipt-form textarea { min-width: 0; width: 100%; min-height: 44px; box-sizing: border-box; }
  .material-document-section { padding: 14px; }
  .material-document-section > header, .material-receipt-attachments > header { display: grid; grid-template-columns: 1fr; }
  .material-document-upload-actions { justify-content: stretch; }
  .material-document-upload-actions button, .material-document-upload-actions select { min-width: 0; max-width: none; flex: 1 1 130px; min-height: 44px; }
  .material-document-card dl { grid-template-columns: 1fr; }
  .material-receipt-attachment { grid-template-columns: 40px minmax(0, 1fr); }
  .material-receipt-attachment .material-document-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .material-receipt-form-panel > .material-modal-actions { margin: auto -16px 0; }
  .material-detail-pagination { display: grid; }
  .material-detail-pagination > div { display: grid; grid-template-columns: 1fr 1fr; }
  .material-detail-pagination button { min-width: 0; width: 100%; min-height: 44px; }
  .material-receipt-sort-controls { grid-template-columns: 1fr; }
  .material-event-detail-grid { grid-template-columns: 1fr; }
  .material-event-detail-grid > div.wide { grid-column: 1; }
  .materials-excel-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .materials-excel-body { padding: 16px; }
  .materials-excel-topbar { grid-template-columns: 1fr; }
  .materials-excel-topbar > button { justify-self: end; }
  .materials-excel-workflow { justify-content: flex-start; }
  .materials-excel-import-grid,.materials-excel-export-list { grid-template-columns: 1fr; }
  .materials-excel-tool-card footer { grid-template-columns: 1fr; }
  .materials-excel-group > header { display: grid; gap: 4px; }
  .materials-excel-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .materials-excel-preview-list article { grid-template-columns: 1fr; gap: 5px; }
  .materials-excel-footer { display: grid; grid-template-columns: 1fr 1fr; padding: 13px 16px; }
  .materials-excel-footer button { min-width: 0; width: 100%; }
}

/* Saved multi-work-order consolidated analytics. */
.consolidated-home, .consolidated-editor, .consolidated-detail { display: grid; gap: 18px; }
.consolidated-page-head, .consolidated-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.consolidated-page-head h2, .consolidated-page-head p, .consolidated-detail-head h2, .consolidated-detail-head p { margin: 0; }
.consolidated-page-head > div, .consolidated-detail-head > div { display: grid; gap: 5px; min-width: 0; }
.consolidated-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.consolidated-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.consolidated-title-line h2 { overflow-wrap: anywhere; font-size: 1.25rem; }
.consolidated-title-line .status-badge { flex-shrink: 0; }
.consolidated-page-head small, .consolidated-detail-head small { color: var(--ds-text-muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.consolidated-toolbar label, .consolidated-candidate-tools label { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; border: 1px solid var(--ds-border); border-radius: 10px; background: #fff; }
.consolidated-toolbar input, .consolidated-candidate-tools input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; }
.consolidated-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--ds-border); border-radius: 11px; background: #fff; }
.consolidated-card { position: relative; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(300px, 1.2fr); align-items: center; gap: 10px 24px; min-width: 0; padding: 15px 18px; border-bottom: 1px solid var(--ds-border); background: #fff; }
.consolidated-card:last-child { border-bottom: 0; }
.consolidated-card:hover, .consolidated-card:focus-within { background: #f5f9fc; }
.consolidated-card-open { padding: 0; border: 0; background: transparent; color: var(--ds-text); font: inherit; font-size: .95rem; font-weight: 650; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.consolidated-card-open::after { position: absolute; inset: 0; content: ""; }
.consolidated-card-open:focus-visible { outline: none; }
.consolidated-card-open:focus-visible::after { outline: 2px solid var(--ds-primary); outline-offset: -3px; border-radius: 8px; }
.consolidated-card header, .consolidated-card footer, .consolidated-shared-costs > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.consolidated-card h3, .consolidated-card p, .consolidated-card dl { margin: 0; }
.consolidated-card header div { display: grid; gap: 3px; min-width: 0; }
.consolidated-card header small, .consolidated-card p { color: var(--ds-text-muted); }
.consolidated-card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.consolidated-card dl div { display: grid; gap: 4px; min-width: 0; }
.consolidated-card dt { color: var(--ds-text-muted); font-size: .75rem; }
.consolidated-card dd { margin: 0; font-size: .82rem; font-weight: 550; overflow-wrap: anywhere; }
.analytics-work-order-card .consolidated-saved-margin dd { font-size: 19px; line-height: 1.2; font-weight: 750; }
.analytics-work-order-card .consolidated-saved-margin.neutral dd { font-size: 12px; font-weight: 500; }
.consolidated-editor-grid { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.7fr); align-items: start; gap: 16px; }
.consolidated-editor-grid > article { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--ds-border); border-radius: 11px; background: #fff; }
.consolidated-editor-grid h3 { margin: 0; font-size: .95rem; font-weight: 650; }
.consolidated-editor .consolidated-page-head p { color: var(--ds-text-muted); font-size: .85rem; }
.consolidated-metadata-card label, .consolidated-period-fields label, .consolidated-cost-form label { display: grid; gap: 6px; color: var(--ds-text-muted); font-size: .82rem; font-weight: 650; }
.consolidated-metadata-card input, .consolidated-metadata-card textarea, .consolidated-period-fields input, .consolidated-period-fields select, .consolidated-candidate-tools select, .consolidated-cost-form input, .consolidated-cost-form textarea, .consolidated-cost-form select { width: 100%; min-height: 42px; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--ds-border); border-radius: 9px; background: #fff; color: var(--ds-text); }
.consolidated-metadata-card textarea, .consolidated-cost-form textarea { resize: vertical; }
.consolidated-metadata-card textarea { min-height: 96px; }
.consolidated-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.consolidated-mode legend { margin-bottom: 6px; padding: 0; color: var(--ds-text-muted); font-size: .8rem; font-weight: 700; }
.consolidated-mode label { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--ds-border); border-radius: 9px; background: #fff; cursor: pointer; }
.consolidated-mode label:has(input:checked) { border-color: var(--ds-primary); background: #f1f7fb; color: var(--ds-primary); font-weight: 750; }
.consolidated-mode input { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px !important; max-height: 16px; margin: 0; padding: 0; accent-color: var(--ds-primary); }
.consolidated-candidate-row input[type="checkbox"], .consolidated-pdf-options input[type="checkbox"] { flex: 0 0 16px; width: 16px; min-width: 16px; max-width: 16px; height: 16px; min-height: 16px !important; max-height: 16px; margin: 0; padding: 0; accent-color: var(--ds-primary); }
.consolidated-period-fields { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(2, minmax(140px, 1fr)) auto; align-items: end; gap: 10px; }
.consolidated-candidate-tools { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(170px, auto) auto; align-items: center; gap: 10px; }
.consolidated-candidates { display: grid; gap: 0; max-height: 470px; overflow: auto; border: 1px solid var(--ds-border); border-radius: 9px; }
.consolidated-candidate-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 11px 12px; border-bottom: 1px solid var(--ds-border); background: #fff; cursor: pointer; font-size: .85rem; }
.consolidated-candidate-row:last-child { border-bottom: 0; }
.consolidated-candidate-row:hover, .consolidated-candidate-row:has(input:checked) { background: #f1f7fb; }
.consolidated-candidate-row:focus-within { outline: 2px solid var(--ds-primary); outline-offset: -2px; }
.consolidated-candidate-row > span { display: grid; gap: 3px; min-width: 0; }
.consolidated-candidate-row strong { font-weight: 650; overflow-wrap: anywhere; }
.consolidated-candidate-row small { color: var(--ds-text-muted); overflow-wrap: anywhere; }
.consolidated-candidate-row em { font-style: normal; font-size: .75rem; font-weight: 500; }
.consolidated-selected-card, .consolidated-documentation-editor { grid-column: 1 / -1; }
.consolidated-selected-card > div, .consolidated-rn-list > div, .consolidated-cost-entry > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ds-border); }
.consolidated-selected-card > div > span, .consolidated-cost-entry > div:first-child > span { display: grid; gap: 2px; min-width: 0; }
.consolidated-selected-card small, .consolidated-cost-list small { color: var(--ds-text-muted); }
.consolidated-editor-actions { display: flex; justify-content: flex-end; gap: 10px; }
.consolidated-selection-empty { margin: 0; color: var(--ds-text-muted); font-size: .84rem; }
.consolidated-selection-summary { border-top: 1px solid var(--ds-border); padding-top: 10px; }
.consolidated-selection-summary > summary, .consolidated-documentation-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.consolidated-selection-summary > summary::-webkit-details-marker, .consolidated-documentation-editor > summary::-webkit-details-marker { display: none; }
.consolidated-selection-summary > summary strong, .consolidated-documentation-editor > summary em { color: var(--ds-text-muted); font-size: .8rem; font-style: normal; }
.consolidated-selection-summary > div { display: grid; margin-top: 7px; }
.consolidated-selection-summary > div > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ds-border); }
.consolidated-selection-summary > div > div > span, .consolidated-documentation-editor > summary > span { display: grid; gap: 2px; min-width: 0; }
.consolidated-selection-summary small, .consolidated-documentation-editor > summary small { color: var(--ds-text-muted); }
.consolidated-documentation-editor { padding: 13px 15px; border: 1px solid var(--ds-border); border-radius: 11px; background: #fff; }
.consolidated-documentation-editor-body { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ds-border); }
.consolidated-documentation-editor-body > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consolidated-documentation-editor-body p { margin: 0; color: var(--ds-text-muted); }
.consolidated-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.consolidated-detail-head > .consolidated-head-actions { display: flex; }
.consolidated-head-actions > button { justify-content: center; width: 116px; min-width: 116px; min-height: 40px; }
.consolidated-head-actions .consolidated-delete-command { border-color: color-mix(in srgb, var(--ds-danger) 30%, var(--ds-border)); color: var(--ds-danger); }
.consolidated-detail-note-wrap { display: grid; justify-items: start; gap: 7px; min-width: 0; }
.consolidated-detail-note { margin: 0; max-width: 78ch; overflow-wrap: anywhere; line-height: 1.55; font-size: .85rem; color: var(--ds-text-muted); }
.consolidated-detail-note.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 10; }
.consolidated-detail-note.is-expanded { display: block; }
.consolidated-note-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--ds-primary); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.consolidated-note-toggle[hidden] { display: none; }
.consolidated-note-toggle svg { width: 14px; height: 14px; }
.consolidated-note-toggle:hover { color: var(--ds-primary-hover); }
.consolidated-note-toggle:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; border-radius: 3px; }
.consolidated-operational-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.consolidated-operational-kpis article { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--ds-border); border-radius: 11px; background: #fff; overflow-wrap: anywhere; }
.consolidated-operational-kpis small { font-size: .72rem; }
.consolidated-operational-kpis span, .consolidated-operational-kpis small { color: var(--ds-text-muted); }
.consolidated-operational-kpis strong { font-size: 1.2rem; }
.consolidated-currency-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; margin-top: 14px; }
.consolidated-currency-block { display: grid; gap: 13px; padding: 17px; border: 1px solid var(--ds-border); border-radius: 14px; background: #fff; }
.consolidated-currency-block.partial { border-color: #d7b563; }
.consolidated-currency-block header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.consolidated-currency-block h3 { margin: 2px 0 0; }
.consolidated-currency-block dl { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 8px; margin: 0; }
.consolidated-currency-block dl div { min-width: 0; padding: 9px; border-radius: 9px; background: #f5f8fa; }
.consolidated-currency-block dt { color: var(--ds-text-muted); font-size: .73rem; }
.consolidated-currency-block dd { overflow-wrap: anywhere; margin: 4px 0 0; font-weight: 700; }
.consolidated-currency-block .consolidated-financial-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.consolidated-financial-summary dd { font-size: 1.1rem; }
.consolidated-currency-block .consolidated-financial-sources { border-top: 1px solid var(--ds-border); padding-top: 10px; }
.consolidated-currency-block .consolidated-financial-sources > div { padding: 7px 0; border-bottom: 1px solid var(--ds-border); border-radius: 0; background: transparent; }
.consolidated-financial-hint { color: var(--ds-text-muted); font-size: .75rem; }
.consolidated-metric-button { margin: -3px; padding: 3px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.consolidated-metric-button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.consolidated-metric-button:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; border-radius: 2px; }
.consolidated-currency-block .positive { color: var(--ds-success-text); font-weight: 800; }
.consolidated-currency-block .negative { color: #b42318; }
.consolidated-blockers { display: grid; gap: 5px; padding: 11px; border-radius: 9px; background: #fff8e6; color: #765b00; }
.consolidated-blocker-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: .82rem; text-align: left; cursor: pointer; }
.consolidated-blocker-link span { min-width: 0; overflow-wrap: anywhere; }
.consolidated-blocker-link svg { flex: 0 0 16px; width: 16px; height: 16px; }
.consolidated-blocker-link:hover span { text-decoration: underline; }
.consolidated-blocker-link:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.consolidated-completion-guide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: 9px; background: #fff; }
.consolidated-completion-guide > div { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.consolidated-completion-guide > div:first-child { display: grid; gap: 4px; }
.consolidated-completion-guide strong { font-size: .9rem; overflow-wrap: anywhere; }
.consolidated-completion-guide small, .consolidated-completion-guide span { color: var(--ds-text-muted); font-size: .78rem; }
.consolidated-detail-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.2fr); gap: 14px; }
.consolidated-detail-grid > article { min-width: 0; padding: 16px; border: 1px solid var(--ds-border); border-radius: 11px; background: #fff; }
.consolidated-rn-list, .consolidated-cost-list { display: grid; }
.consolidated-rn-list .link-button { display: grid; flex: 1; justify-items: start; gap: 3px; min-width: 0; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-primary); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.consolidated-rn-list .link-button:hover { background: #f1f7fb; }
.consolidated-rn-list .link-button:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.consolidated-rn-list .link-button span { color: var(--ds-text-muted); }
.consolidated-cost-list em { margin-left: auto; font-style: normal; font-weight: 700; white-space: nowrap; }
.consolidated-cost-modal { width: min(780px, calc(100vw - 32px)); }
.consolidated-cost-modal-body { min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 20px; }
.consolidated-cost-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.consolidated-cost-form .wide { grid-column: 1 / -1; }
.consolidated-cost-form label { align-content: start; min-width: 0; }
.consolidated-cost-form textarea { min-height: 100px; }
.consolidated-cost-form .nx-date-control-wrap, .consolidated-cost-form .wo-analytics-money-input { align-self: start; min-width: 0; }
.consolidated-cost-form .has-error input, .consolidated-cost-form .has-error select, .consolidated-cost-form .has-error textarea { border-color: var(--ds-danger); }
.consolidated-field-error { color: var(--ds-danger); font-size: .76rem; font-weight: 700; line-height: 1.35; }
.consolidated-modal-error { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ds-danger) 28%, transparent); border-radius: 9px; background: var(--ds-danger-bg); color: var(--ds-danger); font-size: .85rem; font-weight: 700; }
.consolidated-cost-modal-body > .consolidated-modal-error { margin-bottom: 12px; }
.consolidated-remove-rn-modal { width: min(600px, calc(100vw - 32px)); }
.consolidated-remove-rn-body { display: grid; gap: 10px; overflow-y: auto; padding: 20px; }
.consolidated-remove-rn-body p { margin: 0; line-height: 1.55; }
.consolidated-remove-rn-body p + p { color: var(--ds-text-muted); }
.consolidated-breakdown-modal { width: min(860px, calc(100vw - 32px)); }
.consolidated-breakdown-table { overflow: auto; }
.consolidated-breakdown-table table { width: 100%; border-collapse: collapse; }
.consolidated-breakdown-table th, .consolidated-breakdown-table td { border-bottom: 1px solid var(--ds-border); text-align: left; white-space: nowrap; }

@media (max-width: 1050px) {
  .consolidated-editor-grid, .consolidated-detail-grid { grid-template-columns: 1fr; }
  .consolidated-period-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consolidated-operational-kpis { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}

@media (max-width: 700px) {
  .consolidated-page-head, .consolidated-detail-head { display: grid; }
  .consolidated-detail-head { grid-template-columns: auto minmax(0, 1fr); }
  .consolidated-detail-head > button { width: auto; }
  .consolidated-detail-head .consolidated-head-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .consolidated-detail-head .consolidated-head-actions:not(:has(.primary-button)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consolidated-detail-head .consolidated-head-actions > button { padding-inline: 8px; }
  .consolidated-page-head > button, .consolidated-head-actions, .consolidated-editor-actions { width: 100%; }
  .consolidated-head-actions, .consolidated-editor-actions { display: grid; grid-template-columns: 1fr; }
  .consolidated-head-actions > button { width: 100%; min-width: 0; }
  .consolidated-candidate-tools, .consolidated-period-fields, .consolidated-cost-form { grid-template-columns: 1fr; }
  .consolidated-operational-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consolidated-operational-kpis article:last-child { grid-column: 1 / -1; }
  .consolidated-cost-form .wide { grid-column: auto; }
  .consolidated-currency-blocks { grid-template-columns: minmax(0, 1fr); }
  .consolidated-currency-block dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consolidated-currency-block .consolidated-financial-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consolidated-financial-summary > div:first-child { grid-column: 1 / -1; }
  .consolidated-candidate-row { grid-template-columns: auto minmax(0, 1fr); }
  .consolidated-candidate-row em { grid-column: 2; }
  .consolidated-cost-entry > div:first-child { align-items: flex-start; flex-wrap: wrap; }
}

.consolidated-card-financial, .consolidated-report-runs, .consolidated-attachment-list { display: grid; gap: 8px; }
.consolidated-card-financial, .consolidated-card-stale { grid-column: 1 / -1; margin: 0; font-size: .8rem; }
.consolidated-card-financial { padding-top: 2px; }
.consolidated-card-financial span, .consolidated-report-runs > div, .consolidated-attachment-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consolidated-card-financial small, .consolidated-card-stale, .consolidated-report-runs small { color: var(--ds-text-muted); }
.consolidated-cost-attachments, .consolidated-pdf-panel { margin-top: 16px; border-top: 1px solid var(--ds-border); padding-top: 16px; }
.consolidated-cost-attachments > header, .consolidated-cost-attachments > header > div, .consolidated-pdf-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.consolidated-cost-attachments > header > div:first-child { display: grid; }
.consolidated-attachment-list { margin-top: 12px; }
.consolidated-attachment-list > div { border: 1px solid var(--ds-border); border-radius: 10px; padding: 10px; }
.consolidated-attachment-list > div > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.consolidated-attachment-list strong { overflow-wrap: anywhere; }
.consolidated-pdf-options { justify-content: flex-start; margin: 16px 0; }
.consolidated-pdf-options > label { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; cursor: pointer; font-size: .85rem; font-weight: 500; }
.consolidated-pdf-options > button { margin-left: auto; }
.consolidated-pdf-panel { min-width: 0; padding: 16px; border: 1px solid var(--ds-border); border-radius: 11px; background: #fff; }
.consolidated-pdf-panel h3 { margin: 0; font-size: .95rem; }
.consolidated-pdf-panel header p { margin: 5px 0 0; color: var(--ds-text-muted); font-size: .82rem; }
.consolidated-cost-entry { display: grid; gap: 8px; }
.consolidated-cost-entry > div:first-child { display: flex; align-items: center; gap: 10px; }
.consolidated-cost-entry > div:first-child > span { flex: 1; display: grid; }
.consolidated-cost-entry-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 8px 8px; }
.consolidated-cost-entry-files > span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ds-border); border-radius: 999px; padding: 4px 6px 4px 10px; }
.consolidated-documentation, .consolidated-documentation-editor { display: grid; gap: 12px; }
.consolidated-documentation > header, .consolidated-documentation-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.consolidated-documentation > header > div, .consolidated-documentation-editor > header > div { display: grid; gap: 4px; }
.consolidated-documentation h3, .consolidated-documentation p, .consolidated-documentation-editor h3, .consolidated-documentation-editor p { margin: 0; }
.consolidated-documentation p, .consolidated-documentation > small, .consolidated-documentation-editor p, .consolidated-documentation-editor > small { color: var(--ds-text-muted); }
.consolidated-documentation .consolidated-attachment-list, .consolidated-documentation-editor .consolidated-attachment-list { margin-top: 0; }
.consolidated-documentation .consolidated-attachment-list > div > div, .consolidated-documentation-editor .consolidated-attachment-list > div > div { display: flex; gap: 5px; }
.consolidated-documentation { display: block; }
.consolidated-documentation > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.consolidated-documentation > summary span { color: var(--ds-text-muted); font-size: .8rem; }
.consolidated-documentation-body { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ds-border); }
.consolidated-documentation-body > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consolidated-documentation-body > small { color: var(--ds-text-muted); }
.consolidated-detail-grid .panel-card > header h3 { margin: 0; }
.consolidated-shared-costs > header p { margin: 4px 0 0; color: var(--ds-text-muted); font-size: .82rem; }
.consolidated-shared-costs > header .compact-command { flex-shrink: 0; }
.consolidated-rn-list > div:last-child, .consolidated-cost-entry:last-child > div:first-child { border-bottom: 0; }
.consolidated-report-history > summary { cursor: pointer; color: var(--ds-text-muted); font-size: .85rem; font-weight: 650; }
.consolidated-report-history[open] .consolidated-report-runs { margin-top: 10px; }

@media (max-width: 700px) {
  .consolidated-card { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
  .consolidated-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consolidated-card-financial span, .consolidated-report-runs > div, .consolidated-attachment-list > div { align-items: flex-start; flex-wrap: wrap; }
  .consolidated-pdf-options, .consolidated-pdf-options .primary-button { width: 100%; }
  .consolidated-pdf-options { display: grid; gap: 6px; }
  .consolidated-pdf-options > button { margin: 8px 0 0; }
  .consolidated-documentation > header, .consolidated-documentation-editor > header { display: grid; }
  .consolidated-documentation-body > header { flex-wrap: wrap; }
}
/* Operational work-order PDF preparation */
.wo-print-backdrop{z-index:2350;padding:22px;background:rgba(12,35,56,.48);backdrop-filter:blur(4px)}
.wo-print-modal{width:min(980px,calc(100vw - 44px));max-height:calc(100vh - 44px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid #c8d8e5;border-radius:20px;box-shadow:0 26px 70px rgba(10,38,61,.28);background:#f7fafc}
.wo-print-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 26px 20px;border-bottom:1px solid #d8e3eb;background:#fff}
.wo-print-header small{display:block;margin-bottom:5px;color:#3f7398;font-size:.72rem;font-weight:800;letter-spacing:.08em}
.wo-print-header h2{margin:0;color:#102f49;font-size:1.45rem;line-height:1.2}
.wo-print-header p{margin:7px 0 0;color:#61788b}
.wo-print-body{min-height:0;overflow-y:auto;padding:22px 26px 26px;overscroll-behavior:contain}
.wo-print-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.wo-print-mode{min-height:112px;display:flex;align-items:flex-start;gap:10px;padding:15px;text-align:left;border:1px solid #cfdee9;border-radius:14px;background:#fff;color:#234962;box-shadow:0 4px 14px rgba(31,73,103,.05);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.wo-print-mode:hover,.wo-print-mode:focus-visible{border-color:#6da5c9;box-shadow:0 8px 22px rgba(31,73,103,.12);outline:none}
.wo-print-mode.active{border-color:#2e78a8;background:#edf7fd;box-shadow:inset 0 0 0 1px #2e78a8,0 8px 20px rgba(31,91,132,.12)}
.wo-print-mode>svg{width:21px;height:21px;flex:0 0 auto;margin-top:1px}
.wo-print-mode span{display:grid;gap:5px;min-width:0}.wo-print-mode strong{color:#153b59;font-size:.9rem}.wo-print-mode small{color:#657d8f;font-size:.74rem;line-height:1.4}
.wo-print-selector{border:1px solid #cfdee9;border-radius:15px;background:#fff;overflow:hidden}
.wo-print-selector>header{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid #dbe5ec;background:#f2f7fa}.wo-print-selector h3{margin:0;color:#153b59;font-size:.93rem}.wo-print-selector header span{color:#6a8090;font-size:.76rem}
.wo-print-selector-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:280px;overflow-y:auto;padding:12px}
.wo-print-selector-option{min-height:62px;display:flex;align-items:center;gap:11px;padding:10px 12px;text-align:left;border:1px solid #d5e1e9;border-radius:11px;background:#fff;color:#234962;cursor:pointer}
.wo-print-selector-option:hover,.wo-print-selector-option:focus-visible{border-color:#75a8c8;outline:none}.wo-print-selector-option.selected{border-color:#2f7eae;background:#edf7fd;box-shadow:inset 0 0 0 1px #2f7eae}
.wo-print-selector-check{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #a9bdca;border-radius:7px;background:#fff}.wo-print-selector-option.selected .wo-print-selector-check{border-color:#2f7eae;background:#2f7eae;color:#fff}.wo-print-selector-check svg{width:15px;height:15px}
.wo-print-selector-option>span:last-child{display:grid;gap:3px;min-width:0}.wo-print-selector-option strong{overflow-wrap:anywhere;color:#173d59}.wo-print-selector-option small{color:#6a8090}
.wo-print-complete-state{min-height:86px;display:flex;align-items:center;gap:15px;padding:18px 20px;border:1px solid #bcd9c9;border-radius:14px;background:#f1faf5;color:#245f46}.wo-print-complete-state>svg{width:28px;height:28px}.wo-print-complete-state div{display:grid;gap:4px}.wo-print-complete-state span{color:#5f7c6d;font-size:.8rem}
.wo-print-summary{display:grid;gap:10px;margin-top:16px;padding:15px 17px;border:1px solid #c9dae7;border-radius:14px;background:#edf5fa;color:#214d6c}.wo-print-summary>strong{font-size:.82rem}.wo-print-summary>div{display:flex;flex-wrap:wrap;gap:8px}.wo-print-summary span{padding:7px 10px;border-radius:9px;background:#fff;color:#4f6d81;font-size:.78rem}.wo-print-summary b{color:#123f60;font-size:.95rem}.wo-print-summary .wide{flex-basis:100%}.wo-print-summary.loading,.wo-print-summary.empty{display:flex;align-items:center;gap:9px;color:#60798b}.wo-print-summary.loading svg,.wo-print-loading svg{width:19px;height:19px;animation:spin 1s linear infinite}
.wo-print-loading,.wo-print-empty{min-height:160px;display:grid;place-items:center;align-content:center;gap:10px;color:#60798b;text-align:center}
.wo-print-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 26px;border-top:1px solid #d8e3eb;background:#fff}.wo-print-footer button{min-height:44px}
.wo-material-print-modal{width:min(660px,calc(100vw - 44px))}.wo-material-print-note{display:grid;gap:8px;color:#365a72;font-size:.8rem;font-weight:800}.wo-material-print-note textarea{width:100%;min-height:132px;box-sizing:border-box;resize:vertical;padding:12px 13px;border:1px solid #c9dae7;border-radius:12px;background:#fff;color:#173d59;font:500 .88rem/1.5 inherit}.wo-material-print-note textarea:focus{outline:0;border-color:#2e78a8;box-shadow:0 0 0 3px rgba(46,120,168,.14)}.wo-material-print-note small{color:#6a8090;font-size:.72rem;font-weight:500}.wo-material-print-modal .flow-error{margin-top:14px}
.wo-print-reminder-backdrop{z-index:2360;background:rgba(12,35,56,.5);backdrop-filter:blur(4px)}
.wo-print-reminder{width:min(520px,calc(100vw - 32px));padding:28px;border:1px solid #c9dbe8;border-radius:18px;box-shadow:0 24px 64px rgba(10,38,61,.3)}
.wo-print-reminder-content{width:min(100%,440px);margin-inline:auto;display:grid;justify-items:center;gap:15px;text-align:center}.wo-print-reminder-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#e9f4fa;color:#286f9d}.wo-print-reminder-icon svg{width:26px;height:26px}.wo-print-reminder p{width:100%;margin:0;color:#61788b;text-align:center;line-height:1.5}.wo-print-reminder-actions{display:flex;align-items:center;justify-content:center;gap:10px}.wo-print-reminder-actions button{min-height:44px}
.wo-label-copy-controls{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(260px,1.35fr);gap:12px;align-items:stretch}.wo-label-copy-controls label{display:grid;gap:7px;color:#526f83;font-size:.76rem;font-weight:800}.wo-label-copy-controls input{width:100%;min-height:48px;box-sizing:border-box;padding:10px 12px;border:1px solid #cfdee9;border-radius:11px;background:#fff;color:#173d59;font:inherit;font-size:.95rem}.wo-label-fill-toggle{min-height:64px;display:flex;align-items:center;gap:11px;padding:12px 14px;text-align:left;border:1px solid #cfdee9;border-radius:12px;background:#fff;color:#234962;cursor:pointer}.wo-label-fill-toggle>svg{width:20px;height:20px;flex:0 0 auto}.wo-label-fill-toggle>span{display:grid;gap:3px}.wo-label-fill-toggle small{color:#657d8f}.wo-label-fill-toggle.active{border-color:#2e78a8;background:#edf7fd;box-shadow:inset 0 0 0 1px #2e78a8}
.internal-pdf-backdrop{z-index:2400;padding:18px;background:rgba(12,35,56,.58);backdrop-filter:blur(5px)}.internal-pdf-preview{width:min(1180px,calc(100vw - 36px));height:min(94dvh,980px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid #bfd2df;border-radius:20px;background:#eef3f7;box-shadow:0 30px 90px rgba(7,33,53,.38)}.internal-pdf-preview>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid #d2e0e9;background:#fff}.internal-pdf-preview>header small{display:block;margin-bottom:4px;color:#3f7398;font-size:.7rem;font-weight:850;letter-spacing:.09em}.internal-pdf-preview h2{margin:0;color:#102f49;font-size:1.25rem}.internal-pdf-frame-shell{min-height:0;padding:14px;background:#dfe8ee}.internal-pdf-frame-shell iframe{width:100%;height:100%;border:0;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(20,51,73,.16)}.internal-pdf-preview>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid #d2e0e9;background:#fff}.internal-pdf-preview>footer>div{display:flex;gap:10px}.internal-pdf-preview>footer button{min-height:44px;display:inline-flex;align-items:center;gap:7px}.internal-pdf-preview>footer svg{width:17px;height:17px}
.internal-attachment-viewer{max-width:calc(100vw - 36px);max-height:calc(100dvh - 36px);min-width:0}.internal-attachment-preview-area{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}.internal-image-frame-shell{display:grid;place-items:center;padding:18px;background:#dfe8ee}.internal-image-frame-shell img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 8px 24px rgba(20,51,73,.16)}.internal-attachment-fallback{align-content:center;justify-items:center;gap:12px;padding:32px;text-align:center;background:#f3f7fa}.internal-attachment-fallback svg{width:46px;height:46px;color:#3f7398}.internal-attachment-fallback strong{max-width:720px;color:#102f49;font-size:1.1rem;overflow-wrap:anywhere}.internal-attachment-fallback p{max-width:620px;margin:0;color:#60758b;line-height:1.55}

@media (max-width:1300px) and (min-width:701px){.modal-backdrop:has(.flow-modal),.material-modal-backdrop{padding:12px;overflow:hidden}.modal-panel.flow-modal,.modal-panel.flow-modal.large,.material-modal,.material-detail-modal{width:min(100%,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:0}.flow-modal-head,.material-modal-header{min-width:0}.flow-modal-footer,.material-modal-actions{position:relative;z-index:2;flex:0 0 auto;max-width:100%;overflow:visible}.flow-modal-footer button,.material-modal-actions button{min-height:44px}.material-modal-body{grid-template-columns:minmax(0,1.55fr) minmax(220px,.8fr)}}
@media (max-width:1100px){.wo-print-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wo-print-mode{min-height:88px}.wo-print-selector-list{grid-template-columns:1fr 1fr}.wo-print-modal{width:min(920px,calc(100vw - 28px));max-height:calc(100vh - 28px)}}
@media (max-width:640px){.wo-print-backdrop{padding:0}.wo-print-modal{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0}.wo-print-header{padding:18px 16px 15px}.wo-print-header h2{font-size:1.18rem}.wo-print-header p{font-size:.82rem}.wo-print-body{padding:15px 14px 20px}.wo-print-mode-grid{grid-template-columns:1fr;gap:8px}.wo-print-mode{min-height:72px;padding:12px}.wo-print-selector>header{display:grid;gap:3px}.wo-print-selector-list{grid-template-columns:1fr;max-height:36vh;padding:9px}.wo-print-selector-option{min-height:56px}.wo-label-copy-controls{grid-template-columns:1fr}.wo-print-footer{padding:12px 14px;display:grid;grid-template-columns:1fr 1fr}.wo-print-footer button{width:100%;min-height:46px}.wo-print-reminder{padding:24px 16px}.wo-print-reminder-actions{max-width:100%;gap:8px}.wo-print-reminder-actions button{padding-inline:12px;font-size:.78rem}.work-order-operation-note-backdrop{padding:12px}.work-order-operation-note-modal{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.work-order-operation-note-body{padding:16px}.work-order-operation-note-footer{padding:12px 16px}.work-order-operation-note-actions{width:100%;display:grid;grid-template-columns:auto auto;justify-content:end}.internal-pdf-backdrop{padding:0}.internal-pdf-preview,.internal-attachment-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}.internal-pdf-preview>header{padding:15px 14px}.internal-pdf-frame-shell,.internal-image-frame-shell{padding:8px}.internal-pdf-preview>footer{padding:10px;display:grid;grid-template-columns:1fr}.internal-pdf-preview>footer>div{display:grid;grid-template-columns:1fr 1fr}.internal-pdf-preview>footer button{width:100%;justify-content:center}}

/* Authoritative Product Stock consolidation overrides. */
.products-screen,.product-tab-panel,.products-list-card{min-width:0;max-width:100%;}
.products-list-card{overflow:hidden;border-radius:14px;}
.products-table-wrap{width:100%;max-width:100%;min-width:0;overflow:auto;overscroll-behavior-x:contain;}
.products-table.products-table-desktop{width:100%;min-width:1260px;table-layout:auto;}
.products-table.products-table-desktop th,.products-table.products-table-desktop td{width:auto;border-right:1px solid rgba(var(--ds-primary-rgb),.07);text-align:center;vertical-align:middle;}
.products-table.products-table-desktop th{white-space:nowrap;}
.products-table.products-table-desktop th .sort-header{width:100%;justify-content:center;white-space:nowrap;}
.products-table.products-table-desktop th:nth-child(1),.products-table.products-table-desktop td:nth-child(1){min-width:125px;text-align:left;}
.products-table.products-table-desktop th:nth-child(2),.products-table.products-table-desktop td:nth-child(2){min-width:220px;text-align:left;}
.products-table.products-table-desktop th:nth-child(3){min-width:70px}.products-table.products-table-desktop th:nth-child(n+4):nth-child(-n+8){min-width:112px}.products-table.products-table-desktop th:nth-child(9){min-width:105px}.products-table.products-table-desktop th:nth-child(10){min-width:132px}
.products-table.products-table-desktop th:nth-child(5),.products-table.products-table-desktop td:nth-child(5){border-left:2px solid rgba(var(--ds-primary-rgb),.16);}
.product-cell-center{text-align:center!important}.product-number{font-variant-numeric:tabular-nums;font-weight:750}.product-row-actions{justify-content:center;flex-wrap:nowrap;gap:5px}.product-row-actions .icon-mini{width:32px;height:32px}
.product-name-with-signal{display:grid;justify-items:start;gap:6px;min-width:0}.product-replenishment-row td,.product-card.product-replenishment-row{background:#fffbf2}.product-replenishment-row:hover td{
}.product-replenishment-signal{max-width:100%;display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #ecd69e;border-radius:999px;background:#fff8e5;color:#765515;font-size:.68rem;font-weight:800;line-height:1.25;text-align:left}.product-replenishment-signal svg{width:14px;height:14px;flex:0 0 auto}.product-replenishment-signal strong{font-variant-numeric:tabular-nums}.product-card>.product-replenishment-signal{justify-self:start;margin:0 14px}
.product-create-modal{width:min(1180px,calc(100vw - 32px));max-height:calc(100dvh - 28px);overflow:hidden}.product-create-modal .product-wizard-body{min-height:0;overflow:auto}.product-wizard-tabs{overflow:auto}.product-wizard-tabs button{flex:1 0 max-content;min-width:130px}.product-stock-panel{align-self:start}.product-stock-actions{display:grid;gap:8px;margin-top:16px}.product-stock-actions button{width:100%;min-height:40px}.product-stock-correction-inline{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:2px solid rgba(var(--ds-primary-rgb),.14)}.product-stock-correction-inline h4,.product-stock-correction-inline p{margin:0}.product-stock-correction-inline .field{display:grid;gap:5px}.product-stock-correction-inline input,.product-stock-correction-inline textarea{width:100%;min-width:0;box-sizing:border-box}.product-stock-correction-inline>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.product-stock-history-table{max-width:100%;overflow:auto}.product-stock-history-table table{width:100%;min-width:900px;border-collapse:collapse}.product-stock-history-table th,.product-stock-history-table td{border-bottom:1px solid var(--ds-border);text-align:left}.product-stock-history-state{min-height:260px;display:grid;place-items:center}
@media(max-width:1280px) and (min-width:861px){.products-table-wrap-desktop{display:none}.products-table-wrap-landscape{display:block;max-width:100%;overflow:auto;overscroll-behavior-x:contain}.products-table-landscape{min-width:1080px!important}.products-table-landscape th:nth-child(1),.products-table-landscape td:nth-child(1){width:210px}.products-table-landscape th:nth-child(2),.products-table-landscape td:nth-child(2){width:90px}.products-table-landscape th:nth-child(3),.products-table-landscape td:nth-child(3){width:110px}.products-table-landscape th:nth-child(4),.products-table-landscape td:nth-child(4){width:170px}.products-table-landscape th:nth-child(5),.products-table-landscape td:nth-child(5){width:170px}.products-table-landscape th:nth-child(6),.products-table-landscape td:nth-child(6){width:110px}.products-table-landscape th:nth-child(7),.products-table-landscape td:nth-child(7){width:90px}.products-table-landscape th:nth-child(8),.products-table-landscape td:nth-child(8){width:120px}}
@media(max-width:860px){.product-create-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.product-general-grid{grid-template-columns:1fr!important}.modal-panel.work-order-create-modal .wo-purpose-row{align-items:flex-start;flex-direction:column}.modal-panel.work-order-create-modal .wo-purpose-segments{width:100%}.modal-panel.work-order-create-modal .wo-purpose-segments label{flex:1;justify-content:center;min-height:42px}}
@media(max-width:560px){.product-create-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.product-wizard-tabs{display:flex!important;overflow:auto!important}.product-wizard-tabs button{min-width:128px;min-height:44px}.product-stock-correction-inline>div{grid-template-columns:1fr}}

/* Product Stock manual-QA corrective polish. */
.product-stock-actions button{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding-inline:16px;line-height:1.2}
.priority-dot.high{background:#dc2626}.priority-badge.high{color:#991b1b;background:#fee2e2;border-color:#fecaca}
.wo-general-priority-option.high.active .priority-dot,.wo-general-priority-option.high:has(input:checked) .priority-dot{background:#dc2626}
.work-order-card.work-order-stock-purpose{border-color:#bcd7e7;background:linear-gradient(180deg,#fff,#f5faff)}
.work-order-stock-mark{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;border-radius:7px;background:#e5f2f9;color:#276f9b;vertical-align:middle}.work-order-stock-mark svg{width:14px;height:14px}
.wo-print-reminder-content{margin-inline:auto}.wo-print-reminder-icon{justify-self:center}.wo-print-reminder-actions{justify-content:center}
@media(max-width:640px){.wo-detail-print-action{width:100%;justify-content:center}.work-orders-table tbody tr.work-order-stock-purpose td{background:#f5faff}}

/* Product Stock production-plan overview. */
.products-filter-card{grid-template-columns:minmax(230px,1.35fr) repeat(4,minmax(130px,.72fr)) auto}.product-stock-plan-trigger{gap:7px}.product-stock-plan-trigger>strong{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ds-primary,#397aa5);color:#fff;font-size:.72rem}.products-table.products-table-desktop{min-width:1420px}.products-table.products-table-desktop th:nth-child(4){min-width:108px}.products-table.products-table-desktop th:nth-child(6),.products-table.products-table-desktop td:nth-child(6){border-left:2px solid rgba(var(--ds-primary-rgb),.16)}.product-code-cell{gap:7px}.product-quick-info-button{display:inline-grid;flex:0 0 28px;place-items:center;width:28px;height:28px;padding:0;border:1px solid #c9dae7;border-radius:8px;background:#f7fbfd;color:#2d7099;cursor:pointer}.product-quick-info-button svg{width:14px;height:14px}.product-quick-info-button:hover,.product-quick-info-button:focus-visible{border-color:#78a9c7;background:#edf7fc;outline:none}.product-quick-info-modal{width:min(680px,calc(100vw - 32px))}.product-quick-info-body{display:grid;gap:16px;padding:20px}.product-quick-info-body dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.product-quick-info-body dl>div{padding:11px;border:1px solid var(--ds-border);border-radius:10px;background:#f8fbfd}.product-quick-info-body dt{color:var(--ds-text-muted);font-size:.7rem;font-weight:800}.product-quick-info-body dd{margin:5px 0 0;color:var(--ds-heading);font-weight:800}.product-quick-info-body section{display:grid;gap:8px}.product-quick-info-body h3{margin:0;color:var(--ds-heading);font-size:.9rem}.product-quick-info-body ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none}.product-quick-info-body li{display:grid;gap:2px;padding:9px 11px;border:1px solid var(--ds-border);border-radius:9px}.product-quick-info-body li span,.product-quick-info-body section>p{color:var(--ds-text-muted);font-size:.78rem}.product-stock-plan-modal{width:min(1320px,calc(100vw - 28px));max-height:calc(100dvh - 28px)}.product-stock-plan-body{min-width:0;padding:16px;overflow:auto}.product-stock-plan-table{width:100%;overflow:auto;border:1px solid var(--ds-border);border-radius:12px}.product-stock-plan-table table{width:100%;min-width:1180px;border-collapse:collapse}.product-stock-plan-table th,.product-stock-plan-table td{border-right:1px solid rgba(var(--ds-primary-rgb),.07);border-bottom:1px solid var(--ds-border);text-align:center}.product-stock-plan-table th:nth-child(1),.product-stock-plan-table th:nth-child(2),.product-stock-plan-table td:nth-child(1),.product-stock-plan-table td:nth-child(2){text-align:left}.product-stock-plan-table th{
}.product-stock-plan-footer{justify-content:flex-end;gap:10px}
@media(max-width:1280px){.products-filter-card{grid-template-columns:repeat(3,minmax(0,1fr))}.products-filter-card .product-search-field{grid-column:span 2}.products-filter-card>.compact-command{width:100%}}
@media(max-width:640px){.products-filter-card{grid-template-columns:1fr}.products-filter-card .product-search-field{grid-column:auto}.product-quick-info-modal,.product-stock-plan-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.product-quick-info-body dl,.product-quick-info-body ul{grid-template-columns:1fr}.product-stock-plan-footer{display:grid;grid-template-columns:1fr 1fr}.product-stock-plan-footer button{width:100%}}

/* Products canonical-code and final table polish. */
.products-list-card{border-color:#c8d9e5;box-shadow:0 10px 28px rgba(18,56,82,.08)}
.products-table.products-table-desktop{min-width:1420px;border-collapse:separate;border-spacing:0}
.products-table.products-table-desktop th,.products-table.products-table-desktop td{border-right:1px solid rgba(var(--ds-primary-rgb),.075);border-bottom:1px solid #d7e3eb}
.products-table.products-table-desktop th{border-bottom:2px solid #c7d9e5}
.products-table.products-table-desktop th:nth-child(2),.products-table.products-table-desktop td:nth-child(2){width:340px;min-width:300px;max-width:420px}
.products-table.products-table-desktop th:nth-child(3),.products-table.products-table-desktop td:nth-child(3){width:62px;min-width:62px;max-width:70px;text-align:center}
.products-table.products-table-desktop .product-table-name{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.products-table.products-table-desktop tbody tr:last-child td{border-bottom:0}
.products-table.products-table-desktop .product-row-actions{min-height:34px;align-items:center;justify-content:center}

/* Team canonical header, KPI and phone-card presentation. */
.content:has(> .topbar + #section-root .team-overview){padding-top:18px}
.topbar:has(+ #section-root .team-overview){align-items:center;gap:14px;margin-bottom:10px;padding:12px 14px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card);box-shadow:0 6px 18px rgba(var(--ds-sidebar-rgb),.04)}
.topbar:has(+ #section-root .team-overview) .title-block{flex:1 1 auto;min-width:0}
.topbar:has(+ #section-root .team-overview) .topbar-actions{flex:0 0 auto;align-items:center;gap:8px;flex-wrap:nowrap}
.topbar:has(+ #section-root .team-overview) .compact-command{min-height:40px;border-radius:8px;padding:0 12px}
.team-mobile-card{display:grid;gap:13px;min-width:0;padding:14px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card);box-shadow:0 6px 18px rgba(var(--ds-sidebar-rgb),.055);overflow:hidden}
.team-mobile-card>header{display:grid;gap:10px;min-width:0}
.team-mobile-card>header>div:first-child{display:grid;gap:3px;min-width:0}
.team-mobile-card>header>div:first-child strong,.team-mobile-card>header>div:first-child small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-mobile-card>header>div:first-child strong{color:var(--ds-heading);font-size:15px}
.team-mobile-card>header>div:first-child small{color:var(--ds-text-muted);font-size:12px}
.team-mobile-badges{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.team-mobile-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.team-mobile-card dl>div{min-width:0;padding:9px;border-radius:9px;background:var(--ds-bg-soft)}
.team-mobile-card dt{color:var(--ds-text-muted);font-size:10px;font-weight:800;text-transform:uppercase}
.team-mobile-card dd{margin:4px 0 0;color:var(--ds-heading);font-size:13px;font-weight:650;overflow-wrap:anywhere}
.team-mobile-note{margin:0;padding:10px 11px;border-left:3px solid var(--ds-primary-border);border-radius:8px;background:var(--ds-bg-soft);color:var(--ds-text);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.team-mobile-status{display:flex;align-items:center;justify-content:flex-start}
.team-mobile-card>.team-row-actions{justify-content:flex-end;padding-top:10px;border-top:1px solid var(--ds-border)}
@media(max-width:1320px){.team-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.topbar:has(+ #section-root .team-overview){align-items:stretch;flex-direction:column}.topbar:has(+ #section-root .team-overview) .topbar-actions{justify-content:flex-start;flex-wrap:wrap;width:100%}.team-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.content:has(> .topbar + #section-root .team-overview){padding-top:14px}.topbar:has(+ #section-root .team-overview){padding:12px}.topbar:has(+ #section-root .team-overview) .topbar-actions{display:grid;grid-template-columns:1fr}.topbar:has(+ #section-root .team-overview) .topbar-actions button{width:100%;min-width:0}.team-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}.team-stat-card{padding:10px;gap:8px}.team-stat-card>span{flex-basis:28px;width:28px;height:28px}.team-stat-card strong{font-size:21px}.team-stat-card em{font-size:11px}.team-table-wrap{display:none}.team-mobile-list{display:grid;gap:10px;padding:12px}.team-mobile-list .team-compact-empty{display:grid;justify-items:start}.team-mobile-list .team-compact-empty button{width:100%}}
@media(max-width:360px){.team-stats-grid{grid-template-columns:1fr}.team-mobile-card dl{grid-template-columns:1fr}}
.password-requirements {
  grid-column: 1 / -1;
  margin: -4px 0 4px;
  padding-left: 20px;
  color: var(--ds-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Commit B: shared premium density for Scrap, Problems and Notes. */
.topbar:has(+ #section-root .scrap-screen) .title-block h1,
.topbar:has(+ #section-root .global-problems-page) .title-block h1,
.topbar:has(+ #section-root .notes-screen) .title-block h1{font-size:clamp(1.55rem,2.4vw,2.1rem);line-height:1.08;letter-spacing:-.025em}
.topbar:has(+ #section-root .scrap-screen) .title-block p,
.topbar:has(+ #section-root .global-problems-page) .title-block p,
.topbar:has(+ #section-root .notes-screen) .title-block p{margin-top:5px;color:var(--ds-text-muted);font-size:.82rem;line-height:1.4}
.scrap-screen,.global-problems-page,.notes-screen{display:grid;gap:14px;min-width:0}
.scrap-filter-card,.global-problem-filters,.notes-filter-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-items:end;gap:10px;padding:14px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}
.scrap-filter-card label,.notes-filter-card label,.global-problem-filters label{display:grid;gap:6px;min-width:0;color:var(--ds-text-muted);font-size:.72rem;font-weight:600}
.scrap-filter-card input,.scrap-filter-card select,.global-problem-filters input,.global-problem-filters select,.notes-filter-card input,.notes-filter-card select{box-sizing:border-box;width:100%;min-width:0;height:42px;padding:0 11px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-input);background:var(--ds-card);color:var(--ds-text);font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.2;box-shadow:none}
.scrap-filter-card input:focus,.scrap-filter-card select:focus,.global-problem-filters input:focus,.global-problem-filters select:focus,.notes-filter-card input:focus,.notes-filter-card select:focus{outline:none;border-color:var(--ds-primary-border);box-shadow:var(--ds-focus-ring)}
.scrap-filter-card>button,.global-problem-filters>button,.notes-clear-filter{min-height:42px;align-self:end;white-space:nowrap}
.scrap-search-control{position:relative;display:block}.scrap-search-control svg{position:absolute;left:11px;top:50%;width:15px;transform:translateY(-50%);pointer-events:none}.scrap-search-control input{padding-left:34px}
.date-range-filter{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}.date-range-filter>svg{display:none}
.global-problem-search{position:relative}.global-problem-search>svg{position:absolute;left:11px;bottom:13px;width:15px;pointer-events:none}.global-problem-search input{padding-left:34px}
.scrap-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.scrap-kpi-card{min-width:0;padding:13px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);box-shadow:var(--ds-shadow-card);gap:10px}.scrap-kpi-icon{width:36px;height:36px;border-radius:var(--ds-radius-input)}.scrap-kpi-card strong{font-size:clamp(1rem,1.4vw,1.25rem);overflow-wrap:anywhere}.scrap-kpi-card span,.scrap-kpi-card small{font-weight:600}
.scrap-chart-card{border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);box-shadow:var(--ds-shadow-card);overflow:hidden}.scrap-chart-card h2{font-size:.9rem;line-height:1.3}
.scrap-list-card,.global-problem-table-card,.notes-archive-card,.notes-list-panel,.notes-detail-panel{border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);box-shadow:var(--ds-shadow-card);overflow:hidden}
.scrap-table,.global-problem-table,.notes-table-shell table{border-collapse:separate;border-spacing:0;width:100%}.scrap-table th,.scrap-table td,.global-problem-table th,.global-problem-table td,.notes-table-shell th,.notes-table-shell td{border-bottom:1px solid var(--ds-border);vertical-align:middle}.scrap-table th+th,.scrap-table td+td,.global-problem-table th+th,.global-problem-table td+td,.notes-table-shell th+th,.notes-table-shell td+td{border-left:1px solid color-mix(in srgb,var(--ds-border) 68%,transparent)}
.scrap-table tbody tr:hover,.global-problem-table tbody tr:hover,.notes-table-shell tbody tr:hover{background:color-mix(in srgb,var(--ds-info-bg) 44%,transparent)}
.notes-table-shell tbody tr[data-action="preview-note"],.notes-table-shell tbody tr[data-action="preview-note"] td{cursor:pointer}
.sort-header{min-width:0}.sort-header.active{color:var(--ds-primary);font-weight:750}.sort-header.active svg{opacity:1}.sort-header:focus-visible,.note-row:focus-visible,.note-attachment:focus-visible,.note-linked-work-order:focus-visible{outline:2px solid var(--ds-primary-border);outline-offset:2px;box-shadow:var(--ds-focus-ring)}
.global-problem-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0;background:transparent;box-shadow:none}.global-problem-tabs button{min-height:38px;padding:7px 12px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-button);background:var(--ds-card);box-shadow:none;font-weight:600}.global-problem-tabs button.active{border-color:var(--ds-primary-border);background:var(--ds-info-bg);color:var(--ds-primary);box-shadow:var(--ds-shadow-card)}.global-problem-tabs strong{font-size:.74rem}
.notes-tabs{display:flex;gap:6px;width:max-content;max-width:100%;padding:4px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-button);background:var(--ds-bg-soft)}.notes-tabs button{min-height:36px;padding:7px 13px;border-radius:calc(var(--ds-radius-button) - 3px);font-weight:650}.notes-tabs button.active{box-shadow:var(--ds-shadow-card)}
.notes-workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:12px;align-items:start}.notes-list-toolbar{min-height:52px;padding:10px 12px;border-bottom:1px solid var(--ds-border)}.notes-list-toolbar select{height:38px;font-weight:500}.note-row{margin:0;border:0;border-bottom:1px solid var(--ds-border);border-radius:0;box-shadow:none}.note-row:hover{background:var(--ds-bg-soft)}.note-row.active{background:var(--ds-info-bg);box-shadow:inset 3px 0 0 var(--ds-primary)}.note-row-main{min-width:0}.note-row-main strong,.note-row-main p,.note-detail p,.note-table-title span{overflow-wrap:anywhere}.notes-detail-panel{position:sticky;top:12px;max-height:calc(100vh - 150px);overflow:auto}.notes-back-list{display:none}.note-attachment{border:1px solid var(--ds-border);border-radius:var(--ds-radius-input);box-shadow:none}.note-attachment:hover{border-color:var(--ds-primary-border);background:var(--ds-info-bg)}.note-attachment strong{overflow-wrap:anywhere}.note-linked-work-order{padding:0;border:0;background:transparent;color:var(--ds-primary);font-family:inherit;font-size:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.modal-panel.scrap-detail-modal,.modal-panel.note-edit-modal,.modal-panel.note-preview-modal{display:flex;flex-direction:column;width:min(780px,calc(100vw - 28px));max-height:min(720px,calc(100vh - 28px));overflow:hidden;border-radius:var(--ds-radius-modal);box-shadow:var(--ds-shadow-modal)}.scrap-detail-modal .modal-title-row{flex:0 0 auto}.scrap-detail-grid,.note-edit-modal .note-modal-body,.note-preview-modal .note-detail{min-height:0;overflow:auto;overscroll-behavior:contain}.scrap-detail-modal .modal-actions,.note-edit-modal .modal-actions,.note-preview-modal .modal-actions{flex:0 0 auto;margin-top:0;padding-top:14px;border-top:1px solid var(--ds-border);background:var(--ds-card)}
.modal-panel.flow-modal.note-edit-modal{width:min(900px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 28px));border-color:var(--ds-border);border-radius:14px}.note-composer-head{padding:16px 18px}.note-composer-head .flow-modal-icon{width:40px;height:40px;border-radius:10px}.note-composer-head .flow-modal-title h2{font-size:1.18rem}.note-composer-head .flow-modal-title p{font-size:.75rem}.note-composer-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;background:var(--ds-bg-soft)}.note-composer-error{margin:0 0 12px}.note-composer-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:14px;align-items:start}.note-composer-main,.note-composer-sidebar{display:grid;align-content:start;gap:14px;min-width:0;padding:15px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card)}.note-composer-field{display:grid;gap:6px;min-width:0;color:var(--ds-heading);font-size:.72rem;font-weight:750}.note-composer-field>span{display:flex;align-items:center;gap:3px}.note-composer-field em{color:var(--ds-danger);font-style:normal}.note-composer-field input,.note-composer-field select,.note-composer-field textarea{width:100%;min-width:0;min-height:42px;box-sizing:border-box;border:1px solid var(--ds-border);border-radius:9px;padding:9px 11px;background:#fff;color:var(--ds-text);font:inherit;font-size:.78rem;font-weight:500}.note-composer-field textarea{min-height:238px;resize:vertical;line-height:1.5}.note-composer-field input:focus,.note-composer-field select:focus,.note-composer-field textarea:focus{outline:0;border-color:var(--ds-primary);box-shadow:var(--ds-focus-ring)}.note-composer-field :disabled{background:var(--ds-bg-soft);color:var(--ds-text-muted);cursor:not-allowed}.note-composer-message>small{color:var(--ds-text-muted);font-size:.66rem;font-weight:500;line-height:1.4}.note-composer-sidebar .note-priority-field{gap:7px}.note-composer-sidebar .note-priority-field legend{font-size:.72rem;font-weight:750}.note-composer-sidebar .note-priority-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.note-composer-sidebar .note-priority-choice{min-height:38px;padding:0 28px 0 10px;border-radius:9px;font-size:.7rem}.note-composer-sidebar .note-priority-check{right:7px;width:18px;height:18px}.note-composer-sidebar .priority-dot{width:8px;height:8px}.note-composer-sidebar .note-relation-hint{display:flex;align-items:flex-start;gap:7px;margin:0;padding:9px 10px;border-radius:9px;background:var(--ds-info-bg);color:var(--ds-text-muted);font-size:.67rem;line-height:1.4}.note-composer-sidebar .note-relation-hint svg{flex:0 0 auto;width:14px;color:var(--ds-primary)}.note-composer-attachments{display:grid;gap:8px;padding-top:2px}.note-composer-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.note-composer-section-title>span{color:var(--ds-heading);font-size:.72rem;font-weight:750}.note-composer-section-title small{color:var(--ds-text-muted);font-size:.62rem}.note-composer-sidebar .note-upload-zone{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:62px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--ds-info-bg) 58%,#fff);text-align:left}.note-composer-sidebar .note-upload-zone>svg{flex:0 0 auto;width:18px;color:var(--ds-primary)}.note-composer-sidebar .note-upload-zone>span{display:grid;gap:2px}.note-composer-sidebar .note-upload-zone strong{font-size:.7rem}.note-composer-sidebar .note-upload-zone small{color:var(--ds-text-muted);font-size:.62rem;font-weight:500}.note-composer-sidebar .note-upload-zone:disabled{opacity:.62;cursor:not-allowed}.note-composer-sidebar .note-modal-files{display:grid;gap:6px;min-height:0;color:var(--ds-text-muted);font-size:.66rem}.note-composer-sidebar .note-modal-files>span{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--ds-border);border-radius:9px;background:#fff}.note-composer-sidebar .note-modal-files>span>span{display:grid;grid-template-columns:18px minmax(0,1fr);gap:1px 7px;min-width:0}.note-composer-sidebar .note-modal-files>span svg{grid-row:1/3;width:15px;color:var(--ds-primary)}.note-composer-sidebar .note-modal-files strong,.note-composer-sidebar .note-modal-files small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-composer-sidebar .note-modal-files button{display:grid;place-items:center;width:28px;height:28px;border-radius:7px}.note-modal-files-empty{display:flex;align-items:center;gap:7px;padding:7px 2px;color:var(--ds-text-muted)}.note-modal-files-empty svg{width:14px}.note-composer-footer{padding:12px 16px}.note-composer-footer>small{color:var(--ds-text-muted);font-size:.66rem}.note-composer-footer>small strong{color:var(--ds-danger)}.note-composer-footer>div{display:flex;gap:8px}.note-composer-footer button{min-height:40px}.note-composer-footer button svg{width:15px}
.modal-panel.flow-modal.note-preview-modal{width:min(900px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 28px));padding:0;border-color:var(--ds-border);border-radius:14px;background:var(--ds-card)}.note-preview-head{flex:0 0 auto;padding:16px 18px}.note-preview-head .flow-modal-icon{width:40px;height:40px;border-radius:10px}.note-preview-head .flow-modal-title h2{font-size:1.18rem}.note-preview-head .flow-modal-title p{font-size:.75rem}.note-preview-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:14px;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;background:var(--ds-bg-soft)}.note-preview-content,.note-preview-sidebar{display:grid;align-content:start;gap:14px;min-width:0}.note-preview-content{padding:16px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card)}.note-preview-sidebar{padding:15px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card)}.note-preview-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.note-preview-status{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:.68rem;font-weight:750}.note-preview-status.active{background:var(--ds-success-bg);color:var(--ds-success)}.note-preview-status.archived{background:var(--ds-bg-soft);color:var(--ds-text-muted)}.note-preview-message{display:grid;gap:10px;min-height:190px;padding:18px;border:1px solid color-mix(in srgb,var(--ds-border) 82%,transparent);border-radius:10px;background:#fff}.note-preview-message h3,.note-preview-message p,.note-preview-section-heading h3{margin:0}.note-preview-message h3{color:var(--ds-heading);font-size:1.04rem;line-height:1.35;overflow-wrap:anywhere}.note-preview-message p{color:var(--ds-text);font-size:.8rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.note-preview-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.note-preview-section-heading h3{color:var(--ds-heading);font-size:.75rem}.note-preview-section-heading>span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--ds-info-bg);color:var(--ds-primary);font-size:.65rem;font-weight:800}.note-preview-attachments{display:grid;gap:9px;padding-top:2px}.note-preview-attachment-list{display:grid;gap:7px}.note-preview-attachment-list .note-attachment{grid-template-columns:42px minmax(0,1fr) auto;padding:9px 10px}.note-preview-attachment-list .note-attachment img,.note-preview-attachment-list .note-attachment>svg{width:42px;height:36px;border-radius:8px}.note-preview-attachment-list .note-attachment strong{font-size:.72rem}.note-preview-attachment-list .note-attachment small,.note-preview-attachment-list .note-attachment em{font-size:.64rem}.note-preview-empty{display:flex;align-items:center;gap:8px;padding:11px;border:1px dashed var(--ds-border);border-radius:9px;background:var(--ds-bg-soft);color:var(--ds-text-muted);font-size:.68rem;font-weight:600}.note-preview-empty svg{width:16px;color:var(--ds-primary)}.note-preview-meta{display:grid;margin:0}.note-preview-meta>div{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--ds-border)}.note-preview-meta>div:first-child{padding-top:3px}.note-preview-meta>div:last-child{padding-bottom:3px;border-bottom:0}.note-preview-meta dt{color:var(--ds-text-muted);font-size:.63rem;font-weight:700}.note-preview-meta dd{margin:0;color:var(--ds-heading);font-size:.75rem;font-weight:700;line-height:1.45;overflow-wrap:anywhere}.note-preview-footer{flex:0 0 auto;justify-content:space-between;padding:12px 16px}.note-preview-footer>div{display:flex;align-items:center;gap:8px}.note-preview-footer button{min-height:40px}.note-preview-footer button svg{width:15px}.danger-text-button{color:var(--ds-danger)}
@media(max-width:760px){.modal-panel.flow-modal.note-edit-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.note-composer-body{padding:12px}.note-composer-layout{grid-template-columns:minmax(0,1fr)}.note-composer-main,.note-composer-sidebar{padding:13px}.note-composer-field textarea{min-height:160px}.note-composer-footer{align-items:stretch;flex-direction:column}.note-composer-footer>small{text-align:center}.note-composer-footer>div{display:grid;grid-template-columns:1fr 1fr}.note-composer-footer button{width:100%;justify-content:center}}
@media(max-width:760px){.modal-panel.flow-modal.note-preview-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.note-preview-body{grid-template-columns:minmax(0,1fr);padding:12px}.note-preview-content,.note-preview-sidebar{padding:13px}.note-preview-message{min-height:140px}.note-preview-footer{align-items:stretch;flex-direction:column}.note-preview-footer>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.note-preview-footer>div:first-child:empty{display:none}.note-preview-footer>div:first-child:not(:empty){grid-template-columns:minmax(0,1fr)}.note-preview-footer button{width:100%;justify-content:center}}
@media(max-width:440px){.note-composer-head{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:13px}.note-composer-head .flow-modal-icon{width:36px;height:36px}.note-composer-head .flow-modal-title p{display:none}.note-composer-sidebar .note-priority-options{grid-template-columns:minmax(0,1fr)}.note-composer-footer>div{grid-template-columns:minmax(0,1fr)}}
@media(max-width:440px){.modal-backdrop.note-preview-backdrop{padding:0;overflow:hidden}.modal-backdrop.note-preview-backdrop:has(.flow-modal) .modal-panel.flow-modal.note-preview-modal{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}.note-preview-head{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:13px}.note-preview-head .flow-modal-icon{width:36px;height:36px}.note-preview-head .flow-modal-title p{display:none}.note-preview-body{padding:10px}.note-preview-content,.note-preview-sidebar{padding:12px}.note-preview-message{min-height:120px;padding:14px}.note-preview-attachment-list .note-attachment{grid-template-columns:36px minmax(0,1fr)}.note-preview-attachment-list .note-attachment img,.note-preview-attachment-list .note-attachment>svg{width:36px;height:32px}.note-preview-attachment-list .note-attachment em{grid-column:2}.note-preview-footer{padding:10px 12px max(10px,env(safe-area-inset-bottom))}.note-preview-footer>div{grid-template-columns:minmax(0,1fr)}.note-preview-footer>div:first-child:not(:empty){display:none}}
@media(max-width:1180px){.notes-workspace{grid-template-columns:minmax(0,1fr)}.notes-detail-panel{position:static;max-height:none}}
@media(max-width:760px){.scrap-filter-card,.global-problem-filters,.notes-filter-card{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}.scrap-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.notes-workspace:not(.mobile-detail-open) .notes-detail-panel{display:none}.notes-workspace.mobile-detail-open .notes-list-panel{display:none}.notes-workspace.mobile-detail-open .notes-detail-panel{display:block}.notes-back-list{display:inline-flex;align-items:center;gap:6px;margin:10px 12px 0;padding:8px 10px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-button);background:var(--ds-card);color:var(--ds-primary);font-weight:700}.notes-table-shell{overflow-x:auto}.global-problem-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.scrap-filter-card,.global-problem-filters,.notes-filter-card,.scrap-kpi-grid{grid-template-columns:minmax(0,1fr)}.scrap-filter-card>button,.global-problem-filters>button,.notes-clear-filter{width:100%}.notes-tabs{width:100%}.notes-tabs button{flex:1}.scrap-kpi-card{padding:11px}.modal-panel.scrap-detail-modal,.modal-panel.note-edit-modal,.modal-panel.note-preview-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}}

/* Premium operational Analytics: Zaposleni / Proizvodi / Radne stanice only. */
.operational-analytics-screen{gap:14px}
.operational-analytics-screen .analytics-topbar{padding:8px 10px;border-radius:var(--ds-radius-card);box-shadow:var(--ds-shadow-card)}
.operational-analytics-screen .analytics-tabs{min-width:0;overflow-x:auto;scrollbar-width:thin}
.operational-analytics-screen .analytics-tabs button{flex:0 0 auto;min-height:40px;padding:8px 12px}
.operational-analytics-toolbar{display:grid;gap:0;min-width:0;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card);overflow:hidden}
.operational-analytics-toolbar-main{display:flex;align-items:center;gap:10px;min-width:0;padding:12px}
.analytics-period-summary,.operational-primary-filter select,.analytics-filter-toggle{height:42px}
.analytics-period-summary{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:0 12px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-input);background:var(--ds-card);color:var(--ds-text);font:700 .78rem/1 inherit;cursor:pointer}
.analytics-period-summary>svg{width:16px;color:var(--ds-primary)}
.analytics-period-summary>svg:last-child{width:13px;margin-left:3px;color:var(--ds-text-muted)}
.operational-primary-filter{display:block;flex:1 1 280px;min-width:180px}
.operational-primary-filter select{width:100%;min-width:0;padding:0 12px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-input);background:var(--ds-card);font:600 .8rem/1 inherit}
.analytics-filter-toggle.active{border-color:var(--ds-primary-border);background:var(--ds-info-bg);color:var(--ds-primary)}
.analytics-filter-reset{flex:0 0 auto;padding:7px 4px;border:0;background:transparent;color:var(--ds-primary);font:700 .75rem/1 inherit;cursor:pointer}
.operational-period-panel,.operational-advanced-filters{display:grid;align-items:end;gap:12px;padding:13px;border-top:1px solid var(--ds-border);background:var(--ds-bg-soft)}
.operational-period-panel{grid-template-columns:minmax(150px,220px) auto minmax(150px,220px);align-items:center}
.operational-advanced-filters{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.operational-period-panel label,.operational-advanced-filters label{display:grid;gap:6px;min-width:0;color:var(--ds-text-muted);font-size:.7rem;font-weight:700}
.operational-period-panel input,.operational-advanced-filters select{box-sizing:border-box;width:100%;min-width:0;height:42px;padding:0 11px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-input);background:var(--ds-card);color:var(--ds-text);font:600 .78rem/1 inherit}
.operational-analytics-screen .analytics-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.operational-analytics-screen .operational-kpi-card{min-height:82px;padding:11px 13px;border-color:var(--ds-border);border-radius:var(--ds-radius-card);box-shadow:var(--ds-shadow-card)}
.operational-analytics-screen .operational-kpi-card div{width:36px;height:36px}
.operational-analytics-screen .operational-kpi-card span{font-size:.7rem;font-weight:700;text-transform:none;letter-spacing:0}
.operational-analytics-screen .operational-kpi-card strong{font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.15;overflow-wrap:anywhere}
.operational-analytics-screen .operational-kpi-card small{font-size:.7rem;font-weight:600}
.operational-analytics-screen .operational-management-grid{display:grid;grid-template-columns:minmax(310px,.72fr) minmax(620px,1.55fr);gap:12px;align-items:start}
.operational-analytics-screen .operational-management-grid.operational-results-single{grid-template-columns:minmax(0,1fr)}
.operational-analytics-screen .analytics-chart-card,.operational-analytics-screen .analytics-table-card{min-width:0;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card);overflow:hidden}
.operational-ranking-card{padding:18px}
.operational-ranking-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.operational-ranking-card>header small,.operational-analytics-screen .analytics-table-card .panel-header small{display:block;margin-bottom:4px;color:var(--ds-text-muted);font-size:.65rem;font-weight:800;letter-spacing:.08em}
.operational-ranking-card>header h2,.operational-analytics-screen .analytics-table-card .panel-header h2{margin:0;font-size:.98rem;line-height:1.3}
.operational-ranking-card>header>span,.operational-analytics-screen .analytics-table-card .panel-header>span{padding:5px 8px;border-radius:999px;background:var(--ds-bg-soft);color:var(--ds-text-muted);font-size:.67rem;font-weight:700;white-space:nowrap}
.operational-ranking-chart{display:grid;gap:8px}
.operational-ranking-chart button{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:8px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.operational-ranking-chart button:hover,.operational-ranking-chart button:focus-visible{outline:none;background:var(--ds-bg-soft)}
.operational-ranking-chart em{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--ds-info-bg);color:var(--ds-primary);font-size:.65rem;font-style:normal;font-weight:800}
.operational-ranking-chart button>span{display:grid;gap:6px;min-width:0}
.operational-ranking-chart strong{overflow:hidden;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}
.operational-ranking-chart i{display:block;height:6px;border-radius:99px;background:var(--ds-bg-soft);overflow:hidden}
.operational-ranking-chart i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ds-primary),#63a6c8)}
.operational-ranking-chart small{color:var(--ds-text);font-size:.7rem;font-weight:800;white-space:nowrap}
.operational-analytics-screen .analytics-table-card .panel-header{min-height:66px;padding:13px 15px;border-bottom:1px solid var(--ds-border)}
.operational-analytics-screen .analytics-table-wrap{overflow-x:auto}
.operational-analytics-screen .analytics-table{min-width:720px;border-collapse:separate;border-spacing:0}
.operational-analytics-screen .analytics-table th,.operational-analytics-screen .analytics-table td{border-bottom:1px solid var(--ds-border);vertical-align:middle}
.operational-analytics-screen .analytics-table th{white-space:nowrap}
.operational-analytics-screen .analytics-table th+th,.operational-analytics-screen .analytics-table td+td{border-left:1px solid color-mix(in srgb,var(--ds-border) 60%,transparent)}
.operational-analytics-screen .analytics-table td.numeric{text-align:right;font-variant-numeric:tabular-nums}
.operational-analytics-screen .analytics-table tr[data-action]{cursor:pointer}
.operational-analytics-screen .analytics-table tr[data-action]:focus-visible{outline:2px solid var(--ds-primary-border);outline-offset:-2px}
.operational-analytics-screen .sort-header{gap:5px;padding:0;color:var(--ds-text-muted)}
.operational-analytics-screen .sort-header svg{display:none;width:12px;opacity:0}
.operational-analytics-screen .sort-header:hover svg,.operational-analytics-screen .sort-header:focus-visible svg,.operational-analytics-screen .sort-header.active svg{display:block;opacity:1}
.operational-analytics-screen .sort-header.active{color:var(--ds-primary);font-weight:800}
.operational-output-value{color:var(--ds-success);font-weight:800}
.operational-unavailable{color:var(--ds-text-muted);font-weight:600}
.analytics-work-cell{display:grid;gap:2px;justify-items:end}
.analytics-work-cell small{color:var(--ds-text-muted);font-size:.63rem;font-weight:650;white-space:nowrap}
.operational-entity-card .analytics-work-cell{justify-items:end;text-align:right}
.operational-attention{display:inline-flex;align-items:center;max-width:100%;padding:5px 8px;border-radius:999px;font-size:.65rem;font-weight:750;line-height:1.15;white-space:normal}
.operational-attention.neutral{background:var(--ds-bg-soft);color:var(--ds-text-muted)}
.operational-attention.info{background:var(--ds-info-bg);color:var(--ds-primary)}
.operational-attention.warning{background:var(--ds-warning-bg);color:var(--ds-warning)}
.operational-attention.danger{background:var(--ds-danger-bg);color:var(--ds-danger)}
.operational-realization-badge{display:inline-flex;padding:5px 8px;border:1px solid var(--ds-border);border-radius:999px;background:var(--ds-bg-soft);font-size:.66rem;font-weight:700}
.operational-details-button{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid var(--ds-border);border-radius:8px;background:var(--ds-card);color:var(--ds-primary);font:700 .68rem/1 inherit;cursor:pointer}
.operational-details-button svg{width:13px}
.operational-entity-cards{display:none}
.operational-analytics-screen .analytics-note{margin:0;padding:10px 14px;border-top:1px solid var(--ds-border);font-size:.67rem}
body.operational-analytics-modal-open{overflow:hidden}
.operational-analytics-backdrop{padding:clamp(12px,2vw,24px);overflow:hidden;background:rgba(var(--ds-sidebar-rgb),.58);backdrop-filter:blur(3px)}
.modal-panel.flow-modal.analytics-drilldown-modal{display:flex;flex-direction:column;width:min(1180px,calc(100vw - 32px));height:min(880px,calc(100dvh - 32px));max-width:1180px;max-height:calc(100dvh - 32px);padding:0;overflow:hidden;border-radius:20px;background:var(--ds-card);box-shadow:var(--ds-shadow-modal)}
.analytics-drilldown-modal>.flow-modal-head{flex:0 0 auto;padding:18px 20px;border-bottom:1px solid var(--ds-border);background:var(--ds-card)}
.analytics-drilldown-modal>.flow-modal-footer{flex:0 0 auto;padding:13px 20px;border-top:1px solid var(--ds-border);background:var(--ds-card)}
.analytics-drilldown-modal>.flow-modal-footer>span{color:var(--ds-text-muted);font-size:.7rem;font-weight:600}
.analytics-drilldown-body{display:grid;gap:18px;flex:1 1 auto;min-height:0;padding:18px 20px;overflow-y:auto!important;overscroll-behavior:contain}
.analytics-drilldown-summary{padding:16px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-bg-soft)}
.analytics-drilldown-summary>header,.analytics-drilldown-orders>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.analytics-drilldown-summary h3,.analytics-drilldown-orders h3{margin:2px 0 0;font-size:.94rem}
.analytics-drilldown-summary small,.analytics-drilldown-orders small{color:var(--ds-text-muted);font-size:.62rem;font-weight:800;letter-spacing:.08em}
.analytics-drilldown-summary dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.analytics-drilldown-summary dl div{padding:11px;border:1px solid var(--ds-border);border-radius:10px;background:var(--ds-card)}
.analytics-drilldown-summary dt{color:var(--ds-text-muted);font-size:.66rem;font-weight:650}
.analytics-drilldown-summary dd{margin:5px 0 0;font-size:.9rem;font-weight:800;overflow-wrap:anywhere}
.analytics-drilldown-secondary{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ds-border)}
.analytics-drilldown-secondary>span{display:grid;gap:2px;min-width:130px;padding:7px 9px;border-radius:8px;background:var(--ds-card)}
.analytics-drilldown-secondary small{color:var(--ds-text-muted);font-size:.6rem;font-weight:650}
.analytics-drilldown-secondary strong{font-size:.7rem;overflow-wrap:anywhere}
.analytics-drilldown-orders>header>span{display:grid;place-items:center;min-width:28px;height:28px;border-radius:9px;background:var(--ds-info-bg);color:var(--ds-primary);font-size:.72rem;font-weight:800}
.analytics-rn-group,.analytics-operation-group{border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card);overflow:hidden}
.analytics-rn-group+.analytics-rn-group{margin-top:9px}
.analytics-rn-group>summary,.analytics-operation-group>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.analytics-rn-group>summary::-webkit-details-marker,.analytics-operation-group>summary::-webkit-details-marker{display:none}
.analytics-rn-group>summary>span:first-child{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:9px;flex:1;min-width:0}
.analytics-rn-group>summary>span:first-child>svg{grid-row:1/3;width:18px;color:var(--ds-primary)}
.analytics-rn-group summary strong,.analytics-operation-group summary strong{font-size:.78rem;overflow-wrap:anywhere}
.analytics-rn-group summary small,.analytics-operation-group summary small{color:var(--ds-text-muted);font-size:.66rem;font-weight:600}
.analytics-rn-group>summary>svg,.analytics-operation-group>summary>svg{width:14px;transition:transform .18s ease}
.analytics-rn-group[open]>summary>svg,.analytics-operation-group[open]>summary>svg{transform:rotate(180deg)}
.analytics-rn-alerts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.analytics-rn-content{display:grid;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--ds-border);background:var(--ds-bg-soft)}
.analytics-operation-group>summary>span:first-child{display:grid;gap:3px;flex:1;min-width:0}
.analytics-operation-group>summary>span:nth-child(2){color:var(--ds-text-muted);font-size:.67rem;font-weight:700}
.analytics-operation-entries{display:grid;gap:8px;padding:10px;border-top:1px solid var(--ds-border);background:var(--ds-card)}
.analytics-work-entry{padding:11px;border:1px solid var(--ds-border);border-radius:10px;background:var(--ds-card)}
.analytics-work-entry>header{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(0,1.4fr);gap:12px;align-items:center}
.analytics-work-entry>header>span{display:grid;gap:3px}
.analytics-work-entry>header small{color:var(--ds-text-muted);font-size:.64rem}
.analytics-work-entry dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.analytics-work-entry dl div{min-width:0}
.analytics-work-entry dt{color:var(--ds-text-muted);font-size:.61rem;font-weight:650}
.analytics-work-entry dd{margin:3px 0 0;font-size:.72rem;font-weight:800;overflow-wrap:anywhere}
.analytics-allocation-list{display:grid;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--ds-border)}
.analytics-allocation-list h4{margin:0 0 2px;font-size:.7rem}
.analytics-allocation-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:8px;background:var(--ds-bg-soft);font-size:.68rem}
.analytics-allocation-list>div>span:first-child{display:grid;gap:2px}
.analytics-allocation-list small{color:var(--ds-text-muted)}
.analytics-drilldown-empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:160px;color:var(--ds-text-muted)}
.analytics-drilldown-empty svg{width:18px}
@media(max-width:1366px){.operational-analytics-screen .analytics-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.operational-analytics-screen .operational-management-grid{grid-template-columns:minmax(280px,.7fr) minmax(540px,1.3fr)}.operational-analytics-screen .operational-management-grid.operational-results-single{grid-template-columns:minmax(0,1fr)}.modal-panel.flow-modal.analytics-drilldown-modal{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}}
@media(max-width:1050px){.operational-analytics-toolbar-main{flex-wrap:wrap}.operational-primary-filter{order:3;flex-basis:100%}.operational-analytics-screen .operational-management-grid{grid-template-columns:minmax(0,1fr)}.operational-ranking-card{order:1}.operational-analytics-screen .analytics-table-card{order:2}.analytics-drilldown-summary dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.operational-analytics-screen .analytics-topbar{padding:6px}.operational-analytics-toolbar-main{gap:8px;padding:10px}.analytics-period-summary{flex:1 1 auto;justify-content:flex-start}.analytics-filter-toggle{flex:0 0 auto}.analytics-filter-reset{order:4}.operational-primary-filter{min-width:0}.operational-period-panel{grid-template-columns:minmax(0,1fr);align-items:stretch}.operational-period-panel>span{display:none}.operational-advanced-filters{grid-template-columns:minmax(0,1fr)}.operational-analytics-screen .analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.operational-analytics-screen .operational-kpi-card{min-height:105px;padding:12px}.operational-analytics-screen .analytics-table-wrap{display:none}.operational-entity-cards{display:grid}.operational-entity-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.72fr) 16px;align-items:center;gap:9px;width:100%;padding:12px;border:0;border-bottom:1px solid var(--ds-border);background:var(--ds-card);color:inherit;text-align:left;cursor:pointer}.operational-entity-card>span{display:grid;gap:4px;min-width:0}.operational-entity-card>span:nth-child(2){justify-items:end;text-align:right}.operational-entity-card strong,.operational-entity-card b{font-size:.76rem;overflow-wrap:anywhere}.operational-entity-card small{color:var(--ds-text-muted);font-size:.65rem}.operational-entity-card>svg{width:14px;color:var(--ds-primary)}.operational-ranking-card{padding:14px}.modal-panel.flow-modal.analytics-drilldown-modal{width:100vw;height:100dvh;max-width:none;max-height:100dvh;border:0;border-radius:0}.analytics-drilldown-modal>.flow-modal-head{position:sticky;top:0;padding:13px 14px}.analytics-drilldown-modal>.flow-modal-footer{position:sticky;bottom:0;padding:10px 14px}.analytics-drilldown-modal>.flow-modal-footer>span{display:none}.analytics-drilldown-body{padding:12px}.analytics-work-entry>header{grid-template-columns:minmax(0,1fr)}.analytics-work-entry dl{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-rn-alerts{display:none}}
@media(max-width:430px){.operational-analytics-screen .analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operational-analytics-screen .operational-kpi-card:nth-child(n+4){display:grid}.analytics-period-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-filter-toggle span{font-size:0}.analytics-filter-toggle span::after{content:"Filteri";font-size:.75rem}.operational-entity-card{grid-template-columns:minmax(0,1fr) minmax(95px,.65fr) 14px}.analytics-drilldown-summary dl{grid-template-columns:minmax(0,1fr)}.analytics-allocation-list>div{align-items:flex-start;flex-direction:column}.analytics-operation-group>summary>span:nth-child(2){display:none}}

/* Škart premium intelligence workspace */
.topbar:has(+ #section-root .scrap-premium-screen) .title-block{display:none}
.scrap-premium-screen{display:grid;min-width:0;color:var(--ds-text)}
.scrap-premium-shell{display:grid;gap:14px;min-width:0}
.scrap-premium-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}
.scrap-contract-badge,.scrap-quality-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:26px;padding:0 10px;border:1px solid #b9d8c6;border-radius:999px;background:#edf8f1;color:#28633f;font-size:.64rem;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.scrap-premium-filters{display:grid;gap:10px;padding:13px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}
.scrap-filter-primary{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(190px,.95fr) minmax(190px,.85fr) auto auto;align-items:center;gap:9px;min-width:0}
.scrap-filter-primary>label,.scrap-filter-advanced>label{display:grid;gap:5px;min-width:0;color:var(--ds-text-muted);font-size:.66rem;font-weight:700}
.scrap-filter-primary input,.scrap-filter-primary select,.scrap-filter-advanced input,.scrap-filter-advanced select{box-sizing:border-box;width:100%;min-width:0;height:40px;padding:0 10px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-input);background:var(--ds-card);color:var(--ds-text);font:inherit;font-size:.75rem;outline:none}
.scrap-filter-primary input:focus,.scrap-filter-primary select:focus,.scrap-filter-advanced input:focus,.scrap-filter-advanced select:focus{border-color:var(--ds-primary-border);box-shadow:var(--ds-focus-ring)}
.scrap-premium-filters .station-filter-field,
.scrap-premium-filters .station-filter-field span{
  display:grid;
  gap:5px;
  min-width:0;
  color:var(--ds-text-light);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
}
.scrap-premium-filters .station-filter-field input,
.scrap-premium-filters .station-filter-field select{
  display:block;
  width:100%;
  min-width:0;
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--ds-border);
  border-radius:var(--radius-input);
  background:var(--ds-card);
  color:var(--ds-text);
  font:inherit;
  font-size:14px;
  font-weight:500;
  text-transform:none;
}
.scrap-period-control{display:grid;grid-template-columns:auto minmax(100px,1fr) minmax(100px,1fr);align-items:end;gap:8px;min-width:0}.scrap-period-control>span{display:flex;align-items:center;gap:6px;align-self:center;color:var(--ds-text-muted);font-size:.69rem;font-weight:800}.scrap-period-control>span svg{width:15px}.scrap-period-control label{display:grid;gap:4px;color:var(--ds-text-muted);font-size:.62rem;font-weight:700}
.scrap-premium-search>div{position:relative}.scrap-premium-search svg{position:absolute;left:11px;top:50%;width:15px;transform:translateY(-50%);color:var(--ds-text-muted);pointer-events:none}.scrap-premium-search input{padding-left:34px}
.scrap-more-filters,.scrap-clear-filters{min-height:40px;white-space:nowrap}.scrap-more-filters>svg:last-child{width:12px;transition:transform .18s ease}.scrap-more-filters.active>svg:last-child{transform:rotate(180deg)}
.scrap-filter-advanced{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:9px;padding-top:10px;border-top:1px solid var(--ds-border)}
.scrap-production-overview,.scrap-material-section{display:grid;gap:10px;min-width:0}
.scrap-section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:0 2px}.scrap-section-heading>div{display:grid;gap:2px}.scrap-section-heading span,.scrap-insight-card>header span{color:var(--ds-primary);font-size:.61rem;font-weight:850;letter-spacing:.055em;text-transform:uppercase}.scrap-section-heading h2,.scrap-insight-card>header h2,.scrap-events-card>header h2,.scrap-guidance-card h2{margin:0;font-size:.94rem;line-height:1.3}.scrap-section-heading>small{color:var(--ds-text-muted);font-size:.66rem;font-weight:650}
.scrap-premium-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.scrap-premium-kpi{display:flex;align-items:center;gap:11px;min-width:0;min-height:88px;padding:13px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}.scrap-premium-kpi-icon{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--ds-info-bg);color:var(--ds-primary)}.scrap-premium-kpi-icon svg{width:18px}.scrap-premium-kpi>div{display:grid;gap:3px;min-width:0}.scrap-premium-kpi small,.scrap-premium-kpi em{color:var(--ds-text-muted);font-size:.64rem;font-style:normal;font-weight:650;line-height:1.3;overflow-wrap:anywhere}.scrap-premium-kpi strong{font-size:1.03rem;line-height:1.25;overflow-wrap:anywhere}.scrap-premium-kpi.tone-danger .scrap-premium-kpi-icon{background:#fff0ee;color:#a43b32}.scrap-premium-kpi.tone-warning .scrap-premium-kpi-icon{background:#fff7e7;color:#98610d}.scrap-premium-kpi.tone-purple .scrap-premium-kpi-icon{background:#f3efff;color:#6650a8}.scrap-premium-kpi.tone-neutral .scrap-premium-kpi-icon{background:var(--ds-bg-soft);color:var(--ds-text-muted)}
.scrap-analysis-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);gap:12px;min-width:0}.scrap-insight-card{display:grid;align-content:start;gap:12px;min-width:0;padding:15px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}.scrap-insight-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.scrap-insight-card>header>div{display:grid;gap:2px}.scrap-insight-card>header small{color:var(--ds-text-muted);font-size:.62rem;font-weight:650}
.scrap-pareto-list{display:grid;gap:8px}.scrap-pareto-row{display:grid;grid-template-columns:24px minmax(0,1fr) 105px;align-items:center;gap:9px}.scrap-pareto-rank{display:grid;place-items:center;width:23px;height:23px;border-radius:8px;background:var(--ds-bg-soft);color:var(--ds-text-muted);font-size:.65rem;font-weight:850}.scrap-pareto-main{display:grid;gap:5px;min-width:0}.scrap-pareto-main>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.scrap-pareto-main strong{font-size:.72rem;overflow-wrap:anywhere}.scrap-pareto-main em{color:var(--ds-text-muted);font-size:.65rem;font-style:normal;font-weight:750;white-space:nowrap}.scrap-pareto-main>span{height:7px;overflow:hidden;border-radius:999px;background:var(--ds-bg-soft)}.scrap-pareto-main i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b54a40,#df8277)}.scrap-pareto-share{display:grid;justify-items:end;gap:1px}.scrap-pareto-share strong{font-size:.73rem}.scrap-pareto-share small{color:var(--ds-text-muted);font-size:.56rem;text-align:right}
.scrap-ranking-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;padding:4px;border:1px solid var(--ds-border);border-radius:999px;gap:0}.scrap-ranking-tabs button{min-width:0;height:33px;padding:0 7px;border:0;background:transparent;color:var(--ds-text-muted);font:inherit;font-size:.64rem;font-weight:750;cursor:pointer;position:relative;transition:background-color .16s,color .16s,border-color .16s}.scrap-ranking-tabs button+button{border-left:1px solid color-mix(in srgb,var(--ds-border) 80%,transparent)}.scrap-ranking-tabs button:hover{background:var(--ds-bg-soft);color:var(--ds-heading)}.scrap-ranking-tabs button:focus-visible{outline:2px solid var(--ds-primary);outline-offset:-3px;z-index:1}.scrap-ranking-tabs button.active{background:var(--ds-bg-soft);color:var(--ds-primary);box-shadow:inset 0 0 0 1px var(--ds-primary)}.scrap-ranking-list{display:grid}.scrap-ranking-list>div{display:grid;grid-template-columns:22px minmax(0,1fr) auto 48px;align-items:center;gap:8px;padding:9px 2px;border-bottom:1px solid var(--ds-border)}.scrap-ranking-list>div:last-child{border-bottom:0}.scrap-ranking-list span{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--ds-info-bg);color:var(--ds-primary);font-size:.61rem;font-weight:850}.scrap-ranking-list strong{font-size:.7rem;overflow-wrap:anywhere}.scrap-ranking-list em{color:var(--ds-text-muted);font-size:.63rem;font-style:normal;font-weight:650}.scrap-ranking-list b{font-size:.68rem;text-align:right}.scrap-neutral-note{display:flex;align-items:flex-start;gap:6px;margin:0;padding:9px;border-radius:9px;background:var(--ds-info-bg);color:var(--ds-text-muted);font-size:.61rem;line-height:1.4}.scrap-neutral-note svg{flex:0 0 auto;width:14px;color:var(--ds-primary)}
.scrap-quality-badge.incomplete,.scrap-quality-badge.nepotpuno{border-color:#e7c98d;background:#fff7e5;color:#87580b}.scrap-quality-badge.unavailable,.scrap-quality-badge.nedostupno{border-color:var(--ds-border);background:var(--ds-bg-soft);color:var(--ds-text-muted)}
.scrap-material-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}.scrap-material-quantities,.scrap-material-cost{min-width:0;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}.scrap-material-quantities{overflow:hidden}.scrap-material-mobile-list{display:none}
.scrap-material-cost{display:grid;align-content:start;gap:0;overflow:hidden}.scrap-material-cost>header{padding:14px 16px;border-bottom:1px solid var(--ds-border)}.scrap-material-cost>header>div{display:flex;align-items:center;gap:8px}.scrap-material-cost>header span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ds-info-bg);color:var(--ds-primary)}.scrap-material-cost>header svg{width:16px}.scrap-material-cost>header strong{font-size:.8rem}.scrap-cost-overview{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:14px;padding:15px 16px}.scrap-cost-values,.scrap-cost-coverage{display:grid;align-content:start;gap:12px;min-width:0}.scrap-cost-values>section,.scrap-cost-coverage>section{display:grid;gap:7px}.scrap-cost-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.scrap-cost-groups article{display:grid;gap:3px;padding:11px;border:1px solid #cce1d4;border-radius:10px;background:#f3faf6}.scrap-cost-groups.estimated article{border-color:#d7d8eb;background:#f7f7fc}.scrap-cost-groups span,.scrap-cost-groups small{color:var(--ds-text-muted);font-size:.61rem}.scrap-cost-groups strong{font-size:.9rem}.scrap-material-cost dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.scrap-material-cost dl div{padding:10px;border-radius:9px;background:var(--ds-bg-soft)}.scrap-material-cost dt{color:var(--ds-text-muted);font-size:.6rem}.scrap-material-cost dd{margin:3px 0 0;font-size:.72rem;font-weight:800}.scrap-cost-note{display:flex;align-items:flex-start;gap:7px;margin:0 16px 15px;padding:10px;border-radius:9px;background:#fff8e9;color:#73531d;font-size:.63rem;line-height:1.45}.scrap-cost-note.exact{background:#eef8f2;color:#2c6543}.scrap-cost-note svg{flex:0 0 auto;width:14px}
.scrap-guidance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.scrap-guidance-card{min-width:0;padding:15px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}.scrap-guidance-card>header{display:flex;align-items:center;gap:9px;margin-bottom:10px}.scrap-guidance-card>header>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ds-info-bg);color:var(--ds-primary)}.scrap-guidance-card>header svg{width:16px}.scrap-guidance-card>header>div{display:grid;gap:1px}.scrap-guidance-card>header small{color:var(--ds-text-muted);font-size:.58rem;text-transform:uppercase;letter-spacing:.04em}.scrap-guidance-card>p{margin:0;color:var(--ds-text-muted);font-size:.68rem;line-height:1.5}.scrap-recurrence-list{display:grid;gap:6px}.scrap-recurrence-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;border-radius:8px;background:var(--ds-bg-soft)}.scrap-recurrence-list strong{font-size:.67rem}.scrap-recurrence-list span{color:var(--ds-text-muted);font-size:.6rem;text-align:right}.scrap-guidance-card ol{display:grid;gap:7px;margin:0;padding-left:20px}.scrap-guidance-card li{padding-left:3px;color:var(--ds-text-muted);font-size:.67rem;line-height:1.45}
.scrap-events-card{min-width:0;overflow:hidden;border:1px solid var(--ds-border);border-radius:var(--ds-radius-card);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}.scrap-events-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--ds-border)}.scrap-events-card>header>div{display:grid;gap:2px}.scrap-events-card>header span{color:var(--ds-primary);font-size:.59rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.scrap-events-card>header>strong{display:grid;place-items:center;min-width:31px;height:31px;padding:0 8px;border-radius:9px;background:var(--ds-info-bg);color:var(--ds-primary);font-size:.72rem}.scrap-events-table-wrap{width:100%;overflow-x:auto}.scrap-events-table-wrap table{width:100%;min-width:1120px;border-collapse:separate;border-spacing:0}.scrap-events-table-wrap th,.scrap-events-table-wrap td{border-bottom:1px solid var(--ds-border);vertical-align:middle}.scrap-events-table-wrap th+th,.scrap-events-table-wrap td+td{border-left:1px solid color-mix(in srgb,var(--ds-border) 65%,transparent)}.scrap-events-table-wrap th{
}.scrap-events-table-wrap tbody tr:hover{background:color-mix(in srgb,var(--ds-info-bg) 40%,transparent)}.scrap-event-product{display:grid;gap:2px;min-width:130px}.scrap-event-product small{color:var(--ds-text-muted);font-size:.58rem}.scrap-event-quantity{color:#973b33;white-space:nowrap}.scrap-event-mobile-list{display:none}.scrap-events-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px}.scrap-events-footer>span{color:var(--ds-text-muted);font-size:.64rem;font-weight:650}.scrap-events-footer>div,.scrap-events-footer nav{display:flex;align-items:center;gap:5px}.scrap-events-footer button{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border:1px solid var(--ds-border);border-radius:8px;background:var(--ds-card);color:var(--ds-text);font:inherit;font-size:.64rem;font-weight:750}.scrap-events-footer button.active{border-color:var(--ds-primary-border);background:var(--ds-info-bg);color:var(--ds-primary)}.scrap-events-footer button:disabled{opacity:.45}.scrap-events-footer button svg{width:13px}.scrap-events-footer select{height:32px;padding:0 8px;border:1px solid var(--ds-border);border-radius:8px;background:var(--ds-card);font:inherit;font-size:.64rem}
.scrap-premium-empty,.scrap-premium-loading{display:grid;justify-items:center;align-content:center;gap:7px;min-height:150px;padding:24px;color:var(--ds-text-muted);text-align:center}.scrap-premium-empty>span,.scrap-premium-loading>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ds-bg-soft);color:var(--ds-primary)}.scrap-premium-empty svg,.scrap-premium-loading svg{width:20px}.scrap-premium-empty strong,.scrap-premium-loading strong{color:var(--ds-text);font-size:.78rem}.scrap-premium-empty p,.scrap-premium-loading p{max-width:560px;margin:0;font-size:.67rem;line-height:1.5}.scrap-premium-loading.error>span{background:#fff0ee;color:#a43b32}
.modal-panel.scrap-premium-detail{display:flex;flex-direction:column;width:min(760px,calc(100vw - 28px));max-height:min(780px,calc(100dvh - 28px));overflow:hidden;border-radius:var(--ds-radius-modal)}.scrap-premium-detail .modal-title-row{position:relative;padding-right:42px}.scrap-premium-detail .modal-title-row .plain-icon{position:absolute;right:13px;top:13px;width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--ds-primary-border);border-radius:8px;background:var(--ds-card)}.scrap-premium-detail .modal-title-row .plain-icon svg{width:16px;height:16px}.scrap-premium-detail-body{display:grid;gap:10px;min-height:0;padding:16px 16px 14px;overflow:auto}.scrap-detail-section{padding:13px;border:1px solid var(--ds-border);border-radius:11px;background:var(--ds-card)}.scrap-detail-section>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.scrap-detail-section h3{margin:0;font-size:.76rem}.scrap-detail-section>header span{color:var(--ds-text-muted);font-size:.58rem}.scrap-detail-section dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0}.scrap-detail-section dl div{min-width:0;padding:8px;border-radius:8px;background:var(--ds-bg-soft)}.scrap-detail-section dt{color:var(--ds-text-muted);font-size:.58rem}.scrap-detail-section dd{margin:3px 0 0;font-size:.68rem;font-weight:750;overflow-wrap:anywhere}.scrap-detail-section>p{margin:0 0 10px;color:var(--ds-text-muted);font-size:.63rem;line-height:1.45}.scrap-detail-section ul{display:grid;gap:6px;margin:0;padding-left:18px;color:var(--ds-text-muted);font-size:.65rem;line-height:1.45}.scrap-detail-patterns{display:flex;flex-wrap:wrap;gap:7px}.scrap-detail-patterns span{display:grid;gap:2px;padding:8px 9px;border-radius:8px;background:var(--ds-bg-soft);color:var(--ds-text-muted);font-size:.59rem}.scrap-detail-patterns strong{color:var(--ds-text);font-size:.64rem}

/* Scrap-only premium explainability polish. */
.scrap-reason-donut-layout{display:grid;grid-template-columns:172px max-content;align-items:center;justify-content:center;gap:18px;min-height:184px}.scrap-reason-donut{position:relative;width:172px;height:172px}.scrap-reason-donut>.chart-donut-svg{display:block;width:172px;height:172px}.scrap-reason-donut>span{position:absolute;inset:50% auto auto 50%;display:grid;justify-items:center;gap:1px;transform:translate(-50%,-50%);pointer-events:none}.scrap-reason-donut>span strong{font-size:1.35rem;line-height:1}.scrap-reason-donut>span small{color:var(--ds-text-muted);font-size:.66rem;font-weight:800}.scrap-reason-legend{display:grid;gap:6px;width:max-content;max-width:100%}.scrap-reason-legend>div{display:grid;grid-template-columns:9px minmax(90px,180px) auto auto;align-items:center;gap:8px;min-height:32px}.scrap-reason-legend i{width:9px;height:9px;border-radius:50%}.scrap-reason-legend span{overflow:hidden;color:var(--ds-text);font-size:.7rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.scrap-reason-legend strong,.scrap-reason-legend b{font-size:.67rem;white-space:nowrap}.scrap-reason-legend b{min-width:42px;color:var(--ds-text-muted);text-align:right}
.scrap-ranking-tabs{gap:4px;background:var(--ds-bg-soft);border-radius:var(--ds-radius-button)}.scrap-ranking-tabs button{border-radius:calc(var(--ds-radius-button) - 3px)}.scrap-ranking-tabs button+button{border-left:0}.scrap-ranking-tabs button.active{border:1px solid var(--ds-primary-border);background:var(--ds-card);box-shadow:var(--ds-shadow-card)}
.scrap-section-heading>div>small{color:var(--ds-text-muted);font-size:.66rem;line-height:1.4}.scrap-material-table-wrap{width:100%;max-height:500px;overflow:auto;overscroll-behavior:contain}.scrap-material-table{width:100%;min-width:790px;table-layout:fixed;border-collapse:separate;border-spacing:0}.scrap-material-col-code{width:150px}.scrap-material-col-name{width:auto}.scrap-material-col-quantity{width:135px}.scrap-material-col-orders{width:160px}.scrap-material-col-action{width:68px}.scrap-material-table th,.scrap-material-table td{border-bottom:1px solid var(--ds-border);vertical-align:middle}.scrap-material-table th+th,.scrap-material-table td+td{border-left:1px solid color-mix(in srgb,var(--ds-border) 72%,transparent)}.scrap-material-table th{position:sticky;top:0;z-index:1;text-align:left}.scrap-material-table th .sort-header{width:100%;font:inherit;font-weight:inherit;text-align:left}.scrap-material-table tbody tr{background:var(--ds-card);transition:background .16s ease}.scrap-material-table tbody tr:hover{background:color-mix(in srgb,var(--ds-info-bg) 42%,var(--ds-card))}.scrap-material-table tbody tr:last-child td{border-bottom:0}.scrap-material-code strong{font-size:.72rem}.scrap-material-name span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scrap-material-quantity{text-align:right;white-space:nowrap;font-weight:750}.scrap-material-orders{white-space:nowrap}.scrap-material-action-head,.scrap-material-action{text-align:right!important}.scrap-material-action>.icon-button{display:grid;place-items:center;width:34px;height:34px;min-width:34px;margin-left:auto}.scrap-material-action>.icon-button svg{width:15px;height:15px}.scrap-material-rn-count{justify-self:start;padding:0;border:0;border-bottom:1px dotted currentColor;background:transparent;color:var(--ds-primary);font:inherit;font-size:.66rem;font-weight:750;cursor:pointer;white-space:nowrap}.scrap-material-rn-count:disabled{border:0;color:var(--ds-text-muted);cursor:default}.scrap-material-limit-note{margin:0;padding:9px 13px;border-top:1px solid var(--ds-border);color:var(--ds-text-muted);font-size:.62rem}.scrap-material-cost h3{margin:0;color:var(--ds-text-muted);font-size:.62rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}.scrap-cost-missing button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px;border:1px solid #e7c98d;border-radius:9px;background:#fff8e9;color:#73531d;font:inherit;font-size:.64rem;font-weight:750;text-align:left;cursor:pointer}.scrap-cost-missing button svg{flex:0 0 auto;width:13px}.scrap-cost-missing>p{margin:0;padding:10px;border-radius:9px;background:#fff8e9;color:#73531d;font-size:.64rem;line-height:1.4}
.scrap-ranking-disclosure{display:flex;align-items:flex-start;gap:7px;margin:0;padding:10px;border:1px solid var(--ds-primary-border);border-radius:9px;background:var(--ds-info-bg);color:var(--ds-text);font-size:.65rem;line-height:1.45}.scrap-ranking-disclosure>svg{flex:0 0 auto;width:14px;color:var(--ds-primary)}.scrap-ranking-disclosure>span{display:grid;gap:2px}.scrap-ranking-disclosure small{color:var(--ds-text-muted);font-size:.61rem}
.scrap-guidance-section{display:grid;gap:10px}.scrap-guidance-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.scrap-guidance-card{display:grid;align-content:start;gap:9px;border-top:3px solid var(--ds-primary-border)}.scrap-guidance-card.tone-attention{border-top-color:#d59a35}.scrap-guidance-card>header{margin-bottom:0}.scrap-guidance-card>header h2{font-size:.8rem}.scrap-guidance-evidence{color:var(--ds-text)!important}.scrap-guidance-figure{font-size:1rem}.scrap-guidance-limitation{padding-top:7px;border-top:1px solid var(--ds-border);color:var(--ds-text-muted);font-size:.61rem;line-height:1.45}.scrap-guidance-card .compact-command{justify-self:start;margin-top:2px}
.modal-panel.scrap-explainability-modal{display:flex;flex-direction:column;width:min(720px,calc(100vw - 28px));max-height:min(720px,calc(100dvh - 28px));overflow:hidden;padding:0;border-radius:var(--ds-radius-modal);outline:0}.scrap-explainability-modal .modal-title-row{position:relative;padding:18px 58px 16px 18px;border-bottom:1px solid var(--ds-border)}.scrap-explainability-modal .modal-title-row>.plain-icon{position:absolute;top:14px;right:14px}.scrap-explainability-list{display:grid;min-height:0;padding:6px 18px;overflow:auto}.scrap-explainability-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--ds-border)}.scrap-explainability-list article:last-child{border-bottom:0}.scrap-explainability-list article>div{display:grid;gap:3px;min-width:0}.scrap-explainability-list strong{font-size:.76rem}.scrap-explainability-list span,.scrap-explainability-list small{color:var(--ds-text-muted);font-size:.65rem;overflow-wrap:anywhere}.scrap-explainability-list button{flex:0 0 auto}.scrap-explainability-modal>.modal-actions{margin:0;padding:12px 18px;border-top:1px solid var(--ds-border);background:var(--ds-bg-soft)}
@media(max-width:1366px){.scrap-filter-primary{grid-template-columns:minmax(250px,1.2fr) minmax(205px,1fr) minmax(170px,.75fr) auto}.scrap-clear-filters{grid-column:4}.scrap-filter-advanced{grid-template-columns:repeat(3,minmax(0,1fr))}.scrap-premium-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.scrap-analysis-grid{grid-template-columns:minmax(0,1fr) minmax(330px,.8fr)}}
@media(max-width:1000px){.scrap-filter-primary{grid-template-columns:repeat(2,minmax(0,1fr))}.scrap-period-control{grid-column:1/-1}.scrap-more-filters,.scrap-clear-filters{grid-column:auto}.scrap-analysis-grid{grid-template-columns:minmax(0,1fr)}.scrap-guidance-grid{grid-template-columns:minmax(0,1fr)}.scrap-cost-overview{grid-template-columns:minmax(0,1fr)}.scrap-events-table-wrap table{min-width:1040px}.modal-panel.scrap-explainability-modal{width:calc(100vw - 24px)}}
@media(max-width:760px){.scrap-premium-header{align-items:flex-start;padding:14px}.scrap-contract-badge{display:none}.scrap-filter-primary{grid-template-columns:minmax(0,1fr)}.scrap-period-control{grid-column:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.scrap-period-control>span{grid-column:1/-1}.scrap-more-filters,.scrap-clear-filters{grid-column:auto;width:100%}.scrap-filter-advanced{grid-template-columns:minmax(0,1fr)}.scrap-premium-kpis{gap:8px}.scrap-premium-kpi{min-height:82px;padding:11px}.scrap-pareto-row{grid-template-columns:22px minmax(0,1fr) 82px}.scrap-pareto-share small{display:none}.scrap-reason-donut-layout{grid-template-columns:160px minmax(0,max-content);gap:12px}.scrap-reason-donut,.scrap-reason-donut>.chart-donut-svg{width:160px;height:160px}.scrap-material-lines{grid-template-columns:minmax(0,1fr)}.scrap-material-list-head{display:none}.scrap-material-lines article{grid-template-columns:minmax(0,1fr) auto}.scrap-material-lines article b{grid-column:2;grid-row:1}.scrap-material-lines article>.scrap-material-rn-count{grid-column:1;grid-row:2}.scrap-material-lines article>.icon-button{grid-column:2;grid-row:2;justify-self:end;width:34px;height:34px}.scrap-events-table-wrap{display:none}.scrap-event-mobile-list{display:grid}.scrap-event-mobile-list>article{display:grid;gap:9px;padding:13px;border-bottom:1px solid var(--ds-border)}.scrap-event-mobile-list>article:last-child{border-bottom:0}.scrap-event-mobile-list header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.scrap-event-mobile-list header>div{display:grid;gap:2px}.scrap-event-mobile-list header span,.scrap-event-mobile-list p,.scrap-event-mobile-list dt{color:var(--ds-text-muted);font-size:.61rem}.scrap-event-mobile-list header strong,.scrap-event-mobile-list header b{font-size:.7rem}.scrap-event-mobile-list header b{padding:5px 8px;border-radius:999px;background:#fff0ee;color:#973b33;white-space:nowrap}.scrap-event-mobile-list h3{margin:0;font-size:.77rem}.scrap-event-mobile-list p{margin:0;line-height:1.4}.scrap-event-mobile-list dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}.scrap-event-mobile-list dl div{min-width:0;padding:7px;border-radius:8px;background:var(--ds-bg-soft)}.scrap-event-mobile-list dd{margin:3px 0 0;font-size:.63rem;font-weight:700;overflow-wrap:anywhere}.scrap-event-mobile-list button{justify-self:start}.scrap-events-footer{align-items:flex-start;flex-direction:column}.scrap-events-footer>div{width:100%;justify-content:space-between;min-width:0}.modal-panel.scrap-premium-detail,.modal-panel.scrap-explainability-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.scrap-detail-section dl{grid-template-columns:minmax(0,1fr)}}
@media(max-width:430px){.scrap-premium-shell{gap:10px}.scrap-premium-header h1{font-size:1.08rem}.scrap-premium-header .module-title-block>span{font-size:.69rem}.scrap-premium-kpis{grid-template-columns:minmax(0,1fr)}.scrap-premium-kpi{min-height:76px}.scrap-section-heading{align-items:flex-start;flex-direction:column;gap:3px}.scrap-analysis-grid{gap:10px}.scrap-insight-card{padding:12px}.scrap-ranking-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.scrap-reason-donut-layout{grid-template-columns:minmax(0,1fr);justify-items:center}.scrap-reason-legend{width:100%}.scrap-reason-legend>div{grid-template-columns:9px minmax(0,1fr) auto auto}.scrap-pareto-row{grid-template-columns:20px minmax(0,1fr) 64px}.scrap-pareto-main em{display:none}.scrap-material-lines{grid-template-columns:minmax(0,1fr)}.scrap-material-cost dl{grid-template-columns:minmax(0,1fr)}.scrap-recurrence-list>div{align-items:flex-start;flex-direction:column}.scrap-recurrence-list span{text-align:left}.scrap-explainability-list article{align-items:flex-start;flex-direction:column}.scrap-events-footer nav{max-width:100%;overflow-x:auto}.scrap-events-footer>div{align-items:flex-start;flex-direction:column}.scrap-premium-detail .modal-title-row{padding-right:44px}.scrap-premium-detail .modal-title-row .plain-icon{position:absolute;right:13px;top:13px}.scrap-premium-detail .modal-actions .secondary-button{width:100%}}

@media(max-width:760px){.scrap-material-table-wrap{display:none}.scrap-material-mobile-list{display:grid;gap:8px;padding:8px;background:var(--ds-bg-soft)}.scrap-material-mobile-list>article{display:grid;gap:10px;padding:12px;border:1px solid var(--ds-border);border-radius:10px;background:var(--ds-card);box-shadow:0 2px 8px rgba(22,42,63,.05)}.scrap-material-mobile-list header{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:start;gap:10px}.scrap-material-mobile-list header>div{display:grid;gap:3px;min-width:0}.scrap-material-mobile-list header strong{font-size:.72rem}.scrap-material-mobile-list header span{overflow:hidden;color:var(--ds-text-muted);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.scrap-material-mobile-list header>.icon-button{display:grid;place-items:center;width:34px;height:34px;min-width:34px}.scrap-material-mobile-list header>.icon-button svg{width:15px;height:15px}.scrap-material-mobile-list dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.scrap-material-mobile-list dl>div{min-width:0;padding:8px;border-radius:8px;background:var(--ds-bg-soft)}.scrap-material-mobile-list dt{color:var(--ds-text-muted);font-size:.58rem}.scrap-material-mobile-list dd{margin:3px 0 0;font-size:.66rem;font-weight:750}.scrap-cost-overview{padding:13px}.scrap-cost-note{margin:0 13px 13px}}
@media(max-width:640px){.modal-backdrop:has(>.scrap-explainability-modal){align-items:end;padding:0}.modal-panel.scrap-explainability-modal{width:100vw;max-width:100vw;max-height:calc(100dvh - 12px);border-radius:var(--ds-radius-modal) var(--ds-radius-modal) 0 0}.scrap-explainability-modal .modal-title-row{padding:16px 54px 14px 14px}.scrap-explainability-list{padding:4px 14px}.scrap-explainability-list article{grid-template-columns:minmax(0,1fr);gap:9px}.scrap-explainability-list article>button{justify-self:start}.scrap-explainability-modal>.modal-actions{padding:11px 14px max(11px,env(safe-area-inset-bottom))}.scrap-explainability-modal>.modal-actions .secondary-button{width:100%}}
/* Product copy: compact draft-first chooser and source selector. */
.product-create-choice-modal{width:min(680px,calc(100vw - 32px))}
.product-create-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px}
.product-create-choice-grid>button{display:flex;align-items:flex-start;gap:14px;text-align:left;border:1px solid #c8d9e5;border-radius:16px;background:#fff;padding:20px;color:#17324d;box-shadow:0 8px 24px rgba(25,58,85,.08)}
.product-create-choice-grid>button:hover{border-color:#5797c3;background:#f6fbff;transform:translateY(-1px)}
.product-create-choice-grid svg{width:24px;height:24px;color:#2477aa;flex:none}
.product-create-choice-grid span{display:grid;gap:5px}.product-create-choice-grid strong{font-size:16px}.product-create-choice-grid small{color:#607789;line-height:1.45}
.product-copy-selector-modal{width:min(760px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 32px))}
.product-copy-selector-body{display:grid;gap:14px;padding:20px 24px;min-height:320px;overflow:hidden}
.product-copy-selector-list{display:grid;gap:8px;overflow:auto;padding-right:4px}
.product-copy-selector-list>button{display:grid;gap:4px;text-align:left;border:1px solid #d5e2eb;border-radius:12px;background:#fff;padding:14px 16px;color:#18364c}
.product-copy-selector-list>button:hover{border-color:#4e94c2;background:#f5faff}.product-copy-selector-list>button span{color:#4f697a}.product-copy-selector-list>button small{color:#728794}
.product-copy-source-context{margin-top:5px!important;color:#4e6c7e!important}.product-copy-source-context strong{color:#1f6f9f}
.product-copy-bom-context{margin-top:3px!important;color:#6b7f8c!important;font-size:12px!important}
.product-copy-neutral-note{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid #cfe0eb;border-radius:10px;background:#f5f9fc;color:#476476}
.product-copy-neutral-note svg{width:18px;height:18px;flex:none}
@media(max-width:640px){.product-create-choice-grid{grid-template-columns:1fr;padding:16px}.product-copy-selector-body{padding:16px}.product-copy-selector-modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}}
/* Machines Phase 2: Product planned costing */
.product-inline-operation .product-operation-machine {
  grid-column: 2 / -2;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.15fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid #cfe0ef;
  border-radius: 14px;
  background: #f7fbff;
}
.product-operation-machine-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.product-operation-machine-actions .danger-action { margin-left: auto; }
.product-operation-machine-fields { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(210px,1fr) minmax(260px,1.15fr); gap: 14px; align-items: end; }
.product-operation-machine.settled { display: block; }
.product-operation-machine-settled { display: grid; grid-template-columns: minmax(210px,1fr) minmax(180px,.7fr) auto; align-items: center; gap: 16px; }
.product-operation-machine-settled > div { display: grid; gap: 3px; min-width: 0; }
.product-operation-machine-settled small { color: var(--ds-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.product-operation-machine-settled strong { overflow-wrap: anywhere; }
.product-operation-machine.invalid { border-color: #efc8c8; background: #fff9f8; }
.product-operation-machine .custom-row-error { grid-column: 1 / -1; }
.product-operation-machine-optin { grid-column: 2 / -2; }
.plain-text-button { border: 0; background: transparent; color: var(--ds-primary); font-weight: 700; cursor: pointer; padding: 4px 0; }
.plain-text-button.danger { color: #b3262d; }
.product-costing-column { display: grid; gap: 16px; }
.product-costing-section { display: grid; gap: 14px; }
.product-costing-section > .custom-panel-head > strong { color: var(--ds-primary-hover); font-size: 22px; }
.product-machine-cost-lines { display: grid; gap: 10px; }
.product-machine-cost-lines > article { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(360px, 1.4fr); gap: 16px; padding: 13px 14px; border: 1px solid #d9e5ef; border-radius: 12px; background: #fff; }
.product-machine-cost-lines > article.incomplete { border-color: #efd6a4; background: #fffaf0; }
.product-machine-cost-lines article > div { display: grid; gap: 3px; }
.product-machine-cost-lines article > div small,.product-machine-cost-lines article > div span { color: var(--ds-muted); }
.product-machine-cost-lines article > div em { color: #9a5d00; font-style: normal; font-size: 12px; }
.product-machine-cost-lines dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(100px,1fr)); gap: 10px; }
.product-machine-cost-lines dl div { display: grid; align-content: center; gap: 3px; }
.product-machine-cost-lines dt { color: var(--ds-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.product-machine-cost-lines dd { margin: 0; font-weight: 800; }
.product-human-cost-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: end; }
.product-human-rate-input .machine-money-suffix { display:flex;align-items:center;justify-content:center;min-width:68px;height:44px;padding:0 14px;border:1px solid var(--ds-border);border-left:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-sizing:border-box;color:var(--ds-primary-hover);background:var(--ds-primary-light);font-size:12px;font-weight:850;line-height:1;white-space:nowrap; }
.product-human-rate-input:focus-within .machine-money-suffix { border-color:var(--ds-primary); }
.product-human-derived-cost { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--ds-primary-border);border-radius:12px;background:var(--ds-primary-light); }
.product-human-derived-cost span { color:var(--ds-muted);font-size:12px;font-weight:750; }
.product-human-derived-cost strong { margin-left:auto;color:var(--ds-primary-hover);font-size:20px; }
.product-human-derived-cost small { color:var(--ds-muted); }
.product-human-derived-cost.pending strong { color:var(--ds-muted);font-size:14px; }
.product-final-cost-section { padding: 18px; display: grid; gap: 14px; border: 1px solid #c8ddeb; background: linear-gradient(145deg,#f8fcff,#eef7fc); }
.product-final-cost-section.partial { border-color: #ead6a8; background: linear-gradient(145deg,#fffdf8,#fff8e8); }
.product-final-cost-section > header { display: grid; grid-template-columns: 1fr auto; gap: 3px 18px; align-items: center; }
.product-final-cost-section > header div { display: grid; gap: 2px; }
.product-final-cost-section > header > strong { grid-row: 1 / span 2; grid-column: 2; font-size: 24px; color: var(--ds-primary-hover); }
.product-final-cost-section > header > span { color: var(--ds-muted); font-size: 12px; }
.product-final-cost-section dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.product-final-cost-section dl div { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.78); }
.product-final-cost-section dt { color: var(--ds-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.product-final-cost-section dd { margin: 4px 0 0; font-weight: 800; }
.product-final-cost-section ul { margin: 0; color: #885d11; }
.product-final-cost-section .product-cost-supporting { padding-bottom:12px;border-bottom:1px solid rgba(61,112,146,.18); }
.product-final-cost-section .product-cost-supporting dd { font-size:14px; }
.product-final-cost-section .product-commercial-row { align-items:stretch; }
.product-final-cost-section .product-commercial-row > div { display:grid;align-content:center;min-height:76px;border:1px solid rgba(66,122,159,.18); }
.product-final-cost-section .product-commercial-row dd { font-size:20px;color:var(--ds-primary-hover); }
.product-final-cost-section .product-commercial-row small { margin-top:5px;color:var(--ds-muted);font-size:11px;line-height:1.35; }
.product-final-cost-section .product-margin-card.positive { border-color:color-mix(in srgb,var(--ds-success) 32%,var(--ds-card));background:var(--ds-success-bg); }
.product-final-cost-section .product-margin-card.positive dd { color:var(--ds-success); }
.product-final-cost-section .product-margin-card.negative { border-color:color-mix(in srgb,var(--ds-danger) 32%,var(--ds-card));background:var(--ds-danger-bg); }
.product-final-cost-section .product-margin-card.negative dd { color:var(--ds-danger); }
.product-final-cost-section .product-margin-card.neutral dd,.product-final-cost-section .product-margin-card.unavailable dd { color:var(--ds-muted); }
@media (max-width: 760px) {
  .product-inline-operation .product-operation-machine,.product-human-cost-grid,.product-operation-machine-fields { grid-template-columns: 1fr; }
  .product-operation-machine-actions { display:grid;grid-template-columns:1fr; }
  .product-operation-machine-actions .danger-action { margin-left:0; }
  .product-operation-machine-settled { grid-template-columns:1fr; }
  .product-operation-machine-settled .compact-command { justify-self:start; }
  .product-human-derived-cost { align-items:flex-start;flex-direction:column; }
  .product-human-derived-cost strong { margin-left:0; }
  .product-machine-cost-lines > article { grid-template-columns: 1fr; }
  .product-machine-cost-lines dl,.product-final-cost-section dl { grid-template-columns: 1fr; }
  .product-final-cost-section > header { grid-template-columns: 1fr; }
  .product-final-cost-section > header > strong { grid-column: 1; grid-row: auto; font-size: 21px; }
}
/* Machines phase 3: compact actual-machine execution panel. */
.work-entry-machine-panel {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d8e5f0;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbfe, #fff);
}
.work-entry-machine-panel > header,
.work-entry-machine-panel > header > div,
.work-entry-machine-plan,
.work-entry-machine-warning > div {
  display: flex;
  align-items: center;
}
.work-entry-machine-panel > header { justify-content: space-between; gap: 12px; }
.work-entry-machine-panel > header > div,
.work-entry-machine-plan { flex-wrap: wrap; gap: 6px 10px; }
.work-entry-machine-panel h3 { margin: 0; color: var(--ink, #0b2440); }
.work-entry-machine-panel header small { width: 100%; color: #52708d; font-weight: 800; letter-spacing: .08em; }
.work-entry-machine-plan { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: #edf5fb; }
.work-entry-machine-plan span { color: #59748d; font-size: 12px; font-weight: 700; }
.work-entry-machine-plan strong { flex: 1; }
.work-entry-machine-plan em { color: #173b5e; font-style: normal; font-weight: 800; }
.work-entry-machine-fields { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr); gap: 14px; align-items: end; }
.work-entry-machine-warning { margin-top: 12px; padding: 12px; border: 1px solid #f2c978; border-radius: 10px; background: #fff8e8; }
.work-entry-machine-warning > div { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.work-entry-machine-panel.is-loading,
.work-entry-machine-panel.is-unavailable { color: #607a92; }
.operation-machine-names { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #698098; font-size: 11px; }
.machine-only-entry-modal { min-width: 0; }
.operation-machine-summary { border: 0; background: transparent; text-align: left; cursor: pointer; }
.machine-history-modal > dl { display: flex; gap: 24px; margin: 0 0 16px; padding: 12px; border-radius: 12px; background: #edf5fb; }
.machine-history-modal dt { color: #607a92; font-size: 12px; }
.machine-history-modal dd { margin: 3px 0 0; font-weight: 800; }
.machine-history-list { display: grid; gap: 8px; }
.machine-history-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #dbe6ef; border-radius: 10px; }
.machine-history-row span small { display: block; color: #6b8195; }
.machine-history-row em { font-style: normal; color: #7c8d9c; font-size: 12px; }
.machine-history-row em.active { color: #198754; font-weight: 800; }
.machine-history-row > div { display: flex; gap: 6px; }
@media (max-width: 720px) {
  .work-entry-machine-fields { grid-template-columns: 1fr; }
  .work-entry-machine-panel > header { align-items: flex-start; }
  .machine-history-modal > dl { display: grid; gap: 10px; }
  .machine-history-row { grid-template-columns: 1fr auto; }
  .machine-history-row > small, .machine-history-row > div { grid-column: 1 / -1; }
}

/* Work Orders premium KPI/filter/table polish. */
.work-orders-screen .work-order-kpi { min-height:76px; border:1px solid var(--ds-border); border-radius:10px; padding:11px 13px; color:inherit; background:var(--ds-card); font:inherit; text-align:left; cursor:pointer; transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease; }
.work-orders-screen .work-order-kpi:hover { border-color:var(--ds-primary-border); background:color-mix(in srgb,var(--ds-card) 94%,var(--ds-info-bg)); box-shadow:0 8px 18px rgba(var(--ds-sidebar-rgb),.07); }
.work-orders-screen .work-order-kpi:focus-visible { outline:2px solid var(--ds-primary-border); outline-offset:2px; box-shadow:var(--ds-focus-ring); }
.work-orders-screen .work-order-kpi.active { border-color:rgba(var(--ds-primary-rgb),.38); background:color-mix(in srgb,var(--ds-card) 88%,var(--ds-info-bg)); box-shadow:inset 0 0 0 1px rgba(var(--ds-primary-rgb),.06),0 8px 18px rgba(var(--ds-sidebar-rgb),.07); }
.work-orders-screen .work-order-kpi .soft-icon { flex:0 0 38px; width:38px; height:38px; border-radius:10px; }
.work-orders-screen .work-order-kpi .soft-icon svg { width:17px; height:17px; }
.work-orders-screen .work-order-kpi-copy { display:grid; gap:3px; min-width:0; }
.work-orders-screen .work-order-kpi-copy strong { color:var(--ds-heading); font-size:23px; font-weight:800; line-height:1; }
.work-orders-screen .work-order-kpi-copy > span { color:#63768a; font-size:10.5px; font-weight:800; letter-spacing:0; line-height:1.1; text-transform:uppercase; }
.work-orders-screen .work-orders-table th { white-space:normal; }
.work-orders-screen .work-orders-table th .sort-header { gap:5px; font:inherit; font-weight:inherit; line-height:inherit; text-transform:inherit; }
.work-orders-screen .work-orders-table th .sort-header svg { flex:0 0 13px; width:13px; height:13px; }
.work-orders-screen .problem-count.has-problems { min-width:22px; min-height:22px; border:0; border-radius:999px; padding:2px 6px; color:#fff; background:var(--ds-danger); box-shadow:0 2px 6px rgba(225,29,46,.22); font-size:11px; font-weight:800; line-height:1; }
.work-orders-screen .problem-count.has-problems:hover { color:#fff; background:color-mix(in srgb,var(--ds-danger) 88%,#000); }
@media (min-width:1181px) {
  .work-orders-screen .work-orders-desktop-filters { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .work-orders-screen .work-orders-desktop-filters > :nth-child(1) { grid-column:span 3; }
  .work-orders-screen .work-orders-desktop-filters > :nth-child(2),.work-orders-screen .work-orders-desktop-filters > :nth-child(3),.work-orders-screen .work-orders-desktop-filters > :nth-child(4) { grid-column:span 2; }
  .work-orders-screen .work-orders-desktop-filters > :nth-child(5) { grid-column:span 3; }
  .work-orders-screen .work-orders-desktop-filters > :nth-child(6),.work-orders-screen .work-orders-desktop-filters > :nth-child(7),.work-orders-screen .work-orders-desktop-filters > :nth-child(8) { grid-column:span 2; }
  .work-orders-screen .work-orders-desktop-filters > :nth-child(9),.work-orders-screen .work-orders-desktop-filters > :nth-child(10) { grid-column:span 3; }
  .work-orders-screen .work-orders-desktop-filters .sort-filter { width:min(100%,250px); justify-self:end; }
  .work-orders-screen .work-orders-desktop-filters .clear-filter-button { justify-self:start; width:auto; }
}
@media (max-width:1180px) {
  .work-orders-screen .work-order-kpi { min-height:76px; padding:11px 13px; gap:10px; }
  .work-orders-screen .work-order-kpi .soft-icon { width:38px; height:38px; }
  .work-orders-screen .work-order-kpi-copy strong { font-size:23px; }
}
@media (min-width:561px) and (max-width:1180px) {
  .work-orders-screen .work-orders-desktop-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-orders-screen .work-orders-desktop-filters .work-search { grid-column:1 / -1; }
  .work-orders-screen .work-orders-desktop-filters .sort-filter { grid-column:auto; width:100%; }
  .work-orders-screen .work-orders-desktop-filters .clear-filter-button { width:100%; }
}
@media (max-width:820px) { .work-orders-screen .work-order-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Work Orders bounded premium table alignment and separation. */
.work-orders-screen .work-order-table-wrap {
  border: 1px solid color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border));
  background: var(--ds-card);
}
.work-orders-screen .work-orders-table {
  border-collapse: separate;
  border-spacing: 0;
}
.work-orders-screen .work-orders-table th {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border));
  text-align: center;
}
.work-orders-screen .work-orders-table th + th,
.work-orders-screen .work-orders-table td + td {
  border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent);
}
.work-orders-screen .work-orders-table tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent);
}
.work-orders-screen .work-orders-table tbody tr:last-child td { border-bottom: 0; }
.work-orders-screen .work-orders-table th .sort-header {
  justify-content: center;
  width: 100%;
  text-align: center;
}
.work-orders-screen .work-orders-table-desktop tbody td:nth-child(6),
.work-orders-screen .work-orders-table-desktop tbody td:nth-child(7),
.work-orders-screen .work-orders-table-desktop tbody td:nth-child(8),
.work-orders-screen .work-orders-table-desktop tbody td:nth-child(9),
.work-orders-screen .work-orders-table-landscape tbody td:nth-child(4),
.work-orders-screen .work-orders-table-landscape tbody td:nth-child(5),
.work-orders-screen .work-orders-table-landscape tbody td:nth-child(6),
.work-orders-screen .work-orders-table-landscape tbody td:nth-child(7) {
  text-align: center;
}
.work-orders-screen .work-order-pagination > span {
  color: var(--ds-heading);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .work-orders-screen .work-order-pagination > span { white-space: normal; }
}

/* Products bounded premium KPI and table parity. */
:is(.products-screen, .team-overview) .product-kpi {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  padding: 11px 13px;
  color: inherit;
  background: var(--ds-card);
  box-shadow: none;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
:is(.products-screen, .team-overview) .product-kpi:hover {
  border-color: var(--ds-primary-border);
  background: color-mix(in srgb, var(--ds-card) 94%, var(--ds-info-bg));
  box-shadow: 0 8px 18px rgba(var(--ds-sidebar-rgb), .07);
}
:is(.products-screen, .team-overview) .product-kpi:focus-visible {
  outline: 2px solid var(--ds-primary-border);
  outline-offset: 2px;
  box-shadow: var(--ds-focus-ring);
}
:is(.products-screen, .team-overview) .product-kpi.active {
  border-color: rgba(var(--ds-primary-rgb), .38);
  background: color-mix(in srgb, var(--ds-card) 88%, var(--ds-info-bg));
  box-shadow: inset 0 0 0 1px rgba(var(--ds-primary-rgb), .06), 0 8px 18px rgba(var(--ds-sidebar-rgb), .07);
}
:is(.products-screen, .team-overview) .product-kpi .soft-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
:is(.products-screen, .team-overview) .product-kpi .soft-icon svg { display: block; width: 17px; height: 17px; }
:is(.products-screen, .team-overview) .product-kpi.tone-blue .soft-icon { color: #1c6ecb; background: var(--ds-info-bg); }
:is(.products-screen, .team-overview) .product-kpi.tone-green .soft-icon { color: var(--ds-success); background: var(--ds-success-bg); }
:is(.products-screen, .team-overview) .product-kpi.tone-orange .soft-icon { color: #d97706; background: var(--ds-warning-bg); }
:is(.products-screen, .team-overview) .product-kpi.tone-purple .soft-icon { color: var(--ds-info); background: var(--ds-info-bg); }
:is(.products-screen, .team-overview) .product-kpi-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
:is(.products-screen, .team-overview) .product-kpi-copy strong {
  margin: 0;
  color: var(--ds-heading);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}
:is(.products-screen, .team-overview) .product-kpi-copy > span {
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.products-screen .products-list-card {
  border: 1px solid color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border));
}
.products-screen .products-table {
  border-collapse: separate;
  border-spacing: 0;
}
.products-screen .products-table th,
.products-screen .products-table td {
  border-right: 0;
}
.products-screen .products-table thead th {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border));
  white-space: normal;
}
.products-screen .products-table th + th,
.products-screen .products-table td + td {
  border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent);
}
.products-screen .products-table tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent);
}
.products-screen .products-table tbody tr:last-child td { border-bottom: 0; }
.products-screen .products-table.products-table-desktop thead th:nth-child(n),
.products-screen .products-table.products-table-landscape thead th:nth-child(n) {
  text-align: center;
}
.products-screen .products-table th .sort-header {
  width: 100%;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: center;
  text-transform: inherit;
  white-space: normal;
}
.products-screen .products-table th .sort-header svg {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}
.products-screen .products-table.products-table-desktop tbody td:nth-child(1),
.products-screen .products-table.products-table-desktop tbody td:nth-child(2) {
  text-align: left;
}
.products-screen .products-table.products-table-desktop tbody td:nth-child(n+3) {
  text-align: center;
}
.products-screen .products-table.products-table-landscape tbody td:nth-child(1),
.products-screen .products-table.products-table-landscape tbody td:nth-child(2),
.products-screen .products-table.products-table-landscape tbody td:nth-child(5) {
  text-align: left;
}
.products-screen .products-table.products-table-landscape tbody td:nth-child(3),
.products-screen .products-table.products-table-landscape tbody td:nth-child(4),
.products-screen .products-table.products-table-landscape tbody td:nth-child(6),
.products-screen .products-table.products-table-landscape tbody td:nth-child(7),
.products-screen .products-table.products-table-landscape tbody td:nth-child(8) {
  text-align: center;
}

/* ===================== FAKTURE / KOMERCIJALNI PODACI (A2C SETTINGS) =====================
   Reuses the existing NormaX Settings shell (.settings-section / .settings-section-header /
   .settings-info-list / .settings-edit-grid). Only additive layout for the bank-account list and
   the neutral readiness pill — no new colour or type ramp, only design tokens. Inserted BEFORE the
   FAKTURE (A2B) + Kupci/CRM blocks so .crm-entry-list stays the last rule in the file
   (customers_crm_css_parser_ownership regression). */
.settings-section-header-aside {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.settings-readiness-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 600;
}
.settings-readiness-pill svg { width: 15px; height: 15px; flex: 0 0 auto; }
.settings-readiness-pill.is-ready { color: var(--ds-primary); border-color: var(--ds-primary); }
.settings-bank-list {
  display: grid;
  gap: 12px;
}
.settings-bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
}
.settings-bank-row.is-default { border-color: var(--ds-primary); }
.settings-bank-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.settings-bank-main strong { color: var(--ds-heading); font-variant-numeric: tabular-nums; }
.settings-bank-main span,
.settings-bank-main small { color: var(--ds-text-light); }
.settings-bank-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-bank-default-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 700;
}
.settings-bank-default-tag svg { width: 15px; height: 15px; }
.settings-bank-default-field {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.settings-bank-default-field input { width: auto; }

/* ===================== FAKTURE / INVOICES (A2B) =====================
   Bez novih boja/tipografije — Fakture lista nasleđuje .work-orders-screen premium shell (isti
   kao Kupci), a editor koristi .modal-panel / .wo-create-card / .wo-modal-field primitive.
   Ovde su samo: širine kolona liste, layout mreže editora i interni (crveni) marker koji se
   NIKAD ne prikazuje kupcu. Blok je namerno UMETNUT PRE Kupci/CRM sekcije da bi .crm-entry-list
   ostao poslednje pravilo u fajlu (customers_crm_css_parser_ownership regresija). */
.invoices-screen .invoice-amount-cell { text-align: right; font-variant-numeric: tabular-nums; }
.invoices-screen .invoice-draft-tag { font-style: normal; font-weight: 700; color: var(--ds-text-light); }
.invoices-table col.inv-col-number { width: 13%; }
.invoices-table col.inv-col-date { width: 9%; }
.invoices-table col.inv-col-customer { width: 22%; }
.invoices-table col.inv-col-pib { width: 10%; }
.invoices-table col.inv-col-amount { width: 11%; }
.invoices-table col.inv-col-status { width: 9%; }
.invoices-table col.inv-col-actions { width: 6%; }
.invoices-card .invoice-draft-tag { font-weight: 700; }
.invoices-card-actions { display: flex; gap: 8px; justify-content: flex-end; }

.invoice-workspace-modal { width: min(95vw, 1560px); max-width: 1560px; max-height: 94dvh; padding: 0; overflow: hidden; border-radius: var(--ds-radius-modal); }
.invoice-workspace-modal > .flow-modal-head { flex: 0 0 auto; min-height: 80px; }
.customer-invoices-modal { display: flex; flex-direction: column; height: auto; }
.customer-quick-count { display: inline-grid; place-items: center; min-width: 1.65rem; height: 1.45rem; margin-left: auto; padding: 0 .35rem; border: 1px solid var(--border, #d7e0e9); border-radius: 999px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.customer-functions-card { display: grid; gap: 8px; }
.customer-functions-card > .wo-create-section-title { margin-bottom: 2px; }
.customer-functions-card > button { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 42px; text-align: left; }
.customer-functions-card > button > span { flex: 1; }
.customer-quotation-modal { display: flex; flex-direction: column; width: min(1560px, calc(100vw - 32px)); max-height: min(92vh, 940px); overflow: hidden; }
.customer-quotation-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; flex-shrink: 0; margin-left: auto; }
.customer-quotation-modal .flow-modal-title { min-width: 0; }
.customer-quotation-modal .flow-modal-title h2, .customer-quotation-modal .flow-modal-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-quotation-head-actions .flow-close-button { flex-shrink: 0; }
.customer-quotation-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
.customer-quotation-form { display: grid; gap: 16px; }
.customer-quotation-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.customer-quotation-fields > *, .customer-quotation-fields .wo-modal-field, .customer-quotation-week-field { min-width: 0; }
.customer-quotation-fields .wo-modal-field { gap: 6px; font-size: 13px; }
.customer-quotation-fields .wo-modal-field input, .customer-quotation-fields .wo-modal-field select { min-height: 46px; padding: 0 12px; font-size: 14px; }
.customer-quotation-fields .nx-date-control-wrap { min-width: 0; }
.customer-quotation-fields .nx-date-input { padding-right: 42px !important; }
.customer-quotation-wide { grid-column: 1 / -1; }
.customer-quotation-week-field { display: grid; gap: 5px; }
.customer-quotation-week-field > small { color: var(--ds-primary-dark); font-weight: 700; }
.customer-quotation-note { margin-top: 14px; padding: 14px; border: 1px solid var(--ds-border); border-radius: 9px; background: var(--ds-bg-soft); }
.customer-quotation-note .wo-modal-field { gap: 7px; font-size: 13px; }
.customer-quotation-note textarea { display: block; width: 100%; min-height: 92px; padding: 10px 12px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; background: #fff; }
.customer-quotation-editor-form { gap: 12px; }
.customer-quotation-editor-form > .wo-create-card { padding: 16px 18px; border-color: #ccd9e4; box-shadow: 0 1px 2px rgb(19 52 77 / 4%); }
.customer-quotation-editor-form > .wo-create-card > .wo-create-section-title h3 { margin: 0 0 13px; font-size: 18px; }
.customer-quotation-editor-form .customer-quotation-fields.top { grid-template-columns: 1fr 1fr .65fr 1.45fr 1fr; gap: 12px; }
.customer-quotation-editor-form .customer-quotation-fields .wo-modal-field input,
.customer-quotation-editor-form .customer-quotation-fields .wo-modal-field select { min-height: 42px; }
.customer-quotation-items-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.customer-quotation-items-head h3 { margin: 0 !important; }
.customer-quotation-items-head .commercial-import-toolbar { margin: 0; }
.customer-quotation-delivery { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 12px 16px; align-items: start; }
.customer-quotation-delivery > .wo-create-section-title { grid-column: 1 / -1; }
.customer-quotation-delivery > .wo-create-section-title h3 { margin-bottom: 0 !important; }
.customer-quotation-delivery .customer-quotation-note { display: flex; grid-column: 2; grid-row: 2; align-self: stretch; width: 100%; height: 100%; min-height: 0; margin: 0; overflow: hidden; box-sizing: border-box; }
.customer-quotation-delivery:has(.customer-quotation-tax-note) .customer-quotation-note { grid-row: 2 / span 2; }
.customer-quotation-delivery .customer-quotation-note .wo-modal-field { display: grid; flex: 1; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.customer-quotation-delivery .customer-quotation-note textarea { height: 100%; min-height: 0; resize: none; }
.customer-quotation-delivery .customer-quotation-tax-note { grid-column: 1; margin: 0; }
.customer-quotation-list { display: grid; gap: 8px; }
.customer-quotation-row { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr 20px; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid #d7e0e9; border-radius: 10px; background: #fff; color: #153650; text-align: left; cursor: pointer; }
.customer-quotation-row:hover, .customer-quotation-catalog-row:hover { border-color: #6a94ad; background: #f5f9fc; }
.customer-quotation-row > span:first-child { display: grid; gap: 3px; min-width: 0; }
.customer-quotation-row small { color: #66788b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-quotation-source-tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.customer-quotation-source-tabs > button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--ds-border); border-radius: 8px; background: #fff; color: var(--ds-text); font-size: 13px; font-weight: 700; cursor: pointer; }
.customer-quotation-source-tabs > button.active { border-color: var(--ds-primary); background: var(--ds-info-bg); color: var(--ds-primary-dark); }
.customer-quotation-source-tabs > button svg { width: 16px; height: 16px; }
.customer-quotation-pick { display: flex; gap: 8px; margin-bottom: 12px; }
.customer-quotation-pick input { flex: 1 1 220px; min-width: 0; min-height: 40px; padding: 8px 12px; }
.customer-quotation-pick button { min-height: 40px; }
.customer-quotation-catalog { display: grid; max-height: 200px; overflow: auto; border: 1px solid #d7e0e9; border-radius: 9px; margin-bottom: 14px; }
.customer-quotation-catalog[hidden] { display: none; }
.customer-quotation-catalog .customer-quotation-empty { padding: 0 12px; }
.customer-quotation-catalog-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-bottom: 1px solid #e6edf2; background: #fff; color: #25384a; text-align: left; cursor: pointer; }
.customer-quotation-catalog-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-quotation-empty { margin: 12px 0; color: #66788b; }
.customer-quotation-lines-scroll { width: 100%; overflow-x: auto; border: 1px solid #d7e0e9; border-radius: 9px; }
.customer-quotation-lines { width: 100%; min-width: 1380px; border-collapse: collapse; table-layout: fixed; }
.customer-quotation-lines th { border-right: 1px solid #c7d4df; text-align: center; vertical-align: middle; }
.customer-quotation-lines th:last-child { border-right: 0; }
.customer-quotation-lines th:nth-child(1) { width: 72px; }
.customer-quotation-lines th:nth-child(2) { width: 94px; }
.customer-quotation-lines th:nth-child(3) { width: 230px; }
.customer-quotation-lines th:nth-child(3) { width: 320px; }
.customer-quotation-lines th:nth-child(4) { width: 76px; }
.customer-quotation-lines th:nth-child(5) { width: 84px; }
.customer-quotation-lines th:nth-child(6) { width: 120px; }
.customer-quotation-lines th:nth-child(7) { width: 118px; }
.customer-quotation-lines th:nth-child(8) { width: 136px; }
.customer-quotation-lines th:nth-child(9) { width: 82px; }
.customer-quotation-lines th:nth-child(10), .customer-quotation-lines th:nth-child(11) { width: 136px; }
.customer-quotation-lines th:nth-child(12) { width: 112px; }
.customer-quotation-lines td { border-top: 1px solid #d7e0e9; border-right: 1px solid #d7e0e9; vertical-align: middle; text-align: center; }
.customer-quotation-lines td:last-child { border-right: 0; }
.customer-quotation-lines tbody tr:nth-child(even) { background: #f8fafc; }
.customer-quotation-lines input, .customer-quotation-lines select { width: 100%; min-width: 0; min-height: 36px; padding: 5px 7px; border: 1px solid var(--ds-border); border-radius: 6px; background: #fff; color: var(--ds-text); font-size: 12px; }
.customer-quotation-lines input[readonly] { border-color: transparent; background: transparent; }
.customer-quotation-lines .customer-quotation-name input { text-align: left; }
.customer-quotation-lines .customer-quotation-name span { display: block; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.customer-quotation-lines td:nth-child(2), .customer-quotation-lines td:nth-child(3), .customer-quotation-lines td:nth-child(2) input, .customer-quotation-lines td:nth-child(3) input { text-align: left; }
.customer-quotation-lines td:nth-child(4), .customer-quotation-lines td:nth-child(7), .customer-quotation-lines td:nth-child(9) { text-align: center; }
.customer-quotation-lines td:nth-child(5), .customer-quotation-lines td:nth-child(6), .customer-quotation-lines td:nth-child(8), .customer-quotation-lines td:nth-child(10), .customer-quotation-lines td:nth-child(11), .customer-quotation-lines td:nth-child(5) input, .customer-quotation-lines td:nth-child(6) input { text-align: right; }
.customer-quotation-lines td.customer-quotation-quantity, .customer-quotation-lines td.customer-quotation-quantity input, .customer-quotation-lines td.customer-quotation-percentage, .customer-quotation-lines td.customer-quotation-percentage input { text-align: center; font-variant-numeric: tabular-nums; }
.customer-quotation-lines td:nth-child(9) select { padding: 5px 3px; text-align: center; font-weight: 700; }
.customer-quotation-discount { display: grid; grid-template-columns: 25px minmax(0,1fr) 25px; gap: 3px; align-items: center; }
.customer-quotation-discount button { width: 25px; height: 34px; padding: 0; border: 1px solid var(--ds-border); border-radius: 5px; background: var(--ds-bg-soft); color: var(--ds-heading); cursor: pointer; }
.customer-quotation-discount input { text-align: center; padding: 4px 2px; }
.customer-quotation-lines .customer-quotation-kind small { color: var(--ds-text-light); font-weight: 700; }
.customer-quotation-lines .customer-quotation-line-total strong { color: var(--ds-heading); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.customer-quotation-lines td:last-child button { width: 30px; height: 30px; }
.customer-quotation-line-actions { display: flex; align-items: center; justify-content: center; gap: 4px; }
.customer-quotation-discount-visibility { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; min-height: 38px; padding: 6px 10px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg-soft); color: var(--ds-text); font-size: 12px; font-weight: 700; }
.customer-quotation-discount-visibility input { width: 16px; height: 16px; margin: 0; accent-color: var(--ds-primary); }
.customer-quotation-totals { display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid #d7e0e9; }
.customer-quotation-totals span { display: grid; gap: 3px; }
.customer-quotation-totals strong { color: #153650; font-size: 1.12rem; }
.customer-quotation-detail-totals { margin-top: 14px; }
.customer-quotation-issued-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(130px, 180px); align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid #e0e8ee; }
.customer-quotation-issued-line span { display: grid; gap: 3px; }
.customer-quotation-issued-line small, .customer-quotation-tax-note { color: #66788b; }
@media (max-width: 750px) {
  .customer-quotation-modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .customer-quotation-body { padding: 14px; }
  .customer-quotation-head-actions { justify-content: flex-end; }
  .customer-quotation-head-actions .compact-command span { display: none; }
  .customer-quotation-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-quotation-row { grid-template-columns: minmax(0, 1fr) auto; }
  .customer-quotation-row > span:nth-child(2), .customer-quotation-row > svg { display: none; }
  .customer-quotation-issued-line { grid-template-columns: minmax(0, 1fr) auto; }
  .customer-quotation-issued-line label { grid-column: 1 / -1; }
  .customer-quotation-catalog-row { grid-template-columns: 70px minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .customer-quotation-editor-form .customer-quotation-fields.top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-quotation-delivery { grid-template-columns: minmax(0, 1fr); }
  .customer-quotation-delivery .customer-quotation-note { grid-column: 1; grid-row: auto; height: auto; overflow: visible; }
  .customer-quotation-delivery .customer-quotation-note textarea { height: auto; min-height: 106px; resize: vertical; }
}
@media (max-width: 750px) {
  .customer-quotation-editor-form > .wo-create-card { padding: 14px; }
  .customer-quotation-items-head { align-items: flex-start; flex-direction: column; }
  .customer-quotation-editor-form .customer-quotation-fields.top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .customer-quotation-editor-form .customer-quotation-fields.top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .customer-quotation-fields { grid-template-columns: minmax(0, 1fr); }
  .customer-quotation-pick button span { display: none; }
  .customer-quotation-source-tabs > button { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
}
.customer-invoices-head { flex: 0 0 auto; }
.customer-invoices-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.customer-invoices-head-actions .compact-command { min-height: 40px; white-space: nowrap; }
.customer-invoices-workspace { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 14px; overflow: auto; background: var(--ds-bg); }
.customer-invoices-toolbar { flex: 0 0 auto; padding: 12px 14px; box-shadow: none; }
.customer-invoices-toolbar .work-orders-desktop-filters { grid-template-columns: minmax(190px,1.35fr) minmax(110px,.72fr) minmax(128px,.8fr) minmax(128px,.8fr) minmax(145px,.95fr) minmax(110px,.7fr) auto; gap: 8px; }
.customer-invoices-toolbar .sort-filter { grid-column: auto; }
.customer-invoices-body { min-width: 0; min-height: 0; }
.customer-invoices-list-card { border: 1px solid color-mix(in srgb,var(--ds-border) 88%,var(--ds-primary-border)); border-radius: 10px; overflow: hidden; box-shadow: none; }
.customer-invoices-state { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; color: var(--ds-text-light); }
.customer-invoices-state.error { color: #b23; }
.customer-invoices-empty { display: flex; align-items: center; justify-content: center; min-height: 72px; gap: 12px; padding: 16px; color: var(--ds-text-light); background: var(--ds-bg); }
.customer-invoices-empty p { margin: 0; font-weight: 700; }
.customer-invoices-table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.customer-invoices-table { width: 100%; min-width: 1096px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.customer-invoices-table col.customer-invoice-col-number { width: 150px; }
.customer-invoices-table col.customer-invoice-col-turnover { width: 118px; }
.customer-invoices-table col.customer-invoice-col-due { width: 112px; }
.customer-invoices-table col.customer-invoice-col-base { width: 118px; }
.customer-invoices-table col.customer-invoice-col-vat { width: 104px; }
.customer-invoices-table col.customer-invoice-col-payable { width: 132px; }
.customer-invoices-table col.customer-invoice-col-status { width: 190px; }
.customer-invoices-table col.customer-invoice-col-actions { width: 118px; }
.customer-invoices-table th,.customer-invoices-table td { min-width: 0; border-bottom: 1px solid color-mix(in srgb,var(--ds-border) 82%,transparent); vertical-align: middle; }
.customer-invoices-table th { text-align: center; }
.customer-invoices-table th + th,.customer-invoices-table td + td { border-left: 1px solid color-mix(in srgb,var(--ds-border) 72%,transparent); }
.customer-invoices-table tbody tr:last-child td { border-bottom: 0; }
.customer-invoices-table tbody tr:hover,.customer-invoices-table tbody tr:focus-within { background: color-mix(in srgb,var(--ds-info-bg) 44%,transparent); }
.customer-invoices-table tbody tr[data-action="customer-invoice-open"],.customer-invoices-table tbody tr[data-action="customer-invoice-open"] td { cursor: pointer; }
.customer-invoices-table tbody tr[data-action="customer-invoice-open"]:focus-visible { outline: 2px solid var(--ds-primary-border); outline-offset: -2px; }
.customer-invoices-table th .sort-header { width: 100%; justify-content: center; white-space: normal; text-align: center; text-transform: inherit; }
.customer-invoices-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-invoices-table td:nth-child(2),.customer-invoices-table td:nth-child(3) { text-align: center; }
.customer-invoices-table th:nth-child(n + 4):nth-child(-n + 8), .customer-invoices-table td:nth-child(n + 4):nth-child(-n + 8) { text-align: right; }
.customer-invoices-table td:last-child { overflow: visible; }
.customer-invoice-actions { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.customer-invoice-actions .icon-action { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
.customer-invoice-actions .invoice-actions-trigger { width: auto; height: 36px; min-width: 96px; }
.customer-invoices-pagination { border-top: 1px solid var(--ds-border); }
.customer-invoices-pagination > div { display: flex; align-items: center; gap: 12px; }
.customer-invoices-pagination label { display: flex; align-items: center; gap: 7px; }
.customer-invoices-pagination select { min-height: 36px; }
.customer-invoices-cards { display: none; }
.customer-invoice-card { padding: 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); }
.customer-invoice-card[data-action="customer-invoice-open"] { cursor: pointer; }
.customer-invoice-card[data-action="customer-invoice-open"]:hover { border-color: var(--ds-primary-border); background: var(--ds-info-bg); }
.customer-invoice-card[data-action="customer-invoice-open"]:focus-visible { outline: 2px solid var(--ds-primary-border); outline-offset: 2px; }
.customer-invoice-card header, .customer-invoice-card header > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.customer-invoice-card header > div { flex-direction: column; align-items: flex-start; }
.customer-invoice-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.customer-invoice-card dl div { display: flex; flex-direction: column; gap: 3px; }
.customer-invoice-card dt { font-size: 11px; color: var(--ds-text-light); }
.customer-invoice-card dd { margin: 0; font-weight: 700; }
.customer-invoice-card-total { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--ds-border); }

.invoice-editor-modal { display: flex; flex-direction: column; height: min(94dvh,1000px); overflow: hidden; }
.invoice-editor-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 14px; overflow-y: auto; scroll-behavior: auto; background: var(--ds-bg); }
.invoice-editor-card { min-width: 0; padding: 12px; border-radius: 10px; box-shadow: none; }
.invoice-editor-card > .wo-create-section-title { margin-bottom: 10px; }
.invoice-draft-document-band { display: grid; gap: 12px; min-width: 0; }
.invoice-draft-document-band .invoice-customer-context,.invoice-draft-document-band .invoice-commercial-header { border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-bg); box-shadow: 0 8px 22px rgba(15, 23, 42, .035); }
.invoice-draft-document-band .invoice-customer-context { padding: 14px; }
.invoice-draft-document-band .invoice-commercial-header { padding: 14px; }
.invoice-draft-document-band .invoice-readonly-field { background: transparent; }
.invoice-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.invoice-commercial-header { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); }
.invoice-commercial-header > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice-commercial-header > header h3 { margin: 0; font-size: 14px; }
.invoice-commercial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.invoice-commercial-grid .wo-modal-field,.invoice-commercial-grid .invoice-readonly-field { min-width: 0; margin: 0; padding: 0; }
.invoice-commercial-grid input,.invoice-commercial-grid select { min-width: 0; height: 36px; }
.invoice-readiness-check { display: inline-flex; align-items: center; gap: 5px; color: var(--ds-success-text); font-size: 11px; font-weight: 800; }
.invoice-readiness-check svg { width: 14px; height: 14px; }
.invoice-tax-details { border-top: 1px solid var(--ds-border); padding-top: 8px; }
.invoice-tax-details summary { display: flex; align-items: center; gap: 8px; width: fit-content; color: var(--ds-primary); font-size: 12px; font-weight: 800; cursor: pointer; }
.invoice-tax-details summary span { color: var(--ds-text-light); font-weight: 650; }
.invoice-tax-details .wo-modal-field { width: min(420px,100%); margin-top: 9px; }
.invoice-customer-context { display: grid; grid-template-columns: minmax(110px,.28fr) minmax(220px,1fr) auto; gap: 7px 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); }
.invoice-context-label { display: flex; flex-direction: column; gap: 3px; }
.invoice-context-label span { font-size: 12px; font-weight: 700; color: var(--ds-text-light); text-transform: uppercase; letter-spacing: .04em; }
.invoice-context-label small { color: var(--ds-text-light); }
.invoice-customer-context .invoice-readonly-field { padding: 0; }
.invoice-customer-context .invoice-readiness { grid-column: 1 / -1; margin-top: 0; }
.invoice-customer-context .invoice-readiness-check { grid-column: 3; white-space: nowrap; }
.invoice-customer-context.is-ready .invoice-context-label small { display: none; }
.invoice-readonly-field { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.invoice-readonly-field span { font-size: 12px; font-weight: 700; color: var(--ds-text-light); }
.invoice-readonly-field small { color: var(--ds-text-light); }
.invoice-readonly-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.invoice-readonly-grid div { display: flex; flex-direction: column; gap: 4px; }
.invoice-readonly-grid dt { font-size: 11px; font-weight: 700; color: var(--ds-text-light); text-transform: uppercase; }
.invoice-readonly-grid dd { margin: 0; font-weight: 700; }
.invoice-editor-loading, .invoice-editor-number-banner, .invoice-editor-finalized-banner { display: flex; align-items: center; gap: 10px; }
.invoice-editor-number-banner { padding: 10px 16px; background: var(--ds-primary-light); border-radius: var(--ds-radius-input); margin: 12px 16px 0; }
.invoice-editor-error { margin: 12px 16px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invoice-saved-confirmation { margin: 12px 16px 0; display: flex; align-items: center; gap: 8px; color: var(--ds-primary); font-size: 13px; font-weight: 700; }
.invoice-readiness { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--ds-radius-input); border: 1px solid var(--ds-border); margin-top: 10px; }
.invoice-readiness.ok { background: var(--ds-primary-light); }
.invoice-readiness.warning { border-color: #d99; }
.invoice-readiness-list { margin: 6px 0 0; padding-left: 18px; }
.invoice-editor-lines .invoice-line-row { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--ds-bg); }
.invoice-line-head { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.invoice-line-head .icon-action { margin-left: auto; }
.invoice-line-number { align-self: center; margin-right: 4px; }
.invoice-line-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.invoice-line-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.invoice-line-grid label span { font-size: 11px; font-weight: 700; color: var(--ds-text-light); }
.invoice-line-grid label.wide { grid-column: span 2; }
.invoice-discount-mode.is-active select { border-color: var(--ds-primary); }
.invoice-line-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 12px; border-radius: var(--ds-radius-input); background: var(--ds-bg-soft); font-size: 13px; }
.invoice-line-amounts span { display: flex; justify-content: space-between; gap: 8px; }
.invoice-line-add-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invoice-lines-empty { color: var(--ds-text-light); }
/* Interni trošak/marža materijala — SAMO ovde, crveno, jasno odvojeno; nikad u kupčevim kolonama,
   totalima, XML-u ni bilo kojoj download akciji (LOCKED Part 8 / Part 16 leakage). */
.invoice-line-internal { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #b23; background: rgba(178, 34, 52, 0.06); border: 1px dashed rgba(178, 34, 52, 0.4); border-radius: var(--ds-radius-input); padding: 8px 10px; }
.invoice-totals-strip { align-self: stretch; display: flex; justify-content: flex-end; min-height: 0; padding: 0; border: 0; background: transparent; }
.invoice-editor-totals { display: flex; flex-direction: column; gap: 5px; width: min(390px,100%); margin-left: auto; padding: 10px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); }
.invoice-totals-row { display: flex; justify-content: space-between; gap: 24px; font-variant-numeric: tabular-nums; }
.invoice-totals-row.sub { font-size: 12px; color: var(--ds-text-light); }
.invoice-totals-row.grand { font-size: 17px; border-top: 1px solid var(--ds-border); padding-top: 6px; color: var(--ds-primary); }
.invoice-editor-actions { position: relative; z-index: 5; display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; align-items: stretch; margin: 0; padding: 10px 14px; border-top: 1px solid var(--ds-border); background: rgba(255,255,255,.97); box-shadow: 0 -8px 22px rgba(var(--ds-sidebar-rgb),.06); }
.invoice-editor-actions .invoice-editor-action-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice-editor-action-left,.invoice-editor-action-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invoice-editor-action-right { justify-content: flex-end; }
.invoice-editor-actions .secondary-button,.invoice-editor-actions .wo-primary-button { min-width: 0; min-height: 40px; border-radius: 9px; padding: 0 16px; font-size: 13px; }
.invoice-editor-actions .wo-primary-button { min-width: 168px; }
.invoice-finalize-confirm { background: var(--ds-primary-light); border-radius: var(--ds-radius-input); padding: 10px 14px; }
.invoice-finalize-confirm p { margin: 4px 0 0; }
.invoice-catalog-modal { max-width: 620px; }
.invoice-catalog-body { padding: 16px; max-height: 60vh; overflow-y: auto; }
.invoice-catalog-list { display: flex; flex-direction: column; gap: 6px; }
.invoice-catalog-list button { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); text-align: left; cursor: pointer; }
.invoice-catalog-list button:hover { background: var(--ds-primary-light); }
.invoice-catalog-state { color: var(--ds-text-light); }
.invoice-catalog-state.error { color: #b23; }

/* Fakture Phase 1 premium density: one commercial line is one compact desktop table row. */
.invoice-lines-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; }
.invoice-lines-toolbar h3 { flex: 0 0 auto; margin: 0; font-size: 16px; }
.invoice-lines-primary-actions,.invoice-lines-secondary-actions,.invoice-line-add-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.invoice-lines-primary-actions { min-width: 0; }
.invoice-lines-secondary-actions { flex: 0 0 auto; justify-content: flex-end; }
.invoice-lines-toolbar .compact-command { min-height: 36px; padding: 0 11px; font-size: 12px; }
.invoice-line-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); }
.invoice-line-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 11px; }
.invoice-line-table.is-editable { min-width: 1190px; }
.invoice-line-table thead { position: sticky; top: 0; z-index: 2; background: var(--ds-bg-soft); }
.invoice-line-table th { border-bottom: 1px solid var(--ds-border); text-align: left; }
.invoice-line-table td { border-bottom: 1px solid var(--ds-border); vertical-align: middle; }
.invoice-line-table tbody tr:last-child td { border-bottom: 0; }
.invoice-editor-lines .invoice-line-row { display: table-row; padding: 0; margin: 0; border: 0; background: var(--ds-bg); }
.invoice-line-table input,.invoice-line-table select,.invoice-line-table textarea { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: var(--ds-bg-soft); color: var(--ds-text); font: inherit; }
.invoice-line-table input:hover,.invoice-line-table select:hover,.invoice-line-table textarea:hover { border-color: var(--ds-border); background: #fff; }
.invoice-line-table input:focus,.invoice-line-table select:focus,.invoice-line-table textarea:focus { outline: 2px solid rgba(var(--ds-primary-rgb),.14); border-color: var(--ds-primary); background: #fff; }
.invoice-line-table [data-invoice-decimal-input="true"] { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-line-table th { text-align: center; }
.invoice-line-table.is-editable th:nth-child(1),.invoice-line-table.is-editable td:nth-child(1) { width: 120px; }
.invoice-line-table.is-editable th:nth-child(2),.invoice-line-table.is-editable td:nth-child(2) { width: 85px; text-align: left; }
.invoice-line-table.is-editable th:nth-child(3),.invoice-line-table.is-editable td:nth-child(3) { width: 240px; text-align: left; }
.invoice-line-table.is-editable th:nth-child(4),.invoice-line-table.is-editable td:nth-child(4) { width: 62px; text-align: center; }
.invoice-line-table.is-editable th:nth-child(5),.invoice-line-table.is-editable td:nth-child(5) { width: 76px; text-align: center; }
.invoice-line-table.is-editable th:nth-child(6),.invoice-line-table.is-editable td:nth-child(6) { width: 105px; text-align: right; }
.invoice-line-table.is-editable th:nth-child(7),.invoice-line-table.is-editable td:nth-child(7) { width: 130px; text-align: center; }
.invoice-line-table.is-editable th:nth-child(8),.invoice-line-table.is-editable td:nth-child(8) { width: 80px; text-align: center; }
.invoice-line-table.is-editable th:nth-child(9),.invoice-line-table.is-editable td:nth-child(9),.invoice-line-table.is-editable th:nth-child(10),.invoice-line-table.is-editable td:nth-child(10) { width: 110px; text-align: right; }
.invoice-line-table.is-editable th:nth-child(11),.invoice-line-table.is-editable td:nth-child(11) { width: 70px; text-align: center; }
.invoice-source-cell { position: relative; padding-right: 35px!important; }
.invoice-catalog-trigger { position: absolute; top: 10px; right: 4px; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: var(--ds-primary-light); color: var(--ds-primary); cursor: pointer; }
.invoice-catalog-trigger svg { width: 15px; height: 15px; }
.invoice-discount-cell > input { text-align: center; }
.invoice-discount-controls.is-legacy { display: grid; gap: 3px; }
.invoice-discount-controls.is-legacy span { color: var(--ds-text-light); font-size: 10px; text-align: right; }
.invoice-vat-cell { position: relative; }
.invoice-vat-feedback { position: absolute; z-index: 3; top: calc(100% - 3px); right: 3px; width: max-content; max-width: 230px; padding: 4px 6px; border: 1px solid var(--ds-danger-border); border-radius: 5px; background: var(--ds-danger-bg); color: var(--ds-danger); font-size: 9px; font-weight: 700; line-height: 1.2; text-align: left; box-shadow: var(--ds-shadow-sm); }
.invoice-vat-feedback[hidden] { display: none; }
.invoice-calculated-cell,.invoice-number-cell { background: var(--ds-bg-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-calculated-cell.is-gross { color: var(--ds-primary); font-weight: 800; }
.invoice-line-actions { white-space: nowrap; }
.invoice-line-actions .icon-action { width: 28px; height: 28px; }
.invoice-line-actions .has-detail { color: var(--ds-primary); }
.invoice-line-detail-content { display: grid; grid-template-columns: minmax(260px,1fr) auto; gap: 12px; align-items: end; }
.invoice-line-detail-content label { display: grid; gap: 4px; }
.invoice-line-detail-content label span { color: var(--ds-text-light); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.invoice-line-detail-content textarea { min-height: 52px; height: auto; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.invoice-line-add-actions { margin: 0; }
.invoice-lines-empty { display: flex; align-items: center; min-height: 52px; margin: 0; padding: 11px 13px; border: 1px dashed var(--ds-border); border-radius: 8px; background: var(--ds-bg-soft); color: var(--ds-text-light); font-weight: 700; }
.invoice-due-date-field small { color: var(--ds-primary); font-weight: 700; }
.invoice-terms-restore { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--ds-primary); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; text-decoration: underline; }
.invoice-finalized-body { gap: 10px; }
.invoice-finalized-body > * { flex-shrink: 0; }
.invoice-finalized-summary { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); overflow: hidden; }
.invoice-finalized-identity { display: grid; grid-template-columns: .8fr 1.6fr .8fr .5fr; gap: 1px; background: var(--ds-border); }
.invoice-finalized-identity>div { display: grid; gap: 3px; padding: 11px 14px; background: var(--ds-bg-soft); }
.invoice-finalized-identity span,.invoice-finalized-facts dt { color: var(--ds-text-light); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.invoice-finalized-identity strong { font-size: 14px; }
.invoice-finalized-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 12px 14px; gap: 12px 18px; }
.invoice-finalized-facts div { display: grid; gap: 3px; }
.invoice-finalized-facts dd { margin: 0; font-weight: 750; }
.invoice-finalized-facts dd small { margin-left: 5px; color: var(--ds-text-light); font-weight: 700; }
.invoice-line-table.is-finalized { min-width: 1050px; }
.invoice-finalized-line td:nth-child(3),.invoice-finalized-line td:nth-child(4),.invoice-finalized-line td:nth-child(7) { text-align: center; }
.invoice-finalized-line td:nth-child(5),.invoice-finalized-line td:nth-child(6),.invoice-finalized-line td:nth-child(8),.invoice-finalized-line td:nth-child(9) { text-align: right; }
.invoice-finalized-line td:nth-child(2) small { display: block; margin-top: 2px; color: var(--ds-text-light); font-size: 10px; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.invoice-finalized-totals { align-self: stretch; width: auto; }

.invoice-import-body { display: grid; gap: 14px; min-height: 0; padding: 16px 18px; overflow-y: auto; background: var(--ds-bg-soft); }
.invoice-import-workflow { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); color: var(--ds-text-light); font-size: 12px; }
.invoice-import-workflow .active { color: var(--ds-primary); }
.invoice-import-state,.invoice-import-ready { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 100px; padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); }
.invoice-import-ready { min-height: 0; justify-content: flex-start; color: var(--ds-success-text); }
.invoice-import-ready > div { display: grid; gap: 3px; }
.invoice-import-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.invoice-import-counts > div { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); }
.invoice-import-counts strong { font-size: 20px; }
.invoice-import-counts span { color: var(--ds-text-light); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.invoice-import-counts .ready { border-color: var(--ds-success); }
.invoice-import-counts .error { border-color: var(--ds-danger); }
.invoice-import-errors,.invoice-import-preview { display: grid; gap: 7px; }
.invoice-import-errors h3,.invoice-import-preview h3 { margin: 0; font-size: 13px; }
.invoice-import-errors article,.invoice-import-preview article { display: grid; grid-template-columns: minmax(160px,.5fr) minmax(0,1fr); gap: 8px 14px; padding: 8px 11px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg); }
.invoice-import-errors article { border-left: 3px solid var(--ds-danger); }
.invoice-import-errors span,.invoice-import-preview span,.invoice-import-preview em { color: var(--ds-text-light); font-size: 11px; font-style: normal; }
.invoice-import-preview article { grid-template-columns: 70px minmax(180px,1fr) minmax(220px,1fr); align-items: center; }
.invoice-import-actions { flex: 0 0 auto; }
.commercial-import-toolbar { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; }
.customer-quotation-source-tabs .commercial-import-toolbar > .commercial-import-word,
.customer-quotation-source-tabs .commercial-import-toolbar > .commercial-excel-menu > summary { width: auto; min-height: 38px; padding: 6px 14px; justify-content: flex-start; border-radius: 8px; font-size: 13px; }
.commercial-file-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; color: inherit; line-height: 1; }
.commercial-file-badge svg { width: 18px; height: 18px; }
svg.nx-solid-icon, svg.nx-solid-icon path { fill: currentColor; stroke: none; }
.commercial-excel-menu { position: relative; }
.commercial-excel-menu > summary { list-style: none; cursor: pointer; }
.commercial-excel-menu > summary::-webkit-details-marker { display: none; }
.commercial-excel-menu-popover { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; min-width: 220px; padding: 6px; border: 1px solid var(--ds-border); border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgb(18 46 66 / 16%); }
.commercial-excel-menu-popover button { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-text); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.commercial-excel-menu-popover button:hover, .commercial-excel-menu-popover button:focus-visible { background: var(--ds-bg-soft); color: var(--ds-heading); outline: 0; }
.commercial-excel-menu-popover button svg { width: 16px; height: 16px; color: #217346; }
.commercial-import-review { display: grid; gap: 10px; margin: 10px 0 16px; padding: 14px; border: 1px solid var(--ds-primary-border); border-radius: var(--ds-radius-card); background: var(--ds-bg-soft); }
.commercial-import-review header,.commercial-import-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.commercial-import-review p { margin: 0; }
.commercial-import-table-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg); }
.commercial-import-table-wrap table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; }
.commercial-import-table-wrap th,.commercial-import-table-wrap td { border-bottom: 1px solid var(--ds-border); text-align: left; }
.commercial-import-table-wrap th { position: sticky; top: 0; }
.commercial-import-warning { padding: 7px 10px; border: 1px solid var(--ds-warning); border-radius: var(--ds-radius-input); color: var(--ds-warning); background: var(--ds-bg); }

@media (max-width: 860px) {
  .customer-invoices-toolbar .work-orders-desktop-filters { display: none; }
  .customer-invoices-toolbar .work-orders-mobile-filters { display: grid; gap: 8px; }
  .customer-invoices-toolbar .customer-invoices-mobile-search { display: none; }
  .customer-invoices-table-wrap { display: none; }
  .customer-invoices-cards { display: grid; gap: 12px; }
  .customer-invoices-pagination { flex-wrap: wrap; }
  .customer-invoices-pagination,.customer-invoices-pagination > div { align-items: stretch; }
  .invoice-lines-toolbar { align-items: flex-start; flex-direction: column; }
  .invoice-lines-primary-actions,.invoice-lines-secondary-actions { width: 100%; justify-content: flex-start; }
  .invoice-editor-grid, .invoice-readonly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-line-grid label.wide { grid-column: span 2; }
  .invoice-line-table-wrap { overflow: visible; border: 0; }
  .invoice-line-table.is-editable { display: block; min-width: 0; }
  .invoice-line-table.is-editable thead { display: none; }
  .invoice-line-table.is-editable tbody { display: grid; gap: 9px; }
  .invoice-line-table.is-editable tr.invoice-line-row { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 5px; padding: 8px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); }
  .invoice-line-table.is-editable tr.invoice-line-row td { display: grid; align-content: end; width: auto!important; border: 0; text-align: left; }
  .invoice-line-table.is-editable tr.invoice-line-row td::before { content: attr(data-label); margin-bottom: 2px; color: var(--ds-text-light); font-size: 8px; font-weight: 800; text-transform: uppercase; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(1) { grid-column: 1 / span 3; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(2) { grid-column: 4 / span 3; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(3) { grid-column: 7 / span 6; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(4) { grid-column: 1 / span 2; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(5) { grid-column: 3 / span 2; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(6) { grid-column: 5 / span 2; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(7) { grid-column: 7 / span 3; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(8) { grid-column: 10 / span 3; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(9) { grid-column: 1 / span 5; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(10) { grid-column: 6 / span 5; }
  .invoice-line-table.is-editable tr.invoice-line-row td:nth-child(11) { grid-column: 11 / span 2; }
  .invoice-line-detail-row { display: block; margin: -10px 1px 8px; border: 1px solid var(--ds-border); border-top: 0; border-radius: 0 0 var(--ds-radius-input) var(--ds-radius-input); }
  .invoice-line-detail-row td { display: block; }
  .invoice-line-detail-content { grid-template-columns: 1fr; }
  .invoice-finalized-identity { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .invoice-finalized-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .invoice-import-preview article { grid-template-columns: 60px minmax(0,1fr); }
  .invoice-import-preview article em { grid-column: 2; }
}
@media (max-width: 600px) {
  .customer-invoices-modal, .invoice-editor-modal { width: 100%; max-height: 100vh; }
  .customer-invoices-head-actions .compact-command span { display: none; }
  .customer-invoices-head-actions .compact-command { width: 40px; min-width: 40px; padding: 0; }
  .customer-invoices-empty { align-items: stretch; flex-direction: column; }
  .invoice-customer-context, .invoice-editor-grid, .invoice-readonly-grid { grid-template-columns: minmax(0, 1fr); }
  .invoice-customer-context { align-items: stretch; gap: 6px; }
  .invoice-customer-context .invoice-context-label,
  .invoice-customer-context > .wo-modal-field,
  .invoice-customer-context > .invoice-readonly-field,
  .invoice-customer-context > .invoice-readiness-check,
  .invoice-customer-context > .invoice-readiness { grid-column: 1; min-width: 0; width: 100%; }
  .invoice-customer-context > .wo-modal-field > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .invoice-customer-context select { width: 100%; min-width: 0; }
  .invoice-line-grid { grid-template-columns: minmax(0, 1fr); }
  .invoice-line-grid label.wide { grid-column: auto; }
  .invoice-line-amounts { grid-template-columns: minmax(0, 1fr); }
  .invoice-editor-actions .invoice-editor-action-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .invoice-editor-action-left,.invoice-editor-action-right { display: contents; }
  .invoice-editor-actions .secondary-button,.invoice-editor-actions .wo-primary-button { width: 100%; }
  .invoice-editor-actions [data-action="invoice-editor-request-finalize"] { grid-column: 1 / -1; grid-row: 1; }
  .invoice-editor-actions :is([data-action="close-modal"],[data-action="invoice-editor-back-to-customer"]) { grid-column: 1; grid-row: 2; }
  .invoice-editor-actions [data-action="invoice-editor-save-draft"] { grid-column: 2; grid-row: 2; }
  .invoice-editor-actions [data-action="invoice-draft-delete-request"] { grid-column: 1 / -1; grid-row: 3; }
  .invoice-editor-totals { width: 100%; }
  .invoice-import-workflow { justify-content: flex-start; overflow-x: auto; }
  .invoice-import-counts { grid-template-columns: 1fr; }
  .invoice-import-errors article,.invoice-import-preview article { grid-template-columns: 1fr; }
  .invoice-import-preview article em { grid-column: auto; }
}

/* ===================== KUPCI / CUSTOMERS — Phase 1 =====================
   Namerno bez novih boja/radijusa/tipografije — sve nove klase ovde su ili čist layout
   (repeating kontakt red, excel koraci) ili tanka semantička obertka preko postojećih
   .table-shell / .work-order-card / .wo-modal-field / .modal-panel primitivi. */
.customer-row-archived { opacity: 0.72; }
.customer-row-archived .work-order-code { color: var(--ds-text-light); }

.customer-contacts-list { display: grid; gap: 12px; margin-bottom: 12px; }
.customer-contact-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-primary-light);
}
.customer-contact-row .customer-contact-remove { align-self: center; }
.customer-contact-add { margin-bottom: 20px; }
.customer-company-comm { margin-top: 4px; }

.customer-excel-modal { max-width: 640px; width: 100%; }
.excel-workflow-steps { display: flex; gap: 10px; list-style: none; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
.excel-workflow-steps li {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text-light);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ds-primary-light);
  border: 1px solid var(--ds-border);
}
.excel-workflow-steps li.active { color: var(--ds-primary-hover); background: var(--ds-info-bg); border-color: var(--ds-primary-border); }
.excel-workflow-steps li.done { color: var(--ds-success-text); }
.excel-import-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.excel-filename { margin: 0 0 12px; color: var(--ds-text-light); font-size: 13px; }
.excel-preview { margin-top: 16px; }
.excel-preview-rows { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; margin-top: 12px; }
.excel-preview-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  font-size: 13px;
}
.excel-preview-row.error { border-color: var(--ds-danger); background: var(--ds-danger-bg); }
.excel-preview-row.warning { border-color: var(--ds-warning); background: var(--ds-warning-bg); }
.excel-preview-row.ready { border-color: var(--ds-success); background: var(--ds-success-bg); }
.excel-preview-row .row-number { font-weight: 800; color: var(--ds-text-light); }
.excel-preview-row small { grid-column: 1 / -1; color: var(--ds-text-light); }

@media (max-width: 720px) {
  .customer-contact-row { grid-template-columns: 1fr; }
  .customer-contact-row .customer-contact-remove { justify-self: flex-end; }
}

/* --- UX/data-consistency polish pass: Customers reuses the Work Orders premium screen shell
   (".work-orders-screen" — same class, added on the section wrapper in customersModuleTemplate)
   for the white header card + compact toolbar/table density, instead of redefining any of it.
   Only what's genuinely Customers-specific (the "Dodaj novog kupca" button, and this table's own
   column set) is declared below, scoped by the sibling ".customers-screen" marker class. --- */
.topbar:has(+ #section-root .customers-screen) .primary-button[data-action="new-customer"] {
  min-height: 40px;
  border-color: var(--ds-primary);
  padding: 0 15px;
  color: var(--ds-card);
  background: var(--ds-primary);
  box-shadow: 0 8px 18px rgba(var(--ds-primary-rgb), 0.2);
  font-weight: 800;
}
.topbar:has(+ #section-root .customers-screen) .primary-button[data-action="new-customer"]:hover {
  border-color: var(--ds-primary-hover);
  color: var(--ds-card);
  background: var(--ds-primary-hover);
  box-shadow: 0 10px 20px rgba(var(--ds-primary-rgb), 0.22);
}

/* One-row desktop filters (Manual QA nalaz): baznо (neuslovljeno) ".sort-filter { grid-column:
   span 2; }" (styles.css, deljena Work Orders klasa — SORTIRANJE tamo ima duže opcije i namerno
   zauzima 2 od Work Orders-ovih track-ova) je nenamerno "pojeo" jednu kolonu i iz Kupčevog
   TAČNO-5-stavki grida (Pretraga+Status+Sortiranje+Smer+Obriši filtere = 5 stavki na 5
   grid-template-columns track-ova, videti customersFiltersPanel/.work-orders-desktop-filters).
   Sortiranje je time zauzimalo 2 track-a umesto 1, ostavljajući "Obriši filtere" bez mesta u prvom
   redu — CSS Grid ga je automatski prebacio u NOVI red. Kupčeve opcije sortiranja ne trebaju 2
   kolone; vraćanje na 1 kolonu (grid-column: auto) vraća svih 5 stavki u JEDAN red. */
.customers-screen .work-orders-desktop-filters .sort-filter {
  grid-column: auto;
}
.customers-screen .work-orders-desktop-filters {
  grid-template-columns: minmax(220px, 1.45fr) repeat(4, minmax(105px, 1fr)) auto;
}
.customers-screen .work-orders-desktop-filters > * { grid-column: auto !important; }

/* Column widths (LOCKED §8, rebalanced per Manual QA — laptop-width overflow finding): compact for
   code/PIB/country/postal, meaningful width for name/address, controlled for city, enough-for-an-
   email for contact mail, fixed compact for actions — same <colgroup>-driven mechanism as Work
   Orders' wo-col-* (workOrderListBoard), just Customers' own column set.
   Budget: the 9 widths below sum to 940px — chosen to fit the actual available content-area width
   on a normal laptop viewport (≈1366px − 300px sidebar − 2×44px content padding ≈ 978px) with
   headroom, rather than the ".work-orders-screen" shared 1328px min-width (tuned for Work Orders'
   11 wider columns), which was forcing an unnecessary horizontal scrollbar for Customers. */
.customers-screen .work-orders-table { min-width: 1020px; }
.customers-screen .work-orders-table .cust-col-code { width: 70px; }
.customers-screen .work-orders-table .cust-col-market { width: 110px; }
.customers-screen .work-orders-table .cust-col-name { width: 168px; }
.customers-screen .work-orders-table .cust-col-pib { width: 96px; }
.customers-screen .work-orders-table .cust-col-country { width: 78px; }
.customers-screen .work-orders-table .cust-col-address { width: 140px; }
.customers-screen .work-orders-table .cust-col-postal { width: 84px; }
.customers-screen .work-orders-table .cust-col-city { width: 100px; }
.customers-screen .work-orders-table .cust-col-email { width: 122px; }
.customers-screen .work-orders-table .cust-col-actions { width: 72px; }

/* Header centering (LOCKED §2): sort-header is inline-flex, so centering the <th> via text-align
   centers the label+icon as one unit — icon stays visually attached to the label. Body cells stay
   left-aligned (established table readability pattern; the requirement is header-only). */
.customers-screen .work-orders-table th {
  text-align: center;
}

/* Premium borders (LOCKED §3): reuses the exact subtle row-separator pattern already established
   elsewhere in NormaX (see .product-stock-history-table) — var(--ds-border) at full token value is
   already low-contrast by design, not a new darker tone. Row lines help horizontal scanning;
   faint column lines (kept to body cells only, not header, for a lighter top edge) help distinguish
   boundaries without a spreadsheet-grid look. */
.customers-screen .work-orders-table {
  border-collapse: collapse;
}
.customers-screen .work-orders-table th,
.customers-screen .work-orders-table td {
  border-bottom: 1px solid var(--ds-border);
}
.customers-screen .work-orders-table td + td {
  border-left: 1px solid var(--ds-border);
}

.cust-cell-ellipsis {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kupci Phase 2 — CRM (LOCKED §20: reuse the existing wo-create-modal/wo-create-card/icon-action
   premium family; the only genuinely NEW layout here is the comment-feed list and attachment rows,
   since nothing else in NormaX renders that shape today. Everything else (header, toolbar, form
   fields, buttons, empty/loading/error states, pagination) reuses classes already styled above. */
.crm-back-row {
  padding: 0 26px;
  margin-top: -4px;
}
.crm-back-row .compact-command {
  padding-left: 4px;
}

.crm-entry-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crm-entry-row {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Ceo kod klikabilan (LOCKED — Issue 2): suptilan, premium hover/focus umesto uočljivog/glasnog
   efekta — isti border-color/shadow jezik kao .work-order-modal-close hover, samo primenjen na
   celu karticu. */
.crm-entry-row:hover,
.crm-entry-row:focus-visible {
  border-color: var(--ds-primary-border);
  box-shadow: var(--ds-shadow-hover);
  outline: none;
}

.crm-entry-row header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg-soft);
}

.crm-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.crm-entry-overline { color: var(--ds-text-light); font-size: 10px; font-weight: 800; letter-spacing: .06em; }

.crm-entry-author {
  color: var(--ds-heading);
  font-size: 15px;
}

.crm-entry-date {
  color: var(--ds-text-light);
  font-size: 13px;
}

.crm-entry-edited {
  color: var(--ds-warning);
  background: var(--ds-warning-bg);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: help;
}

.crm-entry-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.crm-entry-attachment-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ds-text-light);
  font-size: 13px;
}
.crm-entry-attachment-count svg {
  width: 16px;
  height: 16px;
}

.crm-entry-body {
  margin: 0;
  padding: 14px 16px;
  color: var(--ds-heading);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.crm-entry-footer { display: flex; align-items: center; gap: 14px; min-height: 34px; padding: 8px 16px; border-top: 1px solid var(--ds-border); color: var(--ds-text-light); font-size: 12px; }
.crm-entry-footer .crm-entry-attachment-count { font-size: 12px; }
.crm-history-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); background: var(--ds-card); color: var(--ds-text-light); font-size: 12px; }
.crm-history-summary strong { color: var(--ds-heading); font-size: 14px; }
.crm-history-timeline { display: grid; gap: 10px; }
.crm-history-event { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 15px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); background: var(--ds-card); }
.crm-history-event-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ds-bg-soft); color: var(--ds-primary-hover); }
.crm-history-event-mark svg { width: 17px; height: 17px; }
.crm-history-event-content { min-width: 0; }
.crm-history-event-content header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.crm-history-event-content header strong { color: var(--ds-heading); font-size: 14px; }
.crm-history-event-content header span, .crm-history-event-content > small { color: var(--ds-text-light); font-size: 12px; }
.crm-history-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.crm-history-versions > div, .crm-history-original { min-width: 0; padding: 11px 13px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg-soft); }
.crm-history-versions span, .crm-history-original span { color: var(--ds-text-light); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.crm-history-versions p, .crm-history-original p { margin: 6px 0 0; color: var(--ds-heading); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-history-original { margin-top: 12px; }
.crm-history-file { margin: 9px 0 0; overflow-wrap: anywhere; }
.crm-history-more { align-self: center; }
@media (max-width: 680px) { .crm-entry-row header { align-items: flex-start; } .crm-entry-meta { gap: 6px; } .crm-history-versions { grid-template-columns: 1fr; } .crm-history-event-content header { flex-direction: column; gap: 2px; } }

.crm-attachment-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-attachment-row,
.crm-attachment-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  background: var(--ds-bg);
}

.crm-attachment-loading {
  color: var(--ds-text-light);
  font-size: 13px;
}

.crm-attachment-row svg:first-child {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ds-primary);
}

.crm-attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ds-heading);
}

.crm-attachment-size {
  color: var(--ds-text-light);
  font-size: 12px;
  flex-shrink: 0;
}

.crm-attachment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.crm-attachment-pending {
  border-style: dashed;
}

/* Header nav polish: "Nazad na kupca" + "Dodaj CRM komentar" premešteni u header action zonu, u
   LOCKED redosledu Nazad -> Dodaj -> X (Manual QA finding). Isti 38px .compact-command min-height
   kao .work-order-modal-close, pa se sve tri akcije savršeno poravnaju uz align-items:center; stari
   poseban red ispod header-a i toolbar-dugme su uklonjeni. */
.crm-header-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.crm-modal .crm-modal-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.crm-modal .crm-modal-header > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.crm-modal .crm-modal-header .crm-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

@media (max-width: 560px) {
  .crm-header-actions .crm-back-button span,
  .crm-header-actions .crm-add-entry-button span {
    display: none;
  }
  .crm-header-actions .crm-back-button,
  .crm-header-actions .crm-add-entry-button {
    padding: 0 10px;
  }
}

/* Arhiviran CRM komentar — status badge unutar create/edit modala (LOCKED — Issue 3/status model). */
.crm-entry-archived-banner {
  align-items: center;
}
.crm-entry-archived-banner .status-badge {
  flex-shrink: 0;
}

/* Kupci Phase 2 CRM — UX correction (Manual QA finding), two root causes:

   1. RIGHT RAIL TOO TALL: .wo-number-card carries a Work-Order-only "big generated number"
      treatment (min-height:100%, big centered padding — designed for a large centered placeholder
      number). .work-order-modal-body is a two-column CSS Grid with default align-items:stretch, so
      BOTH columns are stretched to the tall left-content row height. The earlier Customers-era
      override (search above for ".modal-panel.work-order-create-modal .wo-number-card") resets
      display/align-content/padding/text-align but never touches min-height:100% — so the identity/
      status card kept filling that entire tall stretched height, pushing "Funkcije"/CRM down near
      the bottom of the modal. (Its "align-self: start" companion declaration was a no-op: that
      property only affects grid ITEMS, and .wo-number-card is a grandchild of the grid, not a
      direct item — the actual grid item is .work-order-create-side.) Fixed here, scoped to
      .customer-modal only, so Work Orders' own big generated-number card is untouched.

   2. CRM ENTRIES SQUEEZED INTO A NARROW COLUMN: the CRM list/create/edit views reuse
      .work-order-modal-body for layout convenience, but that class is a two-column grid
      (content + 300px aside) built for the Customer/Work-Order FORM shape. CRM has no aside at
      all — toolbar and entry feed were simply auto-placed as grid items into that same two-column
      template, so alternating elements fell into the narrow 300px second column instead of using
      the full modal width. Fixed by making .crm-modal-body a plain single-column stack. */

.customer-modal-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "overview overview"
    "main side";
  grid-template-rows: max-content max-content;
  align-content: start;
  align-items: start;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 14px;
  background: var(--ds-bg);
}

.customer-modal-main {
  grid-area: main;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.customer-modal .customer-identity-card {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

.customer-modal-side {
  grid-area: side;
  align-self: start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  height: max-content;
}

.crm-modal .crm-modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  box-sizing: border-box;
  padding: 14px;
  background: var(--ds-bg);
}

.crm-modal-body > * {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 1280px) and (min-width: 861px) {
  .customer-modal-body {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 12px;
    padding: 12px;
  }

  .crm-modal-body {
    padding: 12px;
  }
}

@media (max-width: 860px) {
  .customer-modal-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "overview"
      "side"
      "main";
    grid-template-rows: max-content max-content max-content;
  }

  .customer-modal-side {
    order: initial;
  }
}

@media (max-width: 560px) {
  .customer-modal-body,
  .crm-modal-body {
    padding: 10px;
  }
}

/* Toolbar: CRM is primarily a history/feed view — filters are secondary, so the toolbar gets a
   more compact card treatment than the page-level Customers/Work-Orders list toolbar (22px padding,
   sized for a full list page, not a modal). Reuses the SAME label/select/input styling
   (.work-orders-toolbar/.work-orders-desktop-filters) — only padding/gap are tightened. "Dodaj CRM
   komentar" no longer lives here (moved into the header action zone, LOCKED order Nazad -> Dodaj ->
   X — see .crm-header-actions above); the toolbar now holds ONLY Pretraga/Status/Sortiranje/Smer. */
.work-orders-toolbar.crm-toolbar {
  padding: 16px 18px;
  gap: 14px;
}

/* Search takes 2 of the 4 existing filter-grid tracks (CRM has 3 fields, not 4 — this avoids an
   empty trailing track) — a plain grid-column span, so it still degrades correctly through every
   existing .work-orders-desktop-filters responsive breakpoint untouched. */
.crm-search-field {
  grid-column: span 2;
}

.crm-entry-list {
  min-width: 0;
}
.production-time-helper {
  color: var(--muted, #60758a);
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0.2rem;
  white-space: nowrap;
}

.wo-detail-tab-count-alert {
  border: 1px solid rgba(180, 35, 24, .16);
  color: #fff;
  background: var(--ds-danger, #b42318);
}

.production-time-helper[hidden] {
  display: none;
}
.delivery-note-summary{display:flex;flex-direction:column;gap:2px;margin-top:5px;color:#667085;font-size:11px;line-height:1.25}.delivery-note-summary strong{color:#175cd3;font-size:12px}.delivery-note-summary.issued{padding-left:8px;border-left:2px solid #2e90fa}.delivery-note-summary.pending{font-weight:600;color:#98a2b3}.delivery-note-backdrop{z-index:145}.delivery-note-modal{width:min(1040px,calc(100vw - 32px));max-height:calc(100vh - 36px);padding:0;overflow:hidden;border-radius:18px;box-shadow:0 24px 80px rgba(16,24,40,.24)}.delivery-note-head{display:flex;justify-content:space-between;gap:24px;padding:24px 28px 20px;border-bottom:1px solid #eaecf0;background:linear-gradient(135deg,#f8fbff,#fff)}.delivery-note-head small{font-weight:800;letter-spacing:.12em;color:#1570ef}.delivery-note-head h2{margin:4px 0 6px;color:#101828}.delivery-note-head p{margin:0;color:#667085}.delivery-note-body{max-height:calc(100vh - 220px);overflow:auto;padding:22px 28px;background:#fcfcfd}.delivery-note-context{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:12px;margin-bottom:18px}.delivery-note-context div{padding:13px 15px;border:1px solid #e4e7ec;border-radius:12px;background:#fff}.delivery-note-context span{display:block;margin-bottom:4px;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.delivery-note-context strong{color:#1d2939;font-size:13px}.delivery-note-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.delivery-note-form .field{display:flex;flex-direction:column;gap:6px}.delivery-note-form .field.wide{grid-column:1/-1}.delivery-note-form input,.delivery-note-form textarea{width:100%;box-sizing:border-box;border:1px solid #d0d5dd;border-radius:10px;padding:10px 12px;background:#fff;color:#101828}.delivery-note-form input:focus,.delivery-note-form textarea:focus{outline:3px solid rgba(46,144,250,.14);border-color:#2e90fa}.delivery-note-form textarea{min-height:82px;resize:vertical}.delivery-note-form [readonly]{background:#f2f4f7;color:#475467}.delivery-note-items{margin-top:22px;padding:16px;border:1px solid #e4e7ec;border-radius:14px;background:#fff}.delivery-note-items h3{margin:0 0 10px}.delivery-note-items div{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #f2f4f7}.delivery-note-items div span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#eff8ff;color:#175cd3;font-weight:700}.delivery-note-items div em{font-style:normal;font-weight:700;color:#344054}.delivery-note-footer{display:flex;justify-content:space-between;gap:16px;padding:18px 28px;border-top:1px solid #eaecf0;background:#fff}.delivery-note-footer>div{display:flex;gap:10px}@media(max-width:760px){.delivery-note-modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.delivery-note-head,.delivery-note-body,.delivery-note-footer{padding-left:16px;padding-right:16px}.delivery-note-context,.delivery-note-form{grid-template-columns:1fr}.delivery-note-form .field.wide{grid-column:auto}.delivery-note-footer{align-items:stretch;flex-direction:column-reverse}.delivery-note-footer>div{flex-direction:column}.delivery-note-footer button{width:100%}}
.delivery-note-caution{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding:11px 13px;border:1px solid #b2ddff;border-radius:10px;background:#eff8ff;color:#175cd3;font-size:13px;font-weight:650}.delivery-note-caution svg{width:18px;height:18px;flex:none}

/* Delivery Note Cut A v2: bounded landscape shell with body-only scrolling. */
.delivery-note-modal {
  width: min(1200px, calc(100vw - 44px));
  max-height: calc(100dvh - 44px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.delivery-note-body {
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.delivery-note-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.delivery-note-form-group {
  min-width: 0;
  padding: 17px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
}

.delivery-note-form-group > h3 {
  margin: 0 0 14px;
  color: #1d2939;
  font-size: 14px;
}

.delivery-note-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.delivery-note-form-grid .field {
  min-width: 0;
}

.delivery-note-form-grid .field.wide {
  grid-column: 1 / -1;
}

.delivery-note-form .nx-date-control-wrap {
  --nx-date-input-height: 42px;
}

.delivery-note-footer {
  min-width: 0;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .delivery-note-modal {
    width: min(920px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
  }

  .delivery-note-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .delivery-note-backdrop {
    padding: 0;
  }

  .delivery-note-modal {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .delivery-note-head,
  .delivery-note-body,
  .delivery-note-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .delivery-note-context,
  .delivery-note-form-grid {
    grid-template-columns: 1fr;
  }

  .delivery-note-form-grid .field.wide {
    grid-column: auto;
  }

  .delivery-note-footer {
    display: grid;
    grid-template-columns: 1fr;
    flex-direction: initial;
  }

  .delivery-note-footer > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delivery-note-footer button {
    width: 100%;
    min-height: 44px;
  }
}
.archive-list-card.table-shell { border-color: color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border)); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-card); }
.archive-list-card .archive-table { border-collapse: separate; border-spacing: 0; }
.archive-list-card .archive-table th + th, .archive-list-card .archive-table td + td { border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent); }
.archive-list-card .archive-table thead th { border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border)); }
.archive-screen .archive-table th { white-space: normal; }
.archive-screen .archive-table th .sort-header { gap: 5px; font: inherit; font-weight: inherit; line-height: inherit; text-transform: inherit; }
.archive-screen .archive-table th .sort-header svg { flex: 0 0 13px; width: 13px; height: 13px; }
.archive-list-card .archive-pagination { border-top: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent); }
.archive-delivery-note-trigger { position: relative; }
.archive-delivery-note-trigger.delivery-note-evidence-missing::after, .archive-delivery-note-trigger.delivery-note-evidence-present::after { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border: 2px solid var(--ds-card); border-radius: 999px; content: ""; }
.archive-delivery-note-trigger.delivery-note-evidence-missing::after { background: #d97706; }
.archive-delivery-note-trigger.delivery-note-evidence-present::after { background: var(--ds-success); }
.shipment-list-card.table-shell { border-color: color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border)); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-card); }
.shipment-list-card .shipment-table { border-collapse: separate; border-spacing: 0; }
.shipment-list-card .shipment-table th + th, .shipment-list-card .shipment-table td + td { border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent); }
.shipment-list-card .shipment-table thead th { border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border)); }
.shipment-screen .shipment-table th { white-space: normal; }
.shipment-screen .shipment-table th .sort-header { gap: 5px; font: inherit; font-weight: inherit; line-height: inherit; text-transform: inherit; }
.shipment-screen .shipment-table th .sort-header svg { flex: 0 0 13px; width: 13px; height: 13px; }
.shipment-list-card .shipment-table tbody tr { border-bottom: 0; }
.shipment-list-card .shipment-table tbody td { border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent); }
.shipment-list-card .shipment-table tbody tr:last-child td { border-bottom: 0; }
.shipment-list-card .shipment-pagination { border-top: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent); }
.shipment-screen .shipment-table th, .archive-screen .archive-table th { text-align: center; }
.shipment-screen .shipment-table th .sort-header, .archive-screen .archive-table th .sort-header { width: 100%; justify-content: center; text-align: center; }
.shipment-screen .shipment-table .table-cell-center, .archive-screen .archive-table .table-cell-center { text-align: center; }
.shipment-screen .shipment-customer-cell, .archive-screen .archive-customer-name { font-weight: 700; }
.shipment-screen .shipment-owner-cell, .archive-screen .archive-owner-cell { justify-content: center; }
.shipment-screen .shipment-owner-cell span, .archive-screen .archive-owner-cell span { font-weight: 500; }
.shipment-screen .shipment-table .table-cell-center .inline-select { margin-inline: auto; }
.shipment-screen .shipment-table .table-cell-center .shipment-stacked-cell, .archive-screen .archive-table .table-cell-center .archive-stacked-cell, .archive-screen .archive-table .table-cell-center .archive-reference-cell { justify-items: center; }
.shipment-screen .shipment-table .row-actions, .archive-screen .archive-table .archive-row-actions { justify-content: center; flex-wrap: nowrap; }
@media (max-width: 860px) { .shipment-list-card.table-shell { overflow: hidden; } }
.shipment-action-menu-status { padding: 9px 12px; border-bottom: 1px solid var(--ds-border); color: var(--ds-text-muted); font-size: .72rem; font-weight: 800; }
.shipment-action-menu-status.missing { color: #8a4b08; background: #fff8e8; }
.shipment-action-menu-status.present { color: #166534; background: #f0fdf4; }
.signed-delivery-note-modal { width: min(620px, calc(100vw - 32px)); }
.signed-delivery-note-body { display: grid; gap: 16px; padding: 20px 24px; }
.signed-delivery-note-picker { display: grid; gap: 8px; padding: 18px; border: 1px dashed var(--ds-border); border-radius: 14px; background: var(--ds-bg-soft); }
.signed-delivery-note-picker span { font-weight: 700; }
.signed-delivery-note-picker small { color: var(--ds-text-muted); }

/* Settings premium shell: reuses the canonical Materials header and Settings/Bank list primitives. */
.settings-page { gap: 30px; }
.settings-premium-head { margin: 0; padding: 12px 14px; border-radius: 12px; box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), 0.04); }
.settings-premium-head .module-title-block h1 { font-size: clamp(24px, 1.95vw, 28px); }
.settings-premium-head .module-title-block span { margin-top: 5px; color: var(--ds-text-light); font-size: 14px; line-height: 1.5; }
.settings-group { display: grid; gap: 14px; min-width: 0; }
.settings-group-heading { display: flex; align-items: center; min-height: 28px; padding: 0 4px; border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 78%, transparent); }
.settings-group-heading h2 { margin: 0 0 9px; color: var(--ds-heading); font-size: 18px; font-weight: 650; }
.settings-group-grid { display: grid; gap: 18px; min-width: 0; }
.settings-group-grid > .settings-section { margin: 0; }
.settings-section { border-color: var(--ds-border); border-radius: var(--ds-radius-card); background: var(--ds-card); box-shadow: var(--ds-shadow-card); }
.settings-section-header h3 { margin: 0 0 6px; color: var(--ds-heading); font-size: 17px; font-weight: 650; }
.settings-workday-card,
.settings-working-days-card,
.settings-non-working-card { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-card); box-shadow: none; }
.settings-workday-card > svg,
.settings-working-days-card > svg { color: var(--ds-primary); }
.settings-workday-card small,
.settings-working-days-card small,
.settings-workday-card em,
.settings-working-days-card em,
.settings-non-working-card p { color: var(--ds-text-light); }
.settings-workday-card strong,
.settings-working-days-card strong,
.settings-non-working-card h3 { color: var(--ds-heading); }
.settings-calendar-list { gap: 10px; }
.settings-calendar-row.settings-bank-row { min-height: 64px; display: flex; grid-template-columns: none; padding: 12px 14px; border-color: var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-card); }
.settings-calendar-main { flex: 1 1 260px; }
.settings-calendar-main strong { overflow-wrap: anywhere; }
.settings-calendar-main strong.is-unnamed { color: var(--ds-text-light); font-style: italic; font-weight: 650; }
.settings-calendar-main span { font-variant-numeric: tabular-nums; }
.settings-calendar-actions { justify-content: flex-end; }
.settings-calendar-type { color: var(--ds-primary); background: var(--ds-primary-light); }
.settings-calendar-empty.empty-state { min-height: 112px; display: grid; place-items: center; gap: 8px; padding: 20px; border: 1px dashed var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-bg-soft); color: var(--ds-text-light); text-align: center; }
.settings-calendar-empty.empty-state svg { width: 25px; height: 25px; color: var(--ds-primary); }
.settings-calendar-empty.empty-state p { margin: 0; }
.settings-entry-type-field { grid-column: 1 / -1; margin: 0; padding: 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); }
.settings-entry-type-field legend { padding: 0 6px; color: var(--ds-heading); font-weight: 700; }
.settings-entry-type-field > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.settings-entry-type-field button { width: 100%; justify-content: center; }
.settings-entry-type-field button.active { border-color: var(--ds-primary); background: var(--ds-primary-light); color: var(--ds-primary); box-shadow: inset 0 0 0 1px var(--ds-primary); }

@media (max-width: 760px) {
  .settings-page { gap: 22px; }
  .settings-group-grid { gap: 14px; }
  .settings-calendar-row.settings-bank-row { align-items: stretch; flex-direction: column; }
  .settings-calendar-main { flex-basis: auto; }
  .settings-calendar-actions { justify-content: flex-start; }
  .settings-calendar-actions .secondary-button { flex: 1 1 140px; justify-content: center; }
}

@media (max-width: 480px) {
  .settings-non-working-card > header nav,
  .settings-entry-type-field > div,
  .settings-calendar-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .settings-non-working-card > header nav button,
  .settings-calendar-actions button { width: 100%; justify-content: center; }
  .settings-calendar-type { justify-self: start; }
}
.items-toolbar-actions .secondary-button.compact-command[data-action="collapse-work-items"] {
  min-height: 44px;
  border-color: var(--ds-border);
  background: #fff;
  color: var(--ds-heading);
  white-space: nowrap;
}
.items-toolbar-actions [data-action="collapse-work-items"] svg { transform: rotate(180deg); }

/* Company settings uses a bounded landscape workspace with permanently visible actions. */
.modal-panel.company-settings-modal {
  width: min(1080px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 26px 30px 0;
}
.company-settings-modal > h2 { margin-bottom: 6px; font-size: 22px; }
.company-settings-modal > p { margin: 0; }
.company-settings-modal .company-settings-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  min-height: 0;
  margin: 20px -8px 0 0;
  padding: 2px 8px 20px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.company-settings-modal .settings-working-days-field,
.company-settings-modal .settings-logo-upload { grid-column: 1 / -1; }
.company-settings-modal .settings-logo-upload { grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr); align-items: center; }
.company-settings-modal .settings-logo-upload > span { grid-column: 1 / -1; }
.company-settings-modal .settings-logo-upload > div { grid-row: span 2; }
.company-settings-modal .modal-actions {
  position: relative;
  z-index: 2;
  min-height: 72px;
  align-items: center;
  margin: 0 -30px;
  padding: 14px 30px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-card);
  box-shadow: 0 -10px 24px rgba(var(--ds-sidebar-rgb), .06);
}
@media (max-width: 920px) {
  .company-settings-modal .company-settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .modal-backdrop:has(.company-settings-modal) { padding: 0; }
  .modal-panel.company-settings-modal { width: 100vw; height: 100dvh; max-height: 100dvh; padding: 22px 18px 0; border-radius: 0; }
  .company-settings-modal .company-settings-form { grid-template-columns: 1fr; margin-right: -5px; padding-right: 5px; }
  .company-settings-modal .settings-logo-upload { grid-template-columns: 1fr; }
  .company-settings-modal .settings-logo-upload > div { grid-row: auto; }
  .company-settings-modal .modal-actions { margin-inline: -18px; padding: 12px 18px; }
  .company-settings-modal .modal-actions button { flex: 1 1 0; }
}

/* UX stage B final package: shared responsive list, header and detail contracts. */
.module-page-header,
.stations-card-header.module-page-header {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.stations-screen > .stations-card,
.machine-master-screen > .machine-master-card {
  margin-top: 0;
}

.nx-command-header-actions-only {
  min-height: 0;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.filter-disclosure-button svg:last-child { transition: transform .18s ease; }
.filter-disclosure-button.active svg:last-child { transform: rotate(180deg); }

.quick-info-code { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.quick-info-code > :first-child {
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
  text-underline-offset: 3px;
}
.quick-info-indicator,
.product-quick-info-button.product-quick-info-context {
  display: inline-grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-text-light);
  cursor: pointer;
}
.quick-info-indicator svg,
.product-quick-info-button.product-quick-info-context svg { width: 14px; height: 14px; }
.quick-info-indicator:hover,
.quick-info-indicator:focus-visible,
.product-quick-info-button.product-quick-info-context:hover,
.product-quick-info-button.product-quick-info-context:focus-visible { color: var(--ds-primary); }
.product-card-name { display: block; margin-top: 3px; color: var(--ds-heading); font-size: 14px; }
.mobile-card-head-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.notes-mobile-cards { display: none; }
.product-header-more { display: none; position: relative; }
.product-header-more > summary { list-style: none; }
.product-header-more > summary::-webkit-details-marker { display: none; }
.product-header-more > div {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
.product-header-more > div button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; background: transparent; color: var(--ds-heading); text-align: left; }
.product-header-more > div button:hover { background: var(--ds-bg-soft); }
.product-header-more svg { width: 17px; height: 17px; }

@media (min-width: 1100px) and (max-width: 1366px) {
  .work-orders-screen .work-order-kpis { display: flex; grid-template-columns: none; overflow-x: auto; }
  .work-orders-screen .work-order-kpis > * { flex: 1 0 0; min-width: 150px; }
}

@media (max-width: 1024px) {
  .product-kpi-grid,
  .work-orders-screen .work-order-kpis {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .product-kpi-grid > *,
  .work-orders-screen .work-order-kpis > * { flex: 0 0 min(205px, 55vw); min-width: 0; }

  #modal-root .modal-backdrop:has(.runtime-problem-detail-modal) {
    align-items: flex-start;
    overflow-y: auto;
  }
  #modal-root .runtime-problem-detail-modal {
    display: block;
    height: auto;
    min-height: calc(100dvh - 16px);
    max-height: none;
    overflow: visible;
  }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-body,
  #modal-root .runtime-problem-detail-modal .problem-detail-grid-page,
  #modal-root .runtime-problem-detail-modal :is(.problem-modal-overview-card, .problem-activity-card),
  #modal-root .runtime-problem-detail-modal .problem-timeline {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #modal-root .runtime-problem-detail-modal .problem-modal-context { margin-bottom: 12px; }
  #modal-root .runtime-problem-detail-modal .problem-modal-overview-card { margin-bottom: 12px; }
  #modal-root .runtime-problem-detail-modal .problem-detail-composer { margin-top: 0; }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-footer { position: sticky; z-index: 8; bottom: 0; }
}

@media (max-width: 760px) {
  .product-wide-action { display: none !important; }
  .product-header-more { display: block; }

  .work-order-card-grid,
  .product-card-grid,
  .shipment-card-grid,
  .materials-cards,
  .customers-card-grid,
  .notes-mobile-cards,
  .stations-mobile-list,
  .machine-card-list,
  .scrap-events-cards {
    gap: 9px;
  }

  .notes-screen .notes-table-shell { display: none; }
  .notes-mobile-cards { display: grid; padding: 10px; }
  .note-mobile-card {
    display: grid;
    gap: 10px;
    min-height: 150px;
    max-height: 200px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-card);
  }
  .note-mobile-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .note-mobile-card > header > div { min-width: 0; }
  .note-mobile-card > header strong,
  .note-mobile-card > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-mobile-card > header small { margin-top: 3px; color: var(--ds-text-light); font-size: 11px; }
  .note-mobile-card dl,
  .work-order-card dl,
  .product-card dl,
  .material-card dl,
  .shipment-card dl,
  .customers-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
    margin: 0;
  }
  .note-mobile-card dl > div,
  .work-order-card dl > div,
  .product-card dl > div,
  .material-card dl > div,
  .shipment-card dl > div,
  .customers-card dl > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px;
    align-items: baseline;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  :is(.note-mobile-card, .work-order-card, .product-card, .material-card, .shipment-card, .customers-card) dt { color: var(--ds-text-light); font-size: 10px; white-space: nowrap; }
  :is(.note-mobile-card, .work-order-card, .product-card, .material-card, .shipment-card, .customers-card) dt::after { content: " –"; }
  :is(.note-mobile-card, .work-order-card, .product-card, .material-card, .shipment-card, .customers-card) dd { min-width: 0; overflow: hidden; margin: 0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

  .work-order-card,
  .product-card,
  .material-card,
  .shipment-card,
  .customers-card {
    min-height: 150px;
    max-height: 200px;
    padding: 12px;
    overflow: hidden;
  }
  .work-order-card > header,
  .product-card > header,
  .material-card > header,
  .shipment-card > header,
  .customers-card > header { align-items: flex-start; gap: 8px; }
  .work-order-card > header > div,
  .product-card > header > div,
  .material-card > header > div,
  .shipment-card > header > div,
  .customers-card > header > div { min-width: 0; }
  .work-order-card h2 { margin: 3px 0 0; font-size: 13px; line-height: 1.25; }
  .work-order-card footer,
  .material-card footer,
  .product-card > .product-card-actions { display: none; }
  .work-order-card .secondary-button.compact-command { width: 32px; min-width: 32px; height: 32px; padding: 0; }
  .work-order-card .secondary-button.compact-command span { display: none; }
  .shipment-card-method { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
  .shipment-card-note { display: none; }

  .global-problem-table { display: block; }
  .global-problem-table thead { display: none; }
  .global-problem-table tbody { display: grid; gap: 9px; padding: 10px; }
  .global-problem-table tr:not(.empty-row) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    min-height: 150px;
    max-height: 200px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-card);
  }
  .global-problem-table tr:not(.empty-row) td { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px; min-width: 0; padding: 0; border: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .global-problem-table tr:not(.empty-row) td::before { content: attr(data-label) " –"; color: var(--ds-text-light); font-size: 10px; }
  .global-problem-table tr:not(.empty-row) td:nth-child(6) { grid-column: 1 / -1; }

  .filter-disclosure-panel .filter-extra-row[hidden] { display: none !important; }
  .filter-disclosure-panel .filter-primary-row { grid-template-columns: minmax(0, 1fr) auto; }
  .filter-disclosure-panel .filter-primary-row > label:not(:first-child) { display: none; }
  .filter-disclosure-panel:has(.filter-disclosure-button.active) .filter-primary-row > label:not(:first-child) { display: grid; grid-column: 1 / -1; }
  .filter-disclosure-panel .filter-disclosure-button { display: inline-flex; }
  .filter-disclosure-panel .filter-extra-row:not([hidden]) { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .nx-command-header-actions-only { display: flex !important; margin: 0 0 10px; }
  .nx-command-header-actions-only .nx-command-header-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; }
  .nx-command-header-actions-only .nx-command-date { margin-right: auto; }
  .nx-command-header-actions-only .global-logout-action > span { display: none; }
  .nx-command-header-actions-only .global-logout-action { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
  .work-order-card-grid,
  .product-card-grid,
  .shipment-card-grid,
  .materials-cards,
  .customers-card-grid,
  .notes-mobile-cards { grid-template-columns: 1fr; }

  #modal-root .runtime-problem-detail-modal { min-height: 100dvh; }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-header { position: static; }
  #modal-root .runtime-problem-detail-modal .problem-modal-context { grid-template-columns: 1fr; overflow: visible; }
  #modal-root .runtime-problem-detail-modal .problem-modal-context > div { min-height: 0; border-right: 0; }
  #modal-root .runtime-problem-detail-modal .problem-modal-overview-card,
  #modal-root .runtime-problem-detail-modal .problem-activity-card { overflow: visible; }
}

/* Settings overview: compact rows carry hierarchy; forms and long lists stay in modals. */
.settings-page { gap: 16px; font-family: var(--ds-font-sans); }
.settings-page .settings-premium-head { min-height: 74px; padding: 14px 18px; }
.settings-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-overview-column { display: grid; gap: 16px; min-width: 0; }
.settings-overview-panel { gap: 0; overflow: hidden; border: 1px solid var(--ds-border); border-radius: 14px; background: var(--ds-card); box-shadow: 0 8px 24px rgba(var(--ds-sidebar-rgb), .055); }
.settings-overview-panel .settings-group-heading { min-height: 42px; padding: 0 16px; border: 0; background: var(--ds-bg-soft); }
.settings-overview-panel .settings-group-heading h2 { margin: 0; color: var(--ds-text-light); font-size: 11px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.settings-overview-list { display: grid; gap: 0; }
.settings-overview-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; min-height: 76px; padding: 11px 14px; background: var(--ds-card); }
.settings-overview-row + .settings-overview-row { border-top: 1px solid var(--ds-border); }
.settings-overview-row:hover { background: color-mix(in srgb, var(--ds-bg-soft) 52%, var(--ds-card)); }
.settings-row-icon { grid-column: 1; grid-row: 1 / span 2; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: var(--ds-primary); background: var(--ds-primary-light); }
.settings-row-icon svg { width: 20px; height: 20px; }
.settings-row-copy { grid-column: 2; grid-row: 1; min-width: 0; }
.settings-row-copy h3 { margin: 0 0 3px; color: var(--ds-heading); font-size: 14px; font-weight: 700; line-height: 1.3; }
.settings-row-copy p { margin: 0; overflow: hidden; color: var(--ds-text-light); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.settings-row-summary { grid-column: 2; grid-row: 2; min-width: 0; max-width: none; overflow: hidden; color: var(--ds-primary); font-size: 11px; font-weight: 700; line-height: 1.35; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.settings-row-actions { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 7px; justify-content: flex-end; }
.settings-row-action { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--ds-primary); border-radius: 8px; color: #fff; background: var(--ds-primary); font: inherit; font-size: 12px; font-weight: 750; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: 0 4px 10px rgba(var(--ds-sidebar-rgb), .12); }
.settings-row-action:hover { border-color: var(--ds-primary-hover); color: #fff; background: var(--ds-primary-hover); }
.settings-row-action.is-secondary { border-color: var(--ds-primary-border); color: var(--ds-primary); background: var(--ds-primary-light); box-shadow: none; }
.settings-row-action.is-secondary:hover { border-color: var(--ds-primary); color: var(--ds-primary); background: color-mix(in srgb, var(--ds-primary-light) 72%, var(--ds-card)); }
.settings-row-action:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.settings-row-action svg { width: 15px; height: 15px; }
.settings-overview-row.has-single-action { cursor: pointer; }
.settings-overview-row.has-single-action .settings-row-actions { position: absolute; inset: -11px -14px; z-index: 1; display: block; grid-column: 1 / -1; grid-row: 1 / -1; }
.settings-overview-row.has-single-action .settings-row-action { box-sizing: border-box; width: 100%; height: 100%; justify-content: flex-end; padding: 0 14px; border: 0; border-radius: 0; color: var(--ds-text-light); background: transparent; box-shadow: none; }
.settings-overview-row.has-single-action .settings-row-action:hover { border: 0; color: var(--ds-heading); background: transparent; }
.settings-overview-row.has-single-action .settings-row-action svg { order: 2; color: var(--ds-text-muted); }

.company-calendar-modal .calendar-settings-form { grid-template-columns: 1fr; }
.company-calendar-modal .settings-working-days-field { margin: 0; }
.modal-panel.settings-manager-modal { width: min(880px, calc(100vw - 36px)); max-width: none; max-height: calc(100dvh - 36px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; padding-bottom: 0; }
.settings-manager-modal .settings-manager-body { min-height: 0; margin: 18px -5px 0 0; padding: 0 5px 18px 0; overflow-y: auto; overscroll-behavior: contain; }
.settings-manager-body > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.settings-manager-body > header h3 { margin: 0 0 4px; color: var(--ds-heading); font-size: 16px; }
.settings-manager-body > header p { margin: 0; color: var(--ds-text-light); font-size: 13px; }
.settings-manager-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.settings-manager-modal .modal-actions { min-height: 66px; align-items: center; margin: 0 calc(var(--ds-space-card) * -1); padding: 12px var(--ds-space-card); border-top: 1px solid var(--ds-border); background: var(--ds-card); box-shadow: 0 -8px 22px rgba(var(--ds-sidebar-rgb), .05); }
.settings-manager-modal :is(.settings-bank-row, .settings-calendar-row) { box-shadow: none; }

@media (max-width: 1180px) {
  .settings-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .settings-overview-row { min-height: 82px; }
  .settings-manager-body > header { align-items: stretch; flex-direction: column; }
  .settings-manager-actions { width: 100%; }
  .settings-manager-actions .settings-row-action { flex: 1 1 0; }
}
@media (max-width: 540px) {
  .settings-page { gap: 12px; }
  .settings-page .settings-premium-head { min-height: 68px; }
  .settings-overview-grid, .settings-overview-column { gap: 12px; }
  .settings-overview-row { grid-template-columns: 36px minmax(0, 1fr); gap: 9px 11px; padding: 12px; }
  .settings-overview-row.has-single-action .settings-row-actions { inset: 0; grid-column: auto; grid-row: auto; width: auto; padding-top: 0; }
  /* The whole row opens the section; on phones only the chevron shows so it never covers the text. */
  .settings-overview-row.has-single-action { padding-right: 44px; }
  .settings-overview-row.has-single-action .settings-row-action > span { display: none; }
  .settings-row-icon { width: 36px; height: 36px; }
  .settings-row-summary { grid-column: 2; }
  .settings-row-actions { grid-column: 1 / -1; grid-row: auto; width: 100%; padding-top: 2px; }
  .settings-row-action { flex: 1 1 0; min-height: 36px; }
  .settings-row-copy p { white-space: normal; }
  .modal-backdrop:has(.settings-manager-modal) { padding: 0; }
  .modal-panel.settings-manager-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* Login-only presentation: password-change and recovery screens retain their owners. */
.login-screen.login-premium { display: grid; grid-template-columns: minmax(340px, 38%) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; padding: 0; place-items: stretch; background: #f6f8fb; }
.login-premium .login-brand-panel { display: flex; align-items: center; padding: clamp(32px, 4vw, 80px); color: #fff; background: radial-gradient(ellipse at 0 100%, rgba(54, 118, 164, .28), transparent 65%), linear-gradient(150deg, #0d1d31, #1b3a55 70%, #285879); }
.login-premium .login-brand-content { width: 100%; max-width: 440px; margin: auto; }
.login-premium .login-brand-logo { display: block; width: min(100%, 330px); height: auto; margin-bottom: 52px; }
.login-premium .login-brand-content h2 { margin: 0 0 18px; color: #fff; font-size: clamp(26px, 2.3vw, 38px); font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.login-premium .login-brand-content p { margin: 0; color: #c5d7e5; font-size: 17px; line-height: 1.7; }
.login-premium .login-brand-caption { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(197, 215, 229, .18); color: #a6c0d4; font-size: 12px; letter-spacing: .04em; }
.login-premium .login-form-region { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 56px 32px; }
.login-premium .login-panel { width: min(100%, 410px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-premium .login-form-logo { display: block; width: 224px; max-width: 80%; height: auto; margin: 0 auto 42px; }
.login-premium .login-intro { margin-bottom: 28px; }
.login-premium .login-intro h1 { margin: 0 0 9px; color: #10253c; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.login-premium .login-intro p { margin: 0; color: #63768a; font-size: 14px; line-height: 1.6; }
.login-premium .login-panel form { gap: 18px; }
.login-premium .login-panel label { gap: 7px; color: #526a82; font-size: 13px; font-weight: 600; }
.login-premium .login-panel input { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid #d5e0ea; border-radius: 9px; background: #fff; color: #10253c; font: inherit; font-size: 15px; font-weight: 400; box-shadow: none; }
.login-premium .login-password-field { position: relative; display: block; }
.login-premium .login-password-field input { padding-right: 48px; }
.login-premium .login-password-field button { position: absolute; top: 50%; right: 7px; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #63768a; cursor: pointer; }
.login-premium .login-password-field button:hover { background: #edf3f8; color: #2c6089; }
.login-premium .login-password-field button:focus-visible { outline: 2px solid #4a7fa7; outline-offset: 1px; }
.login-premium .login-password-field button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-premium .login-panel input::placeholder { color: #8998a8; }
.login-premium .login-panel input:focus-visible { outline: 0; border-color: #4a7fa7; box-shadow: 0 0 0 3px rgba(74,127,167,.14); }
.login-premium #login-error:empty { display: none; }
.login-premium #login-error { margin: 0; font-size: 13px; line-height: 1.5; }
.login-premium .login-panel .primary-button { width: 100%; min-height: 48px; margin-top: 4px; border-radius: 9px; background: #2c6089; color: #fff; font-size: 14px; font-weight: 650; box-shadow: 0 4px 10px rgba(30,64,93,.1); }
.login-premium .login-panel .primary-button:hover { background: #234f73; }
.login-premium .login-access-help, .login-premium .login-support { color: #63768a; font-size: 12.5px; line-height: 1.6; }
.login-premium .login-access-help { margin: 28px 0 12px; }
.login-premium .login-support { margin: 0; }
.login-premium .login-support a { color: #2c6089; text-underline-offset: 3px; }
@media (max-width: 800px) {
  .login-screen.login-premium { grid-template-columns: minmax(0, 1fr); }
  .login-premium .login-brand-panel { display: none; }
  .login-premium .login-form-region { padding: 40px 24px; }
}
@media (max-width: 420px) {
  .login-premium .login-form-region { padding: 32px 20px; }
  .login-premium .login-form-logo { width: 208px; margin-bottom: 32px; }
}

.login-premium .login-loading[hidden] { display: none; }
.login-premium .login-loading { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; background: #f6f8fb; color: #526a82; }
.login-loading-mark { width: min(62vw, 580px); height: auto; max-height: 60vh; }
.login-loading-fill { animation: login-nx-fill 2.4s ease-in-out both; }
.login-loading p { margin: 0; font-size: 14px; }
@keyframes login-nx-fill { from { transform: translateY(90px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .login-loading-fill { animation: none; } }

/* Notes and Problems use the shared catalog presentation without changing their workflows. */
.topbar:has(+ #section-root :is(.notes-screen, .global-problems-page)) {
  align-items: center; gap: 14px; margin-bottom: 10px; padding: 12px 14px;
  border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), .04);
}
.topbar:has(+ #section-root :is(.notes-screen, .global-problems-page)) .title-block { flex: 1 1 auto; min-width: 0; }
.topbar:has(+ #section-root :is(.notes-screen, .global-problems-page)) .module-title-block h1 {
  margin: 0; font-size: clamp(24px, 1.95vw, 28px); font-weight: 700; line-height: 1.08; letter-spacing: 0;
}
.topbar:has(+ #section-root :is(.notes-screen, .global-problems-page)) .module-title-block span {
  margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: #526a82;
}
.notes-filter-card label, .global-problem-filters label {
  color: #63768a; font-size: 10.5px; font-weight: 800; letter-spacing: 0; line-height: 1.1; text-transform: uppercase;
}
.notes-filter-card input, .notes-filter-card select, .global-problem-filters input, .global-problem-filters select,
.notes-list-toolbar select, .global-problem-page-size select {
  font-family: inherit; font-size: 13px; font-weight: 500; text-transform: none;
}
.problem-search-control { position: relative; min-width: 0; }
.problem-search-control > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; }
.global-problem-filters .problem-search-control input { padding-left: 34px; }
.global-problem-pagination .global-problem-page-size { border: 0; background: transparent; padding: 0; width: auto; }
.global-problem-pagination .global-problem-page-size select { width: auto; min-width: 132px; }
.notes-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.notes-list-toolbar > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.notes-list-toolbar > div > span { white-space: nowrap; color: #63768a; font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.notes-list-toolbar select { width: auto; min-width: 170px; max-width: 100%; }
.notes-screen .notes-table-shell { max-width: 100%; overflow-x: auto; border: 0; border-radius: 0; box-shadow: none; }
.notes-screen .notes-table-shell table { min-width: 850px; }
.notes-screen .notes-table-shell td { overflow-wrap: anywhere; }
.notes-screen .notes-table-shell th, .global-problems-page .global-problem-table th { text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 72%, var(--ds-primary-border));
}
.notes-screen .notes-table-shell th .sort-header, .global-problems-page .global-problem-table th .sort-header {
  width: 100%; justify-content: center; gap: 5px; font: inherit; text-transform: inherit; white-space: normal; text-align: center;
}
.notes-screen .notes-table-shell th .sort-header svg, .global-problems-page .global-problem-table th .sort-header svg { flex: 0 0 13px; width: 13px; height: 13px; }
.notes-screen .notes-table-shell th + th, .notes-screen .notes-table-shell td + td,
.global-problems-page .global-problem-table th + th, .global-problems-page .global-problem-table td + td { border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent); }
.notes-screen .notes-table-shell td, .global-problems-page .global-problem-table td { border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent); }
.notes-screen .notes-table-shell tr:last-child td, .global-problems-page .global-problem-table tr:last-child td { border-bottom: 0; }
.notes-screen :is(.notes-list-panel, .notes-archive-card), .global-problems-page .global-problem-table-card { border-color: color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border)); }
.notes-active-table-card td:last-child { text-align: center; }
.note-preview-modal .note-detail-header, .note-preview-modal .note-detail-header > div { flex-wrap: wrap; }
.note-preview-modal .note-detail > h2, .note-preview-modal .note-detail > p { margin: 0; }
@media (max-width: 640px) {
  .topbar:has(+ #section-root :is(.notes-screen, .global-problems-page)) { flex-wrap: wrap; }
  .notes-list-toolbar > div { flex-wrap: wrap; }
  .note-preview-modal .note-detail { padding: 14px; }
}

/* Dashboard hierarchy: existing projections/actions, content-driven sections. */
.content.content-dashboard:has(.nx-dashboard-overview) { height: auto; overflow: visible; }
.nx-command-center.nx-dashboard-overview { grid-template-rows: auto; gap: 20px; height: auto; }
.nx-dashboard-section { display: grid; min-width: 0; gap: 12px; }
.nx-dashboard-section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px; padding: 0 2px; }
.nx-dashboard-section-heading h2 { margin: 0; color: var(--ds-heading); font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.nx-dashboard-section-heading p { margin: 0; color: var(--ds-text-light); font-size: 14px; line-height: 1.5; }
.nx-dashboard-overview .nx-command-kpi { min-height: 110px; box-shadow: 0 4px 14px rgba(var(--ds-sidebar-rgb), .035); }
.nx-dashboard-overview .nx-command-kpi strong { font-size: 14px; font-weight: 600; line-height: 1.4; white-space: normal; overflow: visible; }
.nx-dashboard-overview .nx-command-kpi em { font-size: 28px; font-weight: 750; }
.nx-dashboard-kpi-action { display: block; margin-top: 9px; color: var(--ds-primary); font-size: 13px; font-weight: 500; line-height: 1.4; }
.nx-dashboard-overview .nx-command-kpi.danger { border-color: color-mix(in srgb, var(--ds-danger) 36%, var(--ds-border)); }
.nx-dashboard-overview .nx-command-kpi.warning { border-color: color-mix(in srgb, var(--ds-warning) 32%, var(--ds-border)); }
.nx-dashboard-overview .nx-command-kpi.compact { min-height: 66px; background: var(--ds-card); box-shadow: none; }
.nx-dashboard-overview .nx-command-kpi.compact > span { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nx-dashboard-overview .nx-command-kpi.compact em { margin: 0; font-size: 23px; }
.nx-dashboard-overview .nx-command-focus-grid { align-items: start; }
.nx-dashboard-overview .nx-command-focus-grid:has(> .nx-dashboard-quiet) { grid-template-columns: minmax(0, 1fr); }
.nx-dashboard-overview .nx-command-panel-head h2 { font-size: 17px; font-weight: 650; line-height: 1.4; }
.nx-dashboard-overview .nx-command-list-row { min-height: 68px; padding-block: 10px; }
.nx-dashboard-overview .nx-command-row-copy strong { font-size: 15px; font-weight: 600; line-height: 1.4; }
.nx-dashboard-quiet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 14px; box-shadow: none; }
.nx-dashboard-quiet .nx-command-empty { display: flex; min-height: 0; justify-content: flex-start; gap: 9px; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: left; }
.nx-dashboard-quiet .nx-command-empty svg { flex: 0 0 auto; width: 18px; height: 18px; }
.nx-dashboard-quiet button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border: 0; background: transparent; color: var(--ds-primary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nx-dashboard-quiet button svg { width: 15px; height: 15px; }
.nx-dashboard-overview { font-family: var(--ds-font-sans); }
.nx-dashboard-overview .nx-command-heading > span { font-size: 14px; line-height: 1.5; }
.nx-dashboard-overview .nx-command-date { font-size: 13px; }
.nx-dashboard-overview .nx-command-deadline-values small { font-size: 13px; font-weight: 500; }
.nx-dashboard-overview .nx-command-panel-head button { font-size: 14px; font-weight: 600; white-space: nowrap; }
.nx-dashboard-overview .nx-command-panel-head p { font-size: 13px; font-weight: 500; line-height: 1.5; }
.nx-dashboard-overview .nx-command-row-copy small,
.nx-dashboard-overview .nx-command-row-meta small { font-size: 13px; font-weight: 400; line-height: 1.5; }
.nx-dashboard-overview .nx-command-row-meta b { font-size: 14px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.nx-dashboard-overview .nx-command-order-code { font-size: 13px; font-weight: 650; line-height: 1.4; }
.nx-dashboard-overview .nx-command-analytics-card > header h2 { font-size: 17px; font-weight: 650; }
.nx-dashboard-overview .nx-command-analytics-card > header small,
.nx-dashboard-overview .nx-command-analytics-unavailable { font-size: 13px; font-weight: 500; line-height: 1.5; }
.nx-dashboard-overview .nx-command-donut-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 8px; }
.nx-dashboard-overview .nx-command-donut-legend,
.nx-dashboard-overview .nx-command-donut-legend > button { width: 100%; }
.nx-dashboard-overview .nx-command-donut-legend { max-width: 300px; gap: 0; border: 1px solid var(--ds-border); border-radius: 10px; overflow: hidden; background: var(--ds-primary-light); }
.nx-dashboard-overview .nx-command-donut-legend > button { grid-template-columns: 9px minmax(0, 1fr) 42px; min-height: 32px; gap: 10px; padding: 6px 12px; border: 0; border-radius: 0; }
.nx-dashboard-overview .nx-command-donut-legend > button + button { border-top: 1px solid var(--ds-border); }
.nx-dashboard-overview .nx-command-donut-legend strong { text-align: right; }
.nx-dashboard-overview .nx-command-analytics-row { height: auto; }
.nx-dashboard-overview .nx-command-analytics-card { height: auto; grid-template-rows: auto auto; align-content: start; gap: 12px; padding: 16px; }
.nx-dashboard-overview .nx-command-analytics-card > header { justify-content: center; text-align: center; }
.nx-dashboard-overview .nx-command-donut { width: 220px; height: 220px; }
.nx-dashboard-overview .nx-command-donut > span { width: 48%; height: 48%; }
.nx-dashboard-overview .nx-command-donut > span strong { font-size: 32px; }
.nx-dashboard-overview .nx-command-donut-legend span { font-size: 14px; font-weight: 500; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.nx-dashboard-overview .nx-command-donut-legend strong { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.nx-dashboard-overview .nx-command-donut > span small { font-size: 12px; font-weight: 500; }
.nx-dashboard-overview :is(.nx-command-kpi, .nx-command-list-row, .nx-dashboard-quiet button):focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
@media (min-width: 761px) and (max-width: 1180px) {
  .nx-dashboard-overview .nx-command-primary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nx-command-center.nx-dashboard-overview { gap: 16px; }
  .nx-dashboard-overview .nx-command-kpi { min-height: 94px; }
  .nx-dashboard-overview .nx-command-kpi.compact { min-height: 66px; }
}
@media (max-width: 390px) {
  .nx-dashboard-overview .nx-command-donut-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Desktop sizes charts to their content and preserves the NX signature. Small/zoomed viewports retain
   document scrolling instead of clipping content or shrinking readable type. */
@media (min-width: 1181px) and (min-height: 700px) {
  .content.content-dashboard:has(.nx-dashboard-overview) { height: auto; min-height: 0; padding: 10px 20px; overflow: visible; display: block; }
  .content.content-dashboard:has(.nx-dashboard-overview) #section-root { height: auto; min-height: 0; }
  .nx-command-center.nx-dashboard-overview { height: auto; min-height: 0; grid-template-rows: auto auto auto auto; align-content: start; gap: 12px; }
  .nx-dashboard-overview .nx-command-header { min-height: 60px; padding-block: 8px; }
  .nx-dashboard-overview .nx-dashboard-section { gap: 6px; }
  .nx-dashboard-overview .nx-command-kpi { min-height: 88px; padding-block: 8px; }
  .nx-dashboard-overview .nx-dashboard-kpi-action { margin-top: 5px; }
  .nx-dashboard-overview .nx-command-kpi.compact { min-height: 54px; }
  .nx-dashboard-overview .nx-command-analytics-row,
  .nx-dashboard-overview .nx-command-analytics-card { height: auto; min-height: 0; }
  .nx-dashboard-overview .nx-command-donut { width: clamp(160px, calc(100dvh - 530px), 220px); height: clamp(160px, calc(100dvh - 530px), 220px); }
}

/* Shared list chrome. Only list filters/footers are targeted: no form, modal,
   authentication, state or pagination ownership changes. Keep layout breakpoints
   in their existing module owners; these rules standardize controls, not grids. */
#section-root :is(.products-filter-card, .stations-filter-card, .team-filter-card,
  .work-orders-desktop-filters, .shipment-filter-card, .archive-filter-card,
  .materials-toolbar, .notes-filter-card, .global-problem-filters) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
  box-sizing: border-box;
  min-width: 0;
  height: var(--ds-list-control-height);
  min-height: var(--ds-list-control-height);
  border-color: var(--ds-border);
  border-radius: var(--ds-list-control-radius);
  background-color: var(--ds-card);
  color: var(--ds-heading);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-list-control-font-size);
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
}

#section-root :is(.products-filter-card, .stations-filter-card, .team-filter-card,
  .work-orders-desktop-filters, .shipment-filter-card, .archive-filter-card,
  .materials-toolbar, .notes-filter-card, .global-problem-filters) :is(input, select):focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-list-footer-gap);
  padding: 12px 14px;
  border-top: 1px solid var(--ds-border);
  color: var(--ds-text);
  background: var(--ds-card);
  font-size: var(--ds-list-control-font-size);
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) :is(div, nav, label) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-list-footer-gap);
  min-width: 0;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) label {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: auto;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) nav {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) :is(select, button) {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto;
  min-width: var(--ds-list-control-height);
  max-width: none;
  height: var(--ds-list-control-height);
  min-height: var(--ds-list-control-height);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-list-control-radius);
  background: var(--ds-card);
  color: var(--ds-heading);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-list-control-font-size);
  font-weight: 600;
  box-shadow: none;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) select {
  min-width: 78px;
  padding: 0 32px 0 12px;
}

#section-root .global-problem-pagination .global-problem-page-size select {
  min-width: 150px;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) button:is(.active, [aria-current="page"]) {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

#section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
  .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) :is(button, select):focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  #section-root :is(.work-order-pagination, .product-pagination, .stations-pagination,
    .shipment-pagination, .archive-pagination, .global-problem-pagination, .materials-pagination) > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Keep the label editor on its dedicated wide canvas. Generic modal rules are
   declared later than the original label styles and must not collapse this
   data-entry layout back to the shared 720px modal width/padding. */
.modal-panel.wo-label-modal {
  width: min(1180px, calc(100vw - 40px));
  padding: 0;
}

@media (max-width: 900px) {
  .modal-panel.wo-label-modal {
    width: calc(100vw - 20px);
  }
}

@media (max-width: 600px) {
  .modal-panel.wo-label-modal {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}

/* Tablet landscape density contract.
   These rules deliberately affect presentation only. Desktop and mobile projections
   keep their existing owners and all row actions/data remain unchanged. */
@media (min-width: 981px) and (max-width: 1366px) {
  #section-root :is(
    .work-order-table-wrap-landscape,
    .shipment-table-wrap-landscape,
    .archive-table-wrap-landscape,
    .products-table-wrap-landscape,
    .stations-table-wrap,
    .global-problem-table-wrap,
    .materials-table,
    .scrap-events-table-wrap,
    .notes-table-shell,
    .analytics-table-wrap
  ) {
    max-width: 100%;
    overflow-x: hidden;
  }

  #section-root :is(
    .work-orders-table-landscape,
    .shipment-table-landscape,
    .archive-table-landscape,
    .products-table-landscape,
    .stations-table,
    .team-data-table,
    .customers-screen .work-orders-table,
    .global-problem-table,
    .materials-table table,
    .scrap-events-table-wrap table,
    .notes-table-shell table,
    .operational-analytics-screen .analytics-table
  ) {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  #section-root :is(
    .work-orders-table-landscape,
    .shipment-table-landscape,
    .archive-table-landscape
  ) col {
    width: auto !important;
  }

  #section-root :is(
    .work-orders-table-landscape,
    .shipment-table-landscape,
    .archive-table-landscape,
    .products-table-landscape,
    .stations-table,
    .team-data-table,
    .customers-screen .work-orders-table,
    .global-problem-table,
    .materials-table table,
    .scrap-events-table-wrap table,
    .notes-table-shell table,
    .operational-analytics-screen .analytics-table
  ) :is(th, td) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  #section-root :is(
    .work-orders-table-landscape,
    .shipment-table-landscape,
    .archive-table-landscape,
    .products-table-landscape,
    .stations-table,
    .team-data-table,
    .customers-screen .work-orders-table,
    .global-problem-table,
    .materials-table table,
    .scrap-events-table-wrap table,
    .notes-table-shell table,
    .operational-analytics-screen .analytics-table
  ) :is(th, td) > * {
    max-width: 100%;
  }

  #section-root :is(
    .work-orders-table-landscape,
    .shipment-table-landscape,
    .archive-table-landscape,
    .products-table-landscape,
    .stations-table,
    .team-data-table,
    .customers-screen .work-orders-table,
    .global-problem-table,
    .materials-table table,
    .scrap-events-table-wrap table,
    .notes-table-shell table,
    .operational-analytics-screen .analytics-table
  ) td {
    white-space: nowrap;
  }

  #section-root .work-orders-table-landscape :is(th, td):nth-child(2),
  #section-root .shipment-table-landscape :is(th, td):nth-child(2),
  #section-root .archive-table-landscape :is(th, td):nth-child(2),
  #section-root .products-table-landscape :is(th, td):nth-child(1),
  #section-root .stations-table :is(th, td):is(:nth-child(2), :nth-child(6)),
  #section-root .team-data-table :is(th, td):is(:nth-child(1), :nth-child(3), :nth-child(6)),
  #section-root .customers-screen .work-orders-table :is(th, td):is(:nth-child(2), :nth-child(5), :nth-child(8)),
  #section-root .global-problem-table :is(th, td):is(:nth-child(3), :nth-child(6)),
  #section-root .materials-table table :is(th, td):nth-child(2),
  #section-root .operational-analytics-screen .analytics-table :is(th, td):is(:nth-child(1), :nth-child(2)) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #section-root :is(.row-actions, .archive-row-actions, .material-actions) {
    flex-wrap: nowrap;
    gap: 4px;
  }

  #section-root :is(.icon-action, .material-action-button) {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
  }

  .operational-analytics-screen .operational-management-grid {
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  }

  .operational-analytics-screen .analytics-table {
    min-width: 0;
  }

  .modal-panel.runtime-work-order-type-modal {
    width: min(900px, calc(100vw - 32px)) !important;
  }

  .modal-panel.product-create-choice-modal {
    width: min(760px, calc(100vw - 32px)) !important;
  }

  .modal-panel.flow-modal:is(
    .manual-work-entry-modal,
    .runtime-problem-modal,
    .runtime-problem-detail-modal,
    .product-create-modal,
    .team-member-modal,
    .station-modal
  ) {
    max-height: calc(100dvh - 24px);
    overflow: hidden;
  }

  .content.content-dashboard:has(.nx-dashboard-overview) {
    min-height: 0;
    height: auto;
    padding: 10px 16px 14px;
    overflow: visible;
  }

  .nx-command-center.nx-dashboard-overview {
    gap: 12px;
  }

  .nx-dashboard-overview .nx-command-header {
    min-height: 58px;
    padding-block: 8px;
  }

  .nx-dashboard-overview .nx-command-kpi {
    min-height: 86px;
    padding-block: 8px;
  }

  .nx-dashboard-overview .nx-command-kpi.compact {
    min-height: 52px;
  }

  .nx-dashboard-overview .nx-dashboard-section {
    gap: 6px;
  }

  .nx-dashboard-overview .nx-command-donut {
    width: clamp(150px, calc(100dvh - 520px), 200px);
    height: clamp(150px, calc(100dvh - 520px), 200px);
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  #section-root .materials-table {
    display: block;
  }

  #section-root .materials-cards {
    display: none;
  }

  #section-root .work-orders-table-landscape :is(th, td):nth-child(4),
  #section-root .shipment-table-landscape :is(th, td):nth-child(6),
  #section-root .archive-table-landscape :is(th, td):nth-child(3),
  #section-root .products-table-landscape :is(th, td):is(:nth-child(3), :nth-child(6)),
  #section-root .team-data-table :is(th, td):is(:nth-child(5), :nth-child(6)),
  #section-root .global-problem-table :is(th, td):is(:nth-child(5), :nth-child(8)),
  #section-root .materials-table table :is(th, td):is(:nth-child(6), :nth-child(8), :nth-child(9)) {
    display: none;
  }

  .operational-analytics-screen .operational-management-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 981px) and (max-width: 1366px) and (max-height: 820px) {
  .nx-command-center.nx-dashboard-overview {
    gap: 8px;
  }

  .nx-dashboard-overview .nx-command-header {
    min-height: 50px;
    padding-block: 5px;
  }

  .nx-dashboard-overview .nx-command-kpi {
    min-height: 76px;
    padding: 7px 12px;
  }

  .nx-dashboard-overview .nx-command-kpi.compact {
    min-height: 46px;
  }

  .nx-dashboard-overview .nx-command-donut {
    width: clamp(128px, calc(100dvh - 500px), 170px);
    height: clamp(128px, calc(100dvh - 500px), 170px);
  }
}

/* Dashboard identity and action standard: company identity belongs with the page title;
   utility actions stay compact, explicit and usable on every viewport. */
.nx-command-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.notification-profile-chip {
  border: 1px solid var(--ds-border);
  color: var(--ds-primary-hover);
  background: var(--ds-card);
  box-shadow: none;
}

.notification-profile-chip > i {
  top: -4px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 800;
}

.notification-profile-chip:hover,
.notification-profile-chip:focus-visible {
  border-color: var(--ds-primary-border);
  color: var(--ds-primary-hover);
  background: var(--ds-info-bg);
}

.notification-panel {
  border-radius: 14px;
  background: var(--ds-card);
  box-shadow: 0 18px 48px rgba(7, 36, 68, .16);
}

.notification-panel header {
  justify-content: flex-start;
  padding: 13px 16px;
}

.notification-item {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 11px 14px;
}

.notification-item > span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.global-logout-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 86px;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-input);
  color: var(--ds-primary-hover);
  background: var(--ds-card);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.global-logout-action:hover,
.global-logout-action:focus-visible {
  border-color: rgba(180, 35, 24, .28);
  color: var(--ds-danger, #b42318);
  background: var(--ds-danger-bg, #fff4f2);
  outline: 2px solid rgba(180, 35, 24, .1);
}

.materials-pagination.product-pagination {
  width: 100%;
  margin: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}

.materials-pagination .product-pagination-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.materials-pagination .product-pagination-pages > span {
  min-width: 44px;
  color: var(--ds-text-light);
  font-size: var(--ds-list-control-font-size);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 760px) {
  .nx-command-identity {
    gap: 12px;
  }

  .nx-command-identity .nx-command-heading {
    min-width: 0;
  }

  .nx-command-header-actions {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
  }

  .materials-pagination.product-pagination,
  .materials-pagination .product-pagination-controls {
    align-items: stretch;
  }
}

@media (max-width: 430px) {
  .nx-command-date strong {
    display: inline;
  }

  .nx-command-heading > span {
    display: none;
  }
}

@media (max-width: 360px) {
  .nx-command-header-actions {
    grid-template-columns: 1fr auto auto;
  }

  .nx-command-date {
    grid-column: 1 / -1;
  }

  .global-logout-action {
    justify-self: end;
  }
}

/* Work-order problems: align the report flow and embedded list with the
   current restrained NormaX modal/table family without changing workflow. */
.modal-panel.flow-modal.runtime-problem-modal {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100dvh - 30px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-modal);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-modal);
}

.runtime-problem-modal .problem-modal-body {
  gap: 14px;
  padding: 18px 22px 22px;
  background: var(--ds-bg-soft);
}

.runtime-problem-modal .problem-context-card {
  gap: 14px;
  padding: 14px 16px;
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), .04);
}

.runtime-problem-modal .problem-context-card div {
  align-items: center;
}

.runtime-problem-modal .problem-context-card small {
  margin-bottom: 3px;
  color: var(--ds-text-light);
  font-size: .72rem;
  font-weight: 600;
}

.runtime-problem-modal .problem-context-card strong {
  color: var(--ds-heading);
  font-size: .84rem;
  line-height: 1.3;
}

.runtime-problem-modal .problem-main-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.runtime-problem-modal .problem-settings-column,
.runtime-problem-modal .problem-evidence-column {
  gap: 12px;
  align-content: start;
}

.runtime-problem-modal :is(.flow-choice-section, .problem-description-field, .problem-attachments-section) {
  box-sizing: border-box;
  margin: 0;
  padding: 15px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), .035);
}

.runtime-problem-modal :is(.problem-choice-section h3, .problem-attachments-section h3, .problem-description-field > span) {
  margin: 0 0 10px;
  color: var(--ds-heading);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.runtime-problem-modal :is(.problem-card-options, .priority-card-options, .stop-work-options) {
  gap: 8px;
}

.runtime-problem-modal .problem-card-options {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.runtime-problem-modal .priority-card-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.runtime-problem-modal .stop-work-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.runtime-problem-modal :is(.problem-card-options, .priority-card-options, .stop-work-options) button {
  min-height: 44px;
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-card);
  padding: 9px 10px;
  color: var(--ds-heading);
  font-family: var(--ds-font-sans);
  font-size: .76rem;
  font-weight: 650;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.runtime-problem-modal .problem-card-options button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.runtime-problem-modal .stop-work-options .stop-yes {
  border-color: color-mix(in srgb, var(--ds-danger) 32%, var(--ds-border));
  color: var(--ds-danger);
}

.runtime-problem-modal .stop-work-options .stop-no {
  border-color: color-mix(in srgb, var(--ds-success) 32%, var(--ds-border));
  color: var(--ds-success);
}

.runtime-problem-modal :is(.problem-card-options, .priority-card-options, .stop-work-options) button:hover {
  border-color: var(--ds-primary-border);
  background: var(--ds-info-bg);
}

.runtime-problem-modal :is(.problem-card-options, .priority-card-options) button.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
  color: var(--ds-primary);
  box-shadow: inset 0 0 0 1px var(--ds-primary);
}

.runtime-problem-modal .stop-work-options .stop-no.active {
  border-color: var(--ds-success);
  background: var(--ds-success-bg);
  color: var(--ds-success);
  box-shadow: inset 0 0 0 1px var(--ds-success);
}

.runtime-problem-modal .priority-card-options button[data-value="Kritičan"].active,
.runtime-problem-modal .stop-work-options .stop-yes.active {
  border-color: var(--ds-danger);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
  box-shadow: inset 0 0 0 1px var(--ds-danger);
}

.runtime-problem-modal .problem-description-field textarea {
  box-sizing: border-box;
  min-height: 150px;
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-card);
  padding: 12px 13px;
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.5;
}

.runtime-problem-modal .problem-description-field textarea:focus {
  outline: none;
  border-color: var(--ds-primary-border);
  box-shadow: var(--ds-focus-ring);
}

.runtime-problem-modal .problem-description-field small {
  margin-top: 6px;
  color: var(--ds-text-light);
  font-size: .7rem;
}

.runtime-problem-modal .problem-attachment-actions {
  gap: 10px;
  margin: 0;
}

.runtime-problem-modal .problem-upload-card {
  min-height: 64px;
  justify-content: flex-start;
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-bg-soft);
  padding: 11px 13px;
  box-shadow: none;
}

.runtime-problem-modal .problem-upload-card:hover {
  border-color: var(--ds-primary-border);
  background: var(--ds-info-bg);
}

.runtime-problem-modal .problem-upload-card strong {
  font-size: .78rem;
  font-weight: 700;
}

.runtime-problem-modal .problem-upload-card small {
  color: var(--ds-text-light);
  font-size: .7rem;
  line-height: 1.35;
}

.runtime-problem-modal .problem-modal-actions {
  margin: 0;
}

.problems-overview .problem-table-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ds-border) 88%, var(--ds-primary-border));
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}

.problems-overview .problem-table-head {
  align-items: center;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-card);
}

.problems-overview .problem-table-header-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.problems-overview .problem-table-head h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.25;
}

.problems-overview .problem-table-header-copy p {
  margin: 0;
  color: var(--ds-text-light);
  font-size: .78rem;
  line-height: 1.4;
}

.problems-overview .problem-table-count {
  min-height: 30px;
  border-color: var(--ds-primary-border);
  background: var(--ds-info-bg);
  color: var(--ds-primary);
  font-size: .74rem;
  font-weight: 700;
}

.problems-overview .problem-toolbar {
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, .75fr)) minmax(160px, .72fr);
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg-soft);
}

.problems-overview .problem-field > span {
  color: #63768a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.problems-overview .problem-toolbar :is(input, select),
.problems-overview .problem-clear-field .compact-command {
  box-sizing: border-box;
  height: var(--ds-list-control-height);
  min-height: var(--ds-list-control-height);
  border-color: var(--ds-border);
  border-radius: var(--ds-list-control-radius);
  background-color: var(--ds-card);
  color: var(--ds-heading);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-list-control-font-size);
  font-weight: 500;
}

.problems-overview .problem-clear-field .compact-command {
  font-weight: 600;
}

.problems-overview .problem-table-wrap {
  border-top: 0;
  background: var(--ds-card);
}

.problems-overview .problem-table th,
.problems-overview .problem-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 82%, transparent);
  font-family: var(--ds-font-sans);
  vertical-align: middle;
}

.problems-overview .problem-table th + th,
.problems-overview .problem-table td + td {
  border-left: 1px solid color-mix(in srgb, var(--ds-border) 72%, transparent);
}

.problems-overview .problem-table th {
  text-align: center;
  white-space: normal;
}

.problems-overview .sort-header {
  width: 100%;
  justify-content: center;
  gap: 5px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: center;
  text-transform: inherit;
  white-space: normal;
}

.problems-overview .sort-header svg {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}

.problems-overview .problem-table tbody tr:hover {
  background: color-mix(in srgb, var(--ds-info-bg) 44%, transparent);
}

.problems-overview .problem-table tbody tr:last-child td {
  border-bottom: 0;
}

.problems-overview .problem-table td:nth-child(3),
.problems-overview .problem-table td:nth-child(5),
.problems-overview .problem-table td:nth-child(6) {
  text-align: center;
}

.problems-overview .problem-code {
  color: var(--ds-primary);
  font-size: .78rem;
  font-weight: 750;
}

.problems-overview .problem-pagination {
  padding: 12px 14px;
  background: var(--ds-card);
}

.problems-overview .problem-pagination-summary {
  color: var(--ds-text);
  font-size: var(--ds-list-control-font-size);
  font-weight: 600;
}

/* Existing problem detail: keep both information columns visually balanced and
   content-driven instead of leaving an oversized inactive lower half. */
.modal-panel.problem-detail-modal.runtime-problem-detail-modal {
  width: min(1080px, calc(100vw - 40px));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-modal);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-modal);
}

.runtime-problem-detail-modal .problem-detail-modal-header {
  min-height: 0;
  padding: 16px 74px 15px 18px;
}

.runtime-problem-detail-modal .flow-modal-title h2 {
  font-size: 1.38rem;
  line-height: 1.1;
}

.runtime-problem-detail-modal .flow-modal-title p {
  margin-top: 5px;
  color: var(--ds-text-light);
  font-size: .8rem;
}

.runtime-problem-detail-modal .problem-detail-modal-body {
  padding: 14px;
  background: var(--ds-bg-soft);
}

.runtime-problem-detail-modal .problem-detail-grid-page {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: stretch;
}

.runtime-problem-detail-modal :is(.problem-detail-card, .problem-activity-card) {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: 0 6px 18px rgba(var(--ds-sidebar-rgb), .035);
}

.runtime-problem-detail-modal .problem-activity-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.runtime-problem-detail-modal .problem-activity-card .problem-detail-composer {
  margin-top: auto;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg-soft);
}

.runtime-problem-detail-modal .problem-documents-grid {
  grid-template-columns: minmax(0, 1fr) 145px;
}

.runtime-problem-detail-modal :is(.problem-document-card, .problem-add-file-card, .problem-empty-docs) {
  min-height: 76px;
}

.runtime-problem-detail-modal .problem-empty-docs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  line-height: 1.4;
}

.runtime-problem-detail-modal .problem-empty-docs > svg,
.runtime-problem-detail-modal .problem-add-file-card > svg {
  width: 24px;
  height: 24px;
}

.runtime-problem-detail-modal .problem-source-note {
  margin: 12px 16px 14px;
  padding: 9px 11px;
  font-size: .75rem;
  line-height: 1.4;
}

.runtime-problem-detail-modal .problem-detail-modal-footer {
  padding: 11px 16px;
  box-shadow: 0 -6px 18px rgba(var(--ds-sidebar-rgb), .035);
}

@media (max-width: 1040px) {
  .modal-panel.flow-modal.runtime-problem-modal {
    width: calc(100vw - 24px);
  }

  .runtime-problem-modal .problem-main-grid {
    grid-template-columns: 1fr;
  }

  .runtime-problem-detail-modal .problem-detail-grid-page {
    grid-template-columns: 1fr;
  }

  .problems-overview .problem-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .runtime-problem-modal .problem-context-card,
  .runtime-problem-modal .problem-card-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runtime-problem-modal .priority-card-options,
  .runtime-problem-modal .stop-work-options,
  .runtime-problem-modal .problem-attachment-actions,
  .runtime-problem-detail-modal .problem-documents-grid,
  .problems-overview .problem-toolbar {
    grid-template-columns: 1fr;
  }

  .problems-overview .problem-table-header-copy p {
    max-width: 40ch;
  }
}

@media (max-width: 600px) {
  .modal-panel.flow-modal.runtime-problem-modal {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .runtime-problem-modal .problem-modal-body {
    padding: 12px;
  }

  .runtime-problem-modal :is(.flow-choice-section, .problem-description-field, .problem-attachments-section) {
    padding: 13px;
  }

  .problems-overview .problem-table-head {
    align-items: flex-start;
    padding: 15px 14px 12px;
  }

  .problems-overview .problem-toolbar {
    padding: 12px 14px;
  }
}

@media (max-width: 420px) {
  .runtime-problem-modal .problem-card-options {
    grid-template-columns: 1fr;
  }
}

/* Problem detail modal: one quiet operational surface with a compact context row,
   clear primary information and a contained activity stream. */
.modal-panel.problem-detail-modal.runtime-problem-detail-modal {
  width: min(1120px, calc(100vw - 32px));
  max-height: min(800px, calc(100dvh - 32px));
  border: 1px solid rgba(var(--ds-sidebar-rgb), .14);
  border-radius: var(--ds-radius-modal);
  background: var(--ds-card);
  box-shadow: 0 24px 70px rgba(var(--ds-sidebar-rgb), .22);
}

.runtime-problem-detail-modal .problem-detail-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 88px;
  padding: 17px 18px;
  background: var(--ds-card);
}

.runtime-problem-detail-modal .flow-modal-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.runtime-problem-detail-modal .flow-icon-chip {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.runtime-problem-detail-modal .flow-modal-title > span {
  color: var(--ds-text-light);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .075em;
}

.runtime-problem-detail-modal .flow-modal-title h2 {
  margin-top: 2px;
  font-size: 1.32rem;
  line-height: 1.12;
}

.runtime-problem-detail-modal .flow-modal-title p {
  max-width: 58ch;
  margin-top: 4px;
  font-size: .78rem;
  line-height: 1.35;
}

.runtime-problem-detail-modal .problem-detail-modal-status {
  align-items: center;
  flex-wrap: nowrap;
  margin-left: auto;
  margin-right: 0;
}

.runtime-problem-detail-modal .problem-detail-modal-header > .nx-modal-window-controls {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 0;
}

.runtime-problem-detail-modal .problem-detail-modal-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px 14px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--ds-bg-soft);
}

.runtime-problem-detail-modal .problem-modal-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
}

.runtime-problem-detail-modal .problem-modal-context > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 11px;
  border-right: 1px solid var(--ds-border);
}

.runtime-problem-detail-modal .problem-modal-context > div:last-child {
  border-right: 0;
}

.runtime-problem-detail-modal .problem-modal-context .soft-icon {
  width: 27px;
  height: 27px;
  border-radius: 7px;
}

.runtime-problem-detail-modal .problem-modal-context small,
.runtime-problem-detail-modal .problem-modal-context strong {
  display: block;
}

.runtime-problem-detail-modal .problem-modal-context small {
  margin-bottom: 2px;
  color: var(--ds-text-light);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.runtime-problem-detail-modal .problem-modal-context strong {
  color: var(--ds-heading);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.runtime-problem-detail-modal .problem-detail-grid-page {
  grid-template-columns: minmax(340px, .9fr) minmax(430px, 1.1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}

.runtime-problem-detail-modal :is(.problem-modal-overview-card, .problem-activity-card) {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 11px;
  background: var(--ds-card);
  box-shadow: 0 5px 16px rgba(var(--ds-sidebar-rgb), .035);
}

.runtime-problem-detail-modal .problem-modal-overview-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--ds-border);
}

.runtime-problem-detail-modal .problem-modal-overview-card > header small {
  display: block;
  color: var(--ds-text-light);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
}

.runtime-problem-detail-modal .problem-modal-overview-card > header h3 {
  margin: 2px 0 0;
  color: var(--ds-heading);
  font-size: 16px;
}

.runtime-problem-detail-modal .problem-stop-work {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.runtime-problem-detail-modal .problem-stop-work.continues {
  color: var(--ds-success-text);
  background: var(--ds-success-bg);
}

.runtime-problem-detail-modal .problem-stop-work.stops {
  color: var(--ds-danger);
  background: var(--ds-danger-bg);
}

.runtime-problem-detail-modal .problem-modal-description,
.runtime-problem-detail-modal .problem-modal-documents {
  padding: 14px 15px;
}

.runtime-problem-detail-modal .problem-modal-description {
  border-bottom: 1px solid var(--ds-border);
}

.runtime-problem-detail-modal .problem-modal-description h4,
.runtime-problem-detail-modal .problem-modal-documents h4 {
  margin: 0 0 7px;
  color: var(--ds-heading);
  font-size: 13px;
}

.runtime-problem-detail-modal .problem-modal-description p {
  margin: 0;
  color: var(--ds-text);
  font-size: 13px;
  line-height: 1.55;
}

.runtime-problem-detail-modal .problem-resolution-block {
  gap: 9px;
  margin: 12px 15px 0;
  padding: 12px;
  border-radius: 9px;
}

.runtime-problem-detail-modal .problem-resolution-block h4 {
  font-size: 13px;
}

.runtime-problem-detail-modal .problem-resolution-block dt {
  font-size: 10px;
}

.runtime-problem-detail-modal .problem-resolution-block dd {
  font-size: 12px;
}

.runtime-problem-detail-modal .problem-modal-documents .section-line-title {
  justify-content: flex-start;
  margin-bottom: 9px;
}

.runtime-problem-detail-modal .problem-modal-documents .problem-documents-grid {
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 8px;
}

.runtime-problem-detail-modal .problem-modal-documents :is(.problem-document-card, .problem-add-file-card, .problem-empty-docs) {
  min-height: 72px;
}

.runtime-problem-detail-modal .problem-activity-card {
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
}

.runtime-problem-detail-modal .problem-activity-header {
  min-height: 48px;
  border-bottom: 1px solid var(--ds-border);
}

.runtime-problem-detail-modal .problem-activity-header h3 {
  padding: 13px 15px;
  font-size: 16px;
}

.runtime-problem-detail-modal .problem-timeline {
  min-height: 0;
  max-height: 270px;
  overflow-y: auto;
}

.runtime-problem-detail-modal .problem-activity-item {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 12px 15px;
}

.runtime-problem-detail-modal .problem-activity-item::before {
  left: 28px;
}

.runtime-problem-detail-modal .activity-avatar {
  width: 28px;
  height: 28px;
}

.runtime-problem-detail-modal .activity-body header {
  row-gap: 2px;
}

.runtime-problem-detail-modal .activity-body header strong {
  font-size: 12px;
}

.runtime-problem-detail-modal .activity-body p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
}

.runtime-problem-detail-modal .problem-detail-composer {
  gap: 7px;
  margin-top: 0;
  padding: 11px 14px 12px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg-soft);
}

.runtime-problem-detail-modal .problem-detail-composer textarea {
  min-height: 58px;
  resize: vertical;
}

.runtime-problem-detail-modal .problem-detail-modal-footer {
  min-height: 62px;
  padding: 10px 14px;
  background: var(--ds-card);
  box-shadow: 0 -5px 16px rgba(var(--ds-sidebar-rgb), .035);
}

.runtime-problem-detail-modal .problem-detail-actions {
  align-items: center;
  gap: 8px;
}

.nx-problem-resolve-modal {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(var(--ds-sidebar-rgb), .14);
  border-radius: var(--ds-radius-modal);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-modal);
}

.nx-problem-resolve-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--ds-border);
}

.nx-problem-resolve-header > div:not(.nx-modal-window-controls) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nx-problem-resolve-header > .nx-modal-window-controls {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: auto;
}

.nx-problem-resolve-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--ds-success-text);
  background: var(--ds-success-bg);
}

.nx-problem-resolve-icon svg {
  width: 19px;
  height: 19px;
}

.nx-problem-resolve-header small {
  color: var(--ds-text-light);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
}

.nx-problem-resolve-header h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 18px;
  line-height: 1.2;
}

.nx-problem-resolve-header p {
  margin: 1px 0 0;
  color: var(--ds-text-light);
  font-size: 11px;
}

.nx-problem-resolve-body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
  overflow-y: auto;
  background: var(--ds-bg-soft);
}

.nx-problem-resolve-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 9px;
  background: var(--ds-card);
}

.nx-problem-resolve-summary > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ds-primary);
}

.nx-problem-resolve-summary span {
  display: grid;
  gap: 3px;
}

.nx-problem-resolve-summary strong {
  color: var(--ds-heading);
  font-size: 12px;
}

.nx-problem-resolve-summary small {
  color: var(--ds-text-light);
  font-size: 11px;
  line-height: 1.4;
}

.nx-problem-resolve-modal .resolution-note-field {
  margin: 0;
}

.nx-problem-resolve-modal .resolution-note-field textarea {
  min-height: 108px;
  resize: vertical;
}

.nx-problem-resolve-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-card);
}

@media (max-width: 1040px) {
  .runtime-problem-detail-modal .problem-detail-grid-page {
    grid-template-columns: 1fr;
  }

  .runtime-problem-detail-modal .problem-timeline {
    max-height: 230px;
  }
}

@media (max-width: 720px) {
  .modal-panel.problem-detail-modal.runtime-problem-detail-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .runtime-problem-detail-modal .problem-detail-modal-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    padding: 14px;
  }

  .runtime-problem-detail-modal .problem-detail-modal-status {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 2px 0 0;
  }

  .runtime-problem-detail-modal .problem-detail-modal-header > .nx-modal-window-controls {
    margin-left: auto;
  }

  .runtime-problem-detail-modal .problem-modal-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runtime-problem-detail-modal .problem-modal-context > div {
    border-bottom: 1px solid var(--ds-border);
  }

  .runtime-problem-detail-modal .problem-detail-modal-footer,
  .runtime-problem-detail-modal .problem-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .runtime-problem-detail-modal .problem-detail-modal-footer button,
  .runtime-problem-detail-modal .problem-detail-actions button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .modal-panel.problem-detail-modal.runtime-problem-detail-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .runtime-problem-detail-modal .flow-icon-chip {
    display: none;
  }

  .runtime-problem-detail-modal .problem-modal-context,
  .runtime-problem-detail-modal .problem-modal-documents .problem-documents-grid {
    grid-template-columns: 1fr;
  }

  .runtime-problem-detail-modal .problem-modal-overview-card > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .nx-problem-resolve-modal {
    width: calc(100vw - 16px);
  }

  .nx-problem-resolve-header {
    align-items: flex-start;
  }

  .nx-problem-resolve-footer {
    flex-direction: column-reverse;
  }

  .nx-problem-resolve-footer button {
    width: 100%;
  }
}

/* Canonical borders for primary data tables. Specialized editor and detail tables keep their
   domain-specific separators, while every main list uses the same frame/header/row/column rhythm. */
:is(
  .work-orders-screen .work-order-table-wrap,
  .products-screen .products-list-card,
  .team-table-wrap,
  .materials-table,
  .shipment-list-card,
  .archive-list-card,
  .customers-screen .table-shell,
  .invoices-list-card,
  .customer-invoices-list-card,
  .global-problems-page .global-problem-table-card,
  .problems-overview .problem-table-card
) {
  border-color: var(--nx-table-frame-border);
}

:is(
  .stations-table,
  .team-data-table,
  .work-orders-screen .work-orders-table,
  .products-screen .products-table,
  .materials-table table,
  .shipment-table,
  .archive-table,
  .customers-screen .work-orders-table,
  .invoices-list-card .invoices-table,
  .customer-invoices-table,
  .notes-screen .notes-table-shell table,
  .global-problems-page .global-problem-table,
  .problems-overview .problem-table
) {
  border-collapse: separate;
  border-spacing: 0;
}

:is(
  .stations-table,
  .team-data-table,
  .work-orders-screen .work-orders-table,
  .products-screen .products-table,
  .materials-table table,
  .shipment-table,
  .archive-table,
  .customers-screen .work-orders-table,
  .invoices-list-card .invoices-table,
  .customer-invoices-table,
  .notes-screen .notes-table-shell table,
  .global-problems-page .global-problem-table,
  .problems-overview .problem-table
) thead th {
  border-right: 0;
  border-bottom: 1px solid var(--nx-table-header-border);
}

:is(
  .stations-table,
  .team-data-table,
  .work-orders-screen .work-orders-table,
  .products-screen .products-table,
  .materials-table table,
  .shipment-table,
  .archive-table,
  .customers-screen .work-orders-table,
  .invoices-list-card .invoices-table,
  .customer-invoices-table,
  .notes-screen .notes-table-shell table,
  .global-problems-page .global-problem-table,
  .problems-overview .problem-table
) tbody td {
  border-right: 0;
  border-bottom: 1px solid var(--nx-table-row-border);
}

:is(
  .stations-table,
  .team-data-table,
  .work-orders-screen .work-orders-table,
  .products-screen .products-table,
  .materials-table table,
  .shipment-table,
  .archive-table,
  .customers-screen .work-orders-table,
  .invoices-list-card .invoices-table,
  .customer-invoices-table,
  .notes-screen .notes-table-shell table,
  .global-problems-page .global-problem-table,
  .problems-overview .problem-table
) :is(th, td) + :is(th, td) {
  border-left: 1px solid var(--nx-table-column-border);
}

:is(
  .stations-table,
  .team-data-table,
  .work-orders-screen .work-orders-table,
  .products-screen .products-table,
  .materials-table table,
  .shipment-table,
  .archive-table,
  .customers-screen .work-orders-table,
  .invoices-list-card .invoices-table,
  .customer-invoices-table,
  .notes-screen .notes-table-shell table,
  .global-problems-page .global-problem-table,
  .problems-overview .problem-table
) tbody tr:last-child td {
  border-bottom: 0;
}

/* Canonical table-header alignment: column labels stay centered in both axes. */
table thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

table thead th .sort-header {
  width: 100%;
  align-items: center;
  justify-content: center !important;
  text-align: center !important;
}

/* Desktop modal workspace: movable windows with a state-preserving minimized form. */
.nx-modal-workspace {
  --nx-modal-window-x: 0px;
  --nx-modal-window-y: 0px;
  translate: var(--nx-modal-window-x) var(--nx-modal-window-y);
  will-change: translate;
}

.nx-modal-drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.nx-modal-workspace-dragging,
.nx-modal-workspace-dragging .nx-modal-drag-handle {
  cursor: grabbing;
}

/* Canonical modal header controls: one stable, non-wrapping premium group for every modal family. */
.nx-modal-window-controls {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: max-content;
  margin-left: auto;
  padding: 3px;
  border: 1px solid rgba(var(--ds-sidebar-rgb, 21, 61, 90), .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 7px 20px rgba(var(--ds-sidebar-rgb, 21, 61, 90), .08);
  white-space: nowrap;
  overflow: visible;
}

.nx-modal-window-controls-floating {
  position: absolute;
  top: 14px;
  right: 14px;
  margin-left: 0;
}

/* Wizard headers previously reserved only 44px for the close button. The canonical
   two-button group must own an automatic final column so neither control is clipped. */
.nx-modal-workspace > .product-modal-header {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.nx-modal-workspace > h2 {
  padding-right: 96px;
}

.nx-modal-window-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-heading, #17364d);
  cursor: pointer;
}

.nx-modal-window-controls > [data-action="close-modal"],
.nx-modal-window-controls > [data-action="pdf-preview-back"],
.nx-modal-window-controls > [data-action="operator-sequence-close"],
.nx-modal-window-controls > [data-action="operator-batch-skip"] {
  position: static;
  inset: auto;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-heading, #17364d);
}

.nx-modal-window-button:hover,
.nx-modal-window-controls > [data-action="close-modal"]:hover,
.nx-modal-window-controls > [data-action="pdf-preview-back"]:hover,
.nx-modal-window-controls > [data-action="operator-sequence-close"]:hover,
.nx-modal-window-controls > [data-action="operator-batch-skip"]:hover {
  color: var(--ds-primary-strong, #14577d);
  background: var(--ds-primary-light, #edf7fb);
}

.nx-modal-window-button:focus-visible,
.nx-modal-restore-chip:focus-visible {
  outline: 3px solid rgba(var(--ds-primary-rgb, 33, 118, 165), .18);
  outline-offset: 2px;
}

.nx-modal-window-button svg {
  width: 17px;
  height: 17px;
}

.nx-modal-window-controls > [data-action="close-modal"] svg,
.nx-modal-window-controls > [data-action="pdf-preview-back"] svg,
.nx-modal-window-controls > [data-action="operator-sequence-close"] svg,
.nx-modal-window-controls > [data-action="operator-batch-skip"] svg {
  width: 17px;
  height: 17px;
}

.nx-modal-backdrop-minimized {
  background: transparent !important;
  backdrop-filter: none !important;
}

.nx-modal-workspace-minimized {
  visibility: hidden !important;
  pointer-events: none !important;
}

.nx-modal-restore-chip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2800;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(390px, calc(100vw - 36px));
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--ds-primary-rgb, 33, 118, 165), .28);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(22, 54, 77, .2);
  color: var(--ds-heading, #17364d);
  text-align: left;
  cursor: pointer;
}

.nx-modal-restore-chip > svg {
  width: 20px;
  height: 20px;
  color: var(--ds-primary, #2176a5);
}

.nx-modal-restore-chip span {
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nx-modal-restore-chip small {
  color: var(--ds-primary-strong, #14577d);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .nx-modal-workspace {
    translate: none !important;
  }

  .nx-modal-window-button,
  .nx-modal-restore-chip {
    display: none !important;
  }
}

.operator-assignment-missing {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #e5b75f;
  border-radius: 10px;
  background: #fff8e8;
  color: #76500d;
}

.operator-assignment-missing > svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

.operator-assignment-missing span {
  display: grid;
  gap: 2px;
}

.operator-assignment-missing strong {
  font-size: 13px;
}

.operator-assignment-missing small,
.operator-batch-selected .missing-default {
  color: #76500d;
  font-size: 11px;
  font-weight: 700;
}

.operator-batch-selected .missing-default {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.operator-batch-selected .missing-default svg {
  width: 14px;
  height: 14px;
}

/* Ponude follow the invoice list/detail pattern without hiding filters on mobile. */
.customer-quotation-toolbar .work-orders-desktop-filters { display: grid; grid-template-columns: minmax(180px,1.5fr) repeat(3,minmax(105px,.75fr)) auto auto; align-items: end; gap: 8px; }
.customer-quotation-toolbar .work-orders-desktop-filters > label { min-width: 0; }
.customer-quotation-toolbar .work-orders-mobile-filters { display: none; }
.customer-quotation-more { position: relative; align-self: end; }
.customer-quotation-more summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; list-style: none; white-space: nowrap; cursor: pointer; }
.customer-quotation-more summary::-webkit-details-marker { display: none; }
.customer-quotation-more summary svg { width: 15px; height: 15px; }
.customer-quotation-more-panel { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; display: grid; grid-template-columns: repeat(2,minmax(155px,1fr)); gap: 9px; width: 370px; max-width: calc(100vw - 36px); padding: 12px; border: 1px solid var(--ds-border); border-radius: 9px; background: #fff; box-shadow: 0 14px 34px rgb(21 54 80 / 16%); }
.customer-quotation-more-panel label { display: grid; gap: 4px; min-width: 0; }
.customer-quotation-more-panel input,.customer-quotation-more-panel select { width: 100%; min-width: 0; }
.customer-quotation-list-table { width: 100%; }
.customer-quotation-list-table th:nth-child(1), .customer-quotation-list-table td:nth-child(1) { text-align: left; }
.customer-quotation-list-table th:nth-child(5), .customer-quotation-list-table td:nth-child(5) { text-align: right; }
.customer-quotation-list-table th:nth-child(6), .customer-quotation-list-table td:nth-child(6) { text-align: center; width: 142px; }
.customer-quotation-list-actions { display: flex; justify-content: center; align-items: center; gap: 5px; }
.customer-quotation-list-actions .icon-action.primary { background: #fff; border-color: var(--ds-border); color: var(--ds-heading); }
.customer-quotation-list-actions .icon-action.primary:hover { background: var(--ds-primary-light); border-color: var(--ds-primary-border); color: var(--ds-primary-hover); }
.customer-quotation-pdf-action { width: auto; min-width: 38px; padding: 0 7px; border-color: var(--ds-danger); background: var(--ds-danger); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.customer-quotation-pdf-action:hover { background: color-mix(in srgb, var(--ds-danger) 86%, #000); border-color: color-mix(in srgb, var(--ds-danger) 86%, #000); color: #fff; }
.customer-quotation-modal .flow-modal-footer [data-action="customer-quotation-pdf"] { background: var(--ds-danger); border-color: var(--ds-danger); color: #fff; }
.customer-quotation-modal .flow-modal-footer [data-action="customer-quotation-pdf"]:hover { background: color-mix(in srgb, var(--ds-danger) 86%, #000); border-color: color-mix(in srgb, var(--ds-danger) 86%, #000); color: #fff; }
.customer-quotation-confirm-overlay { z-index: 230; }
.customer-quotation-confirm-modal { width: min(100%, 460px); }
.customer-quotation-confirm-modal .info-box { margin: 18px 0; }
.customer-quotation-list-table tbody tr[data-action="customer-quotation-open"], .customer-quotation-list-table tbody tr[data-action="customer-quotation-open"] td { cursor: pointer; }
.customer-quotation-detail-table { width: 100%; min-width: 1330px; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.customer-quotation-detail-table th { border-bottom: 1px solid var(--ds-border); text-align: center; vertical-align: middle; }
.customer-quotation-detail-table td { border-bottom: 1px solid var(--ds-border); vertical-align: middle; }
.customer-quotation-detail-table th + th, .customer-quotation-detail-table td + td { border-left: 1px solid var(--ds-border); }
.customer-quotation-detail-table th:nth-child(2) { width: 25%; }
.customer-quotation-detail-table td:nth-child(1), .customer-quotation-detail-table td:nth-child(2) { text-align: left; overflow-wrap: anywhere; }
.customer-quotation-detail-table td:nth-child(3), .customer-quotation-detail-table td:nth-child(6), .customer-quotation-detail-table td:nth-child(8) { text-align: center; }
.customer-quotation-detail-table td:nth-child(4), .customer-quotation-detail-table td:nth-child(5), .customer-quotation-detail-table td:nth-child(7), .customer-quotation-detail-table td:nth-child(9), .customer-quotation-detail-table td:nth-child(10) { text-align: right; font-variant-numeric: tabular-nums; }
.customer-quotation-detail-table .wo-modal-field { min-width: 110px; }
.customer-quotation-detail-table tbody td.commercial-quantity-cell { text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .customer-quotation-toolbar .work-orders-desktop-filters { display: none; }
  .customer-quotation-toolbar .work-orders-mobile-filters { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 7px; }
  .customer-quotation-toolbar .work-orders-mobile-filters .work-search { min-width: 0; }
  .customer-quotation-more-panel { grid-template-columns: minmax(0,1fr); width: 260px; }
  .customer-quotation-toolbar .filter-reset-button span { display: none; }
}
@media (max-width: 750px) {
  .customer-quotation-list .customer-invoices-table-wrap { display: none; }
  .customer-quotation-list .customer-invoices-cards { display: grid; }
}

.wo-customer-picker { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
.wo-customer-picker > small { color: var(--ds-text-light); }
.wo-customer-picker-results { display: grid; gap: 4px; max-height: 190px; overflow-y: auto; }
.wo-customer-picker-results[hidden] { display: none; }
.wo-customer-picker-results:empty { display: none; }
.wo-customer-show-all { justify-self: start; gap: 7px; }
.wo-customer-show-all svg { width: 15px; height: 15px; }
.wo-customer-picker-results > button, .wo-customer-picker-selected { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: 8px; background: #fff; color: var(--ds-heading); text-align: left; }
.wo-customer-picker-results > button { cursor: pointer; }
.wo-customer-picker-results > button:hover { border-color: var(--ds-primary-border); background: var(--ds-primary-light); }
.wo-customer-picker-results small { color: var(--ds-text-light); }
.wo-customer-picker-selected { background: var(--ds-bg-soft); }
.wo-customer-picker-selected button { margin-left: auto; }
.wo-customer-clear { min-height: 30px; border: 1px solid var(--ds-primary-border); border-radius: 7px; padding: 0 10px; color: var(--ds-heading); background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.wo-customer-clear:hover, .wo-customer-clear:focus-visible { color: var(--ds-primary-hover); background: var(--ds-primary-light); outline: 0; }

/* Work-order creation mirrors the General tab: one calm landscape canvas, no summary rail. */
.modal-panel.work-order-create-modal {
  width: min(1180px, calc(100vw - 44px));
}
.modal-panel.work-order-create-modal.internal-work-order-create-modal {
  width: min(980px, calc(100vw - 44px));
}
.modal-panel.work-order-create-modal .work-order-modal-identity h2 {
  font-family: var(--ds-font-sans);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.modal-panel.work-order-create-modal .work-order-modal-body {
  display: block;
  padding: 14px;
}
.modal-panel.work-order-create-modal .work-order-create-general-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.modal-panel.work-order-create-modal .work-order-create-general-grid > .work-order-create-error-banner,
.modal-panel.work-order-create-modal .work-order-create-general-grid > .work-order-create-api-banner,
.modal-panel.work-order-create-modal .work-order-create-general-grid > .wo-purpose-row {
  grid-column: 1 / -1;
}
.modal-panel.work-order-create-modal .work-order-create-upper-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}
.modal-panel.work-order-create-modal .work-order-create-right-stack {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}
.modal-panel.work-order-create-modal .work-order-create-upper-grid .wo-create-card,
.modal-panel.work-order-create-modal .work-order-create-right-stack .wo-create-card { min-width: 0; }
.modal-panel.work-order-create-modal .wo-create-card-note { grid-column: 1 / -1; }
.modal-panel.work-order-create-modal .wo-create-card-note textarea {
  min-height: 96px;
  resize: vertical;
}
.modal-panel.work-order-create-modal .internal-create-grid .wo-create-card-info { grid-column: 1; }
.modal-panel.work-order-create-modal .internal-create-grid .wo-create-card-planning { grid-column: 2; }
.modal-panel.work-order-create-modal .internal-create-grid .wo-create-card-note { grid-column: 1 / -1; }
.modal-panel.work-order-create-modal .internal-create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.modal-panel.work-order-create-modal .internal-create-grid > .wo-create-card-info,
.modal-panel.work-order-create-modal .internal-create-grid > .wo-create-card-planning {
  width: 100%;
  min-width: 0;
  height: 100%;
}
.modal-panel.work-order-create-modal .wo-customer-combobox {
  position: relative;
  display: block;
  min-width: 0;
}
.modal-panel.work-order-create-modal .wo-customer-combobox input {
  padding-right: 46px;
}
.modal-panel.work-order-create-modal .wo-customer-show-all {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  width: 38px;
  height: 36px;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--ds-primary-border);
  border-radius: 0 7px 7px 0;
  color: var(--ds-text);
  background: #f8fbfd;
  cursor: pointer;
}
.modal-panel.work-order-create-modal .wo-customer-show-all:hover,
.modal-panel.work-order-create-modal .wo-customer-show-all:focus-visible {
  color: var(--ds-primary-hover);
  background: var(--ds-primary-light);
  outline: 0;
}
.modal-panel.work-order-create-modal .wo-customer-show-all svg { width: 16px; height: 16px; }
.modal-panel.work-order-create-modal .deadline-grid > * { align-self: start; }
.modal-panel.work-order-create-modal .deadline-grid > .wo-modal-field,
.modal-panel.work-order-create-modal .deadline-grid > .wo-priority-field {
  width: 100%;
  min-width: 0;
}
.modal-panel.work-order-create-modal .deadline-grid .nx-date-control-wrap {
  align-self: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.modal-panel.work-order-create-modal .deadline-grid .nx-date-input {
  min-width: 0;
  max-width: 100%;
}
.modal-panel.work-order-create-modal .wo-priority-segment {
  overflow: hidden;
  padding: 0 5px;
  white-space: nowrap;
}
.modal-panel.work-order-create-modal .wo-priority-segment.active::after,
.modal-panel.work-order-create-modal .wo-priority-segment:has(input:checked)::after {
  display: none;
}
.nx-calendar-day.disabled,
.nx-calendar-day:disabled {
  color: #a8b4c0;
  background: #f3f6f8;
  cursor: not-allowed;
  opacity: 0.72;
}
.nx-calendar-day.disabled:hover,
.nx-calendar-day:disabled:hover {
  color: #a8b4c0;
  background: #f3f6f8;
  box-shadow: none;
}
@media (max-width: 860px) {
  .modal-panel.work-order-create-modal,
  .modal-panel.work-order-create-modal.internal-work-order-create-modal { width: 100%; }
  .modal-panel.work-order-create-modal .work-order-create-general-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-panel.work-order-create-modal .work-order-create-upper-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-panel.work-order-create-modal .wo-create-card-customer,
  .modal-panel.work-order-create-modal .wo-create-card-info,
  .modal-panel.work-order-create-modal .wo-create-card-planning,
  .modal-panel.work-order-create-modal .wo-create-card-note,
  .modal-panel.work-order-create-modal .internal-create-grid .wo-create-card-info,
  .modal-panel.work-order-create-modal .internal-create-grid .wo-create-card-planning,
  .modal-panel.work-order-create-modal .internal-create-grid .wo-create-card-note { grid-column: 1; }
}

.customers-area-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; min-width: 0; }
.customers-area-actions { display: flex; align-items: center; flex: none; gap: 8px; }
.customers-area-actions .compact-command { min-height: 39px; padding: 0 11px; white-space: nowrap; }
.customers-area-tabs { display: flex; flex: 1; min-width: 0; gap: 6px; border-bottom: 1px solid var(--ds-border); overflow-x: auto; }
.customers-area-tabs button { flex: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; background: transparent; color: var(--ds-text-light); font-weight: 700; cursor: pointer; }
.customers-area-tabs button.active { border-bottom-color: var(--ds-primary-hover); color: var(--ds-heading); }
.invoice-debts-tab-action { flex: none; min-height: 36px; padding: 7px 10px; white-space: nowrap; }
@media (max-width: 850px) { .customers-area-head { flex-wrap: wrap; } .customers-area-tabs { flex-basis: 100%; } .customers-area-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } }
.customer-hub-create-picker { width: min(560px, calc(100vw - 32px)); }
.customer-hub-create-search { margin: 10px 0 14px; }
.customer-hub-create-search-control { position: relative; display: block; }
.customer-hub-create-search-control > svg { position: absolute; z-index: 1; top: 50%; left: 13px; width: 18px; height: 18px; color: var(--ds-primary); transform: translateY(-50%); pointer-events: none; }
.customer-hub-create-search-control > input[type="search"] { width: 100%; padding-left: 42px !important; }

/* Universal data import — shared entry point for CSV/XLS/XLSX. */
.settings-data-import-card { grid-column: 1 / -1; }
.settings-data-import-badge { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--ds-primary-border); border-radius: 999px; background: var(--ds-primary-light); color: var(--ds-primary); font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.settings-data-import-content { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid var(--ds-border); }
.settings-data-import-copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.settings-data-import-copy > svg { flex: 0 0 auto; width: 20px; height: 20px; padding: 9px; box-sizing: content-box; border-radius: 10px; background: var(--ds-primary-light); color: var(--ds-primary); }
.settings-data-import-copy > span { display: grid; gap: 4px; }
.settings-data-import-copy strong { color: var(--ds-text); font-size: 13px; }
.settings-data-import-copy small,.settings-data-import-readonly { max-width: 700px; color: var(--ds-text-light); font-size: 11px; line-height: 1.55; }
.settings-data-import-actions { display: flex; flex: 0 0 auto; gap: 8px; }

.universal-import-backdrop { padding: 18px; }
.universal-import-modal { width: min(900px, calc(100vw - 36px)); max-height: min(820px, calc(100dvh - 36px)); overflow: hidden; }
.universal-import-header .flow-modal-title p { max-width: 650px; }
.universal-import-body { flex: 1 1 auto; min-height: 0; padding: 18px 20px; overflow-y: auto; background: var(--ds-bg); }
.universal-import-empty,.universal-import-loading { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 290px; padding: 36px 20px; border: 1px dashed var(--ds-border); border-radius: var(--ds-radius-card); background: var(--ds-card); text-align: center; }
.universal-import-empty > svg,.universal-import-loading > svg { width: 28px; height: 28px; padding: 13px; box-sizing: content-box; border-radius: 14px; background: var(--ds-primary-light); color: var(--ds-primary); }
.universal-import-loading > svg { animation: spin .9s linear infinite; }
.universal-import-empty strong,.universal-import-loading strong { color: var(--ds-text); font-size: 16px; }
.universal-import-empty > span,.universal-import-loading > span { max-width: 500px; color: var(--ds-text-light); font-size: 12px; line-height: 1.5; }
.universal-import-result { display: grid; gap: 14px; }
.universal-import-file-summary { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); }
.universal-import-file-summary > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ds-primary); }
.universal-import-file-summary > div { display: grid; min-width: 0; gap: 2px; }
.universal-import-file-summary small { color: var(--ds-primary); font-size: 9px; font-weight: 850; letter-spacing: .07em; }
.universal-import-file-summary strong { overflow: hidden; color: var(--ds-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.universal-import-file-summary p { margin: 0; color: var(--ds-text-light); font-size: 10px; }
.universal-import-file-summary button { margin-left: auto; }
.universal-import-sheets { display: grid; gap: 9px; }
.universal-import-sheet { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); }
.universal-import-sheet.needs-review { border-color: var(--ds-warning); }
.universal-import-sheet.is-unrecognized { grid-template-columns: auto minmax(0,1fr); opacity: .82; }
.universal-import-sheet-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ds-primary-light); color: var(--ds-primary); }
.universal-import-sheet-icon svg { width: 17px; height: 17px; }
.universal-import-sheet-main,.universal-import-sheet.is-unrecognized > div { display: grid; min-width: 0; gap: 2px; }
.universal-import-sheet-main small,.universal-import-sheet.is-unrecognized small { color: var(--ds-text-light); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.universal-import-sheet-main strong,.universal-import-sheet.is-unrecognized strong { color: var(--ds-text); font-size: 13px; }
.universal-import-sheet-main p,.universal-import-sheet-main em,.universal-import-sheet.is-unrecognized p { margin: 0; color: var(--ds-text-light); font-size: 10px; font-style: normal; line-height: 1.4; }
.universal-import-sheet-main em { color: var(--ds-primary); }
.universal-import-sheet-action { display: grid; justify-items: end; gap: 7px; }
.universal-import-confidence { padding: 4px 7px; border-radius: 999px; background: var(--ds-success-bg); color: var(--ds-success-text); font-size: 9px; font-weight: 800; }
.universal-import-confidence.medium,.universal-import-confidence.low { background: var(--ds-warning-bg); color: var(--ds-warning); }
.universal-import-safety { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--ds-success); border-radius: 11px; background: var(--ds-card); color: var(--ds-success-text); }
.universal-import-safety > svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.universal-import-safety > span { display: grid; gap: 3px; }
.universal-import-safety strong { font-size: 11px; }
.universal-import-safety small { color: var(--ds-text-light); font-size: 10px; line-height: 1.45; }
.universal-import-footer { justify-content: space-between; }
.universal-import-footer > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-text-light); font-size: 10px; }
.universal-import-footer > span svg { width: 13px; height: 13px; }
.customer-universal-import-body { display: grid; align-content: start; gap: 14px; }
.customer-universal-loading { min-height: 230px; }
.customer-universal-validation { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); }
.customer-universal-validation > span { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.customer-universal-validation > span svg { width: 17px; height: 17px; }
.customer-universal-validation > div { display: grid; min-width: 0; gap: 4px; }
.customer-universal-validation small { font-size: 9px; font-weight: 850; letter-spacing: .07em; }
.customer-universal-validation strong { color: var(--ds-text); font-size: 14px; }
.customer-universal-validation p,.customer-universal-validation em { margin: 0; color: var(--ds-text-light); font-size: 11px; font-style: normal; line-height: 1.5; }
.customer-universal-validation.is-ready { border-color: var(--ds-success); }
.customer-universal-validation.is-ready > span { background: var(--ds-success-bg); color: var(--ds-success-text); }
.customer-universal-validation.is-ready small { color: var(--ds-success-text); }
.customer-universal-validation.is-error { border-color: var(--ds-warning); }
.customer-universal-validation.is-error > span { background: var(--ds-warning-bg); color: var(--ds-warning); }
.customer-universal-validation.is-error small { color: var(--ds-warning); }
.universal-import-excluded { display: grid; gap: 10px; }
.customer-universal-import-footer > div { display: flex; gap: 8px; }

@media (max-width: 700px) {
  .settings-data-import-content { align-items: stretch; flex-direction: column; }
  .settings-data-import-actions { width: 100%; }
  .settings-data-import-actions > button { flex: 1; justify-content: center; }
  .universal-import-backdrop { padding: 0; }
  .universal-import-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .universal-import-body { padding: 13px; }
  .universal-import-sheet { grid-template-columns: auto minmax(0,1fr); }
  .universal-import-sheet-action { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; width: 100%; }
  .universal-import-file-summary { align-items: flex-start; flex-wrap: wrap; }
  .universal-import-file-summary > div { flex: 1; }
  .universal-import-file-summary button { width: 100%; margin-left: 0; justify-content: center; }
  .universal-import-footer > span { display: none; }
  .universal-import-footer > button { width: 100%; }
  .customer-universal-import-footer { align-items: stretch; flex-direction: column-reverse; }
  .customer-universal-import-footer > button,.customer-universal-import-footer > div,.customer-universal-import-footer > div > button { width: 100%; }
  .customer-universal-import-footer > div > button { justify-content: center; }
}
.customer-hub-create-results { display: grid; gap: 6px; max-height: min(420px, 48vh); overflow: auto; }
.customer-hub-create-results > button { display: grid; grid-template-columns: 76px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ds-border); border-radius: 8px; background: #fff; color: var(--ds-heading); text-align: left; cursor: pointer; }
.customer-hub-create-results > button:hover, .customer-hub-create-results > button:focus-visible { border-color: var(--ds-primary-hover); background: var(--ds-bg-soft); }
.customer-hub-create-results > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-hub-create-results > button svg { width: 16px; height: 16px; }
.customer-hub-create-results > p, .customer-hub-create-results > small { margin: 8px 2px; color: var(--ds-text-light); }
.customer-hub-create-results > .customer-hub-create-hint { min-height: 46px; display: grid; place-items: center; margin: 0; border: 1px dashed var(--ds-border); border-radius: 8px; background: var(--ds-bg-soft); text-align: center; }
.customer-work-orders-toolbar .work-orders-desktop-filters { grid-template-columns: minmax(240px, 1fr) minmax(130px, 170px) minmax(160px, 210px) auto; }
.customers-hub-toolbar .work-orders-desktop-filters { grid-template-columns: minmax(240px, 1fr) minmax(130px, 170px) minmax(160px, 210px) auto; }
@media (min-width: 1181px) {
  .work-orders-screen .customers-hub-toolbar .work-orders-desktop-filters,
  .work-orders-screen .customer-work-orders-toolbar .work-orders-desktop-filters { grid-template-columns: minmax(260px, 1fr) minmax(130px, 170px) minmax(160px, 210px) auto; }
  .work-orders-screen .customers-hub-toolbar .work-orders-desktop-filters > *,
  .work-orders-screen .customer-work-orders-toolbar .work-orders-desktop-filters > * { grid-column: auto; }
}
.customers-hub-table, .customer-work-orders-table { table-layout: auto; min-width: 1080px; }
.customers-hub-table th, .customer-work-orders-table th { text-align: center; vertical-align: middle; }
.customers-hub-table th .sort-header, .customer-work-orders-table th .sort-header { width: 100%; justify-content: center; text-align: center; }
.customers-hub-table td, .customer-work-orders-table td { vertical-align: middle; }
.customers-hub-table .hub-col-date, .customer-work-orders-table .hub-col-date { width: 102px; white-space: nowrap; }
.customers-hub-table .hub-col-code, .customer-work-orders-table .hub-col-code { width: 82px; }
.customers-screen .customers-hub-table td.hub-col-status,
.customers-screen .customer-work-orders-table td.hub-col-status { min-width: 120px; text-align: center; }
.customers-hub-table th.hub-col-status, .customer-work-orders-table th.hub-col-status { min-width: 120px; text-align: center; }
.customers-hub-table .hub-col-amount { min-width: 135px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.customers-hub-table .hub-col-actions { width: 150px; text-align: center; }
.customer-work-orders-table .hub-col-actions { width: 205px; text-align: center; }
.customer-wo-status { display: flex; align-items: center; justify-content: center; min-width: 0; }
.customer-work-order-row-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }
.customer-work-order-row-actions .secondary-button { min-height: 36px; padding: 0 9px; font-size: 11px; white-space: nowrap; }
.customer-work-order-row-actions .secondary-button svg { width: 14px; height: 14px; }
.customer-work-orders-table-wrap { border: 1px solid var(--nx-table-frame-border); border-radius: var(--radius-sm); background: var(--ds-card); }
.customer-work-orders-table { border-collapse: separate; border-spacing: 0; }
.customer-work-orders-table th { border-bottom: 1px solid var(--nx-table-header-border); }
.customer-work-orders-table th + th, .customer-work-orders-table td + td { border-left: 1px solid var(--nx-table-column-border); }
.customer-work-orders-table tbody td { border-bottom: 1px solid var(--nx-table-row-border); }
.customer-work-orders-table tbody tr:last-child td { border-bottom: 0; }
.customers-hub-table .row-actions { justify-content: center; }
.customers-hub-table tbody tr, .customer-work-orders-table tbody tr { cursor: pointer; }
.customers-hub-table tbody tr:hover, .customer-work-orders-table tbody tr:hover { background: var(--ds-primary-light); }
.customers-hub-table tbody tr:focus-visible, .customer-work-orders-table tbody tr:focus-visible { outline: 2px solid var(--ds-primary-border); outline-offset: -2px; }
.customer-work-order-mobile-list { display: none; }
.customer-work-orders-modal .customer-invoices-workspace { overflow-y: auto; }
.invoice-remaining.is-overdue { color: var(--ds-danger); }
.invoice-remaining.is-paid { color: #168451; }
.customer-invoices-modal .customer-invoices-table { min-width: 1450px; }
.customer-invoices-table td.invoice-amount-cell, .customer-invoices-table th:has([data-sort="paidAmount"]), .customer-invoices-table th:has([data-sort="remainingAmount"]) { text-align: right; font-variant-numeric: tabular-nums; }
.customer-invoices-table td.invoice-status-cell { overflow: visible; text-align: center; }
.customer-invoices-table td.invoice-status-cell .status-badge { max-width: none; white-space: nowrap; }
.customer-quotation-list-table td:nth-child(4) { text-align: center; }
.invoice-due-banner { display: flex; align-items: center; gap: 9px; width: calc(100% - 32px); margin: 12px 16px 0; padding: 10px 12px; border: 1px solid #f2b5b5; border-radius: 8px; background: #fff4f4; color: #9b2626; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.invoice-due-banner > svg:last-child { margin-left: auto; }
.invoice-due-banner:hover { background: #ffeaea; border-color: #e48b8b; }
.invoice-due-banner:focus-visible { outline: 2px solid var(--ds-danger); outline-offset: 2px; }
.invoice-due-banner svg { width: 18px; height: 18px; flex: none; }
.invoice-due-banner.is-soon { border-color: #ead4a0; background: #fffaf0; color: #865c12; }
.invoice-due-banner.is-soon:hover { border-color: #d5b36a; background: #fff4dc; }
.invoice-due-banner.is-soon:focus-visible { outline-color: #b67c18; }
.invoice-debts-toolbar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.invoice-debts-overlay { z-index: 270; }
.invoice-debts-modal { width: min(94vw, 760px); max-height: min(90vh, 860px); overflow-y: auto; }
.invoice-debts-body { display: grid; gap: 17px; padding: 20px; }
.invoice-debts-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.invoice-debts-summary > div { display: grid; gap: 6px; padding: 15px; border: 1px solid var(--ds-border); border-radius: 9px; background: var(--ds-bg-soft); }
.invoice-debts-summary small { color: var(--ds-text-light); }
.invoice-debts-summary strong { font-size: 18px; color: var(--ds-heading); }
.invoice-debts-summary > div:last-child strong { color: var(--ds-danger); }
.invoice-debts-body > .secondary-button { justify-self: start; }
.invoice-debts-send { display: grid; gap: 11px; padding: 17px; border: 1px solid var(--ds-border); border-radius: 10px; }
.invoice-debts-send h3, .invoice-debts-send p { margin: 0; }
.invoice-debts-send > label { display: grid; gap: 5px; font-weight: 700; }
.invoice-debts-send select, .invoice-debts-send input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: 7px; background: var(--ds-card); color: var(--ds-heading); font: inherit; }
.invoice-debts-selected { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--ds-primary-border); border-radius: 8px; background: var(--ds-primary-light); }
.invoice-debts-selected span, .invoice-debts-selected small { color: var(--ds-text-light); }
.invoice-debts-reminder { display: grid; gap: 6px; padding: 12px; border-left: 3px solid var(--ds-primary-hover); border-radius: 5px; background: var(--ds-bg-soft); line-height: 1.5; }
.invoice-debts-send > .primary-button { justify-self: start; }
.customer-invoices-head-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) {
  .invoice-debts-summary { grid-template-columns: 1fr; }
  .invoice-debts-body { padding: 14px; }
  .invoice-debts-send > .primary-button { width: 100%; justify-content: center; }
}
.invoice-payments-overlay { z-index: 260; }
.invoice-payments-modal { width: min(96vw, 740px); max-height: min(90vh, 850px); overflow-y: auto; }
.invoice-payments-body { display: grid; gap: 18px; padding: 20px; }
.invoice-payments-history { display: grid; gap: 7px; }
.invoice-payment-row { display: grid; grid-template-columns: 100px 145px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--ds-border); border-radius: 8px; }
.invoice-payment-row.is-reversed { opacity: .58; text-decoration: line-through; }
.invoice-payment-form, .invoice-payment-reversal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px; padding: 18px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-bg-soft); box-shadow: 0 5px 18px rgba(20, 48, 72, .05); }
.invoice-payment-form-title { grid-column: 1 / -1; display: grid; gap: 3px; padding-bottom: 3px; }
.invoice-payment-form-title strong { color: var(--ds-heading); font-size: 16px; }
.invoice-payment-form-title span { color: var(--ds-text-light); font-size: 12px; }
.invoice-payment-form label, .invoice-payment-reversal label { display: grid; align-content: start; gap: 6px; min-width: 0; font-weight: 700; }
.invoice-payment-form label > span { min-height: 19px; }
.invoice-payment-form label input { width: 100%; min-width: 0; min-height: 42px; box-sizing: border-box; }
.invoice-payment-form .invoice-payment-note-field { grid-column: 1 / -1; }
.invoice-payment-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 2px; }
.invoice-payment-form-actions button { min-height: 40px; }
.invoice-payments-error { color: var(--ds-danger); }
@media (max-width: 860px) {
  .invoice-payment-form { grid-template-columns: 1fr; }
  .invoice-payment-form-actions button { width: 100%; justify-content: center; }
  .customer-work-orders-toolbar .work-orders-desktop-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customers-hub-toolbar .work-orders-desktop-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-work-orders-toolbar .work-search { grid-column: 1 / -1; }
  .customers-hub-toolbar .work-search { grid-column: 1 / -1; }
  .work-orders-screen .customer-work-orders-table-wrap { display: block; overflow-x: auto; }
  .work-orders-screen .customers-hub-list .work-order-table-wrap { display: block; overflow-x: auto; }
  .customers-hub-table { min-width: 840px; }
  .customer-work-orders-table { min-width: 840px; }
  .invoice-payment-row { grid-template-columns: 1fr 1fr; }
  .invoice-payment-form, .invoice-payment-reversal { grid-template-columns: 1fr; }
.invoice-payment-form label:nth-child(3) { grid-column: auto; }
}

@media (max-width: 760px) {
  .customer-work-orders-table-wrap { display: none !important; }
  .customer-work-order-mobile-list { display: grid; gap: 7px; }
  .customer-work-order-mobile-card { display: grid; min-width: 0; gap: 7px; padding: 10px 11px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); cursor: pointer; }
  .customer-work-order-mobile-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
  .customer-work-order-mobile-card > header > div:first-child { display: grid; min-width: 0; gap: 2px; }
  .customer-work-order-mobile-card > header strong { color: var(--ds-heading); font-size: 13px; line-height: 1.2; }
  .customer-work-order-mobile-card > header span { overflow: hidden; color: var(--ds-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .customer-work-order-mobile-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .customer-work-order-mobile-card > p { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--ds-text-light); font-size: 11px; }
  .customer-work-order-mobile-card > p span + span::before { content: "·"; margin-right: 12px; }
  .customer-work-order-mobile-card:focus-visible { outline: 2px solid var(--ds-primary-border); outline-offset: 1px; }
}

/* Internal operation rows follow the same calm, action-first work-order rhythm. */
.operation-item-card.int-operation-card-polished {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 20px;
  padding: 15px 16px 11px 18px;
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-primary);
  box-shadow: 0 3px 12px rgba(20, 48, 72, .04);
}
.int-operation-card-polished .operation-state-rail { display: none; }
.int-operation-card-polished .operation-main { grid-column: 1; grid-row: 1; }
.int-operation-card-polished .operation-identity em { font-style: normal; font-weight: 400; }
.int-operation-card-polished .int-operation-metrics {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--ds-muted);
}
.int-operation-card-polished .operation-active-timer { align-self: center; }
.int-operation-card-polished .operation-progress-block { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.int-operation-card-polished .int-operation-action-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-border);
}
.int-operation-card-polished .int-operation-main-actions,
.int-operation-card-polished .int-operation-utility-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.int-operation-card-polished .int-operation-utility-actions { margin-left: auto; }
.wo-labor-confirmation-notice {
  padding: 10px 14px;
  border: 1px solid #ead4a0;
  border-radius: 8px;
  background: #fffaf0;
  color: #67490f;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .int-operation-card-polished .int-operation-action-row { align-items: flex-start; }
  .int-operation-card-polished .int-operation-main-actions { flex: 1; min-width: 0; }
  .int-operation-card-polished .int-operation-utility-actions { width: auto; flex: 0 0 auto; justify-content: flex-end; }
}
.hub-creator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
}
.hub-creator svg { width: 16px; height: 16px; color: var(--primary, #2f729c); }
.invoice-paid-amount strong { color: #15803d; }
.customer-financial-card { gap: 10px; }
.customer-header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 7px; color: var(--ds-text-light); font-size: 12px; font-weight: 700; }
.customer-header-meta > i { width: 3px; height: 3px; border-radius: 999px; background: var(--ds-border-strong, #aebdca); }
.customer-header-meta .status-badge { min-height: 24px; padding: 3px 9px; }
.customer-market-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.customer-market-selector > button { display: grid; gap: 3px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-button); background: var(--ds-card); color: var(--ds-heading); text-align: left; cursor: pointer; }
.customer-market-selector > button span { color: var(--ds-text-light); font-size: 12px; }
.customer-market-selector > button.active { border-color: var(--ds-primary); background: var(--ds-primary-light); box-shadow: inset 0 0 0 1px var(--ds-primary); }
.customer-market-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border: 1px solid var(--ds-border); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.customer-market-badge.domestic { background: #eef8f2; color: #24734b; }
.customer-market-badge.export { background: #eef5fb; color: #245d86; }
.customer-row-export td:first-child { box-shadow: inset 3px 0 0 #7ca8c8; }
.customers-card header > span { display: flex; align-items: center; gap: 6px; }
.customer-overview-strip {
  grid-area: overview;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-card);
  box-shadow: 0 3px 12px rgba(20, 48, 72, .035);
}
.customer-overview-strip > button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; min-height: 54px; padding: 9px 13px; border: 0; border-right: 1px solid var(--ds-border); background: transparent; color: var(--ds-heading); text-align: left; cursor: pointer; }
.customer-overview-strip > button:last-child { border-right: 0; }
.customer-overview-strip > button:hover { background: var(--ds-primary-light); }
.customer-overview-strip > button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--ds-primary); outline-offset: -2px; }
.customer-overview-strip svg { width: 17px; height: 17px; color: var(--ds-primary); }
.customer-overview-strip span { overflow: hidden; color: var(--ds-text-light); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.customer-overview-strip strong { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--ds-bg-soft); color: var(--ds-heading); font-size: 13px; font-variant-numeric: tabular-nums; }
.customer-financial-empty { margin: 0; color: var(--muted, #60758d); font-size: 13px; line-height: 1.45; }
.customer-financial-metric { padding: 12px; border: 1px solid #cfe0ed; border-radius: 10px; background: #f8fbfd; }
.customer-financial-metric strong { display: block; font-size: 22px; line-height: 1.1; }
.customer-financial-metric span { display: block; margin-top: 4px; color: #60758d; font-size: 12px; }
.customer-financial-metric.is-positive strong { color: #15803d; }
.customer-financial-metric.is-negative strong { color: #c62828; }
.customer-payment-term { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; color: var(--ds-text-light); font-size: 12px; }
.customer-payment-term strong { color: var(--ds-heading); font-size: 13px; }
.customer-overdue-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 13px; text-align: left; }
button.customer-overdue-card { font: inherit; cursor: pointer; }
.customer-overdue-card.has-debt { border-color: #efb5b5; background: #fffafa; }
.customer-overdue-card.has-debt:hover { border-color: #dc8585; background: #fff4f4; }
.customer-overdue-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ds-bg-soft); color: var(--ds-primary); }
.customer-overdue-card.has-debt .customer-overdue-icon { background: #ffe8e8; color: var(--ds-danger); }
.customer-overdue-icon svg, .customer-overdue-card > svg { width: 17px; height: 17px; }
.customer-overdue-card > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.customer-overdue-card small { color: var(--ds-text-light); font-size: 10px; font-weight: 800; letter-spacing: .025em; }
.customer-overdue-card strong { color: var(--ds-heading); font-size: 14px; }
.customer-overdue-card.has-debt strong, .customer-overdue-card.has-debt em { color: #b42323; }
.customer-overdue-card em { color: var(--ds-text-light); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.customer-credit-report-card { gap: 12px; min-height: 136px; }
.customer-credit-report-card p { margin: 0; color: #60758d; font-size: 12px; line-height: 1.45; }
.customer-credit-report-card small { color: #60758d; line-height: 1.4; }
.customer-credit-primary { width: 100%; justify-content: flex-start; }
.customer-credit-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; margin-top: 2px; }
.customer-credit-actions .secondary-button { justify-content: center; width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; font-size: 11px; }
.customer-credit-request { gap: 6px; color: var(--ds-text-light); font-weight: 700; cursor: pointer; }
.customer-credit-request:hover { color: var(--ds-primary); }
.customer-credit-request:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.customer-credit-request svg { width: 15px; height: 15px; }
@media (max-width: 1180px) {
  .customer-overview-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-overview-strip > button { border-bottom: 1px solid var(--ds-border); }
  .customer-overview-strip > button:nth-child(3n) { border-right: 0; }
  .customer-overview-strip > button:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 620px) {
  .customer-overview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-overview-strip > button:nth-child(3n) { border-right: 1px solid var(--ds-border); }
  .customer-overview-strip > button:nth-child(even) { border-right: 0; }
  .customer-overview-strip > button:nth-last-child(-n + 2) { border-bottom: 1px solid var(--ds-border); }
  .customer-overview-strip > button:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}
.compact-confirm-backdrop { z-index: 1900; }
.compact-confirm-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
}
.compact-confirm-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff1f1; color: #c62828; }
.compact-confirm-icon svg { width: 21px; height: 21px; }
.compact-confirm-modal h2 { margin: 2px 0 7px; font-size: 20px; }
.compact-confirm-modal p { margin: 0; color: #60758d; line-height: 1.5; }
.compact-confirm-modal footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.destructive-confirm-modal { width: min(460px, calc(100vw - 32px)); }
.destructive-confirm-modal .compact-confirm-copy { min-width: 0; }
.destructive-confirm-modal .compact-confirm-copy h2 { color: var(--ds-heading); }
.destructive-confirm-context { display: grid; gap: 3px; margin-top: 16px; padding: 11px 12px; border: 1px solid var(--ds-border); border-radius: 9px; background: var(--ds-bg-soft); }
.destructive-confirm-context strong { color: var(--ds-heading); font-size: 13px; }
.destructive-confirm-context span { color: var(--ds-text-light); font-size: 12px; }
.destructive-confirm-modal footer, .destructive-confirm-modal > .modal-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ds-border); }
.destructive-confirm-modal .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--ds-danger, #c62828); border-radius: 8px; background: var(--ds-danger, #c62828); color: #fff; font-weight: 800; cursor: pointer; }
.destructive-confirm-modal .danger-button:hover, .destructive-confirm-modal .danger-button:focus-visible { border-color: #a91f1f; background: #a91f1f; color: #fff; }
.destructive-confirm-modal .danger-button:disabled { opacity: .58; cursor: wait; }
.destructive-confirm-modal .danger-button svg { width: 16px; height: 16px; }
.generic-destructive-confirm { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 24px; }
.generic-destructive-confirm > .modal-close { position: absolute; }
.generic-destructive-confirm > .modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; }

/* UX stage B10: one restrained typography hierarchy across modules. */
.content > .topbar.topbar {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content > .topbar .title-block h1,
.content > .topbar .module-title-block h1 {
  margin-top: 0;
  font-family: var(--ds-font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}

.content .field > span:first-child,
.modal-panel .field > span:first-child,
.modal-panel fieldset > legend {
  color: var(--ds-text-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

/* UX stage B1: canonical modal frame for compact and medium workflows. */
.modal-backdrop.nx-modal-backdrop {
  padding: 20px;
  background: rgba(var(--ds-sidebar-rgb), .52);
}

.modal-panel.flow-modal.nx-modal-shell {
  width: min(640px, calc(100vw - 40px));
  max-width: 640px;
  max-height: 85dvh;
  border-radius: var(--ds-radius-modal);
}

.modal-panel.flow-modal.nx-modal-shell.nx-modal-sm {
  width: min(440px, calc(100vw - 40px));
  max-width: 440px;
}

.modal-panel.flow-modal.nx-modal-shell.nx-modal-lg {
  width: min(960px, calc(100vw - 40px));
  max-width: 960px;
}

.nx-modal-shell > .nx-modal-head {
  min-height: 64px;
  max-height: 64px;
  gap: 12px;
  padding: 10px 20px;
}

.nx-modal-shell > .nx-modal-head .flow-modal-icon {
  width: 36px;
  height: 36px;
}

.nx-modal-shell > .nx-modal-head .flow-modal-title h2 {
  font-size: 20px;
}

.nx-modal-shell > .nx-modal-head .flow-modal-title p {
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nx-modal-body {
  min-height: 0;
  padding: 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nx-modal-shell > .nx-modal-footer {
  min-height: 64px;
  padding: 12px 20px;
}

.nx-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 640px) {
  .modal-backdrop.nx-modal-backdrop { padding: 8px; }
  .modal-panel.flow-modal.nx-modal-shell,
  .modal-panel.flow-modal.nx-modal-shell.nx-modal-sm,
  .modal-panel.flow-modal.nx-modal-shell.nx-modal-lg {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .nx-modal-body { padding: 16px; }
  .nx-modal-shell > .nx-modal-footer { align-items: stretch; }
  .nx-modal-actions { display: grid; width: 100%; }
}

/* UX stage B3: distinguish content tabs, filter segments and wizard steps. */
:where(.nx-content-tabs, .nx-segmented-control, .nx-wizard-steps) {
  min-width: 0;
  max-width: 100%;
  scrollbar-width: thin;
}

:where(.nx-content-tabs, .nx-segmented-control, .nx-wizard-steps) > button:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: -2px;
}

@media (max-width: 760px) {
  .nx-content-tabs,
  .nx-segmented-control,
  .nx-wizard-steps {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  :where(.nx-content-tabs, .nx-segmented-control, .nx-wizard-steps) > button {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* UX stage B11: reusable product quick-info popover / mobile sheet. */
.product-quick-info-layer {
  position: fixed;
  inset: 0;
  z-index: 1250;
  pointer-events: none;
}

.product-quick-info-popover {
  position: fixed;
  top: var(--quick-info-top, 88px);
  left: var(--quick-info-left, 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  width: min(420px, calc(100vw - 32px));
  max-height: min(460px, calc(100dvh - var(--quick-info-top, 88px) - 16px));
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(8, 39, 63, .24);
  outline: none;
}

.product-quick-info-popover > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--ds-border);
  background: linear-gradient(145deg, #fff, #f5f9fc);
}

.product-quick-info-popover > header img,
.product-quick-info-placeholder {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: #eef6fa;
  color: var(--ds-primary);
  object-fit: cover;
}

.product-quick-info-placeholder svg { width: 20px; height: 20px; }
.product-quick-info-popover > header small { color: var(--ds-primary); font-size: .66rem; font-weight: 850; letter-spacing: .08em; }
.product-quick-info-popover > header h2 { margin: 2px 0 0; color: var(--ds-heading); font-size: 1.05rem; }
.product-quick-info-popover > header p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: .82rem; }
.product-quick-info-popover .product-quick-info-body { display: block; min-width: 0; min-height: 0; padding: 6px 16px 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.product-quick-info-facts { width: 100%; min-width: 0; max-width: 100%; border-collapse: collapse; }
.product-quick-info-facts th,
.product-quick-info-facts td { height: 34px; padding: 6px 0; border-bottom: 1px solid var(--ds-border); vertical-align: middle; font-size: .8rem; line-height: 1.2; }
.product-quick-info-facts th { background: transparent; color: var(--ds-text-light); font-size: .8rem; font-weight: 650; letter-spacing: 0; text-align: left; text-transform: none; }
.product-quick-info-facts td { padding-left: 12px; color: var(--ds-heading); font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.product-quick-info-facts .quick-info-group tr:first-child > * { border-top: 6px solid transparent; }
.product-quick-info-facts tbody:last-child tr:last-child > * { border-bottom: 0; }
.product-quick-info-popover > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ds-border); background: #fbfdfe; }
.product-quick-info-context { width: 26px; height: 26px; flex-basis: 26px; }
.root-item-name[data-action="open-product-quick-info"], .material-quick-info-trigger { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.root-item-name[data-action="open-product-quick-info"]:hover, .material-quick-info-trigger:hover { color: var(--ds-primary); text-decoration: underline; text-underline-offset: 3px; }
.root-item-name[data-action="open-product-quick-info"]:focus-visible, .material-quick-info-trigger:focus-visible { border-radius: 3px; outline: 2px solid rgba(var(--ds-primary-rgb), .35); outline-offset: 2px; }
.scrap-event-product > span, .scrap-event-product-mobile { display: flex; align-items: center; gap: 7px; }

@media (max-width: 640px) {
  .product-quick-info-layer { background: rgba(7, 24, 39, .4); pointer-events: auto; }
  .product-quick-info-popover {
    inset: auto 0 0;
    width: 100%;
    max-height: min(80dvh, calc(100dvh - 16px));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(8, 39, 63, .24);
  }
  .product-quick-info-popover .product-quick-info-body { padding-inline: 12px; }
  .product-quick-info-facts th,
  .product-quick-info-facts td { font-size: .74rem; }
}

/* Final cascade guards for the Stage B responsive contract. */
.module-page-header,
.stations-card-header.module-page-header,
.content > .topbar { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.nx-command-header-actions-only { min-height: 0 !important; justify-content: flex-end; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.quick-info-code { display: inline-flex; align-items: center; gap: 4px; }
.quick-info-code > :first-child { border-bottom: 1px dotted currentColor !important; text-decoration: none !important; }
.quick-info-indicator { width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0; border: 0; background: transparent; color: var(--ds-text-light); }
.quick-info-indicator svg { width: 14px; height: 14px; }
.work-orders-table .wo-opened-cell { text-align: center; }
.work-orders-table th.wo-opened-cell .sort-header { width: 100%; justify-content: center; text-align: center; }
.work-orders-table .wo-opened-cell,
.work-orders-table .wo-owner-cell,
.work-orders-table .wo-problems-cell { text-align: center; white-space: nowrap; }
.work-orders-table .wo-owner-cell .owner-cell { display: inline-flex; max-width: 100%; justify-content: center; }
.work-orders-table .wo-owner-cell .owner-cell span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-orders-table .wo-problems-cell .problem-count { display: flex; width: fit-content; margin-inline: auto; }
.work-orders-table th:has(.sort-header[data-sort="owner"]),
.work-orders-table th:has(.sort-header[data-sort="problems"]),
.work-orders-table th:has(.sort-header[data-sort="status"]),
.work-orders-table th:has(.sort-header[data-sort="created"]) { text-align: center; }
.work-orders-table th :is(.sort-header[data-sort="owner"], .sort-header[data-sort="problems"], .sort-header[data-sort="status"], .sort-header[data-sort="created"]) { width: 100%; justify-content: center; text-align: center; }
#section-root table th.table-status-cell,
#modal-root table th.table-status-cell,
#section-root table th:has(.sort-header[data-sort="status"]),
#modal-root table th:has(.sort-header[data-sort="status"]),
#section-root table td.table-status-cell,
#modal-root table td.table-status-cell,
#section-root table td:has(> :is(.status-badge, .status-pill, .team-status-badge, .machine-status-badge)),
#modal-root table td:has(> :is(.status-badge, .status-pill, .team-status-badge, .machine-status-badge)) { text-align: center; }
#section-root table :is(th, td).table-status-cell > *,
#modal-root table :is(th, td).table-status-cell > *,
#section-root table td > :is(.status-badge, .status-pill, .team-status-badge, .machine-status-badge),
#modal-root table td > :is(.status-badge, .status-pill, .team-status-badge, .machine-status-badge) { margin-inline: auto; }
#section-root table .sort-header[data-sort="status"],
#modal-root table .sort-header[data-sort="status"] { width: 100%; justify-content: center; text-align: center; }
.table-person-heading,
.table-person-cell-wrap { text-align: center !important; }
.table-person-heading .sort-header { width: 100%; justify-content: center; text-align: center; }
.table-person-cell { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; gap: 6px; }
.table-person-cell > svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ds-primary); }
.table-person-cell > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1024px) {
  #modal-root .modal-backdrop:has(.runtime-problem-detail-modal) { align-items: flex-start; overflow-y: auto; }
  #modal-root .runtime-problem-detail-modal { display: block; height: auto; min-height: calc(100dvh - 16px); max-height: none; overflow: visible; }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-body { display: flex; flex-direction: column; height: auto; max-height: none; overflow: visible; }
  #modal-root .runtime-problem-detail-modal :is(.problem-modal-overview-card, .problem-activity-card, .problem-timeline) { height: auto; max-height: none; overflow: visible; }
  #modal-root .runtime-problem-detail-modal .problem-detail-grid-page { display: contents; }
  #modal-root .runtime-problem-detail-modal .problem-modal-overview-card { order: 1; }
  #modal-root .runtime-problem-detail-modal .problem-activity-card { order: 2; }
  #modal-root .runtime-problem-detail-modal .problem-modal-context { order: 3; }
  #modal-root .runtime-problem-detail-modal .problem-modal-overview-card { margin-bottom: 12px; }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-footer { position: sticky; z-index: 8; bottom: 0; }
}

@media (max-width: 760px) {
  .product-card-actions { display: flex !important; justify-content: flex-end !important; }
  .product-card > .product-card-actions { display: none !important; }
  .notes-screen .notes-table-shell { display: none !important; }
  .notes-mobile-cards { display: grid !important; gap: 8px; padding: 10px; }
  /* List cards follow the shared .nx-row-card contract in ui-v2.css. */
  .work-order-card footer, .material-card footer { display: none !important; }
  :is(.archive-card, .machine-mobile-card, .team-mobile-card, .station-mobile-card) > footer { display: none !important; }
  .product-wide-action { display: none !important; }
  .product-header-more { display: block !important; }
}

/* Stage B finish: stations and machines use the same list layout as other modules
   (free-standing tabs, separate filter card, separate list card) instead of one outer frame. */
.stations-screen > .stations-card {
  display: grid;
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.stations-card > .station-area-tabs { margin: 0; border: 0; }
.stations-card > .stations-filter-card {
  padding: 10px 12px;
  border: 1px solid #dce6ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(10, 25, 49, .05);
}
.stations-card > .stations-list-card {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18, 56, 82, .08);
}
.team-overview .team-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.session-expired-backdrop {
  z-index: 1600;
}
.session-expired-modal {
  width: min(92vw, 480px);
  max-width: 480px;
}
.session-expired-body {
  padding: 24px;
  color: var(--ds-text-muted, #526579);
}
.session-expired-body p {
  margin: 0;
  line-height: 1.55;
}
.session-expired-footer {
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .session-expired-footer .primary-button {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .stations-card > .stations-list-card { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
}

/* Stage B finish: problem list on phones is a readable card, not eight squeezed label-value
   pairs. Work order + status, the description, the product, then date and operator. Station and
   last activity stay in the detail. */
@media (max-width: 760px) {
  .global-problem-table tbody tr:not(.empty-row) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "rn status" "desc desc" "product product" "date operator";
    gap: 6px 12px;
    min-height: 0;
    max-height: none;
    padding: 12px 14px;
  }
  .global-problem-table tbody tr:not(.empty-row) td { display: block; min-height: 0; padding: 0; border: 0 !important; background: transparent; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .global-problem-table tbody tr:not(.empty-row) td::before { content: none; }
}

/* Stage B finish: on phones the problem detail footer is one row of two actions; the close
   button in the header replaces the redundant "Nazad na pregled". */
@media (max-width: 760px) {
  .runtime-problem-detail-modal .problem-detail-modal-footer { flex-direction: row; align-items: center; gap: 8px; }
  .runtime-problem-detail-modal .problem-detail-modal-footer > [data-action="close-modal"] { display: none; }
  .runtime-problem-detail-modal .problem-detail-modal-footer .problem-detail-actions { flex: 1 1 auto; flex-direction: row; gap: 8px; }
  .runtime-problem-detail-modal .problem-detail-modal-footer .problem-detail-actions button { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Stage B finish: customer header actions fit a phone; the primary action comes first. */
@media (max-width: 640px) {
  .customers-area-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
  .customers-area-actions > * { width: 100%; min-width: 0; }
  .customers-area-actions > .primary-button { order: -1; }
}

/* Stage B finish: the laptop (landscape) work-order table keeps the Otvoren date centred like
   the other compact columns. */
.work-orders-table.work-orders-table-landscape td.wo-opened-cell,
.work-orders-table.work-orders-table-landscape th.wo-opened-cell { text-align: center; }

/* Stage B finish: on laptop widths the compact tables use content-based column widths instead of
   equal widths, so short columns (Stavki, Problemi) do not steal room from names, dates and the
   shipping method. */
@media (min-width: 981px) and (max-width: 1366px) {
  #section-root .work-orders-table-landscape col.wo-landscape-col-code { width: 12% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-opened { width: 9% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-title { width: 21% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-owner { width: 14% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-priority { width: 9% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-status { width: 11% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-due { width: 9% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-problems { width: 7% !important; }
  #section-root .work-orders-table-landscape col.wo-landscape-col-actions { width: 8% !important; }

  #section-root .shipment-table-landscape col.shipment-landscape-col-code { width: 13% !important; }
  #section-root .shipment-table-landscape col.shipment-landscape-col-customer { width: 27% !important; }
  #section-root .shipment-table-landscape col.shipment-landscape-col-dates { width: 14% !important; }
  #section-root .shipment-table-landscape col.shipment-landscape-col-items { width: 6% !important; }
  #section-root .shipment-table-landscape col.shipment-landscape-col-method { width: 15% !important; }
  #section-root .shipment-table-landscape col.shipment-landscape-col-owner { width: 14% !important; }
  #section-root .shipment-table-landscape col.shipment-landscape-col-actions { width: 11% !important; }
  #section-root .shipment-table-landscape .inline-select { width: 100%; max-width: 100%; }

  #section-root .archive-table-landscape col.archive-landscape-col-code { width: 13% !important; }
  #section-root .archive-table-landscape col.archive-landscape-col-customer { width: 21% !important; }
  #section-root .archive-table-landscape col.archive-landscape-col-reference { width: 9% !important; }
  #section-root .archive-table-landscape col.archive-landscape-col-dates { width: 16% !important; }
  #section-root .archive-table-landscape col.archive-landscape-col-owner { width: 14% !important; }
  #section-root .archive-table-landscape col.archive-landscape-col-status { width: 19% !important; }
  #section-root .archive-table-landscape col.archive-landscape-col-actions { width: 8% !important; }
}

/* Stage B finish: archive status shows only the signed delivery note state (every row is
   archived), coloured by state and allowed to wrap instead of being truncated. */
.archive-status-cell { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
.archive-status-cell .archive-delivery-state { max-width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
.archive-status-cell .archive-delivery-state.missing { background: #fff4e5; color: #9a4b00; }
.archive-status-cell .archive-delivery-state.present { background: #e8f6ee; color: #146c3c; }
.archive-status-cell .archive-delivery-state.neutral { background: #f1f5f8; color: var(--ds-text-light); }

/* Stage B finish: materials table on laptop widths uses content-based column widths (the fit
   mode otherwise splits eleven columns equally and wraps the material name into four lines). */
@media (min-width: 981px) and (max-width: 1366px) {
  #section-root .materials-table table th:nth-child(1) { width: 12% !important; }
  #section-root .materials-table table th:nth-child(2) { width: 20% !important; }
  #section-root .materials-table table th:nth-child(3) { width: 6% !important; }
  #section-root .materials-table table th:nth-child(4) { width: 7% !important; }
  #section-root .materials-table table th:nth-child(5) { width: 8% !important; }
  #section-root .materials-table table th:nth-child(6) { width: 7% !important; }
  #section-root .materials-table table th:nth-child(7) { width: 9% !important; }
  #section-root .materials-table table th:nth-child(8) { width: 9% !important; }
  #section-root .materials-table table th:nth-child(9) { width: 9% !important; }
  #section-root .materials-table table th:nth-child(10) { width: 8% !important; }
  #section-root .materials-table table th:nth-child(11) { width: 5% !important; }
  #section-root .materials-table .material-code-with-warning { gap: 4px; }
}

/* Stage B finish: content-based laptop widths for problems, scrap events and team tables. */
@media (min-width: 981px) and (max-width: 1366px) {
  #section-root .global-problem-table th:nth-child(1) { width: 10% !important; }
  #section-root .global-problem-table th:nth-child(2) { width: 11% !important; }
  #section-root .global-problem-table th:nth-child(3) { width: 18% !important; }
  #section-root .global-problem-table th:nth-child(4) { width: 14% !important; }
  #section-root .global-problem-table th:nth-child(5) { width: 11% !important; }
  #section-root .global-problem-table th:nth-child(6) { width: 17% !important; }
  #section-root .global-problem-table th:nth-child(7) { width: 9% !important; }
  #section-root .global-problem-table th:nth-child(8) { width: 10% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(1) { width: 11% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(2) { width: 10% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(3) { width: 20% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(4) { width: 12% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(5) { width: 14% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(6) { width: 11% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(7) { width: 11% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(8) { width: 6% !important; }
  #section-root .scrap-events-table-wrap table th:nth-child(9) { width: 5% !important; }
  #section-root .team-data-table th:nth-child(1) { width: 16% !important; }
  #section-root .team-data-table th:nth-child(2) { width: 11% !important; }
  #section-root .team-data-table th:nth-child(3) { width: 16% !important; }
  #section-root .team-data-table th:nth-child(4) { width: 9% !important; }
  #section-root .team-data-table th:nth-child(5) { width: 13% !important; }
  #section-root .team-data-table th:nth-child(6) { width: 16% !important; }
  #section-root .team-data-table th:nth-child(7) { width: 10% !important; }
  #section-root .team-data-table th:nth-child(8) { width: 9% !important; }
}

/* Stage B finish: on phones the problem detail uses the whole screen; the backdrop gutter and
   the 30px panel padding left only 298px of a 390px screen for the content and actions. */
@media (max-width: 520px) {
  #modal-root .modal-backdrop:has(> .runtime-problem-detail-modal) { padding: 0 !important; }
  #modal-root .modal-panel.runtime-problem-detail-modal { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh; margin: 0; padding: 16px !important; border-radius: 0; }
  #modal-root .runtime-problem-detail-modal .problem-detail-actions button { white-space: nowrap; }
}

/* Stage B finish (review round): shared filter buttons, compact controls. */
.brand-home-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.mobile-app-bar .brand-home-link { display: inline-flex; align-items: center; }

/* Filteri and Poništi filtere: same font, same height as the fields, same width as a select. */
.filter-disclosure-button,
.filter-reset-button {
  min-height: var(--ds-list-control-height) !important;
  height: var(--ds-list-control-height);
  justify-content: center;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0;
}
.filter-disclosure-button > span,
.filter-reset-button > span { font-size: inherit !important; font-weight: inherit !important; }
.filter-disclosure-panel > .filter-primary-row > button.filter-disclosure-button,
.filter-disclosure-panel > .filter-primary-row > button.filter-reset-button {
  flex: 1 1 126px;
  min-width: 108px;
  max-width: none;
}
.stations-filter-card { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); align-items: end; }
.stations-filter-card > .filter-reset-button { width: 100%; }

/* Customers: narrow, centred market column. */
.customers-screen .work-orders-table .cust-col-market { width: 96px; }
.customers-screen .customers-table td.cust-market-cell,
.customers-screen .customers-table th.cust-market-cell { text-align: center !important; }
.customers-screen .customers-table td.cust-market-cell > * { margin-inline: auto; }
.customers-screen .work-orders-table th.cust-market-cell .sort-header { width: 100%; justify-content: center; }

/* Problems: work order and station on one line. */
.global-problem-table td.global-problem-nowrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shipments: the shipping method select matches the row text instead of dominating it. */
.shipment-table .inline-select[data-action="shipment-method"] {
  width: auto;
  max-width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0 24px 0 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Work order Opšte: tighter sections, shorter note and a slim save strip so the tab fits
   without scrolling on a laptop screen. */
.wo-general-shell { gap: 12px; }
.wo-general-shell .wo-general-section { padding: 12px 16px; }
.wo-general-shell textarea { min-height: 64px !important; height: 64px; }
.wo-general-save-strip { min-height: 0; padding: 6px 12px !important; }
.wo-general-save-strip button { min-height: 32px !important; height: 32px; padding: 0 12px !important; font-size: 12px; }

/* Stage B finish (review round): a little more vertical room on the work order detail so the
   Opšte tab fits a ~855px laptop viewport without scrolling. */
.content:has(.work-order-detail-shell) { padding-top: 10px; padding-bottom: 12px; }
.work-order-detail-shell { gap: 8px !important; row-gap: 8px !important; }
.work-order-detail-shell .wo-detail-summary.wo-detail-operational { padding-top: 10px; padding-bottom: 10px; }
.wo-general-shell .wo-general-section-grid { row-gap: 8px; }
.wo-general-shell .wo-general-priority-options > * { min-height: 38px; }

/* UX C2: one compact work-order header owns identity, progress and the next action. */
.work-order-detail-shell .wo-detail-sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ds-bg);
}

.work-order-detail-shell .wo-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: 40px 24px;
  align-items: center;
  gap: 6px 12px;
  min-height: 82px;
  padding: 8px 12px;
}

.wo-detail-header-identity,
.wo-detail-header-tools,
.wo-detail-header-completion,
.wo-detail-header-meta,
.wo-detail-progress-compact {
  display: flex;
  align-items: center;
  min-width: 0;
}

.wo-detail-header-identity { gap: 8px; }
.wo-detail-header-tools { gap: 8px; justify-content: flex-end; }
.wo-detail-header-completion { justify-content: flex-end; }
.wo-detail-header:not(.has-completion) .wo-detail-header-tools { grid-column: 3; }
.wo-detail-header-meta { grid-column: 1 / 3; gap: 0; overflow: hidden; }
.wo-detail-progress-compact { grid-column: 3; justify-content: flex-end; gap: 8px; }

.wo-detail-header-identity .wo-detail-back {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.wo-detail-header-identity .wo-detail-share {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.work-order-detail-shell .wo-detail-header .wo-detail-code {
  margin: 0;
  color: var(--ds-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.wo-detail-save-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.wo-detail-save-state[hidden] { display: none; }
.wo-detail-save-state svg { width: 13px; height: 13px; }
.wo-detail-save-state.api-error,
.wo-detail-save-state.validation-error { color: var(--ds-danger); }
.wo-detail-save-state.api-error svg,
.wo-detail-save-state.validation-error svg { color: var(--ds-danger); }

.wo-detail-header-meta span {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  color: var(--ds-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.wo-detail-header-meta span + span::before {
  margin: 0 10px;
  color: var(--ds-text-light);
  content: "·";
}
.wo-detail-header-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-text);
  font-weight: 800;
  text-overflow: ellipsis;
}

.wo-detail-header-tools .wo-detail-print-cluster {
  border: 0;
  padding: 0;
}
.wo-detail-header-tools .wo-detail-print-buttons .wo-detail-print-trigger {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 40px;
  min-height: 40px;
  justify-content: center;
}
.wo-detail-header-completion .wo-quick-complete-action {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 40px;
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}
:is(.wo-detail-header-tools .wo-detail-print-trigger, .wo-detail-header-completion .wo-quick-complete-action) {
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
}
:is(.wo-detail-header-tools .wo-detail-print-trigger, .wo-detail-header-completion .wo-quick-complete-action) svg {
  width: 16px;
  height: 16px;
}
.wo-detail-header-meta .wo-detail-due-meta { gap: 4px; }
.wo-detail-progress-compact .wo-detail-progress-scale {
  width: 160px;
  height: 6px;
  border: 0;
}
.wo-detail-progress-compact > strong {
  min-width: 32px;
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

@media (max-width: 700px) {
  .content.content-wide:has(> #section-root .work-order-detail-shell) { padding-top: 8px; }
  .work-order-detail-shell .wo-detail-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 12px 40px;
    gap: 6px 8px;
    min-height: 0;
    padding: 8px;
  }
  .wo-detail-header-identity { grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; }
  .wo-detail-header-identity .wo-detail-save-state {
    flex: 0 0 100%;
    padding-left: 36px;
    white-space: normal;
  }
  .wo-detail-header-tools { grid-column: 1; grid-row: 4; }
  .wo-detail-header-completion { grid-column: 2; grid-row: 4; }
  .wo-detail-header:not(.has-completion) .wo-detail-header-tools { grid-column: 2; }
  .wo-detail-header-meta { grid-column: 1 / -1; grid-row: 2; gap: 6px 14px; }
  .wo-detail-progress-compact { grid-column: 1 / -1; grid-row: 3; width: 100%; }
  .wo-detail-header-identity .wo-detail-back { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }
  .wo-detail-header-identity .wo-detail-share { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }
  .work-order-detail-shell .wo-detail-header .wo-detail-code { font-size: 17px; }
  .wo-detail-header-identity .priority-badge,
  .wo-detail-owner-meta { display: none; }
  .wo-detail-header-tools .wo-detail-print-buttons .wo-detail-print-trigger {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
  }
  .wo-detail-header-tools,
  .wo-detail-header-tools .wo-detail-print-cluster,
  .wo-detail-header-tools .wo-detail-print-buttons { width: 100%; }
  .wo-detail-header-completion .wo-quick-complete-action { width: 100%; min-width: 0; max-width: none; min-height: 40px; padding: 0 10px; justify-content: center; }
  .wo-detail-progress-compact .wo-detail-progress-scale { width: 100%; }
  .wo-detail-progress-compact > strong { font-size: 11px; }
  .wo-detail-sticky-header.is-condensed .wo-detail-header {
    grid-template-rows: 34px;
    min-height: 50px;
  }
  .wo-detail-sticky-header.is-condensed .wo-detail-header-meta,
  .wo-detail-sticky-header.is-condensed .wo-detail-progress-compact,
  .wo-detail-sticky-header.is-condensed .wo-detail-header-tools,
  .wo-detail-sticky-header.is-condensed .wo-detail-header-completion { display: none; }
}

.wo-general-due-date-field + .wo-general-priority-field { margin-top: 4px; }
.wo-general-priority-field legend { margin-bottom: 7px; }


/* UX C4: the existing work-entry contract is presented in two compact steps. */
.manual-work-entry-modal .manual-segment-panels {
  display: grid;
  gap: 10px;
}

.manual-work-entry-modal .manual-confirm-section.active {
  display: grid;
  gap: 10px;
}

.manual-work-entry-modal .manual-entry-optional {
  overflow: hidden;
  border: 1px solid var(--ds-primary-border);
  border-radius: 8px;
  background: var(--ds-card);
}

.manual-work-entry-modal .manual-entry-optional > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.manual-work-entry-modal .manual-entry-optional[open] > summary {
  border-bottom: 1px solid var(--ds-primary-border);
  background: var(--ds-primary-light);
}

.manual-work-entry-modal .manual-entry-optional-content {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.manual-work-entry-modal [data-manual-scrap-context][hidden] { display: none !important; }

/* UX Paket 2 / T1: compact phone heads and shared secondary-action menus. */
.materials-header-more,
.station-header-more,
.items-mobile-filter-details { display: none; }
.materials-header-more,
.station-header-more { position: relative; }
.materials-header-more > summary,
.station-header-more > summary { list-style: none; }
.materials-header-more > summary::-webkit-details-marker,
.station-header-more > summary::-webkit-details-marker { display: none; }
.materials-header-more > div,
.station-header-more > div { position: absolute; z-index: 90; top: calc(100% + 6px); right: 0; display: grid; min-width: 210px; gap: 4px; padding: 7px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); box-shadow: 0 14px 32px rgba(15,38,58,.16); }
.materials-header-more > div > button,
.station-header-more > div > button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-heading); font: inherit; font-weight: 700; text-align: left; }
@media (min-width: 761px) {
  .stations-filter-card > .filter-primary-row { display: grid; grid-template-columns: minmax(0,1.8fr) repeat(2,minmax(0,1fr)) auto auto; grid-column: 1 / -1; align-items: end; gap: 10px; }
  .stations-filter-card > .filter-extra-row { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  html, body, .app-shell, .content, #section-root { max-width: 100%; overflow-x: hidden; }
  .content > .topbar,
  .module-page-header,
  .materials-head,
  .stations-card-header.module-page-header { min-height: 40px !important; margin-bottom: 8px !important; padding: 0 !important; }
  :is(.content > .topbar .title-block, .module-title-block) > h1 { font-size: 24px !important; line-height: 1.1; }
  :is(.content > .topbar .title-block, .module-title-block) > h1 + span { display: none !important; }
  .materials-head,
  .stations-card-header.module-page-header { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
  .materials-head-actions,
  .stations-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: auto; }
  .materials-head-actions > .materials-wide-action,
  .stations-card-actions > .station-wide-action { display: none !important; }
  .materials-header-more,
  .station-header-more { display: block; }
  .materials-header-more > summary,
  .station-header-more > summary { width: 40px; min-width: 40px; padding: 0; }
  .materials-head-actions > .primary-button,
  .stations-card-actions > .primary-button { width: auto; min-width: 40px; padding-inline: 11px; white-space: nowrap; }

  /* Collapsed = search + one filter button. Expanded = the same controls in a bottom sheet. */
  .filter-disclosure-panel > .filter-primary-row { display: grid !important; grid-template-columns: minmax(0,1fr) 44px !important; gap: 7px !important; align-items: end; }
  .filter-disclosure-panel > .filter-primary-row > label:not(:first-child),
  .filter-disclosure-panel > .filter-primary-row > .filter-reset-button { display: none !important; }
  .filter-disclosure-panel > .filter-primary-row > .filter-disclosure-button { position: relative; width: 44px; min-width: 44px; max-width: 44px; padding: 0; overflow: visible; }
  .filter-disclosure-button .filter-active-count { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--ds-card); border-radius: 999px; background: var(--ds-primary); color: #fff; font-size: 10px; line-height: 1; }
  .filter-disclosure-panel > .filter-primary-row > .filter-disclosure-button > span,
  .filter-disclosure-panel > .filter-primary-row > .filter-disclosure-button > svg:last-child { display: none; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) { position: fixed !important; z-index: 2400; inset: auto 0 0 !important; display: grid !important; width: 100vw !important; max-width: 100vw !important; max-height: min(82dvh,680px); gap: 10px !important; margin: 0 !important; padding: 14px 14px max(14px,env(safe-area-inset-bottom)) !important; border: 0 !important; border-top: 1px solid var(--ds-border) !important; border-radius: 16px 16px 0 0 !important; background: var(--ds-card) !important; box-shadow: 0 -18px 50px rgba(8,27,43,.28) !important; overflow-y: auto; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; padding-right: 38px; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > label,
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-reset-button { display: grid !important; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > label:first-child { grid-column: 1 / -1; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button { position: absolute; top: 10px; right: 12px; width: 36px; min-width: 36px; height: 36px; min-height: 36px !important; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button > svg:first-child { display: none; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button > svg:last-child { display: block; transform: rotate(180deg); }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-extra-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; overflow: visible; }
  .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) :is(label,input,select) { min-width: 0; max-width: 100%; }
  .stations-filter-card { display: block !important; }
  .stations-filter-extra .stations-mobile-sort { display: contents; }
  .stations-filter-extra .stations-mobile-sort > div { display: none; }

  .items-runtime-toolbar { grid-template-columns: minmax(0,1fr) auto auto !important; gap: 7px !important; padding: 8px !important; }
  .items-runtime-toolbar > label:not(.items-toolbar-search),
  .items-runtime-toolbar > .items-toolbar-actions > .secondary-button { display: none !important; }
  .items-runtime-toolbar > .items-toolbar-actions { width: auto; }
  .items-runtime-toolbar > .items-toolbar-actions > .primary-button { white-space: nowrap; }
  .items-mobile-filter-details { display: block; grid-column: 2; grid-row: 1; }
  .items-mobile-filter-details > summary { width: 42px; min-width: 42px; padding: 0; list-style: none; }
  .items-mobile-filter-details > summary::-webkit-details-marker { display: none; }
  .items-mobile-filter-details > summary span,
  .items-mobile-filter-details > summary svg:last-child { display: none; }
  .items-mobile-filter-sheet { position: fixed; z-index: 2400; inset: auto 0 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 16px 14px max(14px,env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-border); border-radius: 16px 16px 0 0; background: var(--ds-card); box-shadow: 0 -18px 50px rgba(8,27,43,.28); }
  .items-mobile-filter-sheet > strong { grid-column: 1 / -1; }
  .items-mobile-filter-sheet label { display: grid; gap: 5px; min-width: 0; }
  .work-order-mobile-filter-details[open] > .work-order-mobile-filter-grid { position: fixed; z-index: 2400; inset: auto 0 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100vw; max-height: min(82dvh,680px); padding: 16px 14px max(14px,env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-border); border-radius: 16px 16px 0 0; background: var(--ds-card); box-shadow: 0 -18px 50px rgba(8,27,43,.28); overflow-y: auto; }

  /* KPI values become compact, still-clickable chips. */
  .work-orders-screen .work-order-kpis,
  .product-kpis.product-kpi-grid,
  .team-overview .team-kpi-grid { display: flex !important; gap: 6px !important; margin-bottom: 8px !important; overflow-x: auto; scrollbar-width: none; }
  .work-orders-screen .work-order-kpis::-webkit-scrollbar,
  .product-kpis.product-kpi-grid::-webkit-scrollbar { display: none; }
  .work-orders-screen .work-order-kpis > *,
  .product-kpis.product-kpi-grid > *,
  .team-overview .team-kpi-grid > * { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 34px !important; padding: 6px 10px !important; gap: 6px !important; border-radius: 999px !important; }
  .work-order-kpi .kpi-icon,
  .product-kpi > .kpi-icon { display: none !important; }
  .work-order-kpi-copy,
  .product-kpi > span { display: inline-flex !important; flex-direction: row !important; align-items: baseline; gap: 4px !important; }
  .work-order-kpi-copy strong,
  .product-kpi strong { font-size: 14px !important; }
  .work-order-kpi-copy span,
  .product-kpi span { font-size: 10px !important; white-space: nowrap; }

  /* List cards follow the shared .nx-row-card contract in ui-v2.css. */
  .station-mobile-card .station-mobile-description,
  .material-card dl > div:nth-child(n+5),
  .shipment-card dl > div:nth-child(n+5),
  .archive-card dl > div:nth-child(n+5) { display: none !important; }

  .nx-dashboard-overview .nx-command-primary-kpis { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px; }
  .nx-dashboard-overview .nx-command-kpi { min-height: 72px !important; padding: 9px !important; }
  .nx-dashboard-overview .nx-command-kpi em { font-size: 21px !important; }
  .nx-dashboard-overview .nx-command-analytics-card { padding: 10px !important; }
}

/* Assignment workspace: operation overview + one focused worker selection panel. */
.nx-assignment-redesign{--assignment-accent:var(--ds-primary);border:1px solid var(--ds-border);border-radius:var(--ds-radius-modal);padding:0;overflow:hidden;background:var(--ds-card)}
.nx-assignment-redesign.operator-batch-modal{width:min(1120px,calc(100vw - 32px));height:min(790px,calc(100dvh - 32px));max-height:calc(100dvh - 32px)}
.nx-assignment-redesign.operator-assignment-modal{width:min(800px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.nx-assignment-redesign .operator-assignment-header{padding:20px 24px;border-bottom:1px solid var(--ds-border);background:var(--ds-card);flex:none}
.nx-assignment-redesign .operator-assignment-header h2{font-size:22px;letter-spacing:-.025em}
.nx-assignment-redesign .operator-assignment-header p{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.nx-assignment-redesign .operator-assignment-header .icon-button{flex-shrink:0}
.nx-assignment-redesign .operator-batch-body{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;padding:16px 20px;overflow:hidden;background:var(--ds-bg)}
.nx-assignment-redesign .operator-batch-completeness{border:0;border-radius:0;background:none;padding:0;gap:12px;flex-shrink:0;align-items:center}
.nx-assignment-redesign .operator-batch-completeness strong{font-size:14px;color:var(--ds-heading)}
.nx-assignment-redesign .operator-batch-completeness span{font-size:12px;font-weight:500}
.nx-assignment-redesign .operator-assignment-toolbar{padding:0;border:0;border-radius:0;background:none;flex:none;gap:14px}
.nx-assignment-redesign .operator-assignment-toolbar input[type=search],.nx-assignment-redesign .operator-assignment-toolbar input:not([type]){min-height:38px}
.nx-assignment-redesign .operator-assignment-toolbar .operator-recommended-filter{padding:0 10px;min-height:38px;border:1px solid var(--ds-border);border-radius:8px;background:var(--ds-card)}
.nx-assignment-redesign .operator-assignment-workspace{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.25fr);gap:16px;flex:1;min-height:0;min-width:0}
.nx-assignment-redesign .operator-batch-list{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:1px 5px 4px 1px;scrollbar-gutter:stable}
.nx-assignment-redesign .operator-batch-operation{flex:none;border:1px solid var(--ds-border);border-radius:10px;box-shadow:none;overflow:visible;background:var(--ds-card)}
.nx-assignment-redesign .operator-batch-operation.expanded{border-color:var(--ds-primary);box-shadow:inset 3px 0 var(--ds-primary);background:rgba(var(--ds-primary-rgb),.04)}
.nx-assignment-redesign .operator-batch-summary{display:grid;grid-template-columns:26px minmax(0,1fr) 16px;align-items:start;gap:10px;padding:13px;background:transparent;border-radius:10px}
.nx-assignment-redesign .operator-operation-index{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ds-bg);color:var(--ds-muted);font-size:12px;font-weight:800}
.nx-assignment-redesign .expanded .operator-operation-index{background:var(--ds-primary);color:#fff}
.nx-assignment-redesign .operator-operation-copy{display:grid;gap:4px;min-width:0}
.nx-assignment-redesign .operator-batch-summary strong,.nx-assignment-redesign .operator-batch-summary em{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
.nx-assignment-redesign .operator-batch-summary strong{font-size:14px;line-height:1.4}
.nx-assignment-redesign .operator-batch-summary em{font-size:12px;font-weight:500}
.nx-assignment-redesign .operator-batch-summary>svg{grid-column:3;grid-row:1;width:16px;height:16px;transform:none;margin-top:5px;color:var(--ds-primary)}
.nx-assignment-redesign .operator-batch-operation.expanded .operator-batch-summary>svg{transform:none}
.nx-assignment-redesign .operator-recommendation-preview{font-size:12px;line-height:1.45;color:var(--ds-primary-hover);overflow-wrap:anywhere}
.nx-assignment-redesign .operator-batch-selected{display:block;grid-column:auto;text-align:left;margin-top:3px}
.nx-assignment-redesign .operator-batch-selected b{display:block;max-width:none;border-radius:5px;padding:4px 7px;font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.nx-assignment-redesign .operator-batch-detail{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card);scrollbar-gutter:stable}
.nx-assignment-redesign .operator-batch-candidates{padding:18px;border:0;background:none;gap:18px}
.nx-assignment-redesign .operator-active-heading{display:grid;gap:5px;min-width:0}
.nx-assignment-redesign .operator-active-heading>small{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--ds-muted)}
.nx-assignment-redesign .operator-active-heading>h3{font-size:19px;line-height:1.35;text-transform:none;letter-spacing:-.02em;overflow-wrap:anywhere}
.nx-assignment-redesign .operator-active-heading>p{margin:0;color:var(--ds-muted);font-size:12px;line-height:1.5}
.nx-assignment-redesign .operator-selection-strip{display:grid;gap:8px;padding:11px 12px;background:var(--ds-bg);border:1px solid var(--ds-border);border-radius:8px}
.nx-assignment-redesign .operator-selection-strip>span{font-size:11px;font-weight:800;color:var(--ds-muted)}
.nx-assignment-redesign .operator-selection-strip>div{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.nx-assignment-redesign .operator-selection-strip b{font-size:12px;font-weight:700;color:var(--ds-primary-hover);background:rgba(var(--ds-primary-rgb),.09);padding:4px 8px;border-radius:5px;overflow-wrap:anywhere}
.nx-assignment-redesign .operator-selection-strip small{font-size:12px;color:var(--ds-muted)}
.nx-assignment-redesign .operator-recommendation-note{margin:0;font-size:12px;line-height:1.5;color:var(--ds-muted)}
.nx-assignment-redesign .operator-recommendation-group,.nx-assignment-redesign .operator-other-group{display:grid;gap:9px;min-width:0}
.nx-assignment-redesign .operator-recommendation-group>header,.nx-assignment-redesign .operator-other-group>header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.nx-assignment-redesign .operator-recommendation-group h3,.nx-assignment-redesign .operator-other-group h3{margin:0;font-size:13px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ds-heading)}
.nx-assignment-redesign .operator-recommendation-group>header>span,.nx-assignment-redesign .operator-other-group>header>span{font-size:11px;color:var(--ds-muted)}
.nx-assignment-redesign .operator-picker-list{display:grid;grid-template-columns:1fr;gap:8px}
.nx-assignment-redesign .operator-picker-row{margin:0;min-width:0;border:1px solid var(--ds-border);border-radius:9px;background:var(--ds-card);box-shadow:none;padding:11px 12px;transition:background .12s,border-color .12s}
.nx-assignment-redesign .operator-picker-row:hover{border-color:rgba(var(--ds-primary-rgb),.45)}
.nx-assignment-redesign .operator-picker-row.is-selected{border-color:var(--ds-primary);background:rgba(var(--ds-primary-rgb),.06);box-shadow:inset 3px 0 var(--ds-primary)}
.nx-assignment-redesign .operator-picker-row strong{font-size:14px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.nx-assignment-redesign .operator-picker-row em{font-size:11px;line-height:1.4;font-style:normal;font-weight:700;color:var(--ds-primary-hover)}
.nx-assignment-redesign .operator-picker-row small{font-size:11px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.nx-assignment-redesign .operator-picker-row input[type=checkbox]{width:19px;height:19px;accent-color:var(--ds-primary);flex-shrink:0}
.nx-assignment-redesign .operator-load-clear{padding-left:29px;color:var(--ds-muted)}
.nx-assignment-redesign .operator-assignment-actions{flex:none;margin:0;padding:14px 20px;border-top:1px solid var(--ds-border);background:var(--ds-card)}
.nx-assignment-redesign .operator-batch-empty{padding:20px;font-size:13px;line-height:1.5}
.nx-assignment-redesign button:focus-visible,.nx-assignment-redesign input:focus-visible{outline:2px solid var(--ds-primary);outline-offset:3px}
@media(max-width:760px){
 .nx-assignment-redesign.operator-batch-modal,.nx-assignment-redesign.operator-assignment-modal{width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px)}
 .nx-assignment-redesign .operator-assignment-header{padding:16px}
 .nx-assignment-redesign .operator-assignment-header h2{font-size:20px}
 .nx-assignment-redesign .operator-batch-body{padding:12px;overflow:auto;display:block}
 .nx-assignment-redesign .operator-batch-completeness{margin-bottom:12px;align-items:flex-start}
 .nx-assignment-redesign .operator-assignment-toolbar{margin-bottom:12px;flex-wrap:wrap}
 .nx-assignment-redesign .operator-assignment-workspace{grid-template-columns:1fr;gap:12px}
 .nx-assignment-redesign .operator-batch-list{max-height:220px;padding-right:3px}
 .nx-assignment-redesign .operator-batch-detail{overflow:visible}
 .nx-assignment-redesign .operator-batch-candidates{padding:14px}
 .nx-assignment-redesign .operator-assignment-actions{padding:12px}
 .nx-assignment-redesign .operator-assignment-actions button{flex:1;min-width:0;justify-content:center}
 .nx-assignment-redesign .operator-assignment-toolbar .operator-recommended-filter{align-self:flex-start}
}

/* Existing assignment editing uses the same operation / worker workspace. */
.nx-assignment-redesign.operator-assignment-modal{width:min(1120px,calc(100vw - 32px));height:min(790px,calc(100dvh - 32px))}
.nx-assignment-redesign .operator-assignment-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px 20px;overflow:hidden;background:var(--ds-bg)}
.nx-assignment-redesign .operator-edit-context{display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0;overflow:auto;padding:18px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card)}
.nx-assignment-redesign .operator-edit-detail{display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0;overflow:auto;padding:18px;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-card);scrollbar-gutter:stable}
.nx-assignment-redesign .operator-edit-detail .operator-assignment-toolbar{flex-direction:row;flex-wrap:wrap;align-items:end}
.nx-assignment-redesign .operator-edit-detail .operator-assignment-toolbar>label:first-child{flex-basis:100%}
.nx-assignment-redesign .operator-edit-detail .operator-assignment-choices{display:grid;gap:16px}
@media(max-width:760px){
 .nx-assignment-redesign.operator-assignment-modal{width:calc(100vw - 16px);height:auto}
 .nx-assignment-redesign .operator-assignment-body{display:block;overflow:auto;padding:12px}
 .nx-assignment-redesign .operator-edit-context,.nx-assignment-redesign .operator-edit-detail{overflow:visible;padding:14px;gap:12px}
 .nx-assignment-redesign .operator-edit-context{margin-bottom:0}
}

/* Keep assignment filters aligned with the adjacent input/select control. */
.nx-assignment-redesign .operator-assignment-toolbar .operator-recommended-filter,
.nx-assignment-redesign .operator-assignment-toolbar .operator-workload-sort select,
.nx-assignment-redesign .operator-assignment-toolbar input[type=search],
.nx-assignment-redesign .operator-assignment-toolbar input:not([type]){box-sizing:border-box;height:44px;min-height:44px}
.nx-assignment-redesign .operator-assignment-toolbar .operator-recommended-filter{flex:none;margin:0}

.universal-import-modal .universal-import-currency-confirmation {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.universal-import-modal .universal-import-currency-confirmation input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px !important;
  max-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--ds-primary);
}

.universal-import-result-details { border: 1px solid var(--ds-border, #d5e2ee); border-radius: 8px; padding: 12px; margin: 12px 0; }
.universal-import-result-details > summary { cursor: pointer; font-weight: 600; }
.universal-import-result-details > .excel-preview-rows { max-height: 320px; overflow: auto; margin-top: 12px; }

/* Machine documentation and service attachments use the existing modal shell. */
.machine-detail-tabs { overflow-x: auto; white-space: nowrap; }
.machine-attachment-upload { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--ds-border); }
.machine-attachment-upload > small, .machine-attachment-copy small { color: var(--ds-text-light); }
.machine-attachment-list { display: grid; gap: 0; }
.machine-attachment-card { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ds-border); min-width: 0; }
.machine-attachment-thumb { width: 92px; height: 76px; flex: 0 0 92px; padding: 0; border: 1px solid var(--ds-border); border-radius: 8px; overflow: hidden; background: var(--ds-bg); cursor: pointer; }
.machine-attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.machine-attachment-file-icon { width: 32px; flex: 0 0 32px; color: var(--ds-text-light); }
.machine-attachment-copy { display: grid; gap: 6px; min-width: 0; flex: 1; }
.machine-attachment-copy strong, .machine-attachment-copy p, .machine-attachment-copy small { overflow-wrap: anywhere; }
.machine-attachment-copy p { margin: 0; white-space: pre-wrap; }
.machine-attachment-archive { margin-top: 16px; }
.machine-attachment-archive > summary { cursor: pointer; padding: 8px 0; }
@media(max-width:600px) {
  .machine-detail-tabs { padding-inline: 12px; }
  .machine-detail-tabs button { flex: 0 0 auto; }
  .machine-attachment-card { flex-wrap: wrap; }
  .machine-attachment-thumb { width: 100%; height: 140px; flex-basis: 100%; }
  .machine-attachment-copy { flex-basis: 70%; }
}

.machine-service-next { margin: 0 0 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-border); overflow-wrap: anywhere; }
.machine-service-next small { display: block; margin-top: 4px; color: var(--ds-text-light); }
.machine-service-badge { display: flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 5px auto 0; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 650; line-height: 1.4; white-space: normal; }
.machine-service-badge.upcoming { color: #854d0e; background: #fef3c7; }
.machine-service-badge.overdue { color: #991b1b; background: #fee2e2; }
.machine-service-badge svg { width: 13px; height: 13px; flex: 0 0 13px; }
.machine-next-service-cell { text-align: center; font-variant-numeric: tabular-nums; }
.machine-next-service-empty { color: var(--ds-text-light); }
.machine-mobile-card .machine-next-service-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; text-align: left; }
.machine-mobile-card .machine-service-badge { margin: 0; }
.machine-master-form .machine-service-completion { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid rgba(var(--ds-primary-rgb), .25); border-radius: 8px; background: rgba(var(--ds-primary-rgb), .05); font-size: 13px; cursor: pointer; }
.machine-master-form .machine-service-completion input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin: 1px 0 0; }
.machine-service-completion > span { display: grid; gap: 2px; }
.machine-service-completion small { color: var(--ds-text-light); }
.machine-service-modal .iso-week-hint { display: none; }
.machine-service-entry[open] .machine-service-summary { display: none; }
.machine-master-modal .empty-state { min-height: 0; padding: 28px 16px; gap: 6px; align-content: center; }
.machine-master-modal .empty-state :is(h3, p) { margin: 0; }
.machine-service-cost-missing { color: var(--ds-text-light); font-size: 12px; }
.machine-attachment-selection { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg); }
.machine-attachment-selection p { margin: 0; overflow-wrap: anywhere; }
/* Same dialog size on every machine tab, so switching tabs does not move the window. */
.modal-backdrop.machine-modal-backdrop > .machine-master-modal:has(.machine-detail-tabs) { height: min(680px, calc(100dvh - 32px)); }
.machine-master-modal:has(.machine-detail-tabs) > .machine-master-form,
.machine-master-modal:has(.machine-detail-tabs) > .machine-service-body,
.machine-master-modal:has(.machine-detail-tabs) > .machine-service-editor-body { flex: 1 1 auto; align-content: start; }

/* Teren */
.field-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: auto; }
.field-table th, .field-table td { text-align: left; vertical-align: middle; }
.field-table th { white-space: nowrap; }
.field-table th:last-child, .field-table td:last-child { width: 64px; text-align: center; }
.field-job-row { cursor: pointer; }
.field-job-row:hover, .field-job-row:focus-visible { background: rgba(var(--ds-primary-rgb), .045); box-shadow: inset 3px 0 0 var(--ds-primary); outline: 0; }
.field-cell-sub { display: block; margin-top: 3px; color: var(--ds-text-light); font-size: 11.5px; }
.field-term-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.field-kind { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.field-kind svg { width: 15px; height: 15px; color: var(--ds-primary); }
.field-status-cell { white-space: nowrap; }
.field-status-badge { display: inline-flex; padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.field-status-badge.warning { color: #854d0e; background: #fef3c7; }
.field-status-badge.info { color: #1e4f7a; background: #e3eef8; }
.field-status-badge.success { color: #166534; background: #dcfce7; }
.field-status-badge.muted { color: var(--ds-text-light); background: var(--ds-bg); }
.field-status-badge + .field-status-badge { margin-left: 4px; }
.delivery-receipt-body { display: grid; gap: 12px; }
.field-production { font-size: 12px; white-space: nowrap; }
.field-production.ready { color: #166534; font-weight: 700; }
.field-production.in_production { color: var(--ds-text-light); }
.field-warning { display: flex; align-items: center; gap: 4px; width: fit-content; margin-top: 5px; padding: 2px 7px; border-radius: 6px; color: #991b1b; background: #fee2e2; font-size: 11px; font-weight: 650; }
.field-warning svg { width: 12px; height: 12px; }
.field-filter-card .filter-primary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.field-view-toggle { display: inline-flex; justify-self: end; border: 1px solid var(--ds-border); border-radius: 8px; overflow: hidden; }
.field-view-toggle button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; background: var(--ds-white, #fff); color: var(--ds-text); font-weight: 650; cursor: pointer; }
.field-view-toggle button + button { border-left: 1px solid var(--ds-border); }
.field-view-toggle button.active { background: var(--ds-primary); color: #fff; }
.field-view-toggle svg { width: 15px; height: 15px; }
.field-calendar { padding: 14px; }
.field-calendar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.field-calendar-nav strong { margin-left: 6px; }
.field-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.field-calendar-day { min-width: 0; min-height: 140px; padding: 8px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg); }
.field-calendar-day.today { border-color: var(--ds-primary); box-shadow: inset 0 3px 0 var(--ds-primary); }
.field-calendar-day header { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: var(--ds-text-light); }
.field-calendar-day header strong { color: var(--ds-heading); }
.field-calendar-empty { margin: 0; color: var(--ds-text-light); text-align: center; }
.field-calendar-job { display: grid; gap: 2px; width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-primary); border-radius: 6px; background: var(--ds-white, #fff); color: var(--ds-text); font-size: 11.5px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.field-calendar-job.installation { border-left-color: #b45309; }
.field-calendar-job.conflict { border-color: #dc2626; border-left-color: #dc2626; }
.field-calendar-job strong { font-size: 12px; }
.field-calendar-job small { color: var(--ds-text-light); }
.field-unscheduled { margin-top: 14px; }
.field-unscheduled h3 { margin: 0 0 6px; font-size: 13px; }
.field-unscheduled > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 8px; }
.field-job-form { align-content: start; }
.field-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 8px; }
.field-crew legend { padding: 0 4px; font-weight: 750; color: var(--ds-heading); }
.field-crew-member { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.machine-master-form .field-crew-member input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; flex: 0 0 17px; }
.field-crew-member span { display: grid; }
.field-crew-member small { color: var(--ds-text-light); font-size: 11.5px; }
.field-navigation { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.field-qr { display: grid; justify-items: center; gap: 4px; margin: 0 0 0 auto; }
.field-qr svg { width: 120px; height: 120px; }
.field-qr figcaption { color: var(--ds-text-light); font-size: 11px; }
.field-job-done-note { margin: 0; padding: 10px 20px; color: #166534; background: #dcfce7; font-size: 13px; }
@media (max-width: 760px) {
  .field-filter-card .filter-primary-row { grid-template-columns: minmax(0, 1fr); }
  .field-view-toggle { justify-self: stretch; }
  .field-view-toggle button { flex: 1; justify-content: center; }
  .field-calendar-grid { grid-template-columns: minmax(0, 1fr); }
  .field-calendar-day { min-height: 0; }
  .field-calendar-day:has(.field-calendar-empty) { display: none; }
  .field-qr { margin-left: 0; }
}

.list-action-menu .list-action-menu-link { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-text); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.list-action-menu .list-action-menu-link { text-decoration: none; }
.list-action-menu .list-action-menu-link:hover, .list-action-menu .list-action-menu-link:focus-visible { background: var(--ds-bg-soft); outline: 2px solid rgba(var(--ds-primary-rgb),.18); }
.list-action-menu .list-action-menu-link svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ds-primary); }
.list-action-menu-link.is-disabled, .field-navigation-link.is-disabled { opacity: .5; cursor: not-allowed; }
.field-navigation-link { text-decoration: none; }
.wo-flow { display: grid; gap: 12px; }
.wo-flow-method { margin: 0; color: var(--ds-text-light); }
.wo-flow-method strong { color: var(--ds-heading); }
.wo-field-block { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg); }
.wo-field-block > button { margin-left: auto; }
.wo-flow-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.wo-flow-steps li { position: relative; display: grid; gap: 2px; padding: 0 0 12px 22px; color: var(--ds-text-light); }
.wo-flow-steps li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border: 2px solid var(--ds-border); border-radius: 50%; background: var(--ds-white, #fff); }
.wo-flow-steps li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--ds-border); }
.wo-flow-steps li.reached { color: var(--ds-text); }
.wo-flow-steps li.reached::before { border-color: var(--ds-primary); background: var(--ds-primary); }
.wo-flow-steps li strong { font-size: 13px; }
.wo-flow-steps li span { font-size: 12.5px; }
.archive-shipping-method { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--ds-text-light); font-size: 11.5px; white-space: nowrap; }
.archive-shipping-method svg { width: 13px; height: 13px; }
@media (max-width: 760px) { .wo-field-block > button { margin-left: 0; } }
.field-calendar-nav .field-day-plan-button { margin-left: auto; }
.field-day-plan-form { padding: 4px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .field-calendar-nav .field-day-plan-button { margin-left: 0; width: 100%; } .field-day-plan-form { grid-template-columns: minmax(0, 1fr); } }
.fleet-toolbar { display: flex; justify-content: flex-end; padding: 0 0 12px; }
.fleet-toolbar:empty { display: none; }
.vehicles-table { min-width: 1120px; }
.vehicle-registration { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.vehicle-deadline-kind { display: block; color: var(--ds-text-light); font-size: 11px; }
.vehicle-deadline-status { color: var(--ds-text-light); font-size: 11.5px; }
.vehicle-deadline-status.upcoming { color: #854d0e; font-weight: 650; }
.vehicle-deadline-status.overdue { color: #991b1b; font-weight: 650; }
@media (max-width: 760px) { .fleet-toolbar { justify-content: stretch; } .fleet-toolbar > button { width: 100%; justify-content: center; } }