/* Bootstrap 5.3 design tokens for the dienstengenerator.
 *
 * Every value here is read straight off the SVG mockups in
 * documentation/front-end.md, which is the source for the design. Those
 * mockups draw with an accent, a warning colour and currentColor at fixed
 * opacity steps; Bootstrap's subtle/emphasis scale expresses the same idea, so
 * the mockups translate into variables; the rules at the bottom of this file are the
 * exceptions, and they say why they are there.
 *
 * Only variables Bootstrap defines on :root can be set here. Component
 * variables (--bs-table-striped-bg, --bs-btn-bg, --bs-nav-pills-*) are redefined
 * inside their own component rule and cannot be reached from :root. See the
 * bottom of this file for what that means in the templates.
 */

:root {
  --gd-width-narrow: 26rem;
  --gd-width-page: 52rem;
  --gd-width-wide: 64rem;
  /* The login page as in phase 0: a gradient from Cerulean's blue to a deep one. */
  --gd-login-from: #2fa4e7;
  --gd-login-to: #1a5e8a;
  /* --- Accent -------------------------------------------------------------
   * #2a78d6 in the mockups: the active variant, the scope pills, the deviating
   * cell, every clickable grid header.
   */
  --bs-primary: #2a78d6;
  --bs-primary-rgb: 42, 120, 214;
  --bs-focus-ring-width: .2rem;
  --bs-focus-ring-opacity: .5;
  --bs-focus-ring-color: rgba(42, 120, 214, .5);
  --bs-btn-close-focus-shadow: 0 0 0 .2rem rgba(42, 120, 214, .5);

  /* The mockups fill the accent at 7-16% and stroke it at 40-85%. That is
   * exactly what the subtle/emphasis triplet is for.
   */
  --bs-primary-bg-subtle: #e9f1fb;
  --bs-primary-border-subtle: #9fc2ed;
  --bs-primary-text-emphasis: #1b4e8b;

  /* Links follow the accent; Bootstrap keeps these separate from --bs-primary. */
  --bs-link-color: #2a78d6;
  --bs-link-color-rgb: 42, 120, 214;
  --bs-link-hover-color: #1b4e8b;
  --bs-link-hover-color-rgb: 27, 78, 139;

  /* --- Warning ------------------------------------------------------------
   * #eb6834 in the mockups: the unrunnable scenario and the row it marks.
   */
  --bs-warning: #eb6834;
  --bs-warning-rgb: 235, 104, 52;
  --bs-warning-bg-subtle: #fdf0eb;
  --bs-warning-border-subtle: #f6bba4;
  --bs-warning-text-emphasis: #8d3e1f;

  /* --- Neutrals -----------------------------------------------------------
   * The mockups never use a grey; they use currentColor at 0.2 for borders and
   * 0.45 for labels. Translucent values keep that behaviour: they darken with
   * whatever sits behind them, so a border stays visible on a striped row.
   */
  --bs-border-color: rgba(33, 37, 41, 0.2);
  --bs-border-color-translucent: rgba(33, 37, 41, 0.16);

  /* 0.45 is right for a 9px uppercase column label but too faint for the help
   * text under a form field, which uses the same variable. 0.6 serves both.
   */
  --bs-secondary-color: rgba(33, 37, 41, 0.6);
  --bs-tertiary-color: rgba(33, 37, 41, 0.4);

  /* --- Type ---------------------------------------------------------------
   * Every number in the mockups is monospace and right-aligned: standing times,
   * variant names in the scenario table, week totals. Same stack as the SVGs.
   */
  --bs-font-monospace: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --gd-series-1: #2a78d6;
  --gd-series-2: #eb6834;
  --gd-series-3: #1baf7a;
  --gd-series-4: #eda100;
  --gd-series-5: #e87ba4;
  --gd-series-6: #008300;
  --gd-deployed: #1b2f4d;
  --gd-band: #e7e5df;
  --gd-grid: rgba(33, 37, 41, 0.1);
}

/* Dark. The mockups draw in currentColor precisely so they work either way; the
 * subtle/emphasis values are the only thing that has to flip. Drop this block if
 * the app will only ever be served light.
 */
[data-bs-theme="dark"] {
  --bs-primary: #5b9ce8;
  --bs-primary-rgb: 91, 156, 232;
  --bs-primary-bg-subtle: #16283f;
  --bs-primary-border-subtle: #2c5a8c;
  --bs-primary-text-emphasis: #9ec4f0;

  --bs-link-color: #5b9ce8;
  --bs-link-color-rgb: 91, 156, 232;
  --bs-link-hover-color: #9ec4f0;
  --bs-link-hover-color-rgb: 158, 196, 240;

  --bs-warning: #f08152;
  --bs-warning-rgb: 240, 129, 82;
  --bs-warning-bg-subtle: #3a1e12;
  --bs-warning-border-subtle: #6b3820;
  --bs-warning-text-emphasis: #f5ab86;

  --bs-border-color: rgba(222, 226, 230, 0.2);
  --bs-border-color-translucent: rgba(222, 226, 230, 0.16);
  --bs-secondary-color: rgba(222, 226, 230, 0.6);
  --bs-tertiary-color: rgba(222, 226, 230, 0.4);

  --gd-series-1: #3987e5;
  --gd-series-2: #d95926;
  --gd-series-3: #199e70;
  --gd-series-4: #c98500;
  --gd-series-5: #d55181;
  --gd-series-6: #008300;
  --gd-deployed: #e9f1fb;
  --gd-band: #2c2b28;
  --gd-grid: rgba(222, 226, 230, 0.1);
}


/* The browser draws its own clock button inside a time field. The app asks for a time in steps
 * of five or fifteen minutes and the field itself accepts nothing else, so the picker is a
 * second way in that nobody uses and that every field repeats. It is a shadow-DOM part, so a
 * variable cannot reach it: this is the one selector of our own.
 */
input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* Bootstrap sets the colours of a primary button inside its own component rule, from its
 * default blue, so --bs-primary on :root does not reach them: a day button or a matrix box
 * would be a different blue than a badge or bg-primary beside it. This
 * points those component variables back at the accent; it sets no styling of its own.
 */
.btn-primary,
.btn-outline-primary {
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}


.gd-deletable:has(.btn-check:checked) > td {
  background-color: var(--bs-secondary-bg);
  opacity: .55;
}

.gd-deletable:has(.btn-check:checked) input:not(.btn-check) {
  text-decoration: line-through;
}

/* Components used across the pages: table headers, cards, chips. */
.gd-th {
  --bs-table-bg: var(--bs-secondary-bg-subtle);
  background-color: var(--bs-secondary-bg-subtle);
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

.gd-card {
  border-color: var(--bs-secondary-border-subtle);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-sm);
  overflow: hidden;
}

.gd-chip {
  border-radius: var(--bs-border-radius-pill);
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border: var(--bs-border-width) solid var(--bs-primary-border-subtle);
}

.gd-caption {
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The warning sign next to something that needs attention, in three sizes. */
.gd-attention { font-size: .8rem; -webkit-text-stroke: .5px; }
.gd-attention-sm { font-size: .7rem; -webkit-text-stroke: .5px; }
.gd-attention-xs { font-size: .6rem; -webkit-text-stroke: .4px; }

/* Widths. */
.gd-page-width { max-width: var(--gd-width-page); }
.gd-narrow-width { max-width: var(--gd-width-narrow); }
.gd-fit { width: fit-content; max-width: 100%; }
.gd-page-block { width: var(--gd-width-page); max-width: 100%; }
.gd-min-w-0 { min-width: 0; }
.gd-min-w-7 { min-width: 7rem; }
.gd-min-w-8 { min-width: 8rem; }
.gd-min-w-9 { min-width: 9rem; }
.gd-min-w-11 { min-width: 11rem; }
.gd-min-w-18 { min-width: 18rem; }
.gd-w-6 { width: 6rem; }
.gd-w-8 { width: 8rem; }

.gd-tabular { font-variant-numeric: tabular-nums; }
.gd-fill-secondary { fill: var(--bs-secondary-color); }
.gd-stroke-grid { stroke: var(--gd-grid); }
.gd-scroll-list { max-height: 15rem; }

/* The login page, as phase 0 drew it: two round logos that hang over the top edge of the card. */
.gd-login-backdrop { background: linear-gradient(135deg, var(--gd-login-from) 0%, var(--gd-login-to) 100%); }
.gd-login-card { max-width: 420px; }
.gd-login-logos { margin-top: -48px; }
.gd-login-logo { width: 96px; height: 96px; }
.gd-login-logo-img { max-width: 72px; max-height: 60px; }