/* media/mod_cf_speedtest/css/style.css */
.cfst { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 14px; }
.cfst__header { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.cfst__title { margin:0; font-size:1.15rem; }
.cfst__actions { display:flex; gap:8px; align-items:center; }
.cfst__btn { border:1px solid rgba(0,0,0,.18); background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; }
.cfst__btn[disabled]{ opacity:.55; cursor:not-allowed; }
.cfst__btn--secondary{ background:rgba(0,0,0,.04); }

.cfst__label{ font-size:.88rem; opacity:.78; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.cfst__unit{ font-size:.95rem; font-weight:600; opacity:.75; margin-left:8px; }
.cfst__small{ font-size:.92rem; opacity:.9; line-height:1.35; }

.cfst__top{ display:grid; grid-template-columns: 1fr 1fr 280px; gap:14px; align-items:stretch; }
@media (max-width: 980px){ .cfst__top{ grid-template-columns:1fr; } }

.cfst__metric{ border:1px solid rgba(0,0,0,.10); border-radius:12px; padding:12px; overflow:hidden; }
.cfst__big{ font-size:3.1rem; font-weight:800; line-height:1; margin-bottom:8px; }
@media (max-width: 520px){ .cfst__big{ font-size:2.6rem; } }

.cfst__side{ border:1px solid rgba(0,0,0,.10); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:14px; }
.cfst__sideRow{ border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:10px; }
.cfst__sideRow:last-child{ border-bottom:none; padding-bottom:0; }
.cfst__sideVal{ font-size:2rem; font-weight:800; line-height:1; }
.cfst__lower{ margin-top:14px; display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 980px){ .cfst__lower{ grid-template-columns:1fr; } }

.cfst__location, .cfst__notes{ border:1px solid rgba(0,0,0,.10); border-radius:12px; padding:12px; }
.cfst__map{ margin-top:10px; height:240px; border-radius:12px; overflow:hidden; background: rgba(0,0,0,.04); }

.cfst__privacy{ margin-top:12px; font-size:.85rem; opacity:.75; }

.cfst{color:#111}.cfst__label{color:#555}

/* Cloudflare-like mini rows + animations */
.cfst__info{
  display:inline-flex;
  width:16px; height:16px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.2);
  align-items:center; justify-content:center;
  font-size:11px; line-height:1;
  opacity:.65;
  cursor:help;
  user-select:none;
}
.cfst__miniRow{
  display:flex;
  gap:10px;
  margin-top:6px;
  font-size:.92rem;
  opacity:.95;
}
.cfst__mini{
  display:inline-flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
}
.cfst__ico{ font-weight:800; }
.cfst__mini--dl .cfst__ico{ color:#ff7a00; }
.cfst__mini--ul .cfst__ico{ color:#7b2cff; }

/* Smooth value transitions */
.cfst [data-role="dl"],
.cfst [data-role="ul"],
.cfst [data-role="lat"],
.cfst [data-role="jit"],
.cfst [data-role="pl"],
.cfst [data-role="lat-dl"],
.cfst [data-role="lat-ul"],
.cfst [data-role="jit-dl"],
.cfst [data-role="jit-ul"]{
  transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
  display:inline-block;
}
.cfst__bump{
  transform: translateY(-1px) scale(1.02);
  filter: saturate(1.1);
}

/* Subtle running pulse on charts */
.cfst__metric canvas{
  transition: opacity 250ms ease;
}
.cfst.is-running .cfst__metric canvas{
  opacity: .98;
}
.cfst.is-running .cfst__metric{
  box-shadow: 0 0 0 2px rgba(0,0,0,.02) inset;
}

/* Layout tightening: make charts fill the card height (reduce white space) */
.cfst__metric{
  display:flex;
  flex-direction:column;
}
.cfst__big{
  margin-bottom:6px; /* tighter */
}
.cfst__metric canvas{
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  display:block;
}
/* Keep top row stretched */
.cfst__top{
  align-items: stretch;
}

/* Chart sizing: fixed sparkline area to avoid infinite growth */
.cfst__metric{ display:flex; flex-direction:column; }
.cfst__big{ margin-bottom:6px; }
.cfst__spark{
  height: 140px;          /* adjust if you want taller/shorter */
  width: 100%;
  position: relative;
}
.cfst__spark canvas{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Sidebar compactness (match Cloudflare density) */
.cfst__side{
  gap: 10px;
}
.cfst__sideRow{
  padding-bottom: 8px;
}
.cfst__sideVal{
  font-size: 1.75rem;
}
.cfst__miniRow{
  margin-top: 4px;
  font-size: .88rem;
  opacity: .9;
}
.cfst__muted{
  opacity: .75;
}
.cfst__sideRow--packet .cfst__small{
  margin-top: 2px;
}
.cfst__status{
  font-size: .9rem;
  padding-top: 4px;
}

/* Cloudflare exact proportions */
.cfst__top{gap:12px}
.cfst__metric,.cfst__side{padding:14px;border-radius:16px;border-color:rgba(0,0,0,.08)}
.cfst__big{font-size:3.1rem;line-height:1;margin-bottom:6px}
.cfst__spark{min-height:108px;flex:1 1 auto}
.cfst__side{gap:10px}
.cfst__sideRow{padding-bottom:8px}
.cfst__sideVal{font-size:1.75rem;line-height:1.05}
.cfst__label{margin-bottom:4px;font-size:.9rem}
.cfst__miniRow{margin-top:4px;gap:10px;font-size:.88rem}
.cfst__status{padding-top:4px;font-size:.9rem;line-height:1.2}
.cfst__metric{display:flex;flex-direction:column}
.cfst__spark canvas{position:absolute;inset:0;width:100%!important;height:100%!important}

/* Sidebar height compensation */
.cfst__side{padding-top:12px;padding-bottom:12px}
.cfst__sideRow{padding-bottom:6px}

/* Let sparkline fill remaining card height so no empty white space below */
.cfst__metric{display:flex;flex-direction:column}
.cfst__spark{position:relative}

/* --- Cloudflare-tight sidebar spacing (reduce overall height) --- */
.cfst__metric,.cfst__side{padding:12px}
.cfst__side{gap:6px}
.cfst__sideRow{padding-bottom:4px}
.cfst__label{margin-bottom:2px}
.cfst__sideVal{line-height:1;font-size:1.55rem}
.cfst__miniRow{margin-top:1px;gap:8px;font-size:.84rem}
.cfst__mini{gap:5px}
.cfst__status{padding-top:2px;font-size:.86rem;line-height:1.1}
/* Reduce divider weight feel by tightening vertical rhythm */
.cfst__sideRow{border-bottom:1px solid rgba(0,0,0,.07)}

/* ultra-tight tweak */
.cfst__metric,.cfst__side{padding:10px}
.cfst__side{gap:4px}
.cfst__sideRow{padding-bottom:3px}
.cfst__miniRow{margin-top:0;gap:6px;font-size:.82rem}
.cfst__sideVal{font-size:1.5rem}

/* Details panels (Cloudflare-like measurement sections) */
.cfst__details{ margin-top:14px; }
.cfst__detailsGrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width: 980px){ .cfst__detailsGrid{ grid-template-columns:1fr; } }
.cfst__panel{ border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:10px; background:#fff; }
.cfst__panel--wide{ margin-top:12px; }
.cfst__panelTitle{ font-weight:700; font-size:1.05rem; margin:0 0 8px 0; display:flex; align-items:center; gap:8px; }
.cfst__accordion{ border:1px solid rgba(0,0,0,.18); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.cfst__accHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; cursor:pointer; user-select:none; background:#fff; }
.cfst__accTitle{ font-size:.95rem; font-weight:600; }
.cfst__accMeta{ font-size:.85rem; opacity:.75; white-space:nowrap; }
.cfst__chev{ opacity:.65; font-weight:800; }
.cfst__accBody{ padding:10px; border-top:1px solid rgba(0,0,0,.12); background:#fff; }
.cfst__miniChart{ height:86px; position:relative; }
.cfst__miniChart canvas{ position:absolute; inset:0; width:100%!important; height:100%!important; }
.cfst__axisLabel{ font-size:.78rem; opacity:.7; margin-bottom:6px; }

/* Cloudflare-like mini boxplot layout */
.cfst__miniRow2{ display:flex; align-items:flex-start; gap:10px; }
.cfst__axisY{ width:34px; font-size:.78rem; opacity:.7; padding-top:10px; }
.cfst__miniWrap{ padding:0; }
.cfst__miniChart{ height:78px; } /* closer to Cloudflare */

/* Measurement rows: show plot by default (Cloudflare-like) */
.cfst__accBody{ padding-top: 4px; }
.cfst__miniRow2{ display:flex; align-items:flex-start; gap:10px; }
.cfst__axisY{ width:34px; font-size:.78rem; opacity:.7; padding-top:10px; }
.cfst__miniChart{ height:78px; position:relative; }

.cfst__miniRow2{display:flex;align-items:flex-start;gap:10px}
.cfst__axisY{width:34px;font-size:.78rem;opacity:.7;padding-top:10px}
.cfst__miniChart{height:78px}

.cfst__title{color:#000 !important}

/* Live measurement mini-panels */
.cfst__measHead{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:#fff}
.cfst__measMeta{opacity:.7;font-size:.9rem}
.cfst__measBody{padding:10px 10px;border:1px solid rgba(0,0,0,.10);border-top:0;border-radius:0 0 10px 10px;background:#fff;min-height:120px}
.cfst__miniChart{height:84px;min-height:84px}
.cfst__miniChart canvas{display:block;width:100%;height:100%}

/* Simulated live charts in measurement panels */
.cfst__panelBody{ min-height: 120px; }
.cfst__simCanvas{ width:100%; height:96px; display:block; }

/* Force details visible (Joomla templates sometimes keep [hidden]) */
.cfst__details[hidden]{ display:block !important; }
/* Ensure measurement bodies have space for charts */
.cfst__panelBody[data-role="dl-meas"],
.cfst__panelBody[data-role="ul-meas"],
.cfst__panelBody[data-role="lat-meas"]{ min-height:120px; }
.cfst__simCanvas{ width:100%; height:110px; display:block; }

/* Ensure simulated canvases have space even if panel body wrappers differ */
[data-role="dl-meas"],[data-role="ul-meas"],[data-role="lat-meas"],
[data-role="dl-meas-body"],[data-role="ul-meas-body"],[data-role="lat-meas-body"]{ min-height:120px; }
.cfst__simCanvas{ height:110px; }


/* v107: chart canvas visibility + predictable height */
.cfst canvas[data-role^="chart-"]{
  display:block;
  width:100%;
  height:120px;
}


/* v110: ensure dynamically inserted canvases are visible */
.cfst [data-role="dl-meas"] canvas[data-role="chart-dl"],
.cfst [data-role="ul-meas"] canvas[data-role="chart-ul"],
.cfst [data-role="lat-meas"] canvas[data-role="chart-lat"]{
  width: 100%;
  height: 120px;
  display: block;
}


/* v119: spark canvases inside measurement panels */
.cfst [data-role="dl-meas"] canvas[data-role="chart-dl-spark"],
.cfst [data-role="ul-meas"] canvas[data-role="chart-ul-spark"],
.cfst [data-role="lat-meas"] canvas[data-role="chart-lat-spark"]{
  width:100%;
  height:120px;
  display:block;
  max-height:120px;
}

/* v129: Cloudflare-like boxplot measurement style */
.cfst__boxplot{ margin-top:8px; }
.cfst__boxplotAxis{ position:relative; height:18px; }
.cfst__boxplotUnit{ font-size:12px; opacity:0.75; margin-right:8px; }
.cfst__boxplotTicks{ position:absolute; left:0; right:0; top:0; height:18px; }
.cfst__boxplotTick{ position:absolute; top:0; transform:translateX(-50%); font-size:11px; opacity:0.6; }
.cfst__boxplotTrack{ position:relative; height:34px; margin-top:6px; border-top:1px solid rgba(0,0,0,0.08); }
.cfst__boxplotWhisker{ position:absolute; top:16px; height:2px; background:rgba(0,0,0,0.35); }
.cfst__boxplotBox{ position:absolute; top:10px; height:14px; background:rgba(255,122,0,0.22); border:1px solid rgba(255,122,0,0.9); border-radius:3px; }
.cfst__boxplotMedian{ position:absolute; top:9px; width:2px; height:16px; background:rgba(0,0,0,0.7); transform:translateX(-50%); }
.cfst__boxplotDots{ position:absolute; left:0; right:0; top:0; bottom:0; }
.cfst__boxplotDot{ position:absolute; top:18px; width:4px; height:4px; background:rgba(255,122,0,0.95); border-radius:50%; transform:translateX(-50%); }


/* Notes list (Cloudflare-like) */
.cfst__noteList{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.cfst__noteRow{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.35;}
.cfst__noteKey{color:#666;}
.cfst__noteVal{color:#111;font-weight:500;text-align:right;}

/* v134 hide packet loss row */
.cfst .cfst__sideRow--packet { display:none !important; }