/* IJssel Speedtest – IJsselStudio huisstijl (groen/oranje)
   Drop-in vervanging voor de oude paarse styling.
   Kleuren:
   - Groen:  #7CDA24
   - Oranje: #FA921F
*/

/* Core layout */
.ijs-wrap{
  --ij-green:#7CDA24;
  --ij-orange:#FA921F;
  --ij-text:#0f172a;
  --ij-muted:#64748b;
  --ij-border:rgba(15, 23, 42, .10);
  --ij-soft:#7CDA24;
  --ij-soft2:rgba(250,146,31,.10);
  --ij-radius:0px;
  --ij-shadow:0 10px 28px rgba(15, 23, 42, .08);

  max-width:95% !important;
  margin:0 auto 28px;
}

.ijs-title{
  margin:0 0 10px;
  font-size:32px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--ij-green);
}
.ijs-sub{ margin:0 0 18px; color:var(--ij-muted); }

.ijs-label{ display:block; font-weight:900; margin:16px 0 8px; color:var(--ij-text); }

.ijs-input{
  width:100%;
  height:54px;
  border-radius:var(--ij-radius);
  border:1px solid var(--ij-border) !important;
  border:1px solid var(--ij-orange) !important;
  background:#fff;
  padding:18px 20px !important;
  font-size:16px;
  outline:0;
  box-shadow:none;
  color:var(--ij-text);
}
.ijs-input:focus{
  border-color:rgba(250,146,31,.55) !important;
  box-shadow:0 0 0 4px var(--ij-soft2);
}

.ijs-actions{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }

.ijs-btn{
  height:48px;
  padding:0 22px;
  border-radius:var(--ij-radius);
  border:1px solid rgba(0,0,0,.06);
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background:var(--ij-orange);
  box-shadow:0 10px 22px rgba(250,146,31,.20);
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.ijs-btn:hover{ filter:brightness(.98); }
.ijs-btn:active{ transform:translateY(1px); }

.ijs-btn.-ghost{
  background:#fff;
  color:var(--ij-green);
  border:1px solid rgba(124,218,36,.55);
  box-shadow:none;
}
.ijs-btn.-ghost:hover{ background:var(--ij-green); color:#fff; border-color:var(--ij-green); }

.ijs-result{ margin-top:26px; padding-top:18px; border-top:1px solid rgba(15,23,42,.08); }

.ijs-score{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  background:var(--ij-soft);
  color:#ffffff;
  margin-bottom:12px;
  border:1px solid rgba(124,218,36,.35);
}

.badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(15,23,42,.06);
  color:var(--ij-text);
  border:1px solid var(--ij-border);
}
.badge.good{ background:rgba(124,218,36,.12); color:#14532d; border-color:rgba(124,218,36,.45); }
.badge.warn{ background:rgba(250,146,31,.14); color:#7c2d12; border-color:rgba(250,146,31,.45); }
.badge.bad{  background:rgba(220,38,38,.10); color:#7f1d1d; border-color:rgba(220,38,38,.35); }

/* Timeline */
.tl{ margin-top:12px; }
.tl-legend{ display:flex; align-items:center; gap:10px; color:var(--ij-muted); font-size:12px; margin-bottom:6px; }
.tl-bar{ position:relative; height:12px; background:rgba(15,23,42,.06); border-radius:999px; overflow:hidden; border:1px solid var(--ij-border); }
.tl .seg{ display:inline-block; height:100%; }
.tl .seg.dns{ background:rgba(124,218,36,.55); }
.tl .seg.tcp{ background:rgba(124,218,36,.35); }
.tl .seg.tls{ background:rgba(250,146,31,.45); }
.tl .seg.wait{ background:rgba(250,146,31,.75); }
.tl .seg.recv{ background:rgba(15,23,42,.30); }
.tl-ms{ color:var(--ij-muted); font-size:12px; margin-top:6px; text-align:right; }

/* KPIs */
.ijs-kpis{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:10px; }
@media (min-width:720px){ .ijs-kpis{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.ijs-kpi{ background:#fff; border:1px solid var(--ij-border); border-radius:var(--ij-radius); padding:14px; box-shadow:var(--ij-shadow); }
.ijs-kpi .label{ color:var(--ij-muted); font-size:12px; font-weight:900; }
.ijs-kpi .value{ font-size:20px; font-weight:900; color:var(--ij-text); }
.kpi-bad{ background:rgba(220,38,38,.06) !important; border-color:rgba(220,38,38,.22) !important; }
.kpi-good{ background:rgba(124,218,36,.08) !important; border-color:rgba(124,218,36,.28) !important; }

/* Mobiel */
.ijs-mobile{ margin-top:18px; }
.mob-title{ font-weight:900; color:var(--ij-text); margin-bottom:6px; }
.mob-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.mob-card{ background:#fff; border:1px solid var(--ij-border); border-radius:var(--ij-radius); padding:12px; box-shadow:var(--ij-shadow); }
.mob-card.good{ background:rgba(124,218,36,.08); border-color:rgba(124,218,36,.28); }
.mob-card.warn{ background:rgba(250,146,31,.10); border-color:rgba(250,146,31,.25); }
.mob-card.bad{ background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.20); }
.mob-card .m-label{ color:var(--ij-muted); font-size:12px; font-weight:900; }
.mob-card .m-value{ font-size:18px; font-weight:900; color:var(--ij-text); }
.mob-note{ margin-top:6px; font-size:12px; color:var(--ij-muted); }
@media (max-width:680px){ .mob-grid{ grid-template-columns:1fr; } }

/* Meta & lists */
.ijs-meta{ margin-top:32px; }
.ijs-notes, .ijs-recos{ margin:6px 0 0 0; padding-left:18px; font-size:14px; color:var(--ij-text); }
.ijs-recos li{ position:relative; padding-left:22px; }
.ijs-recos li .ico{ position:absolute; left:0; top:0; font-size:14px; }
.ijs-recos li.warn .ico{ color:var(--ij-orange); }
.ijs-recos li.bad .ico{ color:#dc2626; }
.ijs-recos li.neutral .ico{ color:var(--ij-text); }

/* Assets list */
.ijs-assets{ margin-top:16px; border:1px solid var(--ij-border); background:#fff; border-radius:var(--ij-radius); padding:12px; box-shadow:var(--ij-shadow); }
.ijs-assets .assets-head{ font-weight:900; color:var(--ij-text); margin-bottom:6px; }
.ijs-assets .assets-list{ display:block; border-top:1px dashed rgba(15,23,42,.18); margin-top:8px; }
.asset-row{ display:grid; grid-template-columns: 40px 90px 60px 1fr; gap:8px; padding:8px 0; border-bottom:1px dashed rgba(15,23,42,.12); font-size:13px; align-items:center; }
.asset-row .t{ text-transform:uppercase; font-weight:900; color:var(--ij-text); }
.asset-row .t-css{ color:var(--ij-green); }
.asset-row .t-js{ color:var(--ij-orange); }
.asset-row .t-img{ color:#16a34a; }
.asset-row .b{ font-weight:900; color:var(--ij-text); }
.asset-row .s{ color:var(--ij-muted); }
.asset-row .u{ color:rgba(15,23,42,.78); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.ijs-error{ margin-top:16px; padding:12px; border:1px solid rgba(220,38,38,.25); background:rgba(220,38,38,.06); color:#7f1d1d; border-radius:var(--ij-radius); }