/* ================================================
   ESTILOS RESPONSIVOS - ACQUATECH SMART
   ================================================ */

/* ================================================
   BREAKPOINTS
   ================================================ */
/* 
   - Mobile: até 576px
   - Tablet: 577px até 768px  
   - Desktop pequeno: 769px até 992px
   - Desktop médio: 993px até 1200px
   - Desktop grande: acima de 1200px
*/

/* ================================================
   ESTILOS GLOBAIS RESPONSIVOS
   ================================================ */

/* Viewport meta tag reminder */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */

/* Box-sizing universal */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevenir overflow horizontal */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* ================================================
   SIDEBAR RESPONSIVO
   ================================================ */

/* Mobile - Sidebar como overlay */
@media (max-width: 768px) {
    /* Sidebar oculto por padrão */
    .sidebar, nav.sidebar {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        z-index: 1050;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    /* Sidebar ativo */
    .sidebar.active, nav.sidebar.active {
        left: 0;
    }
    
    /* Overlay escuro quando sidebar está aberto */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1049;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Main content sem margin */
    .main-content {
        margin-left: 0 !important;
        width: 100%;
    }
    
    /* Navbar fixa no topo */
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1040;
        width: 100%;
    }
}

/* Tablet e Desktop pequeno */
@media (min-width: 769px) and (max-width: 992px) {
    .sidebar, nav.sidebar {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }
    
    .main-content {
        margin-left: 200px;
    }
    
    .sidebar-menu li a {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
}

/* ================================================
   CARDS RESPONSIVOS
   ================================================ */

/* Mobile */
@media (max-width: 576px) {
    /* Cards em coluna única */
    .row .col-md-3,
    .row .col-md-4,
    .row .col-md-6,
    .row .col-lg-3,
    .row .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Cards menores em mobile */
    .card {
        margin-bottom: 15px;
    }
    
    .card-body {
        padding: 15px;
    }
    
    /* Stats cards do dashboard */
    .stats-card {
        padding: 15px;
    }
    
    .stats-card h3 {
        font-size: 1.5rem;
    }
    
    .stats-card p {
        font-size: 0.9rem;
    }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
    .row .col-md-3,
    .row .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .row .col-md-4,
    .row .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ================================================
   TABELAS RESPONSIVAS
   ================================================ */

/* Wrapper para scroll horizontal em tabelas */
.table-responsive-custom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Mobile - Tabelas em formato card */
@media (max-width: 768px) {
    /* Tabela tradicional oculta */
    .table-mobile-cards table {
        display: none;
    }
    
    /* Cards para mobile visíveis */
    .mobile-card-view {
        display: block !important;
    }
    
    /* Estilo dos cards mobile */
    .mobile-table-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .mobile-table-card .card-label {
        font-weight: 600;
        color: #6c757d;
        font-size: 0.85rem;
        margin-bottom: 5px;
    }
    
    .mobile-table-card .card-value {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    /* Tabelas com scroll horizontal */
    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .table {
        min-width: 600px;
    }
    
    /* Indicador de scroll */
    .table-responsive::after {
        content: "➡️ Deslize para ver mais";
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(255,255,255,0.9);
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 0.8rem;
        color: #6c757d;
    }
}

/* ================================================
   FORMULÁRIOS RESPONSIVOS
   ================================================ */

@media (max-width: 576px) {
    /* Formulários em coluna única */
    .form-row .col,
    .form-row .col-md-6,
    .form-row .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Inputs maiores para touch */
    .form-control,
    .form-select,
    .btn {
        min-height: 44px;
        font-size: 16px; /* Previne zoom no iOS */
    }
    
    /* Botões full width em mobile */
    .btn-group-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group-mobile .btn {
        width: 100%;
    }
}

/* ================================================
   MODAIS RESPONSIVOS
   ================================================ */

@media (max-width: 576px) {
    /* Modal fullscreen em mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    .modal-body {
        overflow-y: auto;
        max-height: calc(100vh - 120px);
    }
}

/* ================================================
   GRÁFICOS RESPONSIVOS
   ================================================ */

@media (max-width: 768px) {
    /* Containers de gráficos */
    .chart-container {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    /* Canvas responsivo */
    .chart-container canvas {
        max-height: 250px !important;
    }
    
    /* Gráficos em coluna única */
    .chart-row .col-md-6,
    .chart-row .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ================================================
   NAVBAR RESPONSIVA
   ================================================ */

@media (max-width: 768px) {
    .navbar {
        padding: 10px;
    }
    
    .navbar h4 {
        font-size: 1.1rem;
        margin: 0;
    }
    
    /* User info compacto */
    .navbar .ms-auto span {
        display: none;
    }
    
    /* Apenas ícone do user */
    .navbar .dropdown-toggle::after {
        display: none;
    }
    
    /* Menu dropdown alinhado à direita */
    .navbar .dropdown-menu {
        right: 0;
        left: auto;
    }
}

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

@media (max-width: 576px) {
    /* Título menor */
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    /* Contadores grandes centralizados */
    .display-4 {
        font-size: 2rem;
    }
    
    /* Badges menores */
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
    }
}

/* ================================================
   ALERTAS RESPONSIVOS
   ================================================ */

@media (max-width: 768px) {
    /* Alert cards em coluna única */
    .alert-card {
        margin-bottom: 15px;
    }
    
    /* Ações dos alertas em coluna */
    .alert-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .alert-actions .btn {
        width: 100%;
    }
}

/* ================================================
   FILTROS RESPONSIVOS
   ================================================ */

@media (max-width: 768px) {
    /* Filtros em coluna */
    .filter-section {
        padding: 15px;
    }
    
    .filter-section .row > div {
        margin-bottom: 15px;
    }
    
    /* Select e inputs full width */
    .filter-section .form-select,
    .filter-section .form-control {
        width: 100%;
    }
    
    /* Botões de filtro */
    .filter-buttons {
        display: flex;
        gap: 10px;
        width: 100%;
    }
    
    .filter-buttons .btn {
        flex: 1;
    }
}

/* ================================================
   PÁGINAS ESPECÍFICAS
   ================================================ */

/* Login responsivo */
@media (max-width: 768px) {
    .login-container {
        margin: 20px;
        border-radius: 10px;
    }
    
    .login-left {
        display: none;
    }
    
    .login-right {
        padding: 30px 20px;
    }
}

/* Usuários responsivo */
@media (max-width: 768px) {
    .user-card {
        margin-bottom: 15px;
    }
    
    .user-card .card-body {
        padding: 15px;
    }
    
    .user-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .user-actions .btn {
        flex: 1;
        min-width: 80px;
    }
}

/* Dispositivos responsivo */
@media (max-width: 768px) {
    .device-card {
        margin-bottom: 15px;
    }
    
    .device-info {
        font-size: 0.9rem;
    }
    
    .device-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }
    
    .device-actions .btn {
        flex: 1;
    }
}

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

/* Ocultar em mobile */
@media (max-width: 576px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Mostrar apenas em mobile */
@media (min-width: 577px) {
    .show-mobile {
        display: none !important;
    }
}

/* Ocultar em tablet */
@media (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Mostrar apenas em tablet */
@media (min-width: 769px) {
    .show-tablet {
        display: none !important;
    }
}

/* ================================================
   TEXTOS RESPONSIVOS
   ================================================ */

@media (max-width: 576px) {
    /* Tamanhos de fonte ajustados */
    body {
        font-size: 14px;
    }
    
    .small {
        font-size: 0.8rem;
    }
    
    /* Truncar textos longos */
    .text-truncate-mobile {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
}

/* ================================================
   ESPAÇAMENTOS RESPONSIVOS
   ================================================ */

@media (max-width: 576px) {
    /* Reduzir paddings em mobile */
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .p-4 {
        padding: 1rem !important;
    }
    
    .p-3 {
        padding: 0.75rem !important;
    }
    
    /* Reduzir margins */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-4 {
        margin-top: 1.5rem !important;
    }
}

/* ================================================
   LOADING E SPINNERS RESPONSIVOS
   ================================================ */

@media (max-width: 576px) {
    .loading-overlay {
        background: rgba(255,255,255,0.95);
    }
    
    .spinner-border {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* ================================================
   TOAST E NOTIFICAÇÕES RESPONSIVAS
   ================================================ */

@media (max-width: 576px) {
    /* Toast full width em mobile */
    .toast-container {
        left: 10px;
        right: 10px;
        top: 70px; /* Abaixo da navbar */
    }
    
    .toast {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Alertas fixos no topo */
    .alert-fixed {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        margin: 10px;
        z-index: 1040;
    }
}

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

@media print {
    /* Ocultar elementos não necessários */
    .sidebar,
    nav.sidebar,
    .navbar,
    .btn,
    .filter-section,
    .no-print {
        display: none !important;
    }
    
    /* Main content full width */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Remover sombras e bordas */
    .card {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }
    
    /* Quebra de página */
    .page-break {
        page-break-after: always;
    }
}

/* ================================================
   ACESSIBILIDADE
   ================================================ */

/* Focus visível para navegação por teclado */
*:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Aumentar área de toque em mobile */
@media (max-width: 768px) {
    a, button, .btn, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ================================================
   ANIMAÇÕES RESPONSIVAS
   ================================================ */

/* Desabilitar animações em dispositivos com preferência */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================
   DARK MODE (OPCIONAL)
   ================================================ */

@media (prefers-color-scheme: dark) {
    /* Adicionar estilos dark mode aqui se necessário */
}