/* ============================================================== */
/* MOBILE GLOBAL OVERRIDES                                        */
/* ============================================================== */
/* Arquivo único e centralizado para responsividade mobile.       */
/* Carregado por ÚLTIMO no head.html para sobrescrever os demais. */
/* Breakpoints padrão do projeto (alinhados com Bootstrap 5):     */
/*   - <= 991.98px  → tablets / desktop pequeno                   */
/*   - <=  767.98px → mobile (paisagem) / tablets pequenos        */
/*   - <=  575.98px → mobile (retrato) — ajuste fino              */
/* Inclui também:                                                 */
/*   - Sidebar off-canvas (hamburger) para .area-sidebar          */
/*   - Tabelas com scroll horizontal automático                   */
/*   - Classes utilitárias: .mobile-only, .mobile-hide, ...       */
/* ============================================================== */


/* ===============================================================
 * 🛠️  UTILITÁRIOS (sempre disponíveis)
 * =============================================================== */

.mobile-only        { display: none !important; }
.mobile-hide        { /* visível por padrão; escondida em mobile */ }


/* ===============================================================
 * 🧩  SIDEBAR-TOGGLE-BUTTON (botão flutuante hamburger)
 * Aparece apenas em mobile via display none por padrão.
 * Inserido dinamicamente em mobile.js quando .area-sidebar existe.
 * =============================================================== */

.sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: 96px;
    left: 12px;
    z-index: 1400;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-button-hover, #0d6efd);
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle-btn:hover {
    filter: brightness(1.05);
}

.sidebar-toggle-btn:active {
    transform: scale(0.95);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 86px 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1499;
}


/* ===============================================================
 * 📐  BREAKPOINT: <= 991.98px (tablets / desktop pequeno)
 * =============================================================== */

@media (max-width: 991.98px) {
    main {
        padding: 16px;
    }

    /* Reduz padding lateral em containers Bootstrap */
    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Tabelas extensas: força scroll horizontal */
    .table-responsive-auto > table {
        min-width: 600px;
    }
}


/* ===============================================================
 * 📱  BREAKPOINT: <= 767.98px (MOBILE)
 * =============================================================== */

@media (max-width: 767.98px) {

    /* ---------- BODY / SCROLL ---------- */
    /* Sobrescreve layout.css que trava scroll vertical do body */
    body {
        overflow: auto !important;
        max-height: none !important;
        min-height: 100vh;
        padding-top: 70px;
    }

    /* ---------- HEADER ---------- */
    .header {
        height: 70px;
    }

    .header .container {
        padding: 0 10px;
    }

    .logo img {
        width: 40px !important;
        height: 40px !important;
    }

    /* Esconde elementos não-essenciais para liberar espaço */
    .user_name,
    .font-scaler-widget {
        display: none !important;
    }

    .header-right > * {
        margin-left: 8px;
    }

    /* ---------- MAIN ---------- */
    main {
        max-height: none !important;
        min-height: calc(100vh - 70px);
        padding: 12px;
    }

    /* ---------- UTILITÁRIOS ---------- */
    .mobile-only         { display: initial !important; }
    .mobile-hide         { display: none !important; }
    .mobile-block        { display: block !important; }
    .mobile-w-100        { width: 100% !important; }
    .mobile-text-center  { text-align: center !important; }
    .mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* ---------- TABELAS ---------- */
    /* Scroll horizontal automático para QUALQUER tabela.
       Para opt-out, usar classe .table-non-responsive */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    table:not(.table-non-responsive) {
        font-size: 0.85rem;
    }

    table:not(.table-non-responsive) th,
    table:not(.table-non-responsive) td {
        padding: 6px 8px !important;
    }

    /* Wrapper utilitário para envolver tabelas grandes */
    .mobile-table-scroll {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- FORMULÁRIOS ---------- */
    .form-control,
    .form-select,
    input[type="text"]:not(.no-mobile-w),
    input[type="email"]:not(.no-mobile-w),
    input[type="password"]:not(.no-mobile-w),
    input[type="number"]:not(.no-mobile-w),
    input[type="date"]:not(.no-mobile-w),
    input[type="search"]:not(.no-mobile-w),
    select:not(.no-mobile-w),
    textarea:not(.no-mobile-w) {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Botões em grupo: empilhar verticalmente */
    .btn-group-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .btn-group-mobile-stack > .btn,
    .btn-group-mobile-stack > button {
        width: 100%;
        margin: 0 !important;
    }

    /* ---------- FILTROS / TOOLBARS ---------- */
    .filtros-container,
    .filters-row,
    .toolbar-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .filtros-container > *,
    .filters-row > *,
    .toolbar-row > * {
        width: 100% !important;
    }

    /* ---------- HEADINGS ---------- */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.15rem !important; }
    h4 { font-size: 1rem !important; }

    /* ---------- MODAIS ---------- */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer > .btn {
        width: 100%;
        margin: 0 !important;
    }

    /* ---------- CARDS / SEÇÕES ---------- */
    .card,
    .card-body {
        padding: 12px !important;
    }

    /* ---------- SIDEBAR LATERAL → OFF-CANVAS ---------- */
    /* Sobrescreve sidebar.css (que faz stack vertical em mobile) */
    .conteiner-side-bar-main {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        width: 100% !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }

    .area-sidebar {
        position: fixed !important;
        top: 70px;
        left: 0;
        width: 82%;
        max-width: 300px;
        height: calc(100vh - 70px) !important;
        z-index: 1500;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
        border-right: 1px solid var(--color-border-sidebar);
    }

    body.sidebar-open .area-sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    body.sidebar-open {
        overflow: hidden !important;
    }

    .area-main {
        grid-area: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 12px !important;
        overflow-y: visible !important;
    }

    /* Botão hamburger lateral (só aparece se houver sidebar) */
    body[data-has-sidebar="true"] .sidebar-toggle-btn {
        display: inline-flex;
    }

    .sidebar-backdrop {
        inset: 70px 0 0 0;
    }

    /* ---------- LOGOUT FLOAT BUTTON ---------- */
    .btn-outline-danger.hide-menu-f {
        padding: 0.35rem 0.6rem;
    }
}


/* ===============================================================
 * 📱  BREAKPOINT: <= 575.98px (MOBILE PEQUENO — retrato)
 * =============================================================== */

@media (max-width: 575.98px) {
    body {
        padding-top: 60px;
    }

    .header {
        height: 60px;
    }

    .logo img {
        width: 36px !important;
        height: 36px !important;
    }

    main {
        min-height: calc(100vh - 60px);
        padding: 8px;
    }

    .area-sidebar {
        top: 60px;
        height: calc(100vh - 60px) !important;
        width: 88%;
    }

    .sidebar-toggle-btn {
        top: 70px;
        left: 8px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .sidebar-backdrop {
        inset: 60px 0 0 0;
    }

    .card,
    .card-body {
        padding: 8px !important;
    }

    /* Botões compactos */
    .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Headings menores */
    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1.05rem !important; }

    /* Tabelas ainda menores */
    table:not(.table-non-responsive) {
        font-size: 0.8rem;
    }

    table:not(.table-non-responsive) th,
    table:not(.table-non-responsive) td {
        padding: 5px 6px !important;
    }
}


/* ===============================================================
 * 🖨️  PRINT — Restaura desktop, esconde controles mobile
 * =============================================================== */

@media print {
    .mobile-only,
    .sidebar-toggle-btn,
    .sidebar-backdrop {
        display: none !important;
    }
}