/* ---------------------------------------------------------------------------------------------
   The application's own styling, layered on top of Bootstrap.

   Loaded on every signed-in page through the shared header, and on the title company's message
   page, which builds its own head rather than using that header. It loads after Bootstrap and
   only changes what Bootstrap gets wrong for this product - it is not a complete stylesheet on
   its own.

   Every colour, corner size and stacking height comes from tokens.css, which loads first.
   The rules below are kept in their original order, because several of them win only by coming
   after the Bootstrap rule they replace.
   --------------------------------------------------------------------------------------------- */

/* The two typefaces, fetched from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* Body text everywhere is Inter, and every heading is Plus Jakarta Sans. */
* {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 500;
}

/* The buttons. Bootstrap's own colours are replaced with the brand green, and the border and
   outline it draws are removed so the button reads as a solid block of colour. */
.btn-primary {
    background-color: var(--brand-green);
    color: var(--surface-white);
    outline: none;
    border: none;
}

.btn-secondary {
    background-color: var(--brand-green-pale);
    color: var(--text-dark);
    outline: none;
    border: none;
}

.btn-light {
    background-color: var(--surface-light);
}
.btn-primary:hover {
    background-color: var(--brand-green-dark);
}

.btn-secondary:hover {
    background-color: var(--brand-green);
}

/* The ring drawn around a button that has the keyboard's attention. It replaces the outline
   removed above, so a reader navigating by keyboard can still see where they are. */
.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem var(--focus-ring-purple);
}

/* The selected tab in a row of tabs or pills. */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background-color: var(--brand-green);
    color: var(--surface-white);
}

.nav-pills .nav-link.secondary,
.nav-tabs .nav-link.secondary {
    background-color: var(--surface-light);
    color: var(--text-dark);
}

/* The clickable heading of a collapsible section, which keeps its pale green whether the section
   is open or shut. */
.accordion-button {
    background-color: var(--brand-green-pale);
    color: var(--text-dark);
}

.accordion-button:not(.collapsed) {
    background-color: var(--brand-green-pale);
    color: var(--text-dark);
}

/* The tables. The heading row is set apart with a pale grey, and body rows are set in a lighter
   weight than Bootstrap's default so the headings stand out. */
.table thead th {
    background-color: var(--surface-light);
    color: var(--text-dark);
    font-weight: 500;
}

.table {
    color: var(--text-table);
}

.table tbody tr td {
    font-weight: 300;
}

/* Bootstrap's "secondary background" helper, repainted in the brand's pale green. */
.bg-secondary {
    background-color: var(--brand-green-pale) !important;
}

.bg-secondary:hover {
    background-color: var(--brand-green) !important;
}

/* The page you are currently on, in the main navigation. */
#navigation a.active {
    background-color: var(--brand-navy) !important;
    color: var(--surface-white) !important;
    font-weight: bold;
}

/* A row singled out for the reader's attention. */
.bg-highlighted {
    background-color: var(--brand-green-highlight) !important;
}

/* The icons on the dashboard, and ordinary links, both in the brand green. */
.dashboard-icon {
    color: var(--brand-green);
}

a {
    color: var(--brand-green);
}

.nav-link {
    color: var(--brand-navy);
}

/* The sign-in and sign-out links at the top right of the header. */
.app-header-auth {
    gap: 0.5rem;
}

/* The bar holding the button that opens the sidebar on a narrow screen. It stays put at the top
   of the page as the reader scrolls. */
.mobile-sidebar-launcher {
    position: sticky;
    top: 0;
    z-index: var(--layer-sidebar-launcher);
    width: 100%;
    padding: 0 0.75rem 0.5rem;
    margin-top: -0.75rem;
    background: var(--surface-white);
    border-bottom: 1px solid var(--border-light);
}

.mobile-sidebar-button {
    min-width: 90px;
    min-height: 34px;
    border-radius: var(--radius-large);
}

/* Jumping to a heading from a link glides there rather than snapping. */
html {
    scroll-behavior: smooth;
}

/* On a phone the header stacks: the brand mark takes the first line and the sign-in links drop
   onto their own line beneath it. */
@media (max-width: 576px) {
    .app-header {
        justify-content: flex-start !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        gap: 0.75rem;
    }

    .app-header-brand {
        margin-left: 0 !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
        padding-left: 0.75rem;
    }

    .app-header-auth {
        width: 100%;
        padding: 0 0.75rem;
        margin-right: 0 !important;
        justify-content: flex-start;
    }

    .app-header-auth .nav-link {
        padding: 0.45rem 0.8rem;
    }

    /* An invisible block above every section that a link can jump to. It is exactly as tall as
       the sticky sidebar bar and pulled back up by the same amount, so a heading arrived at from
       a link lands below that bar instead of underneath it. */
    section[id]::before {
        content: "";
        display: block;
        height: var(--mobile-sidebar-launcher-height);
        margin-top: calc(var(--mobile-sidebar-launcher-height) * -1);
    }
}

/* The page numbers below a long list. */
.pagination a {
    color: var(--brand-green);
}

.page-item.active .page-link {
    background-color: var(--brand-green);
    color: var(--surface-white);
    border-color: var(--brand-green);
}

/* The clickable column headings that sort a list, and the arrow marking the column in use. */
.sortable {
    color: var(--text-black);
}

.sortable-filter {
    color: var(--brand-green);
}

.no-style-header {
    text-decoration: none;
}

/* The small square of colour that stands next to a label explaining what that colour means. */
.legend-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-tiny);
}

.text-blue {
    color: var(--brand-navy);
}

/* A field is only outlined in red once the reader has actually been in it, so a form does not
   greet them covered in errors before they have typed anything. */
input.touched:invalid,
select.touched:invalid,
textarea.touched:invalid {
    border: 2px solid var(--danger-red);
}

/* The message explaining what is wrong with a field. It is hidden until something is wrong. */
.validation-error {
    color: var(--danger-red);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}
.validation-error.active {
    display: block;
}

/* The row of arrows across the top of an order showing how far it has got. */
.stepper-wrapper {
    display: flex;
    align-items: center;
    min-width: 360px;
    padding: 10px 0;
    filter: drop-shadow(2px 2px 2px var(--shadow-soft));
}

/* One arrow in that row. The clipping path is what gives it its point on the right and its
   matching notch on the left, so the arrows slot into each other. */
.step-arrow {
    flex: 1 0 90px;
    min-width: 90px;
    height: 35px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    font-size: 11px;
    font-weight: bold;
    color: var(--surface-white);
    margin-right: 2px;

    clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%);
}

/* What each arrow's colour means: passed, not reached yet, or failed. */
.step-done {
    background-color: var(--step-done-green);
}
.step-pending {
    background-color: var(--step-pending-green);
}
.step-red {
    background-color: var(--step-failed-red);
}

/* The first arrow has no arrow before it, so it gets a flat left edge rather than a notch. */
.step-arrow:first-child {
    clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
}

/* The halo that grows out of the current step and fades away, drawing the eye to where the order
   has got to. */
@keyframes pulse-yellow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--pulse-amber);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 10px var(--pulse-amber-faded);
        opacity: 0.6;
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--pulse-amber-faded);
        opacity: 1;
    }
}

/* The step the order has currently reached, which pulses so it is easy to find. */
.status-current {
    background-color: var(--status-amber) !important;
    border: 3px solid var(--surface-white);
    animation: pulse-yellow 2s infinite ease-in-out;
}

/* The audit log panel, which floats above the page it belongs to. */
.audit-log-section .nav-tabs .nav-link.active {
    background-color: var(--brand-navy-deep);
    border-color: var(--brand-navy-deep);
    color: var(--surface-white);
}

/* Shared submission-date range picker on the AccuAudit and TitleTally lists. */
.submitted-range { position: relative; }
.submitted-range-toggle {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 260px;
    text-align: left;
    color: var(--brand-navy);
}
.submitted-range-toggle [data-range-label] { flex: 1; }
.submitted-range-toggle[aria-expanded="true"] { border-color: var(--brand-green); }
.submitted-range-panel {
    position: absolute;
    top: calc(100% + 8px);
    width: 590px;
    max-width: calc(100vw - 24px);
    z-index: 1050;
    padding: 16px;
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 8px 28px var(--shadow-strong);
    color: var(--brand-navy);
}
.submitted-range-panel[hidden] { display: none; }
.submitted-range-presets { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
.submitted-range-presets button {
    background: var(--surface-light);
    color: var(--brand-navy);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 5px 10px;
    font-size: .8rem;
}
.submitted-range-navigation { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0; }
.submitted-range-calendars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.submitted-range-calendars h3 { font-size: .95rem; text-align: center; margin-bottom: 12px; font-weight: 600; }
.submitted-range-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px 0; text-align: center; }
.submitted-range-weekday { font-size: .75rem; color: var(--text-muted); padding-bottom: 7px; }
.submitted-range-grid button { border: 0; border-radius: 5px; background: transparent; color: var(--brand-navy); min-height: 34px; font-size: .85rem; padding: 0; }
.submitted-range-grid button.range-between { background: var(--brand-green-highlight); border-radius: 0; }
.submitted-range-grid button.range-endpoint { background: var(--brand-green-dark); color: var(--surface-white); font-weight: 600; }
.submitted-range-grid button[aria-current="date"] { text-decoration: underline; text-underline-offset: 4px; }
.submitted-range-presets button:hover, .submitted-range-grid button:hover { background: var(--brand-green-pale); color: var(--brand-green-dark); }
.submitted-range button:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.submitted-range-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--border-light); margin-top: 16px; padding-top: 12px; }
@media (max-width: 575px) {
    .submitted-range-calendars { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .submitted-range-panel { max-height: 70vh; overflow-y: auto; }
    .submitted-range-toggle { min-width: 0; }
}

.audit-log-section {
    box-shadow: 0 5px 5px var(--shadow-strong) !important;
}

/* The two date boxes that narrow the audit log to a period. */
.audit-date-input {
    border-radius: var(--radius-pill) !important;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-navy-deep);
    border-color: var(--border-grey);
}

/* The list of audit entries, with every other row very slightly shaded so the eye can follow a
   row across. */
.audit-list-container {
    color: var(--brand-navy-deep);
    font-weight: bold;
    font-size: 12px;
    background-color: var(--surface-white);
}
.audit-list-container > div:nth-child(odd) {
    background-color: var(--surface-zebra);
}

/* One entry in the audit log. Date, who did it, which field and what changed each get their own
   line. Shut, the entry is clipped to about three lines; the pointer cursor is what tells the
   reader they can click to see the rest. */
.audit-log-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 15px;
    border-bottom: 1px solid var(--border-audit-divider);
    font-size: 12px;
    color: var(--brand-navy-deep);
    cursor: pointer;

    max-height: 74px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* What is shown instead when there is nothing in the audit log. */
.no-audit-logs {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    font-size: 0.85rem;
    color: var(--brand-navy-deep);
}

/* While the entry is shut, each of its lines is cut off with dots rather than wrapped. */
.audit-log-item > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The top line of an entry, carrying the date and who made the change. */
.audit-log-item .audit-meta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
}

.audit-log-item .date-field {
    font-weight: 600;
    color: var(--brand-navy-light);
}

.audit-log-item .actor-field {
    font-weight: 500;
    color: var(--text-muted);
}

.audit-log-item .field-name-field {
    font-weight: 700;
}

.audit-log-item .change-field {
    color: var(--brand-navy-muted);
}

/* Once opened, the entry grows to whatever height it needs and its lines wrap in full. */
.audit-log-item.expanded {
    max-height: none;
}

.audit-log-item.expanded > div {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

/* The button that adds another blank row to a table of fees. */
.add-row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* Match application message counts to the sidebar navigation text. */
.title-unread-badge { background-color: var(--brand-navy); color: var(--surface-white); }

.application-search-control { position: relative; }
.application-search-control input { padding-right: 2.75rem; }
.application-search-control input::-webkit-search-cancel-button { -webkit-appearance: none; }
.application-search-clear {
    position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    color: var(--brand-navy); border-radius: 0.25rem; text-decoration: none;
}
.application-search-clear:hover { color: var(--brand-navy); background: var(--surface-light); }
.application-search-clear:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -2px; }