/* ==========================================================================
   RUN.EVENTS WIDGETS — Linear Agenda MOBILE Layout
   The mobile widget uses a completely different HTML structure than desktop.
   This file targets the mobile-specific structure (app-agenda-linear).
   ========================================================================== */

/* --- Mobile Container --- */
app-agenda-linear .agenda-component {
    font-family: var(--font-body);
    padding: var(--space-sm) !important;
}

/* --- Mobile Date Tabs (Material tabs) --- */
app-agenda-linear .mat-mdc-tab-group {
    margin: 0 0 var(--space-md) 0 !important;
}

/* Fix tab header - no extra spacing */
app-agenda-linear .mat-mdc-tab-header {
    margin: 0 !important;
}

/* Hide pagination buttons - not needed for few tabs */
app-agenda-linear .mat-mdc-tab-header-pagination {
    display: none !important;
}

/* Reset all internal Material tab container spacing */
app-agenda-linear .mat-mdc-tab-label-container {
    margin: 0 !important;
    padding: 0 !important;
}

app-agenda-linear .mat-mdc-tab-list {
    margin: 0 !important;
    padding: 0 !important;
}

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

/* Tab button - padding inside each tab */
app-agenda-linear .mdc-tab {
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: var(--space-sm) var(--space-md) !important;  /* vertical | horizontal */
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--color-text-muted) !important;
    flex: 0 0 auto !important;  /* Don't grow or shrink */
}

/* Remove ripple elements that may add extra width */
app-agenda-linear .mdc-tab__ripple,
app-agenda-linear .mat-mdc-tab-ripple {
    position: absolute !important;
    pointer-events: none !important;
}

/* Reset internal tab content spacing */
app-agenda-linear .mdc-tab__content {
    margin: 0 !important;
    padding: 0 !important;
}

app-agenda-linear .mdc-tab--active {
    background: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

/* Hide the underline indicator - we use background instead */
app-agenda-linear .mdc-tab-indicator {
    display: none !important;
}

/* --- Mobile Time Label (h3) --- */
app-agenda-linear .session h3 {
    font-family: var(--font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !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-md) !important;
    margin-bottom: var(--space-sm) !important;
    display: inline-block !important;
    box-shadow: 0 4px 12px hsla(var(--color-secondary-hsl), 0.25) !important;
}

/* ==========================================================================
   Mobile Session Card - STACKED LAYOUT
   ROW 1: Photo(s) / Icon
   ROW 2: Speaker name(s)
   ROW 3: Session Title
   ROW 4: Room / Time
   ROW 5: Labels
   ========================================================================== */
app-agenda-linear .session .d-flex.session-content,
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: linear-gradient(
        160deg,
        var(--color-bg) 0%,
        var(--color-surface) 55%,
        var(--color-surface-alt) 100%
    ) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
    border: 1px solid hsla(var(--color-primary-hsl), 0.1) !important;
    border-left: 4px solid var(--color-primary) !important;
}

/* Non-content blocks get secondary color accent */
app-agenda-linear .session .d-flex.non-content {
    border-left-color: var(--color-secondary) !important;
}

/* --- ROW 1: Speaker Photo Container - LEFT ALIGNED --- */
app-agenda-linear .speakers-images-container {
    width: auto !important;  /* Don't stretch full width */
    min-width: auto !important;
    order: 1 !important;
    border-top: none !important;  /* Remove horizontal line */
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;  /* Tight spacing to name below */
    align-self: flex-start !important;  /* LEFT align the container itself */
}

app-agenda-linear .speakers-images {
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;  /* Photos in a row */
    align-items: center !important;
    justify-content: flex-start !important;  /* LEFT align */
    gap: var(--space-xs) !important;
    flex-wrap: wrap !important;
}

/* Speaker photo - 25% larger than previous (55px -> 69px) */
app-agenda-linear .speakers-images img {
    width: 69px !important;
    height: 69px !important;
    border-radius: var(--radius-md) !important;
    object-fit: cover !important;
    border: 2px solid var(--color-bg) !important;
    box-shadow: 0 2px 8px hsla(var(--color-primary-hsl), 0.15) !important;
}

/* --- Non-content Icon (star, restaurant, etc) - 25% larger, LEFT aligned --- */
app-agenda-linear .speakers-images-container .icon {
    width: 69px !important;
    height: 69px !important;
    min-width: 69px !important;
    min-height: 69px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;  /* Center icon within its box */
}

app-agenda-linear .speakers-images-container .icon mat-icon {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* --- ROW 2-4: Content Container --- */
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;  /* Tight default gap */
    order: 2 !important;
}

/* Session Title (h4) - ROW 3 */
app-agenda-linear .content-container h4 {
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    margin: 0 !important;
    margin-top: var(--space-xs) !important;  /* Slightly more space above title */
    line-height: 1.3 !important;
    order: 2 !important;
}

/* Non-content title in secondary color */
app-agenda-linear .d-flex.non-content .content-container h4 {
    color: var(--color-secondary) !important;
}

/* Speaker Name - ROW 2 (comes before title visually) */
app-agenda-linear .content-container .d-flex {
    order: 1 !important;
}

app-agenda-linear .content-container p {
    margin: 0 !important;
    margin-bottom: var(--space-sm) !important;  /* Space between speaker name and title */
    font-size: 0.8rem !important;
}

app-agenda-linear .content-container p span {
    display: inline-block !important;
    font-weight: 600 !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.75rem !important;
    margin-right: var(--space-xs) !important;
}

/* Room/Time Pills - ROW 4 */
app-agenda-linear .content-container > div:not(.labels):not(.d-flex) {
    order: 3 !important;
    margin-bottom: var(--space-xs) !important;  /* More space before labels */
}

app-agenda-linear .content-container .content-item {
    display: inline-block !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;  /* Rounded corners like labels */
    margin-right: var(--space-xs) !important;
    margin-bottom: 2px !important;
}

/* Regular sessions: styled boxes matching labels */
app-agenda-linear .d-flex.session-content .content-item {
    background: hsla(var(--color-primary-hsl), 0.1) !important;
    color: var(--color-text-muted) !important;
}

/* ==========================================================================
   ROW 5: Tags/Labels - Match Desktop Style (opacity bg, solid text)
   ========================================================================== */
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;
}

app-agenda-linear .labels .label {
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border: none !important;
    transition: all var(--transition-fast) !important;
    /* Let widget's inline background-color show through */
    /* Note: CSS cannot create translucent versions of dynamic inline colors */
    /* Labels will have solid backgrounds matching their assigned colors */
}

/* Hide labels after 5th to prevent overflow on mobile */
app-agenda-linear .labels > div:nth-child(n+6) {
    display: none !important;
}

/* --- Mobile Sidebar (Filter) --- */
app-agenda-linear .card-sidebar {
    display: none !important;  /* Hide sidebar on mobile - takes too much space */
}

/* Show sidebar on larger screens */
@media (min-width: 769px) {
    app-agenda-linear .card-sidebar {
        display: block !important;
    }
}

/* --- Timezone notice --- */
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;
}

/* ==========================================================================
   Session Popup - LEFT ALIGNED content
   ========================================================================== */
app-agenda-linear app-speaker-session-popup .popup .inner-container {
    text-align: left !important;
    align-items: flex-start !important;
    padding: var(--space-lg) !important;
}

/* Room, Date, Likes pills - horizontal row with wrap, LEFT aligned */
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;
}

/* Session title (h3) - 50% smaller */
app-agenda-linear app-speaker-session-popup h3 {
    text-align: left !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

/* Labels container */
app-agenda-linear app-speaker-session-popup .labels {
    justify-content: flex-start !important;
}

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