/* ==========================================================================
   1. Design tokens
   Colors sourced from the Reliance Figma file (VP4Jhg5BCCizR0xWbiukuA):
   sidebar/nav navy + white sidebar bg from the Settings/Organization/
   Dashboard frames, auth blue + branding-panel gradient from the
   Login - Officer frame.
   ========================================================================== */
:root {
    --brand-navy: #1d2d60;
    --brand-blue: #15349d;
    --brand-blue-dark: #0f2570;
    --muted-blue-1: #6a79af;
    --muted-blue-2: #7680a3;
    --muted-blue-3: #7983a2;
    --field-label: #404d78;
    --icon-grey: #71717a;
    --border: #dedee0;
    --page-bg: #fafafa;
    --sidebar-bg: #ffffff;
    --nav-active-bg: #e5eaf0;
    --nav-group-label: #94a3b8;
    --white-text: #fcfcfc;
    --branding-gradient-start: #435ab4;
    --branding-gradient-end: #061d5c;
}

/* ==========================================================================
   2. Base / reset
   ========================================================================== */
body {
    font-family: 'Inter', Arial, sans-serif;
    background: var(--page-bg);
    margin: 0;
    color: #18181b;
}

/* ==========================================================================
   3. Authenticated app shell
   ========================================================================== */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
    width: 225px;
    height: 100%;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px;
}
.sidebar-brand img { height: 46px; }
.sidebar-nav {
    padding: 11px; flex: 1; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav-label {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--nav-group-label);
    padding: 0 11px;
    margin: 18px 0 8px;
}
.sidebar-nav-label:first-child { margin-top: 6px; }
.sidebar-nav .nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 8px;
    color: var(--brand-navy); font-size: 14px; font-weight: 500;
    text-decoration: none;
}
.sidebar-nav .nav-item i { width: 16px; text-align: center; font-size: 15px; }
.sidebar-nav .nav-item.active { background: var(--nav-active-bg); }
.sidebar-nav .nav-item.disabled {
    color: #b6bbd6;
    cursor: default;
    pointer-events: none;
}
.sidebar-nav button.nav-item {
    width: 100%; background: none; border: none; cursor: pointer;
    font-family: inherit; text-align: left;
}
.nav-subnav { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.nav-subnav .nav-item-sub { padding-left: 34px; font-size: 13px; }
.sidebar-footer { padding: 11px; border-top: 1px solid var(--border); }
.sidebar-footer .nav-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 11px; border: none; border-radius: 8px;
    background: none; cursor: pointer;
    color: var(--brand-navy); font-size: 14px; font-weight: 500;
    font-family: inherit; text-align: left;
}

.main-area { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
    font-size: 14px;
    color: var(--nav-group-label);
}
.topbar strong { color: #18181b; }
.content-area { padding: 24px 50px;}
.content-area-detail { max-width: 1400px; margin: 0 auto; width: 100%; }

/* ==========================================================================
   4. Pre-auth split-screen layout
   ========================================================================== */
.auth-shell { display: flex; min-height: 100vh; }
.auth-branding-panel {
    flex: 1 1 42%;
    max-width: 460px;
    background: linear-gradient(160deg, var(--branding-gradient-start), var(--branding-gradient-end));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
    position: relative;
    overflow: hidden;
}
.auth-branding-panel::before,
.auth-branding-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .55;
}
.auth-branding-panel::before {
    width: 320px; height: 320px;
    background: #44baff;
    top: -80px; right: -100px;
}
.auth-branding-panel::after {
    width: 260px; height: 260px;
    background: #455dc9;
    bottom: 60px; right: -60px;
}
.auth-branding-panel .auth-wordmark {
    position: relative;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}
.auth-branding-panel .auth-wordmark .brokers { display: block; color: var(--muted-blue-3); }
.auth-branding-panel .auth-tagline {
    position: relative;
    color: var(--muted-blue-2);
    font-size: 15px;
    margin: 10px 0 0;
}
.auth-form-panel {
    flex: 1 1 58%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}
.auth-form-panel .auth-logo { height: 90px; margin-bottom: 32px; }
.auth-card { max-width: 393px; width: 100%; }
.auth-heading { color: var(--brand-blue); font-weight: 600; font-size: 28px; margin: 0 0 4px; }
.auth-subheading { color: var(--muted-blue-1); font-size: 14px; margin: 0 0 24px; }
.auth-form-panel .form-label { color: var(--field-label); font-weight: 400; font-size: 14px; margin-bottom: 6px; }

/* Segmented OTP digit boxes */
.otp-boxes { display: flex; align-items: center; gap: 8px; }
.otp-box {
    width: 45px; height: 45px;
    text-align: center;
    font-size: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.otp-box:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(21, 52, 157, 0.15); outline: none; }
.otp-dash { color: var(--muted-blue-1); font-size: 14px; padding: 0 2px; }

/* ==========================================================================
   5. Shared components
   ========================================================================== */
.card {
    border: 1px solid var(--border);
    border-radius: 12px;
}
/* The currently-active master excel file's card (Maintain excel calculator
   page) - same blue as its "Currently in use" badge, so the active file is
   obviously distinct from the history list below it. */
.master-excel-active-card {
    border: 1px solid #0485F7;
}
.org-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); }
.org-tab {
    padding: 10px 2px; font-size: 14px; font-weight: 500; color: var(--nav-group-label);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.org-tab:hover { color: var(--brand-navy); }
.org-tab.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }
.section-heading { color: var(--brand-blue); font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.section-subheading { color: var(--nav-group-label); font-size: 12px; }
.btn-reliance {
    background: var(--brand-navy); border-color: var(--brand-navy); color: #fff;
    border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 500;
}
.btn-reliance:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }
.form-label {
    font-size: 13px; font-weight: 600; color: #18181b; margin-bottom: 6px;
}
.form-control {
    border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
.form-control:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(21, 52, 157, 0.15); }
/* Money columns: put .amount-cell on both the <th> and the <td> so the header sits
   over the digits. The type below is the Figma spec for numeric values (Inter Bold,
   paragraph-s); it is scoped to the <td> so headers keep their own table type.
   tabular-nums stays on top of it - Inter's proportional figures make a
   right-aligned column look ragged without it. */
.amount-cell {
    text-align: right; white-space: nowrap;
}
td.amount-cell {
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    color: #2563EB;
}

/* ==========================================================================
   6. Dropzone widget
   ========================================================================== */
.dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    color: var(--nav-group-label);
    font-size: 13px;
    transition: border-color .15s, background-color .15s;
}
.dropzone.dragover { border-color: var(--brand-blue); background: rgba(21, 52, 157, 0.05); }
.dropzone.is-invalid { border-color: #dc3545; }
.dropzone .dropzone-icon { font-size: 20px; color: var(--nav-group-label); margin-bottom: 4px; }
.dropzone .dropzone-browse { color: var(--brand-blue); font-weight: 600; text-decoration: underline; }
.dropzone .dropzone-filename { font-weight: 600; color: #18181b; font-size: 13px; }
.dropzone input[type="file"] { display: none; }

/* ==========================================================================
   7. Chip multi-select widget
   ========================================================================== */
/* Django's CheckboxSelectMultiple renders a wrapping <div class="chip-select"> with one
   <div><label><input type="checkbox"> Text</label></div> per option (input nested inside
   the label, not a preceding sibling), so the checked-state style targets the label via
   :has() rather than `input:checked + label`. */
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--field-label);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.chip-select input[type="checkbox"] {
    width: 14px; height: 14px; margin: 0;
    accent-color: var(--brand-blue);
}
.chip-select label:has(input[type="checkbox"]:checked) {
    background: var(--nav-active-bg);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    font-weight: 600;
}
.chip-select label:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--brand-blue);
    outline-offset: 1px;
}

/* ==========================================================================
   8. HTMX utility
   ========================================================================== */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }

/* ==========================================================================
   10. Additional form controls (quotation form's outline button, selects,
   checkboxes)
   ========================================================================== */
/* 8px radius / 6px-12px padding per the Figma spec recorded in
   docs/design-notes/new-quotation-figma-notes.md - this was a pill before,
   which never matched the design on any screen using it. */
.btn-reliance-outline {
    background: #fff; border: 1px solid var(--border); color: #18181b;
    border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 500;
}
.btn-reliance-outline:disabled{
    border-color: var(--border); color: var(--icon-grey);
}
.btn-reliance-outline:hover { background: #f8f9fa; border-color: var(--border); color: #18181b; }
/* The cover note reminder's "Send email" action (Nearing Expiry list row and
   the workspace's nearing-expiry banner) - #EA580C matches the orange
   already used for the nearing-expiry accent, see
   static/img/NearingExpiry-orange.svg and .expiry-dot-nearing. */
.btn-reliance-reminder {
    background: #EA580C; border-color: #EA580C; color: #fff;
    border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 500;
}
.btn-reliance-reminder:hover { background: #C2410C; border-color: #C2410C; color: #fff; }
/* Same shape as .btn-reliance-outline (Delete task, next to Save this
   task/Send to email to bank) but in red, since it's a destructive action. */
.btn-reliance-outline-danger {
    background: #fff; border: 1px solid var(--border); color: #dc3545;
    border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 500;
}
.btn-reliance-outline-danger:hover { background: #f8f9fa; border-color: var(--border); color: #dc3545; }
.form-select {
    border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: #18181b;
}
.form-select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(21, 52, 157, 0.15); }
.form-select option[value=""] { color: var(--icon-grey); }
.form-select:has(option[value=""]:checked) { color: var(--icon-grey); }
.form-check-input { border-color: var(--border); }
.form-check-input:checked { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.form-check-input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(21, 52, 157, 0.15); }

/* ==========================================================================
   11. Quotation form field rows
   ========================================================================== */
.field-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.field-row:last-child { border-bottom: none; }
.field-row-label {
    width: 280px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: #18181b;
    white-space: nowrap;
}
.field-row-label--indented {
    padding-left: 24px;
}
.required-marker {
    color: #dc3545 !important;
    margin-left: 2px;
}
.field-row-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.field-row-body .form-control,
.field-row-body .form-select {
    max-width: 320px;
}
.field-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.field-group-label {
    font-size: 14px;
    color: #18181b;
    white-space: nowrap;
}
.field-suffix {
    font-size: 13px;
    color: var(--nav-group-label);
    white-space: nowrap;
}

/* ==========================================================================
   12. Insurer-request recipient chips
   ========================================================================== */
.chip {
    background: var(--nav-active-bg);
    color: var(--brand-navy);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 13px;
}
.chip-remove {
    background: none;
    border: none;
    color: var(--brand-navy);
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
/* Cover note attachment chips. The Figma export gives these #0485f7 on #1d63ae,
   which is unreadable as literal values - the source fill carries an opacity the
   export dropped - so this uses a tint of the same blue behind the intended
   text color. */
.chip-file { background: rgba(4, 133, 247, 0.12); color: #1d63ae; }
.chip-file .chip-file-link { color: inherit; text-decoration: none; }
.chip-file .chip-file-link:hover { text-decoration: underline; }

.mail-chip {
    background: transparent;
    border: 1px solid #1D63AE;
    color: #1D63AE;
}
.mail-chip .chip-remove {
    color: #1D63AE;
}
/* The cover note preview chip is a <button> (it opens a panel, it does not
   navigate), so undo the border and font the UA gives buttons - .chip was
   written for anchors and spans and sets neither. */
button.chip { border: none; font-family: inherit; cursor: pointer; }
button.chip:hover { background: rgba(4, 133, 247, 0.2); }
button.chip:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.chip-file .chip-remove { color: #1d63ae; }
.bcc-indicator {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--nav-group-label);
    padding-top: 4px;
}

/* ==========================================================================
   13. Gmail-style compose layout for the send-email modals (insurer
   request, bank quote, cover note)

   Bootstrap's .modal-dialog-scrollable already turns .modal-content into a
   fixed-height flex column with .modal-body as the one scrolling element -
   rather than fight that with a 4-region header/body/footer split,
   .mail-sticky-top/.mail-sticky-bottom are sticky-positioned first/last
   children *inside* .modal-body (.mail-modal-body strips its default
   padding so their opaque backgrounds reach the modal's edges; everything
   between them - greeting text, locked table(s), closing text - is normal
   .mail-scroll-region content that scrolls underneath/above them).
   ========================================================================== */
.mail-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: #18181b;
    margin: 0;
}
.mail-modal-header {
    background: #F1F5F9;
}
/* Fixed size rather than .modal-dialog-scrollable's default grow-to-a-cap-
   then-scroll behavior (max-height) - the modal shouldn't visibly resize as
   greeting/table/closing content varies between quotations, so this is a
   real height, and .mail-scroll-region scrolls inside it either way. */
.mail-modal-dialog .modal-content {
    height: 80vh;
}
.mail-modal-body {
    padding: 0;
}
.mail-sticky-top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    padding: 16px 24px 0;
}
.mail-to-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
}
.mail-to-label,
.mail-subject-label {
    flex-shrink: 0;
    padding-top: 4px;
}
.mail-to-chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mail-subject-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.mail-subject-row .mail-editable {
    flex: 1;
    width: auto;
}
.mail-divider {
    border: none;
    border-top: 1px solid #c7c7cc;
    margin: 0;
}
/* The divider between To and Subject sits *inside* .mail-sticky-top, which
   has 24px of horizontal padding - -24px cancels that out so it bleeds
   edge-to-edge, matching the other divider (between Subject and the scroll
   region), which is a sibling of .mail-sticky-top with no padded ancestor
   and is already edge-to-edge at the base margin:0 above. */
.mail-sticky-top .mail-divider {
    margin: 0 -24px;
}
/* Bank quote's type-to-add To field (static/js/reliance.js
   data-to-chip-input handler) - sits inline with its chip, so it's sized to
   its content and blends in like plain text until focused. */
.mail-to-input {
    flex: 1 1 160px;
    min-width: 120px;
    border: none;
    background: transparent;
    padding: 4px 0;
    font: inherit;
    color: inherit;
}
.mail-to-input:focus {
    outline: none;
}
.mail-scroll-region {
    padding: 16px 24px;
}
.mail-sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #F1F5F9;
    border-top: 1px solid var(--border);
    padding: 8px 24px;
    display: flex;
    /* flex-start rather than center - if the toolbar wraps onto a second
       row (see .trix-button-row above), the Send button should sit level
       with its first row, not centered against the whole wrapped block. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mail-sticky-bottom .mail-editable-trix-toolbar {
    margin: 0;
}
/* Subject/greeting/closing text always looks like plain text, clickable to
   edit with no border/tag distinguishing it from the locked table(s) around
   it - there's no read-only variant of these fields anywhere in the app, so
   there's nothing to visually distinguish. */
.mail-editable {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    resize: none;
    font: inherit;
    color: inherit;
    white-space: pre-line;
}
.mail-editable:focus {
    outline: none;
}
.mail-editable-trix {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    /* Trix's own stylesheet sets trix-editor { min-height: 5em; ... } - left
       unoverridden this pads every editor out to a fixed floor regardless of
       content, which only stayed invisible on the bank-quote modal because
       its default closing text (a full bullet list) already exceeds 5em.
       Shorter content (e.g. cover note greeting/closing text) left a
       visible empty gap below the text instead of the editor sizing to it. */
    min-height: 0;
}
/* Hand-written <trix-toolbar> (see partials/_mail_trix_toolbar.html) always
   sits in a modal's .mail-sticky-bottom, not next to the editors it
   controls - Trix's toolbar attribute is an id reference, not a DOM-
   ancestry requirement. Trix's stock button chrome (grouped boxes, borders,
   background) is stripped down to plain icon buttons so only a slim row of
   icons shows, matching the rest of the app's minimal toolbar look. */
.mail-editable-trix-toolbar {
    margin: 0;
    border: none;
    padding: 0;
    font-size: 15px;
}
/* Trix's own .trix-button-row is flex-wrap: nowrap + overflow-x: auto - a
   horizontal-scroll toolbar meant for narrow mobile viewports. This toolbar
   sits in a modal footer with plenty of width, so let the buttons wrap onto
   a second line instead of ever showing a scrollbar. It also defaults to
   justify-content: space-between, which (combined with Trix's own
   .trix-button-group-spacer, dropped from partials/_mail_trix_toolbar.html)
   is meant to shove file/history tools to the far right - with just the
   text-tools and file-tools groups left, space-between still splits them
   to the row's opposite edges, showing up as a big gap before Attach
   Files; flex-start keeps every group flowing together instead. */
.mail-editable-trix-toolbar .trix-button-row {
    border: none;
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: flex-start;
}
.mail-editable-trix-toolbar .trix-button-group {
    border: none;
    border-radius: 0;
    margin: 0 2px 0 0;
}
.mail-editable-trix-toolbar .trix-button {
    border: none;
    background: transparent;
    color: #18181b;
}
/* Trix's own CSS draws the divider between buttons via
   `trix-toolbar .trix-button:not(:first-child) { border-left: ... }` - an
   element+class+pseudo-class selector that out-specifies a plain
   `.mail-editable-trix-toolbar .trix-button` rule, so this needs the same
   :not(:first-child) shape to actually win. */
.mail-editable-trix-toolbar .trix-button:not(:first-child) {
    border-left: none;
}
/* Trix sizes icon buttons in em off trix-toolbar .trix-button--icon
   (1 class + 1 element) - shrink them directly rather than relying only on
   the toolbar's own smaller font-size to cascade through. */
.mail-editable-trix-toolbar .trix-button--icon {
    width: 2.4em;
    height: 1.7em;
}
.mail-editable-trix-toolbar .trix-button:hover {
    background: var(--border);
}
.mail-editable-trix-toolbar .trix-button.trix-active {
    background: rgba(21, 52, 157, 0.12);
    color: var(--brand-blue);
}

/* Insurer Premiums table's per-row verification status - "Verify" is a
   clickable pill (JS-only toggle, see reliance.js); "Verified" is the same
   pill shape, just non-interactive, once confirmed. */
.verify-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--brand-blue);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--brand-blue);
}
.verify-pill-pending:hover { background: rgba(21, 52, 157, 0.05); }

/* Pale-green success pill (e.g. "Quotation requested") - lighter fill than
   Bootstrap's bg-success, matching the confirmation-state pills elsewhere. */
.status-pill-success {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
    background: #e3f6e8;
    color: #1a7f3c;
}

/* ==========================================================================
   14. Quotation management page
   ========================================================================== */
.topbar-greeting { font-size: 18px; font-weight: 600; color: var(--brand-blue); margin: 0; }

/* Quotation-detail's own breadcrumb trail, rendered in the content area
   (not the topbar) since base.html's topbar is just the time-based
   greeting now - see quotation_detail.html. */
.breadcrumb-trail { font-size: 16px; margin: 0; }
.breadcrumb-trail .crumb-inactive { color: var(--icon-grey); text-decoration: none; }
.breadcrumb-trail .crumb-inactive:hover { text-decoration: underline; }
.breadcrumb-trail .crumb-active { color: #18181b; font-weight: 600; }
.breadcrumb-trail .crumb-sep { margin: 0 6px; color: var(--icon-grey); }

/* Blue outline "Select All" pill, distinct from the neutral
   .btn-reliance-outline used for Save/Send actions. */
.btn-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
}
.btn-select-all:hover { background: rgba(21, 52, 157, 0.05); color: var(--brand-blue); }

.page-header-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--nav-active-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.page-header-icon img { width: 20px; height: 20px; }
.page-header-icon i { font-size: 20px; color: var(--brand-blue); }

.stat-tile {
    display: flex; align-items: center; gap: 12px;
    min-width: 240px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 20px;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
}
.stat-tile-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
}
.stat-tile-icon img { width: 100%; height: 100%; }
.stat-tile-label { font-size: 14px; font-weight: 500; color: #18181b; white-space: nowrap; }
.stat-tile-value {
    font-size: 30px; line-height: 1; font-weight: 700;
    color: var(--tile-accent, var(--brand-blue));
    margin-left: auto; padding-left: 16px;
    font-variant-numeric: tabular-nums;
}

.filter-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--field-label);
    background: #fff;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.filter-pill:hover { background: #f8f9fa; }
.filter-pill i { display: none; }
.filter-pill:has(input:checked) {
    background: var(--nav-active-bg);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    font-weight: 600;
}
.filter-pill:has(input:checked) i { display: inline; }
.filter-pill:has(input:focus-visible) {
    outline: 2px solid var(--brand-blue);
    outline-offset: 1px;
}

.status-pill {
    display: inline-flex; align-items: center;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.status-pill-sent { background: rgba(21, 52, 157, 0.1); color: #184FFC; }
.status-pill-draft { background: transparent; border: 1px solid var(--border); color: var(--nav-group-label); }
/* Amber: one of the two mails is still outstanding - deliberately distinct from
   both the neutral draft pill and the blue "fully sent" one. */
.status-pill-pending { background: rgba(191, 128, 20, 0.12); color: #8a5a0b; }
/* Teal: sent quotation that's progressed to cover-note stage - distinct
   from the plain "sent" blue pill so officers can tell the two apart in the
   quotation list without opening each row. */
.status-pill-covernote { background: rgba(18, 120, 171, 0.12); color: #1278AB; }

/* Nearing Expiry / Expired list pages: a small dot + text under the status
   pill showing how many days remain or have passed. Amber matches
   .status-pill-pending's color; red is new to the palette. */
.expiry-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.expiry-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.expiry-dot-nearing { color: #8a5a0b; }
.expiry-dot-nearing::before { background: #bf8014; }
.expiry-dot-expired { color: #b3261e; }
.expiry-dot-expired::before { background: #b3261e; }

/* ==========================================================================
   17. Quotation workspace top tabs
   ========================================================================== */
.quotation-tabs {
    border-bottom: 1px solid var(--border);
    gap: 4px;
}
.quotation-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 4px;
    margin-right: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nav-group-label);
    background: none;
}
.quotation-tabs .nav-link:hover { color: var(--brand-blue); border-color: transparent; }
.quotation-tabs .nav-link.active {
    color: var(--brand-blue);
    font-weight: 600;
    border-bottom-color: var(--brand-blue);
    background: none;
}
.quotation-tabs .nav-link.disabled { color: var(--nav-group-label); opacity: .55; cursor: default; }

/* Plain text-styled action buttons (e.g. "Select All") used alongside a
   section heading where a bordered button would be too heavy. */
.link-action {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-blue);
}
.link-action:hover { text-decoration: underline; }

.table thead th{
    font-weight: 500;
    font-size: 16px;
}

.table tbody td{
    font-size: 14px;
}

/* Insurer-premiums table (excel-covered insurers, FR13/FR17/FR18) - navy
   header + zebra-striped rows, scoped to this table only so it doesn't
   affect the plain Bootstrap tables used elsewhere (quotation list,
   insurer/officer admin lists). */
.table-premiums {
    border-radius: 8px;
    overflow: hidden;
}
.table-premiums thead th {
    color: #18181b;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 14px;
    border: none;
}
.table-premiums tbody td { padding: 12px 14px; border-color: var(--border); }
.table-premiums tbody tr:nth-child(even) { background: #f8f9fb; }

/* Cover note action in the sent-quotation workspace: a row shows either
   "Generate cover note" or "Open cover note" depending on whether that insurer
   already has one, so both are sized to the wider label to keep the column's
   right edge straight down the table. */
.cover-note-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
}

/* ==========================================================================
   18. Email center - one recipient chip per email, per event card
   ========================================================================== */
.chip-avatar {
    display: inline-block;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--branding-gradient-start), var(--branding-gradient-end));
    flex-shrink: 0;
}

/* ==========================================================================
   18b. Cover note PDF preview panel
   ========================================================================== */
/* The height has to be an explicit length: .modal-body has no height of its own,
   so a percentage here collapses the frame to nothing and the panel looks empty
   even though the PDF loaded. Paired with .modal-body.p-0 on the panel so the
   browser's PDF viewer fills it edge to edge. */
.cover-note-pdf-frame {
    display: block;
    width: 100%;
    height: 78vh;
    border: 0;
    background: var(--page-bg);
}

/* ==========================================================================
   19. Toasts
   ========================================================================== */
.toast-custom {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06),
                inset 3px 0 0 var(--toast-accent, transparent);
    width: 340px;
    max-width: 100%;
}
.toast-custom .toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    background: var(--toast-accent);
}
.toast-custom .toast-message { flex: 1; font-size: 14px; color: #18181b; }
.toast-custom .toast-close {
    border: none;
    background: transparent;
    padding: 4px;
    flex-shrink: 0;
    color: var(--icon-grey);
    font-size: 14px;
    line-height: 1;
}
.toast-custom .toast-close:hover { color: var(--brand-navy); }

/* Per-type accent (icon badge fill + left bar) - the only color that varies. */
.toast-custom.toast-success { --toast-accent: #22c55e; }
.toast-custom.toast-danger  { --toast-accent: #ef4444; }

/* Slide in from the right, riding Bootstrap's own .showing/.show toggle -
   toast.js adds/removes these classes on show/hide and reads this element's
   own transition duration, so no JS changes are needed to animate it. */
#toast-container .toast {
    transform: translateX(0);
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
#toast-container .toast.showing {
    transform: translateX(110%);
    opacity: 0;
}

/* ==========================================================================
   20. Quotation sent-status timeline
   ========================================================================== */
.qt-timeline { list-style: none; margin: 0; padding: 0; }
.qt-timeline-step { position: relative; display: flex; gap: 12px; padding-bottom: 28px; }
.qt-timeline-step:last-child { padding-bottom: 0; }

/* Connecting line: drawn on every step except the last, from below its dot
   down to the next dot. Positioned using the dot's own fixed size/margin
   so it lines up regardless of how tall each step's content is. */
.qt-timeline-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: -8px;
    width: 2px;
    background: var(--border);
}
.qt-timeline-step.qt-timeline-step-done:not(:last-child)::before { background: var(--brand-blue); }

.qt-timeline-dot {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-top: 2px;
    z-index: 1;
}
.qt-timeline-dot-done { background: var(--brand-blue); }
.qt-timeline-dot-pending { background: #fff; border: 2px solid var(--border); }

.qt-timeline-title { font-weight: 600; font-size: 14px; color: #18181b; }
.qt-timeline-title-pending { color: var(--nav-group-label); font-weight: 500; }
.qt-timeline-meta { color: var(--nav-group-label); font-size: 12px;}
.qt-timeline-meta-text {line-height: 2;}

/* ==========================================================================
   21. Responsive breakpoints
   ========================================================================== */
@media (max-width: 576px) {
    .btn-reliance, .btn-reliance-outline, .btn-reliance-reminder { padding: 7px 14px; font-size: 13px; }
}