/* ============================================================================
   GSK WorkDesk theme tokens
   One agreed palette for the whole site, built around the header gradient:
   cyan #00A3E0 to teal #006D4E. The cyan is too light for text on white
   (2.9:1), so actions and links use a deeper cyan (#0077A8, 5:1) and the
   pure cyan is kept for chrome, highlights and glows. The teal is the
   secondary colour: success, verified, positive. Everything else is a
   neutral slate scale plus four semantic tones. Page stylesheets reference
   these variables (with a literal fallback) instead of hard-coding colours.

   Loaded first from base.html <head>.
   ============================================================================ */

:root {
  /* Brand */
  --gsk-cyan: #00A3E0;          /* chrome start, highlights, progress, glows (not text) */
  --gsk-blue: #0077A8;          /* primary: actions, links, active states (5:1 on white) */
  --gsk-blue-dark: #005F87;     /* hover, pressed */
  --gsk-blue-soft: #E6F5FB;     /* selected rows, soft tags, icon tiles */
  --gsk-blue-line: #BFE3F2;     /* borders on selected/soft surfaces */
  --gsk-green: #006D4E;         /* secondary brand (teal): success, verified, positive; chrome end */
  --gsk-green-dark: #00563D;
  --gsk-green-soft: #E3F3EE;

  /* Neutrals (slate) */
  --gsk-ink: #0F172A;           /* headings, primary text */
  --gsk-text: #334155;          /* body text */
  --gsk-mute: #64748B;          /* secondary text */
  --gsk-faint: #94A3B8;         /* placeholders, meta, disabled */
  --gsk-line: #E5E9F0;          /* borders */
  --gsk-ground: #F8FAFC;        /* table headers, hover, footers */
  --gsk-page: #F4F7FA;          /* page background */
  --gsk-surface: #FFFFFF;       /* cards */

  /* Semantic tones (each with a soft background) */
  --tone-green: var(--gsk-green);      --tone-green-soft: var(--gsk-green-soft);
  --tone-blue: var(--gsk-blue);        --tone-blue-soft: var(--gsk-blue-soft);
  --tone-amber: #B7791F;               --tone-amber-soft: #FFF2DC;
  --tone-red: #C53030;                 --tone-red-soft: #FDE8E8;
  --tone-grey: #64748B;                --tone-grey-soft: #EEF2F6;
  --tone-violet: #6D4FC4;              --tone-violet-soft: #EFE9FB;

  /* Shape and motion shared by the workbench pages */
  --gsk-radius: 14px;
  --gsk-radius-sm: 9px;
  --gsk-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  --gsk-shadow-pop: 0 16px 40px rgba(15, 23, 42, 0.14);
  --gsk-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* RGB triplets for Bootstrap's *-rgb variables */
  --gsk-blue-rgb: 0, 119, 168;
  --gsk-green-rgb: 0, 109, 78;

  /* Chrome: navbar + sidebar gradient */
  --gsk-chrome-start: var(--gsk-cyan);
  --gsk-chrome-end: var(--gsk-green);
  --gsk-chrome: linear-gradient(90deg, var(--gsk-chrome-start), var(--gsk-chrome-end));
}

/* ----------------------------------------------------------------------------
   View modes. base.html stamps data-view="employee|admin" on <body> from the
   view the user has switched to (not their role). Employee view is the default
   above. Admin view keeps the chrome and the teal, and swaps the primary for a
   violet so buttons, links, tiles, selected rows and bars read as "admin".
   Page stylesheets that define colour variables must do so on <body> or below
   (not :root) so this override reaches them.
   ---------------------------------------------------------------------------- */
body[data-view="admin"] {
  --gsk-blue: #6742C0;
  --gsk-blue-dark: #4F31A0;
  --gsk-blue-soft: #EFE9FB;
  --gsk-blue-line: #D9CFF5;
  --gsk-blue-rgb: 103, 66, 192;
  --tone-blue: #6742C0;
  --tone-blue-soft: #EFE9FB;
}

/* Admin view is identified in the chrome by the badge beside the avatar. */
.nav-mode-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  margin-right: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}