/* ============================================================================
   COMPONENTS V2 — reusable UI primitives for the _LayoutV2 shell
   ----------------------------------------------------------------------------
   Opt-in classes. New markup should use these instead of bespoke per-page
   button / badge / card / modal / table CSS. Every value comes from a token in
   theme-v2.css — never hard-code a colour, radius, or shadow here.
   Loaded right after theme-v2.css (before layout-v2.css).
   BS3 3.2 keeps its own .btn / .form-control / .table / .modal — these use the
   sc- prefix and never restyle a bare Bootstrap class.
   ============================================================================ */

/* ============================ BUTTONS ==================================== */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    box-sizing: border-box;
    height: var(--btn-height);
    padding: var(--btn-padding);
    background: transparent;
    color: var(--color-link);
    border: 1px solid var(--color-link);
    border-radius: var(--btn-radius);
    font-family: inherit;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}
/* Default (no variant) = the original "view details" look: outlined accent, slides right + glows on hover */
.sc-btn:hover:not(:disabled):not(.is-disabled) {
    transform: translateX(4px);
    box-shadow: var(--shadow-primary);
}
.sc-btn i {
    font-size: 10px;
    transition: transform 0.3s;
}
.sc-btn:hover:not(:disabled):not(.is-disabled) i { transform: translateX(4px); }
.sc-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
    .sc-btn:disabled,
    .sc-btn.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
        border-color: var(--color-secondary);
    }

.sc-btn--primary {
/*    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-color: var(--color-button-primary-bg);*/
}
.sc-btn--primary:hover:not(:disabled) {
/*    background: var(--color-button-primary-hover);*/
    border-color: var(--color-button-primary-hover);
}

.sc-btn--secondary {
   /* background: transparent;
    color: var(--color-text-primary);*/
    border-color: var(--color-border-strong);
}
.sc-btn--secondary:hover:not(:disabled) {
    /*background: var(--color-surface-hover);*/
}

/* Selected state for toggle-style buttons (grid/list view switch etc.) — JS toggles .active / .is-active */
.sc-btn--secondary.active,
.sc-btn--secondary.is-active {
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-color: var(--color-button-primary-bg);
}

.sc-btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-primary);
}
.sc-btn--ghost:hover:not(:disabled) {
    color: var(--color-primary);
    background: var(--nav-accent-tint-bg);
}

.sc-btn--subtle {
    background: var(--tile-bg);
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}
.sc-btn--subtle:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sc-btn--danger {
    background: var(--color-danger);
    color: #ffffff;
    border-color: var(--color-danger);
}
.sc-btn--danger:hover:not(:disabled) {
    filter: brightness(1.05);
}

.sc-btn--sm { height: var(--btn-height-sm); padding: var(--btn-padding-sm); font-size: var(--btn-font-size); }
.sc-btn--lg { height: var(--btn-height-lg); padding: 0 24px; font-size: var(--font-size-md, 14px); }
.sc-btn--block { width: 100%; }

.sc-btn--icon {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--tile-bg);
    border-color: var(--color-primary);
    color: var(--color-text-secondary);
    font-size: var(--icon-sm);
}
.sc-btn--icon:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.sc-btn--icon.sc-btn--sm { width: var(--btn-icon-size-sm); height: var(--btn-icon-size-sm); }

/* ============================ BADGES / CHIPS ============================= */
.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--badge-padding);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    letter-spacing: var(--badge-tracking);
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--tint-neutral-bg);
    color: var(--tint-neutral-fg);
}
.sc-badge--primary { background: var(--tint-primary-bg); color: var(--tint-primary-fg); }
.sc-badge--success { background: var(--tint-success-bg); color: var(--tint-success-fg); }
.sc-badge--warning { background: var(--tint-warning-bg); color: var(--tint-warning-fg); }
.sc-badge--danger  { background: var(--tint-danger-bg);  color: var(--tint-danger-fg); }
.sc-badge--info    { background: var(--tint-info-bg);    color: var(--tint-info-fg); }
.sc-badge--neutral { background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }
.sc-badge--gold    { background: var(--tint-gold-bg);    color: var(--tint-gold-fg); }

.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    white-space: nowrap;
}
.sc-chip:hover { background: var(--color-surface-hover); }
.sc-chip i { color: var(--color-primary); }

/* ============================ CARDS ==================================== */
.sc-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    min-width: 0;
}
.sc-card--flush { box-shadow: none; }
.sc-card--tile {
    background: var(--tile-bg);
    border-color: var(--tile-border);
    border-radius: var(--tile-radius);
    box-shadow: none;
}
.sc-card__header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}
.sc-card__body { padding: var(--card-padding); }
.sc-card__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}

/* ============================ MODALS ================================== */
.sc-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    -webkit-backdrop-filter: var(--modal-overlay-blur);
    backdrop-filter: var(--modal-overlay-blur);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: var(--z-modal-overlay);
}
.sc-modal-overlay.show { opacity: 1; pointer-events: auto; }

.sc-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: var(--z-modal);
}
.sc-modal.show { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }

.sc-modal__content {
    background: var(--modal-bg);
    border: var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    padding: var(--modal-padding);
    max-width: var(--modal-max-width);
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-text-primary);
}
.sc-modal__header { margin-bottom: 24px; }
.sc-modal__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 26px;
    background: var(--tint-primary-bg);
    color: var(--tint-primary-fg);
}
.sc-modal__icon--success { background: var(--tint-success-bg); color: var(--tint-success-fg); }
.sc-modal__icon--gold    { background: var(--tint-gold-bg);    color: var(--tint-gold-fg); }
.sc-modal__icon--danger  { background: var(--tint-danger-bg);  color: var(--tint-danger-fg); }
.sc-modal__title {
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 6px;
}
.sc-modal__subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin: 0;
}
.sc-modal__body {
    width: 100%;
    margin-bottom: 24px;
}
.sc-modal__footer {
    width: 100%;
    display: flex;
    gap: 10px;
}
.sc-modal__footer .sc-btn { flex: 1; }

/* ============================ LOADING / SPINNER ========================== */
/* Generic spinner, usable inline (buttons, cards) or inside .sc-loading-overlay.
   Shown/hidden via showLoadingOverlay()/hideLoadingOverlay() in LoadingCommon.js
   - keep this the one spinner for new V2 async fetches instead of a bespoke one. */
.sc-spinner {
    --sc-spinner-size: 40px;
    width: var(--sc-spinner-size);
    height: var(--sc-spinner-size);
    border: 3px solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-circle);
    animation: sc-spin 0.8s linear infinite;
}
.sc-spinner--sm { --sc-spinner-size: 20px; border-width: 2px; }
.sc-spinner--lg { --sc-spinner-size: 56px; border-width: 4px; }

@keyframes sc-spin {
    to { transform: rotate(360deg); }
}

.sc-loading-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--modal-overlay-bg);
    -webkit-backdrop-filter: var(--modal-overlay-blur);
    backdrop-filter: var(--modal-overlay-blur);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: var(--z-loading-overlay);
}
.sc-loading-overlay.show { opacity: 1; pointer-events: auto; }
.sc-loading-overlay__text {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ============================ TABLES ================================== */
.sc-table {
    width: 100%;
    border-collapse: collapse;
}
.sc-table thead th {
    padding: 10px 12px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    color: var(--color-text-secondary);
    background: var(--color-table-header-bg);
    border-bottom: 1px solid var(--color-border);
}
.sc-table tbody tr { border-bottom: 1px solid var(--color-border-light); transition: background 0.15s; }
.sc-table tbody tr:hover { background: var(--color-table-row-hover); }
.sc-table tbody td { padding: 10px 12px; vertical-align: middle; }

/* ============================ ICONS ================================== */
.sc-icon { line-height: 1; }
.sc-icon--xs { font-size: var(--icon-xs); }
.sc-icon--sm { font-size: var(--icon-sm); }
.sc-icon--md { font-size: var(--icon-md); }
.sc-icon--lg { font-size: var(--icon-lg); }
.sc-icon--xl { font-size: var(--icon-xl); }
.sc-icon--accent { color: var(--color-primary); }

/* ============================ INPUTS ================================== */
.sc-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    background: var(--color-input-bg);
    color: var(--color-input-text);
    font-family: inherit;
    font-size: var(--font-size-md);
}
.sc-input::placeholder { color: var(--color-input-placeholder); }
.sc-input:focus {
    outline: none;
    border-color: var(--color-input-focus-border);
    box-shadow: var(--shadow-focus);
}
.sc-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.sc-field-error {
    margin-top: 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-danger);
}

/* ============================ TABS ==================================== */
/* Plain jQuery show/hide tabs (see Views/Tournament/EventDetails.cshtml's .ed-tab for the
   existing bespoke idiom this generalizes) - .sc-tab-content panes are toggled via
   .is-active, no framework. First introduced for the tournament Format Builder's
   Structure / Group Stage / Qualification / Knockout / Team Match / Rules sub-sections. */
.sc-tabs {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}
.sc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.sc-tab:hover { color: var(--color-text-primary); }
.sc-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.sc-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sc-tab .sc-badge { font-size: var(--font-size-xs); }
/* A knockout stage configured in the tournament format but not yet generated as a real
   TournamentStage (see bracket-v2.js buildKnockoutStageTabList) - dashed underline instead of
   the plain hidden state it used to get, so the tab is discoverable rather than absent. */
.sc-tab.is-pending { color: var(--color-text-secondary); border-bottom-style: dashed; border-bottom-color: var(--color-border); font-style: italic; }
.sc-tab.is-pending.is-active { color: var(--color-text-secondary); border-bottom-color: var(--color-text-secondary); }

.sc-tab-content { display: none; }
.sc-tab-content.is-active { display: block; }

/* Link variant: .sc-tabs whose tabs are <a> page links (per-tournament nav strips). */
a.sc-tab, a.sc-tab:hover, a.sc-tab:focus { text-decoration: none; }

/* Team-format tournament hub strip (Views/Shared/V2/_TeamTournamentTabs.cshtml) - sits above
   the page toolbar on EventDetails (admin) and Map (public) tabs. .sc-tabs already scrolls
   horizontally, which the 11-tab admin strip relies on at narrow widths. */
.sc-tournament-nav { margin: 0 0 var(--spacing-md); }

/* Vertical variant: stacked side nav instead of a horizontal row - used for the Format
   Builder's left-rail sub-section list. */
.sc-tabs--vertical {
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
    overflow-x: visible;
}
.sc-tabs--vertical .sc-tab {
    justify-content: flex-start;
    border-bottom: none;
    border-right: 2px solid transparent;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.sc-tabs--vertical .sc-tab.is-active {
    border-right-color: var(--color-primary);
    background: var(--nav-accent-tint-bg);
}

/* Bootstrap modals: clear the fixed site header so a dialog title is never cropped.
   Mirrors the padding-top in legacy theme.css (which _LayoutV2 does not load). */
.modal-dialog {
    padding-top: 100px;
}