/* Kapitan UI — komponenty. Wartości tylko z tokens.css (var(--…)). Prefiks klas: k- */
.k-app{font-family:var(--font-sans);font-size:15px;line-height:24px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.k-app *{box-sizing:border-box}
body.k-app{margin:0;min-height:100vh}
.k-num{font-family:var(--font-mono);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}

/* Układ aplikacji */
.k-shell{display:grid;grid-template-columns:var(--nav-w,248px) minmax(0,1fr);min-height:100%}
.k-nav{overflow-y:auto;background:var(--nav-bg);color:var(--nav-ink);padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line)}
.k-nav__brand{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-3);font-weight:700;font-size:18px;line-height:24px}
.k-nav__ver{font-size:12px;font-weight:500;color:var(--nav-ink-muted)}
.k-nav__group{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--nav-ink-muted);padding:var(--space-4) var(--space-3) var(--space-1)}
.k-nav__item{display:flex;align-items:center;gap:var(--space-3);min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--nav-ink-muted);font-weight:500;text-decoration:none;transition:background .15s ease-out,color .15s ease-out}
.k-nav__item:hover{background:var(--nav-active-bg);color:var(--nav-ink)}
.k-nav__item[aria-current="page"]{background:var(--nav-active-bg);color:var(--nav-active-ink);font-weight:600}
.k-nav__item:focus-visible{outline:2px solid var(--nav-focus);outline-offset:2px}
.k-icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.k-main{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.k-top{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.k-top__title{margin:0;font-size:22px;line-height:28px;font-weight:650;margin-right:auto}

/* Nagłówek strony publicznej */
.k-header{background:var(--nav-bg);color:var(--nav-ink);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line)}
.k-header__name{font-weight:700;font-size:20px;line-height:24px}
.k-header__sub{font-size:13px;line-height:20px;color:var(--nav-ink-muted)}
.k-page{max-width:720px;margin:0 auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}

/* Karty */
.k-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:var(--space-5)}
.k-card--link{display:flex;flex-direction:column;gap:var(--space-2);color:inherit;text-decoration:none;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.k-card--link:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.k-card--link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.k-h1{margin:0 0 var(--space-2);font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.01em}
.k-h2{margin:0;font-size:17px;line-height:24px;font-weight:600}
.k-muted{color:var(--ink-muted)}
.k-small{font-size:13px;line-height:20px}
.k-link{color:var(--accent-ink);font-weight:600;text-decoration:none}
.k-link:hover{text-decoration:underline}
.k-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.k-list{margin:0;padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}

/* Ramka informacyjna */
.k-callout{background:var(--accent-soft);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.k-callout strong{color:var(--accent-ink)}

/* Przyciski i pola */
.k-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 15px/24px var(--font-sans);cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out}
.k-btn:hover{background:var(--surface-2)}
.k-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.k-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.k-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.k-btn--ghost{border-color:transparent;background:transparent;color:var(--accent-ink)}
.k-btn--ghost:hover{background:var(--accent-soft)}
.k-btn[disabled]{opacity:.5;cursor:not-allowed}
@media (pointer:coarse){.k-btn,.k-input,.k-nav__item{min-height:44px}}
.k-field{display:flex;flex-direction:column;gap:var(--space-1)}
.k-label{font-size:13px;line-height:20px;font-weight:600}
.k-input{min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:400 15px/24px var(--font-sans)}
.k-input::placeholder{color:var(--ink-muted)}
.k-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--focus-ring)}
.k-input[aria-invalid="true"]{border-color:var(--bad-ink)}
.k-hint{font-size:13px;line-height:20px;color:var(--ink-muted)}
.k-hint--bad{color:var(--bad-ink)}

/* Zakładki widoków */
.k-tabs{display:flex;gap:var(--space-1);flex-wrap:wrap}
.k-tab{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-muted);font:500 14px/20px var(--font-sans);cursor:pointer}
.k-tab:hover{border-color:var(--line-strong);color:var(--ink)}
.k-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.k-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Kanban */
.k-board{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--space-4);align-items:start}
.k-col{background:var(--surface-2);border-radius:var(--radius-lg);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);min-height:200px}
.k-col__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) var(--space-2)}
.k-col__title{font-size:15px;line-height:24px;font-weight:600;margin:0}
.k-count{min-width:28px;height:24px;padding:0 var(--space-2);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-muted)}
.k-count--alert{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.k-add{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:40px;border:1px dashed var(--line-strong);border-radius:var(--radius-md);background:transparent;color:var(--ink-muted);font:500 14px/20px var(--font-sans);cursor:pointer}
.k-add:hover{background:var(--surface);color:var(--ink)}
.k-empty{padding:var(--space-5) var(--space-3);text-align:center;color:var(--ink-muted);font-size:13px;line-height:20px}
.k-ticket .k-badge{align-self:flex-start}
.k-ticket{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}

/* Plakietki statusu — zawsze słowo (i ikona), nigdy sam kolor */
.k-badge{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:13px;line-height:20px;font-weight:600}
.k-badge--ok{background:var(--ok-bg);color:var(--ok-ink)}
.k-badge--warn{background:var(--warn-bg);color:var(--warn-ink)}
.k-badge--bad{background:var(--bad-bg);color:var(--bad-ink)}

/* Tabele */
.k-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;font-size:15px}
.k-table th{background:var(--surface-2);text-align:left;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:var(--space-3) var(--space-4)}
.k-table td{padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);vertical-align:middle}
.k-table tbody tr:hover td{background:var(--surface-2)}
.k-table .k-right{text-align:right}

/* Okno dialogowe, powiadomienie */
.k-overlay{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:var(--space-5);z-index:50}
.k-dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);width:min(480px,100%);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.k-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2)}
.k-toast{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-2);padding:var(--space-3) var(--space-4)}

/* Pozostałe kontrolki */
.k-check{display:flex;align-items:center;gap:var(--space-2);min-height:40px}
.k-check input{width:20px;height:20px;accent-color:var(--accent)}
.k-btn--danger{background:var(--bad-bg);border-color:var(--bad-ink);color:var(--bad-ink)}
.k-btn--danger:hover{background:var(--bad-bg);filter:brightness(.97)}
.k-nav__spacer{flex:1}
.k-nav__user{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-top:1px solid var(--nav-active-bg);margin-top:var(--space-2);font-weight:600}
.k-avatar{width:28px;height:28px;border-radius:50%;background:var(--nav-active-bg);color:var(--nav-active-ink);display:grid;place-items:center;font-size:12px}
.k-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Przełącznik motywu: jedna ikona (jasny <-> ciemny). Znacznik: <button type="button" class="k-theme-toggle" data-kapitan-theme-toggle></button>.
   Ikonę (słońce w trybie ciemnym, księżyc w jasnym), title i aria-label wstawia js/theme.js. Domyślnie na pasku nawigacji (nav-bg);
   .k-theme-toggle--surface — na tle bg / surface (np. nagłówek strony publicznej, stopka). */
.k-theme-toggle{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--nav-ink-muted);cursor:pointer;transition:background .15s ease-out,color .15s ease-out}
.k-theme-toggle:hover{background:var(--nav-active-bg);color:var(--nav-ink)}
.k-theme-toggle:focus-visible{outline:2px solid var(--nav-focus);outline-offset:2px}
.k-theme-toggle--surface{color:var(--ink-muted)}
.k-theme-toggle--surface:hover{background:var(--surface-2);color:var(--ink)}
.k-theme-toggle--surface:focus-visible{outline-color:var(--focus-ring)}
@media (pointer:coarse){.k-theme-toggle{width:44px;height:44px}}

@media (max-width:860px){.k-shell{grid-template-columns:1fr}.k-nav{flex-direction:row;overflow-x:auto;align-items:center}.k-nav__group,.k-nav__brand{display:none}.k-board{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.k-app *{transition:none!important}}