/* ===== Shared Sidebar Base ===== */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 250px; background: #f8f9fb; border-right: 1px solid #e8eaef; padding: 24px 16px; display: flex; flex-direction: column; overflow-y: auto; z-index: 10; }
.logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; padding: 0 8px; }
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366f1, #a855f7); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
.logo span { font-size: 18px; font-weight: 700; color: #1a1a2e; }
.logo .badge { font-size: 10px; background: #6366f1; color: #fff; padding: 2px 7px; border-radius: 4px; font-weight: 600; margin-left: 2px; vertical-align: top; flex-shrink: 0; }
.nav-section { font-size: 11px; text-transform: uppercase; color: #9ca3af; margin: 20px 0 8px 8px; letter-spacing: 1px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #6b7280; cursor: pointer; transition: all 0.2s; font-size: 14px; margin-bottom: 2px; text-decoration: none; }
.nav-item:hover { background: #f0f1f5; color: #1a1a2e; }
.nav-item.active { background: #eef0ff; color: #6366f1; font-weight: 600; }
.nav-item i { width: 20px; text-align: center; font-size: 15px; }
.nav-badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.sidebar-bottom { margin-top: auto; padding-top: 16px; }
.admin-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid #e8eaef; border-radius: 12px; }
.admin-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #a855f7); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; }
.admin-info { flex: 1; min-width: 0; }
.admin-name { font-size: 13px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-role { font-size: 11px; color: #6366f1; font-weight: 500; }

/* ===== Platform Groups (Sidebar) ===== */
.platform-group { margin-bottom: 2px; }

.platform-header {
  display: flex; align-items: center;
  width: 100%; padding: 2px 4px 2px 4px; border-radius: 10px;
  background: none; margin-bottom: 1px;
}
.platform-header:hover { background: #f0f1f5; }
.platform-header-left {
  display: flex; align-items: center; gap: 10px;
  flex: 1; padding: 6px 8px; border-radius: 8px;
}
.platform-header-link {
  text-decoration: none; cursor: pointer; transition: background 0.15s;
  border-radius: 8px;
}
.platform-header-link:hover { background: rgba(99,102,241,0.08); }
.platform-header-link.active { background: #eef0ff; }
.platform-header-link.active .platform-header-label { color: #6366f1; }
.platform-header-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
  color: #fff;
}
.platform-header-label { font-size: 13px; font-weight: 600; color: #374151; }
.platform-chevron-btn {
  flex-shrink: 0; width: 28px; height: 28px; border: none; background: none;
  cursor: pointer; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.platform-chevron-btn:hover { background: #e8eaef; }
.platform-chevron { font-size: 11px; color: #9ca3af; transition: transform 0.2s; }
.platform-chevron.rotated { transform: rotate(-90deg); }

.platform-children { overflow: hidden; transition: max-height 0.2s ease; max-height: 300px; padding-left: 10px; }
.platform-children.collapsed { max-height: 0; }
.platform-child { border-left: 2px solid #e8eaef; margin-left: 12px; border-radius: 0 8px 8px 0 !important; }
.platform-child.active { border-left-color: #6366f1; }

[data-theme="dark"] .platform-child { border-left-color: #2a2d3a; }
[data-theme="dark"] .platform-child.active { border-left-color: #6366f1; }

/* Dark mode platform groups */
[data-theme="dark"] .platform-header:hover { background: #1e2130; }
[data-theme="dark"] .platform-header-label { color: #c9cdd4; }
[data-theme="dark"] .platform-chevron { color: #4b5563; }
[data-theme="dark"] .platform-chevron-btn:hover { background: #2a2d3a; }
[data-theme="dark"] .platform-header-link:hover { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .platform-header-link.active { background: #1e1b4b; }
[data-theme="dark"] .platform-header-link.active .platform-header-label { color: #818cf8; }

/* ===== Dark Theme Overrides ===== */
/* Applied when <html data-theme="dark"> */

[data-theme="dark"] body {
  background: #0f1117;
  color: #e2e4e9;
}

/* Sidebar */
[data-theme="dark"] .sidebar {
  background: #161821;
  border-right-color: #2a2d3a;
}

[data-theme="dark"] .logo span {
  color: #e2e4e9;
}

[data-theme="dark"] .nav-item {
  color: #9ca3af;
}

[data-theme="dark"] .nav-item:hover {
  background: #1e2130;
  color: #e2e4e9;
}

[data-theme="dark"] .nav-item.active {
  background: #1e1b4b;
  color: #818cf8;
}

[data-theme="dark"] .admin-card {
  background: #1e2130;
  border-color: #2a2d3a;
}

[data-theme="dark"] .admin-name {
  color: #e2e4e9;
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  margin-bottom: 8px;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
}

.theme-toggle:hover {
  background: #f0f1f5;
  color: #1a1a2e;
}

.theme-toggle i {
  width: 20px;
  text-align: center;
  font-size: 15px;
}

[data-theme="dark"] .theme-toggle {
  color: #9ca3af;
}

[data-theme="dark"] .theme-toggle:hover {
  background: #1e2130;
  color: #e2e4e9;
}

/* Main content */
[data-theme="dark"] .main {
  background: #0f1117;
}

[data-theme="dark"] .topbar h1 {
  color: #e2e4e9;
}

[data-theme="dark"] .topbar-sub {
  color: #6b7280;
}

/* Stat icon backgrounds */
[data-theme="dark"] .stat-icon.blue   { background: #1e1b4b; color: #818cf8; }
[data-theme="dark"] .stat-icon.green  { background: #052e16; color: #34d399; }
[data-theme="dark"] .stat-icon.orange { background: #431407; color: #fb923c; }
[data-theme="dark"] .stat-icon.purple { background: #2e1065; color: #c084fc; }
[data-theme="dark"] .stat-icon.yellow { background: #422006; color: #fbbf24; }

/* Stat cards */
[data-theme="dark"] .stat-card {
  background: #161821;
  border-color: #2a2d3a;
}

[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .stat-value {
  color: #e2e4e9;
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-sub {
  color: #6b7280;
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .video-stats-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .kyc-card,
[data-theme="dark"] .quotas-card,
[data-theme="dark"] .platform-card {
  background: #161821;
  border-color: #2a2d3a;
}

[data-theme="dark"] .chart-card-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .video-stats-title {
  color: #e2e4e9;
}

[data-theme="dark"] .video-stat-item {
  background: #1e2130;
}

[data-theme="dark"] .video-stat-value {
  color: #e2e4e9;
}

/* Tables */
[data-theme="dark"] th {
  background: #1a1d2a;
  border-bottom-color: #2a2d3a;
  color: #c9cdd4;
}

[data-theme="dark"] td {
  background: #161821;
  border-bottom-color: #1e2130;
  color: #e2e4e9;
}

[data-theme="dark"] tr:hover td {
  background: #1a1d2a;
}

[data-theme="dark"] table tr:last-child td,
[data-theme="dark"] table tbody tr:last-child td {
  border-bottom-color: transparent !important;
}

[data-theme="dark"] .pagination {
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .pagination-btn {
  background: #1a1d2a;
  border-color: #2a2d3a;
  color: #c9cdd4;
}

[data-theme="dark"] .pagination-btn:hover:not(:disabled) {
  border-color: #6366f1;
  color: #818cf8;
}

[data-theme="dark"] .pagination-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

[data-theme="dark"] .btn-view {
  background: #1f2937;
  border-color: #374151;
  color: #e2e4e9;
}

[data-theme="dark"] .btn-view:hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}

/* Feed / recent activity table */
[data-theme="dark"] .feed-card { background: #161821; border-color: #2a2d3a; }
[data-theme="dark"] .feed-controls { border-bottom-color: #2a2d3a; }
[data-theme="dark"] .feed-title { color: #e2e4e9; }
[data-theme="dark"] .feed-footer { border-top-color: #2a2d3a; background: #161821; }
[data-theme="dark"] .pg-btn { background: #1a1d2a; border-color: #2a2d3a; color: #9ca3af; }
[data-theme="dark"] .pg-btn:hover:not(:disabled) { border-color: #6366f1; color: #818cf8; }
[data-theme="dark"] .pg-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
[data-theme="dark"] .ms-badge { background: #1e2130; color: #9ca3af; }
[data-theme="dark"] .duration-chip { color: #6b7280; }
[data-theme="dark"] .user-pill { background: #1e1b4b; color: #818cf8; }
[data-theme="dark"] .anon-pill { background: #1e2130; color: #6b7280; }

/* Event type badges — dark mode */
[data-theme="dark"] .ev-page_view  { background: #1e1b4b; color: #818cf8; }
[data-theme="dark"] .ev-page_leave { background: #1e2130; color: #6b7280; }
[data-theme="dark"] .ev-tool_open  { background: #052e16; color: #34d399; }
[data-theme="dark"] .ev-file_upload { background: #431407; color: #fb923c; }
[data-theme="dark"] .ev-download   { background: #042f2e; color: #2dd4bf; }
[data-theme="dark"] .ev-click      { background: #3b0764; color: #e879f9; }
[data-theme="dark"] .ev-auth_login { background: #052e16; color: #4ade80; }
[data-theme="dark"] .ev-auth_logout { background: #2d0a0a; color: #f87171; }
[data-theme="dark"] .ev-error      { background: #2d0a0a; color: #f87171; }
[data-theme="dark"] .ev-default    { background: #1e2130; color: #6b7280; }

/* Top pages table in logs */
[data-theme="dark"] .top-pages-card { background: #161821; border-color: #2a2d3a; }

/* Range tabs */
[data-theme="dark"] .range-tabs { background: #1a1d2a; border-color: #2a2d3a; }
[data-theme="dark"] .range-tab { color: #9ca3af; }
[data-theme="dark"] .range-tab:hover:not(.active) { background: #22263a; color: #e2e4e9; }
[data-theme="dark"] .range-tab.active { background: #6366f1; color: #fff; }

/* Topbar text (logs page) */
[data-theme="dark"] .topbar-left h1 { color: #e2e4e9; }
[data-theme="dark"] .topbar-left p  { color: #6b7280; }

/* Chart cards (logs page) */
[data-theme="dark"] .chart-card { background: #161821; border-color: #2a2d3a; }
[data-theme="dark"] .chart-title { color: #e2e4e9; }
[data-theme="dark"] .chart-sub   { color: #6b7280; }
[data-theme="dark"] .chart-header .chart-title { color: #e2e4e9; }

/* Table cell text */
[data-theme="dark"] .user-cell-name,
[data-theme="dark"] .user-name { color: #e2e4e9; }

[data-theme="dark"] .user-cell-email,
[data-theme="dark"] .user-email { color: #9ca3af; }

[data-theme="dark"] .login-mode-text { color: #c9cdd4; }

[data-theme="dark"] .amount-val,
[data-theme="dark"] .amount-cell { color: #e2e4e9; }

[data-theme="dark"] .status-badge.active { background: #0f766e; color: #d1fae5; }
[data-theme="dark"] .status-badge.inactive { background: #111827; color: #9ca3af; }
[data-theme="dark"] .status-badge.pending { background: #1f2937; color: #fde68a; }
[data-theme="dark"] .status-badge.failed { background: #4b1010; color: #fecaca; }
[data-theme="dark"] .status-badge.email-pending { background: #452a0a; color: #fcd34d; }

[data-theme="dark"] .kyc-badge.completed { background: #0f766e; color: #d1fae5; }
[data-theme="dark"] .kyc-badge.pending { background: #1f2937; color: #fde68a; }
[data-theme="dark"] .kyc-badge.not-started { background: #111827; color: #9ca3af; }

[data-theme="dark"] .plan-tag { color: #c9cdd4; }

[data-theme="dark"] .order-id { color: #9ca3af; }

/* Controls bar */
[data-theme="dark"] .controls-bar {
  background: #161821;
  border-color: #2a2d3a;
}

[data-theme="dark"] .search-input {
  background: #1e2130;
  border-color: #2a2d3a;
  color: #e2e4e9;
}

[data-theme="dark"] .search-input::placeholder {
  color: #6b7280;
}

[data-theme="dark"] .filter-select {
  background: #1e2130;
  border-color: #2a2d3a;
  color: #e2e4e9;
}

/* Date filter dropdown */
[data-theme="dark"] .date-filter-btn {
  background: #1e2130;
  border-color: #2a2d3a;
  color: #e2e4e9;
}

[data-theme="dark"] .date-filter-btn.has-filter {
  background: #1e1b4b;
  color: #c9cdd4;
  border-color: #4f46e5;
}

[data-theme="dark"] .date-dropdown {
  background: #1e2130;
  border-color: #2a2d3a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

[data-theme="dark"] .date-option {
  color: #c9cdd4;
}

[data-theme="dark"] .date-option:hover {
  background: #252839;
}

[data-theme="dark"] .date-option.active {
  background: #1e1b4b;
  color: #818cf8;
}

[data-theme="dark"] .custom-date-row {
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .custom-date-row input {
  background: #252839;
  border-color: #2a2d3a;
  color: #e2e4e9;
}

/* Pagination */
[data-theme="dark"] .pagination-btn {
  background: #1e2130;
  border-color: #2a2d3a;
  color: #9ca3af;
}

[data-theme="dark"] .pagination-btn:hover:not(:disabled) {
  background: #252839;
  color: #e2e4e9;
}

[data-theme="dark"] .pagination-btn.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

[data-theme="dark"] .pagination-info {
  color: #6b7280;
}

/* Detail page */
[data-theme="dark"] .detail-card-title {
  color: #e2e4e9;
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .detail-label {
  color: #6b7280;
}

[data-theme="dark"] .detail-value {
  color: #e2e4e9;
}

[data-theme="dark"] .detail-row {
  border-bottom-color: #1e2130;
}

[data-theme="dark"] .kyc-card-title,
[data-theme="dark"] .quotas-card-title {
  color: #e2e4e9;
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .kyc-item-label { color: #6b7280; }
[data-theme="dark"] .kyc-item-status.unverified { color: #6b7280; }

/* Back button */
[data-theme="dark"] .back-btn {
  background: #161821;
  border-color: #2a2d3a;
  color: #9ca3af;
}
[data-theme="dark"] .back-btn:hover { border-color: #6366f1; color: #818cf8; }

/* Tabs */
[data-theme="dark"] .tab-btn {
  color: #9ca3af;
  border-bottom-color: transparent;
}

[data-theme="dark"] .tab-btn:hover {
  color: #e2e4e9;
}

[data-theme="dark"] .tab-btn.active {
  color: #818cf8;
  border-bottom-color: #818cf8;
}

/* Platform / KYC / Quota item backgrounds */
[data-theme="dark"] .platform-item,
[data-theme="dark"] .kyc-item,
[data-theme="dark"] .quota-item,
[data-theme="dark"] .video-stat-item { background: #1e2130; }

[data-theme="dark"] .platform-revenue,
[data-theme="dark"] .quota-value { color: #e2e4e9; }

[data-theme="dark"] .platform-name,
[data-theme="dark"] .platform-count,
[data-theme="dark"] .quota-label,
[data-theme="dark"] .quota-unit { color: #6b7280; }

/* Profile header */
[data-theme="dark"] .profile-header { background: #161821; border-color: #2a2d3a; }
[data-theme="dark"] .profile-name { color: #e2e4e9; }
[data-theme="dark"] .profile-email { color: #9ca3af; }
[data-theme="dark"] .profile-meta-item strong { color: #c9cdd4; }

/* Empty state */
[data-theme="dark"] .empty-state {
  color: #6b7280;
}

/* Login page */
[data-theme="dark"] .login-form-panel {
  background: #0f1117;
}

[data-theme="dark"] .login-form-header h2 {
  color: #e2e4e9;
}

[data-theme="dark"] .login-form-header p {
  color: #9ca3af;
}

[data-theme="dark"] .form-group label {
  color: #c9cdd4;
}

[data-theme="dark"] .input-wrapper {
  background: #161821;
  border-color: #2a2d3a;
}

[data-theme="dark"] .input-wrapper:focus-within {
  border-color: #6366f1;
}

[data-theme="dark"] .input-wrapper input {
  color: #e2e4e9;
  background: transparent;
}

[data-theme="dark"] .input-wrapper .input-icon {
  color: #6b7280;
}

[data-theme="dark"] .form-footer {
  color: #6b7280;
}