/* ===================================================
   BOOTSTRAP TABS STYLING
   Consolidated file for both horizontal and vertical tab layouts.
   Extracted from custom.css + new vertical-tabs variant.
   Load this file AFTER Bootstrap and theme CSS.
   =================================================== */


/* =========================
   HORIZONTAL TABS (Default)
   ========================= */

/* Tab content panel footer inside modals */
.modal footer,
.modal .footer,
.tab-content .panel-footer {
    margin: 0px;
}

/* Tab navigation container - flexbox row layout */
.nav-tabs {
    margin: 0;
    font-size: 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-content: center;
    border-top: 1px solid #ddd;
    /* border-left: 1px solid #ddd; */
    /* border-right: 1px solid #ddd; */
    padding-left: .5px;
    padding-right: 1px;
    padding-top: 0px;
}

/* Tab items - flex children with equal width */
.nav-tabs>li {
    flex: 1;
    text-align: center;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #ffffff;
    color: #0d6efd;
    border-bottom: 1px solid #ddd;
    margin-top: -0.1px;
}

/* Tab links */
.nav-tabs>li a {
    border-radius: 0px;
    border: 0px !important;
    background: none !important;
    color: inherit !important;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pane and nested panel elements */
.tab-pane,
.tab-pane .panel,
.tab-pane .panel-heading,
.tab-pane .panel-body,
.tab-pane .panel-footer {
    background: #ffffff;
}

/* Active tab */
.nav-tabs>li.active {
    background: #ffffff;
    border-bottom: 1px solid #fff;  /* white bottom border merges tab with content */
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.nav-tabs>li.active a {
    border: 0px;
}

/* First/last tab border rules */
.nav-tabs>li:not(.active):first-child {
    border-left: 1px solid #ddd;
}

.nav-tabs>li.active:first-child {
    border-left: 0px;
}

.nav-tabs>li:not(.active):last-child {
    border-right: 1px solid #ddd;
}

.nav-tabs>li.active:last-child {
    border-right: 0px;
}

/* Hover state for inactive tabs */
.nav-tabs>li:not(.active):hover {
    /* background: #efeeee; */
    background: #f0f2f5;
}

/* Tab content and pane spacing */
.tab-content {
    padding: 0px;
}

.tab-pane {
    padding: 15px;
}

/* Desktop: sticky behavior is handled by custom.js.php via addStyle() injection */
@media all and (min-width: 768px) {
    /* .tab-pane {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        overflow-x: hidden;
    } */

    /* make the nav tabs sticky */
    /* .nav-tabs {
        position: sticky;
        top: 0;
        z-index: 1;
    } */
}


/* Mobile: hide tabs by default; the JS accordion conversion takes over.
   Tabs with .keep-as-tabs-on-mobile on the ul.nav-tabs are excluded. */
@media all and (max-width: 767px) {
    .nav.nav-tabs:not(.keep-as-tabs-on-mobile),
    .tab-content:not(.keep-as-tabs-on-mobile) {
        visibility: hidden;
    }
}


/* ========================
   VERTICAL TABS
   Usage: add class "vertical-tabs" to the .tabs wrapper div
   Example: <div class="tabs tabs-primary vertical-tabs">

   Layout: nav column fixed on LEFT, content fills RIGHT
   On mobile: reverts to standard accordion (same as horizontal tabs)
   ======================== */

/* Parent wrapper becomes a flex row container */
.tabs.vertical-tabs {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* Nav column: vertical stack, fixed width, separator on the right */
.tabs.vertical-tabs > .nav.nav-tabs {
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    align-self: flex-start;       /* REQUIRED: allows position:sticky to work in a flex parent */
    width: 220px;
    min-width: 140px;
    flex-shrink: 0;
    border-top: 0;                /* remove horizontal top border */
    /* border-right: 1px solid #ddd; vertical separator between nav and content */
    border-bottom: 0;
    padding: 0;
    font-size: inherit;           /* reset the font-size:0 set by horizontal layout */
}

/* Tab items: full-width, stacked, left-aligned */
.tabs.vertical-tabs > .nav.nav-tabs > li {
    flex: none;                   /* remove equal-width flex stretching */
    width: 100%;
    text-align: left;
    white-space: normal;          /* allow wrapping for longer tab labels */
    overflow: visible;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    /* border-right: 0;              the nav container's border handles the separator */
    border-left: 0;
    margin-top: 0;
}

/* Remove horizontal-specific first/last-child border overrides */
.tabs.vertical-tabs > .nav.nav-tabs > li:not(.active):first-child,
.tabs.vertical-tabs > .nav.nav-tabs > li:not(.active):last-child {
    border-left: 0;
    /* border-right: 0; */
}

/* Active vertical tab:
   - Left accent bar as visual indicator
   - White right border "breaks through" the nav's right separator
   - Negative right margin extends the tab 1px to fully cover the separator line */
.tabs.vertical-tabs > .nav.nav-tabs > li.active {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;    /* keep bottom border visible */
    border-left: 3px solid #0d6efd;   /* colored left accent bar */
    border-right: 0px;     /* give a flowing-into-right effect */
    margin-right: -1px;               /* extend 1px right to overlap the separator */
    position: relative;
    z-index: 1;
    background: #fff;
}

/* Override active first/last child rules inherited from horizontal layout */
.tabs.vertical-tabs > .nav.nav-tabs > li.active:first-child {
    border-left: 3px solid #0d6efd;
}

.tabs.vertical-tabs > .nav.nav-tabs > li.active:last-child {
    border-right: 1px solid #fff;
}

/* Links inside vertical tab items */
.tabs.vertical-tabs > .nav.nav-tabs > li > a {
    text-align: left;
    padding: 12px 15px;
    white-space: normal;
    display: block;
}

/* Content area: fills remaining horizontal space */
.tabs.vertical-tabs > .tab-content {
    flex: 1;
    min-width: 0;  /* prevent flex overflow when content is extra-wide */
}

.tabs.vertical-tabs>.tab-content .tab-pane.active{
    min-height: 80vh;
}

/* Mobile: revert flex layout so accordion renders correctly.
   The JS accordion conversion (.tabs.vertical-tabs contents are replaced)
   needs a block parent to render properly. */
@media (max-width: 767px) {
    .tabs.vertical-tabs {
        display: block;
    }
}