/* ===================================================================
   topnav4.css — เมนูแถบบน 2 ชั้น (หมวดหมู่ + เมนูย่อยของหมวดที่เลือก) แทน sidebar ซ้ายเดิม
   ใช้เฉพาะจอกว้างกว่า 860px เท่านั้น (breakpoint เดียวกับที่ระบบใช้อยู่แล้วทั้งแอป — ดู
   MobileShell.BREAKPOINT ใน js/mobile-shell.js) — บนมือถือ (≤860px) ซ่อนแถบนี้ทั้งหมด แล้วกลับไปใช้
   แถบเมนูล่างลอย + sidebar เดิมเป็น drawer เหมือนเดิมทุกประการ (ไม่ต้องออกแบบเพิ่มฝั่งมือถือเลย)

   sidebar (js/app.js #sidebar) เองเปลี่ยนบทบาทเป็น "off-canvas drawer อย่างเดียว" ทุกความกว้างจอแล้ว
   (ดูการแก้ .app-shell/.sidebar ใน layout.css) — บนจอกว้างมันจะไม่ถูกเปิดเลยเพราะปุ่มเปิด (mobile-menu-btn/
   ปุ่ม "เมนู" ของ mobile-bottom-nav) ถูกซ่อนไว้ด้วย CSS อยู่แล้วเช่นกัน จึงไม่ชนกับ topnav4 เลย
   =================================================================== */

#topnav4 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  #topnav4 {
    display: none;
  }
}

/* ---------- แถวบน: แบรนด์ + หมวดหมู่ (คลิกพาไปหน้าแรกของหมวด) + สาขา/ผู้ใช้/ออกจากระบบ ---------- */
/* ธีมเข้มเดียวกับ sidebar เดิม (override ตัวแปรสีเฉพาะในขอบเขตนี้ — แพทเทิร์นเดียวกับ .sidebar ใน layout.css) */
.n4-top {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 52px;
  padding: 0 16px;
  background: var(--sidebar-bg);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex-shrink: 0;

  --accent: var(--dark-nav-accent, #D9B36C);
  --text: #F2EFEA;
  --text-dim: #C7CDD0;
  --text-faint: #8A9296;
}

.n4-top::-webkit-scrollbar {
  height: 4px;
}
.n4-top::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.n4-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 10px;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.n4-brand .sq {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.n4-cat-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  /* เดิม hardcode var(--text-dim) ตรงๆ (ค่าเฉพาะขอบเขต .n4-top เท่านั้น ไม่มี token ให้ปรับ) ทำให้ตั้งค่า
     "ตัวอักษร — เมนูที่ยังไม่ได้เลือก" ในหน้าธีมไม่มีผลกับแถบเมนูบนเลย (มีผลแค่ sidebar มือถือ) แก้ให้อ้างอิง
     token เดียวกับ .nav-item ใน layout.css (fallback เป็นค่าเดิมทุกประการถ้ายังไม่เคยตั้งค่า) */
  color: var(--nav-item-text, var(--text-dim));
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}

.n4-cat-item i {
  font-size: 16px;
  flex-shrink: 0;
}

.n4-cat-item:hover {
  color: var(--nav-item-text-hover, var(--text));
  background: rgba(255, 255, 255, 0.06);
}

.n4-cat-item.active {
  color: var(--nav-item-text-hover, var(--text));
}

.n4-cat-item.active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.n4-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 14px;
  flex-shrink: 0;
}

.n4-property {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  max-width: 170px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.n4-property:hover {
  border-color: var(--accent);
  color: var(--text);
}

.n4-property i:first-child {
  font-size: 14px;
  flex-shrink: 0;
}

.n4-property i:last-child {
  font-size: 13px;
  flex-shrink: 0;
  color: var(--text-faint);
}

.n4-property span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.n4-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #1C2326;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.n4-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.n4-logout-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.n4-logout-btn i {
  font-size: 15px;
}

/* ---------- แถวล่าง: เมนูย่อยของหมวดที่เลือกอยู่ (ธีมปกติของแอป ไม่ใช่ธีมเข้ม) ---------- */
.n4-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex-shrink: 0;
}

.n4-sub::-webkit-scrollbar {
  height: 4px;
}
.n4-sub::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}

/* ไม่มีหมวดที่เลือกอยู่ (เช่นหน้า "ภาพรวม") — ยุบแถวนี้ไปเลย ไม่เว้นพื้นที่ว่างค้าง */
.n4-sub.is-empty {
  display: none;
}

/* ใช้คลาส .nav-item เดียวกับเมนู sidebar เดิม (ได้สไตล์ active/hover สีต่อเมนู + ระบบ SidebarIconPrefs
   มาฟรีจาก layout.css) แค่ override ให้เป็นทรงแนวนอนกะทัดรัดแทนทรงแถวยาวแนวตั้งของ sidebar เดิม */
.n4-sub .nav-item {
  padding: 7px 12px;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.n4-sub .nav-item .ti {
  font-size: 15px;
}

.n4-sub .nav-item:hover {
  /* ตัดระยะเลื่อน translateX(2px) ของ sidebar ทิ้ง — ไม่เข้ากับแถวแนวนอนที่ต้องคงตำแหน่งกับปุ่มข้างๆ */
  transform: none;
}

.n4-sub .nav-item.active:hover {
  transform: none;
}