/* ============================================================
   DaVon – site-wide stylesheet
   Loaded after Bootstrap 5 to apply brand colour overrides.
   ============================================================ */

/* ── Brand colours ─────────────────────────────────────────── */
:root {
    --davon-950: #022c22;
    --davon-900: #064e3b;
    --davon-800: #065f46;
    --davon-700: #047857;
    --davon-100: #d1fae5;

    /* Override Bootstrap primary */
    --bs-primary-rgb: 6, 95, 70;
    --bs-link-color-rgb: 4, 120, 87;
    --bs-link-hover-color-rgb: 6, 95, 70;
}

/* ── Button overrides ───────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg: var(--davon-800);
    --bs-btn-border-color: var(--davon-800);
    --bs-btn-hover-bg: var(--davon-700);
    --bs-btn-hover-border-color: var(--davon-700);
    --bs-btn-active-bg: var(--davon-900);
    --bs-btn-active-border-color: var(--davon-900);
    --bs-btn-focus-shadow-rgb: 6, 95, 70;
}

.btn-outline-primary {
    --bs-btn-color: var(--davon-800);
    --bs-btn-border-color: var(--davon-800);
    --bs-btn-hover-bg: var(--davon-800);
    --bs-btn-hover-border-color: var(--davon-800);
    --bs-btn-active-bg: var(--davon-900);
    --bs-btn-active-border-color: var(--davon-900);
}

/* ── Navbar brand ───────────────────────────────────────────── */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--davon-800);
}
.navbar-brand:hover {
    color: var(--davon-700);
}

/* ── Status badge: approved uses emerald instead of Bootstrap green ── */
.badge.text-bg-success {
    background-color: var(--davon-100) !important;
    color: var(--davon-800) !important;
}

/* ── Hero section ───────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, #1a3a32 0%, #2d5a4c 100%);
}

/* ── Table rows without data ────────────────────────────────────────────── */
tr.no-data > td {
    color: var(--bs-secondary-color);
}

/* ── Table sort indicators ──────────────────────────────────── */
th.asc a::after,
th.desc a::after {
    display: inline-block;
    margin-left: 0.3em;
}
th.asc a::after  { content: "▲"; }
th.desc a::after { content: "▼"; }

/* ── Filter button group: hide the radio input, keep behaviour ── */
.btn-filter label input {
    position: absolute;
    clip-path: inset(50%);
    pointer-events: none;
}

/* ── Round info button revealing a help popover ── */
.btn-help {
    --bs-btn-font-size: 0.8rem;
    --bs-btn-line-height: 1;
    --bs-btn-font-family: var(--bs-font-monospace);
    width: 1.2rem;
    height: 1.2rem;
}

/* ── Header group help popover: wider than the Bootstrap default, definition list ── */
.popover-help {
    --bs-popover-max-width: 34rem;
}
.popover-help .popover-body dl {
    margin-bottom: 0;
}
.popover-help .popover-body dt {
    font-weight: 600;
}
.popover-help .popover-body dd {
    margin-bottom: 0.5rem;
    color: var(--bs-secondary-color);
}

/* ── Timeline step markers: a circle wide enough to hold a glyph or a step number ── */
.timeline-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed on both axes and unshrinkable, or the flex column squashes the circle into an oval. */
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    /* The vendored bootstrap nudges every .badge up by a pixel, which offsets it from the timeline line. */
    top: 0;
}

/* ── Life cycle timeline ── */
/* The toggle draws a +/- rather than a label, so it stays a small square whatever the language. */
.timeline-toggle {
    /* Sized to the glyph rather than to the button padding, so it stays as compact as the badge beside it. */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    /* The button font size is set for a label, which would make the glyph bigger than the text beside it. */
    font-size: 0.875rem;
    line-height: 1;
}
.timeline-toggle::before {
    content: "+";
}
.timeline-toggle[aria-expanded="true"]::before {
    content: "\2212"; /* A minus sign, which lines up better than a hyphen. */
}
.timeline-downloads > :not(caption) > * > * {
    /* Set apart rather than crammed together, since the table sizes itself to its content. */
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
}
/* The card body already pads the edges of the row, so the outer cells do not pad them a second time. */
.timeline-downloads > :not(caption) > * > :first-child {
    padding-inline-start: 0;
}
.timeline-downloads > :not(caption) > * > :last-child {
    padding-inline-end: 0;
}

/* ── Map legend ─────────────────────────────────────────────── */
.map-legend {
    background: rgba(255, 255, 255, 0.9);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.map-legend-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 0;
    margin-right: 0.5rem;
    vertical-align: middle;
}