/*
 *= require_self
 */

/* Custom styles for Rails SaaS Application */

/* AI Loading Animations */
.spinning {
  animation: spin 2s linear infinite;
}

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

/* 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);
}

/* 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);
}

/* 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 */
.ce-block {
  padding: 0.25rem 0 !important;
}

.ce-paragraph {
  margin: 0 !important;
  padding: 0.25rem 0 !important;
}

.ce-header {
  margin: 0.25rem 0 !important;
  padding: 0.25rem 0 !important;
}

.ce-list {
  margin: 0.25rem 0 !important;
  padding: 0.25rem 0 !important;
}

.ce-quote {
  margin: 0.25rem 0 !important;
  padding: 0.25rem 0 !important;
}

/* Reduce Editor.js placeholder padding */
.ce-paragraph[data-placeholder]:empty::before {
  padding: 0.25rem 0;
}

/* 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.25rem 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;
}

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

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

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

[data-bs-theme="dark"] .ce-quote {
  background-color: #1e1f22 !important;
  color: #e3e5e8 !important;
  border-left-color: #5c5e66 !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;
}

[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;
}