/* 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 8px !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: 260px !important;
  min-width: 260px !important;
  height: 40px !important;
  flex: 0 0 260px !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;
}

.topbar .menu button.on {
  box-shadow: none !important;
}

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

/* 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 8px !important;
    overflow: hidden !important;
  }

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

  /* Document pages use the shared 300px side column, 16px gap and 20px
     outer inset. The top bar mirrors that geometry without changing content. */
  body:has(> .layout) > .topbar:has(> .topbar-zone-left) {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 16px !important;
    padding: 0 20px !important;
  }

  body:has(> .layout) > .topbar > .topbar-zone-left,
  body:has(> .layout) > .topbar > .topbar-zone-right {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

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

  /* 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;
  }

  /* 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;
  }
}