/* ─── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0d1117; color: #c9d1d9; line-height: 1.6; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Login ───────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); }
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 40px 32px; }
.login-header { text-align: center; margin-bottom: 32px; }
.login-header h1 { color: #58a6ff; font-size: 28px; margin-bottom: 4px; }
.login-header p { color: #8b949e; font-size: 14px; }

/* ─── Forms ───────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; color: #c9d1d9; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.form-group input, .form-group textarea { width: 100%; padding: 10px 12px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #c9d1d9; font-size: 14px; outline: none; transition: border-color 0.2s; }
.form-group input:focus, .form-group textarea:focus { border-color: #58a6ff; }
.alert.error { background: #3d1f1f; border: 1px solid #f85149; color: #f85149; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }

/* ─── Buttons ─────────────────────────────────────── */
.btn { display: inline-block; padding: 8px 16px; border: 1px solid #30363d; border-radius: 6px; background: #21262d; color: #c9d1d9; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.btn:hover { background: #30363d; text-decoration: none; }
.btn-primary { background: #238636; border-color: #2ea043; color: #fff; }
.btn-primary:hover { background: #2ea043; }
.btn-full { width: 100%; text-align: center; }
.btn-sm { padding: 4px 12px; font-size: 12px; }

/* ─── Navbar ──────────────────────────────────────── */
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: #161b22; border-bottom: 1px solid #30363d; position: sticky; top: 0; z-index: 100; }
.nav-brand { font-size: 18px; font-weight: 700; color: #58a6ff; }
.nav-brand a { color: inherit; }
.nav-center { color: #c9d1d9; font-weight: 500; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-user { color: #8b949e; font-size: 14px; }

/* ─── Dashboard ───────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; color: #c9d1d9; }
.page-header p { color: #8b949e; font-size: 14px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 16px; }
.project-card { display: block; background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 20px; transition: border-color 0.2s; }
.project-card:hover { border-color: #58a6ff; text-decoration: none; }
.project-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.project-card-header h2 { font-size: 18px; color: #c9d1d9; }
.project-desc { color: #8b949e; font-size: 14px; margin-bottom: 12px; }
.badge { padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.badge-active { background: #1f3d1f; color: #3fb950; }
.badge-complete { background: #1f3d3d; color: #58a6ff; }
.progress-bar { height: 6px; background: #30363d; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #238636; border-radius: 3px; transition: width 0.3s; }
.progress-text { font-size: 12px; color: #8b949e; margin-top: 4px; display: block; }
.empty-state { text-align: center; padding: 60px 20px; color: #8b949e; grid-column: 1 / -1; }

/* ─── Project Layout ──────────────────────────────── */
.project-layout { display: flex; height: calc(100vh - 53px); }
.sidebar { width: 280px; min-width: 280px; background: #161b22; border-right: 1px solid #30363d; overflow-y: auto; }
.sidebar-header { padding: 12px 16px; border-bottom: 1px solid #30363d; }
.sidebar-header h3 { font-size: 14px; color: #8b949e; font-weight: 500; }
.content-area { flex: 1; overflow-y: auto; padding: 0; }

/* ─── File Tree ───────────────────────────────────── */
.file-tree { padding: 8px 0; }
.tree-item { display: flex; align-items: center; gap: 6px; padding: 4px 16px; font-size: 13px; color: #c9d1d9; cursor: pointer; }
.tree-file { padding-left: 28px; }
.tree-file:hover { background: #1f2937; text-decoration: none; }
.tree-icon { font-size: 14px; flex-shrink: 0; }
.tree-dir > summary { list-style: none; }
.tree-dir > summary::-webkit-details-marker { display: none; }
.tree-dir > summary::before { content: '▶'; font-size: 10px; margin-right: 4px; color: #8b949e; transition: transform 0.2s; display: inline-block; }
.tree-dir[open] > summary::before { transform: rotate(90deg); }
.tree-children { padding-left: 12px; }
.tree-folder:hover { background: #1f2937; }

/* ─── File Viewer ─────────────────────────────────── */
.file-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #161b22; border-bottom: 1px solid #30363d; position: sticky; top: 0; z-index: 10; }
.file-breadcrumb { font-family: monospace; font-size: 13px; color: #8b949e; }
.code-viewer { padding: 0; }
.code-viewer pre { margin: 0; padding: 20px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.code-viewer code { font-family: 'SF Mono', 'Fira Code', monospace; }
.markdown-body { padding: 24px 32px; max-width: 900px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: #c9d1d9; border-bottom: 1px solid #30363d; padding-bottom: 8px; margin: 24px 0 16px; }
.markdown-body p { margin-bottom: 16px; }
.markdown-body table { border-collapse: collapse; margin: 16px 0; }
.markdown-body th, .markdown-body td { border: 1px solid #30363d; padding: 8px 12px; }
.markdown-body th { background: #161b22; }
.markdown-body code { background: #161b22; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.markdown-body pre code { background: none; padding: 0; }
.welcome-content { padding: 60px 40px; text-align: center; }
.welcome-content h2 { font-size: 24px; margin-bottom: 12px; }
.welcome-content .hint { color: #8b949e; margin-top: 24px; font-style: italic; }

/* ─── Comments ────────────────────────────────────── */
.comments-section { border-top: 1px solid #30363d; padding: 20px; max-width: 900px; }
.comments-section h3 { font-size: 16px; margin-bottom: 16px; color: #c9d1d9; }
.comment { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.comment-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.comment-header strong { color: #c9d1d9; font-size: 14px; }
.comment-time { color: #8b949e; font-size: 12px; }
.comment-body { color: #c9d1d9; font-size: 14px; }
.no-comments { color: #8b949e; font-style: italic; }
.comment-form { margin-top: 16px; }
.comment-form textarea { width: 100%; padding: 10px 12px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #c9d1d9; font-size: 14px; font-family: inherit; resize: vertical; outline: none; margin-bottom: 8px; }
.comment-form textarea:focus { border-color: #58a6ff; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .project-layout { flex-direction: column; }
  .sidebar { width: 100%; min-width: auto; max-height: 200px; border-right: none; border-bottom: 1px solid #30363d; }
}

/* Active file highlight */
.tree-file.tree-active { background: #1f6feb22; border-right: 2px solid #58a6ff; color: #58a6ff; font-weight: 500; }