.hero-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.manage-coaches-page {
    margin: 62px;
    padding: 0;
}

.page-title, h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 24px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

    .table th, .table td {
        padding: 12px 16px;
        border-bottom: 1px solid #EAEAEA;
        text-align: left;
    }

.actions-col {
    width: 120px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    color: #fff;
}

.in-challenge {
    background-color: #4DC24D;
}

.not-in-challenge {
    background-color: #717680;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #FFF;
    box-shadow: 0px 1px 2px rgba(10,13,18,0.05);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    color: #181D27;
}

    .btn:hover {
        background-color: #F5F5F5;
    }

.btn-primary {
    background-color: #4DC24D;
    border-color: #4DC24D;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #3DB43D;
        border-color: #3DB43D;
    }

.btn-danger {
    background-color: #E74C3C;
    border-color: #E74C3C;
    color: #fff;
}

    .btn-danger:hover {
        background-color: #C0392B;
        border-color: #C0392B;
    }

/* Outline style to match other pages */
.btn-outline-secondary {
    border-color: #D5D7DA;
    color: #181D27;
    background: #FFF;
}

/* Header row (spacing & layout like Join Public Challenge) */
.challenge-settings-header {
    margin: 32px 62px 0;
    padding: 0;
}

    .challenge-settings-header .header-row {
        display: flex;
        align-items: center; /* Title & button on the same plane */
        justify-content: space-between; /* Title left, button right */
        gap: 16px;
        margin-bottom: 0;
    }
    /* Ensure the title itself doesn't add extra offset */
    .challenge-settings-header .page-title {
        margin: 0;
        line-height: 1.2;
    }
    /* Pin actions to the right and vertically center the button */
    .challenge-settings-header .header-actions {
        white-space: nowrap;
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    /* Fix hover readability to match other Back buttons:
   light gray background + dark text (no white text on hover) */
    .challenge-settings-header .btn,
    .challenge-settings-header .btn:visited {
        color: #181D27;
        background: #FFF;
        border: 1px solid #D5D7DA;
    }

        .challenge-settings-header .btn:hover,
        .challenge-settings-header .btn:focus {
            background: #F5F5F5;
            color: #181D27 !important; /* defeat any global .btn:hover { color: #fff } */
            border-color: #D5D7DA;
        }

/* =============================== */
/* Manage Coaches table layout fix */
/* =============================== */

/* --- Standalone page context ------------------------------------------ */
.manage-coaches-page {
    display: grid; /* create centering context */
    justify-content: center; /* center children horizontally */
}

    .manage-coaches-page .table {
        width: auto !important; /* stop stretching full width */
        display: inline-table !important;
        margin: 0 auto 2rem; /* center */
        table-layout: auto !important;
    }

/* --- Combined tabs page context (Challenge Management) ---------------- */
#tab-participation .settings-card {
    display: grid; /* centralize the contents inside the card */
    justify-content: center;
}

    #tab-participation .settings-card .table {
        width: auto !important;
        display: inline-table !important;
        margin: 0 auto 2rem;
        table-layout: auto !important;
    }

        /* Keep the Action column tight and as the right edge */
        .manage-coaches-page .table th:last-child,
        .manage-coaches-page .table td:last-child,
        #tab-participation .settings-card .table th:last-child,
        #tab-participation .settings-card .table td:last-child {
            width: 120px !important;
            white-space: nowrap;
        }

        /* Tighten the Status column */
        .manage-coaches-page .table th:nth-child(2),
        .manage-coaches-page .table td:nth-child(2),
        #tab-participation .settings-card .table th:nth-child(2),
        #tab-participation .settings-card .table td:nth-child(2) {
            width: 1% !important; /* min-content sizing */
            white-space: nowrap;
        }

        /* Avoid odd wraps in Username for a clean, compact width */
        .manage-coaches-page .table th:first-child,
        .manage-coaches-page .table td:first-child,
        #tab-participation .settings-card .table th:first-child,
        #tab-participation .settings-card .table td:first-child {
            white-space: nowrap;
        }

        /* =============================== */
        /* New: Horizontal spacing between columns */
        /* =============================== */

        /* Add extra left padding from the 2nd column onward for visual column gaps */
        .manage-coaches-page .table th + th,
        .manage-coaches-page .table td + td,
        #tab-participation .settings-card .table th + th,
        #tab-participation .settings-card .table td + td {
            padding-left: 228px; /* increase as needed for more gap */
        }