/* ---------------------------------------------------------------------------
   eMapper portal — clean, light, elegant. Teal primary + slate neutrals,
   sticky top navbar (no sidebar), airy hero, fully responsive.
   --------------------------------------------------------------------------- */
:root {
  --tblr-primary: #0d8f83;
  --tblr-primary-rgb: 13, 143, 131;
  --p: #0d8f83;                 /* teal */
  --p-d: #0b7a70;
  --p-lt: #e6f4f2;
  --ink: #1b2733;
  --muted: #6a7480;
  --bg: #f7f8fa;
  --border: #e7eaee;
  --tblr-border-radius: 7px;
  --tblr-border-radius-sm: 6px;
  --tblr-border-radius-lg: 8px;
  --tblr-body-color: #313a45;
  --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { background: var(--bg); color: #313a45; font-family: var(--tblr-font-sans-serif); }

/* moderate, consistent corners */
.card, .btn, .form-control, .form-select, .badge, .alert, .dropdown-menu,
.input-group > *, .progress, .modal-content, .list-group, .card-lg, .empty, .nav-link {
  border-radius: 7px;
}
.card { border-color: var(--border); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--border); min-height: 3.25rem; }
.card-title { color: var(--ink); font-weight: 600; }

/* primary = teal */
.btn-primary { --tblr-btn-bg: var(--p); --tblr-btn-border-color: var(--p);
  --tblr-btn-hover-bg: var(--p-d); --tblr-btn-hover-border-color: var(--p-d);
  background-color: var(--p); border-color: var(--p); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--p-d);
  border-color: var(--p-d); color: #fff; }
.btn-outline-primary { color: var(--p); border-color: var(--p); --tblr-btn-hover-bg: var(--p); }
a { color: var(--p); text-decoration: none; }
a:hover { color: var(--p-d); }
.text-primary { color: var(--p) !important; }
.bg-primary, .badge.bg-primary { background-color: var(--p) !important; }
.bg-primary-lt { background: var(--p-lt) !important; color: var(--p-d) !important; }
.progress-bar { background-color: var(--p); }

/* eggNOG functional-category tag colours (kept subtle) */
.bg-go-lt   { background: #fdeaea !important; color: #b23b3b !important; }
.bg-kegg-lt { background: #e6eefb !important; color: #2d5aa8 !important; }
.bg-og-lt   { background: #eef0f7 !important; color: #565f86 !important; }

/* ===== sticky top navbar ===== */
.app-header { background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05); min-height: 3.75rem; }
.app-header .navbar-brand { font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: -.2px; }
/* brand mark: red node-graph (official eggNOG-mapper logo motif) */
.brand-badge { display: inline-flex; width: 30px; height: 30px; align-items: center;
  justify-content: center; margin-right: .5rem; color: #a01f28; }
.brand-badge svg { width: 100%; height: 100%; }
.app-header .nav-link { color: #4a5563; font-weight: 500; padding: .45rem .7rem; }
.app-header .nav-link:hover { color: var(--ink); background: #f1f4f4; }
.app-header .nav-item.active > .nav-link { color: var(--p-d); background: var(--p-lt); }
/* vertical divider between site pages and external/admin links */
.app-header .nav-sep { width: 1px; height: 1.2rem; background: var(--border); margin: 0 .35rem; }
/* admin-only direct links (IT / Stats) — distinct amber to stand apart from teal */
.app-header .nav-admin .nav-link { color: #c15515; font-weight: 600; }
.app-header .nav-admin .nav-link:hover { color: #96400f; background: #fbeee2; }
/* dependency-free bar charts (analytics) */
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-top: 4px; }
.chart-bars .cb { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; gap: 1px; height: 100%; }
.chart-bars .cb .b { width: 46%; min-height: 2px; border-radius: 2px 2px 0 0; }
.chart-bars .cb .b.jobs { background: var(--p); }
.chart-bars .cb .b.users { background: #94a3b8; }
.chart-bars .cb:hover .b.jobs { background: var(--p-d); }
.legend-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: middle; }
.app-header .external a:not(.btn) { color: #97a0ac; display: inline-flex; padding: .3rem .4rem; border-radius: 7px; }
.app-header .external a:not(.btn):hover { color: var(--p); background: #f1f4f4; }
.navbar-toggler { border-color: var(--border); }

/* ===== hero — light, airy, shows the pipeline ===== */
.hero { background: linear-gradient(180deg, #eef8f6 0%, #ffffff 78%);
  border: 1px solid var(--border); }
.hero .card-body { padding: 2.25rem; }
.hero h1 { color: var(--ink); font-weight: 750; letter-spacing: -.7px; font-size: 2.15rem; line-height: 1.12; }
.hero .lead { color: var(--muted); font-size: 1.02rem; }
.pipeline { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.pipeline .pstep { flex: 1 1 0; min-width: 120px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: .8rem .65rem; text-align: center; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.pipeline .pstep .ti { font-size: 1.55rem; display: block; color: var(--p); margin-bottom: .15rem; }
.pipeline .pstep div { font-weight: 600; color: var(--ink); font-size: .9rem; }
.pipeline .pstep small { display: block; color: #8a929e; font-size: .74rem; margin-top: .1rem; }
.pipeline .pstep.accent .ti { color: #0891b2; }
.pipeline .parrow { display: flex; align-items: center; color: #c7ccd3; font-size: 1.1rem; }
/* compact reference stats folded into pipeline steps */
.pipeline .pstep .pfacts { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.pipeline .pstep .pfacts .pf { font-weight: 500; color: var(--muted); font-size: .72rem;
  line-height: 1.3; margin-top: .18rem; }
.pipeline .pstep .pfacts .pf:first-child { margin-top: 0; }
.pipeline .pstep .pfacts .pf b { color: var(--p); font-weight: 700; font-size: .82rem; }
.pipeline .pstep .pfacts .pf-split { font-size: .66rem; color: #98a0ab; }

/* ===== misc ===== */
.feature-ico { width: 42px; height: 42px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; background: var(--p-lt); color: var(--p); flex: none; }
.form-help { cursor: help; transition: background-color .15s, color .15s; }
.form-help:hover, .form-help:focus { background: var(--p); color: #fff; }
.steps .step-item::before { background: var(--p); }
.page-header .page-title { color: var(--ink); font-weight: 700; }

/* ===== responsive ===== */
@media (max-width: 767.98px) {
  .app-header .navbar-nav { padding-top: .5rem; }
  .app-header .external { justify-content: flex-start; }
  .hero .card-body { padding: 1.4rem; }
  .hero h1 { font-size: 1.65rem; }
  .pipeline .parrow { display: none; }
  .pipeline .pstep { min-width: 46%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero h1 { font-size: 1.9rem; }
}

/* eggNOGdb nav link — slightly different (brand teal) from the slate menu items */
.app-header .nav-link.nav-egg { color: var(--p); font-weight: 600; }
.app-header .nav-link.nav-egg:hover { color: var(--p); background: var(--p-lt); }

/* GitHub stars badge in the navbar */
.app-header .nav-link.nav-gh:hover { background: transparent; }
.gh-stars { display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; font-size: .76rem; font-weight: 600; line-height: 1;
  box-shadow: 0 1px 1px rgba(16,24,40,.04); }
.gh-stars__l { display: inline-flex; align-items: center; gap: .3rem; padding: .34rem .45rem;
  background: #24292f; color: #fff; }
.gh-stars__r { display: inline-flex; align-items: center; gap: .28rem; padding: .34rem .5rem;
  background: #fff; color: var(--ink); }
.gh-stars__r .ti { color: #e3b341; }        /* gold star */
.nav-gh:hover .gh-stars { border-color: #24292f; }
.nav-gh:hover .gh-stars__r { background: #fffdf5; }

/* v3 spotlight (home) + eggNOG 7 coverage stats */
.v3-spotlight { background: linear-gradient(180deg, #eef8f6 0%, #ffffff 82%);
  border: 1px solid var(--border); }
.v3-highlights li { display: flex; gap: .55rem; align-items: flex-start; padding: .28rem 0;
  font-size: .9rem; color: var(--ink); }
.v3-highlights li .ti { font-size: 1.1rem; margin-top: .05rem; flex: none; }

/* eggNOG 7 coverage — divided stat line (how-it-works), no nested cards */
.statline { display: flex; flex-wrap: wrap; }
.statline__item { flex: 1 1 0; min-width: 130px; padding: .1rem 1.4rem; border-left: 1px solid var(--border); }
.statline__item:first-child { padding-left: 0; border-left: 0; }
.statline__num { display: block; font-weight: 750; font-size: 1.7rem; color: var(--p);
  letter-spacing: -.5px; line-height: 1.05; }
.statline__lbl { display: block; font-size: .74rem; color: #8a929e; text-transform: uppercase;
  letter-spacing: .03em; margin-top: .12rem; }

/* v3 reliability — editorial feature list (how-it-works), not a card grid */
.feature-h { font-weight: 650; color: var(--ink); margin-bottom: .15rem; }

@media (max-width: 767.98px) {
  .statline__item { min-width: 45%; border-left: 0; padding: .3rem .4rem; }
}