@layer vetix.tokens, vetix.base, vetix.components, vetix.utilities;

@layer vetix.tokens {
    :root {
        color-scheme: light;

        /* Brand + semantic colors */
        --vx-color-primary-50: #eef8f4;
        --vx-color-primary-100: #d7f0e6;
        --vx-color-primary-200: #b3e0cf;
        --vx-color-primary-300: #82c8ae;
        --vx-color-primary-400: #4daa89;
        --vx-color-primary-500: #248261;
        --vx-color-primary-600: #1b6b5a;
        --vx-color-primary-700: #165348;
        --vx-color-primary-800: #143f38;
        --vx-color-primary-900: #112f2b;

        --vx-color-secondary-50: #f2f7ff;
        --vx-color-secondary-100: #e5efff;
        --vx-color-secondary-200: #cddfff;
        --vx-color-secondary-300: #abc7ff;
        --vx-color-secondary-400: #78a4ff;
        --vx-color-secondary-500: #4f82f7;
        --vx-color-secondary-600: #345fd4;
        --vx-color-secondary-700: #294cb0;
        --vx-color-secondary-800: #273f8f;
        --vx-color-secondary-900: #253774;

        --vx-color-bg: #f6f8fb;
        --vx-color-bg-subtle: #eef2f6;
        --vx-color-surface: #ffffff;
        --vx-color-surface-muted: #f9fbfc;
        --vx-color-surface-elevated: #ffffff;
        --vx-color-text: #17212b;
        --vx-color-text-muted: #5f6f82;
        --vx-color-text-soft: #7b8a9b;
        --vx-color-border: #dbe3ec;
        --vx-color-border-strong: #c6d1dc;
        --vx-color-hover: #eef4f8;
        --vx-color-focus: rgba(36, 130, 97, 0.22);

        --vx-color-success: #1f8f5f;
        --vx-color-success-bg: #edf9f2;
        --vx-color-success-border: #b8e6ca;
        --vx-color-warning: #b7791f;
        --vx-color-warning-bg: #fff8e8;
        --vx-color-warning-border: #f3d9a1;
        --vx-color-danger: #c2414d;
        --vx-color-danger-bg: #fff1f2;
        --vx-color-danger-border: #f3b8bf;
        --vx-color-info: #2563eb;
        --vx-color-info-bg: #eef4ff;
        --vx-color-info-border: #bfd2ff;

        /* Typography */
        --vx-font-family: "Inter", "Manrope", "Segoe UI", sans-serif;
        --vx-font-family-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
        --vx-font-size-xs: 0.75rem;
        --vx-font-size-sm: 0.875rem;
        --vx-font-size-md: 1rem;
        --vx-font-size-lg: 1.125rem;
        --vx-font-size-xl: 1.25rem;
        --vx-font-size-2xl: 1.5rem;
        --vx-font-size-3xl: 1.875rem;
        --vx-line-height-tight: 1.2;
        --vx-line-height-normal: 1.5;
        --vx-line-height-relaxed: 1.7;
        --vx-font-weight-medium: 500;
        --vx-font-weight-semibold: 600;
        --vx-font-weight-bold: 700;

        /* Spacing */
        --vx-space-0: 0;
        --vx-space-1: 0.25rem;
        --vx-space-2: 0.5rem;
        --vx-space-3: 0.75rem;
        --vx-space-4: 1rem;
        --vx-space-5: 1.25rem;
        --vx-space-6: 1.5rem;
        --vx-space-8: 2rem;
        --vx-space-10: 2.5rem;
        --vx-space-12: 3rem;
        --vx-space-16: 4rem;

        /* Radius */
        --vx-radius-sm: 0.5rem;
        --vx-radius-md: 0.875rem;
        --vx-radius-lg: 1.25rem;
        --vx-radius-xl: 1.5rem;
        --vx-radius-pill: 999px;

        /* Shadows */
        --vx-shadow-sm: 0 1px 2px rgba(23, 33, 43, 0.05), 0 1px 1px rgba(23, 33, 43, 0.03);
        --vx-shadow-md: 0 10px 30px rgba(23, 33, 43, 0.08), 0 2px 8px rgba(23, 33, 43, 0.04);
        --vx-shadow-lg: 0 22px 48px rgba(23, 33, 43, 0.12), 0 8px 20px rgba(23, 33, 43, 0.06);

        /* Motion + layout */
        --vx-transition-fast: 140ms ease;
        --vx-transition-base: 180ms ease;
        --vx-transition-slow: 240ms ease;
        --vx-container-sm: 640px;
        --vx-container-md: 768px;
        --vx-container-lg: 1024px;
        --vx-container-xl: 1280px;
        --vx-breakpoint-sm: 576px;
        --vx-breakpoint-md: 768px;
        --vx-breakpoint-lg: 992px;
        --vx-breakpoint-xl: 1200px;
        --vx-breakpoint-2xl: 1440px;

        /* Compatibility aliases for the current theme */
        --bg: #f3f4ef;
        --paper: rgba(255, 255, 255, 0.78);
        --paper-strong: #ffffff;
        --ink: #13201c;
        --muted: #62716c;
        --line: rgba(19, 32, 28, 0.08);
        --accent: #1b6b5a;
        --accent-soft: #dff2ec;
        --shadow: 0 24px 60px rgba(19, 32, 28, 0.08);
    }
}

@layer vetix.base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
    }

    :where(button, input, select, textarea) {
        font: inherit;
    }

    :where(img, svg) {
        display: block;
        max-width: 100%;
    }

    :where(.vx-focus-ring:focus-visible) {
        outline: 0;
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }
}

@layer vetix.components {
    .vx-app {
        min-height: 100vh;
        color: var(--vx-color-text);
        background:
            radial-gradient(circle at top left, rgba(36, 130, 97, 0.08), transparent 24%),
            linear-gradient(180deg, #fcfdfd 0%, var(--vx-color-bg) 100%);
        font-family: var(--vx-font-family);
        line-height: var(--vx-line-height-normal);
    }

    .vx-container {
        width: min(100% - (var(--vx-space-6) * 2), var(--vx-container-xl));
        margin-inline: auto;
    }

    .vx-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--vx-space-2);
        color: var(--vx-color-primary-600);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .vx-stack {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--vx-space-3);
    }

    .vx-card {
        background: var(--vx-color-surface);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        box-shadow: var(--vx-shadow-md);
    }

    .vx-card--muted {
        background: var(--vx-color-surface-muted);
    }

    .vx-auth-shell.auth-shell {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: var(--vx-space-6);
        background:
            radial-gradient(circle at top left, rgba(36, 130, 97, 0.08), transparent 24%),
            linear-gradient(180deg, #fcfdfd 0%, var(--vx-color-bg) 100%);
    }

    .vx-auth-card.auth-panel {
        width: min(100%, 29rem);
        padding: var(--vx-space-8);
        border: 1px solid var(--vx-color-border);
        border-radius: 1.25rem;
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-lg);
        backdrop-filter: none;
    }

    .vx-card__header,
    .vx-card__body,
    .vx-card__footer {
        padding: var(--vx-space-6);
    }

    .vx-card__header,
    .vx-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-4);
    }

    .vx-card__header + .vx-card__body {
        padding-top: 0;
    }

    .vx-card__body + .vx-card__footer {
        padding-top: 0;
    }

    .vx-heading {
        margin: 0;
        color: var(--vx-color-text);
        letter-spacing: -0.02em;
        line-height: var(--vx-line-height-tight);
    }

    .vx-heading--sm {
        font-size: var(--vx-font-size-lg);
    }

    .vx-heading--md {
        font-size: var(--vx-font-size-xl);
    }

    .vx-heading--lg {
        font-size: var(--vx-font-size-2xl);
    }

    .vx-brand.auth-brand {
        display: grid;
        gap: var(--vx-space-4);
        justify-items: center;
        margin-bottom: var(--vx-space-6);
        text-align: center;
    }

    .vx-brand .brand-lockup {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--vx-space-3) var(--vx-space-4);
        border-radius: var(--vx-radius-lg);
        border: 1px solid var(--vx-color-border);
        background: var(--vx-color-surface-muted);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-brand .brand-lockup-auth {
        margin: 0;
        background: var(--vx-color-surface-muted);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-brand .brand-logo-auth {
        max-width: 11rem;
    }

    .vx-brand h1 {
        margin: 0;
        color: var(--vx-color-text);
        font-family: var(--vx-font-family);
        font-size: clamp(2rem, 4vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.05;
    }

    .vx-brand p {
        max-width: 32ch;
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: var(--vx-line-height-relaxed);
    }

    .vx-text-muted {
        color: var(--vx-color-text-muted);
    }

    .app-shell.admin-shell {
        min-height: 100vh;
        background: var(--vx-color-bg);
    }

    .app-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        display: grid;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        background: linear-gradient(180deg, #18332d 0%, #122722 100%);
        color: #f8fbfa;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .app-topbar__primary {
        min-height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-4);
        padding: 0 var(--vx-space-6);
    }

    .app-topbar__secondary {
        min-height: 3rem;
        display: flex;
        align-items: center;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding: 0 var(--vx-space-6);
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: 1px solid var(--vx-color-border);
    }

    .app-brand {
        display: inline-flex;
        align-items: center;
        gap: var(--vx-space-3);
        color: inherit;
        text-decoration: none;
        min-width: 0;
    }

    .app-brand__mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: var(--vx-space-2) var(--vx-space-3);
        border-radius: var(--vx-radius-md);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .app-brand__mark img {
        width: auto;
        height: 1.5rem;
    }

    .app-brand--full-logo .app-brand__mark {
        min-width: 9.75rem;
        min-height: 3rem;
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 10px 24px rgba(5, 18, 15, 0.18);
    }

    .app-brand--full-logo .app-brand__mark img {
        height: 2.35rem;
        border-radius: 0.75rem;
    }

    .app-brand--full-logo .app-brand__body {
        gap: 0.2rem;
    }

    .app-brand--full-logo .app-brand__subtitle {
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .app-brand__body {
        display: grid;
        gap: 0.1rem;
        min-width: 0;
    }

    .app-brand__title {
        color: #ffffff;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.1;
    }

    .app-brand__subtitle {
        color: rgba(248, 251, 250, 0.72);
        font-size: var(--vx-font-size-xs);
        line-height: 1.3;
    }

    .app-topbar__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--vx-space-3);
        min-width: 0;
    }

    .app-company-chip,
    .user-menu {
        min-height: 2.5rem;
        border-radius: var(--vx-radius-md);
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.08);
        color: #f8fbfa;
    }

    .app-company-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.625rem 0.875rem;
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
        white-space: nowrap;
        max-width: 18rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-menu {
        display: grid;
        align-content: center;
        gap: 0.1rem;
        padding: 0.45rem 0.75rem;
        min-width: 0;
    }

    .user-menu strong,
    .user-menu span {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-menu strong {
        color: #ffffff;
        font-size: var(--vx-font-size-sm);
    }

    .user-menu span {
        color: rgba(248, 251, 250, 0.72);
        font-size: var(--vx-font-size-xs);
    }

    .app-topbar .vx-btn--outline {
        border-color: rgba(143, 209, 63, 0.24);
        background: rgba(255, 255, 255, 0.94);
        color: #1f4f3d;
        box-shadow: 0 8px 18px rgba(6, 22, 18, 0.08);
        text-decoration: none !important;
    }

    .app-topbar .vx-btn--outline:hover {
        border-color: rgba(111, 196, 59, 0.34);
        background: #f4fbec;
        color: #173f31;
        box-shadow: 0 10px 22px rgba(6, 22, 18, 0.12);
        text-decoration: none !important;
    }

    .app-topbar .vx-btn--outline:focus,
    .app-topbar .vx-btn--outline:focus-visible,
    .app-topbar .vx-btn--outline:active,
    .app-topbar .vx-btn--outline:visited {
        text-decoration: none !important;
    }

    .app-menu-toggle {
        display: none;
    }

    .app-menu {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: var(--vx-space-2);
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        padding: 0.35rem 0;
    }

    .app-menu-item {
        display: inline-flex;
        align-items: center;
        gap: var(--vx-space-2);
        min-height: 2.35rem;
        padding: 0.5rem 0.85rem;
        border: 1px solid #cbd5e1;
        border-radius: 0.65rem;
        background: #ffffff;
        color: #476072;
        text-decoration: none !important;
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
        white-space: nowrap;
        transition:
            border-color var(--vx-transition-base),
            background-color var(--vx-transition-base),
            color var(--vx-transition-base),
            box-shadow var(--vx-transition-base);
    }

    .app-menu-item:hover {
        color: #145442;
        background: #f8fbfc;
        border-color: #8fb7a9;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(23, 33, 43, 0.06);
    }

    .app-menu-item:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px var(--vx-color-focus);
        text-decoration: none !important;
    }

    .app-menu-item.is-active {
        color: #1b6b5a;
        background: #eef8f4;
        border-color: #78c8aa;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.72),
            0 6px 16px rgba(36, 130, 97, 0.12);
        text-decoration: none !important;
    }

    .app-menu-item span[aria-hidden="true"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.35rem;
        height: 1.35rem;
        border-radius: 999px;
        background: #edf2f7;
        color: #5f6f82;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
        transition:
            background-color var(--vx-transition-base),
            color var(--vx-transition-base);
    }

    .app-menu-item.is-active span[aria-hidden="true"] {
        background: #dff2ec;
        color: #1b6b5a;
    }

    .app-menu-drawer {
        display: none;
    }

    .app-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(23, 33, 43, 0.48);
        backdrop-filter: blur(4px);
    }

    .app-menu-drawer__panel {
        position: fixed;
        top: 0;
        left: -21rem;
        z-index: 1040;
        width: min(88vw, 21rem);
        height: 100vh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: var(--vx-space-5);
        padding: var(--vx-space-5);
        background: var(--vx-color-surface);
        border-right: 1px solid var(--vx-color-border);
        box-shadow: 0 24px 60px rgba(23, 33, 43, 0.18);
        transition: left var(--vx-transition-slow);
        overflow-y: auto;
    }

    .app-menu-drawer.is-open .app-menu-drawer__panel {
        left: 0;
    }

    .app-menu-drawer__header,
    .app-menu-drawer__footer {
        display: grid;
        gap: var(--vx-space-4);
    }

    .app-menu-drawer__close {
        justify-self: end;
    }

    .app-menu-drawer__nav {
        display: grid;
        gap: var(--vx-space-2);
    }

    .app-menu-drawer__nav .app-menu-item {
        width: 100%;
    }

    .app-content.admin-content {
        padding: var(--vx-space-6);
    }

    .dashboard-shell {
        display: grid;
        gap: var(--vx-space-6);
    }

    .dashboard-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-4);
        padding: var(--vx-space-6);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-xl);
        background:
            radial-gradient(circle at top right, rgba(36, 130, 97, 0.08), transparent 30%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 252, 0.98));
        box-shadow: var(--vx-shadow-md);
    }

    .dashboard-header__body {
        display: grid;
        gap: var(--vx-space-3);
        min-width: 0;
    }

    .dashboard-header__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--vx-space-3);
    }

    .dashboard-header__title {
        margin: 0;
        font-size: clamp(2rem, 4vw, 2.75rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1.05;
        color: var(--vx-color-text);
    }

    .dashboard-header__text {
        margin: 0;
        max-width: 62ch;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-md);
        line-height: var(--vx-line-height-relaxed);
    }

    .dashboard-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--vx-space-4);
    }

    .dashboard-kpi-card {
        display: grid;
        gap: var(--vx-space-3);
        min-height: 100%;
        padding: var(--vx-space-5);
    }

    .dashboard-kpi-card__head,
    .dashboard-kpi-card__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .dashboard-kpi-card__label {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
    }

    .dashboard-kpi-card__icon,
    .quick-action-card__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-primary-50);
        color: var(--vx-color-primary-700);
        font-size: var(--vx-font-size-sm);
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .dashboard-kpi-card__value {
        margin: 0;
        color: var(--vx-color-text);
        font-size: clamp(2rem, 4vw, 2.75rem);
        font-weight: 800;
        line-height: 0.95;
        letter-spacing: -0.04em;
    }

    .dashboard-kpi-card__text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.55;
    }

    .dashboard-section-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
        gap: var(--vx-space-4);
        align-items: start;
    }

    .dashboard-stack {
        display: grid;
        gap: var(--vx-space-4);
    }

    .dashboard-section {
        display: grid;
        gap: var(--vx-space-5);
    }

    .dashboard-section__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-4);
    }

    .dashboard-section__title {
        margin: 0.35rem 0 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-xl);
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .dashboard-section__text {
        margin: 0.5rem 0 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .dashboard-section__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
        justify-content: flex-end;
    }

    .dashboard-list {
        display: grid;
        gap: var(--vx-space-2);
    }

    .dashboard-list-item {
        display: grid;
        gap: var(--vx-space-2);
        padding: var(--vx-space-3);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface-muted);
    }

    .dashboard-list-item__top,
    .dashboard-list-item__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-2);
    }

    .dashboard-list-item__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: 700;
        line-height: 1.3;
    }

    .dashboard-list-item__subtitle,
    .dashboard-list-item__meta,
    .dashboard-list-item__text {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.35;
    }

    .dashboard-list-item__subtitle,
    .dashboard-list-item__text {
        margin: 0;
    }

    .dashboard-list--compact {
        gap: 0.625rem;
    }

    .dashboard-list--compact .dashboard-list-item {
        gap: 0.375rem;
        padding: 0.75rem 0.875rem;
    }

    .dashboard-list--compact .dashboard-list-item__top,
    .dashboard-list--compact .dashboard-list-item__meta {
        gap: 0.5rem;
        align-items: flex-start;
    }

    .dashboard-list--compact .dashboard-list-item__title {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .dashboard-list--compact .dashboard-list-item__subtitle,
    .dashboard-list--compact .dashboard-list-item__meta,
    .dashboard-list--compact .dashboard-list-item__text {
        font-size: 0.84rem;
        line-height: 1.25;
    }

    .dashboard-empty {
        display: grid;
        gap: var(--vx-space-2);
        place-items: start;
        padding: var(--vx-space-5);
        border: 1px dashed var(--vx-color-border-strong);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface-muted);
    }

    .dashboard-empty p {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--vx-space-3);
    }

    .quick-action-card {
        display: grid;
        gap: var(--vx-space-3);
        padding: var(--vx-space-4);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface);
        color: inherit;
        text-decoration: none;
        box-shadow: var(--vx-shadow-sm);
        transition:
            transform var(--vx-transition-fast),
            border-color var(--vx-transition-base),
            box-shadow var(--vx-transition-base);
    }

    .quick-action-card:hover {
        transform: translateY(-1px);
        border-color: var(--vx-color-primary-200);
        box-shadow: var(--vx-shadow-md);
    }

    .quick-action-card:focus-visible {
        outline: 0;
        box-shadow:
            var(--vx-shadow-md),
            0 0 0 4px var(--vx-color-focus);
    }

    .quick-action-card__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: 700;
    }

    .quick-action-card__text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        line-height: 1.55;
    }

    .vx-report-shell {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-report-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-4);
        padding: clamp(1.25rem, 2vw, 2rem);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-xl, 1.5rem);
        background:
            radial-gradient(circle at top right, rgba(55, 94, 230, 0.08), transparent 28%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
        box-shadow: var(--vx-shadow-md);
    }

    .vx-report-hero__intro {
        display: grid;
        gap: var(--vx-space-3);
        max-width: 48rem;
    }

    .vx-report-hero__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: clamp(1.55rem, 2.4vw, 2.1rem);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1.1;
    }

    .vx-report-hero__text,
    .vx-analytics-section__text,
    .vx-chart-card__text,
    .vx-insight-item p {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-report-hero__meta,
    .vx-export-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-export-actions {
        align-items: flex-end;
        justify-content: flex-end;
    }

    .vx-report-filterbar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-3);
        align-items: flex-end;
    }

    .vx-field__label {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-semibold);
        line-height: 1.4;
    }

    .vx-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--vx-space-3);
    }

    .vx-metric-card {
        display: grid;
        gap: 0.45rem;
        padding: 1.25rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-metric-card--primary {
        background: linear-gradient(180deg, rgba(244, 251, 248, 0.96), rgba(255, 255, 255, 0.98));
    }

    .vx-metric-card--success {
        background: linear-gradient(180deg, rgba(240, 252, 247, 0.96), rgba(255, 255, 255, 0.98));
    }

    .vx-metric-card--warning {
        background: linear-gradient(180deg, rgba(255, 250, 235, 0.96), rgba(255, 255, 255, 0.98));
    }

    .vx-metric-card__label {
        color: var(--vx-color-text-muted);
        font-size: 0.76rem;
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-metric-card__value {
        color: var(--vx-color-text);
        font-size: clamp(1.6rem, 2.2vw, 2.2rem);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1;
    }

    .vx-metric-card__meta {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.55;
    }

    .vx-report-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 24rem);
        gap: var(--vx-space-4);
        align-items: start;
    }

    .vx-report-layout__main,
    .vx-report-layout__sidebar,
    .vx-analytics-grid,
    .vx-insight-list {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-chart-card,
    .vx-report-card,
    .vx-analytics-section {
        display: grid;
        gap: var(--vx-space-3);
        padding: 1.25rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-chart-card__head,
    .vx-report-card__head,
    .vx-analytics-section__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .vx-chart-card__title,
    .vx-report-card__title,
    .vx-analytics-section__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-lg);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-chart-list {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-chart-row {
        display: grid;
        gap: 0.55rem;
    }

    .vx-chart-row__meta,
    .vx-insight-item__head,
    .vx-insight-item--row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-2);
    }

    .vx-chart-row__label {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-medium);
    }

    .vx-chart-row__value,
    .vx-insight-item strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
    }

    .vx-chart-row__bar {
        width: 100%;
        height: 0.6rem;
        overflow: hidden;
        border: 0;
        border-radius: 999px;
        background: var(--vx-color-surface-muted);
    }

    .vx-chart-row__bar::-webkit-progress-bar {
        background: var(--vx-color-surface-muted);
        border-radius: 999px;
    }

    .vx-chart-row__bar::-webkit-progress-value {
        background: linear-gradient(90deg, var(--vx-color-primary-500), #72c2a4);
        border-radius: 999px;
    }

    .vx-chart-row__bar::-moz-progress-bar {
        background: linear-gradient(90deg, var(--vx-color-primary-500), #72c2a4);
        border-radius: 999px;
    }

    .vx-insight-item {
        display: grid;
        gap: 0.45rem;
        padding: 1rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
    }

    .app-notification-trigger {
        position: relative;
    }

    .app-notification-trigger.is-active {
        border-color: var(--vx-color-primary-300);
        color: var(--vx-color-primary-700);
        background: var(--vx-color-primary-50);
    }

    .vx-notification-counter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.4rem;
        height: 1.4rem;
        padding: 0 0.35rem;
        border-radius: 999px;
        background: var(--vx-color-danger);
        color: #ffffff;
        font-size: 0.7rem;
        font-weight: var(--vx-font-weight-bold);
        line-height: 1;
    }

    .vx-notification-shell,
    .vx-notification-center,
    .vx-notification-list {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-notification-center {
        padding: 1.25rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-xl, 1.5rem);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--vx-shadow-md);
    }

    .vx-notification-center__hero,
    .vx-notification-filterbar,
    .vx-notification-card__head,
    .vx-notification-card__footer {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .vx-notification-center__intro {
        display: grid;
        gap: var(--vx-space-2);
        max-width: 46rem;
    }

    .vx-notification-center__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: clamp(1.5rem, 2.2vw, 2rem);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1.1;
    }

    .vx-notification-center__text,
    .vx-notification-card__text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-notification-center__meta,
    .vx-notification-card__badges {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-notification-filterbar {
        align-items: flex-end;
        padding: 1rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface-muted);
    }

    .vx-notification-filterbar__toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.875rem;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-medium);
    }

    .vx-notification-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--vx-space-3);
        padding: 1.1rem 1.15rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-notification-card.is-unread {
        border-color: var(--vx-color-primary-200);
        box-shadow: inset 3px 0 0 var(--vx-color-primary-500), var(--vx-shadow-sm);
    }

    .vx-notification-card__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 1rem;
        background: linear-gradient(135deg, var(--vx-color-primary-600), #72c2a4);
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: var(--vx-font-weight-bold);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-notification-card__body {
        display: grid;
        gap: 0.6rem;
        min-width: 0;
    }

    .vx-notification-card__category {
        color: var(--vx-color-text-muted);
        font-size: 0.74rem;
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-notification-card__title {
        margin: 0.2rem 0 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-md);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-notification-card__date,
    .vx-notification-card__action {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
    }

    .vx-empty-notification-state {
        min-height: 14rem;
        place-items: center;
    }

    .vx-automation-shell,
    .vx-automation-layout,
    .vx-automation-layout__main,
    .vx-automation-layout__sidebar,
    .vx-automation-grid {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-automation-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-4);
        padding: clamp(1.25rem, 2vw, 2rem);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-xl, 1.5rem);
        background:
            radial-gradient(circle at top right, rgba(36, 130, 97, 0.08), transparent 32%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 247, 0.98));
        box-shadow: var(--vx-shadow-md);
    }

    .vx-automation-hero__intro {
        display: grid;
        gap: var(--vx-space-3);
        max-width: 48rem;
    }

    .vx-automation-hero__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: clamp(1.55rem, 2.4vw, 2.15rem);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1.1;
    }

    .vx-automation-hero__text,
    .vx-automation-builder__text,
    .vx-automation-card__text,
    .vx-automation-selector p {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-automation-hero__meta,
    .vx-automation-hero__actions,
    .vx-automation-toolbar,
    .vx-automation-toolbar__actions,
    .vx-automation-card__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-automation-toolbar {
        align-items: flex-end;
        justify-content: space-between;
        padding: 1rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-automation-layout {
        grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.95fr);
        align-items: start;
    }

    .vx-automation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-automation-card,
    .vx-automation-builder,
    .vx-automation-selector {
        display: grid;
        gap: var(--vx-space-3);
        border: 1px solid var(--vx-color-border);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-automation-card,
    .vx-automation-builder {
        padding: 1.25rem;
        border-radius: var(--vx-radius-lg);
    }

    .vx-automation-card__head,
    .vx-automation-card__footer,
    .vx-automation-builder__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .vx-automation-card__intro,
    .vx-automation-builder__flow {
        display: grid;
        gap: var(--vx-space-2);
    }

    .vx-automation-category,
    .vx-automation-step__label,
    .vx-automation-selector__eyebrow {
        color: var(--vx-color-text-muted);
        font-size: 0.74rem;
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-automation-card__title,
    .vx-automation-builder__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-lg);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1.2;
    }

    .vx-automation-card__flow,
    .vx-automation-builder__flow {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-automation-step,
    .vx-automation-selector {
        padding: 1rem;
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface-muted);
    }

    .vx-automation-step {
        display: grid;
        gap: 0.45rem;
    }

    .vx-automation-step strong,
    .vx-automation-selector strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
        line-height: 1.5;
    }

    .vx-automation-card__meta {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
    }

    .vx-automation-builder--compact {
        background: linear-gradient(180deg, rgba(248, 251, 253, 0.98), rgba(255, 255, 255, 0.98));
    }

    .dashboard-calendar {
        display: grid;
        gap: var(--vx-space-4);
    }

    .dashboard-calendar__toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .dashboard-calendar__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .dashboard-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
        gap: var(--vx-space-4);
        align-items: start;
    }

    .dashboard-surface {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-4);
        margin-bottom: var(--vx-space-5);
    }

    .vx-toolbar__intro {
        display: grid;
        gap: var(--vx-space-2);
        min-width: 0;
    }

    .vx-toolbar__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-xl);
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .vx-toolbar__text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-toolbar__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--vx-space-2);
    }

    .vx-searchbox {
        display: flex;
        align-items: center;
        gap: var(--vx-space-2);
        min-width: min(100%, 20rem);
    }

    .vx-searchbox__field {
        position: relative;
        min-width: min(100%, 18rem);
        flex: 1 1 18rem;
    }

    .vx-searchbox__field::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.9rem;
        width: 1rem;
        height: 1rem;
        border: 2px solid var(--vx-color-text-soft);
        border-radius: 999px;
        transform: translateY(-60%);
        pointer-events: none;
    }

    .vx-searchbox__field::after {
        content: "";
        position: absolute;
        top: calc(50% + 0.28rem);
        left: 1.75rem;
        width: 0.45rem;
        height: 2px;
        background: var(--vx-color-text-soft);
        transform: rotate(45deg);
        border-radius: 999px;
        pointer-events: none;
    }

    .vx-searchbox .vx-input {
        min-height: 2.75rem;
        padding-left: 2.65rem;
    }

    .vx-filterbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--vx-space-2);
    }

    .vx-color-dot {
        --vx-color-dot-size: 0.875rem;
        --vx-color-dot-value: var(--vx-color-primary);
        display: inline-flex;
        flex: 0 0 auto;
        width: var(--vx-color-dot-size);
        height: var(--vx-color-dot-size);
        border: 1px solid var(--vx-color-border-strong);
        border-radius: 999px;
        background: var(--vx-color-dot-value);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    .vx-color-dot--sm {
        --vx-color-dot-size: 0.625rem;
    }

    .vx-data-table-wrap {
        position: relative;
        overflow-x: auto;
        overflow-y: visible;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        color: var(--vx-color-text);
        --vx-table-row-odd: rgba(255, 255, 255, 0.96);
        --vx-table-row-even: rgba(36, 130, 97, 0.045);
        --vx-table-row-hover: rgba(36, 130, 97, 0.08);
    }

    .vx-data-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 0.9rem 1rem;
        background: var(--vx-color-surface-muted);
        border-bottom: 1px solid var(--vx-color-border);
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .vx-data-table tbody tr:nth-child(odd) td {
        background: var(--vx-table-row-odd);
    }

    .vx-data-table tbody tr:nth-child(even) td {
        background: var(--vx-table-row-even);
    }

    .vx-data-table tbody tr:hover td {
        background: var(--vx-table-row-hover);
    }

    .vx-data-table td {
        padding: 0.68rem 1rem;
        border-bottom: 1px solid var(--vx-color-border);
        vertical-align: top;
        font-size: var(--vx-font-size-sm);
        line-height: 1.35;
    }

    .vx-data-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .vx-table-stack {
        display: grid;
        gap: 0.15rem;
        min-width: 0;
    }

    .vx-table-title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: 700;
        line-height: 1.22;
    }

    .vx-table-text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        line-height: 1.28;
    }

    .vx-table-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-3);
        padding: var(--vx-space-4) var(--vx-space-5);
        border-top: 1px solid var(--vx-color-border);
        background: var(--vx-color-surface-muted);
    }

    .vx-table-count {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
    }

    .vx-empty-state {
        display: grid;
        gap: var(--vx-space-3);
        place-items: center;
        padding: var(--vx-space-8);
        text-align: center;
    }

    .vx-empty-state::before {
        content: "";
        width: 4rem;
        height: 4rem;
        border-radius: 1.35rem;
        border: 1px solid var(--vx-color-border);
        background:
            radial-gradient(circle at 30% 30%, rgba(36, 130, 97, 0.16), transparent 52%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 243, 0.96));
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-empty-state__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-lg);
        font-weight: 700;
    }

    .vx-empty-state__text {
        margin: 0;
        max-width: 40ch;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-row-actions {
        position: relative;
        display: inline-block;
        text-align: left;
    }

    .vx-row-actions[open] {
        z-index: 40;
    }

    .vx-row-actions__toggle {
        list-style: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.5rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
        color: var(--vx-color-text-muted);
        cursor: pointer;
        transition:
            border-color var(--vx-transition-base),
            background-color var(--vx-transition-base),
            color var(--vx-transition-base);
    }

    .vx-row-actions__toggle::-webkit-details-marker {
        display: none;
    }

    .vx-row-actions__toggle::before {
        content: "⋯";
        font-size: 1.1rem;
        line-height: 1;
        transform: translateY(-1px);
    }

    .vx-row-actions__toggle:hover {
        border-color: var(--vx-color-primary-200);
        background: var(--vx-color-hover);
        color: var(--vx-color-text);
    }

    .vx-row-actions__toggle:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }

    .vx-row-actions__menu {
        position: absolute;
        z-index: 50;
        right: 0;
        top: calc(100% + 0.5rem);
        min-width: 11rem;
        display: grid;
        gap: 0.2rem;
        padding: 0.35rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-lg);
        transform-origin: top right;
        animation: vxDropdownIn 180ms ease;
    }

    .vx-row-actions__menu.is-floating {
        position: fixed;
        right: auto;
        top: 0;
        left: 0;
    }

    .vx-row-actions.is-drop-up .vx-row-actions__menu {
        top: auto;
        bottom: calc(100% + 0.5rem);
        transform-origin: bottom right;
    }

    .vx-row-actions.is-align-left .vx-row-actions__menu {
        right: auto;
        left: 0;
        transform-origin: top left;
    }

    .vx-row-actions.is-drop-up.is-align-left .vx-row-actions__menu {
        transform-origin: bottom left;
    }

    .vx-row-actions__menu form {
        margin: 0;
    }

    .vx-row-actions__item {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        padding: 0.7rem 0.8rem;
        border: 0;
        border-radius: calc(var(--vx-radius-md) - 0.2rem);
        background: transparent;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-medium);
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color var(--vx-transition-base),
            color var(--vx-transition-base);
    }

    .vx-row-actions__item:hover {
        background: var(--vx-color-hover);
    }

    .vx-row-actions__item--danger {
        color: var(--vx-color-danger);
    }

    .vx-modal-shell .modal-dialog {
        padding: var(--vx-space-4);
    }

    .vx-modal-shell .modal-content,
    .modal .modal-content {
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 1.5rem;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 248, 0.97));
        box-shadow:
            0 20px 60px rgba(15, 23, 42, 0.14),
            0 2px 14px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .vx-modal-shell .modal-header,
    .modal .modal-header {
        align-items: flex-start;
        gap: var(--vx-space-4);
        padding: var(--vx-space-6) var(--vx-space-6) var(--vx-space-3);
        border: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 249, 0.92));
    }

    .vx-modal-shell .modal-body,
    .modal .modal-body {
        padding: var(--vx-space-4) var(--vx-space-6) var(--vx-space-6);
    }

    .vx-modal-shell .modal-footer,
    .modal .modal-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--vx-space-3);
        padding: var(--vx-space-4) var(--vx-space-6) var(--vx-space-6);
        border: 0;
        background: transparent;
    }

    .vx-modal-shell .btn-close,
    .modal .btn-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        border: 1px solid var(--vx-color-border);
        border-radius: 999px;
        background-color: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
        opacity: 1;
        transition:
            transform 160ms ease,
            background-color var(--vx-transition-base),
            border-color var(--vx-transition-base),
            box-shadow var(--vx-transition-base);
    }

    .vx-modal-shell .btn-close:hover,
    .modal .btn-close:hover {
        transform: translateY(-1px);
        border-color: var(--vx-color-primary-200);
        background: var(--vx-color-hover);
    }

    .vx-modal-shell .btn-close:focus-visible,
    .modal .btn-close:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }

    .modal-backdrop {
        --bs-backdrop-opacity: 1;
        background:
            radial-gradient(circle at top, rgba(36, 130, 97, 0.16), transparent 26%),
            rgba(15, 23, 42, 0.52);
        backdrop-filter: blur(8px);
    }

    .vx-toast-stack {
        position: fixed;
        right: var(--vx-space-5);
        top: var(--vx-space-5);
        z-index: 2100;
        display: grid;
        gap: var(--vx-space-3);
        width: min(100vw - 2rem, 24rem);
        pointer-events: none;
    }

    .vx-toast {
        display: grid;
        gap: var(--vx-space-3);
        grid-template-columns: auto 1fr auto;
        align-items: start;
        padding: var(--vx-space-4);
        border: 1px solid var(--vx-color-border);
        border-radius: 1.2rem;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--vx-shadow-lg);
        pointer-events: auto;
        transform: translateY(0);
        opacity: 1;
        transition:
            opacity 180ms ease,
            transform 180ms ease;
    }

    .vx-toast.is-leaving {
        opacity: 0;
        transform: translateY(8px);
    }

    .vx-toast__icon {
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        background: var(--vx-color-bg-subtle);
        border: 1px solid var(--vx-color-border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .vx-toast__body {
        display: grid;
        gap: var(--vx-space-1);
        min-width: 0;
    }

    .vx-toast__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-toast__text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.55;
    }

    .vx-toast__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--vx-color-text-soft);
        cursor: pointer;
        transition:
            background-color var(--vx-transition-base),
            color var(--vx-transition-base);
    }

    .vx-toast__close:hover {
        background: var(--vx-color-hover);
        color: var(--vx-color-text);
    }

    .vx-toast--success .vx-toast__icon {
        background: var(--vx-color-success-bg);
        border-color: var(--vx-color-success-border);
        color: #176b48;
    }

    .vx-toast--warning .vx-toast__icon {
        background: var(--vx-color-warning-bg);
        border-color: var(--vx-color-warning-border);
        color: #875c16;
    }

    .vx-toast--danger .vx-toast__icon {
        background: var(--vx-color-danger-bg);
        border-color: var(--vx-color-danger-border);
        color: #9e2f39;
    }

    .vx-toast--info .vx-toast__icon {
        background: var(--vx-color-info-bg);
        border-color: var(--vx-color-info-border);
        color: #244bb5;
    }

    .vx-loader,
    .vx-loader-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 999px;
        animation: vxSpin 0.72s linear infinite;
    }

    .vx-btn.is-loading {
        pointer-events: none;
    }

    .vx-btn.is-loading .vx-btn__label {
        display: inline-flex;
        align-items: center;
        gap: var(--vx-space-2);
    }

    .vx-skeleton {
        position: relative;
        overflow: hidden;
        background: rgba(226, 232, 240, 0.75);
        border-radius: inherit;
    }

    .vx-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
        animation: vxShimmer 1.3s ease-in-out infinite;
    }

    .vx-booting .page-hero,
    .vx-booting .panel-card,
    .vx-booting .vx-data-table-wrap,
    .vx-booting .vx-form,
    .vx-booting .dashboard-kpi-card,
    .vx-booting .dashboard-activity-list {
        position: relative;
        overflow: hidden;
    }

    .vx-booting .page-hero::after,
    .vx-booting .panel-card::after,
    .vx-booting .vx-data-table-wrap::after,
    .vx-booting .vx-form::after,
    .vx-booting .dashboard-kpi-card::after,
    .vx-booting .dashboard-activity-list::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(241, 245, 249, 0.72), rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.72));
        transform: translateX(-100%);
        animation: vxShimmer 1s ease-in-out 1;
        pointer-events: none;
    }

    .vx-alert--page {
        margin-bottom: var(--vx-space-4);
    }

    .vx-tooltip {
        position: fixed;
        z-index: 2200;
        max-width: 18rem;
        padding: 0.5rem 0.7rem;
        border-radius: 0.8rem;
        background: rgba(15, 23, 42, 0.94);
        color: #f8fafc;
        font-size: 0.75rem;
        line-height: 1.45;
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.24);
        opacity: 0;
        transform: translateY(4px);
        pointer-events: none;
        transition:
            opacity 150ms ease,
            transform 150ms ease;
    }

    .vx-tooltip.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .vx-dropdown-surface,
    .select2-dropdown {
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--vx-shadow-lg);
        overflow: hidden;
    }

    .select2-container .select2-selection--single {
        min-height: 2.875rem;
        border-radius: var(--vx-radius-md);
        border: 1px solid var(--vx-color-border);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
        transition:
            border-color var(--vx-transition-base),
            box-shadow var(--vx-transition-base),
            background-color var(--vx-transition-base);
    }

    .select2-container .select2-selection--single:hover {
        border-color: var(--vx-color-border-strong);
        background: var(--vx-color-surface-elevated);
    }

    .select2-container--default.select2-container--open .select2-selection--single,
    .select2-container .select2-selection--single:focus {
        border-color: var(--vx-color-primary-400);
        box-shadow: var(--vx-shadow-sm), 0 0 0 4px var(--vx-color-focus);
    }

    .select2-search--dropdown .select2-search__field {
        border: 1px solid var(--vx-color-border);
        border-radius: 0.75rem;
        padding: 0.65rem 0.85rem;
    }

    .panel-card,
    .metric-card,
    .app-menu-item,
    .user-menu,
    .vx-btn,
    .vx-row-actions__toggle,
    .vx-row-actions__menu,
    .pet-image-zoom-trigger {
        transition:
            transform 180ms ease,
            box-shadow 180ms ease,
            background-color var(--vx-transition-base),
            border-color var(--vx-transition-base),
            color var(--vx-transition-base);
    }

    .panel-card:hover,
    .metric-card:hover {
        transform: translateY(-1px);
    }

    .vx-btn:active {
        transform: translateY(1px) scale(0.995);
    }

    .user-menu:hover {
        transform: translateY(-1px);
        box-shadow: var(--vx-shadow-md);
    }

    .vx-calendar-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-4);
        margin-bottom: var(--vx-space-5);
        padding: var(--vx-space-5);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background:
            radial-gradient(circle at top left, rgba(36, 130, 97, 0.09), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-calendar-toolbar__date {
        display: grid;
        gap: var(--vx-space-2);
        min-width: 0;
    }

    .vx-calendar-toolbar__eyebrow {
        color: var(--vx-color-primary-700);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-calendar-toolbar__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: clamp(1.25rem, 2vw, 1.85rem);
        font-weight: var(--vx-font-weight-extrabold);
        letter-spacing: -0.03em;
    }

    .vx-calendar-toolbar__text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
        max-width: 56ch;
    }

    .vx-calendar-toolbar__controls,
    .vx-calendar-toolbar__nav,
    .vx-view-switch {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-calendar-toolbar__controls {
        align-items: center;
        justify-content: flex-end;
    }

    .vx-view-switch {
        padding: 0.25rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-pill);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-view-switch__item {
        min-height: 2.4rem;
        padding: 0.55rem 0.95rem;
        border: 0;
        border-radius: var(--vx-radius-pill);
        background: transparent;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
        cursor: pointer;
        transition:
            background-color var(--vx-transition-base),
            color var(--vx-transition-base),
            box-shadow var(--vx-transition-base);
    }

    .vx-view-switch__item:hover {
        color: var(--vx-color-text);
        background: var(--vx-color-hover);
    }

    .vx-view-switch__item.is-active {
        color: var(--vx-color-primary-700);
        background: var(--vx-color-primary-50);
        box-shadow: inset 0 0 0 1px var(--vx-color-primary-100);
    }

    .vx-agenda-board {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-agenda-view {
        display: none;
    }

    .vx-agenda-view.is-active {
        display: block;
    }

    .vx-agenda-sidebar {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-agenda-sidebar__card {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-agenda-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--vx-space-3);
    }

    .vx-agenda-metric {
        display: grid;
        gap: 0.35rem;
        padding: var(--vx-space-4);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: rgba(255, 255, 255, 0.86);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-agenda-metric span {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .vx-agenda-metric strong {
        color: var(--vx-color-text);
        font-size: clamp(1.15rem, 1.8vw, 1.65rem);
        font-weight: var(--vx-font-weight-extrabold);
        letter-spacing: -0.03em;
    }

    .vx-agenda-quick-actions {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-agenda-day {
        position: relative;
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-agenda-day__current {
        display: inline-flex;
        align-items: center;
        gap: var(--vx-space-2);
        padding: 0.55rem 0.85rem;
        border: 1px solid rgba(36, 130, 97, 0.16);
        border-radius: var(--vx-radius-pill);
        background: rgba(36, 130, 97, 0.08);
        color: var(--vx-color-primary-700);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        width: fit-content;
    }

    .vx-agenda-day__current::before {
        content: "";
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 999px;
        background: var(--vx-color-primary-500);
        box-shadow: 0 0 0 0.3rem rgba(36, 130, 97, 0.12);
    }

    .vx-agenda-timeline {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-agenda-timeline__marker {
        position: relative;
        padding-left: 5.75rem;
    }

    .vx-agenda-timeline__marker::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 1rem;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, rgba(36, 130, 97, 0.36), rgba(36, 130, 97, 0.08));
    }

    .vx-agenda-timeline__marker span {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--vx-space-2);
        padding: 0.3rem 0.65rem;
        border-radius: var(--vx-radius-pill);
        background: var(--vx-color-surface);
        color: var(--vx-color-primary-700);
        font-size: 0.72rem;
        font-weight: var(--vx-font-weight-bold);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-agenda-entry {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: var(--vx-space-3);
        align-items: start;
    }

    .vx-agenda-entry__time {
        display: grid;
        gap: 0.25rem;
        padding-top: var(--vx-space-2);
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vx-agenda-entry__time strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0;
    }

    .vx-agenda-card {
        display: grid;
        gap: var(--vx-space-3);
        padding: var(--vx-space-4);
        border: 1px solid var(--vx-color-border);
        border-left: 4px solid var(--vx-color-primary-300);
        border-radius: var(--vx-radius-lg);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-agenda-card__header,
    .vx-agenda-card__footer {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .vx-agenda-card__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-md);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: -0.02em;
    }

    .vx-agenda-card__subtitle,
    .vx-agenda-card__meta {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.55;
    }

    .vx-agenda-card__status {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-agenda-card__notes {
        margin: 0;
        padding: var(--vx-space-3);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface-muted);
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-agenda-card__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-agenda-card--success {
        border-left-color: #1f8b63;
        background: linear-gradient(180deg, rgba(240, 252, 247, 0.9), rgba(255, 255, 255, 0.96));
    }

    .vx-agenda-card--warning {
        border-left-color: #d89a1e;
        background: linear-gradient(180deg, rgba(255, 250, 235, 0.92), rgba(255, 255, 255, 0.96));
    }

    .vx-agenda-card--danger {
        border-left-color: #c2414d;
        background: linear-gradient(180deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.96));
    }

    .vx-agenda-card--info {
        border-left-color: #375ee6;
        background: linear-gradient(180deg, rgba(239, 244, 255, 0.92), rgba(255, 255, 255, 0.96));
    }

    .vx-agenda-week {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: var(--vx-space-3);
    }

    .vx-agenda-weekday {
        display: grid;
        gap: var(--vx-space-3);
        padding: var(--vx-space-4);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: var(--vx-shadow-sm);
        min-height: 18rem;
    }

    .vx-agenda-weekday.is-today {
        border-color: var(--vx-color-primary-200);
        box-shadow: inset 0 0 0 1px var(--vx-color-primary-100), var(--vx-shadow-md);
    }

    .vx-agenda-weekday__header {
        display: grid;
        gap: 0.25rem;
    }

    .vx-agenda-weekday__eyebrow {
        color: var(--vx-color-text-muted);
        font-size: 0.72rem;
        font-weight: var(--vx-font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .vx-agenda-weekday__date {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-md);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-agenda-weekday__list,
    .vx-agenda-monthday__list {
        display: grid;
        gap: var(--vx-space-2);
    }

    .vx-agenda-compact-card {
        display: grid;
        gap: 0.3rem;
        padding: 0.75rem;
        border: 1px solid var(--vx-color-border);
        border-left: 3px solid var(--vx-color-primary-300);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-agenda-compact-card strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-agenda-compact-card span {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        line-height: 1.45;
    }

    .vx-agenda-month {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-agenda-month__header,
    .vx-agenda-month__grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: var(--vx-space-2);
    }

    .vx-agenda-month__header span {
        padding: 0.65rem 0.75rem;
        color: var(--vx-color-text-muted);
        font-size: 0.72rem;
        font-weight: var(--vx-font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .vx-agenda-monthday {
        display: grid;
        align-content: start;
        gap: var(--vx-space-2);
        min-height: 9.75rem;
        padding: 0.8rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-agenda-monthday:focus-visible {
        outline: 0;
        border-color: var(--vx-color-primary-300);
        box-shadow: 0 0 0 4px var(--vx-color-focus), var(--vx-shadow-md);
    }

    .vx-agenda-monthday.is-muted {
        background: rgba(248, 250, 252, 0.8);
    }

    .vx-agenda-monthday.is-today {
        border-color: var(--vx-color-primary-200);
        box-shadow: inset 0 0 0 1px var(--vx-color-primary-100), var(--vx-shadow-md);
    }

    .vx-agenda-monthday__date {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-agenda-monthday.is-today .vx-agenda-monthday__date {
        background: var(--vx-color-primary-600);
        color: #ffffff;
    }

    .vx-agenda-monthday__more {
        color: var(--vx-color-primary-700);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-semibold);
    }

    .vx-patient-header-stack {
        display: grid;
        gap: var(--vx-space-4);
    }

    .vx-patient-header {
        display: grid;
        gap: var(--vx-space-4);
        padding: clamp(1.25rem, 2vw, 2rem);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-xl, 1.5rem);
        background:
            radial-gradient(circle at top right, rgba(35, 153, 110, 0.08), transparent 28%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 249, 0.96));
        box-shadow: var(--vx-shadow-md);
    }

    .vx-patient-header__identity,
    .vx-patient-header__footer,
    .vx-clinical-section__split {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .vx-patient-header__avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 1.4rem;
        background: linear-gradient(135deg, var(--vx-color-primary-600), #78c4aa);
        color: #ffffff;
        font-size: 1.35rem;
        font-weight: var(--vx-font-weight-bold);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-patient-header__copy {
        display: grid;
        gap: 0.45rem;
        min-width: 0;
        flex: 1 1 16rem;
    }

    .vx-patient-header__title,
    .vx-clinical-event-card__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: clamp(1.4rem, 2vw, 1.85rem);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1.1;
    }

    .vx-patient-header__subtitle,
    .vx-clinical-event-card__subtitle {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.55;
    }

    .vx-patient-header__meta,
    .vx-clinical-event-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-patient-header__highlight {
        display: grid;
        gap: 0.35rem;
        min-width: min(100%, 21rem);
        padding: 1rem 1.1rem;
        border: 1px solid rgba(35, 153, 110, 0.18);
        border-radius: var(--vx-radius-lg);
        background: rgba(244, 251, 248, 0.96);
    }

    .vx-patient-header__label {
        color: var(--vx-color-text-muted);
        font-size: 0.74rem;
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-patient-header__highlight strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-lg);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-patient-header__highlight p,
    .vx-patient-header__highlight span {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.55;
    }

    .vx-patient-header__actions,
    .vx-clinical-event-card__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-clinical-layout {
        display: grid;
        grid-template-columns: minmax(16rem, 20rem) minmax(0, 1.4fr) minmax(16rem, 22rem);
        gap: var(--vx-space-4);
        align-items: start;
    }

    .vx-clinical-layout__timeline,
    .vx-clinical-layout__sidebar {
        position: sticky;
        top: 1rem;
    }

    .vx-clinical-timeline,
    .vx-medical-summary {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-clinical-timeline__header {
        display: grid;
        gap: 0.35rem;
    }

    .vx-clinical-timeline__list {
        display: grid;
        gap: var(--vx-space-3);
        max-height: 72vh;
        overflow: auto;
        padding-right: 0.2rem;
    }

    .vx-clinical-timeline__item {
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr);
        gap: var(--vx-space-3);
        padding: 1rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: rgba(255, 255, 255, 0.96);
        color: inherit;
        text-decoration: none;
        box-shadow: var(--vx-shadow-sm);
        transition: transform var(--vx-transition-base), border-color var(--vx-transition-base), box-shadow var(--vx-transition-base);
    }

    .vx-clinical-timeline__item:hover,
    .vx-clinical-timeline__item.is-active {
        transform: translateY(-1px);
        border-color: var(--vx-color-primary-200);
        box-shadow: var(--vx-shadow-md);
    }

    .vx-clinical-timeline__item:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px var(--vx-color-focus), var(--vx-shadow-md);
    }

    .vx-clinical-timeline__item.is-active {
        background: linear-gradient(180deg, rgba(244, 251, 248, 0.98), rgba(255, 255, 255, 0.98));
    }

    .vx-clinical-timeline__dot {
        width: 0.85rem;
        height: 0.85rem;
        margin-top: 0.3rem;
        border-radius: 999px;
        background: var(--vx-color-primary-600);
        box-shadow: 0 0 0 4px rgba(35, 153, 110, 0.14);
    }

    .vx-clinical-timeline__body {
        display: grid;
        gap: 0.4rem;
        min-width: 0;
    }

    .vx-clinical-timeline__date {
        color: var(--vx-color-text-muted);
        font-size: 0.74rem;
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-clinical-timeline__body strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-md);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-clinical-timeline__body p,
    .vx-clinical-section__text,
    .vx-clinical-section__support {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-clinical-event-card {
        display: grid;
        gap: var(--vx-space-4);
        padding: clamp(1.25rem, 2vw, 1.75rem);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--vx-shadow-md);
    }

    .vx-clinical-event-card__header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--vx-space-3);
    }

    .vx-clinical-event-card__grid {
        display: grid;
        gap: var(--vx-space-3);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-clinical-section {
        display: grid;
        gap: 0.45rem;
        padding: 1rem 1.05rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
    }

    .vx-clinical-section--full {
        grid-column: 1 / -1;
    }

    .vx-clinical-section__title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-md);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-clinical-list {
        display: grid;
        gap: var(--vx-space-2);
    }

    .vx-clinical-list__item {
        display: grid;
        gap: 0.2rem;
        padding: 0.85rem 0.95rem;
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface-muted);
    }

    .vx-clinical-list__item strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
    }

    .vx-clinical-list__item span {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
    }

    .vx-attachment-gallery {
        display: grid;
        gap: var(--vx-space-3);
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .vx-attachment-gallery__item {
        display: grid;
        gap: 0.35rem;
        padding: 0.95rem 1rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: rgba(255, 255, 255, 0.98);
        color: inherit;
        text-decoration: none;
        box-shadow: var(--vx-shadow-sm);
        transition: transform var(--vx-transition-base), border-color var(--vx-transition-base);
    }

    .vx-attachment-gallery__item:hover {
        transform: translateY(-1px);
        border-color: var(--vx-color-primary-200);
    }

    .vx-attachment-gallery__item strong {
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
    }

    .vx-attachment-gallery__item span {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
    }

    .vx-attachment-gallery__item--stacked {
        align-content: start;
    }

    .vx-empty-state--compact {
        padding: 1rem 1.1rem;
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface-muted);
    }

    @keyframes vxSpin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes vxShimmer {
        to {
            transform: translateX(100%);
        }
    }

    @keyframes vxDropdownIn {
        from {
            opacity: 0;
            transform: translateY(-4px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .vx-status-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
    }

    .vx-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--vx-space-2);
    }

    .vx-pagination__item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.5rem 0.8rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
        text-decoration: none;
    }

    .vx-pagination__item.is-active {
        border-color: var(--vx-color-primary-200);
        background: var(--vx-color-primary-50);
        color: var(--vx-color-primary-700);
    }

    .vx-link {
        color: var(--vx-color-primary-600);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
        text-decoration: none;
        transition: color var(--vx-transition-base);
    }

    .vx-link:hover {
        color: var(--vx-color-primary-700);
    }

    .vx-link:focus-visible {
        outline: 0;
        border-radius: var(--vx-radius-sm);
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }

    .vx-link-button {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--vx-space-2);
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--vx-color-primary-700);
        font: inherit;
        font-weight: var(--vx-font-weight-semibold);
        line-height: 1.45;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition:
            color var(--vx-transition-base),
            opacity var(--vx-transition-base);
    }

    .vx-link-button:hover {
        color: var(--vx-color-primary-800);
        text-decoration: underline;
    }

    .vx-link-button:focus-visible {
        outline: 0;
        border-radius: var(--vx-radius-sm);
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }

    .vx-stat-list {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-stat-list__item {
        display: grid;
        gap: 0.35rem;
        padding: var(--vx-space-4);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 249, 0.94));
    }

    .vx-stat-list__label {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-stat-list__meta {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.55;
    }

    .vx-btn,
    a.vx-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--vx-space-2);
        min-height: 2.6rem;
        padding: 0.72rem 1rem;
        border: 1px solid currentColor;
        border-radius: 0.45rem;
        background: #ffffff;
        color: var(--vx-color-text);
        font-family: var(--vx-font-family);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1;
        text-decoration: none !important;
        cursor: pointer;
        transition:
            background-color var(--vx-transition-base),
            border-color var(--vx-transition-base),
            box-shadow var(--vx-transition-base),
            color var(--vx-transition-base);
    }

    .vx-btn:hover,
    a.vx-btn:hover,
    .vx-btn:focus,
    a.vx-btn:focus,
    .vx-btn:focus-visible,
    a.vx-btn:focus-visible,
    .vx-btn:active,
    a.vx-btn:active,
    .vx-btn:visited,
    a.vx-btn:visited {
        text-decoration: none !important;
    }

    .vx-btn:focus-visible,
    a.vx-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }

    .vx-btn:disabled,
    .vx-btn[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

    .vx-btn--primary {
        background: #ffffff;
        border-color: #4d9dff;
        color: #2f80ed;
        box-shadow: none;
    }

    .vx-btn--primary:hover {
        background: #f3f8ff;
        border-color: #2f80ed;
        color: #216ad1;
    }

    .vx-btn--secondary,
    a.vx-btn--secondary,
    a.vx-btn--secondary:link,
    a.vx-btn--secondary:visited,
    a.vx-btn--secondary:focus,
    a.vx-btn--secondary:focus-visible,
    a.vx-btn--secondary:active {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #64748b;
    }

    .vx-btn--secondary:hover,
    a.vx-btn--secondary:hover {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #475569;
    }

    .vx-btn--outline {
        background: #ffffff;
        border-color: #b9c7d6;
        color: #1b6b5a;
        box-shadow: none;
    }

    .vx-btn--outline:hover {
        background: #f8fbfc;
        border-color: #8fb7a9;
        color: #145442;
        box-shadow: none;
    }

    .vx-btn--danger {
        background: #ffffff;
        border-color: #ff8f8f;
        color: #ff4d4f;
    }

    .vx-btn--danger:hover {
        background: #fff5f5;
        border-color: #ff4d4f;
        color: #e5383b;
    }

    .vx-btn--success {
        background: #ffffff;
        border-color: #86efac;
        color: #22c55e;
    }

    .vx-btn--success:hover {
        background: #f0fdf4;
        border-color: #22c55e;
        color: #16a34a;
    }

    .vx-btn--info {
        background: #ffffff;
        border-color: #d8b4fe;
        color: #c084fc;
    }

    .vx-btn--info:hover {
        background: #faf5ff;
        border-color: #c084fc;
        color: #a855f7;
    }

    .vx-btn--warning {
        background: #ffffff;
        border-color: #fdba74;
        color: #f59e0b;
    }

    .vx-btn--warning:hover {
        background: #fff7ed;
        border-color: #f59e0b;
        color: #d97706;
    }

    .vx-btn--sm {
        min-height: 2.1rem;
        padding: 0.5rem 0.8rem;
        font-size: var(--vx-font-size-xs);
    }

    .vx-btn--form-match {
        min-width: 7.25rem;
    }

    .vx-btn--lg {
        min-height: 3rem;
        padding: 0.875rem 1.125rem;
        font-size: var(--vx-font-size-md);
    }

    .vx-btn--block {
        width: 100%;
    }

    .vx-table-actions {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.45rem;
    }

    .vx-table-actions form {
        margin: 0;
    }

    .vx-form {
        display: grid;
        gap: var(--vx-space-5);
    }

    .vx-form__section {
        display: grid;
        gap: var(--vx-space-4);
        padding: var(--vx-space-5);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.88));
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-form__section-title {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-md);
        font-weight: var(--vx-font-weight-bold);
        line-height: 1.35;
    }

    .vx-form__section-text {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: 1.6;
    }

    .vx-field {
        display: grid;
        gap: var(--vx-space-2);
    }

    .vx-form__row {
        display: grid;
        gap: var(--vx-space-4);
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .vx-form__field {
        display: grid;
        gap: var(--vx-space-2);
        min-width: 0;
        grid-column: span 12;
    }

    .vx-col-6 {
        grid-column: span 6;
    }

    .vx-col-4 {
        grid-column: span 4;
    }

    .vx-col-3 {
        grid-column: span 3;
    }

    .vx-label,
    .form-label {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--vx-space-2);
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-semibold);
        line-height: 1.4;
        margin: 0;
    }

    .vx-label__hint,
    .vx-help-text,
    .form-text {
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        line-height: 1.5;
    }

    .vx-label:has(+ :is(input, select, textarea)[required])::after,
    .form-label:has(+ :is(input, select, textarea)[required])::after {
        content: "Obligatorio";
        display: inline-flex;
        align-items: center;
        min-height: 1.5rem;
        padding: 0.125rem 0.5rem;
        border-radius: var(--vx-radius-pill);
        background: rgba(36, 130, 97, 0.1);
        color: var(--vx-color-primary-700);
        font-size: 0.6875rem;
        font-weight: var(--vx-font-weight-semibold);
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .vx-label__meta,
    .vx-label__required,
    .vx-label__optional {
        display: inline-flex;
        align-items: center;
        min-height: 1.5rem;
        padding: 0.125rem 0.5rem;
        border-radius: var(--vx-radius-pill);
        font-size: 0.6875rem;
        font-weight: var(--vx-font-weight-semibold);
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .vx-label__required {
        background: rgba(36, 130, 97, 0.1);
        color: var(--vx-color-primary-700);
    }

    .vx-label__optional {
        background: var(--vx-color-bg-subtle);
        color: var(--vx-color-text-muted);
    }

    .vx-label__alert {
        background: var(--vx-color-danger-bg);
        color: #9e2f39;
    }

    .vx-label--nowrap {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .vx-input,
    .vx-select,
    .vx-textarea,
    .form-control,
    .form-select {
        width: 100%;
        min-height: 2.875rem;
        padding: 0.75rem 0.875rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
        color: var(--vx-color-text);
        font-family: var(--vx-font-family);
        font-size: var(--vx-font-size-sm);
        line-height: var(--vx-line-height-normal);
        box-shadow: var(--vx-shadow-sm);
        transition:
            border-color var(--vx-transition-base),
            box-shadow var(--vx-transition-base),
            background-color var(--vx-transition-base);
    }

    .vx-input::placeholder,
    .vx-textarea::placeholder,
    .form-control::placeholder {
        color: var(--vx-color-text-soft);
    }

    .vx-input:hover,
    .vx-select:hover,
    .vx-textarea:hover,
    .form-control:hover,
    .form-select:hover {
        border-color: var(--vx-color-border-strong);
        background: var(--vx-color-surface-elevated);
    }

    .vx-input:focus,
    .vx-select:focus,
    .vx-textarea:focus,
    .form-control:focus,
    .form-select:focus {
        outline: 0;
        border-color: var(--vx-color-primary-400);
        box-shadow:
            var(--vx-shadow-sm),
            0 0 0 4px var(--vx-color-focus);
    }

    .vx-input:disabled,
    .vx-select:disabled,
    .vx-textarea:disabled,
    .form-control:disabled,
    .form-select:disabled,
    .vx-field.is-disabled .vx-input,
    .vx-field.is-disabled .vx-select,
    .vx-field.is-disabled .vx-textarea {
        background: var(--vx-color-bg-subtle);
        color: var(--vx-color-text-soft);
        cursor: not-allowed;
        box-shadow: none;
    }

    .vx-input--lg,
    .form-control-lg {
        min-height: 3.25rem;
        padding: 0.9375rem 1rem;
        font-size: var(--vx-font-size-md);
    }

    .vx-textarea,
    textarea.form-control {
        min-height: 7rem;
        resize: vertical;
    }

    .vx-input[type="file"],
    .form-control[type="file"] {
        padding-block: 0.625rem;
    }

    .vx-input--color,
    .vx-input[type="color"],
    .form-control[type="color"] {
        min-height: 3rem;
        padding: 0.375rem;
    }

    .vx-field.is-error .vx-input,
    .vx-field.is-error .vx-select,
    .vx-field.is-error .vx-textarea,
    .vx-input[aria-invalid="true"],
    .vx-select[aria-invalid="true"],
    .vx-textarea[aria-invalid="true"],
    .form-control.is-invalid,
    .form-select.is-invalid,
    .form-control[aria-invalid="true"],
    .form-select[aria-invalid="true"] {
        border-color: var(--vx-color-danger);
        box-shadow:
            var(--vx-shadow-sm),
            0 0 0 4px rgba(194, 65, 77, 0.12);
    }

    .vx-field__error {
        color: var(--vx-color-danger);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-medium);
    }

    .vx-form__meta {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--vx-space-3);
    }

    .vx-form__actions,
    .vx-form .col-12.d-flex.gap-2,
    .vx-form .d-flex.gap-2.justify-content-end {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: var(--vx-space-3);
        padding-top: var(--vx-space-2);
    }

    .vx-choice-grid {
        display: grid;
        gap: var(--vx-space-3);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-choice,
    .form-check {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
        margin: 0;
        transition:
            border-color var(--vx-transition-base),
            box-shadow var(--vx-transition-base),
            background-color var(--vx-transition-base);
    }

    .vx-choice:hover,
    .form-check:hover {
        border-color: var(--vx-color-border-strong);
        background: var(--vx-color-surface-elevated);
    }

    .vx-checkbox,
    .vx-radio,
    .form-check-input {
        flex: 0 0 auto;
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0.1875rem;
        border: 1px solid var(--vx-color-border-strong);
        box-shadow: none;
    }

    .vx-checkbox:focus,
    .vx-radio:focus,
    .form-check-input:focus {
        border-color: var(--vx-color-primary-400);
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }

    .vx-checkbox:checked,
    .vx-radio:checked,
    .form-check-input:checked {
        background-color: var(--vx-color-primary-600);
        border-color: var(--vx-color-primary-600);
    }

    .vx-choice__label,
    .form-check-label {
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-medium);
        line-height: 1.55;
    }

    label.vx-switch {
        position: relative;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start;
        flex-wrap: nowrap !important;
        gap: 0.75rem;
        width: 100%;
        min-height: 1.65rem;
        margin-bottom: 0;
        cursor: pointer;
    }

    .vx-switch__input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        opacity: 0;
        pointer-events: none;
        appearance: none;
    }

    .vx-switch__control {
        display: inline-block;
        position: relative;
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
        width: 2.9rem;
        height: 1.65rem;
        border-radius: 999px;
        background: var(--vx-color-border-strong);
        transition:
            background-color var(--vx-transition-base),
            box-shadow var(--vx-transition-base);
    }

    .vx-switch__control::after {
        content: "";
        position: absolute;
        top: 0.16rem;
        left: 0.16rem;
        width: 1.33rem;
        height: 1.33rem;
        border-radius: 50%;
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
        transition: transform var(--vx-transition-base);
    }

    .vx-switch__input:checked + .vx-switch__control {
        background: var(--vx-color-primary-600);
    }

    .vx-switch__input:checked + .vx-switch__control::after {
        transform: translateX(1.25rem);
    }

    .vx-switch__input:focus-visible + .vx-switch__control {
        box-shadow: 0 0 0 4px var(--vx-color-focus);
    }

    .vx-switch__label {
        display: flex !important;
        flex: 0 1 auto;
        align-items: center !important;
        align-self: center;
        min-width: 0;
        margin: 0;
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-medium);
        line-height: 1.2;
        min-height: 1.65rem;
        white-space: nowrap;
    }

    .vx-choice__text {
        display: block;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-regular);
        line-height: 1.5;
        margin-top: 0.125rem;
    }

    .vx-form .row.g-3,
    .vx-form .row.g-4 {
        row-gap: var(--vx-space-4);
    }

    .vx-alert {
        display: grid;
        gap: var(--vx-space-1);
        padding: var(--vx-space-4) var(--vx-space-5);
        border: 1px solid transparent;
        border-radius: var(--vx-radius-md);
        box-shadow: var(--vx-shadow-sm);
    }

    .vx-alert__title {
        margin: 0;
        font-size: var(--vx-font-size-sm);
        font-weight: var(--vx-font-weight-bold);
    }

    .vx-alert__body {
        margin: 0;
        font-size: var(--vx-font-size-sm);
        color: inherit;
    }

    .vx-alert--success {
        background: var(--vx-color-success-bg);
        border-color: var(--vx-color-success-border);
        color: #176b48;
    }

    .vx-alert--warning {
        background: var(--vx-color-warning-bg);
        border-color: var(--vx-color-warning-border);
        color: #875c16;
    }

    .vx-alert--danger {
        background: var(--vx-color-danger-bg);
        border-color: var(--vx-color-danger-border);
        color: #9e2f39;
    }

    .vx-alert--info {
        background: var(--vx-color-info-bg);
        border-color: var(--vx-color-info-border);
        color: #244bb5;
    }

    .vx-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--vx-space-2);
        min-height: 1.75rem;
        padding: 0.25rem 0.625rem;
        border: 1px solid transparent;
        border-radius: var(--vx-radius-pill);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-semibold);
        white-space: nowrap;
    }

    .vx-badge--neutral {
        background: var(--vx-color-bg-subtle);
        border-color: var(--vx-color-border);
        color: var(--vx-color-text-muted);
    }

    .vx-badge--success {
        background: var(--vx-color-success-bg);
        border-color: var(--vx-color-success-border);
        color: #176b48;
    }

    .vx-badge--warning {
        background: var(--vx-color-warning-bg);
        border-color: var(--vx-color-warning-border);
        color: #875c16;
    }

    .vx-badge--danger {
        background: var(--vx-color-danger-bg);
        border-color: var(--vx-color-danger-border);
        color: #9e2f39;
    }

    .vx-badge--info {
        background: var(--vx-color-info-bg);
        border-color: var(--vx-color-info-border);
        color: #244bb5;
    }

    .vx-table-wrap {
        overflow-x: auto;
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-md);
    }

    .vx-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        min-width: 40rem;
        color: var(--vx-color-text);
        --vx-table-row-odd: rgba(255, 255, 255, 0.96);
        --vx-table-row-even: rgba(36, 130, 97, 0.045);
        --vx-table-row-hover: rgba(36, 130, 97, 0.08);
    }

    .vx-table thead th {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--vx-color-border);
        background: var(--vx-color-surface-muted);
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-align: left;
        text-transform: uppercase;
    }

    .vx-table tbody tr:nth-child(odd) td {
        background: var(--vx-table-row-odd);
    }

    .vx-table tbody tr:nth-child(even) td {
        background: var(--vx-table-row-even);
    }

    .vx-table tbody td {
        padding: 0.68rem 1rem;
        border-bottom: 1px solid var(--vx-color-border);
        vertical-align: middle;
        font-size: var(--vx-font-size-sm);
        line-height: 1.35;
    }

    .vx-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .vx-table tbody tr:hover td {
        background: var(--vx-table-row-hover);
    }

    .vx-modal {
        width: min(100%, 40rem);
        margin-inline: auto;
        background: var(--vx-color-surface);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-xl);
        box-shadow: var(--vx-shadow-lg);
    }

    .vx-modal__header,
    .vx-modal__body,
    .vx-modal__footer {
        padding: var(--vx-space-6);
    }

    .vx-modal__header,
    .vx-modal__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--vx-space-4);
    }

    .vx-modal__header {
        border-bottom: 1px solid var(--vx-color-border);
    }

    .vx-modal__footer {
        border-top: 1px solid var(--vx-color-border);
    }

    .vx-note {
        padding: var(--vx-space-4);
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-md);
        background: var(--vx-color-surface-muted);
    }

    .vx-note strong {
        display: block;
        margin-bottom: var(--vx-space-1);
        color: var(--vx-color-text);
        font-size: var(--vx-font-size-sm);
    }

    .vx-note p {
        margin: 0;
        color: var(--vx-color-text-muted);
        font-size: var(--vx-font-size-sm);
        line-height: var(--vx-line-height-relaxed);
    }
}

@layer vetix.utilities {
    .vx-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .vx-w-full {
        width: 100%;
    }

    .vx-text-center {
        text-align: center;
    }

    .vx-space-y-4 > * + * {
        margin-top: var(--vx-space-4);
    }

    .vx-space-y-3 > * + * {
        margin-top: var(--vx-space-3);
    }

    .vx-space-y-6 > * + * {
        margin-top: var(--vx-space-6);
    }

    .vx-mt-4 {
        margin-top: var(--vx-space-4);
    }

    .vx-mt-6 {
        margin-top: var(--vx-space-6);
    }

    .vx-mb-0 {
        margin-bottom: 0;
    }
}

@media (max-width: 1199.98px) {
    .app-topbar__primary,
    .app-topbar__secondary {
        padding-inline: var(--vx-space-4);
    }

    .app-topbar__primary {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--vx-space-3);
        padding-block: var(--vx-space-3);
    }

    .app-brand {
        flex: 1 1 auto;
    }

    .app-topbar__actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--vx-space-2);
    }

    .app-company-chip {
        max-width: 12rem;
        padding-inline: 0.75rem;
    }

    .user-menu {
        max-width: 11rem;
        padding-inline: 0.625rem;
    }

    .app-topbar .vx-btn--outline {
        padding-inline: 0.85rem;
    }

    .app-menu-item {
        padding-inline: 0.75rem;
        font-size: var(--vx-font-size-xs);
    }
}

@media (max-width: 1079.98px) {
    .app-brand--full-logo .app-brand__mark {
        min-width: 8.75rem;
    }

    .app-brand--full-logo .app-brand__mark img {
        height: 2rem;
    }

    .app-brand--full-logo .app-brand__subtitle {
        display: none;
    }

    .app-company-chip {
        max-width: 10rem;
    }

    .user-menu {
        max-width: 9.5rem;
    }

    .app-topbar .vx-btn--outline {
        min-width: auto;
        padding-inline: 0.7rem;
        font-size: var(--vx-font-size-xs);
    }
}

@media (max-width: 991.98px) {
    body.admin-menu-open {
        overflow: hidden;
    }

    .app-topbar__primary,
    .app-topbar__secondary {
        padding-inline: var(--vx-space-4);
    }

    .app-topbar__primary {
        min-height: 3.25rem;
        padding-block: var(--vx-space-2);
    }

    .app-topbar__secondary {
        display: none;
    }

    .app-menu-toggle {
        display: inline-flex;
    }

    .app-company-chip,
    .user-menu {
        display: none;
    }

    .app-menu-drawer {
        display: block;
    }

    .app-content.admin-content {
        padding: var(--vx-space-5) var(--vx-space-4);
    }

    .dashboard-kpi-grid,
    .quick-actions-grid,
    .vx-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-toolbar,
    .vx-toolbar__actions,
    .vx-table-footer {
        align-items: stretch;
    }

    .vx-toolbar__actions,
    .vx-searchbox,
    .vx-filterbar,
    .vx-pagination,
    .vx-calendar-toolbar,
    .vx-calendar-toolbar__controls {
        justify-content: flex-start;
    }

    .dashboard-section-grid,
    .dashboard-split,
    .vx-clinical-layout,
    .vx-report-layout,
    .vx-analytics-grid,
    .vx-automation-layout {
        grid-template-columns: 1fr;
    }

    .vx-automation-grid {
        grid-template-columns: 1fr;
    }

    .vx-agenda-week,
    .vx-agenda-month__header,
    .vx-agenda-month__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-form__row {
        grid-template-columns: 1fr;
    }

    .vx-col-6,
    .vx-col-4,
    .vx-col-3 {
        grid-column: span 1;
    }

    .vx-choice-grid,
    .vx-form__actions {
        grid-template-columns: 1fr;
    }

    .vx-card__header,
    .vx-card__footer,
    .vx-modal__header,
    .vx-modal__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-clinical-layout__timeline,
    .vx-clinical-layout__sidebar {
        position: static;
    }

    .vx-clinical-timeline__list {
        max-height: none;
    }

    .vx-clinical-event-card__grid {
        grid-template-columns: 1fr;
    }

    .vx-report-hero,
    .vx-export-actions,
    .vx-report-filterbar,
    .vx-automation-hero,
    .vx-automation-toolbar,
    .vx-automation-card__head,
    .vx-automation-card__footer,
    .vx-automation-builder__head,
    .vx-notification-center__hero,
    .vx-notification-filterbar,
    .vx-notification-card__head,
    .vx-notification-card__footer {
        align-items: stretch;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .vx-container {
        width: min(100% - (var(--vx-space-4) * 2), var(--vx-container-xl));
    }

    .vx-agenda-entry {
        grid-template-columns: 1fr;
    }

    .vx-agenda-timeline__marker {
        padding-left: 0;
    }

    .vx-agenda-timeline__marker::before {
        left: 0;
    }

    .vx-agenda-metrics,
    .vx-agenda-week,
    .vx-agenda-month__header,
    .vx-agenda-month__grid,
    .vx-attachment-gallery {
        grid-template-columns: 1fr;
    }

    .vx-toast-stack {
        right: var(--vx-space-4);
        left: var(--vx-space-4);
        top: var(--vx-space-4);
        width: auto;
    }

    .vx-tooltip {
        display: none;
    }

    .app-brand__subtitle {
        display: none;
    }

    .app-topbar__actions {
        gap: var(--vx-space-2);
    }

    .app-topbar .vx-btn--outline {
        min-width: 2.75rem;
        padding-inline: 0.75rem;
    }

    .app-content.admin-content {
        padding: var(--vx-space-4);
    }

    .dashboard-header {
        padding: var(--vx-space-5);
    }

    .dashboard-header,
    .dashboard-section__header,
    .dashboard-calendar__toolbar {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-section__actions,
    .dashboard-calendar__actions {
        width: 100%;
        justify-content: stretch;
    }

    .dashboard-section__actions .vx-btn,
    .dashboard-calendar__actions .vx-btn {
        width: 100%;
    }

    .dashboard-kpi-grid,
    .quick-actions-grid,
    .vx-kpi-grid {
        grid-template-columns: 1fr;
    }

    .vx-patient-header__identity,
    .vx-patient-header__footer,
    .vx-clinical-event-card__header,
    .vx-clinical-section__split,
    .vx-chart-row__meta,
    .vx-insight-item__head,
    .vx-insight-item--row,
    .vx-notification-card {
        grid-template-columns: 1fr;
    }

    .vx-notification-card__head,
    .vx-notification-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table,
    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table thead,
    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table tbody,
    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table tr,
    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table td {
        display: block;
        width: 100%;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table thead {
        display: none;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table tbody {
        display: grid;
        gap: var(--vx-space-3);
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table tr {
        border: 1px solid var(--vx-color-border);
        border-radius: var(--vx-radius-lg);
        background: var(--vx-color-surface);
        box-shadow: var(--vx-shadow-sm);
        overflow: visible;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table tbody tr:nth-child(even) td,
    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table tbody tr:hover td {
        background: transparent;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table td {
        display: grid;
        gap: var(--vx-space-1);
        padding: 0.62rem 0.85rem;
        border-bottom: 1px solid var(--vx-color-border);
        text-align: left !important;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table td:last-child {
        border-bottom: 0;
    }

    .vx-data-table-wrap[data-table-responsive="cards"] .vx-data-table td::before {
        content: attr(data-label);
        color: var(--vx-color-text-soft);
        font-size: var(--vx-font-size-xs);
        font-weight: var(--vx-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-auth-shell.auth-shell {
        padding: var(--vx-space-4);
    }

    .vx-auth-card.auth-panel {
        padding: var(--vx-space-6);
        border-radius: var(--vx-radius-lg);
    }

    .vx-card__header,
    .vx-card__body,
    .vx-card__footer,
    .vx-modal__header,
    .vx-modal__body,
    .vx-modal__footer {
        padding: var(--vx-space-4);
    }

    .vx-table {
        min-width: 34rem;
    }
}