/* == base.css == */
:root {
    --bg-color: #f4f4f9; /* Light mode background */
    --animated-bg-color: transparent; /* Default for light mode */
    --card-bg-color: rgba(255, 255, 255, 0.9);
    --text-color: #333; /* Light mode text */
    --text-secondary-color: #6c757d; /* Light mode secondary text */
    --primary-color: #23D4FE; /* سماوي عصري وحيوي */
    --primary-hover-color: #00B8E6; /* أغمق قليلاً */
    --accent-color: #667eea; /* بنفسجي متناسق */
    --border-color: #ddd; /* Light mode border */
    --input-bg-color: #fff;
    --shadow-color: rgba(35, 212, 254, 0.15);
    --navbar-bg: rgba(255, 255, 255, 0.7);
}

body.dark-mode {
    --bg-color: #0D1B2A; /* كحلي داكن جداً */
    --animated-bg-color: radial-gradient(ellipse at bottom, #1B263B 0%, #0D1B2A 100%); /* تدرج كحلي */
    --card-bg-color: rgba(27, 38, 59, 0.8); /* كحلي متوسط مع شفافية */
    --text-color: #FFFFFF; /* أبيض - Text */
    --text-secondary-color: #778DA9; /* أزرق فاتح أنيق */
    --primary-color: #23D4FE; /* سماوي مشرق */
    --primary-hover-color: #6FE4FF; /* أفتح قليلاً */
    --accent-color: #7c8df8; /* بنفسجي حيوي متناسق */
    --border-color: rgba(35, 212, 254, 0.3); /* سماوي شفاف */
    --input-bg-color: #0D1B2A; /* نفس لون الخلفية */
    --shadow-color: rgba(35, 212, 254, 0.3);
    --navbar-bg: rgba(27, 38, 59, 0.8); /* Match card background */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* تعديل: إزالة الهامش العلوي واستبداله بحشوة علوية */
    padding: 70px 20px 20px 20px;
    margin-top: 0;
    flex-grow: 1;
}

main, footer {
    width: 100%;
    max-width: 800px;
    background-color: var(--card-bg-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color); /* تعديل: إزالة الهامش السفلي */
    margin-bottom: 0;
    margin-top: 40px; /* NEW: Add consistent top margin for all pages */
    transition: background-color 0.3s, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    border: 1px solid var(--border-color);
}

/* NEW: Scroll to Top Button Styles */
#scroll-to-top-btn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    bottom: 20px; /* Place at the bottom */
    left: 20px; /* Place at the left (RTL) */
    z-index: 1000; /* High z-index to be on top */
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5em;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: opacity 0.3s, background-color 0.3s, transform 0.3s;
    opacity: 0;
    transform: scale(0.8);
}

#scroll-to-top-btn:hover {
    background-color: var(--primary-hover-color);
    transform: scale(1);
}

#scroll-to-top-btn.show {
    display: block;
    opacity: 1;
    transform: scale(1);
}
main.full-width {
    max-width: none;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* For full-height pages like the calendar */
#app-content.full-height-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

main.page-loading {
    opacity: 0;
    transform: translateY(10px);
}


h1, h2 {
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 0; /* تعديل: إزالة الهامش العلوي الافتراضي للعناوين */
}

button {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
}

button:hover {
    background-color: var(--primary-hover-color);
}

footer {
    text-align: center;
    color: var(--text-secondary-color);
    background: none;
    box-shadow: none;
    border: none;
}

.error {
    color: #d9534f;
    font-weight: bold;
}

/* Hide Connection Status Bar */
#connection-status {
    display: none;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px; /* جعل الشريط أرفع */
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent; /* إخفاء مسار الشريط */
}

::-webkit-scrollbar-thumb {
    background-color: var(--text-secondary-color); /* استخدام لون من ألوان السمة */
    border-radius: 10px;
    opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 0.9;
}

/* General Button Styles */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-primary:hover {
    background-color: var(--primary-hover-color);
    transform: translateY(-1px);
}
.btn-secondary {
    background-color: var(--text-secondary-color);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
}

/* General Form Layout */
.form-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form-group label {
    font-weight: bold;
    color: var(--text-secondary-color);
}
.form-group input, .form-group select {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
}
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-secondary {
    background-color: var(--text-secondary-color);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
}

/* General Form Layout */
.form-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form-group label {
    font-weight: bold;
    color: var(--text-secondary-color);
}
.form-group input, .form-group select {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
}
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* NEW: General Filter Container Styles */
.filters-container {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.filter-search-container {
    position: relative;
    flex-grow: 1;
    min-width: 250px;
}

.item-count-display {
    color: var(--text-secondary-color);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* NEW: General Filter Container Styles */
.filters-container {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.filter-search-container {
    position: relative;
    flex-grow: 1;
    min-width: 250px;
}

.item-count-display {
    color: var(--text-secondary-color);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* == style.css == */
/* Dark modal specific (rank change) */
.rank-change-modal-dark .rcm-shell { backdrop-filter: blur(2px); }
.rank-change-modal-dark textarea:focus { box-shadow:0 0 0 2px rgba(79,163,255,.25); }
.rank-change-modal-dark .rank-chip { letter-spacing:.3px; }

/* Truncated cells for rank changes table */
.reason-cell, .action-cell {
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
}
.reason-cell:hover, .action-cell:hover { color:#1a73e8; }

/* Activity log redesigned (agent profile) */
.agent-activity-log {
	background:#fff;
	border:1px solid #e5e9f2;
	border-radius:12px;
	padding:14px 18px;
	margin-top:18px;
}
.agent-activity-log table { width:100%; border-collapse:collapse; }
.agent-activity-log th, .agent-activity-log td { padding:8px 10px; font-size:12.5px; text-align:right; }
.agent-activity-log thead th { background:#f7f9fc; color:#2c3e50; font-weight:600; border-bottom:1px solid #e1e6ec; }
.agent-activity-log tbody tr { border-bottom:1px solid #f0f3f7; }
.agent-activity-log tbody tr:hover { background:#f9fbfe; }
.log-action-type { display:inline-block; padding:3px 8px; border-radius:14px; font-size:11px; background:#eef3f9; color:#234; font-weight:600; }
.log-time { color:#667; font-size:11px; }

/* Agent activity timeline */
.agent-activity-log-timeline .timeline-item:hover { background:#f9fbfe; transition:background .2s; }
.agent-activity-log-timeline .timeline-item .timeline-bullet { transition:transform .25s, box-shadow .25s; }
.agent-activity-log-timeline .timeline-item:hover .timeline-bullet { transform:scale(1.08); box-shadow:0 0 0 4px rgba(26,115,232,.25); }

/* Unified dark expansion modal styles */
.dark-expand-modal-wrapper { direction: rtl; text-align: right; font-family: 'Cairo', sans-serif; max-width: 760px; }
.dark-expand-modal { background:#1f2228; border:1px solid #2d343f; border-radius:12px; overflow:hidden; }
.dark-expand-modal-header { background:linear-gradient(135deg,#222831,#1b2026); padding:12px 16px; color:#f5f7fa; font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.dark-expand-modal-body { padding:14px 16px; background:#272c33; max-height:60vh; overflow-y:auto; }
.dark-expand-modal-body pre { margin:0; white-space:pre-wrap; word-break:break-word; font-family:inherit; color:#e6ebef; line-height:1.6; font-size:13px; }

/* Timeline bullet base styles (ensure consistent appearance) */
.agent-activity-log-timeline .timeline-bullet { width:12px; height:12px; border-radius:50%; background:#1a73e8; position:relative; box-shadow:0 0 0 3px rgba(26,115,232,.25); }
.agent-activity-log-timeline .timeline-line { position:absolute; right:5px; top:12px; width:2px; background:linear-gradient(to bottom,#1a73e8,#4fa3ff); height:100%; opacity:.4; }



/* == styles.css == */
.top-agents-container {
    padding: 20px;
}

.section-title {
    margin: 20px 0;
    color: var(--primary-color);
    font-size: 1.5em;
}

.top-3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.top-agent-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.rank-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.rank-1 {
    transform: scale(1.1);
    background: linear-gradient(135deg, #ffd700, #ffa500);
}

.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.agent-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.agent-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary-color);
}

.exclusive-badge {
    background: #ffd700;
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.stat {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Agent Activity Timeline Fix */
.agent-activity-log-timeline .timeline-item {
    margin-bottom: 20px !important;
}

.brand-v2 {
    display: flex !important;
    flex-direction: column !important; /* Stack logo and text vertically */
    align-items: center !important;    /* Center items horizontally */
    text-decoration: none;
    gap: 4px; /* Add some space between logo and text */
}

.brand-logo {
    height: 35px; /* Slightly smaller logo */
    width: auto;
    object-fit: contain;
}

.brand-text {
    font-size: 11px; /* Smaller font for the text */
    font-weight: 500;
    color: #f0f0f0; /* Lighter color for better contrast */
    text-align: center;
}

/* ========================================
   Professional Timeline Styles for Activity Log
   ======================================== */

/* Winner Roulette – Card badge refinements */
.wr-winner-card {
    position: relative;
}
.wr-winner-card-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #111827;
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 10px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 0.8rem; /* Smaller, more professional */
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
}

.section-title-v2 {
    margin: 20px 0 15px;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e9f2;
}

.section-title-v2 .icon {
    color: #1a73e8;
    font-size: 20px;
}

.professional-timeline {
    position: relative;
    padding: 20px 0;
    margin: 0;
}

.timeline-entry {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
}

.timeline-entry:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #1a73e8;
}

.timeline-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #1a73e8, #4285f4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 3px 8px rgba(26, 115, 232, 0.3);
}

.timeline-content {
    flex: 1;
    min-width: 0;
}

.timeline-action {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.timeline-timestamp {
    display: block;
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 8px;
}

.timeline-details {
    margin: 8px 0 0 0;
    padding: 10px 12px;
    background: #f8f9fa;
    border-right: 3px solid #1a73e8;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .timeline-entry {
        flex-direction: column;
        gap: 12px;
    }
    
    .timeline-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    
    .section-title-v2 {
        font-size: 16px;
    }
}

/* ===================================
   Activity Log Table Styles
   =================================== */
.activity-log-header {
    margin-bottom: 20px;
}

.activity-log-header h2 {
    margin-bottom: 15px;
    color: var(--text-color);
}

/* Statistics Bar */
.activity-stats-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.stat-item {
    flex: 1;
    min-width: 120px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
}

.stat-item.active {
    border-color: #3498db;
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.stat-item i {
    font-size: 20px;
    color: #3498db;
}

.stat-item.active i {
    color: white;
}

.stat-label {
    font-size: 12px;
    color: #bdc3c7;
    flex: 1;
}

.stat-item.active .stat-label {
    color: white;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

/* Controls Section */
.activity-log-controls {
    background: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.controls-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 15px;
    align-items: center;
}

.search-box,
.filter-box,
.sort-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.search-box i,
.filter-box i,
.sort-box i {
    color: #3498db;
    font-size: 14px;
}

.search-box input,
.filter-box select,
.sort-box select {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

/* Table Container */
.activity-log-table-container {
    width: 100%;
    margin-top: 20px;
}

.log-date-group {
    margin-bottom: 30px;
}

.log-date-header {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #ecf0f1;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 3px solid #3498db;
}

.log-date-header i {
    color: #3498db;
    font-size: 16px;
}

.activity-log-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.activity-log-table thead {
    background: linear-gradient(135deg, #34495e, #2c3e50);
}

.activity-log-table thead th {
    color: #ecf0f1;
    padding: 14px 16px;
    text-align: right;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #3498db;
}

.activity-log-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.activity-log-table tbody tr:hover {
    background: rgba(52, 152, 219, 0.05);
    transform: translateX(-2px);
}

.activity-log-table tbody tr.log-recent {
    background: rgba(46, 204, 113, 0.1);
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(46, 204, 113, 0.4); }
    50% { box-shadow: 0 0 15px rgba(46, 204, 113, 0.6); }
}

.activity-log-table tbody tr:last-child {
    border-bottom: none;
}

.activity-log-table td {
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 13px;
}

/* --- New Modern Activity Log Views --- */
.view-mode-switch { display:flex; gap:6px; margin-inline-start:auto; }
.view-mode-btn { background: var(--card-background); border:1px solid var(--border-color); padding:6px 10px; border-radius:6px; cursor:pointer; color:var(--text-color); transition:.2s; }
.view-mode-btn.active { background: linear-gradient(135deg,#3498db,#2980b9); color:#fff; }
.view-mode-btn:hover { background: var(--hover-bg); }

/* Cards Layout */
.activity-log-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:18px; }
.activity-log-card { position:relative; display:flex; flex-direction:column; background:var(--card-background); border:1px solid var(--border-color); border-radius:14px; padding:12px 14px; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:.25s; }
.activity-log-card:hover { transform:translateY(-4px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.activity-log-card .log-card-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.activity-log-card .log-badge { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,#34495e,#2c3e50); color:#fff; font-size:16px; box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.badge-create { background:linear-gradient(135deg,#27ae60,#1e8449)!important; }
.badge-delete { background:linear-gradient(135deg,#e74c3c,#c0392b)!important; }
.badge-update { background:linear-gradient(135deg,#3498db,#2980b9)!important; }
.badge-renew { background:linear-gradient(135deg,#9b59b6,#8e44ad)!important; }
.badge-expire { background:linear-gradient(135deg,#95a5a6,#7f8c8d)!important; }
.badge-read { background:linear-gradient(135deg,#16a085,#138d75)!important; }
.log-card-time { display:flex; flex-direction:column; font-size:11px; color:var(--text-muted); }
.log-card-user { font-size:12px; color:var(--text-color); display:flex; align-items:center; gap:4px; }
.log-card-body { flex-grow:1; }
.log-card-desc { font-size:13px; line-height:1.5; margin:0 0 6px; color:var(--text-color); }
.log-card-meta-actions { display:flex; gap:6px; }
.log-card-footer { margin-top:6px; font-size:11px; color:var(--text-muted); display:flex; justify-content:space-between; }
.log-card-select { position:absolute; top:8px; inset-inline-end:8px; }
.log-meta-toggle.small, .log-meta-toggle.tiny { background:linear-gradient(135deg,#34495e,#2c3e50); color:#fff; border:none; padding:4px 8px; font-size:11px; border-radius:6px; cursor:pointer; }
.log-meta-toggle.small:hover, .log-meta-toggle.tiny:hover { background:linear-gradient(135deg,#2c3e50,#1f2d3a); }

/* Timeline Layout */
.activity-log-timeline { margin-top:18px; display:flex; flex-direction:column; gap:24px; }
.timeline-day-header { font-weight:600; background:linear-gradient(135deg,#2c3e50,#34495e); color:#ecf0f1; padding:8px 14px; border-radius:8px; display:flex; align-items:center; gap:8px; font-size:14px; }
.timeline-items { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.timeline-item { display:flex; gap:12px; position:relative; background:var(--card-background); border:1px solid var(--border-color); border-radius:12px; padding:10px 12px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.timeline-marker { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#3498db,#2980b9); color:#fff; font-size:16px; flex-shrink:0; }
.timeline-item[data-action-group="create"] .timeline-marker { background:linear-gradient(135deg,#27ae60,#1e8449); }
.timeline-item[data-action-group="delete"] .timeline-marker { background:linear-gradient(135deg,#e74c3c,#c0392b); }
.timeline-item[data-action-group="update"] .timeline-marker { background:linear-gradient(135deg,#3498db,#2980b9); }
.timeline-item[data-action-group="renew"] .timeline-marker { background:linear-gradient(135deg,#9b59b6,#8e44ad); }
.timeline-item[data-action-group="expire"] .timeline-marker { background:linear-gradient(135deg,#95a5a6,#7f8c8d); }
.timeline-content { flex-grow:1; display:flex; flex-direction:column; gap:4px; }
.timeline-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--text-muted); }
.timeline-desc { font-size:13px; line-height:1.5; color:var(--text-color); }
.timeline-actions { display:flex; align-items:center; gap:8px; margin-top:4px; }
.timeline-time { font-weight:600; color:var(--text-color); }
.timeline-user { display:flex; align-items:center; gap:4px; }

@media (max-width:780px){
    .activity-log-cards { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
    .timeline-item { flex-direction:column; }
    .timeline-meta { flex-direction:column; align-items:flex-start; }
}

.log-type-cell {
    text-align: center;
}

.log-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.log-type-badge i {
    font-size: 12px;
}

/* Badge Colors */
.log-type-badge.icon-create {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
}

.log-type-badge.icon-delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.log-type-badge.icon-update {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

.log-type-badge.icon-renewal {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
}

.log-type-badge.icon-details {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
}

.log-type-badge.icon-competition {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #2c3e50;
}

.log-type-badge.icon-rank {
    background: linear-gradient(135deg, #16a085, #138d75);
    color: white;
}

.log-type-badge.icon-telegram {
    background: linear-gradient(135deg, #0088cc, #006699);
    color: white;
}

.log-type-badge.icon-view {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}

.log-type-badge.icon-generic {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
}

.log-description-cell {
    line-height: 1.6;
    color: var(--text-color);
}

.log-user-cell {
    color: var(--text-muted);
    font-weight: 500;
}

.log-user-cell i {
    color: #3498db;
    margin-left: 5px;
}

.log-time-cell {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.log-time-cell i {
    color: #95a5a6;
    margin-left: 5px;
}

.log-details-cell {
    text-align: center;
}

.btn-details {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-details:hover {
    background: linear-gradient(135deg, #2980b9, #21618c);
    transform: scale(1.1);
}

/* Pagination */
.activity-log-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 15px 20px;
    background: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-info {
    color: var(--text-muted);
    font-size: 13px;
}

.pagination-buttons {
    display: flex;
    gap: 5px;
}

.pagination-buttons button {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid #3498db;
    color: #3498db;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

.pagination-buttons button:hover:not(:disabled) {
    background: #3498db;
    color: white;
}

.pagination-buttons button.active {
    background: #3498db;
    color: white;
    font-weight: bold;
}

.pagination-buttons button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Log Details Modal */
.log-details-modal {
    text-align: right;
    direction: rtl;
}

.log-detail-header {
    margin-bottom: 20px;
    text-align: center;
}

.log-detail-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.detail-row {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 15px;
    border-radius: 8px;
    border-right: 3px solid #3498db;
}

.detail-row strong {
    display: block;
    color: #3498db;
    margin-bottom: 8px;
    font-size: 13px;
}

.detail-row strong i {
    margin-left: 8px;
}

.detail-row p {
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
}

.detail-row pre {
    background: #1a1d23;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    color: #2ecc71;
    font-size: 12px;
    margin: 0;
}

/* No Logs Message */
.no-logs-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.no-logs-message i {
    font-size: 48px;
    color: #95a5a6;
    margin-bottom: 15px;
}

.no-logs-message p {
    font-size: 16px;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .controls-row {
        grid-template-columns: 1fr;
    }
    
    .activity-stats-bar {
        flex-direction: column;
    }
    
    .stat-item {
        min-width: 100%;
    }
    
    .activity-log-table thead th {
        padding: 10px 12px;
        font-size: 11px;
    }
    
    .activity-log-table td {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .log-type-badge {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .log-type-badge span {
        display: none;
    }
    
    .log-type-badge i {
        margin: 0;
    }
    
    .pagination-buttons button {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* =============================================== */
/* Activity Log – Compact Layout Adjustments (V2)  */
/* =============================================== */
/* NOTE: These overrides refine the initial large cards layout
   to a denser, horizontally flowing style after user feedback. */

.activity-log-header { direction: rtl; }

.activity-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.activity-stats-bar .stat-item {
    flex: 0 0 auto; /* prevent full stretch */
    min-width: 105px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 8px;
    gap: 6px;
    box-shadow: none;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.loading-overlay.hidden { display: none; }
.loading-box {
    background: #fff;
    color: #111;
    padding: 18px 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.spinner {
    width: 28px;
    height: 28px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
#suggestionForm label,
#suggestionForm .form-label {
    color: #fff !important;
}

#suggestionForm input,
#suggestionForm textarea,
#suggestionForm select {
    color: #fff !important;
    background-color: #0a0f1d !important;
    border: 1px solid #444 !important;
}

#suggestionForm input::placeholder,
#suggestionForm textarea::placeholder {
    color: #fff !important;
    opacity: 0.85;
}

/* تحسين التركيز */
#suggestionForm input:focus,
#suggestionForm textarea:focus,
#suggestionForm select:focus {
    outline: none;
    border-color: #888 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}

/* حجم الخط داخل الحقول لقراءة أوضح */
#suggestionForm input,
#suggestionForm textarea {
    font-size: 14px;
}

/* =============================================
   Admin Evaluation Modal – Dark Mode Overrides
============================================= */
#evaluationModal .modal-content {
    background: #121528 !important;
    color: #fff !important;
    border: 1px solid #2a3155 !important;
}

#evaluationForm label.form-label {
    color: #fff !important;
}

#evaluationForm p.question-text,
#evaluationForm p.answer-text {
    background: #0f1429 !important;
    color: #e0e0e0 !important;
    border: 1px solid #2a3155 !important;
    padding: 12px 15px;
    border-radius: 8px;
}

#evaluationForm select.form-control,
#evaluationForm textarea.form-control,
#evaluationForm input.form-control {
    background: #0a0f1d !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

#evaluationForm select.form-control:focus,
#evaluationForm textarea.form-control:focus,
#evaluationForm input.form-control:focus {
    outline: none;
    border-color: #888 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

#evaluationForm textarea::placeholder,
#evaluationForm input::placeholder {
    color: #d0d0d0 !important;
    opacity: 0.85;
}

#evaluationForm .btn-success {
    background: #28a745;
    border: none;
}

#evaluationForm .btn-secondary {
    background: #6c757d;
    border: none;
}

/* Generic suggestion card label coloring */
.question-text strong { color: #ffffff; }
.answer-text strong { color: #4caf50; }


    animation: spin 1s linear infinite;
}
.loading-text { font-weight: 600; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Confirm modal */
.confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.confirm-modal.hidden { display: none; }
.confirm-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 320px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.confirm-icon { font-size: 32px; margin-bottom: 8px; }
.confirm-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.confirm-message { margin-bottom: 14px; color: #444; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.btn { padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.btn-secondary { background: #eef2ff; border: none; }
.btn-danger { background: #ef4444; color: #fff; border: none; }

.activity-stats-bar .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.activity-stats-bar .stat-item.active {
    background: linear-gradient(135deg,#3498db,#2477b3);
    color: #fff;
    border-color: #3498db;
}

.activity-stats-bar .stat-item i { font-size: 16px; }
.activity-stats-bar .stat-item .stat-label { font-size: 11px; }
.activity-stats-bar .stat-item .stat-value { font-size: 15px; }

/* Controls row: auto-fit responsive compact columns */
.activity-log-controls { padding: 14px 16px; margin-bottom: 16px; }
.controls-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.controls-row .search-box,
.controls-row .filter-box,
.controls-row .sort-box {
    padding: 8px 12px;
    gap: 6px;
}

.controls-row .search-box input,
.controls-row .filter-box select,
.controls-row .sort-box select { font-size: 12px; }

/* Table tweaks */
.activity-log-table thead th { font-size: 12px; }
.activity-log-table td { font-size: 13px; }

/* Ensure recent highlight more subtle in compact mode */
.activity-log-table tr.log-recent { box-shadow: 0 0 0 1px rgba(46,204,113,0.35), 0 0 6px rgba(46,204,113,0.4); }

@media (max-width: 540px) {
  .activity-stats-bar .stat-item { min-width: calc(50% - 8px); }
  .controls-row { grid-template-columns: 1fr 1fr; }
  .controls-row .search-box { grid-column: 1 / -1; }
}

/* Inline compact stats (new design) */
.activity-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 12px;
    direction: rtl;
}
.activity-stats-inline .stat-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    line-height: 1.2;
    transition: background .2s, color .2s, border-color .2s;
    position: relative;
}
.activity-stats-inline .stat-inline .label { font-weight: 600; color: var(--text-color); }
.activity-stats-inline .stat-inline .sep { opacity:.55; }
.activity-stats-inline .stat-inline .count { font-weight:700; color:#3498db; }
.activity-stats-inline .stat-inline:hover { background:#253040; }
.activity-stats-inline .stat-inline.active { background:#3498db; border-color:#3498db; }
.activity-stats-inline .stat-inline.active .label,
.activity-stats-inline .stat-inline.active .count { color:#fff; }

/* Tighten header spacing for new variant */
.activity-log-header h2 { margin: 0 0 4px; font-size: 18px; display:flex; align-items:center; gap:6px; }
.activity-log-header h2 i { color:#3498db; }

/* ==========================================
   Online Status Indicator
   ========================================== */
.user-avatar-container {
    position: relative;
    display: inline-block;
}

.online-status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #6c757d;
    border: 2px solid var(--card-background, #1e2936);
    transition: background-color 0.3s ease;
}

.online-status-indicator.online {
    background-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
}

/* ==========================================
   Wheel Roulette Styles
   ========================================== */
.wr-wheel-wrapper {
  position: relative;
  width: 450px;
  height: 500px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wr-wheel-container {
  position: relative;
  width: 450px;
  height: 450px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
  perspective: 1000px;
}

.wr-pointer-new {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 60px solid #ef4444;
  z-index: 100;
  filter: drop-shadow(0 6px 15px rgba(239, 68, 68, 0.7)) drop-shadow(0 0 30px rgba(239, 68, 68, 0.5));
  animation: pointerPulse 2.5s ease-in-out infinite;
}

@keyframes pointerPulse {
  0%, 100% { transform: translateX(-50%) scale(1) translateY(0); }
  50% { transform: translateX(-50%) scale(1.08) translateY(-3px); }
}

#winner-roulette-wheel {
  border-radius: 50%;
  /* إطار أنيق بتدرج سيان وظل ناعم */
  border: 12px solid;
  border-image: linear-gradient(135deg, 
    #06b6d4 0%, 
    #0891b2 25%, 
    #0e7490 50%,
    #0891b2 75%, 
    #06b6d4 100%) 1;
  box-shadow: 
    0 0 30px rgba(6, 182, 212, 0.4),
    0 0 60px rgba(6, 182, 212, 0.2),
    inset 0 0 30px rgba(0,0,0,0.6),
    inset 0 8px 20px rgba(255,255,255,0.2),
    inset 0 -8px 20px rgba(0,0,0,0.4),
    0 25px 60px rgba(0,0,0,0.5),
    0 35px 80px rgba(0,0,0,0.3);
  background: radial-gradient(circle at 35% 35%, #333333, #222222 50%, #111111 80%, #000000);
  position: relative;
  transform-style: preserve-3d;
  animation: wheelGlow 4s ease-in-out infinite;
}

@keyframes wheelGlow {
  0%, 100% { 
    box-shadow: 
      0 0 30px rgba(6, 182, 212, 0.4),
      0 0 60px rgba(6, 182, 212, 0.2),
      inset 0 0 30px rgba(0,0,0,0.6),
      inset 0 8px 20px rgba(255,255,255,0.2),
      inset 0 -8px 20px rgba(0,0,0,0.4),
      0 25px 60px rgba(0,0,0,0.5);
  }
  50% { 
    box-shadow: 
      0 0 50px rgba(6, 182, 212, 0.6),
      0 0 90px rgba(6, 182, 212, 0.3),
      inset 0 0 30px rgba(0,0,0,0.6),
      inset 0 8px 20px rgba(255,255,255,0.2),
      inset 0 -8px 20px rgba(0,0,0,0.4),
      0 25px 60px rgba(0,0,0,0.5);
  }
}

/* حلقة خارجية سيان متوهجة */
#winner-roulette-wheel::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border-radius: 50%;
  background: 
    conic-gradient(
      from 0deg,
      #06b6d4 0deg 30deg,
      #0891b2 30deg 60deg,
      #0e7490 60deg 90deg,
      #06b6d4 90deg 120deg,
      #0891b2 120deg 150deg,
      #0e7490 150deg 180deg,
      #06b6d4 180deg 210deg,
      #0891b2 210deg 240deg,
      #0e7490 240deg 270deg,
      #06b6d4 270deg 300deg,
      #0891b2 300deg 330deg,
      #0e7490 330deg 360deg
    );
  z-index: -1;
  box-shadow: 
    0 0 30px rgba(6, 182, 212, 0.5),
    0 0 60px rgba(6, 182, 212, 0.3),
    0 20px 50px rgba(0,0,0,0.6),
    inset 0 4px 15px rgba(255,255,255,0.3),
    inset 0 -4px 15px rgba(0,0,0,0.5);
  animation: rotateGlow 25s linear infinite;
}

@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wr-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background:
    radial-gradient(circle at 30% 30%, #1e3a8a, #1e40af 40%, #1e293b 70%, #0f172a 90%, #000000);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Arial Black', 'Arial', sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 5px;
  box-shadow:
    0 0 50px rgba(255, 215, 0, 0.6),
    0 0 100px rgba(30, 58, 138, 0.9),
    inset 0 6px 20px rgba(255,255,255,0.5),
    inset 0 -6px 20px rgba(0,0,0,0.9),
    0 12px 35px rgba(0,0,0,0.8);
  border: 8px solid #ffd700;
  z-index: 100;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 255, 255, 0.8),
    0 5px 10px rgba(0,0,0,1);
  animation: centerPulse 5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wr-wheel-center:hover {
  transform: translate(-50%, -50%) scale(1.05);
  border-color: #ffed4e;
}

/* إضافة عناصر زخرفية للشعار */
.wr-wheel-center::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 215, 0, 0.3) 45deg,
    transparent 90deg,
    rgba(255, 215, 0, 0.3) 135deg,
    transparent 180deg,
    rgba(255, 215, 0, 0.3) 225deg,
    transparent 270deg,
    rgba(255, 215, 0, 0.3) 315deg,
    transparent 360deg
  );
  animation: rotateGlow 8s linear infinite;
  z-index: -1;
}

/* إضافة رمز أو أيقونة صغيرة */
.wr-wheel-center::after {
  content: '★';
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 16px;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes centerPulse {
  0%, 100% {
    border-color: #ffd700;
    box-shadow:
      0 0 50px rgba(255, 215, 0, 0.6),
      0 0 100px rgba(30, 58, 138, 0.9),
      inset 0 6px 20px rgba(255,255,255,0.5),
      inset 0 -6px 20px rgba(0,0,0,0.9),
      0 12px 35px rgba(0,0,0,0.8);
  }
  50% {
    border-color: #ffed4e;
    box-shadow:
      0 0 70px rgba(255, 215, 0, 0.9),
      0 0 130px rgba(30, 58, 138, 1),
      inset 0 6px 20px rgba(255,255,255,0.5),
      inset 0 -6px 20px rgba(0,0,0,0.9),
      0 12px 35px rgba(0,0,0,0.8);
  }
}

.wr-wheel-base {
  width: 280px;
  height: 55px;
  background: 
    linear-gradient(180deg, 
      #4a4a4a 0%, 
      #2d2d2d 20%, 
      #1a1a1a 50%, 
      #0d0d0d 80%, 
      #000000 100%);
  border-radius: 12px;
  margin: 0 auto;
  margin-top: -20px;
  position: relative;
  z-index: -1;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.7),
    0 8px 20px rgba(0,0,0,0.5),
    inset 0 3px 6px rgba(255,255,255,0.1),
    inset 0 -3px 6px rgba(0,0,0,0.8),
    0 0 20px rgba(255, 215, 0, 0.2);
  border: 3px solid #333;
  border-top-color: #555;
  border-bottom-color: #111;
}

/* تأثير الدعامة السفلية */
.wr-wheel-base::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 12px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent);
  border-radius: 50%;
  filter: blur(6px);
}

/* خطوط زخرفية على القاعدة */
.wr-wheel-base::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 215, 0, 0.3) 20%, 
    rgba(255, 215, 0, 0.5) 50%, 
    rgba(255, 215, 0, 0.3) 80%, 
    transparent);
  transform: translateY(-50%);
}

.wr-actions-row {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.wr-action-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
}

.wr-action-btn:hover {
  background: linear-gradient(135deg, #2980b9, #21618c);
  transform: scale(1.05);
}

.wr-result {
  margin-top: 20px;
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
  text-align: center;
}

.wr-hidden {
  display: none;
}

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.wheel-roulette-spinner {
  animation: spin 4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* قواعد الروليت */
.wr-rules-box {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 20px 0;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(99,102,241,0.1);
  transition: all 0.3s ease;
}

.wr-rules-box:hover {
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 6px 20px rgba(99,102,241,0.2);
}

.wr-rules-box h4 {
  color: var(--wr-text);
  margin: 0 0 16px 0;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wr-rules-box h4 i {
  color: #6366f1;
  font-size: 1.2em;
}

.wr-rules-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wr-rules-box li {
  color: var(--wr-text-dim);
  font-size: 0.95rem;
  padding-right: 28px;
  position: relative;
  line-height: 1.6;
}

.wr-rules-box li:before {
  content: "✦";
  color: #8b5cf6;
  position: absolute;
  right: 0;
  font-size: 1.1em;
  top: 2px;
}


/* == navbar.css == */
/* Navbar Styles */
.navbar {
    display: flex;
    justify-content: center; /* Center the inner container */
    align-items: center;
    padding: 0 20px; /* تعديل: تقليل الحشوة الأفقية لتوفير مساحة أكبر للعناصر */
    height: 70px; /* تعديل: تصغير ارتفاع الشريط العلوي */
    background-color: var(--navbar-bg); /* تعديل: تم نقل backdrop-filter للأسفل */
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px var(--shadow-color); /* تعديل: إضافة ظل للشريط العلوي */
    transition: transform 0.3s ease-in-out, background-color 0.3s, border-color 0.3s;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1100;
}

/* NEW: The container that holds all navbar content and is centered */
.navbar-container {
    width: 100%;
    max-width: 1600px; /* Increased max-width for a wider look */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; /* Increased gap for better spacing */
}

/* تعديل: إضافة حالة الإخفاء للشريط العلوي */
.navbar.navbar-hidden {
    transform: translateY(-100%);
}

.navbar-left, .navbar-right {
    display: flex;
    align-items: center;
    gap: 15px; /* تعديل: تقليل المسافة بين العناصر */
    flex-shrink: 0; /* Prevent left/right sections from shrinking */
}

.navbar a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
}
.navbar-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    min-width: 300px; /* Ensure search bar has enough space */
}

.brand-v2 { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    gap: 4px !important; 
}
.brand-logo { height:35px; width:auto; object-fit: contain; }
.brand-text { 
    font-size: 11px !important; 
    font-weight: 500 !important; 
    color: #f0f0f0 !important; 
    text-align: center !important; 
}
.brand-v2:hover .brand-text { color: var(--primary-color); }

.nav-link {
    padding: 6px 10px; /* تعديل: تقليل الحشوة لتناسب حجم الخط الجديد */
    border-radius: 6px;
    transition: color 0.2s, box-shadow 0.2s;
    box-shadow: inset 0 0px 0 var(--primary-color); /* For transition */
}

.nav-link:hover, .nav-link.active {
    color: var(--primary-color);
    box-shadow: inset 0 -2px 0 var(--primary-color);
}

.nav-link i {
    margin-left: 6px; /* RTL: change to margin-left */
    font-size: 0.85em; /* تعديل: تصغير حجم الأيقونة */
    opacity: 0.8;
}

/* Search Container */
.search-container {
    position: relative;
    width: 100%;
    max-width: 450px; /* Increased width for a more prominent search bar */
}

.search-input {
    padding: 8px 40px; /* Adjust padding for icons on both sides */
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box; /* Important for width */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.search-icon {
    position: absolute;
    right: 15px; /* Position icon on the right for RTL */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary-color);
    pointer-events: none; /* Make icon non-interactive */
}

.search-clear-btn {
    position: absolute;
    left: 15px; /* Position clear button on the left for RTL */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary-color);
    cursor: pointer;
    display: none; /* Hidden by default */
}

.search-results {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    z-index: 1001;
    max-height: 350px;
    overflow-y: auto;
    /* تعديل: تغيير طريقة الإخفاء لإضافة تأثير حركة */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
}

/* تعديل: إظهار قائمة البحث عند الحاجة */
.search-results.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-result-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--bg-color);
}

.search-result-avatar,
.search-result-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-avatar-placeholder {
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: var(--text-secondary-color);
}

.search-result-info {
    flex-grow: 1;
}

.search-result-item .agent-name {
    font-weight: bold;
    color: var(--text-color);
    margin: 0 0 4px 0;
}

.search-result-item .agent-id {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    margin: 0;
}

/* Dropdown Menu Improvements */
.user-avatar-btn {
    padding: 0 !important;
    width: 45px; /* تعديل: تكبير حجم الزر ليتناسب مع زر الإعدادات */
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    background-color: var(--bg-color);
    box-shadow: 0 2px 5px var(--shadow-color);
    transition: all 0.2s ease-in-out;
}

.user-avatar-btn:hover, .user-avatar-btn.active {
    border-color: var(--primary-color);
    transform: translateY(-2px); /* تعديل: إضافة تأثير حركة عند المرور */
    box-shadow: 0 4px 8px var(--shadow-color) !important;
}

/* تعديل: ضمان ظهور الصورة بشكل صحيح داخل الدائرة */
.user-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* يضمن ملء الصورة للدائرة دون تشويه */
}

.user-avatar-btn .avatar-placeholder-small {
    font-size: 1.2em; /* تعديل: تصغير حجم الأيقونة */
}
.dropdown-menu {
    padding: 8px 0; /* Add more vertical padding */
}

.dropdown-item {
    display: flex; /* Use flexbox for alignment */
    align-items: center;
    gap: 10px;
}

.dropdown-header {
    padding: 10px 20px;
    text-align: right;
}

.dropdown-header .user-name {
    margin: 0;
    font-weight: bold;
    font-size: 1.1em;
}

.dropdown-header .user-email {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.dropdown-item.logout-item:hover {
    background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-color);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
}
/* Navbar Right */
.dropdown-header {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.dropdown-header .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.dropdown-header .user-info {
    line-height: 1.3;
}


.nav-item.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0; /* Default alignment */
    min-width: 220px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* إضافة: إظهار القائمة المنسدلة عند مرور الفأرة */
.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.date-display {
    color: var(--text-secondary-color);
    font-size: 0.9em;
    white-space: nowrap;
}

.theme-toggle-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    width: 40px; /* تعديل: تصغير حجم الزر */
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2em; /* تعديل: توحيد حجم الأيقونة مع الأزرار الأخرى */
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
}

.theme-toggle-btn:hover {
    background-color: var(--border-color);
    color: var(--primary-color);
}

.theme-toggle-btn .fa-sun { display: none; }
.theme-toggle-btn .fa-moon { display: block; }

body.dark-mode .theme-toggle-btn .fa-sun { display: block; }
body.dark-mode .theme-toggle-btn .fa-moon { display: none; }


/* تعديل: إصلاح القوائم المنسدلة في الجانب الأيمن */
.navbar-right .dropdown-menu.user-dropdown {
    left: auto; /* إلغاء المحاذاة لليسار */
    right: 0; /* محاذاة القائمة إلى يمين الحاوية الخاصة بها */
    margin-top: 0; /* تعديل: إزالة الهامش العلوي لمنع اختفاء القائمة عند التحرك إليها */
    transform: translateX(25px); /* تعديل: زيادة إزاحة القائمة لليمين لتحسين المظهر */
}

/* --- New Navbar Icon Buttons --- */
.navbar-icon-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex; /* Use inline-flex for <a> tags */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0;
    text-decoration: none; /* For <a> tags */
    transition: all 0.2s ease;
}

.navbar-icon-btn:hover {
    background-color: var(--border-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

.navbar-icon-btn.logout-btn:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

/* تعديل: إخفاء السهم من زر الإعدادات الجديد */
.nav-item.dropdown .dropdown-toggle#nav-settings-dropdown::after {
    display: none;
}

/* == components.css == */
/* Page Loader Styles */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.page-loader.show {
    opacity: 1;
    visibility: visible;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-text {
    color: var(--text-secondary-color);
    font-weight: bold;
    font-size: 1.1em;
}

/* Toast Notification Styles */
#toast-container {
    position: fixed;
    top: 80px; /* Below navbar */
    left: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 15px 20px;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 1;
    transform: translateX(0);
    animation: slideIn 0.5s forwards;
}

.toast.success { background-color: #2ecc71; }
.toast.error { background-color: #e74c3c; }
.toast.info { background-color: #3498db; }
.toast.warning { background-color: #f39c12; }

@keyframes slideIn {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-120%); }
}

/* Modal Styles */
.modal-overlay {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 95vh !important;
    background-color: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-overlay .modal {
    background-color: var(--card-bg-color) !important;
    padding: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
    text-align: center !important;
    width: auto !important;
    min-width: 350px !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    z-index: 10001 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    border: 1px solid var(--border-color) !important;
}

.modal-overlay .modal.modal-wide {
    max-width: 700px !important;
    text-align: right !important;
}

.modal-overlay .modal.modal-wide .modal-message {
    text-align: right !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    padding: 10px !important;
}

.modal-overlay .modal.modal-no-actions .modal-actions {
    display: none;
}

.modal-overlay .modal-title {
    font-size: 1.4em !important;
    margin-bottom: 15px !important;
    color: var(--text-color) !important;
}

.modal-overlay .modal-message {
    margin-bottom: 20px !important;
    font-size: 1em !important;
    line-height: 1.6 !important;
    color: var(--text-color) !important;
    word-wrap: break-word !important;
}

.modal-overlay .modal p {
    margin-bottom: 15px !important;
    font-size: 1em !important;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

.modal-actions button:hover {
    transform: translateY(-2px);
}

.btn-primary, .btn-secondary, .btn-danger {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background-color: var(--bg-color);
    border-color: var(--text-secondary-color);
}

.btn-danger {
    background-color: #e74c3c;
    color: white;
}
.btn-danger:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Form Modal Styles */
.form-modal-content {
    background-color: var(--card-bg-color);
    padding: 20px 30px 30px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Wider modal variant for dense forms (templates create/edit) */
.form-modal-content.modal-fullscreen {
    max-width: 960px; /* wider */
    width: 95vw;      /* adapt to viewport */
}

.form-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.form-modal-header h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.5em;
}

.form-modal-header .btn-icon-action {
    background: none;
    border: none;
    font-size: 1.5em;
    color: var(--text-secondary-color);
    cursor: pointer;
    padding: 5px;
}

.form-modal-body {
    overflow-y: auto;
    padding-right: 10px; /* space for scrollbar */
    margin-right: -10px;
}

.form-modal-body textarea {
    min-height: 120px;
    resize: vertical;
}
.template-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Stacked variant for edit form when vertical layout preferred */
.template-form-grid.template-form-stacked {
    grid-template-columns: 1fr; /* single column */
}

@media (max-width: 992px) {
    .form-modal-content.modal-fullscreen { max-width: 90vw; }
    .template-form-grid { grid-template-columns: 1fr; }
}

/* Template/Image preview sizing inside modals to prevent horizontal scroll */
.form-modal-content .image-preview-container {
    width: 100%;
    max-width: 100%;
    height: 240px; /* ثابت لعرض الصورة داخله */
    overflow: hidden;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--border-color) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-modal-content .image-preview-container .image-preview,
.form-modal-content .image-preview {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* إظهار الصورة كاملة داخل المساحة */
    background: #111;
    border: 1px solid var(--border-color);
}

/* Update Progress Modal Styles */
.update-progress-container {
    padding: 20px;
    text-align: center;
}

.update-icon {
    font-size: 3em;
    color: var(--primary-color);
    margin-bottom: 20px;
    animation: rocket-fly 2s ease-in-out infinite;
}

@keyframes rocket-fly {
    0% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0) rotate(-5deg); }
}

.update-progress-container h3 {
    margin-bottom: 25px;
    font-size: 1.2em;
}

.progress-bar-outer {
    width: 100%;
    height: 10px;
    background-color: var(--border-color);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    width: 0%;
    background-color: var(--primary-color);
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

.btn-telegram-bonus {
    background-color: #0088cc; /* Telegram Blue */
}
.btn-telegram-bonus:hover {
    background-color: #0077b3;
}

/* Online Status Indicator */
.online-status-indicator {
    width: 12px;
    height: 12px;
    background-color: #808080; /* Grey for offline */
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--card-bg-color);
    transition: background-color 0.3s;
}

.online-status-indicator.online {
    background-color: #2ecc71; /* Green for online */
}

/* Page sections */
.page-section {
    width: 100%;
    min-height: 100%;
    padding: 20px;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


/* == home.css == */
/* Home Page / Dashboard Styles */
.page-header:not(.dashboard-header-card) {
    margin-top: -20px; /* تعديل: إلغاء الحشوة العلوية لحاوية الصفحة الرئيسية */
    padding-top: 0;
}

/* --- Dashboard Header Card Style - Enhanced --- */
.dashboard-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 20px;
    padding: 25px 30px;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.dashboard-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
    transition: left 0.5s ease-in-out;
}

.dashboard-header-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    border-color: rgba(102, 126, 234, 0.4);
}

.dashboard-header-card:hover::before {
    left: 100%;
}

.dashboard-header-card h1 {
    border: none;
    padding: 0;
    margin: 0;
    font-size: 2em;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .dashboard-header-card {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    border-color: rgba(79, 172, 254, 0.2);
}

body.dark-mode .dashboard-header-card:hover {
    border-color: rgba(79, 172, 254, 0.4);
}

body.dark-mode .dashboard-header-card h1 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dashboard-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}
.dashboard-grid-v2 .stat-card-v2 {
    animation: fade-in-up 0.5s ease-out forwards;
    opacity: 0;
}

/* إضافة: تأثيرات حركية لبطاقات الإحصائيات */
.dashboard-grid-v2 .stat-card-v2:nth-child(1) { animation-delay: 0.1s; }
.dashboard-grid-v2 .stat-card-v2:nth-child(2) { animation-delay: 0.2s; }
.dashboard-grid-v2 .stat-card-v2:nth-child(3) { animation-delay: 0.3s; }
.dashboard-grid-v2 .stat-card-v2:nth-child(4) { animation-delay: 0.4s; }
.dashboard-grid-v2 .stat-card-v2:nth-child(5) { animation-delay: 0.5s; }
.dashboard-grid-v2 .stat-card-v2:nth-child(6) { animation-delay: 0.6s; }
.dashboard-grid-v2 .stat-card-v2:nth-child(7) { animation-delay: 0.7s; }

.stat-card-v2 {
    border-radius: 16px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    color: white;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.stat-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 0;
}

.stat-card-v2:hover::before {
    opacity: 1;
}

.stat-card-v2:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 35px rgba(0,0,0,0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Color Themes - Enhanced with deeper gradients */
.stat-card-v2.color-1 { /* Dark Blue to Green */
    background: linear-gradient(135deg, #0d1b2a 0%, #1B263B 50%, #2d6a4f 100%);
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.4);
}
.stat-card-v2.color-2 { /* Dark Blue to Orange */
    background: linear-gradient(135deg, #0d1b2a 0%, #1B263B 50%, #e76f51 100%);
    box-shadow: 0 4px 15px rgba(231, 111, 81, 0.4);
}
.stat-card-v2.color-3 { /* Dark Blue to Grey-Blue */
    background: linear-gradient(135deg, #0d1b2a 0%, #1B263B 50%, #415A77 100%);
    box-shadow: 0 4px 15px rgba(65, 90, 119, 0.4);
}
.stat-card-v2.color-4 { /* Dark Purple to Violet */
    background: linear-gradient(135deg, #1a0933 0%, #2D1B69 50%, #7B2CBF 100%);
    box-shadow: 0 4px 15px rgba(123, 44, 191, 0.4);
}
.stat-card-v2.color-5 { /* Dark Orange to Gold */
    background: linear-gradient(135deg, #3d2817 0%, #8B4513 50%, #f59e0b 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}
.stat-card-v2.color-6 { /* Dark Teal to Cyan */
    background: linear-gradient(135deg, #001a17 0%, #004D40 50%, #00BCD4 100%);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}
.stat-card-v2.color-7 { /* Dark Red to Pink */
    background: linear-gradient(135deg, #2d0616 0%, #880E4F 50%, #EC407A 100%);
    box-shadow: 0 4px 15px rgba(236, 64, 122, 0.4);
}

.stat-card-v2:hover {
    box-shadow: 0 15px 45px rgba(0,0,0,0.4);
}

/* Deposit Bonus Table Styles */
.deposit-bonus-table {
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

.deposit-bonus-table table {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

.deposit-bonus-table tr:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- NEW: Tooltip for Analytics Cards --- */
.info-tooltip-v2 {
    position: relative;
    cursor: help;
    display: inline-block; /* Ensure it takes space */
}

.info-tooltip-v2 .fa-info-circle {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.info-tooltip-v2:hover .fa-info-circle {
    color: white;
}



.info-tooltip-v2::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px; /* Use a fixed font size for consistency */
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none; /* Prevent tooltip from blocking hover */
}

.info-tooltip-v2:hover::before {
    opacity: 1;
    visibility: visible;
}
/* --- End Tooltip Styles --- */

.stat-card-v2-icon-bg {
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 5em;
    color: rgba(255, 255, 255, 0.12);
    transform: rotate(-20deg);
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stat-card-v2:hover .stat-card-v2-icon-bg {
    transform: rotate(-10deg) scale(1.15);
}

.stat-card-v2-value {
    font-size: 2em;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.stat-card-v2-title {
    font-size: 0.9em;
    font-weight: 500;
    margin: 3px 0 0 0;
    position: relative;
    z-index: 2;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap; /* إضافة: منع التفاف النص في عناوين البطاقات */
}

/* Fallback for old stat-card styles if needed elsewhere, but new ones are preferred */
.stat-card {
    display: none; /* Hide old style */
}

/* Progress Bar Styles - Enhanced */
.progress-bar-container {
    width: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    padding: 5px;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    border: 2px solid rgba(102, 126, 234, 0.2);
}

body.dark-mode .progress-bar-container {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    border-color: rgba(79, 172, 254, 0.2);
}

.progress-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

body.dark-mode .progress-bar {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

.progress-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    font-size: 1em;
}

/* New Home Grid Layout - Enhanced */
.home-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 30px;
}
.home-main-column, .home-side-column {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.home-main-column:hover, .home-side-column:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

body.dark-mode .home-main-column,
body.dark-mode .home-side-column {
    background: rgba(26, 26, 46, 0.85);
    border-color: rgba(79, 172, 254, 0.2);
}

/* Enhanced section headers */
.home-main-column h2, .home-side-column h2 {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .home-main-column h2,
body.dark-mode .home-side-column h2 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pending-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pending-agent-card-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-color);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s;
    position: relative; /* تعديل: إضافة position لجعل تحديد موضع الأزرار ممكناً */
}

/* تعديل: إخفاء الأزرار افتراضياً وتحديد موضعها */
.pending-agent-actions {
    position: absolute;
    left: 12px; /* تعديل: تحديد الموضع على اليسار */
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--card-bg-color);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10;
}

.pending-agent-card-v2:hover {
    border-color: var(--primary-color);
    background-color: var(--card-bg-color);
}

/* تعديل: إظهار الأزرار عند مرور الماوس */
.pending-agent-card-v2:hover .pending-agent-actions {
    opacity: 1;
    visibility: visible;
}

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

.pending-agent-info img, .pending-agent-info .avatar-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.pending-agent-info .avatar-placeholder {
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
}

.pending-agent-info .agent-name-link {
    font-weight: 500;
    text-decoration: none;
    color: var(--text-color);
}

.pending-agent-info .agent-name-link:hover {
    color: var(--primary-color);
}

.agent-name-wrapper {
    display: flex;
    flex-direction: column;
}

.pending-task-icons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.8em;
}

.pending-icon-audit {
    color: #f39c12; /* Orange/Yellow */
}

.pending-icon-comp {
    color: #3498db; /* Blue */
}

.pending-agent-actions .btn-small {
    padding: 5px 10px;
    font-size: 0.8em;
}

.no-pending-tasks {
    color: var(--text-secondary-color);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Recent Activity List */
.recent-activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.activity-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.activity-description {
    margin: 0;
    font-size: 0.95em;
}

.activity-description strong {
    color: var(--primary-color);
}

.activity-timestamp {
    margin: 0;
    font-size: 0.8em;
    color: var(--text-secondary-color);
}

.activity-description .agent-name-link {
    font-weight: bold;
}

.view-all-container {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.view-all-container .btn-small {
    width: 100%;
    justify-content: center;
}
/* Responsive adjustments for home grid */
@media (max-width: 900px) {
    .home-grid {
        grid-template-columns: 1fr;
    }
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.quick-action-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 20px;
    padding: 30px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s;
}

.quick-action-card:hover::before {
    left: 100%;
}

.quick-action-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

body.dark-mode .quick-action-card {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%);
    border-color: rgba(79, 172, 254, 0.2);
}

body.dark-mode .quick-action-card::before {
    background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.1), transparent);
}

body.dark-mode .quick-action-card:hover {
    border-color: rgba(79, 172, 254, 0.5);
    box-shadow: 0 12px 30px rgba(79, 172, 254, 0.2);
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
}

.quick-action-card h3 {
    margin: 0 0 10px 0;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .quick-action-card h3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quick-action-card p {
    margin: 0;
    color: var(--text-secondary-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.classification-chart-container {
    position: relative;
    height: 200px; /* Adjust as needed */
    margin-top: 15px;
}


/* Agent Quick Stats */
.agent-quick-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.quick-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--bg-color);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.quick-stat-item i {
    font-size: 1.8em;
    color: var(--primary-color);
}

.quick-stat-info h4 {
    margin: 0;
    font-size: 1.8em;
}

.quick-stat-info p {
    margin: 0;
    color: var(--text-secondary-color);
}

.classification-breakdown {
    flex-wrap: wrap;
    justify-content: center;
}

/* Fun Zone Game Styles */
.fun-zone-container {
    margin-top: 40px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fun-zone-container h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-area {
    position: relative;
    height: 250px;
    background-color: var(--input-bg-color);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-instructions {
    color: var(--text-secondary-color);
    font-size: 1.1em;
    font-weight: 500;
}

.game-score, .game-timer {
    position: absolute;
    top: 15px;
    background-color: rgba(0,0,0,0.3);
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
}

.game-score {
    right: 15px;
}

.game-timer {
    left: 15px;
}

.game-target {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 15px color-mix(in srgb, var(--primary-color) 50%, transparent);
}

.game-target.golden {
    background-color: #f1c40f;
    box-shadow: 0 0 20px #f1c40f;
}

.game-target:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.game-target.hit {
    animation: hit-effect 0.3s ease-out forwards;
}

/* إضافة: تعريف الحركة */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- NEW: Small Loader for Skeleton UI --- */
.loader-container.small-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Give it some space */
}

.loader-container.small-loader .spinner {
    width: 30px;
    height: 30px;
    border-width: 3px;
}


/* == agents.css == */
/* Manage Agents Page */
.agent-id-text {
    cursor: pointer;
    transition: color 0.2s;    
    font-size: 0.9em; /* تكبير حجم رقم الوكالة */
}
.agent-id-text:hover {
    color: var(--primary-color);    
}
.classification-badge {
    font-size: 0.7em;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
}
/* تعديل: جعل الألوان أغمق لتحسين وضوح النص الأبيض */
.classification-badge.classification-r { background-color: #8e44ad; } /* Darker Purple */
.classification-badge.classification-a { background-color: #c0392b; } /* Darker Red */
.classification-badge.classification-b { background-color: #2980b9; } /* Darker Blue */
.classification-badge.classification-c { background-color: #27ae60; } /* Darker Green */

/* Small icon in front of agent name indicating classification (decorative) */
.classification-icon {
    display: none; /* decorative icon removed per user request */
}

/* Placement tweaks for the badge near agent cards */
.leaderboard-agent-classification { margin-top: 6px; }
.simple-agent-classification { margin-left: 8px; display: inline-block; vertical-align: middle; }
.simple-agent-stats { margin-top: 8px; display: inline-flex; gap: 12px; align-items: center; }
.simple-stat { background: transparent; color: var(--text-secondary-color); font-weight: 700; }

/* --- Task Group Header Redesign --- */
.task-group-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--bg-color);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: background-color 0.2s;
}
.task-group-header:hover {
    background-color: var(--card-bg-color);
}
.task-group-title {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1; /* Pushes other items to the right */
}
.task-group-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.5em;
}
.task-group-progress {
    background-color: var(--border-color);
    color: var(--text-secondary-color);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
}
.task-group-bulk-actions {
    display: flex;
    gap: 20px;
}
.task-group-indicators {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-secondary-color);
}
.task-group-indicators .group-completion-indicator {
    color: #27ae60; /* Green */
    display: none; /* Hide by default */
}
.task-group.all-complete .group-completion-indicator {
    display: block; /* Show when all tasks are complete */
}

/* --- Daily Tasks Page - V2 Redesign --- */

.tasks-overview {
    display: flex;
    gap: 30px;
    align-items: center;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    padding: 30px;
    border-radius: 16px;
    margin-bottom: 25px;
    border: none;
    box-shadow: 0 8px 24px rgba(30, 60, 114, 0.35);
    position: relative;
    overflow: hidden;
}

.tasks-overview::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.progress-donut-chart {
    --p: 0; /* progress percentage */
    --b: 14px; /* border thickness */
    --c: #ffffff; /* color */
    width: 140px;
    height: 140px;
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    font-size: 2em;
    font-weight: 900;
    color: #ffffff;
    transition: --p 0.5s;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}
.progress-donut-chart:before,
.progress-donut-chart:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.progress-donut-chart:before {
    inset: 0;
    background:
        radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}
.progress-donut-chart:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c);
    transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - 120px/2));
}

.overview-stats {
    display: flex;
    gap: 40px;
    flex-grow: 1;
    justify-content: space-around;
    z-index: 1;
}

.overview-stat-item {
    text-align: center;
    padding: 18px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.overview-stat-item:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2);
}

.overview-stat-item h3 {
    font-size: 3em;
    margin: 0 0 8px 0;
    color: #ffffff;
    font-weight: 900;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

.overview-stat-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1em;
}

.overview-stat-item i {
    font-size: 1.3em;
}

.task-group-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 20px 20px 20px;
}

.task-card {
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.05) 0%, rgba(42, 82, 152, 0.02) 100%);
    background-color: var(--card-bg-color);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.task-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.task-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(30, 60, 114, 0.25);
}

.task-card:hover::before {
    opacity: 1;
}

.task-card.complete {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.15) 0%, rgba(39, 174, 96, 0.05) 100%);
    background-color: color-mix(in srgb, #27ae60 10%, var(--card-bg-color));
    border-color: #27ae60;
}

.task-card.complete::before {
    background: linear-gradient(135deg, #27ae60, #229954);
    opacity: 0.6;
}

.task-card.complete:after {
    content: none;
}

.task-card.highlighted {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 50%, transparent);
    transform: scale(1.02);
}

.task-card-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
    position: relative;
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.05) 0%, transparent 100%);
}

.task-card-main {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.task-agent-avatar, .task-agent-avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid rgba(30, 60, 114, 0.3);
    transition: all 0.3s ease;
}

.task-card:hover .task-agent-avatar,
.task-card:hover .task-agent-avatar-placeholder {
    border-color: #1e3c72;
    transform: scale(1.05);
}

.task-agent-avatar-placeholder {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    color: #ffffff;
}

.task-agent-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-color);
}

.task-agent-info p {
    margin: 0;
    font-size: 0.95em;
    color: var(--text-secondary-color);
    font-weight: 500;
}

.task-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.02) 0%, transparent 100%);
    border-top: 1px solid var(--border-color);
}

.task-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
    padding: 12px 15px;
    background-color: var(--card-bg-color);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.task-stat:hover {
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.05) 0%, transparent 100%);
    border-color: #1e3c72;
}

.task-stat label {
    color: var(--text-secondary-color);
    font-weight: 600;
}

.task-stat span {
    font-weight: 800;
    color: #1e3c72;
    text-align: left;
    font-size: 1.1em;
}

.task-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.03) 0%, transparent 100%);
}

.action-item {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.action-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-item:hover::before {
    opacity: 0.05;
}

.action-item:first-child {
    border-left: 1px solid var(--border-color);
}

.action-item label {
    font-weight: 700;
    color: var(--text-secondary-color);
    position: relative;
    z-index: 1;
    font-size: 1.05em;
}

.action-item.done {
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.15) 0%, rgba(42, 82, 152, 0.1) 100%);
}

.action-item.done label {
    color: #1e3c72;
}

.action-item.done::before {
    opacity: 0.1;
}

/* Toggle switches now use global toggle-fix.css styles */

.task-agent-info .task-complete-icon {
    color: #fff;
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    border-radius: 50%;
    font-size: 0.85em;
    margin-right: 8px;
    vertical-align: middle;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);
    animation: checkBounce 0.5s ease-out;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

@keyframes checkBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

h3.has-checkmark .task-complete-icon {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.task-agent-id {
    cursor: pointer;
    transition: color 0.2s;
}

.task-agent-id:hover {
    color: var(--primary-color);
}

/* Toggle switches now use global toggle-fix.css styles */

/* Full Activity Log Page */
.activity-item-full {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}
.activity-item-full:last-child {
    border-bottom: none;
}

/* Activity Log Table Styles */
.activity-log-table-container {
    width: 100%;
    overflow-x: auto;
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    padding: 12px;
}
.activity-log-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px; /* more responsive */
}
.activity-log-table thead th {
    background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
    text-align: right; /* align headers to RTL */
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    border-bottom: 1px solid var(--border-color);
}
.activity-log-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px dashed var(--border-color);
    vertical-align: middle;
    font-size: 0.95rem;
    color: var(--text-color);
}
.activity-log-table tbody tr:hover {
    background: color-mix(in srgb, var(--card-bg-color) 85%, transparent);
}
.activity-log-meta {
    color: var(--text-secondary-color);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* User cell (avatar + name) */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}
.user-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--border-color);
    color: var(--text-secondary-color);
    font-weight: 700;
}
.user-info .user-name {
    font-weight: 700;
    color: var(--text-color);
}
.activity-log-description {
    color: var(--text-color);
}

/* Improved filter visualization (the filters container in activityLog.js uses .filters-container) */
.filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--card-bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 14px;
}
.filters-container .filter-group { display: flex; flex-direction: column; gap:6px; }
.no-results-message { padding: 22px; color: var(--text-secondary-color); text-align: center; }

/* Checkbox column styling */
.activity-log-table thead th input[type="checkbox"] {
    transform: scale(1.05);
}
.log-select-checkbox {
    width: 18px;
    height: 18px;
}
.btn-danger {
    background-color: #dc3545;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-danger:hover { background-color: #c82333; }
.activity-log-timestamp { white-space: nowrap; }
.activity-log-action { font-weight: 600; color: var(--primary-color); }


.activity-item-full .activity-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.activity-item-full .activity-content {
    flex-grow: 1;
}

.activity-item-full .activity-description {
    margin: 0 0 5px 0;
    font-size: 1em;
}

.activity-item-full .activity-description strong {
    color: var(--text-color);
}

.activity-item-full .activity-description .agent-name-link {
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}

.activity-item-full .activity-description .agent-name-link:hover {
    text-decoration: underline;
}

.activity-item-full .activity-timestamp {
    margin: 0;
    font-size: 0.85em;
    color: var(--text-secondary-color);
}

/* --- NEW: Enhanced Pagination Styles --- */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
}

.page-btn {
    background-color: var(--bg-color);
    color: var(--text-secondary-color);
    border: 1px solid var(--border-color);
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

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

.page-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

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


.pagination-container {
    margin-top: 20px;
    text-align: center;
}

/* Full Activity Log Page */
.activity-item-full {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}
.activity-item-full:last-child {
    border-bottom: none;
}

/* Dark Mode Support for New Task Design */
body.dark-mode .tasks-overview {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3);
}

body.dark-mode .tasks-overview::before {
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}

body.dark-mode .progress-donut-chart {
    --c: #ffffff;
}

body.dark-mode .task-stat span {
    color: #4facfe;
}

body.dark-mode .action-item.done {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.1) 100%);
}

body.dark-mode .action-item.done label {
    color: #4facfe;
}

body.dark-mode .task-card::before {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

body.dark-mode .task-card.complete::before {
    background: linear-gradient(135deg, #27ae60, #229954);
}

body.dark-mode .tasks-overview {
    background: linear-gradient(135deg, #0f1f3d 0%, #1a3564 100%);
    box-shadow: 0 8px 24px rgba(15, 31, 61, 0.5);
}

body.dark-mode .overview-stat-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .overview-stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .task-card {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.02) 100%);
}

body.dark-mode .task-card::before {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

body.dark-mode .task-card-header {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, transparent 100%);
}

body.dark-mode .task-agent-avatar,
body.dark-mode .task-agent-avatar-placeholder {
    border-color: rgba(79, 172, 254, 0.3);
}

body.dark-mode .task-card:hover .task-agent-avatar,
body.dark-mode .task-card:hover .task-agent-avatar-placeholder {
    border-color: #4facfe;
}

body.dark-mode .task-agent-avatar-placeholder {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

body.dark-mode .task-card-body {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.02) 0%, transparent 100%);
}

body.dark-mode .task-stat:hover {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.08) 0%, transparent 100%);
    border-color: #4facfe;
}

body.dark-mode .task-stat span {
    color: #4facfe;
}

body.dark-mode .action-item::before {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

body.dark-mode .action-item.done {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.1) 100%);
}

body.dark-mode .action-item.done label {
    color: #4facfe;
}

/* Toggle switches dark mode styles now use global toggle-fix.css */


/* == profile.css == */
/* Agent Profile Page Styles */
.profile-page-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.countdown-timer {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text-secondary-color);
}

.countdown-timer i {
    color: var(--primary-color);
}

.profile-header {
    display: none; /* Hide old header, we use v2 */
}

.profile-header-v2 {
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: var(--card-bg-color);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.profile-avatar {
    font-size: 4em;
    color: var(--primary-color);
    background-color: var(--bg-color);
    width: 80px; /* تعديل: تصغير حجم الصورة أكثر */
    height: 80px; /* تعديل: تصغير حجم الصورة أكثر */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--primary-color);
    overflow: hidden; /* To contain the image */
    flex-shrink: 0; /* Prevent shrinking if info text is long */
    box-shadow: 0 5px 15px var(--shadow-color);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-main-info {
    flex-grow: 1;
}

.profile-main-info h1 {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-header-info h1 {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0;
}

.profile-main-info p a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}
.status-badge {
    font-size: 0.5em;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background-color: #2ecc71; /* Green */
}

.status-badge.inactive {
    background-color: #f39c12; /* Orange */
}

.competition-countdown-header {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--text-secondary-color);
    background-color: var(--bg-color);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tabs {
    display: flex;
    margin-bottom: 20px;
    background-color: var(--bg-color);
    border-radius: 8px;
    padding: 5px;
}

.tab-link {
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: var(--text-secondary-color);
    font-size: 1.1em;
    border-radius: 6px;
    transition: all 0.3s ease;
    flex-grow: 1;
    text-align: center;
}

.tab-link.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.tab-content {
    display: none; /* Hidden by default */
    padding: 20px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.tab-content.active {
    display: block; /* Shown when active */
}

/* Styles for the edit form within the profile header */
.profile-header .form-layout {
    flex-grow: 1;
}

.profile-header .form-actions {
    align-self: flex-start;
    margin-top: 0;
}

.profile-header .profile-header-info {
    align-items: flex-start; /* Align items to the top */
}

/* Edit mode for profile header */
.profile-header-edit-form {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
}

.profile-avatar-edit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.profile-avatar-edit img {
    width: 80px; /* تعديل: تصغير حجم الصورة أكثر */
    height: 80px; /* تعديل: تصغير حجم الصورة أكثر */
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.profile-avatar-edit .btn-secondary {
    padding: 5px 10px;
    font-size: 0.8em;
    width: 100%;
    justify-content: center;
}

/* --- NEW: Professional Create/Edit User Modal --- */
.form-layout-grid {
    display: grid;
    grid-template-columns: auto 1fr; /* Avatar | Fields */
    grid-template-rows: auto auto; /* Content | Actions */
    grid-template-areas: 
        "avatar fields"
        "actions actions";
    gap: 20px 30px;
}

.form-grid-avatar { grid-area: avatar; }
.form-grid-fields { grid-area: fields; }
.form-grid-actions { 
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.profile-avatar-edit.large-avatar img {
    cursor: pointer;
    width: 128px;
    height: 128px;
}
.profile-avatar-edit.large-avatar .avatar-edit-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--card-bg-color);
    box-shadow: 0 2px 5px var(--shadow-color);
}

/* NEW: Action buttons for avatar editing */
.avatar-action-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px; /* Add space below the avatar */
}
.avatar-action-buttons .btn-icon-action {
    color: white;
    font-size: 1em;
}

.avatar-action-buttons .btn-small {
    padding: 6px 12px !important;
    font-size: 0.9em !important;
}

/* NEW: Hover animation for avatar upload */
.profile-avatar-edit.large-avatar {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.profile-avatar-edit.large-avatar::after {
    content: '\f030'; /* Font Awesome camera icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.profile-avatar-edit.large-avatar:hover::after {
    opacity: 1;
}
.profile-avatar-edit.large-avatar:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

.password-input-wrapper {
    position: relative;
}
.password-toggle-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
}
.password-strength-meter { height: 5px; background-color: var(--border-color); border-radius: 5px; margin-top: 5px; overflow: hidden; }
.strength-bar { height: 100%; width: 0; transition: width 0.3s, background-color 0.3s; }
.strength-bar.strength-1 { width: 25%; background-color: #e74c3c; }
.strength-bar.strength-2 { width: 50%; background-color: #f39c12; }
.strength-bar.strength-3 { width: 75%; background-color: #2980b9; }
.strength-bar.strength-4 { width: 100%; background-color: #27ae60; }
.password-actions { margin-top: 10px; }

/* NEW: Inline validation error style */
.validation-error-inline {
    color: #e74c3c;
    font-size: 0.85em;
    font-weight: 500;
    margin-top: 5px;
}

/* Log Timeline Styles */
.log-timeline-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.log-date-group {
    position: relative;
    padding-right: 50px; /* تعديل: إضافة مساحة على اليمين للخط الزمني والأيقونات */
    border-right: 2px solid var(--border-color); /* تعديل: إضافة الخط الزمني العمودي */
}

.log-date-header {
    font-weight: bold;
    color: var(--text-secondary-color);
    margin-bottom: 15px;
    position: relative; /* تعديل: جعل تحديد الموضع ممكناً */
    right: -62px; /* تعديل: سحب العنوان لليمين ليتوسط الخط الزمني */
    background-color: var(--card-bg-color);
    display: inline-block;
    padding: 2px 10px;
}

.log-item-v2 {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative; /* تعديل: جعل تحديد موضع الأيقونة ممكناً */
}

.log-item-icon-v2 {
    background-color: var(--bg-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 1.1em;
    position: absolute; /* تعديل: تحديد موضع الأيقونة بشكل مطلق بالنسبة للعنصر الأب */
    right: -72px; /* تعديل: وضع الأيقونة في منتصف الخط الزمني */
    border: 3px solid var(--card-bg-color);
}

/* Icon Colors */
.log-icon-create { background-color: #2ecc71; } /* Green */
.log-icon-delete { background-color: #e74c3c; } /* Red */
.log-icon-profile { background-color: #3498db; } /* Blue */
.log-icon-details { background-color: #9b59b6; } /* Purple */
.log-icon-competition { background-color: #f39c12; } /* Orange */
.log-icon-generic { background-color: var(--text-secondary-color); } /* Gray */

.log-item-content-v2 {
    flex-grow: 1;
    margin-left: -30px; /* Pull content back to align */
}

.log-description {
    margin: 0 0 5px 0;
    font-weight: 500;
}

.log-timestamp {
    font-size: 0.85em;
    color: var(--text-secondary-color);
}

/* Details Tab Form Styles */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px 30px;
}

.details-group {
    position: relative; /* For positioning the edit icon */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.details-group .inline-edit-trigger {
    position: absolute;
    top: 5px;
    left: 0; /* RTL support */
    cursor: pointer;
    color: var(--text-secondary-color);
    padding: 5px;
    font-size: 0.8em;
}

.details-group .auto-calculated-indicator {
    position: absolute;
    top: 5px;
    left: 0; /* RTL support */
    color: var(--text-secondary-color);
    padding: 5px;
    font-size: 0.8em;
    cursor: help;
}

.details-group p {
    padding-left: 30px; /* Make space for the icon */
}

.details-group label {
    font-weight: bold;
    color: var(--text-secondary-color);
    font-size: 0.9em;
}

.details-group p {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    padding: 8px;
    background-color: var(--bg-color);
    border-radius: 6px;
    min-height: 20px;
}

.details-group input,
.details-group select {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
}

.details-actions {
    margin-top: 0; /* Removed top margin */
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 15px;
}

.details-actions button {
    flex-grow: 1; /* Make all buttons in this container take equal space */
}

/* Action Tab Redesign */
.action-tab-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.action-section h2 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.action-info-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.action-info-card i {
    font-size: 1.8em;
    color: var(--primary-color);
    width: 40px;
    text-align: center;
}

.action-info-card .info label {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.action-info-card .info p {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color);
}

.action-info-card .info p .sub-value {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--text-secondary-color);
    margin: 0 5px;
}

.action-info-card .value-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.day-tag {
    background-color: var(--primary-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
}

.day-tag-none {
    color: var(--text-secondary-color);
    font-style: italic;
    font-size: 0.9em;
}

.inline-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.details-section-title {
    grid-column: 1 / -1; /* Span full width */
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Custom button styles for Telegram actions */
.btn-telegram-bonus, .btn-telegram-winners {
    /* Base button styles copied from components.css for consistency */
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
}

.btn-telegram-bonus {
    background-color: #3498db; /* Blue */
}

/* NEW: Profile Settings Page Header */
.profile-settings-header {
    display: flex;
    align-items: center;
    gap: 25px;
    background-color: var(--card-bg-color);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.profile-settings-header .profile-header-info {
    flex-grow: 1;
}

.profile-settings-header .profile-name-display {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0 0 5px 0;
    padding: 0;
    border: none;
    color: var(--text-color);
}

.profile-settings-header .profile-email-display {
    font-size: 1.1em;
    color: var(--text-secondary-color);
    margin: 0;
}
.btn-telegram-bonus:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

.btn-telegram-winners {
    background-color: #f39c12; /* Orange */
    color: white;
}
.btn-telegram-winners:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
}
/* New style for the manual renewal button */
.btn-renewal {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    background-color: #1abc9c; /* Teal */
}
.btn-renewal:hover:not(:disabled) {
    background-color: #16a085;
    transform: translateY(-2px);
}
.btn-renewal:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
}
.btn-renewal.ready {
    animation: pulse-green 2s infinite;
}


.competitions-list-profile {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.competition-card-header .header-right-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.competition-countdown {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-secondary-color);
    background-color: var(--bg-color);
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.competition-countdown.expired {
    color: #e74c3c;
}


/* New Stepper Styles */
.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 1;
    flex-basis: 0;
    flex-grow: 1;
}

.step-counter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-secondary-color);
    transition: all 0.4s ease;
    margin-bottom: 8px;
}

.step-name {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    transition: color 0.4s ease;
}

.stepper-item.completed .step-counter {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.stepper-item.completed .step-name {
    color: var(--text-color);
    font-weight: bold;
}

.stepper-line {
    flex-grow: 2;
    height: 2px;
    background-color: var(--border-color);
    transition: background-color 0.4s ease;
    position: relative;
}

.stepper-line.completed {
    background-color: var(--primary-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color) 50%, transparent);
    transition-delay: 0.2s; /* Add a slight delay to feel more sequential */
}

.competition-status-tracker {
    padding: 20px 0;
}



.competition-status-tracker {
    padding: 20px 0;
}

.competition-progress-bar {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.progress-bar-fill {
    position: absolute;
    top: 5px; /* Center it vertically on the dots */
    left: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.5s ease-in-out;
    z-index: 0;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.progress-labels span {
    font-size: 0.8em;
    color: var(--text-secondary-color);
    position: relative;
    padding-top: 20px; /* Space for the dot */
}

.progress-labels span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--border-color);
    border: 2px solid var(--card-bg-color);
    transition: background-color 0.4s ease;
}

.progress-labels .active {
    color: var(--primary-color);
    font-weight: bold;
}

.progress-labels .active::before {
    background-color: var(--primary-color);
}

.competition-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.competition-detail-item {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    background-color: var(--bg-color);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.competition-detail-item i {
    color: var(--primary-color);
}

.completed-competitions-group {
    margin-top: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
}

.completed-competitions-group summary {
    padding: 12px 15px;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* Hide default marker */
    display: flex;
    align-items: center;
    gap: 10px;
}

.competitions-list-view .competition-card-header {
    grid-area: header;
    align-self: end;
    display: flex; /* لجعل العنوان والزر متجاورين */
    justify-content: space-between;
    align-items: center;
    background: none;
    padding: 0;
    border: none;
}

.competitions-list-view .competition-card-name h3 {
    margin: 0;
    padding: 0;
    border: none;
}

.competitions-list-view .competition-card-agent-info {
    grid-area: agent;
}

.competitions-list-view .competition-card-body {
    grid-area: body;
    align-self: start;
    display: none; /* إخفاء الوصف والتاريخ لزيادة الكثافة */
}

.competitions-list-view .competition-card-footer {
    grid-area: actions;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    background: none; /* Remove background from original card style */
    border: none;
    padding: 0;
}

/* جعل أزرار الإجراءات أيقونات فقط */
.competitions-list-view .competition-card-footer .btn-secondary,
.competitions-list-view .competition-card-footer .btn-danger {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1em;
    justify-content: center;
}

/* تنسيق زر تبديل الحالة الجديد */
.small-toggle {
    width: 40px;
    height: 22px;
}
.small-toggle .slider:before {
    height: 16px;
    width: 16px;
}
.small-toggle input:checked + .slider:before {
    transform: translateX(18px);
}

/* 2. إعادة تصميم معلومات الوكيل في القائمة */
.table-agent-cell {
    grid-area: agent;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
    min-width: 0; /* Prevents overflow */
}

.table-agent-cell:hover .agent-details span {
    color: var(--primary-color);
}

.table-agent-cell .avatar-small,
.table-agent-cell .avatar-placeholder-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.table-agent-cell .avatar-placeholder-small {
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

/* NEW: Styles for user cell in users management table */
.table-user-cell {
    display: flex;
    align-items: center;
    gap: 15px; /* تعديل: زيادة المسافة لتناسب حجم الصورة الجديد */
    text-decoration: none;
    color: var(--text-color);
    min-width: 0; /* Prevents overflow */
}

.table-user-cell .avatar-small {
    width: 50px; /* تعديل: زيادة حجم الصورة الرمزية */
    height: 50px; /* تعديل: زيادة حجم الصورة الرمزية */
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--card-bg-color); /* تعديل: تحسين لون الإطار */
}

.table-user-cell .user-details {
    line-height: 1.4; /* تعديل: زيادة تباعد الأسطر */
}

/* NEW: Separate username and email into distinct lines */
.table-user-cell .user-name {
    display: block; /* Make it a block element to take a full line */
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1em; /* تعديل: تكبير حجم خط الاسم */
}

.table-user-cell .user-email {
    display: block; /* Make it a block element to take a full line */
    font-size: 0.9em; /* تعديل: تكبير حجم خط البريد الإلكتروني */
    color: var(--text-secondary-color);
}

/* NEW: Realtime online status indicator */
.user-avatar-container .online-status-indicator {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background-color: #778DA9; /* Gray for offline */
    border-radius: 50%;
    border: 2px solid var(--card-bg-color);
    transition: background-color 0.3s;
    z-index: 2;
}

.user-avatar-container .online-status-indicator.online {
    background-color: #2ecc71; /* Green for online */
    box-shadow: 0 0 5px #2ecc71;
}


/* NEW: Styles to identify admin users in the list */
.table-user-cell .user-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.table-user-cell .admin-crown-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #f39c12; /* Orange/Gold color */
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    border: 2px solid var(--card-bg-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.table-user-cell .admin-badge {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
    font-size: 0.75em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    margin-right: 8px;
    vertical-align: middle;
}

/* NEW: Styles for the employee badge */
.table-user-cell .employee-badge {
    background-color: var(--bg-color);
    color: var(--text-secondary-color);
    border: 1px solid var(--border-color);
    font-size: 0.75em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    margin-right: 8px;
    vertical-align: middle;
}

/* NEW: Styles for the employee badge */
.table-user-cell .employee-badge {
    background-color: var(--bg-color);
    color: var(--text-secondary-color);
    border: 1px solid var(--border-color);
    font-size: 0.75em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    margin-right: 8px;
    vertical-align: middle;
}

/* NEW: Style for inactive user rows */
.modern-table tbody tr.inactive-row {
    opacity: 0.6;
    background-color: color-mix(in srgb, #e74c3c 10%, transparent); /* تعديل: زيادة وضوح اللون الأحمر */
}
.modern-table tbody tr.inactive-row:hover {
    opacity: 1;
    background-color: color-mix(in srgb, #e74c3c 15%, transparent); /* تعديل: زيادة وضوح اللون الأحمر عند المرور */
}

/* NEW: Style for the text in the main page loader */
.page-loader p {
    margin-top: 15px;
    font-size: 1.1em;
    color: var(--text-secondary-color);
    font-weight: 500;
    animation: fadeIn 0.5s 0.3s ease-in-out both;
}

/* NEW: Improve layout for action buttons in tables */
.modern-table .actions-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

/* NEW: Color for the 4th stat card */
.stat-card-v2.color-4 {
    background: linear-gradient(135deg, #1B263B, #e74c3c);
}

/* New Sort Container in header */
.sort-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-container label {
    color: var(--text-secondary-color);
    font-weight: 500;
}

.sort-container select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    height: auto; /* تعديل الارتفاع */
    height: 100%;
    color: var(--text-color);
}

/* New Bulk Action Bar */
.bulk-action-bar {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.bulk-action-bar.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

#bulk-action-count {
    font-weight: bold;
    color: var(--text-color);
}

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

/* New List Header for Select All */
.list-view-header {
    display: grid;
    grid-template-columns: auto 2fr 1fr auto; /* مطابقة لأعمدة البطاقة */
    gap: 1.5rem;
    padding: 0 1.5rem;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-secondary-color);
    align-items: center;
}

.list-view-header .header-agent {
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}

.list-view-header .header-actions {
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}


/* == competitions.css == */
/* Competitions Page Styles */

/* --- تحسينات مقترحة لصفحة إدارة المسابقات --- */

/* 1. تحسين تصميم شريط الفلاتر والبحث */
.filters-container {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.filters-container .filter-search-container {
    flex-grow: 1;
}

.filters-container .filter-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.filter-label {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    font-weight: 500;
}

.filters-container .filter-buttons {
    background-color: var(--bg-color);
    border-radius: 20px;
    padding: 4px;
    border: 1px solid var(--border-color);
}

.filters-container .sort-container {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
}

/* 2. تصميم القائمة الجديد */
.competitions-list-view {
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap for table-like view */
}

.competitions-list-view .competition-card {
    display: grid;
    grid-template-columns: auto 2fr auto 1.5fr auto; /* Checkbox | Name | Status | Agent | Actions */
    grid-template-areas: "checkbox name status agent footer";
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background-color: var(--card-bg-color);
    border: none; /* Remove individual card border */
    border-bottom: 1px solid var(--border-color); /* Use bottom border for separation */
    border-radius: 0; /* No radius for table rows */
    transition: background-color 0.2s;
}
/* تعديل: إضافة position: relative لجعل تحديد موضع الأزرار ممكناً */
.competitions-list-view .competition-card {
    position: relative;
}

/* تعديل: إخفاء الأزرار بشكل افتراضي وتحديد موضعها */
.competitions-list-view .competition-card-footer {
    position: absolute;
    left: 20px; /* تعديل: تحديد الموضع على اليسار */
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--card-bg-color);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10;
}

.competitions-list-view .competition-card:first-of-type {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.competitions-list-view .competition-card:last-of-type {
    border-bottom: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.competitions-list-view .competition-card:hover {
    background-color: var(--bg-color);
}

.competitions-list-view .competition-card.selected {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* تعديل: إظهار الأزرار عند مرور الماوس */
.competitions-list-view .competition-card:hover .competition-card-footer {
    opacity: 1;
    visibility: visible;
}

.competitions-list-view .row-checkbox {
    grid-area: checkbox;
}

.competitions-list-view .competition-card-name {
    grid-area: name;
    display: flex;
    align-items: center;
    gap: 15px;
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}

.competitions-list-view .competition-card-name h3 {
    margin: 0;
    font-size: 1.05em;
}

.competitions-list-view .competition-card-status {
    grid-area: status;
    text-align: center;
}

.competitions-list-view .competition-card-footer {
    grid-area: footer;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* جعل أزرار الإجراءات أيقونات فقط */
.competitions-list-view .competition-card-footer .btn-secondary,
.competitions-list-view .competition-card-footer .btn-danger {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1em;
    justify-content: center;
}

/* تنسيق زر تبديل الحالة */
.small-toggle {
    width: 40px;
    height: 22px;
}
.small-toggle .slider:before {
    height: 16px;
    width: 16px;
}
.small-toggle input:checked + .slider:before {
    transform: translateX(18px);
}

/* 3. تنسيق خلية الوكيل */
.table-agent-cell {
    grid-area: agent;
    display: flex;
    align-items: center;
    justify-content: center; /* تعديل: توسيط محتوى خلية الوكيل */
    gap: 10px;
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
    text-decoration: none;
    color: var(--text-color);
    min-width: 0; /* Prevents overflow */
}

.table-agent-cell:hover .agent-details span {
    color: var(--primary-color);
}

.table-agent-cell .avatar-small,
.table-agent-cell .avatar-placeholder-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.table-agent-cell .avatar-placeholder-small {
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

/* 4. شريط الإجراءات الجماعية */
.bulk-action-bar {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.bulk-action-bar.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

#bulk-action-count {
    font-weight: bold;
    color: var(--text-color);
}

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

/* 5. رأس القائمة */
.list-view-header {
    display: grid;
    grid-template-columns: auto 2fr auto 1.5fr auto; /* مطابقة لأعمدة البطاقة */
    gap: 1.5rem;
    padding: 0 1.5rem;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-secondary-color);
    align-items: center;
}

.list-view-header .header-name {
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}

.list-view-header .header-status {
    text-align: center;
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}

/* تعديل: توسيط عنوان عمود الوكيل */
.list-view-header .header-agent {
    text-align: center;
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}

/* Chart Container on Home Page */
.chart-container {
    position: relative;
    height: 300px; /* Adjust height as needed */
    background-color: var(--bg-color);
    padding: 15px;
    border-radius: 8px;
}

/* Competitions Grid */
.competitions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.competition-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.competition-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--shadow-color);
}

.competition-card.selectable {
    cursor: pointer;
}

.competition-card.selectable.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
}

.competition-card-header {
    background-color: var(--bg-color);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.competition-card-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--text-color);
}

.competition-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.competition-card-body p {
    margin: 0;
    color: var(--text-secondary-color);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.competition-card-body p i {
    margin-top: 4px;
    color: var(--primary-color);
}

.competition-card-body p.description {
    font-style: italic;
}

.competition-card-body p strong {
    color: var(--text-color);
    margin-left: 4px;
}

.competition-card-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: var(--bg-color);
}

.competition-card-footer .btn-secondary,
.competition-card-footer .btn-danger {
    padding: 8px 16px;
    font-size: 0.9em;
}

/* Status Badge for Active/Inactive state */
.status-badge {
    font-size: 0.7em;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background-color: #2ecc71; /* Green */
}

.status-badge.inactive {
    background-color: #e74c3c; /* Red */
}

/* Countdown styles */
.countdown {
    font-size: 0.9em;
    font-style: italic;
    margin-right: 5px;
}
.countdown-far {
    color: var(--text-secondary-color);
}
.countdown-near {
    color: #f39c12; /* Orange */
    font-weight: bold;
}
.countdown-today {
    color: #e74c3c; /* Red */
    font-weight: bold;
}
.countdown-expired {
    color: var(--text-secondary-color);
    text-decoration: line-through;
}

/* Create Competition Page - Redesigned */
.create-competition-layout {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Agent info on the left, form on the right */
    gap: 30px;
    align-items: flex-start;
}

.competition-form-agent-info.card-style-container {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-bottom: 0; /* remove old margin */
}

.competition-form-agent-info.card-style-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
}

.agent-info-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stack cards vertically */
    gap: 15px;
}

#competition-form.card-style-container {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-top: 0; /* remove old margin */
}

#competition-form.card-style-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: none;
    padding-bottom: 0;
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Toggle switches now use global toggle-fix.css styles */

/* Competition Templates Page - Professional Redesign */
.templates-layout {
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    align-self: flex-start; /* Stick to top */
    box-shadow: 0 4px 12px var(--shadow-color);
}

.templates-list-grouped {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.template-group {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.template-group[open] {
    box-shadow: 0 5px 15px var(--shadow-color);
}

.template-group[open] > .template-group-header {
    border-bottom: 1px solid var(--border-color);
}

.template-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    list-style: none; /* Hide default marker */
}
.template-group-header::-webkit-details-marker {
    display: none; /* Hide default marker for Chrome/Safari */
}

.template-group-header:hover {
    background-color: var(--bg-color);
}

.template-group-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: var(--primary-color);
}

.template-count {
    background-color: var(--border-color);
    color: var(--text-secondary-color);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
}

.template-group-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.template-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden; /* To contain the footer */
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--shadow-color);
}

.template-card-header {
    background-color: var(--bg-color);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.template-card h4 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.1em;
}

.template-card-body {
    padding: 20px;
    flex-grow: 1; /* Pushes footer to the bottom */
}
.template-card p {
    margin: 0;
    color: var(--text-secondary-color);
    font-size: 0.9em;
    line-height: 1.6;
}

.template-card-footer {
    padding: 10px 15px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: var(--bg-color);
}

.template-card-footer .btn-secondary,
.template-card-footer .btn-danger {
    padding: 6px 12px;
    font-size: 0.85em;
}

/* Remove old absolute positioning styles */
.template-card-actions {
   display: none; /* Replaced by footer */
}

/* The base .classification-badge is in agents.css */
.classification-badge.classification-all {
    background-color: var(--text-secondary-color);
}

@media (max-width: 900px) {
    .templates-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .create-competition-layout-v3 {
        grid-template-columns: 1fr 1.5fr;
        grid-template-areas: 
            "agent variables"
            "preview preview";
    }
    .agent-info-v3 { grid-area: agent; }
    .variables-v3 { grid-area: variables; }
    .preview-v3 { grid-area: preview; }
}

@media (max-width: 768px) {
    .create-competition-layout-v3 {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "agent"
            "variables"
            "preview";
    }
}

/* New Create Competition Page V3 */
.create-competition-layout-v3 {
    display: grid;
    grid-template-columns: 300px 450px 1fr; /* Agent Info | Variables (fixed) | Preview (flexible) */
    gap: 25px;
    align-items: flex-start;
}

.create-competition-layout-v3 .card-style-container {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    height: 100%; /* Make cards in a row same height */
}

.preview-v3.card-style-container {
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.create-competition-layout-v3 h3 {
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    font-size: 1.2em;
}

.agent-info-v3 .agent-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.variables-v3 .override-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.agent-info-v3 .action-info-card.invalid p {
    color: #e74c3c;
    animation: pulse-red 0.5s;
}

.validation-messages {
    margin-top: 15px; /* Adjusted margin for new position */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.validation-error {
    background-color: color-mix(in srgb, #e74c3c 15%, transparent);
    color: #e74c3c;
    border: 1px solid color-mix(in srgb, #e74c3c 40%, transparent);
    border-right: 5px solid #e74c3c;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.variables-v3 #competition-cost-summary {
    margin-top: 15px;
    background-color: var(--bg-color);
    padding: 10px 15px;
    border-radius: 6px;
}

.variables-v3 #competition-cost-summary label {
    color: var(--primary-color);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}
@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.preview-v3 #competition-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.preview-v3 .form-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* New Create Competition Page V2 */
.page-subtitle {
    text-align: center;
    font-size: 1.1em;
    color: var(--text-secondary-color);
    margin: -10px 0 30px 0;
}

.agent-name-link-subtitle {
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.2s;
}

.agent-name-link-subtitle:hover {
    color: var(--primary-color);
}

.btn-send-telegram {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 1.1em;
}

.telegram-preview-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 20px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.telegram-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    background-color: var(--border-color);
    color: var(--text-secondary-color);
    font-weight: bold;
    font-size: 0.9em;
}

.telegram-preview-header .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.telegram-preview-header .fa-telegram {
    color: #2AABEE;
    font-size: 1.2em;
}

.telegram-preview-body {
    padding: 15px;
    flex-grow: 1;
    overflow-y: auto;
}

.preview-v3 #competition-description {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-color);
    resize: none;
    line-height: 1.7;
    font-size: 1em;
    outline: none;
    padding: 0;
    min-height: 250px; /* Ensure a good minimum height */
}
/* NEW: Styles for image preview in Telegram box */
.telegram-image-preview-container {
    position: relative;
    margin: 10px 15px 0 15px; /* تعديل: إضافة حشوة جانبية */
    border-radius: 6px; /* تعديل: تقليل الانحناء */
    overflow: hidden;
    border: 1px solid var(--border-color);
    width: 120px; /* تعديل: تحديد عرض ثابت */
    height: 80px; /* تعديل: تحديد ارتفاع ثابت */
    cursor: pointer; /* تعديل: إظهار مؤشر النقر */
    transition: transform 0.2s;
}

.telegram-image-preview-container img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.telegram-image-preview-container .btn-icon-action {
    position: absolute;
    top: 5px;
    left: 5px; /* RTL */
    background-color: rgba(0,0,0,0.5);
    color: white;
}
.telegram-image-preview-container:hover {
    transform: scale(1.05);
}

/* NEW: Styles for the full-screen image modal */
.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: pointer;
    animation: fadeIn 0.3s;
}

.image-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s;
}


/* Navbar Dropdown - Added here as navbar.css is not in context */
.nav-item.dropdown {
    position: relative;
}

.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    position: absolute;
    left: 0; /* Position the dropdown to the left edge of the button */
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 16px var(--shadow-color);
    min-width: 200px; /* تعديل: زيادة قيمة z-index لضمان ظهور القائمة في المقدمة */
    z-index: 1050;
    padding: 5px 0;
    margin-top: 5px;
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap; /* Prevent wrapping */
}

.dropdown-item:hover, .dropdown-item.active {
    background-color: var(--primary-color);
    color: white;
}

.dropdown-toggle::after {
    content: ' \f078'; /* Font Awesome down arrow */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8em;
    margin-right: 5px;
}

.filter-separator {
    width: 1px;
    background-color: var(--border-color);
    margin: 0 10px;
    align-self: stretch;
}

/* New Table Styles for Competitions Management */
.table-responsive-container {
    overflow-x: auto;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05em; /* زيادة حجم الخط الأساسي للجدول */
}

.modern-table thead tr {
    border-bottom: 2px solid var(--primary-color);
}

.modern-table th {
    padding: 18px; /* زيادة الحشوة لرأس الجدول */
    text-align: center; /* توسيط جميع العناوين */
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
}

.modern-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.modern-table tbody tr:last-child {
    border-bottom: none;
}

.modern-table tbody tr:hover {
    background-color: var(--bg-color);
}

.modern-table td {
    padding: 20px 18px; /* زيادة الحشوة لخلايا الجدول */
    vertical-align: middle;
    text-align: center; /* توسيط محتوى جميع الخلايا */
}

.competition-name-cell strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.05em;
}

.competition-name-cell small {
    color: var(--text-secondary-color);
}

.table-agent-cell {
    display: flex;
    align-items: center;
    justify-content: center; /* توسيط محتوى خلية الوكيل */
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
}

.agent-details {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.agent-name-link {
    font-size: 1.2em; /* زيادة تكبير حجم اسم الوكيل */
    font-weight: bold;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s;
}


.table-agent-cell .avatar-small,
.table-agent-cell .avatar-placeholder-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.table-agent-cell .avatar-placeholder-small {
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

.actions-cell {
    display: flex;
    gap: 10px;
    justify-content: center; /* توسيط أزرار الإجراءات */
}

.list-view-header .header-agent {
    text-align: center;
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
}
.actions-column {
    text-align: center !important; /* توسيط عنوان عمود الإجراءات */
}

.btn-small {
    padding: 6px 12px !important;
    font-size: 0.9em !important;
}

/* Responsive Table */
@media (max-width: 768px) {
    .modern-table thead {
        display: none;
    }
    .modern-table, .modern-table tbody, .modern-table tr, .modern-table td {
        display: block;
        width: 100%;
    }
    .modern-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
    }
    .modern-table td {
        text-align: left;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid var(--border-color);
    }
    .modern-table td:last-child {
        border-bottom: none;
    }
    .modern-table td::before {
        content: attr(data-label);
        position: absolute;
        right: 15px;
        width: 45%;
        padding-left: 10px;
        font-weight: bold;
        text-align: right;
        color: var(--text-secondary-color);
    }
    .actions-cell {
        justify-content: flex-start;
    }

/* --- New Styles for Agent Selection on Create Competition Page --- */

.agent-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.agent-selection-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s ease-in-out;
    position: relative;
}

.agent-selection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--shadow-color);
    border-color: var(--primary-color);
}

.agent-selection-card img,
.agent-selection-card .avatar-placeholder {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.agent-selection-card .avatar-placeholder {
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: var(--text-secondary-color);
}

.agent-selection-card .agent-info h3 {
    margin: 0;
    font-size: 1.1em;
}

.agent-selection-card .agent-info p {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.actions-column {
    text-align: left !important;
}

.form-hint {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    margin-top: 8px;
    background-color: var(--bg-color);
    padding: 5px 10px;
    border-radius: 4px;
}
.page-notification {
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
}
.page-notification.info {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.page-notification.warning {
    background-color: color-mix(in srgb, #f39c12 15%, transparent);
    color: #f39c12;
    border-color: color-mix(in srgb, #f39c12 40%, transparent);
}
.page-notification strong {
    font-size: 1.1em;
    margin: 0 5px;
}
.form-hint.warning {
    background-color: color-mix(in srgb, #f39c12 20%, transparent);
    color: #f39c12;
    font-weight: bold;
}

/* NEW: Styles for image upload in template modals */
.template-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.image-upload-preview-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.image-upload-preview-wrapper .image-preview {
    max-width: 100%;
    height: 200px; /* ثابت لاحتواء الصورة بالكامل */
    border-radius: 10px;
    object-fit: contain; /* إظهار الصورة كاملة */
    background: #111;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
}
.actions-cell .btn-danger {
    background-color: transparent;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

/* NEW: Keyframes for modal animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* == calendar.css == */
/* Calendar Page Styles */

.page-header.column-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 10px;
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.header-top-row h1 {
    font-size: 1.2em;
    background: linear-gradient(135deg, #23D4FE, #00B8E6, #6FE4FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin: 0;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(35, 212, 254, 0.3);
}

.calendar-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-search-container {
    position: relative;
    flex: 1 1 180px;
    min-width: 140px;
    max-width: 300px;
}

.calendar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    max-width: 100%;
    width: 100%;
}

.day-column {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

.day-column.today {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg-color));
    border-color: var(--primary-color);
}


.day-column h2 {
    margin-top: 0;
    font-size: 0.85em;
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
    padding: 6px 8px;
    margin: 0;
}

.day-column.today h2 {
    color: var(--primary-hover-color);
}

.day-progress {
    width: calc(100% - 12px);
    margin: 0 6px 6px 6px;
    background-color: var(--border-color);
    border-radius: 5px;
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.day-progress .progress-bar {
    background: linear-gradient(90deg, #23D4FE, #00B8E6, #6FE4FF);
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
    box-shadow: 0 0 15px rgba(35, 212, 254, 0.6);
}

.day-progress .progress-label {
    position: absolute;
    font-size: 0.7em;
    font-weight: bold;
    color: var(--text-color);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.filter-search-container .fa-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary-color);
    pointer-events: none;
    font-size: 0.85em;
}

.filter-search-container input[type="search"] {
    width: 100%;
    padding: 6px 32px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-size: 0.85em;
}

.filter-search-container input[type="search"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.search-clear-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary-color);
    cursor: pointer;
    display: none;
    font-size: 0.85em;
}

.filter-buttons {
    display: flex;
    background-color: var(--bg-color);
    border-radius: 16px;
    padding: 3px;
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.filter-btn {
    background-color: transparent;
    border: none;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-secondary-color);
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.8em;
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.day-column-content {
    padding: 8px;
    padding-top: 0;
}

.no-tasks-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary-color);
    padding: 25px 12px;
    text-align: center;
}

.no-tasks-placeholder i {
    font-size: 1.8em;
    margin-bottom: 6px;
}

.no-tasks-placeholder p {
    margin: 0;
    font-size: 0.85em;
}

.calendar-agent-item {
    padding: 6px;
    border-radius: 8px;
    border: 1px solid rgba(35, 212, 254, 0.2);
    background: linear-gradient(135deg, rgba(35, 212, 254, 0.05), rgba(0, 184, 230, 0.05));
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-top: 5px;
    box-shadow: 0 2px 8px rgba(35, 212, 254, 0.1);
}

.calendar-agent-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(35, 212, 254, 0.3);
    border-color: #23D4FE;
}

.calendar-agent-item[style*="display: none"] {
    display: none !important;
}

.calendar-agent-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
    border-color: var(--primary-color);
}

.calendar-agent-item.complete {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.18), rgba(35, 212, 254, 0.1));
    border-color: #06D6A0;
    box-shadow: 0 2px 12px rgba(6, 214, 160, 0.3);
}

/* إضافة: تنسيقات السحب والإفلات */
.calendar-agent-item.dragging {
    opacity: 0.5;
    background-color: var(--primary-color);
    cursor: grabbing;
}

.day-column.drag-over {
    background-color: color-mix(in srgb, var(--primary-color) 20%, var(--card-bg-color));
    border-style: dashed;
    border-color: var(--primary-hover-color);
}
/* نهاية الإضافة */

.calendar-agent-main {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.calendar-agent-avatar,
.calendar-agent-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary-color);
    font-size: 0.8em;
}

.calendar-agent-info {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
}

.calendar-agent-item .agent-name {
    font-weight: bold;
    color: var(--text-color);
    display: block;
    margin-bottom: 2px;
    margin-top: 0;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.calendar-agent-id {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    cursor: copy;
    padding: 2px 5px;
    border-radius: 3px;
    transition: background-color 0.2s;
    display: inline-block;
    margin: 0;
    font-weight: 600;
}

.calendar-agent-id:hover {
    background-color: var(--border-color);
}

.calendar-agent-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.calendar-agent-actions .action-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-color);
    padding: 5px 8px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.calendar-agent-actions .action-item label {
    font-size: 0.8em;
    cursor: pointer;
    margin: 0;
}

.calendar-agent-actions .action-item.done {
    border-color: #27ae60;
    background: color-mix(in srgb, #27ae60 12%, var(--bg-color));
}



/* Smaller checkboxes for calendar */
.custom-checkbox.small {
    font-size: 0.9em;
}

/* Disabled state for checkboxes in calendar */
.custom-checkbox input[type="checkbox"]:disabled + .checkmark {
    background-color: var(--bg-color);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Search Highlighting */
.calendar-agent-item mark {
    background-color: #f1c40f; /* Yellow */
    color: #333;
    padding: 0 2px;
    border-radius: 3px;
}
body.dark-mode .calendar-agent-item mark {
    color: #000;
}

/* Toggle switches in calendar now use global toggle-fix.css styles */

.agent-name .task-complete-icon {
    display: none;
}

.agent-name.has-checkmark .task-complete-icon {
    display: inline-flex;
}

.task-complete-icon {
    color: #fff;
    background: linear-gradient(135deg, #06D6A0, #00B8A8);
    border-radius: 50%;
    font-size: 0.75em;
    margin-right: 5px;
    vertical-align: middle;
    width: 1.3em;
    height: 1.3em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(6, 214, 160, 0.5);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(6, 214, 160, 0.5);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 4px 16px rgba(6, 214, 160, 0.8);
    }
}

/* Classification Badge Styles */
.classification-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.classification-r {
    background-color: #e74c3c; /* Red */
}

.classification-a {
    background-color: #f39c12; /* Orange */
}

.classification-b {
    background-color: #3498db; /* Blue */
}

.classification-c {
    background-color: #95a5a6; /* Gray */
}

/* Countdown Timer Styles */
.countdown-timer-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bg-color);
    padding: 6px 10px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    font-size: 0.85em;
    color: var(--text-secondary-color);
}

.countdown-timer-container .fa-sync-alt {
    color: var(--primary-color);
    font-size: 0.9em;
}

.countdown-timer-container .countdown-time {
    font-weight: bold;
    color: var(--text-color);
}

.header-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.header-actions-group .btn {
    padding: 6px 12px;
    font-size: 0.85em;
}

.header-actions-group .info-tooltip {
    font-size: 0.9em;
}

.calendar-agent-number {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.calendar-agent-item {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .calendar-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .calendar-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .calendar-container {
        grid-template-columns: 1fr;
    }
    
    .header-top-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .calendar-filters {
        flex-direction: column;
        align-items: stretch;
    }
}

/* == top-agents.css == */
/* --- Leaderboard Page Styles --- */

/* General Layout & Header */
.leaderboard-title {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
}

/* --- NEW: Confetti Animation Styles --- */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none; /* Allows clicking through the confetti */
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 20px;
    opacity: 0;
    top: -5%; /* Start above the screen */
    animation: fall 5s linear forwards;
}

@keyframes fall {
    0% {
        transform: translateY(0vh) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) rotateZ(720deg);
        opacity: 0;
    }
}
/* --- NEW: Redesigned Filters (v2) --- */
.leaderboard-filters-v2 {
 display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px;
    background-color: var(--card-bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    gap: 15px;
    margin-bottom: 20px;
}

.leaderboard-filters-v2 .filter-group {
    flex: 1;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    min-width: 280px;
}

.leaderboard-filters-v2 .filter-label {
 display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-secondary-color);
    margin-bottom: 12px;
    font-size: 1em;
}

.leaderboard-filters-v2 .filter-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.leaderboard-filters-v2 .filter-btn {
    flex-grow: 1;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease-in-out;
}

.leaderboard-filters-v2 .filter-btn:hover:not(.active) {
    background-color: var(--border-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.leaderboard-filters-v2 .filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* Classification buttons specific styles */
.leaderboard-filters-v2 .classification-badge.active.classification-r { background-color: #8e44ad; }
.leaderboard-filters-v2 .classification-badge.active.classification-a { background-color: #c0392b; }
.leaderboard-filters-v2 .classification-badge.active.classification-b { background-color: #2980b9; }
.leaderboard-filters-v2 .classification-badge.active.classification-c { background-color: #27ae60; }

/* Custom date filter styling */
.leaderboard-filters-v2 .custom-date-filter {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-top: 20px;
}

.leaderboard-filters-v2 .date-inputs-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.leaderboard-filters-v2 .date-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
}

.leaderboard-filters-v2 .date-label {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    font-weight: 500;
}

.leaderboard-filters-v2 .date-input {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95em;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: all 0.2s;
    direction: ltr;
}

.leaderboard-filters-v2 .date-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* Tabs */
.leaderboard-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.leaderboard-tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary-color);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.leaderboard-tab-btn:hover {
    color: var(--primary-color);
}

.leaderboard-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Top 3 Podium Section */
.leaderboard-top-three {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* General Card Styles */
.leaderboard-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.leaderboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* --- NEW: Podium View Styles --- */
.leaderboard-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align items to the bottom to create the podium effect */
    gap: 20px;
    margin-top: 30px;
    perspective: 1000px; /* NEW: Add perspective for 3D effects */
    margin-bottom: 20px;
    padding: 20px;
}

.leaderboard-podium .leaderboard-card {
    width: 30%;
    max-width: 320px;
    margin: 0;
    text-align: center;
    transition: all 0.3s ease-out; /* NEW: Smoother transition */
}

.leaderboard-podium .leaderboard-card:hover {
    transform: translateY(-15px);
}

/* 1st Place (Gold) - Center and Higher */
.leaderboard-podium .leaderboard-card.gold {
    order: 2; /* Center item */
    transform: translateY(-30px); /* Raise it higher */
    min-height: 350px;
}

/* 2nd Place (Silver) - Left (visually right in RTL) */
.leaderboard-podium .leaderboard-card.silver {
    order: 1; /* First item in flex order */
    min-height: 310px;
}

/* 3rd Place (Bronze) - Right (visually left in RTL) */
.leaderboard-podium .leaderboard-card.bronze {
    order: 3; /* Last item in flex order */
    min-height: 290px;
}


/* Top 3 Card Specifics */
.leaderboard-card.top-rank {
    border: 1px solid transparent; /* NEW: Transparent border to hold the glow */
    z-index: 1;
    background-size: 300% 300%; /* NEW: For background animation */
    animation: cosmic-flow 20s ease infinite; /* NEW: Background animation */
}

/* --- NEW: Glare effect on hover --- */
.leaderboard-card.top-rank::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}
.leaderboard-card.top-rank:hover::after {
    left: 150%;
}

/* --- NEW: Glow and Background styles for each rank --- */
.leaderboard-card.gold {
    background-image: radial-gradient(circle at 10% 10%, #4a380f, transparent),
                      radial-gradient(circle at 80% 90%, #b67d15, transparent),
                      var(--card-bg-color);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.3);
}
.leaderboard-card.gold:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6);
}

.leaderboard-card.silver {
    background-image: radial-gradient(circle at 90% 20%, #4f5b66, transparent),
                      radial-gradient(circle at 20% 80%, #888, transparent),
                      var(--card-bg-color);
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.3), 0 0 15px rgba(192, 192, 192, 0.2);
    border-color: rgba(192, 192, 192, 0.2);
}
.leaderboard-card.silver:hover {
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.5), 0 0 30px rgba(192, 192, 192, 0.3);
    border-color: rgba(192, 192, 192, 0.5);
}

.leaderboard-card.bronze {
    background-image: radial-gradient(circle at 85% 15%, #6d4c2c, transparent),
                      radial-gradient(circle at 15% 85%, #8c582c, transparent),
                      var(--card-bg-color);
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.3), 0 0 15px rgba(205, 127, 50, 0.2);
    border-color: rgba(205, 127, 50, 0.2);
}
.leaderboard-card.bronze:hover {
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5), 0 0 30px rgba(205, 127, 50, 0.3);
    border-color: rgba(205, 127, 50, 0.5);
}

/* --- NEW: Keyframe for background animation --- */
@keyframes cosmic-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.glow-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    animation: glow-move 4s linear infinite;
}

@keyframes glow-move {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Card Sections */
.leaderboard-rank {
    position: absolute;
    top: 15px;
    left: 15px;
}

.medal-badge {
    font-size: 2.5em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.leaderboard-agent-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.leaderboard-avatar, .leaderboard-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--card-bg-color);
    box-shadow: 0 5px 15px var(--shadow-color); /* ظل عام */
    transition: box-shadow 0.3s ease;
}

/* --- NEW: Custom Avatar Borders for Podium --- */
.leaderboard-card.gold .leaderboard-avatar,
.leaderboard-card.gold .leaderboard-avatar-placeholder {
    box-shadow: 0 0 0 4px #FFD700, 0 5px 20px rgba(255, 215, 0, 0.5); /* إطار وظل ذهبي */
}

.leaderboard-card.silver .leaderboard-avatar,
.leaderboard-card.silver .leaderboard-avatar-placeholder {
    box-shadow: 0 0 0 4px #C0C0C0, 0 5px 15px rgba(192, 192, 192, 0.4); /* إطار وظل فضي */
}

.leaderboard-card.bronze .leaderboard-avatar,
.leaderboard-card.bronze .leaderboard-avatar-placeholder {
    box-shadow: 0 0 0 4px #CD7F32, 0 5px 15px rgba(205, 127, 50, 0.4); /* إطار وظل برونزي */
}

.leaderboard-avatar-placeholder {
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    color: var(--text-secondary-color);
}

.leaderboard-agent-info {
    margin-top: 5px;
}

.leaderboard-agent-name {
    font-size: 1.4em;
    font-weight: 600;
    margin: 0;
}

.leaderboard-agent-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.leaderboard-agent-id {
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.leaderboard-rank-badge {
    background-color: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
}

.leaderboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: auto; /* Push stats to the bottom */
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    align-items: stretch;
}

.leaderboard-stats-grid .stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 78px;
}

.leaderboard-stats-grid .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    border-color: color-mix(in srgb, var(--primary-color) 25%, var(--border-color));
}

.leaderboard-stats-grid .stat-value {
    font-size: 1.6em;
    font-weight: bold;
    display: block;
    color: var(--text-color);
    line-height: 1.2;
    font-feature-settings: "tnum" 1; /* tabular numbers for alignment */
}

.leaderboard-stats-grid .stat-label {
    font-size: 0.95em;
    line-height: 1.4;
    color: var(--text-secondary-color);
    white-space: normal; /* allow wrapping for Arabic words */
    overflow: visible;
    display: block;
    margin-top: 4px;
    letter-spacing: 0.1px;
}

/* Subtle metric accent per column for visual distinction */
.leaderboard-stats-grid .stat-item:nth-child(1) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 7%, transparent), transparent);
}
.leaderboard-stats-grid .stat-item:nth-child(2) {
    background: linear-gradient(180deg, color-mix(in srgb, #e11d48 7%, transparent), transparent);
}
.leaderboard-stats-grid .stat-item:nth-child(3) {
    background: linear-gradient(180deg, color-mix(in srgb, #16a34a 7%, transparent), transparent);
}

/* Ensure icons inside labels have consistent spacing */
.leaderboard-stats-grid .stat-label i {
    margin-inline-start: 6px;
}

.top-agent-banner {
    position: absolute;
    top: 10px;
    right: -40px;
    background-color: #FFD700;
    color: #333;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-weight: bold;
    font-size: 0.8em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Trend Icons */
.trend-up { color: #27ae60; }
.trend-down { color: #e74c3c; }

/* Divider and Bottom Sections */
.leaderboard-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
    margin: 40px 0;
}

.leaderboard-bottom-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.leaderboard-list-section .leaderboard-section-title {
    font-size: 1.5em;
    color: var(--text-color);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.leaderboard-simple-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-card-simple {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.leaderboard-card-simple:hover {
    background-color: var(--bg-color);
}

.simple-rank {
    font-weight: bold;
    color: var(--text-secondary-color);
    width: 30px;
    text-align: center;
}

.leaderboard-avatar-simple, .leaderboard-avatar-placeholder-simple {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.leaderboard-avatar-placeholder-simple {
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.simple-agent-info {
    flex-grow: 1;
}

.simple-agent-name {
    font-weight: 600;
}

.simple-agent-id {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    display: block;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .leaderboard-bottom-sections {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .leaderboard-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .leaderboard-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .leaderboard-main, .leaderboard-stats {
        justify-content: center;
    }
}

/* == activity-log.css == */
/* Activity Log Page Styles */

.activity-log-table-container {
    overflow-x: auto;
    margin-top: 20px;
}

.activity-log-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow-color);
}

.activity-log-table th,
.activity-log-table td {
    padding: 12px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.activity-log-table th {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.activity-log-table tbody tr:hover {
    background: var(--border-color);
}

.activity-log-table .log-icon-cell {
    text-align: center;
    width: 50px;
}

.activity-log-table .log-icon-cell i {
    font-size: 1.4em;
}

.activity-log-table .log-icon-cell i[data-action-group="create"] { color: #28a745; }
.activity-log-table .log-icon-cell i[data-action-group="delete"] { color: #dc3545; }
.activity-log-table .log-icon-cell i[data-action-group="update"] { color: #007bff; }
.activity-log-table .log-icon-cell i[data-action-group="renew"] { color: #ffc107; }
.activity-log-table .log-icon-cell i[data-action-group="expire"] { color: #6c757d; }
.activity-log-table .log-icon-cell i[data-action-group="read"] { color: #17a2b8; }

.activity-log-table .log-description-cell {
    max-width: 300px;
    word-wrap: break-word;
}

.activity-log-table .log-action-cell {
    font-weight: 500;
    background: var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-block;
}

.activity-log-table .log-user-cell {
    font-weight: bold;
    color: var(--primary-color);
}

.activity-log-table .log-time-cell {
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.activity-log-table .log-details-cell {
    text-align: center;
}

.log-bulk-header {
    margin-top: 10px;
    text-align: right;
}

.log-meta-list { display: flex; flex-direction: column; gap: 6px; }
.log-meta-item { display: flex; gap: 10px; align-items: flex-start; }
.log-meta-item .meta-key { color: var(--text-color); font-weight: 600; min-width: 110px; }
.log-meta-item .meta-val { color: var(--text-secondary-color); background: var(--input-bg-color); padding: 4px 8px; border-radius: 4px; box-shadow: 0 1px 2px var(--shadow-color); }
.log-meta-details {
    grid-column: 2 / -1;
    background-color: var(--card-bg-color);
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
    font-size: 0.92rem;
    white-space: pre-wrap;
    word-break: break-word;
    display: none; /* Hidden by default */
}

/* API brief layout */
.api-log-brief {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.api-left { display:flex; gap:10px; align-items:center; }
.api-method {
    font-weight: 700;
    padding: 6px 8px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
}
.api-method.api-method-GET { background: #17a2b8; }
.api-method.api-method-POST { background: #28a745; }
.api-method.api-method-DELETE { background: #dc3545; }
.api-method.api-method-PUT { background: #007bff; }
.api-method.api-method-PATCH { background: #6f42c1; }
.api-endpoint { color: #222; font-size: 0.95rem; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.api-status { font-weight:700; padding:4px 8px; border-radius:6px; color:#fff; }
.api-status.api-status-200 { background:#28a745; }
.api-status.api-status-201 { background:#20c997; }
.api-status.api-status-304 { background:#6c757d; }
.api-status.api-status-4xx, .api-status.api-status-400 { background:#ffc107; color:#222; }
.api-actor { font-size:0.85rem; color:#444; }

.log-meta-details.visible { display:block; }

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-color);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary-color);
}

.modal-close:hover {
    color: var(--text-color);
}

.modal-body {
    padding: 20px;
    font-size: 0.95rem;
    color: var(--text-color);
}

.api-copy-btn {
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    margin-left: 6px;
    font-size: 0.9rem;
}
.api-copy-btn:hover { color: #222; }

.log-meta-copy-wrap { display:flex; justify-content:flex-end; margin-bottom:8px; }
.log-meta-copy { background:var(--primary-color); color:#fff; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; font-size:0.9rem; }
.log-meta-copy:hover { background:var(--primary-hover-color); }

.activity-log-table .log-meta-toggle {
    background: var(--primary-color);
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 1px 4px var(--shadow-color);
    transition: background 0.15s ease, transform 0.08s ease;
}
.activity-log-table .log-meta-toggle:hover { transform: translateY(-1px); background: var(--primary-hover-color); }

/* Add checkbox to the grid */
.log-card {
    grid-template-columns: 20px 40px 1fr auto; /* Checkbox, Icon, Content, Details */
}

.log-card .log-select-checkbox {
    justify-self: center;
}

/* Purge Confirmation Modal Styling */
#purge-confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}

#purge-confirm-modal .modal-content {
    background: var(--card-bg-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideDown 0.3s ease;
}

#purge-confirm-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-radius: 12px 12px 0 0;
}

#purge-confirm-modal .modal-header h2 {
    margin: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#purge-confirm-modal .modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

#purge-confirm-modal .modal-close:hover {
    transform: scale(1.2);
}

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

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


/* == analytics.css == */
/* Analytics Dashboard Background */
.analytics-dashboard {
    font-size: 1.06rem;
    line-height: 1.65;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
    padding: 20px;
}

body.dark-mode .analytics-dashboard {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed;
}

#mostInteractiveCompetitionsCard.interactive-section.pro {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2), 0 5px 15px rgba(0,0,0,0.1);
    padding-top: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode #mostInteractiveCompetitionsCard.interactive-section.pro {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#mostInteractiveCompetitionsCard.interactive-section.pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.15);
}
#mostInteractiveCompetitionsCard.interactive-section.pro .interactive-header.clean.pro h2 {
    font-size: 1.5rem;
    letter-spacing: .5px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
#mostInteractiveCompetitionsCard.interactive-section.pro .interactive-header.clean.pro h2 i { font-size:1.1rem; }
#mostInteractiveCompetitionsCard.interactive-section.pro .section-subtitle { 
    font-size: .9rem; 
    margin-bottom: 6px; 
    color: rgba(255,255,255,0.9);
}

/* Make agent names white in Top Agents by Classification section */
#topAgentsByClassCard .agent-link {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
#topAgentsByClassCard .agent-link:hover {
    text-decoration: underline;
}

/* Inline badges and metric value next to agent name */
#topAgentsByClassCard .inline-class-badge {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    font-size: 0.75rem;
    color: #fff;
    margin-left: 8px;
}
#topAgentsByClassCard .metric-value {
    display: inline-block;
    margin-right: 6px;
    font-weight: 700;
    color: #ffd166;
    background: rgba(0,0,0,0.12);
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
}

/* allow hiding of columns based on selected metric via table class */
#topAgentsByClassTable.metric-views th:nth-child(3),
#topAgentsByClassTable.metric-views td:nth-child(3) {
    display: table-cell;
}
#topAgentsByClassTable.metric-views th:nth-child(4),
#topAgentsByClassTable.metric-views td:nth-child(4),
#topAgentsByClassTable.metric-views th:nth-child(5),
#topAgentsByClassTable.metric-views td:nth-child(5) {
    display: table-cell;
}

#topAgentsByClassTable.metric-reactions th:nth-child(3),
#topAgentsByClassTable.metric-reactions td:nth-child(3) {
    display: none;
}
#topAgentsByClassTable.metric-reactions th:nth-child(4),
#topAgentsByClassTable.metric-reactions td:nth-child(4) {
    display: table-cell;
}
#topAgentsByClassTable.metric-reactions th:nth-child(5),
#topAgentsByClassTable.metric-reactions td:nth-child(5) {
    display: none;
}

#topAgentsByClassTable.metric-participants th:nth-child(3),
#topAgentsByClassTable.metric-participants td:nth-child(3) {
    display: none;
}
#topAgentsByClassTable.metric-participants th:nth-child(4),
#topAgentsByClassTable.metric-participants td:nth-child(4) {
    display: none;
}
#topAgentsByClassTable.metric-participants th:nth-child(5),
#topAgentsByClassTable.metric-participants td:nth-child(5) {
    display: table-cell;
}

/* Metric controls */
.top-agents-controls { display:flex; gap:10px; align-items:center; margin:8px 0 12px; }
.top-agents-controls .metric-label { color: rgba(255,255,255,0.85); font-weight:700; margin-right:6px; }
.top-agents-controls .metric-buttons { display:flex; gap:8px; }
.top-agents-controls .metric-btn { background: transparent; color:#fff; border:1px solid rgba(255,255,255,0.12); padding:6px 10px; border-radius:8px; cursor:pointer; }
.top-agents-controls .metric-btn.active { background: rgba(255,255,255,0.12); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
#mostInteractiveCompetitionsCard.interactive-section.pro .filter-toolbar.mini.clean.pro {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 10px 18px 8px 18px;
    align-items: center;
}
#mostInteractiveCompetitionsCard.interactive-section.pro .filter-toolbar.mini.clean.pro .toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
#mostInteractiveCompetitionsCard.interactive-section.pro .filter-toolbar.mini.clean.pro .toolbar-group label { 
    font-size:.75rem;
    margin: 0;
    white-space: nowrap;
}
#mostInteractiveCompetitionsCard.interactive-section.pro .filter-toolbar.mini.clean.pro .input-select { 
    font-size:.8rem;
    min-width: 100px;
}
#mostInteractiveCompetitionsCard.interactive-section.pro .interactive-table-wrapper.clean.pro { padding: 6px 18px 20px 18px; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table {
    font-size: .92rem !important;
    border-collapse: separate;
    border-spacing:0;
}
/* Column widths */
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-index { width: 48px; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-question { width: 38%; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-answer { width: 24%; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-type { width: 9%; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-sends { width: 7%; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-views { width: 8%; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-reactions { width: 7%; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table col.col-participants { width: 7%; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table thead th {
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb),0.55), rgba(var(--primary-color-rgb),0.32));
    font-size: .86rem !important;
    padding: 12px 12px !important;
    position: sticky;
    top:0;
    z-index:3;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td,
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table th{
    vertical-align: middle;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:nth-child(2),
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:nth-child(3){
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:nth-child(4),
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:nth-child(5),
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:nth-child(6),
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:nth-child(7),
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:nth-child(8){
    text-align: center;
    white-space: nowrap;
}
/* Remove cell borders, keep only row separators */
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td, 
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table th {
    border: none;
    border-left: 1px solid rgba(var(--primary-color-rgb),0.15);
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table td:first-child,
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table th:first-child {
    border-left: none;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr { 
    transition: background .25s ease, transform .15s ease; 
    border-bottom: 2px solid rgba(var(--primary-color-rgb),0.5) !important;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr:last-child {
    border-bottom: none !important;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr:hover { 
    background: rgba(var(--primary-color-rgb),0.14); 
}
#mostInteractiveCompetitionsCard.interactive-section.pro .index-badge { background: rgba(var(--primary-color-rgb),0.35); font-size:.65rem; }
#mostInteractiveCompetitionsCard.interactive-section.pro .question-cell { 
    font-weight:700; 
    line-height:1.55; 
    white-space:normal; 
}
#mostInteractiveCompetitionsCard.interactive-section.pro .question-cell .question-icon { font-size:.85rem; opacity:.85; margin-left:6px; }
#mostInteractiveCompetitionsCard.interactive-section.pro .question-cell .question-text { display:inline; }
#mostInteractiveCompetitionsCard.interactive-section.pro .question-cell .answer-badge {
    display:inline-block;
    margin-right:12px;
    padding:4px 10px;
    font-size:.65rem;
    font-weight:600;
    background:rgba(var(--primary-color-rgb),0.12);
    border:1px solid rgba(var(--primary-color-rgb),0.25);
    border-radius:14px;
    backdrop-filter:blur(4px);
}
/* Two-row layout styling */
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tr.mi-row.mi-question { 
    background: rgba(var(--primary-color-rgb),0.10) !important;
    border-bottom: none !important;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tr.mi-row.mi-metrics { 
    background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.06), rgba(var(--primary-color-rgb),0.02)) !important;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tr.mi-row.mi-metrics td { 
    font-size:.75rem;
    padding:6px 10px !important;
}
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tr.mi-row.mi-metrics td.mi-spacer { 
    opacity:0; 
    pointer-events:none; 
}
#mostInteractiveCompetitionsCard.interactive-section.pro .type-badge { font-size:.68rem; padding:5px 10px; }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.04); }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr:nth-child(1) { background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.60), rgba(var(--primary-color-rgb),0.32)); }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr:nth-child(2) { background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.48), rgba(var(--primary-color-rgb),0.26)); }
#mostInteractiveCompetitionsCard.interactive-section.pro table.interactive-competitions-table tbody tr:nth-child(3) { background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.40), rgba(var(--primary-color-rgb),0.20)); }
#mostInteractiveCompetitionsCard.interactive-section.pro .header-icon { font-size:.7rem; }

/* Old metrics summary bar removed */
/* Interactive Competitions Table Enhancements */
.interactive-competitions-table {
    width: 100%;
    border-collapse: collapse;
}
.interactive-competitions-table thead th {
    background: var(--table-head-bg, linear-gradient(90deg, rgba(var(--primary-color-rgb),0.55), rgba(var(--primary-color-rgb),0.25)));
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(var(--primary-color-rgb),0.35);
    padding: 10px 12px;
}
/* When sharing styling with rank-changes-table, inherit gradient from thead (ensures exact parity with Agents table) */
.interactive-competitions-table.rank-changes-table thead th {
    background: inherit !important;
}
/* Comparison Mode Badges */
.comparison-mini-badge,
.mini-diff,
.diff-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: .5px;
    vertical-align: middle;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}
.comparison-mini-badge.positive,
.mini-diff.positive,
.diff-badge.positive { background: rgba(46,204,113,0.35); border-color: rgba(46,204,113,0.55); }
.comparison-mini-badge.negative,
.mini-diff.negative,
.diff-badge.negative { background: rgba(231,76,60,0.35); border-color: rgba(231,76,60,0.55); }
.comparison-mini-badge.neutral,
.mini-diff.neutral,
.diff-badge.neutral { background: rgba(127,140,141,0.35); border-color: rgba(127,140,141,0.55); }

/* Table diff cells */
td.diff.positive { color: #2ecc71; font-weight:700; }
td.diff.negative { color: #e74c3c; font-weight:700; }
td.diff.neutral { color: #95a5a6; font-weight:700; }

/* Deposit bonus comparison extra columns layout safeguard */
#grantedBalancesCard table.deposit-bonus-table td { position: relative; }

/* Most Interactive Competitions - Comparison Mode Styles */
.interactive-item.comparison-mode {
    border-left: 3px solid var(--primary-color);
}
.interactive-item.comparison-mode .item-meta.comparison-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
}
.metric-comparison {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--primary-color-rgb), 0.08);
    padding: 4px 8px;
    border-radius: 8px;
}
.metric-comparison .metric-chip.period1 {
    background: rgba(76,175,80,0.25);
    border: 1px solid rgba(76,175,80,0.4);
}
.metric-comparison .metric-chip.period2 {
    background: rgba(33,150,243,0.25);
    border: 1px solid rgba(33,150,243,0.4);
}
.metric-comparison .mini-diff {
    min-width: 50px;
    text-align: center;
    font-weight: 700;
}

.interactive-competitions-table td, .interactive-competitions-table th {
    padding: 10px 12px;
    text-align: center;
    font-size: 0.8rem;
    border: 1px solid rgba(var(--primary-color-rgb),0.22);
}
/* Index column */
.interactive-competitions-table .row-index { width:40px; }
.interactive-competitions-table .index-badge {
    display:inline-block;
    min-width:26px;
    padding:4px 6px;
    border-radius:6px;
    background:rgba(var(--primary-color-rgb),0.18);
    font-weight:600;
    font-size:.7rem;
    color:#fff;
}
/* Header icons */
.interactive-competitions-table .header-icon { margin-left:6px; color:var(--primary-color); }
/* Question cell pointer & icon */
.interactive-competitions-table .question-cell { cursor:pointer; text-align:right; }
.interactive-competitions-table .question-cell .question-icon { color:var(--primary-color); margin-left:6px; }
.interactive-competitions-table tbody tr:nth-child(even){
    background: rgba(255,255,255,0.02);
}
.interactive-competitions-table tbody tr:hover {
    background: rgba(var(--primary-color-rgb),0.10);
    transition: background .25s ease;
}
.interactive-competitions-table tbody tr {
    border-bottom: 1px solid rgba(var(--primary-color-rgb),0.18);
}
.interactive-competitions-table td[title] {
    /* Pointer cursor for better UX instead of help/question cursor */
    cursor: pointer;
}
.interactive-table-wrapper {
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
}
.toolbar .input-select, .toolbar button {
    font-size: 0.8rem;
    padding: 4px 6px;
}
/* Enhanced filter toolbar styling */
.filter-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    background: linear-gradient(145deg, rgba(var(--primary-color-rgb),0.15), rgba(var(--primary-color-rgb),0.05));
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 12px 0;
}
.filter-toolbar.mini {
    background: linear-gradient(145deg, rgba(var(--primary-color-rgb),0.18), rgba(var(--primary-color-rgb),0.08));
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}
.toolbar-group label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary-color);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}
.filter-toolbar .input-select {
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.75rem;
    min-width: 100px;
}
.filter-toolbar .input-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb),0.25);
}
.btn.btn-refresh {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}
.btn.btn-refresh:hover {
    background: var(--primary-hover-color);
    transform: translateY(-2px);
}

/* Interactive section - clean design overrides */
#mostInteractiveCompetitionsCard.interactive-section {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
#mostInteractiveCompetitionsCard .interactive-header.clean {
    background: transparent;
    border: none;
    padding: 12px 16px 0 16px;
    margin-bottom: 8px;
}
#mostInteractiveCompetitionsCard .interactive-header.clean h2 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
#mostInteractiveCompetitionsCard .interactive-header.clean h2 i {
    color: var(--primary-color);
}
#mostInteractiveCompetitionsCard .interactive-header.clean + .section-subtitle {
    padding: 0 16px;
}
.section-subtitle {
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    font-weight: 500;
    letter-spacing: 0.3px;
}
/* Clean toolbar and wrapper */
#mostInteractiveCompetitionsCard .filter-toolbar.mini.clean {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 6px 16px 12px 16px;
}
#mostInteractiveCompetitionsCard .interactive-table-wrapper.clean {
    background: transparent;
    border: none;
    padding: 0 12px 12px 12px;
}

/* Highlight top 3 rows */
#mostInteractiveCompetitionsTable tbody tr:nth-child(1) {
    background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.55), rgba(var(--primary-color-rgb),0.25));
    font-weight: 650;
}
#mostInteractiveCompetitionsTable tbody tr:nth-child(2) {
    background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.40), rgba(var(--primary-color-rgb),0.18));
    font-weight: 600;
}
#mostInteractiveCompetitionsTable tbody tr:nth-child(3) {
    background: linear-gradient(90deg, rgba(var(--primary-color-rgb),0.30), rgba(var(--primary-color-rgb),0.12));
    font-weight: 550;
}

/* Type badge styling */
/* Unified Arabic type badges */
.type-badge {
    display:inline-block;
    border-radius:8px;
    padding:4px 8px;
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.3px;
    border:1px solid rgba(var(--primary-color-rgb),0.25);
    background:rgba(var(--primary-color-rgb),0.15);
}
.type-badge.features {background:linear-gradient(135deg,#2d7dfa,#4fa3ff);color:#fff;border-color:#3d8bff;}
.type-badge.interactive {background:linear-gradient(135deg,#ff3d3d,#ff7b54);color:#fff;border-color:#ff5b46;}
.type-badge.deposit {background:linear-gradient(135deg,#7a3dff,#b18bff);color:#fff;border-color:#965dff;}
.type-badge.unknown {background:rgba(255,255,255,0.15);color:#ddd;}

/* Loading row refinement */
#mostInteractiveCompetitionsTable .loading-row td {
    background: rgba(var(--primary-color-rgb),0.08);
    border-radius: 12px;
}
/* Analytics Dashboard Header */
.analytics-dashboard .dashboard-header {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* --- List/Card layout for Most Interactive Competitions --- */
.interactive-list { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.interactive-item { position:relative; display:flex; gap:12px; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg, rgba(30,41,59,0.75), rgba(17,24,39,0.85)); backdrop-filter:blur(18px); box-shadow:0 4px 18px -4px rgba(0,0,0,0.45), 0 2px 6px -1px rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06); transition:transform .25s ease, box-shadow .25s ease, background .4s ease; overflow:hidden; }
.interactive-item::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(99,102,241,0.15), transparent 60%); opacity:0; transition:opacity .4s; }
.interactive-item:hover { transform:translateY(-4px); box-shadow:0 8px 24px -6px rgba(0,0,0,0.55), 0 4px 10px -2px rgba(0,0,0,0.5); }
.interactive-item:hover::before { opacity:1; }
.interactive-item .item-rank { display:flex; align-items:flex-start; }
.interactive-item .index-badge { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; font-weight:600; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:16px; box-shadow:0 4px 12px -2px rgba(99,102,241,0.55); }
.interactive-item .item-main { flex:1; display:flex; flex-direction:column; gap:10px; }
.interactive-item .item-question { display:flex; align-items:center; gap:10px; font-size:14.5px; line-height:1.5; color:var(--text-primary-color); font-weight:500; position:relative; cursor:pointer; }
.interactive-item .item-question i { color:#4fa3ff; font-size:16px; }
.interactive-item .item-question .answer-badge { margin-inline-start:auto; background:linear-gradient(135deg,#1e293b,#0f172a); padding:4px 10px; font-size:12px; border-radius:8px; color:#e2e8f0; box-shadow:0 0 0 1px rgba(255,255,255,0.07); white-space:nowrap; }
.interactive-item .item-question:hover .answer-badge { background:linear-gradient(135deg,#334155,#1e293b); }
.interactive-item .item-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; }
.interactive-item .metric-chip { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#475569,#334155); color:#f1f5f9; padding:6px 10px; border-radius:24px; font-weight:500; box-shadow:0 2px 6px -2px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.05); }
.interactive-item .metric-chip i { font-size:12px; color:#93c5fd; }
.interactive-item .metric-chip:hover { background:linear-gradient(135deg,#64748b,#475569); }
.interactive-item .type-badge { display:inline-flex; align-items:center; padding:6px 12px; font-size:12px; border-radius:24px; font-weight:600; letter-spacing:.5px; background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 2px 8px -2px rgba(79,70,229,.55); }
.interactive-item .type-badge.features { background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 2px 8px -2px rgba(16,185,129,.5); }
.interactive-item .type-badge.interactive { background:linear-gradient(135deg,#6366f1,#4f46e5); }
.interactive-item .type-badge.deposit { background:linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 2px 8px -2px rgba(245,158,11,.45); }
.interactive-item .type-badge.unknown { background:linear-gradient(135deg,#64748b,#475569); }
.interactive-item .engagement-bar { position:relative; height:9px; background:linear-gradient(90deg,#1e293b,#0f172a); border-radius:12px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); }
.interactive-item .engagement-bar .fill { position:absolute; inset:0 0 0 0; width:0; background:linear-gradient(90deg,#14b8a6,#0ea5e9,#6366f1); transition:width .9s cubic-bezier(.4,.13,.2,1); filter:saturate(1.4) brightness(1.1); }
.interactive-item .engagement-bar .pct { position:absolute; top:50%; right:10px; transform:translateY(-50%); font-size:11px; font-weight:600; color:#e2e8f0; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.interactive-item:hover .engagement-bar .fill { filter:saturate(1.7) brightness(1.15); }

@media (max-width: 900px) {
    .interactive-item { flex-direction:column; }
    .interactive-item .item-rank { align-self:flex-start; }
    .interactive-item .item-question { flex-wrap:wrap; }
    .interactive-item .item-question .answer-badge { margin-inline-start:0; }
}

@media (max-width: 600px) {
    .interactive-item { padding:12px 14px; }
    .interactive-item .index-badge { width:38px; height:38px; font-size:15px; }
    .interactive-item .item-meta { gap:6px; }
    .interactive-item .metric-chip { padding:5px 9px; font-size:11.5px; }
    .interactive-item .type-badge { padding:5px 10px; font-size:11px; }
    .interactive-item .engagement-bar { height:8px; }
}

/* Dark mode tweaks */
body.dark-mode .interactive-item { background:linear-gradient(135deg, rgba(15,23,42,0.85), rgba(17,24,39,0.92)); }
body.dark-mode .interactive-item .item-question i { color:#60a5fa; }
body.dark-mode .interactive-item .metric-chip i { color:#bfdbfe; }
body.dark-mode .interactive-item .item-question .answer-badge { background:linear-gradient(135deg,#0f172a,#1e293b); color:#f1f5f9; }

body.dark-mode .analytics-dashboard .dashboard-header {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.analytics-dashboard .dashboard-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.analytics-dashboard .dashboard-header h1 {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

body.dark-mode .analytics-dashboard .dashboard-header h1 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Comparison Mode Toggle */
.comparison-mode-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 25px;
    border: 1px solid var(--border-color);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary-color);
    font-weight: 500;
    font-size: 0.95em;
}

/* Toggle switches now use global toggle-fix.css styles */

.analytics-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Filter Buttons - Enhanced */
.filter-btn {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: var(--text-color);
    border: 2px solid rgba(102, 126, 234, 0.3);
    padding: 10px 24px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-color: rgba(102, 126, 234, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

body.dark-mode .filter-btn {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    border-color: rgba(79, 172, 254, 0.3);
}

body.dark-mode .filter-btn:hover {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.2) 100%);
    border-color: rgba(79, 172, 254, 0.6);
    box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
}

body.dark-mode .filter-btn.active {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-color: #4facfe;
    box-shadow: 0 5px 20px rgba(79, 172, 254, 0.4);
}

.date-range-filter {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 15px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(5px);
}

body.dark-mode .date-range-filter {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%);
    border-color: rgba(79, 172, 254, 0.2);
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.date-input-group label {
    color: var(--text-secondary-color);
    font-size: 0.9em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-input-group label i {
    color: #667eea;
    font-size: 1.1em;
}

body.dark-mode .date-input-group label i {
    color: #4facfe;
}

.date-range-filter input[type="date"] {
    padding: 12px 15px;
    border-radius: 10px;
    border: 2px solid rgba(102, 126, 234, 0.25);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
    font-size: 0.95em;
    min-width: 160px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.date-range-filter input[type="date"]:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
    background: white;
}

body.dark-mode .date-range-filter input[type="date"] {
    background: rgba(26, 26, 46, 0.8);
    border-color: rgba(79, 172, 254, 0.25);
}

body.dark-mode .date-range-filter input[type="date"]:focus {
    border-color: #4facfe;
    box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.15);
}

.date-range-filter .btn {
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.date-range-filter .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.date-range-filter .btn:hover::before {
    width: 300px;
    height: 300px;
}

.date-range-filter .btn i {
    font-size: 1em;
    position: relative;
    z-index: 1;
}

.date-range-filter .btn span {
    position: relative;
    z-index: 1;
}

.date-range-filter .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.date-range-filter .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
}

body.dark-mode .date-range-filter .btn-primary {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

body.dark-mode .date-range-filter .btn-primary:hover {
    box-shadow: 0 6px 25px rgba(79, 172, 254, 0.4);
}

.date-range-filter .btn-secondary {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.date-range-filter .btn-secondary:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

body.dark-mode .date-range-filter .btn-secondary {
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
    border-color: rgba(79, 172, 254, 0.3);
}

body.dark-mode .date-range-filter .btn-secondary:hover {
    background: rgba(79, 172, 254, 0.2);
    border-color: rgba(79, 172, 254, 0.5);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.2);
}

/* Comparison Filters Section */
.comparison-filters {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(33, 150, 243, 0.1) 100%);
    border-radius: 12px;
    border: 2px solid var(--primary-color);
    animation: fadeIn 0.3s ease-in-out;
}

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

.comparison-filters h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Quick Comparison Buttons */
.comparison-quick-filters {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quick-comparison-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.comparison-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-color);
    font-weight: 500;
}

.comparison-btn i {
    font-size: 1.3em;
    color: var(--primary-color);
}

.comparison-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(76, 175, 80, 0.3);
}

.comparison-btn:hover i {
    color: white;
}

.comparison-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.comparison-btn.active i {
    color: white;
}

/* Custom Comparison Periods */
.comparison-custom-filters {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comparison-periods {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
}

.comparison-period {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.comparison-period:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.period-1 {
    border-color: #4CAF50;
}

.period-2 {
    border-color: #2196F3;
}

.period-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.period-1 .period-header i {
    color: #4CAF50;
}

.period-2 .period-header i {
    color: #2196F3;
}

.period-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--primary-color);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.comparison-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    padding-top: 10px;
}

.comparison-actions .btn {
    padding: 12px 30px;
    font-size: 1em;
}

/* Comparison Stats Indicators */
.stat-card-v2.comparison-mode {
    position: relative;
    overflow: visible;
}

.stat-comparison-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    font-size: 0.85em;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.comparison-badge.positive {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.95) 0%, rgba(56, 142, 60, 0.95) 100%);
    color: #fff;
    border: 1px solid rgba(76, 175, 80, 0.5);
}

.comparison-badge.negative {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.95) 0%, rgba(211, 47, 47, 0.95) 100%);
    color: #fff;
    border: 1px solid rgba(244, 67, 54, 0.5);
}

.comparison-badge.neutral {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.95) 0%, rgba(255, 160, 0, 0.95) 100%);
    color: #fff;
    border: 1px solid rgba(255, 193, 7, 0.5);
}

.comparison-arrow {
    font-size: 1.3em;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.comparison-percentage {
    font-weight: 800;
    font-size: 1.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.stat-comparison-indicator > span {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9em;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Additional contrast improvements for comparison text */
.stat-card-v2.comparison-mode .stat-card-v2-title {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.stat-card-v2.comparison-mode .stat-card-v2-value {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

.comparison-period-label {
    color: var(--text-secondary-color);
    font-size: 0.8em;
    margin-top: 5px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.card.chart-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    /* Performance optimizations */
    will-change: transform;
    contain: layout style paint;
    /* Lazy loading support */
    min-height: 200px;
}

.card.chart-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    border-color: rgba(102, 126, 234, 0.4);
}

body.dark-mode .card.chart-card {
    background: rgba(26, 26, 46, 0.85);
    border-color: rgba(79, 172, 254, 0.2);
}

body.dark-mode .card.chart-card:hover {
    border-color: rgba(79, 172, 254, 0.4);
}

.card.chart-card.full-width {
    grid-column: 1 / -1;
}

.card.chart-card h2 {
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    font-size: 1.3em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .card.chart-card h2 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom-color: rgba(79, 172, 254, 0.2);
}

/* Completed Competitions Table Styles */
.card-header-with-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

/* Section Filters Container */
.section-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Date Range Filter Section */
.date-range-filter-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.15);
}

body.dark-mode .date-range-filter-section {
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.date-range-filter-section .date-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range-filter-section .date-input-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.date-range-filter-section .date-input-group label i {
    color: var(--primary-color);
}

.section-date-input {
    padding: 8px 12px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-width: 150px;
}

body.dark-mode .section-date-input {
    background: rgba(27, 38, 59, 0.6);
    border-color: rgba(102, 126, 234, 0.3);
    color: var(--text-color);
}

.section-date-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

body.dark-mode .section-date-input:focus {
    background: rgba(27, 38, 59, 0.8);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.date-range-filter-section .btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.date-range-filter-section .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.date-range-filter-section .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.date-range-filter-section .btn-secondary {
    background: rgba(108, 117, 125, 0.1);
    border: 2px solid rgba(108, 117, 125, 0.3);
    color: var(--text-color);
}

body.dark-mode .date-range-filter-section .btn-secondary {
    background: rgba(108, 117, 125, 0.15);
    border-color: rgba(108, 117, 125, 0.4);
}

.date-range-filter-section .btn-secondary:hover {
    background: rgba(108, 117, 125, 0.2);
    border-color: rgba(108, 117, 125, 0.5);
}

.competition-filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.competition-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 2px solid rgba(102, 126, 234, 0.25);
    border-radius: 22px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.92em;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.competition-filter-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.15);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.competition-filter-btn:hover::before {
    width: 300px;
    height: 300px;
}

.competition-filter-btn:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.competition-filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

body.dark-mode .competition-filter-btn {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0.08) 100%);
    border-color: rgba(79, 172, 254, 0.25);
}

body.dark-mode .competition-filter-btn::before {
    background: rgba(79, 172, 254, 0.15);
}

body.dark-mode .competition-filter-btn:hover {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
    border-color: rgba(79, 172, 254, 0.5);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.25);
}

body.dark-mode .competition-filter-btn.active {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-color: #4facfe;
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

.competitions-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(33, 150, 243, 0.1) 100%);
    border-radius: 10px;
}

.stat-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.stat-summary-item i {
    font-size: 2em;
    color: var(--primary-color);
}

.stat-summary-item .stat-label {
    font-size: 0.85em;
    color: var(--text-secondary-color);
}

.stat-summary-item .stat-value {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent-color);
}

.table-responsive {
    overflow-x: auto;
    margin: 20px 0;
}

.competitions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.competitions-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.competitions-table thead th {
    padding: 15px 12px;
    text-align: right;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-color);
}

.competitions-table thead th i {
    margin-left: 5px;
}

.competitions-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.competitions-table tbody tr:hover {
    background-color: rgba(76, 175, 80, 0.1);
    transform: scale(1.01);
}

.competitions-table tbody td {
    padding: 15px 12px;
    text-align: right;
    color: var(--text-color);
}

.competitions-table tbody td:first-child {
    font-weight: 600;
    color: var(--primary-color);
}

.competition-question {
    max-width: 320px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* show up to 2 lines */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: var(--text-color);
}

.competition-question:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.competition-type-badge,
.competition-classification-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}

.competition-type-badge {
    background-color: rgba(33, 150, 243, 0.2);
    color: #2196F3;
    border: 1px solid rgba(33, 150, 243, 0.5);
}

.competition-classification-badge {
    background-color: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
    border: 1px solid rgba(158, 158, 158, 0.5);
    font-weight: 700;
    font-size: 0.9em;
}

/* Classification specific colors */
.competition-classification-badge.r {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 193, 7, 0.3) 100%);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.competition-classification-badge.a {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.3) 0%, rgba(123, 31, 162, 0.3) 100%);
    color: #9C27B0;
    border: 1px solid rgba(156, 39, 176, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.competition-classification-badge.b {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(25, 118, 210, 0.3) 100%);
    color: #2196F3;
    border: 1px solid rgba(33, 150, 243, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.competition-classification-badge.c {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(56, 142, 60, 0.3) 100%);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.stat-number {
    font-weight: 600;
    color: var(--primary-color);
}

.engagement-rate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.engagement-rate.high {
    background-color: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.engagement-rate.medium {
    background-color: rgba(255, 193, 7, 0.2);
    color: #FFC107;
}

.engagement-rate.low {
    background-color: rgba(244, 67, 54, 0.2);
    color: #F44336;
}

.competition-date {
    color: var(--text-secondary-color);
    font-size: 0.9em;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--primary-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pagination-btn:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-info {
    color: var(--text-secondary-color);
    font-size: 0.9em;
}

.pagination-info span {
    color: var(--primary-color);
    font-weight: 600;
}

.loading-row td {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary-color);
}

.loading-row .loading-spinner {
    margin: 0 auto 15px;
}

.chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 300px; /* minimum height for charts */
}

/* Responsive Design */
@media (max-width: 768px) {
    .analytics-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-buttons {
        justify-content: center;
    }
    
    .date-range-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .date-input-group {
        width: 100%;
    }
    
    .date-range-filter input[type="date"] {
        width: 100%;
        min-width: auto;
    }
    
    .date-range-filter .btn {
        width: 100%;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    /* Comparison Mode Responsive */
    .comparison-mode-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .comparison-periods {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .comparison-vs {
        transform: rotate(90deg);
        font-size: 1.5em;
        margin: 10px 0;
    }
    
    .quick-comparison-buttons {
        grid-template-columns: 1fr;
    }
    
    .comparison-actions {
        flex-direction: column;
    }
    
    .comparison-actions .btn {
        width: 100%;
    }
    
    /* Table Responsive */
    .card-header-with-filter {
        flex-direction: column;
        align-items: stretch;
    }
    
    .competition-filter-buttons {
        justify-content: center;
    }
    
    .competitions-stats-summary {
        grid-template-columns: 1fr;
    }
    
    .competitions-table {
        font-size: 0.85em;
    }
    
    .competitions-table thead th,
    .competitions-table tbody td {
        padding: 10px 8px;
    }
    
    .competition-question {
        max-width: 220px;
    -webkit-line-clamp: 3; /* allow 3 lines on small screens */
    line-clamp: 3;
    }
    
    .table-pagination {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .filter-buttons {
        flex-direction: column;
    }
    
    .filter-btn {
        width: 100%;
        text-align: center;
    }
    
    .dashboard-header .header-top {
        flex-direction: column;
        align-items: stretch;
    }
    
    .comparison-btn span {
        font-size: 0.9em;
    }
    
    /* Mobile Table Styles */
    .competitions-table thead {
        display: none;
    }
    
    .competitions-table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 15px;
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .competitions-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .competitions-table tbody td:last-child {
        border-bottom: none;
    }
    
    .competitions-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary-color);
        margin-left: 10px;
    }
    
    .competition-question {
        max-width: none;
        white-space: normal;
    -webkit-line-clamp: initial;
    line-clamp: initial;
        display: block;
    }
}

/* Re-using skeleton loader from home.css */

/* Granted Balances Section Styles */
#grantedBalancesCard {
    background-color: var(--card-bg-color);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

#grantedBalancesCard h2 {
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.2em;
    color: var(--text-color);
}

.granted-balance-section {
    margin-bottom: 25px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.granted-balance-section:last-of-type {
    margin-bottom: 0;
}

.granted-balance-section h3 {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.granted-balance-section h3:before {
    content: '💰';
    font-size: 1.2em;
}

.balance-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.balance-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.balance-label {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    font-weight: 500;
}

.balance-value {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent-color);
}

.deposit-bonus-table {
    overflow-x: auto;
}

.deposit-bonus-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
}

.deposit-bonus-table thead {
    background-color: var(--accent-color);
}

.deposit-bonus-table thead th {
    padding: 12px 15px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.95em;
}

.deposit-bonus-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.deposit-bonus-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.deposit-bonus-table tbody tr:last-child {
    border-bottom: none;
}

.deposit-bonus-table tbody td {
    padding: 12px 15px;
    text-align: center;
    color: var(--text-color);
}

.deposit-bonus-table tbody td:first-child {
    font-weight: 600;
    color: var(--accent-color);
}

@media (max-width: 768px) {
    .balance-stats {
        grid-template-columns: 1fr;
    }
    
    .deposit-bonus-table {
        font-size: 0.9em;
    }
}

/* Weekly Excellence Table Styles */
.weekly-excellence-table {
    margin-top: 20px;
}

.weekly-excellence-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
}

.weekly-excellence-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.weekly-excellence-table thead th {
    padding: 14px 15px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.95em;
}

.weekly-excellence-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
}

.weekly-excellence-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.weekly-excellence-table tbody tr:last-child {
    border-bottom: none;
}

.weekly-excellence-table tbody td {
    padding: 12px 15px;
    text-align: center;
    color: var(--text-color);
}

.weekly-excellence-table tbody td:first-child {
    font-weight: 600;
    text-align: right;
    padding-right: 20px;
}

.weekly-excellence-table .positive-change {
    color: #38ef7d;
    font-weight: 600;
}

.weekly-excellence-table .negative-change {
    color: #f5576c;
    font-weight: 600;
}

@media (max-width: 768px) {
    .weekly-excellence-table {
        font-size: 0.9em;
        overflow-x: auto;
    }
    
    .weekly-excellence-table table {
        min-width: 500px;
    }
}

/* Rank Changes Table Styles */
.rank-changes-table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
}

.rank-changes-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.rank-changes-table thead th {
    padding: 14px 12px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
}

.rank-changes-table thead th i {
    margin-left: 6px;
    opacity: 0.8;
}

.rank-changes-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.rank-changes-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: scale(1.01);
}

.rank-changes-table tbody tr:last-child {
    border-bottom: none;
}

.rank-changes-table tbody td {
    padding: 14px 12px;
    text-align: center;
    color: var(--text-color);
    vertical-align: middle;
}

.rank-changes-table tbody td:first-child {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 1.05em;
}

.rank-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rank-badge.rank-old {
    background-color: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.rank-badge.rank-new {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.reason-cell,
.action-cell {
    max-width: 200px;
    text-align: right;
    line-height: 1.5;
    color: var(--text-secondary-color);
    font-size: 0.95em;
}

.reason-cell {
    border-right: 3px solid #3498db;
    padding-right: 10px !important;
}

.action-cell {
    border-right: 3px solid #9b59b6;
    padding-right: 10px !important;
}

@media (max-width: 992px) {
    .rank-changes-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .rank-changes-table thead th,
    .rank-changes-table tbody td {
        font-size: 0.85em;
        padding: 10px 8px;
    }
    
    .reason-cell,
    .action-cell {
        max-width: 150px;
    }
}

@media (max-width: 768px) {
    .rank-changes-table thead {
        display: none;
    }
    
    .rank-changes-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 15px;
    }
    
    .rank-changes-table tbody td {
        display: block;
        text-align: right;
        padding: 8px 0;
        border: none;
    }
    
    .rank-changes-table tbody td:before {
        content: attr(data-label);
        font-weight: bold;
        margin-left: 10px;
        color: var(--accent-color);
    }
    
    .reason-cell,
    .action-cell {
        max-width: 100%;
        white-space: normal;
    }
}

/* ============================================
   Agents Competitions Section Styles
   ============================================ */

/* Agents Competitions Stats Summary */
.agents-competitions-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

body.dark-mode .agents-competitions-stats-summary {
    background: rgba(0, 0, 0, 0.2);
}

.agents-competitions-stats-summary .stat-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .agents-competitions-stats-summary .stat-summary-item {
    background: rgba(27, 38, 59, 0.9);
}

.agents-competitions-stats-summary .stat-summary-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.agents-competitions-stats-summary .stat-summary-item i {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--primary-color);
}

.agents-competitions-stats-summary .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    margin-bottom: 4px;
}

.agents-competitions-stats-summary .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary-color);
}

/* Agents Competitions Table */
.agents-competitions-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.agents-competitions-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

body.dark-mode .agents-competitions-table thead {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.agents-competitions-table thead th {
    padding: 16px;
    text-align: right;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.agents-competitions-table tbody tr {
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;
}

body.dark-mode .agents-competitions-table tbody tr {
    background: rgba(27, 38, 59, 0.95);
}

.agents-competitions-table tbody tr:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateX(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .agents-competitions-table tbody tr:hover {
    background: rgba(102, 126, 234, 0.15);
}

.agents-competitions-table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

/* Agent Info Cell */
.agent-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

.agent-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.agent-name-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.agent-name-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Agent ID Badge */
.agent-id-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

body.dark-mode .agent-id-badge {
    background: rgba(102, 126, 234, 0.2);
}

/* Question Cell */
.question-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary-color);
}

/* Compliance Bar */
.compliance-bar {
    flex: 1;
    height: 10px;
    background: rgba(44, 62, 80, 0.3);
    border-radius: 5px;
    overflow: hidden;
}

body.dark-mode .compliance-bar {
    background: rgba(255, 255, 255, 0.1);
}

/* Classification Badge */
.classification-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.classification-badge.class-R {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.classification-badge.class-A {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.classification-badge.class-B {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.classification-badge.class-C {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

/* Classification badges for rank changes table - with distinct colors */
.classification-badge.classification-r {
    background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.classification-badge.classification-a {
    background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.classification-badge.classification-b {
    background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

.classification-badge.classification-c {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.classification-badge.classification-unknown {
    background: linear-gradient(135deg, #95A5A6 0%, #7F8C8D 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
}

/* Dark mode - specific classification badge colors */
body.dark-mode .classification-badge.classification-r {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
}

body.dark-mode .classification-badge.classification-a {
    background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.5);
}

body.dark-mode .classification-badge.classification-b {
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.5);
}

body.dark-mode .classification-badge.classification-c {
    background: linear-gradient(135deg, #8E44AD 0%, #6C3483 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.5);
}

body.dark-mode .classification-badge.classification-unknown {
    background: linear-gradient(135deg, #7F8C8D 0%, #5D6D7E 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(127, 140, 141, 0.5);
}

body.dark-mode .classification-badge.class-R {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
}

body.dark-mode .classification-badge.class-A {
    background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.5);
}

body.dark-mode .classification-badge.class-B {
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.5);
}

body.dark-mode .classification-badge.class-C {
    background: linear-gradient(135deg, #8E44AD 0%, #6C3483 100%);
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.5);
}

/* Stat Number */
.stat-number {
    font-weight: 600;
    color: var(--text-primary-color);
}

/* ============================================
   Agent Competitions Page Styles
   ============================================ */

.agent-competitions-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
    padding: 20px;
}

body.dark-mode .agent-competitions-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    min-height: 100vh;
}

/* Page Header */
.page-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

body.dark-mode .page-header {
    background: rgba(27, 38, 59, 0.95);
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.btn-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

/* Agent Profile */
.agent-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.agent-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
}

.agent-avatar-placeholder-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 32px;
    border: 4px solid var(--primary-color);
}

.agent-details {
    flex: 1;
}

.agent-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary-color);
    margin-bottom: 8px;
}

.agent-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Statistics Grid */
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.card-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Search Box */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    right: 12px;
    color: var(--text-secondary-color);
}

.search-box input {
    padding: 10px 40px 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary-color);
    font-size: 0.95rem;
    min-width: 250px;
    transition: all 0.3s ease;
}

body.dark-mode .search-box input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

body.dark-mode .search-box input::placeholder {
    color: #a0a0a0;
}

/* Compliance Badge */
.compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.status-sent {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.status-badge.status-active {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.status-badge.status-awaiting_winners {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.status-badge.status-completed {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
}

.status-badge.status-archived {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
}

/* Responsive Design for Agents Competitions */
@media (max-width: 1024px) {
    .agents-competitions-stats-summary {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .statistics-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .agent-profile {
        flex-direction: column;
        text-align: center;
    }
    
    .agent-name {
        font-size: 1.5rem;
    }
    
    .agent-meta {
        justify-content: center;
    }
    
    .statistics-grid {
        grid-template-columns: 1fr;
    }
    
    .agents-competitions-stats-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .search-box input {
        min-width: 100%;
    }
    
    .agents-competitions-table {
        font-size: 0.85rem;
    }
    
    .question-cell {
        max-width: 150px;
    }
}

/* ============================================
   Question Modal Styles
   ============================================ */

.question-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.question-modal.show {
    opacity: 1;
}

.question-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.question-modal .modal-content {
    position: relative;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    z-index: 10000;
}

body.dark-mode .question-modal .modal-content {
    background: #1b263b;
}

.question-modal.show .modal-content {
    transform: scale(1);
}

.question-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.question-modal .modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.question-modal .modal-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 1.2rem;
}

.question-modal .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.question-modal .modal-body {
    padding: 32px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.question-modal .modal-body p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary-color);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.question-modal .modal-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.question-modal .modal-footer .btn {
    padding: 12px 32px;
    font-size: 1rem;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.question-modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.question-modal .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

/* Question Cell Cursor */
.question-clickable {
    transition: all 0.3s ease;
}

.question-clickable:hover {
    color: var(--accent-color) !important;
    text-decoration: underline;
}

/* ========================================
   AGENT COMPETITIONS PAGE DARK MODE STYLES
   ======================================== */

body.dark-mode .agent-competitions-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    min-height: 100vh;
}

body.dark-mode .page-header {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.dark-mode .btn-back {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

body.dark-mode .btn-back:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

body.dark-mode .agent-header-info .agent-profile {
    background: rgba(27, 38, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

body.dark-mode .agent-name {
    color: #ffffff;
}

body.dark-mode .agent-meta {
    color: #b0b0b0;
}

body.dark-mode .classification-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Compliance chip */
.compliance-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.15);
    margin-right: 8px;
}

/* Enhanced Statistics Cards */
.stat-card-enhanced {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stat-card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-pink {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-teal {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.gradient-mint {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.stat-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card-enhanced .stat-label {
    font-size: 0.9rem;
    color: #b0b0b0;
    font-weight: 500;
    margin-bottom: 4px;
}

.stat-value-large {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.5px;
}

.stat-meta {
    font-size: 0.85rem;
    color: #a0a0a0;
    margin-top: 4px;
}

/* Compliance card special styling */
.compliance-card .stat-value-large {
    font-size: 2.2rem;
}

/* Statistics Grid Layout */
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

@media (max-width: 768px) {
    .statistics-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card-enhanced {
        padding: 20px;
    }
    
    .stat-icon-wrapper {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .stat-value-large {
        font-size: 1.6rem;
    }
}

body.dark-mode .statistics-grid .stat-card-v2 {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body.dark-mode .stat-label {
    color: #b0b0b0;
}

body.dark-mode .stat-value {
    color: #ffffff;
}

body.dark-mode .stat-subtitle {
    color: #a0a0a0;
}

body.dark-mode .card.chart-card.full-width {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .card-header h2 {
    color: #ffffff;
}

body.dark-mode .search-box input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

body.dark-mode .search-box input::placeholder {
    color: #a0a0a0;
}

body.dark-mode .competitions-table {
    background: rgba(27, 38, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .competitions-table thead th {
    background: rgba(27, 38, 59, 0.95);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .competitions-table tbody tr {
    background: rgba(27, 38, 59, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .competitions-table tbody tr:hover {
    background: rgba(27, 38, 59, 0.9);
}

body.dark-mode .competitions-table tbody td {
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .compliance-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .status-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .loading-spinner {
    border-top-color: #667eea;
}

body.dark-mode .error-state {
    color: #ff6b6b;
}

body.dark-mode .question-cell {
    color: #e0e0e0;
}

body.dark-mode .stat-number {
    color: #ffffff;
}

/* ========================================
   AGENT COMPETITIONS PAGE DARK MODE STYLES
   ======================================== */

body.dark-mode .agent-competitions-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    min-height: 100vh;
}

body.dark-mode .page-header {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.dark-mode .btn-back {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

body.dark-mode .btn-back:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

body.dark-mode .agent-header-info .agent-profile {
    background: rgba(27, 38, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

body.dark-mode .agent-name {
    color: #ffffff;
}

body.dark-mode .agent-meta {
    color: #b0b0b0;
}

body.dark-mode .classification-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.dark-mode .statistics-grid .stat-card-v2 {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body.dark-mode .stat-label {
    color: #b0b0b0;
}

body.dark-mode .stat-value {
    color: #ffffff;
}

body.dark-mode .stat-subtitle {
    color: #a0a0a0;
}

body.dark-mode .card.chart-card.full-width {
    background: rgba(27, 38, 59, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .card-header h2 {
    color: #ffffff;
}

body.dark-mode .search-box input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

body.dark-mode .search-box input::placeholder {
    color: #a0a0a0;
}

body.dark-mode .competitions-table {
    background: rgba(27, 38, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .competitions-table thead th {
    background: rgba(27, 38, 59, 0.95);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .competitions-table tbody tr {
    background: rgba(27, 38, 59, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .competitions-table tbody tr:hover {
    background: rgba(27, 38, 59, 0.9);
}

body.dark-mode .competitions-table tbody td {
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .compliance-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .status-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .loading-spinner {
    border-top-color: #667eea;
}

body.dark-mode .error-state {
    color: #ff6b6b;
}

body.dark-mode .question-cell {
    color: #e0e0e0;
}

body.dark-mode .stat-number {
    color: #ffffff;
}



/* == day-competitions.css == */
/* Day Competitions Page Styles */
.day-competitions-page {
    padding: 20px;
}

.page-header {
    background-color: var(--card-bg-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
}

.header-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background-color: var(--accent-hover-color);
    transform: translateY(-2px);
}

.page-header h1 {
    margin: 0;
    font-size: 1.8em;
    color: var(--text-color);
}

.page-header h1 #dayName {
    color: var(--accent-color);
}

.page-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    min-width: 200px;
}

.stat-card i {
    font-size: 2em;
    color: var(--accent-color);
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-label {
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.stat-value {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--text-color);
}

.competitions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.competition-card {
    background-color: var(--card-bg-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

.competition-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
}

.competition-header {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.competition-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-color);
    flex: 1;
    line-height: 1.4;
}

.competition-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

.status-sent {
    background-color: rgba(33, 150, 243, 0.2);
    color: #2196F3;
}

.status-active {
    background-color: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.status-awaiting_winners {
    background-color: rgba(255, 193, 7, 0.2);
    color: #FFC107;
}

.status-completed {
    background-color: rgba(156, 39, 176, 0.2);
    color: #9C27B0;
}

.status-archived {
    background-color: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
}

.competition-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
}

.competition-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.competition-card:hover .competition-image img {
    transform: scale(1.1);
}

.competition-details {
    padding: 15px;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-row i {
    width: 20px;
    text-align: center;
    color: var(--accent-color);
}

.detail-row strong {
    color: var(--text-color);
}

.competition-stats {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.stat-item i {
    font-size: 1.2em;
    color: var(--accent-color);
}

.stat-item span {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-color);
}

.no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background-color: var(--card-bg-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.no-data i {
    font-size: 4em;
    color: var(--text-secondary-color);
    margin-bottom: 20px;
    display: block;
}

.no-data p {
    font-size: 1.2em;
    color: var(--text-secondary-color);
    margin: 0;
}

@media (max-width: 992px) {
    .competitions-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .day-competitions-page {
        padding: 15px;
    }

    .header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h1 {
        font-size: 1.4em;
    }

    .competitions-grid {
        grid-template-columns: 1fr;
    }

    .competition-card {
        max-width: 100%;
    }
}


/* == logs.css == */
.log-detail-line {
    margin: 5px 0;
    line-height: 1.4;
    font-size: 14px;
}

.log-detail-line:first-child {
    font-weight: bold;
    margin-bottom: 10px;
}

.log-entry {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
}

.log-icon {
    margin-left: 15px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.log-content {
    flex: 1;
}

.log-meta {
    margin-top: 8px;
    color: #666;
    font-size: 13px;
}

.log-time {
    margin-right: 8px;
}

.log-message {
    white-space: pre-wrap;
    direction: rtl;
}

/* == statistics.css == */


/* == winner-roulette.css == */
/* winner-roulette.css - تصميم صفحة اختيار الفائزين لمسابقات الوكيل */
:root {
  --wr-bg: #0a0e1a;
  --wr-surface: #12172a;
  --wr-surface-alt: #1a2035;
  --wr-border: #2d3548;
  --wr-border-alt: #3a4258;
  --wr-text: #f0f4ff;
  --wr-text-dim: #9ca5ba;
  --wr-primary: #6366f1;
  --wr-primary-alt: #4f46e5;
  --wr-danger: #ef4444;
  --wr-accent: #fbbf24;
  --wr-success: #10b981;
  --wr-gradient-1: linear-gradient(135deg,#6366f1,#8b5cf6);
  --wr-gradient-2: linear-gradient(135deg,#3b82f6,#6366f1);
  --wr-gradient-3: linear-gradient(135deg,#10b981,#14b8a6);
  --wr-gradient-4: linear-gradient(135deg,#14b8a6,#06b6d4);
  --wr-gradient-5: linear-gradient(135deg,#f43f5e,#ec4899);
  --wr-gradient-6: linear-gradient(135deg,#fbbf24,#f59e0b);
  --wr-gradient-gold: linear-gradient(135deg, #ffd700, #ffed4e, #fbbf24);
  --wr-gradient-premium: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
}

.wr-layout { display:grid; grid-template-columns: 340px 1fr; gap:22px; }
@media (max-width:1100px){ .wr-layout { grid-template-columns:1fr; } }

.wr-panel { background:var(--wr-surface); border:1px solid var(--wr-border); border-radius:18px; padding:20px 22px; display:flex; flex-direction:column; gap:18px; position:relative; }
.wr-panel-header { display:flex; align-items:center; gap:10px; }
.wr-panel-header h3 { margin:0; font-size:1rem; font-weight:700; color:var(--wr-text); }
.wr-panel small { color:var(--wr-text-dim); }

.wr-card-group { display:flex; flex-direction:column; gap:14px; }

.wr-textarea { width:100%; background:var(--wr-surface-alt); color:var(--wr-text); border:1px solid var(--wr-border-alt); border-radius:14px; padding:14px 16px; font-size:.9rem; line-height:1.5; resize:vertical; min-height:220px; direction:rtl; }
.wr-textarea:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.35); }

.wr-inline-actions { display:flex; flex-wrap:wrap; gap:10px; }
.wr-inline-actions .spacer { flex:1; }

.wr-btn { cursor:pointer; border:none; font-family:inherit; font-size:.85rem; font-weight:600; letter-spacing:.5px; padding:12px 20px; border-radius:14px; display:inline-flex; align-items:center; gap:8px; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.wr-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(45deg, rgba(255,255,255,0.1), transparent); opacity:0; transition:.3s; }
.wr-btn:hover::before { opacity:1; }
.wr-btn-primary { background:var(--wr-gradient-2); color:#fff; box-shadow: 0 6px 20px rgba(99,102,241,0.4); }
.wr-btn-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,0.5); }
.wr-btn-secondary { background:rgba(255,255,255,0.05); color:var(--wr-text); border:1px solid var(--wr-border-alt); }
.wr-btn-secondary:hover { background:rgba(255,255,255,0.1); border-color:var(--wr-primary); transform:translateY(-1px); }
.wr-btn-danger { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; box-shadow: 0 6px 20px rgba(239,68,68,0.4); }
.wr-btn-danger:hover { transform:translateY(-2px); box-shadow: 0 8px 25px rgba(239,68,68,0.5); }
.wr-btn-success { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
.wr-btn-success:hover { transform:translateY(-2px); box-shadow: 0 8px 25px rgba(16,185,129,0.5); }
.wr-btn-large { font-size:1rem; padding:16px 32px; font-weight:700; }

.wr-section-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--wr-text-dim); margin:0 0 -4px 0; }

.wr-scroll-box { max-height:270px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; }
.wr-scroll-box::-webkit-scrollbar { width:8px; }
.wr-scroll-box::-webkit-scrollbar-track { background:var(--wr-bg); border-radius:10px; }
.wr-scroll-box::-webkit-scrollbar-thumb { background:#30363d; border-radius:10px; }
.wr-scroll-box::-webkit-scrollbar-thumb:hover { background:#3b82f6; }

.wr-item { background:var(--wr-surface-alt); border:1px solid var(--wr-border-alt); border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:all .3s ease; position:relative; overflow:hidden; }
.wr-item::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(99,102,241,0.1), transparent); opacity:0; transition:.3s; }
.wr-item:hover { transform:translateX(-3px); border-color:var(--wr-primary); }
.wr-item:hover::before { opacity:1; }
.wr-item.wr-item-selected { opacity:.5; filter:grayscale(.5); transform:scale(.98); }
.wr-item.wr-item-winner { border-color:#fbbf24; background:linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.05)); box-shadow:0 0 0 2px rgba(251,191,36,.4), 0 4px 15px rgba(251,191,36,.25); }
.wr-item.wr-item-winner::before { background:linear-gradient(135deg, rgba(251,191,36,0.15), transparent); opacity:1; }
.wr-item-winner .wr-item-label { color:#fbbf24; font-weight:700; }
.wr-item-actions { display:flex; align-items:center; gap:6px; }
.wr-badge-num { background:#1e293b; color:#93c5fd; font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:8px; }
.wr-item-body { display:flex; flex-direction:column; gap:4px; }
.wr-item-label { font-size:.85rem; font-weight:600; color:var(--wr-text); }
.wr-item-meta { font-size:.7rem; letter-spacing:.5px; color:var(--wr-text-dim); }
.wr-item-tags { display:flex; align-items:center; gap:6px; }
.wr-tag { background:#1e293b; color:#93c5fd; padding:2px 8px; font-size:.65rem; border-radius:8px; font-weight:600; }
.wr-tag-winner { background:linear-gradient(135deg,#fbbf24,#d97706); color:#1f1f1f; }

.wr-icon-btn { cursor:pointer; background:#1f2937; border:1px solid var(--wr-border-alt); color:var(--wr-text-dim); width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:.25s; }
.wr-icon-btn:hover { color:#fff; border-color:#3b82f6; }

.wr-settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.wr-setting { background:var(--wr-surface-alt); border:1px solid var(--wr-border-alt); border-radius:14px; padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; position:relative; }
.wr-setting label { font-size:.65rem; text-transform:uppercase; letter-spacing:.8px; color:var(--wr-text-dim); font-weight:700; }
.wr-setting input[type=number], .wr-setting select { width:100%; background:#0d1117; border:1px solid #30363d; border-radius:10px; color:var(--wr-text); font-size:.85rem; padding:6px 8px; text-align:center; }
.wr-setting input:focus, .wr-setting select:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.35); }
.wr-setting .wr-checkbox-row { display:flex; align-items:center; gap:6px; }
.wr-setting .wr-checkbox-row input { width:18px; height:18px; }

/* Prize Collection Modal */
#winner-modal .wr-modal-form { max-width: 520px; width: 90%; }
.wr-prize-form { display: flex; flex-direction: column; gap: 16px; text-align: right; margin: 16px 0; }
.wr-winner-info { background: var(--wr-surface-alt); border: 1px solid var(--wr-border-alt); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wr-info-row { font-size: 0.85rem; color: var(--wr-text); display: flex; align-items: center; gap: 8px; }
.wr-info-row strong { color: var(--wr-text-dim); min-width: 90px; }
.wr-info-row span { color: var(--wr-accent); font-weight: 600; }
.wr-form-group { display: flex; flex-direction: column; gap: 6px; }
.wr-form-group label { font-size: 0.8rem; font-weight: 600; color: var(--wr-text); display: flex; align-items: center; gap: 6px; }
.wr-form-input, .wr-form-select { width: 100%; background: var(--wr-surface-alt); border: 1px solid var(--wr-border-alt); border-radius: 10px; padding: 10px 12px; color: var(--wr-text); font-size: 0.9rem; direction: ltr; text-align: left; }
.wr-form-input:focus, .wr-form-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.35); }
.wr-form-select { direction: rtl; text-align: right; cursor: pointer; }


/* Prize Collection Modal */
#winner-modal .wr-modal-form { max-width: 520px; width: 90%; }
.wr-prize-form { display: flex; flex-direction: column; gap: 16px; text-align: right; margin: 16px 0; }
.wr-winner-info { background: var(--wr-surface-alt); border: 1px solid var(--wr-border-alt); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wr-info-row { font-size: 0.85rem; color: var(--wr-text); display: flex; align-items: center; gap: 8px; }
.wr-info-row strong { color: var(--wr-text-dim); min-width: 90px; }
.wr-info-row span { color: var(--wr-accent); font-weight: 600; }
.wr-form-group { display: flex; flex-direction: column; gap: 6px; }
.wr-form-group label { font-size: 0.8rem; font-weight: 600; color: var(--wr-text); display: flex; align-items: center; gap: 6px; }
.wr-form-input, .wr-form-select { width: 100%; background: var(--wr-surface-alt); border: 1px solid var(--wr-border-alt); border-radius: 10px; padding: 10px 12px; color: var(--wr-text); font-size: 0.9rem; direction: ltr; text-align: left; }
.wr-form-input:focus, .wr-form-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.35); }
.wr-form-select { direction: rtl; text-align: right; cursor: pointer; }

.wr-wheel-wrapper { position:relative; display:flex; flex-direction:column; align-items:center; gap:0; padding-bottom:40px; }

.wr-wheel-container { 
  position:relative; 
  z-index:2;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

#winner-roulette-wheel { width:420px; height:420px; max-width:100%; aspect-ratio:1/1; }
@media (max-width:1100px){ #winner-roulette-wheel { width:380px; height:380px; } }
@media (max-width:900px){ #winner-roulette-wheel { width:340px; height:340px; } }
@media (max-width:600px){ #winner-roulette-wheel { width:300px; height:300px; } }

/* قاعدة العجلة المسند - تصميم فاخر */
.wr-wheel-base {
  width: 90px;
  height: 110px;
  background: linear-gradient(180deg, 
    rgba(99,102,241,0.2) 0%, 
    rgba(30,58,95,0.9) 20%,
    #1a2847 40%, 
    #0f1928 70%, 
    #08111d 100%);
  position: relative;
  margin-top: -35px;
  z-index: 1;
  border-radius: 0 0 12px 12px;
  box-shadow: 
    inset 0 3px 8px rgba(255, 255, 255, 0.15),
    inset 0 -4px 12px rgba(0, 0, 0, 0.7),
    0 12px 30px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(99,102,241,0.1);
  border: 2px solid rgba(99,102,241,0.2);
  border-top: none;
}

.wr-wheel-base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 6px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(251,191,36,0.8), 
    rgba(251,191,36,1),
    rgba(251,191,36,0.8),
    transparent);
  box-shadow: 
    0 0 15px rgba(251, 191, 36, 0.8),
    0 0 25px rgba(251, 191, 36, 0.4);
  border-radius: 3px;
  animation: baseGlowPulse 3s ease-in-out infinite;
}

@keyframes baseGlowPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.wr-wheel-base::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 30px;
  background: linear-gradient(180deg, 
    rgba(26,40,82,0.9) 0%, 
    rgba(15,25,50,0.95) 50%,
    rgba(5,13,26,1) 100%);
  border-radius: 50%;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.9),
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -1px 3px rgba(99,102,241,0.2);
  border: 3px solid rgba(26,51,82,0.8);
}

@media (max-width:600px){ 
  .wr-wheel-base { 
    width: 60px; 
    height: 80px;
    margin-top: -25px;
  }
  .wr-wheel-base::after {
    width: 120px;
    height: 20px;
    bottom: -20px;
  }
}

.wr-pointer { position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:30px solid #dc2626; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); z-index:3; }

.wr-actions-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px; }

/* Winner Modal - New Celebration Design */
#winner-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,27,75,0.95) 100%);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.4s ease;
  backdrop-filter: blur(8px);
}

.wr-celebration-content {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid rgba(99,102,241,0.3);
  border-radius: 32px;
  padding: 60px 45px 45px;
  width: min(95%, 550px);
  text-align: center;
  position: relative;
  box-shadow: 
    0 40px 100px rgba(0, 0, 0, 0.8),
    0 0 100px rgba(99,102,241,0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: celebrationSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.wr-celebration-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  animation: rotatePulse 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.wr-celebration-content > * {
  position: relative;
  z-index: 2;
}

@keyframes rotatePulse {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
  50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
}

.wr-trophy-container {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 30px;
  z-index: 1;
}

.wr-trophy-icon {
  font-size: 110px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 10px 25px rgba(251, 191, 36, 0.6));
  animation: trophyBounce 2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(-20px) scale(1.15) rotate(5deg); }
}

.wr-trophy-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, rgba(99,102,241,0.2) 50%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.9; }
}

.wr-celebration-title {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 25%, #fbbf24 50%, #f59e0b 75%, #fbbf24 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 35px;
  letter-spacing: 1.5px;
  animation: titleShine 4s ease-in-out infinite, gradientSlide 3s linear infinite;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 30px rgba(251,191,36,0.5);
}

@keyframes titleShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

@keyframes gradientSlide {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.wr-winner-card {
  background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.15) 50%, rgba(236,72,153,0.15) 100%);
  border: 2px solid rgba(99,102,241,0.4);
  border-radius: 24px;
  padding: 35px 30px;
  margin: 0 0 40px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 
    0 10px 40px rgba(99,102,241,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.wr-winner-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
  background-size: 300% 300%;
  border-radius: 24px;
  opacity: 0;
  animation: borderGlow 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes borderGlow {
  0%, 100% { opacity: 0; background-position: 0% 50%; }
  50% { opacity: 0.8; background-position: 100% 50%; }
}

.wr-winner-name {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  text-shadow: 
    0 2px 10px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(59, 130, 246, 0.5);
  letter-spacing: 0.5px;
}

.wr-winner-account {
  font-size: 18px;
  color: #93c5fd;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0.9;
}

/* Winner form inputs */
.wr-winner-form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 30px;
  z-index: 1;
  position: relative;
}

.wr-form-group {
  margin-bottom: 20px;
}

.wr-form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #e0e7ff;
  margin-bottom: 8px;
}

.wr-form-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  background: rgba(30, 41, 59, 0.8);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  color: #ffffff;
  transition: all 0.3s ease;
  font-family: inherit;
}

.wr-form-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.wr-form-input::placeholder {
  color: #64748b;
}

/* Prize display */
.wr-prize-display {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.15) 100%);
  border: 2px solid rgba(245, 158, 11, 0.4);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 15px;
}

.wr-prize-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.wr-prize-details {
  flex: 1;
  min-width: 0;
}

.wr-prize-type {
  font-size: 14px;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wr-prize-value {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}

.wr-sparkles {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 35px;
  position: relative;
  z-index: 1;
}

.wr-sparkle {
  font-size: 32px;
  animation: sparkleFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}

.wr-sparkle:nth-child(1) { animation-delay: 0s; }
.wr-sparkle:nth-child(2) { animation-delay: 0.2s; }
.wr-sparkle:nth-child(3) { animation-delay: 0.4s; }
.wr-sparkle:nth-child(4) { animation-delay: 0.6s; }
.wr-sparkle:nth-child(5) { animation-delay: 0.8s; }

@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-10px) scale(1.2); opacity: 0.8; }
}

.wr-confirm-btn {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #10b981 100%);
  background-size: 200% auto;
  color: white;
  border: none;
  padding: 20px 60px;
  font-size: 24px;
  font-weight: 800;
  border-radius: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 10px 30px rgba(16, 185, 129, 0.5),
    0 0 40px rgba(16, 185, 129, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  z-index: 1;
  letter-spacing: 1px;
  animation: btnGradientSlide 3s linear infinite;
}

@keyframes btnGradientSlide {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.wr-confirm-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  z-index: -1;
}

.wr-confirm-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    0 15px 45px rgba(16, 185, 129, 0.7),
    0 0 60px rgba(16, 185, 129, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wr-confirm-btn:hover::before {
  width: 400px;
  height: 400px;
}

.wr-confirm-btn:active {
  transform: translateY(-1px) scale(1.02);
}

.wr-confirm-btn i {
  font-size: 24px;
  animation: checkPulse 1.5s ease-in-out infinite;
}

@keyframes checkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes celebrationSlideIn {
  from {
    transform: scale(0.8) translateY(-30px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

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

@media (max-width: 600px) {
  .wr-celebration-content {
    padding: 40px 25px 30px;
  }
  
  .wr-celebration-title {
    font-size: 32px;
  }
  
  .wr-winner-name {
    font-size: 24px;
  }
  
  .wr-winner-account {
    font-size: 16px;
  }
  
  .wr-confirm-btn {
    padding: 15px 40px;
    font-size: 18px;
  }
  
  .wr-trophy-icon {
    font-size: 80px;
  }
  
  .wr-sparkles {
    gap: 15px;
  }
  
  .wr-sparkle {
    font-size: 24px;
  }
}

/* Empty / helper states */
.wr-empty { text-align:center; padding:26px 12px; font-size:.8rem; color:var(--wr-text-dim); border:1px dashed var(--wr-border-alt); border-radius:12px; }

/* Animations */
@keyframes wrPulse { 0%{transform:scale(1);} 50%{transform:scale(1.04);} 100%{transform:scale(1);} }
.wr-btn-primary:active { transform:scale(.96); }
.wr-highlight { animation:wrPulse 1.2s ease-in-out infinite; }

/* Confetti Canvas */
#wr-confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:9999; }

/* Confirm Modal */
.wr-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:10001; backdrop-filter:blur(4px); }
.wr-confirm-modal { background:#111827; border:1px solid #374151; border-radius:20px; padding:28px 26px; width:min(90%,440px); text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.6); animation:wrModalSlideIn .3s ease-out; }
.wr-confirm-icon { width:70px; height:70px; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#d97706); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#1f1f1f; box-shadow:0 6px 16px rgba(245,158,11,.4); }
.wr-confirm-title { margin:0 0 12px; font-size:1.15rem; font-weight:700; color:var(--wr-text); }
.wr-confirm-message { margin:0 0 24px; font-size:.9rem; line-height:1.6; color:var(--wr-text-dim); }
.wr-confirm-actions { display:flex; gap:12px; justify-content:center; }
@keyframes wrModalSlideIn { from{transform:translateY(-20px);opacity:0;} to{transform:translateY(0);opacity:1;} }

/* RTL adjustments */
html[dir=rtl] .wr-item-label { direction:rtl; }

/* Winners Section Below Roulette */
.wr-winners-section { margin-top:24px; background:var(--wr-surface); border:1px solid var(--wr-border); border-radius:18px; padding:24px; }
.wr-winners-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.wr-winners-header h3 { margin:0; font-size:1.1rem; font-weight:700; color:var(--wr-text); display:flex; align-items:center; gap:10px; }
.wr-winners-actions { display:flex; gap:10px; }
.wr-winners-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.wr-winner-card { background:var(--wr-surface-alt); border:1px solid #d97706; border-radius:14px; padding:16px 18px; position:relative; box-shadow:0 0 0 2px rgba(251,191,36,.25); transition:.25s; }
.wr-winner-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(251,191,36,.4); }
.wr-winner-card-badge { position:absolute; top:12px; left:12px; background:linear-gradient(135deg,#fbbf24,#d97706); color:#1f1f1f; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:8px; }
.wr-winner-card-body { display:flex; flex-direction:column; gap:8px; }
.wr-winner-card-name { font-size:.95rem; font-weight:700; color:#fbbf24; }
.wr-winner-card-account { font-size:.8rem; color:var(--wr-text-dim); }
.wr-winner-card-email { font-size:.75rem; color:var(--wr-text-dim); display:flex; align-items:center; gap:6px; }
.wr-winner-card-prize { font-size:.85rem; font-weight:700; color:#10b981; display:flex; align-items:center; gap:6px; }
.wr-winner-card-agent { font-size:.75rem; color:#8b949e; display:flex; align-items:center; gap:6px; }
.wr-winner-card-actions { margin-top:12px; display:flex; gap:8px; }
.wr-winner-empty { text-align:center; padding:48px 20px; color:var(--wr-text-dim); display:flex; flex-direction:column; align-items:center; gap:8px; }

/* Prize Type Sections */
.wr-prize-section { margin-bottom:28px; }
.wr-prize-section:last-child { margin-bottom:0; }
.wr-prize-section-title { font-size:.9rem; font-weight:700; color:var(--wr-text); margin:0 0 14px 0; padding-bottom:10px; border-bottom:2px solid var(--wr-border-alt); display:flex; align-items:center; gap:8px; }
.wr-winner-card-time { font-size:.7rem; color:var(--wr-text-dim); margin-top:4px; display:flex; align-items:center; gap:6px; }
.wr-winner-empty { text-align:center; padding:40px 20px; color:var(--wr-text-dim); font-size:.9rem; }
.wr-btn-small { font-size:.75rem; padding:8px 12px; }

/* Agent Selector */
.wr-agent-selector { display:flex; align-items:center; gap:12px; margin-top:18px; padding:16px 20px; background:var(--wr-surface); border:1px solid var(--wr-border); border-radius:14px; }
.wr-agent-selector label { font-size:.85rem; font-weight:600; color:var(--wr-text); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.wr-agent-dropdown { flex:1; max-width:350px; background:#0d1117; border:1px solid var(--wr-border-alt); border-radius:10px; padding:10px 14px; color:var(--wr-text); font-size:.85rem; cursor:pointer; transition:.25s; }
.wr-agent-dropdown:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.35); }

/* Agent Info Box */
.wr-agent-info-box { background:var(--wr-surface-alt); border:1px solid var(--wr-border-alt); border-radius:14px; padding:16px 18px; margin-bottom:18px; }
.wr-agent-info-header { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#3b82f6; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.wr-agent-info-row { font-size:.85rem; color:var(--wr-text); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.wr-agent-info-row strong { color:var(--wr-text-dim); min-width:85px; }
.wr-agent-info-row span { color:#fbbf24; font-weight:600; }
.wr-agent-info-divider { height:1px; background:var(--wr-border-alt); margin:14px 0; }
/* Competition Information Display */
.wr-competition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wr-border-alt);
}

.wr-competition-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--wr-text);
}

.wr-competition-title i {
  color: #f59e0b;
}

.wr-competition-status {
  padding: 4px 12px;
  border-radius: 20px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.wr-competition-meta {
  margin-bottom: 15px;
}

.wr-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--wr-text-dim);
}

.wr-meta-row i {
  color: #9ca3af;
  width: 16px;
}

.wr-competition-description {
  background: var(--wr-surface);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 15px;
  border-left: 4px solid #3b82f6;
}

.wr-competition-description i {
  color: #3b82f6;
  margin-left: 8px;
}

.wr-competition-description p {
  margin: 0;
  color: var(--wr-text);
  font-size: 14px;
  line-height: 1.5;
}

.wr-competition-stats {
  background: var(--wr-surface);
  border: 1px solid var(--wr-border-alt);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 15px;
}

.wr-stats-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--wr-text);
}

.wr-stats-header i {
  color: #10b981;
}

.wr-competition-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--wr-border);
}

.wr-competition-stat-row:last-child {
  border-bottom: none;
}

.wr-competition-stat-row.wr-stat-total {
  background: rgba(245, 158, 11, 0.1);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  border-bottom: none;
}

.wr-competition-stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--wr-text);
}

.wr-competition-stat-label i {
  width: 16px;
  color: var(--wr-text-dim);
}

.wr-competition-stat-value {
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.wr-competition-stat-value.deposit {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.wr-competition-stat-value.trading {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.wr-prize-info {
  background: var(--wr-surface);
  border: 1px solid var(--wr-border-alt);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 15px;
}

.wr-prize-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--wr-text);
}

.wr-prize-header i {
  color: #f59e0b;
}

.wr-prize-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--wr-border);
}

.wr-prize-row:last-child {
  border-bottom: none;
}

.wr-prize-label {
  font-weight: 500;
  color: var(--wr-text);
}

.wr-prize-value {
  font-weight: 600;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.wr-engagement-stats {
  background: var(--wr-surface);
  border: 1px solid var(--wr-border-alt);
  border-radius: 8px;
  padding: 16px;
}

.wr-engagement-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--wr-text);
}

.wr-engagement-header i {
  color: #8b5cf6;
}

.wr-engagement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px;
}

.wr-engagement-item {
  text-align: center;
  padding: 12px 8px;
  background: var(--wr-surface-alt);
  border-radius: 6px;
  border: 1px solid var(--wr-border);
}

.wr-engagement-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--wr-text);
  display: block;
}

.wr-engagement-label {
  font-size: 12px;
  color: var(--wr-text-dim);
  margin-top: 4px;
  text-transform: lowercase;
}

.wr-agent-info-empty {
  text-align: center;
  color: var(--wr-text-dim);
  font-style: italic;
  padding: 20px;
}

.wr-agent-status { font-size:.75rem; color:var(--wr-text-dim); }
.wr-agent-status.selected { color:#10b981; font-weight:600; }
@media (max-width:700px){
  .wr-agent-selector { flex-direction:column; align-items:stretch; }
  .wr-agent-dropdown { max-width:100%; }
}

/* Tools row (search + counts) */
.wr-tools-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 10px; }
.wr-search-input { width:140px; background:#0d1117; border:1px solid var(--wr-border-alt); border-radius:10px; padding:7px 9px; color:var(--wr-text); font-size:.7rem; direction:rtl; }
.wr-search-input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.35); }
.wr-counts { display:flex; gap:10px; font-size:.65rem; color:var(--wr-text-dim); }
@media (max-width:560px){
  .wr-tools-row { flex-direction:column; align-items:stretch; }
  .wr-search-input { width:100%; }
  .wr-counts { justify-content:space-between; }
}