/* Riseax system layer — quick-polish design system primitives.
   Loaded after riseax-type-motion.css; overrides legacy per-page styles
   for buttons, cards, inputs, tables, status pills, focus and tap targets. */

/* Dashboard CSS files (campaign-create/wallet/support/campaign-list) size
   the fixed sidebar with width+padding but never reset box-sizing, so the
   sidebar renders wider than the space reserved for it and overlaps page
   content. This is loaded on every dashboard page, so fixing it here
   fixes all of them at once. */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* 8-point spacing scale (Rule 10) — only these 9 values are allowed */
    --rx-space-1: 8px;
    --rx-space-2: 16px;
    --rx-space-3: 24px;
    --rx-space-4: 32px;
    --rx-space-5: 40px;
    --rx-space-6: 48px;
    --rx-space-7: 64px;
    --rx-space-8: 80px;
    --rx-space-9: 96px;

    --rx-radius-sm: 8px;
    --rx-radius-md: 12px;
    --rx-radius-lg: 16px;
    --rx-radius-pill: 999px;

    --rx-shadow-sm: 0 1px 2px rgba(20, 14, 10, .04), 0 2px 6px rgba(20, 14, 10, .04);
    --rx-shadow-md: 0 4px 12px rgba(20, 14, 10, .06), 0 8px 24px rgba(20, 14, 10, .05);
    --rx-shadow-lg: 0 12px 28px rgba(20, 14, 10, .08), 0 24px 60px rgba(20, 14, 10, .08);

    --rx-border: #e6eaf2;
    --rx-border-strong: #c8d0df;
    --rx-surface: #ffffff;
    --rx-surface-muted: #f5f7fb;
    --rx-text: #1f2533;
    --rx-text-muted: #6b7280;

    /* Layout system (Rule 3/8): one content width, one sidebar width,
       everywhere — marketing pages and dashboard pages alike. */
    --rx-content-width: 1280px;
    --rx-sidebar-width: 248px;

    --rx-status-success: #0c8a4a;
    --rx-status-success-bg: #e5f6ec;
    --rx-status-warning: #a25b00;
    --rx-status-warning-bg: #fff3dd;
    --rx-status-danger: #b2202d;
    --rx-status-danger-bg: #fde8ea;
    --rx-status-info: #0058bd;
    --rx-status-info-bg: #e3effd;

    --rx-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--rx-cta-tertiary, #0058bd);
}

/* ---------- One content width, everywhere (Rule 3) ----------
   Every page previously defined its own main-content max-width:
   homepage .container 1100px, campaign-main 1100px, campaign-setup-main/
   setup-focus-header-inner 1380px, campaign-list-main 1160px, wallet-main
   1120px, support-main 1180px — five different values for what should be
   one product. Forcing them all to the same 1280px here, in the one file
   loaded on every page, instead of editing six separate CSS files. */
.container,
.campaign-main,
.campaign-setup-main,
.setup-focus-header-inner,
.campaign-list-main,
.wallet-main,
.support-main,
.ps-main {
    max-width: var(--rx-content-width) !important;
    /* Each dashboard page's .campaign-shell is display:flex;flex-direction:
       column, making these containers flex items. A flex item with
       width:auto and margin:0 auto doesn't stretch to fill the cross axis
       like a normal block box would — the auto margins absorb the free
       space instead, so the container silently shrinks to its content's
       width and max-width alone has no visible effect. width:100% forces
       the intended stretch-then-clamp-by-max-width behavior. */
    width: 100% !important;
}

/* ---------- One sidebar width and mechanism, everywhere (Rule 8) ----------
   Three of four dashboard pages fix the sidebar (position:fixed, taken out
   of flow) and offset the shell with margin-left. support.css instead made
   the sidebar a real flex sibling (flex:0 0 250px, position:sticky) with
   the shell at flex:1 — a different width (250 vs 248) AND a different
   layout mechanism. Forcing every page onto the fixed+margin-left approach
   here: on the three pages that already use it, this is a no-op; on
   support.css it corrects the mechanism so margin-left below lines up
   instead of double-offsetting past an already-adjacent flex sibling. */
.campaign-sidebar {
    width: var(--rx-sidebar-width) !important;
    flex: 0 0 var(--rx-sidebar-width) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
}

.campaign-shell {
    margin-left: var(--rx-sidebar-width) !important;
    /* The shell is a flex item inside .campaign-app{display:flex}. Only
       campaign-create.css ever gave it flex-grow; on the other pages it
       shrink-wraps to its content instead of filling the viewport, so the
       header/footer stop short of the right edge. min-width:0 lets wide
       tables scroll inside instead of blowing the shell open. */
    flex: 1 1 auto !important;
    min-width: 0;
}

@media (max-width: 900px) {
    .campaign-sidebar {
        transform: translateX(-100%);
    }
    .campaign-sidebar.open {
        transform: translateX(0);
    }
    .campaign-shell {
        margin-left: 0 !important;
    }
}

/* Exception to the 1280px rule above: the FAQ column intentionally reads
   at 680px. Its element carries BOTH classes (class="container
   faq-container"), so without this !important counter-rule the generic
   .container 1280px !important silently blows it up to full width. */
.faq-container {
    max-width: 680px !important;
}

/* One logo size everywhere. The dashboard sidebar logo was sized by
   width (105px), which derives a 33px height from the source image's
   aspect ratio — 1px off the 32px used by the homepage and auth headers.
   Size by height like everywhere else. */
.campaign-brand img {
    width: auto !important;
    height: 32px !important;
}

/* ---------- Horizontal rhythm (Rules 5/6/9) ----------
   Before: every main container had ZERO side padding (padding: 70px 0 65px
   etc.), so dashboard content sat flush against the sidebar border at
   common viewports, while the headers indented 34px (create/list), 22px
   (support) and 15px (mobile) — no two edges on the site lined up.
   One 32px gutter for every container, header and footer; headers and
   content now share the same left edge (sidebar + 32px). */
.campaign-main,
.campaign-setup-main,
.campaign-list-main,
.wallet-main,
.support-main,
.ps-main {
    padding: 48px 32px 64px !important;
}

.container {
    padding-inline: 32px !important;
}

.setup-focus-header-inner {
    padding: 0 32px !important;
}

.campaign-header {
    padding: 0 32px !important;
}

.campaign-footer {
    padding: 24px 32px !important;
}

/* ---------- Vertical rhythm (Rule 10) ----------
   Before: gaps between page-level sections were 22px (support ×3), 24px
   (wallet), 30px (list notice), 42px and 55px (create) — five schemes.
   One rule: every direct sibling inside a main container sits 32px below
   the previous one. Adjacent legacy margins collapse into this in block
   flow, so per-page margin-top/bottom leftovers don't stack. */
.campaign-main > * + *,
.campaign-setup-main > * + *,
.campaign-list-main > * + *,
.wallet-main > * + *,
.support-main > * + *,
.ps-main > * + * {
    margin-top: 32px !important;
}

@media (max-width: 640px) {
    .campaign-main,
    .campaign-setup-main,
    .campaign-list-main,
    .wallet-main,
    .support-main,
    .ps-main {
        padding: 32px 16px 48px !important;
    }
    .container {
        padding-inline: 16px !important;
    }
    .campaign-header {
        padding: 0 16px !important;
    }
    .campaign-footer {
        padding: 16px !important;
    }
}

/* ---------- Skip link ---------- */
.rx-skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--rx-cta-tertiary, #0058bd);
    color: #fff !important;
    padding: 10px 16px;
    border-radius: var(--rx-radius-md);
    font-weight: 700 !important;
    z-index: 9999;
    text-decoration: none;
}
.rx-skip-link:focus {
    left: 16px;
    outline: none;
    box-shadow: var(--rx-focus-ring);
}

/* ---------- Global focus-visible ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: none !important;
    box-shadow: var(--rx-focus-ring) !important;
    border-radius: var(--rx-radius-sm);
}

/* ---------- Buttons: consistent shape & states ---------- */
button,
input[type="button"],
input[type="submit"],
.btn,
.button,
.nav-cta,
.cta,
.login-btn,
.new-campaign-btn,
.campaign-primary-btn,
.campaign-secondary-btn,
.wallet-submit,
.setup-pay-button,
.video-input-row button[type="submit"],
.contact-form button[type="submit"],
.support-form-actions button[type="submit"] {
    border-radius: var(--rx-radius-md) !important;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    cursor: pointer;
}

button:disabled,
.btn:disabled,
.button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Tap target floor on mobile */
@media (max-width: 768px) {
    button,
    .btn,
    .button,
    a.cta,
    a.nav-cta,
    .quick-amounts button,
    .filter-pills button,
    .history-filter,
    .menu-toggle,
    .sidebar-close {
        min-height: 44px;
        min-width: 44px;
    }
    .sidebar-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ---------- Inputs / selects / textareas ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.campaign-select,
.campaign-token-input {
    border-radius: var(--rx-radius-md) !important;
    border: 1px solid var(--rx-border) !important;
    background: var(--rx-surface) !important;
    min-height: 44px;
    padding: 10px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: var(--rx-cta-tertiary, #0058bd) !important;
}

/* Required marker */
.required-star,
label .required {
    color: var(--rx-status-danger);
    margin-right: 2px;
}

/* ---------- Cards: shared radius/border/shadow ---------- */
.cards article,
.policy-grid article,
.dark-cards article,
.campaign-entry-card,
.campaign-list-card,
.campaign-config-card,
.campaign-preview-card,
.campaign-views-card,
.setup-selected-card,
.setup-panel,
.setup-summary-card,
.setup-help-card,
.wallet-topup-card,
.wallet-history-card,
.support-form-card,
.support-contact-card,
.support-list-card,
.visual-card,
.form-card {
    border-radius: var(--rx-radius-lg) !important;
    border: 1px solid var(--rx-border) !important;
    box-shadow: var(--rx-shadow-sm) !important;
}

/* ---------- Tables: scannable defaults ---------- */
.wallet-table,
.support-table,
#campaigns_list_datatable {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.wallet-table thead th,
.support-table thead th,
#campaigns_list_datatable thead th {
    background: var(--rx-surface-muted) !important;
    color: var(--rx-text) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--rx-border) !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.wallet-table tbody td,
.support-table tbody td,
#campaigns_list_datatable tbody td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--rx-border) !important;
    vertical-align: middle;
}

.wallet-table tbody tr:nth-child(even) td,
.support-table tbody tr:nth-child(even) td,
#campaigns_list_datatable tbody tr:nth-child(even) td {
    background: rgba(245, 247, 251, .55);
}

.wallet-table tbody tr:hover td,
.support-table tbody tr:hover td,
#campaigns_list_datatable tbody tr:hover td {
    background: rgba(0, 88, 189, .04);
}

/* Mobile: tables become horizontally scrollable */
@media (max-width: 768px) {
    .table-shell,
    .history-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Status pills: unified shape & status palette ---------- */
.status-pill,
.type-pill,
.amount-pill,
.safe-chip,
.safe-badge,
.section-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    border-radius: var(--rx-radius-pill) !important;
    border: 1px solid transparent;
    line-height: 1.2 !important;
}

.type-pill.credit,
.amount-pill.credit,
.status-pill.success,
.safe-chip,
.safe-badge {
    background: var(--rx-status-success-bg) !important;
    color: var(--rx-status-success) !important;
    border-color: rgba(12, 138, 74, .2);
}

.type-pill.debit,
.amount-pill.debit,
.status-pill.danger {
    background: var(--rx-status-danger-bg) !important;
    color: var(--rx-status-danger) !important;
    border-color: rgba(178, 32, 45, .2);
}

.status-pill.warning {
    background: var(--rx-status-warning-bg) !important;
    color: var(--rx-status-warning) !important;
    border-color: rgba(162, 91, 0, .2);
}

.status-pill.info {
    background: var(--rx-status-info-bg) !important;
    color: var(--rx-status-info) !important;
    border-color: rgba(0, 88, 189, .2);
}

/* ---------- Helpers ---------- */
.rx-explainer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--rx-status-info-bg);
    color: var(--rx-status-info);
    border: 1px solid rgba(0, 88, 189, .15);
    border-radius: var(--rx-radius-md);
    font-size: 13px;
    line-height: 1.5;
    margin: 12px 0;
}
.rx-explainer .rx-explainer-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--rx-status-info);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.rx-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--rx-surface-muted);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-md);
    color: var(--rx-text-muted);
    font-size: 13px;
}
.rx-trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rx-step-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.rx-step-progress li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--rx-surface-muted);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-pill);
    color: var(--rx-text-muted);
    font-size: 13px;
    font-weight: 600;
}
.rx-step-progress li .rx-step-num {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    color: var(--rx-text-muted);
    border: 1px solid var(--rx-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.rx-step-progress li.is-active {
    background: var(--rx-cta-primary, #d53a42);
    border-color: var(--rx-cta-primary, #d53a42);
    color: #fff;
}
.rx-step-progress li.is-active .rx-step-num {
    background: #fff;
    color: var(--rx-cta-primary, #d53a42);
    border-color: #fff;
}
.rx-step-progress li.is-complete {
    background: var(--rx-status-success-bg);
    border-color: rgba(12, 138, 74, .25);
    color: var(--rx-status-success);
}
.rx-step-progress li.is-complete .rx-step-num {
    background: var(--rx-status-success);
    color: #fff;
    border-color: var(--rx-status-success);
}
.rx-step-divider {
    flex: 0 0 18px;
    height: 1px;
    background: var(--rx-border);
}

/* Sticky mobile pay bar */
@media (max-width: 900px) {
    .rx-sticky-cta {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--rx-border);
        padding: 12px 16px;
        box-shadow: 0 -6px 18px rgba(20, 14, 10, .06);
        z-index: 10;
    }
}