/* Eternity Cockpit — dunkles Cockpit, eigener Look */
:root{
  --bg:#0d1117; --bg2:#131a24; --panel:#161e2a; --panel2:#1b2532;
  --line:#243244; --line2:#2e3f54;
  --tx:#e7eef7; --tx2:#9fb0c3; --tx3:#6b7d92;
  --acc:#35d0b6; --acc2:#2aa2e0; --warn:#e0a23a; --bad:#e0524f; --good:#3fbf87;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--tx); display:flex;
  -webkit-font-smoothing:antialiased;
}

/* ---- Sidebar ---- */
.side{
  width:246px; flex:0 0 246px; background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-right:1px solid var(--line); height:100vh; position:sticky; top:0;
  padding:20px 14px; overflow-y:auto;
}
.brand{font-weight:800; font-size:20px; letter-spacing:.3px; color:var(--tx); margin:2px 8px 22px; display:flex; align-items:baseline; gap:8px}
.brand sup{color:var(--acc); font-size:12px; font-weight:800}
.brand span{color:var(--tx2); font-weight:600; font-size:14px; letter-spacing:.5px; text-transform:uppercase}
.brand--big{font-size:30px; justify-content:center; margin-bottom:6px}

.navgroup{margin-bottom:18px}
.navhead{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx3);
  padding:4px 10px 8px; display:flex; align-items:center; gap:6px; font-weight:700;
}
.navhead .lock{font-size:10px; opacity:.7}
.navitem{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px;
  color:var(--tx2); text-decoration:none; font-size:14px; font-weight:500; margin:1px 0;
  transition:background .12s,color .12s;
}
.navitem .ic{width:18px; text-align:center; opacity:.9}
.navitem:hover{background:var(--panel); color:var(--tx)}
.navitem.is-active{background:var(--panel2); color:var(--tx); box-shadow:inset 2px 0 0 var(--acc)}
.navempty{padding:6px 10px; font-size:12.5px; color:var(--tx3); font-style:italic}

/* ---- Main ---- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{
  height:56px; flex:0 0 56px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  background:var(--bg2); position:sticky; top:0; z-index:5;
}
.crumb{font-weight:700; font-size:15px}
.who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tx2)}
.who em{color:var(--tx3); font-style:normal}
.dot{width:9px; height:9px; border-radius:50%; background:var(--tx3)}
.dot--admin{background:var(--acc)} .dot--maler{background:var(--acc2)}
.logout{margin-left:8px; color:var(--tx3); text-decoration:none; border:1px solid var(--line2); padding:4px 10px; border-radius:8px}
.logout:hover{color:var(--tx); border-color:var(--acc)}

.content{padding:24px; overflow-y:auto}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.cardhead{padding:18px 20px; border-bottom:1px solid var(--line); position:relative}
.cardhead h1{font-size:18px; font-weight:700}
.cardhead p{color:var(--tx2); font-size:13px; margin-top:3px}
.cardhead .count{position:absolute; right:20px; top:18px; background:var(--panel2); color:var(--tx2);
  border:1px solid var(--line2); border-radius:20px; padding:2px 11px; font-size:12px; font-weight:700}

/* ---- Table ---- */
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; padding:11px 16px; color:var(--tx3); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:11px 16px; border-bottom:1px solid var(--line); color:var(--tx2); vertical-align:top}
tbody tr:hover{background:var(--bg2)}
td strong{color:var(--tx); font-weight:650}
.empty{padding:22px 20px; color:var(--tx3); font-style:italic}

/* ---- Badges (Status) ---- */
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:650;
  background:var(--panel2); color:var(--tx2); border:1px solid var(--line2); white-space:nowrap}
.badge--live,.badge--gelockt,.badge--aktiv,.badge--genehmigt,.badge--pass{background:rgba(63,191,135,.12); border-color:rgba(63,191,135,.4); color:var(--good)}
.badge--geplant,.badge--entwurf,.badge--vorschlag,.badge--neu,.badge--akquise{background:rgba(224,162,58,.12); border-color:rgba(224,162,58,.4); color:var(--warn)}
.badge--verloren,.badge--tot,.badge--abgelehnt{background:rgba(224,82,79,.12); border-color:rgba(224,82,79,.4); color:var(--bad)}

/* ---- Login ---- */
.loginbody{display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%,#16202e,var(--bg))}
.logincard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:34px 30px;
  width:340px; display:flex; flex-direction:column; gap:12px; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.logincard .sub{text-align:center; color:var(--tx2); margin-top:-4px; margin-bottom:6px}
.logincard label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--tx2); font-weight:600}
.logincard input{background:var(--bg); border:1px solid var(--line2); color:var(--tx); border-radius:9px;
  padding:10px 12px; font-size:15px; outline:none}
.logincard input:focus{border-color:var(--acc)}
.logincard button{margin-top:8px; background:var(--acc); color:#04211c; border:0; border-radius:9px;
  padding:11px; font-size:15px; font-weight:750; cursor:pointer}
.logincard button:hover{filter:brightness(1.06)}
.logincard .hint{text-align:center; color:var(--tx3); font-size:11.5px; margin-top:4px}
.logincard .err{background:rgba(224,82,79,.14); border:1px solid rgba(224,82,79,.4); color:#f0a; color:var(--bad);
  padding:8px 12px; border-radius:8px; font-size:13px; text-align:center}

code{background:var(--bg); border:1px solid var(--line2); border-radius:5px; padding:1px 5px; font-size:12px; color:var(--acc)}

/* ---- Nav-Extras ---- */
.navitem .lbl{flex:1}
.navitem .pin{font-size:10px; opacity:.65}
.navadd{padding:6px 10px; font-size:12px; color:var(--tx3); font-style:italic; opacity:.7}

/* ---- Chat ---- */
.chat .cardhead .pin{font-size:11px; color:var(--tx3); font-weight:600; margin-left:6px}
.chatlog{max-height:calc(100vh - 300px); min-height:220px; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:12px}
.chatempty{color:var(--tx3); font-style:italic; margin:auto; text-align:center; padding:30px 10px}
.msg{display:flex; flex-direction:column; max-width:78%}
.msg--me{align-self:flex-end; align-items:flex-end}
.msg--agent,.msg--error{align-self:flex-start; align-items:flex-start}
.msg .bubble{padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.5; white-space:normal}
.msg--me .bubble{background:var(--acc); color:#04211c; border-bottom-right-radius:4px; font-weight:500}
.msg--agent .bubble{background:var(--panel2); color:var(--tx); border:1px solid var(--line2); border-bottom-left-radius:4px}
.msg--error .bubble{background:rgba(224,82,79,.12); border:1px solid rgba(224,82,79,.4); color:var(--bad)}
.msg time{font-size:10.5px; color:var(--tx3); margin:3px 6px 0}
.chatinput{display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); background:var(--bg2)}
.chatinput textarea{flex:1; resize:none; overflow-y:auto; min-height:52px; background:var(--bg); border:1px solid var(--line2); color:var(--tx);
  border-radius:10px; padding:10px 12px; font:14px/1.5 inherit; outline:none}
.chatinput textarea:focus{border-color:var(--acc)}
.chatinput button{align-self:flex-end; background:var(--acc); color:#04211c; border:0; border-radius:10px;
  padding:11px 20px; font-weight:700; font-size:14px; cursor:pointer}
.chatinput button:hover{filter:brightness(1.06)}
.chatinput button:disabled{opacity:.5; cursor:default}
.msg--agent.typing .bubble{display:inline-flex; align-items:center; gap:9px; color:var(--tx2)}
.msg--agent.typing .el{font-size:12.5px; font-style:italic}
.dots{display:inline-flex; gap:4px}
.dots i{width:6px; height:6px; border-radius:50%; background:var(--acc); animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,70%,100%{opacity:.25; transform:translateY(0)} 35%{opacity:1; transform:translateY(-2px)}}
.msg--agent.typing .bubble{flex-wrap:wrap}
.tools{display:inline-flex; flex-wrap:wrap; gap:5px}
.toolchip{font-size:11px; font-weight:600; color:var(--acc); background:rgba(53,208,182,.1);
  border:1px solid rgba(53,208,182,.35); border-radius:20px; padding:2px 9px; white-space:nowrap;
  animation:pop .25s ease}
@keyframes pop{from{transform:scale(.8); opacity:0}to{transform:scale(1); opacity:1}}
.usedtools{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; font-size:10.5px; color:var(--tx3)}
.usedtools{opacity:.85}

@media(max-width:720px){
  body{flex-direction:column}
  .side{width:100%; height:auto; position:static; flex-basis:auto; display:flex; flex-wrap:wrap; gap:10px}
  .navgroup{margin:0; flex:1 1 40%}
}

/* Avatare Flotte v2 (18.07.2026): Menue klein + Rollen-Icon daneben */
.nav-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line2,#2a2a3a)}
.navitem .ic--role{font-size:.8rem;width:auto;margin-left:-2px}

/* Chat-Links hellgelb (18.07.2026) — dunkles Blau war auf dem Hintergrund unlesbar */
.bubble a{color:#ffd166;text-decoration:underline;text-underline-offset:2px}
.bubble a:hover{color:#ffe9a8}

/* Klappbares Menue (18.07.2026) */
details.navgroup>summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px}
details.navgroup>summary::-webkit-details-marker{display:none}
details.navgroup>summary:hover{color:var(--tx)}
.navhead .chev{margin-left:auto; font-size:10px; opacity:.6; transition:transform .15s}
details[open]>.navhead .chev{transform:rotate(90deg)}