:root {
    --bb-primary: #0d6e4f;
    --bb-primary-dark: #084732;
    --bb-primary-light: #1fa36f;
    --bb-accent: #f4b942;
    --bb-accent-soft: #fff3d6;
    --bb-gold-1: #fff8dc;
    --bb-gold-2: #ffeaa7;
    --bb-gold-3: #f4b942;
    --bb-gold-4: #d4a017;
    --bb-gold-5: #b8860b;
    --bb-bg: #dfe8e4;
    --bb-card: #ffffff;
    --bb-text: #1f2937;
    --bb-muted: #6b7280;
    --bb-menu-bg: #145a42;
    --bb-menu-bg2: #0a3d2c;
    --bb-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --bb-radius: 18px;
    --bb-header-z: 1020;
    --bb-footer-z: 1010;
    --bb-side-gap: 1cm;
    --bb-footer-h: 16px;
}

* { box-sizing: border-box; }

body.bb-body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #c8d8d0;
    color: var(--bb-text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== 3D SCENE (konten saja, header di luar agar fixed benar) ===== */
.bb-scene-3d {
    position: relative;
    min-height: 100vh;
    perspective: 1400px;
    perspective-origin: 50% 0%;
    z-index: 1;
}

.bb-bg-depth {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(31, 163, 111, 0.35) 0%, transparent 55%),
        linear-gradient(165deg, #b8cfc4 0%, #dfe8e4 35%, #c5d6cc 70%, #a8bfb3 100%);
}

.bb-bg-plane {
    position: absolute;
    border-radius: 24px;
    opacity: 0.45;
    transform-style: preserve-3d;
}

.bb-bg-plane-1 {
    width: 55%;
    height: 120px;
    left: -5%;
    top: 18%;
    background: linear-gradient(135deg, rgba(13, 110, 79, 0.12), rgba(255, 255, 255, 0.08));
    transform: rotateX(58deg) rotateZ(-8deg);
    box-shadow: 0 30px 60px rgba(8, 71, 50, 0.15);
}

.bb-bg-plane-2 {
    width: 48%;
    height: 100px;
    right: -3%;
    top: 42%;
    background: linear-gradient(135deg, rgba(244, 185, 66, 0.15), rgba(255, 255, 255, 0.06));
    transform: rotateX(62deg) rotateZ(6deg);
    box-shadow: 0 25px 50px rgba(184, 134, 11, 0.12);
}

.bb-bg-plane-3 {
    width: 70%;
    height: 80px;
    left: 15%;
    bottom: 8%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(13, 110, 79, 0.08));
    transform: rotateX(72deg);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

/* ===== FIXED HEADER — tidak ikut scroll ===== */
.bb-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--bb-header-z);
    background: transparent;
    pointer-events: none;
    transform: none;
    will-change: transform;
}

.bb-header-fixed > * {
    pointer-events: auto;
}

/* ===== FIXED FOOTER — tipis (setinggi font 12px), ukuran layar tetap saat zoom ===== */
.bb-footer-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--bb-footer-h);
    max-height: var(--bb-footer-h);
    min-height: 0;
    z-index: var(--bb-footer-z);
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(165deg, #2a8f6a 0%, #1f7a58 45%, #176b4c 100%);
    border-top: 1px solid rgba(244, 185, 66, 0.55);
    box-shadow: 0 -2px 8px rgba(8, 71, 50, 0.18);
    pointer-events: none;
    transform-origin: bottom left;
    will-change: transform;
}

.bb-footer-inner {
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0 var(--bb-side-gap);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    pointer-events: auto;
    box-sizing: border-box;
}

.bb-footer-brand {
    font-size: 12px;
    line-height: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff4c8;
    text-shadow: 0 1px 0 rgba(8, 71, 50, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Menu tunggal — logo + navigasi + logout */
.bb-menu-wrap {
    padding: 8px var(--bb-side-gap) 0;
    position: relative;
    z-index: 1002;
}

.bb-menu-stack {
    position: relative;
    padding: 5px;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--bb-gold-2) 0%, var(--bb-gold-4) 35%, var(--bb-gold-5) 70%, var(--bb-gold-3) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 -3px 0 rgba(139, 99, 8, 0.5) inset,
        0 14px 32px rgba(15, 23, 42, 0.35),
        0 6px 12px rgba(184, 134, 11, 0.35);
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    animation: bbGoldShimmer 6s ease-in-out infinite;
}

@keyframes bbGoldShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.06); }
}

.bb-menu-container {
    background: linear-gradient(165deg, #1a6b4f 0%, var(--bb-menu-bg) 40%, var(--bb-menu-bg2) 100%);
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    margin: 0;
    gap: 8px;
    overflow: visible;
    border: 2px solid rgba(255, 248, 220, 0.35);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.12) inset,
        0 -4px 0 rgba(0, 0, 0, 0.25) inset,
        0 8px 20px rgba(0, 0, 0, 0.28);
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap !important;
    min-width: 0;
    position: relative;
    z-index: 1001;
}

/* Kluster kiri: brand + slot cadangan posisi logo */
.bb-menu-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Slot di menu hanya cadangan lebar — logo sebenarnya di layer terpisah */
.bb-partner-slot {
    flex: 0 0 auto;
    width: 180px;
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}

/* Logo di dalam menu */
.bb-brand-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
}

/* ===== Layer logo mitra (terpisah dari flow menu) ===== */
.bb-partner-logos-layer {
    position: absolute;
    left: 0;
    top: 0;
    /* Di depan menu (menu ~1002) agar logo tidak tertutup pill hijau */
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 0;
    /* Sembunyikan sampai JS selesai hitung posisi — cegah geser dari pinggir */
    opacity: 0;
    visibility: hidden;
    /* Tembus klik ke menu di bawahnya (kecuali tombol Univet) */
    pointer-events: none !important;
}

.bb-partner-logos-layer .bb-partner-logos,
.bb-partner-logos-layer .bb-partner-logo {
    pointer-events: none !important;
}

/* Hanya tombol Univet yang bisa diklik */
.bb-partner-logos-layer #bbUnivetLogoBtn {
    pointer-events: auto !important;
}

.bb-partner-logos-layer.bb-partner-ready {
    opacity: 1;
    visibility: visible;
}

.bb-partner-logos-layer.bb-partner-animate .bb-partner-logos {
    animation: bbPartnerZoomIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bbPartnerZoomIn {
    from {
        opacity: 0;
        transform: scale(0.72);
        filter: blur(1px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-partner-logos-layer.bb-partner-animate .bb-partner-logos {
        animation: none;
    }
}

.bb-partner-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    pointer-events: none;
    position: relative;
    z-index: 1100;
    transform-origin: center center;
    will-change: transform, opacity;
    filter: drop-shadow(0 6px 14px rgba(8, 71, 50, 0.35));
}

.bb-partner-logo {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    display: block;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    transform: translateZ(0);
    z-index: 1100;
}

button.bb-partner-logo {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Border emas tipis elegan — tengah transparan */
.bb-partner-logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(255, 236, 170, 0.98);
    box-shadow:
        0 0 0 0.5px rgba(212, 160, 23, 0.65),
        0 0 8px 1px rgba(244, 185, 66, 0.5),
        0 0 16px 2px rgba(244, 185, 66, 0.28),
        inset 0 0 4px rgba(255, 248, 220, 0.25),
        0 8px 18px rgba(15, 23, 42, 0.28);
    z-index: 0;
    pointer-events: none;
}

/* Area logo: jarak ~0.5mm dari border, background transparan */
.bb-partner-logo-face {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 1;
}

.bb-partner-logo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.26));
}

.bb-partner-logo--univet .bb-partner-logo-ring {
    border: 1.5px solid rgba(255, 236, 170, 0.98);
    box-shadow:
        0 0 0 0.5px rgba(212, 160, 23, 0.65),
        0 0 6px 0 rgba(244, 185, 66, 0.55),
        0 0 12px 1px rgba(244, 185, 66, 0.28),
        inset 0 0 4px rgba(255, 248, 220, 0.2),
        0 4px 10px rgba(15, 23, 42, 0.18);
    animation: none;
}

.bb-partner-logo--univet .bb-partner-logo-face {
    inset: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffaf0;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        inset 0 1px 3px rgba(255, 255, 255, 0.5);
}

.bb-partner-logo--univet img {
    width: 98%;
    height: 98%;
    max-width: 98%;
    max-height: 98%;
    margin: 0 auto;
    object-fit: contain;
    object-position: center center;
    background: transparent;
    padding: 0;
    transform: translateY(-1%);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

.bb-partner-logo--dikti img {
    object-fit: contain;
    background: transparent;
    transform: scale(1.02);
    padding: 0;
}

.bb-partner-logo--univet:hover {
    transform: translateY(-1px) scale(1.03);
}

.bb-partner-logo--univet:hover .bb-partner-logo-ring {
    border-color: rgba(255, 248, 220, 1);
    animation: none;
    box-shadow:
        0 0 0 0.5px rgba(244, 185, 66, 0.85),
        0 0 8px 1px rgba(244, 185, 66, 0.65),
        0 0 14px 2px rgba(244, 185, 66, 0.35),
        inset 0 0 5px rgba(255, 248, 220, 0.28),
        0 5px 12px rgba(15, 23, 42, 0.2);
}

.bb-partner-logo--univet:hover img {
    transform: translateY(-1%);
}

.bb-partner-logo:hover {
    transform: translateY(-1px) scale(1.03);
}

.bb-partner-logo:hover .bb-partner-logo-ring {
    border-color: rgba(255, 248, 220, 1);
    box-shadow:
        0 0 0 0.5px rgba(244, 185, 66, 0.85),
        0 0 8px 1px rgba(244, 185, 66, 0.65),
        0 0 14px 2px rgba(244, 185, 66, 0.35),
        inset 0 0 5px rgba(255, 248, 220, 0.28),
        0 5px 12px rgba(15, 23, 42, 0.2);
}

button.bb-partner-logo:focus {
    outline: none;
}

button.bb-partner-logo:focus-visible {
    outline: 2px solid rgba(244, 185, 66, 0.95);
    outline-offset: 3px;
}

.bb-brand-logo-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
    border-radius: 50%;
    transition: transform .22s ease;
}

.bb-brand-logo-btn:hover,
.bb-brand-logo-btn:focus {
    transform: scale(1.04);
    outline: none;
}

.bb-brand-logo-btn:focus-visible {
    outline: 2px solid rgba(244, 185, 66, 0.95);
    outline-offset: 2px;
}

.bb-brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 1;
    min-width: 0;
    padding: 2px 2px 2px 0;
    border-radius: 999px;
    transition: background .2s;
}

.bb-brand-link:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.bb-brand-icon {
    width: clamp(40px, 4vw, 52px);
    height: clamp(40px, 4vw, 52px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* Logo BUMDes — bola 3D berputar horizontal, logo depan & belakang */
.bb-brand-logo-wrap {
    perspective: 480px;
    transform-style: preserve-3d;
}

.bb-brand-logo-scene {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.bb-brand-logo-ground-shadow {
    position: absolute;
    bottom: -4px;
    left: 12%;
    width: 76%;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.32) 0%, transparent 72%);
    z-index: 0;
    pointer-events: none;
    filter: blur(0.5px);
}

.bb-brand-logo-sphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform-style: preserve-3d;
}

.bb-brand-logo-sphere-rotator {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: bbLogoSphereSpinY 8s linear infinite;
    will-change: transform;
}

/* Permukaan bola — gradasi 3D */
.bb-brand-logo-sphere-body {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, #ffffff 0%, #f5f5f5 28%, #e4e4e4 55%, #c8c8c8 78%, #a8a8a8 100%);
    box-shadow:
        inset -6px -10px 18px rgba(0, 0, 0, 0.22),
        inset 5px 6px 14px rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
    backface-visibility: hidden;
}

.bb-brand-logo-face {
    position: absolute;
    inset: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 50%;
}

.bb-brand-logo-face--front {
    transform: rotateY(0deg) translateZ(17px);
}

.bb-brand-logo-face--back {
    transform: rotateY(180deg) translateZ(17px);
}

/* Cakram logo menempel di permukaan bola */
.bb-brand-logo-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    box-sizing: border-box;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.14),
        inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}

.bb-brand-logo-img {
    width: 100%;
    height: 100%;
    max-width: 46px;
    max-height: 46px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Kilau cahaya di atas bola (tetap, tidak ikut berputar) */
.bb-brand-logo-specular {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.25) 22%, transparent 48%);
}

.bb-brand-logo-ring {
    position: absolute;
    inset: -2px;
    z-index: 5;
    border-radius: 50%;
    border: 2px solid rgba(244, 185, 66, 0.55);
    box-shadow:
        0 0 12px rgba(244, 185, 66, 0.35),
        inset 0 0 6px rgba(255, 255, 255, 0.18);
    pointer-events: none;
    animation: bbLogoRingPulse 2.6s ease-in-out infinite;
}

.bb-brand-logo-btn:hover .bb-brand-logo-sphere-rotator {
    animation-duration: 5s;
}

.bb-brand-logo-btn:hover .bb-brand-logo-ring {
    border-color: rgba(244, 185, 66, 0.85);
    box-shadow: 0 0 18px rgba(244, 185, 66, 0.55);
}

@keyframes bbLogoSphereSpinY {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes bbLogoRingPulse {
    0%, 100% {
        opacity: 0.82;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-brand-logo-sphere-rotator,
    .bb-brand-logo-ring {
        animation: none;
    }
}

/* Modal zoom logo BUMDes */
body.bb-logo-modal-open #bbLogoModal {
    z-index: 2075 !important;
}

body.bb-logo-modal-open .modal-backdrop {
    z-index: 2070 !important;
}

.bb-logo-modal .modal-backdrop.show {
    opacity: 0.72;
}

.bb-logo-modal-dialog {
    max-width: 480px;
}

.bb-logo-modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 0 0 3px rgba(244, 185, 66, 0.55),
        0 24px 60px rgba(0, 0, 0, 0.35);
}

.bb-logo-modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(165deg, #1a6b4f 0%, var(--bb-menu-bg) 45%, var(--bb-menu-bg2) 100%);
    color: #fff;
}

.bb-logo-modal-header .modal-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.bb-logo-modal-body {
    text-align: center;
    padding: 28px 24px 24px;
    background: #ffffff;
}

.bb-logo-modal-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 0 auto 16px;
    padding: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(212, 175, 55, 0.45);
    box-shadow:
        inset 0 0 0 4px rgba(244, 185, 66, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.12);
}

.bb-logo-modal-img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    animation: bbLogoModalZoomIn .45s ease-out;
}

.bb-logo-modal-caption {
    color: var(--bb-menu-bg);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@keyframes bbLogoModalZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal situs Univet */
body.bb-univet-modal-open #bbUnivetModal {
    z-index: 2075 !important;
}

body.bb-univet-modal-open .modal-backdrop {
    z-index: 2070 !important;
}

.bb-univet-modal-dialog {
    max-width: min(96vw, 1180px);
    width: 96vw;
    margin: 1.2rem auto;
}

.bb-univet-modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 0 0 3px rgba(244, 185, 66, 0.5),
        0 24px 60px rgba(0, 0, 0, 0.38);
    height: min(88vh, 860px);
    display: flex;
    flex-direction: column;
}

.bb-univet-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(165deg, #1a6b4f 0%, var(--bb-menu-bg) 45%, var(--bb-menu-bg2) 100%);
    color: #fff;
    padding: 12px 16px;
    flex-shrink: 0;
}

.bb-univet-modal-header .modal-title {
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    line-height: 1.3;
}

.bb-univet-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bb-univet-open-tab {
    background: linear-gradient(145deg, var(--bb-gold-1), var(--bb-gold-3));
    color: #3d2e00 !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    font-weight: 700;
    padding: 4px 12px;
    white-space: nowrap;
}

.bb-univet-open-tab:hover {
    background: linear-gradient(145deg, var(--bb-gold-2), var(--bb-gold-4));
    color: #3d2e00 !important;
    text-decoration: none;
}

.bb-univet-modal-header .close {
    margin: 0;
    padding: 0 4px;
    opacity: 0.95;
    text-shadow: none;
}

.bb-univet-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    background: #f3f6f4;
}

.bb-univet-iframe-wrap {
    width: 100%;
    height: 100%;
    min-height: 520px;
    background: #fff;
}

.bb-univet-iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
    display: block;
    background: #fff;
}

.bb-brand-icon i {
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bb-brand-text strong {
    display: block;
    font-size: clamp(0.72rem, 1.05vw, 0.95rem);
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.bb-brand-text small {
    display: block;
    opacity: .82;
    font-size: clamp(0.58rem, 0.75vw, 0.68rem);
    white-space: nowrap;
}

.bb-menu-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
}

.bb-auth-user-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    max-width: 220px;
    padding: 4px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    line-height: 1.15;
}

.bb-auth-user-icon {
    opacity: 0.95;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.bb-auth-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 180px;
}

.bb-auth-user-name {
    font-size: clamp(0.72rem, 0.9vw, 0.86rem);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-auth-user-role {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.9;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-auth-logged-in,
.bb-auth-logged-out {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.bb-auth-logged-in.d-none,
.bb-auth-logged-out.d-none {
    display: none !important;
}

/* Belum login: sembunyikan tombol input/ubah/hapus & kolom Aksi */
body.bb-logged-out .bb-auth-write,
body.bb-logged-out #btnTambahAlurKerja,
body.bb-logged-out .bb-btn-tambah-akun,
body.bb-logged-out .bb-btn-save-kapasitas {
    display: none !important;
}

body.bb-logged-out th.bb-col-aksi,
body.bb-logged-out td.bb-col-aksi,
body.bb-logged-out .bb-dt-total-action {
    display: none !important;
}

#tblSettingPageUser tbody tr.bb-page-user-selected,
#tblSettingPageUser tbody tr.table-active {
    background: rgba(13, 110, 79, 0.12) !important;
}

.bb-page-edit-switch {
    cursor: pointer;
    user-select: none;
}

.bb-page-edit-switch input[disabled] {
    cursor: not-allowed;
}

.bb-btn-keluar.is-logging-out {
    pointer-events: none;
    transform: scale(1.06);
    filter: brightness(1.15);
}

.bb-logout-fx {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1200;
    overflow: visible;
}

.bb-logout-fx.is-active {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-right: -20px;
}

.bb-logout-trophy {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a4e00;
    font-size: 1.25rem;
    background: radial-gradient(circle at 35% 30%, #fff6c8 0%, #f0c14b 45%, #d4a017 100%);
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.35),
        0 8px 20px rgba(212, 160, 23, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: bbLogoutTrophyPop 0.9s ease-out forwards;
}

.bb-logout-star,
.bb-logout-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff9d6 0%, #ffd54a 55%, rgba(255, 193, 7, 0) 75%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
    animation: bbLogoutFly 0.95s ease-out forwards;
}

.bb-logout-spark {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #fff 0%, #ffe082 50%, rgba(255, 255, 255, 0) 75%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
}

.bb-auth-user-label.is-fading-out {
    opacity: 0;
    transform: translateY(-6px) scale(0.92);
    transition: opacity .35s ease, transform .35s ease;
}

.bb-btn-keluar.is-morphing {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .3s ease, transform .3s ease;
}

.bb-btn-login.is-morphing-in {
    animation: bbLoginPopIn 0.45s ease-out;
}

@keyframes bbLogoutTrophyPop {
    0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
    35% { transform: scale(1.25) rotate(8deg); opacity: 1; }
    70% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(0.3) translateY(-28px); opacity: 0; }
}

@keyframes bbLogoutFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--bb-fx-x), var(--bb-fx-y)) scale(0.15); opacity: 0; }
}

@keyframes bbLoginPopIn {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.bb-btn-login {
    background: linear-gradient(145deg, #ff6b5b, #e74c3c 50%, #c0392b);
    color: #fff;
    border-radius: 50px;
    padding: clamp(6px, 0.65vw, 10px) clamp(12px, 1.2vw, 20px);
    font-weight: 700;
    font-size: clamp(0.72rem, 0.9vw, 0.9rem);
    border: 2px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    box-shadow:
        0 4px 0 #922b21,
        0 8px 18px rgba(231, 76, 60, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform .2s, filter .2s;
}

.bb-btn-login:hover,
.bb-btn-login:focus {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.bb-btn-login.is-open {
    visibility: hidden;
    pointer-events: none;
}

.bb-login-popover {
    position: absolute;
    top: -6px;
    right: -4px;
    width: min(280px, calc(100vw - 24px));
    z-index: 1100;
    display: none;
}

.bb-login-popover.is-open {
    display: block;
}

.bb-login-popover-inner {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 14px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 2px #c0392b,
        0 16px 36px rgba(15, 23, 42, 0.28);
    padding: 12px 14px 14px;
}

.bb-login-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #7f1d1d;
}

.bb-login-popover-head strong {
    font-size: 0.92rem;
}

.bb-login-close {
    border: 0;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    color: #7f1d1d;
    cursor: pointer;
    padding: 0 2px;
}

.bb-btn-login-submit {
    background: linear-gradient(145deg, #ff6b5b, #e74c3c 50%, #c0392b);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    box-shadow: 0 3px 0 #922b21;
}

.bb-btn-login-submit:hover {
    color: #fff;
    filter: brightness(1.05);
}

.bb-nav-pills {
    flex: 1 1 auto;
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
    flex-wrap: nowrap !important;
    gap: 2px;
}

.bb-nav-pills .nav-item {
    flex-shrink: 1;
    min-width: 0;
}

.bb-nav-dropdown {
    position: relative;
}

.bb-nav-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    border: 2px solid transparent;
    border-radius: 18px;
    background:
        linear-gradient(#fff, #f8fafc) padding-box,
        linear-gradient(135deg, var(--bb-gold-2), var(--bb-gold-4), var(--bb-gold-3)) border-box;
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.22),
        0 8px 0 rgba(184, 134, 11, 0.15);
    padding: 10px;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1050;
}

.bb-nav-dropdown.show .dropdown-menu {
    display: block !important;
}

.bb-nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 22px;
    padding: clamp(6px, 0.7vw, 10px) clamp(8px, 1vw, 16px);
    font-weight: 700;
    font-size: clamp(0.72rem, 0.95vw, 0.92rem);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(34px, 3.6vw, 44px);
    transition: transform .2s, box-shadow .2s, background .2s;
    white-space: nowrap;
    border: 1px solid transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1002;
    pointer-events: auto;
}

.bb-nav-pills .nav-link:hover,
.bb-nav-pills .nav-link:focus {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.bb-nav-pills .nav-link.active {
    background: linear-gradient(145deg, var(--bb-gold-1) 0%, var(--bb-gold-3) 45%, var(--bb-gold-4) 100%) !important;
    color: #3d2e00 !important;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 4px 0 var(--bb-gold-5),
        0 8px 20px rgba(184, 134, 11, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    text-shadow: none;
}

.bb-nav-pills .dropdown-toggle::after {
    margin-left: 6px;
}

.bb-dropdown-menu .dropdown-header {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bb-muted);
    font-weight: 700;
}

.bb-dropdown-menu .dropdown-item {
    border-radius: 12px;
    padding: 10px 12px;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bb-dropdown-menu .dropdown-item:hover,
.bb-dropdown-menu .dropdown-item:focus {
    background: #ecfdf5;
    color: var(--bb-primary-dark);
}

.bb-dropdown-menu .dropdown-item.active {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-dark));
    color: #fff;
}

.bb-sop-image-block .bb-sop-doc-image {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
}

.bb-sop-dropdown-menu {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    min-width: 320px;
}

.bb-sop-code {
    font-size: .72rem;
    font-weight: 700;
    opacity: .85;
}

.bb-sop-title {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
}

.bb-btn-keluar {
    background: linear-gradient(145deg, #ff6b5b, #e74c3c 50%, #c0392b);
    color: #fff;
    border-radius: 50px;
    padding: clamp(6px, 0.65vw, 10px) clamp(12px, 1.2vw, 20px);
    font-weight: 700;
    font-size: clamp(0.72rem, 0.9vw, 0.9rem);
    border: 2px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    box-shadow:
        0 4px 0 #922b21,
        0 8px 18px rgba(231, 76, 60, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform .2s, filter .2s;
}

.bb-btn-keluar:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Submenu — bagian header fixed, 1cm kiri kanan */
.bb-submenu-bar {
    padding: 6px var(--bb-side-gap) 4px;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
}

.bb-submenu-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7f5 100%);
    border-radius: 20px;
    padding: 10px 14px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 2px rgba(212, 160, 23, 0.45),
        0 10px 28px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bb-submenu-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.bb-submenu-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 18px;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f0f4f2);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--bb-text);
    text-decoration: none;
    min-width: 190px;
    max-width: 280px;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 3px 0 rgba(15, 23, 42, 0.06);
}

.bb-submenu-item:hover {
    text-decoration: none;
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    border-color: rgba(13, 110, 79, 0.25);
    color: var(--bb-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(13, 110, 79, 0.15);
}

.bb-submenu-item.active {
    background: linear-gradient(145deg, var(--bb-primary-light), var(--bb-primary-dark));
    border-color: var(--bb-gold-3);
    color: #fff;
    box-shadow:
        0 4px 0 rgba(5, 38, 28, 0.4),
        0 10px 24px rgba(13, 110, 79, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.bb-submenu-num {
    font-size: .72rem;
    font-weight: 700;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bb-submenu-label {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
}

.bb-header-spacer {
    height: 88px;
    position: relative;
    z-index: 0;
    flex-shrink: 0;
}

/* Halaman subnav: spacer dari JS = batas bawah panel submenu + ~2px */
body.bb-has-subnav {
    --bb-subnav-gap: 2px;
}

body.bb-has-subnav .bb-header-spacer {
    height: 0;
    min-height: 0;
}

/* Halaman dengan submenu scroll — konten mepet ke garis bawah menu */
body.bb-sop-page .bb-page-head,
body.bb-dok-tambahan-page .bb-page-head,
body.bb-alur-page .bb-page-head,
body.bb-akun-page .bb-page-head,
body.bb-has-subnav .bb-page-head {
    display: none;
}

body.bb-sop-page .bb-content-stage,
body.bb-dok-tambahan-page .bb-content-stage,
body.bb-alur-page .bb-content-stage,
body.bb-akun-page .bb-content-stage,
body.bb-has-subnav .bb-content-stage {
    margin-top: 0;
    padding: clamp(14px, 1.5vw, 22px) clamp(8px, 1vw, 14px) clamp(18px, 2vw, 24px);
}

body.bb-sop-page .bb-main,
body.bb-dok-tambahan-page .bb-main,
body.bb-alur-page .bb-main,
body.bb-akun-page .bb-main,
body.bb-has-subnav .bb-main {
    padding-left: var(--bb-sop-side-gap);
    padding-right: var(--bb-sop-side-gap);
}

body.bb-sop-page .bb-submenu-bar,
body.bb-dok-tambahan-page .bb-submenu-bar,
body.bb-alur-page .bb-submenu-bar,
body.bb-akun-page .bb-submenu-bar,
body.bb-has-subnav .bb-submenu-bar {
    padding-top: 4px;
    padding-bottom: 0;
}

/* ===== CONTENT — hanya area ini yang scroll ===== */
.bb-layer-back {
    position: relative;
    z-index: 1;
}

.bb-main {
    min-width: 0;
    padding: 0 var(--bb-side-gap) calc(28px + var(--bb-footer-h));
}

.bb-content-stage {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
    border-radius: 24px;
    padding: 22px 22px 28px;
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 0 1px rgba(13, 110, 79, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -2px 0 rgba(15, 23, 42, 0.04) inset,
        0 20px 50px rgba(15, 23, 42, 0.12),
        0 8px 0 rgba(184, 134, 11, 0.08);
}

.bb-content-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, transparent, var(--bb-gold-3), var(--bb-gold-1), var(--bb-gold-4), transparent);
    opacity: 0.7;
}

.bb-page-head {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.bb-page-title {
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--bb-primary-dark), var(--bb-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.bb-content-inner {
    position: relative;
    z-index: 1;
}

/* ===== CARDS & CONTENT ===== */
.bb-card {
    background: var(--bb-card);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--bb-radius);
    box-shadow:
        0 4px 0 rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}

.bb-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 rgba(15, 23, 42, 0.05),
        0 14px 32px rgba(15, 23, 42, 0.1);
}

.bb-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(15,23,42,.06);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #fafcfb 0%, #fff 100%);
}

.bb-card-body { padding: 22px; }

.bb-btn-primary {
    background: linear-gradient(145deg, var(--bb-primary-light), var(--bb-primary-dark));
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    box-shadow: 0 3px 0 rgba(5, 38, 28, 0.35);
}

.bb-btn-primary:hover {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.bb-btn-accent {
    background: linear-gradient(145deg, var(--bb-gold-2), var(--bb-gold-4));
    border: none;
    color: #3d2e00;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 700;
    box-shadow: 0 3px 0 var(--bb-gold-5);
}

.bb-btn-export {
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 16px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

/* ===== EXPORT PREVIEW MODAL ===== */
.bb-export-modal-dialog {
    max-width: min(96vw, 1180px);
}

.bb-export-modal-body {
    background: #e5e7eb;
    min-height: 320px;
    max-height: calc(100vh - 220px);
    overflow: auto;
}

.bb-export-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    color: var(--bb-muted);
}

.bb-export-preview-container {
    padding: 16px;
}

.bb-export-modal.bb-export-type-excel .modal-header {
    background: linear-gradient(135deg, #217346, #185c37);
}

.bb-export-modal.bb-export-type-word .modal-header {
    background: linear-gradient(135deg, #2b579a, #1e3f72);
}

.bb-export-modal.bb-export-type-pdf .modal-header {
    background: linear-gradient(135deg, #c0392b, #922b21);
}

.bb-export-modal-footer {
    gap: 8px;
    flex-wrap: wrap;
}

.bb-export-modal-footer .btn {
    border-radius: 12px;
    font-weight: 600;
    min-width: 120px;
}

/* --- Excel preview --- */
.bb-xls-app {
    background: #f3f3f3;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    font-family: 'Segoe UI', Calibri, Arial, sans-serif;
}

.bb-xls-titlebar {
    background: linear-gradient(180deg, #217346, #1a5c38);
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bb-xls-titlebar i { opacity: 0.9; }

.bb-xls-ribbon {
    background: #fff;
    border-bottom: 1px solid #d4d4d4;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bb-xls-ribbon-tab {
    font-size: 11px;
    color: #217346;
    font-weight: 700;
    padding: 4px 10px;
    border-bottom: 2px solid #217346;
}

.bb-xls-ribbon-btn {
    font-size: 10px;
    color: #444;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
}

.bb-xls-formula-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-bottom: 1px solid #d4d4d4;
    padding: 4px 10px;
    font-size: 11px;
}

.bb-xls-formula-bar .bb-xls-cell-ref {
    min-width: 48px;
    text-align: center;
    background: #f3f3f3;
    border: 1px solid #ccc;
    padding: 2px 6px;
    font-weight: 600;
}

.bb-xls-formula-bar .bb-xls-fx {
    color: #217346;
    font-weight: 700;
}

.bb-xls-sheet-wrap {
    overflow: auto;
    max-height: 52vh;
    background: #e8e8e8;
    padding: 12px;
}

.bb-xls-grid {
    border-collapse: collapse;
    background: #fff;
    font-size: 11px;
    min-width: 100%;
}

.bb-xls-grid th,
.bb-xls-grid td {
    border: 1px solid #d0d0d0;
    padding: 4px 8px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bb-xls-grid .bb-xls-corner,
.bb-xls-grid .bb-xls-row-num,
.bb-xls-grid .bb-xls-col-letter {
    background: #f3f3f3;
    color: #666;
    text-align: center;
    font-weight: 600;
    min-width: 36px;
}

.bb-xls-grid .bb-xls-header-row td {
    background: #e2efda;
    color: #1f4e2d;
    font-weight: 700;
}

.bb-xls-grid .bb-xls-data-cell {
    white-space: normal;
    word-break: break-word;
    min-width: 80px;
    max-width: 200px;
    background: #fff;
    color: #1f2937;
}

.bb-word-table th,
.bb-word-table td {
    white-space: normal;
    word-break: break-word;
}

.bb-export-modal .bb-export-modal-body {
    padding: 0 !important;
    background: #e5e7eb;
}

.bb-xls-grid .bb-xls-data-row:nth-child(even) td.bb-xls-data-cell {
    background: #fafafa;
}

.bb-xls-statusbar {
    background: #217346;
    color: #fff;
    font-size: 11px;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
}

/* --- Word preview --- */
.bb-word-app {
    background: #ededed;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
}

.bb-word-titlebar {
    background: linear-gradient(180deg, #2b579a, #1e3f72);
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bb-word-ribbon {
    background: #fff;
    border-bottom: 1px solid #d4d4d4;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bb-word-ribbon-tab {
    font-size: 11px;
    color: #2b579a;
    font-weight: 700;
    padding: 4px 10px;
    border-bottom: 2px solid #2b579a;
}

.bb-word-ribbon-btn {
    font-size: 10px;
    color: #444;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
}

.bb-word-page-wrap {
    background: #bdbdbd;
    padding: 24px 16px 32px;
    overflow: auto;
    max-height: 52vh;
}

.bb-word-page {
    background: #fff;
    width: min(100%, 820px);
    min-height: 480px;
    margin: 0 auto;
    padding: 56px 64px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    color: #1f2937;
}

.bb-word-page h1 {
    font-family: Calibri, 'Segoe UI', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #0d6e4f;
    margin-bottom: 8px;
}

.bb-word-page .bb-word-meta {
    font-size: 11px;
    color: #666;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

.bb-word-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
}

.bb-word-table th,
.bb-word-table td {
    border: 1px solid #999;
    padding: 6px 8px;
    vertical-align: top;
}

.bb-word-table th {
    background: #ecfdf5;
    color: #084732;
    font-weight: 700;
}

.bb-word-table tbody tr:nth-child(even) td {
    background: #fafafa;
}

/* --- PDF preview --- */
.bb-pdf-app {
    background: #525659;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
}

.bb-pdf-toolbar {
    background: linear-gradient(180deg, #3d4043, #2b2d30);
    color: #e8eaed;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.bb-pdf-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bb-pdf-toolbar-left i.fa-file-pdf {
    color: #e74c3c;
    font-size: 18px;
}

.bb-pdf-toolbar-badge {
    background: rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
}

.bb-pdf-page-wrap {
    padding: 24px 16px 32px;
    overflow: auto;
    max-height: 52vh;
}

.bb-pdf-page {
    background: #fff;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 28px 32px;
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.bb-pdf-page-header h2 {
    color: var(--bb-primary-dark);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.bb-pdf-page-header .bb-pdf-meta {
    font-size: 11px;
    color: #666;
    margin-bottom: 16px;
}

.bb-pdf-table-wrap {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.04);
    overflow: auto;
}

.bb-pdf-table-wrap table {
    margin-bottom: 0;
    min-width: 100%;
    font-size: 12px;
}

.bb-pdf-table-wrap thead th {
    background: #ecfdf5;
    color: var(--bb-primary-dark);
    white-space: nowrap;
    vertical-align: middle;
    border-color: #bde5d4;
}

.bb-pdf-table-wrap tbody td {
    vertical-align: top;
}

.bb-pdf-table-wrap tbody tr:hover td {
    background: #f0fdf8;
}

@media print {
    body.bb-print-export * {
        visibility: hidden;
    }

    body.bb-print-export #bbPrintExportRoot,
    body.bb-print-export #bbPrintExportRoot * {
        visibility: visible;
    }

    body.bb-print-export #bbPrintExportRoot {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

/* ===== DASHBOARD 3D CHARTS ===== */
.bb-dashboard-charts {
    position: relative;
    z-index: 2;
}

.bb-dashboard-charts-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bb-dashboard-charts-kicker {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bb-primary);
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.bb-dashboard-charts-head h5 {
    color: var(--bb-primary-dark);
    font-weight: 800;
}

.bb-chart-panel {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background:
        linear-gradient(160deg, #dce8e4 0%, #c8d9d4 100%) padding-box,
        linear-gradient(135deg, var(--bb-gold-2), var(--bb-primary-light), var(--bb-gold-4)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    padding: 5px 5px 6px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.bb-chart-panel-main {
    min-height: 440px;
    background:
        linear-gradient(165deg, #d0e8e0 0%, #c5ddd6 55%, #d4e6de 100%) padding-box,
        linear-gradient(135deg, #1fa36f, #f4b942, #d4a017) border-box;
}

.bb-chart-panel-side {
    background:
        linear-gradient(165deg, #d8e8e2 0%, #c9ddd6 100%) padding-box,
        linear-gradient(135deg, #3498db, #1fa36f, #f4b942) border-box;
}

.bb-chart-panel-left {
    border-color: transparent;
}

.bb-chart-panel-right {
    background:
        linear-gradient(165deg, #dce6e0 0%, #cdded6 100%) padding-box,
        linear-gradient(135deg, #9b59b6, #f4b942, #1fa36f) border-box;
}

.bb-chart-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.bb-chart-panel-badge {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bb-primary-dark);
    background: rgba(236, 253, 245, 0.95);
    padding: 4px 10px;
    border-radius: 999px;
}

.bb-chart-panel-counter,
.bb-chart-panel-stat {
    font-size: .72rem;
    font-weight: 700;
    color: var(--bb-muted);
}

.bb-chart-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 300px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(165deg, #6aabbc 0%, #72b8c9 48%, #89c9d8 100%) !important;
    border: 1px solid rgba(14, 116, 144, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 18px rgba(14, 116, 144, 0.12) !important;
}

.bb-chart-stage-main {
    min-height: 340px;
}

.bb-chart-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 210px;
}

.bb-chart-stage .bb-chart-echart {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 280px;
}

.bb-chart-stage-main .bb-chart-canvas,
.bb-chart-stage-main .bb-chart-echart {
    min-height: 320px;
}

.bb-chart-stage-clay {
    background: linear-gradient(165deg, #6aabbc 0%, #72b8c9 48%, #89c9d8 100%) !important;
    border: 1px solid rgba(14, 116, 144, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 18px rgba(14, 116, 144, 0.12) !important;
    border-radius: 10px !important;
}

.bb-chart-stage-clay::before,
.bb-chart-stage-clay::after {
    display: none !important;
}

.bb-chart-stage .bb-chart-echart {
    z-index: 2;
}

.bb-chart-panel-clay {
    background:
        linear-gradient(165deg, #d0e8e0 0%, #c5ddd6 45%, #d4e6de 100%) padding-box,
        linear-gradient(135deg, #99f6e4, #c4b5fd, #fde68a) border-box;
    box-shadow:
        0 14px 0 rgba(13, 148, 136, 0.06),
        0 24px 50px rgba(91, 71, 204, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bb-dashboard-charts--modern {
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.06) 0%, rgba(99, 102, 241, 0.05) 50%, rgba(251, 191, 36, 0.04) 100%);
    border: 1px solid rgba(94, 234, 212, 0.2);
    box-shadow: 0 20px 60px rgba(13, 148, 136, 0.08);
}

.bb-dashboard-charts--modern .bb-dashboard-charts-kicker {
    background: linear-gradient(135deg, #ecfdf5, #ede9fe);
    color: #0f766e;
    border: 1px solid rgba(94, 234, 212, 0.35);
}

.bb-chart-stage-glass-dark {
    background: linear-gradient(165deg, #6aabbc 0%, #72b8c9 48%, #89c9d8 100%) !important;
    border: 1px solid rgba(14, 116, 144, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 18px rgba(14, 116, 144, 0.12) !important;
    border-radius: 10px !important;
}

.bb-chart-stage-glass-dark::before {
    display: none !important;
}

.bb-chart-glow,
.bb-chart-glow-left,
.bb-chart-glow-center,
.bb-chart-glow-right {
    display: none !important;
}

.bb-chart-panel-main.bb-chart-panel-clay {
    background:
        linear-gradient(165deg, #cce8df 0%, #c0dbd2 50%, #d0e6dc 100%) padding-box,
        linear-gradient(135deg, #2dd4bf, #818cf8, #fcd34d) border-box;
    border-width: 1px;
}

.bb-chart-carousel {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 280px;
}

.bb-chart-carousel .bb-chart-stage {
    flex: 1;
    min-width: 0;
    min-height: 280px;
}

.bb-chart-stage.is-fading {
    opacity: 0.15;
    transition: opacity 0.32s ease;
}

.bb-chart-nav {
    flex-shrink: 0;
    align-self: center;
    width: 28px;
    height: 52px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(224, 242, 254, 0.92));
    color: #0e7490;
    font-size: 0.75rem;
    box-shadow:
        0 4px 0 rgba(14, 116, 144, 0.12),
        0 6px 16px rgba(14, 116, 144, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 4;
}

.bb-chart-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(14, 116, 144, 0.14), 0 10px 22px rgba(14, 116, 144, 0.2);
    color: #155e75;
}

.bb-chart-nav:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}

.bb-chart-swipe-edge {
    position: absolute;
    top: 0;
    bottom: 28px;
    width: 22px;
    z-index: 4;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bb-chart-stage-clay:hover .bb-chart-swipe-edge {
    opacity: 1;
}

.bb-chart-swipe-prev {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent);
    border-radius: 20px 0 0 20px;
}

.bb-chart-swipe-next {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.35), transparent);
    border-radius: 0 20px 20px 0;
}

.bb-chart-swipe-zone {
    display: none;
}

.bb-chart-view-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(14, 116, 144, 0.22);
    box-shadow: 0 4px 16px rgba(14, 116, 144, 0.12);
}

.bb-chart-view-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.bb-chart-view-row-mid {
    gap: 2px;
}

.bb-chart-view-zoom {
    display: flex;
    gap: 3px;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(14, 116, 144, 0.12);
}

.bb-chart-view-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(14, 116, 144, 0.22);
    border-radius: 8px;
    background: rgba(224, 242, 254, 0.85);
    color: #0e7490;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.bb-chart-view-btn:hover {
    background: rgba(186, 230, 253, 0.95);
    color: #155e75;
}

.bb-chart-view-btn:active {
    transform: scale(0.94);
}

.bb-chart-view-btn-reset {
    background: rgba(204, 251, 241, 0.85);
    border-color: rgba(13, 148, 136, 0.25);
    color: #0f766e;
}

.bb-chart-view-btn-reset:hover {
    background: rgba(153, 246, 228, 0.95);
}

.bb-chart-stage-main .bb-chart-view-controls {
    top: 6px;
    right: 6px;
}

.bb-chart-expand-trigger::after {
    content: '\f065';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    font-size: 10px;
    color: #0e7490;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(14, 116, 144, 0.22);
    border-radius: 8px;
    padding: 4px 7px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.bb-chart-stage.bb-chart-expand-trigger::after {
    content: '\f065  Perbesar';
    font-family: 'Font Awesome 5 Free', system-ui, sans-serif;
    font-size: 9px;
    letter-spacing: 0.02em;
}

.bb-chart-expand-trigger:hover::after {
    opacity: 1;
}

.bb-chart-caption.bb-chart-expand-trigger::after {
    content: '\f065  Detail';
    top: auto;
    bottom: 6px;
    right: 8px;
    left: auto;
}

.bb-chart-expand-trigger {
    cursor: pointer;
    transition: background 0.15s ease;
}

.bb-chart-expand-trigger:hover {
    background: rgba(255, 255, 255, 0.25);
}

.bb-chart-caption.bb-chart-expand-trigger:hover {
    background: rgba(204, 251, 241, 0.35);
}

.bb-chart-caption.bb-chart-expand-trigger {
    position: relative;
    cursor: pointer;
}

.bb-chart-expand-dialog {
    max-width: min(960px, 96vw);
    width: 96vw;
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

/* Modal chart — harus di body (bukan di .bb-scene-3d) agar fixed + backdrop benar */
.bb-chart-expand-modal {
    position: fixed !important;
    inset: 0;
    z-index: 1060 !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.75rem;
}

.bb-chart-expand-modal .modal-dialog {
    margin: auto;
    pointer-events: auto;
}

.bb-chart-expand-modal .modal-content {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bb-chart-expand-modal .modal-body {
    padding: 1rem 1.25rem 1.1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.bb-chart-expand-modal .modal-header,
.bb-chart-expand-modal .modal-footer {
    flex-shrink: 0;
}

.bb-chart-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-left: 12px;
}

.bb-chart-modal-header-actions .close {
    margin: 0;
    padding: 0;
}

.bb-chart-modal-fs-btn {
    white-space: nowrap;
}

.bb-chart-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bb-chart-modal-export-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Pseudo-fullscreen — modal memenuhi layar */
.bb-chart-expand-modal.bb-chart-modal-fullscreen {
    padding: 0 !important;
}

.bb-chart-expand-modal.bb-chart-modal-fullscreen .bb-chart-expand-dialog {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
}

.bb-chart-expand-modal.bb-chart-modal-fullscreen .modal-content {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
}

.bb-chart-expand-modal.bb-chart-modal-fullscreen .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.bb-chart-expand-modal.bb-chart-modal-fullscreen .bb-chart-modal-stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 320px;
    max-height: none;
}

.bb-chart-expand-modal.bb-chart-modal-fullscreen .bb-chart-modal-stage .bb-chart-echart {
    min-height: 100%;
}

/* Native fullscreen — stage memenuhi monitor */
.bb-chart-modal-stage-native-fs,
.bb-chart-modal-stage:fullscreen,
.bb-chart-modal-stage:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
}

.bb-chart-modal-stage-native-fs .bb-chart-echart,
.bb-chart-modal-stage:fullscreen .bb-chart-echart,
.bb-chart-modal-stage:-webkit-full-screen .bb-chart-echart {
    min-height: 100vh !important;
}

.bb-chart-modal-stage-native-fs .bb-chart-view-controls {
    top: 12px;
    right: 12px;
}

/* Tombol keluar fullscreen — penting di mobile (tanpa tombol Esc) */
.bb-chart-modal-exit-fs {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 24;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 45, 42, 0.92);
    color: #ecfdf5;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bb-chart-modal-exit-fs.is-visible {
    display: inline-flex;
}

.bb-chart-modal-exit-fs:hover,
.bb-chart-modal-exit-fs:focus {
    background: rgba(13, 110, 79, 0.96);
    color: #fff;
    outline: none;
}

.bb-chart-modal-exit-fs i {
    font-size: 1rem;
}

.bb-chart-modal-stage-native-fs .bb-chart-modal-exit-fs,
.bb-chart-modal-stage:fullscreen .bb-chart-modal-exit-fs,
.bb-chart-modal-stage:-webkit-full-screen .bb-chart-modal-exit-fs {
    bottom: 24px;
    font-size: 1rem;
    padding: 12px 22px;
}

/* Tooltip chart — ukuran besar saat fullscreen */
.bb-echart-tip-lg .bb-echart-tip-title {
    font-size: 1.15rem;
    line-height: 1.4;
}

.bb-echart-tip-lg .bb-echart-tip-sub {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.bb-echart-tip-lg .bb-echart-tip-row {
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.bb-echart-tip-lg .bb-echart-tip-value {
    font-size: 1rem;
    padding: 8px 10px;
}

.bb-chart-modal-info {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.85), rgba(237, 233, 254, 0.75));
    border: 1px solid rgba(94, 234, 212, 0.25);
    font-size: 0.82rem;
    line-height: 1.45;
}

.bb-chart-modal-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--bb-primary-dark);
    margin-bottom: 4px;
}

.bb-chart-modal-stage {
    position: relative;
    min-height: 260px;
    height: min(42vh, 400px);
    border-radius: 12px;
    background: linear-gradient(165deg, #6aabbc 0%, #72b8c9 48%, #89c9d8 100%);
    border: 1px solid rgba(14, 116, 144, 0.22);
    overflow: hidden;
    flex-shrink: 0;
}

.bb-chart-modal-stage .bb-chart-echart {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px;
}

.bb-chart-modal-hint {
    text-align: center;
}

@media (max-width: 767.98px) {
    .bb-chart-expand-modal {
        padding: 0.5rem;
    }

    .bb-chart-expand-dialog {
        max-height: calc(100vh - 1rem);
        width: 100%;
    }

    .bb-chart-expand-modal .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .bb-chart-modal-stage {
        min-height: 220px;
        height: min(38vh, 320px);
    }
    .bb-chart-modal-stage .bb-chart-echart {
        min-height: 220px;
    }
}

.bb-chart-rotate-hint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0e7490;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(14, 116, 144, 0.2);
    box-shadow: 0 4px 14px rgba(14, 116, 144, 0.12);
    pointer-events: none;
    opacity: 0.92;
}

.bb-echart-tip-title {
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 6px;
    color: #fde68a;
    line-height: 1.35;
}

.bb-echart-tip-sub {
    font-size: 11px;
    opacity: 0.85;
    margin-bottom: 8px;
}

.bb-echart-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    margin-bottom: 4px;
}

.bb-echart-tip-row span {
    opacity: 0.8;
}

.bb-echart-tip-value {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    line-height: 1.45;
    word-break: break-word;
}

.bb-echart-tip-hint {
    margin-top: 8px;
    font-size: 10px;
    opacity: 0.65;
}

.bb-echart-tip-hint i {
    color: #f4b942;
    font-style: normal;
    margin-right: 4px;
}

.bb-chart-glow {
    position: absolute;
    inset: auto 10% 8%;
    height: 40%;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.55;
    pointer-events: none;
    animation: bbChartGlowPulse 3s ease-in-out infinite;
}

.bb-chart-glow-left {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.55), transparent 70%);
}

.bb-chart-glow-center {
    background: radial-gradient(circle, rgba(244, 185, 66, 0.55), rgba(31, 163, 111, 0.35), transparent 72%);
    inset: auto 5% 5%;
    height: 45%;
}

.bb-chart-glow-right {
    background: radial-gradient(circle, rgba(155, 89, 182, 0.5), transparent 70%);
}

.bb-chart-caption {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    flex-shrink: 0;
    font-size: .74rem;
    line-height: 1.35;
}

.bb-chart-caption strong {
    display: block;
    font-size: .88rem;
    color: var(--bb-primary-dark);
    line-height: 1.35;
    margin-bottom: 4px;
}

.bb-chart-nominal {
    display: inline-block;
    font-size: .76rem;
    font-weight: 800;
    color: #0f766e;
    background: rgba(204, 251, 241, 0.85);
    border: 1px solid rgba(94, 234, 212, 0.5);
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: 6px;
}

.bb-chart-caption span {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--bb-gold-5);
    margin-bottom: 4px;
}

.bb-chart-caption em {
    display: block;
    font-style: normal;
    font-size: .75rem;
    color: var(--bb-muted);
    line-height: 1.45;
}

.bb-chart-caption-center strong {
    text-align: center;
    font-size: .82rem;
}

.bb-chart-caption-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--bb-primary);
    text-decoration: none;
}

.bb-chart-caption-link:hover {
    color: var(--bb-primary-dark);
    text-decoration: none;
}

.bb-chart-progress {
    height: 3px;
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
    flex-shrink: 0;
}

.bb-chart-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bb-primary-light), var(--bb-gold-3));
}

@keyframes bbChartGlowPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 0.75; transform: scale(1.05); }
}

@media (max-width: 991.98px) {
    .bb-chart-panel {
        min-height: 380px;
    }
    .bb-chart-panel-main {
        min-height: 400px;
    }
    .bb-chart-stage {
        min-height: 260px;
    }
    .bb-chart-stage-main {
        min-height: 300px;
    }
}

.bb-hero {
    position: relative;
    min-height: 320px;
    border-radius: var(--bb-radius);
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(79, 209, 165, 0.35) 0%, transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(244, 185, 66, 0.22) 0%, transparent 38%),
        radial-gradient(circle at 20% 20%, #1fa36f 0%, #0b5d44 45%, #05261c 100%);
    color: #fff;
    margin-bottom: 24px;
    box-shadow:
        0 0 calc(40px * var(--bb-hero-glow, 0.65)) rgba(79, 209, 165, 0.35),
        0 0 calc(80px * var(--bb-hero-glow, 0.65)) rgba(31, 163, 111, 0.18),
        0 8px 0 rgba(5, 38, 28, 0.35),
        0 20px 40px rgba(8, 71, 50, 0.25);
    --bb-hero-glow: 0.65;
    animation: bbHeroPulse 4s ease-in-out infinite;
    transition: background 1.2s ease, box-shadow 1s ease;
}

.bb-hero.bb-hero-space-mode {
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 40, 90, 0.55) 0%, transparent 55%),
        radial-gradient(circle at 15% 80%, rgba(60, 20, 100, 0.25) 0%, transparent 40%),
        linear-gradient(180deg, #02040c 0%, #050818 45%, #0a1020 100%);
    box-shadow:
        0 0 calc(50px * var(--bb-hero-glow, 0.8)) rgba(80, 140, 255, 0.22),
        0 0 calc(90px * var(--bb-hero-glow, 0.8)) rgba(30, 60, 120, 0.15),
        0 8px 0 rgba(2, 4, 12, 0.6),
        0 20px 40px rgba(0, 0, 0, 0.45);
}

.bb-hero.bb-hero-space-mode .bb-hero-aurora {
    opacity: 0.35;
    background:
        radial-gradient(ellipse 50% 35% at 30% 40%, rgba(100, 160, 255, 0.2), transparent 60%),
        radial-gradient(ellipse 40% 30% at 70% 60%, rgba(140, 80, 200, 0.15), transparent 55%);
}

.bb-hero.bb-hero-space-mode .bb-hero-stars {
    opacity: 1;
}

.bb-hero-glow::before,
.bb-hero-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.bb-hero-glow::before {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 35%, rgba(244, 185, 66, 0.2) 70%, transparent);
    opacity: 0.55;
    animation: bbHeroShine 6s linear infinite;
}

.bb-hero-glow::after {
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 0 30px rgba(79, 209, 165, 0.15),
        inset 0 0 60px rgba(255, 255, 255, 0.05);
}

@keyframes bbHeroPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.05); }
}

@keyframes bbHeroShine {
    0% { transform: translateX(-30%) skewX(-12deg); opacity: 0.35; }
    50% { opacity: 0.65; }
    100% { transform: translateX(30%) skewX(-12deg); opacity: 0.35; }
}

.bb-hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(79, 209, 165, 0.25), transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 30%, rgba(244, 185, 66, 0.18), transparent 55%);
    animation: bbHeroAurora 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes bbHeroAurora {
    0% { transform: scale(1) translateX(0); opacity: 0.7; }
    100% { transform: scale(1.08) translateX(2%); opacity: 1; }
}

.bb-hero-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.65;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 72% 42%, rgba(200,220,255,0.75), transparent),
        radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 45% 88%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 18% 45%, rgba(255,240,200,0.6), transparent),
        radial-gradient(1px 1px at 62% 72%, rgba(180,210,255,0.7), transparent);
    animation: bbHeroStarsDrift 18s linear infinite;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

@keyframes bbHeroStarsDrift {
    from { transform: translateX(0); }
    to { transform: translateX(-2%); }
}

.bb-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    transition: opacity 0.6s ease;
}

.bb-hero-map-stage {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(10, 20, 40, 0.35), rgba(2, 4, 12, 0.85));
}

.bb-hero-map-zoom {
    width: 130%;
    height: 130%;
    transform: scale(0.06) rotateX(22deg);
    transform-origin: center center;
    transition: transform 0.15s linear;
    position: relative;
}

.bb-hero-map-inner {
    width: 100%;
    height: 100%;
    transform: translate(18%, 12%) scale(1.8);
    transform-origin: center center;
    transition: transform 0.15s linear;
}

.bb-hero-map-surface {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.bb-hero-map-google {
    border: 2px solid rgba(255, 255, 255, 0.12);
    transition: opacity 0.45s ease;
}

.bb-hero-map-streetview {
    opacity: 0;
    pointer-events: none;
    border: 2px solid rgba(244, 185, 66, 0.45);
    transition: opacity 0.55s ease;
    z-index: 2;
}

.bb-hero-map-streetview iframe {
    filter: saturate(1.08) contrast(1.04) brightness(1.02);
}

.bb-hero-map-street-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 3;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(8, 71, 50, 0.88);
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.bb-hero-map-surface iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(1.05) contrast(1.03);
}

.bb-hero-map-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.35;
    mix-blend-mode: overlay;
}

.bb-hero-map-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, transparent 30%, rgba(2, 4, 12, 0.45) 100%),
        linear-gradient(180deg, rgba(2, 4, 12, 0.12), transparent 25%, rgba(2, 4, 12, 0.2));
    pointer-events: none;
}

.bb-hero-flight-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    opacity: 0;
    display: none;
    pointer-events: none;
    transform: translate(-50%, -100%) scale(0.5);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}

.bb-hero-flight-pin .bb-gmaps-pin-svg {
    display: block;
    width: 52px;
    height: 78px;
}

.bb-hero-flight-pin .bb-hero-pin-pulse {
    top: 14px;
}

.bb-gmaps-pin-svg {
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.bb-gmaps-pin-svg-sm {
    flex-shrink: 0;
}

.bb-hero-place-photo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.88);
    transition: opacity 0.5s ease, transform 0.5s ease;
    width: min(520px, 82%);
}

.bb-hero-place-photo-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(234, 67, 53, 0.35);
}

.bb-hero-place-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #1a1a2e;
    overflow: hidden;
}

.bb-hero-place-photo-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.bb-hero-place-photo-caption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.bb-hero-place-photo-caption strong {
    display: block;
    font-size: 0.82rem;
    color: var(--bb-primary-dark, #0b5d44);
    line-height: 1.3;
}

.bb-hero-place-photo-caption span {
    display: block;
    font-size: 0.68rem;
    color: var(--bb-muted, #6c757d);
    margin-top: 2px;
}

.bb-hero-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%) scale(0.5);
    z-index: 4;
    opacity: 0;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bb-hero-pin-google .bb-hero-pin-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 63px;
    margin: 0 auto;
    animation: bbHeroPinBounce 1.2s ease-in-out infinite;
}

.bb-hero-pin-google .bb-hero-pin-icon .bb-gmaps-pin-svg {
    width: 42px;
    height: 63px;
}

@keyframes bbHeroPinBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.bb-hero-pin-dot {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    background: #ea4335;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(234, 67, 53, 0.55);
}

.bb-hero-pin-pulse {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 59, 59, 0.65);
    animation: bbHeroPinPulse 1.6s ease-out infinite;
}

@keyframes bbHeroPinPulse {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

.bb-hero-pin-label {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0b5d44;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.bb-hero-info-panel {
    position: absolute;
    right: 18px;
    top: 18px;
    left: 18px;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.bb-hero-info-grid {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 12px;
    align-items: stretch;
}

.bb-hero-info-photo {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 120px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.bb-hero-info-photo iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bb-hero-info-photo-street {
    min-height: 140px;
    aspect-ratio: 4 / 3;
}

.bb-hero-info-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-hero-info-photo-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(13, 110, 79, 0.88);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.bb-hero-info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bb-hero-info-card {
    background: rgba(255, 255, 255, 0.94);
    color: var(--bb-text);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
}

.bb-hero-info-card-accent {
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.96), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(244, 185, 66, 0.35);
}

.bb-hero-info-card h6 {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--bb-primary-dark);
}

.bb-hero-info-card p {
    margin: 0 0 8px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--bb-muted);
}

.bb-hero-info-list {
    margin: 0;
    padding-left: 16px;
    font-size: 0.68rem;
    line-height: 1.45;
    color: #374151;
}

.bb-hero-phase-label {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 5;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(4px);
}

.bb-hero-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 0;
}

.bb-hero-orbit-1 {
    width: 280px;
    height: 280px;
    right: -40px;
    top: -60px;
    animation: bbHeroOrbitSpin 16s linear infinite;
}

.bb-hero-orbit-2 {
    width: 180px;
    height: 180px;
    left: -30px;
    bottom: -40px;
    animation: bbHeroOrbitSpin 22s linear infinite reverse;
}

@keyframes bbHeroOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bb-hero-content {
    position: relative;
    z-index: 2;
    padding: 32px;
    max-width: 720px;
}

.bb-hero-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.bb-hero-content h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 10px;
    font-weight: 800;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.bb-hero-content p {
    opacity: .92;
    margin-bottom: 0;
    line-height: 1.6;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

.bb-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--bb-shadow);
}

.bb-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bb-video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #0f172a;
    cursor: pointer;
    display: block;
}

.bb-video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-video-facade-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: #ff0000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.bb-video-facade:hover .bb-video-facade-play {
    transform: translate(-50%, -50%) scale(1.06);
}

.bb-dashboard-charts[data-pending="1"] .bb-chart-caption strong::after {
    content: ' (memuat…)';
    font-weight: 500;
    opacity: 0.7;
}

.bb-video-now-playing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.bb-video-now-playing strong {
    font-size: 0.92rem;
    color: var(--bb-primary-dark, #0b5d44);
    line-height: 1.35;
}

.bb-video-watch-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ff0000;
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-video-watch-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 0, 0, 0.32);
    color: #fff !important;
}

.bb-video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.bb-video-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 2px solid rgba(13, 110, 79, 0.12);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bb-video-item:hover {
    border-color: rgba(13, 110, 79, 0.35);
    box-shadow: 0 6px 16px rgba(13, 110, 79, 0.12);
    transform: translateY(-1px);
}

.bb-video-item.is-active {
    border-color: var(--bb-primary, #0d6e4f);
    box-shadow: 0 0 0 1px rgba(13, 110, 79, 0.15);
    background: linear-gradient(135deg, rgba(79, 209, 165, 0.08), #fff);
}

.bb-video-item img {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.bb-video-item span {
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--bb-text, #1f2937);
}

.bb-video-item span em {
    display: block;
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--bb-primary, #0d6e4f);
    margin-bottom: 2px;
}

.bb-sop-slider .carousel-item { padding: 8px; }

.bb-sop-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 24px;
    min-height: 180px;
    border: 1px solid rgba(15,23,42,.06);
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 4px 0 rgba(15, 23, 42, 0.04);
}

.bb-sop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15,23,42,.12);
}

.bb-sop-badge {
    display: inline-block;
    background: var(--bb-accent-soft);
    color: #8a5a00;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.bb-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.72) 0%,
        rgba(212, 160, 23, 0.88) 28%,
        rgba(96, 165, 250, 0.65) 52%,
        rgba(244, 185, 66, 0.92) 78%,
        rgba(59, 130, 246, 0.7) 100%
    );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.45) inset,
        0 6px 22px rgba(37, 99, 235, 0.07),
        0 4px 16px rgba(212, 160, 23, 0.06);
}

.bb-table-wrap .dataTables_wrapper {
    background: #fff;
    border-radius: 12px;
    overflow: visible;
    padding: 0.35rem 0.5rem 0.5rem;
    max-width: 100%;
}

.bb-table-wrap .dataTables_scroll {
    width: 100% !important;
}

.bb-table-wrap .dataTables_scrollHead,
.bb-table-wrap .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.bb-table-wrap .dataTables_scrollBody {
    /* Cukup tinggi untuk ~15 baris default tanpa scroll vertikal */
    max-height: min(68vh, 680px);
}

.bb-table-wrap > table {
    background: #fff;
    border-radius: 12px;
}

.bb-table-wrap table {
    margin-bottom: 0;
    min-width: 960px;
}

/* Garis dalam — default bootstrap */
.bb-table-wrap table.table-bordered,
.bb-table-wrap table.table-bordered td,
.bb-table-wrap table.table-bordered th {
    border-color: #dee2e6 !important;
}

.bb-table-wrap table.table-bordered {
    border: 1px solid #dee2e6;
}

.bb-table-wrap thead th {
    background: #ecfdf5;
    color: var(--bb-primary-dark);
    white-space: nowrap;
    vertical-align: middle;
}

.bb-table-wrap tbody td { vertical-align: top; }

.bb-table-wrap th.bb-money-cell,
.bb-table-wrap td.bb-money-cell,
.bb-dt-totals-row td.bb-money-cell,
.bb-word-table td.bb-money-cell,
.bb-xls-data-cell.bb-money-cell,
.bb-pdf-table-wrap td.bb-money-cell,
.bb-export-total-row td.bb-money-cell {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* Koma desimal diperbesar agar mudah terbaca di tabel nominal */
.bb-money-cell .bb-dec-comma,
.bb-dt-totals-row .bb-dec-comma,
.bb-table-wrap .bb-dec-comma {
    display: inline-block;
    font-size: 1.55em;
    font-weight: 800;
    color: #0b5c42;
    line-height: 0.85;
    margin: 0 1px;
    transform: translateY(0.08em) scale(1.2);
    transform-origin: center bottom;
}

/* ===== BARIS TOTAL — di atas pagination ===== */
.bb-dt-totals-bar {
    margin: 0;
    padding: 0.45rem 0 0.35rem;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.98));
    border-top: 2px solid rgba(13, 110, 79, 0.18);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.bb-dt-totals-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bb-primary-dark);
    margin: 0 0.65rem 0.35rem;
}

.bb-dt-totals-scroll {
    overflow-x: hidden; /* ikut scroll horizontal DataTables body */
    overflow-y: hidden;
}

.bb-dt-totals-table {
    margin-bottom: 0 !important;
    background: #fff;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.bb-dt-totals-row .bb-dt-total-cell {
    background: linear-gradient(180deg, #ecfdf5, #f0fdf9) !important;
    color: var(--bb-primary-dark);
    font-size: 0.82rem;
    white-space: nowrap;
    vertical-align: middle;
    border-color: rgba(13, 110, 79, 0.15) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.45rem 0.5rem !important;
}

.bb-dt-totals-row .bb-dt-total-label {
    font-weight: 800;
}

.bb-dt-totals-row .bb-dt-total-action {
    /* lebar diset dari sync dengan kolom Aksi */
}

/* Nominal jumlah — tegas di baris data & baris total rekap */
.bb-jumlah-nominal,
.bb-total-jumlah,
.bb-akun-rekap .bb-money-cell,
.bb-dt-totals-row td.bb-money-cell,
.bb-dt-totals-row .bb-jumlah-nominal {
    font-weight: 800 !important;
    color: #0b3d2e;
}

.bb-dt-totals-row td.bb-money-cell .bb-total-jumlah {
    font-size: 1.05em;
}

/* Cell kalkulasi BEP — hover & klik crosscheck */
button.bb-calc-cell {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: help;
    width: 100%;
    border-radius: 6px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
button.bb-calc-cell:hover,
button.bb-calc-cell:focus {
    background: rgba(13, 110, 79, 0.08);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 79, 0.25);
    outline: none;
    cursor: pointer;
}
button.bb-calc-cell .bb-jumlah-nominal {
    pointer-events: none;
}

/* Modal crosscheck — harus di body (bukan .bb-scene-3d) agar klik/backdrop benar */
.bb-calc-trace-modal {
    position: fixed !important;
    inset: 0;
    z-index: 1080 !important;
    overflow: hidden !important;
    padding: 0;
}
.bb-calc-trace-modal .bb-calc-trace-dialog {
    width: min(1100px, calc(100vw - 2cm));
    max-width: min(1100px, calc(100vw - 2cm));
    margin: 1cm auto !important;
    max-height: calc(100vh - 2cm);
    height: auto;
    display: flex;
    align-items: stretch;
    pointer-events: auto;
}
.bb-calc-trace-modal .modal-content {
    width: 100%;
    max-height: calc(100vh - 2cm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}
.bb-calc-trace-modal .modal-header,
.bb-calc-trace-modal .modal-footer {
    flex-shrink: 0;
}
.bb-calc-trace-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px 22px;
}
.bb-calc-trace-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bb-calc-trace-summary {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.4fr);
    gap: 12px;
}
.bb-calc-result-card,
.bb-calc-formula,
.bb-calc-source-card {
    background: #fff;
    border: 1px solid rgba(13, 110, 79, 0.14);
    border-radius: 12px;
    padding: 12px 14px;
}
.bb-calc-result {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0b3d2e;
    line-height: 1.25;
    word-break: break-word;
}
.bb-calc-formula {
    background: #f0fdf4;
    border-left: 4px solid var(--bb-primary);
}
.bb-calc-formula-text {
    font-weight: 600;
    color: #145a42;
    word-break: break-word;
}
.bb-calc-sources-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.bb-calc-sources-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bb-calc-sources-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bb-calc-source-card {
    position: relative;
    padding-top: 16px;
    min-width: 0;
}
.bb-calc-source-card--empty {
    grid-column: 1 / -1;
}
.bb-calc-source-idx {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(13, 110, 79, 0.12);
    color: #0b3d2e;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-calc-source-name {
    font-weight: 700;
    color: #0b3d2e;
    margin-bottom: 6px;
    padding-right: 24px;
    word-break: break-word;
}
.bb-calc-source-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #145a42;
    margin-bottom: 4px;
    word-break: break-word;
}
.bb-calc-source-detail {
    font-size: 0.82rem;
    color: #6b7280;
    word-break: break-word;
}

/* ==== Editor sumber data (crosscheck) ==== */
.bb-calc-edit-wrap {
    margin-top: 16px;
    border: 1px solid rgba(13, 110, 79, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fdfb 0%, #ffffff 60%);
    padding: 16px 18px;
    box-shadow: 0 6px 20px rgba(13, 110, 79, 0.06);
}
.bb-calc-edit-head {
    margin-bottom: 12px;
}
.bb-calc-edit-title {
    font-weight: 800;
    color: #0b3d2e;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
}
.bb-calc-edit-sub {
    font-size: 0.83rem;
    color: #6b7280;
    margin-top: 2px;
}
.bb-calc-edit-sources {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.bb-calc-edit-source {
    border: 1px solid rgba(13, 110, 79, 0.14);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.bb-calc-edit-source:hover {
    border-color: rgba(13, 110, 79, 0.35);
    box-shadow: 0 4px 14px rgba(13, 110, 79, 0.08);
}
.bb-calc-edit-source-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.bb-calc-edit-source-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bb-primary, #0d6e4f);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bb-calc-edit-source-label {
    font-weight: 700;
    color: #0b3d2e;
    word-break: break-word;
}
.bb-calc-edit-chip {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    background: #fef3c7;
    border-radius: 999px;
    padding: 2px 10px;
}
.bb-calc-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.9fr);
    gap: 10px;
}
.bb-calc-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
}
.bb-calc-edit-field > span {
    font-size: 0.76rem;
    font-weight: 700;
    color: #145a42;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bb-calc-edit-hint-note {
    margin-top: 12px;
    font-size: 0.8rem;
    color: #6b7280;
    background: #f0fdf4;
    border: 1px dashed rgba(13, 110, 79, 0.28);
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1.5;
}
.bb-calc-edit-hint-note code {
    background: rgba(13, 110, 79, 0.1);
    color: #0b3d2e;
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 700;
}
.bb-calc-edit-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.bb-calc-edit-actions .bb-calc-save {
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(13, 110, 79, 0.22);
}

@media (max-width: 900px) {
    .bb-calc-trace-summary,
    .bb-calc-sources-grid--2,
    .bb-calc-sources-grid--3 {
        grid-template-columns: 1fr;
    }
    .bb-calc-edit-grid {
        grid-template-columns: 1fr;
    }
    .bb-calc-edit-actions {
        flex-direction: column-reverse;
    }
    .bb-calc-edit-actions .btn {
        width: 100%;
    }
    .bb-calc-trace-modal .bb-calc-trace-dialog {
        width: calc(100vw - 1.2cm);
        max-width: calc(100vw - 1.2cm);
        margin: 0.6cm auto !important;
        max-height: calc(100vh - 1.2cm);
    }
    .bb-calc-trace-modal .modal-content {
        max-height: calc(100vh - 1.2cm);
    }
}
/* Stacking modal global:
   backdrop < modal konten (sebelumnya backdrop 1070 di atas bb-modal 1060 → modal tidak bisa diklik)
   Modal di atas header/logo mitra (1100) agar tidak terkunci klik. */
body.modal-open .modal-backdrop,
.modal-backdrop {
    z-index: 2050 !important;
}
.bb-modal.modal,
.bb-form-modal.modal,
.bb-setting-modal.modal,
.bb-export-modal.modal,
.bb-chart-expand-modal.modal,
.modal {
    z-index: 2060 !important;
    pointer-events: auto !important;
}
body.modal-open .bb-modal.modal,
body.modal-open .bb-form-modal.modal,
body.modal-open .bb-setting-modal.modal,
body.modal-open .bb-export-modal.modal,
body.modal-open .bb-chart-expand-modal.modal,
body.modal-open .modal.show {
    z-index: 2060 !important;
    pointer-events: auto !important;
}
body.modal-open .modal.show .modal-dialog,
body.modal-open .modal.show .modal-content {
    pointer-events: auto !important;
}
/* Saat modal terbuka, layer logo/header tidak boleh menahan klik */
body.modal-open .bb-partner-logos-layer,
body.modal-open .bb-logout-fx,
body.modal-open .bb-save-overlay:not(.is-active) {
    pointer-events: none !important;
    z-index: 1040 !important;
}
/* Calc-trace lebih tinggi dari backdrop khusus */
.bb-calc-trace-modal.modal,
body.modal-open .bb-calc-trace-modal.modal {
    z-index: 2080 !important;
}
body.modal-open:has(.bb-calc-trace-modal.show) .modal-backdrop {
    z-index: 2070 !important;
}

.bb-export-total-row td,
.bb-xls-total-row td {
    background: #ecfdf5 !important;
    font-weight: 700;
}

/* ===== SETTING PAGE ===== */
.bb-setting-kalurahan-card .form-control-lg {
    font-size: 1.05rem;
    font-weight: 600;
    border-color: rgba(13, 110, 79, 0.25);
}

.bb-setting-kalurahan-form label {
    color: var(--bb-primary-dark);
}

.bb-setting-menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bb-setting-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(13, 110, 79, 0.15);
    background: linear-gradient(180deg, #fafcfb 0%, #f3f6f5 100%);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.bb-setting-menu-item:hover {
    background: #ecfdf5;
    border-color: rgba(13, 110, 79, 0.28);
}

.bb-setting-menu-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bb-setting-menu-item-box {
    font-weight: 700;
    color: var(--bb-primary-dark);
}

.bb-setting-menu-toggle {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e2e8f0;
}

.bb-setting-menu-item input:checked ~ .bb-setting-menu-toggle {
    color: #0f766e;
    background: #ccfbf1;
}

.bb-setting-menu-item input:checked ~ .bb-setting-menu-item-box {
    color: #0d6e4f;
}

@media (max-width: 767.98px) {
    .bb-setting-menu-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Modal setting — harus di body (bukan di .bb-scene-3d) agar fixed + backdrop benar */
.bb-setting-modal {
    position: fixed !important;
    inset: 0;
    z-index: 1060 !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.75rem;
}

.bb-setting-modal .modal-dialog,
.bb-setting-modal-dialog {
    margin: auto;
    pointer-events: auto;
    max-height: calc(100vh - 1.5rem);
    display: flex;
    align-items: center;
    min-height: calc(100% - 1.5rem);
}

.bb-setting-modal .modal-content {
    width: 100%;
    max-height: calc(100vh - 1.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bb-setting-modal .modal-body,
.bb-setting-modal .bb-form-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.bb-setting-modal .modal-header,
.bb-setting-modal .modal-footer,
.bb-setting-modal .bb-form-modal-header,
.bb-setting-modal .bb-form-modal-footer {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .bb-setting-modal {
        padding: 0.5rem;
    }

    .bb-setting-modal .modal-dialog,
    .bb-setting-modal-dialog {
        max-height: calc(100vh - 1rem);
        min-height: calc(100% - 1rem);
    }

    .bb-setting-modal .modal-content {
        max-height: calc(100vh - 1rem);
    }
}

/* ===== FORM MODAL — multi kolom, body scroll, footer tetap =====
   Catatan: header/body/footer dibungkus <form>, jadi form juga harus flex column
   agar overflow-y di body bekerja (termasuk saat browser zoom). */
.bb-form-modal .modal-dialog,
.bb-form-modal-dialog {
    max-width: min(980px, 96vw);
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    align-items: center;
}

.bb-form-modal .modal-content,
.bb-form-modal-content {
    width: 100%;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
}

.bb-form-modal .modal-content > form,
.bb-form-modal-content > form,
.bb-form-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    margin: 0;
}

.bb-form-modal .modal-header,
.bb-form-modal-header {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-dark));
    color: #fff;
}

.bb-form-modal-header .close {
    color: #fff;
    opacity: 0.9;
}

.bb-form-modal .modal-body,
.bb-form-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    padding: 1.1rem 1.35rem 1rem;
    background: linear-gradient(180deg, #fafbfc 0%, #f3f6f5 100%);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
}

/* Bootstrap modal-dialog-scrollable + form wrapper */
.bb-form-modal.modal .modal-dialog-scrollable,
.bb-form-modal .modal-dialog-scrollable {
    max-height: calc(100% - 2rem);
}

.bb-form-modal .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}

.bb-form-modal .modal-dialog-scrollable .modal-content > form,
.bb-form-modal .modal-dialog-scrollable .bb-form-modal-form {
    max-height: inherit;
}

.bb-form-modal .modal-dialog-scrollable .modal-body,
.bb-form-modal .modal-dialog-scrollable .bb-form-modal-body {
    overflow-y: auto !important;
}

.bb-save-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    border-radius: 0 0 12px 12px;
}

.bb-save-overlay.is-active {
    display: flex;
}

.bb-save-overlay-inner {
    text-align: center;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(13, 110, 79, 0.15);
    box-shadow: 0 12px 40px rgba(13, 110, 79, 0.12);
    min-width: 220px;
}

.bb-save-overlay-inner strong {
    display: block;
    color: var(--bb-primary-dark);
    font-size: 1rem;
    margin-top: 0.75rem;
}

.bb-save-overlay-inner span {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

.bb-save-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid rgba(13, 110, 79, 0.15);
    border-top-color: var(--bb-primary);
    animation: bbSaveSpin 0.75s linear infinite;
}

@keyframes bbSaveSpin {
    to { transform: rotate(360deg); }
}

/* Full-page schema repair (production) */
.bb-schema-repair-body {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(1200px 600px at 20% 0%, #e8f7f1 0%, #f7faf9 45%, #eef2f0 100%);
}

.bb-schema-repair-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(247, 250, 249, 0.92);
    backdrop-filter: blur(6px);
}

.bb-schema-repair-overlay.is-active {
    display: flex;
}

.bb-schema-repair-card {
    text-align: center;
    padding: 1.75rem 2.25rem;
    border-radius: 18px;
    min-width: min(92vw, 360px);
    background: linear-gradient(145deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(13, 110, 79, 0.16);
    box-shadow: 0 18px 50px rgba(13, 110, 79, 0.14);
}

.bb-schema-repair-card strong {
    display: block;
    margin-top: 0.9rem;
    color: var(--bb-primary-dark, #0b5c42);
    font-size: 1.05rem;
}

.bb-schema-repair-card span {
    display: block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.45;
}

.bb-swal-success {
    border-radius: 20px !important;
    padding: 1.5rem 1.25rem 1.25rem !important;
    border: 2px solid rgba(13, 110, 79, 0.12) !important;
    box-shadow: 0 24px 60px rgba(13, 110, 79, 0.18) !important;
}

.bb-swal-success .swal2-icon.swal2-success {
    border-color: #0d6e4f !important;
    color: #0d6e4f !important;
}

.bb-swal-success .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #0d6e4f !important;
}

.bb-swal-success .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(13, 110, 79, 0.25) !important;
}

.bb-swal-title {
    color: var(--bb-primary-dark) !important;
    font-weight: 800 !important;
}

.bb-swal-text {
    color: #475569 !important;
    font-size: 0.95rem !important;
}

.bb-swal-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.25rem !important;
}

/* Overlay proses tambah menu kustom (upload Word + generate halaman) */
.bb-custom-menu-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 20050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(8, 42, 31, 0.55);
    backdrop-filter: blur(8px);
}

.bb-custom-menu-progress-overlay.is-active {
    display: flex;
    animation: bbCmpFadeIn 0.35s ease;
}

@keyframes bbCmpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bb-custom-menu-progress-card {
    width: min(92vw, 440px);
    padding: 1.5rem 1.35rem 1.25rem;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(236, 253, 245, 0.98) 100%);
    border: 1px solid rgba(13, 110, 79, 0.18);
    box-shadow: 0 24px 70px rgba(8, 42, 31, 0.28);
    animation: bbCmpSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bbCmpSlideUp {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.bb-custom-menu-progress-hero {
    text-align: center;
    margin-bottom: 0.85rem;
}

.bb-custom-menu-progress-icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #0d6e4f, #1fa36f);
    color: #fff;
    font-size: 1.65rem;
    box-shadow: 0 10px 28px rgba(13, 110, 79, 0.35);
}

.bb-custom-menu-progress-orbit {
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    border: 2px solid transparent;
    border-top-color: rgba(13, 110, 79, 0.85);
    border-right-color: rgba(31, 163, 111, 0.35);
    animation: bbSaveSpin 1.1s linear infinite;
}

.bb-custom-menu-progress-hero strong {
    display: block;
    color: var(--bb-primary-dark, #0b5c42);
    font-size: 1.08rem;
    font-weight: 800;
}

.bb-custom-menu-progress-hero > span {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.4;
}

.bb-custom-menu-progress-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    background: rgba(13, 110, 79, 0.06);
    color: #334155;
    font-size: 0.8rem;
    word-break: break-all;
}

.bb-custom-menu-progress-bar-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(13, 110, 79, 0.12);
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.bb-custom-menu-progress-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0d6e4f, #2dd4a0, #0d6e4f);
    background-size: 200% 100%;
    transition: width 0.45s ease;
    animation: bbCmpBarShine 1.8s linear infinite;
}

@keyframes bbCmpBarShine {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.bb-custom-menu-progress-pct {
    text-align: center;
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bb-primary, #0d6e4f);
    letter-spacing: 0.04em;
}

.bb-custom-menu-progress-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-custom-menu-progress-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.42rem 0;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.35;
    transition: color 0.3s ease, transform 0.3s ease;
}

.bb-custom-menu-progress-steps li + li {
    border-top: 1px dashed rgba(13, 110, 79, 0.1);
}

.bb-cmp-step-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #cbd5e1;
    transition: color 0.3s ease, transform 0.3s ease;
}

.bb-custom-menu-progress-steps li.is-active {
    color: #0f766e;
    font-weight: 600;
    transform: translateX(2px);
}

.bb-custom-menu-progress-steps li.is-active .bb-cmp-step-icon {
    color: #0d6e4f;
    animation: bbCmpPulse 1.2s ease-in-out infinite;
}

.bb-custom-menu-progress-steps li.is-done {
    color: #475569;
}

.bb-custom-menu-progress-steps li.is-done .bb-cmp-step-icon {
    color: #0d6e4f;
}

@keyframes bbCmpPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.bb-swal-menu-success .bb-swal-menu-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.bb-swal-menu-success .bb-swal-menu-stat {
    flex: 1 1 40%;
    min-width: 120px;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.95));
    border: 1px solid rgba(13, 110, 79, 0.14);
    text-align: center;
}

.bb-swal-menu-success .bb-swal-menu-stat strong {
    display: block;
    font-size: 1.15rem;
    color: var(--bb-primary-dark, #0b5c42);
    line-height: 1.2;
}

.bb-swal-menu-success .bb-swal-menu-stat span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bb-swal-menu-success .bb-swal-menu-meta {
    margin-top: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: rgba(13, 110, 79, 0.06);
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.45;
}

.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #0d6e4f, #1fa36f) !important;
}

.bb-form-modal .modal-footer,
.bb-form-modal-footer {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
    padding: 0.85rem 1.25rem;
}

/* Semua modal input/setting: pastikan form di dalam modal juga bisa scroll body */
.bb-modal .modal-content > form,
.bb-setting-modal .modal-content > form,
.modal-dialog-scrollable .modal-content > form,
.bb-form-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    margin: 0;
}

.bb-modal .modal-dialog-scrollable .modal-content,
.bb-setting-modal .modal-dialog-scrollable .modal-content,
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bb-modal .modal-dialog-scrollable .modal-body,
.bb-setting-modal .modal-dialog-scrollable .modal-body,
.modal-dialog-scrollable .modal-body {
    overflow-y: auto !important;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .bb-form-modal .modal-dialog,
    .bb-form-modal-dialog {
        margin: 0.5rem auto;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .bb-form-modal .modal-content,
    .bb-form-modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
}

.bb-form-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bb-primary-dark);
    margin-bottom: 0.65rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed rgba(13, 110, 79, 0.2);
}

.bb-form-meta-hint {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: rgba(236, 253, 245, 0.75);
    border: 1px solid rgba(13, 110, 79, 0.12);
    font-size: 0.78rem;
    color: #475569;
}

.bb-date-input-group .input-group-text {
    background: #ecfdf5;
    border-color: #d1d5db;
    color: var(--bb-primary-dark);
}

.bb-form-modal .form-control:focus,
.bb-form-modal .bb-datepicker:focus {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 79, 0.12);
}

.bb-form-modal .form-control.is-invalid,
.bb-form-modal .bb-datepicker.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.12);
}

.bb-form-modal .bb-field-error {
    color: #dc3545;
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

.bb-form-modal .bb-computed-input[readonly] {
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
    cursor: default;
}

.bb-form-modal .bb-decimal-input:not([readonly]) {
    letter-spacing: 0.01em;
}

.bb-form-modal .bb-rupiah-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.bb-row-highlight {
    animation: bbRowHighlight 1.8s ease;
    background: rgba(236, 253, 245, 0.95) !important;
}

@keyframes bbRowHighlight {
    0%, 100% { background: rgba(236, 253, 245, 0.95); }
    50% { background: rgba(167, 243, 208, 0.85); }
}

.datepicker-dropdown {
    z-index: 1090 !important;
}

.modal-backdrop.show {
    opacity: 0.5;
}

body.modal-open .bb-header-fixed {
    z-index: 1010;
    pointer-events: none;
}

body.modal-open .bb-header-fixed > * {
    pointer-events: none;
}

body.modal-open .bb-moon-toggle,
body.modal-open .bb-partner-logos-layer,
body.modal-open .bb-login-popover {
    pointer-events: none !important;
}

body.modal-open .bb-nav-dropdown.show .dropdown-menu {
    display: none !important;
}

body.modal-open .bb-nav-dropdown.show {
    pointer-events: none;
}

.bb-modal .modal-content {
    border: 2px solid transparent;
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(#fff, #fafbfc) padding-box,
        linear-gradient(135deg, var(--bb-gold-2), var(--bb-gold-4)) border-box;
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
}

.bb-modal .modal-header {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-dark));
    color: #fff;
    border: none;
    padding: 18px 22px;
}

.bb-modal .modal-header .close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
}

.bb-modal .modal-body {
    padding: 22px;
    background: #fafbfc;
}

.bb-modal .form-control,
.bb-modal .custom-select {
    border-radius: 12px;
    border-color: #d1d5db;
    min-height: 44px;
}

.bb-modal .form-control:focus {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 .2rem rgba(13,110,79,.15);
}

.bb-modal .modal-footer {
    border-top: 1px solid rgba(15,23,42,.06);
    background: #fff;
}

.bb-sop-doc h3,
.bb-sop-doc h4 {
    color: var(--bb-primary-dark);
    font-weight: 700;
}

.bb-sop-doc {
    width: 100%;
    max-width: none;
}

.bb-sop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

.bb-sop-meta span {
    background: #ecfdf5;
    color: var(--bb-primary-dark);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
}

.bb-sop-toolbar .btn,
.bb-sop-toolbar label.btn {
    white-space: nowrap;
}

.bb-sop-lead {
    font-size: clamp(1.05rem, 0.45vw + 0.92rem, 1.2rem);
    font-weight: 600;
    line-height: 1.55;
    color: #0f5132;
    margin-bottom: 0.75rem;
}

.bb-sop-doc-note {
    font-size: clamp(0.8rem, 0.25vw + 0.72rem, 0.9rem);
    line-height: 1.45;
}

.bb-sop-paragraph-text {
    white-space: pre-wrap;
    text-align: justify;
}

.bb-sop-dynamic-table {
    width: 100%;
    table-layout: auto;
}

.bb-sop-dynamic-table td.bb-sop-cell {
    min-width: 72px;
    max-width: none;
    word-break: break-word;
    vertical-align: top;
}

.bb-sop-word-body {
    width: 100%;
    max-width: none;
    margin: 0;
    font-family: 'Segoe UI', Calibri, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(0.9375rem, 0.28vw + 0.86rem, 1.0625rem);
    line-height: 1.6;
}

.bb-sop-word-body .bb-sop-heading {
    color: var(--bb-primary, #0d6e4f);
    font-weight: 700;
    margin-top: 1.35rem;
    margin-bottom: 0.55rem;
    font-size: clamp(1.08rem, 0.55vw + 0.92rem, 1.32rem);
    line-height: 1.35;
}

.bb-sop-table-caption {
    color: #0f5132;
    font-weight: 600;
    font-size: clamp(1rem, 0.35vw + 0.9rem, 1.15rem);
}

.bb-sop-page-break {
    border: 0;
    border-top: 1px dashed #cbd5e1;
    margin: 1.75rem 0;
}

.bb-sop-table-block .bb-table-wrap,
.bb-sop-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bb-sop-dynamic-table {
    font-size: clamp(0.875rem, 0.22vw + 0.8rem, 0.98rem);
}

.bb-sop-dynamic-table th {
    background: #ecfdf5;
    color: #084732;
    white-space: normal;
    font-weight: 700;
    vertical-align: top;
}

.bb-sop-dynamic-table td,
.bb-sop-dynamic-table th {
    padding: 0.55rem 0.65rem;
}

/* Halaman dokumen Word — lebar penuh area konten */
body.bb-sop-page,
body.bb-dok-tambahan-page,
body.bb-alur-page,
body.bb-akun-page {
    --bb-sop-side-gap: clamp(0.35rem, 0.8vw, 0.75rem);
}

body.bb-sop-page .bb-main,
body.bb-dok-tambahan-page .bb-main,
body.bb-alur-page .bb-main,
body.bb-akun-page .bb-main {
    padding-left: var(--bb-sop-side-gap);
    padding-right: var(--bb-sop-side-gap);
}

body.bb-sop-page .bb-content-stage,
body.bb-dok-tambahan-page .bb-content-stage,
body.bb-alur-page .bb-content-stage,
body.bb-akun-page .bb-content-stage,
body.bb-has-subnav .bb-content-stage {
    padding: clamp(14px, 1.5vw, 22px) clamp(8px, 1vw, 14px) clamp(18px, 2vw, 24px);
}

body.bb-sop-page .bb-content-inner,
body.bb-dok-tambahan-page .bb-content-inner,
body.bb-alur-page .bb-content-inner,
body.bb-sop-page .bb-sop-doc,
body.bb-dok-tambahan-page .bb-sop-doc,
body.bb-alur-page .bb-sop-doc,
body.bb-sop-page .bb-sop-doc .bb-card-body,
body.bb-dok-tambahan-page .bb-sop-doc .bb-card-body,
body.bb-alur-page .bb-sop-doc .bb-card-body {
    width: 100%;
    max-width: none;
}

body.bb-sop-page .bb-sop-doc .bb-card-body,
body.bb-dok-tambahan-page .bb-sop-doc .bb-card-body,
body.bb-alur-page .bb-sop-doc .bb-card-body {
    padding: clamp(14px, 1.8vw, 22px);
}

body.bb-sop-page .bb-sop-doc .bb-card-header,
body.bb-dok-tambahan-page .bb-sop-doc .bb-card-header,
body.bb-alur-page .bb-sop-doc .bb-card-header {
    padding: clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 22px);
}

@media (min-width: 1200px) {
    body.bb-sop-page .bb-sop-grid > [class*="col-"],
    body.bb-dok-tambahan-page .bb-sop-grid > [class*="col-"] {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width: 767.98px) {
    body.bb-sop-page .bb-sop-toolbar,
    body.bb-dok-tambahan-page .bb-sop-toolbar,
    body.bb-alur-page .bb-sop-toolbar {
        width: 100%;
    }

    body.bb-sop-page .bb-sop-toolbar .btn,
    body.bb-sop-page .bb-sop-toolbar label.btn,
    body.bb-dok-tambahan-page .bb-sop-toolbar .btn,
    body.bb-dok-tambahan-page .bb-sop-toolbar label.btn,
    body.bb-alur-page .bb-sop-toolbar .btn,
    body.bb-alur-page .bb-sop-toolbar label.btn {
        flex: 1 1 auto;
        text-align: center;
    }

    body.bb-sop-page .bb-sop-dynamic-table,
    body.bb-dok-tambahan-page .bb-sop-dynamic-table,
    body.bb-alur-page .bb-sop-dynamic-table {
        font-size: 0.84rem;
    }

    body.bb-sop-page .bb-sop-word-body,
    body.bb-dok-tambahan-page .bb-sop-word-body,
    body.bb-alur-page .bb-sop-word-body {
        font-size: 0.94rem;
    }
}

.bb-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--bb-muted);
}

.bb-empty-state i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_scrollBody {
    border-bottom: 1px solid #dee2e6 !important;
}

.dataTables_wrapper .dataTables_scrollHead {
    border-bottom: 1px solid #dee2e6 !important;
}

.dt-buttons .btn {
    margin-right: 6px;
    margin-bottom: 6px;
}

/* ===== MOBILE MOON MENU TOGGLE ===== */
.bb-moon-toggle {
    display: none;
}

.bb-mobile-menu-overlay {
    display: none;
}

@media (max-width: 767.98px) {
    .bb-univet-modal-dialog {
        max-width: 100vw;
        width: 100vw;
        margin: 0.4rem;
    }

    .bb-univet-modal-content {
        height: min(92vh, 760px);
        border-radius: 14px;
    }

    .bb-univet-modal-header .modal-title {
        font-size: 0.88rem;
    }

    .bb-univet-iframe-wrap,
    .bb-univet-iframe {
        min-height: 420px;
    }
}

@media (max-width: 1399.98px) {
    .bb-brand-text small {
        display: none;
    }

    .bb-nav-pills .nav-link .mr-1,
    .bb-nav-pills .nav-link i {
        margin-right: 4px !important;
    }
}

@media (max-width: 1199.98px) {
    .bb-menu-container {
        gap: 6px;
        padding: 3px 8px 3px 3px;
    }

    .bb-nav-pills .nav-link {
        padding: 6px 8px;
        min-height: 34px;
        font-size: 0.74rem;
    }

    .bb-btn-keluar,
    .bb-btn-login {
        padding: 6px 12px;
        font-size: 0.74rem;
    }
}

@media (max-width: 1099.98px) {
    .bb-nav-pills .nav-link i {
        display: none;
    }
}

/* Mobile & layar sempit */
@media (max-width: 991.98px) {
    :root {
        --bb-side-gap: 0.6cm;
    }

    .bb-moon-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        width: 58px;
        height: 58px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        z-index: 1045;
        pointer-events: auto;
        background: transparent;
        transition: transform .25s ease;
        overflow: visible;
    }

    .bb-moon-toggle:active {
        transform: scale(0.94);
    }

    .bb-mobile-logo-hint {
        display: none;
        position: fixed;
        top: 6px;
        left: 92px;
        width: min(248px, calc(100vw - 108px));
        z-index: 1046;
        pointer-events: none;
        transform-origin: left center;
        filter: drop-shadow(0 12px 22px rgba(8, 71, 50, 0.18));
    }

    .bb-mobile-logo-hint.is-visible {
        display: block;
        animation: bbMobileLogoHintDrift 3.4s ease-in-out infinite;
    }

    .bb-mobile-logo-hint-arrow {
        position: absolute;
        left: -62px;
        top: 4px;
        width: 92px;
        height: 68px;
        overflow: visible;
        filter:
            drop-shadow(0 0 4px rgba(255, 246, 131, 0.92))
            drop-shadow(0 0 12px rgba(255, 219, 74, 0.58));
        animation: bbMobileLogoHintArrowGlow 2.2s ease-in-out infinite;
    }

    .bb-mobile-logo-hint-arrow path {
        stroke: url(#bbMobileLogoHintArrowGradient);
        stroke-width: 3.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .bb-mobile-logo-hint-arrow::after {
        content: '';
        position: absolute;
        left: 22px;
        top: 16px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 252, 190, 0.96) 0%, rgba(255, 232, 96, 0.82) 36%, rgba(255, 232, 96, 0) 72%);
        opacity: 0.85;
        filter: blur(1px);
        animation: bbMobileLogoHintSparkle 1.8s ease-in-out infinite;
    }

    .bb-mobile-logo-hint-arrow marker path {
        fill: #ffe249;
    }

    .bb-mobile-logo-hint-bubble {
        position: relative;
        padding: 11px 16px 11px 17px;
        border-radius: 20px 20px 20px 9px;
        background:
            radial-gradient(circle at 18% 14%, rgba(220, 255, 239, 0.72) 0%, rgba(220, 255, 239, 0) 30%),
            linear-gradient(150deg, rgba(18, 122, 84, 0.98) 0%, rgba(8, 94, 63, 0.98) 52%, rgba(4, 74, 48, 0.98) 100%);
        border: 1px solid rgba(255, 255, 255, 0.78);
        color: #ffe66c;
        font-size: 0.82rem;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-shadow:
            0 0 6px rgba(255, 238, 130, 0.75),
            0 0 14px rgba(255, 222, 90, 0.55);
        box-shadow:
            0 12px 26px rgba(4, 58, 37, 0.32),
            0 0 0 1px rgba(255, 255, 255, 0.46) inset,
            0 0 12px rgba(255, 255, 255, 0.5),
            0 0 22px rgba(67, 233, 161, 0.34);
        animation: bbMobileLogoHintBubbleFloat 3.8s ease-in-out infinite;
    }

    .bb-mobile-logo-hint-bubble strong,
    .bb-mobile-logo-hint-bubble span {
        display: block;
    }

    .bb-mobile-logo-hint-bubble span {
        margin-top: 2px;
        font-weight: 600;
        color: rgba(255, 234, 122, 0.98);
    }

    .bb-mobile-logo-hint-bubble::before {
        content: '';
        position: absolute;
        left: -7px;
        top: 25px;
        width: 15px;
        height: 15px;
        background: linear-gradient(145deg, rgba(18, 122, 84, 0.98) 0%, rgba(4, 74, 48, 0.98) 100%);
        border-left: 1px solid rgba(255, 255, 255, 0.62);
        border-bottom: 1px solid rgba(255, 255, 255, 0.62);
        border-radius: 3px;
        transform: rotate(45deg);
        box-shadow: -3px 3px 10px rgba(15, 23, 42, 0.06);
    }

    .bb-mobile-logo-hint-bubble::after {
        content: '';
        position: absolute;
        inset: -6px -8px -6px -10px;
        border-radius: 24px;
        background: radial-gradient(circle at 72% 30%, rgba(210, 255, 232, 0.34) 0%, rgba(210, 255, 232, 0) 28%), radial-gradient(circle at 22% 72%, rgba(100, 240, 179, 0.24) 0%, rgba(100, 240, 179, 0) 42%);
        pointer-events: none;
        mix-blend-mode: screen;
        animation: bbMobileLogoHintGlow 2.8s ease-in-out infinite;
    }

    @keyframes bbMobileLogoHintDrift {
        0%, 100% {
            transform: translate3d(0, 0, 0) rotate(-0.8deg);
        }
        33% {
            transform: translate3d(0, -4px, 0) rotate(0.4deg);
        }
        66% {
            transform: translate3d(2px, 2px, 0) rotate(1deg);
        }
    }

    @keyframes bbMobileLogoHintBubbleFloat {
        0%, 100% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(0, -3px, 0);
        }
    }

    @keyframes bbMobileLogoHintGlow {
        0%, 100% {
            opacity: 0.55;
            transform: scale(0.98);
        }
        50% {
            opacity: 1;
            transform: scale(1.02);
        }
    }

    @keyframes bbMobileLogoHintArrowGlow {
        0%, 100% {
            filter:
                drop-shadow(0 0 4px rgba(255, 246, 131, 0.92))
                drop-shadow(0 0 12px rgba(255, 219, 74, 0.58));
        }
        50% {
            filter:
                drop-shadow(0 0 6px rgba(255, 250, 168, 0.96))
                drop-shadow(0 0 17px rgba(255, 219, 74, 0.72));
        }
    }

    @keyframes bbMobileLogoHintSparkle {
        0%, 100% {
            transform: translate3d(0, 0, 0) scale(0.9);
            opacity: 0.55;
        }
        50% {
            transform: translate3d(3px, -2px, 0) scale(1.15);
            opacity: 1;
        }
    }

    .bb-moon-border {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .bb-moon-border-outer {
        inset: -3px;
        border: 2.5px solid transparent;
        background:
            linear-gradient(#145a42, #0a3d2c) padding-box,
            conic-gradient(from 0deg, #fff8dc, #f4b942, #ffeaa7, #d4a017, #b8860b, #fff8dc) border-box;
        background-clip: padding-box, border-box;
        -webkit-background-clip: padding-box, border-box;
        animation: bbMoonBorderSpin 3.5s linear infinite;
        box-shadow:
            0 0 14px rgba(244, 185, 66, 0.8),
            0 0 32px rgba(255, 234, 167, 0.5),
            inset 0 0 12px rgba(255, 248, 220, 0.25);
    }

    .bb-moon-border-inner {
        inset: 2px;
        border: 1.5px solid rgba(255, 248, 220, 0.65);
        box-shadow:
            0 0 8px rgba(244, 185, 66, 0.9),
            inset 0 0 6px rgba(255, 234, 167, 0.5);
        animation: bbMoonBorderPulse 2.2s ease-in-out infinite;
    }

    .bb-moon-glow {
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(244, 185, 66, 0.55) 0%, rgba(244, 185, 66, 0.15) 55%, transparent 72%);
        animation: bbMoonGlowPulse 2s ease-in-out infinite;
        z-index: 0;
    }

    .bb-moon-core {
        position: relative;
        z-index: 2;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        perspective: 360px;
        background: transparent;
        box-shadow: none;
        animation: bbMoonPulse 2s ease-in-out infinite;
    }

    .bb-moon-logo-sphere {
        position: relative;
        width: 42px;
        height: 42px;
        transform-style: preserve-3d;
    }

    .bb-moon-logo-rotator {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        animation: bbMoonLogoSpinY 8s linear infinite;
    }

    .bb-moon-logo-sphere-body {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background:
            radial-gradient(circle at 32% 26%, #ffffff 0%, #f5f5f5 28%, #e4e4e4 55%, #c8c8c8 78%, #a8a8a8 100%);
        box-shadow:
            inset -5px -8px 14px rgba(0, 0, 0, 0.2),
            inset 4px 5px 12px rgba(255, 255, 255, 0.9),
            0 3px 10px rgba(0, 0, 0, 0.18);
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .bb-moon-logo-face {
        position: absolute;
        inset: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 50%;
    }

    .bb-moon-logo-face--front {
        transform: rotateY(0deg) translateZ(13px);
    }

    .bb-moon-logo-face--back {
        transform: rotateY(180deg) translateZ(13px);
    }

    .bb-moon-logo-disc {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    .bb-moon-logo {
        width: 100%;
        height: 100%;
        max-width: 32px;
        max-height: 32px;
        object-fit: contain;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
    }

    .bb-moon-logo-specular {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        pointer-events: none;
        z-index: 3;
        background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.8) 0%, transparent 46%);
    }

    @keyframes bbMoonLogoSpinY {
        0% { transform: rotateY(0deg); }
        100% { transform: rotateY(360deg); }
    }

    .bb-moon-shine {
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.08) 38%,
            transparent 52%,
            rgba(255, 234, 167, 0.25) 100%
        );
        animation: bbMoonShineSweep 3s ease-in-out infinite;
    }

    .bb-moon-spark {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        z-index: 4;
        box-shadow: 0 0 6px rgba(255, 248, 220, 0.95);
        animation: bbMoonSpark 2s ease-in-out infinite;
    }

    .bb-moon-spark-1 { top: 0; right: 8px; animation-delay: 0s; }
    .bb-moon-spark-2 { bottom: 6px; left: 0; animation-delay: 0.5s; background: #ffeaa7; }
    .bb-moon-spark-3 { top: 10px; left: -3px; animation-delay: 1s; background: #fff8dc; }

    body.bb-mobile-menu-open .bb-moon-core {
        animation: none;
        box-shadow:
            0 4px 18px rgba(26, 92, 66, 0.5),
            inset 0 2px 6px rgba(255, 255, 255, 0.45);
    }

    body.bb-mobile-menu-open .bb-moon-logo-rotator {
        animation: none;
    }

    body.bb-mobile-menu-open .bb-moon-logo {
        filter: drop-shadow(0 0 4px rgba(255, 248, 220, 0.8));
    }

    body.bb-mobile-menu-open .bb-moon-border-outer {
        animation-duration: 5s;
        opacity: 0.85;
    }

    .bb-mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1015;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(3px);
        pointer-events: auto;
    }

    body.bb-mobile-menu-open .bb-mobile-menu-overlay {
        display: block;
    }

    .bb-header-fixed > .bb-mobile-menu-panel,
    .bb-header-fixed > .bb-submenu-bar {
        display: none;
        opacity: 0;
        transform: translateY(-12px);
        transition: opacity .28s ease, transform .28s ease;
    }

    /* Subnav (SOP/Akun/dll): sheet tabs selalu tampil di mobile */
    body.bb-has-subnav .bb-header-fixed > .bb-submenu-bar {
        display: block;
        opacity: 1;
        transform: none;
        visibility: visible;
        padding-top: 54px;
        padding-bottom: 0;
    }

    body.bb-mobile-menu-open .bb-header-fixed > .bb-mobile-menu-panel,
    body.bb-mobile-menu-open .bb-header-fixed > .bb-submenu-bar {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    body.bb-mobile-menu-open.bb-has-subnav .bb-header-fixed > .bb-submenu-bar {
        padding-top: 4px;
    }

    .bb-menu-wrap {
        padding-top: 64px;
    }

    .bb-menu-stack,
    .bb-menu-container {
        border-radius: 22px;
    }

    .bb-menu-container {
        padding: 10px 12px;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap !important;
        gap: 10px;
        align-items: stretch;
    }

    .bb-menu-left {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 100%;
    }

    .bb-partner-slot {
        display: none;
    }

    /* Logo mitra mobile: pojok kanan atas, mepet tepi */
    .bb-partner-logos-layer {
        position: fixed !important;
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 4px 4px 0 0 !important;
        transform: none !important;
        z-index: 1100;
        align-items: flex-start;
        pointer-events: none !important;
    }

    .bb-partner-logos-layer.bb-partner-ready {
        opacity: 1;
        visibility: visible;
    }

    .bb-partner-logos {
        gap: 6px !important;
        pointer-events: none !important;
    }

    .bb-partner-logos-layer #bbUnivetLogoBtn {
        pointer-events: auto !important;
    }

    .bb-partner-logo {
        width: 44px !important;
        height: 44px !important;
    }

    .bb-brand-inline {
        width: auto;
        justify-content: center;
        margin-bottom: 0;
    }

    .bb-brand-link {
        justify-content: center;
    }

    .bb-nav-pills {
        width: 100%;
        justify-content: center;
        margin: 0;
        flex-direction: column;
        flex-wrap: nowrap !important;
        gap: 4px;
    }

    .bb-nav-pills .nav-item {
        width: 100%;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .bb-nav-pills .nav-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 42px;
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .bb-nav-pills .nav-link i {
        display: inline-block;
        margin-right: 8px !important;
    }

    .bb-nav-dropdown .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 6px;
        box-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .bb-nav-dropdown.show .dropdown-menu {
        display: block;
    }

    .bb-menu-actions {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 8px;
    }

    .bb-btn-keluar,
    .bb-btn-login {
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .bb-login-popover {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 10px;
        z-index: 1120;
    }

    .bb-login-popover-inner {
        border-radius: 0;
        box-shadow: none;
        width: 100%;
    }

    .bb-content-stage {
        padding: 16px;
        border-radius: 18px;
    }

    body.bb-sop-page .bb-content-stage,
    body.bb-dok-tambahan-page .bb-content-stage,
    body.bb-alur-page .bb-content-stage,
    body.bb-akun-page .bb-content-stage,
    body.bb-has-subnav .bb-content-stage {
        padding: 16px;
    }

    .bb-bg-plane { display: none; }

    .bb-header-spacer { height: 72px; }
    body.bb-has-subnav .bb-header-spacer {
        height: 0;
        min-height: 0;
    }
    body.bb-mobile-menu-open .bb-header-spacer {
        height: auto;
        min-height: 0;
    }
}

@keyframes bbMoonPulse {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(184, 134, 11, 0.45),
            0 0 0 0 rgba(244, 185, 66, 0.35),
            inset 0 2px 6px rgba(255, 255, 255, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 6px 24px rgba(244, 185, 66, 0.75),
            0 0 0 10px rgba(244, 185, 66, 0.12),
            inset 0 2px 8px rgba(255, 255, 255, 0.65);
        transform: scale(1.04);
    }
}

@keyframes bbMoonBorderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bbMoonBorderPulse {
    0%, 100% {
        opacity: 0.75;
        box-shadow: 0 0 8px rgba(244, 185, 66, 0.7), inset 0 0 6px rgba(255, 234, 167, 0.4);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 16px rgba(255, 248, 220, 0.95), inset 0 0 10px rgba(255, 234, 167, 0.65);
    }
}

@keyframes bbMoonGlowPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.08); }
}

@keyframes bbMoonLogoShine {
    0%, 100% { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2)) brightness(1); }
    50% { filter: drop-shadow(0 0 8px rgba(255, 248, 220, 0.9)) brightness(1.15); }
}

@keyframes bbMoonShineSweep {
    0%, 100% { opacity: 0.35; transform: rotate(0deg); }
    50% { opacity: 0.75; transform: rotate(8deg); }
}

@keyframes bbMoonBlink {
    0%, 100% { opacity: 1; filter: brightness(1.2); }
    50% { opacity: 0.55; filter: brightness(0.85); }
}

@keyframes bbMoonSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bbMoonSpark {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 575.98px) {
    :root {
        --bb-side-gap: 0.4cm;
    }

    .bb-brand-text small {
        display: none;
    }

    .bb-main { padding: 0 var(--bb-side-gap) calc(20px + var(--bb-footer-h)); }
    .bb-card-body { padding: 16px; }
    .bb-hero-content { padding: 22px; }
    .bb-hero-info-grid { grid-template-columns: 1fr; }
    .bb-hero-info-cards { grid-template-columns: 1fr; }
    .bb-hero-info-panel { left: 12px; right: 12px; top: 12px; }
    .bb-hero-place-photo { width: min(340px, 90%); top: 38%; }
    .bb-hero-phase-label { display: none; }
    .bb-nav-pills .nav-link {
        padding: 8px 12px;
        font-size: .88rem;
        min-height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-menu-stack { animation: none; }
    .bb-nav-pills .nav-link,
    .bb-card,
    .bb-submenu-item { transition: none; }
}

/* Setting page tabs */
.bb-setting-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 2px solid rgba(13, 110, 79, 0.15);
    padding-bottom: 0.65rem;
}

.bb-setting-tabs .nav-link {
    color: #0d6e4f;
    background: #f3faf6;
    border: 1px solid rgba(13, 110, 79, 0.18);
    border-radius: 999px;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.bb-setting-tabs .nav-link:hover {
    background: #e6f5ed;
    color: #095c42;
    text-decoration: none;
}

.bb-setting-tabs .nav-link.active {
    background: #0d6e4f;
    border-color: #0d6e4f;
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 110, 79, 0.25);
}

.bb-setting-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: rgba(13, 110, 79, 0.06);
    border: 1px solid rgba(13, 110, 79, 0.12);
}

.bb-setting-subtabs .nav-link {
    color: #0d6e4f;
    background: #fff;
    border: 1px solid rgba(13, 110, 79, 0.16);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.42rem 0.95rem;
}

.bb-setting-subtabs .nav-link:hover {
    background: #e6f5ed;
    color: #095c42;
    text-decoration: none;
}

.bb-setting-subtabs .nav-link.active {
    background: #c9a227;
    border-color: #c9a227;
    color: #1a1a1a;
}

/* ===== Tab BIAYA OPERASIONAL (Perjalanan / Lain-lain) ===== */
.bb-akun-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.45rem;
    list-style: none;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 253, 245, 0.88));
    border: 1px solid rgba(244, 185, 66, 0.45);
    box-shadow:
        0 0 0 1px rgba(13, 110, 79, 0.08),
        0 0 18px rgba(244, 185, 66, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.bb-akun-tabs .nav-item {
    margin: 0;
}

.bb-akun-tabs .bb-akun-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.62rem 1.15rem;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #4b6358;
    font-style: italic;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(13, 110, 79, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        font-style .22s ease;
}

.bb-akun-tabs .bb-akun-tab-link:hover {
    color: #0d6e4f;
    background: #f3faf6;
    border-color: rgba(244, 185, 66, 0.55);
    box-shadow:
        0 0 0 1px rgba(244, 185, 66, 0.25),
        0 0 12px rgba(244, 185, 66, 0.28);
    transform: translateY(-1px);
}

.bb-akun-tabs .bb-akun-tab-link.active {
    color: #fff;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(165deg, #1fa36f 0%, #0d6e4f 55%, #084732 100%);
    border-color: rgba(255, 236, 170, 0.85);
    box-shadow:
        0 0 0 1px rgba(244, 185, 66, 0.55),
        0 0 16px rgba(244, 185, 66, 0.45),
        0 8px 18px rgba(8, 71, 50, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.bb-akun-tab-content {
    position: relative;
}

.bb-akun-tab-content > .tab-pane {
    outline: none;
    padding-top: 0.1rem;
}

.bb-akun-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.75rem !important;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(13, 110, 79, 0.14);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    text-align: right;
}

.bb-akun-table-toolbar .btn {
    min-height: 34px;
}

@media (max-width: 767.98px) {
    .bb-akun-table-toolbar {
        justify-content: center;
    }
}

/* Kapasitas Produksi Perbulan — berdiri sendiri di bawah datatable (akun 02) */
.bb-kapasitas-produksi {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(180, 140, 40, 0.22);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.bb-kapasitas-produksi-inner {
    gap: 0.4rem 0.5rem;
}

.bb-kapasitas-produksi-label {
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: #5c4a12;
    white-space: nowrap;
}

.bb-kapasitas-produksi-input {
    max-width: 280px;
    min-width: 160px;
    border-color: rgba(180, 140, 40, 0.35);
}

.bb-kapasitas-produksi-input:focus {
    border-color: #b8860b;
    box-shadow: 0 0 0 0.2rem rgba(184, 134, 11, 0.18);
}

.bb-kapasitas-status {
    min-height: 1.2em;
}

@media (max-width: 575.98px) {
    .bb-kapasitas-produksi-label {
        white-space: normal;
        width: 100%;
        margin-bottom: 0.25rem !important;
    }

    .bb-kapasitas-produksi-input {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }
}

.bb-rencana-produksi-actions .bb-btn-input-rencana-produksi {
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff !important;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%) !important;
    border: 1px solid #a93226 !important;
    border-radius: 0.35rem;
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.35);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.bb-rencana-produksi-actions .bb-btn-input-rencana-produksi:hover,
.bb-rencana-produksi-actions .bb-btn-input-rencana-produksi:focus {
    color: #fff !important;
    background: linear-gradient(180deg, #ff6b5a 0%, #e74c3c 100%) !important;
    border-color: #922b21 !important;
    box-shadow: 0 3px 10px rgba(192, 57, 43, 0.45);
}

.bb-rencana-produksi-grid label {
    color: #1b5e3b;
    font-size: 0.85rem;
}

.bb-swal-rencana-produksi {
    border-radius: 1rem !important;
    border: 2px solid rgba(13, 110, 79, 0.18);
    box-shadow: 0 18px 48px rgba(13, 110, 79, 0.22) !important;
    z-index: 3000 !important;
}

.swal2-container {
    z-index: 3000 !important;
}

/* Studi Kelayakan (akuntansi/10) */
.bb-studi-kelayakan-section-title {
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: 0.01em;
}

.bb-studi-kelayakan-form {
    padding: 1rem 1.1rem;
    background: linear-gradient(160deg, rgba(236, 245, 255, 0.95), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(30, 58, 95, 0.16);
    border-radius: 12px;
}

.bb-sk-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    margin-bottom: 0.75rem;
}

.bb-sk-label {
    min-width: 150px;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e3a5f;
    letter-spacing: 0.02em;
}

.bb-sk-input {
    max-width: 220px;
    min-width: 140px;
    flex: 1 1 140px;
    border-color: rgba(30, 58, 95, 0.28);
}

.bb-sk-input:focus {
    border-color: #2c5f8a;
    box-shadow: 0 0 0 0.2rem rgba(44, 95, 138, 0.16);
}

.bb-sk-calc {
    background-color: #f4f7fb;
    color: #334155;
}

.bb-sk-text-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1.25rem;
    margin: 0.85rem 0 0.95rem;
}

.bb-sk-heading {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: #0f2744;
    text-transform: uppercase;
}

.bb-sk-payback-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1d4ed8;
}

/* Excel-like NPV table (studi kelayakan) */
.bb-sk-npv-table thead th,
.bb-sk-npv-table thead td {
    background-color: #92d050 !important;
    color: #000 !important;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    border-color: #000 !important;
}

.bb-sk-npv-table td,
.bb-sk-npv-table th {
    border-color: #000 !important;
    text-align: center;
    vertical-align: middle;
}

.bb-sk-npv-table .bb-sk-spacer-col {
    min-width: 1.25rem;
    width: 1.25rem;
    max-width: 2rem;
    background-color: #fff !important;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.bb-sk-npv-table tbody tr.bb-sk-rate-row td {
    background-color: #fff;
    font-weight: 600;
}

.bb-sk-npv-table tbody tr.bb-sk-summary-row td:nth-child(2) {
    text-align: left;
    font-weight: 700;
}

.bb-sk-npv-table tbody tr.bb-sk-npv-row td {
    background-color: #92d050 !important;
    color: #000 !important;
    font-weight: 800;
}

.bb-sk-npv-table tbody tr.bb-sk-npv-row td:nth-child(2) {
    text-align: left;
}

/* IRR 2-kolom di bawah DataTable NPV */
.bb-sk-irr-wrap {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.85rem;
}

.bb-sk-irr-table {
    border-collapse: collapse;
    min-width: 220px;
}

.bb-sk-irr-table td {
    border: 1px solid #000;
    background-color: #92d050;
    color: #000;
    text-align: center;
    vertical-align: middle;
    padding: 0.45rem 0.9rem;
    font-family: "Times New Roman", Times, serif;
}

.bb-sk-irr-label {
    font-weight: 700;
    min-width: 72px;
}

.bb-sk-irr-value {
    font-weight: 400;
    min-width: 120px;
}

/* R/C RATIO TAHUN 1 */
.bb-sk-rc-wrap {
    display: block;
    width: fit-content;
    max-width: 100%;
    clear: both;
}

.bb-sk-rc-table {
    border-collapse: collapse;
    min-width: 320px;
}

.bb-sk-rc-table th,
.bb-sk-rc-table td {
    border: 1px solid #000;
    padding: 0.4rem 0.75rem;
    font-family: "Times New Roman", Times, serif;
    vertical-align: middle;
}

.bb-sk-rc-table thead th {
    background-color: #fff;
    text-align: center;
    font-weight: 700;
}

.bb-sk-rc-label {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.bb-sk-rc-value {
    text-align: right;
    min-width: 140px;
}

.bb-sk-rc-table tbody tr.bb-sk-rc-total td {
    background-color: #92d050;
    font-weight: 700;
}

.bb-sk-c2-zero {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0 0.35rem;
    border: 1px solid #c2410c;
    border-radius: 3px;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: "Times New Roman", Times, serif;
    line-height: 1.35;
    cursor: pointer;
}

.bb-sk-c2-zero:hover,
.bb-sk-c2-zero:focus {
    background: #ffedd5;
    outline: none;
}

/* PAY BACK PERIOD */
.bb-sk-payback-wrap {
    width: 100%;
    border-radius: 14px;
    padding: 0.85rem;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(146, 208, 80, 0.22), transparent 55%),
        radial-gradient(100% 70% at 100% 100%, rgba(34, 120, 60, 0.12), transparent 50%),
        linear-gradient(165deg, #f7fbf3 0%, #ffffff 55%, #f3f8ee 100%);
    border: 1px solid rgba(70, 130, 40, 0.28);
    box-shadow: 0 10px 28px rgba(40, 80, 20, 0.08);
}

.bb-sk-payback-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bb-sk-payback-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #2f6b1f;
    background: #fff;
}

.bb-sk-payback-table th,
.bb-sk-payback-table td {
    border-right: 1px solid rgba(47, 107, 31, 0.35);
    border-bottom: 1px solid rgba(47, 107, 31, 0.35);
    padding: 0.55rem 0.45rem;
    text-align: center;
    vertical-align: middle;
    font-size: 0.88rem;
}

.bb-sk-payback-table th:last-child,
.bb-sk-payback-table td:last-child {
    border-right: none;
}

.bb-sk-payback-table tbody tr:last-child td {
    border-bottom: none;
}

.bb-sk-payback-title-row th {
    background: linear-gradient(180deg, #a8e063 0%, #92d050 55%, #7cbc3d 100%);
    color: #143016;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.95rem;
    padding: 0.7rem 0.65rem;
}

.bb-sk-payback-title {
    text-align: left;
    min-width: 170px;
    white-space: nowrap;
}

.bb-sk-payback-badge {
    text-align: center;
    font-weight: 800;
    white-space: nowrap;
}

.bb-sk-payback-title-empty {
    background: #ffffff !important;
}

.bb-sk-payback-month-row th {
    background: linear-gradient(180deg, #9fd84f 0%, #86c43a 100%);
    color: #163418;
    font-weight: 800;
    min-width: 52px;
}

.bb-sk-payback-month-row th:first-child {
    text-align: left;
    padding-left: 0.75rem;
}

.bb-sk-payback-label {
    text-align: left !important;
    font-weight: 700;
    color: #1f3d20;
    padding-left: 0.75rem !important;
    white-space: nowrap;
    background: #f8fcf3;
}

.bb-sk-payback-kas td {
    background: #ffffff;
}

.bb-sk-payback-kas:hover td {
    background: #f4faee;
}

.bb-sk-payback-growth td {
    background: linear-gradient(180deg, #a4dc5c 0%, #92d050 100%);
    color: #143016;
    font-weight: 700;
}

.bb-sk-payback-growth .bb-sk-payback-label {
    background: linear-gradient(180deg, #a4dc5c 0%, #92d050 100%);
}

.bb-sk-payback-cell {
    min-width: 58px;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

@media (max-width: 575.98px) {
    .bb-sk-label {
        width: 100%;
        min-width: 0;
    }

    .bb-sk-input {
        max-width: none;
        width: 100%;
        flex: 1 1 100%;
    }

    .bb-sk-payback-wrap {
        padding: 0.65rem;
        border-radius: 12px;
    }
}

#paneDataNasional select:disabled {
    background-color: #f1f3f5;
    cursor: not-allowed;
}

/* Select2 wilayah — kotak search di atas list */
#paneDataNasional .select2-container {
    width: 100% !important;
}

#paneDataNasional .select2-container--bootstrap4 .select2-selection--single {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    border-color: #ced4da;
}

#paneDataNasional .select2-container--bootstrap4.select2-container--focus .select2-selection,
#paneDataNasional .select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: #0d6e4f;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 79, 0.2);
}

.select2-container--bootstrap4 .select2-dropdown {
    border-color: #0d6e4f;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.4rem 0.65rem;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: #0d6e4f;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 79, 0.18);
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6e4f;
}

/* PJAX: progress bar tipis di atas saat ganti halaman (menu/footer tetap) */
.bb-pjax-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    pointer-events: none;
    background: linear-gradient(90deg, #f4b942 0%, #1fa36f 55%, #0d6e4f 100%);
    box-shadow: 0 0 8px rgba(244, 185, 66, 0.55);
    opacity: 0;
    transition: width 0.25s ease, opacity 0.2s ease;
}

.bb-pjax-progress.is-active {
    opacity: 1;
}

.bb-pjax-progress.is-loading {
    width: 78%;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease;
}

.bb-pjax-progress.is-done {
    width: 100%;
    transition: width 0.18s ease, opacity 0.25s ease;
}

#bbPjaxRoot {
    animation: none;
}

body.bb-pjax-swap #bbPjaxRoot {
    animation: bbPjaxFadeIn 0.28s ease;
}

@keyframes bbPjaxFadeIn {
    from { opacity: 0.35; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== SURAT EDITOR ===== */
.bb-surat-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding-bottom: 20px;
    width: 100% !important;
    max-width: 100% !important;
}

.bb-surat-toolbar-top {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, var(--bb-primary) 0%, var(--bb-primary-dark) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-wrap: nowrap !important;
    gap: 12px;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bb-surat-toolbar-left {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

.bb-surat-toolbar-left .btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    padding: 0.3rem 0.6rem !important;
}

.bb-surat-toolbar-left #selectTemplateSurat {
    min-width: 160px !important;
    max-width: 220px !important;
    margin-left: 4px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    padding: 0.25rem 0.5rem !important;
    height: auto !important;
}

.bb-surat-toolbar-right {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.bb-surat-toolbar-right .form-control-sm {
    min-width: 160px !important;
    max-width: 200px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
    padding: 0.25rem 0.5rem !important;
    height: auto !important;
}

.bb-surat-editor-wrap {
    flex: 1 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    padding: 20px !important;
    background: #e8e8e8;
    display: flex !important;
    justify-content: center !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bb-surat-page {
    width: 210mm;
    min-height: 297mm;
    height: auto;
    background: #fff;
    box-shadow: 0 4px 30px rgba(0,0,0,0.15);
    position: relative;
    margin: 0 auto;
}

.bb-surat-kop {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 15mm 15mm 10mm 15mm;
    border-bottom: none;
    flex-direction: row !important;
}

.bb-surat-kop-left {
    flex: 0 0 80px;
    margin-right: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-surat-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.bb-surat-kop-center {
    flex: 1;
    text-align: center;
}

.bb-surat-kop-pemerintah {
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
}

.bb-surat-kop-kelurahan {
    font-size: 18pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    margin-top: 2px;
}

.bb-surat-kop-alamat {
    font-size: 10pt;
    color: #333;
    margin-top: 4px;
}

.bb-surat-kop-right {
    flex: 0 0 auto;
    text-align: right;
    font-size: 9pt;
    color: #666;
}

.bb-surat-garis-kop {
    height: 3px;
    background: #000;
    margin: 0 15mm;
    border-bottom: 1px solid #000;
    margin-bottom: 5mm;
}

.bb-surat-content {
    padding: 5mm 15mm 15mm 15mm;
    min-height: 200mm;
}

.bb-surat-content .mce-editor,
.bb-surat-content .tox-tinymce {
    border: none !important;
    box-shadow: none !important;
}

.bb-surat-content textarea {
    width: 100%;
    min-height: 200mm;
    border: none;
    padding: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12pt;
    line-height: 1.6;
    resize: none;
}

.bb-surat-status-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: 12px;
    color: #6c757d;
}

.bb-surat-status-separator {
    margin: 0 10px;
    color: #ccc;
}

/* Print styles */
@media print {
    .bb-surat-toolbar-top,
    .bb-surat-status-bar,
    .bb-header-fixed,
    .bb-footer-fixed,
    .bb-bg-depth,
    .bb-moon-toggle,
    .bb-mobile-logo-hint {
        display: none !important;
    }
    
    .bb-surat-editor-wrap {
        padding: 0;
        background: none;
        overflow: visible;
    }
    
    .bb-surat-page {
        box-shadow: none;
        width: 100%;
        min-height: auto;
    }
    
    .bb-content-stage,
    .bb-content-inner {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    body {
        background: #fff !important;
    }
}

/* Kop Logo Controls */
.bb-kop-logo-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.95);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.bb-kop-control-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 11px;
}

.bb-kop-control-row label {
    min-width: 55px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.bb-kop-control-row input[type="range"] {
    flex: 1;
    height: 4px;
}

.bb-kop-control-row span {
    min-width: 35px;
    text-align: right;
    font-size: 10px;
    color: #666;
}

.bb-kop-control-row .btn {
    font-size: 10px;
    padding: 2px 8px;
}

#kopLogoContainer {
    position: relative;
}

#kopLogo {
    transition: none;
    user-select: none;
    -webkit-user-drag: element;
}

#kopLogo:hover {
    outline: 2px dashed rgba(13, 110, 79, 0.4);
    outline-offset: 4px;
}

/* TinyMCE Editor fixes */
.bb-surat-content .tox-tinymce {
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.bb-surat-content .tox-editor-container {
    min-height: 500px;
}

.bb-surat-content .tox-edit-area__iframe {
    min-height: 500px;
}

.bb-surat-content .tox-statusbar {
    display: flex !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bb-surat-page {
        width: 100%;
        min-height: auto;
    }
    
    .bb-surat-kop {
        flex-direction: column;
        text-align: center;
        padding: 10mm;
    }
    
    .bb-surat-kop-left {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .bb-surat-kop-right {
        text-align: center;
        margin-top: 5px;
    }
    
    .bb-surat-toolbar-top {
        flex-direction: column;
        gap: 10px;
    }
    
    .bb-surat-toolbar-left {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .bb-surat-toolbar-right {
        width: 100%;
        justify-content: center;
    }
    
    .bb-surat-toolbar-right .form-control-sm {
        max-width: 100%;
        width: 100%;
    }
}

/* ===== PRINT STYLES ===== */
/* Ukuran A4: margin top=1cm, right=3cm, bottom=3cm, left=4cm */
@page {
    size: A4;
    margin: 1cm 3cm 3cm 4cm;
}

@media print {
    /* Sembunyikan semua elemen non-surat */
    .bb-surat-toolbar-top,
    .bb-surat-status-bar,
    .bb-kop-logo-controls,
    .tox-editor-header,
    .tox-statusbar,
    .bb-moon-toggle,
    .bb-mobile-logo-hint,
    .bb-bg-depth,
    .bb-header,
    .bb-footer,
    .bb-menu,
    .bb-navbar,
    .modal,
    .modal-backdrop {
        display: none !important;
    }

    /* Reset body untuk print */
    body.bb-body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Halaman surat - full lebar A4 */
    .bb-surat-page {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Kop surat - full lebar */
    .bb-surat-kop {
        display: flex !important;
        align-items: center !important;
        padding: 5mm 0 5mm 0 !important;
        width: 100% !important;
    }

    .bb-surat-kop-left {
        width: 25% !important;
        text-align: center !important;
    }

    .bb-surat-kop-center {
        width: 50% !important;
        text-align: center !important;
    }

    .bb-surat-kop-right {
        width: 25% !important;
    }

    .bb-surat-logo {
        width: 80px !important;
        height: 80px !important;
    }

    .bb-surat-garis-kop {
        display: block !important;
        width: 100% !important;
        border-top: 3px solid #000 !important;
        border-bottom: 1px solid #000 !important;
        height: 4px !important;
        margin: 5px 0 10px 0 !important;
    }

    /* Editor content - full lebar */
    .bb-surat-content {
        padding: 0 !important;
        width: 100% !important;
    }

    .tox-tinymce {
        border: none !important;
    }
}

/* Overlay loading saat data tabel dimuat via AJAX (deferred load) */
.bb-page-table-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    min-height: 220px;
}

.bb-page-table-loading.d-none {
    display: none !important;
}

.bb-page-table-loading-inner {
    text-align: center;
    color: #0d6e4f;
    padding: 1.25rem 1.5rem;
    max-width: 320px;
}

.bb-page-table-loading-inner p {
    font-size: 0.95rem;
    color: #495057;
}

body.bb-logged-out .bb-page-table-loading {
    background: rgba(248, 250, 252, 0.92);
}