/* OVIAPro Global Mobile Responsiveness + Readability Fix
   Scope: CSS/layout/readability only.
   No commission, wallet, rank, centre, payment, withdrawal, database, or automation logic changed. */

/* ---------- Global safety ---------- */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    background: #f4f8fc;
}

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

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

a {
    overflow-wrap: anywhere;
}

p,
span,
small,
strong,
div,
td,
th,
label,
li {
    overflow-wrap: anywhere;
}

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

/* ---------- Layout wrappers ---------- */
.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,
main {
    max-width: 100vw !important;
    min-width: 0 !important;
}

/* ---------- Universal readable cards ---------- */
.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/gradient sections must keep white 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"] {
    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"] * {
    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,
[style*="background: linear-gradient"] p,
[style*="background:linear-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,.88) !important;
}

/* Links/buttons inside dark areas */
.hero a,
.dashboard-hero a,
.admin-hero a,
.control-hero a,
.fintech-hero a,
.wallet-hero a,
.dark-card a,
.dark-panel a,
[class*="hero"] a,
[class*="gradient"] a {
    color: #ffffff !important;
}

/* ---------- Light warning/success/danger cards readable ---------- */
.alert,
.notice,
.warning,
.success,
.danger,
.info,
[class*="warning"],
[class*="success"],
[class*="danger"],
[class*="notice"] {
    color: #0f172a;
}

.badge,
.status,
.pill {
    white-space: normal !important;
    line-height: 1.25;
}

/* ---------- Forms readable and touch-friendly ---------- */
input,
select,
textarea,
button,
.btn,
.button {
    max-width: 100% !important;
    font-size: 16px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

/* ---------- Tables never stretch the full page ---------- */
.table-responsive,
.responsive-table,
.table-wrap,
.admin-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

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

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

/* ---------- Mobile/small screen 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 {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !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-left: 10px !important;
        padding-right: 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"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 12px !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 {
        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-left: 0 !important;
        margin-right: 0 !important;
        padding: 18px !important;
        border-radius: 18px !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;
    }

    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 {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

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

    table,
    .admin-table,
    .data-table {
        width: 100% !important;
        min-width: 640px;
    }

    .table-responsive table,
    .responsive-table table,
    .table-wrap table,
    .admin-table-wrap table {
        min-width: 640px;
    }

    /* If a table is not wrapped, avoid breaking viewport completely */
    body > table,
    main > table,
    .page-content > table,
    .dashboard-content > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Avoid fixed 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"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

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

/* ---------- Extra small phones ---------- */
@media (max-width: 420px) {
    .dashboard-main,
    .admin-main,
    .main-content,
    .page-content,
    .dashboard-content,
    main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

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

    .btn,
    .button,
    button,
    input[type="submit"] {
        width: 100%;
        min-height: 44px;
    }

    .badge,
    .status,
    .pill {
        font-size: 11px !important;
        padding: 6px 9px !important;
    }
}

/* ---------- Emergency contrast overrides for unreadable blends ---------- */
.text-muted,
.muted,
.subtle,
.description {
    color: #64748b !important;
}

.bg-primary .text-muted,
.bg-dark .text-muted,
.dark .text-muted,
[class*="hero"] .text-muted,
[class*="gradient"] .text-muted,
.bg-primary .muted,
.bg-dark .muted,
.dark .muted,
[class*="hero"] .muted,
[class*="gradient"] .muted {
    color: rgba(255,255,255,.82) !important;
}

.text-white,
.white-text {
    color: #ffffff !important;
}

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