/* ============================================================
   P0_26 Schedule Styles — SCOPED với .p026- prefix
   Chỉ áp dụng bên trong #tab-lichlamviec
   ============================================================ */

/* ============================================================
   PHÂN QUYỀN THEO ROLE — ẩn UI admin-only khi là NV
   Áp dụng khi body có data-role="employee" hoặc data-role="ctv"
   ============================================================ */
body[data-role="employee"] #tab-lichlamviec .p026-role-toggle,
body[data-role="ctv"] #tab-lichlamviec .p026-role-toggle {
    display: none !important;
}
body[data-role="employee"] #tab-lichlamviec .p026-mode-tabs,
body[data-role="ctv"] #tab-lichlamviec .p026-mode-tabs {
    display: none !important;
}
/* NV chỉ xem được mode-single, ẩn mode-table */
body[data-role="employee"] #tab-lichlamviec #p026-mode-table,
body[data-role="ctv"] #tab-lichlamviec #p026-mode-table {
    display: none !important;
}
/* NV luôn thấy mode-single (auto active) */
body[data-role="employee"] #tab-lichlamviec #p026-mode-single,
body[data-role="ctv"] #tab-lichlamviec #p026-mode-single {
    display: block !important;
}
/* Admin chỉ mở mode-single khi bấm "Xem" một nhân viên. */
/* Ẩn luôn filter row admin-only cho NV */
body[data-role="employee"] #tab-lichlamviec .p026-filters,
body[data-role="ctv"] #tab-lichlamviec .p026-filters {
    display: none !important;
}
/* ẨN monthly stats card cho NV (chỉ admin xem được) */
body[data-role="employee"] #tab-lichlamviec .stat-card-monthly,
body[data-role="employee"] #tab-lichlamviec .month-nav-monthly,
body[data-role="employee"] #tab-lichlamviec .filter-select-monthly,
body[data-role="employee"] #tab-lichlamviec .schedule-monthly-table,
body[data-role="employee"] #tab-lichlamviec .schedule-scroll-wrap-monthly,
body[data-role="employee"] #tab-lichlamviec .info-box-monthly,
body[data-role="employee"] #tab-lichlamviec .btn-primary-monthly,
body[data-role="employee"] #tab-lichlamviec .schedule-legend-monthly,
body[data-role="employee"] #tab-lichlamviec .stat-cards-row-monthly,
body[data-role="ctv"] #tab-lichlamviec .stat-card-monthly,
body[data-role="ctv"] #tab-lichlamviec .month-nav-monthly,
body[data-role="ctv"] #tab-lichlamviec .filter-select-monthly,
body[data-role="ctv"] #tab-lichlamviec .schedule-monthly-table,
body[data-role="ctv"] #tab-lichlamviec .schedule-scroll-wrap-monthly,
body[data-role="ctv"] #tab-lichlamviec .info-box-monthly,
body[data-role="ctv"] #tab-lichlamviec .btn-primary-monthly,
body[data-role="ctv"] #tab-lichlamviec .schedule-legend-monthly,
body[data-role="ctv"] #tab-lichlamviec .stat-cards-row-monthly {
    display: none !important;
}
/* NV thấy P0_26 card (admin cũng thấy, nhưng NV là chính) */
body[data-role="employee"] #tab-lichlamviec .p026-card,
body[data-role="ctv"] #tab-lichlamviec .p026-card {
    display: block !important;
}

#tab-lichlamviec .p026-role-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
#tab-lichlamviec .p026-role-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.04));
    color: var(--ghz-text-muted, #9ca3af);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-role-btn.active.admin {
    background: rgba(0,195,122,0.15);
    border-color: rgba(0,195,122,0.4);
    color: #34d399;
}
#tab-lichlamviec .p026-role-btn.active.emp {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}
#tab-lichlamviec .p026-role-btn:hover:not(.active) {
    background: var(--ghz-card-border, rgba(255,255,255,0.07));
    color: var(--ghz-text-primary, #e5e7eb);
}
#tab-lichlamviec .p026-role-btn i { font-size: 14px; }
#tab-lichlamviec .p026-role-btn .desc { font-size: 10px; font-weight: 400; color: inherit; opacity: 0.7; margin-top: 1px; }

#tab-lichlamviec .p026-mode-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
#tab-lichlamviec .p026-mode-tab {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    background: transparent;
    color: var(--ghz-text-muted, #6b7280);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-mode-tab.active {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
    color: #60a5fa;
}

#tab-lichlamviec .p026-section { display: none; }
#tab-lichlamviec .p026-section.active { display: block; }

/* Info note - theme-aware */
#tab-lichlamviec .p026-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ghz-info-bg, rgba(77, 141, 255, 0.08));
    border: 1px solid color-mix(in srgb, var(--ghz-info, #4d8dff) 20%, transparent);
    border-radius: 10px;
    color: var(--ghz-info, #93c5fd);
    font-size: 12px;
    margin-bottom: 12px;
}
#tab-lichlamviec .p026-info-note i { 
    margin-top: 1px; 
    flex-shrink: 0; 
    color: var(--ghz-info, #4d8dff);
}

/* Card */
#tab-lichlamviec .p026-card {
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
    z-index: 0;
    isolation: isolate;
}
#tab-lichlamviec .p026-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ghz-card-glass-bg, rgba(255,255,255,0.06));
    position: relative;
    z-index: 0;
}
#tab-lichlamviec .p026-card-header h2 {
    font-size: 13px;
    font-weight: 700;
    color: var(--ghz-text-primary, #f3f4f6);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
#tab-lichlamviec .p026-card-header h2 i { color: #60a5fa; }

/* Filters */
#tab-lichlamviec .p026-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
}
#tab-lichlamviec .p026-month-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
#tab-lichlamviec .p026-month-nav button {
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.04));
    color: var(--ghz-text-muted, #9ca3af);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-month-nav button:hover { background: rgba(255,255,255,0.1); color: var(--ghz-text-primary, #e5e7eb); }
#tab-lichlamviec .p026-month-nav .label { font-size: 12px; font-weight: 700; color: var(--ghz-text-primary, #e5e7eb); padding: 0 6px; }

#tab-lichlamviec .p026-filter-select {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05));
    color: var(--ghz-text-primary, #d1d5db);
    font-size: 11px;
    cursor: pointer;
    outline: none;
}
#tab-lichlamviec .p026-filter-select:focus { border-color: rgba(139,92,246,0.5); }

#tab-lichlamviec .p026-btn-today {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.04));
    color: var(--ghz-text-muted, #9ca3af);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-btn-today:hover { background: rgba(255,255,255,0.1); color: var(--ghz-text-primary, #e5e7eb); }

/* Stat cards */
#tab-lichlamviec .p026-stat-cards {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ghz-card-glass-bg, rgba(255,255,255,0.06));
    overflow-x: auto;
}
#tab-lichlamviec .p026-stat-card {
    flex: 1;
    min-width: 80px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.07));
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#tab-lichlamviec .p026-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
}
#tab-lichlamviec .p026-stat-card .label {
    font-size: 10px; font-weight: 600;
    color: var(--ghz-text-muted, #6b7280);
    display: flex; align-items: center; justify-content: center; gap: 4px;
    margin-bottom: 4px;
}
#tab-lichlamviec .p026-stat-card .value {
    font-size: 22px; font-weight: 800;
    color: var(--ghz-text-primary, #f9fafb);
    line-height: 1;
}
#tab-lichlamviec .p026-stat-card .unit { font-size: 10px; color: var(--ghz-text-muted, #6b7280); margin-top: 2px; }

/* Legend */
#tab-lichlamviec .p026-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--ghz-card-glass-bg, rgba(255,255,255,0.06));
    font-size: 10px;
    color: var(--ghz-text-muted, #6b7280);
    flex-wrap: wrap;
}
#tab-lichlamviec .p026-legend-item {
    display: flex; align-items: center; gap: 4px;
}
#tab-lichlamviec .p026-legend-sep { color: #374151; }

/* Shift chip */
#tab-lichlamviec .p026-shift-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    background: var(--chip-fill, #86efac);
    color: var(--chip-text, #15803d);
}
#tab-lichlamviec .p026-shift-chip-empty {
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05));
    color: #4b5563;
    border: 1px dashed rgba(255,255,255,0.1);
}
#tab-lichlamviec .p026-shift-stack-row { display: flex; gap: 2px; }
#tab-lichlamviec .p026-shift-stack-row .p026-shift-chip.compact { min-width: 12px; height: 12px; font-size: 7px; }

/* Schedule table */
#tab-lichlamviec .p026-schedule-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
#tab-lichlamviec .p026-schedule {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}
#tab-lichlamviec .p026-schedule th,
#tab-lichlamviec .p026-schedule td { padding: 0; text-align: center; vertical-align: middle; }

/* ============================================================
   STICKY COLUMNS — TẠM THỜI TẮT position: sticky
   - Lý do: position: sticky gây hiện tượng 2 cột chồng/đè lên nhau
     khi cuộn ngang trên một số trình duyệt, khó debug bằng CSS thuần.
   - Tạm thời chỉ giữ: nền blur đen + border cho 2 cột sticky (đã OK).
   - Khi cuộn ngang, 2 cột sẽ cuộn theo table (giống cũ).
   - Sẽ giải quyết sau bằng JavaScript nếu cần.
   ============================================================ */

/* Cột Nhân viên — giữ nền đặc tương thích với mọi theme (KHÔNG sticky) */
#tab-lichlamviec .p026-schedule .p026-col-name {
    min-width: 160px;
    text-align: left;
    padding: 0 10px;
    background: var(--ghz-card-bg, rgba(17, 24, 39, 0.92));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-right: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
}

/* Cột Tổng — giữ nền đặc tương thích với mọi theme (KHÔNG sticky) */
#tab-lichlamviec .p026-schedule .p026-col-total {
    min-width: 56px;
    background: var(--ghz-card-bg, rgba(17, 24, 39, 0.92));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-left: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
}

#tab-lichlamviec .p026-schedule .p026-col-day { min-width: 36px; width: 36px; }
#tab-lichlamviec .p026-schedule .p026-week-sep { border-left: 2px solid rgba(255,255,255,0.15); }
#tab-lichlamviec .p026-schedule .p026-today-col { background: rgba(251,191,36,0.08); }
#tab-lichlamviec .p026-schedule th.p026-col-day { padding: 5px 2px; }
#tab-lichlamviec .p026-schedule th .p026-day-num { font-size: 10px; font-weight: 700; color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-schedule th .p026-day-dow { font-size: 8px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-schedule th.p026-today-col .p026-day-num { color: #fbbf24; }
#tab-lichlamviec .p026-schedule th.p026-week-sep { border-left: 2px solid rgba(255,255,255,0.15); }
#tab-lichlamviec .p026-schedule .p026-day-cell { padding: 4px 2px; }
#tab-lichlamviec .p026-schedule td.p026-week-sep { border-left: 2px solid rgba(255,255,255,0.15); }
#tab-lichlamviec .p026-schedule td.p026-today-col { background: rgba(251,191,36,0.05); }
#tab-lichlamviec .p026-schedule td:hover { background: var(--ghz-card-glass-bg, rgba(255,255,255,0.04)); cursor: pointer; }

/* Sticky cells: hover theo theme */
#tab-lichlamviec .p026-schedule tbody td.p026-col-name:hover,
#tab-lichlamviec .p026-schedule tbody td.p026-col-total:hover {
    background: var(--ghz-card-glass-bg, rgba(31, 41, 55, 0.95));
    filter: brightness(1.08);
    cursor: default;
}

/* Emp cell in table */
#tab-lichlamviec .p026-emp-cell { padding: 4px 0; }
#tab-lichlamviec .p026-emp-name { font-size: 12px; font-weight: 600; color: var(--ghz-text-primary, #f3f4f6); white-space: nowrap; }
#tab-lichlamviec .p026-emp-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
#tab-lichlamviec .p026-emp-type-sm {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 4px; border-radius: 4px; font-size: 8px; font-weight: 700;
}
#tab-lichlamviec .p026-emp-type-sm.kinhdoanh { background: rgba(59,130,246,0.15); color: #93c5fd; }
#tab-lichlamviec .p026-emp-type-sm.marketing { background: rgba(236,72,153,0.15); color: #f9a8d4; }
#tab-lichlamviec .p026-emp-type-sm.partime { background: rgba(251,191,36,0.15); color: #fcd34d; }
#tab-lichlamviec .p026-emp-code-sm { font-size: 8px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-emp-action {
    font-size: 8px; color: var(--ghz-text-muted, #6b7280); cursor: pointer;
    padding: 1px 4px; border-radius: 4px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05));
    transition: all 0.15s;
}
#tab-lichlamviec .p026-emp-action:hover { background: rgba(255,255,255,0.1); color: var(--ghz-text-primary, #d1d5db); }
#tab-lichlamviec .p026-total-cell { text-align: center; }
#tab-lichlamviec .p026-total-cell .v { font-size: 14px; font-weight: 800; color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-total-cell .u { font-size: 8px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-day-empty { font-size: 10px; color: #374151; }

/* Week row header */
#tab-lichlamviec .p026-schedule th.p026-week-row { border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08)); }

/* Mode single — EMP profile */
#tab-lichlamviec .p026-emp-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.07));
    border-radius: 12px;
    margin: 0 0 10px;
    cursor: pointer;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-emp-profile:hover { background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05)); }
#tab-lichlamviec .p026-emp-profile-avatar {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
    flex-shrink: 0;
    border: 1.5px solid transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#tab-lichlamviec .p026-emp-profile-avatar.kdct { background: rgba(59,130,246,0.25); color: #93c5fd; border-color: rgba(59,130,246,0.45); }
#tab-lichlamviec .p026-emp-profile-avatar.mkt { background: rgba(236,72,153,0.25); color: #f9a8d4; border-color: rgba(236,72,153,0.45); }
#tab-lichlamviec .p026-emp-profile-avatar.kdpt { background: rgba(251,191,36,0.25); color: #fcd34d; border-color: rgba(251,191,36,0.45); }
#tab-lichlamviec .p026-emp-profile-info { flex: 1; }
#tab-lichlamviec .p026-emp-profile-name { font-size: 14px; font-weight: 700; color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-emp-profile-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#tab-lichlamviec .p026-emp-type {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 6px; font-size: 9px; font-weight: 800;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#tab-lichlamviec .p026-emp-type.kinhdoanh { background: rgba(59,130,246,0.2); color: #93c5fd; border-color: rgba(59,130,246,0.4); }
#tab-lichlamviec .p026-emp-type.marketing { background: rgba(236,72,153,0.2); color: #f9a8d4; border-color: rgba(236,72,153,0.4); }
#tab-lichlamviec .p026-emp-type.partime { background: rgba(251,191,36,0.2); color: #fcd34d; border-color: rgba(251,191,36,0.4); }
#tab-lichlamviec .p026-emp-code {
    font-size: 9px; color: var(--ghz-text-muted, #9ca3af);
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Stats row (single) */
#tab-lichlamviec .p026-stats-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
#tab-lichlamviec .p026-stat-mini {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    text-align: center;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.07));
}
#tab-lichlamviec .p026-stat-mini .v { font-size: 18px; font-weight: 800; }
#tab-lichlamviec .p026-stat-mini .l { font-size: 9px; color: var(--ghz-text-muted, #6b7280); margin-top: 1px; }
#tab-lichlamviec .p026-stat-mini.green .v { color: #86efac; }
#tab-lichlamviec .p026-stat-mini.blue .v { color: #93c5fd; }
#tab-lichlamviec .p026-stat-mini.purple .v { color: #c4b5fd; }

/* View tabs */
#tab-lichlamviec .p026-view-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px 10px;
}
#tab-lichlamviec .p026-view-tab {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    background: transparent;
    color: var(--ghz-text-muted, #6b7280);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#tab-lichlamviec .p026-view-tab i { font-size: 11px; }
#tab-lichlamviec .p026-view-tab.active { background: rgba(59,130,246,0.15); color: #60a5fa; }

/* P0_26 chung: icon + text luôn có khoảng cách */
#tab-lichlamviec .p026-card-header h2 { gap: 8px; }
#tab-lichlamviec .p026-stat-mini,
#tab-lichlamviec .p026-legend-item,
#tab-lichlamviec .p026-filter-select,
#tab-lichlamviec .p026-month-nav .label,
#tab-lichlamviec .p026-emp-action,
#tab-lichlamviec .p026-qa-btn,
#tab-lichlamviec .p026-nextweek-clear-btn,
#tab-lichlamviec .p026-nextweek-save-btn,
#tab-lichlamviec .p026-info-key,
#tab-lichlamviec .p026-day-card-head,
#tab-lichlamviec .p026-emp-modal-empty i,
#tab-lichlamviec .p026-toggle-lock-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#tab-lichlamviec .p026-emp-type-sm { gap: 3px; }

/* Header h2 / list card có icon dẫn đầu text */
#tab-lichlamviec .p026-day-card-head { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   FIX: Icon FontAwesome dính sát vào chữ
   - FontAwesome glyph có right-side-bearing = 0 nên dù flex container
     đã có `gap`, icon vẫn trông rất sát text → thêm margin-right cho icon
   - Áp dụng cho MỌI icon fa-* trong tab lịch làm việc để chắc chắn
     không bị dính chữ ở bất kỳ button / chip / badge / row nào
   ============================================================ */
#tab-lichlamviec i[class*="fa-"] {
    margin-right: 4px;
    flex-shrink: 0;
}
/* Nếu icon đứng một mình (text là sibling, không có icon khác theo sau)
   thì giữ margin-right để tạo khoảng cách với text phía sau */
#tab-lichlamviec i[class*="fa-"]:last-child {
    margin-right: 0;
    margin-left: 4px;
}
/* Một số nơi icon nằm trong span/chip rồi tới text — vẫn áp dụng margin-right */
/* Ngoại lệ: icon trong .p026-emp-modal-empty i (đứng một mình trên 1 dòng) */
#tab-lichlamviec .p026-emp-modal-empty i,
#tab-lichlamviec .p026-no-shift i,
#tab-lichlamviec .p026-emp-modal-off .big-icon i,
#tab-lichlamviec .p026-action-card-icon,
#tab-lichlamviec .p026-action-card-icon > i,
#tab-lichlamviec .p026-cal-cell .d,
#tab-lichlamviec .p026-shift-dot,
#tab-lichlamviec .p026-shift-stack-row > i,
#tab-lichlamviec .p026-action-card-badge,
#tab-lichlamviec .p026-emp-shift-time i,
#tab-lichlamviec .p026-emp-modal-empty > i,
#tab-lichlamviec .p026-emp-shift-icon,
#tab-lichlamviec .p026-shift-row-icon,
/* Icon đứng một mình trong btn chỉ có icon (không có text) */
#tab-lichlamviec .p026-nextweek-mgr-btn > i:only-child,
#tab-lichlamviec .p026-back-to-table-btn > i:only-child,
#tab-lichlamviec .p026-modal-btn > i:only-child,
#tab-lichlamviec .p026-qa-btn > i:only-child,
#tab-lichlamviec .p026-view-tab > i:only-child,
#tab-lichlamviec .p026-role-btn > i:only-child {
    margin-right: 0;
}

/* Tăng khoảng cách cho các nút/badges chính để rõ ràng hơn */
#tab-lichlamviec .p026-modal-btn > i[class*="fa-"],
#tab-lichlamviec .p026-qa-btn > i[class*="fa-"],
#tab-lichlamviec .p026-nextweek-clear-btn > i[class*="fa-"],
#tab-lichlamviec .p026-nextweek-save-btn > i[class*="fa-"],
#tab-lichlamviec .p026-back-to-table-btn > i[class*="fa-"],
#tab-lichlamviec .p026-nextweek-mgr-btn > i[class*="fa-"],
#tab-lichlamviec .p026-btn-today > i[class*="fa-"],
#tab-lichlamviec .p026-view-tab > i[class*="fa-"],
#tab-lichlamviec .p026-role-btn > i[class*="fa-"],
#tab-lichlamviec .p026-mode-tab > i[class*="fa-"],
#tab-lichlamviec .p026-emp-action > i[class*="fa-"],
#tab-lichlamviec .p026-info-key > i[class*="fa-"],
#tab-lichlamviec .p026-day-card-head > i[class*="fa-"],
#tab-lichlamviec .p026-stat-mini > i[class*="fa-"],
#tab-lichlamviec .p026-toggle-lock-btn > i[class*="fa-"],
#tab-lichlamviec .p026-month-nav .label > i[class*="fa-"],
#tab-lichlamviec .p026-card-header h2 > i[class*="fa-"],
#tab-lichlamviec .p026-emp-type-sm > i[class*="fa-"],
#tab-lichlamviec .p026-emp-type > i[class*="fa-"],
#tab-lichlamviec .p026-legend-item > i[class*="fa-"],
#tab-lichlamviec .p026-legend-item > span[class*="p026-shift-chip"],
#tab-lichlamviec .p026-status-badge > i[class*="fa-"],
#tab-lichlamviec .p026-emp-shift-info .info-key > i[class*="fa-"],
#tab-lichlamviec .p026-day-item > i[class*="fa-"] {
    margin-right: 6px;
}

/* Bỏ display: block của các icon đứng một mình ngay trước text */
#tab-lichlamviec .p026-no-shift { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#tab-lichlamviec .p026-no-shift i { margin: 0; }

/* Calendar grid */
#tab-lichlamviec .p026-dow-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(48px, 1fr));
    padding: 6px 14px;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    color: var(--ghz-text-muted, #6b7280);
    text-align: center;
    border-bottom: 1px solid var(--ghz-card-glass-bg, rgba(255,255,255,0.06));
    width: 100%;
}
#tab-lichlamviec .p026-dow-header span.today { color: #fbbf24; }

/* Cho phép cuộn ngang khi viewport quá hẹp — tránh bị bóp méo/thu gọn ô lưới.
   Dùng auto thay vì scroll để thanh cuộn chỉ hiện khi thực sự cần (desktop
   đủ rộng sẽ KHÔNG có scroll, mobile / cột hẹp sẽ có scroll khi cần). */
#tab-lichlamviec .p026-emp-tab.p026-section.active,
#tab-lichlamviec .p026-emp-tab[data-emp-tab="grid"] {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Đảm bảo wrapper chiếm đủ chiều rộng để grid có thể co giãn */
    width: 100%;
    min-width: 0;
}
/* Lưới ngày: dùng minmax(48px, 1fr) để:
   - Mỗi ô tối thiểu 48px (đủ chỗ cho số + dots)
   - Khi container rộng, 7 ô sẽ chia đều (1fr) → ô lớn hơn
   - Khi container < 7×48px + gap + padding → grid tràn và cha có overflow-x:auto → cuộn ngang
   Công thức: 7×48 + 6×4 + 28 padding ≈ 388px là ngưỡng tối thiểu */
#tab-lichlamviec .p026-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(48px, 1fr));
    gap: 4px;
    padding: 10px 14px;
    width: 100%;
}
#tab-lichlamviec .p026-cal-cell {
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    min-height: 48px;
    /* Dùng min-width thay vì 0 để mỗi ô LUÔN ≥ 48px,
       không bị flex/grid bóp nhỏ hơn kích thước tối thiểu */
    min-width: 48px;
    padding: 4px;
    overflow: hidden;
    position: relative;
}
#tab-lichlamviec .p026-cal-cell.empty { background: transparent; cursor: default; }
/* Ngày đầu tháng sau (hiển thị ở các ô cuối để lưới đều 6 hàng × 7 cột) */
#tab-lichlamviec .p026-cal-cell.next-month {
    background: rgba(255,255,255,0.015);
    border: 1px dashed rgba(255,255,255,0.06);
    cursor: pointer;
    opacity: 0.75;
}
#tab-lichlamviec .p026-cal-cell.next-month:hover { background: var(--ghz-card-border, rgba(255,255,255,0.06)); opacity: 1; }
#tab-lichlamviec .p026-cal-cell.next-month .d { color: var(--ghz-text-muted, #6b7280); opacity: 0.7; }
#tab-lichlamviec .p026-cal-cell.next-month.has-schedule .d { color: var(--ghz-text, #9ca3af); }
#tab-lichlamviec .p026-cal-cell .p026-next-month-label {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 7px;
    font-weight: 500;
    color: var(--ghz-text-muted, #4b5563);
    opacity: 0.6;
    line-height: 1;
}
#tab-lichlamviec .p026-cal-cell.has-schedule {
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.04));
    border-color: var(--ghz-card-border, rgba(255,255,255,0.08));
}
#tab-lichlamviec .p026-cal-cell.has-schedule:hover { background: var(--ghz-card-border, rgba(255,255,255,0.08)); }
#tab-lichlamviec .p026-cal-cell.today { border-color: #fbbf24; background: rgba(251,191,36,0.08); }
#tab-lichlamviec .p026-cal-cell.weekend { background: rgba(255,255,255,0.02); }
#tab-lichlamviec .p026-cal-cell .d { font-size: 11px; font-weight: 700; color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-cal-cell.today .d { color: #fbbf24; }
#tab-lichlamviec .p026-cal-cell.empty .d { color: #374151; }
#tab-lichlamviec .p026-shift-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
}

/* Day list */
#tab-lichlamviec .p026-day-list-scroll { max-height: 400px; overflow-y: auto; padding: 0 14px; }
#tab-lichlamviec .p026-day-list { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
#tab-lichlamviec .p026-day-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.07));
    cursor: pointer;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-day-item:hover { background: var(--ghz-card-glass-bg, rgba(255,255,255,0.06)); }
#tab-lichlamviec .p026-day-item.today-item { border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.05); }
#tab-lichlamviec .p026-day-date { text-align: center; min-width: 28px; }
#tab-lichlamviec .p026-day-date-num { font-size: 14px; font-weight: 800; color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-day-date-dow { font-size: 8px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-day-shifts { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
#tab-lichlamviec .p026-day-arrow { color: #4b5563; font-size: 10px; }
#tab-lichlamviec .p026-no-shift { text-align: center; padding: 20px; color: var(--ghz-text-muted, #6b7280); font-size: 12px; }

/* Nút quay lại bảng tổng */
#tab-lichlamviec .p026-back-to-table-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: background 0.15s, transform 0.15s;
}
#tab-lichlamviec .p026-back-to-table-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
#tab-lichlamviec .p026-back-to-table-btn:active { transform: translateY(0); }

/* Section đăng ký ca tuần kế tiếp */
#tab-lichlamviec .p026-nextweek-card {
    background: var(--ghz-card-glass-bg, #1f2937);
    border: 1px solid var(--ghz-card-glass-border, var(--ghz-card-border, transparent));
    border-radius: 16px;
    padding: 18px;
}
#tab-lichlamviec .p026-nextweek-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(34, 197, 94, 0.15); color: #22c55e;
    font-size: 11px; font-weight: 700;
}
#tab-lichlamviec .p026-nextweek-status.locked {
    background: rgba(239, 68, 68, 0.15); color: #ef4444;
}
#tab-lichlamviec .p026-nextweek-mgr-btn {
    background: #f59e0b; color: #111; border: none;
    padding: 6px 14px; border-radius: 10px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    transition: transform 0.15s;
}
#tab-lichlamviec .p026-nextweek-mgr-btn:hover { transform: translateY(-1px); }
#tab-lichlamviec .p026-nextweek-employee {
    font-size: 12px; color: var(--ghz-text-muted, #9ca3af); margin-bottom: 12px;
}
#tab-lichlamviec .p026-nextweek-employee strong { color: var(--ghz-text-primary, #fff); }
#tab-lichlamviec .p026-nextweek-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
    margin-bottom: 14px;
}
#tab-lichlamviec .p026-nextweek-day {
    background: var(--ghz-card-bg, #111827); border-radius: 12px; padding: 10px 6px;
    border: 1px solid var(--ghz-card-border, #374151); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    min-height: 180px;
}
#tab-lichlamviec .p026-nextweek-day .dow { font-size: 11px; font-weight: 700; color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-nextweek-day .date { font-size: 18px; font-weight: 800; color: var(--ghz-text-primary, #fff); }
#tab-lichlamviec .p026-nextweek-day .chip-row { display: flex; flex-direction: column; gap: 6px; width: 100%; }
#tab-lichlamviec .p026-nextweek-chip {
    border: none; border-radius: 8px; padding: 6px 4px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    transition: all 0.15s;
    color: var(--ghz-text-primary, #fff);
}
#tab-lichlamviec .p026-nextweek-chip:hover { transform: translateY(-1px); }
#tab-lichlamviec .p026-nextweek-chip[data-shift="Sáng"] { background: #86efac; color: #15803d; }
#tab-lichlamviec .p026-nextweek-chip[data-shift="Chiều"] { background: #93c5fd; color: #1d4ed8; }
#tab-lichlamviec .p026-nextweek-chip[data-shift="Tối"] { background: #c4b5fd; color: #6d28d9; }
#tab-lichlamviec .p026-nextweek-chip.active {
    outline: 3px solid #22c55e;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.22), 0 4px 12px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}
#tab-lichlamviec .p026-nextweek-chip[data-shift="Nghỉ"] { background: #4b5563; color: var(--ghz-text-primary, #fff); }
#tab-lichlamviec .p026-nextweek-chip[data-shift="Nghỉ"].active {
    background: #ef4444;
    outline-color: #ef4444;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.22), 0 4px 12px rgba(239, 68, 68, 0.4);
}
#tab-lichlamviec .p026-nextweek-day.locked .p026-nextweek-chip {
    cursor: not-allowed; opacity: 0.6;
}
#tab-lichlamviec .p026-nextweek-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 12px;
}
#tab-lichlamviec .p026-nextweek-clear-btn {
    background: #374151; color: var(--ghz-text-primary, #fff); border: none;
    padding: 8px 16px; border-radius: 10px;
    font-size: 12px; font-weight: 700; cursor: pointer;
}
#tab-lichlamviec .p026-nextweek-clear-btn:hover { background: #4b5563; }
#tab-lichlamviec .p026-nextweek-save-btn {
    background: #22c55e; color: #052e1a; border: none;
    padding: 8px 18px; border-radius: 10px;
    font-size: 12px; font-weight: 800; cursor: pointer;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}
#tab-lichlamviec .p026-nextweek-save-btn:hover { background: #16a34a; }
#tab-lichlamviec .p026-nextweek-save-btn:disabled {
    background: #4b5563; color: var(--ghz-text-muted, #9ca3af); cursor: not-allowed; box-shadow: none;
}
#tab-lichlamviec .p026-nextweek-locked-note {
    display: flex; align-items: center; gap: 8px;
    background: rgba(239, 68, 68, 0.12); color: #fca5a5;
    border-radius: 10px; padding: 10px 14px;
    font-size: 12px; font-weight: 600;
    margin-top: 12px;
}
#tab-lichlamviec .p026-nextweek-day.has-shift {
    border-color: var(--ghz-success, #22c55e);
    background: linear-gradient(180deg, var(--ghz-success-bg, rgba(34,197,94,0.18)) 0%, var(--ghz-card-bg, #111827) 50%);
}

/* Cell lưới ngày thuộc tuần kế tiếp — NV được click đăng ký */
#tab-lichlamviec .p026-cal-cell[data-reg-week],
#tab-lichlamviec .p026-cal-cell[data-nextweek-key] {
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.06);
}
#tab-lichlamviec .p026-cal-cell[data-reg-week]:hover,
#tab-lichlamviec .p026-cal-cell[data-nextweek-key]:hover {
    background: rgba(34, 197, 94, 0.18);
    box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.9);
}

/* Cửa sổ mở lại đăng ký (admin) */
#tab-lichlamviec #p026-admin-reg-controls {
    margin: 0 0 12px;
    border: 1px solid var(--ghz-card-border, rgba(59,130,246,0.22));
    border-radius: 14px;
    overflow: hidden;
    background: var(--ghz-card-glass-bg, rgba(59,130,246,0.05));
}
#tab-lichlamviec #p026-admin-reg-controls:empty { display: none; }
#tab-lichlamviec .p026-admin-reg-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ghz-card-border, rgba(59,130,246,0.18));
}
#tab-lichlamviec .p026-admin-reg-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 12px;
    font-weight: 800;
}
#tab-lichlamviec .p026-admin-reg-title i { color: #60a5fa; }
#tab-lichlamviec .p026-admin-reg-sub {
    margin-top: 4px;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 10px;
    line-height: 1.45;
}
#tab-lichlamviec .p026-admin-reg-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.06));
}
#tab-lichlamviec .p026-admin-reg-row:last-child { border-bottom: 0; }
#tab-lichlamviec .p026-admin-reg-info { flex: 1; min-width: 0; }
#tab-lichlamviec .p026-admin-reg-label {
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 11px;
    font-weight: 800;
}
#tab-lichlamviec .p026-admin-reg-range {
    margin-top: 2px;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 10px;
}
#tab-lichlamviec .p026-admin-reg-badge {
    flex: 0 0 auto;
    border-radius: 99px;
    padding: 4px 7px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}
#tab-lichlamviec .p026-admin-reg-badge.open { color: #166534; background: #bbf7d0; }
#tab-lichlamviec .p026-admin-reg-badge.closed { color: #9ca3af; background: rgba(107,114,128,0.24); }
#tab-lichlamviec .p026-admin-reg-btn {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
#tab-lichlamviec .p026-admin-reg-btn.open { background: #22c55e; color: #052e16; }
#tab-lichlamviec .p026-admin-reg-btn.close { background: rgba(107,114,128,0.2); border-color: rgba(156,163,175,0.3); color: var(--ghz-text-primary, #e5e7eb); }
#tab-lichlamviec .p026-admin-reg-btn:hover { filter: brightness(1.1); }

@media (max-width: 520px) {
    #tab-lichlamviec .p026-admin-reg-row { flex-wrap: wrap; }
    #tab-lichlamviec .p026-admin-reg-info { flex-basis: 100%; }
}

/* Modal đăng ký ca */
#tab-lichlamviec .p026-register-sheet { max-width: 520px; }
#tab-lichlamviec .p026-register-warning {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11px; font-weight: 600;
    margin: 10px 0 14px;
}
#tab-lichlamviec .p026-register-body-grid {
    display: flex; flex-direction: column; gap: 10px;
}
#tab-lichlamviec .p026-register-day-row {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 12px; background: var(--ghz-card-bg, #111827);
    border-radius: 10px; border: 1px solid var(--ghz-card-border, #374151);
}
#tab-lichlamviec .p026-register-day-row.focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.6);
}
#tab-lichlamviec .p026-register-day-info { display: flex; flex-direction: column; min-width: 78px; }
#tab-lichlamviec .p026-register-day-info .dow { font-size: 11px; font-weight: 700; color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-register-day-info .date { font-size: 15px; font-weight: 800; color: var(--ghz-text-primary, #fff); }
#tab-lichlamviec .p026-register-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
#tab-lichlamviec .p026-register-chip {
    border: none; border-radius: 8px; padding: 6px 10px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    color: var(--ghz-text-primary, #fff); transition: all 0.15s;
}
#tab-lichlamviec .p026-register-chip[data-shift="Sáng"] { background: #86efac; color: #15803d; }
#tab-lichlamviec .p026-register-chip[data-shift="Chiều"] { background: #93c5fd; color: #1d4ed8; }
#tab-lichlamviec .p026-register-chip[data-shift="Tối"] { background: #c4b5fd; color: #6d28d9; }
#tab-lichlamviec .p026-register-chip[data-shift="Nghỉ"] { background: #4b5563; color: var(--ghz-text-primary, #fff); }
#tab-lichlamviec .p026-register-chip:hover { transform: translateY(-1px); }
#tab-lichlamviec .p026-register-chip.active {
    outline: 3px solid #22c55e;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.22), 0 4px 12px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}
#tab-lichlamviec .p026-register-chip[data-shift="Nghỉ"].active {
    background: #ef4444;
    outline-color: #ef4444;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.22), 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Today detail */
#tab-lichlamviec .p026-detail-overlay { padding: 0 14px 14px; }
#tab-lichlamviec .p026-detail-header { padding: 10px 0; border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08)); }
#tab-lichlamviec .p026-detail-header h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-detail-shifts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#tab-lichlamviec .p026-shift-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    border-radius: 10px;
}
#tab-lichlamviec .p026-shift-card-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    flex-shrink: 0;
}
#tab-lichlamviec .p026-shift-card-info { flex: 1; }
#tab-lichlamviec .p026-shift-card-info .label { font-size: 12px; font-weight: 700; color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-shift-card-info .time { font-size: 10px; color: var(--ghz-text-muted, #9ca3af); margin-top: 1px; }
#tab-lichlamviec .p026-shift-card-info .note { font-size: 9px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-shift-card-action { display: flex; gap: 4px; }
#tab-lichlamviec .p026-shift-action-btn {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05));
    color: var(--ghz-text-muted, #9ca3af);
    cursor: pointer;
    font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-shift-action-btn:hover { background: rgba(255,255,255,0.1); color: var(--ghz-text-primary, #e5e7eb); }
#tab-lichlamviec .p026-shift-action-btn.delete:hover { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.3); }

/* Quick action buttons */
#tab-lichlamviec .p026-qa-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#tab-lichlamviec .p026-qa-btn {
    flex: 1; min-width: 80px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05));
    color: var(--ghz-text-primary, #d1d5db);
    cursor: pointer;
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-qa-btn:hover { background: rgba(255,255,255,0.1); color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-qa-btn.register { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #93c5fd; }
#tab-lichlamviec .p026-qa-btn.register:hover { background: rgba(59,130,246,0.2); }
#tab-lichlamviec .p026-qa-btn.danger:hover { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.3); }

/* ===== MODALS ===== */

/* Edit modal (admin) */
#tab-lichlamviec .p026-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(10px);
}
#tab-lichlamviec .p026-modal-backdrop.open { display: flex; align-items: center; justify-content: center; padding: 16px; }
#tab-lichlamviec .p026-modal-sheet {
    background: var(--ghz-card-glass-bg, #1a1d24);
    border: 1px solid var(--ghz-card-glass-border, rgba(255,255,255,0.1));
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    width: 100%;
    max-width: 420px;
    padding: 18px;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: p026ModalIn 0.18s ease-out;
}
@keyframes p026ModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
#tab-lichlamviec .p026-modal-header h3 { font-size: 15px; font-weight: 700; color: var(--ghz-text-primary, #f3f4f6); margin: 0 0 2px; }
#tab-lichlamviec .p026-modal-header p { font-size: 11px; color: var(--ghz-text-muted, #6b7280); margin: 0; }
#tab-lichlamviec .p026-modal-current {
    margin: 12px 0;
    padding: 8px 12px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.04));
    border-radius: 8px;
    font-size: 11px;
    color: var(--ghz-text-muted, #9ca3af);
}
#tab-lichlamviec .p026-modal-current strong { color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-modal-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
#tab-lichlamviec .p026-action-card {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.04));
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    position: relative;
}
#tab-lichlamviec .p026-action-card:hover { background: var(--ghz-card-border, rgba(255,255,255,0.08)); border-color: rgba(255,255,255,0.15); }
#tab-lichlamviec .p026-action-card.primary { border-color: rgba(59,130,246,0.3); }
#tab-lichlamviec .p026-action-card.primary:hover { background: rgba(59,130,246,0.1); }
#tab-lichlamviec .p026-action-card.warn { border-color: rgba(251,191,36,0.3); }
#tab-lichlamviec .p026-action-card.warn:hover { background: rgba(251,191,36,0.08); }
#tab-lichlamviec .p026-action-card.danger:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
#tab-lichlamviec .p026-action-card-badge {
    position: absolute; top: 6px; right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(59,130,246,0.2);
    color: #93c5fd;
    font-size: 8px; font-weight: 800;
}
#tab-lichlamviec .p026-action-card-icon { font-size: 18px; color: var(--ghz-text-muted, #9ca3af); margin-bottom: 4px; }
#tab-lichlamviec .p026-action-card-label { font-size: 11px; font-weight: 700; color: var(--ghz-text-primary, #f3f4f6); margin-bottom: 2px; }
#tab-lichlamviec .p026-action-card-desc { font-size: 9px; color: var(--ghz-text-muted, #6b7280); }

/* Sub-modal */
#tab-lichlamviec .p026-submodal {
    display: none;
    margin: 8px 0 10px;
    padding: 10px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border-radius: 10px;
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.07));
}
#tab-lichlamviec .p026-submodal.open { display: block; }
#tab-lichlamviec .p026-submodal-title { font-size: 11px; font-weight: 700; color: var(--ghz-text-muted, #9ca3af); margin-bottom: 8px; }
#tab-lichlamviec .p026-shift-row { display: flex; flex-direction: column; gap: 6px; }
#tab-lichlamviec .p026-shift-row-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.07));
    cursor: pointer;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-shift-row-item:hover { background: var(--ghz-card-border, rgba(255,255,255,0.08)); }
#tab-lichlamviec .p026-shift-row-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    flex-shrink: 0;
    background: var(--ghz-card-border, rgba(255,255,255,0.08));
    color: var(--ghz-text-primary, #e5e7eb);
}
#tab-lichlamviec .p026-shift-row-label { font-size: 12px; font-weight: 600; color: var(--ghz-text-primary, #f3f4f6); flex: 1; }
#tab-lichlamviec .p026-shift-row-time { font-size: 10px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-modal-footer { margin-top: 10px; }
#tab-lichlamviec .p026-modal-btn {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05));
    color: var(--ghz-text-primary, #d1d5db);
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    transition: all 0.15s;
}
#tab-lichlamviec .p026-modal-btn:hover { background: rgba(255,255,255,0.1); color: var(--ghz-text-primary, #f3f4f6); }

/* Emp modal */
#tab-lichlamviec .p026-emp-modal-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
#tab-lichlamviec .p026-emp-modal-header h3 { font-size: 14px; font-weight: 700; color: var(--ghz-text-primary, #f3f4f6); margin: 0 0 2px; }
#tab-lichlamviec .p026-emp-modal-header p { font-size: 11px; color: var(--ghz-text-muted, #6b7280); margin: 0; }
#tab-lichlamviec .p026-emp-modal-status { margin-bottom: 10px; }
#tab-lichlamviec .p026-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 600;
}
#tab-lichlamviec .p026-status-badge.empty {
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.05));
    color: var(--ghz-text-muted, #6b7280);
    border: 1px dashed var(--ghz-card-border, rgba(255,255,255,0.1));
}
#tab-lichlamviec .p026-status-badge.off {
    /* Nghỉ phép — dùng warning color theo theme */
    background: var(--ghz-warning-bg, rgba(251,191,36,0.1));
    color: var(--ghz-warning, #fcd34d);
    border: 1px solid var(--ghz-warning-border, rgba(251,191,36,0.2));
}
#tab-lichlamviec .p026-status-badge.active {
    background: rgba(34,197,94,0.2);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,0.4);
}
#tab-lichlamviec .p026-emp-modal-empty { text-align: center; padding: 20px; }
#tab-lichlamviec .p026-emp-modal-empty i { font-size: 28px; color: #374151; margin-bottom: 8px; }
#tab-lichlamviec .p026-emp-modal-empty > div { font-size: 13px; color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-emp-modal-empty .sub { font-size: 11px; color: var(--ghz-text-muted, #6b7280); margin-top: 4px; }
#tab-lichlamviec .p026-emp-modal-off { text-align: center; padding: 20px; }
#tab-lichlamviec .p026-emp-modal-off .big-icon {
    font-size: 36px;
    color: var(--ghz-warning, #fbbf24);
    margin-bottom: 8px;
}
#tab-lichlamviec .p026-emp-modal-off .big-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--ghz-warning, #fbbf24);
    /* Glow nhẹ theo theme */
    text-shadow: 0 0 12px var(--ghz-warning-bg, rgba(251,191,36,0.15));
}
#tab-lichlamviec .p026-emp-modal-off .sub { font-size: 11px; color: var(--ghz-text-muted, #6b7280); margin-top: 4px; }
#tab-lichlamviec .p026-emp-modal-off .info-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--ghz-card-glass-bg, rgba(255,255,255,0.05)); }
#tab-lichlamviec .p026-emp-modal-off .info-key { font-size: 11px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-emp-modal-off .info-val { font-size: 11px; color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-emp-shift-list { display: flex; flex-direction: column; gap: 8px; }
#tab-lichlamviec .p026-emp-shift-row { display: flex; gap: 10px; }
#tab-lichlamviec .p026-emp-shift-time { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
#tab-lichlamviec .p026-emp-shift-time .time-main { font-size: 10px; font-weight: 700; color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-emp-shift-time .time-line { flex: 1; width: 1px; background: rgba(255,255,255,0.1); margin: 2px 0; }
#tab-lichlamviec .p026-emp-shift-card { flex: 1; }
#tab-lichlamviec .p026-emp-shift-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#tab-lichlamviec .p026-emp-shift-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
#tab-lichlamviec .p026-emp-shift-name { font-size: 12px; font-weight: 700; color: var(--ghz-text-primary, #f3f4f6); }
#tab-lichlamviec .p026-emp-shift-dur { font-size: 9px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-emp-shift-info .info-row { display: flex; gap: 8px; padding: 4px 0; font-size: 10px; align-items: center; }
#tab-lichlamviec .p026-emp-shift-info .info-key { color: var(--ghz-text-muted, #6b7280); display: flex; align-items: center; gap: 6px; min-width: 78px; }
#tab-lichlamviec .p026-emp-shift-info .info-key i { font-size: 11px; width: 12px; text-align: center; }
#tab-lichlamviec .p026-emp-shift-info .info-val { color: var(--ghz-text-muted, #9ca3af); }
#tab-lichlamviec .p026-emp-modal-summary { display: flex; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08)); }
#tab-lichlamviec .p026-emp-modal-summary .summary-item { flex: 1; text-align: center; }
#tab-lichlamviec .p026-emp-modal-summary .l { font-size: 10px; color: var(--ghz-text-muted, #6b7280); }
#tab-lichlamviec .p026-emp-modal-summary .v { font-size: 18px; font-weight: 800; color: var(--ghz-text-primary, #f3f4f6); }

/* Perm badge */
#tab-lichlamviec .p026-perm-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px; border-radius: 6px;
    font-size: 8px; font-weight: 800; letter-spacing: 0.04em;
}
#tab-lichlamviec .p026-perm-badge.read { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
#tab-lichlamviec .p026-perm-badge.write { background: rgba(124,58,237,0.15); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.3); }

/* ============================================================
   RESPONSIVE — LƯỚI NGÀY (CALENDAR GRID)
   Grid đã dùng `repeat(7, minmax(48px, 1fr))` ở base → tự co giãn theo
   container. Các media query dưới đây chỉ TINH CHỈNH padding/gap/font-size
   cho từng khoảng viewport để tận dụng tối đa không gian hiển thị.
   - Không bao giờ force `width: 100%` cứng — để grid tự quyết định
   - Khi container < 7×(48+gap)+padding → grid tràn, cha có overflow-x:auto
     sẽ tự hiện thanh cuộn ngang (mobile, cột desktop hẹp)
   ============================================================ */

/* Mặc định (desktop ≥1024px): gap/padding thoáng, content dễ đọc */
@media (min-width: 1024px) {
    #tab-lichlamviec .p026-cal-grid {
        gap: 6px;
        padding: 12px 16px;
    }
    #tab-lichlamviec .p026-dow-header {
        padding: 8px 16px;
        gap: 6px;
        font-size: 10px;
    }
    #tab-lichlamviec .p026-cal-cell {
        padding: 6px;
        min-height: 56px;
        border-radius: 12px;
    }
    #tab-lichlamviec .p026-cal-cell .d { font-size: 13px; }
    #tab-lichlamviec .p026-shift-dot { width: 6px; height: 6px; }
}

/* Tablet ngang / desktop nhỏ (768-1023px): compact hơn */
@media (min-width: 768px) and (max-width: 1023px) {
    #tab-lichlamviec .p026-cal-grid {
        gap: 5px;
        padding: 10px 14px;
    }
    #tab-lichlamviec .p026-dow-header {
        padding: 6px 14px;
        gap: 5px;
        font-size: 9px;
    }
    #tab-lichlamviec .p026-cal-cell {
        padding: 4px;
        min-height: 52px;
    }
    #tab-lichlamviec .p026-cal-cell .d { font-size: 12px; }
    #tab-lichlamviec .p026-shift-dot { width: 5px; height: 5px; }
}

/* Mobile / tablet dọc (≤767px): gap/padding nhỏ lại, vẫn đảm bảo min-width */
@media (max-width: 767px) {
    #tab-lichlamviec .p026-cal-grid {
        gap: 4px;
        padding: 8px 10px;
    }
    #tab-lichlamviec .p026-dow-header {
        padding: 6px 10px;
        gap: 4px;
        font-size: 9px;
    }
    #tab-lichlamviec .p026-cal-cell {
        padding: 3px 2px;
        min-height: 48px;
    }
    #tab-lichlamviec .p026-cal-cell .d { font-size: 11px; }
    #tab-lichlamviec .p026-shift-dot { width: 5px; height: 5px; }
}

/* Màn rất nhỏ (≤380px): giảm nhẹ min-width của ô xuống 42px để 7 ô vừa
   trong viewport hơn, vẫn giữ khoảng cách và không tràn quá nhiều */
@media (max-width: 380px) {
    #tab-lichlamviec .p026-dow-header,
    #tab-lichlamviec .p026-cal-grid {
        grid-template-columns: repeat(7, minmax(42px, 1fr));
    }
    #tab-lichlamviec .p026-cal-cell {
        min-width: 42px;
        min-height: 42px;
        padding: 2px 1px;
    }
    #tab-lichlamviec .p026-cal-cell .d { font-size: 10px; }
}

/* Theme hierarchy: card ngoài tách rõ các surface tương tác bên trong. */
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-card {
    background: var(--ghz-card-bg);
    border-color: var(--ghz-card-border);
    box-shadow: var(--ghz-card-glass-shadow);
}
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-card-header,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-detail-header {
    border-color: var(--ghz-card-border);
}
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-emp-profile,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-stat-mini,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-cal-cell.has-schedule,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-day-item,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-shift-card,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-view-tab,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-submodal,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-shift-row-item {
    background: var(--ghz-input-bg);
    border-color: var(--ghz-input-border);
}
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-emp-profile:hover,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-cal-cell.has-schedule:hover,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-day-item:hover,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-shift-row-item:hover {
    background: var(--ghz-brand-soft-08);
    border-color: var(--ghz-brand-color);
}
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-card-header h2,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-emp-profile-name,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-day-date-num,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-detail-header h3,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-shift-card-info .label {
    color: var(--ghz-text-primary);
}
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-emp-code,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-stat-mini .l,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-cal-cell .d,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-day-date-dow,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-shift-card-info .time,
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-shift-card-info .note {
    color: var(--ghz-text-muted);
}
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-stat-mini.green .v { color: var(--ghz-success); }
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-stat-mini.blue .v { color: var(--ghz-info); }
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec .p026-stat-mini.purple .v { color: var(--ghz-brand-color); }