/* dashboard.css — Dùng LẠI giá trị CSS THẬT trích từ bundle gốc (study/raw/main-pNPJeUQ5.css)
   để giao diện khớp y chang, thay vì tô màu bằng mắt. */

/* ===== Body + Thanh trên ===== */
body { background-color: var(--app-bg, #fdf2f6); }
.dash-topbar { background-color: var(--app-nav-bg, #fdeef3) !important; padding: 6px 0; z-index: 1030; }
.name-pill {
  background: var(--d-pill-grad, linear-gradient(135deg, #f06292, #ba68c8)); color: #fff; border: none;
  border-radius: 22px; padding: 8px 18px; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.name-pill:hover { filter: brightness(0.96); color: #fff; }
.badge-offline {
  background: var(--d-primary-soft, #fde2ec); color: var(--d-primary, #be185d);
  border-radius: 14px; padding: 4px 10px; font-size: .75rem; font-weight: 700;
}
.ctx-select {
  border-radius: 16px; border: 1px solid var(--d-border, #f3c6d8); background: var(--d-surface, #fff);
  font-weight: 700; color: var(--d-primary, #be185d); min-width: 96px;
}

/* ===== 4 thẻ thống kê — bố cục 2×2 như web gốc, GRADIENT & MÀU THẬT ===== */
#dashboard-stats { margin-bottom: 8px; }
.stats-row { display: flex; gap: 12px; margin-bottom: 16px; }
.stats-col-students, .stats-col-year, .stats-col-month, .stats-col-today { flex: 1 1 50%; min-width: 0; }
.stats-card {
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  border-radius: 60px; min-height: 100px; box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}
/* thẻ tiền: icon trái, nhãn + số căn giữa phần còn lại */
.card-year, .card-month, .card-today { justify-content: center; text-align: center; position: relative; }
.card-year .stats-icon-circle, .card-month .stats-icon-circle, .card-today .stats-icon-circle { position: absolute; left: 22px; }
.stats-icon-circle {
  width: 54px; height: 54px; border-radius: 50%; background: var(--d-surface, #fff);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800;
  color: var(--d-circle-text, #db2777); flex-shrink: 0;
}
.stats-text-content { display: flex; flex-direction: column; min-width: 0; }
.stats-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; opacity: .85; letter-spacing: .5px; white-space: nowrap; }
.stats-value { font-size: 1.9rem; font-weight: 900; line-height: 1.15; white-space: nowrap; }

/* thẻ Học sinh: HỌC · số · SINH · — nằm ngang, căn giữa */
.card-hs { padding: 0 20px; }
.hs-count-section {
  display: flex; align-items: center; flex-shrink: 0; margin-right: 15px; padding-right: 5px;
}
.hs-count-section .hs-label { font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; color: var(--d-c1-text, #b0134e); }
.hs-number-circle {
  width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800;
  color: var(--d-circle-text, #c2185b); box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 0 6px;
}
.card-hs .hs-dash { font-size: 1.6rem; font-weight: 800; opacity: .5; }

/* Heartbeat animation cho số đếm học sinh (T24) — CHỈ áp cho số, không áp cho vòng tròn nền */
@keyframes heartbeat {
  0%  { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
.heartbeat-text {
  animation: heartbeat 1.8s ease-in-out infinite;
  transform-origin: center center;
  display: inline-block;
}

/* Cụm chip lớp (pill) 2 tầng thẻ Học Sinh (T24) */
.class-pills-area {
  display: flex; align-items: center; gap: 6px; max-width: 180px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.class-pills-area::-webkit-scrollbar { display: none; }
.class-pill {
  position: relative; width: 45px; height: 85px; background: var(--d-surface, #ffffff);
  border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; margin: 0 3px; cursor: pointer; transition: transform 0.2s ease;
}
.class-pill:hover { transform: translateY(-5px); }
.cp-val {
  position: absolute; top: 8px; font-weight: 900; font-size: 0.8rem; color: #555;
}
.cp-icon {
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  font-weight: 700; font-size: 0.6rem; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 2px dashed rgba(255,255,255,0.5);
}

/* 4 thẻ thống kê — bộ màu do theme quyết định (themes.css) */
.card-hs    { background: var(--d-c1-grad); color: var(--d-c1-text); border: 1.5px solid var(--d-c1-border); }
.card-year  { background: var(--d-c2-grad); color: var(--d-c2-text); border: 1.5px solid var(--d-c2-border); }
.card-month { background: var(--d-c3-grad); color: var(--d-c3-text); border: 1.5px solid var(--d-c3-border); }
.card-today { background: var(--d-c4-grad); color: var(--d-c4-text); border: 1.5px solid var(--d-c4-border); }
.stats-card { box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05), inset 0 1px rgba(255,255,255,.7); }

/* ===== KHUNG CARD BỌC CHUNG TOOLBAR & 4 NÚT HÀNH ĐỘNG (T25) ===== */
.filter-area {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--d-pink, #FFD1DC);
  border-radius: 25px;
  padding: 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}

.dash-toolbar {
  background: var(--d-surface, #fff);
  border-radius: 18px;
  padding: 8px 16px;
  border: 1px solid var(--d-pink, #FFD1DC);
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-toolbar input.search {
  border: none; outline: none; flex: 1; font-size: .95rem; background: transparent; color: #1f2937;
}
.dash-toolbar .class-filter {
  border: none; outline: none; color: #6b7280; font-weight: 700; background: transparent;
}

/* Hàng 4 nút hành động — MÀU GỐC THẬT TỪ HOME.HTML (T25) */
.quick-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px;
}
.date-pill {
  background: var(--d-surface, #fff); border: 1px solid var(--d-pink, #FFD1DC);
  color: var(--d-primary, #C2185B); border-radius: 50px; padding: 7px 16px;
  font-weight: 800; font-size: .9rem; display: inline-flex; gap: 6px; align-items: center;
}
.qbtn {
  background: rgba(194, 24, 91, 0.06);
  border: 1px solid rgba(194, 24, 91, 0.15);
  color: var(--d-primary, #C2185B);
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-schedule { box-shadow: 0 3px 10px rgba(67,160,71,0.3); } /* Lịch Dạy — bóng đổ xanh lá nhẹ, còn lại giống 3 nút kia */

.qbtn:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

/* ===== KHUNG BẢNG HỌC SINH (T25 → dùng .table-container từ modal.css) ===== */
.dash-empty { text-align: center; color: #c98aa8; padding: 36px 0; }
.att-yes { color: #16a34a; } .att-no { color: #d1d5db; }

/* Tên học sinh: font Fredoka + chữ Gradient cầu vồng trôi mượt (T25) */
.name-gradient {
  font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: capitalize;
  background: linear-gradient(90deg, var(--d-dark-pink, #FF6B9D), var(--d-primary, #C850C0), var(--d-circle-text, #4158D0), var(--d-primary, #C850C0));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: vibeShimmer 3s linear infinite;
}

@keyframes vibeShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Badge Tên Lớp trong Bảng (T25) */
.vt-class {
  background: #FFF5F7;
  color: #D81B60;
  border: 1px solid #FFCCD5;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.6px;
  font-weight: 700;
}

/* Ô Học phí (T25) */
.vt-fee {
  color: #D81B60;
  font-weight: 800;
  font-size: 18.4px;
}

@media (max-width: 560px) {
  .stats-row { flex-direction: column; gap: 12px; margin-bottom: 12px; }
  .stats-col-students, .stats-col-year, .stats-col-month, .stats-col-today { flex: 1 1 100%; }
  .stats-card { min-height: 76px; border-radius: 34px; }
}

/* Dashboard entrance animations */
.dash-anim-card {
  animation: dashSlideUp .5s ease both;
}
@keyframes dashSlideUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.dash-anim-fade {
  animation: dashFadeIn .4s ease .2s both;
}
@keyframes dashFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Header */
  .dash-topbar .container-xl { flex-wrap: wrap !important; gap: 4px !important; padding: 4px 8px !important; }
  .dash-topbar select { font-size: .7rem !important; padding: 3px 6px !important; min-width: 70px !important; }
  #headerRibbon { font-size: 12px !important; padding: 3px 8px !important; }
  #brand-name { font-size: 12px !important; }
  #sync-status-dot { padding: 4px !important; }

  /* Stats cards — HỌC SINH + TỔNG NĂM ngang hàng, THÁNG + HÔM NAY xuống hàng */
  #dashboard-stats { display: flex !important; flex-direction: row !important; gap: 8px !important; margin-bottom: 8px !important; }
  #dashboard-stats .stats-col-students,
  #dashboard-stats .stats-col-year { flex: 1 1 50% !important; min-width: 0 !important; }
  #dashboard-stats + .stats-row { display: flex !important; flex-direction: row !important; gap: 8px !important; }
  #dashboard-stats + .stats-row .stats-col-month,
  #dashboard-stats + .stats-row .stats-col-today { flex: 1 1 50% !important; min-width: 0 !important; }
  .stats-card { min-height: 56px !important; border-radius: 28px !important; padding: 0 10px !important; gap: 8px !important; }
  .stats-card .stats-icon-circle { width: 32px !important; height: 32px !important; font-size: 1rem !important; left: 10px !important; }
  .stats-value { font-size: 1.1rem !important; }
  .stats-label { font-size: .62rem !important; }
  .hs-number-circle { width: 40px !important; height: 40px !important; font-size: .9rem !important; }
  .hs-count-section .hs-label { font-size: .9rem !important; }
  .hs-count-section { margin-right: 6px !important; }
  .class-pills-area { max-width: 80px !important; }
  .class-pill { width: 34px !important; height: 60px !important; }

  /* Filter — search + class ngang hàng */
  .filter-area { padding: 8px !important; border-radius: 16px !important; }
  .filter-area .row { flex-direction: row !important; gap: 6px !important; }
  .filter-area .col-8 { flex: 1 1 60% !important; max-width: 60% !important; }
  .filter-area .col-4 { flex: 1 1 40% !important; max-width: 40% !important; }
  .filter-area input, .filter-area select { font-size: .72rem !important; padding: 6px 10px !important; }

  /* Action buttons — date + Xem ĐD ngang hàng, ĐD + NX + LD xuống hàng */
  .quick-actions { gap: 4px !important; margin-top: 6px !important; }
  #toolsOld { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; width: 100% !important; }
  #toolsOld .dp-trigger { font-size: .7rem !important; padding: 4px 8px !important; flex: 0 0 auto !important; }
  .btn-view, .btn-take, .btn-review, .btn-schedule { font-size: .65rem !important; padding: 5px 10px !important; border-radius: 40px !important; }
  .mob-nav-row { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; width: 100% !important; }
  .mob-nav-row button { flex: 1 1 30% !important; font-size: .62rem !important; padding: 4px 6px !important; margin: 0 !important; }

  /* Table */
  .table-container { border-radius: 14px !important; border-width: 2px !important; }
  table { font-size: .7rem !important; }
  th, td { padding: 4px 3px !important; }
  .name-gradient { font-size: 14px !important; }
  .col-name { max-width: 100px !important; }
  .col-class, .col-att, .col-session, .col-price { font-size: .6rem !important; }

  /* Panels */
  .dash-toolbar { padding: 4px 8px !important; gap: 6px !important; }
  .date-pill { font-size: .7rem !important; padding: 4px 8px !important; }
  .btn-back { font-size: .7rem !important; padding: 5px 12px !important; }

  /* Internal views */
  #takeArea .take-header-bar { padding: 6px 4px !important; gap: 3px !important; border-radius: 14px 14px 0 0 !important; }
  .cal-summary-btn { font-size: .65rem !important; padding: 3px 6px !important; }
  .cal-toggle-btn { width: 26px !important; height: 26px !important; }
  .cp-cal-cell { padding: 3px 0px !important; font-size: .68rem !important; min-height: 24px !important; border-radius: 6px !important; }
  .cp-date-title { font-size: .75rem !important; min-width: 80px !important; }
  .cp-date-nav-btn { width: 26px !important; height: 26px !important; font-size: .9rem !important; }
  .cp-date-today-btn { font-size: .65rem !important; padding: 2px 8px !important; }

  /* Schedule */
  .sch-toolbar { flex-direction: column !important; gap: 4px !important; }
  .sch-btn-back, .sch-btn-add { font-size: .7rem !important; padding: 4px 10px !important; }
  .week-tt-th { font-size: .55rem !important; padding: 2px 1px !important; }
  .week-tt-cell { font-size: .6rem !important; padding: 2px 1px !important; }
  .week-tt-slot { font-size: 9px !important; padding: 3px 4px !important; }
  .today-schedule-card { padding: 10px !important; border-radius: 14px !important; }

  /* Review */
  #reviewArea .review-header-bar { padding: 6px 4px !important; border-radius: 14px 14px 0 0 !important; }

  /* Modal fullscreen */
  .adm-modal { max-width: 100% !important; border-radius: 0 !important; max-height: 100vh !important; border-width: 2px !important; }
  .cfg-scroll { max-width: 100% !important; border-radius: 12px !important; max-height: 95vh !important; }
}

@media (max-width: 400px) {
  .stats-value { font-size: .95rem !important; }
  .stats-label { font-size: .55rem !important; }
  .hs-count-section .hs-label { font-size: .8rem !important; }
  .name-gradient { font-size: 13px !important; }
  .btn-view, .btn-take, .btn-review, .btn-schedule { font-size: .58rem !important; padding: 4px 8px !important; }
}