/*
  XQtive colors. This is the only stylesheet that should contain color values.

  To rebrand later:
  1. Change the shared brand colors below (navy, green, red).
  2. Change the "Light pages" values, then the "Dark pages" values.
     Dark is the default. Light is what the account menu switches to.
  3. When a color has a matching "-rgb" line, change that line to the same
     color as three numbers (red, green, blue), each from 0 to 255.
  4. Change the product name with XQ_BRAND_NAME in main/settings.py,
     or with the XQ_BRAND_NAME environment variable.
     templates/includes/brand.html prints that name beside the logo.

  Do not put hex colors in templates or in other CSS files.
*/

:root {
  /* Shared brand colors. Buttons stay this green in both modes. */
  --xq-navy: #0B3F89;
  --xq-navy-rgb: 11, 63, 137;

  --xq-green: #2F7D0C;
  --xq-green-rgb: 47, 125, 12;

  --xq-danger: #C4312E;
  --xq-danger-rgb: 196, 49, 46;

  --xq-on-fill: #FFFFFF;

  /* Light pages. */
  color-scheme: light;

  --xq-page: #F4F7FB;
  --xq-surface: #FFFFFF;
  --xq-ink: #1F2933;
  --xq-muted: #6B7280;
  --xq-muted-rgb: 107, 114, 128;
  --xq-amber: #B86E00;
  --xq-amber-rgb: 184, 110, 0;
  --xq-border: #D5DDE8;
  --xq-sidebar-bg: var(--xq-navy);
  --xq-sidebar-text: #FFFFFF;
  --xq-link: var(--xq-navy);
  --xq-link-hover: color-mix(in srgb, var(--xq-navy) 82%, black);
  --xq-brand-ink: var(--xq-navy);
  --xq-status-connected: var(--xq-green);
  --xq-status-attention: var(--xq-amber);
  --xq-status-idle: var(--xq-muted);
  --xq-danger-text: var(--xq-danger);

  --xq-navy-hover: var(--xq-link-hover);
  --xq-sidebar-muted: color-mix(in srgb, var(--xq-sidebar-text) 68%, transparent);
  --xq-sidebar-active: color-mix(in srgb, var(--xq-sidebar-text) 16%, transparent);
  --xq-surface-muted: color-mix(in srgb, var(--xq-ink) 5%, var(--xq-surface));
}

[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Dark pages. The sidebar navy goes a step deeper so it still reads
     as navy against the dark page. Status colors are lighter so the
     words and dots stay clear. Buttons keep the shared green above. */
  --xq-page: #0E1520;
  --xq-surface: #182232;
  --xq-ink: #E8EEF6;
  --xq-muted: #B7BEC9;
  --xq-muted-rgb: 183, 190, 201;
  --xq-amber: #E8B04A;
  --xq-amber-rgb: 232, 176, 74;
  --xq-border: #2C3A4F;
  --xq-sidebar-bg: #072E64;
  --xq-link: #9DC2F0;
  --xq-link-hover: color-mix(in srgb, var(--xq-link) 82%, white);
  --xq-brand-ink: var(--xq-ink);
  --xq-status-connected: #7DCE45;
  --xq-status-attention: var(--xq-amber);
  --xq-status-idle: var(--xq-muted);
  --xq-danger-text: #FF8B84;
  --xq-surface-muted: color-mix(in srgb, var(--xq-ink) 8%, var(--xq-surface));
}

:root,
[data-bs-theme="dark"] {
  --tblr-primary: var(--xq-green);
  --tblr-primary-rgb: var(--xq-green-rgb);
  --tblr-primary-fg: var(--xq-on-fill);
  --tblr-success: var(--xq-green);
  --tblr-success-rgb: var(--xq-green-rgb);
  --tblr-success-fg: var(--xq-on-fill);
  --tblr-danger: var(--xq-danger);
  --tblr-danger-rgb: var(--xq-danger-rgb);
  --tblr-danger-fg: var(--xq-on-fill);
  --tblr-warning: var(--xq-amber);
  --tblr-warning-rgb: var(--xq-amber-rgb);
  --tblr-secondary: var(--xq-muted);
  --tblr-secondary-rgb: var(--xq-muted-rgb);
  --tblr-body-bg: var(--xq-page);
  --tblr-body-color: var(--xq-ink);
  --tblr-emphasis-color: var(--xq-ink);
  --tblr-secondary-color: var(--xq-muted);
  --tblr-link-color: var(--xq-link);
  --tblr-link-hover-color: var(--xq-link-hover);
  --tblr-border-color: var(--xq-border);
  --tblr-bg-surface: var(--xq-surface);
  --tblr-bg-surface-primary: var(--xq-surface);
  --tblr-bg-surface-secondary: var(--xq-surface-muted);
  --tblr-bg-surface-tertiary: var(--xq-surface-muted);
  --tblr-bg-forms: var(--xq-surface);
  --tblr-card-bg: var(--xq-surface);
  --tblr-dropdown-bg: var(--xq-surface);
  --tblr-dropdown-color: var(--xq-ink);
}

.navbar.xq-sidebar {
  --tblr-navbar-bg: var(--xq-sidebar-bg);
  --tblr-navbar-color: var(--xq-sidebar-text);
  --tblr-navbar-hover-color: var(--xq-sidebar-text);
  --tblr-navbar-active-color: var(--xq-sidebar-text);
  --tblr-navbar-active-bg: var(--xq-sidebar-active);
  --tblr-navbar-brand-color: var(--xq-sidebar-text);
  --tblr-navbar-brand-hover-color: var(--xq-sidebar-text);
  --tblr-navbar-border-color: transparent;
  --tblr-navbar-toggler-icon-color: var(--xq-sidebar-text);
  --tblr-navbar-toggler-border-color: var(--xq-sidebar-active);
  background: var(--xq-sidebar-bg);
  color: var(--xq-sidebar-text);
}

.navbar.xq-sidebar .xq-brand,
.navbar.xq-sidebar .xq-brand:hover,
.navbar.xq-sidebar .nav-link,
.navbar.xq-sidebar .dropdown-item {
  color: var(--xq-sidebar-text);
}

.navbar.xq-sidebar .nav-link.active,
.navbar.xq-sidebar .nav-link:hover,
.navbar.xq-sidebar .nav-link:focus,
.navbar.xq-sidebar .dropdown-item.active,
.navbar.xq-sidebar .dropdown-item:hover,
.navbar.xq-sidebar .dropdown-item:focus {
  color: var(--xq-sidebar-text);
  background: var(--xq-sidebar-active);
}

.navbar.xq-sidebar .nav-link.disabled,
.navbar.xq-sidebar .nav-link.disabled:hover {
  color: var(--xq-sidebar-muted);
  background: transparent;
  opacity: 1;
}

.navbar.xq-sidebar .nav-link:focus-visible,
.navbar.xq-sidebar .dropdown-item:focus-visible {
  outline: 2px solid var(--xq-sidebar-text);
  outline-offset: 2px;
}

.navbar.xq-sidebar .dropdown-menu {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.xq-status-dot {
  background: var(--xq-status-idle);
}

.xq-status.is-connected .xq-status-dot {
  background: var(--xq-status-connected);
}

.xq-status.is-expired .xq-status-dot {
  background: var(--xq-status-attention);
}

.xq-status-label {
  color: var(--xq-status-idle);
}

.xq-status.is-connected .xq-status-label {
  color: var(--xq-status-connected);
}

.xq-status.is-expired .xq-status-label {
  color: var(--xq-status-attention);
}

.xq-auth .xq-brand,
.xq-auth .xq-brand:hover {
  color: var(--xq-brand-ink);
}

button.dropdown-item.xq-theme-toggle {
  color: var(--xq-ink);
  background: transparent;
}

button.dropdown-item.xq-theme-toggle:hover,
button.dropdown-item.xq-theme-toggle:focus {
  color: var(--xq-ink);
  background: var(--xq-surface-muted);
}

.errorlist,
.xq-auth .errorlist {
  color: var(--xq-danger-text);
}

/* Filled green and red bars need light text in both modes. */
.bg-success,
.bg-danger,
.table thead.bg-success th,
.card-header.bg-success,
.card-header.bg-danger {
  color: var(--xq-on-fill);
}

/* Inputs and tables inside older pages follow the same surfaces. */
.content-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.content-wrapper select,
.content-wrapper textarea,
.form-control,
.form-select {
  background-color: var(--tblr-bg-forms);
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
}

.table {
  --tblr-table-color: var(--xq-ink);
  --tblr-table-bg: transparent;
  --tblr-table-border-color: var(--xq-border);
  color: var(--xq-ink);
}