:root {
    --vd-motion-fast: 140ms;
    --vd-motion-feedback: 180ms;
    --vd-motion-page: 220ms;
    --vd-motion-chart: 240ms;
    --vd-motion-disclosure: 200ms;
    --vd-motion-drawer: 260ms;
    --vd-motion-ease: cubic-bezier(.2, 0, .2, 1);
    --vd-control-radius: 4px;
    --vd-press-offset: 1px;
    --vd-focus-color: var(--vd-green, var(--portal-blue, #00953b));
    --vd-focus-halo: color-mix(in srgb, var(--vd-focus-color) 18%, transparent);
    --vd-hover-surface: #f4f7f5;
    --vd-selected-surface: var(--vd-green-soft, #eef7f1);
    --vd-selected-border: #85cda2;
}

body :is(.vd-button, .vd-link-button, .vd-social-button, .pv2-submit, .pv2-passkey-button, .pv2-back, .pv2-social-button,
    .vd-pagination button, .vd-period-control button, .vd-chart-type-control button,
    .vd-date-picker-button, .vd-date-picker-nav, .vd-date-picker-day, .vd-custom-date-toggle,
    .vd-section-tabs a, .vd-right-permission-trigger, .vd-connection-trigger, .vd-history-trigger) {
    position: relative;
    border-radius: var(--vd-control-radius);
    cursor: pointer;
    transition: color var(--vd-motion-fast) var(--vd-motion-ease),
        background-color var(--vd-motion-fast) var(--vd-motion-ease),
        border-color var(--vd-motion-fast) var(--vd-motion-ease),
        box-shadow var(--vd-motion-fast) var(--vd-motion-ease),
        transform var(--vd-motion-fast) var(--vd-motion-ease),
        opacity var(--vd-motion-fast) var(--vd-motion-ease);
}

body :is(.vd-button, .vd-link-button, .vd-social-button, .pv2-submit, .pv2-passkey-button, .pv2-back, .pv2-social-button,
    .vd-pagination button, .vd-period-control button, .vd-chart-type-control button,
    .vd-date-picker-button, .vd-date-picker-nav, .vd-date-picker-day, .vd-section-tabs a):active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    transform: translateY(var(--vd-press-offset));
}

body :is(.vd-nav-items > a, .vd-dashboard-link, .vd-nav-group > button, .vd-nav-menu a,
    .vd-nav-menu button, .vd-text-link, .vd-footer-links a, .vd-auth-links a, .vd-account-identity,
    .vd-section-tabs a, .vd-task-list a, .vd-security-side a, .vd-dashboard-recent-list a) {
    transition: color var(--vd-motion-fast) var(--vd-motion-ease),
        background-color var(--vd-motion-fast) var(--vd-motion-ease),
        border-color var(--vd-motion-fast) var(--vd-motion-ease),
        box-shadow var(--vd-motion-fast) var(--vd-motion-ease);
}

body :is(a.vd-module-card, a.vd-module-tile, a.vd-dashboard-card, a.vd-magazine-card) {
    transition: background-color var(--vd-motion-feedback) var(--vd-motion-ease),
        border-color var(--vd-motion-feedback) var(--vd-motion-ease),
        box-shadow var(--vd-motion-feedback) var(--vd-motion-ease);
}

body :is(.vd-module-card strong, .vd-module-stat, .vd-module-open-indicator) {
    transition: color var(--vd-motion-fast) var(--vd-motion-ease),
        border-color var(--vd-motion-feedback) var(--vd-motion-ease);
}

body :is(a.vd-module-card, a.vd-module-tile, a.vd-dashboard-card, a.vd-magazine-card):active {
    background-color: #eef7f1;
}

body :is(.vd-button-primary, .vd-button-secondary, .vd-button-danger, .pv2-submit),
body :is(.vd-button-primary, .vd-button-secondary, .vd-button-danger, .pv2-submit):is(:hover, :focus, :active, :disabled, [aria-disabled="true"], [aria-busy="true"]) {
    color: var(--vd-control-text);
    background-color: var(--vd-control-background);
    border-color: var(--vd-control-border, transparent);
    text-decoration: none;
}

body .vd-button-primary {
    --vd-control-text: #fff;
    --vd-control-background: var(--vd-green, #00953b);
    --vd-control-hover-text: #fff;
    --vd-control-hover-background: var(--vd-green-dark, #007e4e);
}

body .pv2-submit {
    --vd-control-text: #fff;
    --vd-control-background: var(--portal-blue, #008bb5);
    --vd-control-hover-text: #fff;
    --vd-control-hover-background: color-mix(in srgb, var(--portal-blue, #008bb5) 85%, #000);
}

body .vd-button-secondary {
    --vd-control-text: var(--vd-green-dark, #007e4e);
    --vd-control-background: var(--vd-panel);
    --vd-control-border: var(--vd-line, #dedede);
    --vd-control-hover-text: var(--vd-green-dark, #007e4e);
    --vd-control-hover-background: var(--vd-selected-surface);
    --vd-control-hover-border: var(--vd-focus-color);
}

body .vd-button-danger {
    --vd-control-text: #8a1f2d;
    --vd-control-background: var(--vd-danger-surface);
    --vd-control-border: #f0c8ce;
    --vd-control-hover-text: #fff;
    --vd-control-hover-background: #a92942;
    --vd-control-hover-border: #a92942;
}

/* Focus indicates keyboard position; only an explicit selection gets the green fill. */
body :is(.vd-section-tabs a, .vd-period-control button, .vd-chart-type-control button),
body :is(.vd-section-tabs a, .vd-period-control button, .vd-chart-type-control button):is(:hover, :focus, :active) {
    color: var(--vd-muted, #77747a);
    background-color: var(--vd-panel);
    border-color: var(--vd-line, #dedede);
}

body :is(.vd-section-tabs a, .vd-period-control button, .vd-chart-type-control button):is(.is-active, [aria-current="page"], [aria-pressed="true"]) {
    color: var(--vd-green-dark, #007e4e);
    background-color: var(--vd-selected-surface);
    border-color: var(--vd-selected-border);
}

@media (hover: hover) and (pointer: fine) {
    body :is(.vd-button-primary, .vd-button-secondary, .vd-button-danger, .pv2-submit):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
        color: var(--vd-control-hover-text);
        background-color: var(--vd-control-hover-background);
        border-color: var(--vd-control-hover-border, transparent);
    }

    body :is(.vd-section-tabs a, .vd-period-control button, .vd-chart-type-control button):hover:not(.is-active):not([aria-current="page"]):not([aria-pressed="true"]):not(:disabled):not([aria-disabled="true"]) {
        color: var(--vd-strong, #39373a);
        background-color: var(--vd-hover-surface);
        border-color: #afb9b2;
    }

    body :is(.vd-right-permission-trigger, .vd-connection-trigger, .vd-history-trigger, .vd-custom-date-toggle):hover {
        background-color: var(--vd-hover-surface);
    }

    body :is(a.vd-module-card, a.vd-module-tile, a.vd-dashboard-card, a.vd-magazine-card):hover {
        box-shadow: 0 3px 12px rgba(30, 45, 35, .09);
    }
}

body :is(.vd-right-permission-toggle, .vd-connection-trigger img, .vd-history-trigger img) {
    transition: transform var(--vd-motion-disclosure) var(--vd-motion-ease);
}

@media (min-width: 761px) {
    body .vd-nav-menu {
        transition: opacity var(--vd-motion-fast) var(--vd-motion-ease),
            transform var(--vd-motion-fast) var(--vd-motion-ease);
    }
}

body :is(.vd-button-primary, .vd-button-secondary, .vd-button-danger, .pv2-submit):active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    color: var(--vd-control-hover-text);
    background-color: var(--vd-control-hover-background);
    border-color: var(--vd-control-hover-border, transparent);
}

body :is(.vd-right-permission-trigger, .vd-connection-trigger, .vd-history-trigger, .vd-custom-date-toggle):active {
    background-color: var(--vd-selected-surface);
}

body :is(.vd-right-permission-trigger, .vd-connection-trigger, .vd-history-trigger, .vd-custom-date-toggle)[aria-expanded="true"] {
    color: var(--vd-green-dark, #007e4e);
}

body :is(.vd-button, .vd-link-button, .vd-social-button, .pv2-submit, .pv2-passkey-button, .pv2-back, .pv2-social-button,
    .vd-nav-items > a, .vd-dashboard-link, .vd-nav-group > button, .vd-nav-menu a, .vd-nav-menu button,
    .vd-pagination button, .vd-period-control button, .vd-chart-type-control button,
    .vd-date-picker-button, .vd-date-picker-nav, .vd-date-picker-day,
    a.vd-module-card, a.vd-module-tile, a.vd-dashboard-card, a.vd-magazine-card,
    .vd-task-list a, .vd-security-side a, .vd-account-identity, .vd-footer-links a, .vd-auth-links a,
    .vd-section-tabs a, .vd-right-permission-trigger, .vd-connection-trigger, .vd-history-trigger,
    .vd-custom-date-toggle, .vd-pagination a, .vd-pagination select, .vd-pagination input,
    .vd-chart-type-select, .vd-info-details summary, .vd-admin-details summary, .vd-token-details summary,
    .vd-error-details summary, .vd-oauth-details summary):focus-visible {
    outline: 2px solid var(--vd-focus-color);
    outline-offset: 3px;
}

body :is(.vd-right-permission-trigger, .vd-history-trigger):focus-visible {
    outline-offset: -3px;
}

body :is(.vd-field > input:not([type="checkbox"]):not([type="radio"]), .vd-field > select, .vd-field > textarea,
    .vd-date-controls > label > input, .pv2-field input:not([type="checkbox"]):not([type="radio"]),
    .pv2-field select, .pv2-field textarea, .vd-chart-type-select, .vd-pagination select, .vd-pagination input) {
    border-radius: var(--vd-control-radius);
    transition: border-color var(--vd-motion-fast) var(--vd-motion-ease),
        background-color var(--vd-motion-fast) var(--vd-motion-ease),
        box-shadow var(--vd-motion-fast) var(--vd-motion-ease);
}

body :is(.vd-field > input:not([type="checkbox"]):not([type="radio"]), .vd-field > select, .vd-field > textarea,
    .vd-date-controls > label > input, .pv2-field input:not([type="checkbox"]):not([type="radio"]),
    .pv2-field select, .pv2-field textarea):focus {
    border-color: var(--vd-field-border, var(--vd-focus-color));
    box-shadow: 0 0 0 3px var(--vd-field-halo, var(--vd-focus-halo));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

body :is(.vd-field, .pv2-field, .vd-date-controls) :is(input, select, textarea):is([aria-invalid="true"], :user-invalid) {
    --vd-field-border: var(--vd-error-text, var(--portal-red, #b8334f));
    --vd-field-halo: color-mix(in srgb, var(--vd-field-border) 16%, transparent);
    border-color: var(--vd-field-border);
}

body .vd-date-input-wrap:has(input:is([aria-invalid="true"], :user-invalid)) {
    border-color: var(--vd-error-text, #b8334f);
    --vd-focus-halo: color-mix(in srgb, var(--vd-error-text, #b8334f) 16%, transparent);
}

body :is(.vd-check, .vd-checkbox, .pv2-consent) input:focus-visible {
    outline: 2px solid var(--vd-focus-color);
    outline-offset: 3px;
}

body .vd-date-input-wrap {
    border-radius: var(--vd-control-radius);
    transition: border-color var(--vd-motion-fast) var(--vd-motion-ease),
        box-shadow var(--vd-motion-fast) var(--vd-motion-ease);
}

body .vd-date-input-wrap:focus-within {
    border-color: var(--vd-focus-color);
    box-shadow: 0 0 0 3px var(--vd-focus-halo);
}

body :is(.vd-button, .vd-link-button, .vd-social-button, .pv2-submit, .pv2-passkey-button, .pv2-back, .pv2-social-button,
    .vd-pagination button, .vd-period-control button, .vd-chart-type-control button,
    .vd-date-picker-button, .vd-date-picker-nav, .vd-date-picker-day, .vd-custom-date-toggle):is(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
    box-shadow: none;
}

body :is(.vd-field, .pv2-field) :is(input, select, textarea):disabled {
    background-color: var(--vd-soft);
    color: var(--vd-muted, var(--portal-muted, #77747a));
    cursor: not-allowed;
}

body :is(.vd-button, .pv2-submit, .pv2-passkey-button)[aria-busy="true"] {
    overflow: hidden;
    cursor: progress;
    transform: none;
    opacity: 1;
}

body :is(.vd-button, .pv2-submit, .pv2-passkey-button)[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: auto 12px 4px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform-origin: left;
    animation: vd-submit-progress 1.1s ease-in-out infinite alternate;
}

.vd-alert, .pv2-alert, .vd-field-error, .vd-panel-success, .vd-panel-warning {
    animation: vd-feedback-appear var(--vd-motion-feedback) var(--vd-motion-ease);
}

body :is(.vd-alert, .pv2-alert, .vd-field-error, .vd-panel-success, .vd-panel-warning)[hidden] { display: none; }

body :is(.vd-info-details, .vd-admin-details, .vd-token-details, .vd-error-details, .vd-oauth-details) > summary {
    cursor: pointer;
    transition: color var(--vd-motion-fast) var(--vd-motion-ease);
}

body :is(.vd-info-details, .vd-admin-details, .vd-token-details, .vd-error-details, .vd-oauth-details)[open] > summary {
    color: var(--vd-green-dark, #007e4e);
}

@keyframes vd-submit-progress {
    from { transform: scaleX(.15); opacity: .45; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes vd-feedback-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --vd-motion-fast: 0s;
        --vd-motion-feedback: 0s;
        --vd-motion-page: 0s;
        --vd-motion-chart: 0s;
        --vd-motion-disclosure: 0s;
        --vd-motion-drawer: 0s;
        --vd-press-offset: 0px;
    }

    body :is(.vd-button, .vd-link-button, .vd-social-button, .pv2-submit, .pv2-passkey-button, .pv2-back, .pv2-social-button):is(:hover, :active) {
        transform: none;
    }

    .vd-alert, .pv2-alert, .vd-field-error, .vd-panel-success, .vd-panel-warning,
    body :is(.vd-button, .pv2-submit, .pv2-passkey-button)[aria-busy="true"]::after { animation: none; }
}