/* Login page */
.login-page{
  display:grid; place-items:center;
  padding:24px;
}
.shell{
  width:min(420px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.top{ padding:26px 24px 14px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  backdrop-filter: blur(10px);
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  box-shadow: 0 0 0 4px rgba(124,58,237,.14);
}
.top h1{ margin:14px 0 6px; font-size:22px; letter-spacing:-.02em; }
.top p{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.form{ padding:18px 24px 24px; display:grid; gap:12px; }
label{font-size:12px; color:var(--muted)}
.field{ display:grid; gap:6px; }
.err{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: rgba(255,255,255,.92);
  font-size:13px;
}
.foot{
  padding:14px 24px 22px;
  border-top:1px solid var(--stroke);
  color:var(--muted);
  font-size:12px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}

/* Dashboard */
.wrap{
  width:min(1100px, 100%);
  margin:0 auto;
  padding:22px 18px 28px;
}

.topbar{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:10px 6px 18px;
}

.devicepicker{
  display:flex; align-items:center; gap:10px;
  margin-left:auto;
  padding-top:4px;
}
.devicepicker label{
  font-size:12px; color:var(--muted);
}
.devicepicker select{
  appearance:none;
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  color: var(--text);
  padding:10px 34px 10px 12px;
  border-radius: 12px;
  font-size:13px;
  box-shadow: var(--shadow-soft);
}
.devicepicker select:focus{ outline:2px solid rgba(255,255,255,.12); outline-offset:2px; }

.title h1{margin:0; font-size:22px; letter-spacing:-.02em}
.title p{margin:6px 0 0; color:var(--muted); font-size:13px}
.grid{ display:grid; grid-template-columns: 1.3fr .7fr; gap:14px; }
@media (max-width: 920px){ .grid{grid-template-columns:1fr} }
.card .hd{
  padding:16px 18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card .hd .k{ font-size:12px; color:var(--muted) }
.card .bd{ padding:16px 18px 18px }
.cards{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 540px){ .cards{grid-template-columns:1fr} }

.trend{
  height:160px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 2px 0;
}
.bar{
  flex:1;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(124,58,237,.55), rgba(6,182,212,.45));
  border:1px solid rgba(255,255,255,.10);
  min-width:10px;
  position:relative;
  overflow:hidden;
}
.bar::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%);
  opacity:.65;
}
.labels{
  display:flex; justify-content:space-between; gap:10px;
  margin-top:10px;
  color:var(--muted); font-size:11px;
}

.kv{ display:grid; gap:10px; }

/* Bottom dock */
.nav{
  position:fixed; left:0; right:0; bottom:0;
  padding:12px 14px 18px;
  display:grid; place-items:center;
  pointer-events:none;
}
.nav .dock{
  width:min(520px, 100%);
  pointer-events:auto;
  display:flex; justify-content:space-between; gap:10px;
  padding:12px 12px;
  border-radius: 22px;
  border:1px solid var(--stroke);
  background: rgba(10,12,22,.55);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.nav a{
  flex:1;
  text-decoration:none;
  color:var(--muted);
  font-size:12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px 10px;
  border-radius:16px;
  transition:.2s;
}
.nav a.active{
  color:var(--text);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.ico{
  width:22px; height:22px; border-radius:8px;
  background: linear-gradient(90deg, rgba(124,58,237,.9), rgba(6,182,212,.85));
  box-shadow: 0 18px 45px rgba(124,58,237,.22);
}

/* Trend chart (canvas) */
.trendChart{
  width:100%;
  height:140px;
  max-height:140px;
  display:block;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
}


/* Overview / Fleet */
.fleet{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 920px){ .fleet{grid-template-columns:1fr 1fr} }
@media (max-width: 540px){ .fleet{grid-template-columns:1fr} }

.cardLink{ display:block; color:inherit; text-decoration:none }
.cardLink .card{ transition: transform .12s ease, border-color .12s ease }
.cardLink:hover .card{ transform: translateY(-2px); border-color: rgba(255,255,255,.18) }

.kpiRow{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.kpi{ font-size:34px; font-weight:800; letter-spacing:-.02em }
.kpiSub{ font-size:12px; color:var(--muted) }
.metaLine{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-size:12px;
}

/* History */
.historyControls{ display:grid; gap:12px; }
.btnRow{ display:flex; gap:10px; flex-wrap:wrap; }
.hbtn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:13px;
  cursor:pointer;
  transition:.15s;
}
.hbtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.hbtn.active{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
}

.customRow{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:12px;
  align-items:end;
}
@media (max-width: 720px){ .customRow{ grid-template-columns: 1fr; } }

.exportRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hlink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  color: var(--text);
  font-size:13px;
}
.hlink:hover{ border-color: rgba(255,255,255,.18); }
.muted{ color: var(--muted); font-size:12px; }

/* --- Generic notices / forms (Mail page etc.) --- */
.notice{
  padding:12px 14px;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  margin: 10px 0;
  font-size:13px;
}
.notice.ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.notice.bad{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }

.hint{ margin-top:6px; font-size:12px; color: var(--muted); }
.check{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.check input{ width:16px; height:16px; }

.tableWrap{ overflow:auto; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl th, .tbl td{ padding:10px 10px; text-align:left; font-size:13px; }
.tbl thead th{ color: var(--muted); font-weight:600; border-bottom:1px solid var(--stroke); }
.tbl tbody td{ border-bottom:1px solid rgba(255,255,255,.06); }
.tbl tbody tr:hover td{ background: rgba(255,255,255,.03); }


/* --- Rules & Alerts pages --- */
.grid2{ display:grid; gap:14px; grid-template-columns: 1fr; }
@media (min-width: 980px){ .grid2{ grid-template-columns: 420px 1fr; } }

.panel{
  padding:14px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
}

.h2{ font-size:14px; font-weight:700; margin-bottom:10px; letter-spacing:.2px; }
.small{ font-size:12px; }

.row{ display:flex; gap:10px; }
.row > div{ flex:1; }

.note{
  padding:12px;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  margin: 10px 0 14px;
}
.note.danger{ border-color: rgba(255,80,80,.45); background: rgba(255,80,80,.08); }

.tablewrap{ overflow:auto; border:1px solid var(--stroke); border-radius: var(--radius); }
.table{ width:100%; border-collapse: collapse; min-width: 860px; }
.table th, .table td{ padding:10px 10px; border-bottom:1px solid var(--stroke); font-size:13px; }
.table th{ text-align:left; color: var(--muted); font-weight:600; background: rgba(255,255,255,.03); }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  font-size:12px;
  text-transform: lowercase;
}
.pill.info{ background: rgba(80,160,255,.12); border-color: rgba(80,160,255,.35); }
.pill.warning{ background: rgba(255,180,80,.12); border-color: rgba(255,180,80,.35); }
.pill.critical{ background: rgba(255,80,80,.12); border-color: rgba(255,80,80,.35); }

.linkbtn{
  background:none; border:none; padding:0;
  color: var(--accent);
  cursor:pointer;
  font-weight:600;
}
.linkbtn.danger{ color: rgba(255,80,80,.9); }

.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:end;
  margin: 10px 0 14px;
}
.filters label{ display:block; font-size:12px; color: var(--muted); margin-bottom:6px; }
.filters select{ min-width: 160px; }

.chk{ display:flex; align-items:center; gap:8px; margin-top:10px; }




/* Modern Dashboard polish */
.topbar{
  position:relative;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.10));
  padding:16px 16px 14px;
  overflow:hidden;
}
.topbar::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(900px 220px at 10% -20%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(700px 240px at 90% 0%, rgba(59,130,246,.25), transparent 55%);
  pointer-events:none;
  filter: blur(0px);
}
.topbar > *{ position:relative; z-index:1; }

.quickActions{
  margin-top:10px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.btnSm{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btnSm:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
.btnSm:active{ transform: translateY(0px); }

.pill{
  gap:10px;
  padding:10px 12px;
  font-weight:700;
}

.cards{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 760px){ .cards{ grid-template-columns:1fr; } }

.metric{
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.20));
}

.metric .val{ font-size:32px; }

.metric.trendMetric{
  padding:16px 16px 14px;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.trendBody{ flex:1; min-width:0; }
.trendTitle{ margin:0 0 10px; font-size:14px; color:var(--muted); font-weight:700; }
.trendChart{
  width:100%;
  display:block;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
}
.labels{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: var(--muted);
}
.trendEmpty{
  margin-top:10px;
  font-size:13px;
  opacity:.75;
}

.note.danger{
  border-radius: 18px;
  padding:14px 16px;
}

/* Mobile dashboard fixes */
@media (max-width: 540px){
  .topbar{flex-direction:column; align-items:stretch}
  .devicepicker{width:100%}
  .devicepicker select{width:100%}
  .title h1{font-size:20px}
  .grid{grid-template-columns:1fr}
  .dock{gap:6px}
  .nav a{font-size:11px; padding:9px 8px}
}


@media (max-width: 540px){
  .trendChart{ height:120px; max-height:120px; }
}


/* Hamburger menu */
.menuBtn{
  position:fixed;
  top:16px;
  left:14px;
  z-index:1001;
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(10,12,22,.55);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  display:grid;
  place-items:center;
  cursor:pointer;
  color: var(--text);
}
.menuBtn:active{ transform: translateY(1px); }
.menuIcon{ font-size:20px; line-height:1; }

.menuOverlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity .18s ease;
}
.sideMenu{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:min(320px, 86vw);
  z-index:1002;
  padding:18px 18px 18px;
  border-right:1px solid var(--stroke);
  background: rgba(10,12,22,.86);
  backdrop-filter: blur(18px);
  transform: translateX(-102%);
  transition: transform .18s ease;
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sideMenuHeader{
  font-weight:800;
  letter-spacing:-.02em;
  padding:6px 8px 12px;
  opacity:.92;
}
.sideMenu a{
  text-decoration:none;
  color: var(--muted);
  padding:12px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition:.15s;
}
.sideMenu a:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.sideMenu a.active{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.sideMenuSep{
  height:1px;
  background: rgba(255,255,255,.10);
  margin:10px 6px;
}
.sideMenu a.logout{
  color: rgba(255,255,255,.90);
  background: rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
}
html.menuOpen .menuOverlay{ opacity:1; }
html.menuOpen .sideMenu{ transform: translateX(0); }

/* keep content away from button on very small screens */
@media (max-width:520px){
  .topbar{ padding-left:56px; }
}


/* Last seen badge (Dashboard) */
.lastSeenBadge{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,.92);
  font-size:13px;
  line-height:1;
}
.lastSeenBadge .lbl{ opacity:.8; }
.lastSeenBadge .val{ font-weight:700; }

/* When badge is placed inside card header */
.card .hd .lastSeenBadge{
  margin-top:0;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.card .hd .lastSeenBadge .lbl{ color: var(--muted); opacity:1; }

@media (max-width: 720px){
  .lastSeenBadge{ padding:8px 10px; font-size:12px; }
}


/* Wizard (Rules) */
.wizardHeader{margin-bottom:12px}
.wizardSteps{display:flex;align-items:center;gap:10px}
.wProgress{height:6px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;margin-top:10px}
.wProgressBar{height:100%;width:0%;background:rgba(255,255,255,.35);border-radius:999px;transition:width .25s ease}
.wStep{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:10px 12px;border-radius:14px;cursor:pointer}
.wStep .wNum{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);font-weight:700}
.wStep .wLbl{font-weight:600}
.wLine{flex:1;height:2px;background:rgba(255,255,255,.10);border-radius:999px}
.wStep.isActive{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20)}
.wStep.isActive .wNum{background:rgba(255,255,255,.10)}
.wStep.isDone{opacity:.9}
.wizardHint{margin-top:10px}
.wizardBody{margin-top:14px}
.wInlineNote{margin-top:12px}
.wizardNav{display:flex;gap:10px;margin-top:14px;align-items:center}
.wizardNav .btn{flex:1}
.wSummary{margin-top:12px}
.wSummaryText{margin-top:6px}
.wTitle{font-weight:800;font-size:14px;margin-top:4px}
.wChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wChip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-size:12px}
.wChipK{opacity:.72;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.wChipV{font-weight:800}
.wChip.sev-critical{border-color:rgba(255,80,80,.35);background:rgba(255,80,80,.10)}
.wChip.sev-warning{border-color:rgba(255,196,0,.28);background:rgba(255,196,0,.10)}
.wChip.sev-info{border-color:rgba(90,200,255,.28);background:rgba(90,200,255,.10)}
.wChip.isOff{opacity:.75}
@media (max-width: 720px){
  .wizardSteps{gap:8px}
  .wStep{padding:10px}
  .wStep .wLbl{display:none}
  .wizardNav{position:sticky;bottom:12px;background:rgba(0,0,0,.0)}
}


/* Wizard form controls */
.wizardForm{--accentBorder:rgba(255,255,255,.28);--accentGlow:rgba(255,255,255,.06)}
.wizardForm.isCritical{--accentBorder:rgba(255,80,80,.55);--accentGlow:rgba(255,80,80,.16)}
.wizardForm label{
  display:block;
  margin-top:14px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
  font-weight:700;
}
.wizardForm input,
.wizardForm select,
.wizardForm textarea{
  width:100%;
  margin-top:6px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wizardForm input::placeholder,
.wizardForm textarea::placeholder{
  color:rgba(255,255,255,.45);
}
.wizardForm input:focus,
.wizardForm select:focus,
.wizardForm textarea:focus{
  border-color:var(--accentBorder);
  box-shadow:0 0 0 4px var(--accentGlow);
  background:rgba(0,0,0,.28);
}
.wizardForm select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}
.wizardForm select option{ color:#111; }
.wizardForm .fieldHint{
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}
@media (max-width:720px){
  .wizardForm input,
  .wizardForm select,
  .wizardForm textarea{
    padding:14px 14px; /* bigger tap targets on mobile */
    border-radius:16px;
  }
}