/* =========================
   FLUENT MENU ROOT
========================= */

.fluent-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ROOT (DESKTOP) */
.fluent-menu--root {
    display: flex;
    align-items: center;
    gap: var(--ms-space-md);
    flex-wrap: nowrap;
    overflow: visible; /* ❗ FIX: jangan hidden */
}

/* SUB MENU */
.fluent-menu--sub {
    display: flex;
    flex-direction: column;
}

/* =========================
   ITEM
========================= */

.fluent-menu__item {
    position: relative;
}

/* =========================
   LINK
========================= */

.fluent-menu__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;

    padding: 6px 10px;
    border-radius: var(--ms-radius-sm);

    font-size: var(--ms-font-size-small);
    font-weight: var(--ms-font-weight-regular);

    color: var(--ms-color-text-primary);
    text-decoration: none !important;

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

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

/* FULL WIDTH FOR DROPDOWN */
.fluent-menu--sub .fluent-menu__link {
    width: 100%;
    padding: var(--ms-space-sm) var(--ms-space-md);
}

/* =========================
   STATES
========================= */

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

.fluent-menu__link.is-active {
    background: var(--ms-color-success-subtle);
    color: var(--ms-color-success-dark);
    font-weight: var(--ms-font-weight-medium);
}

.fluent-menu__link.is-sub-active {
    font-weight: var(--ms-font-weight-semibold);
}

/* =========================
   CARET
========================= */

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

/* =========================
   SUBMENU BASE
========================= */

.fluent-menu__submenu {
    display: none;
    z-index: var(--ms-z-dropdown);
}

/* =========================
   OPEN STATE (IMPORTANT FIX)
========================= */

.fluent-menu__submenu.is-open {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* =========================
   DESKTOP DROPDOWN
========================= */

@media (min-width: 768px) {

    .fluent-menu__submenu {
        position: absolute;
        top: 100%;
        left: 0;

        min-width: 200px;

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

        padding: 6px 0;
        box-shadow: var(--ms-shadow-4);

        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;

        transition: all 120ms ease;
        display: block; /* penting untuk animasi */
    }

    /* HOVER MODE (desktop default) */
    .fluent-menu__item:hover > .fluent-menu__submenu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* SUB LEVEL */
    .fluent-menu__submenu .fluent-menu__submenu {
        top: 0;
        left: 100%;
        margin-left: var(--ms-space-xs);
    }
}

/* =========================
   MOBILE STYLE
========================= */

@media (max-width: 767px) {

    .fluent-menu--root {
        flex-direction: column;
        align-items: stretch;
    }

    .fluent-menu__link {
        width: 100%;
        padding: var(--ms-space-md);
    }

    .fluent-menu__submenu {
        position: static;
        border: none;
        box-shadow: none;
        margin: 0;
        padding-left: var(--ms-space-md);
    }
}