:root {
    --brand-dark: #2C2A29;
    --brand-red: #E40032;
    --brand-gray: #888B95;
    --brand-green: #2E7D5B;
    --brand-amber: #D98E04;
    --brand-blue: #3E6990;
    --brand-plum: #7A4E7E;
    /* remap Bootstrap tokens */
    --bs-body-font-size: 0.875rem;
    --bs-primary: var(--brand-red);
    --bs-primary-rgb: 228, 0, 50;
    --bs-secondary: var(--brand-gray);
    --bs-secondary-rgb: 136, 139, 149;
    --bs-dark: var(--brand-dark);
    --bs-dark-rgb: 44, 42, 41;
    --bs-body-color: var(--brand-dark);
    --bs-body-font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
    --bs-link-color: var(--brand-red);
    --bs-link-hover-color: #b80029;
    --footer-height: 2.5rem;
}
 
    
 
.badge-brand-danger-soft {
    background-color: rgba(228, 0, 50, .1);
    color: var(--brand-red);
    border: 1px solid rgba(228, 0, 50, .35);
    font-weight: 600;
}

.badge-brand-accent-soft {
    background-color: rgba(122, 78, 126, .12);
    color: var(--brand-plum);
    border: 1px solid rgba(122, 78, 126, .4);
    font-weight: 600;
}
/* solid variants */
.badge-brand-success {
    background-color: var(--brand-green);
    color: #fff;
}

.badge-brand-warning {
    background-color: var(--brand-amber);
    color: #fff;
}

.badge-brand-info {
    background-color: var(--brand-blue);
    color: #fff;
}

.badge-brand-accent {
    background-color: var(--brand-plum);
    color: #fff;
}

/* soft tinted variants (match the existing badge style) */
.badge-brand-success-soft {
    background-color: rgba(46,125,91,.12);
    color: var(--brand-green);
    border: 1px solid rgba(46,125,91,.4);
    font-weight: 600;
}

.badge-brand-warning-soft {
    background-color: rgba(217,142,4,.12);
    color: #a86f03;
    border: 1px solid rgba(217,142,4,.4);
    font-weight: 600;
}

.badge-brand-info-soft {
    background-color: rgba(62,105,144,.12);
    color: var(--brand-blue);
    border: 1px solid rgba(62,105,144,.4);
    font-weight: 600;
}
.badge-brand-danger {
    background-color: var(--brand-red);
    color: #fff;
}

.badge-brand-gray {
    background-color: var(--brand-gray);
    color: #fff;
}

.badge-brand-dark {
    background-color: var(--brand-dark);
    color: #fff;
}

.badge-brand-gray-soft {
    background-color: rgba(136, 139, 149, .18);
    color: #5c5f68;
    border: 1px solid rgba(136, 139, 149, .45);
    font-weight: 600;
}

.badge-brand-dark-soft {
    background-color: rgba(44, 42, 41, .1);
    color: var(--brand-dark);
    border: 1px solid rgba(44, 42, 41, .35);
    font-weight: 600;
}

/* badges — brand palette */
.badge.bg-secondary {
    background-color: rgba(136, 139, 149, .18) !important; /* soft gray tint */
    color: #5c5f68 !important;
    border: 1px solid rgba(136, 139, 149, .45);
    font-weight: 600;
}

.badge-bg-info {
    background-color: rgba(228, 0, 50, .1) !important; /* soft red tint */
    color: var(--brand-red) !important;
    border: 1px solid rgba(228, 0, 50, .35);
    font-weight: 600;
}

 

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--brand-dark);
}
/* scrollable data grid with sticky header */
.table-scroll {
    max-height: 65vh;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
}

    .table-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
/* opt-in sticky footer */
body.footer-sticky {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

    body.footer-sticky > .container {
        flex: 1 1 auto;
        /* reserve clearance so the pinned footer never hides the last content */
        padding-bottom: calc(var(--footer-height) + 1.5rem);
    }

    body.footer-sticky .footer {
        position: sticky;
        bottom: 0;
        left: auto;
        right: auto;
        z-index: 1030; /* above cards, sticky table headers, etc. */
    }

/* sticky footer — normal page scrolling, footer always at the bottom,
   never covers content because it stays in the document flow */
html, body {
    min-height: 100%;
}


body {
    min-height: 100vh; /* fallback */
    min-height: 100dvh; /* accounts for mobile browser chrome */
    display: flex;
    flex-direction: column;
    font-family: var(--bs-body-font-family);
    padding-bottom: 0;
}

    body > .container {
        flex: 1 1 auto; /* pushes footer down on short pages */
    }

.footer {
    margin-top: auto; /* sits at bottom of short pages */
    min-height: var(--footer-height); /* was: height — allow wrapping on small screens */
    display: flex;
    align-items: center;
    background-color: var(--brand-dark);
    color: var(--brand-gray);
    font-size: .875rem;
}

    .footer a {
        color: var(--brand-gray);
        text-decoration: none;
    }

        .footer a:hover {
            color: #fff;
        }
/* buttons */
/* solid button variants — brand palette */
.btn-brand-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-dark);
    --bs-btn-border-color: var(--brand-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1c1b1a;
    --bs-btn-hover-border-color: #1c1b1a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #141312;
    --bs-btn-active-border-color: #141312;
}

.btn-brand-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #256549;
    --bs-btn-hover-border-color: #256549;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1e523c;
    --bs-btn-active-border-color: #1e523c;
}

.btn-brand-amber {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-amber);
    --bs-btn-border-color: var(--brand-amber);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b57603;
    --bs-btn-hover-border-color: #b57603;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9c6603;
    --bs-btn-active-border-color: #9c6603;
}

.btn-brand-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #335676;
    --bs-btn-hover-border-color: #335676;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2b4a65;
    --bs-btn-active-border-color: #2b4a65;
}
.btn-xs {
    --bs-btn-padding-y: .125rem;
    --bs-btn-padding-x: .375rem;
    --bs-btn-font-size: .75rem;
}

.btn-brand-plum {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-plum);
    --bs-btn-border-color: var(--brand-plum);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #64405f;
    --bs-btn-hover-border-color: #64405f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #543550;
    --bs-btn-active-border-color: #543550;
}
.btn-primary {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: #b80029;
    --bs-btn-hover-border-color: #b80029;
    --bs-btn-active-bg: #9e0023;
    --bs-btn-active-border-color: #9e0023;
}


.btn-outline-primary {
    --bs-btn-color: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red);
    --bs-btn-hover-border-color: var(--brand-red);
    --bs-btn-active-bg: #b80029;
    --bs-btn-active-border-color: #b80029;
}

.btn-secondary {
    --bs-btn-bg: var(--brand-gray);
    --bs-btn-border-color: var(--brand-gray);
    --bs-btn-hover-bg: #6f727c;
    --bs-btn-hover-border-color: #6f727c;
    --bs-btn-active-bg: #5f626b;
    --bs-btn-active-border-color: #5f626b;
}
 

/* form controls & switches use brand red for focus/checked */
.form-check-input:checked {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.form-control:focus,
.form-check-input:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 .25rem rgba(228, 0, 50, .25);
}

/* navbar */
.navbar {
    background-color: var(--brand-dark) !important;
}

    .navbar .navbar-brand,
    .navbar .nav-link {
        color: #fff;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: var(--brand-red);
        }

/* tables */
.table thead th {
    background-color: var(--brand-dark);
    color: #fff;
    font-weight: 600;
}
.topic-input {
    border: 2px solid var(--brand-gray);
}

    .topic-input:focus {
        border-color: var(--brand-red);
    }
/* outline button variants — brand palette */
.btn-outline-brand-dark {
    --bs-btn-color: var(--brand-dark);
    --bs-btn-border-color: var(--brand-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1c1b1a;
    --bs-btn-active-border-color: #1c1b1a;
}

.btn-outline-brand-red {
    --bs-btn-color: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-red);
    --bs-btn-hover-border-color: var(--brand-red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b80029;
    --bs-btn-active-border-color: #b80029;
}

.btn-outline-brand-gray {
    --bs-btn-color: var(--brand-gray);
    --bs-btn-border-color: var(--brand-gray);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-gray);
    --bs-btn-hover-border-color: var(--brand-gray);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6f727c;
    --bs-btn-active-border-color: #6f727c;
}

.btn-outline-brand-green {
    --bs-btn-color: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green);
    --bs-btn-hover-border-color: var(--brand-green);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #256549;
    --bs-btn-active-border-color: #256549;
}

.btn-outline-brand-amber {
    --bs-btn-color: #a86f03; /* darker than --brand-amber for contrast on white */
    --bs-btn-border-color: var(--brand-amber);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-amber);
    --bs-btn-hover-border-color: var(--brand-amber);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b57603;
    --bs-btn-active-border-color: #b57603;
}

.btn-outline-brand-blue {
    --bs-btn-color: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-blue);
    --bs-btn-hover-border-color: var(--brand-blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #335676;
    --bs-btn-active-border-color: #335676;
}

.btn-outline-brand-plum {
    --bs-btn-color: var(--brand-plum);
    --bs-btn-border-color: var(--brand-plum);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-plum);
    --bs-btn-hover-border-color: var(--brand-plum);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #64405f;
    --bs-btn-active-border-color: #64405f;
}

.brand-logo {
    height: 36px;
    width: auto;
    border-radius: 4px;
    object-fit: cover;
}
/* report tree flyout */
.tree-group {
    color: var(--brand-dark);
}

.report-leaf {
    color: var(--brand-blue);
    border-radius: .25rem;
}

    .report-leaf:hover {
        background-color: rgba(62,105,144,.12);
    }

    .report-leaf.active {
        background-color: var(--brand-blue);
        color: #fff;
    }
.page-scroll {
    max-height: calc(100dvh - 5rem - var(--footer-height) - 1rem);
    overflow-y: auto;
    padding-right: .5rem;
}
body.footer-sticky .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
}
body.page-fit {
    height: 100dvh;
    overflow: hidden; /* the inner region scrolls, not the document */
}

    body.page-fit > .container {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    body.page-fit main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.page-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: .5rem;
}
.form-control,
.card {
    border-color: #6c757d; /* Bootstrap secondary gray */
    border-width: 1.5px;
}
/* CallIn recall grid: fixed-height scroll with sticky header */
.call-grid-scroll {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
}

    .call-grid-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
.collapse-icon {
    display: inline-block;
    transition: transform .2s;
}

[aria-expanded="false"] .collapse-icon {
    transform: rotate(-90deg);
}
/* =====================================================================
   Call-In module (scoped: wrap views in <div class="callin">)
   ===================================================================== */
.callin {
    --ci-border: #d9dbe0;
    --ci-border-strong: #b9bcc5;
    --ci-surface: #fff;
    --ci-surface-alt: #f6f7f9;
    --ci-muted: #6b6f7a;
    --ci-accent: var(--brand-blue); /* primary action colour in this module */
    --ci-focus: rgba(62,105,144,.25);
}

    /* --- tone red down: only errors, Delete and the "danger" badge use it --- */
    .callin a {
        color: var(--ci-accent);
    }

        .callin a:hover {
            color: #2b4a65;
        }

    .callin .form-control,
    .callin .form-select {
        border: 1px solid var(--ci-border-strong);
        border-width: 1px;
        background-color: var(--ci-surface);
    }

        .callin .form-control:focus,
        .callin .form-select:focus,
        .callin .form-check-input:focus {
            border-color: var(--ci-accent);
            box-shadow: 0 0 0 .2rem var(--ci-focus);
        }

    .callin .form-check-input:checked {
        background-color: var(--ci-accent);
        border-color: var(--ci-accent);
    }

    .callin .form-control[readonly],
    .callin .form-control:disabled,
    .callin fieldset:disabled .form-control,
    .callin fieldset:disabled .form-select {
        background-color: var(--ci-surface-alt);
        color: var(--ci-muted);
        border-style: dashed;
    }

    .callin .form-label {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--ci-muted);
        margin-bottom: .2rem;
    }

    /* --- page header / view-mode bar --- */
    .callin .ci-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding-bottom: .75rem;
        margin-bottom: 1rem;
        border-bottom: 2px solid var(--brand-dark);
    }

        .callin .ci-header h2 {
            margin: 0;
            font-size: 1.35rem;
        }

        .callin .ci-header small {
            color: var(--ci-muted);
            font-weight: 500;
        }

    /* --- section panels (header block, tabs, pictures) --- */
    .callin .ci-panel {
        background: var(--ci-surface);
        border: 1px solid var(--ci-border);
        border-radius: .5rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
    }

    .callin .ci-panel-title {
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ci-muted);
        margin-bottom: .75rem;
    }

    /* --- tabs --- */
    .callin .nav-tabs {
        border-bottom: 1px solid var(--ci-border);
    }

        .callin .nav-tabs .nav-link {
            color: var(--ci-muted);
            font-weight: 600;
            border: 1px solid transparent;
            border-bottom: 0;
            padding: .5rem 1rem;
        }

            .callin .nav-tabs .nav-link:hover {
                color: var(--brand-dark);
                background: var(--ci-surface-alt);
            }

            .callin .nav-tabs .nav-link.active {
                color: var(--brand-dark);
                background: var(--ci-surface);
                border-color: var(--ci-border) var(--ci-border) var(--ci-surface);
                border-top: 3px solid var(--ci-accent);
            }

    .callin .tab-content {
        border: 1px solid var(--ci-border);
        border-top: 0;
        border-radius: 0 0 .5rem .5rem;
        padding: 1.25rem;
        background: var(--ci-surface);
    }

    /* --- action bars --- */
    .callin .ci-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
        padding: .75rem 1rem;
        background: var(--ci-surface-alt);
        border: 1px solid var(--ci-border);
        border-radius: .5rem;
        margin-bottom: 1rem;
    }

        .callin .ci-actions .ms-auto {
            margin-left: auto;
        }

    .callin .ci-actions-sticky {
        position: sticky;
        bottom: calc(var(--footer-height) + .5rem);
        z-index: 1020;
        box-shadow: 0 -2px 8px rgba(0,0,0,.06);
    }

    /* --- grids --- */
    .callin .table {
        --bs-table-hover-bg: rgba(62,105,144,.06);
    }

        .callin .table thead th {
            background: var(--ci-surface-alt);
            color: var(--brand-dark);
            border-bottom: 2px solid var(--ci-border-strong);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            white-space: nowrap;
        }

        .callin .table td {
            vertical-align: middle;
        }

            .callin .table td.ci-id {
                font-variant-numeric: tabular-nums;
                font-weight: 600;
            }

            .callin .table td.ci-vin {
                font-family: Consolas, "Cascadia Mono", monospace;
                letter-spacing: .03em;
            }

    .callin .call-grid-scroll {
        border-color: var(--ci-border);
    }

    .callin h5.ci-grid-title {
        font-size: .95rem;
        margin-top: 1.5rem;
        padding-bottom: .35rem;
        border-bottom: 1px solid var(--ci-border);
    }

    /* --- status badges --- */
    .callin .ci-status {
        display: inline-block;
        padding: .15rem .55rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 600;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .callin .ci-status-new {
        background: rgba(62,105,144,.12);
        color: var(--brand-blue);
        border-color: rgba(62,105,144,.35);
    }

    .callin .ci-status-sent {
        background: rgba(217,142,4,.12);
        color: #a86f03;
        border-color: rgba(217,142,4,.4);
    }

    .callin .ci-status-finalized {
        background: rgba(46,125,91,.12);
        color: var(--brand-green);
        border-color: rgba(46,125,91,.4);
    }

    .callin .ci-status-rejected {
        background: rgba(228,0,50,.08);
        color: var(--brand-red);
        border-color: rgba(228,0,50,.3);
    }

    .callin .ci-status-other {
        background: rgba(136,139,149,.18);
        color: #5c5f68;
        border-color: rgba(136,139,149,.45);
    }

    /* --- pictures --- */
    .callin .ci-pic-card {
        border: 1px solid var(--ci-border);
        border-radius: .5rem;
        overflow: hidden;
    }

        .callin .ci-pic-card.is-lead {
            border: 2px solid var(--brand-green);
        }

        .callin .ci-pic-card:has(input:checked) {
            outline: 3px solid var(--ci-focus);
        }

    /* --- messages --- */
    .callin .alert-info {
        background: rgba(62,105,144,.08);
        border-color: rgba(62,105,144,.3);
        color: var(--brand-dark);
    }

    .callin .text-danger {
        color: var(--brand-red) !important;
    }
/* validation stays red */