/* ========================================
   SISTEMA RESPONSIVO INTELIGENTE UNIVERSAL
   Adaptação automática para qualquer resolução
======================================== */

/* Reset Responsivo Base */
* {
    box-sizing: border-box;
    max-width: 100%;
}

/* Configuração Base HTML */
html {
    font-size: clamp(12px, 1.2vw, 18px); /* Font-size fluido */
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    min-width: 280px; /* Suporte até smartphones muito pequenos */
    font-size: 1rem;
    line-height: 1.5;
}

/* ========================================
   CONTAINER RESPONSIVO INTELIGENTE
======================================== */

.container {
    width: 100%;
    max-width: min(1800px, 95vw); /* Máximo 95% da viewport */
    margin: 0 auto;
    padding: clamp(8px, 2vw, 25px); /* Padding fluido */
    min-width: unset;
}

/* ========================================
   SISTEMA DE BREAKPOINTS FLUIDOS
======================================== */

/* Ultra Wide Screens (4K+) */
@media (min-width: 2560px) {
    html { font-size: 20px; }
    .container { max-width: 2400px; padding: 30px; }
}

/* Large Desktop (1920px+) */
@media (min-width: 1920px) and (max-width: 2559px) {
    html { font-size: 18px; }
    .container { max-width: 1800px; padding: 25px; }
}

/* Standard Desktop (1440px-1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    html { font-size: 16px; }
    .container { max-width: 1400px; padding: 20px; }
}

/* Small Desktop / Large Laptop (1200px-1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    html { font-size: 15px; }
    .container { max-width: 1200px; padding: 18px; }
    
    /* Otimizações para laptops */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }
    
    .header h1 { font-size: 2.2rem; }
    .header p { font-size: 1rem; }
}

/* Medium Laptop (992px-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    html { font-size: 14px; }
    .container { max-width: 100%; padding: 15px; }
    
    /* Header responsivo */
    .header {
        padding: 20px 15px;
        text-align: center;
    }
    
    .header h1 { font-size: 2rem; }
    .header p { font-size: 0.95rem; }
    
    /* User header adaptativo */
    .user-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px;
    }
    
    .user-info, .user-actions {
        justify-content: center;
        width: 100%;
    }
    
    /* Stats grid 3 colunas */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    /* Tabela otimizada */
    table { font-size: 0.9rem; }
    th, td { padding: 8px 6px; }
}

/* Small Laptop / Large Tablet (768px-991px) */
@media (min-width: 768px) and (max-width: 991px) {
    html { font-size: 14px; }
    .container { padding: 12px; }
    
    /* Layout em coluna */
    .header-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .header-left, .header-right {
        width: 100%;
        justify-content: center;
    }
    
    /* Stats grid 2 colunas */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* Upload section compacta */
    .upload-compact {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .upload-left, .upload-right {
        width: 100%;
        justify-content: center;
    }
    
    /* Filtros em stack */
    .filters-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* Tabela com scroll horizontal */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    table {
        min-width: 700px;
        font-size: 0.85rem;
    }
}

/* Mobile Portrait (576px-767px) */
@media (min-width: 576px) and (max-width: 767px) {
    html { font-size: 14px; }
    .container { padding: 10px; }
    
    /* Header mobile */
    .header {
        padding: 15px 10px;
        text-align: center;
    }
    
    .header h1 { font-size: 1.8rem; margin-bottom: 8px; }
    .header p { font-size: 0.9rem; }
    
    /* Stats grid 1 coluna */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .stat-card {
        padding: 12px;
        text-align: center;
    }
    
    .stat-title { font-size: 0.7rem; }
    .stat-count { font-size: 1.6rem; }
    
    /* User header mobile */
    .user-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 12px;
    }
    
    /* Tabela mobile */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
        font-size: 0.8rem;
    }
    
    th, td { padding: 6px 4px; }
    
    /* Botões compactos */
    .btn-sm {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    /* Modal responsivo */
    .modal-content, .modern-modal {
        width: 95%;
        max-height: 90vh;
        margin: 5vh auto;
    }
}

/* Small Mobile (320px-575px) */
@media (max-width: 575px) {
    html { font-size: 13px; }
    .container { padding: 8px; }
    
    /* Header muito compacto */
    .header {
        padding: 12px 8px;
        text-align: center;
    }
    
    .header h1 { font-size: 1.5rem; margin-bottom: 5px; }
    .header p { font-size: 0.85rem; }
    
    /* User header compacto */
    .user-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 10px 8px;
    }
    
    .welcome { font-size: 0.85rem; }
    
    .role-badge, .expiry-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    /* Stats ultra compactos */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .stat-card {
        padding: 10px 8px;
        text-align: center;
    }
    
    .stat-title { font-size: 0.65rem; }
    .stat-count { font-size: 1.4rem; }
    .stat-value { font-size: 1.6rem; }
    
    /* Upload ultra compacto */
    .upload-section-compact {
        padding: 10px 8px;
        margin: 8px 0;
    }
    
    .upload-header h3 { font-size: 0.9rem; }
    .upload-text { font-size: 0.8rem; }
    .upload-subtext { font-size: 0.7rem; }
    
    /* Tabela mobile extrema */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -8px; /* Expand para bordas */
    }
    
    table {
        min-width: 500px;
        font-size: 0.75rem;
    }
    
    th, td { padding: 4px 2px; }
    
    /* Colunas otimizadas para mobile */
    th:nth-child(1), td:nth-child(1) { width: 40px; min-width: 40px; }
    th:nth-child(2), td:nth-child(2) { width: 80px; min-width: 80px; }
    th:nth-child(3), td:nth-child(3) { width: 120px; min-width: 120px; }
    th:nth-child(4), td:nth-child(4) { width: 70px; min-width: 70px; }
    th:nth-child(5), td:nth-child(5) { width: 70px; min-width: 70px; }
    th:nth-child(6), td:nth-child(6) { width: 80px; min-width: 80px; }
    th:nth-child(7), td:nth-child(7) { width: 60px; min-width: 60px; }
    th:nth-child(8), td:nth-child(8) { width: 80px; min-width: 80px; }
    
    /* Botões ultra compactos */
    .btn-sm {
        padding: 3px 6px;
        font-size: 0.7rem;
    }
    
    .action-buttons { gap: 1px; }
    
    /* Status badges compactos */
    .status-badge {
        font-size: 0.6rem;
        padding: 2px 4px;
    }
    
    .banco-badge {
        font-size: 0.6rem;
        padding: 2px 4px;
        max-width: 70px;
    }
    
    /* Modal mobile */
    .modal-content, .modern-modal {
        width: 98%;
        max-height: 95vh;
        margin: 2.5vh auto;
        padding: 10px;
    }
    
    .modal-header { padding: 8px 10px; }
    .modal-body { padding: 10px; }
    
    /* Filtros mobile */
    .filters-section { padding: 8px; }
    .filter-group input, .filter-group select {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
}

/* ========================================
   ADMIN DASHBOARD RESPONSIVO
======================================== */

/* Dashboard Stats Responsivos */
.admin-dashboard .stats-globais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .admin-dashboard .stats-globais {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .admin-dashboard .stats-globais {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Usuários Grid Responsivo */
.usuarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

@media (max-width: 768px) {
    .usuarios-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Tabela Admin Responsiva */
.admin-table {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 992px) {
    .admin-table {
        font-size: 0.85rem;
    }
    
    .admin-table th, .admin-table td {
        padding: 6px 4px;
    }
}

@media (max-width: 768px) {
    .admin-table {
        font-size: 0.8rem;
    }
    
    .admin-table th, .admin-table td {
        padding: 4px 2px;
    }
}

/* ========================================
   OTIMIZAÇÕES ESPECÍFICAS POR RESOLUÇÃO
======================================== */

/* Notebooks 13-14" (1366x768, 1440x900) */
@media (min-width: 1200px) and (max-width: 1440px) and (max-height: 900px) {
    html { font-size: 13px; }
    
    .container { padding: 12px; }
    
    .header { padding: 15px; margin-bottom: 15px; }
    .header h1 { font-size: 1.8rem; }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 8px;
    }
    
    .stat-card { padding: 10px; }
    .stat-count { font-size: 1.4rem; }
    
    table { font-size: 0.75rem; }
    th, td { padding: 4px 3px; }
    
    .upload-section-compact { padding: 10px; }
}

/* Netbooks e similares (1024x768) */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 768px) {
    html { font-size: 12px; }
    
    .container { padding: 10px; }
    
    .header { padding: 12px; margin-bottom: 12px; }
    .header h1 { font-size: 1.6rem; }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .stat-card { padding: 8px; }
    .stat-count { font-size: 1.2rem; }
    
    table { font-size: 0.7rem; }
    th, td { padding: 3px 2px; }
}

/* ========================================
   OTIMIZAÇÕES DE PERFORMANCE
======================================== */

/* Reduzir animações em telas pequenas */
@media (max-width: 768px) {
    * {
        transition-duration: 0.2s !important;
        animation-duration: 0.2s !important;
    }
    
    .stat-card:hover {
        transform: none !important;
    }
    
    .btn:hover {
        transform: none !important;
    }
}

/* Scrollbars otimizadas */
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* ========================================
   CLASSES UTILITÁRIAS RESPONSIVAS
======================================== */

/* Visibilidade responsiva */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

.hide-small { display: block; }
@media (max-width: 576px) {
    .hide-small { display: none !important; }
}

/* Texto responsivo */
.text-responsive {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
}

/* Padding responsivo */
.padding-responsive {
    padding: clamp(8px, 2vw, 20px);
}

/* Margin responsivo */
.margin-responsive {
    margin: clamp(5px, 1.5vw, 15px);
}

/* ========================================
   FIXES ESPECÍFICOS PARA ELEMENTOS
======================================== */

/* Imagens responsivas */
img {
    max-width: 100%;
    height: auto;
}

/* Inputs responsivos */
input, select, textarea {
    max-width: 100%;
    font-size: max(16px, 1rem); /* Previne zoom no iOS */
}

@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px; /* Força 16px no mobile */
    }
}

/* Headers sticky em mobile */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: inherit;
}

/* ========================================
   DARK THEME RESPONSIVO
======================================== */

.dark-theme .table-container::-webkit-scrollbar-track {
    background: #2d3748;
}

.dark-theme .table-container::-webkit-scrollbar-thumb {
    background: #4a5568;
}

.dark-theme .table-container::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* ========================================
   PRINT STYLES
======================================== */

@media print {
    .container {
        max-width: none;
        padding: 0;
    }
    
    .hide-print {
        display: none !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        page-break-inside: avoid;
    }
    
    table {
        page-break-inside: auto;
    }
    
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
}