/* ===== App Navbar (Bootstrap 4) ===== */
.app-navbar{
  border:0; border-radius:0;
  box-shadow:0 2px 10px rgba(2,6,23,.06);
}

/* Brand: กันชื่อยาวดัน layout */
.app-navbar .navbar-brand.app-navbar__brand{
  display:flex; align-items:center; gap:8px;
  max-width:65vw; margin-right:1rem; white-space:nowrap;
}
.app-navbar__avatar{ font-size:20px; opacity:.9 }
.app-navbar__name{
  font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:48vw;
}
.app-navbar__pos{
  margin-left:6px; padding:2px 6px; border-radius:6px;
  background:#eef2ff; color:#1f2a44; font-weight:600;
  font-size:12px; line-height:1.2; white-space:nowrap;
}

/* กล่องปุ่มฝั่งขวา – กันขอบขวา (ชิดพอดีเมื่อจอ >= lg) */
.app-navbar__actions{ margin-right:.25rem; }
@media (min-width:576px){ .app-navbar__actions{ margin-right:.5rem; } }
@media (min-width:992px){
  .app-navbar__actions{ margin-right:0; } /* flush กับ container-fluid */
}

/* ปุ่มออกจากระบบ: ไอคอนกึ่งกลางแน่นอน + แสดง label เฉพาะจอใหญ่ */
.app-navbar__actions .btn-logout{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; width:40px;                 /* xs-sm: ไอคอนอย่างเดียว */
  padding:0; line-height:1; border-radius:10px; gap:8px;
}
.app-navbar__actions .btn-logout i{
  display:block; font-size:20px; line-height:1; margin:0;
}
.app-navbar__actions .btn-logout .label{
  display:none; font-weight:700; white-space:nowrap;
}

/* จอใหญ่ขึ้น (≥ lg): ปุ่มยืดได้และโชว์คำว่า "ออกจากระบบ" */
@media (min-width:992px){
  .app-navbar__actions .btn-logout{
    width:auto; padding:0 .85rem;
  }
  .app-navbar__actions .btn-logout .label{
    display:inline;
  }
}

/* มือถือเล็ก: ลดขนาด touch target + ซ่อนตำแหน่ง */
@media (max-width:575.98px){
  .app-navbar .navbar-brand.app-navbar__brand{ max-width:calc(100vw - 90px); }
  .app-navbar__name{ max-width:calc(100vw - 120px); }
  .app-navbar__pos{ display:none; }
  .app-navbar__actions .btn-logout{ width:36px; height:36px; }
}