/*
 * Spec-053: Trix-editor anpassad till slate/amber-temat.
 * Inkluderas efter actiontext.css så våra regler vinner.
 *
 * OBS: dark mode i appen är class-baserat via .dark-parent
 * (@custom-variant dark (&:where(.dark, .dark *))). Använd ALDRIG
 * @media (prefers-color-scheme: dark) här — det skulle aktivera dark
 * även när användaren explicit valt light-mode.
 */

/* === LIGHT MODE === */

trix-editor {
  border: 1px solid rgb(226 232 240);   /* slate-200 */
  border-radius: 0.5rem;                /* rounded-lg */
  padding: 0.75rem 1rem;                /* px-4 py-3 */
  min-height: 8rem;
  background: white;                    /* bg-white */
  color: rgb(15 23 42);                 /* text-slate-900 */
  font-family: inherit;
  font-size: 0.875rem;                  /* text-sm */
  line-height: 1.5;
}

trix-editor:focus {
  outline: 2px solid rgb(251 191 36);   /* amber-400 */
  outline-offset: -1px;
  border-color: transparent;
}

trix-editor::placeholder,
trix-editor [contenteditable]:empty::before {
  color: rgb(100 116 139);              /* slate-500 */
}

trix-toolbar {
  margin-bottom: 0.5rem;
}

trix-toolbar .trix-button-row {
  border: 1px solid rgb(226 232 240);   /* slate-200 */
  border-radius: 0.5rem;
  background: rgb(248 250 252);         /* slate-50 */
  padding: 0.25rem;
}

trix-toolbar .trix-button-group {
  border-color: rgb(226 232 240);
  background: transparent;
}

trix-toolbar .trix-button {
  color: rgb(71 85 105);                /* slate-600 */
  background: transparent;
  border-color: rgb(226 232 240);
}

trix-toolbar .trix-button:hover:not([disabled]) {
  background: rgb(241 245 249);         /* slate-100 */
  color: rgb(15 23 42);                 /* slate-900 */
}

trix-toolbar .trix-button.trix-active {
  background: rgb(251 191 36);          /* amber-400 */
  color: rgb(15 23 42);                 /* slate-900 — aldrig white på amber */
}

trix-toolbar .trix-dialogs {
  background: white;
  border-color: rgb(226 232 240);
}

trix-toolbar .trix-input--dialog {
  background: white;
  color: rgb(15 23 42);
  border: 1px solid rgb(203 213 225);   /* slate-300 */
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

trix-toolbar .trix-input--dialog:focus {
  outline: 2px solid rgb(251 191 36);
  border-color: transparent;
}

trix-toolbar .trix-button--dialog {
  color: rgb(71 85 105);
}

/* === DARK MODE (class-baserat) === */

.dark trix-editor {
  background: rgb(51 65 85);            /* slate-700 */
  border-color: rgb(71 85 105);         /* slate-600 */
  color: rgb(241 245 249);              /* slate-100 */
}

.dark trix-editor::placeholder,
.dark trix-editor [contenteditable]:empty::before {
  color: rgb(148 163 184);              /* slate-400 */
}

.dark trix-toolbar .trix-button-row {
  background: rgb(30 41 59);            /* slate-800 */
  border-color: rgb(71 85 105);
}

.dark trix-toolbar .trix-button-group {
  border-color: rgb(71 85 105);
}

.dark trix-toolbar .trix-button {
  color: rgb(203 213 225);              /* slate-300 */
  border-color: rgb(71 85 105);
}

.dark trix-toolbar .trix-button:hover:not([disabled]) {
  background: rgb(51 65 85);
  color: rgb(248 250 252);
}

.dark trix-toolbar .trix-button.trix-active {
  background: rgb(251 191 36);          /* amber-400 — samma som light */
  color: rgb(15 23 42);                 /* slate-900 — kontrasterar på amber */
}

.dark trix-toolbar .trix-dialogs {
  background: rgb(30 41 59);
  border-color: rgb(71 85 105);
  color: rgb(241 245 249);
}

.dark trix-toolbar .trix-input--dialog {
  background: rgb(51 65 85);
  color: rgb(241 245 249);
  border-color: rgb(71 85 105);
}

.dark trix-toolbar .trix-button--dialog {
  color: rgb(203 213 225);
}

/* === Inline media i rendering (trix-content) === */

.trix-content img {
  max-width: 600px;
  max-height: 480px;
  height: auto;
  border-radius: 0.375rem;
  margin: 0.5rem 0;
}

.trix-content video,
.trix-content audio {
  max-width: 600px;
  width: 100%;
  margin: 0.5rem 0;
}

.trix-content figure.attachment {
  margin: 0.5rem 0;
}

.trix-content figure.attachment img {
  display: block;
}

.trix-content figure.attachment .attachment__caption {
  font-size: 0.75rem;                   /* text-xs */
  color: rgb(100 116 139);              /* slate-500 */
  text-align: center;
  margin-top: 0.25rem;
}

.dark .trix-content figure.attachment .attachment__caption {
  color: rgb(148 163 184);              /* slate-400 */
}

/* När toolbar-knappar döljs av trix_controller.js: ev. tomma button-grupper
   ska gömmas helt så vi inte får orphan-dividers */
trix-toolbar .trix-button-group:has(> button[style*="display: none"]):not(:has(> button:not([style*="display: none"]))) {
  display: none;
}