/* Business by Experts login theme overlay */
:root {
    --cm-blue-950: #020817;
    --cm-blue-900: #06162f;
    --cm-blue-850: #08203f;
    --cm-blue-800: #0a2f58;
    --cm-blue-700: #08428c;
    --cm-blue-500: #0d75b4;
    --cm-blue-300: #75d8ff;
    --cm-amber-600: #0d518c;
    --cm-amber-500: #41c0f2;
    --cm-amber-300: #87e5ff;
    --cm-green-500: #05c679;
    --cm-white: #ffffff;
    --cm-muted: #a9bfd7;
    --cm-text: #f8fcff;
    --scene-sky-top: #010611;
    --scene-sky-mid: #05152b;
    --scene-sky-bottom: #0a2f4f;
    --scene-floor: #03101f;
}

body,
.login-app {
    background:
        radial-gradient(circle at 50% 20%, rgba(65,192,242,.12), transparent 35rem),
        radial-gradient(circle at 82% 78%, rgba(5,198,121,.08), transparent 26rem),
        #020817 !important;
}

.operations-header {
    border-bottom-color: rgba(65,192,242,.16) !important;
    background: linear-gradient(180deg, rgba(2,8,23,.95), rgba(4,18,39,.70)) !important;
}

.operations-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #08428c 18%, #41c0f2 48%, #05c679 78%, transparent);
    opacity: .82;
}

.brand-lockup {
    min-width: 0;
}

.brand-emblem {
    width: clamp(210px, 20vw, 300px) !important;
    height: 68px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.brand-emblem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.28));
}

.brand-copy {
    display: none !important;
}

.status-chip,
.icon-control,
.skip-control {
    border-color: rgba(65,192,242,.20) !important;
    background: rgba(6,28,57,.64) !important;
}

.status-dot,
.facility-status i,
.security-footer svg {
    color: #05c679 !important;
    background: #05c679 !important;
    box-shadow: 0 0 14px rgba(5,198,121,.65) !important;
}

.gate-header,
.eyebrow,
.console-brand small,
.gauge-label,
.loading-kicker,
.login-footer span:first-child {
    color: #7ddfff !important;
}

.unlock-button,
.login-button,
.dialog-primary {
    border-color: rgba(65,192,242,.62) !important;
    background: linear-gradient(112deg, #08428c 0%, #0d6fa1 58%, #0c8f8a 100%) !important;
    box-shadow: 0 14px 34px rgba(5,46,91,.34), inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

.unlock-button::before,
.login-button::before {
    background: linear-gradient(90deg, transparent, rgba(65,192,242,.50), rgba(5,198,121,.32), transparent) !important;
}

.unlock-button:hover,
.login-button:hover,
.dialog-primary:hover {
    border-color: #7ee7ff !important;
    box-shadow: 0 16px 38px rgba(65,192,242,.22), 0 0 26px rgba(5,198,121,.10) !important;
}

.dashboard-frame,
.auth-console {
    border-color: rgba(65,192,242,.24) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(65,192,242,.07), transparent 42%),
        linear-gradient(180deg, rgba(5,22,45,.96), rgba(3,14,31,.96)) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

.dashboard-frame::before,
.dashboard-frame::after,
.auth-console::before,
.auth-console::after {
    background: linear-gradient(90deg, #41c0f2, #05c679) !important;
    box-shadow: 0 0 14px rgba(65,192,242,.55) !important;
}

.console-brand {
    margin-bottom: 14px !important;
}

.console-logo {
    width: min(260px, 80%) !important;
    height: 78px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.console-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.console-brand > span:last-child {
    display: none !important;
}

.truck-brand-mark {
    display: block !important;
    left: 8% !important;
    top: 17% !important;
    width: 82% !important;
}

.truck-brand-mark img {
    width: 100% !important;
    max-height: 100px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.32)) !important;
}

.truck-brand-mark b,
.truck-brand-mark small {
    display: none !important;
}

.truck-box,
.truck-cab,
.truck-door,
.cab-nose {
    border-color: rgba(65,192,242,.38) !important;
}

.headlight,
.indicator,
.rear-light {
    background: #41c0f2 !important;
    box-shadow: 0 0 18px rgba(65,192,242,.62) !important;
}

.form-field input:focus,
.auth-console input:focus {
    border-color: #41c0f2 !important;
    box-shadow: 0 0 0 3px rgba(65,192,242,.12), 0 0 20px rgba(65,192,242,.06) !important;
}

.boot-strip span.active,
.security-footer strong,
.mini-readout b,
.bay-sign b {
    color: #05c679 !important;
}

.login-footer {
    border-top-color: rgba(65,192,242,.10) !important;
    background: rgba(2,8,20,.62) !important;
}

@media (max-width: 760px) {
    .brand-emblem {
        width: min(190px, 52vw) !important;
        height: 52px !important;
    }

    .console-logo {
        width: min(220px, 80%) !important;
        height: 64px !important;
    }
}

/* ========================================================================
   BBE Login Enhancement v2 — refined proportions + full logo palette
   ======================================================================== */
:root {
    --bbe-login-silver: #c9d7e8;
    --bbe-login-blue: #1477e6;
    --bbe-login-cyan: #41c0f2;
    --bbe-login-aqua: #3ee4e6;
    --bbe-login-green: #05c679;
}

body,
.login-app {
    background:
        radial-gradient(circle at 16% 10%, rgba(20,119,230,.14), transparent 28rem),
        radial-gradient(circle at 76% 20%, rgba(65,192,242,.09), transparent 31rem),
        radial-gradient(circle at 91% 82%, rgba(5,198,121,.085), transparent 28rem),
        linear-gradient(180deg, #010611 0%, #020b19 60%, #031223 100%) !important;
}

/* Header: compact emblem + explicit demo identity. */
.operations-header {
    min-height: 78px !important;
    padding: 10px clamp(18px, 2.4vw, 38px) !important;
    border-bottom-color: rgba(201,215,232,.13) !important;
    background:
        radial-gradient(circle at 5% 30%, rgba(20,119,230,.18), transparent 18rem),
        linear-gradient(180deg, rgba(2,8,23,.96), rgba(3,16,35,.83)) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.20) !important;
}

.operations-header::after {
    height: 2px !important;
    background: linear-gradient(90deg, #08428c 0%, #1477e6 25%, #41c0f2 50%, #3ee4e6 65%, #05c679 84%, #c9d7e8 100%) !important;
    box-shadow: 0 0 14px rgba(65,192,242,.34) !important;
}

.brand-lockup {
    gap: 11px !important;
}

.brand-emblem {
    width: 72px !important;
    height: 50px !important;
    padding: 0 !important;
    border: 1px solid rgba(201,215,232,.16) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(3,15,34,.96), rgba(8,43,80,.78)) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
    overflow: hidden !important;
}

.brand-emblem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(1.08) contrast(1.03) !important;
}

.brand-copy {
    display: grid !important;
    gap: 3px !important;
}

.brand-copy strong {
    color: #fff !important;
    font-size: clamp(15px, 1.25vw, 19px) !important;
    font-weight: 850 !important;
    letter-spacing: .03em !important;
}

.brand-copy small {
    color: #87e5ff !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

.status-chip,
.icon-control,
.skip-control {
    border-color: rgba(201,215,232,.17) !important;
    background: linear-gradient(135deg, rgba(8,66,140,.18), rgba(65,192,242,.055)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* Arrival screen: more restrained branding and brighter BBE accents. */
.arrival-copy .eyebrow {
    color: #8feaff !important;
}

.arrival-copy .eyebrow i,
.facility-status i,
.status-dot {
    background: #05c679 !important;
    box-shadow: 0 0 13px rgba(5,198,121,.55) !important;
}

.arrival-copy h1 {
    text-shadow: 0 8px 34px rgba(0,0,0,.30) !important;
}

.unlock-button,
.login-button,
.dialog-primary {
    border-color: rgba(201,215,232,.26) !important;
    background: linear-gradient(112deg, #08428c 0%, #1477e6 48%, #1699b5 73%, #079c73 100%) !important;
    box-shadow: 0 16px 38px rgba(4,45,91,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.unlock-button:hover,
.login-button:hover,
.dialog-primary:hover {
    border-color: rgba(143,234,255,.72) !important;
    box-shadow: 0 18px 42px rgba(20,119,230,.20), 0 0 24px rgba(65,192,242,.11), 0 0 32px rgba(5,198,121,.055) !important;
}

/* The full logo used on the truck is now a tight crop, so it reads clearly. */
.truck-brand-mark {
    left: 11% !important;
    top: 14% !important;
    width: 76% !important;
}

.truck-brand-mark img {
    max-height: 82px !important;
    border-radius: 5px !important;
    opacity: .96;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)) saturate(1.05) !important;
}

/* Cockpit frame: silver shell, blue/cyan edge, green status. */
.dashboard-frame {
    border: 1px solid rgba(201,215,232,.17) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(65,192,242,.075), transparent 45%),
        radial-gradient(circle at 94% 92%, rgba(5,198,121,.045), transparent 25rem),
        linear-gradient(180deg, rgba(5,22,45,.97), rgba(2,12,27,.98)) !important;
    box-shadow: 0 28px 86px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

.dashboard-frame::before,
.dashboard-frame::after,
.auth-console::before,
.auth-console::after {
    background: linear-gradient(90deg, #1477e6, #41c0f2, #05c679) !important;
    box-shadow: 0 0 14px rgba(65,192,242,.38) !important;
}

.auth-console {
    min-height: 0 !important;
    padding-top: 25px !important;
    border-color: rgba(65,192,242,.20) !important;
    background:
        linear-gradient(180deg, rgba(8,35,69,.56), rgba(2,16,35,.50)),
        radial-gradient(circle at 50% 0%, rgba(20,119,230,.10), transparent 18rem) !important;
}

/* Fix the overlapping full lockup in the form: compact mark + clear text. */
.console-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 0 13px !important;
    text-align: left !important;
}

.console-logo {
    width: 60px !important;
    height: 45px !important;
    flex: 0 0 60px !important;
    padding: 0 !important;
    border: 1px solid rgba(201,215,232,.15) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, rgba(3,15,34,.95), rgba(8,43,80,.76)) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.20) !important;
}

.console-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.console-brand > span:last-child {
    display: grid !important;
    gap: 2px !important;
}

.console-brand small {
    color: #7fe4ff !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
}

.console-brand b {
    color: #fff !important;
    font-size: 16px !important;
    letter-spacing: .02em !important;
}

.auth-console h2 {
    margin-top: 7px !important;
    color: #fff !important;
    text-shadow: 0 6px 24px rgba(0,0,0,.22) !important;
}

.console-copy {
    color: #a9bfd7 !important;
}

.boot-strip span.active,
.security-footer strong,
.mini-readout b,
.bay-sign b {
    color: #05c679 !important;
}

.boot-strip i {
    background: linear-gradient(90deg, #1477e6, #41c0f2) !important;
}

/* Gauge details: remove leftover Cargo Master gold and use silver/cyan/green. */
.gauge-needle {
    background: linear-gradient(90deg, #c9d7e8 0%, #41c0f2 70%, #ffffff 100%) !important;
    box-shadow: 0 0 12px rgba(65,192,242,.38) !important;
}

.gauge-needle::before,
.gauge-center {
    background: #41c0f2 !important;
    border-color: #c9d7e8 !important;
    box-shadow: 0 0 15px rgba(65,192,242,.50) !important;
}

.gauge-value b {
    color: #f6fbff !important;
}

.gauge-caption,
.gauge-label,
.mini-readout span,
.security-footer span {
    color: #9ab1c9 !important;
}

.form-field input:focus,
.auth-console input:focus {
    border-color: #41c0f2 !important;
    box-shadow: 0 0 0 3px rgba(65,192,242,.11), 0 0 20px rgba(20,119,230,.07) !important;
}

.form-field input {
    border-color: rgba(201,215,232,.17) !important;
    background: rgba(3,16,35,.78) !important;
}

.form-field input:hover {
    border-color: rgba(65,192,242,.28) !important;
}

.security-note {
    border-color: rgba(65,192,242,.18) !important;
    background: linear-gradient(120deg, rgba(8,66,140,.14), rgba(5,198,121,.045)) !important;
}

.login-footer {
    border-top-color: rgba(201,215,232,.10) !important;
    background: rgba(2,8,20,.70) !important;
}

.login-footer span:first-child {
    color: #7ee5ff !important;
}

@media (max-width: 980px) {
    .operations-header {
        min-height: 72px !important;
    }
    .brand-emblem {
        width: 62px !important;
        height: 45px !important;
    }
}

@media (max-width: 760px) {
    .brand-emblem {
        width: 56px !important;
        height: 42px !important;
    }
    .brand-copy strong {
        font-size: 14px !important;
    }
    .brand-copy small {
        font-size: 7px !important;
        letter-spacing: .10em !important;
    }
    .console-logo {
        width: 52px !important;
        height: 40px !important;
        flex-basis: 52px !important;
    }
}