@charset "UTF-8";
/* ================================================
   Theme Base - CSS Custom Properties (Variables)
   ================================================

   This file defines CSS variables for dynamic theming.
   These variables can be overridden at runtime via JavaScript
   to enable theme customization without recompiling SCSS.

   Usage:
   1. Import this file in your theme SCSS
   2. Use var(--primary-color) instead of hardcoded colors
   3. Override via JavaScript: document.documentElement.style.setProperty('--primary-color', '#new-color')
   ================================================ */
/* ================================================
   IMPORTANT — no light-mode :root defaults live here
   ================================================

   Every themeable variable is consumed by the tenant CSS as
   var(--name, <tenant brand fallback>), where the fallback is the
   value compiled from that tenant's own theme SCSS (see the runtime
   bridge in _themePost.scss). Defining a light-mode default for any
   of those names in :root would WIN over the tenant fallback — a
   defined custom property makes the var() fallback inert — and force
   every un-customised tenant onto this generic placeholder palette.
   So we deliberately do NOT define light-mode values here.

   Light-mode values come from:
     - the tenant CSS fallback (when no DB theme is configured), or
     - the dynamic :root { ... } block injected at runtime by
       ThemeRenderService.GenerateThemeCss (when the Theme Customizer
       is configured for the tenant).

   Only the dark-mode overrides (body.dark-mode) and the --dark-*
   palette defaults live in this file. --dark-* names are never
   consumed as a light-mode fallback, so they can never clobber a
   tenant's brand colours.
   ================================================ */
/* ================================================
   Dark Mode - Default Palette
   ================================================

   The default dark colours. Every name here is --dark-* prefixed and
   is only referenced from inside body.dark-mode below, so nothing in
   this block affects light mode. ThemeRenderService overrides any of
   these at runtime when a tenant customises its dark theme.
   ================================================ */
:root {
  --dark-primary-color: #4d94ff;
  --dark-secondary-color: #e0e0e0;
  --dark-secondary-color-dark: #cccccc;
  --dark-secondary-color-darkest: #aaaaaa;
  --dark-tertiary-color: #b0b0b0;
  --dark-tertiary-color-light: #d0d0d0;
  --dark-header-background-color: #2d2d2d;
  --dark-header-text-color: #e0e0e0;
  --dark-header-nav-color: #e0e0e0;
  --dark-header-nav-border-color: rgba(255, 255, 255, 0.1);
  --dark-header-nav-hover-background-color: rgba(255, 255, 255, 0.1);
  --dark-header-nav-hover-text-color: #ffffff;
  --dark-sidebar-background-color: #252525;
  --dark-sidebar-text-color: #e0e0e0;
  --dark-sidebar-active-background-color: #4d94ff;
  --dark-sidebar-active-text-color: #ffffff;
  --dark-sidebar-hover-background-color: #3d3d3d;
  --dark-sidebar-border-color: #404040;
  --dark-button-background-color: #4d94ff;
  --dark-button-text-color: #ffffff;
  --dark-button-hover-background-color: #3d7ce0;
  --dark-button-hover-text-color: #ffffff;
  --dark-button-border-color: #4d94ff;
  --dark-link-color: #6ba3e0;
  --dark-link-hover-color: #8fc4ff;
  --dark-link-visited-color: #9b7fd4;
  --dark-input-background-color: #2d2d2d;
  --dark-input-text-color: #e0e0e0;
  --dark-input-border-color: #404040;
  --dark-input-readonly-background-color: #1a1a1a;
  --dark-input-readonly-text-color: #a0a0a0;
  --dark-input-focus-border-color: #4d94ff;
  --dark-label-color: #e0e0e0;
  --dark-background-color: #1a1a1a;
  --dark-text-color: #e0e0e0;
  --dark-border-color: #404040;
  --dark-container-background-color: #252525;
  --dark-heading-background-color: #2d2d2d;
  --dark-heading-text-color: #e0e0e0;
  --dark-success-color: #4caf50;
  --dark-error-color: #f44336;
  --dark-warning-color: #ff9800;
  --dark-info-color: #2196f3;
  --dark-login-background-color: #1a1a1a;
}

/* ================================================
   Dark Mode Override
   ================================================

   Activated when the body carries the dark-mode class. Each active
   variable is swapped to its (customisable) --dark-* value with a
   hard-coded dark fallback, so dark mode still works with no DB theme
   configured. Every override MUST live under this selector (not in
   :root) so that its dark value can never leak into light mode.
   ================================================ */
body.dark-mode {
  /* Dark Mode - Primary Colors */
  --primary-color: var(--dark-primary-color, #4d94ff);
  --secondary-color: var(--dark-secondary-color, #e0e0e0);
  --secondary-color-dark: var(--dark-secondary-color-dark, #cccccc);
  --secondary-color-darkest: var(--dark-secondary-color-darkest, #aaaaaa);
  --tertiary-color: var(--dark-tertiary-color, #b0b0b0);
  --tertiary-color-light: var(--dark-tertiary-color-light, #d0d0d0);
  /* Dark Mode - Header & Navigation */
  --header-background-color: var(--dark-header-background-color, #2d2d2d);
  --header-text-color: var(--dark-header-text-color, #e0e0e0);
  --header-nav-color: var(--dark-header-nav-color, #e0e0e0);
  --header-nav-border-color: var(--dark-header-nav-border-color, rgba(255, 255, 255, 0.1));
  --header-nav-hover-background-color: var(--dark-header-nav-hover-background-color, rgba(255, 255, 255, 0.1));
  --header-nav-hover-text-color: var(--dark-header-nav-hover-text-color, #ffffff);
  /* Dark Mode - Sidebar */
  --sidebar-background-color: var(--dark-sidebar-background-color, #252525);
  --sidebar-text-color: var(--dark-sidebar-text-color, #e0e0e0);
  --sidebar-active-background-color: var(--dark-sidebar-active-background-color, #4d94ff);
  --sidebar-active-text-color: var(--dark-sidebar-active-text-color, #ffffff);
  --sidebar-hover-background-color: var(--dark-sidebar-hover-background-color, #3d3d3d);
  --sidebar-border-color: var(--dark-sidebar-border-color, #404040);
  /* Dark Mode - Buttons */
  --button-background-color: var(--dark-button-background-color, #4d94ff);
  --button-text-color: var(--dark-button-text-color, #ffffff);
  --button-hover-background-color: var(--dark-button-hover-background-color, #3d7ce0);
  --button-hover-text-color: var(--dark-button-hover-text-color, #ffffff);
  --button-border-color: var(--dark-button-border-color, #4d94ff);
  /* Dark Mode - Links */
  --link-color: var(--dark-link-color, #6ba3e0);
  --link-hover-color: var(--dark-link-hover-color, #8fc4ff);
  --link-visited-color: var(--dark-link-visited-color, #9b7fd4);
  /* Dark Mode - Inputs & Forms */
  --input-background-color: var(--dark-input-background-color, #2d2d2d);
  --input-text-color: var(--dark-input-text-color, #e0e0e0);
  --input-border-color: var(--dark-input-border-color, #404040);
  --input-readonly-background-color: var(--dark-input-readonly-background-color, #1a1a1a);
  --input-readonly-text-color: var(--dark-input-readonly-text-color, #a0a0a0);
  --input-focus-border-color: var(--dark-input-focus-border-color, #4d94ff);
  --label-color: var(--dark-label-color, #e0e0e0);
  /* Dark Mode - General */
  --background-color: var(--dark-background-color, #1a1a1a);
  --text-color: var(--dark-text-color, #e0e0e0);
  --border-color: var(--dark-border-color, #404040);
  --container-background-color: var(--dark-container-background-color, #252525);
  --heading-background-color: var(--dark-heading-background-color, #2d2d2d);
  --heading-text-color: var(--dark-heading-text-color, #e0e0e0);
  /* Dark Mode - Status Colors */
  --success-color: var(--dark-success-color, #4caf50);
  --error-color: var(--dark-error-color, #f44336);
  --warning-color: var(--dark-warning-color, #ff9800);
  --info-color: var(--dark-info-color, #2196f3);
  /* Dark Mode - Login */
  --login-background-color: var(--dark-login-background-color, #1a1a1a);
  /* Dark Mode - Expansion Set (progress / login / controls / picker /
     messaging / nav / sidebar hover). Previously mis-placed in :root
     with dark values, which leaked dark colours into light mode. */
  --login-background-color-wide: var(--dark-login-background-color-wide, #1a1a1a);
  --login-text-color: var(--dark-login-text-color, #e0e0e0);
  --login-input-border-color: var(--dark-login-input-border-color, #404040);
  --progress-background-color: var(--dark-progress-background-color, rgba(0, 0, 0, 0.8));
  --controls-background-color: var(--dark-controls-background-color, var(--dark-primary-color, #4d94ff));
  --controls-text-color: var(--dark-controls-text-color, var(--dark-button-text-color, #ffffff));
  --controls-hover-text-color: var(--dark-controls-hover-text-color, var(--dark-button-hover-text-color, #ffffff));
  --bar-color: var(--dark-bar-color, var(--dark-primary-color, #4d94ff));
  --date-picker-background-color: var(--dark-date-picker-background-color, var(--dark-container-background-color, #252525));
  --message-color: var(--dark-message-color, var(--dark-info-color, #2196f3));
  --error-footer-color: var(--dark-error-footer-color, var(--dark-error-color, #f44336));
  --tertiary-nav-color: var(--dark-tertiary-nav-color, var(--dark-tertiary-color, #b0b0b0));
  --sidebar-hover-light-color: var(--dark-sidebar-hover-light-color, var(--dark-sidebar-hover-background-color, #3d3d3d));
  --sidebar-hover-dark-color: var(--dark-sidebar-hover-dark-color, var(--dark-sidebar-active-background-color, #4d94ff));
}