/**
 * Design System — Sprint 52 consistency layer
 * Completes shared component contracts and bridges page-specific UIs
 * (watchlist / portfolio / admin) to the navy–teal token system.
 * No page-specific layouts — only visual language alignment.
 */

/* ═══════════════════════════════════════════════════════════════
   BADGES & STATUS PILLS
   ═══════════════════════════════════════════════════════════════ */

.badge {
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}

.badge--success,
.badge--buy {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 22%, transparent);
}

.badge--warning,
.badge--hold {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 22%, transparent);
}

.badge--error,
.badge--danger,
.badge--sell {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 22%, transparent);
}

.badge--info {
  background: var(--color-info-soft);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 22%, transparent);
}

.badge--neutral,
.badge--muted {
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
}

.pill--success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.pill--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.pill--danger,
.pill--error { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.pill--info { background: var(--color-info-soft); color: var(--color-info); border-color: transparent; }
.pill--accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }

.pill--dot::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* Align page-local status chips to shared badge language */
.wl-badge--buy {
  background: var(--color-success-soft) !important;
  color: var(--color-success) !important;
}
.wl-badge--hold {
  background: var(--color-warning-soft) !important;
  color: var(--color-warning) !important;
}
.wl-badge--sell {
  background: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — sizes, loading, focus
   ═══════════════════════════════════════════════════════════════ */

.btn-xs {
  padding: 0.28rem 0.65rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  gap: var(--space-1);
}

.btn:focus-visible,
.btn-icon:focus-visible,
.icon-button:focus-visible,
.pf-btn:focus-visible,
.wl-icon-btn:focus-visible,
.wl-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.btn.is-loading,
.pf-btn.is-loading,
.wl-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: 0.85;
}

.btn.is-loading::after,
.pf-btn.is-loading::after,
.wl-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-text-inverse);
  animation: ds-spin 0.65s linear infinite;
}

.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after,
.btn-outline.is-loading::after {
  color: var(--color-accent);
}

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

/* Map portfolio / watchlist buttons toward shared radius & motion */
.pf-btn,
.wl-btn {
  border-radius: var(--radius-md);
  transition:
    background var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-in-out);
}

.pf-btn:hover,
.wl-btn:hover,
.wl-icon-btn:hover {
  transform: translateY(-1px);
}

.pf-btn:active,
.wl-btn:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS — shared hover / radius language
   ═══════════════════════════════════════════════════════════════ */

.card,
.pf-panel,
.pf-card,
.wl-panel,
.wl-card,
.auth-card {
  border-radius: var(--radius-lg);
}

.card:not(.card--static):hover {
  box-shadow: var(--shadow-md);
}

.pf-panel,
.wl-panel,
.wl-table-wrap,
.pf-table-wrap {
  transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}

.pf-panel:hover,
.wl-panel:hover {
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.data-table tbody tr,
.wl-table tbody tr,
.pf-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.data-table tbody tr:hover,
.wl-table tbody tr:hover,
.pf-table tbody tr:hover {
  background: var(--color-surface-hover);
}

.data-table td[colspan],
.table-wrap td[colspan] {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  background: var(--color-surface-soft);
}

/* Pagination aliases */
.ca-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.ca-pagination a,
.ca-pagination span,
.ca-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}

.ca-pagination a:hover,
.ca-pagination button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.ca-pagination .is-active,
.ca-pagination [aria-current="page"] {
  background: var(--color-accent-muted);
  border-color: transparent;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════
   FORMS — admin filter parity
   ═══════════════════════════════════════════════════════════════ */

.admin-filter-bar .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 140px;
}

.admin-filter-bar .form-group label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.admin-filter-bar .form-group input,
.admin-filter-bar .form-group select {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.admin-filter-bar .form-group input:focus-visible,
.admin-filter-bar .form-group select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

/* ═══════════════════════════════════════════════════════════════
   MODALS — shared overlay language
   ═══════════════════════════════════════════════════════════════ */

.ui-modal,
.limit-modal,
.pf-modal,
.wl-modal,
.sa-progress-modal {
  --ds-modal-radius: var(--radius-xl);
}

.ui-modal__dialog,
.limit-modal__dialog,
.pf-modal__dialog,
.wl-modal__panel,
.sa-progress-modal__dialog {
  border-radius: var(--ds-modal-radius, var(--radius-xl));
  box-shadow: var(--shadow-xl);
}

.limit-modal__dialog {
  border: 1px solid var(--glass-border);
  background: var(--color-bg-elevated);
}

/* ═══════════════════════════════════════════════════════════════
   TOASTS & FLASH
   ═══════════════════════════════════════════════════════════════ */

.toast-rail {
  pointer-events: none;
}

.toast {
  pointer-events: auto;
}

.toast--warning {
  border-left: 3px solid var(--color-warning);
}

.dashboard-flash-region:empty,
.pf-flash:empty,
#pred-alert-region:empty {
  display: none;
}

.dashboard-flash-region .auth-alert,
.pf-flash .auth-alert {
  margin-bottom: var(--space-4);
  animation: ds-fade-in 220ms var(--ease-out);
}

@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   SKELETON / LOADING
   ═══════════════════════════════════════════════════════════════ */

.skeleton {
  border-radius: var(--radius-sm);
}

.page-enter {
  animation: ds-fade-in 280ms var(--ease-out);
}

.dashboard-shell__container > *:first-child {
  animation: ds-fade-in 240ms var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER DENSITY
   ═══════════════════════════════════════════════════════════════ */

.page-header {
  margin-bottom: var(--space-6);
}

.page-header__title {
  letter-spacing: -0.02em;
}

.section-header {
  margin-bottom: var(--space-4);
}

/* Align WL/PF topbars with page-header rhythm */
.wl-topbar,
.pf-topbar {
  margin-bottom: 0.25rem;
  gap: var(--space-3);
}

.wl-title,
.pf-topbar__title {
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   THEME BRIDGE — Portfolio & Watchlist
   ═══════════════════════════════════════════════════════════════ */

.pf-app,
.pf-modal {
  --pf-bg: transparent;
  --pf-card: var(--color-surface);
  --pf-card-border: var(--color-border);
  --pf-teal: var(--color-accent);
  --pf-teal-soft: var(--color-accent-soft);
  --pf-teal-strong: var(--color-accent-hover);
  --pf-text: var(--color-text);
  --pf-muted: var(--color-text-muted);
  --pf-pos: var(--color-success);
  --pf-neg: var(--color-danger);
  --pf-idx: var(--color-warning);
  --pf-radius: var(--radius-lg);
}

.wl-app {
  --wl-bg: transparent;
  --wl-card: var(--color-surface);
  --wl-card-strong: var(--color-bg-elevated);
  --wl-card-soft: var(--color-surface-soft);
  --wl-border: var(--color-border);
  --wl-text: var(--color-text);
  --wl-muted: var(--color-text-muted);
  --wl-accent: var(--color-accent);
  --wl-accent-soft: var(--color-accent-soft);
  --wl-pos: var(--color-success);
  --wl-neg: var(--color-danger);
  --wl-shadow: var(--shadow-lg);
}

html[data-theme="light"] .pf-app,
html[data-theme="light"] .pf-modal,
html[data-theme="light"] .wl-app {
  --pf-card: var(--color-surface);
  --wl-card: var(--color-surface);
  --wl-card-strong: var(--color-bg-elevated);
  --wl-shadow: var(--shadow-md);
}

/* Admin status pills → shared pill language */
.admin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
}

.admin-status-pill--healthy {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: transparent;
}

.admin-status-pill--degraded {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: transparent;
}

.admin-status-pill--offline {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .page-enter,
  .dashboard-shell__container > *:first-child,
  .toast,
  .dashboard-flash-region .auth-alert,
  .card:not(.card--static),
  .pf-btn,
  .wl-btn,
  .btn.is-loading::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY
   ═══════════════════════════════════════════════════════════════ */

.dashboard-shell__container,
.auth-page,
.admin-shell .dashboard-shell__container {
  overflow-x: clip;
  max-width: 100%;
}

.table-wrap,
.wl-table-wrap,
.pf-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .page-header {
    gap: var(--space-3);
  }

  .page-header__actions {
    width: 100%;
  }

  .page-header__actions .btn {
    flex: 1 1 auto;
  }

  .admin-kpi-grid,
  .admin-section-grid {
    grid-template-columns: 1fr;
  }

  .toast-rail {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }

  .wl-topbar__meta,
  .pf-topbar__meta {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .btn {
    white-space: normal;
  }

  .stat-card .text-stat {
    font-size: 1.5rem;
  }
}