/* =============================================
   VYPA HOST – GLOBAL DARK MODE
   Class: body.dark-mode  |  Stored: localStorage 'theme'
   Green palette aligned with sidebar gradient (#025b40 → #07cb91)
   ============================================= */

/* ── 1. CSS variable overrides ── */
body.dark-mode {
  background: linear-gradient(226deg, #0a1a12 0%, #050e08 100%) fixed;
  color: #f1f5fa;
  --white:       rgba(255, 255, 255, 0.07);
  --text:        #f1f5fa;
  --text-muted:  #8ba897;
  --brand:       #07cb91;
  --brand-light: #34d399;
  --green:       #10b981;
  --orange:      #f59e0b;
}

/* ── 2. Transitions ── */
body,
.sidebar,
.topbar,
.main-content,
.stat-card,
.card,
.info-card,
.modal-content,
input,
textarea,
select,
table,
.screen-card,
.media-card,
.playlist-item,
.badge {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

/* ── 3. Sidebar ── */
body.dark-mode .sidebar {
  background: linear-gradient(75deg, #011a12 0%, #024d37 100%);
  border-right: 1px solid rgba(7, 203, 145, 0.2);
}

body.dark-mode .nav-links a {
  color: #90a898;
}

body.dark-mode .nav-links a:hover {
  background: rgba(7, 203, 145, 0.1);
  color: #34d399;
}

body.dark-mode .nav-links a.active {
  background: rgba(7, 203, 145, 0.15);
  color: #07cb91;
  border-left-color: #07cb91;
}

body.dark-mode .nav-links a i {
  color: inherit;
}

body.dark-mode .nav-section {
  color: #4a6855;
}

body.dark-mode .sidebar-footer {
  border-top: 1px solid rgba(7, 203, 145, 0.12);
  background: transparent;
}

body.dark-mode .user-info {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

body.dark-mode .user-info:hover {
  background: rgba(255, 255, 255, 0.07);
}

body.dark-mode .user-name {
  color: #f1f5fa;
}

body.dark-mode .user-plan {
  color: #07cb91;
}

body.dark-mode .user-info .fa-chevron-down {
  color: #4a6855;
}

body.dark-mode .user-dropdown-menu {
  background: #0d2318;
  border: 1px solid rgba(7, 203, 145, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}

body.dark-mode .user-dropdown-menu .dropdown-item {
  color: #c0cfca;
  border-bottom-color: rgba(7, 203, 145, 0.08);
}

body.dark-mode .user-dropdown-menu .dropdown-item i {
  color: #7a9a87;
}

body.dark-mode .user-dropdown-menu .dropdown-item:hover {
  background: rgba(7, 203, 145, 0.12);
  color: #07cb91;
}

body.dark-mode .user-dropdown-menu .dropdown-item:hover i {
  color: #07cb91;
}

body.dark-mode .user-dropdown-menu .dropdown-item.logout {
  color: #f87171;
}

body.dark-mode .user-dropdown-menu .dropdown-item.logout i {
  color: #f87171;
}

body.dark-mode .user-dropdown-menu .dropdown-item.logout:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

/* ── 4. Topbar ── */
body.dark-mode .topbar {
  background: #0d1f15;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #f1f5fa;
}

body.dark-mode .topbar h1,
body.dark-mode .topbar h2 {
  color: #f1f5fa;
}

body.dark-mode .hamburger-btn i,
body.dark-mode .hamburger-btn svg {
  color: #c0cfca;
}

body.dark-mode .topbar-actions i {
  color: #7a9a87;
}

body.dark-mode .push-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(0, 255, 179, 0.853);
  color: #ffffff;
}

body.dark-mode .push-btn:hover {
  background: rgba(7, 203, 145, 0.1);
  border-color: #07cb91;
  color: #07cb91;
}

/* ── 5. Layout containers ── */
body.dark-mode .main-content {
  background: #0d1f15;
}

body.dark-mode .dashboard-container,
body.dark-mode .app-container,
body.dark-mode .page-container {
  background: #0d1f15;
}

/* ── 6. Cards & panels ── */
body.dark-mode .card,
body.dark-mode .info-card,
body.dark-mode .request-card,
body.dark-mode .box,
body.dark-mode .panel,
body.dark-mode .widget {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(7, 203, 145, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  color: #f1f5fa;
}

/* Stat cards — glass morphism + colored top accent */
body.dark-mode .stat-card {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(7, 203, 145, 0.22);
  border-top: 4px solid #07cb91;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #f1f5fa;
}

body.dark-mode .stat-card:nth-child(1) { border-top-color: #07cb91; }
body.dark-mode .stat-card:nth-child(2) { border-top-color: #34d399; }
body.dark-mode .stat-card:nth-child(3) { border-top-color: #f87171; }
body.dark-mode .stat-card:nth-child(4) { border-top-color: #fbbf24; }
body.dark-mode .stat-card:nth-child(5) { border-top-color: #a78bfa; }

body.dark-mode .stat-card:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(7, 203, 145, 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.dark-mode .stat-label,
body.dark-mode .stat-value,
body.dark-mode .stat-card p,
body.dark-mode .stat-card span {
  color: #a8c5b5;
}

/* Numbers — green gradient (overrides background:black clip that makes text invisible) */
body.dark-mode .stat-card h3,
body.dark-mode .stat-info h3 {
  background: linear-gradient(135deg, #07cb91 0%, #c8ffe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 700;
}

/* Per-card icon colors */
body.dark-mode .stat-card:nth-child(1) .stat-icon {
  background: rgba(7, 203, 145, 0.18) !important;
  color: #07cb91 !important;
}
body.dark-mode .stat-card:nth-child(2) .stat-icon {
  background: rgba(52, 211, 153, 0.18) !important;
  color: #34d399 !important;
}
body.dark-mode .stat-card:nth-child(3) .stat-icon {
  background: rgba(248, 113, 113, 0.18) !important;
  color: #f87171 !important;
}
body.dark-mode .stat-card:nth-child(4) .stat-icon {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fbbf24 !important;
}
body.dark-mode .stat-card:nth-child(5) .stat-icon {
  background: rgba(167, 139, 250, 0.18) !important;
  color: #a78bfa !important;
}

/* ── 7. Tables ── */
body.dark-mode .ad-requests-section,
body.dark-mode .table-section {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  color: #f1f5fa;
}

body.dark-mode .ad-requests-section h2,
body.dark-mode .table-section h2 {
  color: #f1f5fa;
}

body.dark-mode table {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #c0cfca;
}

body.dark-mode .ad-requests-table,
body.dark-mode table.striped,
body.dark-mode .data-table {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode thead tr,
body.dark-mode .ad-requests-table thead tr {
  background: rgba(7, 203, 145, 0.05) !important;
  background-image: none !important;
}

body.dark-mode th,
body.dark-mode .ad-requests-table th {
  color: #7abfa3 !important;
  border-bottom: 1px solid rgba(7, 203, 145, 0.15) !important;
  background: transparent;
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
}

body.dark-mode tbody tr,
body.dark-mode .ad-requests-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode tbody tr:hover,
body.dark-mode .ad-requests-table tbody tr:hover {
  background: rgba(7, 203, 145, 0.04);
}

body.dark-mode td,
body.dark-mode .ad-requests-table td {
  color: #c0cfca !important;
}

body.dark-mode .ad-requests-table td:first-child {
  color: #07cb91 !important;
}

/* ── 8. Badges ── */
body.dark-mode .badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

body.dark-mode .badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

body.dark-mode .badge-info {
  background: rgba(7, 203, 145, 0.15);
  color: #34d399;
}

body.dark-mode .badge-danger,
body.dark-mode .badge-error {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

body.dark-mode .badge-pending,
body.dark-mode .badge-secondary {
  background: rgba(139, 146, 165, 0.15);
  color: #c0cfca;
}

/* ── 9. Modals ── */
body.dark-mode .modal-content {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f1f5fa;
  border: 1px solid rgba(7, 203, 145, 0.2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-title,
body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3,
body.dark-mode .modal-section h4 {
  color: #f1f5fa !important;
}

body.dark-mode .modal-close,
body.dark-mode .close-btn {
  color: #4a6855;
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .modal-close:hover,
body.dark-mode .close-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

body.dark-mode .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

body.dark-mode .modal {
  background-color: rgba(0, 0, 0, 0.75);
}

.btn-secondary {
    border: 1px solid rgb(255, 255, 255);
}

/* ── 10. Forms & inputs ── */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body.dark-mode textarea,
body.dark-mode select {
  background: #0f1f14 !important;
  color: #f1f5fa !important;
  border-color: rgba(7, 203, 145, 0.4) !important;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background: #232946 !important;
  border-color: #07cb91 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(7, 203, 145, 0.15) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #4a6855;
}

body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .input-label {
  color: #90a898;
}

/* ── 11. Buttons ── */
body.dark-mode .btn-outline,
body.dark-mode .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: #c0cfca;
}

body.dark-mode .btn-outline:hover,
body.dark-mode .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #07cb91;
  color: #07cb91;
}

body.dark-mode .btn-light {
  background: #162a1e;
  border-color: rgba(255, 255, 255, 0.1);
  color: #c0cfca;
}

body.dark-mode .btn-light:hover {
  background: #232946;
}

.screen-action-btn {
         border: 1px solid rgb(0, 164, 82);
    }

/* Keep primary CTA buttons their original vibrant colors */
body.dark-mode .btn-primary,
body.dark-mode [class*="btn-primary"] {
  background: linear-gradient(135deg, #07cb91 0%, #07cb91 100%);
  border-color: transparent;
  color: white;
}

/* ── 12. Quick-actions / icon buttons ── */
body.dark-mode .quick-action,
body.dark-mode .action-btn {
  background: #162a1e;
  border-color: rgba(255, 255, 255, 0.06);
  color: #90a898;
}

body.dark-mode .quick-action:hover,
body.dark-mode .action-btn:hover {
  background: rgba(7, 203, 145, 0.1);
  color: #07cb91;
}

/* ── 13. Pager ── */
body.dark-mode .pager,
body.dark-mode .pagination {
  background: transparent;
}

body.dark-mode .pager a,
body.dark-mode .pager span,
body.dark-mode .page-link {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.07);
  color: #90a898;
}

body.dark-mode .pager a:hover,
body.dark-mode .page-link:hover {
  background: rgba(7, 203, 145, 0.1);
  color: #07cb91;
  border-color: rgba(7, 203, 145, 0.35);
}

body.dark-mode .pager .active,
body.dark-mode .pager .current,
body.dark-mode .page-item.active .page-link {
  background: #07cb91;
  color: white;
  border-color: #07cb91;
}

/* ── 14. Screen cards ── */
body.dark-mode .screen-card,
body.dark-mode .screen-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(7, 203, 145, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

body.dark-mode .screen-name,
body.dark-mode .screen-card h3 {
  color: #f1f5fa;
}

body.dark-mode .screen-meta,
body.dark-mode .screen-detail {
  color: #7a9a87;
}

body.dark-mode .status-online,
body.dark-mode .screen-status-online {
  color: #10b981;
}

body.dark-mode .status-offline,
body.dark-mode .screen-status-offline {
  color: #f87171;
}

/* ── 15. Gallery / Media grid ── */
body.dark-mode .media-card,
body.dark-mode .gallery-item,
body.dark-mode .upload-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(7, 203, 145, 0.2);
}

body.dark-mode .media-name,
body.dark-mode .media-meta,
body.dark-mode .file-name {
  color: #90a898;
}

body.dark-mode .upload-zone,
body.dark-mode .drop-zone {
  background: rgba(7, 203, 145, 0.05);
  border-color: rgba(7, 203, 145, 0.25);
}

body.dark-mode .upload-zone:hover {
  background: rgba(7, 203, 145, 0.1);
  border-color: #07cb91;
}

/* ── 16. Playlist ── */
body.dark-mode .playlist-item,
body.dark-mode .slot-item,
body.dark-mode .playlist-row {
  background: #162a1e;
  border-color: rgba(255, 255, 255, 0.06);
  color: #c0cfca;
}

body.dark-mode .playlist-item:hover {
  background: rgba(7, 203, 145, 0.06);
}

body.dark-mode .slot-label,
body.dark-mode .slot-empty {
  color: #4a6855;
}

body.dark-mode .slot-locked {
  border-color: rgba(7, 203, 145, 0.35);
  background: rgba(7, 203, 145, 0.06);
}

/* ── 17. Profile ── */
body.dark-mode .profile-section,
body.dark-mode .profile-card,
body.dark-mode .account-section {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .profile-section h3,
body.dark-mode .profile-card h3,
body.dark-mode .account-section h3,
body.dark-mode .section-heading {
  color: #f1f5fa;
}

body.dark-mode .profile-label,
body.dark-mode .field-label {
  color: #4a6855;
}

body.dark-mode .profile-value,
body.dark-mode .field-value {
  color: #c0cfca;
}

/* ── 18. Earnings & Payouts ── */
body.dark-mode .earnings-card,
body.dark-mode .payout-card,
body.dark-mode .revenue-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .amount-large,
body.dark-mode .revenue-amount,
body.dark-mode .payout-amount {
  color: #f1f5fa;
}

body.dark-mode .amount-label,
body.dark-mode .revenue-label {
  color: #7a9a87;
}

/* ── 19. Tabs ── */
body.dark-mode .tabs,
body.dark-mode .tab-nav {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode .tab,
body.dark-mode .tab-item,
body.dark-mode .tab-link {
  color: #4a6855;
}

body.dark-mode .tab:hover,
body.dark-mode .tab-item:hover {
  color: #90a898;
}

body.dark-mode .tab.active,
body.dark-mode .tab-item.active,
body.dark-mode .tab-link.active {
  color: #07cb91;
  border-bottom-color: #07cb91;
}

/* ── 20. Dropdown menus ── */
body.dark-mode .dropdown-menu,
body.dark-mode .select-dropdown,
body.dark-mode .filter-dropdown {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(7, 203, 145, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-item,
body.dark-mode .select-option {
  color: #c0cfca;
}

body.dark-mode .dropdown-item:hover {
  background: rgba(7, 203, 145, 0.1);
  color: #07cb91;
}

/* ── 21. Alerts / banners ── */
body.dark-mode .alert-info,
body.dark-mode .banner-info {
  background: rgba(7, 203, 145, 0.1);
  border-color: rgba(7, 203, 145, 0.3);
  color: #34d399;
}

body.dark-mode .alert-success,
body.dark-mode .banner-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

body.dark-mode .alert-warning,
body.dark-mode .banner-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

body.dark-mode .alert-danger,
body.dark-mode .alert-error,
body.dark-mode .banner-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* ── 22. Toast notifications ── */
body.dark-mode .toast:not([style*="background"]) {
  background: #162a1e;
  border: 1px solid rgba(7, 203, 145, 0.25);
  color: #f1f5fa;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── 23. Premium / Plan cards ── */
body.dark-mode .premium-card,
body.dark-mode .plan-card,
body.dark-mode .price-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .plan-card.recommended,
body.dark-mode .plan-card.featured,
body.dark-mode .plan-card.popular {
  border-color: #07cb91;
  background: rgba(7, 203, 145, 0.08);
}

body.dark-mode .plan-name,
body.dark-mode .price-label {
  color: #f1f5fa;
}

body.dark-mode .price-amount {
  color: #07cb91;
}

body.dark-mode .price-period,
body.dark-mode .plan-desc {
  color: #7a9a87;
}

/* ── 24. Onboarding ── */
body.dark-mode .step-card,
body.dark-mode .onboarding-step,
body.dark-mode .wizard-step {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .step-number {
  background: rgba(7, 203, 145, 0.18);
  color: #34d399;
  border-color: rgba(7, 203, 145, 0.35);
}

body.dark-mode .step-title {
  color: #f1f5fa;
}

body.dark-mode .step-desc {
  color: #7a9a87;
}

/* ── 25. Misc text ── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f1f5fa;
}

body.dark-mode p:not([class]),
body.dark-mode .text-body {
  color: #c0cfca;
}

body.dark-mode .text-muted,
body.dark-mode .muted {
  color: #4a6855 !important;
}

body.dark-mode .notice,
body.dark-mode .caption {
  color: #4a6855;
}

body.dark-mode hr {
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode a:not([class]) {
  color: #07cb91;
}

/* ── 26. Verification / standalone pages ── */
body.dark-mode .verify-container,
body.dark-mode .error-container,
body.dark-mode .standalone-box {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
  color: #f1f5fa;
}

/* ── 27. 404 page ── */
body.dark-mode .error-404,
body.dark-mode .not-found {
  color: #f1f5fa;
}

body.dark-mode .error-404 h1,
body.dark-mode .not-found h1 {
  color: #07cb91;
}

/* ── 28. Team pages ── */
body.dark-mode .team-card,
body.dark-mode .member-card,
body.dark-mode .invite-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
  color: #f1f5fa;
}

/* ── 29. Charts ── */
body.dark-mode .chart-container,
body.dark-mode .chart-wrapper {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ── 30. Mobile sidebar overlay ── */
body.dark-mode .sidebar-overlay {
  background: rgba(0, 0, 0, 0.72);
}

body.dark-mode .mobile-sidebar,
body.dark-mode .sidebar.mobile-open {
  background: #0a1a12;
}

/* ── 31. Custom scrollbar ── */
body.dark-mode ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #0d1f15;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #07cb91;
  border-radius: 3px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #07cb91;
}

/* ── 32. Dark mode toggle button (vypa-dark-toggle) ── */
.vypa-dark-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  color: #1a1a2e;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.vypa-dark-toggle:hover {
  background: #f1f5f9;
}

.vypa-dark-toggle .dm-icon-sun,
.vypa-dark-toggle .dm-icon-moon {
  font-size: 13px;
}

body.dark-mode .vypa-dark-toggle {
  background: #0f1f14;
  border-color: rgb(7, 203, 144);
  color: #f1f5fa;
}

body.dark-mode .vypa-dark-toggle:hover {
  background: rgba(7, 203, 145, 0.1);
  border-color: #07cb91;
}

/* Floating toggle (standalone pages) */
.vypa-dark-toggle[style*="position:fixed"],
.vypa-dark-toggle[style*="position: fixed"] {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* ── 33. Earnings page ── */
body.dark-mode .summary-card {
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(7, 203, 145, 0.22) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  color: #f1f5fa !important;
}

body.dark-mode .summary-card h3 {
  color: #a8c5b5 !important;
}

body.dark-mode .summary-card .value {
  color: #ffffff !important;
  font-weight: 700;
}

body.dark-mode .earnings-title {
  color: #f1f5fa !important;
}

body.dark-mode .earnings-container thead {
  background: rgba(7, 203, 145, 0.05) !important;
}

body.dark-mode .earnings-container tbody tr:hover {
  background: rgba(7, 203, 145, 0.05) !important;
}

body.dark-mode .earnings-container .modal-content {
  background: #0f2218 !important;
  border: 1px solid rgba(7, 203, 145, 0.25) !important;
}

body.dark-mode .earnings-container .modal-header h2 {
  color: #f1f5fa !important;
}

body.dark-mode .earnings-container .info-label {
  color: #90a898 !important;
}

body.dark-mode .earnings-container .modal-info p {
  color: #c0cfca !important;
}

body.dark-mode .modal-close {
  color: #90a898 !important;
}

body.dark-mode .summary-sub {
  color: #6a8a78 !important;
}

body.dark-mode .pending-value {
  color: #f59e0b !important;
}

body.dark-mode .badge-confirmed {
  background: rgba(7, 203, 145, 0.15) !important;
  color: #07cb91 !important;
}

body.dark-mode .badge-pending {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
}

body.dark-mode #earningsTable {
  background: rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode #earningsTable thead th {
  color: #7a9a87 !important;
}

body.dark-mode #earningsTable tbody td {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  color: #c0cfca !important;
}

/* ── 34. Payouts page ── */
body.dark-mode .summary-cards .card {
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(7, 203, 145, 0.22) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .summary-cards .card h3 {
  color: #ffffff !important;
}

body.dark-mode .summary-cards .card p {
  color: #a8c5b5 !important;
}

body.dark-mode .table-wrapper {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(7, 203, 145, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .modal-card {
  background: #0f2218 !important;
  border: 1px solid rgba(7, 203, 145, 0.25) !important;
  color: #f1f5fa !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .modal-card h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f1f5fa !important;
  color: #f1f5fa !important;
}

body.dark-mode .modal-header {
  border-bottom-color: rgba(7, 203, 145, 0.15) !important;
}

body.dark-mode .modal-header p {
  color: #a8c5b5 !important;
}

body.dark-mode .modal-card label {
  color: #90a898 !important;
}

body.dark-mode .modal-body .section-title {
  color: #f1f5fa !important;
  border-bottom-color: rgba(7, 203, 145, 0.15) !important;
}

body.dark-mode .modal-body .section-title i {
  color: #07cb91 !important;
}

body.dark-mode .modal-actions {
  background: #0a1a12 !important;
  border-top-color: rgba(7, 203, 145, 0.12) !important;
}

body.dark-mode .modal-actions .cancel {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #c0cfca !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .detail-grid > div {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(7, 203, 145, 0.1);
}

body.dark-mode .detail-grid strong {
  color: #90a898 !important;
}

body.dark-mode .detail-grid span {
  color: #f1f5fa !important;
}

body.dark-mode .payment-method {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
  color: #f1f5fa !important;
}

body.dark-mode .payment-method:hover {
  background: rgba(7, 203, 145, 0.08) !important;
  border-color: rgba(7, 203, 145, 0.45) !important;
}

body.dark-mode .payment-method.selected {
  background: rgba(7, 203, 145, 0.12) !important;
  border-color: #07cb91 !important;
}

body.dark-mode .payment-method .method-info h4 {
  color: #f1f5fa !important;
}

body.dark-mode .payment-method .method-info p {
  color: #7a9a87 !important;
}

body.dark-mode .note {
  background: rgba(245, 158, 11, 0.08) !important;
  border-left-color: #f59e0b !important;
}

body.dark-mode .note div,
body.dark-mode .note p {
  color: #fbbf24 !important;
}

body.dark-mode .note strong {
  color: #fcd34d !important;
}

body.dark-mode .request-btn {
  background: rgba(7, 203, 145, 0.12);
  border: 1px solid rgba(7, 203, 145, 0.35);
  color: #07cb91;
  box-shadow: 0 4px 12px rgba(7, 203, 145, 0.15);
}

body.dark-mode .request-btn:hover {
  background: rgba(7, 203, 145, 0.22);
  box-shadow: 0 6px 20px rgba(7, 203, 145, 0.25);
}

body.dark-mode .section-title:not(.modal-body .section-title) {
  color: #f1f5fa !important;
}

body.dark-mode .payout-table tbody tr:hover {
  background: rgba(7, 203, 145, 0.04) !important;
}

body.dark-mode .modal-body::-webkit-scrollbar-track {
  background: #0a1a12;
}

body.dark-mode .modal-body::-webkit-scrollbar-thumb {
  background: rgba(7, 203, 145, 0.4);
}

/* ── 35. Ad Requests page ── */

/* Main content area */
body.dark-mode .main-content {
  background: linear-gradient(226deg, #0a1a12 0%, #050e08 100%) !important;
}

/* Stat cards */
body.dark-mode .campaign-stat-card {
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(7, 203, 145, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .campaign-stat-card .stat-value {
  color: #07cb91 !important;
}

body.dark-mode .campaign-stat-card .stat-label {
  color: #7a9a87 !important;
}

body.dark-mode .campaign-stat-card .stat-change {
  color: #4a6855 !important;
}

/* Tabs */
body.dark-mode .tabs-container {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(7, 203, 145, 0.12) !important;
}

body.dark-mode .tab-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.25) !important;
  color: #7a9a87 !important;
}

body.dark-mode .tab-btn:hover {
  background: rgba(7, 203, 145, 0.1) !important;
  border-color: rgba(7, 203, 145, 0.5) !important;
  color: #34d399 !important;
}

body.dark-mode .tab-btn.active {
  background: rgba(7, 203, 145, 0.18) !important;
  border-color: #07cb91 !important;
  color: #07cb91 !important;
  box-shadow: 0 4px 12px rgba(7, 203, 145, 0.15) !important;
}

/* Filter bar */
body.dark-mode .filter-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .search-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .dropdown-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #c0cfca !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .dropdown-btn:hover {
  background: rgba(7, 203, 145, 0.08) !important;
  border-color: rgba(7, 203, 145, 0.3) !important;
  color: #07cb91 !important;
}

/* Campaigns section wrapper */
body.dark-mode .campaigns-section {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(7, 203, 145, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .section-header h2 {
  color: #f1f5fa !important;
}

/* Campaign cards */
body.dark-mode .campaign-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(7, 203, 145, 0.2) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .campaign-card:hover {
  border-color: rgba(7, 203, 145, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .campaign-meta {
  color: #7a9a87 !important;
}

body.dark-mode .campaign-meta i {
  color: #4a6855 !important;
}

body.dark-mode .highlight {
 -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #00ff16 !important;
}


/* Campaign details inner grid */
body.dark-mode .campaign-details {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .detail-label {
  color: #7a9a87 !important;
}

body.dark-mode .detail-value {
  color: #f1f5fa !important;
}

body.dark-mode .detail-value.highlight {
  color: #07cb91 !important;
}

/* Action buttons */
body.dark-mode .btn-secondary {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #c0cfca !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .btn-secondary:hover:not(:disabled) {
  background: rgba(7, 203, 145, 0.1) !important;
  border-color: rgba(7, 203, 145, 0.4) !important;
  color: #07cb91 !important;
}

body.dark-mode .btn-disabled {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #4a6855 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  opacity: 0.65;
  cursor: not-allowed;
}

/* Status badges */
body.dark-mode .status-pending {
  background: #1a1a1a !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .status-approved {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

body.dark-mode .status-active {
  background: rgba(0, 66, 255, 0.2) !important;
  color: #93c5fd !important;
}

body.dark-mode .status-rejected {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

body.dark-mode .status-paused {
  background: rgba(139, 92, 246, 0.15) !important;
  color: #c4b5fd !important;
}

body.dark-mode .status-inactive {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94a3b8 !important;
}

body.dark-mode .status-scheduled {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
}

/* Screen items & creative items */
body.dark-mode .screen-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .screen-item span:nth-child(2) {
  color: #f1f5fa !important;
}

body.dark-mode .screen-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

body.dark-mode .creative-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .creative-thumbnail {
  background: rgba(7, 203, 145, 0.1) !important;
  color: #07cb91 !important;
}

body.dark-mode .creative-name {
  color: #f1f5fa !important;
}

body.dark-mode .creative-meta {
  color: #7a9a87 !important;
}

/* Campaign description */
body.dark-mode .campaign-description {
  background: rgba(255, 255, 255, 0.05) !important;
  border-left-color: #07cb91 !important;
  color: #c0cfca !important;
}

/* Modal campaign header */
body.dark-mode .modal-campaign-header {
  border-bottom-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .modal-campaign-title {
  color: #07cb91 !important;
}

body.dark-mode #modal-campaign-id {
  color: #7a9a87 !important;
}

body.dark-mode .info-value {
  color: #f1f5fa !important;
}

body.dark-mode .info-value.highlight {
  color: #07cb91 !important;
}

/* Analytics table */
body.dark-mode .analytics-section {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(7, 203, 145, 0.12) !important;
}

body.dark-mode .analytics-table thead tr {
  background: rgba(7, 203, 145, 0.05) !important;
}

body.dark-mode .analytics-table tbody tr {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode .analytics-table tbody tr:hover {
  background: rgba(7, 203, 145, 0.05) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Auto-accept toggle label */
body.dark-mode .toggle-label {
  color: #c0cfca !important;
}

/* ── 38. Profile page — comprehensive ── */

/* Main profile card containers */
body.dark-mode .card {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.15) !important;
}

body.dark-mode .card h2,
body.dark-mode .card h3 {
  color: #f1f5fa !important;
}

body.dark-mode .card h2 i {
  color: #07cb91 !important;
}

/* Info alert banners */
body.dark-mode .info-alert {
  background: rgba(7, 203, 145, 0.08) !important;
  border-left-color: #07cb91 !important;
}

body.dark-mode .info-alert i {
  color: #07cb91 !important;
}

body.dark-mode .info-alert-title {
  color: #f1f5fa !important;
}

body.dark-mode .info-alert-text {
  color: #a8c5b5 !important;
}

/* Logo frame (Store Logo tab) */
body.dark-mode .logo-frame {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.25) !important;
}

body.dark-mode .logo-frame.empty {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(7, 203, 145, 0.15) !important;
}

/* Dropzone (Upload New Logo) */
body.dark-mode .dropzone {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(7, 203, 145, 0.25) !important;
}

body.dark-mode .dropzone.drag-over {
  background: rgba(7, 203, 145, 0.08) !important;
  border-color: #07cb91 !important;
}

body.dark-mode .dropzone-content h4 {
  color: #f1f5fa !important;
}

/* Upload spec pills (PNG, JPG, SVG / Max 5MB / Square format) */
body.dark-mode .upload-specs span {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
  color: #a8c5b5 !important;
}

/* Preview container after logo chosen */
body.dark-mode .preview-image-container {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Section headers inside logo tab */
body.dark-mode .current-logo-section h3,
body.dark-mode .upload-logo-section h3 {
  color: #f1f5fa !important;
}

body.dark-mode .current-logo-section h3 i,
body.dark-mode .upload-logo-section h3 i {
  color: #07cb91 !important;
}

/* Stat items (Security / account stats) */
body.dark-mode .stat-item {
  background: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .stat-item h3 {
  color: #f1f5fa !important;
}

body.dark-mode .stat-item p {
  color: #8ba897 !important;
}

/* File upload area */
body.dark-mode .file-upload-area {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .file-upload-area:hover {
  background: rgba(7, 203, 145, 0.06) !important;
  border-color: #07cb91 !important;
}

/* Payment / payout cards */
body.dark-mode .payment-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .payment-card:hover {
  background: rgba(7, 203, 145, 0.08) !important;
  border-color: rgba(7, 203, 145, 0.5) !important;
}

body.dark-mode .payment-card.active {
  background: rgba(7, 203, 145, 0.1) !important;
  border-color: #07cb91 !important;
}

body.dark-mode .payment-card-header h3 {
  color: #f1f5fa !important;
}

body.dark-mode .payment-description {
  color: #8ba897 !important;
}

body.dark-mode .feature-item {
  color: #a8c5b5 !important;
}

/* Payment method status badges */
body.dark-mode .badge-status.connected {
  background: rgba(7, 203, 145, 0.15) !important;
  color: #34d399 !important;
}

body.dark-mode .badge-status.not-connected {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

/* Payment info box (green tinted) */
body.dark-mode .payment-info-box {
  background: rgba(7, 203, 145, 0.08) !important;
  border-color: rgba(7, 203, 145, 0.25) !important;
  color: #34d399 !important;
}

/* Payment method card (Security tab) */
body.dark-mode .payment-method-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .payment-method-card:hover,
body.dark-mode .payment-method-card.selected {
  background: rgba(7, 203, 145, 0.08) !important;
  border-color: #07cb91 !important;
}

/* "How Payouts Work" step rows (inline-styled — class added in PHP) */
body.dark-mode .payout-step-row {
  background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .payout-step-row h4 {
  color: #f1f5fa !important;
}

body.dark-mode .payout-step-row p {
  color: #8ba897 !important;
}

/* Team stat cards (inline-styled — class added in PHP) */
body.dark-mode .team-stat-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .team-stat-number {
  color: #07cb91 !important;
}

body.dark-mode .team-stat-label {
  color: #a8c5b5 !important;
}

/* Onboarding wizard (Host Settings tab) */
body.dark-mode .onboarding-wrapper-profile .progress-steps {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.15) !important;
}

body.dark-mode .step-circle {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #8ba897 !important;
  border-color: transparent !important;
}

body.dark-mode .progress-step.active .step-circle {
  background: #07cb91 !important;
  color: #050e08 !important;
  border-color: #07cb91 !important;
}

body.dark-mode .progress-step.completed .step-circle {
  background: rgba(7, 203, 145, 0.3) !important;
  color: #07cb91 !important;
  border-color: #07cb91 !important;
}

body.dark-mode .step-label {
  color: #7a9a87 !important;
}

body.dark-mode .progress-step.active .step-label {
  color: #07cb91 !important;
}

body.dark-mode .progress-line {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .onboarding-step-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(7, 203, 145, 0.15) !important;
}

body.dark-mode .step-card-header {
  border-bottom-color: rgba(7, 203, 145, 0.15) !important;
}

body.dark-mode .step-card-header h2 {
  color: #f1f5fa !important;
}

body.dark-mode .step-card-header p {
  color: #8ba897 !important;
}

/* Danger zone — pink/red tinted box */
body.dark-mode .danger-zone {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode .danger-zone h3 {
  color: #fca5a5 !important;
}

body.dark-mode .danger-zone p {
  color: #f87171 !important;
}

/* Requirements card (Format / Size / Dimensions info box — light blue gradient) */
body.dark-mode .requirements-card {
  background: rgba(7, 203, 145, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .requirements-card h4 {
  color: #07cb91 !important;
}

body.dark-mode .requirements-list li {
  color: #a8c5b5 !important;
}

body.dark-mode .requirements-list strong {
  color: #f1f5fa !important;
}

body.dark-mode .requirements-list i {
  color: #07cb91 !important;
}

/* Logo filename row (file info bar with blue icon) */
body.dark-mode .logo-filename {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #c0cfca !important;
}

body.dark-mode .logo-filename i {
  color: #07cb91 !important;
}

/* Banner color picker */
body.dark-mode .color-input {
  border-color: rgba(7, 203, 145, 0.35) !important;
  background: #0a1a12 !important;
  padding: 2px !important;
  outline: none !important;
}

body.dark-mode .color-value {
  color: #c0cfca !important;
}

body.dark-mode .color-preset.active {
  box-shadow: 0 0 0 2px #0a1a12, 0 0 0 4px #07cb91 !important;
  border-color: #07cb91 !important;
}

body.dark-mode .color-preset:hover {
  border-color: #07cb91 !important;
}

/* ── 37. Gallery / Media page ── */

/* Main gallery container */
body.dark-mode .gallery-container {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(7, 203, 145, 0.2) !important;
}

/* Tab bar — hardcoded #fafbfc background */
body.dark-mode .gallery-tabs {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(7, 203, 145, 0.15) !important;
}

/* Inactive tab text */
body.dark-mode .gallery-tab {
  color: #7a9a87 !important;
}

/* Active tab — hardcoded color: black */
body.dark-mode .gallery-tab.active {
  color: #07cb91 !important;
  border-bottom-color: #07cb91 !important;
}

/* Tab count badge */
body.dark-mode .gallery-tab .count {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #8ba897 !important;
}

body.dark-mode .gallery-tab.active .count {
  background: rgba(7, 203, 145, 0.15) !important;
  color: #07cb91 !important;
}

/* Toolbar border */
body.dark-mode .gallery-toolbar {
  border-bottom-color: rgba(7, 203, 145, 0.1) !important;
}

/* Search box — hardcoded #f8fafc */
body.dark-mode .search-box {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .search-box input {
  color: #f1f5fa !important;
}

body.dark-mode .search-box input::placeholder {
  color: #4a6855 !important;
}

/* Filter dropdown — hardcoded #f8fafc */
body.dark-mode .filter-dropdown {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
  color: #c0cfca !important;
}

/* View toggle buttons */
body.dark-mode .view-toggle {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(7, 203, 145, 0.2) !important;
  color: #7a9a87 !important;
}

body.dark-mode .view-toggle:hover,
body.dark-mode .view-toggle.active {
  background: rgba(7, 203, 145, 0.15) !important;
  border-color: #07cb91 !important;
  color: #07cb91 !important;
}

/* Media action buttons (View / Download / Delete) — hardcoded #e2e2e2 */
body.dark-mode .media-action {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #a8c5b5 !important;
}

body.dark-mode .media-action:hover {
  background: rgba(7, 203, 145, 0.2) !important;
  color: #ffffff !important;
}

body.dark-mode .media-action.delete:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
}

body.dark-mode .media-actions {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* Media info text */
body.dark-mode .media-name {
  color: #f1f5fa !important;
}

/* Storage stat cards on gallery page */
body.dark-mode .stats-row .stat-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(7, 203, 145, 0.2) !important;
}

body.dark-mode .stats-row .stat-info h3 {
  color: #f1f5fa !important;
}

/* ── 36. Dashboard Page ── */

/* Remove the white radial-gradient "cloud" arc visible on stat cards */
body.dark-mode .stat-card::after {
  opacity: 0;
}

/* Stat card — dark glass surface */
body.dark-mode .stat-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(7, 203, 145, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* Stat number — black background-clip made numbers invisible; use green gradient */
body.dark-mode .stat-number {
  background: linear-gradient(135deg, #07cb91 0%, #c8ffe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.dark-mode .stat-label {
  color: #8ba897 !important;
}

/* Stat icon — black on white is jarring in dark mode */
body.dark-mode .stat-card .stat-icon {
  background: rgba(7, 203, 145, 0.1) !important;
  color: #07cb91 !important;
}

/* Hero section text — background: black clip makes text invisible in dark mode */
body.dark-mode .hero-greeting {
  background: linear-gradient(135deg, #07cb91 0%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.dark-mode .hero-message {
  color: #c0cfca !important;
}

body.dark-mode .hero-description {
  color: #7a9a87 !important;
}

/* Quick actions section wrapper */
body.dark-mode .quick-actions-section {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(7, 203, 145, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .quick-actions-section h2 {
  color: #f1f5fa !important;
}

/* Quick action cards — nth-child overrides hardcoded background: white */
body.dark-mode .quick-action-card,
body.dark-mode .quick-action-card:nth-child(1),
body.dark-mode .quick-action-card:nth-child(2),
body.dark-mode .quick-action-card:nth-child(3) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(7, 203, 145, 0.2) !important;
  color: #c0cfca !important;
}

body.dark-mode .quick-action-card i,
body.dark-mode .quick-action-card span {
  color: #07cb91 !important;
}

body.dark-mode .quick-action-card:hover {
  background: rgba(7, 203, 145, 0.12) !important;
  border-color: rgba(7, 203, 145, 0.4) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .quick-action-card:hover i,
body.dark-mode .quick-action-card:hover span {
  color: #ffffff !important;
}

/* Ad requests section */
body.dark-mode .ad-requests-section {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(7, 203, 145, 0.12) !important;
}

body.dark-mode .ad-requests-section h2 {
  color: #f1f5fa !important;
}

/* Broad tr:nth-child(even) { background: #fafafa } in dashboard.css turns even rows white */
body.dark-mode tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Thead inline style (background:#f1f5f9) — !important overrides inline styles */
body.dark-mode .ad-requests-table thead tr {
  background: rgba(7, 203, 145, 0.08) !important;
}

body.dark-mode .ad-requests-table thead th {
  color: #a8c5b5 !important;
}