/*
 * CMS Theme Polish
 * Shared finishing layer for every user, admin, and auth template.
 *
 * The individual templates still own their visual identity.  This file
 * standardises the things that should feel consistent everywhere:
 * usable content width, overflow behaviour, focus states, responsive grids,
 * readable controls, and mobile navigation.
 */

:root {
    --polish-content-max: 1680px;
    --polish-gutter: clamp(14px, 2.2vw, 34px);
    --sidebar-gap: 0px;
    --polish-card-radius: var(--ui-radius-lg, 18px);
    --polish-line: var(--box-line, var(--line, #e2e8f0));
    --polish-muted: var(--text-muted, #64748b);
    --polish-ink: var(--chip-text, #1e293b);
    --polish-surface: var(--chip-bg, #ffffff);

    /* Bootstrap defaults text to a hard-coded near-black (--bs-body-color:
       #212529) which ignores the active theme. Point it at the theme's own
       ink so components that inherit it (e.g. form-control-plaintext used
       for "Amount to Pay", form-control/form-select text, tables) stay
       readable in every layout and dark mode. */
    --bs-body-color: var(--polish-ink);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    isolation: isolate;
    color: var(--polish-ink);
}

/* Desktop content no longer gets an unexplained narrow strip on wide screens.
   The glass and luxe layouts used a second sidebar offset, which caused
   content to overflow on tablet widths. */
.main-content {
    width: min(calc(100% - var(--sidebar-w, 240px) - var(--sidebar-gap)), var(--polish-content-max));
    max-width: none !important;
    min-width: 0;
    margin-left: calc(var(--sidebar-w, 240px) + var(--sidebar-gap));
    margin-right: auto;
}

.main-content > * {
    min-width: 0;
}

.topbar {
    min-width: 0;
}

.topbar h5 {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Rows are allowed to shrink instead of creating a horizontal scrollbar. */
.row {
    --bs-gutter-x: clamp(1rem, 1.8vw, 1.5rem);
    --bs-gutter-y: clamp(1rem, 1.8vw, 1.5rem);
}

.row > [class*="col-"] {
    min-width: 0;
}

.row.g-3 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.row.g-3 > [class*="col-"] > .card,
.row.g-3 > [class*="col-"] > .stat-card,
.row.g-3 > [class*="col-"] > .wallet-card {
    width: 100%;
}

/* Flex columns stretch their children by default. Keep referral QR frames
   wrapped tightly around the code instead of stretching across the column. */
.qr-frame {
    align-self: center;
    width: fit-content;
    max-width: 100%;
}

/* Long tables and code-like values scroll inside their own region. */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.table-responsive > .table {
    min-width: 640px;
    margin-bottom: 0;
}

.table th,
.table td {
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.table th {
    white-space: nowrap;
}

pre,
.text-break,
.referral-box,
.wallet-address,
[class*="address"],
[class*="hash"] {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep cards visually consistent when a view contains a form, chart, or table. */
.card,
.stat-card,
.wallet-card {
    min-width: 0;
    border-radius: var(--polish-card-radius);
}

.form-control,
.form-select,
.input-group-text {
    min-height: 42px;
}

.form-control::placeholder {
    opacity: .72;
}

button,
.btn {
    min-height: 38px;
}

.btn-sm {
    min-height: 32px;
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    opacity: .62;
}

/* Consistent treatment for notification, status, and empty states. */
.alert {
    display: flow-root;
    overflow-wrap: anywhere;
}

.badge {
    white-space: normal;
    line-height: 1.25;
}

.empty-state {
    min-height: 160px;
    display: grid;
    place-content: center;
}

/* Charts should never force their parent wider than the viewport. */
.chart-wrap,
.chart-container,
canvas {
    max-width: 100%;
}

.chart-wrap {
    position: relative;
}

/* Make the active menu state obvious without changing any template palette. */
.sidebar a {
    min-height: 42px;
}

.sidebar a:focus-visible,
.topbar a:focus-visible,
.mobile-menu-toggle:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb, 99, 102, 241), .35);
    outline-offset: 2px;
}

.sidebar hr {
    opacity: .55;
}

/* Admin dark themes use translucent report surfaces just like the user panel.
   Keep the skin-specific colors while making cards, tables, and nested
   report boxes visually lighter and less blocky. */
body.admin-translucent-theme.admin-skin-glass {
    --admin-panel-bg: rgba(255, 255, 255, .06);
    --admin-panel-border: rgba(255, 255, 255, .12);
}

body.admin-translucent-theme.admin-skin-dark-pro {
    --admin-panel-bg: rgba(15, 23, 42, .72);
    --admin-panel-border: rgba(148, 163, 184, .18);
}

body.admin-translucent-theme.admin-skin-luxe {
    --admin-panel-bg: rgba(13, 16, 28, .72);
    --admin-panel-border: rgba(255, 255, 255, .12);
}

body.admin-translucent-theme .stat-card,
body.admin-translucent-theme .card,
body.admin-translucent-theme .table-responsive,
body.admin-translucent-theme .list-group,
body.admin-translucent-theme .list-group-item,
body.admin-translucent-theme .dropdown-menu,
body.admin-translucent-theme .modal-content {
    background: var(--admin-panel-bg) !important;
    border-color: var(--admin-panel-border) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.admin-translucent-theme .table,
body.admin-translucent-theme .table > :not(caption) > *,
body.admin-translucent-theme .table > :not(caption) > * > * {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    background-color: transparent !important;
}

body.admin-translucent-theme .table-hover > tbody > tr:hover > *,
body.admin-translucent-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--primary-rgb, 99, 102, 241), .09) !important;
}

body.admin-translucent-theme .list-group-item.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    border-color: transparent !important;
    color: var(--btn-ink) !important;
}

/* Glass and Luxe are translucent, blurred-glass themes that are already
   dark by design (user AND admin panels). The dark-mode client toggle
   (base.css, body.px-dark) flattens the sidebar/topbar/cards to a solid
   panel color for every theme so text stays readable on the classic/
   modern/minimal/corporate light themes — but on Glass/Luxe that would
   throw away the signature blur. Restore it here (this file loads last,
   so it wins the tie against body.px-dark in base.css). */
body.px-dark.layout-glass .sidebar,
body.px-dark.layout-glass .topbar,
body.px-dark.layout-glass .card,
body.px-dark.layout-glass .stat-card,
body.px-dark.layout-glass .wallet-card,
body.px-dark.layout-glass .modal-content {
    background: var(--glass-bg, rgba(255, 255, 255, .06)) !important;
    border-color: var(--glass-border, rgba(255, 255, 255, .12)) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

body.px-dark.layout-luxe .sidebar,
body.px-dark.layout-luxe .topbar,
body.px-dark.layout-luxe .card,
body.px-dark.layout-luxe .stat-card,
body.px-dark.layout-luxe .wallet-card,
body.px-dark.layout-luxe .modal-content {
    background: rgba(13, 16, 28, .72) !important;
    border-color: var(--glass-border, rgba(255, 255, 255, .12)) !important;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}

/* Auth pages share the same readable controls and mobile gutters. */
.auth-shell,
.auth-page,
.auth-container,
.auth-card {
    min-width: 0;
}

/* Tablet and mobile layout guardrails. */
@media (max-width: 1199.98px) {
    .main-content {
        width: calc(100% - var(--sidebar-w, 240px) - var(--sidebar-gap));
    }
}

@media (max-width: 991.98px) {
    .main-content {
        width: 100%;
        margin-left: 0 !important;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar h5 {
        flex: 1 1 220px;
    }

    .topbar .user-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 767.98px) {
    .row.g-3 > [class*="col-"] {
        display: block;
    }

    .stat-card,
    .card,
    .wallet-card {
        padding: clamp(16px, 4vw, 22px) !important;
    }

    .table-responsive > .table {
        min-width: 560px;
    }

    .btn-toolbar,
    .section-title,
    .d-flex.justify-content-between {
        flex-wrap: wrap;
    }

    .btn-toolbar > *,
    .section-title > * {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .topbar {
        gap: 8px;
    }

    .topbar .user-chip {
        width: 100%;
        justify-content: flex-start;
    }

    .table-responsive > .table {
        min-width: 500px;
    }

    .form-actions,
    form .d-flex.justify-content-between,
    form .d-flex.justify-content-end {
        align-items: stretch !important;
        flex-direction: column;
    }

    .form-actions .btn,
    form .d-flex.justify-content-between .btn,
    form .d-flex.justify-content-end .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* ============================================================
   Premium visual pass — shared across user/admin/auth layouts
   Keeps existing structure and functionality; visual-only layer.
   ============================================================ */
:root {
    --premium-radius: clamp(14px, 1vw, 20px);
    --premium-shadow: 0 14px 38px rgba(15, 23, 42, .08);
    --premium-shadow-hover: 0 20px 48px rgba(15, 23, 42, .13);
    --premium-border: color-mix(in srgb, var(--polish-line) 78%, transparent);
}

/* A cleaner page rhythm without changing the existing layout grid. */
.main-content {
    padding-top: clamp(18px, 2.2vw, 30px);
    padding-bottom: clamp(24px, 3vw, 44px);
}

/* Cards: stronger hierarchy, restrained depth, cleaner edges. */
.card,
.stat-card,
.wallet-card {
    border: 1px solid var(--premium-border, rgba(148,163,184,.22));
    border-radius: var(--premium-radius, 18px);
    box-shadow: var(--premium-shadow);
    background: var(--polish-surface, #fff);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover,
.stat-card:hover,
.wallet-card:hover {
    box-shadow: var(--premium-shadow-hover);
}

/* Don't make dense data tables jump on hover. */
.table tbody tr {
    transition: background-color .14s ease;
}
.table tbody tr:hover {
    background: color-mix(in srgb, var(--primary, #667eea) 5%, transparent);
}

/* Stat cards get a subtle accent rail instead of loud gradients. */
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--primary, #667eea);
    opacity: .75;
}

/* Section headings read more like product UI than plain Bootstrap headings. */
.section-title,
.card-header,
.topbar {
    border-color: var(--premium-border, rgba(148,163,184,.22));
}

.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5,
.section-title h6,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    letter-spacing: -.02em;
}

/* Buttons: slightly more substantial, still compatible with Bootstrap. */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.btn-primary {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary, #667eea) 20%, transparent);
}

/* Inputs: clearer focus and better perceived quality. */
.form-control,
.form-select,
.input-group-text {
    border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary, #667eea) 15%, transparent);
}

/* Pills/badges look intentional rather than default Bootstrap. */
.badge {
    border-radius: 999px;
    padding: .42em .68em;
    font-weight: 650;
}

/* Charts and QR areas get a clean presentation frame. */
.chart-wrap,
.qr-frame {
    border-radius: var(--premium-radius, 18px);
}
.qr-frame {
    padding: clamp(10px, 1vw, 16px);
    background: #fff;
    border: 1px solid rgba(148,163,184,.22);
    box-shadow: 0 10px 30px rgba(15,23,42,.07);
}

/* Sidebar/navigation polish where the existing layouts expose these hooks. */
.sidebar .nav-link,
.admin-sidebar .nav-link,
.user-sidebar .nav-link {
    border-radius: 10px;
    margin: 2px 8px;
    transition: background-color .15s ease, transform .15s ease;
}
.sidebar .nav-link:hover,
.admin-sidebar .nav-link:hover,
.user-sidebar .nav-link:hover {
    transform: translateX(2px);
}

/* Topbar feels separated without becoming another heavy card. */
.topbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Empty states should look deliberate. */
.text-center.text-muted.py-4,
.empty-state {
    border: 1px dashed var(--premium-border, rgba(148,163,184,.3));
    border-radius: 14px;
    background: color-mix(in srgb, var(--polish-surface, #fff) 94%, var(--primary, #667eea));
}

/* Dark contexts: the tinted fill must not resolve through the white
   --polish-surface fallback. Drop the fill so the card surface shows
   through (the #fff fallback above only stays valid in light mode). */
body.px-dark .text-center.text-muted.py-4,
body.px-dark .empty-state,
body.admin-sd-theme .text-center.text-muted.py-4,
body.admin-sd-theme .empty-state,
body.admin-skin-dark-pro .text-center.text-muted.py-4,
body.admin-skin-dark-pro .empty-state,
body.layout-glass .text-center.text-muted.py-4,
body.layout-glass .empty-state,
body.layout-luxe .text-center.text-muted.py-4,
body.layout-luxe .empty-state {
    background: transparent !important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .card,
    .stat-card,
    .wallet-card,
    .btn,
    .table tbody tr,
    .sidebar .nav-link,
    .admin-sidebar .nav-link,
    .user-sidebar .nav-link {
        transition: none !important;
    }
}

/* ============================================================
   Package readability fix — theme-specific, no surface reset
   Keeps Glassmorphism / Dark Pro / Luxe backgrounds, blur,
   gradients and transparency exactly as defined by each theme.
   ============================================================ */

/* Glassmorphism: readable package metadata without changing glass cards. */
body.layout-glass .stat-card .text-muted {
    color: rgba(255,255,255,.82) !important;
}
body.layout-glass .stat-card .mode-option,
body.layout-glass .stat-card .mode-option span:not(.badge),
body.layout-glass .stat-card .mode-option strong {
    color: #fff !important;
}
body.layout-glass .stat-card .border-bottom {
    border-color: rgba(255,255,255,.14) !important;
}
body.layout-glass .stat-card .badge.bg-primary,
body.layout-glass .stat-card .badge.text-bg-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

/* Luxe: preserve the dark premium surface; strengthen only text contrast. */
body.layout-luxe .stat-card .text-muted {
    color: rgba(255,255,255,.80) !important;
}
body.layout-luxe .stat-card .mode-option,
body.layout-luxe .stat-card .mode-option span:not(.badge),
body.layout-luxe .stat-card .mode-option strong {
    color: #fff !important;
}
body.layout-luxe .stat-card .border-bottom {
    border-color: rgba(255,255,255,.14) !important;
}
body.layout-luxe .stat-card .badge.bg-primary,
body.layout-luxe .stat-card .badge.text-bg-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

/* Dark Pro has a dark body and light chip text. Use that existing token
   instead of forcing a new background or replacing the theme accent.
   Fallback is the light-UI muted (#64748b) so un-themed light layouts
   keep readable muted text on white cards; dark layouts define their own
   --text-muted (#94a3b8) via body.px-dark. */
body:not(.layout-glass):not(.layout-luxe) .stat-card .text-muted {
    color: var(--text-muted, #64748b) !important;
}

/* When Bootstrap text-primary is used for package metadata, don't let the
   accent color become the only text color on the dark translucent themes. */
body.layout-glass .stat-card .text-primary,
body.layout-luxe .stat-card .text-primary {
    color: #fff !important;
}

/* Buttons keep their theme colors; only ensure text remains legible. */
body.layout-glass .btn-primary,
body.layout-luxe .btn-primary {
    color: var(--btn-ink, #fff) !important;
}
body.layout-glass .btn-outline-primary,
body.layout-luxe .btn-outline-primary {
    color: var(--primary) !important;
    border-color: rgba(var(--primary-rgb), .65) !important;
}
body.layout-glass .btn-outline-primary:hover,
body.layout-glass .btn-outline-primary:focus,
body.layout-luxe .btn-outline-primary:hover,
body.layout-luxe .btn-outline-primary:focus {
    color: var(--btn-ink, #fff) !important;
    background: rgba(var(--primary-rgb), .18) !important;
}

/* Do not globally recolor .text-primary. It is intentionally left as the
   theme accent everywhere else (icons, links, decorative UI, etc.). */
   /* ============================================================
   WALLET CARD INK — final cascade winner (loaded LAST)
   ------------------------------------------------------------
   Every user layout (classic, modern, minimal, corporate,
   glass, dark-pro, luxe) renders the wallet card with a
   different colour treatment:

       classic   → #fff text on --primary/--secondary gradient
       modern    → var(--btn-ink) text (already correct)
       corporate → var(--btn-ink) text (already correct)
       minimal   → #111827 text on #f9fafb background
       dark-pro  → #fff text on #0f172a background
       glass     → #fff text on translucent glass
       luxe      → var(--btn-ink) text on gradient

   The problem: on layouts where the theme primary is LIGHT
   (cyan, teal, gold, orange, pink, green), the wallet
   gradient is light, but the text stays #fff (hard-coded in
   the layout's <style> block). The button text and the label
   text vanish.

   This block, loaded LAST, forces readable ink on every
   wallet card surface across all 7 layouts:
     - #0f172a (dark slate) on light-primaried layouts
     - #ffffff (white) on dark-primaried layouts
     - activation card stays white on its dark-green gradient
   ============================================================ */

/* --- Non-activation wallet cards: dark slate ink by default --- */
.wallet-card:not(.activation) {
    color: var(--chip-text, #0f172a);
}

.wallet-card:not(.activation) h1,
.wallet-card:not(.activation) h2,
.wallet-card:not(.activation) h3,
.wallet-card:not(.activation) h4,
.wallet-card:not(.activation) h5,
.wallet-card:not(.activation) h6,
.wallet-card:not(.activation) p,
.wallet-card:not(.activation) small,
.wallet-card:not(.activation) .small,
.wallet-card:not(.activation) span,
.wallet-card:not(.activation) div,
.wallet-card:not(.activation) label,
.wallet-card:not(.activation) strong {
    color: inherit;
}

.wallet-card:not(.activation) .text-muted,
.wallet-card:not(.activation) .text-secondary {
    color: rgba(15, 23, 42, .72) !important;
}

/* Solid white button — "Withdraw" / "Add Funds" */
.wallet-card:not(.activation) .btn-light {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700;
}
.wallet-card:not(.activation) .btn-light:hover,
.wallet-card:not(.activation) .btn-light:focus,
.wallet-card:not(.activation) .btn-light:active {
    background: #f1f5f9 !important;
    border-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Outline button — "Transfer" */
.wallet-card:not(.activation) .btn-outline-light,
.wallet-card:not(.activation) .btn-outline-light:hover,
.wallet-card:not(.activation) .btn-outline-light:focus,
.wallet-card:not(.activation) .btn-outline-light:active {
    color: #0f172a !important;
    border-color: #0f172a !important;
    background: rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-weight: 650;
}
.wallet-card:not(.activation) .btn-outline-light:hover,
.wallet-card:not(.activation) .btn-outline-light:focus {
    background: rgba(255, 255, 255, .80) !important;
    transform: translateY(-1px);
}

/* --- Dark-by-design layouts: keep white text on dark wallets ---
   minimal.php uses a LIGHT #f9fafb background, so it stays in
   the "dark slate ink" group above (handled automatically).
   These three layouts always use a dark/translucent surface. */
body.layout-glass .wallet-card:not(.activation),
body.layout-luxe  .wallet-card:not(.activation),
body:has(.wallet-card[style*="#0f172a"]) .wallet-card:not(.activation) {
    /* fallback — not used, kept for safety */
}

/* Dark Pro layout — the wallet sits on a #0f172a card. */
body.layout-dark-pro .wallet-card:not(.activation),
body.dark-pro-layout  .wallet-card:not(.activation) {
    color: #ffffff;
}
body.layout-dark-pro .wallet-card:not(.activation) h1,
body.layout-dark-pro .wallet-card:not(.activation) h2,
body.layout-dark-pro .wallet-card:not(.activation) h3,
body.layout-dark-pro .wallet-card:not(.activation) h4,
body.layout-dark-pro .wallet-card:not(.activation) h5,
body.layout-dark-pro .wallet-card:not(.activation) h6,
body.layout-dark-pro .wallet-card:not(.activation) p,
body.layout-dark-pro .wallet-card:not(.activation) small,
body.layout-dark-pro .wallet-card:not(.activation) span,
body.layout-dark-pro .wallet-card:not(.activation) div,
body.dark-pro-layout  .wallet-card:not(.activation) h1,
body.dark-pro-layout  .wallet-card:not(.activation) h2,
body.dark-pro-layout  .wallet-card:not(.activation) h3,
body.dark-pro-layout  .wallet-card:not(.activation) h4,
body.dark-pro-layout  .wallet-card:not(.activation) h5,
body.dark-pro-layout  .wallet-card:not(.activation) h6,
body.dark-pro-layout  .wallet-card:not(.activation) p,
body.dark-pro-layout  .wallet-card:not(.activation) small,
body.dark-pro-layout  .wallet-card:not(.activation) span,
body.dark-pro-layout  .wallet-card:not(.activation) div {
    color: inherit;
}
body.layout-dark-pro .wallet-card:not(.activation) .btn-outline-light,
body.dark-pro-layout  .wallet-card:not(.activation) .btn-outline-light {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, .14) !important;
}
body.layout-dark-pro .wallet-card:not(.activation) .btn-light,
body.dark-pro-layout  .wallet-card:not(.activation) .btn-light {
    color: #0f172a !important;
}

/* --- Glass + Luxe: keep the dark translucent surface white-on-dark --- */
body.layout-glass .wallet-card:not(.activation),
body.layout-glass .wallet-card:not(.activation) h1,
body.layout-glass .wallet-card:not(.activation) h2,
body.layout-glass .wallet-card:not(.activation) h3,
body.layout-glass .wallet-card:not(.activation) h4,
body.layout-glass .wallet-card:not(.activation) h5,
body.layout-glass .wallet-card:not(.activation) h6,
body.layout-glass .wallet-card:not(.activation) p,
body.layout-glass .wallet-card:not(.activation) small,
body.layout-glass .wallet-card:not(.activation) span,
body.layout-glass .wallet-card:not(.activation) div,
body.layout-luxe  .wallet-card:not(.activation),
body.layout-luxe  .wallet-card:not(.activation) h1,
body.layout-luxe  .wallet-card:not(.activation) h2,
body.layout-luxe  .wallet-card:not(.activation) h3,
body.layout-luxe  .wallet-card:not(.activation) h4,
body.layout-luxe  .wallet-card:not(.activation) h5,
body.layout-luxe  .wallet-card:not(.activation) h6,
body.layout-luxe  .wallet-card:not(.activation) p,
body.layout-luxe  .wallet-card:not(.activation) small,
body.layout-luxe  .wallet-card:not(.activation) span,
body.layout-luxe  .wallet-card:not(.activation) div {
    color: #ffffff !important;
}
body.layout-glass .wallet-card:not(.activation) .text-muted,
body.layout-luxe  .wallet-card:not(.activation) .text-muted {
    color: rgba(255, 255, 255, .80) !important;
}
body.layout-glass .wallet-card:not(.activation) .btn-outline-light,
body.layout-luxe  .wallet-card:not(.activation) .btn-outline-light {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, .14) !important;
}
body.layout-glass .wallet-card:not(.activation) .btn-light,
body.layout-luxe  .wallet-card:not(.activation) .btn-light {
    color: #0f172a !important;
}

/* --- Activation card always white ink on dark green gradient --- */
.wallet-card.activation,
.wallet-card.activation h1,
.wallet-card.activation h2,
.wallet-card.activation h3,
.wallet-card.activation h4,
.wallet-card.activation h5,
.wallet-card.activation h6,
.wallet-card.activation p,
.wallet-card.activation small,
.wallet-card.activation .small,
.wallet-card.activation span,
.wallet-card.activation div,
.wallet-card.activation label,
.wallet-card.activation strong {
    color: #ffffff !important;
}
.wallet-card.activation .text-muted,
.wallet-card.activation .text-secondary {
    color: rgba(255, 255, 255, .82) !important;
}
.wallet-card.activation .btn-light {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f766e !important;
    font-weight: 700;
}
.wallet-card.activation .btn-outline-light,
.wallet-card.activation .btn-outline-light:hover,
.wallet-card.activation .btn-outline-light:focus {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, .18) !important;
}


/* ============================================================
   Readable controls in every dark/light mode
   Fixes reported in the polish pass:
     (a) "Choose File" / file-upload button text vanishes in dark
         themes — Bootstrap paints the button with --bs-body-color
         (dark navy) on --bs-tertiary-bg (white) even when the page
         is dark. Point the button at the theme's own ink/surface
         tokens so it inverts correctly.
     (b) .form-control:disabled shading — readonly/disabled inputs
         get a hard light-grey fill from Bootstrap; keep the surface
         transparent so every card/theme looks intentional.
     (c) "Optional"/light badges (bg-light text-muted) were
         unreadable in dark mode because bg-light stays white.
   ============================================================ */

/* File upload button — the label text side (kept transparent ink). */
.form-control[type=file]:not(:disabled):not([readonly]),
.form-control[type=file]:not(:disabled):not([readonly]) {
    color: var(--polish-ink, var(--chip-text, #1e293b));
}

/* The actual "Choose File" button — theme-aware ink + surface. */
.form-control::-webkit-file-upload-button,
.form-control::file-selector-button {
    color: var(--chip-text, #1e293b) !important;
    background-color: var(--box-soft-strong, var(--box-soft, #eef1ff)) !important;
    border-color: var(--box-line, var(--line, #e2e8f0)) !important;
}

/* Dark mode: invert the button so its text stays readable. */
body.px-dark .form-control::-webkit-file-upload-button,
body.px-dark .form-control::file-selector-button {
    color: var(--chip-text, #e2e8f0) !important;
    background-color: var(--box-soft, #1e293b) !important;
    border-color: var(--box-line, #334155) !important;
}

/* Disabled/readonly inputs: drop the grey fill, keep the hint text. */
.form-control:disabled,
.form-control[readonly] {
    background-color: transparent !important;
    opacity: 1 !important;
}

/* "Optional"-style light badges must stay readable on dark themes. */
body.px-dark .badge.bg-light,
body.px-dark .badge.text-bg-light {
    background-color: var(--chip-bg, #111827) !important;
    border: 1px solid var(--box-line, #1f2937) !important;
}
body.px-dark .badge.bg-light.text-muted,
body.px-dark .badge.text-bg-light.text-muted {
    color: var(--text-muted, #94a3b8) !important;
}

/* ============================================================
   Desktop-only fix: form-bearing cards must not be stretched to
   the tallest column.
   Every g-3 row column child (.card/.stat-card) gets height:100%
   so a short "Change Password" or "Wallet Balances" card next to
   a taller column gets forced taller than its content — the form
   fields end up sitting oddly / spilling past the card bottom on
   desktop (horizontal layout). On mobile the columns stack, so
   the symptom only shows on desktop.
   Keep the stretch for real stat/summary cards (dashboards), but
   release any card that actually contains a <form> or an <input>
   group so the fields hug their own natural height.
   ============================================================ */
.row.g-3 > .col > .card:has(form),
.row.g-3 > .col > .card:has(.form-control),
.row.g-3 > .col > .card:has(input-group):not(:has(form)) {
    height: auto !important;
    align-self: flex-start;
}
 
/* ============================================================
   Mobile topbar: referral ID was hidden on phones
   (base.css hides .uc-id at <576px so only the user name shows).
   Let both the name AND the referral ID stay visible and wrap
   so they never collide - applies to every px-dark context.
   ============================================================ */
@media (max-width: 575.98px) {
    .topbar .user-chip .uc-id {
        display: inline-flex !important;
    }
    .topbar .user-chip {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
}

/* ============================================================
   USER PROFILE + ADMIN USER EDIT — DESKTOP CARD HEIGHT FIX
   These two cards must size to their own content. Some theme files
   intentionally give .stat-card height:100%; that is useful for
   dashboard grids but wrong for these stacked form cards.
   ============================================================ */
.profile-layout > [class*="col-"] > .profile-password-card,
.admin-user-edit-layout > [class*="col-"] > .admin-wallet-balances-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    overflow: visible !important;
}

.profile-password-card form,
.admin-wallet-balances-card form {
    min-width: 0;
    width: 100%;
}

.profile-password-card .input-group,
.admin-wallet-balances-card .input-group {
    min-width: 0;
    width: 100%;
}

.profile-password-card .input-group > .form-control,
.admin-wallet-balances-card .input-group > .form-control {
    min-width: 0;
    flex: 1 1 auto;
    width: 1%;
}

.profile-password-card .input-group > .btn,
.admin-wallet-balances-card .input-group > .btn {
    flex: 0 0 auto;
}

.admin-wallet-balances-card .d-flex.justify-content-between {
    min-width: 0;
    gap: 14px;
}

.admin-wallet-balances-card .d-flex.justify-content-between > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-wallet-balances-card .d-flex.justify-content-between > strong {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ============================================================
   ADMIN USERS SEARCH — KEEP THE GET FORM VISIBLE + CLICKABLE
   ============================================================ */
.user-search-form {
    min-width: 0;
    width: 100%;
    align-items: center;
}

.user-search-form > .form-control {
    min-width: 220px;
    flex: 1 1 260px;
}

.user-search-form > .form-select {
    flex: 0 0 140px;
    min-width: 140px;
}

.user-search-form > .btn,
.user-search-form > a.btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .user-search-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(130px, 160px) auto auto auto;
        width: 100%;
    }

    .user-search-form > .form-control,
    .user-search-form > .form-select {
        width: 100%;
        min-width: 0;
        flex: none;
    }
}

@media (max-width: 767.98px) {
    .user-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .user-search-form > .form-control,
    .user-search-form > .form-select,
    .user-search-form > .btn,
    .user-search-form > a.btn {
        width: 100%;
    }
}


/* ============================================================
   FINAL RESPONSIVE CARD/TOPBAR CORRECTION
   v3 — fixes the remaining admin wallet clipping and mobile
   topbar overflow without changing application logic.
   ============================================================ */

/* The admin wallet card sits INSIDE the .col-md-5 wrapper.  The
   previous selector targeted the wrapper incorrectly, so the
   theme's card sizing rule could still clip the bottom of the card. */
.admin-user-edit-layout > [class*="col-"] > .admin-wallet-balances-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.admin-user-edit-layout > [class*="col-"] {
    min-width: 0 !important;
}

.admin-wallet-balances-card .btn,
.admin-wallet-balances-card form,
.admin-wallet-balances-card .d-flex {
    max-width: 100%;
}

.admin-wallet-balances-card .d-flex.justify-content-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

.admin-wallet-balances-card .d-flex.justify-content-between > span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-wrap: anywhere;
}

.admin-wallet-balances-card .d-flex.justify-content-between > strong {
    min-width: max-content;
    flex: 0 0 auto !important;
    white-space: nowrap;
}

/* Keep password card sizing correct at every Bootstrap breakpoint. */
.profile-layout > [class*="col-"] > .profile-password-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.profile-password-card .input-group,
.profile-password-card .input-group > .form-control,
.profile-password-card form {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Mobile topbar: never allow the heading, user chip or action area
   to make the header wider than its card/content area. */
.topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.topbar > *,
.topbar .d-flex,
.topbar .user-chip {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.topbar h5 {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

@media (max-width: 767.98px) {
    .topbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 10px !important;
        overflow: visible !important;
    }

    .topbar > h5 {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .topbar > .d-flex {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .topbar .user-chip {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .topbar .uc-name,
    .topbar .uc-id {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 575.98px) {
    .topbar {
        padding: 10px 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 12px !important;
    }

    .topbar > h5 {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    .topbar > .d-flex {
        width: 100% !important;
    }

    .topbar .user-chip {
        max-width: 100% !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    /* If a theme puts icon/actions in the right side of the topbar,
       let them wrap instead of pushing the card outside the viewport. */
    .topbar .d-flex > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Narrow mobile forms: input groups must shrink inside their cards. */
@media (max-width: 575.98px) {
    .stat-card,
    .card,
    .wallet-card,
    .profile-layout > [class*="col-"] > *,
    .admin-user-edit-layout > [class*="col-"] > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .input-group {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .input-group > .form-control,
    .input-group > .form-select {
        min-width: 0 !important;
        width: 1% !important;
    }

    .input-group > .btn {
        flex: 0 0 auto !important;
    }
}