/* BR Times — Django Glue (adaptações Django/HTMX/Alpine para o app brtimes) */
/* NÃO usar cores hardcoded — usar var(--*) do 00-tokens.css */

/* ── Alpine.js ────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── HTMX loading states ──────────────────────────── */
/* Spinner genérico: aparece em qualquer elemento com hx-indicator */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Fade-out do conteúdo substituído enquanto novo carrega */
.htmx-settling { opacity: 0.5; }

/* ── Django messages (sistema de notificações) ────── */
.brt-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font: 400 14px/1.45 var(--font-sans);
  color: var(--fg);
  background: var(--surface);
  margin-bottom: 12px;
}
.brt-message--success {
  border-color: oklch(80% 0.12 145);
  background: oklch(97% 0.03 145);
  color: oklch(35% 0.12 145);
}
html.dark .brt-message--success {
  border-color: oklch(40% 0.10 145);
  background: oklch(22% 0.05 145);
  color: oklch(80% 0.14 145);
}
.brt-message--error {
  border-color: oklch(80% 0.14 25);
  background: oklch(97% 0.03 25);
  color: oklch(40% 0.18 25);
}
html.dark .brt-message--error {
  border-color: oklch(45% 0.16 25);
  background: oklch(22% 0.06 25);
  color: oklch(78% 0.15 25);
}
.brt-message--warning {
  border-color: oklch(85% 0.14 80);
  background: oklch(97% 0.04 80);
  color: oklch(45% 0.16 80);
}
html.dark .brt-message--warning {
  border-color: oklch(50% 0.14 80);
  background: oklch(22% 0.06 80);
  color: oklch(82% 0.14 80);
}
.brt-message--info {
  border-color: var(--border);
  background: var(--surface);
  color: var(--fg-muted);
}

/* ── Logo light/dark switching ────────────────────── */
/* Light mode: mostrar logo-light, ocultar logo-dark */
.brt-logo__img--dark  { display: none; }
.brt-logo__img--light { display: block; }
/* Dark mode: inverter */
html.dark .brt-logo__img--dark  { display: block; }
html.dark .brt-logo__img--light { display: none; }

/* ── Form validation (Django form errors) ─────────── */
.brt-input.is-invalid,
.brt-input[aria-invalid="true"] {
  border-color: oklch(65% 0.18 25);
}
.brt-input.is-invalid:focus,
.brt-input[aria-invalid="true"]:focus {
  border-color: oklch(55% 0.20 25);
  outline: 2px solid oklch(65% 0.18 25 / 0.25);
  outline-offset: 0;
}
.brt-field-error {
  font: 400 12px/1.4 var(--font-sans);
  color: oklch(50% 0.20 25);
  margin-top: 4px;
}
html.dark .brt-field-error { color: oklch(72% 0.16 25); }

/* ── Pagination (Django Paginator) ───────────────── */
.brt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 32px 0;
}
.brt-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.brt-pagination__btn:hover { background: var(--surface); border-color: var(--fg-muted); }
.brt-pagination__btn--active {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}
.brt-pagination__btn--active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--btn-fg);
}
.brt-pagination__btn:disabled,
.brt-pagination__btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.brt-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: var(--fg-muted);
  font: 400 14px/1 var(--font-sans);
}

/* ── Media embeds in article prose (rich-text / CKEditor output) ── */
.brt-prose figure {
  margin: 32px 0;
}
.brt-prose figure img,
.brt-prose figure video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.brt-prose iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 10px;
  display: block;
}
.brt-prose audio {
  width: 100%;
  margin: 16px 0;
}