/* ==========================================================================
   plantscc-lite — modern theme
   A clean, contemporary restyle layered over Bootstrap 3 + DataTables markup.
   Botanical emerald palette, Inter typeface, card surfaces, soft shadows.
   ========================================================================== */

:root {
  --accent:        #059669;  /* emerald 600 */
  --accent-dark:   #047857;  /* emerald 700 */
  --accent-soft:   #ecfdf5;  /* emerald 50  */
  --amber:         #d97706;
  --ink:           #0f172a;  /* slate 900 */
  --body:          #334155;  /* slate 700 */
  --muted:         #64748b;  /* slate 500 */
  --line:          #e7ebf0;  /* border     */
  --bg:            #f6f8fa;  /* page bg     */
  --surface:       #ffffff;
  --radius:        14px;
  --radius-sm:     9px;
  --shadow-sm:     0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow:        0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05);
  --shadow-lg:     0 12px 32px rgba(15,23,42,.12);
}

/* ---- Base ---------------------------------------------------------------- */
body#app,
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--accent-dark); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--accent); text-decoration: none; }
p { color: var(--body); }

/* ---- Navbar -------------------------------------------------------------- */
.navbar.navbar-fixed-top,
.navbar-bold {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: none;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-height: 60px;
  margin: 0;
}
.navbar-bold .navbar-brand {
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0;            /* left edge sits on the container gutter, in line with page content */
}
.navbar-bold .navbar-brand::before {
  content: "";
  width: 22px; height: 22px;
  margin-right: 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, #10b981, #047857);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.navbar-bold .nav.navbar-nav > li > a {
  color: var(--body);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 60px;
  padding: 0 15px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.navbar-bold .nav.navbar-nav > li > a:hover,
.navbar-bold .nav.navbar-nav > li.open > a {
  color: var(--accent-dark);
  background: var(--accent-soft);
}
.navbar-bold .caret { color: var(--muted); }
.navbar-toggle { border-color: var(--line); margin-top: 13px; }
.navbar-toggle .icon-bar { background: var(--ink); }

/* Dropdown */
.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 7px;
  margin-top: 6px;
}
.dropdown-menu > li > a {
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--body);
  font-size: 14px;
}
.dropdown-menu > li > a:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Center the menu on desktop: brand pinned left, nav centered in the full bar */
@media (min-width: 768px) {
  .navbar-bold .container { position: relative; text-align: center; }
  .navbar-bold .navbar-header { position: absolute; left: 15px; top: 0; }
  .navbar-bold .navbar-collapse { text-align: center; }
  .navbar-bold .nav.navbar-nav { display: inline-block; float: none; vertical-align: top; }
  .navbar-bold .nav.navbar-nav > li { display: inline-block; float: none; }
}

/* ---- Hero header --------------------------------------------------------- */
.header.vert {
  background: linear-gradient(135deg, #065f46 0%, #059669 55%, #10b981 100%);
  position: relative;
  overflow: hidden;
  padding: 54px 0 60px;
  color: #fff;
  text-align: center;
}
.header.vert::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 280px at 20% -40%, rgba(255,255,255,.18), transparent),
    radial-gradient(700px 240px at 100% 120%, rgba(0,0,0,.12), transparent);
  pointer-events: none;
}
.header.vert .container { position: relative; z-index: 1; }
.header.vert h1 {
  color: #fff;
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  text-shadow: 0 1px 18px rgba(0,0,0,.12);
}
.header.vert .lead {
  color: rgba(255,255,255,.92);
  font-size: 17px;
  font-weight: 400;
  margin: 0;
}

/* ---- Content shell ------------------------------------------------------- */
.album { padding: 34px 0 60px; }
/* Unify the width of every primary container (navbar, hero, content, footer)
   so their left/right edges line up — the navbar brand then sits exactly above
   the page content instead of being offset by the old 1120 vs 1170 mismatch. */
.navbar-bold > .container,
.header.vert > .container,
.album > .container,
.footer > .container { max-width: 1140px; }

/* Normalise content to the standard container gutter so every page's content
   aligns to the same left edge as the brand. Some pages put content straight
   into a .row (negative gutters) or use px-0 utilities, which made them sit
   flush to the container edge instead; this pulls them back to the gutter while
   preserving the gutters *between* real grid columns. */
.album > .container > .row { margin-left: 0; margin-right: 0; }
.album > .container > .row > [class*="col-"]:first-child { padding-left: 0; }
.album > .container > .row > [class*="col-"]:last-child { padding-right: 0; }

/* Page heading (was the dated grey .jumbotron) */
.jumbotron {
  background: transparent;
  padding: 0;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  position: relative;
  padding-bottom: 14px;
}
h3.jumbotron::after,
.m-b-md.jumbotron::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 52px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), #34d399);
}
.m-b-md.jumbotron h2 { margin: 0; font-size: 26px; }

/* ---- Cards / generic surfaces ------------------------------------------- */
.box,
.datasets {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 8px 18px;
}
.datasets { padding: 18px 22px; }

/* ---- Tables -------------------------------------------------------------- */
.table {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.table > thead > tr > th {
  background: #f1f5f9;
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  vertical-align: middle;
}
.table > tbody > tr > td {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
  color: var(--body);
  font-size: 14px;
}
.table > tbody > tr > td p { margin: 0; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fcfdfe; }
.table-hover > tbody > tr:hover { background: var(--accent-soft); }

/* Detail (profile) table */
.profile-table { box-shadow: var(--shadow-sm); }
.profile-table .table-info {
  background: #f8fafc;
  color: var(--ink);
  font-weight: 600;
  width: 230px;
  font-size: 13.5px;
}
.profile-table .table-detail { color: var(--body); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 15px;
  border: 1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-info, .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-info:hover, .btn-primary:hover,
.btn-info:focus, .btn-primary:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
.btn-warning {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}
.btn-warning:hover { background: #b45309; border-color: #b45309; color: #fff; }
.btn-default {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.btn-default:hover { background: #f1f5f9; border-color: #cbd5e1; color: var(--ink); }

/* ---- Tabs ---------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--line);
  margin-bottom: 18px;
}
.nav-tabs > li > a {
  border: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  margin-right: 6px;
  border-radius: 8px 8px 0 0;
  padding: 10px 16px;
}
.nav-tabs > li > a:hover { background: var(--accent-soft); color: var(--accent-dark); border: none; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--accent-dark);
  background: transparent;
  border: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- Search box (home + search page) ------------------------------------ */
.search .input-group,
.stylish-input-group { box-shadow: var(--shadow); border-radius: 999px; }
.form-control {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
  height: auto;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--ink);
}
.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(5,150,105,.15);
}
.stylish-input-group .form-control { border-radius: 999px 0 0 999px; border-right: none; }
.stylish-input-group .input-group-btn .btn {
  border-radius: 0 999px 999px 0;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 10px 20px;
}
.stylish-input-group .input-group-btn .btn:hover { background: var(--accent-dark); }

/* ---- DataTables controls ------------------------------------------------- */
.dataTables_wrapper { margin-top: 4px; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 12px;
  margin-left: 8px;
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(5,150,105,.15);
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
}
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-button {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 13px !important;
  margin-left: 5px;
}
.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-button:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-dark) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--muted); font-size: 13px; padding-top: 14px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  padding: 6px 12px !important;
  color: var(--body) !important;
  background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--accent-soft) !important;
  border-color: var(--line) !important;
  color: var(--accent-dark) !important;
}

/* ---- Images / thumbnails ------------------------------------------------- */
.img-thumbnail {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 4px;
  background: #fff;
}
/* Spacing between wrapped text and floated images (About, Help, etc.) */
.gap-left {
  margin-left: 28px;
  margin-bottom: 18px;
}
.pull-right.gap-left { margin-left: 28px; }
.pull-left.gap-left { margin-left: 0; margin-right: 28px; }

/* ---- Footer -------------------------------------------------------------- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 22px 0;
  margin-top: 40px;
}
.footer .text-muted { color: var(--muted); font-size: 13px; margin: 0; text-align: center; }

/* ---- Home page (centered search + cards) -------------------------------- */
.home > .container > .row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home .search,
.home .datasets {
  float: none;
  width: 100%;
  max-width: 720px;
}
.home .search { margin-top: 8px; }
.home .search .form-group { margin: 0; }
.home .search .col-md-8 {
  float: none;
  width: 100%;
  padding: 0;
}

/* ---- Statistics dashboard (homepage) ------------------------------------ */
.dash-search {
  display: flex; gap: 10px; max-width: 720px; margin: 8px auto 26px;
}
.dash-search input[type=text] {
  flex: 1; padding: 13px 18px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.dash-search input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dash-search button {
  padding: 0 22px; border: 0; border-radius: 11px; background: var(--accent); color: #fff;
  font-weight: 600; font-size: 15px; cursor: pointer; transition: background .15s ease;
}
.dash-search button:hover { background: var(--accent-dark); }

.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px 16px; text-align: center; display: block;
}
a.stat-card:hover { text-decoration: none; transform: translateY(-2px); transition: transform .12s ease; border-color: #c7ead9; box-shadow: var(--shadow); }
.stat-num { font-size: 28px; font-weight: 800; color: var(--accent-dark); letter-spacing: -.02em; line-height: 1.1; }
.stat-label { margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px 24px;
}
.dash-title { font-size: 15px; margin: 0 0 18px; color: var(--ink); }
.dash-range { color: var(--muted); font-weight: 500; font-size: 13px; margin-left: 4px; }

/* horizontal bar chart */
.barchart { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 12px; }
a.bar-row:hover { text-decoration: none; }
a.bar-row:hover .bar-fill { background: var(--accent-dark); }
.bar-label { font-size: 13px; color: var(--body); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-label.species { font-style: italic; }
.bar-track { height: 12px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 3px; transition: width .3s ease; }
.bar-fill.alt { background: linear-gradient(90deg, #0ea371, #34d399); }
.bar-val { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* GO callout */
.dash-callout { display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(135deg, var(--accent-soft), #ffffff); }
.callout-num { font-size: 40px; font-weight: 800; color: var(--accent-dark); letter-spacing: -.02em; line-height: 1; }
.callout-label { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.callout-sub { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }

/* year histogram */
.histogram { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding-top: 8px; }
.hbar { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 6px; }
.hbar-fill { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }
.hbar:hover .hbar-fill { background: var(--accent-dark); opacity: 1; }
.histogram-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.cite-card { margin-top: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.cite-tag { display: inline-block; background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 999px; margin-right: 10px; }
.cite-card a { color: var(--body); }
.cite-card a:hover { color: var(--accent-dark); }

/* ---- Misc ---------------------------------------------------------------- */
.stats-header th { background: #f1f5f9 !important; }
hr { border-color: var(--line); }
::selection { background: rgba(5,150,105,.18); }