/* Broniarz - Etap 3: pulpit (PulpitWeb.dc), statystyki, „Rok w liczbach", „Do uzupełnienia", koszt broni. */

/* Podpis tabeli w ramce - jak „Ostatnie sesje" na projekcie */
.tytul-tabeli {
  caption-side: top; text-align: left; padding: 16px 20px 6px;
  font-family: var(--font-naglowek); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tekst);
}

/* Wykres słupkowy z samego CSS: 12 miesięcy, bieżący w kolorze akcentu */
.wykres-slupki {
  display: flex; align-items: stretch; gap: 6px; height: 180px; margin: 6px 0 12px;
  border-bottom: 1px solid var(--ramka); padding-bottom: 4px;
}
.wykres-slupki-niski { height: 120px; }
.slupek { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.slupek-pasek { width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; background: var(--ramka-mocna); }
.slupek-teraz .slupek-pasek { background: var(--akcent); }
.slupek-etykieta { font-size: .7rem; color: var(--tekst-3); }
.slupek-teraz .slupek-etykieta { color: var(--tekst); font-weight: 600; }
.slupek-wartosc { font-family: var(--font-liczby); font-size: .65rem; color: var(--tekst-2); white-space: nowrap; }
@media (max-width: 600px) {
  .wykres-slupki { gap: 3px; }
  .slupek-wartosc { display: none; }    /* na telefonie liczby nad słupkami się nie mieszczą - są w title */
}

/* Podział wydatków: „62% amunicja · 21% sprzęt" */
.podzial { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .85rem; color: var(--tekst-2); }
.podzial strong { font-family: var(--font-liczby); color: var(--tekst); }

/* Rozliczenie (ile kosztowała broń): pozycje + suma pod kreską */
.rozliczenie > li { min-height: 0; padding: 10px 0; }
.rozliczenie > li.suma { border-top: 2px solid var(--ramka-mocna); border-bottom: 0; font-weight: 700; }
.rozliczenie > li.suma .liczba { font-size: 1.25rem; color: var(--mosiadz); }

/* Pulpit */
.pulpit-naglowek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 4px 0 16px; }
.pulpit-naglowek h1 { margin: 2px 0 0; }
.do-uzupelnienia {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 16px;
  color: var(--tekst); text-decoration: none;
}
.do-uzupelnienia > span:first-child { display: flex; flex-direction: column; }
.do-uzupelnienia:hover { border-color: var(--akcent); text-decoration: none; }
.akcent { color: var(--akcent); font-weight: 600; white-space: nowrap; }
.nowa-sesja {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--tekst);
  border-color: color-mix(in srgb, var(--akcent) 45%, var(--ramka));
}
.nowa-sesja strong { font-size: 1.15rem; color: var(--akcent); }
.nowa-sesja:hover { border-color: var(--akcent); text-decoration: none; }
.siatka-szeroka { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pasek-szafy { margin-bottom: 12px; }
.pasek-szafy:last-child { margin-bottom: 0; }
.pasek-szafy .pasek-postepu { height: 8px; margin-top: 6px; }
.pasek-szafy .pasek-postepu > span { background: var(--ok); }
.pasek-szafy .pasek-konczy-sie > span { background: var(--uwaga); }

/* Rok w liczbach - strona do pokazania ekipie */
.rok-w-liczbach { max-width: 720px; }
.rok-naglowek { margin-bottom: 8px; }
.rok-naglowek h1 { margin: 2px 0 0; font-size: clamp(2rem, 7vw, 3.2rem); text-transform: uppercase; line-height: 1; }
.rok-glowna { text-align: center; padding: 18px 0 22px; }
.rok-glowna .duza-liczba { font-family: var(--font-naglowek); font-size: clamp(4rem, 18vw, 7rem); line-height: .9; color: var(--mosiadz); }
.rok-glowna .pigulka { margin-left: 6px; vertical-align: middle; }
.rok-fakty .rozciagnij { display: flex; flex-direction: column; gap: 2px; }
.rok-fakty .etykieta { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--mosiadz); }

/* Do uzupełnienia: jedna pozycja = opis + jedno pole + Zapisz/Pomiń */
.zaleglosci > li { display: block; padding: 12px 0; }
.zaleglosc-formularz { display: grid; gap: 8px; }
.zaleglosc-opis { line-height: 1.4; }
.zaleglosc-pole { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zaleglosc-pole input, .zaleglosc-pole select {
  flex: 1 1 120px; min-width: 0; min-height: var(--dotyk-maly); padding: 0 12px;
  background: var(--tlo); color: var(--tekst); border: 1.5px solid var(--ramka-mocna); border-radius: var(--promien);
  font: inherit;
}
.zaleglosc-pole input:focus, .zaleglosc-pole select:focus { border-color: var(--akcent); outline: none; }
.zaleglosc-gotowa { display: flex !important; align-items: center; gap: 10px; color: var(--ok-jasny); }
.znak-ok { font-weight: 700; }
.blad-pola { margin: 0; color: var(--blad-jasny); font-size: .85rem; }

/* Kafle z kwotami na wąskim ekranie: dwie kolumny po ~170 px - liczba nie może wyjść poza ramkę */
.kafle .kafel-liczby { min-width: 0; }
.kafle .kafel-liczby .liczba { font-size: clamp(.95rem, 4.2vw, 1.5rem); white-space: nowrap; }

/* Pilnuję za Ciebie: stan w normie na zielono, do zrobienia - kolorem problemu (ocena-problem) */
.stan-ok { color: var(--ok-jasny); }
.stan-uwaga { color: var(--uwaga); font-weight: 600; }
.pilnuje .lista > li { min-height: 0; padding: 10px 0; }
.pilnuje .lista .liczba { white-space: nowrap; font-size: .95rem; }

/* Okazje (Etap 6): cena za sztukę na wierzchu, cena opakowania i przekreślona pod spodem */
.okazje .okazja-cena { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }

/* Dzwoneczek „Alerty" (nagłówek telefonu + menu komputera) */
.dzwonek { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--tekst-2); text-decoration: none;
  min-width: var(--dotyk-maly); min-height: var(--dotyk-maly); justify-content: center; }
.dzwonek.menu-przycisk { justify-content: flex-start; }
.dzwonek:hover { color: var(--tekst); text-decoration: none; }
.dzwonek.ma-sprawy { color: var(--akcent); }
/* Liczba w prawym górnym rogu SAMEJ ikony (Seba 10.10) - liczona od ikony, nie od całego przycisku z napisem. */
.dzwonek-ikona { position: relative; display: inline-flex; }
.dzwonek-licznik {
  position: absolute; top: -7px; left: calc(100% - 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--akcent); color: var(--akcent-tekst, #fff); font: 700 .7rem/18px var(--font-liczby); text-align: center;
}
.sprawa-pilna { border-color: var(--blad); color: var(--blad-jasny); }
.dzwonek.menu-przycisk .dzwonek-ikona { margin-right: 8px; }   /* liczba wystaje w prawo - nie na napis */

/* Okazje jako tabela (Seba 10.10): podpisy kolumn nad listą, podziałki między wierszami,
   [amunicja · sklep · kaliber] [cena] [gwiazdka - śledź | dzwonek - alert] - akcje zawsze po prawej. */
.okazje-tabela { padding: 0; overflow: hidden; }
.okazje-naglowek, .okazje-tabela .lista.okazje > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; align-items: center; gap: 12px; padding: 12px 16px;
}
.okazje-naglowek {
  padding-block: 10px; background: var(--tlo-3); border-bottom: 1px solid var(--ramka-mocna);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3);
}
.okazje-naglowek > span:nth-child(2) { text-align: right; }
.okazje-naglowek-akcje { text-align: center; }
.okazje-tabela .lista.okazje > li { border-bottom: 1px solid var(--ramka); min-height: 0; }
.okazje-tabela .lista.okazje > li:last-child { border-bottom: 0; }
.okazje-tabela .lista.okazje > li:first-child { padding-top: 12px; }
.okazje-tabela .lista.okazje > li.sledzona { background: color-mix(in srgb, var(--mosiadz) 7%, transparent); }
.akcje-oferty { display: flex; justify-content: flex-end; gap: 4px; }
.akcje-oferty form { margin: 0; }
.oferta-przelacznik {
  inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--tekst-3); cursor: pointer;
}
.oferta-przelacznik:hover { color: var(--tekst); background: var(--tlo-3); }
.oferta-przelacznik.gwiazdka.wlaczona { color: var(--mosiadz); }
.oferta-przelacznik.dzwonek.wlaczona { color: var(--akcent); }
.oferta-przelacznik:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
@media (max-width: 560px) {
  .okazje-naglowek, .okazje-tabela .lista.okazje > li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .okazje-naglowek-akcje { display: none; }
  .okazje-tabela .akcje-oferty { grid-column: 1 / -1; justify-content: flex-end; margin: -6px -8px -6px 0; }
}

/* Alerty: dwie sekcje (Moje konto / Alerty cenowe), liczba w pigułce przy tytule. */
.sekcja-alertow .naglowek-karty { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sekcja-alertow .naglowek-karty h2, .sekcja-alertow .naglowek-karty h3 { margin: 0; }
.sekcja-alertow .podsekcja { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ramka); }
.sekcja-alertow .do-uzupelnienia { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ramka); border-radius: 12px; text-decoration: none; color: var(--tekst); }
.sekcja-alertow .do-uzupelnienia > span:first-child { display: grid; }
.sprawa-cena { border-color: var(--akcent); color: var(--akcent-jasny); }