body {}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #253a46;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #1a80b7;
}

/* Markdown-like styling for description */
.prose h1,
.prose h2,
.prose h3 {
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: inherit;
}

.prose p {
    margin-bottom: 1em;
    line-height: 1.6;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.prose a {
    color: #1a80b7;
    text-decoration: underline;
}

.prose blockquote {
    border-left: 4px solid #1a80b7;
    padding-left: 1em;
    font-style: italic;
    margin-bottom: 1em;
}

.candidate-img {
    display: block;
    margin: 1rem auto;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}@media print {

    /* Hide sidebars and navigation */
    #main-sidebar,
    #direct-sidebar,
    #map-container,
    .border-b,
    /* Header borders */
    button,
    /* Hide all buttons */
    #direct-section-icon,
    #main-list-icon {
        display: none !important;
    }

    /* Ensure main container allows printing */
    #main-container,
    #direct-section {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Ensure detail areas are visible */
    #detail-area,
    #direct-detail-area,
    #candidate-detail,
    #direct-candidate-detail {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hide sections that are not active/visible */
    /* This is tricky because we have two sections (List and Direct). 
       Ideally we only print what is currently visible. 
       But CSS print media doesn't know JS state easily unless we use classes.
       However, the 'hidden' class logic in JS might already handle visibility.
       But we want to force the visible one to be full width.
    */

    /* Reset text colors for print */
    body,
    p,
    h1,
    h2,
    h3,
    div {
        color: #000 !important;
        background: #fff !important;
    }

    /* Hide the other section if we are printing one */
    /* We can't easily distinguish which one is active via CSS alone if they are both in DOM.
       But usually one is hidden or scrolled into view.
       Let's assume the user prints what they see.
    */
}