/* Status bar injected by app.js. All classes are prefixed with bp- so they
   do not collide with the styling of the content pages. */
.bp-status {
  --bp-bg: #f2f2f2;
  --bp-fg: #1a1a1a;
  --bp-border: #d0d0d0;
  --bp-ok: #1b7a32;
  --bp-busy: #555555;
  --bp-bad: #a4262c;
  --bp-warn-bg: #fff4c2;
  --bp-warn-fg: #4d3b00;
  --bp-info-bg: #1f5fbf;
  --bp-info-fg: #ffffff;

  position: sticky;
  top: 0;
  z-index: 2147483000;
  margin: 0;
  padding: 0;
  background: var(--bp-bg);
  color: var(--bp-fg);
  border-bottom: 1px solid var(--bp-border);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  .bp-status {
    --bp-bg: #1e1e1e;
    --bp-fg: #e8e8e8;
    --bp-border: #3a3a3a;
    --bp-ok: #5fd07a;
    --bp-busy: #b0b0b0;
    --bp-bad: #ff8a8f;
    --bp-warn-bg: #4a3d00;
    --bp-warn-fg: #ffe9a3;
    --bp-info-bg: #3b7de0;
    --bp-info-fg: #ffffff;
  }
}

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

.bp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 6px 12px;
  padding-top: max(6px, env(safe-area-inset-top));
}

.bp-version {
  font-weight: 600;
}

.bp-offline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bp-offline.bp-ok { color: var(--bp-ok); }
.bp-offline.bp-busy { color: var(--bp-busy); }
.bp-offline.bp-bad { color: var(--bp-bad); }

/* Green check mark drawn with CSS */
.bp-offline.bp-ok::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 11px;
  margin: 0 3px 3px 2px;
  border: solid var(--bp-ok);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.bp-install {
  margin: 0;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background: #b01e23;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.bp-install[hidden] { display: none; }

.bp-push {
  margin: 0;
  padding: 3px 11px;
  border: 1px solid var(--bp-info-bg);
  border-radius: 4px;
  background: transparent;
  color: var(--bp-fg);
  font: inherit;
  cursor: pointer;
}

.bp-push[hidden] { display: none; }

.bp-push-denied {
  flex-basis: 100%;
  color: var(--bp-busy);
  font-size: 13px;
}

.bp-push-denied[hidden] { display: none; }
.bp-push:disabled { opacity: 0.7; cursor: default; }

.bp-msg {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  font: inherit;
  text-align: left;
}

.bp-msg[hidden] { display: none; }

.bp-msg-warn {
  background: var(--bp-warn-bg);
  color: var(--bp-warn-fg);
}

.bp-msg-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid var(--bp-border);
}

.bp-msg-hint[hidden] { display: none; }

.bp-hint-text { flex: 1; }

.bp-hint-close {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.bp-msg-info {
  background: var(--bp-info-bg);
  color: var(--bp-info-fg);
  font-weight: 600;
  cursor: pointer;
}