/* OVIAPro UI Contrast + Mobile V3 Fix
   Fixes unreadable hero buttons/links, wide sections, clipped cards, and mobile overflow.
   Scope: CSS only. No business logic changed. */

/* ---------- global viewport safety ---------- */
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%;
}

a,
button,
.btn,
.button {
    -webkit-tap-highlight-color: transparent;
}

/* ---------- force main wrappers to fit screen ---------- */
.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;
}

/* ---------- readable normal 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,
section,
fieldset {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
}

.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;
}

/* ---------- HERO / dark/gradient sections ---------- */
.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;
    overflow: hidden !important;
}

.hero h1,
.hero h2,
.hero h3,
.dashboard-hero h1,
.dashboard-hero h2,
.dashboard-hero h3,
.admin-hero h1,
.admin-hero h2,
.admin-hero h3,
.control-hero h1,
.control-hero h2,
.control-hero h3,
.fintech-hero h1,
.fintech-hero h2,
.fintech-hero h3,
.wallet-hero h1,
.wallet-hero h2,
.wallet-hero h3,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="hero"] h3,
[class*="gradient"] h1,
[class*="gradient"] h2,
[class*="gradient"] h3 {
    color: #ffffff !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, .90) !important;
}

/* ---------- CRITICAL: hero links/buttons readable ---------- */
/* White/light buttons in dark heroes must have dark text. */
.hero a,
.hero button,
.hero .btn,
.hero .button,
.dashboard-hero a,
.dashboard-hero button,
.dashboard-hero .btn,
.dashboard-hero .button,
.admin-hero a,
.admin-hero button,
.admin-hero .btn,
.admin-hero .button,
.control-hero a,
.control-hero button,
.control-hero .btn,
.control-hero .button,
.fintech-hero a,
.fintech-hero button,
.fintech-hero .btn,
.fintech-hero .button,
.wallet-hero a,
.wallet-hero button,
.wallet-hero .btn,
.wallet-hero .button,
[class*="hero"] a,
[class*="hero"] button,
[class*="hero"] .btn,
[class*="hero"] .button,
[class*="gradient"] a,
[class*="gradient"] button,
[class*="gradient"] .btn,
[class*="gradient"] .button {
    border-radius: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* If hero button has white or light background, force dark readable text */
.hero a:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.hero button:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.hero .btn:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.dashboard-hero a:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.dashboard-hero button:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.dashboard-hero .btn:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.admin-hero a:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.admin-hero button:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.admin-hero .btn:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.control-hero a:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.control-hero button:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.control-hero .btn:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.wallet-hero a:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.wallet-hero button:not(.btn-primary):not(.primary):not(.logout):not(.danger),
.wallet-hero .btn:not(.btn-primary):not(.primary):not(.logout):not(.danger),
[class*="hero"] a:not(.btn-primary):not(.primary):not(.logout):not(.danger),
[class*="hero"] button:not(.btn-primary):not(.primary):not(.logout):not(.danger),
[class*="hero"] .btn:not(.btn-primary):not(.primary):not(.logout):not(.danger),
[class*="gradient"] a:not(.btn-primary):not(.primary):not(.logout):not(.danger),
[class*="gradient"] button:not(.btn-primary):not(.primary):not(.logout):not(.danger),
[class*="gradient"] .btn:not(.btn-primary):not(.primary):not(.logout):not(.danger) {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.18) !important;
}

/* Primary/dark hero actions */
.hero .btn-primary,
.hero .primary,
.hero button.primary,
.hero a.primary,
.dashboard-hero .btn-primary,
.dashboard-hero .primary,
.admin-hero .btn-primary,
.admin-hero .primary,
.control-hero .btn-primary,
.control-hero .primary,
.wallet-hero .btn-primary,
.wallet-hero .primary,
[class*="hero"] .btn-primary,
[class*="hero"] .primary,
[class*="gradient"] .btn-primary,
[class*="gradient"] .primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* Text inside hero buttons must inherit button color, not force white */
.hero a *,
.hero button *,
.hero .btn *,
.hero .button *,
.dashboard-hero a *,
.dashboard-hero button *,
.dashboard-hero .btn *,
.admin-hero a *,
.admin-hero button *,
.admin-hero .btn *,
.control-hero a *,
.control-hero button *,
.control-hero .btn *,
.wallet-hero a *,
.wallet-hero button *,
.wallet-hero .btn *,
[class*="hero"] a *,
[class*="hero"] button *,
[class*="hero"] .btn *,
[class*="gradient"] a *,
[class*="gradient"] button *,
[class*="gradient"] .btn * {
    color: inherit !important;
}

/* ---------- Avoid invisible white text on white cards ---------- */
.card .text-white:not(.badge):not(.status):not(.pill):not(.btn):not(.button),
.admin-card .text-white:not(.badge):not(.status):not(.pill):not(.btn):not(.button),
.dashboard-card .text-white:not(.badge):not(.status):not(.pill):not(.btn):not(.button),
.panel .text-white:not(.badge):not(.status):not(.pill):not(.btn):not(.button) {
    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;
}

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

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

/* ---------- Tables ---------- */
.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;
        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: 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;
        overflow: hidden;
    }

    .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;
    }

    /* Hero action buttons should stack cleanly */
    .hero .actions,
    .dashboard-hero .actions,
    .admin-hero .actions,
    .control-hero .actions,
    .wallet-hero .actions,
    [class*="hero"] .actions,
    .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 12px !important;
    }

    .hero a,
    .hero button,
    .hero .btn,
    .dashboard-hero a,
    .dashboard-hero button,
    .dashboard-hero .btn,
    .admin-hero a,
    .admin-hero button,
    .admin-hero .btn,
    .control-hero a,
    .control-hero button,
    .control-hero .btn,
    .wallet-hero a,
    .wallet-hero button,
    .wallet-hero .btn,
    [class*="hero"] a,
    [class*="hero"] button,
    [class*="hero"] .btn {
        max-width: 100% !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Mobile table card mode */
    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;
    }

    .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;
    }

    [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;
    }
}

@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%;
    }
}