/**
 * Frontend Styles for Proqyz Changelog Plugin
 * Timeline design with Tailwind CSS
 */

/* Timeline line */
.timeline-line {
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
    z-index: 1;
}

.log-entry:last-child .timeline-line {
    display: none;
}

/* Ensure timeline line is visible */
.log-entry {
    position: relative;
}

.log-entry .timeline-line {
    display: block !important;
}

/* Badge styles matching design.html */
.badge-new {
    background-color: #dcfce7;
    color: #166534;
}

.badge-improvement {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-fix {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Prose styling enhancements for description content */
.proqyz-changelog-container .prose,
.log-entry .prose {
    color: #475569;
}

.log-entry .prose p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.log-entry .prose ul,
.log-entry .prose ol {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.log-entry .prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.log-entry .prose ul > li {
    position: relative;
    padding-left: 0.5em;
}

.log-entry .prose ul > li::before {
    content: "";
    position: absolute;
    background-color: #64748b;
    border-radius: 50%;
    width: 0.375em;
    height: 0.375em;
    top: 0.6875em;
    left: 0.25em;
}

.log-entry .prose strong {
    color: #0f172a;
    font-weight: 600;
}

.log-entry .prose a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 500;
}

.log-entry .prose a:hover {
    color: #1d4ed8;
}

.log-entry .prose code {
    background-color: #f1f5f9;
    padding: 0.125em 0.375em;
    border-radius: 0.25em;
    font-size: 0.875em;
    font-weight: 500;
    color: #0f172a;
}

.log-entry .prose pre {
    background-color: #1e293b;
    color: #f1f5f9;
    padding: 1em;
    border-radius: 0.5em;
    overflow-x: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.log-entry .prose pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Print styles */
@media print {
    .log-entry .prose {
        color: #000;
    }
    
    .log-entry [class*="shadow"] {
        box-shadow: none !important;
    }
    
    .timeline-line {
        display: none;
    }
}