/* OVIAPro Affiliate Pages Mobile UI Fix
   Fixes: Notifications hero, Placement Matrix clipping, My Awards responsiveness,
   Purchase Centre hero/action section visibility.
   Scope: CSS only. No business logic changes. */

/* Page-wide mobile containment */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    background: #edf5fb;
    color: #0f172a;
}

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

main,
.page-content,
.dashboard-content,
.content,
.dashboard-main,
.affiliate-main,
.container,
.container-fluid {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* Global card containment */
.card,
.panel,
.dashboard-card,
.affiliate-card,
.metric-card,
.award-card,
.notification-card,
.purchase-card,
.matrix-card,
section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------
   HERO FIX: Notifications / Purchase Centre / Awards
-------------------------------------------------- */
.notification-hero,
.notifications-hero,
.purchase-hero,
.purchase-centre-hero,
.awards-hero,
.award-hero,
.hero,
.dashboard-hero,
[class*="hero"] {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    color: #ffffff !important;
}

/* Add readable overlay on washed-out hero backgrounds */
.notification-hero::before,
.notifications-hero::before,
.purchase-hero::before,
.purchase-centre-hero::before,
.awards-hero::before,
.award-hero::before,
.hero::before,
.dashboard-hero::before,
[class*="hero"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(15,23,42,.76), rgba(37,99,235,.58)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    pointer-events: none;
}

/* If a hero is already dark, this keeps it clean; if it is too light, this makes text visible */
.notification-hero h1,
.notification-hero h2,
.notification-hero h3,
.notification-hero p,
.notification-hero small,
.notifications-hero h1,
.notifications-hero h2,
.notifications-hero h3,
.notifications-hero p,
.notifications-hero small,
.purchase-hero h1,
.purchase-hero h2,
.purchase-hero h3,
.purchase-hero p,
.purchase-hero small,
.purchase-centre-hero h1,
.purchase-centre-hero h2,
.purchase-centre-hero h3,
.purchase-centre-hero p,
.purchase-centre-hero small,
.awards-hero h1,
.awards-hero h2,
.awards-hero h3,
.awards-hero p,
.awards-hero small,
.award-hero h1,
.award-hero h2,
.award-hero h3,
.award-hero p,
.award-hero small,
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero small,
.dashboard-hero h1,
.dashboard-hero h2,
.dashboard-hero h3,
.dashboard-hero p,
.dashboard-hero small,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="hero"] h3,
[class*="hero"] p,
[class*="hero"] small {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.20);
}

/* Hero badges */
.notification-hero .badge,
.notifications-hero .badge,
.purchase-hero .badge,
.purchase-centre-hero .badge,
.awards-hero .badge,
.award-hero .badge,
.hero .badge,
.dashboard-hero .badge,
[class*="hero"] .badge {
    background: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.38) !important;
}

/* Hero buttons: light buttons must have dark text */
.notification-hero a,
.notification-hero button,
.notification-hero .btn,
.notifications-hero a,
.notifications-hero button,
.notifications-hero .btn,
.purchase-hero a,
.purchase-hero button,
.purchase-hero .btn,
.purchase-centre-hero a,
.purchase-centre-hero button,
.purchase-centre-hero .btn,
.awards-hero a,
.awards-hero button,
.awards-hero .btn,
.award-hero a,
.award-hero button,
.award-hero .btn,
.hero a,
.hero button,
.hero .btn,
.dashboard-hero a,
.dashboard-hero button,
.dashboard-hero .btn,
[class*="hero"] a,
[class*="hero"] button,
[class*="hero"] .btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Primary hero button remains blue with white text */
.notification-hero .btn-primary,
.notification-hero .primary,
.notifications-hero .btn-primary,
.notifications-hero .primary,
.purchase-hero .btn-primary,
.purchase-hero .primary,
.purchase-centre-hero .btn-primary,
.purchase-centre-hero .primary,
.awards-hero .btn-primary,
.awards-hero .primary,
.award-hero .btn-primary,
.award-hero .primary,
.hero .btn-primary,
.hero .primary,
.dashboard-hero .btn-primary,
.dashboard-hero .primary,
[class*="hero"] .btn-primary,
[class*="hero"] .primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* --------------------------------------------------
   PLACEMENT MATRIX: prevent clipping
-------------------------------------------------- */
.placement-matrix,
.matrix-wrapper,
.matrix-container,
.network-tree,
.tree-view,
.placement-tree,
.tree-container,
.org-chart,
.orgchart,
#placementMatrix,
#placement-matrix {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px !important;
}

/* The matrix content can be wider but must scroll inside its card, not cut off */
.placement-matrix > *,
.matrix-wrapper > *,
.matrix-container > *,
.network-tree > *,
.tree-view > *,
.placement-tree > *,
.tree-container > *,
.org-chart > *,
.orgchart > *,
#placementMatrix > *,
#placement-matrix > * {
    max-width: none !important;
}

.matrix-card,
.placement-card,
.tree-card {
    overflow: visible !important;
}

@media (max-width: 900px) {
    .placement-matrix,
    .matrix-wrapper,
    .matrix-container,
    .network-tree,
    .tree-view,
    .placement-tree,
    .tree-container,
    .org-chart,
    .orgchart,
    #placementMatrix,
    #placement-matrix {
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #dbe7f3;
    }

    .placement-matrix::after,
    .matrix-wrapper::after,
    .matrix-container::after,
    .network-tree::after,
    .tree-view::after,
    .placement-tree::after,
    .tree-container::after {
        content: "Swipe sideways to view full matrix";
        display: block;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        padding: 8px 10px;
    }
}

/* --------------------------------------------------
   MY AWARDS: responsive sections and table readability
-------------------------------------------------- */
.awards-page,
.my-awards-page,
.award-history,
.award-feed {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.award-history table,
.awards-page table,
.my-awards-page table {
    width: 100%;
}

@media (max-width: 900px) {
    .award-history,
    .award-feed,
    .awards-page .card,
    .my-awards-page .card {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .award-history .table-responsive,
    .awards-page .table-responsive,
    .my-awards-page .table-responsive {
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    .award-history table,
    .awards-page table,
    .my-awards-page table {
        min-width: 640px;
    }
}

/* --------------------------------------------------
   PURCHASE CENTRE: washed-out hero/action area
-------------------------------------------------- */
.purchase-centre-page .hero,
.purchase-centre-page [class*="hero"],
.purchase-page .hero,
.purchase-page [class*="hero"] {
    background: linear-gradient(135deg, #0f172a, #1237c8 55%, #0f766e) !important;
}

.purchase-centre-page .hero .btn,
.purchase-centre-page [class*="hero"] .btn,
.purchase-page .hero .btn,
.purchase-page [class*="hero"] .btn {
    margin-top: 8px;
}

/* --------------------------------------------------
   General mobile fixes
-------------------------------------------------- */
@media (max-width: 900px) {
    main,
    .page-content,
    .dashboard-content,
    .content,
    .dashboard-main,
    .affiliate-main {
        padding: 10px !important;
    }

    .card,
    .panel,
    .dashboard-card,
    .affiliate-card,
    .metric-card,
    .award-card,
    .notification-card,
    .purchase-card,
    .matrix-card,
    section {
        padding: 14px !important;
        border-radius: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .grid,
    [class*="grid"],
    .row,
    .dashboard-grid,
    .cards-grid,
    .summary-grid,
    .metric-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    h1 {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.12 !important;
    }

    h2 {
        font-size: clamp(20px, 6vw, 26px) !important;
        line-height: 1.16 !important;
    }

    h3 {
        font-size: clamp(17px, 5vw, 21px) !important;
        line-height: 1.22 !important;
    }

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

    .hero-actions,
    .actions,
    [class*="hero"] .actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero a,
    .hero button,
    .hero .btn,
    [class*="hero"] a,
    [class*="hero"] button,
    [class*="hero"] .btn {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
}

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

    .card,
    .panel,
    .dashboard-card,
    .affiliate-card,
    .metric-card,
    .award-card,
    .notification-card,
    .purchase-card,
    .matrix-card,
    section {
        padding: 12px !important;
        border-radius: 14px !important;
    }
}