/**
 * AraInvoice - Responsive Styles
 * Adaptação automática para diferentes tamanhos de tela
 * Breakpoints: xs(0-640), sm(640-768), md(768-1024), lg(1024-1280), xl(1280+)
 */

/* ========================================
   GLOBAL RESPONSIVE FIXES
   ======================================== */

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

#root {
    width: 100%;
    overflow-x: hidden;
}

/* Previne elementos de quebrar o layout */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ========================================
   MOBILE FIRST - Base Styles (xs: 0-640px)
   ======================================== */

/* Ajustes gerais para mobile */
@media (max-width: 639px) {
    /* Previne overflow horizontal */
    body, html, #root {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Força todos os containers principais a respeitarem a largura da tela */
    .dashboard-container,
    .login-container,
    .invoice-container,
    .stats-grid,
    .charts-grid,
    .charts-container {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* SIDEBAR - Esconde e transforma em menu mobile */
    .sidebar {
        width: 100% !important;
        max-width: 280px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
        z-index: 9998 !important;
    }

    .sidebar.show {
        transform: translateX(0) !important;
    }

    /* Remove margin do main-content em mobile */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Top bar com botão de menu */
    .top-bar {
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Overlay escuro quando sidebar está aberta */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9997 !important;
        display: none !important;
    }

    .sidebar-overlay.show {
        display: block !important;
    }

    /* Botão Hambúrguer Mobile */
    .mobile-menu-btn {
        position: relative;
        z-index: 9999;
    }

    .mobile-menu-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    }

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

    /* Login Card */
    .login-card {
        padding: 24px 20px 32px 20px !important;
        max-width: 90% !important;
        width: 90% !important;
        margin: 0 auto !important;
    }

    .logo-large {
        height: 100px !important;
        margin-bottom: 16px !important;
    }

    .logo-large img {
        width: 250px !important;
        transform: scale(1.05) !important;
    }

    .subtitle {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    .form-input {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .btn-login,
    .btn-primary {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    /* Dashboard Container */
    .dashboard-container {
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Dashboard Header */
    .dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 16px !important;
    }

    .dashboard-title {
        font-size: 20px !important;
    }

    .dashboard-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    /* Navigation */
    .nav-tabs {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .nav-tab {
        width: 100% !important;
        justify-content: center;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Stats Grid - CRÍTICO */
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    .stat-value {
        font-size: 24px !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    /* Charts Container */
    .charts-container,
    .charts-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .chart-card,
    .pdf-chart-card {
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        grid-column: span 1 !important;
    }

    /* Canvas dos gráficos */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Filters Section */
    .dashboard-filters,
    .filters-section {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .filter-group {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .filter-row {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .filter-select,
    .filter-input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Invoice Editor */
    .invoice-editor {
        padding: 16px !important;
    }

    .invoice-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

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

    table {
        font-size: 12px !important;
    }

    th, td {
        padding: 8px 6px !important;
    }

    /* Botões de ação do Dashboard */
    .export-actions,
    .dashboard-actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .export-btn,
    .excel-btn,
    .pdf-btn,
    .refresh-btn {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 60px !important;
    }

    /* Buttons em mobile */
    .button-group {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .button-group button {
        width: 100% !important;
    }

    button, .btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Modal em mobile */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
        max-height: 90vh !important;
        overflow-y: auto;
    }

    /* PDF Preview */
    .pdf-preview-container {
        height: 400px !important;
    }

    /* Ocultar textos longos em mobile */
    .hide-on-mobile {
        display: none !important;
    }

    /* Mostrar ícones apenas */
    .show-icon-only-mobile .btn-text {
        display: none;
    }
}

/* ========================================
   SMALL DEVICES (sm: 640px - 768px)
   ======================================== */
@media (min-width: 640px) and (max-width: 767px) {
    .login-card {
        max-width: 480px !important;
        padding: 28px 36px 40px 36px !important;
    }

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

    .charts-container {
        grid-template-columns: 1fr !important;
    }

    .nav-tabs {
        flex-wrap: wrap;
        gap: 12px;
    }

    .nav-tab {
        min-width: 140px;
    }

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

/* ========================================
   MEDIUM DEVICES - Tablets (md: 768px - 1024px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .dashboard-container {
        padding: 20px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .charts-container,
    .charts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .nav-tabs {
        flex-wrap: wrap;
    }

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

    /* Sidebar condensado em tablet */
    .sidebar {
        width: 220px !important;
    }

    .main-content {
        margin-left: 220px !important;
    }

    .menu-item {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .sidebar-header {
        padding: 24px 16px !important;
    }
}

/* ========================================
   LARGE DEVICES - Desktop (lg: 1024px - 1280px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .dashboard-container {
        padding: 24px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

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

    .invoice-form-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ========================================
   EXTRA LARGE DEVICES (xl: 1280px+)
   ======================================== */
@media (min-width: 1280px) {
    .dashboard-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 32px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

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

    .invoice-form-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Mais espaçamento em telas grandes */
    .section-spacing {
        margin-bottom: 40px;
    }
}

/* ========================================
   ORIENTATION SPECIFIC
   ======================================== */

/* Landscape em mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .login-container {
        padding: 20px 0;
    }

    .login-card {
        max-height: 90vh;
        overflow-y: auto;
    }

    .logo-large {
        height: 60px !important;
    }
}

/* Portrait em tablet */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .charts-container {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Display helpers */
.mobile-only {
    display: none;
}

.tablet-only {
    display: none;
}

.desktop-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }

    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-only {
        display: block;
    }

    .hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }

    .hide-desktop {
        display: none !important;
    }
}

/* ========================================
   CONDITIONAL LAYOUTS
   ======================================== */

/* Container fluido em mobile */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }
}

/* Container com max-width em desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* ========================================
   TOUCHSCREEN OPTIMIZATIONS
   ======================================== */

/* Aumenta área de toque em mobile */
@media (max-width: 767px) {
    button,
    .btn,
    a.clickable {
        min-height: 44px; /* Apple's recommended touch target */
        min-width: 44px;
    }

    /* Espaçamento entre elementos clicáveis */
    .button-group > *:not(:last-child) {
        margin-bottom: 12px;
    }

    /* Links maiores */
    a {
        padding: 4px 0;
    }
}

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

@media print {
    /* Oculta elementos de navegação */
    .nav-tabs,
    .sidebar,
    .filters-section,
    button,
    .btn {
        display: none !important;
    }

    /* Remove backgrounds coloridos */
    body {
        background: white !important;
    }

    /* Otimiza para impressão */
    .dashboard-container,
    .invoice-editor {
        padding: 0 !important;
    }

    /* Força quebra de página adequada */
    .stat-card,
    .chart-card {
        page-break-inside: avoid;
    }
}

/* ========================================
   ACCESSIBILITY - Reduced Motion
   ======================================== */

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

/* ========================================
   DARK MODE PREPARATION (Future)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Quando implementar dark mode, estilos vão aqui */
    /* body.dark-mode { ... } */
}

/* ========================================
   HIGH DPI SCREENS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Imagens de alta resolução */
    .logo-large img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   SPECIFIC COMPONENT RESPONSIVENESS
   ======================================== */

/* Dashboard Filters - Responsivo */
.filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 767px) {
    .filters-container {
        flex-direction: column;
    }

    .filter-item {
        width: 100%;
    }
}

/* Grid de faturas responsivo */
.invoice-grid {
    display: grid;
    gap: 20px;
}

@media (max-width: 639px) {
    .invoice-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .invoice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .invoice-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card hover effects - apenas desktop */
@media (min-width: 1024px) {
    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }
}

/* ========================================
   FONT SCALING
   ======================================== */

/* Base font size scaling */
html {
    font-size: 14px; /* Mobile base */
}

@media (min-width: 768px) {
    html {
        font-size: 15px; /* Tablet base */
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 16px; /* Desktop base */
    }
}

/* ========================================
   SAFE AREA INSETS (iPhone X+)
   ======================================== */

@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .login-card,
    .dashboard-container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* ========================================
   IMPRESSUM FOOTER RESPONSIVENESS
   ======================================== */

/* All screens - Force compact size */
.impressum-footer,
.impressum-footer * {
    font-size: 10px !important;
}

.impressum-content {
    font-size: 10px !important;
}

.impressum-separator {
    font-size: 10px !important;
}

/* Mobile - Impressum */
@media (max-width: 639px) {
    .impressum-footer {
        padding: 8px 12px !important;
    }

    .impressum-content {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .impressum-separator {
        display: none !important;
    }

    /* Login Impressum - Mobile */
    .login-impressum-footer {
        padding: 8px 12px !important;
    }

    .login-impressum-info {
        flex-direction: column !important;
        gap: 3px !important;
    }

    .login-impressum-separator {
        display: none !important;
    }

    .login-impressum-item {
        font-size: 8px !important;
    }
}

/* Tablet - Impressum */
@media (min-width: 640px) and (max-width: 1023px) {
    .impressum-footer {
        padding: 10px 16px !important;
    }

    .impressum-content {
        gap: 12px !important;
    }
}

/* Print - Hide Impressum */
@media print {
    .impressum-footer,
    .login-impressum-footer {
        display: none !important;
    }
}