/* ── Arkusz: karta zlecenia (D) — overlay z pełnym dossier ── */
#detail .dt-scrim { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:84; }
.dt-panel { position:fixed; top:0; right:0; bottom:0; width:var(--dt-w); max-width:94vw; background:var(--surface);
  border-left:1px solid var(--border); z-index:85; display:flex; flex-direction:column;
  box-shadow:-18px 0 50px rgba(0,0,0,.55); }
.dt-panel.anim { animation:dt-in .16s ease-out; }
/* PRZYPIĘTA (📌): bez przyciemnienia, panel siada pod topbarem i ściska scenę zamiast ją zasłaniać */
body.docked .dt-panel { top:48px; box-shadow:none; }
body.docked #stage { padding-right:var(--dt-w); }
body.docked #detail .dt-scrim { display:none; }
.dt-pin { color:var(--muted); font-size:13px; padding:2px 7px; border-radius:6px; line-height:1.4;
  border:1px solid transparent; }
.dt-pin:hover { color:var(--ink); background:rgba(255,255,255,.07); }
.dt-pin.on { color:var(--accent); border-color:rgba(57,135,229,.5); background:rgba(57,135,229,.12); }
@keyframes dt-in { from { transform:translateX(26px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .dt-panel { animation:none; } }
.dt-head { padding:12px 16px 10px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:7px; }
.dt-title { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dt-title .sp { flex:1; }
.dt-title b { font-size:16px; }
.dt-title .oid { color:var(--muted); font-weight:600; }
.dt-close { color:var(--muted); font-size:16px; padding:2px 8px; border-radius:6px; }
.dt-close:hover { color:var(--ink); background:rgba(255,255,255,.07); }
.dt-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:11px; color:var(--ink2); }
.dt-actions { display:flex; gap:8px; margin-top:2px; }
.dt-body { flex:1; overflow-y:auto; padding:2px 16px 22px; }
.dt-sec { margin-top:15px; }
.dt-sechead { color:var(--muted); font-size:10px; letter-spacing:.09em; font-weight:800;
  border-bottom:1px solid var(--border); padding-bottom:4px; margin-bottom:5px; }
.dt-row { display:grid; grid-template-columns:132px 1fr; gap:10px; padding:4px 0; font-size:12.5px;
  align-items:baseline; border-bottom:1px solid rgba(255,255,255,.04); }
.dt-row > span:first-child { color:var(--muted); font-size:10.5px; letter-spacing:.03em; }
.dt-row b { font-weight:600; overflow-wrap:anywhere; }
.dt-total { font-size:17px; font-weight:800; color:var(--ink); }
.dt-input { width:86px; background:var(--track); border:1px solid var(--border); border-radius:7px;
  color:var(--ink); padding:4px 8px; font:inherit; font-size:12.5px; font-variant-numeric:tabular-nums; }
.dt-input:focus { outline:1px solid var(--accent); }
textarea.dt-note { width:100%; min-height:60px; background:var(--track); border:1px solid var(--border);
  border-radius:8px; color:var(--ink); padding:8px 10px; font:inherit; font-size:12.5px; resize:vertical; }
textarea.dt-note:focus { outline:1px solid var(--accent); }
/* kolory jako lista stacji: siatka auto-fill — sama dobiera liczbę kolumn (przy 540 px panelu
   wychodzą 3), a minmax pilnuje, żeby długie nazwy typu „UV BŁYSK Z WYB." nigdy się nie ucięły */
.stations { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:4px; margin-top:3px; }
.st { display:flex; align-items:center; gap:7px; padding:4px 8px; border-radius:6px;
  background:rgba(255,255,255,.035); font-size:11.5px; min-width:0; }
.st-n { color:var(--muted); font-size:9.5px; font-weight:800; min-width:13px; text-align:right; flex:0 0 auto; }
.st .cs { width:14px; height:14px; border-radius:4px; }
.st-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-role { margin-left:auto; flex:0 0 auto; color:var(--muted); font-size:8.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; }
.st.aux { background:rgba(250,178,25,.06); }
.dt-hist { width:100%; border-collapse:collapse; font-size:12px; }
.dt-hist th { color:var(--muted); font-size:9.5px; letter-spacing:.06em; text-align:left; padding:2px 8px 4px 0; }
.dt-hist td { padding:3px 8px 3px 0; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; }
.editedmark { color:var(--warn); font-style:normal; }
.dt-empty { color:var(--muted); font-size:12px; padding:3px 0; }


/* dopiski w karcie zlecenia — kontekst przy liczbie, wyciszony żeby nie konkurował z wartością */
.dt-dim { color:var(--muted); font-weight:600; font-size:11px; margin-left:6px; }