/* Smart Muslim — bottom navigation lineare, stile iOS/Instagram.
 *
 * Interviene SOLO sulla bottom navigation. Non tocca routing, ordine delle
 * tab, logica active/inactive, contenuti o altre schermate.
 *
 * Perche' tutto qui e niente in index.html: le icone vengono applicate come
 * CSS mask sullo span esistente, nascondendo l'<img> PNG. Cosi il colore e'
 * guidato da currentColor e non serve modificare il markup.
 *
 * NOTA: premium-system.css imposta il contenitore con !important
 * (border-radius:0, border-top, ombra verso l'alto). Questo file e' caricato
 * dopo e deve quindi usare !important per riportarlo a capsula.
 */

:root {
    --sm-nav-h: 76px;          /* altezza della barra */
    --sm-nav-gap: 8px;         /* stacco dal fondo, oltre la safe area */
    --sm-nav-inline: 12px;     /* margine laterale */
    --sm-nav-icon: 26px;       /* dimensione ottica delle icone */
    --sm-nav-green: #0F5C46;
    --sm-nav-mint: #EAF5EF;
    --sm-nav-cream: #FBF8F1;
    --sm-nav-inactive: #9A9B98;
    --sm-nav-label: #7F817E;
}

/* ---------------------------------------------------- la barra */

#view-tabs.bottom-nav[class] {
    position: fixed !important;
    left: var(--sm-nav-inline) !important;
    right: var(--sm-nav-inline) !important;
    width: auto !important;
    max-width: 460px !important;
    margin-inline: auto !important;
    transform: none !important;

    bottom: calc(var(--sm-nav-gap) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: var(--sm-nav-h) !important;
    height: var(--sm-nav-h) !important;
    padding: 0 6px !important;

    /* Una sola forma lineare: nessun rialzo, nessun notch. */
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 28px !important;
    background: rgba(251, 248, 241, .96) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    box-shadow:
        0 4px 18px rgba(20, 30, 25, .06),
        0 1px 3px rgba(20, 30, 25, .04) !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    overflow: visible !important;
}

/* Lo spazio riservato in fondo alla pagina segue l'altezza della barra. */
body {
    padding-bottom: calc(var(--sm-nav-h) + var(--sm-nav-gap) * 2 + env(safe-area-inset-bottom, 0px)) !important;
}

/* ---------------------------------------------------- le cinque tab */

#view-tabs.bottom-nav[class] .bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    /* Stessa altezza per tutte: nessuna tab rialzata, Routine compresa. */
    height: 60px !important;
    min-height: 44px;
    align-self: center !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--sm-nav-inactive) !important;
    -webkit-tap-highlight-color: transparent;
}

/* Neutralizza qualsiasi rialzo/scala residuo sulla tab centrale. */
#view-tabs.bottom-nav[class] .bottom-nav-item--center,
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="routine"] {
    transform: none !important;
    margin-top: 0 !important;
    top: auto !important;
}

/* ---------------------------------------------------- icone via mask */

#view-tabs.bottom-nav[class] .bottom-nav-item .home-nav-icon {
    display: block !important;
    width: var(--sm-nav-icon) !important;
    height: var(--sm-nav-icon) !important;
    flex: 0 0 auto;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;

    /* Il colore dell'icona segue il colore della tab. */
    background-color: currentColor !important;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* L'<img> PNG originale resta nel markup ma non viene mostrata. */
#view-tabs.bottom-nav[class] .bottom-nav-item .home-nav-icon img { display: none !important; }

#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="home"]    .home-nav-icon { -webkit-mask-image: url("assets/ui/nav-icons-v2/home.svg?v=20260819b");    mask-image: url("assets/ui/nav-icons-v2/home.svg?v=20260819b"); }
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="impara"]  .home-nav-icon { -webkit-mask-image: url("assets/ui/nav-icons-v2/impara.svg?v=20260819b");  mask-image: url("assets/ui/nav-icons-v2/impara.svg?v=20260819b"); }
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="routine"] .home-nav-icon { -webkit-mask-image: url("assets/ui/nav-icons-v2/routine.svg?v=20260819b"); mask-image: url("assets/ui/nav-icons-v2/routine.svg?v=20260819b"); }
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="vita"]    .home-nav-icon { -webkit-mask-image: url("assets/ui/nav-icons-v2/vita.svg?v=20260819b");    mask-image: url("assets/ui/nav-icons-v2/vita.svg?v=20260819b"); }
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="amin"]    .home-nav-icon { -webkit-mask-image: url("assets/ui/nav-icons-v2/amin.svg?v=20260819b");    mask-image: url("assets/ui/nav-icons-v2/amin.svg?v=20260819b"); }

/* Compensazione ottica: alcune icone riempiono meno il proprio riquadro. */
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="home"]   .home-nav-icon { --sm-nav-icon-scale: 1.00; }
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="impara"] .home-nav-icon { --sm-nav-icon-scale: 1.00; }
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="vita"]   .home-nav-icon { --sm-nav-icon-scale: 1.00; }
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="amin"]   .home-nav-icon { --sm-nav-icon-scale: 1.00; }

/* ---------------------------------------------------- label */

#view-tabs.bottom-nav[class] .bottom-nav-item > span:last-child {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--sm-nav-label) !important;
}

/* Il pallino sotto la label non serve piu': l'attivo si legge dal colore. */
#view-tabs.bottom-nav[class] .bottom-nav-item::after { display: none !important; }

/* ---------------------------------------------------- stato attivo */

#view-tabs.bottom-nav[class] .bottom-nav-item.is-active,
#view-tabs.bottom-nav[class] .bottom-nav-item.active {
    color: var(--sm-nav-green) !important;
    /* Pillola mint delicata: non occupa tutta la colonna. */
    background: var(--sm-nav-mint) !important;
    border-radius: 20px !important;
    width: 68px !important;
    justify-self: center !important;
}

#view-tabs.bottom-nav[class] .bottom-nav-item.is-active > span:last-child,
#view-tabs.bottom-nav[class] .bottom-nav-item.active > span:last-child {
    color: var(--sm-nav-green) !important;
    font-weight: 600 !important;
}

#view-tabs.bottom-nav[class] .bottom-nav-item.is-active .home-nav-icon,
#view-tabs.bottom-nav[class] .bottom-nav-item.active .home-nav-icon {
    background-color: var(--sm-nav-green) !important;
    opacity: 1 !important;
    filter: none !important;
}

#view-tabs.bottom-nav[class] .bottom-nav-item:active { opacity: .72; }

/* ---------------------------------------------------- schermi piccoli */

@media (max-width: 360px) {
    :root { --sm-nav-inline: 8px; --sm-nav-h: 70px; --sm-nav-icon: 24px; }
    #view-tabs.bottom-nav[class] .bottom-nav-item { height: 56px !important; }
    #view-tabs.bottom-nav[class] .bottom-nav-item.is-active,
    #view-tabs.bottom-nav[class] .bottom-nav-item.active { width: 62px !important; }
    #view-tabs.bottom-nav[class] .bottom-nav-item > span:last-child { font-size: 11px !important; }
}

@media (max-height: 620px) {
    :root { --sm-nav-gap: 6px; }
}

/* ---------------------------------------------------- dark mode */

body.dark-theme #view-tabs.bottom-nav[class] {
    background: rgba(17, 27, 23, .96) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3) !important;
}
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item { color: #8E948F !important; }
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item > span:last-child { color: #8E948F !important; }
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item.is-active,
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item.active {
    background: rgba(15, 92, 70, .22) !important;
    color: #95CFB7 !important;
}
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item.is-active > span:last-child,
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item.active > span:last-child { color: #95CFB7 !important; }
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item.is-active .home-nav-icon,
body.dark-theme #view-tabs.bottom-nav[class] .bottom-nav-item.active .home-nav-icon { background-color: #95CFB7 !important; }

/* ---------------------------------------------------- neutralizza il rialzo
   bottom-nav-routine-center-final.css costruisce un rialzo centrale con un
   cerchio assoluto. Questo blocco lo annulla senza modificare quel file. */
#view-tabs.bottom-nav[class] .bottom-nav-item--center,
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="routine"] {
    transform: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: auto !important;
    position: relative !important;
}
#view-tabs.bottom-nav[class] .bottom-nav-item--center::before,
#view-tabs.bottom-nav[class] .bottom-nav-item--center::after,
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="routine"]::before {
    display: none !important;
    content: none !important;
}
#view-tabs.bottom-nav[class] .bottom-nav-item[data-nav-key="routine"] .home-nav-icon {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    width: var(--sm-nav-icon) !important;
    height: var(--sm-nav-icon) !important;
}

/* Altezza uniforme delle cinque tab, contro le regole a 40/36px della
   versione con rialzo centrale. */
#view-tabs.bottom-nav[class] .bottom-nav-item,
#view-tabs.bottom-nav[class] .bottom-nav-item--center {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
}
#view-tabs.bottom-nav[class] .bottom-nav-item.is-active .home-nav-icon,
#view-tabs.bottom-nav[class] .bottom-nav-item.active .home-nav-icon {
    background: var(--sm-nav-green) !important;
    background-color: var(--sm-nav-green) !important;
    border-radius: 0 !important;
    width: var(--sm-nav-icon) !important;
    height: var(--sm-nav-icon) !important;
}