/* ══════════════════════════════════════════════════════════
   ProjectVue — App styles  (style.css)
   DO NOT import landing.css here — it is for the marketing
   page only and is loaded only by layout-landing.pug
   ══════════════════════════════════════════════════════════ */

:root {
  --primary: #0d6efd;
  --success: #198754;
  --danger:  #dc3545;
  --warning: #ffc107;
  --info:    #0dcaf0;
}

/* ── Body ────────────────────────────────────────────────
   CRITICAL: must NOT hardcode a background color here.
   Bootstrap 5.3 dark mode works by swapping --bs-body-bg
   via [data-bs-theme="dark"]. Any hardcoded background-color
   on body will override it and break dark mode.
   The layout-dashboard.pug <style> block sets the dark
   overrides for --bs-body-bg directly on [data-bs-theme="dark"].
   ─────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  /* background intentionally NOT set here — let Bootstrap handle it */
}

/* ── Typography ──────────────────────────────────────── */
.navbar-brand { font-weight: 600; }
.form-label   { font-weight: 500; margin-bottom: .5rem; }
.btn          { font-weight: 500; }

/* ── Cards ────────────────────────────────────────────── */
.card {
  border: none;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  margin-bottom: 1.5rem;
}
.card-header {
  background-color: var(--bs-card-cap-bg, rgba(0,0,0,.03));
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
}

/* ── Tables ───────────────────────────────────────────── */
.table th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

/* ── Badges ───────────────────────────────────────────── */
.badge {
  font-weight: 500;
  padding: .35em .65em;
}

/* ── Avatar ───────────────────────────────────────────── */
.avatar {
  font-weight: 600;
  font-size: .875rem;
}

/* ── List groups ──────────────────────────────────────── */
.list-group-item          { border-left: none; border-right: none; }
.list-group-item:first-child { border-top: none; }

/* ── Dropdowns ────────────────────────────────────────── */
.dropdown-item i { width: 20px; text-align: center; }

/* ── Misc ─────────────────────────────────────────────── */
footer { margin-top: auto; }

.breadcrumb {
  background: none;
  padding: 0;
  margin-bottom: 1rem;
}

/* ── Alerts ───────────────────────────────────────────── */
.alert               { border: none; border-left: 4px solid; }
.alert-success       { border-left-color: var(--success); }
.alert-danger        { border-left-color: var(--danger); }
.alert-warning       { border-left-color: var(--warning); }
.alert-info          { border-left-color: var(--info); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .table-responsive      { font-size: .875rem; }
  .btn-group .btn        { padding: .25rem .5rem; }
}

/* ── Dark mode: Bootstrap dropdown menus ─────────────────
   Bootstrap 5.3 auto-handles most components via CSS vars.
   These extras ensure dropdowns, cards, and input groups
   look correct in the app shell.
   ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .card {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: #1c2128;
  --bs-dropdown-border-color: #30363d;
}
[data-bs-theme="dark"] .modal-content {
  background-color: #161b22;
  border-color: #30363d;
}
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
}