/* Tin nhắn (#/tin-nhan, js/view-messages.js) and its modals (js/msg-modals.js), plus the shared bet table /
   summary row of js/betview.js (.bv-*, also used by Cú pháp and Doanh thu). Sizes and colours from
   research/ui/tts-dom.json "message-*" (tinhtienso.com, Nunito 12px #3f4254). Shell, buttons, forms, tables,
   tabs, modals and toasts are in ../styles.css (see UI-GUIDE.md). */

/* ================================================================== page frame */
/* content starts 10px from the sidebar; the site keeps the toolbar, tabs and table in a box that always
   shows its vertical scroll bar (15px on Windows) and, on a computer, fills the window under the breadcrumb */
.view-tin-nhan { padding: 0 10px 17px; }
.msg-page { min-width: 0; }
@media (min-width: 768px) {
  .msg-page { overflow-y: scroll; }
}
@media (min-width: 992px) {
  .msg-page { max-height: calc(100vh - 147px); max-height: calc(100dvh - 147px); }
}

/* ---------------------------------------------------------- toolbar */
.msg-toolbar { padding: 5px 17px 20px; }
.msg-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.msg-bar-right { display: flex; gap: 4px; margin-left: auto; }
.msg-bar .btn-icon-split .icon .ic { font-size: 12px; }
.msg-filters { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 -12px; }
.msg-fcol { flex: 0 0 16.6667%; max-width: 16.6667%; padding: 0 12px; }
.msg-fbtns { margin-left: 26px; }
.msg-fbtns .btn, .msg-mbtns .btn { height: 40px; }
.msg-fbtns .btn + .btn, .msg-mbtns .btn + .btn { margin-left: -1px; }
.msg-fbtns .btn .ic, .msg-mbtns .btn .ic { font-size: 12px; }
.msg-mbtns { display: none; }

@media (max-width: 767.98px) {
  .msg-toolbar { padding: 3px 17px 21px; }
  .msg-bar-left, .msg-split-del { display: none !important; }
  .msg-filters { display: block; margin: 0; }
  .msg-fcol { max-width: none; padding: 0; margin-bottom: 15.5px; }
  .msg-fbtns { display: flex; margin: 0 0 16px -1px; }
  .msg-fbtns .btn, .msg-mbtns .btn { height: 32px; }
  .msg-mbtns { display: flex; margin-left: -1px; }
}

/* ---------------------------------------------------------- tabs + options */
.msg-tabs .nav-link { flex: 1 1 auto; }
.msg-tabs .tab-short { display: none; }
@media (max-width: 767.98px) {
  .msg-tabs .tab-long { display: none; }
  .msg-tabs .tab-short { display: inline; }
}
.msg-tab-content { margin-top: -1px; padding-top: 5px; border-left: .8px solid #dddfeb; border-right: .8px solid #dddfeb; }
.msg-opts { padding: 0 13px; }
.msg-opts .custom-control { min-height: 25px; }
.msg-opts .custom-control-label { line-height: 25px; }
.msg-opts .custom-control-label::before, .msg-opts .custom-control-label::after { top: 4.5px; }
.msg-opts .custom-control-label::before { border-color: #adb5bd; border-radius: 4px; }
.msg-opts .custom-control-input:checked ~ .custom-control-label::before { background-color: #007bff; border-color: #007bff; }

/* ---------------------------------------------------------- table */
.msg-table-wrap { background: #fdfdfd; }
.msg-table { margin-bottom: 16px; }
.msg-table th, .msg-table td { line-height: 25px; }
.msg-table .row-total th { text-transform: none; }
.msg-table th.col-actions { white-space: normal; }
.msg-table td.empty-row { padding: 12px; }
.msg-table .nw, .msg-money .nw { white-space: nowrap; }
.msg-link { color: var(--link); white-space: nowrap; }
.msg-link:hover { color: #1d7f97; }
/* TIỀN ĐẶT / TIỀN TRÚNG: one line on a computer; on a phone the groups wrap at the spaces between them */
.msg-money { white-space: pre; }
@media (max-width: 767.98px) { .msg-money { white-space: pre-wrap; } }
.msg-dtl .msg-dl { white-space: pre; }
.msg-dtl .msg-dl-wins { white-space: normal; }
.msg-table .badge { vertical-align: 1px; }
.badge.bts-0 { background: #858796; }
.badge.bts-1 { background: #d9534f; }
.badge.bts-3 { background: #f0ad4e; }
.msg-actions { white-space: nowrap; }
.msg-ic {
  display: inline-block; height: 25px; padding: 0; margin: 0; border: 0; background: none; vertical-align: top;
  color: var(--body); font-size: 12px; line-height: 25px; cursor: pointer;
}
.msg-ic + .msg-ic { margin-left: 7.5px; } /* icons at +0 / +20 / +39 as the site's, column 76px */
.msg-ic:hover { color: #000; }
.msg-ic .ic { vertical-align: -1px; }
.msg-confirm-text {
  margin-top: 8px; padding: 8px 10px; border: .8px solid var(--td-line); border-radius: 5.6px; background: #f8f9fc;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ================================================================== modals */
.msg-modal .form-group > label { margin-bottom: 8px; font-weight: 500; line-height: 18px; }
/* Bootstrap 4 footer: .75rem padding + .25rem around each button = 64px tall, buttons 16px from the edge */
.msg-modal .modal-footer { padding: 16px; }
.msg-modal .table { margin-bottom: 0; }
/* Thêm Mới, Xóa tin nhắn and Phân loại đề open 30px from the top on the site (Chỉnh sửa / Lịch sử: 28px) */
@media (min-width: 576px) { .msg-add .modal-dialog, .msg-del .modal-dialog, .msg-del-one .modal-dialog, .msg-cls .modal-dialog { margin-top: 30px; } }
.msg-hint .pl-1 { padding-left: 4px; }

/* ---------------------------------------------------------- message textarea with red marks (Thêm Mới, Chỉnh sửa) */
.hl-wrap { position: relative; }
.hl-backdrop {
  position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
  border: .8px solid transparent; border-radius: 5.6px; background: #fff; pointer-events: none;
}
.hl-text, .hl-input { font-family: inherit; font-size: 12px; line-height: 1.5; letter-spacing: .1em; }
.hl-text {
  padding: 10px; color: transparent; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word;
}
.hl-text mark { padding: 0; border-radius: 0; color: transparent; background: transparent; }
.hl-text mark.hl-err { background: #f00; }
.hl-input.form-control { position: relative; z-index: 1; background: transparent; resize: vertical; }
.hl-input.form-control:focus { color: var(--body); }

/* Người chơi pickers: select2 classic look, ../styles.css (.select2-*) */


/* ---------------------------------------------------------- Thêm Mới */
.msg-add .modal-body { padding: 20px 33px 37px; }
.msg-add .form-group { margin-bottom: 16px; }
.msg-flag { display: flex; align-items: center; margin-bottom: 16px; line-height: 17px; }
.msg-flag label { margin: 0; padding-right: 16px; font-weight: 500; cursor: pointer; }
.msg-flag input { width: 13px; height: 13px; margin: 0; accent-color: #0075ff; cursor: pointer; }
.msg-hint { line-height: 16px; }
.msg-hint a { text-decoration: underline; }
.msg-check { margin-top: 17px; }
.msg-check-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.msg-check-head label { margin: 0; font-weight: 500; }
.msg-check-head .btn-sm { height: 28px; }
.msg-check-scroll { max-height: 150px; overflow-y: scroll; }
.msg-check-sub { margin: 10px 0 6px; font-weight: 700; color: #505b72; }

/* ---------------------------------------------------------- summary row (betview.summaryHtml) */
.bv-sum { display: grid; grid-template-columns: 7fr 2fr 3fr; align-items: baseline; gap: 4px 0; min-height: 21px; margin-bottom: 5px; }
.bv-sum-a { padding-left: 17px; }
.bv-sum-a span { display: inline-block; margin-right: 12.4px; }
.bv-sum-b, .bv-sum-c { padding-left: 12px; white-space: nowrap; }
.bv-sum-win { font-size: 14px; font-weight: 700; }

/* ---------------------------------------------------------- bet table (betview.betTableHtml) */
.bv-table th, .bv-table td { line-height: 18px; }
.bv-table .bv-hits { margin-left: 0; padding: 3px 7px; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.bv-table td.empty-row { padding: 12px; }
.bv-sub { margin: 12px 0 6px; font-weight: 700; color: #505b72; }
.bv-err-text {
  margin: 0 0 8px; padding: 8px 10px; border: .8px solid var(--input-line); border-radius: 5.6px; background: #fff;
  white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: .1em;
}
.bv-err-list { margin: 0 0 8px; padding-left: 18px; color: var(--danger); }
.bv-check .table { margin-bottom: 8px; }

/* ---------------------------------------------------------- Chỉnh sửa dữ liệu */
/* screen 08: labels 21px under the header, summary row at +198, tabs 5px under it, table box 300px, 16px to the footer
   (dialog 669px tall) */
.msg-edit .modal-body { padding: 21px 16px 16px; }
.ed-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: 0 29px 0 5px; }
.ed-row .form-group { margin-bottom: 21px; }
.ed-orig.form-control { resize: vertical; }
/* this modal's stars are pure red (Thêm Mới keeps text-danger #e74a3b) and the edited text is black (#messageEdit) */
.msg-edit .ed-row .text-danger { color: #f00 !important; }
.msg-edit .hl-input.form-control, .msg-edit .hl-input.form-control:focus { color: #000; }
.msg-edit .bv-sum { margin-bottom: 5px; }
.msg-edit .bv-sum-a { padding-left: 5px; }
.msg-edit .bv-sum-b, .msg-edit .bv-sum-c { padding-left: 0; }
.ed-scroll { max-height: 300px; margin-right: 24px; overflow-y: scroll; }
.ed-tabs { border-bottom: 3px solid #eaecf0; }
.ed-tabs .nav-link { flex: 1 1 0; }
.ed-table td { height: 85px; }

/* ---------------------------------------------------------- Lịch sử chỉnh sửa */
.hist-table { margin-bottom: 16px !important; }
.hist-table .hist-text { min-width: 140px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-hist .nw { white-space: nowrap; }

/* ---------------------------------------------------------- Xóa tin nhắn */
.del-form { padding: 0 12px; margin-bottom: 15px; }
.del-form > label { display: block; margin-bottom: 8px; line-height: 18px; }
.del-row { display: grid; grid-template-columns: 254px 254px; column-gap: 23px; }

/* ---------------------------------------------------------- Phân loại đề */
.pld-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pld-top .custom-control-label { display: inline-block; padding-top: 4px; line-height: 18px; }
.pld-top .custom-control-label::before { top: 5px; }
.pld-top .custom-control-label::after { top: 7px; }

.pld-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.pld-grid > .form-group { margin-bottom: 17px; }
.msg-cls select.pld-region {
  height: 29px; padding: 5px; background-image: none; appearance: auto; -webkit-appearance: auto;
}
.pld-item { margin-bottom: 16px; min-width: 0; }
.pld-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 9px; }
.pld-head label, .pld-trung { margin: 0; font-weight: 500; line-height: 17px; }
.pld-trung { display: block; margin-bottom: 8px; }
.pld-copy {
  flex: none; width: 12px; height: 16px; padding: 0; border: 0; background: none; color: var(--body);
  font-size: 12px; line-height: 16px; cursor: pointer;
}
.pld-copy:hover { color: #000; }
.pld-text.form-control { height: 94px; min-height: 0; resize: vertical; }

/* ---------------------------------------------------------- phone */
@media (max-width: 767.98px) {
  .ed-row, .pld-grid { grid-template-columns: 1fr; }
  .ed-row { padding: 0; }
  .ed-scroll { margin-right: 0; }
  .bv-sum { grid-template-columns: 1fr; }
  .bv-sum-a, .bv-sum-b, .bv-sum-c, .msg-edit .bv-sum-a { padding-left: 0; }
  .bv-sum-a span { margin-right: 10px; }
  .del-row { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}
@media (max-width: 575.98px) {
  /* D01 (so-do-modal-mobile.json, 390 × 844): the site's dialog is 359.4px wide from x=8 (not full width), the
     textarea starts at x=41.8 and is 291.8px wide (33px in from the dialog's inner edges on both sides) and sits
     at y=188.5; under the hint 37px before the footer, as on a computer */
  .msg-add .modal-dialog { width: calc(100% - 30.6px); }
  .msg-add .modal-body { padding: 21px 33px 37px; }
  .msg-edit .modal-body { padding: 16px; }
  .del-form { padding: 0; }
}