/* ─── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #0f1117; color: #e8eaf0; min-height: 100vh; }
a { color: #7c9eff; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #1e2130; padding: 2px 6px; border-radius: 4px; font-size: .85em; word-break: break-all; }
.muted  { color: #7a7f99; }
.small  { font-size: .85em; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-block; padding: 10px 20px; border-radius: 8px;
  background: #5b7fff; color: #fff; border: none; cursor: pointer; font-size: 1rem;
}
.btn-primary:hover { background: #4068f0; text-decoration: none; }
.btn-outline {
  display: inline-block; padding: 9px 18px; border-radius: 8px;
  border: 1px solid #3a3f5c; color: #c0c4d8; background: transparent; cursor: pointer; font-size: .95rem;
}
.btn-outline:hover { border-color: #7c9eff; color: #7c9eff; text-decoration: none; }
.btn-full  { width: 100%; }
.btn-lg    { padding: 13px 28px; font-size: 1.05rem; }

/* ─── Top nav ────────────────────────────────────────────── */
.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; background: #161a28; border-bottom: 1px solid #1f2540;
  position: sticky; top: 0; z-index: 100;
}
.nav-brand  { font-size: 1.2rem; font-weight: 700; color: #fff; }
.nav-links  { display: flex; gap: 16px; align-items: center; }

/* ─── Landing ────────────────────────────────────────────── */
body.landing { background: #0d0f1a; }

.hero {
  display: flex; align-items: center; justify-content: center; gap: 60px;
  padding: 80px 40px; max-width: 1100px; margin: 0 auto; flex-wrap: wrap;
}
.hero h1   { font-size: 2.8rem; line-height: 1.2; color: #fff; margin-bottom: 18px; }
.hero-sub  { font-size: 1.1rem; color: #9aa0c0; max-width: 480px; line-height: 1.7; margin-bottom: 28px; }
.hero-content { display: flex; flex-direction: column; gap: 12px; }
.hero-content .btn-primary, .hero-content .btn-outline { width: fit-content; }

.phone-card {
  background: #1a1e2e; border: 1px solid #2a2f4a; border-radius: 16px;
  padding: 28px 36px; min-width: 260px;
}
.phone-row  { display: flex; justify-content: space-between; gap: 40px; padding: 8px 0; border-bottom: 1px solid #1f2540; }
.phone-row:last-child { border-bottom: none; }
.phone-row .label { color: #7a7f99; }
.phone-row .val   { font-weight: 600; color: #e0e3f0; }
.green { color: #4cdb80; }
.amber { color: #f0b429; }
.red   { color: #f75858; }

.features   { padding: 60px 40px; max-width: 1100px; margin: 0 auto; }
.features h2 { font-size: 1.9rem; color: #fff; margin-bottom: 32px; text-align: center; }
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}
.feature-card {
  background: #161a28; border: 1px solid #232848; border-radius: 12px; padding: 24px;
}
.feat-icon  { font-size: 1.8rem; margin-bottom: 10px; }
.feature-card h3 { color: #fff; margin-bottom: 8px; }
.feature-card p  { color: #9aa0c0; line-height: 1.6; font-size: .95rem; }

.how-it-works { padding: 60px 40px; max-width: 720px; margin: 0 auto; }
.how-it-works h2 { font-size: 1.8rem; color: #fff; margin-bottom: 24px; }
.steps { padding-left: 20px; }
.steps li { color: #c0c4d8; line-height: 1.8; margin-bottom: 10px; font-size: 1rem; }

.site-footer { text-align: center; padding: 32px; color: #4a4f6a; border-top: 1px solid #1a1e2e; }

/* ─── Auth page ──────────────────────────────────────────── */
body.auth-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, #1a2050 0%, #0d0f1a 70%);
}
.auth-card {
  background: #161a28; border: 1px solid #2a2f4a; border-radius: 16px;
  padding: 40px 36px; width: 100%; max-width: 420px;
}
.auth-brand { display: block; font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 28px; text-align: center; }
.auth-tabs  { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid #232848; }
.auth-tabs a {
  flex: 1; text-align: center; padding: 10px; color: #7a7f99; font-weight: 500;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.auth-tabs a.active { color: #fff; border-bottom-color: #5b7fff; }
.auth-tabs a:hover  { color: #fff; text-decoration: none; }
form label  { display: flex; flex-direction: column; gap: 6px; color: #c0c4d8; margin-bottom: 16px; font-size: .95rem; }
form input  { padding: 11px 14px; border-radius: 8px; border: 1px solid #2a2f4a; background: #0f1117; color: #fff; font-size: 1rem; }
form input:focus { outline: 2px solid #5b7fff; border-color: transparent; }
.auth-switch { text-align: center; color: #7a7f99; margin-top: 18px; font-size: .9rem; }

/* ─── Dashboard ──────────────────────────────────────────── */
.dashboard-wrap { max-width: 1100px; margin: 32px auto; padding: 0 24px; display: flex; flex-direction: column; gap: 24px; }
.panel {
  background: #161a28; border: 1px solid #232848; border-radius: 12px; padding: 24px 28px;
}
.panel h2 { color: #fff; margin-bottom: 16px; font-size: 1.25rem; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 8px; border: 1px solid #2a2f4a; background: #0f1117; color: #fff; font-size: 1rem; }

.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.device-card {
  background: #0f1117; border: 1px solid #232848; border-radius: 10px; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.device-name  { font-weight: 600; font-size: 1rem; color: #fff; }
.device-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { background: #161a28; border-radius: 8px; padding: 10px; text-align: center; }
.metric-label { display: block; font-size: .75rem; color: #7a7f99; margin-bottom: 4px; }
.metric-val   { display: block; font-size: 1.1rem; font-weight: 700; color: #e0e3f0; }
.api-key-details { margin-top: 4px; }
.api-key-details summary { cursor: pointer; color: #7a7f99; font-size: .85rem; }
.device-since { margin-top: 4px; }

/* ─── Device status indicator ───────────────────────────────── */
.status-dot {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.80rem;
  vertical-align: middle;
  background: rgba(255,255,255,0.02);
  color: #7a7f99;
  border: 1px solid rgba(255,255,255,0.02);
}
.status-dot.online {
  background: rgba(76,219,128,0.10);
  color: #4cdb80;
  border-color: rgba(76,219,128,0.15);
}
.status-dot.offline {
  background: rgba(255,255,255,0.02);
  color: #7a7f99;
  border-color: rgba(255,255,255,0.02);
}

/* small helpers */
.btn-small { padding: 6px 10px; font-size: 0.85rem; border-radius: 8px; }
.device-display { font-weight: 600; color: #cfd6e9; margin-left: 6px; }

/* ─── Alerts ─────────────────────────────────────────────── */
.error  { background: #2a1a1a; border: 1px solid #7f2525; color: #f09090; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem; }
.notice { background: #162a1e; border: 1px solid #1f5c38; color: #70d49c; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem; }
.success { background: #162a1e; border: 1px solid #1f5c38; color: #70d49c; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }

/* ─── Legacy / misc ──────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border: 1px solid #232848; }
th { background: #161a28; }
.btn-link { color: #7c9eff; }
header { margin-bottom: 18px; }

/* ─── Small charts (sparklines) ───────────────────────────── */
.device-charts { margin-top: 8px; }
.device-charts .chart-controls { display:flex; align-items:center; gap:8px; }
.chart-row { display:flex; gap:8px; }
.chart-label { font-size: .75rem; color: #7a7f99; text-align: center; margin-bottom: 6px; }
.device-charts canvas { width: 100%; height: 140px; display: block; }

/* Disable scroll anchoring inside the main dashboard to prevent automatic jumps */
.dashboard-wrap { overflow-anchor: none; }

/* Chart frame: keep canvas out of document flow to avoid layout shifts */
.chart-frame { position: relative; height: 140px; overflow: hidden; }
.chart-frame canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* Previously we hid metrics/controls in graph-only mode; keep metrics and controls visible so numbers, remove button and range selector show. */

/* Hide cards that we mark as no-data */
.device-card.no-data { display: none !important; }

/* small overlay when no data exists for selected range */
.no-data-overlay { pointer-events: none; }

/* ─── Compact device card (Image 1 style) — improved 2x2 metric grid ───────── */
.device-card.compact {
  background: linear-gradient(180deg,#0d1116 0%, #151824 100%);
  border: 1px solid rgba(46,52,79,0.6);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.device-card.compact .device-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #e6e8ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.device-card.compact .device-display { font-weight: 500; color: #9fb0e6; margin-left: 8px; }
.device-card.compact .device-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: stretch;
}
.device-card.compact .metric {
  background: linear-gradient(180deg,#0f1418, #121521);
  padding: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 72px;
  border: 1px solid rgba(255,255,255,0.03);
}
.device-card.compact .metric-label { font-size: .75rem; color: #9aa0c0; margin-bottom:6px; }
.device-card.compact .metric-val   { font-size: 1.25rem; font-weight: 800; color: #fff; }
.device-card.compact .metric .small { font-size: .85rem; color: #7a7f99; margin-top:6px; display:block; }
.device-card.compact .device-charts { display: block; margin-top: 8px; }
.device-card.compact .chart-frame { height: 84px; }
.device-card.compact .chart-frame canvas { height: 84px !important; }

/* Power sign coloring */
.power-pos { color: #4cdb80; }
.power-neg { color: #f75858; }

/* Charging icon */
.charge-icon { font-size: 1.05rem; margin-right: 6px; vertical-align: middle; }
.charge-icon.charging { color: #ffd166; }
.charge-icon.not-charging { color: #7a7f99; }

/* Overview big chart (revenue-like) */
.overview-card { display:flex; gap:16px; align-items:flex-start; margin-top:10px; }
.overview-left { flex: 1 1 60%; background: linear-gradient(180deg, rgba(10,30,20,0.25), rgba(8,20,14,0.18)); border-radius:10px; padding:12px; }
.overview-right { flex: 0 0 38%; display:flex; align-items:flex-start; }
.big-chart-title { font-size:0.9rem; color:#cfeed8; margin-bottom:6px; }
.big-chart-value { font-size:1.6rem; font-weight:700; color:#e6fff1; }
.big-chart-frame { height:96px; position:relative; }
.big-chart-sub { color:#9aa0c0; margin-top:6px; }

/* Mini cube grid */
.mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; width:100%; }
.mini-cube { background: rgba(255,255,255,0.02); border-radius:8px; padding:10px; display:flex; flex-direction:column; align-items:flex-start; }
.mini-label { font-size:0.75rem; color:#9aa0c0; }
.mini-val { font-size:1.05rem; font-weight:600; color:#fff; margin-top:6px; }
.mini-canvas { width:100%; height:36px; margin-top:6px; }

/* Power graph under overview */
.power-graph { margin-top:10px; background: rgba(255,255,255,0.02); border-radius:10px; padding:8px; }
.power-graph .chart-frame { height:64px; }

@media (max-width: 900px) {
  .overview-card { flex-direction:column; }
  .overview-right { width:100%; }
}

.device-card.compact .status-dot { margin-left: 0; padding: 4px 8px; border-radius: 8px; font-size: .8rem; }