/* Üretim Takibi ve Atölye (kiosk) modül stilleri — sahipleri: public/js/production.js, public/js/atolye.js, public/js/kiosk.js
   atolye.html bu dosyayı da yükler. Ortak kiosk parçaları (.big-btn, .numpad, .tile-grid, .stepper) styles.css'tedir;
   burada yalnızca üretim ekranlarına özgü kurallar tanımlanır. Üretim Takibi seçicileri .prod- önekini taşır
   (kiosk kuralları .kiosk- önekiyle kiosk.css'tedir). Değişkenler: styles.css :root.

   Yerleşim (#/production): başlık · 4 KPI · süzgeç çubuğu · Tezgah Durumu (kart ızgarası) · Üretimdeki İşler (iş kartları:
   bilgi | ilerleme + adım çubuğu | şu anki operasyon) · Planlanan / Bekleyen (katlanır) · (yönetici) Son 7 Gün.
   Duyarlı: KPI 4 → 2 → 1 sütun; iş kartı 3 → 2 → 1 sütun; ≤ 640 px dokunma hedefleri ≥ 44 px. */

.prod-page { display: flex; flex-direction: column; min-width: 0; }
.prod-page[aria-busy="true"] .prod-content { opacity: 0.85; transition: opacity 0.2s; }
.prod-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Satır içi küçük ikon (takvim, kişi, saat…) */
.prod-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); }
.prod-ico svg { width: 14px; height: 14px; }
.prod-muted { color: var(--muted); }
.prod-empty { padding: 16px 0 4px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------------------------------------------------------------- Başlık düğmeleri */
.prod-btn .prod-btn-icon, .prod-clear .prod-btn-icon { display: inline-flex; }
.prod-clear[hidden] { display: none; }   /* .btn display'i hidden özniteliğini ezmesin */
.prod-btn .prod-btn-icon svg { width: 18px; height: 18px; }
.prod-clear .prod-btn-icon svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- KPI satırı */
.kpi-grid.prod-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.prod-kpis .kpi-card { padding: 18px 18px 16px; gap: 5px; }
.prod-kpis .kpi-value { font-size: 26px; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.prod-kpis .kpi-card.clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.prod-kpis .kpi-card.clickable:hover { border-color: var(--line-hover); }
.prod-kpis .kpi-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prod-kpis .kpi-card.is-on { border-color: var(--tone-red); box-shadow: 0 0 0 3px var(--tone-red-soft); }

/* ---------------------------------------------------------------- Süzgeç çubuğu */
.toolbar.prod-toolbar {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; margin-bottom: 16px; gap: 10px;
}
.prod-toolbar select.prod-machine-select { min-width: 190px; max-width: 260px; }
.prod-toolbar .prod-search { flex: 1 1 240px; max-width: 360px; }
.prod-late-toggle { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.prod-late-toggle input { width: 16px; height: 16px; accent-color: var(--tone-red); }
.prod-late-toggle:has(input:checked) { border-color: var(--tone-red); background: var(--tone-red-soft); color: var(--tone-red); font-weight: 600; }
.prod-updated-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.prod-updated { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-updated.is-stale { color: var(--amber-ink); font-weight: 600; }
.icon-btn.prod-refresh { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.icon-btn.prod-refresh:hover { border-color: var(--line-hover); background: var(--surface-2); }
.icon-btn.prod-refresh svg { width: 18px; height: 18px; }
.icon-btn.prod-refresh:disabled { cursor: default; opacity: 0.75; }
.prod-refresh.is-loading svg { animation: prodSpin 0.9s linear infinite; }
@keyframes prodSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Bölüm kartları */
.prod-section { margin: 0; }
.prod-section .card-head { flex-wrap: wrap; row-gap: 8px; }
.prod-section .card-head h3, .prod-fold-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--heading); display: flex; align-items: center; gap: 10px; }
.prod-head-icon {
  --tone: var(--tone-green); --tone-soft: var(--tone-green-soft);
  width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--tone-soft); color: var(--tone);
  display: inline-grid; place-items: center; flex: 0 0 auto;
}
.prod-section .prod-head-icon svg { width: 18px; height: 18px; color: inherit; }
.prod-machines-card .prod-head-icon { --tone: var(--tone-blue); --tone-soft: var(--tone-blue-soft); }
.prod-planned-card .prod-head-icon { --tone: var(--tone-purple); --tone-soft: var(--tone-purple-soft); }
.prod-hold-card .prod-head-icon { --tone: var(--tone-orange-ink); --tone-soft: var(--tone-orange-soft); }
.prod-week-card .prod-head-icon { --tone: var(--tone-teal-ink); --tone-soft: var(--tone-teal-soft); }
.prod-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--tone-gray-soft); color: var(--tone-gray-ink);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.prod-count:empty { display: none; }
.prod-head-extra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prod-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.prod-head-note { font-size: 12px; color: var(--muted); }

/* Katlanır bölüm (Planlanan, Bekleyen, Son 7 Gün): <details class="card"> */
details.prod-fold { display: block; }
.prod-fold-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 20px; cursor: pointer; list-style: none; user-select: none;
  border-radius: var(--radius);
}
.prod-fold-head::-webkit-details-marker { display: none; }
.prod-fold-head::marker { content: ''; }
.prod-fold-head:hover { background: var(--surface-2); }
.prod-fold-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.prod-fold[open] > .prod-fold-head { border-radius: var(--radius) var(--radius) 0 0; }
.prod-fold-chevron { display: inline-flex; color: var(--muted); transition: transform 0.2s; }
.prod-fold-chevron svg { width: 20px; height: 20px; }
.prod-fold[open] .prod-fold-chevron { transform: rotate(180deg); }
.prod-fold-body { padding: 4px 20px 18px; min-width: 0; }
.prod-fold-body > .card-body { padding: 0; }

/* ---------------------------------------------------------------- Tezgah Durumu */
.prod-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.prod-mc {
  --mc-tone: transparent;
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 3px 0 var(--mc-tone);
}
.prod-mc.is-running { --mc-tone: var(--tone-blue); }
.prod-mc.is-maint { --mc-tone: var(--tone-orange); }
.prod-mc.is-broken { --mc-tone: var(--tone-red); }
.prod-mc.is-idle { background: var(--surface-2); }
.prod-mc.is-idle .prod-mc-icon { opacity: 0.7; }
.prod-mc.is-idle .prod-mc-code, .prod-mc.is-idle .prod-mc-name { color: var(--tone-gray-ink); }

.prod-mc-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.prod-mc-icon {
  width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--tone-soft); color: var(--tone);
  display: inline-grid; place-items: center; flex: 0 0 auto;
}
.prod-mc-icon svg { width: 20px; height: 20px; }
.prod-mc-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prod-mc-codeline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.prod-mc-code { font-size: 15px; font-weight: 700; color: var(--heading); white-space: nowrap; }
.prod-mc-codeline > .pill { flex: 0 0 auto; }
.prod-mc-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-mc-type { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-mc-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* Tezgahtaki iş (çalışan ya da sıradaki): iş emrine bağlantı */
a.prod-mc-job {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 44px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.prod-mc.is-running a.prod-mc-job { background: var(--tone-blue-soft); border-color: transparent; }
a.prod-mc-job.is-next { background: var(--panel); border-style: dashed; border-color: var(--line-strong); }
a.prod-mc-job:hover { border-color: var(--line-hover); text-decoration: none; color: var(--ink); }
.prod-mc.is-running a.prod-mc-job:hover { border-color: var(--tone-blue); }
a.prod-mc-job:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prod-mc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.prod-mc-wo { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14px; }
.prod-mc-wo b { color: var(--heading); font-weight: 700; white-space: nowrap; }
.prod-mc-part { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-mc-title { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-mc-op { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--heading); }
.prod-mc-op > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-mc.is-running .prod-mc-op { color: var(--tone-blue); }
.prod-mc.is-running .prod-mc-op .prod-ico { color: var(--tone-blue); }
.prod-mc-wait { font-size: 12px; color: var(--amber-ink); font-weight: 600; }

.prod-mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; min-width: 0; }
.prod-mc-who, .prod-mc-time { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.prod-mc-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; }
.prod-mc-time { flex: 0 0 auto; }
.prod-elapsed { font-weight: 700; color: var(--tone-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Plan doluluğu (çalışma süresi / planlanan süre) */
.prod-plan { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prod-plan-bar { flex: 1 1 auto; height: 6px; min-width: 40px; background: var(--track); border-radius: 999px; overflow: hidden; }
.prod-plan-fill { height: 100%; width: 0; background: var(--tone-blue); border-radius: 999px; transition: width 0.3s ease; }
.prod-plan.is-over .prod-plan-fill { background: var(--tone-orange); }
.prod-plan-text { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-plan.is-over .prod-plan-text { color: var(--tone-orange-ink); font-weight: 600; }

.prod-mc-note {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13px; background: var(--tone-orange-soft); color: var(--tone-orange-ink);
}
.prod-mc-note .prod-ico { color: inherit; margin-top: 2px; }
.prod-mc.is-broken .prod-mc-note { background: var(--tone-red-soft); color: var(--tone-red); }
.prod-mc-empty {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 13px; color: var(--muted);
}
.prod-mc-queue { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- Üretimdeki İşler */
.prod-wo-list { display: flex; flex-direction: column; gap: 12px; }
a.prod-wo {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.1fr) minmax(220px, 1fr);
  grid-template-areas: "main flow now"; gap: 18px; align-items: start; min-width: 0;
  padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s;
}
a.prod-wo:hover { border-color: var(--line-hover); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
a.prod-wo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a.prod-wo.is-late { box-shadow: inset 3px 0 0 var(--tone-red); }
a.prod-wo.is-late:hover { box-shadow: inset 3px 0 0 var(--tone-red), var(--shadow); }
.prod-wo-main { grid-area: main; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prod-wo-flow { grid-area: flow; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prod-wo .prod-now { grid-area: now; }

.prod-wo-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prod-wo-no { font-size: 15px; font-weight: 700; color: var(--heading); white-space: nowrap; margin-right: 2px; }
.prod-wo-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.prod-wo-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

.prod-due { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 2px; }
.prod-due-rel { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--tone-gray-soft); color: var(--tone-gray-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.prod-due.is-gec { color: var(--danger); font-weight: 600; }
.prod-due.is-gec .prod-ico { color: var(--danger); }
.prod-due.is-gec .prod-due-rel { background: var(--tone-red-soft); color: var(--danger); }
.prod-due.is-yakin .prod-due-rel { background: var(--tone-orange-soft); color: var(--tone-orange-ink); }

.prod-wo-progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prod-wo-progress .progress { flex: 1 1 auto; }
.prod-wo-pct { font-size: 13px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.prod-wo-count { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Adım çubuğu (styles.css .stepper): çalışan adımın nabız gölgesi kesilmesin */
.stepper.prod-stepper { padding: 9px 2px 4px; scrollbar-width: thin; }
.prod-stepper .step { min-width: 92px; }
.prod-stepper .step-label { max-width: 100%; font-size: 12px; }   /* etiket kendi adımını aşıp komşusuna binmesin */
.prod-stepper .step-meta { padding: 0 6px; border-radius: 999px; }
.prod-stepper .step.prod-step-hit .step-meta { background: var(--tone-green-soft); color: var(--primary-d); font-weight: 700; }

/* Şu anki / sıradaki operasyon paneli */
.prod-now { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); }
.prod-now.is-running { background: var(--tone-blue-soft); }
.prod-now.is-paused { background: var(--tone-orange-soft); }
.prod-now-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod-now-label { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.prod-now-op { font-size: 14px; font-weight: 700; color: var(--heading); line-height: 1.3; overflow-wrap: anywhere; }
.prod-now.is-none .prod-now-op { font-weight: 500; color: var(--muted); }
.prod-now-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--ink); }
.prod-now-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-now-line .prod-ico svg { width: 14px; height: 14px; }
.prod-now.is-running .prod-now-time .prod-ico { color: var(--tone-blue); }

/* ---------------------------------------------------------------- Planlanan / Bekleyen satırları */
.prod-rows { display: flex; flex-direction: column; gap: 10px; }
a.prod-row {
  display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(0, 1fr) minmax(190px, 0.8fr); gap: 16px; align-items: center;
  min-width: 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
a.prod-row:hover { border-color: var(--line-hover); background: var(--surface-2); text-decoration: none; color: var(--ink); }
a.prod-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a.prod-row.is-late { box-shadow: inset 3px 0 0 var(--tone-red); }
.prod-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prod-row-mid, .prod-row-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.prod-row-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; min-width: 0; }
.prod-row-side .prod-due { margin-top: 0; }
.prod-row-side .prod-wo-progress { width: 100%; }
.prod-hold-reason {
  display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--tone-orange-soft); color: var(--tone-orange-ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere;
}
.prod-hold-reason .prod-ico { color: inherit; margin-top: 2px; }

/* ---------------------------------------------------------------- Son 7 Gün (yönetici) */
.prod-week { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prod-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.prod-mini { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); }
.prod-mini-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.prod-mini-value { font-size: 20px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.prod-mini-sub { font-size: 12px; color: var(--muted); }
.prod-week-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.prod-week-col { min-width: 0; }
.prod-sub-title { margin: 16px 0 10px; font-size: 14px; font-weight: 700; color: var(--heading); }
.prod-util { display: flex; flex-direction: column; gap: 10px; }
.prod-util-row { display: grid; grid-template-columns: minmax(110px, 170px) minmax(60px, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
.prod-util-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; }
.prod-util-name b { color: var(--heading); flex: 0 0 auto; }
.prod-util-name span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-util-val { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.prod-week-table .data-table th { background: var(--surface-2); }
.prod-week-table .data-table td { padding: 10px 12px; }
.prod-week-table .data-table td.cell-strong { white-space: nowrap; }
.prod-week-table .data-table .empty-cell { text-align: center; color: var(--muted); padding: 20px 12px; }
.prod-week-note { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- Duyarlı düzen */
@media (max-width: 1180px) {
  a.prod-wo { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); grid-template-areas: "main now" "flow flow"; gap: 14px; }
  a.prod-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  a.prod-row .prod-row-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  a.prod-row .prod-row-side .prod-wo-progress { width: auto; flex: 1 1 200px; max-width: 320px; }
}
@media (max-width: 1100px) {
  .kpi-grid.prod-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .prod-week-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 640px) {
  .kpi-grid.prod-kpis { gap: 12px; margin-bottom: 12px; }
  .prod-kpis .kpi-card { padding: 14px; }
  .prod-kpis .kpi-value { font-size: 22px; }
  .prod-kpis .kpi-label { font-size: 13px; }
  .prod-content { gap: 12px; }

  .prod-page .page-head .ph-actions { width: 100%; margin-left: 0; }
  .ph-actions .prod-btn { flex: 1 1 auto; min-height: 44px; }

  .toolbar.prod-toolbar { padding: 10px; gap: 8px; margin-bottom: 12px; }
  .prod-toolbar select.prod-machine-select, .prod-toolbar .prod-search { flex: 1 1 100%; min-width: 0; max-width: none; width: 100%; }
  .prod-late-toggle { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .prod-late-toggle input { width: 20px; height: 20px; }
  .prod-clear { flex: 1 1 auto; }
  .prod-toolbar .toolbar-spacer { display: none; }
  .prod-updated-wrap { flex: 1 1 100%; justify-content: space-between; margin-left: 0; }
  .icon-btn.prod-refresh { width: 44px; height: 44px; }

  .prod-section .card-head { padding: 14px 14px 10px; }
  .prod-section .card-body.prod-body { padding: 0 14px 14px; }
  .prod-fold-head { padding: 10px 14px; }
  .prod-fold-body { padding: 4px 14px 14px; }
  .prod-head-extra { width: 100%; }

  .prod-machines { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  a.prod-wo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "now" "flow"; gap: 12px; padding: 14px; }
  .prod-stepper .step { min-width: 78px; }
  .prod-stepper .step-label { font-size: 11px; }
  a.prod-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  a.prod-row .prod-row-side { flex-direction: column; align-items: flex-start; gap: 6px; }
  a.prod-row .prod-row-side .prod-wo-progress { width: 100%; max-width: none; flex: none; }
  .prod-util-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; row-gap: 4px; }
  .prod-util-row .prod-util-name { grid-area: name; }
  .prod-util-row .prod-util-val { grid-area: val; min-width: 0; }
  .prod-util-row .progress { grid-area: bar; }
}
@media (max-width: 380px) {
  .kpi-grid.prod-kpis { grid-template-columns: minmax(0, 1fr); }
  .prod-mini-grid { grid-template-columns: minmax(0, 1fr); }
}