/* app-nav.css — appi-tyylinen alavalikko (vain mobiili), jaettu header.php:n ja
   partial_dashboard_head.php:n välillä. Aiemmin kaksi lähes identtistä kopiota
   näissä kahdessa tiedostossa (ylläpito-/ajautumisriski), yhdistetty tähän
   2026-09-10 mobiili-PWA-uudistuksen yhteydessä.

   Väriteemat eroavat: header.php on aina tumma eikä käytä samoja teemamuuttujia
   kuin uusi dashboard-kuori, joten värit tulevat --appnav-*-mukautetuista
   ominaisuuksista joilla on tässä turvalliset (dashboard-kuoren) oletusarvot;
   header.php määrittää omat --appnav-*-arvonsa omassa :root{}-lohkossaan. */
.app-nav { display: none; }
@media (max-width: 700px) {
    body { padding-bottom: 76px; }
    .app-nav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
        background: var(--appnav-bg, var(--card-bg));
        border-top: 1px solid var(--appnav-border-color, var(--card-border));
        backdrop-filter: blur(8px);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
    }
    .app-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 6px 2px; color: var(--appnav-item-color, var(--text-muted)); text-decoration: none;
        font-family: inherit; font-size: 12px; font-weight: 600; background: none; border: none; cursor: pointer;
        min-width: 0; min-height: 44px; white-space: nowrap;
    }
    .app-nav-item svg { flex-shrink: 0; }
    .app-nav-item.active { color: var(--appnav-accent, var(--accent)); }
    /* Käyttäjän pyynnöstä (2026-09-10) "päivitetty hh:mm" -teksti pois kokonaan mobiilin
       alanavigoinnista — turhaa kromia joka ahtoi Etusivu-napin. */
    .app-nav-time { display: none; }
    /* Värilliset ikonimerkit (käyttäjän pyynnöstä 2026-09-10: "hienommiksi ja värillisiksi
       että erottuu vieläkin paremmin") — jokaisella kohteella oma tunnusväri, aina näkyvissä
       (ei vain aktiivisena), jotta rivi erottuu selvästi taustasta riippumatta. Ikonin oma
       stroke on aina valkoinen badgen sisällä, joten .app-nav-item.active ei enää värjää
       itse ikonia (badge hoitaa sen) — vain tekstin väri vaihtuu aktiivisena. */
    .app-nav-icon-badge {
        width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center;
        justify-content: center; margin-bottom: 1px; box-shadow: 0 2px 6px rgba(0,0,0,.25);
    }
    .app-nav-icon-badge svg { stroke: #fff; }
    .app-nav-icon-home     { background: linear-gradient(135deg, #818cf8, #4f46e5); }
    .app-nav-icon-news     { background: linear-gradient(135deg, #fb923c, #ea580c); }
    .app-nav-icon-weather  { background: linear-gradient(135deg, #fcd34d, #f59e0b); }
    .app-nav-icon-calendar { background: linear-gradient(135deg, #c084fc, #9333ea); }
    .app-nav-icon-profile  { background: linear-gradient(135deg, #34d399, #059669); }
}