/* admin-pages-brand.css — brand-teal cascade overlay for the
 * admin pages that don't have a dedicated brand stylesheet.
 *
 * Targets `admin/schedules/*`, `admin/events/*`, `admin/rooms`,
 * `admin/programs`, `admin/requests`, etc. Each of those pages
 * extends `base.html` and renders a hero header + a list of
 * cards / table rows. Most use Tailwind utility classes —
 * `global-brand.css` already maps `bg-indigo-* / text-indigo-*
 * / border-indigo-*` to brand teal sitewide. This file picks
 * up the rest:
 *
 *   1. Common neutral surfaces (slate borders / dividers) get
 *      a subtle teal tint so admin chrome reads as Syncc
 *      instead of generic-Tailwind-admin.
 *   2. The shared `.prop-card` / `.prop-status-pill` /
 *      `.prop-empty` primitives are wired to the brand palette
 *      (the heros were already done in #311; cards and the
 *      empty-state remain).
 *   3. Page-specific selectors used by the listed templates'
 *      inline <style> blocks (`.stl-*` schedules cards,
 *      `.evcal-*` event calendar cells, `.rooms-*` table rows,
 *      `.prog-*` program cards) get a teal accent on the
 *      "currently visible" / hover / active states without
 *      touching their layout.
 *
 * Theme awareness — accents defer to the school's
 * `--color-primary` (set per-school in base.html's <style> block),
 * with `--brand-teal` as the brand default and a hex literal as
 * the last-resort fallback. This means a future tenant who
 * swaps their primary color via the (planned) theme picker
 * gets accents that follow without us touching this file.
 *
 * Loaded after `global-brand.css` so the cascade order keeps
 * the indigo→teal mapping intact and just adds finer-grained
 * surface tinting on top.
 */

/* Local aliases — defer to school theme, then brand default,
 * then hex literal. Every override below uses these so a
 * future palette change happens in one place. */
:root {
  --bp-accent:       var(--color-primary, var(--brand-teal, #1AB994));
  --bp-accent-dark:  var(--color-primary-dark, var(--brand-teal-dark, #0F8A6B));
  --bp-accent-line:  color-mix(in srgb, var(--bp-accent) 28%, transparent);
  --bp-accent-soft:  color-mix(in srgb, var(--bp-accent) 10%, transparent);
}

/* ── Cards (prop-* primitives) ────────────────────────────── */

.prop-card {
  /* Subtle teal-tinted hairline replaces the prior plain
   * slate-200. On hover the border lights up a little brighter
   * so the affordance reads. */
  border-color: var(--brand-line, #e2e8f0);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.prop-card:hover {
  border-color: var(--bp-accent-line) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -12px var(--bp-accent-soft);
}

/* Empty-state — subtle teal-soft background instead of pure
 * slate so it feels like part of the brand surface. */
.prop-empty {
  background:
    linear-gradient(180deg,
      var(--bp-accent-soft),
      transparent 60%),
    #ffffff;
  border-color: var(--bp-accent-line);
}

/* ── Schedules list (.stl-*) ──────────────────────────────── */

main .stl-card {
  border-color: var(--brand-line, #e2e8f0) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
main .stl-card:hover {
  border-color: var(--bp-accent-line) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -12px var(--bp-accent-soft);
}
/* Period cells inside a template card — subtly tint the
 * background so the grid reads as branded chrome. */
main .stl-period-cell {
  background: var(--brand-paper-2, #fafdfc) !important;
  border-color: var(--brand-line, #e2e8f0) !important;
}

/* ── Schedules calendar (.cal-*, .week-*, etc.) ──────────── *
 * The calendar uses Tailwind utilities for the day-cell
 * accent + a custom `today` highlight. global-brand.css
 * already covers the Tailwind side; we add a hairline
 * teal stripe on the today cell. */
main .cal-today,
main [data-cal-today],
main .calendar-today {
  background: var(--bp-accent-soft) !important;
  border-color: var(--bp-accent-line) !important;
}

/* ── Events list + admin events ──────────────────────────── */

main .event-card,
main .ev-card {
  border-color: var(--brand-line, #e2e8f0) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
main .event-card:hover,
main .ev-card:hover {
  border-color: var(--bp-accent-line) !important;
  box-shadow: 0 8px 24px -12px var(--bp-accent-soft);
}

/* ── Rooms list (table) ───────────────────────────────────── */

main table.rooms-table tbody tr:hover,
main table.admin-rooms tbody tr:hover {
  background: var(--bp-accent-soft) !important;
}

/* ── Programs list ────────────────────────────────────────── */

main .prog-card,
main .program-card {
  border-color: var(--brand-line, #e2e8f0) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
main .prog-card:hover,
main .program-card:hover {
  border-color: var(--bp-accent-line) !important;
  box-shadow: 0 8px 24px -12px var(--bp-accent-soft);
}

/* ── Generic admin page hero (h1) — brand serif accent ───── *
 * Pages that don't use the prop-hero primitive still want a
 * branded title treatment. Match the .prop-hero-title weight
 * but lift the family to the brand display serif so the page
 * feels Syncc, not vanilla. Scoped to direct h1 children
 * of <main> so it doesn't accidentally restyle nested H1s. */
main > h1.page-title,
main > section > h1.page-title,
main > div > h1.page-title {
  font-family: var(--brand-font-display, 'Instrument Serif', 'Times New Roman', serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── Filter chip bar (used on requests + events lists) ──── *
 * The active tab's underline picks up brand teal instead of
 * the previous indigo-600 (already mapped via global-brand.css
 * for `border-indigo-600`, but the chips also use a hardcoded
 * status-color border in some templates). */
main .border-indigo-600,
main .border-b-2.border-indigo-600 {
  border-color: var(--bp-accent-dark) !important;
}
main .text-indigo-600 {
  color: var(--bp-accent-dark) !important;
}

/* ── Status pills (.prop-status-pill) ─────────────────────── *
 * The pills are inline-styled with literal hex backgrounds for
 * status colors (amber/emerald/rose/slate). Those map to
 * standard accessibility-tested status palettes — leave them
 * intact, but trim the border-radius to match the rest of the
 * brand chrome. */
main .prop-status-pill {
  border-radius: 6px;
  letter-spacing: 0.02em;
}