/* ==========================================================================
   Forschungsplattform · Design-System (app.css)
   Aus Design-Referenz.dc.html. Einbinden in base.html:
     <link rel="stylesheet" href="{{ url_for('static', path='css/app.css') }}">
   (oder Inhalt direkt in den <style>-Block von base.html kopieren)
   ========================================================================== */

/* ---------- 1 · Tokens ---------------------------------------------------- */
:root {
  /* Neutrals */
  --canvas:#e7e3dc;  --content-bg:#f5f2ec;  --surface:#faf8f4;  --panel:#fff;
  --hairline:#e6e0d5;  --hairline-soft:#f0ebe1;
  --ink:#1c1a17;  --ink-muted:#6b6459;  --ink-faint:#9a9182;

  /* Interaktion */
  --primary:#3a5f8a;  --primary-hover:#2a4467;  --primary-tint:#e8eef5;
  --danger:#b04a4a;   --danger-bg:#f5e0e0;      --danger-fg:#8a2c2c;

  /* Lebenszyklus: dot / bg / fg */
  --draft:#8a8577;   --draft-bg:#efece5;   --draft-fg:#57524a;
  --demo:#c98a2b;    --demo-bg:#f7edd8;    --demo-fg:#8a5e12;
  --live:#3f9160;    --live-bg:#e3f0e6;    --live-fg:#2c6b44;
  --paused:#cf7a3a;  --paused-bg:#f7e8da;  --paused-fg:#955122;
  --closed:#7a6a86;  --closed-bg:#ece7f0;  --closed-fg:#574763;

  /* Maße */
  --r-chip:999px; --r-btn:9px; --r-card:12px; --r-input:8px;

  color-scheme: light;
}

/* ---------- 2 · Basis & Typografie --------------------------------------- */
* { box-sizing:border-box; }
body {
  margin:0; background:var(--content-bg); color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif; line-height:1.6;
}
h1,h2,h3,h4,.serif {
  font-family:'Spectral', Georgia, serif; font-weight:600; letter-spacing:-.01em;
  margin:0 0 .4em;
}
h1{ font-size:29px; } h2{ font-size:19px; } h3{ font-size:16px; }
code,.mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-hover); }
.muted { color:var(--ink-muted); }
.faint { color:var(--ink-faint); }
.error { color:var(--danger-fg); }

.rp-eyebrow {
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}

/* ---------- 3 · App-Shell (Sidebar + Topbar) ----------------------------- */
.rp-app { display:flex; min-height:100vh; }

.rp-sidebar {
  width:250px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--hairline);
  display:flex; flex-direction:column; padding:16px 0;
}
.rp-brand {
  display:flex; align-items:center; gap:11px; padding:2px 20px 15px;
  border-bottom:1px solid #ece7dd; margin-bottom:12px;
}
.rp-brand__mark {
  width:28px; height:28px; border-radius:8px; background:var(--primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Spectral',serif; font-weight:700; font-size:16px; flex-shrink:0;
}
.rp-brand__name { font-family:'Spectral',serif; font-weight:600; font-size:15.5px; line-height:1.15; }
.rp-nav { padding:0 12px; display:flex; flex-direction:column; gap:2px; }
.rp-sidebar__section {
  padding:20px 20px 8px; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; justify-content:space-between; align-items:center;
}
.rp-projlist { padding:0 12px; display:flex; flex-direction:column; gap:1px; overflow:auto; }
.rp-user {
  margin-top:auto; padding:12px 16px 2px; border-top:1px solid #ece7dd;
  display:flex; align-items:center; gap:10px;
}
.rp-avatar {
  width:30px; height:30px; border-radius:999px; background:var(--primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; flex-shrink:0;
}

.rp-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.rp-topbar {
  height:58px; flex-shrink:0; background:var(--panel);
  border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; padding:0 26px;
}
.rp-content { flex:1; overflow:auto; padding:28px 32px; }

/* ---------- 4 · Navigation ----------------------------------------------- */
.rp-nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:8px; font-size:14px; color:var(--ink-muted);
}
.rp-nav-item:hover { background:#f1ede4; color:var(--ink); }
.rp-nav-item.is-active { background:#ece7dd; color:var(--ink); font-weight:600; }
.rp-nav-item .box { width:15px; height:15px; border-radius:3px; border:1.6px solid #b3ab9c; }
.rp-nav-item .box--round { border-radius:999px; }
.rp-nav-item.is-active .box { border-color:var(--primary); }

.rp-proj-item {
  display:flex; align-items:center; gap:9px; padding:8px 12px;
  border-radius:7px; font-size:13.5px; color:var(--ink-muted);
}
.rp-proj-item:hover { background:#f1ede4; }
.rp-proj-item.is-active { background:#f1ede4; color:var(--ink); font-weight:600; }

.rp-crumbs {
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-faint);
}
.rp-crumbs a { color:var(--ink-muted); }
.rp-crumbs .current { color:var(--ink); }

/* ---------- 5 · Status-Chip & Punkte ------------------------------------- */
.rp-chip {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; padding:5px 11px; border-radius:var(--r-chip);
}
.rp-chip .dot { width:8px; height:8px; border-radius:999px; }
.rp-chip--draft  { background:var(--draft-bg);  color:var(--draft-fg); }
.rp-chip--draft  .dot { background:var(--draft); }
.rp-chip--demo   { background:var(--demo-bg);   color:var(--demo-fg); }
.rp-chip--demo   .dot { background:var(--demo); }
.rp-chip--live   { background:var(--live-bg);   color:var(--live-fg); }
.rp-chip--live   .dot { background:var(--live); }
.rp-chip--paused { background:var(--paused-bg); color:var(--paused-fg); }
.rp-chip--paused .dot { background:var(--paused); }
.rp-chip--closed { background:var(--closed-bg); color:var(--closed-fg); }
.rp-chip--closed .dot { background:var(--closed); }

/* Neutraler Typ-Badge (experiment / pilot / abschlussarbeit) */
.rp-badge {
  display:inline-flex; align-items:center; font-size:12px;
  padding:3px 10px; border-radius:var(--r-chip);
  background:#f0ede6; color:var(--draft-fg);
}

/* Nur-Punkt (Sidebar, Zeilen) */
.rp-dot { width:9px; height:9px; border-radius:999px; display:inline-block; flex-shrink:0; }
.rp-dot--draft{ background:var(--draft); } .rp-dot--demo{ background:var(--demo); }
.rp-dot--live{ background:var(--live); }   .rp-dot--paused{ background:var(--paused); }
.rp-dot--closed{ background:var(--closed); }

/* live-Punkt pulsiert */
.rp-dot--pulse { animation:rp-pulse 2s ease-in-out infinite; }
@keyframes rp-pulse { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- 6 · Buttons -------------------------------------------------- */
.rp-btn {
  font:inherit; font-size:14px; font-weight:600; border-radius:var(--r-btn);
  padding:10px 18px; cursor:pointer; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:7px;
}
.rp-btn--primary { background:var(--primary); color:#fff; }
.rp-btn--primary:hover { background:var(--primary-hover); }
.rp-btn--secondary { background:var(--surface); border-color:var(--hairline); color:var(--primary); }
.rp-btn--secondary:hover { background:#f1ede4; }
.rp-btn--ghost { background:none; color:var(--primary); padding-inline:6px; }
.rp-btn--dashed { background:var(--surface); font-weight:500; font-size:13px;
  padding:8px 14px; border:1px dashed #cbc3b4; color:var(--primary); border-radius:var(--r-input); }
.rp-btn:disabled { opacity:.5; cursor:default; }

/* Status-Aktion: Farbe = Ziel-Status */
.rp-btn--status { font-size:13.5px; padding:9px 16px; }
.rp-btn--draft  { background:var(--draft-bg);  color:var(--draft-fg);  border-color:#cfc9bc; }
.rp-btn--demo   { background:var(--demo-bg);   color:var(--demo-fg);   border-color:#e3c98a; }
.rp-btn--live   { background:var(--live-bg);   color:var(--live-fg);   border-color:#a9d0b6; }
.rp-btn--paused { background:var(--paused-bg); color:var(--paused-fg); border-color:#e5b98a; }
.rp-btn--closed { background:var(--closed-bg); color:var(--closed-fg); border-color:#d6c9de; }
.rp-btn--danger { background:var(--danger-bg); color:var(--danger-fg); border-color:#dbb3b3; }

/* ---------- 7 · Karten & Tabellen ---------------------------------------- */
.rp-card { background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--r-card); padding:16px 18px; }

.rp-stat__label { font-size:12.5px; color:var(--ink-faint); margin-bottom:8px;
  display:flex; align-items:center; gap:6px; }
.rp-stat__value { font-family:'Spectral',serif; font-size:30px; font-weight:600; line-height:1; }
.rp-stat__value--live{ color:var(--live-fg); }
.rp-stat__value--warn{ color:var(--paused-fg); }

/* Aufmerksamkeits-Karte: farbiger Rand nach Dringlichkeit */
.rp-card--attention { border-radius:10px; border-left:3px solid var(--paused); }
.rp-card--attention.is-danger { border-left-color:var(--danger); }
.rp-card--attention.is-demo   { border-left-color:var(--demo); }
.rp-card--attention.is-paused { border-left-color:var(--paused); }

/* Listen-/Studienzeile */
.rp-list { background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--r-card); overflow:hidden; }
.rp-row { display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--hairline-soft); color:inherit; }
.rp-row:last-child { border-bottom:none; }
.rp-row:hover { background:var(--surface); }
.rp-row__main { display:flex; align-items:center; gap:14px; }
.rp-row__meta { display:flex; align-items:center; gap:14px; }
.rp-row__title { font-weight:600; font-size:14.5px; }
.rp-row__slug  { font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--ink-faint); margin-top:4px; }

/* Klassische Tabelle (falls beibehalten) */
table.rp-table { border-collapse:collapse; width:100%; }
table.rp-table th, table.rp-table td { text-align:left; padding:.55rem .7rem;
  border-bottom:1px solid var(--hairline-soft); }
table.rp-table th { font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }

/* Suchfeld in der Topbar */
.rp-search { display:flex; align-items:center; gap:8px; background:var(--content-bg);
  border:1px solid var(--hairline); border-radius:var(--r-input);
  padding:7px 12px; color:var(--ink-faint); font-size:13px; }

/* ---------- 8 · Lebenszyklus-Stepper ------------------------------------- */
.rp-stepper { display:flex; align-items:center; }
.rp-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.rp-step__dot { width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
  background:var(--surface); border:2px solid var(--hairline); color:var(--ink-faint); }
.rp-step__label { font-size:12.5px; color:var(--ink-faint); }
.rp-step__line { flex:1; height:2px; background:#e0dacf; margin-bottom:22px; }
.rp-step__line.is-filled { background:var(--live); }

/* Zustand: done — Häkchen in Statusfarbe */
.rp-step.is-done .rp-step__dot--draft { background:var(--draft-bg);  border-color:var(--draft);  color:var(--draft-fg); }
.rp-step.is-done .rp-step__dot--demo  { background:var(--demo-bg);   border-color:var(--demo);   color:var(--demo-fg); }
.rp-step.is-done .rp-step__dot--live  { background:var(--live-bg);   border-color:var(--live);   color:var(--live-fg); }
.rp-step.is-done .rp-step__label { color:var(--ink-muted); }

/* Zustand: current — vergrößert mit Glow */
.rp-step.is-current .rp-step__dot { width:42px; height:42px; border-width:2px; }
.rp-step.is-current .rp-step__dot--draft { background:var(--draft);  box-shadow:0 0 0 4px var(--draft-bg);  border-color:var(--draft); }
.rp-step.is-current .rp-step__dot--demo  { background:var(--demo);   box-shadow:0 0 0 4px var(--demo-bg);   border-color:var(--demo); }
.rp-step.is-current .rp-step__dot--live  { background:var(--live);   box-shadow:0 0 0 4px var(--live-bg);   border-color:var(--live); }
.rp-step.is-current .rp-step__dot--paused{ background:var(--paused); box-shadow:0 0 0 4px var(--paused-bg); border-color:var(--paused); }
.rp-step.is-current .rp-step__dot--closed{ background:var(--closed); box-shadow:0 0 0 4px var(--closed-bg); border-color:var(--closed); }
.rp-step.is-current .rp-step__label { font-weight:600; color:var(--ink); }
.rp-step.is-current .rp-step__dot .pip { width:11px; height:11px; border-radius:999px; background:#fff; }

/* ---------- 9 · Formulare -------------------------------------------------- */
.rp-input, select.rp-input, textarea.rp-input {
  font:inherit; font-size:14px; padding:9px 12px;
  border:1px solid var(--hairline); border-radius:var(--r-input);
  background:var(--panel); color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.rp-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }
.rp-input::placeholder { color:var(--ink-faint); }
textarea.rp-input { width:100%; resize:vertical; font-family:inherit; display:block; }
fieldset:disabled { opacity:.5; }

/* Datei-Auswahl: nativer "Durchsuchen…"-Button im rp-btn-Look */
input[type="file"] { font:inherit; font-size:13px; color:var(--ink-muted); max-width:100%; }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font:inherit; font-size:13px; font-weight:600; color:var(--primary);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-btn);
  padding:8px 14px; margin-right:10px; cursor:pointer; transition:background .12s;
}
input[type="file"]:hover::file-selector-button,
input[type="file"]::file-selector-button:hover,
input[type="file"]:hover::-webkit-file-upload-button,
input[type="file"]::-webkit-file-upload-button:hover { background:#f1ede4; }
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button { opacity:.5; cursor:not-allowed; }
fieldset:disabled .rp-check-pill label, fieldset:disabled .rp-segmented label { cursor:not-allowed; }

.rp-field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.rp-field__label { font-size:12.5px; color:var(--ink-muted); font-weight:500; }

/* Inline editierbare ID/Slug-Vorschau: sieht wie Text aus, bis man hineinklickt */
.rp-slug-edit { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-faint); }
.rp-slug-edit input {
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-muted);
  border:1px solid transparent; background:transparent; padding:3px 6px; border-radius:6px;
  width:20ch;
}
.rp-slug-edit input:hover, .rp-slug-edit input:focus {
  border-color:var(--hairline); background:var(--surface); color:var(--ink); outline:none;
}

/* Segmentierter Umschalter (z. B. "neu anlegen" / "verlinken") */
.rp-segmented {
  display:inline-flex; align-self:flex-start; width:fit-content;
  border:1px solid var(--hairline); border-radius:var(--r-btn); overflow:hidden;
}
.rp-segmented input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.rp-segmented label {
  padding:7px 14px; font-size:13px; font-weight:500; color:var(--ink-muted); cursor:pointer;
  background:var(--surface); transition:background .12s, color .12s;
}
.rp-segmented label + label { border-left:1px solid var(--hairline); }
.rp-segmented label.is-active { background:var(--primary); color:#fff; }

/* Chip-Toggle für Mehrfachauswahl (Sprachen, Module) */
.rp-check-pill { position:relative; display:inline-flex; }
.rp-check-pill input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.rp-check-pill label {
  display:inline-flex; align-items:center; padding:6px 13px; font-size:13px;
  border:1px solid var(--hairline); border-radius:var(--r-chip); color:var(--ink-muted);
  cursor:pointer; background:var(--surface); transition:.12s;
}
.rp-check-pill input:checked + label {
  background:var(--primary-tint); border-color:var(--primary); color:var(--primary-hover); font-weight:600;
}

/* Dezenter Icon-Textbutton (z. B. "+ weiteres Repo") */
.rp-icon-btn {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
  color:var(--primary); background:none; border:none; cursor:pointer; padding:4px 0;
}
.rp-icon-btn:hover { color:var(--primary-hover); }
.rp-icon-btn svg { width:14px; height:14px; flex-shrink:0; }

/* Ladeindikator (z. B. während einer 1-2s GitHub-Aktion) */
.rp-spinner {
  width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:999px; display:inline-block; animation:rp-spin .6s linear infinite; opacity:.75; vertical-align:-2px;
}
@keyframes rp-spin { to { transform:rotate(360deg); } }

/* ---------- 10 · Integrations-Karten (GitHub/OSF/Matrix je Projekt) ------- */
.rp-integrations { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:14px; margin-bottom:22px; }
.rp-integration-card__header { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.rp-integration-card__header svg { width:19px; height:19px; flex-shrink:0; color:var(--ink-muted); }
.rp-integration-card__header h3 { margin:0; font-size:15px; flex:1; }