/* „Raport reklamowy” w pigułce (3.11.2026) – zakładka przy kliencie w panelu DKTE i okno PDF (body.rr-druk). raport-reklamowy.js */
.rr-narz { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px }
.rr-pole { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted, #55627a) }
.rr-pole select, .rr-pole input { font: 500 14px var(--sans, system-ui); padding: 9px 10px; border: 1px solid var(--line, #E3E8F0); border-radius: 10px; background: var(--card, #fff); color: var(--fg, #0F1B2D); min-height: 42px }
.rr-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto }
.rr-przyciski .btn svg { width: 18px; height: 18px }
.rr-info { font-size: 13px; margin: 0 0 14px }
#raport-sekcja, body.rr-druk { container-type: inline-size } /* układ według szerokości zakładki (obok profilu klienta jest węższa niż ekran) */

.rr { --rr-fg: var(--fg, #0F1B2D); --rr-m: var(--muted, #55627a); --rr-l: var(--line, #E3E8F0); --rr-c: var(--card, #fff);
  background: var(--rr-c); color: var(--rr-fg); border: 1px solid var(--rr-l); border-radius: 16px; padding: 22px; font-family: var(--sans, "Plus Jakarta Sans", system-ui, sans-serif) }
.rr h2 { font: 700 24px/1.2 var(--sans, system-ui); margin: 0; letter-spacing: -.01em }
.rr h3 { font: 700 18px/1.3 var(--sans, system-ui); margin: 22px 0 10px; color: var(--k, var(--akcent-t, #02377A)) }
.rr-glowa { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 3px solid var(--k, #02377A) }
.rr-glowa > div { flex: 1; min-width: 0 }
.rr-nad { margin: 0 0 2px; font: 600 13px var(--sans, system-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--rr-m) }
.rr-okres { margin: 4px 0 0; font-size: 15px }
.rr-kiedy { margin: 0; font-size: 12.5px; color: var(--rr-m); text-align: right; white-space: nowrap }

.rr-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px }
.rr-kafel { border: 1px solid var(--rr-l); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px }
.rr-kafel span { font-size: 13px; color: var(--rr-m) }
.rr-kafel b { font: 700 22px/1.2 var(--sans, system-ui); white-space: nowrap }
.rr-kafel:first-child b { color: var(--k, #02377A) }

.rr-wnioski ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5 }

.rr-tab { width: 100%; border-collapse: collapse; font-size: 13.5px }
.rr-tab th { text-align: left; font-weight: 600; color: var(--rr-m); padding: 8px; border-bottom: 1px solid var(--rr-l); white-space: nowrap }
.rr-tab td { padding: 10px 8px; border-bottom: 1px solid var(--rr-l); vertical-align: top }
.rr-tab td small { display: block; color: var(--rr-m); font-size: 12px; margin-top: 2px }
.rr-tab .rr-l { text-align: right; white-space: nowrap }
.rr-nw { white-space: nowrap }
.rr-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap }
.rr-st-ok { background: var(--st-ok, #E3F4EA); color: var(--st-ok-t, #0B6B3A) }
.rr-st-off { background: var(--st-szary, #EDF0F5); color: var(--st-szary-t, #4F5B70) }

.rr-karty { display: none }
.rr-karta { border: 1px solid var(--rr-l); border-radius: 12px; padding: 12px 14px }
.rr-karta-g { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 15px }
.rr-karta-o { margin: 4px 0 8px; font-size: 13px; color: var(--rr-m) }
.rr-karta dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 }
.rr-karta dt { font-size: 12.5px; color: var(--rr-m) }
.rr-karta dd { margin: 0; font-weight: 600 }
.rr-karta dd small { display: block; font-weight: 400; font-size: 12px; color: var(--rr-m) }
.rr-uwaga { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--st-uwaga, #FEF3E2); color: var(--st-uwaga-t, #94470A); font-size: 13.5px }
/* w panelu raport leży w zakładce bez własnej ramki (bez karty w karcie); ramka tylko w PDF */
#raport-sekcja .rr { border: 0; border-radius: 0; padding: 4px 0 0; background: none }
.rr-stopka { margin: 20px 0 0; font-size: 12px; color: var(--rr-m) }

/* wąsko (zakładka obok profilu, telefon): tabela → karty kampanii */
@container (max-width: 900px) {
  .rr-glowa { flex-wrap: wrap }
  .rr-kiedy { text-align: left; white-space: normal; flex-basis: 100% }
  .rr-tab { display: none }
  .rr-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px }
}
@container (max-width: 480px) { .rr-kafle { grid-template-columns: 1fr 1fr } .rr-kafel b { font-size: 19px } }
@media (max-width: 760px) {
  .rr { padding: 16px }
  .rr-przyciski { margin-left: 0; width: 100% }
  .rr-przyciski .btn { flex: 1 1 100% }
  .rr-pole { flex: 1 1 100% }
}

/* okno PDF */
body.rr-druk { margin: 0; background: #fff; color: #0F1B2D; font: 400 14px/1.5 "Plus Jakarta Sans", system-ui, sans-serif }
body.rr-druk .rr { border: 0; border-radius: 0; max-width: 1000px; margin: 0 auto; padding: 28px }
body.rr-druk .lk-kolo { position: relative; display: inline-grid; place-items: center; width: var(--px, 52px); height: var(--px, 52px); border-radius: 50%; border: 1px solid #E3E8F0; background: #fff; overflow: hidden; flex: none }
body.rr-druk .lk-i { font: 700 16px system-ui; color: var(--k, #02377A) }
body.rr-druk .lk-img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain }
@page { size: A4 landscape; margin: 12mm }
@media print {
  body.rr-druk .rr { padding: 0; max-width: none }
  .rr-tab tr, .rr-kafel, .rr-wnioski { break-inside: avoid }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact }
}

/* napis po „Przygotuj raport teraz” i po wysyłce; „Wyślij raport do klienta” pod raportem (3.11.2026) */
.rr-kom { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600 }
.rr-kom.ok { background: var(--st-ok, #E3F4EA); color: var(--st-ok-t, #0B6B3A) }
.rr-kom.zle { background: var(--st-pilne, #FDECEA); color: var(--st-pilne-t, #B42318) }
.rr-wysylka { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line, #E3E8F0) }
.rr-wysylka h3 { font: 700 18px/1.3 var(--sans, system-ui); margin: 0 0 4px }
.rr-wysylka > p { margin: 0 0 10px; font-size: 14px }
.rr-wysylka .rr-kom { margin: 12px 0 0 }
.rr-wysylka .btn svg { width: 18px; height: 18px }
.rr-odb { overflow-wrap: anywhere }
@media (max-width: 760px) { .rr-wysylka .btn { width: 100% } }
.rr-odb { display: flex; flex-direction: column; gap: 2px; font-size: 14px }