/* ==========================================================================
   NAVIGATION & NEVIGATION COMPONENTS
   ย้ายมาจาก test-navs.php และขยายสำหรับ Public App Shell
   ========================================================================== */

/* ==========================================================================
   PUBLIC APP SHELL LAYOUT
   ========================================================================== */

.nav-app-shell {
    display: grid;
    grid-template-areas: 
        "header" 
        "content"
        "footer"
        "bottom-nav";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    --nav-drawer-width: 280px;
}

.nav-app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px; /* Header should be thin */
    padding: 0 1rem;
    background-color: var(--nav-head-bg);
    color: var(--nav-head-text-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--nav-shadow);
    transition: box-shadow var(--transition-base) ease, background-color var(--transition-base) ease;
}

/* Modifier: is-scrolled — desktop only (ดู @media min-width 1024px) */

/* Documentation anchor: กลุ่มองค์ประกอบด้านซ้ายของ App Header (โลโก้ + ชื่อ) */
.nav-app-header-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.nav-header-search {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1 1 auto;
    max-width: calc(22rem + 200px);
    min-width: 0;
    overflow: visible;
    gap: 0.35rem;
}

.nav-header-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-full, 999px);
    background: transparent;
    color: var(--nav-header-search-toggle-color);
    cursor: pointer;
    transition:
        background-color var(--transition-fast) ease,
        color var(--transition-fast) ease,
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-header-search-toggle:hover {
    background: var(--nav-header-search-toggle-hover-bg);
    color: var(--nav-header-search-toggle-hover-color);
}

.nav-header-search-toggle .nav-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.nav-header-search-field {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0.65rem 0 0.55rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-slate-border-subtle);
    border-radius: var(--radius-full, 999px);
    transform-origin: left center;
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        flex 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-header-search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    pointer-events: none;
}

.nav-header-search-icon .nav-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.nav-header-search .list-search {
    width: 100%;
}

.nav-header-search .nav-header-search-field .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.nav-header-search .form-control {
    min-height: 2.25rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.nav-header-search .search-suggest {
    left: 0;
    right: auto;
    width: 200%;
    max-width: calc(100vw - 2rem);
}

.nav-header-search .search-result-module.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: var(--spacing-xs);
}

.nav-header-search .search-result-module.chip .nav-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.nav-header-search .search-suggest-title {
    white-space: normal;
    overflow-wrap: anywhere;
}

.nav-app-header-start .nav-brand-text {
    transition:
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1023px) {
    .nav-header-search {
        flex: 0 1 auto;
        max-width: none;
        min-width: 0;
    }

    .nav-header-search-toggle {
        display: inline-flex;
    }

    .nav-header-search:not(.is-expanded) .nav-header-search-field {
        opacity: 0;
        flex: 0 0 0;
        max-width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        overflow: hidden;
        pointer-events: none;
        transform: scaleX(0.92);
    }

    .nav-header-search:not(.is-expanded):not(.is-collapsing) .nav-header-search-toggle {
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.14s;
    }

    .nav-header-search.is-expanded,
    .nav-header-search.is-collapsing {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-header-search.is-expanded .nav-header-search-toggle,
    .nav-header-search.is-collapsing .nav-header-search-toggle {
        opacity: 0;
        transform: scale(0.88);
        width: 0;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        pointer-events: none;
        transition-delay: 0s;
    }

    .nav-header-search.is-expanded .nav-header-search-field,
    .nav-header-search.is-collapsing .nav-header-search-field {
        opacity: 1;
        flex: 1 1 auto;
        max-width: none;
        pointer-events: auto;
        border-color: var(--color-slate-border-subtle);
        transform: scaleX(1);
    }

    .nav-header-search.is-collapsing .nav-header-search-field {
        opacity: 0;
        flex: 0 0 0;
        max-width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        pointer-events: none;
        transform: scaleX(0.92);
    }

    .nav-app-header-start.is-search-expanded .nav-brand-text {
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        pointer-events: none;
        transition-delay: 0s;
    }

    .nav-app-header-start:not(.is-search-expanded) .nav-brand-text {
        transition-delay: 0.12s;
    }

    .nav-header-search .nav-header-search-field {
        padding: 0 0.5rem 0 0.45rem;
    }

    .nav-header-search .form-control {
        min-height: 2rem;
        font-size: var(--font-size-sm);
    }

    .nav-header-search .search-suggest {
        width: min(200%, calc(100vw - 2rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-header-search-toggle,
    .nav-header-search-field,
    .nav-app-header-start .nav-brand-text {
        transition: none !important;
    }
}

@media (min-width: 1024px) {
    .nav-header-search {
        display: flex;
    }

    .nav-header-search-toggle {
        display: none;
    }

    .nav-header-search-field {
        opacity: 1;
        flex: 1 1 auto;
        max-width: none;
        pointer-events: auto;
    }
}

.nav-app-header .nav-brand {
    color: var(--nav-head-text-color);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

/* Documentation anchor: รูปโลโก้ใน App Header */
.nav-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
}

/* Documentation anchor: ข้อความชื่อแบรนด์ใน App Header (truncate เมื่อพื้นที่จำกัด) */
.nav-brand-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-app-header .nav-drawer-toggle-btn {
    background: none;
    border: none;
    color: var(--nav-head-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: var(--radius, 8px);
}

.nav-app-header .nav-drawer-toggle-btn:hover {
    background: var(--nav-hover-bg);
}

.nav-icon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.nav-actions {
    display: flex;
    gap: 0.5rem;
    --nav-profile-dropdown-align-offset: calc(2rem + 0.3rem + 0.5rem);
}

.nav-actions .nav-btn {
    background: none;
    border: none;
    color: var(--nav-head-text-color);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    position: relative;
    border-radius: var(--radius-sm, 6px);
}

.nav-actions .nav-btn:hover {
    background: var(--nav-hover-bg);
}

/* Header profile — สมาชิกล็อกอิน: ใช้ .avatar / .avatar-md / .avatar--placeholder จาก global.css */
.nav-actions .nav-btn-profile {
    padding: 0.15rem;
    overflow: hidden;
}

.nav-actions .nav-btn-profile .avatar,
.nav-actions .nav-btn-profile .avatar--placeholder {
    width: 2rem;
    height: 2rem;
    font-size: var(--font-size-sm);
}

.nav-app-header .nav-actions .nav-btn-profile .avatar {
    border: 1px solid var(--color-slate-border-subtle);
}

/* Header profile dropdown — data-nav-dropdown (hover desktop · tap mobile) */
.nav-dropdown {
    position: relative;
}

.nav-dropdown__trigger {
    background: none;
    border: none;
    font: inherit;
}

.nav-dropdown__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 13rem;
    padding: 0.35rem 0;
    background: var(--color-surface-card);
    border: 1px solid var(--color-slate-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 220;
    display: none;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: top right;
}

/* สะพาน hover — ช่องว่างระหว่าง trigger กับ panel ทำให้ mouseleave ปิดเมนูก่อนคลิกรายการ */
.nav-dropdown__panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.5rem;
    height: 0.5rem;
}

.nav-dropdown.is-open .nav-dropdown__panel {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    transition: background-color var(--transition-fast) ease;
}

.nav-dropdown__item + .nav-dropdown__item {
    border-top: 1px solid var(--color-slate-border-subtle);
}

.nav-dropdown__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.nav-dropdown__icon .nav-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.nav-dropdown__item--danger {
    color: var(--color-danger);
}

.nav-dropdown__item--danger .nav-dropdown__icon {
    color: var(--color-danger);
}

@media (hover: hover) and (pointer: fine) {
    .nav-dropdown__item:hover {
        background: var(--color-surface-alt);
    }
}

@media (hover: none), (pointer: coarse) {
    .nav-dropdown__item:active {
        background: var(--color-surface-alt);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown__panel {
        transition: none;
        transform: none;
    }
}

/* Header notifications dropdown — demo placeholder (Facebook-style) */
.nav-notifications .nav-dropdown__panel {
    right: calc(-1 * var(--nav-profile-dropdown-align-offset));
    transform-origin: top right;
}

.nav-notifications__panel {
    min-width: 22.5rem;
    max-width: min(24rem, calc(100vw - 1.5rem));
    padding: 0;
    overflow: hidden;
}

.nav-notifications__tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--color-slate-border-subtle);
}

.nav-notifications__tab {
    flex: 1 1 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
}

.nav-notifications__tab.is-active {
    background: var(--color-primary-soft, rgba(59, 130, 246, 0.12));
    color: var(--color-primary);
}

.nav-notifications__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem 0.35rem;
}

.nav-notifications__section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}

.nav-notifications__see-all {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.nav-notifications__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(28rem, 70vh);
    overflow-y: auto;
}

.nav-notifications__item {
    border-top: 1px solid var(--color-slate-border-subtle);
}

.nav-notifications__link {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-fast) ease;
}

.nav-notifications__avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
}

.nav-notifications__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.nav-notifications__avatar--teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.nav-notifications__avatar--blue { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.nav-notifications__avatar--rose { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.nav-notifications__avatar--amber { background: linear-gradient(135deg, #d97706, #f59e0b); }

.nav-notifications__action-badge {
    position: absolute;
    right: -0.1rem;
    bottom: -0.1rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid var(--color-surface-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    line-height: 1;
}

.nav-notifications__action-badge--comment { background: #22c55e; }
.nav-notifications__action-badge--like { background: #3b82f6; color: #fff; font-size: 0.72rem; }
.nav-notifications__action-badge--wow { background: #f59e0b; }
.nav-notifications__action-badge--love { background: #ef4444; color: #fff; }
.nav-notifications__action-badge--share { background: #22c55e; color: #fff; font-weight: 700; }
.nav-notifications__action-badge--follow { background: #3b82f6; color: #fff; }

.nav-notifications__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.15rem;
}

.nav-notifications__text {
    display: block;
    font-size: 0.9rem;
    line-height: 1.35;
}

.nav-notifications__text q {
    quotes: '"' '"';
    font-style: normal;
    color: var(--color-text-muted);
}

.nav-notifications__meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.nav-notifications__unread {
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.55rem;
    border-radius: 50%;
    background: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .nav-notifications__link:hover {
        background: var(--color-surface-alt);
    }

    .nav-notifications__see-all:hover {
        text-decoration: underline;
    }
}

.nav-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: var(--color-danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 999px;
    line-height: 1;
}

.nav-sidebar-wrapper {
    display: none; /* Hidden by default on mobile */
}

/* Wrapper เนื้อหาหลักใน grid area content ของ Public App Shell */
.app-content-wrapper {
    grid-area: content;
}

/* ทับ legacy global.css `main { max-width: 1140px; margin: auto; padding: 20px }`
   — desktop + mobile: breadcrumb หน้าแรก ไม่กระโดดระหว่างหน้า member */
.nav-app-shell > .app-content-wrapper {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* Footer ของ Public App Shell (grid area footer) */
.nav-app-footer {
    grid-area: footer;
    padding: 1.5rem 1rem calc(5rem + env(safe-area-inset-bottom));
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.nav-app-footer p {
    margin: 0;
}

.nav-app-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.nav-app-footer a:hover {
    color: var(--nav-footer-hover-color);
    text-decoration: underline;
}

/* ==========================================================================
   MOBILE DRAWER & FAB
   ========================================================================== */

.nav-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--nav-drawer-backdrop);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

body.nav-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    overscroll-behavior: none;
}

.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--nav-drawer-width, 280px);
    height: 100%;
    background: var(--nav-drawer-bg);
    z-index: 1001;
    box-shadow: var(--nav-drawer-shadow);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.nav-drawer.is-open {
    transform: translateX(0);
}

.nav-drawer-backdrop.is-open {
    opacity: 1;
}

/* ส่วนหัวของ Mobile Drawer (brand + ปุ่มปิด) */
.nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.nav-drawer-header .nav-brand {
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--nav-drawer-brand-color);
}

/* ปุ่มปิด Mobile Drawer */
.nav-drawer-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--nav-drawer-close-btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.nav-fab-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 5.5rem; /* Above bottom nav */
    z-index: 40;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.nav-fab-stack.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Floating Action Button เปิดเมนูบนมือถือ */
.nav-fab {
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--nav-fab-shadow);
    transition: transform 0.15s, box-shadow 0.15s;
    background: var(--nav-fab-bg);
    color: var(--nav-fab-color);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-fab:active {
    transform: scale(0.97);
}

/* ==========================================================================
   DESKTOP SIDEBAR LAYOUT
   ========================================================================== */

@media (min-width: 1024px) {
    .nav-app-shell {
        grid-template-areas: 
            "sidebar header" 
            "sidebar content"
            "sidebar footer";
        grid-template-columns: 280px 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .nav-app-header {
        height: 64px;
        padding: 0 1.5rem;
        box-shadow: none;
        border-bottom: none;
        background: transparent;
        color: var(--color-text-heading);
        justify-content: space-between;
    }

    /* scroll ลง — เงา + พื้นหลังเดียวกับ body (--color-body); มือถือไม่ใช้กฎนี้ */
    .nav-app-header.is-scrolled {
        background: var(--color-body);
        box-shadow: var(--shadow-md);
    }

    .nav-app-header .nav-brand {
        color: var(--color-text-heading);
    }

    .nav-app-header .nav-drawer-toggle-btn {
        display: none; /* Hide toggle on desktop */
    }

    .nav-app-header .nav-actions .nav-btn {
        color: var(--color-text-muted);
    }

    .nav-sidebar-wrapper {
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        background-color: var(--nav-side-left-body-bg);
        border-right: none;
        box-shadow: none;
        z-index: 110;
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-sidebar-wrapper .nav-sidebar-header {
        display: flex;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        align-items: center;
        gap: 0.75rem;
        background: var(--nav-side-left-head-bg);
    }

    .nav-sidebar-brand-row {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        min-width: 0;
        flex: 1;
    }

    .nav-sidebar-logo-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    /* Documentation anchor: รูปโลโก้ใน Sidebar (desktop) */
    .nav-sidebar-logo {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        object-fit: cover;
        display: block;
        box-shadow: var(--nav-sidebar-logo-shadow);
    }

    .nav-sidebar-meta {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        flex: 1;
    }

    /* Documentation anchor: ชื่อองค์กรใน Sidebar (desktop) */
    .nav-sidebar-org-name {
        min-width: 0;
        font-size: 1rem;
        line-height: 1.4;
        font-weight: 700;
        color: var(--nav-side-left-text-color);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Documentation anchor: คำขวัญ/สโลแกนใน Sidebar (desktop) */
    .nav-sidebar-slogan {
        min-width: 0;
        font-size: 0.65rem;
        line-height: 1.4;
        font-weight: 400;
        color: var(--nav-side-left-text-color);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .nav-sidebar-toggle-desktop {
        appearance: none;
        border: 0;
        background: var(--nav-sidebar-toggle-bg);
        color: var(--nav-sidebar-toggle-color);
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 999px;
        display: none;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .nav-sidebar-toggle-desktop:hover {
        background: var(--nav-sidebar-toggle-hover-bg);
        color: var(--nav-sidebar-toggle-hover-color);
    }

    .nav-sidebar-toggle-desktop .nav-icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    .nav-sidebar-footer {
        margin-top: auto;
        padding: 0.75rem 1rem 1rem;
        border-top: none;
        display: flex;
        justify-content: flex-end;
        background: transparent;
    }

    .nav-sidebar-toggle-desktop {
        display: flex;
    }

    .nav-sidebar {
        padding: 1rem 1.25rem;
        flex-grow: 1;
    }

    .nav-tree-menu.nav-sidebar,
    .nav-tree-menu.nav-drawer-menu {
        background: none; /* Remove background if nav-tree-menu has one */
        border: none; /* Public app shell sidebar should not show global nav-tree box border */
        border-radius: 0; /* Keep public sidebar edge flush with layout */
        box-shadow: none;
    }

    /* Collapsed Sidebar */
    .nav-app-shell.is-collapsed {
        grid-template-columns: 72px 1fr;
    }

    .nav-app-shell.is-collapsed .nav-tree-text,
    .nav-app-shell.is-collapsed .nav-sidebar-meta {
        display: none;
    }

    .nav-app-shell.is-collapsed .nav-sidebar-wrapper .nav-sidebar-header {
        justify-content: center;
        padding-inline: 0.8rem;
    }

    .nav-app-shell.is-collapsed .nav-sidebar-brand-row {
        display: none;
    }

    .nav-app-shell.is-collapsed .nav-sidebar-logo-link {
        display: none;
    }

    .nav-app-shell.is-collapsed .nav-sidebar-footer {
        justify-content: center;
    }

    .nav-app-shell.is-collapsed .nav-tree-item {
        justify-content: center;
        padding: 0.6rem 0;
    }

    .nav-app-shell.is-collapsed .nav-tree-icon {
        margin-right: 0;
    }
    .nav-app-shell.is-collapsed .nav-tree-item--active .nav-tree-icon {
        color: var(--nav-tree-icon-active-color);
    }

    .nav-app-shell.is-collapsed .nav-sidebar-toggle-desktop {
        display: flex;
        justify-content: center;
    }

    .nav-app-header .nav-app-brand {
        display: none;
        color: var(--nav-app-brand-color);
    }

    .nav-app-shell.is-collapsed .nav-app-header .nav-app-brand {
        display: inline-flex;
    }

    .nav-bottom-mobile,
    .nav-drawer-backdrop,
    .nav-drawer,
    .nav-fab-stack {
        display: none !important; /* Hide mobile elements on desktop */
    }
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS
   ========================================================================== */

    @media (max-width: 1023px) {
    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Header ตรึงบนมือถือ — sticky พังเพราะ overflow บน shell */
    .nav-app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: calc(var(--z-sticky) + 10);
    }

    .nav-app-shell {
        grid-template-areas:
            "content"
            "footer"
            "bottom-nav";
        grid-template-rows: 1fr auto auto;
        overflow-x: hidden;
        max-width: 100%;
    }

    .nav-app-header .nav-drawer-toggle-btn {
        display: none !important; /* Hide header toggle button on mobile since we have it in Bottom Nav */
    }

    .nav-sidebar-wrapper {
        display: none;
    }

    /* app-content-wrapper — padding มือถือเพื่อไม่ทับ bottom nav + เว้นที่ header fixed */
    .app-content-wrapper {
        padding-top: 56px;
        padding-bottom: calc(75px + env(safe-area-inset-bottom)); /* Prevent content from being hidden by bottom nav with safe area */
        padding-left: 0;
        padding-right: 0;
        min-width: 0;
    }

    .nav-bottom-mobile {
        display: flex !important; /* Show bottom nav on mobile, override default display: none */
    }

    .nav-fab-stack {
        display: none !important; /* Hide FAB menu button on mobile since we have it in Bottom Nav */
    }

    /* Push layout — เลื่อน header/content/footer/bottom-nav ไปขวาเมื่อ drawer เปิด (ไม่ลอยทับ) */
    .nav-app-shell > :not(.nav-drawer):not(.nav-drawer-backdrop):not(.nav-fab-stack) {
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    body.nav-drawer-open .nav-app-shell > :not(.nav-drawer):not(.nav-drawer-backdrop):not(.nav-fab-stack) {
        transform: translateX(var(--nav-drawer-width, 280px));
    }

    body.nav-drawer-dragging .nav-drawer,
    body.nav-drawer-dragging .nav-app-shell > :not(.nav-drawer):not(.nav-drawer-backdrop):not(.nav-fab-stack) {
        transition: none;
    }

    body.nav-drawer-open .nav-drawer {
        touch-action: pan-y;
    }

    .nav-drawer-backdrop.is-open {
        display: block;
        background: transparent;
        left: var(--nav-drawer-width, 280px);
        width: calc(100% - var(--nav-drawer-width, 280px));
    }
}

/* ==========================================================================
   GROUP 1: Header Navs (เมนูด้านบน - LEGACY)
   ------------------------------------- */
/* 1.1 Classic Dropdown Navbar */
.nav-header-classic {
    background-color: var(--nav-head-bg);
    color: var(--nav-head-text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
}
.nav-brand {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 15px 0;
}
.nav-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: var(--nav-head-text-color);
    font-size: 24px;
    cursor: pointer;
}
.nav-menu-classic {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.nav-menu-classic > li {
    position: relative;
}
.nav-menu-classic a {
    display: block;
    padding: 15px 20px;
    color: var(--nav-head-text-color);
    text-decoration: none;
    transition: background 0.2s;
}
.nav-menu-classic a:hover {
    background-color: var(--nav-classic-hover-bg);
}
/* Dropdown CSS */
.has-dropdown > .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-surface-card);
    min-width: 200px;
    box-shadow: var(--shadow-md);
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    z-index: 100;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.has-dropdown:hover > .dropdown-list {
    display: block;
}
.dropdown-list > li > a {
    color: var(--color-text);
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
}
.dropdown-list > li > a:hover {
    background-color: var(--color-surface-alt);
    color: var(--nav-dropdown-hover-color);
}
/* Sub-dropdown (ระดับ 3) */
.has-subdropdown { position: relative; }
.has-subdropdown > .subdropdown-list {
    position: absolute;
    top: 0;
    left: 100%;
    background: var(--color-surface-card);
    min-width: 200px;
    box-shadow: var(--shadow-md);
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.has-subdropdown:hover > .subdropdown-list {
    display: block;
}

/* Responsive: Mobile Navbar */
@media (max-width: 768px) {
    .nav-toggle-btn { display: block; }
    .nav-menu-classic {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--nav-classic-mobile-bg);
        z-index: 99;
    }
    /* สถานะเมื่อกดเปิดเมนูนำทางแบบคลาสสิกบนหน้าจออุปกรณ์พกพา */
    .nav-menu-classic--active { display: flex; }
    .has-dropdown > .dropdown-list,
    .has-subdropdown > .subdropdown-list {
        position: static;
        display: none;
        box-shadow: none;
        background: var(--nav-classic-mobile-dropdown-bg);
    }
    .has-dropdown.open > .dropdown-list,
    .has-subdropdown.open > .subdropdown-list {
        display: block;
    }
    .dropdown-list > li > a { color: var(--nav-head-text-color); border-bottom: 1px solid var(--nav-hover-bg); padding-left: 40px; }
    .subdropdown-list > li > a { padding-left: 60px; background: rgba(0,0,0,0.15); }
}

/* -------------------------------------
   GROUP 2: Body Navs (เมนูในเนื้อหา)
   ------------------------------------- */
/* 2.1 Breadcrumbs */
.nav-breadcrumb {
    background: var(--color-surface-alt);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}
.nav-breadcrumb ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center;
}
.nav-breadcrumb li { display: flex; align-items: center; }
.nav-breadcrumb li + li::before {
    content: "›";
    padding: 0 10px;
    color: var(--color-text-muted);
    font-size: 1.2rem;
}
.nav-breadcrumb a { color: var(--nav-breadcrumb-link-color); text-decoration: none; }
.nav-breadcrumb a:hover { text-decoration: underline; }
.nav-breadcrumb .current { color: var(--color-text-muted); }

.nav-breadcrumb--flat {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-heading);
}

.nav-breadcrumb--flat ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.nav-breadcrumb--flat li {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-breadcrumb--flat li::marker {
    content: none;
}

.nav-breadcrumb--dot li + li::before {
    content: "";
    display: inline-block;
    width: var(--spacing-xs);
    height: var(--spacing-xs);
    margin: 0 var(--spacing-sm);
    border-radius: 50%;
    background: var(--color-slate-border-medium);
    flex-shrink: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.nav-breadcrumb--flat a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast) ease;
}

.nav-breadcrumb--flat a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.nav-breadcrumb--flat .current {
    color: var(--color-text-heading);
    font-weight: var(--font-weight-semibold);
}

/* 2.2 Sidebar Tree Accordion (สำหรับโครงสร้างลึกๆ) */
.nav-tree-menu {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px;
    max-width: 300px;
}
.nav-tree-menu.nav-sidebar,
.nav-tree-menu.nav-drawer-menu {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0;
    max-width: none;
}
.nav-tree-menu ul { list-style: none; padding: 0; margin: 0; }
.nav-tree-menu li { margin: 5px 0; }
.nav-tree-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; cursor: pointer; border-radius: var(--radius-md);
    border: none; background: transparent;
    color: var(--nav-side-left-body-text-color); text-decoration: none;
}
.nav-tree-item:hover { background: var(--nav-tree-item-hover-bg); color: var(--nav-tree-item-hover-color); }
.nav-tree-item:hover .nav-tree-icon { color: var(--nav-tree-icon-hover-color); }
.nav-tree-item--active { background: var(--nav-tree-item-active-bg); color: var(--nav-tree-item-active-color); font-weight: bold; }
.nav-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    color: var(--nav-tree-icon-color);
}
.nav-tree-item--active .nav-tree-icon { color: var(--nav-tree-icon-active-color); }
.nav-tree-text { flex-grow: 1; }
.tree-toggle-icon { font-size: 16px; color: var(--color-text-muted); transition: transform 0.2s; }
.tree-children { padding-left: 20px !important; display: none; }
.tree-children.open { display: block; }
.tree-node.open > .nav-tree-item > .tree-toggle-icon { transform: rotate(90deg); }

/* 2.3 Horizontal Tabs */
.nav-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    list-style: none; padding: 0; margin: 0;
    overflow-x: auto;
    white-space: nowrap;
}
.nav-tabs li { margin-bottom: -2px; }
.nav-tabs a {
    display: block; padding: 10px 20px;
    text-decoration: none; color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.nav-tabs a:hover { color: var(--nav-tabs-hover-color); }
.nav-tabs a.nav-tab-link--active {
    color: var(--nav-tabs-active-color); border-bottom: 2px solid var(--nav-tabs-active-border); font-weight: bold;
}

/* -------------------------------------
   GROUP 3: Footer Navs (เมนูด้านล่าง)
   ------------------------------------- */
/* 3.1 Footer Columns (PC & Tablet) */
.nav-footer-columns {
    background: #212529; color: #fff; padding: 40px 20px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px;
}
.nav-footer-columns h4 { margin-top: 0; color: #adb5bd; }
.nav-footer-columns ul { list-style: none; padding: 0; margin: 0; }
.nav-footer-columns a { color: #fff; text-decoration: none; display: block; padding: 5px 0; opacity: 0.8; }
.nav-footer-columns a:hover { opacity: 1; text-decoration: underline; }

/* 3.2 Mobile Bottom App Bar (Sticky) */
.nav-bottom-mobile {
    grid-area: bottom-nav;
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--nav-bottom-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--nav-bottom-border);
    box-shadow: var(--nav-bottom-shadow);
    z-index: 1000;
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom)); /* iOS safe area */
}
.nav-bottom-mobile ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nav-bottom-mobile ul li {
    flex: 1;
    display: flex;
    justify-content: center;
}
/* ปุ่มกดบนแถบเมนูด้านล่างบนมือถือ */
.nav-bottom-mobile a,
.nav-bottom-mobile .nav-bottom-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    text-decoration: none;
    color: var(--nav-bottom-color);
    font-size: 0.72rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease, transform 0.1s ease;
}
.nav-bottom-mobile a:active,
.nav-bottom-mobile .nav-bottom-btn:active {
    transform: scale(0.95);
}
.nav-bottom-mobile a:hover,
.nav-bottom-mobile .nav-bottom-btn:hover {
    color: var(--nav-bottom-hover-color);
}
/* สถานะ active ของ bottom navigation */
.nav-bottom-mobile a.nav-bottom-link--active {
    color: var(--nav-bottom-active-color);
    font-weight: 600;
}
/* ตำแหน่งไอคอนใน bottom navigation */
.nav-bottom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    transition: transform 0.2s ease;
}
.nav-bottom-mobile a.nav-bottom-link--active .nav-bottom-icon {
    transform: translateY(-1px);
}

/* Modifier เมื่อ mobile drawer หรือ backdrop เปิดอยู่ */
.is-open {}

/* Modifier แสดง FAB stack (opacity + pointer-events) */
.is-visible {}

/* ==========================================================================
   TOUCH DEVICES — ปิด sticky :hover ใน App Shell / Nav
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
    .nav-app-header .nav-drawer-toggle-btn:hover,
    .nav-actions .nav-btn:hover {
        background: none;
    }

    .nav-sidebar-toggle-desktop:hover {
        background: transparent;
        color: inherit;
    }

    .nav-app-footer a:hover {
        color: var(--color-text-muted);
    }

    .nav-menu-classic a:hover {
        background-color: transparent;
    }

    .dropdown-list > li > a:hover {
        background-color: transparent;
        color: var(--color-text);
    }

    .nav-breadcrumb a:hover,
    .nav-breadcrumb--flat a:hover {
        text-decoration: none;
    }

    .nav-tree-item:hover:not(.nav-tree-item--active) {
        background: transparent;
        color: var(--nav-side-left-body-text-color);
    }

    .nav-tree-item:hover:not(.nav-tree-item--active) .nav-tree-icon {
        color: var(--nav-tree-icon-color);
    }

    .nav-tabs a:hover:not(.active) {
        color: var(--color-text-muted);
    }

    .nav-footer-columns a:hover {
        opacity: inherit;
        text-decoration: none;
    }

    .nav-bottom-mobile a:hover:not(.nav-bottom-link--active),
    .nav-bottom-mobile .nav-bottom-btn:hover {
        color: var(--nav-bottom-color);
    }
}