/* ==========================================================================
   Pyramid Master Dark Theme System
   ========================================================================== */

:root {
  --bg-app-light: #f9fafb;
  --bg-surface-light: #ffffff;
  --text-primary-light: #111827;
  --text-secondary-light: #6b7280;
  --border-light: #e5e7eb;

  --bg-app-dark: #090f1e;
  --bg-surface-dark: #111a2e;
  --bg-surface-dark-elevated: #17243e;
  --bg-surface-dark-hover: #1c2b4a;
  --text-primary-dark: #f8fafc;
  --text-secondary-dark: #94a3b8;
  --border-dark: rgba(255, 255, 255, 0.1);
  --border-dark-strong: rgba(255, 255, 255, 0.2);
}

html.dark,
html[data-bs-theme="dark"] {
  color-scheme: dark;
}

html.dark body,
html[data-bs-theme="dark"] body {
  background-color: var(--bg-app-dark) !important;
  color: var(--text-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   1. Tailwind Background Overrides in Dark Mode
   -------------------------------------------------------------------------- */
html.dark .bg-white,
html[data-bs-theme="dark"] .bg-white {
  background-color: var(--bg-surface-dark) !important;
}

html.dark .bg-slate-50,
html[data-bs-theme="dark"] .bg-slate-50,
html.dark .bg-gray-50,
html[data-bs-theme="dark"] .bg-gray-50,
html.dark .bg-gray-100,
html[data-bs-theme="dark"] .bg-gray-100,
html.dark .bg-slate-100,
html[data-bs-theme="dark"] .bg-slate-100,
html.dark .bg-zinc-50,
html[data-bs-theme="dark"] .bg-zinc-50,
html.dark .bg-neutral-50,
html[data-bs-theme="dark"] .bg-neutral-50,
html.dark .bg-zinc-100,
html[data-bs-theme="dark"] .bg-zinc-100,
html.dark .bg-neutral-100,
html[data-bs-theme="dark"] .bg-neutral-100 {
  background-color: var(--bg-surface-dark-elevated) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-gray-200,
html[data-bs-theme="dark"] .bg-gray-200,
html.dark .bg-slate-200,
html[data-bs-theme="dark"] .bg-slate-200,
html.dark .bg-gray-300,
html[data-bs-theme="dark"] .bg-gray-300,
html.dark .bg-zinc-200,
html[data-bs-theme="dark"] .bg-zinc-200,
html.dark .bg-neutral-200,
html[data-bs-theme="dark"] .bg-neutral-200 {
  background-color: var(--bg-surface-dark-hover) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Translucent Backgrounds */
html.dark .bg-white\/80,
html.dark .bg-white\/90,
html.dark .bg-white\/70,
html.dark .bg-white\/60,
html.dark .bg-white\/50,
html.dark .bg-slate-50\/80,
html.dark .bg-gray-50\/80,
html.dark .bg-gray-100\/50,
html.dark .bg-slate-100\/50,
html[data-bs-theme="dark"] .bg-white\/80,
html[data-bs-theme="dark"] .bg-white\/90,
html[data-bs-theme="dark"] .bg-white\/70,
html[data-bs-theme="dark"] .bg-white\/60,
html[data-bs-theme="dark"] .bg-white\/50,
html[data-bs-theme="dark"] .bg-slate-50\/80,
html[data-bs-theme="dark"] .bg-gray-50\/80 {
  background-color: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Translucent Light Accents (e.g. Hero badging) */
html.dark .bg-white\/10,
html.dark .bg-white\/15,
html.dark .bg-white\/20,
html[data-bs-theme="dark"] .bg-white\/10,
html[data-bs-theme="dark"] .bg-white\/15,
html[data-bs-theme="dark"] .bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Page Body Gradient Override */
html.dark body.bg-gradient-to-br,
html.dark body.bg-gradient-to-bl,
html.dark body.bg-gradient-to-r,
html.dark body.bg-gradient-to-l,
html[data-bs-theme="dark"] body.bg-gradient-to-br,
html[data-bs-theme="dark"] body.bg-gradient-to-bl,
html[data-bs-theme="dark"] body.bg-gradient-to-r,
html[data-bs-theme="dark"] body.bg-gradient-to-l {
  background-image: none !important;
  background-color: var(--bg-app-dark) !important;
}

/* Hero Gradient Override */
html.dark #hero .bg-gradient-to-bl,
html[data-bs-theme="dark"] #hero .bg-gradient-to-bl {
  background: linear-gradient(135deg, #090f1e 0%, #111c3b 50%, #0c142b 100%) !important;
}

/* Feature/Icon Box Tints */
html.dark .bg-pyramid-50, html.dark .bg-pyramid-100,
html.dark .bg-blue-50, html.dark .bg-blue-100,
html.dark .bg-indigo-50, html.dark .bg-indigo-100 {
  background-color: rgba(59, 130, 246, 0.18) !important;
}

html.dark .bg-green-50, html.dark .bg-green-100,
html.dark .bg-emerald-50, html.dark .bg-emerald-100 {
  background-color: rgba(34, 197, 94, 0.18) !important;
}

html.dark .bg-amber-50, html.dark .bg-amber-100,
html.dark .bg-yellow-50, html.dark .bg-yellow-100 {
  background-color: rgba(245, 158, 11, 0.18) !important;
}

html.dark .bg-rose-50, html.dark .bg-rose-100,
html.dark .bg-red-50, html.dark .bg-red-100 {
  background-color: rgba(244, 63, 94, 0.18) !important;
}

html.dark .bg-purple-50, html.dark .bg-purple-100,
html.dark .bg-violet-50, html.dark .bg-violet-100 {
  background-color: rgba(168, 85, 247, 0.18) !important;
}

/* Hover Backgrounds */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-gray-200:hover {
  background-color: var(--bg-surface-dark-hover) !important;
}

/* --------------------------------------------------------------------------
   2. Text Color Overrides
   -------------------------------------------------------------------------- */
html.dark .text-gray-900, html[data-bs-theme="dark"] .text-gray-900,
html.dark .text-slate-900, html[data-bs-theme="dark"] .text-slate-900,
html.dark .text-gray-800, html[data-bs-theme="dark"] .text-gray-800,
html.dark .text-slate-800, html[data-bs-theme="dark"] .text-slate-800 {
  color: var(--text-primary-dark) !important;
}

html.dark .text-gray-700, html[data-bs-theme="dark"] .text-gray-700,
html.dark .text-slate-700, html[data-bs-theme="dark"] .text-slate-700,
html.dark .text-gray-600, html[data-bs-theme="dark"] .text-gray-600,
html.dark .text-slate-600, html[data-bs-theme="dark"] .text-slate-600 {
  color: #cbd5e1 !important;
}

html.dark .text-gray-500, html[data-bs-theme="dark"] .text-gray-500,
html.dark .text-slate-500, html[data-bs-theme="dark"] .text-slate-500,
html.dark .text-gray-400, html[data-bs-theme="dark"] .text-gray-400,
html.dark .text-slate-400, html[data-bs-theme="dark"] .text-slate-400 {
  color: var(--text-secondary-dark) !important;
}

html.dark .text-gray-300, html[data-bs-theme="dark"] .text-gray-300,
html.dark .text-slate-300, html[data-bs-theme="dark"] .text-slate-300,
html.dark .text-gray-200, html[data-bs-theme="dark"] .text-gray-200,
html.dark .text-slate-200, html[data-bs-theme="dark"] .text-slate-200 {
  color: #e2e8f0 !important;
}

/* Brand Text Highlights */
html.dark .text-pyramid-600, html.dark .text-pyramid-700,
html.dark .text-blue-600, html.dark .text-indigo-600 {
  color: #60a5fa !important;
}

html.dark .text-green-600, html.dark .text-emerald-600 {
  color: #4ade80 !important;
}

html.dark .text-amber-600, html.dark .text-yellow-600 {
  color: #fbbf24 !important;
}

html.dark .text-rose-600, html.dark .text-red-600 {
  color: #f87171 !important;
}

html.dark .text-purple-600, html.dark .text-violet-600 {
  color: #c084fc !important;
}

/* --------------------------------------------------------------------------
   3. Borders & Dividers
   -------------------------------------------------------------------------- */
html.dark .border,
html.dark .border-gray-50, html.dark .border-slate-50,
html.dark .border-gray-100, html.dark .border-slate-100,
html.dark .border-gray-200, html.dark .border-slate-200,
html.dark .border-gray-300, html.dark .border-slate-300,
html.dark .divider {
  border-color: var(--border-dark) !important;
}

html.dark .hover\:border-pyramid-200:hover,
html.dark .hover\:border-green-200:hover,
html.dark .hover\:border-rose-200:hover,
html.dark .hover\:border-amber-200:hover,
html.dark .hover\:border-purple-200:hover {
  border-color: var(--border-dark-strong) !important;
}

/* --------------------------------------------------------------------------
   4. Cards, Panels & Glassmorphic Containers
   -------------------------------------------------------------------------- */
html.dark .glass-card {
  background-color: rgba(17, 26, 46, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  color: var(--text-primary-dark) !important;
}

html.dark .card,
html.dark .panel-index,
html.dark .panel-result,
html.dark .panel-field-selector,
html.dark .panel-table {
  background-color: var(--bg-surface-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-primary-dark) !important;
}

/* Legacy Sidebar */
html.dark .side-bar {
  background-color: #070d1a !important;
  border-left: 1px solid var(--border-dark) !important;
}

/* --------------------------------------------------------------------------
   5. Header & Navigation System
   -------------------------------------------------------------------------- */
html.dark #topnav {
  background-color: rgba(9, 15, 30, 0.9) !important;
  border-bottom-color: var(--border-dark) !important;
  backdrop-filter: blur(12px);
}

html.dark .mega-nav-label,
html.dark .mega-nav-btn {
  color: #e2e8f0 !important;
}

html.dark .mega-nav-label:hover,
html.dark .mega-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #60a5fa !important;
}

html.dark .mega-nav-panel-inner,
html.dark .nav-dropdown,
html.dark #userDropdown,
html.dark .mobile-menu {
  background-color: var(--bg-surface-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6) !important;
  color: var(--text-primary-dark) !important;
}

html.dark .mega-cat-item {
  color: #cbd5e1 !important;
}

html.dark .mega-cat-item:hover {
  background-color: var(--bg-surface-dark-hover) !important;
  color: #ffffff !important;
}

html.dark .mega-promo {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border-dark) !important;
}

html.dark .mega-bottom-link {
  color: #94a3b8 !important;
  border-top-color: var(--border-dark) !important;
}

html.dark .mega-bottom-link:hover {
  color: #60a5fa !important;
}

html.dark .mobile-menu-header {
  border-bottom-color: var(--border-dark) !important;
}

/* --------------------------------------------------------------------------
   6. Form Controls, Inputs & Selects
   -------------------------------------------------------------------------- */
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="search"],
html.dark textarea,
html.dark select,
html.dark .input-field,
html.dark .form-control,
html.dark .form-select,
html.dark .modern-select {
  background-color: var(--bg-surface-dark-elevated) !important;
  color: var(--text-primary-dark) !important;
  border: 1px solid #2b3e66 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
html.dark .input-field::placeholder,
html.dark .form-control::placeholder {
  color: #64748b !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus,
html.dark .input-field:focus,
html.dark .form-control:focus,
html.dark .modern-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
  background-color: var(--bg-surface-dark-elevated) !important;
}

html.dark option {
  background-color: var(--bg-surface-dark) !important;
  color: var(--text-primary-dark) !important;
}

html.dark label, html.dark .form-label {
  color: #e2e8f0 !important;
}

/* --------------------------------------------------------------------------
   7. Tables & Data Display
   -------------------------------------------------------------------------- */
html.dark table,
html.dark .table {
  color: var(--text-primary-dark) !important;
  border-color: var(--border-dark) !important;
}

html.dark th,
html.dark td,
html.dark .table th,
html.dark .table td {
  background-color: var(--bg-surface-dark) !important;
  color: var(--text-primary-dark) !important;
  border-color: var(--border-dark) !important;
}

html.dark th, html.dark thead th {
  background-color: var(--bg-surface-dark-elevated) !important;
  color: #ffffff !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .table-hover > tbody > tr:hover > * {
  background-color: var(--bg-surface-dark-hover) !important;
}

/* --------------------------------------------------------------------------
   8. Admin Panel Layout (/panel/)
   -------------------------------------------------------------------------- */
html.dark #adminSidebar {
  background-color: #070d1a !important;
  border-left: 1px solid var(--border-dark) !important;
}

html.dark #adminSidebar nav a {
  color: #cbd5e1;
}

html.dark #adminSidebar nav a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html.dark .h-14.bg-white,
html.dark .admin-topbar,
html.dark #adminLayoutHeader {
  background-color: var(--bg-surface-dark) !important;
  border-bottom: 1px solid var(--border-dark) !important;
  color: var(--text-primary-dark) !important;
}

html.dark .h-14.bg-white h1,
html.dark #adminLayoutHeader h1 {
  color: var(--text-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   9. Buttons, Footer & Modals
   -------------------------------------------------------------------------- */
html.dark .btn-outline {
  border-color: #60a5fa !important;
  color: #60a5fa !important;
  background-color: transparent !important;
}

html.dark .btn-outline:hover {
  background-color: rgba(96, 165, 250, 0.15) !important;
}

html.dark footer {
  background-color: #050914 !important;
  border-top: 1px solid var(--border-dark) !important;
  color: #94a3b8 !important;
}

html.dark footer a {
  color: #cbd5e1 !important;
}

html.dark footer a:hover {
  color: #60a5fa !important;
}

html.dark .modal-content {
  background-color: var(--bg-surface-dark) !important;
  border: 1px solid var(--border-dark) !important;
  color: var(--text-primary-dark) !important;
}

html.dark .modal-header,
html.dark .modal-footer {
  border-color: var(--border-dark) !important;
}

/* --------------------------------------------------------------------------
   10. Theme Switch Button UI Components
   -------------------------------------------------------------------------- */

/* Compact Header Icon Toggle Button */
.theme-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none !important;
  outline: none !important;
  background-color: rgba(243, 244, 246, 0.9);
  color: #334155;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.theme-toggle-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html.dark .theme-toggle-btn {
  background-color: rgba(23, 36, 62, 0.9);
  border: none !important;
  color: #fbbf24;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

html.dark .theme-toggle-btn:hover {
  border: none !important;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.15);
}

/* Premium Sliding Knob Pill Switch */
.theme-switch-btn {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 9999px;
  background-color: #e2e8f0;
  border: none !important;
  outline: none !important;
  padding: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  user-select: none;
}

html.dark .theme-switch-btn {
  background-color: #17243e;
  border: none !important;
}

.theme-switch-knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: absolute;
  right: 3px;
}

html.dark .theme-switch-knob {
  background-color: #090f1e;
  right: calc(100% - 25px);
}

.theme-switch-btn .icon-sun {
  color: #f59e0b;
  font-size: 11px;
  display: inline-block;
}
html.dark .theme-switch-btn .icon-sun {
  display: none;
}

.theme-switch-btn .icon-moon {
  color: #fbbf24;
  font-size: 11px;
  display: none;
}
html.dark .theme-switch-btn .icon-moon {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   11. Specific Fixes for Landing Page Part D (Services Section Cards)
   -------------------------------------------------------------------------- */
html.dark .from-indigo-50\/40,
html[data-bs-theme="dark"] .from-indigo-50\/40 {
  background-image: linear-gradient(to bottom, rgba(99, 102, 241, 0.15), rgba(17, 26, 46, 0.95)) !important;
}

html.dark .from-emerald-50\/40,
html[data-bs-theme="dark"] .from-emerald-50\/40 {
  background-image: linear-gradient(to bottom, rgba(16, 185, 129, 0.15), rgba(17, 26, 46, 0.95)) !important;
}

html.dark .from-rose-50\/40,
html[data-bs-theme="dark"] .from-rose-50\/40 {
  background-image: linear-gradient(to bottom, rgba(244, 63, 94, 0.15), rgba(17, 26, 46, 0.95)) !important;
}

html.dark .from-amber-50\/40,
html[data-bs-theme="dark"] .from-amber-50\/40 {
  background-image: linear-gradient(to bottom, rgba(245, 158, 11, 0.15), rgba(17, 26, 46, 0.95)) !important;
}

html.dark .from-purple-50\/40,
html[data-bs-theme="dark"] .from-purple-50\/40 {
  background-image: linear-gradient(to bottom, rgba(168, 85, 247, 0.15), rgba(17, 26, 46, 0.95)) !important;
}

html.dark .to-white,
html[data-bs-theme="dark"] .to-white {
  --tw-gradient-to: rgba(17, 26, 46, 0.95) !important;
}

/* --------------------------------------------------------------------------
   12. CKEditor 5 Dark Mode System & Contrast Fixes
   -------------------------------------------------------------------------- */
html.dark :root,
html[data-bs-theme="dark"] :root,
html.dark .ck,
html[data-bs-theme="dark"] .ck,
html.dark .ck-editor,
html[data-bs-theme="dark"] .ck-editor {
  --ck-color-base-background: #111827 !important;
  --ck-color-base-foreground: #1f2937 !important;
  --ck-color-base-border: #374151 !important;
  --ck-color-base-text: #f9fafb !important;
  --ck-color-base-active: #2563eb !important;
  --ck-color-base-active-focus: #3b82f6 !important;
  --ck-color-focus-border: #3b82f6 !important;
  --ck-color-text: #f9fafb !important;
  --ck-color-shadow-drop: rgba(0, 0, 0, 0.5) !important;
  --ck-color-shadow-inner: rgba(0, 0, 0, 0.3) !important;
  --ck-color-button-default-background: transparent !important;
  --ck-color-button-default-hover-background: #374151 !important;
  --ck-color-button-default-active-background: #4b5563 !important;
  --ck-color-button-default-active-shadow: #374151 !important;
  --ck-color-button-default-disabled-background: transparent !important;
  --ck-color-button-on-background: #2563eb !important;
  --ck-color-button-on-hover-background: #1d4ed8 !important;
  --ck-color-button-on-active-background: #1e40af !important;
  --ck-color-button-on-active-shadow: #1e3a8a !important;
  --ck-color-button-on-disabled-background: #374151 !important;
  --ck-color-button-on-color: #ffffff !important;
  --ck-color-button-arrow-background: transparent !important;
  --ck-color-button-save: #10b981 !important;
  --ck-color-button-cancel: #ef4444 !important;
  --ck-color-dropdown-panel-background: #1f2937 !important;
  --ck-color-dropdown-panel-border: #374151 !important;
  --ck-color-input-background: #111827 !important;
  --ck-color-input-border: #374151 !important;
  --ck-color-input-text: #f9fafb !important;
  --ck-color-input-disabled-background: #1f2937 !important;
  --ck-color-input-disabled-border: #374151 !important;
  --ck-color-input-disabled-text: #9ca3af !important;
  --ck-color-list-background: #1f2937 !important;
  --ck-color-list-button-hover-background: #374151 !important;
  --ck-color-list-button-on-background: #2563eb !important;
  --ck-color-list-button-on-text: #ffffff !important;
  --ck-color-panel-background: #1f2937 !important;
  --ck-color-panel-border: #374151 !important;
  --ck-color-toolbar-background: #1f2937 !important;
  --ck-color-toolbar-border: #374151 !important;
  --ck-color-tooltip-background: #111827 !important;
  --ck-color-tooltip-text: #f9fafb !important;
  --ck-color-image-caption-background: #1f2937 !important;
  --ck-color-image-caption-text: #e5e7eb !important;
  --ck-color-widget-blurred-border: #374151 !important;
  --ck-color-widget-hover-border: #60a5fa !important;
  --ck-color-widget-editable-focus-background: #111827 !important;
}

/* CKEditor Editing Canvas (Main input box) */
html.dark .ck.ck-editor__main > .ck-editor__editable,
html.dark .ck.ck-editor__main > .ck-editor__editable.ck-focused,
html.dark .ck-content,
html[data-bs-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
html[data-bs-theme="dark"] .ck.ck-editor__main > .ck-editor__editable.ck-focused,
html[data-bs-theme="dark"] .ck-content {
  background-color: #111827 !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* CKEditor Toolbar styling in Dark Mode */
html.dark .ck.ck-toolbar,
html[data-bs-theme="dark"] .ck.ck-toolbar {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

html.dark .ck.ck-toolbar .ck-button,
html.dark .ck.ck-toolbar .ck-button .ck-icon,
html.dark .ck.ck-toolbar .ck-button .ck-button__label,
html[data-bs-theme="dark"] .ck.ck-toolbar .ck-button,
html[data-bs-theme="dark"] .ck.ck-toolbar .ck-button .ck-icon,
html[data-bs-theme="dark"] .ck.ck-toolbar .ck-button .ck-button__label {
  color: #e5e7eb !important;
}

html.dark .ck.ck-toolbar .ck-button:hover,
html[data-bs-theme="dark"] .ck.ck-toolbar .ck-button:hover {
  background-color: #374151 !important;
  color: #ffffff !important;
}

html.dark .ck.ck-toolbar .ck-button.ck-on,
html[data-bs-theme="dark"] .ck.ck-toolbar .ck-button.ck-on {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* Dropdowns, tooltips, and dialog panels */
html.dark .ck.ck-dropdown__panel,
html.dark .ck.ck-list,
html[data-bs-theme="dark"] .ck.ck-dropdown__panel,
html[data-bs-theme="dark"] .ck.ck-list {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

html.dark .ck.ck-list__item .ck-button,
html[data-bs-theme="dark"] .ck.ck-list__item .ck-button {
  color: #f3f4f6 !important;
}

html.dark .ck.ck-list__item .ck-button:hover,
html[data-bs-theme="dark"] .ck.ck-list__item .ck-button:hover {
  background-color: #374151 !important;
  color: #ffffff !important;
}

html.dark .ck.ck-list__item .ck-button.ck-on,
html[data-bs-theme="dark"] .ck.ck-list__item .ck-button.ck-on {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* Ensure headings, links, and text elements inside CKEditor stay visible in Dark Mode */
html.dark .ck-content h1,
html.dark .ck-content h2,
html.dark .ck-content h3,
html.dark .ck-content h4,
html.dark .ck-content strong,
html.dark .ck-content b,
html[data-bs-theme="dark"] .ck-content h1,
html[data-bs-theme="dark"] .ck-content h2,
html[data-bs-theme="dark"] .ck-content h3,
html[data-bs-theme="dark"] .ck-content h4,
html[data-bs-theme="dark"] .ck-content strong,
html[data-bs-theme="dark"] .ck-content b {
  color: #ffffff !important;
}

html.dark .ck-content p,
html.dark .ck-content span,
html.dark .ck-content li,
html[data-bs-theme="dark"] .ck-content p,
html[data-bs-theme="dark"] .ck-content span,
html[data-bs-theme="dark"] .ck-content li {
  color: #f9fafb !important;
}

html.dark .ck-content a,
html[data-bs-theme="dark"] .ck-content a {
  color: #60a5fa !important;
  text-decoration: underline;
}

html.dark .ck-content blockquote,
html[data-bs-theme="dark"] .ck-content blockquote {
  border-right-color: #4b5563 !important;
  background-color: rgba(31, 41, 55, 0.5) !important;
  color: #d1d5db !important;
}

/* Also support @media (prefers-color-scheme: dark) automatic styling when no class is present */
@media (prefers-color-scheme: dark) {
  .ck, .ck-editor, .ck-editor__main, .ck-content {
    --ck-color-base-background: #111827 !important;
    --ck-color-base-foreground: #1f2937 !important;
    --ck-color-base-border: #374151 !important;
    --ck-color-base-text: #f9fafb !important;
    --ck-color-toolbar-background: #1f2937 !important;
    --ck-color-toolbar-border: #374151 !important;
  }
  .ck.ck-editor__main > .ck-editor__editable,
  .ck.ck-editor__main > .ck-editor__editable.ck-focused,
  .ck-content {
    background-color: #111827 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
  }
  .ck.ck-toolbar {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
  }
  .ck.ck-toolbar .ck-button {
    color: #e5e7eb !important;
  }
}