/* data-panel.js: "Data received". Same palette as styles.css: #0d1117 ground, #161b22 bars,
   #30363d rules; blue = still uploading, amber = missing, green = complete. */

#data-launch {
  position: absolute; top: 10px; right: 56px; z-index: 900;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 7px 11px; border-radius: 4px; cursor: pointer;
  background: #161b22; color: #c9d1d9; border: 1px solid #30363d;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
#data-launch:hover, #data-launch.open { border-color: #58a6ff; }
#data-launch:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
#data-launch::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 0; background: #8b949e; }
#data-launch.dp-ok::before   { background: #3fb950; }
#data-launch.dp-gap::before  { background: #d29922; }
#data-launch.dp-wait::before { background: #58a6ff; }
#data-launch.dp-none::before { background: #f85149; }

#data-pane {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1400;
  width: min(860px, 100vw); display: flex; flex-direction: column;
  background: #0d1117; color: #c9d1d9; border-left: 1px solid #30363d;
  box-shadow: -6px 0 18px rgba(0,0,0,.45);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#data-pane[hidden] { display: none; }
#data-pane-head { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #161b22; border-bottom: 1px solid #30363d; }
#data-pane-title { flex: 1; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #58a6ff; }
#data-pane-close { background: none; border: 1px solid #30363d; color: #8b949e; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 7px; border-radius: 3px; }
#data-pane-close:hover { color: #c9d1d9; border-color: #58a6ff; }

#data-pane-summary { flex-shrink: 0; padding: 10px 12px; border-bottom: 1px solid #21262d; display: grid; gap: 3px; }
#data-pane-banner { flex-shrink: 0; margin: 8px 12px 0; padding: 8px 10px; border-radius: 4px; font-size: 12px; }
#data-pane-banner[hidden] { display: none; }
#data-pane-banner.dp-b-wait { background: rgba(88,166,255,.12); border: 1px solid rgba(88,166,255,.4); }
#data-pane-banner.dp-b-gap  { background: rgba(210,153,34,.12); border: 1px solid rgba(210,153,34,.45); }
#data-pane-banner.dp-b-ok   { background: rgba(63,185,80,.12);  border: 1px solid rgba(63,185,80,.4); }
#dp-reload { margin-left: 8px; background: #238636; color: #fff; border: 0; border-radius: 3px; padding: 3px 9px; cursor: pointer; font: inherit; font-weight: 600; }

#data-pane-body { flex: 1; overflow: auto; }
table.dp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.dp-tbl thead th { position: sticky; top: 0; z-index: 1; background: #1c2129; text-align: left; padding: 0; border-bottom: 1px solid #30363d; white-space: nowrap; }
table.dp-tbl thead th button { all: unset; display: block; padding: 7px 8px; color: #8b949e; font-weight: 600; cursor: pointer; }
table.dp-tbl thead th button:hover { color: #c9d1d9; }
table.dp-tbl thead th button:focus-visible { outline: 2px solid #58a6ff; outline-offset: -2px; }
table.dp-tbl thead th[aria-sort="ascending"] button, table.dp-tbl thead th[aria-sort="descending"] button { color: #58a6ff; }
table.dp-tbl tbody td { padding: 6px 8px; border-bottom: 1px solid #21262d; white-space: nowrap; vertical-align: middle; }
table.dp-tbl tbody tr:hover { background: rgba(88,166,255,.06); }
.dp-name { color: #c9d1d9; font-weight: 600; }
.dp-sub { color: #8b949e; font-size: 11px; }

.dp-pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; border: 1px solid; cursor: help; }
.dp-pill.dp-ok    { color: #3fb950; border-color: rgba(63,185,80,.45); }
.dp-pill.dp-gap   { color: #d29922; border-color: rgba(210,153,34,.5); }
.dp-pill.dp-wait  { color: #58a6ff; border-color: rgba(88,166,255,.5); }
.dp-pill.dp-none  { color: #f85149; border-color: rgba(248,81,73,.45); }
.dp-pill.dp-muted { color: #8b949e; border-color: #30363d; }
.dp-t-wait { color: #58a6ff; } .dp-t-gap { color: #d29922; } .dp-t-none { color: #f85149; } .dp-t-muted { color: #8b949e; }

.dp-strip { display: block; width: 120px; height: 10px; background: #161b22; border-radius: 2px; }
.dp-s-have { fill: #2ea043; }
.dp-s-gap  { fill: #d29922; }
.dp-s-wait { fill: #58a6ff; opacity: .55; }
.dp-s-none { fill: #30363d; }
.dp-s-loc  { fill: #6e7681; }

#data-pane-foot { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid #21262d; color: #8b949e; font-size: 11px; display: grid; gap: 3px; }
#data-pane-foot b { color: #c9d1d9; font-weight: 600; }
.dp-key { display: inline-block; width: 10px; height: 8px; border-radius: 1px; margin: 0 2px 0 6px; vertical-align: 0; }
.dp-key-have { background: #2ea043; } .dp-key-gap { background: #d29922; } .dp-key-wait { background: #58a6ff; opacity: .55; }

/* The mission list's one-line data status (mission-list.js). */
.mission-data { font-size: 10px; color: #8b949e; }
.mission-data.dp-t-wait { color: #58a6ff; } .mission-data.dp-t-gap { color: #d29922; } .mission-data.dp-t-ok { color: #3fb950; }

/* The collapsed "No data" group at the foot of the table. */
table.dp-tbl tr.dp-group td { padding: 0; border-bottom: 1px solid #21262d; }
#dp-silent { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 8px; color: #8b949e; font-size: 12px; cursor: pointer; }
#dp-silent:hover { color: #c9d1d9; background: rgba(88,166,255,.06); }
#dp-silent:focus-visible { outline: 2px solid #58a6ff; outline-offset: -2px; }

/* Check for new data, and the per-sensor dropdown. */
#data-pane-check { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 3px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; }
#data-pane-check:hover:not(:disabled) { border-color: #58a6ff; }
#data-pane-check:disabled { color: #8b949e; cursor: wait; }
table.dp-tbl tr.dp-row { cursor: pointer; }
table.dp-tbl tr.dp-row:focus-visible { outline: 2px solid #58a6ff; outline-offset: -2px; }
.dp-caret { display: inline-block; width: 12px; color: #8b949e; }
table.dp-tbl tr.dp-detail td { white-space: normal; background: #11161d; padding: 8px 12px 10px 28px; color: #c9d1d9; line-height: 1.5; }
tr.dp-detail ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
tr.dp-detail ul.dp-big { margin-top: 2px; font-variant-numeric: tabular-nums; }
tr.dp-detail .dp-sub { margin-top: 6px; }
.dp-action { margin-top: 8px; padding: 6px 8px; border-left: 2px solid #58a6ff; background: rgba(88,166,255,.07); color: #c9d1d9; }
.dp-check-one { margin: 0 4px; background: #1f6feb; color: #fff; border: 0; border-radius: 3px; padding: 2px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dp-check-one:disabled { background: #30363d; color: #8b949e; cursor: wait; }