/* ============================================================
   LỊCH LÀM VIỆC HÀNG TUẦN v2.1
   Logic: CPT lich_lam_viec → ngày → bác sĩ ON/OFF → ca tự do
   ============================================================ */

.page-lich-lam-viec *, .page-lich-lam-viec *::before, .page-lich-lam-viec *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

:root {
    --llv-border:       #e2e8f0;
    --llv-bg:           #f8fafc;
    --llv-white:        #ffffff;
    --llv-blue-mid:     #2563eb;
    --llv-blue-dark:    #1a3c8f;
    --llv-blue-light:   #dbeafe;
    --llv-blue-lighter: #eff6ff;
    --llv-radius:       12px;
    --llv-shadow:       0 4px 28px rgba(37,99,235,0.10);
    --llv-hour-height:  68px;
    --llv-time-col:     62px;
}

/* ── Wrapper ─────────────────────────────────────────── */
.llv-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 16px 60px;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #1e293b;
    background: var(--llv-bg);
    min-height: 100vh;
}

/* ════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════ */
.llv-header { margin-bottom: 20px; text-align: center; }
.llv-title  { font-size: 1.6rem; font-weight: 700; color: var(--llv-blue-dark); margin-bottom: 14px; }

.llv-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.llv-nav__btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 18px; background: var(--llv-blue-mid); color: #fff;
    border-radius: 8px; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; transition: background .2s, transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.llv-nav__btn:hover { background: var(--llv-blue-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.3); }
.llv-nav__week { font-size: 0.95rem; font-weight: 600; color: var(--llv-blue-dark); }
.llv-badge {
    display: inline-block; background: var(--llv-blue-light); color: var(--llv-blue-mid);
    font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    margin-left: 6px; vertical-align: middle;
}
.llv-nav__today { margin-top: 8px; }
.llv-nav__today-btn { font-size: .8rem; color: var(--llv-blue-mid); text-decoration: underline; cursor: pointer; }

/* ════════════════════════════════════════════════════════
   SCHEDULE CARD
════════════════════════════════════════════════════════ */
.llv-schedule-outer {
    background: var(--llv-white);
    border-radius: var(--llv-radius);
    box-shadow: var(--llv-shadow);
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════
   DAY TABS
════════════════════════════════════════════════════════ */
.llv-day-tabs {
    display: flex; overflow-x: auto; scrollbar-width: none;
    border-bottom: 2px solid var(--llv-border);
    background: var(--llv-white);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.llv-day-tabs::-webkit-scrollbar { display: none; }

.llv-day-tab {
    flex: 1; min-width: 68px; padding: 11px 6px;
    border: none; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border-bottom: 3px solid transparent;
    transition: background .18s, border-color .18s;
    font-family: inherit; scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.llv-day-tab:hover { background: var(--llv-blue-lighter); }
.llv-day-tab.is-active { border-bottom-color: var(--llv-blue-mid); background: var(--llv-blue-lighter); }
.llv-day-tab.is-today .llv-day-tab__name { color: var(--llv-blue-mid); font-weight: 700; }
.llv-day-tab.is-today .llv-day-tab__date {
    background: var(--llv-blue-mid); color: #fff;
    border-radius: 20px; padding: 1px 8px;
}
.llv-day-tab__name { font-size: .74rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.llv-day-tab__date { font-size: .72rem; color: #94a3b8; white-space: nowrap; }

/* Chấm xanh = có lịch */
.llv-day-tab__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--llv-blue-mid);
    position: absolute; bottom: 6px;
}

/* ════════════════════════════════════════════════════════
   DAY PANELS
════════════════════════════════════════════════════════ */
.llv-day-panel { display: none; }
.llv-day-panel.is-active { display: block; }

/* ════════════════════════════════════════════════════════
   OFF BANNER — bác sĩ vắng mặt
════════════════════════════════════════════════════════ */
.llv-off-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: #fff7ed; border-bottom: 1px solid #fed7aa;
    font-size: .82rem;
}
.llv-off-banner__label { color: #92400e; font-weight: 600; white-space: nowrap; }
.llv-off-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px 3px 5px;
    background: #fff; border: 1px solid var(--chip-color, #e2e8f0);
    border-radius: 20px; font-size: .78rem; color: #475569;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.llv-off-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.llv-off-chip em { color: #94a3b8; font-style: normal; }

/* ════════════════════════════════════════════════════════
   DOCTOR HEADER ROW (desktop)
════════════════════════════════════════════════════════ */
.llv-doctor-header-row {
    display: grid;
    grid-template-columns: var(--llv-time-col) repeat(var(--llv-col-count, 1), 1fr);
    border-bottom: 1px solid var(--llv-border);
}
.llv-cell--corner { background: var(--llv-white); border-right: 1px solid var(--llv-border); }

.llv-cell--doctor-header {
    padding: 12px 12px 10px;
    display: flex; align-items: center; gap: 10px;
    border-right: 1px solid var(--llv-border);
    background: var(--llv-white);
    border-top: 3px solid var(--doc-color, var(--llv-blue-mid));
}
.llv-cell--doctor-header:last-child { border-right: none; }

/* Avatar với badge ON */
.llv-doctor__avatar { position: relative; flex-shrink: 0; }
.llv-doctor__avatar img {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--doc-color, var(--llv-blue-mid));
    display: block;
}
.llv-doctor__avatar--placeholder {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700;
    flex-shrink: 0; position: relative;
    border: 2px solid var(--doc-color, var(--llv-blue-mid));
}
.llv-doctor__on-badge {
    position: absolute; bottom: -4px; right: -4px;
    background: #16a34a; color: #fff;
    font-size: .52rem; font-weight: 800;
    padding: 1px 4px; border-radius: 4px;
    border: 1.5px solid #fff; line-height: 1.4;
    letter-spacing: .03em;
}

.llv-doctor__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.llv-doctor__title { font-size: .62rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.llv-doctor__name { font-size: .84rem; font-weight: 700; color: var(--llv-blue-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.llv-doctor__specialty { font-size: .68rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════
   DOCTOR SWITCHER (mobile)
════════════════════════════════════════════════════════ */
.llv-doctor-switcher {
    display: none;
    align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px;
    background: var(--llv-blue-lighter); border-bottom: 1px solid var(--llv-border);
}
.llv-doctor-switcher__btn {
    width: 36px; height: 36px; border: none;
    background: var(--llv-white); border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--llv-blue-mid);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: background .15s; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.llv-doctor-switcher__btn:disabled { opacity: .3; cursor: default; }
.llv-doctor-switcher__btn:not(:disabled):active { background: var(--llv-blue-light); }

.llv-doctor-switcher__info { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.llv-doctor-switcher__avatar img,
.llv-doctor-switcher__avatar-placeholder {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--llv-blue-mid); flex-shrink: 0;
}
.llv-doctor-switcher__avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--llv-blue-light); font-size: .9rem; font-weight: 700;
    color: var(--llv-blue-mid);
}
.llv-doctor-switcher__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.llv-doctor-switcher__badge {
    display: inline-block; background: #16a34a; color: #fff;
    font-size: .6rem; font-weight: 800; padding: 1px 6px;
    border-radius: 4px; width: fit-content;
}
.llv-doctor-switcher__title { font-size: .65rem; color: #94a3b8; text-transform: uppercase; }
.llv-doctor-switcher__name { font-size: .9rem; font-weight: 700; color: var(--llv-blue-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.llv-doctor-switcher__counter { font-size: .72rem; color: #94a3b8; white-space: nowrap; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════
   SCHEDULE GRID
════════════════════════════════════════════════════════ */
.llv-schedule-body {
    display: grid;
    grid-template-columns: var(--llv-time-col) repeat(var(--llv-col-count, 1), 1fr);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}

.llv-col--time {
    border-right: 1px solid var(--llv-border);
    background: var(--llv-white);
    position: sticky; left: 0; z-index: 2;
}
.llv-time-slot {
    height: var(--llv-hour-height);
    display: flex; align-items: flex-start; padding-top: 5px;
    justify-content: flex-end; padding-right: 8px;
    font-size: .68rem; color: #94a3b8; font-weight: 500;
    border-top: 1px solid var(--llv-border);
}
.llv-time-slot:first-child { border-top: none; }

.llv-col--events {
    position: relative; border-right: 1px solid var(--llv-border);
    height: calc(var(--llv-hour-height) * 10);
}
.llv-col--events:last-child { border-right: none; }

.llv-hour-line {
    position: absolute; left: 0; right: 0;
    height: var(--llv-hour-height); border-top: 1px solid var(--llv-border);
    pointer-events: none;
}
.llv-hour-line:first-child { border-top: none; }
.llv-hour-line:nth-child(1)  { top: calc(var(--llv-hour-height) * 0); }
.llv-hour-line:nth-child(2)  { top: calc(var(--llv-hour-height) * 1); }
.llv-hour-line:nth-child(3)  { top: calc(var(--llv-hour-height) * 2); }
.llv-hour-line:nth-child(4)  { top: calc(var(--llv-hour-height) * 3); }
.llv-hour-line:nth-child(5)  { top: calc(var(--llv-hour-height) * 4); }
.llv-hour-line:nth-child(6)  { top: calc(var(--llv-hour-height) * 5); }
.llv-hour-line:nth-child(7)  { top: calc(var(--llv-hour-height) * 6); }
.llv-hour-line:nth-child(8)  { top: calc(var(--llv-hour-height) * 7); }
.llv-hour-line:nth-child(9)  { top: calc(var(--llv-hour-height) * 8); }
.llv-hour-line:nth-child(10) { top: calc(var(--llv-hour-height) * 9); }

/* ════════════════════════════════════════════════════════
   EVENTS
════════════════════════════════════════════════════════ */
.llv-event {
    position: absolute; left: 4px; right: 4px;
    border-radius: 8px; padding: 7px 9px;
    overflow: hidden; cursor: default;
    transition: transform .15s, box-shadow .15s;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 28px;
    /* màu set qua inline style */
}
.llv-event:hover { transform: scale(1); box-shadow: 0 6px 20px rgba(0,0,0,55); z-index: 10; }

.llv-event--gray { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; }
.llv-event--gray .llv-event__label { color: #475569 !important; }
.llv-event--gray .llv-event__time  { color: #94a3b8 !important; }

.llv-event__label { font-size: .76rem; font-weight: 700; line-height: 1.2; }
.llv-event__time  { font-size: .64rem; line-height: 1.2; opacity: .88; }
.llv-event__room  { font-size: .62rem; opacity: .8; margin-top: 1px; }

/* ════════════════════════════════════════════════════════
   LEGEND
════════════════════════════════════════════════════════ */
.llv-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 4px 0; margin-top: 16px;
    font-size: .78rem; color: #64748b;
}
.llv-legend__label { font-weight: 600; color: #475569; }
.llv-legend__item  { display: flex; align-items: center; gap: 5px; }
.llv-legend__dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════
   EMPTY / NO SCHEDULE
════════════════════════════════════════════════════════ */
.llv-empty, .llv-no-schedule {
    text-align: center; padding: 50px 20px;
    color: #94a3b8; font-size: .95rem;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.llv-no-schedule__icon { font-size: 2rem; }
.llv-no-schedule__link {
    margin-top: 6px; font-size: .8rem;
    color: var(--llv-blue-mid); text-decoration: underline;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤960px
════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    :root { --llv-hour-height: 56px; --llv-time-col: 52px; }
    .llv-cell--doctor-header { padding: 8px 6px; gap: 6px; }
    .llv-doctor__avatar img, .llv-doctor__avatar--placeholder { width: 32px; height: 32px; }
    .llv-doctor__title { display: none; }
    .llv-doctor__specialty { display: none; }
    .llv-doctor__name { font-size: .75rem; }
    .llv-event { padding: 5px 6px; left: 3px; right: 3px; }
    .llv-event__label { font-size: .68rem; }
    .llv-event__time  { font-size: .6rem; }
    .llv-event__room  { display: none; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤640px (1 bác sĩ / lần)
════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    :root { --llv-hour-height: 62px; --llv-time-col: 50px; }

    .llv-wrap { padding: 14px 10px 50px; }
    .llv-title { font-size: 1.15rem; margin-bottom: 10px; }
    .llv-nav { gap: 8px; }
    .llv-nav__btn { padding: 7px 12px; font-size: .78rem; border-radius: 6px; }
    .llv-nav__week { font-size: .82rem; }

    .llv-day-tab { min-width: 44px; padding: 9px 5px; }
    .llv-day-tab__name { font-size: .67rem; }
    .llv-day-tab__date { font-size: .64rem; }

    /* Hiện switcher mobile */
    .llv-doctor-switcher { display: flex; }

    /* Ẩn header bác sĩ desktop */
    .llv-doctor-header-row { display: none; }

    /* 1 cột duy nhất */
    .llv-schedule-body { grid-template-columns: var(--llv-time-col) 1fr; }
    .llv-col--events[data-doctor-col] { display: none; }
    .llv-col--events[data-doctor-col].is-active-doctor { display: block; }

    /* Event dễ chạm */
    .llv-event { left: 5px; right: 5px; padding: 7px 8px; border-radius: 8px; }
    .llv-event__label { font-size: .76rem; }
    .llv-event__time  { font-size: .66rem; }
    .llv-event__room  { display: none; }

    .llv-time-slot { font-size: .64rem; padding-right: 6px; }
    .llv-off-banner { padding: 8px 12px; font-size: .76rem; }
    .llv-legend { gap: 8px; font-size: .72rem; }
}

@media (max-width: 380px) {
    :root { --llv-hour-height: 56px; }
    .llv-nav__btn { padding: 6px 10px; font-size: .74rem; }
    .llv-day-tab { min-width: 38px; }
    .llv-day-tab__name { font-size: .6rem; }
}