/* ============================================================================
   MOBILE RESPONSIVO - BLOCO 5
   Sistema completo de responsividade mobile-first
   ============================================================================ */

/* ============================================================================
   MOBILE-01: BREAKPOINTS
   ============================================================================ */

:root {
    --mobile-se: 375px;
    /* iPhone SE / 13 Mini */
    --mobile-std: 390px;
    /* iPhone 13 / 14 */
    --mobile-max: 428px;
    /* iPhone 14 Pro Max */
    --tablet: 768px;
    /* iPad / Tablet */
    --desktop: 1024px;
    /* Desktop */
}

/* ============================================================================
   MOBILE-02: SIDEBAR MOBILE (Menu Hambúrguer)
   ============================================================================ */

@media (max-width: 768px) {

    /* Esconde sidebar por padrão em mobile */
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 280px;
        max-width: 80vw;
        height: 100vh;
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Sidebar aberta */
    body.sidebar-open .sidebar {
        transform: translateX(0);
        left: 0;
    }

    /* Backdrop escuro */
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: all;
    }

    /* Bloqueia scroll do body quando sidebar aberta */
    body.sidebar-open {
        overflow: hidden;
    }

    /* Botão hambúrguer */
    .mobile-menu-toggle {
        position: fixed;
        top: 12px;
        left: 1rem;
        z-index: 10000;
        width: 44px;
        height: 44px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }

    .mobile-menu-toggle svg,
    .mobile-menu-toggle i {
        width: 24px;
        height: 24px;
        color: var(--text-primary);
    }
}

/* ============================================================================
   MOBILE-03: HEADER MOBILE (Compacto)
   ============================================================================ */

@media (max-width: 768px) {
    .topbar {
        padding: 0 1rem 0 4.5rem;
        height: 56px;
    }

    .topbar-logo {
        font-size: 14px;
    }

    /* Esconde breadcrumb em mobile (não cabe) */
    .breadcrumbs {
        display: none !important;
    }

    /* Notificações: só ícone */
    #notifBtn span:not(.badge-dot) {
        display: none;
    }

    /* Botão Sair: só ícone */
    #logoutBtn span {
        display: none;
    }

    /* Botão Salvar: compacto */
    .btn-save-all {
        padding: 0.5rem 0.75rem;
        font-size: 12px;
    }

    /* Client select: menor */
    .client-select {
        min-width: 120px;
        font-size: 12px;
        padding: 0.5rem 0.75rem;
    }

    /* Novo cliente: compacto */
    #newClientBtn {
        padding: 0.5rem;
    }

    #newClientBtn span {
        display: none;
    }

    /* Header status */
    .header-status {
        display: none;
    }
}

/* ============================================================================
   MOBILE-04: CARDS E GRIDS MOBILE
   ============================================================================ */

@media (max-width: 768px) {

    /* Zeus cards: 1 coluna */
    .zeus-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Agent tiles dashboard: 2 colunas */
    .agent-tiles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    /* Tabela de clientes: scroll horizontal */
    .zeus-clients-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .zeus-clients-table table {
        min-width: 600px;
    }

    /* Modais: 95vw */
    .modal-content,
    .hud-modal-content {
        width: 95vw !important;
        max-width: 95vw;
        margin: 1rem auto;
    }

    /* Main content: padding mobile */
    .main-content {
        padding: 1rem;
        margin-top: 56px;
    }

    /* Pilar pages */
    .pilar-page {
        padding: 1rem;
    }

    /* HUD cards */
    .hud-card {
        padding: 1rem;
    }
}

/* ============================================================================
   MOBILE-05: FORMULÁRIOS E INPUTS MOBILE (UX)
   ============================================================================ */

@media (max-width: 768px) {

    /* Botões: min-height 44px (Apple guideline) */
    .btn,
    button:not(.icon-btn) {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }

    /* Inputs: font-size 16px (evita zoom no iOS) */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        min-height: 44px;
    }

    /* Textarea: auto-resize */
    textarea {
        resize: vertical;
        min-height: 80px;
    }

    /* Touch targets: mínimo 44px */
    .icon-btn,
    .menu-link,
    .sidebar-item {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================================================
   MOBILE-06: PERFORMANCE MOBILE
   ============================================================================ */

/* Lazy load de imagens */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Reduzir animações em mobile (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   MOBILE-07: PWA PREPARATION
   ============================================================================ */

/* iPhone notch safe areas */
@supports(padding: max(0px)) {
    .topbar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .sidebar {
        padding-left: max(0.5rem, env(safe-area-inset-left));
    }
}

/* Evita scroll bounce no iOS */
html {
    overscroll-behavior: none;
}

/* ============================================================================
   BREAKPOINTS ESPECÍFICOS
   ============================================================================ */

/* iPhone SE (375px) */
@media (max-width: 375px) {
    .topbar-logo {
        font-size: 12px;
    }

    .agent-tiles-grid {
        grid-template-columns: 1fr !important;
    }

    .btn {
        font-size: 12px;
        padding: 0.6rem 1rem;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: var(--sidebar-w-collapsed);
    }

    .main-content {
        margin-left: var(--sidebar-w-collapsed);
    }

    .zeus-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop grande (>1024px) */
@media (min-width: 1025px) {

    /* Mobile menu toggle não aparece */
    .mobile-menu-toggle {
        display: none !important;
    }

    .sidebar-backdrop {
        display: none !important;
    }
}

/* ============================================================================
   MOBILE-08: HEADER RESPONSIVO MELHORADO
   ============================================================================ */

@media (max-width: 768px) {
    /* Theme controls em mobile */
    .theme-select-wrapper {
        display: none;
    }

    /* Mode toggle compacto */
    #modeToggle {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    /* User menu compacto */
    #userMenuBtnTop {
        width: 36px;
        height: 36px;
    }

    /* Topbar actions */
    .topbar-actions {
        gap: 0.5rem;
    }
}

/* ============================================================================
   MOBILE-09: MENU HAMBURGER - AUTO CLOSE AO SELECIONAR
   ============================================================================ */

@media (max-width: 768px) {
    /* Feedback visual ao clicar em item do menu */
    .sidebar .menu-link:active {
        background: rgba(var(--color-primary-rgb), 0.2);
        transform: scale(0.98);
    }

    /* Transição suave ao fechar */
    body.sidebar-closing .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease-in;
    }
}

/* ============================================================================
   MOBILE-10: DASHBOARD TILES RESPONSIVOS
   ============================================================================ */

@media (max-width: 768px) {
    /* Agent tiles mais compactos */
    .agent-tile {
        padding: 1rem;
    }

    .agent-tile .tile-icon {
        width: 40px;
        height: 40px;
    }

    .agent-tile .tile-title {
        font-size: 0.9rem;
    }

    .agent-tile .tile-description {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    /* Status badges menores */
    .status-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }

    /* Toggle inline compacto */
    .toggle-inline {
        transform: scale(0.85);
    }
}

/* ============================================================================
   MOBILE-11: MIKAEL CRM DARK MODE FIX
   ============================================================================ */

@media (max-width: 768px) {
    /* Lead cards em mobile dark mode */
    body[data-mode="dark"] .lead-card {
        background: rgba(26, 26, 30, 0.95);
        border-color: rgba(255, 200, 0, 0.12);
    }

    /* Kanban em coluna única */
    .crm-kanban {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Kanban column compacto */
    .kanban-column {
        padding: 0.75rem;
    }

    /* Lead card touch-friendly */
    .lead-card {
        padding: 1rem;
        touch-action: pan-y;
    }

    /* Desabilitar drag em mobile (usar swipe) */
    .lead-card {
        cursor: default;
    }
}

/* ============================================================================
   MOBILE-12: PILAR HEADERS RESPONSIVOS
   ============================================================================ */

@media (max-width: 768px) {
    .pilar-header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .pilar-header-content {
        flex-direction: row;
        width: 100%;
    }

    .pilar-icon-wrapper {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
    }

    .pilar-title h1 {
        font-size: 1.5rem !important;
    }

    .pilar-description {
        font-size: 0.8rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Botão de ação no header */
    .btn-zeus-voice,
    .pilar-header-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   MOBILE-13: MODAIS RESPONSIVOS MELHORADOS
   ============================================================================ */

@media (max-width: 768px) {
    /* Modal full-screen em mobile */
    .modal-box,
    .modal-descricao {
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        margin-top: auto;
    }

    .modal-container {
        align-items: flex-end;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Modal header sticky */
    .modal-header {
        position: sticky;
        top: 0;
        background: inherit;
        z-index: 10;
    }

    /* Modal footer sticky */
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: inherit;
        padding: 1rem;
    }

    /* Descricao grid: 1 coluna */
    .descricao-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .descricao-preview {
        order: -1; /* Preview primeiro em mobile */
    }
}

/* ============================================================================
   MOBILE-14: TABS RESPONSIVAS
   ============================================================================ */

@media (max-width: 768px) {
    .tab-navigation,
    .zeus-nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }

    .tab-btn,
    .zeus-tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    /* Esconde scrollbar mas mantém funcionalidade */
    .tab-navigation::-webkit-scrollbar,
    .zeus-nav-tabs::-webkit-scrollbar {
        height: 0;
    }
}

/* ============================================================================
   MOBILE-15: ZEUS MODAL RESPONSIVO
   ============================================================================ */

@media (max-width: 768px) {
    /* Zeus modal ocupa 95% */
    #zeusModalHost .zeus-holo-core {
        width: 90vw;
        height: 90vw;
        max-width: 350px;
        max-height: 350px;
    }

    /* Log stream no bottom */
    #zeusLogStream {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 30vh;
    }

    /* Botão voice maior para touch */
    .zeus-voice-btn {
        width: 80px;
        height: 80px;
        bottom: 35%;
    }
}

/* ============================================================================
   MOBILE-16: ACCOUNT MODAL RESPONSIVO
   ============================================================================ */

@media (max-width: 768px) {
    .account-modal {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
    }

    .account-modal-header {
        flex-direction: column;
        text-align: center;
    }

    .account-modal-avatar {
        margin: 0 auto;
    }

    .account-modal-actions {
        flex-direction: column;
    }

    .account-modal-actions .btn {
        width: 100%;
    }
}

/* ============================================================================
   MOBILE-17: TOAST NOTIFICATIONS MOBILE
   ============================================================================ */

@media (max-width: 768px) {
    .toast-container {
        bottom: auto;
        top: 70px;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }

    .toast {
        width: 100%;
    }
}

/* ============================================================================
   MOBILE-18: LANDSCAPE ORIENTATION
   ============================================================================ */

@media (max-width: 768px) and (orientation: landscape) {
    /* Sidebar ocupa menos */
    .sidebar {
        width: 200px;
    }

    /* Modal mais compacto */
    .modal-box,
    .modal-descricao {
        max-height: 85vh;
    }

    /* Zeus modal menor */
    #zeusModalHost .zeus-holo-core {
        width: 50vh;
        height: 50vh;
    }
}

/* ============================================================================
   T25: MOBILE AUDIT - Melhorias Finais (28/12/2025)
   ============================================================================ */

@media (max-width: 768px) {
    /* Hamburger menu visual aprimorado */
    .mobile-menu-toggle {
        background:
            linear-gradient(180deg, rgba(20, 20, 25, 0.95), rgba(15, 15, 20, 0.9)) padding-box,
            linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.3), rgba(var(--color-secondary-rgb), 0.2)) border-box;
        border: 1px solid transparent;
    }

    /* Auto-close: feedback visual ao selecionar item */
    .sidebar .menu-link.closing {
        opacity: 0.6;
        transform: scale(0.95);
        transition: all 0.2s ease;
    }

    /* Cards responsivos padronizados */
    .config-card,
    .agent-tile.config-card {
        padding: 1rem;
    }

    /* Integration cards em mobile */
    .integrations-grid {
        grid-template-columns: 1fr !important;
    }

    /* Mikael dark mode mobile */
    body[data-mode="dark"] .crm-kanban .kanban-column {
        background: rgba(15, 15, 18, 0.95);
        border-color: rgba(16, 185, 129, 0.15);
    }

    body[data-mode="dark"] .crm-kanban .lead-card {
        background: rgba(20, 20, 25, 0.95);
    }

    /* Theme controls escondidos corretamente */
    .header-theme-controls {
        display: none !important;
    }

    /* Header right compacto */
    .header-right {
        gap: 0.5rem;
    }

    /* Pilar header content responsivo */
    .pilar-header-main {
        border-radius: 16px !important;
    }

    /* Sandbox chat mobile */
    .sandbox-chat {
        padding: 1rem;
    }

    .sandbox-chat .chat-window {
        height: 250px !important;
    }
}