/* kubit · ui.css v1.2 — komponenty (wymaga tokens.css; zero kolorów na sztywno) */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
     font:400 var(--fs-sm)/var(--lh) var(--fb)}
h1,h2,h3{font-family:var(--fd);font-weight:600;line-height:1.3;margin:0}
h1{font-size:var(--fs-xl)} h2{font-size:var(--fs-lg)} h3{font-size:var(--fs-md)}
p{margin:0 0 var(--s3)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.logo-stroke{stroke:currentColor}
.logo-bit{fill:var(--accent)}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:16px;height:16px}

.nav{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);
     background:var(--surface);border-bottom:1px solid var(--border)}
.nav__spacer{margin-left:auto}
.brand{display:inline-flex;align-items:center;gap:10px;
       font:600 18px var(--fd);letter-spacing:-.02em;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text);text-decoration:none}
.brand .pl{color:var(--accent)}

.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  display:none;gap:2px;background:var(--surface);
  border-top:1px solid var(--border);
  padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;font:600 11px var(--fd);color:var(--text-muted);
  text-decoration:none;border-radius:var(--r-sm)}
.bottomnav a[aria-current="page"]{color:var(--accent)}
@media (max-width:719px){.bottomnav{display:flex}.app{padding-bottom:76px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--touch);padding:10px 18px;border:0;border-radius:var(--r);
  cursor:pointer;background:var(--accent);color:var(--accent-contrast);
  font:600 var(--fs-sm) var(--fd);
  transition:background var(--tr),border-color var(--tr),color var(--tr)}
.btn:hover{background:var(--accent-strong)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn .ic{width:18px;height:18px}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn--ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn--danger{background:var(--danger);color:var(--accent-contrast)}
.btn--danger:hover{filter:brightness(.92)}
.btn--sm{min-height:36px;padding:6px 12px;font-size:var(--fs-xs)}
.btn--block{width:100%}
.btn--loading{position:relative;color:transparent}
.btn--loading::after{content:"";position:absolute;width:16px;height:16px;
  border-radius:50%;border:2px solid var(--accent-contrast);border-top-color:transparent;
  animation:kubit-spin .7s linear infinite}
.btn--ghost.btn--loading::after{border-color:var(--text);border-top-color:transparent}
@keyframes kubit-spin{to{transform:rotate(360deg)}}

.field{display:flex;flex-direction:column;gap:6px;max-width:380px}
.label{font:600 var(--fs-xs) var(--fd)}
.input,.select{width:100%;min-height:var(--touch);background:var(--surface);
  color:var(--text);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 12px;font:400 var(--fs-sm) var(--fb)}
.textarea{width:100%;min-height:96px;resize:vertical;background:var(--surface);
  color:var(--text);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 12px;font:400 var(--fs-sm) var(--fb)}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring)}
.input--error{border-color:var(--danger)}
.hint{font-size:var(--fs-xs);color:var(--text-muted)}
.error{font-size:var(--fs-xs);font-weight:500;color:var(--danger)}
.check,.radio{display:flex;align-items:center;gap:var(--s2);cursor:pointer;
  font-size:var(--fs-sm);min-height:var(--touch)}
.check input,.radio input{width:16px;height:16px;accent-color:var(--accent)}

.amount{position:relative;max-width:220px}
.amount .input{padding-right:48px;font-family:var(--fm);
  font-variant-numeric:tabular-nums;text-align:right}
.amount__suf{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font:500 13px var(--fm);color:var(--text-muted);pointer-events:none}

.seg{display:inline-flex;gap:2px;background:var(--surface-2);
  border-radius:var(--r);padding:3px}
.seg button{border:0;background:none;cursor:pointer;padding:8px 14px;
  border-radius:var(--r-sm);font:600 13px var(--fd);color:var(--text-muted);
  min-height:38px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--accent);
  box-shadow:var(--shadow-1)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{cursor:pointer;border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:var(--r-full);padding:7px 14px;
  font:600 13px var(--fd);min-height:38px}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft)}

.steps{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:8px;font:600 12px var(--fd);
  color:var(--text-muted)}
.steps li::before{content:attr(data-n);display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);font:600 12px var(--fd)}
.steps li[aria-current="step"]{color:var(--accent)}
.steps li[aria-current="step"]::before{border-color:var(--accent);
  background:var(--accent);color:var(--accent-contrast)}
.steps li[data-done]::before{content:"✓";border-color:var(--success);color:var(--success)}

.tt{position:relative;display:inline-flex;cursor:help;
  border-bottom:1px dashed var(--text-muted)}
.tt::after{content:attr(data-tip);position:absolute;left:50%;
  bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  box-shadow:var(--shadow-2);border-radius:var(--r-sm);padding:6px 10px;
  font:400 12px var(--fb);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--tr);z-index:var(--z-dropdown)}
.tt:hover::after,.tt:focus-visible::after{opacity:1}

.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:var(--s4);box-shadow:var(--shadow-1)}
.card__label{font:500 var(--fs-xs) var(--fm);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted)}
.card__value{font:500 var(--fs-lg) var(--fm);font-variant-numeric:tabular-nums;
  margin:8px 0 0}
.card__foot{margin-top:var(--s3)}
.num{font-family:var(--fm);font-variant-numeric:tabular-nums;text-align:right}
.delta{font:600 12px var(--fm)}
.delta--up{color:var(--success)}
.delta--down{color:var(--danger)}

.countdown{display:inline-flex;align-items:center;gap:6px;
  font:600 12px var(--fd);color:var(--due-ok)}
.countdown .ic{width:14px;height:14px}
.countdown--warn{color:var(--due-warn)}
.countdown--urgent,.countdown--overdue{color:var(--due-urgent)}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r)}
.table{width:100%;border-collapse:collapse;background:var(--surface);
  font-size:var(--fs-sm)}
.table th{text-align:left;padding:12px 16px;
  font:600 var(--fs-xs) var(--fd);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);border-bottom:1px solid var(--border)}
.table td{padding:12px 16px;border-bottom:1px solid var(--border)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.row-skeleton{display:flex;gap:16px;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--border)}
.row-skeleton .skeleton{flex:1}
.row-skeleton .skeleton:first-child{flex:0 0 56px}

.badge{display:inline-flex;align-items:center;gap:6px;
  font:600 var(--fs-xs) var(--fd);padding:3px 10px;border-radius:var(--r-full)}
.badge .ic{width:12px;height:12px}
.badge--paid{color:var(--success);background:var(--success-soft)}
.badge--pending{color:var(--warning);background:var(--warning-soft)}
.badge--overdue{color:var(--danger);background:var(--danger-soft)}
.badge--draft{color:var(--text-muted);background:var(--surface-2)}
.badge--ksef{color:var(--info);background:var(--info-soft)}

.alert{display:flex;gap:var(--s3);align-items:flex-start;
  padding:12px 16px;border-radius:var(--r);border-left:4px solid;
  font-size:var(--fs-sm)}
.alert b{display:block;font:600 var(--fs-sm) var(--fd);margin-bottom:2px}
.alert--success{border-color:var(--success);background:var(--success-soft);color:var(--success)}
.alert--warning{border-color:var(--warning);background:var(--warning-soft);color:var(--warning)}
.alert--danger{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.alert--info{border-color:var(--info);background:var(--info-soft);color:var(--info)}

.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--border)}
.tab{background:none;border:0;cursor:pointer;padding:10px 16px;margin-bottom:-1px;
  font:600 var(--fs-sm) var(--fd);color:var(--text-muted);
  border-bottom:2px solid transparent;min-height:var(--touch)}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.pager{display:flex;gap:6px;align-items:center}
.pager button{min-width:36px;height:36px;cursor:pointer;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-sm);font:500 var(--fs-sm) var(--fb);
  display:inline-flex;align-items:center;justify-content:center}
.pager button:hover{border-color:var(--accent);color:var(--accent)}
.pager button[aria-current="page"]{background:var(--accent);
  color:var(--accent-contrast);border-color:var(--accent)}

.progress{height:8px;border-radius:var(--r-full);background:var(--surface-2);
  overflow:hidden}
.progress__bar{height:100%;border-radius:var(--r-full);background:var(--accent)}
.progress__bar--warning{background:var(--warning)}
.progress__bar--danger{background:var(--danger)}
.skeleton{height:14px;border-radius:var(--r-sm);background:var(--surface-2);
  animation:kubit-pulse 1.6s ease-in-out infinite}
.skeleton--lg{height:24px}
@keyframes kubit-pulse{50%{opacity:.55}}
.empty{text-align:center;padding:var(--s6);color:var(--text-muted)}
.empty h3{color:var(--text);margin-bottom:6px}

dialog{width:min(420px,calc(100vw - 40px));padding:var(--s5);
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
dialog::backdrop{background:rgba(0,0,0,.5)}
.toast{position:fixed;left:50%;bottom:24px;z-index:var(--z-toast);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-left:4px solid var(--success);border-radius:var(--r);
  padding:12px 18px;box-shadow:var(--shadow-2);font-size:var(--fs-sm);
  transition:opacity var(--tr),transform var(--tr)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.menu{display:inline-flex;flex-direction:column;min-width:220px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-2);padding:6px;z-index:var(--z-dropdown)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;
  background:none;cursor:pointer;padding:10px 12px;
  border-radius:var(--r-sm);font:500 14px var(--fb);color:var(--text);
  min-height:var(--touch)}
.menu button:hover{background:var(--surface-2)}

.iconbtn--sm{width:32px;height:32px}
.iconbtn--sm .ic{width:16px;height:16px}
.rowactions{display:flex;gap:6px;justify-content:flex-end}
.only-dark{display:none}
[data-theme="dark"] .only-dark{display:block}
[data-theme="dark"] .only-light{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Kubit JDG App Adapters & Dark Mode HTMX Overrides (v1.3)
   ========================================================================== */

/* Legacy / HTMX Component Aliases */
.btn-green {
  background: var(--success) !important;
  color: var(--accent-contrast) !important;
}
.btn-green:hover {
  filter: brightness(0.92);
}

.btn-purple {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}
.btn-purple:hover {
  background: var(--accent-strong) !important;
}

.btn-red {
  background: var(--danger) !important;
  color: var(--accent-contrast) !important;
}
.btn-red:hover {
  filter: brightness(0.92);
}

.form-input {
  width: 100%;
  min-height: var(--touch);
  padding: 8px 12px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: 400 var(--fs-sm) var(--fb);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font: 600 var(--fs-xs) var(--fd);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--border);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font: 600 var(--fs-xs) var(--fd);
  cursor: pointer;
  transition: all var(--tr);
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* HTMX Async Partials Dark Mode Protection */
[data-theme="dark"] #podsumowanie-wynik div[style*="background: white"],
[data-theme="dark"] #podsumowanie-wynik div[style*="background:white"],
[data-theme="dark"] #roczne-wynik div[style*="background: white"],
[data-theme="dark"] #roczne-wynik div[style*="background:white"],
[data-theme="dark"] .kpi-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-1) !important;
}

[data-theme="dark"] #podsumowanie-wynik div[style*="background: #f8fafc"],
[data-theme="dark"] #podsumowanie-wynik div[style*="background:#f8fafc"],
[data-theme="dark"] #podsumowanie-wynik div[style*="background: #f1f5f9"],
[data-theme="dark"] #podsumowanie-wynik div[style*="background:#f1f5f9"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] #podsumowanie-wynik h1,
[data-theme="dark"] #podsumowanie-wynik h2,
[data-theme="dark"] #podsumowanie-wynik h3,
[data-theme="dark"] #podsumowanie-wynik h4,
[data-theme="dark"] #roczne-wynik h1,
[data-theme="dark"] #roczne-wynik h2,
[data-theme="dark"] #roczne-wynik h3,
[data-theme="dark"] #roczne-wynik h4 {
  color: var(--text) !important;
}

[data-theme="dark"] table {
  color: var(--text) !important;
  background: var(--surface) !important;
}

[data-theme="dark"] table th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] table td {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="dark"] tr:hover td {
  background: var(--surface-2) !important;
}

[data-theme="dark"] .tabs {
  border-bottom-color: var(--border) !important;
}

/* Settings Subtabs Dark Mode */
.settings-tab-btn {
  font-family: var(--fd) !important;
  transition: all var(--tr) !important;
}

[data-theme="dark"] .settings-tab-btn {
  color: var(--text-muted) !important;
  background: transparent !important;
}

[data-theme="dark"] .settings-tab-btn.active,
[data-theme="dark"] .settings-tab-btn[style*="color:#7c3aed"],
[data-theme="dark"] .settings-tab-btn[style*="color: #7c3aed"],
[data-theme="dark"] .settings-tab-btn[style*="border-bottom: 3px solid #7c3aed"],
[data-theme="dark"] .settings-tab-btn[style*="border-bottom:3px solid #7c3aed"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

[data-theme="dark"] div[style*="rgba(255, 255, 255, 0.9)"],
[data-theme="dark"] div[style*="rgba(255,255,255,0.9)"],
[data-theme="dark"] div[style*="display: flex; background: white; border-bottom: 1px solid #e2e8f0"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] form#settings-form {
  background: var(--surface) !important;
}

[data-theme="dark"] .settings-tab-content div[style*="background: #f8fafc"],
[data-theme="dark"] .settings-tab-content div[style*="background:#f8fafc"],
[data-theme="dark"] .settings-tab-content div[style*="background: #fffbeb"],
[data-theme="dark"] .settings-tab-content div[style*="background:#fffbeb"] {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .settings-tab-content label[style*="background: #f0fdf4"],
[data-theme="dark"] .settings-tab-content label[style*="background:#f0fdf4"],
[data-theme="dark"] .settings-tab-content label[style*="background: #fdf2f8"],
[data-theme="dark"] .settings-tab-content label[style*="background:#fdf2f8"] {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .settings-tab-content label,
[data-theme="dark"] .settings-tab-content b,
[data-theme="dark"] .settings-tab-content h4 {
  color: var(--text) !important;
}

[data-theme="dark"] .settings-tab-content p {
  color: var(--text-muted) !important;
}