/* ===== SSP Dark Theme – DMXControl Forum Match (Bootstrap 5) ===== */
/* Branding/Palette */
:root{
  --bg: #121212;            /* Grund */
  --bg-elev: #1d1d1f;       /* Karten */
  --bg-elev-2: #232326;     /* Header/Footer von Cards/Nav */
  --text: #ececec;          /* Primärtext */
  --muted: #b7b7b7;         /* Sekundärtext */
  --border: #2e2e33;        /* Rahmenlinien */
  --shadow: rgba(0,0,0,.65);/* Schatten */

  --accent: #ff8a00;        /* Forum-Orange */
  --accent-weak: #ffb259;   /* Hover */
  --accent-soft: rgba(255,138,0,.28); /* Fokus-Glow */

  --success: #42c47e;
  --warning: #e6b84d;
  --danger:  #ff5c5c;
}

/* ===== Seite + Hintergrundbild ===== */
html, body{
  background-color:#0f0f10;           /* Basis – NICHT !important, JS setzt Bild */
  color: var(--text);
  font-size: 12pt;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
/* Body-Hintergrund (vom SSP-Script) respektieren */
body{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
}
/* Orangener Glow als Overlay – verdeckt das Bild nicht */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(900px 500px at 75% 75%, rgba(255,138,0,.10), transparent 60%);
}
/* Inhalte über das Overlay */
.navbar, .container, .card, #footer{ position:relative; z-index:1; }

/* ===== Layoutbreite ===== */
.container{ max-width: 1200px !important; }
.card{ max-width: 900px; margin: 0 auto; }

/* ===== Navbar ===== */
.bg-body-tertiary,
.navbar, .navbar-default, .navbar-expand, .navbar-light, .navbar-dark{
  background: var(--bg-elev) !important;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.navbar .navbar-brand, 
.navbar .nav-link, 
.navbar .navbar-text{
  color: var(--text) !important;
}
.navbar .nav-link:hover, 
.navbar .navbar-brand:hover{
  color: var(--accent) !important;
}
/* Toggler */
.navbar-toggler{ border-color:#666 !important; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(236,236,236,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* Navbar-Logo – Option A: kleiner */
.navbar .menu-logo{ height:18px !important; margin-right:8px; }
/* Option B: ausblenden – falls gewünscht */
/* .navbar .menu-logo{ display:none !important; } */

/* ===== Cards / Boxen ===== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02)), var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px var(--shadow) !important;
  color: var(--text);
}
.card-success{ background: var(--bg-elev) !important; }
.card .card-header, .card .card-footer{
  background: var(--bg-elev-2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* ===== Alerts ===== */
.alert{
  border: 1px solid var(--border) !important;
  background: var(--bg-elev) !important;
  color: var(--text) !important;
}
.alert-success{ background:#14241b !important; border-color:#285a37 !important; color:#b8f1d2 !important; }
.alert-warning{ background:#2a2114 !important; border-color:#4a3a1a !important; color:#ffe0a3 !important; }
.alert-danger { background:#2a1515 !important; border-color:#5a1e1e !important; color:#ffb3b3 !important; }
/* Info-Box (Formcontainer) – neutral dunkel statt „Bootstrap-Blau“ */
.alert-info{ background:#1d1d1f !important; border-color:#2e2e33 !important; color:#e0e0e0 !important; }

/* ===== Formulare ===== */
.form-group label, .col-form-label{ color: var(--muted) !important; }
.input-group-text{
  background: var(--bg-elev-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.form-control, input, select, textarea{
  background: #17171a !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.form-control::placeholder{ color:#8c8c8f !important; }
.form-control:focus, select:focus, textarea:focus{
  outline:none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .2rem var(--accent-soft) !important;
}
/* Form-Elemente innerhalb der Info-Box ebenfalls dunkel halten */
.alert-info .input-group-text{
  background:#232326 !important; color:#b7b7b7 !important; border-color:#2e2e33 !important;
}
.alert-info .form-control{
  background:#17171a !important; color:#ececec !important; border-color:#2e2e33 !important;
}

/* ===== Buttons ===== */
.btn, button{
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  background: #2a2a2e !important;
}
.btn:hover, button:hover{ background:#34343a !important; }

/* „Senden“ ist .btn-success → auf Orange mappen */
.btn-success{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#111 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn-success:hover{
  background: var(--accent-weak) !important;
  border-color: var(--accent-weak) !important;
  color:#111 !important;
}

/* Links */
a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-weak); }

/* ===== Tabellen (falls genutzt) ===== */
.table{ color: var(--text) !important; background: var(--bg-elev) !important; }
.table thead th{ border-bottom: 1px solid var(--border) !important; color: var(--muted) !important; }
.table td, .table th{ border-top: 1px solid var(--border) !important; }

/* ===== Footer ===== */
#footer, div#footer{
  background: var(--bg-elev) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}

/* ===== Captcha/sonstiges ===== */
.captcha{
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px !important;
}

/* SSH-Key Textarea */
textarea#sshkey{
  background:#17171a !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  min-height:10em !important;
  resize: vertical !important;
  word-break: break-all !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===== Print hell ===== */
@media print{
  html, body{ background:#fff !important; color:#000 !important; }
  .card{ background:#fff !important; border-color:#ddd !important; box-shadow:none !important; }
}