/**
 * African mobile-first form layout — stack multi-field rows on narrow screens
 * so labels, inputs, toggles, and actions never fight for horizontal space.
 * Loaded after theme + mobile-responsive.css.
 */

@media (max-width: 768px) {
    /* ── Business / personal funnel editors ─────────────────────────────── */
    .cbl-row,
    .cbl-row-3,
    .cpl-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cbl-types,
    .cpl-types {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .cbl-templates {
        grid-template-columns: 1fr !important;
    }

    .cbl-toggle-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cbl-toggle-row .cbl-toggle {
        align-self: flex-end;
    }

    .cbl-colorpick {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        max-width: 100%;
    }

    .cbl-colorpick input[type="color"] {
        align-self: flex-start;
    }

    .cbl-colorpick input[type="text"] {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .cbl-profile-photo-row,
    .cpl-profile-photo-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cbl-profile-photo-upload,
    .cpl-profile-photo-upload {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .cbl-profile-photo-preview,
    .cpl-profile-photo-preview {
        align-self: center;
    }

    .cbl-offer-card__bar,
    .cbl-bonus-card__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cbl-offer-card-remove,
    .cbl-bonus-remove {
        align-self: flex-start;
        min-height: 44px;
        padding: 8px 12px;
    }

    .cbl-ditem {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .cbl-dfile-wrap {
        width: 100%;
    }

    .cbl-actions,
    .cpl-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .cbl-actions > *,
    .cpl-actions > * {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
        box-sizing: border-box;
    }

    .cbl-domain-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cbl-domain-actions > * {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    .cbl-team-grid {
        grid-template-columns: 1fr !important;
    }

    .cbl-media-tabstrip {
        grid-template-columns: 1fr;
    }

    .cbl-mtab {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
        min-height: 48px;
    }

    .cbl-mtab:last-child {
        border-bottom: none;
    }

    .cbl-media-split--images {
        grid-template-columns: 1fr !important;
    }

    .cbl-gallery-grid {
        justify-content: center;
    }

    .cbl-hero-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Card headers with step number + long title */
    .cbl-card h3,
    .cpl-card h3 {
        flex-wrap: wrap;
        gap: 8px;
        line-height: 1.35;
    }

    /* ── Premium templates / page flow (inside business editor) ─────────── */
    #launch-premium-templates-root .pt-block-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #launch-premium-templates-root .pt-block-actions {
        width: 100%;
        flex-direction: column;
    }

    #launch-premium-templates-root .pt-block-actions .btn {
        width: 100%;
        flex: 1 1 auto;
        min-height: 44px;
    }

    #launch-premium-templates-root .pt-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #launch-premium-templates-root .pt-actions .btn,
    #launch-premium-templates-root #pt-clear {
        width: 100%;
        flex: 1 1 auto;
    }

    .lpt-flow-toolbar,
    .cbl-page-flow-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .lpt-flow-toolbar > *,
    .cbl-page-flow-toolbar > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ── Dashboard forms & headers ──────────────────────────────────────── */
    .chart-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .chart-head .legend-chip,
    .chart-head .escrow-chip,
    .chart-head .wallet-chip {
        align-self: flex-start;
    }

    .wallet-mini-grid {
        grid-template-columns: 1fr !important;
    }

    .financial-records-grid {
        grid-template-columns: 1fr !important;
    }

    .rate-toggle {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .support-hub-split {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Deal chat: sidebar + deal panel below thread on phones */
    .tp-deal-chat {
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .tp-deal-chat__sidebar,
    .tp-deal-chat__deal {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .tp-deal-chat__main {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Inline flex rows that used fixed min-width (editors, admin filters) */
    .dash-main [style*="min-width:200px"],
    .dash-main [style*="min-width: 200px"],
    .cbl-page [style*="min-width:200px"],
    .cbl-page [style*="min-width: 200px"],
    .cpl-page [style*="min-width:200px"],
    .cpl-page [style*="min-width: 200px"] {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .cbl-type-lbl,
    .cpl-type-lbl {
        padding: 16px 12px;
    }

    .cbl-type-lbl .desc,
    .cpl-type-lbl .desc {
        white-space: normal;
        line-height: 1.4;
    }
}