/* ===========================================================================
 * sensor-dashboard.css — per-sensor IoT dashboard panel
 * Black-dominant radiant background, white gradient text, glassmorphism cards.
 * Design tokens mirror the host SPA exactly.
 * ==========================================================================*/

.iot-dash{
  /* ---- design tokens ---- */
  --bg:#030404;
  --ink:rgba(255,255,255,.96);
  --soft:rgba(255,255,255,.68);
  --muted:rgba(255,255,255,.44);
  --lines:rgba(255,255,255,.14);
  --faint:rgba(255,255,255,.06);
  --glass:linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  --font:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;

  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2.4vw,24px);
  min-height:100%;
  width:100%;
  padding:clamp(16px,3vw,34px);
  box-sizing:border-box;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:
    radial-gradient(1200px 620px at 16% -12%, rgba(255,255,255,.075), transparent 60%),
    radial-gradient(960px 520px at 112% 6%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(255,255,255,.035), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.iot-dash *{ box-sizing:border-box; }

/* ---------- Header ---------- */
.iot-dash__header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px 22px;
}
.iot-dash__headmain{ min-width:0; }

.iot-dash__title{
  margin:0;
  font-size:clamp(22px,3.6vw,40px);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.05;
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.6) 118%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.iot-dash__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 16px;
  margin-top:10px;
  font-size:12.5px;
  color:var(--soft);
}
.iot-dash__meta .iot-sep{ color:var(--faint); }
.iot-dash__net{
  color:var(--soft);
  font-weight:500;
  letter-spacing:.02em;
}
.iot-dash__coords,.iot-dash__country{
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- Status pill ---------- */
.iot-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px 6px 11px;
  border-radius:999px;
  border:1px solid var(--lines);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--soft);
  white-space:nowrap;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.iot-pill__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted);
  box-shadow:0 0 0 0 rgba(255,255,255,.4);
}
.iot-pill--live{ color:var(--ink); }
.iot-pill--live .iot-pill__dot{
  background:#fff;
  animation:iot-pulse 2.2s ease-out infinite;
}
@keyframes iot-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.45); }
  70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Shared glass card ---------- */
.iot-card{
  position:relative;
  border:1px solid var(--lines);
  border-radius:18px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- KPI row ---------- */
.iot-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(158px,100%),1fr));
  gap:clamp(10px,1.4vw,16px);
}
.iot-kpi{
  padding:14px 16px 10px;
  border:1px solid var(--lines);
  border-radius:16px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 36px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease;
}
.iot-kpi:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.22); }
.iot-kpi__label{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.iot-kpi__value{
  margin-top:6px;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.iot-kpi__value .iot-unit{
  font-size:12px;
  font-weight:400;
  color:var(--soft);
  margin-left:2px;
}
.iot-kpi__spark{
  height:36px;
  width:100%;
  margin-top:6px;
}

/* ---------- Primary chart card ---------- */
.iot-primary{ padding:clamp(14px,2vw,22px); }
.iot-primary__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.iot-primary__titlewrap{ min-width:0; }
.iot-primary__title{
  margin:0;
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
}
.iot-primary__sub{
  margin-top:3px;
  font-size:12px;
  color:var(--muted);
}
.iot-primary__chart{
  width:100%;
  height:clamp(240px,40vh,430px);
}

/* ---------- Segmented range control ---------- */
.iot-range{
  display:inline-flex;
  padding:3px;
  gap:2px;
  border:1px solid var(--lines);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.iot-range__btn{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:6px 13px;
  min-width:38px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.iot-range__btn:hover{ color:var(--soft); }
.iot-range__btn--active{
  color:#0a0b0c;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.78));
  box-shadow:0 4px 14px rgba(255,255,255,.18);
}
.iot-range__btn:focus-visible{
  outline:2px solid rgba(255,255,255,.5);
  outline-offset:2px;
}

/* ---------- Modeled note ---------- */
.iot-note{
  display:none;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted);
}
.iot-note::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:var(--muted);
  display:inline-block;
}

/* ---------- Secondary widget grid ---------- */
.iot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(340px,100%),1fr));
  gap:clamp(12px,1.6vw,18px);
}
.iot-widget{
  display:flex;
  flex-direction:column;
  padding:16px 16px 14px;
  border:1px solid var(--lines);
  border-radius:16px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease;
}
.iot-widget:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.2); }
.iot-widget__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.iot-widget__title{
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.01em;
}
.iot-widget__kind{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.iot-widget__chart{
  width:100%;
  height:250px;
  flex:1 1 auto;
}
.iot-widget--wide .iot-widget__chart{ height:300px; }

/* ---------- Empty state ---------- */
.iot-empty{
  padding:40px 24px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  border:1px dashed var(--lines);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}

/* ---------- Responsive ---------- */
@media (min-width:760px){
  .iot-widget--wide{ grid-column:span 2; }
}
@media (max-width:640px){
  .iot-dash__header{ flex-direction:column; }
  .iot-pill{ align-self:flex-start; }
  .iot-kpis{ grid-template-columns:repeat(auto-fit, minmax(min(140px,100%),1fr)); }
  .iot-kpi__value{ font-size:20px; }
  .iot-primary__chart{ height:300px; }
  .iot-grid{ grid-template-columns:1fr; }
  .iot-range__btn{ padding:6px 10px; min-width:34px; }
}
@media (max-width:400px){
  .iot-kpis{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  .iot-kpi,.iot-widget{ transition:none; }
  .iot-pill--live .iot-pill__dot{ animation:none; }
}

/* ---- Full-screen sensor dashboard overlay ---- */
.iot-overlay{ position:fixed; inset:0; z-index:99999; display:none; }
.iot-overlay.open{ display:block; }
.iot-overlay__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.iot-overlay__panel{ position:absolute; inset:clamp(8px,2.4vw,40px); border-radius:22px; overflow:auto; border:1px solid rgba(255,255,255,.14); box-shadow:0 44px 130px rgba(0,0,0,.72); background:#030404; -webkit-overflow-scrolling:touch; }
.iot-overlay__panel #sensorDashMount{ min-height:100%; border-radius:22px; }
.iot-overlay__close{ position:sticky; top:16px; float:right; margin:16px 16px 0 0; z-index:6; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:#fff; font-size:15px; line-height:1; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.iot-overlay__close:hover{ background:rgba(255,255,255,.15); transform:scale(1.05); }


/* ===== Interactive rework: clickable metric tiles + compact gauges ===== */
.iot-kpi{ display:block; width:100%; text-align:left; font:inherit; color:var(--ink); -webkit-appearance:none; appearance:none; cursor:pointer; }
.iot-kpi:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.iot-kpi--active{
  border-color:rgba(255,255,255,.6) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 32px rgba(255,255,255,.17), 0 16px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transform:translateY(-2px);
}
.iot-gauges{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(10px,1.4vw,16px); max-width:660px; }
.iot-gauge{ border:1px solid var(--lines); border-radius:16px; background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 12px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05); padding:12px 12px 4px; }
.iot-gauge__title{ font-size:11.5px; letter-spacing:.03em; color:var(--muted); margin-bottom:0; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iot-gauge__chart{ width:100%; height:clamp(118px,17vh,164px); }

/* ===== Radiant backdrop: black with a cool light-gray radiant clash ===== */
.iot-dash{
  background:
    radial-gradient(1200px 720px at 12% -12%, rgba(196,204,216,.13), transparent 56%),
    radial-gradient(1000px 620px at 112% 2%, rgba(150,162,178,.10), transparent 55%),
    radial-gradient(900px 900px at 50% 130%, rgba(118,128,144,.09), transparent 60%),
    linear-gradient(152deg, #050607 0%, #0c0e11 44%, #060708 78%, #030404 100%),
    #030404 !important;
}
.iot-overlay__panel{ background:#050607; }

/* ===== Responsive: fill space across screen sizes ===== */
@media (max-width:900px){
  .iot-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .iot-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .iot-gauges{ max-width:none; }
  .iot-primary__chart{ height:clamp(220px,38vh,320px); }
  .iot-overlay__panel{ inset:6px; border-radius:16px; }
}
@media (min-width:1280px){
  .iot-kpis{ grid-template-columns:repeat(auto-fit, minmax(min(180px,100%),1fr)); }
}


/* ===== Location map (MapLibre + PMTiles, self-hosted) ===== */
.iot-mapcard{ padding:clamp(14px,2vw,22px); }
.iot-mapcard__head{ margin-bottom:12px; }
.iot-map{ width:100%; height:clamp(280px,44vh,470px); border-radius:14px; overflow:hidden; border:1px solid var(--lines); background:#05070a; }
.iot-map-dot{ width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #05070a; box-shadow:0 0 0 4px rgba(255,255,255,.16), 0 0 20px rgba(255,255,255,.65); cursor:pointer; }
.iot-map .maplibregl-ctrl-group{ background:rgba(10,13,17,.82) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:none !important; }
.iot-map .maplibregl-ctrl-group button+button{ border-top:1px solid rgba(255,255,255,.12) !important; }
.iot-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon{ filter:invert(1); }


/* ===== Sensor type/category chip in header ===== */
.iot-dash__type{ display:inline-block; margin-top:10px; padding:5px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }

/* ---- Status card -------------------------------------------------------
 * For sensors with no chartable trend (EV chargers, bike docks, stations
 * publishing only a state). Previously these fell through to an empty line
 * chart and read as broken; this shows the one fact they do publish.       */
.iot-status{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;min-height:180px;gap:.25rem;text-align:center;padding:1.5rem}
.iot-status__value{font-size:clamp(2.5rem,7vw,4.25rem);font-weight:650;line-height:1;
  letter-spacing:-.02em;color:#f4f6f8}
.iot-status__unit{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(240,244,248,.55)}
.iot-status__label{margin-top:.5rem;font-size:.95rem;color:rgba(240,244,248,.8)}
.iot-status__meta{margin-top:.35rem;font-size:.78rem;color:rgba(240,244,248,.45)}


/* ---- Adaptive dashboard sizing -----------------------------------------
 * The overlay is a full-screen surface, so its content should use the whole
 * viewport rather than sitting in a fixed-width column. Charts grow with
 * available height too — a 4K screen was rendering the same 220px chart as a
 * laptop, leaving most of the panel empty.                                 */
.iot-dash{ width:100%; max-width:none; }
.iot-grid{ width:100%; align-items:stretch; }
.iot-widget{ min-width:0; }                     /* let grid items actually shrink */
.iot-widget .iot-chart, .iot-chart{
  height:clamp(180px, 26vh, 420px);
}
.iot-primary .iot-chart, .iot-card--primary .iot-chart{
  height:clamp(240px, 38vh, 620px);
}
.iot-map{ height:clamp(220px, 34vh, 560px); }

/* Narrow screens: single column, and stop the KPI strip from squeezing. */
@media (max-width: 720px){
  .iot-grid{ grid-template-columns:1fr; }
  .iot-widget .iot-chart, .iot-chart{ height:clamp(160px, 30vh, 300px); }
}
/* Very wide screens: cap column count so cards do not become absurdly wide. */
@media (min-width: 1900px){
  .iot-grid{ grid-template-columns:repeat(auto-fit, minmax(min(420px,100%),1fr)); }
}