/*
 * tematy.soltum.app — wygląd = wygląd JustSales (CRM SOLTUM) i portalu windykatora
 * (cok.soltum.app): AdminLTE 3.2 + Bootstrap 5 + FontAwesome. Decyzja Mateusza 2026-09-18.
 *
 * 🔴 Tu są TYLKO nadpisania. Układ strony (pasek boczny, górny navbar, content-wrapper)
 * należy do AdminLTE — poprzednia wersja tego pliku rysowała własny ciemny sidebar
 * selektorem `.sidebar`, a AdminLTE ma pod tą samą nazwą swój wewnętrzny kontener.
 * Zostawienie tamtych reguł rozsypywało menu. Jak dokładasz styl: sprawdź najpierw,
 * czy AdminLTE nie ma już gotowej klasy (card, info-box, small-box, badge, table).
 *
 * Kolejność ładowania (baza.html): Bootstrap → AdminLTE → FontAwesome → ten plik.
 * AdminLTE dowozi też utility Bootstrapa 4 (ml-auto, float-right, font-weight-bold),
 * więc w szablonach używamy nazw BS4 — tak samo jak JustSales.
 */

html, body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

a, .btn-link { color: #0071c1; }
.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }

.content { padding-top: 1.1rem; }
.content-header h1 { font-size: 1.6rem; font-weight: 600; }
.content-header .podtytul { color: #6c757d; font-size: .82rem; margin-top: .15rem; }
.content-header .podtytul:empty { display: none; }

/* ── Marka w pasku bocznym ──────────────────────────────────────────────────
   Logo w wersji jasnej (napis i „S" białe, sygnet pomarańczowy) siedzi na ciemnym
   tle bez białej podkładki — ta wyglądała jak naklejka. Wysokość wyrównana do navbara. */
.brand-link { display: flex !important; align-items: center; justify-content: center;
  height: 57px; padding: .5rem 1rem; }
.brand-link img { max-height: 34px; width: auto; }

/* Awatar z inicjałem w `user-panel` — AdminLTE oczekuje tu zdjęcia, my mamy literę. */
.user-panel { border-bottom: 1px solid rgba(255,255,255,.1); }
.user-panel .image { display: inline-block; padding-left: .8rem; }
.awatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: #007bff; color: #fff; font-weight: 700; font-size: .95rem; }
.user-panel .info { padding: 5px 5px 5px 10px; line-height: 1.2; }

.nav-sidebar .nav-header { letter-spacing: .06em; font-size: .72rem; color: rgba(255,255,255,.45); }

/* ── Logowanie ────────────────────────────────────────────────────────────── */
.login-page { background: radial-gradient(circle at 50% 0%, #16375f 0%, #0e2a4d 45%, #091c35 100%); }
.login-logo img { max-width: 220px; height: auto; }
.login-page .card { box-shadow: 0 1rem 2.5rem rgba(0,0,0,.35); border: 0; border-radius: .5rem; }
.login-card-body { border-radius: .5rem; padding: 1.75rem; }

q { font-style: italic; color: #444; }
.szept, .szary { color: #6c757d; font-size: .8rem; font-weight: 400; }
.czerw { color: #dc3545; }

/* Komunikat po staremu wołany `.flash` — dziś to alert AdminLTE. */
.flash { background: #f8d7da; border: 1px solid #f5c2c7; color: #842029;
  border-radius: .25rem; padding: .75rem 1.25rem; margin: 0 0 1rem; }

/* ── `info-box` AdminLTE ──────────────────────────────────────────────────── */
/* Liczba nad podpisem (AdminLTE domyślnie odwrotnie) — Mateusz czyta najpierw liczbę. */
.info-box-number { font-size: 1.6rem; line-height: 1.1; }
/* 🔴 AdminLTE ucina podpisy wielokropkiem (`nowrap` + `text-overflow`), przez co
   „> 48 h rob. bez kontaktu" robiło się „> 48 h rob. …". Nasze podpisy MUSZĄ się zawijać —
   bez nich liczba nic nie znaczy. Wyrównana wysokość, żeby rząd kafli nie skakał. */
/* Selektor MUSI być `.info-box .info-box-text` — sam `.info-box-text` przegrywa
   z regułą AdminLTE i „złamane obietnice" dalej zostawało jako „złamane obiet…". */
.info-box .info-box-text, .info-box .progress-description { white-space: normal; overflow: visible; }
.info-box .info-box-text { font-size: .82rem; }
.info-box .progress-description { font-size: .72rem; line-height: 1.25; }
.row > [class*="col"] > .info-box { height: calc(100% - 1rem); }
.info-box.alarm { background: #fdf3f4; }
/* Kafel-odnośnik (złamane obietnice) — ma nie wyglądać jak link, tylko jak kafel. */
a.info-box, a.info-box:hover { color: inherit; text-decoration: none; }
a.info-box:hover { box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.25); }

/* ── Tabele ───────────────────────────────────────────────────────────────────
   Ekrany przerobione na AdminLTE mają `<table class="table table-hover">` i wtedy
   wygląd daje Bootstrap — nic tu nie dokładamy. Reguły niżej dotyczą WYŁĄCZNIE
   tabel jeszcze nieprzerobionych (`table:not(.table)`), żeby jedno nie nadpisywało
   drugiego. Przerabiając kolejny ekran: dopisz klasy i te reguły przestaną go dotyczyć. */
table:not(.table) { width: 100%; border-collapse: collapse; font-size: .875rem; }
table:not(.table) th { text-align: left; padding: .5rem .55rem; font-weight: 600; color: #6c757d;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid #dee2e6; }
table:not(.table) td { padding: .55rem; border-top: 1px solid #dee2e6; vertical-align: middle; }
table:not(.table) tbody tr:hover td { background: rgba(0,0,0,.02); }

/* Wspólne dla obu rodzajów tabel — układ treści, nie wygląd ramek. */
td.n, th.n { text-align: right; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; }
.table td, .table th { vertical-align: middle; }
td.osoba { white-space: nowrap; }
tr.zle td, tr.zle:hover td { background: #fdf3f4; }
tr.ok td, tr.ok:hover td { background: #f3f9f5; }
tr.nieb td, tr.nieb:hover td { background: #f2f7fd; }
tr.szara td { color: #adb5bd; }
tr.pierwsza td, tr.pierwsza:hover td { background: #fdf9ee; }
.przewijalne { max-height: 420px; overflow-y: auto; }

/* Kwoty (flaga) — wyróżnienie progami, tak jak w wizualizacji. */
.kw-100 { color: #d92d20; font-weight: 700; }
.kw-mid { color: #c2410c; font-weight: 700; }
.kw-50  { color: #d97706; font-weight: 700; }
.kw-brak { color: #2c3140; font-weight: 700; }
.kw-crm { font-weight: 700; }

/* ── Znaczniki stanu ──────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .25em .7em; border-radius: 999px; font-size: .75rem;
  font-weight: 600; white-space: nowrap; }
.badge.b-czerw { background: #f8d7da; color: #b02a37; }
.badge.b-zolty { background: #fff3cd; color: #997404; }
.badge.b-nieb  { background: #cfe2ff; color: #0a58ca; }
.badge.b-ziel  { background: #d1e7dd; color: #0f5132; }
.badge.b-szary { background: #e9ecef; color: #495057; }

.aw-mini { display: inline-flex; width: 27px; height: 27px; border-radius: 50%; color: #fff;
  background: #6c757d; align-items: center; justify-content: center; font-size: .66rem;
  font-weight: 700; margin-right: 8px; vertical-align: middle; }

.pasek { display: inline-block; width: 84px; height: 6px; background: #e9ecef; border-radius: 999px;
  vertical-align: middle; margin-left: 8px; overflow: hidden; }
.pasek i { display: block; height: 100%; background: #dc3545; border-radius: 999px; }
.pasek.z i { background: #198754; }

/* Alerty na pulpicie — wiersze, nie żółte pudełka. */
.alert-box { display: flex; gap: 12px; align-items: baseline; border-top: 1px solid #dee2e6;
  padding: .5rem .25rem; font-size: .85rem; flex-wrap: wrap; }
.alert-box:first-of-type { border-top: 0; }
.alert-box b { color: #212529; }
.alert-box .szept:last-child { margin-left: auto; }

/* ── Filtry i formularze ──────────────────────────────────────────────────── */
/* 🔴 Wszystko poniżej celowo omija `.form-control` i `.btn`: stare ekrany mają gołe
   <input>/<button>, nowe (logowanie) używają klas Bootstrapa. Bez `:not(...)` reguła
   dla gołego <input> rozjeżdżała `input-group` na stronie logowania. */
.filtry { display: flex; gap: .6rem; margin: 0 0 1rem; flex-wrap: wrap; }
select:not(.form-control), input:not(.form-control) { padding: .375rem .75rem;
  border: 1px solid #ced4da; border-radius: .25rem; background: #fff; font-size: .875rem;
  font-family: inherit; color: #495057; }
input:not(.form-control) { width: 100%; margin-top: 3px; }
select:not(.form-control):focus, input:not(.form-control):focus { outline: 0;
  border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); }
.filtry select { width: auto; margin: 0; }
.filtry label.filtr-data { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .8rem; }
.filtry input[type="date"] { width: auto; margin: 0; }
.filtry a.przycisk { align-self: center; }
label { display: block; font-size: .8rem; color: #6c757d; margin: .45rem 0; }
button:not(.btn) { margin-top: .5rem; padding: .375rem 1rem; border: 1px solid #1861ac;
  border-radius: .25rem; background: #1b6ec2; color: #fff; font-size: .875rem; font-weight: 500;
  cursor: pointer; font-family: inherit; }
button:not(.btn):hover { background: #1861ac; }
/* Formularze akcji na karcie leada siedzą już w `card-body`, więc zamiast własnego
   pudełka z cieniem (pudełko w pudełku) rozdziela je tylko kreska. */
.akcje form { padding: .75rem 0; border-top: 1px solid #e9ecef; margin: 0; }
.akcje form:first-child { border-top: 0; padding-top: 0; }
.akcje .form-group { margin-bottom: .5rem; }
.akcje label { margin-bottom: .15rem; }
form.wiersz { display: inline; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
form.wiersz select { width: auto; margin: 0; padding: .15rem .5rem; font-size: .8rem; }

@media (max-width: 1150px) {
  .dwie-kolumny,   .kafle { grid-template-columns: repeat(2, 1fr); }
}

.werdykt td:first-child { width: 180px; color: #6c757d; }

/* ── Transkrypt ───────────────────────────────────────────────────────────── */
/* Transkrypt siedzi w `card-body`, więc nie dokłada własnego tła ani cienia — pudełko
   w pudełku. Zostaje tylko układ wypowiedzi. */
.transkrypt { max-width: 980px; }
.wypowiedz { display: grid; grid-template-columns: 46px 105px 1fr; gap: 10px; padding: .3rem .5rem;
  border-radius: .25rem; }
.wypowiedz .czas { color: #adb5bd; font-size: .75rem; font-variant-numeric: tabular-nums; }
.wypowiedz .rola { font-size: .66rem; font-weight: 700; letter-spacing: .03em; }
.wypowiedz.handlowiec { background: #f2f7fd; } .wypowiedz.handlowiec .rola { color: #0a58ca; }
.wypowiedz.klient { background: #fdf9ee; } .wypowiedz.klient .rola { color: #997404; }
.wypowiedz.inna .rola { color: #6c757d; }

audio { height: 30px; max-width: 320px; margin-top: 5px; display: block; }

/* Lista zaznaczeń przy przydziale trenera (Ustawienia). Kolumny, żeby dziesięciu
   handlowców mieściło się bez przewijania całej strony. */
.lista-zaznaczen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .25rem .75rem; margin: .35rem 0 .6rem; max-height: 16rem; overflow-y: auto;
  padding: .5rem; border: 1px solid #dee2e6; border-radius: .25rem; }
.lista-zaznaczen .ptaszek { display: flex; align-items: center; gap: .45rem; font-weight: 400;
  margin: 0; cursor: pointer; font-size: .92rem; }
.lista-zaznaczen .ptaszek input { width: auto; margin: 0; }

/* ZALOGA (2026-09-20) — wiersz z alarmem. Delikatne tlo, nie krzyk: przy czterech
   powodach czerwieni naraz mocny kolor zamienilby tabele w plame i przestalby cokolwiek
   znaczyc. Kolor niesie sam wskaznik, tlo tylko prowadzi oko do wiersza. */
tr.tlo-alarm > td { background: #fff6f6; }
tr.tlo-alarm:hover > td { background: #ffecec; }

/* ZALOGA: klikalne naglowki. Strzalka jest blada, dopoki kolumna nie jest aktywna —
   ma podpowiadac, ze da sie kliknac, a nie krzyczec przy kazdej kolumnie naraz. */
th.sortuj a { color: inherit; text-decoration: none; }
th.sortuj a:hover { text-decoration: underline; }
th.sortuj .strzalka { margin-left: .25rem; opacity: .25; font-size: .75em; }
th.sort-akt .strzalka { opacity: 1; }
th.sort-akt { background: #eef3ff; }