/**
 * team-standing-dashboard.css
 * RMZ Sports — Team Standing Dashboard
 * Fase 1: Estilo dashboard aplicado a vista de equipo (SSR)
 *
 * Uso en blade:
 *   @push('styles')
 *       <link rel="stylesheet" href="{{ asset('assets/css/team-standing-dashboard.css') }}">
 *   @endpush
 */

/* ════════════════════════════════════════════════════════════════
   1. CSS VARIABLES
════════════════════════════════════════════════════════════════ */
:root {
    --rmz-bg:         #ffffff;
    --rmz-surface:    #ffffff;
    --rmz-border:     #d1d5da;
    --rmz-accent:     #e67e22;
    --rmz-accent-2:   #f39c12;
    --rmz-text:       #31404b;
    --rmz-muted:      #8b949e;
    --rmz-green:      #2ea043;
    --rmz-red:        #da3633;
    --rmz-blue:       #388bfd;
    --font-main:      'Barlow Condensed', 'Barlow', sans-serif;
    --font-mono:      'JetBrains Mono', monospace;
    --radius:         10px;
    --shadow:         0 4px 24px rgba(0,0,0,.12);
}

/* ════════════════════════════════════════════════════════════════
   2. DASHBOARD WRAPPER
════════════════════════════════════════════════════════════════ */
.rmz-team-dashboard {
    color: var(--rmz-text);
    font-family: var(--font-main);
    min-height: 60vh;
    padding: 0 0 2rem;
    border-radius: var(--radius);
    margin-top: .75rem;
}

/* ════════════════════════════════════════════════════════════════
   3. SUMMARY CARDS (KPI strip)
════════════════════════════════════════════════════════════════ */
.rmz-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.rmz-s-card {
    background: var(--rmz-surface);
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    padding: .9rem 1rem .85rem;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.rmz-s-card:hover {
    border-color: var(--rmz-accent);
    box-shadow: var(--shadow);
}

.rmz-s-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, var(--rmz-accent));
}

.rmz-s-card .s-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rmz-muted);
    margin-bottom: .2rem;
}

.rmz-s-card .s-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--rmz-accent);
}

.rmz-s-card .s-sub {
    font-size: .74rem;
    color: var(--rmz-muted);
    margin-top: .15rem;
}

/* ════════════════════════════════════════════════════════════════
   4. MAIN TABS (nivel 1)
════════════════════════════════════════════════════════════════ */
.rmz-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--rmz-border);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 0;
}

.rmz-tabs::-webkit-scrollbar { display: none; }

.rmz-tab {
    padding: .65rem 1.1rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--rmz-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    font-family: var(--font-main);
}

.rmz-tab:hover,
.rmz-tab.active {
    color: var(--rmz-accent);
    border-bottom-color: var(--rmz-accent);
}

/* ════════════════════════════════════════════════════════════════
   5. SUB-TABS (nivel 2 — dentro de panels)
════════════════════════════════════════════════════════════════ */
.rmz-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .9rem 0 .75rem;
}

.rmz-subtab {
    padding: .28rem .85rem;
    font-size: .76rem;
    font-weight: 700;
    border: 1.5px solid var(--rmz-border);
    border-radius: 20px;
    background: transparent;
    color: var(--rmz-muted);
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-main);
}

.rmz-subtab.active,
.rmz-subtab:hover {
    border-color: var(--rmz-accent);
    color: var(--rmz-accent);
    background: rgba(230,126,34,.06);
}

/* ════════════════════════════════════════════════════════════════
   6. TAB PANELS
════════════════════════════════════════════════════════════════ */
.rmz-tab-panel {
    display: none;
    padding: 1rem 0 0;
    animation: fadeInPanel .18s ease;
}

.rmz-tab-panel.active { display: block; }

.rmz-sub-panel {
    display: none;
    animation: fadeInPanel .15s ease;
}

.rmz-sub-panel.active { display: block; }

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   7. CARDS
════════════════════════════════════════════════════════════════ */
.rmz-card {
    background: var(--rmz-surface);
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.rmz-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--rmz-border);
}

.rmz-card__header h4,
.rmz-card__header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rmz-text);
    font-family: var(--font-main);
}

.rmz-card__content {
    padding: 0;
}

.rmz-card__footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--rmz-border);
    font-size: .82rem;
    color: var(--rmz-muted);
}

/* ════════════════════════════════════════════════════════════════
   8. TABLES
════════════════════════════════════════════════════════════════ */
.rmz-table-wrap {
    overflow-x: auto;
    max-height: 580px;
    overflow-y: auto;
}

.rmz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    font-family: var(--font-main);
}

.rmz-table thead th {
    background: var(--rmz-surface);
    color: var(--rmz-muted);
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .65rem .75rem;
    border-bottom: 2px solid var(--rmz-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.rmz-table tbody tr {
    border-bottom: 1px solid var(--rmz-border);
    transition: background .1s;
}

/* Zebra striping */
.rmz-table tbody tr:nth-child(odd)  { background: #ffffff; }
.rmz-table tbody tr:nth-child(even) { background: rgba(0,0,0,.02); }
.rmz-table tbody tr:hover           { background: rgba(230,126,34,.05) !important; }

.rmz-table tbody td {
    padding: .55rem .75rem;
    vertical-align: middle;
    color: var(--rmz-text);
}

/* Fila resaltada (equipo actual) */
.rmz-table tbody tr.team-standing_select {
    background: rgba(230,126,34,.08) !important;
    border-left: 3px solid var(--rmz-accent);
}

/* ════════════════════════════════════════════════════════════════
   9. TEAM META
════════════════════════════════════════════════════════════════ */
.team-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.team-meta__logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin: 0;
}

.team-meta__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-meta__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.team-meta__name {
    margin: 0;
    font-size: .87rem;
    font-weight: 700;
    color: var(--rmz-text);
    line-height: 1.2;
}

.team-meta__place {
    font-size: .7rem;
    color: var(--rmz-muted);
}

/* ════════════════════════════════════════════════════════════════
   10. RANK BADGE
════════════════════════════════════════════════════════════════ */
.rmz-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 800;
    font-size: .78rem;
    background: var(--rmz-surface);
    border: 1.5px solid var(--rmz-border);
    color: var(--rmz-muted);
    flex-shrink: 0;
}

.rmz-rank.r-1 { background: var(--rmz-accent);  border-color: var(--rmz-accent);  color: #fff; }
.rmz-rank.r-2 { background: #8b949e;             border-color: #8b949e;            color: #fff; }
.rmz-rank.r-3 { background: #cd7f32;             border-color: #cd7f32;            color: #fff; }

/* ════════════════════════════════════════════════════════════════
   11. COLOR RANK CELLS
════════════════════════════════════════════════════════════════ */
.rmz-rank-cell {
    font-weight: 700;
    text-align: center;
    color: var(--rmz-text);
}

/* ════════════════════════════════════════════════════════════════
   12. TREND INDICATORS
════════════════════════════════════════════════════════════════ */
.trend-up   { color: var(--rmz-green) !important; font-weight: 700; }
.trend-down { color: var(--rmz-red)   !important; font-weight: 700; }
.trend-flat { color: var(--rmz-muted); }

.rmz-diff-pos { color: var(--rmz-green); font-weight: 700; }
.rmz-diff-neg { color: var(--rmz-red);   font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   13. FORM DOTS (L10, rachas)
════════════════════════════════════════════════════════════════ */
.rmz-form-dots {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-wrap: wrap;
}

.rmz-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.rmz-dot.win  { background: var(--rmz-green); }
.rmz-dot.loss { background: var(--rmz-red); }

.rmz-dot-sm {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* ════════════════════════════════════════════════════════════════
   14. STATUS / BADGE
════════════════════════════════════════════════════════════════ */
.rmz-badge {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--font-main);
    white-space: nowrap;
}

.rmz-badge-success { background: rgba(46,160,67,.12);  color: var(--rmz-green); }
.rmz-badge-danger  { background: rgba(218,54,51,.1);   color: var(--rmz-red); }
.rmz-badge-warning { background: rgba(230,126,34,.12); color: var(--rmz-accent); }
.rmz-badge-muted   { background: rgba(0,0,0,.04); color: var(--rmz-muted); border: 1px solid var(--rmz-border); }
.rmz-badge-info    { background: rgba(56,139,253,.1);  color: var(--rmz-blue); }

/* ════════════════════════════════════════════════════════════════
   15. PLAYOFF INDICATOR
════════════════════════════════════════════════════════════════ */
.rmz-playoff-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--rmz-green);
    border-radius: 50%;
    margin-right: 6px;
    animation: rmz-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes rmz-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* Playoff line separator */
.rmz-playoff-line td {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.rmz-playoff-separator {
    border-top: 2px dashed var(--rmz-green);
    position: relative;
    margin: 8px 0;
}

.rmz-playoff-separator-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 12px;
    color: var(--rmz-green);
    font-weight: 700;
    font-size: .75rem;
    white-space: nowrap;
    font-family: var(--font-main);
}

/* ════════════════════════════════════════════════════════════════
   16. TREND BARS (panel tendencias)
════════════════════════════════════════════════════════════════ */
.rmz-trend-bar-wrap {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
}

.rmz-trend-bar-bg {
    flex: 1;
    height: 7px;
    background: var(--rmz-border);
    border-radius: 4px;
    overflow: hidden;
}

.rmz-trend-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease;
}

.rmz-trend-bar.pos { background: var(--rmz-green); }
.rmz-trend-bar.neg { background: var(--rmz-red); }

.rmz-trend-val {
    min-width: 44px;
    text-align: right;
    font-size: .82rem;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   17. STAT BOX (team general stats)
════════════════════════════════════════════════════════════════ */
.rmz-stat-box {
    background: var(--rmz-surface);
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    transition: border-color .2s;
}

.rmz-stat-box:hover { border-color: var(--rmz-accent); }

.rmz-stat-box h5,
.rmz-stat-box h6 {
    margin: 0 0 .25rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--rmz-accent);
}

.rmz-stat-box p {
    margin: 0;
    font-size: .75rem;
    color: var(--rmz-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ════════════════════════════════════════════════════════════════
   18. PERFORMANCE BOX (vs oponentes)
════════════════════════════════════════════════════════════════ */
.rmz-perf-box {
    background: var(--rmz-surface);
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    height: 100%;
}

/* ════════════════════════════════════════════════════════════════
   19. MATCH HISTORY ROWS
════════════════════════════════════════════════════════════════ */
.rmz-opponent-section {
    margin-bottom: 1.5rem;
}

.rmz-opponent-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .65rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--rmz-border);
}

.rmz-opponent-header h5 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   20. H2H MATRIX
════════════════════════════════════════════════════════════════ */
.rmz-h2h-table {
    border-collapse: separate;
    border-spacing: 0;
}

.rmz-h2h-table td,
.rmz-h2h-table th {
    border-right: 1px solid var(--rmz-border);
    border-bottom: 1px solid var(--rmz-border);
    padding: .45rem .6rem;
    font-size: .8rem;
    text-align: center;
}

.rmz-h2h-table thead th {
    background: #f8f9fa;
    color: var(--rmz-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.rmz-h2h-table .h2h-self {
    background: rgba(230,126,34,.06) !important;
}

/* ════════════════════════════════════════════════════════════════
   21. CHART CARDS
════════════════════════════════════════════════════════════════ */
.rmz-chart-card {
    background: var(--rmz-surface);
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    margin-bottom: 1.25rem;
}

.rmz-chart-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rmz-muted);
    margin-bottom: .75rem;
    font-family: var(--font-main);
    font-weight: 700;
    flex-shrink: 0;
}

.rmz-chart-card canvas {
    flex: 1;
    width: 100% !important;
    min-height: 240px;
}

/* ════════════════════════════════════════════════════════════════
   22. LOADING OVERLAY
════════════════════════════════════════════════════════════════ */
.rmz-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.rmz-loading.active { display: flex; }

.rmz-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--rmz-border);
    border-top-color: var(--rmz-accent);
    border-radius: 50%;
    animation: rmz-spin .7s linear infinite;
}

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

/* ════════════════════════════════════════════════════════════════
   23. GLOSSARY
════════════════════════════════════════════════════════════════ */
.rmz-glossary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: .75rem 1.25rem 1rem;
    font-size: .8rem;
}

.rmz-glossary__item {
    color: var(--rmz-muted);
}

.rmz-glossary__abbr {
    font-weight: 700;
    color: var(--rmz-text);
    margin-right: .25rem;
}

/* ════════════════════════════════════════════════════════════════
   24. LEGEND
════════════════════════════════════════════════════════════════ */
.rmz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: .75rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid var(--rmz-border);
    font-size: .78rem;
    color: var(--rmz-muted);
}

.rmz-legend__item {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ════════════════════════════════════════════════════════════════
   25. SCENARIOS PANEL (reutilizado del league dashboard)
════════════════════════════════════════════════════════════════ */
#ts-scenarios-content .panel { padding: 1rem 0; }

#ts-scenarios-content .section-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rmz-muted);
    margin-bottom: .5rem;
}

#ts-scenarios-content .standings-wrap {
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

#ts-scenarios-content .standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    font-family: var(--font-main);
}

#ts-scenarios-content .standings-table thead th {
    padding: .45rem .7rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--rmz-muted);
    border-bottom: 2px solid var(--rmz-border);
    background: #f8f9fa;
    white-space: nowrap;
    text-transform: uppercase;
}

#ts-scenarios-content .standings-table thead th:not(:first-child) { text-align: center; }
#ts-scenarios-content .standings-table tbody td {
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--rmz-border);
    color: var(--rmz-text);
    vertical-align: middle;
}
#ts-scenarios-content .standings-table tbody tr:last-child td { border-bottom: none; }
#ts-scenarios-content .standings-table tbody td:not(:first-child):not(:nth-child(2)) { text-align: center; }
#ts-scenarios-content .standings-table tbody tr:hover { background: rgba(230,126,34,.04); }
#ts-scenarios-content .standings-table tbody tr:nth-child(odd)  { background: #fff; }
#ts-scenarios-content .standings-table tbody tr:nth-child(even) { background: rgba(0,0,0,.02); }
#ts-scenarios-content .standings-table tbody tr:hover           { background: rgba(230,126,34,.05) !important; }

#ts-scenarios-content .rank-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: .72rem; font-weight: 600;
    border: 1px solid var(--rmz-border);
    color: var(--rmz-text); background: #fff;
}
#ts-scenarios-content .rank-1 { background: #f4b942; border-color: #e0a030; color: #5a3800; }
#ts-scenarios-content .rank-3 { background: #cd7f32; border-color: #cd7f32; color: #fff; }

#ts-scenarios-content .diff-pos { color: var(--rmz-green); font-weight: 700; }
#ts-scenarios-content .diff-neg { color: var(--rmz-red);   font-weight: 700; }
#ts-scenarios-content .games-left { font-size: .72rem; color: var(--rmz-muted); font-weight: 500; }

#ts-scenarios-content .tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--rmz-border);
    margin-bottom: 1rem;
    overflow-x: auto; scrollbar-width: none;
}
#ts-scenarios-content .tabs::-webkit-scrollbar { display: none; }
#ts-scenarios-content .tab-btn {
    padding: .45rem 1rem; font-size: .82rem; font-weight: 600;
    border: none; background: transparent;
    color: var(--rmz-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; transition: color .15s; white-space: nowrap;
    font-family: var(--font-main);
}
#ts-scenarios-content .tab-btn.active,
#ts-scenarios-content .tab-btn:hover { color: var(--rmz-accent); border-bottom-color: var(--rmz-accent); }
#ts-scenarios-content .tab-content { display: none; }
#ts-scenarios-content .tab-content.active { display: block; }

#ts-scenarios-content .h2h-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    gap: .75rem; margin-bottom: 1.25rem;
}
#ts-scenarios-content .h2h-card {
    border: 1px solid var(--rmz-border); border-radius: 8px;
    padding: .75rem; background: #fff;
}
#ts-scenarios-content .h2h-header {
    font-size: .85rem; font-weight: 600; color: var(--rmz-text);
    margin-bottom: .5rem; border-bottom: 1px solid var(--rmz-border); padding-bottom: .4rem;
}
#ts-scenarios-content .h2h-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem 0; font-size: .78rem; color: var(--rmz-muted);
    border-bottom: 1px solid rgba(0,0,0,.04);
}
#ts-scenarios-content .h2h-row:last-child { border-bottom: none; }
#ts-scenarios-content .h2h-badge { font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: 10px; }
#ts-scenarios-content .badge-adv { background: rgba(46,160,67,.12); color: var(--rmz-green); }
#ts-scenarios-content .badge-dis { background: rgba(218,54,51,.1);  color: var(--rmz-red); }
#ts-scenarios-content .badge-tie { background: rgba(0,0,0,.04); color: var(--rmz-muted); border: 1px solid var(--rmz-border); }

#ts-scenarios-content .narrative-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: .75rem; margin-bottom: 1.25rem;
}
#ts-scenarios-content .narrative-card {
    border: 1px solid var(--rmz-border); border-radius: var(--radius);
    padding: 1rem; background: #fff;
    position: relative; overflow: hidden; transition: border-color .2s;
}
#ts-scenarios-content .narrative-card:hover { border-color: var(--rmz-accent); }
#ts-scenarios-content .narrative-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--nc-accent, var(--rmz-border));
}
#ts-scenarios-content .nc-green { --nc-accent: var(--rmz-green); }
#ts-scenarios-content .nc-amber { --nc-accent: var(--rmz-accent); }
#ts-scenarios-content .nc-red   { --nc-accent: var(--rmz-red); }
#ts-scenarios-content .nc-gray  { --nc-accent: var(--rmz-muted); }
#ts-scenarios-content .nc-team   { font-size: .95rem; font-weight: 600; color: var(--rmz-text); margin-bottom: .3rem; }
#ts-scenarios-content .nc-record { font-size: .75rem; color: var(--rmz-muted); margin-bottom: .5rem; }
#ts-scenarios-content .nc-status {
    display: inline-block; font-size: .7rem; font-weight: 600;
    padding: .15rem .55rem; border-radius: 10px; margin-bottom: .6rem;
}
#ts-scenarios-content .status-green { background: rgba(46,160,67,.12); color: var(--rmz-green); }
#ts-scenarios-content .status-amber { background: rgba(230,126,34,.12); color: var(--rmz-accent); }
#ts-scenarios-content .status-red   { background: rgba(218,54,51,.1);   color: var(--rmz-red); }
#ts-scenarios-content .status-gray  { background: rgba(0,0,0,.04); color: var(--rmz-muted); border: 1px solid var(--rmz-border); }
#ts-scenarios-content .nc-body   { font-size: .82rem; color: var(--rmz-muted); line-height: 1.55; }
#ts-scenarios-content .nc-body .highlight { color: var(--rmz-text); font-weight: 600; }
#ts-scenarios-content .nc-footer { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--rmz-border); font-size: .72rem; color: var(--rmz-muted); }

#ts-scenarios-content .prob-grid  { display: grid; gap: .55rem; margin-bottom: 1.25rem; }
#ts-scenarios-content .prob-row   { display: flex; align-items: center; gap: .75rem; font-size: .82rem; padding: .3rem 0; }
#ts-scenarios-content .prob-name  { min-width: 190px; font-weight: 600; color: var(--rmz-text); }
#ts-scenarios-content .prob-bar-wrap { flex: 1; height: 7px; background: var(--rmz-border); border-radius: 4px; overflow: hidden; }
#ts-scenarios-content .prob-bar   { height: 100%; border-radius: 4px; transition: width .7s ease; }
#ts-scenarios-content .bar-green  { background: var(--rmz-green); }
#ts-scenarios-content .bar-amber  { background: var(--rmz-accent); }
#ts-scenarios-content .bar-gray   { background: var(--rmz-muted); }
#ts-scenarios-content .prob-pct   { min-width: 42px; text-align: right; color: var(--rmz-muted); font-size: .75rem; font-weight: 600; }

#ts-scenarios-content .insights { border: 1px solid var(--rmz-border); border-radius: var(--radius); padding: 1rem; background: #fff; }
#ts-scenarios-content .insight-row {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .45rem 0; font-size: .82rem; color: var(--rmz-muted); line-height: 1.55;
}
#ts-scenarios-content .insight-row:not(:last-child) { border-bottom: 1px solid var(--rmz-border); }
#ts-scenarios-content .insight-icon { flex-shrink: 0; color: var(--rmz-muted); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════
   26. BUTTONS
════════════════════════════════════════════════════════════════ */
.rmz-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 32px;
    padding: 0 .9rem;
    border-radius: 6px;
    background: var(--rmz-accent);
    color: #fff;
    border: none;
    font-family: var(--font-main);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.rmz-btn:hover { background: var(--rmz-accent-2); color: #fff; }

.rmz-btn-sm {
    height: 28px;
    padding: 0 .7rem;
    font-size: .76rem;
}

.rmz-btn-outline {
    background: transparent;
    border: 1.5px solid var(--rmz-accent);
    color: var(--rmz-accent);
}

.rmz-btn-outline:hover {
    background: var(--rmz-accent);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   27. TOAST
════════════════════════════════════════════════════════════════ */
#rmz-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.rmz-toast {
    background: var(--rmz-surface);
    border-left: 4px solid var(--rmz-accent);
    border-radius: 8px;
    padding: .7rem 1rem;
    min-width: 240px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .83rem;
    color: var(--rmz-text);
    animation: rmz-slide-in .22s ease;
}

.rmz-toast.toast-success { border-color: var(--rmz-green); }
.rmz-toast.toast-error   { border-color: var(--rmz-red); }
.rmz-toast.hide { animation: rmz-slide-out .22s ease forwards; }

@keyframes rmz-slide-in  { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rmz-slide-out { to   { transform: translateX(120%); opacity: 0; } }

/* ════════════════════════════════════════════════════════════════
   28. RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .rmz-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .rmz-tab {
        font-size: .74rem;
        padding: .5rem .75rem;
    }

    .rmz-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .team-meta__logo { width: 28px; height: 28px; }

    #ts-scenarios-content .narrative-grid { grid-template-columns: 1fr; }
    #ts-scenarios-content .h2h-grid       { grid-template-columns: 1fr; }
    #ts-scenarios-content .prob-name       { min-width: 130px; }
}

@media (max-width: 480px) {
    .rmz-summary-cards {
        grid-template-columns: 1fr 1fr;
    }
    .rmz-tabs {
        gap: 0;
    }
    .rmz-tab {
        font-size: .7rem;
        padding: .45rem .6rem;
    }
}


.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}