/* PIF design tokens — copied verbatim from the extension's src/styles/tokens.css
 * so this dashboard is fully self-contained.
 *
 * The whole identity is: navy and white doing all the work, with gold used
 * exactly twice — as the "orders rule" on active items and panel tops, and on
 * one primary action per screen. Gold is never text on a light background.
 */

:root {
  /* palette */
  --pif-navy:      #020c45;
  --pif-navy-hi:   #010831;
  --pif-gold:      #ffd230;
  --pif-gold-tint: #fffaea;
  --pif-paper:     #ffffff;
  --pif-fog:       #f4f6fa;
  --pif-rule:      #dfe3ec;
  --pif-slate:     #59627a;

  /* semantic */
  --pif-success: #17845a;
  --pif-warning: #b4690e;
  --pif-danger:  #c0392b;

  /* type */
  --pif-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pif-font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spacing — 8px grid, nothing off it */
  --pif-1: 4px;
  --pif-2: 8px;
  --pif-3: 12px;
  --pif-4: 16px;
  --pif-5: 24px;
  --pif-6: 32px;

  /* shape */
  --pif-r-card:  12px;
  --pif-r-ctrl:  8px;
  --pif-r-badge: 6px;

  /* exactly one shadow exists in this product, on floating panels only */
  --pif-shadow: 0 8px 24px rgba(2, 12, 69, 0.10);
}

.pif-eyebrow {
  font-family: var(--pif-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pif-slate);
}

.pif-h1 { font-family: var(--pif-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--pif-navy); margin: 0; }
.pif-h2 { font-family: var(--pif-font-display); font-size: 15px; font-weight: 600; color: var(--pif-navy); margin: 0; }
.pif-body  { font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); }
.pif-muted { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate); }

.pif-stat {
  font-family: var(--pif-font-body);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pif-navy);
  line-height: 1;
}

.pif-btn {
  font-family: var(--pif-font-display);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--pif-r-ctrl);
  padding: 10px var(--pif-4);
  cursor: pointer;
  background: var(--pif-navy);
  color: #fff;
  transition: background 120ms ease;
}
.pif-btn:hover:not(:disabled) { background: var(--pif-navy-hi); }
.pif-btn--accent { background: var(--pif-gold); color: var(--pif-navy); }
.pif-btn--accent:hover:not(:disabled) { background: #f2c318; }
.pif-btn--quiet { background: transparent; color: var(--pif-navy); border-color: var(--pif-rule); }
.pif-btn--quiet:hover:not(:disabled) { background: var(--pif-fog); }
.pif-btn--danger { background: var(--pif-danger); color: #fff; }
.pif-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pif-input, .pif-select {
  font-family: var(--pif-font-body);
  font-size: 14px;
  color: var(--pif-navy);
  background: var(--pif-paper);
  border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl);
  padding: 9px var(--pif-3);
  width: 100%;
  box-sizing: border-box;
}
.pif-select { cursor: pointer; }

.pif-btn:focus-visible,
.pif-input:focus-visible,
.pif-select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pif-gold);
  outline-offset: 2px;
}

.pif-card {
  background: var(--pif-paper);
  border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-card);
  padding: var(--pif-4);
}

.pif-badge {
  display: inline-block;
  font-family: var(--pif-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--pif-r-badge);
  padding: 3px 7px;
  background: var(--pif-fog);
  color: var(--pif-slate);
}
.pif-badge--flag  { background: var(--pif-gold); color: var(--pif-navy); }
.pif-badge--risk  { background: #fdeceb; color: var(--pif-danger); }

.pif-empty {
  padding: var(--pif-6) var(--pif-4);
  text-align: center;
  font-family: var(--pif-font-body);
  font-size: 13px;
  color: var(--pif-slate);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}