/* ==============================================================================
   GLOBAL EXTENSION & FALLBACK STYLES
   ============================================================================== */

:root {
    --bs-primary: #2C5784;
    --bs-primary-rgb: 44, 87, 132;
    --bs-secondary: #568F87;
    --bs-secondary-rgb: 86, 143, 135;
    --bs-body-font-family: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    background-color: #fcfdff;
    color: #333d47;
}

/* Fix Vue modal scroll lock */
.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f4f8;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Vendor theme hardcodes min-height:1900px on .content-page when the sidebar
   is collapsed (data-sidenav-size="condensed") — presumably sized for its own
   demo pages. On our real pages (most are shorter than 1900px) this leaves a
   large empty area below the content and stretches the whole page. Match the
   same viewport-based min-height used in the non-condensed state instead. */
html[data-sidenav-size='condensed'] .content-page {
    min-height: calc(100vh - calc(var(--theme-topbar-height) + 1px));
}