/* ===== User & Rollen – Styles ===== */
#auth-user-badge{
  display:flex;align-items:center;gap:.6rem;margin-left:10px;
  padding:.35rem .6rem;border-radius:999px;background:#1118270d;
  border:1px solid #e6e7ef;font-size:.92rem;box-shadow:0 1px 2px rgba(0,0,0,.04)
}
#auth-user-badge img{width:24px;height:24px;border-radius:999px}
#auth-user-badge .name{font-weight:700;letter-spacing:.2px}
#auth-user-badge .role{font-size:.75rem;opacity:.65;text-transform:uppercase}

.auth-btn{padding:8px 12px;border-radius:10px;border:1px solid #e6e7ef;background:#fff;cursor:pointer}
.auth-btn.primary{background:#111827;color:#fff;border-color:#111827}
.auth-btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}

/* --- Modal --- */
.auth-modal-backdrop{position:fixed;inset:0;background:rgba(9,12,22,.45);
  backdrop-filter:saturate(110%) blur(2px);
  display:none;align-items:center;justify-content:center;z-index:9999}
.auth-modal{
  width:min(1000px,96vw);max-height:92vh;overflow:hidden;border-radius:16px;
  background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.28); border:1px solid #edf0f6
}
.auth-modal header{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:16px 18px;border-bottom:1px solid #edf0f6}
.auth-modal header h3{margin:0;font-size:1.05rem;letter-spacing:.2px}

/* Layout */
.auth-modal .body{
  display:grid; grid-template-columns:300px 1fr; gap:0; min-height:460px;
}
.auth-pane{padding:16px}
.auth-list{border-right:1px solid #edf0f6;background:#fafbff}
.auth-form{background:#fff}

/* Liste */
.auth-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.auth-user-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto;padding-right:4px}
.auth-item{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  border:1px solid #edf0f6;border-radius:12px;background:#fff;padding:10px 12px
}
.auth-item .title{font-weight:600}
.auth-item .sub{font-size:.8rem;opacity:.7}
.auth-pill{padding:.18rem .5rem;border-radius:999px;border:1px solid #e6e7ef;background:#fafbff;font-size:.72rem}

/* Formular */
.auth-form form{display:flex;flex-direction:column;gap:10px}
.auth-form label{font-size:.85rem;color:#374151;margin-left:2px}
.auth-inp,.auth-sel{
  width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fbfbfe
}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-actions{display:flex;gap:8px;align-items:center}

/* Footer-Hinweis */
.auth-help{font-size:.82rem;color:#6b7280}

/* Responsive */
@media (max-width:900px){ .auth-modal .body{ grid-template-columns:1fr } .auth-list{border-right:0;border-bottom:1px solid #edf0f6} }
/* ==== Sidebar-Userkarte unten links ==== */
aside.sidebar { position: relative; }
#auth-sidecard.auth-sidecard{
  position: sticky; bottom: 12px; /* bleibt beim Scrollen sichtbar */
  margin-top: 12px;
  background: #0f172a;           /* dunkle Karte wie deine UI */
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

#auth-sidecard .user{ display:flex; align-items:center; gap:10px; }
#auth-sidecard .ava{
  width:32px; height:32px; border-radius:999px; background:#111; display:block;
}
#auth-sidecard .meta{ line-height:1.1; }
#auth-sidecard .name{ font-weight:700; letter-spacing:.2px; }
#auth-sidecard .role{
  font-size:.72rem; opacity:.7; letter-spacing:.4px;
}

#auth-sidecard .btns{ display:flex; gap:8px; }
#auth-sidecard .auth-btn.sm{
  padding:6px 10px; font-size:.85rem; border-radius:10px;
  border:1px solid #2a2f43; background:#1c2134; color:#fff; cursor:pointer;
}
#auth-sidecard .auth-btn.sm.ghost{
  background:transparent; border-color:rgba(255,255,255,.14); color:#dbe0ff;
}
#auth-sidecard .auth-btn.sm:hover{ filter:brightness(1.08); }

/* kleine Feinschliffe für die Modalliste (Bild 2) */
.auth-user-list{ scrollbar-width: thin; }
.auth-item:hover{ background:#f8fafc; }
.auth-item .title{ font-weight:600 }
.auth-pill{ background:#eef2ff; border-color:#e5e7eb }
/* Modal-Grid: linke Liste breiter */
.auth-modal .body{ display:grid; grid-template-columns:360px 1fr; gap:0; min-height:480px; }

@media (max-width:900px){
  .auth-modal .body{ grid-template-columns:1fr; }
}

/* Sidebar-Karte (Dark + Light) */
#auth-sidecard.auth-sidecard{
  position: sticky; bottom: 12px; margin-top: 12px;
  border-radius: 12px; padding: 10px; display: grid;
  grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  background: #111827; color:#e5e7eb;           /* dark */
}
body.light #auth-sidecard.auth-sidecard,
:root.light #auth-sidecard.auth-sidecard {      /* light theme support */
  background:#ffffff; color:#111827; border-color:#e5e7ef;
  box-shadow: 0 10px 26px rgba(20,26,40,.12);
}
#auth-sidecard .user{ display:flex; align-items:center; gap:10px; }
#auth-sidecard .ava{ width:32px; height:32px; display:grid; place-items:center;
  border-radius:999px; background:rgba(124,139,255,.15); color:#6d78ff; }
body.light #auth-sidecard .ava{ background:#eef2ff; color:#4f57e8; }
#auth-sidecard .meta{ line-height:1.1; }
#auth-sidecard .name{ font-weight:700; letter-spacing:.2px; }
#auth-sidecard .role{ font-size:.72rem; opacity:.7; letter-spacing:.4px; }
#auth-sidecard .btns{ display:flex; gap:8px; flex-wrap:wrap; }  /* verhindert Overflow */
#auth-sidecard .auth-btn.sm{ padding:6px 10px; font-size:.85rem; border-radius:10px;
  border:1px solid #2a2f43; background:#1c2134; color:#fff; cursor:pointer; }
#auth-sidecard .auth-btn.sm.ghost{ background:transparent; border-color:rgba(255,255,255,.18); color:#dbe0ff; }
body.light #auth-sidecard .auth-btn.sm{ background:#f1f3fb; border-color:#e5e7ef; color:#111827; }
body.light #auth-sidecard .auth-btn.sm.ghost{ background:#fff; color:#1f2a52; }

/* Formular-Zeile: Anzeigename + Rolle nebeneinander */
.auth-row.two{ display:grid; grid-template-columns:1fr 220px; gap:12px; }

/* Multi-select hübsch */
.auth-multi{ min-height:42px; height:auto; }
.auth-multi option{ padding:6px; }
/* ==== Sidebar-Userkarte (Theme-Variablen) ==== */
aside.sidebar { position: relative; }
#auth-sidecard.auth-sidecard{
  position: sticky; bottom: 12px; margin-top: 12px;
  border-radius: 12px; padding: 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  /* nutzt deine App-Variablen, passt automatisch im Hell/Dunkel-Modus */
  background: var(--panel, #0f172a);
  color: var(--text, #e5e7eb);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
#auth-sidecard .user{ display:flex; align-items:center; gap:10px; }
#auth-sidecard .ava{
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:999px; background:rgba(124,139,255,.16); color:#6d78ff;
}
#auth-sidecard .meta{ line-height:1.1; }
#auth-sidecard .name{ font-weight:700; letter-spacing:.2px; }
#auth-sidecard .role{ font-size:.72rem; opacity:.75; letter-spacing:.35px; }

/* Buttons rechtsbündig in der Karte + kein Overflow */
#auth-sidecard .btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
#auth-sidecard .auth-btn.sm{
  padding:6px 10px; font-size:.85rem; border-radius:10px;
  border:1px solid var(--border, #2a2f43);
  background: color-mix(in srgb, var(--panel, #0f172a) 60%, #fff 40%);
  color: var(--text, #fff); cursor:pointer;
}
#auth-sidecard .auth-btn.sm.ghost{
  background:transparent; border-color:var(--border, rgba(255,255,255,.2));
  color: color-mix(in srgb, var(--text, #fff) 80%, #8ea2ff 20%);
}

/* Modal: linke Spalte breiter + Feldlayout */
.auth-modal .body{ display:grid; grid-template-columns:360px 1fr; gap:0; min-height:480px; }
@media (max-width:900px){ .auth-modal .body{ grid-template-columns:1fr; } }
.auth-row.two{ display:grid; grid-template-columns:1fr 220px; gap:12px; }
.auth-multi{ min-height:42px; }
.auth-user-list{ scrollbar-width: thin; }
#auth-sidecard.auth-sidecard{
  position: sticky; bottom: 12px; margin-top: 12px;
  border-radius: 12px; padding: 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  background: var(--panel,#0f172a); color: var(--text,#e5e7eb);
  border: 1px solid var(--border,rgba(0,0,0,.08));
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
#auth-sidecard .user{ display:flex; align-items:center; gap:10px; }
#auth-sidecard .ava{ width:32px; height:32px; display:grid; place-items:center;
  border-radius:999px; background:rgba(124,139,255,.16); color:#6d78ff; }
#auth-sidecard .btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.is-disabled.btn.icon { visibility: hidden; }  /* Zahnrad ausblenden */
/* ===== Auth: Theme-ready ===== */

/* Modal-Backdrop */
.auth-modal-backdrop{
  position:fixed; inset:0; display:none; z-index:10000;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.5);
}

/* Modal-Box */
.auth-modal{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  width:min(980px,92vw);
  max-height:90vh;
  overflow:auto;
  padding:18px;
  box-shadow:0 22px 70px rgba(0,0,0,.35);
}

/* Spalten / Liste */
.auth-pane{ background: transparent; }
.auth-user-list .auth-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.auth-user-list .auth-item + .auth-item{ margin-top:8px; }
.auth-user-list .title{ font-weight:600; color: var(--text); }
.auth-user-list .sub{ font-size:12px; opacity:.8; }

/* Form */
.auth-inp, .auth-sel{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  outline: none;
}
.auth-inp:focus, .auth-sel:focus{
  box-shadow:0 0 0 2px rgba(124,139,255,.35);
}

/* Mehrzeilig */
.auth-multi{ min-height: 140px; }

/* Buttons */
.auth-btn{
  padding:9px 12px; border-radius:12px; border:1px solid var(--border);
  background: transparent; color: var(--text); cursor:pointer; font-weight:600;
}
.auth-btn.primary{ background: var(--accent); border-color: var(--accent); color:#fff; }
.auth-btn.ghost{ background: transparent; }
.auth-btn.danger{ background:#ef4444; border-color:#ef4444; color:#fff; }
.auth-btn.sm{ padding:6px 10px; border-radius:10px; }

/* Codes-Ausgabe */
#auth-codes{
  background: var(--code-bg, #0b1020);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Seiten-Badge */
.auth-sidecard{
  margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:12px;
  background: var(--panel); color: var(--text);
}
.auth-sidecard .role{ opacity:.8; }

/* ---- Light-Overrides ---- */
:root[data-theme="light"]{
  /* Falls nicht global gesetzt, hier sanfte Defaults */
  --panel: #ffffff;
  --text: #0f172a;
  --border: rgba(0,0,0,.12);
  --code-bg: #f3f4f6;
}
:root[data-theme="light"] .auth-inp,
:root[data-theme="light"] .auth-sel{
  background:#fff;
}