/*
 * =============================================================================
 * TABLET PORTRAIT RESPONSIVE FIXES
 * Range: 768px - 1023px (iPad, Galaxy Tab, etc. in vertical orientation)
 * =============================================================================
 *
 * Este arquivo contém ajustes específicos para tablets em orientação vertical.
 * Não altera breakpoints existentes, apenas adiciona regras para a faixa tablet.
 */

@media (min-width: 768px) and (max-width: 1023.98px) {

    /* =========================================================================
     * MOBILE CONTROLS (Header superior em tablets)
     * ========================================================================= */
    .mobile-controls {
        width: 100%;
        padding: var(--spacing-3) var(--spacing-5);
        box-sizing: border-box;
    }

    /* =========================================================================
     * MAIN CONTENT AREA
     * ========================================================================= */
    .has-sidebar .main-content {
        margin-left: 0 !important;
        width: 100%;
    }

    .page-wrapper {
        padding: var(--spacing-6) var(--spacing-5);
    }

    /* =========================================================================
     * SIDEBAR (comportamento de overlay igual mobile)
     * ========================================================================= */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: block;
    }

    .sidebar-close {
        display: flex;
    }

    /* =========================================================================
     * GRID LAYOUTS - Adaptações para tablet
     * ========================================================================= */

    /* Stats grid: 2 colunas em tablet (override infrastructure.css) */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-4) !important;
    }

    /* Stats grid 5ª card ocupa 2 colunas */
    .stats-grid .stat-card:nth-child(5) {
        grid-column: span 2;
    }

    /* Two-column layout: stacks em tablet */
    .two-column {
        grid-template-columns: 1fr;
    }

    .two-column-reverse {
        grid-template-columns: 1fr;
    }

    /* Dashboard grid: 2 colunas máximo */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Split screen: stacks em tablet */
    .split-screen {
        grid-template-columns: 1fr;
    }

    .split-screen-sidebar {
        display: none;
    }

    /* =========================================================================
     * PAGE HEADER
     * ========================================================================= */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }

    .page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* =========================================================================
     * CARDS E BLOCOS
     * ========================================================================= */
    .card,
    .task-block {
        width: 100%;
        max-width: 100%;
    }

    /* Task blocks: 1 coluna em tablet */
    .task-blocks {
        grid-template-columns: 1fr;
    }

    /* =========================================================================
     * FORMULÁRIOS E INPUTS
     * ========================================================================= */
    .filters-bar {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .filters-group {
        width: 100%;
        justify-content: flex-start;
    }

    /* =========================================================================
     * MODAIS - Ajuste de tamanho para tablet
     * ========================================================================= */
    .modal-content,
    [style*="max-width: 600px"] {
        max-width: 90% !important;
        width: 90% !important;
    }

    /* Modal de mapa: menor em tablet */
    #modal-map > div {
        max-width: 95% !important;
        height: 85vh !important;
    }

    /* =========================================================================
     * CHAT E TICKET DETAIL
     * ========================================================================= */
    .chat-container {
        min-height: 350px;
    }

    .chat-message {
        max-width: 90%;
    }

    /* =========================================================================
     * NOTIFICATION PANEL
     * ========================================================================= */
    .notification-panel {
        width: 300px;
        max-height: 350px;
    }

    .sidebar-footer .notification-panel {
        left: 16px;
        right: auto;
        width: calc(100vw - 32px);
        max-width: 350px;
    }

    /* =========================================================================
     * HEADER PÚBLICO (Página de tickets)
     * ========================================================================= */
    .header-inner {
        padding-inline: var(--spacing-4);
    }

    .header-logo::before {
        /* Círculo menor em tablet */
        width: 85px;
        height: 85px;
    }

    /* =========================================================================
     * TABELAS
     * ========================================================================= */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* =========================================================================
     * INVENTÁRIO - Grid de equipamentos
     * ========================================================================= */
    .inventory-grid,
    .assets-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* =========================================================================
     * MONITOR DE REDE
     * ========================================================================= */
    .device-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* =========================================================================
     * UTILITÁRIOS DE VISIBILIDADE TABLET
     * ========================================================================= */
    .tablet-hidden {
        display: none !important;
    }

    .tablet-block {
        display: block !important;
    }

    .tablet-flex {
        display: flex !important;
    }
}