/* App Templates preview — GLOBAL (not scoped) because the preview DOM is built by
   AppTemplatePreview.razor.js and injected into the host element, so it never carries a Blazor
   scope id. Mirrors the stakemate-mobile Fixture Details look using the --sm-tpl-* palette tokens
   (defined in theme.css). */

.sm-tpl-preview {
    display: flex;
    justify-content: center;
}

/* Phone-frame column. */
.sm-tpl-frame {
    width: 100%;
    max-width: 420px;
    background: var(--sm-tpl-preview-bg);
    border: 1px solid var(--sm-tpl-card-border);
    border-radius: var(--sm-radius-xl);
    padding: var(--sm-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-3);
    color: var(--sm-tpl-heading-text);
    font-family: var(--sm-font-family);
}

/* Menu tabs (top of the fixture-details hierarchy — All Markets / Bet Builder / …). */
.sm-tpl-menus {
    display: flex;
    gap: var(--sm-space-4);
    border-bottom: 1px solid var(--sm-tpl-divider);
    overflow-x: auto;
}

.sm-tpl-menu {
    border: none;
    background: transparent;
    padding: var(--sm-space-2) 0;
    font-size: var(--sm-font-size-base);
    font-weight: var(--sm-font-weight-600);
    color: var(--sm-tpl-muted-text);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.sm-tpl-menu--active {
    color: var(--sm-tpl-heading-text);
    border-bottom-color: var(--sm-tpl-odds-text);
}

/* Category chips. */
.sm-tpl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm-space-2);
}

.sm-tpl-chip {
    border: none;
    border-radius: var(--sm-radius-rounded);
    padding: var(--sm-space-2) var(--sm-space-4);
    background: var(--sm-tpl-chip-bg);
    color: var(--sm-tpl-chip-text);
    font-size: var(--sm-font-size-sm);
    font-weight: var(--sm-font-weight-600);
    cursor: pointer;
}

.sm-tpl-chip--active {
    background: var(--sm-tpl-chip-active-bg);
    color: var(--sm-tpl-chip-active-text);
}

/* Collapsible market-group card. */
.sm-tpl-card {
    border: 1px solid var(--sm-tpl-card-border);
    border-radius: var(--sm-radius-lg);
    overflow: hidden;
    background: var(--sm-tpl-preview-bg);
}

.sm-tpl-card--missing {
    border-style: dashed;
    color: var(--sm-color-error);
}

.sm-tpl-card__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sm-space-2);
    padding: var(--sm-space-4) var(--sm-space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--sm-tpl-heading-text);
}

.sm-tpl-card__titlewrap {
    display: flex;
    align-items: center;
    gap: var(--sm-space-2);
}

.sm-tpl-card__title {
    font-size: var(--sm-font-size-lg);
    font-weight: var(--sm-font-weight-700);
}

.sm-tpl-card__chevron {
    color: var(--sm-tpl-muted-text);
    transition: transform var(--sm-transition-fast);
}

.sm-tpl-card--open .sm-tpl-card__chevron {
    transform: rotate(180deg);
}

.sm-tpl-card__body {
    padding: 0 var(--sm-space-4) var(--sm-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-3);
}

.sm-tpl-card__label {
    font-size: var(--sm-font-size-sm);
    color: var(--sm-tpl-muted-text);
    margin-top: var(--sm-space-2);
}

/* Tags. */
.sm-tpl-tag {
    font-size: 10px;
    font-weight: var(--sm-font-weight-700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px var(--sm-space-2);
    border-radius: var(--sm-radius-sm);
}

.sm-tpl-tag--earlypayout {
    background: var(--sm-tpl-early-payout-bg);
    color: var(--sm-tpl-early-payout-text);
}

.sm-tpl-tag--supersub {
    background: var(--sm-tpl-super-sub-bg);
    color: var(--sm-tpl-super-sub-text);
}

/* Rows + odds cells. */
.sm-tpl-defaultrow,
.sm-tpl-repeat,
.sm-tpl-grouped {
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-2);
}

.sm-tpl-row {
    display: flex;
    align-items: stretch;
    gap: var(--sm-space-2);
}

.sm-tpl-row__title {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    font-size: var(--sm-font-size-base);
    font-weight: var(--sm-font-weight-500);
    color: var(--sm-tpl-heading-text);
}

.sm-tpl-cells {
    display: flex;
    gap: var(--sm-space-2);
    flex: 1 1 auto;
}

.sm-tpl-row--fill .sm-tpl-cells {
    width: 100%;
}

.sm-tpl-cell {
    flex: 1 1 0;
    min-height: 48px;
    border-radius: var(--sm-radius-md);
    background: var(--sm-tpl-odds-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--sm-space-1);
}

.sm-tpl-cell--empty {
    background: var(--sm-tpl-odds-empty-bg);
}

.sm-tpl-cell--sample {
    outline: 1px dashed var(--sm-tpl-card-border);
    outline-offset: -1px;
}

.sm-tpl-cell__label {
    font-size: 11px;
    color: var(--sm-tpl-muted-text);
}

.sm-tpl-cell__odds {
    font-size: var(--sm-font-size-base);
    font-weight: var(--sm-font-weight-700);
    color: var(--sm-tpl-odds-text);
}

/* Headers row above cells. */
.sm-tpl-headers {
    display: flex;
    gap: var(--sm-space-2);
}

.sm-tpl-headers__spacer {
    flex: 0 0 40%;
}

.sm-tpl-headers .sm-tpl-cells {
    flex: 1 1 auto;
}

.sm-tpl-header {
    flex: 1 1 0;
    text-align: center;
    font-size: var(--sm-font-size-sm);
    color: var(--sm-tpl-muted-text);
    font-weight: var(--sm-font-weight-600);
}

/* Grouped-repeat sub-tabs. */
.sm-tpl-subtabs {
    display: flex;
    gap: var(--sm-space-1);
    background: var(--sm-tpl-chip-bg);
    border-radius: var(--sm-radius-md);
    padding: 2px;
}

.sm-tpl-subtab {
    flex: 1 1 0;
    border: none;
    background: transparent;
    border-radius: var(--sm-radius-sm);
    padding: var(--sm-space-2);
    font-size: var(--sm-font-size-sm);
    font-weight: var(--sm-font-weight-600);
    color: var(--sm-tpl-muted-text);
    cursor: pointer;
}

.sm-tpl-subtab--active {
    background: var(--sm-tpl-preview-bg);
    color: var(--sm-tpl-heading-text);
    box-shadow: 0 1px 3px var(--sm-color-shadow);
}

.sm-tpl-grouped__body {
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-2);
    margin-top: var(--sm-space-2);
}

.sm-tpl-empty {
    padding: var(--sm-space-5);
    text-align: center;
    color: var(--sm-tpl-muted-text);
}

/* Betslip preview — mirrors the app's betslip selection card (bold label, secondary, category + odds). */
.sm-bts-preview {
    display: flex;
    justify-content: center;
}

.sm-bts-frame {
    width: 100%;
    max-width: 420px;
    background: var(--sm-tpl-preview-bg);
    border: 1px solid var(--sm-tpl-card-border);
    border-radius: var(--sm-radius-xl);
    padding: var(--sm-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-2);
    color: var(--sm-tpl-heading-text);
    font-family: var(--sm-font-family);
}

.sm-bts-title {
    font-size: var(--sm-font-size-sm);
    color: var(--sm-tpl-muted-text);
    font-weight: var(--sm-font-weight-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sm-bts-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sm-space-2);
    border: 1px solid var(--sm-tpl-card-border);
    border-radius: var(--sm-radius-md);
    padding: var(--sm-space-3);
}

.sm-bts-card__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sm-bts-card__label {
    font-size: var(--sm-font-size-base);
    font-weight: var(--sm-font-weight-700);
    color: var(--sm-tpl-heading-text);
}

.sm-bts-card__secondary,
.sm-bts-card__category {
    font-size: var(--sm-font-size-sm);
    color: var(--sm-tpl-muted-text);
}