/* ================================
   RESPONSIVE DESIGN - Mobile First Approach
   Rio's Mobile Mastery - Phase 2.3
   ================================ */

/* ================================
   MOBILE BASE - 320px to 767px
   ================================ */
@media (max-width: 767px) {
    /* RIO'S MOBILE PERFECTION! */
    body {
        padding: var(--space-2); /* \u05d4\u05e7\u05d8\u05e0\u05d4 \u05de-var(--space-3) */
    }
    
    /* Header Adjustments */
    header {
        padding: var(--space-3) var(--space-4); /* \u05d4\u05e7\u05d8\u05e0\u05d4 */
        margin-bottom: var(--space-4);
    }
    
    .header-title h1 {
        font-size: var(--font-size-lg); /* \u05d9\u05d5\u05ea\u05e8 \u05e7\u05d8\u05df \u05dc-mobile */
    }
    
    .header-title i {
        font-size: var(--font-size-xl); /* \u05d4\u05e7\u05d8\u05e0\u05d4 */
    }
    
    .header-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .btn-export,
    .btn-clear {
        width: 100%;
        justify-content: center;
        padding: var(--space-3) var(--space-4);
    }
    
    /* Summary Cards - Single Column */
    .summary-cards {
        grid-template-columns: 1fr;
        gap: var(--space-3); /* \u05d4\u05e7\u05d8\u05e0\u05d4 gap */
    }
    
    .summary-card {
        padding: var(--space-4); /* \u05d4\u05e7\u05d8\u05e0\u05d4 padding */\n    }
    
    /* \u05ea\u05d9\u05e7\u05d5\u05df: \u05d4\u05e7\u05d8\u05df \u05d0\u05d9\u05e7\u05d5\u05e0\u05d9\u05dd */
    .card-icon {
        width: 50px; /* \u05d4\u05e7\u05d8\u05e0\u05d4 \u05de-70px */
        height: 50px;\n        font-size: var(--font-size-xl); /* \u05d4\u05e7\u05d8\u05e0\u05d4 */
    }
    
    /* \u05ea\u05d9\u05e7\u05d5\u05df: \u05d4\u05e7\u05d8\u05df \u05d8\u05e7\u05e1\u05d8 */
    .card-label {
        font-size: var(--font-size-xs); /* \u05d4\u05e7\u05d8\u05e0\u05d4 */
    }
    
    .card-value {
        font-size: var(--font-size-xl); /* \u05d4\u05e7\u05d8\u05e0\u05d4 \u05de-3xl */
    }
    
    /* Budget Alert - Compact */
    .budget-alert {
        padding: var(--space-4);
        font-size: var(--font-size-base);
    }
    
    .budget-alert i {
        font-size: var(--font-size-xl);
    }
    
    /* FIX: Expenses section header - wrap on mobile */
    .expenses-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .expenses-header h2 {
        font-size: var(--font-size-xl);
    }
    
    /* FIX: Sort buttons - scrollable on mobile */
    .sort-buttons {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    .sort-buttons::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .sort-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ================================
   TABLET - 768px to 1023px
   ================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .charts-section {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================
   DESKTOP - 1024px and above
   ================================ */
@media (min-width: 1024px) {
    .summary-cards {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .charts-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================
   LARGE DESKTOP - 1440px and above
   ================================ */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    
    body {
        padding: var(--space-8);
    }
    
    .summary-card {
        padding: var(--space-8);
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
        font-size: var(--font-size-4xl);
    }
    
    .card-value {
        font-size: var(--font-size-4xl);
    }
}

/* ================================
   TOUCH DEVICES - Enhanced Tap Targets
   ================================ */
@media (hover: none) and (pointer: coarse) {
    /* RIO'S TOUCH PERFECTION - All buttons 44px+ */
    .btn,
    .sort-btn,
    .chart-type-btn,
    .action-btn,
    .mode-btn,
    .btn-save-budget {
        min-height: 44px; /* Apple \u05de\u05de\u05dc\u05d9\u05e5 44px */
        min-width: 44px;
        padding: var(--space-3) var(--space-4); /* \u05e0\u05d5\u05d7 \u05dc\u05dc\u05d7\u05d9\u05e6\u05d4 */
    }
    
    /* Make text inputs taller for easier touch */
    .form-group input,
    .form-group select {
        min-height: 48px; /* \u05d2\u05d1\u05d5\u05d4 \u05d9\u05d5\u05ea\u05e8 \u05dc-touch */
    }
    
    /* Remove hover effects on touch devices */
    .summary-card:hover,
    .chart-container:hover,
    .expense-item:hover {
        transform: none;
    }
    
    /* Always show actions on mobile */
    .expense-actions {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ================================
   OVERFLOW PREVENTION - Nothing escapes!
   ================================ */
@media (max-width: 767px) {
    /* DESIGNER #1: No horizontal scroll! */
    body,
    html {
        overflow-x: hidden; /* \u05d0\u05e1\u05d5\u05e8 \u05d2\u05dc\u05d9\u05dc\u05d4 \u05d0\u05d5\u05e4\u05e7\u05d9\u05ea */
    }
    
    * {
        max-width: 100%; /* \u05e9\u05d5\u05dd \u05d3\u05d1\u05e8 \u05dc\u05d0 \u05e8\u05d7\u05d1 \u05de\u05d9\u05d3\u05d9 */
    }
    
    /* Prevent text overflow */
    h1, h2, h3, p, span, div {
        word-wrap: break-word; /* \u05e9\u05d1\u05d5\u05e8 \u05de\u05d9\u05dc\u05d9\u05dd \u05d0\u05e8\u05d5\u05db\u05d5\u05ea */
        overflow-wrap: break-word;
    }
    
    /* Images should never overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ================================
   PRINT STYLES - PDF Export Ready
   ================================ */
@media print {
    body {
        background: white;
        padding: 0;
    }
    
    .header-actions,
    .tools-floating-menu,
    .currency-modal,
    .expense-actions,
    .chart-export-btn,
    .toggle-advanced {
        display: none !important;
    }
    
    .summary-card,
    .chart-container,
    .expenses-section {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--color-neutral-300);
    }
    
    .expense-item {
        border-bottom: 1px solid var(--color-neutral-200);
    }
}

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

/* ================================
   HIGH CONTRAST MODE - Accessibility
   ================================ */
@media (prefers-contrast: high) {
    :root {
        --color-neutral-200: #d1d5db;
        --color-neutral-300: #9ca3af;
    }
    
    .summary-card,
    .chart-container,
    .expense-item {
        border: 2px solid var(--color-neutral-900);
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ================================
   DARK MODE - Future Ready
   ================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-neutral-50: #1f2937;
        --color-neutral-100: #111827;
        --color-neutral-900: #f9fafb;
        --glass-bg: rgba(31, 41, 55, 0.8);
    }
    
    body {
        background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    }
    
    .summary-card,
    .chart-container,
    .expense-item,
    .add-expense-section {
        background: rgba(31, 41, 55, 0.6);
        color: var(--color-neutral-900);
    }
    
    .form-group input,
    .form-group select {
        background: rgba(17, 24, 39, 0.8);
        color: var(--color-neutral-50);
        border-color: var(--color-neutral-700);
    }
    
    /* Override all text colors to white in dark mode! */
    .card-label,
    .card-value,
    .budget-title,
    .circular-progress-percentage,
    .circular-progress-label,
    .circular-stat-value,
    .circular-stat-label,
    .budget-stat-label,
    .budget-stat-value,
    .progress-percentage,
    .expenses-header h2,
    .sort-btn,
    .date-label,
    .date-total,
    .expense-description,
    .expense-meta,
    .chart-container h3,
    .chart-type-btn,
    .legend-label,
    .legend-value,
    .insight-stat-label,
    .add-expense-section h2,
    .form-group label,
    .mode-btn {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    
    /* Keep orange for active mode button in dark mode */
    .mode-btn.active {
        color: var(--color-warning-500) !important; /* 🧡 כתום גם ב-dark mode */
    }
    
    /* Keep orange for chart type buttons in dark mode */
    .chart-type-btn.active {
        color: var(--color-warning-500) !important; /* 🧡 כתום גם ב-dark mode */
    }
    
    /* Keep orange for sort buttons in dark mode */
    .sort-btn.active {
        color: var(--color-warning-500) !important; /* 🧡 כתום גם ב-dark mode */
    }
    
    .mode-btn:hover:not(.active),
    .sort-btn:hover:not(.active),
    .chart-type-btn:hover:not(.active) {
        color: #f3f4f6 !important;
    }
    
    /* Keep the budget settings box bright and colorful */
    .daily-budget-settings {
        background: linear-gradient(135deg, 
            rgba(16, 185, 129, 0.95) 0%, 
            rgba(139, 92, 246, 0.95) 100%) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    .settings-label,
    .settings-description,
    .currency-symbol {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    
    .budget-settings-input input {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #10b981 !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
}

/* ================================
   LANDSCAPE ORIENTATION - Mobile
   ================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .circular-progress-container {
        width: 150px;
        height: 150px;
    }
}

/* ================================
   NOTCH SUPPORT - iPhone X+
   ================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(var(--space-5), env(safe-area-inset-left));
        padding-right: max(var(--space-5), env(safe-area-inset-right));
        padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
    }
}