html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Live log viewer (Logs/Show) */

.log-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.log-toolbar__sep {
  width: 1px;
  align-self: stretch;
  background: #dee2e6;
}

.log-status {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
}

.log-status--live { background: #d1f5df; color: #14762f; }
.log-status--connecting, .log-status--reconnecting { background: #fff3cd; color: #8a6100; }
.log-status--disconnected { background: #f8d7da; color: #a12631; }

.log-pending-note {
  font-size: 0.85rem;
  color: #6c757d;
}

.log-filter-check {
  font-size: 0.85rem;
  font-weight: normal;
  margin-bottom: 0;
  white-space: nowrap;
}

.log-text-filter {
  max-width: 260px;
}

.log-records {
  max-height: 78vh;
  overflow-y: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 4px;
  padding: 0.5rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
}

.log-rec {
  padding: 0.25rem 0.5rem;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.log-rec--error { border-left-color: #f48771; background: rgba(244, 135, 113, 0.08); }
.log-rec--warning { border-left-color: #e2c08d; background: rgba(226, 192, 141, 0.08); }
.log-rec--success { border-left-color: #89d185; background: rgba(137, 209, 133, 0.06); }
.log-rec--info { border-left-color: #569cd6; }
.log-rec--muted { color: #808080; }
.log-rec--default { border-left-color: transparent; }

.log-rec__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

.log-rec__ts {
  color: #808080;
  flex-shrink: 0;
}

.log-rec__tag {
  color: #4fc1ff;
  font-weight: 600;
  flex-shrink: 0;
}

.log-rec__meta {
  color: #9cdcfe;
  font-size: 0.8em;
}

.log-rec__meta--trace {
  color: #1e1e1e;
  background: #dcdcaa;
  font-weight: 600;
  padding: 0 0.3em;
  border-radius: 3px;
}

.log-rec__text {
  word-break: break-word;
}

.log-rec__details {
  margin-top: 0.25rem;
}

.log-rec__details summary {
  cursor: pointer;
  color: #9cdcfe;
  font-size: 0.8em;
}

.log-rec__body {
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  background: #141414;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 40vh;
  overflow: auto;
}

.log-rec__truncated-note {
  color: #e2c08d;
  font-size: 0.8em;
  margin-top: 0.25rem;
}