:root {
    --primary-color: #2E3A4D;
    --secondary-color: #6366f1;
    --surface-color: #ffffff;
    --surface-muted-color: #f8fafc;
    --text-color: #0f172a;
    --muted-text-color: #64748b;
    --border-color: #cbd5e1;
    --input-bg-color: #f8fafc;
    --input-text-color: #0f172a;
    --sidebar-bg: #2E3A4D;
    --sidebar-text: #c7d2fe;
    --chat-header-bg: #ffffff;
    --chat-header-text: #0f172a;
    --chat-bg-color: #ffffff;
    --bubble-in-bg: #ffffff;
    --bubble-in-text: #1e293b;
    --bubble-out-bg: #dcf8c6;
    --bubble-out-text: #000000;
    --event-bg: #f1f5f9;
    --event-text: #475569;
    --event-border: #cbd5e1;
    --vitalmed-sidebar-width: 72px;
    --vitalmed-sidebar-padding: 14px;
    --vitalmed-sidebar-logo: 43.2px;
    --vitalmed-sidebar-item: 36px;
    --vitalmed-sidebar-icon: 16.2px;
    --vitalmed-sidebar-gap: 7px;
    --vitalmed-sidebar-outer-gap: 16px;
    --vitalmed-mobile-menu-width: 100.8px;
    --vitalmed-mobile-menu-item: 43.2px;
    --vitalmed-mobile-menu-gap: 12px;
}

body {
    background-color: var(--bg-body, #f1f5f9) !important;
    color: var(--text-color, #0f172a);
}

.bg-primary-dark,
aside.bg-primary-dark {
    background-color: var(--sidebar-bg, var(--primary-color)) !important;
    color: var(--sidebar-text, #c7d2fe) !important;
}

.bg-white,
.modal-content,
.surface-card {
    background-color: var(--surface-color, #ffffff) !important;
}

.bg-slate-50,
.bg-slate-100,
.surface-muted {
    background-color: var(--surface-muted-color, #f8fafc) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

input,
textarea,
select {
    background-color: var(--input-bg-color, #f8fafc) !important;
    color: var(--input-text-color, #0f172a) !important;
    border-color: var(--border-color, #cbd5e1) !important;
}

.border,
.border-b,
.border-t,
.border-r,
.border-l {
    border-color: var(--border-color, #cbd5e1) !important;
}

body.dark {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

body.dark .bg-white,
body.dark .modal-content,
body.dark .surface-card,
body.dark .bg-slate-50,
body.dark .bg-slate-100,
body.dark .surface-muted {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

body.dark .text-slate-900,
body.dark .text-slate-800,
body.dark .text-slate-700,
body.dark .text-slate-600,
body.dark .text-gray-900,
body.dark .text-gray-800,
body.dark .text-gray-700,
body.dark .text-indigo-900,
body.dark .text-indigo-800,
body.dark .text-indigo-700 {
    color: #f3f4f6 !important;
}

body.dark .text-slate-500,
body.dark .text-slate-400,
body.dark .text-gray-500,
body.dark .text-gray-400 {
    color: #94a3b8 !important;
}

body.dark input,
body.dark textarea,
body.dark select {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #334155 !important;
}

body.dark .border,
body.dark .border-b,
body.dark .border-t,
body.dark .border-r,
body.dark .border-l {
    border-color: #334155 !important;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vitalmed-fade-out 160ms ease both;
}

::view-transition-new(root) {
    animation: vitalmed-fade-in 200ms ease both;
}

@keyframes vitalmed-fade-in {
    from {
        opacity: 0.96;
        transform: translateX(8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes vitalmed-fade-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0.98;
        transform: translateX(-6px);
    }
}

@media (min-width: 768px) {
    body aside.hidden.md\:flex.bg-primary-dark {
        width: var(--vitalmed-sidebar-width) !important;
        min-width: var(--vitalmed-sidebar-width) !important;
        flex: 0 0 var(--vitalmed-sidebar-width) !important;
        padding-top: var(--vitalmed-sidebar-padding) !important;
        padding-bottom: var(--vitalmed-sidebar-padding) !important;
        view-transition-name: app-sidebar;
        contain: layout paint;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    body aside.hidden.md\:flex.bg-primary-dark > img {
        width: var(--vitalmed-sidebar-logo) !important;
        height: var(--vitalmed-sidebar-logo) !important;
    }

    body aside.hidden.md\:flex.bg-primary-dark > :not([hidden]) ~ :not([hidden]) {
        margin-top: var(--vitalmed-sidebar-outer-gap) !important;
    }

    body aside.hidden.md\:flex.bg-primary-dark > nav > :not([hidden]) ~ :not([hidden]) {
        margin-top: var(--vitalmed-sidebar-gap) !important;
    }

    body aside.hidden.md\:flex.bg-primary-dark nav > a:not(.hidden),
    body aside.hidden.md\:flex.bg-primary-dark nav > span:not(.hidden) {
        width: var(--vitalmed-sidebar-item) !important;
        height: var(--vitalmed-sidebar-item) !important;
        min-width: var(--vitalmed-sidebar-item) !important;
        min-height: var(--vitalmed-sidebar-item) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9999px;
    }

    body aside.hidden.md\:flex.bg-primary-dark nav i.text-xl {
        font-size: var(--vitalmed-sidebar-icon) !important;
        line-height: 1 !important;
    }

    ::view-transition-group(app-sidebar),
    ::view-transition-old(app-sidebar),
    ::view-transition-new(app-sidebar) {
        animation: none !important;
        mix-blend-mode: normal;
    }
}

body.dark .mobile-page-header {
    background-color: #111827 !important;
}

body.dark .mobile-page-header .text-indigo-900,
body.dark .mobile-page-header .text-slate-800 {
    color: #f8fafc !important;
}

body.dark .mobile-active {
    background-color: #4338ca !important;
}

@media (max-width: 767px) {
    html, body {
        height: 100dvh;
        overflow: hidden;
    }

    .desktop-page-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden !important;
    }

    .mobile-shell {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        background-color: var(--bg-body, #f1f5f9);
    }

    .mobile-page-header {
        position: sticky;
        top: 0;
        z-index: 40;
        flex-shrink: 0;
        padding-top: max(1rem, env(safe-area-inset-top));
        background-color: var(--surface-color, #ffffff) !important;
        border-color: var(--border-color, #cbd5e1) !important;
        backdrop-filter: blur(10px);
    }

    .mobile-page-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }

    .mobile-shell .fixed.bottom-20 {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
    }

    #menu-panel {
        z-index: 60 !important;
    }

    #menu-panel aside {
        width: var(--vitalmed-mobile-menu-width) !important;
        padding-top: max(1.5rem, env(safe-area-inset-top)) !important;
    }

    #menu-panel aside nav > a:not(.hidden),
    #menu-panel aside nav > span:not(.hidden) {
        width: var(--vitalmed-mobile-menu-item) !important;
        height: var(--vitalmed-mobile-menu-item) !important;
        min-width: var(--vitalmed-mobile-menu-item) !important;
        min-height: var(--vitalmed-mobile-menu-item) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #menu-panel aside nav i.text-xl {
        font-size: var(--vitalmed-sidebar-icon) !important;
        line-height: 1 !important;
    }

    #menu-panel aside nav > :not([hidden]) ~ :not([hidden]) {
        margin-top: var(--vitalmed-mobile-menu-gap) !important;
    }

    .mobile-shell .rounded-lg,
    .mobile-shell .rounded-xl {
        border-radius: 1rem;
    }

    .mobile-shell .shadow-sm,
    .mobile-shell .shadow-lg {
        box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
    }

    .mobile-page-content table {
        font-size: 0.85rem;
    }

    .mobile-page-content th,
    .mobile-page-content td {
        padding-top: 0.7rem !important;
        padding-bottom: 0.7rem !important;
    }

    .modal-content {
        max-height: calc(100dvh - 2rem) !important;
        margin: 1rem auto !important;
    }
}