/* ── LỊCH CHỌN NGÀY — chỉnh cho khớp dự án ────────────────────────────────────────────
   Đi cùng wwwroot/js/ngay-viet.js. PHẢI nạp SAU css/tiny-date-picker.min.css.

   Bản gốc tiny-date-picker (2021) cắm cứng màu xanh của nó và đặt z-index 1000. Hai thứ đó
   đều sai trong dự án này; file này chỉ đè đúng những chỗ đó, không đụng bố cục.
   ──────────────────────────────────────────────────────────────────────────────────── */

/* ⚠️ Z-INDEX — LỖI THẬT, KHÔNG PHẢI CHUYỆN THẨM MỸ.
   Bản gốc đặt `.dp { z-index: 1000 }` còn `.dp-modal` không đặt gì, nên ô ngày nằm TRONG một
   modal (hộp "Ghi nghỉ phép", "Gán CLB"…) sẽ mở lịch ra PHÍA SAU hộp thoại: người dùng bấm
   vào ô, màn hình tối đi, mà không thấy lịch đâu.

   ⚠️ Bám vào BIẾN của theme, không cắm số. Sneat nâng cả thang z-index so với Bootstrap gốc —
   đo trong core.css: modal 1090 (không phải 1055), popover 1091, toast 1095, tooltip 1099.
   Cắm "trên 1055" là vẫn nằm dưới modal mà không có gì báo. +2 để vượt cả popover. */
.dp-modal { z-index: calc(var(--bs-modal-zindex, 1090) + 2); }
.dp-modal .dp,
.dp-below .dp,
.dp { z-index: calc(var(--bs-modal-zindex, 1090) + 3); }

/* Nền mờ: bản gốc dùng trắng 75% nên trên nền trắng gần như không thấy có lớp phủ.
   Dùng đúng sắc độ của .modal-backdrop Bootstrap cho quen mắt. */
.dp-modal { background: rgba(0, 0, 0, .5); }

/* ── Màu theo DẢI MÀU CỦA CƠ SỞ (§3.11) ───────────────────────────────────────────────
   Bản gốc cắm cứng #3b99fc / #75bcfc / #227bd7. Khu học viên, giáo viên và quản lý cơ sở
   đều đổi màu theo cấu hình của cơ sở, nên một cái lịch xanh cố định sẽ chỏi ra ngay.
   Đi qua var(--bs-primary) thì nó tự đổi theo, không cần biết cơ sở chọn dải nào. */
.dp .dp-selected,
.dp .dp-selected:hover,
.dp .dp-selected:focus {
    background: var(--bs-primary);
    color: #fff;
}

.dp .dp-day:hover,
.dp .dp-month:hover,
.dp .dp-year:hover,
.dp .dp-day:focus,
.dp .dp-month:focus,
.dp .dp-year:focus,
.dp .dp-current,
.dp .dp-current:focus {
    background: color-mix(in srgb, var(--bs-primary) 22%, transparent);
    color: inherit;
}

.dp .dp-close:hover, .dp .dp-close:focus,
.dp .dp-clear:hover, .dp .dp-clear:focus,
.dp .dp-today:hover, .dp .dp-today:focus,
.dp .dp-next:hover,  .dp .dp-next:focus,
.dp .dp-prev:hover,  .dp .dp-prev:focus,
.dp .dp-cal-month:hover, .dp .dp-cal-month:focus,
.dp .dp-cal-year:hover,  .dp .dp-cal-year:focus {
    background: color-mix(in srgb, var(--bs-primary) 22%, transparent);
    color: inherit;
}

/* Dải màu ở mép trên hộp lịch. */
.dp:before {
    background: var(--bs-primary);
}

/* Dấu góc "hôm nay". */
.dp .dp-day-today:after {
    border-top-color: var(--bs-primary);
    border-right-color: var(--bs-primary);
}

/* Nút Hôm nay / Xoá / Đóng: bản gốc để chữ thường, dễ nhìn nhầm thành chú thích. */
.dp .dp-cal-footer { font-weight: 500; }

/* ⚠️ Ô GỐC bị ẩn bằng opacity chứ không display:none (xem đầu ngay-viet.js) nên nó VẪN
   chiếm chỗ trong luồng bố cục nếu không position:absolute — JS đã đặt sẵn, đây chỉ là
   lớp phòng khi CSS bị ghi đè ở đâu đó. */
input[type="date"].ngayviet-xong {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none;
}

/* ══ LỊCH TỰ DỰNG (ngay-viet.js, từ 10/10/2026) ═════════════════════════════════════════
   Các luật `.dp*` ở trên vẫn cần: các màn chọn KHOẢNG ngày (Sổ thu/chi, Lịch học GV…) còn dùng
   TinyDatePicker. Phần dưới là lịch của ô nhập ngày — class tiền tố `nv-` (không bắt đầu bằng
   `bx`, §3.4). Mọi màu đi qua biến Sneat nên tự đổi theo dải màu cơ sở (§3.11). */

/* Biểu tượng lịch nằm TRONG ô (nền SVG), chừa chỗ cho nó ở bên phải. Dùng nền chứ không bọc thêm
   thẻ: ô có thể nằm trong .input-group hoặc cột lưới, bọc thêm là vỡ bố cục của 29+26 ô. */
.form-control.nv-o,
input.nv-o {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697a8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1.1rem;
}
.form-control-sm.nv-o { padding-right: 2.25rem; background-position: right .5rem center; background-size: 1rem; }

.nv-lich {
    position: fixed;
    top: 0;
    left: 0;
    /* ⚠️ Bám BIẾN của theme, không cắm số: Sneat nâng cả thang z-index (modal 1090, không phải 1055). */
    z-index: calc(var(--bs-modal-zindex, 1090) + 3);
    width: min(19.5rem, calc(100vw - 1rem));
    padding: .75rem;
    background: var(--bs-paper-bg, #fff);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color, #d9dee3);
    border-radius: var(--bs-border-radius-lg, .5rem);
    box-shadow: var(--bs-box-shadow-lg, 0 .5rem 1.5rem rgba(0, 0, 0, .18));
    font-size: .8125rem;
    line-height: 1.3;
    outline: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .nv-lich { animation: nv-hien .12s ease-out; }
    @keyframes nv-hien { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}

.nv-dau {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .625rem;
}
.nv-nut {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-heading-color);
    cursor: pointer;
}
.nv-nut:hover { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); }

.nv-dau select {
    flex: 1 1 0;
    min-width: 0;
    height: 2rem;
    padding: 0 .375rem;
    border: 1px solid var(--bs-border-color, #d9dee3);
    border-radius: var(--bs-border-radius);
    background: var(--bs-paper-bg, #fff);
    color: var(--bs-heading-color);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.nv-dau select.nv-chon-nam { flex: 0 0 5rem; }

/* Lưới 7 cột Chủ nhật → Thứ bảy. .nv-hang là display:contents để CSS Grid xếp thẳng 7 cột mà cây
   ARIA vẫn đủ grid → row → gridcell. */
.nv-luoi {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.nv-hang { display: contents; }
.nv-thu {
    padding: .25rem 0 .375rem;
    text-align: center;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.nv-ngay {
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-body-color);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.nv-ngay:hover:not(:disabled) { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); }
/* Ngày của tháng trước/sau tràn vào: mờ đi nhưng vẫn bấm được. */
.nv-ngay.nv-khac { opacity: .45; }
/* Hôm nay: viền nổi bật, KHÔNG tô nền (nền dành cho ngày đang chọn). */
.nv-ngay.nv-nay {
    box-shadow: inset 0 0 0 1.5px var(--bs-primary);
    color: var(--bs-primary-text-emphasis, var(--bs-body-color));
    font-weight: 600;
}
/* Đang chọn: nền tròn đậm, chữ trắng (tương phản AA đã được ClubTheme bảo đảm cho nút chính). */
.nv-ngay.nv-chon,
.nv-ngay.nv-chon:hover:not(:disabled) {
    opacity: 1;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}
.nv-ngay:disabled { opacity: .25; cursor: not-allowed; }

.nv-ngay:focus-visible,
.nv-nut:focus-visible,
.nv-chu:focus-visible,
.nv-dau select:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.nv-chan {
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-border-color, #d9dee3);
}
.nv-chu {
    padding: .25rem .5rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    background: transparent;
    color: var(--bs-primary-text-emphasis, var(--bs-body-color));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.nv-chu:hover:not(:disabled) { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); }
.nv-chu:disabled { opacity: .4; cursor: not-allowed; }