/* Fleet dashboard (app.currentiq.ro) — only what style.css doesn't already give.
   Colours come from style.css's tokens, so light/dark and the toggle just work. */

/* --- sign in --- */
.login-card { max-width: 420px; margin: 40px auto; }
.login-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.login-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--card-alt); border: 1px solid var(--border); border-radius: 8px;
}
.login-code { font-family: var(--font-mono); letter-spacing: 0.3em; font-size: 22px; }
.login-button {
  margin-top: 16px; width: 100%; padding: 11px; font: inherit; font-weight: 600; cursor: pointer;
  color: #101C2E; background: var(--accent-amber); border: 0; border-radius: 8px;
}
.login-button:disabled { opacity: 0.6; cursor: wait; }
.login-link {
  margin-top: 10px; background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--teal-text); cursor: pointer;
}
.login-error {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  color: var(--danger-text);
  background: color-mix(in srgb, var(--danger) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

/* --- overview --- */
.fleet-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.fleet-count {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.fleet-count--ok   { color: var(--success-text); background: color-mix(in srgb, var(--success) 14%, transparent); }
.fleet-count--warn { color: var(--amber-text);   background: color-mix(in srgb, var(--accent-amber) 18%, transparent); }
.fleet-count--bad  { color: var(--danger-text);  background: color-mix(in srgb, var(--danger) 16%, transparent); }

.fleet-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.fleet-site { border-left: 4px solid var(--success); margin: 0; }
.fleet-site--warn { border-left-color: var(--accent-amber); }
.fleet-site--bad  { border-left-color: var(--danger); }

.fleet-site__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fleet-site__name { margin: 0; overflow-wrap: anywhere; }
.fleet-site__link { color: inherit; text-decoration: none; }
.fleet-site__link:hover { text-decoration: underline; }
.fleet-site__link::after { content: " →"; color: var(--muted); }
.fleet-conn { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fleet-conn--online  { color: var(--success-text); background: color-mix(in srgb, var(--success) 14%, transparent); }
.fleet-conn--late    { color: var(--amber-text);   background: color-mix(in srgb, var(--accent-amber) 18%, transparent); }
.fleet-conn--offline { color: var(--danger-text);  background: color-mix(in srgb, var(--danger) 16%, transparent); }

.fleet-stale { font-size: 12px; color: var(--danger-text); margin: -8px 0 10px; }

/* 2x2 at every width: a site card is ~340 px, too narrow for four "0.3 kW out" tiles. */
.fleet-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.fleet-stat { background: var(--card-alt); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.fleet-stat__label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fleet-stat__value { font-family: var(--font-mono); font-size: 15px; margin-top: 2px; white-space: nowrap; }
.fleet-stat__note { font-size: 10px; color: var(--muted); margin-top: 2px; }

.fleet-invs { display: flex; flex-direction: column; gap: 10px; }
.fleet-inv { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2px 12px; align-items: center; }
.fleet-inv__name { font-weight: 600; font-size: 14px; }
.fleet-inv__detail { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.fleet-inv--link-late .command-badge { color: var(--amber-text);  background: color-mix(in srgb, var(--accent-amber) 18%, transparent); }
.fleet-inv--link-down .command-badge { color: var(--danger-text); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.fleet-inv--link-ok   .command-badge { color: var(--success-text); background: color-mix(in srgb, var(--success) 14%, transparent); }

.fleet-soc { display: flex; align-items: center; gap: 8px; }
.fleet-soc__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--card-alt); border: 1px solid var(--border); overflow: hidden; }
.fleet-soc__fill { height: 100%; background: var(--accent-teal); }
.fleet-soc__pct { font-family: var(--font-mono); font-size: 13px; min-width: 4ch; text-align: right; }

.fleet-line { font-size: 12px; color: var(--muted); margin-top: 12px; }
.fleet-line--warn { color: var(--amber-text); }
.fleet-issues { margin: 12px 0 0; padding-left: 18px; font-size: 12px; color: var(--amber-text); }
.fleet-issues li { overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .fleet-sites { grid-template-columns: 1fr; }
}