/* Riêng cho modules/calendar.js — lưới lịch tháng + chú thích màu + popup tạo nhanh */

/* Lưới tháng kiểu Google: một khung chung, các ô dính liền, ngăn nhau bằng 1 đường kẻ mảnh.
   Mỗi tuần là một lưới 7 cột; thanh sự kiện đặt chồng lên ô bằng grid-column: x / span n.
   user-select: none để nắm kéo chọn nhiều ngày không bôi đen chữ. */
.cal-month {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); user-select: none;
}
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.cal-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  /* hàng 1: số ngày · hàng 2-4: 3 làn thanh sự kiện · hàng 5: "+N" · hàng cuối: phần dư */
  grid-template-rows: 26px repeat(3, 20px) 16px minmax(8px, 1fr);
  min-height: 112px;
}
.cal-week + .cal-week { border-top: 1px solid var(--line); }
.cal-cell {
  grid-row: 1 / -1; min-width: 0; padding: 4px 6px;
  background: var(--surface); border-left: 1px solid var(--line); cursor: pointer;
}
.cal-week > .cal-cell:first-child { border-left: 0; }
.cal-cell:hover { background: var(--surface-muted); }

/* Ô của tháng trước/tháng sau: vẫn chiếm chỗ cho lưới đủ hàng, nhưng mờ xám và không bấm được */
.cal-cell.pad {
  background: var(--surface-dim); cursor: default;
  color: var(--ink-dim); pointer-events: none;
}
.cal-cell.pad .cal-daynum { color: var(--ink-dim); font-weight: 600; }

/* Hôm nay và ô đang chọn: CHỈ viền, không tô nền. Viền dày thêm bằng box-shadow inset
   để ô không bị xô chữ khi đổi trạng thái. Hôm nay = xanh; ô đang chọn = navy, đè lên hôm nay. */
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.selected,
.cal-cell.selected:hover { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Khoảng ngày đang chọn khi popup tạo nhanh đang mở */
.cal-cell.in-range { background: var(--accent-soft); border-color: var(--accent-2); }
.cal-daynum { font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.cal-weekday { font-size: 11px; color: var(--ink-muted); text-align: center; padding: 6px 0; font-weight: 600; }

/* Thanh sự kiện: một thanh liền cho cả khoảng ngày. Bình thường cách mép ô 4px; nếu còn nối
   sang tuần trước/sau (cont-l / cont-r) thì chạm sát mép và bỏ bo góc phía đó. */
.cal-bar {
  position: relative; z-index: 1; align-self: center; min-width: 0;
  margin: 0 4px; padding: 0 6px; height: 17px; line-height: 17px;
  border-radius: 4px; font-size: 10.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;   /* lễ / sinh nhật: bấm xuyên qua xuống ô ngày */
}
.cal-bar.cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bar-hol { background: var(--sage-soft); color: var(--sage); }
.bar-bd { background: var(--party-soft); color: var(--party); }
.bar-ev { background: var(--accent-soft); color: var(--accent-ink); pointer-events: auto; cursor: grab; }
.bar-ev:active { cursor: grabbing; }
.cal-bar.is-dragging { opacity: .4; }
/* Đang kéo chọn ngày / đang dời sự kiện: mọi thanh "trong suốt" để ô bên dưới nhận chuột */
.cal-month.is-selecting .cal-bar,
.cal-month.is-moving .cal-bar { pointer-events: none; }
.cal-more {
  position: relative; z-index: 1; align-self: center; margin: 0 8px;
  font-size: 10px; font-weight: 600; color: var(--ink-muted); pointer-events: none;
}
/* Ô đang được thả sự kiện vào */
.cal-cell.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* Ngày âm lịch nhỏ, nằm nép bên phải số ngày dương */
.cal-daynum { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.cal-lunar { font-size: 9.5px; font-weight: 500; color: var(--ink-muted); }
.cal-lunar.is-first { color: var(--sage); font-weight: 700; }
.cal-cell.pad .cal-lunar { color: var(--ink-dim); }
.cal-lunar-line { font-size: 11.5px; color: var(--ink-muted); margin: -4px 0 10px; }

/* --- Chế độ xem cả năm: 12 lưới nhỏ, mỗi ngày là một chấm màu --- */
.cal-year {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; user-select: none;
}
@media (max-width: 1180px) { .cal-year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .cal-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cal-mini {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 8px 8px 6px;
}
.cal-mini-title {
  display: block; width: 100%; text-align: left; padding: 0 0 6px;
  background: none; border: 0; font: inherit; font-weight: 700; font-size: 12px;
  color: var(--ink); cursor: pointer;
}
.cal-mini-title:hover { color: var(--accent); }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.cal-mini-wd { font-size: 9px; color: var(--ink-muted); text-align: center; padding-bottom: 2px; }

.cal-mini-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 5px;
  background: none; font: inherit; font-size: 10px; color: var(--ink); cursor: pointer;
}
.cal-mini-day:hover { background: var(--surface-muted); }
.cal-mini-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal-mini-day.selected { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; }
.cal-mini-day.in-range { background: var(--accent-soft); color: var(--accent-ink); }
.mini-dots { display: flex; gap: 1.5px; height: 3px; }
.dot { display: block; width: 3px; height: 3px; border-radius: 50%; }
.dot-bd { background: var(--party); }
.dot-ev { background: var(--accent); }
.dot-hol { background: var(--sage); }

/* Cụm nút chuyển chế độ tháng / năm */
.seg { display: inline-flex; gap: 4px; margin-right: 6px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--ink-muted); }
.legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.lg-bd::before { background: var(--party); }
.lg-local::before { background: var(--accent); }
.lg-hol::before { background: var(--sage); }
.cal-howto { font-size: 11.5px; color: var(--ink-muted); margin-top: 6px; }

/* Popup tạo nhanh sự kiện — bám theo ô ngày vừa bấm, đặt ở body nên dùng position: fixed */
.cal-pop {
  position: fixed; z-index: 60; width: 262px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 12px;
}
.cal-pop-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cal-pop input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-muted); color: var(--ink);
  padding: 7px 9px; font-size: 13px; font-family: inherit;
}
.cal-pop input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.cal-pop-hint { font-size: 11px; color: var(--ink-muted); margin: 6px 0 10px; line-height: 1.45; }