/* public_html/css/app-tabs.css
   Canonical site-wide tab bar: each tab is a bordered, rounded-top card.
   Inactive tabs sit filled with a light grey; the active tab is white with
   a colored top accent border.

   Works as a drop-in replacement for any existing tab implementation --
   Bootstrap's native tab JS (data-bs-toggle="tab") or hand-rolled JS that
   toggles .active -- since every implementation already relies on an
   .active class marking the current tab, regardless of what switches it.

   Usage: <div class="app-tabs" role="tablist"> ... <button/a class="app-tab-btn active">Label</button> ... </div>
   Each portal template defines --app-tab-accent to its own primary color
   (e.g. teacher blue, student green, parent teal) so the active tab's
   top border and label color match that portal without this file
   hardcoding any of them. */

.app-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid #dee2e6;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.app-tabs .app-tab-btn {
    display: inline-block;
    border: 1px solid #dee2e6;
    border-top: 3px solid transparent;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #f4f5f7;
    color: #495057;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: -1px;
}

.app-tabs .app-tab-btn:hover {
    color: var(--app-tab-accent, #0088cc);
    text-decoration: none;
}

.app-tabs .app-tab-btn.active,
.app-tabs .app-tab-btn.is-active,
.app-tabs .app-tab-btn.active-tab {
    color: var(--app-tab-accent, #0088cc);
    font-weight: 700;
    background: #fff;
    border-color: #dee2e6;
    border-top-color: var(--app-tab-accent, #0088cc);
    border-bottom-color: #fff;
}

.app-tabs .app-tab-btn:disabled,
.app-tabs .app-tab-btn.disabled {
    color: #adb5bd;
    cursor: not-allowed;
    background: #f4f5f7;
}