/* One immutable navigation shell for every Hotel Board desktop page. */
.topbar {
  box-sizing: border-box !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
}

.topbar .menu {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: 216px !important;
  min-width: 216px !important;
  height: 40px !important;
  flex: 0 0 216px !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.topbar .menu button {
  box-sizing: border-box !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  box-shadow: none !important;
}

.topbar .menu button.on {
  background: var(--blue-tint) !important;
  color: var(--blue-dk) !important;
  box-shadow: none !important;
}

.topbar .menu button:hover:not(.on) {
  background: var(--bg) !important;
  color: var(--ink-2) !important;
}

.topbar .menu .ic {
  width: 20px !important;
  height: 20px !important;
}

.topbar .menu .document-nav {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.topbar .document-nav-menu {
  position: fixed;
  top: 56px;
  left: 16px;
  z-index: 80;
  display: none;
  width: 176px;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--hairline, #d3d7d3);
  border-radius: 14px;
  background: var(--surface, #f2f1ed);
  box-shadow: 0 12px 28px rgba(30, 38, 35, .16);
}

.topbar .document-nav.open .document-nav-menu {
  display: grid;
  gap: 2px;
}

.topbar .document-nav-menu a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.topbar .document-nav-menu a:hover,
.topbar .document-nav-menu a:focus-visible {
  outline: none;
  background: var(--bg);
  color: var(--ink);
}

.topbar .document-nav-menu a[aria-current="page"] {
  background: var(--blue-tint);
  color: var(--blue-dk);
}

/* One two-zone top bar: the split follows the content columns below it.
   Page markup only assigns controls to a zone; every measurement lives here. */
@media (min-width: 768px) {
  .topbar:has(> .topbar-zone-left) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    column-gap: 0 !important;
    padding: 0 !important;
  }

  .topbar > .topbar-zone-left,
  .topbar > .topbar-zone-right {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .topbar > .topbar-zone-left {
    padding: 0 16px !important;
    overflow: hidden !important;
  }

  .topbar > .topbar-zone-right {
    padding: 0 16px !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
  }

  /* Document pages still use their 16px content gap, but navigation must not
     jump when switching pages. The top bar always uses the same two zones and
     16px inner insets as Room/Maintenance/Consignment/Supply. */
  body:has(> .layout) > .topbar:has(> .topbar-zone-left) {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    column-gap: 0 !important;
    padding: 0 !important;
  }

  /* The zone boundary is the grouping device; no internal divider is used. */
  .topbar .vdiv {
    display: none !important;
  }

  .topbar .topbar-title {
    flex: 0 0 auto;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  .topbar .topbar-filters {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
  }

  .topbar .topbar-zone-right > button,
  .topbar .topbar-zone-right .tb-group > button {
    flex-shrink: 0;
  }

  .topbar .topbar-zone-right .btn {
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* If owner mode adds a fourth command, both exit controls collapse first.
     Print and the irreversible lock command keep their labels. */
  body.ownermode .topbar-zone-right #logoutbtn .bl,
  body.ownermode .topbar-zone-right .ownerchip > span {
    display: none !important;
  }

  body.ownermode .topbar-zone-right #printbtn .bl,
  body.ownermode .topbar-zone-right #lockbtn .bl {
    display: inline !important;
  }

  @media (max-width: 1150px) {
    .topbar-zone-left .cnt button {
      min-width: 0 !important;
      padding-left: 6px !important;
      padding-right: 6px !important;
      overflow: hidden !important;
    }

    .topbar-zone-right #printbtn,
    .topbar-zone-right #lockbtn {
      flex: 1 1 0 !important;
      width: auto !important;
    }

    .topbar-zone-right #printbtn .bl,
    .topbar-zone-right #lockbtn .bl {
      display: inline !important;
    }

    .topbar-zone-right #logoutbtn {
      flex: 0 0 40px !important;
      width: 40px !important;
    }

    .topbar-zone-right #logoutbtn .bl {
      display: none !important;
    }
  }
}

/* มือถือ (2026-07-25 ข้อ C): topbar เหลือแถวเดียว มีแค่ปุ่มที่จำเป็น
   - ไอคอน nav 6 อัน ซ้ำกับแถบเมนูล่าง (.mobbar) ที่ทำไว้แล้ว → ซ่อนทิ้ง
   - ชิพนับ ขาย/ฟรี/เสีย มีในใบสรุป (Room) / หัวเนื้อหา (#mobCntSlot ของ maintenance) แล้ว → ซ่อนทิ้ง
   ต้อง !important สู้ .menu{...!important} ด้านบนของไฟล์นี้เอง · หน้าไหนต้องคงบางส่วนไว้
   (เช่น .date ของ maintenance/consignment/supply ที่ไม่มีที่อื่นแสดง) override ในไฟล์หน้านั้น
   ซึ่งโหลดหลัง topbar-shell.css เสมอ */
@media (max-width: 767px) {
  /* คง overflow-x:auto ไว้ตามเดิม — consignment/supply ยังมีชิพหมวด (.cats) บนแถบ ซึ่งเป็นตัวกรอง
     ของหน้านั้นจริง ไม่ใช่ nav ซ้ำ · ถ้าเปลี่ยนเป็น hidden ชิพที่เกินขอบจะถูกตัดจนกดไม่ได้ */
  .topbar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .topbar .menu,
  .topbar .cnt {
    display: none !important;
  }

  /* ชื่อหน้าเป็นหน่วยเดียวกับตัวกรอง: ห้ามบีบจนแตกหลายบรรทัด
     ถ้าพื้นที่ไม่พอให้แถบบนเลื่อนในแนวนอนตามตัวกรองเดิม */
  .topbar .topbar-title {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Mobile pages stack or replace the right panel, so retain their existing
     one-line top bars instead of inventing a desktop boundary. */
  .topbar > .topbar-zone-shell {
    display: contents !important;
  }
}