:root {
    --sfg-primary: #1976d2;
    --sfg-primary-dark: #145a9e;
}

.sfg-navbar {
    background-color: var(--sfg-primary-dark);
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}

/* "Sign out" submit button styled as a nav link */
.navbar .btn-link.nav-link {
    border: 0;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

.sfg-hero {
    background: linear-gradient(135deg, var(--sfg-primary) 0%, var(--sfg-primary-dark) 100%);
    color: #fff;
    border-radius: 0.75rem;
}

.card-form {
    max-width: 460px;
    margin: 0 auto;
}

.table thead th {
    white-space: nowrap;
}

.run-message {
    max-width: 640px;
}

.admin-query-results {
    max-height: 34rem;
}

.admin-query-results td {
    min-width: 8rem;
    max-width: 28rem;
    white-space: pre-wrap;
}

/* Admin detail lists: on phones each row becomes a labeled detail block with
   an HR-like separator. Log, High Scores, and Saves all share this treatment. */
@media (max-width: 699.98px) {
    .detail-list-wrap {
        overflow: visible;
    }
    .detail-list-table thead {
        display: none;
    }
    .detail-list-table,
    .detail-list-table tbody,
    .detail-list-table tr,
    .detail-list-table td {
        display: block;
        width: 100%;
    }
    .detail-list-table tbody tr {
        padding: 1rem 0;
        border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    }
    .detail-list-table tbody tr:first-child {
        border-top: 2px solid var(--bs-border-color, #dee2e6);
    }
    .detail-list-table tbody tr:last-child {
        border-bottom: 0;
    }
    /* Bootstrap striping/hover backgrounds get noisy when rows are blocks. */
    .detail-list-table tbody tr,
    .detail-list-table tbody tr:hover {
        background: transparent !important;
    }
    .detail-list-table td {
        border: 0;
        padding: 0.18rem 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .detail-list-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--bs-secondary-color, #6c757d);
    }
    .detail-list-table .run-message {
        max-width: none;
    }
    /* Action buttons (Details / Delete) sit left-aligned beneath the details. */
    .detail-list-table td.run-actions,
    .detail-list-table td.detail-actions {
        text-align: left;
        margin-top: 0.4rem;
    }
    .detail-list-table td.detail-actions:empty {
        display: none;
    }
}