/* Shared ESMS visual refresh. Loaded after the existing component styles. */
:root {
  --esms-ink: #173e38; --esms-green: #087f68; --esms-dark: #075b4c;
  --esms-line: #dce9e4; --esms-muted: #58706a;
  --bs-primary: #087f68; --bs-primary-rgb: 8,127,104;
  --bs-link-color: #08715f; --bs-link-hover-color: #075b4c;
}
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--esms-ink); background: #f3f8f5; }
a { color: #08715f; } a:hover { color: #075b4c; }
.header { background: #fff; border-bottom: 1px solid var(--esms-line); box-shadow: 0 3px 20px #173e3808; }
.header .logo { color: var(--esms-dark); gap: 10px; }
.brand-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #087f68, #16a789); color: #fff; font-size: 17px; }
.header .toggle-sidebar-btn { color: var(--esms-dark); background: #edf6f1; border: 0; border-radius: 9px; padding: 9px 11px; line-height: 1; font-size: 20px; }
.header .nav-profile { color: var(--esms-ink); gap: 9px; }
.sidebar { background: linear-gradient(165deg, #075b4c, #093e38); border-right: 0; box-shadow: 5px 0 24px #173e380a; padding: 22px 15px; }
.sidebar-label { color: #b5dfd2; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0 12px 18px; }
.sidebar-nav .nav-link, .sidebar-nav .nav-link.collapsed { color: #e0f2eb; background: transparent; border-radius: 10px; padding: 12px; margin-bottom: 5px; font-weight: 600; }
.sidebar-nav .nav-link i, .sidebar-nav .nav-link.collapsed i { color: #a7dccc; }
.sidebar-nav .nav-link:hover { background: #ffffff16; color: #fff; }
.sidebar-nav .nav-link.active, .sidebar-nav .nav-link[aria-expanded="true"] { background: #e2f7ec; color: #075b4c; box-shadow: inset 3px 0 #e4b34b; }
.sidebar-nav .nav-link.active i, .sidebar-nav .nav-link[aria-expanded="true"] i { color: #087f68; }
.sidebar-nav .nav-content a { color: #d5ede3; background: transparent; font-size: 13px; padding: 9px 12px; }
.sidebar-nav .nav-content a:hover, .sidebar-nav .nav-content a.active { background: #ffffff16; color: #fff; }
#main { padding-top: 28px; }
.pagetitle { margin-bottom: 24px; padding: 4px 0 4px 16px; border-left: 4px solid #e4b34b; }
.pagetitle h1 { color: var(--esms-ink); font-weight: 750; font-size: clamp(23px, 3vw, 30px); letter-spacing: -.035em; }
.breadcrumb { margin: 8px 0 0; font-size: 13px; }
.breadcrumb a { color: var(--esms-green); } .breadcrumb-item.active { color: var(--esms-muted); }
.card, .modal-content { border: 1px solid var(--esms-line); border-radius: 16px; background: #fff; box-shadow: 0 5px 22px #173e3807; }
.card-header { background: #f6faf7; border-bottom: 1px solid var(--esms-line); padding: 16px 20px; border-radius: 15px 15px 0 0 !important; }
.card-title { color: var(--esms-ink); font-weight: 700; }
.card-footer { background: #f6faf7; border-top-color: var(--esms-line); }
.dashboard .info-card { border-top: 3px solid #16a789; }
.dashboard .info-card h6 { color: var(--esms-ink); }
.dashboard .sales-card .card-icon { background: #dff5eb; color: #08715f; }
.dashboard .revenue-card { border-top-color: #2581c4; }
.dashboard .revenue-card .card-icon { background: #e5f1fc; color: #216aab; }
.dashboard .customers-card { border-top-color: #e4b34b; }
.dashboard .customers-card .card-icon { background: #fff2d6; color: #94620a; }
.btn { border-radius: 9px; font-weight: 600; transition: background-color .15s, box-shadow .15s; }
.btn-primary { --bs-btn-bg: #087f68; --bs-btn-border-color: #087f68; --bs-btn-hover-bg: #075b4c; --bs-btn-hover-border-color: #075b4c; --bs-btn-active-bg: #064b40; --bs-btn-active-border-color: #064b40; --bs-btn-disabled-bg: #087f68; --bs-btn-disabled-border-color: #087f68; background-color: #087f68; border-color: #087f68; color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: #075b4c; border-color: #075b4c; }
.btn-outline-primary { --bs-btn-color: #08715f; --bs-btn-border-color: #08715f; --bs-btn-hover-bg: #08715f; --bs-btn-hover-border-color: #08715f; --bs-btn-active-bg: #075b4c; --bs-btn-active-border-color: #075b4c; color: #08715f; border-color: #08715f; }
.btn-outline-primary:hover { color: #fff; background: #08715f; }
.text-primary { color: #08715f !important; } .bg-primary { background-color: #087f68 !important; }
.form-control, .form-select, .select2-container--default .select2-selection--single, .choices__inner { border-color: #cbded5; border-radius: 9px; background-color: #fff; color: var(--esms-ink); }
.form-control:focus, .form-select:focus { border-color: #087f68; box-shadow: 0 0 0 .2rem #087f6820; }
.form-label, .col-form-label { font-weight: 600; }
.table { --bs-table-hover-bg: #eef8f2; --bs-table-striped-bg: #f7faf8; color: var(--esms-ink); border-color: var(--esms-line); }
.table thead th { background: #edf6f1; color: #31584d; font-size: 12px; font-weight: 700; padding-top: 14px; padding-bottom: 14px; }
.table td { vertical-align: middle; }
.page-link { color: #08715f; } .page-item.active .page-link { background: #087f68; border-color: #087f68; color: #fff; }
.nav-tabs .nav-link { color: var(--esms-muted); } .nav-tabs .nav-link.active { color: #08715f; border-bottom: 3px solid #087f68; }
.dropdown-menu { border: 1px solid var(--esms-line); border-radius: 12px; }
.dropdown-menu .dropdown-item:hover { background: #edf6f1; }
.footer { border-top: 1px solid var(--esms-line); color: var(--esms-muted); background: transparent; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #2484ba; outline-offset: 3px; }
body.login { min-height: 100vh; background: radial-gradient(ellipse at 85% 18%, #60d8ad55, transparent 48%), radial-gradient(ellipse at 75% 90%, #e4b34b40, transparent 44%), linear-gradient(135deg, #ecf8f1, #dceee5); }
.login .form-signin { width: min(560px, calc(100% - 32px)); margin: 6vh auto !important; padding: clamp(24px, 4vw, 48px); border: 1px solid #ffffff; border-top: 5px solid #087f68; border-radius: 22px; background: #ffffff; box-shadow: 0 24px 70px #075b4c18; }
.login .logo h1 { color: #075b4c; font-weight: 750; letter-spacing: -.04em; font-size: clamp(25px, 3vw, 36px); }
.login .btn-primary { padding: 11px 24px; }
.login .funders { line-height: 1.6; }
.login .form-signin .small { color: var(--esms-muted); }
@media (max-width: 767px) { #main { padding: 20px 14px; } .pagetitle { margin-bottom: 20px; } .header .logo { font-size: 17px; } .header .toggle-sidebar-btn { margin-left: 12px; } .login .form-signin { margin: 24px auto !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { body { background: #fff; } .sidebar, .header { display: none; } #main { margin: 0; padding: 0; } .card { box-shadow: none; } }

.dashboard-welcome { padding: 22px 24px; border-radius: 16px; color: #fff; background: linear-gradient(115deg, #075b4c, #087f68); line-height: 1.7; margin-bottom: 24px; box-shadow: 0 8px 24px #075b4c14; }
.dashboard .info-card .card-body { padding: 22px; gap: 2px; }
.dashboard .info-card h5 { font-size: 30px; font-weight: 750; letter-spacing: -.04em; color: #173e38; }
.metric-icon { width: 56px; height: 56px; flex-shrink: 0; font-size: 22px; background: #dff5eb; color: #08715f; }
.dashboard .metric-warning { border-top-color: #d99c27; } .metric-warning .metric-icon { background: #fff2d6; color: #94620a; }
.dashboard .metric-info { border-top-color: #2581c4; } .metric-info .metric-icon { background: #e5f1fc; color: #216aab; }
.dashboard .metric-danger { border-top-color: #c64a45; } .metric-danger .metric-icon { background: #fdebea; color: #b13c37; }

/* Original wildlife background, with a readable sign-in card on the left. */
body.login {
  background: #dceee5 url('../img/login.png') no-repeat right center fixed;
  background-size: cover;
}
.login-shell {
  min-height: 100vh;
  margin: 0;
  padding: clamp(24px, 5vw, 72px);
  align-items: center;
  justify-content: flex-start;
}
.login .login-shell .form-signin {
  flex: 0 1 520px;
  width: min(520px, 100%);
  margin: 0 !important;
  background: rgba(255, 255, 255, .97);
}
@media (max-width: 767px) {
  body.login { background-attachment: scroll; background-position: 65% center; }
  .login-shell { padding: 24px 4px; }
  .login .login-shell .form-signin { flex: none; width: min(520px, 100%); }
}