/* OVIAPro Mobile Responsive V2
   Fixes small-screen unreadable tables, horizontal overflow, clipped sections,
   poor contrast, and non-responsive affiliate/admin pages.
   Scope: CSS only. No business logic changes. */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    background: #edf5fb;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
    height: auto;
}

body {
    color: #0f172a;
    -webkit-text-size-adjust: 100%;
}

/* Force all major wrappers to viewport */
.app,
.app-shell,
.dashboard-shell,
.dashboard-layout,
.admin-layout,
.main-wrapper,
.page-wrapper,
.content-wrapper,
.dashboard-container,
.dashboard-main,
.admin-main,
.main-content,
.page-content,
.dashboard-content,
.content,
.container,
.container-fluid,
main {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* Common page sections */
.card,
.admin-card,
.dashboard-card,
.panel,
.metric-card,
.kpi-card,
.summary-card,
.stat-card,
.wallet-card,
.opportunity-card,
.centre-card,
.shop-card,
.form-card,
.table-card,
.launch-card,
.alert-card,
.message-card,
section,
fieldset {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
}

/* Keep text readable by default */
.card,
.admin-card,
.dashboard-card,
.panel,
.metric-card,
.kpi-card,
.summary-card,
.stat-card,
.wallet-card,
.opportunity-card,
.centre-card,
.shop-card,
.form-card,
.table-card,
.launch-card,
.alert-card,
.message-card {
    color: #0f172a !important;
}

.card p,
.admin-card p,
.dashboard-card p,
.panel p,
.metric-card p,
.kpi-card p,
.summary-card p,
.stat-card p,
.wallet-card p,
.opportunity-card p,
.centre-card p,
.shop-card p,
.form-card p,
.table-card p,
.launch-card p,
.alert-card p,
.message-card p,
.card small,
.admin-card small,
.dashboard-card small,
.panel small {
    color: #475569 !important;
}

/* Dark/blue/gradient areas must use light text */
.hero,
.dashboard-hero,
.admin-hero,
.control-hero,
.fintech-hero,
.wallet-hero,
.dark-card,
.dark-panel,
[class*="hero"],
[class*="gradient"],
[style*="background: linear-gradient"],
[style*="background:linear-gradient"],
[style*="background-color: #0"],
[style*="background:#0"],
[style*="background-color:#0"],
[style*="background: #0"],
[style*="background:#1"],
[style*="background: #1"],
[style*="background:#2"],
[style*="background: #2"] {
    color: #ffffff !important;
}

.hero *,
.dashboard-hero *,
.admin-hero *,
.control-hero *,
.fintech-hero *,
.wallet-hero *,
.dark-card *,
.dark-panel *,
[class*="hero"] *,
[class*="gradient"] *,
[style*="background: linear-gradient"] *,
[style*="background:linear-gradient"] *,
[style*="background-color: #0"] *,
[style*="background:#0"] *,
[style*="background-color:#0"] *,
[style*="background: #0"] *,
[style*="background:#1"] *,
[style*="background: #1"] *,
[style*="background:#2"] *,
[style*="background: #2"] * {
    color: inherit !important;
}

.hero p,
.dashboard-hero p,
.admin-hero p,
.control-hero p,
.fintech-hero p,
.wallet-hero p,
.dark-card p,
.dark-panel p,
[class*="hero"] p,
[class*="gradient"] p,
.hero small,
.dashboard-hero small,
.admin-hero small,
.control-hero small,
.fintech-hero small,
.wallet-hero small,
[class*="hero"] small,
[class*="gradient"] small {
    color: rgba(255, 255, 255, .9) !important;
}

/* Prevent accidental white text on white cards */
.card .text-white:not(.badge):not(.status):not(.pill),
.admin-card .text-white:not(.badge):not(.status):not(.pill),
.dashboard-card .text-white:not(.badge):not(.status):not(.pill),
.panel .text-white:not(.badge):not(.status):not(.pill) {
    color: #0f172a !important;
}

/* Forms */
input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 11px 12px !important;
}

button,
.btn,
.button,
input[type="submit"] {
    max-width: 100%;
    min-height: 42px;
    border-radius: 12px;
}

label {
    color: #334155 !important;
    font-weight: 800;
}

/* Generic responsive grids */
.dashboard-grid,
.admin-metrics,
.metric-grid,
.kpi-grid,
.summary-grid,
.content-grid,
.admin-two-col,
.dashboard-two-col,
.cards-grid,
.quick-actions,
.action-grid,
.admin-actions,
.row,
.grid,
[class*="grid"] {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Desktop table baseline */
.table-responsive,
.responsive-table,
.table-wrap,
.admin-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table,
.admin-table,
.data-table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td,
.admin-table th,
.admin-table td,
.data-table th,
.data-table td {
    color: #0f172a;
    vertical-align: top;
}

/* Mobile layout */
@media (max-width: 900px) {
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .app,
    .app-shell,
    .dashboard-shell,
    .dashboard-layout,
    .admin-layout,
    .main-wrapper,
    .page-wrapper,
    .content-wrapper,
    .container,
    .container-fluid {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-main,
    .admin-main,
    .main-content,
    .page-content,
    .dashboard-content,
    .content,
    main {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow-x: hidden !important;
    }

    .dashboard-grid,
    .admin-metrics,
    .metric-grid,
    .kpi-grid,
    .summary-grid,
    .content-grid,
    .admin-two-col,
    .dashboard-two-col,
    .cards-grid,
    .quick-actions,
    .action-grid,
    .admin-actions,
    .row,
    .grid,
    [class*="grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .card,
    .admin-card,
    .dashboard-card,
    .panel,
    .metric-card,
    .kpi-card,
    .summary-card,
    .stat-card,
    .wallet-card,
    .opportunity-card,
    .centre-card,
    .shop-card,
    .form-card,
    .table-card,
    .launch-card,
    .alert-card,
    .message-card,
    section,
    fieldset {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .topbar,
    .admin-topbar,
    .page-header,
    .dashboard-header,
    .dashboard-hero,
    .admin-hero,
    .control-hero,
    .hero,
    [class*="hero"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 18px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .topbar,
    .admin-topbar,
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    h1 {
        font-size: clamp(22px, 7vw, 30px) !important;
        line-height: 1.12 !important;
        letter-spacing: -.04em;
    }

    h2 {
        font-size: clamp(18px, 5.6vw, 24px) !important;
        line-height: 1.18 !important;
    }

    h3 {
        font-size: clamp(16px, 5vw, 20px) !important;
        line-height: 1.2 !important;
    }

    p,
    li,
    td,
    th,
    label,
    input,
    select,
    textarea,
    button,
    .btn,
    .button {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    small {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    /* Make normal tables readable as cards on mobile */
    table.ovia-mobile-carded,
    .ovia-mobile-carded {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    table.ovia-mobile-carded thead,
    .ovia-mobile-carded thead {
        display: none !important;
    }

    table.ovia-mobile-carded tbody,
    table.ovia-mobile-carded tr,
    table.ovia-mobile-carded td,
    .ovia-mobile-carded tbody,
    .ovia-mobile-carded tr,
    .ovia-mobile-carded td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table.ovia-mobile-carded tr,
    .ovia-mobile-carded tr {
        background: #ffffff !important;
        border: 1px solid #dbe7f3 !important;
        border-radius: 16px !important;
        margin: 0 0 12px !important;
        padding: 10px !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    table.ovia-mobile-carded td,
    .ovia-mobile-carded td {
        border: 0 !important;
        border-bottom: 1px solid #edf3f9 !important;
        padding: 9px 4px !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: left !important;
    }

    table.ovia-mobile-carded td:last-child,
    .ovia-mobile-carded td:last-child {
        border-bottom: 0 !important;
    }

    table.ovia-mobile-carded td::before,
    .ovia-mobile-carded td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    /* Tables that cannot be carded should scroll inside their own box */
    .table-responsive:not(.ovia-force-cards),
    .responsive-table:not(.ovia-force-cards),
    .table-wrap:not(.ovia-force-cards),
    .admin-table-wrap:not(.ovia-force-cards) {
        overflow-x: auto !important;
        max-width: 100% !important;
        border-radius: 14px;
    }

    .table-responsive:not(.ovia-force-cards) table:not(.ovia-mobile-carded),
    .responsive-table:not(.ovia-force-cards) table:not(.ovia-mobile-carded),
    .table-wrap:not(.ovia-force-cards) table:not(.ovia-mobile-carded),
    .admin-table-wrap:not(.ovia-force-cards) table:not(.ovia-mobile-carded) {
        min-width: 680px;
    }

    /* Direct unwrapped tables become carded too */
    main > table,
    .page-content > table,
    .dashboard-content > table,
    .admin-main > table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* Hard reset common desktop widths */
    [style*="width: 1200px"],
    [style*="width:1200px"],
    [style*="min-width: 1200px"],
    [style*="min-width:1200px"],
    [style*="width: 1000px"],
    [style*="width:1000px"],
    [style*="min-width: 1000px"],
    [style*="min-width:1000px"],
    [style*="width: 900px"],
    [style*="width:900px"],
    [style*="min-width: 900px"],
    [style*="min-width:900px"],
    [style*="width: 800px"],
    [style*="width:800px"],
    [style*="min-width: 800px"],
    [style*="min-width:800px"],
    [style*="width: 700px"],
    [style*="width:700px"],
    [style*="min-width: 700px"],
    [style*="min-width:700px"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .overflow-auto,
    .overflow-scroll {
        max-width: 100% !important;
    }
}

@media (max-width: 420px) {
    .dashboard-main,
    .admin-main,
    .main-content,
    .page-content,
    .dashboard-content,
    main {
        padding: 8px !important;
    }

    .card,
    .admin-card,
    .dashboard-card,
    .panel,
    .metric-card,
    .kpi-card,
    .summary-card,
    .stat-card,
    .wallet-card,
    .opportunity-card,
    .centre-card,
    .shop-card,
    .form-card,
    .table-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    button,
    .btn,
    .button,
    input[type="submit"] {
        width: 100%;
    }

    .badge,
    .status,
    .pill {
        white-space: normal !important;
        font-size: 11px !important;
        padding: 6px 9px !important;
        line-height: 1.25 !important;
    }
}