/* APCalign-app styling — matches austraits.org and the AusTraits Data Portal.
   Design tokens and component styling are kept in step with
   austraits.portal/inst/www/austraits-portal.css so the two apps read as
   part of the same platform. Change both together. */

:root {
  --at-ink: #2b332f;
  --at-muted: #64726b;
  --at-green: #2f7d55;
  --at-green-dark: #235c43;
  --at-blue: #2a7f9e;
  --at-gold: #d9a441;
  --at-cream: #f7f7f4;
  --at-mint: #f2f6f3;
  --at-sky: #f3f7f8;
  --at-line: #e5e8e5;
  --at-white: #ffffff;
  --at-shadow: 0 10px 26px rgba(30, 45, 38, 0.08);
  --at-radius: 8px;
}

body {
  color: var(--at-ink);
  background: #fdfdfc;
}

a {
  color: var(--at-green-dark);
}

a:hover {
  color: var(--at-blue);
}

/* --- Brand bar (page title) --------------------------------------------
   bslib renders the page title inside a `.navbar` that contains
   `.bslib-page-title`. Style it as the dark-green AusTraits brand bar. */
.navbar:has(.bslib-page-title) {
  background: var(--at-green-dark);
  box-shadow: 0 1px 8px rgba(30, 55, 42, 0.12);
  position: relative;
}

.navbar:has(.bslib-page-title)::after {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--at-green), var(--at-blue), var(--at-gold));
}

.bslib-page-title,
.navbar:has(.bslib-page-title) .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--at-white);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
}

.bslib-page-title img,
.navbar:has(.bslib-page-title) .navbar-brand img {
  max-height: 30px;
  width: auto;
}

/* --- Tab navigation bar -------------------------------------------------
   The `navset_bar` renders a second `.navbar.navbar-default`. Present it as
   a light sub-navigation with a green active indicator. */
.navbar.navbar-default {
  --bs-navbar-active-color: var(--at-green-dark);
  background: var(--at-white);
  border-bottom: 1px solid var(--at-line);
  box-shadow: none;
}

.navbar.navbar-default .navbar-brand {
  color: var(--at-green-dark);
  font-weight: 600;
}

.navbar.navbar-default .nav-link {
  color: var(--at-muted);
  font-weight: 500;
}

.navbar.navbar-default .nav-link:hover,
.navbar.navbar-default .nav-link:focus {
  color: var(--at-green-dark);
}

/* Underlined-tab active state */
.nav-underline {
  --bs-nav-underline-link-active-color: var(--at-green-dark);
  --bs-nav-underline-border-color: var(--at-green);
}

.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  color: var(--at-green-dark);
  border-bottom-color: var(--at-green);
}

/* bslib gives `.bslib-page-main` a 576px min-width, which the sidebar grid
   cell cannot honour on narrow screens — the tab bar and content then spill
   past the right edge. The app is embedded in an iframe on austraits.org, so
   let the main region shrink with its cell instead. */
.bslib-page-main {
  min-width: 0 !important;
}

/* --- Headings -----------------------------------------------------------*/
h1, h2, .content h2 {
  color: var(--at-green-dark);
}

h3, h4, h5 {
  color: var(--at-ink);
}

/* --- Sidebar ------------------------------------------------------------*/
.bslib-sidebar-layout > .sidebar {
  --bs-card-bg: var(--at-cream);
}

.bslib-sidebar-layout > .sidebar .sidebar-content {
  background: var(--at-cream);
}

.bslib-sidebar-layout > .sidebar h5 {
  color: var(--at-green-dark);
  font-size: 0.95rem;
  font-weight: 600;
}

/* --- Buttons ------------------------------------------------------------
   Green (the Bootstrap primary) is the AusTraits identity colour; gold is
   reserved as an accent (brand-bar stripe, highlights). */
.btn-primary {
  font-weight: 600;
}

.btn-outline-primary,
.btn-secondary {
  --bs-btn-color: var(--at-green-dark);
  --bs-btn-border-color: var(--at-green-dark);
  --bs-btn-hover-color: var(--at-white);
  --bs-btn-hover-bg: var(--at-green-dark);
  --bs-btn-hover-border-color: var(--at-green-dark);
}

/* Full-width action buttons in the sidebar, as in the data portal. */
.bslib-sidebar-layout > .sidebar .btn {
  width: 100%;
}

/* --- Cards / value boxes ------------------------------------------------*/
.card,
.bslib-value-box {
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  box-shadow: 0 6px 18px rgba(30, 45, 38, 0.06);
}

/* --- Links inside data tables & selectize accents ----------------------*/
.selectize-input.focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--at-green);
  box-shadow: 0 0 0 0.2rem rgba(47, 125, 85, 0.2);
}

/* --- Results table ------------------------------------------------------*/
table.dataTable thead th {
  color: var(--at-green-dark);
  border-bottom: 2px solid var(--at-line);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color: var(--at-green) !important;
}

/* Long free-text columns (aligned_reason, update_reason) otherwise stretch
   every row to their wrapped height. Clamp them; the server attaches a
   `title` so the full value is still readable on hover, and the downloaded
   CSV always carries it in full. */
table.dataTable td.truncated {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Prose tabs (Get started, FAQs) --------------------------------------
   card_header() carries the tab title (see get_started.R/faqs.R), matching
   the AusTraits Data Portal's App Info tab; h4's here get the same
   underlined "section heading" treatment as that tab's `hdr` style, but as
   a shared rule instead of repeating an inline style on every heading. */
.apcalign-prose {
  max-width: 62rem;
}

.apcalign-prose h4 {
  color: var(--at-green-dark);
  border-bottom: 2px solid var(--at-green);
  padding-bottom: 0.4rem;
  margin-top: 1.75rem;
  margin-bottom: 0.9rem;
}

.apcalign-prose h4:first-child {
  margin-top: 0;
}

.apcalign-prose samp {
  background: var(--at-mint);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.9em;
}

/* --- Footer -------------------------------------------------------------
   Deliberately plain, in-flow styling (no position: fixed). Every nav_panel
   above is wrapped in a card(), which bslib gives its own internal
   scrollbar once its content outgrows the available space — so the page
   itself never has to scroll, and this footer just naturally stays put at
   the bottom of the screen. Matches austraits.portal/inst/www/
   austraits-portal.css. */
footer {
  color: var(--at-muted);
  border-top: 1px solid var(--at-line);
  background: var(--at-cream);
  font-size: 0.9rem;
}

footer a {
  color: var(--at-green-dark);
}

footer a:hover {
  color: var(--at-blue);
}