:root {
    --operator-header-height: 128px;
    --brand-darkest: #001322;
    --brand-navy: #003057;
    --brand-blue: #007bc1;
    --brand-blue-hover: #005a8e;
    --brand-blue-light: #0d92ec;
    --status-declined: #dc3545;
    --text-nav:    #7aadc8;   /* footer copyright / muted nav-blue on navy */
    --text-muted:  #59636d;   /* muted labels/hints — AA on white & tints */
    --text-slate:  #1e293b;   /* primary dark slate text */
    --text-accent: #2e6580;   /* blue accent labels/links — AA everywhere (design parity) */
    --border-hair: #d5d5d5;   /* subtle gray hairline / icon (design parity) */
    --nav-item-resting: #a5cce0; /* AA-compliant muted blue for resting nav text/icons on navy */

    /* Quote-screen blue tints, borders & radii (single home for the ramp) */
    --card-border: #b8d5e8;   /* card / panel hairline */
    --input-border: #a5c8de;  /* form input borders */
    --tint-header: #b5d4ea;   /* leg-header bar */
    --tint-leg-bg: #e8f3f8;   /* leg card body */
    --bg-body: #e0eff8;       /* page background behind the modal */
    --radius-sm: 6px;
    --radius-md: 8px;
}

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

.pos-rel {
    position: relative;
}

/* Confirm Availability modal — navy header (chrome renders at app root, so this must be a
   non-isolated global rule scoped by the AdditionalCss class set on the launching ModalConfig). */
.app-modal.confirm-availability-modal {
    border-radius: 10px;
}
/* `.app-modal` has padding: 1.5rem; bleed the header out over it so the navy bar sits flush
   to the dialog's top/left/right edges (no white frame above it), matching the mockup. */
/* `.app-modal.` prefix raises specificity to (0,3,0) so these beat the base scoped
   `.app-modal-header[b-hash]` (0,2,0) rules regardless of stylesheet load order
   (needed for align-items + border-bottom, which the base rule also sets). */
.app-modal.confirm-availability-modal .app-modal-header {
    background-color: var(--brand-navy);
    margin: -1.5rem -1.5rem 0 -1.5rem;
    padding: 16px 24px;
    border-radius: 10px 10px 0 0;
    align-items: center;   /* vertically center the title + close in the navy bar */
    border-bottom: none;
}
/* Higher specificity than the shared scoped `.app-modal-title { color:#4A494A }`.
   Also left-align the title (mockup) — override Bootstrap `.mx-auto` centering. */
.confirm-availability-modal .app-modal-header .app-modal-title {
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left;
}
/* The close icon is a dark SVG set via content:url(); recolor it white with a filter. */
.confirm-availability-modal .app-modal-header .app-modal-close .close-icon {
    filter: brightness(0) invert(1);
}
/* ── Quote Submissions — shared (scoped .razor.css can't share these) ─────── */
.qm-trip-bar {
    display: flex;
    align-items: center;
    background: var(--brand-blue);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    padding: 8px 16px;
}

.qm-card,
.qm-quote-form-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}