/*
 * Styling for the offline manager on docs/common-offline.
 *
 * Follows ArduPilot's other tool front-end, custom.ardupilot.org: a dark
 * #212529 header strip, Bootstrap-style status badges and progress bars, and a
 * dense table. That site is Bootstrap 5, which cannot be loaded here - it comes
 * from a CDN and this page has to work with no connection - so the handful of
 * rules it needs are reproduced below.
 *
 * Everything is scoped under .apo so it cannot affect the surrounding wiki
 * page, which is styled by sphinx_rtd_theme.
 *
 * Loaded by common-offline.rst; served from /css/offline.css and cached by the
 * service worker like any other static asset.
 */

.apo {
  /* Bootstrap 5's palette, as used by custom.ardupilot.org. */
  --dark: #212529;
  --success: #198754;
  --danger: #dc3545;
  --warning: #ffc107;
  --primary: #0d6efd;
  --muted: #6c757d;
  --line: #dee2e6;
  --track: #e9ecef;
  --hover: #f8f9fa;
  --sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
         Arial, sans-serif;

  font-family: var(--sys);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin: 20px 0 28px;
}

/* ---- header strip ------------------------------------------------------ */

.apo .apo-head {
  background: var(--dark);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
}
.apo .apo-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
}
.apo .apo-head .apo-spacer { flex: 1 1 auto; }

/* ---- buttons ----------------------------------------------------------- */

.apo .apo-btn {
  font-family: var(--sys);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s, background-color .12s;
  margin: 0;
}
.apo .apo-btn:disabled { opacity: .45; cursor: not-allowed; }
/* A disabled destructive button should read as inert rather than as a faded
   warning - keeping it red implies it still does something. */
.apo .apo-btn-danger:disabled {
  background: transparent;
  border-color: #6c757d;
  color: #adb5bd;
  opacity: 1;
}
.apo .apo-btn { position: relative; overflow: hidden; }

/*
 * Countdown under an armed destructive button.
 *
 * It shows how long the confirmation stays live, and gives the press somewhere
 * to read as "not finished yet" - the button changing colour alone invites a
 * second click straight away, which is exactly what a confirmation is meant to
 * prevent.
 */
.apo .apo-arm {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, .85);
  transform-origin: left center;
}
.apo .apo-arm.apo-arm-run { transition: width linear; width: 0; }
.apo .apo-btn-primary { background: var(--success); border-color: var(--success); color: #fff; }
.apo .apo-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.apo .apo-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.apo .apo-btn-danger:hover:not(:disabled) { filter: brightness(1.1); }
/* Armed: darker, so the two states are still tellable apart now that the
   button is red whether armed or not. */
.apo .apo-btn-armed { background: #a71d2a; border-color: #a71d2a; }
.apo .apo-btn-armed:hover:not(:disabled) { background: #8f1923; filter: none; }
/* Outlined, for the header strip where the background is dark. */
.apo .apo-btn-ghost { background: transparent; border-color: #6c757d; color: #fff; }
.apo .apo-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
/* Outlined, for use on white. */
.apo .apo-btn-outline { background: #fff; border-color: var(--line); color: var(--dark); }
.apo .apo-btn-outline:hover:not(:disabled) { background: var(--hover); }

/* ---- table ------------------------------------------------------------- */

.apo table.apo-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: #fff;
  font-size: .95rem;
}
.apo table.apo-table thead th {
  background: var(--dark);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  white-space: nowrap;
}
.apo table.apo-table td {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.apo table.apo-table tbody tr:last-child td { border-bottom: 0; }
.apo table.apo-table tbody tr:hover td { background: var(--hover); }
.apo .apo-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  width: 1%;
}
.apo .apo-name { width: auto; }
.apo label.apo-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
/* Not a <label>: clicking a column title should not select every wiki, so
   only the box itself is a target. */
.apo table.apo-table thead th .apo-pick,
.rst-content .apo table.apo-table thead th .apo-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.apo table.apo-table thead th .apo-pick input[type="checkbox"] {
  cursor: pointer;
}
.apo input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--primary);
}
.apo input[type="checkbox"]:disabled { opacity: .55; }

/* ---- status badges ----------------------------------------------------- */

.apo .apo-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.apo .apo-badge-stored { background: var(--success); color: #fff; }
.apo .apo-badge-none { background: var(--track); color: var(--muted); }
.apo .apo-badge-busy { background: var(--warning); color: #000; }

/* ---- progress ---------------------------------------------------------- */

.apo .apo-progress {
  height: 16px;
  min-width: 90px;
  background: var(--track);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.apo .apo-progress-bar {
  height: 100%;
  width: 0;
  background: var(--success);
  transition: width .3s ease;
}
.apo .apo-progress span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--dark);
}

/* ---- footer and notices ------------------------------------------------ */

/*
 * Two fixed slots rather than a row of competing spans.
 *
 * The footer previously held five status elements in one flex row. Each
 * progress tick changed one of their widths, which re-flowed all of them, and
 * the whole strip appeared to flicker several times a second.
 */
.apo .apo-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 3px 16px;
  padding: 10px 14px;
  background: var(--hover);
  border-top: 1px solid var(--line);
  font-size: .9rem;
  min-height: 58px;
}
/* Each status is a flex row of its own parts, so a wrap breaks between them
   rather than mid-phrase, and adjacent spans cannot run into each other. */
.apo .apo-foot-status {
  grid-column: 2;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0 10px;
  text-align: right;
  /* Reserved so text of differing lengths cannot shift the row. */
  min-height: 1.35em;
}
/* The device line is reference detail, not the answer to "what will this do". */
.apo .apo-foot-status + .apo-foot-status {
  font-size: .8rem;
  color: var(--muted);
}
.apo .apo-foot label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.apo .apo-status { color: var(--muted); }

/* Muted fill with the colour carried by a left accent rule, so a note reads
   as a band in the panel rather than a block dropped on it. */
.apo .apo-note {
  padding: 11px 14px 11px 12px;
  font-size: .9rem;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  margin: 0;
  line-height: 1.5;
}
.apo .apo-note a { color: inherit; text-decoration: underline; }
.apo .apo-note-warn {
  background: #fdf8ec;
  border-left-color: var(--warning);
  color: #6b5518;
}
.apo .apo-note-ok {
  background: #f0f7f3;
  border-left-color: var(--success);
  color: #1a5440;
}
.apo .apo-note-info {
  background: #eff8fb;
  border-left-color: #0dcaf0;
  color: #14606f;
}

.apo .apo-files { padding: 14px; border-top: 1px solid var(--line); }
.apo .apo-files h3 {
  font-family: var(--sys);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 700;
}
.apo .apo-file { margin-bottom: 14px; }
.apo .apo-file:last-child { margin-bottom: 0; }
.apo .apo-hint { color: var(--muted); font-size: .85rem; margin-top: 3px; }

@media (max-width: 700px) {
  .apo .apo-pages, .apo .apo-pages-h { display: none; }
  .apo .apo-head { gap: 8px; }
}

/* ---- the install button --------------------------------------------------
 * Sits under the "Install as an app" section, which is ordinary page text, so
 * it borrows the tool's button styling and nothing else.
 */
.apo-install-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
}
.apo-install-row .apo-btn {
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #212529;
  cursor: pointer;
}
.apo-install-row .apo-btn:hover { background: #f8f9fa; }
.apo-install-row .apo-hint { color: #6c757d; font-size: .85rem; }
.apo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  background: var(--hover);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--danger);
}

/* ---- holding our own against the theme --------------------------------- */

/*
 * sphinx_rtd_theme styles tables, labels and inputs broadly across
 * .rst-content, and those rules are more specific than a bare class. Rather
 * than sprinkling !important, the selectors below are qualified with
 * .rst-content so they win on specificity where it matters - and they are all
 * still confined to .apo, so nothing outside the panel is touched.
 */
.rst-content .apo table.apo-table,
.rst-content .apo table.apo-table td,
.rst-content .apo table.apo-table th {
  border: 0;
  background-image: none;
}
.rst-content .apo table.apo-table { display: table; width: 100%; margin-bottom: 0; }
.rst-content .apo table.apo-table thead th { background: var(--dark); color: #fff; }
.rst-content .apo table.apo-table td {
  border-bottom: 1px solid var(--line);
  white-space: normal;
  vertical-align: middle;
  line-height: 1.4;
}
.rst-content .apo table.apo-table tbody tr:last-child td { border-bottom: 0; }
/* Numeric columns must not wrap: "433 MB" breaking over two lines looks broken.
   Qualified to out-specify the td rule above, which sets white-space: normal -
   without the extra element selectors this loses to it. */
.rst-content .apo table.apo-table td.apo-num,
.rst-content .apo table.apo-table th.apo-num { white-space: nowrap; }

/* The theme gives labels display:block and its own margins, which stacks the
   checkbox above its text. */
.rst-content .apo label,
.rst-content .apo label.apo-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
}
.rst-content .apo input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
}
.rst-content .apo p { margin: 0; }
.rst-content .apo .apo-hint { margin-top: 4px; }
.rst-content .apo .apo-title { margin: 0; color: #fff; }
.rst-content .apo code { color: var(--danger); background: var(--hover); }