/* =======================================================
   UI TRANG CHỦ — HERO + BOX CHAT MINI + DANH SÁCH MODULE
   File: assets/css/p_index.css
   Phụ thuộc: p_head.css (card, btn, input, biến màu ...)
   ======================================================= */

/* KHỐI 1: KHUNG CHUNG TRANG CHỦ */
.home-wrap {
  max-width: 1000px;
  margin: 16px auto;
  padding: 0 14px 18px;
}

/* Giữ card nền từ .card (p_head.css), chỉ tinh chỉnh thêm */
.home-hero-card {
  margin-bottom: 14px;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.65);
}

/* Nếu sau này muốn thêm nhiều nội dung hero thì có sẵn class */
.home-hero-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.home-hero-highlight {
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* KHỐI 2: BOX CHAT MINI TRANG CHỦ */

.home-chat-card {
  margin-bottom: 14px;
}

/* Tiêu đề + mô tả box chat */
.home-chat-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.home-chat-card p {
  margin: 0 0 6px;
  font-size: 13px;
}

/* Hàng nhập nội dung + nút Gửi */
.home-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.home-chat-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Khung danh sách tin nhắn mini — tự follow theme sáng/tối */
.home-chat-list {
  max-height: 230px;
  overflow-y: auto;   /* cuộn dọc nhiều tin */
  overflow-x: auto;   /* thêm thanh cuộn ngang cho nội dung dài */
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 6px 8px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.10), transparent 55%),
    radial-gradient(circle at bottom right, rgba(56,189,248,0.12), transparent 55%),
    var(--bg);   /* dark: nền tối, light: nền sáng */
  color: var(--fg); /* màu chữ mặc định theo theme */
}

/* thanh cuộn ngang mảnh hơn một chút */
.home-chat-list::-webkit-scrollbar {
  height: 4px;
}
.home-chat-list::-webkit-scrollbar-track {
  background: transparent;
}
.home-chat-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.7);
  border-radius: 999px;
}

/* Item tin nhắn: luôn chỉ 1 dòng,
   nội dung dài thì tràn ngang và dùng thanh cuộn của .home-chat-list */
.home-chat-item {
  font-size: 13px;
  padding: 4px 2px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.4);
  color: inherit;      /* kế thừa từ .home-chat-list */
  white-space: nowrap; /* CHỈ 1 DÒNG / 1 TIN */
}

.home-chat-item:last-child {
  border-bottom: none;
}

/* Tên user + phân loại */
.home-chat-user {
  font-weight: 600;
  margin-right: 4px;
}

/* Nội dung + các span con kế thừa rule không xuống dòng */
.home-chat-msg,
.home-chat-user,
.home-chat-system {
  color: inherit;
  white-space: inherit;
}

/* Tiền cộng/trừ trong tin hệ thống */
.home-chat-money-plus {
  color: #4ade80;
  font-weight: 600;
  margin-left: 4px;
}

.home-chat-money-minus {
  color: #fb7185;
  font-weight: 600;
  margin-left: 4px;
}

/* Trạng thái rỗng / loading */
.home-chat-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 10px 0;
}

.home-chat-system {
  color: #f97316 !important;
  font-weight: 700;
}


/* KHỐI 3: DANH SÁCH MODULE MÀU SẮC TRANG CHỦ */

.home-mod-shell {
  margin-top: 8px;
}

.home-mod-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mỗi module là 1 row clickable */
.home-mod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.65);
  transform: translateY(0);
  transition:
    transform 0.09s ease-out,
    box-shadow 0.09s ease-out,
    background 0.09s ease-out,
    border-color 0.09s ease-out;
}

/* Bên trái: title + mô tả */
.home-mod-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-mod-title {
  font-size: 15px;
  font-weight: 700;
}

.home-mod-desc {
  font-size: 13px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bên phải: pill "Vào xem" */
.home-mod-enter-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(15, 23, 42, 0.06);
  white-space: nowrap;
}

/* Hover module */
.home-mod-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
  border-color: rgba(15, 23, 42, 0.28);
}

/* Màu theo module
   Các class này được gán từ index.php, ví dụ:
   class="home-mod-row mod-color-yellow"
*/
.mod-color-silver {
  background: linear-gradient(135deg, #e5e7eb, #cbd5f5);
  color: #0f172a;
}

.mod-color-yellow {
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #0f172a;
}

.mod-color-cyan {
  background: linear-gradient(135deg, #22d3ee, #6366f1);
  color: #0f172a;
}

.mod-color-pink {
  background: linear-gradient(135deg, #e879f9, #f97373);
  color: #0f172a;
}

.mod-color-green {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #0f172a;
}

.mod-color-orange {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #0f172a;
}

.mod-color-gray {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: #0f172a;
}

/* Đảm bảo text/pill nhìn ổn trên nền sáng */
.mod-color-silver .home-mod-enter-pill,
.mod-color-yellow .home-mod-enter-pill,
.mod-color-cyan .home-mod-enter-pill,
.mod-color-pink .home-mod-enter-pill,
.mod-color-green .home-mod-enter-pill,
.mod-color-orange .home-mod-enter-pill,
.mod-color-gray .home-mod-enter-pill {
  border-color: rgba(15, 23, 42, 0.55);
  background: rgba(15, 23, 42, 0.06);
}

/* RESPONSIVE MOBILE */
@media (max-width: 640px) {
  .home-wrap {
    padding: 0 10px 14px;
  }

  .home-hero-card {
    padding: 12px 12px;
  }

  .home-chat-list {
    max-height: 210px;
  }

  .home-mod-row {
    padding: 9px 10px;
  }

  .home-mod-title {
    font-size: 16px;
  }

  .home-mod-desc {
    font-size: 12px;
  }

  .home-mod-enter-pill {
    display: none; /* mobile cho gọn */
  }
}