/* ══════════════════════════════════════════
   runevents.css — Layout pagina tickets.php + tema dei widget run.events
   Compatibile con il sistema di variabili CSS di style.css (var(--accent), var(--bg2)…)

   I widget run.events (<runevents-tickets>, <runevents-agenda>, <runevents-sponsors>,
   <runevents-single-sponsorship>) NON usano Shadow DOM: le classi qui sotto sono
   documentate ufficialmente (community.run.events/knowledge-base) e funzionano con
   normali selettori CSS globali. Sono scoped ai container in cui iniettiamo i widget
   (#runevents-tickets-container, #agenda-container, #sponsors-container) perché alcune
   di quelle classi — es. .card, .title — sono generiche e potrebbero altrimenti
   sovrascrivere stili non correlati altrove nel sito.
══════════════════════════════════════════ */

/* ─── Chrome pagina tickets.php ─────────── */
.re-page-header {
  padding: 24px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.re-page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.re-back-link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.re-back-link:hover { color: var(--neon); }

.re-tickets-hero {
  padding: 64px 0 24px;
  text-align: center;
}
.re-tickets-hero .section-label { text-align: center; }
.re-tickets-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.re-tickets-meta {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.re-tickets-section { padding: 32px 0 120px; }
.re-tickets-section .container { max-width: 900px; }

/* ─── runevents-tickets ──────────────────── */
#runevents-tickets-container .re-tickets {
  font-family: var(--font-display) !important;
  background: var(--surface, #111c30) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: var(--radius, 12px) !important;
  padding: 32px !important;
}
#runevents-tickets-container .re-tickets .section h2 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}
#runevents-tickets-container .re-tickets h4 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  white-space: initial;
}
#runevents-tickets-container .re-tickets small {
  color: var(--text-muted) !important;
}
#runevents-tickets-container .re-tickets .btn {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  border-radius: 8px !important;
  transition: var(--transition);
}
#runevents-tickets-container .re-tickets .btn:hover {
  background: var(--neon) !important;
  border-color: var(--neon) !important;
  color: var(--bg) !important;
}
#runevents-tickets-container .re-tickets .redirect-footer {
  color: var(--text-muted) !important;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* ─── runevents-agenda (dentro #agenda-container in index.php) ── */
#agenda-container .agenda-component {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}
/* Tab dei giorni (Angular Material) — di default hanno un loro sfondo chiaro che
   stona sul tema scuro: lo neutralizziamo e usiamo i colori del sito. */
#agenda-container .mdc-tab {
  background: transparent !important;
}
#agenda-container .mdc-tab__text-label {
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  letter-spacing: 0.03em;
}
#agenda-container .mdc-tab--active .mdc-tab__text-label {
  color: var(--neon) !important;
}
#agenda-container .mdc-tab-indicator__content--underline {
  border-color: var(--neon) !important;
}
#agenda-container .agenda-component .session h3 {
  color: var(--neon) !important;
  background: transparent !important;
  font-family: var(--font-mono) !important;
}
#agenda-container .agenda-component .session h4 {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  background: transparent !important;
}
#agenda-container .session-content {
  background: var(--surface, #111c30) !important;
  color: var(--text) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--radius, 12px) !important;
}
#agenda-container .session-content:hover {
  background: var(--surface2, #162338) !important;
}
#agenda-container .non-content {
  background: var(--bg2, #0b1220) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius, 12px) !important;
}
#agenda-container .agenda-component .label,
#agenda-container .agenda-component .content-item {
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}
#agenda-container card-sidebar {
  background: var(--bg2, #0b1220) !important;
  border-radius: var(--radius, 12px) !important;
}
#agenda-container .card-sidebar .title {
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
}
#agenda-container .card-sidebar .checkbox-container .checkbox {
  box-shadow: none !important;
  background: var(--surface, #111c30) !important;
  border-color: var(--border, rgba(255,255,255,.15)) !important;
}
#agenda-container .session-search-input,
#agenda-container input[type="text"],
#agenda-container input[type="search"] {
  background: var(--surface, #111c30) !important;
  color: var(--text) !important;
  border: 1px solid var(--border, rgba(255,255,255,.15)) !important;
}

/* ─── runevents-sponsors / runevents-single-sponsorship ── */
#sponsors-container .card h4 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════
   RUN.EVENTS — SESSIONI & SPEAKER
   I widget ereditano il linguaggio visivo del template invece di apparire come
   componenti esterni. Tutti i selettori sono scoped alle sezioni pubbliche.
══════════════════════════════════════════ */
#sessions runevents-sessions,
#speakers runevents-speakers,
#agenda runevents-agenda {
  display: block;
  width: 100%;
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}

/* Quando il provider è run.events il custom element gestisce già il layout interno. */
#sessions .runevents-grid-host,
#speakers .runevents-grid-host {
  display: block !important;
}

/* Card: copertura volutamente ampia ma limitata ai widget run.events. */
#sessions runevents-sessions .card,
#sessions runevents-sessions .session,
#sessions runevents-sessions .session-card,
#speakers runevents-speakers .card,
#speakers runevents-speakers .speaker,
#speakers runevents-speakers .speaker-card {
  background: var(--surface, #111c30) !important;
  color: var(--text) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  border-radius: var(--radius, 12px) !important;
  box-shadow: var(--shadow-neon, none) !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#sessions runevents-sessions .card:hover,
#sessions runevents-sessions .session:hover,
#sessions runevents-sessions .session-card:hover,
#speakers runevents-speakers .card:hover,
#speakers runevents-speakers .speaker:hover,
#speakers runevents-speakers .speaker-card:hover {
  transform: translateY(-2px);
  background: var(--surface2, #162338) !important;
  border-color: var(--border-hover, rgba(0,212,255,.35)) !important;
}

#sessions runevents-sessions h1,
#sessions runevents-sessions h2,
#sessions runevents-sessions h3,
#sessions runevents-sessions h4,
#speakers runevents-speakers h1,
#speakers runevents-speakers h2,
#speakers runevents-speakers h3,
#speakers runevents-speakers h4 {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  background: transparent !important;
}

#sessions runevents-sessions small,
#sessions runevents-sessions p,
#speakers runevents-speakers small,
#speakers runevents-speakers p {
  color: var(--text-muted) !important;
}

#sessions runevents-sessions .label,
#sessions runevents-sessions .badge,
#speakers runevents-speakers .label,
#speakers runevents-speakers .badge {
  font-family: var(--font-mono) !important;
  color: var(--neon) !important;
  border-color: var(--border-hover) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

#sessions runevents-sessions input,
#sessions runevents-sessions select,
#speakers runevents-speakers input,
#speakers runevents-speakers select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
}

#sessions runevents-sessions button,
#speakers runevents-speakers button {
  font-family: var(--font-mono) !important;
}

/* Modali prodotte dai widget: mantieni superfici e tipografia del sito. */
#sessions .modal-content,
#speakers .modal-content,
#sessions .mat-mdc-dialog-surface,
#speakers .mat-mdc-dialog-surface {
  background: var(--bg2, #0b1220) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
}

@media (max-width: 768px) {
  #sessions runevents-sessions .card,
  #sessions runevents-sessions .session,
  #sessions runevents-sessions .session-card,
  #speakers runevents-speakers .card,
  #speakers runevents-speakers .speaker,
  #speakers runevents-speakers .speaker-card,
  #agenda .session-content {
    border-radius: 10px !important;
  }

  #sessions runevents-sessions,
  #speakers runevents-speakers,
  #agenda runevents-agenda {
    font-size: .92rem;
  }
}

/* ══════════════════════════════════════════
   RUN.EVENTS — DIALOG / MODAL FIX
   I dialog Angular CDK vengono montati direttamente sotto <body>, fuori da
   #sessions/#speakers: devono quindi essere tematizzati a livello globale.
══════════════════════════════════════════ */

/* Overlay sempre sopra navbar, sezioni, cookie banner e pannelli del sito. */
.cdk-overlay-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  pointer-events: none !important;
}

.cdk-global-overlay-wrapper,
.cdk-overlay-connected-position-bounding-box {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12000 !important;
  pointer-events: none !important;
}

.cdk-global-overlay-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

.cdk-overlay-pane {
  position: relative !important;
  z-index: 12001 !important;
  pointer-events: auto !important;
  max-width: min(920px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
}

.cdk-overlay-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 11999 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, .78) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Superficie del dettaglio speaker/sessione. */
.cdk-overlay-container .mat-mdc-dialog-container,
.cdk-overlay-container .mat-dialog-container,
.cdk-overlay-container .mat-mdc-dialog-surface,
.cdk-overlay-container .modal-content {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
  background: var(--bg2, #0b1220) !important;
  color: var(--text, #e8f4fd) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.72), var(--shadow-neon, none) !important;
}

/* Il contenuto lungo scorre DENTRO la modale, non sotto le sezioni della pagina. */
.cdk-overlay-container .mat-mdc-dialog-content,
.cdk-overlay-container .mat-dialog-content,
.cdk-overlay-container [class*="dialog-content"],
.cdk-overlay-container .modal-body {
  box-sizing: border-box !important;
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Alcuni widget run.events mettono il contenuto direttamente nella surface. */
.cdk-overlay-container .mat-mdc-dialog-surface {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Tipografia run.events nella modale: coerente col tema del sito. */
.cdk-overlay-container h1,
.cdk-overlay-container h2,
.cdk-overlay-container h3,
.cdk-overlay-container h4 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}

.cdk-overlay-container p,
.cdk-overlay-container li,
.cdk-overlay-container .description,
.cdk-overlay-container .bio {
  color: var(--text-muted) !important;
}

.cdk-overlay-container a {
  color: var(--neon) !important;
}

/* Rende sempre visibile/cliccabile il comando di chiusura fornito dal widget. */
.cdk-overlay-container button,
.cdk-overlay-container [role="button"] {
  pointer-events: auto !important;
}

.cdk-overlay-container button[aria-label*="close" i],
.cdk-overlay-container button[title*="close" i],
.cdk-overlay-container button[aria-label*="chiudi" i],
.cdk-overlay-container .close,
.cdk-overlay-container .close-button,
.cdk-overlay-container .modal-close,
.cdk-overlay-container [class*="close"] {
  position: sticky !important;
  top: 12px !important;
  float: right !important;
  z-index: 30 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface, #111c30) !important;
  color: var(--text, #e8f4fd) !important;
  border: 1px solid var(--border-hover, rgba(255,255,255,.2)) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
}

.cdk-overlay-container button[aria-label*="close" i]:hover,
.cdk-overlay-container button[title*="close" i]:hover,
.cdk-overlay-container .close:hover,
.cdk-overlay-container .close-button:hover,
.cdk-overlay-container .modal-close:hover,
.cdk-overlay-container [class*="close"]:hover {
  color: var(--neon) !important;
  border-color: var(--neon) !important;
}

/* Evita che trasformazioni/overflow delle sezioni del sito taglino un dialog. */
body:has(.cdk-overlay-container .cdk-overlay-pane) {
  overflow: hidden;
}

@media (max-width: 768px) {
  .cdk-global-overlay-wrapper {
    padding: 10px !important;
    align-items: flex-start !important;
  }

  .cdk-overlay-pane {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin-top: 10px !important;
  }

  .cdk-overlay-container .mat-mdc-dialog-container,
  .cdk-overlay-container .mat-dialog-container,
  .cdk-overlay-container .mat-mdc-dialog-surface,
  .cdk-overlay-container .modal-content {
    max-height: calc(100dvh - 20px) !important;
    border-radius: 12px !important;
  }

  .cdk-overlay-container .mat-mdc-dialog-content,
  .cdk-overlay-container .mat-dialog-content,
  .cdk-overlay-container [class*="dialog-content"],
  .cdk-overlay-container .modal-body {
    max-height: calc(100dvh - 80px) !important;
  }
}


/* ══════════════════════════════════════════
   RUN.EVENTS — AGENDA LAYOUT FIX DEFINITIVO
   - nasconde gli h3 che run.events usa come marker dell'ora di inizio
   - mantiene sala + intervallo orario dentro la singola card
   - lascia crescere l'agenda in altezza con il contenuto, senza scrollbar interna
══════════════════════════════════════════ */

/* Documentazione run.events: .agenda-component .session h3 = time component */
#agenda-container .agenda-component .session h3,
#agenda .agenda-component .session h3,
runevents-agenda .agenda-component .session h3 {
  display: none !important;
}

/* L'agenda deve seguire l'altezza del contenuto, non diventare uno scroll-pane. */
#agenda-container,
#agenda-container runevents-agenda,
#agenda-container .agenda-component,
#agenda runevents-agenda,
#agenda .agenda-component {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Alcune release Angular applicano lo scrolling al wrapper immediatamente interno. */
#agenda-container runevents-agenda > div,
#agenda-container .agenda-component > div {
  max-height: none !important;
  overflow-y: visible !important;
}

/* La card mantiene il proprio layout naturale. */
#agenda-container .agenda-component .session,
#agenda-container .session-content,
#agenda-container .non-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ══════════════════════════════════════════
   RUN.EVENTS — AGENDA RESPONSIVE / MULTI-TRACK FIX
   Obiettivi:
   - linear / linear-v2: card a tutta larghezza
   - tabular: colonne dinamiche gestite dal widget in base a sale/track
   - nessuna scrollbar verticale interna
   - overflow orizzontale consentito SOLO dove serve per agenda multi-track
══════════════════════════════════════════ */

/* Il contenitore principale deve sempre occupare tutta la larghezza disponibile. */
#agenda-container,
#agenda-container > runevents-agenda,
#agenda-container runevents-agenda,
#agenda-container .agenda-component {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: visible !important;
}

/* Evita che wrapper Angular/flex si restringano alla larghezza del contenuto. */
#agenda-container runevents-agenda > *,
#agenda-container .agenda-component > * {
  min-width: 0 !important;
  max-width: none !important;
}

/* ──────────────────────────────────────────
   LINEAR / LINEAR-V2
   Una sola sessione per riga: la card deve
   usare tutta la larghezza disponibile.
────────────────────────────────────────── */

#agenda-container runevents-agenda[agenda-style="linear"] .session,
#agenda-container runevents-agenda[agenda-style="linear-v2"] .session,
#agenda-container runevents-agenda[agenda-style="linear"] .session-content,
#agenda-container runevents-agenda[agenda-style="linear-v2"] .session-content,
#agenda-container runevents-agenda[agenda-style="linear"] .non-content,
#agenda-container runevents-agenda[agenda-style="linear-v2"] .non-content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* I wrapper delle righe linear non devono comportarsi come colonne shrink-to-fit. */
#agenda-container runevents-agenda[agenda-style="linear"] .agenda-component,
#agenda-container runevents-agenda[agenda-style="linear-v2"] .agenda-component {
  display: block !important;
}

/* ──────────────────────────────────────────
   TABULAR / MULTI-TRACK
   NON imponiamo larghezze alle singole sessioni:
   run.events deve poter creare 2, 3, 4... colonne.
────────────────────────────────────────── */

#agenda-container runevents-agenda[agenda-style="tabular"] {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

/* Mantiene intatto il layout interno multi-colonna del widget. */
#agenda-container runevents-agenda[agenda-style="tabular"] .agenda-component {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Non forziamo width:100% sulle singole sessioni in tabular. */
#agenda-container runevents-agenda[agenda-style="tabular"] .session,
#agenda-container runevents-agenda[agenda-style="tabular"] .session-content,
#agenda-container runevents-agenda[agenda-style="tabular"] .non-content {
  max-height: none !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

/* Se il widget usa flex/grid per la riga multi-track, impediamo solo
   il collasso del contenitore, senza alterare il numero di colonne. */
#agenda-container runevents-agenda[agenda-style="tabular"] [class*="row" i],
#agenda-container runevents-agenda[agenda-style="tabular"] [class*="slot" i] {
  min-width: max-content;
}

/* ──────────────────────────────────────────
   MOBILE
   linear resta full-width.
   tabular mantiene lo scroll orizzontale naturale
   se le track non possono entrare tutte nello schermo.
────────────────────────────────────────── */

@media (max-width: 768px) {
  #agenda-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #agenda-container runevents-agenda[agenda-style="linear"],
  #agenda-container runevents-agenda[agenda-style="linear-v2"] {
    overflow-x: hidden !important;
  }

  #agenda-container runevents-agenda[agenda-style="tabular"] {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}


/* ══════════════════════════════════════════
   RUN.EVENTS — AGENDA SPACING + AVATAR ALIGNMENT
   Rifinitura visuale:
   - riduce lo spazio vuoto tra titolo Agenda e prima sessione
   - centra verticalmente avatar/icona rispetto alla card
   - non altera la logica multi-track/tabular
══════════════════════════════════════════ */

/* Il widget non deve introdurre un proprio "hero spacing" sopra le sessioni. */
#agenda-container runevents-agenda,
#agenda-container .agenda-component {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Dopo aver nascosto data/timezone/orari-slot possono restare margini/padding
   sui wrapper che li contenevano: li neutralizziamo senza toccare le colonne. */
#agenda-container .agenda-component > :first-child,
#agenda-container .agenda-component .session:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Riduce lo spazio verticale "fantasma" che alcune versioni del widget
   mantengono sul blocco session dopo la scomparsa dell'h3 dell'orario. */
#agenda-container .agenda-component .session {
  margin-top: 12px !important;
  padding-top: 0 !important;
}

#agenda-container .agenda-component .session:first-of-type {
  margin-top: 0 !important;
}

/* Se il widget usa wrapper vuoti per header giorno/timezone, non devono
   continuare a occupare altezza. */
#agenda-container .agenda-component [class*="date" i]:empty,
#agenda-container .agenda-component [class*="day" i]:empty,
#agenda-container .agenda-component [class*="timezone" i]:empty,
#agenda-container .agenda-component [class*="time-zone" i]:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Avatar/foto speaker: centratura verticale rispetto alla session card.
   Non imponiamo dimensioni né layout alle colonne. */
#agenda-container .session-content img {
  align-self: center !important;
  vertical-align: middle !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Nelle release in cui l'immagine è avvolta in un contenitore dedicato,
   centriamo il wrapper senza modificare il resto della card. */
#agenda-container .session-content [class*="avatar" i],
#agenda-container .session-content [class*="speaker-image" i],
#agenda-container .session-content [class*="speaker-photo" i],
#agenda-container .session-content [class*="image-wrapper" i],
#agenda-container .session-content *:has(> img) {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
}

/* Mantiene la rifinitura anche in tabular, ma NON forza width/grid/flex
   delle sessioni: il numero di track resta totalmente dinamico. */
#agenda-container runevents-agenda[agenda-style="tabular"] .session {
  padding-top: 0 !important;
}


/* ══════════════════════════════════════════
   RUN.EVENTS — SPACING + AVATAR FIX V2
   Corregge:
   - spazio eccessivo tra titolo Agenda e prima card
   - avatar troppo vicino al bordo sinistro
   - centratura verticale avatar rispetto alla card
   Non altera la gestione multi-track/tabular.
══════════════════════════════════════════ */

/* Con run.events i tab giorno del renderer Sessionize sono vuoti:
   non devono conservare il loro margin-bottom. */
#agenda:has(runevents-agenda) #agenda-day-tabs:empty,
#agenda:has(runevents-agenda) .agenda-day-tabs:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Il margin-bottom standard della section-title è 48px.
   Nell'agenda run.events lo riduciamo perché il widget non ha bisogno
   dello spazio riservato ai day-tabs Sessionize. */
#agenda:has(runevents-agenda) .section-title {
  margin-bottom: 24px !important;
}

/* Nessun ulteriore spazio superiore introdotto dal contenitore. */
#agenda:has(runevents-agenda) #agenda-container,
#agenda:has(runevents-agenda) runevents-agenda,
#agenda:has(runevents-agenda) .agenda-component {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* La card è il riferimento per la centratura dell'avatar. */
#agenda-container .session-content {
  position: relative !important;
}

/* Wrapper diretto dell'immagine speaker.
   Viene centrato realmente rispetto all'intera altezza della card
   e rientrato di 16px dal bordo sinistro. */
#agenda-container .session-content *:has(> img) {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

/* L'immagine stessa non deve aggiungere offset propri. */
#agenda-container .session-content img {
  display: block !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

/* Fallback per versioni del widget che assegnano classi dedicate
   al contenitore dell'avatar. */
#agenda-container .session-content [class*="avatar" i],
#agenda-container .session-content [class*="speaker-image" i],
#agenda-container .session-content [class*="speaker-photo" i],
#agenda-container .session-content [class*="image-wrapper" i] {
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* In tabular non tocchiamo width/grid/flex delle sessioni:
   le colonne continuano ad essere calcolate dinamicamente da run.events. */
#agenda-container runevents-agenda[agenda-style="tabular"] .session-content {
  position: relative !important;
}


/* ══════════════════════════════════════════
   RUN.EVENTS — GENERIC / NON-CONTENT SESSION FIX
   Mantiene intatto il layout V2 degli speaker e sistema soltanto
   sessioni generiche (registrazione, break, pranzo, ecc.).
══════════════════════════════════════════ */

/* Le sessioni generiche devono avere lo stesso contorno delle sessioni normali. */
#agenda-container .non-content {
  position: relative !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  border-radius: var(--radius, 12px) !important;
  box-sizing: border-box !important;
}

/* Stesso comportamento hover delle sessioni contenuto. */
#agenda-container .non-content:hover {
  border-color: var(--border-hover, rgba(255,255,255,.18)) !important;
}

/* Centra il blocco icona della sessione generica in verticale,
   mantenendo un rientro coerente con l'avatar speaker.
   NON tocchiamo padding o posizione del testo. */
#agenda-container .non-content *:has(> mat-icon),
#agenda-container .non-content *:has(> .material-icons),
#agenda-container .non-content *:has(> .material-icons-outlined),
#agenda-container .non-content *:has(> svg) {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
}

/* Se l'icona è direttamente nella card anziché in un wrapper. */
#agenda-container .non-content > mat-icon,
#agenda-container .non-content > .material-icons,
#agenda-container .non-content > .material-icons-outlined,
#agenda-container .non-content > svg {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Uniforma soltanto l'ingombro dell'icona, senza trasformare
   il layout interno della card. */
#agenda-container .non-content mat-icon,
#agenda-container .non-content .material-icons,
#agenda-container .non-content .material-icons-outlined {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* In tabular la correzione resta interna alla singola card:
   nessuna width/grid/flex viene forzata, quindi le track restano dinamiche. */
#agenda-container runevents-agenda[agenda-style="tabular"] .non-content {
  position: relative !important;
}