/* =========================
   FLUENT HEADER (COMPONENT)
========================= */

.fluent-header {
    height: auto;
    min-height: 48px;
    align-self: flex-start;

    position: relative;
    z-index: var(--ms-z-sticky);

    background-color: var(--ms-color-bg-canvas);
    border-bottom: 1px solid var(--ms-color-border-subtle);

    transition:
        background var(--ms-motion-base) var(--ms-ease),
        box-shadow var(--ms-motion-base) var(--ms-ease);
}

/* =========================
   MODES
========================= */

/* STICKY */
.fluent-header.is-sticky {
    position: sticky;
    top: 0;
    height: auto;
    max-height: 48px;
}

/* FIXED */
.fluent-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* TRANSPARENT (HERO) */
.fluent-header.is-transparent {
    background: transparent;
    border-bottom: none;
}

/* SCROLLED STATE */
.fluent-header.is-scrolled {
    background: var(--ms-color-bg-canvas);
    box-shadow: var(--ms-shadow-4);
}

/* =========================
   CONTAINER
========================= */

.fluent-header__container {
    min-height: 48px;
}

/* =========================
   LEFT / RIGHT
========================= */

.fluent-header__left {
    flex: 1;
}

.fluent-header__right {
    flex-shrink: 0;
}

/* =========================
   NAV (DESKTOP)
========================= */

.fluent-header__nav {
    display: flex;
    align-items: center;
}

/* =========================
   MOBILE TOGGLE
========================= */

.fluent-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    cursor: pointer;

    padding: var(--ms-space-xs);
    border-radius: var(--ms-radius-sm);

    color: var(--ms-color-text-primary);

    transition: background var(--ms-motion-fast);
}

.fluent-header__toggle:hover {
    background: var(--ms-color-neutral-100);
}

/* =========================
   MOBILE MENU (SIDEBAR)
========================= */

.fluent-header__mobile {
    position: fixed;
    top: 0;
    left: 0;

    width: 280px;
    height: 100vh;

    background-color: var(--ms-color-bg-canvas);
    border-right: 1px solid var(--ms-color-border-subtle);

    padding: var(--ms-space-md);

    transform: translateX(-100%);
    transition: transform var(--ms-motion-base) var(--ms-ease);

    z-index: var(--ms-z-modal); /* FIX: lebih tinggi dari header */

    overflow-y: auto;
}

/* =========================
   OVERLAY (FIX TOTAL)
========================= */

.fluent-header__overlay {
    position: fixed;
    inset: 0;

    background: var(--ms-color-scrim);

    opacity: 0;
    pointer-events: none;

    transition: opacity var(--ms-motion-fast) var(--ms-ease);

    z-index: calc(var(--ms-z-modal) - 1); /* FIX: di bawah sidebar */
}

/* =========================
   STATE: OPEN
========================= */

.fluent-header.is-open .fluent-header__mobile {
    transform: translateX(0);
}

.fluent-header.is-open + .fluent-header__overlay {
    opacity: 1;
    pointer-events: auto;
}

/* =========================
   LOGO IMAGE
========================= */

.fluent-header .fluent-logo img {
    max-height: 36px !important;
    transition: filter var(--ms-motion-base);
    filter: invert(1);
}

/* OPTIONAL: DARK HERO MODE */
.fluent-header.is-transparent .fluent-logo img {
    filter: invert(1);
}

/* =========================
   SAFETY FIX (Z-INDEX ISSUE)
========================= */

/* kalau ada submenu pakai z-index tinggi */
.fluent-header * {
    position: relative;
}

/* =========================
   OPTIONAL: GLASS EFFECT (DISABLED DEFAULT)
========================= */

.fluent-header.is-glass {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.7);
}