/* Fleet panel. Read indoors on a desktop, unlike the field UI — so it can be
   denser and darker-on-white than the tablet screens. Same palette, though:
   these are two views of one product. */

:root {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --border: #d3dad3;
  --ink: #16201a;
  --ink-soft: #5b6b60;
  --green: #1f7a4d;
  --green-dark: #165c3a;
  --red: #b3261e;
  --amber: #a86800;
  --shadow: 0 1px 3px rgba(0, 0, 0, .10);
  --radius: 8px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so any
   class that sets `display` silently outranks it. `.login-screen` is fixed and
   covers the viewport: without this it stays clickable after login and eats
   every press meant for the page behind it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Vazirmatn, "IRANSans", Tahoma, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

h1, h2 { margin: 0; }

/* ---------- login ---------- */

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 2000;
}
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  width: min(360px, 90vw);
}
.login-box h1 { font-size: 20px; margin-bottom: 4px; }
.login-box input {
  width: 100%;
  padding: 9px 11px;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.login-box input:focus { outline: 2px solid var(--green); outline-offset: -1px; }

/* ---------- chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 500;
}
.brand { font-weight: 700; font-size: 17px; white-space: nowrap; }

.tabs { display: flex; gap: 4px; flex: 1; }
.tab {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
}
.tab:hover { background: #eef2ee; }
.tab.is-active {
  background: #e9f5ee;
  border-color: #cfe6d9;
  color: var(--green-dark);
  font-weight: 700;
}

.content { padding: 18px; max-width: 1240px; margin: 0 auto; }

/* ---------- cards & layout ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card h2 { font-size: 14px; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.card h2.mt { margin-top: 18px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-map { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.card-map { padding: 0; overflow: hidden; position: relative; }

@media (max-width: 900px) {
  .grid-2, .grid-map { grid-template-columns: 1fr; }
}

/* The top bar is one row of: name, three tabs, refresh, logout. On a phone
   that has never fitted — it pushed the whole page 36 px wide before the
   product name was even spelled out in full. Rather than shrink the name to
   fit the bar, let the bar wrap: the name takes its own line, and the tabs
   scroll inside their own strip if they still run long. This holds for any
   name length instead of only the current one. */
@media (max-width: 720px) {
  .topbar {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 14px;
  }
  .brand {
    flex: 1 0 100%;
    font-size: 16px;
  }
  .tabs {
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }
}

.hint { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }

/* ---------- tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.tile-label { font-size: 12px; color: var(--ink-soft); }
.tile-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.tile-sub { font-size: 12px; color: var(--ink-soft); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td {
  text-align: right;
  padding: 7px 10px;
  border-bottom: 1px solid #eef1ee;
  white-space: nowrap;
}
th { color: var(--ink-soft); font-weight: 700; font-size: 12px; }
td { font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f7faf8; }
tr.clickable { cursor: pointer; }
.empty { color: var(--ink-soft); font-size: 13px; padding: 10px 0; }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.pill-ok { background: #e9f5ee; color: var(--green-dark); }
.pill-bad { background: #fdeceb; color: var(--red); }
.pill-warn { background: #fff5e0; color: #7a4a00; }

/* Board ids and firmware strings are Latin/hex. Left to the RTL algorithm
   they get visually reordered inside a right-to-left cell, which turns two
   different aircraft into the same-looking string. */
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ---------- flight detail ---------- */

#map { height: 520px; width: 100%; background: #e8ece8; }

.legend {
  position: absolute;
  bottom: 10px;
  inset-inline-start: 10px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  gap: 14px;
  z-index: 500;
}
.swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  vertical-align: middle;
  margin-inline-end: 4px;
}
.swatch-spray { background: #b3261e; }
.swatch-transit { background: #9aa8a0; }

.stat-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.stat-line:last-child { border-bottom: 0; }
.stat-line b { font-variant-numeric: tabular-nums; }

.timeline { max-height: 300px; overflow-y: auto; }
.tl-row {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid #f2f4f2;
}
.tl-row:last-child { border-bottom: 0; }
.tl-time {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
}
.tl-what { font-weight: 700; }
.tl-warning .tl-what { color: var(--red); }
.tl-detail { color: var(--ink-soft); font-size: 12px; }

/* ---------- buttons, notes, toast ---------- */

.btn {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #eef2ee; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-small { padding: 5px 10px; font-size: 13px; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.btn-primary:hover { background: var(--green-dark); }
.btn-block { width: 100%; }

.note { padding: 7px 10px; border-radius: 6px; font-size: 13px; margin-top: 10px; }
.note.bad { background: #fdeceb; color: var(--red); }

.toast {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: #16201a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.toast.bad { background: var(--red); }