/* Zadania zespolu. Tokeny i klasy h-* z systemu Hegios (DESIGN.md): paleta chlodna (granat, niebieski, grafit,
   antracyt), twarde katy wszedzie (takze kwadraty z inicjalami), zielony tylko dla "zrobione", czerwony dla zaleglych
   i bledow. Fonty systemowe. Od 900 px menu po lewej, ponizej szuflada. Od 760 px okno zadania z prawej, ponizej
   na caly ekran. Kolor projektu wybiera zespol (wyjatek od palety jak w Zadaniach Hegios). */

:root {
    --h-bg: #EEF0F3; --h-surface: #FFFFFF; --h-text: #23272E; --h-text-muted: #5B6673;
    --h-border: #CBD1DA; --h-border-strong: #7D889A;
    --h-accent: #2E64A8; --h-accent-dark: #255A99; --h-accent-bg: #E8EFF8;
    --h-navy: #1C2E4A; --h-anthracite: #23272E; --h-graphite: #4B5563;
    --h-nav-bg: #1C2E4A; --h-nav-text: #E6EBF2; --h-nav-text-muted: #9AA7BA;
    --h-nav-active-bg: #2D4567; --h-nav-active-text: #FFFFFF; --h-nav-active-bar: #7FAEE8; --h-nav-hover-bg: #25384F;
    --h-toast-bg: #23272E; --h-toast-text: #F2F4F7;
    --h-success: #276B45; --h-success-bg: #E6F2EA;
    --h-warning: #B3261E; --h-warning-bg: #FBEAE7;
    --h-error: #7A1B1F; --h-error-bg: #F3DCDC;
    --h-info: #4B5563; --h-info-bg: #E9ECF1;
    --h-weekend: #F5F6F8;

    --h-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --h-font-mono: ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace;
    --h-fs-11: 11px; --h-fs-12: 12px; --h-fs-13: 13px; --h-fs-14: 14px; --h-fs-15: 15px;
    --h-fs-16: 16px; --h-fs-20: 20px; --h-fs-22: 22px; --h-fs-24: 24px;
    --h-fw-reg: 400; --h-fw-med: 500; --h-fw-sem: 600;
    --h-lh-tight: 1.45; --h-lh-base: 1.55;
    --h-sp-1: 4px; --h-sp-2: 8px; --h-sp-3: 12px; --h-sp-4: 16px; --h-sp-5: 24px; --h-sp-6: 32px; --h-sp-7: 48px;
    --h-shadow-sm: 0 1px 2px rgba(35,39,46,.05);
    --h-shadow-md: 0 2px 6px rgba(35,39,46,.08);
    --h-shadow-lg: 0 6px 16px rgba(35,39,46,.10);
    --h-shadow-xl: 0 12px 32px rgba(35,39,46,.18);
    --h-btn-pad: 8px 14px; --h-input-pad: 8px 10px;
    --sd-w: 240px; --kt-w: 600px; --bar-h: 56px;
    --tap: 32px;
}
@media (hover: none) and (pointer: coarse) { :root { --tap: 44px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    font-family: var(--h-font-ui); background: var(--h-bg); color: var(--h-text);
    font-size: var(--h-fs-14); line-height: var(--h-lh-base); -webkit-text-size-adjust: 100%;
    overflow: hidden;
}
:where(a:any-link) { color: var(--h-accent); }
:where(input, textarea)::placeholder { color: var(--h-text-muted); opacity: 1; }
:where(button, input, select, textarea, img) { border-radius: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.h-text-muted { color: var(--h-text-muted); }
.h-num { font-family: var(--h-font-mono); font-feature-settings: 'tnum'; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -- przyciski, pola, ikony -- */
.h-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: var(--h-btn-pad);
    min-height: var(--tap); border: 1px solid transparent; font-size: var(--h-fs-14); font-weight: var(--h-fw-med);
    line-height: 1; white-space: nowrap; background: none; transition: background .15s, border-color .15s, color .15s;
}
.h-btn:disabled { opacity: .5; cursor: not-allowed; }
.h-btn-primary { background: var(--h-text); color: #fff; }
.h-btn-primary:hover:not(:disabled) { background: #000; }
.h-btn-accent { background: var(--h-accent); color: #fff; }
.h-btn-accent:hover:not(:disabled) { background: var(--h-accent-dark); }
.h-btn-secondary { background: var(--h-surface); border-color: var(--h-border-strong); }
.h-btn-secondary:hover:not(:disabled) { background: var(--h-bg); }
.h-btn-danger { background: var(--h-surface); color: var(--h-error); border-color: var(--h-error); }
.h-btn-danger:hover:not(:disabled) { background: var(--h-error-bg); }
.h-btn-ghost { color: var(--h-text-muted); }
.h-btn-ghost:hover:not(:disabled) { color: var(--h-text); background: var(--h-bg); }
.h-btn-ghost.is-active { color: var(--h-accent-dark); background: var(--h-accent-bg); }
.h-btn-sm { padding: 6px 10px; font-size: var(--h-fs-13); min-height: 28px; }
.h-btn:focus-visible, .h-icon-btn:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 1px; }
.h-icon-btn {
    background: transparent; border: 1px solid transparent; width: var(--tap); height: var(--tap); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; color: var(--h-text-muted);
}
.h-icon-btn:hover { color: var(--h-text); background: var(--h-bg); }
.h-icon { width: 18px; height: 18px; stroke-width: 1.75; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.h-icon-sm { width: 14px; height: 14px; }
.h-input, .h-select, .h-textarea {
    font-size: var(--h-fs-14); background: var(--h-surface); border: 1px solid var(--h-border-strong);
    padding: var(--h-input-pad); line-height: var(--h-lh-base); width: 100%; min-height: var(--tap);
}
.h-input:focus, .h-select:focus, .h-textarea:focus { outline: none; border-color: var(--h-accent); box-shadow: 0 0 0 3px rgba(46,100,168,.18); }
.h-textarea { resize: vertical; }
.h-label { font-size: var(--h-fs-13); color: var(--h-text-muted); font-weight: var(--h-fw-med); }
.h-field { display: flex; flex-direction: column; gap: var(--h-sp-1); min-width: 0; }
.h-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: var(--h-fs-12); font-weight: var(--h-fw-med); line-height: 18px; white-space: nowrap; }
.h-badge-accent { color: var(--h-accent-dark); background: var(--h-accent-bg); }
.h-badge-neutral { color: var(--h-graphite); background: var(--h-info-bg); }
.h-badge-warning { color: #fff; background: var(--h-warning); }
.h-badge-success { color: var(--h-success); background: var(--h-success-bg); }
.h-empty { color: var(--h-text-muted); padding: var(--h-sp-6) var(--h-sp-4); text-align: center; }
.h-alert { padding: 10px 14px; border: 1px solid var(--h-border-strong); background: var(--h-info-bg); font-size: var(--h-fs-13); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.h-alert-warning { background: var(--h-warning-bg); border-color: var(--h-warning); }
.h-q-tip { position: fixed; z-index: 1300; max-width: 280px; background: var(--h-anthracite); color: #F2F4F7; font-size: var(--h-fs-12); line-height: 1.45; padding: 8px 10px; box-shadow: var(--h-shadow-lg); pointer-events: none; }

/* -- kwadrat z inicjalami, kolor projektu -- */
.av {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px;
    color: #fff; font-size: var(--h-fs-11); font-weight: var(--h-fw-sem); letter-spacing: .02em; line-height: 1;
    background: var(--av, var(--h-graphite));
}
.av-lg { width: 32px; height: 32px; font-size: var(--h-fs-13); }
.av-sm { width: 20px; height: 20px; font-size: 10px; }
.av-off { opacity: .45; }
.av-none { background: transparent; color: var(--h-text-muted); border: 1px dashed var(--h-border-strong); }
.pk { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; background: var(--pk, var(--h-graphite)); }

/* -- uklad -- */
.app { display: grid; grid-template-columns: var(--sd-w) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--h-surface); }
.view { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; min-height: 0; position: relative; }
.view-pad { padding: var(--h-sp-5) var(--h-sp-6); max-width: 1100px; }

/* menu */
.sd { background: var(--h-nav-bg); color: var(--h-nav-text); display: flex; flex-direction: column; min-height: 0; padding-top: env(safe-area-inset-top); }
.sd-head { display: flex; align-items: center; height: var(--bar-h); padding: 0 var(--h-sp-4); gap: var(--h-sp-2); flex-shrink: 0; }
.sd-team { font-weight: var(--h-fw-sem); font-size: var(--h-fs-16); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd .h-icon-btn { color: var(--h-nav-text-muted); }
.sd .h-icon-btn:hover { color: var(--h-nav-active-text); background: var(--h-nav-hover-bg); }
.sd-close { display: none; }
.sd-nav { padding: var(--h-sp-2) 0; flex-shrink: 0; }
.sd-item {
    display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px var(--h-sp-4) 6px 13px;
    color: var(--h-nav-text); text-decoration: none; border-left: 3px solid transparent; font-size: var(--h-fs-14);
}
.sd-item:hover { background: var(--h-nav-hover-bg); }
.sd-item.is-active { background: var(--h-nav-active-bg); color: var(--h-nav-active-text); border-left-color: var(--h-nav-active-bar); }
.sd-item .h-icon { color: var(--h-nav-text-muted); }
.sd-item.is-active .h-icon { color: var(--h-nav-active-text); }
.sd-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-count { font-size: var(--h-fs-12); color: var(--h-nav-text-muted); }
.sd-count-new { color: var(--h-navy); background: var(--h-nav-active-bar); padding: 0 6px; font-weight: var(--h-fw-sem); }
.sd-item .pk { width: 12px; height: 12px; margin: 0 3px; }
.sd-projects-head { display: flex; align-items: center; justify-content: space-between; padding: var(--h-sp-3) var(--h-sp-3) var(--h-sp-1) var(--h-sp-4); font-size: var(--h-fs-12); color: var(--h-nav-text-muted); text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--h-nav-hover-bg); }
.sd-projects { flex: 1; overflow-y: auto; padding-bottom: var(--h-sp-3); min-height: 0; }
.sd-sub { padding: var(--h-sp-2) var(--h-sp-4); font-size: var(--h-fs-12); color: var(--h-nav-text-muted); background: none; border: 0; text-align: left; width: 100%; }
.sd-sub:hover { color: var(--h-nav-text); }
.sd-foot { border-top: 1px solid var(--h-nav-hover-bg); padding: var(--h-sp-2) 0 calc(var(--h-sp-2) + env(safe-area-inset-bottom)); flex-shrink: 0; }
.sd-veil { position: fixed; inset: 0; background: rgba(28,46,74,.35); z-index: 40; }

/* pasek nad widokiem */
.bar { display: flex; align-items: center; gap: var(--h-sp-3); min-height: var(--bar-h); padding: var(--h-sp-2) var(--h-sp-5); border-bottom: 1px solid var(--h-border); flex-shrink: 0; flex-wrap: wrap; padding-top: max(var(--h-sp-2), env(safe-area-inset-top)); }
.bar-menu { display: none; }
.bar-title { display: flex; align-items: center; gap: var(--h-sp-2); min-width: 0; flex: 1; }
.bar-title h1 { font-size: var(--h-fs-20); font-weight: var(--h-fw-sem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title .pk { width: 14px; height: 14px; }
.bar-tools { display: flex; align-items: center; gap: var(--h-sp-2); flex-wrap: wrap; }
.bar-search { width: 260px; position: relative; }
.bar-find { display: none; }
.bar-tabs { display: flex; gap: 2px; padding: 0 var(--h-sp-5); border-bottom: 1px solid var(--h-border); flex-shrink: 0; overflow-x: auto; }
.bar-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px 9px; color: var(--h-text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: var(--h-fw-med); }
.bar-tab:hover { color: var(--h-text); }
.bar-tab.is-active { color: var(--h-accent-dark); border-bottom-color: var(--h-accent); }
.bar-tools-sep { width: 1px; height: 20px; background: var(--h-border); }

/* szukanie */
.srch { position: absolute; top: calc(100% + 4px); right: 0; width: min(420px, calc(100vw - 32px)); background: var(--h-surface); border: 1px solid var(--h-border); box-shadow: var(--h-shadow-xl); z-index: 70; max-height: 70vh; overflow-y: auto; }
.srch-h { font-size: var(--h-fs-12); color: var(--h-text-muted); padding: var(--h-sp-2) var(--h-sp-3) 2px; text-transform: uppercase; letter-spacing: .05em; }
.srch-i { display: flex; align-items: center; gap: var(--h-sp-2); padding: 8px var(--h-sp-3); text-decoration: none; color: var(--h-text); }
.srch-i:hover, .srch-i.is-active { background: var(--h-accent-bg); }
.srch-i .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-i .m { font-size: var(--h-fs-12); color: var(--h-text-muted); white-space: nowrap; }
.srch-i.done .t { text-decoration: line-through; color: var(--h-text-muted); }

/* -- odhaczanie -- */
.ck {
    width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--h-border-strong); background: var(--h-surface);
    display: inline-flex; align-items: center; justify-content: center; color: transparent; padding: 0; position: relative;
}
.ck::after { content: ''; position: absolute; inset: -9px; }
.ck:hover { border-color: var(--h-success); color: var(--h-success); }
.ck.on { background: var(--h-success); border-color: var(--h-success); color: #fff; }
.ck .h-icon { width: 12px; height: 12px; stroke-width: 3; }

/* -- lista (projekt i Moje zadania) -- */
.ls { padding: 0 0 var(--h-sp-7); min-width: 640px; }
.ls-head, .ls-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 160px 120px; align-items: center; column-gap: var(--h-sp-2); }
.ls-mine .ls-head, .ls-mine .ls-row { grid-template-columns: 22px minmax(0, 1fr) 200px 120px; }
.ls-head { position: sticky; top: 0; z-index: 3; background: var(--h-surface); border-bottom: 1px solid var(--h-border); font-size: var(--h-fs-12); color: var(--h-text-muted); padding: 6px var(--h-sp-5); }
.ls-head > :first-child { grid-column: 1 / 3; }
.ls-sec { margin-top: var(--h-sp-4); }
.ls-sec-h { display: flex; align-items: center; gap: var(--h-sp-1); padding: 4px var(--h-sp-5) 4px calc(var(--h-sp-5) - 8px); min-height: 40px; }
.ls-sec-h .nm { font-size: var(--h-fs-15); font-weight: var(--h-fw-sem); padding: 2px 6px; border: 1px solid transparent; min-width: 40px; background: none; text-align: left; }
.ls-sec-h .nm:hover { border-color: var(--h-border); }
.ls-sec-h input.nm { border-color: var(--h-accent); outline: none; width: 280px; }
.ls-sec-h .cnt { color: var(--h-text-muted); font-size: var(--h-fs-13); }
.ls-sec-h .h-icon-btn { opacity: .7; }
.ls-sec-h:hover .h-icon-btn { opacity: 1; }
.caret { transition: transform .15s; }
.is-collapsed .caret { transform: rotate(-90deg); }
.is-collapsed .ls-body { display: none; }
.ls-row { min-height: 40px; padding: 4px var(--h-sp-5); border-bottom: 1px solid var(--h-border); background: var(--h-surface); position: relative; cursor: default; -webkit-touch-callout: none; }
.ls-row:hover { background: #F7F8FA; }
.ls-row.is-open { background: var(--h-accent-bg); }
.ls-row.done .ls-t { color: var(--h-text-muted); }
.ls-t { display: flex; align-items: center; gap: var(--h-sp-2); min-width: 0; cursor: pointer; padding: 4px 0; }
.ls-t .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ls-t .par { color: var(--h-text-muted); font-size: var(--h-fs-12); white-space: nowrap; }
.ls-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--h-text-muted); font-size: var(--h-fs-12); flex-shrink: 0; }
.ls-meta span { display: inline-flex; align-items: center; gap: 2px; }
.ls-meta .blk { color: var(--h-warning); }
.ls-cell { display: flex; align-items: center; gap: 6px; min-width: 0; background: none; border: 1px solid transparent; padding: 3px 4px; text-align: left; min-height: 30px; font-size: var(--h-fs-13); }
.ls-cell:hover { border-color: var(--h-border); }
.ls-cell .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-cell.empty { color: var(--h-text-muted); }
.ls-proj { display: flex; align-items: center; gap: 6px; font-size: var(--h-fs-13); min-width: 0; color: var(--h-text-muted); text-decoration: none; }
.ls-proj .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-grip { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 16px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--h-text-muted); opacity: 0; cursor: grab; }
.ls-row:hover .ls-grip { opacity: 1; }
@media (hover: none) { .ls-grip { display: none; } }
.ls-add { display: flex; align-items: center; gap: var(--h-sp-2); padding: 4px var(--h-sp-5) 4px calc(var(--h-sp-5) + 30px); min-height: 40px; border-bottom: 1px solid var(--h-border); }
.ls-add button { background: none; border: 0; color: var(--h-text-muted); padding: 6px 0; text-align: left; flex: 1; }
.ls-add button:hover { color: var(--h-accent); }
.ls-add input { border: 0; outline: none; flex: 1; min-height: 30px; background: transparent; }
.ls-newsec { margin: var(--h-sp-4) var(--h-sp-5); }
.due { white-space: nowrap; }
.due.late { color: var(--h-warning); font-weight: var(--h-fw-med); }
/* zielony tylko dla zrobionych: dzisiejszy termin w kolorze akcentu */
.due.today { color: var(--h-accent-dark); font-weight: var(--h-fw-med); }
.ls-toolbar { display: flex; align-items: center; gap: var(--h-sp-2); padding: var(--h-sp-3) var(--h-sp-5); flex-wrap: wrap; }

/* przeciaganie */
.drag-ghost { position: fixed; z-index: 2000; pointer-events: none; box-shadow: var(--h-shadow-xl); opacity: .95; transform: rotate(1deg); }
.drag-src { opacity: .35; }
.drag-line { height: 2px; background: var(--h-accent); margin: -1px 0; position: relative; z-index: 5; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.drop-on { outline: 2px solid var(--h-accent); outline-offset: -2px; background: var(--h-accent-bg) !important; }

/* -- tablica -- */
.tb { display: flex; gap: var(--h-sp-3); padding: var(--h-sp-4) var(--h-sp-5) var(--h-sp-5); align-items: flex-start; min-height: 100%; width: max-content; }
.tb-col { width: 280px; flex-shrink: 0; background: var(--h-bg); display: flex; flex-direction: column; max-height: calc(100dvh - 190px); }
.tb-col-h { display: flex; align-items: center; gap: var(--h-sp-1); padding: 8px 6px 8px 12px; }
.tb-col-h .nm { font-weight: var(--h-fw-sem); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 1px solid transparent; text-align: left; padding: 2px 4px; }
.tb-col-h input.nm { border-color: var(--h-accent); background: var(--h-surface); outline: none; }
.tb-col-h .cnt { color: var(--h-text-muted); font-size: var(--h-fs-13); }
.tb-cards { padding: 0 8px 4px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 12px; }
.tb-card { background: var(--h-surface); border: 1px solid var(--h-border); padding: 10px 12px; box-shadow: var(--h-shadow-sm); cursor: pointer; display: flex; flex-direction: column; gap: 8px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.tb-card:hover { border-color: var(--h-border-strong); }
.tb-card.is-open { border-color: var(--h-accent); }
.tb-card .tt { display: flex; gap: 8px; align-items: flex-start; }
.tb-card .tt span { overflow-wrap: anywhere; }
.tb-card.done .tt span { color: var(--h-text-muted); }
.tb-card .ck { margin-top: 1px; }
.tb-card .ft { display: flex; align-items: center; gap: 8px; font-size: var(--h-fs-12); color: var(--h-text-muted); }
.tb-card .ft .sp { flex: 1; }
.tb-add { margin: 4px 8px 8px; background: none; border: 0; color: var(--h-text-muted); padding: 8px 4px; text-align: left; }
.tb-add:hover { color: var(--h-accent); background: var(--h-surface); }
.tb-col textarea { margin: 0 8px 8px; width: calc(100% - 16px); min-height: 60px; }
.tb-newcol { width: 240px; flex-shrink: 0; }

/* -- kalendarz -- */
.kl { display: flex; flex-direction: column; height: 100%; min-height: 560px; }
.kl-head { display: flex; align-items: center; gap: var(--h-sp-2); padding: var(--h-sp-3) var(--h-sp-5); }
.kl-head h2 { font-size: var(--h-fs-16); font-weight: var(--h-fw-sem); min-width: 160px; text-transform: capitalize; }
.kl-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--h-border); font-size: var(--h-fs-12); color: var(--h-text-muted); }
.kl-days div { padding: 4px 8px; }
.kl-grid { flex: 1; display: grid; grid-auto-rows: minmax(110px, 1fr); }
.kl-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--h-border); }
.kl-day { border-right: 1px solid var(--h-border); padding: 4px 6px; min-width: 0; }
.kl-day:last-child { border-right: 0; }
.kl-day.we { background: var(--h-weekend); }
.kl-day.other .kl-n { color: var(--h-border-strong); }
.kl-n { font-size: var(--h-fs-12); color: var(--h-text-muted); display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; }
.kl-day.today .kl-n { background: var(--h-accent); color: #fff; font-weight: var(--h-fw-sem); }
.kl-bars { position: absolute; left: 0; right: 0; top: 28px; bottom: 0; pointer-events: none; }
.kl-bar {
    position: absolute; height: 22px; pointer-events: auto; background: var(--h-accent-bg); color: var(--h-accent-dark);
    border-left: 3px solid var(--pk, var(--h-accent)); font-size: var(--h-fs-12); padding: 0 6px; display: flex; align-items: center; gap: 4px;
    overflow: hidden; white-space: nowrap; cursor: pointer; margin: 0 3px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.kl-bar:hover { filter: brightness(.97); box-shadow: var(--h-shadow-md); }
.kl-bar.done { background: var(--h-info-bg); color: var(--h-text-muted); text-decoration: line-through; }
.kl-bar.late { background: var(--h-warning-bg); color: var(--h-warning); }
.kl-bar .av { width: 16px; height: 16px; font-size: 9px; }
.kl-bar span { overflow: hidden; text-overflow: ellipsis; }
.kl-more { position: absolute; font-size: var(--h-fs-12); color: var(--h-text-muted); pointer-events: auto; background: none; border: 0; padding: 0 8px; height: 20px; }
.kl-more:hover { color: var(--h-accent); }
.kl-nodate { padding: var(--h-sp-2) var(--h-sp-5); font-size: var(--h-fs-13); color: var(--h-text-muted); border-top: 1px solid var(--h-border); }

/* -- os czasu: jeden przewijany obszar, kolumna z nazwami i skala przyklejone (sticky) -- */
.os { position: relative; width: max-content; min-width: 100%; --os-l: 300px; }
.os-hdr { position: sticky; top: 0; z-index: 8; display: flex; background: var(--h-surface); border-bottom: 1px solid var(--h-border); }
.os-corner { position: sticky; left: 0; z-index: 9; width: var(--os-l); flex-shrink: 0; height: 52px; background: var(--h-surface); border-right: 1px solid var(--h-border); display: flex; align-items: flex-end; gap: 2px; padding: 0 8px 6px; }
.os-scale { position: relative; height: 52px; flex-shrink: 0; }
.os-scale .m { position: absolute; top: 0; height: 26px; font-size: var(--h-fs-12); font-weight: var(--h-fw-sem); padding: 5px 6px; border-left: 1px solid var(--h-border); white-space: nowrap; overflow: hidden; }
.os-scale .d { position: absolute; top: 26px; height: 26px; font-size: var(--h-fs-11); color: var(--h-text-muted); text-align: center; line-height: 26px; border-left: 1px solid var(--h-border); overflow: hidden; }
.os-scale .d.today { color: var(--h-accent); font-weight: var(--h-fw-sem); }
.os-rows { position: relative; }
.os-bg { position: absolute; top: 0; bottom: 0; left: var(--os-l); pointer-events: none; }
.os-bg div { position: absolute; top: 0; bottom: 0; }
.os-bg .we { background: var(--h-weekend); }
.os-bg .now { width: 2px; background: var(--h-accent); z-index: 3; }
/* linia pod wierszem w kazdej komorce: przyklejona lewa kolumna nie zaslania jej przy ulamkowych pikselach */
.os-r { display: flex; height: 36px; }
.os-r > .os-l, .os-r > .os-c { border-bottom: 1px solid var(--h-border); }
.os-l { position: sticky; left: 0; z-index: 6; width: var(--os-l); flex-shrink: 0; background: var(--h-surface); border-right: 1px solid var(--h-border); display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; min-width: 0; }
.os-l:hover { background: #F7F8FA; }
.os-l .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.os-r.done .os-l .tt { color: var(--h-text-muted); text-decoration: line-through; }
.os-r.is-open .os-l { background: var(--h-accent-bg); }
.os-c { position: relative; flex-shrink: 0; }
.os-c.nodate { cursor: copy; }
.os-c.nodate:hover { background: rgba(46,100,168,.05); }
.os-r.sec .os-l { background: var(--h-bg); font-weight: var(--h-fw-sem); font-size: var(--h-fs-13); cursor: default; }
.os-r.sec .os-c { background: var(--h-bg); }
.os-bar {
    position: absolute; top: 7px; height: 22px; background: var(--pk, var(--h-accent)); color: #fff; font-size: var(--h-fs-12);
    display: flex; align-items: center; padding: 0 8px; white-space: nowrap; cursor: grab; z-index: 4; min-width: 6px;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.os-bar span:not(.ed):not(.dot) { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.os-bar.done { opacity: .5; }
.os-bar.blocked { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }
.os-bar.draft { opacity: .6; }
.os-bar .ed { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.os-bar .ed.l { left: -3px; }
.os-bar .ed.r { right: -3px; }
.os-bar .dot { position: absolute; right: -16px; top: 4px; width: 14px; height: 14px; background: var(--h-surface); border: 2px solid var(--h-accent); cursor: crosshair; opacity: 0; }
.os-bar:hover .dot { opacity: 1; }
@media (hover: none) { .os-bar .dot { opacity: 1; } }
.os-lbl { position: absolute; top: 9px; font-size: var(--h-fs-12); color: var(--h-text-muted); white-space: nowrap; pointer-events: none; z-index: 4; }
.os-svg { position: absolute; left: var(--os-l); top: 0; pointer-events: none; z-index: 5; overflow: visible; }
.os-svg path { fill: none; stroke: var(--h-graphite); stroke-width: 1.5; }
.os-svg path.bad { stroke: var(--h-warning); stroke-width: 2; }
.os-svg path.draft { stroke: var(--h-accent); stroke-dasharray: 4 3; stroke-width: 2; }
.os-svg path.hit { stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.os-tip { position: fixed; z-index: 1300; background: var(--h-anthracite); color: #F2F4F7; font-size: var(--h-fs-12); padding: 4px 8px; pointer-events: none; white-space: nowrap; }

/* -- okno zadania -- */
.kt {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--kt-w), 100vw); background: var(--h-surface); z-index: 50;
    box-shadow: var(--h-shadow-xl); border-left: 1px solid var(--h-border); display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top);
}
.kt-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kt-bar { display: flex; align-items: center; gap: var(--h-sp-2); padding: var(--h-sp-2) var(--h-sp-3) var(--h-sp-2) var(--h-sp-5); border-bottom: 1px solid var(--h-border); min-height: var(--bar-h); flex-shrink: 0; }
.kt-bar .sp { flex: 1; }
.kt-done.on { background: var(--h-success-bg); color: var(--h-success); border-color: var(--h-success); }
.kt-body { flex: 1; overflow-y: auto; padding: var(--h-sp-4) var(--h-sp-5) var(--h-sp-7); -webkit-overflow-scrolling: touch; }
.kt-crumb { font-size: var(--h-fs-13); color: var(--h-text-muted); margin-bottom: var(--h-sp-1); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kt-crumb a { text-decoration: none; }
.kt-title { font-size: var(--h-fs-22); font-weight: var(--h-fw-sem); border: 1px solid transparent; padding: 4px 6px; margin: 0 -7px; width: calc(100% + 14px); resize: none; line-height: 1.3; overflow: hidden; background: none; display: block; }
.kt-title:hover { border-color: var(--h-border); }
.kt-title:focus { border-color: var(--h-accent); outline: none; }
.kt.is-done .kt-title { color: var(--h-text-muted); }
.kt-fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px var(--h-sp-3); align-items: center; margin: var(--h-sp-4) 0; }
.kt-fields > .h-label { padding: 6px 0; align-self: start; }
.kt-val { display: flex; align-items: center; gap: var(--h-sp-2); flex-wrap: wrap; min-height: var(--tap); min-width: 0; }
.kt-pick { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; padding: 4px 6px; min-height: var(--tap); text-align: left; max-width: 100%; }
.kt-pick:hover { border-color: var(--h-border); }
.kt-pick .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-pick.empty { color: var(--h-text-muted); }
.kt-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kt-dates input { width: auto; min-width: 140px; }
.kt-sec { margin-top: var(--h-sp-5); }
.kt-sec-h { display: flex; align-items: center; gap: var(--h-sp-2); font-size: var(--h-fs-13); font-weight: var(--h-fw-sem); color: var(--h-text-muted); margin-bottom: var(--h-sp-2); text-transform: uppercase; letter-spacing: .05em; }
.kt-sec-h .sp { flex: 1; }
.kt-desc { min-height: 90px; }
.kt-dep { display: flex; align-items: center; gap: var(--h-sp-2); padding: 6px 8px; border: 1px solid var(--h-border); margin-bottom: 4px; }
.kt-dep .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.kt-dep.done .tt { text-decoration: line-through; color: var(--h-text-muted); }
.kt-dep.hidden .tt { color: var(--h-text-muted); font-style: italic; cursor: default; }
@media (max-width: 759px) {
    /* waski ekran: tytul w pierwszej linii, daty i osoba pod nim */
    .kt-dep { flex-wrap: wrap; row-gap: 2px; }
    .kt-dep > * { order: 2; }
    .kt-dep .tt { order: 0; flex: 1 1 calc(100% - 64px); white-space: normal; }
    .kt-dep .h-icon-btn { order: 1; }
}
.kt-subs .ls-row { padding-left: 0; padding-right: 0; grid-template-columns: 22px minmax(0, 1fr) 120px 96px; border-bottom: 1px solid var(--h-border); }
.kt-subs .ls-add { padding-left: 30px; padding-right: 0; }
.kt-files { display: flex; flex-wrap: wrap; gap: var(--h-sp-2); }
.kt-file { width: 112px; border: 1px solid var(--h-border); position: relative; background: var(--h-bg); }
.kt-file a { display: block; text-decoration: none; color: var(--h-text); }
.kt-file img { width: 110px; height: 80px; object-fit: cover; display: block; }
.kt-file .ic { width: 110px; height: 80px; display: flex; align-items: center; justify-content: center; color: var(--h-text-muted); }
.kt-file .nm { font-size: var(--h-fs-12); padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--h-surface); }
.kt-file .x { position: absolute; top: 2px; right: 2px; background: rgba(255,255,255,.9); width: 26px; height: 26px; }
.kt-feed { display: flex; flex-direction: column; gap: var(--h-sp-3); }
.kt-ev { font-size: var(--h-fs-13); color: var(--h-text-muted); display: flex; gap: 6px; padding-left: 32px; }
.kt-cm { display: flex; gap: var(--h-sp-2); }
.kt-cm-b { flex: 1; min-width: 0; }
.kt-cm-h { font-size: var(--h-fs-13); display: flex; gap: 8px; align-items: baseline; }
.kt-cm-h b { font-weight: var(--h-fw-sem); }
.kt-cm-h .h-text-muted { font-size: var(--h-fs-12); }
.kt-cm-t { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.kt-cm-x { margin-left: auto; display: flex; gap: 2px; }
.kt-new { border-top: 1px solid var(--h-border); padding: var(--h-sp-3) var(--h-sp-5) calc(var(--h-sp-3) + env(safe-area-inset-bottom)); display: flex; gap: var(--h-sp-2); align-items: flex-end; flex-shrink: 0; background: var(--h-surface); }
.kt-new textarea { min-height: 40px; max-height: 160px; resize: none; }
.kt-more-ev { background: none; border: 0; color: var(--h-accent); font-size: var(--h-fs-13); padding: 0 0 0 32px; text-align: left; }

/* -- male menu i okna -- */
.pop { position: fixed; z-index: 1000; background: var(--h-surface); border: 1px solid var(--h-border); box-shadow: var(--h-shadow-xl); min-width: 200px; max-width: calc(100vw - 16px); max-height: min(420px, 70vh); overflow-y: auto; padding: 4px 0; }
.pop-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; background: none; border: 0; text-align: left; min-height: var(--tap); font-size: var(--h-fs-14); color: var(--h-text); text-decoration: none; }
.pop-i:hover, .pop-i.is-active, .pop-i.is-key { background: var(--h-accent-bg); }
.pop-i.danger { color: var(--h-error); }
.pop-i .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-i .h-text-muted { font-size: var(--h-fs-12); }
.pop-sep { height: 1px; background: var(--h-border); margin: 4px 0; }
.pop-in { padding: 6px 8px; }
.pop-h { font-size: var(--h-fs-12); color: var(--h-text-muted); padding: 6px 14px 2px; }
.pop-date { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.pop-date .q { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dlg-veil { position: fixed; inset: 0; background: rgba(28,46,74,.4); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--h-sp-4); }
.dlg { background: var(--h-surface); width: min(480px, 100%); box-shadow: var(--h-shadow-xl); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.dlg-h { padding: var(--h-sp-4) var(--h-sp-5) 0; font-size: var(--h-fs-16); font-weight: var(--h-fw-sem); }
.dlg-b { padding: var(--h-sp-4) var(--h-sp-5); display: flex; flex-direction: column; gap: var(--h-sp-3); overflow-y: auto; }
.dlg-b p { color: var(--h-text-muted); }
.dlg-f { padding: 0 var(--h-sp-5) var(--h-sp-4); display: flex; gap: var(--h-sp-2); justify-content: flex-end; flex-wrap: wrap; }
.dlg-err { color: var(--h-error); font-size: var(--h-fs-13); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border: 2px solid transparent; background: var(--pk); padding: 0; outline-offset: 2px; }
.swatch.on { outline: 2px solid var(--h-text); }
.seg { display: flex; border: 1px solid var(--h-border-strong); width: max-content; }
.seg button { background: var(--h-surface); border: 0; padding: 7px 12px; min-height: var(--tap); }
.seg button + button { border-left: 1px solid var(--h-border-strong); }
.seg button.on { background: var(--h-accent-bg); color: var(--h-accent-dark); font-weight: var(--h-fw-med); }
.chk-list { display: flex; flex-direction: column; border: 1px solid var(--h-border); max-height: 220px; overflow-y: auto; }
.chk-list label { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: var(--tap); }
.chk-list label + label { border-top: 1px solid var(--h-border); }
.copy-row { display: flex; gap: var(--h-sp-2); }
.copy-row input { font-size: var(--h-fs-13); }

/* -- toast -- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1500; background: var(--h-toast-bg); color: var(--h-toast-text); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: var(--h-sp-3); box-shadow: var(--h-shadow-xl); max-width: calc(100vw - 32px); font-size: var(--h-fs-14); }
.toast.err { background: var(--h-error); }
.toast button { background: none; border: 0; color: #8FB8EC; font-weight: var(--h-fw-sem); padding: 6px 8px; min-height: var(--tap); }
.toast .msg { padding: 4px 6px 4px 0; }

/* -- strony bez menu: logowanie, zaproszenie -- */
.out { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--h-sp-4); background: var(--h-nav-bg); overflow-y: auto; }
.out-card { background: var(--h-surface); width: min(400px, 100%); padding: var(--h-sp-6) var(--h-sp-5); display: flex; flex-direction: column; gap: var(--h-sp-3); box-shadow: var(--h-shadow-xl); }
.out-card h1 { font-size: var(--h-fs-22); font-weight: var(--h-fw-sem); }
.out-card p { color: var(--h-text-muted); }
.out-card .h-btn { min-height: 44px; }
.out-err { color: var(--h-error); font-size: var(--h-fs-13); min-height: 20px; }

/* -- skrzynka, zespol, konto -- */
.ib-row { display: flex; align-items: flex-start; gap: var(--h-sp-3); padding: var(--h-sp-3) var(--h-sp-5); border-bottom: 1px solid var(--h-border); cursor: pointer; }
.ib-row:hover { background: #F7F8FA; }
.ib-row.unread { background: var(--h-accent-bg); }
.ib-row.unread .ib-t { font-weight: var(--h-fw-sem); }
.ib-b { flex: 1; min-width: 0; }
.ib-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-s { font-size: var(--h-fs-13); color: var(--h-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-when { font-size: var(--h-fs-12); color: var(--h-text-muted); white-space: nowrap; }
.ib-day { padding: var(--h-sp-4) var(--h-sp-5) var(--h-sp-1); font-size: var(--h-fs-12); color: var(--h-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: var(--h-fs-12); color: var(--h-text-muted); font-weight: var(--h-fw-med); padding: 6px 8px; border-bottom: 1px solid var(--h-border); }
.tbl td { padding: 8px; border-bottom: 1px solid var(--h-border); vertical-align: middle; }
.tbl td.who { display: flex; align-items: center; gap: 10px; }
.tbl tr.off td { color: var(--h-text-muted); }
.card { border: 1px solid var(--h-border); padding: var(--h-sp-4) var(--h-sp-5); margin-bottom: var(--h-sp-4); display: flex; flex-direction: column; gap: var(--h-sp-3); max-width: 640px; }
.card h2 { font-size: var(--h-fs-16); font-weight: var(--h-fw-sem); }
.row-gap { display: flex; gap: var(--h-sp-2); flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--h-sp-3); }
.my-add { padding: var(--h-sp-3) var(--h-sp-5) 0; display: flex; gap: var(--h-sp-2); }
.my-add input { max-width: 560px; }

/* -- waskie ekrany -- */
@media (max-width: 1100px) { .bar-search { width: 200px; } }
@media (max-width: 899px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sd { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 45; transform: translateX(-100%); transition: transform .2s ease; }
    .app.sd-open .sd { transform: none; box-shadow: var(--h-shadow-xl); }
    .sd-close, .bar-menu { display: inline-flex; }
    .bar { padding-left: var(--h-sp-2); padding-right: var(--h-sp-3); gap: var(--h-sp-2); }
    .bar-search { order: 10; width: 100%; }
    .bar-tabs { padding: 0 var(--h-sp-3); }
    .view-pad { padding: var(--h-sp-4); }
    .bar-title h1 { font-size: var(--h-fs-16); }
    .os { --os-l: 170px; }
}
@media (max-width: 759px) {
    .kt { width: 100vw; border-left: 0; }
    .kt-fields { grid-template-columns: 96px minmax(0, 1fr); }
    .kt-body { padding: var(--h-sp-3) var(--h-sp-4) var(--h-sp-7); }
    .kt-bar { padding-left: var(--h-sp-3); }
    .kt-new { padding-left: var(--h-sp-4); padding-right: var(--h-sp-4); }
    .ls { min-width: 0; }
    .ls-head { display: none; }
    .ls-row, .ls-mine .ls-row { grid-template-columns: 22px minmax(0, 1fr) auto auto; padding: 6px var(--h-sp-3); }
    .ls-row .col-who .nm, .ls-row .col-proj .nm { display: none; }
    .ls-row .col-x { display: none; }
    .ls-sec-h { padding-left: 4px; padding-right: var(--h-sp-3); }
    .ls-add { padding-left: calc(var(--h-sp-3) + 30px); padding-right: var(--h-sp-3); }
    .ls-toolbar { padding: var(--h-sp-2) var(--h-sp-3); }
    .grid2 { grid-template-columns: 1fr; }
    .kl-grid { grid-auto-rows: minmax(92px, 1fr); }
    .kl-day { padding: 2px; }
    .kl-head { padding: var(--h-sp-2) var(--h-sp-3); }
    .tb { padding: var(--h-sp-3); }
    .tb-col { width: 260px; max-height: none; }
    .ib-row { padding: var(--h-sp-3); }
    .my-add { padding: var(--h-sp-3) var(--h-sp-3) 0; }
    /* pasek w jednym rzedzie: przyciski bez podpisow, szukanie pod lupa */
    .bar-tools { flex-wrap: nowrap; gap: 2px; }
    .bar-tools .lb { display: none; }
    .bar-tools .h-btn-sm { padding-left: 8px; padding-right: 8px; }
    .bar-find { display: inline-flex; }
    .bar-search { display: none; }
    .bar.find-open .bar-search { display: block; }
}
@media print { .sd, .bar-tools, .bar-search, .kt-new { display: none; } }