/**
 * Mobile Responsive Fixes - 320px Baseline
 * For Arbeitszeit Helden
 *
 * Purpose: Ensure AdSense mobile-friendly compliance
 * - Prevents horizontal scroll (overflow-x: hidden)
 * - Enforces 48x48px minimum touch targets
 * - Optimizes layout for 320px viewport (iPhone SE)
 *
 * Load after: glassmorphism.css, main.css, footer.css
 */

/* ============================================
   OVERFLOW PROTECTION
   Prevents horizontal scroll on all viewports
   ============================================ */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Safe container width */
main.container,
.timer-panel,
.calculator-panel,
.ah-glass-panel,
.history-calendar,
.modal-content {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure box-sizing globally */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================
   320px BASELINE (iPhone SE, small Android)
   ============================================ */

@media (max-width: 359px) {
    /* Timer display readable */
    .timer-display {
        font-size: 2.5rem;
        padding: 12px;
        letter-spacing: 0.05em;
    }

    /* Tab buttons: full-width, meet 48px height */
    .tab-navigation {
        gap: 3px;
        padding: 6px;
    }

    .tab-navigation button {
        padding: 10px 12px;
        font-size: 0.75rem;
        min-height: 48px;
        flex: 1 1 calc(50% - 4px); /* 2 per row */
        min-width: 0;
    }

    /* Timer controls stack vertically, full-width */
    .timer-controls {
        flex-direction: column;
        gap: 6px;
    }

    .timer-controls button {
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
    }

    /* Calculator panel padding reduction */
    .calculator-panel,
    .timer-panel {
        padding: 16px;
        margin: 10px 8px;
        border-radius: 12px;
    }

    /* Result display */
    .result-value {
        font-size: 1.75rem;
    }

    .result-highlight {
        padding: 12px 20px;
    }

    /* Calendar grid compact */
    .calendar-header span {
        font-size: 0.65rem;
    }

    .calendar-day {
        font-size: 0.7rem;
        min-height: 36px;
    }

    .calendar-day .activity-dot {
        width: 3px;
        height: 3px;
    }

    /* Header compact */
    .ah-header-title h1 {
        font-size: 1rem;
    }

    .ah-header-tagline {
        display: none;
    }

    /* History stats stack */
    .history-stats {
        grid-template-columns: 1fr;
    }

    /* Settings inputs full-width */
    .setting-item input[type="number"],
    .setting-item input[type="range"] {
        width: 100%;
    }

    /* Modal full-width */
    .modal-content {
        width: 95%;
        padding: 16px;
        margin: 10px;
    }

    /* Input fields 48px height */
    .input-group input,
    .input-group select,
    .time-selects select {
        min-height: 48px;
        padding: 12px;
    }

    /* Buttons minimum touch target */
    .btn-primary,
    .btn-secondary,
    .btn-settings,
    .btn-calculate {
        min-height: 48px;
        padding: 12px 20px;
    }

    /* Footer badges stack */
    .ah-footer-badges {
        flex-direction: column;
        gap: 8px;
    }

    .ah-footer-badge {
        width: 100%;
        max-width: none;
        justify-content: center;
    }

    /* Footer grid single column */
    .ah-footer-grid {
        grid-template-columns: 1fr;
    }
}