/* ============================================
   PROFILE STYLES (Date: 2025-11-10)
   ============================================

   Scope: User profile pages, profile sections, activity displays
   Related JS: profileSystem.js, adminProfileSystem.js, profileActivitySections.js
   Related Pages: Profile page (user and admin views)

   BEFORE EDITING:
   - Profile styles belong HERE, not elsewhere
   - Shared components belong in components/
   - Theme colors belong in themes/
   - Check CLAUDE.md Section 2d for architecture

   ============================================ */

/* Profile Container and Layout */

/* ============================================
   RESTORED: Missing Container Hierarchy
   Date: 2025-11-12
   Source: Old styles.css lines 1395-1594
   ============================================ */

#profile-content {
    overflow: hidden;
    height: 100%;
}

#profile {
    padding: 0 !important;
}

/* User profile placeholders - flex column layout */
#profile-overview-placeholder,
#profile-history-placeholder,
#profile-activity-placeholder {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: visible !important;
    padding: 0 20px !important;
    box-sizing: border-box;
}

/* Moveable profile section - setup flex but don't scroll here */
.profile-overview-section {
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Profile, History, and Activity sections - scrollable content areas */
#profile-section,
#history-section,
#activity-section {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 8px 20px !important;
    background: none !important;
    border: none !important;
}

/* Add gap between items in history and activity sections */
#history-section,
#activity-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

/* Remove blue box from the wrapper profile-bottom-section in profile-overview-section */
.profile-overview-section > .profile-bottom-section {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Profile sections */
.profile-history-section,
.profile-activity-section {
    padding: 0 !important;
    box-sizing: border-box;
}

/* ============================================
   RESTORED: Admin Profile Tabs
   Date: 2025-11-12
   Source: Old styles.css lines 1450-1600
   ============================================ */

/* Admin Profile View Tabs - Copy of forum-view-tabs for admin user profile page */
.admin-profile-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--theme-border-light);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 3px 20px;
    margin: 0;
    justify-content: flex-start;
    overflow: hidden;
}

/* Profile sub-tabs (second level) - no bottom border */
.admin-profile-view-tabs.profile-subtabs {
    border-bottom: 0;
}

/* Second tab menu - stack directly below first */
.admin-profile-view-tabs + .admin-profile-view-tabs {
    top: 24px; /* Stack below first menu - slight movement is normal for sticky elements */
}

/* Admin Profile Tab - Copy of forum-tab for admin user profile page */
.admin-profile-tab {
    background: transparent;
    border: none;
    padding: 0px 2px 8px 2px; /* Added bottom padding for underline spacing */
    font-size: 14px;
    line-height: 1.4; /* Consistent text rendering */
    /* Color controlled by colorSchemeManager.js to match nav menu */
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
    position: relative;
    user-select: none; /* Prevent text selection on double-click */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}

/* Reduce right padding for following and bookmark tabs */
.admin-profile-tab[data-view="following"],
.admin-profile-tab[data-view="bookmarked"],
.admin-profile-tab[data-view="admin-following"],
.admin-profile-tab[data-view="admin-bookmarks"] {
    padding-right: 4px;
}

.admin-profile-tab:hover {
    /* background removed - underline animation provides hover feedback */
    color: var(--theme-btn-primary-bg);
}

.admin-profile-tab.active {
    /* background-color removed - solid underline provides active feedback */
    /* color stays same as inactive - underline shows active state */
    text-shadow: none !important;
    border-bottom-color: transparent;
    font-weight: 500;
}

.admin-profile-tab.active:hover {
    /* background-color removed - underline provides feedback */
    /* color stays same - underline shows active state */
    text-shadow: none !important;
}

/* Admin toggleable tab hover effect when active */
.admin-profile-tab.active[data-view^="admin-"]:hover {
    opacity: 0.8;
    transform: scale(1.02);
    transition: all 0.2s ease;
}


/* Profile Header and Avatar */


/* Profile Activity Sections */


/* Profile History and Analytics */


/* Profile Subsections and Cards */
#profile-purchase-history-content,
#profile-referral-history-content,
#profile-discounts-history-content,
#profile-redeemed-history-content {
    display: none;
}

.menu-item[href="#logout"] {
    margin-right: 10px !important;
    flex-shrink: 0; /* Never shrink logout button */
    min-width: fit-content; /* Ensure text is always visible */
}

/* Messages menu item - only keep the margin for spacing */
/* Remaining styles - Profile and Pages (to be further refactored) */
/* Login & Profile Styles */
.login-container {
    max-width: 500px;
    margin: 10px auto;
    padding: 20px;
}

/* Profile container - no special styling needed */

/* Profile overview section in admin context - no background (applied to inner section instead) */
.profile-overview-section[data-context="admin"] {
    padding: 0;
    margin: 0;
    position: relative;
}

/* Profile overview section in user context - match admin padding */
.profile-overview-section[data-context="user"] {
    padding: 0;
    margin: 0;
    position: relative;
}

/* Reduce space above REVIEW MODE container - profile page only */
body.profile-page .content-section {
    padding-top: 0;
}

/* Profile Bottom Section (matching admin styles) */
.profile-bottom-section {
    position: relative;
    padding: 5px 20px 25px 20px;
    margin: 8px 0 0 0;
    background-color: var(--theme-bg-secondary);
    border: 2px solid var(--theme-text-secondary);
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* In admin context, profile-bottom-section gets styling based on edit mode */
.profile-overview-section[data-context="admin"] .profile-bottom-section {
    /* Keep default blue review mode from base .profile-bottom-section */
    padding: 5px 20px 5px 20px;
}

.profile-bottom-section.review-mode {
    /* Removed background and border - keeping clean layout */
}

.profile-bottom-section.edit-mode {
    background-color: var(--theme-badge-danger-bg) !important;
    border: 2px solid var(--theme-badge-danger-bg) !important;
}

/* Profile mode status text (matching admin) */
.profile-bottom-section .profile-mode-status {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: var(--theme-btn-primary-bg);
    transition: color 0.3s ease;
    z-index: 10;
    writing-mode: vertical-lr;
    text-orientation: upright;
    letter-spacing: 0;
    background: none !important;
    border-radius: 0;
    min-width: auto;
}

/* Review mode text styling for profile */
.profile-bottom-section.review-mode .profile-mode-status {
    color: var(--theme-btn-primary-bg) !important;
}

/* Edit mode text styling for profile */
.profile-bottom-section.edit-mode .profile-mode-status {
    color: var(--theme-btn-danger-bg) !important;
}

/* Make columns narrower in profile bottom section to show container border */
.profile-bottom-section .profile-left-column,
.profile-bottom-section .profile-right-column {
    margin: 0 10px;
}

/* Profile header row for title and warning */
.profile-header-row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0; /* Remove space below header */
    min-height: 30px;
}

.profile-header-row h3 {
    margin: 0;
    flex: 0 0 auto;
}

/* Profile warning floating indicator (like admin) */
.profile-warning-floating {
    position: absolute;
    right: 125px; /* Position over Cancel button area */
    top: 50%; /* Center vertically in header */
    transform: translateY(-50%);
    background-color: transparent;
    color: var(--theme-badge-danger-bg);
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    box-shadow: none;
    white-space: nowrap;
    z-index: 10; /* Ensure it's above other content */
}

/* Admin mode status text - Profile page specific (vertical orientation) */
.profile-overview-section .admin-mode-status {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: var(--theme-btn-primary-bg);
    transition: color 0.3s ease;
    z-index: 10;
    writing-mode: vertical-lr;
    text-orientation: upright;
    letter-spacing: 0;
}

/* Edit mode text styling */
.profile-overview-section[data-context="admin"] .profile-bottom-section.edit-mode .admin-mode-status {
    color: var(--theme-btn-danger-bg);
}

/* Floating warning indicator for unsaved changes - Profile page specific (absolute position) */
.profile-overview-section .admin-warning-floating {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: auto;
    min-width: 140px;
    box-sizing: border-box;
    background-color: var(--theme-warning-overlay-yellow);
    color: var(--theme-btn-warning-bg);
    border: 1px solid var(--theme-badge-warning-bg);
    border-radius: 4px;
    padding: 4px 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    z-index: 1000;
    display: none;
    box-shadow: 0 2px 8px var(--theme-shadow);
}

.login-container h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

.login-form {
    margin-bottom: 30px;
}

/* .form-group - MOVED TO components/forms.css */
/* Profile-specific form-group overrides */
.profile-right-column .form-group {
    margin: 2px 0 0 0;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-section {
    background: var(--theme-bg-secondary);
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--theme-border-light);
}

/* Remove spacing within profile sections only */
.profile-section .form-input {
    padding: 0;
    margin: 0;
}

.profile-section .form-textarea {
    padding: 0 8px;
    margin: 0;
    min-height: 22px;
    box-sizing: border-box;
    resize: vertical;
    overflow-y: auto;
}

.profile-section .field-hint {
    margin: 0;
    padding: 0;
}

.profile-section .confirm-password-section {
    padding: 0;
    margin: 0;
}

.profile-section .password-match-error {
    margin: 0;
    padding: 0;
}


.profile-section h3 {
    margin-bottom: 0;
    color: var(--theme-text-primary);
    font-size: 16px;
    border-bottom: 1px solid var(--theme-border-light);
    padding-bottom: 0;
}

.profile-field {
    display: flex;
    margin-bottom: 0;
    align-items: center;
}

.profile-field label {
    min-width: 120px;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.profile-field span {
    color: var(--theme-text-primary);
}

/* Email Display and Status */
.email-display {
    color: var(--theme-text-primary);
    font-weight: 500;
    margin-right: 10px;
}

/* .btn-link - MOVED TO components/buttons.css */

.field-status {
    font-size: 12px;
    margin-left: 10px;
}

.field-status.available {
    color: var(--theme-btn-success-bg);
}

.field-status.taken {
    color: var(--theme-badge-danger-bg);
}

/* Enhanced Profile Page Layout */
/* Profile page container - no special styling needed */

.profile-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 0;
    position: relative;
}

@media (max-width: 768px) {
    .profile-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.profile-left-column,
.profile-right-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.profile-edit-card,
.profile-stats-card,
.profile-activity-card {
    border-radius: 8px;
    border: 0;
    padding: 5px 0;
}

/* Activity posts use lighter text - component-specific post text variables */
.profile-activity-section .forum-post-text,
.profile-activity-section .forum-post-title,
.profile-activity-section .forum-post-content,
.profile-activity-section .ticket-message-content {
    color: var(--theme-post-text-secondary);
}

.profile-stats-card {
    padding-top: 0;
    padding-bottom: 0;
}

/* Only remove padding from admin user list container */
#admin-user-list-container.profile-stats-card {
    padding: 0;
}



.profile-stats-card h3,
.profile-rewards-card h3,
.profile-referral-history-card h3 {
    margin: 0;
    color: var(--theme-text-primary);
    font-size: 1.3em;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: space-between;
}

.profile-card-header {
    padding: 0;
    border-bottom: 0;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
}

.profile-card-header h3 {
    margin: 0;
    color: var(--theme-text-primary);
    font-size: 1.3em;
}

.profile-card-actions {
    display: flex;
    gap: 0;
}

.profile-card-content {
    padding: 0;
}

.profile-section h4 {
    color: var(--theme-text-primary);
    margin-bottom: 0;
    font-size: 1.1em;
    font-weight: 600;
}

/* .btn-secondary now uses button component system (components/buttons.css) */
/* .btn-danger now uses button component system (components/buttons.css) */

/* Profile Picture Section */
.profile-picture-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.profile-avatar {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--theme-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--theme-border-light);
    color: var(--theme-text-on-primary);
}

.profile-avatar-change {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--theme-btn-primary-bg);
    color: var(--theme-text-on-primary);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.profile-avatar-change:hover {
    background: var(--theme-btn-primary-bg);
}

.camera-text {
    font-size: 8px;
    position: absolute;
    bottom: -2px;
    right: -28px;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.password-status {
    font-size: 12px;
    color: var(--theme-text-secondary);
    font-weight: normal;
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 20px;
}

.password-status #password-status,
.password-status #admin-password-status {
    flex: 1;
    text-align: center;
}

/* Password field background colors */
.password-invalid {
    background-color: var(--theme-card-active-bg) !important;
    border-color: var(--theme-badge-danger-bg) !important;
}

.password-valid {
    background-color: var(--theme-badge-success-bg) !important;
    border-color: var(--theme-btn-success-bg) !important;
}

.password-neutral {
    background-color: var(--theme-badge-warning-bg) !important;
    border-color: var(--theme-btn-warning-bg) !important;
}

/* Inline edit fields next to profile picture */
.profile-field-inline {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    gap: 8px;
}

.profile-field-inline label {
    font-weight: 500;
    color: var(--theme-text-secondary);
    min-width: 70px;
    font-size: 14px;
}

.inline-edit-input {
    flex: 1;
    padding: 0 8px;
    border: 1px solid var(--theme-border-light);
    border-radius: 4px;
    font-size: 14px;
    background: var(--theme-bg-primary);
    transition: border-color 0.2s;
    min-height: 0;
    height: 22px;
    box-sizing: border-box;
}

.inline-edit-input:focus {
    outline: none;
    border-color: var(--theme-btn-primary-bg);
    box-shadow: 0 0 0 2px var(--theme-primary-overlay-light);
}

.inline-edit-input:disabled {
    background-color: transparent;
    color: var(--theme-text-secondary);
    cursor: not-allowed;
    border-color: transparent;
}

/* Email change warning text */
.email-warning-text {
    font-size: 12px;
    color: var(--theme-btn-warning-bg);
    margin-top: 4px;
    margin-left: 78px; /* Align with input field */
    background: var(--theme-badge-warning-bg);
    padding: 6px 8px;
    border-radius: 4px;
    border-left: 3px solid var(--theme-btn-warning-bg);
    animation: fadeIn 0.3s ease-in;
}

/* Help text under form fields */
.edit-field-help {
    font-size: 11px;
    color: var(--theme-text-secondary);
    margin-top: 0;
    margin-bottom: 0;
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--theme-badge-warning-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-primary);
    font-size: 32px;
    font-weight: bold;
    margin-right: 10px;
}

.role-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: -5px;
    right: -5px;
}

/* Role badge styles moved to components/badges.css for unified management */

.profile-picture-actions {
    flex: 1;
}

.upload-hint {
    font-size: 12px;
    color: var(--theme-text-secondary);
    margin: 2px 0 0 0;
}

/* Form Elements */
.form-textarea {
    width: 100%;
    padding: 0 8px;
    border: 1px solid var(--theme-border-light);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    height: 22px;
    min-height: 0;
    box-sizing: border-box;
}

.form-textarea:focus {
    border-color: var(--theme-badge-warning-bg);
    outline: none;
    box-shadow: 0 0 0 2px var(--theme-purple-overlay-lightest);
}

/* Warning Section */
.profile-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--theme-badge-warning-bg);
    border: 1px solid var(--theme-badge-warning-bg);
    border-radius: 4px;
    font-size: 13px;
}

.warning-icon {
    color: var(--theme-badge-danger-bg);
}

.warning-text {
    color: var(--theme-badge-warning-bg);
    font-weight: 500;
}

/* Field Hints and Notes */
.field-hint {
    font-size: 12px;
    color: var(--theme-text-secondary);
    margin: 0;
}

.security-note {
    color: var(--theme-badge-danger-bg) !important;
    font-weight: 500;
}

.password-match-error {
    font-size: 12px;
    color: var(--theme-badge-danger-bg);
    margin: 2px 0 0 0;
}

.confirm-password-section {
    margin-top: 15px;
    transition: all 0.3s ease;
}

/* Duplicate .security-note removed - merged with definition at line 694 */


/* Points Section */

/* Activity Stats Grid */
.activity-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

.stat-item {
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid var(--theme-border-light);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.stat-item.stat-posts {
    background: var(--theme-badge-info-bg);
    border-color: var(--theme-btn-primary-bg);
}

.stat-item.stat-comments {
    background: var(--color-orange-100);
    border-color: var(--color-orange-100);
}

.stat-item.stat-likes {
    background: var(--theme-card-active-bg);
    border-color: var(--theme-badge-danger-bg);
}

.stat-item.stat-available {
    background: var(--theme-badge-success-bg);
    border-color: var(--theme-btn-success-bg);
}

.stat-item.stat-lifetime {
    background: var(--color-orange-100);
    border-color: var(--color-orange-100);
}

.stat-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.stat-number {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
}

.stat-posts .stat-number { color: var(--theme-btn-primary-bg); }
.stat-comments .stat-number { color: var(--theme-badge-warning-bg); }
.stat-likes .stat-number { color: var(--theme-badge-danger-bg); }
.stat-available .stat-number { color: var(--theme-btn-success-bg); }
.stat-lifetime .stat-number { color: var(--theme-btn-warning-color); }

.stat-icon {
    font-size: 14px;
    margin-right: 3px;
}

.stat-label {
    font-size: 11px;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* User Hover Popup */
.user-hover-popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--theme-badge-warning-bg);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 24px var(--theme-shadow-light);
    z-index: 10000;
    min-width: 280px;
    max-width: 320px;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: translateY(-10px);
}

/* Avatar Image Overlay */
.avatar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-shadow-darkest);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.avatar-overlay-image {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 10px 40px var(--theme-shadow-medium-dark);
    object-fit: contain;
}

.avatar-overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--theme-bg-primary);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--theme-shadow-medium);
    transition: transform 0.2s ease;
}

.avatar-overlay-close:hover {
    transform: scale(1.1);
}

.user-hover-popup.show {
    opacity: 1;
    transform: translateY(0);
}

.user-hover-popup:hover {
    border-color: var(--theme-badge-warning-bg);
    box-shadow: 0 10px 28px var(--theme-shadow);
}

.user-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
}

.user-popup-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-badge-warning-bg);
    color: var(--theme-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
    overflow: hidden;
}

.user-popup-info {
    flex: 1;
    min-width: 0;
}

.user-popup-username {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 4px;
    word-break: break-word;
}

.user-popup-role {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.user-popup-role.admin {
    background: var(--theme-card-active-bg);
    color: var(--theme-badge-danger-bg);
}

.user-popup-role.support {
    background: var(--theme-badge-info-bg);
    color: var(--theme-btn-primary-bg);
}

.user-popup-role.user {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}

.user-popup-referral {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.user-popup-referral:hover {
    background: var(--theme-border-light);
}

.user-popup-referral-label {
    font-size: 11px;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.user-popup-referral-code {
    font-size: 18px;
    font-weight: bold;
    color: var(--theme-badge-warning-bg);
    font-family: monospace;
    letter-spacing: 1px;
}

.user-popup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.user-popup-stat {
    text-align: center;
    padding: 8px;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
}

.user-popup-stat-value {
    font-size: 16px;
    font-weight: bold;
    color: var(--theme-text-primary);
}

.user-popup-stat-label {
    font-size: 10px;
    color: var(--theme-text-secondary);
    margin-top: 2px;
}

.user-popup-public-info {
    font-size: 13px;
    color: var(--theme-text-primary);
    line-height: 1.5;
    padding: 8px;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
    max-height: 80px;
    overflow-y: auto;
}

.user-popup-public-info:empty {
    display: none;
}

.user-popup-copy-hint {
    text-align: center;
    font-size: 11px;
    color: var(--color-white);
    margin-top: 8px;
    padding: 8px;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-light);
    border-radius: 6px;
}

/* Referral Code Display */
.referral-code-display {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
}

/* Referral Code Item Styling */
.referral-code-item {
    background: var(--theme-badge-info-bg);
    border: 1px solid var(--theme-btn-primary-bg);
}

/* Total Points Item Styling */
.total-points-item {
    background: rgba(0, 0, 0, var(--opacity-20));
    border: 1px solid var(--theme-btn-success-bg);
}

.referral-code-box {
    background: var(--theme-bg-primary);
    border: 2px solid var(--theme-btn-primary-bg);
    border-radius: 8px;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Content boxes inside profile sections need 20px side margins to align with tabs */
.profile-history-section > div > div,
.profile-activity-section > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.profile-history-section > div,
.profile-activity-section > div {
    resize: none !important;
}

/* ========================================
   COLOR AUDIT NAVIGATION - Highlight Animation
   ======================================== */

/* Red outline pulse animation for color audit navigation */
@keyframes colorAuditPulse {
    0% {
        outline: 5px solid rgba(var(--color-red-500-rgb), 0);
        outline-offset: 0px;
        box-shadow: 0 0 0 0 rgba(var(--color-red-500-rgb), 0);
    }
    10% {
        outline: 8px solid var(--color-red-500);
        outline-offset: 5px;
        box-shadow: 0 0 30px 10px rgba(var(--color-red-500-rgb), 0.6);
    }
    25% {
        outline: 8px solid var(--color-red-500);
        outline-offset: 5px;
        box-shadow: 0 0 35px 12px rgba(var(--color-red-500-rgb), 0.5);
    }
    50% {
        outline: 8px solid var(--color-red-500);
        outline-offset: 5px;
        box-shadow: 0 0 30px 10px rgba(var(--color-red-500-rgb), 0.5);
    }
    75% {
        outline: 8px solid rgba(var(--color-red-500-rgb), 0.9);
        outline-offset: 5px;
        box-shadow: 0 0 25px 8px rgba(var(--color-red-500-rgb), 0.4);
    }
    90% {
        outline: 6px solid rgba(var(--color-red-500-rgb), 0.6);
        outline-offset: 3px;
        box-shadow: 0 0 15px 5px rgba(var(--color-red-500-rgb), 0.3);
    }
    100% {
        outline: 5px solid rgba(var(--color-red-500-rgb), 0);
        outline-offset: 0px;
        box-shadow: 0 0 0 0 rgba(var(--color-red-500-rgb), 0);
    }
}

.color-audit-highlight {
    animation: colorAuditPulse 5s ease-in-out;
    position: relative;
    z-index: 9999 !important;
}

/* Profile Section Container Styles */
.profile-content-scrollable {
    overflow-y: auto;
    resize: vertical;
    min-height: 200px;
}

.profile-subsection-wrapper {
    background: var(--theme-card-bg);
    border: 2px solid var(--theme-card-border);
    border-radius: 8px;
    padding: 5px 0;
    margin: 8px 0;
    overflow: hidden;
}

/* Profile subsection headers - use theme colors instead of inline gray */
.profile-subsection-wrapper h3 {
    background: var(--theme-card-header-bg);
    color: var(--theme-text-primary);
    padding: 8px 20px !important;
    margin: 0;
    border-bottom: 1px solid var(--theme-card-border);
}

/* Resizable Referral History Cards */
.profile-referral-history-card {
    position: relative;
    overflow: auto;
}

/* ============================================
   RESTORED: Profile Cards (Category 4)
   Date: 2025-11-12
   Source: Old styles.css lines 6271-6327
   ============================================ */

/* Profile Rewards Card */
.profile-rewards-card {
    background: var(--theme-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--theme-shadow);
    border: 0;
    padding: 5px 20px;
}

/* Complete Referral History Card styling (was incomplete) */
.profile-referral-history-card {
    background: var(--theme-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--theme-shadow);
    border: 0;
    padding: 5px 20px 0 20px;
    position: relative;
    overflow: auto;
}

/* Referral History Card Resizer Handle */
.profile-referral-history-card::-webkit-resizer {
    background:
        linear-gradient(135deg, transparent 40%, var(--theme-bg-secondary) 40%, var(--theme-bg-secondary) 45%, transparent 45%),
        linear-gradient(135deg, transparent 55%, var(--theme-bg-secondary) 55%, var(--theme-bg-secondary) 60%, transparent 60%);
    border-radius: 0 0 8px 0;
    width: 16px;
    height: 16px;
    cursor: nw-resize;
}

.profile-referral-history-card:hover::-webkit-resizer {
    background:
        linear-gradient(135deg, transparent 40%, var(--theme-border-light) 40%, var(--theme-border-light) 45%, transparent 45%),
        linear-gradient(135deg, transparent 55%, var(--theme-border-light) 55%, var(--theme-border-light) 60%, transparent 60%);
}

/* Percentage Input Fields in Rewards Card */
.profile-rewards-card .purchase-percentage-item .percentage-input,
.profile-rewards-card .referral-percentage-item .percentage-input {
    color: inherit;
}

/* ============================================
   RESTORED: Profile Controls (Category 6)
   Date: 2025-11-12
   Source: Old styles.css lines 6330-6814
   ============================================ */

/* Profile Picture Row */
.profile-picture-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
}

/* Profile Actions Container */
.profile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

/* Profile Change Counter */
.profile-change-counter {
    background: var(--theme-badge-danger-bg);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px;
}

/* ============================================
   RESTORED: Profile Mode Status (Category 3)
   Date: 2025-11-12
   Source: Old styles.css lines 6762-6828
   ============================================ */

/* Profile Mode Status Badge */
.profile-mode-status {
    background: var(--theme-btn-success-bg);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    min-width: 80px;
}

.profile-mode-status.review-mode {
    background: var(--theme-btn-primary-bg);
}

.profile-mode-status.edit-mode {
    background: none !important;
}

/* Review Mode Container Styling */
.profile-overview-section.review-mode {
    background: var(--theme-info-overlay-blue-light);
    border: 2px solid var(--theme-btn-primary-bg);
    border-radius: 8px;
}

/* Review Mode - Disable Form Inputs */
.profile-overview-section.review-mode input,
.profile-overview-section.review-mode textarea {
    background-color: var(--theme-bg-secondary) !important;
    pointer-events: none;
    opacity: 0.7;
}

/* ============================================
   RESTORED: Profile Theme Section (Category 7)
   Date: 2025-11-12
   Source: Old styles.css lines 8762-8800
   ============================================ */

/* Profile Theme Content - Disable Parent Scroll */
#profile-theme-content {
    overflow: hidden;
    height: 100%;
}

/* Profile Theme Section - Match Forum Container Structure */
#profile-theme-content .profile-theme-section {
    padding: 0 20px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Transparent Scrollbar for Theme Section Container */
#profile-theme-content .profile-theme-section::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
}

#profile-theme-content .profile-theme-section {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Theme Content Area - Scrollable (Admin Version) */
#profile-theme-content .admin-theme-section {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Transparent Scrollbar for Theme Section */
#profile-theme-content .admin-theme-section::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
}

/* ============================================
   UNIFIED PROFILE CONTAINER ARCHITECTURE
   ============================================
   Critical styles for moveable profile container system.
   This container holds all 4 profile sections and can move
   between user profile view and admin profile view.

   Related code: src/js/adminProfileSystem.js
   Date: 2025-11-10
   ============================================ */

/* Unified Profile Container - moveable container holding all 4 profile sections */
.unified-profile-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Moveable profile section - setup flex when visible */
.profile-overview-section.section-visible,
.profile-history-section.section-visible,
.profile-activity-section.section-visible,
.profile-theme-section.section-visible {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Profile sub-tabs (second level) - use theme colors */
.view-tabs.subtabs {
    border-bottom: 0;
    background: var(--theme-card-header-bg);
}

/* Profile history and activity subtabs - specific styling */
.profile-history-section .view-tabs.subtabs,
.profile-activity-section .view-tabs.subtabs {
    background: var(--theme-card-header-bg);
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-card-border);
}

/* Profile sub-page hiding - controls visibility of sub-sections */
#profile-purchase-history-content,
#profile-forum-history-content,
#profile-support-history-content,
#profile-referral-history-content,
#profile-forum-activity-section,
#profile-support-activity-section {
    display: none;
}