/* ============================================================
   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).
   ============================================================ */

/* --- 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;
    }

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

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

.beah-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    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;
    }

.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;
    }

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

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

    .beah-filter-search form,
    .beah-filter-search .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 {
    display: flex;
    align-items: center;
    gap: 14px;
    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: #6b7a70;
}

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

.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;
    }

.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;
}

/* --- 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;
}

.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;
}

.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;
    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;
}

.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;
}

/* 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;
        }

    .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 {
    color: #92400E;
    font-weight: 600;
}

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

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

.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;
}

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

.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;
        }

.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;
        }

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

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

.beah-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
}

.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: #6B7280;
}

.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;
}

.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;
    }

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

.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 > .beah-section-head {
        padding: 10px 12px;
    }

.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;
    }

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

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

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


/* --- 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;
}

.beah-job-blocked {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #92400E;
    background: #FEF3C7;
    border-radius: 8px;
}

.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;
}

.beah-alert-action {
    margin-inline-start: 10px;
}


/* --- 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;
    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;
    color: #8a978e;
    white-space: nowrap;
}

/* ============================================================
   beah-rich-text-editor — see richTextEditor.js.

   Colours follow the be'ah green palette rather than Bootstrap
   blue, so the editor sits with the rest of the portal.
   ============================================================ */

.beah-rte-toolbar {
    background: #f6f9f6;
    border: 1px solid #ced4da;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 4px 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.beah-rte-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 7px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    min-width: 28px;
    color: #333;
}

    .beah-rte-btn:hover {
        background: #e4ede4;
        border-color: #c7d6c7;
    }

.beah-rte-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #ccc;
    margin: 0 3px;
    vertical-align: middle;
}

.beah-rte-select {
    height: 26px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 3px;
    background: #fff;
    cursor: pointer;
    margin-inline-end: 2px;
}

/* The colour swatch hides a native colour input behind an icon. */
.beah-rte-color-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    margin: 0;
    vertical-align: middle;
}

    .beah-rte-color-btn:hover {
        background: #e4ede4;
        border-color: #c7d6c7;
    }

.beah-rte-color-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.beah-rte-body {
    border: 1px solid #ced4da;
    border-radius: 0 0 4px 4px;
    padding: 10px 12px;
    min-height: 260px;
    max-height: 380px;
    overflow-y: auto;
    outline: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background: #fff;
    word-break: break-word;
}

    .beah-rte-body:focus {
        border-color: var(--beah-green, #2f7d4f);
        box-shadow: 0 0 0 .2rem rgba(47, 125, 79, .2);
    }

/* dir="rtl" alone only sets the writing direction; an explicit text-align
   inherited from the surrounding Bootstrap chain still wins over the initial
   `start`, so RTL content has to claim its alignment outright. */
.beah-rte-body[dir="rtl"],
.beah-rte-field[dir="rtl"] {
    text-align: right;
}

/* Single-line variant — a contenteditable that behaves like an input. */
.beah-rte-field {
    height: auto;
    min-height: 34px;
    max-height: 34px;
    overflow: hidden;
    white-space: nowrap;
    cursor: text;
    line-height: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}

    .beah-rte-field:focus {
        outline: none;
        border-color: var(--beah-green, #2f7d4f);
        box-shadow: 0 0 0 .2rem rgba(47, 125, 79, .2);
    }

    .beah-rte-field br {
        display: none;
    }

    .beah-rte-field * {
        display: inline;
        white-space: nowrap;
    }

/* ---- Merge-field chips (only when a tag list is supplied) ---- */

.beah-rte-chip {
    display: inline-block;
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 10px;
    background-color: #e6f3ec;
    border: 1px solid #b8dcc7;
    color: #1d6b41;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

    .beah-rte-chip::before {
        content: "@";
        opacity: .6;
        margin-inline-end: 1px;
    }

/* position:fixed so the menu can sit at the caret, over the modal. */
.beah-rte-menu {
    position: fixed;
    z-index: 2000;
    min-width: 200px;
    max-width: 320px;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    padding: 4px 0;
}

    .beah-rte-menu .beah-rte-menu-item {
        display: block;
        padding: 6px 12px;
        color: #212529;
        font-size: .875rem;
        text-decoration: none;
        cursor: pointer;
    }

        .beah-rte-menu .beah-rte-menu-item:hover,
        .beah-rte-menu .beah-rte-menu-item.active {
            background-color: #e6f3ec;
            color: #1d6b41;
        }

        .beah-rte-menu .beah-rte-menu-item .beah-rte-token {
            color: #6c757d;
            font-size: .8em;
            margin-inline-start: 6px;
        }

    .beah-rte-menu .beah-rte-menu-empty {
        padding: 6px 12px;
        color: #6c757d;
        font-size: .8125rem;
    }

/* ============================================================
   be'ah Digital Onboarding — standalone registration portal
   Green & white theme; shares the --beah-* palette with
   portal/styles/beah-green.css.
   ============================================================ */

:root {
    --g: #1B5E20;
    --green: #185c24;
    --gl: #2E7D32;
    --gm: #43A047;
    --gp: #E8F5E9;
    --gw: #edf7ee;
    --bg: #f5f7f5;
    --sfc: #FFFFFF;
    --bdr: #E2E8F0;
    --bdrg: #cfe3d2;
    --txt: #0F172A;
    --muted: #64748B;
    --gold: #F57F17;
    --goldp: #FFF7E6;
    --red: #C62828;
    --redp: #FFEBEE;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.beah-onboarding {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--txt);
    font-size: 14.5px;
    line-height: 1.55;
    min-height: 100vh;
}

[v-cloak] { display: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

.ob-shell { max-width: 1560px; margin: 0 auto; padding: 0 24px 40px; }

/* ---- Top bar ---- */
.ob-topbar {
    height: 68px;
    background: var(--green);
    border-radius: 0 0 12px 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 24px 78px;
    margin-bottom: 18px;
}

/* Wide enough for the close button to sit in the gutter beside the bar. */
@media (min-width: 1680px) {
    .ob-topbar { padding-inline: 24px; }
}

.ob-brand { display: flex; align-items: center; gap: 12px; }

.ob-brand-mark {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(255,255,255,.18);
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    font-size: 19px;
}

.ob-brand-title { font-size: 16.5px; font-weight: 800; }
.ob-brand-sub { font-size: 11.5px; color: rgba(255,255,255,.75); }

.ob-top-actions { display: flex; align-items: center; gap: 10px; }

.ob-pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.13);
    border-radius: 999px; padding: 8px 14px;
    color: #fff; font-weight: 700; font-size: 12px;
}

.ob-lang {
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.16);
    color: #fff; border-radius: 999px;
    padding: 9px 15px; font-weight: 800; font-size: 12.5px;
}
.ob-lang:hover { background: rgba(255,255,255,.24); }

/* ---- Close (back to login) ----
   Pinned to the window's trailing corner: top right in English, top left in Arabic. */
.ob-close-dock {
    position: fixed; top: 13px; inset-inline-end: 16px; z-index: 30;
}

.ob-close {
    pointer-events: auto;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--green);
    border: 0; text-decoration: none;
    font-size: 28px; line-height: 1;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .22);
    transition: all .15s;
}
.ob-close:hover { background: var(--gw); color: var(--g); transform: scale(1.06); }

/* ---- Role cards ---- */
.ob-role-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin: 0 0 14px;
}

.ob-role-card {
    min-height: 78px; padding: 12px 15px;
    display: grid; grid-template-columns: 42px 1fr;
    align-items: center; column-gap: 12px;
    text-align: start;
    background: #fff; border: 1.5px solid var(--bdr);
    border-radius: 10px; transition: all .15s;
}
.ob-role-card:hover { border-color: var(--green); }
.ob-role-card.active { background: var(--gw); border-color: var(--green); }

.ob-role-ico {
    width: 40px; height: 40px; border-radius: 9px;
    display: grid; place-items: center; font-size: 19px;
    background: var(--gw); color: var(--green);
    border: 1px solid var(--bdrg);
}

.ob-role-card h3 { font-size: 14.5px; margin: 0; }
.ob-role-card small { color: var(--muted); font-size: 11.5px; }

a.ob-role-card { color: inherit; text-decoration: none; }
a.ob-role-card:hover { color: inherit; text-decoration: none; }

/* ---- Type chooser (/onboarding with no type) ---- */
.ob-chooser { margin: 6px 0 14px; }
.ob-chooser-head { margin: 0 2px 12px; }
.ob-chooser-head h2 { font-size: 20px; margin: 0 0 4px; }
.ob-chooser-head p { color: var(--muted); font-size: 13px; margin: 0; }

/* ---- The type in force, once the applicant is inside the wizard ---- */
.ob-role-locked {
    display: grid; grid-template-columns: 46px auto 1fr;
    align-items: center; column-gap: 15px;
    padding: 13px 18px; margin: 0 0 14px;
    background: linear-gradient(90deg, var(--gp), var(--gw) 55%, #fff);
    border: 1px solid var(--bdrg);
    border-inline-start: 5px solid var(--green);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(24, 92, 36, .12);
}

/* The tint has to fall on the accented edge, which swaps in Arabic. */
[dir="rtl"] .ob-role-locked {
    background: linear-gradient(270deg, var(--gp), var(--gw) 55%, #fff);
}

.ob-role-locked-ico {
    width: 46px; height: 46px; border-radius: 11px;
    display: grid; place-items: center; font-size: 21px;
    background: var(--green); color: #fff;
}

.ob-role-locked-name small {
    display: block; color: var(--gl);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .9px; text-transform: uppercase;
}

.ob-role-locked-name h3 {
    font-size: 19px; font-weight: 800; line-height: 1.25;
    margin: 1px 0 0; color: var(--green);
}

.ob-role-locked-desc {
    margin: 0; color: var(--muted); font-size: 12.5px;
    padding-inline-start: 15px;
    border-inline-start: 1px solid var(--bdrg);
}

/* ---- Workspace: green sidebar + white main ---- */
.ob-workspace {
    display: grid; grid-template-columns: 300px minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid #dfe7e0; border-radius: 12px;
    /* `clip` rather than `hidden` — `hidden` would make this a scroll
       container and stop the footer below from sticking to the viewport. */
    overflow: clip; background: #fff;
}

.ob-sidebar {
    background: var(--green); color: #fff;
    padding: 26px 22px; min-height: 640px;
}

.ob-side-title {
    font-size: 14px; font-weight: 900; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.ob-progress {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px; padding: 13px; margin-bottom: 14px;
}
.ob-progress-num { font-size: 26px; font-weight: 900; }
.ob-progress-label { font-size: 10px; color: rgba(255,255,255,.68); font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.ob-bar { height: 7px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; margin-top: 9px; }
.ob-fill { height: 100%; background: #fff; border-radius: 999px; transition: width .3s; }

.ob-steps { display: flex; flex-direction: column; gap: 8px; }

.ob-step {
    display: grid; grid-template-columns: 32px 1fr; gap: 10px;
    align-items: start; border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px; padding: 10px; transition: all .15s;
}
.ob-step-dot {
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 900; color: #fff;
}
.ob-step-name { font-size: 13px; font-weight: 900; }
.ob-step-desc { font-size: 11px; color: rgba(255,255,255,.62); line-height: 1.35; margin-top: 3px; }

.ob-step.done { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.ob-step.done .ob-step-dot { background: #fff; border-color: #fff; color: var(--green); }
.ob-step.active { border-color: #fff; background: #fff; }
.ob-step.active .ob-step-name { color: var(--green); }
.ob-step.active .ob-step-desc { color: var(--muted); }
.ob-step.active .ob-step-dot { background: var(--gw); border-color: var(--green); color: var(--green); }

/* ---- Main card ---- */
.ob-main { background: #fff; min-width: 0; display: flex; flex-direction: column; }

.ob-main-head {
    min-height: 92px; padding: 22px 26px;
    border-bottom: 1px solid var(--bdr);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ob-main-head h2 { font-size: 24px; font-weight: 900; letter-spacing: -.25px; }
.ob-main-head p { font-size: 13px; color: var(--muted); margin-top: 5px; }

.ob-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: 999px;
    background: var(--gp); color: var(--gl);
    font-size: 12px; font-weight: 900;
    border: 1px solid #c8e6c9; white-space: nowrap;
}

.ob-content { padding: 24px; flex: 1; }

/* ---- Sections ---- */
.ob-section {
    border: 1px solid var(--bdr); border-radius: 10px;
    background: #fff; padding: 0 20px 20px; margin-bottom: 16px;
    overflow: hidden;
}

.ob-section-title {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 -20px 16px; padding: 14px 20px;
    background: linear-gradient(135deg, #176b43, #238858);
    color: #fff; min-height: 52px;
}
.ob-section-title h3 { font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 9px; }
.ob-section-title h3 i { color: #dff9ea; }
.ob-section-title p { font-size: 12px; opacity: .86; margin-top: 3px; }
.ob-section-title .ob-badge { background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.7); color: #176044; }

.ob-subtitle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 14px 0 10px;
}
.ob-subtitle h4 { font-size: 13px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.ob-subtitle h4 i { color: var(--gl); }
.ob-subtitle p { font-size: 11.5px; color: var(--muted); }

/* ---- Grid + fields ---- */
.ob-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ob-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ob-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.ob-field label {
    font-size: 11.5px; font-weight: 900; color: var(--muted);
    display: block; margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: .3px;
}
.ob-field input, .ob-field select, .ob-field textarea {
    width: 100%; height: 44px;
    border: 1.5px solid var(--bdr); border-radius: 8px;
    background: #fff; color: var(--txt);
    padding: 0 13px; transition: all .15s;
}
.ob-field textarea { height: auto; padding: 11px 13px; }
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus {
    outline: none; border-color: var(--gm);
    box-shadow: 0 0 0 3px rgba(46,125,50,.10);
}
.ob-field.invalid input, .ob-field.invalid select { border-color: var(--red); }

.ob-hint { font-size: 11.5px; color: var(--muted); margin-top: 7px; }

/* Fixed country code in front of the 8 local digits. */
.ob-phone { display: flex; }
.ob-phone span {
    display: grid; place-items: center; padding: 0 12px;
    border: 1.5px solid var(--bdr); border-right: 0; border-radius: 8px 0 0 8px;
    background: var(--gw); color: var(--muted); font-weight: 800; font-size: 13px;
}
.ob-field .ob-phone input { border-radius: 0 8px 8px 0; }

/* ---- Buttons ---- */
.ob-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--bdr); background: #fff; color: var(--txt);
    border-radius: 8px; padding: 10px 18px;
    font-size: 13px; font-weight: 800; transition: all .15s; min-height: 42px;
}
.ob-btn:hover { border-color: var(--bdrg); background: var(--gw); }
.ob-btn:disabled { opacity: .45; cursor: not-allowed; }

.ob-btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.ob-btn-primary:hover { background: var(--gl); border-color: var(--gl); color: #fff; }

.ob-btn-outline { border-color: var(--bdrg); color: var(--green); background: #fff; }
.ob-btn-outline:hover { background: var(--gw); }

.ob-btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.ob-btn-danger:hover { background: #a51f1f; border-color: #a51f1f; color: #fff; }

.ob-btn-sm { padding: 7px 12px; min-height: 34px; font-size: 12px; border-radius: 7px; }
.ob-btn-block { width: 100%; }

.ob-remove {
    border: 0; background: #fee2e2; color: #991b1b;
    border-radius: 8px; width: 34px; height: 34px;
    display: grid; place-items: center; flex-shrink: 0;
}

/* ---- Upload cards ---- */
.ob-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.ob-upload {
    border: 1.5px dashed #b8c4d4; border-radius: 10px;
    background: #fbfdfc; padding: 14px; min-height: 112px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
    transition: all .15s;
}
.ob-upload:hover { border-color: var(--gm); background: var(--gw); }
.ob-upload.uploaded { border-color: #16a34a; background: #f0fdf4; }

.ob-upload-top { display: flex; gap: 9px; align-items: flex-start; }
.ob-upload-ico {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--gp); color: var(--gl);
    display: grid; place-items: center; font-size: 15px; flex-shrink: 0;
}
.ob-upload strong { font-size: 13px; display: block; margin-bottom: 3px; }
.ob-upload span { font-size: 11.5px; color: var(--muted); line-height: 1.4;
                  /* break-all split ordinary words mid-letter; this breaks only
                     what genuinely cannot fit, such as a long file name. */
                  overflow-wrap: anywhere; }

.ob-upload input[type=file] { display: none; }

/* ---- Chips ---- */
.ob-chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.ob-chip {
    position: relative; border: 1.5px solid var(--bdr); border-radius: 10px;
    background: #fff; padding: 12px; display: flex; align-items: center; gap: 10px;
    transition: all .14s; min-height: 52px; cursor: pointer;
}
.ob-chip:hover { border-color: var(--bdrg); }
.ob-chip.active { border-color: var(--green); background: var(--gw); }
.ob-chip-check {
    width: 20px; height: 20px; border-radius: 7px;
    border: 1.5px solid #cbd5e1;
    display: grid; place-items: center; color: #fff; font-size: 10px; flex-shrink: 0;
}
.ob-chip.active .ob-chip-check { background: var(--green); border-color: var(--green); }
.ob-chip strong { font-size: 12.5px; }

/* ---- Repeatable cards (sites / fleet / facilities) ---- */
.ob-repeat {
    border: 1px solid var(--bdr); border-radius: 10px;
    background: #fbfdff; margin-bottom: 12px; overflow: hidden;
}
.ob-repeat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 16px;
    background: linear-gradient(135deg, #176b43, #238858);
    color: #fff;
}
.ob-repeat-head strong { font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
.ob-repeat-head .ob-remove { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.ob-repeat-body { padding: 16px; }

.ob-primary-tag {
    display: inline-flex; align-items: center; gap: 5px;
    color: #e8fff4; background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800;
}

/* ---- Stream rows ---- */
.ob-stream { display: grid; gap: 9px; }
.ob-stream-row {
    display: grid; grid-template-columns: 1.2fr .8fr .7fr .9fr .7fr 34px;
    gap: 9px; align-items: end;
    border: 1px solid #edf2f7; border-radius: 10px; padding: 9px; background: #fff;
}
.ob-stream-row .ob-remove { align-self: center; margin-top: 18px; }
.ob-stream-row.ob-stream-row-4 { grid-template-columns: repeat(4, 1fr); align-items: start; }
.ob-field-error input { border-color: var(--red); }
.ob-field-note { display: block; color: var(--red); font-size: 11px; margin-top: 4px; }

/* ---- Facility operating schedule ---- */
.ob-schedule { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.ob-day-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ob-day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ob-day-grid .ob-day {
    display: block; margin: 0; padding: 8px 4px; text-align: center; cursor: pointer;
    border: 1.5px solid var(--bdr); border-radius: 8px; background: #fff;
    font-size: 12px; font-weight: 700; color: #334155;
}
.ob-day-grid .ob-day.active { border-color: var(--green); background: var(--gw); color: var(--green); }
.ob-day-grid .ob-day input { display: none; }
.ob-time-range { display: flex; align-items: center; gap: 8px; }
.ob-time-range span { color: var(--muted); }

@media (max-width: 900px) {
    .ob-schedule { grid-template-columns: 1fr; }
    .ob-stream-row.ob-stream-row-4 { grid-template-columns: 1fr 1fr; }
    .ob-day-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Driver card ---- */
.ob-driver {
    background: #fff; border: 1px solid var(--bdr); border-radius: 10px;
    padding: 15px; margin-top: 10px;
}
.ob-driver-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ob-driver-head strong { font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* ---- Estimate table ---- */
.ob-estimate-wrap { overflow: auto; border: 1px solid #dfe9ed; border-radius: 10px; }
.ob-estimate { width: 100%; border-collapse: collapse; min-width: 640px; }
.ob-estimate th {
    background: #f2f7f8; color: #536b76; font-size: 11px;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 11px 12px; text-align: start;
}
.ob-estimate td { padding: 12px; border-top: 1px solid #e8eff2; font-size: 12.5px; }
.ob-estimate .money { text-align: end; white-space: nowrap; font-weight: 900; }
.ob-estimate-total {
    display: flex; justify-content: flex-end; align-items: center; gap: 14px;
    border-top: 2px solid #c9dce2; padding: 12px; background: #f7fbfb;
}
.ob-estimate-total strong { font-size: 16.5px; color: #176a5c; }

/* ---- Summary cards ---- */
.ob-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ob-summary {
    border: 1px solid var(--bdr); border-radius: 10px; background: #fff;
    padding: 15px; min-height: 108px;
}
.ob-summary h4 { font-size: 13px; font-weight: 900; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.ob-summary h4 i { color: var(--gl); }
.ob-summary-row {
    display: flex; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid #f1f5f9; padding: 7px 0; font-size: 12.5px;
}
.ob-summary-row:last-child { border-bottom: 0; }
.ob-summary-row span:first-child { color: var(--muted); }
.ob-summary-row span:last-child { font-weight: 800; text-align: end; }

/* ---- Agreement / contract cards ---- */
.ob-contract {
    border: 1.5px solid var(--bdr); border-radius: 10px;
    background: #fbfdfc; padding: 14px; margin-bottom: 11px; transition: .15s;
}
.ob-contract.signed { border-color: var(--gl); background: #f0fdf4; }
.ob-contract-top { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; }
.ob-book {
    width: 40px; height: 48px; border-radius: 6px;
    background: var(--green); color: #fff;
    display: grid; place-items: center; font-size: 19px; flex-shrink: 0;
}
.ob-contract h4 { font-size: 13.5px; font-weight: 900; }
.ob-contract p { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.ob-agree { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #334155; margin: 12px 0 0; }
.ob-agree input { margin-top: 2px; width: auto; height: auto; }

/* ---- Alerts ---- */
.ob-alert {
    border-radius: 10px; padding: 13px 15px; font-size: 12.5px; font-weight: 700;
    margin: 12px 0; display: flex; align-items: flex-start; gap: 10px;
}
.ob-alert.warn { border: 1px solid #FDE68A; background: #FFFBEB; color: #92400E; }
.ob-alert.ok { border: 1px solid #BBF7D0; background: #F0FDF4; color: #166534; }
.ob-alert.err { border: 1px solid #fecaca; background: #fff1f2; color: #991b1b; }

/* ---- Validation results ---- */
.ob-validation { display: grid; gap: 8px; margin-bottom: 12px; }
.ob-validation-item {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--bdr); border-radius: 9px; background: #fff;
    padding: 11px 13px; font-size: 12.5px;
}
.ob-validation-item.passed { border-color: #bbf7d0; background: #f0fdf4; }
.ob-validation-item.failed { border-color: #fecaca; background: #fff1f2; }
.ob-validation-item i { margin-top: 1px; }
.ob-validation-item.passed i { color: var(--gl); }
.ob-validation-item.failed i { color: #b91c1c; }

/* ---- Footer actions ----
   Sticky so Previous/Next stay reachable without scrolling past a very
   long step. Needs `.ob-workspace` to use `overflow: clip`, not `hidden`. */
.ob-footer {
    position: sticky; bottom: 0; z-index: 20;
    padding: 14px 24px; border-top: 1px solid var(--bdr);
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    background: #f8faf8;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, .07);
}
.ob-step-count {
    margin-inline-end: auto;
    font-size: 12.5px; font-weight: 900; color: var(--muted);
    text-transform: uppercase; letter-spacing: .4px;
}
.ob-note { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* ---- Approval / flow nodes ---- */
.ob-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 16px; }
.ob-flow-node {
    border: 1px solid var(--bdr); border-radius: 10px; background: #fff;
    padding: 12px; text-align: center;
}
.ob-flow-node.done { border-color: #bbf7d0; background: #f0fdf4; }
.ob-flow-node.active { border-color: var(--gl); background: var(--gp); }
.ob-flow-node i { font-size: 20px; color: var(--gl); display: block; margin-bottom: 6px; }
.ob-flow-node strong { font-size: 12px; display: block; }

.ob-panel { max-width: 680px; margin: 0 auto; text-align: center; }
.ob-panel-icon {
    width: 80px; height: 80px; border-radius: 12px;
    background: var(--gp); color: var(--gl);
    display: grid; place-items: center; font-size: 38px;
    margin: 0 auto 14px;
}
.ob-panel h2 { font-size: 22px; }

.ob-checklist {
    border: 1px solid var(--bdr); border-radius: 10px; background: #fff;
    text-align: start; margin: 16px auto; padding: 12px; max-width: 560px;
}
.ob-checkitem {
    display: flex; align-items: center; gap: 11px;
    border-bottom: 1px solid #f1f5f9; padding: 11px 9px; font-size: 13px;
}
.ob-checkitem:last-child { border-bottom: 0; }
.ob-checkitem i { color: var(--gl); font-size: 16px; }

/* ---- Payment ---- */
.ob-payment { max-width: 680px; margin: 0 auto; }
.ob-payment-total {
    background: var(--green); color: #fff;
    border-radius: 10px; padding: 18px;
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.ob-payment-total span { font-size: 12.5px; color: rgba(255,255,255,.78); }
.ob-payment-total strong { font-size: 27px; }

.ob-pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ob-pay-box {
    border: 1.5px solid var(--bdr); border-radius: 10px; background: #fff;
    padding: 15px; text-align: center; font-weight: 900; font-size: 12.5px; cursor: pointer;
}
.ob-pay-box.active { border-color: var(--green); background: var(--gw); }

/* ---- Success ---- */
.ob-success { max-width: 620px; margin: 0 auto; text-align: center; }
.ob-success-badge {
    width: 96px; height: 96px; border-radius: 12px;
    background: var(--green);
    display: grid; place-items: center; margin: 0 auto 16px;
    color: #fff; font-size: 46px;
}
.ob-ref-card {
    background: #fff; border: 1px solid var(--bdr); border-radius: 10px;
    padding: 14px; margin: 16px auto; max-width: 480px; text-align: start;
}
.ob-ref-no { font-family: Consolas, monospace; font-size: 16px; font-weight: 900; color: var(--gl); }

/* ---- Signature modal ---- */
.ob-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.46);
    display: grid; place-items: center; z-index: 80; padding: 18px;
}
.ob-modal {
    width: 580px; max-width: 100%; max-height: 90vh; overflow: auto;
    background: #fff; border: 1px solid var(--bdr); border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15,23,42,.28); padding: 24px;
}
.ob-modal-sm { width: 460px; }
.ob-modal h3 { font-size: 18.5px; font-weight: 900; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ob-modal p { font-size: 13px; color: #475569; line-height: 1.55; }

.ob-sig-pad {
    border: 1.5px solid var(--bdr); border-radius: 10px; overflow: hidden;
    margin-top: 12px; background: #fff; touch-action: none;
}
.ob-sig-pad canvas { width: 100%; height: 145px; display: block; touch-action: none; cursor: crosshair; }
.ob-sig-tools {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 11px; border-top: 1px solid var(--bdr);
    background: #f8fafc; font-size: 11px; color: var(--muted);
}
.ob-modal-actions { display: flex; gap: 9px; margin-top: 13px; justify-content: flex-end; }

/* ---- Toast ---- */
.ob-toast { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.ob-toast div {
    background: #0f172a; color: #fff; border-radius: 8px;
    padding: 12px 17px; font-size: 13px; font-weight: 700;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.ob-toast div.err { background: var(--red); }

/* ---- RTL ---- */
[dir="rtl"] body.beah-onboarding, [dir="rtl"] .beah-onboarding { direction: rtl; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
    .ob-role-grid { grid-template-columns: 1fr 1fr; }
    .ob-workspace { grid-template-columns: 1fr; }
    .ob-sidebar { min-height: 0; }
    .ob-steps { display: grid; grid-template-columns: repeat(2, 1fr); }
    .ob-grid, .ob-grid-3, .ob-grid-4, .ob-chip-grid, .ob-upload-grid, .ob-summary-grid { grid-template-columns: 1fr 1fr; }
    .ob-stream-row { grid-template-columns: 1fr 1fr; }
    .ob-flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .ob-shell { padding: 0 12px 24px; }
    .ob-topbar { border-radius: 0; height: auto; min-height: 60px; padding: 10px 14px; padding-inline-end: 62px; }
    .ob-close-dock { top: 9px; inset-inline-end: 12px; }
    /* No room for the decorative badge once the close button takes the corner. */
    .ob-pill { display: none; }
    .ob-grid, .ob-grid-3, .ob-grid-4, .ob-chip-grid, .ob-upload-grid, .ob-summary-grid,
    .ob-stream-row, .ob-steps, .ob-pay-methods, .ob-role-grid { grid-template-columns: 1fr; }
    .ob-role-locked { grid-template-columns: 46px 1fr; }
    .ob-role-locked-desc { display: none; }
    .ob-footer { padding: 12px 14px; }
    .ob-step-count { display: none; }
    .ob-footer .ob-btn { flex: 1; }
}


/* ---- Branch context (per place of activity) ---- */
.ob-branch-context {
    border: 1px solid var(--bdrg); border-radius: 10px;
    background: #fbfdfc; padding: 13px 14px; margin-top: 14px;
}
.ob-branch-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
    font-size: 12.5px; font-weight: 900; color: var(--green);
}
.ob-branch-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; font-weight: 800; color: var(--muted);
    background: #fff; border: 1px solid var(--bdr);
    border-radius: 999px; padding: 3px 9px;
}
.ob-branch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ob-branch-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-branch-item span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ob-branch-item strong { font-size: 12.5px; font-weight: 800; }
.ob-branch-schedule { max-width: 320px; margin: 14px 0; }
/* Two cards, so the shared three-column upload grid would leave a ragged gap. */
.ob-site-uploads { grid-template-columns: repeat(2, 1fr); }

/* ---- Per-POA activity licences ---- */
.ob-poa-licences { margin-top: 16px; border-top: 1px dashed var(--bdr); padding-top: 6px; }
.ob-licence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ob-licence-card {
    border: 1px solid var(--bdr); border-radius: 10px;
    background: #fff; padding: 13px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 11px;
}
.ob-licence-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.ob-licence-head strong { display: block; font-size: 13px; font-weight: 900; }
.ob-licence-head span { font-size: 11px; color: var(--muted); }
.ob-badge.ok { background: var(--gp); border-color: #c8e6c9; color: var(--gl); }
.ob-badge.warn { background: var(--goldp); border-color: #FDE68A; color: #92400E; }

.ob-modal-wide { width: 720px; }
.ob-licence-list { margin-top: 14px; max-height: 420px; overflow: auto; display: grid; gap: 10px; }
.ob-licence-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border: 1px solid var(--bdr); border-radius: 10px; padding: 12px; background: #fff;
}
.ob-licence-row.uploaded { border-color: var(--bdrg); background: var(--gw); }
.ob-licence-row code {
    font-size: 11px; font-weight: 800; color: var(--muted);
    background: #f1f5f9; border-radius: 5px; padding: 2px 6px; margin-inline-end: 6px;
}
.ob-licence-row strong { font-size: 13px; font-weight: 800; }
.ob-licence-row p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ob-licence-row .ob-licence-file { color: var(--gl); font-weight: 800; }
/* The row's control is a label wrapping a file input - the input itself must
   not take part in the layout. */
.ob-licence-row label { position: relative; overflow: hidden; cursor: pointer; flex-shrink: 0; }
.ob-licence-row label input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

@media (max-width: 1100px) {
    .ob-branch-grid { grid-template-columns: repeat(2, 1fr); }
    .ob-licence-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .ob-branch-grid, .ob-licence-grid { grid-template-columns: 1fr; }
}


/* ---- Step 3: contracts grouped by place of activity ---- */
.ob-poa-group {
    border: 1px solid var(--bdrg); border-radius: 12px;
    background: #fbfdfc; padding: 12px; margin-bottom: 12px;
}
.ob-poa-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.ob-poa-head strong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 900; }
.ob-poa-head strong i { color: var(--gl); }
.ob-poa-head span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ob-poa-group .ob-contract { background: #fff; }
.ob-poa-group .ob-contract:last-child { margin-bottom: 0; }

/* Pushed to the far end of the card's top row rather than setting
   space-between on the parent, which would gap cards that have no button. */
.ob-contract-view { flex-shrink: 0; align-self: flex-start; margin-inline-start: auto; }

/* ---- Published agreement text ---- */
.ob-doc-body {
    margin-top: 14px; padding: 16px;
    border: 1px solid var(--bdr); border-radius: 10px;
    background: #fff; max-height: 46vh; overflow: auto;
    font-size: 13px; line-height: 1.7;
}
.ob-doc-body[dir="rtl"] { text-align: right; }
.ob-doc-body h1, .ob-doc-body h2, .ob-doc-body h3 { font-size: 16px; font-weight: 900; margin-bottom: 8px; color: var(--green); }
.ob-doc-body p { margin-bottom: 10px; }
.ob-doc-body ul, .ob-doc-body ol { margin: 0 0 10px; padding-inline-start: 22px; }
.ob-doc-body table { width: 100%; border-collapse: collapse; }
.ob-doc-body td, .ob-doc-body th { border: 1px solid var(--bdr); padding: 6px 8px; }
.ob-doc-version { font-size: 11px; font-weight: 800; color: var(--muted); margin-inline-end: auto; align-self: center; }

/* Inline link inside an agreement line - opens the document without toggling
   the checkbox it sits in. */
.ob-linklike {
    color: var(--green); font-weight: 800; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer;
}
.ob-linklike:hover { color: var(--gl); }

/* ---- Submitting agreements ---- */
.ob-overlay.ob-loading-overlay { z-index: 90; }
.ob-loading { text-align: center; }
.ob-loading h3 { justify-content: center; }
.ob-loading-spinner {
    width: 56px; height: 56px; margin: 4px auto 16px;
    border-radius: 50%; border: 4px solid var(--gp); border-top-color: var(--green);
    animation: ob-spin .9s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ob-loading-spinner { animation-duration: 2.4s; }
}