/* SISTEMA RESPONSIVO BLUEDATA */
/* Adapta automaticamente o layout para diferentes resoluções */

/* =============================================== */
/* VARIÁVEIS CSS DINÂMICAS POR RESOLUÇÃO */
/* =============================================== */

:root {
    /* Escala base para 1920px */
    --scale-factor: 1;
    --base-font-size: 16px;
    --base-spacing: 1rem;
    --base-border-radius: 8px;
    --base-shadow: 0 2px 8px rgba(0,0,0,0.1);
    
    /* Tamanhos dinâmicos */
    --font-xs: calc(0.75rem * var(--scale-factor));
    --font-sm: calc(0.875rem * var(--scale-factor));
    --font-base: calc(1rem * var(--scale-factor));
    --font-lg: calc(1.125rem * var(--scale-factor));
    --font-xl: calc(1.25rem * var(--scale-factor));
    --font-2xl: calc(1.5rem * var(--scale-factor));
    --font-3xl: calc(1.875rem * var(--scale-factor));
    
    /* Espaçamentos dinâmicos */
    --spacing-xs: calc(0.25rem * var(--scale-factor));
    --spacing-sm: calc(0.5rem * var(--scale-factor));
    --spacing-base: calc(1rem * var(--scale-factor));
    --spacing-lg: calc(1.5rem * var(--scale-factor));
    --spacing-xl: calc(2rem * var(--scale-factor));
    --spacing-2xl: calc(3rem * var(--scale-factor));
    
    /* Componentes dinâmicos */
    --input-height: calc(45px * var(--scale-factor));
    --button-padding: calc(12px * var(--scale-factor)) calc(20px * var(--scale-factor));
    --card-padding: calc(20px * var(--scale-factor));
    --border-radius: calc(8px * var(--scale-factor));
    --border-width: calc(2px * var(--scale-factor));
}

/* =============================================== */
/* MEDIA QUERIES POR RESOLUÇÃO */
/* =============================================== */

/* Monitores pequenos 1366x768 */
@media screen and (max-width: 1366px) {
    :root {
        --scale-factor: 0.85;
    }
    
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ajuste específico para menu lateral */
    #menu-lado {
        flex: 0 0 180px !important;
        max-width: 180px !important;
    }
    
    #tela-trabalho-dash {
        flex: 0 0 calc(100% - 180px) !important;
        max-width: calc(100% - 180px) !important;
    }
}

/* Monitores médios 1600x900 */
@media screen and (min-width: 1367px) and (max-width: 1600px) {
    :root {
        --scale-factor: 0.92;
    }
}

/* Monitores grandes 1920x1080+ */
@media screen and (min-width: 1921px) {
    :root {
        --scale-factor: 1.1;
    }
}

/* Monitores ultra-wide 2560px+ */
@media screen and (min-width: 2560px) {
    :root {
        --scale-factor: 1.25;
    }
    
    .container {
        max-width: 2200px !important;
    }
}

/* =============================================== */
/* SISTEMA DE GRID RESPONSIVO */
/* =============================================== */

.row {
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
}

/* =============================================== */
/* COMPONENTES RESPONSIVOS */
/* =============================================== */

/* Fontes responsivas */
body, .font-base { 
    font-size: var(--font-base) !important; 
    line-height: calc(1.5 * var(--scale-factor)) !important;
}

h1, .h1 { font-size: var(--font-3xl) !important; }
h2, .h2 { font-size: var(--font-2xl) !important; }
h3, .h3 { font-size: var(--font-xl) !important; }
h4, .h4 { font-size: var(--font-lg) !important; }
h5, .h5 { font-size: var(--font-base) !important; }
h6, .h6 { font-size: var(--font-sm) !important; }

.small, small { font-size: var(--font-xs) !important; }

/* Botões responsivos */
.btn {
    padding: var(--button-padding) !important;
    font-size: var(--font-base) !important;
    border-radius: var(--border-radius) !important;
    border-width: var(--border-width) !important;
    transition: all 0.3s ease !important;
}

.btn-sm {
    padding: calc(8px * var(--scale-factor)) calc(16px * var(--scale-factor)) !important;
    font-size: var(--font-sm) !important;
}

.btn-lg {
    padding: calc(16px * var(--scale-factor)) calc(24px * var(--scale-factor)) !important;
    font-size: var(--font-lg) !important;
}

.form-label {
    font-size: var(--font-base) !important;
    font-weight: 600 !important;
    margin-bottom: calc(5px * var(--scale-factor)) !important;
}

/* Select2 responsivo */
.select2-container--default .select2-selection--single {
    height: var(--input-height) !important;
    padding: calc(8px * var(--scale-factor)) calc(12px * var(--scale-factor)) !important;
    font-size: var(--font-base) !important;
    border-radius: var(--border-radius) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--input-height) - 16px * var(--scale-factor)) !important;
    padding: 0 !important;
}

/* Cards responsivos */
.card {
    border-radius: var(--border-radius) !important;
    margin-bottom: var(--spacing-base) !important;
    box-shadow: var(--base-shadow) !important;
}

.card-header {
    padding: var(--spacing-base) var(--card-padding) !important;
    font-size: var(--font-lg) !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.card-body {
    padding: var(--card-padding) !important;
}

/* Tabelas responsivas */
.table {
    font-size: var(--font-base) !important;
}

.table th {
    padding: var(--spacing-base) !important;
    font-size: var(--font-base) !important;
    font-weight: 600 !important;
}

.table td {
    padding: calc(0.75rem * var(--scale-factor)) var(--spacing-base) !important;
    font-size: var(--font-base) !important;
}

/* Modais responsivos */
.modal-dialog {
    margin: calc(30px * var(--scale-factor)) auto !important;
}

.modal-content {
    border-radius: var(--border-radius) !important;
}

.modal-header {
    padding: var(--spacing-lg) var(--card-padding) !important;
    font-size: var(--font-lg) !important;
}

.modal-body {
    padding: var(--card-padding) !important;
}

/* =============================================== */
/* LAYOUT ESPECÍFICO BLUEDATA */
/* =============================================== */

/* Menu lateral responsivo */
#menu-lado {
    transition: all 0.3s ease !important;
}

#menu-lado .img-fluid {
    max-width: calc(80px * var(--scale-factor)) !important;
    height: auto !important;
}

.menu-lateral {
    padding: var(--spacing-base) !important;
    font-size: var(--font-base) !important;
}

.texto-menu-lateral {
    font-size: var(--font-sm) !important;
    margin: 0 !important;
}

#ico-lateral {
    width: calc(20px * var(--scale-factor)) !important;
    height: calc(20px * var(--scale-factor)) !important;
}

/* Barra de usuário responsiva */
#mini-barra {
    padding: var(--spacing-base) !important;
}

#user {
    width: calc(40px * var(--scale-factor)) !important;
    height: calc(40px * var(--scale-factor)) !important;
}

#nome-user {
    font-size: var(--font-base) !important;
}

/* =============================================== */
/* UTILITÁRIOS RESPONSIVOS */
/* =============================================== */

.p-responsive {
    padding: var(--card-padding) !important;
}

.m-responsive {
    margin: var(--spacing-base) !important;
}

.gap-responsive {
    gap: var(--spacing-base) !important;
}

.border-responsive {
    border-width: var(--border-width) !important;
    border-radius: var(--border-radius) !important;
}

/* =============================================== */
/* CORREÇÕES ESPECÍFICAS PARA RESOLUÇÕES PEQUENAS */
/* =============================================== */

@media screen and (max-width: 1366px) {
    /* Reduzir padding geral */
    .container-fluid {
        padding: 8px !important;
    }
    
    /* Ajustar tabelas */
    .table-responsive {
        font-size: calc(0.85rem * var(--scale-factor)) !important;
    }
    
    .table th, .table td {
        padding: calc(8px * var(--scale-factor)) !important;
    }
    
    /* Ajustar modais */
    .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
    }
    
    /* Compactar formulários */
    .form-group {
        margin-bottom: calc(15px * var(--scale-factor)) !important;
    }
    
    /* Ajustar cards */
    .card {
        padding: calc(15px * var(--scale-factor)) !important;
    }
}

/* =============================================== */
/* SISTEMA DE DEBUG RESPONSIVO */
/* =============================================== */

.debug-resolution {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    display: none;
}

/* Ativar debug com ?debug=responsive na URL */
body.debug-responsive .debug-resolution {
    display: block;
}

.debug-resolution::after {
    content: "W: " attr(data-width) " | Scale: " attr(data-scale);
}