/* ==========================================
   DATA TABLE
   Reference tables in body content. Bootstrap's .table is unstyled grey by
   default; this gives it the site's teal header and card treatment.
   Apply with: <table class="table data-table">
   ========================================== */

.data-table-wrap {
    --dt-accent: #3296a5;
    --dt-accent-dark: #004a56;
    --dt-border: #dbe7ea;
    --dt-stripe: #f4fafb;

    border: 1px solid var(--dt-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(2, 36, 91, 0.06);
    background: #ffffff;
}

/* The wrapper owns the border radius, so the table sits flush inside it. */
.data-table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--dt-stripe);
    --bs-table-striped-color: #333;
    --bs-table-hover-bg: #e8f4f6;
    --bs-table-color: #333;
    border-color: var(--dt-border);
}

.data-table thead th {
    background: var(--dt-accent);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding: 0.9rem 1rem;
    border-bottom: none;
    white-space: nowrap;
}

.data-table tbody th,
.data-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: top;
    line-height: 1.6;
    border-color: var(--dt-border);
}

/* First column is a row header — give it weight without shouting. */
.data-table tbody th[scope="row"] {
    font-weight: 600;
    color: var(--dt-accent-dark);
    white-space: nowrap;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Caption reads as a figure note under the table, not stray grey text. */
.data-table > caption {
    caption-side: bottom;
    padding: 0.85rem 1rem;
    background: #fbfdfd;
    border-top: 1px solid var(--dt-border);
    color: #5b6b70;
    font-size: 0.875rem;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .data-table thead th,
    .data-table tbody th,
    .data-table tbody td {
        padding: 0.7rem 0.75rem;
        font-size: 0.92rem;
    }

    /* Row headers stop being nowrap once space is tight. */
    .data-table tbody th[scope="row"] {
        white-space: normal;
    }
}