@layer components {
    /* ============================
     * 變數定義（方便統一調整）
     * ============================ */
    :root {
        --nav-transition-duration     : 220ms;
        --submenu-transition-duration : 200ms;
        --nav-easing                  : cubic-bezier(0.16, 1, 0.3, 1);
        --nav-hover-delay             : 120ms;
        --submenu-hover-delay         : 120ms;
        --nav-dropdown-translate      : 8px;
        --submenu-panel-translate     : 8px;
        --nav-bridge-width            : 12px;
    }

    #nav-bar {
        @apply sticky top-0 z-40;
    }

    [x-cloak] {
        display : none !important;
    }

    /* ============================
     * Level 1：主選單項目（含 dropdown）
     * ============================ */
    .nav-item {
        @apply relative;

        &.nav-item-mega {
            @apply static;
        }

        /* Level 1 trigger */

        .nav-trigger {
            @apply inline-flex min-h-14 items-center gap-2 px-3 text-sm font-semibold transition-colors duration-200 hover:bg-white hover:text-primary;
        }

        /* Level 1 dropdown 容器 */

        .nav-dropdown {
            @apply invisible pointer-events-none absolute left-0 top-full z-40 min-w-[240px] pt-2 opacity-0;
            transform   : translateY(var(--nav-dropdown-translate));
            transition  : opacity var(--nav-transition-duration) var(--nav-easing),
            transform var(--nav-transition-duration) var(--nav-easing),
            visibility 0s linear var(--nav-transition-duration);
            white-space : nowrap;

            /* Level 1 dropdown 顯示 */

            .nav-item:hover > & {
                @apply visible pointer-events-auto opacity-100;
                transform  : translateY(0);
                transition : opacity var(--nav-transition-duration) var(--nav-easing),
                transform var(--nav-transition-duration) var(--nav-easing),
                visibility 0s linear 0s;
            }

            /* Level 1 dropdown 離開後延遲消失 */

            .nav-item:not(:hover):not(:focus-within) > & {
                transition-delay : var(--nav-hover-delay),
                var(--nav-hover-delay),
                var(--nav-hover-delay);
            }

            /* Mega dropdown 寬度調整 */

            &.nav-dropdown-mega {
                @apply w-full min-w-0;
            }

            &.nav-dropdown-right {
                @apply left-auto right-0;
            }
        }
    }

    /* ============================
     * Level 2：子選單項目（含第三層 flyout）
     * ============================ */
    .submenu-item {
        @apply relative;

        /* Level 2 trigger */

        .submenu-trigger {
            @apply flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-slate-800 transition-colors duration-200 hover:bg-slate-50 hover:text-primary rounded-xl;
        }

        /* Level 3 外層容器（hover 控制層） */

        .submenu-panel {
            @apply invisible pointer-events-none absolute left-full top-0 z-50 min-w-[220px] opacity-0;
            transition : opacity var(--submenu-transition-duration) var(--nav-easing),
            visibility 0s linear var(--submenu-transition-duration);

            /* hover 橋接區（避免滑鼠移過去時斷 hover） */

            &::before {
                content  : "";
                position : absolute;
                top      : 0;
                right    : 100%;
                width    : var(--nav-bridge-width);
                height   : 100%;
            }

            /* Level 3 顯示 */

            .submenu-item:hover > & {
                @apply visible pointer-events-auto opacity-100;
                transition : opacity var(--submenu-transition-duration) var(--nav-easing),
                visibility 0s linear 0s;
            }

            /* Level 3 離開後延遲消失 */

            .submenu-item:not(:hover):not(:focus-within) > & {
                transition-delay : var(--submenu-hover-delay),
                var(--submenu-hover-delay);
            }

            /* Level 3 內層白底面板（真正移動的層） */

            .submenu-panel-inner {
                @apply rounded-xl bg-white text-slate-800 shadow-lg ring-1 ring-slate-200 overflow-hidden;
                transform  : translateX(var(--submenu-panel-translate));
                transition : transform var(--submenu-transition-duration) var(--nav-easing);

                /* 顯示時保持右移 */

                .submenu-item:hover > .submenu-panel > &,
                .submenu-item:focus-within > .submenu-panel > & {
                    transform : translateX(var(--submenu-panel-translate));
                }
            }
        }

        &.submenu-item-left {
            .submenu-panel {
                @apply left-auto right-full;

                &::before {
                    left  : 100%;
                    right : auto;
                }

                .submenu-panel-inner {
                    transform : translateX(calc(var(--submenu-panel-translate) * -1));

                    .submenu-item:hover > .submenu-panel > &,
                    .submenu-item:focus-within > .submenu-panel > & {
                        transform : translateX(calc(var(--submenu-panel-translate) * -1));
                    }
                }
            }
        }
    }

    /* ============================
     * 共用面板與連結樣式
     * ============================ */
    .menu-panel {
        @apply rounded-xl bg-white text-slate-800 shadow-lg ring-1 ring-slate-200;
    }

    .menu-panel-mega {
        @apply mx-auto;
        width     : min(1280px, calc(100vw - 2rem));
        max-width : calc(100vw - 2rem);
    }

    .menu-link {
        @apply block px-4 py-3 text-sm text-slate-700 transition-colors duration-200 hover:bg-slate-50 hover:text-primary;
    }

    .menu-link-primary {
        @apply block px-4 py-3 text-sm font-medium text-slate-800 transition-colors duration-200 hover:bg-slate-50 hover:text-primary rounded-xl;
    }

    .menu-link-tab {
        @apply rounded-none border-l-2 border-transparent hover:border-primary hover:bg-slate-100;
    }

    /* ============================
     * Mobile：抽屜式樹狀選單
     * ============================ */
    .mobile-nav-panel {
        @apply absolute left-0 right-0 top-full max-h-[calc(100vh-3.5rem)] overflow-y-auto border-t border-white/15 bg-base-100 text-base-content shadow-xl ring-1 ring-base-300;
    }

    .mobile-nav-tools {
        @apply mb-3 space-y-3 rounded-md border border-base-300 bg-base-200 p-3 shadow-sm;

        .join {
            @apply isolate;
        }

        .input {
            @apply h-11 min-h-11 bg-base-100 text-sm text-base-content placeholder:text-base-content/45;
        }

        .btn {
            @apply h-11 min-h-11 px-4;
        }
    }

    .mobile-language-list {
        @apply grid grid-cols-2 gap-2 sm:grid-cols-3;
    }

    .mobile-language-link {
        @apply inline-flex min-h-10 min-w-0 items-center justify-center rounded-md border border-base-300 bg-base-100 px-3 py-2 text-center text-sm font-medium leading-tight text-base-content transition-colors duration-200 hover:border-primary hover:bg-primary/5 hover:text-primary focus:border-primary focus:bg-primary/5 focus:text-primary focus:outline-none;
    }

    .mobile-language-link-active {
        @apply border-primary bg-primary text-primary-content hover:bg-primary hover:text-primary-content focus:bg-primary focus:text-primary-content;
    }

    .mobile-nav-list {
        @apply space-y-2;
    }

    .mobile-nav-item {
        @apply overflow-hidden rounded-md border border-base-300 bg-base-100;
    }

    .mobile-nav-link,
    .mobile-nav-toggle {
        @apply flex min-h-12 w-full items-center justify-between gap-3 px-4 py-3 text-left text-base font-semibold transition-colors duration-200 hover:bg-base-200 focus:bg-base-200 focus:outline-none;
    }

    .mobile-subnav-list {
        @apply relative border-t border-base-300 bg-base-200/60 px-3 py-2;

        &::before {
            content : "";
            @apply absolute bottom-3 left-6 top-3 w-px bg-base-300;
        }
    }

    .mobile-subnav-link,
    .mobile-subnav-toggle {
        @apply relative flex min-h-11 w-full items-center justify-between gap-3 rounded-md py-2 pl-9 pr-3 text-left text-sm font-medium transition-colors duration-200 hover:bg-base-100 hover:text-primary focus:bg-base-100 focus:text-primary focus:outline-none;

        &::before {
            content : attr(data-tree-symbol);
            @apply absolute left-3 top-1/2 z-10 -translate-y-1/2 font-mono text-base text-primary/70;
        }
    }

    .mobile-depth3-list {
        @apply relative ml-7 border-l border-base-300 py-1 pl-3;
    }

    .mobile-depth3-link {
        @apply relative block rounded-md py-2 pl-8 pr-3 text-sm text-base-content/80 transition-colors duration-200 hover:bg-base-100 hover:text-primary focus:bg-base-100 focus:text-primary focus:outline-none;

        &::before {
            content : attr(data-tree-symbol);
            @apply absolute left-2 top-1/2 -translate-y-1/2 font-mono text-sm text-primary/60;
        }
    }

    /* 多餘重複定義已移除，保留上方 .submenu-panel-inner */
}