/*
 * Shell-Styles (Topbar, Filter, Login) + Theme-Tokens.
 * Die Projektübersicht bringt nur Komponenten-CSS aus render_fragment mit und
 * nutzt DIESE Tokens — so schaltet der Dark-Mode global (Topbar + Inhalt).
 */
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#1c2024; --muted:#6b7280; --line:#e5e7eb;
  --red:#e3001b; --chip:#f1f3f5; --hover:#f9fafb; --ok:#16a34a;
  --warn-bg:#fff7ed; --warn-line:#fed7aa; --warn-ink:#9a3412;
}
:root[data-theme="dark"]{
  --bg:#0f1419; --card:#161b22; --ink:#e6edf3; --muted:#8b949e; --line:#2d333b;
  --red:#ff4d5e; --chip:#21262d; --hover:#1c2128; --ok:#3fb950;
  --warn-bg:#3a2a12; --warn-line:#7c5314; --warn-ink:#f0b86e;
}

/* Der Fix für den Login-Bug: .centered{display:flex} hatte [hidden] überstimmt. */
[hidden]{ display:none !important; }

*{ box-sizing:border-box; }
body{ margin:0; font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); }

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.6rem;
  background:var(--card); border-bottom:1px solid var(--line);
  padding:.6rem 1.5rem;
}
.brand{ font-size:1.1rem; font-weight:600; white-space:nowrap; }
.brand b{ color:var(--red); }
.spacer{ flex:1; }

.tabbar{
  position:sticky; top:3.2rem; z-index:40;
  display:flex; gap:.2rem;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:.3rem 1.5rem 0;
}
.tab{
  font:inherit; font-size:.88rem; cursor:pointer;
  background:transparent; color:var(--muted);
  border:none; border-bottom:2px solid transparent; padding:.5rem .9rem;
}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--red); border-bottom-color:var(--red); font-weight:600; }

.search{
  font:inherit; font-size:.85rem; min-width:14rem;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:.4rem .7rem;
}
.search:focus{ outline:none; border-color:var(--red); }
.select{
  font:inherit; font-size:.85rem;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem;
}

.btn{
  font:inherit; font-size:.85rem; cursor:pointer; white-space:nowrap;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:.4rem .9rem; transition:.15s;
}
.btn:hover{ border-color:var(--red); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn.icon{ padding:.4rem .6rem; }
.btn.primary{ background:var(--red); color:#fff; border-color:var(--red); font-weight:600; }
.btn.primary:hover{ filter:brightness(.93); }

.centered{ min-height:70vh; display:flex; align-items:center; justify-content:center; }
.login-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:2.5rem 2.8rem; text-align:center; max-width:420px;
  box-shadow:0 4px 24px rgba(0,0,0,.05);
}
.login-card h2{ margin:0 0 .5rem; }
.login-card p{ color:var(--muted); margin:0 0 1.5rem; line-height:1.5; }

.ce-msg{ max-width:640px; margin:4rem auto; text-align:center; color:var(--muted); padding:2rem; }

/* Chatbot */
.chat-hint{ color:var(--muted); font-size:.85rem; margin:1rem 0; }
.chatlog{ display:flex; flex-direction:column; gap:.6rem; margin:1rem 0; min-height:38vh; }
.msg{ max-width:80%; padding:.6rem .9rem; border-radius:12px; font-size:.9rem; white-space:pre-wrap; line-height:1.5; }
.msg.user{ align-self:flex-end; background:var(--red); color:#fff; border-bottom-right-radius:3px; }
.msg.ai{ align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:3px; }
.chatform{ display:flex; gap:.5rem; position:sticky; bottom:1rem; background:var(--bg); padding:.5rem 0; }
.chatform .search{ flex:1; min-width:0; }

@media(max-width:760px){
  .search{ min-width:8rem; }
  .brand{ display:none; }
}