/**
 * Custom CSS Overrides for EditCollab
 * Sidebar toggle behavior improvements
 */

/* ================================================
   HEADER BAR IMPROVEMENTS
   ================================================ */

/* Make header taller with better padding */
.page-wrapper .page-header .header-wrapper {
  padding: 12px 30px !important;
  min-height: 64px;
}

@media (max-width: 1399px) {
  .page-wrapper .page-header .header-wrapper {
    padding: 12px 20px !important;
  }
}

@media (max-width: 575px) {
  .page-wrapper .page-header .header-wrapper {
    padding: 10px 15px !important;
    min-height: 56px;
  }
}

/* Better logo sizing */
.page-header .header-logo-wrapper .logo-wrapper img {
  height: 32px;
  width: auto;
}

@media (max-width: 575px) {
  .page-header .header-logo-wrapper .logo-wrapper img {
    height: 26px;
  }
}

/* Improved toggle sidebar button */
.page-header .toggle-sidebar {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin-left: 16px;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.page-header .toggle-sidebar:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.page-header .toggle-sidebar svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #64748b;
  transition: stroke 0.2s ease;
}

.page-header .toggle-sidebar:hover svg {
  stroke: #3b82f6 !important;
}

.page-header .toggle-sidebar::before {
  display: none !important;
}

/* Nav right items - tighter spacing */
.page-wrapper .page-header .header-wrapper .nav-right > ul {
  gap: 0;
}

.page-wrapper .page-header .header-wrapper .nav-right > ul > li {
  padding: 4px 6px;
}

@media (max-width: 767px) {
  .page-wrapper .page-header .header-wrapper .nav-right > ul > li {
    padding: 4px 4px;
  }
}

/* Larger, clearer icons in nav */
.page-wrapper .page-header .header-wrapper .nav-right ul li svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.75;
}

.page-wrapper .page-header .header-wrapper .nav-right ul li .mode svg {
  width: 22px !important;
  height: 22px !important;
}

/* Icon hover effect */
.page-wrapper .page-header .header-wrapper .nav-right > ul > li:not(.profile-nav):hover {
  background-color: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
}

.page-wrapper .page-header .header-wrapper .nav-right > ul > li:not(.profile-nav):hover svg {
  stroke: #3b82f6 !important;
}

/* Dark mode toggle button improvements */
.page-header .nav-right .mode {
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.page-header .nav-right .mode:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.page-header .nav-right .mode svg {
  transition: all 0.2s ease;
}

.page-header .nav-right .mode:hover svg {
  fill: #3b82f6;
  stroke: #3b82f6;
}

/* Ensure header is above all page content */
.page-wrapper .page-header {
  z-index: 1050 !important;
}

/* Ensure page body content stays below header */
.page-wrapper .page-body-wrapper {
  z-index: 1 !important;
}

/* Ensure all header dropdowns appear on top of everything */
.page-header .onhover-show-div,
.page-header .dropdown-menu,
.page-header .profile-dropdown {
  z-index: 1060 !important;
}

/* ================================================
   USER PROFILE DROPDOWN IMPROVEMENTS
   ================================================ */

/* Profile trigger area */
.page-header .profile-nav .profile-media {
  display: flex !important;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  transition: all 0.2s ease;
  gap: 12px;
}

.page-header .profile-nav .profile-media:hover {
  background-color: rgba(59, 130, 246, 0.08);
}

/* User avatar */
.page-header .profile-nav .user-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Profile text */
.page-header .profile-nav .media-body {
  margin-left: 0 !important;
}

.page-header .profile-nav .media-body > span {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  display: block;
  line-height: 1.3;
}

.page-header .profile-nav .media-body p {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 2px;
}

.page-header .profile-nav .media-body p i {
  margin-left: 4px;
  font-size: 10px;
  transition: transform 0.2s ease;
}

/* Profile dropdown menu */
.page-header .profile-dropdown {
  min-width: 180px !important;
  padding: 8px 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  top: 56px !important;
  z-index: 9999 !important;
}

.page-header .profile-dropdown li {
  padding: 0 !important;
}

.page-header .profile-dropdown li a {
  display: flex !important;
  align-items: center;
  padding: 10px 16px !important;
  font-size: 14px;
  color: #374151 !important;
  transition: all 0.15s ease;
  gap: 12px;
}

.page-header .profile-dropdown li a:hover {
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: #3b82f6 !important;
}

.page-header .profile-dropdown li a svg,
.page-header .profile-dropdown li a i[data-feather] {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75;
  color: #64748b;
  flex-shrink: 0;
}

.page-header .profile-dropdown li a:hover svg,
.page-header .profile-dropdown li a:hover i[data-feather] {
  color: #3b82f6;
  stroke: #3b82f6;
}

/* ================================================
   VERSION SELECTOR DROPDOWN IMPROVEMENTS
   ================================================ */

/* Version selector container */
.version-selector {
  margin-left: 20px !important;
}

.version-selector .text-muted {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500;
}

/* Version dropdown button */
.version-selector .btn-outline-primary {
  border-color: #e2e8f0 !important;
  background-color: #f8fafc !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.version-selector .btn-outline-primary:hover,
.version-selector .btn-outline-primary:focus {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
}

.version-selector .btn-outline-primary svg,
.version-selector .btn-outline-primary i[data-feather] {
  width: 15px !important;
  height: 15px !important;
  color: #64748b;
  stroke: #64748b;
}

.version-selector .btn-outline-primary:hover svg,
.version-selector .btn-outline-primary:hover i[data-feather] {
  color: #3b82f6;
  stroke: #3b82f6;
}

/* Version dropdown menu */
.version-selector .dropdown-menu {
  min-width: 220px !important;
  padding: 8px 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin-top: 8px !important;
  z-index: 9999 !important;
}

.version-selector .dropdown-menu .dropdown-item {
  padding: 10px 16px !important;
  font-size: 14px;
  color: #374151;
  transition: all 0.15s ease;
}

.version-selector .dropdown-menu .dropdown-item:hover {
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: #3b82f6;
}

.version-selector .dropdown-menu .dropdown-item.active {
  background-color: rgba(59, 130, 246, 0.12) !important;
  color: #3b82f6 !important;
  font-weight: 500;
}

.version-selector .dropdown-menu .dropdown-item .badge {
  font-size: 10px;
  padding: 3px 6px;
  font-weight: 500;
}

.version-selector .dropdown-menu .dropdown-divider {
  margin: 6px 0;
  border-color: #e2e8f0;
}

.version-selector .dropdown-menu .dropdown-item.text-primary {
  color: #3b82f6 !important;
  font-weight: 500;
}

.version-selector .dropdown-menu .dropdown-item.text-primary:hover {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

/* ================================================
   HEADER DARK MODE SUPPORT
   ================================================ */

body.dark-only .page-wrapper .page-header {
  background-color: #262932 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-only .page-header .toggle-sidebar:hover {
  background-color: rgba(59, 130, 246, 0.15);
}

body.dark-only .page-header .toggle-sidebar svg {
  stroke: #94a3b8;
}

body.dark-only .page-header .toggle-sidebar:hover svg {
  stroke: #60a5fa !important;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right > ul > li:not(.profile-nav):hover {
  background-color: rgba(59, 130, 246, 0.12);
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right ul li svg {
  stroke: #94a3b8;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right > ul > li:not(.profile-nav):hover svg {
  stroke: #60a5fa !important;
}

body.dark-only .page-header .nav-right .mode:hover {
  background-color: rgba(59, 130, 246, 0.15);
}

body.dark-only .page-header .profile-nav .media-body > span {
  color: #f1f5f9;
}

body.dark-only .page-header .profile-nav .media-body p {
  color: #94a3b8 !important;
}

body.dark-only .page-header .profile-nav .profile-media:hover {
  background-color: rgba(59, 130, 246, 0.12);
}

body.dark-only .page-header .profile-dropdown {
  background-color: #1d1e26 !important;
  border-color: #374558 !important;
}

body.dark-only .page-header .profile-dropdown li a {
  color: #e2e8f0 !important;
}

body.dark-only .page-header .profile-dropdown li a:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

body.dark-only .page-header .profile-dropdown li a svg {
  color: #94a3b8;
}

body.dark-only .page-header .profile-dropdown li a:hover svg {
  color: #60a5fa;
  stroke: #60a5fa;
}

body.dark-only .version-selector .btn-outline-primary {
  border-color: #374558 !important;
  background-color: #1d1e26 !important;
  color: #e2e8f0 !important;
}

body.dark-only .version-selector .btn-outline-primary:hover {
  border-color: #60a5fa !important;
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

body.dark-only .version-selector .btn-outline-primary svg {
  stroke: #94a3b8;
}

body.dark-only .version-selector .btn-outline-primary:hover svg {
  stroke: #60a5fa;
}

body.dark-only .version-selector .dropdown-menu {
  background-color: #1d1e26 !important;
  border-color: #374558 !important;
}

body.dark-only .version-selector .dropdown-menu .dropdown-item {
  color: #e2e8f0;
}

body.dark-only .version-selector .dropdown-menu .dropdown-item:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa;
}

body.dark-only .version-selector .dropdown-menu .dropdown-item.active {
  background-color: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

body.dark-only .version-selector .dropdown-menu .dropdown-divider {
  border-color: #374558;
}

/* Sidebar header row - logo and toggle on same line */
.sidebar-wrapper .logo-wrapper.sidebar-header-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
}

.sidebar-wrapper .logo-wrapper.sidebar-header-row .logo-link {
  flex: 1;
  min-width: 0;
}

.sidebar-wrapper .logo-wrapper.sidebar-header-row .logo-link img {
  max-height: 35px;
  width: auto;
}

.sidebar-wrapper .logo-wrapper.sidebar-header-row .toggle-sidebar {
  position: static;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
  margin-left: 10px;
  flex-shrink: 0;
}

.sidebar-wrapper .logo-wrapper.sidebar-header-row .toggle-sidebar:hover {
  background-color: rgba(115, 102, 255, 0.1);
}

.sidebar-wrapper .logo-wrapper.sidebar-header-row .toggle-sidebar svg {
  width: 20px;
  height: 20px;
  stroke: #2F2F3B;
}

.sidebar-wrapper .logo-wrapper.sidebar-header-row .toggle-sidebar:hover svg {
  stroke: var(--theme-deafult);
}

/* Hide back-btn in expanded state on desktop */
@media (min-width: 992px) {
  .sidebar-wrapper .logo-wrapper.sidebar-header-row .back-btn {
    display: none;
  }
}

/* When collapsed - show only the toggle, centered */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper.sidebar-header-row {
  display: flex !important;
  justify-content: center;
  padding: 15px 10px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper.sidebar-header-row .logo-link {
  display: none;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper.sidebar-header-row .toggle-sidebar {
  margin-left: 0;
}

/* Override theme's default hide of logo-wrapper when collapsed */
@media (min-width: 992px) {
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper.sidebar-header-row {
    display: flex !important;
  }
}

/* CRITICAL: Completely disable hover expansion on desktop */
@media (min-width: 992px) {
  /* Force sidebar to stay collapsed width on hover */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover {
    width: 90px !important;
    transition: none !important;
  }

  /* Keep header row visible but only show toggle */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper.sidebar-header-row {
    display: flex !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper.sidebar-header-row .logo-link {
    display: none !important;
  }

  /* Keep items constrained */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
    max-width: 86px !important;
    margin: 0 !important;
    transition: none !important;
  }

  /* Keep links centered */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a {
    text-align: center !important;
    padding: 12px 14px !important;
    transition: none !important;
  }

  /* Keep text hidden */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a span,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a span {
    display: none !important;
  }

  /* Keep submenus hidden */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu a,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu a {
    display: none !important;
  }

  /* Keep badges hidden */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .badge,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .badge {
    opacity: 0 !important;
    width: 0 !important;
  }

  /* Keep section titles hidden */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main-title,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main-title {
    display: none !important;
    opacity: 0 !important;
  }

  /* Keep accordion menus hidden */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .according-menu,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .according-menu {
    display: none !important;
  }
}

/* Never show logo-icon-wrapper */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-icon-wrapper {
  display: none !important;
}

/* Dark mode support */
body.dark-only .sidebar-wrapper .logo-wrapper.sidebar-header-row .toggle-sidebar svg {
  stroke: rgba(255, 255, 255, 0.7);
}

body.dark-only .sidebar-wrapper .logo-wrapper.sidebar-header-row .toggle-sidebar:hover {
  background-color: rgba(115, 102, 255, 0.2);
}

body.dark-only .sidebar-wrapper .logo-wrapper.sidebar-header-row .toggle-sidebar:hover svg {
  stroke: var(--theme-deafult);
}

/* ================================================
   Version selector styling
   ================================================ */

/* Allow left-header to expand for version selector - override Bootstrap columns */
.header-wrapper .left-header.has-version-selector {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Override all Bootstrap column classes on left-header when it has version selector */
.left-header.has-version-selector[class*="col-"] {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Ensure version selector container expands */
.version-selector {
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.version-selector .dropdown {
  display: inline-block !important;
}

/* The version dropdown button - ensure it expands to fit content */
#versionDropdown {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: fit-content !important;
  min-width: -moz-fit-content !important;
  max-width: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#versionDropdown .version-name {
  display: inline-block !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-right: 12px;
}

/* ================================================
   Mobile version selector fix
   ================================================ */

/* Override theme's hide of left-header on mobile */
@media (max-width: 755px) {
  /* Force left-header to show when it has version selector */
  .left-header:has(.version-selector),
  .left-header.has-version-selector {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .left-header .version-selector {
    margin-left: 5px !important;
  }

  /* Make the dropdown button smaller on mobile */
  .left-header .version-selector .btn {
    min-width: auto !important;
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Hide the version name text on mobile, just show icon */
  .left-header .version-selector .btn .version-name {
    display: none;
  }

  /* Hide "Version:" label on mobile */
  .left-header .version-selector > span {
    display: none !important;
  }
}

/* Even smaller screens */
@media (max-width: 480px) {
  .left-header .version-selector .btn {
    padding: 4px 8px;
  }
}

/* ================================================
   Editor Page Dark Mode
   ================================================ */

body.dark-only .editor-container {
  background-color: #1d1e26;
}

body.dark-only .editor-header {
  background: #262932 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.dark-only .editor-header h4 {
  color: #f4f4f4 !important;
}

body.dark-only .status-bar {
  background: #262932 !important;
}

body.dark-only .status-bar .status-message {
  color: #aaa !important;
}

body.dark-only .text-table-wrapper {
  background: #262932 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.dark-only .text-table thead th {
  background: #1d1e26 !important;
  color: #aaa !important;
  border-bottom-color: #374558 !important;
}

body.dark-only .text-row {
  border-bottom-color: #374558 !important;
}

body.dark-only .text-row:focus-within {
  background-color: #2a2d37 !important;
}

/* When focus highlight is disabled in dark mode */
body.dark-only .no-focus-highlight .text-row:focus-within {
  background-color: transparent !important;
}

body.dark-only .no-focus-highlight .text-row:focus-within .row-number {
  color: #888 !important;
  font-weight: normal !important;
}

body.dark-only .no-focus-highlight .editable-text:focus {
  background-color: transparent !important;
}

body.dark-only .row-number {
  color: #888 !important;
  border-right-color: #374558 !important;
}

body.dark-only .text-row:focus-within .row-number {
  color: #f4f4f4 !important;
}

body.dark-only .original-cell {
  color: #d0d0d0 !important;
  background: #1d1e26 !important;
  border-right-color: #374558 !important;
}

body.dark-only .original-cell .inline-hebrew {
  color: #d0d0d0 !important;
  background: #2a2d37 !important;
}

body.dark-only .hebrew-cell {
  color: #d0d0d0 !important;
  background: #1d1e26 !important;
  border-right-color: #374558 !important;
}

body.dark-only .editable-text {
  color: #f4f4f4 !important;
  background: transparent !important;
}

body.dark-only .editable-text:focus {
  background-color: #2a2d37 !important;
}

body.dark-only .editable-text::placeholder {
  color: #666 !important;
}

body.dark-only .editable-text:disabled {
  background: #1d1e26 !important;
  color: #666 !important;
}

body.dark-only .tools-cell {
  border-left-color: #374558 !important;
}

body.dark-only .mark-complete-wrapper {
  background: #262932 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.dark-only .mark-complete-wrapper h6 {
  color: #f4f4f4 !important;
}

body.dark-only .empty-state {
  color: #888 !important;
}

body.dark-only .empty-state h5 {
  color: #aaa !important;
}

/* Editor dropdowns/selects */
body.dark-only .editor-controls .form-select {
  background-color: #1d1e26 !important;
  border-color: #374558 !important;
  color: #f4f4f4 !important;
}

body.dark-only .editor-controls .form-select option {
  background-color: #262932;
  color: #f4f4f4;
}

/* Settings modal in dark mode */
body.dark-only .settings-item {
  border-bottom-color: #374558 !important;
}

body.dark-only .settings-item label {
  color: #f4f4f4 !important;
}

body.dark-only .settings-item small {
  color: #888 !important;
}

/* Review modal cards */
body.dark-only #existingNotes .card {
  background: #1d1e26 !important;
  border-color: #374558 !important;
}

body.dark-only #existingNotes .card-body {
  color: #d0d0d0 !important;
}

body.dark-only #newNote {
  background-color: #1d1e26 !important;
  border-color: #374558 !important;
  color: #f4f4f4 !important;
}

/* Edited verse indicator in dark mode - uses CSS variable set by JS */
body.dark-only .text-cell.verse-edited.style-border .editable-text,
body.dark-only .text-cell.verse-edited.style-both .editable-text {
  border-left: 3px solid rgba(var(--edited-verse-color, 220, 53, 69), 0.6) !important;
}

body.dark-only .text-cell.verse-edited.style-background .editable-text,
body.dark-only .text-cell.verse-edited.style-both .editable-text {
  background-color: rgba(var(--edited-verse-color, 220, 53, 69), 0.08) !important;
}

/* Remove edited verse indicator when focused in dark mode */
body.dark-only .text-cell.verse-edited .editable-text:focus {
  border-left: none !important;
  background-color: #2a2d37 !important;
}

/* When focus highlight is disabled, edited verse focus has no background in dark mode */
body.dark-only .no-focus-highlight .text-cell.verse-edited .editable-text:focus {
  background-color: transparent !important;
}

/* Dark mode settings modal */
body.dark-only .settings-section-header {
  color: #888 !important;
  border-bottom-color: #374558 !important;
}

body.dark-only .setting-row {
  background: #1d1e26 !important;
}

body.dark-only .setting-row:hover {
  background: #262932 !important;
}

body.dark-only .setting-row label {
  color: #d0d0d0 !important;
}

body.dark-only .settings-sub-options {
  background: #262932 !important;
  border-color: #374558 !important;
}

body.dark-only .settings-sub-options .sub-row + .sub-row {
  border-top-color: #374558 !important;
}

body.dark-only .settings-sub-options label.sub-label {
  color: #aaa !important;
}

body.dark-only .color-picker-wrapper .color-preview {
  color: #888 !important;
}

body.dark-only .color-picker-wrapper input[type="color"] {
  border-color: #374558 !important;
  background-color: #1d1e26 !important;
}

body.dark-only .style-select-wrapper select {
  background-color: #1d1e26 !important;
  border-color: #374558 !important;
  color: #d0d0d0 !important;
}