/* ══════════════════════════════════════════════════════════════
   Module Chấm công — tiền tố at-
   ══════════════════════════════════════════════════════════════ */

/* ── Thanh công cụ ─────────────────────────────────────────────*/
.at-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.at-spacer { flex:1; }
.at-create-btn {
    padding:10px 18px; border-radius:9px; border:1px solid rgba(99,102,241,.4);
    background:rgba(99,102,241,.14); color:#a5b4fc; cursor:pointer;
    font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:7px;
    transition:background .15s;
}
.at-create-btn:hover { background:rgba(99,102,241,.24); }
.at-month { display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--text-main); }
.at-month strong { min-width:118px; text-align:center; }
.at-mbtn {
    width:30px; height:30px; border-radius:7px; cursor:pointer;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    color:var(--text-muted); display:flex; align-items:center; justify-content:center;
}
.at-mbtn:hover { border-color:rgba(99,102,241,.4); color:#818cf8; }
.at-hint { font-size:11.5px; color:#64748b; display:inline-flex; align-items:center; gap:5px; }

/* ── Tabs ──────────────────────────────────────────────────────*/
.at-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:18px; }
.at-tab {
    padding:11px 17px; background:none; border:none; border-bottom:2px solid transparent;
    margin-bottom:-1px; color:var(--text-muted); cursor:pointer; font-size:13.5px; font-weight:600;
    display:inline-flex; align-items:center; gap:7px; transition:color .15s,border-color .15s;
}
.at-tab:hover { color:#a5b4fc; }
.at-tab.active { color:#818cf8; border-bottom-color:#818cf8; }
.at-badge { background:#ef4444; color:#fff; border-radius:20px; padding:1px 7px; font-size:11px; font-weight:700; }

/* ── Thẻ đơn ───────────────────────────────────────────────────*/
.at-list { display:flex; flex-direction:column; gap:12px; }
.at-card {
    background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07);
    border-left:3px solid rgba(255,255,255,.15); border-radius:11px; padding:14px 17px;
}
.at-card.at-t-leave { border-left-color:#38bdf8; }
.at-card.at-t-late  { border-left-color:#fbbf24; }
.at-card.at-t-early { border-left-color:#f472b6; }
.at-card.at-t-ot    { border-left-color:#a78bfa; }
.at-card-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.at-type { font-size:13px; font-weight:700; color:var(--c); display:inline-flex; align-items:center; gap:6px; }
.at-who { font-size:12.5px; color:#cbd5e1; display:inline-flex; align-items:center; gap:5px; }
.at-status { margin-left:auto; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.at-st-pending   { background:rgba(245,158,11,.15); color:#fbbf24; }
.at-st-approved  { background:rgba(16,185,129,.15); color:#34d399; }
.at-st-rejected  { background:rgba(239,68,68,.15);  color:#f87171; }
.at-st-cancelled { background:rgba(255,255,255,.06); color:#94a3b8; }
.at-mini { padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }

.at-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted); margin-bottom:9px; }
.at-meta span { display:inline-flex; align-items:center; gap:5px; }
.at-kind { background:rgba(255,255,255,.06); padding:2px 9px; border-radius:20px; font-size:11.5px; }
.at-weighted { color:#fbbf24; font-weight:700; }
.at-reason { font-size:13px; color:#cbd5e1; line-height:1.6; }
.at-reject {
    margin-top:10px; padding:9px 12px; border-radius:8px; font-size:12.5px;
    background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#fca5a5;
}
.at-approver { margin-top:8px; font-size:11.5px; color:#64748b; display:flex; align-items:center; gap:5px; }

/* Danh sách từng ngày nghỉ trong đơn nghỉ phép — mỗi dòng dùng đúng kiểu .at-meta
   để đồng bộ với dòng tóm tắt của Đi trễ/Về sớm/Tăng ca, không phải bảng cột riêng */
.at-lv-list {
    margin-top:10px; background:rgba(0,0,0,.18); border-radius:8px; padding:8px 11px;
    display:flex; flex-direction:column; gap:6px;
}
.at-lv-list .at-meta { margin-bottom:0; }

/* Bảng bóc hệ số tăng ca */
.at-bd { margin-top:10px; background:rgba(0,0,0,.18); border-radius:8px; padding:8px 11px; }
.at-bd-row, .at-pv-row {
    display:grid; grid-template-columns:1fr auto auto 1.2fr; gap:10px;
    font-size:11.5px; color:#94a3b8; padding:3px 0; align-items:center;
}
.at-bd-row b, .at-pv-row b { color:#fbbf24; text-align:right; }
.at-bd-row em, .at-pv-row em { font-style:normal; color:#64748b; font-size:11px; }

/* ── Nút ───────────────────────────────────────────────────────*/
.at-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.at-btn {
    padding:8px 15px; border-radius:8px; border:1px solid transparent; cursor:pointer;
    font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px;
    transition:background .15s;
}
.at-btn.sm { padding:6px 11px; font-size:11.5px; }
.at-btn.ok    { background:rgba(16,185,129,.15); border-color:rgba(16,185,129,.35); color:#34d399; }
.at-btn.ok:hover { background:rgba(16,185,129,.26); }
.at-btn.no    { background:rgba(239,68,68,.13); border-color:rgba(239,68,68,.35); color:#f87171; }
.at-btn.no:hover { background:rgba(239,68,68,.24); }
.at-btn.ghost { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#94a3b8; }
.at-btn.ghost:hover { background:rgba(255,255,255,.1); }
.at-btn:disabled { opacity:.55; cursor:default; }
.at-x {
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    font-size:16px; padding:4px; line-height:1;
}
.at-x:hover { color:#f87171; }

/* ── Lịch ──────────────────────────────────────────────────────*/
.at-cal-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.at-cal-head .at-btn { margin-left:auto; }
.at-cal-warn {
    display:flex; gap:8px; align-items:flex-start; margin-bottom:14px; padding:10px 13px;
    border-radius:9px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.28);
    color:#fcd34d; font-size:12.5px; line-height:1.6;
}
.at-cal-warn b { color:#fde68a; }

/* Thẻ thống kê tháng */
.at-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:14px; }
.at-stat {
    display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:11px;
    background:color-mix(in srgb, var(--c) 8%, rgba(255,255,255,.02));
    border:1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.at-stat > i { font-size:22px; color:var(--c); }
.at-stat b { font-size:19px; font-weight:800; color:#f1f5f9; line-height:1; }
.at-stat span { font-size:11.5px; color:var(--text-muted); margin-left:3px; }
.at-stat em { display:block; font-style:normal; font-size:11.5px; color:var(--text-muted); margin-top:4px; }

.at-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--text-muted); margin-bottom:10px; }
.at-legend span { display:inline-flex; align-items:center; gap:5px; }
.at-lg-dim { opacity:.6; font-style:italic; }
.at-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.at-head {
    text-align:center; padding:8px 4px; font-size:10px; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;
}
.at-cell {
    min-height:96px; padding:7px; border-radius:9px; overflow-y:auto; max-height:180px;
    background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05);
    transition:border-color .15s, background .15s;
}
.at-cell:not(.empty):hover { border-color:rgba(99,102,241,.35); background:rgba(99,102,241,.045); }
.at-cell.empty { background:transparent; border-color:transparent; }
.at-cell.today { border-color:rgba(99,102,241,.55); background:rgba(99,102,241,.08); box-shadow:0 0 0 1px rgba(99,102,241,.25) inset; }
.at-cell.sun   { background:rgba(255,255,255,.04); }
.at-cell.holi  { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.2); }
.at-daynum { font-size:12px; font-weight:800; color:#94a3b8; display:block; margin-bottom:5px; }
.at-cell.today .at-daynum { color:#a5b4fc; }
.at-holi-tag {
    display:inline-block; font-size:9px; font-weight:700; color:#f87171;
    background:rgba(239,68,68,.15); padding:1px 6px; border-radius:20px; margin-bottom:3px;
}
.at-chip {
    display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
    color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent);
    border-radius:5px; padding:3px 6px; margin-bottom:3px;
}
.at-chip.dim { opacity:.45; }

/* ── Bảng tổng hợp ─────────────────────────────────────────────*/
.at-sum-note {
    display:flex; gap:8px; align-items:flex-start; padding:10px 14px; border-radius:9px;
    background:rgba(56,189,248,.07); border:1px solid rgba(56,189,248,.18);
    color:#93c5fd; font-size:12.5px; line-height:1.6; margin-bottom:14px;
}
.at-table-wrap { overflow-x:auto; margin-bottom:14px; }
.at-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.at-table th {
    background:#101a2e; text-align:left; padding:9px 11px; font-size:11px; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px;
    border-bottom:1px solid rgba(255,255,255,.08); white-space:nowrap;
}
.at-table th.r, .at-table td.r { text-align:right; }
.at-table td { padding:9px 11px; color:#cbd5e1; border-bottom:1px solid rgba(255,255,255,.04); white-space:nowrap; }
.at-table tbody tr:hover td { background:rgba(99,102,241,.05); }
.at-table tfoot td { padding:10px 11px; border-top:2px solid rgba(255,255,255,.1); color:#e2e8f0; }
.at-table .dim { color:#64748b; }
.at-hl { color:#fbbf24; font-size:13.5px; }

/* ── Cấu hình ──────────────────────────────────────────────────*/
.at-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; }
.at-panel {
    background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07);
    border-radius:12px; padding:15px 17px;
}
.at-panel-head {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:13.5px; font-weight:700; color:var(--text-main); margin-bottom:13px;
}
.at-panel-head i { color:#818cf8; font-size:16px; }
.at-panel-note { font-size:11px; font-weight:400; color:#64748b; }
.at-holi-add { display:flex; gap:7px; margin-bottom:12px; }
.at-holi-add .at-input { flex:1; }
.at-holi-list { display:flex; flex-direction:column; gap:5px; max-height:290px; overflow-y:auto; }
.at-holi-item {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:rgba(255,255,255,.03); border-radius:7px; padding:7px 11px; font-size:12.5px; color:#cbd5e1;
}
.at-cfg-list { display:flex; flex-direction:column; gap:8px; }
.at-cfg-row { display:grid; grid-template-columns:1fr auto 74px auto; gap:8px; align-items:center; }
.at-cfg-name { font-size:12.5px; color:#cbd5e1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.at-rules { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; }
.at-rules > div {
    font-size:12.5px; color:#cbd5e1; background:rgba(255,255,255,.03);
    border-radius:7px; padding:8px 12px;
}
.at-rules b { color:#fbbf24; margin-right:7px; font-size:13.5px; }
.at-rule-none b { color:#64748b; }

/* ── Form ──────────────────────────────────────────────────────*/
.at-input {
    width:100%; padding:9px 12px; border-radius:8px; font-size:13px; font-family:inherit;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#e2e8f0;
}
.at-input.sm { padding:6px 9px; font-size:12px; }
.at-input:focus { outline:none; border-color:#6366f1; }
.at-input:disabled { opacity:.5; }
textarea.at-input { resize:vertical; }
/* Icon lịch mặc định của input[type=date] luôn màu đen, chìm trên nền tối của app → đảo màu cho sáng lên */
.at-input[type="date"]::-webkit-calendar-picker-indicator {
    filter:invert(1) brightness(1.5); cursor:pointer; opacity:.8;
}
.at-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity:1; }
.at-select {
    padding:8px 12px; border-radius:8px; font-size:13px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#e2e8f0;
}
/* Danh sách option của select native luôn dùng nền riêng (không kế thừa nền trong suốt của .at-input/.at-select)
   → phải khai báo màu rõ ràng, nếu không trình duyệt mặc định nền trắng + chữ sáng => không đọc được. */
.at-input option, .at-select option { background:#0d1b2e; color:#e2e8f0; }
.at-select.sm { padding:6px 9px; font-size:12px; }
.at-lb { display:block; font-size:12px; color:var(--text-muted); margin:16px 0 8px; font-weight:600; }
.at-req { color:#f87171; }
.at-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.at-row + .at-row { margin-top:14px; }
.at-fields { display:none; }
.at-add-day-btn { margin:10px 0 4px; }

/* Đi trễ / Về sớm — gộp Ngày + Từ giờ + Đến giờ trên cùng 1 hàng cho gọn */
.at-tm-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.at-tm-field .at-lb { margin-top:0; }
.at-tm-date-field { flex:1; min-width:130px; }
.at-tm-arrow { color:var(--text-muted); font-size:13px; padding-bottom:9px; }

.at-type-pick { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:4px; }
.at-tp {
    padding:11px 7px; border-radius:9px; cursor:pointer; font-size:12px; font-weight:700;
    background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.09);
    color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:5px;
    transition:all .15s;
}
.at-tp i { font-size:18px; }
.at-tp:hover  { border-color:var(--c); color:var(--c); }
.at-tp.active { border-color:var(--c); color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); }

/* Danh sách ngày nghỉ rời rạc — mỗi ngày chỉ chọn buổi (Cả ngày/Sáng/Chiều/Tối), không nhập giờ */
#at-lv-days { display:flex; flex-direction:column; gap:8px; }
.at-lv-day-row {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
    border-radius:9px; padding:8px 10px;
}
.at-lv-day-row .at-lv-date { width:132px; flex:none; }
.at-lv-seg { display:flex; gap:5px; flex-wrap:wrap; margin-left:auto; }
.at-seg-btn {
    padding:7px 13px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:var(--text-muted);
    transition:all .15s;
}
.at-seg-btn:hover { border-color:#6366f1; color:#a5b4fc; }
.at-seg-btn.active { background:rgba(99,102,241,.18); border-color:#6366f1; color:#a5b4fc; }

/* Ô chọn giờ tự viết (Giờ:Phút dạng 24h) — dùng cho Đi trễ/Về sớm/Tăng ca, cần giờ chính xác */
.at-time-pick { display:inline-flex; align-items:center; gap:3px; }
.at-time-pick .at-input { width:52px; flex:none; padding:6px 4px; text-align:center; }
.at-time-sep { color:var(--text-muted); font-size:12px; }
/* input[type=number] gõ tay giờ/phút — bỏ nút tăng/giảm mặc định của trình duyệt (chiếm chỗ,
   không cần thiết vì mục tiêu chính là gõ tay nhanh), giữ lại con trỏ số bình thường */
.at-time-pick input[type="number"]::-webkit-outer-spin-button,
.at-time-pick input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.at-time-pick input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
.at-dt-combo { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.at-dt-combo input[type="date"] { flex:1; min-width:118px; }
.at-pv-warn-inline { color:#fbbf24; font-size:11px; font-weight:600; text-align:right; }

/* Xem trước tăng ca */
.at-preview { margin:14px 0; }
.at-pv { background:rgba(0,0,0,.2); border-radius:9px; padding:11px 13px; }
.at-pv-top {
    display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted);
    padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.07);
}
.at-pv-top b { color:#e2e8f0; }
.at-pv-hl b { color:#fbbf24; font-size:14px; }
.at-pv-note { font-size:11px; color:#64748b; margin-top:6px; font-style:italic; }
.at-pv-warn {
    display:flex; gap:7px; align-items:flex-start; margin-top:8px; padding:8px 11px;
    border-radius:7px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25);
    color:#fcd34d; font-size:12px; line-height:1.55;
}
.at-pv-load { font-size:12.5px; color:var(--text-muted); }

/* ── Modal ─────────────────────────────────────────────────────*/
.at-modal { display:none; }
.at-modal.open { display:block; }
.at-modal-bg { position:fixed; inset:0; background:rgba(3,7,18,.72); z-index:9000; }
.at-modal-box {
    position:fixed; z-index:9001; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(680px,94vw); max-height:90vh; display:flex; flex-direction:column;
    background:#0d1b2e; border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden;
}
/* Form Tạo/Sửa đơn: chiều cao CỐ ĐỊNH — 4 loại đơn (Nghỉ phép/Đi trễ/Về sớm/Tăng ca) dùng
   chung 1 khung, tránh popup nhảy kích thước khi đổi tab. Nội dung dài hơn thì tự cuộn bên trong. */
.at-form-box { height:min(600px,88vh); }
.at-modal-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:15px 20px; border-bottom:1px solid rgba(255,255,255,.08);
}
.at-modal-head h3 { margin:0; font-size:15.5px; color:var(--text-main); display:flex; align-items:center; gap:8px; }
.at-modal-body { padding:20px 24px; overflow-y:auto; flex:1; }
.at-modal-foot {
    display:flex; justify-content:flex-end; gap:9px;
    padding:13px 20px; border-top:1px solid rgba(255,255,255,.08);
}

.at-edit-type {
    display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--c);
    background:color-mix(in srgb, var(--c) 14%, transparent); border:1px solid color-mix(in srgb, var(--c) 35%, transparent);
    border-radius:9px; padding:9px 13px; margin-bottom:14px;
}
.at-edit-note { margin-left:auto; font-size:11px; font-weight:500; color:#64748b; }

.at-confirm-box { width:min(420px,92vw); }
.at-confirm-box .at-modal-head h3 { color:#f1f5f9; }
.at-confirm-box .at-modal-head.danger h3 i { color:#f87171; }
.at-confirm-box .at-modal-head.warn h3 i { color:#fbbf24; }
.at-confirm-msg { margin:0 0 4px; font-size:13.5px; line-height:1.6; color:var(--text-muted); white-space:pre-line; }
.at-confirm-box textarea.at-input { margin-top:10px; }
.at-input.err { border-color:#ef4444 !important; }

/* ── Trạng thái ────────────────────────────────────────────────*/
.at-loading, .at-empty {
    padding:44px 20px; text-align:center; color:var(--text-muted); font-size:13.5px;
}
.at-empty i { font-size:34px; display:block; margin-bottom:10px; opacity:.5; }
.at-empty-sm { font-size:12.5px; color:#64748b; padding:14px 0; text-align:center; }
.at-error {
    display:flex; gap:15px; align-items:flex-start; padding:24px; border-radius:12px;
    background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.2);
}
.at-error > i { font-size:28px; color:#f87171; }
.at-error strong { color:#fca5a5; display:block; margin-bottom:5px; }
.at-error p { color:var(--text-muted); font-size:13px; margin:0 0 11px; }
.at-spin { animation:at-rot .9s linear infinite; display:inline-block; }
@keyframes at-rot { to { transform:rotate(360deg); } }

.at-toast {
    position:fixed; bottom:26px; right:26px; z-index:9999; max-width:410px;
    padding:13px 19px; border-radius:10px; font-size:13px; font-weight:600; line-height:1.5;
    display:flex; align-items:center; gap:9px;
    opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .25s,transform .25s;
}
.at-toast.show { opacity:1; transform:translateY(0); }
.at-toast.ok   { background:rgba(16,185,129,.16); border:1px solid rgba(16,185,129,.4); color:#6ee7b7; }
.at-toast.warn { background:rgba(245,158,11,.16); border:1px solid rgba(245,158,11,.4); color:#fcd34d; }
.at-toast.err  { background:rgba(239,68,68,.16);  border:1px solid rgba(239,68,68,.4);  color:#fca5a5; }

/* ── Responsive ────────────────────────────────────────────────*/
@media (max-width:900px) {
    .at-hint { display:none; }
    .at-cfg-row { grid-template-columns:1fr auto; grid-auto-rows:auto; }
}
@media (max-width:640px) {
    .at-toolbar { flex-direction:column; align-items:stretch; }
    .at-month { justify-content:space-between; }
    .at-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
    .at-tab { white-space:nowrap; padding:10px 13px; font-size:12.5px; }
    .at-row { grid-template-columns:1fr; }
    .at-type-pick { grid-template-columns:repeat(2,1fr); }
    .at-cell { min-height:64px; padding:4px 3px; }
    .at-chip { font-size:9px; padding:2px 4px; }
    .at-bd-row, .at-pv-row { grid-template-columns:1fr auto; }
    .at-bd-row em, .at-pv-row em { display:none; }
    .at-quick { gap:10px; font-size:11.5px; }
    .at-toast { left:14px; right:14px; bottom:14px; max-width:none; }
    .at-modal-box { width:96vw; max-height:94vh; }
}