/*
 * Nút "Thêm vào lịch của tôi": thay checkbox chọn lịch cá nhân bằng biểu tượng cuốn lịch của Bootstrap Icons
 *   Chưa lưu: cuốn lịch có dấu cộng, màu xám (bi-calendar-plus)
 *   Đã lưu:   cuốn lịch có dấu tích, màu xanh lá (bi-calendar-check-fill)
 * Phần xử lý khi bấm nằm trong assets/js/my-events.js
 */

/* Ẩn checkbox gốc */
.event-check {
  display: none;
}

/* Label biến thành biểu tượng cuốn lịch */
label.my-event {
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  padding: 4px 6px;
}

label.my-event .bi {
  font-size: 1.5rem;
  transition: color 0.2s;
}

/* Chưa lưu: cuốn lịch có dấu cộng */
label.my-event .bi-calendar-plus {
  color: var(--bs-secondary-color, #6c757d);
  display: inline;
}
label.my-event:hover .bi-calendar-plus {
  color: var(--bs-success, #198754);
}

/* Đã lưu: cuốn lịch có dấu tích, mặc định ẩn */
label.my-event .bi-calendar-check-fill {
  color: var(--bs-success, #198754);
  display: none;
}

/* Khi checked: ẩn dấu cộng, hiện dấu tích */
.event-check:checked + label.my-event .bi-calendar-plus {
  display: none;
}
.event-check:checked + label.my-event .bi-calendar-check-fill {
  display: inline;
}

/* Nút có chữ "Lưu lịch" / "Đã lưu", dùng ở bố cục điện thoại (màn hình chạm không có lời nhắc khi rê chuột) */
label.my-event.my-event-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 999px;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
label.my-event.my-event-text .bi {
  font-size: 1.15rem;
}
label.my-event .my-event-on {
  display: none;
}
.event-check:checked + label.my-event .my-event-off {
  display: none;
}
.event-check:checked + label.my-event .my-event-on {
  display: inline;
}
.event-check:checked + label.my-event.my-event-text {
  border-color: var(--bs-success, #198754);
  background: var(--bs-success-bg-subtle, #d1e7dd);
  color: var(--bs-success, #198754);
}

/* Hộp thoại hỏi khi bỏ lưu (partials/todo_sync.php): trên điện thoại ba nút xếp dọc, mỗi nút một dòng,
   "Có" ở trên cùng và "Hủy" ở dưới cùng */
@media (max-width: 575.98px) {
  #modalTodoUnstar .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #modalTodoUnstar .modal-footer .btn {
    margin-right: 0 !important;
  }
}

/* Không in nút này ra giấy */
@media print {
  label.my-event {
    display: none;
  }
}