:root {
  --gold: #d4af37;
  --gold-soft: #f0d98c;
  --ink: #2a2118;
  --paper: #fdf8ef;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #1c140c;
  color: var(--ink);
  /* Font hệ thống chuẩn — render dấu tiếng Việt đẹp và nhất quán trên mọi
     máy/điện thoại, không cần tải font ngoài. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

.rosary-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.rosary-circle {
  position: relative;
  width: min(92vw, 520px);
  aspect-ratio: 564 / 793;
  /* --bg-image do JS set theo backgroundUrl trả về từ API (tuỳ tháng) —
     mặc định ảnh tháng 10 phòng khi JS chưa kịp chạy. Phủ thêm lớp tối mờ
     lên trên để các nốt ngày/số/popup nổi rõ hơn, ảnh gốc vẫn thấy được. */
  --bg-image: url("assets/background.jpg");
  background-image: linear-gradient(rgba(10, 7, 4, 0.4), rgba(10, 7, 4, 0.4)), var(--bg-image);
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 0 6px var(--gold), 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ---------- bead (ngày) ---------- */
.day-bead {
  position: absolute;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--paper);
  background: rgba(60, 45, 30, 0.75);
  border: 2px solid rgba(240, 217, 140, 0.6);
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  z-index: 2;
}

.day-bead.is-future {
  opacity: 0.35;
}

.day-bead.is-completed {
  background: rgba(46, 95, 58, 0.85);
  border-color: var(--gold-soft);
}

.day-bead.is-completed:hover {
  transform: scale(1.25);
  z-index: 5;
}

.day-bead.is-prominent {
  background: var(--gold);
  color: #3a2a0a;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.35), 0 0 18px rgba(212, 175, 55, 0.9);
  animation: pulse 2.2s ease-in-out infinite;
  z-index: 4;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.35), 0 0 12px rgba(212, 175, 55, 0.8); }
  50% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.2), 0 0 24px rgba(212, 175, 55, 1); }
}

.day-bead.is-selected {
  transform: scale(1.3);
  z-index: 6;
}

/* ---------- avatar cụm quanh 1 ngày ---------- */
.avatar-cluster {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.avatar-cluster .avatar {
  position: absolute;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  border-radius: 50%;
  border: 2px solid var(--gold-soft);
  object-fit: cover;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.avatar-cluster.is-enlarged .avatar {
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
}

/* Bong bóng "+N" khi nhóm đông, thay cho phần avatar bị cắt bớt trong vòng */
.avatar-cluster .avatar-overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #3a2a0a;
  font-size: 11px;
  font-weight: bold;
}

/* ---------- popup thông tin 1 ngày (bám theo nốt, tự lật hướng) ---------- */
.day-popup {
  position: absolute;
  /* Cố tình thấp hơn mọi .day-bead (z-index 2-6) — popup có thể tràn qua
     đè lên 1 nốt ngày khác (hoặc chính nốt neo của nó sau khi bị kéo vào
     trong bởi clampPopupToContainer), nốt phải luôn bấm được, popup chỉ là
     lớp thông tin phụ nằm phía sau. */
  z-index: 1;
  width: min(82vw, 300px);
  background: rgba(20, 14, 8, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.day-popup-title {
  font-weight: bold;
  color: var(--gold-soft);
}

.day-popup-subtitle {
  margin-top: 2px;
  opacity: 0.95;
}

.day-popup-empty {
  margin-top: 6px;
  opacity: 0.7;
  font-style: italic;
}

.day-popup-list {
  margin-top: 8px;
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  /* Cả .day-popup để pointer-events:none để không che mất việc bấm vào các
     nốt ngày khác lỡ bị popup đè lên — chỉ riêng phần danh sách cuộn được
     này mới bắt sự kiện, để vẫn cuộn/chạm được khi danh sách dài. */
  pointer-events: auto;
}

.day-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-popup-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-soft);
  flex-shrink: 0;
  background: #fff;
}

.day-popup-info {
  flex: 1;
  min-width: 0;
}

.day-popup-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-popup-note {
  font-size: 11px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-popup-count {
  flex-shrink: 0;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- identity badge ---------- */
.identity-badge {
  position: fixed;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 14, 8, 0.85);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  color: var(--paper);
  font-size: 13px;
  z-index: 40;
}

.identity-badge img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-soft);
}

.identity-badge button {
  background: none;
  border: none;
  color: var(--gold-soft);
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.update-today-btn {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #3a2a0a;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  z-index: 40;
}

.hidden { display: none !important; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 7, 4, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal {
  background: var(--paper);
  border-radius: 12px;
  padding: 24px;
  width: min(92vw, 420px);
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal h2 {
  margin-top: 0;
  color: #4a3414;
  font-size: 20px;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.user-list .user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

.user-list .user-row:hover {
  background: #f1e4c2;
  border-color: var(--gold);
}

.user-list .user-row img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
}

.user-list .empty {
  opacity: 0.6;
  font-size: 13px;
  padding: 8px 0;
}

.divider {
  text-align: center;
  font-size: 12px;
  opacity: 0.6;
  margin: 14px 0;
}

.new-user-form, .kinh-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.new-user-form label, .kinh-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.new-user-form input, .kinh-form input {
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #c9b78c;
  font-family: inherit;
}

.new-user-form button, .kinh-form button {
  margin-top: 4px;
  background: var(--gold);
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  color: #3a2a0a;
}

.kinh-form button.secondary {
  background: none;
  color: #6b5a3a;
  text-decoration: underline;
  font-weight: normal;
}

.kinh-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.form-error {
  color: #a33;
  font-size: 13px;
}

.kinh-meditation {
  background: #f1e4c2;
  border-left: 3px solid var(--gold);
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 4px;
}

.kinh-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.kinh-suggestions button {
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.kinh-suggestions button:hover,
.kinh-suggestions button.active {
  background: var(--gold);
  color: #3a2a0a;
}

.kinh-mystery-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.kinh-mystery-label {
  color: #6b5a3a;
}

.kinh-mystery-options {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
}

.kinh-mystery-options label {
  /* .kinh-form label (chung) đặt flex-direction:column — đè lại thành hàng
     ngang riêng cho 5 ô này, không thì checkbox rớt xuống dưới số, thành 1
     cột cao nghệu trên điện thoại. */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.kinh-mystery-options input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}