:root {
  --bg: #05080b;
  --panel: #10171d;
  --line: #29343c;
  --text: #f2f5f6;
  --muted: #7e8b93;
  --red: #e31b23;
  --green: #22c777;
  --standby: #ef3447;
  --gray: #727d84;
  --amber: #ffc45c;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 80% 0, #14252f 0, transparent 32%), var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 600;
}
header {
  height: 68px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#11171b, #080c0f);
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.brand img {
  width: 40px;
  height: 46px;
  object-fit: contain;
  object-position: center;
  display: block;
}
.brand span {
  border-left: 1px solid #3c474e;
  padding-left: 16px;
}
.brand b { font-size: clamp(14px, 0.68vw, 22px); }
.brand b,
.brand small {
  display: block;
  letter-spacing: 2px;
}
.brand small {
  font-size: clamp(10px, 0.48vw, 16px);
  color: var(--muted);
  margin-top: 5px;
}
.receiver {
  font-size: clamp(11px, 0.5vw, 17px);
  letter-spacing: 1px;
  color: #98a4aa;
}
.receiver > i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px var(--green);
  margin-right: 7px;
}
button {
  background: #141b20;
  border: 1px solid var(--line);
  color: #ccd3d7;
  padding: 10px 14px;
  margin-left: 18px;
  cursor: pointer;
}
main {
  height: calc(100vh - 103px);
  padding: 24px 4vw 43px;
  overflow: hidden;
}
.dashboard-shell,#fleet { height: 100%; }
#fleet { display: flex; flex-direction: column; }
.command,
.admin-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 14px;
}
label {
  font-size: clamp(11px, 0.52vw, 17px);
  color: var(--red);
  letter-spacing: 2px;
  font-weight: bold;
}
h1 {
  font-size: clamp(30px, 2.3vw, 58px);
  margin: 8px 0 0;
}
.counts {
  display: flex;
  gap: 8px;
}
.counts span {
  padding: 10px 12px;
  border: 1px solid var(--line);
  font-size: clamp(11px, 0.5vw, 17px);
  letter-spacing: 1px;
}
.counts i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
}
.tools {
  height: 42px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.tools b {
  font-size: clamp(12px, 0.55vw, 18px);
  letter-spacing: 1px;
  color: #a4adb2;
}
.tools input,
input,
select {
  background: #070b0e;
  border: 1px solid #344149;
  color: white;
  padding: 10px 12px;
}
.tools input {
  width: 350px;
  font-size: clamp(12px, 0.55vw, 18px);
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.fleet-columns,
.fleet-row {
  display: grid;
  grid-template-columns: 82px minmax(210px, 1.7fr) minmax(120px, 1fr) 75px 85px 80px 95px 150px 85px;
  align-items: center;
}
.fleet-columns {
  height: clamp(28px, 1.45vw, 46px);
  padding: 0 13px;
  margin-top: 8px;
  border: 1px solid var(--line);
  background: #090e12;
  color: #829099;
  font-size: clamp(9px, 0.42vw, 14px);
  font-weight: 700;
  letter-spacing: 1px;
}
.fleet-list { border: 1px solid var(--line); border-top: 0; overflow: hidden; }
.fleet-row {
  min-height: clamp(25px, calc((100vh - 260px) / 50), 38px);
  padding: 4px 13px;
  border-top: 1px solid #202a31;
  background: rgba(13, 19, 24, 0.88);
  color: #d5dde1;
  font-size: clamp(11px, 0.55vw, 18px);
  font-weight: 650;
}
.fleet-row:first-child { border-top: 0; }
.fleet-row:nth-child(even) { background: rgba(16, 23, 29, 0.9); }
.fleet-row > span,
.fleet-row > b { min-width: 0; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-row small { display: block; color: #9aa7ae; font-size: clamp(9px, 0.42vw, 14px); font-weight: 650; margin-top: 2px; }
.fleet-row .unit b { display: block; color: #ffffff; font-size: clamp(12px, 0.62vw, 20px); font-weight: 750; }
.fleet-row > b,.fleet-row > span > b { font-weight: 700; color: #f0f4f6; }
.fleet-row .state { font-size: clamp(9px, 0.44vw, 15px); font-weight: 750; letter-spacing: 0.8px; }
.fleet-row .state i { width: clamp(7px, 0.38vw, 12px); height: clamp(7px, 0.38vw, 12px); }
.fleet-row.in-use { border-left: 2px solid var(--green); }
.fleet-row.standby { border-left: 2px solid var(--standby); }
.fleet-row.offline { border-left: 2px solid #566168; }
.row-ticket { display: inline-flex; align-items: center; color: var(--amber); font-size: clamp(9px, 0.44vw, 15px); }
.row-ticket i { display: grid; place-items: center; width: 15px; height: 15px; margin-right: 5px; border: 1px solid #a97118; border-radius: 50%; background: #35240a; font-style: normal; box-shadow: 0 0 8px #8c611d; }
.clear { color: #3e6d58 !important; letter-spacing: 0.8px; }
.uptime-warning b,.uptime-warning small { color: #f1bd58 !important; }
.uptime-critical b,.uptime-critical small { color: #ff6470 !important; }
.card {
  background: linear-gradient(145deg, #121a20, #090e12);
  border: 1px solid #303a41;
  border-top: 3px solid var(--gray);
}
.card.in-use {
  border-top-color: var(--green);
}
.card.standby {
  border-top-color: var(--standby);
}
.head,
.foot {
  height: 43px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #263038;
  font-size: 8px;
  letter-spacing: 1px;
  color: #7d8990;
}
.state {
  font-weight: bold;
}
.state i {
  display: inline-grid;
  place-items: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray);
  margin-right: 7px;
}
.in-use .state {
  color: var(--green);
}
.in-use .state i {
  background: var(--green);
  box-shadow: 0 0 9px var(--green);
}
.standby .state {
  color: var(--standby);
}
.standby .state i {
  background: var(--standby);
  box-shadow: 0 0 9px var(--standby);
}
.ticket {
  color: var(--amber);
  margin-left: auto;
  margin-right: 10px;
}
.ticket b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #a97118;
  border-radius: 50%;
  background: #35240a;
  margin-right: 5px;
  box-shadow: 0 0 10px #8c611d;
}
.identity {
  padding: 18px 15px;
}
.identity h2 {
  font-size: 15px;
  margin: 0 0 7px;
}
.identity span {
  font-size: 9px;
  color: #87939a;
  letter-spacing: 1px;
}
.card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.card dl div {
  padding: 13px 15px;
  border-top: 1px solid #263038;
  border-right: 1px solid #263038;
  min-height: 70px;
}
.card dt {
  font-size: 8px;
  color: #68757d;
  letter-spacing: 1px;
  margin-bottom: 7px;
}
.card dd {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
}
.card dd small {
  display: block;
  color: #77858d;
  font-size: 8px;
  margin-top: 4px;
}
.foot {
  border-bottom: 0;
}
.empty {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: #68767d;
  border: 1px solid var(--line);
  border-top: 0;
}
.empty[hidden] { display: none; }
.lanmark {
  position: fixed;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);
  font-size: clamp(9px, 0.42vw, 14px);
  letter-spacing: 1.2px;
  color: #52616a;
  background: rgba(5, 8, 11, 0.8);
  padding: 7px 14px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #080c0f;
  border-top: 1px solid var(--line);
  font-size: clamp(9px, 0.42vw, 14px);
  color: #67757d;
  letter-spacing: 1px;
}
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.panels article {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 26px;
}
.panels h2 {
  font-size: 12px;
  letter-spacing: 1.5px;
}
.panels label {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  color: #8f9ba2;
}
.panels input,
.panels select {
  width: 100%;
}
.toggle {
  grid-template-columns: 1fr auto !important;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.toggle input {
  width: auto;
}
.panels p {
  font-size: 10px;
  color: #7d8991;
}
@media (max-width: 1250px) {
  .fleet-columns,.fleet-row { grid-template-columns: 75px minmax(180px,1.5fr) 110px 70px 75px 75px 90px 125px 75px; }
}
@media (max-width: 700px), (orientation: portrait) and (max-width: 900px) {
  .panels {
    grid-template-columns: 1fr;
  }
  .fleet-columns,.fleet-row { grid-template-columns: 65px 1.5fr 1fr 70px 75px 85px; }
  .fleet-columns span:nth-child(3),.fleet-row > *:nth-child(3),.fleet-columns span:nth-child(6),.fleet-row > *:nth-child(6),.fleet-columns span:nth-child(9),.fleet-row > *:nth-child(9) { display:none; }
  .counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  header {
    height: 70px;
  }
  .brand span {
    display: none;
  }
  .tools input {
    width: 60%;
  }
}

/* Fleet snapshot charts use the same current telemetry as the fleet rows. */
.metrics { display:grid; grid-template-columns:1fr 1.15fr 1.2fr; gap:14px; flex:0 0 clamp(170px,20vh,230px); min-height:0; margin-bottom:16px; }
.metric-panel { min-width:0; min-height:0; padding:18px 22px; border:1px solid var(--line); background:linear-gradient(130deg,#131e25,#0b1116); border-radius:5px; overflow:hidden; }
.metric-title { display:flex; justify-content:space-between; gap:8px; font-size:11px; letter-spacing:1.5px; color:#dce4e9; }
.metric-title > span { font-size:9px; letter-spacing:1px; color:#758792; }
.activity-body { display:flex; align-items:center; gap:30px; height:calc(100% - 16px); }
.activity-ring { width:clamp(104px,12vh,142px); aspect-ratio:1; flex-shrink:0; border-radius:50%; background:conic-gradient(var(--green) 0 var(--active),var(--standby) var(--active) var(--online),#46525b var(--online) 100%); padding:9px; transform:rotate(-90deg); }
.activity-ring > div { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:#101920; transform:rotate(90deg); }
.activity-ring strong { font-size:30px; letter-spacing:-1px; }
.activity-ring small { color:#8c9ca6; font-size:9px; letter-spacing:1.4px; margin-top:3px; }
.activity-legend { flex:1; display:grid; gap:14px; font-size:12px; color:#9facb4; }
.activity-legend span { display:flex; align-items:center; gap:8px; }
.activity-legend b { margin-left:auto; color:#e7eff3; font-size:16px; }
.activity-legend i,.connection-key i { width:6px; height:6px; display:inline-block; border-radius:50%; }
.green { background:var(--green); }.red { background:var(--standby); }.gray { background:#56636d; }.amber { background:var(--amber); }
.connection-value { display:flex; gap:18px; align-items:center; margin:18px 0; }
.connection-value > strong { font-size:42px; letter-spacing:-2px; color:#e5f8ef; }
.connection-value > span { color:#8e9ea8; font-size:11px; }
.connection-value b { display:block; margin-top:6px; color:#dce6ec; font-size:12px; }
.connection-bar { display:flex; height:10px; gap:3px; overflow:hidden; border-radius:3px; background:#202c34; }
.connection-bar i { min-width:0; }
.connection-key { display:flex; justify-content:space-between; margin-top:12px; font-size:10px; color:#93a3ae; }
.connection-key i { margin-right:5px; }.connection-key b { color:#dbe5eb; margin-left:4px; }
.model-rows { height:calc(100% - 28px); overflow:auto; margin-top:17px; display:flex; flex-direction:column; gap:14px; }
.model-line { display:grid; grid-template-columns:minmax(100px,1fr) 1.2fr 44px; gap:12px; align-items:center; font-size:11px; }
.model-line > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#c3d0d9; }
.model-track { height:7px; border-radius:3px; background:#25333d; overflow:hidden; }.model-track i { display:block; height:100%; background:linear-gradient(90deg,#168a5f,#37d598); border-radius:3px; }
.model-line b { text-align:right; }.model-line small { color:#718590; font-size:10px; }
.metrics-empty { color:#80929e; font-size:12px; padding-top:20px; }
main.dashboard-shell { height:calc(100vh - 103px); }
.fleet-list { overflow-y:auto; min-height:0; flex:1; }
.tools,.command,.fleet-columns { flex-shrink:0; }
.receiver.unavailable { color:var(--amber); }.receiver.unavailable i { background:var(--amber); box-shadow:none; }
@media(max-width:1100px) { .metric-panel { padding:14px; }.activity-body { gap:14px; }.metric-title { font-size:10px; }.metric-title > span { display:none; }.connection-value > strong { font-size:32px; }.connection-key { font-size:9px; } }
@media(max-width:700px) { .metrics { grid-template-columns:1fr; flex-basis:auto; }.metric-panel { min-height:160px; }.activity-body { height:120px; }.model-rows { max-height:140px; } main.dashboard-shell { height:auto; overflow:visible; padding-bottom:85px; }.fleet-list { overflow:auto; max-height:65vh; } }

[hidden]{display:none!important}.access{max-width:620px;margin:15vh auto;padding:40px;border:1px solid #29343c;background:#10171d;text-align:center}.access p{color:#a4b3bd;line-height:1.6}.access button{margin:12px}
.fleet-row .nav-oem b,.fleet-row .nav-oem small{color:#929ba5}

#enrollments{margin:24px 0;padding:24px;border:1px solid #36424b} .enrollment-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #36424b}.enrollment-row button{padding:12px 24px;cursor:pointer}

/* Keep approvals visible within the fixed-height fleet layout. */
#enrollments{flex:0 0 auto;max-height:30vh;overflow-y:auto;margin:0 0 18px;padding:16px 20px;border:1px solid #56a8d8;background:#101e28}#enrollments h2{margin:0 0 8px;font-size:20px}#enrollments p{margin:8px 0}.enrollment-row span{min-width:0;overflow-wrap:anywhere}.enrollment-row button{flex-shrink:0}