/* ===========================
   GLOBAL THEME VARIABLES
=========================== */
:root {
  --app-bg: #020617; /* overall background */
  --app-bg-soft: #030712;
  --app-surface: #020617; /* cards, tiles, modals */
  --app-surface-soft: #020617;
  --app-border: #1f2937;

  --app-text: #f9fafb; /* bright main text */
  --app-text-muted: #d1d5db; /* brighter muted text */

  --app-green: #16a34a; /* primary button green */
  --app-green-soft: #22c55e; /* lighter hover / accents */
  --app-green-dark: #166534; /* deeper hover */

  --app-danger: #ef4444;
}

/* ===========================
   BASE / BODY
=========================== */
body {
  background: radial-gradient(circle at top, #111827 0, #020617 45%, #000 100%);
  color: var(--app-text);
}

/* Fix Bootstrap's bg-light on dark theme */
.bg-light {
  background-color: var(--app-bg-soft) !important;
  color: var(--app-text);
}

/* ===========================
   TYPOGRAPHY & LINKS
=========================== */
body,
.btn,
.form-control,
.form-select,
.table {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

a {
  color: var(--app-green-soft);
  text-decoration: none;
}
a:hover {
  color: var(--app-green);
  text-decoration: underline;
}

/* Make muted text actually readable on dark */
.text-muted {
  color: var(--app-text-muted) !important;
  opacity: 0.95;
}

/* ===========================
   NAVBAR
=========================== */
.navbar,
.navbar-dark,
.navbar.bg-dark {
  background-color: #020617 !important;
  border-bottom: 1px solid var(--app-border);
}

.navbar-brand,
.nav-link,
.navbar-text {
  color: var(--app-text-muted) !important;
}

.nav-link.active,
.nav-link:hover {
  color: var(--app-green-soft) !important;
}

/* ===========================
   CARDS / TILES
=========================== */
.card {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.card .card-title {
  color: #ffffff;
}

/* Tile buttons (job view tiles) */
.btn.btn-light {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.btn.btn-light:hover {
  background-color: #111827;
  border-color: #374151;
  color: var(--app-text);
}

/* ===========================
   BUTTONS
=========================== */
/* Primary – dark green */
.btn-primary,
.btn-success {
  background-color: var(--app-green);
  border-color: var(--app-green-dark);
  color: #e5e7eb;
}

.btn-primary:hover,
.btn-success:hover {
  background-color: var(--app-green-dark);
  border-color: #14532d;
  color: #f9fafb;
}

/* Outline primary */
.btn-outline-primary {
  color: var(--app-green-soft);
  border-color: var(--app-green-soft);
}

.btn-outline-primary:hover {
  background-color: var(--app-green-soft);
  border-color: var(--app-green-soft);
  color: #0b1120;
}

/* Outline secondary */
.btn-outline-secondary {
  color: var(--app-text-muted);
  border-color: var(--app-border);
}

.btn-outline-secondary:hover {
  color: var(--app-text);
  border-color: #4b5563;
  background-color: #111827;
}

/* Danger */
.btn-danger {
  background-color: var(--app-danger);
  border-color: #b91c1c;
}

/* ===========================
   FORMS
=========================== */
.form-control,
.form-select {
  background-color: #020617;
  border: 1px solid #374151;
  color: var(--app-text);
}

.form-control:focus,
.form-select:focus {
  background-color: #020617;
  border-color: var(--app-green-soft);
  box-shadow: 0 0 0 0.15rem rgba(34, 197, 94, 0.25);
  color: var(--app-text);
}

.form-control::placeholder {
  color: #6b7280;
}

/* Form text / muted help text */
.form-text {
  color: var(--app-text-muted);
}

/* ===========================
   TABLES – FULL DARK THEME
=========================== */
.table {
  color: var(--app-text);
  background-color: transparent;
  border-color: var(--app-border);
}

/* Header row */
.table thead {
  background-color: #020617;
}

.table thead th {
  background-color: #020617 !important; /* override Bootstrap white header */
  color: #e5e7eb;
  border-bottom-color: var(--app-border);
}

/* Cells */
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--app-border);
}

/* Striped rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #020617;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #030712;
}

/* Hover state */
.table-hover > tbody > tr:hover > * {
  background-color: #111827;
}

/* Table footer */
.table-secondary {
  background-color: #111827 !important;
  color: var(--app-text);
}

/* ===========================
   BADGES
=========================== */
.badge {
  border-radius: 999px;
}

/* Subtle success/green badges */
.bg-success-subtle {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: var(--app-green-soft) !important;
}

/* Subtle secondary */
.bg-secondary-subtle {
  background-color: rgba(148, 163, 184, 0.15) !important;
  color: #e5e7eb !important;
}

/* Subtle danger */
.bg-danger-subtle {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #fecaca !important;
}

/* ===========================
   MODALS
=========================== */
.modal-content {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.modal-header {
  border-bottom-color: var(--app-border);
}

.modal-footer {
  border-top-color: var(--app-border);
}

/* Backdrop a bit darker */
.modal-backdrop.show {
  opacity: 0.85;
}

/* ===========================
   ALERTS
=========================== */
.alert {
  border-radius: 0.75rem;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}

.alert-success {
  background-color: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.5);
  color: #bbf7d0;
}

.alert-warning {
  background-color: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.5);
  color: #facc15;
}

/* ===========================
   MISC
=========================== */
/* Make shadow-sm a bit more visible on dark */
.shadow-sm {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45) !important;
}

/* List-group on dark */
.list-group-item {
  background-color: #020617;
  border-color: #111827;
  color: var(--app-text);
}

/* Horizontal rule */
hr {
  border-color: var(--app-border);
}
/* Force all table text to be light on dark background */
.table,
.table th,
.table td {
  color: var(--app-text) !important;
}