@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

/* ===== THEME TOKENS (swap these for a preset/custom palette) =====
   The same two blocks as the no-AI page, so every preset in
   rpa-dashboard-no-ai/templates/themes.md applies here unchanged. */
body{
  --bg-top:#8fc9e8; --bg-mid:#bfe3f2; --bg-bottom:#eaf6fb;
  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.78); --border:rgba(255,255,255,.9);
  --ink:#1c2b33; --muted:#5c7382; --accent-dark:#16202a;
  --accent:#3d9bd0; --accent-2:#5cb2e2; --accent-soft:#d4edfa; --accent-soft-2:#a9d8ee;
  --ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
  --font:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; --font-display:var(--font);
  --header-bg:var(--glass-strong); --header-ink:var(--ink); --header-muted:var(--muted);
  --primary-bg:linear-gradient(180deg,var(--accent-2),var(--accent));
  --nav-active-bg:linear-gradient(135deg,var(--accent),var(--accent-dark));
  --progress-bg:var(--ok); --blur:blur(14px);
}
body.dark{
  --bg-top:#0f1b26; --bg-mid:#13212e; --bg-bottom:#182a38;
  --glass:rgba(22,34,44,.72); --glass-strong:rgba(30,45,58,.85); --border:rgba(120,160,190,.22);
  --ink:#e6eef4; --muted:#8fa6b4; --accent-dark:#2e5d80;
  --accent-soft:#2e5d90; --accent-soft-2:#1d3d5e;
  --ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
  --bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
}

/* ===== BAND COLOURS =====
   Semantic only: swatches, the rule down a field, legend dots. Never on a button
   or a heading. They say how clearly a value was printed, not whether it is right.
   The same in every preset and both modes. */
body{ --clean:#51a68f; --verify:#e39b34; --review:#de5243; --absent:#6b6580; }

@theme inline {
  --color-glass: var(--glass);
  --color-glass-strong: var(--glass-strong);
  --color-line: var(--border);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-accent-dark: var(--accent-dark);
  --color-accent-soft: var(--accent-soft);
  --color-accent-soft-2: var(--accent-soft-2);
  --color-ok: var(--ok);
  --color-ok-bg: var(--ok-bg);
  --color-warn: var(--warn);
  --color-warn-bg: var(--warn-bg);
  --color-bad: var(--bad);
  --color-bad-bg: var(--bad-bg);
  --color-clean: var(--clean);
  --color-verify: var(--verify);
  --color-review: var(--review);
  --color-absent: var(--absent);
  --font-body: var(--font);
  --font-head: var(--font-display);
}

html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
}

/* Shared pieces, kept as classes because every screen uses them. */
@layer components {
  .card { @apply mb-4 rounded-2xl border border-line bg-glass p-5 shadow-[0_10px_30px_rgba(20,50,70,.08)]; backdrop-filter: var(--blur); }
  .card-title { @apply mb-3.5 font-head text-[15px] font-bold; }
  .btn { @apply cursor-pointer rounded-[11px] border border-accent-soft-2 px-4 py-2 font-head text-[12.5px] font-semibold text-ink disabled:cursor-not-allowed disabled:opacity-45; background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-2)); }
  .btn-primary { @apply border-accent text-white; background: var(--primary-bg); }
  .btn-sm { @apply px-2.5 py-1 text-[11.5px]; }
  .pill { @apply inline-block rounded-full px-3 py-1 text-[11px] font-bold text-white; }
  .input { @apply rounded-[10px] border border-line bg-glass-strong px-2.5 py-2 text-[12.5px] text-ink; }
}