/* ===== High Rock Risk theme ===== */
:root {
    --hrr-navy: #1b2a41;
    --hrr-slate: #2c3e50;
    --hrr-steel: #33628f;
    --hrr-accent: #c8992e; /* warm gold accent */
    --hrr-accent-dark: #a87f22;
    --hrr-light: #f4f6f9;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

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

body {
    margin-bottom: 60px;
    background-color: var(--hrr-light);
    color: #223;
}

/* ---- Brand wordmark ---- */
.hrr-brand {
    display: inline-flex;
    align-items: baseline;
    font-weight: 800;
    letter-spacing: .04em;
    font-size: 1.35rem;
}
.hrr-brand-logo {
    height: 2.42rem;
    width: auto;
    margin-right: .5rem;
}
.hrr-brand-mark { color: var(--hrr-navy); }
.hrr-brand-accent {
    color: var(--hrr-accent);
    margin-left: .35rem;
}

/* ---- Secondary role-based nav (mirrors EHBA's dark slate menu) ---- */
.hrr-navmenu {
    background-color: var(--hrr-slate);
    box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .15);
}
.hrr-navmenu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.hrr-navmenu li a {
    display: inline-block;
    color: #e9eef3;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .7rem 1.1rem;
    border-bottom: 3px solid transparent;
    transition: background-color .15s, border-color .15s;
}
.hrr-navmenu li a:hover {
    background-color: var(--hrr-steel);
    border-bottom-color: var(--hrr-accent);
    color: #fff;
}
.hrr-navmenu li a i { margin-right: .35rem; }

/* Dropdown submenus. `.hrr-navmenu ul` above is a descendant selector, so it would otherwise
   catch the nested .dropdown-menu and force it flex (permanently open). These rules are more
   specific and hand visibility back to Bootstrap's .show toggle. */
.hrr-navmenu li { position: relative; }
.hrr-navmenu .dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    min-width: 15rem;
    margin: 0;
    padding: .25rem 0;
    border: 0;
    border-radius: 0;
    background-color: #fff;
    box-shadow: 0 .3rem .7rem rgba(0, 0, 0, .25);
}
.hrr-navmenu .dropdown-menu.show { display: block; }
.hrr-navmenu .dropdown-menu a {
    display: block;
    width: 100%;
    color: var(--hrr-navy);
    text-transform: none;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: 0;
    padding: .5rem 1.1rem;
    border-bottom: 0;
}
.hrr-navmenu .dropdown-menu a:hover {
    background-color: var(--hrr-light);
    border-bottom-color: transparent;
    color: var(--hrr-navy);
}
.hrr-navmenu .dropdown-menu .dropdown-divider { margin: .25rem 0; }
.hrr-navmenu .dropdown-toggle::after { margin-left: .4rem; vertical-align: .12em; }

/* ---- Buttons / accents ---- */
.btn-hrr {
    background-color: var(--hrr-navy);
    border-color: var(--hrr-navy);
    color: #fff;
}
.btn-hrr:hover { background-color: var(--hrr-steel); border-color: var(--hrr-steel); color: #fff; }
.text-hrr-accent { color: var(--hrr-accent) !important; }

.card-hrr { border: none; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06); }
.card-hrr .card-title { color: var(--hrr-navy); }

/* ---- Numbered step flow (Request for Proposal, and any later multi-step page) ----
   An <ol class="hrr-steps"> of <li class="hrr-step">. The number comes from the markup rather
   than a counter so a step can be reordered or removed without renumbering the rest by hand. */
.hrr-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hrr-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.hrr-step-number {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--hrr-navy);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .25rem;
}
.hrr-step-body { flex: 1 1 auto; }

/* The steps stack on a phone; the number sits above its card rather than squeezing it. */
@media (max-width: 575.98px) {
    .hrr-step { flex-direction: column; gap: .5rem; }
}

/* ---- Home carousel (gradient slides, no image assets required) ---- */
.hrr-slide {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.hrr-slide-1 { background: linear-gradient(120deg, #1b2a41 0%, #33628f 100%); }
.hrr-slide-2 { background: linear-gradient(120deg, #2c3e50 0%, #4b6f8f 100%); }
.hrr-slide .hrr-slide-inner { max-width: 720px; padding: 2rem; }
.hrr-slide h1 { font-weight: 800; letter-spacing: .02em; }

/* ---- Layout chrome ---- */
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 40px;
    background-color: #fff;
}

/* ---- Loading overlay + spinner (carried from EHBA) ---- */
#loading-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    background-color: #000;
    z-index: 999;
    opacity: 0.5;
}
.loading-icon {
    position: absolute;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #767676;
    border-radius: 25px;
    width: 25px;
    height: 25px;
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    z-index: 4;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* ---- Kendo grid tweaks (carried from EHBA) ---- */
.k-grid td { word-break: break-word !important; }
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1580px; }

/* ---- Page content inset ----
   Give the main content room to breathe rather than running to the edges of the container: a
   wider gutter left and right, and a little more space above and below. Eased off on phones,
   where every pixel of width counts. */
main[role="main"] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
@media (max-width: 575.98px) {
    main[role="main"] { padding-left: .5rem; padding-right: .5rem; }
}

/* ---- Authenticator QR code (Identity EnableAuthenticator) ---- */
/* QRCoder emits an <svg> with intrinsic width/height, which would otherwise render at its
   natural size and overflow narrow screens. */
.hrr-qr svg {
    width: 100%;
    height: auto;
    max-width: 260px;
}

/* ---- Identity "Manage your account" section ---- */
/* The pages under Manage/ are mostly stock Identity UI markup rendered inside our own layout.
   Rather than fork every page just to change a class, the section's primary buttons are mapped
   onto the portal's palette here. */
.hrr-manage-nav .list-group-item {
    border-color: rgba(0, 0, 0, .06);
    color: var(--hrr-navy);
}

.hrr-manage-nav .list-group-item.active {
    background-color: var(--hrr-navy);
    border-color: var(--hrr-navy);
    color: #fff;
}

.hrr-manage-nav .list-group-item:not(.active):hover {
    background-color: var(--hrr-light);
}

.hrr-manage .btn-primary {
    background-color: var(--hrr-navy);
    border-color: var(--hrr-navy);
    color: #fff;
}

.hrr-manage .btn-primary:hover,
.hrr-manage .btn-primary:focus {
    background-color: var(--hrr-steel);
    border-color: var(--hrr-steel);
    color: #fff;
}

/* Stock pages open with an <h3>/<h4> heading; keep them in the portal's heading colour. */
.hrr-manage h3, .hrr-manage h4 { color: var(--hrr-navy); }

/* The stock pages stack bare .form-floating blocks with no margin and put the submit button
   straight after the last one, so fields and buttons render edge to edge. These rules supply the
   vertical rhythm the markup omits. Add "mb-0" to opt a field out (see EnableAuthenticator, where
   the field sits beside its button in a grid row). */
.hrr-manage .form-floating { margin-bottom: 1rem; }

.hrr-manage .form-floating + .btn,
.hrr-manage .form-floating + button,
.hrr-manage .form-floating + input[type="submit"] { margin-top: .25rem; }

/* Buttons sitting side by side (e.g. the two-factor page's authenticator actions). */
.hrr-manage .btn + .btn { margin-left: .5rem; }

/* Separate stacked action blocks, such as Personal data's Download form and Delete link. */
.hrr-manage form + p,
.hrr-manage form + form { margin-top: .75rem; }

/* Headings that introduce a group of buttons need room beneath them. */
.hrr-manage h4 { margin-top: 1.25rem; }
.hrr-manage h3 + .row, .hrr-manage h3 + form { margin-top: 1rem; }

/* ---- Dashboard summary tiles (Home/Index) ----
   A headline total over a two-column split of its sub-counts. Tiles that have no data behind
   them yet render in exactly this shape with em dashes, so the grid never changes as each one
   is wired up. */
.hrr-tile-title {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--hrr-slate);
    margin-bottom: .75rem;
}

.hrr-tile-total {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hrr-navy);
}

/* Two equal columns rather than flex-space-between, so the sub-counts line up across tiles
   however wide the numbers get. */
.hrr-tile-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid #e6eaef;
}

.hrr-tile-count {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hrr-navy);
    line-height: 1.2;
}

.hrr-tile-split.text-muted .hrr-tile-count { color: inherit; }

.hrr-tile-label {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
}

.hrr-tile-note {
    margin: .75rem 0 0;
    font-size: .8rem;
    font-style: italic;
    color: #6c757d;
}

/* ---- Step flow as collapsible sections (Request for Proposal) ----
   Bootstrap's accordion carrying the same numbered discs as .hrr-steps, so a step reads the
   same whether it is a static card or a section you can fold away. */
.hrr-steps-accordion .accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: .375rem;
    overflow: hidden;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

.hrr-steps-accordion .accordion-button {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--hrr-navy);
    background-color: #fff;
    padding: 1rem 1.25rem;
    gap: .85rem;
}

/* Bootstrap tints the open header blue and draws a rule under it; both fight the HRR palette. */
/* Only an open header sits above a body, so the dividing rule belongs on the open state alone —
   a collapsed header is a standalone bar and needs no line under it. */
.hrr-steps-accordion .accordion-button:not(.collapsed) {
    background-color: #fff;
    color: var(--hrr-navy);
    box-shadow: none;
    border-bottom: 1px solid #e6eaef;
}

.hrr-steps-accordion .accordion-button:focus {
    border-color: transparent;
    box-shadow: 0 0 0 .2rem rgba(51, 98, 143, .25);
}

/* The disc is sized for a flex row in .hrr-steps; inside a button it must not stretch or shrink. */
.hrr-steps-accordion .hrr-step-number { margin-top: 0; }

.hrr-steps-accordion .accordion-button::after { margin-left: auto; }

/* Top padding gives the dividing rule (border-bottom on the open header) room to breathe. */
.hrr-steps-accordion .accordion-body { padding: 1.25rem; }

/* Required-field marker: a red asterisk after the label. Add `hrr-required` to a .form-label. */
.form-label.hrr-required::after {
    content: "*";
    color: #dc3545;
    margin-left: .2rem;
    font-weight: 600;
}

/* Heading for a labelled block of fields within a form (e.g. Group Census Information). */
.hrr-form-section {
    color: var(--hrr-navy);
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e6eaef;
}

/* The accordion header carries an icon rather than a numbered disc now that the whole
   submission is one section; the numbered steps live inside the body. */
.hrr-steps-accordion .accordion-button > .bi { color: var(--hrr-accent); }

/* Expand/collapse-all control above the accordion. A quiet text link in the brand navy, not a
   button, so it reads as a helper rather than a second call to action. */
.hrr-accordion-toggle {
    color: var(--hrr-steel);
    text-decoration: none;
    font-weight: 600;
}
.hrr-accordion-toggle:hover:not(:disabled) { color: var(--hrr-navy); text-decoration: underline; }
.hrr-accordion-toggle .bi { margin-right: .25rem; }

/* The action that no longer applies: greyed and inert, but still present so the pair reads as a
   fixed set of two rather than shifting around. */
.hrr-accordion-toggle:disabled { color: #adb5bd; text-decoration: none; }

/* Search box autocomplete (Quotes). The list is an absolutely-positioned dropdown under the input;
   .hrr-search is position: relative so it anchors here. */
.hrr-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: .15rem;
    max-height: 16rem;
    overflow-y: auto;
    z-index: 1050;
}
.hrr-suggestions .hrr-suggestion {
    width: 100%;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}
.hrr-suggestions .hrr-suggestion.active,
.hrr-suggestions .hrr-suggestion:hover {
    background-color: var(--hrr-light);
    color: var(--hrr-navy);
}

/* On the toolbar row the search box needs a usable width without stretching the whole row. */
.hrr-search-group { width: 16rem; max-width: 100%; }

/* The standalone clear: a red X set off from the box, no button chrome. */
.hrr-search-clear {
    line-height: 1;
    font-size: 1.05rem;
    text-decoration: none;
}
.hrr-search-clear:hover { color: var(--hrr-navy) !important; }

/* The rows-per-page selector sits inside the "Showing 1–10 of 60" line, so it must be only as
   wide as its value rather than a full-width form control. */
.hrr-inline-size {
    display: inline-block;
    width: auto;
    padding-top: .05rem;
    padding-bottom: .05rem;
    padding-left: .4rem;
    padding-right: 1.4rem;
    height: auto;
    font-size: inherit;
    line-height: 1.2;
}

/* A table row that acts as a link to its record. The pointer and hover tint say "clickable"; the
   navigation itself is wired in site.js off the data-href. */
tr.hrr-row-link { cursor: pointer; }
tr.hrr-row-link:hover { background-color: var(--hrr-light); }

/* Sortable column headers. The arrows sit faint until a column is the active sort, so the header
   row advertises what can be sorted without turning into a row of icons competing for attention. */
.hrr-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.hrr-sort:hover { color: var(--hrr-steel); }
.hrr-sort .bi {
    font-size: .78rem;
    color: #b6bec7;
    margin-left: .15rem;
}
.hrr-sort:hover .bi { color: var(--hrr-steel); }
.hrr-sort.active { color: var(--hrr-navy); }
.hrr-sort.active .bi { color: var(--hrr-accent); }

/* "Done" tick on a resumed quote's section header: this section already has files attached. */
.hrr-section-done {
    background-color: #e6f4ea;
    color: #1e7e34;
    font-weight: 600;
    font-size: .72rem;
}

/* A textarea that grows with its content. The scrollbar is suppressed because the box is resized
   to fit in site.js; manual dragging is off so the two cannot fight each other. */
textarea.hrr-autogrow {
    overflow-y: hidden;
    resize: none;
    min-height: 5.5rem;
}

/* Saved notes: a read-only record above the note box. Styled as a quoted block rather than a
   field so it does not read as something that can still be typed into. */
.hrr-note {
    border-left: 3px solid var(--hrr-accent);
    background-color: #fbfbfd;
    padding: .6rem .85rem;
    margin-bottom: .75rem;
    border-radius: 0 .25rem .25rem 0;
}
.hrr-note-meta {
    font-size: .78rem;
    font-weight: 600;
    color: var(--hrr-slate);
    margin-bottom: .25rem;
}
.hrr-note-meta .bi { color: #8a94a0; margin-right: .25rem; }

/* Honour the line breaks the author typed, without letting a long word break the layout. */
.hrr-note-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The list of files already attached to a section, shown above its upload control. */
.hrr-existing-docs li { padding: .15rem 0; }
.hrr-existing-docs a { color: var(--hrr-steel); text-decoration: none; }
.hrr-existing-docs a:hover { color: var(--hrr-navy); text-decoration: underline; }

/* ---- Address lookup on the registration form ---- */
/* Google's autocomplete keeps its input in a shadow root, so only the outside of the element is
   ours to style: stretch it across the column so it lines up with the address fields it fills,
   and let the widget's own Material styling stand for the rest. The suggestion list is drawn
   above the fields below it, hence the stacking context. */
.hrr-address-lookup {
    position: relative;
    z-index: 5;
}
.hrr-address-lookup gmp-place-autocomplete {
    display: block;
    width: 100%;
}

/* The chosen address, standing in the search box's place once a suggestion is picked. Sized to the
   input it replaces so the row does not jump, and styled as a settled answer rather than a field:
   it is the address the form will post, not something still to be filled in. */
.hrr-address-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 50px;
    padding: .5rem .85rem;
    border: 1px solid #dee2e6;
    border-left: 3px solid var(--hrr-accent);
    border-radius: .375rem;
    background-color: #fbfbfd;
}
.hrr-address-chosen-line1 {
    font-weight: 600;
    color: var(--hrr-slate);
    line-height: 1.3;
}
.hrr-address-chosen-line2 {
    font-size: .875rem;
    color: #6c757d;
    line-height: 1.3;
}