/* === CSS extrahiert aus index.html (extrahiert 2026-04-26) === */
  @import url('/shared/fonts/inter.css');
  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg: linear-gradient(145deg, #eef2f7 0%, #e4ecf4 25%, #dfe8f0 50%, #e8eef5 75%, #f0f4f8 100%);
    --nav-bg: rgba(255,255,255,0.55);
    --nav-border: rgba(255,255,255,0.5);
    --card-bg: rgba(255,255,255,0.45);
    --card-border: rgba(255,255,255,0.6);
    --text-primary: #1c1c1e;
    --text-secondary: #636366;
    --text-tertiary: #8e8e93;
    --input-bg: rgba(255,255,255,0.5);
    --input-border: rgba(0,0,0,0.08);
    --accent: #04b3d6;
    --danger: #ff453a;
    --success: #30d158;
    --warning: #ff9500;
    --toggle-bg: rgba(0,0,0,0.06);
    --table-hover: rgba(4,179,214,0.06);
  }

  [data-theme="dark"] {
    --bg: linear-gradient(145deg, #0a0a1a 0%, #0f1528 20%, #151022 40%, #1a0f1e 60%, #12111a 80%, #0d1318 100%);
    --nav-bg: rgba(255,255,255,0.05);
    --nav-border: rgba(255,255,255,0.09);
    --card-bg: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.1);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #636366;
    --input-bg: rgba(255,255,255,0.08);
    --input-border: rgba(255,255,255,0.12);
    --accent: #2cc5e4;
    --toggle-bg: rgba(255,255,255,0.1);
    --table-hover: rgba(4,179,214,0.1);
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    background: var(--bg);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    -webkit-font-smoothing: antialiased;
  }

  @keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(44px) saturate(180%);
    -webkit-backdrop-filter: blur(44px) saturate(180%);
    border-bottom: 1px solid var(--nav-border);
    padding: 0 24px; height: 56px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-left { display: flex; align-items: center; gap: 10px; }
  .nav-logo { height: 28px; }
  [data-theme="dark"] .nav-logo { filter: brightness(2.2) contrast(0.85); }
  .nav-brand { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.4px; }
  .nav-divider { width: 1px; height: 18px; background: var(--nav-border); margin: 0 2px; }
  .nav-subtitle { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
  .nav-right { display: flex; align-items: center; gap: 12px; }

  .btn {
    padding: 7px 14px; border-radius: 8px; border: 1px solid var(--card-border);
    background: var(--toggle-bg); backdrop-filter: blur(20px);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn:hover { background: var(--card-bg); color: var(--text-primary); }
  .btn-primary { background: linear-gradient(135deg, #04b3d6, #0090b0); color: #fff; border: none; }
  .btn-primary:hover { opacity: 0.9; }
  .btn-danger { background: var(--danger); color: #fff; border: none; }
  .btn-danger:hover { opacity: 0.85; }
  .btn-sm { padding: 4px 10px; font-size: 12px; }

  .container { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }

  h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; letter-spacing: -0.5px; }

  .panel {
    background: var(--card-bg); backdrop-filter: blur(60px) saturate(180%);
    -webkit-backdrop-filter: blur(60px) saturate(180%);
    border: 1px solid var(--card-border); border-radius: 16px;
    padding: 24px; margin-bottom: 24px;
  }

  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px; border-bottom: 1px solid var(--card-border); }
  td { padding: 10px 12px; font-size: 14px; color: var(--text-primary); border-bottom: 1px solid var(--card-border); vertical-align: middle; }
  tr:hover td { background: var(--table-hover); }

  .role-badge {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600;
  }
  .role-admin { background: rgba(175,82,222,0.12); color: #af52de; }
  .role-editor { background: rgba(4,179,214,0.12); color: #04b3d6; }
  .role-viewer { background: rgba(142,142,147,0.12); color: #8e8e93; }

  .status-active { color: var(--success); }
  .status-inactive { color: var(--danger); }

  .module-tag {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 500; margin: 1px;
    background: rgba(4,179,214,0.08); color: var(--accent);
  }

  /* Modal */
  .modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px); z-index: 200;
    align-items: center; justify-content: center;
  }
  .modal-overlay.active { display: flex; }
  .modal {
    background: var(--card-bg); backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border: 1px solid var(--card-border); border-radius: 20px;
    padding: 28px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  }
  .modal h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }
  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
  .form-group input, .form-group select {
    width: 100%; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--input-border); background: var(--input-bg);
    color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;
  }
  .form-group input:focus, .form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4,179,214,0.15); }
  .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

  .modules-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .module-checkbox { display: none; }
  .module-label {
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
    border: 1px solid var(--input-border); background: var(--input-bg);
    color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
  }
  .module-checkbox:checked + .module-label {
    background: var(--accent); color: #fff; border-color: var(--accent);
  }

  .log-entry { font-size: 12px; color: var(--text-secondary); padding: 4px 0; border-bottom: 1px solid var(--card-border); }
  .log-entry .timestamp { color: var(--text-tertiary); margin-right: 8px; }
  .log-entry .event { font-weight: 600; }

  @media (max-width: 600px) {
    nav { padding: 0 12px; }
    .nav-subtitle, .nav-divider { display: none; }
    .container { padding: 20px 12px; }
    .panel { padding: 16px; }
    td, th { padding: 8px 6px; font-size: 12px; }
    .hide-mobile { display: none; }
  }


/* === Auto-generierte Klassen aus inline style="..." (index.html, 13 unique) === */
.s-c2bf94 { display:flex;justify-content:center;align-items:center;height:60vh;color:var(--text-secondary,#888);font-size:14px; }
.s-af0b52 { display:flex;gap:8px;margin-bottom:20px; }
.s-6a2983 { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; }
.s-f4b1c0 { max-height:400px;overflow-y:auto; }
.s-8ed9d3 { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px; }
.s-684111 { margin-bottom:20px; }
.s-b9de14 { font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:12px; }
.s-278099 { max-height:300px;overflow-y:auto; }
.s-f4a088 { text-align:center;padding:60px 24px; }
.s-b06cb1 { color:var(--danger); }
.s-a5ca70 { color:var(--text-secondary);margin-top:12px; }
.s-716ecf { margin-top:20px; }
.s-02f7ca { font-weight:400;color:var(--text-tertiary); }


/* === Auto-Klassen aus inline style="..." in index.js (17 unique) === */
.s-dd850a { color:var(--text-tertiary);font-size:12px; }
.s-2c273c { color:' + color + '; }
.s-09ccb6 { color:var(--text-tertiary); }
.s-b06cb1 { color:var(--danger); }
.s-b9ce0e { color:var(--text-secondary);text-align:center;padding:20px; }
.s-45993e { text-align:center;padding:16px; }
.s-8db844 { font-size:28px;font-weight:700;color:' + i.color + '; }
.s-b12f9c { font-size:11px;color:var(--text-secondary);margin-top:4px; }
.s-9155c9 { color:var(--text-secondary); }
.s-830420 { display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;background:' + color + '22;color:' + color + '; }
.s-a21676 { position:relative;display:inline-block;width:42px;height:24px;cursor:pointer; }
.s-350a34 { opacity:0;width:0;height:0; }
.s-39a0c4 { position:absolute;inset:0;border-radius:12px;background:' + (t.active ? 'var(--accent)' : 'var(--toggle-bg,#ccc)') + ';transition:0.3s; }
.s-cddfc8 { position:absolute;top:2px;left:' + (t.active ? '20px' : '2px') + ';width:20px;height:20px;border-radius:50%;background:#fff;transition:0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.s-1aa0f1 { color:var(--text-secondary);font-size:13px;padding:12px; }
.s-c37107 { width:100%;font-size:12px; }
.s-82531c { color:var(--success); }


/* === Benutzerverwaltung-Überarbeitung (2026-05-25) === */

/* Such-/Filter-Toolbar */
/* Tab-Leiste auf schmalen Screens umbrechen (verhindert horizontalen Overflow) */
.s-af0b52 { flex-wrap: wrap; }

.user-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.toolbar-input, .toolbar-select {
  padding:8px 12px; border-radius:10px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--text-primary); font-size:13px; font-family:inherit; outline:none;
}
.toolbar-input { flex:1 1 220px; min-width:0; }
.toolbar-input:focus, .toolbar-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(4,179,214,0.15); }
.user-count { margin-left:auto; font-size:12px; color:var(--text-tertiary); }

/* Tabellen-Zustände (Laden / Fehler / Leer) */
.table-state { text-align:center; color:var(--text-secondary); padding:28px 12px !important; font-size:14px; }
.state-error { color:var(--danger); display:flex; flex-direction:column; align-items:center; gap:10px; }
.state-empty { color:var(--text-tertiary); }
.spinner {
  display:inline-block; width:14px; height:14px; vertical-align:middle; margin-right:6px;
  border:2px solid var(--card-border); border-top-color:var(--accent); border-radius:50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Init-Fehler im Loading-Bereich */
.init-error { display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--danger); }

/* Sperr-Status + Warn-Button */
.status-locked { color:var(--warning); font-weight:600; }
.btn-warning { background:var(--warning); color:#fff; border:none; }
.btn-warning:hover { opacity:0.85; }
.actions-cell { white-space:nowrap; }

/* Löschen-Button links in den Modal-Aktionen */
.form-actions #delete-user-btn { margin-right:auto; }

/* Geräte / Sitzungen im Modal */
.sessions-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.sessions-header label { margin-bottom:0; }
.sessions-list { display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; }
.session-row {
  display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px;
  background:var(--input-bg); border:1px solid var(--input-border);
}
.session-ua { font-size:13px; font-weight:500; color:var(--text-primary); }
.sessions-meta { font-size:11px; color:var(--text-tertiary); }

/* Audit-Log Event-Farben (ersetzt kaputte .s-2c273c) */
.evt-fail { color:var(--danger); }
.evt-ok { color:var(--success); }
.evt-neutral { color:var(--text-secondary); }