/* global-brand.css — Syncc brand sweep for shared admin surfaces
 *
 * The setup wizard, my-day, admin dashboard, and people module each
 * have their own dedicated brand overlays / templates. Every other
 * surface that extends base.html (rooms list, schedules list,
 * settings, events admin, account/security, etc.) uses Tailwind
 * utility classes against the indigo palette directly.
 *
 * This file maps the common indigo-* utilities to brand teal/navy
 * with high specificity so the cascade wins. It's loaded by
 * base.html *after* custom.css and brand.css, so brand variables
 * are already defined.
 *
 * Scope: anywhere inside main content (`main`, `.container`,
 * `.page`, etc.). The navbar's --color-nav / --color-primary still
 * come from the per-school theme — those are tenant-controlled and
 * we don't want to override them.
 */

/* ── Tailwind indigo backgrounds → brand teal ────────────────────────── */
main .bg-indigo-50,    .container .bg-indigo-50,
main .bg-indigo-100,   .container .bg-indigo-100 {
  background-color: var(--brand-teal-soft) !important;
}
main .bg-indigo-500,   .container .bg-indigo-500,
main .bg-indigo-600,   .container .bg-indigo-600 {
  background-color: var(--brand-teal) !important;
  color: var(--brand-navy) !important;
}
/* Hover must map to teal-dark — Gemini #273 caught that mapping it
 * to teal (same as the base) eliminates visual feedback on hover. */
main .hover\:bg-indigo-700:hover,
.container .hover\:bg-indigo-700:hover {
  background-color: var(--brand-teal-dark) !important;
  color: var(--brand-navy) !important;
}
main .bg-indigo-700,   .container .bg-indigo-700 {
  background-color: var(--brand-teal-dark) !important;
}

/* ── Tailwind indigo text → brand teal ───────────────────────────────── */
main .text-indigo-500, .container .text-indigo-500,
main .text-indigo-600, .container .text-indigo-600,
main .text-indigo-700, .container .text-indigo-700 {
  color: var(--brand-teal-dark) !important;
}
.dark main .text-indigo-500,
.dark .container .text-indigo-500,
.dark main .text-indigo-600,
.dark .container .text-indigo-600,
.dark main .text-indigo-700,
.dark .container .text-indigo-700 {
  color: var(--brand-teal-bright) !important;
}

/* ── Tailwind indigo borders → brand teal-line ───────────────────────── */
main .border-indigo-200, .container .border-indigo-200,
main .border-indigo-300, .container .border-indigo-300,
main .border-indigo-500, .container .border-indigo-500,
main .border-indigo-600, .container .border-indigo-600 {
  border-color: var(--brand-teal-line) !important;
}

/* ── Focus rings sitewide → teal ─────────────────────────────────────── */
main .focus\:ring-indigo-500:focus,
main .focus\:ring-indigo-300:focus,
.container .focus\:ring-indigo-500:focus,
.container .focus\:ring-indigo-300:focus {
  --tw-ring-color: var(--brand-teal) !important;
  /* Preserve any existing element shadow (e.g. shadow-sm on a card)
   * by composing with --tw-shadow. Gemini #273 caught that the bare
   * box-shadow override clobbered existing elevation on focus. */
  box-shadow: 0 0 0 3px var(--brand-teal-soft), var(--tw-shadow, 0 0 #0000) !important;
}
main .focus\:border-indigo-500:focus,
.container .focus\:border-indigo-500:focus {
  border-color: var(--brand-teal) !important;
}

/* ── Common shared "btn-primary" class from custom.css → brand ───────── */
main .btn-primary,
.container .btn-primary {
  background-color: var(--brand-teal) !important;
  color: var(--brand-navy) !important;
  border-color: transparent !important;
  font-weight: 600;
  transition: background-color var(--brand-dur-fast) var(--brand-ease),
              transform var(--brand-dur-fast) var(--brand-ease);
}
main .btn-primary:hover,
.container .btn-primary:hover {
  background-color: var(--brand-teal-bright) !important;
  transform: translateY(-1px);
}

/* ── Status indicator primitive (from maintenance.css) — leave as-is.
 * Already follows the "small dot + restrained slate text" rule per
 * CLAUDE.md. The dot itself uses a per-tone color; that's correct. */

/* ── Page titles inside main → optional serif accent ──────────────────
 * Targets H1s that aren't already styled by a module's brand overlay
 * (which would set its own font-family). We use :where() to keep
 * specificity minimal so module-specific overlays still win. */
:where(main, .container) :is(.page-title, .admin-page-title) {
  font-family: var(--brand-font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
}
:where(main, .container) :is(.page-title, .admin-page-title) em {
  font-style: italic;
  color: var(--brand-teal-dark);
}
.dark :where(main, .container) :is(.page-title, .admin-page-title) em {
  color: var(--brand-teal-bright);
}

/* ── Common card chrome — drop heavy shadows, lean on hairline ───────── */
main .shadow-md,    .container .shadow-md,
main .shadow-lg,    .container .shadow-lg,
main .shadow-xl,    .container .shadow-xl {
  box-shadow: var(--brand-shadow-sm) !important;
}

/* ── Slate-50 / slate-100 page backgrounds → warm paper ───────────────
 * Only at the body / html level; preserves slate inside cards where
 * it's used intentionally (zebra stripes, hover states). The !important
 * is required because base.html applies `class="bg-slate-50"` on the
 * <html> tag, and Tailwind's utility class wins specificity otherwise.
 * Gemini #273 flagged this — the brand background was silently not
 * being applied without the override. */
html, body {
  background-color: var(--brand-paper) !important;
}
.dark html, .dark body {
  background-color: var(--brand-page-deep) !important;
}