/* File: /wwwroot/css/api.css
   Page: จองคิวนวดสำหรับพนักงาน (และหน้า API อื่น)
   Purpose: แยกสถานะเตียงออกจากสิทธิ์การจองรายวัน — สไตล์คิวของคุณ / ว่างที่กดไม่ได้ */
[hidden]{display:none!important}
.api-busy{pointer-events:none;opacity:.65}
.api-empty{padding:28px;text-align:center;color:var(--muted)}
.api-error{color:var(--danger);font-size:.9rem;margin-top:6px}
.modal .field select{width:100%}
.crud-modal .modal{max-width:720px}
.readonly-modal input,.readonly-modal textarea,.readonly-modal select,.readonly-modal button.searchable-select-trigger,.readonly-modal button.pseudo-control{pointer-events:none;background:#f3f6f9}
.readonly-modal .theme-radio{pointer-events:none}
.readonly-modal .modal-actions .btn-primary{display:none!important}
.table-loading td{text-align:center;color:var(--muted);padding:28px}
.hidden-by-permission{display:none!important}

@media(max-width:760px){.crud-modal .modal{width:min(94vw,720px)}}

/* SweetAlert */
.mq-swal-popup{
  width:min(340px,calc(100vw - 32px))!important;
  padding:20px 22px 18px!important;
  border-radius:14px!important;
}
.mq-swal-popup .swal2-icon{width:64px!important;height:64px!important;margin:0 auto 14px!important}
.mq-swal-popup .swal2-title{padding:0!important;margin:0 0 8px!important;font-size:1.35rem!important;line-height:1.35!important}
.mq-swal-popup .swal2-html-container{margin:0 0 16px!important;padding:0!important;font-size:.95rem!important;line-height:1.55!important}
.mq-swal-popup .swal2-actions{margin:0!important;gap:8px!important}
.mq-swal-popup .swal2-styled{min-width:84px!important;margin:0!important;padding:9px 16px!important}

/* Modal dropdown panels are portaled outside the modal by JavaScript. */
.topbar{justify-content:flex-end}
.modal-backdrop:not(.hidden){overflow-y:auto;align-items:start;justify-items:center;padding:24px 14px}
.modal-backdrop:not(.hidden)>.modal{max-height:none;overflow:visible;margin:auto 0}
.modal-backdrop .searchable-select-panel,
.modal-backdrop .pseudo-panel{z-index:10000!important}
.field input:invalid,.field textarea:invalid,.field select:invalid{border-color:var(--danger)}

/* Blacklist status on employee booking page. */
#page-booking .stat-card.blacklist-danger{
  background:linear-gradient(180deg,#fff7f7 0%,#fff0f0 100%)!important;
  border-color:#efb8b8!important;
  box-shadow:0 10px 24px rgba(190,55,55,.10)!important;
}
#page-booking .stat-card.blacklist-danger strong,
#page-booking .stat-card.blacklist-danger small{color:#c33f3f!important}
#page-booking .stat-card.blacklist-danger .stat-icon{background:#ffe1e1!important;color:#c33f3f!important}

/* Booking matrix: bed status vs daily quota (do not reuse employee-quota wording in cells) */
#page-booking .booking-quota-notice{margin:0 0 12px}
#page-booking .matrix-slot.mine{
  background:#e7f5ff!important;
  border-color:#7ec3e8!important;
  color:#0d5f95!important;
}
#page-booking .matrix-slot.mine .cell-badge{
  background:#d7effc!important;
  border-color:#8ecceb!important;
  color:#0d5f95!important;
}
#page-booking .matrix-slot.free-disabled,
#page-booking .matrix-slot.free:disabled{
  background:#f4fcf6!important;
  border-color:#cbe7d3!important;
  color:#276e43!important;
  cursor:not-allowed;
  opacity:.55;
}
#page-booking .matrix-slot.free-disabled .cell-badge,
#page-booking .matrix-slot.free:disabled .cell-badge{
  background:#dff4e6!important;
  border-color:#b7e0c2!important;
  color:#267243!important;
}
#page-booking .slot-dot.mine{
  background:#1287c9!important;
  border-color:#0d6fa8!important;
}

/* Room / bed editor: table must fit modal width without horizontal scroll. */
#roomModal .modal{max-width:720px;width:min(720px,calc(100vw - 28px))}
#roomModal .modal-body{overflow-x:hidden}
#roomModal .section.panel{overflow:hidden;min-width:0}
#roomModal .room-bed-panel-body{padding:12px 14px;overflow:hidden;min-width:0}
.room-bed-table-wrap{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
}
.room-bed-table{
  width:100%;
  max-width:100%;
  min-width:0!important; /* override global table{min-width:840px} */
  border-collapse:collapse;
  table-layout:fixed;
}
.room-bed-table col.room-bed-name-col{width:52%}
.room-bed-table col.room-bed-status-col{width:34%}
.room-bed-table col.room-bed-action-col{width:14%}
.room-bed-table th,.room-bed-table td{
  padding:8px 6px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  overflow:hidden;
}
.room-bed-table tr:last-child td{border-bottom:0}
.room-bed-table th{
  background:#f7fbff;
  color:#47617f;
  font-size:13px;
  text-align:left;
  white-space:nowrap;
}
.room-bed-table th:last-child,.room-bed-table td:last-child{text-align:center}
.room-bed-table .room-bed-name-input{
  width:100%;
  max-width:100%;
  min-width:0;
  height:34px;
  padding:6px 8px;
  border:1px solid #bfd6ea;
  border-radius:9px;
  background:#fff;
  box-sizing:border-box;
}
.room-bed-table .room-bed-status{
  display:inline-flex!important;
  flex-wrap:nowrap!important;
  align-items:center;
  justify-content:flex-start;
  gap:4px!important;
  min-width:0;
  max-width:100%;
  width:auto;
}
#roomModal .room-bed-table .room-bed-radio{
  width:auto!important;
  min-width:0!important;
  flex:0 0 auto!important;
  padding:4px 7px!important;
  gap:4px!important;
  border-radius:8px!important;
  font-size:12px!important;
  line-height:1.2!important;
  box-shadow:none!important;
  white-space:nowrap;
}
#roomModal .room-bed-table .room-bed-radio .theme-radio-label{
  font-size:12px;
}
#roomModal .room-bed-table .room-bed-radio .theme-radio-dot{width:12px;height:12px;border-width:1.5px;flex:0 0 auto}
#roomModal .room-bed-table .room-bed-radio .theme-radio-dot::after{inset:2px!important}
#roomModal .room-bed-table .api-bed-actions{
  width:auto!important;
  min-width:0!important;
  text-align:center!important;
  overflow:hidden;
}
#roomModal .room-bed-table .api-remove-bed:not([hidden]){
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:auto!important;
  min-width:0!important;
  min-height:30px;
  padding:4px 8px!important;
  border-radius:8px;
  font-size:12px;
}

/* Permission matrix is driven by actual actions per module, not a fixed four-column layout. */
#page-permissions .permission-grid{display:grid;gap:0}
#page-permissions .permission-row{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) auto!important;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
#page-permissions .permission-row:last-child{border-bottom:0}
#page-permissions .permission-row>strong{font-size:14px;grid-column:auto!important}
#page-permissions .permission-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px 18px}
#page-permissions .permission-check{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:72px;
  text-align:left!important;
  font-size:14px;
  white-space:nowrap;
}
#page-permissions .permission-check input{margin:0}

/* Employee import file picker. */
.themed-file-picker{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:6px;
  border:1px solid #c7dced;border-radius:12px;background:#fff;
}
.themed-file-input{
  position:absolute!important;width:1px!important;height:1px!important;
  opacity:0!important;overflow:hidden!important;pointer-events:none!important;
}
.themed-file-button{flex:0 0 auto;margin:0;cursor:pointer}
.themed-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14px}

/* Separate sticky heading used only on employee mobile booking matrix. */
.slot-matrix-sticky-head{display:none}

@media(max-width:900px){
  /* Browser page is the vertical scroller; the table wrapper handles horizontal scroll only. */
  body.role-employee .main{
    display:block!important;
    height:auto!important;
    min-height:100vh!important;
    overflow:visible!important;
    padding-bottom:92px!important;
  }
  body.role-employee .mobile-head{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
  }
  body.role-employee .content{
    min-height:0!important;
    overflow:visible!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:12px 10px 20px!important;
  }
  body.role-employee #page-booking,
  body.role-employee #page-booking .booking-matrix-panel,
  body.role-employee #page-booking .panel-body{overflow:visible!important}

  #page-booking .slot-matrix-sticky-head{
    position:sticky;
    top:var(--mq-mobile-header-height,70px);
    z-index:30;
    display:flex;
    width:min(var(--mq-mobile-matrix-width,200px),100%);
    min-width:0;
    height:57px;
    margin:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:12px 12px 0 0;
    background:#f8fbff;
    box-shadow:0 4px 10px rgba(28,68,105,.06);
  }
  #page-booking .slot-matrix-sticky-time{
    position:relative;
    z-index:2;
    flex:0 0 90px;
    width:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    border-right:1px solid var(--line);
    background:#f8fbff;
    color:#355178;
    font-size:13px;
    font-weight:700;
  }
  #page-booking .slot-matrix-sticky-room-viewport{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    background:#f8fbff;
  }
  #page-booking .slot-matrix-sticky-room-track{
    display:flex;
    height:100%;
    will-change:transform;
  }
  #page-booking .slot-matrix-sticky-room-cell{
    flex:0 0 110px;
    width:110px;
    min-width:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:7px 6px;
    border-right:1px solid var(--line);
    background:#f8fbff;
    color:#355178;
    text-align:center;
    font-size:12px;
    line-height:1.3;
  }
  #page-booking .slot-matrix-sticky-room-cell strong,
  #page-booking .slot-matrix-sticky-room-cell span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  #page-booking .slot-matrix-wrap{
    width:100%;
    max-height:none!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
    border-radius:0 0 12px 12px!important;
  }
  #page-booking .slot-matrix{
    width:var(--mq-mobile-matrix-width,200px)!important;
    min-width:var(--mq-mobile-matrix-width,200px)!important;
    max-width:var(--mq-mobile-matrix-width,200px)!important;
    table-layout:fixed!important;
    margin:0!important;
  }
  #page-booking .slot-matrix thead{display:none!important}
  #page-booking .slot-matrix .time-col{
    position:sticky!important;
    left:0!important;
    z-index:6!important;
    width:90px!important;
    min-width:90px!important;
    max-width:90px!important;
    background:#fbfdff!important;
    font-size:13px!important;
  }
  #page-booking .slot-matrix tbody td{
    width:110px!important;
    min-width:110px!important;
    max-width:110px!important;
  }
}

@media(max-width:520px){
  #roomModal .room-bed-panel-body{padding:10px}
  .room-bed-table th,.room-bed-table td{padding:6px 4px}
  .room-bed-table col.room-bed-name-col{width:42%}
  .room-bed-table col.room-bed-status-col{width:40%}
  .room-bed-table col.room-bed-action-col{width:18%}
  #roomModal .room-bed-table .api-bed-actions{width:auto!important;min-width:0!important}
  #roomModal .room-bed-table .room-bed-radio{padding:3px 5px!important;gap:3px!important;font-size:11px!important}
  #roomModal .room-bed-table .room-bed-radio .theme-radio-dot{width:11px;height:11px}
  #roomModal .room-bed-table .api-remove-bed:not([hidden]){min-width:0!important;padding:4px 6px!important;font-size:11px}
  #roomModal .room-bed-table th:last-child{white-space:normal;font-size:11px;line-height:1.2}

  #page-permissions .permission-row{grid-template-columns:1fr!important;gap:9px!important}
  #page-permissions .permission-row>strong{grid-column:1!important}
  #page-permissions .permission-actions{gap:9px 14px}
  #page-permissions .permission-check{min-width:66px;font-size:13px}

  .themed-file-picker{align-items:flex-start;flex-direction:column}
  .themed-file-name{width:100%}
}

/* Employee server-side pagination */
#page-employees{
  min-width:0;
  max-width:100%;
}
#page-employees .employees-panel{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
#page-employees .employees-table-wrap.desktop-table{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
#page-employees .employees-table{
  width:100%;
  min-width:1080px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
#page-employees .employees-table th,
#page-employees .employees-table td{
  font-size:14px;
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-employees .employees-table th:nth-child(1),
#page-employees .employees-table td:nth-child(1){
  width:64px;
  min-width:64px;
  max-width:64px;
  text-align:center;
}
#page-employees .employees-table th:nth-child(2),
#page-employees .employees-table td:nth-child(2){
  width:100px;
  min-width:100px;
  max-width:110px;
}
#page-employees .employees-table th:nth-child(3),
#page-employees .employees-table td:nth-child(3){
  width:180px;
  min-width:160px;
}
#page-employees .employees-table th:nth-child(4),
#page-employees .employees-table td:nth-child(4),
#page-employees .employees-table th:nth-child(5),
#page-employees .employees-table td:nth-child(5),
#page-employees .employees-table th:nth-child(6),
#page-employees .employees-table td:nth-child(6){
  width:140px;
  min-width:120px;
}
#page-employees .employees-table th:nth-child(7),
#page-employees .employees-table td:nth-child(7){
  width:170px;
  min-width:140px;
}
#page-employees .employees-table th:nth-child(8),
#page-employees .employees-table td:nth-child(8),
#page-employees .employees-table th:nth-child(9),
#page-employees .employees-table td:nth-child(9){
  width:110px;
  min-width:100px;
  max-width:120px;
  text-align:center;
  white-space:nowrap;
}
#page-employees .employees-table th:nth-child(10),
#page-employees .employees-table td:nth-child(10),
#page-employees .employees-table .action-col,
#page-employees .employees-table td.action-col{
  width:220px;
  min-width:220px;
  max-width:240px;
  overflow:visible;
  white-space:nowrap;
  text-align:center;
}
#page-employees .employees-table td.action-col .action-buttons,
#page-employees .employees-table td:nth-child(10) .action-buttons{
  display:inline-flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:6px;
}
#page-employees #employeesDatatableFooter{
  border-top:1px solid var(--line);
  padding:12px 16px;
  background:#fff;
}
#page-employees .employees-page-numbers{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
#page-employees .page-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Admin bookings table */
#page-bookings{
  min-width:0;
  max-width:100%;
}
#page-bookings .panel{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
#page-bookings .admin-bookings-table-wrap.desktop-table{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
#page-bookings .admin-bookings-table{
  width:100%;
  min-width:760px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
#page-bookings .admin-bookings-table th,
#page-bookings .admin-bookings-table td{
  font-size:14px;
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
}
#page-bookings .admin-bookings-table th:nth-child(1),
#page-bookings .admin-bookings-table td:nth-child(1){
  width:130px;
  min-width:120px;
}
#page-bookings .admin-bookings-table th:nth-child(2),
#page-bookings .admin-bookings-table td:nth-child(2){
  width:100px;
  min-width:92px;
}
#page-bookings .admin-bookings-table th:nth-child(3),
#page-bookings .admin-bookings-table td:nth-child(3){
  width:110px;
  min-width:100px;
  white-space:nowrap;
}
#page-bookings .admin-bookings-table th:nth-child(4),
#page-bookings .admin-bookings-table td:nth-child(4){
  width:180px;
  min-width:150px;
}
#page-bookings .admin-bookings-table th:nth-child(5),
#page-bookings .admin-bookings-table td:nth-child(5){
  width:140px;
  min-width:120px;
}
#page-bookings .admin-bookings-table th:nth-child(6),
#page-bookings .admin-bookings-table td:nth-child(6){
  width:120px;
  min-width:100px;
  text-align:center;
}
#page-bookings .admin-bookings-table th:nth-child(7),
#page-bookings .admin-bookings-table td:nth-child(7),
#page-bookings .admin-bookings-table .action-col{
  width:170px;
  min-width:150px;
  max-width:190px;
  overflow:visible;
  white-space:nowrap;
  text-align:center;
}
#page-bookings .admin-bookings-table td:nth-child(4){
  white-space:normal;
  word-break:break-word;
}
#page-bookings .admin-bookings-table .action-buttons{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
#page-bookings #adminBookingsDatatableFooter{
  border-top:1px solid var(--line);
  padding:12px 16px;
  background:#fff;
}

/* Employee my-queue history: keep cancel button fully visible */
#page-myqueue{
  min-width:0;
  max-width:100%;
}
#page-myqueue .panel{
  min-width:0;
  max-width:100%;
}
#page-myqueue .myqueue-history-table-wrap.desktop-table{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
#page-myqueue .myqueue-history-table{
  width:100%;
  min-width:0 !important;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
#page-myqueue .myqueue-history-table th,
#page-myqueue .myqueue-history-table td{
  font-size:14px;
  vertical-align:middle;
}
#page-myqueue .myqueue-history-table th:nth-child(1),
#page-myqueue .myqueue-history-table td:nth-child(1){
  width:64px;
  text-align:center;
}
#page-myqueue .myqueue-history-table th:nth-child(2),
#page-myqueue .myqueue-history-table td:nth-child(2){
  width:110px;
}
#page-myqueue .myqueue-history-table th:nth-child(3),
#page-myqueue .myqueue-history-table td:nth-child(3){
  width:120px;
  white-space:nowrap;
}
#page-myqueue .myqueue-history-table th:nth-child(4),
#page-myqueue .myqueue-history-table td:nth-child(4){
  width:auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-myqueue .myqueue-history-table th:nth-child(5),
#page-myqueue .myqueue-history-table td:nth-child(5),
#page-myqueue .myqueue-history-table .status-col{
  width:130px !important;
  min-width:120px !important;
  max-width:140px !important;
  text-align:center;
  white-space:nowrap;
  overflow:visible;
}
#page-myqueue .myqueue-history-table th:nth-child(6),
#page-myqueue .myqueue-history-table td:nth-child(6),
#page-myqueue .myqueue-history-table .action-col{
  width:100px !important;
  min-width:96px !important;
  max-width:110px !important;
  text-align:center;
  white-space:nowrap;
  overflow:visible !important;
}
#page-myqueue .myqueue-history-table .api-employee-cancel{
  padding:6px 12px;
  white-space:nowrap;
}

/* User modal searchable employee dropdown */
#userModal.modal-user .field-span-2{
  grid-column:1 / -1;
}
#userModal .searchable-select-panel{
  z-index:10001 !important;
}