/* ============================================================
   RESPONSIVE FIXES - SistemaCobranca
   Ajustes globais de responsividade para mobile/tablet.
   ============================================================ */

/* ---- Base: evita scroll horizontal geral ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ---- Remove o max-width: 280px do Site.css para inputs/selects/textareas ---- */
input,
select,
textarea {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ---- Textareas: ignora cols e usa 100% da largura ---- */
textarea {
    width: 100% !important;
    max-width: 100% !important;
    resize: vertical;
}

/* ---- Main container: elimina overflow horizontal ---- */
#main {
    overflow-x: hidden !important;
}

/* ---- Logo responsiva ---- */
#logo img {
    max-width: 180px;
    width: 100%;
    height: auto;
}

/* ---- Modais: melhor aproveitamento em mobile ---- */
.modal-dialog {
    max-width: 100%;
    margin: 10px auto;
}

.modal-body {
    overflow-x: hidden;
    word-wrap: break-word;
}

.modal-body textarea {
    width: 100% !important;
    max-width: 100% !important;
}

/* Modal footer: botoes empilhados em mobile */
@media (max-width: 576px) {
    .modal-footer .btn {
        display: block;
        width: 100%;
        margin: 5px 0 !important;
    }
}

/* ---- Tabelas: scroll horizontal apenas nelas ---- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Widget-body: nao deve gerar scroll horizontal proprio.
   Formularios de filtro ficavam com barra de rolagem porque o overflow-x
   estava aplicado no container generico. */
.widget-body {
    overflow-x: visible;
}

/* Tabelas dentro de widgets: scroll interno em mobile */
@media (max-width: 768px) {
    .widget-body > table,
    .widget-body .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---- Formularios com width: 90% inline ---- */
@media (max-width: 768px) {
    .smart-form section select[style*="width: 90%"],
    .smart-form section label.input[style*="width: 90%"],
    .smart-form section input[style*="width: 90%"] {
        width: 100% !important;
    }
}

/* ---- Botoes em mobile ---- */
@media (max-width: 576px) {
    .widget-footer .btn,
    .btn-header-mobile {
        display: block;
        width: 100%;
        margin: 5px 0;
    }

    .widget-footer {
        padding: 10px;
    }
}

/* ---- Header principal em mobile ---- */
@media (max-width: 768px) {
    #header {
        padding: 5px 10px;
        height: auto;
    }

    #logo-group {
        width: auto;
    }

    #logo img {
        max-width: 120px;
    }
}

/* ---- Menu lateral: esconde por padrao em mobile ---- */
@media (max-width: 768px) {
    #left-panel {
        position: fixed;
        top: 49px;
        left: -220px;
        width: 220px;
        height: calc(100% - 49px);
        z-index: 999;
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    body:not(.hidden-menu) #left-panel {
        left: 0;
    }

    #main {
        margin-left: 0 !important;
    }

    /* Overlay quando o menu esta aberto */
    body:not(.hidden-menu) #main::before {
        content: "";
        position: fixed;
        top: 49px;
        left: 220px;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }
}

/* ---- Em mobile, o menu comeca escondido ---- */
@media (max-width: 768px) {
    body {
        /* Nao usamos hidden-menu como default porque ele e toggle.
           Deixe o panel oculto via posicao. */
    }
}

/* ---- Login responsivo ---- */
.login-container-responsive {
    max-width: 500px;
    width: 100%;
    margin: 5% auto !important;
    padding: 20px;
    float: none !important;
}

@media (max-width: 576px) {
    .login-container-responsive {
        margin: 20px auto !important;
        padding: 15px;
    }

    .login-container-responsive img {
        max-width: 150px;
        display: block;
        margin: 0 auto 15px auto;
    }
}

/* ---- Smart-form: colunas responsivas ---- */
@media (max-width: 768px) {
    .smart-form section.col-lg-2,
    .smart-form section.col-lg-3,
    .smart-form section.col-lg-4,
    .smart-form section.col-lg-6,
    .smart-form .col-lg-2,
    .smart-form .col-lg-3,
    .smart-form .col-lg-4,
    .smart-form .col-lg-6 {
        width: 100% !important;
        float: none;
        margin-bottom: 10px;
    }

    .smart-form .col-md-3,
    .smart-form .col-md-6,
    .smart-form .col-md-4 {
        width: 100% !important;
        float: none;
    }
}

/* ---- JobStatus e outras paginas admin: colunas ---- */
@media (max-width: 768px) {
    .row .col-lg-3,
    .row .col-lg-4,
    .row .col-lg-6,
    .row .col-md-6 {
        width: 100%;
    }
}

/* ---- Grid de dados: fonte menor em mobile ---- */
@media (max-width: 576px) {
    .table, .table-striped, .table-bordered {
        font-size: 12px;
    }

    .table th,
    .table td {
        padding: 4px 6px;
    }
}

/* ---- Datatables filtro responsivo ---- */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
        margin-bottom: 10px;
    }
}

/* ---- Widget header em mobile ---- */
@media (max-width: 576px) {
    header[role="heading"] h2 {
        font-size: 16px;
    }
}

/* ---- Paginacao responsiva ---- */
@media (max-width: 576px) {
    .pagination > li > a {
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* ---- Botao hamburguer (visivel apenas em mobile) ---- */
.btn-mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .btn-mobile-menu {
        display: inline-block;
        padding: 10px 15px;
        color: white;
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }

    #hide-menu {
        display: none !important;
    }
}

/* ---- Tamanho do toque em mobile (acessibilidade) ---- */
@media (max-width: 576px) {
    .btn, input[type="button"], input[type="submit"] {
        min-height: 38px;
    }
}