html {
    font-size: 14px;
}

/* Offset the fixed subnav by the top bar height computed at runtime */
:root {
    --top-nav-h: 56px;
    --bs-body-font-family: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Cantarell", "Noto Sans", sans-serif, "BlinkMacSystemFont", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* fallback */
#subNav.fixed-top {
    top: var(--top-nav-h);
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: var(--bs-body-font-family);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Outstanding Invoices — overdue colour coding */
.overdue-60-row {
    background-color: #ffe0b2 !important; /* orange tint */
}

.overdue-120-row {
    background-color: #d7cdd8 !important; /* muted dark */
}

.bg-orange {
    background-color: #fd7e14 !important;
    color: #fff !important;
}


/* Global theme overrides (Bootstrap 5.2) */
:root {
    /* Brand palette */
    --bs-primary: #00325f;
    --bs-primary-rgb: 0, 50, 95;
    --bs-secondary: #841d67;
    --bs-secondary-rgb: 132, 29, 103;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-info: #17809e;
    --bs-info-rgb: 23, 128, 158;
    --bs-warning: #FFC107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger: #db092e;
    --bs-danger-rgb: 219, 9, 46;
    --bs-light: #F8F9FA;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    /* Extended brand tokens */
    --ei-purple: #0D053E;
    --ei-purple-rgb: 13, 5, 62;
    /* Body + links (optional) */
    --bs-body-bg: #ffffff;
    --bs-body-color: #1f2937;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #841d67;
}

/* Navbar tuning (optional; affects default .navbar) */
.navbar {
    /* Adjust these to suit your palette/background */
    --bs-navbar-color: rgba(0, 0, 0, 0.65);
    --bs-navbar-hover-color: rgba(0, 0, 0, 0.85);
    --bs-navbar-brand-color: var(--bs-navbar-color);
    --bs-navbar-brand-hover-color: var(--bs-navbar-hover-color);
    --bs-navbar-active-color: var(--bs-primary);
    /* Toggler icon contrast */
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.15);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* If you want the tertiary background used in your layout a bit custom */
:root {
    --bs-tertiary-bg: #f2f4f7; /* affects .bg-body-tertiary */
}

/* Button overrides — Primary */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary), black 12%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary), black 14%);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary), black 18%);
    --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary), black 20%);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Button overrides — Secondary */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in oklab, var(--bs-secondary), black 12%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-secondary), black 14%);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in oklab, var(--bs-secondary), black 18%);
    --bs-btn-active-border-color: color-mix(in oklab, var(--bs-secondary), black 20%);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* Button overrides — Info */
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in oklab, var(--bs-info), black 12%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-info), black 14%);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in oklab, var(--bs-info), black 18%);
    --bs-btn-active-border-color: color-mix(in oklab, var(--bs-info), black 20%);
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
    --bs-btn-disabled-color: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

/* ── Purple utility classes (mirrors Bootstrap naming) ── */
.text-purple {
    color: var(--ei-purple) !important;
}

.bg-purple {
    background-color: var(--ei-purple) !important;
}

.border-purple {
    border-color: var(--ei-purple) !important;
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ei-purple);
    --bs-btn-border-color: var(--ei-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in oklab, var(--ei-purple), black 12%);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--ei-purple), black 14%);
    --bs-btn-focus-shadow-rgb: var(--ei-purple-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in oklab, var(--ei-purple), black 18%);
    --bs-btn-active-border-color: color-mix(in oklab, var(--ei-purple), black 20%);
    --bs-btn-disabled-bg: var(--ei-purple);
    --bs-btn-disabled-border-color: var(--ei-purple);
}

.btn-outline-purple {
    --bs-btn-color: var(--ei-purple);
    --bs-btn-border-color: var(--ei-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ei-purple);
    --bs-btn-hover-border-color: var(--ei-purple);
    --bs-btn-focus-shadow-rgb: var(--ei-purple-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ei-purple);
    --bs-btn-active-border-color: var(--ei-purple);
    --bs-btn-disabled-color: var(--ei-purple);
    --bs-btn-disabled-border-color: var(--ei-purple);
}

.container-fluid.px-4 {
    max-width: 100% !important;
}

/* Hero banner – full background image */
.hero-banner {
    background: url('~/images/unlocking_lnnovation_bg.png') center / cover no-repeat;
    color: #fff;
}

    /* Lead headline strip */
    .hero-banner .hero-lead-text {
        background-color: var(--bs-secondary);
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 0rem;
    }

    /* Frosted translucent box for body text */
    .hero-banner .hero-body-text {
        background-color: rgba(var(--ei-purple-rgb), 0.75);
        backdrop-filter: blur(4px);
        border-radius: 0.375rem;
        padding: 1rem 1.25rem;
    }