/* =========================================================
   LOTERIAS DB — CAMADA GLOBAL DE RESPONSIVIDADE
   Carregue este arquivo por último no base.html.
========================================================= */

/* =========================================================
   1. PROTEÇÕES GLOBAIS CONTRA ESTOURO
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.ldb-app-layout,
.ldb-app-main,
.ldb-app-content,
.ldb-app-content > *,
.ldb-app-content form,
.ldb-app-content section,
.ldb-app-content article,
.ldb-app-content div {
    min-width: 0;
}

.ldb-app-main,
.ldb-app-content,
.ldb-app-content > * {
    max-width: 100%;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    min-width: 0;
    max-width: 100%;
}

input[type="date"] {
    width: 100%;
    min-width: 0;
}

/* Textos longos não devem ampliar cards e colunas. */
.ldb-app-content h1,
.ldb-app-content h2,
.ldb-app-content h3,
.ldb-app-content h4,
.ldb-app-content p,
.ldb-app-content strong,
.ldb-app-content span,
.ldb-app-content small,
.ldb-app-content a,
.ldb-app-content button {
    overflow-wrap: anywhere;
}

/* Tabelas continuam utilizáveis em telas estreitas. */
.ldb-app-content table {
    max-width: 100%;
}

.ldb-app-content .table-wrap,
.ldb-app-content .tabela-wrap,
.ldb-app-content .tabela-conferencia-wrap,
.ldb-app-content .tabela-centena-scroll,
.ldb-app-content .resultado-atrasados-tabela-wrap,
.ldb-app-content .ciclo-box {
    max-width: 100%;
}

.ldb-app-content .tabela-conferencia-wrap,
.ldb-app-content .tabela-centena-scroll,
.ldb-app-content .resultado-atrasados-tabela-wrap,
.ldb-app-content .ciclo-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   2. LAYOUT PRINCIPAL E CABEÇALHO
========================================================= */

.ldb-app-main {
    min-width: 0;
}

.ldb-app-header,
.ldb-app-content {
    width: 100%;
}

@media (max-width: 1500px) {
    .ldb-app-main {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .ldb-app-header {
        margin-bottom: 24px;
    }
}

@media (max-width: 1180px) {
    .ldb-app-main {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .ldb-app-header {
        gap: 16px;
    }
}

@media (max-width: 960px) {
    .ldb-app-layout {
        display: block !important;
    }

    .ldb-app-main {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 76px 16px 24px !important;
    }

    .ldb-app-sidebar {
        width: min(320px, 88vw) !important;
        max-width: 88vw !important;
    }

    .ldb-app-header {
        align-items: stretch !important;
    }

    .ldb-app-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .ldb-app-header-plan {
        flex: 1 1 180px;
    }
}

@media (max-width: 560px) {
    .ldb-app-main {
        padding: 70px 10px 20px !important;
    }

    .ldb-app-header {
        padding: 15px !important;
        border-radius: 14px !important;
    }

    .ldb-app-header-actions {
        align-items: stretch;
    }

    .ldb-app-header-plan,
    .ldb-renew-subscription-button {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* =========================================================
   3. FILTROS MODERNOS — POLÍTICA GLOBAL
========================================================= */

.ia-future-filter,
.ciclos-premium-filter,
.conferencia-filtros-grid,
.filter-bar,
.filter-bar-ciclos,
.filter-bar-milhares,
.transicao-premium-filter,
.periodo-comparativo-filter,
.filtro-moderno-setimo {
    width: 100%;
    max-width: 100%;
}

.ia-future-filter > *,
.ciclos-premium-filter > *,
.conferencia-filtros-grid > *,
.filter-bar > *,
.filter-bar-ciclos > *,
.filter-bar-milhares > *,
.transicao-premium-filter > *,
.periodo-comparativo-filter > *,
.filtro-moderno-setimo > * {
    min-width: 0;
    max-width: 100%;
}

.ia-custom-multi,
.ia-custom-multi-btn,
.campo-data-calendario,
.conferencia-data-wrapper,
.conferencia-campo select,
.conferencia-campo input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1500px) {
    .ia-future-filter,
    .ciclos-premium-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .conferencia-filtros-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .filter-bar,
    .filter-bar-ciclos,
    .filter-bar-milhares,
    .transicao-premium-filter,
    .periodo-comparativo-filter,
    .filtro-moderno-setimo {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1180px) {
    .ia-future-filter,
    .ciclos-premium-filter,
    .conferencia-filtros-grid,
    .filter-bar,
    .filter-bar-ciclos,
    .filter-bar-milhares,
    .transicao-premium-filter,
    .periodo-comparativo-filter,
    .filtro-moderno-setimo {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .ia-future-filter,
    .ciclos-premium-filter,
    .conferencia-filtros-grid,
    .filter-bar,
    .filter-bar-ciclos,
    .filter-bar-milhares,
    .transicao-premium-filter,
    .periodo-comparativo-filter,
    .filtro-moderno-setimo {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
    }

    .ia-future-filter > *,
    .ciclos-premium-filter > *,
    .conferencia-filtros-grid > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   4. CONFERÊNCIA DE JOGOS
========================================================= */

.conferencia-page,
.conferencia-hero-premium,
.conferencia-form-premium,
.conferencia-resultado-premium {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 1400px) {
    .conferencia-hero-premium {
        grid-template-columns: minmax(0, 1fr) 320px !important;
        gap: 22px !important;
    }

    .conferencia-hero-painel {
        width: 320px !important;
        min-width: 320px !important;
    }
}

@media (max-width: 1180px) {
    .conferencia-hero-premium {
        grid-template-columns: 1fr !important;
    }

    .conferencia-hero-painel {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .conferencia-hero-premium,
    .conferencia-form-premium,
    .conferencia-resultado-premium {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    .conferencia-hero-painel {
        grid-template-columns: 1fr !important;
    }

    .conferencia-form-topo,
    .conferencia-jogos-cabecalho,
    .conferencia-form-rodape,
    .conferencia-resultado-topo {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .conferencia-form-status,
    .conferencia-contador,
    .conferencia-resultado-topo > strong {
        width: 100%;
        justify-content: center;
        white-space: normal !important;
        text-align: center;
    }

    .conferencia-acoes {
        width: 100%;
        flex-direction: column;
    }

    .btn-limpar-conferencia,
    .btn-conferir {
        width: 100%;
    }
}

/* =========================================================
   5. CICLOS
========================================================= */

#formCiclos,
.ciclos-hero-premium,
.ciclos-filtros-wrapper,
.ciclos-tipos-premium,
.ciclo-kpis,
.ciclo-grid-duplo,
.ciclo-linhas-master,
.ciclo-colunas-master {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 1400px) {
    .ciclos-hero-premium {
        grid-template-columns: minmax(0, 1fr) 320px !important;
        gap: 22px !important;
    }

    .ciclos-hero-status {
        width: 320px !important;
        min-width: 320px !important;
    }

    .ciclo-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1180px) {
    .ciclos-hero-premium {
        grid-template-columns: 1fr !important;
    }

    .ciclos-hero-status {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ciclo-grid-duplo,
    .ciclo-linhas-master,
    .ciclo-colunas-master {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .ciclos-hero-premium,
    .ciclos-filtros-wrapper,
    .ciclos-tipos-premium {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    .ciclos-hero-status,
    .ciclo-kpis {
        grid-template-columns: 1fr !important;
    }

    .ciclos-secao-cabecalho,
    .titulo-com-acoes,
    .ciclo-titulo-centenas,
    .kpi-centenas-topo {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .ciclos-secao-contador,
    .badge-ciclo,
    .acoes-centenas,
    .btn-centena-acao {
        max-width: 100%;
    }

    .acoes-centenas {
        width: 100%;
        justify-content: flex-start !important;
    }
}

/* =========================================================
   6. RESULTADO POR LOTERIA
========================================================= */

.ldb-resultado-secoes,
.ldb-resultado-filtro-card,
.resultado-horarios-grid,
.resultado-horario-card,
.resultado-bichos-dia-card,
.ldb-resultado-analises-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Quando houver apenas um sorteio, mantém o card com largura confortável
   e alinhado à esquerda, sem ocupar toda a tela. */
body.ldb-app-body
.ldb-resultado-secoes
.resultado-horarios-grid:has(
    > .resultado-horario-card:only-child
) {
    display: grid !important;
    grid-template-columns: minmax(0, 980px) !important;
    justify-content: start !important;
}

body.ldb-app-body
.ldb-resultado-secoes
.resultado-horarios-grid
> .resultado-horario-card:only-child {
    width: 100% !important;
    max-width: 980px !important;
    justify-self: start !important;
}

@media (max-width: 1300px) {
    .resultado-horarios-grid,
    .ldb-resultado-secoes .resultado-horarios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .resultado-premios-tabela .linha {
        grid-template-columns: 58px minmax(80px, .8fr) minmax(120px, 1.35fr) 48px !important;
    }
}

@media (max-width: 900px) {
    .resultado-horarios-grid,
    .ldb-resultado-secoes .resultado-horarios-grid {
        grid-template-columns: 1fr !important;
    }

    body.ldb-app-body
    .ldb-resultado-secoes
    .resultado-horarios-grid:has(
        > .resultado-horario-card:only-child
    ) {
        grid-template-columns: 1fr !important;
    }

    body.ldb-app-body
    .ldb-resultado-secoes
    .resultado-horarios-grid
    > .resultado-horario-card:only-child {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 600px) {
    .ldb-resultado-filtro-card {
        padding: 12px !important;
    }

    .ldb-resultado-filtro-direita {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        align-items: center !important;
    }

    .ldb-resultado-data-form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .resultado-premios-tabela {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .resultado-premios-tabela .linha {
        grid-template-columns: 44px minmax(64px, .8fr) minmax(90px, 1.25fr) 38px !important;
        gap: 5px !important;
    }

    .premio-milhar {
        font-size: 15px !important;
    }

    .resultado-card-acoes button {
        flex: 1 1 calc(50% - 7px) !important;
    }
}

/* =========================================================
   7. CARDS, GRADES E MODAIS GENÉRICOS
========================================================= */

@media (max-width: 1180px) {
    .grid,
    .admin-kpis,
    .dashboard-premium-grid,
    .features-grid,
    .plans-preview-grid,
    .periodo-comparativo-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .grid,
    .admin-kpis,
    .dashboard-premium-grid,
    .features-grid,
    .plans-preview-grid,
    .periodo-comparativo-kpis,
    .periodo-comparativo-master,
    .periodo-detalhe-grid,
    .resumo-setimo,
    .ciclo-completo-resumo,
    .gerar-ciclos-resumo {
        grid-template-columns: 1fr !important;
    }

    .modal-milhares-card,
    .modal-centena-card,
    .modal-alertas-ciclo-card,
    .popup-novidade-card,
    .modal-leiame-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        padding: 20px !important;
        overflow-y: auto !important;
    }
}

/* =========================================================
   8. ACESSIBILIDADE E MOVIMENTO REDUZIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}