/* public/css/projects.css */

/* ── Project cards ──────────────────────────── */
.project-card {
  border: 1px solid var(--border);
  background: var(--row);
  margin-bottom: 18px;
  animation: fadeUp .25s ease both;
  transition: border-color .15s;
}
.project-card:hover { border-color: var(--border2) }

.project-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.project-title {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-bright);
  flex: 1;
  min-width: 0;
}

.lang-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid var(--border2);
  letter-spacing: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.lang-c        { color: #88aaff; border-color: #334488 }
.lang-asm      { color: #ffaa44; border-color: #664400 }
.lang-cpp      { color: #88ccff; border-color: #224466 }
.lang-python   { color: #aaffaa; border-color: #224422 }
.lang-js       { color: #ffee88; border-color: #665500 }
.lang-other    { color: var(--accent2); border-color: var(--border2) }

.status-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.status-wip       { color: #ffaa44; border-color: #664400; background: rgba(255,170,68,.06) }
.status-complete  { color: #88cc88; border-color: #336633; background: rgba(136,204,136,.06) }
.status-abandoned { color: var(--text-dim); border-color: var(--border); background: transparent }
.status-archived  { color: #8888cc; border-color: #333366; background: rgba(136,136,204,.06) }

.project-card-body { padding: 14px 16px }

.project-description {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 12px;
}
.project-description:empty { display: none }

/* Code block */
.project-code-wrap {
  position: relative;
  margin-bottom: 10px;
}

.project-code-wrap pre {
  margin: 0;
  border-radius: 0;
  border: 1px solid var(--border);
  max-height: 420px;
  overflow: auto;
}

.code-lang-label {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg2);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2px 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 1;
}

.copy-btn {
  position: absolute;
  bottom: 6px; right: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: color .12s, border-color .12s;
  z-index: 1;
}
.copy-btn:hover { color: var(--text-bright); border-color: var(--accent2) }
.copy-btn.copied { color: #88cc88; border-color: #336633 }

.project-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.15);
  flex-wrap: wrap;
}

.repo-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent2);
  letter-spacing: 1px;
}
.repo-link:hover { color: var(--text-bright) }
.repo-link::before { content: '⎋ ' }

/* ── highlight.js overrides — match our dark theme ── */
.hljs {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  padding: 14px 16px !important;
  tab-size: 4;
}

/* C keywords */
.hljs-keyword, .hljs-selector-tag  { color: #88aaff !important; font-weight: 400 !important }
/* types */
.hljs-type, .hljs-built_in         { color: #88ccff !important }
/* strings */
.hljs-string, .hljs-attr           { color: #aaddaa !important }
/* numbers */
.hljs-number, .hljs-literal        { color: #ffcc88 !important }
/* comments */
.hljs-comment                      { color: #555555 !important; font-style: italic !important }
/* preprocessor / meta */
.hljs-meta, .hljs-meta-keyword     { color: #cc88cc !important }
/* functions */
.hljs-title, .hljs-title.function_ { color: #ffffaa !important }
/* params */
.hljs-params                       { color: var(--text) !important }
/* punctuation */
.hljs-punctuation                  { color: var(--text-dim) !important }

/* ── Empty / loading states for projects ─── */
.projects-empty {
  text-align: center;
  padding: 50px 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 2px;
}

/* ── Admin project form extras ──────────────── */
.code-textarea {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  min-height: 300px !important;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
}