/**
 * css/admin-screen-fit.css
 * Auto-Adequação de Tela & Responsividade Fluida para Monitores Desktop
 * (Full HD 1920x1080, 2K, 4K, Ultrawide e Laptops) — HS Solutions
 */

/* Garante base 100% fluida em todos os navegadores */
html,
body.dashboard-body,
body {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Evita que qualquer flex wrapper limite a largura útil */
.admin-layout {
    display: flex !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   DESKTOP (Telas > 992px) — Adaptação e Preenchimento Fluido
   ========================================================================== */
@media (min-width: 993px) {

    /* Área Principal de Conteúdo (.main-content) */
    .dashboard-body .main-content,
    .main-content {
        margin-left: var(--hs-sidebar-w, 280px) !important;
        width: calc(100% - var(--hs-sidebar-w, 280px)) !important;
        max-width: calc(100% - var(--hs-sidebar-w, 280px)) !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        background: #f8fafc !important;
        transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Topbar sempre estica de ponta a ponta sem sobras ou cortes */
    .dashboard-body .main-content .topbar,
    .main-content .topbar,
    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 32px !important;
        margin: 0 !important;
    }

    /* Containers de página: preenchem toda a largura com respiro elegante */
    .dashboard-container,
    .hs-page,
    .hs-page.gads-page,
    .gads-page,
    .meta-app-wrap,
    .dashboard-container.meta-app-wrap {
        width: 100% !important;
        max-width: var(--hs-optimal-content-max-w, 100%) !important;
        box-sizing: border-box !important;
        padding: 24px 32px !important;
        margin: 0 auto !important;
    }

    /* Cards e Blocos de Conteúdo */
    .content-card,
    .hs-card,
    .ga-dashboard-summary,
    .hs-gads-dash-card,
    .hs-meta-dash-card,
    .gads-header,
    .meta-header {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Gráficos em canvas (Chart.js) aproveitam 100% da largura do card */
    canvas {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tabelas e grids não estouram nem ficam minúsculos */
    .table-responsive,
    .clients-table,
    .modules-grid {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   Telas Full HD (1600px a 2099px) — Ex: Monitores 1920x1080 com zoom 100%
   ========================================================================== */
@media (min-width: 1600px) {
    .dashboard-container,
    .hs-page,
    .hs-page.gads-page,
    .meta-app-wrap {
        padding: 26px 40px !important;
    }

    .hs-gads-summary-grid,
    .meta-summary-grid {
        gap: 14px !important;
    }

    .ga-metric-card,
    .hs-gads-metric-card,
    .hs-meta-metric-card {
        padding: 14px 16px !important;
    }
}

/* ==========================================================================
   Telas 2K, 4K e Ultrawide (>= 2100px)
   ========================================================================== */
@media (min-width: 2100px) {
    .dashboard-container,
    .hs-page,
    .hs-page.gads-page,
    .meta-app-wrap {
        max-width: 1980px !important;
        margin: 0 auto !important;
        padding: 32px 48px !important;
    }

    .dashboard-title {
        font-size: 1.55rem !important;
    }
}