/* ==========================================================
   VRS Tabs
   Shared tab styling for modernized VRS pages.
   ========================================================== */

:root {
    --vrs-tab-bg: #315180;
    --vrs-tab-bg-top: #3a5d8e;
    --vrs-tab-bg-bottom: #29466f;
    --vrs-tab-bg-hover: #3d6298;
    --vrs-tab-bg-disabled: #6f7784;
    --vrs-tab-text: #ffffff;
    --vrs-tab-border: rgba(255, 255, 255, 0.78);

    --vrs-tab-gold-dark: #8f6908;
    --vrs-tab-gold-mid: #c89b1c;
    --vrs-tab-gold-light: #f0d15a;
    --vrs-tab-gold-end: #b18410;

    --vrs-tab-counter-bg: #e31b23;
    --vrs-tab-counter-text: #ffffff;
}

/* Main tab container */
.vrs-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Optional explicit row wrapper */
.vrs-tabs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

/* Individual tab */
.vrs-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;

    min-width: 120px;
    min-height: 54px;
    padding: 0.7rem 0.9rem;

    margin-right: -1px;
    margin-bottom: -1px;

    border: 1px solid var(--vrs-tab-border);
    border-radius: 0;

    background:
            linear-gradient(
                    to bottom,
                    var(--vrs-tab-bg-top) 0%,
                    var(--vrs-tab-bg) 38%,
                    var(--vrs-tab-bg-bottom) 100%
            );

    color: var(--vrs-tab-text);

    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    transition:
            background-color 0.15s ease,
            filter 0.15s ease;
}

.vrs-tab:hover {
    background:
            linear-gradient(
                    to bottom,
                    #486d9f 0%,
                    var(--vrs-tab-bg-hover) 40%,
                    #335585 100%
            );
    color: var(--vrs-tab-text);
    text-decoration: none;
}

.vrs-tab:focus-visible {
    z-index: 2;
    outline: 2px solid #ffffff;
    outline-offset: -3px;
}

/* Active tab with layered CSS foil */
.vrs-tab.active,
.vrs-tab.is-active,
.vrs-tab[aria-selected="true"] {
    background:
            linear-gradient(
                    125deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.04) 12%,
                    rgba(255, 255, 255, 0.34) 20%,
                    rgba(255, 255, 255, 0.08) 29%,
                    transparent 38%
            ),
            linear-gradient(
                    125deg,
                    transparent 24%,
                    rgba(255, 244, 164, 0.10) 34%,
                    rgba(255, 255, 255, 0.48) 45%,
                    rgba(255, 245, 179, 0.11) 56%,
                    transparent 66%
            ),
            linear-gradient(
                    125deg,
                    transparent 52%,
                    rgba(255, 255, 255, 0.05) 62%,
                    rgba(255, 255, 255, 0.30) 72%,
                    rgba(255, 255, 255, 0.06) 82%,
                    transparent 92%
            ),
            linear-gradient(
                    135deg,
                    var(--vrs-tab-gold-dark) 0%,
                    var(--vrs-tab-gold-mid) 24%,
                    var(--vrs-tab-gold-light) 48%,
                    var(--vrs-tab-gold-end) 72%,
                    #d2aa2a 100%
            );

    color: var(--vrs-tab-text);
    font-weight: 600;
}

/* Disabled tab */
.vrs-tab.disabled,
.vrs-tab:disabled,
.vrs-tab[aria-disabled="true"] {
    background: var(--vrs-tab-bg-disabled);
    cursor: default;
    opacity: 0.65;
    pointer-events: none;
}

/* Optional icon */
.vrs-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Optional text wrapper */
.vrs-tab-label {
    display: inline-block;
}

/* Red notification counter */
.vrs-tab-counter {
    position: relative;
    top: -0.55em;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    margin-left: -0.18rem;

    border-radius: 999px;
    background: var(--vrs-tab-counter-bg);
    color: var(--vrs-tab-counter-text);

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

/* Hide counters explicitly marked empty */
.vrs-tab-counter:empty,
.vrs-tab-counter[data-count="0"][data-hide-zero="true"] {
    display: none;
}

/* Compact tabs */
.vrs-tabs.compact .vrs-tab {
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}

/* Tabs that share available width evenly */
.vrs-tabs.equal-width .vrs-tab {
    flex: 1 1 120px;
}

/* Tabs that retain content-based widths */
.vrs-tabs.auto-width .vrs-tab {
    flex: 0 0 auto;
}

/* Optional second-level tabs */
.vrs-subtabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

.vrs-subtab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;

    min-height: 42px;
    padding: 0.55rem 0.8rem;

    margin-right: -1px;
    margin-bottom: -1px;

    border: 1px solid var(--vrs-tab-border);
    border-radius: 0;

    background:
            linear-gradient(
                    to bottom,
                    #355786 0%,
                    #294d7d 42%,
                    #23436f 100%
            );

    color: #ffffff;

    font: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.vrs-subtab:hover {
    background:
            linear-gradient(
                    to bottom,
                    #426a9d 0%,
                    #365f92 42%,
                    #2e527f 100%
            );
    color: #ffffff;
}

.vrs-subtab.active,
.vrs-subtab.is-active,
.vrs-subtab[aria-selected="true"] {
    background:
            linear-gradient(
                    125deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.05) 18%,
                    rgba(255, 255, 255, 0.34) 27%,
                    rgba(255, 255, 255, 0.07) 36%,
                    transparent 45%
            ),
            linear-gradient(
                    125deg,
                    transparent 38%,
                    rgba(255, 255, 255, 0.08) 48%,
                    rgba(255, 255, 255, 0.38) 57%,
                    rgba(255, 255, 255, 0.06) 67%,
                    transparent 77%
            ),
            linear-gradient(
                    135deg,
                    var(--vrs-tab-gold-dark) 0%,
                    var(--vrs-tab-gold-mid) 26%,
                    var(--vrs-tab-gold-light) 50%,
                    var(--vrs-tab-gold-end) 76%,
                    #d2aa2a 100%
            );

    color: #ffffff;
    font-weight: 600;
}

/* Mobile behavior */
@media (max-width: 767.98px) {
    .vrs-tab {
        flex: 1 1 50%;
        min-width: 0;
        min-height: 48px;
        padding: 0.6rem 0.45rem;
        white-space: normal;
    }

    .vrs-tabs.auto-width .vrs-tab {
        flex: 1 1 50%;
    }

    .vrs-subtab {
        flex: 1 1 50%;
        white-space: normal;
    }
}

@media (max-width: 479.98px) {
    .vrs-tab,
    .vrs-tabs.auto-width .vrs-tab,
    .vrs-subtab {
        flex-basis: 100%;
    }
}

/* Print */
@media print {
    .vrs-tabs,
    .vrs-subtabs {
        display: none !important;
    }
}