/* ===============================
   /css/advanced.css – Advanced Tool
   =============================== */

:root{
  --adv-ctl-h: 44px;           /* einheitliche Höhe für Inputs/Buttons */
  --adv-radius: 10px;
  --adv-border: #d7dce6;       /* Feldrahmen */
  --adv-ring: rgba(99,102,241,.35);
}

/* Panel (weiß) mit Marken-Ribbon links */
.adv-panel{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 6px 36px rgba(0,0,0,.08);
  padding:1rem 1.25rem 1rem 1.15rem; /* innen genug Platz */
  color:#0f172a;
  position:relative;
}
.adv-panel::before{
  content:"";
  position:absolute; inset:0 auto 0 -6px; width:6px; border-radius:16px;
  background:linear-gradient(180deg,#1C4FD8,#3A7FF5);
}
.adv-lead{ margin:.2rem 0 .9rem; }
.adv-lead h3, .adv-lead p, .adv-panel label{ color:#0f172a; }

/* Steuerzeile: Datei, Streams, Dauer, Start, Stopp in einer Reihe */
.controls{
  display:grid;
  grid-template-columns: repeat(5, max-content);
  gap:.75rem .9rem;
  align-items:end;
  justify-content:flex-start;
  margin-top:.75rem;margin-bottom: 1.6rem; 
}
.field{ display:flex; flex-direction:column; gap:.35rem; }
label{ font-weight:700; font-size:.92rem; }

/* Eingaben: sichtbare Rahmen, einheitliche Höhe */
select,
input[type="number"],
input[type="text"]{
  height: var(--adv-ctl-h);
  border:1px solid var(--adv-border);
  border-radius: var(--adv-radius);
  padding: .55rem .7rem;
  font:inherit;
  background:#fff;
  color:#0f172a;
}
select:focus,
input:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--adv-ring);
}

/* Datei-Select: nur so breit wie nötig, JS passt final an */
#file{ width:fit-content; max-width:100%; }

/* Buttons: identische Höhe für Start, Stopp, Bestätigen, Neu laden */
#start,
#stop,
.captcha-form .btn,
#captcha-reload{
  min-height: var(--adv-ctl-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1rem;
  border-radius:12px;
  font-weight:800;
  line-height:1;
}

/* Start/Stop-Styles */
#start{
  border:0;
  background: linear-gradient(135deg,#5FB800,#9CEF00);
  color:#081b00;
  cursor:pointer;
}
#stop{
  border:1px solid var(--adv-border);
  background:#fff;
  color:#0f172a;
  cursor:pointer;
}
#stop.running{
  border-color:#7f1d1d; color:#fff;
  background: linear-gradient(135deg,#dc2626,#b91c1c);
}
button[disabled]{ opacity:.6; cursor:not-allowed; }

/* Captcha-Zeile (über volle Breite unter den Controls) */
.controls .span-full{ grid-column:1 / -1; }
.captcha-grid{
  display:grid;
  grid-template-columns: max-content max-content 260px max-content;
  gap:.6rem .6rem;
  align-items:center;
}
#captcha-img{
  background:#fff;
  border:1px solid var(--adv-border);
  border-radius:8px;
}

/* Captcha-Meldung */
.cap-msg{
  padding:.5rem .66rem;
  border-radius:8px;
  margin-top:.4rem;
  min-height:1.2em;
  background:#fff;
  color:#0f172a;
  border-left:4px solid transparent;
}
.cap-msg.is-ok{ border-left-color:#61CF00; }
.cap-msg.is-fehler{ border-left-color:#ffb224; }

/* Statistik-Karten: +15px extra Abstand nach unten von den Controls */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
  margin-top: calc(.9rem + 15px);
}
.stat{
  background:linear-gradient(180deg,#fff,#f8fafc);
  border:1px solid var(--adv-border);
  border-radius:12px;
  padding:.65rem .75rem;
  color:#0f172a;
}
.stat .k{ font-size:.82rem; color:#334155; }
.stat .v{ font-size:1.25rem; font-weight:800; }
.stat .mbit{ font-weight:400; font-size:.9em; opacity:.8; margin-left:.25rem; }

/* Chart bündig zur Panelbreite */
.chart-wrap{ margin-top:1rem; }
#chart{
  width:100%; height:300px; display:block;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  border:1px solid var(--adv-border);
  border-radius:12px;
}

/* Breite: [1]=Momentan größer, [4]=Restzeit kleiner */
@media (min-width: 901px){
  .stats{
    grid-template-columns: 1.3fr 1.1fr 1.1fr 0.6fr;
  }
}


/* Responsive */
@media (max-width: 900px){
  /* 2 Spalten, die sich dem Viewport anpassen */
  .controls{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: .75rem;
    align-items: start;
  }
  /* Elemente dürfen schrumpfen */
  .controls .field{ min-width: 0; }

  /* Keine Überläufe rechts */
  .controls select,
  .controls input[type="number"],
  .controls button{
    width: 100%;
    max-width: 100%;
  }

   .captcha-grid{
    grid-template-columns: max-content 1fr;
    column-gap: .6rem;
    row-gap: .4rem;
  }
  .captcha-grid > *{ min-width: 0; }

  /* Eingabefeld vollbreit, kein Overflow */
   #captcha-input{ max-width: 24ch; }

  /* Statistik bleibt 2-spaltig flexibel */
  .stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ===== Fix: Captcha-Reihe sauber scopen und ausrichten ===== */
#adv-cap{ contain:layout; margin-top:.25rem; }
#adv-cap .captcha-grid{
  grid-template-columns: 150px max-content 240px max-content; /* Bild | Neu laden | Eingabe | Bestätigen */
  gap:.6rem .6rem;
  align-items:center;
}
#adv-cap #captcha-img{ height:70px; width:auto; background:#fff; border:1px solid var(--adv-border); border-radius:8px; }
#adv-cap input.input{
  height: var(--adv-ctl-h);
  border:1px solid var(--adv-border);
  border-radius: var(--adv-radius);
  padding:.55rem .7rem; font:inherit; color:#0f172a; background:#fff;
}
#adv-cap .btn,
#adv-cap #captcha-reload{
  min-height: var(--adv-ctl-h);
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; line-height:1; white-space:nowrap; border-radius:12px;
}
#adv-cap .btn.ghost{
  background:#fff; color:#0f172a; border:1px solid var(--adv-border);
}
#adv-cap .btn.primary{
  background:#0f766e; color:#fff; border:1px solid #0f766e;
}
/* Abstand der Stats bleibt konsistent */
.stats{ margin-top: calc(.9rem + 15px); }

/* Captcha-Reihe separat, beeinflusst .controls nicht */
.cap-row{ margin-top:.75rem; }
.cap-row .captcha-grid{
  display:grid;
  grid-template-columns: 150px max-content 240px max-content; /* Bild | Neu laden | Eingabe | Bestätigen */
  gap:.6rem .6rem;
  align-items:center;
}
.cap-row #captcha-img{
  height:70px; width:auto;
  background:#fff; border:1px solid var(--adv-border); border-radius:8px;
}
.cap-row input.input{
  height: var(--adv-ctl-h);
  border:1px solid var(--adv-border);
  border-radius: var(--adv-radius);
  padding:.55rem .7rem; font:inherit; color:#0f172a; background:#fff;
}
.cap-row .btn,
.cap-row #captcha-reload{
  min-height: var(--adv-ctl-h);
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; line-height:1; white-space:nowrap; border-radius:12px;
}
.cap-row .btn.ghost{ background:#fff; color:#0f172a; border:1px solid var(--adv-border); }
.cap-row .btn.primary{ background:#0f766e; color:#fff; border:1px solid #0f766e; }


/* Captcha mobil: kein Überlaufen rechts */
@media (max-width: 900px){
  .adv-panel .cap-row{ overflow:hidden; }

  .adv-panel .captcha-grid{
    display:grid;
    grid-template-columns: max-content 1fr;     /* Bild | flexible Spalte */
    grid-template-areas:
      "img reload"
      ".   input"
      ".   submit";                              /* Button unter das Feld */
    column-gap: .6rem;
    row-gap: .5rem;
    align-items: center;
  }

  #captcha-img{ grid-area: img; }
  #captcha-reload{ grid-area: reload; justify-self: start; }

  #captcha-input{
    grid-area: input;
    width: 100%;
    max-width: 100%;
    min-width: 0;                                /* verhindert Grid-Overflow */
  }

  .captcha-form .btn.primary{
    grid-area: submit;
    justify-self: start;
    max-width: 100%;
  }
}