/* ==========================================================================
   Healthy Home - style pulpitu 1:1 z projektu Claude Design
   (nadpisania tokenów Nocturne + klasy odpowiadające stylom inline artboardu)
   ========================================================================== */
@keyframes hhpulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.4; transform:scale(.75);} }
@keyframes hhspin { to { transform: rotate(360deg); } }

input[type=range] { accent-color: var(--color-accent); }

body {
    --color-accent: #ffffff;
    --color-accent-300: #d0d0d4;
    --color-accent-100: #f5f5f6;
    --color-text: #f7f7f8;
    --hh-panel: #0e0e11;
    --hh-tile: rgba(245,245,246,0.17);
    --hh-tile-hover: rgba(245,245,246,0.12);
    --hh-tile-active: rgba(245,245,246,0.30);
    --color-bg: #17171a;
    --color-surface: #232327;
    --color-divider: rgba(247,247,248,0.16);
    --color-neutral-100: #f5f5f6;
    --color-neutral-200: #e6e6e9;
    --color-neutral-300: #d0d0d4;
    --color-neutral-400: #b3b3b8;
    --color-neutral-500: #94949a;
    --color-neutral-600: #76767c;
    --color-neutral-700: #5a5a60;
    --color-neutral-800: #3f3f44;
    --color-neutral-900: #292a2d;

    /* kolory stanów i serii (z logiki artboardu) */
    --hh-green: oklch(0.72 0.17 150);
    --hh-ok-bg: color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
    --hh-ok-fg: var(--color-text);
    --hh-ok-line: var(--color-neutral-400);
    --hh-warn-bg: oklch(0.4 0.09 80);
    --hh-warn-fg: oklch(0.93 0.11 90);
    --hh-warn-line: oklch(0.83 0.16 85);
    --hh-alert-bg: oklch(0.38 0.12 25);
    --hh-alert-fg: oklch(0.93 0.05 25);
    --hh-alert-line: oklch(0.7 0.2 25);

    background: url("../images/bg-ZWwhdY1.jpg") center / cover fixed no-repeat;
    -webkit-font-smoothing: antialiased;
}

/* motyw jasny (applyTheme z artboardu) */
html[data-theme="light"] body {
    --color-bg: #f0f0f2;
    --color-surface: #ffffff;
    --color-text: #242427;
    --color-divider: rgba(36,36,39,0.16);
    --color-neutral-100: #292a2d;
    --color-neutral-200: #3f3f44;
    --color-neutral-300: #5a5a60;
    --color-neutral-400: #76767c;
    --color-neutral-500: #76767c;
    --color-neutral-600: #b3b3b8;
    --color-neutral-800: #e6e6e9;
    --color-neutral-900: #e2e2e5;
    --color-accent: #242427;
    --color-accent-300: #5a5a60;
    --color-accent-100: #292a2d;
    --hh-panel: #f5f5f7;
    --hh-tile: rgba(255,255,255,0.78);
    --hh-tile-hover: rgba(255,255,255,0.92);
    --hh-tile-active: #ffffff;
}

.card {
    background: var(--hh-tile);
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-radius: 18px;
}

.hh-glass {
    background: var(--hh-tile);
}

.text-muted { color: color-mix(in srgb, var(--color-text) 80%, transparent); }

.hh-panel {
    border-radius: 32px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--hh-panel) 58%, transparent), color-mix(in srgb, var(--hh-panel) 70%, transparent));
    -webkit-backdrop-filter: blur(46px);
    backdrop-filter: blur(46px);
    border: 1px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-neutral-100) 24%, transparent), 0 40px 90px rgba(0,0,0,0.5);
    overflow: hidden;
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
}

/* --- strona i panel --- */
.hh-page {
    min-height: 100vh;
    padding: clamp(14px, 3vw, 48px) clamp(10px, 3vw, 44px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* --- nagłówek --- */
.hh-header {
    border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
}

.hh-nav {
    flex-wrap: wrap;
    gap: 10px var(--space-4);
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
    /* boki jak w treści (.hh-main): lewy o 4 px większy, bo logo ma margin-left: -4px */
    padding: calc(var(--space-4) + 10px) var(--space-4) var(--space-3) calc(var(--space-4) + 4px);
}

.hh-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    text-decoration: none;
    border-radius: 8px;
}

.hh-logo {
    height: 58px;
    width: auto;
    display: block;
    margin-left: -4px;
}

.hh-logo--light,
html[data-theme="light"] .hh-logo--dark { display: none; }
html[data-theme="light"] .hh-logo--light { display: block; }

.hh-theme-btn {
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    color: var(--color-accent);
    padding: 0;
}

.hh-theme-btn svg { display: block; }
.hh-theme-btn .hh-theme-moon,
html[data-theme="light"] .hh-theme-btn .hh-theme-sun { display: none; }
html[data-theme="light"] .hh-theme-btn .hh-theme-moon { display: block; }

/* --- menu wysuwane z lewej (telefon) --- */
.hh-menu-btn {
    display: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: none;
    border-radius: 999px;
    color: var(--color-accent);
    padding: 0;
}

.hh-tag-short { display: none; }

.hh-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.hh-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hh-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: min(300px, 84vw);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 22px 16px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--hh-panel) 90%, transparent), color-mix(in srgb, var(--hh-panel) 96%, transparent));
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-right: 1px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
    box-shadow: 0 0 80px rgba(0, 0, 0, .5);
    transform: translateX(-100%);
    transition: transform .25s ease;
    color: var(--color-text);
}

.hh-drawer.is-open { transform: none; }

.hh-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: var(--space-4);
}

.hh-drawer-head .hh-logo { height: 40px; }

.hh-drawer-close {
    cursor: pointer;
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    color: var(--color-accent);
    padding: 0;
}

.hh-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hh-drawer-link {
    width: 100%;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
}

.hh-drawer-admin {
    margin-top: auto;
    font-size: 12.5px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* wąskie ekrany: hamburger, logo, tag demo i przełącznik motywu w jednym wierszu; pigułki widoków zastępuje menu z lewej */
@media (max-width: 520px) {
    .hh-nav {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .hh-menu-btn { display: grid; }
    .hh-header .hh-views { display: none; }

    .hh-brand {
        flex: 0 0 auto;
    }

    .hh-logo {
        height: 36px;
    }

    .hh-nav .tag-outline {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 9.5px;
        letter-spacing: 0;
        padding: 3px 8px;
    }

    .hh-theme-btn {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 400px) {
    .hh-tag-full { display: none; }
    .hh-tag-short { display: inline; }
}

.hh-views {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    /* boki jak w treści (.hh-main), równo z logo i kartami */
    padding: 10px var(--space-4) var(--space-3);
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
}

.hh-view-btn {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 16px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.hh-view-btn:hover { color: var(--color-accent); }

.hh-view-btn.is-active {
    color: var(--color-text);
    background: var(--hh-tile-active);
}

/* --- treść --- */
.hh-main {
    flex: 1;
    padding: var(--space-6) var(--space-4) var(--space-3);
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
}

/* --- pasek stanu --- */
.hh-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: var(--space-6);
}

.hh-status-vent {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hh-fan {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--color-neutral-600);
}

.hh-fan svg {
    display: block;
    transform-origin: 50% 50%;
}

.hh-fan.is-on { color: var(--hh-green); }
.hh-fan.is-on svg { animation: hhspin 1.1s linear infinite; }

.hh-vent {
    display: flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.5px;
}

.hh-vent-label {
    font-weight: 600;
    color: var(--color-text);
}

.hh-vent-label.is-on { color: var(--hh-green); }

.hh-status-scenario { font-size: 12.5px; }
.hh-status-scenario span { color: var(--color-text); }

.hh-status-clock {
    font-size: 11.5px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* --- karty metryk --- */
.hh-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
}

/* desktop: cztery karty parametrów w rzędzie, każda 25 % szerokości */
@media (min-width: 900px) {
    .hh-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hh-metric {
    text-align: left;
    cursor: pointer;
    border: none;
    padding: var(--space-6);
    font-family: var(--font-body);
    color: var(--color-text);
}

.hh-metric:hover,
.hh-metric.is-selected { background: var(--hh-tile-active); }

.hh-metric-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.hh-metric-icon {
    color: var(--color-neutral-200);
    flex: none;
}

.hh-pill {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    background: var(--hh-ok-bg);
    color: var(--hh-ok-fg);
}

.hh-pill[data-status="warn"] { background: var(--hh-warn-bg); color: var(--hh-warn-fg); }
.hh-pill[data-status="alert"] { background: var(--hh-alert-bg); color: var(--hh-alert-fg); }

.hh-metric-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-neutral-200);
}

.hh-metric-value {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 500;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.hh-metric-unit {
    font-size: 11.5px;
    color: var(--color-text);
    margin-left: 4px;
    font-weight: 400;
}

.hh-spark {
    width: 100%;
    height: 24px;
    display: block;
}

/* SVG są rozciągane (preserveAspectRatio="none"), więc grubość kresek trzymamy stałą */
.hh-spark polyline,
.hh-chart-svg path,
.hh-chart-svg line,
.hh-compare-svg path,
.hh-compare-svg line {
    vector-effect: non-scaling-stroke;
}

.hh-spark polyline { stroke: var(--hh-ok-line); }
.hh-spark polyline[data-status="warn"] { stroke: var(--hh-warn-line); }
.hh-spark polyline[data-status="alert"] { stroke: var(--hh-alert-line); }
.hh-metric.is-selected .hh-spark polyline { stroke: var(--color-accent); }

/* --- wykres --- */
.hh-chart {
    padding: var(--space-6);
    margin-top: var(--space-4);
}

.hh-chart-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hh-chart-icon {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--color-neutral-200);
}

.hh-chart-icon > span {
    display: grid;
    place-items: center;
}

.hh-chart-icon > span[hidden] {
    display: none;
}

.hh-chart-titles {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    min-width: 0;
}

.hh-chart-head h4 {
    margin: 0;
    font-size: 17px;
}

.hh-chart-hint { font-size: 12px; }

.hh-chart-svg {
    width: 100%;
    height: clamp(150px, 26vw, 230px);
    display: block;
    margin-top: var(--space-3);
}

.hh-grid { stroke: var(--color-neutral-900); }
.hh-chart-area { fill: var(--hh-green); opacity: 0.12; }
.hh-chart-line2 { stroke: var(--color-neutral-500); }
.hh-chart-line { stroke: var(--hh-green); }
.hh-chart-thresh { stroke: var(--hh-alert-line); opacity: 0.9; }
.hh-alert-text { color: var(--hh-alert-line); }

.hh-legend {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: var(--space-3);
    font-size: 12.5px;
}

.hh-legend > span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hh-legend-with { color: var(--hh-green); }

.hh-swatch-line {
    width: 20px;
    height: 2px;
    background: var(--hh-green);
}

.hh-swatch-dash {
    width: 20px;
    height: 0;
    border-top: 2px dashed var(--color-neutral-500);
}

.hh-chart-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    margin-top: var(--space-2);
    font-variant-numeric: tabular-nums;
}

/* --- podsumowanie --- */
.hh-summary {
    background: var(--hh-tile);
    border-radius: 18px;
    padding: var(--space-6);
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4) var(--space-8);
}

.hh-summary-kicker {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-300);
}

.hh-summary-value {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 500;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.hh-summary-value[data-status="alert"] { color: var(--hh-alert-line); }
.hh-summary-value[data-status="warn"] { color: var(--hh-warn-line); }
.hh-summary-value[data-status="accent"] { color: var(--color-accent-300); }

.hh-summary-sub {
    font-size: 12px;
    color: var(--color-neutral-400);
}

.hh-summary-text {
    font-size: 13.5px;
    margin-top: 8px;
}

/* --- scenariusze --- */
.hh-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-3);
}

.hh-scenario { padding: var(--space-6); }
.hh-scenario.is-active { background: var(--hh-tile-active); }
.hh-scenario-title { font-size: 14px; }

.hh-scenario-btn {
    align-self: flex-start;
    font-size: 12px;
}

.hh-sliders {
    padding: var(--space-6);
    margin-top: var(--space-4);
}

.hh-sliders-title {
    margin: 0 0 2px;
    font-size: 17px;
}

.hh-sliders-hint {
    font-size: 12.5px;
    margin: 0 0 var(--space-4);
}

.hh-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-4) var(--space-8);
}

.hh-slider {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
}

.hh-slider-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.hh-slider-val {
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.hh-slider input { width: 100%; }

/* --- progi i reakcje --- */
.hh-thresholds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-3);
}

.hh-threshold.is-alert { background: var(--hh-tile-active); }

.hh-threshold-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.hh-threshold-name {
    font-size: 13px;
    font-weight: 500;
}

.hh-threshold-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hh-threshold-label { font-size: 12px; }

.hh-threshold-input {
    width: 86px;
    font-variant-numeric: tabular-nums;
}

.hh-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--color-neutral-900);
    overflow: hidden;
}

.hh-bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width .6s;
}

.hh-bar-fill[data-status="warn"] { background: var(--hh-warn-line); }
.hh-bar-fill[data-status="alert"] { background: var(--hh-alert-line); }

.hh-threshold-now {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.hh-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.hh-reactions {
    background: var(--hh-tile);
    border-radius: 18px;
    padding: var(--space-6);
}

.hh-reactions-title,
.hh-events-title {
    margin: 0 0 var(--space-3);
    font-size: 16px;
}

.hh-events-title { margin-bottom: var(--space-2); }

.hh-reaction {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
    font-size: 13px;
}

.hh-reaction-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: var(--color-neutral-600);
}

.hh-reaction.is-on .hh-reaction-dot {
    background: var(--color-accent);
    animation: hhpulse 1.6s ease-in-out infinite;
}

.hh-reaction-label { flex: 1; }

.hh-reaction-state {
    font-size: 11.5px;
    color: var(--color-neutral-300);
    font-variant-numeric: tabular-nums;
}

.hh-events { padding: var(--space-6); }

.hh-events-list {
    display: flex;
    flex-direction: column;
}

.hh-event {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-divider);
    font-size: 12.5px;
}

.hh-event-time {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.hh-events-empty {
    margin: 0;
    font-size: 12.5px;
}

.hh-events-empty[hidden] { display: none; }

/* --- porównanie wariantów --- */
.hh-compare { padding: var(--space-6); }

.hh-compare-title {
    margin: 0 0 2px;
    font-size: 17px;
}

.hh-compare-hint {
    font-size: 12.5px;
    margin: 0 0 var(--space-4);
}

.hh-compare-svg {
    width: 100%;
    height: clamp(170px, 28vw, 250px);
    display: block;
}

.hh-compare-axis {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-top: var(--space-2);
    font-variant-numeric: tabular-nums;
}

.hh-compare-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.hh-stat { padding: var(--space-6); }

.hh-stat-cols {
    display: flex;
    gap: 22px;
}

.hh-stat-cap { font-size: 11px; }
.hh-stat-cap--accent { color: var(--color-accent-300); }

.hh-stat-val {
    font-family: var(--font-heading);
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

.hh-stat-val--accent { color: var(--color-accent); }

.hh-stat-gain {
    font-size: 12px;
    color: var(--color-accent-300);
}

/* --- stopka --- */
.hh-footer {
    padding: var(--space-3) var(--space-4) calc(var(--space-8) + 10px);
    font-size: 11.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
}

.hh-footer-right {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.hh-footer-admin {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hh-footer-admin:hover { color: var(--color-text); }

/* --- pusty stan --- */
.hh-empty { padding: var(--space-6); }
.hh-empty pre { margin: var(--space-3) 0 0; font-size: 13px; }
.hh-empty-text { margin: 0; font-size: 12.5px; }

/* pasek postępu Turbo */
.turbo-progress-bar {
    height: 2px;
    background: var(--color-accent);
}