/* Sidebar tự cuộn trong phần màn hình còn lại; không đẩy trang theo cuộn ngang. */
.tts-sidebar-scroll { overflow-x: hidden; scrollbar-gutter: stable; }

/* Bảng trong modal nhận focus và cuộn ngang bằng bàn phím, không lan cuộn sang trang nền. */
#app .modal :is(.table-responsive, .msg-table-wrap, .secretary-table-scroll,
  .msg-edit-summary-panel, .msg-edit-detail-panel) {
  min-width: 0; max-width: 100%; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #a4bfd2 #f1f5f9;
}
#app .modal :is(.table-responsive, .msg-table-wrap, .secretary-table-scroll,
  .msg-edit-summary-panel, .msg-edit-detail-panel):focus-visible {
  outline: 2px solid var(--tts-xanh, #146db1); outline-offset: -2px;
}
#app .secretary-modal .secretary-table thead th { position: sticky; top: 0; z-index: 2; }
/* Nhiều modal dùng body flex: header/footer không được co, phần giữa mới cuộn. */
#app :is(.msg-modal, .contact-modal, .company-modal, .blog-management-modal) .modal-content { min-width: 0; }
#app :is(.msg-modal, .contact-modal) :is(.modal-header, .modal-footer) { flex-shrink: 0; }
#app .msg-modal .modal-footer { flex-wrap: wrap; }

/* Màn thấp hoặc mobile: cho thân Sửa tin cuộn hết nội dung; bỏ khung cuộn dọc
   bên trong bảng để không kẹt giữa hai vùng cuộn. Textarea vẫn tự cuộn khi nhập. */
@media (max-width: 767px), (max-height: 700px) {
  #app .msg-edit-modal .msg-edit-body { overflow-y: auto; }
  #app .msg-edit-modal .msg-edit-body > .msg-edit-results {
    flex: 0 0 auto; overflow: visible; grid-template-rows: auto auto;
  }
  #app .msg-edit-modal :is(.msg-edit-summary-panel, .msg-edit-detail-panel) {
    max-height: none; overflow-x: auto; overflow-y: visible;
  }
}

/* Nút lên đầu trang ở góc phải dưới, không cộng khoảng trống tổng báo cáo cũ. */
#app .tts-shell .scroll-to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1035;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 1px solid #d6e3ef; border-radius: 50%;
  background: #fff; color: var(--tts-xanh, #146db1);
  box-shadow: 0 4px 16px rgb(35 51 78 / 16%);
  font-size: 16px; line-height: 1; text-decoration: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, background-color .15s ease;
}
#app .tts-shell .scroll-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
#app .tts-shell .scroll-to-top:hover { background: #edf5fc; color: var(--tts-navy, #22356b); }
#app .tts-shell .scroll-to-top:focus-visible { outline: 2px solid var(--tts-xanh, #146db1); outline-offset: 3px; }
#app .tts-shell .scroll-to-top i { font-weight: 900; }
#app .tts-shell.tts-has-bottombar .scroll-to-top {
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--tts-bottombar-height, 54px) + env(safe-area-inset-bottom) + 12px);
}
body.modal-open #app .scroll-to-top { display: none; }
@media (prefers-reduced-motion: reduce) {
  #app .tts-shell .scroll-to-top { transition: none; }
}
@media print {
  #app .tts-shell .scroll-to-top { display: none; }
}