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

/* --- KPI cards ------------------------------------------------ */
.beah-kpi-row {
    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-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-card {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid #e4ece5;
    border-left-width: 4px;
}

.beah-cc-valid { border-left-color: #2E7D32; }
.beah-cc-expiring { border-left-color: #F9A825; }
.beah-cc-expired { border-left-color: #C62828; }
.beah-cc-unknown { border-left-color: #9aa79d; }

.beah-cc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.beah-cc-expiry {
    margin-top: 6px;
    font-size: 12px;
    color: #55655a;
}

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

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

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

.beah-sidebar-logo img {
    display: block;
    height: 58px;
    width: auto;
    margin: 0 auto;
}

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

/* A reference badge makes the title taller than a plain string, which pushes a
   float:right close button onto its own line. Flex keeps them on one row. */
.beah-detail-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.beah-detail-modal .modal-title {
    flex: 1;
    margin: 0;
}

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

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

.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) ----
   The dock mirrors the shell's box so the button lands on the topbar's
   trailing corner at any width, and stays there while the page scrolls. */
.ob-close-dock {
    position: fixed; inset: 0 0 auto 0; z-index: 30;
    max-width: 1560px; margin: 0 auto; padding: 13px 24px;
    display: flex; justify-content: flex-end;
    pointer-events: none;
}

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

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

/* ---- 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; word-break: break-all; }

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

/* ---- 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 { padding: 9px 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-footer { padding: 12px 14px; }
    .ob-step-count { display: none; }
    .ob-footer .ob-btn { flex: 1; }
}