/* DiabHQ identity on Core's public semantic tokens and Wagtail theme classes.
   Brand assets: navy #024376, blue #088ffa, pale blue #8dcbfd.
   Use the darker brand blue for white-label buttons and small text. */
:root,
html.w-theme-light {
  --diabhq-chart-blue: #0476d0;
  --diabhq-chart-teal: #00897b;
  --diabhq-chart-purple: #7b1fa2;
  --diabhq-chart-cyan: #00838f;
  --diabhq-chart-orange: #a94700;
  --diabhq-chart-green: #497726;
  --diabhq-chart-violet: #5e35b1;
  --w-color-primary: #024376;
  --w-color-primary-200: #02365f;
  --w-color-secondary: #0476d0;
  --w-color-secondary-400: #024376;
  --w-color-secondary-100: #e7f3fe;
  --w-color-surface-button-default: #0476d0;
  --w-color-surface-button-hover: #024376;
  --w-color-text-button: #ffffff;
  --w-color-text-link-default: #0469b9;
  --w-color-text-link-hover: #024376;
  --w-color-text-button-outline-default: #0469b9;
  --w-color-border-button-outline-default: #0476d0;
  --w-color-surface-button-outline-hover: #e7f3fe;
  --w-color-border-field-hover: #0476d0;
  --w-color-focus: #0476d0;
  --w-color-surface-menus: #024376;
  --w-color-surface-status-label: #e7f3fe;
}

/* The chrome has its own supported tone tokens, independent of the canvas. */
:root,
html.w-theme-light,
html.w-theme-dark,
html.w-theme-system {
  --cc-button-quiet-ink: var(--w-color-text-button-outline-default);
  --cc-button-line: var(--w-color-border-button-outline-default);
  --cc-chrome-surface: #024376;
  --cc-chrome-surface-deep: #02365f;
  --cc-chrome-ink: #c7e5fc;
  --cc-chrome-ink-active: #ffffff;
  --cc-chrome-fill: rgb(141 203 253 / 18%);
  --cc-chrome-fill-active: rgb(141 203 253 / 22%);
  --cc-chrome-line: rgb(141 203 253 / 25%);
}

/* Navigation sits on a dark surface in every theme. Wagtail's generic
   link hover/focus rules must use chrome ink, not the canvas link colour. */
.cc-chrome {
  --w-color-text-link-default: var(--cc-chrome-ink);
  --w-color-text-link-hover: var(--cc-chrome-ink-active);
  --w-color-focus: #8dcbfd;
}

html.w-theme-dark {
  color-scheme: dark;
  --w-color-surface-page: #0e1722;
  --w-color-surface-header: #142130;
  --w-color-surface-field: #111e2b;
  --diabhq-chart-blue: #8dcbfd;
  --diabhq-chart-teal: #64d8cb;
  --diabhq-chart-purple: #d9a3f0;
  --diabhq-chart-cyan: #6ddce7;
  --diabhq-chart-orange: #ffb577;
  --diabhq-chart-green: #b3d98b;
  --diabhq-chart-violet: #c3b1fa;
  --w-color-text-context: #e5edf5;
  --w-color-text-label: #c1cfde;
  --w-color-text-meta: #9dafc2;
  --w-color-border-furniture: #34485c;
  --w-color-border-field-default: #60758b;
  --cc-panel: #1a2838;
  --cc-field-line: #60758b;
  --cc-field-face: var(--w-color-surface-field);
  --cc-field-face-line: var(--w-color-border-field-default);
  --cc-field-hint: #9dafc2;
  --cc-chrome-surface: #101f30;
  --cc-chrome-surface-deep: #0b1623;
  --cc-chrome-ink: #b6c9dc;
  --cc-chrome-ink-active: #e8f4ff;
  --cc-chrome-fill: rgb(141 203 253 / 12%);
  --cc-chrome-fill-active: rgb(141 203 253 / 15%);
  --cc-chrome-line: #2b4055;
  --w-color-primary: #8dcbfd;
  --w-color-primary-200: #b9dfff;
  --w-color-secondary: #8dcbfd;
  --w-color-secondary-100: #123b5c;
  --w-color-surface-button-default: #8dcbfd;
  --w-color-surface-button-hover: #b9dfff;
  --w-color-text-button: #02365f;
  --w-color-text-link-default: #8dcbfd;
  --w-color-text-link-hover: #b9dfff;
  --w-color-text-button-outline-default: #8dcbfd;
  --w-color-border-button-outline-default: #8dcbfd;
  --w-color-surface-button-outline-hover: #123b5c;
  --w-color-border-field-hover: #8dcbfd;
  --w-color-focus: #8dcbfd;
  --w-color-surface-menus: #02365f;
  --w-color-surface-status-label: #123b5c;
}
@media (prefers-color-scheme: dark) {
  html.w-theme-system {
    color-scheme: dark;
    --w-color-surface-page: #0e1722;
    --w-color-surface-header: #142130;
    --w-color-surface-field: #111e2b;
    --diabhq-chart-blue: #8dcbfd;
    --diabhq-chart-teal: #64d8cb;
    --diabhq-chart-purple: #d9a3f0;
    --diabhq-chart-cyan: #6ddce7;
    --diabhq-chart-orange: #ffb577;
    --diabhq-chart-green: #b3d98b;
    --diabhq-chart-violet: #c3b1fa;
    --w-color-text-context: #e5edf5;
    --w-color-text-label: #c1cfde;
    --w-color-text-meta: #9dafc2;
    --w-color-border-furniture: #34485c;
    --w-color-border-field-default: #60758b;
    --cc-panel: #1a2838;
    --cc-field-line: #60758b;
    --cc-field-face: var(--w-color-surface-field);
    --cc-field-face-line: var(--w-color-border-field-default);
    --cc-field-hint: #9dafc2;
    --cc-chrome-surface: #101f30;
    --cc-chrome-surface-deep: #0b1623;
    --cc-chrome-ink: #b6c9dc;
    --cc-chrome-ink-active: #e8f4ff;
    --cc-chrome-fill: rgb(141 203 253 / 12%);
    --cc-chrome-fill-active: rgb(141 203 253 / 15%);
    --cc-chrome-line: #2b4055;
    --w-color-primary: #8dcbfd;
    --w-color-primary-200: #b9dfff;
    --w-color-secondary: #8dcbfd;
    --w-color-secondary-100: #123b5c;
    --w-color-surface-button-default: #8dcbfd;
    --w-color-surface-button-hover: #b9dfff;
    --w-color-text-button: #02365f;
    --w-color-text-link-default: #8dcbfd;
    --w-color-text-link-hover: #b9dfff;
    --w-color-text-button-outline-default: #8dcbfd;
    --w-color-border-button-outline-default: #8dcbfd;
    --w-color-surface-button-outline-hover: #123b5c;
    --w-color-border-field-hover: #8dcbfd;
    --w-color-focus: #8dcbfd;
    --w-color-surface-menus: #02365f;
    --w-color-surface-status-label: #123b5c;
  }
}

.diabhq-login-brand { display: flex; justify-content: center; margin-block-end: 1.5rem; }
.diabhq-login-brand img { width: 200px; max-width: 100%; height: auto; }
/* Care-circle identity sits beside relationship type in a half-width field.
   Keep the Kit chooser's identity and actions together; its generic role badge
   adds no information here. Preserve the native chooser controller and links. */
.cc-form-dialog:has([data-care-circle-administrator]) .cc-chooser-widget > .chosen {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.cc-form-dialog:has([data-care-circle-administrator]) .cc-chooser-widget__role { display: none; }
.cc-form-dialog:has([data-care-circle-administrator]) .cc-chooser-widget__actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  flex-wrap: wrap;
}
@container cc-chooser (max-width: 22rem) {
  .cc-form-dialog:has([data-care-circle-administrator]) .cc-chooser-widget > .chosen {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .cc-form-dialog:has([data-care-circle-administrator]) .cc-chooser-widget__actions {
    grid-column: 2;
    grid-row: 2;
  }
}
/* Patient-specific schedule composition; field, table and action styling is Concord's. */
.diabhq-bolus-schedules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cc-space-lg, 1rem);
}
.diabhq-bolus-schedules > * { min-width: 0; }
.diabhq-bolus-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-xs, .25rem); }
.diabhq-bolus-range__times { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-xs, .25rem); }
.diabhq-bolus-boundaries { flex: none; }
.diabhq-bolus-range input[name$="-start_time"] { width: 7rem; min-width: 0; }
.diabhq-bolus-schedules [data-cc-number-stepper] { min-width: 8rem; }
@media (max-width: 60rem) {
  .diabhq-bolus-schedules { grid-template-columns: minmax(0, 1fr); }
}