/* components/spelschema/spelschema.css
   Root font-size = 62.5% → 1rem = 10px
   ========================================= */

.spelschema {
    --ss-border:      var(--border-color, rgba(0,0,0,.1));
    --ss-primary:     var(--primary, #f7b318);
    --ss-tab-color:   rgba(0,0,0,.4);
    --ss-tid-color:   var(--text-dark, rgba(0,0,0,.8));
    --ss-namn-color:  var(--dark, #1a1a1a);
    --ss-notering:    rgba(0,0,0,.4);
    --ss-scen-chip:   rgba(0,0,0,.3);
    --ss-badge-bg:    #c0392b;
    --ss-row-hover:   rgba(0,0,0,.025);
    --ss-now-bg:      rgba(247,179,24,.07);
    --ss-now-border:  var(--primary, #f7b318);
    --ss-avatar-bg:   rgba(0,0,0,.07);
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.spelschema__tabs {
    display:         flex;
    justify-content: center;
    gap:             4px;
    padding:         0 0 0;
    border-bottom:   1px solid var(--ss-border);
    overflow-x:      auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom:   var(--space-m, 2.4rem);
    position:        sticky;
    top:             0;
    background:      #fff;
    z-index:         10;
}

.spelschema__tab {
    appearance:      none;
    background:      transparent;
    border:          none;
    border-bottom:   3px solid transparent;
    color:           var(--ss-tab-color);
    cursor:          pointer;
    font-family:     'Khand', sans-serif;
    font-size:       var(--text-xl, 2.6rem);
    font-weight:     700;
    letter-spacing:  0;
    padding:         1.2rem 2.4rem 1.4rem;
    text-transform:  uppercase;
    transition:      color 200ms, border-color 200ms;
    white-space:     nowrap;
}

.spelschema__tab:hover {
    color: rgba(0,0,0,.7);
}

.spelschema__tab.is-active {
    border-bottom-color: var(--ss-primary);
    color:               var(--dark, #1a1a1a);
}

/* ── Dag-panel ───────────────────────────────────────────────────────────── */
.spelschema__dag[hidden] {
    display: none;
}

/* ── Scenfilter ──────────────────────────────────────────────────────────── */
.spelschema__filter {
    display:         flex;
    justify-content: center;
    gap:             1.2rem;
    flex-wrap:       wrap;
    margin-bottom:   var(--space-s, 2rem);
}

.spelschema__filter-btn {
    appearance:     none;
    background:     transparent;
    border:         1px solid var(--ss-border);
    border-radius:  var(--radius-s, 4px);
    color:          var(--ss-tab-color);
    cursor:         pointer;
    font-family:    inherit;
    font-size:      var(--text-xs, 1.5rem);
    font-weight:    600;
    letter-spacing: .04em;
    padding:        .6rem 1.4rem;
    transition:     background 150ms, color 150ms, border-color 150ms;
}

.spelschema__filter-btn:hover {
    border-color: var(--ss-primary);
    color:        var(--dark, #1a1a1a);
}

.spelschema__filter-btn.is-active {
    background:   var(--ss-primary);
    border-color: var(--ss-primary);
    color:        #fff;
}

/* ── Lista ───────────────────────────────────────────────────────────────── */
.spelschema__lista {
    list-style: none;
    margin:     0;
    padding:    0;
}

/* ── En rad ──────────────────────────────────────────────────────────────── */
.spelschema__rad {
    align-items:     center;
    border-bottom:   1px solid var(--ss-border);
    border-left:     3px solid transparent;
    display:         flex;
    justify-content: space-between;
    gap:             var(--space-s, 1.8rem);
    padding:         1.6rem 0 1.6rem 1rem;
    margin-left:     -1rem;
    transition:      background 150ms;
}

.spelschema__rad[hidden] {
    display: none;
}

.spelschema__rad:last-child {
    border-bottom: none;
}

.spelschema__rad:hover {
    background: var(--ss-row-hover);
}

.spelschema__rad--installt {
    opacity: .4;
}

.spelschema__rad--passerad {
    opacity: .45;
}

.spelschema__rad--passerad .spelschema__namn {
    color: rgba(0,0,0,.4);
}

.spelschema__rad--passerad .spelschema__tid {
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,.3);
}

.spelschema__rad--nu {
    background:  var(--ss-now-bg);
    border-left: 3px solid var(--ss-now-border);
}

/* ── Artist (vänster) ────────────────────────────────────────────────────── */
.spelschema__artist {
    align-items: center;
    display:     flex;
    gap:         2.4rem;
    min-width:   0;
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.spelschema__avatar {
    width:         88px;
    height:        88px;
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
    background:    var(--ss-avatar-bg);
}

.spelschema__avatar--smastjarnorna {
    background: #f7acd0;
}

.spelschema__avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}


/* ── Artist-text ─────────────────────────────────────────────────────────── */
.spelschema__artist-text {
    display:        flex;
    flex-direction: column;
    gap:            .8rem;
    min-width:      0;
}

.spelschema__namn {
    color:          var(--ss-namn-color);
    font-family:    'Khand', sans-serif;
    font-size:      var(--text-xl, 2.6rem);
    font-weight:    700;
    line-height:    1.1;
    text-transform: uppercase;
    word-break:     break-word;
}

a.spelschema__namn {
    color:           var(--ss-namn-color);
    text-decoration: none;
    transition:      color 150ms;
}

a.spelschema__namn:hover {
    color: var(--ss-primary);
}

.spelschema__namn-sep {
    margin: 0 .4rem;
    opacity: .5;
}

.spelschema__namn-link {
    color:           inherit;
    font-weight:     700;
    text-decoration: none;
    transition:      color 150ms;
}

.spelschema__namn-link:hover {
    color: var(--ss-primary);
}

.spelschema__rad--installt .spelschema__namn {
    text-decoration: line-through;
}

.spelschema__scen-chip {
    align-self:     flex-start;
    background:     rgba(0,0,0,.06);
    border-radius:  var(--radius-s, 4px);
    color:          rgba(0,0,0,.5);
    font-size:      1.1rem;
    font-weight:    700;
    letter-spacing: .08em;
    padding:        .2rem .7rem;
    text-transform: uppercase;
}

.spelschema__notering {
    color:      var(--ss-notering);
    font-size:  var(--text-xs, 1.5rem);
    font-style: italic;
}

.spelschema__badge {
    align-self:     flex-start;
    background:     var(--ss-badge-bg);
    border-radius:  var(--radius-s, 4px);
    color:          #fff;
    font-size:      1.2rem;
    font-weight:    700;
    letter-spacing: .08em;
    padding:        .3rem .7rem;
    text-transform: uppercase;
}

/* ── Tid (höger) ─────────────────────────────────────────────────────────── */
.spelschema__tid-block {
    align-items: flex-end;
    display:     flex;
    flex-direction: column;
    flex-shrink: 0;
    gap:         .6rem;
    text-align:  right;
}

.spelschema__cal-btn {
    color:       rgba(0,0,0,.25);
    display:     block;
    line-height: 1;
    position:    relative;
    transition:  color 150ms;
}

.spelschema__cal-btn:hover {
    color: var(--ss-primary);
}

@media (hover: hover) {
    .spelschema__cal-btn::after {
        background:     rgba(0,0,0,.75);
        border-radius:  var(--radius-s, 4px);
        color:          #fff;
        content:        'Spara till kalender';
        font-size:      1.2rem;
        font-weight:    500;
        letter-spacing: .02em;
        opacity:        0;
        padding:        .5rem 1rem;
        pointer-events: none;
        position:       absolute;
        right:          calc(100% + 8px);
        top:            50%;
        transform:      translateY(-50%);
        transition:     opacity 150ms;
        white-space:    nowrap;
    }

    .spelschema__cal-btn:hover::after {
        opacity: 1;
    }
}

.spelschema__tid {
    color:                var(--ss-tid-color);
    font-size:            var(--text-s, 1.7rem);
    font-variant-numeric: tabular-nums;
    letter-spacing:       .02em;
    line-height:          1;
    white-space:          nowrap;
}

.spelschema__tid-sep {
    margin:  0 .3rem;
    opacity: .6;
}

/* ── Responsivitet ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .spelschema__avatar {
        width:  64px;
        height: 64px;
    }

    .spelschema__namn {
        font-size: var(--text-l, 2.2rem);
    }

    .spelschema__tid {
        font-size: var(--text-xs, 1.5rem);
    }
}

@media (max-width: 480px) {
    .spelschema__avatar {
        display: none;
    }

    .spelschema__rad {
        gap: 1.2rem;
    }

    .spelschema__namn {
        font-size: var(--text-m, 1.8rem);
    }

    .spelschema__filter {
        justify-content: flex-start;
    }
}