/* TELEFON — OKNO „EDYTUJ PLANY” wg artefaktu v102 (GUI-PLANY, 18.10.2026): nagłówek ze statusem, linia zakresu, kalendarz kratek
   (widok „Kalendarz” harmonogramu), karty konstrukcji z kaflami „Termin” i „Inżynier” + blok BOM, oś na telefonie. Wszystko pod
   :root[data-ui="mobile"] (pionowo: :not([data-telefon-poziomo]); poziomo: [data-telefon-poziomo]). Wzór: okna_css.txt B41b, B43, B44.
   Starsze reguły okna na telefonie: 2b-plany-okno.css; komputer i tablet: 4-widoki/25b-plany-okno.css i 25f-plany-okno-zakladki.css. */
/* --- nagłówek (pionowo): tytuł z podtytułem po lewej, „?” i ✕ po prawej, status pod spodem na całą szerokość --- */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.pln-okno > header { flex-wrap: wrap; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.pln-okno > header > div:first-child { flex: 1 1 0; min-width: 0; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.pln-okno > header > div:first-child p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.pln-okno > header > .pln-sp { display: none; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.pln-okno > header > .dsg-st { order: 3; flex: 1 0 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.pln-okno > header > .dsg-st { flex: none; margin: 0 var(--s-1) 0 0; }
/* przyciski statusu jak we wzorze: napis 13 px (--t-sm), odstęp 3 px, wewnętrzny odstęp 12 px (telefon poziomo: 170 px szerokości całości) */
:root[data-ui="mobile"] .dsg-st > [data-st] { font-size: var(--t-sm); padding: 0 var(--s-3); }
:root[data-ui="mobile"] .dsg-st:has(> [data-st]) { gap: 3px; background: var(--surface-3); }
/* --- status „W toku | Gotowy”: aktywny przycisk w kolorze (akcent / zieleń) jak we wzorze; ogólna reguła telefonu dla .segmented
   (1-podstawa.css: aktywny = biały kafelek) jest silniejsza od 3-komponenty/09-status-seg.css, więc tu to samo z wyższą wagą --- */
:root[data-ui="mobile"] .dsg-st > [data-st="W toku"][aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
:root[data-ui="mobile"] .dsg-st > [data-st="Gotowy"][aria-pressed="true"] { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
/* --- „Uwagi i pliki”: nagłówek karty bez dopisku (jak „Opis i pliki” w Design) --- */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-uw > h3 > small { display: none; }
/* --- zakres planów: bez dopisku „wynika z terminów”, zwarte --- */
:root[data-ui="mobile"] .pln-zr { padding: var(--s-2) var(--s-3); gap: var(--s-1) var(--s-3); }
:root[data-ui="mobile"] .pln-zr small { display: none; }
/* --- chipy inżynierów i oś: kółka 32 px w kolumnie 44 px --- */
:root[data-ui="mobile"] .pln-har .dsg-zav-w { gap: var(--s-2); }
:root[data-ui="mobile"] .pln-har .pos-lo .avatar.pln-aw { --avatar-d: 32px; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-har.w-os .pln-onar { display: flex; }
:root[data-ui="mobile"] .pln-onar .pln-seg button { padding: 0 var(--s-3); }
/* --- kalendarz kratek: jedna kratka = jeden dzień roboczy (B43) --- */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kh { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; padding: var(--s-2) var(--s-3) 0; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-faint); font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kh > span { overflow: hidden; white-space: nowrap; border-left: 2px solid var(--line); padding-left: var(--s-1); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; height: 26px; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk i { display: grid; place-items: center; border-radius: 4px; background: var(--surface-3); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-bold); line-height: 1; color: var(--text-faint); font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk.gesta i { font-size: 0; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk i.w1 { background: color-mix(in srgb, var(--surface-3) 70%, var(--surface)); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk i.on { background: var(--accent); color: var(--on-accent); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk.rob i.on { background: repeating-linear-gradient(135deg, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 35%, var(--surface)) 4px 8px); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk.inne i.on { background: color-mix(in srgb, var(--etap-design) 55%, var(--surface)); color: var(--text); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk i.dz { box-shadow: inset 0 -4px 0 var(--text); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-dk i.dz.on { box-shadow: inset 0 -4px 0 var(--on-accent); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-lo .pln-kh + .pln-lw { border-top: 0; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-lw { min-height: 64px; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-lt b { font-size: var(--t-md); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-lt small { font-size: var(--t-sm); color: var(--text-muted); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-lw.inne .pln-lt b { font-size: var(--t-base); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-pod-l b { color: var(--text); }
/* --- zakładka „Konstrukcje” (pionowo): karta konstrukcji — nagłówek, dwa kafle (Termin | Inżynier), BOM w dwóch wierszach (B44) --- */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-tab { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-w { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); width: 100%; box-sizing: border-box; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-w:last-child { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-n { justify-content: flex-start; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-nzw b { font-size: var(--t-md); font-weight: var(--w-strong); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sumw { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-2); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sumw > .pln-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l l" "v i" "s s"; align-items: center; justify-items: start; gap: 2px var(--s-2); min-height: 64px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sum .pln-sl { grid-area: l; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-faint); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sum > b, :root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sum .pln-si { grid-area: v; min-width: 0; font-size: var(--t-base); font-weight: var(--w-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sum .pln-si { display: flex; align-items: center; gap: var(--s-2); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sum .pln-si b { overflow: hidden; font-size: var(--t-base); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sum > small { grid-area: s; max-width: 100%; overflow: hidden; font-size: var(--t-xs); color: var(--text-faint); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-sum > .icon { grid-area: i; justify-self: end; width: 14px; height: 14px; color: var(--text-faint); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-bom { padding-top: var(--s-3); border-top: 1px solid var(--line); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-bp > span { font-size: var(--t-sm); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-kon .pln-ba .pln-btn { flex: 1 1 0; min-width: 0; }
/* --- pole wiadomości w czacie planów: róg 8 px jak pole wzoru (.ui-ed); ogólna reguła czatu na telefonie daje 16 px (4-projekty-zadania-czat.css).
   Wysokość 62 px zostaje — mieści kółko „Wyślij” 44 px (we wzorze „Wyślij” to osobny przycisk). --- */
:root[data-ui="mobile"] .pln-czat .project-chat-compose .rich-editor { border-radius: var(--r-sm); }