/*
  Created by Enderpearl.de (Pablo8464), inspired by Tutorialwork
  © 2025 - WebApply

  theme.css – Zentrales Dark-Theme für alle Seiten.
  Ersetzt die früheren, pro Seite kopierten <style>-Blöcke.
*/

:root{
  --bg: #0b0b12;
  --surface-1: #1d232c;   /* Karten, Tabs, Modals */
  --surface-2: #2b2f3a;   /* Buttons, Trennlinien */
  --surface-3: #3a3f4a;   /* Ränder */
  --surface-hover: #353b47;
  --input-bg: #121620;
  --text-1: #ffffff;
  --text-2: #e5e8ec;
  --text-3: #b8c0ca;
  --brand: #178522;
  --brand-2: #145018;
  --accent: #5662f6;
  --accent-2: #3e49c5;
  --danger: #aa2d2d;
  --danger-2: #861f1f;
  --border-soft: rgba(255,255,255,0.14);
  --focus-ring: 0 0 0 3px rgba(23,133,34,0.25);
}

/* ---------- Basis ---------- */
html, body { margin:0; padding:0; overflow-x:hidden; width:100%; }
*, *::before, *::after { box-sizing:border-box; }

body{
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at top right, rgba(23,133,34,0.6) 0%, transparent 70%),
    radial-gradient(circle at bottom left, rgba(23,133,34,0.6) 0%, transparent 70%);
  background-repeat:no-repeat;
  background-size:450px 450px, 450px 450px;
  background-position:top right, bottom left;
  color: var(--text-1);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  margin:0; padding:0;
}
a { text-decoration:none; color:inherit; }

/* ---------- Layout ---------- */
.main{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; padding:2rem 1rem; gap:1rem;
}
.icon { width:160px; margin:2rem 0 1rem; z-index:1; }
.intro { text-align:center; padding:0 1rem; z-index:1; }
.intro h1 { font-size:2rem; font-weight:700; margin:0 0 0.4rem; }

@media (max-height: 700px){
  .main { justify-content:flex-start; padding-top:1rem; }
}

/* ---------- Karten ---------- */
.form-wrapper { width:100%; display:flex; justify-content:center; padding:1rem; z-index:1; }
.login-card, .settings-card, .apply-card{
  width:100%;
  background: var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:1.4rem 1.25rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.login-card { max-width:480px; }
.settings-card { max-width:640px; }
.settings-card.centered { text-align:center; }
.settings-card.centered h5 { text-align:center; margin:0 0 .75rem; }
.apply-card { max-width:820px; padding:1.5rem; }
.login-card h1, .settings-card h1, .apply-card h1 { font-size:1.6rem; font-weight:700; margin:0 0 .75rem; }
hr { border:none; border-top:1px solid var(--surface-2); margin:0.5rem 0 1rem; }

@media (max-width: 480px){
  .apply-card { padding:1.1rem; }
  .intro h1 { font-size:1.6rem; }
}

/* ---------- Startseite: Rollen-Karten ---------- */
.wrapper{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem; width:100%; max-width:1200px; z-index:1;
  padding:2rem 1rem 1rem;
}
.card{
  flex:0 0 260px; height:140px;
  background:rgba(255,255,255,0.05);
  border-radius:12px; padding:1.25rem; text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,0.5);
  display:flex; flex-direction:column;
  transition:transform 0.3s; overflow:hidden;
}
.card:hover { transform:translateY(-5px); }
.card h2 { font-size:1.2rem; font-weight:700; margin:0 0 0.5rem; letter-spacing:0.3px; }
.card .details { flex:1; }
@media (max-width: 480px){
  .card { flex:1 1 100%; max-width:360px; height:160px; }
}

/* ---------- Formulare ---------- */
.field { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:0.9rem; }
.field label { font-weight:600; color:var(--text-2); }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%;
  background: var(--input-bg);
  border:1px solid var(--surface-2);
  color: var(--text-2);
  border-radius:8px;
  padding:0.65rem 0.8rem;
  outline:none;
  transition:border-color 0.2s;
}
.field textarea { min-height:160px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--brand); box-shadow: var(--focus-ring);
}
::placeholder { color:var(--text-3); opacity:1; }

/* Absatz-Label + Input direkt in der Karte (settings.php) */
.settings-card p { font-weight:600; color:var(--text-2); margin:0.9rem 0 0.4rem; }
.settings-card > form input[type="text"],
.settings-card > form input[type="email"],
.settings-card > form input[type="password"]{
  width:100%;
  background: var(--input-bg);
  border:1px solid var(--surface-2);
  color: var(--text-2);
  border-radius:8px;
  padding:0.65rem 0.8rem;
  outline:none;
  transition:border-color 0.2s;
  margin-bottom:0.6rem;
}
.settings-card input:focus { border-color:var(--brand); box-shadow: var(--focus-ring); }

/* Grüner Absenden-Button in Karten-Formularen
   (:not(.iconbutton) – Icon-Buttons in Tabellen sind ebenfalls type=submit) */
.login-card button[type="submit"]:not(.iconbutton):not(.btn),
.settings-card button[type="submit"]:not(.iconbutton):not(.btn),
.apply-card button[type="submit"]:not(.iconbutton):not(.btn){
  padding:0.6rem 1.2rem;
  background: var(--brand); color:#fff;
  border:0; border-radius:8px; font-weight:600; font-family:inherit; font-size:1rem;
  transition:background 0.3s, transform 0.2s, box-shadow 0.2s;
  margin:0.75rem auto 0; cursor:pointer; display:block;
}
.login-card button[type="submit"]:not(.iconbutton):not(.btn):hover,
.settings-card button[type="submit"]:not(.iconbutton):not(.btn):hover,
.apply-card button[type="submit"]:not(.iconbutton):not(.btn):hover{
  background: var(--brand-2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.35);
}


/* Hinweistext unter Formular-Labels */
.form-hint { display:block; font-weight:400; font-size:.85rem; color:var(--text-3); margin-top:.15rem; }
.webhook-actions { margin:0 0 .4rem; }

/* ---------- Buttons ----------
   Einheitliche Höhe (42px) + Flex-Zentrierung, damit Buttons und Icon-Buttons
   nebeneinander immer auf einer Linie sitzen. */
.btn, .btn-red, .btn-green{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:42px; padding:0 1.2rem; border-radius:8px; font-weight:600;
  font-family:inherit; font-size:1rem; cursor:pointer;
  color:#fff; transition:background .25s;
}
.btn { background:var(--surface-2); border:1px solid var(--surface-3); }
.btn:hover { background:var(--surface-hover); }
.btn-red { background:var(--danger); border:1px solid var(--danger); }
.btn-red:hover { background:var(--danger-2); border-color:var(--danger-2); }
.btn-green { background:var(--brand); border:1px solid var(--brand); }
.btn-green:hover { background:var(--brand-2); border-color:var(--brand-2); }
.btn i, .btn-red i, .btn-green i, .btn-footer i { margin:0; }

.btn-apply{
  padding:0.6rem 1.2rem; background:var(--brand); color:#fff;
  border-radius:8px; font-weight:600;
  transition:background 0.3s, transform 0.2s, box-shadow 0.2s;
  margin-top:auto; display:inline-block; white-space:nowrap;
}
.btn-apply:hover { background:var(--brand-2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.35); }

.btn-footer{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:42px; padding:0 1.2rem; border-radius:8px; font-weight:600; color:#fff;
  transition:background 0.25s, transform 0.2s, box-shadow 0.2s;
}
.btn-footer:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.btn-footer.login { background:var(--accent); }
.btn-footer.login:hover { background:var(--accent-2); }
.btn-footer.home { background:var(--brand); }
.btn-footer.home:hover { background:var(--brand-2); }

.iconbutton{
  background:var(--accent); border:1px solid var(--accent); color:#fff;
  border-radius:8px; width:36px; height:36px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s;
}
.iconbutton:hover { background:var(--accent-2); }

.loginicon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--surface-3); color:#fff;
  transition:background .25s;
}
.loginicon:hover { background:var(--surface-hover); }

.actions { display:flex; gap:.6rem; justify-content:center; align-items:center; margin-top:1.2rem; flex-wrap:wrap; }
.footer-actions { align-items:center; }

/* ---------- Meldungen ---------- */
.error{
  background:rgba(170,45,45,0.30); border:1px solid rgba(170,45,45,0.65);
  color:#ffe3e3; padding:.7rem .9rem; border-radius:8px;
}
.success{
  background:rgba(23,133,34,0.25); border:1px solid rgba(23,133,34,0.6);
  color:#d9f3dc; padding:.7rem .9rem; border-radius:8px;
}
#pw { color:#97d79f; text-decoration:underline; display:block; text-align:center; margin-top:.75rem; }
#status { display:block; margin:.6rem auto; }
.status-block { text-align:center; display:flex; flex-direction:column; align-items:center; }
.discord-cta { margin-top:1.25rem; }

/* ---------- Footer ---------- */
footer{
  margin-top:auto; padding:1.25rem 1rem 1.75rem; text-align:center; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:0.75rem;
}
.footer-actions { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; }
.copyright { font-size:0.875rem; color:#aaa; }

/* ---------- SweetModal: Dark Theme ----------
   !important nötig, um die minifizierten Vendor-Styles zu überschreiben.
   Achtung: Es gibt KEINEN ».sweet-modal«-Vorfahren im Vendor-Markup –
   nur .sweet-modal-overlay > .sweet-modal-box. */
.sweet-modal-overlay { background:rgba(13,15,20,0.92) !important; }
.sweet-modal-box{
  background:var(--surface-1) !important;
  border:1px solid var(--border-soft) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.35) !important;
}
.sweet-modal-title-wrap { border-color:var(--surface-2) !important; box-shadow:none !important; }
.sweet-modal-buttons { border-color:var(--surface-2) !important; background:var(--surface-1) !important; }
.sweet-modal-title,
.sweet-modal-title * { color:#fff !important; }
.sweet-modal-title { font-weight:700; }

.sweet-modal-content,
.sweet-modal-content *:not(.btn):not(.btn-green):not(.btn-red):not(.iconbutton) { color:var(--text-2) !important; }
.sweet-modal-content h1,
.sweet-modal-content h2,
.sweet-modal-content h3,
.sweet-modal-content h4,
.sweet-modal-content h5,
.sweet-modal-content h6 { color:#fff !important; }
.sweet-modal-content a { color:#97d79f !important; text-decoration:underline; }
.sweet-modal-content small,
.sweet-modal-content .muted { color:var(--text-3) !important; }
.sweet-modal-content label { color:var(--text-2) !important; }

.sweet-modal-content input[type="text"],
.sweet-modal-content input[type="number"],
.sweet-modal-content input[type="email"],
.sweet-modal-content input[type="password"],
.sweet-modal-content select,
.sweet-modal-content textarea{
  background:var(--input-bg) !important; color:#fff !important;
  border:1px solid var(--surface-3) !important; border-radius:8px; padding:.55rem .7rem;
}
.sweet-modal-content input:focus,
.sweet-modal-content select:focus,
.sweet-modal-content textarea:focus{
  border-color:var(--brand) !important; box-shadow:var(--focus-ring) !important; outline:none;
}
.sweet-modal-content ::placeholder { color:#9aa3af !important; opacity:1; }
.sweet-modal-content .checkbox { display:flex; align-items:center; gap:.5rem; }
.sweet-modal-content select option { color:#fff; background:var(--input-bg); }

.sweet-modal-content .btn,
.sweet-modal-content .btn:hover{
  background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important;
  padding:.55rem .7rem !important; box-shadow:none !important; transform:none !important;
}
.sweet-modal-content .btn:hover { background:var(--brand-2) !important; }
.sweet-modal-content .btn-green,
.sweet-modal-content .btn-red { color:#fff !important; text-decoration:none !important; }

/* Tabellen im Modal (Bewerbungs-Ansicht) – ohne Hover-Effekt */
.sweet-modal-content table { width:100%; border-collapse:collapse; background:transparent !important; }
.sweet-modal-content th { background:var(--surface-2) !important; color:#fff !important; padding:.55rem .65rem; text-align:left; }
.sweet-modal-content td { background:transparent !important; color:var(--text-2) !important; border-top:1px solid var(--surface-2) !important; padding:.5rem .65rem; }
.sweet-modal-content table tr:hover th,
.sweet-modal-content table th:hover { background:var(--surface-2) !important; }
.sweet-modal-content table tr:hover td,
.sweet-modal-content table td:hover { background:transparent !important; }

/* Bewerbungs-Ansicht im Modal (Inhalt kommt aus ajax.php) */
.modal-wrapper { max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.modal-scroll { max-height:65vh; overflow:auto; -webkit-overflow-scrolling:touch; }
.modal-fields { width:100%; border-collapse:collapse; table-layout:fixed; }
.sweet-modal-content .modal-fields th,
.sweet-modal-content .modal-fields td { padding:4px 8px; border-bottom:1px solid var(--surface-2); border-top:none !important; font-size:14px; }
.sweet-modal-content .modal-fields tr:last-child th,
.sweet-modal-content .modal-fields tr:last-child td { border-bottom:none; }
.apply-text{
  max-height:300px; overflow:auto; white-space:normal; word-break:break-word; overflow-wrap:anywhere;
  line-height:1.4; font-size:14px; background:var(--input-bg); padding:6px;
  border:1px solid var(--surface-2); border-radius:4px; box-sizing:border-box; color:var(--text-2);
}

/* Weißen Kreis hinter dem Success-Icon entfernen */
.sweet-modal-box .sweet-modal-icon.sweet-modal-success::before,
.sweet-modal-box .sweet-modal-icon.sweet-modal-success::after,
.sweet-modal-box .sweet-modal-icon.sweet-modal-success .sweet-modal-fix { background:transparent !important; }

/* Close-Button */
.sweet-modal-close a.sweet-modal-close-link{
  background-color:#1c1e23 !important;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23fff" /></svg>') !important;
}
.sweet-modal-close a.sweet-modal-close-link:hover { background-color:var(--brand) !important; }