/* Dark Swiss overlay for AppOpVibe. Loads after Bootstrap. */
:root {
  --bg: #11110f;
  --surface: #1b1a17;
  --fg: #ece8df;
  --muted: #9a9488;
  --subtle: #6e6a62;
  --primary: #5f8a86;
  --primary-fg: #0e1413;
  --border: #2c2a26;
  --danger: #c45c4a;
  --ok: #7a9a6e;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --display: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

html, body {
  min-height: 100%;
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--sans) !important;
}

a { color: var(--primary); }
a:hover { color: #7aa8a4; }

h1, h2, .display-4, .display-5, .display-6 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.lead, .text-muted { color: var(--muted) !important; }

.navbar.bg-primary,
.navbar.navbar-dark {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.navbar-brand {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--fg) !important;
}
.navbar-nav .nav-link { color: var(--muted) !important; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: var(--fg) !important; }
.navbar-toggler { border-color: var(--border); }

.card,
.card.shadow-sm,
.bg-light,
.bg-white,
.modal-content {
  background: var(--surface) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.card-body, .bg-light.p-3, .rounded-3 { background: var(--surface) !important; color: var(--fg) !important; }

.btn-primary,
.btn-primary.btn-lg {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-fg) !important;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); color: var(--primary-fg) !important; }
.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--border) !important;
}
.btn-secondary, .btn-outline-secondary {
  background: transparent !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

.form-control,
.form-select,
textarea.form-control {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
  font-family: var(--mono);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(95, 138, 134, 0.25) !important;
  outline: none;
}
.form-label, .form-text, .form-check-label { color: var(--muted); }
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-primary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}
.alert-success { border-color: var(--ok); }
.alert-danger { border-color: var(--danger); }

.text-primary, .bi.text-primary { color: var(--primary) !important; }
.text-success, .bi.text-success { color: var(--ok) !important; }
.text-danger { color: var(--danger) !important; }

.footer,
footer.footer,
.footer.bg-light {
  background: var(--bg) !important;
  border-top: 1px solid var(--border);
  color: var(--subtle) !important;
}

.markdown-content pre {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg);
}
.markdown-content table th,
.markdown-content table td {
  border-color: var(--border);
}

a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
  outline-offset: 2px;
}