/* rmc-cool-apple-polish.css
 *
 * v2.53 (2026-05-15) — platform-wide Apple-style polish layer for the
 * cool-apple aesthetic. Loaded after rmc-warm-bright-school.css on every
 * shell (portal_base, base, control_plane_skeleton, admin/base_site,
 * marketing/base_marketing) so the SAME Apple grammar applies to tenant,
 * operator, marketing, and admin surfaces alike.
 *
 * The previous wave (v2.52) scoped these rules to `#cp-main-content` —
 * manager-only. The user flagged this: platform-wide means EVERY shell,
 * not just the manager. This layer rebroadcasts the same Apple treatment
 * across the universal main-content selector list:
 *
 *   #main-content        — portal_base, base, marketing
 *   #cp-main-content     — control_plane_skeleton (manager)
 *   #content             — Django admin
 *   [data-rmc-shell-main] — any shell decorating its main wrapper
 *
 * All rules gate on `[data-rmc-aesthetic="cool-apple"]` so tenants who
 * keep warm-bright (the default) see no change.
 *
 * Reference: aesthetic_preview.html (the mockup the user provided).
 * Tokens consumed: --apple-elev-{1,2,3}, --apple-focus-ring,
 * --apple-material-bg, --apple-material-border, --apple-material,
 * --hairline, --hairline-strong, --surface-canvas, --text-primary,
 * --text-secondary, --text-tertiary. All defined in design-tokens.css
 * + rmc-warm-bright-school.css and theme-cascading.
 */

/* === Surface tokens repoint when cool-apple is active ==================== *
 * The pre-existing .cp-* CSS variables (--cp-panel-bg, --cp-shadow, etc.)
 * stay dark-deep-navy by default. When cool-apple is the active aesthetic
 * we re-point them to the Apple equivalents so every .cp-* card across the
 * manager surface automatically gets the Apple grammar without per-rule
 * rewrites. (This block already existed in manager-aesthetic-polish.css;
 * re-stating here so the file is self-contained — duplicate values don't
 * affect cascade.) */
[data-rmc-aesthetic="cool-apple"] {
  --cp-panel-bg: var(--surface-canvas);
  --cp-panel-border: var(--hairline-strong);
  --cp-shadow: var(--apple-elev-2);
  --cp-bg: var(--surface-bg);
  --cp-text: var(--text-primary);
  --cp-muted: var(--text-tertiary);
}

/* === Main content area background + card surfaces ======================== *
 * Universal selector list catches every shell's main wrapper. The cards
 * inside each shell adopt the Apple squircle radius + layered elevation. */
[data-rmc-aesthetic="cool-apple"][data-theme="light"] #main-content,
[data-rmc-aesthetic="cool-apple"][data-theme="light"] #cp-main-content,
[data-rmc-aesthetic="cool-apple"][data-theme="light"] #content,
[data-rmc-aesthetic="cool-apple"][data-theme="light"] [data-rmc-shell-main] {
  background-color: var(--surface-bg);
  color: var(--text-primary);
}

/* Card grammar — every card-like surface inside the main content area. */
[data-rmc-aesthetic="cool-apple"][data-theme="light"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(.card, .rmc-acx-glass-panel, .rmc-acx-metric-card, .rmc-acx-drawer, .rmc-zero-click, .rmc-os-page-header, .rmc-wcx-surface, .studio-os__card, .cp-overview-card, .cp-panel, .cp-readiness-card, .cp-health-card, .cp-footprint-card, .cp-table-card, .cp-stack-card, .cp-queue-card, .cp-workstream-card, .rmc-wcx-metric, .rmc-wcx-card) {
  background-color: var(--surface-canvas);
  border: 1px solid var(--hairline);
  box-shadow: var(--apple-elev-1);
  color: var(--text-primary);
  border-radius: 16px;
}

/* Dark mode — same selectors, dark Apple elevations. */
[data-rmc-aesthetic="cool-apple"][data-theme="dark"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(.card, .rmc-acx-glass-panel, .rmc-acx-metric-card, .rmc-acx-drawer, .rmc-zero-click, .rmc-os-page-header, .rmc-wcx-surface, .studio-os__card, .cp-overview-card, .cp-panel, .cp-readiness-card, .cp-health-card, .cp-footprint-card, .cp-table-card, .cp-stack-card, .cp-queue-card, .cp-workstream-card, .rmc-wcx-metric, .rmc-wcx-card) {
  background-color: var(--surface-canvas);
  border: 1px solid var(--hairline);
  box-shadow: var(--apple-elev-1);
  color: var(--text-primary);
  border-radius: 16px;
}

/* === Apple focus ring on every focusable element across all surfaces ===== */
[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--apple-focus-ring);
  border-radius: 8px;
}

/* === Typography tracking — display + heading hierarchy =================== *
 * Applies across every shell's main content area when cool-apple is on.
 * The body baseline (-0.005em) is already set in design-tokens.css; here
 * we tighten display and headings to the mockup spec. */
[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(h1, .h1, .display-1, .display-2, .page-h1, .cp-hero-title) {
  letter-spacing: -0.025em;
  font-weight: 700;
}

[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(h2, .h2, .cp-panel-title) {
  letter-spacing: -0.015em;
  font-weight: 700;
}

[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(h3, .h3, h4, .h4) {
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* === Top-of-page chrome — apple frosted material ========================= */
[data-rmc-aesthetic="cool-apple"] :is(.cp-navbar.statement-header, .portal-topbar, .mkt-topbar, .navbar-brand-bar) {
  background: var(--apple-material-bg);
  border-bottom: 1px solid var(--apple-material-border);
  backdrop-filter: var(--apple-material);
  -webkit-backdrop-filter: var(--apple-material);
}

[data-rmc-aesthetic="cool-apple"] .cp-primary-nav {
  background: var(--apple-material-bg) !important;
  border-bottom: 1px solid var(--apple-material-border) !important;
  backdrop-filter: var(--apple-material);
  -webkit-backdrop-filter: var(--apple-material);
}

/* === Chips — apple pill grammar ========================================== */
[data-rmc-aesthetic="cool-apple"] [data-rmc-cp-chip-row] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

[data-rmc-aesthetic="cool-apple"] .cp-chip {
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: var(--type-size-caption);
  font-weight: 600;
  background: var(--surface-canvas);
  border: 1px solid var(--hairline-strong);
  color: var(--text-secondary);
}

/* === Buttons — apple radius + subtle hover lift ========================== *
 * Bootstrap .btn keeps its base; we just lift the radius to apple spec and
 * add a soft hover translate. */
[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) .btn {
  border-radius: 10px;
  transition: transform var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
              box-shadow var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}

[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) .btn:hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
}

[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) .btn:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
}

/* === Inputs — apple grammar (rounded + hairline + focus glow) ============ */
[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(.form-control, .form-select) {
  border-radius: 10px;
  border-color: var(--hairline-strong);
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  transition: border-color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
              box-shadow var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}

[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) :is(.form-control, .form-select):focus {
  border-color: color-mix(in oklab, var(--school-primary) 60%, var(--hairline-strong));
  box-shadow: var(--apple-focus-ring);
  outline: none;
}

/* === Sticky page-hero spacing rhythm ===================================== *
 * Apple-style sections breathe more. Slight padding bump on hero + section
 * containers when cool-apple is active. */
[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) > section,
[data-rmc-aesthetic="cool-apple"] :is(#main-content, #cp-main-content, #content, [data-rmc-shell-main]) > div.container-fluid > section {
  margin-bottom: 1.5rem;
}

/* ========================================================================== */
/* BRAND MARK — v2.56 (2026-05-15)                                             */
/* ========================================================================== */
/*
 * Platform brand-mark grammar (templates/components/rmc_brand_mark.html).
 * Crisp from 16px favicon to 80px hero. Tenant SiteSettings.logo overrides
 * the platform default; otherwise we render the gradient squircle monogram.
 * Available on EVERY shell because rmc-cool-apple-polish.css is loaded
 * platform-wide.
 *
 * Sizes consumed via the --rmc-bm-size custom property set inline by the
 * include tag, so the same CSS handles 16/20/24/28/32/40/56/80 without per-
 * size classes.
 */

.rmc-brand-mark-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.rmc-brand-mark-link:hover,
.rmc-brand-mark-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.rmc-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Variants — mark (squircle only) vs lockup (squircle + wordmark).
   Defined explicitly so the undefined-css scanner is happy with the
   dynamic .rmc-brand-mark--{{ variant }} suffix in the component. */
.rmc-brand-mark--mark {
  gap: 0;
}

.rmc-brand-mark--lockup {
  gap: 0.65rem;
}

.rmc-brand-mark--lockup-inline {
  gap: 0.65rem;
}

.rmc-brand-mark__squircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rmc-bm-size, 32px);
  height: var(--rmc-bm-size, 32px);
  /* Tenant brand cascade — three-layer fallback chain:
     (1) `--brand-gradient` — composed by design-tokens.css from
         --brand-gradient-angle/start/end, where -end is set from the
         tenant's RuntimeDefaults.brand_gradient_end via the meta-tag
         bridge. This is what wins when a tenant has *any* explicit
         brand gradient set. Always defined at :root so this always
         resolves; the fallback below only fires if a downstream
         stylesheet unsets it.
     (2) `linear-gradient(... --school-primary ...)` — defensive
         fallback if --brand-gradient ever becomes unset.
     (3) hardcoded indigo→emerald hex — last-resort fallback if even
         --school-primary is unset (e.g. an isolated component preview). */
  background: var(--brand-gradient,
    linear-gradient(var(--brand-gradient-angle, 135deg),
      var(--brand-gradient-start, var(--school-primary, #4f46e5)),
      var(--brand-gradient-end, color-mix(in oklab, var(--school-primary, #4f46e5) 70%, var(--school-accent, #10b981)))
    ));
  /* Apple-style squircle radius scales with size: ~22% of side. */
  border-radius: calc(var(--rmc-bm-size, 32px) * 0.22);
  color: #ffffff; /* off-token-allow: hex-literal-decorative */
  position: relative;
  overflow: hidden;
  /* Subtle inset highlight for premium feel (mimics the mockup). */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(15, 23, 42, 0.18);
}

.rmc-brand-mark__glyph {
  width: 100%;
  height: 100%;
  display: block;
}

.rmc-brand-mark__tenant-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* When a real logo image is present, the squircle backdrop becomes a quiet
   neutral surface so the artwork reads cleanly instead of fighting the
   indigo->emerald monogram gradient. The CSS-only light/dark swap below
   keeps the JS-free contract from the partial. */
.rmc-brand-mark--has-image .rmc-brand-mark__squircle {
  background: var(--surface-elevated, rgba(255, 255, 255, 0.92));
  padding: calc(var(--rmc-bm-size, 32px) * 0.08);
}
.cp-navbar .rmc-brand-mark--has-image .rmc-brand-mark__squircle,
[data-resolved-theme="dark"] .rmc-brand-mark--has-image .rmc-brand-mark__squircle {
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
}

/* JS-free light/dark image swap — both <img> tags ship in the DOM; the
   resolved theme picks which one is visible. Default state shows the
   light variant; dark theme reveals the dark variant and hides the light.
   When only one variant was configured, the partial omits the other tag
   so there's nothing to hide. */
.rmc-brand-mark__tenant-logo--dark { display: none; }
[data-resolved-theme="dark"] .rmc-brand-mark__tenant-logo--light,
.cp-navbar .rmc-brand-mark__tenant-logo--light { display: none; }
[data-resolved-theme="dark"] .rmc-brand-mark__tenant-logo--dark,
.cp-navbar .rmc-brand-mark__tenant-logo--dark { display: block; }

.rmc-brand-mark__wordmark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  min-width: 0;
}

.rmc-brand-mark__title {
  font-weight: 700;
  font-size: calc(var(--rmc-bm-size, 32px) * 0.5);
  letter-spacing: -0.015em;
  color: var(--text-primary, inherit);
  white-space: nowrap;
  /* Brand text must never clip — that was the original bug. */
  overflow: visible;
  text-overflow: clip;
}

.rmc-brand-mark__subtitle {
  font-size: calc(var(--rmc-bm-size, 32px) * 0.32);
  font-weight: 500;
  color: var(--text-tertiary, inherit);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15em;
  white-space: nowrap; /* horizontal-overflow-risk-allow: short-controlled-content-by-design */
}

/* When the mark sits inside the dark cp-navbar, force the wordmark text
   to read as light against the dark gradient. */
.cp-navbar .rmc-brand-mark__title,
.cp-navbar .rmc-brand-mark__subtitle,
[data-resolved-theme="dark"] .cp-navbar .rmc-brand-mark__title,
[data-resolved-theme="dark"] .cp-navbar .rmc-brand-mark__subtitle {
  color: rgba(255, 255, 255, 0.95); /* off-token-allow: white-overlay */
}

[data-resolved-theme="dark"] .rmc-brand-mark__squircle {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.40);
}

/* ========================================================================== */
/* TOPBAR FIXES — v2.56                                                        */
/* ========================================================================== */

/* Brand container must NEVER truncate. Earlier the navbar-brand inherited
   Bootstrap's flex behavior that allowed flex-shrink, clipping the title
   to "RunMyCampus Man...". `.statement-header` is the shared brand-bar
   class across cp-navbar (manager), portal topbar, base nav, and marketing
   nav — one rule, all shells. */
.statement-header .navbar-brand,
.statement-header .statement-logo,
.statement-header .mkt-brand,
.statement-header .rmc-brand-mark {
  flex-shrink: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  max-width: none;
}

/* Topbar actions area should grow to fill the wasted whitespace between
   brand and the right-side button cluster. */
.cp-navbar .cp-topbar-actions {
  flex-grow: 1;
}

/* Manager / platform header search + kbd: canonical rules in rmc-platform-header.css
   ([data-rmc-platform-header="manager"] toolbar row). Legacy cp-navbar rules below
   apply only outside the manager platform header. */
.cp-navbar:not([data-rmc-shell-header="control-plane"]) .cp-topbar-search-wrap {
  flex-grow: 1;
  max-width: 520px;
  min-width: 240px;
  margin-right: auto;
}

.cp-navbar:not([data-rmc-shell-header="control-plane"]) .cp-topbar-search-input {
  border-radius: 999px;
  padding: 0 4.25rem 0 1rem;
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
  border: 1px solid rgba(255, 255, 255, 0.10); /* off-token-allow: white-overlay */
  color: rgba(255, 255, 255, 0.92); /* off-token-allow: white-overlay */
  height: var(--rmc-header-control-height, 2.375rem);
  min-height: var(--rmc-header-control-height, 2.375rem);
  box-sizing: border-box;
}

.cp-navbar:not([data-rmc-shell-header="control-plane"]) .cp-topbar-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55); /* off-token-allow: white-overlay */
}

.cp-navbar:not([data-rmc-shell-header="control-plane"]) .cp-topbar-search-input:focus {
  background: rgba(255, 255, 255, 0.10); /* off-token-allow: white-overlay */
  border-color: rgba(129, 140, 248, 0.55); /* off-token-allow: rgba-decorative */
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
  outline: none;
  color: #ffffff; /* off-token-allow: hex-literal-decorative */
}

.cp-navbar:not([data-rmc-shell-header="control-plane"]) .cp-topbar-search-wrap .cp-search-kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
  border: 1px solid rgba(255, 255, 255, 0.14); /* off-token-allow: white-overlay */
  color: rgba(255, 255, 255, 0.78); /* off-token-allow: white-overlay */
  line-height: 1;
  user-select: none;
}

.cp-topbar-search-wrap .cp-search-kbd[data-rmc-hide-when-focused] {
  transition: opacity 120ms var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}

.cp-navbar:not([data-rmc-shell-header="control-plane"]) .cp-topbar-search-wrap .cp-topbar-search-input:focus ~ .cp-search-kbd {
  opacity: 0;
}

/* ========================================================================== */
/* ACTIVE PRIMARY NAV PILL — v2.56                                             */
/* ========================================================================== */
/*
 * The current page's pill needs to be unmistakeable. Previous styling was a
 * slightly darker tone-on-tone that read as "another pill" rather than
 * "this is where you are." Apple HIG pattern: filled gradient + soft shadow
 * + downward 1px translate.
 */
.cp-primary-nav__pill--active,
.cp-primary-nav__pill[aria-current="page"] {
  background: linear-gradient(135deg,
    var(--school-primary, #4f46e5),
    color-mix(in oklab, var(--school-primary, #4f46e5) 65%, var(--school-accent, #10b981))
  ) !important;
  color: #ffffff !important; /* off-token-allow: hex-literal-decorative */
  border-color: transparent !important;
  font-weight: 600;
  box-shadow:
    0 4px 12px -2px color-mix(in oklab, var(--school-primary, #4f46e5) 35%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
  position: relative;
}

.cp-primary-nav__pill--active i,
.cp-primary-nav__pill[aria-current="page"] i {
  color: rgba(255, 255, 255, 0.95); /* off-token-allow: white-overlay */
}

/* ========================================================================== */
/* NOTIFICATION BELL + INLINE THEME TOGGLE — v2.56                             */
/* ========================================================================== */

.cp-topbar-bell:not(.rmc-platform-header__icon-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
  border: 1px solid rgba(255, 255, 255, 0.10); /* off-token-allow: white-overlay */
  color: rgba(255, 255, 255, 0.92); /* off-token-allow: white-overlay */
  text-decoration: none;
  transition: background 140ms var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}

.cp-topbar-bell:hover,
.cp-topbar-bell:focus-visible {
  background: rgba(255, 255, 255, 0.10); /* off-token-allow: white-overlay */
  color: #ffffff; /* off-token-allow: hex-literal-decorative */
  outline: none;
}

.cp-topbar-bell__badge {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  transform: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444; /* off-token-allow: hex-literal-decorative */ /* color-contrast-allow: notification-count-badge-bold-12px-effective-large-text */
  color: #ffffff; /* off-token-allow: hex-literal-decorative */
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(11, 17, 32, 0.85);
}

/* v4.01.08: `.cp-topbar-theme-toggle` rules retired — toggle hoisted to
   templates/components/header_theme_chip.html SOT in v4.01.07.  See
   docs/CSS_RETIREMENT_DOCKET.md for the full retirement entry. */

/* ========================================================================== */
/* CONSOLIDATED TOP CHROME — v2.56                                             */
/* ========================================================================== */
/*
 * The previous two-bar stack (navbar + cp-primary-nav with its own border)
 * ate ~120px vertical. Pull them together visually: drop the navbar border
 * and tighten the primary-nav padding so they read as one floating chrome.
 */
.cp-navbar.statement-header {
  border-bottom: none;
  padding-block: 0.5rem;
}

.cp-primary-nav {
  padding-block: 0.4rem !important;
}