/* ============================================================
   GrantAffinity — application theme.

   Layers on top of tokens.css. Bootstrap's own CSS variables are remapped to
   the brand palette here, so utilities (.bg-primary, .text-primary, .badge,
   .bg-info …) pick up the identity without touching every template.

   --brand-primary / -dark / -light are injected per-tenant in base.html from
   branding.toml; they default to the GrantAffinity navy.
   ============================================================ */

:root {
  /* Bootstrap remap — theme colors */
  --bs-primary: var(--brand-primary, var(--ga-navy));
  --bs-info: var(--ga-blue-light);
  --bs-info-rgb: 91, 157, 245;
  --bs-success: var(--ga-green);
  --bs-success-rgb: 47, 143, 87;
  --bs-secondary: var(--ga-text);
  --bs-secondary-rgb: 89, 100, 123;

  /* Bootstrap remap — surfaces & type */
  --bs-body-font-family: var(--ga-font-ui);
  --bs-body-font-size: var(--ga-text-base);
  --bs-body-color: var(--ga-ink);
  --bs-body-bg: var(--ga-paper);
  --bs-border-color: var(--ga-border);
  --bs-border-radius: var(--ga-radius-md);
  --bs-border-radius-sm: var(--ga-radius-sm);
  --bs-border-radius-lg: var(--ga-radius-lg);
  --bs-link-color: var(--ga-blue);
  --bs-link-hover-color: var(--ga-navy);
}

body {
  background-color: var(--ga-paper);
  color: var(--ga-ink);
  font-family: var(--ga-font-ui);
}

/* --- Typography: display face for headings, tightened at large sizes --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ga-font-brand);
  font-weight: var(--ga-weight-semibold);
  color: var(--ga-ink);
}
h1, h2, .h1, .h2,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  letter-spacing: -0.02em;
}

/* Page titles sit a notch below the navbar wordmark (25px) so the brand lockup
   reads as the largest text on the page, while staying above section
   sub-headings (h5/h6, ≤20px). Page titles use h2/h3 or the .h3/.h4 utility;
   the bare <h4> faculty name and h5/h6 section headers are left untouched. */
h2, h3, .h2, .h3, .h4 {
  font-size: 1.375rem;
}
.lead { color: var(--ga-text); }
.text-muted { color: var(--ga-text-muted) !important; }

/* --- Navbar --- */
.navbar {
  background-color: var(--brand-primary, var(--ga-navy)) !important;
}
.navbar .nav-link { color: var(--ga-on-navy-muted); }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--ga-on-navy); }
.navbar-brand { padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* --- Cards --- */
.card {
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  box-shadow: var(--ga-shadow-card);
  background-color: var(--ga-surface);
}
.card-header {
  background-color: var(--ga-tint);
  border-bottom: 1px solid var(--ga-border);
  font-family: var(--ga-font-brand);
  font-weight: var(--ga-weight-semibold);
  border-top-left-radius: calc(var(--ga-radius-xl) - 1px);
  border-top-right-radius: calc(var(--ga-radius-xl) - 1px);
}

/* --- Buttons (Bootstrap compiles literals, so set them explicitly) --- */
.btn { border-radius: var(--ga-radius-sm); font-weight: var(--ga-weight-medium); }
.btn-primary {
  --bs-btn-bg: var(--brand-primary, var(--ga-navy));
  --bs-btn-border-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-hover-bg: var(--brand-primary-dark, var(--ga-navy-deep));
  --bs-btn-hover-border-color: var(--brand-primary-dark, var(--ga-navy-deep));
  --bs-btn-active-bg: var(--ga-navy-deep);
  --bs-btn-active-border-color: var(--ga-navy-deep);
  --bs-btn-disabled-bg: var(--brand-primary, var(--ga-navy));
  --bs-btn-disabled-border-color: var(--brand-primary, var(--ga-navy));
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-border-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-hover-bg: var(--brand-primary, var(--ga-navy));
  --bs-btn-hover-border-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-active-bg: var(--ga-navy-deep);
  --bs-btn-active-border-color: var(--ga-navy-deep);
}

/* Focus ring uses the interactive blue. */
.btn:focus-visible, .form-control:focus, .form-select:focus {
  border-color: var(--ga-blue);
  box-shadow: 0 0 0 0.2rem rgba(47, 95, 208, 0.25);
}

/* --- Forms --- */
.form-control, .form-select { border-radius: var(--ga-radius-sm); border-color: var(--ga-border); }
.form-label { color: var(--ga-ink); }

/* --- Badges & pills --- */
.badge { border-radius: var(--ga-radius-pill); font-weight: var(--ga-weight-medium); }
.keyword-badge { font-size: var(--ga-text-xs); margin: 1px; }
.badge-dept { font-size: 0.7rem; }

/* Faculty directory column sizing. Bootstrap's .badge is `white-space: nowrap`,
   so a department like "Astronomy & Astrophysics" set the column's minimum
   width at its full length and the auto table layout took that room off the
   Name column, which then wrapped every multi-word name. Letting the badge
   wrap drops its minimum to the longest single word; the min-width keeps the
   room that frees going to the name rather than to the title. */
.faculty-table .col-name { min-width: 13rem; }
.faculty-table .col-tags .badge { white-space: normal; text-align: left; }
/* Accent badge — the "match" highlight from the brand guide. */
.badge-accent {
  background-color: var(--ga-blue-light);
  color: var(--ga-ink);
}

/* --- Stat tiles --- */
.stat-card { text-align: center; padding: var(--ga-space-5); }
.stat-card .stat-number {
  font-family: var(--ga-font-brand);
  font-size: var(--ga-text-2xl);
  font-weight: var(--ga-weight-bold);
  letter-spacing: -0.02em;
  color: var(--brand-primary, var(--ga-navy));
}
.stat-card .stat-label { color: var(--ga-text-muted); font-size: var(--ga-text-sm); }

/* --- Match score bar: navy -> success green --- */
.score-bar {
  height: 8px;
  background-color: var(--ga-border);
  border-radius: var(--ga-radius-pill);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ga-navy), var(--ga-green));
  border-radius: var(--ga-radius-pill);
}

.match-card { transition: transform 0.1s, box-shadow 0.1s; }
.match-card:hover { transform: translateY(-2px); box-shadow: var(--ga-shadow-pop); }

.progress-text { font-size: var(--ga-text-sm); color: var(--ga-text-muted); }

/* --- Links --- */
a { color: var(--ga-blue); }
a:hover { color: var(--ga-navy); }
.navbar a, .btn, .card-header a { text-decoration-color: transparent; }

/* --- Dropdowns / popovers --- */
.dropdown-menu {
  border-radius: var(--ga-radius-md);
  border-color: var(--ga-border);
  box-shadow: var(--ga-shadow-pop);
}

/* --- Alerts --- */
.alert { border-radius: var(--ga-radius-md); }

/* --- Tables --- */
.table { --bs-table-border-color: var(--ga-border); }
.table > thead { color: var(--ga-text); }

/* Rendered markdown grant descriptions (e.g. InfoReady). */
.grant-description > :first-child { margin-top: 0; }
.grant-description > :last-child { margin-bottom: 0; }
.grant-description h1, .grant-description h2, .grant-description h3,
.grant-description h4, .grant-description h5, .grant-description h6 {
    font-size: 1.05rem;
    font-weight: var(--ga-weight-semibold);
    margin-top: 1rem;
}
.grant-description table {
    width: 100%;
    margin: 0.75rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.grant-description th, .grant-description td {
    border: 1px solid var(--ga-border);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.grant-description th { background: var(--ga-paper); }

/* --- Expandable award descriptions ---
   One copy of the text: the snippet lives inside the <summary> and is hidden
   once the <details> is open, so expanding swaps the teaser for the full
   description instead of showing both. Done in CSS rather than JS so the
   profile page needs no inline script for it. */
.award-abstract > summary { list-style: none; }
.award-abstract > summary::-webkit-details-marker { display: none; }
.award-abstract[open] > summary .award-abstract-short,
.award-abstract[open] > summary .award-abstract-more,
.award-abstract:not([open]) > summary .award-abstract-less { display: none; }
.award-abstract-more, .award-abstract-less { white-space: nowrap; }

/* --- Vertically scrollable table ---
   Bootstrap's .table-responsive handles the horizontal overflow only, and the
   grant-sources list is a few hundred rows once a curated funder batch has
   been seeded. The header stays put while the body scrolls, because a table
   this long is unreadable without it: `position: sticky` needs an opaque
   background of its own or the scrolling rows show through, and a z-index or
   the sorted-column borders draw over it. */
.table-scroll { max-height: 70vh; overflow-y: auto; overflow-x: auto; }
.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ga-surface);
    box-shadow: inset 0 -1px 0 var(--ga-border);
}

/* "show more" / "show less" on a Bootstrap collapse.
   Bootstrap puts `.collapsed` on the toggle while its target is hidden and
   takes it off when shown, which is enough to swap the label in CSS — so a
   toggle needs no JavaScript of its own. The older toggles on the faculty
   page each wire up their own listener; this one does not. */
.more-toggle {
    cursor: pointer;
    font-size: var(--ga-text-sm);
}
.more-toggle .more-open { display: none; }
.more-toggle:not(.collapsed) .more-open { display: inline; }
.more-toggle:not(.collapsed) .more-closed { display: none; }

/* A list that is browsed rather than read through: show about five rows and
   scroll the rest, so a long tail of individual funder sources cannot push
   everything else off the page. Pair with `.table-scroll`, which supplies the
   sticky header — without it the column headings scroll away and the rows
   below the fold are unreadable.

   Two heights because the rows measure differently: an admin source row runs
   ~90px (it carries a health note under the badge), a superadmin `.table-sm`
   row ~75px. Both are header + five rows at those sizes. They are deliberately
   not one shared value — a single height shows five rows in one table and
   four-and-a-bit in the other, which is the thing this is meant to avoid. */
.table-scroll.scroll-rows { max-height: 31rem; }
.table-scroll.scroll-rows-sm { max-height: 27rem; }

/* Dashboard jump links. `scroll-margin-top` keeps a jumped-to card off the top
   edge of the viewport; without it the card header sits flush against it and
   reads as the top of the page rather than as a landing. Smooth scrolling is
   dropped for anyone who has asked for less motion. */
[id^="panel-"] { scroll-margin-top: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}