:root{
  --fg:#111;
  --muted:#666;
  --border:#ddd;
  --bg:#fafafa;

  --primary:#0b5ed7;
  --primary-hover:#eef3ff;

  --danger:#c0392b;

  --card-bg:#fff;
  --radius:10px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.45;
}

.container{
  max-width:980px;
  margin:0 auto;
  padding:16px;
}

/* Topbar */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--border);
}

.topbar .container{
  padding-top:12px;
  padding-bottom:12px;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}

.brand strong{
  font-size:1.25rem;
  letter-spacing:0.2px;
  white-space:nowrap;
}

.brand .muted{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Navigation: Links + Logout identisch */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-form{
  display:inline-flex;
  align-items:center;
  margin:0;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  color:var(--primary);
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  font:inherit;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}

.nav-link:hover{
  background:var(--primary-hover);
  text-decoration:none;
}

.nav-link:focus{
  outline:2px solid rgba(11,94,215,0.25);
  outline-offset:2px;
}

.nav-link.danger{ color:var(--danger); }
.nav-link.danger:hover{ background:#fff1f0; }

/* Typo */
.muted{
  color:var(--muted);
  font-size:0.92rem;
}

/* Cards */
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-top:16px;
}

/* Forms */
label{
  display:block;
  margin-top:10px;
  margin-bottom:6px;
  font-weight:600;
}

input,select,textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
  background:#fff;
}

input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(11,94,215,0.25);
  outline-offset:2px;
}

/* Primary buttons (Content) */
button{
  margin-top:14px;
  padding:10px 14px;
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

button:hover{ filter:brightness(0.96); }

button:focus{
  outline:2px solid rgba(11,94,215,0.25);
  outline-offset:2px;
}

/* KRITISCH: Nav-Buttons dürfen NICHT wie Primary-Buttons aussehen (Logout fix) */
button.nav-link{
  margin-top:0;
  padding:6px 12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--primary);
  font-weight:600;
  border-radius:8px;
}

/* Alerts */
.alert{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #f1c40f;
  background:#fff7d6;
  border-radius:var(--radius);
}

/* Links als Button */
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

a.btn:hover{ filter:brightness(0.96); }

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
}

.table th,.table td{
  text-align:left;
  padding:10px 8px;
  border-top:1px solid #eee;
  vertical-align:top;
}

.table th{
  font-size:0.92rem;
  color:#333;
}

.link{
  color:var(--primary);
  text-decoration:none;
}

.link:hover{ text-decoration:underline; }

/* Pills */
.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:0.85rem;
  border:1px solid #ddd;
  background:#f6f6f6;
}

.pill-green{ border-color:#cdebd6; background:#eaf8ef; color:#1e7e34; }
.pill-gray{ border-color:#e0e0e0; background:#f6f6f6; color:#555; }
.pill-yellow{ border-color:#f1e3b1; background:#fff7d6; color:#8a6d00; }
.pill-red{ border-color:#f0b6b2; background:#fff1f0; color:#b02a37; }

@media (max-width:640px){
  .topbar-inner{ flex-direction:column; align-items:flex-start; }
  .nav{ width:100%; justify-content:flex-start; }
}