/* 10/10/2026 (anh Hiếu duyệt): giao diện điện thoại — chỉ áp dụng màn hình nhỏ; máy tính giữ nguyên. */
.tabs-toggle{display:none}
@media(max-width:600px){
  /* 1. Đầu trang gọn: logo nhỏ, 3 nút trên 1 hàng */
  .topbar{flex-direction:row!important;flex-wrap:wrap;align-items:center!important;padding:8px 10px!important;border-radius:14px!important;gap:6px!important}
  .brand{gap:8px}.brand img{width:36px!important;height:36px!important;border-radius:10px;padding:2px}
  .brand b{font-size:16px!important}.brand small{font-size:11px!important;line-height:1.3}
  .topbar-actions{width:100%;display:flex!important;flex-wrap:nowrap!important;gap:6px!important}
  .topbar-actions .button,.topbar .topbar-actions .button.ghost{flex:1 1 0;font-size:11px!important;padding:6px 4px!important;min-height:32px;line-height:1.2}
  /* 2. Menu: 1 thanh mỏng "☰ Menu · trang đang mở", bấm mới xổ ra */
  #tabs{position:sticky;top:0;z-index:30;background:var(--bg,#f4f7f5);box-shadow:0 6px 12px #0a50300f}
  #tabs .tabs-toggle{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:#0f6b43;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
  #tabs .tabs-toggle small{font-weight:600;opacity:.85;font-size:12px}
  #tabs.m-collapsed>:not(.tabs-toggle){display:none!important}
  #tabs:not(.m-collapsed){max-height:80vh;overflow-y:auto}
  #tabs:not(.m-collapsed) .tab{font-size:13px!important;padding:10px 6px!important}
  /* 3. Bảng → thẻ: mỗi dòng 1 thẻ, tên cột hiện nhỏ phía trên giá trị, không phải kéo ngang */
  .table-wrap{overflow:visible!important;max-width:100%;border:0!important;background:none!important}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%;box-sizing:border-box}
  .table-wrap thead{display:none}
  .table-wrap table{min-width:0!important}
  .table-wrap td{overflow-wrap:anywhere;word-break:break-word}
  .content{overflow-x:hidden}
  .table-wrap tr{border:1px solid var(--line,#dfe9e3);border-radius:12px;margin:0 0 10px;padding:8px 12px;background:#fff}
  .table-wrap td{border:0!important;padding:5px 0!important;text-align:left!important;white-space:normal!important}
  .table-wrap td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:#6b7c72;font-weight:600;margin-bottom:2px}
  .table-wrap td:empty{display:none}
  .table-wrap .actions{display:flex;flex-wrap:wrap;gap:6px}
  .table-wrap .actions .button{flex:1 1 auto}
}

/* 10/10/2026 (anh Hiếu): trên điện thoại gom thanh lọc lịch thành 1 hàng trượt ngang; ô máy gọn lại */
@media (max-width: 600px) {
  .schedule-view-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .schedule-view-bar::-webkit-scrollbar { display: none; }
  .schedule-view-button { flex: 0 0 auto !important; width: auto !important; min-height: 40px; padding: 6px 12px !important; white-space: nowrap; font-size: 14px; }
  .schedule-filter { padding: 8px !important; }
  #teamMachineBanner { padding: 10px 12px !important; }
  #teamMachineBanner p { margin: 4px 0; }
  .tb-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  .tb-row > * { flex: none !important; min-height: 44px; padding: 6px 8px !important; }
  .tb-row .tb-box { grid-column: 1 / -1; order: 3; padding: 4px 8px !important; }
  .tb-row .tb-box button { min-height: 34px; padding: 4px 12px !important; }
  .tb-walkin br { display: none; }
  .schedule-result-confirmation { padding: 8px 10px !important; }
}

/* 10/10/2026 (anh Hiếu): "Hoàn thành nhiệm vụ" gói gọn trong 1 màn hình điện thoại */
@media (max-width: 600px) {
  dialog:has(.cpl) { width: calc(100% - 12px) !important; max-height: 98dvh !important; }
  dialog:has(.cpl) #dialogForm { max-height: 98dvh !important; }
  #dialogBody:has(.cpl) { padding: 10px 12px 6px !important; }
  #dialogBody:has(.cpl) > h2 { font-size: 18px; margin: 2px 0 6px; padding-right: 44px; }
  dialog:has(.cpl) .dialog-x { width: 38px; height: 38px; top: 6px; right: 6px; font-size: 17px; }
  dialog:has(.cpl) .dialog-actions { padding: 8px 12px !important; }
  dialog:has(.cpl) .dialog-actions .button { min-height: 42px; padding: 8px 14px; }
  .cpl, .cpl .completion-payment > .form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px 8px !important; }
  .cpl .span-2, .cpl .completion-payment, .cpl .photo-field, .cpl .payment-summary { grid-column: 1 / -1 !important; }
  .cpl label { font-size: 12px; line-height: 1.25; margin: 0; }
  .cpl input:not([type=checkbox]):not([type=file]), .cpl select { min-height: 36px !important; height: 36px; padding: 4px 8px !important; font-size: 14px !important; margin-top: 2px; }
  .cpl .cpl-hide, .cpl .compact-note { display: none !important; }
  .cpl p { margin: 0; }
  .cpl .card, .cpl .payment-summary { padding: 6px 10px !important; margin: 0 !important; font-size: 13px; line-height: 1.35; }
  .cpl .completion-payment { padding: 0 !important; margin: 4px 0 0 !important; border: 0 !important; background: none !important; }
  .cpl .completion-payment h3 { font-size: 14px; margin: 2px 0 4px !important; }
  .cpl .photo-field { gap: 4px; }
  .cpl .photo-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cpl .photo-actions .button { min-height: 36px !important; padding: 4px 6px !important; font-size: 13px; }
  .cpl .payment-qr img { max-width: 140px; }
}
@media (max-width: 600px) {
  .cpl #prescriptionStatus, .cpl #proofStatus, .cpl .photo-field [id$="Status"] { padding: 4px 8px !important; font-size: 12px !important; margin: 2px 0 0 !important; line-height: 1.3; }
  .cpl .photo-field > .field-label { font-size: 12px; }
  .cpl .badge.warn { padding: 2px 8px; font-size: 12px; }
}