/* ================================================================================
   ONE LINE A DAY JOURNAL - RESPONSIVE STYLES
   Mobile-first responsive design
   ================================================================================ */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    .app-container {
        padding: var(--spacing-md);
    }

    .app-header {
        padding: var(--spacing-md) 0;
        margin-bottom: var(--spacing-lg);
    }

    .app-title {
        font-size: 1.5rem;
    }

    .entry-section,
    .calendar-section {
        padding: var(--spacing-lg);
    }

    .date-display {
        font-size: 1rem;
    }

    .entry-input {
        min-height: 100px;
        font-size: 0.9375rem;
    }

    .calendar-title {
        font-size: 1.125rem;
    }

    .calendar-day {
        font-size: 0.875rem;
    }

    .modal-content {
        max-width: 100%;
        max-height: 95vh;
    }

    .modal-header,
    .modal-body {
        padding: var(--spacing-lg);
    }

    .modal-header h2 {
        font-size: 1.25rem;
    }

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

    .button-group {
        flex-direction: column;
    }

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

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .app-container {
        padding: var(--spacing-sm);
    }

    .app-header {
        padding: var(--spacing-sm) 0;
    }

    .app-title {
        font-size: 1.25rem;
    }

    .header-actions {
        gap: var(--spacing-xs);
    }

    .icon-btn {
        width: 32px;
        height: 32px;
    }

    .entry-section,
    .calendar-section {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }

    .date-display {
        font-size: 0.9375rem;
        margin-bottom: var(--spacing-md);
    }

    .entry-input {
        padding: var(--spacing-sm);
        min-height: 90px;
    }

    .entry-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .calendar-header {
        margin-bottom: var(--spacing-md);
    }

    .calendar-title {
        font-size: 1rem;
    }

    .nav-btn {
        width: 32px;
        height: 32px;
    }

    .calendar-grid {
        gap: 2px;
    }

    .calendar-day-header {
        font-size: 0.6875rem;
        padding: var(--spacing-xs);
    }

    .calendar-day {
        font-size: 0.8125rem;
    }

    .calendar-day.has-entry::after {
        width: 3px;
        height: 3px;
        bottom: 3px;
    }

    .modal {
        padding: var(--spacing-sm);
    }

    .modal-header,
    .modal-body {
        padding: var(--spacing-md);
    }

    .modal-header h2 {
        font-size: 1.125rem;
    }

    .close-btn {
        width: 32px;
        height: 32px;
        font-size: 1.5rem;
    }

    .past-entry-text {
        font-size: 1rem;
    }

    .settings-section {
        margin-bottom: var(--spacing-xl);
    }

    .settings-section h3 {
        font-size: 1rem;
    }

    .section-icon {
        font-size: 1.25rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .insights-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .insights-header h3 {
        font-size: 1rem;
    }

    .insights-content {
        padding: var(--spacing-md);
        font-size: 0.9375rem;
    }

    .toast {
        bottom: var(--spacing-md);
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        transform: none;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }

    @keyframes slideUpFade {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Large screens (1200px and above) */
@media (min-width: 1200px) {
    .app-container {
        max-width: 1000px;
    }

    .entry-section,
    .calendar-section {
        padding: var(--spacing-2xl);
    }

    .calendar-grid {
        gap: var(--spacing-sm);
    }
}

/* Print styles */
@media print {
    .app-header,
    .header-actions,
    .settings-btn,
    .icon-btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .nav-btn,
    .modal,
    .toast {
        display: none !important;
    }

    .app-container {
        max-width: 100%;
        padding: 0;
    }

    .entry-section,
    .calendar-section {
        box-shadow: none;
        border: 1px solid var(--color-border);
        page-break-inside: avoid;
    }

    .calendar-day {
        border: 1px solid var(--color-border);
    }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-border: #000000;
        --text-primary: #000000;
        --bg-surface: #FFFFFF;
    }

    [data-theme="dark"] {
        --color-border: #FFFFFF;
        --text-primary: #FFFFFF;
        --bg-surface: #000000;
    }

    .entry-input,
    .text-input {
        border-width: 2px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        border-width: 2px;
    }
}

/* ================================================================================
   PWA & iOS SAFE AREA SUPPORT
   ================================================================================ */

/* iOS safe areas (notch, home indicator) */
@supports (padding: env(safe-area-inset-top)) {
    .app-container {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .app-header {
        padding-top: calc(var(--spacing-md) + env(safe-area-inset-top));
    }

    .toast {
        bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
    }

    .modal {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* PWA standalone mode adjustments */
@media (display-mode: standalone) {
    .app-header {
        padding-top: var(--spacing-lg);
    }

    body {
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }
}

/* Touch target sizing — minimum 44px per Apple HIG */
@media (pointer: coarse) {
    .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .calendar-day {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mood-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        min-height: 44px;
        padding: 12px 20px;
    }

    .close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Prevent double-tap zoom on interactive elements */
    button, a, input, select, textarea {
        touch-action: manipulation;
    }
}

/* Prevent pull-to-refresh in PWA mode */
html, body {
    overscroll-behavior-y: contain;
}

/* Smooth scrolling for iOS momentum */
.modal-body,
.app-container {
    -webkit-overflow-scrolling: touch;
}

/* Fix iOS input zoom (font-size must be >= 16px) */
@media (max-width: 768px) {
    .entry-input,
    .text-input,
    input[type="text"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}