/* ---- Inter font (vendored, offline) ---- */
@font-face {
  font-family: "Inter";
  src: url("../vendor/inter/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Cerulean theme ---- */
:root {
  --bs-primary: #0284c7;
  --bs-primary-rgb: 2, 132, 199;
  --bs-link-color: #0284c7;
  --bs-link-color-rgb: 2, 132, 199;
  --bs-link-hover-color: #075985;
  --bs-body-bg: #f1f5f9;
  --bs-body-color: #0f172a;
  --bs-border-color: #e2e8f0;
  --brand: #0284c7;
  --brand-dark: #075985;
  --accent: #f97362;
  --accent-dark: #dc4b3a;
  --sidebar-bg: #152430;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }

/* ---- Buttons ---- */
.btn {
  border-radius: .5rem;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --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-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
}

/* ---- Inputs ---- */
.form-control, .form-select { border-radius: .5rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(2, 132, 199, .16);
}

/* ---- Top navbar (light) ---- */
.app-navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--bs-border-color);
  min-height: 56px;
}
.app-navbar .navbar-toggler { border-color: rgba(15, 23, 42, .15); }
.app-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.brand-block {
  background: var(--brand);
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 1.1rem;
  margin: 0;
}
/* Match the sidebar column width (col-md-3 / col-lg-2) so the brand block's
   right edge lines up exactly with the sidebar's edge below it. The width
   sits on .brand-col — a direct navbar child, so % resolves against the
   same full-page width as the sidebar's container (vw would be off by the
   scrollbar); the brand then fills the wrapper. */
@media (min-width: 768px) {
  .brand-col { width: 25%; }
  .brand-col .brand-block { flex: 1; }
}
@media (min-width: 992px) {
  .brand-col { width: 16.6666667%; }
}
.nav-avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.nav-user-name { color: #0f172a; font-weight: 600; font-size: .85rem; line-height: 1.15; }
.nav-user-sub { color: #64748b; font-size: .72rem; line-height: 1.15; }

/* ---- Sidebar ---- */
.sidebar {
  /* !important overrides Bootstrap's `.offcanvas-md { background: transparent !important }`
     at desktop width, which otherwise lets the page show through the menu. */
  background: var(--sidebar-bg) !important;
  min-height: calc(100vh - 56px);
  /* The row's columns stretch to the tallest one; fill the column so the
     dark panel reaches the bottom of long pages instead of stopping short. */
  height: 100%;
}
.sidebar .nav-label {
  color: #64748b;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .9rem 1.1rem .25rem;
}
.sidebar .nav-link {
  color: #c3cdd3;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border-radius: .5rem;
  margin: .1rem .5rem;
  padding: .55rem .85rem;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar .nav-link i { font-size: 1.05rem; opacity: .9; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sidebar .nav-link.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(249, 115, 98, .35);
}
.sidebar .nav-link.active i { opacity: 1; }

/* ---- Breadcrumbs ---- */
.app-breadcrumb {
  color: #64748b;
  font-size: .8rem;
  margin-bottom: .75rem;
}
.app-breadcrumb a { color: #64748b; text-decoration: none; }
.app-breadcrumb a:hover { color: var(--brand); }
.app-breadcrumb b { color: #334155; font-weight: 600; }

/* ---- Cards ---- */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card .card-body { padding: 1.1rem 1.25rem; }
.metric-card { transition: transform .15s ease, box-shadow .15s ease; }
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}
.metric-card .metric-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;   /* long 'UGX 9,000,000.00' wraps instead of overflowing */
}
.metric-card .metric-label {
  color: #64748b;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

/* ---- Gradient stat tiles (dashboard) ---- */
.tile {
  border: 0;
  border-radius: .75rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .18); }
.tile .card-body { padding: 1rem 1.15rem; }
.tile .tile-value {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tile .tile-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  opacity: .92;
}
.tile .tile-icon {
  position: absolute;
  right: .85rem; top: .7rem;
  font-size: 1.6rem;
  opacity: .35;
}
.tile-cerulean { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.tile-coral    { background: linear-gradient(135deg, #f97362, #dc4b3a); }
.tile-green    { background: linear-gradient(135deg, #10b981, #047857); }
.tile-slate    { background: linear-gradient(135deg, #64748b, #475569); }

/* Stat card: colored icon chip + value (still used on non-dashboard pages) */
.stat-card { display: flex; align-items: center; gap: .85rem; }
.stat-card > div { min-width: 0; }   /* let the text column shrink/wrap, no overlap */
.stat-icon {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: .85rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
}
.stat-icon.cerulean { background: rgba(2, 132, 199, .12); color: #0284c7; }
.stat-icon.indigo { background: rgba(2, 132, 199, .12); color: #0284c7; } /* legacy alias */
.stat-icon.teal   { background: rgba(13, 148, 136, .12); color: #0d9488; }
.stat-icon.green  { background: rgba(5, 150, 105, .12); color: #059669; }
.stat-icon.amber  { background: rgba(217, 119, 6, .12); color: #d97706; }
.stat-icon.red    { background: rgba(225, 29, 72, .12); color: #e11d48; }
.stat-icon.slate  { background: rgba(100, 116, 139, .14); color: #475569; }

/* ---- Dashboard greeting ---- */
.greet-title { font-size: 1.35rem; font-weight: 700; }
.greet-sub { color: #64748b; font-size: .88rem; }

/* ---- Tables ---- */
.table > thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .03em;
}
.table-hover > tbody > tr:hover > * { background-color: #f8fafc; }

/* ---- Badges ---- */
.badge { font-weight: 600; letter-spacing: .01em; }

main.content { padding: 1.5rem; }

/* Fixed-height chart container stops Chart.js (maintainAspectRatio:false) from
   re-growing the canvas on every render, which made the page scroll endlessly. */
.chart-box { position: relative; height: 260px; }