/* ============================================================
   TLC BIM Hub — Worklog
   Viết riêng cho app này. Bản trước bê từ bim-manage: 2100 dòng / 80KB,
   phần lớn là CSS của Finance / GMC / Kanban / LopRevit — app này không có.

   Nguyên tắc: công cụ dùng hằng ngày phải quét mắt được nhanh.
   Ít viền, ít màu, chữ rõ. Viền chỉ xuất hiện ở ô đang sửa.
   ============================================================ */

:root {
  --ink:       #12171C;
  --ink-2:     #4C5761;
  /* --ink-3 mang thông tin thật (cột Dự án, Người, header cột) nên phải đạt
     tương phản 4.5 trên nền trắng — bản đầu để #7B8590 chỉ được 3.75. */
  --ink-3:     #646E79;
  --ink-4:     #98A1AA;

  --bg:        #FAFBFB;
  --card:      #FFFFFF;
  --hover:     #F3F5F6;
  --rule:      #E4E8EA;
  --rule-2:    #CBD2D7;

  --accent:    #2D6A9F;
  --accent-fg: #FFFFFF;
  --accent-soft: #EBF2F8;

  --done:      #067647;
  --done-bg:   #E8F5EF;
  --doing:     #B45309;
  --doing-bg:  #FDF3E7;
  --pending:   #64748B;
  --pending-bg:#F1F3F5;
  --danger:    #B42318;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Consolas", "Cascadia Mono", ui-monospace, Menlo, monospace;

  --r: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:#E9EDF0; --ink-2:#A6B0B8; --ink-3:#868F97; --ink-4:#69737B;
    --bg:#14171A; --card:#1B1F23; --hover:#242A2F;
    --rule:#2C3238; --rule-2:#3D454C;
    --accent:#4A8FCB; --accent-fg:#0B1116; --accent-soft:#1C2B38;
    --done:#4ABF87; --done-bg:#12291F;
    --doing:#E09A4C; --doing-bg:#2C2317;
    --pending:#8B96A2; --pending-bg:#222831;
    --danger:#F0796B;
  }
}
:root[data-theme="dark"] {
  --ink:#E9EDF0; --ink-2:#A6B0B8; --ink-3:#868F97; --ink-4:#69737B;
  --bg:#14171A; --card:#1B1F23; --hover:#242A2F;
  --rule:#2C3238; --rule-2:#3D454C;
  --accent:#4A8FCB; --accent-fg:#0B1116; --accent-soft:#1C2B38;
  --done:#4ABF87; --done-bg:#12291F;
  --doing:#E09A4C; --doing-bg:#2C2317;
  --pending:#8B96A2; --pending-bg:#222831;
  --danger:#F0796B;
}
:root[data-theme="light"] {
  --ink:#12171C; --ink-2:#4C5761; --ink-3:#646E79; --ink-4:#98A1AA;
  --bg:#FAFBFB; --card:#FFFFFF; --hover:#F3F5F6;
  --rule:#E4E8EA; --rule-2:#CBD2D7;
  --accent:#2D6A9F; --accent-fg:#FFFFFF; --accent-soft:#EBF2F8;
  --done:#067647; --done-bg:#E8F5EF;
  --doing:#B45309; --doing-bg:#FDF3E7;
  --pending:#64748B; --pending-bg:#F1F3F5;
  --danger:#B42318;
}

/* PHẢI đứng trước mọi rule display: thuộc tính hidden của HTML chạy bằng
   [hidden]{display:none} (0-1-0) nên rule theo id đè được và phần tử vẫn
   hiện. Đã dính đúng lỗi này với hộp đăng nhập. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }

/* ===== Nút ===== */

.btn {
  border: 1px solid var(--rule-2);
  background: var(--card);
  color: var(--ink-2);
  padding: 7px 14px;
  border-radius: var(--r);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--hover); border-color: var(--ink-4); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }

/* ===== Thanh trên ===== */

.tlc-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 20;
}
.tlc-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.tlc-title small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 1px;
}
.tlc-me {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.tlc-me select {
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--rule-2);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.tlc-body { padding: 18px 24px 80px; max-width: 1180px; margin: 0 auto; }

/* ===== Đăng nhập ===== */

#login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box {
  width: 320px;
  padding: 28px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--card);
  box-shadow: 0 2px 20px rgba(0,0,0,.05);
}
.login-box h1 { font-size: 18px; margin: 0 0 3px; }
.login-box p { font-size: 13px; color: var(--ink-3); margin: 0 0 18px; }
.login-box input {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r);
  border: 1px solid var(--rule-2);
  background: var(--card);
  margin-bottom: 10px;
}
.login-box .btn { width: 100%; }
#login-msg { color: var(--danger); font-size: 12.5px; min-height: 18px; margin-top: 8px; }

/* ===== Khối nhập nhanh — LÊN TRÊN CÙNG =====
   Việc làm ~4 lần/ngày/người, nên nó đứng đầu. Trước đây nằm sau "Sắp tới",
   đẩy bảng xuống 555px. */

.wl-add {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.wl-add-projects {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 9px;
}

/* Chip dự án: 8 cái hay dùng nhất. Trước đây hiện tất cả 69 -> 5 hàng. */
.wl-proj-pill {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s, border-color .1s;
}
.wl-proj-pill:hover { border-color: var(--ink-4); background: var(--hover); }
.wl-proj-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
/* Dropdown chứa các dự án còn lại */
.wl-proj-more {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px dashed var(--rule-2);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  max-width: 190px;
}
.wl-proj-more:hover { border-color: var(--accent); color: var(--accent); }
.wl-proj-more.active {
  border-style: solid;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
/* Ô gõ tên dự án mới, hiện khi bấm ＋ */
.wl-proj-addbox { display: inline-flex; }
.wl-proj-addbox .wl-input { padding: 3px 9px; font-size: 12px; }

.wl-add-row { display: flex; gap: 8px; align-items: center; }
.wl-input {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  background: var(--bg);
}
.wl-input:focus { background: var(--card); }
.wl-add-hours { display: flex; align-items: center; gap: 6px; }
.wl-add-hours label { font-size: 12px; color: var(--ink-3); }
.wl-add-hours input {
  width: 64px;
  padding: 8px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  background: var(--bg);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.wl-sugs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
}
.wl-sugs-label {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: .04em;
  margin-right: 2px;
}
.wl-sug-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-sug-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ===== Thanh tuần ===== */

.wl-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wl-week-nav { display: flex; align-items: center; gap: 2px; }
.wl-week-btn {
  border: 1px solid var(--rule-2);
  background: var(--card);
  color: var(--ink-2);
  width: 28px; height: 28px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.wl-week-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--ink-4); }
.wl-week-btn:disabled { opacity: .3; cursor: default; }
.wl-week-label { margin: 0 8px; display: flex; align-items: baseline; gap: 7px; }
.wl-week-label strong { font-size: 14.5px; font-weight: 600; }
.wl-week-label span { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
/* Tổng của tuần — thay chỗ nút "Copy cho Excel" đã bỏ */
.wl-week-total { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.wl-week-total strong { color: var(--ink); font-family: var(--mono); font-weight: 600; }

/* ===== Bảng =====
   Không viền ô. Chữ thường. Bấm ô nào mới hoá input ô đó.
   Trước đây: 294 input luôn hiện viền, 93 cái trong một màn hình. */

.wl-table-wrap {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.wl-table { width: 100%; border-collapse: collapse; }

.wl-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  white-space: nowrap;
}
.wl-table td {
  padding: 0 10px;
  height: 30px;                  /* 43px -> 30px */
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.wl-table tbody tr:last-child td { border-bottom: none; }
.wl-table tbody tr:hover td { background: var(--hover); }

/* Dòng gộp theo ngày — thay cột Date vốn lặp y hệt 49 lần/tuần */
.wl-day-sep td {
  background: var(--bg) !important;
  height: 26px;
  border-top: 1px solid var(--rule);
}
.wl-day-sep:first-child td { border-top: none; }
.wl-day-title { font-weight: 600; font-size: 12px; color: var(--ink-2); }
.wl-day-sub { font-size: 11px; color: var(--ink-3); margin-left: 8px; font-family: var(--mono); }

/* Ô ở chế độ xem — không viền, không nền */
.wl-v {
  display: block;
  cursor: text;
  border-radius: 3px;
  padding: 2px 4px;
  margin: 0 -4px;
  min-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-v:hover { background: var(--rule); }
.wl-v.muted { color: var(--ink-3); }
.wl-v.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.wl-v.empty { color: var(--ink-4); font-style: italic; }

/* Ô đang sửa — chỉ ô này có viền */
.wl-e {
  width: 100%;
  padding: 2px 5px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--card);
  font-size: 13px;
  outline: none;
}
.wl-e.num { font-family: var(--mono); text-align: right; }

/* Trạng thái — pill màu, bấm để đổi vòng Done -> Doing -> Pending */
.wl-status-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .02em;
}
.wl-status-pill.done    { background: var(--done-bg);    color: var(--done); }
.wl-status-pill.doing   { background: var(--doing-bg);   color: var(--doing); }
.wl-status-pill.pending { background: var(--pending-bg); color: var(--pending); }
.wl-status-pill:hover { filter: brightness(.94); }

/* Nút cuối dòng — luôn THẤY được nhưng mờ, rê chuột thì rõ.
   Không dùng opacity:0 + hover: trên màn cảm ứng không có hover nên nút sẽ
   vô hình vĩnh viễn, và ngay cả trên desktop thì nút vô hình buộc người dùng
   phải đoán là nó có tồn tại. Mờ vẫn đọc được, vẫn bấm được. */
.wl-row-acts { display: flex; gap: 1px; justify-content: flex-end; }
.wl-act {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-4); font-size: 12px; line-height: 1;
  padding: 4px 5px; border-radius: 4px;
  opacity: .45; transition: opacity .1s, background .1s, color .1s;
}
.wl-table tbody tr:hover .wl-act, .wl-act:focus-visible { opacity: 1; }
.wl-act:hover { background: var(--rule); color: var(--ink); opacity: 1; }
.wl-act.del:hover { background: var(--danger); color: #fff; opacity: 1; }

.wl-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  background: var(--bg);
  flex-wrap: wrap;
}
.wl-foot strong { color: var(--ink); font-weight: 600; font-family: var(--mono); }
.wl-foot-hint { font-size: 11.5px; color: var(--ink-4); }

/* ===== Sắp tới — thu gọn, xuống CUỐI =====
   Việc thỉnh thoảng mới mở, không nên chiếm chỗ giữa màn hình. */

.wl-todo {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.wl-todo-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}
.wl-todo-head:hover { background: var(--hover); }
.wl-todo-caret { font-size: 10px; color: var(--ink-3); transition: transform .15s; }
.wl-todo.open .wl-todo-caret { transform: rotate(90deg); }
.wl-todo-title { font-weight: 600; font-size: 13px; }
.wl-todo-count {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--rule); color: var(--ink-2);
  padding: 1px 7px; border-radius: 999px;
}
.wl-todo-count.warn { background: var(--doing-bg); color: var(--doing); }
.wl-todo-hint { font-size: 11.5px; color: var(--ink-4); margin-left: auto; }
.wl-todo-body { display: none; border-top: 1px solid var(--rule); padding: 8px 12px 12px; }
.wl-todo.open .wl-todo-body { display: block; }

.wl-todo-item { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.wl-todo-check {
  width: 20px; height: 20px; flex: none;
  border: 1px solid var(--rule-2); background: var(--card);
  border-radius: 5px; cursor: pointer; color: var(--ink-4);
  font-size: 11px; line-height: 1; display: grid; place-items: center;
}
.wl-todo-check:hover { border-color: var(--done); background: var(--done-bg); color: var(--done); }
.wl-todo-date, .wl-todo-proj, .wl-todo-task, .wl-todo-input {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  background: transparent;
  font-size: 12.5px;
}
.wl-todo-date { width: 128px; flex: none; font-family: var(--mono); color: var(--ink-2); }
.wl-todo-date.overdue { color: var(--danger); font-weight: 600; }
.wl-todo-proj { width: 130px; flex: none; color: var(--ink-3); }
.wl-todo-task, .wl-todo-input { flex: 1; min-width: 0; }
.wl-todo-item:hover .wl-todo-date,
.wl-todo-item:hover .wl-todo-proj,
.wl-todo-item:hover .wl-todo-task { border-color: var(--rule); background: var(--bg); }
.wl-todo-date:focus, .wl-todo-proj:focus, .wl-todo-task:focus, .wl-todo-input:focus {
  border-color: var(--accent); background: var(--card);
}
.wl-todo-x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-4); padding: 3px 5px; border-radius: 4px; font-size: 11px;
  opacity: .45; transition: opacity .1s, background .1s;
}
.wl-todo-item:hover .wl-todo-x, .wl-todo-x:focus-visible { opacity: 1; }
.wl-todo-x:hover { background: var(--danger); color: #fff; opacity: 1; }
.wl-todo-add {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule);
}
.wl-todo-add .wl-todo-date,
.wl-todo-add .wl-todo-proj,
.wl-todo-add .wl-todo-input { border-color: var(--rule); background: var(--bg); }

/* ===== Trạng thái rỗng ===== */

.empty-state {
  text-align: center;
  padding: 44px 20px;
  color: var(--ink-3);
  font-size: 13.5px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.empty-icon { font-size: 26px; margin-bottom: 8px; opacity: .5; }

/* ===== Toast ===== */

#toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  background: #1E252B; color: #fff;
  padding: 10px 15px; border-radius: 7px;
  font-size: 13px; display: flex; align-items: center; gap: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity .16s, transform .16s;
  z-index: 999;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  max-width: calc(100vw - 32px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#toast.warn { background: #8A3E10; }
#toast button {
  background: rgba(255,255,255,.16); color: #fff; border: 0;
  padding: 4px 10px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600;
}
#toast button:hover { background: rgba(255,255,255,.26); }

/* ===== Màn hẹp ===== */

@media (max-width: 720px) {
  .tlc-body { padding: 14px 12px 60px; }
  .tlc-top { padding: 10px 12px; }
  .wl-table-wrap { overflow-x: auto; }
  .wl-table { min-width: 620px; }
  .wl-add-row { flex-wrap: wrap; }
  .wl-input { flex-basis: 100%; }
  .wl-foot-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}