/* NormaX UI v2 — shared visual authority. Presentation only: no workflow or data rules live here. */

:root {
  --nx-v2-canvas: #f5f8fb;
  --nx-v2-surface: #ffffff;
  --nx-v2-surface-soft: #f8fbfd;
  --nx-v2-navy: #0a1931;
  --nx-v2-navy-soft: #1a3d63;
  --nx-v2-blue: #4a7fa7;
  --nx-v2-blue-soft: #eaf3f9;
  --nx-v2-border: #dce6ee;
  --nx-v2-muted: #637c91;
  --nx-v2-radius-sm: 8px;
  --nx-v2-radius-md: 12px;
  --nx-v2-radius-lg: 16px;
  --nx-v2-table-head-size: 10.5px;
  --nx-v2-table-body-size: 13px;
  --nx-v2-table-cell-y: 9px;
  --nx-v2-table-cell-x: 10px;
  --nx-v2-tab-height: 44px;
  --nx-v2-tab-font-size: 13px;
  --nx-v2-icon-size: 18px;
  --nx-v2-icon-stroke: 1.65;
  --nx-v2-field-height: 44px;
  --nx-v2-field-border: #aebfcd;
  --nx-v2-field-border-hover: #819eb3;
  --nx-v2-modal-body: #f6f9fb;
  --nx-v2-modal-gap: 12px;
}

html {
  background: var(--nx-v2-canvas);
}

body {
  color: var(--nx-v2-navy);
  background: var(--nx-v2-canvas);
  font-family: var(--ds-font-sans);
  font-variant-numeric: tabular-nums;
}

body,
button,
input,
select,
textarea {
  letter-spacing: -0.01em;
}

svg {
  stroke-width: 1.75;
}

.app-shell {
  grid-template-columns: 264px minmax(0, 1fr);
  background: var(--nx-v2-canvas);
}

.sidebar {
  width: 264px;
  gap: 14px;
  padding: 20px 16px 84px;
  background: var(--nx-v2-navy);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.sidebar::before {
  display: none;
}

.sidebar::after {
  background: rgba(255, 255, 255, 0.07);
}

.sidebar-brand {
  padding: 2px 10px 6px;
}

.sidebar-brand img {
  max-width: 176px;
  max-height: 40px;
  filter: brightness(0) invert(1);
}

.company-locked-name {
  height: 40px;
  min-height: 40px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--nx-v2-radius-sm);
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}

.nav-list {
  gap: 2px;
}

.nav-group-label {
  display: block;
  margin: 9px 12px 3px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
}

.nav-list > .nav-group-label + button.nav-group-start { margin-top: 0; }

.nav-list button,
.sidebar-footer button {
  gap: 11px;
  min-height: 40px;
  border: 0;
  border-radius: var(--nx-v2-radius-sm);
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 550;
}

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

.nx-menu-image-icon {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  opacity: 0.82;
}

.nx-menu-image-icon.menu-production-conveyor {
  -webkit-mask-image: url("/assets/icons/menu-production-conveyor.svg");
  mask-image: url("/assets/icons/menu-production-conveyor.svg");
}

.nx-menu-image-icon.menu-sales-handshake {
  -webkit-mask-image: url("/assets/icons/menu-sales-handshake.svg");
  mask-image: url("/assets/icons/menu-sales-handshake.svg");
}

/* Plan proizvodnje za lager: products to pick for one group order, with what covers the minimum. */
.product-stock-plan-body { display: grid; gap: 12px; align-content: start; overflow-x: hidden; }
.nx-stock-plan-rule { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 9px; background: var(--nx-v2-blue-soft, #eaf3f9); color: var(--nx-v2-navy, #0a1931); font-size: 12.5px; line-height: 1.45; }
.nx-stock-plan-rule svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--ds-primary); }
.nx-stock-plan-table { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: 12px; }
.nx-stock-plan-table table { width: 100%; min-width: 860px; table-layout: fixed; }
.nx-stock-plan-table th:nth-child(1) { width: 40px; }
.nx-stock-plan-table th:nth-child(2) { width: 24%; }
.nx-stock-plan-table th:nth-child(9) { width: 128px; }
.nx-stock-plan-table th:nth-child(n + 3):nth-child(-n + 8), .nx-stock-plan-table td.is-number { text-align: right; }
.nx-stock-plan-table td > strong, .nx-stock-plan-table td > small { display: block; overflow-wrap: anywhere; }
.nx-stock-plan-table td > small { margin-top: 2px; color: var(--ds-text-muted); font-size: 11.5px; }
.nx-stock-plan-table tr:not(.is-selected) td { color: var(--ds-text-muted); }
.nx-stock-plan-table td.is-muted, .nx-stock-plan-card .is-muted { color: var(--ds-text-muted); }
.nx-stock-plan-required strong { color: var(--ds-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.nx-stock-plan-table tr:not(.is-selected) .nx-stock-plan-required strong { color: var(--ds-text-muted); }
.nx-stock-plan-check { width: 17px; height: 17px; margin: 0; accent-color: var(--ds-primary); cursor: pointer; }
.nx-stock-plan-awaiting { color: #94600f; font-weight: 800; }
.nx-stock-plan-single { min-height: 32px; padding: 0 10px; white-space: nowrap; font-size: 12.5px; }
.nx-stock-plan-cards { display: none; }
.nx-stock-plan-waiting { display: grid; gap: 8px; padding: 12px; border: 1px solid #f0dfb8; border-radius: 12px; background: #fff8e8; }
.nx-stock-plan-waiting header { display: grid; gap: 3px; }
.nx-stock-plan-waiting h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: #75540d; font-size: 14px; }
.nx-stock-plan-waiting h3 svg { width: 16px; height: 16px; }
.nx-stock-plan-waiting p { margin: 0; color: #75540d; font-size: 12.5px; line-height: 1.45; }
.nx-stock-plan-waiting ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-stock-plan-waiting li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--ds-card, #fff); font-size: 13px; }
.nx-stock-plan-waiting li > span:nth-child(2) { color: var(--ds-text-muted); font-size: 12px; }
.product-stock-plan-footer { align-items: center; }
.nx-stock-plan-selection { margin-right: auto; color: var(--ds-text-muted); font-size: 13px; font-weight: 600; }
.stock-plan-work-order-source { display: grid; gap: 10px; }
.stock-plan-work-order-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .5fr); align-items: end; gap: 16px; }
.stock-plan-work-order-product + .stock-plan-work-order-product { padding-top: 10px; border-top: 1px solid var(--ds-border); }
.stock-plan-work-order-product > div:first-child { display: grid; gap: 3px; min-width: 0; }
.stock-plan-work-order-product > div:first-child strong { color: var(--ds-heading); }
.stock-plan-work-order-product > div:first-child span,
.stock-plan-work-order-source > p { margin: 0; color: var(--ds-text-muted); font-size: 12px; }

@media (max-width: 760px) {
  .nx-stock-plan-table { display: none; }
  .nx-stock-plan-cards { display: grid; gap: 9px; }
  .nx-stock-plan-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--ds-border); border-radius: 11px; background: var(--ds-card); }
  .nx-stock-plan-card:not(.is-selected) { background: var(--ds-bg-soft, #f8fbfd); }
  .nx-stock-plan-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .nx-stock-plan-card header label { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
  .nx-stock-plan-card header label > span { display: grid; gap: 2px; min-width: 0; }
  .nx-stock-plan-card header small { color: var(--ds-text-muted); font-size: 12px; overflow-wrap: anywhere; }
  .nx-stock-plan-card header .nx-stock-plan-required { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
  .nx-stock-plan-card header .nx-stock-plan-required small { font-size: 11px; }
  .nx-stock-plan-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; }
  .nx-stock-plan-card dl > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
  .nx-stock-plan-card dt { color: var(--ds-text-muted); }
  .nx-stock-plan-card dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
  .nx-stock-plan-single.is-card { width: 100%; }
  .nx-stock-plan-waiting li { grid-template-columns: minmax(0, 1fr) auto; }
  .nx-stock-plan-waiting li > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .product-stock-plan-footer .nx-stock-plan-selection { grid-column: 1 / -1; margin: 0; }
  .stock-plan-work-order-product { grid-template-columns: 1fr; align-items: stretch; }
}

.nav-list button.nav-group-start {
  margin-top: 9px;
}

.nav-list button.active {
  color: #ffffff;
  background: rgba(179, 207, 229, 0.16);
  box-shadow: inset 2px 0 0 #b3cfe5;
}

.nav-list button:hover,
.sidebar-footer button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.075);
  transform: none;
}

.sidebar-company-signature {
  position: fixed;
  right: auto;
  bottom: 20px;
  left: 16px;
  width: 232px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.72;
}

.sidebar-company-signature img {
  display: block;
  width: 128px;
  max-width: 100%;
  height: 26px;
  max-height: 26px;
  object-fit: contain;
}

.nav-problem-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-shadow: none;
  font-size: 10px;
}

.content {
  width: 100%;
  min-width: 0;
  padding: 34px clamp(26px, 3vw, 54px) 40px;
}

.content-wide {
  padding: 24px clamp(22px, 2.4vw, 38px) 34px;
}

.topbar {
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 26px;
}

.title-block h1,
.content-wide .title-block h1,
.module-title-block h1 {
  color: var(--nx-v2-navy);
  font-size: clamp(28px, 2.35vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.title-block span,
.module-title-block span {
  max-width: 760px;
  margin-top: 9px;
  color: var(--nx-v2-muted);
  font-size: 13px;
  line-height: 1.55;
}

.topbar-actions {
  gap: 8px;
}

.primary-button,
.secondary-button,
.compact-command,
.detail-action,
.open-row-button,
.open-card-button {
  border-radius: var(--nx-v2-radius-sm);
  box-shadow: none;
  letter-spacing: -0.01em;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.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(--nx-v2-blue);
  background: var(--nx-v2-blue);
  box-shadow: none;
}

.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(--nx-v2-navy-soft);
  background: var(--nx-v2-navy-soft);
  box-shadow: none;
  transform: none;
}

.secondary-button:hover,
.compact-command:hover,
.detail-action:hover {
  background: var(--nx-v2-blue-soft);
  transform: none;
}

input,
select,
textarea,
.field input,
.field select,
.field textarea {
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-sm);
  box-shadow: none;
}

.card,
.metric-card,
.dashboard-card,
.table-shell,
.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,
.ds-section-card {
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-md);
  box-shadow: none;
}

.kpi-card,
.work-kpi,
.product-kpi,
.problem-kpis .work-kpi {
  box-shadow: none;
}

.table-wrap,
.work-order-table-wrap-desktop,
.products-table-wrap,
.stations-table-wrap,
.team-table-wrap,
.analytics-table-wrap,
.ds-table-wrap {
  border-color: var(--nx-v2-border);
  box-shadow: none;
}

/* Data registers use a flat site-like header surface. Legacy module-specific
   gradients are intentionally neutralized by the shared visual authority. */
main table thead,
main table thead th {
  background: var(--nx-v2-surface-soft) !important;
  background-image: none !important;
}

/* Column alignment is semantic and the header always follows its cells.
   Descriptive values start left; compact operational values are centered. */
.work-orders-screen .work-orders-table :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(10)),
.shipment-table :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(8)),
.archive-table :is(th, td):is(:nth-child(1), :nth-child(2)),
.products-screen .products-table :is(th, td):is(:nth-child(1), :nth-child(2)),
.materials-table table :is(th, td):is(:nth-child(1), :nth-child(2)),
.stations-screen .stations-table:not(.team-data-table) :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(6)),
.team-overview .team-data-table :is(th, td):is(:nth-child(1), :nth-child(5), :nth-child(6)),
.customers-screen .customers-table :is(th, td):not(:nth-child(9)),
.notes-screen .notes-table-shell :is(th, td):is(:nth-child(1), :nth-child(3), :nth-child(4)) {
  text-align: left;
}

.work-orders-screen .work-orders-table th:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(10)) .sort-header,
.shipment-table th:is(:nth-child(1), :nth-child(2), :nth-child(8)) .sort-header,
.archive-table th:is(:nth-child(1), :nth-child(2)) .sort-header,
.products-screen .products-table th:is(:nth-child(1), :nth-child(2)) .sort-header,
.materials-table table th:is(:nth-child(1), :nth-child(2)) .sort-header,
.stations-screen .stations-table:not(.team-data-table) th:is(:nth-child(1), :nth-child(2), :nth-child(6)) .sort-header,
.team-overview .team-data-table th:is(:nth-child(1), :nth-child(5), :nth-child(6)) .sort-header,
.customers-screen .customers-table th:not(:nth-child(9)) .sort-header,
.notes-screen .notes-table-shell th:is(:nth-child(1), :nth-child(3), :nth-child(4)) .sort-header {
  justify-content: flex-start;
  text-align: left;
}

.work-orders-screen .work-orders-table :is(th, td):nth-child(11),
.shipment-table :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9)),
.archive-table :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)),
.products-screen .products-table :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11)),
.materials-table table :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(10), :nth-child(11)),
.stations-screen .stations-table:not(.team-data-table) :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(7)),
.team-overview .team-data-table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(7), :nth-child(8)),
.customers-screen .customers-table :is(th, td):nth-child(9),
.notes-screen .notes-table-shell :is(th, td):is(:nth-child(2), :nth-child(5), :nth-child(6)) {
  text-align: center;
}

.materials-table table :is(th, td):is(:nth-child(8), :nth-child(9)) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Customer hub tables have a semantic status column; the generic work-order
   positional alignment above must not move it left when columns are added. */
.work-orders-screen.customers-screen .customers-hub-table td.hub-col-status,
.work-orders-screen.customers-screen .customer-work-orders-table td.hub-col-status {
  text-align: center;
}

.materials-table table th:is(:nth-child(8), :nth-child(9)) .sort-header {
  justify-content: flex-end;
  text-align: right;
}

/* Product headers previously used a three-class centering selector. Keep the
   semantic descriptive columns left aligned at the same specificity. */
.products-screen .products-table.products-table-desktop thead th:is(:nth-child(1), :nth-child(2)),
.products-screen .products-table.products-table-landscape thead th:is(:nth-child(1), :nth-child(2), :nth-child(5)) {
  text-align: left;
}

.products-screen .products-table.products-table-desktop thead th:is(:nth-child(1), :nth-child(2)) .sort-header,
.products-screen .products-table.products-table-landscape thead th:is(:nth-child(1), :nth-child(2), :nth-child(5)) .sort-header {
  justify-content: flex-start;
  text-align: left;
}

/* Shared tab grammar. Primary navigation and in-card subnavigation use the
   same flat surface, type scale, underline, focus state and outline icons. */
.station-area-tabs,
.products-tabs,
.wo-detail-tabs,
.line-detail-tabs,
.global-problem-tabs,
.notes-tabs,
.analytics-tabs,
.material-detail-tabs,
.worker-tabs,
.worker-problem-subtabs,
.station-scope-tabs,
.operator-assignment-tabs {
  gap: 0;
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-sm);
  background: var(--nx-v2-surface);
  box-shadow: none;
  scrollbar-width: none;
}

.station-area-tabs::-webkit-scrollbar,
.products-tabs::-webkit-scrollbar,
.wo-detail-tabs::-webkit-scrollbar,
.line-detail-tabs::-webkit-scrollbar,
.global-problem-tabs::-webkit-scrollbar,
.notes-tabs::-webkit-scrollbar,
.analytics-tabs::-webkit-scrollbar,
.material-detail-tabs::-webkit-scrollbar,
.worker-tabs::-webkit-scrollbar,
.worker-problem-subtabs::-webkit-scrollbar,
.station-scope-tabs::-webkit-scrollbar,
.operator-assignment-tabs::-webkit-scrollbar {
  display: none;
}

.station-area-tabs > button,
.products-tabs > button,
.wo-detail-tabs > button,
.line-detail-tabs > button,
.global-problem-tabs > button,
.notes-tabs > button,
.analytics-tabs > button,
.material-detail-tabs > button,
.worker-tabs > button,
.worker-problem-subtabs > button,
.station-scope-tabs > button,
.operator-assignment-tabs > button {
  min-height: var(--nx-v2-tab-height);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  color: var(--nx-v2-muted);
  background: transparent;
  box-shadow: none;
  font-size: var(--nx-v2-tab-font-size);
  font-weight: 650;
}

.station-area-tabs > button.active,
.station-area-tabs > button[aria-selected="true"],
.products-tabs > button.active,
.products-tabs > button[aria-selected="true"],
.wo-detail-tabs > button.active,
.wo-detail-tabs > button[aria-selected="true"],
.line-detail-tabs > button.active,
.line-detail-tabs > button[aria-selected="true"],
.global-problem-tabs > button.active,
.global-problem-tabs > button[aria-selected="true"],
.notes-tabs > button.active,
.notes-tabs > button[aria-selected="true"],
.analytics-tabs > button.active,
.analytics-tabs > button[aria-selected="true"],
.material-detail-tabs > button.active,
.material-detail-tabs > button[aria-selected="true"],
.worker-tabs > button.active,
.worker-tabs > button[aria-selected="true"],
.worker-problem-subtabs > button.active,
.worker-problem-subtabs > button[aria-selected="true"],
.station-scope-tabs > button.active,
.station-scope-tabs > button[aria-selected="true"],
.operator-assignment-tabs > button.active,
.operator-assignment-tabs > button[aria-selected="true"] {
  border-bottom-color: var(--nx-v2-blue);
  color: var(--nx-v2-navy);
  background: var(--nx-v2-blue-soft);
  box-shadow: none;
}

.station-area-tabs > button svg,
.products-tabs > button svg,
.wo-detail-tabs > button svg,
.line-detail-tabs > button svg,
.global-problem-tabs > button svg,
.notes-tabs > button svg,
.analytics-tabs > button svg,
.material-detail-tabs > button svg,
.worker-tabs > button svg,
.worker-problem-subtabs > button svg,
.station-scope-tabs > button svg,
.operator-assignment-tabs > button svg {
  width: 16px;
  height: 16px;
  color: var(--nx-v2-blue);
  stroke-width: var(--nx-v2-icon-stroke);
}

/* KPI pictograms follow the public site's thin outline treatment. Semantic
   colour remains on warnings; the decorative coloured tile is removed. */
.work-orders-screen .work-order-kpi[class*="tone-"] .soft-icon,
:is(.products-screen, .team-overview) .product-kpi[class*="tone-"] .soft-icon,
.items-summary-metric .soft-icon,
.base-stat .soft-icon,
.wo-number-card > .soft-icon {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.work-orders-screen .work-order-kpi[class*="tone-"] .soft-icon svg,
:is(.products-screen, .team-overview) .product-kpi[class*="tone-"] .soft-icon svg,
.items-summary-metric .soft-icon svg,
.base-stat .soft-icon svg,
.wo-number-card > .soft-icon svg {
  width: var(--nx-v2-icon-size);
  height: var(--nx-v2-icon-size);
  stroke-width: var(--nx-v2-icon-stroke);
}

/* Filter disclosure contract: one calm primary row on desktop, with secondary
   criteria revealed intentionally instead of wrapping into accidental rows. */
.filter-disclosure-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.filter-disclosure-panel > .filter-primary-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.filter-disclosure-panel > .filter-primary-row > label {
  flex: 1 1 126px;
  min-width: 108px;
}

.filter-disclosure-panel > .filter-primary-row > :is(.work-search, .shipment-search, .archive-search, .product-search, .materials-search, .product-search-field),
.global-problem-filters > .filter-primary-row > label:first-child {
  flex: 1.8 1 230px;
  min-width: 190px;
}

.filter-disclosure-panel > .filter-primary-row > button {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

.filter-disclosure-panel > .filter-extra-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--nx-v2-border);
}

.filter-disclosure-panel > .filter-extra-row[hidden] {
  display: none;
}

.filter-disclosure-button svg:last-child {
  transition: transform 160ms ease;
}

.filter-disclosure-button.active svg:last-child {
  transform: rotate(180deg);
}

.filter-disclosure-button.active {
  border-color: var(--nx-v2-blue);
  color: var(--nx-v2-navy);
  background: var(--nx-v2-blue-soft);
}

.work-orders-screen .work-orders-desktop-filters.filter-disclosure-panel,
.products-toolbar.filter-disclosure-panel,
.products-filter-card.filter-disclosure-panel,
.shipment-filter-card.filter-disclosure-panel,
.archive-filter-card.filter-disclosure-panel,
.materials-toolbar.filter-disclosure-panel,
.notes-filter-card.filter-disclosure-panel,
.global-problem-filters.filter-disclosure-panel {
  grid-template-columns: minmax(0, 1fr);
}

.work-orders-screen .work-orders-desktop-filters.filter-disclosure-panel > .filter-primary-row,
.work-orders-screen .work-orders-desktop-filters.filter-disclosure-panel > .filter-extra-row {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 760px) {
  .filter-disclosure-panel > .filter-primary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-disclosure-panel > .filter-primary-row > :is(.work-search, .shipment-search, .archive-search, .product-search, .materials-search, .product-search-field),
  .global-problem-filters > .filter-primary-row > label:first-child {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .filter-disclosure-panel > .filter-primary-row > label,
  .filter-disclosure-panel > .filter-primary-row > button {
    width: 100%;
    min-width: 0;
  }

  .filter-disclosure-panel > .filter-extra-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* D1: Otpremu menjamo kroz standardni tihi meni, ne iz svake ćelije. */
.shipment-method-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  color: var(--ds-heading);
  font-weight: 700;
}

.shipment-method-value svg { width: 16px; height: 16px; flex: 0 0 auto; }

.list-action-menu-label {
  display: block;
  padding: 5px 10px 3px;
  color: var(--ds-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.list-action-menu-separator {
  display: block;
  height: 1px;
  margin: 5px 6px;
  background: var(--ds-border);
}

/* D3: globalni Problemi izlažu tip i prioritet bez širenja stranice. */
.global-problem-table .global-problem-col-item,
.global-problem-table .global-problem-col-description,
.global-problem-table .global-problem-col-activity {
  text-align: left;
}

.global-problem-table :is(.global-problem-col-item, .global-problem-col-description, .global-problem-col-activity) .sort-header {
  justify-content: flex-start;
  text-align: left;
}

.global-problem-table .global-problem-col-type .problem-type-chip,
.global-problem-table .global-problem-col-priority > span {
  max-width: 100%;
  white-space: nowrap;
}

@media (min-width: 981px) and (max-width: 1366px) {
  #section-root .global-problem-table .global-problem-col-date { width: 8% !important; }
  #section-root .global-problem-table .global-problem-col-order { width: 10% !important; }
  #section-root .global-problem-table .global-problem-col-item { width: 15% !important; }
  #section-root .global-problem-table .global-problem-col-type { width: 8% !important; }
  #section-root .global-problem-table .global-problem-col-priority { width: 8% !important; }
  #section-root .global-problem-table .global-problem-col-station { width: 10% !important; }
  #section-root .global-problem-table .global-problem-col-operator { width: 10% !important; }
  #section-root .global-problem-table .global-problem-col-description { width: 15% !important; }
  #section-root .global-problem-table .global-problem-col-status { width: 8% !important; }
  #section-root .global-problem-table .global-problem-col-activity { width: 8% !important; }
}

@media (max-width: 760px) {
  .global-problem-table tbody tr:not(.empty-row) {
    grid-template-areas: "rn status" "desc desc" "product product" "type priority" "date operator" !important;
  }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-date { display: block !important; grid-area: date; color: var(--ds-text-light); }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-order { display: block !important; grid-area: rn; font-size: 13px; }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-item { display: block !important; grid-area: product; color: var(--ds-text-light); }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-type { display: block !important; grid-area: type; overflow: visible; }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-priority { display: block !important; grid-area: priority; justify-self: end; overflow: visible; }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-station,
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-activity { display: none !important; }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-operator { display: block !important; grid-area: operator; justify-self: end; color: var(--ds-text-light); }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-description { display: -webkit-box !important; grid-area: desc; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ds-heading); font-size: 14px; font-weight: 650; line-height: 1.35; white-space: normal; }
  .global-problem-table tbody tr:not(.empty-row) .global-problem-col-status { display: block !important; grid-area: status; justify-self: end; overflow: visible; }
}

/* D4: PDF is the primary finalized-invoice action; payment and XML remain secondary. */
@media (max-width: 640px) {
  .invoice-editor-readonly-actions .invoice-editor-finalized-banner { grid-column: 1 / -1; grid-row: 1; }
  .invoice-editor-readonly-actions [data-action="invoice-editor-download-pdf"] { grid-column: 1 / -1; grid-row: 2; }
  .invoice-editor-readonly-actions [data-action="invoice-payments-open"] { grid-column: 1; grid-row: 3; }
  .invoice-editor-readonly-actions [data-action="invoice-editor-download-xml"] { grid-column: 2; grid-row: 3; }
}

/* Paket 2 QA fixes: one filter sheet, stable tablet actions and compact mobile identity rows. */
.mobile-filter-sheet-header,
.mobile-filter-sheet-footer,
.mobile-filter-sheet-backdrop { display: none; }

.problem-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, calc(100vw - 40px));
  max-height: min(860px, calc(100dvh - 40px));
  overflow: hidden;
}
.problem-detail-modal .problem-detail-modal-header { align-items: flex-start; }
/* A problem header includes a title and chips, not the single-line modal head.
   Keep its natural height above the scroll body at every breakpoint. */
#modal-root .runtime-problem-detail-modal > .problem-detail-modal-header {
  height: auto;
  min-height: 0;
  max-height: none;
  grid-template-columns: minmax(0, 1fr) auto;
}
#modal-root .runtime-problem-detail-modal .problem-detail-modal-title > h2 {
  grid-row: auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#modal-root .runtime-problem-detail-modal .problem-detail-modal-status {
  grid-row: auto;
  grid-column: auto;
  width: auto;
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#modal-root .runtime-problem-detail-modal .problem-detail-modal-status > * {
  flex: 0 0 auto;
  max-width: 100%;
}
#modal-root .runtime-problem-detail-modal .problem-modal-context { order: -1; }
.problem-detail-modal-title { display: grid; min-width: 0; gap: 7px; }
.problem-detail-modal-title > small { color: var(--ds-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.problem-detail-modal-title > h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.problem-detail-modal-status { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.problem-detail-modal-status .problem-type-chip { min-height: 28px; padding: 5px 8px; border-radius: 999px; background: var(--ds-neutral-bg, #eef3f7); color: var(--ds-heading); font-size: 10px; font-weight: 800; }
.problem-detail-modal-status .problem-type-chip svg { width: 14px; height: 14px; }
.problem-detail-modal-body { min-height: 0; overflow-y: auto; }
.problem-detail-modal-footer { justify-content: flex-end; }
.problem-empty-attachments { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: 9px; color: var(--ds-muted); }
.problem-empty-attachments button { border: 0; background: transparent; color: var(--ds-primary); font: inherit; font-weight: 750; cursor: pointer; }

@media (min-width: 761px) and (max-width: 1024px) {
  :is(.content > .topbar, .module-page-header, .materials-head, .stations-card-header.module-page-header) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  :is(.topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-end !important;
    width: auto !important;
  }
  :is(.topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) > :is(button, .primary-button, .secondary-button) {
    flex: 0 0 200px !important;
    width: 200px !important;
    min-width: 200px !important;
    height: 40px !important;
  }
}

@media (max-width: 760px) {
  html.mobile-filter-sheet-open,
  html.mobile-filter-sheet-open body { overflow: hidden !important; }
  html.mobile-filter-sheet-open .mobile-bottom-nav { display: none !important; }
  .mobile-filter-sheet-backdrop { position: fixed; z-index: 2390; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(7, 22, 36, .54); }

  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    padding: 0 !important;
  }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > label:not(:first-child),
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-reset-button { display: none !important; }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
  }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button > svg:first-child { display: block; }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button > svg:last-child { display: none; }

  #section-root .mobile-filter-sheet-surface,
  .mobile-filter-details[open] > .mobile-filter-sheet-surface {
    position: fixed !important;
    z-index: 2400 !important;
    inset: auto 0 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(78dvh, 680px) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 14px max(12px, 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 !important;
  }
  #section-root .mobile-filter-sheet-surface[hidden] { display: none !important; }
  .mobile-filter-sheet-header { position: sticky; z-index: 2; top: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin: 0 -14px; padding: 8px 14px; border-bottom: 1px solid var(--ds-border); background: var(--ds-card); }
  .mobile-filter-sheet-header strong { font-size: 16px; }
  .mobile-filter-sheet-footer { position: sticky; z-index: 2; bottom: calc(-1 * max(12px, env(safe-area-inset-bottom))); grid-column: 1 / -1; display: block; margin: 2px -14px 0; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-border); background: var(--ds-card); }
  .mobile-filter-sheet-footer > button { width: 100%; }
  .mobile-filter-sheet-surface > :is(label, .stations-mobile-sort) { min-width: 0; }
  .mobile-filter-sheet-surface .stations-mobile-sort { display: contents !important; }
  .mobile-filter-sheet-surface .stations-mobile-sort > div { display: none !important; }
  .global-problem-filters .global-problem-mobile-sort { display: contents !important; }
  .global-problem-filters .global-problem-mobile-sort > div { display: none !important; }

  .items-runtime-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px !important; grid-template-rows: auto auto auto !important; gap: 7px !important; }
  .items-runtime-toolbar > .items-toolbar-search { grid-column: 1 !important; grid-row: 1 !important; }
  .items-runtime-toolbar > .items-toolbar-search > span { display: none !important; }
  .items-runtime-toolbar > .items-mobile-filter-details { grid-column: 2 !important; grid-row: 1 !important; }
  .items-runtime-toolbar > .items-toolbar-actions { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; }
  .items-runtime-toolbar > .items-toolbar-actions > .primary-button { width: 100% !important; }
  .items-runtime-toolbar > .items-assignment-warning { grid-column: 1 / -1 !important; grid-row: 3 !important; margin: 0 !important; }

  .mobile-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  .stations-card-actions > .primary-button { width: auto !important; min-width: 40px !important; padding-inline: 11px !important; }
  .stations-card-actions > .primary-button > span { display: inline !important; }


  :is(.nx-content-tabs, .customers-area-tabs, .station-area-tabs, .global-problem-tabs, .work-order-kpis, .product-kpis, .team-kpi-grid) { scrollbar-width: none !important; }
  :is(.nx-content-tabs, .customers-area-tabs, .station-area-tabs, .global-problem-tabs, .work-order-kpis, .product-kpis, .team-kpi-grid)::-webkit-scrollbar { display: none !important; }
  .products-tabs { scroll-padding-inline: 12px; padding-right: 12px !important; }
  .products-tabs::after { content: ""; flex: 0 0 8px; }

  .problem-detail-backdrop { padding: 0 !important; overflow: hidden !important; }
  .problem-detail-modal { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .problem-detail-modal-header { padding: 12px 14px !important; }
  .problem-detail-modal-title > h2 { font-size: 17px; }
  .problem-detail-modal-body { padding: 10px 12px !important; }
  .problem-modal-context { order: -1; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .problem-detail-modal .problem-detail-grid-page { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .problem-detail-modal .problem-modal-overview-card,
  .problem-detail-modal .problem-activity-card { min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  .problem-detail-modal .problem-timeline { max-height: none !important; overflow: visible !important; }
  .problem-detail-modal-footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important; }
  .problem-detail-modal-footer > button { width: 100%; min-width: 0; }
  .problem-detail-modal-footer > button:only-child { grid-column: 1 / -1; }
}

.status-badge,
.status-tag,
.priority-badge,
.product-type-badge,
.assembly-position-badge,
.product-heading-badge,
.ds-badge {
  border-radius: 999px;
  box-shadow: none;
}

.modal-backdrop {
  background: rgba(10, 25, 49, 0.48);
}

.modal-panel,
.flow-modal,
.ds-modal-card {
  border: 1px solid #c9d7e1;
  border-radius: var(--nx-v2-radius-lg);
  background: var(--nx-v2-surface);
  box-shadow: 0 22px 56px rgba(10, 25, 49, 0.2);
}

.flow-modal-head,
.work-order-modal-head,
.modal-header {
  border-bottom-color: var(--nx-v2-border);
  padding: 16px 18px;
  background: var(--nx-v2-surface);
}

.flow-modal-title h2,
.work-order-modal-head h2,
.modal-header h2 {
  margin: 0;
  color: var(--nx-v2-navy);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.flow-modal-title p,
.work-order-modal-head p,
.modal-header p {
  margin: 3px 0 0;
  color: var(--nx-v2-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.flow-modal-title > span,
.work-order-modal-head small,
.modal-header small {
  color: var(--nx-v2-blue);
  letter-spacing: 0.08em;
}

.flow-modal-footer,
.work-order-modal-actions,
.modal-actions {
  border-top-color: var(--nx-v2-border);
  padding: 12px 18px;
  background: var(--nx-v2-surface-soft);
}

/* Direct modal footers are a permanent action dock. The panel/body owns scrolling,
   so primary navigation never disappears below long phone or tablet forms. */
.modal-panel > footer,
.flow-modal > footer,
.modal-panel > :is(.flow-modal-footer, .work-order-modal-actions, .product-modal-actions, .station-modal-actions, .problem-modal-actions, .manual-segment-footer) {
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  flex: 0 0 auto;
  margin-top: auto;
  border-top: 1px solid var(--nx-v2-border);
  background: var(--nx-v2-surface);
  box-shadow: 0 -8px 24px rgba(10, 25, 49, 0.07);
}

.flow-close-button,
.modal-close {
  width: 40px;
  height: 40px;
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-sm);
  color: var(--nx-v2-navy-soft);
  background: var(--nx-v2-surface);
  box-shadow: none;
}

.flow-close-button:hover,
.modal-close:hover {
  border-color: var(--nx-v2-field-border-hover);
  color: var(--nx-v2-navy);
  background: var(--nx-v2-blue-soft);
  transform: none;
}

/* Site-aligned icon language: a clear outline without a decorative tile behind it. */
.flow-modal-icon,
.flow-modal-icon .item-type-icon,
.nx-command-kpi > i,
.nx-command-row-icon,
.team-role-badge {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.flow-modal-icon,
.flow-modal-icon .item-type-icon {
  width: 30px;
  height: 30px;
  color: var(--nx-v2-blue);
}

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

.flow-modal-icon.danger,
.nx-command-kpi.warning > i,
.nx-command-row-icon.warning,
.nx-command-kpi.danger > i,
.nx-command-kpi.success > i,
.nx-command-row-icon.success {
  background: transparent;
}

.nx-command-kpi > i,
.nx-command-row-icon {
  width: 30px;
  height: 30px;
  border-radius: 0;
}

.nx-command-kpi > i svg,
.nx-command-row-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.65;
}

.team-role-badge {
  gap: 7px;
  min-height: 26px;
  padding: 3px 0;
  color: var(--nx-v2-navy-soft);
  font-weight: 650;
}

.team-role-badge > svg {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
  color: var(--nx-v2-blue);
  stroke-width: 1.65;
}

/* Inputs must remain visually obvious in every data-entry modal. */
.modal-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal-panel select,
.modal-panel textarea,
.flow-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.flow-modal select,
.flow-modal textarea {
  min-height: var(--nx-v2-field-height);
  border: 1px solid var(--nx-v2-field-border);
  border-radius: var(--nx-v2-radius-sm);
  padding: 10px 12px;
  color: var(--nx-v2-navy);
  background: #f5faff;
  box-shadow: inset 0 1px 0 rgba(10, 25, 49, 0.025);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.35;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.modal-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.modal-panel select:hover,
.modal-panel textarea:hover,
.flow-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.flow-modal select:hover,
.flow-modal textarea:hover {
  border-color: var(--nx-v2-field-border-hover);
}

.modal-panel input::placeholder,
.modal-panel textarea::placeholder,
.flow-modal input::placeholder,
.flow-modal textarea::placeholder {
  color: #8799a8;
  opacity: 1;
}

.modal-panel input:focus,
.modal-panel select:focus,
.modal-panel textarea:focus,
.flow-modal input:focus,
.flow-modal select:focus,
.flow-modal textarea:focus {
  border-color: var(--nx-v2-blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(74, 127, 167, 0.14);
  outline: 0;
}

.modal-panel :is(input, select, textarea)[aria-invalid="true"],
.flow-modal :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--ds-danger, #e11d30);
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.1);
}

.modal-panel input[readonly],
.modal-panel textarea[readonly],
.modal-panel input:disabled,
.modal-panel select:disabled,
.flow-modal input[readonly],
.flow-modal textarea[readonly],
.flow-modal input:disabled,
.flow-modal select:disabled {
  border-color: var(--nx-v2-border);
  background: var(--nx-v2-surface-soft);
}

/* One form grammar across every data-entry modal. Labels identify the action,
   editable controls stay visually foregrounded, and helper text stays quiet. */
.modal-panel :is(.field, .wo-modal-field, .material-field, .invoice-field, .customer-field, .problem-description-field) > span,
.flow-modal :is(.field, .wo-modal-field, .material-field, .invoice-field, .customer-field, .problem-description-field) > span {
  color: var(--nx-v2-navy-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-transform: none;
}

.modal-panel :is(.field, .wo-modal-field, .material-field, .invoice-field, .customer-field) > span > b,
.flow-modal :is(.field, .wo-modal-field, .material-field, .invoice-field, .customer-field) > span > b {
  color: var(--ds-danger, #e11d30);
}

.modal-panel :is(.field, .wo-modal-field, .material-field, .invoice-field, .customer-field) > small,
.flow-modal :is(.field, .wo-modal-field, .material-field, .invoice-field, .customer-field) > small {
  color: var(--nx-v2-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.runtime-custom-wizard .custom-wizard-body,
.runtime-problem-modal .problem-modal-body,
.product-wizard-body,
.team-member-body,
.station-wizard-body {
  background: var(--nx-v2-modal-body);
}

.runtime-custom-wizard :is(.panel-card, .manual-worker-picker, .manual-worker-minutes-panel, .manual-allocation-panel, .manual-final-summary),
.runtime-problem-modal :is(.problem-context-card, .flow-choice-section, .problem-description-field, .problem-attachments-section) {
  border: 1px solid var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-md);
  background: var(--nx-v2-surface);
  box-shadow: none;
}

.runtime-problem-modal :is(.flow-choice-section, .problem-description-field, .problem-attachments-section) {
  padding: 14px;
}

.runtime-problem-modal :is(.problem-card-options, .priority-card-options, .stop-work-options) button {
  border-color: var(--nx-v2-field-border);
  border-radius: var(--nx-v2-radius-sm);
  background: var(--nx-v2-surface);
  box-shadow: none;
}

.runtime-problem-modal :is(.problem-card-options, .priority-card-options, .stop-work-options) button.active {
  border-color: var(--nx-v2-blue);
  color: var(--nx-v2-navy);
  background: var(--nx-v2-blue-soft);
  box-shadow: inset 0 0 0 1px var(--nx-v2-blue);
}

/* Work entry uses its content height and keeps the editable controls prominent. */
.modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell {
  width: min(940px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
}

.manual-work-entry-modal.runtime-custom-wizard .manual-work-entry-body {
  padding: 12px;
  background: var(--nx-v2-modal-body);
}

.manual-work-entry-modal .manual-result-card {
  gap: var(--nx-v2-modal-gap);
  padding: 14px;
}

.manual-work-entry-modal .manual-result-grid,
.manual-work-entry-modal .manual-result-readonly-grid {
  gap: 10px;
}

/* Aligned modal fields share one label/control/helper rhythm. The helper row is
   reserved even when a field has no message, so adjacent controls never drift. */
.manual-work-entry-modal .manual-field-with-helper-slot {
  display: grid;
  grid-template-rows: auto 42px minmax(15px, auto);
  align-content: start;
  gap: 6px;
}

.manual-work-entry-modal .manual-field-with-helper-slot > :is(input, select, .manual-readonly-control, .nx-date-control-wrap) {
  align-self: stretch;
  margin: 0;
}

.manual-work-entry-modal .manual-field-with-helper-slot > small {
  min-height: 15px;
  margin: 0;
  line-height: 1.25;
}

.manual-work-entry-modal .manual-field-helper-placeholder {
  visibility: hidden;
}

.manual-work-entry-modal .manual-segment-nav {
  gap: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--nx-v2-border);
  background: var(--nx-v2-surface);
}

.manual-work-entry-modal .manual-segment-nav button {
  min-height: 46px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--nx-v2-muted);
  background: transparent;
  box-shadow: none;
  font-size: 12.5px;
}

.manual-work-entry-modal .manual-segment-nav button.active {
  border-bottom-color: var(--nx-v2-blue);
  color: var(--nx-v2-navy);
  background: var(--nx-v2-blue-soft);
}

.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(--nx-v2-navy-soft);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.manual-work-entry-modal .manual-allocation-modes label {
  border-radius: var(--nx-v2-radius-sm);
  background: #ffffff;
  box-shadow: none;
}

.manual-work-entry-modal .manual-allocation-modes label:has(input:checked) {
  border-color: var(--nx-v2-blue);
  background: var(--nx-v2-blue-soft);
  box-shadow: none;
}

/* Canonical compact selection cards used by the work-entry worker picker. */
.manual-work-entry-modal .manual-worker-list {
  gap: 7px;
}

.manual-work-entry-modal .manual-worker-choice {
  grid-template-columns: 16px minmax(0, 1fr);
  min-height: 40px;
  padding: 6px 10px;
  column-gap: 8px;
  border-radius: var(--nx-v2-radius-sm);
}

.manual-work-entry-modal .manual-worker-choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  align-self: center;
  justify-self: center;
}

.manual-work-entry-modal .manual-worker-choice span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.manual-work-entry-modal .manual-worker-choice:has(input:checked) {
  box-shadow: inset 0 0 0 1px var(--nx-v2-blue);
}

.manual-work-entry-modal .manual-readonly-control {
  border-color: #c8d9e5;
  color: var(--nx-v2-navy-soft);
  background: var(--nx-v2-blue-soft);
  font-size: 14px;
  font-weight: 700;
}

/* Progress modes are operational information, not helper copy. Keep both
   Komadno and Procentualno equally readable in tables, details and forms. */
.time-stack em,
.line-detail-card .line-empty-state > strong {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.manual-work-entry-modal .manual-result-card .line-empty-state {
  min-height: 92px;
  place-items: start;
  align-content: center;
  padding: 14px 16px;
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-sm);
  background: var(--nx-v2-surface-soft);
  text-align: left;
}

.manual-work-entry-modal .manual-result-card .line-empty-state span {
  max-width: 440px;
  font-size: 12px;
  line-height: 1.45;
}

/* Every filter reset action has one label, icon and visual contract. */
.filter-reset-button,
button[data-action*="clear-"][data-action*="filter"],
button[data-action$="clear-filters"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-sm);
  color: var(--nx-v2-navy-soft);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
}

.filter-reset-button svg,
button[data-action*="clear-"][data-action*="filter"] svg,
button[data-action$="clear-filters"] svg {
  width: 16px;
  height: 16px;
  color: var(--nx-v2-blue);
}

/* Legacy filter cards may style every nested span as a field label. Action
   captions always inherit the shared button typography and sentence case. */
.shipment-filter-card :is(.filter-reset-button, .filter-disclosure-button) > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: none;
}

.filter-reset-button:hover:not(:disabled) {
  border-color: var(--nx-v2-field-border-hover);
  color: var(--nx-v2-navy);
  background: var(--nx-v2-blue-soft);
}

.filter-reset-button:disabled {
  opacity: 0.48;
}

/* The initial custom-item decision is intentionally compact. The full workspace
   is only used after the user has chosen a creation path. */
.modal-panel.flow-modal.runtime-custom-wizard.custom-choice-shell {
  width: min(760px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 32px);
}

.runtime-custom-wizard.custom-choice-shell .custom-wizard-body {
  padding: 16px;
  background: var(--nx-v2-surface-soft);
}

.runtime-custom-wizard.custom-choice-shell .custom-choice-grid {
  gap: 12px;
  min-height: 0;
  align-content: start;
}

.runtime-custom-wizard.custom-choice-shell .custom-start-card.flow-source-card {
  min-height: 142px;
  padding: 16px;
  border-left-width: 1px;
  box-shadow: none;
}

.runtime-custom-wizard.custom-choice-shell .custom-start-card .choice-icon {
  width: 28px;
  height: 28px;
  border-radius: 0;
  color: var(--nx-v2-blue);
  background: transparent;
}

.runtime-custom-wizard.custom-choice-shell .custom-start-card .choice-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.65;
}

.runtime-custom-wizard.custom-choice-shell .custom-start-card.flow-source-card b {
  min-height: 36px;
  padding: 0 12px;
}

/* Problem details: content-driven columns, quiet outline icons and one clear
   information hierarchy. Semantic status colours remain unchanged. */
.modal-panel.problem-detail-modal.runtime-problem-detail-modal {
  width: min(1000px, calc(100vw - 32px));
}

.runtime-problem-detail-modal .problem-detail-grid-page {
  align-items: stretch;
}

.runtime-problem-detail-modal .problem-activity-card {
  min-height: 100%;
  align-self: stretch;
}

.runtime-problem-detail-modal .activity-avatar {
  border: 0;
  border-radius: 0;
  color: var(--nx-v2-blue);
  background: transparent;
  box-shadow: none;
}

.runtime-problem-detail-modal .activity-avatar svg {
  width: 19px;
  height: 19px;
  stroke-width: var(--nx-v2-icon-stroke);
}

/* Operation measurement labels remain readable beside the compact progress ring. */
main .operation-progress-block small {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0;
}

.runtime-problem-detail-modal .flow-icon-chip,
.runtime-problem-detail-modal .problem-detail-meta .soft-icon,
.runtime-problem-detail-modal .problem-context-strip .soft-icon {
  width: 24px;
  height: 24px;
  border-radius: 0;
  color: var(--nx-v2-blue);
  background: transparent;
  box-shadow: none;
}

.runtime-problem-detail-modal .flow-icon-chip svg,
.runtime-problem-detail-modal .problem-detail-meta .soft-icon svg,
.runtime-problem-detail-modal .problem-context-strip .soft-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.65;
}

.runtime-problem-detail-modal .problem-source-note {
  border-color: var(--nx-v2-border);
  color: var(--nx-v2-navy-soft);
  background: var(--nx-v2-blue-soft);
}

.runtime-problem-detail-modal .problem-detail-meta small,
.runtime-problem-detail-modal .problem-context-strip small {
  color: var(--nx-v2-muted);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

/* Machine editing is a compact two-column form, not a full workspace. */
.modal-panel.flow-modal.machine-master-modal {
  width: min(720px, calc(100vw - 32px));
  max-width: min(720px, calc(100vw - 32px));
}

.machine-master-form {
  gap: 14px 16px;
  padding: 18px 20px 20px;
  background: var(--nx-v2-modal-body);
}

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

.machine-filter-card {
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 0.9fr) minmax(140px, 0.65fr) auto;
  align-items: end;
}

.machines-table {
  min-width: 960px;
  table-layout: auto;
}

.machines-table th:nth-child(1),
.machines-table td:nth-child(1) {
  width: 112px;
  white-space: nowrap;
}

.machines-table th:nth-child(2),
.machines-table td:nth-child(2) {
  width: auto;
  min-width: 170px;
}

.machines-table th:nth-child(3),
.machines-table td:nth-child(3) {
  width: 200px;
}

.machines-table th:nth-child(4),
.machines-table td:nth-child(4) {
  width: 140px;
}

.machines-table th:nth-child(5),
.machines-table td:nth-child(5) {
  width: 150px;
}

.machines-table th:nth-child(6),
.machines-table td:nth-child(6) {
  width: 110px;
}

.machines-table th:nth-child(7),
.machines-table td:nth-child(7) {
  width: 72px;
}

.machine-station-cell strong,
.machine-table-code {
  font-size: var(--nx-v2-table-body-size);
  font-weight: 650;
}

.machine-station-cell small {
  font-size: 11.5px;
}

.machine-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.machine-row-actions .icon-action {
  width: 36px;
  height: 36px;
}

.machine-status-action {
  min-height: 36px;
  padding-inline: 10px;
  font-size: 11.5px;
}

/* Column alignment follows data semantics everywhere: descriptive content is
   left aligned, numerical content is right aligned, and short operational
   states/actions are centered. */
.machines-table :is(th, td):nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.machines-table th:nth-child(4) .sort-header {
  justify-content: flex-end;
  text-align: right;
}

.machines-table :is(th, td):is(:nth-child(5), :nth-child(6)) {
  text-align: center;
}

.machines-table th:is(:nth-child(5), :nth-child(6)) .sort-header {
  justify-content: center;
}

.global-problem-table th,
.problems-overview .problem-table th {
  text-align: center;
}

.global-problem-table th .sort-header,
.problems-overview .problem-table th .sort-header {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.global-problem-table td,
.problems-overview .problem-table td {
  text-align: center;
}

.global-problem-table :is(th, td):is(:nth-child(1), :nth-child(8)),
.problems-overview .problem-table :is(th, td):is(:nth-child(1), :nth-child(7)) {
  font-variant-numeric: tabular-nums;
}

.global-problem-table :is(th, td):is(:nth-child(3), :nth-child(6), :nth-child(8)),
.problems-overview .problem-table :is(th, td):nth-child(4) {
  text-align: left;
}

.global-problem-table :is(th, td):is(:nth-child(3), :nth-child(6), :nth-child(8)) .sort-header,
.problems-overview .problem-table :is(th, td):nth-child(4) .sort-header {
  justify-content: flex-start;
  text-align: left;
}

.global-problem-operator {
  justify-content: center;
  gap: 7px;
  font-weight: 600;
  white-space: nowrap;
}

.global-problem-operator > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--nx-v2-blue);
  stroke-width: var(--nx-v2-icon-stroke);
}

.machine-mobile-card {
  box-shadow: none;
}

.machine-mobile-card footer {
  align-items: center;
}

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

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

  .machine-master-form {
    padding: 14px;
  }

  .machine-mobile-card {
    gap: 10px;
    padding: 13px;
  }

  .machine-mobile-card footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-mobile-card footer button {
    width: 100%;
  }
}

/* Scrap uses the same light outline icon language as the public site. */
.scrap-premium-kpi-icon,
.scrap-premium-empty > span,
.scrap-guidance-card > header > span,
.scrap-material-cost > header span,
.scrap-premium-detail .modal-icon,
.scrap-explainability-modal .modal-icon {
  border: 0;
  border-radius: 0;
  color: var(--nx-v2-blue);
  background: transparent;
  box-shadow: none;
}

.scrap-premium-kpi-icon svg,
.scrap-premium-empty > span svg,
.scrap-guidance-card > header > span svg,
.scrap-material-cost > header span svg,
.scrap-premium-detail .modal-icon svg,
.scrap-explainability-modal .modal-icon svg {
  stroke-width: 1.65;
}

.scrap-analysis-grid {
  align-items: start;
}

.scrap-premium-empty,
.scrap-premium-loading {
  min-height: 104px;
  padding: 18px;
}

.scrap-material-section > .scrap-premium-empty {
  border: 1px solid var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-md);
  background: var(--nx-v2-surface);
}

.scrap-insight-card,
.scrap-premium-kpi,
.scrap-material-quantities,
.scrap-material-cost,
.scrap-guidance-card,
.scrap-events-card {
  box-shadow: none;
}

/* Production Scrap is a primary register and follows the same compact table
   geometry as Materials and Work Orders instead of its former micro typography. */
.scrap-premium-screen .scrap-events-card {
  min-height: 0;
}

.scrap-premium-screen .scrap-events-table-wrap table {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
}

.scrap-premium-screen .scrap-events-table-wrap :is(th, td) {
  vertical-align: middle;
}

.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(1) { width: 11%; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(2) { width: 10%; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(3) { width: 15%; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(4) { width: 10%; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(5) { width: 15%; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(6) { width: 12%; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(7) { width: 14%; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(8) { width: 7%; text-align: center; }
.scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(9) { width: 6%; text-align: center; }

.scrap-premium-screen .scrap-event-product small {
  font-size: 11px;
  line-height: 1.3;
}

.scrap-premium-screen .scrap-events-footer {
  min-height: 54px;
  padding: 10px 14px;
  border-top: 1px solid var(--nx-v2-border);
}

.scrap-premium-screen .scrap-events-footer > span,
.scrap-premium-screen .scrap-events-footer :is(button, select) {
  font-size: 12px;
}

/* Analytics surfaces share one restrained card treatment while their business
   calculations and navigation stay untouched. */
.analytics-topbar,
.analytics-work-orders-panel,
.analytics-new-analysis,
.analytics-work-order-choice,
.analytics-empty-state {
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-md);
  box-shadow: none;
}

.analytics-work-orders-home {
  gap: 16px;
}

.analytics-screen {
  gap: 14px;
}

.analytics-topbar {
  min-width: 0;
  overflow: hidden;
  padding: 0 12px;
  border-radius: var(--nx-v2-radius-md);
  box-shadow: none;
}

.analytics-mobile-filter-row {
  display: none;
}

@media (max-width: 760px) {
  .mobile-filter-sheet-open #normax-calendar-root { z-index: 2500; }
  .analytics-mobile-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
  }
  .analytics-mobile-period {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--ds-text-muted);
  }
  .analytics-mobile-period svg { width: 16px; flex-shrink: 0; }
  .analytics-mobile-filter-details { flex-shrink: 0; }
  .analytics-mobile-filter-details > summary { list-style: none; cursor: pointer; }
  .analytics-mobile-filter-details > summary::-webkit-details-marker { display: none; }
  .analytics-mobile-filter-details > div { display: none; }
  .analytics-mobile-filter-details[open] > div { display: grid; }
  .analytics-mobile-filter-grid > label { display: grid; gap: 6px; min-width: 0; font-size: 12px; }
  .analytics-mobile-filter-grid input,
  .analytics-mobile-filter-grid select { width: 100%; min-width: 0; box-sizing: border-box; height: 40px; }
  .operational-analytics-toolbar-main,
  .operational-analytics-toolbar > .operational-period-panel,
  .operational-analytics-toolbar > .operational-advanced-filters { display: none !important; }
  .operational-entity-card { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .operational-entity-card > span:nth-child(2) { max-width: 135px; }
  .operational-entity-card strong { white-space: normal; }
}

.analytics-tabs {
  width: 100%;
  min-width: 0;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.analytics-tabs::-webkit-scrollbar {
  display: none;
}

.analytics-tabs button,
.operational-analytics-screen .analytics-tabs button {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 16px;
  border-bottom-width: 2px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  scroll-snap-align: start;
}

.analytics-tabs button.active {
  color: var(--nx-v2-navy);
  border-color: var(--nx-v2-blue);
  background: #f1f7fb;
}

.analytics-tabs button svg {
  width: 17px;
  height: 17px;
  color: var(--nx-v2-blue);
  stroke-width: 1.65;
}

.analytics-work-orders-panel {
  padding: 22px 24px;
}

.analytics-work-orders-heading > span {
  min-width: 36px;
  height: 36px;
  border-radius: var(--nx-v2-radius-sm);
  color: var(--nx-v2-blue);
  background: var(--nx-v2-blue-soft);
}

.analytics-work-orders-controls {
  gap: 10px;
  margin: 16px 0;
}

.analytics-work-orders-controls input,
.analytics-work-orders-controls select {
  min-height: 42px;
}

.analytics-work-order-choice {
  padding: 12px 14px;
  border-radius: 10px;
  background: #ffffff;
}

.analytics-empty-state {
  min-height: 76px;
  align-content: center;
  padding: 16px 18px;
  background: var(--nx-v2-surface-soft);
}

.operational-analytics-toolbar,
.operational-analytics-screen .analytics-chart-card,
.operational-analytics-screen .analytics-table-card,
.operational-analytics-screen .operational-kpi-card {
  border-color: var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-md);
  box-shadow: none;
}

.operational-analytics-toolbar-main {
  padding: 10px 12px;
}

.operational-analytics-screen .analytics-kpi-grid {
  gap: 10px;
}

.operational-analytics-screen .operational-kpi-card {
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 10px;
  row-gap: 1px;
  min-height: 82px;
  padding: 11px 13px;
}

.operational-analytics-screen .operational-kpi-card div {
  grid-row: 1 / 4;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  color: var(--nx-v2-blue);
  background: transparent;
}

.operational-analytics-screen .operational-kpi-card span,
.operational-analytics-screen .operational-kpi-card strong,
.operational-analytics-screen .operational-kpi-card small {
  grid-column: 2;
}

.operational-analytics-screen .operational-kpi-card div svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.65;
}

.operational-analytics-screen .operational-kpi-card span,
.operational-analytics-screen .operational-kpi-card small {
  color: var(--nx-v2-muted);
  font-size: 12px;
}

.operational-analytics-screen .operational-kpi-card strong {
  color: var(--nx-v2-navy);
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 650;
}

.operational-analytics-screen .operational-management-grid {
  grid-template-columns: minmax(320px, 0.78fr) minmax(620px, 1.55fr);
  gap: 10px;
}

.operational-analytics-screen .operational-management-grid.operational-results-single {
  grid-template-columns: minmax(0, 1fr);
}

.operational-ranking-card {
  padding: 16px;
}

.operational-ranking-card > header {
  margin-bottom: 12px;
}

.operational-ranking-chart i b {
  background: var(--nx-v2-blue);
}

.analytics-comparison-summary { margin-bottom: 16px; }
.analytics-comparison-summary h3 { margin: 0 0 10px; font-size: 15px; }
.analytics-drilldown-body { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.analytics-drilldown-body > * { min-width: 0; }
.analytics-comparison-summary table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.analytics-comparison-summary th,
.analytics-comparison-summary td { border: 1px solid var(--nx-v2-border); overflow-wrap: anywhere; }
.analytics-comparison-summary p { color: var(--nx-v2-muted); font-size: 12px; line-height: 1.5; }
.analytics-comparison-summary th:first-child,
.analytics-comparison-summary td:first-child { text-align: left; }
.analytics-comparison-summary th:last-child,
.analytics-comparison-summary td:last-child { text-align: center; vertical-align: middle; }
.operational-analytics-screen .analytics-table th:not(:first-child),
.operational-analytics-screen .analytics-table td:not(:first-child) { text-align: center; vertical-align: middle; }
.operational-analytics-screen .analytics-table th:not(:first-child) .sort-header { justify-content: center; text-align: center; }
.operational-analytics-screen .analytics-table .analytics-work-cell { align-items: center; }

/* Analytics initialization is a business form, not a narrow confirmation box. */
.modal-panel.flow-modal.wo-analytics-settings-modal.is-start {
  width: min(980px, calc(100vw - 32px));
  max-width: min(980px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.wo-analytics-settings-modal.is-start .wo-analytics-modal-body {
  grid-template-columns: minmax(280px, 0.88fr) minmax(380px, 1.12fr);
  align-items: start;
  gap: 14px 18px;
  padding: 20px 24px;
}

.wo-analytics-settings-modal.is-start .wo-analytics-neutral-message,
.wo-analytics-settings-modal.is-start .wo-analytics-error {
  grid-column: 1 / -1;
  grid-row: 1;
}

.wo-analytics-settings-modal.is-start .wo-analytics-field:has([data-field="baseCurrency"]) {
  grid-column: 1;
  grid-row: 2;
}

.wo-analytics-settings-modal.is-start .wo-analytics-field:has([data-field="contractedValueNetVat"]) {
  grid-column: 1;
  grid-row: 3;
}

.wo-analytics-settings-modal.is-start .wo-analytics-field:has([data-field="laborHourCost"]) {
  grid-column: 1;
  grid-row: 4;
}

.wo-analytics-settings-modal.is-start .wo-analytics-external-start {
  grid-column: 2;
  grid-row: 2 / span 3;
}

.wo-analytics-settings-modal.is-start .wo-analytics-material-start {
  grid-column: 1 / -1;
  grid-row: 5;
}

.wo-analytics-settings-modal .wo-analytics-external-start,
.wo-analytics-settings-modal .wo-analytics-material-start {
  align-self: start;
  padding: 15px;
  border: 1px solid var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-md);
  background: var(--nx-v2-surface-soft);
}

.wo-analytics-settings-modal .wo-analytics-external-start > header {
  padding-top: 0;
  border-top: 0;
}

.wo-analytics-settings-modal .wo-finance-attachment-section {
  padding: 12px;
  border-radius: var(--nx-v2-radius-sm);
  background: #ffffff;
}

.modal-panel.flow-modal.wo-analytics-settings-modal.is-edit {
  width: min(760px, calc(100vw - 32px));
}

.wo-analytics-settings-modal.is-edit .wo-analytics-modal-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  align-content: start;
}

.wo-analytics-settings-modal.is-edit .wo-analytics-field:last-child {
  grid-column: 1 / -1;
}

.content-signature {
  margin-top: 42px;
  opacity: 0.34;
}

.content-signature img {
  width: 92px;
}

.login-premium .login-brand-panel,
.brand.large {
  background: var(--nx-v2-navy);
  box-shadow: none;
}

.login-premium .login-brand-logo,
.brand.large img,
.position-label-card > header img {
  filter: brightness(0) invert(1);
}

.login-premium .login-brand-logo {
  width: min(100%, 300px);
}

.login-premium .login-form-logo {
  width: min(100%, 240px);
}

.login-premium .login-contact-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.login-premium .login-contact-links .login-support {
  margin: 0;
}

.official-site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nx-v2-blue);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}

.official-site-link:hover {
  color: var(--nx-v2-navy-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.official-site-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.7;
}

.settings-account-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

.settings-official-site {
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-sm);
  background: var(--nx-v2-surface-soft);
}

.settings-official-site > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-official-site strong {
  color: var(--nx-v2-navy-soft);
  font-size: 13px;
}

.settings-official-site small {
  color: var(--nx-v2-blue);
  font-size: 12px;
}

.mobile-app-bar,
.mobile-bottom-nav {
  display: none;
}

/* iOS/iPadOS zooms any focused form control below 16px. Touch tablets in landscape are wider than
   980px, so the same 16px floor applies to every touch device regardless of width. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 980px) {
  :root {
    --nx-mobile-nav-height: 64px;
  }

  /* iOS zooms focused form controls below 16px; keep every phone/tablet input stable. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  .modal-panel > footer,
  .flow-modal > footer,
  .modal-panel > :is(.flow-modal-footer, .work-order-modal-actions, .product-modal-actions, .station-modal-actions, .problem-modal-actions, .manual-segment-footer) {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .work-order-card [data-action="send-order-shipment"].shipment-action-locked:disabled {
    border-color: #c7d4de;
    color: #718396;
    background: #eef3f6;
    box-shadow: inset 0 0 0 1px rgba(10, 25, 49, 0.03);
    opacity: 1;
    cursor: not-allowed;
  }

  .work-order-card [data-action="send-order-shipment"].shipment-action-locked:disabled svg {
    color: #718396;
  }

  html,
  body,
  #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    min-width: 0;
    padding: 0;
    overscroll-behavior: none;
  }

  .app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell > .sidebar {
    display: none;
  }

  .mobile-app-bar {
    position: relative;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: calc(58px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: var(--nx-v2-navy);
    box-shadow: 0 6px 18px rgba(10, 25, 49, 0.12);
  }

  .mobile-app-bar img {
    width: 112px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .mobile-app-bar div {
    display: grid;
    min-width: 0;
  }

  .mobile-app-bar span {
    overflow: hidden;
    color: #b3cfe5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-app-bar strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 15px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .content,
  .content-wide {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px max(16px, env(safe-area-inset-right)) calc(var(--nx-mobile-nav-height) + 24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    scrollbar-gutter: stable;
  }

  /* The legacy dashboard used a full-viewport height and visible overflow. In the
     fixed mobile shell that put its final row underneath the bottom navigation. */
  .content.content-dashboard,
  .content.content-dashboard:has(.nx-dashboard-overview) {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px max(16px, env(safe-area-inset-right)) calc(var(--nx-mobile-nav-height) + 24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .topbar {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
  }

  .title-block h1,
  .content-wide .title-block h1,
  .module-title-block h1 {
    font-size: clamp(25px, 7.5vw, 32px);
  }

  .title-block span,
  .module-title-block span {
    font-size: 12px;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .content-dashboard .nx-command-header-actions {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  }

  .content-dashboard .notification-panel {
    position: fixed;
    top: calc(222px + env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    left: max(16px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 286px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .content-dashboard .notification-panel > div {
    max-height: inherit;
  }

  .content-dashboard .notification-item > span {
    grid-row: auto;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(var(--mobile-nav-count, 4), minmax(0, 1fr));
    min-height: calc(var(--nx-mobile-nav-height) + env(safe-area-inset-bottom));
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 2px solid #b7d4e7;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 28px rgba(10, 25, 49, 0.12);
  }

  .mobile-bottom-nav > button,
  .mobile-more-menu > summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    border: 0;
    border-radius: var(--nx-v2-radius-sm);
    padding: 4px 3px;
    color: #71879a;
    background: transparent;
    font-size: 10px;
    font-weight: 650;
    list-style: none;
    text-align: center;
  }

  .mobile-bottom-nav > button::-webkit-details-marker,
  .mobile-more-menu > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-bottom-nav > button svg,
  .mobile-more-menu > summary svg {
    width: 20px;
    height: 20px;
  }

  .mobile-bottom-nav > button .nx-menu-image-icon,
  .mobile-more-menu > summary .nx-menu-image-icon {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .mobile-bottom-nav > button.active,
  .mobile-more-menu.active > summary,
  .mobile-more-menu[open] > summary {
    color: var(--nx-v2-navy-soft);
    background: var(--nx-v2-blue-soft);
  }

  .mobile-bottom-nav .nav-problem-badge {
    position: absolute;
    top: 1px;
    left: calc(50% + 7px);
  }

  .mobile-more-menu {
    min-width: 0;
  }

  .mobile-more-panel {
    position: fixed;
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 81;
    overflow: hidden;
    max-height: calc(100dvh - 98px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border: 1px solid var(--nx-v2-border);
    border-radius: var(--nx-v2-radius-lg);
    background: var(--nx-v2-surface);
    box-shadow: 0 24px 60px rgba(10, 25, 49, 0.2);
  }

  .mobile-more-panel > header {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nx-v2-border);
    background: var(--nx-v2-surface-soft);
  }

  .mobile-more-panel > header span {
    color: var(--nx-v2-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .mobile-more-panel > header strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow-y: auto;
    max-height: calc(100dvh - 185px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 10px;
  }

  .mobile-more-group-label {
    grid-column: 1 / -1;
    margin: 4px 8px 0;
    color: var(--nx-v2-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.2;
  }

  .mobile-more-grid > .mobile-more-group-label:first-child {
    margin-top: 0;
  }

  .mobile-more-grid > button.mobile-group-start {
    grid-column-start: 1;
  }

  .mobile-more-grid button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 46px;
    border: 0;
    border-radius: var(--nx-v2-radius-sm);
    padding: 0 11px;
    color: var(--nx-v2-navy-soft);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }

  .mobile-more-grid button.active,
  .mobile-more-grid button:hover {
    color: var(--nx-v2-navy);
    background: var(--nx-v2-blue-soft);
  }

  .mobile-more-grid button svg {
    width: 18px;
    height: 18px;
    color: var(--nx-v2-blue);
  }

  .mobile-more-grid button .nx-menu-image-icon {
    color: var(--nx-v2-blue);
  }

  .analytics-topbar {
    padding: 0 6px;
  }

  .analytics-tabs {
    scroll-snap-type: x proximity;
  }

  .analytics-tabs button,
  .operational-analytics-screen .analytics-tabs button {
    min-width: 138px;
    min-height: 48px;
    justify-content: flex-start;
    padding: 0 12px;
    white-space: normal;
  }

  .analytics-work-orders-panel {
    padding: 16px;
  }

  .analytics-work-orders-heading h2 {
    font-size: 23px;
    line-height: 1.15;
  }

  .analytics-work-orders-heading p {
    font-size: 13px;
    line-height: 1.45;
  }

  .analytics-work-orders-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 14px 0;
  }

  .analytics-work-orders-controls label {
    grid-column: auto;
  }

  .operational-analytics-screen .analytics-kpi-grid,
  .operational-analytics-screen .analytics-kpi-grid:has(.operational-kpi-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .operational-analytics-screen .operational-kpi-card,
  .operational-analytics-screen .operational-kpi-card:nth-child(n + 4) {
    display: grid;
    min-height: 78px;
    padding: 10px 11px;
  }

  .operational-analytics-screen .operational-management-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-signature {
    display: none;
  }

  .modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 480px) {
  .mobile-more-grid {
    grid-template-columns: 1fr 1fr;
  }

  .topbar-actions > button {
    flex: 1 1 150px;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .modal-panel.flow-modal.runtime-custom-wizard.custom-choice-shell {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .runtime-custom-wizard.custom-choice-shell .custom-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-panel.flow-modal.runtime-custom-wizard.manual-work-entry-modal.custom-workspace-shell {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .modal-panel.flow-modal.wo-analytics-settings-modal.is-start,
  .modal-panel.flow-modal.wo-analytics-settings-modal.is-edit {
    width: 100vw;
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 48px);
    border: 0;
    border-radius: 0;
  }

  .wo-analytics-settings-modal.is-start .wo-analytics-modal-body,
  .wo-analytics-settings-modal.is-edit .wo-analytics-modal-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    align-content: start;
  }

  .wo-analytics-settings-modal.is-start .wo-analytics-neutral-message,
  .wo-analytics-settings-modal.is-start .wo-analytics-error,
  .wo-analytics-settings-modal.is-start .wo-analytics-field:has([data-field="baseCurrency"]),
  .wo-analytics-settings-modal.is-start .wo-analytics-field:has([data-field="contractedValueNetVat"]),
  .wo-analytics-settings-modal.is-start .wo-analytics-field:has([data-field="laborHourCost"]),
  .wo-analytics-settings-modal.is-start .wo-analytics-external-start,
  .wo-analytics-settings-modal.is-start .wo-analytics-material-start,
  .wo-analytics-settings-modal.is-edit .wo-analytics-field:last-child {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Tablet landscape shell
   Keep the desktop operating model, but recover the space otherwise consumed by the
   full navigation rail. The existing mobile shell remains authoritative <= 980px. */
@media (min-width: 981px) and (max-width: 1366px) {
  .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .sidebar {
    width: 88px;
    gap: 12px;
    padding: 17px 12px;
  }

  .sidebar-brand {
    display: grid;
    min-height: 40px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    background: url("./assets/normax-mark.svg") center / 48px auto no-repeat;
  }

  .sidebar-brand img {
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .company-picker {
    display: none;
  }

  .nav-list {
    gap: 4px;
  }

  .nav-group-label {
    display: none;
  }

  .nav-list button {
    position: relative;
    justify-content: center;
    width: 64px;
    min-height: 42px;
    padding: 0;
  }

  .nav-list button > span:not(.nav-problem-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav-list button svg {
    width: 20px;
    height: 20px;
  }

  .nav-list button.active {
    box-shadow: inset 3px 0 0 #b3cfe5;
  }

  .nav-list .nav-problem-badge {
    position: absolute;
    top: 4px;
    right: 5px;
  }

  .sidebar-company-signature {
    display: none;
  }

  .content,
  .content-wide {
    padding: 20px 18px 28px;
  }

  .topbar {
    gap: 16px;
    margin-bottom: 18px;
  }

  .title-block h1,
  .content-wide .title-block h1,
  .module-title-block h1 {
    font-size: clamp(25px, 2.5vw, 32px);
  }

  .content-signature {
    display: none;
  }

  .filter-disclosure-panel > .filter-primary-row > .clear-filter-button {
    flex: 0 0 auto;
    width: auto;
  }
}

@media (min-width: 981px) and (max-width: 1366px) and (max-height: 820px) {
  .content,
  .content-wide {
    padding-top: 12px;
    padding-bottom: 16px;
  }

  .topbar {
    margin-bottom: 12px;
  }
}

/* Final register-shell contract. Every desktop module now uses the same title
   scale and header depth; module-specific markup may still own its actions. */
@media (min-width: 981px) {
  .content > .topbar.topbar:has(+ #section-root) {
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .content-dashboard .nx-command-header,
  .materials-head,
  .stations-card-header,
  .scrap-premium-header,
  .settings-premium-head {
    box-sizing: border-box;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .content > .topbar:has(+ #section-root) :is(.title-block, .module-title-block) h1,
  .content-dashboard .nx-command-header .module-title-block h1,
  .materials-head .module-title-block h1,
  .stations-card-header .module-title-block h1,
  .scrap-premium-header .module-title-block h1,
  .settings-premium-head .module-title-block h1 {
    margin: 0;
    color: var(--nx-v2-navy);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
  }
}

/* Dashboard is the desktop alignment authority: every list module begins on
   the same 20px/14px content grid next to the navigation rail. Detail pages
   retain their deliberately wider working canvas. */
@media (min-width: 1367px) {
  html {
    scrollbar-gutter: stable;
  }

  .app-shell > .content:not(.content-wide):has(> #section-root) {
    padding: 14px 20px 40px;
  }
}

/* Work stations and Machines are sibling views inside one register. Their
   selector therefore belongs inside the register card, like Products tabs. */
.stations-card > .station-area-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: auto;
  margin: 12px 14px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--nx-v2-border);
  border-radius: var(--nx-v2-radius-sm);
  background: var(--nx-v2-surface);
}

.stations-card > .station-area-tabs > button {
  justify-content: center;
  min-width: 0;
}

.stations-card > .station-area-tabs > button + button {
  border-left: 1px solid var(--nx-v2-border);
}

.stations-card > .station-area-tabs > button.active,
.stations-card > .station-area-tabs > button[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--nx-v2-blue);
}

/* Machines use the same premium table grammar as the other data registers. */
.machines-table-wrap {
  max-width: 100%;
  border-top: 1px solid var(--nx-v2-border);
  border-bottom: 1px solid var(--nx-v2-border);
  background: var(--nx-v2-surface);
}

.machines-table {
  border-collapse: separate;
  border-spacing: 0;
}

.machines-table thead th {
  border-bottom: 1px solid var(--nx-v2-border);
}

.machines-table tbody td {
  border-bottom: 1px solid var(--nx-v2-border);
}

.machines-table :is(th, td) + :is(th, td) {
  border-left: 1px solid var(--nx-v2-border);
}

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

@media (max-width: 640px) {
  .global-problems-page .global-problem-table td {
    text-align: left;
  }

  .global-problems-page .global-problem-operator {
    justify-content: flex-start;
    white-space: normal;
  }

  .global-problem-filters .filter-disclosure-button {
    gap: 6px;
    padding-inline: 9px;
    font-size: 12px;
  }

  .global-problem-filters .filter-disclosure-button svg:last-child {
    display: none;
  }
}

@media (max-width: 360px) {
  .global-problems-page .global-problem-table td {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}

/* Canonical table-heading typography. Sortable headings are buttons in some
   modules, so they must explicitly follow the same contract as plain <th>s. */
#section-root table thead th,
#modal-root table thead th,
#section-root table thead th .sort-header,
#modal-root table thead th .sort-header,
#section-root table thead th .sort-header > span,
#modal-root table thead th .sort-header > span {
  font-family: var(--ds-font-sans);
  font-size: var(--nx-table-head-size);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* B2: one quiet row-action trigger across desktop, tablet and mobile. */
.icon-action.list-actions-trigger,
.icon-action.shipment-actions-trigger,
.icon-action.invoice-actions-trigger {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--nx-v2-border);
  border-radius: 9px;
  background: var(--nx-v2-surface);
  color: var(--nx-v2-navy-soft);
  box-shadow: none;
}

.icon-action.list-actions-trigger:hover,
.icon-action.list-actions-trigger:focus-visible,
.icon-action.shipment-actions-trigger:hover,
.icon-action.shipment-actions-trigger:focus-visible,
.icon-action.invoice-actions-trigger:hover,
.icon-action.invoice-actions-trigger:focus-visible {
  border-color: var(--nx-v2-blue);
  background: var(--nx-v2-surface-soft);
  color: var(--nx-v2-blue);
}

.invoice-payment-shortcut {
  border-color: var(--nx-v2-border);
  background: var(--nx-v2-surface);
  color: var(--nx-v2-blue);
}

/* Action columns and card action rails share one centered alignment contract. */
#section-root table:has(tbody .list-actions-trigger) thead th:last-child,
#section-root table:has(tbody .list-actions-trigger) tbody td:last-child,
#modal-root table:has(tbody .list-actions-trigger) thead th:last-child,
#modal-root table:has(tbody .list-actions-trigger) tbody td:last-child,
#section-root td[data-label="Akcije"],
#modal-root td[data-label="Akcije"],
#section-root .material-actions-cell,
#modal-root .material-actions-cell,
#section-root .spec-actions-cell,
#modal-root .spec-actions-cell {
  text-align: center;
  vertical-align: middle;
}

#section-root table:has(tbody .list-actions-trigger) tbody td:last-child > :is(div, footer),
#modal-root table:has(tbody .list-actions-trigger) tbody td:last-child > :is(div, footer),
#section-root article > footer:has(.list-actions-trigger),
#modal-root article > footer:has(.list-actions-trigger),
#section-root :is(.row-actions, .archive-card-actions, .product-card-actions, .station-mobile-actions, .team-row-actions, .invoices-card-actions):has(.list-actions-trigger),
#modal-root :is(.row-actions, .archive-card-actions, .product-card-actions, .station-mobile-actions, .team-row-actions, .invoices-card-actions):has(.list-actions-trigger) {
  justify-content: center;
  align-items: center;
  text-align: center;
}

#section-root article > .list-actions-trigger,
#modal-root article > .list-actions-trigger {
  align-self: center;
  margin-inline: auto;
}

.product-quick-info-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (min-width: 981px) {
  .stations-card-header.products-context-header {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* B10 mobile contract: module headings are one borderless 24px hierarchy. */
@media (max-width: 980px) {
  .content > .topbar.topbar:has(+ #section-root),
  .content-dashboard .nx-command-header,
  .materials-head,
  .stations-card-header,
  .stations-card-header.products-context-header,
  .scrap-premium-header,
  .settings-premium-head {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .content > .topbar:has(+ #section-root) :is(.title-block, .module-title-block) h1,
  .content-dashboard .nx-command-header .module-title-block h1,
  .materials-head .module-title-block h1,
  .stations-card-header .module-title-block h1,
  .scrap-premium-header .module-title-block h1,
  .settings-premium-head .module-title-block h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
  }

  .product-kpis.product-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .products-table-wrap-desktop,
  .products-table-wrap-landscape {
    display: none !important;
  }

  .product-card-grid {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .product-card-actions {
    display: flex;
    justify-content: center;
  }
}

/* Stage B final: page headings never become cards, and compact mobile cards win the final cascade. */
.content > .topbar,
.module-page-header,
.stations-card-header.module-page-header {
  padding-inline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .product-kpis.product-kpi-grid,
  .work-orders-screen .work-order-kpis {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
  }
  .product-kpis.product-kpi-grid > *,
  .work-orders-screen .work-order-kpis > * { flex: 0 0 min(205px, 55vw); }
  .product-card-actions { justify-content: flex-end; }
  .product-card > .product-card-actions { display: none !important; }
}

/* One page-header contract for every module: the title sits flush at the top
   of the content, the explanation follows 5px below it, and header commands
   share one size. Authority comes from colour (blue primary), never size. */
.module-title-block,
.stations-card-header > .module-title-block:first-child,
.products-context-header > .module-title-block:first-child {
  row-gap: 0;
}

:is(.content > .topbar .title-block, .module-title-block) > h1 {
  margin: 0;
  font-family: var(--ds-font-sans);
}

:is(.content > .topbar .title-block, .module-title-block) > h1 + span {
  display: block;
  max-width: 720px;
  margin-top: 5px;
  color: #526a82;
  font-family: var(--ds-font-sans);
  font-size: 12.5px;
  line-height: 1.35;
}

.settings-page .settings-premium-head {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.commercial-file-badge {
  flex: 0 0 auto;
}

/* Header subtitle styling (.products-context-header span) must not reach
   the labels and badges inside header commands. */
.products-context-header :is(.primary-button, .secondary-button) span {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.products-context-header :is(.primary-button, .secondary-button) .commercial-file-badge {
  color: inherit;
  line-height: 1;
}

.materials-procurement-trigger > strong {
  background: #eaf1f8;
  color: var(--nx-v2-navy);
}

@media (min-width: 981px) {
  :is(.content > .topbar .topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) > :is(.primary-button, .secondary-button) {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 200px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
  }

  :is(.content > .topbar .topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) > :is(.primary-button, .secondary-button) > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
  }

  :is(.content > .topbar .topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) > :is(.primary-button, .secondary-button) > strong {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11.5px;
  }
}

@media (max-width: 980px) {
  :is(.content > .topbar .topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) > :is(.primary-button, .secondary-button) {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
  }

  .materials-catalog > .materials-head {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .materials-head-actions {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
  }
}

/* Team reuses the Products KPI strip as a read-only summary. */
.team-overview .product-kpi {
  cursor: default;
}

.team-overview .product-kpi:hover {
  border-color: var(--ds-border);
  background: var(--ds-card);
  box-shadow: none;
}

@media (min-width: 981px) {
  .team-overview .team-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* One list footer everywhere (listPaginationFooter): summary left, then
   "Prikaži po strani" and page navigation, same type and control sizes. */
:is(#section-root, #modal-root) footer.list-pagination {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--ds-border);
  border-radius: 0;
  background: var(--ds-card);
  box-shadow: none;
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: 13px;
}

:is(#section-root, #modal-root) footer.list-pagination > .product-pagination-summary {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

:is(#section-root, #modal-root) footer.list-pagination > .product-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-size {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-size > span {
  color: var(--ds-text-light);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-size select {
  box-sizing: border-box;
  width: auto;
  min-width: 78px;
  height: 36px;
  min-height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background-color: var(--ds-card);
  color: var(--ds-heading);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  font-weight: 600;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-nav button {
  box-sizing: border-box;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: auto;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-card);
  color: var(--ds-heading);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-nav button.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: #fff;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-nav button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

:is(#section-root, #modal-root) footer.list-pagination .product-page-nav svg {
  width: 14px;
  height: 14px;
}

:is(#section-root, #modal-root) footer.list-pagination .page-double-chevron {
  display: inline-flex;
  align-items: center;
}

:is(#section-root, #modal-root) footer.list-pagination .page-double-chevron svg + svg {
  margin-left: -8px;
}

:is(#section-root, #modal-root) footer.list-pagination .page-gap {
  color: var(--ds-text-light);
  font-size: 13px;
}

@media (max-width: 640px) {
  :is(#section-root, #modal-root) footer.list-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  :is(#section-root, #modal-root) footer.list-pagination > .product-pagination-controls {
    justify-content: space-between;
    margin-left: 0;
  }

  :is(#section-root, #modal-root) footer.list-pagination .product-page-nav {
    flex-wrap: wrap;
  }
}

.team-overview > .team-kpi-grid {
  margin-bottom: 12px;
}

/* Materials: the table and its footer share one list card, like every
   other register. */
.materials-list-card {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  background: var(--ds-card);
}

.materials-list-card > .materials-table {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* C3: work order items keep one main action; workers show as initials, an open
   problem as a chip, and secondary actions sit in the row "⋯" menu. */
.operator-initials-stack {
  display: inline-flex;
  align-items: center;
}

.operator-initials {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -6px;
  border: 2px solid var(--ds-card);
  border-radius: 50%;
  background: #e8f0fb;
  color: var(--nx-v2-navy);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0;
}

.operator-initials:first-child {
  margin-left: 0;
}

.operator-initials.more {
  background: #eef2f6;
  color: #526a82;
}

.root-worker-action:has(.operator-initials-stack),
.root-worker-readout:has(.operator-initials-stack) {
  padding-inline: 6px;
}

button.item-problem-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  cursor: pointer;
  font: inherit;
}

button.item-problem-chip svg {
  width: 12px;
  height: 12px;
}

.work-order-operation-card .operation-actions {
  align-items: center;
}

.work-order-operation-card .operation-actions > .list-actions-trigger,
.nested-actions > .list-actions-trigger {
  margin-left: auto;
}

.nested-actions {
  align-items: center;
  gap: 8px;
}

@media (max-width: 760px) {
  /* Phone: the row menu shares the row with the main action instead of taking
     a row of its own. */
  .work-order-items-runtime .root-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
  }

  .work-order-items-runtime .root-card-actions > .root-card-utility-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .work-order-items-runtime .root-card-primary-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .work-order-items-runtime .root-card-primary-actions > .operation-primary-action {
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  /* C2 phone header: second row keeps only customer and due date. */
  .wo-detail-header-meta .wo-detail-owner-meta {
    display: none;
  }
}

/* Work order detail: the tabs are locked together with the compact header. */
.work-order-detail-shell .wo-detail-sticky-header {
  padding-bottom: 8px;
  min-width: 0;
  max-width: 100%;
}

.work-order-detail-shell .wo-detail-sticky-header > .wo-detail-tabs {
  margin-top: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.work-order-detail-shell .wo-detail-sticky-header.is-condensed > .wo-detail-tabs {
  margin-top: 6px;
}

/* Paired summary badges: done / target with one pictogram. */
.items-summary-pair strong em {
  color: var(--ds-text-light);
  font-style: normal;
  font-weight: 600;
}

.root-worker-action:has(> svg + .operator-initials-stack) .operator-initials-stack {
  margin-left: 2px;
}

/* UX Paket 2 / T1 final mobile authority. This file loads after styles.css,
   so the compact phone contract must finish the cascade here. */
.mobile-header-more { display: none; }

@media (max-width: 760px) {
  .content > .topbar,
  .module-page-header,
  .stations-card-header.module-page-header {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    min-height: 40px !important;
    height: auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  :is(.content > .topbar .title-block, .module-title-block) { min-width: 0; }
  :is(.content > .topbar .title-block, .module-title-block) > h1 + span { display: none !important; }
  .content > .topbar .topbar-actions { display: flex !important; flex: 0 0 auto; flex-wrap: nowrap !important; align-items: center; gap: 6px !important; width: auto !important; }
  .content > .topbar .topbar-actions > .mobile-header-wide-action { display: none !important; }
  .mobile-header-more { position: relative; display: block; }
  .mobile-header-more > summary { width: 40px; min-width: 40px; padding: 0; list-style: none; }
  .mobile-header-more > summary::-webkit-details-marker { display: none; }
  .mobile-header-more > div { position: absolute; z-index: 100; top: calc(100% + 6px); right: 0; display: grid; min-width: 205px; 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); }
  .mobile-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; }

  .product-kpis.product-kpi-grid > *,
  .work-orders-screen .work-order-kpis > *,
  .team-overview .team-kpi-grid > * { flex: 0 0 auto !important; width: auto !important; min-height: 34px !important; padding: 6px 10px !important; }
  .products-screen .product-kpis,
  .team-overview .team-kpi-grid { display: none !important; }

  #section-root .filter-disclosure-panel { padding: 6px !important; }
  #section-root .filter-disclosure-panel > .filter-primary-row { grid-template-columns: minmax(0,1fr) 44px !important; align-items: end; gap: 7px !important; }
  #section-root .filter-disclosure-panel > .filter-primary-row > label:first-child { grid-column: 1 !important; margin: 0 !important; }
  #section-root .filter-disclosure-panel > .filter-primary-row > label:first-child > span { display: none !important; }
  #section-root .filter-disclosure-panel > .filter-primary-row > label:not(:first-child),
  #section-root .filter-disclosure-panel > .filter-primary-row > .filter-reset-button { display: none !important; }
  #section-root .filter-disclosure-panel > .filter-primary-row > .filter-disclosure-button { grid-column: 2; width: 44px; min-width: 44px; max-width: 44px; }

  .work-orders-toolbar { padding: 6px !important; }
  .work-orders-mobile-filters { display: grid !important; grid-template-columns: minmax(0,1fr) 44px; align-items: end; gap: 7px !important; }
  .work-orders-mobile-filters > .work-search { grid-column: 1; margin: 0; }
  .work-orders-mobile-filters > .work-search > span { display: none; }
  .work-orders-mobile-filters > .work-order-mobile-filter-row { grid-column: 2; width: 44px; }
  .work-order-mobile-filter-details > summary { position: relative; width: 44px; min-width: 44px; padding: 0; overflow: visible; }
  .work-order-mobile-filter-details > summary > span,
  .work-order-mobile-filter-details > summary > svg:last-child { display: none; }
  .work-order-mobile-filter-details .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; }

  .station-area-tabs { min-height: 40px !important; height: 40px !important; margin: 8px 6px 0 !important; }
  .stations-screen { gap: 8px !important; }
  .stations-card-actions { flex-wrap: nowrap !important; width: auto !important; }
  .stations-card-actions > .primary-button { width: 40px !important; min-width: 40px !important; padding: 0 !important; }
  .stations-card-actions > .primary-button > span { display: none !important; }
  .stations-mobile-list,
  .team-mobile-list { padding: 8px !important; }

  .notes-tabs { min-height: 40px !important; height: 40px !important; padding-block: 0 !important; }
  .notes-list-toolbar { display: none !important; }

  .customers-area-head { flex-wrap: nowrap !important; gap: 8px !important; margin-bottom: 8px !important; }
  .customers-area-tabs { flex: 1 1 auto !important; flex-basis: auto !important; min-height: 40px !important; height: 40px !important; }
  .customers-area-actions { display: flex !important; flex: 0 0 auto; flex-wrap: nowrap !important; justify-content: flex-end; width: auto !important; }
  .customers-area-actions > * { width: auto !important; }
  .customers-area-actions > .mobile-header-more { flex: 0 0 40px; width: 40px !important; }
  .customers-area-actions > .mobile-header-wide-action { display: none !important; }
  .customers-area-actions > .primary-button { width: auto !important; min-width: 0 !important; }
}

/* Paket 2 QA fixes — final cascade authority. */
@media (min-width: 761px) and (max-width: 1024px) {
  :is(.content > .topbar, .module-page-header, .materials-head, .stations-card-header.module-page-header) { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
  :is(.topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) { display: flex !important; flex-flow: row nowrap !important; justify-content: flex-end !important; width: auto !important; }
  :is(.topbar-actions, .materials-head-actions, .stations-card-actions, .customers-area-actions) > :is(button, .primary-button, .secondary-button) { flex: 0 0 200px !important; width: 200px !important; min-width: 200px !important; height: 40px !important; }
}

@media (max-width: 760px) {
  html.mobile-filter-sheet-open,
  html.mobile-filter-sheet-open body { overflow: hidden !important; }
  html.mobile-filter-sheet-open .mobile-bottom-nav { display: none !important; }
  .mobile-filter-sheet-backdrop { position: fixed; z-index: 2390; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(7,22,36,.54); }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) { position: static !important; inset: auto !important; display: block !important; width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 6px !important; border: 1px solid var(--ds-border) !important; border-radius: 10px !important; box-shadow: none !important; overflow: visible !important; }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row { grid-template-columns: minmax(0,1fr) 44px !important; padding: 0 !important; }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > label:not(:first-child),
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-reset-button { display: none !important; }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button { position: relative !important; top: auto !important; right: auto !important; width: 44px !important; min-width: 44px !important; height: 40px !important; }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button > svg:first-child { display: block; }
  #section-root .filter-disclosure-panel:has(> .filter-extra-row:not([hidden])) > .filter-primary-row > .filter-disclosure-button > svg:last-child { display: none; }
  #section-root .mobile-filter-sheet-surface,
  .mobile-filter-details[open] > .mobile-filter-sheet-surface { position: fixed !important; z-index: 2400 !important; inset: auto 0 0 !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; width: 100% !important; max-width: 100% !important; max-height: min(78dvh,680px) !important; gap: 10px !important; margin: 0 !important; padding: 0 14px max(12px,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 !important; }
  #section-root .mobile-filter-sheet-surface[hidden] { display: none !important; }
  .mobile-filter-sheet-header { position: sticky; z-index: 2; top: 0; grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin: 0 -14px; padding: 8px 14px; border-bottom: 1px solid var(--ds-border); background: var(--ds-card); }
  .mobile-filter-sheet-footer { position: sticky; z-index: 2; bottom: calc(-1 * max(12px,env(safe-area-inset-bottom))); grid-column: 1/-1; display: block; margin: 2px -14px 0; padding: 10px 14px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-border); background: var(--ds-card); }
  .mobile-filter-sheet-footer > button { width: 100%; }
  .mobile-filter-sheet-surface :is(.stations-mobile-sort,.global-problem-mobile-sort) { display: contents !important; }
  .mobile-filter-sheet-surface :is(.stations-mobile-sort,.global-problem-mobile-sort) > div { display: none !important; }

  .items-runtime-toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) 44px !important; grid-template-rows: auto auto auto !important; gap: 7px !important; }
  .items-runtime-toolbar > .items-toolbar-search { grid-column: 1 !important; grid-row: 1 !important; }
  .items-runtime-toolbar > .items-mobile-filter-details { grid-column: 2 !important; grid-row: 1 !important; }
  .items-runtime-toolbar > .items-toolbar-actions { grid-column: 1/-1 !important; grid-row: 2 !important; width: 100% !important; }
  .items-runtime-toolbar > .items-toolbar-actions > .primary-button { width: 100% !important; }
  .items-runtime-toolbar > .items-assignment-warning { grid-column: 1/-1 !important; grid-row: 3 !important; margin: 0 !important; }

  .mobile-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  .stations-card-actions > .primary-button { width: auto !important; min-width: 40px !important; padding-inline: 11px !important; }
  .stations-card-actions > .primary-button > span { display: inline !important; }

  :is(.nx-content-tabs,.customers-area-tabs,.station-area-tabs,.global-problem-tabs,.work-order-kpis,.product-kpis,.team-kpi-grid) { scrollbar-width: none !important; }
  :is(.nx-content-tabs,.customers-area-tabs,.station-area-tabs,.global-problem-tabs,.work-order-kpis,.product-kpis,.team-kpi-grid)::-webkit-scrollbar { display: none !important; }
  .products-tabs { scroll-padding-inline: 12px; padding-right: 12px !important; }
  .products-tabs::after { content: ""; flex: 0 0 8px; }

  .problem-detail-backdrop { padding: 0 !important; overflow: hidden !important; }
  .problem-detail-modal { display: grid !important; grid-template-rows: auto minmax(0,1fr) auto !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; overflow: hidden !important; }
  .problem-detail-modal-header { padding: 12px 14px !important; }
  .problem-detail-modal-title > h2 { font-size: 17px; }
  .problem-detail-modal-body { min-height: 0 !important; padding: 10px 12px !important; overflow-y: auto !important; }
  .problem-modal-context { order: -1; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .problem-detail-modal .problem-detail-grid-page { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .problem-detail-modal :is(.problem-modal-overview-card,.problem-activity-card,.problem-timeline) { min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  .problem-detail-modal-footer { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px 12px max(10px,env(safe-area-inset-bottom)) !important; }
  .problem-detail-modal-footer > button { width: 100%; min-width: 0; }
  .problem-detail-modal-footer > button:only-child { grid-column: 1/-1; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  :is(.nx-content-tabs,.customers-area-tabs,.station-area-tabs,.global-problem-tabs,.work-order-kpis,.product-kpis,.team-kpi-grid) { scrollbar-width: none !important; }
  :is(.nx-content-tabs,.customers-area-tabs,.station-area-tabs,.global-problem-tabs,.work-order-kpis,.product-kpis,.team-kpi-grid)::-webkit-scrollbar { display: none !important; }
}

/* Keep every enabled module visible on short laptop screens without turning the
   primary navigation into an intentionally scrolling surface. */
@media (min-width: 981px) and (max-height: 960px) {
  .sidebar {
    gap: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .sidebar-brand {
    min-height: 34px;
    padding-block: 0;
  }

  .sidebar-brand img {
    max-height: 34px;
  }

  .company-locked-name {
    height: 34px;
    min-height: 34px;
  }

  .nav-list {
    gap: 1px;
  }

  .nav-list button {
    min-height: 34px;
  }

  .nav-group-label {
    margin: 4px 12px 2px;
    font-size: 8px;
  }

  .nav-list button.nav-group-start {
    margin-top: 2px;
  }

  .sidebar-company-signature {
    display: none;
  }
}

/* Paket 3 QA: NormaX leads the sidebar above its own divider; the client signs
   the bottom (logo, or the company name as plain text), a step smaller than
   NormaX. Both align with the navigation pictograms. Every group divider has
   the same room above and below, with or without a caption. No sidebar
   scrolling from 720 px height. */
.nav-group-label {
  position: relative;
  margin: 8px 12px 6px;
  padding-top: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.nav-group-label::before {
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  left: 2px;
  height: 1px;
  background: rgba(var(--ds-primary-border-rgb), 0.16);
}

.nav-list button.nav-group-start {
  margin-top: 19px;
}

.nav-list button.nav-group-start::before {
  top: -11px;
}

.nav-list > .nav-group-label + button.nav-group-start {
  margin-top: 0;
}

.nav-list > .nav-group-label + button.nav-group-start::before {
  display: none;
}

.sidebar-company-signature {
  border-top-color: rgba(var(--ds-primary-border-rgb), 0.16);
}

.sidebar-company-signature.is-name span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* Both full-sidebar brand slots share one size and one horizontal axis.
   Preserve image proportions and the existing short-screen/compact-menu rules. */
@media (min-width: 1367px) {
  .sidebar {
    --nx-sidebar-logo-width: 176px;
    --nx-sidebar-logo-height: 40px;
  }
  .sidebar > .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }
  .sidebar > .sidebar-brand img,
  .sidebar > .sidebar-company-signature img {
    display: block;
    width: var(--nx-sidebar-logo-width);
    max-width: 100%;
    height: var(--nx-sidebar-logo-height);
    max-height: var(--nx-sidebar-logo-height);
    object-fit: contain;
  }
  .sidebar > .sidebar-company-signature img {
    /* A word-only tenant mark needs less ink than NormaX's symbol + wordmark. */
    box-sizing: border-box;
    padding: 4px 18px;
  }
}
@media (min-width: 1367px) and (max-height: 960px) {
  .sidebar { --nx-sidebar-logo-height: 34px; }
}

@media (min-width: 1367px) {
  .sidebar-brand {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 6px 12px 18px;
    border-bottom: 1px solid rgba(var(--ds-primary-border-rgb), 0.16);
  }

  .sidebar-brand + .nav-list {
    padding-top: 12px;
  }
}

@media (min-width: 981px) and (max-height: 960px) {
  .sidebar {
    padding-bottom: 78px;
  }

  .nav-list {
    gap: 2px;
  }

  .nav-list button {
    min-height: 35px;
  }

  .nav-group-label {
    margin: 8px 12px 6px;
    padding-top: 10px;
    font-size: 9px;
  }

  .nav-list button.nav-group-start {
    margin-top: 19px;
  }

  .sidebar-company-signature {
    display: flex;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  .sidebar {
    padding-bottom: 64px;
  }

  .nav-list {
    gap: 1px;
  }

  .nav-list button {
    min-height: 33px;
  }

  .nav-group-label {
    margin: 5px 12px 4px;
    padding-top: 7px;
  }

  .nav-list button.nav-group-start {
    margin-top: 14px;
  }

  .nav-list button.nav-group-start::before {
    top: -8px;
  }
}

@media (min-width: 1367px) and (max-height: 820px) {
  .sidebar-brand {
    padding: 2px 12px 12px;
  }

  .sidebar-brand + .nav-list {
    padding-top: 8px;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .sidebar {
    padding-bottom: 12px;
  }

  .sidebar-company-signature {
    display: none;
  }
}

@media (min-width: 981px) and (max-width: 1366px) {
  .sidebar-company-signature {
    display: none;
  }
}

/* Paket 3 QA (phone): the "Više" panel mirrors the desktop rhythm. Every
   group starts under a full-width divider, and the header carries the client
   logo on the brand navy (the company name as text when there is no logo). */
@media (max-width: 980px) {
  .mobile-more-panel > header.mobile-more-brand {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 18px;
    border-bottom: 0;
    background: var(--nx-v2-navy);
  }

  .mobile-more-brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 20px;
    object-fit: contain;
  }

  .mobile-more-brand strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-more-group-label {
    padding-top: 12px;
    border-top: 1px solid var(--nx-v2-border);
  }

  .mobile-more-grid > .mobile-more-group-label:first-child {
    padding-top: 2px;
    border-top: 0;
  }

  .mobile-more-divider {
    grid-column: 1 / -1;
    height: 1px;
    margin: 2px 8px;
    background: var(--nx-v2-border);
  }
}

/* The notification count sits 3 px above the bell; #section-root scrolls and
   clips it, and the header padding is locked by an !important rule, so the
   Početna scroll container itself leaves the room. */
.content-dashboard > #section-root {
  padding-top: 4px;
}

/* Rokovi: "0 kasni" and "0 uskoro" wrap onto two lines in narrow KPI cards
   instead of running out of the card. */
.nx-command-deadline-values {
  flex-wrap: wrap;
  row-gap: 2px;
}

/* Radni nalog -> Problemi: the problem itself leads each row; filters follow the
   shared disclosure pattern (search and Status first, Tip and Prioritet under
   Filteri, a bottom sheet on phones); phones get a compact card. */
.problems-overview .problem-toolbar.filter-disclosure-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.problems-overview .problem-toolbar.filter-disclosure-panel > .filter-primary-row > .problem-search {
  flex: 1.8 1 260px;
  min-width: 200px;
}

.problems-overview .problem-toolbar.filter-disclosure-panel > .filter-extra-row {
  grid-template-columns: repeat(auto-fit, minmax(170px, 240px));
}

.problems-overview .problem-row-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ds-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.problems-overview .problem-table td[data-label="Problem"] .problem-code {
  margin-top: 3px;
  color: var(--ds-text-light);
  font-size: 11px;
  font-weight: 600;
}

@media (min-width: 861px) {
  .problems-overview .problem-table th:nth-child(1),
  .problems-overview .problem-table td:nth-child(1) { width: 27%; }
  .problems-overview .problem-table th:nth-child(2),
  .problems-overview .problem-table td:nth-child(2) { width: 11%; }
  .problems-overview .problem-table th:nth-child(3),
  .problems-overview .problem-table td:nth-child(3) { width: 9%; }
  .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: 10%; }
  .problems-overview .problem-table th:nth-child(6),
  .problems-overview .problem-table td:nth-child(6) { width: 11%; }
  .problems-overview .problem-table th:nth-child(7),
  .problems-overview .problem-table td:nth-child(7) { width: 12%; }
}

@media (max-width: 860px) {
  .problems-overview .problem-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 14px;
  }

  .problems-overview .problem-table td,
  .problems-overview .problem-table td:nth-child(n) {
    display: block;
    width: auto;
    border: 0;
  }

  .problems-overview .problem-table td::before {
    content: none;
  }

  .problems-overview .problem-table td[data-label="Problem"] {
    order: 1;
    flex: 1 1 calc(100% - 120px);
    min-width: 0;
  }

  .problems-overview .problem-table td[data-label="Status"] {
    order: 2;
    margin-left: auto;
  }

  .problems-overview .problem-table td[data-label="Stavka / Radna stanica"] {
    order: 3;
    flex: 1 1 100%;
    color: var(--ds-text);
  }

  .problems-overview .problem-table td[data-label="Stavka / Radna stanica"] :is(strong, small) {
    display: inline;
    font-size: 12px;
    font-weight: 600;
  }

  .problems-overview .problem-table td[data-label="Stavka / Radna stanica"] small::before {
    content: " · ";
  }

  .problems-overview .problem-table td:is([data-label="Prioritet"], [data-label="Tip problema"], [data-label="Datum prijave"], [data-label="Prijavio"], [data-label="Status"]) {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .problems-overview .problem-table td[data-label="Prioritet"] { order: 4; }
  .problems-overview .problem-table td[data-label="Tip problema"] { order: 5; }

  .problems-overview .problem-table td[data-label="Datum prijave"] { order: 6; margin-left: auto; }
  .problems-overview .problem-table td[data-label="Prijavio"] { order: 7; }

  .problems-overview .problem-toolbar .problem-search > span {
    display: none;
  }
}

/* Kupci and Prodaja lists: row actions are now a single "⋯" (plus the payment
   shortcut on invoices), so the sticky Akcije column stays narrow instead of
   covering a third of the table on tablets. */
.customers-hub-table .hub-col-actions {
  width: 96px;
}

.customer-work-orders-table .hub-col-actions {
  width: 72px;
}

/* Tim -> member card on phones: the footer no longer stacks up to four
   full-width buttons. The single main action (Sačuvaj izmene, or Nastavi while
   creating) leads at full width; Otkaži / Nazad / Nastavi share one row below
   it with centred labels (42 px), the same rhythm as the invoice editor. */
@media (max-width: 760px) {
  .team-member-wizard-modal .team-modal-footer {
    flex-direction: row;
  }

  .team-member-wizard-modal .team-modal-footer > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .team-member-wizard-modal .team-modal-footer > div > :is(.primary-button, .secondary-button) {
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding-inline: 12px;
  }

  .team-member-wizard-modal .team-modal-footer > div > .primary-button {
    order: -1;
    flex: 1 1 100%;
  }

  .team-member-wizard-modal .team-modal-footer > div > .secondary-button {
    flex: 1 1 0;
  }
}

/* Rule for every dialog on phones: button labels are centred, whatever width
   the button takes (Otkaži, Nazad, Sačuvaj ...). */
@media (max-width: 760px) {
  #modal-root :is(.primary-button, .secondary-button, .danger-button),
  .mobile-filter-sheet-surface :is(.primary-button, .secondary-button) {
    justify-content: center;
    text-align: center;
  }
}

/* Reporting periods: contained fields, shared desktop/phone layout. */
.operational-analytics-toolbar > .analytics-period-picker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.analytics-period-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-period-presets > button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.analytics-period-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; max-width: 780px; }
.analytics-period-fields 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); }
.analytics-period-fields .nx-date-control-wrap { width: 100%; min-width: 0; }
.analytics-period-hint { margin: 0; font-size: 12px; color: var(--ds-text-muted); }
/* Format marker, not the protected Adobe Acrobat logo. */
:is([data-action="download-work-order-analytics-pdf"], [data-action="consolidated-generate-pdf"], [data-action="analytics-operational-pdf"]) > svg { display: none; }
:is([data-action="download-work-order-analytics-pdf"], [data-action="consolidated-generate-pdf"], [data-action="analytics-operational-pdf"])::before {
  content: "PDF";
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background: #b42332;
  color: #fff;
  font: 750 9px/1 sans-serif;
  letter-spacing: .2px;
}
@media (max-width: 760px) {
  .analytics-mobile-period { height: 40px; padding: 0 9px; font: 600 12px/1.3 inherit; }
  .analytics-mobile-period > span { white-space: normal; text-align: left; }
  .analytics-mobile-period > svg:last-child { width: 12px; }
  .analytics-period-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Tablet Problems use the already established phone card projection. Column
   ownership is semantic, not nth-child: status/description cannot disappear
   when the desktop table gains columns. Desktop mouse layouts are unchanged. */
@media (min-width: 761px) and (max-width: 1180px), (min-width: 761px) and (pointer: coarse) {
  #section-root .global-problem-table-wrap { overflow: visible; }
  #section-root .global-problem-table { display: block; width: 100%; min-width: 0; max-width: 100%; }
  #section-root .global-problem-table thead { display: none; }
  #section-root .global-problem-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  #section-root .global-problem-table tbody tr:not(.empty-row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "rn status" "desc desc" "product product" "type priority" "date operator";
    gap: 7px 12px;
    min-width: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-input);
    padding: 12px;
    background: var(--ds-card);
  }
  #section-root .global-problem-table tbody tr:not(.empty-row) td {
    display: block !important;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    border: 0;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-align: left;
  }
  #section-root .global-problem-table td::before { content: none; }
  #section-root .global-problem-table .global-problem-col-order { grid-area: rn; font-size: 13px; }
  #section-root .global-problem-table .global-problem-col-status { grid-area: status; justify-self: end; align-self: start; }
  #section-root .global-problem-table .global-problem-col-description { grid-area: desc; font-size: 14px; font-weight: 650; line-height: 1.4; }
  #section-root .global-problem-table .global-problem-col-item { grid-area: product; color: var(--ds-text-light); }
  #section-root .global-problem-table .global-problem-col-type { grid-area: type; }
  #section-root .global-problem-table .global-problem-col-priority { grid-area: priority; justify-self: end; }
  #section-root .global-problem-table .global-problem-col-date { grid-area: date; color: var(--ds-text-light); }
  #section-root .global-problem-table .global-problem-col-operator { grid-area: operator; justify-self: end; color: var(--ds-text-light); }
  #section-root .global-problem-table .global-problem-operator { white-space: normal; justify-content: flex-end; }
  #section-root .global-problem-table .problem-status-badge { white-space: nowrap; max-width: none; }
  #section-root .global-problem-table tbody tr:not(.empty-row) :is(.global-problem-col-station, .global-problem-col-activity) { display: none !important; }
  #section-root .global-problem-table .empty-row { grid-column: 1 / -1; }
  #section-root .global-problem-mobile-sort { display: flex; flex-wrap: wrap; gap: 10px; }
}

/* The PDF viewer owns its three-row canvas. Generic modal padding must not
   consume the document area; overflow remains inside the local viewer iframe. */
.modal-panel.internal-pdf-preview {
  padding: 0;
  min-width: 0;
  max-width: calc(100vw - 36px);
  max-height: calc(100dvh - 36px);
}
.internal-pdf-frame-shell { min-width: 0; overflow: hidden; }
.internal-pdf-frame-shell iframe { display: block; min-width: 0; }
@media (max-width: 760px) {
  .internal-pdf-backdrop { padding: 0; }
  .modal-panel.internal-pdf-preview {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* Analytics overview density: scoped so operational reports and other modules
   retain their own hierarchy. Long values wrap instead of being clipped. */
.analytics-screen .analytics-topbar { padding: 0; }
.analytics-screen .analytics-tabs { border-radius: 9px; }
.analytics-screen .analytics-tabs button {
  min-width: 0; min-height: 40px; padding: 0 14px;
  font-size: 14px; font-weight: 650; white-space: nowrap;
}
.analytics-screen .analytics-tabs button svg { width: 16px; height: 16px; }
.analytics-screen .analytics-tabs button:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: -3px; }
.analytics-screen .analytics-selected-work-order { gap: 12px; }
.analytics-screen .analytics-selected-header { gap: 12px; padding-bottom: 0; }
.analytics-screen .analytics-selected-header h2 { margin: 3px 0; font-size: 18px; line-height: 1.3; }
.analytics-screen .analytics-selected-header p { margin: 0; font-size: 12px; }
.analytics-screen .wo-analytics-shell { gap: 10px; padding: 14px; }
.analytics-screen .wo-analytics-shell h2 { font-size: 17px; }
.analytics-screen .wo-analytics-kpi-group { margin-top: 10px; }
.analytics-screen .wo-analytics-kpi-group h3 { margin: 3px 0 0; font-size: 14px; }
.analytics-screen .wo-analytics-kpi-group header > small { display: none; }
.analytics-screen .wo-analytics-kpi-grid { gap: 8px; margin-top: 8px; }
.analytics-screen .wo-analytics-kpi-grid.operations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-screen .wo-analytics-kpi-card {
  min-height: 104px; padding: 11px 12px; gap: 5px; border-radius: 9px;
}
.analytics-screen .wo-analytics-kpi-card > span {
  padding-right: 18px; font-size: 11px; font-weight: 650; line-height: 1.4;
  text-transform: none; letter-spacing: 0;
}
.analytics-screen .wo-analytics-kpi-card strong { font-size: 17px; line-height: 1.3; }
.analytics-screen .wo-analytics-kpi-card:is(.positive, .negative) strong { font-size: 18px; }
.analytics-screen .wo-analytics-kpi-card small {
  font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4;
}
.analytics-screen .wo-analytics-kpi-card > em { top: 10px; right: 9px; }
.analytics-screen .wo-analytics-financial-scope { margin-top: 8px; padding: 8px 10px; font-size: 11px; }
.analytics-screen .wo-analytics-summary-actions { gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.analytics-screen .consolidated-detail { gap: 12px; }
.analytics-screen .consolidated-title-line h2 { font-size: 18px; line-height: 1.3; }
.analytics-screen .consolidated-operational-kpis article { padding: 9px 10px; }
.analytics-screen .consolidated-operational-kpis strong { font-size: 16px; line-height: 1.3; }
.analytics-screen .consolidated-operational-kpis span { font-size: 12px; }
.analytics-screen .consolidated-currency-blocks { gap: 10px; margin-top: 10px; }
.analytics-screen .consolidated-currency-block { padding: 12px; gap: 9px; border-radius: 9px; }
.analytics-screen .consolidated-currency-block h3 { font-size: 16px; }
.analytics-screen .consolidated-financial-summary dd { font-size: 16px; }
.analytics-screen .consolidated-financial-summary > :is(.positive, .negative) dd { font-size: 18px; }
.analytics-screen .consolidated-detail-grid { gap: 10px; }
.analytics-screen .consolidated-detail-grid > article { padding: 12px; }
.analytics-screen .consolidated-detail-grid h3 { font-size: 14px; }
.analytics-screen .wo-analytics-report-toolbar {
  margin-top: 4px; padding: 10px 12px; gap: 12px; border-radius: 9px;
}
.analytics-screen .wo-analytics-report-toolbar label > span { font-size: 12px; font-weight: 600; }
.analytics-screen .wo-analytics-report-toolbar label > small { font-size: 11px; text-transform: none; font-weight: 400; }
.analytics-screen .wo-analytics-report-toolbar input[type="checkbox"] {
  width: 17px; min-width: 17px; height: 17px; min-height: 17px !important;
  max-height: 17px; padding: 0; align-self: center;
}
.analytics-screen .wo-analytics-card-head { gap: 10px; flex-wrap: wrap; }
.analytics-screen .consolidated-head-actions > button { min-width: 96px; width: 96px; }
.analytics-screen .consolidated-delete-command { margin-left: 8px; }
.analytics-screen .wo-analytics-kpi-card.is-incomplete,
.analytics-screen .consolidated-currency-block dl > .is-incomplete,
.analytics-screen .consolidated-financial-summary > .partial {
  background: #fff8e9; border-color: #ead8ad;
}
.analytics-screen .wo-analytics-kpi-card.is-incomplete > :is(span, strong, em) { color: #795819; }
.analytics-screen .wo-analytics-kpi-card.is-incomplete.interactive:hover { background: #fff2d6; border-color: #cda95c; }
.analytics-screen .wo-analytics-kpi-card:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.analytics-screen .consolidated-currency-block .consolidated-financial-sources > .is-incomplete { padding: 7px; border-radius: 6px; }
.analytics-screen .consolidated-financial-summary > .partial,
.analytics-screen .consolidated-currency-block dl > .is-incomplete { color: #795819; }
.analytics-screen .consolidated-metric-button { text-decoration: underline dotted; text-underline-offset: 4px; }
.analytics-screen .consolidated-blocker-link { min-height: 36px; }
/* Short laptop viewports: remove doubled spacing, never constrain content
   height or hide overflow. Additional/long data may still grow naturally. */
@media (min-width: 1181px) and (max-height: 900px) {
  .content:has(.analytics-selected-work-order) > .content-signature { margin-top: 12px; }
  .analytics-screen { gap: 12px; }
  .analytics-screen .analytics-selected-header > div > small { display: block; font-size: 12px; line-height: 16px; }
  .analytics-screen .wo-analytics-shell { padding: 12px; gap: 8px; }
  .analytics-screen .wo-analytics-kpi-group { margin-top: 0; }
  .analytics-screen .wo-analytics-kpi-group h3 { margin-top: 0; }
  .analytics-screen .wo-analytics-kpi-grid { margin-top: 6px; }
  .analytics-screen .wo-analytics-kpi-card { min-height: 96px; }
  .analytics-screen .wo-analytics-summary-actions,
  .analytics-screen .wo-analytics-report-toolbar { margin-top: 0; }
}

@media (max-width: 1180px) {
  .analytics-screen .wo-analytics-kpi-grid.operations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .analytics-screen .analytics-tabs button { min-height: 40px; padding: 0 11px; }
  .analytics-screen .wo-analytics-shell { padding: 11px; }
  .analytics-screen .wo-analytics-kpi-grid,
  .analytics-screen .wo-analytics-kpi-grid.operations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-screen .wo-analytics-kpi-card { padding: 10px; min-height: 104px; }
  .analytics-screen .wo-analytics-kpi-card strong { font-size: 16px; }
  .analytics-screen .wo-analytics-kpi-card:is(.positive, .negative) strong { font-size: 18px; }
  .analytics-screen .wo-analytics-summary-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .analytics-screen .consolidated-currency-block dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-screen .wo-analytics-card-head { align-items: flex-start; }
  .analytics-screen .wo-analytics-card-head > button { width: auto; min-width: 0; }
  .analytics-screen .consolidated-detail-head { gap: 8px; }
  .analytics-screen .consolidated-head-actions { width: 100%; gap: 8px; }
  .analytics-screen .consolidated-head-actions > button { flex: 1; width: auto; min-width: 0; }
  .analytics-screen .consolidated-delete-command { margin-left: 4px; }
}

/* Tablet audit P1: local scrolling is preferable to losing invoice amounts,
   dates or document identities through the legacy fixed/equal column budget. */
@media (min-width: 761px) and (max-width: 1180px) {
  #section-root :is(.work-order-table-wrap-landscape, .archive-table-wrap-landscape),
  #section-root .customers-hub-list .work-order-table-wrap,
  .customer-invoices-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  #section-root .work-orders-table.work-orders-table-landscape { min-width: 1050px !important; table-layout: auto; }
  #section-root .archive-table.archive-table-landscape { min-width: 1020px !important; table-layout: auto; }
  #section-root :is(.work-orders-table.work-orders-table-landscape, .archive-table.archive-table-landscape) col { width: auto !important; }
  #section-root :is(.work-orders-table-landscape, .archive-table-landscape) td {
    overflow: visible; text-overflow: clip;
  }
  #section-root .work-orders-table-landscape :is(th, td):first-child { min-width: 165px; white-space: nowrap; }
  #section-root .work-orders-table-landscape :is(th, td):is(:nth-child(2), :nth-child(6), :nth-child(7)) { min-width: 105px; white-space: nowrap; }
  #section-root .archive-table-landscape :is(th, td):nth-child(4) { min-width: 205px; }
  #section-root .archive-table-landscape .archive-date { white-space: nowrap; overflow: visible; text-overflow: clip; }
  #section-root .customers-hub-list { min-width: 0; }
  #section-root .customers-screen .customers-hub-table { min-width: 1100px !important; table-layout: auto; }
  /* Customer-order names are descriptive cells, not compact date/code cells.
     Keep the existing table budget and allow its rows to grow naturally. */
  #section-root .customers-screen .customer-work-orders-table :is(th, td):nth-child(4) {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  }
  #section-root .customers-screen .customers-hub-table :is(th, td):nth-child(2) { min-width: 145px; white-space: nowrap; overflow-wrap: normal; }
  #section-root .customers-screen .customers-hub-table th { white-space: normal; overflow-wrap: normal; word-break: normal; }
  #section-root .customers-screen .customers-hub-table .hub-col-amount { min-width: 140px; white-space: nowrap; overflow: visible; text-overflow: clip; }
  #section-root .customers-screen .customers-hub-table .hub-col-date { min-width: 105px; white-space: nowrap; }
  #section-root .customers-screen .customers-hub-table .hub-col-status { min-width: 150px; overflow: visible; }
  #section-root .customers-hub-table .hub-col-status .status-badge { white-space: nowrap; max-width: none; }
  .customer-invoices-table { min-width: 1096px; table-layout: auto; }
}

/* Tablet audit P1: reuse the existing complete final-spec cards in the
   701-980px gap where the table is hidden but cards were also hidden. */
.wo-material-final-section { min-width: 0; }
@media (min-width: 701px) and (max-width: 980px) {
  .wo-material-final-table-scroll { display: none; }
  .wo-material-final-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Tablet audit P1: identity cannot share a 720px row with two 200px commands. */
@media (min-width: 761px) and (max-width: 980px) {
  .work-order-detail-shell .wo-detail-header {
    grid-template-columns: minmax(0, 1fr) 200px 200px;
    grid-template-rows: auto 40px auto;
  }
  .wo-detail-header-identity { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
  .wo-detail-header-tools { grid-column: 2; grid-row: 2; }
  .wo-detail-header-completion { grid-column: 3; grid-row: 2; }
  .wo-detail-header:not(.has-completion) .wo-detail-header-tools { grid-column: 3; }
  .wo-detail-header-meta { grid-column: 1 / 3; grid-row: 3; flex-wrap: wrap; overflow: visible; }
  .wo-detail-progress-compact { grid-column: 3; grid-row: 3; }
}

/* Tablet audit P1: the legacy <=1024 block must not turn a problem dialog
   back into a scrolling backdrop with a fixed-height, overlapping header. */
@media (min-width: 761px) and (max-width: 1180px) {
  #modal-root .problem-detail-backdrop { padding: 16px; overflow: hidden; align-items: center; }
  #modal-root .modal-panel.runtime-problem-detail-modal {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1040px, calc(100vw - 32px)); max-width: 100%;
    height: min(860px, calc(100dvh - 32px));
    min-height: 0; max-height: calc(100dvh - 32px); overflow: hidden;
  }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-header {
    height: auto; min-height: 0; max-height: none; align-items: flex-start;
    padding: 12px 64px 12px 16px;
  }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-title { min-width: 0; }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-title > h2 {
    white-space: normal; overflow-wrap: anywhere; max-height: none;
  }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-body {
    display: flex; flex-direction: column; min-height: 0; height: auto;
    max-height: none; overflow-y: auto; overflow-x: hidden;
  }
  #modal-root .runtime-problem-detail-modal .problem-modal-context { order: -1; flex: 0 0 auto; }
  #modal-root .runtime-problem-detail-modal .problem-detail-grid-page {
    display: grid; grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; min-width: 0;
  }
  #modal-root .runtime-problem-detail-modal :is(.problem-modal-overview-card, .problem-activity-card, .problem-timeline) {
    min-width: 0; height: auto; max-height: none; overflow: visible;
  }
  #modal-root .runtime-problem-detail-modal .problem-detail-modal-footer {
    position: static; min-width: 0; flex-wrap: wrap; margin-top: 0;
  }
}

/* Tablet lists reuse the phone card projection, not a second set of actions.
   Natural height and wrapping keep long names and every existing value visible. */
@media (min-width: 761px) and (max-width: 980px) {
  #section-root :is(.team-table-wrap, .stations-table-wrap, .machines-table-wrap, .notes-screen .notes-table-shell) { display: none !important; }
  #section-root :is(.team-mobile-list, .stations-mobile-list, .machine-card-list, .notes-mobile-cards) {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px;
  }
}

/* Tablet controls retain their existing disclosure owner and hidden state.
   Wrap controls instead of compressing selected values or introducing a sheet. */
@media (min-width: 761px) and (max-width: 1180px) {
  .content > .topbar:has(.topbar-actions > :nth-child(3)),
  .module-page-header:has(.module-header-actions > :nth-child(3)) {
    flex-wrap: wrap; align-items: flex-start; gap: 10px;
  }
  .content > .topbar:has(.topbar-actions > :nth-child(3)) > .title-block { flex: 1 0 100%; }
  .content > .topbar .topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 100%; margin-left: auto; }
  #section-root .filter-disclosure-panel > .filter-primary-row { flex-wrap: wrap; gap: 8px; }
  #section-root .filter-disclosure-panel > .filter-primary-row > label { flex: 1 1 180px; min-width: 160px; }
  #section-root .filter-disclosure-panel > .filter-primary-row > label:first-child { flex: 2 1 260px; min-width: 220px; }
  #section-root .filter-disclosure-panel > .filter-primary-row > label :is(input, select) { width: 100%; min-width: 0; }
  #section-root .filter-disclosure-panel > .filter-primary-row > button { min-height: 40px; }
  #section-root .filter-disclosure-panel > .filter-extra-row:not([hidden]) { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
  #section-root .filter-disclosure-panel > .filter-extra-row[hidden] { display: none !important; }
  #section-root :is(.product-kpi-grid, .work-order-kpis, .analytics-tabs, .station-area-tabs, .module-tabs) { scrollbar-width: none; }
  #section-root :is(.product-kpi-grid, .work-order-kpis, .analytics-tabs, .station-area-tabs, .module-tabs)::-webkit-scrollbar { display: none; }
}

/* One shared tablet list footer: keep controls together, summary may wrap. */
@media (min-width: 761px) and (max-width: 1180px) {
  :is(#section-root, #modal-root) footer.list-pagination { flex-direction: row; align-items: center; gap: 8px 12px; padding: 10px 12px; }
  :is(#section-root, #modal-root) footer.list-pagination > .product-pagination-summary { flex: 1 1 160px; min-width: 0; font-size: 12px; }
  :is(#section-root, #modal-root) footer.list-pagination > .product-pagination-controls { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; }
  :is(#section-root, #modal-root) footer.list-pagination .product-page-size { width: auto; gap: 6px; }
  :is(#section-root, #modal-root) footer.list-pagination .product-page-size > span { font-size: 12px; }
  :is(#section-root, #modal-root) footer.list-pagination .product-page-nav { width: auto; gap: 4px; flex-wrap: wrap; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  #section-root :is(.work-order-card, .shipment-card, .archive-card, .product-card, .material-card, .customers-card, .team-mobile-card, .station-mobile-card, .machine-mobile-card, .note-mobile-card) {
    min-width: 0; min-height: 0; max-height: none; height: auto; padding: 12px; gap: 9px; overflow: visible;
  }
  #section-root :is(.work-order-card, .shipment-card, .archive-card, .product-card, .material-card, .customers-card, .team-mobile-card, .station-mobile-card, .machine-mobile-card, .note-mobile-card) > header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0;
  }
  #section-root :is(.work-order-card, .shipment-card, .archive-card, .product-card, .material-card, .customers-card, .team-mobile-card, .station-mobile-card, .machine-mobile-card, .note-mobile-card) > header > :first-child { min-width: 0; flex: 1; }
  #section-root .mobile-card-head-actions { flex: 0 0 auto; align-items: flex-start; }
  /* Reuse the phone's quiet icon shortcut: a full-width command must not
     consume the title column in a two-card tablet grid. */
  #section-root .work-order-card:not(.customers-card) .mobile-card-head-actions > button[data-action="send-order-shipment"] {
    width: 32px; min-width: 32px; height: 32px; padding: 0;
  }
  #section-root .work-order-card:not(.customers-card) .mobile-card-head-actions > button[data-action="send-order-shipment"] > span { display: none; }
  #section-root .work-order-card-grid { align-items: start; }
  #section-root :is(.work-order-card, .shipment-card, .archive-card, .product-card, .material-card, .customers-card, .team-mobile-card, .station-mobile-card, .machine-mobile-card, .note-mobile-card) :is(h2, h3, header strong, header small, dd, .station-mobile-name) {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  }
  #section-root :is(.work-order-card, .shipment-card, .archive-card, .product-card, .material-card, .customers-card, .team-mobile-card, .machine-mobile-card, .note-mobile-card) dl {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin: 0;
  }
  #section-root .stations-table :is(th, td) { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  #section-root .stations-table .station-realization-pill { min-width: 0; white-space: normal; max-width: 100%; }
  #section-root .stations-table .station-realization-pill strong { white-space: normal; }
  #section-root .stations-mobile-list { align-items: start; }
}

/* CRM has no action column. Its last cell is an author, never a pinned action. */
#section-root .customers-screen .customers-crm-table :is(th, td):last-child {
  position: static; right: auto; z-index: auto; box-shadow: none;
}
@media (min-width: 761px) and (max-width: 1180px) {
  #section-root .customers-screen .customers-hub-table.customers-crm-table { min-width: 780px !important; table-layout: auto; }
  #section-root .customers-screen .customers-crm-table :is(th, td):nth-child(2) { min-width: 90px; }
  #section-root .customers-crm-table :is(th, td):nth-child(4) { min-width: 240px; white-space: normal; overflow-wrap: anywhere; }
  #section-root .customers-crm-table .hub-col-creator { min-width: 130px; white-space: normal; }
  #section-root .customers-crm-table .hub-creator > span { white-space: normal; overflow: visible; }
}

/* Tablet analytics: compact controls and KPIs, preserve all report values. */
@media (min-width: 761px) and (max-width: 1180px) {
  .analytics-screen { gap: 10px; }
  .analytics-screen .analytics-filter-row { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .analytics-screen .analytics-filter-row > :is(label, select, input) { min-width: 160px; flex: 1 1 180px; }
  .operational-analytics-toolbar-main { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .operational-analytics-toolbar-main .operational-primary-filter { order: 0; flex: 1 1 180px; min-width: 180px; }
  .operational-analytics-screen .analytics-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .operational-analytics-screen .operational-kpi-card { min-height: 72px; padding: 10px; gap: 6px; }
  .operational-analytics-screen .operational-kpi-card :is(strong, small) { overflow-wrap: anywhere; white-space: normal; }
  .operational-analytics-screen .operational-management-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #section-root .operational-analytics-screen .analytics-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  #section-root .operational-analytics-screen .analytics-table { min-width: 790px !important; table-layout: auto; }
  #section-root .operational-analytics-screen .analytics-table :is(th, td) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
  .analytics-screen .wo-analytics-kpi-card { min-height: 86px; }
  .analytics-screen .operational-period-panel { gap: 8px; padding: 10px; }
}

/* Tablet scrap: legible evidence beats equal-width cells with ellipsis. */
@media (min-width: 761px) and (max-width: 1180px) {
  .scrap-premium-screen .scrap-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scrap-premium-screen .scrap-chart-card { min-height: 0; padding: 12px; }
  .scrap-premium-screen .scrap-chart-card h2 { margin-bottom: 10px; font-size: 15px; }
  .scrap-premium-screen .scrap-reason-donut-layout { grid-template-columns: 140px minmax(0, 1fr); gap: 10px; min-height: 150px; }
  .scrap-premium-screen .scrap-reason-donut,
  .scrap-premium-screen .scrap-reason-donut > .chart-donut-svg { width: 140px; height: 140px; }
  #section-root .scrap-premium-screen :is(.scrap-events-table-wrap, .scrap-material-table-wrap) { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  #section-root .scrap-premium-screen :is(.scrap-events-table-wrap table, .scrap-material-table) { min-width: 1020px !important; table-layout: auto; }
  #section-root .scrap-premium-screen :is(.scrap-events-table-wrap, .scrap-material-table) :is(th, td) { width: auto; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: normal; }
  #section-root .scrap-premium-screen .scrap-events-table-wrap :is(th, td):nth-child(2) { min-width: 155px; white-space: nowrap; }
  #section-root .scrap-premium-screen .scrap-events-table-wrap button { white-space: nowrap; }
  .scrap-premium-screen .scrap-reason-legend { width: 100%; min-width: 0; }
  .scrap-premium-screen .scrap-reason-legend > div { grid-template-columns: 9px minmax(0, 1fr) auto auto; gap: 6px; }
  .scrap-premium-screen .scrap-reason-legend span { white-space: normal; overflow: visible; }
}

/* Tablet dossier: existing documents stay ahead of oversized empty blocks. */
@media (min-width: 761px) and (max-width: 1180px) {
  .wo-documents-tab { padding: 12px; }
  .wo-documents-head { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .wo-documents-head-actions { flex-wrap: wrap; gap: 8px; }
  .wo-documents-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wo-documents-panel { padding: 12px; gap: 8px; }
  .wo-documents-panel h3 { font-size: 15px; line-height: 1.35; }
  .wo-documents-panel:has(.wo-documents-empty) { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .wo-documents-panel:has(.wo-documents-empty) .wo-documents-empty { grid-column: 1 / -1; }
  .wo-documents-empty { min-height: 0; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 8px; }
  .wo-documents-empty svg { width: 18px; height: 18px; }
  .wo-document-group.is-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; }
  .wo-document-group.is-empty > header { flex: 1; margin: 0; }
  .wo-document-group.is-empty .wo-document-empty-row { padding: 0; border: 0; background: transparent; }
  .wo-document-card { min-width: 0; padding: 9px; }
  .wo-document-copy :is(strong, small) { white-space: normal; overflow-wrap: anywhere; }
}

/* Tablet forms: readable instructions, compact summary, existing modal docks. */
@media (min-width: 761px) and (max-width: 1180px) {
  #modal-root .flow-modal-title :is(h2, p),
  #modal-root #generic-modal-description {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    max-height: none; -webkit-line-clamp: unset;
  }
  #modal-root .material-modal-body { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  #modal-root .material-form-grid { gap: 12px; padding: 14px; }
  #modal-root .material-readonly { min-width: 0; padding: 14px; }
  #modal-root .material-readonly dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  #modal-root .material-readonly dl > div { grid-template-columns: minmax(0, 1fr) auto; min-height: 40px; gap: 8px; }
  #modal-root .material-readonly :is(dt, dd) { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  #modal-root :is(.material-detail-tabs, .team-wizard-tabs, .product-wizard-tabs, .station-scope-tabs) {
    display: flex; flex-wrap: nowrap; min-width: 0; max-width: 100%; gap: 4px; overflow-x: auto; scrollbar-width: none;
  }
  #modal-root :is(.material-detail-tabs, .team-wizard-tabs, .product-wizard-tabs, .station-scope-tabs) button {
    flex: 0 0 auto; min-height: 40px; padding: 0 12px; font-size: 13px; font-weight: 650; white-space: nowrap;
  }
  #modal-root :is(.material-detail-tabs, .team-wizard-tabs, .product-wizard-tabs, .station-scope-tabs)::-webkit-scrollbar { display: none; }
  #modal-root [data-generic-modal="true"] [data-action="modal-workspace-minimize"] { display: none; }
}

.compact-filter-only { display: none; }
.customer-hub-mobile-list { display: none; }

/* U2: portrait business lists reuse their existing card renderers and actions.
   Calculation/report tables deliberately keep their own local table scroll. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  #section-root :is(.work-order-table-wrap-desktop, .work-order-table-wrap-landscape, .shipment-table-wrap-desktop, .shipment-table-wrap-landscape, .archive-table-wrap-desktop, .archive-table-wrap-landscape, .products-table-wrap-desktop, .products-table-wrap-landscape, .customer-products-table-wrap, .team-table-wrap, .stations-table-wrap, .machines-table-wrap, .notes-screen .notes-table-shell, .materials-table) { display: none !important; }
  :is(#section-root, #modal-root) :is(.customer-work-orders-table-wrap, .customer-invoices-table-wrap) { display: none !important; }
  #section-root :is(.work-order-card-grid, .shipment-card-grid, .archive-card-grid, .product-card-grid, .customer-product-card-grid, .materials-cards, .team-mobile-list, .stations-mobile-list, .machine-card-list, .notes-mobile-cards),
  :is(#section-root, #modal-root) :is(.customer-work-order-mobile-list, .customer-invoices-cards) { display: grid !important; grid-template-columns: minmax(0,1fr); gap: 10px; min-width: 0; }
  :is(#section-root, #modal-root) :is(.work-order-card, .shipment-card, .archive-card, .product-card, .material-card, .customers-card, .team-mobile-card, .station-mobile-card, .machine-mobile-card, .note-mobile-card, .customer-invoice-card, .customer-work-order-mobile-card) { min-width: 0; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 12px !important; }
  :is(#section-root, #modal-root) :is(.customer-invoice-card, .customer-work-order-mobile-card) { display: grid; gap: 8px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); cursor: pointer; }
  :is(#section-root, #modal-root) :is(.customer-invoice-card, .customer-work-order-mobile-card) > header { display: flex; align-items: flex-start; justify-content: space-between; min-width: 0; gap: 8px; }
  :is(#section-root, #modal-root) :is(.customer-invoice-card, .customer-work-order-mobile-card) > header > div:first-child { display: grid; min-width: 0; gap: 3px; }
  :is(#section-root, #modal-root) .customer-work-order-mobile-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  :is(#section-root, #modal-root) .customer-work-order-mobile-card > p { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0; font-size: 12px; }
  :is(#section-root, #modal-root) :is(.work-order-card, .shipment-card, .archive-card, .product-card, .material-card, .customers-card, .team-mobile-card, .station-mobile-card, .machine-mobile-card, .note-mobile-card, .customer-invoice-card, .customer-work-order-mobile-card) :is(h2,h3,strong,small,dd,header span) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
}
@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  #section-root :is(.work-order-card-grid, .shipment-card-grid, .archive-card-grid, .product-card-grid, .customer-product-card-grid, .materials-cards, .team-mobile-list, .stations-mobile-list, .machine-card-list, .notes-mobile-cards),
  :is(#section-root, #modal-root) :is(.customer-work-order-mobile-list, .customer-invoices-cards) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  :is(#section-root, #modal-root) .customers-hub-list:has(.customer-hub-mobile-list) > .work-order-table-wrap { display: none !important; }
  .customer-hub-mobile-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 10px; }
  .customer-hub-mobile-card { display: grid; min-width: 0; gap: 8px; padding: 12px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); cursor: pointer; }
  .customer-hub-mobile-card:focus-visible { outline: 2px solid var(--ds-primary-border); outline-offset: 2px; }
  .customer-hub-mobile-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .customer-hub-mobile-card > header > strong { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
  .customer-hub-mobile-card .row-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; }
  .customer-hub-card-customer { display: grid; gap: 3px; margin: 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
  .customer-hub-card-customer small { color: var(--ds-text-light); font-size: 11px; font-weight: 500; }
  .customer-hub-card-comment { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
  .customer-hub-mobile-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; margin: 0; }
  .customer-hub-mobile-card dl > div { display: grid; gap: 3px; min-width: 0; }
  .customer-hub-mobile-card dt { font-size: 11px; color: var(--ds-text-light); }
  .customer-hub-mobile-card dd { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; flex-wrap: wrap; }
  .customer-hub-mobile-card dd svg { width: 14px; height: 14px; flex: 0 0 auto; }
}
.compact-filter-panel > .filter-primary-row > .filter-disclosure-button { display: none; }
:is(#section-root, #modal-root) .customer-invoices-toolbar .filter-disclosure-panel > .filter-primary-row { display: contents; }
.customer-quotation-toolbar .filter-extra-row { grid-column: 1 / -1; }
:is(#section-root, #modal-root) :is(.items-runtime-toolbar, .machine-filter-card) > .filter-primary-row { display: contents !important; }
:is(.items-runtime-toolbar, .machine-filter-card) > .filter-primary-row > .filter-disclosure-button,
:is(.items-runtime-toolbar, .machine-filter-card) > .filter-extra-row { display: none; }
@media (min-width: 1181px), (min-width: 761px) and (orientation: landscape) {
  :is(#section-root, #modal-root) .customer-invoices-toolbar .filter-disclosure-panel { display: grid !important; }
  #section-root .items-runtime-toolbar.filter-disclosure-panel { grid-template-columns: minmax(260px,1fr) minmax(150px,180px) minmax(170px,220px) auto !important; }
  #section-root .machine-filter-card.filter-disclosure-panel { grid-template-columns: minmax(260px,1.6fr) minmax(190px,1fr) minmax(150px,.72fr) auto !important; }
}
@media (min-width: 761px) and (max-width: 1180px) and (orientation: landscape) {
  #section-root .items-runtime-toolbar.filter-disclosure-panel { grid-template-columns: minmax(0,1fr) minmax(140px,170px) minmax(150px,190px) !important; }
  #section-root .machine-filter-card.filter-disclosure-panel { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

/* Resolving a problem is a success action; sending a message stays primary blue. */
#modal-root .primary-button:is([data-action="resolve-problem"], [data-confirm^="resolve-problem-final:"]) {
  background: var(--ds-success-text);
  border-color: var(--ds-success-text);
  color: #fff;
}
#modal-root .primary-button:is([data-action="resolve-problem"], [data-confirm^="resolve-problem-final:"]):hover {
  background: color-mix(in srgb, var(--ds-success-text) 88%, #000);
  border-color: color-mix(in srgb, var(--ds-success-text) 88%, #000);
}

/* U1: one filter surface for phones and portrait tablets. Keep this media
   contract identical to compactFilterMedia; landscape/desktop are unchanged. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  :is(#section-root, #modal-root) .work-orders-desktop-filters.filter-disclosure-panel { display: block !important; }
  :is(#section-root, #modal-root) .work-orders-toolbar:has(> .work-orders-desktop-filters.filter-disclosure-panel) > .work-orders-mobile-filters { display: none !important; }
  :is(#section-root, #modal-root) .filter-disclosure-panel { min-width: 0; padding: 8px !important; }
  :is(#section-root, #modal-root) .filter-disclosure-panel > .filter-primary-row { display: grid !important; grid-template-columns: minmax(0,1fr) 44px !important; align-items: end; gap: 8px !important; }
  :is(#section-root, #modal-root) .filter-primary-row > label:first-child { min-width: 0 !important; width: 100%; margin: 0; }
  :is(#section-root, #modal-root) .filter-primary-row > label:first-child > span { display: none; }
  :is(#section-root, #modal-root) .filter-primary-row > .filter-disclosure-button { grid-column: 2; width: 44px !important; min-width: 44px !important; padding: 0; position: relative; }
  :is(#section-root, #modal-root) :is(.items-runtime-toolbar, .machine-filter-card) > .filter-primary-row > .filter-disclosure-button { display: inline-flex; }
  :is(#section-root, #modal-root) .compact-filter-panel > .filter-primary-row > .filter-disclosure-button { display: inline-flex; }
  :is(#section-root, #modal-root) .customer-invoices-toolbar .compact-filter-panel > .filter-primary-row { display: grid !important; }
  :is(#section-root, #modal-root) .filter-primary-row > .filter-disclosure-button > :is(span,svg:last-child) { display: none; }
  :is(#section-root, #modal-root) .filter-disclosure-panel > .filter-extra-row[hidden] { display: none !important; }
  html.mobile-filter-sheet-open, html.mobile-filter-sheet-open body { overflow: hidden !important; }
  html.mobile-filter-sheet-open .mobile-bottom-nav { display: none !important; }
  .mobile-filter-sheet-backdrop { display: block; position: fixed; z-index: 2390; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(7,22,36,.54); }
  :is(#section-root, #modal-root) .mobile-filter-sheet-surface,
  .mobile-filter-details[open] > .mobile-filter-sheet-surface {
    position: fixed !important; z-index: 2400 !important; inset: auto 0 0 !important;
    box-sizing: border-box; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    width: 100% !important; max-width: 100% !important; max-height: min(78dvh,680px) !important;
    gap: 10px !important; margin: 0 !important; padding: 0 14px max(12px,env(safe-area-inset-bottom)) !important;
    border: 0 !important; border-radius: 16px 16px 0 0 !important; background: var(--ds-card);
    box-shadow: 0 -18px 50px rgba(8,27,43,.28); overflow-y: auto !important;
  }
  :is(#section-root, #modal-root) .mobile-filter-sheet-surface[hidden] { display: none !important; }
  .mobile-filter-sheet-header { position: sticky; top: 0; z-index: 2; grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin: 0 -14px; padding: 8px 14px; border-bottom: 1px solid var(--ds-border); background: var(--ds-card); }
  .mobile-filter-sheet-footer { display: block; position: sticky; bottom: 0; z-index: 2; grid-column: 1/-1; margin: 2px -14px 0; padding: 10px 14px; border-top: 1px solid var(--ds-border); background: var(--ds-card); }
  .mobile-filter-sheet-footer > button { width: 100%; justify-content: center; }
  .mobile-filter-sheet-surface > label { min-width: 0; display: grid; gap: 6px; }
  .mobile-filter-sheet-surface :is(input,select) { width: 100%; min-width: 0; }
  .mobile-filter-sheet-surface :is(.stations-mobile-sort,.global-problem-mobile-sort) { display: contents !important; }
  .mobile-filter-sheet-surface :is(.stations-mobile-sort,.global-problem-mobile-sort) > div { display: none !important; }
  #section-root .items-runtime-toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto auto auto !important; gap: 8px !important; }
  #section-root .items-runtime-toolbar > .filter-primary-row { grid-column: 1; grid-row: 1; }
  :is(#section-root, #modal-root) :is(.items-runtime-toolbar, .machine-filter-card) > .filter-primary-row { display: grid !important; }
  #section-root .items-runtime-toolbar > .items-toolbar-actions { grid-column: 1; grid-row: 2; width: 100%; }
  #section-root .items-runtime-toolbar > .items-toolbar-actions > .items-desktop-collapse { display: none !important; }
  #section-root .items-runtime-toolbar > .items-assignment-warning { grid-column: 1; grid-row: 3; }
  .mobile-filter-sheet-surface .compact-filter-only { display: inline-flex; }
}

/* Icon rail (981-1366px): group captions are hidden, so the groups that normally start with a
   caption (Radni nalozi, Sifarnici) keep the same divider and spacing as every other group. */
@media (min-width: 981px) and (max-width: 1366px) {
  .nav-list > .nav-group-label + button.nav-group-start {
    margin-top: 19px;
  }

  .nav-list > .nav-group-label + button.nav-group-start::before {
    display: block;
  }
}

@media (min-width: 981px) and (max-width: 1366px) and (max-height: 820px) {
  .nav-list > .nav-group-label + button.nav-group-start {
    margin-top: 14px;
  }
}

/* Audit 2026-10-04: a work order number is one token and never breaks across lines. On phone
   cards the number keeps its width and the status badge next to it wraps instead. */
.work-order-code,
.analytics-work-order-card > header > div > span:first-child {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  #section-root .archive-card .archive-status-cell .status-badge.missing.missing {
    max-width: 150px;
    white-space: normal !important;
    text-align: center;
    line-height: 1.2;
  }
}

/* Touch tablets in landscape use the compact desktop tables; row actions stay finger-sized. */
@media (min-width: 761px) and (max-width: 1024px) {
  #section-root :is(.materials-head:not(.settings-premium-head), .stations-card-header.module-page-header) {
    flex-wrap: wrap !important;
    gap: 12px;
  }
  #section-root :is(.materials-head:not(.settings-premium-head), .stations-card-header.module-page-header) > :first-child {
    flex: 1 0 100%;
    min-width: 0;
  }
  #section-root :is(.materials-head-actions, .stations-card-actions) {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100%;
    gap: 8px;
  }
}

@media (min-width: 981px) and (pointer: coarse) {
  #section-root :is(.icon-action, .material-action-button) {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

/* Module headers on phones: the "more" menu sits left of the primary action everywhere. */
@media (max-width: 760px) {
  .customers-area-actions > .mobile-header-more {
    order: -2;
  }
}

/* An email address is one token: full card width, never broken mid-word. */
#section-root .customers-card dl > .customer-card-email {
  grid-column: 1 / -1;
}

#section-root .customers-card .customer-card-email dd {
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Audit 2026-10-04, QA follow-up. Card headers always override the generic wrap rule for the
   work order number; values break only at spaces so dates stay whole. */
/* Specificity must beat the shared card rule :is(#section-root, #modal-root) :is(cards) :is(strong...). */
#section-root :is(.work-order-card, .shipment-card, .archive-card, .customers-card, .customer-invoice-card, .customer-work-order-mobile-card) .work-order-code.work-order-code,
#section-root .work-order-code {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.analytics-work-order-card > header .status-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* Status and actions stay on one row next to the title on every card. */
  #section-root .mobile-card-head-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .global-problem-table tbody tr:not(.empty-row) :is(.global-problem-col-status, .global-problem-col-priority, .global-problem-col-operator) {
    text-align: right !important;
  }

  .settings-row-copy {
    min-width: 0;
  }

  /* Module title is never cut by the header actions; the primary label gives way first. */
  .content > .topbar > .title-block {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 60%;
  }

  .content > .topbar > .title-block h1 {
    white-space: nowrap;
  }

  .content > .topbar > .topbar-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  .content > .topbar > .topbar-actions > .primary-button {
    min-width: 0;
  }

  .content > .topbar > .topbar-actions > .primary-button > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .unsaved-modal-panel .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .unsaved-modal-panel .modal-actions > button {
    width: 100%;
  }
}

/* Problem attachments: a running upload is visible and blocks sending until it finishes. */
.problem-file-card.is-uploading > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--ds-text-light);
}

.problem-file-card.is-uploading svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  animation: nx-upload-spin 1s linear infinite;
}

.problem-file-card.is-uploading small {
  display: block;
}

@keyframes nx-upload-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .problem-file-card.is-uploading svg { animation: none; }
}

/* "Dodaj proizvod iz baze" on phones (2026-10-05 field report): a full-screen sheet with one
   scroll area, a compact header, full-width filters, readable product cards and a two-column
   preview grid. Before this the five preview metrics shared 44px columns and their labels
   overlapped, the filter selects were cut and the product name was truncated. */
@media (max-width: 760px) {
  .modal-backdrop:has(> .add-base-item-modal) { padding: 0 !important; overflow: hidden !important; align-items: stretch !important; }
  .modal-panel.add-base-item-modal { display: flex !important; flex-direction: column !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
  .add-base-item-modal > .base-modal-header { grid-template-columns: minmax(0, 1fr) auto !important; gap: 4px 12px !important; padding: 14px 16px 12px !important; }
  .add-base-item-modal > .base-modal-header > .flow-modal-icon { display: none !important; }
  .add-base-item-modal > .base-modal-header h2 { font-size: 20px !important; line-height: 1.2 !important; }
  .add-base-item-modal > .base-modal-header p { font-size: 13px !important; line-height: 1.35 !important; }
  .add-base-item-modal > .base-runtime-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; padding: 12px !important; }
  .add-base-item-modal :is(.split-picker, .base-product-picker, .base-product-preview) { width: auto !important; min-width: 0 !important; max-height: none !important; overflow: visible !important; }
  .add-base-item-modal .filter-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .add-base-item-modal .filter-grid > .field { grid-column: 1 / -1 !important; min-width: 0 !important; }
  .add-base-item-modal .base-product-card { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-height: 0 !important; padding: 10px 12px !important; }
  .add-base-item-modal .base-product-select-toggle { position: static !important; width: 44px !important; height: 44px !important; }
  .add-base-item-modal .base-product-inspect { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; text-align: left !important; }
  .add-base-item-modal .base-product-card-icon { display: none !important; }
  .add-base-item-modal .base-product-card-body { display: grid !important; gap: 4px !important; min-width: 0 !important; }
  .add-base-item-modal .base-product-card-body > strong { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; font-size: 14px !important; line-height: 1.3 !important; text-overflow: clip !important; white-space: normal !important; }
  .add-base-item-modal .base-product-card-body > small { overflow: visible !important; font-size: 12px !important; white-space: normal !important; }
  .add-base-item-modal .base-product-card-meta { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
  .add-base-item-modal .base-product-card-meta > .chip { flex: 0 0 auto !important; }
  .add-base-item-modal .base-product-inspect-label { justify-self: start !important; font-size: 12px !important; }
  .add-base-item-modal .base-product-preview h3 { font-size: 18px !important; line-height: 1.25 !important; }
  .add-base-item-modal .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .add-base-item-modal .metric-grid > .metric { min-width: 0 !important; }
  .add-base-item-modal .metric-grid small { white-space: normal !important; }
  .add-base-item-modal > .base-modal-footer { flex: 0 0 auto !important; padding: 10px 16px max(12px, env(safe-area-inset-bottom)) !important; }
}

/* Phone/tablet shell: the scroll area always ends above the bottom navigation. A legacy rule
   (.content:has(.work-order-detail-shell) padding-bottom: 12px) hid the last work order item
   behind the navigation, so it could not be opened or used for a work entry. */
@media (max-width: 980px) {
  .content,
  .content-wide {
    padding-bottom: calc(var(--nx-mobile-nav-height, 64px) + 24px + env(safe-area-inset-bottom)) !important;
  }
}

/* Phones: worker assignment after adding products uses the same full-screen sheet as
   "Dodaj proizvod iz baze"; the base-product footer keeps both actions on one row. */
@media (max-width: 760px) {
  .modal-backdrop:has(> .operator-batch-modal) { padding: 0 !important; overflow: hidden !important; align-items: stretch !important; }
  .modal-panel.operator-batch-modal { display: flex !important; flex-direction: column !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
  .operator-batch-modal > header { padding: 14px 16px 12px !important; }
  .operator-batch-modal > header .flow-modal-icon { display: none !important; }
  .operator-batch-modal > header h2 { font-size: 20px !important; line-height: 1.2 !important; }
  .operator-batch-modal .operator-batch-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; }
  .operator-batch-modal > footer { flex: 0 0 auto !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  .add-base-item-modal > .base-modal-footer .footer-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; gap: 8px !important; }
  .add-base-item-modal > .base-modal-footer .footer-actions > .secondary-button { order: 0 !important; }
  .add-base-item-modal > .base-modal-footer .footer-actions > .primary-button { order: 1 !important; }
  .add-base-item-modal > .base-modal-footer .footer-actions > button { width: 100% !important; min-width: 0 !important; }
}

/* Phone audit 2026-10-05 (QA, 390px). Every rule below was measured in the browser before and
   after: the problem was visible text overlap, cut controls or actions below the screen edge. */
@media (max-width: 760px) {
  /* Prijavi problem: was 864px tall on an 840px screen, the send action sat below the edge. */
  .modal-backdrop:has(> .runtime-problem-modal) { padding: 0 !important; overflow: hidden !important; align-items: stretch !important; }
  .modal-panel.runtime-problem-modal { display: flex !important; flex-direction: column !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
  .runtime-problem-modal > .flow-modal-head { padding: 14px 16px 12px !important; }
  .runtime-problem-modal > .flow-modal-head h2 { font-size: 20px !important; line-height: 1.2 !important; }
  .runtime-problem-modal > .flow-modal-head p { font-size: 13px !important; }
  .runtime-problem-modal .problem-modal-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; padding: 12px !important; }
  .runtime-problem-modal .problem-context-card > div:first-child strong { white-space: nowrap !important; }
  .runtime-problem-modal :is(.problem-card-options, .priority-card-options) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .runtime-problem-modal :is(.problem-card-options, .priority-card-options) > button { min-height: 44px !important; }
  .runtime-problem-modal > .problem-modal-actions { flex: 0 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; gap: 8px !important; padding: 10px 16px max(12px, env(safe-area-inset-bottom)) !important; }
  .runtime-problem-modal > .problem-modal-actions > button { width: 100% !important; min-width: 0 !important; }

  /* Problem detail: fixed grid rows let the conversation card cover the add-file card. */
  #modal-root .problem-detail-modal .problem-detail-grid-page { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; grid-template-rows: none !important; grid-auto-rows: auto !important; }
  #modal-root .problem-detail-modal .problem-detail-grid-page > * { min-height: 0 !important; height: auto !important; max-height: none !important; }

  /* Nova beleska: the panel ran past the screen; actions share one row. */
  .modal-backdrop.note-composer-backdrop { padding: 0 !important; overflow: hidden !important; align-items: stretch !important; }
  .modal-panel.note-edit-modal { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
  .note-edit-modal > .note-composer-body { flex: 1 1 auto !important; min-height: 0 !important; }
  .note-edit-modal > .note-composer-footer > div { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; gap: 8px !important; width: 100% !important; }
  .note-edit-modal > .note-composer-footer > div > button { width: 100% !important; }
  .note-edit-modal > .note-composer-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }

  /* Material detail: the price note overlapped its label. */
  .material-stock-summary > div { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important; align-items: start !important; gap: 10px !important; }
  .material-stock-summary dd { min-width: 0 !important; text-align: right !important; }
  .material-stock-summary .material-price-incomplete { display: grid !important; justify-items: end !important; gap: 2px !important; }
  .material-stock-summary .material-price-incomplete small { display: block !important; white-space: normal !important; text-align: right !important; }

  /* Prodaja / Kupci: the tabs were squeezed next to the actions and cut after the first tab. */
  #section-root .customers-area-head { flex-wrap: wrap !important; row-gap: 10px !important; }
  #section-root .customers-area-head > .customers-area-tabs { order: 2 !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; overflow-x: auto !important; }
  #section-root .customers-area-head > .customers-area-tabs > button { flex: 0 0 auto !important; padding: 8px 6px !important; font-size: 14px !important; }
  #section-root .customers-area-head > .customers-area-actions { order: 1 !important; display: flex !important; flex: 1 1 100% !important; width: 100% !important; justify-content: flex-end !important; gap: 8px !important; }
  #section-root .customers-area-head > .customers-area-actions > * { width: auto !important; }

  /* Invoice editor: a line was a 12-column grid of 16px columns (the price showed as "0,"). */
  #modal-root .invoice-editor-modal :is(.invoice-lines-table, .invoice-lines-table > tbody) { display: block !important; width: 100% !important; min-width: 0 !important; }
  #modal-root .invoice-editor-modal .invoice-line-row { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; padding: 12px !important; }
  #modal-root .invoice-editor-modal .invoice-line-row > td { grid-column: span 3 !important; grid-row: auto !important; min-width: 0 !important; width: auto !important; height: auto !important; }
  #modal-root .invoice-editor-modal .invoice-line-row > td:is(.invoice-source-cell, :nth-child(2), .invoice-name-cell, :nth-child(6), .invoice-line-actions) { grid-column: 1 / -1 !important; }
  #modal-root .invoice-editor-modal .invoice-line-row > td:nth-child(4) { grid-column: span 2 !important; }
  #modal-root .invoice-editor-modal .invoice-line-row > td:nth-child(5) { grid-column: span 4 !important; }
  #modal-root .invoice-editor-modal .invoice-line-row > td.invoice-line-actions { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; gap: 8px !important; }
  #modal-root .invoice-editor-modal .invoice-line-row > td.invoice-line-actions > * { flex-direction: row !important; }
  #modal-root .invoice-editor-modal .invoice-line-row :is(input, select) { width: 100% !important; min-width: 0 !important; }
  #modal-root .invoice-editor-modal .invoice-line-row > td.invoice-calculated-cell { min-height: 0 !important; }
  #modal-root .invoice-editor-modal .invoice-line-add-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #modal-root .invoice-editor-modal .invoice-line-add-actions > * { width: 100% !important; min-width: 0 !important; justify-content: center !important; }

  /* Quotation editor: the line table was 1380px wide; on phones every line is a labelled card. */
  #modal-root .customer-quotation-form { grid-template-columns: minmax(0, 1fr) !important; }
  #modal-root .customer-quotation-lines-scroll { overflow-x: visible !important; }
  #modal-root .customer-quotation-lines { display: block !important; width: 100% !important; min-width: 0 !important; }
  #modal-root .customer-quotation-lines thead { display: none !important; }
  #modal-root .customer-quotation-lines tbody { display: grid !important; gap: 10px !important; }
  #modal-root .customer-quotation-lines tbody tr { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px !important; padding: 12px !important; border: 1px solid var(--ds-border) !important; border-radius: 12px !important; background: var(--ds-card) !important; }
  #modal-root .customer-quotation-lines tbody td { display: grid !important; grid-column: span 3 !important; align-content: start !important; gap: 4px !important; min-width: 0 !important; width: auto !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
  #modal-root .customer-quotation-lines tbody td[data-label]::before { content: attr(data-label); color: var(--ds-text-muted); font-size: 11px; font-weight: 600; }
  #modal-root .customer-quotation-lines tbody td:is(:nth-child(3), :nth-child(6), :nth-child(11), :last-child) { grid-column: 1 / -1 !important; }
  #modal-root .customer-quotation-lines tbody td:last-child::before { content: none; }
  #modal-root .customer-quotation-lines tbody td:last-child .customer-quotation-line-actions { justify-content: flex-end !important; }
  #modal-root .customer-quotation-lines tbody :is(input, select) { width: 100% !important; min-width: 0 !important; }
  #modal-root .customer-quotation-modal > footer.flow-modal-footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  #modal-root .customer-quotation-modal > footer.flow-modal-footer > button { width: 100% !important; min-width: 0 !important; margin: 0 !important; white-space: nowrap !important; }
  #modal-root .customer-quotation-modal > footer.flow-modal-footer > .primary-button { grid-column: 1 / -1 !important; order: 3 !important; }
}

/* Confirmation windows (showModal): the description is the message, so it wraps instead of ending in "…". */
#modal-root .nx-modal-shell[data-generic-modal] > .nx-modal-head { height: auto; max-height: none; }
#modal-root .nx-modal-shell[data-generic-modal] > .nx-modal-head .flow-modal-title p { overflow: visible; text-overflow: clip; white-space: normal; }

/* Phones: confirmation dialogs (showModal). The 64px header cap pushed a two-line title's
   description under the footer, and the actions were two right-aligned stacked halves. */
@media (max-width: 760px) {
  #modal-root .nx-modal-shell > .nx-modal-head { height: auto !important; max-height: none !important; min-height: 0 !important; }
  #modal-root .nx-modal-shell > .nx-modal-head :is(p, h2) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  #modal-root .nx-modal-shell > .nx-modal-footer { display: block !important; }
  #modal-root .nx-modal-shell > .nx-modal-footer > span:empty { display: none !important; }
  #modal-root .nx-modal-shell > .nx-modal-footer > .nx-modal-actions { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 8px !important; width: 100% !important; }
  #modal-root .nx-modal-shell > .nx-modal-footer > .nx-modal-actions > button { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  #modal-root .delivery-note-modal h2 { font-size: 20px !important; line-height: 1.2 !important; }
}

/* Phone audit 2026-10-05, part 2: wizard footers, operation time fields, material tabs. */
@media (max-width: 760px) {
  #modal-root .custom-modal-footer > div { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; gap: 8px !important; width: 100% !important; }
  #modal-root .custom-modal-footer > div:has(> .secondary-button:not([hidden]) + .secondary-button:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #modal-root .custom-modal-footer > div:has(> .secondary-button:not([hidden]) + .secondary-button:not([hidden])) > .primary-button { grid-column: 1 / -1 !important; }
  #modal-root .custom-modal-footer > div > button { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  #modal-root .custom-inline-operation { grid-template-columns: auto minmax(0, 1fr) !important; gap: 10px !important; }
  #modal-root .custom-inline-operation > :not(.operation-index):not(.custom-operation-reorder) { grid-column: 1 / -1 !important; }
  #modal-root .custom-inline-operation > .custom-operation-reorder { justify-self: end !important; }
  #modal-root .custom-inline-operation > button.danger-icon { justify-self: end !important; }
  #modal-root .custom-op-time-parts input { padding-left: 8px !important; padding-right: 8px !important; text-align: center !important; }
  #modal-root .material-detail-tabs > button { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
}
@media (pointer: coarse), (max-width: 760px) {
  #modal-root .custom-op-time-parts input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  #modal-root .custom-op-time-parts input[type="number"]::-webkit-inner-spin-button,
  #modal-root .custom-op-time-parts input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
}
.int-worker-picker-popup { grid-template-rows: auto minmax(0, 1fr) auto !important; }
.int-worker-picker-popup > .int-worker-picker-done { display: flex; justify-content: flex-end; }
.int-worker-picker-popup > .int-worker-picker-done > button { width: 100%; justify-content: center; }

.network-status {
  position: fixed;
  z-index: 2100;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #c99733;
  border-radius: 10px;
  background: #fff8e6;
  color: #614511;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}
@media (max-width: 760px) {
  .network-status { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Read-only invoice lines reuse their saved cells as phone summaries. */
@media (max-width: 760px) {
  #modal-root .invoice-finalized-lines .invoice-line-table-wrap { overflow: visible; }
  #modal-root .invoice-line-table.is-finalized { display: block; width: 100%; min-width: 0; }
  #modal-root .invoice-line-table.is-finalized thead { display: none; }
  #modal-root .invoice-line-table.is-finalized tbody { display: grid; gap: 10px; }
  #modal-root .invoice-finalized-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
  }
  #modal-root .invoice-finalized-line td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 6px;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #modal-root .invoice-finalized-line td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--ds-text-light);
    font-size: 11px;
    font-weight: 500;
  }
  #modal-root .invoice-finalized-line td:is(:nth-child(1), :nth-child(2), :last-child) { grid-column: 1 / -1; }
  #modal-root .invoice-finalized-line td:last-child { border-top: 1px solid var(--ds-border); margin-top: 4px; }
}

/* Directory, sales, product and resource tabs follow the compact Analytics tab treatment. */
:is(.customers-area-tabs, .station-area-tabs, .products-tabs) {
  display:flex; align-items:center; gap:0; min-width:0; max-width:100%;
  padding:0; border:0; border-radius:9px;
  background:var(--nx-v2-surface); box-shadow:none;
  overflow-x:auto; scrollbar-width:none;
}
:is(.customers-area-tabs, .station-area-tabs, .products-tabs) > button {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; min-width:0; min-height:40px; padding:0 14px;
  border:0; border-bottom:2px solid transparent; border-radius:0;
  color:var(--nx-v2-muted); background:transparent; box-shadow:none;
  font-size:14px; font-weight:650; white-space:nowrap; cursor:pointer;
  scroll-snap-align:start;
}
:is(.customers-area-tabs, .station-area-tabs, .products-tabs) > button:is(.active, [aria-selected="true"]) {
  color:var(--nx-v2-navy); border-bottom-color:var(--nx-v2-blue); background:#f1f7fb;
}
:is(.customers-area-tabs, .station-area-tabs, .products-tabs) > button:focus-visible {
  outline:2px solid var(--ds-primary); outline-offset:-3px;
}
:is(.customers-area-tabs, .station-area-tabs, .products-tabs)::-webkit-scrollbar { display:none; }
@media(max-width:760px) {
  :is(.customers-area-tabs, .station-area-tabs, .products-tabs) > button { padding:0 11px; }
}

.products-tabs > button > strong { color:inherit; font:inherit; }

/* Office marks use the complete badge area for legibility in compact commands. */
.commercial-file-badge svg.nx-solid-icon { width:20px; height:20px; flex-shrink:0; }

/* Teren tables use the same register grammar as Machines: framed wrap, soft header, column dividers. */
.field-table-wrap {
  max-width: 100%;
  border-top: 1px solid var(--nx-v2-border);
  border-bottom: 1px solid var(--nx-v2-border);
  background: var(--nx-v2-surface);
}

.field-table {
  border-collapse: separate;
  border-spacing: 0;
}

.field-table thead th {
  border-bottom: 1px solid var(--nx-v2-border);
}

.field-table tbody td {
  border-bottom: 1px solid var(--nx-v2-border);
}

.field-table :is(th, td) + :is(th, td) {
  border-left: 1px solid var(--nx-v2-border);
}

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

/* Vehicles reuse .machines-table; reset the Machines column widths and alignment for eight columns. */
.machines-table.vehicles-table :is(th, td):nth-child(n) {
  width: auto;
  text-align: left;
}

/* Šifra | Registracija | Naziv | Tip | Nosivost | Vozač | Sledeći rok | Status | Akcije */
.machines-table.vehicles-table :is(th, td):nth-child(1) { width: 96px; }
.machines-table.vehicles-table :is(th, td):nth-child(2) { width: 130px; }
.machines-table.vehicles-table :is(th, td):nth-child(3) { min-width: 170px; }
.machines-table.vehicles-table :is(th, td):nth-child(4) { width: 120px; }
.machines-table.vehicles-table :is(th, td):nth-child(5) { width: 110px; }
.machines-table.vehicles-table :is(th, td):nth-child(6) { width: 190px; }
.machines-table.vehicles-table :is(th, td):nth-child(7) { width: 180px; }
.machines-table.vehicles-table :is(th, td):nth-child(8) { width: 124px; }
.machines-table.vehicles-table :is(th, td):nth-child(9) { width: 56px; }
.vehicles-table .vehicle-payload-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vehicle-driver { display: inline-flex; align-items: center; gap: 6px; }
.vehicle-driver svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--nx-v2-blue, var(--ds-primary)); }

.machines-table.vehicles-table th:nth-child(n) .sort-header {
  justify-content: flex-start;
  text-align: left;
}

.field-table :is(th, td).is-center,
.machines-table.vehicles-table :is(th, td).is-center:nth-child(n) {
  text-align: center;
}

.field-table th.is-center .sort-header,
.machines-table.vehicles-table th.is-center:nth-child(n) .sort-header {
  justify-content: center;
  text-align: center;
}

.field-table td.is-center .field-warning,
.field-table td.is-center .machine-service-badge,
.machines-table.vehicles-table td.is-center .machine-service-badge {
  margin-left: auto;
  margin-right: auto;
}

.field-table td.is-center .station-row-actions,
.machines-table.vehicles-table td.is-center .station-row-actions {
  justify-content: center;
}

/* Column names in Teren tables are always centered; cell content keeps its own alignment. */
.field-table thead th:nth-child(n),
.machines-table.vehicles-table thead th:nth-child(n) {
  text-align: center;
}

.field-table thead th:nth-child(n) .sort-header,
.machines-table.vehicles-table thead th:nth-child(n) .sort-header {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Plan terena: compact work order number; crew shown like work order assignments. */
.field-table :is(th, td):nth-child(1) { width: 118px; }
.field-crew-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.field-crew-badge > svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--nx-v2-blue, var(--ds-primary)); }
.field-table td.is-center .field-crew-badge,
.machines-table.vehicles-table td.is-center .vehicle-driver { justify-content: center; }

/* New work order: the whole form fits a 1366x657 laptop viewport without scrolling inside the dialog. */
.modal-panel.work-order-create-modal .work-order-modal-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.modal-panel.work-order-create-modal .work-order-modal-header .wo-purpose-row { margin: 0 0 0 auto; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; }
.modal-panel.work-order-create-modal .wo-modal-field :is(input, select) { min-height: 38px; height: 38px; }
.modal-panel.work-order-create-modal .wo-create-card-note .wo-modal-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modal-panel.work-order-create-modal .wo-create-card-note textarea { min-height: 76px; }

/* Quick Start: dashboard entry, wizard, smart-default marks. */
.quick-start-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 16px 18px; border: 1px solid rgba(var(--ds-primary-rgb), .28); border-radius: 12px; background: var(--ds-primary-light); }
.quick-start-card > div { display: grid; gap: 4px; }
.quick-start-card strong { color: var(--ds-heading); font-size: 16px; }
.quick-start-card span { color: var(--ds-text-light); font-size: 13px; }
.modal-panel.quick-start-modal { width: min(560px, calc(100vw - 24px)); }
.quick-start-body { display: grid; gap: 14px; padding: 18px 20px; }
.quick-start-field input { min-height: 46px; font-size: 17px; }
.quick-start-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-start-chip { padding: 6px 10px; border: 1px solid var(--ds-border); border-radius: 999px; background: #fff; color: var(--ds-heading); font-size: 13px; cursor: pointer; }
.quick-start-chip:hover, .quick-start-chip:focus-visible { border-color: var(--ds-primary); background: var(--ds-primary-light); }
.quick-start-launch { min-height: 46px; padding: 0 22px; font-size: 15px; letter-spacing: .02em; }
.quick-start-progress { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quick-start-progress li { display: flex; align-items: center; gap: 10px; color: var(--ds-text-light); }
.quick-start-progress li.done { color: #166534; }
.quick-start-progress li.failed { color: #b42318; }
.quick-start-progress li svg { width: 18px; height: 18px; flex: 0 0 18px; }
.quick-start-success { display: grid; gap: 12px; }
.quick-start-success-lead { margin: 0; font-size: 15px; }
.quick-start-done { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.quick-start-done li { display: flex; gap: 8px; align-items: flex-start; }
.quick-start-done svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: #166534; }
.quick-start-later { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fff7e6; color: #8a4b00; }
.quick-start-later > div { display: grid; gap: 2px; }
.quick-start-later svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
/* One quiet line: the order is usable, a few values only need a look. */
.wo-defaults-notice { grid-column: 1 / -1; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; padding: 5px 6px 5px 10px; border: 1px solid #f1d9a8; border-radius: 8px; background: #fffaf0; color: #7a4a06; font-size: 13px; }
.wo-defaults-notice > svg { width: 15px; height: 15px; flex: 0 0 15px; }
.wo-defaults-notice .wo-defaults-text { flex: 1 1 220px; }
.wo-defaults-notice .wo-defaults-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wo-defaults-notice .wo-defaults-actions .secondary-button { min-height: 28px; padding: 3px 10px; font-size: 12px; }
.wo-default-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #fff1d6; color: #8a4b00; font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.wo-default-badge svg { width: 12px; height: 12px; }
@media (max-width: 560px) { .quick-start-card { flex-direction: column; align-items: stretch; } }

/* Live refresh: offered when data changed elsewhere and the screen cannot reload by itself. */
.live-refresh-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: 12px; background: #10213a; color: #fff; box-shadow: 0 10px 30px rgba(16, 33, 58, .28); }
.live-refresh-bar > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.live-refresh-bar > span { font-size: 14px; }
.live-refresh-bar .primary-button { min-height: 34px; }
.live-refresh-bar .icon-button { color: #fff; background: transparent; border: 0; }
.live-refresh-bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) { .live-refresh-bar { bottom: calc(var(--nx-mobile-nav-height, 64px) + 16px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); } .live-refresh-bar > span { flex: 1; font-size: 13px; } }

/* Station operators: the checkbox sits centered beside the name and role, with breathing room. */
.station-wizard-modal .station-operator-card { grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 10px 14px; }
.station-wizard-modal .station-operator-card input { grid-row: 1 / span 2; align-self: center; width: 18px; height: 18px; min-height: 0; max-height: 18px; padding: 0; margin: 0; accent-color: var(--primary); }
.station-wizard-modal .station-operator-card strong { align-self: end; }
.station-wizard-modal .station-operator-card small { align-self: start; }

/* Brza komanda: launcher in the sidebar (desktop) and the app bar (phone), and the command dialog. */
/* A quiet premium control on the navy sidebar: glass surface, accent icon chip, key hint. */
.command-launcher { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 8px 0 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .22); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.command-launcher:hover, .command-launcher:focus-visible { border-color: rgba(122, 176, 218, .55); background: rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 3px rgba(74, 127, 167, .25), 0 10px 22px rgba(0, 0, 0, .26); outline: none; }
.command-launcher > i, .command-launcher-mobile > i { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--nx-v2-blue, #4a7fa7); box-shadow: 0 4px 10px rgba(44, 96, 137, .45); }
.command-launcher > i svg, .command-launcher-mobile > i svg { width: 15px; height: 15px; color: #fff; }
.command-launcher > span { flex: 1; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.command-launcher kbd { padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.command-bar-footer kbd { padding: 3px 5px; border: 1px solid currentColor; border-radius: 4px; font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1; opacity: .7; }
.command-launcher-mobile { display: none; }
@media (min-width: 981px) and (max-width: 1366px) {
  .command-launcher { justify-content: center; width: 52px; min-height: 44px; margin: 0 auto; padding: 0; }
  .command-launcher > span, .command-launcher kbd { display: none; }
}
@media (max-width: 980px) {
  .command-launcher-mobile { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: auto; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .06); }
}
.command-bar-backdrop { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(10, 25, 49, .38); }
.command-bar { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(10, 25, 49, .32); }
.command-bar-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ds-border, #dfe7ee); }
.command-bar-input svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted, #5b6b7d); }
.command-bar-input input { flex: 1; min-width: 0; min-height: 0; padding: 4px 0; border: 0; outline: 0; box-shadow: none; background: transparent; font-size: 16px; }
.command-bar-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.command-bar-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.command-bar-list button > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--primary, #2c6089); }
.command-bar-list button > span { display: grid; gap: 1px; min-width: 0; }
.command-bar-list strong { font-size: 14px; }
.command-bar-list small { overflow: hidden; color: var(--muted, #5b6b7d); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.command-bar-list li.is-active button { background: #eef4f9; }
.command-bar-list li.is-empty button { cursor: default; }
.command-bar-footer { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--ds-border, #dfe7ee); color: var(--muted, #5b6b7d); font-size: 11px; }
.command-bar-footer kbd { margin-right: 3px; }
@media (max-width: 720px) { .command-bar-backdrop { padding-top: 12px; } .command-bar { max-height: calc(100vh - 24px); } .command-bar-footer { display: none; } }

/* Home calendar: the header date opens it; month grid with ISO week numbers and a day panel. */
button.nx-command-date { border: 1px solid transparent; background: transparent; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; transition: border-color .15s ease, background .15s ease; }
button.nx-command-date:hover, button.nx-command-date:focus-visible { border-color: #b7d4e7; background: #f3f8fc; }
.nx-calendar-modal { --cal-late: #c0392b; --cal-risk: #d68910; --cal-ok: #2c6089; --cal-done: #9aa7b4; --cal-field: #138d75; --cal-asset: #7d3c98; --cal-reminder: #b8860b;
  display: flex; flex-direction: column; width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; border-radius: 16px; }
.nx-cal-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--ds-border, #dfe7ee); background: #f6f9fc; }
.nx-cal-title { display: grid; gap: 2px; }
.nx-cal-title span { color: var(--muted, #5b6b7d); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nx-cal-title h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.nx-cal-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nx-cal-nav .icon-button { width: 34px; height: 34px; border: 1px solid var(--ds-border, #dfe7ee); border-radius: 9px; background: #fff; }
.nx-cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; flex: 1; }
.nx-cal-body.is-loading .nx-cal-grid { opacity: .55; }
.nx-cal-grid { display: flex; flex-direction: column; min-width: 0; padding: 10px 14px 12px; transition: opacity .15s ease; }
.nx-cal-weekdays, .nx-cal-week { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 4px; }
.nx-cal-weekdays span { padding: 4px 6px; color: var(--muted, #5b6b7d); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nx-cal-week { flex: 1; margin-top: 4px; }
.nx-cal-week-head, .nx-cal-week-number { text-align: center; }
.nx-cal-week-number { display: grid; place-items: center; align-self: stretch; border-radius: 8px; background: #f1f5f9; color: #5b6b7d; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-cal-day { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 66px; padding: 5px 6px; overflow: hidden; border: 1px solid #e6edf3; border-radius: 9px; background: #fff; color: inherit; text-align: left; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.nx-cal-day:hover { border-color: #b7d4e7; }
.nx-cal-day.is-off { background: #f7f9fb; }
.nx-cal-day.is-outside { opacity: .45; }
.nx-cal-day.is-selected { border-color: var(--cal-ok); box-shadow: 0 0 0 2px rgba(44, 96, 137, .18); }
.nx-cal-date { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-cal-day.is-today .nx-cal-date { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cal-ok); color: #fff; }
.nx-cal-chips { display: grid; gap: 2px; min-width: 0; }
.nx-cal-chip { overflow: hidden; padding: 1px 6px; border-left: 3px solid var(--cal-ok); border-radius: 4px; background: #eef4f9; font-size: 11px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.nx-cal-chip.late { border-color: var(--cal-late); background: #fdecea; }
.nx-cal-chip.risk { border-color: var(--cal-risk); background: #fff4e0; }
.nx-cal-chip.done { border-color: var(--cal-done); background: #f1f4f7; color: #6b7785; }
.nx-cal-chip.field { border-color: var(--cal-field); background: #e6f6f2; }
.nx-cal-chip.asset { border-color: var(--cal-asset); background: #f3eaf7; }
.nx-cal-chip.reminder { border-color: var(--cal-reminder); background: #fdf6e3; }
.nx-cal-more { color: var(--muted, #5b6b7d); font-size: 11px; font-weight: 700; }
.nx-cal-dots { display: none; }
.nx-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; color: var(--muted, #5b6b7d); font-size: 12px; }
.nx-cal-legend i, .nx-cal-dots i, .nx-cal-entry > i, .nx-cal-entry-open > i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--cal-ok); }
.nx-cal-legend i.late, .nx-cal-dots i.late, .nx-cal-entry.late i { background: var(--cal-late); }
.nx-cal-legend i.risk, .nx-cal-dots i.risk, .nx-cal-entry.risk i { background: var(--cal-risk); }
.nx-cal-legend i.done, .nx-cal-dots i.done, .nx-cal-entry.done i { background: var(--cal-done); }
.nx-cal-legend i.field, .nx-cal-dots i.field, .nx-cal-entry.field i { background: var(--cal-field); }
.nx-cal-legend i.asset, .nx-cal-dots i.asset, .nx-cal-entry.asset i { background: var(--cal-asset); }
.nx-cal-legend i.reminder, .nx-cal-dots i.reminder, .nx-cal-entry.reminder i { background: var(--cal-reminder); }
.nx-cal-panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 16px; overflow-y: auto; border-left: 1px solid var(--ds-border, #dfe7ee); background: #fbfcfe; }
.nx-cal-panel header { display: grid; gap: 2px; }
.nx-cal-panel header strong { font-size: 16px; }
.nx-cal-panel header small, .nx-cal-empty { color: var(--muted, #5b6b7d); font-size: 12px; }
.nx-cal-entries { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-cal-entry { display: flex; align-items: center; gap: 4px; border: 1px solid #e6edf3; border-radius: 10px; background: #fff; }
.nx-cal-entry.reminder, .nx-cal-entry.done { padding: 8px 6px 8px 10px; }
.nx-cal-entry > span:not(.nx-cal-entry-actions), .nx-cal-entry-open > span { display: grid; flex: 1; gap: 1px; min-width: 0; }
.nx-cal-entry strong { font-size: 13px; }
.nx-cal-entry small { overflow: hidden; color: var(--muted, #5b6b7d); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.nx-cal-entry-open { display: flex; align-items: center; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.nx-cal-entry-open > svg { width: 14px; height: 14px; color: var(--muted, #5b6b7d); }
.nx-cal-entry-actions { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 2px; }
.nx-cal-entry-actions .icon-button { width: 28px; height: 28px; }
.nx-cal-reminder-form { display: grid; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px dashed #d6e0e8; }
.nx-cal-reminder-text { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted, #5b6b7d); }
/* Time and "Dodaj" share one 44px line. */
.nx-cal-reminder-row { display: flex; align-items: stretch; gap: 8px; }
.nx-cal-reminder-row .nx-cal-reminder-time { display: flex; flex: 1; min-width: 0; }
.nx-cal-reminder-row input { width: 100%; height: 44px; min-height: 44px; }
.nx-cal-reminder-row .primary-button { display: inline-flex; align-items: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 16px; }
.nx-cal-reminder-row .primary-button svg { width: 16px; height: 16px; }
@media (max-height: 760px) and (min-width: 981px) { .nx-cal-day { min-height: 54px; } .nx-cal-chip:nth-child(3) { display: none; } }
@media (max-width: 980px) {
  .nx-calendar-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .nx-cal-body { grid-template-columns: 1fr; overflow-y: auto; }
  .nx-cal-panel { border-left: 0; border-top: 1px solid var(--ds-border, #dfe7ee); overflow: visible; }
  .nx-cal-weekdays, .nx-cal-week { grid-template-columns: 24px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .nx-cal-day { min-height: 46px; align-items: center; padding: 4px 2px; }
  .nx-cal-chips { display: none; }
  .nx-cal-dots { display: flex; gap: 2px; }
  .nx-cal-dots i { width: 6px; height: 6px; margin: 0; }
  .nx-cal-weekdays span { padding: 2px 0; text-align: center; font-size: 10px; }
}
/* Due reminders on the home screen: one quiet line each, above everything else. */
.nx-due-reminders { display: grid; gap: 6px; margin-bottom: 12px; }
.nx-due-reminder { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border: 1px solid #f1d9a8; border-left: 4px solid #b8860b; border-radius: 10px; background: #fffaf0; }
.nx-due-reminder > svg { width: 16px; height: 16px; flex: 0 0 16px; color: #b8860b; }
.nx-due-reminder > span { display: grid; flex: 1; gap: 1px; min-width: 0; }
.nx-due-reminder strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.nx-due-reminder small { color: #7a5a12; font-size: 11px; }
.nx-due-reminder .secondary-button { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.nx-snooze { position: relative; }
.nx-snooze > summary { list-style: none; cursor: pointer; }
.nx-snooze > summary::-webkit-details-marker { display: none; }
.nx-snooze-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; min-width: 170px; padding: 4px; border: 1px solid var(--ds-border, #dfe7ee); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(10, 25, 49, .16); }
.nx-snooze-menu button { padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; text-align: left; font-size: 13px; cursor: pointer; }
.nx-snooze-menu button:hover, .nx-snooze-menu button:focus-visible { background: #eef4f9; }
.nx-snooze-menu button:last-child { color: #c0392b; }
@media (max-width: 720px) { .nx-due-reminder { flex-wrap: wrap; } .nx-due-reminder > span { flex-basis: calc(100% - 30px); } .nx-due-reminder .nx-snooze { margin-left: auto; } }

/* A text cursor belongs only where text can be typed (Chrome caret browsing would otherwise blink over logos and labels). */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"], [contenteditable=""] { caret-color: auto; }

/* Delivery note dialog: the shared flow-modal shape, compact fields, items on demand. */
#modal-root .dn-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#modal-root .dn-modal h2 { font-size: 18px !important; }
.dn-modal .dn-subtitle { margin: 2px 0 0; color: var(--muted, #5b6b7d); font-size: 13px; }
.dn-body { display: grid; gap: 12px; padding: 16px 20px; overflow-y: auto; }
.dn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.dn-grid { align-items: start; }
.dn-grid .dn-field { display: grid; grid-template-rows: auto auto; align-content: start; gap: 4px; margin: 0; }
.dn-grid .dn-field.wide { grid-column: span 3; }
.dn-grid .dn-field > span { min-height: 16px !important; padding: 0 !important; color: var(--muted, #5b6b7d); font-size: 12px; font-weight: 600; line-height: 16px !important; }
.dn-grid .dn-field input { width: 100%; height: 42px !important; min-height: 42px !important; }
.dn-grid .dn-field small { color: var(--muted, #5b6b7d); font-size: 11px; }
.dn-more { border: 1px solid var(--ds-border, #dfe7ee); border-radius: 10px; background: #fff; }
.dn-more > summary { padding: 9px 12px; color: var(--primary, #2c6089); font-size: 13px; font-weight: 600; cursor: pointer; }
.dn-more textarea { display: block; width: calc(100% - 24px); min-height: 70px; margin: 0 12px 12px; }
.dn-items ol { max-height: 220px; margin: 0; padding: 0 12px 10px; overflow-y: auto; list-style: none; }
.dn-items li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #eef2f6; font-size: 13px; }
.dn-items li span { color: var(--muted, #5b6b7d); }
.dn-items li strong { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dn-items li em { font-style: normal; font-weight: 600; }
.dn-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dn-footer small { color: var(--muted, #5b6b7d); font-size: 12px; }
.dn-footer > div { display: flex; gap: 8px; }
@media (max-width: 760px) {
  #modal-root .dn-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .dn-grid { grid-template-columns: 1fr 1fr; }
  .dn-grid .dn-field.wide { grid-column: span 2; }
  .dn-footer { flex-direction: column; align-items: stretch; }
  .dn-footer > div { flex-direction: column-reverse; }
  .dn-footer button { width: 100%; }
}

/* "Dodaj proizvod iz baze" on phones, 16.10. field report: products start near the top and the
   selection mark is a neat checkbox. The 44px touch area stays; only the visible box is 22px. */
@media (max-width: 760px) {
  .add-base-item-modal .base-selection-summary { display: none !important; }
  .add-base-item-modal .base-product-picker { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .add-base-item-modal .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 10px !important; }
  .add-base-item-modal .filter-grid > .field { grid-column: auto !important; }
  .add-base-item-modal .filter-grid > .field.wide { grid-column: 1 / -1 !important; }
  .add-base-item-modal .filter-grid .field-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
  .add-base-item-modal .filter-grid :is(input, select) { min-height: 40px !important; font-size: 14px !important; }
  .add-base-item-modal .mode-toggle button { min-height: 34px !important; font-size: 13px !important; }
  .add-base-item-modal .base-product-select-toggle { position: relative !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .add-base-item-modal .base-product-select-toggle::before { content: ""; position: absolute; inset: 11px; border: 1.5px solid #9fb7cc; border-radius: 6px; background: #fff; }
  .add-base-item-modal .base-product-select-toggle[aria-pressed="true"]::before { border-color: var(--ds-success, #16a34a); background: var(--ds-success, #16a34a); }
  .add-base-item-modal .base-product-select-toggle svg { position: relative; z-index: 1; width: 14px !important; height: 14px !important; color: #fff !important; }
}

/* Vodič: one quiet card at the bottom right; above the bottom navigation on phones. */
.nx-guide-card { position: fixed; right: 20px; bottom: 20px; z-index: 1150; display: grid; gap: 6px; width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid #cfe0ec; border-left: 4px solid var(--nx-v2-blue, #4a7fa7); border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(10, 25, 49, .18); }
.nx-guide-card header { display: flex; align-items: center; gap: 8px; }
.nx-guide-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--nx-v2-navy, #0a1931); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.nx-guide-card header small { flex: 1; color: var(--muted, #5b6b7d); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nx-guide-close { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--muted, #5b6b7d); cursor: pointer; }
.nx-guide-close svg { width: 14px; height: 14px; }
.nx-guide-card strong { font-size: 14px; }
.nx-guide-card p { margin: 0; color: #334155; font-size: 13px; line-height: 1.4; }
.nx-guide-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.nx-guide-card footer .compact { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.nx-guide-off { margin-left: auto; border: 0; background: transparent; color: var(--muted, #5b6b7d); font-size: 12px; text-decoration: underline; cursor: pointer; }
@media (max-width: 980px) { .nx-guide-card { right: 16px; left: 16px; width: auto; bottom: calc(var(--nx-mobile-nav-height, 64px) + 16px + env(safe-area-inset-bottom)); } }

/* Reminder at its time: a gold card at the top right, above page content. */
.nx-reminder-alert { position: fixed; top: 16px; right: 20px; z-index: 1250; display: grid; gap: 6px; width: min(340px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid #f1d9a8; border-left: 4px solid #b8860b; border-radius: 12px; background: #fffaf0; box-shadow: 0 14px 34px rgba(10, 25, 49, .2); }
.nx-reminder-alert header { display: flex; align-items: center; gap: 8px; color: #7a5a12; }
.nx-reminder-alert header svg { width: 16px; height: 16px; }
.nx-reminder-alert header small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nx-reminder-alert strong { font-size: 14px; }
.nx-reminder-alert footer { display: flex; justify-content: flex-end; gap: 8px; }
.nx-reminder-alert footer .compact { min-height: 32px; padding: 4px 12px; font-size: 12px; }
@media (max-width: 980px) { .nx-reminder-alert { top: calc(66px + env(safe-area-inset-top)); right: 16px; left: 16px; width: auto; } }

/* Problemi: one row per problem, the description leads, urgency shows at a glance. */
.global-problems-page .nx-problem-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ds-border); }
.nx-problem-summary { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ds-text-muted); font-size: 13px; }
.nx-problem-summary strong { color: var(--ds-heading); }
.nx-problem-summary b.stops { color: var(--ds-danger); }
.nx-problem-summary i { font-style: normal; color: var(--ds-text-light); }
.nx-problem-order { display: flex; align-items: center; gap: 8px; color: var(--ds-text-muted); font-size: 12px; font-weight: 700; }
.nx-problem-order select { min-height: 34px; padding: 4px 28px 4px 10px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background-color: var(--ds-card); color: var(--ds-text); font-size: 13px; }
.nx-problem-list { display: grid; }
.nx-problem-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 190px) minmax(118px, 168px) 76px; align-items: center; gap: 16px; width: 100%; padding: 12px 16px 12px 14px; border: 0; border-bottom: 1px solid var(--ds-border); border-left: 4px solid transparent; background: var(--ds-card); color: var(--ds-text); font: inherit; text-align: left; cursor: pointer; }
.nx-problem-row:last-child { border-bottom: 0; }
.nx-problem-row:hover { background: var(--ds-bg-soft); }
.nx-problem-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ds-focus-ring, var(--ds-primary)); }
.nx-problem-row.priority-kritican { border-left-color: #c62828; }
.nx-problem-row.priority-visok { border-left-color: #ea7a1a; }
.nx-problem-row.priority-srednji { border-left-color: #e0b341; }
.nx-problem-row.priority-nizak { border-left-color: #a9b6c6; }
.nx-problem-row.stops-work { background: #fff7f7; }
.nx-problem-row.stops-work:hover { background: #fdeeee; }
.nx-problem-row.is-resolved { border-left-color: var(--ds-border); }
.nx-problem-row.is-resolved .nx-problem-title { color: var(--ds-text-muted); font-weight: 600; }
.nx-problem-main { display: grid; gap: 5px; min-width: 0; }
.nx-problem-title { display: -webkit-box; overflow: hidden; color: var(--ds-heading); font-size: 14px; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nx-problem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; color: var(--ds-text-muted); font-size: 12px; }
.nx-problem-meta .problem-type { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.nx-problem-meta .problem-type svg { width: 13px; height: 13px; }
.nx-problem-meta b { color: var(--ds-text); font-weight: 700; white-space: nowrap; }
.nx-problem-meta span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-problem-who { display: grid; gap: 3px; min-width: 0; font-size: 12px; }
.nx-problem-who > strong { overflow: hidden; color: var(--ds-text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nx-problem-who .global-problem-operator { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--ds-text-muted); }
.nx-problem-who .global-problem-operator svg { width: 12px; height: 12px; flex: 0 0 12px; }
.nx-problem-who .global-problem-operator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-problem-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nx-problem-flags :is(.problem-priority, .problem-status-badge, .problem-stop-work) { min-height: 24px; padding: 3px 9px; font-size: 11px; }
.problem-stop-work.stops { display: inline-flex; align-items: center; border-radius: 999px; background: var(--ds-danger-bg); color: var(--ds-danger); font-weight: 800; white-space: nowrap; }
.nx-problem-when { display: grid; justify-items: end; gap: 1px; text-align: right; }
.nx-problem-when small { color: var(--ds-text-light); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nx-problem-when strong { color: var(--ds-heading); font-size: 14px; font-weight: 800; white-space: nowrap; }
.nx-problem-row.stops-work .nx-problem-when strong { color: var(--ds-danger); }
.nx-problem-list .global-problem-table-empty { padding: 36px 16px; }
@media (max-width: 1100px) {
  .nx-problem-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main when" "who flags"; gap: 8px 12px; }
  .nx-problem-main { grid-area: main; }
  .nx-problem-when { grid-area: when; align-self: start; }
  .nx-problem-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .nx-problem-flags { grid-area: flags; justify-content: flex-end; }
}
@media (max-width: 760px) {
  .global-problems-page .nx-problem-list-head { flex-wrap: wrap; padding: 10px 12px; }
  .nx-problem-order { width: 100%; justify-content: space-between; }
  .nx-problem-row { padding: 11px 12px 11px 11px; }
  .nx-problem-title { font-size: 14px; }
  .nx-problem-row { grid-template-areas: "main main" "flags when" "who who"; gap: 7px 10px; }
  .nx-problem-flags { justify-content: flex-start; }
  .nx-problem-when { display: flex; align-items: baseline; justify-self: end; gap: 5px; align-self: center; }
  .nx-problem-meta { flex-wrap: nowrap; overflow: hidden; }
  .nx-problem-meta > * { flex: 0 0 auto; }
  .nx-problem-meta span:last-child { flex: 1 1 auto; }
  .nx-problem-who { color: var(--ds-text-muted); }
}

/* Priority: four clearly different steps; Kritičan was unstyled in Beleške. */
.problem-priority.visok { background: #fff0e0; color: #b4500f; }
.problem-priority.kritican { background: #c62828; color: #fff; }
.priority-badge.priority-kritican { background: #c62828; color: #fff; }

/* Problem detail: the problem itself is the headline. */
.runtime-problem-detail-modal .problem-detail-headline { margin: 2px 0 8px; max-width: 760px; font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }

/* Beleške on the phone: the first line of the note under its title. */
.note-mobile-card .note-mobile-preview { display: -webkit-box; overflow: hidden; margin: 6px 0 2px; color: var(--ds-text); font-size: 12.5px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notes-mobile-cards > .notes-empty-state { padding: 24px 12px; }
.nx-problem-who .global-problem-operator { justify-content: flex-start; justify-self: start; margin: 0; }
/* Problem detail without attachments: a slim attachments bar above a full-width conversation. */
.runtime-problem-detail-modal .problem-detail-grid-page:has(> .problem-modal-overview-card .problem-empty-attachments):not(:has(.problem-resolution-block)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.runtime-problem-detail-modal .problem-detail-modal-status .problem-stop-work.stops { min-height: 28px; padding: 5px 10px; font-size: 12px; }
/* Beleške on the phone: the single add button keeps its natural width, like Dodaj proizvod. */
@media (max-width: 760px) { .topbar-actions > [data-action="new-note"] { flex: 0 0 auto; width: auto; margin-left: auto; } }
/* Vodič carries the real NormaX mark (the overlapping NX), as everywhere else. */
.nx-guide-mark { background: var(--nx-v2-navy, #0a1931) url("./assets/normax-mark.svg") center / 15px auto no-repeat; font-size: 0; }

/* Prijavi problem: the chosen type and priority are unmistakable; priority shows its colour. */
.runtime-problem-modal :is(.problem-card-options, .priority-card-options) button.active { border-color: var(--ds-primary); background: color-mix(in srgb, var(--ds-primary) 10%, var(--ds-card)); box-shadow: inset 0 0 0 1px var(--ds-primary); color: var(--ds-heading); font-weight: 800; }
.runtime-problem-modal .priority-card-options button.active[data-value="Nizak"] { border-color: #8a9bb0; background: #eef2f6; box-shadow: inset 0 0 0 1px #8a9bb0; color: #334155; }
.runtime-problem-modal .priority-card-options button.active[data-value="Srednji"] { border-color: #d4a017; background: var(--ds-warning-bg); box-shadow: inset 0 0 0 1px #d4a017; color: #7a5200; }
.runtime-problem-modal .priority-card-options button.active[data-value="Visok"] { border-color: #ea7a1a; background: #fff0e0; box-shadow: inset 0 0 0 1px #ea7a1a; color: #9a3f0a; }
.runtime-problem-modal .priority-card-options button.active[data-value="Kritičan"] { border-color: #c62828; background: #c62828; box-shadow: none; color: #fff; }
/* Označi kao rešen: the problem being closed is quoted under the title. */
.nx-problem-resolve-modal .nx-problem-resolve-what { display: -webkit-box; overflow: hidden; margin-top: 4px; color: var(--ds-text); font-size: 13px; font-weight: 600; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.nx-problem-resolve-modal .resolution-note-field small { color: var(--ds-text-light); font-weight: 500; }

/* ===== Problem report and detail (one family, phone first) ===== */
.modal-backdrop:has(> .nx-pr-modal), .modal-backdrop:has(> .nx-pd-modal) { padding: 16px; }
.modal-panel.nx-pr-modal, .modal-panel.nx-pd-modal { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; border: 1px solid var(--ds-border); border-radius: 14px; background: var(--ds-card); box-shadow: 0 24px 64px rgba(10, 25, 49, .22); }
.nx-pr-modal .flow-close-button, .nx-pd-modal .flow-close-button { flex: 0 0 auto; }

/* Report */
.modal-panel.nx-pr-modal { width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.nx-pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--ds-border); }
.nx-pr-head h2 { margin: 0; color: var(--ds-heading); font-size: 18px; }
.nx-pr-head p { margin: 3px 0 0; color: var(--ds-text-muted); font-size: 12.5px; }
.nx-pr-body { display: grid; gap: 14px; min-height: 0; overflow: auto; padding: 16px 18px; }
.nx-pr-body .flow-error { margin: 0; }
.nx-pr-what { display: grid; gap: 6px; }
.nx-pr-what > span, .nx-pr-question > span { color: var(--ds-heading); font-size: 13px; font-weight: 700; }
.nx-pr-question small { color: var(--ds-text-light); font-weight: 500; }
.nx-pr-what textarea { width: 100%; min-height: 84px; padding: 10px 12px; resize: vertical; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); color: var(--ds-text); font: inherit; font-size: 14px; line-height: 1.45; }
.nx-pr-what textarea:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 18%, transparent); }
.nx-pr-evidence { display: flex; gap: 8px; }
.nx-pr-evidence button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px dashed var(--ds-primary-border, var(--ds-border)); border-radius: 10px; background: var(--ds-bg-soft); color: var(--ds-primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nx-pr-evidence button svg { width: 17px; height: 17px; }
.nx-pr-evidence .nx-pr-photo { flex: 1 1 auto; }
.nx-pr-files { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-pr-files .problem-file-card { display: inline-flex; align-items: center; gap: 4px; min-height: 0; margin: 0; padding: 4px 4px 4px 10px; border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-bg-soft); box-shadow: none; }
.nx-pr-files .problem-file-card > button:first-child { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ds-text); font: inherit; font-size: 12.5px; }
.nx-pr-files .problem-file-card svg { width: 15px; height: 15px; color: var(--ds-primary); }
.nx-pr-files .problem-file-card small { color: var(--ds-text-light); }
.nx-pr-files .remove-problem-file { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.nx-pr-question { display: grid; gap: 7px; }
.nx-pr-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.nx-pr-seg button, .nx-pr-chips button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); color: var(--ds-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nx-pr-seg button svg, .nx-pr-chips button svg { width: 15px; height: 15px; }
.nx-pr-seg button:hover, .nx-pr-chips button:hover { border-color: var(--ds-primary-border, var(--ds-primary)); }
.nx-pr-seg button.active, .nx-pr-chips button.active { border-color: var(--ds-primary); background: color-mix(in srgb, var(--ds-primary) 10%, var(--ds-card)); box-shadow: inset 0 0 0 1px var(--ds-primary); color: var(--ds-heading); font-weight: 800; }
.nx-pr-stop button.is-yes.active { border-color: #c62828; background: #fdecec; box-shadow: inset 0 0 0 1px #c62828; color: #a11d1d; }
.nx-pr-priority button.is-nizak.active { border-color: #8a9bb0; background: #eef2f6; box-shadow: inset 0 0 0 1px #8a9bb0; color: #334155; }
.nx-pr-priority button.is-srednji.active { border-color: #d4a017; background: var(--ds-warning-bg); box-shadow: inset 0 0 0 1px #d4a017; color: #7a5200; }
.nx-pr-priority button.is-visok.active { border-color: #ea7a1a; background: #fff0e0; box-shadow: inset 0 0 0 1px #ea7a1a; color: #9a3f0a; }
.nx-pr-priority button.is-kritican.active { border-color: #c62828; background: #c62828; box-shadow: none; color: #fff; }
.nx-pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-pr-chips button { min-height: 34px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; }
.nx-pr-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ds-border); background: var(--ds-card); }
.nx-pr-foot .primary-button { display: inline-flex; align-items: center; gap: 7px; }

/* Detail */
.modal-panel.nx-pd-modal { width: min(740px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); }
.nx-pd-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 18px 12px; border-bottom: 1px solid var(--ds-border); }
.nx-pd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nx-pd-context { min-width: 0; margin: 0; overflow: hidden; color: var(--ds-text-muted); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nx-pd-tools { display: flex; align-items: center; gap: 4px; }
.nx-pd-title { margin: 0; color: var(--ds-heading); font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.nx-pd-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-pd-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ds-text-muted); font-size: 13px; }
.nx-pd-facts em { font-style: normal; color: var(--ds-text-light); }
.nx-pd-priority { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-heading); font-weight: 800; }
.nx-pd-priority i { width: 9px; height: 9px; border-radius: 50%; background: #a9b6c6; }
.nx-pd-priority.srednji i { background: #e0b341; }
.nx-pd-priority.visok i { background: #ea7a1a; }
.nx-pd-priority.kritican i { background: #c62828; }
.nx-pd-priority.kritican { color: #a11d1d; }
.nx-pd-stops { color: #c62828; font-weight: 800; }
.nx-pd-resolve { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.nx-pd-resolve-panel { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-bg-soft); }
.nx-pd-resolve-panel label { display: grid; gap: 5px; color: var(--ds-heading); font-size: 13px; font-weight: 700; }
.nx-pd-resolve-panel small { color: var(--ds-text-light); font-weight: 500; }
.nx-pd-resolve-panel textarea { width: 100%; padding: 8px 10px; resize: vertical; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-card); font: inherit; font-size: 13.5px; }
.nx-pd-resolve-panel > div { display: flex; justify-content: flex-end; gap: 8px; }
.nx-pd-modal .nx-pd-resolve-panel .primary-button { display: inline-flex; align-items: center; gap: 6px; background: #15803d; border-color: #15803d; color: #fff; }
.nx-pd-resolved { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--ds-success-bg, #e9f7ef); color: var(--ds-success-text, #166534); font-size: 13px; }
.nx-pd-resolved svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.nx-pd-resolved strong { margin-right: 8px; }
.nx-pd-resolved small { display: block; margin-top: 2px; color: var(--ds-text); font-size: 12.5px; }
.nx-pd-thread { display: grid; align-content: start; gap: 14px; min-height: 0; flex: 1 1 auto; overflow: auto; padding: 16px 18px; background: var(--ds-bg-soft); }
.nx-pd-msg { display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-card); }
.nx-pd-msg header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nx-pd-msg header strong { color: var(--ds-heading); font-size: 13px; }
.nx-pd-msg time { color: var(--ds-text-light); font-size: 11.5px; white-space: nowrap; }
.nx-pd-msg p { margin: 0; color: var(--ds-text); font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-pd-msg.is-system { border-color: transparent; background: transparent; padding: 2px 4px; }
.nx-pd-msg.is-system p { color: var(--ds-text-muted); font-size: 12.5px; }
.nx-pd-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.nx-pd-file { display: grid; place-items: center; width: 88px; height: 66px; overflow: hidden; padding: 0; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-bg-soft); color: var(--ds-text-muted); cursor: zoom-in; }
.nx-pd-file span, .nx-pd-file img { width: 100%; height: 100%; }
.nx-pd-file span { display: grid; place-items: center; }
.nx-pd-file img { object-fit: cover; }
.nx-pd-file svg { width: 20px; height: 20px; }
.nx-pd-file.is-pdf { width: auto; min-width: 88px; height: 40px; grid-auto-flow: column; gap: 6px; padding: 0 10px; cursor: pointer; }
.nx-pd-file.is-pdf small { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.nx-pd-composer { display: grid; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--ds-border); background: var(--ds-card); }
.nx-pd-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.nx-pd-compose-row textarea { flex: 1 1 auto; min-height: 40px; max-height: 140px; padding: 9px 12px; resize: none; border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-card); font: inherit; font-size: 13.5px; line-height: 1.4; field-sizing: content; }
.nx-pd-compose-row textarea:focus { outline: none; border-color: var(--ds-primary); }
.nx-pd-compose-row .icon-action, .nx-pd-send { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 10px; }
.nx-pd-send svg, .nx-pd-attach svg { width: 18px; height: 18px; }
.nx-pd-count { justify-self: end; color: var(--ds-text-light); font-size: 11px; }
.nx-pd-closed { margin: 0; padding: 12px 18px; border-top: 1px solid var(--ds-border); color: var(--ds-text-muted); font-size: 12.5px; text-align: center; }

/* Phone: both are full-screen sheets; the main action stays reachable. */
@media (max-width: 760px) {
  .modal-backdrop:has(> .nx-pr-modal), .modal-backdrop:has(> .nx-pd-modal) { padding: 0; place-items: stretch; }
  .modal-panel.nx-pr-modal, .modal-panel.nx-pd-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .nx-pr-head, .nx-pd-head { padding: calc(12px + env(safe-area-inset-top)) 14px 10px; }
  .nx-pr-body { padding: 14px; }
  .nx-pr-evidence .nx-pr-photo { min-height: 52px; font-size: 14px; }
  .nx-pr-seg button { min-height: 44px; padding: 6px 4px; font-size: 12.5px; }
  .nx-pr-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .nx-pr-foot .primary-button { flex: 1 1 auto; justify-content: center; }
  .nx-pd-title { font-size: 17px; }
  .nx-pd-status { flex-wrap: wrap; }
  .nx-pd-thread { padding: 12px; }
  .nx-pd-composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
}

/* Work order Problemi tab: same rows as the Problemi module; the order code is redundant inside the order. */
.wo-problems { display: grid; gap: 12px; }
.wo-problems-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.wo-problems-search { display: flex; align-items: center; gap: 8px; min-width: min(320px, 100%); padding: 0 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-input); background: var(--ds-card); }
.wo-problems-search svg { width: 15px; height: 15px; color: var(--ds-text-light); }
.wo-problems-search input { flex: 1 1 auto; min-height: 38px; border: 0; outline: none; background: transparent; font: inherit; font-size: 13.5px; }
.wo-problems .nx-problem-meta b { display: none; }
.wo-problems-empty { display: flex; align-items: center; gap: 12px; margin: 0; padding: 22px 18px; color: var(--ds-text-muted); }
.wo-problems-empty > svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--ds-success, #15803d); }
.wo-problems-empty span { display: grid; gap: 2px; }
.wo-problems-empty strong { color: var(--ds-heading); font-size: 14px; }
.wo-problems-empty small { font-size: 12.5px; }

/* Reminders: Završeno is the positive action, in green. */
.nx-due-reminder [data-action="calendar-reminder-done"], .nx-reminder-alert [data-action="reminder-alert-done"] { border-color: #15803d; background: #15803d; color: #fff; }
.nx-due-reminder [data-action="calendar-reminder-done"]:hover, .nx-reminder-alert [data-action="reminder-alert-done"]:hover { border-color: #116b33; background: #116b33; color: #fff; }

/* =====================================================================================
   Tabele i kartice — jedan ugovor (docs/superpowers/specs/2026-10-19-tabele-i-kartice-design.md).
   Every data table carries .nx-table (a module register) or .nx-table.nx-table--embedded
   (inside a modal, tab or card). Module CSS sets column widths and alignment only, never the
   cell typography, padding or colors below.
   ===================================================================================== */
:root {
  --nx-table-head-size: var(--nx-v2-table-head-size);
  --nx-table-body-size: var(--nx-v2-table-body-size);
  --nx-table-cell-y: var(--nx-v2-table-cell-y);
  --nx-table-cell-x: var(--nx-v2-table-cell-x);
  --nx-table-row-height: 44px;
  --nx-table-embedded-cell-y: 7px;
  --nx-table-embedded-row-height: 36px;
  --nx-table-hover: rgba(74, 127, 167, 0.06);
  --nx-card-radius: 10px;
}

.nx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.nx-table > thead > tr > th {
  padding: var(--nx-table-cell-y) var(--nx-table-cell-x);
  border-bottom: 1px solid var(--nx-v2-border);
  color: var(--nx-v2-muted);
  background: var(--nx-v2-surface-soft);
  font-size: var(--nx-table-head-size);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Quiet column separators, as the primary registers already had them. */
.nx-table > :is(thead, tbody) > tr > :is(th, td) + :is(th, td) {
  border-left: 1px solid var(--nx-table-column-border);
}

.nx-table > tbody > tr > td {
  height: var(--nx-table-row-height);
  padding: var(--nx-table-cell-y) var(--nx-table-cell-x);
  border-bottom: 1px solid var(--nx-v2-border);
  color: var(--nx-v2-navy-soft);
  font-size: var(--nx-table-body-size);
  font-weight: 400;
  line-height: 1.4;
  vertical-align: middle;
}

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

.nx-table > tbody > tr:hover > td {
  background: var(--nx-table-hover);
}

.nx-table--embedded > thead > tr > th {
  padding-block: var(--nx-table-embedded-cell-y);
}

.nx-table--embedded > tbody > tr > td {
  height: var(--nx-table-embedded-row-height);
  padding-block: var(--nx-table-embedded-cell-y);
}

/* Numbers line up by digit; dates, statuses and short codes sit in the middle. */
.nx-table :is(th, td).num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nx-table :is(th, td).center {
  text-align: center;
}

/* A row that opens its record: the whole row is the target; Enter and Space open it too (app.js keydown). */
.nx-table > tbody > tr:is([data-row-open], [data-action]) {
  cursor: pointer;
}

.nx-table > tbody > tr:is([data-row-open], [data-action]):focus-visible {
  outline: none;
}

.nx-table > tbody > tr:is([data-row-open], [data-action]):focus-visible > td {
  background: var(--nx-table-hover);
  box-shadow: inset 0 0 0 2px var(--ds-focus-ring-color, #4a7fa7);
}

/* One chip for every status, priority and type label inside a table. Tones (colors) stay per chip. */
:is(.nx-table > tbody > tr > td, .nx-row-card) :is(.status-badge, .status-pill, .priority-badge, .team-status-badge, .team-role-badge, .field-status-badge, .customer-market-badge, .station-realization-pill, .machine-status-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 0;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---- Red kao kartica (telefon i uske liste) --------------------------------------------------
   Every list card has one shape: code + status + ⋯ on top, the name below (two lines at most),
   then the facts in two columns with a small label above each value. The #section-root/#modal-root
   prefix lets this one contract win over the older per-module card rules. */
:is(#section-root, #modal-root) .nx-row-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--nx-v2-border);
  border-radius: var(--nx-card-radius);
  background-color: var(--nx-v2-surface);
  box-shadow: none;
  text-align: left;
}

:is(#section-root, #modal-root) .nx-row-card:is(.material-warning-row-min, .product-replenishment-row, .due-soon) {
  border-color: #f1dfb8;
  background-color: #fffaf0;
}

:is(#section-root, #modal-root) .nx-row-card:is(.material-warning-row-danger, .overdue, .late) {
  border-color: #f2caca;
  background-color: #fff6f6;
}

:is(#section-root, #modal-root) .nx-row-card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(#section-root, #modal-root) .nx-row-card.archive-card > header {
  grid-template-columns: minmax(0, 1fr);
}

:is(#section-root, #modal-root) .nx-row-card.archive-card > header .mobile-card-head-actions {
  justify-content: space-between;
}

:is(#section-root, #modal-root) .nx-row-card > header > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--nx-v2-navy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

:is(#section-root, #modal-root) .nx-row-card > header :is(h2, h3, h4) {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--nx-v2-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:is(#section-root, #modal-root) .nx-row-card :is(.mobile-card-head-actions, .mobile-card-badges) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

:is(#section-root, #modal-root) .nx-row-card > header .mobile-card-head-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

:is(#section-root, #modal-root) .nx-row-card .icon-action:is(.list-actions-trigger, .shipment-actions-trigger, .invoice-actions-trigger),
:is(#section-root, #modal-root) .nx-row-card > header .icon-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}

:is(#section-root, #modal-root) .nx-row-card > dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--nx-v2-border);
}

:is(#section-root, #modal-root) .nx-row-card > dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  text-align: left;
  gap: 1px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

:is(#section-root, #modal-root) .nx-row-card > dl dt {
  margin: 0;
  color: var(--nx-v2-muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

:is(#section-root, #modal-root) .nx-row-card > dl dt::before,
:is(#section-root, #modal-root) .nx-row-card > dl dt::after {
  content: none;
}

:is(#section-root, #modal-root) .nx-row-card > dl dd {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  text-align: left;
  color: var(--nx-v2-navy-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* A due date or a realization in a card is a value like any other; only its color carries meaning. */
:is(#section-root, #modal-root) .nx-row-card > dl :is(.due-chip, .station-realization-pill) {
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}

:is(#section-root, #modal-root) .nx-row-card > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--nx-v2-border);
}

:is(#section-root, #modal-root) :has(> .nx-row-card) {
  gap: 8px;
}

/* Work order detail on the phone: one type scale. Section 15px, label 11px, value 16px regular
   (16px keeps iOS from zooming), summary numbers 15px; summaries sit two per row. */
@media (max-width: 760px) {
  #section-root .work-order-detail-shell :is(.wo-general-section h2, .wo-material-specification-heading h3, .wo-material-final-section > header h3) {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  #section-root .work-order-detail-shell .wo-general-field :is(input, select, textarea) {
    font-weight: 500;
  }

  #section-root .work-order-detail-shell .wo-general-priority-option :is(strong, input) {
    font-size: 14px;
    font-weight: 600;
  }

  #section-root .work-order-detail-shell :is(.wo-due-date-actions, .wo-material-specification-actions) :is(.primary-button, .secondary-button) {
    min-height: 36px;
    font-size: 13px;
  }

  #section-root .work-order-detail-shell .wo-material-final-summaries,
  #section-root .work-order-detail-shell .wo-material-warehouse-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #section-root .work-order-detail-shell :is(.wo-material-availability-summary, .wo-material-cost-summary, .wo-material-warehouse-summary > article) {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
  }

  #section-root .work-order-detail-shell :is(.wo-material-availability-summary, .wo-material-cost-summary, .wo-material-warehouse-summary > article) > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
  }

  #section-root .work-order-detail-shell :is(.wo-material-availability-summary, .wo-material-cost-summary, .wo-material-warehouse-summary > article) > strong {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  #section-root .work-order-detail-shell :is(.wo-material-availability-summary, .wo-material-cost-summary, .wo-material-warehouse-summary > article) > small {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
  }

  #section-root .wo-material-final-card > footer .secondary-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* Work order items, documents, work entry and material settlement on the phone: the same scale
   (titles 15px, codes 13px, labels 11px) and side-by-side signals instead of one element per row. */
@media (max-width: 760px) {
  #section-root .work-order-items-runtime .root-item-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ordinal identity chevron" "ordinal identity signals";
    align-items: start;
    gap: 6px 10px;
  }

  #section-root .work-order-items-runtime .root-item-toggle.root-item-static {
    grid-template-areas: "ordinal identity signals";
  }

  #section-root .work-order-items-runtime .root-signals {
    justify-self: end;
  }

  #section-root .work-order-items-runtime .root-card-ordinal {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 13px;
    font-weight: 800;
  }

  #section-root .work-order-items-runtime :is(.root-identity, .nested-identity, .operation-identity) strong,
  #section-root .work-order-items-runtime .root-title-line .root-item-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  #section-root .work-order-items-runtime .root-title-line :is(.root-item-code, .product-quick-info-link) {
    font-size: 13px;
    font-weight: 800;
  }

  #section-root .work-order-items-runtime .nested-item-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "toggle identity actions" "toggle identity signals";
    align-items: start;
    gap: 6px 10px;
  }

  #section-root .work-order-items-runtime .nested-item-header > .nested-toggle { grid-area: toggle; }
  #section-root .work-order-items-runtime .nested-item-header > .nested-identity { grid-area: identity; }
  #section-root .work-order-items-runtime .nested-item-header > .nested-signals { grid-area: signals; justify-self: end; }
  #section-root .work-order-items-runtime .nested-item-header > .nested-actions { grid-area: actions; display: flex; justify-self: end; }
  #section-root .work-order-items-runtime .nested-item-header > .item-pictogram { display: none; }

  #section-root .wo-documents-tab :is(h2, h3) {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  #section-root .wo-documents-tab .wo-documents-head-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #section-root .wo-documents-tab .wo-documents-head-actions > button {
    width: auto;
    flex: 0 0 auto;
  }

  #section-root .wo-documents-tab .wo-documents-panel > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #modal-root .manual-final-summary h3 {
    font-size: 15px;
  }

  #modal-root .manual-final-summary dd {
    font-size: 14px;
    font-weight: 700;
  }

  #modal-root .settlement-review > header {
    padding: 12px;
  }

  #modal-root .settlement-review > header h3,
  #modal-root .settlement-review-identity strong {
    font-size: 15px;
  }

  #modal-root .settlement-review article dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
  }

  #modal-root .settlement-review article dl > div {
    min-height: 0;
    gap: 4px;
    padding: 8px 10px;
  }

  #modal-root .settlement-review article dl dt {
    font-size: 11px;
  }

  #modal-root .settlement-review article dl dd {
    margin: 0;
    font-size: 14px;
  }
}

/* Phone list chrome: content leads, tools stay compact. Inputs keep 16px text (iOS zoom guard). */
@media (max-width: 760px) {
  :root {
    --ds-list-control-height: 38px;
  }

  #section-root .filter-primary-row :is(input:not([type="checkbox"]):not([type="radio"]), select, button) {
    height: 38px;
    min-height: 38px;
  }

  #section-root .filter-primary-row input::placeholder {
    font-size: 14px;
  }

  :is(#section-root, #modal-root) footer.list-pagination .product-page-size {
    display: none;
  }

  :is(#section-root, #modal-root) footer.list-pagination .product-page-nav button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 13px;
  }

  #section-root .list-pagination .product-pagination-summary {
    font-size: 12px;
  }
}

/* Evidentiraj rad: the machine panel follows the NormaX card pattern (one title, one quiet action). */
.work-entry-machine-panel > header h3 { display: inline-flex; align-items: center; gap: 8px; color: var(--nx-v2-navy); font-size: 15px; font-weight: 700; }
.work-entry-machine-panel > header h3 svg { width: 17px; height: 17px; color: var(--nx-v2-blue); }
.work-entry-machine-remove { color: var(--nx-v2-muted); }
.work-entry-machine-remove svg { width: 14px; height: 14px; }
.work-entry-machine-remove:hover, .work-entry-machine-remove:focus-visible { border-color: #e7b4b6; background: #fdeced; color: #b8383e; }
.work-entry-machine-plan { align-items: center; }
.work-entry-machine-plan .secondary-button { margin-left: 4px; }

/* Archive: the signed delivery note badge is a link to the signed copy. */
.archive-signed-open { display: inline-flex; align-items: center; gap: 5px; border: 0; font: inherit; cursor: pointer; }
.archive-signed-open svg { width: 13px; height: 13px; }
.archive-signed-open:hover, .archive-signed-open:focus-visible { text-decoration: underline; outline: 0; filter: brightness(.95); }

/* Nedeljni izveštaj: a compact report card in the Početna header; the full report opens in a modal
   that fits one screen on a desktop (top rows here, every row in the PDF). */
.nx-command-header-actions-only:has(.nx-week-summary) { justify-content: space-between; gap: 12px; }
.nx-week-summary { display: inline-flex; align-items: center; gap: 12px; min-width: 0; min-height: 46px; padding: 5px 12px 5px 6px; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); background: var(--nx-v2-surface); box-shadow: 0 1px 2px rgba(10, 25, 49, .05); color: var(--ds-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.nx-week-summary:hover, .nx-week-summary:focus-visible { border-color: #9fbad3; box-shadow: 0 3px 10px rgba(10, 25, 49, .09); outline: 0; }
.nx-week-summary > svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--nx-v2-muted); }
.nx-week-summary-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #1a3d63; color: #fff; }
.nx-week-summary-icon svg { width: 17px; height: 17px; }
.nx-week-summary-title { display: grid; gap: 1px; min-width: 0; }
.nx-week-summary-title small { color: var(--nx-v2-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nx-week-summary-title b { overflow: hidden; color: var(--nx-v2-navy); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nx-week-summary-stats { display: flex; padding-left: 4px; border-left: 1px solid var(--nx-v2-border); }
.nx-week-summary-stats > span { display: grid; justify-items: center; min-width: 58px; padding: 0 8px; }
.nx-week-summary-stats strong { color: var(--nx-v2-navy); font-size: 16px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nx-week-summary-stats small { color: var(--nx-v2-muted); font-size: 10.5px; font-weight: 600; }
.nx-week-summary-stats > span.is-alert strong { color: #b8383e; }

.modal-panel.flow-modal.nx-modal-shell.nx-week-report-modal { width: min(1240px, calc(100vw - 40px)); max-width: 1240px; }
.nx-week-report-modal .nx-week-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.nx-week-nav { display: inline-flex; align-items: center; gap: 8px; }
.nx-week-nav strong { min-width: 200px; color: var(--nx-v2-navy); font-size: 13.5px; font-weight: 700; text-align: center; white-space: nowrap; }
.nx-week-nav .secondary-button.compact { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; }
.nx-week-nav .secondary-button.compact svg { width: 15px; height: 15px; }
.nx-week-report { display: grid; gap: 12px; }
.nx-week-report h3 { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--ds-heading); font-size: 13px; font-weight: 700; }
.nx-week-report h3 svg { width: 15px; height: 15px; color: #4a7fa7; }
.nx-week-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; }
.nx-week-kpis > div { position: relative; display: grid; align-content: start; gap: 3px; min-width: 0; padding: 11px 13px 10px; overflow: hidden; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); background: var(--nx-v2-surface); }
.nx-week-kpis > div::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: #185a9d; }
.nx-week-kpis > div:nth-child(2)::before { background: #2f8f5b; }
.nx-week-kpis > div:nth-child(3)::before { background: #e0a020; }
.nx-week-kpis > div:nth-child(4)::before { background: #4a7fa7; }
.nx-week-kpis > div:nth-child(5)::before { background: #2f8f5b; }
.nx-week-kpis > div.is-alert::before { background: #dc4f55; }
.nx-week-kpis dt { color: var(--nx-v2-muted); font-size: 12px; font-weight: 600; }
.nx-week-kpis dd { margin: 0; color: var(--nx-v2-navy); font-size: 23px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-week-kpis > div.is-alert dd { color: #b8383e; }
.nx-week-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--nx-v2-muted); font-size: 11.5px; font-weight: 600; }
.nx-week-compare b { padding: 1px 7px; border-radius: 999px; background: #eef2f6; color: #4d6275; font-size: 11px; font-variant-numeric: tabular-nums; }
.nx-week-compare b.is-up { background: #e7f4ec; color: #237049; }
.nx-week-compare b.is-down { background: #fdf3e1; color: #94600f; }
.nx-week-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; gap: 12px; }
/* Equal columns: every column ends on the same line; only its last card grows, content stays on top. */
.nx-week-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nx-week-column > .nx-week-card { flex: 0 0 auto; align-content: start; }
.nx-week-column > .nx-week-card:last-child { flex: 1 1 auto; }
.nx-week-problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.nx-week-problems > div { display: grid; gap: 1px; }
.nx-week-problems dd { margin: 0; color: var(--nx-v2-navy); font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-week-problems dt { color: var(--nx-v2-muted); font-size: 11.5px; }
.nx-week-problems .is-alert dd { color: #b8383e; }
.nx-week-column:empty { display: none; }
.nx-week-card { display: grid; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); background: var(--nx-v2-surface); }
.nx-week-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nx-week-card > header small { color: var(--nx-v2-muted); font-size: 12px; white-space: nowrap; }
.nx-week-chart { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 14px; }
.nx-week-donut { position: relative; width: 100px; height: 100px; }
.nx-week-donut > .chart-donut-svg { display: block; width: 100%; height: 100%; }
.nx-week-donut > span { position: absolute; inset: 50% auto auto 50%; display: grid; justify-items: center; gap: 1px; transform: translate(-50%, -50%); pointer-events: none; }
.nx-week-donut > span strong { color: var(--nx-v2-navy); font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; }
.nx-week-donut > span small { color: var(--nx-v2-muted); font-size: 10px; font-weight: 600; }
.nx-week-legend { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.nx-week-legend li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.nx-week-legend i { width: 9px; height: 9px; border-radius: 50%; }
.nx-week-legend span { overflow: hidden; color: var(--ds-text); text-overflow: ellipsis; white-space: nowrap; }
.nx-week-legend strong { color: var(--nx-v2-navy); font-variant-numeric: tabular-nums; }
.nx-week-empty { margin: 0; color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-week-table { --nx-table-row-height: 36px; --nx-table-cell-y: 5px; --nx-table-cell-x: 8px; font-variant-numeric: tabular-nums; }
.nx-week-table th, .nx-week-table td { text-align: right; white-space: nowrap; }
.nx-week-table th:first-child, .nx-week-table td:first-child { width: 46%; max-width: 0; text-align: left; }
.nx-week-cell { display: grid; gap: 4px; min-width: 0; }
.nx-week-cell span { overflow: hidden; color: var(--ds-text); font-weight: 600; text-overflow: ellipsis; }
.nx-week-table td b { color: var(--nx-v2-navy); }
.nx-week-bar { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: #e8eff5; }
.nx-week-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--nx-week-bar, 0%); border-radius: inherit; background: #4a7fa7; }
.nx-week-bar.is-alert { background: #f6e3e4; }
.nx-week-bar.is-alert::before { background: #dc4f55; }
.nx-week-more { margin: -2px 0 0; color: var(--nx-v2-muted); font-size: 11.5px; }
.nx-week-reasons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nx-week-reasons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 12px; }
.nx-week-reasons li span { overflow: hidden; color: var(--ds-text); text-overflow: ellipsis; white-space: nowrap; }
.nx-week-reasons li strong { color: var(--nx-v2-navy); font-variant-numeric: tabular-nums; }
.nx-week-reasons li .nx-week-bar { grid-column: 1 / -1; }
.nx-week-note { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--nx-v2-muted); font-size: 11.5px; }
.nx-week-note svg { flex: 0 0 auto; width: 13px; height: 13px; }
.nx-week-late { display: grid; gap: 6px; }
.nx-week-late + .nx-week-late { margin-top: 4px; }
.nx-week-late h4 { margin: 0; color: var(--ds-heading); font-size: 12.5px; font-weight: 700; }
.nx-week-late ul { display: grid; margin: 0; padding: 0; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); list-style: none; overflow: hidden; }
.nx-week-late li + li { border-top: 1px solid var(--nx-v2-border); }
.nx-week-late button { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 12px; border: 0; background: var(--nx-v2-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nx-week-late button:hover, .nx-week-late button:focus-visible { background: var(--nx-v2-blue-soft); outline: 0; }
.nx-week-late button span { overflow: hidden; color: var(--ds-text); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.nx-week-late button b { margin-right: 8px; color: var(--nx-v2-navy); font-weight: 700; }
.nx-week-late button em { padding: 2px 8px; border-radius: 999px; background: #fdeced; color: #b8383e; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
/* Phones: the code on its own line, the job title in full width below, so the title stays readable. */
@media (max-width: 760px) {
  .nx-week-late button { min-height: 52px; padding: 8px 12px; }
  .nx-week-late button span { display: block; color: var(--nx-v2-muted); font-size: 12px; line-height: 1.35; white-space: normal; }
  .nx-week-late button b { display: block; margin: 0 0 1px; font-size: 13px; }
}
.nx-week-late button em.is-neutral { background: #eaf1f7; color: #1a3d63; }
.nx-week-late button svg { width: 14px; height: 14px; color: var(--nx-v2-muted); }
.nx-week-foot { color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-week-loading { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 260px; color: var(--nx-v2-muted); font-size: 13px; }
.nx-week-loading svg { width: 16px; height: 16px; animation: nx-upload-spin 1s linear infinite; }
@media (max-width: 1180px) {
  .nx-week-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-week-column:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
  .nx-command-header-actions-only:has(.nx-week-summary) { flex-wrap: wrap; min-width: 0; }
  /* On a phone the card takes its own row instead of pushing the header past the screen edge. */
  .nx-week-summary { order: 2; width: 100%; gap: 10px; }
  .nx-week-summary-title { flex: 1 1 auto; }
  .nx-week-summary-stats > span { min-width: 0; padding: 0 6px; }
  /* The whole period stays readable: it wraps to a second line instead of being cut. */
  .nx-week-summary-title b { white-space: normal; line-height: 1.25; }
  .modal-panel.flow-modal.nx-modal-shell.nx-week-report-modal { width: 100vw; max-width: 100vw; }
  .nx-week-report-modal .nx-week-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nx-week-report-modal .nx-week-head .flow-close-button { grid-column: 3; grid-row: 1; }
  .nx-week-nav { grid-column: 1 / -1; justify-content: space-between; }
  .nx-week-nav strong { min-width: 0; }
  .nx-week-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-week-grid, .nx-week-column:last-child { grid-template-columns: minmax(0, 1fr); }
  .nx-week-column > .nx-week-card { flex: 0 0 auto; }
  .nx-week-foot { display: none; }
}

/* Demo firma banner: a warm amber strip, clearly apart from the navy sidebar; it lights up when a change is refused. */
.demo-banner { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 8px 14px; padding: 9px 20px; border-bottom: 1px solid #f0d49a; background: #fff6e0; color: #5c4300; font-size: 14px; }
.demo-banner-label { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: #b7791f; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.demo-banner-text { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.demo-banner-link { padding: 5px 12px; border: 1px solid #c99a45; border-radius: var(--ds-radius-button); background: #fff; color: #5c4300; font-weight: 600; text-decoration: none; }
.demo-banner-link:hover { border-color: #b7791f; background: #fffaf0; }
.demo-banner.is-attention { animation: demo-banner-attention 1.6s ease-out; }
/* The demo window after a refused change: the reason, three facts about the trial, one main action. */
#modal-root .demo-notice-modal .nx-modal-body { display: grid; gap: 14px; padding: 18px 20px 20px; }
#modal-root .demo-notice-modal { max-width: 560px; }
#modal-root .demo-notice-modal .demo-notice-lead { margin: 0; color: var(--nx-v2-text, #173b57); font-size: 14px; line-height: 1.5; }
#modal-root .demo-notice-modal .demo-notice-points { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid #f0d49a; border-radius: 10px; background: #fffaf0; list-style: none; }
#modal-root .demo-notice-modal .demo-notice-points li { display: flex; align-items: center; gap: 10px; color: #5c4300; font-size: 13.5px; font-weight: 600; }
#modal-root .demo-notice-modal .demo-notice-points svg { flex: 0 0 16px; width: 16px; height: 16px; color: #b7791f; }
#modal-root .demo-notice-modal .demo-notice-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@keyframes demo-banner-attention { 0%, 35% { background: #ffd98a; } 100% { background: #fff6e0; } }
@media (prefers-reduced-motion: reduce) { .demo-banner.is-attention { animation: none; background: #ffe7b0; } }
@media (max-width: 760px) {
  .demo-banner { justify-content: space-between; padding: 7px 16px; font-size: 13px; }
  .demo-banner-text { display: none; }
  .demo-banner-link { padding: 4px 10px; }
  /* On the phone the explanation shows only while the banner lights up. */
  .demo-banner.is-attention .demo-banner-label { display: none; }
  .demo-banner.is-attention .demo-banner-text { display: block; }
}
/* The banner has a fixed height and the shell gives exactly that back, so the Demo firma adds no page scroll. */
.demo-banner { box-sizing: border-box; height: 44px; flex-wrap: nowrap; overflow: hidden; padding-block: 0; }
.demo-banner-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-banner-link { flex: 0 0 auto; white-space: nowrap; }
.demo-banner ~ .app-shell { min-height: calc(100dvh - 44px); }
/* Početna is fitted to the screen; the decorative NormaX mark gives the banner its room. */
.demo-banner ~ .app-shell .content-signature { display: none; }
@media (min-width: 981px) { .demo-banner ~ .app-shell > .sidebar { top: 44px; height: calc(100dvh - 44px); } }
@media (max-width: 980px) { .demo-banner ~ .app-shell { height: calc(100dvh - 44px); } }

/* Demo firma: the import stops at confirm with the same amber as the demo banner. */
.demo-import-notice { margin: 12px 20px; border: 1px solid #f0d49a; border-radius: var(--nx-v2-radius-md); background: #fff6e0; color: #5c4300; }
.demo-import-notice svg { color: #b7791f; }

/* Završi proizvodnju: one compact row per operation — what it is on the left, one machine picker on the right. */
.quick-completion-modal .quick-completion-machine-list { display: grid; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); background: #fff; }
.quick-completion-modal .quick-completion-machine-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 12px; }
.quick-completion-modal .quick-completion-machine-row + .quick-completion-machine-row { border-top: 1px solid var(--nx-v2-border); }
.quick-completion-modal .quick-completion-machine-label { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.quick-completion-modal .quick-completion-machine-label strong { overflow: hidden; color: var(--nx-v2-navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.quick-completion-modal .quick-completion-machine-label small, .quick-completion-machine-unavailable { color: var(--nx-v2-muted); font-size: 12px; line-height: 1.4; }
.quick-completion-modal .quick-completion-machine-controls { display: grid; justify-items: end; gap: 6px; width: 210px; }
.quick-completion-modal .quick-completion-machine-controls select { width: 100%; min-width: 0; }
.quick-completion-modal .quick-completion-machine-controls .manual-duration-control { width: auto; }
.quick-completion-modal .quick-completion-machine-controls .manual-duration-pair input { width: 48px; }
.quick-completion-modal [data-quick-machine-time][hidden] { display: none; }
@media (max-width: 640px) {
  .quick-completion-modal .quick-completion-machine-row { grid-template-columns: 1fr; gap: 8px; }
  .quick-completion-modal .quick-completion-machine-controls { width: 100%; justify-items: start; }
}

/* Završi proizvodnju: "Šta se upisuje" — one plain line per kind of record. */
.quick-completion-record { padding: 12px 14px; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); background: var(--nx-v2-surface); }
.quick-completion-record h3 { margin: 0 0 8px; color: var(--nx-v2-navy); font-size: 14px; }
.quick-completion-record ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.quick-completion-record li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--nx-v2-navy); }
.quick-completion-record li svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: #2f8f5b; }
.quick-completion-record li.is-off { color: var(--nx-v2-muted); }
.quick-completion-record li.is-off svg { color: var(--nx-v2-muted); }

/* Evidentiraj rad: a proposed sentence on top, then one line per fact. Every control shares one
   height and one radius so the rows read as a single aligned grid. */
.nx-qwe { --qwe-h: 36px; --qwe-r: 10px; display: grid; gap: 16px; }
.nx-qwe-sentence { margin: 0; padding: 14px 16px; border: 1px solid var(--nx-v2-border); border-left: 3px solid var(--nx-v2-blue); border-radius: var(--qwe-r); background: var(--nx-v2-surface-soft); color: var(--nx-v2-navy); font-size: 15px; line-height: 1.55; }
.nx-qwe-sentence b { font-weight: 650; }
.nx-qwe-sentence b.is-missing { color: #a32929; }
.nx-qwe-rows { display: grid; gap: 0; border-top: 1px solid var(--nx-v2-border); }
.nx-qwe-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--nx-v2-border); }
.nx-qwe-row[hidden] { display: none; }
.nx-qwe-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--nx-v2-muted); }
.nx-qwe-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.nx-qwe-chip, .nx-qwe-person,
.nx-qwe-control select,
.nx-qwe-control input[type="number"],
.nx-qwe-control input[type="date"],
.nx-qwe-control input[type="text"] { box-sizing: border-box; height: var(--qwe-h); min-height: var(--qwe-h); margin: 0; border-radius: var(--qwe-r); font-size: 13px; }
.nx-qwe-chip { position: relative; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--nx-v2-border); background: var(--nx-v2-surface); color: var(--nx-v2-navy); cursor: pointer; transition: border-color .15s, background .15s; }
.nx-qwe-chip:hover { border-color: var(--nx-v2-field-border-hover, var(--nx-v2-blue)); }
.nx-qwe-chip input { position: absolute; opacity: 0; pointer-events: none; }
.nx-qwe-chip:has(input:checked) { border-color: var(--nx-v2-blue); background: var(--nx-v2-blue-soft); font-weight: 600; box-shadow: inset 0 0 0 1px var(--nx-v2-blue); }
.nx-qwe-chip:has(input:focus-visible) { outline: 2px solid var(--nx-v2-blue); outline-offset: 2px; }
.nx-qwe-chip:has(input:disabled) { opacity: .5; cursor: default; }
.nx-qwe-person { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 12px; border: 1px solid var(--nx-v2-blue); background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy); font-weight: 600; }
.nx-qwe-person button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.nx-qwe-person button:hover { background: rgba(0, 0, 0, .07); }
.nx-qwe-person svg { width: 14px; height: 14px; }
.nx-qwe-control select, .nx-qwe-control input[type="date"], .nx-qwe-control input[type="text"] { width: auto; max-width: 100%; padding: 0 10px; }
.nx-qwe-control input[type="number"] { width: 64px; padding: 0 8px; text-align: right; }
.nx-qwe-inline, .nx-qwe-partial, .nx-qwe-machine-time { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--nx-v2-muted); }
.nx-qwe-duration { display: inline-flex; }
.nx-qwe-duration[hidden] { display: none; }
.nx-qwe .nx-qwe-duration .manual-duration-control { display: inline-flex; width: auto; margin: 0; padding: 0; gap: 0; }
.nx-qwe .nx-qwe-duration .manual-duration-pair { display: inline-flex; align-items: center; gap: 8px; width: auto; }
.nx-qwe .nx-qwe-duration .manual-duration-pair label { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; }
.nx-qwe .nx-qwe-duration .manual-duration-pair input { width: 64px; }
.nx-qwe .nx-qwe-duration .manual-duration-pair em { font-style: normal; font-size: 13px; color: var(--nx-v2-muted); }
.nx-qwe .nx-qwe-duration small:not([hidden]) { flex-basis: 100%; }
.nx-qwe-control textarea { flex: 1 1 auto; width: auto; min-width: 0; min-height: 64px; border-radius: var(--qwe-r); }
.nx-qwe-more { display: flex; flex-wrap: wrap; gap: 16px; }
.nx-qwe-more:empty { display: none; }
.nx-qwe-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--nx-v2-blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.nx-qwe-link:hover { text-decoration: underline; }
.nx-qwe-link svg { width: 14px; height: 14px; }
/* Whole-order entry: one card per open operation; a ticked card opens its rows. */
.nx-qwe .work-entry-attachment-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Modal fields default to 44px; inside Evidentiraj rad they follow the row height. */
.nx-qwe-modal .nx-qwe .nx-qwe-control input:not([type="radio"]):not([type="checkbox"]),
.nx-qwe-modal .nx-qwe .nx-qwe-control select { height: var(--qwe-h); min-height: var(--qwe-h); padding-top: 0; padding-bottom: 0; border-radius: var(--qwe-r); }
.nx-qwe-modal .nx-qwe .manual-duration-pair label { height: var(--qwe-h); min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
/* The date control: calendar icon first, week number beside the field. */
.nx-qwe-modal .nx-qwe .nx-date-control-wrap { --nx-date-input-height: var(--qwe-h); display: inline-flex; align-items: center; gap: 10px; width: auto; }
.nx-qwe-modal .nx-qwe .nx-qwe-control .nx-date-control-wrap input.nx-date-input { width: 136px; padding-left: 36px; padding-right: 10px; }
.nx-qwe-modal .nx-qwe .nx-calendar-trigger { left: 4px; right: auto; top: 50%; width: 28px; height: 28px; }
.nx-qwe-modal .nx-qwe .nx-date-control-wrap .iso-week-hint { min-height: 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nx-qwe-close { display: inline-grid; place-items: center; width: var(--qwe-h); height: var(--qwe-h); flex: 0 0 auto; border: 0; border-radius: var(--qwe-r); background: transparent; color: var(--nx-v2-muted); cursor: pointer; }
.nx-qwe-close:hover, .nx-qwe-close:focus-visible { background: #f1f4f8; color: var(--nx-v2-navy); }
.nx-qwe-close svg { width: 16px; height: 16px; }
.nx-qwe-control:has(> textarea) { flex-wrap: nowrap; align-items: flex-start; }
/* An external service on the operation line is information, not an action. */
.nx-external-note { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--nx-v2-muted); font-size: 12px; font-weight: 500; }
.nx-external-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .nx-qwe-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .nx-qwe-sentence { font-size: 14px; }
  .nx-qwe { --qwe-h: 40px; }
}

/* Evidencija rada: one list of everything recorded on a line. */
.nx-evidence-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--nx-v2-blue); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: var(--nx-v2-radius-sm); }
.nx-evidence-link:hover { background: var(--nx-v2-blue-soft); }
.nx-evidence-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nx-wev { display: grid; gap: 18px; }
.nx-wev-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); background: var(--nx-v2-border); overflow: hidden; }
.nx-wev-summary div { padding: 10px 14px; background: var(--nx-v2-surface-soft); }
.nx-wev-summary dt { color: var(--nx-v2-muted); font-size: 12px; }
.nx-wev-summary dd { margin: 2px 0 0; color: var(--nx-v2-navy); font-size: 15px; font-weight: 700; }
.nx-wev-day h3 { margin: 0 0 6px; color: var(--nx-v2-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.nx-wev-day ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-md); }
.nx-wev-entry { display: grid; gap: 4px; padding: 12px 14px; }
.nx-wev-entry + .nx-wev-entry { border-top: 1px solid var(--nx-v2-border); }
.nx-wev-entry.is-superseded { opacity: .55; }
.nx-wev-entry.is-superseded .nx-wev-head strong { text-decoration: line-through; }
.nx-wev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nx-wev-head strong { color: var(--nx-v2-navy); font-size: 14px; }
.nx-wev-duration { color: var(--nx-v2-navy); font-size: 13px; }
.nx-wev-operation, .nx-wev-tag { padding: 1px 8px; border-radius: 999px; background: var(--nx-v2-navy-soft); color: var(--nx-v2-navy); font-size: 11px; font-weight: 600; }
.nx-wev-correct { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; min-height: 32px; padding: 0 8px; border: 0; background: none; color: var(--nx-v2-muted); font-size: 12px; cursor: pointer; border-radius: var(--nx-v2-radius-sm); }
.nx-wev-correct:hover { background: var(--nx-v2-surface-soft); color: var(--nx-v2-blue); }
.nx-wev-correct svg, .nx-wev-line svg, .nx-wev-files svg { width: 14px; height: 14px; flex: 0 0 auto; }
.nx-wev-line { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--nx-v2-navy); font-size: 13px; }
.nx-wev-line svg { margin-top: 2px; color: var(--nx-v2-muted); }
.nx-wev-scrap svg { color: #b42318; }
.nx-wev-files { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-wev-files button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 10px; border: 1px solid var(--nx-v2-border); border-radius: var(--nx-v2-radius-sm); background: var(--nx-v2-surface); color: var(--nx-v2-navy); font-size: 12px; cursor: pointer; }
.nx-wev-files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-wev-meta { color: var(--nx-v2-muted); font-size: 12px; }
@media (max-width: 640px) {
  .nx-wev-entry { padding: 10px 12px; }
  .nx-wev-correct { margin-left: 0; }
}
.nx-wev-assignments summary { color: var(--nx-v2-muted); font-size: 12px; cursor: pointer; }
.nx-wev-assignments ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.nx-wev-assignments li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--nx-v2-navy); font-size: 12px; }
.nx-wev-assignments small { color: var(--nx-v2-muted); }

/* Line cards: one progress block (bar, facts, deviation only when there is one). */
.nx-line-progress { display: inline-grid; gap: 3px; width: 220px; max-width: 100%; justify-items: stretch; text-align: right; }
.nx-line-progress-top { display: flex; align-items: center; gap: 8px; }
.nx-line-progress-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--nx-v2-border); overflow: hidden; }
.nx-line-progress-bar i { display: block; height: 100%; border-radius: inherit; background: var(--nx-v2-blue); }
.nx-line-progress.completed .nx-line-progress-bar i { background: #16a34a; }
.nx-line-progress.paused .nx-line-progress-bar i { background: #d97706; }
.nx-line-progress-top b { min-width: 36px; color: var(--nx-v2-navy); font-size: 13px; font-weight: 700; }
.nx-line-progress small { color: var(--nx-v2-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-line-deviation { font-size: 12px; font-weight: 600; }
.nx-line-deviation.behind { color: #b42318; }
.nx-line-deviation.ahead { color: #15803d; }
.nx-line-progress .operation-time-deviation { justify-self: end; }
.nested-signals .nx-line-progress { width: 140px; }
.operation-progress-block .nx-line-progress-top b { display: inline; height: auto; border-radius: 0; background: none; }
.operation-progress-block .nx-line-progress-bar i { height: 100%; background: var(--nx-v2-blue); }
.operation-progress-block .nx-line-progress.completed .nx-line-progress-bar i { background: #16a34a; }
.operation-progress-block .nx-line-progress.paused .nx-line-progress-bar i { background: #d97706; }

/* Item lines: one header per item, operations as aligned rows. */
.nx-items-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--nx-v2-border); border-radius: 16px; background: var(--nx-v2-surface); }
.nx-items-toolbar .items-assignment-warning { flex: 1 0 100%; }
.nx-items-search { display: flex; align-items: center; gap: 8px; flex: 0 1 300px; min-width: 200px; height: 40px; padding: 0 12px; border: 1px solid var(--nx-v2-border); border-radius: 8px; background: var(--nx-v2-surface-soft); color: var(--nx-v2-muted); }
.nx-items-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nx-items-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; box-shadow: none; color: var(--nx-v2-navy); font: 500 13px Manrope, sans-serif; }
.nx-items-search:focus-within { border-color: var(--nx-v2-blue); box-shadow: 0 0 0 3px var(--nx-v2-blue-soft); }
.nx-status-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-status-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--nx-v2-border); border-radius: 999px; background: var(--nx-v2-surface); color: var(--nx-v2-navy-soft); font: 600 12.5px Manrope, sans-serif; cursor: pointer; }
.nx-status-chip b { color: var(--nx-v2-muted); font-weight: 700; }
.nx-status-chip:hover { background: var(--nx-v2-blue-soft); }
.nx-status-chip.is-active { border-color: var(--nx-v2-navy-soft); background: var(--nx-v2-navy-soft); color: #fff; }
.nx-status-chip.is-active b { color: #cfe0ee; }
.nx-items-station { height: 40px; padding: 0 10px; border: 1px solid var(--nx-v2-border); border-radius: 8px; background: var(--nx-v2-surface); color: var(--nx-v2-navy); font: 600 13px Manrope, sans-serif; }
.nx-items-toolbar-spacer { flex: 1 1 auto; }
.nx-items-toolbar .compact-command { height: 40px; min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 650; }
.nx-items-toolbar .compact-command span { font-size: 13px; font-weight: 650; }
.nx-items-toolbar .compact-command svg { width: 16px; height: 16px; }
.nx-items-toolbar [data-action="collapse-work-items"] svg { transform: rotate(180deg); }

.items-root-list { display: grid; gap: 12px; }
.nx-line { border: 1px solid var(--nx-v2-border); border-radius: 16px; background: var(--nx-v2-surface); overflow: hidden; scroll-margin-top: 90px; }
.nx-line-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(220px, 300px) auto; align-items: center; gap: 14px; padding: 14px 16px; }
.nx-line-ord { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--nx-v2-navy-soft); color: #fff; font-size: 13px; font-weight: 800; }
.nx-line.status-zavrseno .nx-line-ord { background: #15803d; }
.nx-line-title { min-width: 0; display: grid; gap: 3px; }
.nx-line-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nx-line-name h3 { margin: 0; min-width: 0; font-size: 15.5px; font-weight: 800; color: var(--nx-v2-navy); overflow-wrap: break-word; }
.nx-line-name .root-item-code { flex: 0 0 auto; color: var(--nx-v2-blue); font-size: 13px; font-weight: 700; }
.nx-line-name > :first-child:not(h3) { flex: 0 0 auto; }
.nx-line-meta { color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-line-summary { display: grid; gap: 4px; min-width: 0; }
.nx-line-time { display: grid; gap: 1px; color: var(--nx-v2-muted); font-size: 12px; line-height: 1.4; }
.nx-line-time-main { color: var(--nx-v2-navy); font-weight: 700; }
.nx-line-head-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.nx-line-toggle { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--nx-v2-border); border-radius: 8px; background: var(--nx-v2-surface); color: var(--nx-v2-navy-soft); cursor: pointer; }
.nx-line-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.nx-line.is-open .nx-line-toggle svg { transform: rotate(180deg); }
.nx-line-work { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 16px 14px 68px; }
.nx-line-body { border-top: 1px solid var(--nx-v2-border); }
.nx-line-progress-top.completed .nx-line-progress-bar i { background: #16a34a; }
.nx-line-progress-top.paused .nx-line-progress-bar i { background: #d97706; }
.nx-line-progress-top b { white-space: nowrap; text-align: right; }

.nx-op-head, .nx-op-row, .nx-group-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 196px 170px 176px 124px 34px; align-items: center; column-gap: 14px; padding: 0 16px; }
.nx-op-head { height: 34px; background: var(--nx-v2-surface-soft); color: var(--nx-v2-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.nx-op-row, .nx-group-row { min-height: 60px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid #edf2f6; }
.nx-op-head + .nx-op-row, .nx-op-head + .nx-group-row { border-top: 0; }
.nx-op-row > *, .nx-group-row > * { min-width: 0; }
.nx-op-row:hover { background: #fbfdfe; }
.nx-op-num { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: #f1f5f8; color: var(--nx-v2-muted); font-size: 12px; font-weight: 800; }
.nx-op-num.is-active { background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy-soft); box-shadow: inset 0 0 0 1.5px var(--nx-v2-blue); }
.nx-op-num.is-done { background: #e7f6ec; color: #15803d; }
.nx-op-num svg { width: 14px; height: 14px; }
.nx-op-name { display: grid; gap: 2px; padding-left: calc(var(--level, 0) * 18px); }
.nx-op-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-op-title strong { min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--nx-v2-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-op-desc { color: var(--nx-v2-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-op-note { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: #8a4b08; font-size: 12px; font-weight: 600; }
.nx-op-note svg { width: 13px; height: 13px; flex: 0 0 auto; }
.nx-op-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-worker { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 0 6px; margin-left: -6px; border: 0; border-radius: 8px; background: none; color: var(--nx-v2-navy); font: 600 12.5px Manrope, sans-serif; text-align: left; }
button.nx-worker { cursor: pointer; }
button.nx-worker:hover { background: var(--nx-v2-blue-soft); }
.nx-worker > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-worker svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--nx-v2-muted); }
.nx-worker.is-unassigned { color: #b54708; }
.nx-worker.is-unassigned svg { color: currentColor; }
.nx-worker.is-external { color: var(--nx-v2-muted); }
.nx-avatar { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy-soft); font-size: 10.5px; font-weight: 800; }
.nx-op-progress { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; }
button.nx-op-progress { min-height: 36px; border-radius: 8px; cursor: pointer; }
button.nx-op-progress:hover .nx-line-progress-top b { color: var(--nx-v2-blue); text-decoration: underline; }
.nx-op-progress .nx-line-progress-top b { min-width: 40px; font-size: 12.5px; }
.nx-op-time { display: grid; gap: 1px; font-size: 12.5px; }
.nx-op-time .operation-machine-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 5px; min-width: 0; margin-top: 3px; padding: 0; font: inherit; }
.nx-op-time .operation-machine-summary svg { grid-row: auto; flex: none; width: 13px; height: 13px; }
.nx-op-time .operation-machine-summary small,
.nx-op-time .operation-machine-summary strong { white-space: nowrap; font-size: 11px; }
.nx-op-time .operation-machine-names { flex-basis: 100%; max-width: 100%; }
.nx-time-main { color: var(--nx-v2-navy); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-time-main.is-idle { color: var(--nx-v2-muted); font-weight: 600; }
.nx-time-sub { color: var(--nx-v2-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-time-dev { font-weight: 700; }
.nx-time-dev.ahead { color: #15803d; }
.nx-time-dev.behind { color: #b42318; }
.nx-time-dev.neutral { color: var(--nx-v2-muted); font-weight: 600; }
.nx-op-action { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.nx-op-action .mini-status-action, .nx-op-entry { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--nx-v2-border); border-radius: 8px; background: var(--nx-v2-surface); color: var(--nx-v2-navy-soft); font: 650 12.5px Manrope, sans-serif; cursor: pointer; white-space: nowrap; }
.nx-op-entry { border-color: var(--nx-v2-border); background: var(--nx-v2-surface); color: var(--nx-v2-navy-soft); }
.nx-op-entry:hover, .nx-op-entry:focus-visible { border-color: var(--nx-v2-blue); background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy); outline: 0; }
.nx-op-action .mini-status-action svg, .nx-op-entry svg { width: 15px; height: 15px; }
.nx-op-done { color: #15803d; font-size: 12px; font-weight: 700; white-space: nowrap; }
.nx-op-menu { display: flex; justify-content: flex-end; }
.nx-op-row.is-done .nx-op-title strong, .nx-op-row.is-done .nx-time-main, .nx-op-row.is-done .nx-worker { color: var(--nx-v2-muted); }
.nx-op-row.is-done .nx-line-progress-bar i { opacity: .55; }
.nx-group-row { background: var(--nx-v2-surface-soft); }
.nx-group-toggle { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--nx-v2-navy-soft); cursor: pointer; }
.nx-group-toggle:hover { background: var(--nx-v2-blue-soft); }
.nx-group-toggle svg { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .15s; }
.nx-group-toggle[aria-expanded="true"] svg { transform: none; }
.nx-group-name { display: grid; gap: 2px; padding-left: calc(var(--level, 0) * 18px); }
.nx-group-name strong { font-size: 13.5px; font-weight: 800; color: var(--nx-v2-navy); overflow-wrap: break-word; }
.nx-group-name > span { color: var(--nx-v2-muted); font-size: 12px; }
.nx-op-empty { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--nx-v2-muted); font-size: 13px; }
.nx-op-empty svg { width: 16px; height: 16px; }

@container items-runtime (max-width: 980px) {
  .nx-op-head { display: none; }
  .nx-op-row, .nx-group-row { grid-template-columns: 30px minmax(0, 1fr) 150px auto 34px; grid-template-areas: "num name progress action menu" "num worker time action menu"; row-gap: 4px; }
  .nx-op-row > :first-child, .nx-group-row > :first-child { grid-area: num; align-self: start; margin-top: 2px; }
  .nx-op-name, .nx-group-name { grid-area: name; }
  .nx-op-worker { grid-area: worker; }
  .nx-op-progress { grid-area: progress; }
  .nx-op-time { grid-area: time; }
  .nx-op-action { grid-area: action; }
  .nx-op-menu { grid-area: menu; }
  .nx-line-head { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .nx-line-summary { grid-column: 2 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
  .nx-items-toolbar { padding: 10px; }
  .nx-items-search { flex: 1 0 100%; }
  .nx-status-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .nx-status-chip { flex: 0 0 auto; height: 36px; }
  .nx-items-toolbar-spacer { display: none; }
  .nx-items-toolbar .compact-command { flex: 1 1 0; justify-content: center; }
  .nx-line-head { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .nx-line-ord { width: 32px; height: 32px; font-size: 12px; }
  .nx-line-name { flex-wrap: wrap; row-gap: 0; }
  .nx-line-name h3 { flex: 1 0 100%; font-size: 15px; }
  .nx-line-summary { grid-column: 1 / -1; grid-row: 2; }
  .nx-line-work { padding: 0 12px 12px; }
  .nx-op-row, .nx-group-row { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "num name action" "num progress action" "num worker menu" "num time menu"; column-gap: 10px; padding: 10px 12px; }
  .nx-op-name, .nx-group-name { padding-left: calc(var(--level, 0) * 10px); }
  .nx-op-title strong, .nx-op-desc, .nx-op-note span { white-space: normal; }
  .nx-op-entry { width: 44px; height: 44px; padding: 0; }
  .nx-op-entry span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nx-op-action { flex-direction: column; align-items: flex-end; }
  .nx-op-action .mini-status-action { height: 40px; }
  .nx-op-menu { align-self: end; }
}
.nx-line-title[data-action="toggle-row"] { cursor: pointer; }

/* Edit item and operation note: one heading, the fields, one line of scope. */
.modal-panel.flow-modal.nx-edit-modal { width: min(520px, calc(100vw - 32px)); max-width: calc(100vw - 32px); border-radius: 16px; }
.nx-edit-head, .nx-detail-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 14px; }
.nx-edit-head > div:not(.nx-modal-window-controls) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nx-edit-head h2, .nx-detail-title h2 { margin: 0; color: var(--nx-v2-navy); font-size: 18px; font-weight: 800; }
.nx-edit-head > div > span, .nx-detail-title > span { color: var(--nx-v2-muted); font-size: 13px; overflow-wrap: anywhere; }
.nx-edit-head b, .nx-detail-title > span b { color: var(--nx-v2-blue); font-weight: 700; }
.nx-edit-modal .flow-error { margin: 0 22px 10px; }
.nx-edit-body { display: grid; gap: 18px; padding: 4px 22px 20px; overflow: auto; }
.nx-edit-field { display: grid; gap: 7px; }
.nx-edit-field > span:first-child { color: var(--nx-v2-navy); font-size: 13px; font-weight: 700; }
.nx-edit-field em { color: var(--nx-v2-muted); font-style: normal; font-weight: 500; }
.nx-edit-field small { color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-edit-field textarea { width: 100%; min-height: 88px; padding: 10px 12px; border: 1px solid var(--nx-v2-border); border-radius: 10px; background: #fff; color: var(--nx-v2-navy); font: 500 14px/1.45 Manrope, sans-serif; resize: vertical; box-sizing: border-box; }
.nx-edit-field textarea:focus { outline: none; border-color: var(--nx-v2-blue); box-shadow: 0 0 0 3px var(--nx-v2-blue-soft); }
.nx-edit-qty { display: flex; align-items: center; gap: 10px; }
.nx-edit-qty > b { color: var(--nx-v2-muted); font-size: 13.5px; font-weight: 600; }
.nx-edit-qty .custom-quantity-control { display: inline-grid; grid-template-columns: 44px 96px 44px; height: 44px; border: 1px solid var(--nx-v2-border); border-radius: 10px; overflow: hidden; }
.nx-edit-qty .custom-quantity-control button { border: 0; background: var(--nx-v2-surface-soft); color: var(--nx-v2-navy-soft); font-size: 18px; font-weight: 700; cursor: pointer; }
.nx-edit-qty .custom-quantity-control button:disabled { color: #b8c6d2; cursor: not-allowed; }
.nx-edit-qty .custom-quantity-control input { width: 100%; min-width: 0; height: 100%; border: 0; border-inline: 1px solid var(--nx-v2-border); text-align: center; color: var(--nx-v2-navy); font: 700 16px Manrope, sans-serif; -moz-appearance: textfield; }
.nx-edit-qty .custom-quantity-control input::-webkit-inner-spin-button { -webkit-appearance: none; }
.nx-edit-scope { margin: 0; color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-edit-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid #edf2f6; background: var(--nx-v2-surface-soft); }
.nx-edit-foot > span { flex: 1; }
.nx-edit-foot .primary-button, .nx-edit-foot .secondary-button { height: 40px; min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 650; }
.nx-edit-remove { margin-right: auto; height: 40px; padding: 0 4px; border: 0; background: none; color: #b42318; font: 650 13px Manrope, sans-serif; cursor: pointer; }
.nx-edit-remove:hover { text-decoration: underline; }

/* Pregled: one scrolling page instead of tabs. */
.modal-panel.flow-modal.nx-detail-modal { width: min(780px, calc(100vw - 32px)); max-width: calc(100vw - 32px); border-radius: 16px; }
.nx-detail-head { align-items: center; }
.nx-detail-badge { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--nx-v2-navy-soft); color: #fff; font-size: 14px; font-weight: 800; }
.nx-detail-badge svg { width: 18px; height: 18px; }
.nx-detail-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nx-detail-title small { color: var(--nx-v2-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.nx-detail-body { display: grid; grid-auto-rows: max-content; gap: 22px; padding: 2px 22px 22px; overflow: auto; min-height: 0; }
.nx-detail-section { display: grid; gap: 8px; min-width: 0; }
.nx-detail-section > h3, .nx-detail-section-head h3 { margin: 0; color: var(--nx-v2-muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.nx-detail-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nx-detail-link { border: 0; background: none; padding: 4px 0; color: var(--nx-v2-blue); font: 700 12.5px Manrope, sans-serif; cursor: pointer; }
.nx-detail-ops { margin: 0; padding: 0; list-style: none; border: 1px solid var(--nx-v2-border); border-radius: 12px; overflow: hidden; }
.nx-detail-ops li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 150px 110px auto; align-items: center; gap: 12px; padding: 10px 16px; font-size: 12.5px; color: var(--nx-v2-navy); }
.nx-detail-ops li + li { border-top: 1px solid #edf2f6; }
.nx-detail-ops li.is-done { color: var(--nx-v2-muted); }
.nx-detail-n { color: var(--nx-v2-muted); font-size: 12px; font-weight: 800; }
.nx-detail-op { display: grid; gap: 1px; min-width: 0; }
.nx-detail-op b { font-size: 13.5px; }
.nx-detail-op small { color: var(--nx-v2-muted); font-size: 12px; }
.nx-detail-muted { color: var(--nx-v2-muted); }
.nx-detail-ops .status-badge { justify-self: end; }
.nx-detail-modal .nx-detail-docs .line-detail-card,
.nx-detail-modal .nx-detail-section > .line-detail-card { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.nx-detail-modal .nx-detail-docs .line-detail-card > h3 { margin: 4px 0 8px; color: var(--nx-v2-navy); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.nx-detail-modal .nx-detail-docs .line-detail-card:only-child > h3 { display: none; }
.nx-detail-modal .line-detail-card + .line-detail-card { margin-top: 14px; }

@media (max-width: 640px) {
  .nx-edit-head, .nx-detail-head { padding: 16px 16px 12px; }
  .nx-edit-body, .nx-detail-body { padding-inline: 16px; }
  .nx-edit-foot { padding: 12px 16px; flex-wrap: wrap; }
  .nx-edit-foot .primary-button, .nx-edit-foot .secondary-button { flex: 1 1 auto; }
  .nx-detail-head { flex-wrap: wrap; }
  .nx-detail-head .status-badge { order: 3; margin-left: 54px; }
  .nx-detail-ops li { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "n op status" "n who plan"; row-gap: 3px; }
  .nx-detail-ops li > :nth-child(1) { grid-area: n; align-self: start; }
  .nx-detail-ops li > :nth-child(2) { grid-area: op; }
  .nx-detail-ops li > :nth-child(3) { grid-area: who; color: var(--nx-v2-muted); }
  .nx-detail-ops li > :nth-child(4) { grid-area: plan; justify-self: end; }
  .nx-detail-ops li > :nth-child(5) { grid-area: status; }
}

/* Toolbar stays one row on desktop; when it must wrap, the actions keep the first row. */
.nx-items-toolbar select.nx-items-station { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 220px; margin: 0; }
@container items-runtime (max-width: 1240px) {
  .nx-items-search { order: 1; flex: 1 1 240px; }
  .nx-items-toolbar-spacer { order: 2; flex: 0 0 0; }
  .nx-items-toolbar .compact-command { order: 3; }
  .nx-status-chips { order: 4; }
  .nx-items-toolbar select.nx-items-station { order: 5; }
  .nx-items-toolbar .items-assignment-warning { order: 6; }
}

/* Row menus share the line typography. */
.list-action-menu { gap: 2px; padding: 6px; border-color: var(--nx-v2-border); border-radius: 12px; font: 600 13px/1.3 Manrope, "Segoe UI", Arial, sans-serif; }
.list-action-menu button, .list-action-menu .list-action-menu-link { min-height: 36px; padding: 8px 10px; border-radius: 8px; color: var(--nx-v2-navy); font: inherit; }
.list-action-menu button svg, .list-action-menu .list-action-menu-link svg { width: 16px; height: 16px; color: var(--nx-v2-muted); }
.list-action-menu button:hover, .list-action-menu button:focus-visible, .list-action-menu .list-action-menu-link:hover { background: var(--nx-v2-blue-soft); outline: 0; }
.list-action-menu button:hover svg { color: var(--nx-v2-navy-soft); }
.list-action-menu button.danger, .list-action-menu button.danger svg { color: #b42318; }

/* Several workers on one row. */
.nx-avatars { display: inline-flex; flex: 0 0 auto; }
.nx-avatars .nx-avatar + .nx-avatar { margin-left: -5px; box-shadow: 0 0 0 2px #fff; }
.nx-avatar.is-more { background: var(--nx-v2-navy-soft); color: #fff; }
.nx-worker-text { display: grid; min-width: 0; line-height: 1.25; }
.nx-worker-text > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-worker-text b { font-weight: 700; }
.nx-worker-text small { color: var(--nx-v2-muted); font-size: 11.5px; font-weight: 500; }
.nx-worker > .nx-worker-text { flex: 1 1 auto; }

/* A line without operations: worker, evidence and Evidentiraj in one aligned strip. */
.nx-line-work { gap: 12px; padding: 0 16px 14px 68px; }
.nx-line-work .nx-worker { max-width: 260px; }
.nx-line-work-spacer { flex: 1 1 auto; }
.nx-line-work .nx-op-entry { margin-right: 0; }
@media (max-width: 600px) { .nx-line-work { padding: 0 12px 12px; } .nx-line-work .nx-op-entry { width: auto; height: 40px; padding: 0 12px; } .nx-line-work .nx-op-entry span { position: static; width: auto; height: auto; clip: auto; } }

/* Product quick info. */
.nx-product-info > header { grid-template-columns: 44px minmax(0, 1fr) 32px; padding: 16px 18px; background: #fff; border-bottom: 0; }
.nx-product-info > header img, .nx-product-info .product-quick-info-placeholder { width: 44px; height: 44px; border-color: var(--nx-v2-border); background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy-soft); }
.nx-product-info > header small.quick-info-product-code { color: var(--nx-v2-blue); font-size: 12.5px; font-weight: 700; letter-spacing: 0; }
.nx-product-info > header h2 { margin: 1px 0 0; color: var(--nx-v2-navy); font-size: 16px; font-weight: 800; line-height: 1.3; }
.product-quick-info-popover.nx-product-info { max-height: min(520px, calc(100dvh - var(--quick-info-top, 88px) - 16px)); }
.nx-product-info .product-quick-info-body { display: grid; gap: 14px; align-content: start; padding: 0 18px 14px; }
.nx-product-info .nx-pi-group { display: grid; gap: 7px; min-width: 0; }
.nx-product-info .nx-pi-group h3 { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--nx-v2-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nx-product-info .nx-pi-group h3 small { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.nx-product-info .nx-pi-stock { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; margin: 0; }
.nx-product-info .nx-pi-stock > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--nx-v2-border); border-radius: 9px; background: var(--nx-v2-surface-soft); }
.nx-product-info .nx-pi-stock dt { color: var(--nx-v2-muted); font-size: 11.5px; }
.nx-product-info .nx-pi-stock dd { margin: 0; color: var(--nx-v2-navy); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nx-product-info .nx-pi-stock > .is-alert { border-color: #f0dfb8; background: #fff8e8; }
.nx-product-info .nx-pi-stock > .is-alert dd { color: #94600f; }
.nx-product-info .nx-pi-note { display: flex; align-items: center; gap: 7px; margin: 0; color: #75540d; font-size: 12.5px; }
.nx-product-info .nx-pi-note svg { flex: 0 0 auto; width: 15px; height: 15px; }
.nx-product-info .nx-pi-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.nx-product-info .nx-pi-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 0; border: 0; border-bottom: 1px solid #edf2f6; border-radius: 0; background: transparent; font-size: 13px; }
.nx-product-info .nx-pi-facts > div:last-child { border-bottom: 0; }
.nx-product-info .nx-pi-facts dt { color: var(--nx-v2-muted); }
.nx-product-info .nx-pi-facts dd { margin: 0; color: var(--nx-v2-navy); font-weight: 700; text-align: right; white-space: nowrap; }
.nx-product-info .nx-pi-empty { margin: 0; color: var(--nx-v2-muted); font-size: 13px; }
@media (max-width: 640px) { .product-quick-info-popover.nx-product-info { max-height: min(86dvh, calc(100dvh - 16px)); } }

/* Finished-goods drill-downs (U proizvodnji, Rezervisano). */
.product-production-commitments-summary > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.product-production-commitments-summary > div > small { grid-column: 1 / -1; color: var(--ds-text-muted); font-size: 11.5px; }
.product-production-commitments-summary > .is-waiting { border-color: #f0dfb8; background: #fff8e8; }
.product-production-commitments-summary > .is-waiting strong { color: #94600f; }
@media (max-width: 700px) {
  .product-production-commitments-modal .product-production-commitments-summary { grid-template-columns: 1fr; gap: 6px; padding: 10px 14px; }
  .product-production-commitments-modal .product-production-commitments-summary > div { padding: 8px 12px; }
  .product-production-commitments-modal .product-production-commitments-summary > div > small { display: none; }
}
.product-production-commitments-body { display: grid; gap: 16px; align-content: start; }
.nx-commit-group { display: grid; gap: 8px; }
.nx-commit-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nx-commit-group h3 { margin: 0; color: var(--ds-heading); font-size: 15px; }
.nx-commit-group > header span { color: var(--ds-text-muted); font-size: 12.5px; }
.nx-commit-waiting { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: #fdf3e1; color: #94600f; font-size: 12px; font-weight: 800; white-space: nowrap; }
.nx-commit-amount { color: var(--ds-primary-strong, #17486d); white-space: nowrap; }
.product-production-remaining small { display: block; margin-top: 2px; color: var(--ds-text-muted); font-size: 11.5px; font-weight: 500; }
.nx-product-info > footer { padding: 12px 18px; border-top-color: #edf2f6; background: var(--nx-v2-surface-soft); }
.nx-product-info > footer .compact-command { height: 40px; min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 650; }

/* Worker list behind the worker cell. */
.list-action-menu .nx-worker-menu-head { padding: 6px 10px 4px; color: var(--nx-v2-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.list-action-menu .nx-worker-menu-row { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 10px; color: var(--nx-v2-navy); }
.list-action-menu .nx-worker-menu-row > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-action-menu .nx-worker-menu-row b { padding: 2px 8px; border-radius: 999px; background: #e7f6ec; color: #15803d; font-size: 11px; font-weight: 700; }
.list-action-menu .nx-worker-menu-edit { margin-top: 4px; border-top: 1px solid #edf2f6 !important; border-radius: 0 0 8px 8px !important; color: var(--nx-v2-blue) !important; }
.list-action-menu .nx-worker-menu-edit svg { color: var(--nx-v2-blue) !important; }
.nx-worker[aria-expanded="true"] { background: var(--nx-v2-blue-soft); }
.nx-line-work .list-actions-trigger { flex: 0 0 auto; }

/* Pregled: progress first, then closed rows opened only when needed. */
.nx-pv-hero { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--nx-v2-border); border-radius: 14px; background: var(--nx-v2-surface-soft); }
.nx-pv-hero-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nx-pv-hero-top > b { color: var(--nx-v2-navy); font-size: 26px; font-weight: 800; line-height: 1; }
.nx-pv-hero-top > span { color: var(--nx-v2-muted); font-size: 13.5px; }
.nx-pv-hero > .nx-line-progress-bar { height: 8px; }
.nx-pv-hero.completed > .nx-line-progress-bar i { background: #2f8f5b; }
.nx-pv-hero.paused > .nx-line-progress-bar i { background: #c98a1b; }
.nx-pv-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--nx-v2-navy); font-size: 13.5px; font-weight: 600; }
.nx-pv-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-pv-who svg { width: 16px; height: 16px; color: var(--nx-v2-muted); }
.nx-pv-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 11px; background: #fff8eb; color: #6b3a06; font-size: 13.5px; }
.nx-pv-note > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.nx-pv-note > span { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-pv-note .nx-detail-link { padding: 0; }
.nx-pv-sections { border: 1px solid var(--nx-v2-border); border-radius: 14px; overflow: hidden; }
.nx-pv-section + .nx-pv-section { border-top: 1px solid var(--nx-v2-border); }
.nx-pv-section > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; color: var(--nx-v2-navy); font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.nx-pv-section > summary::-webkit-details-marker { display: none; }
.nx-pv-section > summary:hover, .nx-pv-section > summary:focus-visible { background: var(--nx-v2-surface-soft); outline: 0; }
.nx-pv-section > summary > svg { flex: none; width: 17px; height: 17px; color: var(--nx-v2-muted); }
.nx-pv-section > summary > svg:last-child { transition: transform .15s ease; }
.nx-pv-section[open] > summary > svg:last-child { transform: rotate(180deg); }
.nx-pv-label { flex: 1; min-width: 0; }
.nx-pv-hint { color: var(--nx-v2-muted); font-size: 13px; font-weight: 600; }
.nx-pv-content { padding: 0 16px 16px; }
.nx-pv-content > .nx-detail-ops { border-radius: 10px; }
@media (max-width: 640px) {
  .nx-pv-hero { padding: 14px; }
  .nx-pv-section > summary { padding: 0 14px; }
  .nx-pv-content { padding: 0 12px 14px; }
}

/* Korekcija unosa uses the Evidentiraj form; the reason spans the row. */
.nx-qwc-modal [data-qwc-reason] { width: 100%; min-height: 64px; }

/* Every operation row has the same background; status shows in the number, bar and time, not as a tinted row. */
.nx-op-row[class*="status-"] { background: transparent; }
.nx-op-row[class*="status-"]:hover { background: #fbfdfe; }


/* Evidencija tags: light chips that read on white. */
.nx-wev-tag { background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy-soft); }
.nx-wev-entry.is-superseded .nx-wev-tag { background: #eef2f5; color: var(--nx-v2-muted); }
.nx-wev-operation { background: #eef2f5; color: var(--nx-v2-navy-soft); }

/* Pregled documents: compact cards. */
.nx-detail-modal .nx-detail-docs .line-document-list { gap: 8px; }
.nx-detail-modal .nx-detail-docs .line-document-card { gap: 10px; padding: 8px 12px; border-color: var(--nx-v2-border); border-radius: 10px; background: #fff; }
.nx-detail-modal .nx-detail-docs .line-document-card:hover { border-color: var(--nx-v2-blue); background: var(--nx-v2-surface-soft); }
.nx-detail-modal .nx-detail-docs .line-document-card svg { width: 16px; height: 16px; color: var(--nx-v2-muted); }
.nx-detail-modal .nx-detail-docs .line-document-card strong { color: var(--nx-v2-navy); font-size: 13px; font-weight: 650; }
.nx-detail-modal .nx-detail-docs .line-document-card small { font-size: 11.5px; }

/* Phone: each operation is its own card with room around it; the last line holds the time
   on the left and Evidentiraj with ⋯ on the right. */
@media (max-width: 600px) {
  .nx-line-body { display: grid; gap: 8px; padding: 8px; background: var(--nx-v2-surface-soft); border-top: 1px solid var(--nx-v2-border); }
  .nx-op-row { grid-template-columns: 26px minmax(0, 1fr) auto 40px; grid-template-areas: "num name name name" "num worker worker worker" "num progress progress progress" "num time action menu"; column-gap: 8px; row-gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--nx-v2-border); border-radius: 12px; background: #fff; }
  .nx-op-row + .nx-op-row { border-top: 1px solid var(--nx-v2-border); }
  .nx-op-row[class*="status-"], .nx-op-row[class*="status-"]:hover { background: #fff; }
  .nx-op-time { align-self: end; }
  .nx-op-action { flex-direction: row; align-items: center; align-self: end; gap: 8px; }
  .nx-op-row .nx-op-entry { width: auto; height: 40px; padding: 0 14px; font-size: 13px; }
  .nx-op-row .nx-op-entry span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nx-op-row .nx-op-menu { align-self: end; }
  .nx-op-row .nx-op-menu .list-actions-trigger { width: 40px; height: 40px; }
  .nx-group-row { padding: 6px 4px 0; border: 0; background: transparent; }
}

/* Phone and touch forms: only iPhone/iPad need 16px (they zoom on focus below it). Every other
   device gets the desktop field size, so values do not outweigh their labels. */
@supports not (-webkit-touch-callout: none) {
  @media (max-width: 980px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      font-size: 14px !important;
    }
  }
}
@media (max-width: 760px) {
  #section-root .work-order-detail-shell .wo-general-field-label { font-size: 11.5px; font-weight: 700; }
}

/* Work order card (phone and portrait tablet): code and status, the customer as the title,
   one progress bar, due date and owner on one quiet line, shipment as its own button. */
#section-root .work-order-card-grid { gap: 12px !important; }
#section-root .work-order-card-grid > .nx-woc { display: grid; gap: 12px; padding: 14px 14px 12px !important; border: 1px solid var(--nx-v2-border); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(10, 25, 49, .06); cursor: pointer; }
#section-root .nx-woc > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
#section-root .nx-woc > header > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
#section-root .nx-woc .work-order-code { color: var(--nx-v2-blue); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
#section-root .nx-woc > header h2 { margin: 0; color: var(--nx-v2-navy); font-size: 16px; font-weight: 750; line-height: 1.3; }
#section-root .nx-woc .nx-woc-name { margin: 0; color: var(--nx-v2-muted); font-size: 13px; font-weight: 500; line-height: 1.35; }
#section-root .nx-woc .mobile-card-head-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#section-root .nx-woc .mobile-card-head-actions .list-actions-trigger { width: 32px; height: 32px; }
#section-root .nx-woc-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
#section-root .nx-woc-progress .nx-line-progress-bar { height: 6px; }
#section-root .nx-woc-progress b { color: var(--nx-v2-navy); font-size: 13px; font-weight: 700; }
#section-root .work-order-card-grid > .nx-woc dl { display: flex !important; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
#section-root .nx-woc dl > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#section-root .nx-woc dl dt { margin: 0; color: var(--nx-v2-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
#section-root .nx-woc dl dt::before, #section-root .nx-woc dl dt::after { content: none; }
#section-root .work-order-card-grid > .nx-woc.is-overdue::before { content: none; }
#section-root .nx-woc dl dd { margin: 0; color: var(--nx-v2-navy); font-size: 13px; font-weight: 600; }
#section-root .nx-woc .work-order-card-due { order: -1; }
#section-root .nx-woc .work-order-card-opened { display: none; }
#section-root .work-order-card-grid > .nx-woc > .nx-woc-actions { display: flex !important; padding-top: 10px; border-top: 1px solid #edf2f6; }
#section-root .nx-woc-actions > button { flex: 1 1 auto; justify-content: center; height: 40px; }
#section-root .nx-woc-actions > button > span { display: inline; }
#section-root .work-order-card-grid > .nx-woc:is(.is-overdue, .is-today) { border-top-width: 1px; border-color: var(--nx-v2-border); }
#section-root .nx-woc .due-chip.is-overdue { color: #b42318; font-weight: 700; }
/* Cards sit on a tinted well so each order reads as its own white card. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  #section-root .work-order-list-card .work-order-card-grid { padding: 12px; background: #eef3f7; border-radius: 0 0 12px 12px; }
  #section-root .work-order-card-grid > .nx-woc { border-color: #d3dee8; box-shadow: 0 2px 6px rgba(10, 25, 49, .08); }
}

/* Work order list on phones: one aligned header row, every status count visible
   as a tile (3 + 2), and a flat search row with the filter button at the same height. */
@media (max-width: 760px) {
  main.content:has(.work-orders-screen) .topbar { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; min-width: 0; }
  main.content:has(.work-orders-screen) .topbar .title-block { min-width: 0; }
  main.content:has(.work-orders-screen) .topbar h1 { font-size: 22px !important; line-height: 1.2; white-space: nowrap; }
  main.content:has(.work-orders-screen) .topbar .topbar-actions { display: flex !important; align-items: center; gap: 8px; flex: 0 0 auto; width: auto !important; }
  main.content:has(.work-orders-screen) .topbar .topbar-actions > .primary-button { width: auto !important; height: 40px; min-height: 40px; padding: 0 12px !important; gap: 6px; border-radius: 10px; font-size: 13px; }
  main.content:has(.work-orders-screen) .topbar .mobile-header-more > summary { width: 40px; height: 40px; min-height: 40px; border-radius: 10px; }

  #section-root .work-orders-screen .work-order-kpis { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 0 !important; overflow: visible !important; padding: 0 !important; }
  #section-root .work-orders-screen .work-order-kpi { grid-column: span 2 !important; display: flex; align-items: center; justify-content: flex-start; min-width: 0 !important; height: auto !important; min-height: 54px !important; padding: 8px 10px !important; border: 1px solid var(--nx-v2-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; }
  #section-root .work-orders-screen .work-order-kpi:nth-child(n+4) { grid-column: span 3 !important; }
  #section-root .work-orders-screen .work-order-kpi.active { border-color: var(--nx-v2-blue) !important; background: #f3f8fc !important; box-shadow: inset 0 0 0 1px var(--nx-v2-blue) !important; }
  #section-root .work-orders-screen .work-order-kpi .soft-icon { display: none !important; }
  #section-root .work-orders-screen .work-order-kpi-copy { display: grid !important; gap: 4px !important; min-width: 0; text-align: left; }
  #section-root .work-orders-screen .work-order-kpi-copy strong { color: var(--nx-v2-navy); font-size: 20px !important; font-weight: 750; line-height: 1; }
  #section-root .work-orders-screen .work-order-kpi.tone-blue .work-order-kpi-copy strong { color: var(--nx-v2-blue); }
  #section-root .work-orders-screen .work-order-kpi.tone-amber .work-order-kpi-copy strong { color: #b54708; }
  #section-root .work-orders-screen .work-order-kpi.tone-red .work-order-kpi-copy strong { color: #b42318; }
  #section-root .work-orders-screen .work-order-kpi.tone-purple .work-order-kpi-copy strong { color: #6941c6; }
  #section-root .work-orders-screen .work-order-kpi-copy span { overflow: hidden; color: var(--nx-v2-muted); font-size: 11.5px !important; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }

  #section-root .work-orders-screen .work-orders-toolbar { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  #section-root .work-orders-screen .work-orders-desktop-filters { padding: 0 !important; }
  #section-root .work-orders-screen .filter-primary-row { grid-template-columns: minmax(0, 1fr) 44px !important; align-items: center; gap: 8px; }
  #section-root .work-orders-screen .work-search { height: 44px; min-height: 44px; }
  #section-root .work-orders-screen .work-search input { height: 44px !important; padding: 0 12px 0 40px !important; border-radius: 10px; background: #fff; }
  #section-root .work-orders-screen .work-search > svg { top: 50% !important; right: auto !important; left: 14px !important; width: 16px; height: 16px; transform: translateY(-50%); color: var(--nx-v2-muted); pointer-events: none; }
  #section-root .work-orders-screen .filter-disclosure-button { width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 10px; background: #fff; }
}

/* Work Order tabs: full names on wider screens, one word each on phones so all tabs fit in one row. */
.wo-detail-tabs .wo-tab-short { display: none; }
@media (max-width: 600px) {
  #section-root .wo-detail-tabs .wo-tab-label { display: none; }
  #section-root .wo-detail-tabs .wo-tab-short { display: inline; }
  #section-root .wo-detail-tabs > button { flex: 1 1 auto; justify-content: center; min-width: 0; padding-inline: 8px !important; gap: 5px; font-size: 13px; }
}

/* Five tabs (Materials module on): tighter type and plain counts; on the narrowest phones the counts step aside. */
@media (max-width: 600px) {
  #section-root .wo-detail-tabs:has(> button:nth-child(5)) > button { padding-inline: 5px !important; gap: 3px; font-size: 12.5px; }
  #section-root .wo-detail-tabs:has(> button:nth-child(5)) .wo-detail-tab-count { min-width: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; color: inherit !important; font-size: 11.5px; opacity: .7; }
}
@media (max-width: 380px) {
  #section-root .wo-detail-tabs:has(> button:nth-child(5)) > button { padding-inline: 4px !important; font-size: 12px; }
  #section-root .wo-detail-tabs:has(> button:nth-child(5)) .wo-detail-tab-count { display: none !important; }
}

/* Item line: the product code is a quiet chip beside the quantity that still opens quick info. */
#section-root .nx-line-title :is(.quick-info-code .product-quick-info-link, .root-item-code) { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 0 !important; border-radius: 6px; background: #eef3f7; color: #46607a; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-decoration: none !important; }
#section-root .nx-line-title .quick-info-code .product-quick-info-link { cursor: pointer; }
#section-root .nx-line-title .quick-info-code .product-quick-info-link:hover { background: #e1eaf2; color: var(--nx-v2-navy); }
#section-root .nx-line-title .quick-info-code .quick-info-indicator { display: none !important; }

/* Item line: the name is the title on its own line; code chip and quantity sit beneath it.
   The action column keeps one width so progress bars line up on every item. */
#section-root .nx-line-name h3 { color: var(--nx-v2-navy); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
#section-root .nx-line-title .nx-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: var(--nx-v2-muted); font-size: 12.5px; font-weight: 500; }
#section-root .nx-line-title .nx-line-meta .quick-info-code { display: inline-flex; }
@media (min-width: 981px) {
  #section-root .nx-line-head { grid-template-columns: 38px minmax(0, 1fr) minmax(220px, 300px); }
}
#section-root .nx-line-work { justify-content: flex-start; }
#section-root .nx-line-work :is(.item-problem-chip, .root-assignment-warning) { flex: 0 0 auto; }

/* Opšte opens with the due date, priority, owner and customer as four calm tiles. */
.wo-general-overview { display: grid; grid-column: 1 / -1; align-self: start; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.wo-gov-tile { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--nx-v2-border); border-radius: 12px; background: #fff; }
.wo-gov-tile small { color: var(--nx-v2-muted); font-size: 12px; font-weight: 600; }
.wo-gov-tile strong { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--nx-v2-navy); font-size: 17px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.wo-gov-tile > span { color: var(--nx-v2-muted); font-size: 12.5px; font-weight: 650; }
.wo-gov-tile .priority-dot { flex: 0 0 auto; width: 10px; height: 10px; }
.wo-gov-tile.is-late { border-color: #f3c7c3; background: #fff7f6; }
.wo-gov-tile.is-late strong, .wo-gov-tile.is-late > span { color: #b42318; }
.wo-gov-tile.is-soon { border-color: #f4dcae; background: #fffaf0; }
.wo-gov-tile.is-soon > span { color: #b54708; }
.wo-gov-tile.is-high { border-color: #f3c7c3; }
.wo-gov-tile.is-high strong { color: #b42318; }
@media (max-width: 760px) {
  .wo-general-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wo-gov-tile { padding: 10px 12px; }
  .wo-gov-tile strong { font-size: 15.5px; }
  .wo-gov-owner strong, .wo-gov-customer strong { font-size: 14px; }
}

/* Phone header: one identity row with a ⋯ menu (link and print), customer and due date,
   then progress beside Završi proizvodnju, which always stays in reach. The header and tabs stick. */
.wo-detail-more { display: none; }
@media (max-width: 700px) {
  #section-root:has(> .work-order-detail-shell) { overflow-x: clip !important; overflow-y: visible !important; }
  .work-order-detail-shell .wo-detail-sticky-header { top: -8px; z-index: 20; }
  .work-order-detail-shell .wo-detail-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 8px 10px; padding: 10px 12px; }
  .work-order-detail-shell .wo-detail-header-identity { grid-column: 1 / -1; grid-row: 1; }
  .work-order-detail-shell .wo-detail-header-identity .wo-detail-share { display: none; }
  .work-order-detail-shell .wo-detail-more { display: inline-flex; margin-left: auto; }
  .work-order-detail-shell .wo-detail-more .list-actions-trigger { width: 34px; height: 34px; }
  .work-order-detail-shell .wo-detail-header-tools { display: none !important; }
  .work-order-detail-shell .wo-detail-header-meta { grid-column: 1 / -1; grid-row: 2; }
  .work-order-detail-shell .wo-detail-progress-compact { grid-column: 1; grid-row: 3; align-self: center; }
  .work-order-detail-shell .wo-detail-header-completion { grid-column: 2; grid-row: 3; }
  .work-order-detail-shell .wo-detail-header:not(.has-completion) .wo-detail-progress-compact { grid-column: 1 / -1; }
  .work-order-detail-shell .wo-detail-header-completion .wo-quick-complete-action { width: auto; padding: 0 14px; }
}

/* Items toolbar on phones: search, a filter button and + in one row; status and station open below on demand. */
.nx-items-filter-toggle { display: none; }
.nx-items-filter-panel { display: contents; }
@media (max-width: 600px) {
  #section-root .nx-items-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 8px; padding: 10px; }
  #section-root .nx-items-toolbar .items-assignment-warning { grid-column: 1 / -1; }
  #section-root .nx-items-search { order: 0; height: 44px; min-width: 0; }
  #section-root .nx-items-filter-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--nx-v2-border); border-radius: 10px; background: #fff; color: var(--nx-v2-navy); }
  #section-root .nx-items-filter-toggle svg { width: 18px; height: 18px; }
  #section-root .nx-items-filter-toggle[aria-expanded="true"] { border-color: var(--nx-v2-blue); color: var(--nx-v2-blue); }
  #section-root .nx-items-filter-toggle.has-filter::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-v2-blue); }
  #section-root .nx-items-toolbar [data-action="collapse-work-items"], #section-root .nx-items-toolbar-spacer { display: none !important; }
  #section-root .nx-items-toolbar [data-action="open-add-item-chooser"] { order: 0; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0 !important; justify-content: center; border-radius: 10px; }
  #section-root .nx-items-toolbar [data-action="open-add-item-chooser"] span { display: none; }
  #section-root .nx-items-filter-panel { display: none; grid-column: 1 / -1; order: 1; gap: 8px; }
  #section-root .nx-items-filter-panel.is-open { display: grid; }
  #section-root .nx-items-filter-panel .nx-status-chips { flex-wrap: wrap; overflow: visible; }
  #section-root .nx-items-filter-panel select.nx-items-station { width: 100%; max-width: none; }
}
@media (max-width: 600px) {
  #section-root .nx-line-name h3 { font-size: 15.5px; }
}
@media (max-width: 600px) {
  /* Evidentiraj and ⋯ end at the right edge, the same place as the chevron and ⋯ of items with operations. */
  #section-root .nx-line-work > .nx-op-entry { margin-left: auto; }
}

/* Phone order card: open problems get their own line in red instead of floating beside the owner. */
#section-root .nx-woc dl > .work-order-card-problems { flex-basis: 100%; align-items: center; }
#section-root .nx-woc dl > .work-order-card-problems dt { color: #b42318; font-weight: 650; }
/* Završi proizvodnju: compact type and spacing so the usual dialog fits without scrolling. */
.quick-completion-modal .quick-completion-form { gap: 10px !important; margin-top: 4px !important; }
.quick-completion-modal .quick-completion-plan { min-height: 0 !important; padding: 7px 12px !important; }
.quick-completion-modal .quick-completion-plan :is(strong, span) { font-size: 13.5px !important; line-height: 20px; }
.quick-completion-modal .quick-completion-timing { gap: 6px !important; }
.quick-completion-modal .quick-completion-timing legend { margin-bottom: 4px; font-size: 12px; }
.quick-completion-modal .quick-completion-choice { min-height: 36px !important; height: 36px; padding: 0 10px !important; font-size: 13px !important; }
.quick-completion-modal .quick-completion-choice span { font-size: 13px !important; }
.quick-completion-modal .quick-completion-module { gap: 8px !important; padding-top: 10px !important; }
.quick-completion-modal .quick-completion-module > header { display: grid; gap: 2px; }
.quick-completion-modal .quick-completion-module > header h3 { margin: 0; font-size: 14px !important; }
.quick-completion-modal .quick-completion-module > header p { margin: 0; font-size: 12px !important; line-height: 1.35; }
.quick-completion-modal .quick-completion-machine-row { padding: 8px 10px !important; }
.quick-completion-modal .quick-completion-scrap-choice { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 16px !important; margin: 0; padding: 0; border: 0; }
.quick-completion-modal .quick-completion-scrap-choice legend { float: left; margin: 0 8px 0 0 !important; padding: 0; font-size: 12.5px !important; }
.quick-completion-modal .quick-completion-scrap-choice label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.quick-completion-modal .quick-completion-record { padding: 10px 12px !important; }
.quick-completion-modal .quick-completion-record h3 { margin: 0 0 6px !important; font-size: 13px !important; }
.quick-completion-modal .quick-completion-record ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px !important; margin: 0; }
.quick-completion-modal .quick-completion-record li { font-size: 12px !important; line-height: 1.35; }
@media (max-width: 600px) { .quick-completion-modal .quick-completion-record ul { grid-template-columns: minmax(0, 1fr); } }

/* Opšte: phones keep Planiranje first; desktop pairs Kupac | Planiranje, Informacije | Napomena,
   and Tok naloga runs across the bottom as a horizontal track. */
@media (max-width: 760px) {
  #section-root .wo-general-main > .wo-general-overview { order: -2; }
  #section-root .wo-general-main > .wo-general-planning { order: -1; }
}
@media (min-width: 761px) {
  #section-root .wo-general-main > .wo-flow-section { grid-column: 1 / -1; position: relative; }
  #section-root .wo-flow-section .wo-flow { gap: 10px; }
  #section-root .wo-flow-section .wo-flow-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px 0 2px; counter-reset: wo-flow; }
  #section-root .wo-flow-section .wo-flow-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 34px 6px 0; text-align: center; counter-increment: wo-flow; color: var(--nx-v2-muted); transition: color .15s ease; }
  #section-root .wo-flow-section .wo-flow-steps li::before { content: counter(wo-flow); position: absolute; top: 0; left: 50%; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--nx-v2-border); border-radius: 50%; background: #fff; color: var(--nx-v2-muted); font-size: 11.5px; font-weight: 700; transform: translateX(-50%); transition: transform .15s ease, box-shadow .15s ease; }
  #section-root .wo-flow-section .wo-flow-steps li:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: calc(50% + 16px); right: calc(-50% + 16px); bottom: auto; width: auto; height: 3px; border-radius: 3px; background: var(--nx-v2-border); transform-origin: left center; }
  #section-root .wo-flow-section .wo-flow-steps li.reached { color: var(--nx-v2-navy); }
  #section-root .wo-flow-section .wo-flow-steps li.reached::before { content: "✓"; border-color: var(--nx-v2-blue); background: var(--nx-v2-blue); color: #fff; font-size: 13px; }
  #section-root .wo-flow-section .wo-flow-steps li.reached::after { background: var(--nx-v2-blue); animation: wo-flow-fill .6s ease-out both; }
  #section-root .wo-flow-section .wo-flow-progress-fill { display: none; }
  #section-root .wo-flow-section .wo-flow-production:not(.reached) > .wo-flow-progress-fill { display: block; position: absolute; top: 12px; left: calc(50% + 16px); z-index: 1; width: calc((100% - 32px) * var(--wo-flow-progress, 0)); height: 3px; border-radius: 3px; background: var(--nx-v2-blue); transform-origin: left center; animation: wo-flow-fill .8s ease-out both; }
  #section-root .wo-flow-section .wo-flow-steps li.reached + li:not(.reached)::before { border-color: var(--nx-v2-blue); color: var(--nx-v2-blue); animation: wo-flow-pulse 2.2s ease-out infinite; }
  #section-root .wo-flow-section .wo-flow-steps li strong { font-size: 13px; font-weight: 700; line-height: 1.3; }
  #section-root .wo-flow-section .wo-flow-steps li span { font-size: 12px; line-height: 1.3; }
  #section-root .wo-flow-section .wo-flow-steps li:hover::before { transform: translateX(-50%) scale(1.12); }
  #section-root .wo-flow-section .wo-flow-production { cursor: pointer; }
  #section-root .wo-flow-section .wo-flow-production:hover strong { color: var(--nx-v2-blue); }
  #section-root .wo-flow-section .wo-flow-link { position: absolute; inset: 0; z-index: 2; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
  #section-root .wo-flow-section .wo-flow-link:focus-visible { outline: 2px solid var(--nx-v2-blue); outline-offset: 2px; }
}
@keyframes wo-flow-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wo-flow-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 127, 167, .35); } 70% { box-shadow: 0 0 0 8px rgba(74, 127, 167, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 127, 167, 0); } }
@media (prefers-reduced-motion: reduce) {
  #section-root .wo-flow-section .wo-flow-steps li::after, #section-root .wo-flow-section .wo-flow-steps li::before { animation: none !important; }
}
@media (max-width: 760px) {
  #section-root .wo-flow-section .wo-flow-production { position: relative; }
  #section-root .wo-flow-section .wo-flow-link { position: absolute; inset: 0; border: 0; background: transparent; }
}

/* Overview tiles: label above, value and its note on one line, so Opšte fits a laptop screen. */
@media (min-width: 761px) {
  .wo-general-overview .wo-gov-tile { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; padding: 10px 14px; }
  .wo-general-overview .wo-gov-tile small { grid-column: 1 / -1; }
  .wo-general-overview .wo-gov-tile strong { font-size: 16px; }
}
.quick-completion-modal #quick-completion-deviation-field:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 260px); align-items: center; justify-content: space-between; gap: 12px; }
.quick-completion-modal #quick-completion-deviation-field > small { display: none; }
.quick-completion-modal #quick-completion-deviation-field .manual-duration-control { margin: 0; }
.quick-completion-modal #quick-completion-deviation-field .manual-duration-pair { gap: 8px; }
.quick-completion-modal #quick-completion-deviation-field .manual-duration-pair label { min-height: 36px; padding: 0 8px; }
.quick-completion-modal #quick-completion-deviation-field input { height: 34px !important; min-height: 34px !important; }
.quick-completion-modal .quick-completion-machine-step > header p { display: none; }
.quick-completion-modal .quick-completion-record { padding: 8px 12px !important; }
.quick-completion-modal .quick-completion-module { padding-top: 8px !important; }

/* Item head (model B): code chip and name on one line, what it is made of beneath,
   pieces beside the progress bar with the time. Phones put the name first. */
#section-root .nx-line-title .nx-line-name { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
#section-root .nx-line-title .nx-line-name .quick-info-code, #section-root .nx-line-title .nx-line-name .root-item-code { flex: 0 0 auto; }
#section-root .nx-line-title .nx-line-meta { gap: 5px; margin-top: 3px; }
#section-root .nx-line-title .nx-line-meta svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--nx-v2-muted); }
#section-root .nx-line-summary .nx-line-qty { color: var(--nx-v2-muted); white-space: nowrap; }
#section-root .nx-line-summary .nx-line-qty b { color: var(--nx-v2-navy); font-weight: 750; }
@media (max-width: 600px) {
  #section-root .nx-line-head .nx-line-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  #section-root .nx-line-head .nx-line-title .nx-line-meta { margin-top: 0; }
}

/* Item identity: code and name are one compact field; for a catalogue product it opens quick info. */
#section-root .nx-line-title .nx-line-product { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-width: 0; min-height: 34px; margin: 0; padding: 4px 11px 4px 4px; border: 1px solid #e2e9f0; border-radius: 10px; background: #fafcfd; color: var(--nx-v2-navy); font: inherit; text-align: left; }
#section-root .nx-line-title .nx-line-product .root-item-code { flex: 0 0 auto; height: 24px; padding: 0 8px; border-radius: 7px; background: #e6eef6; color: #24507a; font-size: 12px; font-weight: 750; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
#section-root .nx-line-title .nx-line-product :is(h3, .nx-line-product-name) { min-width: 0; margin: 0; color: var(--nx-v2-navy); font-size: 16px; font-weight: 750; letter-spacing: -.012em; line-height: 1.25; overflow-wrap: anywhere; }
#section-root .nx-line-title .nx-line-product > svg { flex: 0 0 auto; width: 15px; height: 15px; color: #9fb0c0; transition: color .15s ease; }
#section-root .nx-line-title .nx-line-product.is-link { cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
#section-root .nx-line-title .nx-line-product.is-link:hover { border-color: #b8cfe2; background: #f2f7fb; box-shadow: 0 1px 2px rgba(16, 42, 67, .06); }
#section-root .nx-line-title .nx-line-product.is-link:hover > svg { color: var(--nx-v2-blue); }
#section-root .nx-line-title .nx-line-product.is-link:focus-visible { outline: 2px solid var(--nx-v2-blue); outline-offset: 2px; }
#section-root .nx-line-title .nx-line-name:has(> .nx-line-product) { display: flex; }
@media (max-width: 600px) {
  #section-root .nx-line-head .nx-line-title .nx-line-name { flex: 1 0 100%; min-width: 0; }
  #section-root .nx-line-title .nx-line-product { width: 100%; align-items: flex-start; padding-right: 9px; }
  #section-root .nx-line-title .nx-line-product > :not(.root-item-code) { margin-top: 3px; }
  #section-root .nx-line-title .nx-line-product :is(h3, .nx-line-product-name) { flex: 1 1 auto; font-size: 15.5px; }
}

/* Add item: one screen with search on the left and the chosen list on the right.
   Phones show one of the two at a time with a switch; nothing in the page scrolls. */
.modal-panel.nx-add-item { box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1000px, calc(100vw - 32px)); height: min(660px, calc(100dvh - 32px)); padding: 0; overflow: hidden; }
.nx-add-item .nx-add-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--nx-v2-border); }
.nx-add-item .nx-add-head h2 { margin: 0; color: var(--nx-v2-navy); font-size: 18px; font-weight: 750; }
.nx-add-item .nx-add-switch { display: none; }
.nx-add-item .nx-add-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); min-height: 0; }
.nx-add-item .nx-add-search { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 14px 16px; overflow: hidden; }
.nx-add-item .nx-add-field { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--nx-v2-field-border); border-radius: 10px; background: #fff; color: var(--nx-v2-muted); }
.nx-add-item .nx-add-field:focus-within { border-color: var(--nx-v2-blue); box-shadow: 0 0 0 3px rgba(74, 127, 167, .16); }
.nx-add-item .nx-add-field svg { flex: 0 0 auto; width: 17px; height: 17px; }
.nx-add-item .nx-add-field input { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--nx-v2-navy); font: inherit; font-size: 15px; }
.nx-add-item .nx-add-caption { color: var(--nx-v2-muted); font-size: 12px; font-weight: 600; }
.nx-add-item .nx-add-results { display: grid; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nx-add-item .nx-add-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 50px; padding: 6px 8px; border: 0; border-bottom: 1px solid #edf2f6; border-radius: 0; background: transparent; color: var(--nx-v2-navy); font: inherit; text-align: left; cursor: pointer; }
.nx-add-item .nx-add-row:hover { background: #f4f8fb; }
.nx-add-item .nx-add-row:focus-visible { outline: 2px solid var(--nx-v2-blue); outline-offset: -2px; }
.nx-add-item .nx-add-row.is-added { background: var(--nx-v2-blue-soft); }
.nx-add-item .nx-add-code { flex: 0 0 auto; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: #e6eef6; color: #24507a; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-add-item .nx-add-copy { display: grid; min-width: 0; }
.nx-add-item .nx-add-copy strong { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nx-add-item .nx-add-copy small { overflow: hidden; color: var(--nx-v2-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nx-add-item .nx-add-stock { padding: 2px 7px; border-radius: 999px; background: #e7f5ec; color: #23704a; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.nx-add-item .nx-add-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--nx-v2-border); border-radius: 8px; background: #fff; color: var(--nx-v2-blue); }
.nx-add-item .nx-add-mark svg { width: 15px; height: 15px; }
.nx-add-item .nx-add-row.is-added .nx-add-mark { border-color: var(--nx-v2-blue); background: var(--nx-v2-blue); color: #fff; }
.nx-add-item .nx-add-new { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border: 1px dashed #b9cddd; border-radius: 10px; background: #fafcfd; color: var(--nx-v2-navy); font: inherit; text-align: left; cursor: pointer; }
.nx-add-item .nx-add-new:hover { border-color: var(--nx-v2-blue); background: #f2f7fb; }
.nx-add-item .nx-add-new > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--nx-v2-blue); }
.nx-add-item .nx-add-new span { display: grid; min-width: 0; }
.nx-add-item .nx-add-new strong { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nx-add-item .nx-add-new small { color: var(--nx-v2-muted); font-size: 12px; }
.nx-add-item .nx-add-empty { margin: 8px 0; color: var(--nx-v2-muted); font-size: 13px; }
.nx-add-item .nx-add-basket { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; border-left: 1px solid var(--nx-v2-border); background: var(--nx-v2-surface-soft); }
.nx-add-item .nx-add-basket > header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; color: var(--nx-v2-navy); font-size: 14px; }
.nx-add-item .nx-add-basket > header span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--nx-v2-blue); color: #fff; font-size: 12px; font-weight: 750; text-align: center; }
.nx-add-item .nx-basket-list { display: grid; align-content: start; gap: 8px; min-height: 0; padding: 0 16px 14px; overflow-y: auto; }
.nx-add-item .nx-basket-row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--nx-v2-border); border-radius: 10px; background: #fff; }
.nx-add-item .nx-basket-row > header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-add-item .nx-basket-row > header strong { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--nx-v2-navy); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nx-add-item .nx-basket-remove { flex: 0 0 auto; width: 28px; height: 28px; color: var(--nx-v2-muted); }
.nx-add-item .nx-basket-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nx-add-item .nx-basket-qty { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--nx-v2-field-border); border-radius: 8px; overflow: hidden; background: #fff; }
.nx-add-item .nx-basket-qty button { display: grid; place-items: center; width: 32px; height: 100%; padding: 0; border: 0; background: #f4f8fb; color: var(--nx-v2-navy); font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; }
.nx-add-item .nx-basket-qty button svg { width: 14px; height: 14px; }
.nx-add-item .nx-basket-qty input { width: 52px; height: 100%; min-height: 0; padding: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; color: var(--nx-v2-navy); font-size: 14px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.nx-add-item .nx-basket-qty input::-webkit-outer-spin-button, .nx-add-item .nx-basket-qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.nx-add-item .nx-basket-unit, .nx-add-item .nx-basket-planned { color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-add-item .nx-basket-planned::before { content: "·"; margin-right: 6px; }
.nx-add-item .nx-basket-source { display: inline-flex; padding: 2px; border: 1px solid var(--nx-v2-border); border-radius: 8px; background: #f4f8fb; }
.nx-add-item .nx-basket-source label { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 6px; color: var(--nx-v2-muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.nx-add-item .nx-basket-source input { position: absolute; opacity: 0; pointer-events: none; }
.nx-add-item .nx-basket-source label.active { background: #fff; color: var(--nx-v2-navy); box-shadow: 0 1px 2px rgba(16, 42, 67, .1); }
.nx-add-item .nx-basket-source label:focus-within { outline: 2px solid var(--nx-v2-blue); }
.nx-add-item .nx-basket-note-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 2px; border: 0; background: none; color: var(--nx-v2-blue); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.nx-add-item .nx-basket-note-link svg { width: 13px; height: 13px; }
.nx-add-item .nx-basket-note { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--nx-v2-field-border); border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }
.nx-add-item .nx-basket-error { color: #b42318; font-size: 12px; font-weight: 600; }
.nx-add-item .nx-add-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--nx-v2-border); background: #fff; }
.nx-add-item .nx-add-foot .primary-button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
  .modal-backdrop:has(> .nx-add-item) { padding: 0 !important; }
  .modal-panel.nx-add-item { grid-template-rows: auto auto minmax(0, 1fr) auto; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .nx-add-item .nx-add-head { padding: 12px 16px; }
  .nx-add-item .nx-add-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px 16px 0; padding: 3px; border-radius: 10px; background: #eef3f7; }
  .nx-add-item .nx-add-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--nx-v2-muted); font: inherit; font-size: 14px; font-weight: 650; }
  .nx-add-item .nx-add-switch button[aria-pressed="true"] { background: #fff; color: var(--nx-v2-navy); box-shadow: 0 1px 2px rgba(16, 42, 67, .1); }
  .nx-add-item .nx-add-switch b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--nx-v2-blue); color: #fff; font-size: 12px; }
  .nx-add-item .nx-add-body { grid-template-columns: minmax(0, 1fr); }
  .nx-add-item[data-add-view="search"] .nx-add-basket, .nx-add-item[data-add-view="basket"] .nx-add-search { display: none; }
  .nx-add-item .nx-add-search { padding: 12px 16px; }
  .nx-add-item .nx-add-basket { border-left: 0; background: transparent; }
  .nx-add-item .nx-add-basket > header { display: none; }
  .nx-add-item .nx-basket-list { padding: 12px 16px; }
  .nx-add-item .nx-add-row { min-height: 54px; padding-inline: 4px; }
  .nx-add-item .nx-add-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .nx-add-item .nx-add-foot > button { flex: 1 1 0; min-height: 46px; justify-content: center; }
}

/* New item: one short form instead of three choice screens and a tabbed wizard. */
.modal-panel.flow-modal.runtime-custom-wizard.custom-quick-shell { width: min(760px, calc(100vw - 32px)); max-width: min(760px, calc(100vw - 32px)); height: auto; max-height: calc(100dvh - 32px); }
.runtime-custom-wizard.custom-quick-shell .custom-wizard-body { min-height: 0; padding: 16px 18px; overflow-y: auto; background: #fff; }
.runtime-custom-wizard.custom-quick-shell .flow-modal-head { padding-block: 12px; }
.runtime-custom-wizard .custom-quick-footer { display: flex; justify-content: space-between; gap: 10px; }
.nx-new-item { display: grid; gap: 16px; }
.nx-new-item .field { display: grid; gap: 5px; margin: 0; }
.nx-new-item .field > span, .nx-new-root-time > span { color: var(--nx-v2-muted); font-size: 12px; font-weight: 650; }
.nx-new-item .nx-new-head { display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px; gap: 10px; }
.nx-new-item .nx-new-head input, .nx-new-item .nx-new-head select { height: 42px; }
.nx-new-item .nx-new-section { display: grid; gap: 8px; }
.nx-new-item .nx-new-section > header { display: flex; align-items: baseline; gap: 10px; }
.nx-new-item .nx-new-section > header strong { color: var(--nx-v2-navy); font-size: 14px; font-weight: 750; }
.nx-new-item .nx-new-section > header small { color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-new-item .nx-new-ops { display: grid; gap: 6px; }
.nx-new-item .nx-new-op { display: grid; grid-template-columns: 24px minmax(150px, 1fr) minmax(0, 1.2fr) auto 30px; align-items: center; gap: 8px; }
.nx-new-item .nx-new-op select, .nx-new-item .nx-new-op > input { min-width: 0; height: 38px; }
.nx-new-item .nx-new-op-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #e6eef6; color: #24507a; font-size: 12px; font-weight: 750; }
.nx-new-item .nx-new-op-remove { width: 30px; height: 30px; color: var(--nx-v2-muted); }
.nx-new-item .nx-new-op[data-missing~="station"] select, .nx-new-item .nx-new-op[data-missing~="time"] .nx-new-time input { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.nx-new-item .nx-new-time { display: inline-flex; gap: 6px; }
.nx-new-item .nx-new-time label { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-v2-muted); font-size: 12px; }
.nx-new-item .nx-new-time em { font-style: normal; }
.nx-new-item .nx-new-time input { width: 52px; height: 38px; padding: 0 6px; text-align: center; }
.nx-new-item .nx-new-root-time { display: flex; align-items: center; gap: 12px; }
.nx-new-item .nx-new-add-op { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px dashed #b9cddd; border-radius: 8px; background: #fafcfd; color: var(--nx-v2-blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nx-new-item .nx-new-add-op svg { width: 14px; height: 14px; }
.nx-new-item .nx-new-extra { gap: 10px; padding-top: 14px; border-top: 1px solid #edf2f6; }
.nx-new-item .nx-new-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nx-new-item .nx-new-files .custom-file-list { flex: 1 0 100%; }
.nx-new-item .nx-new-note textarea { min-height: 38px; resize: vertical; }
.nx-new-item .nx-new-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-new-item .nx-text-link { padding: 0; border: 0; background: none; color: var(--nx-v2-blue); font: inherit; font-weight: 650; cursor: pointer; }
.nx-new-item .nx-text-link:hover { text-decoration: underline; }
.nx-new-item .nx-new-structure { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy); font-size: 13px; }
.nx-new-item .nx-new-structure svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .modal-backdrop:has(> .custom-quick-shell) { padding: 0 !important; }
  .modal-panel.flow-modal.runtime-custom-wizard.custom-quick-shell { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .runtime-custom-wizard.custom-quick-shell .custom-wizard-body { padding: 14px 16px; }
  .nx-new-item .nx-new-head { grid-template-columns: 1fr 1fr; }
  .nx-new-item .nx-new-name { grid-column: 1 / -1; }
  .nx-new-item .nx-new-op { grid-template-columns: 24px minmax(0, 1fr) auto 30px; grid-template-areas: "i s s r" ". d t t"; row-gap: 6px; padding: 8px 0; border-bottom: 1px solid #edf2f6; }
  .nx-new-item .nx-new-op-index { grid-area: i; }
  .nx-new-item .nx-new-op select { grid-area: s; }
  .nx-new-item .nx-new-op > input { grid-area: d; }
  .nx-new-item .nx-new-op .nx-new-time { grid-area: t; }
  .nx-new-item .nx-new-op-remove { grid-area: r; }
  .runtime-custom-wizard .custom-quick-footer { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .runtime-custom-wizard .custom-quick-footer > button { flex: 1 1 0; min-height: 46px; justify-content: center; }
}

/* Worker assignment: operations grouped by station, workers as chips that are all visible.
   A station chip assigns the worker to every operation of that station. */
.modal-panel.nx-assign { box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(860px, calc(100vw - 32px)); max-width: min(860px, calc(100vw - 32px)); height: auto; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.modal-panel.nx-assign.nx-assign-single { width: min(680px, calc(100vw - 32px)); max-width: min(680px, calc(100vw - 32px)); }
.nx-assign .nx-assign-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--nx-v2-border); }
.nx-assign .nx-assign-head h2 { margin: 0; color: var(--nx-v2-navy); font-size: 18px; font-weight: 750; }
.nx-assign .nx-assign-head p { margin: 2px 0 0; color: var(--nx-v2-muted); font-size: 13px; }
.nx-assign .nx-assign-body { display: grid; align-content: start; gap: 14px; min-height: 0; padding: 14px 18px; overflow-y: auto; overscroll-behavior: contain; }
.nx-assign .nx-assign-hint { margin: 0; color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-assign .nx-assign-station { display: grid; gap: 8px; }
.nx-assign .nx-assign-station + .nx-assign-station { padding-top: 14px; border-top: 1px solid #edf2f6; }
.nx-assign .nx-assign-station > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nx-assign .nx-assign-station > header strong { color: var(--nx-v2-navy); font-size: 14px; font-weight: 750; }
.nx-assign .nx-assign-station > header small { color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-assign .nx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-assign .nx-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: 100%; padding: 0 10px 0 4px; border: 1px solid var(--nx-v2-border); border-radius: 999px; background: #fff; color: var(--nx-v2-navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nx-assign .nx-chip:hover { border-color: #b8cfe2; background: #f4f8fb; }
.nx-assign .nx-chip:focus-visible, .nx-assign .nx-chip:focus-within { outline: 2px solid var(--nx-v2-blue); outline-offset: 1px; }
.nx-assign .nx-chip input { position: absolute; opacity: 0; pointer-events: none; }
.nx-assign .nx-chip-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e6eef6; color: #24507a; font-size: 10.5px; font-weight: 750; }
.nx-assign .nx-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-assign .nx-chip small { min-width: 18px; padding: 0 5px; border-radius: 999px; background: #eef3f7; color: var(--nx-v2-muted); font-size: 11px; font-weight: 700; text-align: center; }
.nx-assign .nx-chip.is-recommended .nx-chip-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #8fb4d0; }
.nx-assign .nx-chip[aria-pressed="true"], .nx-assign .nx-chip.is-on { border-color: var(--nx-v2-blue); background: var(--nx-v2-blue); color: #fff; }
.nx-assign .nx-chip[aria-pressed="true"] .nx-chip-avatar, .nx-assign .nx-chip.is-on .nx-chip-avatar { background: #fff; color: var(--nx-v2-navy); }
.nx-assign .nx-chip[aria-pressed="true"] small, .nx-assign .nx-chip.is-on small { background: rgba(255, 255, 255, .22); color: #fff; }
.nx-assign .nx-chip[aria-pressed="mixed"] { border-color: var(--nx-v2-blue); background: var(--nx-v2-blue-soft); }
.nx-assign .nx-chip:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.nx-assign .nx-chip-more { padding-left: 10px; border-style: dashed; color: var(--nx-v2-blue); }
.nx-assign .nx-assign-ops { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.nx-assign .nx-assign-op { display: grid; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f4f7; }
.nx-assign .nx-assign-op:last-child { border-bottom: 0; }
.nx-assign .nx-assign-op-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 13px; }
.nx-assign .nx-add-code { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: #e6eef6; color: #24507a; font-size: 11px; font-weight: 750; white-space: nowrap; }
.nx-assign .nx-assign-op-name { color: var(--nx-v2-navy); font-weight: 650; }
.nx-assign .nx-assign-op-who { flex: 1 1 160px; min-width: 0; color: var(--nx-v2-muted); }
.nx-assign .nx-assign-op-who.is-missing { color: #b54708; font-weight: 650; }
.nx-assign .nx-text-link { padding: 0; border: 0; background: none; color: var(--nx-v2-blue); font: inherit; font-weight: 650; cursor: pointer; }
.nx-assign .nx-assign-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--nx-v2-field-border); border-radius: 10px; color: var(--nx-v2-muted); }
.nx-assign .nx-assign-search svg { width: 16px; height: 16px; }
.nx-assign .nx-assign-search input { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; font: inherit; }
.nx-assign .nx-assign-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--nx-v2-border); background: #fff; }
.nx-assign .nx-assign-foot > span { min-width: 0; overflow: hidden; color: var(--nx-v2-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.nx-assign .nx-assign-foot > span.is-missing { color: #b54708; font-weight: 650; }
.nx-assign .nx-assign-foot > div { display: flex; flex: 0 0 auto; gap: 10px; }
@media (max-width: 760px) {
  .modal-backdrop:has(> .nx-assign) { padding: 0 !important; }
  .modal-panel.nx-assign, .modal-panel.nx-assign.nx-assign-single { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .nx-assign .nx-assign-head, .nx-assign .nx-assign-body { padding-inline: 16px; }
  .nx-assign .nx-chip { height: 36px; }
  .nx-assign .nx-assign-foot { flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .nx-assign .nx-assign-foot > span { flex: 1 0 100%; }
  .nx-assign .nx-assign-foot > div { flex: 1 0 100%; }
  .nx-assign .nx-assign-foot > div > button { flex: 1 1 0; min-height: 46px; justify-content: center; }
}

/* Phone footers: one-line button labels; the divider between recent and other products. */
.nx-add-item .nx-add-results .nx-add-divider { display: block; padding: 10px 2px 4px; }
@media (max-width: 760px) {
  .modal-panel.nx-add-item footer button, .nx-assign .nx-assign-foot > div > button { white-space: nowrap; }
}

/* Short number fields: the shared 12px field padding and the spin buttons left no room for the digits. */
.nx-new-item .nx-new-time input, .nx-new-item .nx-new-qty input, .nx-add-item .nx-basket-row input[type="number"] { padding: 0 4px !important; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.nx-new-item .nx-new-time input { width: 56px; }
.nx-new-item input[type="number"]::-webkit-inner-spin-button, .nx-new-item input[type="number"]::-webkit-outer-spin-button,
.nx-add-item input[type="number"]::-webkit-inner-spin-button, .nx-add-item input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* Copy an existing product into the new item: the same search list as Dodaj stavku. */
.nx-copy-pick { display: grid; gap: 8px; }
.nx-copy-pick .nx-add-caption { color: var(--nx-v2-muted); font-size: 12px; }
.nx-copy-pick .nx-add-results { overflow: visible; }
.nx-copy-pick .nx-add-row { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }
.nx-copy-pick .nx-add-empty { margin: 8px 0; color: var(--nx-v2-muted); font-size: 13px; }

/* Item overview: all assigned workers as wrapping chips. */
.nx-pv-who .nx-pv-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-pv-who .nx-pv-people li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 3px; border: 1px solid var(--nx-v2-border); border-radius: 999px; background: #fff; font-size: 12.5px; white-space: nowrap; }
.nx-pv-who .nx-pv-people .nx-avatar { margin: 0; }

/* Quick form files: compact chips, so copied documents do not push the form off screen. */
.nx-new-item .nx-new-files .custom-file-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: none; overflow: visible; }
.nx-new-item .nx-new-files .custom-file-row { display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 32px; max-width: 100%; padding: 0 4px 0 6px; border: 1px solid var(--nx-v2-border); border-radius: 8px; background: #fff; }
.nx-new-item .nx-new-files .custom-file-row .file-type { min-width: 0; height: 20px; padding: 0 5px; font-size: 10px; line-height: 20px; }
.nx-new-item .nx-new-files .custom-file-open { display: inline-flex; min-width: 0; max-width: 220px; padding: 0; border: 0; background: none; text-align: left; }
.nx-new-item .nx-new-files .custom-file-open strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.nx-new-item .nx-new-files .custom-file-open small { display: none; }
.nx-new-item .nx-new-files .custom-file-row .plain-icon { width: 24px; height: 24px; }
/* The copy list keeps one height while searching, so rows do not move under the pointer. */
@media (min-width: 761px) {
  .modal-panel.flow-modal.runtime-custom-wizard.custom-quick-shell[data-custom-route="copy-select"] { height: min(620px, calc(100dvh - 32px)); }
}
.nx-new-item .nx-new-docs-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px; }
.nx-new-item .nx-new-docs-toggle svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  /* Item overview header: the title keeps the first line beside the badge and close button; status wraps below. */
  .nx-detail-head .nx-detail-title { flex: 1 1 calc(100% - 108px); }
  /* Assigned workers: two compact columns instead of one chip per line. */
  .nx-pv-who .nx-pv-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .nx-pv-who .nx-pv-people li { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Quick form: searchable station picker and h/min/s time. */
.nx-new-item .nx-station-pick { position: relative; min-width: 0; }
.nx-new-item .nx-station-pick input { width: 100%; height: 38px; padding-right: 30px !important; text-overflow: ellipsis; }
.nx-new-item .nx-station-pick > svg { position: absolute; top: 50%; right: 10px; width: 14px; height: 14px; color: var(--nx-v2-muted); transform: translateY(-50%); pointer-events: none; }
.nx-new-item .nx-station-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 232px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid #d4e0ea; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(16, 42, 67, .14); }
.nx-new-item .nx-station-list li { padding: 8px 10px; border-radius: 6px; color: var(--nx-v2-navy); font-size: 13.5px; cursor: pointer; }
.nx-new-item .nx-station-list li.is-picked { font-weight: 700; }
.nx-new-item .nx-station-list li[aria-selected="true"] { background: var(--nx-v2-blue-soft); }
.nx-new-item .nx-station-list .nx-station-empty { color: var(--nx-v2-muted); cursor: default; }
.nx-new-item .nx-new-op[data-missing~="station"] .nx-station-pick input { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
@media (max-width: 760px) {
  .nx-new-item .nx-new-op .nx-station-pick { grid-area: s; }
  .nx-new-item .nx-new-op .nx-new-time { gap: 4px; }
  .nx-new-item .nx-new-op .nx-new-time label { gap: 2px; }
  .nx-new-item .nx-new-op .nx-new-time input { width: 42px; }
}

/* Assignment: load per work order under each station; operations fold into one line. */
.nx-assign .nx-assign-load { margin: 0; color: var(--nx-v2-muted); font-size: 12px; line-height: 1.4; }
.nx-assign .nx-assign-ops-sum { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 12.5px; }
.nx-assign .nx-assign-ops-sum > span { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--nx-v2-muted); text-overflow: ellipsis; white-space: nowrap; }
.nx-assign .nx-assign-ops-sum > button { flex: 0 0 auto; }
@media (max-width: 760px) {
  .nx-assign .nx-assign-body { gap: 12px; }
  .nx-assign .nx-assign-station { gap: 6px; }
  .nx-assign .nx-assign-station + .nx-assign-station { padding-top: 12px; }
  .nx-assign .nx-assign-station > .nx-chips { flex-wrap: nowrap; margin-inline: -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .nx-assign .nx-assign-station > .nx-chips::-webkit-scrollbar { display: none; }
  .nx-assign .nx-assign-station > .nx-chips > .nx-chip { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .nx-assign .nx-assign-hint { display: none; }
  .nx-assign .nx-assign-station { gap: 5px; }
  .nx-assign .nx-assign-station + .nx-assign-station { padding-top: 10px; }
  .nx-assign .nx-assign-body { gap: 10px; }
  .nx-assign .nx-assign-station > .nx-chips > .nx-chip { height: 34px; }
}

/* Quick form composition tree: parts with their operations, positions nested in assemblies. */
.nx-new-item .nx-parts { display: grid; gap: 8px; }
.nx-new-item .nx-part { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid #e3ebf2; border-radius: 10px; background: #fff; }
.nx-new-item .nx-part .nx-part { padding: 4px 0 4px 10px; border: 0; border-left: 2px solid #e3ebf2; border-radius: 0; background: transparent; }
.nx-new-item .nx-part-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-new-item .nx-part-toggle, .nx-new-item .nx-part-menu, .nx-new-item .nx-new-op-menu, .nx-new-item .nx-new-op-lock { display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: var(--nx-v2-muted); }
.nx-new-item .nx-part-toggle svg, .nx-new-item .nx-part-menu svg, .nx-new-item .nx-new-op-menu svg, .nx-new-item .nx-new-op-lock svg { width: 16px; height: 16px; }
.nx-new-item .nx-part-kind { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; background: #e6eef6; color: #24507a; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .02em; }
.nx-new-item .nx-part[data-part-type="position"] > .nx-part-head .nx-part-kind { background: #eef3f7; color: var(--nx-v2-muted); }
.nx-new-item .nx-part-name { flex: 1 1 auto; min-width: 0; height: 34px; font-weight: 700; color: var(--nx-v2-navy); }
.nx-new-item .nx-part-qty { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; color: var(--nx-v2-muted); font-size: 12px; font-weight: 700; }
.nx-new-item .nx-part-qty input { width: 52px; height: 34px; padding: 0 4px !important; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.nx-new-item .nx-part-qty input::-webkit-outer-spin-button, .nx-new-item .nx-part-qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.nx-new-item .nx-part-total { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--nx-v2-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.nx-new-item .nx-part-meta { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; justify-content: center; width: 150px; min-width: 0; line-height: 1.25; }
.nx-new-item .nx-part-per { max-width: 100%; overflow: hidden; color: var(--nx-v2-muted); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nx-new-item .nx-part-per:empty { display: none; }
.nx-new-item .nx-part-code { max-width: 220px; margin: 0 0 0 38px; }
.nx-new-item .nx-part-body { display: grid; gap: 6px; padding-left: 22px; }
.nx-new-item .nx-part-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.nx-new-item .nx-new-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--nx-v2-blue-soft); color: var(--nx-v2-navy); font-size: 13px; }
.nx-new-item .nx-new-op { grid-template-columns: 24px minmax(0, 1fr) auto 30px 30px; }
.nx-new-item .nx-new-op-desc { grid-column: 2 / 4; font-size: 13.5px; }
.nx-new-item .nx-new-op > .nx-new-op-desc { height: 34px; }
@media (max-width: 760px) {
  .nx-new-item .nx-part { padding: 8px; }
  .nx-new-item .nx-part-head { flex-wrap: wrap; row-gap: 4px; }
  .nx-new-item .nx-part-name { flex: 1 1 0; }
  .nx-new-item .nx-part-qty input { width: 44px; }
  .nx-new-item .nx-part-meta { order: 5; flex: 1 0 100%; flex-direction: row; width: auto; padding-left: 38px; }
  .nx-new-item .nx-part-per { max-width: none; }
  .nx-new-item .nx-part-total { width: auto; min-width: 0; text-align: left; }
  .nx-new-item .nx-part-per:not(:empty) + .nx-part-total:not(:empty)::before { content: " · "; white-space: pre; }
  .nx-new-item .nx-part-body { padding-left: 6px; }
  .nx-new-item .nx-new-op { grid-template-columns: 24px minmax(0, 1fr) auto 30px; grid-template-areas: "i s s m" ". t t r" ". d d d"; }
  .nx-new-item .nx-new-op .nx-new-op-desc { grid-area: d; }
  .nx-new-item .nx-new-op .nx-new-op-menu { grid-area: m; }
  .nx-new-item .nx-new-op .nx-new-op-lock { grid-area: m; }
}
.nx-new-item .nx-new-sections { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.nx-new-item .nx-new-hint, .nx-new-item .nx-new-legacy { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--nx-v2-muted); font-size: 12.5px; }
.nx-new-item .nx-new-legacy { padding: 8px 10px; border-radius: 8px; background: #fff8eb; color: #8a5a00; }
.nx-new-item .nx-new-legacy svg { flex: 0 0 auto; width: 16px; height: 16px; }
.nx-new-item .nx-new-more-fields { display: grid; grid-template-columns: minmax(0, 220px); }
.nx-new-item .nx-new-bom > .panel-card { margin: 0; box-shadow: none; }
.nx-new-item .nx-product-head { grid-template-columns: minmax(0, 1fr) 120px 150px; }
.nx-new-item .nx-new-op > .product-operation-machine { grid-column: 2 / -1; margin: 2px 0 4px; }
.nx-new-item .nx-product-more { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.nx-new-item .nx-product-more .product-min-tracking, .nx-new-item .nx-product-more .nx-product-description { grid-column: 1 / -1; }
.nx-new-item .nx-new-stock > .product-stock-panel { margin: 0; box-shadow: none; }
@media (max-width: 760px) {
  .nx-new-item .nx-product-head { grid-template-columns: 1fr 1fr; }
  .nx-new-item .nx-new-op > .product-operation-machine { grid-area: auto; grid-column: 2 / -1; }
}
.nx-new-item .nx-new-docs-toggle { height: 30px; font-size: 13px; }
.nx-new-item .nx-new-code-hint { color: var(--nx-v2-muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.internal-image-frame-shell { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.nx-new-item .nx-new-files .custom-file-list { min-height: 0; height: auto; }
.nx-new-item .nx-new-stock > .product-stock-panel { display: grid; gap: 10px; height: auto; padding: 12px; }
.nx-new-item .nx-new-stock .product-stock-panel > h3 { display: none; }
.nx-new-item .nx-new-stock .product-stock-panel dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; }
.nx-new-item .nx-new-stock .product-stock-panel dl > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; min-height: 0; padding: 0; border: 0; }
.nx-new-item .nx-new-stock .product-stock-panel dt { color: var(--nx-v2-muted); font-size: 12px; white-space: nowrap; }
.nx-new-item .nx-new-stock .product-stock-panel dd { margin: 0; font-size: 15px; font-weight: 700; text-align: left; }
.nx-new-item .nx-new-stock .product-stock-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.nx-new-item .nx-new-stock .product-stock-actions > button { width: auto; min-height: 34px; padding: 0 12px; }
.nx-new-item .nx-product-stock { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--nx-v2-border); border-radius: 10px; background: #f8fbfd; }
.nx-new-item .nx-stock-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; }
.nx-new-item .nx-stock-figures > div { display: flex; flex-direction: column; gap: 2px; }
.nx-new-item .nx-stock-figures dt { color: var(--nx-v2-muted); font-size: 12px; white-space: nowrap; }
.nx-new-item .nx-stock-figures dd { margin: 0; color: var(--nx-v2-navy); font-size: 15px; font-weight: 700; }
.nx-new-item .nx-stock-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.nx-new-item .nx-stock-actions .is-active { border-color: var(--nx-v2-blue); color: var(--nx-v2-blue); }
.nx-new-item .nx-stock-error { margin: 0; color: #b42318; font-size: 12.5px; font-weight: 600; }
.nx-new-item .nx-stock-correction { display: grid; grid-template-columns: 130px 190px minmax(0, 1fr); gap: 10px; align-items: end; }
.nx-new-item .nx-stock-save { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: 12px; }
.nx-new-item .nx-stock-save small { color: var(--nx-v2-muted); font-size: 12.5px; font-weight: 650; }
.nx-new-item .nx-stock-rows { display: grid; max-height: 260px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.nx-new-item .nx-stock-rows li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; column-gap: 10px; padding: 6px 0; border-bottom: 1px solid #edf2f6; font-size: 12.5px; }
.nx-new-item .nx-stock-rows li > span { color: var(--nx-v2-muted); }
.nx-new-item .nx-stock-rows li > strong { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.nx-new-item .nx-stock-rows li > small { grid-column: 2 / -1; color: var(--nx-v2-muted); }
.nx-new-item .nx-stock-rows li > small:empty { display: none; }
.nx-new-item .nx-doc-thumb { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.nx-new-item .nx-product-more .field small { color: var(--nx-v2-muted); font-size: 11.5px; }
@media (max-width: 760px) {
  .nx-new-item .nx-stock-correction { grid-template-columns: 1fr 1fr; }
  .nx-new-item .nx-stock-note { grid-column: 1 / -1; }
  .nx-new-item .nx-stock-rows li { grid-template-columns: 92px minmax(0, 1fr) auto; }
}
.nx-new-item .nx-new-ops > .nx-new-op { padding: 8px 0; border-bottom: 1px solid #cfdbe6; }
.nx-new-item .nx-new-ops > .nx-new-op:last-child { border-bottom: 0; }
.nx-new-item .nx-new-op .nx-station-pick input { font-weight: 650; }
.nx-new-item .nx-new-op > .nx-new-op-desc { height: 30px; border-color: transparent; background: #f4f7fa; color: #4d6275; font-size: 13px; }
.nx-new-item .nx-new-op > .nx-new-op-desc:focus { border-color: #b9cddd; background: #fff; color: var(--nx-v2-navy); }
.nx-new-item .nx-new-op > .nx-op-machine { grid-column: 2 / -1; }
.nx-new-item .nx-op-machine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 8px; background: #f2f7fb; }
.nx-new-item .nx-op-machine-label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--nx-v2-muted); font-size: 12px; font-weight: 650; }
.nx-new-item .nx-op-machine-label svg { width: 14px; height: 14px; }
.nx-new-item .nx-op-machine .nx-machine-pick { flex: 1 1 200px; max-width: 320px; }
.nx-new-item .nx-op-machine .nx-machine-pick input { height: 34px; font-weight: 600; }
.nx-new-item .nx-op-machine-time { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.nx-new-item .nx-op-machine-time input { width: 64px; height: 34px; text-align: center; }
.nx-new-item .nx-op-machine-time em { color: var(--nx-v2-muted); font-size: 12px; font-style: normal; }
.nx-new-item .nx-op-machine-error { flex: 1 0 100%; color: #b42318; font-size: 12px; font-weight: 600; }
.nx-new-item .nx-op-machine[data-missing] { box-shadow: inset 0 0 0 1px #f3b4ad; }
@media (max-width: 760px) {
  .nx-new-item .nx-new-op > .nx-op-machine { grid-area: auto; grid-column: 2 / -1; }
  .nx-new-item .nx-op-machine .nx-machine-pick { flex-basis: 140px; }
}
.modal-panel .nx-new-item .nx-new-op > input.nx-new-op-desc:not([type="file"]) { min-height: 0; height: 30px; border-color: #e1e9f0; background: #f4f7fa; color: #4d6275; font-size: 13px; }
.modal-panel .nx-new-item .nx-new-op > input.nx-new-op-desc:not([type="file"]):focus { border-color: #b9cddd; background: #fff; color: var(--nx-v2-navy); }
.modal-panel .nx-new-item .nx-op-machine input:not([type="file"]) { min-height: 0; height: 34px; }
.nx-new-item .nx-new-section > header .nx-new-ops-hide { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px; font-size: 13px; }
.nx-new-item .nx-new-ops-hide svg { width: 14px; height: 14px; }
.nx-new-item .nx-new-ops-summary { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #cfdbe6; border-radius: 8px; background: #f7fafc; color: var(--nx-v2-navy); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.nx-new-item .nx-new-ops-summary:hover { border-color: #aebfcd; background: #fff; }
.nx-new-item .nx-new-ops-summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-new-item .nx-new-ops-summary em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--nx-v2-blue, #1f5f99); }
.nx-new-item .nx-new-ops-summary svg { width: 16px; height: 16px; flex: none; }
.nx-new-item .nx-new-code-hint.is-locked { display: inline-flex; align-items: center; gap: 4px; }
.nx-new-item .nx-new-code-hint.is-locked svg { width: 12px; height: 12px; flex: none; }
.modal-panel .nx-new-item .nx-product-head input[readonly], .modal-panel .nx-new-item .nx-product-head select:disabled { background: #f4f7fa; color: #4d6275; }
.nx-copy-pick .nx-copy-group { margin: 10px 0 4px; color: var(--nx-v2-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.nx-copy-pick .nx-copy-oneoff:empty { display: none; }
.nx-new-item .nx-part-add[hidden] { display: none; }
.nx-new-item .nx-new-code .nx-new-code-hint { white-space: normal; line-height: 1.25; }
.nx-new-item .nx-new-head { align-items: start; }
/* Radna stanica: isti jednoekranski obrazac kao proizvod. */
.nx-new-item .nx-station-head { grid-template-columns: minmax(0, 1fr) 160px 120px; }
.nx-new-item .nx-station-operators { display: grid; }
.nx-new-item .nx-station-operator { display: grid; grid-template-columns: 24px minmax(0, 1fr) 30px 30px 30px; align-items: center; gap: 8px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid #cfdbe6; }
.nx-new-item .nx-station-operator:last-child { border-bottom: 0; }
.nx-new-item .nx-station-operator-name { display: grid; min-width: 0; }
.nx-new-item .nx-station-operator-name strong { overflow: hidden; color: var(--nx-v2-navy); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.nx-new-item .nx-station-operator-name small { overflow: hidden; color: var(--nx-v2-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nx-new-item .nx-station-operator.is-legacy .nx-station-operator-name strong { color: var(--nx-v2-muted); }
.nx-new-item .nx-station-operator .plain-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--nx-v2-muted); }
.nx-new-item .nx-station-operator .plain-icon svg { width: 16px; height: 16px; }
.nx-new-item .nx-station-operator .plain-icon:disabled { opacity: .35; cursor: default; }
.nx-new-item .nx-station-operator-add { justify-self: start; }
/* Dodavanje operatera izgleda kao "+ Operacija" kod proizvoda: dugme, ne polje za unos. */
.modal-panel .nx-new-item .nx-station-operator-add select { -webkit-appearance: none; appearance: none; width: auto; min-width: 0; min-height: 0; height: 34px; padding: 0 12px; border: 1px dashed #b9cddd; border-radius: 8px; background: #fafcfd; color: var(--nx-v2-blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.modal-panel .nx-new-item .nx-station-operator-add select:hover { border-color: var(--nx-v2-blue); }
@media (max-width: 760px) {
  .nx-new-item .nx-station-head { grid-template-columns: 1fr 1fr; }
  .nx-new-item .nx-station-operator > * { grid-area: auto; }
}
/* Na desktopu su svi filteri stanica i mašina već u redu; dugme Filteri bi otvaralo prazan panel. */
@media (min-width: 761px) {
  .stations-filter-card .filter-disclosure-button, .stations-filter-card .filter-extra-row { display: none !important; }
}
.stations-table tr.is-inactive > td:not(:last-child) { opacity: .6; }
.nx-new-item .nx-machine-head { grid-template-columns: minmax(0, 1fr) 210px 140px 100px; }
.machine-card-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.machine-card-stat { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--nx-v2-border); border-radius: 10px; background: #fafcfd; }
.machine-card-stat > span { color: var(--nx-v2-muted); font-size: 12px; font-weight: 650; }
.machine-card-stat > strong { color: var(--nx-v2-navy); font-size: 18px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.machine-card-stat > small { color: var(--nx-v2-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.machine-card-stat.is-soon > strong { color: #b26a00; }
.machine-card-stat.is-overdue > strong { color: #c62828; }
.nx-new-item .machine-card-section { gap: 6px; padding-top: 6px; border-top: 1px solid #e3ebf2; }
.machine-card-section-head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.machine-card-section-meta { flex: 1; min-width: 0; overflow: hidden; color: var(--nx-v2-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.machine-card-section-actions { display: inline-flex; flex: none; gap: 6px; }
.machine-card-section-head > .nx-new-docs-toggle { flex: none; white-space: nowrap; }
.machine-card-section-body { display: grid; gap: 8px; padding-bottom: 6px; }
.machine-work-list { display: grid; }
.machine-work-row { display: grid; grid-template-columns: 88px 128px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid #edf2f6; font-size: 13px; }
.machine-work-row .nx-text-link { justify-self: start; padding: 0; font-weight: 700; }
.machine-work-date { color: var(--nx-v2-muted); }
.machine-work-op { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-work-op small { margin-left: 8px; color: var(--nx-v2-muted); font-size: 12px; }
.machine-work-more { justify-self: start; }
@media (max-width: 760px) {
  .nx-new-item .nx-machine-head { grid-template-columns: 1fr 1fr; }
  .machine-card-stats { grid-template-columns: 1fr 1fr; }
  .machine-work-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
  .machine-work-row .machine-work-op { grid-column: 1 / -1; grid-row: 2; }
  .machine-card-section-meta { display: none; }
  .machine-card-section-actions { margin-left: auto; }
}
.modal-panel input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border-color: var(--ds-danger, #e11d30); box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.1); }
@media (max-width: 600px) {
  .machine-card-modal .machine-modal-head-actions .machine-status-badge { display: inline-flex; }
}
/* Član tima na jednom ekranu; brojevi, sekcije i redovi rada koriste izgled kartice mašine. */
.team-card-head-actions { display: flex; align-items: center; gap: 8px; }
.nx-new-item .nx-team-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-new-item .nx-team-head .nx-team-email { grid-column: span 2; }
.nx-new-item .nx-team-head > .field-error { grid-column: 1 / -1; }
.team-station-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.team-station-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--nx-v2-border); border-radius: 999px; background: #f4f8fb; color: var(--nx-v2-navy); font-size: 13px; font-weight: 600; }
.team-station-chip button { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--nx-v2-muted); cursor: pointer; }
.team-station-chip button:hover, .team-station-chip button:focus-visible { background: #e3ebf2; color: var(--nx-v2-navy); }
.team-station-chip button svg { width: 14px; height: 14px; }
.nx-new-item .team-station-add { max-width: 360px; }
.nx-new-item .team-station-add input { height: 40px; }
.team-card-modal .team-document-confirm { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 0 8px; font-size: 13px; }
.team-document-pending { color: #b26a00; font-weight: 650; }
@media (max-width: 760px) {
  .nx-new-item .nx-team-head { grid-template-columns: 1fr 1fr; }
  .nx-new-item .team-station-add { max-width: none; }
  .team-card-head-actions .team-role-badge { display: none; }
}
/* Početna: donut-i po roku i radnici danas – donut levo, legenda desno; istaknut segment koji kasni. */
.nx-dashboard-overview .nx-dash-donut-card { gap: 14px; padding: 18px 22px; }
.nx-dashboard-overview .nx-dash-donut-card > header { justify-content: space-between; text-align: left; align-items: center; }
.nx-dash-donut-card > header .nx-text-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--ds-primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nx-dash-donut-card > header .nx-text-link svg { width: 14px; height: 14px; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-layout { grid-template-columns: 200px minmax(0, 1fr); justify-items: stretch; align-items: center; gap: 24px; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut { width: 200px; height: 200px; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend { max-width: none; gap: 4px; border: 0; border-radius: 0; background: none; overflow: visible; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend > button { grid-template-columns: 12px minmax(0, 1fr) auto 32px; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: none; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend > button + button { border-top: 1px solid transparent; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend > button:hover,
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend > button:focus-visible { border-color: var(--ds-primary-border); background: var(--ds-info-bg); }
.nx-dash-donut-card .nx-command-donut-legend i { width: 12px; height: 12px; border-radius: 3px; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend span { font-weight: 650; }
.nx-dash-donut-card .nx-command-donut-legend small { color: var(--ds-text-light); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend > button.is-alert { background: #fdecec; }
.nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend > button.is-alert :is(span, small, strong) { color: #8e1c1c; }
.nx-dash-legend-sep { height: 1px; margin: 2px 0; background: var(--ds-border); }
.nx-dash-donut-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: var(--ds-primary-light); color: var(--ds-text-light); font-size: 13px; font-weight: 600; }
.nx-dash-donut-footer b { color: var(--ds-heading); }
@media (max-width: 760px) {
  .nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
  .nx-dashboard-overview .nx-dash-donut-card .nx-command-donut { width: 180px; height: 180px; }
  .nx-dashboard-overview .nx-dash-donut-card .nx-command-donut-legend { width: 100%; }
}

/* Radnici danas: kompaktna tabela, klik na red otvara zadatke radnika. */
.nx-worker-overview { display: grid; gap: 12px; min-width: 0; }
.nx-worker-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nx-worker-search { display: flex; flex: 1 1 220px; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--ds-border-strong, #c9d6e2); border-radius: 9px; background: var(--ds-card); color: var(--ds-text-light); }
.nx-worker-search svg { width: 16px; height: 16px; flex: none; }
.nx-worker-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ds-heading); font: inherit; font-size: 14px; }
.nx-worker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-worker-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ds-primary-light); color: var(--ds-heading); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nx-worker-chip[aria-pressed="true"] { background: var(--ds-heading); color: #fff; }
.nx-worker-table { display: grid; min-width: 0; }
.nx-worker-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 64px 70px minmax(0, 1.4fr) 140px 36px; align-items: center; gap: 12px; min-height: 54px; padding: 0 8px; border-bottom: 1px solid var(--ds-border); font-size: 14px; cursor: pointer; }
.nx-worker-row[hidden] { display: none; }
.nx-worker-row:not(.nx-worker-row-head):hover { background: var(--ds-primary-light); }
.nx-worker-row-head { min-height: 36px; color: var(--ds-text-light); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: default; }
.nx-worker-row-name { display: grid; min-width: 0; }
.nx-worker-row-name button { justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--ds-heading); font: inherit; font-weight: 800; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.nx-worker-row-name small { overflow: hidden; color: var(--ds-text-light); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nx-worker-row > span > small:first-child { display: none; }
.nx-worker-row-count { font-weight: 700; }
.nx-worker-row-late { color: var(--ds-text-light); font-weight: 700; }
.nx-worker-row-late b { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: #fdecec; color: #8e1c1c; font-weight: 800; }
.nx-worker-row-due, .nx-worker-due { font-weight: 600; }
.nx-worker-row-due.is-late, .nx-worker-due.is-late { color: #b42318; font-weight: 800; }
.nx-worker-row-due.is-soon, .nx-worker-due.is-soon { color: #a35c00; font-weight: 700; }
.nx-worker-due { margin-left: 10px; font-size: 12.5px; font-style: normal; }
.nx-worker-row-progress { display: flex; align-items: center; gap: 8px; }
.nx-worker-row-progress i { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--ds-border); }
.nx-worker-row-progress i b { display: block; height: 100%; background: var(--ds-primary); }
.nx-worker-row-progress.is-late i b { background: #c62828; }
.nx-worker-row-progress small { width: 36px; font-size: 12px; font-weight: 700; text-align: right; }
.nx-order-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) 140px 150px; }
.nx-order-row-status { justify-self: start; }
.nx-worker-idle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 8px; border-bottom: 1px solid var(--ds-border); color: var(--ds-text-light); font-size: 13.5px; }
.nx-worker-idle b { color: var(--ds-heading); }
.nx-worker-idle small { font-size: 12px; font-weight: 700; }
.nx-worker-assignment-detail-summary .compact-command { align-self: center; }
@media (max-width: 760px) {
  .nx-worker-row-head { display: none; }
  .nx-worker-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 36px; row-gap: 6px; padding: 10px 4px; }
  .nx-worker-row-name { grid-column: 1 / 4; }
  .nx-worker-row .list-actions-trigger { grid-column: 4; grid-row: 1; }
  .nx-worker-row > span > small:first-child { display: block; color: var(--ds-text-light); font-size: 11px; font-weight: 700; }
  .nx-worker-row-progress { grid-column: 1 / -1; }
  .nx-worker-row-progress > small:first-child { display: none; }
}
/* The global modal input rule (44px, padding) must not leak into the search box, or the field spills out of it. */
#modal-root .nx-worker-search input[type="search"], #modal-root .nx-worker-search input[type="search"]:focus { width: auto; height: 100%; min-height: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }

/* Worker detail: worker facts on one bar, then "Evidentiraj rad" with orders, product lines and operation chips. */
.nx-task-worker-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -18px -20px 0; padding: 12px 20px; border-bottom: 1px solid var(--ds-border); background: var(--ds-surface-muted, #f7f9fb); color: var(--ds-text-light); font-size: 13px; }
.nx-task-worker-bar b { color: var(--ds-heading); }
.nx-task-worker-bar .is-late, .nx-task-worker-bar .is-late b { color: #b3261e; }
.nx-task-worker-bar .nx-worker-assignment-back { margin: 0 4px 0 0; padding-right: 16px; border-right: 1px solid var(--ds-border); }
.nx-task-worker-bar .compact-command { margin-left: auto; }
.nx-task-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 18px 0 12px; }
.nx-task-section-head > div { flex: 1 1 260px; }
.nx-task-section-head h3 { margin: 0; color: var(--ds-heading); font-size: 17px; }
.nx-task-section-head p { margin: 3px 0 0; color: var(--ds-text-light); font-size: 13px; }
.nx-task-section-head .nx-worker-search { flex: 0 1 280px; }
.nx-task-order { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-card); }
.nx-task-order > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 11px 14px; background: var(--ds-surface-muted, #f4f7fa); cursor: pointer; list-style: none; }
.nx-task-order > summary::-webkit-details-marker { display: none; }
.nx-task-order > summary strong { color: var(--ds-heading); font-size: 14px; }
.nx-task-order-context { display: flex; flex: 1 1 200px; align-items: center; gap: 8px; min-width: 0; color: var(--ds-text-light); font-size: 13px; }
.nx-task-order > summary small { color: var(--ds-text-light); font-size: 12px; }
.nx-task-order > summary svg { width: 16px; height: 16px; color: var(--ds-text-light); transition: transform .15s; }
.nx-task-order[open] > summary svg { transform: rotate(180deg); }
.nx-task-order.is-late { border-color: #f0c9c6; }
.nx-task-order.is-late > summary { background: #fdf3f2; }
.nx-task-product { padding: 10px 14px 12px; border-top: 1px solid var(--ds-border); }
.nx-task-product-name { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.nx-task-product-name strong { color: var(--ds-heading); font-size: 14px; }
.nx-task-product-name small { color: var(--ds-text-light); font-size: 12px; }
.nx-task-line { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; }
.nx-task-line + .nx-task-line { border-top: 1px dashed var(--ds-border); }
.nx-task-line-label { color: var(--ds-text-light); font-size: 12px; font-weight: 600; }
.nx-task-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-task-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--ds-primary); border-radius: 17px; background: var(--ds-primary-light); color: var(--ds-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nx-task-chip small { color: inherit; font-size: 12px; opacity: .8; }
.nx-task-chip.is-started { border-color: #2f8f5b; background: #eef8f2; color: #1f6b43; }
.nx-task-chip.is-static { cursor: default; opacity: .7; }
button.nx-task-chip:hover, button.nx-task-chip:focus-visible { background: var(--ds-primary); color: #fff; outline: 0; }
button.nx-task-chip.is-started:hover, button.nx-task-chip.is-started:focus-visible { background: #2f8f5b; }
.nx-task-more { display: none; }
@media (max-width: 760px) {
  .nx-task-worker-bar .nx-worker-assignment-back { border-right: 0; padding-right: 0; }
  .nx-task-section-head .nx-worker-search { flex: 1 1 100%; height: 44px; }
  .nx-task-line { grid-template-columns: 1fr; gap: 6px; }
  .nx-task-chip { min-height: 44px; border-radius: 22px; padding: 0 14px; font-size: 14px; }
  .nx-task-product:not(.is-all) .nx-task-lines > .nx-task-line:nth-child(n+4) { display: none; }
  .nx-task-product:not(.is-all) .nx-task-more { display: block; width: calc(100% + 28px); min-height: 44px; margin: 8px -14px -12px; border: 0; border-top: 1px solid var(--ds-border); background: var(--ds-surface-muted, #f7f9fb); color: var(--ds-primary); font: inherit; font-size: 13px; font-weight: 600; }
}
@media (max-width: 600px) {
  .nx-task-worker-bar { margin: -14px -14px 0; padding: 10px 14px; }
}

/* One list header on every screen. Phones: title + ⋯ + round "+" on one line, then tabs, search with the
   filter button, and the active filters as removable chips; header ⋯ opens as a bottom sheet like Filteri. */
.nx-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.nx-filter-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--ds-primary); border-radius: 16px; background: var(--ds-primary-light); color: var(--ds-heading); font: inherit; font-size: 12.5px; cursor: pointer; }
.nx-filter-chip span { color: var(--ds-text-light); }
.nx-filter-chip b { font-weight: 650; }
.nx-filter-chip svg { width: 14px; height: 14px; color: var(--ds-primary); }
.nx-filter-chip:hover, .nx-filter-chip:focus-visible { border-color: var(--ds-primary); background: var(--ds-card); outline: 0; box-shadow: 0 0 0 2px rgba(24, 90, 157, .18); }
.nx-filter-chips-clear { min-height: 32px; padding: 0 6px; border: 0; background: none; color: var(--ds-primary); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
@media (max-width: 760px) {
  .nx-filter-chip, .nx-filter-chips-clear { min-height: 40px; }
  :is(.content > .topbar .title-block, .module-title-block) { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; }
  :is(.content > .topbar .title-block, .module-title-block) > h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(.content > .topbar .topbar-actions, .stations-card-actions, .materials-head-actions) { flex: 0 0 auto !important; gap: 8px !important; }
  :is(.content > .topbar .topbar-actions, .stations-card-actions, .materials-head-actions) > .primary-button { position: relative; flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; }
  :is(.content > .topbar .topbar-actions, .stations-card-actions, .materials-head-actions) > .primary-button > span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
  :is(.content > .topbar .topbar-actions, .stations-card-actions, .materials-head-actions) > .primary-button > svg { margin: 0 !important; }
  .nx-header-more { position: static !important; display: block !important; flex: 0 0 44px !important; width: 44px !important; }
  .nx-header-more > summary { display: grid !important; place-items: center; place-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 50% !important; list-style: none; cursor: pointer; }
  .nx-header-more > summary::-webkit-details-marker { display: none; }
  :is(.nx-header-more > summary, #section-root .list-actions-trigger) svg circle { display: none; }
  :is(.nx-header-more > summary, #section-root .list-actions-trigger) svg { width: 22px !important; height: 22px !important; stroke-width: 3 !important; }
  #section-root .filter-disclosure-panel:not(.mobile-filter-sheet-surface) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .nx-header-more[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 1190; background: rgba(9, 24, 40, .42); }
  .nx-header-more > div { position: fixed !important; z-index: 1200 !important; inset: auto 0 0 0 !important; display: grid !important; gap: 4px !important; width: auto !important; min-width: 0 !important; max-height: 70vh; overflow-y: auto; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 16px 16px 0 0 !important; background: var(--ds-card) !important; box-shadow: 0 -12px 32px rgba(9, 24, 40, .18) !important; }
  .nx-header-more > div > button { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 48px !important; padding: 8px 12px !important; border: 0; border-radius: 10px; background: transparent; color: var(--ds-heading); font: inherit; font-size: 15px; font-weight: 600; text-align: left; }
  .nx-header-more > div > button:active, .nx-header-more > div > button:focus-visible { background: var(--ds-bg-soft); outline: 0; }
  :is(.station-area-tabs, .products-tabs, .customers-area-tabs).nx-content-tabs { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; height: auto !important; min-height: 40px !important; margin: 0 0 8px !important; padding: 0 !important; overflow-x: auto; border: 0 !important; border-bottom: 1px solid var(--ds-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; grid-template-columns: none !important; scrollbar-width: none; }
  :is(.station-area-tabs, .products-tabs, .customers-area-tabs).nx-content-tabs > button { flex: 0 0 auto !important; min-height: 40px !important; padding: 8px 12px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--ds-text-light) !important; white-space: nowrap; }
  :is(.station-area-tabs, .products-tabs, .customers-area-tabs).nx-content-tabs > button[aria-selected="true"] { border-bottom-color: var(--ds-primary) !important; color: var(--ds-heading) !important; }
  /* One search row on every list: a 44px field with the magnifier on the left, the 44px Filteri button beside it. */
  #section-root label:has(input:is([type="search"], [data-action$="search"])) { position: relative !important; display: block !important; flex: 1 1 auto !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; }
  #section-root label:has(input:is([type="search"], [data-action$="search"])) > span { display: none !important; }
  #section-root label:has(input:is([type="search"], [data-action$="search"])) > div { display: contents !important; }
  #section-root label:has(input:is([type="search"], [data-action$="search"])) svg { position: absolute !important; z-index: 1; top: 50% !important; left: 14px !important; right: auto !important; bottom: auto !important; display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; transform: translateY(-50%) !important; color: var(--nx-v2-muted); pointer-events: none; }
  #section-root label:has(input:is([type="search"], [data-action$="search"])) input { box-sizing: border-box !important; width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 12px 0 42px !important; border-radius: 10px !important; font-size: 16px !important; }
  #section-root :is(.filter-disclosure-button, .work-order-mobile-filter-details > summary) { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 10px !important; align-self: center !important; }
  /* List cards: the name leads, then one fact per row (label left, value right, hairline between),
     so a long value never breaks into the next fact. Display stays without !important so cards that
     hide extra facts on phones keep hiding them. */
  :is(#section-root, #modal-root) .nx-row-card { gap: 10px; padding: 12px 14px; border-color: #e3e9f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(9, 24, 40, .05), 0 4px 12px rgba(9, 24, 40, .04); }
  :is(#section-root, #modal-root) .nx-row-card > header { align-items: center; }
  /* Code + name: badge and ⋯ sit on the code line top right, the name gets the whole line below in one row.
     Work order cards keep their own code / customer / job title column (.nx-woc). */
  :is(#section-root, #modal-root) .nx-row-card:not(.archive-card, .nx-woc) > header:has(> div:first-child > :nth-child(2)) { grid-template-rows: auto auto; row-gap: 2px; }
  :is(#section-root, #modal-root) .nx-row-card:not(.archive-card, .nx-woc) > header:has(> div:first-child > :nth-child(2)) > div:first-child { display: contents; }
  :is(#section-root, #modal-root) .nx-row-card:not(.archive-card, .nx-woc) > header:has(> div:first-child > :nth-child(2)) > div:first-child > :first-child { grid-column: 1; grid-row: 1; min-width: 0; color: var(--nx-v2-muted); font-size: 12px; font-weight: 700; }
  :is(#section-root, #modal-root) .nx-row-card:not(.archive-card, .nx-woc) > header:has(> div:first-child > :nth-child(2)) > :last-child { grid-column: 2; grid-row: 1; }
  :is(#section-root, #modal-root) .nx-row-card:not(.archive-card, .nx-woc) > header:has(> div:first-child > :nth-child(2)) > div:first-child > :last-child { grid-column: 1 / -1; grid-row: 2; }
  :is(#section-root, #modal-root) .nx-row-card:not(.nx-woc) > header > div:first-child > :is(h2, h3, h4, strong):last-child { display: block; overflow: hidden; margin: 0; color: var(--nx-v2-navy); font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; }
  :is(#section-root, #modal-root) .nx-row-card > dl { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border-top: 1px solid #edf1f5; }
  :is(#section-root, #modal-root) .nx-row-card > dl > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid #edf1f5; }
  :is(#section-root, #modal-root) .nx-row-card > dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
  :is(#section-root, #modal-root) .nx-row-card > dl dt { flex: 0 0 auto; max-width: 48%; font-size: 13px; font-weight: 500; line-height: 1.3; text-transform: none; }
  :is(#section-root, #modal-root) .nx-row-card > dl dd { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; text-align: right; color: var(--nx-v2-navy); font-size: 14px; line-height: 1.3; }
  :is(#section-root, #modal-root) .nx-row-card > dl dd strong { font-size: inherit; font-weight: inherit; }
  :is(#section-root, #modal-root) .nx-row-card > dl > div:is([class*="description"], [class*="note"]) { display: grid; gap: 2px; justify-content: stretch; }
  :is(#section-root, #modal-root) .nx-row-card > dl > div:is([class*="description"], [class*="note"]) dd { justify-content: flex-start; text-align: left; font-weight: 500; }
  #section-root .work-order-card-grid { padding: 0 !important; background: transparent !important; }
  #section-root :is(.products-list-card, .stations-list-card, .work-order-list-card, .archive-table-card, .scrap-events-card) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
}