/* ================================================
   MAPA DYSTRYBUCJI - ekran roboczy
   Dziedziczy system alcotrade.app (css/tokens.css):
   off-white + true black + electric cobalt + acid lime,
   Fraunces / Inter / JetBrains Mono.
   Zmiana kierunku 27.07 wieczor (Piotr): mapa NIE ma wlasnego jezyka
   wizualnego, tylko wchodzi w istniejacy - bo zyje pod ta sama nawigacja.
   Poprzedni wariant (granat + bursztyn, DNA profitpack) w historii gita,
   commit 1e5d5af.
   Zero zdjec, zero animacji wejscia - to narzedzie pracy.
   ================================================ */

:root {
    /* status weryfikacji - jedyne tokeny lokalne dla tego ekranu */
    --w1: var(--c-text-dim);       /* poziom 1 rejestrowy - szary */
    --w2: var(--c-accent-soft);    /* poziom 2 kontaktowy - kobalt jasny */
    --w3: var(--c-accent);         /* poziom 3 jakosciowy - kobalt (jedyny "pelny") */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

.mono-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: var(--fs-tiny);
    color: var(--c-text-dim);
}

/* ---------- pasek gorny ---------- */
.map-top {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    background: var(--c-bg-elev-1);
    border-bottom: 1px solid var(--c-border);
    padding: var(--s-3) var(--s-5);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
}

.map-brand {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 700;
    letter-spacing: var(--ls-tight);
    color: var(--c-ink);
    text-decoration: none;
    font-size: 1.0625rem;
}

.map-brand__mark {
    width: 28px;
    height: 28px;
    border-radius: var(--r-md);
    background: var(--c-ink);
    color: var(--c-text-on-ink);
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1rem;
}

.map-search {
    flex: 1;
    max-width: 460px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    color: var(--c-text);
    padding: 9px var(--s-4);
    font-size: var(--fs-small);
    font-family: var(--font-body);
}
.map-search::placeholder { color: var(--c-text-dim); }
.map-search:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--sh-glow);
}

.map-who { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

/* ---------- naglowek ---------- */
.map-head {
    padding: var(--s-6) var(--s-5) 0;
    max-width: var(--container-max);
    margin: 0 auto;
}

.map-head h1 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-size: var(--fs-tiny);
    font-weight: 500;
    color: var(--c-accent);
    margin: 0 0 var(--s-2);
}

.map-head__count {
    font-family: var(--font-serif);
    color: var(--c-text-muted);
    font-size: var(--fs-lede);
    margin: 0 0 var(--s-5);
}

/* ---------- filtry ---------- */
.map-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    padding-bottom: var(--s-5);
}

.map-select {
    appearance: none;
    background-color: var(--c-bg-elev-1);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: var(--r-full);
    padding: 8px 34px 8px var(--s-4);
    font-size: var(--fs-small);
    font-family: var(--font-body);
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-text-dim) 50%),
                      linear-gradient(135deg, var(--c-text-dim) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color var(--t-fast) var(--ease-out);
}
.map-select:hover { border-color: var(--c-border-hi); }
.map-select:focus { outline: none; border-color: var(--c-accent); }
.map-select.is-active {
    border-color: var(--c-accent);
    background-color: var(--c-accent-bg);
    color: var(--c-accent-deep);
    font-weight: 500;
}
.map-select:disabled { display: none; }   /* martwy filtr nie udaje zepsutego - znika */

.map-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--c-bg-elev-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    padding: 8px var(--s-4);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--t-fast) var(--ease-out);
}
.map-toggle:hover { border-color: var(--c-border-hi); }
.map-toggle input { display: none; }
.map-toggle__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--c-border-hi);
}
.map-toggle.is-on {
    border-color: var(--c-accent);
    background: var(--c-accent-bg);
    color: var(--c-accent-deep);
    font-weight: 500;
}
.map-toggle.is-on .map-toggle__dot {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.map-reset {
    background: none;
    border: none;
    color: var(--c-text-dim);
    font-size: var(--fs-tiny);
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.map-reset:hover { color: var(--c-ink); }

/* ---------- tabela ---------- */
.map-body {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--s-5) var(--s-9);
}

.map-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-bg-elev-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

.map-table thead th {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: var(--fs-tiny);
    font-weight: 500;
    color: var(--c-text-dim);
    text-align: left;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg-section);
    white-space: nowrap;
}

.map-table tbody tr {
    height: 56px;
    cursor: pointer;
    border-bottom: 1px solid var(--c-border-soft);
    transition: background var(--t-fast) var(--ease-out);
}
.map-table tbody tr:last-child { border-bottom: none; }
.map-table tbody tr:hover { background: var(--c-bg-section); }
.map-table tbody tr.is-selected { background: var(--c-accent-bg); }

.map-table td {
    padding: 0 var(--s-4);
    font-size: var(--fs-small);
    color: var(--c-text);
    vertical-align: middle;
}

.map-table td.c-name {
    font-weight: 600;
    letter-spacing: var(--ls-tight);
    color: var(--c-ink);
    font-size: 0.9375rem;
}
.map-table td.c-name .legal {          /* forma prawna cofnieta, nie kasowana */
    font-weight: 400;
    color: var(--c-text-dim);
    font-size: var(--fs-tiny);
    margin-left: 6px;
    white-space: nowrap;
}
.map-table td.c-muted { color: var(--c-text-muted); }
.map-table td.c-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    color: var(--c-text-muted);
}

/* chip "bierze nowe marki" */
.chip {
    display: inline-block;
    border-radius: var(--r-full);
    padding: 3px 11px;
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}
.chip--tak       { background: var(--c-energy); color: var(--c-ink); font-weight: 600; }
.chip--wyjatkowo { background: var(--c-bg-elev-2); color: var(--c-text-muted); }
.chip--nie       { background: transparent; color: var(--c-text-dim); border: 1px solid var(--c-border); }
.chip--typ       { background: var(--c-accent-bg); color: var(--c-accent-deep); font-weight: 500; }
.chip--none      { color: var(--c-border-hi); font-family: var(--font-mono); }

/* termin odnowienia zezwolenia */
.exp {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    letter-spacing: var(--ls-wide);
    white-space: nowrap;
}
.exp--hot  { color: var(--c-rose); font-weight: 500; }
.exp--soon { color: var(--c-warning); }
.exp--ok   { color: var(--c-text-dim); }
.exp--gone { color: var(--c-border-hi); text-decoration: line-through; }

/* badge poziomu - trzy kropki */
.dots { display: inline-flex; gap: 4px; }
.dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--c-border-hi);
    display: block;
}
.dots i.on-1 { background: var(--w1); border-color: var(--w1); }
.dots i.on-2 { background: var(--w2); border-color: var(--w2); }
.dots i.on-3 { background: var(--w3); border-color: var(--w3); }

.map-empty {
    padding: var(--s-7) var(--s-4);
    text-align: center;
    color: var(--c-text-dim);
    font-family: var(--font-serif);
    font-size: var(--fs-lede);
}

/* ---------- panel boczny ---------- */
.panel-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.32);
    z-index: 40;
    display: none;
}
.panel-scrim.is-open { display: block; }

.panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(480px, 100vw);
    background: var(--c-bg-elev-1);
    border-left: 1px solid var(--c-border);
    box-shadow: var(--sh-xl);
    z-index: var(--z-modal);
    display: none;
    flex-direction: column;
}
.panel.is-open { display: flex; }

.panel__head {
    padding: var(--s-5);
    border-bottom: 1px solid var(--c-border);
}

.panel__close {
    float: right;
    background: none;
    border: none;
    color: var(--c-text-dim);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 var(--s-3);
}
.panel__close:hover { color: var(--c-ink); }

.panel__name {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    color: var(--c-ink);
    margin: 0 0 var(--s-3);
    padding-right: var(--s-6);
}

.panel__meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.panel__scroll { flex: 1; overflow-y: auto; padding: var(--s-5); }

.panel__block { margin-bottom: var(--s-6); }
.panel__block h3 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-size: var(--fs-tiny);
    font-weight: 500;
    color: var(--c-accent);
    margin: 0 0 var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-border-soft);
}

.field { margin-bottom: var(--s-4); }
.field__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: 0.6875rem;
    color: var(--c-text-dim);
    display: block;
    margin-bottom: 3px;
}
.field__value {
    font-size: var(--fs-small);
    color: var(--c-text);
    line-height: var(--lh-body);
    white-space: pre-wrap;
}
.field__value.is-warn { color: var(--c-warning); font-weight: 600; }

.panel__missing {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: var(--fs-tiny);
    color: var(--c-text-dim);
    border-top: 1px solid var(--c-border);
    padding-top: var(--s-4);
}
.panel__missing strong { color: var(--c-accent); }

.panel__foot {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-section);
    display: flex;
    gap: var(--s-3);
    align-items: center;
}

/* ---------- przyciski ---------- */
.btn-pill {
    border-radius: var(--r-full);
    padding: 11px var(--s-5);
    font-size: var(--fs-small);
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: var(--ls-normal);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.btn-pill--primary { background: var(--c-ink); color: var(--c-text-on-ink); }
.btn-pill--primary:hover { background: var(--c-accent); }
.btn-pill--ghost { background: var(--c-bg-elev-1); border-color: var(--c-border); color: var(--c-ink); }
.btn-pill--ghost:hover { border-color: var(--c-ink); }

/* ---------- tryb rozmowy ---------- */
.talk__hint {
    font-family: var(--font-serif);
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    margin: 0 0 var(--s-5);
    line-height: var(--lh-body);
}

.talk__group { margin-bottom: var(--s-5); }
.talk__group > label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: 0.6875rem;
    color: var(--c-text-dim);
    display: block;
    margin-bottom: var(--s-2);
}

.opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.opt {
    background: var(--c-bg-elev-1);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: var(--r-full);
    padding: 11px var(--s-4);
    font-size: var(--fs-small);
    font-family: var(--font-body);
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--t-fast) var(--ease-out);
}
.opt:hover { border-color: var(--c-ink); }
.opt.is-on {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-text-on-ink);
    font-weight: 600;
}

.talk__input,
.talk__note {
    width: 100%;
    background: var(--c-bg-elev-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    color: var(--c-text);
    padding: 11px var(--s-3);
    font-size: var(--fs-small);
    font-family: var(--font-body);
    resize: vertical;
}
.talk__input:focus, .talk__note:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--sh-glow);
}
.talk__note { min-height: 132px; line-height: var(--lh-body); }

.talk__save {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: var(--fs-tiny);
    color: var(--c-text-dim);
    margin-right: auto;
}
.talk__save.is-saving { color: var(--c-text-muted); }
.talk__save.is-ok { color: var(--c-success); }
.talk__save.is-err { color: var(--c-danger); }

/* tryb rozmowy: panel szerszy + dwie kolumny, zeby zmiescic sie bez przewijania */
.panel.is-talk { width: min(820px, 100vw); }

.talk__grid { display: block; }
.talk__group { break-inside: avoid; -webkit-column-break-inside: avoid; }

/* multicolumn zamiast gridu: grupy plyna naturalnie, bez dziur po wyrownaniu wierszy */
@media (min-width: 700px) {
    .panel.is-talk .talk__grid { columns: 2; column-gap: var(--s-6); }
    .panel.is-talk .talk__hint { margin-bottom: var(--s-4); }
    .panel.is-talk .talk__group { margin-bottom: var(--s-4); }
    .panel.is-talk .opt { padding: 9px var(--s-3); min-height: 40px; }
    .panel.is-talk .talk__note { min-height: 84px; }
    .panel.is-talk .panel__scroll { padding-top: var(--s-4); }
}

/* ---------- mobile ---------- */
@media (max-width: 780px) {
    .map-top { flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
    /* flex:1 z bazy = flex-basis:0, wiec width:100% nie lamalo wiersza i search
       dostawal ~35px obok .map-who; basis 100% wymusza wlasna linie */
    .map-search { order: 3; max-width: none; flex: 1 1 100%; }
    .map-who { margin-left: auto; }
    .map-head, .map-body { padding-left: var(--s-4); padding-right: var(--s-4); }
    .map-head { padding-top: var(--s-5); }
    .map-select, .map-toggle { font-size: var(--fs-tiny); padding: 7px var(--s-3); }
    .map-select { padding-right: 30px; }

    .map-table thead { display: none; }
    .map-table, .map-table tbody, .map-table tr, .map-table td { display: block; width: 100%; }
    .map-table tbody tr { height: auto; padding: var(--s-4); }
    .map-table td { padding: 0; }
    .map-table td.c-name { font-size: 1rem; margin-bottom: 6px; }
    .map-table td.c-city, .map-table td.c-woj {
        display: inline-block;
        width: auto;
        font-size: var(--fs-small);
        color: var(--c-text-muted);
        vertical-align: middle;
    }
    .map-table td.c-city::after { content: " ·"; color: var(--c-text-dim); }
    .map-table td.c-woj { margin-left: 6px; }
    .map-table td.c-exp.is-quiet { display: none; }
    .map-table td.c-exp, .map-table td.c-new, .map-table td.c-lvl {
        display: inline-block;
        width: auto;
        margin-top: var(--s-3);
        margin-left: var(--s-3);
        vertical-align: middle;
    }

    .panel { width: 100vw; }
}