/* ══════════════════════════════════════════════════════════════
   RheinAgent Systems · Neue Admin-Navigation
   Icon-Leiste (links) → Untermenue → eine Funktion pro Seite
   Alle Klassen mit ra- praefixiert, damit nichts Bestehendes bricht.
   ══════════════════════════════════════════════════════════════ */

#admin-view .ra-shell{
  display:flex; height:100vh; width:100%; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
#admin-view .ra-work{
  flex:1; display:flex; flex-direction:column; min-width:0;
  background:#f4f6fa;
}
#admin-view .ra-work > .topbar{
  flex:0 0 auto; position:static; padding:.6rem 1.25rem;
  border-bottom:1px solid #e5e7eb;
}
#admin-view .ra-work > .admin-main{
  flex:1; overflow-y:auto; max-width:none;
  margin:0; padding:1.5rem 1.5rem 4rem;
}
#admin-view .ra-canvas{max-width:1360px;margin:0 auto}

.ra-kicker{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#9aa4b8; font-weight:700;
}

/* ── Icon-Leiste ─────────────────────────────────────────── */
.ra-rail{
  width:68px; flex:0 0 68px; background:#0b1424;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 0 12px; gap:4px; position:relative; z-index:40;
  border-right:1px solid #1b2942;
}
.ra-rail-logo{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(145deg,#3f74ff,#1b41ab);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(47,98,244,.45); margin-bottom:16px;
}
.ra-rail-group{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}
.ra-rail-spacer{flex:1}
.ra-rail-btn{
  width:46px; height:44px; border-radius:12px; border:none; background:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:#7e8ca6; position:relative; transition:background .16s,color .16s; padding:0;
}
.ra-rail-btn svg{width:20px;height:20px}
.ra-rail-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.ra-rail-btn.on{background:rgba(47,98,244,.20);color:#fff}
.ra-rail-btn.on::before{
  content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:0 3px 3px 0; background:#3f74ff;
  box-shadow:0 0 12px #3f74ff;
}
.ra-rail-out:hover{background:rgba(239,68,68,.18);color:#fca5a5}
.ra-rail-dot{
  position:absolute; top:6px; right:6px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:#e11d48; color:#fff; font-size:.58rem; font-weight:700;
  display:none; align-items:center; justify-content:center; border:2px solid #0b1424;
}
.ra-rail-dot.show{display:flex}
.ra-tip{
  position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:#0d1526; color:#fff; padding:5px 9px; border-radius:7px;
  font-size:.74rem; font-weight:500; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.14s; z-index:60;
}
.ra-rail-btn:hover .ra-tip{opacity:1;transform:translateY(-50%) translateX(0)}
.ra-rail-btn.on .ra-tip{display:none}

/* ── Untermenue (Flyout) ─────────────────────────────────── */
.ra-flyout{
  width:250px; flex:0 0 250px; background:#fff; border-right:1px solid #e3e8f0;
  display:flex; flex-direction:column; position:relative; z-index:30;
  transition:margin-left .22s cubic-bezier(.4,0,.2,1),opacity .18s;
}
.ra-flyout.zu{margin-left:-250px;opacity:0;pointer-events:none}
.ra-flyout-head{
  padding:16px 15px 12px; border-bottom:1px solid #eef1f6;
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
}
.ra-flyout-head h2{font-size:.95rem;font-weight:700;color:#0d1526;line-height:1.3;margin:0}
.ra-flyout-head .ra-kicker{display:block;margin-bottom:5px}
.ra-pin{
  width:28px;height:28px;border-radius:7px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#96a1b5;flex:0 0 auto;transition:.15s;
}
.ra-pin svg{width:15px;height:15px}
.ra-pin:hover{background:#f5f7fb;color:#3d4a60}
.ra-pin.on{background:#dbe5ff;color:#1b41ab}
.ra-flyout-body{flex:1;overflow-y:auto;padding:10px 9px 16px}
.ra-fly-label{padding:12px 8px 6px}
.ra-fly-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:9px; border:none; background:none; cursor:pointer;
  color:#3d4a60; font-size:.82rem; font-weight:500; text-align:left;
  transition:background .14s,color .14s; font-family:inherit;
}
.ra-fly-item:hover{background:#f5f7fb;color:#0d1526}
.ra-fly-item.on{background:#dbe5ff;color:#1b41ab;font-weight:600}
.ra-fly-item svg{width:16px;height:16px;flex:0 0 16px;opacity:.8}
.ra-fly-item.on svg{opacity:1}
.ra-fly-item .ra-fi-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra-fly-count{
  font-size:.66rem; font-weight:700; color:#6b7890; background:#f2f5fa;
  padding:2px 7px; border-radius:6px; border:1px solid #eef1f6; min-width:20px; text-align:center;
}
.ra-fly-item.on .ra-fly-count{background:#fff;border-color:transparent;color:#1b41ab}
.ra-fly-count.hot{background:#fce4ea;color:#d13b5e;border-color:transparent}
.ra-flyout-foot{padding:11px;border-top:1px solid #eef1f6}
.ra-hint{
  display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;
  background:#f5f7fb;font-size:.72rem;color:#6b7890;
}
.ra-hint kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; font-weight:700;
  background:#fff;border:1px solid #e3e8f0;border-bottom-width:2px;border-radius:5px;
  padding:2px 5px;color:#3d4a60;
}

/* ── Topbar: Brotkruemelpfad ─────────────────────────────── */
.ra-tb-toggle{
  width:32px;height:32px;border-radius:8px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#6b7890;transition:.15s;flex:0 0 auto;
}
.ra-tb-toggle svg{width:17px;height:17px}
.ra-tb-toggle:hover{background:#f1f5f9;color:#0d1526}
.ra-crumbs{display:flex;align-items:center;gap:7px;font-size:.82rem;color:#6b7890;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra-crumbs .ra-sep{color:#c3cbd9;flex:0 0 auto}
.ra-crumbs > span{flex:0 0 auto}
.ra-crumb-cur{color:#0d1526;font-weight:650}
@media (max-width:1000px){ .ra-crumb-root,.ra-sep-1{display:none} }
@media (max-width:900px){ #admin-view .ra-work > .topbar .role-badge{display:none} }

/* ── Seiten ──────────────────────────────────────────────── */
.ra-panel{display:none}
.ra-panel.is-on{display:block;animation:ra-rise .26s cubic-bezier(.2,.7,.3,1)}
@keyframes ra-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ra-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:1.25rem;flex-wrap:wrap;
}
.ra-page-head h1{font-size:1.4rem;font-weight:700;color:#0d1526;letter-spacing:-.02em;margin:0}
.ra-lead{color:#6b7890;font-size:.84rem;margin:.2rem 0 0}
.ra-head-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* ── Kennzahlen ──────────────────────────────────────────── */
.ra-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:1.25rem}
.ra-kpi{
  background:#fff;border:1px solid #e3e8f0;border-radius:12px;padding:15px 16px;
  position:relative;overflow:hidden;transition:.18s;cursor:pointer;text-align:left;
  font-family:inherit;display:block;width:100%;
}
.ra-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,21,38,.09);border-color:#b9c4d6}
.ra-kpi::after{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:#2f62f4}
.ra-kpi.g::after{background:#0f9d6e} .ra-kpi.a::after{background:#b7791f} .ra-kpi.v::after{background:#7c3aed}
.ra-kpi-val{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;color:#0d1526;margin:8px 0 2px;line-height:1}
.ra-kpi-sub{font-size:.7rem;color:#96a1b5}
@media (max-width:1100px){ .ra-kpis{grid-template-columns:repeat(2,1fr)} }

/* ── Zwei Spalten ────────────────────────────────────────── */
.ra-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
@media (max-width:1100px){ .ra-cols{grid-template-columns:1fr} }

/* ── Schnellzugriff ──────────────────────────────────────── */
.ra-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:.9rem}
.ra-quick-tile{
  border:1px solid #e3e8f0;border-radius:12px;padding:13px;background:#f9fafc;
  text-align:left;transition:.16s;cursor:pointer;font-family:inherit;
}
.ra-quick-tile:hover{background:#fff;border-color:#2f62f4;transform:translateY(-2px);box-shadow:0 4px 14px rgba(13,21,38,.07)}
.ra-quick-tile svg{width:17px;height:17px;color:#2f62f4;margin-bottom:8px;display:block}
.ra-quick-tile b{display:block;font-size:.78rem;font-weight:650;color:#0d1526;margin-bottom:2px}
.ra-quick-tile span{font-size:.7rem;color:#6b7890;line-height:1.4;display:block}

/* ── Braucht Aufmerksamkeit ──────────────────────────────── */
.ra-attn{margin-top:.6rem}
.ra-attn-row{
  display:flex;align-items:center;gap:11px;padding:11px 2px;
  border-bottom:1px solid #eef1f6;cursor:pointer;
}
.ra-attn-row:last-child{border-bottom:none}
.ra-attn-row:hover{background:#f9fafc}
.ra-attn-ico{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  background:#dbe5ff;color:#1b41ab;
}
.ra-attn-ico.a{background:#fdf1da;color:#b7791f}
.ra-attn-ico.r{background:#fce4ea;color:#d13b5e}
.ra-attn-ico.g{background:#dff5ec;color:#0f9d6e}
.ra-attn-txt{flex:1;font-size:.82rem;color:#3d4a60}
.ra-attn-txt b{color:#0d1526;font-weight:650}
.ra-attn-num{font-size:.7rem;font-weight:700;color:#6b7890;background:#f2f5fa;padding:3px 9px;border-radius:99px}

/* ── Schnellsuche (Strg+K) ───────────────────────────────── */
.ra-cmdk{
  position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(10,17,30,.5);align-items:flex-start;justify-content:center;padding-top:12vh;
}
.ra-cmdk.on{display:flex}
.ra-cmdk-box{
  width:min(540px,92vw);background:#fff;border:1px solid #e3e8f0;border-radius:16px;
  box-shadow:0 24px 60px rgba(13,21,38,.28);overflow:hidden;
}
.ra-cmdk-in{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid #eef1f6}
.ra-cmdk-in svg{width:17px;height:17px;color:#96a1b5;flex:0 0 auto}
.ra-cmdk-in input{flex:1;border:none;outline:none;background:none;font-size:.95rem;font-family:inherit;color:#0d1526}
.ra-cmdk-list{max-height:320px;overflow-y:auto;padding:7px}
.ra-cmd-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:9px;
  font-size:.84rem;color:#3d4a60;text-align:left;border:none;background:none;cursor:pointer;font-family:inherit;
}
.ra-cmd-item:hover,.ra-cmd-item.sel{background:#dbe5ff;color:#1b41ab}
.ra-cmd-item svg{width:16px;height:16px;opacity:.75;flex:0 0 auto}
.ra-cmd-item .ra-c-sec{margin-left:auto;font-size:.7rem;color:#96a1b5}

/* Abmelden sitzt jetzt unten in der Icon-Leiste – oben doppelt waere unnoetig */
#admin-view .ra-work > .topbar .logout-btn{display:none}
#admin-view .ra-work > .topbar .topbar-left{gap:.6rem;min-width:0;flex:1}

/* ── Karten im neuen Raster ──────────────────────────────── */
#admin-view .ra-panel .card{margin-top:0}
#admin-view .ra-panel > .card{box-shadow:0 1px 3px rgba(13,21,38,.05)}

/* ── Schmale Bildschirme ─────────────────────────────────── */
.ra-scrim{
  position:fixed; inset:0; background:rgba(10,17,30,.35); z-index:25; display:none;
}
@media (max-width:900px){
  .ra-flyout{position:absolute;left:68px;top:0;bottom:0;box-shadow:0 12px 40px rgba(13,21,38,.18)}
  #admin-view .ra-work > .admin-main{padding:1rem .9rem 4rem}
  .ra-scrim.on{display:block}
}