/* ============================================================
   magic.dream-x.ai — Design System
   Struktur (Sidebar-Shell, Karten/Badges/Buttons) analog zu
   transform8 manage, aber mit den echten dream-x.ai Marken-Tokens
   (Pink #E6007E, Ink #101014, Instrument Sans) statt transform8-Lila.
   ============================================================ */

:root {
  --brand-50:  #FCEEF5;
  --brand-100: #FBD6E9;
  --brand-200: #F5A9D0;
  --brand-300: #EE72B2;
  --brand-500: #E6007E;
  --brand-600: #C4006C;
  --brand-700: #9E0058;

  --bg:        #FAF9F7;
  --bg-soft:   #F2F0EE;
  --surface:   #FFFDFB;
  --border:    #E5E0DC;
  --border-2:  #D8D2CC;
  --ink:       #101014;
  --ink-2:     #3A3A45;
  --ink-3:     #61616D;
  --ink-4:     #9C9CA8;

  --red:      #D6304A;
  --red-bg:   #FBE7EA;
  --amber:    #B4791A;
  --amber-bg: #FBF0DC;
  --green:    #1C8A5A;
  --green-bg: #E3F5EC;
  --blue:     #2563C7;
  --blue-bg:  #E7EFFB;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --sh-xs: 0 1px 2px rgba(16,16,20,.05);
  --sh-sm: 0 1px 3px rgba(16,16,20,.07), 0 1px 2px rgba(16,16,20,.04);
  --sh-md: 0 4px 14px rgba(16,16,20,.08), 0 2px 4px rgba(16,16,20,.04);
  --sh-lg: 0 16px 40px rgba(16,16,20,.14), 0 4px 10px rgba(16,16,20,.06);
  --sh-brand: 0 6px 18px rgba(230,0,126,.30);
  --grad-brand: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  --grad-wash: radial-gradient(1100px 520px at 14% -8%, rgba(230,0,126,.06), transparent 60%),
               radial-gradient(900px 480px at 100% 0%, rgba(37,99,199,.05), transparent 55%);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-size: 14px; line-height: 1.45;
}
a { color: var(--brand-600); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--brand-200); }
h1, h2, h3 { margin: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D8D2CC; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; height: 58px; }
.sb-logo { width: 30px; height: 30px; border-radius: var(--r-md); background: var(--ink); display: grid; place-items: center; color: #fff; flex: none; font-weight: 800; font-size: 13px; box-shadow: var(--sh-sm); }
.sb-logo span { color: var(--brand-500); font-style: italic; }
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sb-brand-text b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.sb-brand-text b i { color: var(--brand-500); font-style: italic; }
.sb-brand-text span { font-size: 10.5px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  padding: 9px 11px; border-radius: var(--r-md); color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  text-align: left; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--bg-soft); color: var(--ink); }
.nav-item.active { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }

.sb-foot { padding: 12px; border-top: 1px solid var(--border); }
.sb-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-user span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-logout { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: var(--r-sm); flex: none; }
.sb-logout:hover { background: var(--bg-soft); border-color: var(--border-2); color: var(--ink); }

/* ---------- Main ---------- */
.main { min-width: 0; background: var(--bg) var(--grad-wash); }
.page { padding: 28px 32px 48px; max-width: 1100px; margin: 0 auto; width: 100%; animation: page-in .35s cubic-bezier(.16,1,.3,1) both; }
.page h1 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.page-sub { color: var(--ink-3); font-size: 13px; margin: 0 0 18px; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn, button[type="submit"], form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-md); font-weight: 700; font-size: 13px; padding: 8px 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  transition: all .13s; white-space: nowrap; font-family: inherit; text-decoration: none;
}
.btn-primary, form button[type="submit"] { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }
.btn-primary:hover, form button[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:hover, button:hover { background: var(--bg-soft); transform: translateY(-1px); }
.btn:active, button:active { transform: translateY(0); }
.btn-danger, form.confirm-delete button[type="submit"] { background: var(--surface); color: var(--red); border-color: var(--border); box-shadow: none; }
.btn-danger:hover, form.confirm-delete button[type="submit"]:hover { background: var(--red-bg); border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.actions-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.card-pad { padding: 18px; }
.muted { color: var(--ink-3); font-size: 13px; }

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.data-table th, .data-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.data-table th { background: var(--bg-soft); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--brand-50); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; line-height: 1.3; background: var(--bg-soft); color: var(--ink-3); }
.badge-open { background: var(--blue-bg); color: var(--blue); }
.badge-closed { background: var(--green-bg); color: var(--green); }

/* ---------- Forms ---------- */
form label { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
form input, form select, form textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13.5px;
  font-family: inherit; color: var(--ink); background: var(--surface); transition: border-color .14s, box-shadow .14s;
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }
form textarea { min-height: 70px; font-weight: 400; }
.error { color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.hint { font-size: 11px; font-weight: 500; color: var(--ink-4); }

/* ---------- Auth box ---------- */
body:has(.auth-box) {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(230,0,126,.09), transparent 60%),
    radial-gradient(800px 460px at 90% 90%, rgba(37,99,199,.07), transparent 55%),
    var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.auth-box { max-width: 360px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: 36px 32px; animation: page-in .4s cubic-bezier(.16,1,.3,1) both; }
.auth-box h1 { text-align: center; font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 22px; }
.auth-box .sb-logo { width: 40px; height: 40px; border-radius: var(--r-md); margin: 0 auto 16px; font-size: 15px; }

/* ---------- Terminumfrage: Optionszeilen im Formular ---------- */
.option-rows { margin-bottom: 6px; }
.option-row { display: grid; grid-template-columns: 1fr 140px 32px; gap: 10px; align-items: end; margin-bottom: 10px; }
.option-row label { margin-bottom: 0; }
.remove-row { background: none; border: none; color: var(--red); font-size: 20px; padding: 0 0 9px; line-height: 1; }
#add-row { margin: 4px 0 20px; }

/* ---------- Terminumfrage: Ergebnis-Grid ---------- */
.poll-grid-wrap { overflow-x: auto; }
.poll-grid { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.poll-grid th, .poll-grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 9px 12px; font-size: 13px; text-align: center; white-space: nowrap; }
.poll-grid th:first-child, .poll-grid td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
.poll-grid thead th { background: var(--bg-soft); font-weight: 700; font-size: 12px; vertical-align: top; }
.poll-grid thead th:first-child { background: var(--bg-soft); }
.poll-grid tr:last-child td { border-bottom: none; }
.poll-grid td:last-child, .poll-grid th:last-child { border-right: none; }
.poll-grid .vote-yes { color: var(--green); font-weight: 700; }
.poll-grid .vote-no { color: var(--ink-4); }
.poll-grid .vote-maybe { color: var(--amber); font-weight: 700; }
.poll-grid .col-best { background: var(--brand-50); }
.poll-grid .count-row td { font-weight: 800; background: var(--bg-soft); }
.option-head-label { display: block; }
.option-head-date { font-weight: 700; }
.option-head-time { font-weight: 500; color: var(--ink-4); font-size: 11.5px; }
.option-final-badge { display: block; margin-top: 4px; }
.finalize-form { margin-top: 6px; }
.finalize-form button { padding: 3px 8px; font-size: 10.5px; }
.participant-actions form { display: inline; }

/* ---------- Share-Link-Box ---------- */
.share-box { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.share-box input { flex: 1; margin: 0; font-size: 12.5px; color: var(--ink-3); background: var(--bg-soft); }

/* ---------- Public: Vote-Formular ---------- */
.vote-table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
.vote-table th, .vote-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; }
.vote-table th { font-size: 12px; color: var(--ink-3); }
.vote-choices { display: flex; gap: 14px; }
.vote-choices label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); margin: 0; }
.vote-choices input { width: auto; margin: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.public-shell { min-height: 100vh; background: var(--bg) var(--grad-wash); }
.public-wrap { max-width: 720px; margin: 0 auto; padding: 40px 24px 64px; }
.public-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.public-brand .sb-logo { width: 34px; height: 34px; font-size: 13px; }
.banner-ok { background: var(--green-bg); color: var(--green); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.banner-closed { background: var(--amber-bg); color: var(--amber); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 18px; }