/* ==================================================================
 * LIGHT MODE — SmartAICoach pages — AGGRESSIVE override.
 *
 * Many panels inside these pages were authored with inline `style="…"`
 * attributes that bake in dark hex colors. Inline styles win against
 * ordinary CSS, so we use *attribute-substring* selectors + !important
 * to forcibly recolor anything inline-styled with a dark background or
 * white-ish text. This is intentionally broad — narrow rules kept
 * missing edge cases.
 * ================================================================== */
[data-theme="light"] #page-onlyfaith,
[data-theme="light"] #page-podcast,
[data-theme="light"] #page-phone-agent,
[data-theme="light"] #page-train {
    color: #1e293b !important;
    background: transparent !important;
}

/* Recolor ANY element with an inline `background:` whose value contains a
   dark hex (#0…, #1…, #2…) — covers #0b1220, #0f172a, #111827, #1a1a1f,
   #1e293b, #1f2937, #2c2c33, #232333, etc. */
[data-theme="light"] #page-onlyfaith    [style*="background:#0"],
[data-theme="light"] #page-onlyfaith    [style*="background:#1"],
[data-theme="light"] #page-onlyfaith    [style*="background:#2"],
[data-theme="light"] #page-onlyfaith    [style*="background: #0"],
[data-theme="light"] #page-onlyfaith    [style*="background: #1"],
[data-theme="light"] #page-onlyfaith    [style*="background: #2"],
[data-theme="light"] #page-onlyfaith    [style*="background-color:#0"],
[data-theme="light"] #page-onlyfaith    [style*="background-color:#1"],
[data-theme="light"] #page-onlyfaith    [style*="background-color:#2"],
[data-theme="light"] #page-podcast      [style*="background:#0"],
[data-theme="light"] #page-podcast      [style*="background:#1"],
[data-theme="light"] #page-podcast      [style*="background:#2"],
[data-theme="light"] #page-podcast      [style*="background: #0"],
[data-theme="light"] #page-podcast      [style*="background: #1"],
[data-theme="light"] #page-podcast      [style*="background: #2"],
[data-theme="light"] #page-podcast      [style*="background-color:#0"],
[data-theme="light"] #page-podcast      [style*="background-color:#1"],
[data-theme="light"] #page-podcast      [style*="background-color:#2"],
[data-theme="light"] #page-phone-agent  [style*="background:#0"],
[data-theme="light"] #page-phone-agent  [style*="background:#1"],
[data-theme="light"] #page-phone-agent  [style*="background:#2"],
[data-theme="light"] #page-phone-agent  [style*="background: #0"],
[data-theme="light"] #page-phone-agent  [style*="background: #1"],
[data-theme="light"] #page-phone-agent  [style*="background: #2"],
[data-theme="light"] #page-phone-agent  [style*="background-color:#0"],
[data-theme="light"] #page-phone-agent  [style*="background-color:#1"],
[data-theme="light"] #page-phone-agent  [style*="background-color:#2"],
[data-theme="light"] #page-train        [style*="background:#0"],
[data-theme="light"] #page-train        [style*="background:#1"],
[data-theme="light"] #page-train        [style*="background:#2"],
[data-theme="light"] #page-train        [style*="background: #0"],
[data-theme="light"] #page-train        [style*="background: #1"],
[data-theme="light"] #page-train        [style*="background: #2"],
[data-theme="light"] #page-train        [style*="background-color:#0"],
[data-theme="light"] #page-train        [style*="background-color:#1"],
[data-theme="light"] #page-train        [style*="background-color:#2"] {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
}

/* Recolor inline `color:` whites/greys so text stays readable */
[data-theme="light"] #page-onlyfaith    [style*="color:#f"],
[data-theme="light"] #page-onlyfaith    [style*="color:#e"],
[data-theme="light"] #page-onlyfaith    [style*="color:#d"],
[data-theme="light"] #page-onlyfaith    [style*="color:#c"],
[data-theme="light"] #page-onlyfaith    [style*="color: #f"],
[data-theme="light"] #page-onlyfaith    [style*="color: #e"],
[data-theme="light"] #page-onlyfaith    [style*="color: #d"],
[data-theme="light"] #page-onlyfaith    [style*="color: #c"],
[data-theme="light"] #page-onlyfaith    [style*="color:#fff"],
[data-theme="light"] #page-podcast      [style*="color:#f"],
[data-theme="light"] #page-podcast      [style*="color:#e"],
[data-theme="light"] #page-podcast      [style*="color:#d"],
[data-theme="light"] #page-podcast      [style*="color:#c"],
[data-theme="light"] #page-podcast      [style*="color: #f"],
[data-theme="light"] #page-podcast      [style*="color: #e"],
[data-theme="light"] #page-podcast      [style*="color: #d"],
[data-theme="light"] #page-podcast      [style*="color: #c"],
[data-theme="light"] #page-phone-agent  [style*="color:#f"],
[data-theme="light"] #page-phone-agent  [style*="color:#e"],
[data-theme="light"] #page-phone-agent  [style*="color:#d"],
[data-theme="light"] #page-phone-agent  [style*="color:#c"],
[data-theme="light"] #page-phone-agent  [style*="color: #f"],
[data-theme="light"] #page-phone-agent  [style*="color: #e"],
[data-theme="light"] #page-phone-agent  [style*="color: #d"],
[data-theme="light"] #page-phone-agent  [style*="color: #c"],
[data-theme="light"] #page-train        [style*="color:#f"],
[data-theme="light"] #page-train        [style*="color:#e"],
[data-theme="light"] #page-train        [style*="color:#d"],
[data-theme="light"] #page-train        [style*="color:#c"],
[data-theme="light"] #page-train        [style*="color: #f"],
[data-theme="light"] #page-train        [style*="color: #e"],
[data-theme="light"] #page-train        [style*="color: #d"],
[data-theme="light"] #page-train        [style*="color: #c"] {
    color: #1e293b !important;
}

/* Border-color overrides for inline dark borders */
[data-theme="light"] #page-onlyfaith    [style*="border:1px solid #"],
[data-theme="light"] #page-onlyfaith    [style*="border: 1px solid #"],
[data-theme="light"] #page-podcast      [style*="border:1px solid #"],
[data-theme="light"] #page-podcast      [style*="border: 1px solid #"],
[data-theme="light"] #page-phone-agent  [style*="border:1px solid #"],
[data-theme="light"] #page-phone-agent  [style*="border: 1px solid #"],
[data-theme="light"] #page-train        [style*="border:1px solid #"],
[data-theme="light"] #page-train        [style*="border: 1px solid #"] {
    border-color: rgba(100, 116, 139, 0.25) !important;
}

/* ==================================================================
 * LIGHT MODE — SmartAICoach pages (legacy, narrower) — keep below
 * for documentation purposes. The aggressive block above already
 * covers everything.
 * ================================================================== */
 *
 * The four dashboards (#page-onlyfaith, #page-podcast, #page-phone-agent,
 * #page-train) were authored with inline `background: var(--card-bg, #1a1a1f)`
 * styles. The fallback wins under light mode because the dashboards
 * don't declare a light `--card-bg`. These rules force readable colors
 * for cards, borders, text, pills, tabs, and tables.
 * ================================================================== */
[data-theme="light"] #page-onlyfaith,
[data-theme="light"] #page-podcast,
[data-theme="light"] #page-phone-agent,
[data-theme="light"] #page-train {
    color: var(--tc-text-primary, #1e293b);
}

/* Card surfaces — anything using the dark fallback background */
[data-theme="light"] #page-onlyfaith    [style*="background:var(--card-bg"],
[data-theme="light"] #page-onlyfaith    [style*="background: var(--card-bg"],
[data-theme="light"] #page-podcast      [style*="background:var(--card-bg"],
[data-theme="light"] #page-podcast      [style*="background: var(--card-bg"],
[data-theme="light"] #page-phone-agent  [style*="background:var(--card-bg"],
[data-theme="light"] #page-phone-agent  [style*="background: var(--card-bg"],
[data-theme="light"] #page-train        [style*="background:var(--card-bg"],
[data-theme="light"] #page-train        [style*="background: var(--card-bg"] {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(100, 116, 139, 0.22) !important;
    color: #1e293b !important;
}

/* Borders that use the dark fallback */
[data-theme="light"] #page-onlyfaith    [style*="border:1px solid var(--border"],
[data-theme="light"] #page-podcast      [style*="border:1px solid var(--border"],
[data-theme="light"] #page-phone-agent  [style*="border:1px solid var(--border"],
[data-theme="light"] #page-train        [style*="border:1px solid var(--border"] {
    border-color: rgba(100, 116, 139, 0.22) !important;
}

/* Dark literal backgrounds inside these pages (#0b1220 / #111827 / #1f2937 etc.) */
[data-theme="light"] #page-onlyfaith   [style*="background:#0"],
[data-theme="light"] #page-onlyfaith   [style*="background:#1"],
[data-theme="light"] #page-onlyfaith   [style*="background: #0"],
[data-theme="light"] #page-onlyfaith   [style*="background: #1"],
[data-theme="light"] #page-podcast     [style*="background:#0"],
[data-theme="light"] #page-podcast     [style*="background:#1"],
[data-theme="light"] #page-podcast     [style*="background: #0"],
[data-theme="light"] #page-podcast     [style*="background: #1"],
[data-theme="light"] #page-phone-agent [style*="background:#0"],
[data-theme="light"] #page-phone-agent [style*="background:#1"],
[data-theme="light"] #page-phone-agent [style*="background: #0"],
[data-theme="light"] #page-phone-agent [style*="background: #1"],
[data-theme="light"] #page-train       [style*="background:#0"],
[data-theme="light"] #page-train       [style*="background:#1"],
[data-theme="light"] #page-train       [style*="background: #0"],
[data-theme="light"] #page-train       [style*="background: #1"] {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1e293b !important;
}

/* Generic descendant text recolor — make sure dark white text becomes dark
   when its surrounding card is now light. Color the common "muted" greys
   to a readable slate. */
[data-theme="light"] #page-onlyfaith   [style*="color:#cfcfd6"],
[data-theme="light"] #page-onlyfaith   [style*="color:#e5e7eb"],
[data-theme="light"] #page-onlyfaith   [style*="color:#f1f5f9"],
[data-theme="light"] #page-onlyfaith   [style*="color:#fff"],
[data-theme="light"] #page-podcast     [style*="color:#cfcfd6"],
[data-theme="light"] #page-podcast     [style*="color:#e5e7eb"],
[data-theme="light"] #page-podcast     [style*="color:#f1f5f9"],
[data-theme="light"] #page-podcast     [style*="color:#fff"],
[data-theme="light"] #page-phone-agent [style*="color:#cfcfd6"],
[data-theme="light"] #page-phone-agent [style*="color:#e5e7eb"],
[data-theme="light"] #page-phone-agent [style*="color:#f1f5f9"],
[data-theme="light"] #page-phone-agent [style*="color:#fff"],
[data-theme="light"] #page-train       [style*="color:#cfcfd6"],
[data-theme="light"] #page-train       [style*="color:#e5e7eb"],
[data-theme="light"] #page-train       [style*="color:#f1f5f9"],
[data-theme="light"] #page-train       [style*="color:#fff"] {
    color: #1e293b !important;
}

/* Phone Agent custom class surfaces */
[data-theme="light"] #page-phone-agent .pa-card,
[data-theme="light"] #page-phone-agent .pa-section {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(100, 116, 139, 0.22) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] #page-phone-agent .pa-badge,
[data-theme="light"] #page-phone-agent .pa-card-header,
[data-theme="light"] #page-phone-agent .pa-actions,
[data-theme="light"] #page-phone-agent .pa-page-header,
[data-theme="light"] #page-phone-agent .pa-runtime,
[data-theme="light"] #page-phone-agent .pa-stat,
[data-theme="light"] #page-phone-agent .pa-stat-card,
[data-theme="light"] #page-phone-agent label,
[data-theme="light"] #page-phone-agent th,
[data-theme="light"] #page-phone-agent td,
[data-theme="light"] #page-phone-agent h1,
[data-theme="light"] #page-phone-agent h2,
[data-theme="light"] #page-phone-agent h3,
[data-theme="light"] #page-phone-agent .breadcrumb-page,
[data-theme="light"] #page-phone-agent .breadcrumb-item {
    color: #1e293b !important;
}
/* Phone Agent tabs */
[data-theme="light"] #page-phone-agent .pa-tab {
    color: #475569 !important;
    background: transparent !important;
    border-color: rgba(100, 116, 139, 0.22) !important;
}
[data-theme="light"] #page-phone-agent .pa-tab.active {
    color: #1e293b !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}
/* Phone Agent inputs */
[data-theme="light"] #page-phone-agent input,
[data-theme="light"] #page-phone-agent select,
[data-theme="light"] #page-phone-agent textarea {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1e293b !important;
    border: 1px solid rgba(100, 116, 139, 0.28) !important;
}

/* Podcast custom class surfaces */
[data-theme="light"] #page-podcast .pc-card,
[data-theme="light"] #page-podcast .pc-section,
[data-theme="light"] #page-podcast .pc-body > div {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(100, 116, 139, 0.22) !important;
    color: #1e293b !important;
}
[data-theme="light"] #page-podcast .pc-page-header,
[data-theme="light"] #page-podcast label,
[data-theme="light"] #page-podcast h1,
[data-theme="light"] #page-podcast h2,
[data-theme="light"] #page-podcast h3,
[data-theme="light"] #page-podcast th,
[data-theme="light"] #page-podcast td,
[data-theme="light"] #page-podcast .breadcrumb-page,
[data-theme="light"] #page-podcast .breadcrumb-item {
    color: #1e293b !important;
}
[data-theme="light"] #page-podcast input,
[data-theme="light"] #page-podcast select,
[data-theme="light"] #page-podcast textarea {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1e293b !important;
    border: 1px solid rgba(100, 116, 139, 0.28) !important;
}

/* Train surfaces */
[data-theme="light"] #page-train .train-bar,
[data-theme="light"] #page-train [class*="train-panel"],
[data-theme="light"] #page-train [class*="train-card"],
[data-theme="light"] #page-train .train-cat-body {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(100, 116, 139, 0.22) !important;
    color: #1e293b !important;
}
[data-theme="light"] #page-train .train-bar-title,
[data-theme="light"] #page-train label,
[data-theme="light"] #page-train h1,
[data-theme="light"] #page-train h2,
[data-theme="light"] #page-train h3,
[data-theme="light"] #page-train th,
[data-theme="light"] #page-train td,
[data-theme="light"] #page-train .breadcrumb-page,
[data-theme="light"] #page-train .breadcrumb-item,
[data-theme="light"] #page-train pre,
[data-theme="light"] #page-train code {
    color: #1e293b !important;
}
[data-theme="light"] #page-train input,
[data-theme="light"] #page-train select,
[data-theme="light"] #page-train textarea,
[data-theme="light"] #page-train .train-bar-select {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1e293b !important;
    border: 1px solid rgba(100, 116, 139, 0.28) !important;
}
[data-theme="light"] #page-train pre {
    background: #f8fafc !important;
    border: 1px solid rgba(100, 116, 139, 0.18) !important;
}

/* OnlyFaith dashboard stat cards + table */
[data-theme="light"] #page-onlyfaith .stat-card,
[data-theme="light"] #page-onlyfaith .admin-stats > * {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(100, 116, 139, 0.22) !important;
    color: #1e293b !important;
}
[data-theme="light"] #page-onlyfaith .stat-value,
[data-theme="light"] #page-onlyfaith .stat-label,
[data-theme="light"] #page-onlyfaith h1,
[data-theme="light"] #page-onlyfaith h2,
[data-theme="light"] #page-onlyfaith th,
[data-theme="light"] #page-onlyfaith td,
[data-theme="light"] #page-onlyfaith .breadcrumb-page,
[data-theme="light"] #page-onlyfaith .breadcrumb-item,
[data-theme="light"] #page-onlyfaith .of-page-header {
    color: #1e293b !important;
}
[data-theme="light"] #page-onlyfaith #of-calls-table thead tr {
    border-bottom-color: rgba(100, 116, 139, 0.25) !important;
}
[data-theme="light"] #page-onlyfaith #of-calls-table tbody tr {
    border-bottom-color: rgba(100, 116, 139, 0.12) !important;
}
[data-theme="light"] #page-onlyfaith .of-select,
[data-theme="light"] #page-onlyfaith select {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1e293b !important;
    border: 1px solid rgba(100, 116, 139, 0.28) !important;
}

/* SmartAICoach mobile polish.
 *
 * Scoped to the four admin-only page sections:
 *   #page-onlyfaith  (Dashboard, .of-* / .admin-stats)
 *   #page-podcast    (.pc-*)
 *   #page-phone-agent (.pa-* / .pa-tabs)
 *   #page-train      (.train-*)
 *
 * Loaded AFTER pages.css so these rules win cascade order. Desktop styling
 * is untouched — every rule lives inside a max-width media query.
 */

/* ------------------------------------------------------------------
 * Phones (≤ 720px) — most modern devices land here in portrait.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {

    /* Generic page padding + breathing room */
    #page-onlyfaith,
    #page-podcast,
    #page-phone-agent,
    #page-train {
        padding: 12px !important;
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Page headers — tighter type, breadcrumb wraps */
    #page-onlyfaith .page-title,
    #page-podcast .page-title,
    #page-phone-agent .page-title,
    #page-train .page-title,
    #page-onlyfaith .train-bar-title,
    #page-train .train-bar-title {
        font-size: 22px !important;
        line-height: 1.2;
        margin: 4px 0 !important;
    }
    #page-onlyfaith .breadcrumb-page,
    #page-podcast .breadcrumb-page,
    #page-phone-agent .breadcrumb-page,
    #page-train .breadcrumb-page {
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* ============= OnlyFaith Dashboard ============= */
    #page-onlyfaith .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    #page-onlyfaith .stat-card {
        padding: 10px !important;
        min-width: 0;
    }
    #page-onlyfaith .stat-value {
        font-size: 18px !important;
        line-height: 1.1;
    }
    #page-onlyfaith .stat-label,
    #page-onlyfaith .stat-card small {
        font-size: 11px;
        opacity: 0.7;
    }
    #page-onlyfaith .of-page-header {
        margin-bottom: 12px !important;
    }
    #page-onlyfaith .of-banner {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* LLM panel / ComfyUI panel / Memory panel — let them flow */
    #page-onlyfaith #of-llm-panel,
    #page-onlyfaith #of-comfyui-panel,
    #page-onlyfaith #of-mem-panel {
        font-size: 13px;
    }

    /* Memory + Link Health rows / cards — stack */
    #page-onlyfaith [style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    /* …but keep the 2-col stat grid (handled above with !important) */
    #page-onlyfaith .admin-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Recent calls table → horizontal scroll, smaller type */
    #page-onlyfaith #of-calls-table,
    #page-onlyfaith table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 12px !important;
        border-collapse: collapse;
    }
    #page-onlyfaith #of-calls-table thead,
    #page-onlyfaith #of-calls-table tbody {
        display: table;
        width: 100%;
        min-width: 600px;
    }
    #page-onlyfaith #of-calls-table th,
    #page-onlyfaith #of-calls-table td {
        padding: 6px 8px !important;
    }

    /* Buttons in dashboard — full width + tap-friendly */
    #page-onlyfaith button,
    #page-onlyfaith .btn-small,
    #page-onlyfaith .of-select {
        min-height: 40px;
        font-size: 13px;
    }
    #page-onlyfaith .of-select {
        width: 100%;
    }

    /* Feature URL probes grid — single column */
    #page-onlyfaith [class*="feature-probes"],
    #page-onlyfaith [class*="probe-grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    /* ============= Podcast page ============= */
    #page-podcast .pc-page-header {
        margin-bottom: 12px;
    }
    #page-podcast .pc-body {
        padding: 0;
    }
    /* Buttons full-width, big tap target */
    #page-podcast .pc-btn,
    #page-podcast .pc-btn-primary,
    #page-podcast .pc-btn-danger {
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
        margin-bottom: 6px;
    }
    #page-podcast .pc-btn-icon {
        width: 40px;
        height: 40px;
        min-height: 40px;
        flex-shrink: 0;
    }
    /* Forms / rows of inputs — single column */
    #page-podcast .pc-row,
    #page-podcast .pc-grid,
    #page-podcast form > div[style*="grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    #page-podcast input,
    #page-podcast select,
    #page-podcast textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;  /* iOS skips auto-zoom when ≥16px */
    }
    #page-podcast table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Cards / sections — full bleed */
    #page-podcast .pc-card,
    #page-podcast .pc-section {
        padding: 12px !important;
        border-radius: 10px;
    }

    /* ============= Phone Agent page ============= */
    #page-phone-agent .pa-page-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* Tabs scroll horizontally instead of wrapping */
    #page-phone-agent .pa-tabs {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        padding-bottom: 4px;
    }
    #page-phone-agent .pa-tabs::-webkit-scrollbar { display: none; }
    #page-phone-agent .pa-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 14px !important;
        font-size: 13px;
        min-height: 40px;
    }
    /* Cards stack */
    #page-phone-agent .pa-card {
        padding: 12px !important;
        margin-bottom: 10px;
    }
    #page-phone-agent .pa-card-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    #page-phone-agent .pa-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    #page-phone-agent .pa-btn,
    #page-phone-agent .pa-btn-primary,
    #page-phone-agent .pa-btn-secondary {
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }
    #page-phone-agent .pa-actions .pa-btn {
        flex: 1 1 calc(50% - 6px);
        width: auto;
    }
    #page-phone-agent input,
    #page-phone-agent select,
    #page-phone-agent textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }
    /* Tables scroll */
    #page-phone-agent table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 12px;
    }
    /* Labels stack atop inputs */
    #page-phone-agent label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 8px;
    }

    /* ============= Train page ============= */
    /* Top control bar usually crams Title / Model select / Start / Stop / Cleanup */
    #page-train [class*="train-bar"],
    #page-train .train-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    #page-train .train-bar-spacer { display: none; }
    #page-train .train-bar-title {
        flex: 1 1 100%;
    }
    #page-train .train-bar-select,
    #page-train .train-bar-select-model {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
    #page-train .train-btn,
    #page-train .train-btn-start,
    #page-train .train-btn-stop,
    #page-train .train-btn-cleanup,
    #page-train .train-btn-force-stop {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px;
        font-size: 13px;
        padding: 10px 12px;
    }
    /* Categories / panels stack */
    #page-train .train-cat-body,
    #page-train [class*="train-panel"],
    #page-train [class*="train-grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
    }
    /* Tables scroll */
    #page-train table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 12px;
    }
    /* Form inputs */
    #page-train input,
    #page-train select,
    #page-train textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }
    /* Logs / preformatted blocks — let them scroll horizontally */
    #page-train pre,
    #page-train code,
    #page-onlyfaith pre,
    #page-phone-agent pre,
    #page-podcast pre {
        white-space: pre;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 11px;
        padding: 8px;
    }
}

/* ------------------------------------------------------------------
 * Very narrow phones (≤ 430px) — collapse 2-col grids to single col.
 * ------------------------------------------------------------------ */
@media (max-width: 430px) {
    #page-onlyfaith .admin-stats {
        grid-template-columns: 1fr !important;
    }
    #page-phone-agent .pa-actions .pa-btn {
        flex: 1 1 100%;
    }
    #page-train .train-bar-select,
    #page-train .train-bar-select-model,
    #page-train .train-btn {
        flex: 1 1 100%;
    }
    #page-onlyfaith .page-title,
    #page-podcast .page-title,
    #page-phone-agent .page-title,
    #page-train .page-title {
        font-size: 20px !important;
    }
}