@font-face {
    font-family: "Inter";
    src: url("fonts/inter/inter-variable-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("fonts/newsreader/newsreader-variable-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/cormorant-garamond/cormorant-garamond-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

/*
 * ClearPath visual foundation
 *
 * These tokens define the shared brand language for patient-facing
 * experiences, staff workflows, and administrative screens.
 */

:root {
    /* Brand colors */
    --clearpath-primary: #0e4242;
    --clearpath-primary-hover: #123838;
    --clearpath-primary-foreground: #fdfaf4;
    --clearpath-accent: #c2dedc;

    /* Surfaces */
    --clearpath-background: #f6f2ea;
    --clearpath-surface: #fdfaf4;
    --clearpath-muted-surface: #e9e4da;

    /* Text and borders */
    --clearpath-foreground: #211d17;
    --clearpath-muted-foreground: #59544e;
    --clearpath-border: #d5d0c7;

    /* Patient-readiness states */
    --clearpath-success-background: #c3f2d7;
    --clearpath-success-foreground: #004927;
    --clearpath-warning-background: #ffeaae;
    --clearpath-warning-foreground: #663e00;
    --clearpath-danger-background: #ffd6cf;
    --clearpath-danger-foreground: #861213;
    --clearpath-destructive: #cc2827;

    /* Typography */
    --clearpath-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --clearpath-font-sans: "Inter", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Shape and depth */
    --clearpath-radius-sm: 0.375rem;
    --clearpath-radius: 0.5rem;
    --clearpath-shadow-sm: 0 1px 3px rgb(0 0 0 / 10%),
    0 1px 2px -1px rgb(0 0 0 / 10%);

    /* Layout */
    --clearpath-content-width: 42rem;
    --clearpath-shell-width: 72rem;
}

/*
 * Base application treatment
 */

html,
body {
    background-color: var(--clearpath-background);
    color: var(--clearpath-foreground);
    font-family: var(--clearpath-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--clearpath-primary);
    font-family: var(--clearpath-font-serif);
    font-weight: 500;
}

a {
    color: var(--clearpath-primary);
}

a:hover {
    color: var(--clearpath-primary-hover);
}

/* LeptonX / Bootstrap brand integration */
:root {
    --bs-primary: #0e4242;
    --bs-primary-rgb: 14, 66, 66;

    --lpx-primary: #0e4242;
    --lpx-brand: #0e4242;
    --lpx-card-bg: #fdfaf4;
}

.lpx-content-container {
    background-color: var(--clearpath-background);
}

/*
 * Account pages
 *
 * LeptonX normally reserves a full card for tenant and language controls.
 * Tenant resolution now happens from the subdomain, so keep the language
 * picker accessible without leaving an empty card above the login form.
 */
.abp-account-layout .lpx-login-brand-text {
    height: auto;
    padding: 2.25rem 0 1.5rem;
}

.abp-account-layout .lpx-login-logo {
    width: 5.25rem;
    height: 5.25rem;
    background-image: url('/images/branding/clearpath-logo-transparent.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.abp-account-layout .lpx-login-name {
    margin-top: 0.5rem;
    color: var(--clearpath-primary);
    font-family: var(--clearpath-font-serif);
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1;
}

.abp-account-layout .lpx-login-brand-text + .card.mb-3 {
    position: fixed;
    z-index: 1050;
    top: 1.25rem;
    right: 1.5rem;
    width: auto;
    margin: 0 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.abp-account-layout .lpx-login-brand-text + .card.mb-3 > .card-body {
    padding: 0;
}

.abp-account-layout .lpx-login-brand-text + .card.mb-3 .align-items-start {
    margin: 0 !important;
}

.abp-account-layout .lpx-login-brand-text + .card.mb-3 .lpx-login-title,
.abp-account-layout .lpx-login-brand-text + .card.mb-3 hr {
    display: none;
}

.abp-account-layout .lpx-login-brand-text + .card.mb-3 .dropdown-toggle {
    padding: 0.5rem 0.75rem;
    color: var(--clearpath-primary);
    background-color: color-mix(in srgb, var(--clearpath-surface) 92%, transparent);
    border: 1px solid var(--clearpath-border);
    border-radius: var(--clearpath-radius);
    box-shadow: var(--clearpath-shadow-sm);
}

@media (max-width: 575.98px) {
    .abp-account-layout .lpx-login-brand-text + .card.mb-3 {
        top: 0.75rem;
        right: 0.75rem;
    }

    .abp-account-layout .lpx-login-brand-text {
        padding-top: 4.25rem;
    }
}

/* ClearPath buttons */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--clearpath-primary);
    --bs-btn-border-color: var(--clearpath-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0a3535;
    --bs-btn-hover-border-color: #0a3535;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #082f2f;
    --bs-btn-active-border-color: #082f2f;

    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--clearpath-primary);
    --bs-btn-disabled-border-color: var(--clearpath-primary);
    --bs-btn-disabled-opacity: 0.75;
}

.btn-primary.soft {
    --bs-btn-color: var(--clearpath-primary);
    --bs-btn-bg: var(--clearpath-accent);
    --bs-btn-border-color: transparent;

    --bs-btn-hover-color: var(--clearpath-primary);
    --bs-btn-hover-bg: #afd1cf;
    --bs-btn-hover-border-color: transparent;
}

/* LeptonX brand buttons */
.btn-brand {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--clearpath-primary);
    --bs-btn-border-color: var(--clearpath-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0a3535;
    --bs-btn-hover-border-color: #0a3535;
}

.btn-brand.soft {
    --bs-btn-color: var(--clearpath-primary);
    --bs-btn-bg: var(--clearpath-accent);
    --bs-btn-border-color: transparent;

    --bs-btn-hover-color: var(--clearpath-primary);
    --bs-btn-hover-bg: #afd1cf;
    --bs-btn-hover-border-color: transparent;
}

/* ClearPath cards and elevated surfaces */
.card {
    background-color: var(--clearpath-surface);
    border: 1px solid var(--clearpath-border);
    border-radius: 0.625rem;
    box-shadow: 0 2px 8px rgba(33, 29, 23, 0.04);
}

/* ClearPath staff-portal sidebar */
.lpx-sidebar,
.lpx-sidebar .lpx-logo-container,
.lpx-sidebar .lpx-nav-menu {
    background-color: var(--clearpath-primary);
}

.lpx-sidebar .lpx-menu-item-link {
    color: rgba(255, 255, 255, 0.72);
}

.lpx-sidebar .lpx-menu-item-link:hover {
    color: #ffffff;
    background-color: rgba(194, 222, 220, 0.12);
}

.lpx-sidebar .lpx-menu-item-link.selected,
.lpx-sidebar .lpx-menu-item-link.active {
    color: #ffffff;
    background-color: rgba(194, 222, 220, 0.20);
}

/* Sidebar icon states */
.lpx-sidebar .lpx-menu-item-link .lpx-menu-item-icon,
.lpx-sidebar .lpx-menu-item-link .lpx-icon {
    color: inherit;
}

.lpx-sidebar .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-sidebar .lpx-menu-item-link.selected .lpx-icon,
.lpx-sidebar .lpx-menu-item-link.active .lpx-menu-item-icon,
.lpx-sidebar .lpx-menu-item-link.active .lpx-icon {
    color: #ffffff;
}

.lpx-sidebar .menu-collapse-icon {
    color: rgba(255, 255, 255, 0.58);
}

/* Environment and release identity */
.lpx-sidebar .lpx-nav {
    padding-bottom: 4.5rem;
}

.lpx-sidebar .clearpath-build-info {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.65rem 1rem;
    color: rgba(255, 255, 255, 0.72);
    background: color-mix(in srgb, var(--clearpath-primary) 88%, #000000);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.68rem;
    line-height: 1.25;
}

.lpx-sidebar .clearpath-build-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lpx-sidebar .clearpath-version {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lpx-sidebar .clearpath-environment {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
}

.lpx-sidebar .clearpath-environment-dot {
    width: 0.45rem;
    height: 0.45rem;
    background: #55c987;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(85, 201, 135, 0.14);
}

.lpx-sidebar .clearpath-environment.staging
.clearpath-environment-dot {
    background: #e6b84c;
    box-shadow: 0 0 0 2px rgba(230, 184, 76, 0.14);
}

.lpx-sidebar .clearpath-build-number {
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
}

.hover-trigger .lpx-sidebar-container:not(:hover)
.clearpath-build-info {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    text-align: center;
}

.hover-trigger .lpx-sidebar-container:not(:hover)
.clearpath-build-primary {
    justify-content: center;
}

.hover-trigger .lpx-sidebar-container:not(:hover)
.clearpath-environment,
.hover-trigger .lpx-sidebar-container:not(:hover)
.clearpath-build-number {
    display: none;
}

/* Override LeptonX's dark menu-list background */
.lpx-sidebar .lpx-nav .lpx-nav-menu {
    background-color: var(--clearpath-primary);
}

/* Override LeptonX's dark menu-list background */
.lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu {
    background-color: var(--clearpath-primary);
}

/* Nested sidebar menu states */
.lpx-sidebar .lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link.selected,
.lpx-sidebar .lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link.active {
    color: #ffffff;
    background-color: rgba(194, 222, 220, 0.20);
}

.lpx-sidebar .lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link:hover {
    color: #ffffff;
    background-color: rgba(194, 222, 220, 0.12);
}

/* ClearPath pagination */
.pagination .page-item .page-link {
    color: var(--clearpath-primary);
}

.pagination .page-item.active .page-link {
    color: #ffffff !important;
    background-color: var(--clearpath-primary) !important;
    border-color: var(--clearpath-primary) !important;
}

.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    color: var(--clearpath-primary);
    background-color: var(--clearpath-accent);
    border-color: var(--clearpath-accent);
}

/* ClearPath form controls */
.form-control,
.form-select {
    color: var(--clearpath-foreground);
    background-color: var(--clearpath-surface);
    border-color: var(--clearpath-border);
}

.form-control::placeholder {
    color: var(--clearpath-muted-foreground);
    opacity: 0.72;
}

.form-control:focus,
.form-select:focus {
    color: var(--clearpath-foreground);
    background-color: var(--clearpath-surface);
    border-color: var(--clearpath-primary);
    box-shadow: 0 0 0 0.2rem rgba(14, 66, 66, 0.12);
}

/* DataTables page-size selector */
.dt-container .dt-length select {
    color: var(--clearpath-foreground);
    background-color: var(--clearpath-surface);
    border-color: var(--clearpath-border);
}

.dt-container .dt-length select:focus {
    border-color: var(--clearpath-primary);
    box-shadow: 0 0 0 0.2rem rgba(14, 66, 66, 0.12);
}

/* ClearPath tab and pill navigation */
.nav-pills .nav-link {
    color: var(--clearpath-muted-foreground);
}

.nav-pills .nav-link:hover {
    color: var(--clearpath-primary);
    background-color: rgba(194, 222, 220, 0.12);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--clearpath-primary);
    background-color: var(--clearpath-accent);
}

/* ClearPath checkbox and radio controls */
.form-check-input {
    background-color: var(--clearpath-surface) !important;
    border-color: var(--clearpath-border) !important;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--clearpath-primary) !important;
    border-color: var(--clearpath-primary) !important;
}

.form-check-input:focus {
    border-color: var(--clearpath-primary);
    box-shadow: 0 0 0 0.2rem rgba(14, 66, 66, 0.12);
}

/* ClearPath outline-primary buttons */
.btn-outline-primary {
    --bs-btn-color: var(--clearpath-primary);
    --bs-btn-border-color: var(--clearpath-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--clearpath-primary);
    --bs-btn-hover-border-color: var(--clearpath-primary);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0a3535;
    --bs-btn-active-border-color: #0a3535;

    --bs-btn-disabled-color: var(--clearpath-primary);
    --bs-btn-disabled-border-color: var(--clearpath-primary);
}

/* ClearPath secondary buttons */
.btn-secondary {
    --bs-btn-color: var(--clearpath-primary);
    --bs-btn-bg: var(--clearpath-muted-surface);
    --bs-btn-border-color: var(--clearpath-border);

    --bs-btn-hover-color: var(--clearpath-primary);
    --bs-btn-hover-bg: var(--clearpath-accent);
    --bs-btn-hover-border-color: var(--clearpath-primary);

    --bs-btn-active-color: var(--clearpath-primary);
    --bs-btn-active-bg: #afd1cf;
    --bs-btn-active-border-color: var(--clearpath-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--clearpath-muted-foreground);
    --bs-btn-border-color: var(--clearpath-border);

    --bs-btn-hover-color: var(--clearpath-primary);
    --bs-btn-hover-bg: var(--clearpath-muted-surface);
    --bs-btn-hover-border-color: var(--clearpath-primary);

    --bs-btn-active-color: var(--clearpath-primary);
    --bs-btn-active-bg: var(--clearpath-accent);
    --bs-btn-active-border-color: var(--clearpath-primary);
}

/* ClearPath modal surfaces */
.modal-content {
    color: var(--clearpath-foreground);
    background-color: var(--clearpath-surface);
    border: 1px solid var(--clearpath-border);
    box-shadow: 0 16px 48px rgba(33, 29, 23, 0.16);
}

.modal-header,
.modal-footer {
    border-color: var(--clearpath-border);
}

.modal-title {
    color: var(--clearpath-primary);
}

/* ClearPath horizontal tabs */
.nav-tabs .nav-link {
    color: var(--clearpath-muted-foreground);
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--clearpath-primary);
    border-color: transparent transparent var(--clearpath-accent);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--clearpath-primary);
    background-color: transparent;
    border-color: transparent transparent var(--clearpath-primary);
}

.nav-tabs .nav-item .nav-link.active {
    color: var(--clearpath-primary);
    background-color: transparent;
    border-color: transparent transparent var(--clearpath-primary);
}

/* ClearPath dropdown menus */
.dropdown-menu {
    --bs-dropdown-bg: var(--clearpath-surface);
    --bs-dropdown-color: var(--clearpath-foreground);
    --bs-dropdown-border-color: var(--clearpath-border);

    --bs-dropdown-link-color: var(--clearpath-foreground);
    --bs-dropdown-link-hover-color: var(--clearpath-primary);
    --bs-dropdown-link-hover-bg: var(--clearpath-muted-surface);

    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-link-active-bg: var(--clearpath-primary);

    box-shadow: 0 8px 24px rgba(33, 29, 23, 0.12);
}

/* ClearPath sidebar brand */
.lpx-sidebar .lpx-brand-logo {
    display: block;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    background-image: url('/images/branding/clearpath-logo-transparent.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

.lpx-sidebar .lpx-logo-container > a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 2rem;
    text-decoration: none;
}

.lpx-sidebar .lpx-brand-name {
    position: static;
    width: auto;
    height: auto;
    background: transparent;

    color: var(--clearpath-primary-foreground);
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    letter-spacing: -0.025em;
}

/* Highlight only the selected leaf page, not its parent path */
.lpx-sidebar li:has(> .lpx-inner-menu) > .lpx-menu-item-link.selected {
    color: rgba(255, 255, 255, 0.72);
    background-color: transparent;
}

.lpx-sidebar li:has(> .lpx-inner-menu) > .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-sidebar li:has(> .lpx-inner-menu) > .lpx-menu-item-link.selected .lpx-icon {
    color: inherit;
}

.lpx-sidebar li:has(> .lpx-inner-menu) > .lpx-menu-item-link.selected:hover {
    color: #ffffff;
    background-color: rgba(194, 222, 220, 0.12);
}

/* Remove highlighting from selected nested parent groups */
.lpx-sidebar .lpx-nav-menu
.lpx-inner-menu-item:has(> .lpx-inner-menu)
> .lpx-menu-item-link.selected {
    color: rgba(255, 255, 255, 0.72);
    background-color: transparent;
}

.lpx-sidebar .lpx-nav-menu
.lpx-inner-menu-item:has(> .lpx-inner-menu)
> .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-sidebar .lpx-nav-menu
.lpx-inner-menu-item:has(> .lpx-inner-menu)
> .lpx-menu-item-link.selected .lpx-icon {
    color: inherit;
}

/*
 * Safari 26 derives its dark-mode browser tint from the page background
 * instead of reliably honoring the theme-color metadata.
 */
html,
body {
    background-color: var(--clearpath-primary);
}

/* Responsive ClearPath header and wordmark */
.lpx-mobile-navbar-container,
.lpx-mobile-navbar {
    background-color: #0e4242 !important;
}

.lpx-mobile-navbar .lpx-logo-container,
.lpx-mobile-navbar .lpx-logo-container > a,
.lpx-mobile-navbar .lpx-brand-name {
    background: transparent !important;
}

.lpx-mobile-navbar .lpx-brand-logo {
    display: none !important;
}

.lpx-mobile-navbar .lpx-logo-container > a {
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}

.lpx-mobile-navbar .lpx-brand-name {
    position: static !important;
    left: auto !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 2.35rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em;
    color: #fdfaf4 !important;
    overflow: visible !important;
}

/* Responsive navigation menu */
#mobile-navbar,
.lpx-mobile-nav-items {
    background-color: #0e4242 !important;
}

#mobile-navbar .lpx-menu-item,
#mobile-navbar .lpx-menu-item-link {
    background-color: transparent !important;
    color: #c2dedc !important;
}

#mobile-navbar .lpx-menu-item-link:hover,
#mobile-navbar .lpx-menu-item-link:focus {
    background-color: rgba(194, 222, 220, 0.14) !important;
    color: #fdfaf4 !important;
}

/* Responsive user menu */
#mobile-user-menu-group,
.lpx-mobile-navbar-container .user-menu-groups {
    background-color: #0e4242 !important;
    color: #fdfaf4 !important;
}

#mobile-user-menu-group a,
#mobile-user-menu-group .dropdown-item {
    background-color: transparent !important;
    color: #c2dedc !important;
}

#mobile-user-menu-group a:hover,
#mobile-user-menu-group a:focus,
#mobile-user-menu-group .dropdown-item:hover,
#mobile-user-menu-group .dropdown-item:focus {
    background-color: rgba(194, 222, 220, 0.14) !important;
    color: #fdfaf4 !important;
}

/* Let the footer follow page content on responsive screens */
@media (max-width: 991.98px) {
    .lpx-footbar-container,
    .lpx-footbar-container footer,
    .lpx-footbar {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        transform: none !important;
    }
}