/* Văn phòng M-Software — phong cách cozy/pixel nhẹ theo hình mẫu "Văn phòng Claude" */
:root{
  --bg:#f3ecd9;
  --panel:#fffdf4;
  --ink:#4a3f30;
  --muted:#8a7a5f;
  --line:#e2d5b8;
  --accent:#e8a13a;
  --red:#e2574c;
  --blue:#4a90d9;
  --amber:#e8a13a;
  --green:#58b368;
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* ---------- Header ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:20px 24px 8px;flex-wrap:wrap;
}
.title-block h1{margin:0;font-size:28px}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:13px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{
  background:var(--panel);border:2px solid var(--line);border-radius:12px;
  min-width:76px;padding:6px 10px;text-align:center;
}
.stat b{display:block;font-size:20px;line-height:1.1}
.stat span{font-size:11px;color:var(--muted)}
.stat.todo b{color:var(--red)} .stat.doing b{color:var(--blue)}
.stat.review b{color:var(--amber)} .stat.done b{color:var(--green)}

/* ---------- Pipeline ---------- */
.pipeline{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:10px 24px 0;padding:10px 14px;
  background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);
  font-size:13px;
}
.pipeline .step{font-weight:600;white-space:nowrap}
.pipeline .step small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.pipeline .arrow{color:var(--accent);font-weight:700}

/* ---------- Controls ---------- */
.controls{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:14px 24px 4px;
}
.controls input[type=search]{
  flex:1 1 260px;padding:9px 12px;font-size:14px;
  border:2px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:2px solid var(--line);background:var(--panel);color:var(--ink);
  padding:6px 12px;border-radius:999px;font-size:13px;cursor:pointer;
}
.chip.active{border-color:var(--accent);background:#fdeed3;font-weight:700}

/* ---------- Office grid ---------- */
.office{
  display:grid;gap:18px;padding:16px 24px 8px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  grid-auto-flow:dense;align-items:start;
}
@media (min-width:1100px){ .room--wide{grid-column:span 2} }

.room{
  background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 2px 0 rgba(120,95,50,.08);
}
.room__head{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 14px;border-bottom:2px dashed var(--line);
}
.room__name{font-size:17px;font-weight:700}
.room__counts{display:flex;gap:6px;flex-wrap:wrap}
.count{
  font-size:11px;padding:3px 8px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
}
.count.doing{color:var(--blue)} .count.review{color:var(--amber)} .count.done{color:var(--green)}

/* Sàn phòng: mỗi phòng một màu/quạ tiết riêng */
.room__floor{padding:14px;position:relative}
.floor--mint {background:#dcebd2 radial-gradient(#c6dab6 1.5px,transparent 1.6px);background-size:16px 16px}
.floor--sand {background:#f0e3c0 radial-gradient(#e3d09e 1.5px,transparent 1.6px);background-size:16px 16px}
.floor--rose {background:#f3dcd8 radial-gradient(#e5bfb9 1.5px,transparent 1.6px);background-size:16px 16px}
.floor--sky  {background:#d7e6f2 radial-gradient(#bcd3e8 1.5px,transparent 1.6px);background-size:16px 16px}
.floor--lilac{background:#e4ddf2 radial-gradient(#cbc0e6 1.5px,transparent 1.6px);background-size:16px 16px}
.floor--peach{background:#f7e3cb radial-gradient(#eccfa6 1.5px,transparent 1.6px);background-size:16px 16px}
.floor--teal {background:#d2ebe6 radial-gradient(#b2d9cf 1.5px,transparent 1.6px);background-size:16px 16px}
.floor--gold {background:#f2e8c9 radial-gradient(#e0d096 1.5px,transparent 1.6px);background-size:16px 16px}
.room__decor{position:absolute;top:8px;right:12px;font-size:18px;opacity:.85}

/* Bàn + nhân viên */
.desks{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.desk{width:86px;text-align:center;position:relative;padding-top:20px}
.desk .bubble{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-size:10px;white-space:nowrap;padding:2px 7px;border-radius:999px;
  background:#fff;border:1.5px solid var(--line);
}
.bubble.red{border-color:var(--red);color:var(--red);font-weight:700}
.bubble.green{border-color:var(--green);color:var(--green);font-weight:700}
.desk .avatar{font-size:30px;line-height:1}
.desk .table{
  margin-top:2px;background:linear-gradient(#c98d54,#b57a41);
  border-radius:6px;padding:3px 0;font-size:14px;color:#fff;
}
.desk .who{font-size:10px;color:var(--muted);margin-top:3px}

/* Thẻ việc */
.tasks{display:grid;gap:8px}
.task{
  display:flex;gap:10px;align-items:flex-start;background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;
}
.task__code{
  font-size:11px;font-weight:700;color:#fff;border-radius:6px;padding:2px 6px;white-space:nowrap;
}
.task__code.todo{background:var(--red)} .task__code.doing{background:var(--blue)}
.task__code.review{background:var(--amber)} .task__code.done{background:var(--green)}
.task__title{font-size:13.5px;font-weight:600}
.task__meta{font-size:11px;color:var(--muted)}
.task[hidden]{display:none}

/* Dải đã xong */
.room__done{border-top:2px dashed var(--line);padding:10px 14px 12px;background:#fffaf0}
.room__done h4{margin:0 0 8px;font-size:12.5px;color:var(--green)}
.done-chips{display:flex;gap:6px;flex-wrap:wrap}
.done-chip{
  font-size:12px;background:#eef7ee;border:1.5px solid #cfe6cf;border-radius:8px;padding:4px 8px;
}
.done-chip[hidden]{display:none}

.controls select{
  padding:9px 12px;font-size:14px;border:2px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--ink);max-width:280px;
}
.task__code.blocked{background:#333}
.desk img.avatar-img{width:34px;height:34px;border-radius:50%;vertical-align:middle}
.room__empty{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.empty-note{text-align:center;color:var(--muted);padding:8px 24px 0}
.footer{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:14px 24px 22px;color:var(--muted);font-size:12px;
}