:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-light: #283449;
  --border: #334155;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent-hover); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
  gap: 16px; flex-wrap: wrap;
}
.topbar .brand { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar .user-info {
  display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-dim);
  flex-wrap: wrap; min-width: 0;
}
.topbar .user-info span#userFullName {
  white-space: nowrap; max-width: 220px; overflow: visible; text-overflow: unset;
}
.badge-role {
  background: var(--accent); color: white; padding: 2px 8px; border-radius: 6px; font-size: 11px;
  text-transform: uppercase; font-weight: 600;
}

.btn {
  background: var(--accent); color: white; border: none; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500;
}
.btn:hover { background: var(--accent-hover); }
.btn.secondary { background: var(--panel-light); }
.btn.danger { background: var(--red); }
.btn.small { padding: 4px 10px; font-size: 12px; }

.login-wrap {
  display: flex; align-items: center; justify-content: center; height: 100vh;
}
.login-box {
  background: var(--panel); padding: 32px; border-radius: var(--radius); width: 340px;
  border: 1px solid var(--border);
}
.login-box h2 { margin-top: 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 14px;
}
.field input[type="date"] { cursor: pointer; }
.field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
.error-msg { color: var(--red); font-size: 13px; margin-top: 8px; }

/* === APP LAYOUT: topbar 48px + 3 cột bên dưới === */
.topbar { height: 48px; }

.app-layout {
  display: flex;
  height: calc(100vh - 48px);
  overflow: hidden;
}

/* LEFT SIDEBAR */
.left-sidebar {
  width: 280px; flex-shrink: 0;
  background: var(--panel); border-right: 1px solid var(--border);
  padding: 16px; overflow-y: auto;
  transition: width 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
  scrollbar-width: none;
}
.left-sidebar::-webkit-scrollbar { display: none; }
.left-sidebar.collapsed { width: 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.left-sidebar h4 {
  color: var(--text); font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; margin: 18px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* Nhóm theo status (Prototype/Release/...) — cấp con nằm trong mục "Projects", nên nhỏ/nhạt hơn h4 để rõ tầng bậc */
.stage-group-header {
  color: var(--text-dim); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; margin: 12px 0 6px 2px;
}

/* MAIN */
.main { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: none; }
.main::-webkit-scrollbar { display: none; }

/* RIGHT SIDEBAR */
.right-sidebar {
  width: 300px; flex-shrink: 0;
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 16px; overflow-y: auto;
  transition: width 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
  display: flex; flex-direction: column;
  scrollbar-width: none; /* Firefox */
}
.right-sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.right-sidebar.collapsed { width: 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none; }

.rs-user-section { padding-bottom: 14px; }
.rs-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.rs-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.rs-section:last-child { border-bottom: none; }
.rs-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-dim); letter-spacing: 0.5px; margin-bottom: 10px;
}
.rs-section-plan { flex: 1; display: flex; flex-direction: column; }
.rs-section-plan > div { flex: 1; display: flex; flex-direction: column; }

/* Toggle button mũi tên trên topbar */
.rs-toggle-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 16px; padding: 4px 6px; border-radius: 6px; line-height: 1;
  transition: color 0.15s;
}
.rs-toggle-btn:hover { color: var(--text); }
/* Khi right sidebar đang ẩn, mũi tên chỉ sang trái (để hiện lại) */
.rs-toggle-btn.panel-hidden { /* mũi tên ▶ set in JS */ }

/* BOARD */
.board { display: flex; gap: 16px; align-items: flex-start; }

/* SPRINT BAR */
.sprint-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px 0; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 0;
}
.sprint-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.sprint-tab {
  padding: 5px 14px; border-radius: 20px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-dim);
  white-space: nowrap; transition: all 0.15s;
}
.sprint-tab:hover { background: var(--panel-light); color: var(--text); }
.sprint-tab.active { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; }
.sprint-tab .sprint-status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
}
.sprint-tab .dot-planning { background: var(--text-dim); }
.sprint-tab .dot-active   { background: var(--green); }
.sprint-tab .dot-completed { background: #475569; }
.column {
  background: var(--panel-light); border-radius: var(--radius); width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column;
}
.column-header {
  padding: 12px 14px; font-weight: 600; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.column-body { padding: 10px; overflow-y: auto; flex: 1; min-height: 60px; }

/* PROJECT LIST */
.project-item {
  padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 6px;
  background: var(--bg);
}
.project-item:hover, .project-item.active { background: var(--panel-light); }
.project-item .proj-top-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.project-item .proj-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px;
  border-radius: 10px; flex-shrink: 0; letter-spacing: 0.3px;
}
.stage-badge.stage-prototype { background: #475569; color: #e2e8f0; }
.stage-badge.stage-release { background: #16a34a; color: white; }
.stage-badge.stage-maintain { background: #ca8a04; color: white; }
.stage-badge.stage-close { background: #64748b; color: #e2e8f0; }
.stage-select {
  font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 4px;
  border-radius: 10px; flex-shrink: 0; border: none; cursor: pointer;
}
/* Sidebar: nhóm theo status đã có header riêng, nên chỉ cần hiện mũi tên dropdown để đổi,
   không cần hiện lại chữ tên trạng thái (đã thừa vì đang nằm sẵn trong đúng nhóm đó).
   Tắt hẳn appearance mặc định của trình duyệt và tự vẽ mũi tên bằng SVG, để không phụ thuộc
   việc trình duyệt có hiện mũi tên gốc hay không (native arrow bị ẩn nếu control quá nhỏ). */
.project-item .stage-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 20px; height: 20px; padding: 0; border-radius: 6px; flex-shrink: 0;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center;
  color: transparent;
  border: 1px solid var(--border);
}
.project-item .stage-select option { color: var(--text); background: var(--panel); }

/* Mobile responsive */
@media (max-width: 768px) {
  .left-sidebar {
    position: fixed; left: 0; top: 48px; bottom: 0; z-index: 50;
    width: 260px !important; transition: transform 0.2s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.5);
  }
  .left-sidebar.collapsed { transform: translateX(-100%); width: 260px !important; opacity: 1; pointer-events: auto; }
  .right-sidebar { width: 260px !important; }
  .right-sidebar.collapsed { width: 0 !important; }
  .column { width: 240px; }
  .modal { width: calc(100vw - 32px); max-height: 90vh; padding: 16px; }
}

.weekly-plan-header { font-weight: 700; font-size: 15px; margin-bottom: 10px; flex-shrink: 0; }

.wp-weeks-scroll {
  overflow-y: auto; flex: 1; min-height: 0;
  max-height: 480px; /* xấp xỉ hiển thị ~3 tuần trước khi cuộn, tuỳ số lượng việc mỗi tuần */
}
.wp-week-section { margin-bottom: 14px; }
.wp-week-section:last-child { margin-bottom: 0; }
.wp-week-title {
  font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase;
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.wp-week-title.is-current { color: var(--accent-hover); }

.wp-item {
  background: var(--panel-light); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  border-left: 3px solid var(--accent); font-size: 13px;
}
.wp-item .wp-assignee { font-weight: 600; font-size: 12px; color: var(--accent-hover); margin-bottom: 2px; }
.wp-item .wp-desc { line-height: 1.4; margin-bottom: 4px; }
.wp-item .wp-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-dim); }
.wp-item .wp-delete { cursor: pointer; color: var(--text-dim); }
.wp-item .wp-delete:hover { color: var(--red); }
.wp-item .wp-deadline.overdue { color: var(--red); font-weight: 600; }
.wp-item .wp-deadline.soon { color: var(--yellow); font-weight: 600; }
.weekly-plan-add-form {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.weekly-plan-add-form select, .weekly-plan-add-form textarea, .weekly-plan-add-form input {
  width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 13px;
}
.weekly-plan-add-form input[type="date"] { cursor: pointer; }

.task-card {
  background: var(--panel-light); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
  cursor: grab; border-left: 3px solid var(--accent);
  min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.task-card.priority-high { border-left-color: var(--red); }
.task-card.priority-normal { border-left-color: var(--accent); }
.task-card.priority-low { border-left-color: var(--text-dim); }
.task-card .title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.task-card .card-top-row { display: flex; align-items: flex-start; gap: 8px; }
.task-card .quick-sprint-select {
  font-size: 11px; padding: 2px 4px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-dim); cursor: pointer; max-width: 100px;
}
.task-card .quick-sprint-select:hover { border-color: var(--accent); color: var(--text); }
.task-card .meta { font-size: 12px; color: var(--text-dim); display: flex; justify-content: flex-start; }
.task-card .deadline { color: var(--text-dim); }
.task-card .deadline.soon { color: var(--yellow); font-weight: 600; }
.task-card .deadline.overdue { color: var(--red); font-weight: 600; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex;
  align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: var(--panel); border-radius: var(--radius); padding: 24px; width: 420px;
  max-height: 85vh; overflow-y: auto; border: 1px solid var(--border);
}
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.close-x { float: right; cursor: pointer; color: var(--text-dim); font-size: 18px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data-table th, table.data-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
table.data-table th { color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; }

/* Kẻ khung đầy đủ kiểu bảng Excel/Sheet để dễ nhìn khi nhiều dòng/nhiều project */
table.overview-table { border: 1px solid var(--border); }
table.overview-table th, table.overview-table td {
  border: 1px solid var(--border); vertical-align: top;
}
table.overview-table th { background: #b45309; color: #fff7ed; text-align: center; }
/* Cột Project: merge nhiều dòng (rowspan) khi 1 project có nhiều việc -> căn giữa cả ngang lẫn dọc, tô nền phân biệt */
table.overview-table .ov-project-cell {
  text-align: left; vertical-align: middle; background: rgba(34, 197, 94, 0.12);
}
table.overview-table .ov-objective-cell,
table.overview-table .ov-note-cell {
  vertical-align: middle;
}
table.overview-table .ov-milestone-input {
  width: 100%; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel-light); color: var(--text); font-size: 13px;
}
table.overview-table .deadline { color: #a3e635; font-weight: 600; }

.member-badge {
  display: inline-block; padding: 3px 10px; border-radius: 14px; color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* Icon lịch mặc định của input[type=date] là màu đen, gần như vô hình trên nền tối -> đảo màu cho dễ thấy/bấm */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }

.week-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }

.project-icon, .project-icon-fallback {
  border-radius: 6px; object-fit: cover; display: inline-flex; align-items: center;
  justify-content: center; background: var(--accent); color: #fff; font-weight: 700;
  flex-shrink: 0; vertical-align: middle; margin-right: 6px;
}
.ov-project-name-link { cursor: pointer; display: inline-flex; align-items: center; }
.ov-project-name-link:hover b { text-decoration: underline; }
table.overview-table .ov-note-input {
  width: 100%; min-width: 160px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel-light); color: var(--text); font-size: 12px; resize: vertical;
}
table.overview-table .ov-add-row td { background: var(--panel-light); }
table.overview-table .ov-add-row select,
table.overview-table .ov-add-row input[type="text"],
table.overview-table .ov-add-row input[type="date"],
table.overview-table select.ov-item-assignee,
table.overview-table input.ov-item-deadline,
table.overview-table input.ov-item-desc {
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 12px; width: 100%;
}

.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--panel-light);
  padding: 12px 18px; border-radius: 8px; border-left: 4px solid var(--green); z-index: 200;
}
.toast.error { border-left-color: var(--red); }

.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 300;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
  padding: 24px;
}
.lightbox-overlay img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
}
.lightbox-overlay .lightbox-close {
  position: absolute; top: 16px; right: 24px; color: white; font-size: 28px;
  cursor: pointer; line-height: 1;
}