/*
 * Connected card tabs
 * -------------------
 * Makes a tabbed card read as one continuous panel: the tab strip sits flush on
 * top of the card body instead of floating above a detached card.
 *
 * Usage: add `connected-tabs-card` to a `.card.custom-card` whose FIRST child is a
 * `.card-header` containing a `.nav-tabs` strip, e.g.
 *
 *   <div class="card custom-card connected-tabs-card">
 *       <div class="card-header">
 *           <ul class="nav nav-tabs"> ... </ul>
 *       </div>
 *       <div class="card-body"> ... </div>
 *   </div>
 *
 * Colours/borders use the theme CSS variables, so it adapts to light and dark mode.
 * Used by: SiteForge SiteDetail, Promotions PromotionEditor.
 */

.card.custom-card.connected-tabs-card > .card-header {
    padding: 0 .5rem;
    overflow-x: auto;
}

.connected-tabs-card .nav-tabs {
    border-bottom: 0;
    margin: 0;
    flex-wrap: nowrap;
    width: 100%;
}

.connected-tabs-card .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-weight: 500;
    padding: .85rem 1rem;
    white-space: nowrap;
    background: transparent;
}

.connected-tabs-card .nav-tabs .nav-link:hover {
    color: var(--primary-color);
}

.connected-tabs-card .nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}