/* ════════════════════════════════════════════════════════════════════════
   heatmapa.css — denní heatmapa veličin (rok × měsíce × dny)
   Nordic Clean: cream pozadí, muted palety, jemné stíny, čisté typografie
   Verze 2: refined per-metric palety, sqrt scaling pro srážky, lepší tipografie
   ════════════════════════════════════════════════════════════════════════ */

/* ── Section spacing & cards ───────────────────────────────────────── */
.hn-panel[data-panel="heatmapa"] .hm-modes,
.hn-panel[data-panel="heatmapa"] .hm-years,
.hn-panel[data-panel="heatmapa"] .hm-metrics,
.hn-panel[data-panel="heatmapa"] .hm-legend,
.hn-panel[data-panel="heatmapa"] .hm-grid-wrap,
.hn-panel[data-panel="heatmapa"] .hm-stats {
    margin-bottom: 14px;
}

/* Utility: skrytí v opačném režimu */
.hn-panel[data-panel="heatmapa"] .is-hidden { display: none !important; }

/* ── Mode toggle (Denní / Měsíční) ─────────────────────────────────── */
.hm-modes {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: #FFFEFA;
    border: 1px solid var(--hn-line, #E9E4DA);
    border-radius: 999px;
    width: fit-content;
}
.hm-mode {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--hn-ink-muted, #6B7186);
    font: 500 12.5px 'Inter', sans-serif;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    letter-spacing: 0.2px;
}
.hm-mode:hover { color: var(--hn-ink, #0F1933); }
.hm-mode.is-active {
    background: var(--hn-ink, #0F1933);
    color: #FFFEFA;
    box-shadow: 0 1px 2px rgba(15,25,51,.12);
}

/* ── Year tabs ─────────────────────────────────────────────────────── */
.hm-years {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    background: #FFFEFA;
    border: 1px solid var(--hn-line, #E9E4DA);
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.hm-year {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--hn-ink-muted, #6B7186);
    font: 500 12.5px 'Inter', sans-serif;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
.hm-year:hover {
    background: rgba(15, 25, 51, .04);
    color: var(--hn-ink, #0F1933);
}
.hm-year.is-active {
    background: var(--hn-ink, #0F1933);
    color: #FFFEFA;
    box-shadow: 0 1px 2px rgba(15,25,51,.12);
}
/* Roky bez dat pro aktivní metriku — zašednuté, ne-klikatelné.
   Typicky AQ veličiny (data od 13.5.2026), Sluneční hodiny (od 11/2025).
   pointer-events:none jako pojistka proti hover-flickeru. */
.hm-year.is-empty,
.hm-year:disabled {
    opacity: .35;
    cursor: not-allowed;
    color: var(--hn-ink-faint, #A5ACBF);
    pointer-events: none;
}
.hm-year.is-empty:hover,
.hm-year:disabled:hover {
    background: transparent;
}

/* ── Metric chips ──────────────────────────────────────────────────── */
.hm-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hm-metric {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 10px;
    background: #FFFEFA;
    border: 1px solid var(--hn-line, #E9E4DA);
    color: var(--hn-ink-soft, #3D4869);
    font: 500 12.5px 'Inter', sans-serif;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    letter-spacing: 0.1px;
}
.hm-metric:hover {
    border-color: var(--hn-ink-muted, #6B7186);
    color: var(--hn-ink, #0F1933);
    background: #FFFEFA;
}
.hm-metric.is-active {
    background: var(--hn-ink, #0F1933);
    border-color: var(--hn-ink, #0F1933);
    color: #FFFEFA;
}
/* SVG icon v chipu — tintovaná podle metriky pro okamžitou rozeznatelnost */
.hm-metric__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hm-metric__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
/* Per-metric ikon barvy (akcentový tón z dané color scale).
   Když je chip aktivní, ikona zbělá (zdědí color z parent .hm-metric.is-active) */
.hm-metric--temp  .hm-metric__icon { color: #C03030; }
.hm-metric--range .hm-metric__icon { color: #6F7886; }
.hm-metric--rain  .hm-metric__icon { color: #4F82BF; }
.hm-metric--hum   .hm-metric__icon { color: #6A8AB2; }
.hm-metric--press .hm-metric__icon { color: #A87F4F; }
.hm-metric--wind  .hm-metric__icon { color: #4D5462; }
.hm-metric--solar .hm-metric__icon { color: #D0631E; }
.hm-metric--uv    .hm-metric__icon { color: #C76421; }
.hm-metric.is-active .hm-metric__icon { color: #FFFEFA; }

/* ── Popisek aktivní veličiny — vysvětlení pro laické uživatele ───── */
.hm-description {
    background: linear-gradient(180deg, #FFFEFA 0%, #F8F5EC 100%);
    border: 1px solid var(--hn-line, #E9E4DA);
    border-left: 3px solid #66BC29;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--hn-ink, #0F1933);
}
.hm-description__label {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: #2E5B9E;
    letter-spacing: 0.2px;
}
.hm-description__text {
    color: var(--hn-ink-soft, #4A5260);
    font-size: 13px;
}

/* ── Description header — řádek s nadpisem a (volitelným) info chipem ── */
.hm-description__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Notice chip — kompaktní info v pravém horním rohu popisku.
   Místo velkého výrazného banneru jen decentní pilulka s ikonou kalendáře. ── */
.hm-description__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(46, 91, 158, 0.06);
    border: 1px solid rgba(46, 91, 158, 0.18);
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #2E5B9E;
    white-space: nowrap;
    line-height: 1;
}
.hm-description__chip[hidden] { display: none; }
.hm-description__chip-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ── Color scale legend ────────────────────────────────────────────── */
.hm-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFEFA;
    border: 1px solid var(--hn-line, #E9E4DA);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 12.5px;
}
.hm-legend__title {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 150px;
    color: var(--hn-ink, #0F1933);
    font-weight: 500;
}
.hm-legend__title .hm-legend__unit {
    font-size: 12px;
    color: var(--hn-ink-muted, #6B7186);
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif;
    font-style: normal;
    letter-spacing: 0.2px;
}
.hm-legend__scale {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 240px;
}
.hm-legend__bar {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg,
        var(--scale-0, #2E5B9E) 0%,
        var(--scale-25, #ECEAE0) 50%,
        var(--scale-100, #C03030) 100%);
}
.hm-legend__ticks {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--hn-ink-muted, #6B7186);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

/* ── Heatmap grid ──────────────────────────────────────────────────── */
.hm-grid-wrap {
    background: #FFFEFA;
    border: 1px solid var(--hn-line, #E9E4DA);
    border-radius: 14px;
    padding: 18px 20px 24px;
    overflow-x: auto;
}
.hm-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 920px;
}
.hm-row {
    display: grid;
    grid-template-columns: 76px repeat(31, 1fr);
    gap: 3px;
    align-items: stretch;
}
.hm-row--header {
    margin-bottom: 8px;
}
.hm-month-label {
    display: flex;
    align-items: center;
    padding: 0 10px 0 4px;
    line-height: 1;
    user-select: none;
}
.hm-month-label--header { height: 22px; }
/* Just elegant Czech name in italic Instrument Serif — one line, no clutter */
.hm-month-name {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 14px;
    color: var(--hn-ink-soft, #3D4869);
    letter-spacing: 0.2px;
    font-weight: 400;
}
/* Day header — only major (1, 5, 10, 15, 20, 25, 31) prominent. Others very faint. */
.hm-day-header {
    font-size: 10px;
    color: transparent;  /* default invisible */
    text-align: center;
    user-select: none;
    padding: 4px 0;
    font-variant-numeric: tabular-nums;
}
.hm-day-header.is-major {
    color: var(--hn-ink-muted, #6B7186);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.4px;
}
/* Buňky */
.hm-cell {
    aspect-ratio: 1 / 1;
    min-height: 24px;
    border-radius: 3px;
    background: #F6F4ED;  /* cream tinted default */
    cursor: default;
    transition: transform .12s ease, box-shadow .12s ease;
    position: relative;
}
.hm-cell:not(.is-nonexistent):not(.is-empty) {
    cursor: pointer;
}
.hm-cell:not(.is-nonexistent):not(.is-empty):hover {
    transform: scale(1.10);
    box-shadow: 0 2px 8px rgba(15,25,51,.16);
    z-index: 5;
    outline: 1.5px solid rgba(15,25,51,.20);
}
.hm-cell.is-empty {
    background: #F6F4ED;
    opacity: 0.55;
}
.hm-cell.is-nonexistent {
    background: transparent;
    cursor: default;
    pointer-events: none;
}

/* ── Stats ─────────────────────────────────────────────────────────── */
.hm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.hm-stat {
    background: #FFFEFA;
    border: 1px solid var(--hn-line, #E9E4DA);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hm-stat__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--hn-ink-muted, #6B7186);
}
.hm-stat__val {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 200;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--hn-ink, #0F1933);
    margin-top: 2px;
}
.hm-stat__unit {
    font-size: 13px;
    color: var(--hn-ink-muted, #6B7186);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.2px;
}
.hm-stat__sub {
    font-size: 12px;
    color: var(--hn-ink-soft, #3D4869);
    font-variant-numeric: tabular-nums;
}

/* ── Tooltip ───────────────────────────────────────────────────────── */
.hm-tooltip {
    position: fixed;
    pointer-events: none;
    background: var(--hn-ink, #0F1933);
    color: #FFFEFA;
    padding: 11px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(15,25,51,.30);
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-10px);
    transition: opacity .14s ease;
    z-index: 100;
    white-space: nowrap;
}
.hm-tooltip[aria-hidden="false"] {
    opacity: 1;
}
.hm-tooltip__date {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 12.5px;
    color: rgba(255,254,250, .90);
    letter-spacing: 0.2px;
}
.hm-tooltip__value {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 300;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.6px;
}
.hm-tooltip__metric {
    font-size: 13px;
    color: rgba(255,254,250, .88);
    margin-top: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.2px;
}

/* ── Měsíční heatmapa (roky × 12 měsíců + sloupec ROK) ──────────── */
.hm-grid--monthly {
    min-width: 720px;
    gap: 4px;
}
.hm-row--monthly,
.hm-row--monthly-header {
    /* rok-label + 12 měsíců + roční souhrn */
    grid-template-columns: 64px repeat(12, 1fr) 76px;
    gap: 4px;
}
.hm-row--monthly-header { margin-bottom: 8px; }

/* Label řádku — rok */
.hm-year-label {
    display: flex;
    align-items: center;
    padding: 0 8px 0 4px;
    font: 600 13px 'Inter', sans-serif;
    color: var(--hn-ink-soft, #3D4869);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    user-select: none;
}
.hm-year-label--header { height: 22px; }

/* Header sloupce — názvy měsíců */
.hm-month-header {
    font: 600 10.5px 'Inter', sans-serif;
    color: var(--hn-ink-muted, #6B7186);
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: uppercase;
    padding: 4px 0;
    user-select: none;
}
.hm-yearsum-header {
    font: 600 10.5px 'Inter', sans-serif;
    color: var(--hn-ink-muted, #6B7186);
    letter-spacing: 0.6px;
    text-align: center;
    padding: 4px 0;
    border-left: 1px solid var(--hn-line, #E9E4DA);
    margin-left: 2px;
    user-select: none;
}

/* Měsíční buňka — větší než denní, s hodnotou uvnitř */
.hm-mcell {
    min-height: 38px;
    border-radius: 4px;
    background: #F6F4ED;
    cursor: default;
    transition: transform .12s ease, box-shadow .12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 12px 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    color: #0F1933;
    letter-spacing: 0.1px;
    position: relative;
}
.hm-mcell:not(.is-empty) { cursor: pointer; }
.hm-mcell:not(.is-empty):hover {
    transform: scale(1.06);
    box-shadow: 0 2px 10px rgba(15,25,51,.18);
    z-index: 5;
    outline: 1.5px solid rgba(15,25,51,.20);
}
.hm-mcell.is-empty {
    background: #F6F4ED;
    color: var(--hn-ink-faint, #A5ACBF);
    opacity: 0.55;
}

/* Roční souhrn — vpravo, oddělený jemnou linkou */
.hm-yearsum {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 13px 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--hn-ink, #0F1933);
    background: #FFFEFA;
    border: 1px solid var(--hn-line, #E9E4DA);
    border-radius: 6px;
    padding: 0 6px;
    margin-left: 2px;
    letter-spacing: 0.3px;
}
.hm-yearsum.is-empty {
    color: var(--hn-ink-faint, #A5ACBF);
    background: #FAF8F2;
}

/* ── Responsivní úpravy ──────────────────────────────────────────── */
@media (max-width: 980px) {
    .hm-stats { grid-template-columns: repeat(2, 1fr); }
    .hm-row { grid-template-columns: 60px repeat(31, 1fr); }
    .hm-cell { min-height: 20px; }
    .hm-month-name { font-size: 10.5px; }
    /* Monthly: menší rozměry, ale grid layout zachovat */
    .hm-row--monthly,
    .hm-row--monthly-header { grid-template-columns: 52px repeat(12, 1fr) 64px; }
    .hm-mcell { min-height: 32px; font-size: 11px; }
    .hm-yearsum { font-size: 11.5px; }
    .hm-month-header { font-size: 9.5px; }
}
@media (max-width: 640px) {
    .hm-legend { flex-direction: column; align-items: stretch; gap: 10px; }
    .hm-legend__title { min-width: 0; }
    .hm-stat__val { font-size: 28px; }
    /* Monthly: na mobilu se hodnota v buňce neumí přečíst, schováme ji */
    .hm-mcell { font-size: 0; min-height: 26px; }
    .hm-row--monthly,
    .hm-row--monthly-header { grid-template-columns: 44px repeat(12, 1fr) 52px; }
    .hm-yearsum { font-size: 10.5px; padding: 0 3px; }
}