/*
 * FGBC theme overrides for the staff/admin layout.
 *
 * The old wwwroot/css/style.css was a Bootstrap 4.3.1 build recompiled with FGBC's brand palette
 * and typography, plus a block of hand-written overrides. Bootstrap itself now comes from
 * wwwroot/lib/bootstrap5 (stock), so everything that made that build *FGBC's* has to live here.
 * Load this AFTER Bootstrap so the overrides win.
 *
 * Reference for anything below marked "production": the old build is recoverable with
 *   git show 22c35f8:wwwroot/css/style.css
 * which is still what acts.floridagreenbuilding.org serves until this branch deploys.
 *
 * Where Bootstrap 5 renamed or restructured a component, the BS5 form is used and the old BS4
 * selector is noted alongside it.
 */

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

/* ---- Brand palette --------------------------------------------------- */

/*
 * The BS4 build was compiled with these as Sass $theme-colors, so every .bg-*, .text-*,
 * .border-* and .table-* utility carried them. Stock BS5 ships Bootstrap's own palette, which is
 * why the staff UI drifted to #0d6efd blue. Setting the RGB triples restores the utilities;
 * components that hardcode their own values are handled further down.
 *
 * .btn-primary is deliberately absent: site.css pins it to #1b6ec2 and loads after this file,
 * which was equally true in production, so it already matches.
 */
:root {
    --bs-primary: #003149;
    --bs-primary-rgb: 0, 49, 73;
    --bs-secondary: #BBBAB9;
    --bs-secondary-rgb: 187, 186, 185;
    --bs-success: #29ACB9;
    --bs-success-rgb: 41, 172, 185;
    --bs-info: #2D7CB7;
    --bs-info-rgb: 45, 124, 183;
    --bs-warning: #EABD26;
    --bs-warning-rgb: 234, 189, 38;
    --bs-danger: #C73F33;
    --bs-danger-rgb: 199, 63, 51;
    --bs-light: #ecf0f1;
    --bs-light-rgb: 236, 240, 241;
    --bs-dark: #7b8a8b;
    --bs-dark-rgb: 123, 138, 139;
}

/*
 * BS5 builds every .btn-* variant from local custom properties holding literal colours, so the
 * theme variables above do not reach them. Only the variants the staff views actually use are
 * listed; `grep -rho 'btn-outline-[a-z]*' Views Areas/Admin` if that changes.
 *
 * .btn-primary is not here on purpose — site.css pins it to #1b6ec2 and loads last, in production
 * too, so it already matches.
 */
.btn-outline-primary {
    --bs-btn-color: #003149;
    --bs-btn-border-color: #003149;
    --bs-btn-hover-bg: #003149;
    --bs-btn-hover-border-color: #003149;
    --bs-btn-active-bg: #003149;
    --bs-btn-active-border-color: #003149;
    --bs-btn-disabled-color: #003149;
    --bs-btn-disabled-border-color: #003149;
    --bs-btn-focus-shadow-rgb: 0, 49, 73;
}

.btn-outline-info {
    --bs-btn-color: #2D7CB7;
    --bs-btn-border-color: #2D7CB7;
    --bs-btn-hover-bg: #2D7CB7;
    --bs-btn-hover-border-color: #2D7CB7;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2D7CB7;
    --bs-btn-active-border-color: #2D7CB7;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #2D7CB7;
    --bs-btn-disabled-border-color: #2D7CB7;
    --bs-btn-focus-shadow-rgb: 45, 124, 183;
}

.btn-outline-danger {
    --bs-btn-color: #C73F33;
    --bs-btn-border-color: #C73F33;
    --bs-btn-hover-bg: #C73F33;
    --bs-btn-hover-border-color: #C73F33;
    --bs-btn-active-bg: #C73F33;
    --bs-btn-active-border-color: #C73F33;
    --bs-btn-disabled-color: #C73F33;
    --bs-btn-disabled-border-color: #C73F33;
    --bs-btn-focus-shadow-rgb: 199, 63, 51;
}

.btn-secondary {
    --bs-btn-bg: #BBBAB9;
    --bs-btn-border-color: #BBBAB9;
    --bs-btn-hover-bg: #aeadac;
    --bs-btn-hover-border-color: #aeadac;
    --bs-btn-active-bg: #aeadac;
    --bs-btn-active-border-color: #aeadac;
    --bs-btn-disabled-bg: #BBBAB9;
    --bs-btn-disabled-border-color: #BBBAB9;
    --bs-btn-focus-shadow-rgb: 187, 186, 185;
}

/* ---- Typography ------------------------------------------------------ */

/*
 * Production body copy is Lato at 0.9375rem. Stock BS5 is the system stack at 1rem, which is what
 * makes the new pages read slightly wider and softer than the live site.
 */
body {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.9375rem;
}

/*
 * BS4 headings were a fixed scale; BS5 makes h1–h3 fluid (calc + vw), which renders them smaller
 * than production at every desktop width — h2 is the page title on nearly every staff screen, and
 * came out ~34px against production's 40px. Restoring the fixed scale. Note h4/h5 go *down*: the
 * BS4 scale is smaller there, and those are the sizes the scoring tables were built against.
 */
h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2.5rem; }
h3, .h3 { font-size: 2rem; }
h4, .h4 { font-size: 1.40625rem; }
h5, .h5 { font-size: 1.171875rem; }

/* ---- Navbar ---------------------------------------------------------- */

.bg-primary .navbar-nav .active > .nav-link {
    color: #29ACB9 !important;
}

.bg-dark.navbar-dark .navbar-nav .active > .nav-link {
    color: #29ACB9 !important;
}

/* ---- Buttons and badges ---------------------------------------------- */

.btn-secondary,
.btn-secondary:hover,
.btn-warning,
.btn-warning:hover {
    color: #fff;
}

/*
 * BS4 was .badge-secondary / .badge-warning. In BS5 the colour comes from a separate .bg-* utility,
 * and .badge no longer forces a readable foreground on every variant — which is what made the
 * "Archived" badge unreadable on 2026-07-28. Restoring it here means `badge bg-secondary` is legible
 * without an explicit text utility.
 */
.badge.bg-secondary,
.badge.bg-warning {
    color: #fff;
}

/*
 * ...but white on the brand secondary is not legible either: --bs-secondary is #BBBAB9, a light
 * grey, so `badge bg-secondary` came out at roughly 1.8:1. The variable itself has to stay as it is
 * — .table-secondary below is built on that same light grey — so the darker background is scoped to
 * the badge. #6c757d is BS5's own stock secondary and clears AA at 4.7:1.
 *
 * Two class selectors, so this outranks the single-class .bg-secondary utility it overrides.
 */
.badge.bg-secondary {
    background-color: #6c757d !important;
}

/* ---- Tables ---------------------------------------------------------- */

/*
 * BS4 coloured a contextual row by setting background-color on the tr and its th/td. BS5 drives it
 * from --bs-table-bg on the row and paints cells with an inset box-shadow, so the old
 * `.table-light > td { background-color }` form is inert — it is overpainted by the shadow.
 * That is why the FGBC Home Score banding vanished. These set the BS5 variables instead.
 *
 * Two consequences worth knowing:
 *   - `bg-light` on a <tr> no longer does anything at all; the row class must be `table-light`.
 *   - .table-light is #ecf0f1 here, not BS5's near-white #f8f9fa. That blue-grey is the shading
 *     on every scoring table and report header on the live site.
 */
.table-primary  { --bs-table-color: #fff; --bs-table-bg: #003149; --bs-table-hover-bg: #002030; }
.table-secondary{ --bs-table-color: #fff; --bs-table-bg: #BBBAB9; --bs-table-hover-bg: #aeadac; }
.table-success  { --bs-table-color: #fff; --bs-table-bg: #29ACB9; --bs-table-hover-bg: #2499a4; }
.table-info     { --bs-table-color: #fff; --bs-table-bg: #2D7CB7; --bs-table-hover-bg: #286ea3; }
.table-warning  { --bs-table-color: #fff; --bs-table-bg: #EABD26; --bs-table-hover-bg: #e1b216; }
.table-danger   { --bs-table-color: #fff; --bs-table-bg: #C73F33; --bs-table-hover-bg: #b3392e; }
.table-light    { --bs-table-color: #212529; --bs-table-bg: #ecf0f1; --bs-table-hover-bg: #dde4e6; }
.table-dark     { --bs-table-color: #fff; --bs-table-bg: #7b8a8b; --bs-table-hover-bg: #6f7d7e; }

.table-active {
    --bs-table-bg: rgba(0, 0, 0, 0.075);
}

/* ---- Tabs ------------------------------------------------------------ */

/*
 * The project Details/Edit tab strip is the densest navigation in the app (up to 13 tabs), so it
 * takes a size and contrast bump over BS5's defaults: 1.0625rem rather than inheriting body copy,
 * and a darker blue than the #0366d6 site.css gives links generally. Borders move from BS5's
 * #dee2e6 to #c7ced3 so the tab shape reads against the panel.
 */
.nav-tabs {
    --bs-nav-tabs-border-color: #c7ced3;
    --bs-nav-tabs-link-hover-border-color: #e3e7ea #e3e7ea #c7ced3;
    --bs-nav-tabs-link-active-color: #212529;
    --bs-nav-tabs-link-active-border-color: #c7ced3 #c7ced3 #fff;
}

.nav-tabs .nav-item .nav-link {
    padding: .5rem 1rem;
    font-size: 1.0625rem;
    color: #0a4fa8;
}

.nav-tabs .nav-item .nav-link:hover {
    color: #063a7d;
}

.nav-tabs .nav-item .nav-link.active {
    color: #212529;
}

.tab-content {
    border-right: 1px solid #c7ced3;
    border-left: 1px solid #c7ced3;
    border-bottom: 1px solid #c7ced3;
}

/* ---- Forms and validation -------------------------------------------- */

/*
 * Production sets `label { font-weight: bolder }` globally — this is what gives every search and
 * edit form its bold field labels. It was missed when these overrides were split out of style.css.
 */
label {
    font-weight: bolder;
}

label.radio::after {
    content: "";
}

label.required::after {
    content: ": *";
    color: #C73F33;
}

input.input-validation-error {
    border-color: #C73F33;
}

/* ---- jQuery autocomplete widget -------------------------------------- */

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

.autocomplete-group strong {
    display: block;
    border-bottom: 1px solid #000;
}

/* ---- Pagination ------------------------------------------------------ */

.pagination a:hover {
    text-decoration: none;
}

#EnrollmentWizard.pagination .page-link {
    pointer-events: none;
}

/* ---- Modal close button ---------------------------------------------- */

/*
 * BS4's .close was a text "×" whose colour these rules set. BS5's .btn-close is a background image
 * tinted via filter, so the old colour rules no longer apply; opacity is the equivalent lever.
 */
.btn-close:hover,
.btn-close:focus {
    opacity: 1;
}

/* ---- DataTables ------------------------------------------------------ */

.dt-buttons {
    text-align: right;
}

/* ---- Guides ---------------------------------------------------------- */

/*
 * Admin > Guides. Long-form prose, which the rest of the staff UI has none of — these rules give
 * it a readable measure and enough structure to scan. Scoped to .guide-page so nothing here can
 * reach the data screens.
 */

.guide-page {
    max-width: 62rem;
}

.guide-page .guide-header {
    border-bottom: 3px solid var(--bs-primary);
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}

.guide-page .guide-header h2 {
    margin-bottom: 0;
}

.guide-page .guide-eyebrow {
    color: #29ACB9;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .75rem;
    margin-bottom: .25rem;
}

.guide-page .guide-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
    border-left: 4px solid #29ACB9;
    padding-left: 1rem;
    margin-bottom: 2rem;
}

.guide-page h4 {
    color: var(--bs-primary);
    margin-top: 2.25rem;
    margin-bottom: .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #dee2e6;
}

/* Step headings carry their number in a brand chip rather than in the text. */
.guide-page h4 .guide-step {
    display: inline-block;
    min-width: 1.75rem;
    margin-right: .5rem;
    padding: 0 .45rem;
    border-radius: .25rem;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: .9rem;
    line-height: 1.6;
    text-align: center;
    vertical-align: .1em;
}

.guide-page p,
.guide-page li {
    line-height: 1.65;
}

.guide-page ul {
    margin-bottom: 1rem;
}

.guide-page li {
    margin-bottom: .35rem;
}

.guide-page .guide-table thead th {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    font-weight: 700;
}

.guide-page .guide-table tbody tr:nth-child(odd) td {
    background-color: #f7f9fa;
}

.guide-page .guide-table td,
.guide-page .guide-table th {
    vertical-align: top;
}

/* Index cards */

.guide-card {
    border-top: 3px solid var(--bs-primary);
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.guide-card:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 49, 73, .12);
    transform: translateY(-2px);
}

.guide-card .card-title a {
    text-decoration: none;
}

/* ---- What's New ------------------------------------------------------ */

/*
 * Admin > What's New. Reuses .guide-page for the measure and the header, and adds the release
 * entry: a date badge sitting beside its heading, and a rule down the left so a long list still
 * reads as separate releases when scrolled.
 */

.whats-new-page .release {
    border-left: 3px solid #dee2e6;
    padding-left: 1.25rem;
    margin-bottom: 2.5rem;
}

.whats-new-page .release:first-of-type {
    border-left-color: var(--bs-primary);
}

.whats-new-page .release-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* The h4 carries the guide rules otherwise, which put a rule under every heading. */
.whats-new-page .release-head h4 {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    flex: 1 1 20rem;
}

.whats-new-page .release-date {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 1rem;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* Superseded releases keep the badge shape but drop out of the brand colour. */
.whats-new-page .release:not(:first-of-type) .release-date {
    background-color: #6c757d;
}

.whats-new-page .release code {
    background-color: #f1f3f5;
    padding: .05rem .3rem;
    border-radius: .2rem;
    color: #b02a37;
}