/* The Professor AI house style - shared design tokens and components.
   Source: "Professor AI Design System.md" (OneDrive Claude Projects folder).
   Keep in step with the Bid Engine (tailwind.config.ts + globals.css) if
   that palette ever changes - this is a manual port, not a shared package. */

:root {
  /* Brand */
  --accent:        #4f46e5;
  --accent-hover:  #6366f1;
  --accent-faint:  #eef2ff;
  --ink:           #0f172a;
  --ink-soft:      #1e293b;

  /* Neutrals */
  --bg:            #f8fafc;
  --surface:       #ffffff;
  --border:        #e2e8f0;
  --border-light:  #f1f5f9;
  --text:          #334155;
  --text-muted:    #64748b;

  /* Semantic pills (background / text) */
  --ok-bg:      #d1fae5; --ok-tx:      #065f46;
  --warn-bg:    #fef3c7; --warn-tx:    #92400e;
  --bad-bg:     #ffe4e6; --bad-tx:     #9f1239;
  --neutral-bg: #f1f5f9; --neutral-tx: #475569;

  /* Shape + type */
  --radius-card:    12px;
  --radius-control: 8px;
  --shadow-card:    0 1px 2px rgba(0,0,0,.05);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Backward-compat aliases: every template still references --navy/--cyan
     (mostly via inline style="color:var(--navy)") from before this app
     adopted the house style. Aliasing here means the whole app picks up
     the new palette without editing each of those ~30 individual spots. */
  --navy: var(--ink);
  --cyan: var(--accent);
}

body { background: var(--bg); font-family: var(--font); color: var(--text); }

/* ---- Header bar: dark, white text, one indigo glow top-right ---- */
.navbar {
  background-color: var(--ink) !important;
  background-image: radial-gradient(1200px 360px at 85% -40%, rgba(99,102,241,.28), transparent 60%) !important;
}
.navbar-brand { font-weight: 700; letter-spacing: .5px; color: #fff !important; }

/* ---- Cards / panels ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card);
}

/* ---- Primary button ---- */
.btn-cyan, .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-control) !important;
}
.btn-cyan:hover, .btn-primary:hover,
.btn-cyan:focus, .btn-primary:focus {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}

/* ---- Secondary / outline buttons ---- */
.btn-outline-primary, .btn-outline-secondary {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-control) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-faint) !important;
}
.btn-outline-danger { border-radius: var(--radius-control) !important; }

/* ---- Badges / pills ----
   Scoped to .badge.bg-* rather than bg-* alone, since the plain Bootstrap
   background utilities are also used outside badges elsewhere (spinners,
   icons) and shouldn't be repainted. */
.badge { border-radius: 999px !important; font-weight: 500; font-size: 12px; }
.badge.bg-success  { background: var(--ok-bg)      !important; color: var(--ok-tx)      !important; }
.badge.bg-danger   { background: var(--bad-bg)     !important; color: var(--bad-tx)     !important; }
.badge.bg-warning  { background: var(--warn-bg)    !important; color: var(--warn-tx)    !important; }
.badge.bg-secondary,
.badge.bg-light    { background: var(--neutral-bg) !important; color: var(--neutral-tx) !important; }
.badge.bg-info,
.badge.bg-primary  { background: var(--accent-faint) !important; color: var(--accent)   !important; }

/* ---- Inputs ---- */
.form-control, .form-select {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}

/* ---- Tables ---- */
.table thead th {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table td, .table th { border-color: var(--border-light) !important; }

/* ---- Report-page classes already in use across every report template ---- */
.risk-badge { font-size: 1.1rem; padding: .4em .9em; }
.flag-high   { color: var(--bad-tx); }
.flag-medium { color: var(--warn-tx); }
.flag-low    { color: var(--text-muted); }
.section-title {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: .3rem;
  margin-bottom: 1rem;
}
#spinner { display: none; }