/* ===================================================================
   Giao diện chung — sidebar tối, vùng nội dung sáng.
   Sửa màu: đổi các biến trong :root là toàn hệ thống đổi theo.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/*
  Bảng màu. NỀN TỐI LÀ MẶC ĐỊNH — công ty chạy hai ca kín ngày đêm, phần lớn
  người ngồi trước màn hình nhiều giờ liền, nền trắng chói mắt hơn hẳn.

  Cách chọn nền:  không chọn gì   → nền tối
                  bấm nút chọn tay → data-theme="light" | "dark" trên thẻ <html>

  KHÔNG còn đi theo cài đặt của máy (@media prefers-color-scheme): máy công ty
  hầu hết để nền sáng theo mặc định của Windows, đi theo nó thì chẳng ai thấy
  nền tối bao giờ.

  Nền sáng chỉ đổi lại đúng mấy biến này nên không phải viết lại kiểu cho từng
  thành phần.
*/
:root {
  --ink:      #e2e8f0;
  --ink-2:    #94a3b8;
  --ink-3:    #64748b;
  --line:     #26334a;
  --line-2:   #1c283d;
  --bg:       #0b1220;
  --card:     #131c2e;
  --side:     #080e19;
  --side-2:   #16203300;
  --side-line: #1e293b;
  --side-ink: #e2e8f0;
  --side-ink-2: #94a3b8;
  --green:    #10b981;
  --green-d:  #34d399;
  --green-bg: #06281f;
  --red:      #fb7185;
  --red-bg:   #2d1119;
  --amber:    #fbbf24;
  --amber-bg: #2a2008;
  --sky-bg:   #0d2233;
  --shadow:   0 1px 2px rgb(0 0 0 / .4);
  --r:        14px;
  --side-w:   248px;

  /* Vàng thương hiệu, lấy từ logo — dùng cho màn hình đăng nhập. */
  --gold:     #f5c542;
  --gold-2:   #ffe08a;
  --gold-d:   #c9992b;
}

:root[data-theme="light"] {
  --ink:      #0f172a;
  --ink-2:    #475569;
  --ink-3:    #94a3b8;
  --line:     #e2e8f0;
  --line-2:   #f1f5f9;
  --bg:       #f1f5f9;
  --card:     #ffffff;
  --side:     #0f172a;
  /* Phải ghi lại: mặc định giờ là nền tối, ở đó --side-2 để trong suốt. */
  --side-2:   #1e293b;
  --side-line: #1e293b;
  --green:    #059669;
  --green-d:  #047857;
  --green-bg: #ecfdf5;
  --red:      #e11d48;
  --red-bg:   #fff1f2;
  --amber:    #d97706;
  --amber-bg: #fffbeb;
  --sky-bg:   #f0f9ff;
  --shadow:   0 1px 2px rgb(15 23 42 / .06);
}

:root[data-theme="dark"] {
  --ink:      #e2e8f0;
  --ink-2:    #94a3b8;
  --ink-3:    #64748b;
  --line:     #26334a;
  --line-2:   #1c283d;
  --bg:       #0b1220;
  --card:     #131c2e;
  --side:     #080e19;
  --side-line: #1e293b;
  --green:    #10b981;
  --green-d:  #34d399;
  --green-bg: #06281f;
  --red:      #fb7185;
  --red-bg:   #2d1119;
  --amber:    #fbbf24;
  --amber-bg: #2a2008;
  --sky-bg:   #0d2233;
  --shadow:   0 1px 2px rgb(0 0 0 / .4);
}

/* Ô nhập của trình duyệt (lịch, mũi tên số…) vẽ theo đúng nền đang dùng. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1 { font-size: 22px; margin: 0; line-height: 1.25; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
code { background: var(--line-2); padding: 1px 5px; border-radius: 5px; font-size: .9em; }

/* ===== Tiện ích ===== */
.muted   { color: var(--ink-2); }
.small   { font-size: 13.5px; }
.tiny    { font-size: 12px; }
.bold    { font-weight: 600; }
.center  { text-align: center; }
.right   { text-align: right; }
.nowrap  { white-space: nowrap; }
.mono    { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.grow    { flex: 1; min-width: 0; }
.link    { color: var(--green-d); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.t-red   { color: var(--red); }
.t-green { color: var(--green); }
.t-amber { color: var(--amber); }

.row   { display: flex; gap: 10px; align-items: center; }
.row.wrap  { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.baseline { align-items: baseline; }
.row.end { justify-content: flex-end; flex-wrap: wrap; }
.row.end-align { align-items: flex-end; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grid4 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) {
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ===== Khung có sidebar ===== */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w);
  background: var(--side); color: #cbd5e1;
  display: flex; flex-direction: column; z-index: 30;
}
/*
  Đầu thanh bên: logo NẰM TRÊN, tên phần mềm nằm dưới, cả hai canh giữa.
  Xếp ngang thì logo phải thu nhỏ lại mới đủ chỗ cho chữ, nhìn bé tí; xếp dọc
  thì logo được cả bề ngang thanh bên nên rõ hẳn.
*/
.brand {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px 16px 15px; color: #fff; font-weight: 700; text-align: center;
  border-bottom: 1px solid #1e293b;
}
/*
  Logo: có thể là chữ tượng hình (span) hoặc tệp ảnh (img) — xem brandLogo().
  Ảnh logo thường là hình ngang có nền trong suốt, nên khoá theo CHIỀU CAO rồi
  để chiều ngang tự co; khoá theo chiều ngang là logo vuông bị kéo bẹp.
*/
.brand-logo { font-size: 34px; line-height: 1; }
img.brand-logo { height: 46px; width: auto; max-width: 100%; object-fit: contain; }
.brand-text { font-size: 15px; line-height: 1.3; }

.nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 500;
}
.nav-item:hover { background: var(--side-2); color: #fff; }
.nav-item.on { background: #223049; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--green); }
.nav-ico { font-size: 16px; width: 20px; text-align: center; }

.side-foot { padding: 14px; border-top: 1px solid #1e293b; display: flex; flex-direction: column; gap: 10px; }
/* Chân thanh bên: người đang dùng — đổi mật khẩu — đăng xuất, ba khối tách bạch. */
.whoami { padding: 9px 11px; border-radius: 10px; background: #1e293b; }
.whoami-name { display: block; font-size: 14px; font-weight: 600; color: #e2e8f0; }
.whoami-role { display: block; font-size: 12px; color: #94a3b8; margin-top: 2px; }

.side-foot .whoami-pw { text-decoration: none; color: #7dd3fc; border-color: #1e3a5f; }
.side-foot .whoami-pw:hover { background: #1e293b; color: #bae6fd; }
.side-foot .whoami-pw.on { background: #223049; border-color: #334155; color: #bae6fd; font-weight: 700; }
.side-foot .btn-signout { color: #fca5a5; }
.side-foot .btn-signout:hover { background: #3f1d2b; color: #fecdd3; }

.main { margin-left: var(--side-w); padding: 22px 24px 60px; display: flex; flex-direction: column; gap: 18px; }
.page-head { display: flex; flex-direction: column; gap: 4px; }

.burger { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  .main { margin-left: 0; padding: 60px 14px 50px; }
  .burger {
    display: block; position: fixed; top: 10px; left: 10px; z-index: 40;
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--side); color: #fff; border: 0; font-size: 19px; cursor: pointer;
  }
  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgb(15 23 42 / .45); z-index: 25;
  }
}

/* ===== Thẻ ===== */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 1px 2px rgb(15 23 42 / .05);
}
.card-p  { padding: 18px; }
.card-hd { padding: 14px 18px; border-bottom: 1px solid var(--line-2); background: var(--line-2);
           border-radius: var(--r) var(--r) 0 0; }
.creds   { background: var(--amber-bg); border-color: var(--amber); }
.creds .pw { font: 700 18px/1 ui-monospace, Consolas, monospace; letter-spacing: 2px; }

/* ===== Nút ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s, transform .05s; white-space: nowrap;
}
.btn:active   { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary  { background: var(--green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--green-d); }
.btn-dark     { background: var(--side); color: #fff; }
.btn-dark:hover:not(:disabled) { background: var(--side-2); }
.btn-ghost    { background: var(--card); color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--line-2); }
.btn-danger   { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #be123c; }
.btn-sm       { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn-lg       { padding: 15px; font-size: 17px; }
.btn-block    { width: 100%; }
.btn-col      { flex-direction: column; gap: 2px; padding: 13px; }
.btn-col .b1  { font-size: 16px; }
.btn-col .b2  { font-size: 12px; font-weight: 400; opacity: .82; }
.side-foot .btn-ghost { background: transparent; border-color: #334155; color: #cbd5e1; }
.side-foot .btn-ghost:hover { background: var(--side-2); color: #fff; }

/* ===== Biểu mẫu ===== */
.label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field {
  width: 100%; padding: 10px 13px; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: inherit;
}
.field:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.field-sm { padding: 7px 10px; font-size: 13.5px; width: auto; }
textarea.field { resize: vertical; }
select.field { cursor: pointer; }
.form-group { margin-bottom: 14px; text-align: left; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--green); }

/* ===== Nhãn trạng thái ===== */
.badge {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.b-green { background: var(--green-bg); color: var(--green-d); }
.b-amber { background: var(--amber-bg); color: var(--amber); }
.b-red   { background: var(--red-bg); color: var(--red); }
.b-gray  { background: var(--line); color: var(--ink-2); }
.b-slate { background: var(--sky-bg); color: var(--ink); }

/* ===== Thông báo ===== */
.flash:empty { display: none; }
.alert { padding: 12px 15px; border-radius: 11px; font-weight: 500; font-size: 14.5px; }
.alert-ok   { background: var(--green-bg); color: var(--green-d); }
.alert-err  { background: var(--red-bg);   color: var(--red); }
.alert-info { background: var(--sky-bg);   color: var(--ink); }
/* Ngày giao ca — màu hổ phách để nổi hẳn, hôm đó lịch làm khác mọi ngày. */
.alert-rot  { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber); }

/* ===== Bảng ===== */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; font-size: 13.5px; }
.tbl th {
  padding: 10px 12px; text-align: left; font-weight: 600; color: var(--ink-2);
  background: var(--line-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--line-2); }
.tbl .empty { padding: 36px 12px; text-align: center; color: var(--ink-3); }
.tbl .center { text-align: center; }
/*
  Phải viết riêng cho trong bảng: ".tbl th { text-align: left }" nặng ký hơn
  ".right" nên tiêu đề cột Thao tác vẫn dạt trái trong khi các nút bên dưới đã
  dạt phải — nhìn lệch hẳn một cột.
*/
.tbl .right { text-align: right; }
/* Cột số thứ tự: hẹp nhất có thể, chữ nhạt để không tranh chỗ với tên người. */
.tbl .col-num { width: 1%; white-space: nowrap; text-align: right; padding-right: 4px; }
/* Dòng của người ĐANG ở ngoài — tô nhẹ để liếc một cái là thấy ai chưa về. */
.tbl .row-out { background: var(--amber-bg); }
.tbl-count { padding: 10px 12px 0; font-size: 12.5px; color: var(--ink-3); }

/*
  Sửa tại chỗ trên bảng: ô nào bấm được thì gạch chân chấm, rê chuột vào mới rõ —
  đủ để biết bấm được mà không làm bảng rối như một rừng nút.
*/
.ed { cursor: text; border-bottom: 1px dashed transparent; display: inline-block; }
.ed:hover { border-bottom-color: var(--ink-3); }
.ed-box { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.ed-ask { font-size: 12px; color: var(--ink-2); }

/* Danh sách dòng nhập hàng loạt bị bỏ qua — để nguyên chữ người dùng dán vào. */
.skiplist { display: flex; flex-direction: column; gap: 6px; }
.skiplist li {
  padding: 9px 11px; border-radius: 9px; font-size: 13px; line-height: 1.5;
  font-family: ui-monospace, Consolas, monospace;
  background: var(--red-bg); color: var(--red); border: 1px solid var(--red);
  overflow-wrap: anywhere;
}

/* ===== Ô số liệu ===== */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; }
.kpi .k { font-size: 12.5px; color: var(--ink-2); }
.kpi .v { font-size: 25px; font-weight: 800; line-height: 1.2; }

.big-num { font-size: 30px; font-weight: 800; }
.big-sm  { font-size: 17px; font-weight: 700; }

.mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-top: 12px; }
.mini3.four { grid-template-columns: repeat(4, 1fr); }
.mini { background: var(--line-2); border-radius: 9px; padding: 8px 4px; }
.mini .k { font-size: 11.5px; color: var(--ink-2); }
.mini .v { font-size: 16px; font-weight: 700; }

/*
  Lưới ô đều nhau. Dùng auto-fit chứ không cố định hai cột: hàng hai ô thì chia
  đôi, hàng ba nút thì chia ba, sau khi tan ca có bốn ô thì chia bốn — hàng nào
  cũng cân, không phải đếm tay.
*/
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cell { background: var(--line-2); border-radius: 9px; padding: 8px 12px; }
.cell .k { font-size: 11.5px; color: var(--ink-2); }
.cell .v { font-weight: 600; }

/* ===== Nhãn chọn ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--green); border-color: var(--green); color: #fff; }

.pill {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-2);
}
.pill:hover { border-color: var(--side); }
.pill.on { background: var(--side); border-color: var(--side); color: #fff; }
.pill-n { opacity: .65; font-weight: 400; }

/*
  Thẻ gấp lại được: bấm dòng tiêu đề là trượt ra. Dùng cho phần dựng nhóm / bộ
  phận và phần thêm người — làm một lần rồi thôi, để mở suốt chỉ tổ đẩy bảng
  chính xuống dưới màn hình.
  Dấu ▸/▾ tự vẽ; ẩn dấu mặc định của trình duyệt để hai bản Chrome/Safari giống nhau.
  Chỉ nhắm summary CON TRỰC TIẾP, để <details> lồng bên trong giữ kiểu riêng.
*/
.fold > summary {
  cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--ink);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '▸'; color: var(--ink-3); font-size: 12px; }
.fold[open] > summary::before { content: '▾'; }
.fold > summary:hover { color: var(--green); }

/* Hai phần trong cùng một thẻ: nhãn nhỏ + đường kẻ ngăn. */
.sec-label { font-size: 13px; letter-spacing: .02em; color: var(--ink-2); }
.sec-line { border: 0; border-top: 1px solid var(--line); margin: 4px 0 0; }

/*
  Hai phần đứng cạnh nhau trong cùng một thẻ (Lịch sử ra ngoài · Ai đang ra
  ngoài). Màn hình hẹp thì tự xuống hàng; còn một phần thì nó chiếm hết bề ngang.
*/
.sec-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 22px;
  align-items: start;
}
.sec-2 > div { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Viên tròn kèm nút xoá — nút phải nằm NGOÀI thẻ <a>, lồng vào là HTML sai. */
.pillwrap { display: inline-flex; align-items: center; gap: 3px; }
.pill-x {
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font: 600 17px/1 inherit; padding: 4px 7px; border-radius: 8px;
}
.pill-x:hover { color: var(--red); background: var(--red-bg); }

.segs { display: flex; gap: 8px; }
.seg {
  flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); text-align: center; font-size: 13px; font-weight: 600; cursor: pointer;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg:has(input:checked) { background: var(--side); border-color: var(--side); color: #fff; }

/* ===== Băng thông báo & đồng hồ ===== */
.banner { border-radius: 12px; padding: 13px; text-align: center; }
.banner .cap { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; font-weight: 700; }
.banner .big { font-size: 21px; font-weight: 800; }
.banner-green { background: var(--green-bg); color: var(--green-d); }
.banner-red   { background: var(--red-bg);   color: var(--red); }

.timer { border-radius: 12px; padding: 15px; text-align: center; background: var(--amber-bg); color: var(--amber); }
/* Ô Được/Không bấm được ở trang Phân quyền. */
.badge-btn { cursor: pointer; border: 1px solid transparent; font: inherit; font-size: 12px; }
.badge-btn:hover { border-color: currentColor; }

/*
  NÚT GẠT BẬT / TẮT — dùng chung cho cả trang web.

  Vì sao không dùng chữ "Có / Không" nữa: nhìn hai chữ đó phải đọc mới biết đang
  bật hay tắt, mà bấm xong chữ đổi thì lại tưởng mình bấm nhầm. Nút gạt thì liếc
  một cái là thấy — xanh và cần gạt nằm bên phải là bật, xám và nằm bên trái là tắt.

  Dùng thẻ <button role="switch" aria-checked="true|false"> chứ không dùng ô tick:
  đọc màn hình đọc đúng "đang bật / đang tắt", bấm phím Space cũng chạy.
  Trạng thái vẽ theo aria-checked nên chỉ có MỘT nguồn sự thật, không lệch được.
*/
.sw {
  --sw-h: 26px;
  --sw-w: 48px;
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--sw-w);
  height: var(--sw-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  vertical-align: middle;
  transition: background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.sw::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--sw-h) - 6px);
  height: calc(var(--sw-h) - 6px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / .35);
  transition: transform .18s ease;
}
.sw[aria-checked="true"] { background: var(--green); }
.sw[aria-checked="true"]::after { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }
.sw:hover:not(:disabled) { filter: brightness(1.08); }
.sw:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Ô không được phép đổi (cột Quản trị) — vẫn thấy rõ là đang bật, chỉ không bấm được. */
.sw:disabled { cursor: default; opacity: .5; }

.sw-sm { --sw-h: 22px; --sw-w: 40px; }

/* Nút gạt kèm chữ. Chữ đổi theo trạng thái nên đọc cũng hiểu, không chỉ nhìn màu. */
.swrow { display: inline-flex; align-items: center; gap: 9px; }
.swrow .sw-txt { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.swrow .sw-txt.on { color: var(--green); font-weight: 600; }

/* Chấm nhỏ báo ô này đang KHÁC mặc định — thay cho dòng chữ "đã đổi" lằng nhằng. */
.sw-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: middle;
}

/* Bảng công: dòng của người nghỉ làm nhạt đi để mắt bắt ngay ai vắng. */
.row-off { background: var(--red-bg); }

/* Diễn giải từng khoản trừ — mỗi dòng một việc, đọc là hiểu mất mấy điểm. */
.notes { display: flex; flex-direction: column; gap: 6px; }
.notes li {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45;
  border: 1px solid var(--line);
}
.notes .ico { flex: none; line-height: 1.45; }
.notes .n-ok   { background: var(--green-bg); border-color: var(--green); color: var(--green-d); }
.notes .n-warn { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.notes .n-bad  { background: var(--red-bg);   border-color: var(--red); color: var(--red); }

.note-sum {
  margin-top: 10px; padding: 11px 13px; border-radius: 10px;
  text-align: center; font-weight: 700;
}
.note-sum.ok  { background: var(--green-bg); color: var(--green-d); }
.note-sum.bad { background: var(--red);      color: #fff; }

.cell .kpi { margin-top: 3px; font-size: 12px; font-weight: 700; }

/* "3/12" — phần mẫu số nhỏ và nhạt hơn để mắt bắt ngay con số chính. */
.kpi .of { font-size: .55em; font-weight: 600; color: var(--ink-2); }

/* Hộp nhỏ giữa màn (cấp tài khoản…). Dùng <dialog> nên không cần thư viện. */
.dlg { border: 0; background: transparent; padding: 0; color: inherit; }
.dlg::backdrop { background: rgb(15 23 42 / .55); }
.dlg .card { margin: 0; }

/* Nút tròn đổi nền — bấm một cái là lật sáng ↔ tối. */
.themebtn {
  align-self: flex-start;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1e293b; border: 1px solid #334155; color: #e2e8f0;
  font-size: 17px; cursor: pointer; line-height: 1;
}
.themebtn:hover { background: #334155; }

/*
  Màn hình chấm công.
  Có hai thẻ (nút bấm + diễn biến ca) thì màn rộng chia hai cột cho kín bề ngang.
  Chỉ có một thẻ thì KHÔNG chia đôi — nếu không sẽ thừa hẳn một nửa màn trống bên
  phải, nhìn lệch hẳn. Lúc đó thẻ được nới rộng và đưa vào giữa.
*/
.cc-grid {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .cc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .cc-wide { grid-column: 1 / -1; }
}
/*
  Giờ chỉ còn MỘT thẻ nên dùng hết bề ngang, không chia đôi màn hình nữa.
  (Lớp "one" giữ lại vì mã cũ và bộ kiểm thử còn nhắc tới.)
*/
.cc-grid.one { width: 100%; grid-template-columns: 1fr; }

/*
  Màn hình nhân viên để CHỮ TO HẲN — người ta liếc từ xa rồi bấm vội, không ngồi
  soi như quản lý. Trước đây chỉ khối "chưa điểm danh" (.one) mới to, vào ca rồi
  là chữ tụt xuống bé lại; giờ áp cho cả trang.
*/
.cc-grid .card-p { padding: 22px; }
.cc-grid .banner { padding: 22px; }
.cc-grid .banner .big { font-size: 36px; }
.cc-grid .btn-lg { padding: 20px; font-size: 17px; }
.cc-grid .card-hd { padding: 16px 22px; }

.cc-grid .cells { gap: 14px; }
.cc-grid .cell { padding: 14px 16px; border-radius: 12px; }
.cc-grid .cell .k { font-size: 13px; }
.cc-grid .cell .v { font-size: 22px; }
.cc-grid .cell .kpi { margin-top: 6px; font-size: 15px; }

.cc-grid .timer { padding: 22px; }
.cc-grid .notes li { padding: 13px 15px; font-size: 15px; }
.cc-grid .note-sum { padding: 15px; font-size: 17px; }

/* Nút bấm chính to hơn cho dễ bấm trên điện thoại. */
.cc-grid .btn-lg { padding: 16px; font-size: 16px; }
.cc-grid .btn-col { padding: 15px 12px; }

/*
  Trang chỉ có một cột (đổi mật khẩu, đăng nhập nội bộ…): luôn nằm giữa và rộng
  vừa mắt. Dùng width thay vì max-width để không bị media query khác đè.
*/
.col-narrow {
  width: min(100%, 680px); margin-inline: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.col-narrow .card-p { padding: 22px; }
.col-narrow .page-head { text-align: center; }

/* Lịch sử: mỗi ca một thẻ, màn rộng thì xếp 2–3 thẻ một hàng cho đỡ trống. */
/*
  Lưới các ca trong tháng.
  auto-FIT chứ không auto-fill: auto-fill vẫn chừa sẵn cột trống, nên tháng chỉ có
  một ca thì thẻ đó co lại bằng 1/3 màn hình còn hai phần kia bỏ không. auto-fit
  dẹp cột trống đi, một thẻ là giãn hết bề ngang — bằng đúng thẻ tổng kết ở trên.
  Bề rộng tối thiểu để min(100%, …) lo, khỏi cần câu @media riêng cho điện thoại.
*/
.hist-grid {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr));
}

/*
  Thanh bộ lọc và biểu mẫu một hàng: các ô giãn đều, không cái to cái bé.
  .form-row dùng cho biểu mẫu nhập (thêm nhân viên) — cùng cách xếp nhưng tên
  khác để khỏi lẫn với thanh lọc khi đọc mã hay khi kiểm thử.
*/
.filter-bar, .form-row {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: 1fr;
}
.filter-bar .btn, .form-row .btn { height: 42px; }
@media (min-width: 700px) {
  .filter-bar, .form-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
.fb-field { min-width: 0; }
.fb-field .field { width: 100%; }

.timer.warn { background: var(--amber-bg); color: var(--amber); filter: saturate(1.4); }
.timer.over { background: var(--red); color: #fff; }
.timer.over .btn-dark { background: #fff; color: #9f1239; }
/* Đồng hồ đếm ngược: to hết cỡ màn hình cho phép, đứng xa vẫn đọc được. */
.timer .clock {
  font: 800 clamp(52px, 13vw, 86px)/1.05 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; margin: 10px 0;
}
.timer.over .clock { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .45; } }

/* Vạch thời gian còn lại — nhìn nhanh hơn đọc số. */
.tbar { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .12); margin: 4px 0 8px; }
.tbar span { display: block; height: 100%; width: 100%; border-radius: 99px; background: currentColor; transition: width 1s linear; }
.timer.over .tbar span { width: 0; }
.timer .btn-sm { border-color: currentColor; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .timer.over .clock { animation: none; }
  .tbar span { transition: none; }
}

/* ===== Danh sách nhỏ ===== */
.list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; }
.list li + li { border-top: 1px solid var(--line-2); }

/* Khối thu gọn, chỉ hiện khi cần — dùng cho ghi chú phụ. */
.quiet summary {
  cursor: pointer; font-size: 13px; color: var(--ink-3);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.quiet summary::before { content: 'ⓘ'; }
.quiet summary::-webkit-details-marker { display: none; }
.quiet summary:hover { color: var(--ink-2); }
.quiet[open] summary { color: var(--ink-2); margin-bottom: 2px; }

.hist { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.hist li { display: flex; gap: 8px; align-items: baseline;
           border-top: 1px solid var(--line-2); padding-top: 6px; }

/* ===== Chuyển ngôn ngữ ===== */
.langsw { display: inline-flex; gap: 2px; padding: 2px; background: var(--line-2); border-radius: 999px; }
.langsw-i {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); text-decoration: none; line-height: 1.2;
}
.langsw-i:hover { background: var(--card); }
.langsw-i.on { background: var(--side); color: #fff; }
/* Trong thanh bên: trải đều hết chiều ngang cho cân đối. */
.side-foot .langsw {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #1e293b; border: 1px solid #334155; padding: 3px; gap: 3px;
  border-radius: 10px;
}
.side-foot .langsw-i {
  text-align: center; padding: 7px 0; border-radius: 7px;
  color: #94a3b8; font-size: 13px;
}
.side-foot .langsw-i:hover { background: #334155; color: #e2e8f0; }
.side-foot .langsw-i.on {
  background: #fff; color: var(--side); font-weight: 700;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}

/* ===================================================================
   TRANG ĐĂNG NHẬP

   Đây là màn hình duy nhất KHÔNG đi theo màu xanh của phần còn lại: nó dùng
   vàng lấy thẳng từ logo. Lý do: cả trang chỉ có một cái thẻ giữa nền tối, màu
   thương hiệu ở đây mới có chỗ mà phô. Vào trong rồi thì quay về xanh, vì xanh /
   đỏ / vàng trong bảng công còn phải mang nghĩa đúng giờ / trễ / cảnh báo.
   =================================================================== */
.login-body {
  position: relative;
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 20px;
  background: var(--bg);
}

/* Hàng chọn ngôn ngữ nằm nép GÓC TRÊN BÊN PHẢI, không chen vào giữa màn hình. */
.login-lang {
  position: absolute; top: 18px; right: 18px; margin: 0;
}
/* Dùng biến theo nền: người nào bấm sang nền sáng thì hàng này vẫn nhìn thấy. */
.login-lang.langsw { background: var(--line-2); }
.login-lang .langsw-i { color: var(--ink-2); }
.login-lang .langsw-i:hover { background: var(--card); color: var(--ink); }
.login-lang .langsw-i.on {
  background: var(--gold); color: #221a05; font-weight: 700;
}

.login-card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .45); text-align: center;
}

/* Logo nằm trong một khung bo tròn sáng hơn nền thẻ, cho nổi khối. */
.login-logo-box {
  display: flex; justify-content: center; align-items: center;
  padding: 14px 18px; margin-bottom: 14px;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.login-logo { font-size: 42px; }
/* Logo ảnh ở màn hình đăng nhập: to hơn trong thanh bên, vẫn khoá theo chiều cao. */
img.login-logo { height: 62px; width: auto; max-width: 100%; object-fit: contain; }

.login-name { font-size: 21px; margin: 0 0 2px; }
/*
  Dòng phụ và nhãn ô nhập viết HOA, giãn chữ: nhìn ra ngay đâu là tiêu đề phụ,
  đâu là chữ để đọc — mà không phải tô đậm hay phóng to thêm cái gì.
*/
.login-sub {
  color: var(--ink-2); font-size: 11.5px; margin-bottom: 22px;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
}
.login-card .label {
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; font-weight: 600; color: var(--ink-2);
}
.login-card .form-group { text-align: left; }

/*
  Ô nhập nền sáng trên thẻ tối: chỗ phải gõ thì nổi bật hẳn lên, khỏi phải dò.
  Ô đang gõ viền vàng cho biết con trỏ đang ở đâu.
*/
.login-card .field {
  background: #eef1f8; color: #0f172a; border-color: transparent;
}
.login-card .field::placeholder { color: #64748b; }
.login-card .field:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(245 197 66 / .22);
}

/* Nút đăng nhập vàng gradient, chữ đen — cùng tông với logo. */
.login-card .btn-primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold-d);
  color: #241b04; font-weight: 700;
}
.login-card .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffeaa6, #f8cf5c);
}
.login-card .btn-primary:disabled { opacity: .6; }

.login-help { color: var(--ink-3); font-size: 12px; margin-top: 14px; }
.login-foot { color: var(--ink-3); font-size: 13px; }
.login-card .alert { margin-bottom: 14px; text-align: left; }