/*
  Themes. Each theme has a light and a dark version and states ten colours; everything else on the
  page, including the chart, is worked out from those ten.

  A theme applies to whatever element carries data-theme and data-mode: normally <html>, and also the
  preview tiles on the theme page, which is how each tile shows its own theme.
*/

/* ---------------------------------------------------------------- the themes */

/* Connect2: the product's own look, from its design system. Warm paper, ink, a blue for selection
   and short-term work, and hi-vis amber for the brand, today and the lookahead. */
[data-theme="clearly"][data-mode="light"] {
  --stp-bg: #f4f3ef; --stp-surface: #ffffff; --stp-surface-2: #ecebe6; --stp-text: #1b1d21; --stp-muted: #5c6169;
  --stp-border: #dedcd5; --stp-accent: #2456c7; --stp-on-accent: #ffffff; --stp-nav-bg: #ecebe6; --stp-nav-text: #1b1d21;
  --stp-border-strong: #84888f;
  --stp-nav-current: var(--stp-surface); --stp-nav-current-shadow: var(--shadow-1);
}
[data-theme="clearly"][data-mode="dark"] {
  --stp-bg: #121417; --stp-surface: #1a1d21; --stp-surface-2: #23272c; --stp-text: #ebe9e4; --stp-muted: #a0a5ac;
  --stp-border: #30353b; --stp-accent: #82a9ff; --stp-on-accent: #0c1a38; --stp-nav-bg: #0e1013; --stp-nav-text: #ebe9e4;
  --stp-border-strong: #666c74;
  --stp-nav-current: var(--stp-surface); --stp-nav-current-shadow: var(--shadow-1);
}

[data-theme="classic"][data-mode="light"] {
  --stp-bg: #ffffff; --stp-surface: #ffffff; --stp-surface-2: #f3f5f7; --stp-text: #212529; --stp-muted: #6c757d;
  --stp-border: #dee2e6; --stp-accent: #0d6efd; --stp-on-accent: #ffffff; --stp-nav-bg: #ffffff; --stp-nav-text: #212529;
}
[data-theme="classic"][data-mode="dark"] {
  --stp-bg: #16181c; --stp-surface: #1e2126; --stp-surface-2: #282c33; --stp-text: #e6e8eb; --stp-muted: #9aa3ad;
  --stp-border: #3a404a; --stp-accent: #5b9bff; --stp-on-accent: #06142b; --stp-nav-bg: #1e2126; --stp-nav-text: #e6e8eb;
}

[data-theme="slate"][data-mode="light"] {
  --stp-bg: #eef1f5; --stp-surface: #ffffff; --stp-surface-2: #e3e8ef; --stp-text: #1f2a37; --stp-muted: #5b6b7c;
  --stp-border: #cbd3dd; --stp-accent: #0f766e; --stp-on-accent: #ffffff; --stp-nav-bg: #1f2a37; --stp-nav-text: #f1f5f9;
}
[data-theme="slate"][data-mode="dark"] {
  --stp-bg: #0f172a; --stp-surface: #172033; --stp-surface-2: #1e293b; --stp-text: #e2e8f0; --stp-muted: #94a3b8;
  --stp-border: #334155; --stp-accent: #2dd4bf; --stp-on-accent: #062925; --stp-nav-bg: #0b1220; --stp-nav-text: #e2e8f0;
}

[data-theme="forest"][data-mode="light"] {
  --stp-bg: #f1f5ee; --stp-surface: #fbfdf9; --stp-surface-2: #e3ecdd; --stp-text: #1f2d1f; --stp-muted: #5a6b58;
  --stp-border: #c9d6c3; --stp-accent: #2f7d32; --stp-on-accent: #ffffff; --stp-nav-bg: #234d27; --stp-nav-text: #eef6ea;
}
[data-theme="forest"][data-mode="dark"] {
  --stp-bg: #101a12; --stp-surface: #17241a; --stp-surface-2: #1f3023; --stp-text: #dfeadd; --stp-muted: #93a892;
  --stp-border: #2f4534; --stp-accent: #6cc070; --stp-on-accent: #0c1f0e; --stp-nav-bg: #0c140e; --stp-nav-text: #dfeadd;
}

[data-theme="ocean"][data-mode="light"] {
  --stp-bg: #eaf4fb; --stp-surface: #f8fcff; --stp-surface-2: #d7e9f6; --stp-text: #0c2a3f; --stp-muted: #4c6a80;
  --stp-border: #b9d3e6; --stp-accent: #0369a1; --stp-on-accent: #ffffff; --stp-nav-bg: #075985; --stp-nav-text: #e0f2fe;
}
[data-theme="ocean"][data-mode="dark"] {
  --stp-bg: #06131f; --stp-surface: #0b1e2e; --stp-surface-2: #11293d; --stp-text: #d6eaf8; --stp-muted: #86a6bd;
  --stp-border: #1d3b54; --stp-accent: #38bdf8; --stp-on-accent: #04283b; --stp-nav-bg: #041019; --stp-nav-text: #d6eaf8;
}

[data-theme="sunset"][data-mode="light"] {
  --stp-bg: #fdf4ec; --stp-surface: #fffaf5; --stp-surface-2: #f8e6d6; --stp-text: #3a2418; --stp-muted: #7d6253;
  --stp-border: #ebd0bb; --stp-accent: #d9541e; --stp-on-accent: #ffffff; --stp-nav-bg: #7c2d12; --stp-nav-text: #ffedd5;
}
[data-theme="sunset"][data-mode="dark"] {
  --stp-bg: #1c1310; --stp-surface: #261a15; --stp-surface-2: #33231c; --stp-text: #f3e3d8; --stp-muted: #b89c8c;
  --stp-border: #4a3329; --stp-accent: #ff8a4c; --stp-on-accent: #2b1206; --stp-nav-bg: #140d0a; --stp-nav-text: #f3e3d8;
}

[data-theme="plum"][data-mode="light"] {
  --stp-bg: #f6f1fa; --stp-surface: #fdfaff; --stp-surface-2: #e9dff2; --stp-text: #2b1b3a; --stp-muted: #6d5a80;
  --stp-border: #d7c8e4; --stp-accent: #7e3fb5; --stp-on-accent: #ffffff; --stp-nav-bg: #4a1d6e; --stp-nav-text: #f3e8ff;
}
[data-theme="plum"][data-mode="dark"] {
  --stp-bg: #150f1d; --stp-surface: #1e1629; --stp-surface-2: #291e38; --stp-text: #e9def5; --stp-muted: #a996bd;
  --stp-border: #3d2e52; --stp-accent: #c084fc; --stp-on-accent: #2a0f45; --stp-nav-bg: #0f0a15; --stp-nav-text: #e9def5;
}

[data-theme="sand"][data-mode="light"] {
  --stp-bg: #f6f1e7; --stp-surface: #fdfaf3; --stp-surface-2: #ebe2d0; --stp-text: #33291a; --stp-muted: #76684f;
  --stp-border: #d8ccb3; --stp-accent: #9a6b1f; --stp-on-accent: #ffffff; --stp-nav-bg: #4a3b22; --stp-nav-text: #f6ecd9;
}
[data-theme="sand"][data-mode="dark"] {
  --stp-bg: #1a1711; --stp-surface: #242018; --stp-surface-2: #2f2a1f; --stp-text: #ede4d2; --stp-muted: #ab9f86;
  --stp-border: #453d2d; --stp-accent: #e0b25a; --stp-on-accent: #2c1f05; --stp-nav-bg: #12100b; --stp-nav-text: #ede4d2;
}

[data-theme="contrast"][data-mode="light"] {
  --stp-bg: #ffffff; --stp-surface: #ffffff; --stp-surface-2: #ededed; --stp-text: #000000; --stp-muted: #333333;
  --stp-border: #000000; --stp-accent: #0033cc; --stp-on-accent: #ffffff; --stp-nav-bg: #000000; --stp-nav-text: #ffffff;
}
[data-theme="contrast"][data-mode="dark"] {
  --stp-bg: #000000; --stp-surface: #000000; --stp-surface-2: #1c1c1c; --stp-text: #ffffff; --stp-muted: #d0d0d0;
  --stp-border: #ffffff; --stp-accent: #ffd400; --stp-on-accent: #000000; --stp-nav-bg: #000000; --stp-nav-text: #ffd400;
}

/* ---------------------------------------------------------------- what follows from a theme */

/* The base colour of each level of the hierarchy. A master programme can set its own (they are put
   on <html> by js/project-settings.js); either way the theme blends them in below. */
:root {
  --level-hue-1: #5b7fa6;
  --level-hue-2: #6f9a6a;
  --level-hue-3: #c9a23f;
  --level-hue-4: #c46b52;
  --level-hue-5: #8b78a8;
  --level-hue-6: #b8916a;
}

[data-mode="light"] {
  --stp-brand: #f2b01e; --stp-on-brand: #1b1d21;
  --stp-danger: #b42318; --stp-success: #2f7a3e;
  --stp-today: var(--stp-text);
  --g-critical: #e06c74; --g-critical-done: #b42330;
  --level-strength: 16%;
  --lookahead-strength: 14%;
  --shadow-1: 0 1px 2px rgba(27, 29, 33, 0.06), 0 0 0 1px rgba(27, 29, 33, 0.07);
  --shadow-2: 0 8px 24px rgba(27, 29, 33, 0.12), 0 0 0 1px rgba(27, 29, 33, 0.08);
}
[data-mode="dark"] {
  --stp-brand: #f5b82e; --stp-on-brand: #121417;
  --stp-danger: #ff8a7a; --stp-success: #6cc47e;
  --stp-today: var(--stp-brand);
  --g-critical: #c25a62; --g-critical-done: #ff8a8f;
  --level-strength: 24%;
  --lookahead-strength: 10%;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme] {
  background-color: var(--stp-bg);
  color: var(--stp-text);

  /* Ink is what says "press me", so the accent is free to mean selection and short-term work. */
  --stp-action: var(--stp-text);
  --stp-on-action: var(--stp-surface);
  --stp-selected: color-mix(in srgb, var(--stp-accent) 12%, var(--stp-surface));

  /* Bootstrap takes its colours from these. */
  --bs-body-bg: var(--stp-bg);
  --bs-body-color: var(--stp-text);
  --bs-emphasis-color: var(--stp-text);
  --bs-secondary-color: var(--stp-muted);
  --bs-secondary-bg: var(--stp-surface-2);
  --bs-tertiary-bg: var(--stp-surface-2);
  --bs-border-color: var(--stp-border);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 8px;

  /* The chart: a canvas, which reads these when it is made (js/gantt/gantt.js). */
  --g-grid: var(--stp-border);
  --g-weekend: color-mix(in srgb, var(--stp-text) 5%, transparent);
  --g-head-text: var(--stp-muted);
  --g-head-strong: var(--stp-text);
  --g-head-line: var(--stp-border);
  --g-window: color-mix(in srgb, var(--stp-brand) var(--lookahead-strength), transparent);
  --g-window-edge: color-mix(in srgb, var(--stp-brand) 70%, transparent);
  --g-today: var(--stp-today);
  --g-flag: var(--stp-brand);
  --g-flag-text: var(--stp-on-brand);
  --g-summary: var(--stp-text);
  --g-master: color-mix(in srgb, var(--stp-text) 50%, var(--stp-surface));
  --g-master-done: color-mix(in srgb, var(--stp-text) 78%, var(--stp-surface));
  --g-stp: color-mix(in srgb, var(--stp-accent) 65%, var(--stp-surface));
  --g-stp-done: var(--stp-accent);
  --g-pull: color-mix(in srgb, var(--stp-accent) 22%, var(--stp-surface));
  --g-warn: #e07b00;
  --g-link: var(--stp-muted);
  --g-selected: color-mix(in srgb, var(--stp-accent) 12%, transparent);
  --g-preview: color-mix(in srgb, var(--stp-accent) 65%, transparent);

  /* A level's band is its colour as a quiet tint; its edge strip is the colour at full strength;
     the lines above and below a summary sit in between. Any colour a company picks stays readable. */
  --g-level-1: color-mix(in srgb, var(--level-hue-1) var(--level-strength), var(--stp-surface));
  --g-level-2: color-mix(in srgb, var(--level-hue-2) var(--level-strength), var(--stp-surface));
  --g-level-3: color-mix(in srgb, var(--level-hue-3) var(--level-strength), var(--stp-surface));
  --g-level-4: color-mix(in srgb, var(--level-hue-4) var(--level-strength), var(--stp-surface));
  --g-level-5: color-mix(in srgb, var(--level-hue-5) var(--level-strength), var(--stp-surface));
  --g-level-6: color-mix(in srgb, var(--level-hue-6) var(--level-strength), var(--stp-surface));
  --g-level-line-1: color-mix(in srgb, var(--level-hue-1) 45%, var(--stp-surface));
  --g-level-line-2: color-mix(in srgb, var(--level-hue-2) 45%, var(--stp-surface));
  --g-level-line-3: color-mix(in srgb, var(--level-hue-3) 45%, var(--stp-surface));
  --g-level-line-4: color-mix(in srgb, var(--level-hue-4) 45%, var(--stp-surface));
  --g-level-line-5: color-mix(in srgb, var(--level-hue-5) 45%, var(--stp-surface));
  --g-level-line-6: color-mix(in srgb, var(--level-hue-6) 45%, var(--stp-surface));
  --g-level-edge-1: var(--level-hue-1);
  --g-level-edge-2: var(--level-hue-2);
  --g-level-edge-3: var(--level-hue-3);
  --g-level-edge-4: var(--level-hue-4);
  --g-level-edge-5: var(--level-hue-5);
  --g-level-edge-6: var(--level-hue-6);
}

/* A theme that does not state these gets them worked out from what it does state. */
[data-theme]:not([data-theme="clearly"]) {
  --stp-border-strong: color-mix(in srgb, var(--stp-text) 45%, var(--stp-surface));
}

/* ---------------------------------------------------------------- buttons and controls */

/* Four kinds of button, so importance does not rest on an outline colour:
     .btn-primary             ink fill          the one action the screen exists for
     .btn-outline-secondary   outlined surface  occasional, important actions
     .btn-ghost               text and icon     everyday toolbar actions
     .btn-outline-danger      red text          destructive; a filled red only inside a confirmation */
[data-theme] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font: 500 13.5px/20px var(--font-sans);
  white-space: nowrap;
  --bs-btn-disabled-opacity: 0.45;
}

[data-theme] .btn-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
}

[data-theme] .btn:focus-visible,
[data-theme] .form-control:focus-visible,
[data-theme] .form-select:focus-visible,
[data-theme] .form-check-input:focus-visible {
  outline: 2px solid var(--stp-accent);
  outline-offset: 2px;
  box-shadow: none;
}

[data-theme] .btn-primary {
  --bs-btn-color: var(--stp-on-action);
  --bs-btn-bg: var(--stp-action);
  --bs-btn-border-color: var(--stp-action);
  --bs-btn-hover-color: var(--stp-on-action);
  --bs-btn-hover-bg: color-mix(in srgb, var(--stp-action) 88%, var(--stp-surface));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--stp-action) 88%, var(--stp-surface));
  --bs-btn-active-color: var(--stp-on-action);
  --bs-btn-active-bg: color-mix(in srgb, var(--stp-action) 80%, var(--stp-surface));
  --bs-btn-active-border-color: color-mix(in srgb, var(--stp-action) 80%, var(--stp-surface));
  --bs-btn-disabled-color: var(--stp-on-action);
  --bs-btn-disabled-bg: var(--stp-action);
  --bs-btn-disabled-border-color: var(--stp-action);
}

[data-theme] .btn-outline-secondary,
[data-theme] .btn-outline-primary {
  --bs-btn-color: var(--stp-text);
  --bs-btn-bg: var(--stp-surface);
  --bs-btn-border-color: var(--stp-border-strong);
  --bs-btn-hover-color: var(--stp-text);
  --bs-btn-hover-bg: var(--stp-surface-2);
  --bs-btn-hover-border-color: var(--stp-border-strong);
  --bs-btn-active-color: var(--stp-text);
  --bs-btn-active-bg: var(--stp-surface-2);
  --bs-btn-active-border-color: var(--stp-border-strong);
  --bs-btn-disabled-color: var(--stp-text);
  --bs-btn-disabled-bg: var(--stp-surface);
  --bs-btn-disabled-border-color: var(--stp-border-strong);
}

[data-theme] .btn-ghost,
[data-theme] .btn-outline-danger {
  --bs-btn-color: var(--stp-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--stp-text);
  --bs-btn-hover-bg: var(--stp-surface-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--stp-text);
  --bs-btn-active-bg: var(--stp-surface-2);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--stp-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

[data-theme] .btn-outline-danger {
  --bs-btn-color: var(--stp-danger);
  --bs-btn-hover-color: var(--stp-danger);
  --bs-btn-active-color: var(--stp-danger);
  --bs-btn-disabled-color: var(--stp-danger);
}

/* Ghost buttons in a group are separate buttons that happen to sit together. */
[data-theme] .btn-group > .btn-ghost {
  border-radius: 6px !important;
  margin-left: 0;
}

.btn-divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--stp-border);
}

[data-theme] a:not(.btn):not(.nav-place):not(.dropdown-item):not(.nav-brand):not(.cp-tab):not(.open-tab):not(.ppc-col) {
  color: var(--stp-accent);
}

[data-theme] .card {
  --bs-card-bg: var(--stp-surface);
  --bs-card-border-color: transparent;
  --bs-card-cap-bg: transparent;
  --bs-card-border-radius: 8px;
  box-shadow: var(--shadow-1);
}

[data-theme] .dropdown-menu,
[data-theme] .modal-content {
  --bs-dropdown-bg: var(--stp-surface);
  --bs-dropdown-color: var(--stp-text);
  --bs-dropdown-link-color: var(--stp-text);
  --bs-dropdown-link-hover-color: var(--stp-text);
  --bs-dropdown-link-hover-bg: var(--stp-surface-2);
  --bs-dropdown-border-color: transparent;
  --bs-modal-bg: var(--stp-surface);
  --bs-modal-border-color: transparent;
  box-shadow: var(--shadow-2);
}

[data-theme] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--stp-text);
  --bs-table-border-color: var(--stp-border);
}

/* Column headings: small capitals in the muted colour, as on the chart. */
[data-theme] .table > thead th {
  font: 600 11.5px/16px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stp-muted);
}

[data-theme] .form-control,
[data-theme] .form-select {
  min-height: 32px;
  padding-block: 4px;
  background-color: var(--stp-surface);
  border-color: var(--stp-border-strong);
  border-radius: 6px;
  color: var(--stp-text);
  font-size: 14px;
}

[data-theme] .form-check-input {
  border-color: var(--stp-border-strong);
  border-radius: 4px;
}

[data-theme] .form-check-input:checked,
[data-theme] .form-check-input:indeterminate {
  background-color: var(--stp-accent);
  border-color: var(--stp-accent);
}

[data-theme] .text-danger {
  color: var(--stp-danger) !important;
}

/* A status is a dot and a word, never colour alone. */
[data-theme] .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--stp-surface-2) !important;
  color: var(--stp-text) !important;
  font: 500 12px/18px var(--font-sans);
}

[data-theme] .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stp-muted);
}

[data-theme] .badge.text-bg-primary::before {
  background: var(--stp-accent);
}

/* ---------------------------------------------------------------- the theme page */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.theme-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* A tile is a small mock-up of the app, drawn in the theme it offers. */
.theme-tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--stp-border);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.theme-tile.current {
  outline: 3px solid var(--stp-accent);
  outline-offset: 2px;
}

.theme-tile .t-nav {
  display: block;
  padding: 5px 8px;
  background: var(--stp-nav-bg);
  color: var(--stp-nav-text);
  font-weight: 600;
}

.theme-tile .t-body {
  display: block;
  padding: 8px;
  background: var(--stp-surface);
}

.theme-tile .t-row {
  display: flex;
  align-items: center;
  height: 14px;
  margin-bottom: 3px;
}

.theme-tile .t-bar {
  height: 8px;
  border-radius: 2px;
}

.theme-tile .t-button {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--stp-accent);
  color: var(--stp-on-accent);
}

.theme-tile .t-muted {
  color: var(--stp-muted);
  margin-left: 6px;
}

/* ---------------------------------------------------------------- a programme's settings popup */

.level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.level-row label {
  width: 56px;
}

/* The band and its lines as they will be drawn, in the theme the user is looking at. */
.level-preview {
  flex: 1;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, var(--hue) var(--level-strength), var(--stp-surface));
  box-shadow: inset 3px 0 0 var(--hue);
  border-top: 1px solid color-mix(in srgb, var(--hue) 45%, var(--stp-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--hue) 45%, var(--stp-surface));
}