/*
 * Tema do Painel Rádio 365 sobre o Filament 5.
 * O CSS do Filament fica em @layer; este arquivo é sem layer e por isso prevalece.
 * Base: o azul do logo (#010765). Barra superior azul, conteúdo em cinza-azulado
 * claro, item ativo do menu em pílula azul, login com "ondas de rádio".
 */
:root {
    --r365-azul: #010765;
    --r365-azul-2: #16229a;
    --r365-azul-3: #2b3bd1;
    --r365-ceu: #eef1fb;
    --r365-fundo: #f3f5fb;
    --r365-cartao: #ffffff;
    --r365-borda: rgba(1, 7, 101, .08);
    --r365-sombra: 0 1px 2px rgba(1, 7, 101, .05), 0 10px 30px -12px rgba(1, 7, 101, .14);
    --r365-texto: #0d1240;
    --r365-suave: #5b6189;
    --r365-ar: #ff3d5a;
    --r365-raio: 18px;
}
.dark {
    --r365-fundo: #080b22;
    --r365-cartao: #10143a;
    --r365-ceu: #151a48;
    --r365-borda: rgba(255, 255, 255, .07);
    --r365-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .6);
    --r365-texto: #e9ebff;
    --r365-suave: #a3a8d6;
}

/* ---------- Base ---------- */
.fi-body {
    background:
        radial-gradient(1200px 380px at 85% -120px, rgba(43, 59, 209, .10), transparent 70%),
        var(--r365-fundo);
    color: var(--r365-texto);
}

/* ---------- Marca ---------- */
.r365-marca { display: inline-flex; align-items: center; gap: .7rem; }
.r365-marca-icone {
    width: 38px; height: 38px; border-radius: 11px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 16px -6px rgba(0, 0, 0, .5);
}
.r365-marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.r365-marca-nome { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.r365-marca-sub {
    font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.fi-logo { height: auto !important; }

/* ---------- Barra superior ---------- */
.fi-topbar {
    background: linear-gradient(100deg, var(--r365-azul) 0%, var(--r365-azul-2) 60%, var(--r365-azul-3) 130%);
    --tw-ring-color: transparent;
    box-shadow: 0 8px 24px -14px rgba(1, 7, 101, .7);
    color: #fff;
}
.dark .fi-topbar { background: linear-gradient(100deg, #02053d 0%, #0d1680 100%); }
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-item-btn,
.fi-topbar .fi-icon { color: rgba(255, 255, 255, .85); }
.fi-topbar .fi-icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.fi-topbar .fi-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }

/* Cabeçalho do menu no celular (gaveta) */
.fi-sidebar-header { background: var(--r365-azul); }

/* ---------- Menu lateral ---------- */
.fi-sidebar-nav { padding-top: 1.25rem; }
.fi-sidebar-group-label {
    font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--r365-suave);
}
.fi-sidebar-item-btn {
    border-radius: 12px;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.fi-sidebar-item-btn:hover { background: rgba(1, 7, 101, .06); }
.dark .fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, .06); }
.fi-sidebar-item-label { font-weight: 600; color: var(--r365-texto); }
.fi-sidebar-item-icon { color: var(--r365-suave); }

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(120deg, var(--r365-azul) 0%, var(--r365-azul-2) 100%);
    box-shadow: 0 8px 18px -10px rgba(1, 7, 101, .9);
}
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(120deg, #2433b8 0%, #3a4be0 100%);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: #fff; }

/* ---------- Cabeçalho das páginas ---------- */
.fi-header-heading {
    font-weight: 800; letter-spacing: -.025em; color: var(--r365-texto);
}
.fi-header-subheading { color: var(--r365-suave); }
.fi-breadcrumbs { opacity: .8; }

/* ---------- Cartões, seções e tabelas ---------- */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-section {
    background: var(--r365-cartao);
    border-radius: var(--r365-raio);
    box-shadow: var(--r365-sombra);
    --tw-ring-color: var(--r365-borda);
}
.fi-section-header-heading { font-weight: 750; letter-spacing: -.01em; }
.fi-section-header-description { color: var(--r365-suave); }

.fi-ta-header-cell {
    font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--r365-suave);
    background: var(--r365-ceu);
}
.fi-ta-row { transition: background-color .12s ease; }
.fi-ta-row:hover { background: rgba(43, 59, 209, .035); }
.dark .fi-ta-row:hover { background: rgba(255, 255, 255, .03); }
.fi-ta-image img { border-radius: 8px; }

/* ---------- Indicadores (painel inicial) ---------- */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; padding: 1.4rem 1.5rem; }
.fi-wi-stats-overview-stat::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(43, 59, 209, .09) 0 2px, transparent 2px 14px);
    pointer-events: none;
}
.fi-wi-stats-overview-stat-label {
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--r365-suave);
}
.fi-wi-stats-overview-stat-value {
    font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--r365-azul);
    font-variant-numeric: tabular-nums;
}
.dark .fi-wi-stats-overview-stat-value { color: #c9cdff; }

/* Cartões da página de relatórios */
.r365-cartao-valor { color: var(--r365-azul); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.dark .r365-cartao-valor { color: #c9cdff; }

/* ---------- Botões e campos ---------- */
.fi-btn { border-radius: 11px; font-weight: 700; }
.fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: linear-gradient(120deg, var(--r365-azul) 0%, var(--r365-azul-2) 100%);
    box-shadow: 0 8px 18px -10px rgba(1, 7, 101, .9);
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { filter: brightness(1.12); }
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: linear-gradient(120deg, #2433b8 0%, #3a4be0 100%);
}
.fi-input-wrp { border-radius: 11px; }
.fi-fo-field-label-content { font-weight: 650; }

/* ---------- Status "No ar" com luz pulsante ---------- */
.fi-ta-cell .fi-badge.fi-color-success::before,
.r365-ao-vivo-ponto {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; display: inline-block;
    animation: r365-pulso 1.6s ease-out infinite;
}
@keyframes r365-pulso {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    100% { box-shadow: 0 0 0 7px transparent; }
}

/* ---------- Login ---------- */
.fi-simple-layout {
    background:
        radial-gradient(circle at 50% 120%, rgba(255, 61, 90, .22), transparent 45%),
        repeating-radial-gradient(circle at 50% 115%, rgba(255, 255, 255, .055) 0 1px, transparent 1px 46px),
        linear-gradient(160deg, #010765 0%, #0b1488 55%, #1d2bc0 100%);
    min-height: 100dvh;
}
.fi-simple-main {
    border-radius: 24px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
    --tw-ring-color: transparent;
}
.fi-simple-header-heading { font-weight: 800; letter-spacing: -.02em; }
.fi-simple-header .r365-marca-nome { color: var(--r365-azul); }
.fi-simple-header .r365-marca-sub { color: var(--r365-suave); }
.dark .fi-simple-header .r365-marca-nome { color: #fff; }
.fi-simple-header .r365-marca-icone { width: 52px; height: 52px; border-radius: 14px; }
.r365-login-rodape {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1.5rem 1rem 2rem; color: rgba(255, 255, 255, .72); font-size: .85rem; text-align: center;
}
.r365-ao-vivo {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .8rem; border-radius: 999px;
    background: rgba(255, 61, 90, .16); color: #ffd3da;
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.r365-ao-vivo .r365-ao-vivo-ponto { color: var(--r365-ar); }

@media (prefers-reduced-motion: reduce) {
    .fi-ta-cell .fi-badge.fi-color-success::before, .r365-ao-vivo-ponto { animation: none; }
    .fi-sidebar-item-btn, .fi-ta-row { transition: none; }
}

/* ---------- Ajustes ---------- */
.fi-btn.fi-color-primary:not(.fi-btn-outlined),
.fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-label,
.fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-icon { color: #fff; }

/* Busca global translúcida sobre a barra azul */
.fi-topbar .fi-input-wrp {
    background: rgba(255, 255, 255, .12);
    --tw-ring-color: rgba(255, 255, 255, .18);
    box-shadow: none;
}
.fi-topbar .fi-input-wrp:focus-within { background: rgba(255, 255, 255, .2); --tw-ring-color: rgba(255, 255, 255, .45); }
.fi-topbar .fi-input { color: #fff; }
.fi-topbar .fi-input::placeholder { color: rgba(255, 255, 255, .7); }
.fi-topbar .fi-input-wrp .fi-icon { color: rgba(255, 255, 255, .75); }

/* Cartões de indicadores da página de relatórios */
.r365-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .r365-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .r365-cartoes { grid-template-columns: 1fr; } }
.r365-cartao {
    position: relative; overflow: hidden;
    background: var(--r365-cartao); border-radius: var(--r365-raio);
    box-shadow: var(--r365-sombra), 0 0 0 1px var(--r365-borda);
    padding: 1.3rem 1.5rem; display: grid; gap: .25rem; align-content: start;
}
.r365-cartao::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(43, 59, 209, .08) 0 2px, transparent 2px 14px);
    pointer-events: none;
}
.r365-cartao-rotulo {
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--r365-suave);
}
.r365-cartao-valor { font-size: 2rem; font-weight: 800; line-height: 1.15; }
.r365-cartao-dica { font-size: .78rem; color: var(--r365-suave); }
.fi-ta-table thead tr { background: var(--r365-ceu); }
.fi-ta-row.r365-eu { background: rgba(43, 59, 209, .045); }

/* ---------- Player de teste dos canais ---------- */
.r365-player { display: grid; gap: 1.1rem; }
.r365-player-topo {
    display: flex; align-items: center; gap: 1rem; padding: 1rem;
    border-radius: 16px; color: #fff;
    background:
        repeating-radial-gradient(circle at 100% 50%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 18px),
        linear-gradient(120deg, var(--cor-canal) 0%, color-mix(in srgb, var(--cor-canal) 55%, #000) 100%);
}
.r365-player-logo { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); flex: none; }
.r365-player-info { min-width: 0; flex: 1; display: grid; gap: .2rem; }
.r365-player-nome { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.r365-player-musica { font-size: .9rem; overflow-wrap: anywhere; }
.r365-player-topo .r365-player-rotulo { color: rgba(255, 255, 255, .75); }
.r365-player-topo .r365-player-aviso { color: #ffe1e6; font-size: .82rem; }
.r365-player-rotulo { font-size: .78rem; color: var(--r365-suave); }
.r365-player-topo .r365-player-rotulo { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; display: block; }

.r365-player-equalizador { display: flex; align-items: flex-end; gap: 3px; height: 22px; flex: none; }
.r365-player-equalizador i { width: 4px; background: #fff; border-radius: 2px; animation: r365-eq 1s ease-in-out infinite; }
.r365-player-equalizador i:nth-child(2) { animation-delay: -.3s; }
.r365-player-equalizador i:nth-child(3) { animation-delay: -.6s; }
.r365-player-equalizador i:nth-child(4) { animation-delay: -.15s; }
@keyframes r365-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

.r365-player-controles { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.r365-player-botao {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: none;
    color: #fff; background: linear-gradient(120deg, var(--r365-azul) 0%, var(--r365-azul-2) 100%);
    box-shadow: 0 10px 22px -10px rgba(1, 7, 101, .9); transition: transform .12s ease;
}
.r365-player-botao:hover { transform: scale(1.05); }
.r365-player-botao:focus-visible { outline: 3px solid var(--r365-azul-3); outline-offset: 3px; }
.dark .r365-player-botao { background: linear-gradient(120deg, #2433b8 0%, #3a4be0 100%); }
.r365-player-girando { animation: r365-gira .9s linear infinite; }
@keyframes r365-gira { to { transform: rotate(360deg); } }
.r365-player-estado { flex: 1; min-width: 140px; font-weight: 700; display: grid; gap: .15rem; }
.r365-player-aovivo { color: var(--r365-ar); display: inline-flex; align-items: center; gap: .45rem; }
.r365-player-aovivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: r365-pulso 1.6s ease-out infinite; }
.r365-player-erro { color: #dc2626; }
.r365-player-volume { display: flex; align-items: center; gap: .5rem; color: var(--r365-suave); }
.r365-player-volume input { width: 120px; accent-color: var(--r365-azul-3); }

.r365-player-versoes { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--r365-ceu); justify-self: start; flex-wrap: wrap; }
.r365-player-versoes button { padding: .4rem .9rem; border-radius: 9px; font-size: .85rem; font-weight: 700; color: var(--r365-suave); }
.r365-player-versoes button.ativo { background: var(--r365-cartao); color: var(--r365-texto); box-shadow: var(--r365-sombra); }

.r365-player-diag { display: grid; gap: .5rem; padding: 1rem; border-radius: 14px; background: var(--r365-ceu); }
.r365-player-diag-titulo { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--r365-suave); }
.r365-player-diag-linha { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .1rem .75rem; font-size: .85rem; }
.r365-player-diag-nome { font-weight: 700; grid-row: span 2; }
.r365-player-diag-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; font-size: .75rem; color: var(--r365-suave); overflow-wrap: anywhere; }
.r365-ok { color: #15803d; font-weight: 700; }
.r365-falha { color: #dc2626; font-weight: 700; }
.dark .r365-ok { color: #4ade80; }
.dark .r365-falha { color: #f87171; }
.r365-player-retestar { justify-self: start; font-size: .8rem; font-weight: 700; color: var(--r365-azul-3); }
.dark .r365-player-retestar { color: #9aa3ff; }
@media (max-width: 520px) {
    .r365-player-diag-linha { grid-template-columns: 1fr; }
    .r365-player-diag-nome { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .r365-player-equalizador i, .r365-player-girando, .r365-player-aovivo::before { animation: none; }
}