/* Django Prose / Trix Editor Styles for Unfold Admin */
/* Consistent styling for both light and dark modes */

/* ================================================================
   BASE STYLES (Light Mode)
   ================================================================ */

/* Container */
.django-prose-editor-container {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Toolbar */
.django-prose-editor-container trix-toolbar {
  background-color: #f8fafc; /* slate-50 */
  border: 1px solid #e2e8f0; /* slate-200 */
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem;
}

.django-prose-editor-container trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.django-prose-editor-container trix-toolbar .trix-button-group {
  display: flex;
  gap: 0.125rem;
  margin-right: 0.5rem;
  margin-bottom: 0;
  border: none;
}

/* Toolbar Buttons */
.django-prose-editor-container trix-toolbar .trix-button {
  background-color: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.375rem !important;
  color: #374151 !important;
  padding: 0.375rem 0.5rem !important;
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.django-prose-editor-container trix-toolbar .trix-button:hover {
  background-color: #f1f5f9 !important; /* slate-100 */
  border-color: #cbd5e1 !important; /* slate-300 */
}

.django-prose-editor-container trix-toolbar .trix-button.trix-active {
  background-color: #dc2626 !important; /* red-600 */
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* Hide default Trix icon backgrounds - we use SVG icons */
.django-prose-editor-container trix-toolbar .trix-button::before {
  display: none !important;
}

/* Heading buttons text styling */
.django-prose-editor-container trix-toolbar .trix-button--heading {
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem !important;
}

/* Icon buttons */
.django-prose-editor-container trix-toolbar .trix-button--icon {
  padding: 0.375rem !important;
}

.django-prose-editor-container trix-toolbar .trix-button--icon svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
}

.django-prose-editor-container trix-toolbar .trix-button--icon.trix-active svg {
  stroke: #fff;
}

/* Disabled buttons */
.django-prose-editor-container trix-toolbar .trix-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Editor content area */
.django-prose-editor-container trix-editor {
  background-color: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  min-height: 200px;
  padding: 1rem !important;
  color: #1f2937 !important; /* gray-800 */
}

.django-prose-editor-container trix-editor:focus {
  outline: 2px solid #dc2626 !important;
  outline-offset: -2px;
}

.django-prose-editor-container trix-editor:empty:not(:focus)::before {
  color: #9ca3af !important; /* gray-400 */
}

/* Links */
.django-prose-editor-container trix-editor a {
  color: #dc2626 !important;
  text-decoration: underline;
}

/* Blockquote */
.django-prose-editor-container trix-editor blockquote {
  border-left: 4px solid #dc2626 !important;
  padding-left: 1rem;
  margin-left: 0;
  color: #6b7280 !important;
  background-color: #f8fafc !important;
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.5rem 1rem;
}

/* Code */
.django-prose-editor-container trix-editor pre {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
}

.django-prose-editor-container trix-editor code {
  background-color: #f1f5f9 !important;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #c2410c !important; /* orange-700 */
  font-size: 0.875em;
}

/* Headings */
.django-prose-editor-container trix-editor h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  color: #111827 !important;
}

.django-prose-editor-container trix-editor h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  color: #111827 !important;
}

.django-prose-editor-container trix-editor h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  color: #111827 !important;
}

/* Lists */
.django-prose-editor-container trix-editor ul,
.django-prose-editor-container trix-editor ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.django-prose-editor-container trix-editor li {
  margin: 0.25rem 0;
}

/* Dialogs (link input, etc.) */
.django-prose-editor-container trix-toolbar .trix-dialog {
  background-color: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.django-prose-editor-container trix-toolbar .trix-input,
.django-prose-editor-container trix-toolbar .trix-dialog input[type="text"],
.django-prose-editor-container trix-toolbar .trix-dialog input[type="url"] {
  background-color: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.375rem !important;
  color: #1f2937 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem;
}

.django-prose-editor-container trix-toolbar .trix-input:focus,
.django-prose-editor-container trix-toolbar .trix-dialog input:focus {
  outline: 2px solid #dc2626 !important;
  outline-offset: -1px;
}

.django-prose-editor-container trix-toolbar .trix-dialog .trix-button-group {
  margin-right: 0;
}

.django-prose-editor-container trix-toolbar .trix-dialog .trix-button {
  padding: 0.375rem 0.75rem !important;
}

/* ================================================================
   DARK MODE STYLES
   ================================================================ */

/* Toolbar */
.dark .django-prose-editor-container trix-toolbar,
html.dark .django-prose-editor-container trix-toolbar {
  background-color: rgb(30, 41, 59) !important; /* slate-800 */
  border-color: rgb(51, 65, 85) !important; /* slate-700 */
}

/* Toolbar Buttons */
.dark .django-prose-editor-container trix-toolbar .trix-button,
html.dark .django-prose-editor-container trix-toolbar .trix-button {
  background-color: rgb(51, 65, 85) !important; /* slate-700 */
  border-color: rgb(71, 85, 105) !important; /* slate-600 */
  color: rgb(226, 232, 240) !important; /* slate-200 */
}

.dark .django-prose-editor-container trix-toolbar .trix-button:hover,
html.dark .django-prose-editor-container trix-toolbar .trix-button:hover {
  background-color: rgb(71, 85, 105) !important; /* slate-600 */
  border-color: rgb(100, 116, 139) !important; /* slate-500 */
}

.dark .django-prose-editor-container trix-toolbar .trix-button.trix-active,
html.dark .django-prose-editor-container trix-toolbar .trix-button.trix-active {
  background-color: #dc2626 !important; /* red-600 */
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* SVG icons in dark mode */
.dark .django-prose-editor-container trix-toolbar .trix-button--icon svg,
html.dark .django-prose-editor-container trix-toolbar .trix-button--icon svg {
  stroke: rgb(226, 232, 240); /* slate-200 */
}

.dark
  .django-prose-editor-container
  trix-toolbar
  .trix-button--icon.trix-active
  svg,
html.dark
  .django-prose-editor-container
  trix-toolbar
  .trix-button--icon.trix-active
  svg {
  stroke: #fff;
}

/* Editor content area */
.dark .django-prose-editor-container trix-editor,
html.dark .django-prose-editor-container trix-editor {
  background-color: rgb(30, 41, 59) !important; /* slate-800 */
  border-color: rgb(51, 65, 85) !important; /* slate-700 */
  color: rgb(226, 232, 240) !important; /* slate-200 */
}

.dark .django-prose-editor-container trix-editor:empty:not(:focus)::before,
html.dark .django-prose-editor-container trix-editor:empty:not(:focus)::before {
  color: rgb(148, 163, 184) !important; /* slate-400 */
}

/* Links */
.dark .django-prose-editor-container trix-editor a,
html.dark .django-prose-editor-container trix-editor a {
  color: #f87171 !important; /* red-400 */
}

/* Blockquote */
.dark .django-prose-editor-container trix-editor blockquote,
html.dark .django-prose-editor-container trix-editor blockquote {
  background-color: rgb(51, 65, 85) !important; /* slate-700 */
  color: rgb(148, 163, 184) !important; /* slate-400 */
}

/* Code */
.dark .django-prose-editor-container trix-editor pre,
html.dark .django-prose-editor-container trix-editor pre {
  background-color: rgb(15, 23, 42) !important; /* slate-900 */
  border-color: rgb(51, 65, 85) !important;
  color: rgb(226, 232, 240) !important;
}

.dark .django-prose-editor-container trix-editor code,
html.dark .django-prose-editor-container trix-editor code {
  background-color: rgb(51, 65, 85) !important;
  color: #fbbf24 !important; /* amber-400 */
}

/* Headings */
.dark .django-prose-editor-container trix-editor h1,
.dark .django-prose-editor-container trix-editor h2,
.dark .django-prose-editor-container trix-editor h3,
html.dark .django-prose-editor-container trix-editor h1,
html.dark .django-prose-editor-container trix-editor h2,
html.dark .django-prose-editor-container trix-editor h3 {
  color: rgb(248, 250, 252) !important; /* slate-50 */
}

/* Dialogs */
.dark .django-prose-editor-container trix-toolbar .trix-dialog,
html.dark .django-prose-editor-container trix-toolbar .trix-dialog {
  background-color: rgb(30, 41, 59) !important;
  border-color: rgb(51, 65, 85) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

.dark .django-prose-editor-container trix-toolbar .trix-input,
.dark
  .django-prose-editor-container
  trix-toolbar
  .trix-dialog
  input[type="text"],
.dark
  .django-prose-editor-container
  trix-toolbar
  .trix-dialog
  input[type="url"],
html.dark .django-prose-editor-container trix-toolbar .trix-input,
html.dark
  .django-prose-editor-container
  trix-toolbar
  .trix-dialog
  input[type="text"],
html.dark
  .django-prose-editor-container
  trix-toolbar
  .trix-dialog
  input[type="url"] {
  background-color: rgb(51, 65, 85) !important;
  border-color: rgb(71, 85, 105) !important;
  color: rgb(226, 232, 240) !important;
}

/* Images */
.dark .django-prose-editor-container trix-editor img,
html.dark .django-prose-editor-container trix-editor img {
  border: 1px solid rgb(51, 65, 85);
  border-radius: 0.375rem;
}

.dark .django-prose-editor-container trix-editor figcaption,
html.dark .django-prose-editor-container trix-editor figcaption {
  color: rgb(148, 163, 184) !important;
}