/* ==========================================================================
   itsjenk.com — Panel
   --------------------------------------------------------------------------
   Ergaenzt site.css und wird NUR auf den Panel-Seiten geladen. Die
   Landingpage soll nichts davon mitschleppen.
   Alle Farben, Abstaende und Radien kommen aus den Tokens in site.css —
   hier steht kein einziger fester Wert, der dort schon einen Namen hat.
   ========================================================================== */

.p-wrap { padding-block: var(--s7) var(--s9); }

/* ── Meldung ────────────────────────────────────────────────────────────── */
.p-toast {
    position: fixed; right: var(--s5); bottom: var(--s5); z-index: 500;
    max-width: min(420px, calc(100vw - var(--s7)));
    padding: var(--s3) var(--s4);
    background: rgba(13, 15, 19, .97);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-s);
    box-shadow: var(--sh-2);
    font-size: var(--fs-s);
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.p-toast.is-on { opacity: 1; transform: none; }
.p-toast--good { border-left-color: var(--good); }
.p-toast--warn { border-left-color: var(--warn); }
.p-toast--bad  { border-left-color: var(--bad); }

/* ── Ladezustand ────────────────────────────────────────────────────────── */
.p-loading { display: flex; align-items: center; gap: var(--s3); color: var(--text-3); padding-block: var(--s8); }
.p-spinner {
    width: 20px; height: 20px; flex: none;
    border: 2px solid var(--line-strong); border-top-color: var(--accent);
    border-radius: 50%; animation: p-spin .8s linear infinite;
}
@keyframes p-spin { to { transform: rotate(360deg); } }

/* ── Konto-Zeile ────────────────────────────────────────────────────────── */
.p-me {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s6);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.p-avatar {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    background: var(--surface-3) center/cover no-repeat;
    border: 1px solid var(--line-strong);
    display: grid; place-items: center;
    font-weight: 800; font-size: var(--fs-s);
}
.p-grow { flex: 1 1 auto; min-width: 0; }

/* ── Formular ───────────────────────────────────────────────────────────── */
.p-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-l); padding: var(--s6);
    box-shadow: var(--sh-1);
}
.p-card + .p-card { margin-top: var(--s5); }

.p-field { margin-bottom: var(--s5); }
.p-field > label,
.p-field > .p-label {
    display: block; margin-bottom: var(--s2);
    font-size: var(--fs-s); font-weight: 700;
}
.p-field .p-help { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--text-3); }
.p-req { color: var(--accent-2); }

.p-input, .p-textarea {
    width: 100%;
    padding: var(--s3) var(--s4);
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-s);
    color: var(--text); font: inherit; font-size: var(--fs-m);
    outline: none;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.p-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.p-input::placeholder, .p-textarea::placeholder { color: var(--text-3); }
.p-input:focus, .p-textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.p-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); }

/* Ja/Nein als Knopfpaar — mit dem Finger bedienbar, ohne Fummelei. */
.p-choice { display: flex; gap: var(--s2); flex-wrap: wrap; }
.p-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-choice label {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s5);
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--surface); cursor: pointer;
    font-size: var(--fs-s); font-weight: 600;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.p-choice label:hover { background: var(--surface-2); }
.p-choice input:checked + label {
    background: var(--accent-soft); border-color: var(--accent); color: var(--text);
}
.p-choice input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }

.p-check { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.p-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }

/* ── Discord-Pruefung ───────────────────────────────────────────────────── */
.p-verify {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: 3px var(--s3);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 700;
    border: 1px solid var(--line);
}
.p-verify.is-ok      { color: var(--good); border-color: rgba(52,211,153,.35);  background: rgba(52,211,153,.12); }
.p-verify.is-no      { color: var(--bad);  border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.12); }
.p-verify.is-unknown { color: var(--text-3); }

/* ── Bewerbungsstand ────────────────────────────────────────────────────── */
.p-status__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.p-note {
    padding: var(--s3) var(--s4); margin-bottom: var(--s4);
    background: var(--surface-2); border-left: 3px solid var(--accent);
    border-radius: var(--r-s); font-size: var(--fs-s);
}
.p-facts {
    display: grid; grid-template-columns: minmax(120px, 200px) 1fr;
    gap: var(--s2) var(--s5);
    font-size: var(--fs-s);
}
.p-facts dt { color: var(--text-3); }
.p-facts dd { color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Team ───────────────────────────────────────────────────────────────── */
.p-admin { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--line); }

.p-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.p-tabs button {
    padding: var(--s2) var(--s4);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--surface); color: var(--text-2);
    font-size: var(--fs-s); font-weight: 700;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.p-tabs button:hover { color: var(--text); }
.p-tabs button.is-on { background: var(--accent); border-color: transparent; color: #fff; }

.p-app {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-m); padding: var(--s5);
    transition: opacity var(--t) var(--ease);
}
.p-app + .p-app { margin-top: var(--s3); }
.p-app.is-busy { opacity: .5; }
.p-app__head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.p-app__foot { display: flex; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }
.p-app__foot .p-note-input { flex: 1 1 220px; }

.p-account {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-m);
}
.p-account + .p-account { margin-top: var(--s2); }

.btn--danger { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.4); color: var(--bad); }
.btn--danger:hover { background: rgba(248,113,113,.22); }

.p-search { max-width: 340px; margin-bottom: var(--s4); }

@media (max-width: 720px) {
    .p-facts { grid-template-columns: 1fr; gap: var(--s1) 0; }
    .p-facts dd { margin-bottom: var(--s3); }
    .p-toast { left: var(--s4); right: var(--s4); max-width: none; }
}