/*
 * SudoCG complete dark-theme layer.
 * Loaded after page-level styles through nav.ejs, so it also covers legacy
 * templates that still have hard-coded light colors or inline white panels.
 */
html.theme-dark {
  color-scheme: dark;
  --dark-canvas: #0b1220;
  --dark-surface: #111827;
  --dark-surface-2: #0f172a;
  --dark-surface-3: #172036;
  --dark-border: #263449;
  --dark-text: #e5edf8;
  --dark-muted: #a8b6ca;
  --dark-link: #9cbcff;
}

html.theme-dark body,
html.theme-dark #app,
html.theme-dark .full-width-container,
html.theme-dark .page-container,
html.theme-dark .content-wrap,
html.theme-dark .wallet-container,
html.theme-dark .billing-wrap,
html.theme-dark .profile-page,
html.theme-dark .feed-page,
html.theme-dark .help-shell,
html.theme-dark .tos-container,
html.theme-dark .editor-wrapper,
html.theme-dark .chat-page {
  background: var(--dark-canvas) !important;
  color: var(--dark-text) !important;
}

/* Generic surfaces shared by legacy EJS pages. */
html.theme-dark .card,
html.theme-dark .panel,
html.theme-dark .section-card,
html.theme-dark .profile-card,
html.theme-dark .settings-card,
html.theme-dark .wallet-section,
html.theme-dark .asset-card,
html.theme-dark .wallet-tips,
html.theme-dark .checkin-stat,
html.theme-dark .billing-card,
html.theme-dark .conn-card,
html.theme-dark .access-card,
html.theme-dark .access-panel,
html.theme-dark .forgot-card,
html.theme-dark .login-card,
html.theme-dark .register-card,
html.theme-dark .recovery-panel,
html.theme-dark .recovery-option,
html.theme-dark .help-card,
html.theme-dark .help-empty,
html.theme-dark .redeem-card,
html.theme-dark .redeem-section,
html.theme-dark .search-card,
html.theme-dark .search-empty,
html.theme-dark .tos-card,
html.theme-dark .tos-panel,
html.theme-dark .preview-main,
html.theme-dark .preview-card,
html.theme-dark .preview-sidebar,
html.theme-dark .editor-toolbar,
html.theme-dark .module-item,
html.theme-dark .modal-content,
html.theme-dark .cp-dialog,
html.theme-dark .dropdown-menu,
html.theme-dark .sidebar-left,
html.theme-dark .sidebar-right,
html.theme-dark .sidebar-card,
html.theme-dark .feed-card,
html.theme-dark .feed-empty,
html.theme-dark .feed-hero,
html.theme-dark .feed-stat,
html.theme-dark .page-header,
html.theme-dark .post-cover-wrap,
html.theme-dark .post-tip-history-panel,
html.theme-dark .post-tip-history-item,
html.theme-dark .author-card,
html.theme-dark .tip-panel,
html.theme-dark .post-block-vote,
html.theme-dark .post-block-file,
html.theme-dark .post-block-separator,
html.theme-dark .post-block-table th,
html.theme-dark .post-block-table td,
html.theme-dark .vote-option,
html.theme-dark .comment-thread,
html.theme-dark .comment-children,
html.theme-dark .comment-emoji-panel,
html.theme-dark .chat-layout,
html.theme-dark .chat-friend-list,
html.theme-dark .chat-conversation,
html.theme-dark .chat-conv-header,
html.theme-dark .chat-input-row,
html.theme-dark .chat-composer,
html.theme-dark .chat-emoji-panel,
html.theme-dark .notification-card,
html.theme-dark .notification-item {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28) !important;
}

html.theme-dark .wallet-tips,
html.theme-dark .checkin-stat,
html.theme-dark .billing-filter a,
html.theme-dark .billing-table th,
html.theme-dark .profile-meta-item,
html.theme-dark .edit-note,
html.theme-dark .invite-link-value,
html.theme-dark .invite-stat,
html.theme-dark .cp-secnote,
html.theme-dark .tag-input-container,
html.theme-dark .tag-suggestions,
html.theme-dark .cover-preview,
html.theme-dark .image-preview-area,
html.theme-dark .post-content-teaser,
html.theme-dark .post-block-code,
html.theme-dark .chat-msgs,
html.theme-dark .chat-message-bubble--other,
html.theme-dark .chat-message-empty,
html.theme-dark .chat-emoji-btn,
html.theme-dark .comment-emoji-btn,
html.theme-dark .notification-card.unread,
html.theme-dark .notification-target-pill,
html.theme-dark .post-block-file--locked,
html.theme-dark .post-block-file-lock,
html.theme-dark .post-block-table th,
html.theme-dark .block-access,
html.theme-dark .summary-item,
html.theme-dark .channel-card,
html.theme-dark .notice {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Legacy inline light panels: remove the remaining white slabs without
   changing brand/action buttons and media themselves. */
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background:white"],
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background:#f8fafc"],
html.theme-dark [style*="background: #f8fafc"],
html.theme-dark [style*="background:#fafcff"],
html.theme-dark [style*="background: #fafcff"],
html.theme-dark [style*="background:#f5f5f5"],
html.theme-dark [style*="background: #f5f5f5"],
html.theme-dark .dropdown-menu [style*="background:#fff"],
html.theme-dark .dropdown-menu [style*="background: #fff"],
html.theme-dark .dropdown-menu [style*="background:white"] {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark [style*="background:linear-gradient"][style*="#fff"],
html.theme-dark [style*="background: linear-gradient"][style*="#fff"] {
  background: linear-gradient(145deg, var(--dark-surface), var(--dark-surface-2)) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark .feed-hero h1,
html.theme-dark .feed-toolbar-label,
html.theme-dark .billing-head h1,
html.theme-dark .profile-info h2,
html.theme-dark .wallet-header h1,
html.theme-dark .post-detail-layout,
html.theme-dark .post-detail-layout strong,
html.theme-dark .post-block-text,
html.theme-dark .post-block-title,
html.theme-dark .post-block-vote h4,
html.theme-dark .post-block-table,
html.theme-dark .billing-table,
html.theme-dark .billing-table td,
html.theme-dark .billing-desc,
html.theme-dark .profile-meta-item,
html.theme-dark .edit-note,
html.theme-dark .invite-rules,
html.theme-dark .help-card,
html.theme-dark .help-card *:not(a),
html.theme-dark .tos-card,
html.theme-dark .tos-card p,
html.theme-dark .tos-card li {
  color: var(--dark-text) !important;
}

html.theme-dark p,
html.theme-dark .muted,
html.theme-dark small,
html.theme-dark .billing-head p,
html.theme-dark .asset-meta,
html.theme-dark .wallet-tips,
html.theme-dark .profile-meta-item span,
html.theme-dark .profile-meta-item strong,
html.theme-dark .feed-hero p,
html.theme-dark .feed-stat .label,
html.theme-dark .feed-toolbar-note,
html.theme-dark .feed-card-footer,
html.theme-dark .post-content-teaser,
html.theme-dark .post-block-image-caption,
html.theme-dark .post-block-compare-caption {
  color: var(--dark-muted) !important;
}

html.theme-dark a:not(.btn):not(.nav-brand):not(.nav-menu a) {
  color: var(--dark-link);
}

html.theme-dark input:not([type="checkbox"]):not([type="radio"]),
html.theme-dark textarea,
html.theme-dark select,
html.theme-dark option,
html.theme-dark .edit-field input:not([type="checkbox"]),
html.theme-dark .cp-field input,
html.theme-dark .form-group input,
html.theme-dark .form-group textarea,
html.theme-dark .form-group select {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark input:disabled,
html.theme-dark button:disabled {
  background: #1f2937 !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

html.theme-dark table,
html.theme-dark tr,
html.theme-dark td,
html.theme-dark th {
  border-color: var(--dark-border) !important;
}

html.theme-dark .billing-filter a:not(.active),
html.theme-dark .feed-tab:not(.is-active),
html.theme-dark .home-sort-tab:not(.is-active),
html.theme-dark .pagination a,
html.theme-dark .pagination span,
html.theme-dark .btn-secondary,
html.theme-dark .btn-ghost,
html.theme-dark .toolbar-btn,
html.theme-dark .module-action-btn,
html.theme-dark .comment-action-btn {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .post-block-image,
html.theme-dark .post-block-compare .post-block-image,
html.theme-dark .preview-cover,
html.theme-dark .block-image,
html.theme-dark .cover-preview,
html.theme-dark .image-preview-area,
html.theme-dark .video-preview {
  background-color: var(--dark-surface-2) !important;
}

html.theme-dark footer,
html.theme-dark .footer,
html.theme-dark .site-footer {
  background: #080d17 !important;
  color: var(--dark-muted) !important;
  border-color: var(--dark-border) !important;
}

/* Admin React has its own stylesheet and many inline pale panels. */
html.theme-dark .admin-shell,
html.theme-dark .admin-sidebar,
html.theme-dark .admin-main,
html.theme-dark .admin-main .panel,
html.theme-dark .admin-main .section-card,
html.theme-dark .admin-main .stat-card,
html.theme-dark .admin-main .alert,
html.theme-dark .admin-main table,
html.theme-dark .admin-main th,
html.theme-dark .admin-main td,
html.theme-dark .admin-main .empty {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .admin-sidebar h3,
html.theme-dark .admin-sidebar-menu a,
html.theme-dark .panel-header h2,
html.theme-dark .admin-main label,
html.theme-dark .admin-main strong,
html.theme-dark .admin-main h1,
html.theme-dark .admin-main h2,
html.theme-dark .admin-main h3,
html.theme-dark .admin-main h4 {
  color: var(--dark-text) !important;
}

html.theme-dark .admin-sidebar-menu a:hover,
html.theme-dark .admin-sidebar-menu a.active,
html.theme-dark .admin-main .btn-ghost {
  background: #1e293b !important;
  color: #b9c9ff !important;
}

html.theme-dark .admin-main [style*="background"] {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.theme-dark .admin-main input,
html.theme-dark .admin-main select,
html.theme-dark .admin-main textarea {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}