/* Wellficient RD brand layer.
   Loaded after Bootstrap and style.css. Colors, fonts and the navbar lockup
   only. No sizes, spacing or layout change here, so every screen keeps its
   shape and every button stays where it was. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Lexend";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/lexend-latin.woff2") format("woff2");
}

:root {
    --wf-navy: #0A1B3D;
    --wf-blue: #2F80FF;          /* logo, dots, small accents only */
    --wf-action: #1F66E0;        /* buttons and fills: 5.2:1 with white */
    --wf-action-hover: #1A57BF;
    --wf-action-active: #1852B3;
    --wf-link: #1A5BCC;          /* text links: 5.7:1 on the page, 4.9:1 on a striped row */
    --wf-link-hover: #15489F;
    --wf-muted: #5B6680;         /* 5.3:1 on the page */
    --wf-page: #F4F6FA;
    --wf-head: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --wf-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --bs-body-font-family: var(--wf-text);
    --bs-body-color: #14213D;
    --bs-body-color-rgb: 20, 33, 61;
    --bs-emphasis-color: #0A1B3D;
    --bs-secondary-color: #5B6680;
    --bs-secondary-color-rgb: 91, 102, 128;
    --bs-primary: #1F66E0;
    --bs-primary-rgb: 31, 102, 224;
    --bs-primary-text-emphasis: #0C2A5E;
    --bs-primary-bg-subtle: #D6E3FA;
    --bs-primary-border-subtle: #ADC6F3;
    --bs-link-color: #1A5BCC;
    --bs-link-color-rgb: 26, 91, 204;
    --bs-link-hover-color: #15489F;
    --bs-link-hover-color-rgb: 21, 72, 159;
    --bs-focus-ring-color: rgba(31, 102, 224, .25);
    --bs-border-color: #DCE2EC;
}

body { background-color: var(--wf-page); letter-spacing: -0.011em; }   /* Inter's own text tracking */

/* Headings take the brand face at their existing sizes. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--wf-head);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--wf-navy);
}
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4 { color: inherit; }

/* Row tracking colors (PCC-style line lock) keep the same strength, brand tint. */
.table { --bs-table-hover-bg: #D6E3FA; }

/* ---- Navbar: navy bar, reversed lockup ---- */
.wf-navbar {
    background-color: var(--wf-navy);
    --bs-navbar-color: rgba(255, 255, 255, .78);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}
.wf-navbar .nav-link.active { font-weight: 500; }

/* Lockup: mark + "Wellficient" wordmark + RD badge (same as the website app frame).
   Height stays inside the old brand line (30px), so the bar keeps its height. */
.wf-brand { display: inline-flex; align-items: center; gap: 10px; line-height: 1; height: 40px; margin-right: 12px; padding-top: 0; padding-bottom: 0; }
.wf-brand .wf-mark { display: block; width: 36px; height: 36px; }
.wf-brand .wf-word { display: block; height: 22px; width: auto; }
.wf-badge {
    display: inline-block;
    font-family: var(--wf-head); font-weight: 700; font-size: 12px; line-height: 1;
    letter-spacing: .02em; color: #fff; background: var(--wf-blue);
    border-radius: 4px; padding: 4px 5px 3px;
}
.wf-brand .wf-badge { font-size: 16.5px; padding: 4.5px 6px 3.5px; border-radius: 5px; margin-left: -3px; }

/* ---- Bootstrap components that hard-code the old blue ---- */
.btn-primary {
    --bs-btn-bg: #1F66E0;
    --bs-btn-border-color: #1F66E0;
    --bs-btn-hover-bg: #1A57BF;
    --bs-btn-hover-border-color: #1852B3;
    --bs-btn-focus-shadow-rgb: 65, 125, 229;
    --bs-btn-active-bg: #1852B3;
    --bs-btn-active-border-color: #164DA8;
    --bs-btn-disabled-bg: #1F66E0;
    --bs-btn-disabled-border-color: #1F66E0;
}
.btn-outline-primary {
    --bs-btn-color: #1F66E0;
    --bs-btn-border-color: #1F66E0;
    --bs-btn-hover-bg: #1F66E0;
    --bs-btn-hover-border-color: #1F66E0;
    --bs-btn-focus-shadow-rgb: 31, 102, 224;
    --bs-btn-active-bg: #1F66E0;
    --bs-btn-active-border-color: #1F66E0;
    --bs-btn-disabled-color: #1F66E0;
    --bs-btn-disabled-border-color: #1F66E0;
}
.btn-link { --bs-btn-color: #1A5BCC; --bs-btn-hover-color: #15489F; --bs-btn-active-color: #15489F; }
.list-group { --bs-list-group-active-bg: #1F66E0; --bs-list-group-active-border-color: #1F66E0; }
.nav-pills { --bs-nav-pills-link-active-bg: #1F66E0; }
.nav-tabs { --bs-nav-tabs-link-active-color: #0A1B3D; }
.dropdown-menu { --bs-dropdown-link-active-bg: #1F66E0; }
.pagination {
    --bs-pagination-color: #1A5BCC;
    --bs-pagination-hover-color: #15489F;
    --bs-pagination-focus-color: #15489F;
    --bs-pagination-active-bg: #1F66E0;
    --bs-pagination-active-border-color: #1F66E0;
}
.progress, .progress-stacked { --bs-progress-bar-bg: #1F66E0; }
.badge.bg-secondary { background-color: #5B6680 !important; }   /* facility codes: 6.0:1 */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #8FB2F0;
    box-shadow: 0 0 0 .25rem rgba(31, 102, 224, .25);
}
.form-check-input:checked { background-color: #1F66E0; border-color: #1F66E0; }

/* ---- Login ---- */
.wf-login-title { line-height: 1.2; }
.wf-login-title .wf-l1, .wf-login-title .wf-l2 {
    display: flex; align-items: center; justify-content: center; height: 1.2em;
}
.wf-login-title .wf-l1 { align-items: flex-start; }
.wf-login-title .wf-l1 img { display: block; width: 30px; height: 30px; }
.wf-login-title .wf-l2 { gap: 8px; align-items: flex-end; padding-bottom: 2px; }
.wf-login-title .wf-l2 img { display: block; height: 24px; width: auto; }
.wf-login-title .wf-badge { font-size: 13.5px; padding: 4px 5px 3px; border-radius: 4.5px; margin-bottom: 2px; }