/* HalloShell — sidebar 72dp fixa (idêntica ao Android HomeActivityV2).
 * Ratio Android: 72dp em Full HD = 72px. Aqui usamos 88px (respiro melhor
 * pro cursor visual da TV — Tizen tem menos precisão que touch Android). */

.hs-root {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    background: #000;
    overflow: hidden;
}

.hs-sidebar {
    /* Largura fixa: 72dp Android → 88px v3 (respiro maior pros ícones 32px) */
    width: 88px;
    height: 100vh;
    flex-shrink: 0;
    /* Fundo SÓLIDO — bloqueia backdrop fixed do hero atrás. Gradient horizontal
     * anterior deixava passar imagem. Android faz mesma coisa: sidebar preta
     * total, backdrop cobre resto da tela. */
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 4px;
    z-index: 100;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
}

.hs-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    padding: 8px 4px;
    margin-bottom: 4px;
    background: transparent;
    border: none;
    outline: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease-out, background 0.15s ease-out;
}

.hs-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    /* Cor herdada pelo `fill="currentColor"` dos SVGs.
     * Normal: cinza claro. Focused/active: branco puro (herdado do .hs-nav-item). */
    color: rgba(255, 255, 255, 0.72);
}

.hs-nav-label {
    color: rgba(255, 255, 255, 0.60);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.3px;
    line-height: 1.1;
    white-space: nowrap;
}

/* Estado ativo (página atual) — background ciano translúcido, radius 12dp */
.hs-nav-item.hs-nav-active {
    background: rgba(0, 183, 235, 0.16);
}
.hs-nav-item.hs-nav-active .hs-nav-label {
    color: rgba(255, 255, 255, 0.95);
}

/* Estado focado (D-pad) — SÓ .tv-focused (aplicado pelo TvNavigation).
 * `:focus` nativo removido: Chrome 63 do Tizen mantinha `:focus` sticky
 * em todos os buttons da sidebar simultaneamente (caixa branca em cada
 * ícone). Deixando só a classe custom, garantimos que só o item com foco
 * ATUAL do D-pad tem o highlight. */
.hs-nav-item {
    outline: none;   /* Nunca mostrar outline default do browser */
}
.hs-nav-item::-moz-focus-inner { border: 0; }  /* Firefox */
.hs-nav-item.tv-focused {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.10);
}
.hs-nav-item.tv-focused .hs-nav-label {
    color: #FFFFFF;
}
.hs-nav-item.tv-focused .hs-nav-icon {
    color: #FFFFFF;
}
.hs-nav-item.hs-nav-active .hs-nav-icon {
    color: #FFFFFF;
}
/* Focado E ativo — mantém azul mas ligeiramente mais forte */
.hs-nav-item.hs-nav-active.tv-focused {
    background: rgba(0, 183, 235, 0.35);
}

/* ─── Main content — ocupa resto ────────────────────────────────────── */
.hs-main {
    flex: 1;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #000;
}