/* VitaDock app palette. Keep this file identical in Login and Portal. */
:root {
    --vd-cardio-color: #008444;
    --vd-oxymeter-color: #008444;
    --vd-targetscale-color: #0088B9;
    /* Provisional temperature color; override independently when agreed. */
    --vd-thermo-color: var(--vd-targetscale-color);
    --vd-glucose-color: #C3004D;
    --vd-activity-color: #FFAB4C;
    --vd-module-on-accent: #ffffff;
    --vd-module-series-2: #7b6bb5;
    --vd-module-series-3: #d06f3f;
    --vd-module-series-4: #6f7d86;
    --vd-module-series-5: #a4b45e;
    --vd-module-series-6: #2f8fc8;
}

.vd-module-cardio, [data-vd-module="blood-pressure"] { --vd-module-accent: var(--vd-cardio-color); }
.vd-module-oxymeter, [data-vd-module="oximeter"] { --vd-module-accent: var(--vd-oxymeter-color); }
.vd-module-target, [data-vd-module="targetscale"] { --vd-module-accent: var(--vd-targetscale-color); }
.vd-module-thermo, [data-vd-module="temperature"] { --vd-module-accent: var(--vd-thermo-color); }
.vd-module-gluco, [data-vd-module="blood-sugar"] { --vd-module-accent: var(--vd-glucose-color); }
.vd-module-activity, [data-vd-module="activity"] {
    --vd-module-accent: var(--vd-activity-color);
    --vd-module-on-accent: #1f2933;
}

:is(.vd-module-card, .vd-module-dot, [data-vd-module]) {
    --vd-module-text: color-mix(in srgb, var(--vd-module-accent) 60%, #000000);
    --vd-module-soft: color-mix(in srgb, var(--vd-module-accent) 8%, #ffffff);
    --vd-module-hover: color-mix(in srgb, var(--vd-module-accent) 4%, #ffffff);
    --vd-module-border: color-mix(in srgb, var(--vd-module-accent) 28%, #ffffff);
    --vd-module-focus: color-mix(in srgb, var(--vd-module-accent) 70%, #000000);
    --vd-module-ring: color-mix(in srgb, var(--vd-module-accent) 10%, transparent);
    --vd-module-ring-active: color-mix(in srgb, var(--vd-module-accent) 18%, transparent);
    --vd-module-chart-fill-opacity: .18;
    --vd-module-chart-selection-opacity: .34;
    --vd-module-chart-preview-opacity: .12;
    --vd-module-chart-preview-line-opacity: .3;
}

/* Explicit selectors also override older cached versions of the page styles. */
.vd-module-grid .vd-module-card .vd-module-marker,
.vd-module-dot { background: var(--vd-module-accent); }
.vd-module-grid .vd-module-card .vd-module-stat,
.vd-module-grid .vd-module-card .vd-module-open-indicator { border-color: var(--vd-module-ring); }
.vd-module-grid .vd-module-card:is(:hover, :focus) { background: var(--vd-module-hover); }
.vd-dashboard-card[data-vd-module]:focus-visible {
    background: var(--vd-module-hover);
    outline-color: var(--vd-module-focus);
}
@media (hover: hover) and (pointer: fine) {
    .vd-dashboard-card[data-vd-module]:hover { background: var(--vd-module-hover); }
}
.vd-module-grid .vd-module-card:active,
.vd-dashboard-card[data-vd-module]:active { background: var(--vd-module-soft); }
.vd-module-grid .vd-module-card:is(:hover, :focus) :is(.vd-module-stat, .vd-module-open-indicator) { border-color: var(--vd-module-ring-active); }
.vd-module-grid .vd-module-card:is(:hover, :focus) strong,
.vd-module-grid .vd-module-card .vd-module-latest { color: var(--vd-module-text); }
.vd-module-grid .vd-module-card .vd-module-open-indicator span { border-color: var(--vd-module-accent); }
.vd-module-grid .vd-module-card:focus-visible { outline: 2px solid var(--vd-module-focus); outline-offset: -2px; }

.vd-dashboard-card[data-vd-module]:is(:hover, :focus) { border-color: var(--vd-module-border); border-top-color: var(--vd-module-accent); }
.vd-dashboard-card[data-vd-module] .vd-dashboard-card-eyebrow { color: var(--vd-module-text); }
.vd-dashboard-card[data-vd-module]:not(.has-error) .vd-dashboard-card-status {
    color: var(--vd-module-text);
    background: var(--vd-module-soft);
    border-color: var(--vd-module-border);
}
.vd-dashboard-recent-list a:is(:hover, :focus) { background: var(--vd-module-soft); }

.vd-measurement-page[data-vd-module] .vd-home-main {
    --vd-green: var(--vd-module-accent);
    --vd-green-dark: var(--vd-module-text);
    --vd-green-soft: var(--vd-module-soft);
    --vd-selected-surface: var(--vd-module-soft);
    --vd-selected-border: var(--vd-module-border);
    --vd-hover-surface: var(--vd-module-hover);
    --vd-focus-color: var(--vd-module-focus);
    --vd-focus-halo: var(--vd-module-ring-active);
}
.vd-measurement-page[data-vd-module] .vd-date-input-wrap:focus-within {
    box-shadow: 0 0 0 3px var(--vd-module-ring-active);
}
.vd-measurement-page[data-vd-module] .vd-home-main :is(button, select, a, input):focus-visible {
    outline-color: var(--vd-module-focus);
}
.vd-measurement-page[data-vd-module] .vd-date-picker-day.is-selected {
    color: var(--vd-module-on-accent);
}
.vd-measurement-page[data-vd-module] .vd-home-main .vd-button-primary {
    --vd-control-text: var(--vd-module-on-accent);
}