/* Tom Select (static/js/tom-select-init.js, ADR-043) theme override — dark
   theme colors on top of static/css/vendor/tom-select.min.css's light-theme
   defaults. Loaded only on pages that use it (editorial/templates/editorial/
   blog_form.html), and deliberately AFTER the vendor file in that page's
   <head> — every selector below matches one in the vendor file at the exact
   same specificity, so winning depends on cascade order, not a specificity
   fight (this file's rules load second, so they win). Not part of the
   sitewide theme.min.css bundle (scripts/build_assets.py) since nothing
   else uses Tom Select yet; not minified either, given it's small and only
   ever loads on this one internal admin page. */

/* Full width, matching every other .account-form field on this page (Nome,
   Descrição, etc.) — a max-width cap here left Categoria looking visibly
   narrower than its full-width siblings. */
.ts-wrapper {
  width: 100%;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: var(--color-surface);
}

/* Two more vendor rules (each two classes, so more specific than the bare
   `.ts-control` override above and immune to file load order) that were
   still winning: `.disabled .ts-control` (defensive — nothing here
   actually disables the field on purpose) and `.full .ts-control` — `.full`
   is the class Tom Select puts on the wrapper once it already has a value,
   which is exactly the Editar (not Adicionar) page case: the control
   loads fine empty, then shows vendor white the moment an existing value
   is populated into it. */
.disabled .ts-control,
.full .ts-control {
  background: var(--color-surface);
  opacity: 1;
}

.ts-control,
.ts-control input,
.ts-dropdown {
  color: var(--color-text);
  /* Vendor sets 13px here (same selector, confirmed by reading the actual
     minified rule) — every other input on this form (.account-form input/
     textarea/select) renders at 16px via `font: inherit` from body, so
     Tom Select's own control and dropdown were the one visibly smaller
     thing on the page. */
  font-size: 1rem;
}

.ts-control {
  border-color: var(--color-border);
}

.ts-wrapper.multi.disabled .ts-control {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* Selected-item chips (multi-select) */
.ts-wrapper.multi .ts-control > div {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text);
}

.ts-wrapper.multi .ts-control > div.active {
  background: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface-raised));
  border-color: var(--color-accent);
  color: var(--color-text);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left-color: var(--color-border);
}

.ts-dropdown {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}

.ts-dropdown .optgroup-header {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.ts-dropdown .active {
  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent-text);
}

.ts-dropdown .create {
  color: var(--color-text-muted);
}

/* Tags' create-enabled dropdown shows both "Add X…" and "No results
   found" for a brand-new value — the second is just noise once the first
   already explains why nothing matched. */
.ts-dropdown-content:has(.create) .no-results {
  display: none;
}

/* ---------- Quill editor (static/js/quill-editor-init.js, ADR-044) ---------- */
/* Same load-order-wins strategy as the Tom Select rules above, against
   static/css/vendor/quill.snow.css's light-theme defaults — every selector
   below matches one there at the same specificity. .ql-editor/.ql-container
   themselves ship with no background/text color at all (confirmed by
   reading the vendor file directly), so those just need the site's own
   surface tokens; the toolbar icons/pickers/tooltip have hardcoded
   light-theme colors (#444/#fff/#ccc) that do need overriding. */

.quill-hide-source {
  display: none;
}

.quill-container {
  margin-bottom: var(--space-2);
}

.ql-toolbar.ql-snow {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.ql-container.ql-snow {
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
}

.ql-editor {
  color: var(--color-text);
  min-height: 220px;
}

.ql-editor.ql-blank::before {
  color: var(--color-text-muted);
}

.ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.ql-snow .ql-stroke {
  stroke: var(--color-text-muted);
}

.ql-snow .ql-fill {
  fill: var(--color-text-muted);
}

.ql-snow .ql-picker {
  color: var(--color-text-muted);
}

.ql-snow .ql-picker-options {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.ql-snow .ql-picker-item {
  color: var(--color-text);
}

.ql-snow .ql-tooltip {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.ql-snow .ql-tooltip input[type="text"] {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ---------- WP-style media modal (quill-editor-init.js's openMediaModal,
   <dialog id="quill-media-modal">, editorial/templates/editorial/
   blog_form.html) — the single toolbar entry point for every image
   insertion path (upload, paste, drop, and reusing an existing library
   image): a tabbed "Enviar arquivos" / "Biblioteca de mídia" grid on the
   left, an editable details panel for whichever item is selected on the
   right. Replaces the two separate modals (a plain upload-info dialog and
   a picker-only gallery dialog) this used to be split across — a user
   couldn't tell the two near-identical toolbar buttons apart, and this
   collapses them into one. ---------- */

.quill-media-tabs {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.quill-media-tab {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}

.quill-media-tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.quill-media-body {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.quill-media-main {
  flex: 1;
  min-width: 0;
}

.quill-media-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--color-text-muted);
}

.quill-media-upload.is-dragover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* Right-hand details panel — fixed width so the library grid to its left
   keeps a stable column count regardless of whether it's showing. */
.quill-media-details {
  flex: 0 0 260px;
  width: 260px;
}

@media (max-width: 640px) {
  .quill-media-body {
    flex-direction: column;
  }

  .quill-media-details {
    width: 100%;
  }
}

.quill-media-preview {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  object-fit: contain;
}

.quill-gallery-search {
  width: 100%;
  padding: 0.8rem 0.95rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.quill-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
  max-height: 50vh;
  overflow-y: auto;
}

.quill-gallery-item {
  position: relative;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
}

.quill-gallery-item:hover,
.quill-gallery-item:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

.quill-gallery-item.is-selected {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.quill-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Image resize (quill-editor-init.js's setupImageResize) ---------- */

.ql-image-selected {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* position: fixed + appended to <body> (not a wrapper around the image) —
   simplest way to place a handle relative to an arbitrary element without
   needing that element's own offsetParent to cooperate; the JS keeps it
   positioned via getBoundingClientRect() on select/drag/scroll/resize. */
.ql-image-resize-handle {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
  cursor: nwse-resize;
  z-index: 1000;
}

/* ---------- "Perpétuo / sem expiração" switch ----------
   The is_perpetual checkbox on the course/event/bootcamp/coupon forms,
   rendered as an on/off switch instead of theme.css's generic
   .account-form input[type="checkbox"] box. Scoped by #id (Django's
   auto id) so it overrides that rule and touches no other checkbox.
   static/js/perpetual-dates.js clears + disables the date inputs while
   it's on; the :disabled rule below makes that state read as locked,
   not just faintly greyed. */
.account-form #id_is_perpetual {
  appearance: none;
  -webkit-appearance: none;
  width: 2.75rem;
  height: 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--color-border);
  position: relative;
  transition: background 0.15s ease;
  cursor: pointer;
}

.account-form #id_is_perpetual::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.account-form #id_is_perpetual:checked {
  background: var(--color-accent);
}

.account-form #id_is_perpetual:checked::before {
  transform: translateX(1.25rem);
}

.account-form #id_is_perpetual:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.account-form input[type="date"]:disabled {
  opacity: 0.5;
  border-style: dashed;
  background: var(--color-surface-raised);
  cursor: not-allowed;
}