/**
 * Fáze 6 – mobilní UX miniaplikací (společné styly).
 */

@media (max-width: 640px) {
    .login-page {
        padding: 5rem max(0.75rem, env(safe-area-inset-left)) 2rem;
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    .login-form {
        padding: 1.25rem;
    }

    .login-form .btn {
        min-height: 48px;
        font-size: 1rem;
    }
}

/* —— Seznam miniaplikací —— */
@media (max-width: 600px) {
    .miniapp-page-header {
        padding: 5rem max(0.75rem, env(safe-area-inset-left)) 1rem;
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    .miniapp-page-header .section-title {
        font-size: clamp(1.2rem, 5.5vw, 1.65rem);
        line-height: 1.2;
    }

    .miniapp-intro {
        font-size: 0.88rem;
    }

    .miniapp-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
    }

    .miniapp-section-block {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        margin-bottom: 2rem;
    }

    .miniapp-tile {
        padding: 1.15rem 1rem;
        min-height: 44px;
    }

    .miniapp-edit-btn {
        min-height: 40px;
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }

    .miniapp-user-bar {
        flex-direction: column;
        align-items: flex-start;
        margin-left: max(0.75rem, env(safe-area-inset-left));
        margin-right: max(0.75rem, env(safe-area-inset-right));
    }

    #miniapp-profile {
        margin-left: max(0.75rem, env(safe-area-inset-left)) !important;
        margin-right: max(0.75rem, env(safe-area-inset-right)) !important;
        max-width: none !important;
    }

    #miniapp-profile input[type="password"],
    #miniapp-profile .btn {
        min-height: 44px;
        font-size: 16px;
    }

    .miniapp-modal-overlay {
        align-items: flex-end;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .miniapp-modal-overlay .miniapp-modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        max-height: min(92dvh, 92vh);
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }

    .miniapp-modal .btn-primary,
    .miniapp-modal .btn-ghost {
        min-height: 44px;
        flex: 1;
    }

    .miniapp-modal-actions {
        flex-direction: column-reverse;
    }

    .miniapp-icon-grid {
        max-height: 140px;
    }
}

@media (hover: none) {
    .miniapp-tile-wrap:hover .miniapp-tile {
        transform: none;
        box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    }
}

/* —— Rozpočet —— */
@media (max-width: 640px) {
    .budget-header {
        flex-direction: column;
        align-items: stretch;
    }

    .budget-header h1 {
        font-size: 1.35rem;
    }

    .budget-header-controls {
        width: 100%;
        gap: 0.5rem;
    }

    .month-nav {
        width: 100%;
    }

    .month-nav select {
        flex: 1;
        min-width: 0;
        font-size: 16px;
    }

    .budget-header-controls > .btn {
        flex: 1 1 auto;
        min-width: calc(50% - 0.25rem);
    }

    .selection-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .selection-summary__right {
        width: 100%;
    }

    .selection-summary__right .btn {
        width: 100%;
    }

    .dashboard-block {
        min-width: 0;
        flex: 1 1 100%;
    }

    .dashboard-debt-row {
        flex-direction: column;
    }

    .status-bar {
        font-size: 0.85rem;
    }
}

/* —— Tréninkový deník —— */
@media (max-width: 600px) {
    .training-log-page .modal-overlay {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .training-log-page .modal-overlay .modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        max-height: min(88dvh, calc(100dvh - env(safe-area-inset-bottom, 0px) - 0.5rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }

    .training-log-page .modal-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .training-log-page .modal-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .training-log-page .btn,
    .training-log-page .btn-small {
        min-height: 44px;
    }

    .training-log-page .calendar-nav-btn {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .training-log-page .calendar-compact .calendar-grid {
        max-width: 100%;
    }

    .training-log-page .history-item {
        flex-direction: column;
        align-items: stretch;
    }

    .training-log-page .card input[type="text"],
    .training-log-page .card input[type="number"],
    .training-log-page .card select {
        font-size: 16px;
        min-height: 44px;
    }
}