/* =============  Verallia-Style v2 (Drop-in)  =============
   Ziel: ruhige Flächen, klare Hierarchie, kompakte Tabellen,
   kleine Buttons in Tabellen, bessere Kontraste, einheitliche Abstände.
   -> Keine HTML-Änderungen nötig (wir stylen vorhandene Klassen/Tags).
=========================================================== */

:root{
  --v-primary:#00A8A7;     /* Primärgrün */
  --v-primary-2:#14b8a6;   /* Hover/Focus */
  --v-text:#1f2937;        /* Grau 800 */
  --v-muted:#667085;       /* Grau 500/600 */
  --v-border:#E6E9EC;      /* Rahmen */
  --v-bg:#F6F8F7;          /* Seitenhintergrund */
  --v-card:#FFFFFF;        /* Kartenhintergrund */
  --v-header:#F0F7F5;      /* Tabellenkopf zart grünlich */
  --v-danger:#B00020;      /* Rot für löschen */
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  color: var(--v-text);
  background: var(--v-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Header ---------- */
.v-header {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--v-border);
}
.v-header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
}
.v-logo {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--v-primary), var(--v-primary-2));
}
.v-title { font-weight: 650; letter-spacing: .2px; }

/* ---------- Layout ---------- */
.v-main { max-width: 1200px; margin: 18px auto 28px; padding: 0 20px; }
.v-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
@media (max-width: 1000px) { .v-grid { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  background: var(--v-card);
  border: 1px solid var(--v-border);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
  padding: 12px 12px 10px;
}
.card h2 {
  margin: 2px 0 8px;
  font-size: 18px; font-weight: 700;
}
.card + .card { margin-top: 16px; }

/* Subtle section header inside card */
.card .muted { color: var(--v-muted); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--v-border); vertical-align: top; }
th {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .35px;
  color: #475569; background: var(--v-header);
}
tbody tr:hover { background: #FAFCFB; }

/* Erste Spalte verlinkt: Link dezenter, aber erkennbar */
td a { color: var(--v-primary); text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; }

/* Tabellen in Seitenspalten: Buttons kompakter */
.card table .btn { padding: 6px 10px; font-weight: 650; }
.card table .btn.danger { background: var(--v-danger); }
.card table details summary { cursor: pointer; list-style: none; }
.card table details summary::-webkit-details-marker { display: none; }

/* ---------- Forms ---------- */
input[type=text], input[type=date], input[type=datetime-local], textarea, select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--v-border); border-radius: 10px; background: #fff;
  font-size: 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--v-primary);
  box-shadow: 0 0 0 3px rgba(0,168,167,.12);
}
textarea { resize: vertical; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; 
  border-radius: 6px;
  background: var(--v-primary); 
  color: #fff; 
  font-weight: 600; 
  font-size: 14px;
  border: none;
  cursor: pointer; 
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn:hover { 
  background: #008f8e;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.btn:active { 
  transform: translateY(0); 
}

.btn.secondary { 
  background: #f0f9f9; 
  color: var(--v-primary); 
  border: 1px solid #d0e8e7;
}
.btn.secondary:hover { 
  background: #e0f2f1;
  border-color: #b0d8d7;
}

.btn.danger { 
  background: #fef2f2; 
  color: #dc2626;
  border: 1px solid #fecaca;
}
.btn.danger:hover { 
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Kompakte Buttons für dichte Bereiche (z. B. Tabellenaktionen) */
.btn.sm { 
  padding: 5px 12px; 
  font-size: 13px; 
  border-radius: 5px; 
}

/* ---------- Details (Aufklapper) ---------- */
details { margin-top: 8px; }
details > summary {
  padding: 6px 10px; border-radius: 10px;
  color: var(--v-primary); background: #f0fbf9; border: 1px solid #d7eee9;
  width: max-content; font-weight: 650;
}
details[open] > summary { background: #e7faf6; }

/* ---------- Role-card (index.php) ---------- */
.role-card {
  max-width: 560px; margin: 18px 0; padding: 18px;
  border-radius: 14px; background: #fff; border: 1px solid var(--v-border);
}