/*
 *= require_self
 *= require task_cards
 */

/* Custom styles for Rails SaaS Application */

/* AI Loading Animations */
.spinning {
  animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite; /* Safari/WebKit support */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Safari/WebKit specific spinner animations */
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

/* Safari-specific spinner fixes for modal loading */
.spinner-border {
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
}

/* Force hardware acceleration for Safari */
.spinner-border,
.spinning {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Modal Z-Index Management - Override Bootstrap defaults for nested modals */
.modal[data-controller*="nested-modal"] {
  z-index: auto !important; /* Let Stimulus controller manage z-index */
}

.modal-backdrop {
  z-index: auto !important; /* Let Stimulus controller manage z-index */
}


/* Discussion Tags Styling */
.discussion-tags.tags-expanded {
  background-color: var(--bs-light);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.discussion-tags .current-tags.updating {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.discussion-tags .tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.discussion-tags .form-check {
  margin-bottom: 4px;
}

.discussion-tags .form-check-label .badge {
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75em;
}

.discussion-tags .form-check-label .badge:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Typeahead Tag Selector - Bootstrap Card Z-Index Fix */
.typeahead-tag-selector .typeahead-dropdown {
  background: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  z-index: 99999 !important;
  position: fixed !important; /* Fixed instead of absolute to escape card stacking context */
  opacity: 1 !important;
  max-height: 200px;
  overflow-y: auto;
}

/* Force card containers to not interfere with dropdown positioning */
.card {
  isolation: auto !important;
  transform: none !important;
}

.card-body {
  overflow: visible !important;
}

/* Ensure the typeahead container creates proper stacking context */
.typeahead-tag-selector {
  position: relative !important;
  z-index: 1000 !important;
}

/* Ensure the typeahead input container also has proper stacking */
.typeahead-input-container {
  position: relative !important;
  z-index: 1001 !important;
}

.typeahead-tag-selector .typeahead-tag-item {
  padding: 0.5rem;
  cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  transition: background-color 0.15s ease-in-out;
}

.typeahead-tag-selector .typeahead-tag-item:last-child {
  border-bottom: none;
}

.typeahead-tag-selector .typeahead-tag-item:hover {
  background-color: var(--bs-secondary-bg);
}

.typeahead-tag-selector .selected-tag-item {
  transition: all 0.2s ease;
}

.typeahead-tag-selector .selected-tag-item:hover .btn-close {
  opacity: 1 !important;
}

.typeahead-tag-selector .btn-close {
  width: 0.8em;
  height: 0.8em;
  background-size: 0.6em;
}

.typeahead-tag-selector .selected-tags-container:empty {
  display: none;
}

/* Dark mode support */
[data-bs-theme="dark"] .typeahead-tag-selector .typeahead-dropdown {
  background: var(--bs-dark) !important;
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .typeahead-tag-selector .typeahead-tag-item:hover {
  background-color: var(--bs-gray-800);
}

.discussion-tags .form-check-input:checked + .form-check-label .badge {
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

.discussion-tags .no-results-message {
  border: 1px dashed var(--bs-border-color);
  border-radius: 6px;
  margin-top: 12px;
}

.discussion-tags mark {
  background-color: yellow;
  color: inherit;
  padding: 0;
}

/* Unified Discussions Styling */
.unified-discussions .activity-item {
  transition: all 0.2s ease;
}

.unified-discussions .activity-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.unified-discussions .comment-content,
.unified-discussions .reply-content {
  line-height: 1.5;
}

.unified-discussions .replies {
  position: relative;
}

.unified-discussions .replies::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--bs-border-color);
  border-radius: 2px;
}

.unified-discussions .btn-link {
  text-decoration: none !important;
}

.unified-discussions .btn-link:hover {
  background-color: var(--bs-light);
  border-radius: 4px;
}

.unified-discussions .inline-discussion-form {
  border: 1px solid var(--bs-border-color);
  transition: all 0.2s ease;
}

.unified-discussions .inline-discussion-form:hover {
  border-color: var(--bs-primary);
}

.unified-discussions .reply-form-inner {
  background-color: var(--bs-light);
  border-radius: 6px;
  padding: 12px;
}

/* Ensure critical styles load immediately to prevent preload warnings */
body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] {
  --bs-body-bg: #212529;
  --bs-body-color: #dee2e6;
}

/* Footer and Navbar dark mode styling */
[data-bs-theme="dark"] footer,
[data-bs-theme="dark"] .navbar {
  background-color: #2b2f33 !important; /* Slightly lighter than default dark */
}

[data-bs-theme="dark"] footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Add some spacing to the main content */
main {
  min-height: calc(100vh - 56px);
}

/* Custom navbar styling */
.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* Navbar spacing for marketing pages */
.navbar-nav .nav-item {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.navbar-nav .nav-item:first-child {
  margin-left: 0;
}

.navbar-nav .nav-item:last-child {
  margin-right: 0;
}

/* Additional padding for nav links */
.navbar-nav .nav-link {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Dropdown positioning */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 250px;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-menu.show {
  display: block;
}

/* Navbar dropdown specific positioning */
.navbar .dropdown-menu {
  margin-top: 0.5rem;
}

/* Dark mode dropdown styles */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--bs-dark);
  border-color: var(--bs-gray-700);
}

/* Dropdown items */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: var(--bs-body-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  text-decoration: none;
}

/* Ensure dropdown button forms don't break layout */
.dropdown-menu .dropdown-item.btn {
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
}

.dropdown-menu .dropdown-item.btn:hover {
  background-color: var(--bs-tertiary-bg);
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-border-color);
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1rem;
  color: var(--bs-body-color);
}

/* Card hover effects */
.card {
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

/* Responsive stat card numbers - prevent wrapping by scaling font size */
.card .display-1,
.card .display-2,
.card .display-3,
.card .display-4,
.card .display-5,
.card .display-6 {
  white-space: nowrap;
  font-size: clamp(1.25rem, 4vw, 2.5rem);
}

/* Sidebar Styles */
.sidebar {
  width: 300px;
  background-color: var(--bs-gray-50);
  border-right: 1px solid var(--bs-border-color);
  height: calc(100vh - 56px); /* Account for navbar height */
  position: sticky;
  top: 56px;
}

[data-bs-theme="dark"] .sidebar {
  background-color: var(--bs-gray-900);
}

.sidebar-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* Disable scroll anchoring to prevent reflow warnings */
  overflow-anchor: none;
}

.sidebar-nav .nav-link {
  color: var(--bs-gray-700);
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link {
  color: var(--bs-gray-300);
}

.sidebar-nav .nav-link:hover {
  background-color: var(--bs-gray-100);
  color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .sidebar-nav .nav-link:hover {
  background-color: var(--bs-gray-800);
  color: var(--bs-gray-100);
}

.sidebar-nav .nav-link.active {
  background-color: var(--bs-primary);
  color: white;
}

.sidebar-nav .nav-link.active:hover {
  background-color: var(--bs-primary);
  color: white;
}

.sidebar-footer .nav-link {
  color: var(--bs-gray-700);
  padding: 0.5rem;
}

[data-bs-theme="dark"] .sidebar-footer .nav-link {
  color: var(--bs-gray-300);
}

.sidebar-footer .nav-link:hover {
  background-color: var(--bs-gray-100);
  color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .sidebar-footer .nav-link:hover {
  background-color: var(--bs-gray-800);
  color: var(--bs-gray-100);
}

.main-content {
  min-height: calc(100vh - 56px);
  padding: 1.5rem;
}

/* Admin accordion styles */
.sidebar .accordion-button {
  background-color: transparent;
  border: none;
  color: var(--bs-gray-700);
  padding: 0.5rem;
  font-size: 0.875rem;
  width: 100%;
  text-align: left;
}

[data-bs-theme="dark"] .sidebar .accordion-button {
  color: var(--bs-gray-300);
}

.sidebar .accordion-button:hover {
  background-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .sidebar .accordion-button:hover {
  background-color: var(--bs-gray-800);
}

.sidebar .accordion-button:not(.collapsed) {
  background-color: var(--bs-gray-100);
  color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .sidebar .accordion-button:not(.collapsed) {
  background-color: var(--bs-gray-800);
  color: var(--bs-gray-100);
}

.sidebar .accordion-button:focus {
  box-shadow: none;
}

.sidebar .accordion-button::after {
  display: none;
}

.sidebar .accordion-item {
  background-color: transparent;
  border: none;
}

.sidebar .accordion-body {
  padding-top: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .sidebar {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    max-height: 70vh;
  }
  
  .sidebar-content {
    max-height: 70vh;
  }
  
  .main-content {
    margin-left: 0 !important;
  }
}

/* Prevent scroll anchoring warnings in dynamic content areas */
.main-content,
.accordion-collapse,
.dropdown-menu {
  overflow-anchor: none;
}

/* AI Enhancement Modal fixes for pure Stimulus approach */
.modal.show {
  display: block !important;
  opacity: 1 !important;
}

.modal-backdrop {
  z-index: 1050 !important;
}

.modal {
  z-index: 1055 !important;
}

/* Ensure modal is properly visible when shown */
.modal.show .modal-dialog {
  transform: none !important;
}

/* Force modal-open body class to prevent background scroll */
body.modal-open {
  overflow: hidden !important;
}

/* Pure Stimulus modal display without Bootstrap fade conflicts */
.modal:not(.fade).show {
  opacity: 1 !important;
  display: block !important;
}

.modal:not(.fade).show .modal-dialog {
  transform: none !important;
  transition: none !important;
}

/* Editor.js content padding reduction - AGGRESSIVE OVERRIDE */

/* Override Editor.js CSS variables */
.editor-wrapper,
.codex-editor {
  --block-padding-vertical: 0px !important;
}

/* Target Editor.js default injected styles */
.ce-paragraph {
  line-height: 1.4em !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override the injected paragraph CSS from Editor.js */
.ce-paragraph p:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ce-paragraph p:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.ce-block,
.cdx-block {
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

.ce-paragraph,
.ce-paragraph p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Additional Editor.js specific overrides based on web research */
.ce-block__content {
  max-width: unset !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* MOST SPECIFIC OVERRIDES - target the actual DOM structure */
.editor-wrapper .codex-editor .ce-block {
  padding: 0 !important;
  margin: 0 !important;
}

.editor-wrapper .codex-editor .ce-block .ce-block__content {
  padding: 0 !important;
  margin: 0 !important;
}

.editor-wrapper .codex-editor .ce-block .ce-block__content .ce-paragraph {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.editor-wrapper .codex-editor .ce-block .ce-block__content .ce-paragraph p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* Force override any injected styles by targeting data attributes */
div[data-controller="editor"] .ce-block {
  margin: 0 !important;
  padding: 0 !important;
}

div[data-controller="editor"] .ce-paragraph {
  margin: 0 !important; 
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* FINAL VERTICAL SPACING FIX - Target bottom margins specifically */
.editor-wrapper .ce-block + .ce-block {
  margin-top: 0 !important;
}

.editor-wrapper .ce-paragraph + .ce-paragraph {
  margin-top: 0 !important;
}

.editor-wrapper .ce-block {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.editor-wrapper .ce-paragraph {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Target any line-height issues that might cause visual gaps */
.editor-wrapper .ce-paragraph,
.editor-wrapper .ce-paragraph * {
  line-height: 1.2 !important;
}

/* Remove any box model spacing on paragraphs */
.editor-wrapper .ce-paragraph p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Target adjacent paragraph spacing */
.editor-wrapper .ce-paragraph:not(:last-child) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* NUCLEAR OPTION - Direct contenteditable targeting */
.editor-wrapper [contenteditable="true"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: block !important;
}

.editor-wrapper [contenteditable="true"] p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* Target the specific Editor.js div structure */
.editor-wrapper .codex-editor .codex-editor__redactor {
  padding: 0 !important;
  margin: 0 !important;
}

.editor-wrapper .codex-editor .codex-editor__redactor .ce-block {
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Use negative margins if needed to counteract default spacing */
.editor-wrapper .ce-paragraph + .ce-paragraph {
  margin-top: -0.5rem !important;
}

/* Override any ::before or ::after pseudo-elements that might add spacing */
.editor-wrapper .ce-paragraph::before,
.editor-wrapper .ce-paragraph::after,
.editor-wrapper .ce-block::before,
.editor-wrapper .ce-block::after {
  content: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ce-header,
.ce-header h1,
.ce-header h2,
.ce-header h3,
.ce-header h4,
.ce-header h5,
.ce-header h6 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ce-list,
.ce-list ul,
.ce-list ol,
.ce-list li {
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ce-quote,
.ce-quote blockquote {
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override default Editor.js paragraph margins */
.ce-paragraph p:first-of-type,
.ce-paragraph p:last-of-type {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce Editor.js placeholder padding */
.ce-paragraph[data-placeholder]:empty::before {
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* Remove any default spacing from the main Editor.js class */
.cdx-block {
  padding: 0 !important;
}

/* Editor.js Dark Mode Support */
[data-bs-theme="dark"] .editor-wrapper {
  background-color: #1e1f22 !important;
  color: #e3e5e8 !important;
  border: 1px solid #5c5e66 !important;
}

/* Editor.js Light Mode Support - consistent with Bootstrap form controls - moved to container */

/* Remove ALL default Editor.js borders and containers */
.codex-editor,
.codex-editor *,
.ce-block,
.ce-block__content,
.ce-redactor,
.codex-editor__redactor {
  border: none !important;
  outline: none !important;
}

/* Apply border only to the Editor.js wrapper that matches Bootstrap form controls */
.editor-wrapper {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  background-color: var(--bs-body-bg) !important;
}

/* Ensure the codex-editor itself has no additional styling */
.codex-editor {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.codex-editor .ce-block__content {
  padding: 0 !important;
}

.editor-wrapper:focus-within {
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

[data-bs-theme="dark"] .editor-wrapper:focus-within {
  border-color: #2196f3 !important;
  box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.25) !important;
}

[data-bs-theme="dark"] .ce-block__content {
  background-color: #1e1f22 !important;
  color: #e3e5e8 !important;
  padding: 0 !important;
  margin: 0 !important;
}

[data-bs-theme="dark"] .ce-paragraph,
[data-bs-theme="dark"] .ce-paragraph p {
  background-color: #1e1f22 !important;
  color: #e3e5e8 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .ce-header,
[data-bs-theme="dark"] .ce-header h1,
[data-bs-theme="dark"] .ce-header h2,
[data-bs-theme="dark"] .ce-header h3,
[data-bs-theme="dark"] .ce-header h4,
[data-bs-theme="dark"] .ce-header h5,
[data-bs-theme="dark"] .ce-header h6 {
  background-color: #1e1f22 !important;
  color: #e3e5e8 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .ce-list,
[data-bs-theme="dark"] .ce-list ul,
[data-bs-theme="dark"] .ce-list ol,
[data-bs-theme="dark"] .ce-list li {
  background-color: #1e1f22 !important;
  color: #e3e5e8 !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .ce-quote,
[data-bs-theme="dark"] .ce-quote blockquote {
  background-color: #1e1f22 !important;
  color: #e3e5e8 !important;
  border-left-color: #5c5e66 !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Dark mode specific overrides for Editor.js blocks */
[data-bs-theme="dark"] .ce-block,
[data-bs-theme="dark"] .cdx-block {
  padding: 0 !important;
  margin: 0 !important;
}

/* Dark mode vertical spacing fixes */
[data-bs-theme="dark"] .editor-wrapper .ce-block {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

[data-bs-theme="dark"] .editor-wrapper .ce-paragraph {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}

[data-bs-theme="dark"] .editor-wrapper .ce-paragraph p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Dark mode nuclear options */
[data-bs-theme="dark"] .editor-wrapper [contenteditable="true"] {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

[data-bs-theme="dark"] .editor-wrapper [contenteditable="true"] p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

[data-bs-theme="dark"] .editor-wrapper .ce-paragraph + .ce-paragraph {
  margin-top: -0.5rem !important;
}

[data-bs-theme="dark"] .editor-wrapper .ce-paragraph::before,
[data-bs-theme="dark"] .editor-wrapper .ce-paragraph::after {
  content: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-bs-theme="dark"] .ce-toolbar {
  background-color: #2b2d31 !important;
  border-color: #41434a !important;
}

[data-bs-theme="dark"] .ce-toolbar__content {
  background-color: #2b2d31 !important;
}

[data-bs-theme="dark"] .ce-toolbox {
  background-color: #2b2d31 !important;
  border-color: #41434a !important;
}

[data-bs-theme="dark"] .ce-toolbox__button {
  background-color: #2b2d31 !important;
  color: #e3e5e8 !important;
}

[data-bs-theme="dark"] .ce-toolbox__button:hover {
  background-color: #35373c !important;
  color: #f2f3f5 !important;
}

[data-bs-theme="dark"] .ce-inline-toolbar {
  background-color: #2b2d31 !important;
  border-color: #41434a !important;
}

[data-bs-theme="dark"] .ce-inline-tool {
  color: #e3e5e8 !important;
}

[data-bs-theme="dark"] .ce-inline-tool:hover {
  background-color: #35373c !important;
  color: #f2f3f5 !important;
}

[data-bs-theme="dark"] .ce-paragraph[data-placeholder]:empty::before {
  color: #80848e !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* Override dark mode paragraph margins specifically */
[data-bs-theme="dark"] .ce-paragraph p:first-of-type,
[data-bs-theme="dark"] .ce-paragraph p:last-of-type {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .ce-block--selected .ce-block__content {
  background-color: #2b2d31 !important;
}

[data-bs-theme="dark"] .ce-block--focused .ce-block__content {
  background-color: #2b2d31 !important;
}

/* File Upload Area Dark Mode Support */
[data-bs-theme="dark"] .upload-drop-zone {
  background-color: #2b2d31 !important;
  border-color: #5c5e66 !important;
  color: #e3e5e8 !important;
}

[data-bs-theme="dark"] .upload-drop-zone.drag-over {
  border-color: #2196f3 !important;
  background-color: #1e2a3a !important;
}

[data-bs-theme="dark"] .file-item {
  background-color: #2b2d31 !important;
  border-color: #5c5e66 !important;
  color: #e3e5e8 !important;
}

[data-bs-theme="dark"] .existing-files .file-item {
  background-color: #1e1f22 !important;
}

[data-bs-theme="dark"] .file-item:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
  background-color: #35373c !important;
}

/* Simple Color Palette Styles */
.color-option {
  transition: all 0.2s ease;
  border: 1px solid #dee2e6 !important;
}

.color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.color-option:focus {
  outline: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bs-primary) !important;
}

/* Dark mode color options */
[data-bs-theme="dark"] .color-option {
  border-color: var(--bs-gray-600) !important;
}

[data-bs-theme="dark"] .color-option:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Deep Linking and Item Highlighting Styles */

/* Main highlighting animation for deep-linked items */
.deep-link-highlight {
  position: relative;
  animation: deepLinkPulse 3s ease-out forwards;
  border-radius: 0.375rem;
  z-index: 1;
}

/* Keyframe animation for the highlight effect */
@keyframes deepLinkPulse {
  0% {
    background-color: rgba(13, 110, 253, 0.3);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
    transform: scale(1.02);
  }
  50% {
    background-color: rgba(13, 110, 253, 0.2);
    box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.1);
    transform: scale(1.01);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
    transform: scale(1);
  }
}

/* Dark mode highlighting */
[data-bs-theme="dark"] .deep-link-highlight {
  animation: deepLinkPulseDark 3s ease-out forwards;
}

@keyframes deepLinkPulseDark {
  0% {
    background-color: rgba(13, 202, 240, 0.3);
    box-shadow: 0 0 0 4px rgba(13, 202, 240, 0.2);
    transform: scale(1.02);
  }
  50% {
    background-color: rgba(13, 202, 240, 0.2);
    box-shadow: 0 0 0 6px rgba(13, 202, 240, 0.1);
    transform: scale(1.01);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
    transform: scale(1);
  }
}

/* Specific highlighting for different UI components */

/* Card highlighting */
.card.deep-link-highlight {
  border-color: var(--bs-primary);
  box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.15);
}

/* List item highlighting */
.list-group-item.deep-link-highlight,
.accordion-item.deep-link-highlight {
  border-left: 4px solid var(--bs-primary);
  padding-left: calc(1rem - 4px);
}

/* Table row highlighting */
tr.deep-link-highlight td {
  position: relative;
  background-color: rgba(13, 110, 253, 0.1) !important;
}

[data-bs-theme="dark"] tr.deep-link-highlight td {
  background-color: rgba(13, 202, 240, 0.1) !important;
}

/* Comment highlighting */
.comment-item.deep-link-highlight {
  border-left: 3px solid var(--bs-primary);
  background-color: rgba(13, 110, 253, 0.05);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 0.25rem 0;
}

[data-bs-theme="dark"] .comment-item.deep-link-highlight {
  background-color: rgba(13, 202, 240, 0.05);
  border-left-color: var(--bs-info);
}

/* Task highlighting */
.task-item.deep-link-highlight,
.accordion-header.deep-link-highlight {
  background: linear-gradient(90deg, 
    rgba(13, 110, 253, 0.1) 0%, 
    rgba(13, 110, 253, 0.05) 100%
  );
  border-radius: 0.375rem;
}

[data-bs-theme="dark"] .task-item.deep-link-highlight,
[data-bs-theme="dark"] .accordion-header.deep-link-highlight {
  background: linear-gradient(90deg, 
    rgba(13, 202, 240, 0.1) 0%, 
    rgba(13, 202, 240, 0.05) 100%
  );
}

/* Activity feed item highlighting */
.activity-item.deep-link-highlight {
  border-left: 3px solid var(--bs-success);
  background-color: rgba(25, 135, 84, 0.05);
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin: 0.25rem 0;
}

[data-bs-theme="dark"] .activity-item.deep-link-highlight {
  background-color: rgba(25, 135, 84, 0.1);
}

/* Member/attendee highlighting */
.member-item.deep-link-highlight,
.attendee-item.deep-link-highlight {
  background-color: rgba(13, 110, 253, 0.08);
  border-radius: 0.5rem;
  border: 2px solid rgba(13, 110, 253, 0.3);
  padding: 0.5rem;
}

[data-bs-theme="dark"] .member-item.deep-link-highlight,
[data-bs-theme="dark"] .attendee-item.deep-link-highlight {
  background-color: rgba(13, 202, 240, 0.08);
  border-color: rgba(13, 202, 240, 0.3);
}

/* Ensure proper z-index for highlighted items */
.deep-link-highlight {
  z-index: 10;
}

/* Smooth scrolling for the whole document */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* Account for fixed headers */
}

/* Error message positioning for deep linking */
.deep-link-error {
  position: fixed !important;
  top: 20px;
  right: 20px;
  z-index: 1060;
  max-width: 400px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Accessibility improvements for highlighted items */
.deep-link-highlight:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .deep-link-highlight {
    animation: none;
    background-color: rgba(13, 110, 253, 0.1);
    border-left: 4px solid var(--bs-primary);
  }
  
  [data-bs-theme="dark"] .deep-link-highlight {
    background-color: rgba(13, 202, 240, 0.1);
    border-left-color: var(--bs-info);
  }
  
  html {
    scroll-behavior: auto;
  }
}