/* ─── Ironhorse Programm — ARD-Look ──────────────────────────────────────────── */

:root {
    --ifpr-bg:          #0d0d0d;
    --ifpr-surface:     #1a1a2e;
    --ifpr-card:        #16213e;
    --ifpr-card-hover:  #1e2d50;
    --ifpr-accent:      #e94560;
    --ifpr-text:        #ffffff;
    --ifpr-text-muted:  #9898b0;
    --ifpr-border:      rgba(255, 255, 255, 0.08);
    --ifpr-radius:      4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WRAPPER
   ═══════════════════════════════════════════════════════════════════════════════ */

.ifpr-programm {
    background:  var(--ifpr-bg);
    color:       var(--ifpr-text);
    font-family: inherit;
    min-height:  40vh;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TAGES-NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.ifpr-daynav {
    position:        sticky;
    top:             0;
    z-index:         30;
    display:         flex;
    align-items:     center;
    gap:             4px;
    padding:         10px 0 10px;
    background:      var(--ifpr-bg);
    overflow-x:      auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    border-bottom:   2px solid var(--ifpr-border);
    -webkit-overflow-scrolling: touch;
}

.ifpr-daynav::-webkit-scrollbar        { height: 3px; }
.ifpr-daynav::-webkit-scrollbar-track  { background: transparent; }
.ifpr-daynav::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Admin-Bar-Versatz (eingeloggte User) */
.admin-bar .ifpr-daynav               { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .ifpr-daynav           { top: 46px; }
}

.ifpr-daynav__btn {
    flex-shrink:    0;
    background:     transparent;
    color:          var(--ifpr-text-muted);
    border:         1px solid transparent;
    border-radius:  var(--ifpr-radius);
    padding:        7px 14px;
    font-size:      0.8rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    white-space:    nowrap;
    cursor:         pointer;
    transition:     background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family:    inherit;
    line-height:    1;
}

.ifpr-daynav__btn:hover {
    background:   var(--ifpr-surface);
    color:        var(--ifpr-text);
    border-color: var(--ifpr-border);
}

.ifpr-daynav__btn.is-active {
    background:   var(--ifpr-accent);
    color:        #fff;
    border-color: var(--ifpr-accent);
}

.ifpr-daynav__btn--empty {
    opacity: 0.38;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID — Spalten nebeneinander
   ═══════════════════════════════════════════════════════════════════════════════ */

.ifpr-panel {
    padding-top: 0;
}

.ifpr-panel.is-hidden {
    display: none;
}

.ifpr-panel-empty {
    color:      var(--ifpr-text-muted);
    font-size:  0.9rem;
    padding:    3rem 0;
    text-align: center;
}

.ifpr-grid-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ifpr-grid {
    display:    grid;
    /* Anzahl Spalten kommt per Inline-Var aus PHP; min 220px pro Spalte */
    grid-template-columns: repeat(var(--ifpr-col-count, 4), minmax(0, 1fr));
    gap:        1px;
    background: var(--ifpr-border);
    min-width:  max-content;
}

/* ─── Einzelne Bühnen-Spalte ──────────────────────────────────────────────── */

.ifpr-col {
    background:     var(--ifpr-bg);
    display:        flex;
    flex-direction: column;
    min-width:      180px;
}

.ifpr-col__header {
    position:       sticky;
    top:            var(--ifpr-header-top, 0px);
    z-index:        10;
    background:     var(--ifpr-surface);
    color:          var(--ifpr-text);
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        12px 14px;
    border-bottom:  2px solid var(--ifpr-accent);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

/* ─── Slot-Karte ──────────────────────────────────────────────────────────── */

.ifpr-slot {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        14px 14px;
    border-bottom:  1px solid var(--ifpr-border);
    transition:     background 0.15s ease;
}

.ifpr-slot:last-child {
    border-bottom: none;
}

.ifpr-slot:hover {
    background: var(--ifpr-card);
}

.ifpr-slot__time {
    color:          var(--ifpr-accent);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.05em;
    line-height:    1;
}

.ifpr-slot__title {
    color:       var(--ifpr-text);
    font-size:   0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.ifpr-slot__title--linked {
    text-decoration: none;
    transition:      color 0.15s ease;
}

.ifpr-slot__title--linked:hover {
    color: var(--ifpr-accent);
}

/* ─── Vergangene Slots ────────────────────────────────────────────────────── */

.ifpr-slot--past {
    opacity: 0.35;
}

/* ─── Listen-Ansicht (view:list) ──────────────────────────────────────────── */

.ifpr-list {
    display:        flex;
    flex-direction: column;
    padding:        8px 0;
}

.ifpr-list-slot {
    display:     flex;
    align-items: baseline;
    gap:         12px;
    padding:     10px 2px;
    border-bottom: 1px solid var(--ifpr-border);
    transition:  background 0.12s ease;
}

.ifpr-list-slot:last-child {
    border-bottom: none;
}

.ifpr-list-slot:hover {
    background: var(--ifpr-card);
}

.ifpr-list-slot__time {
    color:       var(--ifpr-accent);
    font-size:   0.72rem;
    font-weight: 700;
    white-space: nowrap;
    min-width:   105px;
    flex-shrink: 0;
}

.ifpr-list-slot__stage {
    color:        var(--ifpr-text-muted);
    font-size:    0.72rem;
    font-weight:  600;
    min-width:    90px;
    flex-shrink:  0;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

.ifpr-list-slot__title {
    color:       var(--ifpr-text);
    font-size:   0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

.ifpr-list-slot__title--linked {
    text-decoration: none;
    transition:      color 0.15s ease;
}

.ifpr-list-slot__title--linked:hover {
    color: var(--ifpr-accent);
}

.ifpr-list-slot--past {
    opacity: 0.35;
}

/* ─── Leer-Zustand ────────────────────────────────────────────────────────── */

.ifpr-empty {
    color:      var(--ifpr-text-muted);
    font-size:  0.9rem;
    padding:    3rem 0;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NÄCHSTE SLOTS — [ife_naechste_slots]
   Helles Theme (passt auf weißen Seitenhintergrund)
   ═══════════════════════════════════════════════════════════════════════════════ */

.ifpr-next-slots {
    list-style: none;
    margin:     0;
    padding:    0;
}

.ifpr-next-slot {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ifpr-next-slot:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.ifpr-next-slot__inner {
    display:               grid;
    grid-template-columns: 7rem 1fr auto;
    align-items:           center;
    gap:                   16px;
    padding:               13px 10px;
    color:                 inherit;
    border-radius:         4px;
    transition:            background 0.15s ease;
}

.ifpr-next-slot:hover .ifpr-next-slot__inner {
    background: rgba(233, 69, 96, 0.05);
}

/* Datum + Uhrzeit-Block (linke Spalte) */
.ifpr-next-slot__when {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.ifpr-next-slot__date {
    font-size:      0.78rem;
    font-weight:    600;
    color:          #555;
    white-space:    nowrap;
}

.ifpr-next-slot__time {
    font-size:      1rem;
    font-weight:    800;
    color:          #e94560;
    line-height:    1;
    white-space:    nowrap;
    letter-spacing: -0.01em;
}

/* Künstlername-Zelle: Foto + Name (mittlere Spalte) */
.ifpr-next-slot__name-cell {
    display:     flex;
    align-items: center;
    gap:         8px;
    overflow:    hidden;
    min-width:   0;
}

.ifpr-next-slot__photo {
    width:       32px;
    height:      32px;
    border-radius: 50%;
    object-fit:  cover;
    flex-shrink: 0;
}

.ifpr-next-slot__name {
    font-size:      0.95rem;
    font-weight:    600;
    color:          #111;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    text-decoration: none;
    transition:     color 0.15s ease;
}

a.ifpr-next-slot__name:hover,
.ifpr-next-slot:hover a.ifpr-next-slot__name {
    color: #e94560;
}

/* Bühne (rechte Spalte) */
.ifpr-next-slot__stage {
    font-size:      0.72rem;
    font-weight:    600;
    color:          #888;
    background:     #f0f0f0;
    border-radius:  3px;
    padding:        3px 8px;
    white-space:    nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition:     background 0.15s, color 0.15s;
}

a.ifpr-next-slot__stage:hover {
    background: rgba(233, 69, 96, 0.12);
    color:      #e94560;
}

@media (max-width: 560px) {
    .ifpr-next-slot__inner {
        grid-template-columns: 5.5rem 1fr auto;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .ifpr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .ifpr-grid {
        grid-template-columns: 1fr;
    }

    .ifpr-col {
        min-width: 0;
    }

    .ifpr-col__header {
        white-space: normal;
    }

    .ifpr-daynav__btn {
        padding:   6px 10px;
        font-size: 0.75rem;
    }
}