/*
    Session / schedule-item detail styling.

    Extracted from the inline <style> in Pages/Content/SessionDetail.cshtml so the My Conference
    console can render the same detail UI instead of a second, home-made one. Public SessionDetail
    and both console detail pages load this file.

    Pages/Content/ScheduledEventDetail.cshtml deliberately keeps its own inline copy: it redefines
    .session-detail-card and .session-detail-title differently inside its media queries, so folding
    it in here would change that page's responsive layout.
*/

    /* Back Navigation */
    .back-nav-section {
        padding: 1.5rem 0 0;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        color: var(--theme-primary);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .back-link:hover {
        color: var(--theme-primary-dark);
    }

    .back-link i {
        transition: transform 0.2s ease;
    }

    .back-link:hover i {
        transform: translateX(-3px);
    }

    /* Session Detail Card */
    .session-detail-card {
        background: #fff;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }

    .session-title-row {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .session-detail-title {
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 700;
        color: var(--theme-dark);
        margin-bottom: 0;
        line-height: 1.3;
        flex: 1;
    }

    /* Star button in title area */
    .star-btn-title {
        position: relative;
        top: auto;
        right: auto;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }

    .star-btn-title i {
        font-size: 1.25rem;
    }

    /* Action buttons container */
    .session-action-buttons {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    /* Action buttons (print, share) */
    .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: #999;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .action-btn:hover {
        color: var(--theme-primary);
        background: rgba(var(--theme-primary-rgb, 0, 123, 255), 0.1);
    }

    .action-btn i {
        font-size: 1.1rem;
    }

    /* Tracks - Second Most Prominent */
    .session-tracks {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .track-badge {
        display: inline-block;
        padding: 0.4rem 0.9rem;
        background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark, #0056b3) 100%);
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .track-badge:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Level - Third */
    .session-level {
        font-size: 0.95rem;
        color: #666;
        font-weight: 500;
    }

    .session-level i {
        color: var(--theme-primary);
        font-size: 0.9rem;
    }

    /* Schedule Info */
    .session-schedule-info {
        background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 0, 123, 255), 0.1) 0%, rgba(var(--theme-primary-rgb, 0, 123, 255), 0.05) 100%);
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        border-left: 4px solid var(--theme-primary);
    }

    .schedule-badge {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .schedule-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 500;
        color: var(--theme-dark);
    }

    .schedule-item i {
        color: var(--theme-primary);
        font-size: 1rem;
        width: 20px;
        text-align: center;
    }

    @media (max-width: 767.98px) {
        .schedule-badge {
            flex-direction: column;
            gap: 0.75rem;
        }
    }

    .session-description {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #444;
    }

    .session-prerequisites {
        background: #f8f9fa;
        padding: 1.5rem;
        border-radius: 8px;
        border-left: 4px solid var(--theme-primary);
    }

    .session-prerequisites h3 {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        color: var(--theme-dark);
        margin-bottom: 0.75rem;
    }

    .session-prerequisites p {
        margin: 0;
        color: #555;
    }

    /* Session Files */
    .session-files {
        background: #f8f9fa;
        padding: 1.5rem;
        border-radius: 8px;
        border-left: 4px solid #28a745;
    }

    .session-files h3 {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        color: var(--theme-dark);
        margin-bottom: 0.5rem;
    }

    .files-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .file-download-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.875rem 1rem;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        text-decoration: none;
        color: inherit;
        transition: all 0.2s ease;
    }

    .file-download-item:hover {
        background: #f8f9fa;
        border-color: var(--theme-primary);
        color: inherit;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .file-download-item .file-icon {
        font-size: 1.5rem;
        color: var(--theme-primary);
        width: 32px;
        text-align: center;
    }

    .file-download-item .file-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .file-download-item .file-name {
        font-weight: 500;
        color: var(--theme-dark);
    }

    .file-download-item .file-size {
        font-size: 0.8rem;
        color: #888;
    }

    .file-download-item .download-icon {
        color: #888;
        transition: color 0.2s ease;
    }

    .file-download-item:hover .download-icon {
        color: var(--theme-primary);
    }

    /* Files Hint (for non-authenticated users) */
    .session-files-hint {
        background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 0, 123, 255), 0.05) 0%, rgba(var(--theme-primary-rgb, 0, 123, 255), 0.02) 100%);
        padding: 1rem 1.25rem;
        border-radius: 8px;
        border: 1px dashed rgba(var(--theme-primary-rgb, 0, 123, 255), 0.3);
    }

    .files-hint-content {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .files-hint-icon {
        font-size: 1.5rem;
        color: var(--theme-primary);
        opacity: 0.7;
    }

    .files-hint-text {
        font-size: 0.95rem;
        color: #666;
    }

    .files-hint-link {
        display: block;
        font-size: 0.9rem;
        color: var(--theme-primary);
        font-weight: 500;
    }

    /* Jump row.

       Sits under the date/time/room block and says what the rest of the page holds: the rating
       form, the prerequisites, the speaker's files. Everything it points at is below the abstract
       and the floor plan, which on a phone is several screens down, so without this the page reads
       as though it ends at the map. Pills rather than a nav list: there are never more than three,
       and they wrap instead of scrolling sideways. */
    .session-jump-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .session-jump {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.5rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        background: #fff;
        color: var(--theme-dark);
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .session-jump i {
        color: var(--theme-primary);
    }

    .session-jump:hover,
    .session-jump:focus-visible {
        color: var(--theme-dark);
        border-color: var(--theme-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    /* Rating is the one that leaves the page, and the one an attendee is most often here for. */
    .session-jump-primary {
        background: var(--theme-primary);
        border-color: var(--theme-primary);
        color: #fff;
    }

    .session-jump-primary i,
    .session-jump-primary:hover,
    .session-jump-primary:focus-visible {
        color: #fff;
    }

    /* The console header does not overlay the page, so this is only breathing room above a
       heading that was just jumped to. */
    #session-prerequisites,
    #session-resources,
    #session-feedback {
        scroll-margin-top: 1rem;
    }

    @media (prefers-reduced-motion: reduce) {
        .session-jump {
            transition: none;
        }

        .session-jump:hover,
        .session-jump:focus-visible {
            transform: none;
        }
    }

    /* Session Feedback CTA */
    .session-feedback-cta {
        padding: 1.5rem;
        background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }

    .feedback-cta-content {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .feedback-cta-icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark, var(--theme-primary)) 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .feedback-cta-text {
        flex: 1;
    }

    .feedback-cta-title {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--theme-dark);
        margin: 0 0 0.35rem 0;
    }

    .feedback-cta-description {
        font-size: 0.9rem;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
    }

    .feedback-cta-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }

    .feedback-btn {
        display: inline-flex;
        align-items: center;
        font-weight: 500;
        padding: 0.625rem 1.25rem;
    }

    .feedback-submitted-badge {
        display: inline-flex;
        align-items: center;
        font-size: 0.9rem;
        color: #16a34a;
        font-weight: 500;
        background: #dcfce7;
        padding: 0.5rem 0.875rem;
        border-radius: 6px;
    }

    .feedback-login-hint {
        font-size: 0.85rem;
        color: #64748b;
    }

    .feedback-coming-soon {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        color: #64748b;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }

    /* Sidebar */
    .sidebar-card {
        background: #fff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
        margin-bottom: 1.5rem;
    }

    .sidebar-title {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--theme-dark);
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #f0f0f0;
    }

    /* Speaker Card Expanded */
    .speakers-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .speaker-card-expanded {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
    }

    .speaker-header {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .speaker-avatar-lg {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .speaker-avatar-placeholder-lg {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--theme-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .speaker-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .speaker-avatar-link {
        flex-shrink: 0;
    }

    .speaker-avatar-link:hover .speaker-avatar-lg {
        border-color: var(--theme-primary-dark);
        transform: scale(1.05);
    }

    .speaker-avatar-lg {
        transition: all 0.2s ease;
    }

    .speaker-name-link {
        font-weight: 700;
        color: var(--theme-dark);
        font-size: 1.1rem;
        line-height: 1.3;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .speaker-name-link:hover {
        color: var(--theme-primary);
    }

    .speaker-tagline {
        font-size: 0.95rem;
        color: var(--theme-primary);
        font-weight: 500;
    }

    .speaker-detail-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.95rem;
        color: #555;
        margin-bottom: 0.5rem;
    }

    .speaker-detail-row i {
        color: #888;
        width: 16px;
        text-align: center;
    }

    .speaker-recognitions {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.95rem;
        color: #666;
        background: #fff;
        padding: 0.75rem;
        border-radius: 6px;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    .speaker-recognitions i {
        color: #f59e0b;
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

    .speaker-social-links {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .speaker-social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: #f8f9fa;
        border-radius: 50%;
        color: var(--theme-dark);
        font-size: 0.95rem;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .speaker-social-link:hover {
        background: var(--theme-primary);
        color: #fff;
        transform: translateY(-2px);
    }

    .speaker-bio-preview {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #444;
        margin-bottom: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e9ecef;
    }

    .view-profile-link {
        display: inline-flex;
        align-items: center;
        font-size: 1rem;
        font-weight: 500;
        color: var(--theme-primary);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .view-profile-link:hover {
        color: var(--theme-primary-dark);
    }

    .view-profile-link i {
        transition: transform 0.2s ease;
    }

    .view-profile-link:hover i {
        transform: translateX(3px);
    }

    /* Responsive */
    @media (max-width: 991.98px) {
        .session-detail-title {
            font-size: 1.75rem;
        }

        .session-detail-card {
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
    }

    @media (max-width: 767.98px) {
        .session-detail-title {
            font-size: 1.5rem;
        }

        .session-description,
        .speaker-bio-preview {
            font-size: 1rem;
        }
    }

    /* Print Styles */
    @media print {
        /* Hide navigation and interactive elements. .mc-detail-back is the My Conference
           equivalent of .back-nav-section — the console loads this file but not print.css,
           so without it the back link prints. */
        .back-nav-section,
        .mc-detail-back,
        .star-btn,
        .star-btn-title,
        .action-btn,
        .session-action-buttons,
        .speaker-social-links,
        .view-profile-link,
        .session-feedback-cta {
            display: none !important;
        }

        /* Remove decorative shadows and borders */
        .session-detail-card,
        .sidebar-card,
        .speaker-card-expanded {
            box-shadow: none !important;
            border: 1px solid #ddd;
        }

        /* Ensure links don't show URLs after them */
        a[href]:after {
            content: none !important;
        }

        /* Only avoid breaks inside individual speaker cards, not main containers */
        .speaker-card-expanded {
            break-inside: avoid;
        }

        /* Optimize speaker bio for print */
        .speaker-bio-preview {
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* Reduce spacing to fit more content on first page */
        .session-detail-card,
        .sidebar-card {
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .section {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
    }


/* --- Schedule-block-only pieces, copied from Pages/Content/ScheduledEventDetail.cshtml.
   Copied rather than moved: that page's media queries redefine .session-detail-card and
   .session-detail-title differently, so folding its whole block in here would change its
   responsive layout. Only the rules unique to a schedule block are taken, and only the ones
   that belong at top level — its @media print rules stay with that page. --- */

.schedule-detail-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.schedule-detail-signin {
    padding: 0.75rem 1rem;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid var(--theme-primary, #0d6efd);
    border-radius: 8px;
    color: #555;
    font-size: 0.95rem;
}

.schedule-detail-signin i {
    color: var(--theme-primary, #0d6efd);
}