body { background: #f0f2f7; font-size: 15px; margin: 0; padding: 0; }

.view { display: none; }
.view.active {
  display: block; position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #f0f2f7; z-index: 10; overflow-y: auto;
}
#viewLogin.active, #viewReset.active { display: flex; align-items: center; justify-content: center; }

.btn-toggle-password {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #6c757d; padding: 4px 8px;
  cursor: pointer; font-size: 18px; line-height: 1;
}
.btn-toggle-password:hover { color: #0d6efd; }

.app-layout { display: grid; grid-template-columns: 260px 1fr; height: 100vh; overflow: hidden; }
.sidebar { background: #fff; border-right: 1px solid #dee2e6; overflow-y: auto; height: 100vh; }
.main-area { overflow-y: auto; height: 100vh; }

/* Danh sách rating: bộ lọc đứng yên, chỉ danh sách bill cuộn bên trong */
#contentList { height: 100%; display: flex; flex-direction: column; }
#contentList > .card { flex-shrink: 0; }
.rating-list-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

.nav-tab {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px;
  font-size: 13px; font-weight: 500; border: none; border-radius: 8px;
  background: transparent; color: #6c757d; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.nav-tab:hover  { background: #f0f4ff; color: #0d6efd; }
.nav-tab.active { background: #e6f0ff; color: #0d47a1; }
.nav-tab i { font-size: 15px; }

.rating-card { border-left: 4px solid #dee2e6; transition: box-shadow .2s; }
.rating-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.rating-card.bad  { background: #fdf1f1; border-left-color: #dc3545; }
.rating-card.good { background: #f1faf4; border-left-color: #198754; }

.rating-branch {
  font-size: 15px; font-weight: 700; color: #343a40;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}

/* ── Table badge (số bàn) ─────────────────────────────────────────── */
.table-badge {
  font-size: 14px; font-weight: 700; padding: 3px 10px;
  border-radius: 6px; display: inline-block;
}
.table-badge.dinein  { background: #fff3cd; color: #7a5800; }
.table-badge.takeout { background: #d9d9d9; color: #495057; }

.rating-divider { border: none; border-top: 1px dashed rgba(0,0,0,.5); margin: 6px 0; }

/* ── Nút sửa xử lý (icon-only) ────────────────────────────────────── */
.edit-result-btn {
  color: #0a3622; text-decoration: none; flex-shrink: 0;
}
.edit-result-btn:hover { color: #0d6efd; }

.dash-pb {
  padding: 4px 12px; font-size: 12px; border: 1px solid #dee2e6; border-radius: 20px;
  background: #fff; color: #6c757d; cursor: pointer; transition: all .15s;
}
.dash-pb:hover  { border-color: #0d6efd; color: #0d6efd; }
.dash-pb.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }

.dash-metrics { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 12px; }
@media (max-width: 1200px) { .dash-metrics { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .dash-metrics { grid-template-columns: repeat(2, 1fr); } }
.dm-card { background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid #e9ecef; }
.dm-label { font-size: 11px; color: #6c757d; margin-bottom: 4px; }
.dm-val   { font-size: 22px; font-weight: 600; color: #212529; }
.dm-sub   { font-size: 11px; color: #adb5bd; margin-top: 2px; }
.dm-card.good .dm-val    { color: #0F6E56; }
.dm-card.bad .dm-val     { color: #A32D2D; }
.dm-card.warning .dm-val { color: #856404; }

.dash-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 1200px) { .dash-charts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dash-charts { grid-template-columns: 1fr; } }
.dash-chart-card { background: #fff; border-radius: 10px; padding: 14px; border: 1px solid #e9ecef; min-width: 0; }
.dash-chart-card.dash-full { grid-column: 1 / -1; }

/* Phân bố theo chi nhánh + Thống kê nhân viên: cùng 1 hàng, chia đều
   2 cột 50/50; xếp chồng khi màn hẹp. */
.dash-branch-staff-row {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.dash-branch-staff-row .dash-chart-card.dash-full { grid-column: auto; }
@media (max-width: 900px) { .dash-branch-staff-row { grid-template-columns: 1fr; } }
.dash-chart-title { font-size: 13px; font-weight: 500; color: #343a40; margin-bottom: 6px; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #6c757d; margin-bottom: 8px; }
.dl { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 3px; vertical-align: middle; }