/* Enhanced Side Panel Styles */

.detail-panel {
    position: fixed;
    top: 0;
    right: -800px;
    width: 800px;
    max-width: 90vw;
    height: 100vh;
    background-color: var(--background);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--border);
}

.detail-panel.open {
    right: 0;
}

.detail-panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--card-background);
}

.detail-panel-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--title-color);
}

.close-panel-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    transition: all 0.2s;
}

.close-panel-btn:hover {
    background-color: var(--background);
    color: var(--title-color);
}

.share-panel-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-left: 0.5rem;
    transition: all 0.2s ease;
}

.share-panel-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #334155;
}

.share-panel-btn.copied {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}

.detail-panel-content {
    padding: 2rem;
    overflow-y: auto;
    flex-grow: 1;
    line-height: 1.6;
}

.panel-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--base01);
    padding: 2rem;
}

.loader-spinner {
    border: 3px solid var(--card-background);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 1.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.panel-data {
    display: none;
}

.panel-data.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Enhanced detail section styling */
.detail-section {
    margin-bottom: 2.5rem;
    background-color: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.detail-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-hover);
}

.detail-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    padding: 1.25rem 1.5rem;
    color: var(--title-color);
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Add icons to section headers */
.detail-section h3::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.875rem;
    background-color: var(--primary);
    color: var(--btn-text);
    content: '\f05a'; /* Default icon */
}

.detail-section h3[data-section="What is this about and how can I use this?"]::before {
    content: '\f05a'; /* info icon */
}

.detail-section h3[data-section="Data Characteristics"]::before {
    content: '\f1c0'; /* database icon */
}

.detail-section h3[data-section="Model Characteristics"]::before {
    content: '\f544'; /* robot icon */
}

.detail-section h3[data-section="How to Use It"]::before {
    content: '\f15c'; /* file-alt icon */
}

.detail-section h3[data-section="Tags"]::before {
    content: '\f02c'; /* tags icon */
}

.detail-section h3[data-section="Region"]::before {
    content: '\f279'; /* map icon */
}

/* START: Add Authors section icon */
.detail-section h3[data-section="Authors"]::before {
    content: '\f559'; /* user-edit icon (or fa-pen-alt: \f305) */
}
/* END: Add Authors section icon */

/* START: Add Organizations section icon */
.detail-section h3[data-section="Organizations Involved"]::before {
    content: '\f1ad'; /* building icon */
}
/* END: Add Organizations section icon */

.documentation-content {
    padding: 1.5rem;
    color: #1e293b;
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* Enhanced typography for documentation content */
.documentation-content p {
    margin-bottom: 1.25rem;
    color: #1e293b;
}

.documentation-content p:last-child {
    margin-bottom: 0;
}

.documentation-content strong {
    font-weight: 600;
    color: #2d3748;
}

.documentation-content em {
    font-style: italic;
    color: #4a5568;
}

/* Enhanced list styling */
.panel-list {
    margin: 1rem 0;
    padding-left: 0.5rem;
    list-style-type: none;
}

.panel-list-item {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.panel-list-item:last-child {
    margin-bottom: 0;
}

.panel-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #3b5998;
}

/* Enhanced link styling */
.panel-link {
    color: #3b5998;
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.panel-link:hover {
    background-color: rgba(59, 89, 152, 0.08);
    color: #4c70ba;
    text-decoration: none;
}

.panel-link i {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Enhanced code block styling */
.code-block-wrapper {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #edf2f7;
    border-bottom: 1px solid #e2e8f0;
    font-family: 'Fira Code', 'Roboto Mono', monospace;
    font-size: 0.75rem;
}

.code-language {
    color: #4a5568;
    font-weight: 500;
    text-transform: uppercase;
}

.copy-code-btn {
    background: none;
    border: none;
    color: #4a5568;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.copy-code-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #2d3748;
}

.code-block {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: 'Fira Code', 'Roboto Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #2d3748;
}

.inline-code {
    font-family: 'Fira Code', 'Roboto Mono', monospace;
    font-size: 0.875em;
    background-color: #f1f5f9;
    color: #2d3748;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    white-space: nowrap;
}

/* Enhanced image styling */
.panel-image-container {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.panel-image {
    width: 100%;
    height: auto;
    display: block;
}

.panel-image-caption {
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    color: #4a5568;
    font-size: 0.875rem;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

/* Table of contents */
.panel-toc {
    background-color: var(--card-background); /* Match other sections - lighter background */
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border); /* Use theme border for consistency */
}

.panel-toc-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--base02); /* Solarized dark text */
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-toc-title i {
    color: var(--blue); /* Solarized blue accent */
}

.panel-toc-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.panel-toc-item {
    margin-bottom: 0.5rem;
}

.panel-toc-link {
    color: var(--base01); /* Solarized medium text */
    text-decoration: none;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    transition: all 0.2s ease;
}

.panel-toc-link:hover {
    color: var(--blue); /* Solarized blue on hover */
}

.panel-toc-link i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .detail-panel {
        width: 100vw;
        max-width: 100vw;
        right: -100vw;
    }
    
    .detail-panel-content {
        padding: 1.5rem;
    }
    
    .documentation-content {
        padding: 1.25rem;
    }
    
    .panel-header-image {
        height: 150px;
    }
    
    .panel-title-section {
        padding: 0;
    }
    
    .panel-links-section {
        flex-direction: column;
    }
    
    .panel-link-btn {
        width: 100%;
        justify-content: center;
    }
    
    .panel-domain-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
    
    .panel-data-type-chip {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
}

/* Panel header image */
.panel-header-image {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 0;
    border-bottom: none;
}

/* Add a gradient overlay that fades the image into the content */
.panel-header-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(245, 242, 234, 0) 0%,     /* --card-bg (main background) with alpha */
        rgba(245, 242, 234, 0.5) 70%,  /* --card-bg (main background) with alpha */
        rgba(245, 242, 234, 0.9) 90%,  /* --card-bg (main background) with alpha */
        rgba(245, 242, 234, 1) 100%    /* --card-bg (main background) full */
    );
    z-index: 1;
}

/* Add a fallback background color in case the image fails to load */
.panel-header-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fefcf5 0%, #f5f2ea 100%); /* Use theme colors */
    z-index: -1;
}

/* Panel title section */
.panel-title-section {
    margin-bottom: 2rem;
    padding: 0 1.5rem;
    position: relative;
    margin-top: -40px;
    z-index: 2;
}

/* Panel domain badges */
.panel-domain-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.panel-domain-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #2d3748;
    background-color: #e2e8f0; /* Default background color */
}

/* Match the exact domain classes from the main HTML */
.panel-domain-badge.domain-climate-action {
    background-color: #e2cfcf !important;
    color: #2d3748 !important;
}

.panel-domain-badge.domain-agriculture {
    background-color: #e2d8cf !important;
    color: #2d3748 !important;
}

.panel-domain-badge.domain-natural-language-processing {
    background-color: #e2e2cf !important;
    color: #2d3748 !important;
}

/* Handle the case where domain-badge class is applied directly */
.panel-domain-badge.domain-badge.domain-climate-action {
    background-color: #e2cfcf !important;
    color: #2d3748 !important;
}

.panel-domain-badge.domain-badge.domain-agriculture {
    background-color: #e2d8cf !important;
    color: #2d3748 !important;
}

.panel-domain-badge.domain-badge.domain-natural-language-processing {
    background-color: #e2e2cf !important;
    color: #2d3748 !important;
}

/* Handle the normalized class names from JavaScript */
.panel-domain-badge.domain-climate-action {
    background-color: #e2cfcf !important;
    color: #2d3748 !important;
}

.panel-domain-badge.domain-agriculture {
    background-color: #e2d8cf !important;
    color: #2d3748 !important;
}

.panel-domain-badge.domain-natural-language-processing {
    background-color: #e2e2cf !important;
    color: #2d3748 !important;
}

/* Panel data type chips */
.panel-data-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.panel-data-type-chip {
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3rem 0.75rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #2d3748;
    background-color: #e2e8f0; /* Default background color */
}

/* Match the exact label classes from the main HTML */
.panel-data-type-chip.label-images {
    background-color: #d8e2cf;
    color: #2d3748;
}

.panel-data-type-chip.label-text {
    background-color: #cfe2cf;
    color: #2d3748;
}

.panel-data-type-chip.label-tabular {
    background-color: #cfe2d8;
    color: #2d3748;
}

.panel-data-type-chip.label-audio {
    background-color: #cfe2e2;
    color: #2d3748;
}

.panel-data-type-chip.label-geospatial {
    background-color: #cfd8e2;
    color: #2d3748;
}

.panel-data-type-chip i {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Panel links section */
.panel-links-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.panel-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.panel-dataset-link {
    background-color: var(--primary, #3b5998);
    color: white;
}

.panel-dataset-link:hover {
    background-color: var(--primary-light, #4c70ba);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.panel-usecase-link {
    background-color: rgba(59, 89, 152, 0.1);
    color: var(--primary, #3b5998);
    border: 1px solid rgba(59, 89, 152, 0.2);
}

.panel-usecase-link:hover {
    background-color: rgba(59, 89, 152, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.panel-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}