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

   HINWEIS: Diese Datei gilt für die Kalenderansicht. Auf der OPS-Programmseite
   läuft das Widget derzeit mit agenda-style="linear", dafür ist
   runevents-agenda-desktop-linear zuständig. Diese Datei wirkt erst, wenn ihr
   auf die Kalenderansicht umstellt.

   Geändert wurde:
   1. Flächen flach statt mit Verlauf, dafür Hairline-Rahmen
   2. Pillenformen auf 4 px, passend zu den OPS-Buttons
   3. Sessiontitel in Weiß statt Magenta, damit er als Überschrift wirkt
   4. Farbige Schlagschatten entfernt
   5. Der Helligkeitsfilter auf den Etiketten entfernt, siehe Hinweis unten
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tagesreiter
   GEÄNDERT: eckig statt pillenförmig
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel .mdc-tab{
    padding: 0 16px !important;
    border-radius: var(--radius-sm) !important;
    min-height: 36px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

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

#pb-457 .agenda-component-carousel .mdc-tab:hover:not(.mdc-tab--active){
    color: var(--color-text-inverse) !important;
    background: var(--color-surface-alt) !important;
}

#pb-457 .agenda-component-carousel .mat-mdc-tab-header-pagination-chevron{
    border-color: var(--color-primary) !important;
}


/* --------------------------------------------------------------------------
   Zeitmarken
   GEÄNDERT: ohne farbigen Schatten
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel .time-label{
    color: var(--color-text-on-secondary) !important;
    background: var(--color-secondary) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Sessionkarten
   GEÄNDERT: flache Fläche statt Verlauf, Kante bleibt magenta
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel .session-card-carousel{
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 232px !important;
}

#pb-457 .agenda-component-carousel .session-card-carousel:hover{
    box-shadow: none !important;
    border-color: var(--color-primary) !important;
    border-left-color: var(--color-primary) !important;
}

/* GEÄNDERT: Raum als eckiges Etikett statt Pille */
#pb-457 .agenda-component-carousel .room-name-carousel{
    background: var(--color-secondary) !important;
    color: var(--color-text-on-secondary) !important;
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

/* GEÄNDERT: Titel in Weiß statt Magenta */
#pb-457 .agenda-component-carousel .session-title-carousel{
    color: var(--color-text-inverse) !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

#pb-457 .agenda-component-carousel .session-time-carousel{
    color: var(--color-text-muted) !important;
}

#pb-457 .agenda-component-carousel .speaker-name-carousel{
    color: var(--color-text) !important;
}

/* GEÄNDERT: Porträt mit Hairline statt farbigem Schatten */
#pb-457 .agenda-component-carousel .speaker-carousel img{
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

#pb-457 .agenda-component-carousel .session-card-carousel:hover .speaker-carousel img{
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Karten ohne Vortrag, etwa Registrierung und Mittagessen
   GEÄNDERT: eigene Fläche statt magentafarbenem Schleier,
   Kante in Rosa zur Unterscheidung
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel .session-card-nonContent{
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-secondary) !important;
}

#pb-457 .agenda-component-carousel .session-card-nonContent:hover{
    background: var(--color-surface-alt) !important;
    border-color: var(--color-secondary) !important;
}

#pb-457 .agenda-component-carousel .session-card-nonContent h4{
    color: var(--color-text-inverse) !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
}

#pb-457 .agenda-component-carousel .session-card-nonContent .content-item{
    background: var(--color-secondary) !important;
    color: var(--color-text-on-secondary) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   Filterleiste
   GEÄNDERT: flache Fläche, ohne den 16 px breiten unsichtbaren Rand links
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel .card-sidebar{
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-md) !important;
    box-shadow: none !important;
    border-left: 1px solid var(--color-border) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .title{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: var(--space-sm) !important;
    padding-bottom: var(--space-xs) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .title span{
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--color-secondary) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .title img{
    display: none !important;
}

#pb-457 .agenda-component-carousel .card-sidebar input[type="search"],#pb-457 .agenda-component-carousel .card-sidebar .form-control{
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text) !important;
    padding: var(--space-sm) var(--space-md) !important;
    font-size: var(--text-body) !important;
    font-family: var(--font-body) !important;
    margin-bottom: var(--space-md) !important;
    transition: border-color var(--transition-fast) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar input[type="search"]:focus,#pb-457 .agenda-component-carousel .card-sidebar .form-control:focus{
    outline: 2px solid var(--color-secondary) !important;
    outline-offset: 1px !important;
    border-color: var(--color-secondary) !important;
    box-shadow: none !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .checkbox-container{
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-xs) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .checkbox{
    display: flex !important;
    align-items: center !important;
    padding: 10px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    border-right: 3px solid transparent !important;
    background: transparent !important;
    transition: background-color var(--transition-fast) !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .checkbox:hover{
    background: var(--color-surface-alt) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .checkbox input[type="checkbox"]{
    width: 16px !important;
    height: 16px !important;
    margin-right: var(--space-sm) !important;
    accent-color: var(--color-primary) !important;
    cursor: pointer !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .checkbox label::before,#pb-457 .agenda-component-carousel .card-sidebar .checkbox-container .checkbox label::before,#pb-457 .container .card-sidebar .checkbox-container .checkbox label::before{
    border-color: var(--color-primary) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .checkbox input:checked + label::before,#pb-457 .agenda-component-carousel .card-sidebar .checkbox-container .checkbox input:checked + label::before,#pb-457 .container .card-sidebar .checkbox-container .checkbox input:checked + label::before{
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

#pb-457 .agenda-component-carousel .card-sidebar .checkbox label{
    display: flex !important;
    align-items: center !important;
    gap: var(--space-xs) !important;
    cursor: pointer !important;
    font-size: var(--text-small) !important;
    color: var(--color-text) !important;
    font-weight: 400 !important;
    flex: 1 !important;
}


/* --------------------------------------------------------------------------
   Zeitzonenhinweis
   GEÄNDERT: eckig statt pillenförmig
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel small{
    display: inline-block !important;
    color: var(--color-text-muted) !important;
    background: var(--color-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-sm) !important;
    border-left: 1px solid var(--color-border) !important;
    margin-bottom: 16px !important;
    font-size: 0.75rem !important;
}


/* --------------------------------------------------------------------------
   Etiketten
   GEÄNDERT: Der Filter brightness(1.15) saturate(0.75) hellte die Farben auf
   und entsättigte sie. Das war für helle Hintergründe gedacht. Auf dunklem
   Grund verwässert es die Farben, deshalb ist er entfernt. Die Farben kommen
   weiterhin als Inline-Style aus run.events.
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel .label-pill-carousel{
    white-space: nowrap !important;
    filter: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   Aufklappfenster
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-carousel .popup{
    background: var(--color-surface-dark) !important;
}

#pb-457 .agenda-component-carousel .popup button{
    background: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
}

#pb-457 .agenda-component-carousel .popup button:hover{
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-text-on-secondary) !important;
}