/* Custom theme layered on top of the vendored bootstrap.min.css. Kept as a separate
   file (not edits to bootstrap.min.css itself) so a future Bootstrap upgrade can just
   replace that file without losing this. Bootstrap 5.3 utilities like .bg-primary /
   .text-primary / .border-primary read --bs-primary-rgb at paint time, so overriding
   the root variables below re-colors those; component classes (.btn-primary, form
   checks, pagination) bake their own hex into local custom properties at build time,
   so those need explicit overrides too. */

:root {
  --brand-primary: #6c5dd3;
  --brand-primary-dark: #5a4bc4;
  --brand-primary-rgb: 108, 93, 211;

  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-primary-text-emphasis: #3d3299;
  --bs-primary-bg-subtle: #ece9fb;
  --bs-primary-border-subtle: #c7bff2;
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: var(--brand-primary-dark);
  --bs-link-hover-color-rgb: 90, 75, 196;

  --surface-bg: #f5f6fc;
}

body {
  background-color: var(--surface-bg);
  font-family: "Segoe UI", "Tahoma", sans-serif;
}

/* ---- Buttons: bake the new primary into the utility classes that hardcode it ---- */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-disabled-color: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-gradient: none;
}
.btn { border-radius: 10px; }
.btn-sm { border-radius: 8px; }
.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-check-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .2); }
.form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .15); }

/* ---- Cards: soft shadow instead of hard borders, used on every page ---- */
.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(31, 41, 55, .06);
}

/* ---- Tables: quieter header, no harsh grid lines ---- */
.table { --bs-table-border-color: #eef0f7; }
.table thead th {
  background-color: #f8f8fc;
  color: #6b7280;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid #eef0f7;
}

.badge { border-radius: 999px; font-weight: 600; }

/* ---- Stat cards (dashboard summary tiles) ---- */
.stat-card { padding: 1.1rem 1.25rem; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .65rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: #6b7280; font-size: .8rem; }

.stat-soft-primary .stat-icon { background: #ece9fb; color: var(--brand-primary); }
.stat-soft-success .stat-icon { background: #e4f8ec; color: #1eab5a; }
.stat-soft-warning .stat-icon { background: #fff3e0; color: #d18a1c; }
.stat-soft-danger  .stat-icon { background: #fdeaec; color: #d64550; }
.stat-soft-info    .stat-icon { background: #e6f4fd; color: #2892d7; }
.stat-soft-slate   .stat-icon { background: #eef0f4; color: #64748b; }

/* ============================= Top navbar ============================= */
.app-navbar {
  background: #ffffff;
  border-bottom: 1px solid #eef0f7;
  box-shadow: 0 1px 3px rgba(31, 41, 55, .03);
}
.app-navbar .brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-primary), #8a7cf0);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem;
}
.app-navbar .navbar-brand { color: #1f2430; font-weight: 700; }
.app-navbar .user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bs-primary-bg-subtle); color: var(--brand-primary-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}

/* ============================== Sidebar ================================ */
.sidebar {
  background: #ffffff;
  border-right: 1px solid #eef0f7;
}
.sidebar .nav-link {
  display: flex; align-items: center; gap: .6rem;
  color: #4b5265; font-size: .89rem; font-weight: 500;
  padding: .55rem .8rem; border-radius: 10px; margin-bottom: .15rem;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar .nav-link .icon { flex: none; opacity: .8; }
.sidebar .nav-link:hover { background: #f5f4fe; color: var(--brand-primary-dark); }
.sidebar .nav-link.active {
  background: var(--brand-primary);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(var(--brand-primary-rgb), .28);
}
.sidebar .nav-link.active .icon { opacity: 1; }