/* ========================================
   QUINTAL BURGERS - CSS PARA iPAD/TABLETS
   Otimizado para Safari, Chrome, Firefox
   Suporte: iPad Mini, iPad, iPad Air, iPad Pro
   ======================================== */

/* ==========================================
   VARIÁVEIS E RESETS PARA TABLETS
   ========================================== */

/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    input, textarea, select {
        font-size: 16px !important; /* Previne zoom no iOS */
    }
}

/* ==========================================
   DASHBOARD STATS - REGRAS GERAIS
   ========================================== */
.dashboard-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.stat-card {
    flex: 1 1 180px !important;
    min-width: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.stat-card-icon {
    flex-shrink: 0 !important;
}

.stat-card-value {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.stat-card-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* ==========================================
   iPAD PORTRAIT (768px - 1024px)
   iPad Mini, iPad, iPad Air em retrato
   ========================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    /* ===== LAYOUT PRINCIPAL ===== */
    .app-container {
        display: flex !important;
    }
    
    /* Sidebar compacta em tablet */
    .sidebar {
        display: flex !important;
        visibility: visible !important;
        position: fixed !important;
        left: 0 !important;
        width: 220px !important;
        height: 100vh;
        z-index: 100;
    }
    
    .sidebar .brand-logo {
        max-width: 140px;
    }
    
    .sidebar .nav-menu {
        padding: 10px;
    }
    
    .sidebar .nav-item {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .sidebar .nav-item .nav-icon {
        width: 28px;
        font-size: 1rem;
    }
    
    /* Main Content com sidebar */
    .main-content {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
        min-height: 100vh;
    }
    
    /* Ocultar menu mobile bottom em tablets */
    .mobile-bottom-nav {
        display: none !important;
    }
    
    /* Top Bar */
    .top-bar {
        padding: 15px 20px;
        flex-wrap: nowrap;
    }
    
    .page-title h1 {
        font-size: 1.3rem;
    }
    
    /* ===== DASHBOARD ===== */
    .dashboard-content {
        padding: 20px;
        padding-bottom: 30px;
    }
    
    .dashboard-stats {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
    
    .stat-card {
        padding: 15px 12px !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        overflow: hidden !important;
    }
    
    .stat-card-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .stat-card-content {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .stat-card-value {
        font-size: 1.3rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .stat-card-label {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }
    
    .quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px;
    }
    
    .quick-action {
        padding: 25px 15px;
    }
    
    /* ===== PAGE CONTENT ===== */
    .page-content {
        padding: 20px !important;
        padding-bottom: 30px !important;
    }
    
    /* ===== PDV ===== */
    .pdv-container {
        grid-template-columns: 1fr !important;
        gap: 15px;
        height: auto !important;
        min-height: auto;
    }
    
    .products-panel {
        max-height: 50vh;
        min-height: 300px;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 12px !important;
        padding: 15px !important;
    }
    
    .product-card {
        padding: 15px 10px !important;
        min-height: 110px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    
    .product-card-name {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        text-align: center !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    .product-card-price {
        font-size: 1rem !important;
        margin-top: 8px !important;
        font-weight: 600 !important;
    }
    
    .order-panel {
        position: relative !important;
        width: 100% !important;
        max-height: 45vh;
    }
    
    .order-items {
        max-height: 200px;
    }
    
    /* ===== TWO COLUMN LAYOUT ===== */
    .two-col-layout {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .form-panel {
        position: relative !important;
        top: 0 !important;
        order: -1; /* Formulário primeiro */
    }
    
    .list-panel {
        max-height: 50vh;
        overflow-y: auto;
    }
    
    /* ===== GRIDS DE ITEMS ===== */
    .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
        padding: 15px;
        max-height: 45vh;
    }
    
    /* ===== COMANDAS ===== */
    .comandas-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 15px;
    }
    
    .comanda-card {
        padding: 15px;
    }
    
    /* ===== FORMULÁRIOS ===== */
    .form-row,
    .form-inline {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
    
    .form-row-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 14px;
        font-size: 16px;
    }
    
    /* ===== FINANCEIRO ===== */
    .financeiro-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .financeiro-tab {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    
    .stat-card-fin {
        padding: 15px;
    }
    
    .stat-card-fin .value {
        font-size: 1.4rem;
    }
    
    .dre-table td {
        padding: 10px 8px;
    }
    
    .lista-items {
        max-height: 350px;
    }
    
    /* ===== RELATÓRIOS ===== */
    .report-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .report-tab {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .chart-card {
        padding: 15px;
    }
    
    /* ===== CONFIGURAÇÕES ===== */
    .config-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 15px;
        gap: 10px;
    }
    
    .config-tab {
        padding: 12px 18px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .config-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
    
    .theme-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .color-options {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    /* ===== MODAIS ===== */
    .modal {
        width: 90%;
        max-width: 600px;
        max-height: 85vh;
        margin: 20px;
    }
    
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ===== CLIENTES ===== */
    .cliente-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    /* ===== GARÇONS ===== */
    .garcons-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
    
    /* ===== CAIXA ===== */
    .caixa-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .movimentos-lista {
        max-height: 350px;
    }
    
    /* ===== MONITOR IMPRESSÃO ===== */
    .monitor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ===== BOTÕES ===== */
    .btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    .btn-sm {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
    
    .btn-block {
        width: 100%;
    }
    
    /* ===== TABELAS ===== */
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 10px 12px;
    }
    
    /* ===== SCROLL ===== */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--bg-input);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }
}

/* ==========================================
   iPAD LANDSCAPE & iPAD PRO (1025px - 1366px)
   iPad em paisagem, iPad Pro em retrato
   ========================================== */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    
    /* ===== LAYOUT PRINCIPAL ===== */
    .app-container {
        display: flex !important;
    }
    
    /* Sidebar normal */
    .sidebar {
        display: flex !important;
        visibility: visible !important;
        position: fixed !important;
        left: 0 !important;
        width: 260px !important;
        height: 100vh;
    }
    
    .sidebar .brand-logo {
        max-width: 160px;
    }
    
    /* Main Content */
    .main-content {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
    }
    
    /* Ocultar menu mobile */
    .mobile-bottom-nav {
        display: none !important;
    }
    
    /* ===== DASHBOARD ===== */
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px;
    }
    
    .quick-actions {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* ===== PDV ===== */
    .pdv-container {
        grid-template-columns: 1fr 380px !important;
        gap: 20px;
        height: calc(100vh - 140px) !important;
    }
    
    .products-panel {
        max-height: none;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
    
    .order-panel {
        position: relative !important;
        width: 100% !important;
        max-height: none;
    }
    
    /* ===== TWO COLUMN LAYOUT ===== */
    .two-col-layout {
        grid-template-columns: 350px 1fr !important;
        gap: 25px;
    }
    
    .form-panel {
        position: sticky !important;
        top: 100px;
    }
    
    .list-panel {
        max-height: none;
    }
    
    /* ===== GRIDS ===== */
    .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        max-height: 65vh;
    }
    
    .comandas-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    }
    
    /* ===== FORMULÁRIOS ===== */
    .form-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .form-row-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .form-inline {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
    
    /* ===== FINANCEIRO ===== */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .financeiro-tabs {
        flex-wrap: nowrap;
    }
    
    /* ===== CONFIGURAÇÕES ===== */
    .config-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .theme-options {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .color-options {
        grid-template-columns: repeat(8, 1fr) !important;
    }
    
    /* ===== CAIXA ===== */
    .caixa-stats {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* ===== MODAIS ===== */
    .modal {
        width: 85%;
        max-width: 700px;
        max-height: 90vh;
    }
}

/* ==========================================
   iPAD PRO 12.9" LANDSCAPE (1366px+)
   ========================================== */
@media screen and (min-width: 1367px) and (max-width: 1500px) {
    
    .sidebar {
        width: var(--sidebar-width, 280px) !important;
    }
    
    .main-content {
        margin-left: var(--sidebar-width, 280px) !important;
        width: calc(100% - var(--sidebar-width, 280px)) !important;
    }
    
    .pdv-container {
        grid-template-columns: 1fr 420px !important;
    }
    
    .two-col-layout {
        grid-template-columns: 400px 1fr !important;
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .quick-actions {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ==========================================
   ORIENTAÇÃO ESPECÍFICA
   ========================================== */

/* iPad em Retrato - Força layout vertical */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .pdv-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    
    .products-panel {
        max-height: 45vh;
    }
    
    .order-panel {
        max-height: 50vh;
    }
    
    .two-col-layout {
        grid-template-columns: 1fr !important;
    }
}

/* iPad em Paisagem - Layout horizontal */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .pdv-container {
        grid-template-columns: 1fr 400px !important;
        height: calc(100vh - 120px) !important;
    }
    
    .products-panel {
        max-height: none;
    }
    
    .order-panel {
        max-height: none;
    }
}

/* ==========================================
   FIXES ESPECÍFICOS PARA SAFARI/iOS
   ========================================== */
@supports (-webkit-touch-callout: none) {
    /* Fix para 100vh no Safari iOS */
    .main-content {
        min-height: -webkit-fill-available;
    }
    
    .sidebar {
        height: -webkit-fill-available;
    }
    
    /* Fix para position sticky */
    .form-panel {
        position: -webkit-sticky;
        position: sticky;
    }
    
    .top-bar {
        position: -webkit-sticky;
        position: sticky;
    }
    
    /* Fix para flexbox */
    .app-container {
        display: -webkit-flex;
        display: flex;
    }
    
    /* Fix para grids */
    .dashboard-stats,
    .quick-actions,
    .items-grid,
    .comandas-grid,
    .products-grid {
        display: -webkit-grid;
        display: grid;
    }
    
    /* Smooth scroll */
    .lista-items,
    .order-items,
    .products-grid,
    .modal-body,
    .items-grid {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Input zoom fix */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ==========================================
   AJUSTES DE TOUCH PARA TABLETS
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Elementos clicáveis maiores */
    .btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    .nav-item {
        min-height: 48px;
    }
    
    .product-card {
        min-height: 100px;
    }
    
    .comanda-card {
        min-height: 80px;
    }
    
    .category-btn {
        min-height: 44px;
        padding: 10px 18px;
    }
    
    .financeiro-tab,
    .report-tab,
    .config-tab {
        min-height: 48px;
    }
    
    /* Checkboxes maiores */
    input[type="checkbox"] {
        min-width: 24px;
        min-height: 24px;
    }
    
    /* Remover hover effects em touch */
    .stat-card:hover,
    .quick-action:hover,
    .product-card:hover,
    .comanda-card:hover {
        transform: none;
    }
    
    /* Active state para feedback visual */
    .btn:active,
    .nav-item:active,
    .product-card:active,
    .comanda-card:active,
    .quick-action:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ==========================================
   PRINT STYLES PARA iPAD
   ========================================== */
@media print {
    .sidebar,
    .mobile-bottom-nav,
    .top-bar-actions,
    .btn-voltar {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ==========================================
   ACESSIBILIDADE
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible para navegação por teclado */
@media screen and (min-width: 768px) {
    *:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}