*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0f1117;
  --bg-card:  #1a1d27;
  --border:   #2a2d3e;
  --text:     #e2e8f0;
  --muted:    #7c8399;
  --accent:   #4f8ef7;
  --red:      #ef4444;
  --green:    #22c55e;
  --radius:   12px;
}

body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; min-height: 100vh; }

.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 420px;
}

.card-wide {
  max-width: 1100px;
}

.page-wide {
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.card-inner {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem;
}
.card-inner summary { cursor: pointer; color: var(--accent); font-weight: 500; }

.logo { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; font-weight: 600; margin-bottom: 1.5rem; }
.logo-icon { font-size: 1.4rem; }

h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; }
.hint { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; line-height: 1.5; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .35rem; color: var(--muted); }
.field input, .field select {
  width: 100%; padding: .6rem .85rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 1rem; outline: none;
  transition: border-color .15s;
}
.field input:focus, .field select:focus { border-color: var(--accent); }
.field input[name="code"] { font-size: 1.5rem; letter-spacing: .3rem; text-align: center; }

.btn-primary {
  width: 100%; padding: .7rem; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
  cursor: pointer; margin-top: .5rem; transition: opacity .15s;
}
.btn-primary:hover { opacity: .88; }

.btn-small {
  padding: .3rem .7rem; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; font-size: .8rem;
  cursor: pointer; transition: border-color .15s;
}
.btn-small:hover { border-color: var(--accent); color: var(--text); }

.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .875rem; }
.alert-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }

/* User-Tabelle */
.user-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-top: 1rem; table-layout: fixed; }
.user-table col.col-name   { width: 18%; }
.user-table col.col-email  { width: 22%; }
.user-table col.col-role   { width: 9%; }
.user-table col.col-login  { width: 14%; }
.user-table col.col-status { width: 10%; }
.user-table col.col-action { width: 9%; }
.user-table th { text-align: left; padding: .5rem .75rem; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.user-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.user-table td.clip { overflow: hidden; text-overflow: ellipsis; }
.user-table tr.inactive { opacity: .5; }

/* Dropdown-Aktionsmenü */
.dropdown { position: relative; display: inline-block; }
.dropdown-trigger {
  padding: .3rem .65rem; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; font-size: .8rem;
  cursor: pointer; white-space: nowrap; transition: border-color .15s;
}
.dropdown-trigger:hover { border-color: var(--accent); color: var(--text); }
.dropdown-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: .3rem; min-width: 170px; z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.dropdown-menu.open { display: block; }
.dropdown-menu form { display: block; margin: 0; }
.dropdown-menu button, .dropdown-menu a {
  display: block; width: 100%; text-align: left;
  padding: .45rem .75rem; background: transparent;
  color: var(--text); border: none; border-radius: 6px;
  font-size: .85rem; cursor: pointer; text-decoration: none;
  transition: background .12s;
}
.dropdown-menu button:hover, .dropdown-menu a:hover { background: var(--border); }
.dropdown-menu .item-accent button { color: var(--accent); }
.dropdown-menu .item-danger button { color: var(--red); }
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: .25rem 0; }

.badge { font-size: .7rem; font-weight: 600; padding: .2rem .5rem; border-radius: 999px; }
.badge-online  { background: rgba(34,197,94,.15);  color: var(--green); border: 1px solid rgba(34,197,94,.3); }
.badge-offline { background: rgba(239,68,68,.15);  color: var(--red);   border: 1px solid rgba(239,68,68,.3); }

.back-link { color: var(--accent); text-decoration: none; font-size: .875rem; }
.back-link:hover { text-decoration: underline; }