/* Nawigacja powłoki (od 0.9.5 wspólna dla /crm/ i starej strony /): tokeny Hegios (--h-*), granatowy pasek u góry
   z tytułem i ikoną Konta z kropką stanu, menu modułów (od 900 px po lewej z Zapisz i Konto na dole, poniżej pasek na
   dole Dziś | Zadania | Zapisz | Poczta | Notatki). Reguły przeniesione z crm/crm.css; położenie w siatce powłoki zostaje
   w crm/crm.css, położenie na starej stronie w app.css. Plik w katalogu głównym (wspólny dla obu stron, jak sync.js i
   model.js), ładowany przed crm.css i przed app.css. */

: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-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --h-font-mono: 'JetBrains Mono', ui-monospace, 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-lh-loose: 1.65;

    --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-rad-sm: 0; --h-rad-md: 0; --h-rad-lg: 0;

    --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-btn-pad:   10px 16px;
    --h-input-pad: 10px 12px;

    /* wysokość dolnej nawigacji (poniżej 900 px), toast i okna liczą od niej */
    --crm-dol: 0px;
}

/* -- pasek u góry: tytuł, podtytuł, Wróć na podekranie, Konto z kropką -- */
.topbar {
    background: var(--h-nav-bg); color: var(--h-nav-active-text);
    display: flex; align-items: center; gap: var(--h-sp-3); padding: 0 24px; padding-left: max(24px, env(safe-area-inset-left));
}
.topbar-brand { width: 176px; font-size: var(--h-fs-16); font-weight: var(--h-fw-sem); letter-spacing: .2px; flex-shrink: 0; }
.topbar-t { font-size: var(--h-fs-16); font-weight: var(--h-fw-sem); letter-spacing: .2px; white-space: nowrap; }
.topbar-sub { font-size: var(--h-fs-13); color: var(--h-nav-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-sp { flex: 1; }
.topbar-back { display: none; }
/* ikona Konta w pasku z kropką stanu: zielona zsynchronizowane, czerwona bez sieci albo coś czeka w kolejce */
.tb-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--h-nav-text); background: none; border: none; cursor: pointer; position: relative; text-decoration: none; flex-shrink: 0; }
.tb-ico:hover { background: var(--h-nav-hover-bg); }
.tb-ico:focus-visible { outline: 2px solid var(--h-nav-active-bar); outline-offset: -2px; }
.tb-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--h-success); box-shadow: 0 0 0 2px var(--h-nav-bg); }
.tb-dot.is-off { background: var(--h-warning); }
svg.ik { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.ik.sm { width: 16px; height: 16px; }
.sidebar { background: var(--h-nav-bg); padding: 12px 0; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar a {
    display: flex; align-items: center; gap: 12px; padding: 12px 22px; color: var(--h-nav-text-muted); text-decoration: none;
    font-size: var(--h-fs-14); font-weight: var(--h-fw-med); border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.sidebar a:hover { color: var(--h-nav-text); background: var(--h-nav-hover-bg); }
.sidebar a.active { color: var(--h-nav-active-text); border-left-color: var(--h-nav-active-bar); background: var(--h-nav-active-bg); }
.sidebar a svg { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sidebar a:focus-visible { outline: 2px solid var(--h-nav-active-bar); outline-offset: -2px; }
.sb-badge {
    margin-left: auto; min-width: 20px; padding: 0 6px; background: var(--h-warning); color: #fff; font-size: var(--h-fs-11);
    font-weight: var(--h-fw-sem); line-height: 20px; text-align: center; font-family: var(--h-font-mono);
}
.sb-badge.is-acc { background: var(--h-accent); }
.sb-sp { flex: 1; }
.sidebar a.sb-konto { border-top: 1px solid rgba(255,255,255,.08); margin-top: var(--h-sp-2); }
/* Zapisz (od 0.9.4): w menu bocznym koło 36 px przy słowie, w pasku dolnym koło 52 px lekko wyniesione (jedyny wyjątek
   od twardych kątów: tak jest od 0.8.0 i on je zna, na telefonie leży pod kciukiem) */
.sidebar a.sb-zapisz { color: var(--h-nav-text); }
.sidebar a.sb-zapisz .sb-round { width: 36px; height: 36px; border-radius: 50%; background: var(--h-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; flex-shrink: 0; }
.sidebar a.sb-zapisz .sb-round svg { width: 20px; height: 20px; }
.topbar-brand.is-wroc { display: none; }

/* -- poniżej 900 px: pasek u góry niższy, menu modułów na dole -- */
@media (max-width: 899px) {
    :root { --crm-dol: calc(60px + env(safe-area-inset-bottom)); }
    .topbar { gap: var(--h-sp-2); padding: 0 8px 0 16px; padding-left: max(16px, env(safe-area-inset-left)); }
    .topbar-brand { display: none; }
    .topbar-back { display: inline-flex; margin-left: -8px; }
    .topbar-back[hidden] { display: none; }
    .sidebar {
        flex-direction: row; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        box-shadow: 0 -1px 0 rgba(0,0,0,.08); overflow: visible;
    }
    .sidebar a {
        flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; font-size: var(--h-fs-11);
        border-left: none; border-top: 3px solid transparent; position: relative; min-height: 60px; min-width: 0;
    }
    .sidebar a.active { border-left-color: transparent; border-top-color: var(--h-nav-active-bar); }
    .sidebar a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sb-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 18px; line-height: 18px; padding: 0 5px; }
    .sb-sp { display: none; }
    .sidebar a.sb-konto { display: none; }
    .sidebar a.sb-zapisz { justify-content: flex-end; gap: 0; padding-bottom: 4px; }
    .sidebar a.sb-zapisz .sb-round { width: 52px; height: 52px; margin: -22px 0 2px; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
    .sidebar a.sb-zapisz .sb-round svg { width: 26px; height: 26px; }
}
@media (hover: none) and (pointer: coarse) {
    .tb-ico { width: 44px; height: 44px; }         /* ikony paska u góry (Wróć, Konto) pod palcem */
}