/* ===== Design Tokens ===== */
:root{
  --shell-max: 1200px;
  --sidebar-w: 200px;
  --gap: 16px;
  --radius: 10px;
  --card-pad: 12px;

  --font-base: 15px;         /* Grundschrift */
  --font-small: 12px;
  --font-h2: 18px;
  --font-h3: 15px;

  --border: #e5e7eb;
  --muted: #666;
  --blue-bg: #eef3ff;        /* Management */
  --green-bg: #f4fbf4;       /* User */
  --violet-bg: #f4efff;      /* Analyse */
}


/* ===== Shells (einheitliche Hülle) ===== */
main.user-shell,
main.management-shell,
main.super-shell,
main.analysis-shell,
main.default-shell {
  max-width: var(--shell-max);
  margin: 24px auto;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-sizing: border-box;
  box-shadow: none;
  background: #fff;
  font-size: var(--font-base);
}

/* Farben */
main.user-shell      { background: var(--green-bg); }
main.management-shell{ background: var(--blue-bg); }
main.analysis-shell  { background: var(--violet-bg); }
main.super-shell     { background: #fff9e6; }





/* ===== Zwei-Spalten-Layout ===== */
.user-layout{
  display:grid;
  grid-template-columns: minmax(140px, var(--sidebar-w)) 1fr;
  gap: var(--gap);
  margin: 0;
  max-width: none;
}
@media (max-width: 1200px){
  .user-layout{ grid-template-columns: 1fr; }
}

/* ===== Sidebar ===== */
.user-sidebar{
  align-self:start;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.user-sidebar h3{
  margin: 4px 0 6px;
  font-size: 0.95rem;     /* kleiner als Content-Überschriften */
  font-weight: 600;
}
.user-menu{ list-style:none; margin:0; padding:0; }
.user-menu li{ margin:2px 0; }
.user-menu a{
  display:block;
  padding:6px 8px;
  border-radius:6px;
  text-decoration:none;
  color:#333;
  font-size: 0.9rem;      /* Links deutlich kleiner */
}
.user-menu a:hover{ background:#f0f7ff; }
.user-menu a.active{ background:#e7f2ff; font-weight:600; }

/* ===== Content / Karten ===== */
.user-main{ align-self:start; }
.user-main .cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 840px){
  .user-main .cards{ grid-template-columns: 1fr 1fr; }
}
.user-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--card-pad);
}

/* ===== Typografie ===== */
h2{ font-size: var(--font-h2); margin:0 0 8px; }
h3{ font-size: var(--font-h3); margin:0 0 8px; }
.muted{ color: var(--muted); font-size: 0.9rem; }
.small{ font-size: 0.85rem; }
.mono{ font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.right{ text-align:right; }

/* ===== Tabellen ===== */
.table-wrap{ overflow:auto; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:6px 8px; border-bottom:1px solid #f1f5f9; text-align:left; font-size:.92rem; }
th{ color:#475569; background:#fafafa; }

/* ===== Listen ===== */
.list{ margin:0; padding:0; list-style:none; }
.list li{ padding:10px 0; border-bottom:1px solid #f1f1f1; }
.list li:last-child{ border-bottom:none; }

/* ===== Buttons & Controls (kleiner & einheitlich) ===== */
.btn-ghost,
button,
input[type=button],
input[type=submit]{
  font-size: .92rem;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost{
  background: transparent;
  color:#0b63b0;
  border:1px solid #cfe0ff;
  text-decoration:none;
  display:inline-block;
}
.btn-ghost:hover{ background:#f5faff; }

/* Form Controls vereinheitlichen */
.user-card input[type=text],
.user-card input[type=number],
.user-card input[type=date],
.user-card input[type=email],
.user-card select,
.user-card textarea{
  width:100%;
  box-sizing:border-box;
  font: inherit;
  font-size: .95rem;
  padding: 6px 8px;
  border:1px solid #d1d5db;
  border-radius:8px;
  min-width:0;            /* WICHTIG: darf schrumpfen (gegen Überlauf) */
}
.user-card textarea{ min-height: 90px; resize: vertical; }

/* Zeilen-/Grid-Utilities für Forms */
.row{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.row > *{ min-width:0; flex: 1 1 220px; }

.grid-2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:10px; }
@media (max-width: 700px){ .grid-2{ grid-template-columns: 1fr; } }

/* ===== Code/JSON: sauber umbrechen, nicht „herausragen“ ===== */
.codeblock,
.user-card pre,
.user-card details pre,
.user-card .mono-block{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  overflow-x: auto;
  background:#fafafa;
  border:1px solid #eee;
  border-radius:6px;
  padding:8px;
  box-sizing:border-box;
}
.user-card details{ max-width:100%; }

/* ===== Status Pills ===== */
.pill{ display:inline-block; padding:2px 8px; border-radius:12px; font-weight:600; font-size:.85rem; }
.pill.ok{  background:#e6ffe6; color:#0a7a0a; }
.pill.bad{ background:#ffe6e6; color:#a30a0a; }
.pill.neutral{ background:#eef5ff; color:#1958a4; }

/* ===== Meldungen ===== */
.msg-ok{  background:#e6ffe6; color:#0a7a0a; border:1px solid #bfe5bf; padding:.6em 1em; border-radius:6px; }
.msg-err{ background:#ffecec; color:#a30a0a; border:1px solid #f0c0c0; padding:.6em 1em; border-radius:6px; }



/* Sekundär-Navigation (Management/Userbereich) */
.nav-sec{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto; /* schiebt sie nach rechts, falls der Header flex nutzt */
  flex-wrap: wrap;   /* darf umbrechen, bleibt aber horizontal */
}
.nav-sec-link{
  font-size: 0.9rem;     /* kleiner als Hauptnav */
  font-weight: 500;      /* nicht fett */
  color: #4b5563;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}
.nav-sec-link:hover{
  background: #f3f4f6;
  color: #111;
}

@media (max-width: 720px){
  .nav-sec{ gap: 8px; }
  .nav-sec-link{ padding: 4px 6px; }
}

/* Super-Admin-Hülle: dezent */
.super-shell {
  background: #fff9ed;              /* zartes Creme/Amber, gern anpassen */
  border: 1px solid #ffe8b3;
  border-radius: 8px;
  padding: 14px;
  max-width: 1200px;
  margin: 2em auto;
  box-sizing: border-box;
}
.super-shell .user-layout { max-width:none; margin:0; display:grid; grid-template-columns: 200px 1fr; gap:16px; }
@media (max-width: 900px) { .super-shell .user-layout { grid-template-columns: 1fr; } }

/* Avatare rund */
.avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }