/*
 * Edu Mobile Dashboard — mobile-overrides.css
 *
 * PURPOSE
 * -------
 * This stylesheet only fires inside @media (max-width: 768px) blocks.
 * It targets the layout of every shortcode rendered inside the
 * EduSaaS Dashboard shell:
 *
 *   [typing_tutor]        [typing_dashboard]
 *   [mathfluency]         [mf_learn]
 *   [bible_memory]
 *   [cards_books]         [cards_create_book]
 *   [cards_decks]         [cards_create_deck]
 *   [cards_cards]         [cards_create_card]
 *   [study_cards]         [study_dashboard]
 *   [pcb_public_library]
 *   [teacher_dashboard]
 *   [user_credentials]
 *
 * Desktop styles (> 768 px) are NEVER touched.
 * Plugin functionality, JS behaviour, and colour palette are unaffected.
 *
 * Breakpoints used
 * ----------------
 *   ≤ 768 px  — general mobile (tablets in portrait, phones)
 *   ≤ 480 px  — small phones
 */

/* ═══════════════════════════════════════════════════════════
   1. DASHBOARD CHROME — page header, stats row, tabs, frame
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Page header: stack title block above stats pills */
    .esd-page-header {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 16px;
    }

    .esd-page-title {
        font-size: 20px;
    }

    .esd-page-subtitle {
        font-size: 13px;
    }

    /* Stats pills: wrap and fill width evenly */
    .esd-module-stats-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .esd-mini-stat {
        flex: 1 1 calc(50% - 8px);
        min-width: 80px;
        padding: 8px 10px;
    }

    .esd-mini-stat__val {
        font-size: 16px;
    }

    /* Tabs: 2×2 grid so all 4 tabs show without overflowing.
       Also fix .esd-card overflow:hidden which clips the second row. */
    .esd-card {
        overflow: visible;
    }

    .esd-tabs {
        width: 100%;
        box-sizing: border-box;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 4px;
        overflow: visible;
        height: auto;
    }

    .esd-tab {
        width: 100%;
        min-width: 0;
        padding: 8px 4px;
        font-size: 12px;
        white-space: nowrap;
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: unset;
    }

    /* Module frame: remove horizontal padding so content can breathe */
    .esd-module-frame {
        padding: 2px;
        border-radius: 10px;
    }

    /* Progress banner */
    .esd-progress-banner {
        padding: 12px 14px;
        margin-bottom: 14px;
    }

    .esd-progress-banner__label {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════
   2. TYPING TUTOR  [typing_tutor]  [typing_dashboard]
   Root class: .ttm-wrap
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Outer wrapper: clamp to viewport, kill internal overflow bleed */
    .esd-module-frame .ttm-wrap {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 !important;
    }

    /* Panel: tighten padding and contain */
    .esd-module-frame .ttm-panel {
        padding: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Panel header: stack nav and controls vertically */
    .esd-module-frame .ttm-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Header top row (title + search): stack vertically, full width */
    .esd-module-frame .ttm-header > div:first-child {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Search bar: full width, override the hardcoded width:220px.
       font-size must be 16px minimum — iOS Safari zooms on focus if < 16px. */
    .esd-module-frame #ttmSearch {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* Lesson card grid: single column — override minmax(270px,1fr) */
    .esd-module-frame [style*="grid-template-columns:repeat(auto-fill,minmax(270px"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Lesson card itself */
    .esd-module-frame .ttm-lesson-card {
        padding: 12px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Accordion level rows: contain, allow text to wrap */
    .esd-module-frame .ttm-accordion {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Accordion header button: reduce padding and gap to fit narrow screens */
    .esd-module-frame .ttm-acc-header {
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        padding: 14px 12px !important;
        gap: 8px !important;
    }

    /* Level icon: shrink slightly */
    .esd-module-frame .ttm-acc-header > span:first-child {
        font-size: 20px !important;
        flex-shrink: 0 !important;
    }

    /* Text block: allow it to shrink and wrap */
    .esd-module-frame .ttm-acc-header > div[style*="flex:1"] {
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }

    /* Lesson count pill + pass count: allow wrapping */
    .esd-module-frame .ttm-acc-header > div[style*="flex:1"] > div:first-child {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Progress bar column: hide on very narrow screens — the % text is enough */
    .esd-module-frame .ttm-acc-header [style*="min-width:80px"] {
        display: none !important;
    }

    /* Chevron: keep visible, no shrink */
    .esd-module-frame .ttm-acc-header > span:last-child {
        flex-shrink: 0 !important;
        font-size: 18px !important;
    }

    /* Browser panel: no side padding eating into button width */
    .esd-module-frame #ttmBrowser {
        padding: 16px 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Accordion list: full width */
    .esd-module-frame #ttmAccordionList {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Exercise panel stats row: wrap stats */
    .esd-module-frame #ttmExercise > .ttm-header > div:last-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* WPM / Accuracy / Timer tiles: equal small boxes */
    .esd-module-frame #ttmExercise [style*="text-align:center;background"] {
        min-width: 60px !important;
        padding: 8px 12px !important;
        flex: 1 1 auto !important;
    }

    /* Typing text area: ensure it doesn't overflow.
       font-size must be 16px minimum — iOS Safari zooms on focus if < 16px. */
    .esd-module-frame #ttmTextDisplay,
    .esd-module-frame #ttmInput {
        font-size: 16px !important;
        line-height: 1.7 !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Dashboard stats grid: 2 columns instead of 4 */
    .esd-module-frame .ttm-panel [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Dashboard top-line stats: minmax(155px) — 2 cols on mobile */
    .esd-module-frame .ttm-panel [style*="minmax(155px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Category card right-side summary: white-space:nowrap causes overflow */
    .esd-module-frame #ttmDashCats [style*="white-space:nowrap"] {
        white-space: normal !important;
        text-align: left !important;
    }

    /* Category mini-stats grid (1fr 1fr 1fr) already covered by generic
       repeat(3) rule below, but target explicitly for dashboard too */
    .esd-module-frame #ttmDashCats [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr 1fr !important; /* stays 3-col, cells shrink */
        gap: 6px !important;
    }

    /* Settings form 2-col grid → single column */
    .esd-module-frame .ttm-panel [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {

    /* Stats tiles: stack to 1 column on very small phones */
    .esd-module-frame .ttm-panel [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Lesson card stats badges: wrap */
    .esd-module-frame #ttmExercise [style*="display:flex;gap:6px;flex-wrap:wrap"] {
        flex-wrap: wrap !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   3. MATH FLUENCY  [mathfluency]  [mf_learn]
   Root IDs: #mf-app (game), #lmf-app (learn)
   The plugin stylesheet uses !important on everything.
   The JS-built grid sets px widths as inline styles on every
   cell — CSS cannot override those. Instead we make the
   wrapper scroll horizontally and clamp the app to the
   viewport so it never causes page-level overflow.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Hard clamp both app roots to viewport width ── */
    #mf-app,
    #lmf-app {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .mf-panel {
        padding: 16px 12px !important;
        gap: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* ── [mf_learn] overview: grid + "How It Works" flex row.
       The sidebar is flex:0 0 220px — on mobile stack vertically. ── */
    #lmf-panel-overview [style*="display:flex"][style*="gap:20px"][style*="flex-wrap:wrap"] {
        flex-direction: column !important;
    }

    /* "How It Works" sidebar: stop it being a fixed 220px column */
    #lmf-panel-overview [style*="flex:0 0 220px"] {
        flex: 1 1 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Colour grid container: scroll horizontally, don't push page wide */
    #lmf-grid-wrap,
    #mf-grid-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* The grid container (#lmf-learn-grid / .mf-grid-container) sits
       inside the scroll wrapper — leave its JS-injected pixel widths
       alone so cells remain readable; it just scrolls. */
    .mf-grid-container {
        min-width: 420px !important;
    }

    /* Grid + steps parent card: no overflow bleed */
    #lmf-panel-overview [style*="flex:1 1 auto"][style*="min-width:0"] {
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Start / proceed buttons: full width on mobile */
    #lmf-start-btn,
    #lmf-proceed-btn,
    #lmf-fin-btn,
    #lmf-unlock-btn {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
    }

    /* Final results: 2-col summary cards → stack */
    #lmf-panel-final [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Race teaser: stack emoji + text */
    #lmf-rr-teaser {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    /* ── QUIZ PANEL (shared between mf_learn and mathfluency).
       Timer(80px) + Equation + Keypad(150px) total > 400px → stack vertically. ── */

    /* Target the question row by its new class (was inline flex-wrap:nowrap) */
    .mf-question-row,
    #lmf-panel-question [style*="flex-wrap:nowrap"],
    #panel-question [style*="flex-wrap:nowrap"] {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 16px !important;
    }

    /* Scale down the vertical equation digits */
    .mf-eq-vertical {
        min-width: 0 !important;
        font-size: 40px !important;
    }
    .mf-eq-top   { font-size: 40px !important; }
    .mf-eq-b-num { font-size: 40px !important; }
    .mf-eq-op    { font-size: 32px !important; }

    /* Answer row: remove the 320px min-width */
    .mf-eq-answer-row {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    /* Hint digit slot: shrink */
    .mf-correct-hint {
        width: 60px !important;
        font-size: 40px !important;
        flex-shrink: 0 !important;
    }

    /* Answer input */
    .mf-ans-input {
        width: 100px !important;
        font-size: 40px !important;
    }

    /* Keypad: centred, still 3 columns */
    .mf-keypad {
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 auto !important;
    }

    /* ── Results grids ── */
    .mf-results-grid {
        max-width: 100% !important;
        gap: 10px !important;
    }

    /* ── Admin settings ── */
    .mf-admin-grid { grid-template-columns: 1fr !important; }
    .mf-admin-card { padding: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   4. BIBLE MEMORY  [bible_memory]
   Root ID: #bmOuter / #bmWrap
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Outer wrapper: clamp to viewport */
    .esd-module-frame #bmOuter {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .esd-module-frame #bmWrap {
        max-width: 100% !important;
        width: 100% !important;
        padding: 16px 14px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Card containers: tighten padding, contain */
    .esd-module-frame .bm-card {
        padding: 14px 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Nav bar: stack brand above tabs */
    .esd-module-frame .bm-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 0 !important;
    }

    /* Tab row: scrollable single row, no page overflow */
    .esd-module-frame .bm-tabs {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px !important;
    }

    .esd-module-frame .bm-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    /* ── DASHBOARD ── */

    /* Stat grid: 4 col → 2 col */
    .esd-module-frame .bm-stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .esd-module-frame .bm-stat-tile {
        padding: 14px 12px !important;
    }

    .esd-module-frame .bm-tile-val {
        font-size: 22px !important;
    }

    /* Progress rows: pill + bar + count.
       min-width:160px on pill forces row wider than phone — remove it. */
    .esd-module-frame .bm-progress-rows {
        gap: 10px !important;
    }

    .esd-module-frame .bm-prog-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }

    .esd-module-frame .bm-step-pill {
        min-width: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
    }

    .esd-module-frame .bm-bar-track {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .esd-module-frame .bm-bar-n {
        min-width: 0 !important;
        font-size: 12px !important;
    }

    /* ── ADD VERSE / LOOKUP ── */

    /* Selector grid: 5-col (2fr 1fr 1fr 1fr 130px) → stack to single col */
    .esd-module-frame .bm-sel-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Select inputs: font-size 16px to prevent iOS zoom */
    .esd-module-frame .bm-sel,
    .esd-module-frame #bmWrap .bm-sel {
        font-size: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Lookup row flex children: remove fixed min-widths */
    .esd-module-frame .bm-lookup-wrap {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .esd-module-frame .bm-lookup-wrap > div,
    .esd-module-frame [style*="min-width:180px"],
    .esd-module-frame [style*="min-width:170px"] {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Text inputs and textareas: full width, 16px font */
    .esd-module-frame .bm-input,
    .esd-module-frame .bm-input-area,
    .esd-module-frame #bmWrap .bm-input,
    .esd-module-frame #bmWrap textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* Action buttons: full width on mobile */
    .esd-module-frame #bmWrap .bm-btn-primary,
    .esd-module-frame #bmWrap .bm-btn-green,
    .esd-module-frame #bmResult .bm-btn-primary {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* ── COLLECTIONS ── */
    .esd-module-frame .bm-col-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── PRACTICE SESSION ── */

    /* Live stats during practice: wrap to 2-col */
    .esd-module-frame .bm-live-stats {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .esd-module-frame .bm-live-stat {
        flex: 1 1 calc(50% - 8px) !important;
        text-align: center !important;
    }

    /* Back button: full width */
    .esd-module-frame .bm-back-btn {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    /* ── MODALS ── */
    .esd-module-frame .bm-modal-box {
        width: 94vw !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 18px !important;
        box-sizing: border-box !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   5. FLASH CARDS — User Cards Manager
      [cards_books]  [cards_create_book]  [cards_decks]
      [cards_create_deck]  [cards_cards]  [cards_create_card]
   Root classes: .cards-dashboard, .cards-dashboard-wrapper
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .esd-module-frame .cards-dashboard,
    .esd-module-frame .cards-dashboard-wrapper {
        padding: 12px !important;
    }

    /* Header area: stack actions below title */
    .esd-module-frame .cards-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Book / deck card list: single column */
    .esd-module-frame .cards-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Individual book / deck card */
    .esd-module-frame .cards-book-card,
    .esd-module-frame .cards-deck-card {
        padding: 14px !important;
    }

    /* Card action buttons: wrap and fill row */
    .esd-module-frame .cards-book-actions,
    .esd-module-frame .cards-deck-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .esd-module-frame .cards-book-btn,
    .esd-module-frame .cards-deck-btn,
    .esd-module-frame .cards-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Create / edit forms: full width inputs */
    .esd-module-frame .cards-form-container,
    .esd-module-frame .cards-form-wrapper {
        padding: 14px !important;
        max-width: 100% !important;
    }

    .esd-module-frame .cards-form-group input,
    .esd-module-frame .cards-form-group textarea,
    .esd-module-frame .cards-form-group select {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
    }

    /* Modals: full-width on mobile */
    .esd-module-frame .cards-modal-content {
        width: 94vw !important;
        max-width: 100% !important;
        margin: 10px auto !important;
    }

    .esd-module-frame .cards-modal-body {
        padding: 16px !important;
    }

    /* Alert / notification: fill width */
    .esd-module-frame .cards-alert {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   6. STUDY CARDS  [study_cards]  [study_dashboard]
   Key IDs: #studySessionContainer, #studyModeContainer,
            #flashcardMode, #gapfillMode, #typingMode,
            #notificationContainer, #modeFlashcard/Gapfill/Typing
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Session container: drop max-width and side margins ── */
    #studySessionContainer {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Inner white card: tighten padding */
    #studySessionContainer > div {
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* ── Mode buttons + notification: the row with gap:20px.
       On mobile the notification (min-width:250px) squeezes the
       mode buttons into a narrow column. Stack them. ── */
    #studySessionContainer [style*="gap:20px"][style*="align-items:flex-start"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Mode button group: full width row */
    #modeFlashcard,
    #modeGapfill,
    #modeTyping {
        flex: 1 1 0 !important;
        text-align: center !important;
        padding: 10px 6px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    /* Button group wrapper: grid so all 3 share width equally */
    #studySessionContainer [style*="gap:10px"][style*="flex-wrap:wrap"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* Notification container: full width, no min-width */
    #notificationContainer {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Flashcard display area: full width, less padding ── */
    #flashcardMode [style*="min-height:300px"] {
        padding: 24px 16px !important;
        min-height: 200px !important;
        box-sizing: border-box !important;
    }

    /* Correct / Incorrect buttons: fill full width as equal halves */
    #flashcardMode [style*="justify-content:center"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #flashcardMode [onclick*="submitFlashcard(true)"],
    #flashcardMode [onclick*="submitFlashcard(false)"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* ── Gap Fill mode ── */
    #gapfillMode [style*="padding:30px"] {
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    #gapfillMode [onclick*="submitFlashcard(true)"],
    #gapfillMode [onclick*="submitFlashcard(false)"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    #gapfillCheckBtn button { width: 100% !important; }

    /* ── Full Typing mode ── */
    #typingMode [style*="padding:30px"] {
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    #typingMode [onclick*="submitFlashcard(true)"],
    #typingMode [onclick*="submitFlashcard(false)"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    #typingInput {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* must be 16px+ to prevent iOS zoom */
    }

    /* Gap fill inputs: remove fixed 100px width, ensure 16px font */
    .gap-input {
        width: auto !important;
        min-width: 60px !important;
        max-width: 120px !important;
        font-size: 16px !important; /* must be 16px+ to prevent iOS zoom */
        box-sizing: border-box !important;
    }

    /* ── Study mode selector (before session starts) ── */
    #studyModeContainer {
        padding: 16px !important;
    }
    #studyModeContainer [style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* ── Dashboard stats grid ── */
    #overallStatsContainer [style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ── Study header ── */
    .esd-module-frame .study-header,
    #studySessionContainer [style*="justify-content:space-between"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   7. PUBLIC LIBRARY  [pcb_public_library]
   Root class: .pcb-search-container
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Search bar: full width */
    .esd-module-frame .pcb-search-bar-wrap {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .esd-module-frame .pcb-search-input {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
    }

    /* Filter tabs: scrollable single row */
    .esd-module-frame .pcb-filter-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
    }

    .esd-module-frame .pcb-filter-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    /* Book cards: single-column grid */
    .esd-module-frame .pcb-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Library book card */
    .esd-module-frame .pcb-library-book-card {
        padding: 14px !important;
    }

    /* Deck preview row: stack deck cards */
    .esd-module-frame .pcb-deck-preview-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .esd-module-frame .pcb-library-deck-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Card preview: ensure readable */
    .esd-module-frame .pcb-card-preview {
        font-size: 13px !important;
    }

    /* Meta chips: wrap */
    .esd-module-frame .pcb-meta-chip,
    .esd-module-frame .pcb-author-chip {
        font-size: 11px !important;
    }

    /* Favourite + preview buttons */
    .esd-module-frame .pcb-favourite-btn,
    .esd-module-frame .pcb-preview-btn {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }

    .esd-module-frame .pcb-section-title {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   8. TEACHER DASHBOARD  [teacher_dashboard]
   Root classes: .tdp-app, .tdp-dashboard, .tdp-dashboard-wrapper
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Outer wrapper: clamp to viewport */
    .esd-module-frame .tdp-dashboard {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .esd-module-frame .tdp-dashboard-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* ── Top bar: stack left/right vertically, wrap ── */
    .esd-module-frame .tdp-topbar {
        height: auto !important;
        min-height: 60px !important;
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .esd-module-frame .tdp-topbar-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .esd-module-frame .tdp-logo {
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    .esd-module-frame .tdp-teacher-name {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 120px !important;
    }

    .esd-module-frame .tdp-topbar-right {
        flex-shrink: 0 !important;
    }

    /* + Add Student button */
    .esd-module-frame #tdp-add-student-btn,
    .esd-module-frame .tdp-add-student-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* ── Layout: sidebar stacks above main ── */
    .esd-module-frame .tdp-layout {
        flex-direction: column !important;
        min-height: 0 !important;
    }

    /* Sidebar: full width, fixed height strip */
    .esd-module-frame .tdp-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 220px !important;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Main panel: sensible padding */
    .esd-module-frame .tdp-main {
        padding: 16px !important;
        overflow-y: visible !important;
    }

    /* ── Student header: stack avatar + info ── */
    .esd-module-frame .tdp-student-header {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .esd-module-frame .tdp-student-header-actions {
        margin-left: 0 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    /* ── Tabs: scrollable row ── */
    .esd-module-frame .tdp-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px !important;
        gap: 6px !important;
    }

    .esd-module-frame .tdp-tab {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* ── Stat grid: 2 columns ── */
    .esd-module-frame .tdp-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .esd-module-frame .tdp-stat-card {
        padding: 14px !important;
    }

    .esd-module-frame .tdp-stat-value {
        font-size: 22px !important;
    }

    /* ── Section containers: tighten padding ── */
    .esd-module-frame .tdp-section-header {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .esd-module-frame .tdp-section-body {
        padding: 14px 16px !important;
    }

    /* ── Table: horizontal scroll ── */
    .esd-module-frame .tdp-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    .esd-module-frame .tdp-table {
        min-width: 480px !important;
        font-size: 13px !important;
    }

    .esd-module-frame .tdp-table th,
    .esd-module-frame .tdp-table td {
        padding: 10px 10px !important;
    }

    /* ── Buttons ── */
    .esd-module-frame .tdp-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* ── Modals: full width ── */
    .esd-module-frame .tdp-modal {
        width: 94vw !important;
        max-width: 94vw !important;
    }

    .esd-module-frame .tdp-modal-body,
    .esd-module-frame .tdp-modal-header,
    .esd-module-frame .tdp-modal-footer {
        padding: 16px !important;
    }

    .esd-module-frame .tdp-confirm-msg {
        width: 94vw !important;
        max-width: 100% !important;
        padding: 20px !important;
    }

    /* ── Form fields: full width, 16px font ── */
    .esd-module-frame .tdp-field {
        margin-bottom: 14px !important;
    }

    .esd-module-frame .tdp-field input,
    .esd-module-frame .tdp-field textarea,
    .esd-module-frame .tdp-field select {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* ── Empty state ── */
    .esd-module-frame .tdp-empty-state {
        padding: 40px 16px !important;
    }

    .esd-module-frame .tdp-empty-icon {
        font-size: 40px !important;
        margin-bottom: 12px !important;
    }

    .esd-module-frame .tdp-empty-state h3 {
        font-size: 18px !important;
    }

    .esd-module-frame .tdp-empty-state p {
        font-size: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   9. USER CREDENTIALS  [user_credentials]
   Root class: .ucv-card  (inline-rendered inside account page)
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Credentials card: full width, stack rows */
    .esd-module-frame .ucv-card,
    .ucv-card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px !important;
    }

    .ucv-row {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 10px 0 !important;
    }

    .ucv-label {
        font-size: 11px !important;
        min-width: unset !important;
    }

    .ucv-value {
        font-size: 14px !important;
        word-break: break-all !important;
    }

    /* Copy buttons: full-width on small screens */
    .ucv-copy-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin-top: 4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   10. ACCOUNT PAGE — PMS account shortcode wrapper
       [pms-account] rendered inside the account module
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* PMS account wrapper: remove conflicting widths */
    .esd-module-frame .pms-account,
    .esd-module-frame #pms-account {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* PMS form tables: force block layout */
    .esd-module-frame .pms-form table,
    .esd-module-frame .pms-form tr,
    .esd-module-frame .pms-form td,
    .esd-module-frame .pms-form th {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .esd-module-frame .pms-form td:first-child {
        padding-bottom: 4px !important;
        font-weight: 600 !important;
    }

    .esd-module-frame .pms-form input[type="text"],
    .esd-module-frame .pms-form input[type="email"],
    .esd-module-frame .pms-form input[type="password"],
    .esd-module-frame .pms-form select {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
    }

    .esd-module-frame .pms-form .button,
    .esd-module-frame .pms-form input[type="submit"] {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   11. ACCOUNT PAGE
   account.php — outer grid, profile editor, PMS wrapper
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Outer grid: PMS account + credentials (1fr 240px) → stack */
    .esd-content-inner [style*="grid-template-columns:1fr 240px"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Profile editor: 280px sidebar + form → stack */
    .esd-content-inner [style*="grid-template-columns:280px 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Inner form grids: first/last name, password → single column */
    .esd-content-inner #accountFormWrap [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Profile card: reduce padding when stacked */
    .esd-content-inner [style*="text-align:center;padding:32px 24px"] {
        padding: 20px 16px !important;
    }

    /* Account form inputs: 16px minimum to prevent iOS zoom */
    .esd-content-inner .esd-admin-input {
        font-size: 16px !important;
    }

    /* PMS form inputs: ensure 16px */
    .esd-module-frame .pms-form input[type="text"],
    .esd-module-frame .pms-form input[type="email"],
    .esd-module-frame .pms-form input[type="password"],
    .esd-module-frame .pms-form select {
        font-size: 16px !important;
    }

    /* Credentials card: full width when stacked */
    .esd-content-inner .ucv-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Account nav tabs (Subscriptions / Edit Profile / Payments / Logout):
       2 × 2 grid on mobile instead of a horizontal flex row */
    .esd-account-pms-wrap .pms-account-tabs,
    .esd-account-pms-wrap .pms-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        border-bottom: none !important;
        margin-bottom: 16px !important;
        padding-bottom: 0 !important;
    }

    .esd-account-pms-wrap .pms-account-tabs li,
    .esd-account-pms-wrap .pms-tabs li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .esd-account-pms-wrap .pms-account-tabs a,
    .esd-account-pms-wrap .pms-tabs a,
    .esd-account-pms-wrap .pms-account-tabs li a,
    .esd-account-pms-wrap .pms-tabs li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 11px 8px !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    .esd-account-pms-wrap .pms-account-tabs .current a,
    .esd-account-pms-wrap .pms-account-tabs li.active a,
    .esd-account-pms-wrap .pms-tabs .current a,
    .esd-account-pms-wrap .pms-tabs li.active a {
        border-color: #6366f1 !important;
        margin-bottom: 0 !important;
    }

    /* Card header: centre plan name and badge vertically */
    .esd-account-pms-wrap .pms-card-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 20px 16px !important;
        gap: 10px !important;
    }

    /* Card body: reduce 32px side padding to something mobile-friendly */
    .esd-account-pms-wrap .pms-card-body {
        padding: 0 16px !important;
    }

    /* Card rows: label has min-width:160px which overflows on narrow screens.
       Stack label above value instead. */
    .esd-account-pms-wrap .pms-card-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 14px 0 !important;
    }

    .esd-account-pms-wrap .pms-card-label {
        min-width: 0 !important;
        font-size: 0.7rem !important;
    }

    /* Card footer: reduce padding, keep buttons side-by-side */
    .esd-account-pms-wrap .pms-card-footer {
        padding: 14px 16px !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* ACTIONS label: keep on its own line above buttons */
    .esd-account-pms-wrap .pms-card-footer-label {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }

    /* Action buttons: side-by-side, equal width */
    .esd-account-pms-wrap .pms-action-btn,
    .esd-account-pms-wrap a.pms-action-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        min-width: 0 !important;
        padding: 9px 12px !important;
        font-size: 0.85rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   12. ADMIN PANEL
   admin.php — tabs, stats strip, user table, plugin settings
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Admin tabs: full width, horizontal scroll */
    #adminTabs.esd-tabs,
    .esd-content-inner .esd-tabs {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
    }

    .esd-content-inner .esd-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* Stats strip: 2 columns, full width */
    .esd-content-inner .esd-stats-strip,
    .esd-content-inner .esd-stats-strip--compact {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    /* Cards in admin: contain overflow */
    .esd-content-inner .esd-card {
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* User management table: horizontal scroll */
    .esd-content-inner .esd-tab-panel table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    /* hCaptcha settings card: tighten padding */
    .esd-content-inner [style*="background:white;padding:30px;border-radius:12px"] {
        padding: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* All admin inputs: 16px to prevent iOS zoom */
    .esd-content-inner .esd-tab-panel input[type="text"],
    .esd-content-inner .esd-tab-panel input[type="password"],
    .esd-content-inner .esd-tab-panel input[type="number"],
    .esd-content-inner .esd-tab-panel select,
    .esd-content-inner .esd-tab-panel textarea {
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   13. GENERIC SHORTCODE CONTENT GUARD
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* iOS Safari zooms the page on focus when an input/textarea/select
       has font-size < 16px. Apply 16px as a floor across all inputs in
       the dashboard so no interaction ever triggers an unwanted zoom.
       Individual plugin rules may increase this further if needed. */
    .esd-content-inner input,
    .esd-content-inner textarea,
    .esd-content-inner select {
        font-size: 16px !important;
    }

    /* Clamp the content column so nothing can push the page wider.
       overflow-x:hidden here catches any shortcode that injects
       wider-than-viewport content (JS-built grids with px cell sizes,
       etc.) without needing a rule per-plugin. */
    .esd-content,
    .esd-content-inner {
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* The module frame itself: allow inner scroll containers to work */
    .esd-module-frame {
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Any element that needs its own horizontal scroll (grids, tables)
       should use overflow-x:auto on its direct wrapper — we allow that
       by only hiding overflow on the outer containers above. */

    /* Catch-all for direct children */
    .esd-module-frame > *,
    .esd-module-frame > div > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Media: never overflow */
    .esd-module-frame img,
    .esd-module-frame video,
    .esd-module-frame canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tables: horizontal scroll wrapper */
    .esd-module-frame table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    /* Inline hard-coded wide containers */
    .esd-module-frame [style*="width:900px"],
    .esd-module-frame [style*="width:960px"],
    .esd-module-frame [style*="width:800px"],
    .esd-module-frame [style*="max-width:900px"],
    .esd-module-frame [style*="max-width:960px"],
    .esd-module-frame [style*="max-width:800px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Inline 2-col grids */
    .esd-module-frame [style*="grid-template-columns:1fr 1fr"],
    .esd-module-frame [style*="grid-template-columns: 1fr 1fr"],
    .esd-module-frame [style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    .esd-module-frame [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {

    .esd-module-frame [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   14. GUEST SHELL — Register / Login page (shell-guest.php)
   Fixes the register form overflowing to the right on mobile.
   Login page is unaffected.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Constrain the outer form panel to the viewport */
    .esd-guest-form-panel {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 24px 16px !important;
    }

    /* Constrain the form wrap so it never exceeds the panel */
    .esd-guest-form-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* PMS register form card: reduce padding so it fits narrow screens */
    .esd-guest-pane .pms-form,
    .esd-guest-pane form#pms_register-form,
    .esd-guest-pane form#pms_login,
    .esd-guest-pane form#pms_edit-profile-form {
        padding: 20px 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Strip any fixed or min widths on PMS field wrappers */
    .esd-guest-pane .pms-field,
    .esd-guest-pane .pms-field > *,
    .esd-guest-pane .pms-member-form,
    .esd-guest-pane .pms-form-wrapper,
    .esd-guest-pane .pms-member-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* All inputs / selects inside register pane: full width, no overflow */
    .esd-guest-pane input[type="text"],
    .esd-guest-pane input[type="email"],
    .esd-guest-pane input[type="password"],
    .esd-guest-pane input[type="tel"],
    .esd-guest-pane select,
    .esd-guest-pane textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* Subscription plan list: contain within form */
    .esd-guest-pane .pms-subscription-plans,
    .esd-guest-pane .pms-subscription-plan {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Submit button: ensure it never overflows */
    .esd-guest-pane input[type="submit"],
    .esd-guest-pane button[type="submit"],
    .esd-guest-pane .pms-submit {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tab switcher: constrain and prevent overflow */
    .esd-guest-tabs {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   15. GUEST SHELL — iOS zoom prevention
   iOS Safari zooms the viewport on focus when any input has
   font-size < 16px. Override every input in the login,
   register, and lost-password (modal) forms to 16px minimum.
   The inline <style> in shell-guest.php sets 14px with
   !important — this stylesheet loads after it so these rules
   win on source order.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Login pane */
    #pane-login input[type="text"],
    #pane-login input[type="email"],
    #pane-login input[type="password"],
    #pane-login input[type="tel"],
    #pane-login select,
    #pane-login textarea {
        font-size: 16px !important;
    }

    /* Register pane */
    #pane-register input[type="text"],
    #pane-register input[type="email"],
    #pane-register input[type="password"],
    #pane-register input[type="tel"],
    #pane-register select,
    #pane-register textarea {
        font-size: 16px !important;
    }

    /* Lost password modal */
    .esd-modal input[type="text"],
    .esd-modal input[type="email"],
    .esd-modal input[type="password"],
    .esd-modal input[type="tel"],
    .esd-modal select,
    .esd-modal textarea {
        font-size: 16px !important;
    }

    /* Broad catch-all: any input inside the guest body */
    body.esd-guest-body input[type="text"],
    body.esd-guest-body input[type="email"],
    body.esd-guest-body input[type="password"],
    body.esd-guest-body input[type="tel"],
    body.esd-guest-body select,
    body.esd-guest-body textarea {
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   16. ACCOUNT PAGE — PMS tab nav: 2×2 grid on mobile
   Exact class names sourced from paid-member-subscriptions
   plugin + pms-modern-green-theme CSS source files.
   PMS renders the nav as:
     <ul class="pms-account-navigation"> (or pms-member-navigation
     or #pms-account-navigation) with <li> > <a> children.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── The nav <ul> → 2×2 grid ──
       Uses body + id prefix for specificity to beat
       pms-modern-green.css which sets flex-direction:column
       inside its own @media (max-width:768px) block. ── */
    body .esd-account-pms-wrap .pms-account-navigation,
    body .esd-account-pms-wrap .pms-member-navigation,
    body .esd-account-pms-wrap #pms-account-navigation,
    body .esd-account-pms-wrap .pms-account-tabs,
    body .esd-account-pms-wrap ul.pms-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: unset !important;
        gap: 8px !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
        background: transparent !important;
        flex-wrap: unset !important;
    }

    /* ── Each <li>: fill its grid cell ── */
    body .esd-account-pms-wrap .pms-account-navigation li,
    body .esd-account-pms-wrap .pms-member-navigation li,
    body .esd-account-pms-wrap #pms-account-navigation li,
    body .esd-account-pms-wrap ul.pms-tabs li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
        width: 100% !important;
    }

    /* ── Each <a>: full-width button style ── */
    body .esd-account-pms-wrap .pms-account-navigation a,
    body .esd-account-pms-wrap .pms-member-navigation a,
    body .esd-account-pms-wrap #pms-account-navigation a,
    body .esd-account-pms-wrap .pms-account-tabs a,
    body .esd-account-pms-wrap ul.pms-tabs a,
    body .esd-account-pms-wrap ul.pms-tabs li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 12px 8px !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        border-bottom: 1px solid #e5e7eb !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: normal !important;
        margin-bottom: 0 !important;
    }

    /* ── Active tab highlight ── */
    body .esd-account-pms-wrap .pms-account-navigation a.current,
    body .esd-account-pms-wrap .pms-member-navigation a.current,
    body .esd-account-pms-wrap #pms-account-navigation a.current,
    body .esd-account-pms-wrap .pms-account-tabs a.current,
    body .esd-account-pms-wrap ul.pms-tabs li.active a,
    body .esd-account-pms-wrap ul.pms-tabs li a.active,
    body .esd-account-pms-wrap ul.pms-tabs a.current {
        border-color: #6366f1 !important;
        border-bottom-color: #6366f1 !important;
    }
}