/* Shared Login/Portal surfaces and appearance tokens. Keep both copies identical. */
:root {
    color-scheme: light;
    --vd-panel: #ffffff;
    --vd-strong: #3c393c;
    --vd-line: #e3e1e3;
    --vd-header: rgba(255, 255, 255, .96);
    --vd-chart-text: #77727d;
    --vd-chart-line: #dddade;
    --vd-chart-grid: #eceaec;
    --vd-chart-panel: #ffffff;
    --vd-chart-navigator: #f6f7f7;
    --vd-chart-handle: #f8f8f8;
    --vd-chart-handle-border: #6e7479;
    --vd-disabled: #b9b5bc;
    --vd-danger-surface: #fff7f7;
    --vd-danger-text: #8a1f2d;
    --vd-danger-border: #f0c8ce;
    --vd-warning-surface: #fff8e8;
    --vd-warning-text: #8a6500;
    --vd-facebook-surface: #166fe5;
}

html[data-vd-theme="dark"] {
    color-scheme: dark;
    --vd-page: #151718;
    --vd-panel: #202325;
    --vd-soft: #292d2f;
    --vd-header: rgba(32, 35, 37, .96);
    --vd-ink: #dadcdd;
    --vd-text: #dadcdd;
    --vd-strong: #f0f2f2;
    --vd-muted: #b4b8bb;
    --vd-line: #454b4e;
    --vd-green: #69d69b;
    --vd-green-dark: #79dda7;
    --vd-green-soft: #22392e;
    --vd-hover-surface: #2c3831;
    --portal-blue: #58bfe3;
    --portal-blue-soft: #253841;
    --portal-blue-pale: #253036;
    --portal-ink: #dadcdd;
    --portal-muted: #b4b8bb;
    --portal-border: #747d82;
    --portal-green: #79dda7;
    --portal-red: #ffb0be;
    --vd-success: #22392e;
    --vd-success-text: #79dda7;
    --vd-error: #42262c;
    --vd-error-text: #ffb0be;
    --vd-warning: #3c3321;
    --vd-warning-surface: #3c3321;
    --vd-warning-text: #f2cf86;
    --vd-danger-surface: #39272d;
    --vd-danger-text: #ffb0be;
    --vd-danger-border: #86525c;
    --vd-disabled: #858c90;
    --vd-chart-text: #b4b8bb;
    --vd-chart-line: #555d61;
    --vd-chart-grid: #393f42;
    --vd-chart-panel: #202325;
    --vd-chart-navigator: #292d2f;
    --vd-chart-handle: #e1e5e5;
    --vd-chart-handle-border: #929b9f;
    --vd-module-on-accent: #10261a;
    --vd-module-series-2: #b4a1f1;
    --vd-module-series-3: #f2a270;
    --vd-module-series-4: #b2c1ca;
    --vd-module-series-5: #ccd987;
    --vd-module-series-6: #6ac2f2;
}

/* Cards also receive the official light accent inline from their view models. */
html[data-vd-theme="dark"] :is(.vd-module-cardio, [data-vd-module="blood-pressure"], .vd-module-oxymeter, [data-vd-module="oximeter"]) { --vd-module-accent: #45c78b !important; }
html[data-vd-theme="dark"] :is(.vd-module-target, [data-vd-module="targetscale"], .vd-module-thermo, [data-vd-module="temperature"]) { --vd-module-accent: #58bfe3 !important; }
html[data-vd-theme="dark"] :is(.vd-module-gluco, [data-vd-module="blood-sugar"]) { --vd-module-accent: #f3699c !important; }
html[data-vd-theme="dark"] :is(.vd-module-activity, [data-vd-module="activity"]) { --vd-module-accent: #ffb763 !important; }
html[data-vd-theme="dark"] :is(.vd-module-card, .vd-module-dot, [data-vd-module]) {
    --vd-module-text: color-mix(in srgb, var(--vd-module-accent) 80%, #ffffff);
    --vd-module-soft: color-mix(in srgb, var(--vd-module-accent) 14%, var(--vd-panel));
    --vd-module-hover: color-mix(in srgb, var(--vd-module-accent) 7%, var(--vd-panel));
    --vd-module-border: color-mix(in srgb, var(--vd-module-accent) 45%, var(--vd-panel));
    --vd-module-focus: var(--vd-module-accent);
}

html[data-vd-theme="dark"] :is(.vd-shell-header, .vd-security-header) { background: var(--vd-header); }
html[data-vd-theme] :is(.vd-facebook-button, .pv2-facebook) { background: var(--vd-facebook-surface); }
html[data-vd-theme="dark"] body { color: var(--vd-ink); background: var(--vd-page); }
html[data-vd-theme="dark"] :is(.vd-button-primary, .vd-date-picker-day.is-selected, .pv2-submit) { --vd-control-text: #10261a; --vd-control-hover-text: #10261a; color: #10261a; }
html[data-vd-theme="dark"] .vd-button-danger { --vd-control-text: var(--vd-danger-text); --vd-control-border: var(--vd-danger-border); }
html[data-vd-theme="dark"] :is(input, select, textarea, .vd-date-input-wrap) { border-color: #747d82; }
html[data-vd-theme="dark"] ::placeholder { color: var(--vd-muted); opacity: 1; }
html[data-vd-theme="dark"] :is(.vd-google-button, .vd-google-button .vd-social-mark) { background: #fff; }
html[data-vd-theme="dark"] :is(.vd-compact-pagination .vd-page-control, .vd-page-picker button, .vd-page-picker select, .vd-page-picker input) { background: var(--vd-panel); }
html[data-vd-theme="dark"] .vd-compact-pagination img { filter: invert(1); }
html[data-vd-theme="dark"] .vd-connection-trigger img { filter: invert(1); }
html[data-vd-theme="dark"] .vd-status-pill.is-inactive { color: var(--vd-warning-text); background: var(--vd-warning-surface); }
html[data-vd-theme="dark"] :is(.pv2-brand-kicker, .pv2-brand-name, .pv2-copy) { color: var(--vd-strong); }
html[data-vd-theme="dark"] :is(.pv2-fieldset, .pv2-alert, .pv2-result, .pv2-consent, .pv2-permission-app, .pv2-secondary-action) { background: var(--vd-soft); }
html[data-vd-theme="dark"] :is(.pv2-field input, .pv2-input, .pv2-passkey-button, .pv2-reconfirm button, .pv2-checkmark) { background: var(--vd-panel); }
html[data-vd-theme="dark"] :is(.pv2-title-band, .pv2-consent input:checked + .pv2-checkmark) { background: #00749f; }
html[data-vd-theme="dark"] :is(.pv2-result-success, .pv2-result-success a) { background: var(--vd-success); color: var(--vd-success-text); }
html[data-vd-theme="dark"] :is(.pv2-result-denied, .pv2-result-denied a) { background: var(--vd-error); color: var(--vd-error-text); }
html[data-vd-theme="dark"] :is(.vd-alert-error, .vd-feedback-error, .vd-panel-error) { color: var(--vd-error-text); background: var(--vd-error); border-color: var(--vd-danger-border); }
html[data-vd-theme="dark"] :is(.vd-panel-warning, .vd-status-warning, .vd-alert-warning) { background: var(--vd-warning-surface); border-color: var(--vd-warning-text); }
html[data-vd-theme="dark"] .vd-dashboard-card.has-error .vd-dashboard-card-status { color: var(--vd-warning-text); background: var(--vd-warning-surface); }
html[data-vd-theme="dark"] :is(.vd-auth-intro, .vd-mobile-empty, .vd-dashboard-empty, .vd-measurement-empty) { background: var(--vd-page); }
html[data-vd-theme="dark"] :is(.vd-module-summary, .vd-dashboard-visual, .vd-dashboard-intro, .vd-home-visual) { background: var(--vd-soft); }
html[data-vd-theme="dark"] :is(.vd-menu-icon, .vd-mobile-menu-close img, .vd-mobile-menu-back img) { filter: invert(1); }
html[data-vd-theme="dark"] :is(.vd-brand, .vd-security-brand, .vd-mobile-brand) img { filter: brightness(1.4); }

.vd-theme-control { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin: 0; }
.vd-theme-options { display: grid; grid-template-columns: repeat(2, 44px); flex: 0 0 auto; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--vd-line); border-radius: 6px; background: var(--vd-soft, var(--vd-panel)); }
.vd-theme-control .vd-theme-options > .vd-theme-option { display: grid; place-items: center; place-content: center; box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 3px; color: var(--vd-muted, var(--portal-muted)); background: transparent; cursor: pointer; }
.vd-theme-control .vd-theme-options > .vd-theme-option[aria-pressed="true"] { color: var(--vd-green-dark, var(--portal-blue)); border-color: currentColor; background: var(--vd-green-soft, var(--vd-success, var(--portal-blue-soft))); }
.vd-theme-control .vd-theme-options > .vd-theme-option:focus-visible { outline: 2px solid var(--vd-green-dark, var(--portal-blue)); outline-offset: 2px; }
@media (hover: hover) {
    .vd-theme-control .vd-theme-options > .vd-theme-option:hover { color: var(--vd-green-dark, var(--portal-blue)); background: var(--vd-green-soft, var(--vd-success, var(--portal-blue-soft))); }
}
.vd-theme-icon { display: block; width: 20px; height: 20px; pointer-events: none; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.vd-theme-icon-sun { -webkit-mask-image: url("../images/icons/sun.svg"); mask-image: url("../images/icons/sun.svg"); }
.vd-theme-icon-moon { -webkit-mask-image: url("../images/icons/moon.svg"); mask-image: url("../images/icons/moon.svg"); }
.vd-theme-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vd-nav-menu .vd-theme-control { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 12px 8px; border-top: 1px solid var(--vd-line); }
.vd-nav-menu .vd-theme-caption { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: var(--vd-strong); font-size: 14px; }
.vd-auth-panel .vd-panel-header:has(.vd-theme-control) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.vd-auth-panel .vd-panel-header:has(.vd-theme-control) > p { flex: 0 0 100%; margin-bottom: 0; }
.vd-auth-panel .vd-panel-header:has(.vd-theme-control) > h2 { flex: 1 1 auto; max-width: 100%; margin: 0; }
.vd-auth-panel .vd-panel-header .vd-theme-control { margin-left: auto; }
.pv2-brand .vd-theme-control { align-self: flex-end; }
.vd-mobile-menu-footer .vd-theme-control { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--vd-line); }
.vd-mobile-menu .vd-theme-caption { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: var(--vd-strong); font-size: 16px; font-weight: 700; }
@media print {
    html[data-vd-theme] { --vd-page: #fff; --vd-panel: #fff; --vd-ink: #222; --vd-strong: #111; --vd-muted: #555; --vd-line: #ccc; color-scheme: light; }
    .vd-theme-control { display: none; }
}