/* ==========================================================================
   tokens.css: every colour the app uses, in one place ("design tokens").
   Loaded FIRST on every page, before any other stylesheet.

   Rules for anyone changing the look:
   - Change a colour here, never in a page's own stylesheet. Page CSS only
     ever says var(--name).
   - Names describe the JOB a colour does (--brand, --danger, --grade-poor),
     not what it looks like, so a re-theme never leaves a misleading name.
   - --brand is the app's own colour (buttons, links, focus rings, active
     nav). --danger means "something is wrong / destructive" (errors,
     invalid fields, delete, warnings). --brand is the company blue/teal
     (since 2026-10-04; it was red); --danger stays red.
   - Dark mode: the inner pages toggle <html data-theme="dark"> (theme.js).
     Tokens that change in dark mode are redefined in the block at the end.
   - Not tokens on purpose: plain black/white with transparency, used for
     shadows, hover overlays and borders (rgba(0,0,0,.05) etc). They don't
     carry any brand colour, so a re-theme never needs to touch them.
   - Semi-transparent versions of a token are written in place with
     color-mix(in srgb, var(--token) 25%, transparent), so the base colour
     still comes from here. Exception: inside a gradient, color-mix makes the
     browser blend in a different colour space (a slightly different look),
     so gradient glows have their own rgba() tokens below ("Glows"). Keep
     their numbers in step with the colour they're based on.
   - JavaScript (charts, PDF report) reads these with cssColor("--name")
     from common.js. Emails can't use CSS; their colours are in
     backend/email_colors.py. The browser-tab icon (frontend/netlense-icon.svg)
     is a file of its own; it has --brand's colour (#0A72B0) written into it, 3 times.
   - Not a colour, but kept here so it is in one place too: --font-brand is
     the NetLense name's and the sign-in headline's font (Sora, 2026-10-22).
     The file is frontend/fonts/sora.woff2 (served by the app itself, no
     outside font service; licence in fonts/Sora-OFL.txt). Everything else
     uses the system font set in login.css/app.css. To change the brand font,
     add the new file under a NEW name (browsers keep fonts/ for a week,
     backend/main.py) and update the lines here.
   ========================================================================== */
@font-face{
  font-family:"Sora";
  src:url("/static/fonts/sora.woff2") format("woff2");
  font-weight:100 800;
  font-display:swap;
}
:root{
  --font-brand:"Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* The browser's own pop-ups (address suggestions, date pickers) follow the
     app's theme, not the computer's: a Mac in dark mode drew the Email
     Intercept suggestions white-on-white on the light page. */
  color-scheme:light;
  /* --- Brand --- */
  --brand:#0A72B0;               /* company blue */
  --brand-dark:#0A4F66;          /* deep teal: hover / pressed */
  --brand-hover:#0965A0;         /* report wizard button hover */
  --brand-tint:#E6F2F8;          /* pale wash: focus rings, badges, page glow */
  --brand-tint-strong:#D3E8F4;   /* hover on the transfer-notice banner */
  --page-btn-bg:#F1F8FC;                        /* Task Management page-number boxes: very light blue */
  --page-btn-bg-hover:var(--brand-tint);
  --brand-light:#12A39B;         /* teal: gradient stops in the login wordmark/headline */
  --brand-lighter:#5FC8E8;
  --logo-start:#0B7C76;          /* sidebar logo gradient start: a darker teal so it holds up on the light sidebar */
  --auth-panel-1:#0F8A92;       /* sign-in brand panel gradient: teal -> deep blue */
  --auth-panel-2:#0A3F85;
  --auth-panel-3:#072A5A;
  --welcome-start:#0A4F66;       /* Home welcome banner: deep teal start of its gradient (same in both themes) */        /* login page's dark brand panel */

  /* --- Glows: soft gradients (see the note at the top about gradients) --- */
  --glow-page-dark:rgba(10,114,176,.08);        /* --brand at 8%: top-of-page glow in dark mode */

  /* --- Danger: errors, invalid fields, delete, warnings --- */
  --danger:#E4002B;
  --danger-dark:#AD0021;
  --danger-tint:#FDECEF;
  --danger-soft:#FBE7EA;         /* remove-button hover, warning icon circle */
  --danger-soft-border:#F3C6CD;
  --error-text:#B3261E;          /* report wizard error line */

  /* --- Success --- */
  --success:#1E8E4F;
  --success-dark:#187741;
  --success-tint:#E3F5EA;
  --success-text:#1A7F37;        /* positive deltas, "saved" messages */
  --success-bg:#EAF7EE;

  /* --- Info --- */
  --info-text:#0D47A1;
  --info-bg:#E3F2FD;
  --info-border:#BBDEFB;

  /* --- Warning badges (PAT Coordinator, Locked) --- */
  --warning-badge-bg:#FFF3D6;
  --warning-badge-text:#8A5A00;
  --row-flash:#FFF3D6;           /* a just-changed table row fades from this */

  /* --- Text, surfaces, lines (light theme; dark values at the end) --- */
  --ink:#1d1d1f;                 /* headings, strong text */
  --body:#6e6e73;                /* normal text */
  --line:#d2d2d7;                /* borders */
  --bg:#ffffff;                  /* cards, panels */
  --bg-soft:#f5f5f7;             /* page background */
  --field-bg:#f5f5f7;            /* form inputs */
  --card:var(--bg);              /* alias, so a stray var(--card) never falls back to white in dark mode */
  --white:#FFFFFF;               /* surfaces that stay white in both themes */
  --text-on-color:#FFFFFF;       /* text on brand/status/dark backgrounds */
  --line-strong:#B8B8BD;         /* hover/focus border on inputs and outline buttons */
  --text-muted:#B8B8BD;
  --text-placeholder:#9A9A9E;
  --text-disabled:#C7C7CC;
  --surface-hover:#EBEBED;       /* hover on grey buttons */
  --surface-inverse:#3A3A3C;     /* toasts, tooltips */
  --tooltip-bg:#1D1D1F;          /* chart tooltip */

  /* --- Dark-mode-only surfaces (used inside [data-theme="dark"] rules) --- */
  --dark-sidebar-bg:#141416;
  --dark-nav-text-hover:#F2F2F3;

  /* --- Scope toggle (Leaderboard / Task Management "Global | My ...") --- */
  --toggle-bg:#E5E7EB;
  --toggle-text:#4B5563;
  --toggle-text-active:#1C1C1E;

  /* --- Job status pills (Task Management) --- */
  --status-evaluated-bg:#3A3A3C;
  --status-evaluated-text:#FFFFFF;
  --status-pending-bg:#FEF3C7;
  --status-pending-text:#92400E;
  --status-hold-bg:#ECE9F5;       /* On Hold: muted violet, apart from the amber "needs action" pill */
  --status-hold-text:#4B3F72;
  --status-cancelled-bg:#FDE2E2;
  --status-cancelled-text:#9B1C1C;
  --slt-tag:#9B1C1C;              /* Task Management's "SLT" tag on an SLT-side cancellation (outline only, no fill) */
  --danger-link:#C62828;          /* Undo / Cancel Job text actions */
  --danger-link-hover:#8E1B1B;

  /* --- Grades (Excellent / Good / Fair / Poor / no score) --- */
  --grade-excellent:#1E8E4F;
  --grade-excellent-bg:#E3F5EA;
  --grade-excellent-dark:#14572F; /* Leaderboard's Excellent pill text: darker green than --grade-excellent */
  --grade-good:#4C9A6A;
  --grade-good-bg:#EEF7EC;
  --grade-fair:#B7791F;
  --grade-fair-bg:#FEF6E7;
  --grade-poor:#AD0021;
  --grade-poor-bg:#FDECEF;
  --grade-none:#9A9A9E;

  /* --- Analytics: Value for Money rows, Region accent --- */
  --value-good:#2E9E6E;
  --value-poor:#C0392B;
  --analytics-accent:#5E4C5F;

  /* --- Top 3 ranks (Leaderboard podium + table, Analytics rankings) --- */
  /* Theme set: 1st company blue, 2nd teal, 3rd a muted rose-red (softer
     and pinker than --danger #E4002B, so it doesn't read as a warning). */
  --rank-1:#0A72B0;               /* = --brand */
  --rank-1-bg:#EAF4FA;
  --rank-1-bg-hover:#D7EAF5;
  --rank-1-podium:#CCE3F1;
  --rank-2:#0F938C;               /* teal, a shade deeper than --brand-light so borders hold up */
  --rank-2-bg:#E7F6F4;
  --rank-2-bg-hover:#D2EEEA;
  --rank-2-podium:#C8EAE5;
  --rank-3:#B4475E;               /* muted rose-red */
  --rank-3-bg:#F9ECEF;
  --rank-3-bg-hover:#F2DADF;
  --rank-3-podium:#EDCFD6;
  --rank-row-text:#1D1D1F;
  --rank-cell-text:#5A5A5E;
  --podium-text:#1C1C1E;
  --podium-badge:#FFC107;

  /* --- Role colours (sysadmin user list) --- */
  --role-programme-manager:#6E4C7E;
  --role-pm:#1B66BB;
  --role-engineer:#3F8A8E;
  --role-sysadmin:#6E6E73;
  --roster-active:#2E9E6E;
  --roster-disabled:#B96B66;

  /* --- Profile picture colours (avatar-1 ... avatar-6) --- */
  --avatar-1:#232326;
  --avatar-2:#0D47A1;
  --avatar-3:#7C3AED;
  --avatar-4:#0F766E;
  --avatar-5:#B45309;
  --avatar-6:#3E5C76;             /* slate blue (was the old brand red) */

  /* --- Notice banners drawn by JS (Evaluate page, Task Management) --- */
  --notice-warning-bg:#FFF3CD;
  --notice-warning-text:#856404;

  /* --- Charts (read by JS with cssColor("--name")) ---
     Contractor series colours, in order. Analytics' Region rankings use the
     first 7 as each row's accent. */
  --chart-1:#5E4C5F;
  --chart-2:#4A6A75;
  --chart-3:#E8A75A;
  --chart-4:#8FAC9C;
  --chart-5:#B96B66;
  --chart-6:#2B4560;
  --chart-7:#B9CFB5;
  --chart-8:#8A7A55;
  --chart-9:#8C2F3A;
  --chart-10:#7F9FB0;
  --chart-others:#B3B9BF;             /* Analytics money donut: the grey "Others" slice past the 10th contractor */
  --chart-outcome-completed:#4A6A75;
  --chart-outcome-cancelled:#B5444A;  /* muted brick red, calmer beside the slate/grey bars (white text 5.6:1) */
  --chart-outcome-open:#C9D3CC;
  /* Cancelled Jobs by Contractor (Analytics): due to the contractor = the
     cancelled red above; due to SLT = blue (checked for colour-blind
     separation and contrast in light and dark mode). */
  --chart-cancel-slt:#3E7CB1;
  --chart-invoice:#2A8C82;            /* ranking graph view: the thin invoice line under each bar (deep teal: near the slate Completed, apart from the other bar colours) */
  /* Home's Job Pipeline, in the theme colours (home.css): each status's
     colour gives its bar segment, ribbon and name. Normal path: sky, company
     blue, deep teal (waiting for the PM's evaluation: its box is filled like
     the first Home card), teal (done). Off the path: grey On Hold, red
     Cancelled by the contractor (the Analytics cancelled red), slate
     Cancelled by SLT. */
  --pipeline-1:var(--brand-lighter); /* Awaiting NTP (sky) */
  --pipeline-2:var(--brand);         /* Awaiting PAT (company blue) */
  --pipeline-3:var(--welcome-start); /* Pending Evaluation (deep teal) */
  --pipeline-4:var(--brand-light);   /* Evaluated (teal) */
  --pipeline-hold:#8E8E93;
  --pipeline-cancelled-contractor:var(--chart-outcome-cancelled);
  --pipeline-cancelled-slt:#5B6B7F;  /* slate */
  /* Value for Money scatter: dots and their labels */
  /* Analytics' two scatter charts: one look, two muted palettes (checked
     colour-blind safe with the dataviz validator; the same values pass on the
     light and the dark card). Value for Money = how good the work was;
     Score vs Resources = the resource groups, with no green/red so the two never read alike. */
  --vfm-top:#3C9163;
  --vfm-steady:#4E72B5;
  --vfm-weak:#B5534A;
  --svr-efficient:#00958E;
  --svr-equipped:#6A5FAE;
  --svr-average:#8E8E93;
  --svr-under-equipped:#B07D3A;
  --svr-underperforming:#9C4E79;
  --svr-none:#C7C7CC;
  /* Region blocks (Analytics), in order */
  --chart-region-1:#1A80BB;
  --chart-region-2:#EA801C;
  --chart-region-3:#B8B8B8;
  --chart-region-4:#7FB8D9;
  --chart-region-5:#F2B57A;
  --chart-region-6:#DCDCDC;
  --chart-region-unmapped:#CFCFCF;
  /* Home */
  --chart-completed:var(--brand); /* Analytics' Jobs Completed line: the theme blue */
  --home-completion:var(--brand-light); /* Home's completion donut: teal ("done"), apart from the blue Contractor Scores line beside it */
  --chart-declined:#8E3445;      /* maroon: NTPs Issued line + cancelled donut */
  --sparkline:#A9D3EC;           /* stat-card mini trend line */
  /* PM Overview: jobs assigned (first = main colour), then total value */
  --chart-pm-jobs-1:#A13432;
  --chart-pm-jobs-2:#C8786B;
  --chart-pm-jobs-3:#F0D7C5;
  --chart-pm-jobs-4:#F0EDEC;
  --chart-pm-jobs-5:#D0E0EB;
  --chart-pm-jobs-6:#99BFD6;
  --chart-pm-jobs-7:#3464A3;
  --chart-pm-value-1:#BAD0B2;
  --chart-pm-value-2:#8AAD9B;
  --chart-pm-value-3:#628986;
  --chart-pm-value-4:#416B76;
  --chart-pm-value-5:#27465A;
  --chart-pm-value-6:#18273E;

  /* --- PDF report (analytics-report.js reads these with cssColorRgb) --- */
  --pdf-brand:var(--brand);      /* header bar, section markers */
  --pdf-danger:#C8102E;          /* Job History PDF: the "internal copy with scores" warning */
  --pdf-ink:#1C1C1E;
  --pdf-grey:#606066;
  --pdf-light:#F5F5F7;
  --pdf-rule:#D7D7DC;
  --pdf-table-text:#333333;
  --pdf-row-alt:#F8F9FA;
  --pdf-total-row:#E8E8EC;
  --pdf-head-first:#F0F0F2;
  --pdf-head-last:#DEDEE2;
  --pdf-col-last:#F3F3F5;
  --pdf-grade-poor:#B3261E;      /* the other grades use the app's --grade-* tokens */
  --pdf-grade-poor-bg:#FCE8E6;
  --pdf-row-excellent:#E2F4E9;   /* Value for Money table */
  --pdf-row-poor:#FCE4E1;
  --pdf-invoice-col:#E8F0FA;     /* ranking tables: the Invoiced column (invoice values; the rest are estimates) */
  --pdf-chart-axis:#9A9AA0;
  --pdf-chart-label:#3A3A3C;
  --pdf-highlight:#EAF3F9;      /* Contractor Review: the highlighted summary and example, the jobs-scored bar's empty part */

  /* Contractor Resources: one colour per column group (resources.css .res-tone-N; the
     server numbers the groups). Mixed with --bg where used, so light and dark both work.
     The Excel template's fills (backend/email_colors.py TEMPLATE_GROUP_FILLS) follow these. */
  --res-tone-1:var(--brand);         /* Field teams */
  --res-tone-2:var(--success-text);  /* Staff */
  --res-tone-3:#B7791F;              /* Vehicles & heavy equipment */
  --res-tone-4:#7E57C2;              /* Equipment */
  --res-tone-5:var(--brand-light);   /* Other */
  --res-tone-6:#8E8E93;              /* new items with no group */

  /* Task Management: its three column groups (app.css .task-tone-*), in the
     Contractor Resources colours. */
  --task-tone-job:var(--res-tone-1);
  --task-tone-dates:var(--res-tone-2);
  --task-tone-outcome:var(--res-tone-3);
}

/* Dark theme: only the inner (post-login) pages ever set this. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --pipeline-3:#2B8AAE;  /* Pending Evaluation: the deep teal is lost on a dark page; a brighter teal-blue */
  --ink:#f5f5f7;
  --body:#a1a1a6;
  --line:#3a3a3c;
  --bg:#1c1c1e;
  --bg-soft:#000000;
  --field-bg:#2c2c2e;
  /* Deep teal text (badges, banners, card numbers) is unreadable on black,
     so dark mode uses a lighter blue. Also the hover colour of brand buttons. */
  --brand-dark:#3A93CC;
  --slt-tag:#F4A3A0;
  /* The pale page-number wash would glare on black: a dim blue instead. */
  --page-btn-bg:rgba(10,114,176,.22);
  --page-btn-bg-hover:rgba(10,114,176,.36);
  --auth-panel-1:#0F6E78;
  --auth-panel-2:#0B3768;
  --auth-panel-3:#071F3F;
  --logo-start:var(--brand-light); /* the welcome banner's bright teal reads well on black */
  /* Blue "info" notes (drawer banner, Evaluate, Job Types): a dim blue box with light blue text. */
  --info-text:#9CCBEE;
  --info-bg:#132A3B;
  --info-border:#1F4A6B;
  --svr-none:#636366;            /* Score vs Resources "Not compared" (no dots, key only) */
}