/* ════════════════════ RTMES colour themes ════════════════════
   Two attributes on <html>:
     data-module = monitoring | evaluation   set in each page's <html> tag (Evaluation is its own page)
     data-scheme = blue | green              floating "Colours" switch (rtmes-theme.js), blue is the default

                    Monitoring            Evaluation
     scheme blue    Ocean blue            Indigo
     scheme green   Original green (unchanged design)

   Pages use only --brand-* and the neutral tokens. The raw palettes below are
   for this file; to change a pairing, change which palette --brand-* points to. */

:root {
  /* Palettes. Both blues are muted (low saturation) so they stay calm on screen all day,
     and ~30° apart in hue so they read as two different colours. */
  --ocean-950: #10283a; --ocean-900: #16354d; --ocean-800: #1d4462; --ocean-700: #26557a;
  --ocean-600: #326b96; --ocean-500: #4d86b0; --ocean-100: #d8e6f1; --ocean-50:  #eff5fa;

  --indigo-950: #1c1d3d; --indigo-900: #252752; --indigo-800: #2f3267; --indigo-700: #3b3f7e;
  --indigo-600: #4a5098; --indigo-500: #6670b3; --indigo-100: #e0e1f2; --indigo-50:  #f2f2fa;

  /* Bold Blue variation only (RTMES-dashboard-v4.html): the mobile app colours, kept in sync with RTMES-mbl/rtmes-app.css.
     Monitoring = app Sapphire (700 = --primary #1f58a8, 800 = --primary-dark, 100 = --container); the earlier #1d5fd0 was too sharp.
     Evaluation = app azure (700 = #0b74c2). */
  --azure-950: #0e2142; --azure-900: #133461; --azure-800: #184686; --azure-700: #1f58a8;
  --azure-600: #2d66b4; --azure-500: #4f86d0; --azure-100: #e2ebf8; --azure-50:  #f1f5fb;

  --sky-950: #04263f; --sky-900: #063a5f; --sky-800: #085a99; --sky-700: #0b74c2;
  --sky-600: #137dcc; --sky-500: #4aa3e6; --sky-100: #dcf0ff; --sky-50:  #f0f8ff;

  --green-950: #032a1b; --green-900: #053b26; --green-800: #08492f; --green-700: #0b5d3b;
  --green-600: #117a4d; --green-500: #1a9461; --green-100: #d3eadc; --green-50:  #ecf6f0;

  --gold: #c9a54c; --gold-soft: #f6eed8;

  /* Brand: Monitoring · Ocean blue (default) */
  --brand-950: var(--ocean-950); --brand-900: var(--ocean-900); --brand-800: var(--ocean-800); --brand-700: var(--ocean-700);
  --brand-600: var(--ocean-600); --brand-500: var(--ocean-500); --brand-100: var(--ocean-100); --brand-50:  var(--ocean-50);

  /* Neutrals: cool grey for the blue scheme */
  --bg:     #f4f6f9;   /* hover / subtle fills only — the page itself is white */
  --ink:    #0f1a2a;
  --ink-2:  #26334a;
  --muted:  #4e5a6c;
  --line:   #dce2ea;
  --line-2: #edf0f5;
  --subtle: #fafbfd;   /* toolbars, guides, panel footers */
  --stripe: #f7f9fc;   /* zebra rows */
  --zero:   #a9b2be;   /* zero values */

  --shadow: 0 1px 2px rgba(10, 25, 45, .05), 0 6px 20px rgba(10, 25, 45, .05);
  --shadow-lg: 0 24px 60px rgba(5, 18, 38, .28);
}

/* Blue scheme: the teal data colour reads as green next to blue, so it becomes a calm cyan-blue here.
   (Used for "Released" money, visits, umbrella projects. The green scheme keeps the original teal.) */
:root:not([data-scheme="green"]) {
  --teal: #2c7c95; --teal-bg: #e3f0f4; --teal-line: #bcd9e3; --teal-ink: #1f5f73;
}

/* Evaluation · Indigo */
:root[data-module="evaluation"] {
  --brand-950: var(--indigo-950); --brand-900: var(--indigo-900); --brand-800: var(--indigo-800); --brand-700: var(--indigo-700);
  --brand-600: var(--indigo-600); --brand-500: var(--indigo-500); --brand-100: var(--indigo-100); --brand-50:  var(--indigo-50);
}

/* Bold Blue variation: <html data-variant="bold-blue"> (set on RTMES-dashboard-v4.html, or by a link: ?variant=bold-blue).
   Monitoring = the app blue, Evaluation = vivid azure. Does not apply in the green scheme. */
:root[data-variant="bold-blue"]:not([data-scheme="green"]) {
  --brand-950: var(--azure-950); --brand-900: var(--azure-900); --brand-800: var(--azure-800); --brand-700: var(--azure-700);
  --brand-600: var(--azure-600); --brand-500: var(--azure-500); --brand-100: var(--azure-100); --brand-50:  var(--azure-50);
}
:root[data-variant="bold-blue"][data-module="evaluation"]:not([data-scheme="green"]) {
  --brand-950: var(--sky-950); --brand-900: var(--sky-900); --brand-800: var(--sky-800); --brand-700: var(--sky-700);
  --brand-600: var(--sky-600); --brand-500: var(--sky-500); --brand-100: var(--sky-100); --brand-50:  var(--sky-50);
}

/* Green scheme: the original design, identical for every module (must stay after the module rules) */
:root[data-scheme="green"] {
  --brand-950: var(--green-950); --brand-900: var(--green-900); --brand-800: var(--green-800); --brand-700: var(--green-700);
  --brand-600: var(--green-600); --brand-500: var(--green-500); --brand-100: var(--green-100); --brand-50:  var(--green-50);
  --bg: #f4f7f5; --ink: #0f1d16; --ink-2: #26362e; --muted: #4d5c54; --line: #dde4df; --line-2: #edf1ee;
  --subtle: #fafcfb; --stripe: #f8fbf9; --zero: #a7b2ac;
  --shadow: 0 1px 2px rgba(10, 40, 25, .05), 0 6px 20px rgba(10, 40, 25, .05);
  --shadow-lg: 0 24px 60px rgba(3, 30, 18, .28);
}

/* ───────── Design variation bar above the top bar (design review only) ───────── */
.review-bar {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 16px;
  background: var(--ink); color: #fff; font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 700;
}
.review-bar .rb-lbl { margin-right: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.review-bar a { padding: 5px 14px; border-radius: 99px; color: rgba(255,255,255,.82); cursor: pointer; text-decoration: none; }
.review-bar a:not(.active):hover { background: rgba(255,255,255,.12); color: #fff; }
.review-bar a.active { background: #fff; color: var(--ink); cursor: default; }
@media print { .review-bar { display: none; } }
.quick-nav .loader { display: none; }   /* design-variation switch: no loader */

/* ───────── Floating "Colours" switch (design review only) ───────── */
.scheme-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 940; display: flex; align-items: center; gap: 4px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 99px; box-shadow: 0 10px 30px rgba(10, 25, 45, .18);
  font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 700;
}
.scheme-fab-label { padding: 0 6px 0 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.scheme-fab button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 99px;
  background: transparent; color: var(--ink-2); font: inherit; cursor: pointer;
}
.scheme-fab button:hover { background: var(--bg); }
.scheme-fab button.active { background: var(--sw); color: #fff; }
.scheme-fab .sw { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px #fff; }
@media (max-width: 700px) { .scheme-fab { right: 12px; bottom: 12px; } .scheme-fab-label { display: none; } }
@media print { .scheme-fab { display: none; } }