/* ==========================================================================
   RUN.EVENTS WIDGETS — Linear Agenda MOBILE
   Angepasst an das OPS-2027-Design.

   Geändert wurde:
   1. Sessionkarten flach statt mit Verlauf, dafür Hairline-Rahmen
   2. Sessiontitel in Weiß statt Magenta, damit er als Überschrift wirkt
   3. Farbige Schlagschatten entfernt
   4. Etiketten und Bilder auf 4 px Radius
   5. Reiter und Zeitmarken in OPS-Versalien

   Voraussetzung: Die OPS-Variablen sind gesetzt, insbesondere
   --color-primary-hsl und --color-secondary-hsl.
   ========================================================================== */

#pb-457 app-agenda-linear .agenda-component{
    font-family: var(--font-body);
    padding: var(--space-sm) !important;
}


/* --------------------------------------------------------------------------
   Tagesreiter
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear .mat-mdc-tab-group{
    margin: 0 0 var(--space-md) 0 !important;
}

#pb-457 app-agenda-linear .mat-mdc-tab-header{
    margin: 0 !important;
}

#pb-457 app-agenda-linear .mat-mdc-tab-header-pagination{
    display: none !important;
}

#pb-457 app-agenda-linear .mat-mdc-tab-label-container,#pb-457 app-agenda-linear .mat-mdc-tab-list{
    margin: 0 !important;
    padding: 0 !important;
}

#pb-457 app-agenda-linear .mat-mdc-tab-labels{
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    justify-content: flex-start !important;
}

#pb-457 app-agenda-linear .mdc-tab{
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    padding: var(--space-sm) var(--space-md) !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--color-text-muted) !important;
    flex: 0 0 auto !important;
}

#pb-457 app-agenda-linear .mdc-tab__ripple,#pb-457 app-agenda-linear .mat-mdc-tab-ripple{
    position: absolute !important;
    pointer-events: none !important;
}

#pb-457 app-agenda-linear .mdc-tab__content{
    margin: 0 !important;
    padding: 0 !important;
}

#pb-457 app-agenda-linear .mdc-tab--active{
    background: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
    font-weight: 800 !important;
}

#pb-457 app-agenda-linear .mdc-tab-indicator{
    display: none !important;
}


/* --------------------------------------------------------------------------
   Zeitmarke
   GEÄNDERT: eckig, ohne farbigen Schatten
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear .session h3{
    font-family: var(--font-heading) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--color-text-on-secondary) !important;
    background: var(--color-secondary) !important;
    padding: var(--space-xs) var(--space-md) !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: var(--space-sm) !important;
    display: inline-block !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Sessionkarte, gestapelt
   GEÄNDERT: flache Fläche statt Verlauf
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear .session .d-flex.session-content,#pb-457 app-agenda-linear .session .d-flex.non-content{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-xs) !important;
    background: var(--color-bg) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-md) !important;
    margin-bottom: var(--space-sm) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-primary) !important;
}

#pb-457 app-agenda-linear .session .d-flex.non-content{
    border-left-color: var(--color-secondary) !important;
}


/* --------------------------------------------------------------------------
   Bildzeile
   GEÄNDERT: eckige Ecken, kein farbiger Schatten
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear .speakers-images-container{
    width: auto !important;
    min-width: auto !important;
    order: 1 !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    align-self: flex-start !important;
}

#pb-457 app-agenda-linear .speakers-images{
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-xs) !important;
    flex-wrap: wrap !important;
}

#pb-457 app-agenda-linear .speakers-images img{
    width: 69px !important;
    height: 69px !important;
    border-radius: var(--radius-sm) !important;
    object-fit: cover !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}

#pb-457 app-agenda-linear .speakers-images-container .icon{
    width: 69px !important;
    height: 69px !important;
    min-width: 69px !important;
    min-height: 69px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#pb-457 app-agenda-linear .speakers-images-container .icon mat-icon{
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--color-secondary) !important;
}


/* --------------------------------------------------------------------------
   Textbereich
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear .content-container{
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    order: 2 !important;
}

/* GEÄNDERT: Titel in Weiß statt Magenta */
#pb-457 app-agenda-linear .content-container h4{
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
    color: var(--color-text-inverse) !important;
    margin: 0 !important;
    margin-top: var(--space-xs) !important;
    line-height: 1.3 !important;
    order: 2 !important;
}

#pb-457 app-agenda-linear .d-flex.non-content .content-container h4{
    color: var(--color-text-inverse) !important;
}

#pb-457 app-agenda-linear .content-container .d-flex{
    order: 1 !important;
}

#pb-457 app-agenda-linear .content-container p{
    margin: 0 !important;
    margin-bottom: var(--space-sm) !important;
    font-size: 0.8rem !important;
}

#pb-457 app-agenda-linear .content-container p span{
    display: inline-block !important;
    font-weight: 700 !important;
    color: var(--color-text-on-secondary) !important;
    background: var(--color-secondary) !important;
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.72rem !important;
    margin-right: var(--space-xs) !important;
}

#pb-457 app-agenda-linear .content-container > div:not(.labels):not(.d-flex){
    order: 3 !important;
    margin-bottom: var(--space-xs) !important;
}

#pb-457 app-agenda-linear .content-container .content-item{
    display: inline-block !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    margin-right: var(--space-xs) !important;
    margin-bottom: 2px !important;
}

#pb-457 app-agenda-linear .d-flex.session-content .content-item{
    background: var(--color-surface-alt) !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border) !important;
}


/* --------------------------------------------------------------------------
   Etiketten
   Hinweis: Die Hintergrundfarbe kommt als Inline-Style aus run.events und
   bleibt deshalb je Etikett gleich. Das ist der Unterschied zur Desktopdatei,
   die Farben nach Position vergibt. Hier ist also nichts zu ändern.
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear .labels{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-xs) !important;
    margin-top: var(--space-sm) !important;
    order: 4 !important;
    width: 100% !important;
}

#pb-457 app-agenda-linear .labels .label{
    font-family: var(--font-body) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    border: none !important;
    transition: none !important;
}

#pb-457 app-agenda-linear .labels > div:nth-child(n+6){
    display: none !important;
}


/* --------------------------------------------------------------------------
   Filterleiste und Hinweistext
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear .card-sidebar{
    display: none !important;
}

@media (min-width: 769px) {
    #pb-457 app-agenda-linear .card-sidebar{
        display: block !important;
    }
}

#pb-457 app-agenda-linear small{
    display: block !important;
    font-size: 0.75rem !important;
    color: var(--color-text-muted) !important;
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-md) !important;
}


/* --------------------------------------------------------------------------
   Aufklappfenster
   -------------------------------------------------------------------------- */
#pb-457 app-agenda-linear app-speaker-session-popup .popup .inner-container{
    text-align: left !important;
    align-items: flex-start !important;
    padding: var(--space-lg) !important;
    background: var(--color-surface-dark) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

#pb-457 app-agenda-linear app-speaker-session-popup .session-info{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-xs) !important;
    width: 100% !important;
}

/* GEÄNDERT: Titel in Weiß statt als Verlaufstext */
#pb-457 app-agenda-linear app-speaker-session-popup h3{
    text-align: left !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.25 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
    color: var(--color-text-inverse) !important;
}

#pb-457 app-agenda-linear app-speaker-session-popup .labels{
    justify-content: flex-start !important;
}

#pb-457 app-agenda-linear app-speaker-session-popup .speakers-images-container,#pb-457 app-agenda-linear app-speaker-session-popup .speakers-images{
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: flex-start !important;
}