/* =============================================================
 * admin-common.css — Legacy compatibility shim
 * -------------------------------------------------------------
 * Pages link BOTH:
 *   /portal/portal.css   → modern design system (primary)
 *   /portal/admin-common.css → this file (legacy aliases)
 *
 * This file ONLY provides aliases so old inline class names
 * (`.primary` / `.secondary` / `.ghost` / `.danger` / etc.)
 * keep working after pages are refactored to the new system.
 * New pages should use the modern `.btn` / `.card` / `.stat-card`
 * classes from portal.css directly.
 * ============================================================= */

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.topnav a {
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elev-2);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  transition: transform 120ms ease, background 120ms ease;
}

.topnav a:hover {
  transform: translateY(-1px);
  background: var(--bg-elev-3);
  color: var(--text-default);
}

.topnav a.is-current {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
  border-color: transparent;
  color: var(--text-on-primary);
  box-shadow: 0 4px 12px rgba(20,184,166,0.3);
}

.statusbar {
  margin-top: 16px;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.statusbar[data-tone="success"] {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: rgba(18, 107, 67, 0.2);
}

.statusbar[data-tone="warning"] {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border-color: rgba(155, 98, 21, 0.2);
}

.statusbar[data-tone="danger"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: rgba(178, 49, 49, 0.2);
}

.statusbar[data-tone="info"] {
  background: var(--color-info-soft);
  color: var(--color-info);
  border-color: rgba(56, 189, 248, 0.2);
}

/* ---- Legacy button aliases (kept so old pages work) ---- */
button.primary, .primary {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
  color: var(--text-on-primary);
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 6px 16px rgba(20,184,166,0.22);
}
button.primary:hover, .primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(20,184,166,0.32); }
button.primary:disabled, .primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

button.secondary, .secondary {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
button.secondary:hover, .secondary:hover { transform: translateY(-1px); background: rgba(20,184,166,0.18); }

button.ghost, .ghost {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}
button.ghost:hover, .ghost:hover { transform: translateY(-1px); background: var(--bg-elev-3); color: var(--text-default); }

button.danger, .danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
button.danger:hover, .danger:hover { transform: translateY(-1px); background: rgba(239,68,68,0.18); }