/* Doanh thu (#/doanh-thu) and Doanh thu phân loại (#/doanh-thu-phan-loai): page styles, sizes and colours
   from research/ui/tts-dom.json "money-*" / "revenue-desktop*" (Bootstrap 4 look, Nunito 12px #3f4254).
   Shell, buttons, forms, tables, tabs, modals and toasts are in ../styles.css (see UI-GUIDE.md).
   Markup: js/view-revenue.js, js/view-bytype.js, js/revenue-ui.js (filters, lines under the table, modals). */

/* ---------------------------------------------------------- page box (content starts at sidebar + 10px) */
/* filters + table sit in a box that always shows a vertical scroll track (15px on Windows: ▲ beside the filters,
   ▼ under the table, screens 14 / 18), as on Danh bạ and Tin nhắn; the lines under the table are outside it */
.view-doanh-thu, .view-doanh-thu-phan-loai { padding: 0 10px 28px; }
.rev-wrap { overflow-y: scroll; }

/* ---------------------------------------------------------- filter bar */
.rev-filter .custom-control { min-height: 24px; }
.rev-filter .custom-control-label { display: inline-block; line-height: 24px; }
.rev-filter .custom-control-label::before, .rev-filter .custom-control-label::after { top: 4px; }
.rev-range { margin: 5px 0 0 5px; }
/* Bootstrap row of col-md-2 (inputs 154px at 1366px) + the button group */
.rev-row { display: flex; flex-wrap: wrap; align-items: stretch; margin: 16px 6px 0 5px; }
.rev-col { flex: 0 0 16.6667%; max-width: 16.6667%; min-width: 0; padding: 0 12px; }
.rev-btns { flex: 0 0 auto; min-width: 0; padding: 0 12px; margin-left: 14px; }
.rev-btn-group { display: flex; flex-wrap: nowrap; }
.rev-btn-group .btn { height: 40px; flex: none; }
.rev-btn-group .btn + .btn { margin-left: -1px; }
.rev-btn-group .btn .ic { font-size: 12px; }
/* dd/mm/yyyy date box of js/date-field.js (also used by Cú pháp tin nhắn), calendar: js/datepicker.js */
.tts-date { position: relative; }
.rev-checks { margin: 21px 0 0 4px; }
.rev-checks:not(.is-inline) .custom-control { display: block; }
.rev-checks.is-inline .custom-control-inline { margin-right: 16px; }

/* ---------------------------------------------------------- tables (Bootstrap .table.table-bordered.table-responsive) */
.view-doanh-thu .table, .view-doanh-thu-phan-loai .table { margin: 16px 0 16px; background: transparent; border: 0; }
.view-doanh-thu .table td, .view-doanh-thu-phan-loai .table td { color: var(--body); }
.view-doanh-thu .table .noborders, .view-doanh-thu-phan-loai .table .noborders { background: #fff; border: 0 !important; }
.view-doanh-thu .table thead th.noborders { background: #fff; }
.rev-money td p { margin: 0 0 16px; }
.rev-money .rev-hoi { white-space: nowrap; }
.rv { font-weight: 700; }
.rev-num { cursor: pointer; }
.rev-win { color: var(--link); }
.rev-win:hover { color: #1b7389; }
.rev-actions { white-space: nowrap; }
.rev-actions p { margin: 0 0 16px; }
.rev-actions .btn { min-height: 32px; min-width: 38px; padding: 6px 12px; }
.rev-actions .btn .ic-eye { width: 14px; }

/* Doanh thu phân loại matrix */
.rev-type .rev-type-head td {
  background: var(--th-red); color: #fff; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle;
}
.rev-type .rev-type-head td.noborders { background: #fff; }
.rev-type .rev-sub, .rev-type .rev-val { white-space: nowrap; }
.rev-type .rev-mid { vertical-align: middle; }
.rev-type .rev-net { white-space: nowrap; }
.rev-type .rev-grp { text-align: center; white-space: nowrap; }
/* no player row: no table, only the room the site leaves before the totals (audit D03) */
.rev-type-none { height: 32px; }

/* ---------------------------------------------------------- lines under the table (col-md-3 x 4) */
/* padding (not margin) so the 10px add to the table's 16px margin, as the site's .row */
.rev-lines { display: flex; flex-wrap: wrap; margin: 0 -5px; padding-top: 10px; line-height: 18px; }
.rev-lines-col { flex: 0 0 25%; max-width: 25%; min-width: 0; padding: 0 12px; }
.view-doanh-thu-phan-loai .rev-lines { margin-right: -4px; }

/* ---------------------------------------------------------- modals */
.rev-modal .modal-footer { padding: 12px; gap: 0; }
.rev-modal .modal-footer .btn { margin: 4px; }
.rev-modal-scroll { overflow: auto; -webkit-overflow-scrolling: touch; }
.rev-modal .table { background: transparent; }
.rev-detail-head { margin-bottom: 10px; }
/* Danh sách trúng (80% wide, 13px table) */
.rev-wins-modal .modal-dialog { max-width: 80%; }
.rev-wins-sum { margin: 5px 0 5px 4px; line-height: 18px; }
.rev-wins-sum span { display: inline-block; margin-right: 13px; }
/* the table box shows both scroll bars (screen 15): table 1020px wide in the 80% dialog */
.rev-wins-scroll { height: 300px; margin: 0 24px 40px 0; overflow: scroll; }
.rev-wins-table { font-size: 13px; }
.rev-wins-table thead th { font-size: 13px; }
.rev-wins-table td.rv { font-weight: 700; }
.rev-eye-link { color: var(--primary); font-size: 13px; }
.rev-eye-link .ic { width: 15px; }
/* Danh sách tin nhắn (1300px) */
.rev-msgs-scroll { height: 480px; }
.rev-msgs-table { width: calc(100% - 24px); }
.rev-msgs-table th:nth-child(1) { width: 5.9%; }
.rev-msgs-table th:nth-child(2) { width: 18.4%; }
.rev-msgs-table th:nth-child(3) { width: 44.1%; }
.rev-msgs-table th:nth-child(4) { width: 15.3%; }
.rev-msgs-table th:nth-child(5) { width: 16.3%; }
.rev-msg-link { color: var(--link); overflow-wrap: anywhere; }
.rev-parts span { display: inline-block; margin-right: 10px; }
/* Doanh thu (COPY TIN NHẮN) */
.rev-old { line-height: 21px; }
.rev-old input {
  width: 145px; height: 21px; padding: 1px 2px; margin: 0 2px; vertical-align: top;
  border: 2px solid #767676; border-radius: 2px; background: #fff; color: var(--body); font: inherit; font-size: 12px;
}
.rev-old input.is-invalid { border-color: var(--danger); }
.rev-copy-modal textarea.form-control { height: auto; min-height: 0; resize: vertical; }

/* ---------------------------------------------------------- phone / tablet */
@media (max-width: 991.98px) {
  .view-doanh-thu, .view-doanh-thu-phan-loai { padding: 0 10px 24px; }
  .rev-range { margin-top: 3px; }
}
@media (max-width: 767.98px) {
  .rev-row { margin: 16px 5px 0; }
  .rev-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 16px; }
  .rev-btns { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0 0 0 11px; overflow-x: auto; scrollbar-width: none; }
  .rev-btns::-webkit-scrollbar { display: none; }
  .rev-btn-group .btn { height: 32px; }
  .rev-lines, .view-doanh-thu-phan-loai .rev-lines { margin: 0 -5px; }
  .rev-lines-col { flex: 0 0 100%; max-width: 100%; }
  .rev-wins-modal .modal-dialog { max-width: none; }
  .rev-wins-scroll { margin-right: 0; }
  /* phones scroll these tables sideways instead of squeezing every column */
  .rev-wins-table { min-width: 640px; }
  .rev-msgs-table { width: 100%; min-width: 760px; }
}