/* Panel właściciela – wygląd B (23.10.2026): granatowe menu boczne, wzorce AdminLTE 4 + CoreUI (MIT) przepisane na własny CSS.
   Ładuje go tylko index.html (panel.dkte.be) – portal /klient i aplikacja /app mają swoje style (panel.css + klient.css / app.css).
   Ikony: /ikony.svg (Tabler Icons, MIT – licencja w pliku).
   Motyw: domyślnie z ustawień systemu, przełącznik w górnym pasku zapisuje wybór (html[data-motyw=jasny|ciemny], localStorage panel-motyw). */
:root {
  --bg: #F5F7FB; --card: #FFFFFF; --fg: #0F1B2D; --muted: #627089; --line: #E3E8F0; --sel: #EEF3FB;
  --akcent: #02377A; --akcent-t: #02377A; --dkte: #02377A; --zloto: #B98F48; --zloto-t: #8A6A2F;
  --pc: #B45309; --pc-soft: #FEF3E2; --ok: #0E7A43; --ok-soft: #E3F4EA; --warn: #B45309; --warn-soft: #FEF3E2; --zle: #C0352B; --zle-soft: #FDECEA;
  --dzis-tlo: #F5E9D3;
  --sb1: #02377A; --sb2: #01275A; --sb-zloto: #D9B783; --box-granat: #02377A;
  --cien: 0 1px 2px rgba(15, 27, 45, .05), 0 4px 14px rgba(15, 27, 45, .04); --r: 16px;
  --bok-w: 252px; --dolne-h: 64px; color-scheme: light;
  --sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: var(--sans);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) { --bg: #0B1220; --card: #111A2B; --fg: #E6ECF5; --muted: #93A1B5; --line: #1F2B41; --sel: #172440;
    --akcent: #2F63C7; --akcent-t: #8FB1F3; --dkte: #8FB1F3; --zloto: #D3AF78; --zloto-t: #D9B783;
    --pc: #F0A54A; --pc-soft: #3A2A12; --ok: #4CC38A; --ok-soft: #13301F; --warn: #F0A54A; --warn-soft: #3A2A12; --zle: #F07167; --zle-soft: #3B1715;
    --dzis-tlo: #3A2E18; --sb1: #0C2552; --sb2: #08193A; --box-granat: #1D4E9E; --cien: none; color-scheme: dark }
}
:root[data-motyw="ciemny"] { --bg: #0B1220; --card: #111A2B; --fg: #E6ECF5; --muted: #93A1B5; --line: #1F2B41; --sel: #172440;
    --akcent: #2F63C7; --akcent-t: #8FB1F3; --dkte: #8FB1F3; --zloto: #D3AF78; --zloto-t: #D9B783;
    --pc: #F0A54A; --pc-soft: #3A2A12; --ok: #4CC38A; --ok-soft: #13301F; --warn: #F0A54A; --warn-soft: #3A2A12; --zle: #F07167; --zle-soft: #3B1715;
    --dzis-tlo: #3A2E18; --sb1: #0C2552; --sb2: #08193A; --box-granat: #1D4E9E; --cien: none; color-scheme: dark }
body.pB { background: var(--bg); color: var(--fg); font: 400 14.5px/1.5 var(--sans) }
.pB .wrap { max-width: none; margin: 0; padding: 0 }
.pB .logowanie { padding: 0 16px; max-width: 412px }
.pB h1 { font: 700 24px/1.2 var(--sans); letter-spacing: -.02em; margin: 0 }
.pB h2 { font: 700 18px/1.25 var(--sans); letter-spacing: -.01em; margin: 0 }
.ik { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.pB a { color: var(--akcent-t) }
.pB :focus-visible { outline: 3px solid var(--akcent-t); outline-offset: 2px }

/* przyciski i klocki dotychczasowych modułów w stylu B */
.pB .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--sans); padding: 9px 15px; border-radius: 10px; background: var(--akcent); color: #fff; border: 1px solid transparent; text-decoration: none }
.pB .btn.sec { background: var(--card); color: var(--fg); border: 1px solid var(--line) }
.pB .btn.sec:hover { border-color: var(--akcent-t) }
.pB .btn .ik { width: 17px; height: 17px }
.pB .btn.zl { background: #B98F48; color: #1B1408 }
.pB .ramka { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--cien); padding: 16px 18px; margin-bottom: 14px }
.pB .info { border-radius: 12px; background: var(--sel); font-weight: 500; border-left: 4px solid var(--akcent-t) }
.pB .info.ok { background: var(--ok-soft); border-left-color: var(--ok) }
.pB .chip { font: 600 11px/1 var(--sans); letter-spacing: .04em; padding: 5px 9px }
.pB .temat, .pB .rolka, .pB .harm { border-radius: 14px }
.pB .pusto { border-radius: var(--r) }
.pB select { font: 600 14px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px }

/* ── szkielet: menu boczne + górny pasek ── */
#app.kB { display: grid; grid-template-columns: var(--bok-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns .25s ease-out }
#app.kB[hidden] { display: none !important }
.b-bok { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
  background: linear-gradient(180deg, var(--sb1) 0%, var(--sb2) 100%); color: rgba(255, 255, 255, .78); display: flex; flex-direction: column; min-width: 0; z-index: 40 }
.b-marka { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); min-height: 60px }
.b-marka > a { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font: 800 15px/1.1 var(--sans); white-space: nowrap; overflow: hidden; min-width: 0 }
.b-marka img { width: 36px; height: 36px; flex: none; object-fit: contain; display: block }
.b-marka small { display: block; color: var(--sb-zloto); font: 700 9.5px var(--sans); letter-spacing: .24em; margin-top: 4px }
.b-zamknij { display: none; margin-left: auto; width: 36px; height: 36px; place-items: center; border-radius: 9px; border: 0; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); flex: none; cursor: pointer }
.b-menu { padding: 6px 10px 12px; display: grid; gap: 2px }
.b-tyt { padding: 16px 10px 6px; font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); white-space: nowrap }
.b-menu a { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font: 500 14px var(--sans); color: rgba(255, 255, 255, .82); text-decoration: none; white-space: nowrap; min-width: 0 }
.b-menu a > span:not(.b-kr) { overflow: hidden; text-overflow: ellipsis }
.b-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff }
.b-menu a[aria-current] { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600 }
.b-menu a[aria-current]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-zloto) }
.b-menu .ik { width: 19px; height: 19px }
.b-kr { width: 19px; display: grid; place-items: center; flex: none }
.b-kr i { width: 10px; height: 10px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3) }
.b-licz { margin-left: auto; font: 700 11px/1 var(--sans); font-style: normal; padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #fff; font-variant-numeric: tabular-nums }
.b-licz.zl { background: #B98F48; color: #1B1408 }
.b-licz.zle { background: #E5484D; color: #fff }
.b-stopka { margin-top: auto; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 2px }
.b-stopka button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: 0; background: transparent; color: rgba(255, 255, 255, .72); border-radius: 10px; font: 500 13.5px var(--sans); white-space: nowrap; cursor: pointer }
.b-stopka button:hover { background: rgba(255, 255, 255, .07); color: #fff }
.b-stopka .tylko-tel { display: none }
.b-tlo { display: none }
.b-main { display: flex; flex-direction: column; min-width: 0 }
.b-gora { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 0 20px; padding-top: env(safe-area-inset-top, 0px); min-height: 60px; background: var(--card); border-bottom: 1px solid var(--line) }
.b-ham, .b-ikbtn { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); flex: none; border: 0; background: transparent; cursor: pointer; text-decoration: none }
.b-ham:hover, .b-ikbtn:hover { background: var(--sel); color: var(--fg) }
.b-ikbtn i { position: absolute; top: 7px; right: 7px; min-width: 9px; height: 9px; border-radius: 999px; background: var(--zle); box-shadow: 0 0 0 2px var(--card) }
.b-okr { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden }
.b-okr a { color: var(--muted); text-decoration: none } .b-okr a:hover { color: var(--fg) }
.b-okr b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis }
.b-okr .ik { width: 14px; height: 14px }
.b-okr > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0 }
.b-prawa { margin-left: auto; display: flex; align-items: center; gap: 6px }
.b-pc { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--sans); color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 35%, var(--line)); padding: 6px 11px; border-radius: 999px; white-space: nowrap; text-decoration: none }
.b-pc .ik { width: 16px; height: 16px }
.b-pc.wolne { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)) }
.b-pc .krotki { display: none }
.b-tresc { padding: 22px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; max-width: 1480px; margin: 0 auto; align-content: start }
.b-tresc > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; align-content: start }
.b-dolne { display: none }

/* menu zwinięte do ikon („Zwiń menu”, harmonogram, tablet) */
@media (min-width: 761px) {
  #app.kB[data-mini="1"] { --bok-w: 72px }
  .kB[data-mini="1"] .b-menu a > span:not(.b-kr), .kB[data-mini="1"] .b-licz, .kB[data-mini="1"] .b-marka a > span, .kB[data-mini="1"] .b-stopka span { display: none }
  .kB[data-mini="1"] .b-menu a, .kB[data-mini="1"] .b-stopka button { justify-content: center }
  .kB[data-mini="1"] .b-marka { justify-content: center; padding: 14px 8px }
  .kB[data-mini="1"] .b-tyt { font-size: 0; padding: 0; height: 1px; margin: 12px 8px; background: rgba(255, 255, 255, .14) }
  .kB[data-mini="1"] #b-zwin .ik { transform: scaleX(-1) }
  /* licznik przy kliencie w zwiniętym menu: mała kropka zamiast liczby */
  .kB[data-mini="1"] .b-menu a .b-licz.zl, .kB[data-mini="1"] .b-menu a .b-licz.zle { display: block; position: absolute; top: 6px; right: 12px; width: 8px; height: 8px; padding: 0; font-size: 0 }
}
@media (min-width: 761px) and (max-width: 1100px) { #b-zwin, .zwin-harm { display: none !important } }

/* ── nagłówek strony, kafle small-box, callout ── */
.b-ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px }
.b-ph h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.b-ph h1 small { font: 500 14px var(--sans); color: var(--muted); letter-spacing: 0 }
.b-ph .opis { color: var(--muted); font-size: 13.5px; margin-top: 4px; max-width: 75ch }
.b-ph-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.b-boxy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.b-box { position: relative; overflow: hidden; border-radius: var(--r); color: #fff; background: var(--bb); display: flex; flex-direction: column; min-width: 0; text-decoration: none }
.b-box.granat { --bb: var(--box-granat) } .b-box.pc { --bb: #B45309 } .b-box.zloto { --bb: #7E6029 } .b-box.zle { --bb: #B42318 } .b-box.ok { --bb: #0E6B3C }
.b-box-in { padding: 16px 18px 14px; position: relative; z-index: 1 }
.b-box b { display: block; font: 800 28px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.b-box-in span { font-size: 13px; opacity: .92 }
.b-box > .ik { position: absolute; right: 12px; top: 10px; width: 62px; height: 62px; opacity: .2; stroke-width: 1.5 }
.b-box-st { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; background: rgba(0, 0, 0, .16); font: 600 12px/1.3 var(--sans); position: relative; z-index: 1; text-align: center; color: #fff !important; text-decoration: none }
.b-box-st:hover { background: rgba(0, 0, 0, .26) }
.b-box-st .ik { width: 14px; height: 14px }
.b-callout { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--pc); border-radius: 12px; box-shadow: var(--cien) }
.b-callout > .ik { color: var(--pc); width: 22px; height: 22px; margin-top: 1px }
.b-callout b { display: block; font-weight: 700 }
.b-callout span { color: var(--muted); font-size: 13.5px }
.b-callout.ok { border-left-color: var(--ok) } .b-callout.ok > .ik { color: var(--ok) }
.b-callout.info { border-left-color: var(--akcent-t) } .b-callout.info > .ik { color: var(--akcent-t) }
.b-callout.zle { border-left-color: var(--zle) } .b-callout.zle > .ik { color: var(--zle) }

/* ── karty ── */
.b-karta { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--cien); min-width: 0; overflow: hidden }
.b-karta.b-outline { border-top: 3px solid var(--k, var(--akcent)) }
.b-karta-g { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; padding: 13px 18px; border-bottom: 1px solid var(--line) }
.b-karta-g h3 { font: 700 15px var(--sans); display: flex; align-items: center; gap: 8px; margin: 0 }
.b-karta-g h3 .ik { color: var(--muted) }
.b-karta-g > a { font: 600 13px var(--sans); color: var(--akcent-t); text-decoration: none }
.b-karta-in { padding: 16px 18px }
.b-siatka { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start }
.m-av { width: 36px; height: 36px; border-radius: 10px; background: var(--k, var(--akcent)); color: #fff; display: inline-grid; place-items: center; font: 700 13px var(--sans); flex: none; letter-spacing: .02em }
.m-zn { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--sel); color: var(--fg); white-space: nowrap; text-decoration: none }
.m-zn .ik { width: 13px; height: 13px }
.m-zn.pc, .m-zn.warn { background: var(--pc-soft); color: var(--pc) }
.m-zn.ok { background: var(--ok-soft); color: var(--ok) }
.m-zn.zle { background: var(--zle-soft); color: var(--zle) }
.m-zn.kontur { background: transparent; border: 1px solid var(--line) }
.m-muted { color: var(--muted) }
.m-pusty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 26px 18px }
.m-pusty .ik-duza { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sel); color: var(--muted); margin-bottom: 4px }
.m-pusty .ik-duza .ik { width: 22px; height: 22px }
.m-pusty b { font-size: 15px }
.m-pusty p { color: var(--muted); font-size: 13.5px; max-width: 38ch; margin: 0 }

/* ── oś czasu (najbliższe publikacje, szczegóły dnia) ── */
.b-os { position: relative; padding: 16px 18px 18px; display: grid; gap: 12px }
.b-os::before { content: ""; position: absolute; left: 35px; top: 18px; bottom: 22px; width: 2px; background: var(--line) }
.b-os-dz { position: relative; justify-self: start; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 7px; background: var(--akcent); color: #fff }
.b-os-dz.jasny { background: var(--sel); color: var(--akcent-t) }
.b-os-el { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start }
.b-os-ik { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: #fff; box-shadow: 0 0 0 4px var(--card); position: relative }
.b-os-ik .ik { width: 17px; height: 17px }
.b-os-tr { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px 10px; min-width: 0 }
.b-os-tr .g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 12px var(--sans); color: var(--muted) }
.b-os-tr .g .godz { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); font-variant-numeric: tabular-nums }
.b-os-tr .g .ik { width: 14px; height: 14px }
.b-os-tr b.t { display: block; font-weight: 600; font-size: 14px; margin: 3px 0 8px; line-height: 1.35; overflow-wrap: anywhere }
.b-os-tr .zn { display: flex; flex-wrap: wrap; gap: 5px }
.b-os-tr .zn .znacznik { font-size: 11.5px }
.b-os-tr .pub-info { margin-top: 6px }
.b-os-el.po { opacity: .6 }

/* ── telefon: najbliższe publikacje zwinięte osobno dla każdego klienta (życzenie właściciela 23.10) ── */
.b-grupy { display: none }
.b-gr { border-top: 1px solid var(--line); padding-top: 0 }
.b-gr:first-child { border-top: 0 }
.b-gr > summary { list-style: none; display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; color: var(--fg); font-weight: 400 }
.b-gr > summary::-webkit-details-marker { display: none }
.b-gr > summary .m-av { width: 34px; height: 34px; border-radius: 10px; font-size: 12px }
.b-gr-t { flex: 1; min-width: 0 }
.b-gr-t b { display: block; font-size: 14.5px; line-height: 1.25 }
.b-gr-t small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.b-gr-t small .ik { width: 14px; height: 14px; color: var(--pc) }
.b-gr-ile { font: 700 12px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--sel); color: var(--akcent-t); font-variant-numeric: tabular-nums }
.b-gr > summary > .ik { color: var(--muted); transition: transform .2s ease-out }
.b-gr[open] > summary { background: color-mix(in srgb, var(--sel) 55%, var(--card)) }
.b-gr[open] > summary > .ik { transform: rotate(180deg) }
.b-gr-l { margin: 2px 14px 12px 30px; padding-left: 14px; border-left: 3px solid var(--k) }
.b-gr-stan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 6px }
.b-link { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--sans); color: var(--akcent-t); text-decoration: none }
.b-link .ik { width: 14px; height: 14px }
.b-gp { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 9px 0 }
.b-gp + .b-gp { border-top: 1px dashed var(--line) }
.b-gp .kiedy b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums }
.b-gp .kiedy small { color: var(--muted); font-size: 11.5px }
.b-gp .t { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere }
.b-gp .zn { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px }

/* ── mapa godzin komputera (dni × godziny) ── */
.b-mapa { padding: 14px 18px 16px }
.b-mapa-s { display: grid; gap: 3px; align-items: center }
.b-mapa .h { font: 500 10.5px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.b-mapa .d { font: 600 12px var(--sans); white-space: nowrap }
.b-mapa .d small { font-weight: 500; color: var(--muted); margin-left: 4px }
.b-mapa .c { height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--line) 60%, var(--card)) }
.b-mapa .c.on { background: var(--pc) }
.b-mapa .c.przyg { background: repeating-linear-gradient(135deg, var(--pc-soft) 0 4px, color-mix(in srgb, var(--pc) 50%, var(--pc-soft)) 4px 7px) }
.b-mapa .c.teraz { box-shadow: inset 0 0 0 2px var(--akcent-t) }
.b-mapa-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--muted) }
.b-mapa-leg span { display: inline-flex; align-items: center; gap: 6px }
.b-mapa-leg i { width: 14px; height: 10px; border-radius: 3px; display: inline-block }

/* ── tabela klientów ── */
.b-tab { width: 100%; border-collapse: collapse; font-size: 13.5px }
.b-tab th { text-align: left; font: 700 12px var(--sans); color: var(--fg); padding: 10px 18px; border-bottom: 2px solid var(--line); white-space: nowrap }
.b-tab td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle }
.b-tab tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--bg) 55%, var(--card)) }
.b-tab tr:last-child td { border-bottom: 0 }
.b-kl { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none }
.b-kl b { display: block } .b-kl small { color: var(--muted); font-size: 12px }
.b-pas { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; width: 100px }
.b-pas i { display: block; height: 100%; border-radius: inherit; background: var(--akcent) }
.b-pas-w { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-weight: 600 }
.b-btn-sm { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--sans); padding: 6px 11px; border-radius: 8px; background: var(--sel); color: var(--akcent-t); white-space: nowrap; text-decoration: none }
.b-td-akcja { text-align: right; white-space: nowrap }

/* ── lista klientów (#klienci) i alerty (#alerty) ── */
.b-kafle-kl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px }
.b-kl-karta { display: grid; gap: 10px; padding: 16px 18px }
.b-kl-karta .b-kl b { font-size: 15.5px }
.b-kl-karta .akcje { display: flex; flex-wrap: wrap; gap: 8px }
.b-lista { display: grid }
.b-al { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none }
.b-al:last-child { border-bottom: 0 }
.b-al:hover { background: color-mix(in srgb, var(--sel) 55%, var(--card)) }
.b-al-ik { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--zle-soft); color: var(--zle) }
.b-al-ik.pc { background: var(--pc-soft); color: var(--pc) } .b-al-ik.info { background: var(--sel); color: var(--akcent-t) } .b-al-ik.ok { background: var(--ok-soft); color: var(--ok) }
.b-al b { display: block; font-weight: 600; line-height: 1.35 }
.b-al small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere }
.b-al > .ik { color: var(--muted) }

/* ── harmonogram (kalendarz.js) w stylu B ── */
#v-harmonogram #kalendarz { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--akcent); border-radius: var(--r); box-shadow: var(--cien); padding: 14px 18px 18px; min-width: 0 }
.pB .kal-pasek { margin-bottom: 10px }
.pB .kal-nawig h2 { font-size: 17px; min-width: 170px }
.pB .ikon-btn { border: 0; background: var(--sel); color: var(--akcent-t); border-radius: 9px; height: 34px; min-width: 34px }
.pB .ikon-btn:hover { background: color-mix(in srgb, var(--akcent-t) 16%, var(--sel)) }
.pB .ikon-btn svg { width: 16px; height: 16px }
.pB .przelacznik { background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 0; overflow: hidden; gap: 0 }
.pB .przelacznik button { border-radius: 0; padding: 7px 13px; font-size: 13px }
.pB .przelacznik button[aria-pressed="true"] { background: var(--akcent); color: #fff; box-shadow: none }
.pB .filtr { border-radius: 8px; border-color: transparent; background: var(--sel); font-size: 12.5px; padding: 6px 10px }
.pB .filtr[aria-pressed="true"] { border-color: var(--akcent-t); color: var(--akcent-t) }
.pB .filtr .kropka { border-radius: 4px; width: 12px; height: 12px }
.pB .kal { border-radius: 12px }
.pB .kal-tyg { text-align: center; font: 700 12px var(--sans); color: var(--fg); letter-spacing: .02em; background: color-mix(in srgb, var(--bg) 55%, var(--card)) }
.pB .kal-dzien.dzis { background: color-mix(in srgb, var(--dzis-tlo) 60%, var(--card)) }
.pB .kal-dzien.dzis .nr { background: transparent; color: var(--akcent-t); font-weight: 800 }
.pB .kal-dzien[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--akcent-t) }
.pB .kal-poz { background: var(--k); color: #fff; border-left: 0; border-radius: 5px; font-weight: 600; font-size: 11px; padding: 3px 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) }
.pB .kal-poz svg { color: #fff }
.pB .kal-poz.pc { box-shadow: inset 3px 0 0 #F59E0B, inset 0 0 0 1px rgba(255, 255, 255, .14) }
.pB .kal-poz.pc .g { color: #fff }
.pB .kal-wiecej { color: var(--akcent-t) }
.pB .kal-szczegoly { padding: 0; overflow: hidden }
.pB .kal-szczegoly .naglowek { padding: 13px 18px; margin: 0; border-bottom: 1px solid var(--line) }
.pB .kal-szczegoly .naglowek h2 { font-size: 15px }
.pB .kal-szczegoly .pc-pasek { margin: 14px 18px 0 }
.pB .kal-szczegoly .pusto-male { padding: 16px 18px }
.pB .lista-dni .karta { padding: 0; overflow: hidden }
.pB .lista-dni .karta h3 { padding: 13px 18px; margin: 0; border-bottom: 1px solid var(--line) }
.pB .lista-dni .karta .pc-pasek { margin: 14px 18px 0 }
.pB .pc-pasek { border-radius: 12px; border-left: 4px solid var(--pc) }
.pB .pc-pasek.nie { border-left-color: var(--ok) }

/* ── widok klienta: profil po lewej, zakładki po prawej ── */
.b-profil { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start }
.b-kol { display: grid; gap: 18px; min-width: 0 }
.b-prof { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 18px 16px }
.b-prof .m-av { width: 76px; height: 76px; border-radius: 50%; font-size: 24px; box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--k) }
.b-prof h3 { font: 700 19px var(--sans); margin: 8px 0 0 }
.b-prof p { color: var(--muted); font-size: 13px; margin: 0 }
.b-lg { display: grid; border-top: 1px solid var(--line) }
.b-lg > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px }
.b-lg > div b { font-weight: 600 }
.b-lg > div span { color: var(--akcent-t); font-weight: 600; text-align: right }
.b-prof-st { padding: 14px 18px 16px; display: grid; gap: 8px }
.b-prof-st .btn { width: 100% }
.b-raport { padding: 16px 18px; display: grid; gap: 10px }
.b-raport p { color: var(--muted); font-size: 13.5px; margin: 0 }
.b-raport #raport-rekl { display: grid !important; gap: 8px !important; justify-items: start }
.b-raport #raport-wyslij { background: #B98F48; color: #1B1408 }
.b-pills { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none }
.b-pills button { flex: none; padding: 7px 12px; border-radius: 8px; border: 0; background: transparent; font: 600 13px var(--sans); color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap }
.b-pills button:hover { color: var(--fg); background: var(--sel) }
.b-pills button[aria-selected="true"] { background: var(--akcent); color: #fff }
.b-pills .ik { width: 16px; height: 16px }
.b-pills em { font-style: normal; font: 700 10.5px/1 var(--sans); padding: 3px 6px; border-radius: 999px; background: #B98F48; color: #1B1408 }
#widok { padding: 16px 18px 18px; min-width: 0 }
#widok > .ramka.info-firmy { margin-bottom: 14px }
.b-zak { display: grid; gap: 0; min-width: 0 }
.b-zak > .ramka:last-child, .b-zak > details.ramka:last-child { margin-bottom: 0 }
.b-zak h2.sekcja { margin: 18px 0 10px; font-size: 18px }
.b-zak h2.sekcja:first-child { margin-top: 0 }
.b-zak .kibice { margin-top: 0 }
#v-klient .pasek-zak { display: none }

/* ── DKTE Group ── */
#v-dkte .karta { border-radius: var(--r) }

/* ── tablet ── */
@media (max-width: 1240px) {
  .b-boxy { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .b-siatka { grid-template-columns: minmax(0, 1fr) }
  .b-profil { grid-template-columns: 260px minmax(0, 1fr) }
}
@media (max-width: 960px) {
  .b-profil { grid-template-columns: minmax(0, 1fr) }
  .b-pc .tekst { display: none } .b-pc .krotki { display: inline }
}

/* ── telefon: biały pasek z ☰, granatowe menu wysuwane z lewej, dolne menu w granacie ── */
@media (max-width: 760px) {
  #app.kB { grid-template-columns: minmax(0, 1fr) }
  .b-bok { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: auto; transform: translateX(-105%); transition: transform .25s ease-out; visibility: hidden;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
  .kB[data-szuf="1"] .b-bok { transform: none; visibility: visible; box-shadow: 10px 0 30px rgba(2, 10, 30, .35) }
  .kB[data-szuf="1"] .b-tlo { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(5, 14, 32, .5) }
  .b-zamknij { display: grid }
  #b-zwin, .zwin-harm { display: none !important }
  .b-stopka .tylko-tel { display: flex }
  .b-gora { padding: 0 8px; padding-top: env(safe-area-inset-top, 0px); gap: 4px; min-height: 56px }
  .b-okr .poz { display: none }
  .b-okr > span:first-child .ik { display: none }
  .b-pc { padding: 7px 9px }
  .b-dolne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: linear-gradient(180deg, var(--sb1), var(--sb2)); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)) }
  .b-dolne a, .b-dolne button { display: grid; justify-items: center; gap: 3px; font: 600 10.5px var(--sans); color: rgba(255, 255, 255, .74); padding: 5px 0 3px; position: relative; text-decoration: none; border: 0; background: transparent; cursor: pointer }
  .b-dolne [aria-current] { color: #fff }
  .b-dolne [aria-current]::before { content: ""; position: absolute; top: -6px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--sb-zloto) }
  .b-dolne .ik { width: 22px; height: 22px }
  .b-dolne em { position: absolute; top: 0; left: 56%; min-width: 16px; height: 16px; border-radius: 999px; background: #E5484D; color: #fff; font: 700 10px/16px var(--sans); font-style: normal; text-align: center; padding: 0 4px }
  .b-main { padding-bottom: calc(var(--dolne-h) + env(safe-area-inset-bottom, 0px)) }
  .pB .pasek { bottom: calc(var(--dolne-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; z-index: 34 }
  .b-tresc { padding: 16px 14px 28px; gap: 14px }
  .b-tresc > section { gap: 14px }
  .pB h1, .b-ph h1 { font-size: 21px }
  .b-boxy { gap: 10px }
  .b-box b { font-size: 21px }
  .b-box > .ik { width: 44px; height: 44px }
  .b-box-in { padding: 13px 14px 10px }
  .b-box-in span { font-size: 12px }
  .b-box-st { font-size: 11px }
  .b-callout { padding: 12px 14px }
  .b-os-pc, .b-klienci-karta, .tylko-pc { display: none !important }
  .b-grupy { display: block }
  .b-mapa { padding: 12px 14px 14px }
  .b-mapa-s { gap: 2px }
  .b-mapa .d small { display: none }
  .b-mapa .c { height: 18px; border-radius: 4px }
  #v-harmonogram #kalendarz { padding: 12px 10px 14px }
  .pB .kal-nawig h2 { min-width: 0; font-size: 16px }
  .pB .kal-poz { width: 7px; height: 7px; padding: 0; border-radius: 50%; box-shadow: none }
  .b-karta-g { padding: 12px 14px }
  .b-al { padding: 12px 14px }
  #widok { padding: 14px 12px 16px }
  .b-prof { padding: 18px 14px 12px }
  .b-prof .m-av { width: 60px; height: 60px; font-size: 20px }
}
@media (prefers-reduced-motion: reduce) { #app.kB, .b-bok, .b-gr > summary > .ik { transition: none } }
/* pasek wyboru tematów (tematy.js) na komputerze obok menu bocznego */
@media (min-width: 761px) { .pB .pasek { left: 252px; z-index: 34 } body.pB:has(#app[data-mini="1"]) .pasek { left: 72px } }
/* telefon: zwarty profil klienta (kółko obok nazwy, dane w dwóch kolumnach), zakładki zaraz pod nim, raport reklamowy na końcu */
@media (max-width: 760px) {
  .b-okr .ost > .ik { display: none }
  #glowa-klienta .b-ph-akcje { display: none }
  .b-profil { display: flex; flex-direction: column; gap: 14px }
  .b-kol { display: contents }
  .b-kol > .b-karta:first-child { order: 1 } .b-profil > .b-karta { order: 2 } .b-kol > .b-karta + .b-karta { order: 3 }
  .b-prof { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; padding: 14px 14px 12px }
  .b-prof .m-av { grid-row: span 2; width: 52px; height: 52px; font-size: 18px; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--k) }
  .b-prof h3 { margin: 0; font-size: 17px }
  .b-prof .m-zn { margin-top: 0 !important; white-space: normal }
  .b-lg { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .b-lg > div { display: grid; gap: 1px; padding: 8px 14px; font-size: 12.5px; border-right: 1px solid var(--line) }
  .b-lg > div:nth-child(2n) { border-right: 0 }
  .b-lg > div b { font-weight: 500; color: var(--muted) }
  .b-lg > div span { text-align: left; font-size: 14px }
  .b-prof-st { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px }
  .b-prof-st .btn { padding: 9px 10px; font-size: 13px }
}
@media (max-width: 760px) {
  .b-profil > .b-karta, .b-kol > .b-karta { min-width: 0; width: 100% }
  .pB .grupy-lista { grid-template-columns: minmax(0, 1fr) }
}
/* ── pliki do pobrania przy kliencie (pliki.js) ── */
.pliki-kl { display: grid; gap: 10px }
.pliki-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px }
.pliki-glowa .muted { font-size: 13px }
.pliki-dodaj { cursor: pointer; position: relative }
.pliki-dodaj input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.pliki-dodaj:has(input:focus-visible) { outline: 3px solid var(--akcent-t); outline-offset: 2px }
.pliki-grupa { font: 700 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px }
.pliki-lista { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.plik-w { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--line) }
.plik-w:last-child { border-bottom: 0 }
.plik-typ { width: 44px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--sel); color: var(--akcent-t); font: 700 10.5px var(--sans); letter-spacing: .04em }
.plik-nazwa { min-width: 0; color: inherit !important; text-decoration: none }
.plik-nazwa b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.plik-nazwa small { color: var(--muted); font-size: 12px }
.plik-nazwa:hover b { color: var(--akcent-t) }
@media (max-width: 760px) { .plik-w { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 6px; padding: 8px } .plik-typ { width: 40px } .plik-nazwa b { white-space: normal; overflow-wrap: anywhere } }