/* Studio: tylko to, czego nie ma w klockach z app.css (rachunek zlecenia, drobne poprawki). */

/* Wyliczenie kwot jak rachunek w PayPalu */
.rachunek { margin: 0; max-width: 380px; }
.rachunek > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rachunek dt { color: var(--muted); font-size: 13.5px; }
.rachunek dt small { color: var(--faint); margin-left: 6px; }
.rachunek dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rachunek .suma dt { color: var(--text); font-weight: 600; }
.rachunek .suma dd { font-weight: 700; font-size: 16px; }

/* Szybkie akcje to formularz, a „Więcej” to menu w tym samym rzędzie */
/* „Więcej” wygląda jak sąsiednie szybkie akcje: na komputerze pigułka z app.css (`.akcja`), na telefonie kółko
   z podpisem pod spodem (plan 71–73, Franek 1.10: „przycisk więcej źle wygląda”). */
@media (max-width: 760px) {
  form.szybkie-akcje { align-items: flex-start; }
  .szybkie-akcje .menu-akcji > summary { display: grid; justify-items: center; gap: 7px; width: 64px; font-size: 12px; font-weight: 500; color: var(--muted); text-align: center; }
  .szybkie-akcje .menu-akcji > summary .kolo { width: 50px; height: 50px; border: 1px solid var(--line); color: var(--text); }
}
.szybkie-akcje .menu-akcji-lista { left: 0; right: auto; }

/* Akcje pod szczegółem */
.akcje-rekordu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.akcje-rekordu form { margin: 0; }
.powiazania { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 20px; font-size: 13.5px; color: var(--muted); }
.powiazania a { color: var(--text); }

/* Tabela: nazwa może być długa */
.tabela td.nazwa { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela td.wyciszone { color: var(--faint); }

/* Szukajka klientów */
.szukaj-klient { display: flex; gap: 8px; align-items: center; }
.szukaj-klient input { width: 240px; max-width: 100%; }
.pole-dodaj { margin-bottom: 20px; }
@media (max-width: 760px) { .szukaj-klient { width: 100%; } .szukaj-klient input { width: 100%; } }
input[type=time], input[type=number] { color-scheme: dark; }
.zdanie .po-terminie { white-space: nowrap; }

/* Długi tytuł zlecenia zawija się zamiast się ucinać */
.tytul-wiele { font-size: 21px !important; line-height: 1.3 !important; resize: none; overflow: hidden; field-sizing: content; min-height: 2.6em; }

.check-lista { display: grid; gap: 10px; padding: 4px 0 0; }

/* ---------- Kolory i sekcje (29.09 wieczorem): kolor z var(--k) elementu z klasą barwa(...) ---------- */
.st-kwota { font-variant-numeric: tabular-nums; }
.st-kwota.k { color: var(--k); }
.rachunek dd.st-kwota { font-weight: 600; }

/* Select w kolorze wybranej opcji (status, rodzaj) */
.wl-wartosc > select.st-wybor { width: auto; max-width: 100%; margin-left: -2px; padding: 3px 26px 3px 22px; border-radius: 6px; font-weight: 500; font-size: 13px; color: var(--text); background: radial-gradient(circle at 11px 50%, var(--k) 3px, transparent 3.5px) no-repeat, var(--chip); border-color: transparent; }
.wl-wartosc > select.st-wybor:hover { background-color: var(--sel); }
.wl-wartosc > select.st-wybor option { color: var(--text); background: var(--surface); font-weight: 500; }
.wl-wartosc .tag { vertical-align: middle; }

/* Tabela w panelu */
.panel .tabela th { background: var(--surface); }
.panel .tabela-wrap { margin: 0 -8px; }
.tabela .tag { line-height: 19px; font-size: 11.5px; }

/* Rachunek i akcje w panelach */
.panel .rachunek { max-width: none; }
.przycisk .i, .akcje-rekordu .link .i { width: 15px; height: 15px; }
.akcje-rekordu .link { display: inline-flex; align-items: center; gap: 6px; }
.panel .formularz.waski { max-width: 420px; }
.panel .cichy { display: flex; align-items: center; gap: 6px; }

/* ---------- Statystyki (plan 69): słupki z divów, kolor tylko z tokenów, liczby tabelaryczne ---------- */
.stat-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.stat-szeroki { grid-column: 1 / -1; }
.stat-panel { font-variant-numeric: tabular-nums; }
.stat-liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 4px 0 10px; }
.stat-liczby-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-liczby div { min-width: 0; }
.stat-liczby dt { font-size: 12px; color: var(--faint); margin: 0 0 2px; }
.stat-liczby dd { margin: 0; font: 600 18px/1.2 var(--font-naglowek, var(--font)); color: var(--text); letter-spacing: -0.01em; }
.stat-liczby dd small { display: block; margin-top: 2px; font: 12px/1.3 var(--font); color: var(--faint); font-weight: 400; }
.stat-liczby dd.po-terminie { color: var(--red); }
.stat-wiersze { list-style: none; margin: 0; padding: 0; }
.stat-wiersze li { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.stat-wiersze li:first-child { border-top: 0; }
.stat-naz { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.stat-naz a { color: inherit; text-decoration: none; }
.stat-naz a:hover { color: var(--accent-text); }
.stat-kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--line-strong)); flex: none; }
.stat-slupek { display: block; height: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.stat-slupek i { display: block; width: var(--w, 0%); height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s var(--ease); }
.stat-slupek-duzy { height: 10px; margin: 4px 0 6px; }
.stat-wart { text-align: right; white-space: nowrap; font-weight: 500; color: var(--text); }
.stat-wart small { display: block; font-size: 11.5px; font-weight: 400; color: var(--faint); white-space: normal; }
.stat-zdanie { margin: 2px 0 8px; font-size: 13.5px; color: var(--muted); }
.stat-legenda { display: flex; gap: 14px; margin: 6px 0 2px; font-size: 12px; color: var(--faint); }
.stat-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.stat-legenda i { width: 10px; height: 6px; border-radius: 3px; }
.stat-miesiace { list-style: none; margin: 4px 0 0; padding: 0; }
.stat-miesiace li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.stat-miesiace li:first-child { border-top: 0; }
.stat-m-nazwa { color: var(--muted); white-space: nowrap; }
.stat-m-slupki { display: grid; gap: 3px; }
.stat-m-slupki i, .stat-legenda .stat-m-kwota, .stat-legenda .stat-m-liczba { display: block; height: 6px; border-radius: 999px; }
.stat-m-slupki i { width: var(--w, 0%); min-width: 2px; transition: width .4s var(--ease); }
.stat-m-kwota { background: var(--accent); }
.stat-m-liczba { background: var(--line-strong); height: 4px; }
.stat-m-wart { text-align: right; white-space: nowrap; font-weight: 500; }
.stat-m-wart small { display: block; font-size: 11.5px; font-weight: 400; color: var(--faint); }
.stat-dni { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; padding: 0; height: 84px; align-items: end; }
.stat-dni li { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; height: 100%; gap: 2px; }
.stat-dni i { align-self: end; width: 70%; height: var(--w, 0%); min-height: 2px; border-radius: 4px 4px 2px 2px; background: var(--accent); }
.stat-dni b { font-size: 12px; font-weight: 500; color: var(--text); min-height: 14px; }
.stat-dni span { font-size: 11px; color: var(--faint); }
.stat-pory li { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto; }
@media (max-width: 900px) {
  .stat-siatka { grid-template-columns: 1fr; }
  .stat-liczby, .stat-liczby-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-wiersze li { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; }
}