/* =====================================================================
   Warstwa wizualna „Zorza" — nakładana na style.css.
   style.css odpowiada za układ, ten plik za wygląd: kolory, głębię,
   tło i ruch. Rozdział jest celowy — zmiana wyglądu nie rusza layoutu.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- paleta: jasny ---------- */
:root {
    --accent:      #5B5BD6;
    --accent-2:    #C05BD6;
    --accent-soft: rgba(91, 91, 214, .10);
    --danger:      #D63B4A;
    --success:     #0F9D6E;
    --success-bg:  rgba(15, 157, 110, .12);
    --pending:     #C77A15;
    --pending-bg:  rgba(199, 122, 21, .13);

    --text:   #14161C;
    --muted:  #626A7A;
    --border: rgba(20, 22, 28, .10);

    --bg-page: #EEF0F7;
    --bg-card: rgba(255, 255, 255, .72);
    --bg-lift: rgba(255, 255, 255, .92);

    --shadow:    0 1px 2px rgba(20,22,28,.04), 0 8px 24px rgba(20,22,28,.06);
    --shadow-lg: 0 2px 4px rgba(20,22,28,.05), 0 18px 44px rgba(20,22,28,.11);
    --promien: 16px;
    --promien-sm: 10px;

    --powierzchnia: #FFFFFF;

    --zorza-1: #7C6CF0;
    --zorza-2: #E06AC7;
    --zorza-3: #4FC3E8;
}

/* ---------- paleta: ciemny ---------- */
:root[data-theme="dark"] {
    --accent:      #8B8BFF;
    --accent-2:    #E28BFF;
    --accent-soft: rgba(139, 139, 255, .14);
    --danger:      #FF7A87;
    --success:     #3FD9A4;
    --success-bg:  rgba(63, 217, 164, .13);
    --pending:     #FFC24D;
    --pending-bg:  rgba(255, 194, 77, .13);

    --text:   #E9ECF5;
    --muted:  #98A2B8;
    --border: rgba(233, 236, 245, .12);

    --bg-page: #0B0D14;
    --bg-card: rgba(28, 32, 46, .62);
    --bg-lift: rgba(36, 41, 58, .86);

    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.5);

    --powierzchnia: #232838;

    --zorza-1: #5B4BD6;
    --zorza-2: #A83FB0;
    --zorza-3: #1F7FA8;
}

/* ---------- podstawa ---------- */
body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg-page);
    color: var(--text);
    letter-spacing: -0.005em;
    min-height: 100vh;
}

h1, h2, h3 { letter-spacing: -0.025em; font-weight: 700; }
h1 { font-weight: 800; }

/* ---------- żywe tło ---------- */
.zorza {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.zorza span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    will-change: transform;
}
.zorza span:nth-child(1) {
    width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
    left: -8vw; top: -10vw;
    background: var(--zorza-1);
    animation: dryf-1 26s ease-in-out infinite alternate;
}
.zorza span:nth-child(2) {
    width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
    right: -6vw; top: 12vh;
    background: var(--zorza-2);
    animation: dryf-2 32s ease-in-out infinite alternate;
}
.zorza span:nth-child(3) {
    width: 52vw; height: 52vw; min-width: 380px; min-height: 380px;
    left: 22vw; bottom: -24vw;
    background: var(--zorza-3);
    animation: dryf-3 38s ease-in-out infinite alternate;
    opacity: .42;
}
:root[data-theme="dark"] .zorza span { opacity: .38; }
:root[data-theme="dark"] .zorza span:nth-child(3) { opacity: .30; }

@keyframes dryf-1 {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
}
@keyframes dryf-2 {
    from { transform: translate3d(0,0,0) scale(1.1); }
    to   { transform: translate3d(-12vw, 16vh, 0) scale(.92); }
}
@keyframes dryf-3 {
    from { transform: translate3d(0,0,0) scale(.95); }
    to   { transform: translate3d(10vw, -14vh, 0) scale(1.2); }
}

/* Delikatna siatka nad zorzą - dodaje faktury, żeby tło nie było samym rozmyciem. */
.zorza::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: .5;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* ---------- nagłówek ---------- */
header {
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
header .logo {
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- karty ze szkła ---------- */
.card,
.stat-card,
.settings-dialog,
.trip-list li,
.expense-list li {
    background: var(--bg-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--promien);
    box-shadow: var(--shadow);
    transition: transform .22s cubic-bezier(.2,.8,.2,1),
                box-shadow .22s cubic-bezier(.2,.8,.2,1),
                border-color .22s;
}
.card { padding: 1.35rem 1.5rem; }

.card:hover,
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

/* Lista wycieczek: kafelki zamiast wierszy z kreską */
.trip-list { display: grid; gap: .7rem; }
.trip-list li {
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--border);
}
.trip-list li:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
}
.trip-list a { font-weight: 700; letter-spacing: -.015em; }
.trip-list a:hover { color: var(--accent); }

.expense-list { display: grid; gap: .55rem; }
.expense-list li { padding: .85rem 1.05rem; border-bottom: 1px solid var(--border); }
.expense-list li:hover { transform: translateX(3px); box-shadow: var(--shadow-lg); }

/* ---------- przyciski ---------- */
button, .settle-btn, .header-btn {
    border-radius: var(--promien-sm);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s, background .16s;
}
button {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent-2)));
    border: none;
    color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
}
button:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 42%, transparent);
}
button:active { transform: translateY(0); }

button.danger {
    background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #7a1020));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--danger) 28%, transparent);
}
button.danger:hover { box-shadow: 0 6px 20px color-mix(in srgb, var(--danger) 40%, transparent); }

.header-btn, .kopiuj-btn, .dialog-close, .zaproszenie .danger-soft {
    background: color-mix(in srgb, var(--bg-lift) 70%, transparent);
    border: 1px solid var(--border);
    color: var(--muted);
    box-shadow: none;
    backdrop-filter: blur(8px);
}
.header-btn:hover, .kopiuj-btn:hover, .dialog-close:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--accent-soft);
    transform: translateY(-1px);
}
.kopiuj-btn.skopiowano {
    background: var(--success-bg);
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    color: var(--success);
    transform: scale(1.03);
}

/* ---------- pola formularzy ---------- */
input, select, textarea {
    background: color-mix(in srgb, var(--bg-lift) 78%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--promien-sm);
    color: var(--text);
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-lift);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* ---------- znaczniki i chipy ---------- */
.znacznik, .status-chip, .category-tag, .chip {
    border-radius: 999px;
    font-weight: 600;
    transition: transform .16s, background .16s;
}
.chip {
    background: color-mix(in srgb, var(--bg-lift) 72%, transparent);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
.chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.znacznik.ok    { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent); }
.znacznik.uwaga { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pending) 30%, transparent); }

/* Nierozliczone dostają delikatny puls, żeby rzucały się w oczy */
.znacznik.uwaga::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pending);
    margin-right: .4rem;
    vertical-align: middle;
    animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

/* ---------- kafelki statystyk ---------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
    content: "";
    position: absolute; inset: 0 auto auto 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity: .85;
}
.stat-value {
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.stat-label { text-transform: uppercase; letter-spacing: .07em; font-size: .68rem; font-weight: 600; }

/* ---------- tabele i liczby ---------- */
.balances-table { font-variant-numeric: tabular-nums; }
.balances-table th {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .68rem;
    color: var(--muted);
}
.balances-table tbody tr { transition: background .16s; }
.balances-table tbody tr:hover { background: var(--accent-soft); }
.positive { color: var(--success); font-weight: 700; }
.negative { color: var(--danger);  font-weight: 700; }

.transfers-list li, .settled-list li {
    border-radius: var(--promien-sm);
    transition: transform .16s, background .16s;
}
.transfers-list li:hover { transform: translateX(3px); background: var(--accent-soft); }

/* ---------- panel z linkiem ---------- */
.zaproszenie {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, var(--bg-card)),
        var(--bg-card));
}
.zaproszenie .link-box input {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: -.01em;
}

/* ---------- komunikaty ---------- */
.flash {
    border-radius: var(--promien);
    border: 1px solid color-mix(in srgb, var(--pending) 35%, transparent);
    background: var(--pending-bg);
    backdrop-filter: blur(10px);
    animation: wjazd .4s cubic-bezier(.2,.8,.2,1);
}

/* ---------- okno ustawień ---------- */
.settings-dialog { border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.settings-dialog::backdrop {
    background: rgba(10, 12, 20, .5);
    backdrop-filter: blur(6px);
}

/* ---------- logowanie ---------- */
.logowanie {
    background: var(--bg-card);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    padding: 2.6rem 2.2rem;
    animation: wjazd .55s cubic-bezier(.2,.8,.2,1);
}
.logowanie h1 {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- wejście elementów ---------- */
@keyframes wjazd {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wejscie main > * { animation: wjazd .5s cubic-bezier(.2,.8,.2,1) backwards; }
.wejscie main > *:nth-child(1) { animation-delay: .02s; }
.wejscie main > *:nth-child(2) { animation-delay: .07s; }
.wejscie main > *:nth-child(3) { animation-delay: .12s; }
.wejscie main > *:nth-child(4) { animation-delay: .17s; }
.wejscie main > *:nth-child(5) { animation-delay: .22s; }
.wejscie main > *:nth-child(n+6) { animation-delay: .27s; }

.wejscie .trip-list li, .wejscie .expense-list li, .wejscie .stat-card {
    animation: wjazd .45s cubic-bezier(.2,.8,.2,1) backwards;
}
.wejscie .trip-list li:nth-child(1),  .expense-list li:nth-child(1),  .stat-card:nth-child(1) { animation-delay: .05s; }
.wejscie .trip-list li:nth-child(2),  .expense-list li:nth-child(2),  .stat-card:nth-child(2) { animation-delay: .10s; }
.wejscie .trip-list li:nth-child(3),  .expense-list li:nth-child(3),  .stat-card:nth-child(3) { animation-delay: .15s; }
.wejscie .trip-list li:nth-child(4),  .expense-list li:nth-child(4),  .stat-card:nth-child(4) { animation-delay: .20s; }
.wejscie .trip-list li:nth-child(n+5),.expense-list li:nth-child(n+5),.stat-card:nth-child(n+5) { animation-delay: .25s; }

/* ---------- dostępność i wydajność ---------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

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

/* Na wąskich ekranach rozmycie tła bywa kosztowne - zmniejszamy nakład. */
@media (max-width: 640px) {
    .zorza span { filter: blur(60px); }
    .card, .trip-list li, .expense-list li, .stat-card {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .trip-list li:hover, .expense-list li:hover { transform: none; }
}

/* =====================================================================
   Poprawki czytelności
   ===================================================================== */

/* ---------- przyciski drugoplanowe: mocniejszy kontrast ---------- */
/* Poprzednio tekst był w kolorze --muted na półprzezroczystym tle
   i zlewał się z otoczeniem. Teraz pełny kolor tekstu i gęstsze tło. */
.header-btn, .kopiuj-btn, .dialog-close, .zaproszenie .danger-soft, .sort-links a {
    background: color-mix(in srgb, var(--bg-lift) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    color: var(--text);
    font-weight: 600;
}
.header-btn:hover, .kopiuj-btn:hover, .dialog-close:hover, .sort-links a:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.sort-links a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- jednolite przyciski akcji: Edytuj / Usuń / Cofnij ---------- */
/* Ta sama geometria dla linku i dla <button>, różni je tylko kolor. */
.akcja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 74px;
    padding: 0 .85rem;
    border-radius: var(--promien-sm);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, background .16s, color .16s;
}
.akcja:hover { transform: translateY(-2px); }
.akcja:active { transform: translateY(0); }

.akcja-edytuj {
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-lift));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
    box-shadow: none;
}
.akcja-edytuj:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

.akcja-usun {
    background: color-mix(in srgb, var(--danger) 12%, var(--bg-lift));
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
    color: var(--danger);
    box-shadow: none;
}
.akcja-usun:hover {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--danger) 40%, transparent);
}

.expense-actions { display: flex; align-items: center; gap: .5rem; }
.expense-actions form { margin: 0; display: flex; }

/* ---------- historia wydatków: wyraźny podział na trzy warstwy ---------- */
.expense-list li { padding: 1rem 1.15rem; display: grid; gap: .6rem; }

.expense-header { align-items: flex-start; gap: 1rem; }

.expense-glowne {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    flex-wrap: wrap;
    min-width: 0;
}
.expense-opis {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.015em;
    color: var(--text);
}
.expense-kwota {
    font-weight: 800;
    font-size: 1.02rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--accent);
    white-space: nowrap;
}
.expense-kwota .currency-note {
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    margin-left: .3rem;
}

/* Druga warstwa: kto, jaka kategoria, kiedy */
.expense-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8rem;
}
.meta-platnik {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    color: var(--text);
}
.meta-platnik::before {
    content: "";
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    opacity: .85;
    flex: none;
}
.expense-meta .category-tag {
    background: var(--accent-soft);
    color: var(--accent);
    padding: .12rem .55rem;
    font-size: .74rem;
    font-weight: 600;
}
.expense-meta .expense-date {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* Trzecia warstwa: podział na osoby, oddzielona kreską */
.expense-shares {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--border);
}
.udzial {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    font-size: .78rem;
    color: var(--muted);
}
.udzial b {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.udzial b::after { content: " zł"; font-weight: 500; color: var(--muted); }

@media (max-width: 560px) {
    .expense-header { flex-direction: column; }
    .expense-actions { width: 100%; }
    .akcja { flex: 1; }
    .expense-meta .expense-date { margin-left: 0; }
}

/* ---------- lista wycieczek: opis i akcje ---------- */
.trip-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.trip-glowne { display: grid; gap: .3rem; min-width: 0; }

.trip-nazwa { gap: .55rem; }
.trip-list a { font-size: 1.05rem; }

.trip-opis {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--muted);
}
.trip-opis b {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.trip-opis .kropka { opacity: .45; }
.trip-opis .trip-suma {
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.trip-opis .opis-pusty { font-style: italic; opacity: .8; }

.trip-akcje { display: flex; align-items: center; gap: .5rem; flex: none; }
.trip-akcje form { margin: 0; display: flex; }

/* Wariant „Kopiuj link" w rodzinie .akcja - ta sama geometria co Usuń */
.akcja-kopiuj {
    background: color-mix(in srgb, var(--text) 6%, var(--bg-lift));
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
    color: var(--text);
    min-width: 96px;
}
.akcja-kopiuj:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 38%, transparent);
}
.akcja-kopiuj.skopiowano {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

/* Rozliczone: przygaszamy opis, ale nie przyciski - te muszą zostać klikalne */
.trip-list li.rozliczona .trip-opis { opacity: .75; }

@media (max-width: 560px) {
    .trip-list li { flex-direction: column; align-items: stretch; }
    .trip-akcje { justify-content: flex-end; }
    .akcja-kopiuj, .trip-akcje .akcja-usun { flex: 1; }
}

/* ---------- pole nowej kategorii ---------- */
/* Odsłaniane po wybraniu „Nowa kategoria" z listy. Wjeżdża, zamiast
   pojawiać się skokiem, żeby było widać skąd się wzięło. */
.pole-nowej-kategorii {
    display: block;
    width: 100%;
    margin-top: .45rem;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    animation: rozwin .22s cubic-bezier(.2,.8,.2,1);
}
.pole-nowej-kategorii[hidden] { display: none; }

@keyframes rozwin {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- licznik reszty w niestandardowym podziale ---------- */
/* Cztery stany, wszystkie na zmiennych palety, więc działają w obu motywach:
   szary = nie ma jeszcze z czego liczyć, bursztyn = zostało do rozdania,
   zielony = zgadza się (albo mieści w groszu tolerancji), czerwony = za dużo. */
.podzial-licznik {
    border-radius: var(--promien-sm);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.podzial-licznik .licznik-podpowiedz { color: var(--muted); }

.podzial-licznik.stan-brak {
    color: var(--muted);
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.podzial-licznik.stan-zostalo {
    color: var(--pending);
    background: var(--pending-bg);
    border-color: color-mix(in srgb, var(--pending) 38%, transparent);
}
.podzial-licznik.stan-ok {
    color: var(--success);
    background: var(--success-bg);
    border-color: color-mix(in srgb, var(--success) 38%, transparent);
}
.podzial-licznik.stan-za-duzo {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}

/* ---------- rozwijana lista wpłat ---------- */
.grupa-wplat { padding: 0 !important; overflow: hidden; }
.grupa-wplat details { width: 100%; }

.grupa-wplat summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .8rem 1.05rem;
    cursor: pointer;
    list-style: none;
    transition: background .16s;
}
.grupa-wplat summary::-webkit-details-marker { display: none; }
.grupa-wplat summary:hover { background: var(--accent-soft); }

/* Strzałka pokazująca, że pozycję da się rozwinąć */
.grupa-wplat summary::before {
    content: "›";
    font-size: 1.1rem;
    line-height: 1;
    color: var(--muted);
    transition: transform .2s cubic-bezier(.2,.8,.2,1);
    flex: none;
}
.grupa-wplat details[open] summary::before { transform: rotate(90deg); }

.grupa-suma {
    font-weight: 800;
    color: var(--success);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.grupa-ile { font-size: .78rem; white-space: nowrap; }

.lista-wplat {
    list-style: none;
    margin: 0;
    padding: .2rem .7rem .8rem 1.9rem;
    display: grid;
    gap: .45rem;
    animation: rozwin .2s cubic-bezier(.2,.8,.2,1);
}
.lista-wplat li {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    padding: .45rem .6rem;
    border-radius: var(--promien-sm);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--border);
}

.wplata-form { display: flex; align-items: center; gap: .4rem; margin: 0; flex-wrap: wrap; }
.wplata-form input[type="number"] {
    width: 6rem; height: 30px; padding: 0 .45rem;
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .82rem;
}
.wplata-form input[type="date"] {
    height: 30px; padding: 0 .45rem; font-size: .8rem;
    color-scheme: light dark;
}
.wplata-zl { font-size: .78rem; color: var(--muted); }

.akcja-zapisz {
    height: 30px; min-width: 62px; font-size: .78rem;
    background: color-mix(in srgb, var(--success) 14%, var(--bg-lift));
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success);
}
.akcja-zapisz:hover {
    background: var(--success); color: #fff;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--success) 38%, transparent);
}
.lista-wplat .akcja-usun { height: 30px; min-width: 62px; font-size: .78rem; }

@media (max-width: 560px) {
    .lista-wplat { padding-left: 1rem; }
    .grupa-suma { margin-left: 0; }
}

/* ---------- wpłata między dowolnymi osobami ---------- */
.dowolna-wplata {
    margin-top: .9rem;
    border: 1px dashed var(--border);
    border-radius: var(--promien-sm);
    padding: .2rem .9rem;
}
.dowolna-wplata summary {
    cursor: pointer;
    padding: .55rem 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
    list-style: none;
}
.dowolna-wplata summary::-webkit-details-marker { display: none; }
.dowolna-wplata summary::before {
    content: "+ ";
    color: var(--accent);
    font-weight: 700;
}
.dowolna-wplata[open] summary::before { content: "− "; }
.dowolna-wplata summary:hover { color: var(--accent); }
.dowolna-wplata p { font-size: .8rem; margin: 0 0 .6rem; }

.dowolna-form {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin: 0 0 .8rem;
    animation: rozwin .2s cubic-bezier(.2,.8,.2,1);
}
.dowolna-form select { height: 32px; padding: 0 .5rem; font-size: .85rem; }
.dowolna-form input[type="number"] {
    width: 6.2rem; height: 32px; padding: 0 .5rem;
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem;
}
.dowolna-form .strzalka { color: var(--muted); }

@media (max-width: 560px) {
    .dowolna-form { gap: .35rem; }
    .dowolna-form select { flex: 1; min-width: 6rem; }
}

/* ---------- wiersz zalecanego przelewu ---------- */
.przelew {
    display: block !important;
    padding: 0 !important;
    border-left: 3px solid var(--pending);
}
.przelew:hover { transform: none !important; }

.przelew-wiersz {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem 1rem;
    width: 100%;
}

.przelew-osoby {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .98rem;
    min-width: 0;
    flex-wrap: wrap;
}
.przelew-osoby strong { font-weight: 700; letter-spacing: -.01em; }
.przelew-osoby .strzalka { color: var(--muted); font-size: 1.05rem; }

/* Kwota odpycha się od nazwisk i siada przy przyciskach - koniec z pustą połową wiersza */
.dlug-kwota {
    margin-left: auto;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--pending);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.przelew-akcje { display: flex; align-items: center; gap: .45rem; flex: none; }
.przelew-akcje form { margin: 0; display: flex; }

.akcja-czesc {
    background: transparent;
    border-color: color-mix(in srgb, var(--text) 20%, transparent);
    color: var(--muted);
    min-width: 62px;
}
.akcja-czesc:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.akcja-calosc-splata {
    background: color-mix(in srgb, var(--success) 14%, var(--bg-lift));
    border-color: color-mix(in srgb, var(--success) 42%, transparent);
    color: var(--success);
    min-width: 96px;
}
.akcja-calosc-splata:hover {
    background: var(--success); color: #fff;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--success) 38%, transparent);
}

/* ---------- rozwijane pole wpłaty częściowej ---------- */
.przelew.rozwiniety { border-left-color: var(--accent); }
.przelew.rozwiniety .przelew-wiersz { padding-bottom: .3rem; }

.splata-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
    padding: .3rem 1rem .85rem;
    animation: rozwin .2s cubic-bezier(.2,.8,.2,1);
}
.splata-form[hidden] { display: none; }

.splata-etykieta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    color: var(--muted);
}
.splata-etykieta input {
    width: 6.4rem; height: 32px; padding: 0 .55rem;
    text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: .88rem;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.akcja-anuluj {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    min-width: 0;
    padding: 0 .55rem;
}
.akcja-anuluj:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }

@media (max-width: 620px) {
    .przelew-wiersz { flex-wrap: wrap; gap: .5rem; }
    .dlug-kwota { margin-left: auto; }
    .przelew-akcje { width: 100%; justify-content: flex-end; }
    .splata-form { padding-bottom: .7rem; }
}

/* =====================================================================
   Widok mobilny.
   Cała sekcja jest zamknięta w zapytaniu medialnym, więc widok na dużych
   ekranach pozostaje nietknięty.
   ===================================================================== */
@media (max-width: 720px) {

    /* --- 1. Treść na całą szerokość telefonu --- */
    main {
        padding: 1rem .8rem;
        max-width: 100%;
    }
    header { padding: .65rem .8rem; }
    .card { padding: 1rem .9rem; }

    /* Siatka bezpieczeństwa: gdyby cokolwiek mimo wszystko wystawało,
       „clip" przycina je bez tworzenia paska przewijania. W odróżnieniu
       od „hidden" nie psuje przyklejonego nagłówka. */
    body { overflow-x: clip; }

    /* --- 2. Sedno problemu ---
       Elementy w układach elastycznych mają domyślnie min-width: auto,
       więc nie kurczą się poniżej swojej zawartości. Jedno długie pole
       albo nierozdzielny adres rozpycha wtedy całą stronę szerzej niż
       ekran, a treść wygląda na zepchniętą w lewo. */
    .inline-form, .inline-form > *,
    .form-row label, .form-row label > *,
    .category-row, .category-row > *,
    .expense-header, .expense-glowne, .expense-opis, .expense-meta,
    .przelew-wiersz, .przelew-osoby,
    .trip-list li, .trip-glowne, .trip-nazwa, .trip-opis,
    .zaproszenie .link-box, .zaproszenie .link-box > *,
    .currency-row, .currency-row > *,
    .splata-form, .splata-etykieta,
    .dowolna-form, .dowolna-form > *,
    .lista-wplat li, .wplata-form, .wplata-form > *,
    .grupa-wplat summary,
    .breakdown-category-header, .breakdown-expenses li,
    .settings-dialog-header, .stat-card {
        min-width: 0;
    }

    /* --- 3. Rzędy, które na wąskim ekranie muszą się łamać --- */
    .inline-form, .category-row, .currency-row,
    .expense-header, .breakdown-category-header, .breakdown-expenses li,
    .settings-dialog-header, .header-actions, .sort-links,
    .zaproszenie .link-box, .checkbox-label {
        flex-wrap: wrap;
    }

    /* --- 4. Pola formularzy zamiast sztywnych pikseli --- */
    .inline-form input,
    .inline-form select { flex: 1 1 100%; }
    .inline-form button { flex: 1 1 auto; }

    .checkbox-label input[type="number"] { width: 5.5rem; margin-left: auto; }
    .currency-row input[type="number"] { width: auto; flex: 1 1 5rem; }
    .currency-row .inline-form { flex: 1 1 100%; }

    .zaproszenie .link-box input { flex: 1 1 100%; }
    .zaproszenie .link-box button { flex: 1 1 auto; }

    /* --- 5. Długie nazwy i adresy mają się łamać, nie rozpychać --- */
    h1, h2, h3,
    .expense-opis, .trip-list a, .przelew-osoby, .udzial {
        overflow-wrap: anywhere;
    }
    .zaproszenie .link-box input { font-size: .78rem; }

    /* --- 6. Nagłówek strony --- */
    header .logo { font-size: 1rem; }
    .header-actions { gap: .35rem; }
    .header-btn { padding: .3rem .55rem; font-size: .78rem; }

    /* --- 7. Kafelki statystyk: dwie kolumny zamiast ciasnego rzędu --- */
    .stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { width: auto; }

    /* --- 8. Tabela sald bez wymuszonej szerokości --- */
    .table-scroll { margin: 0 -.2rem; }
    .balances-table { font-size: .88rem; }
    .balances-table th, .balances-table td { padding: .5rem .45rem; }

    /* --- 9. Okno ustawień na prawie cały ekran --- */
    .settings-dialog {
        max-width: calc(100vw - 1.2rem);
        width: calc(100vw - 1.2rem);
        padding: 1rem .9rem;
    }

    /* --- 10. Tło: mniejsze rozmycie, żeby nie dławić telefonu --- */
    .zorza span { min-width: 220px; min-height: 220px; filter: blur(55px); }
}

/* Bardzo wąskie ekrany - przyciski w rzędach dostają pełną szerokość */
@media (max-width: 400px) {
    .przelew-akcje, .trip-akcje, .expense-actions { width: 100%; }
    .przelew-akcje > *, .trip-akcje > *, .expense-actions > * { flex: 1; }
    .przelew-akcje form, .trip-akcje form, .expense-actions form { flex: 1; }
    .przelew-akcje form button, .trip-akcje form button, .expense-actions form button { width: 100%; }
    .stat-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   Formularz wydatku: równa siatka zamiast rozciągliwych pól
   ===================================================================== */
/* Wcześniej pola miały flex: 1 1 150px i rozciągały się nierówno,
   zależnie od tego, ile ich zostało w rzędzie. Stały podział na sześć
   kolumn daje przewidywalny, wyrównany układ. */
.siatka-wydatku {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .8rem;
    align-items: end;
}
.siatka-wydatku > label { flex: none; }

.pole-opis      { grid-column: span 3; }
.pole-kwota     { grid-column: span 2; }
.pole-waluta    { grid-column: span 1; }
.pole-data      { grid-column: span 2; }
.pole-platnik   { grid-column: span 2; }
.pole-kategoria { grid-column: span 2; }

/* Jednakowa wysokość wszystkich pól - to ona najbardziej decyduje
   o wrażeniu uporządkowania. */
.siatka-wydatku input,
.siatka-wydatku select {
    height: 38px;
    width: 100%;
    padding: 0 .6rem;
    font-size: .9rem;
}
.siatka-wydatku label {
    font-size: .78rem;
    letter-spacing: .01em;
    text-transform: uppercase;
    font-weight: 600;
    gap: .35rem;
}
.siatka-wydatku .pole-nowej-kategorii { margin-top: .4rem; height: 38px; }

@media (max-width: 720px) {
    .siatka-wydatku { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
    .pole-opis      { grid-column: span 4; }
    .pole-kwota     { grid-column: span 2; }
    .pole-waluta    { grid-column: span 2; }
    .pole-data      { grid-column: span 2; }
    .pole-platnik   { grid-column: span 2; }
    .pole-kategoria { grid-column: span 4; }
    .siatka-wydatku input, .siatka-wydatku select { height: 34px; font-size: .85rem; }
    .siatka-wydatku label { font-size: .7rem; }
}

/* =====================================================================
   Sekcje składane (Uczestnicy)
   ===================================================================== */
.skladana > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    list-style: none;
    padding: .1rem 0;
}
.skladana > summary::-webkit-details-marker { display: none; }
.skladana > summary::before {
    content: "›";
    font-size: 1.25rem;
    line-height: 1;
    color: var(--muted);
    transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.skladana[open] > summary::before { transform: rotate(90deg); }
.skladana > summary h2 { margin: 0; }
.skladana > summary:hover h2 { color: var(--accent); }
.skladana .licznik {
    font-size: .75rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
}
.skladana[open] > summary { margin-bottom: .8rem; }

/* =====================================================================
   Mobilna skala — zwarta, dopasowana do gęstego interfejsu
   ===================================================================== */
@media (max-width: 720px) {
    /* Rozmiar odniesienia ciągnie za sobą całą resztę: odstępy, wysokości
       pól i marginesy liczone w rem schodzą razem z nim. */
    html { font-size: 13.5px; }
    /* Tekst czytany zostaje przy 13,5 px - schodzenie niżej męczy oczy.
       Zmniejszamy natomiast całą obudowę: etykiety, przyciski, odstępy. */
    body { font-size: 1rem; line-height: 1.5; letter-spacing: -.003em; }

    h1 { font-size: 1.22rem; letter-spacing: -.025em; }
    h2 { font-size: .96rem; }
    h3 { font-size: .86rem; }

    /* --- gęstsze karty i odstępy --- */
    main { padding: .7rem .6rem; }
    .card { padding: .7rem .65rem; margin-bottom: .55rem; border-radius: 12px; }
    .trip-list { gap: .45rem; }
    .expense-list { gap: .4rem; }

    /* --- nagłówek: same ikony --- */
    header { padding: .42rem .6rem; gap: .35rem; }
    header .logo { font-size: .94rem; letter-spacing: -.03em; }
    .header-actions { gap: .25rem; flex: none; }
    .header-btn {
        padding: .26rem .42rem;
        font-size: .88rem;
        line-height: 1;
        min-width: 0;
        border-radius: 7px;
    }
    .header-btn .etykieta { display: none; }

    /* --- pola formularzy --- */
    .siatka-wydatku { gap: .5rem; }
    .siatka-wydatku input, .siatka-wydatku select { height: 31px; font-size: .8rem; padding: 0 .45rem; }
    .siatka-wydatku label { font-size: .62rem; gap: .22rem; }
    input, select, textarea { font-size: .82rem; }
    .inline-form { gap: .4rem; margin: .55rem 0; }

    /* --- przyciski --- */
    button { font-size: .8rem; padding: .38rem .7rem; border-radius: 8px; }
    .akcja { height: 27px; font-size: .72rem; min-width: 52px; padding: 0 .55rem; border-radius: 7px; }
    .akcja-kopiuj, .akcja-calosc-splata { min-width: 66px; }
    .settle-btn { height: 27px; font-size: .72rem; padding: 0 .55rem; }

    /* --- listy --- */
    .trip-list li { padding: .6rem .7rem; }
    .trip-list a { font-size: .98rem; }
    .trip-opis { font-size: .7rem; gap: .3rem; }
    .znacznik { font-size: .6rem; padding: .08rem .4rem; }

    .expense-list li { padding: .6rem .7rem; gap: .4rem; }
    .expense-opis, .expense-kwota { font-size: .95rem; }
    .expense-meta { font-size: .68rem; gap: .35rem; }
    .meta-platnik::before { width: 14px; height: 14px; }
    .expense-shares { padding-top: .4rem; gap: .28rem; }
    .udzial { font-size: .66rem; padding: .1rem .42rem; gap: .28rem; }

    .przelew-wiersz { padding: .55rem .7rem; gap: .5rem; }
    .przelew-osoby { font-size: .84rem; gap: .3rem; }
    .dlug-kwota { font-size: .96rem; }
    .splata-form { padding: .2rem .7rem .6rem; gap: .35rem; }
    .splata-etykieta { font-size: .72rem; }
    .splata-etykieta input { width: 5rem; height: 27px; font-size: .78rem; }

    .grupa-wplat summary { padding: .55rem .7rem; gap: .38rem; }
    .grupa-suma { font-size: .94rem; }
    .grupa-ile { font-size: .66rem; }
    .lista-wplat { padding: .15rem .5rem .6rem 1.2rem; gap: .3rem; }
    .lista-wplat li { padding: .35rem .45rem; gap: .3rem; }
    .wplata-form input[type="number"] { width: 4.8rem; height: 27px; font-size: .75rem; }
    .wplata-form input[type="date"] { height: 27px; font-size: .72rem; }

    /* --- statystyki --- */
    .stat-card { padding: .55rem .6rem; }
    .stat-value { font-size: 1.08rem; }
    .stat-label { font-size: .56rem; letter-spacing: .05em; }
    .stat-cards { gap: .45rem; }

    /* --- drobnica --- */
    .muted, .currency-note, .expense-date { font-size: .7rem; }
    .status-chip { font-size: .62rem; padding: .08rem .4rem; }
    .chip { font-size: .76rem; padding: .2rem .5rem; }
    .balances-table { font-size: .78rem; }
    .balances-table th, .balances-table td { padding: .38rem .35rem; }
    .balances-table th { font-size: .58rem; }
    .sort-links a { font-size: .72rem; padding: .22rem .5rem; }
    .skladana .licznik { font-size: .64rem; padding: .05rem .4rem; }
    .zaproszenie .link-box input { font-size: .7rem; }
    .dowolna-wplata summary { font-size: .76rem; padding: .4rem 0; }
    .dowolna-form select, .dowolna-form input { height: 28px; font-size: .76rem; }
}

/* Najwęższe telefony */
@media (max-width: 380px) {
    html { font-size: 12.5px; }
    header .logo { font-size: .9rem; }
    .akcja { min-width: 46px; font-size: .68rem; padding: 0 .45rem; }
    .card { padding: .6rem .55rem; }
}

/* =====================================================================
   Wydatki według kategorii
   ===================================================================== */
.przelacznik {
    display: inline-flex;
    padding: 2px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border: 1px solid var(--border);
}
.przelacznik-opcja {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background .18s, color .18s;
}
.przelacznik-opcja:hover { color: var(--text); transform: none; box-shadow: none; filter: none; }
.przelacznik-opcja.aktywna {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 32%, transparent);
}

.lista-kategorii { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.lista-kategorii li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .2rem .6rem;
    align-items: center;
}

.kat-naglowek {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}
.kat-nazwa { font-weight: 700; letter-spacing: -.01em; }
.kat-ile { font-size: .74rem; color: var(--muted); }
.kat-kwota {
    margin-left: auto;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    white-space: nowrap;
    /* Zmiana liczby przy przełączaniu ma być widoczna, ale nie krzykliwa */
    transition: color .18s;
}

.kat-pasek {
    height: 7px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    overflow: hidden;
}
.kat-pasek span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.kat-procent {
    font-size: .74rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-width: 2.4rem;
    text-align: right;
}

.kat-podsumowanie {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
    font-weight: 700;
}
.kat-podsumowanie .kat-kwota { font-size: 1.08rem; }
.kat-stopka { font-size: .76rem; margin: .5rem 0 0; }

@media (max-width: 720px) {
    .przelacznik-opcja { font-size: .7rem; padding: .24rem .55rem; }
    .lista-kategorii { gap: .55rem; }
    .kat-ile { font-size: .66rem; }
    .kat-procent { font-size: .66rem; min-width: 2.1rem; }
    .kat-pasek { height: 6px; }
    .kat-podsumowanie .kat-kwota { font-size: .98rem; }
    .kat-stopka { font-size: .68rem; }
}

/* =====================================================================
   Edycja wydatku rozwijana pod pozycją
   ===================================================================== */
.expense-list li.w-edycji {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: var(--shadow-lg);
    transform: none !important;
}
.expense-list li.w-edycji .expense-shares { opacity: .5; }

.edycja-wsuwana {
    margin-top: .55rem;
    padding-top: .75rem;
    border-top: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
    animation: rozwin .22s cubic-bezier(.2,.8,.2,1);
}
.edycja-wsuwana[hidden] { display: none; }

/* Formularz wyjęty z podstrony - dopasowujemy go do ciasnego kontekstu listy */
.formularz-edycji .form-row { gap: .6rem; margin-bottom: .7rem; }
.formularz-edycji fieldset.split-type { margin: .5rem 0; padding: .5rem .7rem; }
.formularz-edycji fieldset.split-type legend { font-size: .72rem; }
.formularz-edycji .split-section { margin: .4rem 0; }
.formularz-edycji input,
.formularz-edycji select { height: 34px; font-size: .85rem; }
.formularz-edycji label { font-size: .72rem; }
.formularz-edycji .checkbox-label { font-size: .8rem; }
.formularz-edycji .podzial-licznik { font-size: .8rem; padding: .4rem .6rem; }
.formularz-edycji .licznik-podpowiedz { font-size: .72rem; }

.akcja-anuluj-edycje {
    background: transparent;
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
    color: var(--muted);
    margin-left: .45rem;
}
.akcja-anuluj-edycje:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }

.akcja-edytuj.wczytuje { opacity: .6; pointer-events: none; }

@media (max-width: 720px) {
    .edycja-wsuwana { margin-top: .45rem; padding-top: .55rem; }
    .formularz-edycji input, .formularz-edycji select { height: 30px; font-size: .8rem; }
    .formularz-edycji label { font-size: .66rem; }
    .formularz-edycji .form-row { gap: .45rem; margin-bottom: .55rem; }
}

/* =====================================================================
   Tablica wycieczki — wygląd
   =====================================================================
   Układ tej sekcji jest w style.css. Tutaj kolory, szkło i ruch.
   Każdy rodzaj wpisu ma własny kolor przewodni — po nim rozpoznaje się
   kafelek jednym spojrzeniem, bez czytania nagłówka.
   ===================================================================== */

:root {
    --kolor-plan:    #5B5BD6;
    --kolor-zdjecie: #C05BD6;
    --kolor-notatka: #C77A15;
    --kolor-link:    #1E86B0;
    --kolor-lista:   #0F9D6E;
    --kolor-mapa:    #C2410C;
    --kolor-pogoda:  #4A7BD9;
}
:root[data-theme="dark"] {
    --kolor-plan:    #8B8BFF;
    --kolor-zdjecie: #E28BFF;
    --kolor-notatka: #FFC24D;
    --kolor-link:    #56C7EE;
    --kolor-lista:   #3FD9A4;
    --kolor-mapa:    #FB923C;
    --kolor-pogoda:  #7FA9FF;
}

/* ---------- zakładki ---------- */
.zakladki a {
    background: color-mix(in srgb, var(--bg-lift) 88%, transparent);
    border: 1px solid var(--border);
    color: var(--muted);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.zakladki a:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    transform: translateY(-1px);
}
.zakladki a.aktywna {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ---------- nagłówek i filtry ---------- */
.tablica-podsumowanie { color: var(--muted); }
.tablica-podsumowanie b { color: var(--text); }

.filtr, .skok-dzien {
    background: color-mix(in srgb, var(--bg-lift) 90%, transparent);
    border: 1px solid var(--border);
    color: var(--text);
    transition: background .18s, border-color .18s, color .18s;
}
.filtr:hover, .skok-dzien:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.filtr.aktywny {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.filtr-ile {
    font-size: .68rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 12%, transparent);
}
.filtr.aktywny .filtr-ile { background: rgba(255, 255, 255, .28); }

/* ---------- zakładki użytkownika ---------- */
.pasek-zakladek::after { background: var(--border); }

.zakladka {
    background: color-mix(in srgb, var(--powierzchnia) 42%, transparent);
    color: var(--muted);
    transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.zakladka:hover {
    background: color-mix(in srgb, var(--powierzchnia) 70%, transparent);
    color: var(--text);
    transform: translateY(-1px);
}

/* Aktywna: pełna, nieprzezroczysta powierzchnia + kreska u góry.
   Razem z zakryciem linii daje wrażenie wysuniętej zakładki w segregatorze. */
.zakladka.aktywna {
    background: var(--powierzchnia);
    border-color: var(--border);
    color: var(--text);
    font-weight: 800;
    box-shadow: 0 -4px 14px color-mix(in srgb, var(--accent) 12%, transparent);
}
.zakladka.aktywna::after { background: var(--powierzchnia); }
.zakladka.aktywna::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.zakladka-ile { background: color-mix(in srgb, var(--text) 12%, transparent); }
.zakladka.aktywna .zakladka-ile { background: var(--accent-soft); color: var(--accent); }

/* „Bez zakładki" to nie zakładka, tylko worek na nieprzypisane - kreskowana. */
.zakladka-brak { border: 1px dashed var(--border); border-bottom: none; font-weight: 600; }
.zakladka-dodaj { color: var(--muted); border: 1px dashed transparent; }
.zakladka-dodaj:hover { color: var(--accent); border-color: var(--accent); }

/* Zakładka pod przeciąganym kafelkiem - ma być widać, że wpis tam wpadnie. */
.zakladka.cel-upuszczenia {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.zakladka.cel-upuszczenia .zakladka-ile { background: rgba(255, 255, 255, .3); color: #fff; }

.wiersz-zakladki { padding: .3rem 0; border-bottom: 1px solid var(--border); }
.wiersz-zakladki:last-of-type { border-bottom: none; }

/* ---------- nazwane grupy ---------- */
/* Grupa ma tę samą rolę co dzień, więc nie krzyczy kolorem - odróżnia ją
   pionowa krecha przy krawędzi i kropka przed nazwą, żeby dało się na pierwszy
   rzut oka powiedzieć, co jest datą, a co pojemnikiem od użytkownika. */
.grupa-nazwana { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.grupa-nazwana > .naglowek-dnia h2::before {
    content: "🗂️";
    margin-right: .4rem;
    font-size: .85em;
}
.grupa-nazwana > .naglowek-dnia h2 { text-transform: none; }

/* Pojemnik pod przeciąganym kafelkiem - obwódka mówi „tu wyląduje".
   Gdzie DOKŁADNIE, pokazuje już luka między jego kafelkami, więc osobnego
   prostokąta na końcu siatki nie ma: pochodził z czasów, gdy wpis zawsze
   lądował na końcu, a teraz tylko mylił. */
.grupa-dnia.cel-upuszczenia {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- tryb układania ---------- */
/* Wybrany element wychodzi na wierzch, reszta przygasa - od razu widać,
   co się właśnie przesuwa. */
body.uklada .kartka,
body.uklada .zakladka { opacity: .72; }
body.uklada .kartka.wybrany-do-ukladania,
body.uklada .zakladka.wybrany-do-ukladania {
    opacity: 1;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
body.uklada .kartka.wybrany-do-ukladania { transform: scale(1.015); }

/* Element w ręce ma wyglądać na PODNIESIONY, a nie na duszka po sobie samym:
   mocniejszy cień i lekkie uniesienie robią głębię, po której od razu widać,
   że to on jedzie za palcem, a reszta robi mu miejsce. */
.kartka.przeciagana,
.zakladka.przeciagana,
.grupa-dnia.przeciagana {
    opacity: .97;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 32%, transparent),
                0 4px 12px rgba(0, 0, 0, .18);
    border-color: var(--accent);
    cursor: grabbing;
}

.pasek-ukladania {
    background: var(--powierzchnia);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: wjazd-paska .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes wjazd-paska {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.pasek-ukladania-nazwa { color: var(--text); }
.pasek-ukladania-opis { color: var(--muted); }
.strzalka-ukladania {
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    font-weight: 800;
}
.strzalka-ukladania:hover:not(:disabled) { background: var(--accent); color: #fff; }
.strzalka-ukladania:disabled { opacity: .35; cursor: default; }
.koniec-ukladania {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    border: none;
    color: #fff;
}
.pasek-ukladania-akcje { border-top: 1px solid var(--border); padding-top: .4rem; }
.akcja-trybu {
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border: 1px solid var(--border);
    color: var(--text);
}
.akcja-trybu:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.akcja-trybu-usun:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.akcja-trybu:disabled { opacity: .4; cursor: default; }
.pole-nazwy-zakladki {
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
}

/* ---------- odhaczanie wpisu (opcja włączana przy wpisie) ---------- */
.ptaszek-wpisu {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
    color: #fff;
    transition: background .16s, border-color .16s;
}
.ptaszek-wpisu:hover { border-color: var(--kolor-lista); }
.ptaszek-wpisu[aria-pressed="true"] {
    background: var(--kolor-lista);
    border-color: var(--kolor-lista);
}
.kartka-zrobiona { border-left-color: var(--kolor-lista); }
.kartka-zrobiona .kartka-tytul {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: var(--muted);
}
.kartka-zrobiona .galeria,
.kartka-zrobiona .kartka-tresc { opacity: .55; }
.znacznik-zrobione { color: var(--kolor-lista); font-weight: 700; }

.pole-wybor { color: var(--text); }
.pole-wybor:hover { color: var(--accent); }
.pole-wybor-opis em { color: var(--muted); }

/* ---------- grupa dnia ---------- *//* ---------- grupa dnia ---------- */
.naglowek-dnia h2 { text-transform: capitalize; }
.znacznik-dnia {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
}
.licznik-dnia {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}

/* ---------- kafelek ---------- */
.kartka {
    --kolor-kartki: var(--accent);
    background: var(--bg-lift);
    border: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--kolor-kartki) 65%, transparent);
    border-radius: var(--promien-sm);
    box-shadow: var(--shadow);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}
.kartka:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.kartka-plan    { --kolor-kartki: var(--kolor-plan); }
.kartka-zdjecie { --kolor-kartki: var(--kolor-zdjecie); }
.kartka-notatka { --kolor-kartki: var(--kolor-notatka); }
.kartka-link    { --kolor-kartki: var(--kolor-link); }
.kartka-lista   { --kolor-kartki: var(--kolor-lista); }
.kartka-pogoda  { --kolor-kartki: var(--kolor-pogoda); }

.kartka-godzina {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: -.02em;
    padding: .1rem .45rem;
    border-radius: 6px;
    color: var(--kolor-kartki);
    background: color-mix(in srgb, var(--kolor-kartki) 13%, transparent);
}
.kartka-ikona { flex: none; font-size: 1.05rem; line-height: 1; }
.kartka-tresc { color: var(--muted); }

/* „Pokaż więcej" pod przyciętą treścią */
.wiecej {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}
.wiecej:hover { text-decoration: underline; }

/* ---------- przyciski na kafelku ---------- */
/* Ciche, dopóki nie najedzie się na kafelek - inaczej sześć ikonek
   przykuwałoby więcej uwagi niż sama treść. */
.ikonka {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    opacity: .62;
    transition: opacity .18s, color .18s, background .18s, border-color .18s;
}
.kartka:hover .ikonka { opacity: 1; }
.ikonka:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.ikonka-usun:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.ikonka:disabled { opacity: .2; cursor: default; }
.kartka:hover .ikonka:disabled { opacity: .2; }

/* Na ekranie dotykowym nie ma najeżdżania - ikonki są widoczne od razu. */
@media (hover: none) {
    .ikonka { opacity: .85; }
}

/* ---------- zdjęcie ---------- */
.ramka-zdjecia {
    background: color-mix(in srgb, var(--text) 6%, transparent);
    transition: filter .22s;
}
.ramka-zdjecia:hover { filter: brightness(1.06) saturate(1.08); }
.wiecej-zdjec {
    background: rgba(8, 10, 16, .58);
    color: #fff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.lista-zdjec li {
    padding: .3rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.usun-zdjecie { color: var(--danger); }
.podglad-miniatury img { border: 1px solid var(--border); }

/* ---------- mapa ---------- */
.kartka-mapa { --kolor-kartki: var(--kolor-mapa); }
.mapka {
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border: 1px solid var(--border);
}
.mapka-stan { color: var(--muted); }
.pinezka-mapy {
    background: var(--kolor-mapa);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
/* Kontrolki i podpowiedzi Leafletu mają wyglądać jak reszta strony. */
.leaflet-container { font: inherit; }
.leaflet-tooltip {
    background: var(--bg-lift);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}
.przelacznik-podkladu {
    background: color-mix(in srgb, var(--powierzchnia) 88%, transparent);
    border: 1px solid var(--border);
    color: var(--text);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: background .16s, color .16s;
}
.przelacznik-podkladu:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.leaflet-control-attribution {
    background: color-mix(in srgb, var(--bg-lift) 88%, transparent);
    color: var(--muted);
    font-size: .62rem;
}
.leaflet-control-attribution a { color: var(--accent); }
.akcja-mapa {
    background: color-mix(in srgb, var(--kolor-mapa) 12%, var(--bg-lift));
    border-color: color-mix(in srgb, var(--kolor-mapa) 35%, transparent);
    color: var(--kolor-mapa);
}
.akcja-mapa:hover {
    background: var(--kolor-mapa);
    color: #fff;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--kolor-mapa) 40%, transparent);
}
.akcja-mapa-obcy {
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border-color: var(--border);
    color: var(--muted);
}
.akcja-mapa-obcy:hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); box-shadow: none; }

/* ---------- link ---------- */
.kartka-link {
    background: color-mix(in srgb, var(--kolor-link) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--kolor-link) 30%, transparent);
    color: var(--kolor-link);
    transition: background .18s, border-color .18s;
}
.kartka-link:hover {
    background: color-mix(in srgb, var(--kolor-link) 22%, transparent);
    border-color: var(--kolor-link);
}
.link-strzalka { flex: none; opacity: .75; }

/* ---------- lista ---------- */
.pasek-listy { background: color-mix(in srgb, var(--text) 10%, transparent); }
.pasek-listy span {
    background: linear-gradient(90deg, var(--kolor-lista), color-mix(in srgb, var(--kolor-lista) 55%, var(--accent)));
    transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.postep-listy { color: var(--muted); }

.odhacz {
    background: transparent;
    color: var(--text);
    transition: background .16s;
}
.odhacz:hover { background: color-mix(in srgb, var(--kolor-lista) 12%, transparent); }
.ptaszek {
    border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
    background: transparent;
    color: #fff;
    font-weight: 800;
    transition: background .16s, border-color .16s;
}
.pozycje-listy .zrobiona .ptaszek {
    background: var(--kolor-lista);
    border-color: var(--kolor-lista);
}
.pozycje-listy .zrobiona .tekst-pozycji {
    text-decoration: line-through;
    color: var(--muted);
}

/* ---------- pogoda ---------- */
.pogoda-miejsce { color: var(--muted); }
.pogoda-dzien { transition: background .16s; }
.pogoda-dzien:nth-child(even) { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pogoda-dzien:hover { background: color-mix(in srgb, var(--kolor-pogoda) 12%, transparent); }
.pogoda-data { color: var(--muted); font-weight: 600; font-size: .78rem; }
.pogoda-temperatura { font-variant-numeric: tabular-nums; }
.pogoda-temperatura b { color: var(--text); }
.pogoda-opad { color: var(--kolor-pogoda); font-weight: 600; }

.pogoda-dzien.rozwiniety {
    background: color-mix(in srgb, var(--kolor-pogoda) 14%, transparent);
    font-weight: 600;
}
.pogoda-szczegoly {
    background: color-mix(in srgb, var(--kolor-pogoda) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--kolor-pogoda) 22%, transparent);
}
.szczegol-nazwa { color: var(--muted); }
.szczegol-wartosc { color: var(--text); font-variant-numeric: tabular-nums; }
.pogoda-podpowiedz { color: var(--muted); }

.pogoda-typowa { border-top: 1px dashed var(--border); }
.pogoda-typowa-naglowek {
    color: var(--kolor-pogoda);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pogoda-typowa-liczby { color: var(--muted); }
.pogoda-typowa-liczby b { color: var(--text); font-size: 1.05rem; }
.pogoda-typowa-deszcz, .pogoda-typowa-kiedy { color: var(--muted); }

/* ---------- kafelki wyboru rodzaju ---------- */
.szybki-start, .kafel-rodzaju {
    background: color-mix(in srgb, var(--bg-lift) 92%, transparent);
    border: 1px solid var(--border);
    color: var(--text);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .18s;
}
.szybki-start:hover, .kafel-rodzaju:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);
}
.szybki-opis, .kafel-opis { color: var(--muted); }

/* ---------- formularz i okno dodawania ---------- */
.dialog-tablicy { width: min(620px, calc(100vw - 1.5rem)); }
.pole-tablicy > span { color: var(--muted); }
.podpowiedz { color: var(--muted); }
.pole-tablicy input[type="file"] {
    padding: .45rem;
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.podglad-zdjecia {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid var(--border);
}
.podglad-opis { color: var(--muted); }

.dodaj-glowny {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
}
.dodaj-glowny:hover { opacity: 1; filter: brightness(1.07); }

.akcja-wroc {
    background: color-mix(in srgb, var(--bg-lift) 92%, transparent);
    border: 1px solid var(--border);
    color: var(--muted);
}
.akcja-wroc:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- powiększone zdjęcie ---------- */
.lightbox {
    background: rgba(6, 8, 14, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: pojaw-lightbox .18s ease-out;
}
@keyframes pojaw-lightbox { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
.lightbox-podpis { color: #E9ECF5; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.lightbox-zamknij, .lightbox-nawigacja {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: background .16s;
}
.lightbox-zamknij:hover, .lightbox-nawigacja:hover { background: rgba(255, 255, 255, .26); }

/* ---------- skala mobilna ---------- */
@media (max-width: 720px) {
    .zakladki { gap: .3rem; margin-bottom: .6rem; }
    .zakladki a { padding: .38rem .7rem; font-size: .82rem; }

    .tablica-podsumowanie { font-size: .76rem; margin-bottom: .6rem; }
    .filtr, .skok-dzien { font-size: .7rem; padding: .22rem .55rem; }
    .filtr-ile { font-size: .6rem; }

    .naglowek-dnia { gap: .4rem; margin-bottom: .55rem; }
    .znacznik-dnia, .licznik-dnia { font-size: .58rem; padding: .06rem .4rem; }

    .siatka-kartek { gap: .5rem; }
    .kartka { padding: .65rem .7rem; gap: .45rem; }
    .kartka-tytul { font-size: .92rem; }
    .kartka-tresc { font-size: .82rem; }
    .kartka-godzina { font-size: .82rem; }
    .ikonka { width: 28px; height: 28px; font-size: .85rem; }

    .odhacz { font-size: .82rem; padding: .3rem .3rem; }
    .ptaszek { width: 18px; height: 18px; }
    .postep-listy { font-size: .68rem; }

    .pogoda-dzien { font-size: .76rem; padding: .18rem .3rem; }
    .pogoda-data { font-size: .7rem; }
    .pogoda-opad { font-size: .64rem; }
    .pogoda-szczegoly { font-size: .68rem; padding: .35rem .45rem; }
    .pogoda-podpowiedz { font-size: .62rem; }
    .pogoda-typowa-naglowek, .pogoda-typowa-deszcz, .pogoda-typowa-kiedy { font-size: .64rem; }
    .pogoda-typowa-liczby { font-size: .85rem; }

    .pasek-zakladek { gap: 2px; margin-bottom: .7rem; padding: .4rem .25rem 0; }
    .zakladka { font-size: .76rem; padding: .36rem .6rem .42rem; border-radius: 10px 10px 0 0; }
    .zakladka.aktywna { padding-top: .5rem; padding-bottom: .5rem; }
    .zakladka-ile { font-size: .62rem; }
    .pasek-ukladania { bottom: .6rem; gap: .35rem; padding: .35rem .4rem; }
    .strzalka-ukladania { width: 30px; height: 30px; font-size: .78rem; }
    .koniec-ukladania { font-size: .72rem; padding: .3rem .65rem; }
    .akcja-trybu { font-size: .7rem; padding: .3rem .55rem; }
    .pasek-ukladania-nazwa { font-size: .76rem; }
    .pasek-ukladania-opis { font-size: .62rem; }
    .galeria-wiele { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lista-zdjec img { width: 44px; height: 44px; }
    .podglad-zdjecia img { width: 52px; height: 52px; }
    .szybki-start, .kafel-rodzaju { padding: .6rem .65rem; }
    .szybki-nazwa, .kafel-nazwa { font-size: .82rem; }
    .szybki-opis, .kafel-opis { font-size: .66rem; }
    .szybki-ikona, .kafel-ikona { font-size: 1.15rem; }

    .pole-tablicy { font-size: .72rem; }
    .pole-tablicy > span { font-size: .66rem; }
    .pole-tablicy input, .pole-tablicy textarea { font-size: .85rem; }
    .podpowiedz { font-size: .66rem; }

    .lightbox { padding: .5rem; }
    .lightbox img { max-height: 76vh; }
    .lightbox-nawigacja { width: 36px; height: 54px; font-size: 1.5rem; }
}

/* =====================================================================
   Podsumowanie wycieczki i porównanie wycieczek
   ===================================================================== */
.gwiazdka { color: var(--pending); }
.filtr.aktywny .gwiazdka { color: #fff; }

.dla-kogo { color: var(--muted); font-weight: 600; }

.stat-opis { color: var(--muted); }
/* Kreska zamiast liczby: brak danych albo „nie dotyczy" - wyciszona,
   żeby nie konkurowała z prawdziwymi wynikami. */
.stat-brak .stat-value { color: var(--muted); opacity: .6; }

/* ---------- porównanie wycieczek ---------- */
/* Tabela leży na pełnym, jednolitym arkuszu: przyklejone komórki muszą
   mieć nieprzezroczyste tło (inaczej przeświecają przez nie liczby
   przewijane pod spodem), a na szkle karty odcinałyby się plamami. */
.porownanie-przewijanie {
    background: var(--powierzchnia);
    border: 1px solid var(--border);
    border-radius: var(--promien-sm);
}
/* Duża tabela podskakująca pod kursorem tylko przeszkadza w czytaniu. */
.porownanie.card:hover { transform: none; }

.tabela-porownania { font-variant-numeric: tabular-nums; }
.tabela-porownania thead th,
.tabela-porownania thead td,
.tabela-porownania th[scope="row"] {
    background: var(--powierzchnia);
}
.tabela-porownania thead th,
.tabela-porownania thead td {
    box-shadow: inset 0 -1px 0 var(--border);
    transition: box-shadow .2s;
}
/* Oderwany od swojego miejsca wiersz nazw rzuca cień na przejeżdżające
   pod nim liczby - widać, że wisi nad nimi. */
.tabela-porownania.naglowek-oderwany thead th,
.tabela-porownania.naglowek-oderwany thead td {
    box-shadow: inset 0 -1px 0 var(--border), 0 10px 18px -12px rgba(0, 0, 0, .45);
}
/* Pionowa kreska oddziela przyklejoną kolumnę od przewijanych liczb. */
.tabela-porownania th[scope="row"],
.tabela-porownania thead td {
    box-shadow: inset -1px 0 0 var(--border);
}
.tabela-porownania thead td {
    box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border);
}
.tabela-porownania.naglowek-oderwany thead td {
    box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border),
                0 10px 18px -12px rgba(0, 0, 0, .45);
}

.tabela-porownania th[scope="row"] { color: var(--text); font-weight: 600; }
.tabela-porownania tbody tr:not(.porownanie-grupa) > * {
    border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
/* Podświetlenie wiersza jako nakładka (background-image), żeby nie zjadało
   zabarwienia najtańszej i najdroższej komórki. */
.tabela-porownania tbody tr:not(.porownanie-grupa):hover > * {
    background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}

.porownanie-nazwa {
    color: var(--text);
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.015em;
    text-decoration: none;
}
.porownanie-nazwa:hover { color: var(--accent); }
.porownanie-osoba { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.porownanie-daty { color: var(--muted); font-size: .72rem; font-weight: 500; }

.porownanie-grupa th {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.porownanie-grupa th span::before {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    vertical-align: .02rem;
}

.porownanie-wartosc { font-weight: 600; color: var(--text); }
.porownanie-opis,
.porownanie-grupa-opis { color: var(--muted); font-weight: 500; }
.porownanie-grupa-opis { text-transform: none; letter-spacing: 0; }
.porownanie-etykieta { font-weight: 500; }

/* „Razem" - najważniejszy wiersz tabeli: pogrubiony, na lekko zabarwionym tle.
   Tło kolumny nazw musi zostać pełne, bo ta kolumna jest przyklejona. */
.wiersz-razem .porownanie-etykieta,
.wiersz-razem .porownanie-wartosc { font-weight: 800; font-size: 1.02rem; }
.wiersz-razem > td { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
.wiersz-razem > th[scope="row"] { background: color-mix(in srgb, var(--accent) 6%, var(--powierzchnia)); }
.wiersz-suma .porownanie-etykieta { font-weight: 600; }
.wiersz-suma .porownanie-wartosc { font-weight: 700; }
/* Gruba kreska między sumami a rozbiciem na kategorie. */
.tabela-porownania tbody tr.wiersz-suma + tr.wiersz-pozycja > * {
    border-top: 2px solid var(--border);
}
.porownanie-pasek { background: color-mix(in srgb, var(--text) 7%, transparent); }
.porownanie-pasek span {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity: .7;
}

.tabela-porownania td.najnizej { background-color: color-mix(in srgb, var(--success) 9%, transparent); }
.tabela-porownania td.najwyzej { background-color: color-mix(in srgb, var(--danger) 8%, transparent); }
.tabela-porownania td.najnizej .porownanie-wartosc,
.legenda.najnizej { color: var(--success); }
.tabela-porownania td.najwyzej .porownanie-wartosc,
.legenda.najwyzej { color: var(--danger); }
.tabela-porownania td.najnizej .porownanie-pasek span { background: var(--success); opacity: .85; }
.tabela-porownania td.najwyzej .porownanie-pasek span { background: var(--danger); opacity: .85; }
.legenda.najnizej { background: var(--success-bg); }
.legenda.najwyzej { background: color-mix(in srgb, var(--danger) 13%, transparent); }

.wybor-porownania > summary { color: var(--muted); font-weight: 600; }
.wybor-porownania > summary::-webkit-details-marker { display: none; }
.wybor-porownania > summary:hover,
.wybor-porownania[open] > summary { color: var(--accent); }
.wybor-ile { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.wybor-wycieczki input[type="checkbox"] { accent-color: var(--accent); }

button.przycisk-cichy {
    background: color-mix(in srgb, var(--bg-lift) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    color: var(--text);
    box-shadow: none;
}
button.przycisk-cichy:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: none;
}

/* Telefon: arkusz od brzegu do brzegu karty, bez bocznych ramek. */
@media (max-width: 720px) {
    .porownanie-przewijanie {
        border-inline: none;
        border-radius: 0;
    }
}

/* ---------- rozwijane kategorie w tabeli wydatków ---------- */
.porownanie-etykieta.rozwin { color: var(--text); }
.porownanie-etykieta.rozwin:hover,
.wiersz-pozycja.otwarty .porownanie-etykieta.rozwin { color: var(--accent); }
.rozwin .strzalka { color: var(--muted); }
.porownanie-etykieta.rozwin:hover .strzalka { color: var(--accent); }

/* Pojedynczy wydatek jest szczegółem swojej kategorii - stonowany,
   żeby nie konkurował z sumami. */
.wiersz-szczegol > * { background-color: color-mix(in srgb, var(--text) 3%, transparent); }
.wiersz-szczegol > th[scope="row"] { background: color-mix(in srgb, var(--text) 3%, var(--powierzchnia)); }
.wiersz-szczegol .szczegol-opis { font-weight: 500; }
.wiersz-szczegol .porownanie-wartosc { font-weight: 500; color: var(--muted); }
.szczegol-obcy .szczegol-opis { color: var(--muted); font-style: italic; }