:root {
  --viso-green: #143d2b;
  --viso-green-deep: #0d291e;
  --viso-green-soft: #e8f0e9;
  --viso-gold: #c8a963;
  --viso-gold-light: #ebd7a6;
  --viso-cream: #f7f8f4;
  --viso-ink: #243a2e;
  --bs-primary: var(--viso-green);
  --bs-primary-rgb: 20, 61, 43;
  --bs-link-color: #205b40;
  --bs-link-hover-color: #143d2b;
}

html { font-size: 14px; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--viso-cream);
  color: var(--viso-ink);
  overflow-x: hidden;
}

.app-content { flex: 1; padding-bottom: 3rem; }
h1, h2, h3, h4, h5 { color: var(--viso-green); font-weight: 650; }
a { color: #205b40; }
a:hover { color: var(--viso-green-deep); }

.brand-navbar {
  background: var(--viso-green);
  border-bottom: 3px solid var(--viso-gold);
  box-shadow: 0 5px 20px rgba(13, 41, 30, .15);
}
.brand-lockup { display: inline-flex; align-items: center; gap: .65rem; margin-right: 2rem; }
.brand-lockup:hover { opacity: .95; }
.brand-mark {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1px solid rgba(200, 169, 99, .65); border-radius: 50%;
}
.brand-mark img { width: 1.7rem; height: 1.7rem; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name strong { color: #fff; font-size: 1.15rem; letter-spacing: .17em; }
.brand-name small { color: var(--viso-gold-light); font-size: .48rem; letter-spacing: .15em; margin-top: .25rem; }
.brand-navbar .navbar-nav { align-items: center; gap: .15rem; }
.brand-navbar .nav-link,
.brand-navbar .brand-menu-trigger {
  display: inline-block; border: 0; background: transparent; color: #f4f7f2;
  font: inherit; padding: .6rem .8rem; border-radius: .4rem; text-decoration: none;
}
.brand-navbar .nav-link:hover,
.brand-navbar .nav-link:focus,
.brand-navbar .brand-menu-trigger:hover,
.brand-navbar .brand-menu-trigger:focus {
  color: var(--viso-gold-light); background: rgba(255, 255, 255, .08);
}
.brand-navbar .dropdown-menu {
  border: 1px solid #d5e2d5; border-top: 3px solid var(--viso-gold);
  border-radius: .55rem; box-shadow: 0 12px 26px rgba(13, 41, 30, .16);
  padding: .4rem;
}
.brand-navbar .dropdown-item { color: var(--viso-green); border-radius: .3rem; padding: .55rem .8rem; }
.brand-navbar .dropdown-item:hover,
.brand-navbar .dropdown-item:focus { color: var(--viso-green-deep); background: var(--viso-green-soft); }
.brand-navbar .dropdown-item:active { background: var(--viso-green); color: #fff; }

.brand-footer {
  background: #eaf0e8; border-top: 2px solid var(--viso-gold);
  color: #52675a; padding: 1rem 0; font-size: .82rem;
}

.btn { border-radius: .5rem; font-weight: 600; }
.btn-primary {
  color: #fff; background-color: var(--viso-green); border-color: var(--viso-green);
}
.btn-primary:hover, .btn-primary:active {
  color: #fff; background-color: var(--viso-green-deep); border-color: var(--viso-green-deep);
}
.btn-outline-primary { color: var(--viso-green); border-color: var(--viso-green); }
.btn-outline-primary:hover, .btn-outline-primary:active {
  color: #fff; background-color: var(--viso-green); border-color: var(--viso-green);
}
.btn-link { color: var(--viso-green); }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #85a78f; box-shadow: 0 0 0 .2rem rgba(20, 61, 43, .18);
}
.form-control, .form-select { border-color: #cbd9cd; border-radius: .5rem; }
.form-check-input:checked { background-color: var(--viso-green); border-color: var(--viso-green); }
.form-label { color: #31513b; font-weight: 600; }
.card { border: 1px solid #dce7da; border-radius: .75rem; box-shadow: 0 4px 16px rgba(20, 61, 43, .04); }
.alert-info { color: #214b32; background: #e7f0e7; border-color: #cbdcc9; }

.kpi-card {
  --kpi-color: var(--viso-green);
  --kpi-tint: #e8f0e9;
  position: relative;
  display: flex; align-items: center; gap: .9rem; min-height: 98px;
  padding: 1rem 1.15rem; background: #fff;
  border: 1px solid #dce7da; border-left: 4px solid var(--kpi-color);
  border-radius: .75rem; box-shadow: 0 4px 14px rgba(20, 61, 43, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-help {
  position: absolute; top: .45rem; right: .5rem; z-index: 1;
  display: grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0;
  color: var(--kpi-color); background: #fff; border: 1px solid currentColor;
  border-radius: 50%; font-size: .78rem; font-weight: 750; line-height: 1;
  cursor: help;
}
.kpi-help:hover, .kpi-help:focus-visible { color: #fff; background: var(--kpi-color); outline: 2px solid var(--kpi-tint); }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(20, 61, 43, .1); }
.kpi-icon {
  display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px;
  color: var(--kpi-color); background: var(--kpi-tint); border-radius: 14px;
}
.kpi-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-copy { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.kpi-copy > span { color: #5e7064; font-size: .86rem; line-height: 1.25; }
.kpi-copy > strong { color: #183f2c; font-size: 1.08rem; line-height: 1.25; font-weight: 750; font-variant-numeric: tabular-nums; }
.kpi-sales { --kpi-color: #277448; --kpi-tint: #e7f2e9; }
.kpi-received { --kpi-color: #247b70; --kpi-tint: #e5f2ef; }
.kpi-purchases { --kpi-color: #9b721e; --kpi-tint: #f6f0df; }
.kpi-cogs { --kpi-color: #986044; --kpi-tint: #f5ece5; }
.kpi-gross { --kpi-color: #2c8052; --kpi-tint: #e6f2e9; }
.kpi-expenses { --kpi-color: #a64e4e; --kpi-tint: #f7eaea; }
.kpi-net { --kpi-color: #17643e; --kpi-tint: #e3f0e7; }
.kpi-roi { --kpi-color: #98742b; --kpi-tint: #f5f0df; }
.kpi-investment { --kpi-color: #a17b25; --kpi-tint: #f8f1dc; }
.kpi-capital { --kpi-color: #315f42; --kpi-tint: #e8f0e8; }
.kpi-receivable { --kpi-color: #39758c; --kpi-tint: #e7f1f4; }
.kpi-payable { --kpi-color: #aa6a36; --kpi-tint: #f6eee5; }

.table {
  background: #fff; border: 1px solid #e0e8df; border-radius: .65rem;
  overflow: hidden; vertical-align: middle;
}
.table thead th {
  background: #e7efe6; color: var(--viso-green); border-bottom: 2px solid var(--viso-gold);
  font-weight: 700; white-space: nowrap;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #f5f8f3; }
.table tbody tr:hover { --bs-table-bg-state: #edf4eb; }

.home-hero {
  position: relative; overflow: hidden; min-height: 345px; display: grid; place-items: center;
  background: radial-gradient(circle at 80% 15%, #255740 0%, transparent 38%),
              linear-gradient(130deg, var(--viso-green-deep), var(--viso-green));
  border: 1px solid var(--viso-gold); border-radius: 1rem;
  box-shadow: 0 14px 32px rgba(13, 41, 30, .16);
  text-align: center;
}
.home-hero::before, .home-hero::after {
  content: ""; position: absolute; border: 1px solid rgba(200, 169, 99, .24);
  border-radius: 50%; pointer-events: none;
}
.home-hero::before { width: 380px; height: 380px; top: -230px; left: -100px; }
.home-hero::after { width: 480px; height: 480px; bottom: -370px; right: -120px; }
.home-hero-content { position: relative; z-index: 1; padding: 3.2rem 1.5rem; }
.home-eyebrow {
  display: inline-block; color: var(--viso-gold-light); border: 1px solid rgba(200, 169, 99, .55);
  border-radius: 100px; padding: .25rem .85rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; margin-bottom: 1.1rem;
}
.home-leaf { display: block; width: 3.35rem; height: 3.35rem; margin: 0 auto .3rem; }
.home-hero h1 { display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.home-hero h1 span { color: var(--viso-gold); font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: .17em; font-weight: 600; }
.home-hero h1 small { color: #fff; font-size: clamp(1.15rem, 2.5vw, 1.8rem); letter-spacing: .08em; font-weight: 600; }
.home-hero p { color: #edf4ed; margin: .8rem 0 0; font-size: 1rem; }
.home-hero-rule { display: block; width: 4rem; height: 2px; background: var(--viso-gold); margin: 1.45rem auto 0; }

.home-access { margin-top: 2.5rem; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.home-section-heading h2 { margin: .15rem 0 0; font-size: 1.65rem; }
.home-section-heading p { color: #64776a; margin: 0; }
.section-kicker { color: #8a6b2e; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.module-card {
  position: relative; display: flex; flex-direction: column; min-height: 150px;
  padding: 1.3rem 1.45rem; background: #fff; border: 1px solid #dce7da;
  border-radius: .8rem; color: var(--viso-ink); text-decoration: none;
  box-shadow: 0 4px 14px rgba(20, 61, 43, .04);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.module-card:hover, .module-card:focus-visible {
  color: var(--viso-ink); transform: translateY(-3px); border-color: var(--viso-gold);
  box-shadow: 0 12px 24px rgba(20, 61, 43, .12);
}
.module-number { color: #9b7d3e; font-size: .72rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .55rem; }
.module-card strong { color: var(--viso-green); font-size: 1.22rem; }
.module-card > span:nth-last-child(2) { color: #65766a; font-size: .9rem; }
.module-arrow { position: absolute; right: 1.4rem; top: 1.2rem; color: #9b7d3e; font-size: 1.3rem; }
.login-card { border-top: 4px solid var(--viso-gold); }
.password-field { position: relative; }
.password-field input { padding-right: 2.75rem; }
.password-toggle { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); border: 0; background: transparent; color: var(--viso-green); cursor: pointer; padding: .25rem .5rem; }
.login-leaf { width: 2.7rem; height: 2.7rem; padding: .35rem; margin-bottom: .8rem; background: var(--viso-green); border-radius: 50%; }

@media (max-width: 767px) {
  .app-content { padding-left: .75rem; padding-right: .75rem; }
  .brand-lockup { margin-right: 0; }
  .brand-name small { font-size: .42rem; letter-spacing: .1em; }
  .home-hero-content { padding: 2.5rem 1rem; }
  .home-hero h1 span { letter-spacing: .1em; }
  .home-hero h1 small { letter-spacing: .04em; }
  .home-section-heading { display: block; }
  .home-section-heading p { margin-top: .5rem; }
  .home-hero { min-height: 305px; }
  .table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }
  .table-responsive { border-radius: .65rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .kpi-grid > .col-xl-3 { flex: 0 0 auto; width: 25%; }
}
@media (max-width: 575px) {
  .brand-navbar .navbar-nav { align-items: stretch; }
  .brand-navbar .nav-link, .brand-navbar .brand-menu-trigger { width: 100%; text-align: left; }
  .brand-navbar .dropdown-menu { box-shadow: none; }
}