/* Glamourball Check-In – Dark Theme, mobile-first */

:root {
    --bg: #0f0f1a;
    --surface: #1a1a2e;
    --surface-2: #232342;
    --border: #32325a;
    --text: #eaeaf2;
    --muted: #9a9ab8;
    --accent: #8b5cf6;
    --accent-hover: #7c3aed;
    --ok: #22c55e;
    --ok-bg: #102a1a;
    --bad: #ef4444;
    --bad-bg: #2d1216;
    --warn: #f59e0b;
}

* { box-sizing: border-box; }

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

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand { font-weight: 700; font-size: 1.05rem; }
.topbar nav { display: flex; gap: .5rem; }

.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 1rem;
}

h2 { margin: 1.6rem 0 .6rem; font-size: 1.15rem; }

.muted { color: var(--muted); font-size: .9rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    padding: .55rem .9rem;
    border-radius: .6rem;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--border); }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: #7f1d1d; border-color: #991b1b; }
.btn-danger:hover { background: #991b1b; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }

/* ---------- Login ---------- */
.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1rem;
}
.login-box {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}
.login-box h1 { margin: 0; }
.login-sub { color: var(--muted); margin-top: .2rem; }
.login-box form { display: grid; gap: .7rem; text-align: left; margin-top: 1rem; }
.login-box input[type="password"] {
    width: 100%;
    padding: .7rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 1rem;
}

/* ---------- Suche ---------- */
.search-wrap { position: sticky; top: 3.4rem; background: var(--bg); padding: .8rem 0 .4rem; z-index: 5; }
.search-input {
    width: 100%;
    font-size: 1.25rem;
    padding: .9rem 1.1rem;
    border-radius: .9rem;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
}
.search-input:focus { border-color: var(--accent); }
.search-meta { color: var(--muted); font-size: .85rem; padding: .35rem .2rem 0; }

/* ---------- Treffer-Cards ---------- */
.results { display: grid; gap: .8rem; margin-top: .6rem; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .9rem;
    padding: .9rem 1rem;
}
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}
.card-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.name { font-weight: 700; font-size: 1.08rem; }

.badge {
    font-size: .75rem;
    padding: .15rem .5rem;
    border-radius: 99px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.badge-klasse { background: var(--surface-2); }
.badge-schule { background: #16284a; border-color: #2563eb; }
.badge-helfer { background: #3a2c08; border-color: var(--warn); }

.fin-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin-top: .55rem;
}
.chip {
    font-size: .85rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 99px;
}
.chip-ok  { background: var(--ok-bg);  color: var(--ok);  border: 1px solid var(--ok); }
.chip-bad { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }

.hint {
    margin-top: .55rem;
    padding: .5rem .7rem;
    background: #3a2c08;
    border: 1px solid var(--warn);
    border-radius: .6rem;
    color: #fcd34d;
    font-size: .92rem;
    white-space: pre-wrap;
}

/* ---------- Gäste ---------- */
.guest-list {
    margin-top: .7rem;
    border-top: 1px dashed var(--border);
    padding-top: .55rem;
}
.guest-list-title { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    padding: .35rem 0;
}
.guest-name { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ---------- Toggle ---------- */
.toggle { min-width: 8.2rem; text-align: center; font-weight: 600; }
.toggle.on {
    background: var(--ok-bg);
    border-color: var(--ok);
    color: var(--ok);
}

/* ---------- Alerts & Toast ---------- */
.alert {
    padding: .6rem .9rem;
    border-radius: .6rem;
    margin: .6rem 0;
    font-size: .92rem;
}
.alert-error { background: var(--bad-bg); border: 1px solid var(--bad); color: #fca5a5; }
.alert-ok    { background: var(--ok-bg);  border: 1px solid var(--ok);  color: #86efac; }

.toast {
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bad);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: .7rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    z-index: 100;
}

/* ---------- Admin ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
}
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .9rem;
    padding: .9rem;
    display: grid;
    gap: .15rem;
    text-align: center;
}
.stat-value { font-size: 1.5rem; font-weight: 800; }
.stat-label { color: var(--muted); font-size: .8rem; }
.stat-ok .stat-value   { color: var(--ok); }
.stat-warn .stat-value { color: var(--warn); }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .9rem;
    padding: 1rem;
}
.row-form {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    margin: .6rem 0;
}
.row-form input[type="url"],
.row-form input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: .6rem .8rem;
    border-radius: .6rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: .95rem;
}
.row-form input[type="text"]#preis { flex: 0 0 6rem; min-width: 6rem; }
.row-form input[type="file"] { color: var(--muted); }
.row-form label { color: var(--muted); }

@media (max-width: 560px) {
    .card-head, .guest-row { flex-direction: column; align-items: stretch; }
    .toggle { width: 100%; }
}