/* Minimal custom styles for JobCollab */
body { padding-bottom: 40px; }
.job-card { transition: box-shadow .15s ease-in-out; }
.job-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.navbar-logo { height: 56px; width: auto; display: block; }
.navbar-logo-wrap {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: .35rem .75rem;
  border-radius: .5rem;
}
.themed-navbar { background-color: var(--bs-primary); transition: background-color .15s ease-in-out; }
.navbar-nav .nav-link { font-size: 1.15rem; }

/* ---- Color themes ----
   Each theme overrides Bootstrap's own primary/link CSS variables, so every
   built-in component that already reads them (buttons, badges, form focus
   rings, pagination, links) re-themes automatically. --brand-dark is our own
   addition, used for hover/active shades Bootstrap doesn't derive at runtime. */
:root,
:root[data-theme="ocean"] {
  --bs-primary: #1857c9;
  --bs-primary-rgb: 24, 87, 201;
  --bs-link-color: #1857c9;
  --bs-link-color-rgb: 24, 87, 201;
  --bs-link-hover-color: #123f96;
  --bs-link-hover-color-rgb: 18, 63, 150;
  --brand-dark: #123f96;
  --brand-light: #e8f0fd;
}
:root[data-theme="forest"] {
  --bs-primary: #12855f;
  --bs-primary-rgb: 18, 133, 95;
  --bs-link-color: #12855f;
  --bs-link-color-rgb: 18, 133, 95;
  --bs-link-hover-color: #0b5f43;
  --bs-link-hover-color-rgb: 11, 95, 67;
  --brand-dark: #0b5f43;
  --brand-light: #e3f5ee;
}
:root[data-theme="grape"] {
  --bs-primary: #7d3cc9;
  --bs-primary-rgb: 125, 60, 201;
  --bs-link-color: #7d3cc9;
  --bs-link-color-rgb: 125, 60, 201;
  --bs-link-hover-color: #5c2b96;
  --bs-link-hover-color-rgb: 92, 43, 150;
  --brand-dark: #5c2b96;
  --brand-light: #f1e8fb;
}
:root[data-theme="rose"] {
  --bs-primary: #c92868;
  --bs-primary-rgb: 201, 40, 104;
  --bs-link-color: #c92868;
  --bs-link-color-rgb: 201, 40, 104;
  --bs-link-hover-color: #9c1e50;
  --bs-link-hover-color-rgb: 156, 30, 80;
  --brand-dark: #9c1e50;
  --brand-light: #fbe7ef;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
/* Theme picker dropdown */
.theme-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  flex: 0 0 auto;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
}
.theme-option.active {
  background-color: var(--brand-light);
  font-weight: 600;
}

/* ---- Jobs list/tile view toggle ---- */
.jobs-list .job-col { flex: 0 0 100%; max-width: 100%; }
.jobs-list .job-card .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.5rem;
  padding: .75rem 1rem;
}
.jobs-list .job-card .job-title { margin-bottom: 0; font-size: 1rem; flex: 1 1 240px; }
.jobs-list .job-card p { margin-bottom: 0; }
.jobs-list .job-card .job-list-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }