/* ============================================================
   be'ah portal — shared admin/portal component styles.
   Palette follows the platform green/white theme exposed by the
   onboarding wizard (see beah-green.css for the base overrides).
   ============================================================ */

/* --- Bootstrap gaps the portal still relies on ------------------
   Bootstrap 4 dropped `.btn-xs`, but 210 buttons across 62 views still ask for
   it, so every one of them has been rendering at full `.btn` size. This is the
   size they were written for: a step below `.btn-sm`, and still clear of the
   24px pointer-target floor. */
.btn-xs {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 4px;
}

    /* An icon-only one must not collapse to its glyph. */
    .btn-xs > .fa:only-child {
        min-width: 12px;
    }

/* Bootstrap 4 dropped `.btn-default` as well, and the portal uses it 210 times
   for its secondary button - so every one of them has been rendering as bare
   text with padding, no border and no fill. This is the quiet counterpart to
   `.btn-primary` the markup has always assumed. */
.btn-default {
    background-color: #fff;
    border-color: #D4DFD7;
    color: #1F2937;
}

    .btn-default:hover,
    .btn-default:focus {
        background-color: #F4F6F5;
        border-color: #A7BDAD;
        color: #0F172A;
    }

    .btn-default:active,
    .btn-default.active {
        background-color: #E8EFEA;
        border-color: #A7BDAD;
        color: #0F172A;
    }

    .btn-default:disabled,
    .btn-default.disabled,
    .btn-default:disabled:hover,
    .btn-default:disabled:focus,
    .btn-default.disabled:hover {
        background-color: #F8FAF9;
        border-color: #E2E8E4;
        color: #94A3A0;
    }

/* A disabled button stays as it is under the pointer: be'ah's green hover outranked the framework's disabled colour, so a
   button that could not be pressed lit up as if it could. Restated at a higher specificity than both, and the cursor says no. */
.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
}

.btn.btn-primary:disabled,
.btn.btn-primary:disabled:hover,
.btn.btn-primary:disabled:focus,
.btn.btn-primary:disabled:active,
.btn.btn-primary.disabled,
.btn.btn-primary.disabled:hover,
.btn.btn-primary.disabled:focus {
    background-color: #0C2940;
    border-color: #0C2940;
    color: #FFFFFF;
    box-shadow: none;
}

/* The Omani Rial symbol (BEAH-132, _shared/currency.js): <span class="beah-omr">OMR</span> keeps its text - read aloud and
   copied as OMR - and draws the Central Bank of Oman's symbol (Medium, images/currency/omani-rial.svg) over it, in the text's
   own colour and at its cap height, so it sits on the baseline beside the figure. The text is clipped and made transparent, not
   removed. The mask is a background, which browsers drop when printing unless told to keep it. */
.beah-omr {
    --beah-omr-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1200.5 338.1 346.4 232'%3E%3Cpath d='M1342.7,466.8c-.8-1.3-1.7-2.7-2.5-4-7.6-12.7-13.9-26.6-16.4-41.2-2.3-13.2-1-27.5,3.2-40.5,8.7-8.9,20-14.7,32.6-16.4,9.3-1.2,18.3-.3,27,3.3,8.9,3.8,16.9,9.6,24.1,16,8.2,7.3,22.3,24.1,22.3,24.1l15-26c-9.4-11.8-19.8-23.1-32.1-31.9-6.1-4.3-12.7-8-19.8-10.2-6.8-2.1-13.8-2.3-20.9-1.4-12.3,1.5-23.8,6.8-32.6,15.7-5.4,5.5-9.3,12-13.2,18.7-6,10.3-12.8,20.6-16.8,32-4.1,11.6-5.9,24.6-4.8,36.9.8,8.6,3.1,17,6.3,25h-53.8l-15,26h82.1c10.3,16.3,23.4,31,37.9,43.5,3.1,2.7,6.3,5.3,9.6,7.7h-159.4l-15,26h286.6l15-26h-50.8c-30.4-2.6-58.3-20.9-79.7-41.6-3.2-3.1-6.3-6.3-9.3-9.6h169.5l15.1-26h-204.4.2Z'/%3E%3C/svg%3E");
    display: inline-block;
    position: relative;
    width: 1.07em;
    height: .72em;
    overflow: hidden;
    vertical-align: baseline;
    white-space: nowrap;
    font-style: normal;
    -webkit-text-fill-color: transparent;
}

    .beah-omr::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: currentColor;
        -webkit-mask: var(--beah-omr-mask) center / contain no-repeat;
        mask: var(--beah-omr-mask) center / contain no-repeat;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .beah-omr::selection {
        -webkit-text-fill-color: transparent;
    }

/* A disabled field reads as one: the grey and the cursor the framework gives a disabled
   input, on dropdowns and text areas too - a select without .form-control kept the white of an
   editable one, and a .form-control select took Bootstrap's slightly different grey. */
select:disabled,
textarea:disabled,
.form-control:disabled {
    background-color: #eaeaea;
    cursor: not-allowed;
}

/* Every field in a window is drawn as the bordered ones in a form section and a filter row are: the same light slate border
   and 6px corners. On its own a .form-control took the old theme's faint grey border with square corners - a dropdown read
   as bare text beside its neighbours - and a disabled one, grey on grey, lost its edge entirely. A form section, a filter
   row, a field marked wrong and an input group's joined corners keep their own rules, which are more particular. */
.modal .form-control {
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}

    .modal .form-control:disabled {
        border-color: #CBD5E1;
    }

    .modal .form-control:focus {
        border-color: #2E7D32;
    }

/* One corner for every field: 6px on all four, whatever the field is and wherever it sits. The framework rounds only a
   text box in a form group (PortalLight's `.form-group input.form-control`, 5px) and the theme leaves every other
   .form-control at 1px, so a dropdown or a text area beside a text box read square - the fee kind beside its value on
   be'ah Platform settings, every dropdown in a page's form - and 5px beside 6px in a window or a form section. The
   input, select and textarea selector matches the framework's weight and comes after it. */
.form-control,
.form-group input.form-control,
.form-group select.form-control,
.form-group textarea.form-control {
    border-radius: 6px;
}

/* Joined fields keep one outline: 6px at its two outer ends and square where the parts meet - the +968 prefix's own
   rule further down rounds its start. Each is written heavier than the rule above, which would otherwise round a
   joint - a search box beside its button, the +968 field beside its prefix. */
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
    border-start-end-radius: 6px;
    border-end-end-radius: 6px;
}

.form-group .beah-phone-input > input.form-control,
.beah-phone-input > input.form-control {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.form-group .input-group .beah-search-field > input.form-control,
.input-group .beah-search-field > input.form-control {
    border-start-start-radius: 6px;
    border-end-start-radius: 6px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* A value the form already knows is wrong, said under the field while it is typed rather than at Save. */
.form-group.beah-field-invalid .form-control {
    border-color: #DC2626;
}

.beah-field-error {
    display: block;
    margin-top: 4px;
    color: #B91C1C;
    font-size: 12px;
}

/* --- Admin page shell ------------------------------------------ */
.page-wrapper {
    padding-top: 16px;
}

    .page-wrapper .panel.panel-white:not(.beah-kpi-card) {
        border: 1px solid #e4ece5;
        border-radius: 10px;
        margin-bottom: 16px;
    }

/* --- Flat page shell ------------------------------------------- */
.ui-wrapper-padder > .ui-wrapper {
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    /* The theme rows carry -15px side margins and used to sit inside this
       element's 15px padding. The padding is restored and cancelled with a
       matching negative margin, so rows line up with the content instead of
       spilling past it. */
    padding: 0 15px;
    margin: 0 -15px;
}

.beah-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 0;
    margin-bottom: 20px;
}

    .beah-page-head h2 {
        margin: 0 0 5px;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: 0;
        color: #0F172A;
    }

        .beah-page-head h2 i {
            margin-inline-end: 9px;
            font-size: 19px;
            color: #2E7D32;
        }

    .beah-page-head .breadcrumb {
        background: none;
        padding: 0;
        margin: 0;
        font-size: 12px;
    }

/* The page's own actions, spaced by the row rather than by whitespace: the runtime template compiler drops the
   whitespace between two buttons, which left them touching. */
.beah-page-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.beah-page-head-actions .btn {
    border-radius: 6px;
}

    /* Beside a solid primary, a white button's pale border fades into the page and it reads smaller though it is the
       same size - so in the head row it takes the firmer border its hover already uses. */
    .beah-page-head-actions .btn-default {
        border-color: #A7BDAD;
    }

.beah-page-section {
    background: #fff;
    border: 1px solid #e4ece5;
    border-radius: 10px;
    overflow: hidden;
}

/* The head's content shares the body's 16px column, so the tab strip lines up
   with the filters and table under it, and an action at its end lines up with
   whatever the section puts at the right edge below. */
.beah-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}

.beah-section-body {
    padding: 16px;
}

.beah-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

    .beah-section-title i {
        color: #2E7D32;
    }

    /* A primary button's icon is its text's colour - white on a solid green button (Process Refunds, Export), green on a
       view toggle's quiet selected state - not the title's green, which vanished into the button. */
    .beah-section-title .btn-primary i {
        color: inherit;
    }

.beah-section-title-tag {
    margin-inline-start: auto;
}

.beah-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    border: 1px solid;
    border-radius: 8px;
}

    .beah-alert i {
        flex-shrink: 0;
        margin-top: 1px;
        font-size: 15px;
    }

/* --- Filter bar ------------------------------------------------ */
.beah-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.beah-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .beah-filter label {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: #64748B;
    }

    .beah-filter select,
    .beah-filter .form-control {
        height: 32px;
        padding: 4px 10px;
        font-size: 12.5px;
        border: 1px solid #E2E8F0;
        border-radius: 6px;
    }

    .beah-filter select {
        min-width: 210px;
    }

        /* Pointer focus stays quiet - just the green border. */
        .beah-filter select:focus,
        .beah-filter .form-control:focus {
            border-color: #2E7D32;
            box-shadow: none;
        }

/* ...but keyboard focus must still be visible. Dropping the shadow above
           left these controls with no focus indicator at all: Bootstrap's
           `.form-control:focus { outline: 0 }` outranks the global
           `:focus-visible`, so the outline never landed either. */
.beah-filters .beah-filter select:focus-visible,
.beah-filters .beah-filter .form-control:focus-visible {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
}

/* A box typed into is a different case: the browser counts every focus on it as keyboard focus, so a click drew the ring
   around the green border as well - two outlines on a search box. The green border and the caret say where typing goes. */
.beah-filters .beah-filter input.form-control:focus-visible {
    outline: none;
}

/* A select that searches (_shared/searchSelect): the closed control matches a filter
   select, and the open panel lists only the few options that match what was typed. */
.beah-search-select {
    position: relative;
    min-width: 240px;
}

.beah-search-select-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: start;
    background: #fff;
    cursor: pointer;
}

.beah-search-select.has-value .beah-search-select-trigger {
    padding-inline-end: 44px;
}

.beah-search-select-value,
.beah-search-select-blank {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.beah-search-select-value {
    color: #0F172A;
    font-weight: 600;
}

.beah-search-select-blank {
    color: #334155;
}

.beah-search-select-caret {
    color: #64748B;
    transition: transform .15s ease-out;
}

.beah-search-select.has-value .beah-search-select-caret {
    position: absolute;
    inset-inline-end: 10px;
}

.beah-search-select.is-open .beah-search-select-caret {
    transform: rotate(180deg);
}

.beah-search-select-clear {
    position: absolute;
    top: 4px;
    inset-inline-end: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #64748B;
    font-size: 11px;
    line-height: 24px;
}

    .beah-search-select-clear:hover {
        background: #F1F5F9;
        color: #0F172A;
    }

/* Fixed, and placed from the trigger by searchSelect.js's place(), so a card that clips its overflow
   cannot cut the list short; it scrolls within the room the window leaves, search box pinned. */
.beah-search-select-panel {
    position: fixed;
    z-index: 1060;
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
    outline: none;
    animation: beah-search-select-in .12s ease-out;
}

@keyframes beah-search-select-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.beah-search-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}

    .beah-search-select-search > .fa-search {
        position: absolute;
        top: 50%;
        inset-inline-start: 10px;
        transform: translateY(-50%);
        color: #94A3B8;
        font-size: 12px;
        pointer-events: none;
    }

    /* Room for the search icon and the busy spinner wherever the control sits - a filter row, a form, a modal - not in filters
       alone, or the typed text runs under the icon. */
    .beah-search-select .beah-search-select-search .form-control {
        width: 100%;
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }

.beah-search-select-busy {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    margin-top: -6px;
    color: #2E7D32;
    font-size: 12px;
}

.beah-search-select-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.beah-search-select-option {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

    .beah-search-select-option.is-active {
        background: #EDF7EE;
    }

.beah-search-select-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #0F172A;
    font-size: 12.5px;
}

    .beah-search-select-name mark {
        padding: 0;
        background: transparent;
        color: #1B5E20;
        font-weight: 700;
    }

.beah-search-select-sub {
    grid-column: 1;
    color: #64748B;
    font-size: 11px;
}

.beah-search-select-tick {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #2E7D32;
}

.beah-search-select-option.is-selected .beah-search-select-name {
    font-weight: 600;
}

.beah-search-select-empty,
.beah-search-select-more {
    padding: 8px 10px 4px;
    color: #64748B;
    font-size: 11.5px;
}

.beah-search-select-more {
    margin-top: 4px;
    border-top: 1px solid #F1F5F9;
}

.beah-filters .beah-search-select-trigger:focus-visible,
.beah-search-select-clear:focus-visible {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .beah-search-select-panel {
        animation: none;
    }

    .beah-search-select-caret {
        transition: none;
    }
}

/* Every dropdown opens as the search dropdown's list does - the same card, the option under the pointer or the
   keys in light green, the chosen one bold with a green tick - instead of the operating system's blue list.
   `appearance: base-select` (Chromium 135+) is what makes a <select>'s list stylable; a browser without it keeps
   its own list and nothing else changes. The closed field keeps its .form-control look - only its arrow is drawn
   here, as the search dropdown's caret. The list opens in the top layer, so no card clips it. A select showing
   several rows (multiple / size) is a list already and is left alone. */
@supports (appearance: base-select) {
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    select:not([multiple]):not([size]) {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
    }

        select.form-control:not([multiple]):not([size]) {
            display: flex;
        }

        select:not([multiple]):not([size])::picker-icon {
            content: "\f107";
            margin-inline-start: auto;
            padding-inline-start: 8px;
            color: #64748B;
            font-family: FontAwesome;
            transition: transform .15s ease-out;
        }

        select:not([multiple]):not([size]):open::picker-icon {
            transform: rotate(180deg);
        }

    /* The list opens below its field, as a dropdown does, and turns above only when there is no useful room below.
       The browser's own default (position-try-order: most-block-size) opened it on whichever side had more room, so any
       dropdown in the lower half of the window opened upwards - the Collection Requests filters did. Below, a long list
       takes the room there is (stretch, up to 360px) and scrolls; it turns above only when less than 180px - or less than
       the whole list, when that is shorter - is left below (the min-height the position must hold). */
    select:not([multiple]):not([size])::picker(select) {
        position-try-order: normal;
        margin-block: 4px;
        padding: 6px;
        max-height: min(360px, 60vh);
        max-height: calc-size(stretch, min(size, 360px));
        min-height: calc-size(max-content, min(size, 180px));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        box-shadow: 0 10px 24px -6px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
    }

    select:not([multiple]):not([size]) option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 6px;
        color: #0F172A;
        font-size: 12.5px;
        font-weight: 400;
        white-space: normal;
        cursor: pointer;
    }

        select:not([multiple]):not([size]) option:checked {
            background: transparent;
            font-weight: 600;
        }

        select:not([multiple]):not([size]) option:hover,
        select:not([multiple]):not([size]) option:focus,
        select:not([multiple]):not([size]) option:focus-visible {
            background: #EDF7EE;
            outline: none;
        }

        select:not([multiple]):not([size]) option::checkmark {
            order: 1;
            margin-inline-start: auto;
            content: "\f00c";
            color: #2E7D32;
            font-family: FontAwesome;
            font-weight: 400;
        }

        select:not([multiple]):not([size]) option:disabled {
            background: transparent;
            color: #94A3B8;
            cursor: default;
        }

}

/* A dropdown drawn by the page (_shared/select.js, <beah-select>) for options that carry the Rial symbol, which a
   <select> can only show as text outside Chrome and Edge. It reads as the dropdowns above in every browser: the
   closed field a .form-control with the same caret, the list the search dropdown's card and options (the
   beah-search-select-* classes), without its search box. */
.beah-select {
    position: relative;
    min-width: 0;
}

/* The theme's height for a select (select.form-control, 2.05rem), so the two stand the same beside each other. */
.beah-select-trigger.form-control {
    height: 2.05rem;
}

.beah-select-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: start;
    white-space: nowrap;
    background: #fff;
    cursor: pointer;
}

    .beah-select-trigger:disabled {
        cursor: not-allowed;
    }

.beah-select-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beah-select-caret {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    color: #64748B;
    transition: transform .15s ease-out;
}

.beah-select.is-open .beah-select-caret {
    transform: rotate(180deg);
}

.beah-select-panel .beah-search-select-list {
    margin: 0;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .beah-select-caret {
        transition: none;
    }
}

/* Two date inputs reading as one control, under one label that says what the
   range is of. Logical gap, so it mirrors under RTL with the row. */
.beah-filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .beah-filter-range .form-control {
        min-width: 138px;
    }

.beah-filter-range-sep {
    color: #94A3B8;
}

.beah-filter-search {
    flex: 1 1 220px;
    min-width: 200px;
}

    .beah-filter-search form,
    .beah-filter .input-group {
        width: 100%;
    }

.beah-filters .input-search {
    flex: 1 1 auto;
    width: 1%;
    height: 32px;
    border-start-start-radius: 6px;
    border-end-start-radius: 6px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.beah-filters .input-group-append .btn {
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 6px;
    border-end-end-radius: 6px;
}

.beah-alert-info {
    background: #DBEAFE;
    color: #1e40af;
    border-color: #BFDBFE;
}

.beah-alert-warning {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.beah-alert-danger {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

.beah-alert-success {
    background: #dcfce7;
    color: #166534;
    border-color: #BBF7D0;
}

.beah-section-head .beah-tabs {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* --- Pages still on the theme's own markup ----------------------
   The framework screens under Administration (roles, users, audit log,
   scheduler, ...) come from PortalLight and cannot carry Beah classes, so
   the shell is matched on the theme markup instead. */
.ui-wrapper-padder .page-heading {
    padding: 2px 2px 0;
    margin: 0;
    background: none;
    border-bottom: 0 none !important;
}

    .ui-wrapper-padder .page-heading > [class^="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .ui-wrapper-padder .page-heading h2 {
        margin: 0 0 5px;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: 0;
        color: #0F172A;
    }

    .ui-wrapper-padder .page-heading .breadcrumb {
        background: none;
        padding: 0;
        margin: 0;
        font-size: 12px;
    }

    .ui-wrapper-padder .page-heading .btn-lg {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 6px;
    }

.ui-wrapper-padder .page-wrapper {
    padding-top: 0;
}

.ui-wrapper-padder .panel.panel-white:not(.beah-kpi-card) {
    margin-top: 18px;
    margin-bottom: 0;
    /* The theme pads .panel as well as .panel-body, which draws the card as two
       nested boxes; the body supplies the only inset. */
    padding: 0;
    background: #fff;
    border: 1px solid #e4ece5;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

    .ui-wrapper-padder .panel.panel-white:not(.beah-kpi-card) > .panel-body,
    .ui-wrapper-padder .tab-content > .tab-pane > .panel-body {
        padding: 16px;
    }

.ui-wrapper-padder .tabs-container .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    background: #F8FAFC;
    border: none;
    border-bottom: 1px solid #E2E8F0;
}

    .ui-wrapper-padder .tabs-container .nav-tabs > li {
        margin: 0;
        float: none;
    }

        .ui-wrapper-padder .tabs-container .nav-tabs > li > .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            color: #0F172A;
            background: #fff;
            border: 1px solid #E2E8F0;
            border-radius: 6px;
            cursor: pointer;
            transition: all .15s;
        }

            .ui-wrapper-padder .tabs-container .nav-tabs > li > .nav-link:hover {
                border-color: #2E7D32;
                color: #185c24;
            }

            .ui-wrapper-padder .tabs-container .nav-tabs > li > .nav-link.active {
                background: #2E7D32;
                border-color: #2E7D32;
                color: #fff;
            }

.ui-wrapper-padder .tabs-container .panel-body {
    border: none;
    border-radius: 0;
    background: transparent;
}

.ui-wrapper-padder .tabs-container .tab-content {
    padding: 0;
    border: none;
}

/* Plain Bootstrap tables on those pages, matched to the shared grid. */
.ui-wrapper-padder .panel-body .table > thead > tr > th {
    padding: 9px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748B;
    letter-spacing: .2px;
    background: #FAFBFC;
    border-bottom: 2px solid #E2E8F0;
    border-top: none;
}

.ui-wrapper-padder .panel-body .table > tbody > tr > td {
    padding: 11px 12px;
    font-size: 12.5px;
    border-top: none;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.ui-wrapper-padder .panel-body .table.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: transparent;
}

.ui-wrapper-padder .panel-body .table > tbody > tr:hover > td {
    background: #f0fdf4;
}

/* --- Tabulator, matched to the shared grid ---------------------- */
.ui-wrapper-padder .tabulator-wrapper {
    padding-top: 0;
}

.ui-wrapper-padder .tabulator {
    background: transparent;
    border: none;
    font-size: 12.5px;
}

    .ui-wrapper-padder .tabulator .tabulator-header {
        background: #FAFBFC;
        border: none;
        border-bottom: 2px solid #E2E8F0;
        color: #64748B;
    }

        .ui-wrapper-padder .tabulator .tabulator-header .tabulator-col {
            background: transparent;
            border-right: none;
        }

            .ui-wrapper-padder .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
                padding: 9px 12px;
            }

            .ui-wrapper-padder .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
                font-size: 11.5px;
                font-weight: 600;
                letter-spacing: .2px;
                text-transform: none;
                color: #64748B;
            }

    .ui-wrapper-padder .tabulator .tabulator-row,
    .ui-wrapper-padder .tabulator .tabulator-row.tabulator-row-even {
        background: #fff;
        border-bottom: 1px solid #F1F5F9;
    }

        .ui-wrapper-padder .tabulator .tabulator-row:hover,
        .ui-wrapper-padder .tabulator .tabulator-row.tabulator-row-even:hover {
            background: #f0fdf4;
        }

        .ui-wrapper-padder .tabulator .tabulator-row .tabulator-cell {
            padding: 11px 12px;
            border-right: none;
        }

    .ui-wrapper-padder .tabulator .tabulator-footer {
        background: transparent;
        border-top: 1px solid #E2E8F0;
        padding: 10px 0 0;
    }

        .ui-wrapper-padder .tabulator .tabulator-footer .tabulator-page {
            min-width: 28px;
            height: 28px;
            padding: 0 7px;
            font-size: 12px;
            color: #0F172A;
            background: #fff;
            border: 1px solid #E2E8F0;
            border-radius: 6px;
        }

            .ui-wrapper-padder .tabulator .tabulator-footer .tabulator-page.active {
                background: #2E7D32;
                border-color: #2E7D32;
                color: #fff;
                font-weight: 600;
            }

            .ui-wrapper-padder .tabulator .tabulator-footer .tabulator-page:disabled {
                opacity: .45;
            }

/* --- Panel headings and empty states --------------------------- */
.ui-wrapper-padder .panel-body > h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

    .ui-wrapper-padder .panel-body > h5 i {
        color: #2E7D32;
    }

.beah-empty {
    padding: 26px 0;
    text-align: center;
    font-size: 12.5px;
    color: #94A3B8;
}

    .beah-empty i {
        margin-inline-end: 8px;
        opacity: .7;
    }

/* --- KPI cards ------------------------------------------------ */
.beah-kpi-row {
    margin-top: 20px;
    margin-bottom: 4px;
}

.beah-kpi-card {
    background: #fff;
    display: flex;
    /* Top, not centre: filling the column makes every tile the same height, but
       centring then drops a two-line tile's number below its neighbours', which
       trades a ragged bottom edge for misaligned figures. */
    align-items: flex-start;
    gap: 14px;
    /* The column is already stretched by the row; minus the margin the card
       carries, so it fills it exactly rather than overflowing by 16px. */
    height: calc(100% - 16px);
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid #e4ece5;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

    .beah-kpi-card:hover {
        box-shadow: 0 4px 14px rgba(24, 92, 36, 0.12);
        transform: translateY(-1px);
    }

    .beah-kpi-card.beah-kpi-active {
        border-color: #2E7D32;
        box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18);
    }

    .beah-kpi-card.beah-kpi-static {
        cursor: default;
    }

        .beah-kpi-card.beah-kpi-static:hover {
            box-shadow: none;
            transform: none;
        }

.beah-kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.beah-kpi-green {
    background: #E8F5E9;
    color: #2E7D32;
}

.beah-kpi-amber {
    background: #FEF3C7;
    color: #B45309;
}

.beah-kpi-red {
    background: #FEE2E2;
    color: #B91C1C;
}

.beah-kpi-teal {
    background: #D1FAE5;
    color: #047857;
}

.beah-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #14221a;
}

.beah-kpi-label {
    font-size: 12px;
    color: #5E6D63;
}

/* A third line for the fact behind the number, quieter than the label so the
   card still reads value-first. */
.beah-kpi-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: #5E6D63;
}

/* --- Detail modal --------------------------------------------- */
.beah-detail-modal {
    max-width: 940px;
}

/* A detail modal whose table carries more columns than 940px seats comfortably. */
.beah-detail-modal-wide {
    max-width: 1180px;
}

/* The New Collection / Auction Request form: four waste fields to a row, each wide enough for its whole placeholder
   ("Select a waste collection point first" needs ~210px; at 1180px a quarter column gave exactly that). */
.beah-request-modal {
    max-width: 1280px;
}

.beah-ref-badge {
    display: inline-block;
    background: #E8F5E9;
    color: #185c24;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    margin-right: 6px;
}

.beah-fact-grid label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8a978e;
    margin-bottom: 2px;
}

.beah-fact-grid > div {
    margin-bottom: 14px;
}

.beah-subsection {
    border: 1px solid #e4ece5;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fbfdfb;
}

    .beah-subsection h5 {
        color: #185c24;
        font-weight: 700;
        margin-bottom: 8px;
    }

/* Place Bid: the collection and delivery cards stand at one height side by side, and free text keeps its line breaks */
.beah-bid-point {
    height: calc(100% - 14px);
}

    .beah-bid-point .beah-fact-grid > div:last-child {
        margin-bottom: 0;
    }

.beah-bid-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.beah-chip {
    margin-right: 4px;
    margin-bottom: 4px;
    display: inline-block;
}

/* --- Generic form helpers ------------------------------------- */
.beah-inline-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0;
}

.beah-multicheck {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e0e6e1;
    border-radius: 6px;
    padding: 8px 12px;
}

.beah-multicheck-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-weight: 400;
    cursor: pointer;
}

/* --- be'ah facility capacity ----------------------------------- */
.beah-capacity-table .form-control {
    height: 30px;
    font-variant-numeric: tabular-nums;
}

.beah-capacity-table .input-group-text {
    height: 30px;
    font-size: 12px;
    color: #64748B;
}

.beah-capacity-table td.text-right {
    font-variant-numeric: tabular-nums;
}

.beah-capacity-name {
    margin: 0;
    font-weight: 500;
}

/* be'ah Facility Management's form: the facility's details on the left and its map on the right, the map filling the
   height of the details beside it; stacked below 992px. */
.beah-facility-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

    .beah-facility-split > .row {
        align-content: start;
    }

.beah-facility-split-map {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

    .beah-facility-split-map .beah-map-picker {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    .beah-facility-split-map .beah-map-frame {
        flex: 1 1 auto;
        min-height: 300px;
    }

@media (max-width: 991px) {
    .beah-facility-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The dropdown a waste type is added from, above the table of those added. */
.beah-capacity-add {
    max-width: 420px;
}

.beah-capacity-remove {
    width: 30px;
    height: 30px;
    padding: 0;
}

/* In be'ah Facility Management's form the columns after the waste type are sized to what they hold: On Hand to its figure,
   Capacity to the input - which fills it - and the warning under it on one line, and the remove button right after, so
   nothing leaves a gap between the capacity and its ×. The waste type takes the rest. */
.beah-capacity-table th.beah-capacity-onhand {
    width: 150px;
}

.beah-capacity-table th.beah-capacity-limit {
    width: 310px;
}

.beah-capacity-table th.beah-capacity-action {
    width: 56px;
}

.beah-capacity-input + .beah-capacity-over {
    white-space: nowrap;
}

/* Every row of the form lines up on its capacity input, top-aligned, so the warning under one adds to the row's height below
   the input and never moves the input itself; the name and figure sit level with the input's text (a 30px input, 20px text). */
.beah-facility-modal .beah-capacity-table td {
    vertical-align: top;
}

    .beah-facility-modal .beah-capacity-table td:not(:nth-child(3)):not(:last-child) {
        padding-top: 16px;
    }

/* be'ah Facility Management's form is wide enough for the map's search, Use My Location and View on Map on one row beside
   the facility's details; the search gives way first. Below that width the toolbar wraps as every map's does. */
.beah-detail-modal.beah-facility-modal {
    max-width: 1440px;
}

.beah-facility-split-map .beah-map-search {
    flex-basis: 200px;
}

.beah-capacity-over {
    margin-top: 4px;
    color: #B45309;
    font-size: 11px;
}

.beah-capacity-note {
    color: #64748B;
    font-size: 11px;
}

.beah-capacity-bar {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 52px);
    height: 8px;
    border-radius: 4px;
    background: #EEF2F0;
    overflow: hidden;
}

.beah-capacity-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: #43A047;
}

    .beah-capacity-bar-fill.is-near {
        background: #F59E0B;
    }

    .beah-capacity-bar-fill.is-full {
        background: #DC2626;
    }

.beah-capacity-percent {
    display: inline-block;
    width: 48px;
    text-align: end;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

/* --- Settings screen ------------------------------------------ */
.beah-setting-group {
    border-bottom: 1px solid #ecf1ed;
    padding-bottom: 8px;
    margin-bottom: 18px;
}

    .beah-setting-group h4 {
        color: #185c24;
        font-weight: 700;
        margin-bottom: 14px;
    }

        .beah-setting-group h4 i {
            margin-right: 8px;
        }

/* --- Company profile ------------------------------------------ */
.beah-company-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.beah-company-avatar {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: linear-gradient(135deg, #185c24, #2E7D32);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.beah-company-header h3 {
    margin: 0 0 6px;
    font-weight: 700;
    color: #14221a;
}

.beah-company-header .label {
    margin-right: 4px;
}

.beah-mini-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8a978e;
    margin-bottom: 4px;
}

/* --- Contract renewal ----------------------------------------- */
.beah-renewal-steps {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.beah-renewal-step {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f2f6f2;
    color: #7d8a80;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .beah-renewal-step span {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #d9e3da;
        color: #55655a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        flex-shrink: 0;
    }

    .beah-renewal-step.active {
        background: #E8F5E9;
        color: #185c24;
    }

        .beah-renewal-step.active span {
            background: #2E7D32;
            color: #fff;
        }

    .beah-renewal-step.done {
        background: #E8F5E9;
        color: #2E7D32;
    }

.beah-sign-pad {
    border: 2px dashed #cddcce;
    border-radius: 10px;
    background: #fbfdfb;
}

    .beah-sign-pad canvas {
        width: 100%;
        height: 160px;
        display: block;
        touch-action: none;
        cursor: crosshair;
    }

.beah-sign-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid #e6efe7;
    font-size: 12px;
}

.beah-success-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* --- Job cards (transporter) ---------------------------------- */
.beah-job-card {
    border: 1px solid #e4ece5;
    border-radius: 10px;
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
}

.beah-job-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #fbfdfb;
    border-bottom: 1px solid #eef4ef;
}

.beah-job-meta {
    display: flex;
    gap: 16px;
    color: #6b7a70;
    font-size: 13px;
}

.beah-job-body {
    padding: 12px 16px;
}

.beah-job-route {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-bottom: 8px;
}

.beah-job-route-arrow {
    color: #2E7D32;
}

.beah-job-assets {
    display: flex;
    gap: 14px;
    align-items: center;
    color: #55655a;
    font-size: 13px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.beah-job-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Timeline -------------------------------------------------- */
.beah-timeline {
    position: relative;
    padding-left: 18px;
}

.beah-timeline-item {
    position: relative;
    padding-bottom: 10px;
}

    .beah-timeline-item:before {
        content: '';
        position: absolute;
        left: -13px;
        top: 8px;
        bottom: -4px;
        width: 2px;
        background: #dce8dd;
    }

    .beah-timeline-item:last-child:before {
        display: none;
    }

.beah-timeline-dot {
    position: absolute;
    left: -17px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2E7D32;
}

.beah-row-muted {
    opacity: 0.55;
}

/* --- Driver app ------------------------------------------------ */
.beah-driver-app {
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

.beah-driver-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #185c24, #2E7D32);
    color: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

    .beah-driver-header h3 {
        margin: 0 0 4px;
        color: #fff;
        font-weight: 700;
    }

    .beah-driver-header .text-muted {
        color: rgba(255, 255, 255, 0.75) !important;
    }

.beah-driver-gps {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
}

    .beah-driver-gps.on {
        background: rgba(255, 255, 255, 0.9);
        color: #185c24;
    }

.beah-driver-job {
    border: 1px solid #e4ece5;
    border-radius: 14px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}

.beah-driver-job-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fbfdfb;
    border-bottom: 1px solid #eef4ef;
    font-size: 15px;
}

.beah-driver-job-body {
    padding: 14px 16px;
}

.beah-driver-fact {
    display: block;
    color: #3d4a41;
    font-size: 14px;
    margin-bottom: 8px;
}

    .beah-driver-fact i {
        width: 22px;
        color: #2E7D32;
    }

.beah-driver-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.beah-driver-btn {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: #2E7D32;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

    .beah-driver-btn.alt {
        background: #E8F5E9;
        color: #185c24;
    }

/* --- Live map -------------------------------------------------- */
.beah-map {
    position: relative;
    border-radius: 12px;
    background: linear-gradient(160deg, #eaf3ea 0%, #dcebde 55%, #cfe3d3 100%);
    border: 1px solid #d8e5d9;
    overflow: hidden;
}

.beah-map-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

    .beah-map-grid line {
        stroke: rgba(24, 92, 36, 0.07);
        stroke-width: 0.3;
    }

.beah-map-label {
    position: absolute;
    bottom: 10px;
    right: 14px;
    color: rgba(24, 92, 36, 0.4);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.beah-map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    background: #2E7D32;
    color: #fff;
    border-radius: 18px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(20, 40, 25, 0.25);
    transition: transform .15s ease;
    white-space: nowrap;
}

    .beah-map-marker:hover,
    .beah-map-marker.selected {
        transform: translate(-50%, -50%) scale(1.12);
        z-index: 5;
    }

    .beah-map-marker.alert {
        background: #C62828;
        animation: beah-pulse 1.4s infinite;
    }

@keyframes beah-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.5);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(198, 40, 40, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(198, 40, 40, 0);
    }
}

.beah-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7d9483;
    font-weight: 600;
}

    .beah-map-empty i {
        font-size: 30px;
    }

/* --- Telemetry panel ------------------------------------------- */
.beah-telemetry h4 {
    color: #185c24;
    font-weight: 700;
    margin-bottom: 12px;
}

.beah-telemetry .beah-fact-grid label {
    margin-top: 8px;
}

.beah-telemetry-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0;
}

.beah-telemetry-tile {
    background: #fbfdfb;
    border: 1px solid #e4ece5;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

    .beah-telemetry-tile i {
        color: #2E7D32;
        display: block;
        margin-bottom: 4px;
    }

    .beah-telemetry-tile strong {
        font-size: 18px;
        display: block;
        color: #14221a;
    }

    .beah-telemetry-tile span {
        font-size: 11px;
        color: #7d8a80;
    }

/* --- Marketplace lot cards ------------------------------------- */
.beah-lot-card {
    border: 1px solid #e4ece5;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .beah-lot-card:hover {
        box-shadow: 0 6px 18px rgba(24, 92, 36, 0.14);
        transform: translateY(-2px);
    }

.beah-lot-head {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.beah-lot-card h4 {
    color: #14221a;
    font-weight: 700;
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A lot's auction reference, in small print above its name. */
.beah-lot-ref {
    margin-bottom: 2px;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.beah-lot-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: #6b7a70;
    font-size: 12px;
    margin-bottom: 10px;
}

    .beah-lot-meta i {
        color: #2E7D32;
    }

.beah-lot-price {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: #F4F9F4;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

    .beah-lot-price label {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: #7d8a80;
        margin-bottom: 2px;
    }

    .beah-lot-price strong {
        font-size: 17px;
        color: #185c24;
    }

.beah-lot-mybid strong {
    color: #B45309;
}

.beah-lot-footer {
    display: flex;
    justify-content: space-between;
    color: #6b7a70;
    font-size: 12px;
}

/* --- Bid panel -------------------------------------------------- */
.beah-bid-panel {
    background: #fbfdfb;
    border: 1px solid #e4ece5;
    border-radius: 12px;
    padding: 16px;
}

.beah-bid-countdown {
    text-align: center;
    background: #185c24;
    color: #fff;
    border-radius: 8px;
    padding: 8px;
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.beah-bid-current {
    text-align: center;
    margin-bottom: 12px;
}

    .beah-bid-current label {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        color: #7d8a80;
    }

    .beah-bid-current strong {
        font-size: 26px;
        color: #185c24;
    }

.beah-bid-input {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    height: auto;
    padding: 10px;
}

.beah-my-bid-row {
    background: #E8F5E9 !important;
}

/* --- Auction lot: pictures, stock, bidders, display mode --------- */
.beah-auction-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.beah-auction-photo {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #F8FAF9;
}

    .beah-auction-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.beah-auction-photo-remove {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 11px;
    line-height: 26px;
}

    .beah-auction-photo-remove:hover {
        background: #B91C1C;
    }

.beah-auction-photo-add,
.beah-form-section label.beah-auction-photo-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 1;
    margin: 0;
    border: 1px dashed #A7C4AE;
    border-radius: 8px;
    background: #F4FAF5;
    color: #2E7D32;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .beah-auction-photo-add:hover {
        background: #EDF7EE;
        border-color: #2E7D32;
    }

    .beah-auction-photo-add:focus-within {
        outline: 2px solid #2E7D32;
        outline-offset: 2px;
    }

    .beah-auction-photo-add .fa {
        font-size: 18px;
    }

    .beah-auction-photo-add input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .beah-auction-photo-add.is-busy {
        cursor: progress;
    }

/* The auction form's Source Receipts: the stock a lot is made of, picked oldest first (LotSourceManager). */
.beah-lot-sources {
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background: #FBFCFD;
}

.beah-lot-sources-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.beah-lot-sources-title {
    font-weight: 700;
    color: #1F2937;
}

    .beah-lot-sources-title .fa {
        color: var(--beah-green);
        margin-inline-end: 4px;
    }

.beah-lot-sources-head .btn {
    margin-inline-start: auto;
}

.beah-lot-sources .beah-profile-note {
    margin: 6px 0 10px;
}

.beah-lot-sources-scroll {
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
}

.beah-lot-sources-table .beah-select-col {
    width: 40px;
    text-align: center;
}

.beah-lot-sources-table input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--beah-green);
}

.beah-lot-sources-table tbody tr {
    cursor: pointer;
}

    .beah-lot-sources-table tbody tr.is-selected {
        background: #F2F8F3;
    }

.beah-lot-sources-sub {
    display: block;
    font-size: 12px;
    color: #475569;
}

.beah-lot-sources .beah-alert {
    margin: 10px 0 0;
}

/* The handover at a waste collection point (_shared/pickupHandover): the pickup code, the proof, the generator's say. */
.beah-handover .beah-alert {
    margin-bottom: 10px;
}

.beah-handover-pass {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
}

    .beah-handover-pass img {
        width: 168px;
        height: 168px;
        image-rendering: pixelated;
    }

.beah-handover-code {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.18em;
    font-variant-numeric: tabular-nums;
    color: #1F2937;
}

.beah-handover-pass .btn {
    margin-top: 8px;
}

.beah-handover-form {
    margin-top: 8px;
}

.beah-handover-actions,
.beah-handover-dispute {
    margin-top: 8px;
}

    .beah-handover-actions .btn + .btn,
    .beah-handover-dispute .btn + .btn {
        margin-inline-start: 6px;
    }

    .beah-handover-dispute textarea {
        margin: 4px 0 8px;
    }

.beah-handover-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.beah-handover-photo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 96px;
    font-size: 11px;
    color: #475569;
    text-align: center;
}

    .beah-handover-photo img {
        width: 96px;
        height: 72px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #E2E8F0;
    }

    .beah-handover-photo.is-id img {
        border-color: var(--beah-green);
    }

.beah-driver-code {
    font-size: 24px;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.beah-driver-proof {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Waste Traceability's trace window (beah-admin/traceability/traceModal): the journey as a row of steps, then tables. */
.beah-trace-back {
    padding-inline-start: 0;
    margin-bottom: 8px;
}

.beah-trace-chain {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.beah-trace-step {
    position: relative;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    background: #fff;
}

    .beah-trace-step + .beah-trace-step {
        border-inline-start: 0;
    }

    .beah-trace-step:first-child {
        border-start-start-radius: 8px;
        border-end-start-radius: 8px;
    }

    .beah-trace-step:last-child {
        border-start-end-radius: 8px;
        border-end-end-radius: 8px;
    }

    /* The arrow between two steps. */
    .beah-trace-step + .beah-trace-step::before {
        content: "\f105";
        font-family: FontAwesome;
        position: absolute;
        top: 22px;
        inset-inline-start: -8px;
        width: 16px;
        height: 16px;
        line-height: 14px;
        text-align: center;
        font-size: 12px;
        color: var(--beah-green);
        background: #fff;
        border: 1px solid #E2E8F0;
        border-radius: 50%;
    }

[dir="rtl"] .beah-trace-step + .beah-trace-step::before {
    content: "\f104";
}

.beah-trace-step-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #EDF7EE;
    color: var(--beah-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.beah-trace-step-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
}

.beah-trace-step-main {
    margin: 2px 0 4px;
    font-weight: 700;
    color: #1F2937;
    overflow-wrap: anywhere;
}

.beah-trace-step-sub {
    font-size: 12px;
    color: #475569;
    overflow-wrap: anywhere;
}

.beah-trace-sub {
    display: block;
    font-size: 12px;
    color: #475569;
}

.beah-trace-table tbody tr.is-released td {
    color: #64748B;
}

@media (max-width: 991px) {
    .beah-trace-chain {
        grid-template-columns: minmax(0, 1fr);
    }

    .beah-trace-step + .beah-trace-step {
        border-inline-start: 1px solid #E2E8F0;
        border-top: 0;
    }

    .beah-trace-step:first-child {
        border-radius: 8px 8px 0 0;
    }

    .beah-trace-step:last-child {
        border-radius: 0 0 8px 8px;
    }

    .beah-trace-step + .beah-trace-step::before {
        content: "\f107";
        top: -8px;
        inset-inline-start: 22px;
    }
}

.beah-auction-stock {
    padding: 10px 12px;
    border: 1px solid #CFE6D3;
    border-radius: 8px;
    background: #F4FAF5;
    font-variant-numeric: tabular-nums;
}

    .beah-auction-stock.is-short {
        border-color: #F3C2C2;
        background: #FDF2F2;
    }

.beah-auction-stock-figure {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: #334155;
    font-size: 12px;
}

    .beah-auction-stock-figure strong {
        color: #0F172A;
        font-size: 16px;
    }

.beah-auction-stock-sub {
    color: #64748B;
    font-size: 11.5px;
}

.beah-auction-stock-need {
    margin-top: 6px;
    color: #1B5E20;
    font-size: 12px;
    font-weight: 600;
}

.beah-auction-stock.is-short .beah-auction-stock-need {
    color: #B91C1C;
}

/* New Auction's bidders: every active recycler and trader, found among many by a search, an Eligible / Unavailable view and
   the role, then listed in two columns that scroll inside the section - a hundred companies is fifty rows, not a hundred. */
.beah-bidder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    /* The search takes the whole first row; the role and then the All / Eligible / Unavailable toggle share the second - a
       filter first and the view at the far end, as the portal's pages lay them out - the role taking what the toggle leaves. */
    .beah-bidder-toolbar .beah-bidder-search {
        flex: 1 1 100%;
        min-width: 0;
    }

    .beah-bidder-toolbar .beah-bidder-role {
        flex: 1 1 160px;
        width: auto;
        min-width: 0;
    }

.beah-bidder-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.beah-bidder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

/* New Auction is three columns on a wide screen: the lot and its stock | its pricing and schedule | the bidders, which get a tall
   column of their own and list one to a row. Between 992 and 1400px the bidders go full width beneath the first two (and list
   two to a row again); below 992px everything stacks. */
.modal-dialog.beah-auction-modal {
    max-width: min(1680px, 96vw);
}

.beah-auction-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
}

.beah-auction-col {
    min-width: 0;
}

@media (min-width: 992px) {
    .beah-auction-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .beah-auction-col-bidders {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1400px) {
    .beah-auction-layout {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .beah-auction-col-bidders {
        grid-column: auto;
    }

        .beah-auction-col-bidders .beah-bidder-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .beah-auction-col-bidders .beah-bidder-grid .beah-bidder-row {
            border-inline-end: 0;
        }

        .beah-auction-col-bidders .beah-bidder-list {
            max-height: min(640px, 62vh);
        }
}

    .beah-bidder-grid .beah-bidder-row {
        border-inline-end: 1px solid #F1F5F9;
    }

.beah-bidder-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.beah-bidder-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .beah-bidder-line .beah-bidder-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.beah-bidder-reason {
    overflow: hidden;
    color: #94A3B8;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-bidder-row.is-invited {
    background: #F4FAF5;
}

.beah-bidder-row.is-unavailable {
    cursor: default;
}

    .beah-bidder-row.is-unavailable .beah-bidder-name,
    .beah-bidder-row.is-unavailable code {
        color: #94A3B8;
    }

    .beah-bidder-row.is-unavailable .beah-pill {
        opacity: .55;
    }

    .beah-bidder-row.is-unavailable:hover {
        background: transparent;
    }

.beah-bidder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #F1F5F9;
    font-weight: 400;
    cursor: pointer;
}

    .beah-bidder-row:last-child {
        border-bottom: 0;
    }

    .beah-bidder-row:hover {
        background: #F8FAF9;
    }

    .beah-bidder-row code {
        color: #64748B;
        white-space: nowrap;
    }

.beah-bidder-all {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #F8FAFC;
    font-weight: 600;
}

.beah-bidder-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #0F172A;
}

.beah-mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.beah-mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    font-weight: 400;
    cursor: pointer;
}

    .beah-mode-card:hover {
        border-color: #A7C4AE;
    }

    .beah-mode-card.is-selected {
        border-color: #2E7D32;
        background: #EDF7EE;
        box-shadow: 0 0 0 1px #2E7D32;
    }

    .beah-mode-card input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .beah-mode-card:focus-within {
        outline: 2px solid #2E7D32;
        outline-offset: 2px;
    }

.beah-mode-card-title {
    color: #0F172A;
    font-weight: 700;
}

    .beah-mode-card-title .fa {
        margin-inline-end: 6px;
        color: #2E7D32;
    }

.beah-mode-card-text {
    color: #475569;
    font-size: 12px;
}

.beah-rank-badge {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F1F5F9;
    color: #334155;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

    .beah-rank-badge.is-first {
        background: #EDF7EE;
        color: #1B5E20;
    }

.beah-auction-description {
    margin: 4px 0 12px;
    color: #334155;
    white-space: pre-line;
}

.beah-auction-invited {
    color: #334155;
}

.beah-pay-panel {
    background: #fbfdfb;
    border: 1px solid #e4ece5;
    border-radius: 10px;
    padding: 14px 16px;
}

/* --- Mini bar chart -------------------------------------------- */
.beah-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 160px;
    padding: 10px 4px 26px;
    position: relative;
}

.beah-bar {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.beah-bar-fill {
    width: 70%;
    background: linear-gradient(180deg, #43A047, #2E7D32);
    border-radius: 6px 6px 0 0;
    min-height: 3px;
    transition: height .3s ease;
}

.beah-bar-value {
    position: absolute;
    top: -6px;
    font-size: 10px;
    color: #55655a;
}

.beah-bar-label {
    position: absolute;
    bottom: 4px;
    font-size: 11px;
    color: #7d8a80;
}

/* --- Compliance cards ------------------------------------------ */
.beah-compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}

.beah-compliance-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    border-inline-start-width: 4px;
    box-shadow: 0 1px 2px rgba(22, 32, 26, .05);
}

.beah-cc-title {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.beah-cc-detail {
    font-size: 12.5px;
    color: #64748B;
    overflow-wrap: anywhere;
}

.beah-cc-valid {
    border-inline-start-color: #2E7D32;
}

.beah-cc-expiring {
    border-inline-start-color: #F9A825;
}

.beah-cc-expired {
    border-inline-start-color: #C62828;
}

.beah-cc-unknown {
    border-inline-start-color: #9aa79d;
}

.beah-cc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.beah-cc-expiry {
    margin-top: 2px;
    font-size: 11.5px;
    color: #64748B;
}

    .beah-cc-expiry i {
        margin-inline-end: 4px;
    }

/* --- Ticket thread --------------------------------------------- */
.beah-ticket-thread {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e4ece5;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbfdfb;
}

.beah-ticket-reply {
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eef4ef;
    margin-bottom: 8px;
}

    .beah-ticket-reply.internal {
        background: #FFF8E1;
        border-color: #F1E4B3;
    }

.beah-ticket-reply-head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
}

/* --- Horizontal bars ------------------------------------------- */
.beah-hbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.beah-hbar-label {
    width: 130px;
    font-size: 12px;
    color: #3d4a41;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beah-hbar-track {
    flex: 1;
    background: #eef4ef;
    border-radius: 6px;
    height: 14px;
    overflow: hidden;
}

.beah-hbar-fill {
    height: 100%;
    background: linear-gradient(90deg, #43A047, #2E7D32);
    border-radius: 6px;
    transition: width .3s ease;
}

.beah-hbar-value {
    width: 54px;
    font-size: 12px;
    font-weight: 700;
    color: #185c24;
}

/* --- Template version preview --------------------------------- */
.beah-version-preview {
    margin-top: 10px;
}

.beah-preview-box[dir="rtl"] {
    text-align: right;
}

.beah-preview-box {
    border: 1px solid #e4ece5;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fbfdfb;
    max-height: 260px;
    overflow-y: auto;
}

/* --- Login screen ---------------------------------------------- */
body:has(#beah-login-page) {
    margin: 0;
}

#beah-login-page {
    min-height: 100vh;
}

.login-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(430px, 1fr) minmax(460px, 1fr);
}

.login-role-panel {
    padding: 54px clamp(36px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    position: relative;
}

.login-brand {
    position: absolute;
    top: 54px;
    left: clamp(36px, 6vw, 96px);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.login-role-content {
    max-width: 560px;
    margin: 0;
    padding-top: clamp(190px, 23vh, 230px);
}

    .login-role-content h1 {
        font-size: 34px;
        line-height: 1.15;
        margin-bottom: 10px;
    }

    .login-role-content > p {
        font-size: 14px;
        margin-bottom: 28px;
    }

.role-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
}

.role-card {
    min-height: 58px;
    border-radius: 10px;
    padding: 0 18px;
    cursor: pointer;
    transition: all .16s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.role-icon {
    font-size: 20px;
    width: 26px;
    display: grid;
    place-items: center;
    margin: 0;
    color: inherit;
}

.role-name {
    font-size: 14px;
    font-weight: 700;
    color: inherit;
    display: block;
}

.login-foot {
    margin-top: auto;
    padding-top: 30px;
    font-size: 11px;
}

.login-card {
    background: #fff;
    padding: 54px clamp(42px, 8vw, 120px);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    position: relative;
}

.login-card-head {
    position: absolute;
    top: 54px;
    left: clamp(42px, 8vw, 120px);
    right: clamp(42px, 8vw, 120px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.login-logo-mark {
    width: 84px;
    height: 84px;
    overflow: hidden;
    flex: none;
    background: #fff;
}

    .login-logo-mark img {
        display: block;
        width: 168px;
        height: 84px;
        max-width: none;
        transform: translateX(-42px);
    }

.login-toolbar {
    display: flex;
    justify-content: flex-end;
}

.login-form-wrap {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding-top: clamp(190px, 23vh, 230px);
}

.login-card h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 6px;
    text-align: left;
}

.login-card .sub {
    font-size: 14px;
    text-align: left;
    margin-bottom: 30px;
}

.login-register {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
}

    .login-register a {
        font-weight: 800;
        text-decoration: none;
        margin-left: 4px;
    }

.beah-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.beah-forgot-link {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.lang-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .15s ease;
}

    .lang-btn:hover {
        background: #eef2f5;
    }

@media (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-role-panel {
        padding: 30px 24px;
    }

    .login-brand {
        position: static;
    }

    .login-role-content {
        max-width: none;
        padding-top: 12px;
    }

        .login-role-content h1 {
            font-size: 28px;
        }

    .login-foot {
        display: none;
    }

    .login-card {
        padding: 30px 24px;
    }

    .login-card-head {
        position: static;
        margin-bottom: 34px;
    }

    .login-form-wrap {
        max-width: 480px;
        padding-top: 0;
    }

    .login-logo-mark {
        width: 68px;
        height: 68px;
    }

        .login-logo-mark img {
            width: 136px;
            height: 68px;
            transform: translateX(-34px);
        }
}

/* --- Portal shell (topbar + sidebar) --------------------------- */
#page-wrapper {
    padding: 0 !important;
}

.navbar-top-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
}

/* The header row is a fixed 50/50 split, so a long username pushed the chip
   list past its column and the logout label wrapped onto a second line.
   The chip list is now capped at its column and the username is the only
   item allowed to shrink, so the logout button always keeps its size. */
.navbar-static-top .system-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Every chip keeps its size; only the username gives way. */
.navbar-top-links > li {
    flex: none;
    min-width: 0;
}

    .navbar-top-links > li > a,
    .navbar-logout-wrapper {
        white-space: nowrap;
    }

.beah-tb-search {
    height: 30px;
    width: 130px;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 8px;
}

.beah-tb-clock {
    font-size: 10.5px;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

    /* Decorative extras — shown only when the topbar has room to spare. */
    .beah-tb-search,
    .beah-tb-clock.beah-tb-chip {
        display: none;
    }

@media (min-width: 1600px) {
    .beah-tb-clock.beah-tb-chip {
        display: inline-flex;
    }
}

@media (min-width: 1800px) {
    .beah-tb-search {
        display: inline-block;
    }
}

.beah-tb-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.beah-tb-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* The stock header is 33px of padding around a banner logo — a lot of empty
   space above the menu. Tightened, with the signed-in user shown here now. */
.beah-nav-header {
    padding: 14px 14px 12px !important;
}

.beah-sidebar-logo {
    margin-bottom: 12px;
}

    .beah-sidebar-logo img {
        display: block;
        height: 78px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }

/* --- Sidebar identity card ---------------------------------------- */
.beah-user-card {
    position: relative;
}

.beah-user-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--beah-border);
    border-radius: 10px;
    background: var(--beah-green-wash);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

    .beah-user-toggle:hover,
    .beah-user-toggle:focus {
        background: var(--beah-green-pale);
        border-color: var(--beah-green);
        text-decoration: none;
    }

.beah-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(135deg, #69F0AE, #00BCD4);
    color: var(--beah-text);
}

.beah-user-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.25;
}

.beah-user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--beah-text) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The kind of account and its role above the username - quieter than the name, so the name still leads. */
.beah-user-type {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--beah-muted) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The role reads as part of the type above it, so the two sit closer than the lines around them. */
.beah-user-type + .beah-user-type {
    margin-top: -2px;
}

/* be'ah is written lowercase wherever it appears. */
.beah-user-type.is-brand {
    text-transform: none;
    letter-spacing: normal;
}

.beah-user-sub {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--beah-green) !important;
}

.beah-user-caret {
    margin-inline-start: auto;
    flex: none;
    color: var(--beah-muted);
}

/* Pinned to the card so the menu cannot spill out of the narrow sidebar. */
.beah-user-card .dropdown-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
}

.menu-title.menu-group-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 10px 20px 4px;
    cursor: default;
}

.nav-second-level > li > a {
    font-size: 12.5px;
}

/* --- Contract detail modal ------------------------------------- */

/* The status label carries the colour; the version is just a fact, so a
   second coloured pill next to it only competes for attention. */
.beah-version-label {
    background-color: #dfe7e0;
    color: #4a5a4e;
}

/* "v2  Current" belongs on one line - wrapping the badge under the number
   reads as a second row. */
.beah-version-cell {
    white-space: nowrap;
}

/* Marks the live version. Targets the cells so it paints over the striping
   without needing !important. */
.table-striped > tbody > tr.beah-row-current > td {
    background-color: #eef7f1;
}

.beah-expiry-hint {
    display: block;
    color: #8a978e;
}

    /* Bootstrap loads first, so a bare .text-danger loses to the rule above on
   source order - two classes settles it. */
    .beah-expiry-hint.text-danger {
        color: #a94442;
    }

.beah-amount {
    font-variant-numeric: tabular-nums;
}

.beah-ndcc {
    font-size: 11.5px;
    color: #6b7a6f;
    word-break: break-all;
}

.beah-preview-caption {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8a978e;
    margin-bottom: 4px;
}

/* The theme gives the header #fdfdfd against the footer's #f3f3f3, which reads as
   an unfinished band across the top. Match them. */
.modal-header {
    background: #f3f3f3;
}

/* The header and footer paint their own backgrounds into the corners, so each
   needs the matching radius - rounding .modal-content alone leaves square ends.
   Done per-corner rather than with overflow:hidden so nothing inside a modal
   gets clipped. */
.modal-content {
    border-radius: 14px;
}

.modal-header {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.modal-footer {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* A footer holding an action beside Close: the two kept clearly apart rather than at Bootstrap's 4px. */
.modal-footer.beah-modal-footer-gap {
    gap: 12px;
}

    .modal-footer.beah-modal-footer-gap > * {
        margin: 0;
    }

/* The theme sets the title in small navy uppercase with wide tracking, which
   reads as a label rather than a heading. */
.modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #0F172A;
}

    .modal-title i {
        color: #2E7D32;
    }

/* Flex keeps the title and the float:right close button on one row. */
.beah-detail-modal .modal-header,
.beah-form-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.beah-detail-modal .modal-title,
.beah-form-modal .modal-title {
    flex: 1;
}

.beah-detail-modal .modal-header .close,
.beah-form-modal .modal-header .close {
    flex: none;
    margin: 0;
    margin-inline-start: 12px;
}

/* Single-column forms stay narrow; the default 500px crowds two-field rows. */
.beah-form-modal {
    max-width: 560px;
}

/* --- Onboarding review: per-branch evidence --- */
.beah-site-schedule {
    margin-inline-start: 8px;
    background-color: #dfe7e0;
    color: #4a5a4e;
}

.beah-site-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 10px;
    font-size: 12px;
}

/* --- Email outbox: the stored body, isolated from the portal --- */
.beah-email-body {
    width: 100%;
    min-height: 320px;
    max-height: 52vh;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

/* --- Contract template merge fields --- */
.beah-token-legend {
    border: 1px solid #cfe3d2;
    border-radius: 8px;
    background: #f7fbf8;
    padding: 10px 12px;
    margin-bottom: 14px;
}

    .beah-token-legend strong {
        display: block;
        font-size: 12.5px;
        color: #185c24;
    }

    .beah-token-legend > span {
        display: block;
        font-size: 11.5px;
        color: #6b7a6f;
        margin-top: 2px;
    }

.beah-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

    .beah-token-list code {
        background: #fff;
        border: 1px solid #cfe3d2;
        border-radius: 999px;
        padding: 2px 9px;
        font-size: 11.5px;
        color: #2E7D32;
        cursor: help;
    }

/* --- Shared listing table (beah-data-table) --------------------- */
.beah-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.beah-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .beah-table th {
        text-align: left;
        font-weight: 600;
        color: #64748B;
        font-size: 11.5px;
        padding: 9px 12px;
        border-bottom: 2px solid #E2E8F0;
        letter-spacing: .2px;
        background: #FAFBFC;
        white-space: nowrap;
    }

    .beah-table td {
        padding: 11px 12px;
        border-bottom: 1px solid #F1F5F9;
        vertical-align: middle;
    }

    .beah-table tbody tr:last-child td {
        border-bottom: none;
    }

    .beah-table tbody tr {
        transition: background .1s;
    }

        .beah-table tbody tr:hover td {
            background: #f0fdf4;
        }

        .beah-table tbody tr.selected td {
            background: #dcfce7;
        }

    /* a row that opens its record on a click - the page's own, or its view action when there is no Actions column */
    .beah-table tbody tr.beah-table-row-opens {
        cursor: pointer;
    }

        .beah-table tbody tr.beah-table-row-opens:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--beah-blue, #0054A4);
        }

    .beah-table th.beah-table-sortable {
        cursor: pointer;
        user-select: none;
    }

        .beah-table th.beah-table-sortable:hover,
        .beah-table th.beah-table-sorted {
            color: #185c24;
        }

.beah-sort-icon {
    margin-inline-start: 6px;
    font-size: 10px;
    opacity: .45;
}

.beah-table th.beah-table-sorted .beah-sort-icon {
    opacity: 1;
}

.beah-table td[dir="rtl"] {
    text-align: right;
}

.beah-table td.beah-cell-danger {
    color: #991B1B;
    font-weight: 600;
}

.beah-table td.beah-cell-warning,
.beah-profile-table td.beah-cell-warning {
    color: #92400E;
    font-weight: 600;
}

.beah-table td.beah-cell-strong {
    color: #0F172A;
    font-weight: 600;
}

/* A value that must not break mid-way - a time range, or the note under a date, which reads
   smaller so it stays on one line without widening its column. */
.beah-table td.beah-cell-nowrap,
.beah-profile-table td.beah-cell-nowrap {
    white-space: nowrap;
}

.beah-table td .beah-cell-note,
.beah-profile-table td .beah-cell-note {
    white-space: nowrap;
    font-size: 11px;
    font-weight: 400;
}

.beah-table-right {
    text-align: right;
}

.beah-table-center {
    text-align: center;
}

/* A column's heading lines up with its values: .beah-table th sets every heading left and outranks the two classes above,
   which left Input and Output headed on the left over figures on the right. */
.beah-table th.beah-table-right {
    text-align: right;
}

.beah-table th.beah-table-center {
    text-align: center;
}

.beah-table-value {
    display: block;
}

.beah-table-sub {
    display: block;
    color: #64748B;
    font-size: 10.5px;
    margin-top: 2px;
}

/* An icon before a cell's value (a column's icon(row)): quiet, in the brand green, never the only cue. */
/* A chips column in the shared table: each value a small outlined chip, and the overflow a tinted +N chip that names
   the rest on hover or focus. They wrap rather than widen the column. */
.beah-table-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}

.beah-table-chip {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--beah-border);
    border-radius: 999px;
    background: var(--beah-surface);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.beah-table-chip-more {
    border-color: var(--beah-border-green);
    background: var(--beah-green-pale);
    color: var(--beah-green);
    font-weight: 600;
    cursor: pointer;
}

    .beah-table-chip-more:hover,
    .beah-table-chip-more[aria-expanded="true"] {
        background: var(--beah-green);
        color: #fff;
    }

/* The +N chip's list: the rest of the chips in a small card under it, on the page body like the row menu. */
.beah-chips-popover {
    position: fixed;
    z-index: 1050;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.10);
}

.beah-table-icon {
    width: 18px;
    margin-inline-end: 7px;
    text-align: center;
    color: var(--beah-green);
}

/* An uploaded icon in the same 18px slot, scaled to fit whatever shape it came in. */
.beah-table-icon-img {
    display: inline-block;
    height: 18px;
    object-fit: contain;
    vertical-align: -4px;
}

/* A field that picks an icon (the catalog form's icon type): each choice a square showing itself; the chosen one
   in the green wash, its edge and icon in green. */
.beah-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.beah-icon-choice {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #A7BDAD;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 17px;
    cursor: pointer;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}

    .beah-icon-choice:hover {
        border-color: var(--beah-green);
        color: var(--beah-green);
    }

    .beah-icon-choice[aria-checked="true"] {
        background: var(--beah-green-pale);
        border-color: var(--beah-green);
        box-shadow: inset 0 0 0 1px var(--beah-green);
        color: var(--beah-green);
    }

    /* An uploaded image as a choice, inset so the selected ring stays visible around it. */
    .beah-icon-choice-image img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

/* The fleet icon library (Master Data → Fleet Types → Manage Icons): a tile per icon - the image, the file it came
   from, the fleet types drawn with it - and its remove on the top corner. */
.beah-icon-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.beah-icon-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 14px 10px 10px;
    border: 1px solid var(--beah-border);
    border-radius: 8px;
    background: var(--beah-surface);
    text-align: center;
}

.beah-icon-tile-image {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
}

    .beah-icon-tile-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* A built-in icon drawn as its glyph in the same 48px box an uploaded image takes. */
.beah-icon-tile-glyph {
    font-size: 30px;
    color: #475569;
}

/* The uploaded section starts clear of the built-in tiles above it. */
.beah-icon-library-section {
    margin-top: 22px;
}

.beah-icon-tile-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.beah-icon-tile-use {
    font-size: 11px;
    color: var(--beah-muted);
    overflow-wrap: anywhere;
}

    /* The default reads at a glance; a hidden icon is dimmed, its actions still at full strength. */
    .beah-icon-tile.is-default {
        border-color: var(--beah-green);
        box-shadow: inset 0 0 0 1px var(--beah-green);
    }

    .beah-icon-tile.is-hidden .beah-icon-tile-image,
    .beah-icon-tile.is-hidden .beah-icon-tile-name {
        opacity: .5;
    }

/* The flags sit at the top of the tile, holding their height even when empty so every image lines up. */
.beah-icon-tile-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    min-height: 20px;
}

.beah-icon-tile-actions {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 4px;
    margin-top: auto;
    padding-top: 4px;
}

    .beah-icon-tile-actions .btn {
        white-space: nowrap;
    }

.beah-icon-remove {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #FECACA;
    border-radius: 50%;
    background: #FEF2F2;
    color: #B91C1C;
    font-size: 11px;
    cursor: pointer;
}

    .beah-icon-remove:hover {
        background: #FEE2E2;
    }

/* The house file picker under the choices, with the upload's progress beside it. */
.beah-icon-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

    .beah-icon-upload .beah-file-input {
        flex: 1;
    }

.beah-icon-hint {
    display: block;
    margin-top: 6px;
}

.beah-table-actions-col {
    white-space: nowrap;
    width: 1%;
}

/* Administration → Users' be'ah Facilities tab (_shared/userFacilities): a list that loads as it scrolls. */
.beah-user-facilities-hint {
    margin-bottom: 12px;
    font-size: 13px;
}

.beah-user-facility-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

    .beah-user-facility-filters .input-group {
        flex: 1 1 220px;
        width: auto;
    }

    .beah-user-facility-filters select {
        flex: 0 1 190px;
        width: auto;
    }

.beah-user-facility-only {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}

.beah-user-facility-meta {
    margin: 12px 0 6px;
    font-size: 12.5px;
    color: #475569;
}

.beah-user-facility-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--beah-border, #E2E8F0);
    border-radius: 6px;
}

    .beah-user-facility-list li + li {
        border-top: 1px solid #EEF2F6;
    }

    .beah-user-facility-list label {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 9px 12px;
        font-weight: 400;
        cursor: pointer;
    }

        .beah-user-facility-list label:hover {
            background: #F0FDF4;
        }

        .beah-user-facility-list label.is-checked {
            background: #F2F8F3;
        }

    .beah-user-facility-list input[type=checkbox],
    .beah-user-facility-only input[type=checkbox] {
        flex: none;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--beah-green);
    }

.beah-user-facility-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 600;
}

    .beah-user-facility-name small {
        font-size: 12px;
        font-weight: 400;
        color: #475569;
    }

.beah-user-facility-status {
    padding: 12px;
    text-align: center;
    font-size: 12.5px;
    color: #475569;
}

/* The tick-box column (`selection`). */
.beah-table-select-col {
    width: 44px;
    text-align: center;
}

    .beah-table-select-col input[type=checkbox] {
        width: 18px;
        height: 18px;
        margin: 0;
        vertical-align: middle;
        accent-color: var(--beah-green);
    }

.beah-table tbody tr.beah-table-row-checked td {
    background: #F2F8F3;
}

/* Row actions in a hand-written table, stacked: every button takes the widest one's width. */
.beah-row-actions-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

    .beah-row-actions-stack > .btn {
        text-align: start;
    }

.beah-row-menu {
    position: relative;
    display: inline-block;
}

.beah-row-menu-toggle {
    border: 1px solid #c6e0cd;
    background: #eaf5ed;
    color: #185c24;
    font-weight: 600;
}

    .beah-row-menu-toggle:hover,
    .beah-row-menu-toggle.open {
        background: #2E7D32;
        border-color: #2E7D32;
        color: #fff;
    }

    .beah-row-menu-toggle i {
        margin-inline-start: 4px;
    }

.beah-row-menu-list {
    position: fixed;
    z-index: 1050;
    padding: 5px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.10);
}

.beah-row-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0F172A;
    text-decoration: none;
}

    .beah-row-menu-item i {
        width: 14px;
        color: #64748B;
    }

    .beah-row-menu-item:hover {
        background: #f0fdf4;
        color: #185c24;
        text-decoration: none;
    }

        .beah-row-menu-item:hover i {
            color: #2E7D32;
        }

    .beah-row-menu-item.danger {
        color: #991B1B;
    }

        .beah-row-menu-item.danger i {
            color: #991B1B;
        }

        .beah-row-menu-item.danger:hover {
            background: #FEE2E2;
            color: #991B1B;
        }

    /* An action that cannot be taken now stays listed, greyed, and says why on hover (its title). */
    .beah-row-menu-item.is-disabled,
    .beah-row-menu-item.is-disabled:hover {
        background: transparent;
        color: #94A3B8;
        cursor: not-allowed;
    }

        .beah-row-menu-item.is-disabled i,
        .beah-row-menu-item.is-disabled:hover i {
            color: #94A3B8;
        }

.beah-row-menu-divider {
    height: 1px;
    background: #F1F5F9;
    margin: 4px 2px;
}

/* --- Tab strip ------------------------------------------------- */
.beah-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #E2E8F0;
}

.beah-tab {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
}

    .beah-tab i {
        color: #64748B;
    }

    .beah-tab:hover {
        border-color: #2E7D32;
        color: #185c24;
    }

        .beah-tab:hover i {
            color: #2E7D32;
        }

    .beah-tab.active {
        background: #2E7D32;
        border-color: #2E7D32;
        color: #fff;
    }

        .beah-tab.active i {
            color: #fff;
        }

/* Folder tabs for a modal: the tabs sit on the panel's top edge, so they need
   no band behind them - the active one joins the content below it. */
.beah-modal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid #E2E8F0;
}

    .beah-modal-tabs .beah-tab {
        margin-bottom: -1px;
        padding: 8px 16px;
        border-radius: 8px 8px 0 0;
        border-color: transparent;
        background: transparent;
        color: #475569;
    }

        .beah-modal-tabs .beah-tab:hover {
            border-color: transparent;
            background: #F1F5F9;
            color: #185c24;
        }

        .beah-modal-tabs .beah-tab.active {
            background: #2E7D32;
            border-color: #2E7D32;
            color: #fff;
        }

            .beah-modal-tabs .beah-tab.active i {
                color: #fff;
            }

.beah-table-empty-row td {
    text-align: center;
    color: #94a3b8;
    padding: 28px 12px;
}

    .beah-table-empty-row td i {
        margin-inline-end: 6px;
    }

/* A status reads as one word even when it is two - "Pending Approval" broken
   across lines in a narrow column made the pill a lozenge taller than its row. */
.beah-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.beah-pill-success {
    background: #dcfce7;
    color: #166534;
}

.beah-pill-warning {
    background: #FEF3C7;
    color: #92400E;
}

.beah-pill-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.beah-pill-info {
    background: #DBEAFE;
    color: #1e40af;
}

.beah-pill-neutral {
    background: #F3F4F6;
    color: #4B5563;
}

.beah-table-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #E2E8F0;
}

.beah-table-size {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748B;
}

    .beah-table-size label {
        margin: 0;
        font-weight: 500;
    }

    .beah-table-size select {
        width: auto;
        height: 28px;
        padding: 2px 6px;
        font-size: 12px;
    }

.beah-table-count {
    font-size: 12px;
    color: #64748B;
}

.beah-table-pager {
    display: flex;
    align-items: center;
    gap: 4px;
}

.beah-page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    font-size: 12px;
    color: #0F172A;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    transition: all .15s;
}

    .beah-page-btn:hover:not(:disabled) {
        border-color: #2E7D32;
        color: #185c24;
    }

    .beah-page-btn.active {
        background: #2E7D32;
        border-color: #2E7D32;
        color: #fff;
        font-weight: 600;
    }

    .beah-page-btn:disabled {
        opacity: .45;
        cursor: default;
    }

/* --- Entity profile modal -------------------------------------- */
.beah-profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 18px;
    background: #f0fdf4;
    border-radius: 10px;
}

    .beah-profile-hero.inactive {
        background: #fff7ed;
    }

.beah-profile-mark {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #2E7D32;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beah-profile-hero h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
}

.beah-profile-sub {
    margin-top: 2px;
    font-size: 13px;
    color: #64748B;
}

.beah-profile-hero > .beah-pill {
    margin-inline-start: auto;
    padding: 5px 12px;
    font-size: 12px;
}

    /* A second pill (Internal Transporter beside the status) joins the first at the far end rather than splitting the row. */
    .beah-profile-hero > .beah-pill + .beah-pill {
        margin-inline-start: -8px;
    }

.beah-profile-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.beah-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 12.5px;
}

    .beah-profile-row:last-child {
        border-bottom: none;
    }

.beah-profile-label {
    color: #64748B;
    font-weight: 500;
}

.beah-profile-value {
    font-weight: 700;
    color: #0F172A;
    text-align: end;
}

    .beah-profile-value.beah-profile-expired {
        color: #991B1B;
    }

.beah-profile-section {
    margin-top: 18px;
}

.beah-profile-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #0F172A;
}

    .beah-profile-section-title i {
        color: #2E7D32;
    }

    /* A button in the title keeps its own icon colour, as buttons elsewhere do. */
    .beah-profile-section-title .btn i {
        color: inherit;
    }

    /* A fleet type's uploaded icon heading its unit in the vehicle form. */
    .beah-profile-section-title img.beah-type-img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

/* The picked fleet type's icon inside its select - an option cannot hold one. Mirrors the onboarding wizard's
   .ob-select-icon, so the vehicle form and the wizard draw the chosen type the same way. */
.beah-select-icon {
    position: relative;
}

    .beah-select-icon .beah-select-icon-glyph {
        position: absolute;
        inset-inline-start: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        color: #2E7D32;
        font-size: 15px;
        pointer-events: none;
    }

        .beah-select-icon .beah-select-icon-glyph img {
            max-width: 20px;
            max-height: 20px;
            object-fit: contain;
        }

    .beah-select-icon.has-icon select.form-control {
        padding-inline-start: 40px;
    }

.beah-section-action {
    margin-inline-start: auto;
}

/* Two views, one either/or: joined so the pair reads as a single control rather
   than as two buttons that happen to sit together - and so whatever follows is
   plainly not a third view. */
.beah-view-toggle {
    display: inline-flex;
    vertical-align: middle;
}

    .beah-view-toggle .btn {
        border-radius: 0;
    }

        /* The outer corners match a plain .btn beside it, so the pair reads as two
       buttons fused rather than as a different component. */
        .beah-view-toggle .btn:first-child {
            border-start-start-radius: 4px;
            border-end-start-radius: 4px;
        }

        .beah-view-toggle .btn:last-child {
            border-start-end-radius: 4px;
            border-end-end-radius: 4px;
        }

        /* The seam: one border between them, not two stacked. */
        .beah-view-toggle .btn + .btn {
            margin-inline-start: -1px;
        }

        /* Selected, not primary. A segmented control marks which of two views is
       showing; filling it with the accent makes it shout as loudly as the action
       beside it, and two solid greens in one row read as two actions. */
        .beah-view-toggle .btn.btn-primary {
            position: relative;
            z-index: 1;
            background-color: #E8F5E9;
            border-color: #2E7D32;
            color: #185C24;
        }

            .beah-view-toggle .btn.btn-primary:hover,
            .beah-view-toggle .btn.btn-primary:focus,
            .beah-view-toggle .btn.btn-primary:active {
                background-color: #DCFCE7;
                border-color: #2E7D32;
                color: #185C24;
            }

    /* An action after the toggle is a different kind of thing, and needs the room to
   say so. */
    .beah-view-toggle + .btn {
        margin-inline-start: 16px;
        vertical-align: middle;
    }

.beah-profile-scroll {
    overflow-x: auto;
}

.beah-profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .beah-profile-table th {
        padding: 9px 12px;
        text-align: start;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #64748B;
        background: #FAFBFC;
        border-bottom: 2px solid #E2E8F0;
        white-space: nowrap;
    }

    .beah-profile-table td {
        padding: 11px 12px;
        border-bottom: 1px solid #F1F5F9;
        vertical-align: middle;
    }

    .beah-profile-table tr:last-child td {
        border-bottom: none;
    }

.beah-profile-empty {
    text-align: center;
    color: #94A3B8;
}

@media (max-width: 767px) {
    .beah-profile-cols {
        grid-template-columns: 1fr;
    }
}

/* --- Tabbed profile (onboarding review) ------------------------
   Same shape as the listing pages: a grey tab strip on top of a bordered
   card, with profile content rather than a table underneath. */
.beah-profile-tabbed {
    margin-top: 18px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}

.beah-profile-tabbed-body {
    padding: 16px;
}

    .beah-profile-tabbed-body > div > .beah-profile-section:first-child,
    .beah-profile-tabbed-body > .beah-profile-section:first-child {
        margin-top: 0;
    }

.beah-profile-note {
    margin: 6px 0 10px;
    font-size: 12px;
    color: #64748B;
}

.beah-profile-missing {
    font-size: 12px;
    color: #94A3B8;
}

/* --- Document renewal form (compliance gate) -------------------- */
.beah-renew-form {
    align-items: flex-end;
}

    .beah-renew-form .btn {
        height: 32px;
        padding: 0 16px;
        font-size: 12.5px;
        border-radius: 6px;
    }

    .beah-renew-form input[type="file"] {
        height: auto;
        padding: 5px 10px;
    }

.beah-filter-file {
    flex: 1 1 240px;
    min-width: 220px;
}

/* --- Grouped modal forms ---------------------------------------
   A long form reads as one undifferentiated wall, so the fields are
   banded into titled sections. */
.beah-form-section + .beah-form-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #F1F5F9;
}

.beah-form-section .form-group {
    margin-bottom: 12px;
}

.beah-form-section label {
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748B;
}

.beah-form-section .form-control {
    height: 34px;
    font-size: 13px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}

/* A disabled field keeps its border: on the disabled grey the section's light border vanished, and a dropdown waiting on
   another (Waste Type until a facility is picked) read as a grey bar rather than a field. */
.beah-form-section .form-control:disabled {
    border-color: #CBD5E1;
}

.beah-form-section textarea.form-control {
    height: auto;
}

.beah-form-section .form-control:focus {
    border-color: #2E7D32;
    box-shadow: none;
}

/* What a rejected profile change touched, highlighted while the company corrects it. Scoped to the
   form section and placed after its rules, which would otherwise win on source order. */
.beah-form-section .beah-field-flagged > label {
    color: #92400E;
    font-weight: 700;
}

.beah-form-section .beah-field-flagged .form-control,
.beah-form-section .beah-field-flagged .beah-multicheck {
    border-color: #F59E0B;
    background-color: #FFF8E1;
    box-shadow: 0 0 0 1px #F59E0B;
}

/* A setting of two parts read as one - the auction service fee's kind beside its value. The two halves share one
   border, the kind taking the left (start) half, the value the rest. */
.beah-fee-group {
    flex-wrap: nowrap;
}

    /* The kind keeps a fixed width; the value takes the rest of the column. The kind is a <beah-select>, so its
       field sits a level down and its end corners are squared here, as the input group squares a direct child's. */
    .beah-fee-group > .beah-fee-kind,
    .beah-fee-group > .beah-select {
        flex: 0 0 160px;
        max-width: 160px;
    }

    .beah-fee-group > .beah-select .form-control {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

    .beah-fee-group > .form-control:not(:first-child) {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        margin-inline-start: -1px;
    }

    .beah-fee-group > .form-control:not(:last-child) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

/* A field be'ah asked to correct (Request Changes on a facility) once the form has changed it: green, as
   the onboarding wizard turns a corrected field, so what is left to do is whatever is still amber. */
.beah-form-section .beah-field-corrected > label {
    color: #1B5E20;
    font-weight: 700;
}

.beah-form-section .beah-field-corrected .form-control,
.beah-form-section .beah-field-corrected .beah-multicheck {
    border-color: #2E7D32;
    box-shadow: 0 0 0 1px #2E7D32;
}

/* be'ah's comment on the field, below its input: written above it, a comment pushed a flagged input below its
   neighbours', so the field it sits in reads as a column and the comment goes last whatever the markup order. */
.form-group.beah-field-flagged,
.form-group.beah-field-corrected {
    display: flex;
    flex-direction: column;
}

.beah-field-review {
    display: block;
    order: 99;
    margin: 4px 0 0;
    color: #92400E;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

    .beah-field-review > i {
        margin-inline-end: 4px;
    }

.beah-field-corrected .beah-field-review {
    color: #1B5E20;
}

/* A comment on a whole block of the form - the waste types, the licences - above it. */
.beah-field-review-block {
    margin-bottom: 8px;
    font-size: 13px;
    padding: 8px 12px;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    background: #FFFBEB;
    color: #78350F;
    overflow-wrap: anywhere;
}

    .beah-field-review-block > i {
        margin-inline-end: 6px;
    }

    .beah-field-review-block.is-corrected {
        border-color: #A5D6A7;
        background: #EDF6EE;
        color: #1B5E20;
    }

/* The comments be'ah left when it asked for changes, at the top of the form and in the reviews. */
.beah-facility-review + .beah-facility-review {
    margin-top: 8px;
}

/* The field chips sit on the amber callout, so they take a white face to stay legible. */
.beah-facility-review .beah-review-note-lines .beah-pill-warning {
    background: #FFFFFF;
    border: 1px solid #F59E0B;
}

.beah-facility-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.beah-facility-review-meta {
    font-size: 12px;
    opacity: .85;
}

.beah-facility-review-hint {
    margin-top: 2px;
}

.beah-facility-review-comment {
    margin-top: 6px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* What is still as be'ah commented on it, above the footer whose resubmit waits for it. */
.beah-review-outstanding {
    margin: 0 16px 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: #FFFBEB;
    color: #92400E;
    font-size: 13px;
}

    .beah-review-outstanding > i {
        margin-inline-end: 6px;
    }

/* A waste type heading the rows that belong to it - a facility's stream and the business activity
   licences it calls for - in a change's field table, green as the facility form's waste type header is. */
.beah-profile-table tr.beah-row-group > td {
    background: var(--beah-green-pale);
    color: var(--beah-green);
    font-weight: 700;
}

    .beah-profile-table tr.beah-row-group > td > i {
        margin-inline-end: 6px;
    }

.beah-profile-table tr.beah-row-grouped > td:first-child {
    padding-inline-start: 28px;
}

.beah-profile-table tr.beah-row-flagged > td {
    background-color: #FFF8E1;
}

    .beah-profile-table tr.beah-row-flagged > td:first-child {
        box-shadow: inset 3px 0 0 #F59E0B;
    }

[dir="rtl"] .beah-profile-table tr.beah-row-flagged > td:first-child {
    box-shadow: inset -3px 0 0 #F59E0B;
}

/* The same mark on a waste type card, and on a licence row inside one, for forms laid out as
   cards rather than tables. */
.beah-stream-group.beah-row-flagged {
    border-color: #F59E0B;
    box-shadow: 0 0 0 1px #F59E0B;
}

.beah-licence-row.beah-row-flagged {
    background-color: #FFF8E1;
}

.beah-file-input {
    height: auto !important;
    padding: 6px 10px;
}

/* --- Mobile number: the 8 local digits behind a fixed +968, as the onboarding
       wizard does. Logical properties so the prefix stays leading in RTL.

       Two markups exist for it - the component below and a Bootstrap input group - and only the
       +968 prefix uses either, so both are styled here as one. The Bootstrap one used to sit
       taller than its input, because Inspinia sizes .form-control while .input-group-text keeps
       Bootstrap's own font and padding; the prefix now takes its height from the input beside it
       (both wrappers are flex, so the box stretches) and its padding, weight and radius from here.
       The selector carries the input group's own specificity, so it does not depend on which
       stylesheet loads last. --- */
.beah-phone-input {
    display: flex;
    flex-wrap: wrap;
}

    /* The validation message belongs under the field, not beside it. */
    .beah-phone-input > label.error,
    .input-group > label.error {
        flex-basis: 100%;
        margin-inline-start: 0;
        margin-bottom: 0;
    }

    .beah-phone-input .beah-phone-prefix,
    .input-group > .input-group-prepend > .input-group-text {
        display: grid;
        place-items: center;
        padding: 0 14px;
        border: 1px solid var(--beah-border);
        border-inline-end: 0;
        border-start-start-radius: 6px;
        border-end-start-radius: 6px;
        background: #F1F5F9;
        color: var(--beah-muted);
        font-weight: 700;
        /* The prefix reads at the size of the number beside it - .form-control is 0.9rem. */
        font-size: 0.9rem;
        line-height: 1.5;
        white-space: nowrap;
    }

    .beah-phone-input input,
    .input-group > .input-group-prepend + .form-control {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }

    .beah-phone-input input {
        flex: 1;
        min-width: 0;
    }

/* A form section's inputs are smaller and rounder; the prefix follows them there too. */
.beah-form-section .beah-phone-input .beah-phone-prefix,
.beah-form-section .input-group > .input-group-prepend > .input-group-text {
    font-size: 13px;
    border-start-start-radius: 6px;
    border-end-start-radius: 6px;
}

/* What was uploaded, shown rather than described: a box of a fixed height above the upload,
   holding the image or saying there is none yet. */
.beah-file-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    margin-bottom: 6px;
    padding: 6px;
    border: 1px solid var(--beah-border);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

    .beah-file-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.beah-file-preview-empty {
    border-style: dashed;
    background: #FBFDFB;
    color: var(--beah-muted);
    font-size: 12px;
}

/* CR activity licences, grouped as the onboarding wizard groups them: a card per waste type,
   its activities listed straight away so nothing has to be opened before uploading one. */
.beah-licence-card {
    border: 1px solid var(--beah-border);
    border-radius: 8px;
    background: var(--beah-surface);
    overflow: hidden;
}

.beah-licence-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    background: var(--beah-green-pale);
    border-top: 1px solid var(--beah-border-green);
    border-bottom: 1px solid var(--beah-border-green);
}

    .beah-licence-head strong {
        display: block;
        font-size: 13px;
    }

    .beah-licence-head > div > span {
        font-size: 11.5px;
        color: var(--beah-muted);
    }

    .beah-licence-head .beah-pill {
        flex-shrink: 0;
    }

/* The activity on one side, what is on file for it on the other. They stack rather than
   squeeze once the modal is too narrow to seat both. */
.beah-licence-row {
    padding: 10px 14px;
}

    .beah-licence-row + .beah-licence-row {
        border-top: 1px solid var(--beah-border);
    }

/* The activity on the left, what it costs on the right. */
.beah-licence-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.beah-licence-activity {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

    .beah-licence-activity code {
        flex-shrink: 0;
    }

    .beah-licence-activity strong {
        font-size: 13px;
        min-width: 0;
    }

/* A waste collection point ticks the business activities it carries out, one per line under the waste type's
   fields - as the onboarding wizard's ob-stream-activities lists them. Only those are charged and licensed. */
/* Inset as the fields row above it is, so the list lines up with the inputs. */
.beah-stream-activities {
    display: grid;
    gap: 6px;
    padding: 10px 10px 14px;
    border-top: 1px dashed var(--beah-border);
    background: var(--beah-surface);
}

.beah-stream-activities-label {
    font-size: 12px;
    font-weight: 700;
    color: #0F172A;
}

.beah-stream-activities-none {
    font-size: 12px;
    color: var(--beah-muted);
}

.beah-activity-choices {
    display: grid;
    gap: 6px;
}

.beah-activity-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border: 1.5px solid var(--beah-border);
    border-radius: 8px;
    background: #fff;
    color: #0F172A;
    font: inherit;
    font-size: 12.5px;
    text-align: start;
    cursor: pointer;
    transition: border-color .14s, background-color .14s;
}

    .beah-activity-choice:hover:not(:disabled) {
        border-color: #cfe3d2;
    }

    .beah-activity-choice.is-on {
        border-color: var(--beah-green);
        background: var(--beah-green-wash);
    }

    .beah-activity-choice:disabled {
        cursor: not-allowed;
        opacity: .7;
    }

.beah-activity-choice-check {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
}

    .beah-activity-choice-check .fa {
        visibility: hidden;
    }

.beah-activity-choice.is-on .beah-activity-choice-check {
    background: var(--beah-green);
    border-color: var(--beah-green);
}

    .beah-activity-choice.is-on .beah-activity-choice-check .fa {
        visibility: visible;
    }

.beah-activity-choice code {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--beah-muted);
}

.beah-activity-choice-name {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.beah-licence-charge {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* The waste type's licence files, one per line - the name wrapping rather than cut, with view,
   download and (while it can still change) remove at its end - then the picker taking more. */
.beah-licence-files {
    list-style: none;
    margin: 0;
    padding: 8px 14px 0;
    border-top: 1px solid var(--beah-border);
}

    .beah-licence-files li {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 4px 0;
        font-size: 12.5px;
    }

    .beah-licence-files .beah-doc-icon {
        margin-inline-end: 0;
    }

.beah-licence-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Each licence file states when it runs out, beside its name; the name wraps first, and on a
   narrow card the date drops under it. */
.beah-licence-files li {
    align-items: center;
    flex-wrap: wrap;
}

.beah-licence-file-expiry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #475569;
    white-space: nowrap;
}

    .beah-licence-file-expiry input {
        width: 150px;
        height: 30px;
        padding: 2px 8px;
        font-size: 12.5px;
    }

/* As in the onboarding wizard: a file with an expiry is a grid - icon, name, its view / download / remove icons - and the
   date takes the line beneath, the input under the icons, a fixed 118px they spread evenly across, its caption just before
   it. The label lays out no box of its own (display: contents), so caption and input sit in the grid's columns. */
.beah-licence-files li:has(> .beah-licence-file-expiry) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 118px;
    column-gap: 8px;
    row-gap: 4px;
}

    .beah-licence-files li:has(> .beah-licence-file-expiry) > .beah-doc-icon { grid-column: 1; grid-row: 1; }
    .beah-licence-files li:has(> .beah-licence-file-expiry) > .beah-licence-file-name { grid-column: 2; grid-row: 1; }
    /* The icons a step larger (34px) so three fill the input's 118px with 8px between them; a held activity's two sit at its end. */
    .beah-licence-files li:has(> .beah-licence-file-expiry) > .beah-doc-actions {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

        .beah-licence-files li:has(> .beah-licence-file-expiry) > .beah-doc-actions > .btn {
            width: 34px;
            margin: 0;
        }

    .beah-licence-files li > label.beah-licence-file-expiry { display: contents; }

        .beah-licence-files li > label.beah-licence-file-expiry > span {
            grid-column: 1 / 3;
            grid-row: 2;
            justify-self: end;
        }

        .beah-licence-files li > label.beah-licence-file-expiry > input {
            grid-column: 3;
            grid-row: 2;
            width: 100%;
            min-width: 0;
        }

    /* A held activity's date only reads, so it sits at the end of the line beneath. */
    .beah-licence-files li > span.beah-licence-file-expiry {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
    }

.beah-licence-row > .beah-doc-value {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

    .beah-licence-row > .beah-doc-value > .beah-doc-name {
        flex: 1 1 160px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

.beah-licence-card > .beah-profile-missing,
.beah-licence-note {
    display: block;
    margin: 0;
    padding: 8px 14px 0;
    font-size: 12px;
}

.beah-licence-note {
    color: var(--beah-muted);
}

.beah-licence-add {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 14px 12px;
}

.beah-licence-card > .beah-licence-note:last-child {
    padding-bottom: 12px;
}

/* At a facility each business activity holds its own files and picker, under its name and inset
   by its row already. */
.beah-licence-row > .beah-licence-files {
    padding: 6px 0 0;
    border-top: 0;
}

.beah-licence-row > .beah-profile-missing {
    display: block;
    padding-top: 4px;
    font-size: 12px;
}

.beah-licence-row > .beah-licence-add {
    padding: 6px 0 0;
}

/* The licence beneath them: the file name above the picker, with view and download beside
   both and drawn tall enough to stand against them. */
.beah-upload {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 7px;
}

.beah-upload-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

    /* Icons rather than buttons: the picker beside them is the only control that needs a frame. */
    .beah-upload-actions .btn {
        display: flex;
        align-items: center;
        align-self: stretch;
        height: auto;
        padding-inline: 8px;
        border: 0;
        background: transparent;
        box-shadow: none;
        font-size: 16px;
        color: var(--beah-muted);
    }

        .beah-upload-actions .btn:hover,
        .beah-upload-actions .btn:focus {
            background: transparent;
            color: var(--beah-green);
        }

        .beah-upload-actions .btn.disabled {
            pointer-events: none;
        }

.beah-upload-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* An upload that takes its column's whole width, lining its picker up with the field beside it. */
.beah-upload-fill .beah-upload-main {
    flex: 1 1 auto;
}

.beah-upload-name {
    font-size: 12px;
    color: var(--beah-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-upload .beah-file-input {
    width: auto;
}

/* A signature sits in a table cell, so its box is smaller again. It is the anchor itself:
   the whole box opens the image full size. */
.beah-file-preview-xs {
    width: 190px;
    height: 62px;
    margin: 0;
    padding: 3px;
}

/* An outlined action, as the onboarding wizard's own Add buttons read: green on white. */
.btn.beah-btn-outline {
    border: 1px solid var(--beah-border-green);
    background: #fff;
    color: var(--beah-green);
    font-weight: 600;
}

    .btn.beah-btn-outline:hover,
    .btn.beah-btn-outline:focus {
        background: var(--beah-green-wash);
        border-color: var(--beah-green);
        color: var(--beah-green);
    }

    .btn.beah-btn-outline[disabled] {
        opacity: .5;
    }

/* --- Waste streams: a row of fields per stream, as the onboarding wizard lays them out --- */
.beah-stream-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* A waste type and the CR activity licences it calls for are one card, numbered so a facility
   with several of them can be talked about. The row and the licences below it drop their own
   frames, because the card is the frame. The number sits in a gutter beside the card rather
   than inside its first row, so it plainly counts cards and not rows. */
.beah-stream-group {
    position: relative;
    margin-inline-start: 34px;
    border: 1px solid var(--beah-border);
    border-radius: 8px;
    background: var(--beah-surface);
    overflow: visible;
}

    /* The card cannot clip its children - the numbered gutter sits outside it - so the first
       and last of them round themselves. Inside a 1px border the inner arc is 7px, not the
       card's 8px: round them to 8px and the corner sits over the border and notches it. */
    .beah-stream-group > .beah-stream-row,
    .beah-stream-group > .beah-licence-card {
        border: 0;
        border-radius: 0;
    }

    /* The card reads white, so the one green band in it is clearly a header rather than a
       second shade competing with the fields above it. */
    .beah-stream-group > .beah-stream-row .beah-stream-tolerance > label {
    white-space: nowrap;
}

.beah-stream-row {
        background: var(--beah-surface);
    }

    /* Written after the reset above, which shares their specificity and would otherwise zero
       them again. */
    .beah-stream-group > :first-child {
        border-start-start-radius: 7px;
        border-start-end-radius: 7px;
    }

    .beah-stream-group > :last-child {
        border-end-start-radius: 7px;
        border-end-end-radius: 7px;
        overflow: hidden;
    }

/* The card's number, in the gutter. Absolute, so it is out of the row's grid and takes no
   column from it. Logical inset so the gutter leads in Arabic too. */
.beah-stream-index {
    position: absolute;
    inset-inline-start: -34px;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--beah-green-pale);
    color: var(--beah-green);
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

.beah-stream-row {
    display: grid;
    /* Tolerance sizes to its caption, which carries the cap ("Tolerance % (max 20%)"), so it reads on one line. */
    grid-template-columns: 1.4fr 1fr 1fr 1fr minmax(max-content, 0.8fr) 32px;
    align-items: end;
    gap: 10px;
    /* The deeper bottom is the room a validation message hangs in - see label.error below. */
    padding: 10px 10px 26px;
    border: 1px solid var(--beah-border);
    border-radius: 8px;
    background: #FBFDFB;
}

    .beah-stream-row .form-group {
        position: relative;
        margin-bottom: 0;
    }

    /* A validation message hangs in space the row keeps under its inputs, rather than being
       added to its field's height - the row aligns its fields to the bottom, so a taller field
       would lift its input above the others. */
    .beah-stream-row .form-group > label.error {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        margin: 3px 0 0;
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
    }

.beah-stream-remove {
    height: 34px;
    border: 1px solid #FECACA;
    border-radius: 6px;
    background: #FEF2F2;
    color: #B91C1C;
}

    .beah-stream-remove:hover {
        background: #FEE2E2;
    }

/* A waste type in the generator and recycler facility forms is a card that opens and closes, one
   open at a time, headed as Facility Management's detail heads it (beah-facility-card). Its fields
   and licences drop their own frames inside it, since the card is the frame; the licence band's top
   rule is what divides the two. */
.beah-stream-card > .beah-stream-card-body > .beah-stream-row,
.beah-stream-card > .beah-stream-card-body > .beah-licence-card {
    border: 0;
    border-radius: 0;
}

.beah-stream-card > .beah-stream-card-body > .beah-stream-row {
    background: var(--beah-surface);
}

.beah-stream-card .beah-facility-card-head > .beah-pill {
    flex-shrink: 0;
}

.beah-stream-card.beah-row-flagged {
    border-color: #F59E0B;
    box-shadow: 0 0 0 1px #F59E0B;
}

/* The recycler's waste types carry four fields, not five. */
/* A facility's waste type: type, capacity, output and end product. The capacity column is never
   narrower than "Processing Capacity per Annum" on one line, so its label does not wrap above an
   input squeezed narrower than its neighbours. */
.beah-stream-row.beah-stream-row-4 {
    grid-template-columns: 1.2fr minmax(max-content, 1.2fr) 1.3fr 1.3fr 32px;
}

/* A Large Waste Generator's waste type has no frequency: four fields and the remove. Wide screens only - below
   768px every row is two columns anyway. */
@media (min-width: 768px) {
    .beah-stream-row.beah-stream-row-adhoc {
        grid-template-columns: 1.4fr 1fr 1fr minmax(max-content, 0.8fr) 32px;
    }
}

/* A transporter's waste type: the type alone, its licence files in the card beneath. */
.beah-stream-row.beah-stream-row-1 {
    grid-template-columns: 1fr 32px;
}

/* A trader's waste type and its export licence, over two rows so no field is squeezed: the
   waste type and the licence number, then the licence itself and the date it runs out. The remove
   button keeps the end of the first row. */
.beah-stream-row.beah-stream-row-trade {
    grid-template-columns: 1fr 1fr 32px;
    align-items: start;
    /* Room for a message under a first-row field, clear of the second row's labels. */
    row-gap: 24px;
}

    .beah-stream-row-trade > .form-group:nth-of-type(n+3) {
        grid-row: 2;
    }

    /* Only the column sizes the field: an input's own intrinsic width would otherwise widen its
       column past its neighbour's. */
    .beah-stream-row-trade > .form-group > .form-control {
        width: 0;
        min-width: 100%;
    }

    /* The file control stands level with the date beside it - the picker first, the name of the
       file on record under it. */
    .beah-stream-row-trade .beah-upload {
        margin-top: 0;
    }

    /* The picker fills its column, as wide as the date beside it. */
    .beah-stream-row-trade .beah-upload-main {
        flex: 1;
        flex-direction: column-reverse;
    }

    .beah-stream-row-trade .beah-upload .beah-file-input {
        width: 100%;
        padding-block: 4px;
    }

    /* Level with the inputs, below their labels. */
    .beah-stream-row-trade .beah-stream-remove {
        margin-top: 22px;
    }

@media (max-width: 767px) {
    /* A trader's row is already two columns and its remove button. */
    .beah-stream-row,
    .beah-stream-row.beah-stream-row-4 {
        grid-template-columns: 1fr 1fr;
        /* The fields wrap onto several lines here; each keeps room for its message. */
        row-gap: 24px;
    }

    .beah-stream-group {
        margin-inline-start: 0;
    }

    .beah-stream-index {
        position: static;
        grid-column: 1 / -1;
    }
}

/* --- Password rules ---------------------------------------------- */
/* What the policy asks for, ticked off as it is typed. Muted until met, so the list reads as
   guidance rather than as a page full of errors. */
.beah-password-rules {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

    .beah-password-rules li {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        line-height: 1.9;
        color: var(--beah-muted);
    }

        .beah-password-rules li.beah-rule-pass {
            color: var(--beah-green);
        }

    .beah-password-rules .fa {
        width: 12px;
        font-size: 11px;
    }

/* --- Job cockpit cards ------------------------------------------ */
.beah-job-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.beah-job-subref {
    font-size: 12px;
    color: #64748B;
}

/* The same 12px above (with the assets row's 10px) and below, so the note never sits on the buttons it explains. */
.beah-job-blocked {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 12px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #92400E;
    background: #FEF3C7;
    border-radius: 8px;
}

    /* A scheduled collection not yet confirmed: a fact to plan by, not a hold-up. */
    .beah-job-blocked.is-info {
        color: #1E40AF;
        background: #EFF6FF;
    }

/* Not a job yet (Awaiting Confirmation): the card is dashed, as a planned date is on the calendars. */
.beah-job-card.is-upcoming {
    border-style: dashed;
    border-color: #CBD5E1;
}

.beah-job-route-arrow {
    color: #94A3B8;
}

/* --- Invoice document ------------------------------------------
   These classes had no screen styles at all - they were only described by the
   inline stylesheet the print window builds. */
.beah-invoice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #2E7D32;
}

.beah-invoice-brand {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #185c24;
}

    .beah-invoice-brand span {
        font-size: 13px;
        font-weight: 400;
        color: #64748B;
    }

.beah-invoice-org {
    font-size: 12px;
    color: #64748B;
}

.beah-invoice-number {
    text-align: end;
}

.beah-invoice-number-label,
.beah-invoice-block-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #64748B;
}

.beah-invoice-number-value {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
}

.beah-invoice-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    margin: 16px 0;
}

.beah-invoice-party {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
}

.beah-invoice-meta {
    min-width: 240px;
}

.beah-invoice-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 3px 0;
    font-size: 12.5px;
    color: #64748B;
}

    .beah-invoice-meta-row strong {
        color: #0F172A;
    }

.beah-invoice-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid #E2E8F0;
    font-size: 13px;
    color: #64748B;
}

    .beah-invoice-total strong {
        font-size: 20px;
        font-weight: 800;
        color: #185c24;
    }

.beah-pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.beah-pay-method {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

    .beah-pay-method.active {
        color: #fff;
        background: #2E7D32;
        border-color: #2E7D32;
    }

/* --- Marketplace lot grid --------------------------------------- */
.beah-lot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.beah-lot-closing {
    color: #991B1B;
    font-weight: 700;
}

/* An action beside a notice's text keeps its own width on one line - the text wraps instead. The
   notice is a flex row, so without this a long message squeezed the button until its label broke
   over two lines. */
.beah-alert-action {
    flex-shrink: 0;
    margin-inline-start: 10px;
    white-space: nowrap;
}

    .beah-alert > .beah-alert-action {
        align-self: center;
    }

/* An action under a notice's text rather than beside it. In a narrow notice an inline button
   wraps onto a line of its own, indented by its inline margin; here it starts where the text does. */
.beah-alert-footer {
    margin-top: 8px;
}

/* A (?) beside a caption, explaining it on hover or keyboard focus. The bubble opens below
   and hangs from the icon's start edge, so it grows into the field rather than off the modal. */
.beah-info {
    position: relative;
    display: inline-block;
    margin-inline-start: 4px;
    color: var(--beah-green);
    cursor: help;
    font-weight: normal;
}

.beah-info:hover, .beah-info:focus {
    color: var(--beah-green-dark, var(--beah-green));
}

.beah-info-tip {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: -8px;
    z-index: 20;
    display: none;
    width: 280px;
    max-width: 80vw;
    padding: 8px 11px;
    border-radius: 6px;
    background: #0f2f2a;
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 47, 42, .22);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    white-space: normal;
    text-align: start;
}

.beah-info:hover .beah-info-tip, .beah-info:focus .beah-info-tip {
    display: block;
}

/* The same card standing in for every title="..." tooltip (_shim/titleTips.js), which the browser would draw as its own
   grey or black box: fixed on <body> beneath its element, as wide as its text up to the (?) tip's 280px, above everything -
   a modal, and the header's dropdown menus PortalLight moves to <body>. */
.beah-info-tip.beah-title-tip {
    position: fixed;
    inset-inline: auto;
    z-index: 2147483000;
    width: max-content;
    max-width: min(280px, 80vw);
    pointer-events: none;
}

/* Company documents past their expiry date (_shared/expiredDocuments, BEAH-136 / BEAH-138): each named with when it expired
   and whether its renewal is already with be'ah, then a button to each page it is renewed from. */
.beah-expired-docs-list {
    margin: 6px 0 0;
    padding-inline-start: 18px;
}

    .beah-expired-docs-list li + li {
        margin-top: 2px;
    }

    .beah-expired-docs-list .beah-pill {
        margin-inline-start: 6px;
    }

.beah-expired-docs-date {
    margin-inline-start: 4px;
}

/* A bid whose transporter's company documents have expired: said under its status, in place of Accept - why in one line,
   the documents on the next. */
.beah-bid-docs-expired {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
    color: #B91C1C;
    font-size: 11.5px;
    line-height: 1.4;
    white-space: normal;
}

    .beah-bid-docs-expired strong {
        font-weight: 600;
    }

/* A collection request's details: wide enough that its bid table seats the transporter, the amount, when and the status
   without squeezing any of them. */
.beah-request-detail-modal {
    max-width: 1320px;
}

/* Tags set side by side in a cell of their own - Lowest, Within Target - with room between them. */
.beah-tag-group {
    display: inline-flex;
    gap: 6px;
}

/* A row that is the viewer's own - their bid among the latest bids. */
.beah-profile-table tr.beah-row-mine > td {
    background: var(--beah-green-pale);
}

/* A callout that names the rows it is about: one line each, with the control that settles it. */
.beah-alert-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 7px;
}

.beah-alert-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    /* The callout sizes its own leading icon; a button's icon follows the button. */
    .beah-alert-row .btn i {
        margin-top: 0;
        font-size: inherit;
    }

/* Notices that show together in one place: those of one colour are one banner, never a stack of the same colour.
   Each is a beah-alert-line with its own icon and action that keeps its own colour class (beah-alert-info / -warning /
   ...). Lines of one colour that follow each other join into one banner, a hairline between them; a line of another
   colour starts a banner of its own below. The wrapper paints nothing and hides itself while no line shows, so a page
   needs no getter for it, and a stack showing one line reads exactly as a plain notice. (Lines hidden by v-if leave only
   comments, which the sibling selectors skip.) */
.beah-alert.beah-alert-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

    .beah-alert-stack:not(:has(> .beah-alert-line)) {
        display: none;
    }

.beah-alert-stack > .beah-alert-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    /* Width and style only - the line's colour class sets the border's colour. */
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
}

    /* A line of another colour is a banner of its own, apart from the one above. */
    .beah-alert-stack > .beah-alert-line + .beah-alert-line {
        margin-top: 10px;
    }

/* A line of the colour above joins that banner: no gap, a hairline, the corners shared. */
.beah-alert-stack > .beah-alert-info + .beah-alert-info,
.beah-alert-stack > .beah-alert-warning + .beah-alert-warning,
.beah-alert-stack > .beah-alert-danger + .beah-alert-danger,
.beah-alert-stack > .beah-alert-success + .beah-alert-success {
    margin-top: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.beah-alert-stack > .beah-alert-info:has(+ .beah-alert-info),
.beah-alert-stack > .beah-alert-warning:has(+ .beah-alert-warning),
.beah-alert-stack > .beah-alert-danger:has(+ .beah-alert-danger),
.beah-alert-stack > .beah-alert-success:has(+ .beah-alert-success) {
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

    .beah-alert-stack > .beah-alert-line > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .beah-alert-stack > .beah-alert-line .btn i {
        margin-top: 0;
        font-size: inherit;
    }

/* --- Ticket conversation ---------------------------------------- */
.beah-ticket-description {
    margin: 0;
    font-size: 13px;
    color: #0F172A;
    white-space: pre-wrap;
}

.beah-ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.beah-ticket-reply-time {
    margin-inline-start: auto;
    font-size: 11.5px;
    color: #94A3B8;
}

.beah-ticket-empty {
    padding: 14px 0;
    text-align: center;
    font-size: 12.5px;
    color: #94A3B8;
}

.beah-ticket-compose {
    margin-top: 12px;
}

    .beah-ticket-compose textarea {
        font-size: 13px;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
    }

        .beah-ticket-compose textarea:focus {
            border-color: #2E7D32;
            box-shadow: none;
        }

/* --- Driver app additions --------------------------------------- */
.beah-driver-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: #64748B;
}

.beah-driver-job.current {
    border-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .15);
}

.beah-driver-alert,
.beah-driver-blocked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

.beah-driver-alert {
    margin-bottom: 12px;
    color: #991B1B;
    background: #FEE2E2;
}

.beah-driver-blocked {
    margin: 10px 0 0;
    color: #92400E;
    background: #FEF3C7;
}

.beah-driver-empty {
    padding: 50px 0;
    text-align: center;
    color: #94A3B8;
}

    .beah-driver-empty i {
        display: block;
        margin-bottom: 10px;
        font-size: 40px;
    }

.beah-driver-navigate {
    font-weight: 600;
    color: #2E7D32;
}

/* --- Earnings trend chip ---------------------------------------- */
.beah-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 6px;
    font-weight: 700;
}

.beah-trend-up {
    color: #166534;
}

.beah-trend-down {
    color: #991B1B;
}

/* --- Dashboard ---------------------------------------------------- */
.beah-kpi-go {
    margin-inline-start: auto;
    /* An affordance rather than content, so it stays centred while the figures
       above align to the top. */
    align-self: center;
    color: #b6c4b9;
    font-size: 18px;
}

.beah-kpi-card:hover .beah-kpi-go {
    color: #2E7D32;
}

.beah-activity-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.beah-activity-text i {
    color: #2E7D32;
    margin-inline-end: 6px;
}

.beah-activity-when {
    flex: none;
    font-size: 11.5px;
    /* #8a978e measured 3.2:1 on white; the KPI label's green-grey holds 5.6:1. */
    color: #5E6D63;
    white-space: nowrap;
}

/* The dashboard reads as a to-do list first: what needs doing, what stands between
   the company and its next bid or request, what expires next, the work coming up -
   then the figures. Every section shares one head strip and one row shape. */
.beah-dash-row > [class*="col-"] {
    display: flex;
}

.beah-dash-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
}

.beah-dash-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    color: #0F172A;
}

    .beah-dash-head > i {
        color: #2E7D32;
    }

.beah-dash-head-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #2E7D32;
}

    .beah-dash-head-link:hover {
        color: #185c24;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.beah-dash a:focus-visible,
.beah-dash .beah-kpi-card:focus-visible {
    outline: 2px solid #2E7D32;
    outline-offset: -2px;
}

/* One row shape for tasks, checks and agenda items: marker, text, then whatever the row offers. */
.beah-dash-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .beah-dash-list > li + li {
        border-top: 1px solid #EEF2EF;
    }

.beah-dash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: inherit;
    transition: background-color .15s ease;
}

    .beah-dash-item:hover,
    .beah-dash-item:focus {
        color: inherit;
        text-decoration: none;
    }

    .beah-dash-item[href]:hover {
        background-color: #F6FAF7;
    }

.beah-dash-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 15px;
}

    .beah-dash-icon.is-danger {
        background: #FEE2E2;
        color: #B91C1C;
    }

    .beah-dash-icon.is-warning {
        background: #FEF3C7;
        color: #B45309;
    }

    .beah-dash-icon.is-info {
        background: #DBEAFE;
        color: #1D4ED8;
    }

    .beah-dash-icon.is-success {
        background: #E8F5E9;
        color: #2E7D32;
    }

    .beah-dash-icon.is-quiet {
        background: #F1F5F3;
        color: #7C8A80;
    }

.beah-dash-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.beah-dash-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #14221a;
}

.beah-dash-sub {
    font-size: 12px;
    line-height: 1.4;
    color: #5E6D63;
    overflow-wrap: anywhere;
}

/* An urgent task carries a faint tint, and its secondary text takes the tint's hue
   rather than staying grey so it keeps its contrast. */
.beah-dash-task.is-danger {
    background-color: #FEF7F7;
}

    .beah-dash-task.is-danger[href]:hover {
        background-color: #FDEEEE;
    }

    .beah-dash-task.is-danger .beah-dash-sub {
        color: #8A4545;
    }

/* The whole row is the link; this only names what it does. */
.beah-dash-action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.beah-dash-task:hover .beah-dash-action {
    border-color: #A7BDAD;
    color: #0F172A;
}

.beah-dash-clear {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
}

    .beah-dash-clear strong {
        display: block;
        font-size: 13px;
        color: #14221a;
    }

    .beah-dash-clear div > span {
        display: block;
        font-size: 12px;
        color: #5E6D63;
    }

    .beah-dash-clear.is-compact {
        padding: 4px 0 0;
    }

/* Beside a taller readiness list, the all-clear sits in the middle of its card, not at the top. */
.beah-dash-block > .beah-dash-clear {
    flex: 1 1 auto;
}

.beah-dash .beah-activity-text {
    font-size: 13px;
    color: #14221a;
}

/* Readiness: a checklist, so the mark is the status and the row leads to the fix. */
.beah-dash-check {
    padding: 10px 16px;
}

.beah-dash-check-mark {
    flex: none;
    width: 20px;
    font-size: 18px;
    text-align: center;
}

.beah-dash-check.is-done .beah-dash-check-mark {
    color: #2E7D32;
}

.beah-dash-check.is-waiting .beah-dash-check-mark {
    color: #1D4ED8;
}

.beah-dash-check.is-open .beah-dash-check-mark {
    color: #DC2626;
}

.beah-dash-check.is-done .beah-dash-title {
    font-weight: 500;
    color: #3d4a41;
}

.beah-dash-fix {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #2E7D32;
}

/* be'ah's queues: a count per queue, in two columns once there is room. The 1px gap
   over a tinted ground draws the rules between cells without doubling any. */
.beah-dash-queue {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: #EEF2EF;
}

.beah-dash-queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    color: inherit;
    transition: background-color .15s ease;
}

    .beah-dash-queue-item:hover,
    .beah-dash-queue-item:focus {
        color: inherit;
        text-decoration: none;
    }

    .beah-dash-queue-item[href]:hover {
        background-color: #F6FAF7;
    }

.beah-dash-queue-count {
    flex: none;
    min-width: 32px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-align: end;
    color: #14221a;
    font-variant-numeric: tabular-nums;
}

.beah-dash-queue-item.is-clear .beah-dash-title {
    font-weight: 500;
    color: #5E6D63;
}

.beah-dash-queue-item.is-clear .beah-dash-queue-count {
    color: #A3B0A7;
}

@media (min-width: 992px) {
    .beah-dash-queue {
        grid-template-columns: repeat(2, 1fr);
    }

    .beah-dash-queue-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.beah-dash-go {
    flex: none;
    font-size: 16px;
    color: #b6c4b9;
}

.beah-dash-queue-item[href]:hover .beah-dash-go {
    color: #2E7D32;
}

/* Documents: the registers' health as one bar, then what to renew next. */
.beah-dash-docbar {
    display: flex;
    gap: 2px;
    height: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
}

    .beah-dash-docbar > span {
        flex-basis: 0;
        min-width: 4px;
    }

    .beah-dash-docbar .is-expired,
    .beah-dash-legend.is-expired::before {
        background: #DC2626;
    }

    .beah-dash-docbar .is-sentback,
    .beah-dash-legend.is-sentback::before {
        background: #9F1239;
    }

    .beah-dash-docbar .is-expiring,
    .beah-dash-legend.is-expiring::before {
        background: #F59E0B;
    }

    .beah-dash-docbar .is-waiting,
    .beah-dash-legend.is-waiting::before {
        background: #3B82F6;
    }

    .beah-dash-docbar .is-valid,
    .beah-dash-legend.is-valid::before {
        background: #43A047;
    }

.beah-dash-doclegend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #5E6D63;
}

.beah-dash-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .beah-dash-legend::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .beah-dash-legend b {
        color: #0F172A;
        font-variant-numeric: tabular-nums;
    }

.beah-dash-docs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.beah-dash-doc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #EEF2EF;
}

    .beah-dash-doc::before {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        margin-top: 5px;
        border-radius: 50%;
        background: #94A3B8;
    }

    .beah-dash-doc.is-danger::before {
        background: #DC2626;
    }

    .beah-dash-doc.is-warning::before {
        background: #F59E0B;
    }

    .beah-dash-doc.is-soon::before {
        background: #FCD34D;
    }

.beah-dash-doc-note {
    font-size: 12px;
    color: #8A4545;
}

    .beah-dash-doc-note i {
        margin-inline-end: 4px;
    }

.beah-dash-when {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: end;
}

    .beah-dash-when strong {
        font-size: 12.5px;
        color: #14221a;
    }

    .beah-dash-when span {
        font-size: 11.5px;
        color: #5E6D63;
        font-variant-numeric: tabular-nums;
    }

.beah-dash-doc.is-danger .beah-dash-when strong {
    color: #991B1B;
}

.beah-dash-doc.is-warning .beah-dash-when strong {
    color: #92400E;
}

.beah-dash-more {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid #EEF2EF;
    font-size: 12px;
    font-weight: 600;
    color: #2E7D32;
}

/* Agenda: a calendar leaf for the day, so the column reads down by date. */
.beah-dash-date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 46px;
    border: 1px solid #E2E8E4;
    border-radius: 8px;
    background: #fff;
    line-height: 1;
}

    .beah-dash-date b {
        font-size: 17px;
        color: #14221a;
        font-variant-numeric: tabular-nums;
    }

    .beah-dash-date span {
        margin-top: 4px;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #2E7D32;
    }

    .beah-dash-date.is-none {
        color: #A3B0A7;
        font-size: 16px;
    }

.beah-dash-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.beah-dash-time {
    font-size: 11.5px;
    color: #5E6D63;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[dir="rtl"] .beah-dash .fa-angle-right {
    transform: scaleX(-1);
}

/* A phone keeps each task's text at full width: the action drops beneath it,
   aligned with the text rather than the marker. */
@media (max-width: 575.98px) {
    .beah-dash-task {
        flex-wrap: wrap;
    }

        .beah-dash-task .beah-dash-text {
            flex-basis: calc(100% - 46px);
        }

    .beah-dash-action {
        margin-inline-start: 46px;
    }

    .beah-dash-queue-item {
        padding: 12px;
    }
}
/* ---------- Collection calendar (be'ah and generator share it) ---------- */

/* The positioning context the load card is placed against. */
.beah-calendar {
    position: relative;
}

.beah-calendar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.beah-calendar-month {
    min-width: 150px;
    font-size: 15px;
}

.beah-calendar-today {
    margin-inline-start: 4px;
}

/* The list's marks legend sits on its own line above the table, at its right. */
.beah-list-mark-legend {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.beah-calendar-legend {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #6b7280;
}

/* The dot takes its meaning from the pill class and its weight from here: a
   pale pill fill reads as a chip at full size and as nothing at 10px. */
.beah-calendar-dot.beah-pill-success {
    background: #16A34A;
}

.beah-calendar-dot.beah-pill-warning {
    background: #D97706;
}

.beah-calendar-dot.beah-pill-danger {
    background: #DC2626;
}

.beah-calendar-dot.beah-pill-info {
    background: #0EA5E9;
}

.beah-calendar-dot.beah-pill-neutral {
    background: #94A3B8;
}

/* Planned - not offered yet - is drawn as an outline: the date is real, the offer is not. */
.beah-calendar-dot.is-planned {
    background: transparent;
    border: 2px dashed #0EA5E9;
}

.beah-calendar-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-inline-end: 5px;
    vertical-align: middle;
}

.beah-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.beah-calendar-dow {
    background: #f9fafb;
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
}

.beah-calendar-cell {
    background: #fff;
    min-height: 92px;
    padding: 5px 6px;
}

    .beah-calendar-cell.is-outside {
        background: #fafafa;
    }

        .beah-calendar-cell.is-outside .beah-calendar-date {
            color: #64748B;
        }

    .beah-calendar-cell.is-today {
        box-shadow: inset 0 0 0 2px #16a34a;
    }

.beah-calendar-date {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

/* A date with collections opens its day: the number reads as plain text until hovered, with a 24px target. */
.beah-calendar-date-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin-block: -4px;
    margin-inline-start: -5px;
    padding: 0 5px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .beah-calendar-date-open:hover,
    .beah-calendar-date-open[aria-expanded="true"] {
        background: #EDF6EE;
        color: #1E6B34;
    }

    .beah-calendar-date-open:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 1px;
    }

.beah-calendar-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.beah-calendar-event {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.4;
    text-align: start;
    cursor: pointer;
}

/* Two fixed lines - the facility, then waste type and time - each cut to its own width, so a
   long facility name never pushes the time out of sight. */
.beah-calendar-event-name,
.beah-calendar-event-detail {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beah-calendar-event-name {
    font-weight: 600;
}

.beah-calendar-event.is-planned {
    background: #fff;
    border: 1px dashed #7DD3FC;
    color: #0369A1;
}

.beah-calendar-event-detail {
    font-size: 10.5px;
}

.beah-calendar-empty {
    padding: 14px;
    text-align: center;
    color: #64748B;
}

/* A month grid cannot usefully shrink below its seven columns, so it scrolls. */
@media (max-width: 767px) {
    .beah-calendar-grid {
        min-width: 620px;
    }

    .beah-calendar {
        overflow-x: auto;
    }
}

/* ---------- Collection planner ----------------------------------
   The planner is where be'ah decides how often to collect an area, so it
   reads as worksheet rather than dashboard: the tonnage, what the tonnage
   is made of, what is already scheduled, and the days to add. */

/* Figures a planner compares down a column must align, so every number in
   this surface sits on tabular, lining figures. */
.beah-plan {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.beah-plan-area {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

    .beah-plan-area:hover {
        border-color: #CBD5E1;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    }

.beah-plan-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.beah-plan-code {
    font-size: 20px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
}

.beah-plan-where {
    color: #64748B;
    font-size: 13px;
}

.beah-plan-total {
    margin-inline-start: auto;
    text-align: end;
    white-space: nowrap;
}

    .beah-plan-total strong {
        font-size: 22px;
        font-weight: 700;
        color: #0F172A;
        letter-spacing: -0.01em;
    }

    .beah-plan-total span {
        display: block;
        font-size: 12px;
        color: #64748B;
    }

/* What the tonnage is made of. The bar is the data, not an ornament: each
   band is one waste type, sized by its share. */
.beah-plan-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: #F1F5F9;
    margin: 12px 0 10px;
}

.beah-plan-band {
    height: 100%;
    min-width: 3px;
    transition: opacity 160ms ease-out;
}

    .beah-plan-band.is-dimmed {
        opacity: .28;
    }

/* One row per waste stream: what it is on the left, who collects it on the
   right. A stream with no schedule has to say so on its own line, or an area
   with one covered type reads as covered. */
.beah-plan-streams {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

/* Each waste type is a tinted band, not a ruled line: the tint is what says "this opens".
   On a white row it read as plain text, and the hover tint was too faint to notice. */
.beah-plan-stream {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F1F5F9;
    cursor: pointer;
    transition: background-color 140ms ease-out;
}

    .beah-plan-stream:hover,
    .beah-plan-stream.is-active {
        background: #E5EBF2;
    }

    /* Secondary text one step darker than elsewhere: the page's slate grey drops below
       4.5:1 on the tint. */
    .beah-plan-stream .beah-plan-type-qty,
    .beah-plan-stream .beah-plan-stream-rate {
        color: #475569;
    }

    /* The controls inside that do something other than open the row keep their
       own cursor, so the pointer never promises the wrong action. */
    .beah-plan-stream .btn,
    .beah-plan-stream .beah-plan-filter-btn {
        cursor: pointer;
    }

    .beah-plan-stream .beah-plan-sessions {
        cursor: auto;
    }

    /* Open, the band takes the green of its name and caret, so which stream the panel
       below belongs to is never in doubt. */
    .beah-plan-stream.is-open,
    .beah-plan-stream.is-open:hover {
        background: #EDF6EE;
    }

/* The caret is the promise that the row opens; it sits before the swatch so the
   whole left edge reads as one control. */
.beah-plan-caret {
    color: #475569;
    width: 10px;
    font-size: 14px;
    align-self: center;
}

.beah-plan-stream.is-open > .beah-plan-type .beah-plan-caret,
.beah-plan-stream.is-open > .beah-plan-type .beah-plan-type-name {
    color: #2E7D32;
}

/* Filtering the plan to one stream is a second, rarer act, so it is a quiet
   control that only colours in once it is doing something. */
.beah-plan-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
    background: none;
    border: 0;
    padding: 2px 6px;
    border-radius: 5px;
    color: #64748B;
    cursor: pointer;
    line-height: 1;
}

    .beah-plan-filter-btn:hover,
    .beah-plan-filter-btn:focus-visible {
        color: #2E7D32;
        background: #F0FDF4;
    }

    .beah-plan-filter-btn.is-on {
        color: #2E7D32;
        background: #DCFCE7;
    }

/* The sessions themselves: a full-width band under the stream that opened it,
   inset so it reads as belonging to that row and not to the area. */
.beah-plan-sessions {
    flex: 0 0 100%;
    /* Sized with its padding, or it overflows the band it opens from by exactly that. */
    box-sizing: border-box;
    min-width: 0;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #DCE5DE;
    animation: beah-plan-sessions-in 140ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes beah-plan-sessions-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
}

.beah-plan-sessions-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #E8EDF2;
}

.beah-plan-sessions-total {
    margin-inline-start: auto;
    color: #64748B;
}

.beah-plan-session {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #EEF2F6;
}

    .beah-plan-session:last-child {
        border-bottom: 0;
    }

.beah-plan-session-date {
    flex: 0 0 96px;
    font-weight: 600;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

.beah-plan-session-who {
    flex: 1 1 auto;
    min-width: 0;
    color: #334155;
}

    .beah-plan-session-who small {
        display: block;
        color: #64748B;
    }

/* What the generator said when they turned the session down. Italic so it reads
   as their words rather than as another field of ours. */
.beah-plan-session-note {
    margin-top: 2px;
    font-style: italic;
}

    .beah-plan-session-note .fa {
        font-style: normal;
        margin-inline-end: 4px;
    }

/* Which view of the stream the panel shows: who declares it, or the days collecting it. */
.beah-plan-panel-toggle {
    margin-bottom: 8px;
}

/* One facility's part of a stream: who, a bar for its share, then how much. The bar
   lets the heavy contributors read at a glance down a list of fifty. */
.beah-plan-share-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 28%) auto;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

    .beah-plan-share-row + .beah-plan-share-row {
        border-top: 1px solid #EEF2F6;
    }

.beah-plan-share-bar {
    height: 6px;
    border-radius: 999px;
    background: #E8EDF2;
    overflow: hidden;
}

    .beah-plan-share-bar > span {
        display: block;
        height: 100%;
        min-width: 2px;
        border-radius: inherit;
        background: #2E7D32;
    }

.beah-plan-share-qty {
    min-width: 92px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

    .beah-plan-share-qty small {
        display: block;
        color: #64748B;
    }

@media (max-width: 767px) {
    .beah-plan-share-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .beah-plan-share-bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ---------- Declared vs Collected -----------------------------------
   What a facility declared it produces a month beside what was measured leaving it.
   The month's totals are one ledger line rather than another row of tiles - the page
   already opens on tiles - and each row's verdict is a bullet bar: the on-track band,
   a tick at 100% of declared, and the collected fill. */
.beah-dvc-head {
    margin-bottom: 14px;
}

.beah-dvc-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 0;
    margin: 4px 0 12px;
    padding: 10px 0;
    border-top: 1px solid #EEF2F6;
    border-bottom: 1px solid #EEF2F6;
}

.beah-dvc-figure {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding-inline: 16px;
    color: #475569;
}

    .beah-dvc-figure:first-child {
        padding-inline-start: 0;
    }

    .beah-dvc-figure + .beah-dvc-figure {
        border-inline-start: 1px solid #E2E8F0;
    }

    .beah-dvc-figure strong {
        color: #0F172A;
        font-size: 16px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .beah-dvc-figure small {
        color: #64748B;
    }

/* The facility keeps a readable width while the table scrolls on a phone. */
.beah-dvc-table td:first-child {
    min-width: 180px;
}

.beah-dvc-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.beah-dvc-against {
    min-width: 280px;
}

    .beah-dvc-against > * {
        vertical-align: middle;
    }

.beah-dvc-bar {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 12px;
    margin-inline-end: 12px;
    border-radius: 999px;
    background: #EEF2F6;
    overflow: hidden;
}

/* The on-track range, so "close enough" is a place on the bar rather than a number to recall. */
.beah-dvc-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #D7F0DC;
}

.beah-dvc-fill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    inset-inline-start: 0;
    border-radius: 999px;
    background: #94A3B8;
}

    .beah-dvc-fill.is-OnTrack {
        background: #2E7D32;
    }

    .beah-dvc-fill.is-UnderCollected {
        background: #D97706;
    }

    .beah-dvc-fill.is-OverCollected {
        background: #2563EB;
    }

    .beah-dvc-fill.is-Undeclared {
        background: #7E22CE;
    }

/* 100% of what was declared. */
.beah-dvc-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-inline-start: -1px;
    background: #0F172A;
}

.beah-dvc-verdict {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.beah-dvc-percent {
    min-width: 46px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

.beah-dvc-method {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    color: #475569;
}

@media (max-width: 767px) {
    .beah-dvc-figure {
        padding-inline: 0 12px;
    }

        .beah-dvc-figure + .beah-dvc-figure {
            border-inline-start: 0;
        }

    /* A phone gets each row as a card rather than a table to scroll sideways, which put
       the verdict - the column the tab exists for - a screen to the right. The facility
       leads, the waste type and the two quantities share a line under their own labels,
       and the bar and verdict close the card full width. */
    .beah-dvc-table thead {
        display: none;
    }

    .beah-dvc-table,
    .beah-dvc-table tbody {
        display: block;
        width: 100%;
    }

        .beah-dvc-table tr {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px 12px;
            padding: 12px 0;
            border-bottom: 1px solid #E2E8F0;
        }

            .beah-dvc-table tr > td,
            .beah-dvc-table tr > td:first-child {
                grid-column: 1 / -1;
                min-width: 0;
                padding: 0;
                border: 0;
                text-align: start;
                white-space: normal;
            }

                .beah-dvc-table tr > td[data-label] {
                    grid-column: auto;
                }

                .beah-dvc-table tr > td[data-label]::before {
                    content: attr(data-label);
                    display: block;
                    margin-bottom: 2px;
                    color: #64748B;
                    font-size: 11px;
                    font-weight: 600;
                }

    .beah-dvc-against {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .beah-dvc-bar {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
    }

    /* The verdict keeps the card's end edge, bar or no bar. */
    .beah-dvc-verdict {
        margin-inline-start: auto;
    }
}

/* A collection day: one row however many facilities it reaches, opening onto
   them. The counts sit on the row so a day that still owes answers is found by
   its amber chip without opening anything. */
.beah-plan-day-group + .beah-plan-day-group {
    border-top: 1px solid #EEF2F6;
}

/* A schedule's collection history reads like Plan by Area's collection days: the
   schedule, its totals (also the filter), then a row per day opening onto its points. */
.beah-history-head {
    margin-bottom: 10px;
}

    .beah-history-head strong {
        font-size: 15px;
        color: var(--beah-text);
        margin-inline-end: 8px;
    }

    .beah-history-head small {
        color: #475569;
    }

.beah-history-line {
    margin-top: 2px;
    color: #475569;
}

.beah-history-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F8FAFC;
}

.beah-history-total {
    font-weight: 600;
    color: #334155;
}

    .beah-history-total .fa-check-circle {
        color: #2E7D32;
    }

.beah-history-sub {
    display: block;
    color: #475569;
}

.beah-history-table .beah-plan-session-note {
    display: block;
}

.beah-history-answered {
    color: #475569;
    white-space: nowrap;
}

/* The history's dates carry their year, so the date column takes its own width. */
.beah-history .beah-plan-session-date {
    flex: 0 0 auto;
    width: auto;
    min-width: 128px;
    white-space: nowrap;
}

.beah-plan-day-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 5px 6px;
    margin: 0 -6px;
    box-sizing: content-box;
    background: none;
    border: 0;
    border-radius: 6px;
    text-align: start;
    color: #334155;
    cursor: pointer;
}

    .beah-plan-day-row:hover {
        background: #F1F5F9;
    }

    .beah-plan-day-row .beah-plan-session-date {
        flex-basis: 84px;
    }

.beah-plan-day-group.is-open > .beah-plan-day-row .beah-plan-caret,
.beah-plan-day-group.is-open > .beah-plan-day-row .beah-plan-session-date {
    color: #2E7D32;
}

/* Days already gone read quieter than the ones still ahead. */
.beah-plan-day-group.is-past .beah-plan-session-date {
    color: #64748B;
    font-weight: 500;
}

.beah-plan-day-schedule {
    flex: 1 1 auto;
    min-width: 0;
}

    .beah-plan-day-schedule small {
        display: block;
        color: #64748B;
        font-variant-numeric: tabular-nums;
    }

.beah-plan-day-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-plan-day-total {
    flex: 0 0 auto;
    min-width: 76px;
    text-align: end;
    color: #64748B;
    font-variant-numeric: tabular-nums;
}

/* The facilities of the open day, indented under its date so they read as
   belonging to it. */
.beah-plan-day-sessions {
    margin: 2px 0 8px;
    padding: 2px 10px;
    margin-inline-start: 19px;
    background: #fff;
    border: 1px solid #EEF2F6;
    border-radius: 6px;
}

.beah-plan-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.beah-plan-sessions-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #E8EDF2;
    color: #334155;
    font-weight: 600;
}

    .beah-plan-sessions-filter .fa {
        color: #2E7D32;
    }

    .beah-plan-sessions-filter .btn-link {
        padding: 0 4px;
        font-weight: 600;
        color: #2E7D32;
    }

.beah-plan-sessions-loading,
.beah-plan-sessions-empty {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #64748B;
    padding: 6px 0;
}

.beah-plan-sessions-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748B;
}

@media (max-width: 767px) {
    .beah-plan-day-row {
        flex-wrap: wrap;
    }

    .beah-plan-day-schedule {
        flex-basis: calc(100% - 120px);
    }

    /* Basis 0, so the chips wrap inside their line rather than pushing the
       facility count onto one of its own. */
    .beah-plan-day-row .beah-plan-counts {
        flex: 1 1 0;
        min-width: 0;
        margin-inline-start: 19px;
    }
}

/* The right-hand cluster: what the sessions came back as, then the days that
   produced them. Grouped so the row stays two-ended however many counts show. */
.beah-plan-stream-state {
    display: flex;
    align-items: center;
    /* Takes the rest of the row and wraps INSIDE itself. Sized to its content it
       dropped below the name as one block the moment the counts, seven days and
       the rate stopped fitting - which orphaned the name on a full-width line
       and left the cluster right-aligned against nothing. */
    /* Basis 0, not auto: flex places items by their base size, so a cluster
       measured at its content width is judged "too wide to sit beside the name"
       and wraps whole before it ever shrinks. From 0 it always shares the line
       and grows into what is left. */
    flex: 1 1 0;
    min-width: 0;
    /* Two fixed rows - what the sessions came back as, then the days that make
       them - rather than one line that wraps only when it happens to overflow.
       Sharing a line when they fit gave every stream a different shape, so a
       column of them never lined up. */
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.beah-plan-counts {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* Quieter than the pills in the panel: these repeat on every stream of every
   area, and a wall of solid colour stops being a signal. */
.beah-plan-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .beah-plan-count::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex: none;
        background: currentColor;
    }

    /* Awaiting an answer is the one worth acting on, so it alone is filled. */
    .beah-plan-count.is-offered {
        background: #FFFBEB;
        border-color: #FDE68A;
        color: #92400E;
    }

    .beah-plan-count.is-accepted {
        color: #166534;
        border-color: #BBF7D0;
    }

    .beah-plan-count.is-rejected {
        color: #B91C1C;
        border-color: #FECACA;
    }

    .beah-plan-count.is-noreply,
    .beah-plan-count.is-cancelled {
        color: #475569;
    }

    .beah-plan-count.is-planned {
        color: #0369A1;
        border-color: #7DD3FC;
        border-style: dashed;
    }

/* A day still to be offered has nothing to open. */
.beah-plan-day-group.is-planned .beah-plan-day-row {
    cursor: default;
}

    .beah-plan-day-group.is-planned .beah-plan-caret {
        color: #0EA5E9;
    }

    /* Nothing offered yet on a stream that is scheduled: the row stays, because
       a missing row is a different shape, not a quieter one. */
    .beah-plan-count.is-none {
        color: #64748B;
        border-style: dashed;
        font-weight: 600;
    }

        .beah-plan-count.is-none::before {
            display: none;
        }

    /* On the stream row a count is also its filter. */
    .beah-plan-count.is-filter {
        min-height: 24px;
        cursor: pointer;
        transition: background-color 120ms ease-out, border-color 120ms ease-out;
    }

        .beah-plan-count.is-filter:hover {
            border-color: currentColor;
        }

        .beah-plan-count.is-filter.is-on {
            border-color: currentColor;
            box-shadow: inset 0 0 0 1px currentColor;
        }

@media (max-width: 767px) {
    .beah-plan-stream-state {
        justify-content: flex-start;
    }
}

.beah-plan-stream-days {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.beah-plan-stream-rate {
    color: #64748B;
}

.beah-plan-type {
    display: flex;
    align-items: baseline;
    gap: 7px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #334155;
    text-align: start;
}

    .beah-plan-type:hover .beah-plan-type-name,
    .beah-plan-type:focus-visible .beah-plan-type-name {
        color: #2E7D32;
    }

    .beah-plan-type.is-active .beah-plan-type-name {
        color: #2E7D32;
        font-weight: 700;
    }

.beah-plan-swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
    align-self: center;
}

.beah-plan-type-name {
    font-weight: 600;
}

.beah-plan-type-qty {
    color: #64748B;
}

/* On be'ah's plan, the internal transporter that holds a waste type in the city, on a line of its own under the name -
   be'ah schedules only what nobody holds. */
.beah-plan-managed {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    padding-inline-start: 33px;
}

    .beah-plan-managed-pill {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px 10px 2px 4px;
        border: 1px solid #CBD5E1;
        border-radius: 999px;
        background: #fff;
        color: #334155;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
    }

        /* Nobody holds it: the same person, dashed and quiet - be'ah's to schedule. */
        .beah-plan-managed-pill.is-none {
            border-style: dashed;
            color: #64748B;
            font-weight: 500;
        }

    .beah-fleet-badge.is-unheld {
        border: 1px dashed #94A3B8;
        background: #fff;
        color: #64748B;
    }

/* From 768px the row is a grid: the name, its transporter pill and the From line stacked down the left, and the
   counts and days beside all three on the right - one column for each, so a stream with two lines of days is as tall
   as its days rather than its days plus the lines under them. The left column is as wide as its widest line up to
   45% of the row, so a long From line wraps there rather than squeezing the days; the panel a row opens takes the
   whole width beneath. Below 768px it stays the wrapping row. */
@media (min-width: 768px) {
    .beah-plan-stream {
        display: grid;
        grid-template-columns: fit-content(45%) minmax(0, 1fr) auto;
        align-items: start;
        /* No row gap: a row with no pill or no From line leaves an empty track, and a gap would still open there. */
        gap: 0 14px;
    }

        .beah-plan-stream > .beah-plan-type,
        .beah-plan-stream > .beah-plan-managed,
        .beah-plan-stream > .beah-plan-from {
            grid-column: 1;
        }

        .beah-plan-stream > .beah-plan-managed,
        .beah-plan-stream > .beah-plan-from {
            margin-top: 6px;
        }

        .beah-plan-stream > .beah-plan-stream-state {
            grid-column: 2;
            grid-row: 1 / span 3;
        }

        .beah-plan-stream > .beah-plan-filter-btn {
            grid-column: 3;
            grid-row: 1;
        }

        .beah-plan-stream > .beah-plan-sessions {
            grid-column: 1 / -1;
        }
}

/* Whose waste it is, on a line of its own under the row and indented to the name.
   Beside the name it squeezed the counts and days into a column and wrapped onto
   three lines of its own; across the row it fits three companies on one. */
.beah-plan-from {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 0;
    padding-inline-start: 33px;
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
}

.beah-plan-from-label {
    margin-inline-end: 6px;
}

.beah-plan-from-company {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

    .beah-plan-from-company + .beah-plan-from-company::before {
        content: '\00B7';
        margin-inline: 7px;
        color: #94A3B8;
    }

.beah-plan-from-name {
    color: #1E293B;
    font-weight: 600;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-plan-from-qty {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The rest of the companies, one click from the breakdown that names them all. */
.beah-plan-from-more {
    margin-inline-start: 10px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #2E7D32;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(46, 125, 50, .35);
}

    .beah-plan-from-more:hover {
        text-decoration-color: currentColor;
    }

/* On a phone the line wraps anyway, so each company takes a line of its own beside
   "From" rather than wrapping with a stray separator at the head of the next. */
@media (max-width: 767px) {
    .beah-plan-from {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
    }

    .beah-plan-from-label {
        grid-row: 1 / span 4;
    }

    .beah-plan-from-company,
    .beah-plan-from-more {
        grid-column: 2;
        max-width: 100%;
    }

        .beah-plan-from-company + .beah-plan-from-company::before {
            display: none;
        }

    .beah-plan-from-more {
        margin-inline-start: 0;
        padding: 0;
    }

    .beah-plan-from-name {
        max-width: none;
        min-width: 0;
    }
}

/* Coverage: the days already collecting this area, and what is missing. */
.beah-plan-coverage {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F1F5F9;
    font-size: 13px;
}

    /* The row pushes its own action right. It used to borrow
       `.beah-section-action` - a section *header* slot - for the auto margin. */
    .beah-plan-coverage .btn {
        margin-inline-start: auto;
    }

.beah-plan-days-set {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.beah-plan-day {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
    border-radius: 999px;
    padding: 3px 9px;
    font-weight: 600;
    white-space: nowrap;
}

    /* The scope marker: a pin for a schedule naming this pocket, a globe for one
       taking the whole wilayat. Both are drawn, because an icon on one and
       nothing on the other reads as an exception rather than a pair. */
    .beah-plan-day .fa {
        font-size: 10px;
        opacity: .8;
    }

    /* A day covered only by a schedule that takes the whole wilayat, rather
       than one naming this pocket. The style carries it too; repeating the words
       on every chip is what pushed the row onto a second line. */
    .beah-plan-day.is-wilayat {
        background: #F8FAFC;
        border-color: #E2E8F0;
        color: #475569;
    }

    /* More than one schedule lands on this day. */
    .beah-plan-day small {
        font-size: 10px;
        font-weight: 700;
        opacity: .75;
    }

.beah-plan-unscheduled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: 999px;
    padding: 3px 11px;
    font-weight: 600;
}

/* The area's one-line verdict, under the streams it summarises. */
.beah-plan-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-weight: 600;
}

    .beah-plan-summary .fa {
        color: #2E7D32;
    }

    .beah-plan-summary.is-warning {
        color: #92400E;
    }

        .beah-plan-summary.is-warning .fa {
            color: #B45309;
        }

/* One page of areas at a time; the heaviest first, which is the order they
   get acted on. */
.beah-plan-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
}

.beah-plan-pager-count {
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}

/* The week picker: seven chips, because the question is literally which days. */
.beah-week {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.beah-week-day {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

    .beah-week-day:hover:not(:disabled) {
        border-color: #86EFAC;
        color: #166534;
    }

    .beah-week-day.is-on {
        background: #2E7D32;
        border-color: #2E7D32;
        color: #fff;
    }

    /* A day that already collects this stream here. Still selectable - the
       server refuses only an exact repeat of day, frequency and window - so the
       chip carries a tick rather than going dead. */
    .beah-week-day.is-taken {
        border-color: #BBF7D0;
        background: #F0FDF4;
    }

        .beah-week-day.is-taken.is-on {
            background: #2E7D32;
            border-color: #2E7D32;
        }

.beah-week-taken {
    position: absolute;
    top: 3px;
    inset-inline-end: 4px;
    font-size: 9px;
    color: #166534;
    line-height: 1;
}

.beah-week-day.is-on .beah-week-taken {
    color: #BBF7D0;
}

/* The arithmetic, stated rather than implied: what each chosen day carries. */
/* The dates a schedule will collect on, under its dates - how a frequency and a start date
   combine, seen before saving. */
.beah-schedule-preview {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid var(--beah-border);
    border-radius: 10px;
    font-size: 13px;
    color: #334155;
}

.beah-schedule-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 8px;
}

    .beah-schedule-preview-head strong {
        color: var(--beah-text);
    }

    .beah-schedule-preview-head span {
        color: #475569;
    }

.beah-schedule-preview-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .beah-schedule-preview-dates li {
        padding: 3px 10px;
        border-radius: 999px;
        background: #EDF6EE;
        color: #1B5E20;
        font-weight: 600;
        white-space: nowrap;
    }

        .beah-schedule-preview-dates li.is-more {
            background: none;
            color: #475569;
            font-weight: 400;
            padding-inline: 2px;
        }

.beah-schedule-preview-empty,
.beah-schedule-preview-note {
    margin: 8px 0 0;
    color: #475569;
}

    .beah-schedule-preview-note i {
        margin-inline-end: 6px;
        color: #B26A00;
    }

.beah-split-maths {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
    padding: 12px 14px;
    background: #F8FAFC;
    border-radius: 10px;
    font-size: 14px;
    color: #334155;
}

    .beah-split-maths strong {
        color: #0F172A;
        font-size: 17px;
        font-weight: 700;
    }

.beah-plan-empty {
    padding: 42px 20px;
    text-align: center;
    color: #64748B;
    border: 1px dashed #CBD5E1;
    border-radius: 12px;
    background: #FCFDFC;
}

    .beah-plan-empty strong {
        display: block;
        color: #0F172A;
        font-size: 16px;
        margin-bottom: 6px;
    }

/* Loading reads as the shape that is coming, not a spinner over nothing. */
.beah-plan-skeleton {
    height: 116px;
    border-radius: 12px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, #F1F5F9 25%, #E9EEF3 37%, #F1F5F9 63%);
    background-size: 400% 100%;
    animation: beah-plan-shimmer 1.4s ease-in-out infinite;
}

@keyframes beah-plan-shimmer {
    from {
        background-position: 100% 50%;
    }

    to {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .beah-plan-skeleton {
        animation: none;
    }
}

@media (max-width: 767px) {
    .beah-plan-total {
        margin-inline-start: 0;
        text-align: start;
        width: 100%;
    }
}

/* ---------- Browser surfaces ------------------------------------
   Selection, caret, scrollbars and the focus ring ship with defaults that
   belong to no design system. Theming them from the be'ah palette costs
   nothing and applies to every screen, not just the one being worked on. */

::selection {
    background: #C8E6C9;
    color: #14532D;
}

input,
textarea,
select,
[contenteditable] {
    caret-color: #2E7D32;
}

/* Keyboard focus is visible and on-brand; pointer focus stays quiet. */
:focus-visible {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Firefox takes the standard properties; WebKit needs its own pseudo-elements. */
* {
    scrollbar-width: thin;
    scrollbar-color: #C3D3C6 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #C3D3C6;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #9DB6A2;
        background-clip: content-box;
    }

/* ---------- Collection calendar: the month's load ----------------
   be'ah reads this grid to answer "is any day too heavy", so each cell
   states its own tonnage and draws it against the busiest day. */

.beah-calendar-summary {
    display: flex;
    align-items: center;
    gap: 8px 22px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 13px;
    color: #475569;
    font-variant-numeric: tabular-nums lining-nums;
}

    .beah-calendar-summary b {
        color: #0F172A;
        font-weight: 700;
    }

.beah-calendar-estimate {
    margin-inline-start: auto;
    color: #64748B;
}

/* A load calendar needs room for a figure and a bar per cell. */
.beah-calendar.is-load .beah-calendar-cell {
    min-height: 124px;
}

.beah-calendar.is-load .beah-calendar-date {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-variant-numeric: tabular-nums lining-nums;
}

.beah-calendar-load {
    font-size: 12px;
    font-weight: 700;
    color: #166534;
}

.is-outside .beah-calendar-load {
    color: #64748B;
}

/* A 4px bar is not a hit target; the wrapper is. It also owns the spacing the
   bar used to carry, so hovering anywhere near the bar counts. */
.beah-calendar-gauge-wrap {
    position: relative;
    display: block;
    padding: 3px 0;
    margin-bottom: 3px;
    border-radius: 3px;
    cursor: help;
}

    .beah-calendar-gauge-wrap:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 2px;
    }

.beah-calendar-gauge {
    height: 4px;
    border-radius: 2px;
    background: #F1F5F9;
    overflow: hidden;
}

.beah-calendar-gauge-fill {
    height: 100%;
    border-radius: 2px;
    background: #86C598;
    transition: width 200ms ease-out;
}

    /* The days worth a second look, not every day above average. */
    .beah-calendar-gauge-fill.is-heavy {
        background: #B45309;
    }

/* The load card. The native title tooltip took a second to appear, arrived in
   system chrome and never showed on touch, so the bar's whole meaning was
   effectively hidden. This is instant, legible and placed from the bar itself.
   It sits at the calendar root because .beah-calendar-grid clips to its
   corners and would cut it off on every edge day. */
.beah-calendar-tip {
    --tip-y: 0;
    position: absolute;
    z-index: 40;
    width: 208px;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 9px;
    background: #14261B;
    color: #fff;
    font-size: 11.5px;
    line-height: 1.55;
    text-align: start;
    box-shadow: 0 8px 22px rgba(20, 38, 27, .3);
    pointer-events: none;
    transform: translateY(var(--tip-y));
    animation: beah-calendar-tip-in 130ms cubic-bezier(.16, 1, .3, 1);
}

    .beah-calendar-tip.is-above {
        --tip-y: -100%;
    }

@keyframes beah-calendar-tip-in {
    from {
        opacity: 0;
        transform: translateY(calc(var(--tip-y) + 4px));
    }
}

.beah-calendar-tip-load {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .beah-calendar-tip-load strong {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.01em;
        font-variant-numeric: tabular-nums;
    }

.beah-calendar-tip-share {
    font-weight: 700;
    color: #8FD3A4;
    font-variant-numeric: tabular-nums;
}

    .beah-calendar-tip-share.is-heavy {
        color: #F4B678;
    }

.beah-calendar-tip-peak {
    color: #C7D6CC;
    font-variant-numeric: tabular-nums;
}

.beah-calendar-tip-estimate {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: #C7D6CC;
}

/* A chip's card: who and what, then when, the waste and the schedule, and for
   a planned date when its offer opens and why it waits. */
.beah-calendar-tip.is-event {
    width: 264px;
    padding: 10px 12px;
}

.beah-calendar-tip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

    .beah-calendar-tip-head strong {
        font-size: 12.5px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

.beah-calendar-tip-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #E2EBE5;
    white-space: nowrap;
}

    .beah-calendar-tip-status .beah-calendar-dot {
        width: 8px;
        height: 8px;
    }

.beah-calendar-tip-sub {
    color: #C7D6CC;
}

.beah-calendar-tip-rows {
    margin-top: 6px;
    display: grid;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

    .beah-calendar-tip-rows i {
        width: 16px;
        color: #8FD3A4;
    }

.beah-calendar-tip-planned {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    display: grid;
    gap: 3px;
    color: #C7D6CC;
}

    .beah-calendar-tip-planned strong {
        color: #7DD3FC;
        font-weight: 700;
    }

/* Drawn from the tip's own box so it tracks the bar even when the card has
   been pushed inward to stay on screen. */
.beah-calendar-tip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -5px;
    border: 5px solid transparent;
}

.beah-calendar-tip.is-above .beah-calendar-tip-arrow {
    top: 100%;
    border-top-color: #14261B;
}

.beah-calendar-tip:not(.is-above) .beah-calendar-tip-arrow {
    bottom: 100%;
    border-bottom-color: #14261B;
}

/* The legend's key for that threshold - a bar, not a dot, because it stands
   for the bar in the cell. */
.beah-calendar-bar-key {
    display: inline-block;
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: #B45309;
    margin-inline-end: 5px;
    vertical-align: middle;
}

/* "+N more": a bar the size of a chip, as Outlook draws it, so it reads as more of the same rather than a link.
   Hovering says what the folded collections are; a click opens the whole day. */
.beah-calendar-more {
    display: block;
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    background: #F1F5F9;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: #334155;
    text-align: start;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .beah-calendar-more:hover,
    .beah-calendar-more.is-open {
        border-color: #A7C4AE;
        background: #EDF6EE;
        color: #1E6B34;
    }

    .beah-calendar-more:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 1px;
    }

/* The fleet badge (_shared/fleetAssignment.js): one mark for whether an accepted scheduled collection has its fleet and
   driver. Filled green once assigned, a dashed grey outline while it waits - fill and outline differ, not just colour. */
.beah-fleet-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
}

    .beah-fleet-badge.is-assigned {
        border: 1px solid #1E6B34;
        background: #1E6B34;
        color: #fff;
    }

    .beah-fleet-badge.is-pending {
        border: 1px dashed #64748B;
        background: #fff;
        color: #64748B;
    }

    /* Its transporter: a person, slate-filled once one is named, crossed out in dashed amber with none. */
    .beah-fleet-badge.is-transporter {
        border: 1px solid #475569;
        background: #475569;
        color: #fff;
    }

    .beah-fleet-badge.is-no-transporter {
        border: 1px dashed #B45309;
        background: #FFFBEB;
        color: #B45309;
    }

    /* Who carries a scheduled collection, on the waste generator's side: be'ah itself (a building, green), or the
       internal transporter planning it (a person, slate as be'ah's own calendar draws a named transporter). */
    .beah-fleet-badge.is-beah {
        border: 1px solid #2E7D32;
        background: #2E7D32;
        color: #fff;
    }

    .beah-fleet-badge.is-carrier {
        border: 1px solid #475569;
        background: #475569;
        color: #fff;
    }

    .beah-fleet-badge.is-xs {
        width: 14px;
        height: 14px;
        margin-inline-end: 4px;
        font-size: 7.5px;
    }

/* An earning's details: the winning bid, less be'ah's bidder fee and each deduction, down to what is received - a ledger
   read top to bottom, the total ruled off beneath. */
.beah-earning-statement {
    font-size: 13px;
}

.beah-earning-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px dashed #e4ece5;
}

    .beah-earning-line > span:last-child {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .beah-earning-line.is-deduction {
        color: #B42318;
    }

        .beah-earning-line.is-deduction small {
            display: block;
            color: #475569;
        }

    .beah-earning-line.is-total {
        border-bottom: 0;
        border-top: 2px solid #2E7D32;
        margin-top: 4px;
        padding-top: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #185c24;
    }

.beah-earning-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8a978e;
    margin-bottom: 6px;
}

/* A collection request's edits while it took bids, as one table - one row per edit, latest first: when (spanning the lines of
   an edit that changed several fields), the field, what it was (struck through) and what it is now, and how many bidders were
   told. A rule sets each edit off from the next; one made after the reader's bid is tagged. */
.beah-request-change-table td,
.beah-request-change-table th {
    vertical-align: top;
}

.beah-request-change + .beah-request-change > tr:first-child > td {
    border-top: 2px solid #e2e8f0;
}

.beah-request-change-when {
    white-space: nowrap;
    width: 1%;
    font-weight: 600;
    color: #1E293B;
}

    .beah-request-change-when .beah-pill {
        display: table;
        margin-top: 4px;
    }

.beah-request-change-field {
    color: #475569;
}

.beah-request-change-before {
    color: #64748B;
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.beah-request-change-after {
    font-weight: 700;
    color: #1E293B;
    overflow-wrap: anywhere;
}

.beah-request-change-told {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* A job's deduction lines under its total: what was taken or given back, why and when - muted, wrapping, read right to left
   with the figure above them. */
.beah-deduction-line {
    display: block;
    margin-top: 2px;
    color: #475569;
    font-size: 11.5px;
    white-space: normal;
}

/* The data table's marks before a value: a little apart from each other and from the text. */
.beah-table-mark {
    margin-inline-end: 4px;
    cursor: default;
}

    .beah-table-mark:last-of-type {
        margin-inline-end: 8px;
    }

/* A scheduled collection's details: every section opens the same distance below the one before it, and a section's
   last line of rows carries no divider in either column, so no section looks closer to its neighbour than another. */
.beah-occurrence-detail .beah-profile-section-title {
    margin-top: 14px;
}

    .beah-occurrence-detail .beah-profile-hero + .beah-profile-section-title {
        margin-top: 0;
    }

.beah-occurrence-detail .beah-profile-hero {
    margin-bottom: 14px;
}

.beah-occurrence-detail .beah-profile-cols > .beah-profile-row:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.beah-occurrence-detail .beah-occurrence-warning {
    margin: 0 0 6px;
}

.beah-occurrence-detail .beah-fleet-state {
    margin: 10px 0 4px;
}

.beah-occurrence-detail > .beah-alert {
    margin-top: 14px;
}

/* The details' fleet line: the badge, what it means and, while waiting, that nothing is on the job yet. */
.beah-fleet-state {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 9px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    font-size: 13px;
}

    .beah-fleet-state.is-assigned {
        border-color: #CFE0D2;
        background: #F3FAF4;
    }

    .beah-fleet-state > div {
        display: flex;
        flex-direction: column;
    }

    .beah-fleet-state strong {
        color: #0F172A;
    }

    .beah-fleet-state span:not(.beah-fleet-badge) {
        color: #475569;
        font-size: 12px;
    }

.beah-calendar-legend .beah-fleet-badge.is-xs {
    margin-inline-end: 5px;
}

/* The "+N more" card's rows are status dots, not icons, so they keep the dot's own size. */
.beah-calendar-tip-rows i.beah-calendar-dot {
    width: 10px;
}

.beah-calendar-tip-hint {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: #CBD5E1;
}

/* The day panel: every collection on a day, over its cell, fixed to the window on <body>. */
.beah-calendar-day {
    position: fixed;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.beah-calendar-day:focus {
    outline: none;
}

.beah-calendar-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #EEF2F6;
}

.beah-calendar-day-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

    .beah-calendar-day-title strong {
        color: #0F172A;
        font-size: 14px;
    }

    .beah-calendar-day-title span {
        color: #475569;
        font-size: 12px;
    }

.beah-calendar-day-close {
    min-width: 28px;
    min-height: 28px;
    margin: -4px -6px 0 0;
    float: none;
}

.beah-calendar-day-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 0;
}

.beah-calendar-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 2px 9px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

    .beah-calendar-day-chip .beah-calendar-dot {
        width: 8px;
        height: 8px;
        margin-inline-end: 1px;
    }

    .beah-calendar-day-chip b {
        color: #64748B;
        font-variant-numeric: tabular-nums;
    }

    .beah-calendar-day-chip:hover {
        border-color: #A7C4AE;
    }

    .beah-calendar-day-chip.is-on {
        border-color: #2E7D32;
        background: #EDF6EE;
        color: #1E6B34;
    }

        .beah-calendar-day-chip.is-on b {
            color: #1E6B34;
        }

    .beah-calendar-day-chip:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 1px;
    }

.beah-calendar-day-search {
    position: relative;
    padding: 10px 14px 0;
}

    .beah-calendar-day-search i {
        position: absolute;
        top: calc(50% + 5px);
        inset-inline-start: 25px;
        color: #64748B;
        font-size: 12px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .beah-calendar-day-search .form-control {
        height: 32px;
        padding-inline-start: 30px;
        font-size: 12.5px;
    }

.beah-calendar-day-list {
    flex: 1;
    min-height: 0;
    padding: 8px 6px 8px;
    overflow-y: auto;
}

.beah-calendar-day-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #0F172A;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .beah-calendar-day-item + .beah-calendar-day-item {
        margin-top: 2px;
    }

    .beah-calendar-day-item:hover {
        background: #F1F5F9;
    }

    .beah-calendar-day-item:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: -2px;
    }

    .beah-calendar-day-item.is-static {
        cursor: default;
    }

    .beah-calendar-day-item .beah-calendar-dot {
        flex: none;
        margin: 0;
    }

.beah-calendar-day-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.beah-calendar-day-name,
.beah-calendar-day-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-calendar-day-name {
    font-size: 12.5px;
    font-weight: 600;
}

.beah-calendar-day-detail {
    color: #475569;
    font-size: 11.5px;
}

.beah-calendar-day-item > .beah-fleet-badge {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

/* Each row's status is the same coloured pill the list and the chips use. */
.beah-calendar-day-status {
    flex: none;
}

    /* Planned - not offered yet - is an outline, as its chip is. */
    .beah-calendar-day-status.is-planned {
        border: 1px dashed #7DD3FC;
        background: #fff;
        color: #0369A1;
    }

.beah-calendar-day-go {
    flex: none;
    color: #94A3B8;
}

[dir="rtl"] .beah-calendar-day-go {
    transform: scaleX(-1);
}

.beah-calendar-day-empty {
    padding: 18px 8px;
    color: #64748B;
    font-size: 12.5px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .beah-calendar-gauge-fill {
        transition: none;
    }

    .beah-calendar-tip {
        animation: none;
    }

    .beah-plan-sessions {
        animation: none;
    }
}

@media (max-width: 767px) {
    .beah-calendar-estimate {
        margin-inline-start: 0;
    }
}

/* ---------- Planner workspace -----------------------------------
   The planner chooses collection days; the calendar says what those days
   already carry. Deciding with them in separate tabs is deciding blind, so
   on a wide screen they sit side by side and the calendar follows the
   scroll. Below that width they stack, calendar first. */

.beah-plan-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (min-width: 1280px) {
    .beah-plan-workspace {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    .beah-plan-aside {
        position: sticky;
        top: 12px;
    }
}

/* At a full desktop the month earns real width: 7 columns of ~70px read as a
   calendar, where ~45px reads as a grid of numbers. The planner column still
   clears 1100px, which the two-row split form fits comfortably. */
@media (min-width: 1600px) {
    .beah-plan-workspace {
        grid-template-columns: minmax(0, 1fr) 520px;
    }
}

.beah-plan-aside {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px;
}

.beah-plan-aside-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

    /* Only the subtitle, not the scope pill beside it: a bare `span` here
       outranks `.beah-plan-aside-scope` and was overriding its colour. */
    .beah-plan-aside-head > span:not(.beah-plan-aside-scope) {
        font-weight: 400;
        color: #64748B;
    }

/* Compact calendar: the month's shape, not its labels. */
.beah-calendar.is-compact .beah-calendar-cell {
    min-height: 46px;
    padding: 4px;
}

.beah-calendar.is-compact .beah-calendar-date {
    font-size: 11px;
    display: block;
}

.beah-calendar.is-compact .beah-calendar-load {
    display: block;
    font-size: 10px;
    font-weight: 700;
}

.beah-calendar.is-compact .beah-calendar-dow {
    padding: 5px 2px;
    font-size: 10.5px;
}

.beah-calendar.is-compact .beah-calendar-summary {
    font-size: 12px;
    padding: 8px 10px;
}

.beah-calendar.is-compact .beah-calendar-legend {
    display: none;
}

.beah-calendar.is-compact .beah-calendar-month {
    min-width: 108px;
    font-size: 13px;
}

@media (max-width: 767px) {
    .beah-calendar.is-compact .beah-calendar-grid {
        min-width: 0;
    }
}

@media (min-width: 1600px) {
    .beah-calendar.is-compact .beah-calendar-cell {
        min-height: 62px;
        padding: 5px 6px;
    }

    .beah-calendar.is-compact .beah-calendar-date {
        font-size: 12px;
    }

    .beah-calendar.is-compact .beah-calendar-load {
        font-size: 11.5px;
    }

    .beah-calendar.is-compact .beah-calendar-dow {
        font-size: 11.5px;
    }

    /* Room for the key once the panel is wide enough to carry it. */
    .beah-calendar.is-compact .beah-calendar-legend {
        display: flex;
        gap: 10px;
        font-size: 11px;
    }
}

/* What a weekday already carries, shown on the chip that picks it - the
   question "is Monday already full?" answered where it is asked. */
.beah-week-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 58px;
    height: 54px;
    line-height: 1.15;
}

.beah-week-load {
    font-size: 10px;
    font-weight: 600;
    color: #B45309;
}

.beah-week-day.is-on .beah-week-load {
    color: #DCFCE7;
}

.beah-week-day:disabled .beah-week-load {
    color: #64748B;
}

/* The docked month is filtered with the planner, so it says what it is
   showing rather than looking like the whole operation. */
.beah-plan-aside-scope {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #E8F5E9;
    color: #1B5E20;
    font-size: 11px;
    font-weight: 600;
}

/* --- Compliance Gate ------------------------------------------------------
   Urgency is the organising principle: every row speaks one vocabulary -
   expired, expires soon, valid, no date on file - in the same colours as the
   status pills, and ink density follows it. An expired row is tinted, an
   expiring one faintly, a valid one not at all, so a page of fifty documents
   shows where the work is before a word is read. No coloured edge stripes:
   the tint and the pill carry it. */

.beah-gate-verdict {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid #DCFCE7;
    border-radius: 10px;
    background: #F0FDF4;
}

    .beah-gate-verdict.is-warning {
        border-color: #FDE68A;
        background: #FFFBEB;
    }

    .beah-gate-verdict.is-danger {
        border-color: #FECACA;
        background: #FEF2F2;
    }

.beah-gate-verdict-mark {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #2E7D32;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beah-gate-verdict.is-warning .beah-gate-verdict-mark {
    background: #B45309;
}

.beah-gate-verdict.is-danger .beah-gate-verdict-mark {
    background: #B91C1C;
}

.beah-gate-verdict h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    text-wrap: balance;
}

.beah-gate-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: #475569;
}

.beah-gate-tally-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .beah-gate-tally-item::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #16A34A;
    }

    .beah-gate-tally-item.is-expired::before {
        background: #DC2626;
    }

    .beah-gate-tally-item.is-expiring::before {
        background: #D97706;
    }

    .beah-gate-tally-item.is-unknown::before {
        background: #94A3B8;
    }

    .beah-gate-tally-item b {
        color: #0F172A;
        font-variant-numeric: tabular-nums;
    }

.beah-gate-suspensions {
    margin: 6px 0 0;
    padding-inline-start: 18px;
}

/* Rows. The tint sits on the cells so it survives the table's own hover rule. */
.beah-gate-table td {
    vertical-align: middle;
}

.beah-gate-table tr.is-expired > td {
    background-color: #FEF2F2;
}

.beah-gate-table tr.is-expiring > td {
    background-color: #FFFBEB;
}

.beah-gate-col-status {
    width: 118px;
    white-space: nowrap;
}

.beah-gate-col-expiry {
    width: 170px;
    white-space: nowrap;
}

.beah-gate-col-action {
    width: 1%;
    white-space: nowrap;
    text-align: end;
}

.beah-gate-doc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .beah-gate-doc > i {
        flex: none;
        width: 16px;
        margin-top: 2px;
        color: #64748B;
        text-align: center;
    }

.beah-gate-sub {
    margin-top: 1px;
    font-size: 12px;
    color: #64748B;
    font-variant-numeric: tabular-nums;
}

/* On a tinted row the secondary text takes the row's hue rather than staying slate:
   slate on the expired tint measures 4.35:1, under AA. These hold 5.4:1. */
tr.is-expired .beah-gate-sub,
.beah-gate-cr-head.is-expired .beah-gate-label {
    color: #9B4D4D;
}

tr.is-expiring .beah-gate-sub,
.beah-gate-cr-head.is-expiring .beah-gate-label {
    color: #86601F;
}

.beah-gate-steps li.is-current .beah-gate-sub {
    color: #4D6B57;
}

/* The time left leads on an urgent row, in its own colour, and the date follows. */
.beah-gate-when {
    display: block;
    font-weight: 700;
    color: #0F172A;
}

tr.is-expired .beah-gate-when,
.beah-gate-cr-head.is-expired strong {
    color: #991B1B;
}

tr.is-expiring .beah-gate-when,
.beah-gate-cr-head.is-expiring strong {
    color: #92400E;
}

.beah-gate-empty {
    padding: 28px 16px 20px;
    text-align: center;
}

    .beah-gate-empty h4 {
        margin: 0 0 4px;
        font-weight: 700;
        color: #0F172A;
    }

    .beah-gate-empty p {
        margin: 0 auto 4px;
        max-width: 62ch;
        color: #64748B;
    }

    .beah-gate-empty .beah-gate-next {
        margin-top: 10px;
        font-size: 12.5px;
    }

/* ---- Commercial Registration tab ---- */

.beah-gate-cr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
}

    .beah-gate-cr-head.is-expired {
        border-color: #FECACA;
        background: #FEF2F2;
    }

    .beah-gate-cr-head.is-expiring {
        border-color: #FDE68A;
        background: #FFFBEB;
    }

    .beah-gate-cr-head > .btn {
        margin-inline-start: auto;
    }

.beah-gate-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #64748B;
}

.beah-gate-cr-number {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
}

.beah-gate-cr-expiry {
    font-size: 13px;
    color: #334155;
}

/* The renewal as its steps, because the order carries the rule: the CR, then the one signature. */
.beah-gate-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

    .beah-gate-steps li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        background: #fff;
        color: #0F172A;
    }

        .beah-gate-steps li.is-current {
            border-color: #2E7D32;
            background: #F0FDF4;
        }

        .beah-gate-steps li.is-upcoming {
            color: #64748B;
        }

.beah-gate-step-mark {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #E2E8F0;
    color: #475569;
}

.beah-gate-steps li.is-current .beah-gate-step-mark {
    background: #2E7D32;
    color: #fff;
}

.beah-gate-steps li.is-done .beah-gate-step-mark {
    background: #DCFCE7;
    color: #166534;
}

/* ---- Business activities, by facility ---- */

.beah-gate-group + .beah-gate-group {
    margin-top: 18px;
}

.beah-gate-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #0F172A;
}

    .beah-gate-group-head > i {
        color: #2E7D32;
    }

    .beah-gate-group-head .beah-gate-sub {
        margin: 0;
    }

/* ---- Renewal modals ---- */

.beah-gate-renewing {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
}

.beah-gate-renewing-now {
    text-align: end;
}

.beah-gate-lead {
    margin: 0 0 12px;
    max-width: 70ch;
    color: #334155;
}

.beah-gate-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0;
    max-width: 70ch;
}

.beah-gate-done {
    padding: 12px 0;
    text-align: center;
}

    .beah-gate-done h4 {
        margin: 0 0 6px;
        font-weight: 700;
    }

@media (max-width: 767px) {
    .beah-gate-verdict {
        align-items: flex-start;
    }

    /* A phone gets each row as a small card rather than a table to scroll sideways, which
       hid exactly the two things that matter there: when it runs out, and Renew. Status and
       the time left share the top line; everything else follows full width, the action last. */
    .beah-gate-table thead {
        display: none;
    }

    .beah-gate-table,
    .beah-gate-table tbody {
        display: block;
        width: 100%;
    }

        .beah-gate-table tr {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 6px 12px;
            padding: 12px;
            border-bottom: 1px solid #E2E8F0;
        }

            .beah-gate-table tr.is-expired {
                background: #FEF2F2;
            }

            .beah-gate-table tr.is-expiring {
                background: #FFFBEB;
            }

            .beah-gate-table tr > td {
                grid-column: 1 / -1;
                width: auto;
                padding: 0;
                border: 0;
                background: transparent !important;
                white-space: normal;
                text-align: start;
            }

                .beah-gate-table tr > td.beah-gate-col-status {
                    grid-area: 1 / 1;
                }

                .beah-gate-table tr > td.beah-gate-col-expiry {
                    grid-area: 1 / 2;
                    text-align: end;
                }

                .beah-gate-table tr > td.beah-gate-col-action .btn {
                    width: 100%;
                    margin-top: 4px;
                }

                .beah-gate-table tr > td.beah-gate-col-action:empty {
                    display: none;
                }

        .beah-gate-table td[data-label]::before {
            content: attr(data-label) ": ";
            color: #64748B;
            font-size: 12px;
        }

    .beah-gate-cr-head > .btn {
        margin-inline-start: 0;
        width: 100%;
    }

    .beah-gate-renewing {
        flex-direction: column;
    }

    .beah-gate-renewing-now {
        text-align: start;
    }
}

/* ---- Compliance Gate: renewals with be'ah ----
   A renewal is approved before anything moves, as onboarding is. An item be'ah already has
   is handled, so it drops its urgency tint and says where it is instead; one sent back
   carries be'ah's reason under the document it names. */

.beah-gate-verdict.is-info {
    border-color: #BFDBFE;
    background: #EFF6FF;
}

    .beah-gate-verdict.is-info .beah-gate-verdict-mark {
        background: #1D4ED8;
    }

.beah-gate-tally-item.is-awaiting::before {
    background: #2563EB;
}

.beah-gate-awaiting {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

    .beah-gate-awaiting .beah-pill i {
        margin-inline-end: 4px;
    }

.beah-gate-returned {
    margin-top: 3px;
    font-size: 12px;
    color: #991B1B;
}

    .beah-gate-returned i {
        margin-inline-end: 4px;
    }

.beah-gate-terms {
    margin: 16px 0 12px;
}

.beah-gate-terms-list {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

    .beah-gate-terms-list li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 12px;
        padding: 8px 12px;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        color: #0F172A;
    }

        .beah-gate-terms-list li + li {
            margin-top: 6px;
        }

        .beah-gate-terms-list li a {
            white-space: nowrap;
        }

.beah-gate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.beah-renewal-signature {
    display: block;
    max-width: 100%;
    max-height: 120px;
    padding: 6px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 767px) {
    .beah-gate-awaiting {
        align-items: stretch;
        width: 100%;
    }

    .beah-gate-actions .btn {
        flex: 1 1 auto;
    }
}

/* ---- Compliance Gate: renewing several at once ----
   Rows tick, the ticks gather in one bar, and one dialog takes a file and a date for each,
   every set of terms, and a single signature. The bar sticks while a long register scrolls,
   since the button that acts on the ticks should not scroll away from them. */

.beah-gate-col-check {
    width: 36px;
    text-align: center;
}

    .beah-gate-col-check input {
        vertical-align: middle;
    }

.beah-gate-table tr.is-selected > td {
    background-color: #F0FDF4;
}

.beah-gate-selection {
    position: sticky;
    top: 8px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    background: #F0FDF4;
    color: #14532D;
}

    .beah-gate-selection > .btn-primary {
        margin-inline-start: auto;
    }

.beah-gate-terms-list .beah-inline-check {
    margin: 0;
}

.beah-gate-terms-list li.is-accepted {
    border-color: #BBF7D0;
    background: #F0FDF4;
}

.beah-renew-same {
    margin-bottom: 12px;
}

    .beah-renew-same label {
        display: block;
        font-weight: 600;
    }

.beah-renew-same-row {
    display: flex;
    gap: 8px;
    max-width: 380px;
}

    /* The button keeps its words on one line; the date gives way instead. */
    .beah-renew-same-row .btn {
        flex: none;
        white-space: nowrap;
    }

/* A group of documents renewed together: the CR, one waste type's licences, the fleet. */
.beah-renew-group + .beah-renew-group {
    margin-top: 18px;
}

.beah-renew-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #0F172A;
}

    .beah-renew-group-head > i {
        color: #475569;
    }

.beah-renew-group-kind {
    font-size: 12px;
    color: #475569;
}

/* The CR activities a waste type's licence covers, named once above its facilities' rows. */
.beah-renew-covers {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F8FAFC;
    font-size: 12.5px;
    color: #475569;
}

    .beah-renew-covers ul {
        margin: 4px 0 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .beah-renew-covers li {
        display: flex;
        align-items: baseline;
        gap: 8px;
        color: #0F172A;
    }

    .beah-renew-covers code {
        flex: none;
    }

.beah-renew-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.beah-renew-doc {
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
}

    .beah-renew-doc + .beah-renew-doc {
        margin-top: 10px;
    }

.beah-renew-doc-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .beah-renew-doc-head > i {
        flex: none;
        width: 16px;
        margin-top: 3px;
        color: #64748B;
        text-align: center;
    }

.beah-renew-doc-index {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E2E8F0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.beah-renew-doc-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #0F172A;
}

.beah-renew-doc-now {
    flex: none;
    text-align: end;
}

.beah-renew-doc-fields {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 0 12px;
    margin-top: 10px;
}

    .beah-renew-doc-fields .form-group {
        margin-bottom: 0;
    }

.beah-renew-progress {
    margin-inline-end: auto;
    align-self: center;
    font-variant-numeric: tabular-nums;
}

.beah-renew-check {
    width: 36px;
    text-align: center;
}

.beah-renew-refs code {
    display: inline-block;
    margin: 2px 4px;
}

.beah-renewal-terms {
    display: block;
    color: #0F172A;
}

    .beah-renewal-terms i {
        margin-inline-end: 4px;
        color: #2E7D32;
    }

@media (max-width: 767px) {
    /* The tick joins the status and time left on a card's first line. */
    .beah-gate-table tr {
        grid-template-columns: auto 1fr auto;
        column-gap: 0;
    }

        .beah-gate-table tr > td.beah-gate-col-check {
            grid-area: 1 / 1;
            width: auto;
            margin-inline-end: 10px;
        }

            .beah-gate-table tr > td.beah-gate-col-check:empty {
                display: none;
            }

        .beah-gate-table tr > td.beah-gate-col-status {
            grid-area: 1 / 2;
        }

        .beah-gate-table tr > td.beah-gate-col-expiry {
            grid-area: 1 / 3;
            padding-inline-start: 12px;
        }

    .beah-gate-selection > .btn-primary {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .beah-renew-doc-head {
        flex-wrap: wrap;
    }

    .beah-renew-doc-now {
        width: 100%;
        padding-inline-start: 32px;
        text-align: start;
    }

    .beah-renew-doc-fields {
        grid-template-columns: 1fr;
    }

        .beah-renew-doc-fields .form-group + .form-group {
            margin-top: 8px;
        }
}

/* A seeded role's permissions are shown but fixed: the tree still expands and scrolls, but
   its checkboxes take no clicks. The seeder would undo any change at the next startup. */
.beah-permission-locked .tree-checkbox {
    pointer-events: none;
    opacity: .55;
}

/* --- be'ah's company detail: a waste generator's facilities, a card each, one open at a time ---
   The header is the button that opens it: the number in the order the company registered them,
   the name with its code, type and place, the status, and a caret that turns when open. */
.beah-facility-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beah-facility-card {
    border: 1px solid var(--beah-border);
    border-radius: 8px;
    background: var(--beah-surface);
    overflow: hidden;
}

    .beah-facility-card.is-open {
        border-color: var(--beah-border-green);
    }

.beah-facility-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
}

    .beah-facility-card-head:hover {
        background: var(--beah-green-wash);
    }

    .beah-facility-card.is-open > .beah-facility-card-head {
        background: var(--beah-green-pale);
        border-bottom: 1px solid var(--beah-border-green);
    }

.beah-facility-card-index {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--beah-green-pale);
    color: var(--beah-green);
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

    .beah-facility-card.is-open .beah-facility-card-index {
        background: #fff;
    }

.beah-facility-card-title {
    flex: 1;
    min-width: 0;
}

    .beah-facility-card-title strong {
        display: block;
        font-size: 13.5px;
    }

    .beah-facility-card-title > span {
        font-size: 12px;
        color: var(--beah-muted);
    }

.beah-facility-card-caret {
    flex-shrink: 0;
    color: var(--beah-muted);
    transition: transform .15s;
}

    .beah-facility-card.is-open .beah-facility-card-caret {
        transform: rotate(180deg);
    }

@media (prefers-reduced-motion: reduce) {
    .beah-facility-card-caret {
        transition: none;
    }
}

.beah-facility-card-body {
    padding: 12px 14px 4px;
}

/* be'ah's edit actions for the facility a card holds, at the top of its body - the head is itself the
   button that opens the card, so nothing can sit inside it. */
.beah-facility-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}

/* A file on a detail row: its name, then view and download - no picker, since nothing is edited here. */
.beah-doc-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.beah-doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-doc-actions {
    display: inline-flex;
}

/* A licence file's own expiry date, read beside or beneath its name. */
.beah-doc-expiry {
    font-size: 12px;
    font-weight: 400;
    color: var(--beah-muted);
    white-space: nowrap;
}

    .beah-doc-expiry.is-expired {
        color: var(--beah-red);
    }

    .beah-doc-expiry.is-changed {
        color: var(--beah-text);
        font-weight: 600;
    }

/* A file on a two-column detail row takes two lines: the label, then the file name across the
   row's full width with view and download at its far end. Squeezed beside the label in a half-width
   column, a name was cut after a few characters. The name wraps rather than cuts, so it is read whole. */
.beah-profile-row.beah-doc-row {
    flex-wrap: wrap;
    row-gap: 4px;
}

    .beah-doc-row > .beah-profile-label,
    .beah-doc-row > .beah-profile-value {
        flex: 1 1 100%;
    }

    .beah-doc-row > .beah-doc-value {
        justify-content: space-between;
        text-align: start;
    }

    .beah-doc-row .beah-doc-name {
        flex: 1 1 auto;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .beah-doc-row .beah-doc-actions {
        flex-shrink: 0;
    }

/* Says at a glance that the value is a file, and what kind: red for a PDF, as the onboarding wizard
   shows one, muted for anything else. */
.beah-doc-icon {
    margin-inline-end: 6px;
    color: var(--beah-muted);
}

    .beah-doc-icon.fa-file-pdf-o {
        color: #C62828;
    }

/* A file name in a table cell, its icon kept beside the first line when a long name wraps. */
.beah-doc-file {
    display: inline-flex;
    align-items: baseline;
}

    .beah-doc-file > span {
        overflow-wrap: anywhere;
    }

/* The caption over a photo shown in a detail view: the label's own muted type, set as a line of its own. */
.beah-photo-caption {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--beah-muted);
}

/* --- be'ah's comments on an application it sends back to correct ---
   A comment sits under the part of the review it is about, amber as every "waiting on the applicant"
   state is, naming the fields to correct as chips. The form to add one is dashed: it is not a comment
   yet, and nothing is sent until the review sends them all together. */
.beah-review-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.beah-review-note-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    background: #FFFBEB;
    color: #78350F;
}

    .beah-review-note-item > i {
        margin-top: 3px;
        color: #B45309;
    }

.beah-review-note-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.beah-review-note-fields {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-inline-start: 6px;
    vertical-align: middle;
}

.beah-review-note-lines {
    margin: 4px 0 2px;
    padding: 0;
    list-style: none;
}

    .beah-review-note-lines > li + li {
        margin-top: 4px;
    }

    .beah-review-note-lines .beah-pill {
        margin-inline-end: 6px;
    }

/* One row per picked field: its name, what is wrong with it, and remove - which takes the row with it. */
.beah-review-note-fieldrows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.beah-review-note-fieldrow {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr auto;
    align-items: center;
    gap: 8px;
}

    .beah-review-note-fieldrow > label {
        margin: 0;
        font-weight: 700;
        color: #92400E;
    }

@media (max-width: 575px) {
    .beah-review-note-fieldrow {
        grid-template-columns: 1fr auto;
    }

        .beah-review-note-fieldrow > label {
            grid-column: 1 / -1;
        }
}

.beah-review-note-add {
    align-self: flex-start;
}

.beah-review-note-form {
    padding: 12px;
    border: 1px dashed #F59E0B;
    border-radius: 8px;
    background: var(--beah-surface);
}

.beah-review-note-head {
    margin-bottom: 8px;
    font-weight: 700;
}

    .beah-review-note-head > i {
        margin-inline-end: 6px;
        color: #B45309;
    }

.beah-review-note-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.beah-review-note-chip {
    padding: 3px 10px;
    border: 1px solid var(--beah-border);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

    .beah-review-note-chip > i {
        margin-inline-end: 5px;
        font-size: 10px;
    }

    .beah-review-note-chip.is-on {
        border-color: #F59E0B;
        background: #FEF3C7;
        color: #92400E;
    }

.beah-review-note-actions {
    display: flex;
    gap: 6px;
}

.beah-review-round + .beah-review-round {
    margin-top: 14px;
}

.beah-review-round-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Administration → Users' Roles tab: the roles an account may hold, one choice, in sections
   (portal/overrides.cshtml). Each role is a full-width row - the radio and its name centred on one line,
   the whole row clickable - and the chosen one is tinted, so the answer reads at a glance. */
.beah-role-list {
    margin: 0;
    padding: 4px 0 0;
}

.beah-role-list > li {
    list-style: none;
}

.beah-role-list .beah-role-group {
    margin: 20px 0 8px;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--beah-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--beah-text);
}

.beah-role-list .beah-role-group:first-child {
    margin-top: 0;
}

.beah-role-list .beah-role-group small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--beah-muted);
}

.beah-role-list label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 2px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 400;
    color: var(--beah-text);
    cursor: pointer;
}

.beah-role-list label:hover {
    background: var(--beah-green-wash);
}

.beah-role-list label:has(input:checked) {
    background: var(--beah-green-pale);
    border-color: var(--beah-border-green);
    font-weight: 600;
}

.beah-role-list input[type=radio] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--beah-green);
}

.beah-role-list label:has(input:disabled) {
    cursor: default;
}

/* A pin read back: the coordinates, then the way to see where they are. */
.beah-gps-value {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-variant-numeric: tabular-nums;
}

    .beah-gps-value a {
        white-space: nowrap;
    }

/* A GPS pin picked on a map (_shared/mapPicker). The frame holds the map and, over it, the
   loading or failed state; the hint sits under it rather than over the tiles. */
.beah-map-picker {
    margin-top: 0;
}

/* The search box, then Use My Location and View on Map, on one line and one height; on a narrow
   screen the buttons drop under the search. */
.beah-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
}

    .beah-map-toolbar > .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

/* isolation keeps Leaflet's own layers (z-index 400-1000) inside the frame, so nothing laid over the page sits under the map. */
.beah-map-frame {
    position: relative;
    isolation: isolate;
    height: 260px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #EEF2F5;
}

/* A pin in a change review: the read-only map under the GPS Location value, small enough to sit in its cell. */
.beah-review-map {
    margin-top: 8px;
    max-width: 380px;
}

    .beah-review-map .beah-map-frame {
        height: 180px;
    }

/* A point under review: the pin read across the window, under the details it belongs to. */
.beah-review-map.is-wide {
    max-width: none;
    margin-bottom: 16px;
}

    .beah-review-map.is-wide .beah-map-frame {
        height: 220px;
    }

.beah-map-canvas {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}

    .beah-map-canvas.leaflet-container {
        font: inherit;
        cursor: crosshair;
    }

    .beah-map-canvas .leaflet-control-attribution {
        font-size: 10px;
    }

.beah-map-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: #475569;
    text-align: center;
    background: rgba(238, 242, 245, .92);
    z-index: 500;
}

    .beah-map-state.is-failed {
        color: #92400E;
        background: #FFFBEB;
    }

/* Search sits above the map; its results drop over the tiles, above Leaflet's own controls. */
.beah-map-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}

.beah-map-results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 1100;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .14);
}

.beah-map-result {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #F1F5F9;
    background: none;
    text-align: start;
    color: #0F172A;
    cursor: pointer;
}

    .beah-map-result:last-child {
        border-bottom: 0;
    }

    .beah-map-result:hover,
    .beah-map-result:focus-visible {
        background: #EDF6EE;
    }

    .beah-map-result .fa {
        color: #2E7D32;
    }

    .beah-map-result span {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .beah-map-result small {
        color: #475569;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.beah-map-results-note {
    padding: 10px 12px;
    font-size: 12px;
    color: #475569;
}

    .beah-map-results-note.is-failed {
        color: #92400E;
        background: #FFFBEB;
    }

.beah-map-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #475569;
}

/* The drawn pin: no box of its own, and a soft shadow so it reads above any tile. */
.beah-map-pin {
    background: none;
    border: 0;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .35));
}

@media (max-width: 767px) {
    .beah-map-frame {
        height: 220px;
    }
}

/* Deposit transaction log (_shared/depositLedger): money into the deposit reads green, a refund out of it red-brown,
   both darker than the pill hues so the figures keep 4.5:1 on white. */
.beah-deposit-ledger .beah-ledger-in {
    color: #1E6B34;
}

.beah-deposit-ledger .beah-ledger-out {
    color: #9A3412;
}

/* The adjustment form's penalty card (financeAdmin/adjustmentModal): a charge, so its icon reads red. */
.beah-mode-card-title .fa.beah-type-charge {
    color: #B91C1C;
}

/* A deposit ledger row still waiting - on be'ah's review or on the company paying a top-up invoice - is tinted amber at full
   contrast; a rejected one reads in grey. Neither is faded: an opacity drop also dimmed the Review button on the row. */
.beah-deposit-ledger tr.is-waiting > td {
    background: #FFFBEB;
}

.beah-deposit-ledger tr.is-rejected > td,
.beah-deposit-ledger tr.is-rejected > td strong {
    color: #64748B;
}

.beah-deposit-views {
    margin-inline-start: 8px;
}

/* The deposit ledger's Record Refund form, below the transactions: set off from the log above it, its buttons clear of
   the last field. */
.beah-refund-form {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

.beah-refund-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.beah-refund-summary {
    margin: 4px 0 0;
}

/* The deposit ledger's columns are fixed, so two companies' logs line up whatever their references hold; below the
   table's minimum width the house horizontal scroll takes over. A gateway reference has no spaces, so it may break anywhere. */
.beah-deposit-ledger {
    table-layout: fixed;
    width: 100%;
    min-width: 960px;
}

    .beah-deposit-ledger .beah-ledger-col-date { width: 15%; }
    .beah-deposit-ledger .beah-ledger-col-type { width: 15%; }
    .beah-deposit-ledger .beah-ledger-col-ref { width: 19%; }
    .beah-deposit-ledger .beah-ledger-col-status { width: 12%; }
    .beah-deposit-ledger .beah-ledger-col-amount { width: 12%; }
    .beah-deposit-ledger .beah-ledger-col-balance { width: 13%; }
    .beah-deposit-ledger .beah-ledger-col-actions { width: 14%; }

    .beah-deposit-ledger td {
        overflow-wrap: anywhere;
    }

/* ---- Pricing Index (views/beah-admin/pricingIndex, _shared/priceInsight, _shared/priceIndexBanner) -----------------
   A change always reads as a sign, an arrow and a number - green and up for a rise, red and down for a drop - so its
   direction never rests on colour alone. */
.beah-price-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .beah-price-change i {
        font-size: 11px;
    }

    .beah-price-change.is-up {
        color: #1E6B34;
    }

    .beah-price-change.is-down {
        color: #B42318;
    }

    .beah-price-change.is-flat {
        color: #64748B;
    }

/* The history's Change column takes the same colours, its arrow included. */
td.beah-price-change-cell {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    td.beah-price-change-cell.is-up {
        color: #1E6B34;
    }

    td.beah-price-change-cell.is-down {
        color: #B42318;
    }

    td.beah-price-change-cell .beah-table-icon {
        color: inherit;
        font-size: 11px;
    }

/* The page: the waste types in a column on the left, the picked one's trend on the right, the history below both.
   The list scrolls inside the height the chart sets, so a growing catalogue never lengthens the row. */
.beah-price-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

    .beah-price-workspace > .beah-page-section {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

        .beah-price-workspace > .beah-page-section > .beah-section-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            min-height: 0;
        }

.beah-price-search {
    position: relative;
    margin-bottom: 10px;
}

    .beah-price-search i {
        position: absolute;
        top: 50%;
        inset-inline-start: 11px;
        color: #64748B;
        font-size: 13px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .beah-price-search .form-control {
        padding-inline-start: 32px;
    }

.beah-price-list-frame {
    position: relative;
    flex: 1;
    min-height: 260px;
}

.beah-price-list {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-inline-end: -6px;
    padding-inline-end: 6px;
    overflow-y: auto;
}

.beah-price-row {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    color: #0F172A;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .beah-price-row:hover {
        border-color: #A7C4AE;
        background: #FAFCFA;
    }

    .beah-price-row.is-selected {
        border-color: #2E7D32;
        background: #F3FAF4;
        box-shadow: inset 0 0 0 1px #2E7D32;
    }

    .beah-price-row:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 2px;
    }

.beah-price-row-main,
.beah-price-row-figures {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.beah-price-row-figures {
    flex: none;
    align-items: flex-end;
}

.beah-price-row-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-price-row-date {
    color: #64748B;
    font-size: 12px;
}

.beah-price-row-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

    .beah-price-row-value small {
        color: #64748B;
        font-size: 11px;
        font-weight: 600;
    }

.beah-price-row.is-empty .beah-price-row-name {
    color: #475569;
}

/* The period at a glance, above the chart. */
.beah-price-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 8px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

    .beah-price-stats > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: 9px 14px;
    }

        .beah-price-stats > div + div {
            border-inline-start: 1px solid #E2E8F0;
        }

    .beah-price-stats span {
        color: #64748B;
        font-size: 12px;
    }

    .beah-price-stats strong {
        color: #0F172A;
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }

        .beah-price-stats strong small {
            color: #64748B;
            font-size: 11px;
            font-weight: 600;
        }

        .beah-price-stats strong.beah-price-change.is-up {
            color: #1E6B34;
        }

        .beah-price-stats strong.beah-price-change.is-down {
            color: #B42318;
        }

        .beah-price-stats strong.beah-price-change.is-flat {
            color: #64748B;
        }

/* The trend: drawn at the box's measured width, one 2px line over a faint wash on a recessive hairline grid, a
   crosshair and a dot on the price nearest the pointer. */
.beah-price-chart {
    position: relative;
    flex: 1;
    min-height: 300px;
}

    /* With nothing to draw, the message sits in the middle of the chart's space, not at its top. */
    .beah-price-chart > .beah-profile-empty {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 16px;
        text-align: center;
    }

    .beah-price-chart svg {
        display: block;
        max-width: 100%;
        overflow: visible;
    }

.beah-price-grid-lines line {
    stroke: #E2E8F0;
    stroke-width: 1;
}

.beah-price-axis text {
    fill: #64748B;
    font-size: 12px;
}

.beah-price-axis-omr path {
    fill: #64748B;
}

.beah-price-area {
    fill: #2E7D32;
    fill-opacity: .07;
}

.beah-price-line {
    fill: none;
    stroke: #2E7D32;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.beah-price-dot {
    fill: #2E7D32;
    stroke: #fff;
    stroke-width: 2;
}

.beah-price-crosshair {
    stroke: #94A3B8;
    stroke-width: 1;
}

.beah-price-hit {
    fill: transparent;
    cursor: crosshair;
}

/* The house dark tooltip card, beside the hovered price and flipped to its left near the right edge. */
.beah-price-tip {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 11px;
    border-radius: 9px;
    background: #14261B;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(20, 38, 27, .3);
    pointer-events: none;
    transform: translate(12px, -50%);
}

    .beah-price-tip.is-flipped {
        transform: translate(calc(-100% - 12px), -50%);
    }

    .beah-price-tip span {
        color: #CBD5E1;
    }

/* On the dark cards a change takes lighter tones, which hold 4.5:1 against them. */
.beah-price-tip .beah-price-change.is-up,
.beah-price-insight-change.is-up {
    color: #86EFAC;
}

.beah-price-tip .beah-price-change.is-down,
.beah-price-insight-change.is-down {
    color: #FCA5A5;
}

.beah-price-tip .beah-price-change.is-flat,
.beah-price-insight-change.is-flat {
    color: #CBD5E1;
}

/* A waste type's hover card: its latest price and change, its last 30 days as a small line coloured by where they
   went, and their high, low and average. Fixed to the window on <body>, so no scrolling list or modal clips it. */
.beah-price-insight {
    position: fixed;
    z-index: 2100;
    padding: 12px 14px;
    border-radius: 10px;
    background: #14261B;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(20, 38, 27, .32);
    pointer-events: none;
}

.beah-price-insight-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: #CBD5E1;
}

.beah-price-insight-name {
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-price-insight-price {
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

    .beah-price-insight-price strong {
        font-size: 20px;
    }

    .beah-price-insight-price small {
        margin-inline-start: 3px;
        color: #CBD5E1;
        font-size: 12px;
    }

.beah-price-insight-change {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}

.beah-price-insight-spark {
    display: block;
    margin-top: 10px;
}

.beah-price-insight-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.beah-price-insight-area {
    stroke: none;
}

/* The small line's colour follows its direction - light tones on the dark card, the page's own on a light surface. */
.beah-price-insight .is-up .beah-price-insight-line { stroke: #86EFAC; }
.beah-price-insight .is-up .beah-price-insight-area { fill: rgba(134, 239, 172, .14); }
.beah-price-insight .is-up .beah-price-insight-dot { fill: #86EFAC; }
.beah-price-insight .is-down .beah-price-insight-line { stroke: #FCA5A5; }
.beah-price-insight .is-down .beah-price-insight-area { fill: rgba(252, 165, 165, .14); }
.beah-price-insight .is-down .beah-price-insight-dot { fill: #FCA5A5; }
.beah-price-insight .is-flat .beah-price-insight-line { stroke: #CBD5E1; }
.beah-price-insight .is-flat .beah-price-insight-area { fill: rgba(203, 213, 225, .12); }
.beah-price-insight .is-flat .beah-price-insight-dot { fill: #CBD5E1; }

.beah-price-current-spark.is-up .beah-price-insight-line { stroke: #1E6B34; }
.beah-price-current-spark.is-up .beah-price-insight-dot { fill: #1E6B34; }
.beah-price-current-spark.is-down .beah-price-insight-line { stroke: #B42318; }
.beah-price-current-spark.is-down .beah-price-insight-dot { fill: #B42318; }
.beah-price-current-spark.is-flat .beah-price-insight-line { stroke: #64748B; }
.beah-price-current-spark.is-flat .beah-price-insight-dot { fill: #64748B; }

.beah-price-insight-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    color: #CBD5E1;
    font-size: 11px;
}

.beah-price-insight-note {
    margin-top: 8px;
    color: #CBD5E1;
}

.beah-price-insight-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

    .beah-price-insight-stats dt {
        color: #CBD5E1;
        font-size: 11px;
        font-weight: 400;
    }

    .beah-price-insight-stats dd {
        margin: 0;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.beah-price-insight-foot {
    margin-top: 8px;
    color: #CBD5E1;
}

/* An auction's pricing index banner - the New Auction form and the buyers' bid window. */
.beah-price-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #CFE0D2;
    border-radius: 8px;
    background: #F3FAF4;
}

.beah-price-banner-icon {
    flex: none;
    color: #2E7D32;
    font-size: 16px;
}

/* The (?) beside the label: the house icon, with the 24px target a pointer needs. */
.beah-price-banner-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin-block: -6px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

    .beah-price-banner-info:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 1px;
        border-radius: 50%;
    }

.beah-price-banner-body {
    flex: 1;
    min-width: 0;
}

.beah-price-banner-label {
    display: flex;
    align-items: center;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.beah-price-banner-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.beah-price-banner-value {
    color: #0F172A;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

    .beah-price-banner-value small {
        color: #475569;
        font-size: 12px;
    }

.beah-price-banner-date,
.beah-price-banner-lot {
    color: #475569;
    font-size: 12px;
}

/* The Record Price form's card: the price in force now, and how the one being typed compares with it. */
.beah-price-current {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
}

.beah-price-current-label {
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.beah-price-current-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.beah-price-current-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    min-width: 0;
}

    .beah-price-current-main strong {
        color: #0F172A;
        font-size: 18px;
        font-variant-numeric: tabular-nums;
    }

        .beah-price-current-main strong small {
            color: #475569;
            font-size: 12px;
        }

.beah-price-current-spark {
    display: block;
    flex: none;
    overflow: visible;
}

.beah-price-current-meta,
.beah-price-current-none {
    margin-top: 4px;
    color: #475569;
    font-size: 12px;
}

.beah-price-current-new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #E2E8F0;
    color: #475569;
    font-size: 12px;
}

    .beah-price-current-new strong {
        color: #0F172A;
        font-variant-numeric: tabular-nums;
    }

@media (max-width: 1099px) {
    .beah-price-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .beah-price-list-frame {
        flex: none;
        height: 320px;
    }
}

@media (max-width: 767px) {
    .beah-price-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .beah-price-stats > div:nth-child(3) {
            border-inline-start: 0;
        }

        .beah-price-stats > div:nth-child(n + 3) {
            border-top: 1px solid #E2E8F0;
        }

    .beah-price-banner {
        flex-wrap: wrap;
    }
}

/* Process Refunds: the refunds owed as a list to tick - the tick column narrow, a ticked row tinted - with the transfer
   date and note for all of them below it. */
.beah-refund-list .beah-select-col { width: 40px; text-align: center; }
.beah-refund-list tbody tr { cursor: pointer; }
.beah-refund-list tbody tr.is-selected { background: #F2F8F3; }
.beah-refund-list-details { margin-top: 16px; }
.beah-refund-list-total { margin-bottom: 0; }

/* Raise Again: the expired request's attachments carried over, each removable, and when bidding will close. */
.beah-kept-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.beah-kept-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid #D7E3DA; border-radius: 999px; background: #F4F8F5; font-size: 12px; color: #334155; }
.beah-kept-file > i { color: #2E7D32; }
.beah-kept-remove { border: 0; background: transparent; width: 24px; height: 24px; border-radius: 50%; color: #64748B; font-size: 16px; line-height: 1; cursor: pointer; }
.beah-kept-remove:hover, .beah-kept-remove:focus-visible { background: #E2E8F0; color: #B91C1C; }
.beah-bidding-closes { display: block; margin-top: 4px; color: #2E7D32; font-weight: 600; }

/* ---------- The be'ah facility switcher (topbar) ----------
   Which facility an admin account is working at. The label is what the facility-bound pages show, so it is
   always visible; on a phone it narrows rather than disappearing. See _shim/facilityScope.js. */
.beah-facility-switch > .beah-tb-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    max-width: 280px;
    font-weight: 600;
}

    .beah-facility-switch > .beah-tb-chip::after {
        display: none;
    }

    .beah-facility-switch > .beah-tb-chip.is-unassigned {
        background: #FEF3C7 !important;
        border-color: #FCD34D !important;
        color: #92400E !important;
    }

.beah-facility-switch-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-facility-menu {
    min-width: 260px;
    max-width: min(340px, calc(100vw - 24px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px 0;
    border: 1px solid var(--beah-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}

.beah-facility-menu-head {
    padding: 8px 16px 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
}

.beah-facility-menu-empty {
    padding: 4px 16px 10px;
    font-size: 12.5px;
    color: #92400E;
    white-space: normal;
}

.beah-facility-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 13px;
    color: #0F172A;
    white-space: normal;
}

    .beah-facility-menu .dropdown-item i {
        flex: none;
        width: 14px;
        color: var(--beah-green-light);
        visibility: hidden;
    }

    .beah-facility-menu .dropdown-item:hover,
    .beah-facility-menu .dropdown-item:focus {
        background: var(--beah-green-wash);
    }

    .beah-facility-menu .dropdown-item.is-current {
        font-weight: 700;
        color: var(--beah-green);
    }

        .beah-facility-menu .dropdown-item.is-current i {
            visibility: visible;
        }

/* The bell's menu: the facility switcher's card (border, radius, shadow), wide enough to read a notice whole. PortalLight
   moves an open dropdown to <body>, so every rule here is written against the menu itself, never the header around it,
   and _shim/dropdownAlign.js lines it up under the bell's far edge. */
.dropdown-menu.beah-notify-menu {
    width: 400px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--beah-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}

.beah-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--beah-border);
}

.beah-notify-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

.dropdown-menu.beah-notify-menu .beah-notify-mark {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--beah-green-light);
    white-space: nowrap;
}

    .dropdown-menu.beah-notify-menu .beah-notify-mark:hover,
    .dropdown-menu.beah-notify-menu .beah-notify-mark:focus-visible {
        color: var(--beah-green-light);
        text-decoration: underline;
    }

.beah-notify-list {
    max-height: min(420px, 60vh);
    overflow-y: auto;
}

.beah-notify-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    font-size: 13px;
    color: #64748B;
}

    .beah-notify-empty i {
        font-size: 22px;
        color: #94A3B8;
    }

.beah-notify-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    color: #0F172A;
    text-decoration: none;
    white-space: normal;
}

    .beah-notify-item:last-child {
        border-bottom: 0;
    }

    .beah-notify-item:hover,
    .beah-notify-item:focus-visible {
        background: var(--beah-green-wash);
        color: #0F172A;
        text-decoration: none;
    }

    .beah-notify-item.is-unread {
        background: #F7FBF7;
    }

.beah-notify-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px;
    background: #E8F1FB;
    color: #1D5FA8;
}

    .beah-notify-icon.is-success {
        background: #EAF5EC;
        color: #2E7D32;
    }

    .beah-notify-icon.is-warning {
        background: #FFF3DF;
        color: #9A5B00;
    }

    .beah-notify-icon.is-danger {
        background: #FDECEA;
        color: #B3261E;
    }

.beah-notify-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.beah-notify-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.beah-notify-item:not(.is-unread) .beah-notify-title {
    font-weight: 500;
}

.beah-notify-message {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
    overflow-wrap: anywhere;
}

.beah-notify-time {
    margin-top: 2px;
    font-size: 11.5px;
    color: #64748B;
}

.beah-notify-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--beah-green-light);
}

.beah-notify-foot {
    border-top: 1px solid var(--beah-border);
    text-align: center;
}

    .dropdown-menu.beah-notify-menu .beah-notify-foot a {
        display: block;
        padding: 10px 16px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--beah-green-light);
    }

        .dropdown-menu.beah-notify-menu .beah-notify-foot a:hover,
        .dropdown-menu.beah-notify-menu .beah-notify-foot a:focus-visible {
            background: var(--beah-green-wash);
            text-decoration: none;
        }

/* While the menu still sits in the header the theme paints every link, span and icon in it with the body text colour,
   !important (beah-green.css), which would flatten the links, the greys and the coloured icons above - so they are
   restated at a higher specificity, !important as the theme's are. */
.dropdown-menu.beah-notify-menu .beah-notify-mark,
.dropdown-menu.beah-notify-menu .beah-notify-mark i,
.dropdown-menu.beah-notify-menu .beah-notify-foot a {
    color: var(--beah-green-light) !important;
}

.dropdown-menu.beah-notify-menu .beah-pill-success {
    color: #166534 !important;
}

.dropdown-menu.beah-notify-menu .beah-notify-message {
    color: #475569 !important;
}

.dropdown-menu.beah-notify-menu .beah-notify-time,
.dropdown-menu.beah-notify-menu .beah-notify-empty span {
    color: #64748B !important;
}

.dropdown-menu.beah-notify-menu .beah-notify-empty i {
    color: #94A3B8 !important;
}

.dropdown-menu.beah-notify-menu .beah-notify-icon,
.dropdown-menu.beah-notify-menu .beah-notify-icon i {
    color: #1D5FA8 !important;
}

.dropdown-menu.beah-notify-menu .beah-notify-icon.is-success,
.dropdown-menu.beah-notify-menu .beah-notify-icon.is-success i {
    color: #2E7D32 !important;
}

.dropdown-menu.beah-notify-menu .beah-notify-icon.is-warning,
.dropdown-menu.beah-notify-menu .beah-notify-icon.is-warning i {
    color: #9A5B00 !important;
}

.dropdown-menu.beah-notify-menu .beah-notify-icon.is-danger,
.dropdown-menu.beah-notify-menu .beah-notify-icon.is-danger i {
    color: #B3261E !important;
}

/* All Notifications (_shared/notificationsModal): the bell's rows on a page of their own - a search, All / Unread and
   Mark All as Read above, the message whole, when it came on the right, and the house pager below. */
.beah-notify-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 12px;
}

.beah-notify-search {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
}

.beah-notify-toolbar .beah-view-toggle + .btn {
    margin-inline-start: 0;
}

.beah-notify-count {
    display: inline-block;
    min-width: 18px;
    margin-inline-start: 4px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(15, 23, 42, .07);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.beah-notify-markall {
    margin-inline-start: auto;
}

.beah-notify-page {
    min-height: 140px;
    overflow: hidden;
    border: 1px solid var(--beah-border);
    border-radius: 10px;
}

    .beah-notify-page .beah-notify-item {
        width: 100%;
        border: 0;
        border-bottom: 1px solid #F1F5F9;
        background: #fff;
        font: inherit;
        text-align: start;
        cursor: pointer;
    }

        .beah-notify-page .beah-notify-item.is-unread {
            background: #F7FBF7;
        }

        .beah-notify-page .beah-notify-item:hover,
        .beah-notify-page .beah-notify-item:focus-visible {
            background: var(--beah-green-wash);
        }

        .beah-notify-page .beah-notify-item:not(.is-unread) {
            cursor: default;
        }

    .beah-notify-page .beah-notify-empty .btn {
        margin-top: 4px;
    }

.beah-notify-message.is-whole {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    white-space: pre-line;
}

.beah-notify-when {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 130px;
    text-align: end;
}

.beah-notify-ago {
    font-size: 12px;
    font-weight: 600;
    color: #0F172A;
}

.beah-notify-date {
    font-size: 11.5px;
    color: #64748B;
    white-space: nowrap;
}

.beah-notify-page + .beah-table-foot {
    margin-top: 12px;
}

@media (max-width: 575px) {
    .beah-notify-page .beah-notify-item {
        flex-wrap: wrap;
    }

    .beah-notify-when {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        width: 100%;
        min-width: 0;
        padding-inline-start: 42px;
        text-align: start;
    }

    .beah-notify-markall {
        margin-inline-start: 0;
    }
}

/* The framework's lists (Tabulator) draw their page size as an inline-block select, which the house select rule above
   turns into one whose caret wraps under the number - the "12" floating over its arrow. It is laid out as the house
   pager's page size is, the caption beside it. */
.tabulator .tabulator-footer .tabulator-paginator {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

    .tabulator .tabulator-footer .tabulator-paginator > label {
        margin: 0;
        margin-inline-end: 4px;
        font-size: 12px;
        font-weight: 500;
        color: #64748B;
    }

.tabulator .tabulator-footer select.tabulator-page-size,
.tabulator .tabulator-footer select.tabulator-page-size:not([multiple]):not([size]) {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    min-width: 64px;
    height: 28px;
    margin: 0;
    margin-inline-end: 12px;
    padding: 2px 8px;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px;
    background: #fff;
    color: #0F172A;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.beah-facility-bar {
    justify-content: flex-start;
    text-align: start;
}

@media (max-width: 767px) {
    .beah-facility-switch > .beah-tb-chip {
        max-width: 140px;
        padding: 6px 10px !important;
    }
}

/* On a phone the header's two fixed halves left the chips no room, and they spilled across the platform's name.
   There the name gives way to its menu icon, the chips keep their icons, and only the facility switcher keeps its
   words - it is the one chip whose state the icon cannot say. */
@media (max-width: 767px) {
    .navbar-static-top > .row > .col:first-child {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .navbar-static-top > .row > .col:last-child {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
    }

    .navbar-static-top .system-name {
        font-size: 0;
    }

        .navbar-static-top .system-name .fa-bars {
            font-size: 20px;
        }

    .navbar-top-links .beah-tb-chip > span:not(.beah-facility-switch-label),
    .navbar-top-links .navbar-language-label,
    .navbar-top-links .navbar-logout-label {
        display: none;
    }
}

/* ---------- A waste generator's kind in the onboarding review ----------
   Standard or Large, why, and be'ah's override. */
.beah-generator-kind {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--beah-border-green);
    border-radius: 8px;
    background: var(--beah-green-wash);
}

    .beah-generator-kind.is-large {
        border-color: #BFDBFE;
        background: #EFF6FF;
    }

.beah-generator-kind-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .beah-generator-kind-head > i {
        margin-top: 2px;
        font-size: 18px;
        color: var(--beah-green-light);
    }

    .beah-generator-kind.is-large .beah-generator-kind-head > i {
        color: #1D4ED8;
    }

    .beah-generator-kind-head strong,
    .beah-generator-kind-head small {
        display: block;
    }

    .beah-generator-kind-head strong {
        font-size: 13.5px;
        color: #0F172A;
    }

    .beah-generator-kind-head small {
        margin-top: 2px;
        font-size: 12.5px;
        color: #334155;
    }

.beah-generator-kind-actions {
    display: flex;
    gap: 8px;
}

/* What a waste generator is charged: Location -> Waste Type -> Amount (_shared/chargeSummary). Each location's total
   closes its rows on a hairline; the overall total is the strongest line. */
.beah-charge-summary .beah-charge-amount {
    width: 160px;
}

.beah-profile-table tr.beah-charge-subtotal > td {
    border-top: 1px solid var(--beah-border, #E2E8F0);
    color: #475569;
    font-weight: 600;
}

    .beah-profile-table tr.beah-charge-subtotal > td:first-child {
        padding-inline-start: 28px;
    }

.beah-profile-table tr.beah-charge-total > td {
    border-top: 2px solid #CBD5E1;
    font-weight: 700;
    color: #0F172A;
}

/* ---------- Incoming Collections (views/beah-admin/incomingCollections) ----------
   Laid out by facility, since capacity belongs to a facility: what needs a decision first, then one accordion section
   per facility with a row per waste type. Secondary text on a tint takes the tint's hue, never slate, so it keeps 4.5:1. */
.beah-incoming-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.beah-incoming-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.beah-incoming-range-text {
    min-width: 170px;
    padding: 0 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--beah-text);
}

    /* What a page spans - "This week and next", "3 months" - under its dates. */
    .beah-incoming-range-text small {
        display: block;
        color: #64748B;
        font-size: 11px;
        font-weight: 400;
    }

/* The Today button sits apart from the arrows: it jumps, they step. */
.beah-incoming-range .beah-incoming-range-text + .btn + .btn {
    margin-inline-start: 4px;
}

[dir="rtl"] .beah-incoming-range .fa-chevron-left,
[dir="rtl"] .beah-incoming-range .fa-chevron-right {
    transform: scaleX(-1);
}

/* The cards stand apart from one another. */
.beah-incoming-block {
    margin-top: 16px;
}

/* ---- Filters: the facility dropdown beside the waste type ---- */
.beah-incoming-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 24px;
}

    .beah-incoming-filters .beah-filter {
        margin: 0;
        min-width: 200px;
    }

    /* wide enough for a facility's name and how much needs attention there */
    .beah-incoming-filters .beah-filter:first-child {
        min-width: 280px;
    }

.beah-incoming-alert {
    margin: 16px 0 0;
}

.beah-incoming-ledger {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 16px 0 0;
    color: #475569;
    font-size: 13px;
}

    .beah-incoming-ledger > span {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
    }

    .beah-incoming-ledger strong {
        color: var(--beah-text);
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }

.beah-incoming-dot {
    color: #94A3B8;
}

.beah-incoming-muted {
    color: #475569;
}

/* ---- Card titles: Needs Attention and the facilities ---- */
.beah-incoming-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--beah-text);
}

    .beah-incoming-block-title > i {
        color: var(--beah-green);
    }

/* An attention row holds its own buttons, so it is not a link and its actions take clicks. */
.beah-incoming-task .beah-dash-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

/* A Needs Attention row's waste type and facility: square-cornered white tags with an icon, so they read as what the
   row is about and never as another status pill beside the coloured verdict. */
.beah-incoming-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 24px;
    padding: 0 9px;
    border: 1px solid #DCE3EA;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

    .beah-incoming-tag > .fa {
        flex: none;
        color: #64748B;
        font-size: 12px;
    }

    .beah-incoming-tag.is-waste-type {
        border-color: #C8E0CC;
        color: #1B5E20;
    }

        .beah-incoming-tag.is-waste-type > .fa {
            color: #2E7D32;
        }

.beah-incoming-task-actions {
    flex: none;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.beah-incoming-task.is-warning {
    background-color: #FFFCF3;
}

    .beah-incoming-task.is-warning .beah-dash-sub {
        color: #7A5A1E;
    }

.beah-incoming-more {
    padding: 10px 16px 14px;
    border-top: 1px solid #EEF2EF;
}

/* ---- The facilities: an accordion ---- */
.beah-incoming-fac-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 20px;
}

.beah-incoming-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 14px;
    font-size: 12px;
    color: #475569;
}

    .beah-incoming-legend .beah-info {
        margin-inline-start: 0;
    }

    /* At the card's right edge, the tip opens leftwards so it stays on screen. */
    .beah-incoming-legend .beah-info-tip {
        inset-inline-start: auto;
        inset-inline-end: -8px;
        width: 300px;
        font-size: 12px;
        line-height: 1.5;
    }

.beah-incoming-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .beah-incoming-key::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }

    .beah-incoming-key.is-available::before { background: #66BB6A; }
    .beah-incoming-key.is-nearly-full::before { background: #F59E0B; }
    .beah-incoming-key.is-over::before { background: #DC2626; }
    .beah-incoming-key.is-no-limit::before { background: #94A3B8; }

.beah-incoming-fac {
    border: 1px solid var(--beah-border);
    border-radius: 8px;
    background: var(--beah-surface);
}

    .beah-incoming-fac + .beah-incoming-fac {
        margin-top: 10px;
    }

    .beah-incoming-fac.is-open {
        border-color: #CFE3D2;
    }

.beah-incoming-fac-head {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.beah-incoming-fac-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 52px;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: start;
    cursor: pointer;
}

    .beah-incoming-fac-toggle:hover {
        background: #F8FAFC;
    }

    .beah-incoming-fac-toggle:focus-visible,
    .beah-incoming-fac-total:focus-visible {
        outline: 2px solid var(--beah-green-light);
        outline-offset: -2px;
    }

.beah-incoming-fac-chevron {
    color: #475569;
    font-size: 12px;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.beah-incoming-fac.is-open .beah-incoming-fac-chevron {
    transform: rotate(90deg);
}

[dir="rtl"] .beah-incoming-fac.is-open .beah-incoming-fac-chevron {
    transform: scaleX(-1) rotate(90deg);
}

.beah-incoming-fac-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--beah-text);
    margin-inline-end: 4px;
}

/* The facility's total, which lists everything confirmed for it. */
.beah-incoming-fac-total {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 8px 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

    .beah-incoming-fac-total:hover {
        border-color: #CBD5E1;
        color: var(--beah-text);
    }

    .beah-incoming-fac-total[aria-pressed="true"] {
        border-color: var(--beah-green-light);
        background: #E8F5E9;
        color: var(--beah-green-dark, #1B5E20);
    }

[dir="rtl"] .beah-incoming-fac-total {
    margin: 8px 0 8px 12px;
}

.beah-incoming-fac-body {
    border-top: 1px solid var(--beah-border);
}

.beah-incoming-fac-empty {
    margin: 0;
    padding: 14px 16px;
    color: #475569;
}

.beah-incoming-fac-scroll {
    overflow-x: auto;
}

/* ---- A facility's table: a row per waste type ---- */
.beah-incoming-ftable {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

    /* The same columns in every facility's table, whatever its rows hold. */
    .beah-incoming-ftable col.is-wt { width: 18%; }
    .beah-incoming-ftable col.is-on-hand { width: 10%; }
    .beah-incoming-ftable col.is-arriving { width: 15%; }
    .beah-incoming-ftable col.is-limit { width: 23%; }
    .beah-incoming-ftable col.is-arrivals { width: 20%; }
    .beah-incoming-ftable col.is-full-by { width: 14%; }

    .beah-incoming-ftable th,
    .beah-incoming-ftable td {
        padding: 12px 16px;
        border-top: 1px solid #EEF2F6;
        vertical-align: middle;
        text-align: start;
    }

    .beah-incoming-ftable thead th {
        border-top: 0;
        padding-top: 10px;
        padding-bottom: 8px;
        background: #F8FAFC;
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

        .beah-incoming-ftable thead th small {
            display: block;
            margin-top: 2px;
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0;
            text-transform: none;
        }

    .beah-incoming-ftable .is-num {
        text-align: end;
        white-space: nowrap;
    }

    .beah-incoming-ftable td small {
        display: block;
        margin-top: 3px;
        white-space: normal;
        color: #475569;
        font-size: 11.5px;
    }

        .beah-incoming-ftable td small.is-warn {
            color: #92400E;
        }

    .beah-incoming-ftable tbody th {
        overflow-wrap: anywhere;
    }

/* A waste type's row opens everything due for it at this facility - hover tints it, the open one stays green. */
.beah-incoming-frow {
    cursor: pointer;
}

    .beah-incoming-frow:hover > th,
    .beah-incoming-frow:hover > td {
        background: #F6F9F7;
    }

    .beah-incoming-frow.is-selected > th,
    .beah-incoming-frow.is-selected > td {
        background: #EDF6EE;
    }

    .beah-incoming-frow:hover .beah-incoming-wt {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.beah-incoming-wt {
    padding: 0;
    border: 0;
    background: none;
    color: var(--beah-green);
    font-size: 13px;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

    .beah-incoming-wt:hover,
    .beah-incoming-wt[aria-pressed="true"] {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .beah-incoming-wt[aria-pressed="true"] {
        text-decoration-thickness: 2px;
    }

    .beah-incoming-wt:focus-visible {
        outline: 2px solid var(--beah-green-light);
        outline-offset: 2px;
        border-radius: 2px;
    }

/* A period bar's hover card: the Pricing Index's dark card (.beah-price-insight) with a verdict line and a small bar of
   what the facility held before the period, what the period adds within the limit and past it, the limit marked. */
.beah-incoming-tip-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .beah-incoming-tip-head > div {
        min-width: 0;
    }

    .beah-incoming-tip-head strong,
    .beah-incoming-tip-head > div > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .beah-incoming-tip-head strong {
        color: #fff;
        font-size: 13px;
    }

    .beah-incoming-tip-head > div > span {
        color: #CBD5E1;
        font-size: 11.5px;
    }

.beah-incoming-tip-period {
    flex: none;
    color: #CBD5E1;
    white-space: nowrap;
}

.beah-incoming-tip-verdict {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 2px;
    color: #E2E8F0;
    font-weight: 600;
}

    .beah-incoming-tip-verdict.is-danger { color: #FCA5A5; }
    .beah-incoming-tip-verdict.is-warn { color: #FCD34D; }
    .beah-incoming-tip-verdict.is-ok { color: #86EFAC; }

    .beah-incoming-tip-swatch {
        flex: none;
        margin-top: 4px;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        background: #94A3B8;
    }

        .beah-incoming-tip-swatch.is-available { background: #66BB6A; }
        .beah-incoming-tip-swatch.is-nearly-full { background: #F59E0B; }
        .beah-incoming-tip-swatch.is-full,
        .beah-incoming-tip-swatch.is-over { background: #DC2626; }

.beah-incoming-tip-bar {
    position: relative;
    display: flex;
    height: 8px;
    margin-top: 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
}

    .beah-incoming-tip-bar > span:first-child {
        border-start-start-radius: 4px;
        border-end-start-radius: 4px;
    }

    /* The same colours as the row's bar, read for this period's end. */
    .beah-incoming-tip-bar .is-before { background: #4B7A5A; }
    .beah-incoming-tip-bar .is-within { background: #86EFAC; }
    .beah-incoming-tip-bar .is-past { background: #FCA5A5; }
    .beah-incoming-tip-bar.is-nearly-full .is-before,
    .beah-incoming-tip-bar.is-full .is-before { background: #B45309; }
    .beah-incoming-tip-bar.is-nearly-full .is-within,
    .beah-incoming-tip-bar.is-full .is-within { background: #FCD34D; }
    .beah-incoming-tip-bar.is-over .is-before,
    .beah-incoming-tip-bar .is-before.is-over { background: #B91C1C; }
    .beah-incoming-tip-bar.is-over .is-within { background: #F87171; }

    .beah-incoming-tip-bar > i {
        position: absolute;
        top: -3px;
        bottom: -3px;
        width: 2px;
        margin-inline-start: -1px;
        background: #fff;
        border-radius: 1px;
    }

        .beah-incoming-tip-bar > i.is-overflow {
            width: 0;
            background: none;
            border-inline-start: 2px dotted #fff;
            border-radius: 0;
        }

/* Against its limit: on hand, what arrives within the limit, what goes past it; the limit marked. */
.beah-incoming-limit {
    position: relative;
    display: flex;
    min-width: 200px;
    height: 10px;
    border-radius: 5px;
    background: #EEF2F6;
}

    .beah-incoming-limit > span:first-child {
        border-start-start-radius: 5px;
        border-end-start-radius: 5px;
    }

    /* Coloured by where the facility ends up, on the legend's scale: within capacity green, nearly full or exactly full
       amber, over capacity red - on hand the darker shade, arrivals the lighter, anything past the limit pale red. */
    .beah-incoming-limit .is-on-hand { background: #1B5E20; }
    .beah-incoming-limit .is-within { background: #81C784; }
    .beah-incoming-limit .is-past { background: #EF9A9A; }
    .beah-incoming-limit.is-nearly-full .is-on-hand,
    .beah-incoming-limit.is-full .is-on-hand { background: #B45309; }
    .beah-incoming-limit.is-nearly-full .is-within,
    .beah-incoming-limit.is-full .is-within { background: #F59E0B; }
    .beah-incoming-limit.is-over .is-on-hand,
    .beah-incoming-limit .is-on-hand.is-over { background: #B91C1C; }
    .beah-incoming-limit.is-over .is-within { background: #DC2626; }

/* Past the limit, a dotted line where the total ends - beside the solid one at the limit. */
.beah-incoming-overflow-mark {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 0;
    margin-inline-start: -1px;
    border-inline-start: 2px dotted var(--beah-text);
}

/* The two limit lines' legend: a solid line for the limit, a dotted one for where a total past it ends. */
.beah-limit-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .beah-limit-key::before {
        content: "";
        width: 0;
        height: 14px;
        border-inline-start: 2px solid #0F172A;
    }

    .beah-limit-key.is-overflow::before {
        border-inline-start-style: dotted;
    }

.beah-incoming-limit-mark {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-inline-start: -1px;
    border-radius: 1px;
    background: var(--beah-text);
}

/* What lands each period: a bar per period, each opening its collections. */
.beah-incoming-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 36px;
}

.beah-incoming-bar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 18px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

    .beah-incoming-bar > i {
        display: block;
        width: 12px;
        border-radius: 2px 2px 0 0;
        background: #66BB6A;
    }

    .beah-incoming-bar.is-nearly-full > i,
    .beah-incoming-bar.is-full > i { background: #F59E0B; }
    .beah-incoming-bar.is-over > i { background: #DC2626; }
    .beah-incoming-bar.is-no-limit > i { background: #94A3B8; }
    .beah-incoming-bar.is-empty > i { background: #E2E8F0; }

    /* A day already gone this week: nothing lands there, what was due then is overdue. */
    .beah-incoming-bar.is-past { opacity: .4; }

    .beah-incoming-bar:hover {
        background: #F1F5F9;
    }

    .beah-incoming-bar[aria-pressed="true"] {
        background: #E8F5E9;
        box-shadow: inset 0 0 0 1px var(--beah-green-light);
    }

    .beah-incoming-bar:focus-visible {
        outline: 2px solid var(--beah-green-light);
        outline-offset: 1px;
    }

/* ---- The collections behind a figure ---- */
.beah-incoming-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    border: 1px dashed var(--beah-border);
    border-radius: 8px;
    background: #F8FAFC;
    text-align: center;
}

    .beah-incoming-list-empty > i {
        font-size: 26px;
        color: #94A3B8;
    }

    .beah-incoming-list-empty > strong {
        color: var(--beah-text);
        font-size: 14px;
    }

    .beah-incoming-list-empty > span {
        max-width: 60ch;
        color: #475569;
        font-size: 13px;
    }

/* The list's buttons keep a steady gap between them, and sit with the count at the end of the title. */
.beah-incoming-list-title .beah-section-action {
    margin-inline-start: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767.98px) {
    .beah-incoming-range {
        width: 100%;
        justify-content: space-between;
    }

    .beah-incoming-legend {
        justify-content: flex-start;
    }

    .beah-incoming-task {
        flex-wrap: wrap;
    }

    .beah-incoming-task-actions {
        width: 100%;
        padding-inline-start: 46px;
    }

    .beah-incoming-fac-head {
        flex-direction: column;
        gap: 0;
    }

    .beah-incoming-fac-total {
        align-self: flex-start;
        margin: 0 16px 10px 36px;
    }

    /* A phone stacks the figures, so the separators would only dangle at line ends. */
    .beah-incoming-ledger > .beah-incoming-dot {
        display: none;
    }
}

/* ---------- Change be'ah Facility (incomingCollections/changeFacilityModal) ----------
   One card per facility the collection could go to, picked like a radio: how full it would be with this collection
   on top, as a bar against its limit - on hand, everything else confirmed for it, and this collection. */
.modal .beah-profile-section-title + .beah-divert-option,
.modal .beah-profile-section-title + .beah-divert-list,
.modal .beah-profile-section-title + .beah-profile-empty {
    margin-top: 0;
}

.modal .beah-alert + .beah-profile-section-title,
.modal .beah-divert-option + .beah-profile-section-title,
.modal .beah-divert-list + .beah-profile-section-title {
    margin-top: 18px;
}

.beah-divert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    /* Always room for the scrollbar, so a list that scrolls and one that does not - the current facility's - line up. */
    scrollbar-gutter: stable;
    padding: 2px;
}

.beah-divert-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--beah-border);
    border-radius: 8px;
    background: var(--beah-surface);
    cursor: pointer;
    font-weight: 400;
}

    .beah-divert-option:hover {
        border-color: #94A3B8;
    }

    .beah-divert-option.is-picked {
        border-color: var(--beah-green-light);
        box-shadow: inset 0 0 0 1px var(--beah-green-light);
        background: #F0F9F1;
    }

    /* Indented by the options' radio column, so its name and bar - and the limit line on it - line up with theirs. */
    .beah-divert-option.is-current {
        cursor: default;
        background: #F8FAFC;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding-inline-start: 44px;
    }

        .beah-divert-option.is-current:hover {
            border-color: var(--beah-border);
        }

    .beah-divert-option:focus-within {
        outline: 2px solid var(--beah-green-light);
        outline-offset: 2px;
    }

.beah-divert-radio {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--beah-green);
}

    .beah-divert-radio:focus-visible {
        outline: none;
    }

.beah-divert-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.beah-divert-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--beah-text);
}

.beah-divert-address {
    font-size: 12px;
    color: #475569;
}

.beah-divert-text {
    font-size: 12px;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

/* The bar: on hand, then what else is confirmed, then this collection; the tick is the facility's limit. */
.beah-divert-bar {
    position: relative;
    display: flex;
    height: 8px;
    border-radius: 4px;
    background: #E2E8F0;
}

    .beah-divert-bar > span:first-child {
        border-start-start-radius: 4px;
        border-end-start-radius: 4px;
    }

    .beah-divert-bar > span + span {
        border-inline-start: 2px solid var(--beah-surface);
    }

    .beah-divert-bar .is-on-hand,
    .beah-divert-key .is-on-hand::before { background: #1B5E20; }

    .beah-divert-bar .is-incoming,
    .beah-divert-key .is-incoming::before { background: #66BB6A; }

    .beah-divert-bar .is-this,
    .beah-divert-key .is-this::before { background: #F59E0B; }

.beah-divert-limit {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-inline-start: -1px;
    background: #0F172A;
    border-radius: 1px;
}

.beah-divert-overflow {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 0;
    margin-inline-start: -1px;
    border-inline-start: 2px dotted #0F172A;
}

/* A facility that cannot take all of this collection says how much it can. */
.beah-divert-room {
    align-self: flex-start;
}

/* The collection's facts: each label and value on one line - a value too long for even the wide window ends in an
   ellipsis, its whole text in the title - and a value's detail (collection point, work order) in grey at its size. */
.beah-divert-facts .beah-profile-label {
    flex: none;
    white-space: nowrap;
}

.beah-divert-facts .beah-profile-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beah-divert-sub {
    color: #64748B;
    font-weight: 400;
}

.beah-divert-key {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 12px;
    color: #475569;
}

    .beah-divert-key > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .beah-divert-key > span::before {
            content: "";
            width: 14px;
            height: 8px;
            border-radius: 2px;
        }

/* A request details window's record of each change of be'ah facility, under the facility it goes to now. */
.beah-facility-change {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #FFFBEB;
    color: #78350F;
    font-size: 12px;
}

    .beah-facility-change > i {
        margin-top: 2px;
        color: #B45309;
    }

    .beah-facility-change small {
        display: block;
        color: #92400E;
    }

    .beah-facility-change .beah-facility-change-reason {
        margin-top: 2px;
        font-style: italic;
        overflow-wrap: anywhere;
    }

/* ---------------------------------------------------------------------------------------------------------------------
   The live journey banner (_shared/liveJourney): one waste generator job as six milestones on a straight line. The line
   runs between the first and last node centres - six equal columns put them at 1/12 and 11/12 - and fills green up to the
   current node, which is ringed and pulses while the job is live. Below 576px the line turns vertical, a node per row.
   --------------------------------------------------------------------------------------------------------------------- */
.beah-journey {
    margin-bottom: 16px;
    padding: 14px 16px 12px;
}

.beah-journey-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
}

.beah-journey-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

    .beah-journey-title h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: #1F2937;
    }

.beah-journey-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2E7D32;
    animation: beah-journey-live 1.8s ease-out infinite;
}

@keyframes beah-journey-live {
    0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

.beah-journey-updated {
    font-size: 11.5px;
    color: #64748B;
}

.beah-journey-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #475569;
}

    .beah-journey-facts > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .beah-journey-facts .fa {
        color: #94A3B8;
    }

    .beah-journey-facts .beah-journey-to {
        margin-inline: 2px;
    }

[dir="rtl"] .beah-journey-to {
    transform: scaleX(-1);
}

.beah-journey-eta {
    font-weight: 600;
    color: #1F2937;
}

.beah-journey-track {
    position: relative;
    margin: 18px 0 4px;
}

.beah-journey-line {
    position: absolute;
    top: 13px;
    inset-inline: calc(100% / 12);
    height: 4px;
    border-radius: 2px;
    background: #E2E8F0;
}

.beah-journey-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: #2E7D32;
    transition: width 0.6s ease;
}

.beah-journey-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.beah-journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    text-align: center;
}

.beah-journey-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
}

.beah-journey-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #64748B;
}

.beah-journey-time {
    min-height: 15px;
    font-size: 11px;
    color: #64748B;
}

.beah-journey-step.is-done .beah-journey-node {
    border-color: #2E7D32;
    background: #2E7D32;
    color: #fff;
}

.beah-journey-step.is-done .beah-journey-label {
    color: #1F2937;
}

.beah-journey-step.is-current .beah-journey-node {
    border-color: #2E7D32;
    background: #EDF7EE;
    color: #1B5E20;
    animation: beah-journey-node 2s ease-out infinite;
}

.beah-journey-step.is-current .beah-journey-label {
    color: #1B5E20;
}

.beah-journey-step.is-current.is-warning .beah-journey-node {
    border-color: #B45309;
    background: #FFF7ED;
    color: #92400E;
    animation: none;
}

@keyframes beah-journey-node {
    0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.35); }
    70% { box-shadow: 0 0 0 9px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

.beah-journey-notice {
    margin: 12px 0 0;
}

/* How many jobs are under way, beside the banner's title. */
.beah-journey-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: #EDF7EE;
    font-size: 11.5px;
    font-weight: 600;
    color: #1B5E20;
}

.beah-journey-hint {
    font-size: 11.5px;
    font-weight: 400;
    color: #64748B;
}

/* The job picker: every job under way as a tile; picking one follows it in the panel beneath, and the followed tile is marked -
   green edge, filled dot - as the one the panel shows. Picking only follows; the panel holds what opens or acts. */
.beah-journey-picker {
    margin-top: 12px;
}

    .beah-journey-picker > .beah-journey-hint {
        display: block;
        margin-bottom: 6px;
    }

.beah-journey-jobs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.beah-journey-job {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    min-width: 196px;
    max-width: 260px;
    padding: 8px 10px 9px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    text-align: start;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

    .beah-journey-job:hover {
        border-color: #A5D6A7;
        background: #F6FBF6;
        box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.10);
    }

    .beah-journey-job:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 2px;
    }

    .beah-journey-job.is-selected {
        padding: 7px 9px 8px 11px;
        border: 2px solid #2E7D32;
        background: #EDF7EE;
        box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.12);
        cursor: default;
    }

/* A tile leads with what the person at the point can see: the plate on the vehicle, then the driver and the waste; the reference is
   the small print. */
.beah-journey-job-fleet {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

    .beah-journey-job-fleet .beah-plate-sm {
        padding: 1px 7px;
        font-size: 12.5px;
    }

.beah-journey-job-nofleet {
    font-size: 12px;
    font-style: italic;
    color: #64748B;
}

/* An arrived fleet: standing at the generator's point now, waiting for its pickup code. */
.beah-journey-job-here {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #FFF4E5;
    font-size: 10.5px;
    font-weight: 700;
    color: #9A3412;
    white-space: nowrap;
}

    .beah-journey-job-here::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #EA580C;
    }

.beah-journey-job.is-arrived:not(.is-selected) {
    border-color: #FDBA74;
}

.beah-journey-job-who {
    margin-top: 3px;
    font-weight: 600;
    color: #1F2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beah-journey-job-ref {
    font-variant-numeric: tabular-nums;
}

.beah-journey-job-mark {
    grid-row: span 3;
    font-size: 16px;
    color: #94A3B8;
}

.beah-journey-job:hover .beah-journey-job-mark,
.beah-journey-job.is-selected .beah-journey-job-mark {
    color: #2E7D32;
}

.beah-journey-job-step {
    font-size: 11px;
    color: #64748B;
    white-space: nowrap;
}

.beah-journey-job-bar {
    grid-column: 1 / -1;
    display: flex;
    gap: 3px;
    margin-top: 5px;
}

    .beah-journey-job-bar span {
        flex: 1 1 0;
        height: 4px;
        border-radius: 2px;
        background: #E2E8F0;
    }

        .beah-journey-job-bar span.is-on {
            background: #43A047;
        }

.beah-journey-job.is-warning:not(.is-selected) {
    border-color: #FCD9A8;
}

    .beah-journey-job.is-warning .beah-journey-job-bar span.is-on:last-of-type,
    .beah-journey-job.is-warning .beah-journey-job-bar span.is-on:has(+ span:not(.is-on)) {
        background: #F59E0B;
    }

/* "+N more" opens the rest of the jobs in place; Show Fewer folds them again. */
.beah-journey-jobs-more {
    padding: 8px 14px;
    border: 1px dashed #A5D6A7;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #2E7D32;
    cursor: pointer;
}

    .beah-journey-jobs-more:hover {
        background: #EDF7EE;
    }

    .beah-journey-jobs-more:focus-visible {
        outline: 2px solid #2E7D32;
        outline-offset: 2px;
    }

/* The followed job. With several jobs it is framed as the picked tile's panel; with one, it is simply the banner's body. */
.beah-journey-panel {
    margin-top: 8px;
}

    .beah-journey-panel.is-picked {
        margin-top: 12px;
        padding: 12px 14px;
        border: 1px solid #C8E6C9;
        border-radius: 10px;
        background: #FBFDFB;
    }

.beah-journey-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.beah-journey-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.beah-journey-panel-ref {
    font-size: 15px;
    font-weight: 700;
    color: #1F2937;
    font-variant-numeric: tabular-nums;
}

.beah-journey-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The followed job's pickup code: the QR the driver scans and the six digits, with the job it belongs to named. */
.beah-journey-pass {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid #C8E6C9;
    border-radius: 8px;
    background: #fff;
}

    .beah-journey-pass img {
        width: 132px;
        height: 132px;
        image-rendering: pixelated;
    }

.beah-journey-pass-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.beah-journey-pass-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
}

/* Which fleet the code is for, plate first: the one fact the person at the point checks against the vehicle. */
.beah-journey-pass-for {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.beah-journey-pass-code {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    color: #1F2937;
}

.beah-journey-pass-hint {
    font-size: 12px;
    color: #475569;
}

.beah-journey-pass-job {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

/* Fleets at the generator's points now, above the picker: each plate a button straight to its pickup code. */
.beah-journey-arrivals {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    background: #FFF7ED;
    font-size: 12.5px;
    color: #7C2D12;
}

    .beah-journey-arrivals > .fa {
        margin-top: 2px;
        font-size: 16px;
        color: #EA580C;
    }

.beah-journey-arrivals-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .beah-journey-arrivals-body strong {
        color: #7C2D12;
    }

.beah-journey-arrivals-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.beah-journey-arrival {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    border: 1px solid #FDBA74;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

    .beah-journey-arrival:hover {
        border-color: #EA580C;
        box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.12);
    }

    .beah-journey-arrival:focus-visible {
        outline: 2px solid #C2410C;
        outline-offset: 2px;
    }

    .beah-journey-arrival.is-selected {
        border-color: #2E7D32;
        background: #EDF7EE;
    }

.beah-journey-arrival-who {
    font-weight: 600;
    color: #1F2937;
}

.beah-journey-arrival-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid #FED7AA;
    font-weight: 700;
    color: #C2410C;
    white-space: nowrap;
}

.beah-journey-arrival.is-selected .beah-journey-arrival-go {
    border-color: #C8E6C9;
    color: #2E7D32;
}

.beah-journey-pass-body .btn {
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .beah-journey-job {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .beah-journey-job {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        max-width: none;
    }

    .beah-journey-arrival {
        width: 100%;
        flex-wrap: wrap;
    }

    .beah-journey-arrival-go {
        margin-inline-start: auto;
    }

    .beah-journey-panel-head .beah-journey-actions {
        width: 100%;
    }

        .beah-journey-panel-head .beah-journey-actions .btn {
            flex: 1 1 0;
        }
}

@media (max-width: 575.98px) {
    .beah-journey-line {
        top: 15px;
        bottom: 15px;
        inset-inline-start: 13px;
        inset-inline-end: auto;
        width: 4px;
        height: auto;
    }

    .beah-journey-fill {
        width: 100% !important;
        height: var(--beah-journey-fill, 0%);
        transition: height 0.6s ease;
    }

    .beah-journey-steps {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .beah-journey-step {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 10px;
        padding: 0;
        text-align: start;
    }

    .beah-journey-time {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .beah-journey-live,
    .beah-journey-step.is-current .beah-journey-node {
        animation: none;
    }

    .beah-journey-fill {
        transition: none;
    }
}


/* A note under a field that something is missing but not wrong - amber, unlike beah-field-error. */
.beah-field-warning {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #B45309;
}


/* An option of <beah-search-select> may carry chips - pills beside its name, as the calendar's day panel draws a status - and be
   disabled: greyed, still listed so its chips say why it cannot be picked. The chosen option's chips sit in the closed field too. */
.beah-search-select-option.has-chips {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

    .beah-search-select-option.has-chips .beah-search-select-tick {
        grid-column: 3;
    }

.beah-search-select-chips {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    flex: none;
}

    .beah-search-select-option .beah-search-select-chips {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .beah-search-select-chips .beah-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

.beah-search-select-option.is-disabled {
    cursor: not-allowed;
}

    .beah-search-select-option.is-disabled .beah-search-select-name {
        color: #64748B;
    }

    .beah-search-select-option.is-disabled.is-active {
        background: #F1F5F9;
    }

/* The request's non-mobilisation notice: its text, then the generator's two choices, or the new date to award another bidder with. */
.beah-not-mobilised {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.beah-not-mobilised-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* be'ah's recommended transporter in the request's details: Accept / Decline (or Withdraw), and the reason box a decline opens. */
.beah-recommendation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.beah-recommendation-decline {
    max-width: 520px;
    margin-top: 8px;
}

    .beah-recommendation-decline label {
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 600;
    }

/* The transporter be'ah picked in the Recommend Transporter window. */
/* Recommend Transporter: the list's title, and its search at the far end of the same row. */
.beah-recommend-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.beah-recommend-head .beah-profile-section-title {
    margin-bottom: 0;
}

.beah-recommend-search {
    flex: 0 1 300px;
    min-width: 200px;
}

.beah-profile-table tr.beah-row-selected > td {
    background: #EDF7EE;
}

.beah-not-mobilised-date {
    max-width: 220px;
    margin: 6px 0 0;
}

/* Pills a column adds beneath its value (the shared table's tags option) - under a status pill, a flag on the row. */
/* A row's next step under a cell's value (the shared table's link(row)). */
.beah-table-link {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #2E7D32;
    white-space: nowrap;
}

    .beah-table-link:hover,
    .beah-table-link:focus-visible {
        color: #1B5E20;
        text-decoration: underline;
    }

    /* A column that is only the next step: the link reads as a small outlined button. */
    .beah-table-link.is-only {
        margin-top: 0;
        padding: 4px 10px;
        border: 1px solid #A5D6A7;
        border-radius: 6px;
        background: #F1F8F1;
    }

        .beah-table-link.is-only:hover,
        .beah-table-link.is-only:focus-visible {
            background: #E3F2E4;
            text-decoration: none;
        }

.beah-table-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

    .beah-table-tags .beah-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

/* A window's attachments, read in the card they belong to - the collection point's photos under the point, the waste's photos
   and papers under the waste: each a labelled row of thumbnails shown at once, or a file with its view and download icons
   spaced as every upload's are, or Not Attached - never hidden. Labelled as the facts above them are. */
.beah-attach-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px 20px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e4ece5;
}

    .beah-attach-file {
        min-width: 0;
    }

        .beah-attach-file > label {
            display: block;
            margin-bottom: 6px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .4px;
            color: #8a978e;
        }

.beah-attach-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.beah-attach-photo {
    display: block;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border: 1px solid var(--beah-border);
    border-radius: 6px;
    background: #F8FAFC;
    transition: border-color .15s ease;
}

    .beah-attach-photo:hover,
    .beah-attach-photo:focus-visible {
        border-color: var(--beah-green);
    }

    .beah-attach-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* A file across its slot: the name wrapping rather than cut, view and download at the far end. */
.beah-doc-value.beah-attach-doc {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: start;
}

    .beah-attach-doc .beah-doc-name {
        flex: 1 1 auto;
        white-space: normal;
        overflow-wrap: anywhere;
    }

/* The documents a card carries, one under another. */
.beah-attach-docs {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

/* Place Bid, laid out wide so the trip and the bid read without a long scroll: the waste's facts beside its photos and papers,
   the collection and delivery points side by side, then the latest bids beside the bid itself. Each pair stacks below 992px. */
.beah-bid-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
}

    .beah-bid-pair > .beah-subsection {
        height: auto;
        min-width: 0;
    }

.beah-bid-waste {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: 24px;
}

.beah-bid-evidence {
    min-width: 0;
    padding-inline-start: 24px;
    border-inline-start: 1px solid #e4ece5;
}

    .beah-bid-evidence .beah-attach-files {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

/* Facts two to a row (three for the waste), a long one across the row. */
.beah-bid-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.beah-bid-facts-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .beah-bid-facts > div {
        min-width: 0;
        margin-bottom: 12px;
        overflow-wrap: anywhere;
    }

    .beah-bid-facts > .beah-bid-fact-wide {
        grid-column: 1 / -1;
    }

.beah-bid-evidence .beah-attach-files,
.beah-bid-point .beah-attach-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.beah-bid-point .beah-attach-files {
    margin-top: 2px;
}

.beah-bid-modal .beah-attach-photo {
    width: 64px;
    height: 64px;
}

.beah-bid-offer .form-group {
    margin-bottom: 10px;
}

.beah-bid-offer .beah-alert {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .beah-bid-pair,
    .beah-bid-waste {
        grid-template-columns: minmax(0, 1fr);
    }

    .beah-bid-evidence {
        margin-top: 2px;
        padding-top: 12px;
        padding-inline-start: 0;
        border-inline-start: 0;
        border-top: 1px solid #e4ece5;
    }

    .beah-bid-facts-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A from - to pair of times on one line. */
.beah-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .beah-time-range .form-control {
        flex: 1 1 0;
        min-width: 0;
    }

/* ---------------------------------------------------------------------------------------------
   The exclusive arrangement and its reminders (Internal Transporters, Collection Schedules)
   --------------------------------------------------------------------------------------------- */

/* Monthly: the date in each month, picked on a calendar of the start date's month. 29-31 stay offered for every month -
   a shorter one collects on its last day - and read a step quieter where this month has no such day. */
.beah-month-picker {
    max-width: 440px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px 12px;
    background: #fff;
}

.beah-month-picker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

    .beah-month-picker-head span {
        font-weight: 700;
        color: #0F172A;
    }

    .beah-month-picker-head small {
        color: #64748B;
    }

.beah-month-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.beah-month-picker-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    padding-bottom: 2px;
}

.beah-month-picker-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

    .beah-month-picker-day:hover {
        border-color: #86EFAC;
        color: #166534;
    }

    .beah-month-picker-day.is-beyond {
        border-style: dashed;
        color: #64748B;
    }

    .beah-month-picker-day.is-taken {
        border-color: #BBF7D0;
        background: #F0FDF4;
    }

    .beah-month-picker-day.is-on,
    .beah-month-picker-day.is-on.is-taken {
        background: #2E7D32;
        border-color: #2E7D32;
        color: #fff;
    }

        .beah-month-picker-day.is-on .beah-week-taken {
            color: #BBF7D0;
        }

        .beah-month-picker-day.is-on .beah-week-load {
            color: #DCFCE7;
        }

/* An internal transporter's accepted collections still without a fleet: one line each, inside its reminder banner. */
.beah-fleet-waiting {
    list-style: none;
    margin: 6px 0 4px;
    padding: 0;
}

    .beah-fleet-waiting li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        padding: 4px 0;
        border-top: 1px solid rgba(180, 83, 9, 0.18);
    }

        .beah-fleet-waiting li:first-child {
            border-top: 0;
        }

/* The reminder's heading and its overdue count, then the list, then what to do - each with room around it. */
.beah-fleet-waiting-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.beah-fleet-waiting-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 8px;
}

.beah-fleet-waiting-more {
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* The coverage matrix: a band per wilayat, a row per city, a column per waste type, each cell the transporter that manages
   it - a coloured chip - or a quiet dash that offers Assign on hover. Each transporter keeps one colour (beah-coverage-tone-N,
   set as custom properties so a chip, a legend chip and a dot all read it). */
.beah-coverage-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 4px 0 14px;
}

.beah-coverage-legend-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748B;
}

.beah-coverage-legend-free {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
}

.beah-coverage-free-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border: 1px dashed #CBD5E1;
    border-radius: 6px;
    color: #94A3B8;
}

.beah-coverage-legend-hint {
    margin-inline-start: auto;
    font-size: 12px;
    color: #64748B;
}

.beah-coverage-scroll {
    max-height: 640px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
}

.beah-coverage-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

    .beah-coverage-table th,
    .beah-coverage-table td {
        border-bottom: 1px solid #EEF2F6;
        vertical-align: middle;
    }

    .beah-coverage-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 10px 12px;
        background: #F8FAFC;
        border-bottom: 1px solid #E2E8F0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #475569;
    }

.beah-coverage-head {
    min-width: 132px;
    max-width: 170px;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
}

.beah-coverage-table .beah-coverage-city {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-width: 210px;
    padding: 10px 16px;
    background: #fff;
    text-align: start;
    border-inline-end: 1px solid #E2E8F0;
}

.beah-coverage-table thead .beah-coverage-city {
    z-index: 3;
    background: #F8FAFC;
}

.beah-coverage-table tbody .beah-coverage-city strong {
    display: block;
    font-weight: 700;
    color: #0F172A;
}

.beah-coverage-table tbody .beah-coverage-city span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #2E7D32;
}

    .beah-coverage-table tbody .beah-coverage-city span.is-none {
        color: #94A3B8;
    }

/* The wilayat's band: its name pinned to the start while the matrix scrolls sideways. */
.beah-coverage-band th {
    padding: 7px 16px;
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
    font-size: 12px;
    font-weight: 700;
    color: #0F172A;
    text-align: start;
}

    .beah-coverage-band th > span {
        position: sticky;
        inset-inline-start: 16px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .beah-coverage-band th .fa {
        color: #2E7D32;
    }

    .beah-coverage-band th small {
        font-weight: 500;
        color: #64748B;
    }

.beah-coverage-table tbody tr:not(.beah-coverage-band):hover > td,
.beah-coverage-table tbody tr:not(.beah-coverage-band):hover > .beah-coverage-city {
    background: #F8FAFC;
}

.beah-coverage-cell {
    padding: 6px 8px;
    text-align: center;
}

/* A transporter's chip - in a cell and in the legend. */
.beah-coverage-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 170px;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid var(--tone-border, #E2E8F0);
    border-radius: 999px;
    background: var(--tone-bg, #fff);
    color: var(--tone-fg, #334155);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: box-shadow 160ms ease-out, border-color 160ms ease-out;
}

    button.beah-coverage-chip {
        cursor: pointer;
    }

        button.beah-coverage-chip:hover:not(:disabled),
        button.beah-coverage-chip.is-picked {
            border-color: var(--tone-dot, #2E7D32);
            box-shadow: 0 0 0 2px var(--tone-border, #E2E8F0);
        }

        button.beah-coverage-chip:disabled {
            cursor: default;
        }

    .beah-coverage-chip small {
        font-weight: 500;
        opacity: .8;
    }

.beah-coverage-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beah-coverage-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tone-dot, #94A3B8);
}

/* An empty cell: a quiet dash, offering Assign on hover or focus. */
.beah-coverage-free {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px dashed transparent;
    border-radius: 999px;
    background: transparent;
    color: #CBD5E1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
}

    .beah-coverage-free .is-hover {
        display: none;
    }

    .beah-coverage-free:hover:not(:disabled),
    .beah-coverage-free:focus-visible {
        border-color: #2E7D32;
        background: #F0FDF4;
        color: #166534;
    }

        .beah-coverage-free:hover:not(:disabled) .is-idle,
        .beah-coverage-free:focus-visible .is-idle {
            display: none;
        }

        .beah-coverage-free:hover:not(:disabled) .is-hover,
        .beah-coverage-free:focus-visible .is-hover {
            display: inline;
        }

    .beah-coverage-free:disabled {
        cursor: default;
    }

.beah-coverage-tone-0 { --tone-bg: #DCFCE7; --tone-fg: #14532D; --tone-border: #BBF7D0; --tone-dot: #16A34A; }
.beah-coverage-tone-1 { --tone-bg: #E0F2FE; --tone-fg: #075985; --tone-border: #BAE6FD; --tone-dot: #0284C7; }
.beah-coverage-tone-2 { --tone-bg: #FEF3C7; --tone-fg: #78350F; --tone-border: #FDE68A; --tone-dot: #D97706; }
.beah-coverage-tone-3 { --tone-bg: #EDE9FE; --tone-fg: #4C1D95; --tone-border: #DDD6FE; --tone-dot: #7C3AED; }
.beah-coverage-tone-4 { --tone-bg: #FCE7F3; --tone-fg: #831843; --tone-border: #FBCFE8; --tone-dot: #DB2777; }
.beah-coverage-tone-5 { --tone-bg: #CCFBF1; --tone-fg: #134E4A; --tone-border: #99F6E4; --tone-dot: #0D9488; }
.beah-coverage-tone-6 { --tone-bg: #FFEDD5; --tone-fg: #7C2D12; --tone-border: #FED7AA; --tone-dot: #EA580C; }
.beah-coverage-tone-7 { --tone-bg: #E2E8F0; --tone-fg: #1E293B; --tone-border: #CBD5E1; --tone-dot: #475569; }

/* The coverage window: who already manages a waste type in the cities picked - a line per transporter. */
.beah-coverage-holders {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    margin-inline-start: 24px;
}

    .beah-coverage-holders li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 8px;
        padding: 2px 0;
        font-size: 12px;
        color: #475569;
    }

        .beah-coverage-holders li strong {
            font-weight: 600;
            color: #0F172A;
        }

    .beah-coverage-holders .beah-coverage-holders-more {
        color: #64748B;
    }

/* The coverage window: the transporter and what to do on top, then places beside waste types. The two fields share one grid -
   labels on the first row, controls on the second - so each label sits above its control and the Assign / Release toggle
   stands as tall as the select beside it. */
.beah-coverage-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 6px;
}

    .beah-coverage-top > .form-group {
        display: contents;
    }

        .beah-coverage-top > .form-group:first-child > * {
            grid-column: 1;
        }

        .beah-coverage-top > .form-group:last-child > * {
            grid-column: 2;
        }

    .beah-coverage-top label {
        grid-row: 1;
        margin: 0;
    }

    .beah-coverage-top .form-control,
    .beah-coverage-top .beah-view-toggle {
        grid-row: 2;
    }

    .beah-coverage-top .beah-view-toggle {
        display: flex;
        align-self: stretch;
    }

        .beah-coverage-top .beah-view-toggle .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding-inline: 14px;
            white-space: nowrap;
        }

.beah-coverage-pick {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}

/* Each step of the window is a card headed by its number, what it is and one line on how it works, so the three read in
   order: who (1), where (2), what (3). */
.beah-coverage-step-card {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px 16px;
    background: #fff;
    min-width: 0;
}

.beah-coverage-step-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

    .beah-coverage-step-head > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .beah-coverage-step-head h5 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 2px 0 4px;
        font-size: 15px;
        font-weight: 700;
        color: #0F172A;
    }

    .beah-coverage-step-head p {
        margin: 0;
        font-size: 12.5px;
        line-height: 1.45;
        color: #475569;
    }

.beah-coverage-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2E7D32;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.beah-coverage-clear {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
}

/* Steps 2 and 3 wait for a transporter; step 3's list waits for a city. Said where the pickers will be, never left blank. */
.beah-coverage-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 36px 16px;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    background: #F8FAFC;
    color: #475569;
    font-size: 13px;
    text-align: center;
}

    .beah-coverage-locked .fa {
        font-size: 16px;
        color: #94A3B8;
    }

    .beah-coverage-locked.is-inline {
        justify-content: flex-start;
        margin: 0 0 10px;
        padding: 10px 12px;
        text-align: start;
    }

.beah-coverage-tree {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
}

    .beah-coverage-tree ul {
        list-style: none;
        margin: 0;
        padding-inline-start: 22px;
    }

.beah-coverage-node {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    margin: 0;
}

    .beah-coverage-node label,
    label.beah-coverage-node {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-weight: 400;
        cursor: pointer;
    }

    .beah-coverage-node.is-governorate label {
        font-weight: 700;
    }

    .beah-coverage-node.is-wilayat label {
        font-weight: 600;
    }

    .beah-coverage-node small {
        color: #64748B;
        font-weight: 400;
    }

.beah-coverage-caret {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #64748B;
    cursor: pointer;
}

.beah-coverage-tree .beah-coverage-cities {
    padding-inline-start: 50px;
}

.beah-coverage-type-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .beah-coverage-type-list li {
        padding: 6px 0;
        border-top: 1px solid #F1F5F9;
    }

        .beah-coverage-type-list li:first-child {
            border-top: 0;
        }

    .beah-coverage-type-list label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-weight: 600;
        cursor: pointer;
    }

    .beah-coverage-type-list li.is-disabled label {
        color: #94A3B8;
        cursor: not-allowed;
    }

    .beah-coverage-type-list small {
        display: block;
        margin-inline-start: 24px;
    }

.beah-coverage-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-inline-end: auto;
    font-size: 13px;
    color: #475569;
}

    .beah-coverage-summary .fa {
        margin-inline-end: 4px;
        color: #2E7D32;
    }

.beah-tab-hint {
    margin: -4px 0 12px;
    font-size: 13px;
}

.beah-filter-action {
    align-self: flex-end;
}

@media (max-width: 767px) {
    .beah-coverage-top,
    .beah-coverage-pick {
        grid-template-columns: minmax(0, 1fr);
    }

    .beah-coverage-top {
        grid-template-rows: none;
        row-gap: 14px;
    }

        .beah-coverage-top > .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 0;
        }

        .beah-coverage-top .beah-view-toggle .btn {
            flex: 1 1 0;
            justify-content: center;
        }
}

/* Collection Coverage's legend: a transporter's chip is wider there than in a cell, so its name reads whole. */
.beah-coverage-legend .beah-coverage-chip {
    max-width: 280px;
}

/* A transporter picked out in the legend: every other transporter's chip - in the legend and in the cells - fades to a
   dotted outline, its colour kept faintly so it is still told apart, and every cell still opens the window. */
.beah-coverage-chip.is-faded {
    background: transparent;
    border-style: dotted;
    border-color: var(--tone-dot, #94A3B8);
    box-shadow: none;
    opacity: .5;
}

    button.beah-coverage-chip.is-faded:hover:not(:disabled) {
        opacity: .85;
    }

/* "+N more" and "Show Fewer" beside the legend's chips. */
.beah-coverage-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 3px 12px;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    background: #fff;
    color: #2E7D32;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .beah-coverage-more:hover {
        border-color: #2E7D32;
        background: #F0FDF4;
    }

/* Waiting for Fleet: the marks' legend and the order the rows come in, on one line above the table. */
.beah-waiting-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 20px;
    margin-bottom: 10px;
}

    /* The legend sits at the end beside the sort note, a hairline between them. */
    .beah-waiting-meta .beah-waiting-sort {
        padding-inline-start: 20px;
        border-inline-start: 1px solid #E2E8F0;
    }

/* The coverage window's note on the cell it was opened from, under step 1's fields. */
.beah-coverage-cell-note {
    margin: 14px 0 0;
}

    .beah-waiting-meta .beah-list-mark-legend {
        margin: 0;
    }

.beah-waiting-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

    .beah-waiting-sort .fa {
        color: #2E7D32;
    }

.beah-cell-muted {
    color: #64748B;
}

/* A row with no action to offer keeps its Action button, greyed and inert, rather than one opening an empty list. */
.beah-row-menu-toggle:disabled,
.beah-row-menu-toggle:disabled:hover {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
    opacity: 1;
}

/* The schedule form's when: any frequency but Monthly keeps its four fields on one row; Monthly puts the calendar on the
   left and the window, dates and next collection dates beside it, so the calendar never leaves half the form empty. */
.beah-schedule-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
}

.beah-schedule-when.is-monthly {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
}

    .beah-schedule-when.is-monthly .beah-month-picker {
        max-width: none;
    }

    .beah-schedule-when.is-monthly .beah-schedule-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Its labels line up with the calendar's. */
    }

    .beah-schedule-when.is-monthly .beah-schedule-preview {
        margin-top: 4px;
    }

.beah-schedule-when-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    padding: 14px 16px;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    background: #F8FAFC;
    color: #475569;
    font-size: 13px;
}

    .beah-schedule-when-empty .fa {
        color: #94A3B8;
    }

@media (max-width: 991.98px) {
    .beah-schedule-when.is-monthly {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .beah-schedule-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Every Unify.confirm and Unify.alert (_shim/dialogs.js): a card in the portal's style rather than SweetAlert's own - a
   tinted icon, the message at body size, and the house buttons. Scoped to .beah-dialog so the library's own sizes stand
   for anything else that opens it. */
.swal2-popup.beah-dialog {
    width: 440px;
    max-width: calc(100vw - 32px);
    padding: 28px 28px 22px;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
    font-family: inherit;
}

    .swal2-popup.beah-dialog .swal2-icon.beah-dialog-icon {
        width: 52px;
        height: 52px;
        margin: 0 auto 14px;
        border: 0;
        border-radius: 50%;
        background: #E8F5E9;
        color: #2E7D32;
    }

        .swal2-popup.beah-dialog .swal2-icon.beah-dialog-icon .swal2-icon-content {
            font-size: 22px;
        }

    .swal2-popup.beah-dialog .swal2-title.beah-dialog-message {
        margin: 0;
        padding: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.6;
        color: #1E293B;
        text-align: center;
        word-break: break-word;
    }

    .swal2-popup.beah-dialog .beah-dialog-actions {
        gap: 10px;
        margin: 22px 0 0;
        width: 100%;
        justify-content: center;
    }

        .swal2-popup.beah-dialog .beah-dialog-actions .btn {
            min-width: 104px;
            margin: 0;
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 600;
        }

.beah-dialog-in {
    animation: beah-dialog-in 180ms ease-out;
}

@keyframes beah-dialog-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .beah-dialog-in {
        animation: none;
    }
}

/* --- Multi-select (_shared/multiSelect) -------------------------
   The search dropdown's field and card, a tick box per option; the whole row is the box's label. */
.beah-multi-select .beah-search-select-option {
    display: block;
    padding: 0;
}

    .beah-multi-select .beah-search-select-option:hover {
        background: #EDF7EE;
    }

.beah-multi-select-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 400;
    color: #0F172A;
    cursor: pointer;
}

    .beah-multi-select-row input {
        margin: 0;
        accent-color: #2E7D32;
    }

.beah-multi-select-all {
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 2px;
}

    .beah-multi-select-all .beah-multi-select-row {
        font-weight: 600;
    }

/* A tab's count, beside its name. */
.beah-tab-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #F1F5F9;
    color: #475569;
    font-size: 11px;
    text-align: center;
}

.beah-tab.active .beah-tab-count {
    background: rgba(255, 255, 255, .25);
    color: inherit;
}

/* --- My Jobs (beah-transporter/jobs) -----------------------------
   The tabs, the filter row under them, then the jobs: a list, or on the map the jobs down the left beside their pins, each
   coloured by its stage (beahJobStages). */
    .beah-jobs-filters .beah-multi-select {
        min-width: 220px;
    }

.beah-jobs-reset,
.beah-filter-reset {
    align-self: flex-end;
}

.beah-jobs-dot {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

    .beah-jobs-dot.is-cluster {
        background: conic-gradient(#D97706 0 90deg, #2563EB 90deg 180deg, #7C3AED 180deg 270deg, #2E7D32 270deg 360deg);
    }

/* A job's head: what kind of job it is as a small caption over its number and status. */
.beah-job-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* My Jobs' Assign Multiple Jobs: the jobs waiting for a fleet on the left, in a group per kind, and the fleet, its driver
   and its days with the ticked jobs aboard on the right; stacked below 992px. */
.beah-assign-jobs-modal { max-width: min(1760px, 96vw); }
.beah-assign-jobs {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(420px, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 12px;
}
@media (max-width: 991.98px) {
    .beah-assign-jobs { grid-template-columns: minmax(0, 1fr); }
}
.beah-assign-jobs-filters { margin-bottom: 12px; }
.beah-assign-jobs-filters .beah-filter:first-child { flex: 0 0 240px; }
.beah-assign-jobs-fleet { position: sticky; top: 0; }
/* The fleet and driver, then each part of the check, evenly apart. */
.beah-assign-jobs-pick .form-group { margin-bottom: 16px; }
.beah-assign-jobs-pick .form-group:last-child { margin-bottom: 0; }
.beah-assign-jobs-pick label { margin-bottom: 6px; }
.beah-assign-jobs-pick + * { margin-top: 20px; }
.beah-assign-check-panel { margin-top: 20px; }
.beah-assign-jobs-wait {
    padding: 14px;
    border: 1px dashed #CBD5E1;
    border-radius: 8px;
    color: #64748B;
    font-size: 13px;
}
.beah-assign-jobs-summary {
    margin-inline-end: auto;
    color: #475569;
    font-size: 13px;
}

.beah-assign-group {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
}
.beah-assign-group + .beah-assign-group { margin-top: 14px; }
.beah-assign-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
}
.beah-assign-group.is-scheduled .beah-assign-group-head { background: #EDF6EE; }
.beah-assign-group-title { font-weight: 600; color: #1E293B; }
.beah-assign-group.is-scheduled .beah-assign-group-title i { color: #2E7D32; }
.beah-assign-group.is-request .beah-assign-group-title i { color: #2563EB; }
.beah-assign-group-picked {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 600;
    color: #2E7D32;
}
.beah-assign-group-empty {
    padding: 14px;
    color: #64748B;
    font-size: 13px;
}
.beah-assign-check { display: inline-flex; margin: 0; }
.beah-assign-check input, .beah-assign-row input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

.beah-assign-rows { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.beah-assign-rows li + li { border-top: 1px solid #EEF2F6; }
.beah-assign-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 10px 14px;
    font-weight: 400;
    cursor: pointer;
}
.beah-assign-row:hover { background: #F8FAFC; }
.beah-assign-row.is-picked { background: #F1F8F2; }
.beah-assign-row input { margin-top: 3px; }
.beah-assign-cell { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: #1E293B; overflow-wrap: anywhere; }
.beah-assign-cell small { font-size: 12px; }
.beah-assign-label { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #64748B; }
@media (max-width: 767.98px) {
    .beah-assign-row { grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr); }
    .beah-assign-row .beah-assign-cell:nth-child(n+4) { grid-column: auto; }
}

/* A fleet's day with the jobs being assigned aboard (_shared/fleetLoad): the peak against its capacity, then each job in
   the order it comes aboard - a new one tinted, a delivered one quieter, since its load has left. */
.beah-fleet-load > .beah-alert { margin-bottom: 0; }
.beah-fleet-load-part + .beah-fleet-load-part, .beah-fleet-load > .beah-alert + .beah-fleet-load-part { margin-top: 20px; }
.beah-fleet-load-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}
.beah-fleet-load-title i { color: #2E7D32; }
.beah-fleet-load-part > .beah-alert { margin-bottom: 10px; }
.beah-fleet-load-clashes { margin: 4px 0 0; padding-inline-start: 18px; }
.beah-fleet-upcoming { max-height: 420px; overflow-y: auto; border: 1px solid #E2E8F0; border-radius: 8px; padding: 4px 12px 12px; }
.beah-fleet-upcoming-date { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #1E293B; }
.beah-fleet-load-day {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px 12px;
}
.beah-fleet-load-day + .beah-fleet-load-day { margin-top: 10px; }
.beah-fleet-load-day.is-over { border-color: #FCA5A5; }
.beah-fleet-load-day .beah-alert { margin: 8px 0 0; }
.beah-fleet-load-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}
.beah-fleet-load-date { font-weight: 600; color: #1E293B; }
.beah-fleet-load-peak { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; }
.beah-fleet-load-bar {
    display: inline-block;
    width: 110px;
    height: 6px;
    border-radius: 3px;
    background: #E2E8F0;
    overflow: hidden;
}
.beah-fleet-load-bar > span { display: block; height: 100%; border-radius: 3px; background: #2E7D32; }
.beah-fleet-load-bar.is-near > span { background: #D97706; }
.beah-fleet-load-bar.is-over > span { background: #DC2626; }
.beah-fleet-load-peak .beah-info { margin-inline-start: -4px; }

/* A collection window: its time, how many jobs, what it collects and what the fleet carries once it is done, then its jobs. */
.beah-fleet-window { margin-top: 10px; border: 1px solid #EEF2F6; border-radius: 6px; overflow: hidden; }
.beah-fleet-window-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 6px 10px;
    background: #F8FAFC;
    font-size: 12px;
    color: #475569;
}
.beah-fleet-window-time { font-weight: 600; color: #1E293B; font-variant-numeric: tabular-nums; }
.beah-fleet-window-time i { color: #64748B; }
.beah-fleet-window-total { font-weight: 600; color: #1E293B; }
.beah-fleet-window-after { margin-inline-start: auto; }
/* Fixed columns, so every row's quantity and status sit at the same place whatever the row holds. */
.beah-fleet-job {
    display: grid;
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr) 88px 132px;
    gap: 4px 14px;
    align-items: start;
    padding: 8px 10px;
    border-top: 1px solid #EEF2F6;
    font-size: 12.5px;
    color: #1E293B;
}
.beah-fleet-job > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.beah-fleet-job small { font-size: 11.5px; color: #64748B; }
.beah-fleet-job-wo { color: #64748B; font-size: 12px; white-space: nowrap; }
.beah-fleet-job > .beah-fleet-job-qty { align-items: flex-end; text-align: end; white-space: nowrap; }
.beah-fleet-job > .beah-fleet-job-state { align-items: flex-end; }
.beah-fleet-job-state .beah-pill { white-space: nowrap; }
.beah-fleet-job.is-new { background: #F0F7FF; }
.beah-fleet-job.is-released { color: #64748B; }
@media (max-width: 575.98px) {
    .beah-fleet-job { grid-template-columns: minmax(0, 1fr) 120px; }
}
.beah-fleet-upcoming-day + .beah-fleet-upcoming-day { margin-top: 6px; }
.beah-fleet-upcoming-date i { color: #64748B; }

/* A search box that clears: a plain × inside the field at its end, no border of its own, the text kept clear of it. */
.beah-search-field {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}
    .beah-search-field .form-control {
        width: 100%;
        padding-inline-end: 30px;
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }
/* Stated through the group: the framework pads every button in a search group 25px each side. */
.input-search-group .beah-search-clear,
.beah-search-clear {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #94A3B8;
    line-height: 1;
    cursor: pointer;
}
    .beah-search-clear:hover { color: #1E293B; }

.beah-job-kind {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #64748B;
}

/* A job's facts in two halves - what it is on the left, where it goes and who carries it on the right, ruled apart - so
   the card is as tall as its longer half rather than a column of every fact. One column below 576px. */
.beah-job-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 24px;
    margin-bottom: 12px;
}

    .beah-job-split > .beah-job-grid + .beah-job-grid {
        padding-inline-start: 24px;
        border-inline-start: 1px solid #E8EEE9;
    }

@media (max-width: 575px) {
    .beah-job-split {
        grid-template-columns: minmax(0, 1fr);
    }

        .beah-job-split > .beah-job-grid + .beah-job-grid {
            padding-inline-start: 0;
            border-inline-start: 0;
        }
}

/* Each half: its facts one under another, a small label over the value and a quieter line beneath. */
.beah-job-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

    .beah-job-grid > div {
        min-width: 0;
    }

    .beah-job-grid dt {
        margin-bottom: 2px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #64748B;
    }

    .beah-job-grid dd {
        margin: 0;
        font-size: 13px;
        color: #0F172A;
        overflow-wrap: anywhere;
    }

        .beah-job-grid dd.is-sub {
            margin-top: 1px;
            font-size: 12px;
            color: #64748B;
        }

        .beah-job-grid dd .fa {
            width: 12px;
            color: #94A3B8;
            text-align: center;
        }

/* An arrow or chevron that points the way the text reads: mirrored right to left. Used by Incoming Collections' pager
   and My Jobs' route, and defined nowhere until now. */
[dir="rtl"] .beah-flip-rtl {
    display: inline-block;
    transform: scaleX(-1);
}

/* My Jobs' actions sit at the card's end, under the half that says where the job goes and who carries it. */
.beah-job-actions.is-end {
    justify-content: flex-end;
}

/* A job card's footer: the papers it has (Manifest, POD) at the start, its actions at the end, on one row. */
.beah-job-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

    .beah-job-foot .beah-job-actions {
        margin-inline-start: auto;
    }

.beah-job-papers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.beah-job-card.is-pickable {
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .beah-job-card.is-pickable:hover {
        border-color: #A7D3AE;
    }

.beah-job-card.is-selected {
    border-color: #2E7D32;
    box-shadow: 0 0 0 1px #2E7D32;
}

/* Two columns from 992px: the jobs scroll in their own column beside a map that stays in view. */
@media (min-width: 992px) {
    .beah-jobs-split {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 16px;
        align-items: start;
    }

        .beah-jobs-split .beah-jobs-list {
            max-height: 700px;
            overflow-y: auto;
            padding-inline-end: 4px;
        }

        .beah-jobs-split .beah-jobs-map-col {
            position: sticky;
            top: 12px;
        }
}

.beah-jobs-split .beah-jobs-map-col {
    margin-bottom: 14px;
}

.beah-jobs-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 14px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #475569;
}

.beah-jobs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .beah-jobs-legend-item b {
        color: #0F172A;
    }

.beah-jobs-frame {
    height: 640px;
}

.beah-jobs-pin,
.beah-jobs-cluster {
    background: none;
    border: 0;
}

    .beah-jobs-cluster span {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
    }

    .beah-jobs-cluster b {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border-radius: 50%;
        background: #fff;
        color: #0F172A;
        font-size: 12px;
    }

.beah-jobs-popup {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.beah-jobs-popup-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: start;
    font: inherit;
    cursor: pointer;
}

    .beah-jobs-popup-row:hover,
    .beah-jobs-popup-row:focus-visible {
        background: #EDF7EE;
    }

.beah-jobs-popup-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0F172A;
}

.beah-jobs-popup-line {
    color: #475569;
    font-size: 12px;
}

/* --- My Jobs' Job Details (beah-transporter/jobs/jobDetailModal) ---------------------------------
   The job's Overview in the order it happens, as cards in two columns that each stack tightly, so no card waits on a taller
   neighbour: before pickup on the left (Collection, Waste Collection Point with its pin on a map, Fleet and Driver), the
   pickup and delivery on the right (the handover, the manifest, the delivery). A step not reached yet is dashed and quieter,
   saying so. Every fact is a small label over its value on one grid. */
.beah-detail-modal.beah-job-detail-modal {
    max-width: 1400px;
}

.beah-job-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

    .beah-job-steps-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

@media (max-width: 991px) {
    .beah-job-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

.beah-job-step {
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
}

    .beah-job-step.is-pending {
        background: #FAFBFC;
        border-style: dashed;
    }

.beah-job-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .beah-job-step-head .beah-pill {
        margin-inline-start: auto;
    }

.beah-job-step-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
}

    .beah-job-step-title .fa {
        margin-inline-end: 4px;
        color: #2E7D32;
    }

.beah-job-step.is-pending .beah-job-step-title {
    color: #64748B;
}

    .beah-job-step.is-pending .beah-job-step-title .fa {
        color: #94A3B8;
    }

.beah-job-step-empty {
    margin: 0;
    font-size: 12.5px;
    color: #64748B;
}

.beah-job-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0;
}

    .beah-job-facts > div {
        min-width: 0;
    }

    .beah-job-facts > .is-wide {
        grid-column: 1 / -1;
    }

    .beah-job-facts dt {
        margin-bottom: 3px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #64748B;
    }

    .beah-job-facts dd {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #0F172A;
        overflow-wrap: anywhere;
    }

        .beah-job-facts dd small {
            margin-inline-start: 4px;
            font-size: 12px;
            font-weight: 400;
            color: #64748B;
        }

.beah-job-step .beah-alert {
    margin-bottom: 12px;
}

.beah-job-step-map {
    margin-top: 14px;
}

    .beah-job-step-map .beah-map-frame {
        height: 240px;
    }

.beah-job-step-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

    .beah-job-step-thumbs.is-first {
        margin-top: 0;
    }

/* The proof of delivery itself, framed as a preview and opening full size. */
.beah-file-preview.beah-job-pod {
    width: 240px;
    height: 150px;
    margin: 0;
}

.beah-job-thumb {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 104px;
    font-size: 11px;
    color: #475569;
    text-decoration: none;
}

    .beah-job-thumb img {
        width: 104px;
        height: 78px;
        object-fit: cover;
        border: 1px solid #E2E8F0;
        border-radius: 6px;
        background: #F8FAFC;
    }

    .beah-job-thumb.is-id img {
        border-color: #F59E0B;
    }

    .beah-job-thumb span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .beah-job-thumb:hover img,
    .beah-job-thumb:focus-visible img {
        border-color: #2E7D32;
    }