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

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --accent: #58a6ff;
  --green: #3fb950;
  --yellow: #d29922;
  --red: #f85149;
  --orange: #db6d28;
  --purple: #bc8cff;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Login */
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; text-align: center; width: 360px; }
.login-box h1 { margin-bottom: 0.5rem; }
.login-box p { color: var(--text-muted); margin-bottom: 1rem; }
.login-box input { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 1rem; margin-bottom: 1rem; }
.login-box button, #new-task-btn, #logout-btn, #team-btn, form button, .btn { padding: 0.5rem 1.25rem; border: none; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.login-box button:hover, #new-task-btn:hover, #team-btn:hover, form button:hover, .btn:hover { opacity: 0.9; }
#logout-btn { background: var(--border); }
.btn-green { background: var(--green); }
.btn-small { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
.error { color: var(--red); margin-top: 0.5rem; }

/* Header */
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.header-left, .header-right { display: flex; align-items: center; gap: 1rem; }
header h1 { font-size: 1.2rem; }
#project-filter, #new-task-project { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.75rem; }
#user-name { color: var(--text-muted); }
.pending-badge { background: var(--orange); color: #fff; padding: 0.3rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.pending-badge:hover { opacity: 0.9; }

/* Main layout */
#main-layout { display: flex; height: calc(100vh - 57px); overflow: hidden; }

/* Board */
#board { display: flex; gap: 0.75rem; padding: 1rem 1rem; overflow-x: auto; flex: 1; transition: margin-right 0.3s; }
.column { flex: 1; min-width: 200px; max-width: 280px; }
.column h2 { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); }
.task-list { display: flex; flex-direction: column; gap: 0.5rem; min-height: 100px; padding: 0.25rem; border-radius: 6px; transition: background 0.2s; }
.task-list.drag-over { background: rgba(88, 166, 255, 0.08); }

/* Task Card */
.task-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; cursor: pointer; transition: border-color 0.2s, transform 0.1s; }
.task-card:hover { border-color: var(--accent); }
.task-card.dragging { opacity: 0.5; transform: rotate(2deg); }
.task-card .task-id { font-size: 0.75rem; color: var(--text-muted); }
.task-card .task-title { font-weight: 600; margin: 0.25rem 0; font-size: 0.85rem; }
.task-card .task-meta { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }

/* Progress bar */
.progress-bar { width: 100%; height: 4px; background: var(--border); border-radius: 2px; margin-top: 0.5rem; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.3s; }
.progress-text { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }

.badge { font-size: 0.65rem; padding: 0.12rem 0.35rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
.badge.critical { background: var(--red); color: #fff; }
.badge.high { background: var(--orange); color: #fff; }
.badge.normal { background: var(--border); color: var(--text-muted); }
.badge.low { background: var(--border); color: var(--text-muted); opacity: 0.6; }
.badge.blocked { background: var(--red); color: #fff; }
.badge.planning { background: var(--purple); color: #fff; }
.badge.awaiting { background: var(--yellow); color: #000; }
.assignee-tag { font-size: 0.7rem; color: var(--accent); }
.project-tag { font-size: 0.65rem; color: var(--text-muted); background: var(--bg); padding: 0.1rem 0.4rem; border-radius: 3px; }

/* Slide-in detail panel */
.detail-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border-left: 1px solid var(--border);
  transition: width 0.3s ease, min-width 0.3s ease;
  height: 100%;
  position: relative;
}
.detail-panel.open {
  width: 420px;
  min-width: 420px;
}
.detail-panel .panel-header {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem 0;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 10;
}
.panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}
.panel-close:hover { color: var(--text); }
#task-detail {
  padding: 0 1.25rem 1.5rem;
  overflow-y: auto;
  height: calc(100% - 40px);
}

/* Modal (for new task form only) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; width: 600px; max-height: 85vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }

/* Task detail */
#task-detail h2 { margin-bottom: 0.5rem; }
#task-detail .meta { color: var(--text-muted); margin-bottom: 1rem; }
#task-detail .section { margin-top: 1.25rem; }
#task-detail .section h3 { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; }

/* Subtasks */
.subtask-list { list-style: none; }
.subtask-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.subtask-item.done { opacity: 0.5; text-decoration: line-through; }
.subtask-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }
.subtask-status { font-size: 0.7rem; padding: 0.1rem 0.3rem; border-radius: 3px; }
.subtask-status.todo { background: var(--border); color: var(--text-muted); }
.subtask-status.doing { background: var(--accent); color: #fff; }
.subtask-status.done { background: var(--green); color: #fff; }

/* Approve button */
.approve-section { background: rgba(210, 153, 34, 0.1); border: 1px solid var(--yellow); border-radius: 8px; padding: 1rem; margin-top: 1rem; }
.approve-section h3 { color: var(--yellow); margin-bottom: 0.5rem; }

.note-item, .event-item { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.note-item .author, .event-item .actor { color: var(--accent); font-weight: 600; }
.note-item .time, .event-item .time { color: var(--text-muted); font-size: 0.75rem; }

/* Forms */
form label { display: block; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--text-muted); }
form input, form textarea, form select { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.9rem; }
form textarea { min-height: 80px; resize: vertical; }
form button { margin-top: 0.5rem; width: 100%; padding: 0.75rem; }
.checkbox-label { display: flex !important; align-items: center; gap: 0.5rem; flex-direction: row; }
.checkbox-label input { width: auto; margin: 0; }

/* Edit fields in detail panel */
.detail-title-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.task-id-large { font-size: 1rem; color: var(--text-muted); font-weight: 600; }
.edit-title { flex: 1; font-size: 1.1rem; font-weight: 700; background: var(--bg); border: 1px solid transparent; border-radius: 6px; color: var(--text); padding: 0.4rem 0.5rem; }
.edit-title:hover, .edit-title:focus { border-color: var(--border); }
.edit-row { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
.edit-row label { flex: 1; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
.edit-row select, .edit-row input { display: block; width: 100%; margin-top: 0.2rem; padding: 0.35rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.85rem; }
.edit-row select[multiple] { height: 70px; }
.edit-desc { display: block; width: 100%; margin-top: 0.2rem; padding: 0.4rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.85rem; min-height: 60px; resize: vertical; font-family: inherit; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.btn-danger { background: var(--red) !important; }

/* Team Panel (left sidebar) */
.team-panel {
  width: 0; min-width: 0; overflow: hidden;
  background: var(--surface); border-right: 1px solid var(--border);
  transition: width 0.3s ease, min-width 0.3s ease;
  height: 100%; position: relative;
}
.team-panel.open { width: 340px; min-width: 340px; }
.team-panel .panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem 0; position: sticky; top: 0;
  background: var(--surface); z-index: 10;
}
.panel-title { font-weight: 700; font-size: 0.95rem; }
#team-content { padding: 0.75rem 1rem 1.5rem; overflow-y: auto; height: calc(100% - 40px); }
.agent-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: 0.75rem; }
.agent-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.agent-name { font-size: 0.95rem; font-weight: 700; }
.agent-role { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; margin-left: 0.4rem; }
.agent-status { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 600; }
.agent-status.working { background: var(--green); color: #fff; }
.agent-status.planning { background: var(--purple); color: #fff; }
.agent-status.queued { background: var(--yellow); color: #000; }
.agent-status.idle { background: var(--border); color: var(--text-muted); }
.agent-stat { display: flex; gap: 1rem; margin: 0.5rem 0; }
.agent-stat-item { text-align: center; flex: 1; }
.agent-stat-item .num { font-size: 1.2rem; font-weight: 700; }
.agent-stat-item .label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; }
.agent-section { margin-top: 0.6rem; }
.agent-section h4 { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.3rem; }
.agent-task { font-size: 0.8rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.agent-task:last-child { border-bottom: none; }
.agent-task .task-link { color: var(--accent); cursor: pointer; font-size: 0.8rem; }
.agent-task .task-link:hover { text-decoration: underline; }
.agent-last-activity { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.4rem; }
#team-btn.active { background: var(--green); }

.add-note-form, .add-subtask-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.add-note-form input, .add-subtask-form input { flex: 1; padding: 0.4rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.add-note-form button, .add-subtask-form button { padding: 0.4rem 0.75rem; font-size: 0.8rem; width: auto; }