/* =============================================================================
   MSV SWIM LOCKER — THEME SYSTEM
   Two user choices drive everything:
     data-skin       = ocean | gold | forest | rose | storm | fire
     data-card-style = dark-glass | light-glass | solid-dark | clean-light
   All modules consume variables only — never hardcoded colors.
============================================================================= */

/* ── Accent ramps ─────────────────────────────────────────────────────────── */

#msv-locker-wrap[data-skin="ocean"] {
    --msv-accent-900: #042C53;
    --msv-accent-700: #0C447C;
    --msv-accent-500: #185FA5;
    --msv-accent-400: #378ADD;
    --msv-accent-300: #85B7EB;
    --msv-accent-100: #E6F1FB;
    --msv-accent-border: #B5D4F4;
    --msv-accent-text-on-dark: #E6F1FB;
    --msv-accent-text-on-light: #0C447C;
    --skin-color: #378ADD;
    --skin-color-dark: #185FA5;
    --skin-color-glow: rgba(55, 138, 221, 0.25);
}

#msv-locker-wrap[data-skin="gold"] {
    --msv-accent-900: #412402;
    --msv-accent-700: #633806;
    --msv-accent-500: #854F0B;
    --msv-accent-400: #BA7517;
    --msv-accent-300: #EF9F27;
    --msv-accent-100: #FAEEDA;
    --msv-accent-border: #FAC775;
    --msv-accent-text-on-dark: #FAEEDA;
    --msv-accent-text-on-light: #633806;
    --skin-color: #BA7517;
    --skin-color-dark: #854F0B;
    --skin-color-glow: rgba(186, 117, 23, 0.25);
}

#msv-locker-wrap[data-skin="forest"] {
    --msv-accent-900: #04342C;
    --msv-accent-700: #085041;
    --msv-accent-500: #0F6E56;
    --msv-accent-400: #1D9E75;
    --msv-accent-300: #5DCAA5;
    --msv-accent-100: #E1F5EE;
    --msv-accent-border: #9FE1CB;
    --msv-accent-text-on-dark: #E1F5EE;
    --msv-accent-text-on-light: #085041;
    --skin-color: #1D9E75;
    --skin-color-dark: #0F6E56;
    --skin-color-glow: rgba(29, 158, 117, 0.25);
}

#msv-locker-wrap[data-skin="rose"] {
    --msv-accent-900: #4B1528;
    --msv-accent-700: #72243E;
    --msv-accent-500: #993556;
    --msv-accent-400: #D4537E;
    --msv-accent-300: #ED93B1;
    --msv-accent-100: #FBEAF0;
    --msv-accent-border: #F4C0D1;
    --msv-accent-text-on-dark: #FBEAF0;
    --msv-accent-text-on-light: #72243E;
    --skin-color: #D4537E;
    --skin-color-dark: #993556;
    --skin-color-glow: rgba(212, 83, 126, 0.25);
}

#msv-locker-wrap[data-skin="storm"] {
    --msv-accent-900: #26215C;
    --msv-accent-700: #3C3489;
    --msv-accent-500: #534AB7;
    --msv-accent-400: #7F77DD;
    --msv-accent-300: #AFA9EC;
    --msv-accent-100: #EEEDFE;
    --msv-accent-border: #CECBF6;
    --msv-accent-text-on-dark: #EEEDFE;
    --msv-accent-text-on-light: #3C3489;
    --skin-color: #7F77DD;
    --skin-color-dark: #534AB7;
    --skin-color-glow: rgba(127, 119, 221, 0.25);
}

#msv-locker-wrap[data-skin="fire"] {
    --msv-accent-900: #4A1B0C;
    --msv-accent-700: #712B13;
    --msv-accent-500: #993C1D;
    --msv-accent-400: #D85A30;
    --msv-accent-300: #F0997B;
    --msv-accent-100: #FAECE7;
    --msv-accent-border: #F5C4B3;
    --msv-accent-text-on-dark: #FAECE7;
    --msv-accent-text-on-light: #712B13;
    --skin-color: #D85A30;
    --skin-color-dark: #993C1D;
    --skin-color-glow: rgba(216, 90, 48, 0.25);
}

/* ── Card / surface styles ────────────────────────────────────────────────── */

#msv-locker-wrap[data-card-style="dark-glass"] {
    --msv-surface-bg:      rgba(8, 16, 32, 0.82);
    --msv-surface-border:  rgba(255, 255, 255, 0.10);
    --msv-surface-text:    #F0F4FF;
    --msv-surface-muted:   rgba(200, 215, 240, 0.65);
    --msv-surface-divider: rgba(255, 255, 255, 0.08);
    --msv-surface-row-hover: rgba(255, 255, 255, 0.04);
    --msv-surface-accent-border: rgba(255,255,255,0.18);
}

#msv-locker-wrap[data-card-style="light-glass"] {
    --msv-surface-bg:      rgba(255, 255, 255, 0.18);
    --msv-surface-border:  rgba(255, 255, 255, 0.40);
    --msv-surface-text:    #ffffff;
    --msv-surface-muted:   rgba(255, 255, 255, 0.72);
    --msv-surface-divider: rgba(255, 255, 255, 0.15);
    --msv-surface-row-hover: rgba(255, 255, 255, 0.08);
    --msv-surface-accent-border: rgba(255,255,255,0.35);
}

#msv-locker-wrap[data-card-style="solid-dark"] {
    --msv-surface-bg:      #111827;
    --msv-surface-border:  #1F2937;
    --msv-surface-text:    #F9FAFB;
    --msv-surface-muted:   #6B7280;
    --msv-surface-divider: #1F2937;
    --msv-surface-row-hover: #1a2234;
    --msv-surface-accent-border: #374151;
}

#msv-locker-wrap[data-card-style="clean-light"] {
    --msv-surface-bg:      #ffffff;
    --msv-surface-border:  #E5E7EB;
    --msv-surface-text:    #111827;
    --msv-surface-muted:   #6B7280;
    --msv-surface-divider: #F3F4F6;
    --msv-surface-row-hover: #F9FAFB;
    --msv-surface-accent-border: #E5E7EB;
}

/* ── Shared utility tokens — theme-independent ────────────────────────────── */
/* Applied on #msv-locker-wrap always */

#msv-locker-wrap {
    --msv-ghost-bg:      rgba(255, 255, 255, 0.06);
    --msv-ghost-border:  rgba(255, 255, 255, 0.18);
    --msv-ghost-text:    rgba(255, 255, 255, 0.40);
    --msv-radius-module: 14px;
    --msv-radius-inner:  8px;
}

/* In clean-light mode ghost tokens flip to dark */
#msv-locker-wrap[data-card-style="clean-light"] {
    --msv-ghost-bg:     rgba(0, 0, 0, 0.04);
    --msv-ghost-border: rgba(0, 0, 0, 0.15);
    --msv-ghost-text:   rgba(0, 0, 0, 0.35);
}

/* ── Module card base ─────────────────────────────────────────────────────── */
/* Every module wraps itself in .msv-module — gets surface styles for free */

.msv-module {
    background:    var(--msv-surface-bg);
    border:        0.5px solid var(--msv-surface-border);
    border-radius: var(--msv-radius-module);
    overflow:      hidden;
    margin-bottom: 12px;
}

.msv-module-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px 12px;
    border-bottom:   0.5px solid var(--msv-surface-divider);
}

.msv-module-title {
    font-size:   15px;
    font-weight: 500;
    color:       var(--msv-surface-text);
}

.msv-module-subtitle {
    font-size: 12px;
    color:     var(--msv-surface-muted);
}

.msv-module-body {
    padding: 14px 16px;
}

/* ── Table/list rows inside modules ──────────────────────────────────────── */

.msv-table-row {
    display:       flex;
    align-items:   center;
    padding:       9px 0;
    border-bottom: 0.5px solid var(--msv-surface-divider);
    transition:    background 0.12s;
}
.msv-table-row:last-child { border-bottom: none; }
.msv-table-row:hover { background: var(--msv-surface-row-hover); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }

.msv-table-label {
    flex:      1;
    font-size: 13px;
    color:     var(--msv-surface-text);
}

.msv-table-value {
    font-size:   14px;
    font-weight: 500;
    color:       var(--msv-accent-400);
}

.msv-table-meta {
    font-size: 11px;
    color:     var(--msv-surface-muted);
    margin-left: 10px;
}

/* ── Accent highlight pill — used for ranks, badges, counts ──────────────── */

.msv-accent-pill {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 10px;
    border-radius: 20px;
    background:    var(--msv-accent-500);
    color:         var(--msv-accent-text-on-dark);
    font-size:     11px;
    font-weight:   500;
}

/* ── Ghost chip — never tried, empty states ──────────────────────────────── */

.msv-ghost-chip {
    display:       inline-flex;
    padding:       4px 11px;
    border-radius: 20px;
    border:        0.5px dashed var(--msv-ghost-border);
    background:    var(--msv-ghost-bg);
    color:         var(--msv-ghost-text);
    font-size:     11px;
}

/* ── Season / filter pill buttons ────────────────────────────────────────── */

.msv-pill-btn {
    font-size:     11px;
    padding:       4px 11px;
    border-radius: 20px;
    border:        0.5px solid var(--msv-surface-accent-border);
    color:         var(--msv-surface-muted);
    background:    transparent;
    cursor:        pointer;
    user-select:   none;
    transition:    all 0.12s;
}

.msv-pill-btn.active {
    background: var(--msv-accent-500);
    border-color: var(--msv-accent-500);
    color: var(--msv-accent-text-on-dark);
}

/* ── Stats strip — 2-3 number summaries at top of a module ──────────────── */

.msv-stats-strip {
    display:       flex;
    border-bottom: 0.5px solid var(--msv-surface-divider);
}

.msv-stat {
    flex:       1;
    text-align: center;
    padding:    10px 0;
}
.msv-stat + .msv-stat {
    border-left: 0.5px solid var(--msv-surface-divider);
}

.msv-stat-num {
    font-size:   22px;
    font-weight: 500;
    color:       var(--msv-surface-text);
    line-height: 1;
}

.msv-stat-lbl {
    font-size:  10px;
    color:      var(--msv-surface-muted);
    margin-top: 3px;
}

/* ── Section heading inside a module ─────────────────────────────────────── */

.msv-section-hed {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--msv-surface-muted);
    padding:        12px 16px 6px;
}

/* ── Chart accent — JS reads these for canvas drawing ────────────────────── */
/* Chart modules call getComputedStyle to pull these values */

.msv-chart-ref {
    --msv-chart-line:   var(--msv-accent-400);
    --msv-chart-fill:   var(--msv-accent-100);
    --msv-chart-point:  var(--msv-accent-500);
    --msv-chart-grid:   var(--msv-surface-divider);
    --msv-chart-label:  var(--msv-surface-muted);
}

/* ── Settings tab — theme picker ─────────────────────────────────────────── */

.msv-skin-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   10px;
    margin-bottom:         14px;
}

.msv-skin-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    cursor:         pointer;
    background:     transparent;
    border:         none;
    padding:        0;
}

.msv-skin-swatch {
    width:         52px;
    height:        52px;
    border-radius: 10px;
    border:        2px solid transparent;
    display:       flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:       8px 7px;
    gap:           4px;
    transition:    border-color 0.15s;
}
.msv-skin-swatch::before,
.msv-skin-swatch::after {
    content:       '';
    display:       block;
    height:        4px;
    border-radius: 2px;
}
.msv-skin-btn.active .msv-skin-swatch,
.msv-skin-btn[aria-pressed="true"] .msv-skin-swatch {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}

.msv-skin-label {
    font-size: 11px;
    color:     var(--msv-surface-muted);
}
.msv-skin-btn.active .msv-skin-label { color: var(--msv-surface-text); font-weight: 500; }

/* Swatch fills per skin */
.msv-skin-ocean  { background: #042C53; }
.msv-skin-ocean::before  { background: #378ADD; width: 70%; }
.msv-skin-ocean::after   { background: #185FA5; }

.msv-skin-gold   { background: #1A0A00; }
.msv-skin-gold::before   { background: #EF9F27; width: 70%; }
.msv-skin-gold::after    { background: #BA7517; }

.msv-skin-forest { background: #0D1F15; }
.msv-skin-forest::before { background: #5DCAA5; width: 70%; }
.msv-skin-forest::after  { background: #1D9E75; }

.msv-skin-rose   { background: #1A0A14; }
.msv-skin-rose::before   { background: #ED93B1; width: 70%; }
.msv-skin-rose::after    { background: #D4537E; }

.msv-skin-storm  { background: #12001A; }
.msv-skin-storm::before  { background: #AFA9EC; width: 70%; }
.msv-skin-storm::after   { background: #7F77DD; }

.msv-skin-fire   { background: #1A0800; }
.msv-skin-fire::before   { background: #F0997B; width: 70%; }
.msv-skin-fire::after    { background: #D85A30; }

/* Card style buttons */
.msv-cardstyle-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   10px;
    margin-bottom:         14px;
}

.msv-cardstyle-btn {
    border-radius: 10px;
    padding:       12px 14px;
    cursor:        pointer;
    border:        2px solid transparent;
    text-align:    left;
    transition:    border-color 0.15s;
}
.msv-cardstyle-btn.active,
.msv-cardstyle-btn[aria-pressed="true"] {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

.msv-cardstyle-name { font-size: 12px; font-weight: 500; }
.msv-cardstyle-desc { font-size: 10px; margin-top: 2px; opacity: 0.7; }

.msv-cs-dark-glass  { background: rgba(8,16,32,0.85); }
.msv-cs-dark-glass .msv-cardstyle-name  { color: #F0F4FF; }
.msv-cs-dark-glass .msv-cardstyle-desc  { color: #8BA0C0; }

.msv-cs-light-glass { background: rgba(255,255,255,0.2); border: 0.5px solid rgba(255,255,255,0.35) !important; }
.msv-cs-light-glass .msv-cardstyle-name { color: #fff; }
.msv-cs-light-glass .msv-cardstyle-desc { color: rgba(255,255,255,0.7); }

.msv-cs-solid-dark  { background: #111827; }
.msv-cs-solid-dark .msv-cardstyle-name  { color: #F9FAFB; }
.msv-cs-solid-dark .msv-cardstyle-desc  { color: #6B7280; }

.msv-cs-clean-light { background: #fff; border: 0.5px solid #E5E7EB !important; }
.msv-cs-clean-light .msv-cardstyle-name { color: #111827; }
.msv-cs-clean-light .msv-cardstyle-desc { color: #6B7280; }

/* ── My Events module ────────────────────────────────────────────────────────── */

.msv-my-events-seasons {
    display: flex;
    gap: 5px;
    padding: 10px 16px 8px;
    flex-wrap: wrap;
    border-bottom: 0.5px solid var(--msv-surface-divider);
}

.msv-my-events-stats {
    display: flex;
    border-bottom: 0.5px solid var(--msv-surface-divider);
}

.msv-my-events-treemap-wrap {
    padding: 12px 16px 4px;
}

.msv-treemap {
    position: relative;
    width: 100%;
}

.msv-tblock {
    position: absolute;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 6px 8px;
    overflow: hidden;
    transition: left 0.32s ease, top 0.32s ease, width 0.32s ease, height 0.32s ease;
}

.msv-tblock-name {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msv-tblock-count {
    font-weight: 500;
    line-height: 1.1;
    margin-top: 1px;
}

.msv-tblock-pct {
    font-size: 10px;
    opacity: 0.82;
    margin-top: 1px;
}

.msv-events-overflow {
    padding: 4px 16px 0;
}

.msv-overflow-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 4px;
}

.msv-overflow-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border-radius: 20px;
    background: var(--msv-accent-100);
    border: 0.5px solid var(--msv-accent-border);
}

.msv-overflow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.msv-overflow-pill-name {
    font-size: 11px;
    color: var(--msv-accent-text-on-light);
    font-weight: 500;
}

.msv-overflow-pill-meta {
    font-size: 11px;
    color: var(--msv-accent-text-on-light);
    opacity: 0.75;
}

.msv-events-never {
    padding: 0 16px 4px;
}

.msv-never-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ── Settings module (collapsible) ──────────────────────────────────────────── */

.msv-settings-module {
    margin-top: 8px;
}

.msv-settings-toggle {
    cursor: pointer;
    user-select: none;
}

.msv-settings-toggle:hover .msv-module-title {
    opacity: 0.85;
}

.msv-settings-body {
    padding: 0;
}

.msv-settings-body[hidden] {
    display: none;
}