/* General HQ Dashboard - Custom Styles */

/* ─── Sidebar nav links ─── */
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #9ca3af;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.nav-link:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #c7d2fe;
}
.nav-link.active {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}
.nav-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.nav-link.active svg, .nav-link:hover svg {
    opacity: 1;
}

/* ─── Stat cards ─── */
.stat-card {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.15s;
}
.stat-card:hover {
    border-color: #374151;
}

/* ─── Agent cards ─── */
.agent-card {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 20px;
    transition: all 0.15s ease;
    text-decoration: none;
}
.agent-card:hover {
    border-color: #4f46e5;
    background: #131a2a;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
}

/* ─── Status badges ─── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-active    { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.status-idle      { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.status-error     { background: rgba(239, 68, 68, 0.15);  color: #f87171; }
.status-pending   { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.status-completed { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.status-done      { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.status-in-progress { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.status-in_progress { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.status-failed    { background: rgba(239, 68, 68, 0.15);  color: #f87171; }
.status-paused    { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }

/* ─── Priority badges ─── */
.priority-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.priority-red    { background: rgba(239, 68, 68, 0.2);    color: #f87171; }
.priority-orange { background: rgba(249, 115, 22, 0.2);   color: #fb923c; }
.priority-yellow { background: rgba(251, 191, 36, 0.2);   color: #fbbf24; }
.priority-green  { background: rgba(34, 197, 94, 0.2);    color: #4ade80; }
.priority-gray   { background: rgba(107, 114, 128, 0.2);  color: #9ca3af; }

/* ─── Tags ─── */
.tag {
    display: inline-flex;
    padding: 2px 8px;
    background: rgba(55, 65, 81, 0.6);
    color: #9ca3af;
    border-radius: 20px;
    font-size: 11px;
    border: 1px solid #374151;
}

/* ─── Category badge ─── */
.category-badge {
    display: inline-flex;
    padding: 2px 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(99, 102, 241, 0.2);
    white-space: nowrap;
}

/* ─── Filter selects ─── */
.filter-select {
    background: #1f2937;
    border: 1px solid #374151;
    color: #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    min-width: 140px;
}
.filter-select:focus {
    border-color: #6366f1;
}
.filter-select option {
    background: #1f2937;
}

/* ─── Kanban ─── */
.kanban-col {
    background: #0f1623;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 16px;
    min-height: 400px;
}

.task-card {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 12px;
    transition: all 0.12s ease;
    text-decoration: none;
}
.task-card:hover {
    border-color: #6366f1;
    background: #131a2a;
    transform: translateY(-1px);
}

/* ─── Markdown body (for AGENT.md rendering) ─── */
.markdown-body h1 { font-size: 1.5rem; font-weight: 700; color: #f9fafb; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid #1f2937; }
.markdown-body h2 { font-size: 1.2rem; font-weight: 600; color: #e5e7eb; margin: 24px 0 12px; }
.markdown-body h3 { font-size: 1rem; font-weight: 600; color: #d1d5db; margin: 16px 0 8px; }
.markdown-body p  { color: #9ca3af; margin: 0 0 10px; line-height: 1.6; }
.markdown-body ul { list-style: disc; padding-left: 20px; margin: 0 0 10px; color: #9ca3af; }
.markdown-body li { margin-bottom: 4px; }
.markdown-body code { background: #1f2937; color: #a5b4fc; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-family: 'Courier New', monospace; }
.markdown-body pre { background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: 14px; overflow-x: auto; margin: 10px 0; }
.markdown-body pre code { background: none; padding: 0; color: #d1d5db; font-size: 12px; }
.markdown-body a { color: #818cf8; text-decoration: underline; }
.markdown-body a:hover { color: #a5b4fc; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.markdown-body th { background: #1f2937; color: #9ca3af; padding: 8px 12px; text-align: left; border-bottom: 1px solid #374151; }
.markdown-body td { padding: 8px 12px; border-bottom: 1px solid #1f2937; color: #9ca3af; }
.markdown-body blockquote { border-left: 3px solid #6366f1; padding-left: 12px; color: #9ca3af; margin: 10px 0; font-style: italic; }
.markdown-body strong { color: #e5e7eb; font-weight: 600; }
.markdown-body hr { border: none; border-top: 1px solid #1f2937; margin: 20px 0; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f1623; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ─── Line clamp ─── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Responsive sidebar ─── */
@media (max-width: 768px) {
    .sidebar { width: 56px; }
    .sidebar .nav-link span,
    .sidebar .text-xs,
    .sidebar .font-bold,
    .sidebar .text-2xl ~ div { display: none; }
    .sidebar .nav-link { justify-content: center; padding: 10px; }
    .sidebar .p-5 { padding: 10px; justify-content: center; }
}