/*
 * ReaderX (MangaYummy Child) -- css/readerx-profile-approved.css
 *
 * Implements the approved ReaderX User Panel visual design. Enqueued
 * only on the Profile page (same condition as the existing
 * readerx-profile-header.css file), loaded after it.
 *
 * Every selector below was checked against the live child-theme
 * page-profile.php markup before inclusion. Three adaptations were
 * made against the literally-supplied CSS, all approved:
 *
 * 1) Section 3's ".profile-banner-label" / ".profile-banner-name"
 *    rules are OMITTED -- confirmed dead selectors, no current
 *    equivalent element exists inside .profile-banner-top at all.
 *
 * 2) Section 10 (.profile-quick-info-popover and its label/value
 *    children) is OMITTED IN FULL -- that feature only exists in the
 *    parent theme's page-profile.php; this child theme's own
 *    template override (the one actually used, per WordPress's
 *    template hierarchy) has no such feature under any name.
 *
 * 3) Section 12 (main profile tabs) adapted 1:1 to the real, current
 *    selectors:
 *      .tab-button -> .profile-side-tab
 *      .tab-count  -> .side-tab-count
 *    .tab-icon is OMITTED -- confirmed the current .profile-side-tab
 *    markup (<button><span class="side-tab-label">...</span><span
 *    class="side-tab-count">...</span></button>) has no icon element
 *    of any kind to map it to. All normal/hover/active visual values
 *    are otherwise preserved exactly as supplied. This adaptation is
 *    scoped to .profile-side-tab specifically, so it cannot affect
 *    the separate, unrelated .translation-subtabs .tab-button rule
 *    defined inline elsewhere in page-profile.php.
 *
 * All other selectors (Sections 1, 2, 3 partial, 4-9, 13-21) matched
 * the live markup exactly and are used unchanged.
 */


/* ============================================================
   1. PROFILE PAGE BACKGROUND
   ============================================================ */

.profile-page {
    background: #111319 !important;
    color: #f4f5f7 !important;
}


/* ============================================================
   2. MAIN PROFILE CONTAINER
   ============================================================ */

.profile-page .profile-container {
    background: transparent !important;
}


/* ============================================================
   3. TOP PROFILE BAR
   (.profile-banner-label / .profile-banner-name omitted -- dead
   selectors, no current equivalent, see file header.)
   ============================================================ */

.profile-page .profile-banner-top {
    background: linear-gradient(145deg, #202226 0%, #1b1d21 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}


/* ============================================================
   4. SETTINGS BUTTON
   ============================================================ */

.profile-page .profile-settings-link {
    background: linear-gradient(145deg, #1c1e23, #17191e) !important;
    color: #c4c7ce !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20) !important;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.profile-page .profile-settings-link:hover {
    color: #ec3d8f !important;
    background: rgba(236, 61, 143, 0.07) !important;
    border-color: rgba(236, 61, 143, 0.52) !important;
}


/* ============================================================
   5. MAIN BANNER
   Keep custom banner image intact -- this rule never touches
   background-image, only border/shadow.
   ============================================================ */

.profile-page .profile-banner {
    border-left: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: inset 0 -35px 60px rgba(0, 0, 0, 0.25) !important;
}


/* ============================================================
   6. PROFILE HEADER / INFO AREA
   ============================================================ */

.profile-page .profile-header {
    background: linear-gradient(145deg, #1e2025 0%, #191b1f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}


/* ============================================================
   7. PROFILE AVATAR
   No size changes -- this rule never touches width/height.
   ============================================================ */

.profile-page .avatar-wrapper .profile-avatar {
    border: 2px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

.profile-page .profile-avatar:hover {
    border-color: rgba(236, 61, 143, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(236, 61, 143, 0.08), 0 9px 24px rgba(0, 0, 0, 0.30) !important;
}


/* ============================================================
   8. PROFILE USERNAME
   ============================================================ */

.profile-page .profile-username {
    color: #ffffff !important;
    font-weight: 800 !important;
}


/* ============================================================
   9. USER DETAILS
   Joined / Birthday / Gender etc.
   ============================================================ */

.profile-page .user-details,
.profile-page .detail-item {
    color: #c7cad1 !important;
}

.profile-page .detail-label {
    color: #858a94 !important;
    font-weight: 700 !important;
}

.profile-page .detail-value {
    color: #e0e2e6 !important;
}


/* ============================================================
   10. PROFILE QUICK INFO POPOVER
   Omitted in full -- feature does not exist in the live child
   page-profile.php. See file header.
   ============================================================ */


/* ============================================================
   11. PROFILE TABS AREA
   ============================================================ */

.profile-page .profile-tabs {
    background: linear-gradient(145deg, #1d1f24, #191b20) !important;
    border: 1px solid rgba(255, 255, 255, 0.085) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}


/* ============================================================
   12. MAIN PROFILE TAB BUTTONS
   Adapted 1:1 to the actual current selectors:
     .tab-button -> .profile-side-tab
     .tab-count  -> .side-tab-count
   .tab-icon omitted -- no equivalent icon element in the current
   .profile-side-tab markup. All visual values otherwise preserved
   exactly as supplied. Scoped to .profile-side-tab specifically, so
   this cannot affect the unrelated .translation-subtabs .tab-button
   rule defined elsewhere in page-profile.php.
   ============================================================ */

.profile-page .profile-side-tab {
    background: transparent !important;
    color: #aeb1ba !important;
    border-color: transparent !important;
    transition: color 0.17s ease, background 0.17s ease, border-color 0.17s ease;
}

.profile-page .profile-side-tab:hover {
    color: #ffffff !important;
    background: rgba(236, 61, 143, 0.055) !important;
}

.profile-page .profile-side-tab.active {
    color: #ec3d8f !important;
    background: rgba(236, 61, 143, 0.07) !important;
    border-color: #ec3d8f !important;
}

.profile-page .side-tab-count {
    background: #15171c !important;
    color: #c8cad0 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 999px !important;
}

.profile-page .profile-side-tab.active .side-tab-count {
    background: rgba(236, 61, 143, 0.14) !important;
    color: #ec3d8f !important;
    border-color: rgba(236, 61, 143, 0.38) !important;
}


/* ============================================================
   13. READ LATER / FAVORITES STATUS TABS
   ============================================================ */

.profile-page .manga-status-tabs {
    background: transparent !important;
}

.profile-page .manga-status-tab {
    background: #17191e !important;
    color: #aeb1ba !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 7px !important;
    transition: color 0.17s ease, background 0.17s ease, border-color 0.17s ease;
}

.profile-page .manga-status-tab:hover {
    color: #ffffff !important;
    background: rgba(236, 61, 143, 0.06) !important;
    border-color: rgba(236, 61, 143, 0.42) !important;
}

.profile-page .manga-status-tab.active {
    background: linear-gradient(90deg, #ec3d8f, #ef4696) !important;
    color: #ffffff !important;
    border-color: #ec3d8f !important;
    box-shadow: 0 6px 16px rgba(236, 61, 143, 0.16) !important;
}


/* ============================================================
   14. PROFILE CONTENT PANEL
   ============================================================ */

.profile-page .profile-content {
    background: linear-gradient(145deg, #1e2025 0%, #191b1f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}


/* ============================================================
   15. MANGA LIST HEADER
   ============================================================ */

.profile-page .manga-list-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}


/* ============================================================
   16. MANGA SEARCH INPUT
   ============================================================ */

.profile-page .manga-search-input {
    background: #15171c !important;
    color: #f1f2f4 !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20) !important;
    outline: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.profile-page .manga-search-input:focus {
    background: #181a1f !important;
    border-color: rgba(236, 61, 143, 0.68) !important;
    box-shadow: 0 0 0 3px rgba(236, 61, 143, 0.09) !important;
}

.profile-page .manga-search-input::placeholder {
    color: #777b84 !important;
}


/* ============================================================
   17. MANGA STATUS GRID
   Do not change columns or item count -- this rule never touches
   grid-template-columns or any layout property.
   ============================================================ */

.profile-page .manga-status-grid {
    background: transparent !important;
}


/* ============================================================
   18. STATUS ITEMS
   Visual shell only -- no data/content properties touched.
   ============================================================ */

.profile-page .manga-status-grid .status-item {
    background: linear-gradient(145deg, #181a1f, #14161a) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.profile-page .manga-status-grid .status-item:hover {
    transform: translateY(-2px);
    border-color: rgba(236, 61, 143, 0.50) !important;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.28) !important;
}


/* ============================================================
   19. EMPTY STATE
   ============================================================ */

.profile-page .empty-state {
    background: rgba(12, 14, 18, 0.18) !important;
    color: #a9adb5 !important;
    border: 1px dashed rgba(255, 255, 255, 0.09) !important;
    border-radius: 10px !important;
}

.profile-page .empty-state h3 {
    color: #f0f1f3 !important;
}

.profile-page .empty-state p {
    color: #858a94 !important;
}


/* ============================================================
   20. PROFILE MODALS
   Progress / Rating -- .progress-modal is shared by both #progress-modal
   and #rating-modal. Never touches display/visibility.
   ============================================================ */

.profile-page .progress-modal .modal-content {
    background: linear-gradient(145deg, #202226, #181a1f) !important;
    color: #f2f3f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38) !important;
}

.profile-page .progress-modal .btn-primary {
    background: linear-gradient(90deg, #ec3d8f, #ef4696) !important;
    color: #ffffff !important;
    border: 1px solid #ec3d8f !important;
    border-radius: 7px !important;
}

.profile-page .progress-modal .btn-secondary {
    background: #191b20 !important;
    color: #c7cad1 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 7px !important;
}


/* ============================================================
   21. MOBILE
   Shape + color only.
   ============================================================ */

@media (max-width: 768px) {

    .profile-page .profile-banner-top {
        border-radius: 10px 10px 0 0 !important;
    }

    .profile-page .profile-header {
        border-radius: 0 0 10px 10px !important;
    }

    .profile-page .profile-tabs,
    .profile-page .profile-content {
        border-radius: 10px !important;
    }

    .profile-page .manga-status-tab {
        border-radius: 6px !important;
    }

    .profile-page .manga-search-input {
        border-radius: 6px !important;
    }
}