/* shared.css — single source of styles for index.html and admin.html */

* { box-sizing: border-box; }
body { background: #0f172a; color: #e2e8f0; margin: 0; height: 100vh; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

/* Layout */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; background: #1e293b;
  border-right: 1px solid #334155; z-index: 40; transform: translateX(-100%);
  transition: transform 0.2s ease; display: flex; flex-direction: column; }
.sidebar.open { transform: translateX(0); }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 35; display: none; }
.sidebar-overlay.open { display: block; }

.main { height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.topbar { background: #1e293b; border-bottom: 1px solid #334155; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; }

.hamburger { background: none; border: none; color: #e2e8f0; padding: 4px; font-size: 20px; line-height: 1; }

@media (min-width: 768px) {
  .sidebar { transform: translateX(0); width: 300px; }
  .sidebar-overlay { display: none !important; }
  .main { margin-left: 300px; }
  .hamburger { display: none; }
}

/* Nav / project items */
.nav-item, .proj-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #0f172a; }
.nav-item:hover, .proj-item:hover { background: #334155; }
.nav-item.selected, .proj-item.selected { background: #334155; border-left: 3px solid #60a5fa; }

/* Sort buttons */
.sort-btn { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: none;
  color: #64748b; border: 1px solid #334155; cursor: pointer; }
.sort-btn:hover { color: #e2e8f0; border-color: #475569; }
.sort-btn.active { color: #60a5fa; border-color: #60a5fa; }

/* File links (user UI) */
.file-link { cursor: pointer; padding: 4px 0; }
.file-link:hover { color: #93c5fd; }
.file-link:active { color: #60a5fa; }

/* Cards & expandables */
.card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.expandable { cursor: pointer; flex: 1; }
.expandable:hover { background: #334155; border-radius: 6px; }
.expand-content { display: none; padding: 12px 0 0; border-top: 1px solid #334155; margin-top: 12px; }
.expand-content.open { display: block; }

/* Agent tags */
.agent-tag { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.agent-researcher { background: #1e3a5f; color: #93c5fd; }
.agent-analyst { background: #3b1764; color: #c4b5fd; }
.agent-builder { background: #065f46; color: #6ee7b7; }
.agent-critic { background: #7f1d1d; color: #fca5a5; }
.agent-editor { background: #713f12; color: #fde68a; }
.agent-reader { background: #164e63; color: #67e8f9; }
.agent-operator { background: #4c1d2e; color: #fda4af; }
.agent-hooks { background: #3b3b1a; color: #fde68a; }
.agent-mirror { background: #1e3a5f; color: #93c5fd; }
.agent-social { background: #164e63; color: #67e8f9; }
.agent-tailor { background: #3b1764; color: #c4b5fd; }
.agent-pm { background: #334155; color: #e2e8f0; }

/* Wave bar (user UI) */
.wave-bar { border-left: 2px solid #334155; margin-left: 6px; padding-left: 14px; }
.wave-dot { width: 10px; height: 10px; border-radius: 50%; background: #475569; display: inline-block; margin-right: 8px; margin-left: -21px; }

/* Markdown */
.markdown-body { line-height: 1.7; }
.markdown-body h1 { font-size: 1.4em; color: #f1f5f9; margin-top: 1.2em; margin-bottom: 0.5em; font-weight: 700; }
.markdown-body h2 { font-size: 1.2em; color: #f1f5f9; margin-top: 1em; margin-bottom: 0.4em; font-weight: 600; }
.markdown-body h3 { font-size: 1.05em; color: #e2e8f0; margin-top: 0.8em; margin-bottom: 0.3em; font-weight: 600; }
.markdown-body p { margin-bottom: 0.75em; }
.markdown-body ul, .markdown-body ol { margin-left: 1.5em; margin-bottom: 0.75em; }
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body code { background: #334155; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }
.markdown-body pre { background: #0f172a; padding: 12px; border-radius: 6px; overflow-x: auto; margin-bottom: 1em; border: 1px solid #334155; font-size: 0.85em; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote { border-left: 3px solid #475569; padding-left: 12px; color: #94a3b8; margin-bottom: 0.75em; }
.markdown-body hr { border-color: #334155; margin: 1.5em 0; }
.markdown-body table { border-collapse: collapse; margin-bottom: 1em; width: 100%; font-size: 0.9em; }
.markdown-body th, .markdown-body td { border: 1px solid #475569; padding: 4px 8px; text-align: left; }
.markdown-body th { background: #1e293b; }
.markdown-body strong { color: #f1f5f9; }
.markdown-body a { color: #60a5fa; }

/* Forms */
textarea, input[type="text"], select { background: #0f172a; border: 1px solid #475569; color: #e2e8f0; max-width: 100%; width: 100%; font-size: 16px; }
textarea:focus, input[type="text"]:focus, select:focus { outline: none; border-color: #60a5fa; }
.admin-input, .admin-select, .admin-textarea {
  background: #0f172a; border: 1px solid #334155; color: #e2e8f0;
  border-radius: 4px; padding: 6px 10px; width: 100%; font-size: 14px;
  font-family: inherit;
}
.admin-input:focus, .admin-select:focus, .admin-textarea:focus {
  border-color: #60a5fa; outline: none;
}
.admin-textarea { min-height: 120px; resize: vertical; }
.admin-select { -webkit-appearance: auto; appearance: auto; }

.form-row { margin-bottom: 10px; }
.form-label { font-size: 12px; color: #94a3b8; margin-bottom: 4px; display: block; }
.form-row-inline { display: flex; gap: 10px; }
.form-row-inline > div { flex: 1; }

/* Buttons */
button { cursor: pointer; }
.btn { padding: 6px 14px; border-radius: 4px; font-size: 13px; cursor: pointer; border: none; font-weight: 600; }
.btn-primary, .btn-blue { background: #2563eb; color: white; border: none; }
.btn-primary:hover, .btn-blue:active { background: #1d4ed8; }
.btn-gray { background: #334155; color: #e2e8f0; }
.btn-gray:active { background: #475569; }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-new { background: #2563eb; color: white; border: none; display: block; width: calc(100% - 32px);
  margin: 8px 16px; padding: 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.btn-new:hover { background: #1d4ed8; }

/* Scope badges */
.scope-pub { background: #065f46; color: #6ee7b7; }
.scope-prv { background: #334155; color: #94a3b8; }

/* Action buttons (edit/delete icons) */
.action-btn { color: #64748b; cursor: pointer; padding: 2px 6px; font-size: 14px; flex-shrink: 0; }
.action-btn:hover { color: #e2e8f0; }

/* Admin stats */
.stat-box { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 16px; text-align: center; }
.stat-num { font-size: 28px; font-weight: 700; color: #f1f5f9; }
.stat-label { font-size: 12px; color: #64748b; margin-top: 4px; }

/* Drop zone (user UI) */
.drop-zone { border: 1px dashed #475569; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; }
.drop-zone:hover { border-color: #60a5fa; }
@media (min-width: 768px) {
  .drop-zone { padding: 32px; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}