/* ═══════════════════════════════════════════════
   ZETTA — RESPONSIVIDADE GLOBAL
   ═══════════════════════════════════════════════ */

/* ── Sidebar: drawer deslizante ─────────────── */
@media (max-width: 767.98px) {
    .sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 270px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: left 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        overflow-y: auto !important;
        padding-top: 56px !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important;
    }
    .sidebar.sidebar-open { left: 0 !important; }

    #sidebarBackdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 1040;
    }
    #sidebarBackdrop.show { display: block; }

    /* Main ocupa tudo */
    main.col-md-9,
    main.col-lg-10 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0.6rem !important;
    }

    /* Navbar: brand menor */
    .navbar-brand-sgm .brand-name { font-size: 14px !important; }
    .navbar-brand-sgm .brand-slogan { display: none !important; }

    /* Cards em coluna única */
    .row.g-3 > [class*="col-"],
    .row.g-4 > [class*="col-"],
    .row.mb-4 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Stats grid: 2 colunas */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card h2, .stat-card .valor { font-size: 1.5rem !important; }

    /* ── GRÁFICOS ────────────────────────────── */
    /* Container padrão de card */
    .card-body { padding: 0.75rem !important; }

    /* Wrapper para charts: altura fixa para Chart.js respeitar */
    .chart-wrap {
        position: relative;
        height: 240px !important;
        width: 100%;
    }

    /* Todos os canvas de gráficos — altura explícita */
    #chartComparativoMedicao,
    #chartGeracaoSemanal,
    #chartOnsRestricoesDia,
    #chartOnsMotivos,
    #chartCampos,
    #chartTecnicos,
    #chartDias,
    #chartSolicitacoesMes,
    #chartPontoDetalhado {
        height: 240px !important;
        max-height: 240px !important;
        width: 100% !important;
    }

    /* Canvas de fundo (partículas) — nunca limitar */
    #canvas-bg {
        height: 100vh !important;
        max-height: none !important;
    }

    /* Tabs: scroll horizontal */
    .nav-tabs, .nav-fill, .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-fill::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item,
    .nav-fill .nav-item { flex: 0 0 auto !important; }
    .nav-tabs .nav-link,
    .nav-fill .nav-link {
        white-space: nowrap;
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    /* Tabelas */
    .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    table { font-size: 11px !important; }
    th, td { padding: 0.4rem 0.5rem !important; }

    /* Botões */
    .btn-toolbar, .d-flex.gap-2 { flex-wrap: wrap !important; gap: 6px !important; }
    .btn { font-size: 12px !important; padding: 5px 10px !important; min-height: 34px !important; }

    /* Formulários / Filtros */
    .filtro-mes {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .filtro-mes select,
    .filtro-mes input { width: 100% !important; }

    /* Headers de seção */
    .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    h1.h2 { font-size: 1.2rem !important; }
    h4 { font-size: 1rem !important; }

    /* Login card */
    .login-card { padding: 1.5rem 1rem !important; }

    /* Landing page */
    .hero-logo img  { height: 55px !important; }
    .hero-title     { font-size: 2rem !important; }
    .hero-actions   { flex-direction: column !important; align-items: center !important; }
    .nav-logo img   { height: 30px !important; }

    /* Modais */
    .modal-dialog { margin: 0.5rem !important; }
    .modal-body   { padding: 1rem !important; }
}

/* ── Extra small (<480px) ─────────────────────── */
@media (max-width: 479.98px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .stat-card .valor { font-size: 1.3rem !important; }

    #chartComparativoMedicao,
    #chartGeracaoSemanal,
    #chartOnsRestricoesDia,
    #chartOnsMotivos,
    #chartCampos,
    #chartTecnicos,
    #chartDias,
    #chartSolicitacoesMes,
    #chartPontoDetalhado {
        height: 200px !important;
        max-height: 200px !important;
    }

    .nav-tabs .nav-link,
    .nav-fill .nav-link {
        font-size: 10px !important;
        padding: 7px 8px !important;
    }

    .btn { font-size: 11px !important; }
}