:root {
  --ihms-main: #796bcb;
  --ihms-secondary: #F5F4FB;
  --ihms-accent: #BD73CE;
}

html, body {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background-color: var(--ihms-secondary);
}

/* Navbar */
.navbar {
  background-color: var(--ihms-main) !important;
  box-shadow: 0 2px 8px rgba(89, 49, 150, 0.25);
}

.navbar .navbar-brand {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1.2rem;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  transition: color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff !important;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25);
}

/* Bootstrap overrides */
.btn-primary {
  --bs-btn-bg: var(--ihms-main);
  --bs-btn-border-color: var(--ihms-main);
  --bs-btn-hover-bg: #5f53a1;
  --bs-btn-hover-border-color: #5f53a1;
  --bs-btn-active-bg: #5f53a1;
  --bs-btn-active-border-color: #5f53a1;
}

.btn-outline-primary {
  --bs-btn-color: var(--ihms-main);
  --bs-btn-border-color: var(--ihms-main);
  --bs-btn-hover-bg: var(--ihms-main);
  --bs-btn-hover-border-color: var(--ihms-main);
}

.text-primary {
  color: var(--ihms-main) !important;
}

.bg-primary {
  background-color: var(--ihms-main) !important;
}

.link-primary {
  color: var(--ihms-accent) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: var(--ihms-main) !important;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  color: #2d2d2d;
}

.page-title {
  color: var(--ihms-main);
  font-weight: 700;
  border-bottom: 2px solid var(--ihms-accent);
  padding-bottom: 0.4rem;
  margin-bottom: 1.25rem;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  border-radius: 0.75rem;
  border: 1px solid #e2dff5;
  box-shadow: 0 2px 8px rgba(121, 107, 203, 0.08);
}

.card-header {
  background-color: var(--ihms-secondary);
  border-bottom: 1px solid #e2dff5;
  font-weight: 600;
  color: var(--ihms-main);
  border-radius: 0.75rem 0.75rem 0 0 !important;
}

.card-footer {
  background-color: var(--ihms-secondary);
  border-top: 1px solid #e2dff5;
  border-radius: 0 0 0.75rem 0.75rem !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  border-radius: 0.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Navbar compaction ───────────────────────────────────── */
/* Applies to _Layout, _AdminLayout and _FarmersLayout simultaneously */
.navbar {
  --bs-navbar-padding-y: 0.28rem;
}

.navbar-brand {
  font-size: 0.95rem !important;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* Override the inline height:32px set on every layout logo */
.navbar-brand img {
  height: 24px !important;
  width: auto !important;
  margin-right: 6px !important;
}

.navbar .nav-link {
  padding-top:    0.28rem;
  padding-bottom: 0.28rem;
  font-size: 0.84rem;
}

.navbar-toggler {
  padding: 0.15rem 0.38rem;
  font-size: 0.82rem;
}

/* ── Global typography scale-down ────────────────────────── */
/* Bootswatch Pulse ships larger-than-default heading weights;
   these bring them back to a compact, professional size. */
h1 { font-size: 1.7rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
h5 { font-size: 0.92rem; }
h6 { font-size: 0.82rem; }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ihms-main);
  --bs-btn-border-color: var(--ihms-main);
  --bs-btn-hover-bg: #6558b1;
  --bs-btn-hover-border-color: #6558b1;
  --bs-btn-active-bg: #5a4da0;
  --bs-btn-active-border-color: #5a4da0;
  --bs-btn-focus-shadow-rgb: 121, 107, 203;
}

.btn-outline-primary {
  --bs-btn-color: var(--ihms-main);
  --bs-btn-border-color: var(--ihms-main);
  --bs-btn-hover-bg: var(--ihms-main);
  --bs-btn-hover-border-color: var(--ihms-main);
  --bs-btn-hover-color: #fff;
}

/* ── Tables ──────────────────────────────────────────────── */
.table thead th {
  background-color: var(--ihms-secondary);
  color: var(--ihms-main);
  font-weight: 600;
  border-bottom: 2px solid #c8c2e8;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table-hover > tbody > tr:hover > * {
  background-color: #f0eef9;
}

/* ── Form Controls ───────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--ihms-main);
  box-shadow: 0 0 0 0.2rem rgba(121, 107, 203, 0.2);
}

.form-label {
  font-weight: 500;
  color: #444;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge.bg-primary {
  background-color: var(--ihms-main) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
  background-color: var(--ihms-secondary);
  border-top: 1px solid #d8d3ef !important;
  color: var(--ihms-main);
  font-size: 0.85rem;
}

.footer a {
  color: var(--ihms-accent);
  text-decoration: none;
}

.footer a:hover {
  color: var(--ihms-main);
  text-decoration: underline;
}

/* ── List Groups ─────────────────────────────────────────── */
.list-group-item {
  background-color: #fff !important;
  color: #2d2d2d !important;
  border-color: #e2dff5;
}

.list-group-item:hover {
  background-color: var(--ihms-secondary) !important;
}

/* ── Dashboard Section Title ─────────────────────────────── */
.dash-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ihms-main);
  border-left: 3px solid var(--ihms-main);
  padding-left: 0.65rem;
  margin-bottom: 1rem;
}

/* ── Stat Cards ──────────────────────────────────────────── */
.stat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(121, 107, 203, 0.18) !important;
}

.stat-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.5rem;
}

.stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  margin-bottom: 1px;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: #2d2d2d;
}

.stat-unit {
  font-size: 0.72rem;
  color: #bbb;
  font-weight: 500;
  margin-top: 1px;
}

/* Icon colour helpers */
.icon-purple { background-color: #ede9fa; color: #796bcb; }
.icon-green  { background-color: #e6f7ee; color: #28a745; }
.icon-blue   { background-color: #e3f0ff; color: #0d6efd; }
.icon-orange { background-color: #fff3e0; color: #fd7e14; }
.icon-teal   { background-color: #e0f5f5; color: #20c997; }
.icon-yellow { background-color: #fffbe6; color: #d39e00; }
.icon-pink   { background-color: #fce4ec; color: #e91e63; }
.icon-cyan   { background-color: #e0f7fa; color: #00acc1; }
.icon-indigo { background-color: #e8eaf6; color: #3949ab; }
.icon-coral  { background-color: #fbe9e7; color: #e64a19; }
.icon-lime   { background-color: #f1f8e9; color: #558b2f; }
.icon-violet { background-color: #f3e5f5; color: #7b1fa2; }


/* ── Logo dissolve animation for home page */
.logo-dissolve {
  width: auto;
  height: 120px;
  opacity: 0;
  transform: scale(0.96);
  animation: logoDissolve 900ms ease-in-out 1 forwards;
}

@keyframes logoDissolve {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
    filter: blur(6px);
  }
  60% {
    opacity: 0.9;
    transform: scale(1.02) translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
  }
}