:root {
  --app-bg: #0f1419;
  --app-surface: #151b22;
  --app-surface-2: #1a222c;
  --app-border: #2a3544;
  --app-text: #d8dee9;
  --app-muted: #8b9cb3;
  --app-primary: #1e3a5f;
  --app-primary-hover: #254a75;
  --app-accent: #3d6a99;
}

html {
  font-size: 14px;
}

.app-body {
  background-color: var(--app-bg);
  color: var(--app-text);
  min-height: 100vh;
}

.app-navbar {
  background-color: var(--app-primary);
}

.app-dropdown {
  background-color: var(--app-surface-2);
  border: 1px solid var(--app-border);
}

.app-main {
  max-width: 1400px;
}

.app-card {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.app-card-header {
  background-color: var(--app-surface-2);
  border-bottom: 1px solid var(--app-border);
  color: var(--app-muted);
  font-weight: 600;
}

.app-table {
  --bs-table-bg: var(--app-surface);
  --bs-table-color: var(--app-text);
  border-color: var(--app-border);
  color: var(--app-text);
}

.app-table thead th {
  border-color: var(--app-border);
  color: var(--app-muted);
  font-weight: 600;
}

.app-table tbody td {
  border-color: var(--app-border);
  vertical-align: middle;
}

.app-log-preview,
.app-log-panel,
.app-stream-log,
.app-env-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.app-log-preview,
.app-log-panel,
.app-stream-log {
  background-color: #0a0d11;
  color: #c5d0de;
  padding: 0.65rem 0.75rem;
  max-height: 18rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.app-stream-log {
  min-height: 16rem;
  max-height: 28rem;
}

.app-env-textarea {
  background-color: #0a0d11;
  color: #c5d0de;
  border: 1px solid var(--app-border);
}

.form-control,
.form-select {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text);
}

.form-control:focus {
  background-color: #0a0d11;
  border-color: var(--app-accent);
  color: var(--app-text);
  box-shadow: 0 0 0 0.15rem rgba(61, 106, 153, 0.25);
}

.form-label {
  color: var(--app-muted);
}

.btn-primary {
  background-color: var(--app-accent);
  border-color: #2d557d;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--app-primary-hover);
  border-color: var(--app-accent);
}

.app-badge-status {
  background-color: #2e4057;
  color: #e8eef4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: lowercase;
}

.log-line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-line.log-err {
  color: #f08080;
}

.log-line.log-warn {
  color: #e6c35c;
}

.log-line.log-ok {
  color: #7dce9a;
}

.table-secondary {
  --bs-table-bg: var(--app-surface-2);
  --bs-table-color: var(--app-muted);
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.82);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.text-secondary {
  color: var(--app-muted) !important;
}

.alert {
  border-radius: 2px;
}

.card {
  border-radius: 2px;
}

.btn {
  border-radius: 2px;
}

.btn-close {
  filter: invert(0.85);
}