/**
 * PNP SliceWP Dark Theme Fix
 * ===========================
 * Fixes all contrast/visibility issues on the affiliate dashboard
 * when running SliceWP on PracticallyNatty's dark-themed Astra site.
 *
 * HOW TO INSTALL:
 * WordPress Admin > Appearance > Customize > Additional CSS
 * Paste this entire file's contents there and click Publish.
 *
 * @site    PracticallyNatty.com
 * @version 1.0.0
 * @date    2026-04-05
 */


/* =================================================================
   1. GLOBAL — Force readable text on dark backgrounds
   ================================================================= */

#slicewp-affiliate-account,
#slicewp-affiliate-account * {
    color: #e8e6e3;
}

#slicewp-affiliate-account a {
    color: #e8b32b;
}

#slicewp-affiliate-account a:hover {
    color: #f0cc65;
}


/* =================================================================
   2. NAVIGATION TABS — Gold active state, visible inactive
   ================================================================= */

#slicewp-affiliate-account-nav-tab {
    border-bottom: 1px solid #333 !important;
    background: transparent !important;
}

#slicewp-affiliate-account-nav-tab a {
    color: #9e9e9e !important;
    background: transparent !important;
    border: none !important;
    padding: 10px 18px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

#slicewp-affiliate-account-nav-tab a:hover {
    color: #e8e6e3 !important;
    background: rgba(255,255,255,0.04) !important;
}

#slicewp-affiliate-account-nav-tab a.slicewp-active,
#slicewp-affiliate-account-nav-tab a.active,
#slicewp-affiliate-account-nav-tab .active a {
    color: #e8b32b !important;
    border-bottom-color: #e8b32b !important;
    background: transparent !important;
    font-weight: 600 !important;
}


/* =================================================================
   3. STAT CARDS — Dark surface with visible text + gold accents
   ================================================================= */

/* Main card containers */
#slicewp-affiliate-account .slicewp-card,
body #slicewp-affiliate-account .slicewp-card {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

#slicewp-affiliate-account .slicewp-card:hover {
    border-color: #e8b32b !important;
}

/* Card inner areas */
#slicewp-affiliate-account .slicewp-card-inner,
.slicewp-card-affiliate-dashboard .slicewp-card-inner {
    background: transparent !important;
}

/* KPI stat values — the big numbers */
#slicewp-affiliate-account .slicewp-card .slicewp-kpi-value,
#slicewp-affiliate-account .slicewp-card h2,
#slicewp-affiliate-account .slicewp-card h3,
#slicewp-affiliate-account .slicewp-card .slicewp-card-title,
#slicewp-affiliate-account .slicewp-card strong,
#slicewp-affiliate-account .slicewp-kpi-value,
.slicewp-card .slicewp-kpi-value {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* KPI labels — muted but visible */
#slicewp-affiliate-account .slicewp-card .slicewp-kpi-label,
#slicewp-affiliate-account .slicewp-card .slicewp-kpi-heading,
#slicewp-affiliate-account .slicewp-kpi-label,
.slicewp-card .slicewp-kpi-label {
    color: #9e9e9e !important;
}

/* KPI direction arrows (up/down indicators) */
#slicewp-affiliate-account .slicewp-kpi-direction,
.slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-direction {
    background-color: transparent !important;
}

/* Program Details cards (Commission Rate, Cookie Duration) */
#slicewp-affiliate-account .slicewp-card-inner span,
#slicewp-affiliate-account .slicewp-card-inner p,
#slicewp-affiliate-account .slicewp-card-inner div {
    color: #e8e6e3 !important;
}


/* =================================================================
   4. ALL TIME / 30 DAY STATS — Top row KPI cards
   ================================================================= */

/* The stats section headers (All Time, Last 30 Days) */
#slicewp-affiliate-account .slicewp-section-heading,
#slicewp-affiliate-account h3,
#slicewp-affiliate-account h4 {
    color: #e8b32b !important;
    font-weight: 600 !important;
}

/* Individual stat items */
#slicewp-affiliate-account .slicewp-grid .slicewp-card,
#slicewp-affiliate-account .slicewp-cards-grid .slicewp-card {
    background: #222222 !important;
    border: 1px solid #333 !important;
}

/* All stat numbers */
#slicewp-affiliate-account .slicewp-card-number,
#slicewp-affiliate-account .slicewp-stat-value,
#slicewp-affiliate-account .slicewp-card-value {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* All stat labels */
#slicewp-affiliate-account .slicewp-card-label,
#slicewp-affiliate-account .slicewp-stat-label,
#slicewp-affiliate-account .slicewp-card-heading {
    color: #9e9e9e !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}


/* =================================================================
   5. CHART — Visible on dark background
   ================================================================= */

#slicewp-affiliate-account .slicewp-chart-container,
#slicewp-affiliate-account .slicewp-chart-wrap {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    padding: 16px !important;
}

.slicewp-chart-tooltip {
    background-color: #333 !important;
    color: #e8e6e3 !important;
    border: 1px solid #555 !important;
    border-radius: 6px !important;
}

.slicewp-chart-time-unit-selector {
    color: #9e9e9e !important;
    padding-right: 15px !important;
    font-size: 12px !important;
}

.slicewp-chart-time-unit-selector option {
    background-color: #222 !important;
    color: #e8e6e3 !important;
}

.slicewp-date-picker-predefined-date-ranges {
    background-color: #222 !important;
    color: #e8e6e3 !important;
    border: 1px solid #333 !important;
}

.slicewp-date-picker-predefined-date-ranges a {
    color: #e8b32b !important;
}


/* =================================================================
   6. TABLES — Commissions, Visits, Payouts, etc.
   ================================================================= */

#slicewp-affiliate-account table,
#slicewp-affiliate-account .slicewp-table {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    width: 100% !important;
}

#slicewp-affiliate-account table thead th,
#slicewp-affiliate-account .slicewp-table thead th {
    background: rgba(232, 179, 43, 0.08) !important;
    color: #e8b32b !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #333 !important;
    text-align: left !important;
}

#slicewp-affiliate-account table tbody td,
#slicewp-affiliate-account .slicewp-table tbody td {
    color: #e8e6e3 !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

#slicewp-affiliate-account table tbody tr:last-child td {
    border-bottom: none !important;
}

#slicewp-affiliate-account table tbody tr:hover,
#slicewp-affiliate-account .slicewp-table tbody tr:hover {
    background: rgba(232, 179, 43, 0.04) !important;
}

/* Alternating rows */
#slicewp-affiliate-account table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02) !important;
}


/* =================================================================
   7. AFFILIATE LINKS TAB — Fix empty state + make links visible
   ================================================================= */

#slicewp-affiliate-account .slicewp-affiliate-link,
#slicewp-affiliate-account .slicewp-referral-url-field,
#slicewp-affiliate-account .slicewp-field-referral-link input,
#slicewp-affiliate-account input[type="text"],
#slicewp-affiliate-account input[type="url"] {
    background: #222 !important;
    color: #e8b32b !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
    font-family: monospace !important;
}

#slicewp-affiliate-account input[type="text"]:focus,
#slicewp-affiliate-account input[type="url"]:focus {
    border-color: #e8b32b !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(232, 179, 43, 0.15) !important;
}

/* Copy button */
#slicewp-affiliate-account .slicewp-button-copy,
#slicewp-affiliate-account button[class*="copy"] {
    background: linear-gradient(135deg, #c9a84c, #a68a2e) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#slicewp-affiliate-account .slicewp-button-copy:hover,
#slicewp-affiliate-account button[class*="copy"]:hover {
    background: linear-gradient(135deg, #e0c56a, #c9a84c) !important;
    transform: translateY(-1px) !important;
}


/* =================================================================
   8. BUTTONS — Consistent gold/dark styling
   ================================================================= */

#slicewp-affiliate-account .slicewp-button-primary,
#slicewp-affiliate-account button[type="submit"],
#slicewp-affiliate-account input[type="submit"] {
    background: linear-gradient(135deg, #c9a84c, #a68a2e) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
    font-size: 15px !important;
}

#slicewp-affiliate-account .slicewp-button-primary:hover,
#slicewp-affiliate-account button[type="submit"]:hover,
#slicewp-affiliate-account input[type="submit"]:hover {
    background: linear-gradient(135deg, #e0c56a, #c9a84c) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3) !important;
}


/* =================================================================
   9. SETTINGS TAB — Form fields visible
   ================================================================= */

#slicewp-affiliate-account .slicewp-field-wrapper label,
#slicewp-affiliate-account .slicewp-field-label-wrapper,
#slicewp-affiliate-account label {
    color: #e8e6e3 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

#slicewp-affiliate-account .slicewp-field-wrapper input,
#slicewp-affiliate-account .slicewp-field-wrapper textarea,
#slicewp-affiliate-account .slicewp-field-wrapper select,
#slicewp-affiliate-account textarea {
    background: #222 !important;
    color: #e8e6e3 !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
}

#slicewp-affiliate-account .slicewp-field-wrapper input:focus,
#slicewp-affiliate-account .slicewp-field-wrapper textarea:focus {
    border-color: #e8b32b !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(232, 179, 43, 0.15) !important;
}

/* Description text under fields */
#slicewp-affiliate-account .slicewp-field-description,
#slicewp-affiliate-account .description,
#slicewp-affiliate-account small {
    color: #777 !important;
}

/* Required asterisks */
#slicewp-affiliate-account .required,
#slicewp-affiliate-account .slicewp-required {
    color: #ef5350 !important;
}


/* =================================================================
   10. PAYOUTS TAB — Empty state message
   ================================================================= */

#slicewp-affiliate-account .slicewp-section-payouts p,
#slicewp-affiliate-account .slicewp-no-results,
#slicewp-affiliate-account .slicewp-empty-state {
    color: #9e9e9e !important;
    text-align: center !important;
    padding: 40px 20px !important;
    font-size: 15px !important;
}


/* =================================================================
   11. CREATIVES TAB — Empty state + creative cards
   ================================================================= */

#slicewp-affiliate-account .slicewp-section-creatives p,
#slicewp-affiliate-account .slicewp-creative {
    color: #e8e6e3 !important;
}

#slicewp-affiliate-account .slicewp-creative {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

#slicewp-affiliate-account .slicewp-creative:hover {
    border-color: #e8b32b !important;
}

#slicewp-affiliate-account .slicewp-creative img {
    border-radius: 6px !important;
    max-width: 100% !important;
}

#slicewp-affiliate-account .slicewp-creative textarea {
    background: #222 !important;
    color: #e8b32b !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    font-family: monospace !important;
    font-size: 13px !important;
    padding: 10px !important;
    width: 100% !important;
}


/* =================================================================
   12. USER NOTICES — Warnings, errors, success messages
   ================================================================= */

#slicewp-affiliate-account .slicewp-user-notice {
    border-radius: 8px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
}

#slicewp-affiliate-account .slicewp-user-notice p {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

#slicewp-affiliate-account .slicewp-user-notice p a {
    color: inherit !important;
    text-decoration: underline !important;
}


/* =================================================================
   13. PAGINATION — Page navigation for tables
   ================================================================= */

#slicewp-affiliate-account .slicewp-pagination,
#slicewp-affiliate-account .slicewp-pagination a {
    color: #9e9e9e !important;
}

#slicewp-affiliate-account .slicewp-pagination a:hover {
    color: #e8b32b !important;
}

#slicewp-affiliate-account .slicewp-pagination .current {
    background: #e8b32b !important;
    color: #1a1a1a !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
}


/* =================================================================
   14. SECTION WRAPPERS — Consistent dark surface
   ================================================================= */

#slicewp-affiliate-account .slicewp-section,
#slicewp-affiliate-account .slicewp-tab-content,
#slicewp-affiliate-account .slicewp-section-content {
    background: transparent !important;
}

/* Any white/light containers that leak through */
#slicewp-affiliate-account > div,
#slicewp-affiliate-account .slicewp-wrap {
    background: transparent !important;
}


/* =================================================================
   15. SCROLLBAR — Styled dark scrollbar for tables
   ================================================================= */

#slicewp-affiliate-account ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#slicewp-affiliate-account ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

#slicewp-affiliate-account ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

#slicewp-affiliate-account ::-webkit-scrollbar-thumb:hover {
    background: #666;
}


/* =================================================================
   16. TOP BANNER — Fix text truncation
   ================================================================= */

.ast-above-header-bar .marquee,
.ast-above-header-bar .ast-builder-layout-element,
.ast-above-header-bar .ast-header-html-inner,
header .marquee,
[class*="marquee"],
[class*="ticker"],
[class*="announcement-bar"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* If using Astra's header builder with scrolling text */
.ast-above-header-bar .ast-container {
    overflow: visible !important;
}


/* =================================================================
   17. MOBILE RESPONSIVE FIXES
   ================================================================= */

@media screen and (max-width: 768px) {
    #slicewp-affiliate-account .slicewp-card {
        margin-bottom: 12px !important;
    }

    #slicewp-affiliate-account table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #slicewp-affiliate-account-nav-tab {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #slicewp-affiliate-account-nav-tab a {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}