/* tvls-lich.css — Styles Lịch Việc Cần Làm (tvls-lich.js) */

/* Thanh tiêu đề ghim trên cùng khi cuộn (khung cuộn là .main-container) */
.lich-dau {
    position: sticky;
    top: -14px; /* phủ luôn phần đệm trên của .main-container, không lộ dòng cuộn phía sau */
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 22px 0 8px;
    margin-bottom: 10px;
    /* --bg-card hơi trong suốt: chồng 2 lớp cho gần như đặc, không lộ chữ cuộn phía sau */
    background: linear-gradient(var(--bg-card), var(--bg-card)), var(--bg-card);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-color);
}
/* Trên điện thoại .card có overflow:auto làm sticky bám vào thẻ thay vì khung cuộn */
#tab-lich > .card { overflow: visible !important; }
.lich-dau-giua { grid-column: 2; display: flex; flex-direction: column; align-items: center; }
.lich-dau h2 { font-size: 18px; font-weight: 800; color: var(--primary); margin: 0; text-align: center; }
.lich-thang-dang-xem { font-size: 12.5px; font-weight: 700; color: var(--text-sub); min-height: 16px; }
.lich-nut-hom-nay { grid-column: 3; justify-self: end; padding: 4px 12px; font-size: 12.5px; }
.lich-nut-hom-nay[hidden] { display: none; } /* .btn đặt display riêng, đè thuộc tính hidden */
.lich-container { display: flex; flex-direction: column; gap: 10px; }
.lich-moc { height: 1px; }
.lich-tuan {
    border: 1.5px solid var(--border-card);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.lich-ngay {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    min-height: 42px;
    align-items: flex-start;
}
.lich-ngay:first-child { border-top: none; }
/* Mỗi thứ một nền pastel (thu-0 = Chủ Nhật) */
.lich-ngay.thu-1 { background: #eef4ff; }
.lich-ngay.thu-2 { background: #edfaf2; }
.lich-ngay.thu-3 { background: #fff7e6; }
.lich-ngay.thu-4 { background: #f4efff; }
.lich-ngay.thu-5 { background: #fff0f5; }
.lich-ngay.thu-6 { background: #eafafa; }
.lich-ngay.thu-0 { background: #fff1ea; }
html.dark-mode .lich-ngay.thu-1 { background: rgba(96, 165, 250, 0.10); }
html.dark-mode .lich-ngay.thu-2 { background: rgba(74, 222, 128, 0.09); }
html.dark-mode .lich-ngay.thu-3 { background: rgba(251, 191, 36, 0.09); }
html.dark-mode .lich-ngay.thu-4 { background: rgba(167, 139, 250, 0.10); }
html.dark-mode .lich-ngay.thu-5 { background: rgba(244, 114, 182, 0.09); }
html.dark-mode .lich-ngay.thu-6 { background: rgba(45, 212, 191, 0.09); }
html.dark-mode .lich-ngay.thu-0 { background: rgba(251, 146, 60, 0.09); }
.lich-ngay.hom-nay { box-shadow: inset 4px 0 0 var(--primary); }
.lich-ngay.hom-nay .lich-nhan strong::after { content: ' · Hôm nay'; font-weight: 700; }
.lich-ngay.sua-duoc { cursor: pointer; }
.lich-ngay.sua-duoc:hover { filter: brightness(0.98); }
.lich-nhan {
    display: flex;
    flex-direction: column;
    min-width: 88px;
    font-size: 12px;
    color: var(--text-sub);
}
.lich-nhan strong { font-size: 13px; color: var(--primary); }
.lich-noi-dung {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
    color: var(--text-main);
    line-height: 1.5;
}
.lich-muc { display: flex; gap: 8px; align-items: flex-start; }
.lich-chu { white-space: pre-wrap; }
.lich-the {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: var(--radius-badge);
    margin-top: 2px;
}
.lich-the-lop { background: var(--primary-light); color: var(--primary); border: 1px solid var(--border-card); }
.lich-the-rieng { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
html.dark-mode .lich-the-rieng { background: rgba(74, 222, 128, 0.15); color: #86efac; border-color: rgba(74, 222, 128, 0.3); }
.lich-sua-khoi { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.lich-sua-dau { display: flex; align-items: center; justify-content: space-between; }
.lich-o-sua { width: 100%; font-size: 13.5px; font-family: inherit; resize: vertical; }
.lich-nut { display: flex; justify-content: flex-end; gap: 8px; }
.lich-nut .btn, .lich-sua-dau .btn { padding: 3px 12px; font-size: 12.5px; }
.lich-nut-xoa { color: #b91c1c; border-color: #fca5a5; }
.lich-trong { padding: 16px; text-align: center; color: var(--text-sub); font-size: 13px; }