/**
 * GeoIBRAM Mobile Design System
 * Pixel-Perfect baseado em geoibram-mobile
 * 
 * IMPORTANTE: Todas as mudanças APENAS para mobile/tablet
 * Desktop permanece 100% inalterado
 */

/* ============================================
   1. VARIÁVEIS CSS - REPLICAÇÃO EXATA geoibram-mobile
   ============================================ */

@media (max-width: 768px) {
    :root {
        /* Cores exatas do geoibram-mobile */
        --color-primary: #059669;        /* Emerald 600 */
        --color-secondary: #f59e0b;      /* Amber 500 */
        --color-bg: #f3f4f6;             /* Gray 100 */
        --color-surface: #ffffff;
        --color-text-primary: #1f2937;   /* Gray 800 */
        --color-text-secondary: #6b7280;  /* Gray 500 */
        --color-border: #e5e7eb;         /* Gray 200 */
        
        /* Tipografia Inter */
        --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        
        /* Tamanhos de Fonte Mobile */
        --font-size-xs: 0.75rem;    /* 12px */
        --font-size-sm: 0.875rem;   /* 14px */
        --font-size-base: 1rem;     /* 16px - MÍNIMO LEGÍVEL */
        --font-size-lg: 1.125rem;   /* 18px */
        --font-size-xl: 1.25rem;    /* 20px */
        --font-size-2xl: 1.5rem;    /* 24px */
        
        /* Border Radius */
        --radius-lg: 0.5rem;    /* 8px */
        --radius-xl: 0.75rem;   /* 12px - rounded-xl */
        --radius-2xl: 1rem;     /* 16px - rounded-2xl */
        --radius-full: 9999px;
        
        /* Shadows */
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
        --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
        --shadow-emerald: 0 10px 15px rgba(5, 150, 105, 0.2);
        --shadow-amber: 0 10px 15px rgba(245, 158, 11, 0.2);
        --shadow-bottom-nav: 0 -4px 6px -1px rgba(0,0,0,0.05);
        
        /* Espaçamento (sistema 4px/8px) */
        --spacing-1: 0.25rem;   /* 4px */
        --spacing-2: 0.5rem;    /* 8px */
        --spacing-3: 0.75rem;   /* 12px */
        --spacing-4: 1rem;      /* 16px */
        --spacing-5: 1.25rem;   /* 20px */
        --spacing-6: 1.5rem;    /* 24px */
        
        /* Touch Targets */
        --touch-target-min: 44px;
        --touch-target-comfort: 48px;
    }
    
    /* ============================================
       OCULTAR ÍCONE HAMBURGUER NO MOBILE
       ============================================ */
    
    #mobile-menu-toggle,
    .mobile-menu-toggle,
    [id*="menu-toggle"],
    [class*="menu-toggle"],
    [id*="hamburger"],
    [class*="hamburger"] {
        display: none !important;
    }
}

/* ============================================
   2. TIPOGRAFIA MOBILE - 16PX MÍNIMO
   ============================================ */

@media (max-width: 768px) {
    /* Body Text - MÍNIMO 16px para legibilidade */
    body {
        font-family: var(--font-family);
        font-size: var(--font-size-base) !important;
        line-height: 1.6;
        color: var(--color-text-primary);
    }
    
    /* Small Text - Mínimo 14px */
    small, .text-sm, .small-text {
        font-size: var(--font-size-sm) !important;
    }
    
    /* Headings - Hierarquia Clara */
    h1, .h1 {
        font-size: var(--font-size-2xl) !important;
        font-weight: var(--font-weight-bold);
        line-height: 1.3;
        margin-bottom: var(--spacing-4);
    }
    
    h2, .h2 {
        font-size: var(--font-size-xl) !important;
        font-weight: var(--font-weight-semibold);
        line-height: 1.3;
        margin-bottom: var(--spacing-3);
    }
    
    h3, .h3 {
        font-size: var(--font-size-lg) !important;
        font-weight: var(--font-weight-semibold);
        line-height: 1.4;
        margin-bottom: var(--spacing-3);
    }
    
    /* Parágrafos */
    p {
        font-size: var(--font-size-base);
        line-height: 1.6;
        margin-bottom: var(--spacing-4);
    }
}

/* ============================================
   3. TOUCH TARGETS - 48PX MÍNIMO
   ============================================ */

@media (max-width: 768px) {
    /* Botões - Mínimo 48x48px */
    button, 
    .btn, 
    .button,
    input[type="button"],
    input[type="submit"],
    .wp-block-button__link {
        min-height: var(--touch-target-comfort) !important;
        min-width: var(--touch-target-comfort);
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--font-size-base);
        border-radius: var(--radius-xl);
        font-weight: var(--font-weight-semibold);
        transition: all 0.2s ease;
    }
    
    /* Links Clicáveis - Mínimo 44x44px */
    a:not(.btn):not(.button) {
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    /* Ícones Clicáveis */
    .icon-button,
    .icon-link {
        min-height: var(--touch-target-comfort) !important;
        min-width: var(--touch-target-comfort) !important;
        padding: var(--spacing-3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   4. FORMULÁRIOS MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Inputs - Altura mínima 48px */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        min-height: var(--touch-target-comfort) !important;
        padding: var(--spacing-3) var(--spacing-4) !important;
        font-size: var(--font-size-base) !important;
        border-radius: var(--radius-xl);
        border: 1px solid var(--color-border);
        width: 100%;
        background-color: var(--color-surface);
        transition: all 0.2s ease;
    }
    
    /* Focus States */
    input:focus,
    textarea:focus,
    select:focus {
        outline: none !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1) !important;
    }
    
    /* Labels */
    label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
        margin-bottom: var(--spacing-2);
        display: block;
    }
    
    /* Textarea */
    textarea {
        min-height: 120px;
        resize: vertical;
    }
}

/* ============================================
   5. TABELAS RESPONSIVAS - CARDS NO MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Converter tabelas em cards */
    table.responsive-table {
        display: block;
        width: 100%;
    }
    
    table.responsive-table thead {
        display: none;
    }
    
    table.responsive-table tbody {
        display: block;
    }
    
    table.responsive-table tr {
        display: block;
        background: var(--color-surface);
        border-radius: var(--radius-2xl);
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-4);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--color-border);
    }
    
    table.responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-3) 0;
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-base);
    }
    
    table.responsive-table td:last-child {
        border-bottom: none;
    }
    
    table.responsive-table td:before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        margin-right: var(--spacing-4);
    }
}

/* ============================================
   6. CARDS E CONTAINERS
   ============================================ */

@media (max-width: 768px) {
    /* Cards */
    .card,
    .geoibram-card {
        background: var(--color-surface);
        border-radius: var(--radius-2xl);
        padding: var(--spacing-4);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--color-border);
        margin-bottom: var(--spacing-4);
    }
    
    /* Sections */
    .section {
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-6);
    }
}

/* ============================================
   7. BOTÕES MOBILE - REPLICAÇÃO EXATA
   ============================================ */

@media (max-width: 768px) {
    /* Primary Button */
    .btn-primary,
    button.primary {
        background-color: var(--color-primary);
        color: white;
        box-shadow: var(--shadow-lg), var(--shadow-emerald);
        border: none;
    }
    
    .btn-primary:active {
        transform: scale(0.95);
    }
    
    /* Secondary Button */
    .btn-secondary,
    button.secondary {
        background-color: var(--color-secondary);
        color: white;
        box-shadow: var(--shadow-lg), var(--shadow-amber);
        border: none;
    }
    
    .btn-secondary:active {
        transform: scale(0.95);
    }
    
    /* Outline Button */
    .btn-outline {
        background: transparent;
        border: 2px solid var(--color-primary);
        color: var(--color-primary);
    }
}

/* ============================================
   8. SIDEBAR MOBILE - OVERLAY
   ============================================ */

@media (max-width: 768px) {
    /* Sidebar como overlay */
    .sidebar,
    #sidebar,
    .apicultor-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--color-surface);
        z-index: 9999;
        transition: left 0.3s ease;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }
    
    /* Sidebar aberto */
    .sidebar.open,
    #sidebar.open,
    .apicultor-sidebar.open {
        left: 0;
    }
    
    /* Overlay de fundo */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }
}

/* ============================================
   9. NOTIFICAÇÕES POPUP - MOBILE OTIMIZADO
   ============================================ */
   
   /* ⚠️ NOTA: Estilos de notificação unificados estão em notification-popup.css
    * Estes estilos abaixo são apenas ajustes complementares para mobile
    * NÃO devem sobrescrever o design unificado (header vermelho, etc.)
    */

@media (max-width: 768px) {
    /* Ajustes apenas para tamanho e espaçamento - NÃO alterar cores ou estrutura */
    #geoibram-notification-popup {
        width: 95%;
        max-width: 400px;
        /* border-radius e padding já definidos em notification-popup.css */
    }
    
    /* Ajustes de tipografia apenas - NÃO alterar cores do header */
    #geoibram-notification-popup .geoibram-notification-body-title {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
    }
    
    #geoibram-notification-popup .geoibram-notification-body-message {
        font-size: var(--font-size-base);
        line-height: 1.6;
    }
    
    /* ⚠️ CRÍTICO: NÃO alterar header - design unificado */
    /* Header vermelho é definido em notification-popup.css e deve permanecer */
}

/* ============================================
   10. ESPAÇAMENTO GERAL MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Container Principal */
    .container,
    .main-content {
        padding: var(--spacing-4);
    }
    
    /* Grid Spacing */
    .grid,
    .row {
        gap: var(--spacing-4);
    }
    
    /* Margins */
    .mt-mobile { margin-top: var(--spacing-4); }
    .mb-mobile { margin-bottom: var(--spacing-4); }
    .my-mobile { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
    
    /* Padding */
    .p-mobile { padding: var(--spacing-4); }
    .px-mobile { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
    .py-mobile { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
}

/* ============================================
   11. PERFORMANCE E ANIMAÇÕES
   ============================================ */

@media (max-width: 768px) {
    /* Smooth Transitions */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    button, a, .clickable {
        transition: all 0.2s ease;
    }
    
    button:active, a:active, .clickable:active {
        transform: scale(0.95);
    }
}