/* Canopy desktop control center — Bloomberg / Linear hybrid for fields.
   Tokens from ../shared/theme.css plus IBM Plex and desk-specific status. */

:root {
  --bg: var(--canopy-charcoal, #12100c);
  --bg-2: var(--canopy-charcoal-raised, #1b1813);
  --bg-3: var(--canopy-charcoal-elevated, #221e17);
  --line: var(--canopy-line, #2e2a20);
  --gold: var(--canopy-gold, #c4a35a);
  --gold-dim: var(--canopy-gold-dim, #8a7340);
  --gold-soft: var(--canopy-gold-soft, rgba(196, 163, 90, 0.16));
  --cream: var(--canopy-cream, #f3ead3);
  --muted: #8a8070;
  --cream-dim: var(--canopy-cream-muted, #c9be9a);
  --hold: #c47a3a;
  --ok: #7a9a62;
  --req: #a89a80;
  --alert: #b45a48;
  --duty: #6e8fa0;
  --font: "IBM Plex Sans", "Source Sans 3", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --nav-w: 196px;
  --drawer-w: 400px;
  --top-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--cream); }

.app {
  height: 100vh;
  min-width: 1280px;
  min-height: 800px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 40% at 80% -10%, rgba(196, 163, 90, 0.05), transparent 50%),
    var(--bg);
}

/* ——— Top bar ——— */

.topbar {
  height: var(--top-h);
  flex: 0 0 var(--top-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.topbar-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 280px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
}

.wordmark-mark {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--gold);
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(160deg, var(--gold-soft), transparent 70%);
}

.wordmark-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.topbar-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.role-switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.role-btn {
  background: transparent;
  border: 0;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.role-btn + .role-btn { border-left: 1px solid var(--line); }

.role-btn.is-on {
  background: var(--gold-soft);
  color: var(--gold);
}

.role-btn[data-role="duty"].is-on {
  background: rgba(110, 143, 160, 0.18);
  color: #b7d0dc;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  color: var(--cream-dim);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.dot.live {
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(196, 163, 90, 0.7);
  animation: pulse-dot 1.8s ease-out infinite;
}

.dot.hold { background: var(--hold); }
.dot.ok { background: var(--ok); }
.dot.off { background: #3a342c; }

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(196, 163, 90, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(196, 163, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 163, 90, 0); }
}

.clock {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  min-width: 168px;
  text-align: right;
}

.topbar-links {
  display: flex;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar-links a { color: var(--muted); }
.topbar-links a:hover { color: var(--gold); }

/* ——— Shell ——— */

.shell {
  flex: 1;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  min-height: 0;
}

.shell.drawer-open {
  grid-template-columns: var(--nav-w) 1fr var(--drawer-w);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px 12px;
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.nav-kicker {
  margin: 0 8px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--cream-dim);
  text-align: left;
  font-weight: 500;
}

.nav-item:hover { background: var(--bg-3); color: var(--cream); }

.nav-item.is-on {
  background: var(--gold-soft);
  color: var(--cream);
}

.nav-key {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  width: 12px;
}

.nav-item.is-on .nav-key { color: var(--gold); }

.nav-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

.nav-foot {
  margin-top: auto;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}

.nav-foot p { margin: 0; }

.view {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 20px;
  outline: none;
}

/* ——— Common ——— */

.kicker {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

h1.page-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.page-head .lede {
  margin: 2px 0 0;
  color: var(--muted);
  max-width: 640px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.kpi {
  padding: 10px 12px 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.kpi .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.kpi .val {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.kpi .sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.kpi.warn .val { color: var(--hold); }
.kpi.live .val { color: var(--gold); }
.kpi.ok .val { color: var(--ok); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.grid-live {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 10px;
  min-height: 0;
}

.panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px 14px;
  min-width: 0;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.panel.tight { padding: 10px 12px; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 10px 0;
}

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.gold { color: var(--gold); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px 2px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}

.pill.requested { color: var(--req); border-color: #4a4438; }
.pill.matched { color: var(--cream); border-color: #4a5340; background: rgba(122, 154, 98, 0.1); }
.pill.weather_hold { color: var(--hold); border-color: #6a4020; background: rgba(196, 122, 58, 0.1); }
.pill.live { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-soft); }
.pill.receipt { color: var(--ok); border-color: #3d4a32; background: rgba(122, 154, 98, 0.12); }
.pill.spray { border-color: #5a4830; }
.pill.survey { border-color: #3a4a50; color: #b7c8c4; }
.pill.seed { border-color: #4a5030; color: #c8c49a; }
.pill.tricho { border-color: #3a5040; color: #a8c4a8; }
.pill.duty { border-color: #3a4a55; color: #b7d0dc; }
.pill.ghost { opacity: 0.55; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-3);
  color: var(--cream);
  font-size: 12px;
  font-weight: 500;
}

.btn:hover { border-color: var(--gold-dim); color: var(--gold); }

.btn.primary {
  background: var(--gold-soft);
  border-color: var(--gold-dim);
  color: var(--gold);
}

.btn.primary:hover { background: rgba(196, 163, 90, 0.26); }

.btn.warn { color: var(--hold); border-color: #6a4020; }
.btn.ok { color: var(--ok); border-color: #3d4a32; }
.btn.ghost { background: transparent; color: var(--muted); }

.btn:disabled,
.btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.chip {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.chip.is-on {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: var(--gold-soft);
}

/* ——— Tables ——— */

.table-wrap { overflow: auto; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

table.grid th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.grid td {
  padding: 7px 8px;
  border-bottom: 1px solid #221e17;
  vertical-align: middle;
}

table.grid tr { cursor: pointer; }
table.grid tbody tr:hover td { background: var(--bg-3); }
table.grid tr.is-on td { background: var(--gold-soft); }
table.grid tr.is-on td:first-child { box-shadow: inset 2px 0 0 var(--gold); }

table.grid .id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
}

.batch-row td {
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: #19160f;
  cursor: default;
}

/* ——— Overview ——— */

.flight-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.flight-card:last-child { border-bottom: 0; }
.flight-card:hover { color: var(--gold); }

.flight-card .meta { color: var(--muted); font-size: 12px; }

.bar {
  height: 3px;
  background: #2a261e;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--gold);
}

.wx-row {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 0.7fr) 0.9fr;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid #221e17;
  font-size: 12px;
}

.wx-row.head {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.feed-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #221e17;
  font-size: 12px;
}

.feed-item time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* ——— Live / map ——— */

.grid-live .map-frame { min-height: 340px; }

.map-frame {
  position: relative;
  background: #0e0c09;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  min-height: 420px;
}

.map-frame svg { display: block; width: 100%; height: auto; }

.map-legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 6px 8px;
  background: rgba(18, 16, 12, 0.82);
  border: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.map-legend b { color: var(--gold); font-weight: 600; }

.plot { cursor: pointer; }
.plot:hover { stroke: var(--cream); stroke-width: 1.4; }
.plot.is-on { stroke: var(--gold); stroke-width: 1.8; fill: rgba(196, 163, 90, 0.28) !important; }

.drone { cursor: pointer; }
.drone text {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--cream);
}

.drone-pulse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.7;
  transform-origin: center;
  transform-box: fill-box;
  animation: drone-ring 2s ease-out infinite;
}

@keyframes drone-ring {
  0% { transform: scale(0.55); opacity: 0.7; }
  100% { transform: scale(2.3); opacity: 0; }
}

.telemetry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tel {
  padding: 10px 12px;
  background: #16130e;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.tel .lbl {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tel .val {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-top: 2px;
}

.tel .unit {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.toggle input { accent-color: var(--gold); }

.live-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

/* ——— Cue / supply / fleet ——— */

.tile {
  padding: 10px 12px;
  background: #16130e;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.tile h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 10px;
  font-size: 12px;
}

.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.banner {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  color: var(--cream-dim);
  font-size: 12px;
  margin-bottom: 12px;
}

.banner.warn {
  border-left-color: var(--hold);
  background: rgba(196, 122, 58, 0.1);
}

.banner.duty {
  border-left-color: var(--duty);
  background: rgba(110, 143, 160, 0.1);
}

.op-card {
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.op-card.is-empty {
  opacity: 0.5;
  background: repeating-linear-gradient(
    -45deg,
    #16130e,
    #16130e 6px,
    #1a1712 6px,
    #1a1712 12px
  );
}

.op-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.form {
  display: grid;
  gap: 8px;
}

.field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 6px 8px;
  background: #16130e;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--cream);
}

.field textarea { min-height: 64px; resize: vertical; }

.ask-tip {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* ——— Receipt ——— */

.receipt {
  background: #16130e;
  border: 1px solid var(--line);
  padding: 16px 18px;
}

.receipt h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.receipt .artefact {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

/* ——— Drawer ——— */

.drawer {
  border-left: 1px solid var(--line);
  background: var(--bg-2);
  overflow: auto;
  padding: 14px 16px 20px;
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.drawer-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.icon-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}

.icon-btn:hover { color: var(--cream); }

.drawer .kv { grid-template-columns: 120px 1fr; margin: 10px 0; }

/* ——— Toasts ——— */

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
}

.toast {
  min-width: 260px;
  max-width: 360px;
  padding: 9px 12px;
  background: var(--bg-3);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ——— Misc ——— */

.empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
}

.legal-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.split-list {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 10px;
  min-height: 480px;
}

.list-side {
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: auto;
}

.list-item {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.list-item:hover, .list-item.is-on { background: var(--gold-soft); }

.cloud-bar {
  height: 6px;
  background: #2a261e;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.cloud-bar > i {
  display: block;
  height: 100%;
  background: var(--duty);
}

@media (max-width: 1360px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .grid-live { grid-template-columns: 1fr; }
  .split-list { grid-template-columns: 1fr; }
}