/* ================================
   Stock Price Alerts – Modern UI
   (Drop-in Replacement for stock-price-alerts.css)
   Mobile-first, Light/Dark aware
   =============================================== */

/* -------- Design Tokens -------- */
:root{
  --spa-bg: #0b0c10;
  --spa-card: #11121a;
  --spa-text: #e8eaf0;
  --spa-muted:#a7b0c0;
  --spa-border:#1e2230;
  --spa-accent:#6aa3ff;
  --spa-accent2:#18d3b3;
  --spa-danger:#d9534f;
  --spa-success:#3c763d;
  --spa-radius:16px;
  --spa-radius-sm:12px;
  --spa-focus:0 0 0 3px rgba(106,163,255,.35);
  --spa-shadow:0 10px 30px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15);
}
@media (prefers-color-scheme: light){
  :root{
    --spa-bg:#f7f8fb;
    --spa-card:#ffffff;
    --spa-text:#0b1220;
    --spa-muted:#5f6b7c;
    --spa-border:#e7eaf0;
    --spa-shadow:0 10px 30px rgba(15,32,77,.08), 0 4px 12px rgba(15,32,77,.06);
  }
}

/* ---------- Global (scope bleibt neutral, nur Fonts verbessern) ---------- */
.text-center__spa{ text-align:center; }

/* =======================
   Add alert form / Card
   ======================= */
.block__spa{
  border:1px solid var(--spa-border);
  border-radius:var(--spa-radius);
  max-width:min(720px, 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--spa-text);
  padding:24px;
  background:var(--spa-card);
  box-shadow:var(--spa-shadow);
  margin-inline:auto;
}
@media (max-width:640px){
  .block__spa{ padding:18px; }
}

/* Optional Schwarzmodus beibehalten (kompatibel zum alten Flag) */
.block__spa.black{ background:#000; }
.block__spa.black .title__spa{ color:#fff; }
.block__spa.black .current-value__spa{ color:#fff; }

/* Titel */
.title__spa{
  font-weight:800;
  font-size:22px;
  text-align:center;
  margin:0 0 18px;
  color:var(--spa-text);
  letter-spacing:.2px;
}

/* Formular-Layout */
.form-block__spa{
  width:100%;
  margin:0 0 18px 0;
  position:relative;
}
.form-block__spa:last-child{ margin-bottom:10px; }

/* 2-Spalten-Row: benutze .form-addon__spa .form-wrap__spa (bestehend) */
.form-block__spa.form-addon__spa{ margin-bottom:16px; }
.form-block__spa.form-addon__spa .form-wrap__spa{
  display:grid;
  grid-template-columns:1fr auto;
  gap:0;
}

/* Inputs & Selects (native) */
.form-block__spa select,
.form-block__spa input[type="text"]{
  width:100%;
  background:color-mix(in oklab, var(--spa-card) 96%, black 0%);
  color:var(--spa-text);
  border:1px solid var(--spa-border);
  border-radius:var(--spa-radius-sm);
  padding:12px 14px;
  height:auto;
  margin:0;
  font-size:15px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s, color .2s;
  -webkit-appearance:none; appearance:none;
}
@media (prefers-color-scheme: light){
  .form-block__spa select,
  .form-block__spa input[type="text"]{
    background:#fff;
  }
}
.form-block__spa input[type="text"]:focus,
.form-block__spa select:focus{
  border-color:var(--spa-accent);
  box-shadow:var(--spa-focus);
}

/* Addon (Währung etc.) */
.addon__spa{
  display:inline-block;
  padding:0 12px;
  line-height:44px;
  background:color-mix(in oklab, var(--spa-border) 60%, var(--spa-card) 40%);
  border-top-right-radius:var(--spa-radius-sm);
  border-bottom-right-radius:var(--spa-radius-sm);
  font-size:13px;
  text-transform:uppercase;
  color:var(--spa-muted);
  font-weight:700;
}
.form-block__spa.form-addon__spa input[type="text"]{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}

/* Meta / aktueller Wert */
.current-value__spa{
  font-size:12px;
  margin-top:6px;
  color:var(--spa-muted);
}
.current-value__spa span{ font-weight:700; }

/* Buttons */
.form-block__spa button.blue-btn__spa{
  display:inline-block;
  border:1px solid transparent;
  box-shadow:0 6px 18px rgba(24,211,179,.25);
  padding:12px 18px;
  font-size:15px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--spa-accent), var(--spa-accent2));
  transition:filter .2s, transform .06s ease-in;
  font-family:inherit;
  color:#0b0c10;
  cursor:pointer; outline:none;
}
.form-block__spa button.blue-btn__spa:hover{ filter:saturate(1.06) brightness(1.02); }
.form-block__spa button.blue-btn__spa:active{ transform:translateY(1px); }

/* My Alerts Link */
.my-alerts-block__spa a.my-alerts-link__spa{
  color:var(--spa-accent);
  text-decoration:none;
  border-bottom:0; box-shadow:none;
  transition:color .2s, border-color .2s;
  font-size:16px;
}
.my-alerts-block__spa a.my-alerts-link__spa:hover{
  color:var(--spa-text);
  border-bottom:1px dashed var(--spa-accent);
}

/* Info-Banner */
.info__spa{
  border-radius:12px;
  padding:12px 42px 12px 12px;
  margin-bottom:18px;
  font-size:14px;
  position:relative;
  display:none;
  border:1px solid var(--spa-border);
  background:color-mix(in oklab, var(--spa-card) 94%, black 0%);
  color:var(--spa-text);
}
.info__spa.show__spa{ display:block; }
.info__spa button.close-btn__spa{
  background:none; padding:0; margin:0;
  color:var(--spa-muted);
  position:absolute; top:10px; right:10px;
  transition:color .2s, transform .06s ease-in;
  display:inline-block; cursor:pointer; outline:none; border:none; box-shadow:none;
  font-size:16px; line-height:1;
}
.info__spa button.close-btn__spa:hover{ color:var(--spa-text); }
.info__spa button.close-btn__spa:active{ transform:scale(.96); }

/* Statusfarben */
.success__spa{
  color:var(--spa-success);
  background-color:color-mix(in oklab, var(--spa-success) 18%, white);
  border-color:color-mix(in oklab, var(--spa-success) 28%, white);
}
.error__spa{
  color:#a94442;
  background-color:color-mix(in oklab, #a94442 15%, white);
  border-color:color-mix(in oklab, #a94442 25%, white);
}

/* =======================
   Select2 (Plugin-Klassen)
   ======================= */
.select2-container--default .select2-selection--single{
  border:1px solid var(--spa-border);
  border-radius:var(--spa-radius-sm);
  background:color-mix(in oklab, var(--spa-card) 96%, black 0%);
  min-height:44px;
  padding:.4rem .75rem;
}
@media (prefers-color-scheme: light){
  .select2-container--default .select2-selection--single{
    background:#fff;
  }
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  font-size:15px;
  color:var(--spa-text);
  line-height:1.3;
}
.select2-results__option{
  font-size:14px;
  font-family:inherit;
  color:var(--spa-text);
}
.select2-dropdown{
  background:color-mix(in oklab, var(--spa-card) 96%, black 0%);
  border:1px solid var(--spa-border);
}
.select2-results__option--highlighted{
  background:linear-gradient(135deg, var(--spa-accent), var(--spa-accent2));
  color:#0b0c10;
}

/* =======================
   Spinner
   ======================= */
.spinner__spa{
  width:20px; height:20px; position:absolute;
  top:8px; right:12px; display:none;
}
.double-bounce1,.double-bounce2{
  width:100%; height:100%; border-radius:50%;
  background:var(--spa-accent);
  opacity:.6; position:absolute; inset:0;
  animation:sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2{ animation-delay:-1.0s; }
@keyframes sk-bounce{
  0%,100%{ transform:scale(0.0) }
  50%{ transform:scale(1.0) }
}

/* =======================
   DataTables
   ======================= */
table.dataTable{ border-collapse:collapse !important; width:100%; }
table.dataTable thead th, table.dataTable thead td,
table.dataTable tbody th, table.dataTable tbody td{
  padding:10px;
  border-top:1px solid var(--spa-border);
}
table.dataTable thead th{
  background:color-mix(in oklab, var(--spa-card) 94%, black 0%);
  color:var(--spa-muted);
  border-bottom:1px solid var(--spa-border);
  font-weight:700;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:10px !important;
  border:1px solid var(--spa-border) !important;
  padding:.4rem .6rem !important;
  margin:.15rem !important;
  color:var(--spa-text) !important;
  background:transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:linear-gradient(135deg, var(--spa-accent), var(--spa-accent2)) !important;
  color:#0b0c10 !important;
  border-color:transparent !important;
}
.dataTables_wrapper .dataTables_filter input{
  background:color-mix(in oklab, var(--spa-card) 96%, black 0%);
  color:var(--spa-text);
  border:1px solid var(--spa-border);
  border-radius:10px;
  padding:.45rem .6rem; outline:none;
}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color:var(--spa-accent); box-shadow:var(--spa-focus);
}

/* =======================
   My Alerts Page
   ======================= */
.my-alerts__spa{
  font-family:inherit;
  max-width:100%;
  overflow-x:auto;
  font-size:14px;
}
.my-alerts__spa table{ font-size:14px; text-align:center; width:100%; }
.my-alerts__spa table thead{ background:color-mix(in oklab, var(--spa-card) 94%, black 0%); }
.my-alerts__spa .condition__spa::first-letter{ text-transform:uppercase; }

/* Action Buttons */
.my-alerts__spa button.deactivate__spa,
.my-alerts__spa button.remove__spa{
  display:inline-block; border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:.55rem .8rem;
  font-size:14px; border-radius:999px;
  background:linear-gradient(135deg, #ff7b6b, var(--spa-danger));
  transition:filter .2s, transform .06s ease-in;
  color:#fff; cursor:pointer; outline:none; text-transform:none;
}
.my-alerts__spa button.deactivate__spa:hover,
.my-alerts__spa button.remove__spa:hover{ filter:saturate(1.05) brightness(1.02); }
.my-alerts__spa button.deactivate__spa:active,
.my-alerts__spa button.remove__spa:active{ transform:translateY(1px); }

/* Responsive: Tabellen lesbarer auf Handy */
@media (max-width:768px){
  .my-alerts__spa table{ text-align:left; }
  .my-alerts__spa table th, .my-alerts__spa table td{ padding:10px 8px; }
}

/* ---------- Subtile Seitenhintergründe, nur wenn Plugin sichtbar ---------- */
body:has(.block__spa){
  background:
    radial-gradient(1200px 800px at 100% -10%, rgba(24,211,179,.18), transparent 40%),
    radial-gradient(900px 700px at -10% 100%, rgba(106,163,255,.18), transparent 45%),
    var(--spa-bg);
}