/* ═══════════════════════════════════════════════════════════════════
   training-mobile.css
   Global mobile-responsive overrides for all Training / Comms pages.
   Add to wwwroot/css/ and reference in App.razor / _Host.cshtml
════════════════════════════════════════════════════════════════════ */

/* ── 1. Page header rows (title + action button) ────────────────── */
/* Make them wrap vertically on small screens */
.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.page-header-row .mud-button {
    white-space: nowrap;
}

/* ── 2. Card action rows (chips + icon buttons) ─────────────────── */
.card-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── 3. Stat/KPI chip rows ──────────────────────────────────────── */
.stat-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* ── 4. Tables — ensure MudTable DataLabel columns show on mobile ── */
@media (max-width: 600px) {

    /* Reduce page padding */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Paper cards inside lists — reduce padding */
    .mobile-card {
        padding: 12px !important;
    }

    /* Stack horizontal MudStack rows vertically */
    .mobile-stack-col {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Hide secondary/decorative text on very small screens */
    .mobile-hide {
        display: none !important;
    }

    /* Full width buttons on mobile */
    .mobile-full-btn .mud-button {
        width: 100%;
    }

    /* Reduce heading size */
    .mud-typography-h4 {
        font-size: 1.4rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.2rem !important;
    }

    /* Avatar size reduction */
    .mud-avatar-large {
        width: 40px !important;
        height: 40px !important;
    }

    /* Tab text — shorten on mobile (icon-only handled by MudBlazor) */
    .mud-tab-text {
        font-size: 0.7rem !important;
    }

    /* Training coordinator dashboard KPI grid */
    .kpi-grid .mud-grid-item {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    /* Quiz result score ring */
    .quiz-score-ring {
        max-width: 100% !important;
    }

    /* Transcript identity card — stack stats */
    .transcript-stats {
        flex-wrap: wrap !important;
        gap: 16px;
    }

    /* Learning path step rows */
    .path-step-row {
        flex-direction: column !important;
        gap: 8px;
    }
}

@media (max-width: 400px) {
    .mud-typography-h4 {
        font-size: 1.2rem !important;
    }

    .mud-chip {
        font-size: 0.65rem !important;
    }
}