/**
 * Estils responsius per a l'aplicació Pomodoro
 * Adaptació a diferents mides de pantalla i orientacions
 */

/* ===== Pantalles petites (< 400px) ===== */
@media (max-width: 400px) {
    .app-container {
        padding: 12px;
        gap: 14px;
    }

    .app-header h1 {
        font-size: 1.25rem;
    }

    :root {
        --timer-size: 200px;
    }

    .timer-time {
        font-size: 40px;
    }

    .mode-btn {
        padding: 6px 4px;
        gap: 2px;
    }

    .mode-icon {
        font-size: 1rem;
    }

    .mode-label {
        font-size: 0.6rem;
    }

    .session-indicators {
        gap: 20px;
    }

    .indicator-value {
        font-size: 1.1rem;
    }

    .indicator-icon {
        font-size: 1.1rem;
    }

    .controls {
        gap: 10px;
    }

    .control-btn {
        width: 44px;
        height: 44px;
    }

    .control-btn.primary {
        width: 56px;
        height: 56px;
    }

    .install-prompt {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 16px;
        max-width: calc(100% - 20px);
    }
}

/* ===== Pantalles mitjanes (400px - 600px) ===== */
@media (min-width: 401px) and (max-width: 600px) {
    .app-container {
        padding: 24px;
        gap: 24px;
    }

    :root {
        --timer-size: 280px;
    }
}

/* ===== Pantalles grans (> 600px) ===== */
@media (min-width: 601px) {
    .app-container {
        max-width: 600px;
        padding: 32px;
        gap: 28px;
    }

    :root {
        --timer-size: 280px;
    }

    .timer-time {
        font-size: 56px;
    }

    .app-header h1 {
        font-size: 2rem;
    }

    .session-indicators {
        gap: 48px;
    }

    .indicator-value {
        font-size: 1.75rem;
    }

    .indicator-icon {
        font-size: 1.75rem;
    }

    .mode-btn {
        padding: 14px 12px;
    }

    .mode-icon {
        font-size: 1.35rem;
    }

    .mode-label {
        font-size: 0.8rem;
    }
}

/* ===== Mode paisatge en mòbil ===== */
@media (max-height: 600px) and (orientation: landscape) {
    .app-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 900px;
        padding: 16px;
        gap: 16px;
    }

    .app-header {
        order: 1;
        width: 100%;
    }

    .mode-selector {
        order: 2;
        width: auto;
    }

    .timer-container {
        order: 3;
        width: 200px;
        height: 200px;
    }

    .timer-time {
        font-size: 36px;
    }

    .session-indicators {
        order: 4;
        gap: 20px;
    }

    .controls {
        order: 5;
    }

    .control-btn {
        width: 48px;
        height: 48px;
    }

    .control-btn.primary {
        width: 56px;
        height: 56px;
    }
}

/* ===== Safe Areas per a dispositius amb notch ===== */
@supports (padding: max(0px)) {
    .app-container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .install-prompt {
        bottom: max(20px, env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
    }
}

/* ===== Preferència de moviment reduït ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .timer-progress {
        transition: stroke-dashoffset 0.5s linear;
    }

    .timer-progress.running {
        animation: none;
    }
}

/* ===== Mode alt contrast ===== */
@media (prefers-contrast: high) {
    :root {
        --color-bg: #000000;
        --color-bg-secondary: #1a1a1a;
        --color-text: #ffffff;
        --color-text-secondary: #d0d0d0;
        --color-border: #404040;
    }

    .timer-bg {
        stroke: rgba(255, 255, 255, 0.3);
    }

    .mode-btn {
        border: 1px solid var(--color-border);
    }

    .mode-btn.active {
        border-width: 2px;
    }
}

/* ===== Mode fosc/clar segons sistema ===== */
@media (prefers-color-scheme: light) {
    /* Opcional: descomentar per suport de tema clar
    :root {
        --color-bg: #f5f5f5;
        --color-bg-secondary: #e0e0e0;
        --color-text: #1a1a2e;
        --color-text-secondary: #4a4a6a;
        --color-border: #c0c0c0;
    }

    .timer-bg {
        stroke: rgba(0, 0, 0, 0.1);
    }
    */
}

/* ===== Impressió ===== */
@media print {
    .controls,
    .install-prompt,
    .mode-selector {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .timer-time {
        fill: black;
    }
}