:root { --gap: 16px; --radius: 12px; --shadow: 0 6px 24px rgba(0,0,0,.08); }

* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: #f6f7fb; color: #1c1d22;
}
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-login {
  background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.narrow { max-width: 420px; margin: 10vh auto; }
.centered { display: grid; place-items: center; min-height: 100vh; }

/* Kacheln in der Liste: volle Breite */
.list .tile { width: 100%; }

/* Wenn du in der Liste lange Namen vollständig sehen willst: */
.list .tile-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px; background: #fff; box-shadow: var(--shadow);
  flex-wrap: nowrap;
}
.brand { flex: 1 1 auto; min-width: 0; }
.brand-link {
  display: inline-block; font-weight: 700; text-decoration: none; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
  font-size: clamp(16px, 4vw, 20px);
}
.topnav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.user { white-space: nowrap; opacity: .75; font-size: 0.95rem; }

/* ---------- Links & Buttons ---------- */
.link {
  text-decoration: none; padding: 8px 12px; border-radius: 8px;
  background: #efefef; color: #222; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
}

.link-used {
  text-decoration: none; padding: 8px 12px; border-radius: 8px;
  background: #9e9e9e; color: #222; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
}

/* generische Button-Basis – für Check & Save */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; min-width: 80px; text-align: center;
  border: none; border-radius: 8px; background: #efefef; color: #222; cursor: pointer;
}
.btn.link { text-decoration: none; }

/* Zustände: Busy / Success / Error */
.btn.is-busy, .btn.is-success, .btn.is-error { color: transparent !important; }

.btn.is-busy::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid #fff; border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-success { background: #16a34a; }
.btn.is-success::after {
  content: "✔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-weight: 700;
}
.btn.is-error { background: #dc2626; }
.btn.is-error::after {
  content: "✖"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-weight: 700;
}

/* Buttons in der TH-Zelle nebeneinander, nicht umbrechen */
.th-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;   /* rechtsbündig in der Spalte */
  white-space: nowrap;
}

/* Optional: Buttons im Header etwas kompakter */
.th-actions .btn { padding: 6px 12px; }

@keyframes spin { 100% { transform: rotate(360deg); } }

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 28px auto; padding: 0 20px; }
.card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card-index { background: #fff; border-radius: var(--radius); padding: 5px; box-shadow: var(--shadow); }
.grid { margin-top: var(--gap); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }

/* ---------- Tiles (vollflächig klickbar) ---------- */
.tile {
  display: block; background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: transform .06s ease, box-shadow .06s ease, background .06s ease;
}
.tile:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,0,0,.10); background: #fafafa; }
.tile:focus { outline: 2px solid #1a73e8; outline-offset: 2px; }
.tile-title { margin: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Table / Form ---------- */
label { display: block; margin: 10px 0 6px; font-weight: 600; }
.input, input[type="text"], input[type="password"] {
  width: 100%; padding: 10px 12px; border: 1px solid #dadce0; border-radius: 8px; background: #fff;
}

/* Edit/View Umschaltung je Zeile */
tr.editing .view, tr.editing .view-only { display: none !important; }
tr.editing .edit, tr.editing .edit-only { display: inline-flex !important; }

/* ---------- Flash ---------- */
.flash-list { margin: 0 0 12px; }
.flash { padding: 10px 12px; border-radius: 10px; }
.flash.error { background: #fee; color: #a00; border: 1px solid #fbb; margin-top: var(--gap);}

/* ---------- Mobile ---------- */
@media (max-width: 420px) {
  .user { display: none; }
  .brand-link { max-width: 70vw; }
  .link, .btn { padding: 8px 10px; }
}