/* Admin Styles - Dashboard, User Management, Audit Trail */

/* =============== Admin Page Styles =============== */

/* Admin Section Headings */
.admin-section-heading {
    display: inline-block;
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    vertical-align: middle;
}

.admin-section-heading-sm {
    display: inline-block;
    color: var(--theme-text-on-primary);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    vertical-align: middle;
    border-top: 2px solid var(--theme-border-light);
    padding-top: 5px;
    margin-top: 5px;
    width: 100%;
}

/* Audit controls - reduce vertical padding */
#admin-audit-controls {
    padding: 0 !important;
    align-items: center !important;
    height: 22px !important;
    line-height: 1 !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#admin-audit-controls > * {
    margin: 0 !important;
}

/* Admin Section Descriptions */
.admin-section-description {
    display: inline-block;
    color: white;
    font-size: 13px;
    margin: 0 0 4px 12px;
    opacity: 0.8;
    vertical-align: middle;
}

.admin-section-description-sm {
    display: inline-block;
    color: var(--theme-text-on-primary);
    font-size: 13px;
    margin: 0 0 4px 12px;
    vertical-align: middle;
}

/* Admin Setting Labels */
.setting-label {
    min-width: 180px;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 14px;
    color: var(--theme-text-primary);
}

/* Admin Setting Descriptions */
.setting-description {
    flex: 1;
    font-size: 13px;
    color: var(--theme-text-secondary);
    line-height: 1.2;
}

/* Admin Setting Group */
.admin-setting-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
}

/* Admin Section Container - reusable section wrapper with border separator */
.admin-section {
    margin-top: 0px;
    margin-bottom: 12px;
    padding-top: 5px;
    border-top: 2px solid var(--theme-border-light);
}

.admin-section-break {
    width: 100%;
    margin-bottom: 8px;
    padding-bottom: 8px;
    padding-top: 8px;
    border-bottom: 2px solid var(--theme-border-light);
    position: relative;
}

/* Admin Bottom Section */
.admin-bottom-section {
    background: var(--theme-hover-bg);
    border: 2px solid var(--theme-btn-primary-bg);
    border-radius: 12px;
    padding: 5px 15px 15px 15px;
    margin: 20px 0;
    position: relative;
}

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

/* Admin mode status text */
.admin-mode-status {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0;
    color: var(--theme-btn-primary-bg);
}

.admin-bottom-section.edit-mode .admin-mode-status {
    color: var(--theme-btn-danger-bg);
}

/* Admin warning floating indicator */
.admin-warning-floating {
    position: fixed;
    top: 50%;
    right: 125px;
    transform: translateY(-50%);
    z-index: 1000;
    background: var(--theme-btn-warning-bg);
    color: var(--color-black);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--theme-shadow-light);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    max-width: 150px;
    text-align: center;
    line-height: 1.4;
}

/* Admin header clickable area */
.admin-header-clickable {
    cursor: pointer;
    display: block;
    margin: -25px -15px 15px -15px;
    padding: 25px 15px 0 15px;
    position: relative;
}

.admin-header-clickable:hover {
    opacity: 0.9;
}

.admin-header-clickable:hover .admin-mode-status {
    transform: scale(1.02);
    transition: transform 0.2s;
}

/* Admin Stats Columns */
.admin-stats-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-stats-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-stats-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 100px;
}

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

/* Admin Settings Bar */
.admin-settings-bar {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
    padding: 0 20px 10px 20px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Spacing between settings sections */
.admin-settings-bar + .admin-settings-bar {
    margin-top: 5px;
}

/* Tracker Control Buttons */
.tracker-control-buttons {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 4px;
}

.tracker-control-btn {
    flex: 1;
    padding: 3px 10px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tracker-control-btn.success {
    background: var(--theme-btn-success-bg);
    color: var(--theme-text-on-primary);
}

.tracker-control-btn.success:hover {
    background: var(--theme-btn-success-hover-bg);
}

.tracker-control-btn.secondary {
    background: var(--theme-btn-disabled-bg);
    color: var(--theme-text-on-primary);
}

.tracker-control-btn.secondary:hover {
    background: var(--theme-btn-disabled-hover-bg);
}

.tracker-control-btn.primary {
    background: var(--theme-btn-primary-bg);
    color: var(--theme-text-on-primary);
}

.tracker-control-btn.primary:hover {
    background: var(--theme-btn-primary-hover-bg);
}

.tracker-control-btn.danger {
    background: var(--theme-btn-danger-bg);
    color: var(--theme-text-on-primary);
}

.tracker-control-btn.danger:hover {
    background: var(--theme-btn-danger-hover-bg);
}

/* Legacy admin-setting-group styles removed - now defined at top of file (lines 89-95) */

/* Legacy setting-label styles removed - now defined at top of file (lines 78-81) */

.setting-toggle {
    margin-bottom: 0;
    cursor: pointer;
}

.setting-status {
    padding: 0 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    height: 18px;
    line-height: 18px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.2s ease;
    background-color: var(--theme-btn-primary-bg);
    color: var(--theme-text-on-primary);
    border-color: var(--theme-btn-primary-border);
}

.setting-status:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    background-color: var(--theme-btn-primary-hover-bg);
    border-color: var(--theme-btn-primary-hover-border);
}

.setting-status.enabled {
    background-color: var(--theme-btn-success-bg);
    color: var(--theme-text-on-primary);
    border-color: var(--theme-btn-success-border);
}

.setting-status.enabled:hover {
    background-color: var(--theme-btn-success-hover-bg);
    border-color: var(--theme-btn-success-hover-border);
}

.setting-status.disabled {
    background-color: var(--theme-btn-disabled-bg);
    color: var(--theme-text-on-primary);
    border-color: var(--theme-btn-disabled-border);
}

.setting-status.disabled:hover {
    background-color: var(--theme-btn-disabled-hover-bg);
    border-color: var(--theme-btn-disabled-hover-border);
}

.setting-status.danger {
    background-color: var(--theme-btn-danger-bg);
    color: var(--theme-text-on-primary);
    border-color: var(--theme-btn-danger-border);
    transition: background 0.2s;
}

.setting-status.danger:hover {
    background-color: var(--theme-btn-danger-hover-bg);
    border-color: var(--theme-btn-danger-hover-border);
}

/* Admin color overrides */
.admin-stats-left .referral-code-item .points-available,
.admin-stats-left .referral-code-item .points-lifetime {
    color: var(--theme-badge-warning-bg);
}

.admin-stats-left .total-points-item .points-available,
.admin-stats-left .total-points-item .points-lifetime {
    color: var(--theme-btn-danger-bg);
}

.admin-stats-left .purchase-points .points-available,
.admin-stats-left .purchase-points .points-lifetime {
    color: var(--theme-btn-success-bg);
}

.admin-stats-left .referral-points .points-available,
.admin-stats-left .referral-points .points-lifetime {
    color: var(--theme-btn-primary-bg);
}

.admin-stats-left .purchase-percentage-item .percentage-input {
    color: var(--theme-btn-success-bg);
}

.admin-stats-left .referral-percentage-item .percentage-input {
    color: var(--theme-btn-primary-bg);
}

/* Admin password fields */
.form-group.admin-password-hidden,
#admin-confirm-password-group.admin-password-hidden,
#admin-current-password-group.admin-password-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.form-group.admin-password-shown,
#admin-confirm-password-group.admin-password-shown,
#admin-current-password-group.admin-password-shown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fixed width for admin buttons */
#admin-save-profile {
    min-width: 130px;
    text-align: center;
}

#admin-edit-profile {
    min-width: 110px;
    text-align: center;
}

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

#admin-public-info,
#admin-private-info {
    resize: vertical;
    min-height: 60px;
}

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

/* =============== Scroll Triggers =============== */
.scroll-trigger-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 40px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.admin-scroll-trigger {
    cursor: pointer;
    flex: 1;
    height: 40px;
    background-color: var(--theme-info-overlay-lightest);
    transition: background-color 0.2s;
}

.scroll-trigger-secondary {
    width: 96px;
    flex: none;
}

/* Scroll to top trigger - positioned on the right */
.admin-scroll-trigger.scroll-trigger-top {
    width: 96px;
    flex: none;
    background-color: var(--theme-success-overlay-light);
}

.admin-scroll-trigger.scroll-trigger-top:hover {
    background-color: var(--theme-success-overlay-light);
}

.admin-scroll-trigger:hover {
    background-color: var(--theme-info-overlay-lightest);
}

.scroll-trigger-hint {
    text-align: center;
    color: var(--theme-text-secondary);
    font-size: 12px;
    user-select: none;
    padding-top: 5px;
}

/* Center main trigger text on page, not in area */
.admin-scroll-trigger:not(.scroll-trigger-secondary):not(.scroll-trigger-top) .scroll-trigger-hint,
.admin-logs-scroll-trigger:not(.scroll-trigger-secondary):not(.scroll-trigger-top) .scroll-trigger-hint,
.audit-scroll-trigger:not(.scroll-trigger-secondary):not(.scroll-trigger-top) .scroll-trigger-hint {
    position: absolute;
    left: 50vw;
    transform: translateX(-50%);
    width: auto;
}

/* Secondary trigger text styling */
.scroll-trigger-secondary .scroll-trigger-hint,
.scroll-trigger-top .scroll-trigger-hint {
    font-size: 11px;
    white-space: normal;
    line-height: 1.2;
    padding: 5px;
    position: static !important;
    transform: none !important;
    left: auto !important;
    text-align: center;
}

.admin-scroll-trigger:hover .scroll-trigger-hint {
    color: var(--theme-text-primary);
}

/* Logs trigger */
.logs-trigger-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 40px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.admin-logs-scroll-trigger {
    cursor: pointer;
    flex: 1;
    height: 40px;
    background-color: var(--theme-info-overlay-lightest);
    transition: background-color 0.2s;
}

.admin-logs-scroll-trigger.scroll-trigger-secondary {
    width: 96px;
    flex: none;
}

/* Scroll to top trigger for logs - positioned on the right */
.admin-logs-scroll-trigger.scroll-trigger-top {
    width: 96px;
    flex: none;
    background-color: var(--theme-success-overlay-light);
}

.admin-logs-scroll-trigger.scroll-trigger-top:hover {
    background-color: var(--theme-success-overlay-light);
}

.admin-logs-scroll-trigger:hover {
    background-color: var(--theme-info-overlay-lightest);
}

.admin-logs-scroll-trigger:hover .scroll-trigger-hint {
    color: var(--theme-text-primary);
}

/* Editable percentage inputs */
.percentage-input {
    background: var(--theme-bg-primary);
    border: none;
    font-size: 12px;
    font-weight: bold;
    width: 24px;
    text-align: center;
    color: var(--color-black);
    outline: none;
    -moz-appearance: textfield;
    border-radius: 4px;
    transition: background-color 0.3s;
    padding: 2px 4px;
}

/* =============== User Management =============== */
.user-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-right: 17px;
}

.user-management-header h3 {
    margin: 0;
    padding: 0;
}

.user-management-actions {
    display: flex;
    align-items: center;
}

/* Add User button - EXACT from original admin.css:348-362 */
.btn-add-user {
    background-color: rgb(0, 123, 255);
    color: white;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    height: 32px; /* Match sort-btn height */
    width: 50px;
    box-sizing: border-box;
    line-height: 1.1;
}

.btn-add-user:hover {
    background-color: rgb(0, 86, 179);
}

/* Style the admin user list container */
#admin-user-list-container {
    overflow: auto !important;
    position: relative;
    /* Restore resize functionality */
    resize: vertical !important;
    min-height: 200px;
    height: 600px; /* Default height - user can resize */
    max-height: 1200px; /* Prevent excessive growth */
    margin-top: 8px;
}

/* User sort header wrapper - EXACT from original styles.css:4232-4239 */
.user-sort-header-wrapper {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 45px; /* Stick below menu-bar */
    z-index: 85; /* Below admin tabs (90) */
    padding-bottom: 2px;
}

/* Remove padding-top from wrapper child - EXACT from original styles.css:8749-8751 */
#admin-user-list-container > div.user-sort-header-wrapper > div {
    padding-top: 0;
}

.user-sort-header {
    display: flex;
    gap: 0;
    padding: 0;
    padding-right: 15px; /* Account for scrollbar width */
    border-radius: 8px;
    margin-bottom: 0; /* Removed gap between sort header and users */
    min-width: 0; /* Allow shrinking */
}

.user-sort-header .sort-btn:first-child {
    flex: 0 0 208px; /* Username column fixed width */
    max-width: 208px;
    justify-content: flex-start; /* Left align the text */
    padding-left: 60px; /* Match the content padding */
}

.user-sort-header .sort-btn:nth-child(2) {
    flex: 0 0 230px; /* Email column fixed width to match content */
    max-width: 230px;
    justify-content: flex-start; /* Left align the text */
    padding-left: 10px; /* Match email column padding */
}

.user-sort-header .sort-btn:nth-child(4),
.user-sort-header .sort-btn:nth-child(5),
.user-sort-header .sort-btn:nth-child(6) {
    width: 80px;
    flex-shrink: 0;
}

/* Discount columns - match the width of Purchase/Referral columns */
.user-sort-header .sort-btn:nth-child(7),
.user-sort-header .sort-btn:nth-child(8),
.user-sort-header .sort-btn:nth-child(9) {
    width: 70px;
    flex-shrink: 0;
}

/* Action headers group - EXACT from original styles.css:4261-4267 */
.action-headers-group {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Action header item - EXACT from original styles.css:4270-4285 */
.action-header-item {
    width: 36px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: rgba(250, 250, 250, 0.9);
    border: 1px solid rgba(156, 163, 175, 1.0);
    border-radius: 6px;
    font-size: 8px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1.0);
    text-align: center;
    padding: 3px 0 0 0;
}

.action-header-text {
    line-height: 1;
    margin-bottom: 1px;
}

.action-header-arrow {
    font-size: 7px;
    line-height: 1;
    visibility: hidden; /* Hidden by default, shown when active sort */
}

.action-header-item {
    cursor: pointer;
}

.action-header-item:hover {
    opacity: 0.9;
}

/* Action header colors - EXACT from original styles.css:4306-4328 */
.action-header-suspend {
    border-color: rgba(120, 53, 15, 1.0);
    background: rgba(254, 215, 170, 0.9);
    color: rgba(120, 53, 15, 1.0);
}

.action-header-forum {
    border-color: rgba(0, 123, 255, 1.0);
    background: rgba(191, 219, 254, 0.9);
    color: rgba(0, 123, 255, 1.0);
}

.action-header-deactivate {
    border-color: rgba(107, 114, 128, 1.0);
    background: rgba(250, 250, 250, 0.9);
    color: rgba(51, 51, 51, 1.0);
}

.action-header-delete {
    border-color: rgba(220, 38, 38, 1.0);
    background: rgba(254, 200, 200, 0.9);
    color: rgba(220, 38, 38, 1.0);
}

/* Role button - red/salmon color and width */
.user-sort-header .sort-btn[data-sort-type="role"] {
    background: rgba(254, 200, 200, 0.9);
    border-color: rgba(220, 38, 38, 1.0);
    color: rgba(220, 38, 38, 1.0);
    flex: 0 0 88px;
    min-width: 60px;
    justify-content: center;
    text-align: center;
}

.user-sort-header .sort-btn[data-sort-type="role"]:hover {
    background: rgba(254, 200, 200, 0.9);
    border-color: rgba(220, 38, 38, 1.0);
    color: rgba(220, 38, 38, 1.0);
}

/* Purchase button - green color and width */
.user-sort-header .sort-btn-purchase {
    background: rgba(198, 246, 213, 0.9);
    border-color: rgba(66, 140, 69, 1.0);
    color: rgba(66, 140, 69, 1.0);
    flex: 0 0 65px;
    min-width: 65px;
    max-width: 65px;
    justify-content: center;
}

.user-sort-header .sort-btn-purchase:hover {
    background: rgba(198, 246, 213, 0.9);
    border-color: rgba(66, 140, 69, 1.0);
    color: rgba(66, 140, 69, 1.0);
}

/* Referral button - blue color and width */
.user-sort-header .sort-btn[data-sort-type="referral"] {
    background: rgba(191, 219, 254, 0.9);
    border-color: rgba(0, 123, 255, 1.0);
    color: rgba(0, 123, 255, 1.0);
    flex: 0 0 60px;
    min-width: 60px;
    max-width: 60px;
    justify-content: center;
}

.user-sort-header .sort-btn[data-sort-type="referral"]:hover {
    background: rgba(230, 230, 230, 0.9);
    border-color: rgba(0, 123, 255, 1.0);
    color: rgba(0, 123, 255, 1.0);
}

/* Discount % button - orange color and width */
.user-sort-header .sort-btn-discount {
    background: rgba(254, 215, 170, 0.9);
    border-color: rgba(251, 146, 60, 1.0);
    color: rgba(251, 146, 60, 1.0);
    flex: 0 0 70px;
    min-width: 70px;
    max-width: 70px;
    justify-content: center;
}

.user-sort-header .sort-btn-discount:hover {
    background: rgba(254, 215, 170, 0.9);
    border-color: rgba(251, 146, 60, 1.0);
    color: rgba(251, 146, 60, 1.0);
}

/* Column1 (Discount Days) - blue color and width */
.user-sort-header .sort-btn-column1 {
    background: rgba(191, 219, 254, 0.9);
    border-color: rgba(0, 123, 255, 1.0);
    color: rgba(0, 123, 255, 1.0);
    flex: 0 0 70px;
    min-width: 70px;
    max-width: 70px;
    justify-content: center;
}

.user-sort-header .sort-btn-column1:hover {
    background: rgba(191, 219, 254, 0.9);
    border-color: rgba(0, 123, 255, 1.0);
    color: rgba(0, 123, 255, 1.0);
}

/* Column2 (Discount Uses) - blue color and width */
.user-sort-header .sort-btn-column2 {
    background: rgba(191, 219, 254, 0.9);
    border-color: rgba(0, 123, 255, 1.0);
    color: rgba(0, 123, 255, 1.0);
    flex: 0 0 70px;
    min-width: 70px;
    max-width: 70px;
    justify-content: center;
}

.user-sort-header .sort-btn-column2:hover {
    background: rgba(191, 219, 254, 0.9);
    border-color: rgba(0, 123, 255, 1.0);
    color: rgba(0, 123, 255, 1.0);
}

/* Base sort button - EXACT from original admin.css:409-427 */
.sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(191, 219, 254, 0.9);
    border: 1px solid rgba(0, 123, 255, 1.0);
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    color: rgba(0, 123, 255, 1.0);
    height: 32px;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.sort-btn:hover {
    color: rgba(0, 123, 255, 1.0);
    background: rgba(230, 230, 230, 0.9);
    border-color: rgba(0, 123, 255, 1.0);
}

/* Email button - purple like Referral Codes Used - EXACT from original admin.css:436-446 */
.sort-btn:nth-child(2) {
    background: rgba(233, 213, 255, 0.9);
    border-color: rgba(139, 92, 246, 1.0);
    color: rgba(139, 92, 246, 1.0);
}

.sort-btn:nth-child(2):hover {
    background: rgba(233, 213, 255, 0.9);
    border-color: rgba(139, 92, 246, 1.0);
    color: rgba(139, 92, 246, 1.0);
}

/* Sort arrow - black color for user list header */
.user-sort-header .sort-arrow {
    color: rgba(0, 0, 0, 1.0);
    font-weight: bold;
    min-width: 12px;
}

/* Sort arrow - EXACT from original admin.css:530-534 */
.sort-arrow {
    color: rgba(51, 51, 51, 1.0);
    font-weight: bold;
    min-width: 12px;
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* Allow proper shrinking */
}

/* User item - EXACT from original admin.css:545-573 */
.user-item {
    display: flex;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgb(156, 163, 175);
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    min-height: 48px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 8px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative; /* For absolute positioning of badges section */
}

/* User item hover - darker gray background */
.user-item:hover {
    background: rgba(128, 128, 128, 0.45);
}

/* User item selected */
.user-item.selected {
    background: rgba(128, 128, 128, 0.45);
}

/* User item deactivated - black overlay on top */
.user-item.deactivated {
    position: relative;
}

.user-item.deactivated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
    transition: background 0.2s ease;
}

.user-item.deactivated:hover::before {
    background: rgba(128, 128, 128, 0.45);
}

.user-item.deactivated.selected::before {
    background: rgba(128, 128, 128, 0.45);
}

.user-item.editing {
    background-color: rgb(254, 200, 200);
    border-color: rgb(220, 38, 38);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

/* User list column widths - EXACT from original styles.css:4473-4506 */
.user-username-column {
    flex: 0 0 150px;
    max-width: 150px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    min-width: 0;
    padding-left: 10px;
}

.user-email-column {
    flex: 0 0 222px;
    max-width: 230px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
}

/* Role badge column - fixed width to match header */
.role-badge-column {
    flex: 0 0 88px !important;
    width: 88px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-actions-column {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
}

/* Action buttons - EXACT from original styles.css:4508-4520 */
.action-btn {
    width: 33px;
    height: 32px;
    border: 1px solid var(--theme-border-light);
    background: var(--theme-bg-primary);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--theme-bg-secondary);
    border-color: var(--theme-border-light);
}

.user-info-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    /* padding-left removed - inherits from .content-section */
    min-width: 0;
}

.user-text-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    align-items: flex-start; /* Left align username and email */
    text-align: left;
}

.user-badges-section {
    display: flex;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    gap: 0;
}

.badge-column {
    flex: 0 1 60px; /* Match sort button sizing */
    min-width: 40px; /* Match sort button min */
    max-width: 70px; /* Match sort button max */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

/* Ensure all percentage columns have the same width */
.purchase-badge-column {
    flex: 0 0 65px; /* 5px narrower than discount column */
    min-width: 65px;
    max-width: 65px;
    margin-left: 15px; /* Gap after role column to account for scrollbar */
}

.discount-badge-column {
    flex: 0 0 70px; /* Fixed width for percentage columns */
    min-width: 70px;
    max-width: 70px;
}

.referral-badge-column {
    flex: 0 0 60px; /* 10px narrower than discount column */
    min-width: 60px;
    max-width: 60px;
}

.column1-badge-column {
    flex: 0 0 70px; /* Same width as discount column */
    min-width: 70px;
    max-width: 70px;
}

.column2-badge-column {
    flex: 0 0 70px; /* Same width as discount column */
    min-width: 70px;
    max-width: 70px;
}

.user-avatar-full {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-primary);
    font-weight: bold;
    font-size: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-avatar-full.has-initial {
    background: var(--theme-btn-primary-bg);
}

.user-avatar-full.has-image {
    background: var(--theme-btn-primary-bg);
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--theme-btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-primary);
    font-weight: bold;
    font-size: 16px;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.user-name {
    font-weight: 500;
    color: var(--theme-text-primary);
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Messaging suspend modal - target parent div containing the buttons */
div:has(#messaging-suspend-cancel) h3,
div:has(#messaging-suspend-confirm) h3 {
    color: white !important;
}

div:has(#messaging-suspend-cancel) p,
div:has(#messaging-suspend-confirm) p {
    color: white !important;
}

#messaging-suspend-cancel {
    color: white !important;
}

.user-role {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-on-primary);
    margin: 0;
    line-height: 1;
}

.user-role.admin {
    background-color: var(--theme-btn-danger-bg);
}

.user-role.support {
    background-color: var(--theme-badge-warning-bg);
    border: 1px solid var(--theme-btn-warning-color);
    color: var(--theme-btn-warning-color);
}

.user-role.user {
    background-color: var(--theme-btn-success-bg);
}

.user-custom-percentage {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-on-primary);
    margin: 0;
    line-height: 1;
    margin-left: 4px;
}

.user-custom-percentage.purchase {
    background-color: var(--theme-btn-danger-bg);
}

.user-custom-percentage.referral {
    background-color: var(--theme-badge-warning-bg);
}

.user-custom-percentage.discount {
    background-color: var(--theme-badge-warning-bg);
    border: 1px solid var(--theme-btn-warning-color);
    color: var(--theme-btn-warning-color);
}

.user-custom-percentage.column1 {
    background-color: var(--theme-btn-primary-bg);
}

.user-custom-percentage.column2 {
    background-color: var(--theme-btn-primary-bg);
}

.user-email {
    font-size: 14px;
    color: var(--theme-text-secondary);
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
}

.user-actions {
    display: flex;
    gap: 8px;
}

.btn-edit {
    padding: 6px 12px;
    background-color: var(--theme-btn-primary-bg);
    color: var(--theme-text-on-primary);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-edit:hover {
    background-color: var(--theme-btn-primary-hover-bg);
}

.btn-edit.disabled {
    background-color: var(--theme-text-secondary);
    color: var(--theme-bg-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-edit.disabled:hover {
    background-color: var(--theme-text-secondary);
}

/* =============== Admin Users View =============== */
.admin-users-section {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* =============== Admin Audit Trail =============== */
.admin-audit-section {
    margin-top: 0;
    padding: 8px 0 0 0;
    background: transparent;
    border-radius: 0;
}

/* Sticky Audit Header Wrapper - matches user-sort-header-wrapper */
.audit-header-wrapper {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 45px; /* Stick below menu-bar */
    z-index: 85; /* Same as user-sort-header-wrapper */
    background: var(--theme-bg-primary);
    padding-bottom: 2px;
    margin-bottom: 0; /* No gap between header and body */
}

/* Audit Header Table */
.audit-header-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Ensure columns stay aligned */
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-light);
    border-bottom: 2px solid var(--theme-border-light);
    border-radius: 8px 8px 0 0; /* Round top corners only */
}

.audit-header-table th {
    padding: 0 3px;
    text-align: left;
    font-weight: 600;
    color: var(--theme-text-primary);
    background: var(--theme-bg-secondary);
    position: relative;
    line-height: 1;
    box-sizing: border-box;
    font-size: 13px;
    height: 18px;
    overflow: hidden;
    vertical-align: top;
}

.audit-header-table th.sortable {
    cursor: pointer;
    user-select: none;
}

/* Column clear filter button (X) */
.column-clear-filter {
    cursor: pointer;
    color: var(--theme-btn-danger-bg);
    font-size: 16px;
    font-weight: bold;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    transition: all 0.2s;
}

.column-clear-filter:hover {
    background: var(--theme-btn-danger-bg);
    color: var(--theme-text-on-primary);
}

/* Column width matching between header and body tables */
.audit-header-table th:nth-child(1),
.audit-log-table td:nth-child(1) { width: 16%; } /* Timestamp */

.audit-header-table th:nth-child(2),
.audit-log-table td:nth-child(2) { width: 12%; } /* User */

.audit-header-table th:nth-child(3),
.audit-log-table td:nth-child(3) { width: 15%; } /* Action */

.audit-header-table th:nth-child(4),
.audit-log-table td:nth-child(4) { width: 12%; } /* Target User */

.audit-header-table th:nth-child(5),
.audit-log-table td:nth-child(5) { width: 12.5%; } /* Category */

.audit-header-table th:nth-child(6),
.audit-log-table td:nth-child(6) { width: 12.5%; } /* Severity */

.audit-header-table th:nth-child(7) { width: calc(20% - 17px); } /* Details - compensate for scrollbar */
.audit-log-table td:nth-child(7) { width: 20%; } /* Details */

/* Audit Log Table Styles */
.audit-log-table-container {
    max-height: 800px; /* Increased to allow taller views */
    height: 387px; /* Default starting height */
    overflow-y: auto;
    border: 1px solid var(--theme-border-light);
    border-top: none; /* No top border - connects to header */
    border-radius: 0 0 8px 8px; /* Round bottom corners only */
    margin-bottom: 0;
    position: relative;
    min-height: 200px;
    resize: vertical;
}

.audit-log-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Match header table */
}

/* Hide thead in body table since we have separate header */
.audit-log-table thead {
    display: none;
}

.audit-log-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--theme-text-primary);
    border-bottom: 2px solid var(--theme-border-light);
    position: relative;
}

.audit-log-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.audit-log-table td {
    padding: 2px 3px 2px;
    border-bottom: 1px solid var(--color-gray-400);
    font-size: 14px;
    box-sizing: border-box;
}

.audit-log-table tbody tr:hover {
    background: var(--theme-bg-secondary);
}

#audit-log-tbody > tr {
    background: rgba(0, 0, 0, 0.2);
}

/* Audit Data Formatting */
.audit-timestamp {
    white-space: nowrap;
}

.audit-admin {
    font-weight: 500;
}

.audit-action {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.audit-action.USER_CREATED { background: var(--theme-badge-success-bg); color: var(--theme-btn-success-bg); }
.audit-action.USER_MODIFIED { background: var(--theme-badge-info-bg); color: var(--theme-btn-primary-bg); }
.audit-action.USER_DELETED { background: var(--theme-card-active-bg); color: var(--theme-btn-danger-bg); }
.audit-action.ROLE_CHANGED { background: var(--theme-badge-warning-bg); color: var(--theme-btn-warning-bg); }
.audit-action.PASSWORD_CHANGED { background: var(--theme-bg-secondary); color: var(--theme-text-primary); }
.audit-action.SITE_SETTING_CHANGED { background: var(--theme-badge-info-bg); color: var(--theme-btn-primary-bg); }
.audit-action.USER_VIEWED { background: var(--theme-bg-secondary); color: var(--theme-text-primary); }
.audit-action.ADMIN_LOGIN { background: var(--theme-badge-success-bg); color: var(--theme-btn-success-bg); }
.audit-action.ADMIN_LOGOUT { background: var(--theme-bg-secondary); color: var(--theme-text-primary); }

.audit-target {
    color: var(--theme-btn-primary-bg);
}

.audit-details {
    font-size: 13px;
    color: var(--theme-text-secondary);
    max-width: 300px;
}

.audit-log-stats {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    background: var(--theme-bg-secondary);
    border-radius: 4px;
    font-size: 14px;
    color: var(--theme-text-secondary);
}

.audit-log-stats span {
    font-weight: 500;
}

/* Column Headers and Sorting */
.column-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 0;
    height: 100%;
}

.column-text {
    cursor: pointer;
    flex-grow: 1;
    padding: 0;
}

.column-text:hover {
    color: var(--theme-btn-primary-bg);
    text-decoration: underline;
}

.sort-arrows {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    text-align: center;
}

.sort-arrows:hover {
    background: var(--theme-hover-bg);
    border-radius: 3px;
}

/* Style for single sort arrow - applies to all tables */
.sort-arrow {
    color: var(--theme-text-primary);
    font-weight: 900; /* Extra bold */
    font-size: 10px; /* Match leaderboard size */
    min-width: 12px;
    margin-left: 5px;
    display: inline-block;
    cursor: pointer;
}

/* Default arrows when not sorted */
.sort-arrow::after {
    content: '⇅';
    opacity: 0.3;
}

/* Ascending sort arrow */
th.sort-asc .sort-arrow::after {
    content: '▲';
    opacity: 1;
}

/* Descending sort arrow */
th.sort-desc .sort-arrow::after {
    content: '▼';
    opacity: 1;
}

/* Keep the old .sort-arrows styles for backward compatibility */
.sort-arrows .sort-up,
.sort-arrows .sort-down {
    display: none;
}

.audit-log-table th.sort-asc .sort-arrows .sort-up,
.audit-header-table th.sort-asc .sort-arrows .sort-up {
    display: inline-block;
    color: var(--theme-text-primary);
    font-weight: bold;
}

.audit-log-table th.sort-desc .sort-arrows .sort-down,
.audit-header-table th.sort-desc .sort-arrows .sort-down {
    display: inline-block;
    color: var(--theme-text-primary);
    font-weight: bold;
}

/* Inline Search */
.audit-search-inline {
    padding: 0 6px !important;
    border: 1px solid var(--theme-border-light);
    border-radius: 4px;
    font-size: 12px;
    flex: 1;
    margin-left: 5px;
    width: 100%;
    height: 16px !important;
    line-height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    box-sizing: border-box !important;
}

.audit-search-inline:focus {
    outline: none;
    border-color: var(--theme-btn-primary-bg);
    box-shadow: 0 0 0 2px var(--theme-hover-bg);
}

/* Column Dropdown Filters */
.column-dropdown {
    position: fixed !important;  /* Changed to fixed positioning */
    background: var(--theme-bg-primary) !important;
    border: 1px solid var(--theme-border-light) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 8px var(--theme-shadow) !important;
    z-index: 2147483647 !important;  /* Maximum z-index */
    min-width: 180px !important;
    width: max-content !important;
    max-width: 300px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 11px !important;
    font-weight: normal !important;
    color: black !important;
    padding: 8px !important;
    display: none;
}

.column-dropdown[style*="display: block"] {
    display: block !important;
}

/* Ensure the parent header has position relative */
.sortable {
    position: relative !important;
}

/* Make column text clearly clickable */
.column-text {
    cursor: pointer;
    user-select: none;
    padding: 0;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.column-text:hover {
    background-color: var(--theme-hover-bg);
}

.column-dropdown-item {
    padding: 3px 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--theme-border-light);
    font-size: 11px;
}

.column-dropdown-item:hover {
    background: var(--theme-bg-secondary);
}

.column-dropdown-item.selected {
    background: var(--theme-badge-info-bg);
    font-weight: 600;
}

.column-dropdown-header {
    padding: 5px 8px;
    background: var(--theme-bg-secondary);
    border-bottom: 2px solid var(--theme-border-light);
    font-weight: 600;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

.column-dropdown-clear {
    color: var(--theme-btn-danger-bg);
    cursor: pointer;
    font-size: 11px;
    font-weight: normal;
}

.column-dropdown-clear:hover {
    text-decoration: underline;
}

/* Details column specific */
.details-header {
    width: 100%;
}

.details-text {
    cursor: pointer;
    padding-right: 5px !important;
    flex-grow: 0 !important;
}

.details-text:hover {
    color: var(--theme-btn-primary-bg);
    text-decoration: underline;
}

/* Resize Handle - Hidden since we're using CSS resize: vertical */
.audit-resize-handle {
    display: none;
}

/* Custom Date Filters */
.audit-custom-date-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
}

.audit-custom-date-row label {
    font-weight: 500;
    color: var(--theme-text-secondary);
    font-size: 14px;
}

.audit-log-container {
    background: var(--theme-bg-primary);
    border-radius: 8px;
    padding: 0;
    margin-top: 0;
    box-shadow: 0 2px 4px var(--theme-shadow-lightest);
}

.audit-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.audit-log-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.audit-log-actions {
    display: flex;
    gap: 10px;
}

.audit-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.audit-log-filters {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--theme-bg-secondary);
    border-radius: 8px;
}

.audit-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

.audit-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.audit-filter-group label {
    font-size: 12px;
    color: var(--theme-text-secondary);
    font-weight: 600;
}

.audit-filter-select,
.audit-search-input,
.audit-date-input {
    padding: 8px 12px;
    border: 1px solid var(--theme-border-light);
    border-radius: 4px;
    font-size: 14px;
    background: var(--theme-bg-primary);
    min-width: 150px;
}

/* Specific filter widths */
#audit-date-filter {
    width: 160px;
    color: var(--color-black);
}
#audit-user-filter {
    width: 180px;
}
#audit-type-filter {
    width: 160px;
}
#audit-target-filter {
    width: 160px;
}
#audit-search {
    flex: 1;
    min-width: 200px;
}
#audit-page-size {
    height: 28px;
    padding: 4px 8px;
}
#audit-saved-views {
    height: 28px;
    padding: 4px 8px;
    min-width: 150px;
}

.audit-search-input {
    width: 250px;
}

.audit-date-input {
    width: 150px;
}

.audit-filter-select:focus,
.audit-search-input:focus,
.audit-date-input:focus {
    outline: none;
    border-color: var(--theme-btn-primary-bg);
    box-shadow: 0 0 0 2px var(--theme-primary-overlay-light);
}

.audit-table-wrapper {
    overflow-x: auto;
    overflow-y: visible !important;  /* Allow dropdowns to show */
    border: 1px solid var(--theme-border-light);
    border-radius: 4px;
    position: relative;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
}

.audit-table th,
.audit-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border-light);
}

.audit-table th {
    background: var(--theme-bg-secondary);
    font-weight: 600;
    color: var(--theme-text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audit-table tr:hover {
    background: var(--theme-bg-secondary);
}

.audit-action-type {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.audit-action-type.create {
    background: var(--theme-badge-success-bg);
    color: var(--theme-btn-success-bg);
}

.audit-action-type.update {
    background: var(--theme-badge-info-bg);
    color: var(--theme-btn-primary-bg);
}

.audit-action-type.delete {
    background: var(--theme-card-active-bg);
    color: var(--theme-btn-danger-bg);
}

.audit-action-type.login {
    background: var(--theme-badge-warning-bg);
    color: var(--theme-btn-warning-bg);
}

.audit-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.audit-page-info {
    color: var(--theme-text-secondary);
    font-size: 14px;
}

.audit-page-controls {
    display: flex;
    gap: 10px;
}

.audit-page-btn {
    padding: 6px 12px;
    border: 1px solid var(--theme-border-light);
    background: var(--theme-bg-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.audit-page-btn:hover:not(:disabled) {
    background: var(--theme-bg-secondary);
    border-color: var(--theme-btn-primary-bg);
}

.audit-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.audit-export-controls {
    display: flex;
    gap: 10px;
}

.audit-export-btn {
    padding: 6px 12px;
    background: var(--theme-btn-success-bg);
    color: var(--theme-text-on-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.audit-export-btn:hover {
    background: var(--theme-btn-success-bg);
}

/* Audit scroll triggers */
.audit-trigger-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    height: 40px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.audit-scroll-trigger {
    cursor: pointer;
    flex: 1;
    height: 40px;
    background-color: var(--theme-hover-bg);
    transition: background-color 0.2s;
}

.audit-scroll-trigger.scroll-trigger-secondary {
    width: 96px;
    flex: none;
}

.audit-scroll-trigger:hover {
    background-color: var(--theme-hover-bg);
}

.audit-scroll-trigger:hover .scroll-trigger-hint {
    color: var(--theme-text-primary);
}

/* Audit log table with resize */
.audit-log-viewer {
    resize: vertical;
    overflow: auto;
    min-height: 200px;
    max-height: 600px;
    height: 400px;
    border: 1px solid var(--theme-border-light);
    border-radius: 4px;
    padding: 10px;
    background: var(--theme-bg-primary);
}

.audit-log-viewer::-webkit-resizer {
    background: transparent;
    width: 100%;
    height: 10px;
    cursor: ns-resize;
}

/* Enhanced filter styles */
.filter-badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--theme-badge-info-bg);
    color: var(--theme-btn-primary-bg);
    border-radius: 4px;
    font-size: 12px;
    margin-right: 5px;
}

.filter-clear-all {
    color: var(--theme-btn-danger-bg);
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
}

.filter-clear-all:hover {
    color: var(--theme-btn-danger-bg);
}

/* Admin Settings View - Scrollable content below tab menus */
#admin-settings-view {
    overflow-y: auto;
    height: calc(100vh - 80px); /* viewport - header space */
    resize: vertical;
    min-height: 200px;
    /* padding-right removed - inherits from .content-section */
}

/* Admin Theme View - Container for theme content */
#admin-my-theme-view {
    height: calc(100vh - 64px - 40px - 40px); /* viewport - content-section top - main tabs - second-level tabs */
}

/* Admin Theme Section - Scrollable content */
#admin-my-theme-view .admin-theme-section {
    padding: 0;
    overflow-y: auto;
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Transparent scrollbar for admin theme view */
#admin-my-theme-view .admin-theme-section::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Admin Rewards View - Scrollable content below tab menus */
#admin-rewards-view {
    overflow-y: auto;
    height: calc(100vh - 64px - 40px - 40px); /* viewport - content-section top - main tabs - second-level tabs */
    /* padding-right removed - inherits from .content-section */
}

/* Admin Dashboard View - Scrollable content below tab menus */
#admin-dashboard-view {
    overflow-y: auto;
    height: calc(100vh - 64px - 40px - 40px); /* viewport - content-section top - main tabs - second-level tabs */
    /* padding-right removed - inherits from .content-section */
}

/* Admin Tracker Results View - Scrollable content below tab menus */
#admin-tracker-results-view {
    overflow-y: auto;
    height: calc(100vh - 64px - 40px - 40px); /* viewport - content-section top - main tabs - second-level tabs */
    /* padding-right removed - inherits from .content-section */
}

/* Admin Analytics View - Scrollable content below tab menus */
#admin-analytics-view {
    overflow-y: auto;
    height: calc(100vh - 64px - 40px - 40px); /* viewport - content-section top - main tabs - second-level tabs */
    /* padding-right removed - inherits from .content-section */
}

/* Admin History View - Scrollable content below tab menus */
#admin-my-history-view {
    overflow-y: auto;
    height: calc(100vh - 64px - 40px - 40px); /* viewport - content-section top - main tabs - second-level tabs */
    /* padding-right removed - inherits from .content-section */
}

/* Admin Activity View - Scrollable content below tab menus */
#admin-my-activity-view {
    overflow-y: auto;
    height: calc(100vh - 64px - 40px - 40px); /* viewport - content-section top - main tabs - second-level tabs */
    /* padding-right removed - inherits from .content-section */
}

/* Admin placeholders - padding removed, inherits from .content-section */
#admin-overview-placeholder,
#admin-history-placeholder,
#admin-activity-placeholder {
    /* Padding removed - inherits from .content-section */
}

/* Removed padding overrides - .view-tabs now uses standard .menu-base padding */

/* Profile activity sort button padding */
#profile-activity-sort-btn {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* =============== Theme Selector =============== */
#admin-theme-subtabs {
    margin-bottom: 8px;
}

.admin-theme-section {
    padding: 8px 0 10px 0;
    border-radius: 8px;
}

.theme-section-title {
    color: var(--theme-text-on-primary);
}

/* Tracker subtabs - sticky at top so they don't scroll with content */
#admin-tracker-subtabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--theme-bg-primary);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.theme-option {
    cursor: pointer;
    border: 2px solid var(--theme-text-secondary);
    border-radius: 8px;
    padding: 15px;
    transition: all 0.2s;
    background: var(--theme-card-bg);
    color: var(--theme-bg-secondary);
}

.theme-option:hover {
    border-color: var(--theme-text-on-primary);
    box-shadow: 0 4px 8px var(--theme-primary-overlay-light);
    transform: translateY(-2px);
}

.theme-option.selected {
    border-color: var(--theme-text-on-primary);
    background: var(--theme-primary-overlay-lightest);
}

.theme-option.active {
    border-color: var(--theme-text-on-primary);
    border-width: 3px;
    background: var(--theme-bg-secondary);
}

.theme-option.active .theme-name {
    color: var(--color-black);
}

.theme-option.active .theme-name::after {
    content: " ✓";
    color: var(--color-black);
    font-weight: bold;
}

.theme-preview {
    border-radius: 6px;
    margin-bottom: 12px;
    height: 150px;
    width: 100%;
    overflow: hidden;
    /* background properties set via inline styles in JS */
}

.theme-preview-colors {
    display: flex;
    gap: 8px;
}

.theme-preview-colors span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--theme-text-on-primary);
    box-shadow: 0 2px 4px var(--theme-shadow-lightest);
}

.theme-name {
    text-align: center;
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 14px;
    margin-top: 8px;
}