/* RVR2A — Global admin design system (tokens + shared components) */

:root {
  /* Spacing */
  --rvr-space-1: 0.25rem;
  --rvr-space-2: 0.5rem;
  --rvr-space-3: 0.75rem;
  --rvr-space-4: 1rem;
  --rvr-space-5: 1.25rem;
  --rvr-space-6: 1.5rem;
  --rvr-space-7: 2rem;
  --rvr-space-8: 2.5rem;

  /* Radius */
  --rvr-radius-sm: 6px;
  --rvr-radius-md: 10px;
  --rvr-radius-lg: 14px;
  --rvr-radius-pill: 999px;

  /* Shadows */
  --rvr-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --rvr-shadow-hover: var(--rvr-shadow-card-hover);

  /* Status (mission control + shared semantics) */
  --rvr-status-ready: #3d9a62;
  --rvr-status-warn: #b8aa8e;
  --rvr-status-danger: #c45a4a;

  /* Typography scale */
  --rvr-type-display-sm: 0.72rem;
  --rvr-type-display-md: 0.8rem;
  --rvr-type-body: 1.05rem;
  --rvr-type-meta: 0.88rem;
  --rvr-type-kpi: 2rem;

  /* Motion */
  --rvr-transition-fast: 150ms ease;
  --rvr-transition-base: 200ms ease;

  /* Legacy aliases — single source via RVR tokens */
  --radius: var(--rvr-radius-md);
  --radius-sm: var(--rvr-radius-sm);
  --border: var(--rvr-border-default);
}

/* —— Page shell —— */
.container {
  padding: var(--rvr-space-6);
}

.page-title {
  margin: 0 0 var(--rvr-space-5);
  padding-bottom: var(--rvr-space-2);
}

.lead {
  margin: calc(var(--rvr-space-2) * -1) 0 var(--rvr-space-6);
}

/* —— Section headings —— */
.group-title,
.form-section-title {
  font-family: var(--font-display);
  font-size: var(--rvr-type-display-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: var(--rvr-space-6) 0 var(--rvr-space-3);
  color: var(--rvr-text-primary);
}

.group-title:first-child,
.form-section-title:first-child {
  margin-top: 0;
}

/* —— Card hierarchy —— */
.card {
  background: var(--rvr-surface-elevated);
  border: 1px solid var(--rvr-border-default);
  border-radius: var(--rvr-radius-md);
  padding: var(--rvr-space-5);
  margin-bottom: var(--rvr-space-4);
  box-shadow: var(--rvr-shadow-subtle);
  transition:
    border-color var(--rvr-transition-fast),
    box-shadow var(--rvr-transition-fast);
}

.card:focus-within {
  border-color: var(--rvr-border-emphasis);
  outline: 2px solid var(--rvr-royal-red);
  outline-offset: 2px;
}

.feature-card:hover {
  border-color: var(--rvr-border-emphasis);
  box-shadow: var(--rvr-shadow-hover);
}

.warn-box {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(40, 28, 8, 0.45);
}

.warn-box strong {
  color: var(--rvr-warning);
}

/* —— Button system —— */
.btn-primary {
  display: inline-block;
  margin-top: 0;
  padding: 0.65rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--rvr-royal-red);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--rvr-radius-sm);
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--rvr-transition-base), border-color var(--rvr-transition-base);
}

.btn-primary:hover {
  background: var(--accent-bright);
  color: #fff;
  box-shadow: none;
  transform: none;
}

.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-secondary {
  display: inline-block;
  margin-top: 0;
  margin-left: 0;
  padding: 0.65rem 1.15rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rvr-text-secondary);
  text-decoration: none;
  border: 1px solid var(--rvr-border-default);
  border-radius: var(--rvr-radius-sm);
  background: var(--rvr-surface-secondary);
  transition:
    color var(--rvr-transition-base),
    border-color var(--rvr-transition-base),
    background var(--rvr-transition-base);
}

.btn-secondary:hover {
  color: var(--rvr-text-primary);
  border-color: var(--rvr-border-emphasis);
  background: var(--rvr-surface-elevated);
}

.btn-ghost {
  display: inline-block;
  margin-top: 0;
  padding: 0.65rem 1.15rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rvr-text-secondary);
  text-decoration: none;
  border: 1px solid var(--rvr-border-default);
  border-radius: var(--rvr-radius-sm);
  background: transparent;
  transition:
    color var(--rvr-transition-base),
    border-color var(--rvr-transition-base),
    background var(--rvr-transition-base);
}

.btn-ghost:hover {
  color: var(--accent-bright);
  border-color: var(--rvr-border-emphasis);
  background: rgba(155, 35, 53, 0.08);
  box-shadow: none;
}

.btn-danger {
  border-radius: var(--rvr-radius-sm);
}

/* —— Badge system —— */
.badge {
  font-family: var(--font-body);
  font-size: var(--rvr-type-display-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--rvr-radius-sm);
}

.badge-on {
  background: rgba(34, 197, 94, 0.14);
  color: var(--rvr-success);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-off {
  background: rgba(161, 161, 170, 0.12);
  color: var(--rvr-text-secondary);
  border: 1px solid rgba(161, 161, 170, 0.28);
}

.badge-warn {
  background: rgba(245, 158, 11, 0.14);
  color: var(--rvr-warning);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-ok {
  background: rgba(34, 197, 94, 0.14);
  color: var(--rvr-success);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-early-access {
  font-size: var(--rvr-type-display-sm);
  border-radius: var(--rvr-radius-sm);
  color: var(--rvr-text-secondary);
  border-color: var(--rvr-border-emphasis);
}

/* —— Status colours (shared semantics) —— */
.dash-mc-status-ready,
.dash-mc-status-connected,
.dash-mc-status-healthy {
  color: var(--rvr-status-ready);
}

.dash-mc-status-setup_incomplete,
.dash-mc-status-not_configured,
.dash-mc-status-waiting,
.dash-mc-status-waiting_adm,
.dash-mc-status-checking,
.dash-mc-status-empty,
.dash-mc-status-not_enabled,
.dash-mc-status-previous_failures {
  color: var(--rvr-status-warn);
}

.dash-mc-status-needs_attention,
.dash-mc-status-failures,
.dash-mc-status-backlog,
.dash-mc-status-orders_waiting,
.dash-mc-status-locked {
  color: var(--rvr-status-danger);
}

.ok {
  color: var(--rvr-success);
}

.error {
  color: var(--rvr-danger);
}

/* —— Form spacing —— */
label {
  margin: var(--rvr-space-3) 0 var(--rvr-space-1);
  font-size: var(--rvr-type-meta);
  color: var(--rvr-text-secondary);
}

.form-grid {
  gap: var(--rvr-space-3) var(--rvr-space-4);
}

.field-section-start {
  margin-top: var(--rvr-space-3);
  padding-top: var(--rvr-space-3);
}

.form-section-lead {
  font-size: var(--rvr-type-meta);
}

.actions,
.sticky-actions {
  margin-top: var(--rvr-space-6);
  gap: var(--rvr-space-3);
}

input,
textarea,
select {
  border-radius: var(--rvr-radius-sm);
  border-color: var(--rvr-border-default);
  background: var(--rvr-surface-secondary);
}

/* —— Focus behaviour —— */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.topbar nav a:focus-visible,
.topbar nav .nav-dropdown-btn:focus-visible,
.events-filter-btn:focus-visible,
.events-list-tab:focus-visible {
  outline: 2px solid var(--rvr-royal-red);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rvr-royal-red);
  outline-offset: 2px;
  border-color: var(--rvr-royal-red);
  box-shadow: 0 0 0 3px var(--rvr-royal-red-muted);
}

/* —— Hover behaviour (links) —— */
a {
  transition: color var(--rvr-transition-base);
}

main a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.brand):hover {
  color: var(--accent-bright);
}

/* —— Borders & elevation utilities —— */
.nav-dropdown-menu {
  border-color: var(--rvr-border-default);
  box-shadow: var(--rvr-shadow-hover);
}

.topbar nav a.active,
.topbar nav .nav-dropdown-btn.active {
  border-color: var(--rvr-border-emphasis);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .feature-card,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  a {
    transition: none;
  }
}