/**
 * FlowPay design system — shared tokens, status colors, skeletons, animations.
 * Load after flowpay-brand.css, before app.css / operator.css.
 */
:root {
  --fp-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fp-text-base: 14px;
  --fp-text-meta: 12px;

  /* Command Center semantic tokens (dark defaults) */
  --fp-bg-canvas: #080D14;
  --fp-bg-sidebar: #0C131C;
  --fp-bg-surface: #101923;
  --fp-bg-raised: #162030;
  --fp-border: #243247;
  --fp-border-strong: #31445C;
  --fp-text: #E8EEF6;
  --fp-text-muted: #8B97A8;
  --fp-accent: #2DE2C4;
  --fp-accent-hover: #5EEBD4;
  --fp-info: #4C8DFF;
  --fp-success: #22C55E;
  --fp-warning: #F59E0B;
  --fp-danger: #EF4444;
  --fp-radius-sm: 10px;
  --fp-radius-md: 14px;
  --fp-radius-lg: 20px;
  --fp-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.32);
  --fp-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.48);
  --fp-focus-ring: color-mix(in srgb, var(--fp-accent) 35%, transparent);

  --fp-status-waiting: #4C8DFF;
  --fp-status-requisite: #F59E0B;
  --fp-status-pay: #F97316;
  --fp-status-check: #EAB308;
  --fp-status-success: #22C55E;
  --fp-status-fail: #EF4444;

  --fp-skeleton-base: rgba(255, 255, 255, 0.06);
  --fp-skeleton-shine: rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] {
  --fp-bg-canvas: #F0F4F8;
  --fp-bg-sidebar: #E7EDF4;
  --fp-bg-surface: #FFFFFF;
  --fp-bg-raised: #F3F6FA;
  --fp-border: #D5DEE8;
  --fp-border-strong: #B8C5D4;
  --fp-text: #0F1B2D;
  --fp-text-muted: #5B6B7C;
  --fp-accent: #0F9F8C;
  --fp-accent-hover: #12B8A0;
  --fp-info: #3B7AE8;
  --fp-success: #16A34A;
  --fp-warning: #D97706;
  --fp-danger: #DC2626;
  --fp-shadow-card: 0 8px 24px rgba(15, 27, 45, 0.08);
  --fp-shadow-overlay: 0 20px 48px rgba(15, 27, 45, 0.16);
  --fp-focus-ring: color-mix(in srgb, var(--fp-accent) 28%, transparent);
  --fp-skeleton-base: rgba(15, 27, 45, 0.06);
  --fp-skeleton-shine: rgba(15, 27, 45, 0.12);
}

html {
  font-family: var(--fp-font);
  font-size: var(--fp-text-base);
}

.muted-sm, .hint, .sub, .label {
  font-size: var(--fp-text-meta);
}

/* Status pills — unified palette */
.status-pill.waiting,
.status-pill.wait,
.badge.status-waiting { background: color-mix(in srgb, var(--fp-status-waiting) 18%, transparent); color: var(--fp-status-waiting); }
.status-pill.rek,
.status-pill.requisite,
.badge.status-requisite { background: color-mix(in srgb, var(--fp-status-requisite) 18%, transparent); color: var(--fp-status-requisite); }
.status-pill.pay,
.badge.status-pay { background: color-mix(in srgb, var(--fp-status-pay) 18%, transparent); color: var(--fp-status-pay); }
.status-pill.check,
.badge.status-check { background: color-mix(in srgb, var(--fp-status-check) 22%, transparent); color: var(--fp-status-check); }
.status-pill.success,
.badge.status-success { background: color-mix(in srgb, var(--fp-status-success) 18%, transparent); color: var(--fp-status-success); }
.status-pill.fail,
.badge.status-fail { background: color-mix(in srgb, var(--fp-status-fail) 18%, transparent); color: var(--fp-status-fail); }

/* Health / alert cards */
.health-card { border-radius: 10px; padding: .85rem 1rem; }
.health-card.ok { border: 1px solid color-mix(in srgb, var(--fp-status-success) 40%, transparent); }
.health-card.warn { border: 1px solid color-mix(in srgb, var(--fp-status-check) 50%, transparent); }
.health-card.danger { border: 1px solid color-mix(in srgb, var(--fp-status-fail) 45%, transparent); }

/* Skeleton loading */
@keyframes fp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton,
.skeleton-line,
.skeleton-card {
  background: linear-gradient(90deg, var(--fp-skeleton-base) 25%, var(--fp-skeleton-shine) 50%, var(--fp-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: fp-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-line { height: 14px; margin-bottom: .5rem; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-card { height: 72px; }

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}

/* Tab / panel transitions */
.tab:not(.hidden) {
  animation: fp-fade-in .18s ease-out;
}

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

/* Critical timer pulse only */
.timer.urgent,
.timer[data-urgent="1"] {
  animation: fp-pulse-urgent 1.2s ease-in-out infinite;
}

@keyframes fp-pulse-urgent {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}

/* Shared empty state */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted, #8b95a8);
  font-size: var(--fp-text-meta);
}

/* Stat card baseline */
.stat-card .label {
  font-size: var(--fp-text-meta);
  text-transform: none;
  letter-spacing: 0;
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fp-cyan) 70%, white);
  outline-offset: 2px;
}

.table-wrap thead th,
.history-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface, #111827);
}

@media (pointer: coarse) {
  :where(button, .btn, input, select, summary) { min-height: 44px; }
  :where(button, .btn, summary, [role="button"], .op-appeal-attach) {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}