/*
  ErgoAssess — design tokens.
  Aligned with the Assessor Dashboard design spec (docs/02_*).
  Bootstrap 5 handles the heavy lifting; this file only defines brand tokens
  and a few overrides.
*/

:root {
  /* Colour palette from design spec §3 */
  --ea-navy:        #2E4057;   /* primary brand */
  --ea-accent:      #1F6FB2;   /* buttons, links, active states */
  --ea-soft-navy:   #D5E0EA;   /* active rows, soft badges */
  --ea-success:     #2D8B5F;   /* within-threshold / approve */
  --ea-warning:     #D58A2B;   /* borderline / medium urgency */
  --ea-critical:    #C8443B;   /* red flags / breaches */
  --ea-surface:     #F7F8FA;   /* page background */
  --ea-card:        #FFFFFF;
  --ea-border:      #E1E5EA;
  --ea-text:        #1A1F26;
  --ea-text-2:      #5C6670;
  --ea-text-muted:  #8A929C;

  /* Layout primitives */
  --ea-radius-card:  12px;
  --ea-radius-btn:   6px;
  --ea-shadow:       0 1px 2px rgba(20, 30, 50, 0.04),
                     0 2px 8px rgba(20, 30, 50, 0.04);
}

/* Typography — Inter per design spec §3 */
body {
  background-color: var(--ea-surface);
  color: var(--ea-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum";  /* tabular numerals — important for measurements */
}

h1, h2, h3, .navbar-brand {
  color: var(--ea-navy);
  font-weight: 600;
}

code {
  background: #eef2f7;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  color: var(--ea-navy);
}

/* Status pills — used by assessor dashboard from Day 6 onwards */
.ea-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ea-pill-success  { background: #E3F1EA; color: var(--ea-success); }
.ea-pill-warning  { background: #FBEFDC; color: var(--ea-warning); }
.ea-pill-critical { background: #F8DEDC; color: var(--ea-critical); }
.ea-pill-neutral  { background: var(--ea-soft-navy); color: var(--ea-navy); }

/* ---- Loading spinner (Day 10) ---- */
.ea-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ea-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes ea-spin { to { transform: rotate(360deg); } }

button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- Toast (Day 10) ---- */
.ea-toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.ea-toast {
  background: var(--ea-card);
  border: 1px solid var(--ea-border);
  border-left: 4px solid var(--ea-accent);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--ea-shadow);
  max-width: 360px;
  font-size: 13px;
  color: var(--ea-text);
  pointer-events: auto;
  animation: ea-toast-in 0.18s ease-out;
}
.ea-toast.error    { border-left-color: var(--ea-critical); }
.ea-toast.success  { border-left-color: var(--ea-success); }
.ea-toast.warning  { border-left-color: var(--ea-warning); }
.ea-toast strong { display: block; color: var(--ea-navy); margin-bottom: 2px; }
@keyframes ea-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}