/* =========================================================
   CKEditor 5 – Dark Mode (Blue Accent) – Final (Custom TWEAKED)
   ========================================================= */

/* -------------------- DARK MODE -------------------- */
.dark .ck.ck-editor__editable {
  padding: 0 20px !important;
  background-color: #0b0c10 !important; /* بکگراند کاملاً تیره */
  color: #e5e7eb !important; /* متن روشن */
}

.dark .ck.ck-editor__editable.ck-focused {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.6) !important;
}

/* ---------- Toolbar ---------- */
.dark .ck.ck-toolbar {
  background-color: #111827 !important;
  border-color: #1f2937 !important;
}

/* ---------- Buttons ---------- */
.dark .ck.ck-button {
  color: #c7d2fe !important;
}

.dark .ck.ck-button:hover,
.dark .ck.ck-button:focus-visible {
  background-color: #1e293b !important;
  color: #e0f2fe !important;
}

.dark .ck.ck-button.ck-on {
  background-color: #38bdf8 !important;
  color: #020617 !important;
}

/* ---------- Dropdown ---------- */
.dark .ck.ck-dropdown__panel {
  background-color: #111827 !important;
  border-color: #1f2937 !important;
  color: #e5e7eb !important;
}

/* ---------- Lists ---------- */
.dark .ck.ck-reset.ck-list {
  background-color: transparent !important;
  color: #e5e7eb !important;
  padding-left: 20px !important;
}

.dark .ck.ck-reset.ck-list li {
  background-color: transparent !important;
  padding: 2px 0 !important;
}

.dark .ck.ck-reset.ck-list li:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* ---------- Toggleable list buttons ---------- */
.dark .ck-button.ck-off.ck-list-item-button_toggleable {
  background-color: #111827 !important;
  color: #c7d2fe !important;
}

.dark .ck-button.ck-off.ck-list-item-button_toggleable:hover,
.dark .ck-button.ck-off.ck-list-item-button_toggleable:focus-visible {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

.dark .ck-button.ck-on.ck-list-item-button_toggleable {
  background-color: #38bdf8 !important;
  color: #020617 !important;
}

.dark .ck-button.ck-on.ck-list-item-button_toggleable:hover {
  background-color: #0ea5e9 !important;
}

/* ---------- Split Buttons ---------- */
.dark .ck-splitbutton.ck-dropdown__button {
  background-color: #111827 !important;
  color: #c7d2fe !important;
}

.dark .ck-splitbutton.ck-dropdown__button:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

.dark .ck-splitbutton.ck-dropdown__button.ck-on {
  background-color: #38bdf8 !important;
  color: #020617 !important;
}

.dark .ck-splitbutton.ck-dropdown__button.ck-on:hover {
  background-color: #0ea5e9 !important;
}

.dark .ck-splitbutton .ck-icon,
.dark .ck-splitbutton .ck-splitbutton__arrow {
  color: inherit !important;
}

/* ---------- Progress Bar ---------- */
.dark .ck.ck-progress-bar {
  background-color: #1e293b !important;
}

.dark .ck.ck-progress-bar__bar {
  background-color: #38bdf8 !important;
}

/* ---------- Tooltip ---------- */
.dark .ck.ck-tooltip .ck-tooltip__text {
  background-color: #020617 !important;
  color: #e5e7eb !important;
  border: 1px solid #1f2937 !important;
}

/* ---------- Links inside editor ---------- */
.dark .ck-content a {
  color: #7dd3fc !important;
}

.dark .ck-content a:hover {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}

/* ---------- Scrollbar ---------- */
.dark .ck-editor ::-webkit-scrollbar {
  width: 10px;
}

.dark .ck-editor ::-webkit-scrollbar-thumb {
  background-color: #334155;
  border-radius: 6px;
}

.dark .ck-editor ::-webkit-scrollbar-thumb:hover {
  background-color: #475569;
}

/* =========================================================
   LIGHT MODE – Default
   ========================================================= */
.ck.ck-editor__editable {
  background-color: #fff !important;
  color: #111 !important;
}

.ck.ck-editor__editable.ck-focused {
  border-color: #5c6cff !important;
  box-shadow: 0 0 0 1px rgba(92, 108, 255, 0.6) !important;
}

.ck.ck-toolbar {
  background-color: #f5f5f5 !important;
  border-color: #ccc !important;
}

.ck.ck-button {
  color: #111 !important;
}

.ck.ck-button:hover,
.ck.ck-button:focus-visible {
  background-color: #e2e2e2 !important;
}

.ck.ck-button.ck-on {
  background-color: #ccc !important;
  color: #000 !important;
}

.ck.ck-dropdown__panel {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #111 !important;
}

.ck.ck-reset.ck-list {
  background-color: transparent !important;
  color: #111 !important;
  padding-left: 20px !important;
}

.ck.ck-reset.ck-list li {
  color: inherit !important;
  background-color: inherit !important;
  border-left: none !important;
  padding: 2px 0 !important;
}

.ck.ck-reset.ck-list li li {
  padding-left: 20px !important;
}

.ck.ck-reset.ck-list li:hover {
  background-color: #e2e2e2 !important;
  color: #111 !important;
}

.ck-button.ck-list-item-button_toggleable {
  background-color: #f5f5f5 !important;
  color: #111 !important;
}

.ck-button.ck-list-item-button_toggleable:hover,
.ck-button.ck-list-item-button_toggleable:focus-visible {
  background-color: #e2e2e2 !important;
  color: #111 !important;
}

.ck-button.ck-on.ck-list-item-button_toggleable {
  background-color: #ccc !important;
  color: #000 !important;
}

.ck-button.ck-on.ck-list-item-button_toggleable:hover {
  background-color: #bbb !important;
  color: #000 !important;
}

.ck-splitbutton.ck-dropdown__button {
  background-color: #f5f5f5 !important;
  color: #111 !important;
}

.ck-splitbutton.ck-dropdown__button:hover {
  background-color: #e2e2e2 !important;
  color: #111 !important;
}

.ck-splitbutton.ck-dropdown__button.ck-on {
  background-color: #ccc !important;
  color: #000 !important;
}

.ck-splitbutton.ck-dropdown__button.ck-on:hover {
  background-color: #bbb !important;
  color: #000 !important;
}

.ck-splitbutton.ck-dropdown__button .ck-icon.ck-button__icon,
.ck-splitbutton.ck-dropdown__button .ck-splitbutton__arrow {
  color: inherit !important;
  background-color: transparent !important;
}

.ck-splitbutton.ck-dropdown__button .ck-icon.ck-button__icon {
  pointer-events: none;
}

.ck.ck-progress-bar {
  background-color: #ddd !important;
}

.ck.ck-progress-bar__bar {
  background-color: #5c6cff !important;
}

.ck.ck-tooltip .ck-tooltip__text {
  background-color: #eee !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
}

.ck-editor ::-webkit-scrollbar {
  width: 10px;
}

.ck-editor ::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 6px;
}

.ck-editor ::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}