/**
 * Global aesthetic discipline — Pass B.
 *
 * Goal: world-class baseline across every authenticated surface (manager,
 * portal, backend admin) so users don't experience a different visual
 * grammar on every page. Companion to manager-aesthetic-polish.css which
 * targets the manager-specific shell.
 *
 * Loaded from base templates AFTER design-tokens + Bootstrap + premium-os
 * stacks so it wins on specificity.
 *
 * What this file does:
 *   1. Empty-state hygiene — hide skeleton boxes that render with no content
 *   2. Card grammar — consistent radius / shadow / border / surface
 *   3. Typography rhythm — clean h1/h2/h3 scale, lead text, captions
 *   4. Spacing scale — `1rem` rhythm between siblings on canvas
 *   5. Section header — uppercase eyebrow + readable title
 *   6. Table polish — readable rows, subtle zebra, proper caption
 *   7. Form input polish — focus rings, padding, label hierarchy
 *   8. Button consistency — minimum 36px height, proper focus
 */

/* === 1. Empty-state hygiene ============================================= */

/* Common pattern: a card/strip/section is rendered with no actual content
 * (server didn't populate context). Hide them rather than show empty boxes. */
.rmc-empty-on-blank:empty,
[data-rmc-empty-hide]:empty,
[data-rmc-ai-out]:empty,
.rmc-os-status-stack:empty,
.rmc-os-payment-readiness-slot:empty {
  display: none !important;
}

/* Empty cards inside a container shouldn't take up vertical rhythm */
.card:empty,
.alert:empty {
  display: none !important;
}

/* Progress / status pills shown with no content */
.progress:not([data-rmc-progress-populated]):empty,
.rmc-os-status-strip:empty {
  display: none !important;
}

/* === 2. Card grammar ==================================================== */

:root {
  /* v2 theme system: alias card grammar through Apple semantic surfaces so a
     single token edit cascades. Specific values are fallbacks only. */
  --rmc-card-radius: var(--radius-md, 12px);
  --rmc-card-border: var(--border-width-hairline, 0.5px) solid var(--hairline, rgba(26, 22, 18, 0.08));
  --rmc-card-shadow: var(--elev-1, 0 1px 2px rgba(26, 22, 18, 0.04), 0 1px 1px rgba(26, 22, 18, 0.02));
  --rmc-card-shadow-hover: var(--elev-2, 0 8px 24px -8px rgba(26, 22, 18, 0.12), 0 2px 4px rgba(26, 22, 18, 0.04));
  --rmc-card-pad: clamp(0.875rem, 1vw + 0.5rem, 1.25rem);
  --rmc-canvas-bg: var(--surface-bg, #f6f7fb);
  --rmc-canvas-ink: var(--text-primary, #1a1612);
  --rmc-canvas-muted: var(--text-tertiary, rgba(26, 22, 18, 0.65));
}

/* Apply the card grammar broadly. Bootstrap default `.card` gets the
 * platform polish; opt-out by adding `.card-unstyled`. */
.card:not(.card-unstyled) {
  /* v2: cards explicitly use --surface-elevated so they visibly rise off the
     canvas in light, and use the elevated charcoal in dark. */
  background: var(--surface-elevated, #ffffff);
  color: var(--text-primary);
  border-radius: var(--rmc-card-radius);
  border: var(--rmc-card-border);
  box-shadow: var(--rmc-card-shadow);
  transition: box-shadow var(--motion-fast, 160ms) ease, transform var(--motion-fast, 160ms) ease;
}

.card:not(.card-unstyled):hover {
  box-shadow: var(--rmc-card-shadow-hover);
}

/* Don't animate cards inside tables or tight grids — over-stimulating */
.table .card:hover,
.dropdown .card:hover,
.modal .card:hover {
  transform: none;
  box-shadow: var(--rmc-card-shadow);
}

.card-header:not(.card-unstyled .card-header) {
  border-bottom: var(--rmc-card-border);
  background: rgba(26, 22, 18, 0.02); /* off-token-allow: always-dark-warm-bg */
  font-weight: 600;
  letter-spacing: -0.005em;
}

.card-body {
  padding: var(--rmc-card-pad);
}

.card-footer {
  background: rgba(26, 22, 18, 0.02); /* off-token-allow: always-dark-warm-bg */
  border-top: var(--rmc-card-border);
}

/* === 3. Typography rhythm =============================================== */

.page-h1,
.rmc-page-h1 {
  font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--rmc-canvas-ink);
}

.section-heading,
.rmc-section-heading,
.card-header h2,
.card-header h3,
.card-header .h6 {
  font-size: var(--type-size-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}

.section-lead,
.rmc-section-lead {
  color: var(--rmc-canvas-muted);
  font-size: var(--type-size-body);
  margin-bottom: 0.75rem;
}

.eyebrow,
.rmc-eyebrow {
  font-size: var(--type-size-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.55); /* off-token-allow: always-dark-warm-bg */
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* === 4. Spacing scale =================================================== */

.section-shell + .section-shell,
.card + .card,
.alert + .card,
.alert + .alert {
  margin-top: 1rem;
}

main > * + *,
.cp-main-col > * + *,
.portal-main-col > * + * {
  margin-top: 1rem;
}

/* Override the default page-stack class to use rhythm */
.page-stack > * + * {
  margin-top: 1rem;
}

/* === 5. Section header pattern ========================================= */

.rmc-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.rmc-section-header .section-heading {
  font-size: var(--type-size-body-l);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rmc-canvas-ink);
}

/* === 6. Table polish =================================================== */

.table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}

.table > thead {
  background: rgba(26, 22, 18, 0.03); /* off-token-allow: always-dark-warm-bg */
}

.table > thead th {
  font-size: var(--type-size-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rmc-canvas-muted);
  border-bottom: 1px solid rgba(26, 22, 18, 0.08);
  padding: 0.625rem 0.75rem;
}

.table > tbody > tr:hover > * {
  background: rgba(79, 70, 229, 0.03); /* off-token-allow: indigo-accent-overlay */
}

.table caption {
  caption-side: top;
  padding: 0.5rem 0.75rem;
  font-size: var(--type-size-caption);
  color: var(--rmc-canvas-muted);
}

/* === 7. Form input polish =============================================== */

.form-control,
.form-select {
  border-color: rgba(26, 22, 18, 0.15); /* off-token-allow: always-dark-warm-bg */
  border-radius: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--school-primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.form-label {
  font-size: var(--type-size-caption);
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--rmc-canvas-ink);
}

/* === 8. Button consistency ============================================= */

.btn:not(.btn-link):not(.btn-close):not(.btn-sm):not(.btn-lg) {
  min-height: 36px;
}

.btn-sm {
  min-height: 30px;
}

.btn:focus-visible {
  outline: 2px solid var(--school-primary, #4f46e5);
  outline-offset: 2px;
}

/* === 9. Badge polish =================================================== */

.badge {
  font-weight: 600;
  letter-spacing: 0.015em;
  padding: 0.3em 0.55em;
  border-radius: 999px;
}

.badge.text-bg-secondary,
.badge.bg-secondary {
  background: rgba(26, 22, 18, 0.08) !important; /* off-token-allow: always-dark-warm-bg */
  color: rgba(26, 22, 18, 0.75) !important; /* off-token-allow: always-dark-warm-bg */
}

/* === 10. Breadcrumb polish ============================================= */

.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: var(--type-size-caption);
}

.breadcrumb-item {
  color: var(--rmc-canvas-muted);
}

.breadcrumb-item.active {
  color: var(--rmc-canvas-ink);
  font-weight: 500;
}

.breadcrumb-item a {
  color: var(--rmc-canvas-muted);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--school-primary, #4f46e5);
  text-decoration: underline;
}

/* === 11. Reduce visual noise =========================================== */

/* Bootstrap's hard rules between dropdown items are too aggressive */
.dropdown-menu {
  /* v2 Apple popover recipe: hairline border + soft elevation + frosted material.
     `max-width: min(...)` caps width like Apple's HIG (no full-width submenus). */
  border: var(--border-width-hairline, 0.5px) solid var(--hairline, rgba(26, 22, 18, 0.1));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-popover, var(--surface-elevated, #ffffff));
  color: var(--text-primary);
  -webkit-backdrop-filter: var(--material-blur, saturate(180%) blur(20px));
  backdrop-filter: var(--material-blur, saturate(180%) blur(20px));
  box-shadow: var(--elev-3, 0 12px 32px -8px rgba(26, 22, 18, 0.18));
  padding: 0.35rem;
  max-width: min(360px, calc(100vw - 1rem));
}

.dropdown-item {
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: var(--type-size-body);
}

/* === 12. Alert polish ================================================== */

.alert {
  border-radius: 10px;
  border-left-width: 3px;
  padding: 0.75rem 1rem;
}

/* === 13. Skeleton hide-empty rules for layout components =============== */

/* These component classes are commonly rendered empty when context is missing. */
.platform-readiness-strip:empty,
.rmc-os-summary-strip:empty,
.cp-page-header:empty,
.cp-overview-grid:empty,
.cp-health-grid:empty,
.cp-hero-actions:empty {
  display: none !important;
}