/* Regras para dispositivos mobile */
@media (max-width: 1600px) {
    .dashboard-row {
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .modules-header .client-name {
        font-size: 20px;
    }

    .modules-header .welcome-text {
        font-size: 16px;
    }

    .modules-body {
        padding: 30px 20px;
    }

    .modules-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .modules-title {
        font-size: 18px;
    }
    
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        height: auto;
        min-height: 38px;
    }
    
    .select2-results__options > li.select2-results__option {
        padding: 12px 10px;
        font-size: 15px;
    }
    
    ul.select2-results__options {
        max-height: 250px;
    }
    .btn-text{
        display: none;
    }
    .btn-return, btn-clear, .btn-search{
        width: 15px !important;
    }
    
    #barra_menus button.navbar-toggle {
        background: rgb(83, 201, 134);
    }
    
    #barra_menus .dropdown-submenu > .dropdown-menu {
        display: none;
        position: static;
        float: none;
        width: auto;
        margin-left: 20px;
        box-shadow: none;
        border-left: 2px solid #067513;
    }
    
    #barra_menus .dropdown-submenu.open > .dropdown-menu {
        display: block;
    }
        
    /* Melhorar o espaçamento dos itens no mobile */
    #barra_menus ul.itens .dropdown-menu > li > a {
        padding: 8px 15px;
    }
}

@media (max-width: 576px) {
    .nav-tabs.water_system li {
        flex-basis: 100%; /* Cada aba ocupa a largura total no celular */
    }
    .nav-tabs.water_system li a {
        clip-path: none !important; /* Opcional: remove formato de seta em telas minúsculas */
        padding: 10px;
        border-radius: 4px !important;
        margin-bottom: 2px;
    }
    .modules-container {
        width: 100%;
    }

    .modules-card {
        border-radius: 0;
    }

    .btn-logout {
        width: 100%;
        justify-content: center;
    }

    .login-container {
        padding: 0;
    }

    .login-card {
        border-radius: 0;
    }

    .login-header {
        padding: 30px 20px;
    }

    .login-body {
        padding: 30px 20px;
    }

    .login-header h1 {
        font-size: 24px;
    }
}
@media (max-width: 480px) {
    /* Cabeçalho */
    #barra_central{
        background-size: 100% 100%;
    }
    #barra_central .brasao{
        width: 30%;
    }
    #barra_central .dados{
        font-size: 9px;
        width: 70%;
    }
    #barra_central .dados h3{
        font-size: 20px;
    }
    /* Barra de menus */
    #barra_menus button.navbar-toggle{
        margin: 0;
        padding: 10px 5px;
        width: 100%;
        height: 50px;
    }
    #barra_menus button.navbar-toggle span.icon-bar{
        width: 25px;
        height: 4px;
    }
    #barra_menus button.navbar-toggle span.texto{
        position: absolute;
        top: 15px;
        left: 40px;
        font-weight: bold;
        color: #666;
    }
    #barra_menus button.navbar-toggle span.caret{
        position: absolute;
        top: 20px;
        right: 5px;
    }
    #barra_menus .navbar-collapse{
        padding: 0 15px;
    }
    #barra_menus ul.itens ul.dropdown-menu{
        box-shadow: none;
    }
    #barra_menus ul.itens ul.dropdown-menu>li>a{
        padding: 5px 25px;
    }
    #barra_menus ul.itens li{
        border-bottom: 1px solid lightgray;
    }
    /* Corpo */
    #corpo{
        padding: 0;
        width: 100%;
        box-shadow: none;
        border: 0;
    }
    #corpo div.row{
        margin-right: 0;
    }
    #corpo .row>div[class^='col']{
        padding-right: 0;
    }
    /* Rodapé */
    #rodape div.container{
        padding-left: 0;
        padding-right: 0;
    }
    #rodape p.copyright{
        font-size: 11px;
    }
    #rodape p.tempo_requisicao{
        line-height: 10px;
    }
    /* Informações do sistema, nas páginas de login e seleção de módulos */
    .informacoes_sistema{
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    .informacoes_sistema .ft_sistema, .informacoes_sistema .ft_modulo{
        font-size: 18px;
        margin: 0;
    }
    .informacoes_sistema .ft_modulo{
        margin-bottom: 4px;
    }
    #login{
        width: 95%;
    }
    /* Formulário da página de login */
    #formLogin{
        margin: 0 10px !important;
    }
    /* Botões de sair do sistema */
    div.btn-group button.sair_completamente{
        font-size: 12px;
    }
    /* tables de listagem */
    table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{
        top: 35%;
    }
    /* Campos de arquivo instanciados pelo componente FileUploader */
    .conteiner_arquivo .nome>span.valor{
        width: 100px;
    }
    /* Campos de calendário instanciados pelo componente Bootstrap Datepicker */
    div.datepicker-days>table>tbody td.day{
        min-width: 37.5px;
    }
    /* Fieldsets (gerados a partir do componente "Panel", do Bootstrap) */
    .caixa, .caixa_media, .caixa_grande{
        width: 95%;
    }
    /* Botões backlink */
    div.backlink{
        width: 98%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    div.backlink>div{
        padding: 0 !important;
    }
    div.backlink>div:first-child .btn{
        border-radius: 3px 3px 0 0 !important;
    }
    div.backlink>div:last-child .btn{
        border-radius: 0 0 3px 3px !important;
    }
    /* Layout de formularios */
    .form div.aviso_vermelho{
        width: 100%;
    }
    .form div.aviso_vermelho>ul{
        width: auto;
    }
    /* Campos de formulário */
    .form-group label{
        font-size: 14px;
        display: block;
        text-align: left;
    }
    .conteiner_calendario.intervalo_aberto input[type='text']{
        width: 100%;
    }
    button.btn.btn-default, a.btn.btn-default{
        padding: 6px;
    }
    /* Janelas modais */
    .janela_modal .modal-dialog{
        width: 95%;
        min-width: 0;
        max-width: none;
    }
    /* Ações mobile */
    ul.acoes_mobile{
        margin: 0;
        padding: 0;
    }
    ul.acoes_mobile>li.dropdown-header{
        padding: 3px 0;
        font-size: 13px;
        font-weight: bold;
        color: white;
        text-shadow: 0px 1px 0px rgba(0,0,0,0.7);
        text-align: center;
        background: rgb(90, 125, 85);
    }
    ul.acoes_mobile>li.divider{
        margin: 0;
    }
    ul.acoes_mobile>li>a{
        padding: 10px 3px;
        border: 1px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.14902);
    }
    ul.acoes_mobile>li:last-child>a{
        border-bottom-color: transparent;
    }
    ul.acoes_mobile>li>a:hover, ul.acoes_mobile>li>a:focus{
        border: 1px solid #aaa;
        background-color: #5A7D55;
        color: white;
        text-shadow: 0px 1px 0px black;
    }
    ul.acoes_mobile>li>a>i.fa, ul.acoes_mobile>li>a>span.glyphicon{
        margin-left: 3px;
        margin-right: 3px;
    }
    ul.acoes_mobile>li>a>img{
        margin-left: 3px;
        margin-right: 3px;
    }
    ul.acoes_mobile>li>a.mobile-success{
        background-color: #dff0d8;
    }
    ul.acoes_mobile>li>a.mobile-primary{
        background-color: #d9edf7;
    }
    ul.acoes_mobile>li>a.mobile-danger{
        background-color: #f2dede;
    }
    /* Imagem da página inicial do sistema */
    div.imagem_central>img{
        width: 100%;
    }

    .radio{
        display: table;
    }
    .radio:not(.first){
        margin-left: 0px;
    }
    /* Estilizações do checkbox de seleção de linhas na tabela do CRUD de Requisições */
    .select-row{
        height: 34px;
    }
    .select-row div.checkbox{
        margin-top: 2px;
        margin-bottom: 0;
    }
    .select-row div.checkbox>input,
    .select-row div.checkbox label::before,
    .select-row div.checkbox label::after{
        margin-left: -10px;
    }
}