@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;500;900&display=swap');

.container{
    position: relative;
}
.resizable{
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.dashboard{
    background: #c4c4c4;
}

/* body overflow removed — it blocked the parent layout and killed mobile scroll */
.trainer_wrap{
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-right: 260px;        /* leave space for right info panel */
    transition: margin-right 0.3s ease;
}
.trainer_wrap.door-panel-hidden {
    margin-right: 0;
}
.bg{
    background: url('../img/bgs/apron.png');
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 75px;
    left: 40px;
    width: 375px;
    height: 730px;
    z-index: 100;
}

.bg.aprox_stairs{background-image: url("../img/bgs/aprox_stairs.png");}
.bg.gate{background-image: url("../img/bgs/gate.png");}
.bg.night{background-image: url("../img/bgs/night.png");}
.bg.water{background-image: url("../img/bgs/water.png");}
.bg.fire{background-image: url("../img/bgs/fire.png");}
.bg.grass{background-image: url("../img/bgs/grass.png");}
.bg.runway{background-image: url("../img/bgs/runway.png");}
.bg.ditching{background-image: url("../img/bgs/ditching.png");}
.bg.nose_gear{background-image: url("../img/bgs/nose_gear.png");}

.slide{
    background: url('../img/slider.png');
    background-position: bottom;
    background-size: cover;
    position: absolute;
    top: 247px;
    left: 107px;
    width: 275px;
    height: 500px;
    z-index: 120;
    transition: ease 1s;
}

.slide.armed{
    transform: translateY(500px);
}

.slide.deploying{
    transform: translateY(0px);
}

.slide.deployed{
    transform: rotateX(125deg) translateY(-225px);
    top:445px;
}

/* ── Alert / Feedback toast ──────────────────────────────────────────────── */
.alert-box {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    max-width: 420px;
    background: var(--color-fd-blue-4, #081433);
    border-left: 4px solid var(--color-error-2, #AB3331);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    color: #fff;
    padding: 12px 40px 12px 16px;
    z-index: 1100;
    font-family: var(--font-primary, "Work Sans", sans-serif);
}
.alert-box__icon {
    color: var(--color-error-2, #AB3331);
    font-size: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}
.alert-box__body {
    display: flex;
    align-items: flex-start;
}
.alert-box__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.alert-box__detail {
    font-size: 13px;
    color: var(--color-fd-gray-3, #cbd5e1);
    line-height: 1.4;
}
.alert-box__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--color-fd-gray-3, #cbd5e1);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.alert-box__close:hover { color: #fff; }

#big-container{
    margin: 5px auto 0 auto;
    position: relative;
    width: 500px;
    height: 820px;
    transform-origin: top center; /* needed for scale() to expand from top-center */
    overflow: hidden;
    perspective: 100px;
    flex-shrink: 0; /* prevent flex parent from crushing it */
    /* Prevents browser double-tap zoom & text-selection magnifier on touch
       without blocking JS click events (unlike touch-action: none) */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Frame */
.frame-top{
    position: absolute;
    background: url('../img/frame-top.png') no-repeat;
    background-size: contain;
    width: 500px;
    height: 112px;
    z-index: 500;
    top: 0;
}
.frame-bottom{
    position: absolute;
    background: url('../img/frame-bottom.png') no-repeat;
    background-size: contain;
    width: 500px;
    height: 101px;
    top:725px;
    z-index: 500;
}
.frame-left{
    position: absolute;
    background: url('../img/frame-left.png') no-repeat;
    background-position: left;
    background-size: contain;
    width: 95px;
    height: 616px;
    top:110px;
    left:0;
    z-index: 500;
}
.frame-right{
    position: absolute;
    background: url('../img/frame-right.png') no-repeat;
    background-position: right;
    background-size: contain;
    width: 95px;
    height: 616px;
    top: 111px;
    right:0;
    z-index: 500;
}

/* Door */
.door{
    background: url('../img/door_bg.png') no-repeat;
    background-size: contain;
    position: absolute;
    top:calc(50vh - 700px);
    z-index: 400;
    transition: ease 2s;
}
.door.closed{
    top: 75px;
    left: 89px;
    width: 323px;
    height: 675px;
}

.door.unlocked{
    top: 75px;
    left: 92px;
    width: 323px;
    height: 675px;
}

.door.open{
    top: 90px;
    left: 350px;
    width: 302px;
    height: 630px;
}

.door.loose{
    top: 90px;
    left: 325px;
    width: 302px;
    height: 630px;
}

/*  Doors Elements */
.door-elms{
    position: relative;
    width: 100%;
    min-height: 675px;
}
.support-arm .big-part{
    background: #bcbcbc;
    border:1px solid #828282;
    position: absolute;
    width: 210px;
    height: 170px;
    top:370px;
    right: 70px;
    z-index: 700;
    transition: ease 2s;
}
.support-arm.open .big-part{
    width: 86px;
}
.support-arm.loose .big-part{
    width: 100px;
}
.support-arm .top-part{
    background: #595959;
    position: absolute;
    width: 60px;
    height: 15px;
    top: 355px;
    right: 95px;
    z-index: 720;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.support-arm .gust-lock{
    background: #fff;
    border:1px solid #b5b5b5;
    position: absolute;
    width: 13px;
    height: 11px;
    top:346px;
    right: 113px;
    z-index: 710;
}
.support-arm .gust-lock.press{
    top:350px;
}

/*  Obervation Window   */
.wdw-sh{
    background: #aeaeae;
    position: absolute;
    width: 48px;
    height: 0;
    bottom:342px;
    left: 65px;
    z-index: 600;
    transition: ease 1s;
}
.wdw-sh.closed{
    height: 48px;
}
.wdw-sh-btn{
    position: absolute;
    width: 50px;
    height: 64px;
    top:278px;
    left: 65px;
    z-index: 800;
}

.lt-cabpress{
    font-size: 3px;
    text-align: center;
    padding-top: 4px;
    font-weight: bolder;
    background: #fff;
    border:1px solid #c4c4c4;
    position: absolute;
    width: 20px;
    height: 17px;
    top:315px;
    left: 67px;
    clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
}
.lt-cabpress.on{
    animation: cabpress-blinker 0.8s linear infinite;
}

.lt-slidearmed{
    font-size: 3px;
    text-align: center;
    padding-top: 1px;
    font-weight: bolder;
    background: #ececec;
    border:1px solid #c4c4c4;
    position: absolute;
    width: 18px;
    height: 8px;
    top:323px;
    left: 90px;
}
.lt-slidearmed.on{
    background:#fff;
    box-shadow: 0 0 10px 5px #fff;

}
/* Door control handle  */
.door-handle{
    position: absolute;
    width: 26px;
    height: 95px;
    top: 172px;
    left: 22px;
    z-index: 610;
}

.control-handle{
    position: absolute;
    width: 60px;
    height: 200px;
    top:190px;
    left: 70px;
    z-index: 610;
}

.control-handle .red-part {
    background: url('../img/door-handle.png') no-repeat;
    background-size: contain;
    background-position: right;
    position: absolute;
    width: 45px;
    height: 30px;
    transition: ease 1s;
}

.control-handle .metal-part {
    position: absolute;
    background: #afafaf;
    border:1px solid #898989;
    width: 7px;
    height: 140px;
    transition: ease 1s;
}

.control-handle.closed .red-part {
    top:168px;
    right: 9px;
}

.control-handle.closed .metal-part {
    top:50px;
    right: 2px;
}

.control-handle.hold .red-part {
    top:140px;
    right: 9px;
}

.control-handle.hold .metal-part {
    top:50px;
    right: 2px;
    height: 112px;
}

.control-handle.open .red-part {
    top:0px;
    right: 9px;
}
.control-handle.open .metal-part {
    top:9px;
    right: 2px;
    transform: scaleY(-1);
}

/* Sliding handle  */
.slide-arming{
    position: absolute;
    width: 22px;
    height: 45px;
    top:230px;
    left: 195px;
    z-index: 300;
}

.slide-arming .y-part {
    background: #f6f60d;
    border:1px solid #d3d304;
    background-size: contain;
    background-position: right;
    position: absolute;
    width: 20px;
    height: 15px;
    transition: ease 1s;
    z-index: 320;
}

.slide-arming .metal-part {
    border:0.5px solid;
    position: absolute;
    background: #afafaf;
    border:1px solid #898989;
    width: 6px;
    height: 25px;
    transition: ease 1s;
    z-index: 310;
}

.slide-arming.closed .y-part {
    top:35px;
    left: 2px;
}

.slide-arming.closed .metal-part {
    top:20px;
    left: 2px;
    transform: scaleY(-1);
}


.slide-arming.open .y-part {
    top:15px;
    left: 2px;
}

.slide-arming.open .metal-part {
    top:20px;
    height: 10px;
    left: 2px;
}

.slide-arming .status{
    position: absolute;
    top:2px;
    left:9px;
    text-align: center;
    font-size: 2px;
    color:#fff;
}
.slide-arming .status div{
    display: none;
    width: 11px;
    height: 8px;
    padding-top: 3px;
}

.slide-arming .armed{
    position: absolute;
    background: #d20202;
}

.slide-arming .disarmed{
    position: absolute;
    background: #1c7430;
}

.slide-arming.closed .armed{
    display: block;
}

.slide-arming.open .disarmed{
    display: block;
}

.sfty-pin{
    position: absolute;
    background: url('../img/remove.png') no-repeat;
    background-size: contain;
    width: 8px;
    height: 80px;
    transition: ease 1.2s;
    z-index: 800;
}

.sfty-pin.in{
    top:234px;
    left:219px;
}

.sfty-pin.out{
    transform: rotate(90deg);
    top:251px;
    left:212px;
}

/*  Door locking indication */
.door-locking-indicator{
    position: absolute;
    width: 21px;
    height: 12px;
    top:118px;
    left:208px;

    text-align: center;
    font-size: 3.5px;
    color:#fff;
}
.door-locking-indicator div{
    display: none;
    width: 100%;
    position: absolute;
}

.door-locking-indicator .locked{
    background: #1c7430;
}

.door-locking-indicator .unlocked{
    background: #d20202;
    top:5px;
}

.door-locking-indicator.locked .locked{
    display: block;;
}

.door-locking-indicator.unlocked .unlocked{
    display: block;;
}

/*  EXIT lights */

.exit{
    font-family: 'Overpass', sans-serif;
    position: absolute;
    background: #eaeaea;
    border: 1px solid #eaeaea;
    color: #c90c0c;
    font-weight: 900;
    z-index: 950;
}

.exit.on{
    background: #fff;
    color: #ff0000;
    box-shadow: 0 0 10px 10px #ffffff7a;
}

.exit-upper.on{
    width: 82px;
    height: 110px;
    left: 215px;
    top: 69px;
    background: linear-gradient(0deg, transparent, rgb(255 255 255) 100%);
    clip-path: polygon(34% 0, 64% 0, 100% 100%, 0 100%);
}
.exit-top{
    top: 15px;
    left: 219px;
    padding: 0 10px;
}
.exit-top span{
    display: block;
    font-size: 20px;
    line-height: 20px;
    margin-top:5px;
}

.exit-lateral{
    padding: 5px 2px;
    font-size: 10px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    top: 525px;
    left: 55px;
}

@keyframes cabpress-blinker {
    50% {
        background:#d20202;
        border:1px solid #d20202;
    }
}

/*  Fake Zones  */
.fkzone{
    position: absolute;
    z-index: 990;
    width: 28px;
    height: 28px;
}

#slide-press-gauge{
    top: 603px;
    left: 348px;
}

#slide-container{
    top:660px;
    left: 175px;
}

#drlockindi{
    top:160px;
    left:208px;
}

#upemelt{
    top: 70px;
    left: 160px;
}

#frmas-hnd-l{
    top: 215px;
    left: -25px;
}

#frmas-hnd-r{
    top: 215px;
    left: 335px;
}

/* ── Component Labels (posicionados por JS via getBoundingClientRect) ─────── */
.lb {
    position: fixed;
    white-space: nowrap;
    font-family: var(--font-primary, "Work Sans", sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    background: rgba(8, 20, 51, 0.92);
    border: 1px solid var(--color-fd-blue-3, #112151);
    border-bottom: 2px solid var(--color-fd-green-4, #a5be00);
    padding: 4px 9px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1050;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.lb.hide { opacity: 0; }

/* ============================================================
   Door Trainer — Sidebar (mirrors FAP sidebar visual style)
   ============================================================ */

/* Sidebar shell */
.door-sidebar {
    background: var(--color-fd-blue-4, #081433) !important;
    border-right-color: var(--color-fd-blue-3, #112151) !important;
    width: 280px;
}
.dashboard:has(.door-sidebar) {
    --sidebar-width: 280px;
}

/* Section header */
.door-sidebar .fap-sidebar-header {
    padding: 14px 14px 6px;
    border-bottom: 1px solid var(--color-fd-blue-3, #112151);
    margin-bottom: 4px;
}
.door-sidebar .fap-sidebar-header h6 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Accordion overrides for dark sidebar */
.door-sidebar .fap-accordion .accordion__item {
    border-bottom: 1px solid var(--color-fd-blue-3, #112151);
}
.door-sidebar .fap-accordion .accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.door-sidebar .fap-accordion .accordion__item.is-active .accordion__content {
    max-height: 500px;
}
.door-sidebar .fap-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.door-sidebar .fap-accordion-btn:hover {
    background: rgba(255,255,255,0.05);
}
.door-sidebar .fap-accordion-btn h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-fd-green-4, #a5be00);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.door-sidebar .fap-accordion-btn h6 i {
    font-size: 12px;
    opacity: 0.7;
}
.door-sidebar .fap-accordion-arrow {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    transition: transform 0.3s ease;
}
.door-sidebar .accordion__item.is-active .fap-accordion-arrow {
    transform: rotate(180deg);
}
.door-sidebar .fap-accordion-body {
    padding: 6px 14px 12px;
}

/* Control buttons (zoom, labels, emergency lights, cabin press) */
.door-ctrl-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    width: 100%;
    margin-bottom: 6px;
    user-select: none;
    box-sizing: border-box;
}
.door-ctrl-btn:last-child { margin-bottom: 0; }
.door-ctrl-btn:hover { background: rgba(255,255,255,0.11); }
.door-ctrl-btn i { font-size: 12px; opacity: 0.7; flex-shrink: 0; }
.door-ctrl-btn.active {
    background: rgba(165,190,0,0.15);
    border-color: var(--color-fd-green-4, #a5be00);
    color: var(--color-fd-green-4, #a5be00);
}
.door-ctrl-btn.active i { opacity: 1; }

/* Two-column zoom row */
.door-ctrl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
}
.door-ctrl-row .door-ctrl-btn {
    margin-bottom: 0;
    justify-content: center;
}

/* Background select */
.door-sidebar .door-select {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-fd-blue-3, #112151);
    background: var(--color-fd-blue-5, #010714);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.door-sidebar .door-select option {
    background: var(--color-fd-blue-4, #081433);
    color: #fff;
}

/* ── Component hover — cursor ────────────────────────────────────────────── */
#big-container [data-component],
#big-container [data-action] {
    cursor: pointer;
}


/* ── Cursor ring — follows pointer over interactive components ────────────── */
#door-cursor-ring {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-fd-green-4, #a5be00);
    box-shadow: 0 0 8px rgba(165,190,0,0.45);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s ease;
}
#door-cursor-ring.visible { opacity: 1; }

/* ── Hover tooltip ───────────────────────────────────────────────────────── */
#door-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: var(--color-fd-blue-4, #081433);
    border: 1px solid var(--color-fd-blue-3, #112151);
    color: #fff;
    font-family: var(--font-primary, "Work Sans", sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.12s ease;
}
#door-tooltip.visible { opacity: 1; }

/* ── Right Info Panel (fixed, right side) ────────────────────────────────── */
.door-right-panel {
    position: fixed;
    top: 70px;              /* matches HEADER_H = 70 */
    right: 0;
    bottom: 0;
    width: 260px;
    background: var(--color-fd-blue-4, #081433);
    border-left: 1px solid var(--color-fd-blue-3, #112151);
    border-top: 1px solid var(--color-fd-blue-3, #112151);
    padding: 0;
    overflow: hidden;
    z-index: 200;
    font-family: var(--font-primary, "Work Sans", sans-serif);
    box-shadow: -4px 0 16px rgba(0,0,0,0.35);
    transform: translateX(0);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.door-right-panel.hidden {
    transform: translateX(260px);
}

/* Toggle tab — always visible on left edge of panel */
.door-right-panel__tab {
    position: absolute;
    left: -28px;
    top: 20px;
    width: 28px;
    height: 56px;
    background: var(--color-fd-blue-4, #081433);
    border: 1px solid var(--color-fd-blue-3, #112151);
    border-right: none;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-fd-green-4, #a5be00);
    font-size: 14px;
    box-shadow: -3px 0 8px rgba(0,0,0,0.3);
    transition: background 0.2s;
}
.door-right-panel__tab:hover {
    background: var(--color-fd-blue-3, #112151);
}

/* Panel header */
.door-right-panel__header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-fd-green-4, #a5be00);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-fd-blue-3, #112151);
    flex-shrink: 0;
}
/* Push the icon+label left, collapse button right */
.door-right-panel__header span { flex: 1; }

/* Scrollable content area */
.door-right-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 20px;
}
.door-right-panel__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 8px;
    color: rgba(255,255,255,0.28);
    font-size: 11px;
    text-align: center;
}
.door-right-panel__placeholder i { font-size: 22px; }
.door-right-panel__content { display: none; }
.door-right-panel__comp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.door-right-panel__comp-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(165,190,0,0.12);
    border: 1px solid var(--color-fd-green-4, #a5be00);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-fd-green-4, #a5be00);
    font-size: 15px;
}
.door-right-panel__name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.door-right-panel__subtitle {
    font-size: 10px;
    color: var(--color-fd-green-4, #a5be00);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;
}
.door-right-panel__desc {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin: 0;
}
/* ── Rich HTML content inside desc ───────────────────────────────────────── */
.door-right-panel__desc img {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
    margin: 10px 0;
    border: 1px solid var(--color-fd-blue-3, #112151);
}
.door-right-panel__desc p {
    margin: 0 0 8px;
}
.door-right-panel__desc p:last-child { margin-bottom: 0; }
.door-right-panel__desc ul,
.door-right-panel__desc ol {
    margin: 6px 0 8px;
    padding-left: 18px;
}
.door-right-panel__desc li { margin-bottom: 3px; }
.door-right-panel__desc strong,
.door-right-panel__desc b {
    color: #fff;
    font-weight: 600;
}
.door-right-panel__desc .info-warn {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    background: rgba(171,51,49,0.15);
    border-left: 3px solid var(--color-error-2, #AB3331);
    border-radius: 0 4px 4px 0;
    padding: 7px 10px;
    margin: 10px 0;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
}
.door-right-panel__desc .info-warn::before {
    content: "\26A0";
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.door-right-panel__desc .info-note {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    background: rgba(165,190,0,0.1);
    border-left: 3px solid var(--color-fd-green-4, #a5be00);
    border-radius: 0 4px 4px 0;
    padding: 7px 10px;
    margin: 10px 0;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
}
.door-right-panel__desc .info-note::before {
    content: "\2139";
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Real component photos inside info panel */
.door-right-panel__desc .info-photo {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    margin: 8px 0;
    border: 1px solid var(--color-fd-blue-3, #112151);
    background: rgba(8, 20, 51, 0.6);
}
.door-right-panel__desc .info-photo--tall {
    max-height: 220px;
}

/* Panel locked (user cannot choose) — tab hidden, panel always open */
.door-right-panel.locked .door-right-panel__tab {
    display: none !important;
}

/* Panel disabled — completely hidden, trainer uses full width */
.door-right-panel.disabled {
    display: none !important;
}
.trainer_wrap.door-panel-disabled {
    margin-right: 0;
}

/* Mobile */
@media (max-width: 991px) {
    .door-sidebar { width: 280px !important; }
    .dashboard:has(.door-sidebar) { --sidebar-width: 0px; }
    .door-right-panel { display: none; }
    .trainer_wrap { margin-right: 0 !important; }
}