/* ═══════════════════════════════════════════════════════════════════════
   status-pracownika.css — wspólne style modułu „Status Pracownika"
   Strony: status-pracownika.php, mapa-polski.php, statystyki-emocji.php
   Mobile-first • dark mode (html.dark) • płynne animacje
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --sp-red: #E30613;
    --sp-yellow: #FFD500;
    --sp-dark: #1a1a1a;
    --sp-light: #f7f7f7;
    --sp-card: #ffffff;
    --sp-border: #e5e7eb;
    --sp-text: #1a1a1a;
    --sp-muted: #6b7280;
    --sp-gradient: linear-gradient(135deg, #E30613 0%, #b91c1c 40%, #1a1a1a 100%);
}
html.dark {
    --sp-card: #1f2937;
    --sp-border: #374151;
    --sp-text: #f3f4f6;
    --sp-muted: #9ca3af;
}

.sp-body {
    font-family: 'Inter', sans-serif;
    background: var(--sp-light);
    color: var(--sp-text);
    min-height: 100vh;
    transition: background-color .3s, color .3s;
}
html.dark .sp-body { background: #111827; }

.sp-body * { box-sizing: border-box; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.sp-hero {
    background: var(--sp-gradient);
    padding: 2.6rem 1rem 2.2rem;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.sp-hero-icon {
    width: 62px; height: 62px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin-bottom: .9rem;
    border: 1px solid rgba(255,255,255,.2);
}
.sp-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .4rem;
}
.sp-hero p { opacity: .85; font-size: .92rem; max-width: 560px; margin: 0 auto; }

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
.sp-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.4rem 1rem 3rem;
}

.sp-card {
    background: var(--sp-card);
    border: 1px solid var(--sp-border);
    border-radius: 18px;
    padding: 1.4rem 1.2rem;
    margin-bottom: 1.3rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
    animation: spFadeUp .45s ease both;
}
@keyframes spFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.sp-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap;
    margin-bottom: .5rem;
}
.sp-card-head h2 {
    font-size: 1.18rem; font-weight: 800; margin: 0;
    display: flex; align-items: center; gap: .45rem;
}
.sp-h-emoji { font-size: 1.35rem; }

.sp-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(227,6,19,.08); color: var(--sp-red);
    font-size: .76rem; font-weight: 700;
    border-radius: 999px; padding: .3rem .7rem;
    white-space: nowrap;
}
html.dark .sp-badge { background: rgba(255,213,0,.1); color: var(--sp-yellow); }

.sp-muted { color: var(--sp-muted); font-size: .9rem; margin: .2rem 0 1rem; }

/* ── PRZYCISKI ────────────────────────────────────────────────────────── */
.sp-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    border: none; cursor: pointer; text-decoration: none;
    font-weight: 700; font-size: .9rem; font-family: inherit;
    border-radius: 12px; padding: .65rem 1.15rem;
    transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.sp-btn:active { transform: scale(.96); }
.sp-btn-sm { padding: .45rem .85rem; font-size: .82rem; }
.sp-btn-primary { background: var(--sp-red); color: #fff; }
.sp-btn-primary:hover { background: #c00511; box-shadow: 0 6px 16px rgba(227,6,19,.3); color:#fff; }
.sp-btn-yellow { background: var(--sp-yellow); color: #1a1a1a; }
.sp-btn-yellow:hover { background: #eec700; box-shadow: 0 6px 16px rgba(255,213,0,.35); color:#1a1a1a; }
.sp-btn-ghost {
    background: transparent; color: var(--sp-text);
    border: 1.5px solid var(--sp-border);
}
.sp-btn-ghost:hover { border-color: var(--sp-red); color: var(--sp-red); }
.sp-btn-row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ── KARTA INFO (gość / brak miasta / moduł off) ──────────────────────── */
.sp-info-card { text-align: center; padding: 2.4rem 1.2rem; }
.sp-info-emoji { font-size: 2.6rem; margin-bottom: .7rem; }
.sp-info-card h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .5rem; }
.sp-info-card p { color: var(--sp-muted); max-width: 460px; margin: 0 auto 1.2rem; font-size: .92rem; }

.sp-nocity {
    text-align: center;
    background: linear-gradient(135deg, rgba(255,213,0,.1), rgba(227,6,19,.06));
    border: 1.5px dashed rgba(227,6,19,.35);
    border-radius: 16px;
    padding: 1.8rem 1.2rem;
    margin-top: .6rem;
}
html.dark .sp-nocity { background: linear-gradient(135deg, rgba(255,213,0,.06), rgba(227,6,19,.08)); }
.sp-nocity-emoji { font-size: 2.2rem; margin-bottom: .5rem; }
.sp-nocity h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .4rem; }
.sp-nocity p { color: var(--sp-muted); font-size: .88rem; max-width: 440px; margin: 0 auto 1rem; }

/* ── SIATKA STATUSÓW ──────────────────────────────────────────────────── */
.sp-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
}
@media (min-width: 640px) { .sp-status-grid { grid-template-columns: repeat(4, 1fr); } }

.sp-status-btn {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    background: var(--sp-card);
    border: 2px solid var(--sp-border);
    border-radius: 14px;
    padding: .9rem .5rem .75rem;
    cursor: pointer; font-family: inherit;
    transition: transform .15s, border-color .2s, box-shadow .2s, background .2s;
}
.sp-status-btn:hover {
    transform: translateY(-3px);
    border-color: var(--sp-kolor);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.sp-status-btn:active { transform: scale(.95); }
.sp-status-btn.is-active {
    border-color: var(--sp-kolor);
    background: color-mix(in srgb, var(--sp-kolor) 12%, var(--sp-card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-kolor) 25%, transparent);
}
.sp-status-emoji { font-size: 1.6rem; line-height: 1; }
.sp-status-nazwa { font-size: .78rem; font-weight: 700; color: var(--sp-text); text-align: center; }

/* fallback dla przeglądarek bez color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .sp-status-btn.is-active, .sp-emocja-btn.is-active { background: rgba(227,6,19,.08); }
}

/* ── POLE „INNE" ──────────────────────────────────────────────────────── */
.sp-inne {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .35s ease, opacity .3s ease, margin .3s;
    margin-top: 0;
}
.sp-inne.is-open { max-height: 230px; opacity: 1; margin-top: .9rem; }
.sp-inne-label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .4rem; }
.sp-inne textarea {
    width: 100%; resize: none;
    background: var(--sp-light);
    border: 1.5px solid var(--sp-border);
    border-radius: 12px;
    padding: .7rem .9rem;
    font-family: inherit; font-size: .9rem; color: var(--sp-text);
    transition: border-color .2s;
}
html.dark .sp-inne textarea { background: #111827; }
.sp-inne textarea:focus { outline: none; border-color: var(--sp-red); }
.sp-inne-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .45rem; gap: .6rem;
}
.sp-inne-licznik { font-size: .76rem; color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.sp-inne-licznik.is-limit { color: var(--sp-red); font-weight: 700; }

/* ── AKTUALNY WYBÓR ───────────────────────────────────────────────────── */
.sp-status-aktualny {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: rgba(34,197,94,.09);
    border: 1px solid rgba(34,197,94,.3);
    color: #15803d;
    border-radius: 12px;
    padding: .65rem .9rem;
    font-size: .86rem;
    margin-top: 1rem;
    animation: spFadeUp .3s ease both;
}
html.dark .sp-status-aktualny { color: #4ade80; background: rgba(34,197,94,.08); }

.sp-cta-mapa { text-align: center; margin-top: 1.1rem; }

/* ── SIATKA EMOCJI ────────────────────────────────────────────────────── */
.sp-emocje-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
}
@media (min-width: 640px) { .sp-emocje-grid { grid-template-columns: repeat(8, 1fr); } }

.sp-emocja-btn {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    background: var(--sp-card);
    border: 2px solid var(--sp-border);
    border-radius: 14px;
    padding: .7rem .25rem .55rem;
    cursor: pointer; font-family: inherit;
    transition: transform .15s, border-color .2s, box-shadow .2s, background .2s;
}
.sp-emocja-btn:hover { transform: translateY(-3px) scale(1.04); border-color: var(--sp-kolor); }
.sp-emocja-btn:active { transform: scale(.92); }
.sp-emocja-btn.is-active {
    border-color: var(--sp-kolor);
    background: color-mix(in srgb, var(--sp-kolor) 12%, var(--sp-card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-kolor) 25%, transparent);
}
.sp-emocja-emoji { font-size: 1.5rem; line-height: 1; }
.sp-emocja-nazwa { font-size: .68rem; font-weight: 700; color: var(--sp-muted); text-align: center; }
.sp-emocja-btn.is-active .sp-emocja-nazwa { color: var(--sp-text); }

/* ── KONTEKST NASTROJU ────────────────────────────────────────────────── */
.sp-kontekst-chips {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin: 0 0 .9rem;
}
.sp-kontekst-chip {
    border: 1.5px solid var(--sp-border);
    background: var(--sp-card);
    color: var(--sp-muted);
    font-family: inherit; font-size: .8rem; font-weight: 700;
    border-radius: 999px; padding: .4rem .95rem;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.sp-kontekst-chip:hover { border-color: var(--sp-red); color: var(--sp-red); }
.sp-kontekst-chip:active { transform: scale(.95); }
.sp-kontekst-chip.is-active {
    background: var(--sp-red); border-color: var(--sp-red); color: #fff;
}

.sp-kontekst-temat {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255,213,0,.14), rgba(227,6,19,.07));
    border: 1.5px solid rgba(255,213,0,.5);
    border-radius: 12px;
    padding: .65rem .9rem;
    font-size: .87rem;
    margin: .2rem 0 .8rem;
}
html.dark .sp-kontekst-temat {
    background: linear-gradient(135deg, rgba(255,213,0,.08), rgba(227,6,19,.1));
    border-color: rgba(255,213,0,.3);
}

/* puls po zapisie */
@keyframes spPuls { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sp-saved-pulse { animation: spPuls .45s ease; }

/* ── TOAST ────────────────────────────────────────────────────────────── */
.sp-toast {
    position: fixed; left: 50%; bottom: 84px;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a1a; color: #fff;
    border-radius: 12px; padding: .7rem 1.1rem;
    font-size: .86rem; font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 9999;
    max-width: 92vw; text-align: center;
}
.sp-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.sp-toast.is-error { background: var(--sp-red); }
html.dark .sp-toast { background: #374151; }
html.dark .sp-toast.is-error { background: #b91c1c; }

/* ── MAPA POLSKI ──────────────────────────────────────────────────────── */
.sp-mapa-wrap {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}
.sp-mapa-svg { width: 100%; height: auto; display: block; }
.sp-woj {
    fill: #f1f2f4;
    stroke: #c9ccd1;
    stroke-width: 1.1;
    cursor: pointer;
    transition: fill .25s, filter .2s, stroke .25s;
}
html.dark .sp-woj { fill: #273142; stroke: #3b4759; }
.sp-woj:hover { filter: brightness(.93); }
html.dark .sp-woj:hover { filter: brightness(1.18); }
.sp-woj.is-selected {
    stroke: var(--sp-red); stroke-width: 2.2;
    filter: drop-shadow(0 2px 6px rgba(227,6,19,.4));
}
.sp-woj-label {
    font-size: 13px; font-weight: 700; fill: #4b5563;
    pointer-events: none; text-anchor: middle;
}
html.dark .sp-woj-label { fill: #cbd5e1; }
.sp-woj-cnt {
    font-size: 15px; font-weight: 800; fill: #111827;
    pointer-events: none; text-anchor: middle;
}
html.dark .sp-woj-cnt { fill: #ffffff; }

/* legenda intensywności */
.sp-mapa-legenda {
    display: flex; align-items: center; justify-content: center;
    gap: .45rem; margin-top: .7rem; font-size: .74rem; color: var(--sp-muted);
}
.sp-legenda-skala {
    display: inline-flex; height: 10px; width: 130px; border-radius: 6px; overflow: hidden;
}
.sp-legenda-skala span { flex: 1; }

/* tooltip mapy */
.sp-mapa-tooltip {
    position: absolute; pointer-events: none;
    background: #1a1a1a; color: #fff;
    border-radius: 10px; padding: .5rem .75rem;
    font-size: .78rem; line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    opacity: 0; transition: opacity .15s;
    z-index: 50; white-space: nowrap;
}
.sp-mapa-tooltip.is-visible { opacity: 1; }

/* panel szczegółów regionu */
.sp-region-panel { margin-top: 1.2rem; }
.sp-region-head {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    margin-bottom: .7rem;
}
.sp-region-head h3 { font-size: 1.05rem; font-weight: 800; margin: 0; text-transform: capitalize; }

/* paski rozkładu */
.sp-rozklad { display: flex; flex-direction: column; gap: .5rem; }
.sp-rozklad-row { display: flex; align-items: center; gap: .6rem; }
.sp-rozklad-label {
    flex: 0 0 130px; font-size: .8rem; font-weight: 600;
    display: flex; align-items: center; gap: .35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-rozklad-bar-bg {
    flex: 1; height: 14px; border-radius: 8px;
    background: var(--sp-light); overflow: hidden;
}
html.dark .sp-rozklad-bar-bg { background: #111827; }
.sp-rozklad-bar {
    height: 100%; border-radius: 8px;
    width: 0; transition: width .7s cubic-bezier(.22,1,.36,1);
}
.sp-rozklad-val {
    flex: 0 0 72px; text-align: right;
    font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* rankingi / tabele */
.sp-ranking { display: flex; flex-direction: column; gap: .35rem; }
.sp-ranking-row {
    display: flex; align-items: center; gap: .6rem;
    background: var(--sp-light);
    border-radius: 10px; padding: .5rem .75rem;
    font-size: .85rem;
    transition: transform .15s;
}
html.dark .sp-ranking-row { background: #111827; }
.sp-ranking-row:hover { transform: translateX(3px); }
.sp-ranking-poz {
    flex: 0 0 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-yellow); color: #1a1a1a;
    font-weight: 800; font-size: .76rem; border-radius: 8px;
}
.sp-ranking-row:nth-child(n+4) .sp-ranking-poz { background: var(--sp-border); color: var(--sp-muted); }
.sp-ranking-nazwa { flex: 1; font-weight: 600; text-transform: capitalize; }
.sp-ranking-meta { color: var(--sp-muted); font-size: .76rem; }
.sp-ranking-cnt { font-weight: 800; font-variant-numeric: tabular-nums; }

/* siatka 2 kolumn na desktopie */
.sp-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 768px) { .sp-grid-2 { grid-template-columns: 1fr 1fr; } }

/* mini-wykres trendu (slupki) */
.sp-trend {
    display: flex; align-items: flex-end; gap: 6px;
    height: 90px; padding-top: .4rem;
}
.sp-trend-bar {
    flex: 1; min-width: 10px;
    background: linear-gradient(180deg, var(--sp-red), #f97316);
    border-radius: 6px 6px 2px 2px;
    position: relative;
    transition: height .6s cubic-bezier(.22,1,.36,1);
    height: 4px;
}
.sp-trend-bar[data-cnt="0"] { background: var(--sp-border); }
.sp-trend-labels { display: flex; gap: 6px; margin-top: .3rem; }
.sp-trend-labels span {
    flex: 1; text-align: center;
    font-size: .62rem; color: var(--sp-muted);
    white-space: nowrap; overflow: hidden;
}

/* ── PASEK EMOCJI (strona główna i statystyki) ────────────────────────── */
.sp-pasek {
    display: flex; width: 100%; height: 38px;
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--sp-border);
}
.sp-pasek-seg {
    display: flex; align-items: center; justify-content: center; gap: .25rem;
    color: #fff; font-size: .78rem; font-weight: 800;
    min-width: 0; overflow: hidden; white-space: nowrap;
    transition: width .7s cubic-bezier(.22,1,.36,1), flex-basis .7s cubic-bezier(.22,1,.36,1);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    cursor: pointer; border: none; font-family: inherit;
}
.sp-pasek-seg:hover { filter: brightness(1.08); }
.sp-pasek-puste {
    width: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--sp-muted); font-size: .8rem; gap: .4rem;
}

/* duże liczby statystyk */
.sp-stat-tiles {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
}
@media (min-width: 640px) { .sp-stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.sp-stat-tile {
    background: var(--sp-light);
    border-radius: 14px; padding: .85rem .7rem;
    text-align: center;
}
html.dark .sp-stat-tile { background: #111827; }
.sp-stat-tile .val { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.sp-stat-tile .lbl { font-size: .72rem; color: var(--sp-muted); font-weight: 600; }

/* przelaczniki zakresu (dzis / 7 / 30 dni) */
.sp-range-switch {
    display: inline-flex; gap: .3rem;
    background: var(--sp-light);
    border-radius: 12px; padding: .25rem;
}
html.dark .sp-range-switch { background: #111827; }
.sp-range-btn {
    border: none; cursor: pointer; font-family: inherit;
    font-size: .8rem; font-weight: 700;
    padding: .45rem .85rem; border-radius: 9px;
    background: transparent; color: var(--sp-muted);
    transition: background .2s, color .2s;
}
.sp-range-btn.is-active { background: var(--sp-red); color: #fff; }

/* skeleton ladowania */
@keyframes spSkeleton { 0% { opacity: .45; } 50% { opacity: .9; } 100% { opacity: .45; } }
.sp-skeleton {
    border-radius: 12px; background: var(--sp-border);
    animation: spSkeleton 1.2s ease-in-out infinite;
    min-height: 60px;
}

/* sekcja paska emocji na stronie głównej */
.sp-home-bar-card {
    background: var(--sp-card);
    border: 1px solid var(--sp-border);
    border-radius: 18px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.sp-home-bar-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem;
}
.sp-home-bar-head h2 {
    font-size: 1.05rem; font-weight: 800; margin: 0;
    display: flex; align-items: center; gap: .45rem;
}
.sp-home-bar-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .6rem; gap: .6rem; flex-wrap: wrap;
}
.sp-home-bar-licznik { font-size: .76rem; color: var(--sp-muted); }
.sp-link {
    color: var(--sp-red); font-weight: 700; font-size: .82rem;
    text-decoration: none; display: inline-flex; align-items: center; gap: .3rem;
}
.sp-link:hover { text-decoration: underline; color: var(--sp-red); }

/* redukcja animacji */
@media (prefers-reduced-motion: reduce) {
    .sp-card, .sp-toast, .sp-rozklad-bar, .sp-trend-bar, .sp-pasek-seg { transition: none; animation: none; }
}