/**
 * Timeline Sidebar Component - Theme Integration
 *
 * Professional timeline display with new content highlighting support.
 * Integrated with unified design system for consistent styling.
 *
 * Features:
 * - Auto-inject sidebar positioning
 * - Compact and ultra-compact modes
 * - New content highlighting (14-day system)
 * - 70vh height management with custom scrollbars
 * - Responsive design with unified breakpoints
 */

/* === BLOCK WRAPPER === */
.qm-timeline-sidebar-block {
    background: var(--qm-bg-primary, #ffffff);
    border: 1px solid var(--qm-border-color, #e0e0e0);
    border-radius: var(--qm-border-radius, 8px);
    padding: var(--qm-space-lg, 20px);
    color: var(--qm-text-primary, #333333);
    font-family: var(--qm-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    box-shadow: var(--qm-shadow, 0 2px 4px rgba(0,0,0,0.1));
    /* Height control for non-floating sidebars */
    height: var(--qm-sidebar-height, auto);
    overflow-y: auto;
    box-sizing: border-box;
    transition: var(--qm-transition, all 0.3s ease);
}

/* Compact Mode Adjustments */
.qm-timeline-sidebar-block.qm-compact-mode {
    padding: var(--qm-space-md, 15px);
}

/* === TIMELINE SIDEBAR TITLE === */
.qm-timeline-sidebar-title {
    color: var(--qm-timeline-title-color, var(--qm-text-primary, #333333));
}

/* === PHASE FILTER === */
.qm-timeline-filter {
    margin-bottom: var(--qm-space-lg, 20px);
    padding: var(--qm-space-sm, 12px);
    background: var(--qm-bg-secondary, #f5f5f5);
    border-radius: var(--qm-border-radius-sm, 6px);
    border: 1px solid var(--qm-border-color, #e0e0e0);
}

.qm-timeline-filter label {
    display: block;
    font-size: var(--qm-text-xs, 13px);
    font-weight: var(--qm-font-semibold, 600);
    margin-bottom: var(--qm-space-xs, 8px);
    color: var(--qm-text-primary, #333333);
}

.qm-phase-filter-select {
    width: 100%;
    padding: var(--qm-space-xs, 8px) var(--qm-space-sm, 12px);
    border: 1px solid var(--qm-border-color, #e0e0e0);
    border-radius: var(--qm-border-radius-sm, 4px);
    background: var(--qm-bg-primary, #ffffff);
    color: var(--qm-text-primary, #333333);
    font-size: var(--qm-text-xs, 13px);
    font-family: var(--qm-font-sans);
    cursor: pointer;
    transition: var(--qm-transition-fast, all 0.2s ease);
    outline: none;
}

.qm-phase-filter-select:focus {
    border-color: var(--qm-accent-color, #007cba);
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
}

/* === TIMELINE POSTS CONTAINER === */
.qm-timeline-posts {
    position: relative;
}

/* === TIMELINE ITEMS === */
.qm-timeline-item {
    position: relative;
    margin-bottom: var(--qm-space-sm, 12px);
    background: var(--qm-bg-primary, #ffffff);
    border-radius: var(--qm-border-radius-sm, 6px);
    transition: var(--qm-transition-fast, all 0.2s ease);
    overflow: hidden;
}

.qm-timeline-item:last-child {
    margin-bottom: 0;
}

/* Timeline Link */
.qm-timeline-link {
    display: flex;
    align-items: flex-start;
    padding: var(--qm-space-sm, 12px);
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--qm-border-color, #ddd);
    position: relative;
    transition: var(--qm-transition-fast, all 0.2s ease);
}

.qm-timeline-link:hover {
    background: var(--qm-bg-secondary, #f5f5f5);
    transform: translateX(2px);
}

.qm-timeline-link:focus {
    outline: 2px solid var(--qm-accent-color, #007cba);
    outline-offset: 2px;
}

/* === TIMELINE CONTENT === */
/* Timeline Content Container - clean slate approach */
.qm-timeline-content {
    flex: 1;
    padding-left: var(--qm-space-lg, 20px); /* Extra ruimte voor marker dot */
    position: relative;
}

/* Timeline Title - basis styling */
.qm-timeline-title {
    margin: 0 0 var(--qm-space-xs, 4px) 0;
    font-size: var(--qm-text-sm, 14px);
    font-weight: var(--qm-font-semibold, 600);
    line-height: var(--qm-leading-tight, 1.3);
    color: var(--qm-text-primary, #333333);
    position: relative;
}

/* Marker Dot - gekoppeld aan titel voor perfecte alignment */
.qm-timeline-title::before {
    content: '';
    position: absolute;
    left: -28px; /* 20px padding + 8px offset */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: var(--qm-border-radius-full, 50%);
    background-color: var(--marker-color, var(--qm-border-color, #ddd));
    border: 2px solid var(--qm-bg-primary, #ffffff);
    box-shadow: 0 0 0 1px var(--qm-border-color, #e0e0e0);
    z-index: 2;
}

/* === BADGE SYSTEM === */
/* Badge Container - onder titel in content flow */
.qm-timeline-badge {
    display: inline-block;
    margin-top: var(--qm-space-xs, 4px);
    font-size: 11px;
    padding: 2px var(--qm-space-xs, 6px);
    border-radius: var(--qm-border-radius-sm, 3px);
    font-weight: var(--qm-font-semibold, 600);
    white-space: nowrap;
}

/* Badge styling voor verschillende types */
.qm-timeline-badge.qm-badge-new-phase {
    background: var(--qm-new-phase-badge, #F4A261);
    color: white;
}

.qm-timeline-badge.qm-badge-new-post {
    background: var(--qm-new-post-badge, #2A9D8F);
    color: white;
}

.qm-timeline-badge.qm-timeline-context-badge {
    background: rgba(102, 102, 102, 0.1);
    color: var(--qm-text-muted, #666);
    font-style: italic;
    font-size: 10px;
    border: 1px solid rgba(102, 102, 102, 0.2);
}

.qm-timeline-context {
    margin: 0 0 var(--qm-space-xs, 6px) 0;
    font-size: var(--qm-text-xs, 12px);
    font-style: italic;
    color: var(--qm-text-muted, #666);
    line-height: var(--qm-leading-tight, 1.3);
}

.qm-timeline-date {
    display: block;
    font-size: 11px;
    color: var(--qm-text-secondary, #888);
    margin: 0;
}

/* === CURRENT POST HIGHLIGHTING === */
.qm-timeline-item.qm-current-post .qm-timeline-link {
    background: #e7f3ff;
    border-left-color: var(--qm-accent-color, #007cba);
}

.qm-timeline-item.qm-current-post .qm-timeline-title {
    font-weight: var(--qm-font-bold, 700);
    color: var(--qm-accent-color, #007cba);
}

.qm-timeline-item.qm-current-post .qm-timeline-title::before {
    background-color: var(--qm-accent-color, #007cba);
}

/* === NEW CONTENT HIGHLIGHTING - CRITICAL === */
/* New Post Highlight - Blue gradient background like timeline-posts */
.qm-timeline-item.qm-post-new {
    position: relative;
    overflow: visible;
}

.qm-timeline-item.qm-post-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--qm-new-post-primary, rgba(90, 150, 229, 0.15));
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

/* New Phase Highlight - Orange gradient background like timeline-posts */
.qm-timeline-item.qm-phase-new {
    position: relative;
    overflow: visible;
}

.qm-timeline-item.qm-phase-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--qm-new-phase-primary, rgba(229, 90, 90, 0.15));
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

/* Priority: orange fase wins over blue post - override blue when both classes present */
.qm-timeline-item.qm-post-new.qm-phase-new::before {
    background: var(--qm-new-phase-primary, rgba(229, 90, 90, 0.15)) !important;
}

/* Ensure content stays above gradient overlay */
.qm-timeline-item.qm-post-new .qm-timeline-link,
.qm-timeline-item.qm-phase-new .qm-timeline-link {
    position: relative;
    z-index: 2;
}

/* Current post overrides new highlighting for better visibility */
.qm-timeline-item.qm-current-post.qm-post-new .qm-timeline-link,
.qm-timeline-item.qm-current-post.qm-phase-new .qm-timeline-link,
.qm-floating-sidebar .qm-timeline-item.qm-current-post.qm-post-new .qm-timeline-link,
.qm-floating-sidebar .qm-timeline-item.qm-current-post.qm-phase-new .qm-timeline-link {
    background: var(--qm-bg-secondary, #f8f9fa) !important;
    border-left-color: var(--qm-accent-color, #007cba) !important;
}

.qm-timeline-item.qm-current-post.qm-post-new .qm-timeline-title::before,
.qm-timeline-item.qm-current-post.qm-phase-new .qm-timeline-title::before,
.qm-floating-sidebar .qm-timeline-item.qm-current-post.qm-post-new .qm-timeline-title::before,
.qm-floating-sidebar .qm-timeline-item.qm-current-post.qm-phase-new .qm-timeline-title::before {
    background-color: var(--qm-accent-color, #007cba) !important;
}

/* === COMPACT MODE ADJUSTMENTS === */
.qm-timeline-sidebar-block.qm-compact-mode .qm-timeline-link {
    padding: var(--qm-space-xs, 8px) var(--qm-space-sm, 12px);
}

.qm-timeline-sidebar-block.qm-compact-mode .qm-timeline-title {
    font-size: var(--qm-text-xs, 13px);
    margin-bottom: var(--qm-space-xs, 2px);
}

.qm-timeline-sidebar-block.qm-compact-mode .qm-timeline-date {
    font-size: 10px;
}

.qm-timeline-sidebar-block.qm-compact-mode .qm-timeline-content {
    padding-left: var(--qm-space-md, 16px); /* Minder padding in compact mode */
}

.qm-timeline-sidebar-block.qm-compact-mode .qm-timeline-title::before {
    width: 10px;
    height: 10px;
    left: -24px; /* Aangepast voor compact padding */
}

/* === ULTRA COMPACT MODE === */
.qm-timeline-sidebar-block.qm-ultra-compact-mode {
    padding: var(--qm-space-xs, 8px) var(--qm-space-sm, 12px);
    font-size: 0.85rem;
    line-height: var(--qm-leading-tight, 1.2);
}

.qm-ultra-compact-mode .qm-timeline-sidebar-title {
    font-size: var(--qm-text-base, 1rem);
    margin-bottom: var(--qm-space-sm, 0.5rem);
    font-weight: var(--qm-font-semibold, 600);
}

.qm-ultra-compact-mode .qm-timeline-filter {
    margin-bottom: var(--qm-space-sm, 0.75rem);
    padding: var(--qm-space-xs, 8px) 10px;
    border-radius: var(--qm-border-radius-sm, 4px);
}

.qm-ultra-compact-mode .qm-timeline-filter select {
    font-size: 0.8rem;
    padding: var(--qm-space-xs, 4px) var(--qm-space-xs, 6px);
    border-radius: var(--qm-border-radius-sm, 3px);
}

.qm-ultra-compact-mode .qm-timeline-list {
    gap: 2px;
}

.qm-ultra-compact-mode .qm-timeline-item {
    padding: var(--qm-space-xs, 4px) var(--qm-space-xs, 8px);
    margin-bottom: 2px;
    border-radius: var(--qm-border-radius-sm, 3px);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #f0f0f0;
    transition: var(--qm-transition-fast, all 0.15s ease);
}

.qm-ultra-compact-mode .qm-timeline-item:hover {
    background: var(--qm-bg-secondary, #f8f9fa);
    border-color: var(--qm-accent-color, #007cba);
    transform: translateX(2px);
}

.qm-ultra-compact-mode .qm-timeline-link {
    font-size: 0.8rem;
    line-height: 1.25;
    font-weight: var(--qm-font-medium, 500);
    padding: 0;
    color: var(--qm-text-primary, #2c3e50);
    text-decoration: none;
    display: block;
}

.qm-ultra-compact-mode .qm-timeline-link:hover {
    color: var(--qm-accent-color, #007cba);
}

.qm-ultra-compact-mode .qm-timeline-context {
    font-size: 0.7rem;
    color: var(--qm-text-secondary, #888);
    margin-top: 2px;
    font-weight: var(--qm-font-normal, 400);
    opacity: 0.8;
    line-height: 1.1;
}

.qm-ultra-compact-mode .qm-phase-badge {
    font-size: 0.65rem;
    padding: 1px var(--qm-space-xs, 4px);
    border-radius: var(--qm-border-radius, 8px);
    margin-top: 2px;
    display: inline-block;
    font-weight: var(--qm-font-medium, 500);
    white-space: nowrap;
}

/* New content badges for ultra compact */
.qm-ultra-compact-mode .qm-badge {
    font-size: 0.6rem;
    padding: 1px 3px;
    border-radius: var(--qm-border-radius-sm, 6px);
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: var(--qm-z-dropdown, 10);
}

/* === EMPTY STATE === */
.qm-timeline-empty {
    text-align: center;
    padding: var(--qm-space-2xl, 40px) var(--qm-space-lg, 20px);
    color: var(--qm-text-muted, #666);
    font-style: italic;
}

.qm-timeline-empty p {
    margin: 0;
    font-size: var(--qm-text-sm, 14px);
}

/* === FLOATING SIDEBAR SPECIFIC STYLES === */
.qm-floating-sidebar {
    background: var(--qm-bg-primary, #ffffff) !important;
}

.qm-floating-sidebar .qm-timeline-filter {
    position: sticky;
    top: 0;
    background: var(--qm-bg-primary, #ffffff);
    z-index: var(--qm-z-dropdown, 10);
    padding: var(--qm-space-sm, 12px);
    margin: calc(-1 * var(--qm-space-lg, 20px)) calc(-1 * var(--qm-space-lg, 20px)) var(--qm-space-md, 15px) calc(-1 * var(--qm-space-lg, 20px));
    border-bottom: 1px solid var(--qm-border-color, #eee);
}

.qm-floating-sidebar .qm-timeline-posts {
    padding: 0 var(--qm-space-xs, 5px);
}

/* Enhanced hover effects for floating sidebar */
.qm-floating-sidebar .qm-timeline-link:hover {
    background: var(--qm-bg-secondary, #f8f9fa) !important;
    transform: translateX(-2px);
}

/* Better spacing in floating sidebar */
.qm-floating-sidebar .qm-timeline-item {
    margin-bottom: var(--qm-space-xs, 8px);
}

.qm-floating-sidebar .qm-timeline-link {
    border-radius: var(--qm-border-radius-sm, 6px);
    margin-bottom: var(--qm-space-xs, 4px);
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 767px) {
    .qm-timeline-sidebar-block {
        padding: var(--qm-space-md, 15px);
        max-width: calc(100vw - 30px); /* Account for page margins */
        overflow-x: hidden;
        box-sizing: border-box;
        margin: 0 auto; /* Center if needed */
    }

    .qm-timeline-filter {
        padding: 10px;
        margin-bottom: var(--qm-space-md, 15px);
    }

    .qm-timeline-link {
        padding: 10px;
    }

    .qm-timeline-content {
        padding-left: 18px; /* Mobiele padding voor marker ruimte */
    }

    .qm-timeline-title::before {
        left: -26px; /* Aangepaste positie voor mobile padding */
        width: 10px;
        height: 10px;
    }

    .qm-timeline-title {
        font-size: var(--qm-text-xs, 13px);
    }

    .qm-timeline-context {
        font-size: 11px;
    }

    .qm-timeline-date {
        font-size: 10px;
    }

    /* Ultra compact mobile adjustments */
    .qm-ultra-compact-mode {
        padding: var(--qm-space-xs, 6px) var(--qm-space-xs, 8px);
    }

    .qm-ultra-compact-mode .qm-timeline-item {
        padding: 3px var(--qm-space-xs, 5px);
    }

    .qm-ultra-compact-mode .qm-timeline-link {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}

/* iPad specific optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .qm-ultra-compact-mode .qm-timeline-item {
        padding: 3px var(--qm-space-xs, 6px);
        margin-bottom: 1px;
    }

    .qm-ultra-compact-mode .qm-timeline-link {
        font-size: 0.75rem;
    }

    .qm-ultra-compact-mode .qm-timeline-context {
        font-size: 0.65rem;
    }
}

/* === ACCESSIBILITY & PRINT === */
/* Print Styles */
@media print {
    .qm-timeline-sidebar-block {
        box-shadow: none;
        border: 1px solid var(--qm-border-color, #ddd);
    }

    .qm-timeline-filter {
        display: none;
    }

    .qm-timeline-link:hover {
        transform: none;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .qm-timeline-item,
    .qm-timeline-link,
    .qm-timeline-sidebar-block {
        transition: none;
    }

    .qm-timeline-link:hover,
    .qm-floating-sidebar .qm-timeline-link:hover {
        transform: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .qm-timeline-sidebar-block {
        border-width: 2px;
        border-color: #000;
    }

    .qm-timeline-link {
        border-left-width: 4px;
        border-left-color: #000;
    }

    .qm-timeline-title::before {
        border-color: #000;
        background-color: #000;
    }
}