/* Panel właściciela – nowy wygląd (22.10.2026): menu główne DKTE Group · Moi klienci · Harmonogram.
   Nadpisuje wspolne.css tylko w panelu – strona klienta (w.html) i podgląd (p.html) zostają bez zmian. */
:root {
  --bg: #F5F7FB; --card: #FFFFFF; --fg: #0F1B2D; --muted: #627089; --line: #E3E8F0; --sel: #EEF3FB;
  --dkte: #02377A; --zloto: #B98F48; --pc: #B45309; --pc-soft: #FEF3E2; --ok: #0E7A43; --ok-soft: #E3F4EA; --warn: #B45309; --warn-soft: #FEF3E2;
  --zle: #C0352B; --zle-soft: #FDECEA; --firma: #02377A;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: var(--sans);
  --cien: 0 1px 2px rgba(15, 27, 45, .05), 0 4px 14px rgba(15, 27, 45, .04); --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0B1220; --card: #111A2B; --fg: #E6ECF5; --muted: #93A1B5; --line: #1F2B41; --sel: #172440; --dkte: #7EA6F5;
    --pc: #F0A54A; --pc-soft: #3A2A12; --ok: #4CC38A; --ok-soft: #13301F; --zle: #F07167; --zle-soft: #3B1715; --cien: none }
}
body { background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased }
h1 { font: 700 clamp(26px, 4vw, 34px)/1.15 var(--sans); letter-spacing: -.02em; margin: 6px 0 4px }
h2 { font: 700 20px/1.25 var(--sans); letter-spacing: -.01em }
.wrap { max-width: 1240px; padding-top: 0 }
.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: .14em; color: var(--muted) }
.btn { font: 600 14.5px var(--sans); padding: 10px 18px }
.btn.sec { border-width: 1px; background: var(--card) }
.chip { font: 600 11px/1 var(--sans); letter-spacing: .06em; padding: 6px 9px }

/* ── górne menu ── */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 12px 0; margin-bottom: 26px; background: var(--bg); border-bottom: 1px solid var(--line) }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font: 800 16px/1.1 var(--sans); letter-spacing: -.01em }
.marka img { width: 36px; height: 36px; border-radius: 10px; display: block }
.marka small { display: block; font: 600 10.5px var(--sans); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px }
.menu { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: wrap; min-width: 0 }
.menu > a, .menu-firm > summary { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--sans); color: var(--muted); text-decoration: none; padding: 9px 14px; border-radius: 10px; cursor: pointer; list-style: none; border: 0; background: none }
.menu > a:hover, .menu-firm > summary:hover { background: var(--sel); color: var(--fg) }
.menu [aria-current="page"] { background: var(--sel); color: var(--dkte) }
.menu-firm { position: relative }
.menu > a, .menu-firm > summary { white-space: nowrap }
@media (max-width: 760px) {
  .topbar { gap: 6px 10px; padding: 10px 0 6px; margin-bottom: 18px }
  #wyloguj { order: 2; margin-left: auto; padding: 8px 14px; font-size: 14px }
  .menu { order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none }
  .menu > a, .menu-firm > summary { padding: 8px 8px; font-size: 13.5px }
  .bez-tel { display: none }
  .menu-firm { position: static }
  .firmy { left: 0; right: 0; width: auto }
  .fbtn .chip { display: none }
  .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .kafel { padding: 13px 14px }
  .kafel .liczba { font-size: 22px }
}
.menu-firm > summary::-webkit-details-marker { display: none }
.menu-firm .strz { display: inline-block; font-size: 10px; transition: transform .2s ease-out }
.menu-firm[open] .strz { transform: rotate(180deg) }
.firmy { position: absolute; top: calc(100% + 8px); left: 0; width: min(460px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; display: grid; gap: 4px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(15, 27, 45, .14); z-index: 40 }
.fbtn { display: flex; align-items: center; gap: 10px; text-align: left; font: 600 15px var(--sans); border: 0; background: transparent; color: var(--fg); border-radius: 10px; padding: 10px 12px; cursor: pointer }
.fbtn:hover { background: var(--sel) }
.fbtn[aria-pressed="true"] { background: var(--sel) }
.fbtn .chip { margin-left: auto; white-space: nowrap; font-size: 10px }
a.fbtn { text-decoration: none }
.fbtn small { display: block; font: 400 12.5px/1.35 var(--sans); color: var(--muted); margin-top: 2px }
.fbtn[aria-current="page"] { background: var(--sel) }
#menu-dkte .firmy { width: min(340px, calc(100vw - 32px)) }
.kropka { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block }
.firmy-stopka { border-top: 1px solid var(--line); margin-top: 4px; padding: 8px 12px 2px; font-size: 13px }
.firmy-stopka a { color: var(--dkte); font-weight: 600; text-decoration: none }

/* ── wspólne klocki ── */
.karta { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--cien); min-width: 0 }
.karta > h2 { margin-bottom: 10px }
.naglowek { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px }
.sekcja-tytul { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin: 36px 0 12px }
.sekcja-tytul h2 { font-size: 22px }
.sekcja-tytul a { color: var(--dkte); font-weight: 600; text-decoration: none; font-size: 14.5px }
.kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px }
.kafel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--cien); display: grid; gap: 4px }
.kafel .etyk { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.kafel .liczba { font: 700 28px/1.15 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.kafel .opis { font-size: 13.5px; color: var(--muted) }
.kafel.pc .liczba { color: var(--pc) }
.siatka-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; margin-top: 16px }
@media (max-width: 860px) { .siatka-2 { grid-template-columns: minmax(0, 1fr) } }
.klienci { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
.klient { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 16px 20px; box-shadow: var(--cien); display: grid; gap: 8px; position: relative; overflow: hidden; text-decoration: none; color: inherit }
.klient::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--k) }
.klient b { font-size: 17px }
.klient .nast { font-size: 13.5px; color: var(--muted) }
.klient .akcje { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.klient .akcje a { font: 600 13.5px var(--sans); color: var(--dkte); text-decoration: none; padding: 6px 12px; border-radius: 8px; background: var(--sel) }
.pusto-male { color: var(--muted); font-size: 14px; padding: 8px 0 }

/* wiersz publikacji (start, dzień w kalendarzu, lista) */
.pub { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line) }
.pub:first-child { border-top: 0; padding-top: 2px }
.pub .czas { font: 700 14px/1.4 var(--sans); font-variant-numeric: tabular-nums }
.pub .czas small { display: block; font: 500 11.5px var(--sans); color: var(--muted) }
.pub .tytul { font-weight: 600; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere }
.pub .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px }
.pub-info { font-size: 12.5px; color: var(--muted); margin-top: 5px }
.pub.po { opacity: .6 }
.znacznik { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--sel); color: var(--fg); white-space: nowrap; text-decoration: none }
.znacznik svg { width: 13px; height: 13px; flex: none }
.znacznik.pc { background: var(--pc-soft); color: var(--pc) }
.znacznik.ok { background: var(--ok-soft); color: var(--ok) }
.znacznik.zle { background: var(--zle-soft); color: var(--zle) }
.znacznik.klient-z { background: transparent; border: 1px solid var(--line); color: var(--fg) }
.dni-pc { display: grid; gap: 2px }
.dzien-pc { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px }
.dzien-pc:first-child { border-top: 0 }
.dzien-pc b { font-weight: 600 }
.dzien-pc .godz { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pc) }
.dzien-pc .nie { color: var(--muted) }

/* ── kalendarz ── */
.kal-pasek { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px }
.kal-nawig { display: flex; align-items: center; gap: 6px }
.kal-nawig h2 { min-width: 210px; text-align: center; text-transform: capitalize }
.ikon-btn { height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; display: inline-grid; place-items: center; font: 600 14px var(--sans) }
.ikon-btn:hover { background: var(--sel) }
.przelacznik { display: inline-flex; background: var(--sel); border-radius: 11px; padding: 3px }
.przelacznik button { border: 0; background: transparent; font: 600 14px var(--sans); color: var(--muted); padding: 7px 14px; border-radius: 8px; cursor: pointer }
.przelacznik button[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: var(--cien) }
.filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px }
.filtr { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px var(--sans); border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 999px; padding: 7px 13px; cursor: pointer }
.filtr[aria-pressed="true"] { border-color: var(--fg) }
.filtry.czesc .filtr[aria-pressed="false"] .kropka { opacity: .35 }
.filtry.czesc .filtr[aria-pressed="false"] { color: var(--muted) }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-bottom: 14px }
.legenda span { display: inline-flex; align-items: center; gap: 6px }
.legenda svg { width: 14px; height: 14px }
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.kal-tyg { background: var(--card); padding: 9px 10px; font: 600 11.5px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .08em }
.kal-dzien { background: var(--card); min-height: 104px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; border: 0; font: inherit; color: inherit; min-width: 0 }
.kal-dzien:hover { background: color-mix(in srgb, var(--sel) 55%, var(--card)) }
.kal-dzien.inny { background: color-mix(in srgb, var(--bg) 70%, var(--card)); color: var(--muted) }
.kal-dzien[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--dkte) }
.kal-glowa { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 2px }
.kal-dzien .nr { font: 600 13px var(--sans); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-variant-numeric: tabular-nums }
.kal-dzien.dzis .nr { background: var(--dkte); color: #fff }
.kal-pc { font: 600 11px/1 var(--sans); color: var(--pc); background: var(--pc-soft); border-radius: 6px; padding: 4px 6px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap }
.kal-pc svg { width: 12px; height: 12px }
.kal-poz { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; background: color-mix(in srgb, var(--k) 9%, var(--card)); border-left: 3px solid var(--k); overflow: hidden; white-space: nowrap; min-width: 0 }
.kal-poz svg { width: 11px; height: 11px; flex: none; color: var(--k) }
.kal-poz .g { font-weight: 700; font-variant-numeric: tabular-nums }
.kal-poz .t { overflow: hidden; text-overflow: ellipsis }
.kal-poz.po { opacity: .5 }
.kal-poz.pc .g { color: var(--pc) }
.kal-wiecej { font-size: 12px; color: var(--muted); padding: 1px 6px; font-weight: 600 }
.kal-szczegoly { margin-top: 16px }
.kal-szczegoly .naglowek { margin-bottom: 8px }
.pc-pasek { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--pc-soft); color: var(--pc); font-size: 14px; font-weight: 600; margin-bottom: 8px }
.pc-pasek.nie { background: var(--ok-soft); color: var(--ok) }
.pc-pasek svg { width: 16px; height: 16px }
.lista-dni { display: grid; gap: 14px }
.lista-dni .karta h3 { margin: 0 0 6px; font: 700 16px var(--sans); display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
@media (max-width: 760px) {
  .kal-dzien { min-height: 58px; padding: 4px }
  .kal-dzien .kal-pozycje { flex-direction: row; flex-wrap: wrap; gap: 3px }
  .kal-poz { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--k) }
  .kal-poz > * { display: none }
  .kal-pc span, .kal-wiecej { display: none }
  .kal-nawig h2 { min-width: 0; font-size: 18px }
}
.kal-pozycje { display: flex; flex-direction: column; gap: 3px; min-width: 0 }

/* ── widok klienta: dotychczasowa treść w węższej kolumnie ── */
#v-klient { max-width: 980px }
.glowa-klienta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px }
.glowa-klienta h1 { margin: 0 }
.glowa-klienta .kropka { width: 14px; height: 14px }

/* ── DKTE Group: stopki, loga, kolory ── */
.dkte .btn:not(.sec) { background: var(--dkte) }
.stopki { display: grid; gap: 16px }
.podglad { background: #fff; border: 1px solid #E3E7EF; border-radius: 14px; padding: 22px; overflow-x: auto; color-scheme: light }
.formularz { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px }
.formularz label { display: grid; gap: 5px; font: 600 13px var(--sans); color: var(--muted) }
.formularz .szeroko { grid-column: 1 / -1 }
.formularz input { font: 400 15px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; min-width: 0 }
.formularz small { font-weight: 400 }
.ok-info { color: var(--ok) } .zle-info { color: var(--warn) }
.loga { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px }
.logo { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0; box-shadow: var(--cien) }
.logo .obraz { position: relative; background: #fff; border-radius: 12px; aspect-ratio: 4 / 3; border: 1px solid #EEF1F6 }
.logo img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain }
.logo .btn { justify-self: start; padding: 8px 14px; font-size: 13.5px; text-decoration: none }
.kolory { display: flex; flex-wrap: wrap; gap: 10px }
.kolor { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 999px; padding: 6px 16px 6px 6px; font: 600 14px var(--sans); cursor: pointer }
.kolor i { width: 30px; height: 30px; border-radius: 50%; display: block }
.dkte ol { margin: 0; padding-left: 20px } .dkte li { margin-bottom: 6px }
.dkte code { background: var(--sel); padding: 1px 6px; border-radius: 6px }