/*
 * Trix ships a light theme; the admin UI is dark slate. These overrides only
 * recolour it - no layout changes - so a Trix upgrade cannot break the form.
 *
 * The toolbar icons are background-images with dark strokes baked in, and Trix
 * exposes no variable for them, so they get inverted rather than replaced.
 */

trix-toolbar .trix-button-group {
  border-color: #475569;
  background: #334155;
}

trix-toolbar .trix-button {
  border-color: #475569;
  color: #e2e8f0;
  background: transparent;
}

trix-toolbar .trix-button:not(:disabled):hover {
  background: #475569;
}

trix-toolbar .trix-button.trix-active {
  background: #2563eb;
  color: #fff;
}

trix-toolbar .trix-button--icon::before {
  filter: invert(1) brightness(1.6);
}

trix-toolbar .trix-dialog {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

trix-toolbar .trix-input--dialog {
  background: #334155;
  border-color: #475569;
  color: #fff;
}

/* The editor body itself. Tailwind classes on the element handle the frame;
   these handle what Trix draws inside it. */
trix-editor.ktsd-trix {
  overflow-y: auto;
}

trix-editor.ktsd-trix:empty:not(:focus)::before {
  color: #94a3b8;
}

trix-editor.ktsd-trix a {
  color: #60a5fa;
  text-decoration: underline;
}

trix-editor.ktsd-trix blockquote {
  border-left: 3px solid #475569;
  color: #cbd5e1;
}

/* Trix hides its file tools with an attribute; this project has no attachment
   support behind them, so keep them out of the toolbar entirely. */
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

/*
 * What you type is what the customer gets.
 *
 * Tailwind preflight strips bullets, heading sizes and margins from ul/ol/h1
 * across the whole app, and that reset reaches inside the editor too. Pasting
 * a formatted description therefore LOOKED like the formatting was lost: the
 * <ul> and <li> were there in the markup all along, drawn with no bullet and
 * no indent, which is indistinguishable from plain lines.
 *
 * These mirror the .ktsd-rich-text rules in application.css, so the editor and
 * the storefront agree.
 */
trix-editor.ktsd-trix h1 { font-size: 1.35em; font-weight: 700; margin: 0 0 .5em; }
trix-editor.ktsd-trix h2 { font-size: 1.15em; font-weight: 700; margin: 0 0 .5em; }

trix-editor.ktsd-trix ul,
trix-editor.ktsd-trix ol { margin: 0 0 .75em; padding-left: 1.5em; }
trix-editor.ktsd-trix ul { list-style: disc; }
trix-editor.ktsd-trix ol { list-style: decimal; }
trix-editor.ktsd-trix li { margin: .15em 0; display: list-item; }

/* Trix nests a <ul> inside an <li> for indented lists; keep those marked too. */
trix-editor.ktsd-trix li > ul { list-style: circle; margin-bottom: 0; }
trix-editor.ktsd-trix li > ul > li > ul { list-style: square; }

trix-editor.ktsd-trix strong, trix-editor.ktsd-trix b { font-weight: 700; }
trix-editor.ktsd-trix em, trix-editor.ktsd-trix i     { font-style: italic; }
trix-editor.ktsd-trix del                             { text-decoration: line-through; }

trix-editor.ktsd-trix pre {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: rgba(15, 23, 42, .5);
  padding: .5em .7em;
  border-radius: .25rem;
}