:root {
  --bg: #f1eee7;
  --ink: #1a1d23;
  --muted: #767b85;

  /* Màu theo TRẠNG THÁI - dùng nhất quán ở mọi view (Hôm nay/Tuần/Lịch sử).
     Đậm hơn bản đầu (user phản hồi 2026-10-12: màu quá nhạt, không đủ
     "giống" tông ảnh tham chiếu Dribbble - bản gốc dùng pastel ĐẶC, không
     phải pastel-nhạt-gần-trắng). */
  --st-pending-bg: #e4dfd2;
  --st-pending-ink: #4f4a3a;
  --st-notified-bg: #fbdd84;
  --st-notified-ink: #5c4305;
  --st-progress-bg: #a9cdfa;
  --st-progress-ink: #0f3d73;
  --st-done-bg: #a7e6ba;
  --st-done-ink: #145429;
  --st-missed-bg: #f6b7ab;
  --st-missed-ink: #6e2012;

  /* Màu theo NGÀY TRONG TUẦN - chỉ dùng ở view Tuần */
  --dow-0: #e8bdf5;
  --dow-1: #b7cdfa;
  --dow-2: #f7b9cd;
  --dow-3: #f8cda4;
  --dow-4: #a6ecd6;
  --dow-5: #ecdf8e;
  --dow-6: #c7b7f7;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding: 16px 14px 70px;
  font-size: 15px;
}

/* ===== Header ===== */
.app-header { max-width: 480px; margin: 0 auto 16px; }

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.app-header h1 { font-size: 19px; margin: 0; font-weight: 800; }

/* Pill toggle 3 nút, rộng hết chiều ngang, nút active nền đen chữ trắng -
   tap target đủ 44px cao theo chuẩn mobile. */
.view-toggle {
  display: flex;
  background: #fff;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 10px;
  min-height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  transition: background .12s ease, color .12s ease, transform .08s ease;
}

.toggle-btn.active { background: var(--ink); color: #fff; }
.toggle-btn:active { transform: scale(.96); }

main { max-width: 480px; margin: 0 auto; }

/* ===== Hero ngày (view Hôm nay) - số to đậm kiểu ảnh tham chiếu ===== */
.hero-date {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 28px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.hero-date-num {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.hero-date-info { flex: 1; min-width: 0; }
.hero-dow { font-size: 15px; font-weight: 700; }
.hero-progress { font-size: 13px; color: var(--muted); margin-top: 2px; }

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.view-head h2 { margin: 0; font-size: 18px; }

.btn-refresh {
  border: none;
  background: var(--bg);
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-refresh:active { transform: scale(.92); }

.btn-primary {
  border: none;
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:active { transform: scale(.97); }

.btn-block { display: block; width: 100%; margin-top: 12px; }

/* ===== Thẻ task (Hôm nay) ===== */
.task-list { display: flex; flex-direction: column; gap: 12px; }

.task-card {
  border-radius: 24px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.task-card .task-time {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 800;
  min-width: 58px;
  flex-shrink: 0;
  line-height: 1.25;
}

.task-time-end {
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: .6;
}

.task-card .task-body { flex: 1; min-width: 0; }

.task-card .task-name {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 3px;
  word-break: break-word;
}

.task-card .task-sub { font-size: 11.5px; opacity: .75; margin: 0; }

.status-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  white-space: nowrap;
  flex-shrink: 0;
}

.task-card.status-pending   { background: var(--st-pending-bg);  color: var(--st-pending-ink); }
.task-card.status-notified  { background: var(--st-notified-bg); color: var(--st-notified-ink); }
.task-card.status-in_progress { background: var(--st-progress-bg); color: var(--st-progress-ink); }
.task-card.status-done      { background: var(--st-done-bg);     color: var(--st-done-ink); }
.task-card.status-missed    { background: var(--st-missed-bg);   color: var(--st-missed-ink); }

.empty-hint { color: var(--muted); font-size: 14px; text-align: center; padding: 30px 10px; }

/* ===== View Tuần: 1 thẻ lớn/ngày, màu theo thứ ===== */
.week-grid { display: flex; flex-direction: column; gap: 14px; }

.day-card { border-radius: 24px; padding: 16px 18px; }
.day-card[data-dow="0"] { background: var(--dow-0); }
.day-card[data-dow="1"] { background: var(--dow-1); }
.day-card[data-dow="2"] { background: var(--dow-2); }
.day-card[data-dow="3"] { background: var(--dow-3); }
.day-card[data-dow="4"] { background: var(--dow-4); }
.day-card[data-dow="5"] { background: var(--dow-5); }
.day-card[data-dow="6"] { background: var(--dow-6); }

.day-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.day-card-head .dow-name { font-size: 13.5px; font-weight: 700; opacity: .75; }
.day-card-head .dow-date { font-size: 22px; font-weight: 800; }

.day-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.slot-pill {
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  padding: 9px 13px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}

.slot-pill .slot-time { font-weight: 800; }
.slot-pill.status-done { text-decoration: line-through; opacity: .7; }
.slot-pill.status-missed { opacity: .6; }

.slot-add-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.7);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.slot-add-btn:active { transform: scale(.92); }

/* ===== Thống kê ===== */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 20px;
  padding: 14px 10px;
  text-align: center;
}

/* Màu viền theo mức hoàn thành - trực quan "có theo kịp lịch không" ngay
   không cần đọc số: xanh tốt, vàng tạm, đỏ thấp. */
.stat-card.good { box-shadow: inset 0 0 0 2px var(--st-done-bg); }
.stat-card.mid  { box-shadow: inset 0 0 0 2px var(--st-notified-bg); }
.stat-card.low  { box-shadow: inset 0 0 0 2px var(--st-missed-bg); }

.stat-label { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.stat-pct {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.stat-count { font-size: 11px; color: var(--muted); margin-top: 4px; }

.stats-subhead { font-size: 14px; margin: 0 0 10px; color: var(--muted); }

.history-list { display: flex; flex-direction: column; gap: 10px; }

.history-row {
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  cursor: pointer;
}
.history-row:active { transform: scale(.99); }

.history-row .hr-top {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.history-row .hr-detail {
  margin-top: 10px;
  display: none;
  flex-direction: column;
  gap: 6px;
}

.history-row.expanded .hr-detail { display: flex; }

.hr-task-line { font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }

/* ===== Modal ===== */
/* BUG THẬT 2026-10-12 (user báo "không bấm được gì cả", ảnh chụp màn hình
   xác nhận): "display: flex" đặt qua class selector ở đây ĐÈ LÊN quy tắc
   mặc định "[hidden] { display: none }" của trình duyệt (cùng mức độ đặc
   hiệu CSS, class selector tác giả thắng UA stylesheet) - thuộc tính
   `hidden` JS set qua `el.hidden = true/false` KHÔNG còn tác dụng ẩn modal,
   cả 2 modal-backdrop LUÔN hiện ngay từ lúc tải trang, phủ kín màn hình,
   chặn hết thao tác chạm. Lỗi có từ bản đầu, không phải do đợt sửa giao
   diện gần đây. Fix: chỉ áp display:flex khi KHÔNG có thuộc tính hidden. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.modal-backdrop:not([hidden]) {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow-y: auto;
}

@media (min-width: 540px) {
  .modal-backdrop { align-items: center; padding: 16px; }
  .modal { border-radius: 22px; }
}

.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-head h3 { margin: 0; font-size: 16px; }

.btn-close {
  border: none;
  background: var(--bg);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.modal .hint { font-size: 12px; color: var(--muted); margin: 0 0 14px; }

.modal label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.modal input, .modal select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 15px;
  background: #fff;
}

.template-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.template-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
}

.template-row .tr-name { flex: 1; }
.template-row .tr-del {
  border: none;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
  font-size: 20px;
  width: 32px;
  height: 32px;
}

/* Đổi 2026-10-12 (thêm lặp lại/duration): từ 1 hàng ngang duy nhất sang
   lưới 2 cột label+input - quá nhiều field để nhét vừa 1 hàng trên mobile. */
.template-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.tpl-field { font-size: 12px; font-weight: 700; margin-bottom: 0; }
.tpl-field-name { grid-column: 1 / -1; }
.tpl-field input, .tpl-field select { margin-top: 4px; }
.tpl-field-label { display: block; }
#tplAddBtn { grid-column: 1 / -1; }

/* Chọn nhiều thứ cùng lúc (thay cho select đơn "hàng ngày/hàng tuần") -
   mỗi nút toggle độc lập, bấm để thêm/bớt khỏi tập đang chọn. */
.day-picker {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.day-toggle {
  flex: 1;
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.day-toggle.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.day-toggle:active { transform: scale(.93); }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  max-width: 88vw;
  text-align: center;
  z-index: 99;
}