/* app.css — Theme dùng chung cho khối trang danh sách: search + toolbar + table + laypage.
   Tách khỏi theme.css (chỉ lo khung/sidebar) để không đụng nhau. Accent #009688. */


/* ── Khối trang trong tab: chiều cao co theo nội dung, laypage bám ngay dưới bảng ── */
.app-list {
  padding: 12px 15px;
  box-sizing: border-box;
}

/* ── Thanh tìm kiếm: fieldset layui-elem-field lo khung/viền/legend; ở đây chỉ
   tinh chỉnh nền, màu viền và cỡ legend cho khớp gốc (#e6e6e6, accent xanh). ── */
.app-search {
  background: #fff;
  border-color: #e6e6e6;
  border-radius: 2px;
  margin-bottom: 12px;
}
.app-search > legend {
  font-size: 15px;
  color: #009688;
  font-weight: 500;
}
.app-search .layui-field-box { padding: 16px 16px 2px; }
.app-search .layui-form-item { margin-bottom: 14px; }
.app-search .layui-form-label { width: auto; padding: 9px 10px 9px 0; color: #5a5a5a; }
.app-search .layui-input-inline { width: 200px; }
.app-search .app-search-actions { padding-left: 10px; }

/* Quick-pick thời gian: khối select RIÊNG cạnh field date (khớp EE88 gốc). */
.app-quickdate {
  width: 100%; height: 38px; padding: 0 8px; border: 1px solid #e6e6e6;
  border-radius: 2px; background: #fff; color: #5a5a5a; cursor: pointer; font-size: 13px;
}

/* ── Nút xanh chủ đạo (#009688) khớp gốc ── */
.app-btn-primary,
.app-btn-primary:hover {
  background-color: #009688;
  border-color: #009688;
  color: #fff;
}
.app-btn-ghost {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  color: #555;
}
.app-btn-ghost:hover { border-color: #009688; color: #009688; }

/* ── Vùng bảng: nền trắng, không bọc card xám (khớp gốc — bảng nằm thẳng trên nền) ── */
.app-table-card {
  background: #fff;
  padding: 0;
}

/* Nút hành động trong toolbar đầu bảng (layui-table-tool-temp). */
.app-tbar-left .layui-btn + .layui-btn { margin-left: 8px; }

/* Đồng bộ accent + viền #e6e6e6 cho các thành phần table layui (khớp gốc) */
.app-table-card .layui-table-view { border-color: #e6e6e6; }
.app-table-card .layui-table-view .layui-table-tool { border-color: #e6e6e6; background-color: #f2f2f2; }
.app-table-card .layui-table td,
.app-table-card .layui-table th { border-color: #e6e6e6; }

/* Kẻ dọc (grid) + canh trái toàn bộ tiêu đề và dữ liệu — đồng bộ mọi bảng.
   !important để override align right/center khai báo lẻ trong từng cột config. */
.app-table-card .layui-table td,
.app-table-card .layui-table th { border-right: 1px solid #e6e6e6; }
.app-table-card .layui-table td,
.app-table-card .layui-table th,
.app-table-card .layui-table td .layui-table-cell,
.app-table-card .layui-table th .layui-table-cell { text-align: left !important; }

.layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: #009688; }
.layui-table-page .layui-laypage a:hover { color: #009688; }
.app-table-card .layui-table-cell .layui-btn-xs.app-btn-primary { padding: 0 8px; }

/* ── Tab Trang chủ (khối chào, không chứa bảng) ── */
.app-home { padding: 32px 28px; color: #5a5a5a; }
.app-home h2 { font-size: 20px; font-weight: 500; color: #333; margin-bottom: 8px; }

/* ── Trang form (đổi mật khẩu, rút tiền) ── */
.app-form-wrap { padding: 20px 15px; }
.app-form-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
}
.app-form-title { margin: 0 0 18px; font-size: 16px; font-weight: 500; color: #333; }
.app-form-card .layui-form-label { width: 160px; }
.app-form-card .layui-input-block { margin-left: 190px; }

/* ── Dialog đăng nhập (mở từ nav tài khoản góc phải) ── */
.app-login { padding: 22px 24px 24px; }
.app-login-field { position: relative; margin-bottom: 16px; }
.app-login-field > .layui-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #999; font-size: 16px; z-index: 1;
}
.app-login-field .layui-input { padding-left: 36px; height: 40px; }
.app-login-vercode { display: flex; align-items: center; }
.app-login-vercode .layui-input { flex: 1; }
.app-login-vercode .app-captcha {
  width: 110px; height: 40px; margin-left: 10px;
  border: 1px solid #e6e6e6; border-radius: 2px; cursor: pointer; object-fit: cover;
}
.app-login-hint { color: #999; font-size: 12px; margin: -4px 0 14px; }
.app-login-btn { width: 100%; height: 42px; line-height: 42px; margin-top: 4px; }

/* Số cookie sống trên header — 1 chấm xanh + số. */
.app-acct-count {
  display: inline-flex !important; align-items: center; gap: 5px;
  margin-left: 8px; white-space: nowrap;
}
.app-acct-count b { color: #5FB878; font-weight: 600; }
.app-acct-count .app-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #5FB878; box-shadow: 0 0 6px #5FB878;
}

/* Tiến độ đăng nhập hàng loạt */
.app-batch-progress {
  max-height: 160px; overflow-y: auto;
  margin: 8px 0 12px;
  font: 12px/1.7 monospace;
}
.app-batch-progress .ln.ok  { color: #5FB878; }
.app-batch-progress .ln.err { color: #FF5722; }

/* Dialog danh sách tài khoản */
.app-accounts { padding: 10px 14px; }
.app-accounts .layui-table { margin: 0; }
.app-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ccc; }
.app-dot.active { background: #5FB878; }
.app-dot.dead { background: #FF5722; }
.app-dot.pending { background: #FFB800; }

/* Bảng "Dữ liệu tổng hợp" riêng dưới laypage (giống trang gốc) */
.app-summary { margin-top: 14px; }
.app-summary-title { font-weight: 600; margin-bottom: 8px; color: #333; }
.app-summary-table { margin: 0; }
.app-summary-table thead th { background: #f7f8fa; color: #666; font-weight: 600; }
.app-summary-table tbody td { font-weight: 600; }
.app-summary-table .app-num { font-variant-numeric: tabular-nums; }
.app-summary-table .app-neg { color: #FF5722; }

/* ── BC hàng ngày ── */
.app-rp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-rp-bar .layui-form-label { width: auto; padding: 9px 10px 9px 0; }
.app-rp-status { color: #888; margin-left: auto; font-size: 13px; }
.app-rp-card { overflow: auto; }
.app-rp-table { margin: 0; table-layout: auto; }
.app-rp-table th { background: #f2f2f2; color: #555; font-weight: 600; text-align: right; white-space: nowrap; }
.app-rp-table td { text-align: right; white-space: nowrap; }
.app-rp-table th:first-child, .app-rp-table .app-rp-agent { text-align: left; }
.app-rp-agent { font-weight: 600; color: #333; }
.app-rp-table .app-num { font-variant-numeric: tabular-nums; }
.app-rp-table .app-neg { color: #FF5722; }
.app-rp-miss { color: #bbb; }
.app-rp-flag { color: #FF9800; font-size: 12px; font-weight: 500; }
.app-rp-row-miss { background: #fffaf0; }
.app-rp-load, .app-rp-err { text-align: center !important; color: #999; padding: 22px !important; }
.app-rp-err { color: #FF5722; }

/* Ô Online ngày click được → màu nhấn + gạch chân nhẹ gợi ý bấm xem danh sách. */
.app-rp-online { color: #2d8cf0; cursor: pointer; }
.app-rp-online:hover { text-decoration: underline; }

/* Dialog danh sách khách online: lưới nhiều cột (column-count đặt theo JS), tên
   HIỆN ĐỦ — KHÔNG cắt cụt. Tên dài tự xuống dòng, dòng tiếp thụt lề qua chỗ STT. */
.app-online-pop { padding: 14px 16px; }
.app-online-grid { column-gap: 18px; }
.app-online-item {
  break-inside: avoid; padding: 5px 2px; line-height: 1.5;
  border-bottom: 1px solid #f0f0f0; color: #333; font-size: 13px;
  /* hanging indent: STT thụt ra trái, tên dài wrap thẳng hàng dưới tên */
  padding-left: 34px; text-indent: -34px; word-break: break-all;
}
.app-online-stt {
  display: inline-block; min-width: 26px; margin-right: 8px; text-align: right;
  color: #999; font-variant-numeric: tabular-nums; text-indent: 0;
}

/* 2 cột online/offline cạnh nhau cho đại lý <500 khách. */
.app-online-2col { display: flex; gap: 20px; align-items: flex-start; }
.app-online-2col .app-online-side { flex: 1 1 0; min-width: 0; }
.app-online-head {
  font-weight: 700; font-size: 14px; padding: 4px 0 8px; margin-bottom: 6px;
  border-bottom: 2px solid currentColor;
}
.app-online-on { color: #2E7D32; }   /* xanh = online */
.app-online-off { color: #C62828; }  /* đỏ = offline */
.app-online-empty { color: #bbb; padding: 6px 2px; font-style: italic; }