/*
 * wrs-dashboard-master.css
 * WrsTrend My Account Dashboard — Single Source of Truth
 *
 * Architecture:
 *   - Targets the EXACT HTML structure from classified-listing/templates/myaccount/user-info.php
 *   - Uses the plugin's own flex system as the base, then overrides colors/spacing/radius ONLY
 *   - No conflicts with wrstrend-performance-fixes.css (handles nav/logo/body backgrounds)
 *   - No conflicts with wrstrend-account-navigation.css (handles sidebar nav)
 *
 * HTML Structure (reference):
 *   .rtcl-MyAccount-content
 *     .rtcl-user-info                          ← flex row wrapper
 *       .rtcl-user-content                     ← flex: 50% on account pages
 *         .rtcl-user-content-inner             ← flex row: avatar + details
 *           .rtcl-user-avatar > img
 *           .rtcl-user-details > h5, p
 *       .rtcl-user-note [CONDITIONAL]          ← only if $note set by admin
 *         .rtcl-user-note-inner
 *     .rtcl-listing-statistics                 ← flex row, 4 children
 *       .rtcl-listing-count × 4               ← flex: 50% on account pages
 *         .rtcl-listing-count-inner
 *           .rtcl-listing-icon.{total|published|pending|expired}-icon
 *           .rtcl-listing-number > h5, span
 */

/* ============================================================================
   SECTION 1: Content Area Container
   ============================================================================ */
body.rtcl-account .rtcl-MyAccount-content {
    padding: 0;
    background: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================================================
   SECTION 2: User Profile Row
   Corrects the 25% plugin default to full-width when no admin note present.
   Uses !important only where plugin specificity would otherwise win.
   ============================================================================ */

/* The outer flex wrapper — reset plugin's margin trick to clean zero */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 0 20px 0 !important;
    gap: 0 !important;
}

/*
 * .rtcl-user-content normally = 50% (account page) or 25% (default)
 * Strategy: force 100% width — if there IS a note, it will stack below
 * rather than creating a ghost half-width empty box on the right.
 * This is the correct fix for the giant empty red-box seen in the screenshot.
 */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content,
body.rtcl-account:not(.page-template-rtcl-canvas_template) .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content {
    flex: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* The inner card — glassmorphic dark card */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-content-inner {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(11,19,35,0.96)) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 18px !important;
    padding: 22px 28px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-content-inner:hover {
    border-color: rgba(0,242,254,0.22) !important;
    box-shadow: 0 12px 40px rgba(0,242,254,0.10) !important;
}

/* Avatar */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-avatar {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    border-radius: 50% !important;
    padding: 3px !important;
    background: linear-gradient(135deg, #00f2fe, #4facfe) !important;
    box-shadow: 0 0 20px rgba(0,242,254,0.30) !important;
    flex-shrink: 0 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important;
    display: block !important;
}

/* Details text */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-details {
    flex: 1 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-details h5 {
    color: #f1f5f9 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-details p {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin: 3px 0 !important;
    line-height: 1.5 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-content .rtcl-user-details p strong {
    color: #00f2fe !important;
    font-weight: 600 !important;
}

/*
 * Admin Note (only shown when $note is set) — stacks below user card
 * Retain the plugin's flex:1 but style it as its own card
 */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-note {
    flex: 100% !important;
    max-width: 100% !important;
    padding: 16px 0 0 0 !important;
    margin-top: 0 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-note .rtcl-user-note-inner {
    background: linear-gradient(135deg, rgba(15,23,42,0.85), rgba(20,30,55,0.90)) !important;
    border: 1px solid rgba(245,158,11,0.25) !important;
    border-radius: 14px !important;
    padding: 20px 24px !important;
    height: auto !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-note h4 {
    color: #f59e0b !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-user-info .rtcl-user-note p {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* ============================================================================
   SECTION 3: Statistics Grid — 4 Cards in 2×2 Layout

   Plugin uses: .rtcl-listing-statistics { display:flex; flex-wrap:wrap; }
   Each child:  flex: 50% / max-width: 50% (account page override)
   We use CSS Grid for clean 2-column layout, which is cleaner than
   overriding flex percentages. We force display:grid on the wrapper.
   ============================================================================ */

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin: 20px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 600px) {
    .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics {
        grid-template-columns: 1fr !important;
    }
}

/*
 * Each stat card wrapper — reset plugin's flex/max-width since we use grid
 * The plugin sets flex:50% / max-width:50% on > div; grid makes those irrelevant
 * but we still override to prevent any residual sizing
 */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div,
body.rtcl-account:not(.page-template-rtcl-canvas_template) .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div {
    flex: unset !important;
    max-width: unset !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* The inner card */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: linear-gradient(145deg, rgba(15,23,42,0.88), rgba(11,19,35,0.94)) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    padding: 20px 22px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.22) !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div:hover .rtcl-listing-count-inner {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.30) !important;
}

/* ============================================================================
   SECTION 4: Stat Icon Badges — Each with its own color identity
   ============================================================================ */

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: box-shadow 0.25s ease !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

/* Total Listings — Cyan */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.total-icon {
    background: linear-gradient(135deg, rgba(0,242,254,0.18), rgba(79,172,254,0.10)) !important;
    border: 1px solid rgba(0,242,254,0.28) !important;
    color: #00f2fe !important;
    box-shadow: 0 4px 16px rgba(0,242,254,0.12) !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.total-icon svg path {
    fill: #00f2fe !important;
}

/* Published Listings — Emerald */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.published-icon {
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.10)) !important;
    border: 1px solid rgba(16,185,129,0.28) !important;
    color: #10b981 !important;
    box-shadow: 0 4px 16px rgba(16,185,129,0.12) !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.published-icon svg path {
    fill: #10b981 !important;
}

/* Pending Listings — Amber */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.pending-icon {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.10)) !important;
    border: 1px solid rgba(245,158,11,0.28) !important;
    color: #f59e0b !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.12) !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.pending-icon svg path {
    fill: #f59e0b !important;
}

/* Expired Listings — Rose */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.expired-icon {
    background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(225,29,72,0.10)) !important;
    border: 1px solid rgba(244,63,94,0.28) !important;
    color: #f43f5e !important;
    box-shadow: 0 4px 16px rgba(244,63,94,0.12) !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-icon.expired-icon svg path {
    fill: #f43f5e !important;
}

/* ============================================================================
   SECTION 5: Stat Card Number & Label
   ============================================================================ */

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-number {
    flex: 1 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-number h5 {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 6px 0 !important;
    line-height: 1 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div .rtcl-listing-count-inner .rtcl-listing-number span {
    color: #f1f5f9 !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
    display: block !important;
}

/* ============================================================================
   SECTION 6: Membership Report & Other Inner Content Cards
   ============================================================================ */

/* Any direct div child of rtcl-MyAccount-content that isn't user-info or stats */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content > div:not(.rtcl-user-info):not(.rtcl-listing-statistics),
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-membership-report,
.rtcl-MyAccount-wrap .rtcl-MyAccount-content .membership-statistic-report-outer {
    background: linear-gradient(145deg, rgba(15,23,42,0.85), rgba(11,19,35,0.92)) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    padding: 22px 26px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.22) !important;
    box-sizing: border-box !important;
}

/* Section headings inside cards */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content > div h3,
.rtcl-MyAccount-wrap .rtcl-MyAccount-content > div h4 {
    color: #f1f5f9 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* Membership tables */
.rtcl-MyAccount-wrap .rtcl-MyAccount-content table {
    color: #94a3b8 !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content table td,
.rtcl-MyAccount-wrap .rtcl-MyAccount-content table th {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    font-size: 14px !important;
    color: #cbd5e1 !important;
    background: transparent !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content table th {
    color: #64748b !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content table td:first-child {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.rtcl-MyAccount-wrap .rtcl-MyAccount-content table td:last-child {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}