/* =============== dataset-detail.css =============== */

/* Assumes listserv.css is linked first */

.dataset-detail-page {
    padding: 2rem 0 4rem;
  }
  
  /* Breadcrumbs */
  .breadcrumbs {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  
  .breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
  }
  
  .breadcrumbs a:hover {
    color: var(--accent-color);
    text-decoration: underline;
  }
  
  .breadcrumbs span {
    margin: 0 0.5rem;
  }
  
  /* Layout */
  .detail-layout {
    display: grid;
    grid-template-columns: 1fr 300px; /* Main content and sidebar */
    gap: 2.5rem;
  }
  
  .detail-main-content {
    min-width: 0; /* Prevent overflow issues with flex/grid items */
  }
  
  .detail-sidebar {
    min-width: 0; /* Prevent overflow issues */
  }
  
  /* Dataset Header */
  .dataset-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
  }
  
  .dataset-page-header h1 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .dataset-page-header h1 i {
    font-size: 1.75rem; /* Slightly smaller icon */
    color: var(--accent-color);
  }
  
  .dataset-page-header .header-meta {
      font-size: 0.875rem;
      color: var(--text-secondary);
      margin-bottom: 1rem;
  }
  
  .dataset-page-header .header-meta span {
      margin-right: 1rem;
  }
  
  .dataset-page-header .header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  
  /* Tabs */
  .tab-navigation {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    overflow-x: auto; /* Allow horizontal scrolling on small screens */
    padding-bottom: 1px; /* Prevent content jump on border change */
  }
  
  .tab-navigation .tab-link {
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px; /* Overlap border */
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    white-space: nowrap;
    transition: var(--transition);
  }
  
  .tab-navigation .tab-link:hover {
    color: var(--text-primary);
  }
  
  .tab-navigation .tab-link.active {
    color: var(--text-primary);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-primary); /* Cover the main border */
    background-color: var(--bg-primary); /* Match page background */
  }
  
  .tab-content {
    /* Styles for content within tabs will be applied directly or via specific classes */
  }
  
  /* Readme/Content Section Styles */
  .readme-content h2,
  .readme-content h3,
  .readme-content h4 {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid var(--border-color);
  }
  .readme-content h2 { font-size: 1.5rem; }
  .readme-content h3 { font-size: 1.25rem; }
  .readme-content h4 { font-size: 1.1rem; }
  
  .readme-content p {
      margin-bottom: 1rem;
      line-height: 1.6;
  }
  
  .readme-content ul,
  .readme-content ol {
      margin-bottom: 1rem;
      padding-left: 2rem;
  }
  .readme-content ul { list-style: disc; }
  .readme-content ol { list-style: decimal; }
  
  .readme-content li {
      margin-bottom: 0.5rem;
  }
  
  .readme-content code {
      background-color: var(--code-bg);
      padding: 0.2em 0.4em;
      margin: 0;
      font-size: 85%;
      border-radius: var(--border-radius);
      font-family: monospace;
  }
  
  .readme-content pre {
      margin-bottom: 1rem;
  }
  
  .readme-content .code-block {
      margin-bottom: 1rem; /* Reuse existing code block style */
  }
  
  /* Data Preview Table */
  .data-preview-container {
      overflow-x: auto; /* Enable horizontal scrolling for the table */
      margin-bottom: 2rem;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
  }
  
  .data-preview-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
      background-color: var(--bg-primary);
      white-space: nowrap; /* Prevent text wrapping */
  }
  
  .data-preview-table th,
  .data-preview-table td {
      padding: 0.75rem 1rem;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
      vertical-align: top;
  }
  
  .data-preview-table thead th {
      background-color: var(--bg-secondary);
      font-weight: 600;
      position: sticky; /* Optional: sticky header */
      top: 0;
      z-index: 1;
  }
  
  .data-preview-table tbody tr:last-child td {
      border-bottom: none;
  }
  
  .data-preview-table tbody tr:nth-child(even) {
      background-color: var(--bg-secondary);
  }
  
  .data-preview-table tbody tr:hover {
      background-color: var(--bg-tertiary);
  }
  
  
  /* Sidebar Cards */
  .sidebar-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .sidebar-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .sidebar-card h3 i {
      color: var(--text-secondary);
      font-size: 0.9em;
  }
  
  .metadata-list {
    font-size: 0.875rem;
  }
  
  .metadata-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 1rem;
  }
  
  .metadata-item dt {
    color: var(--text-secondary);
    white-space: nowrap;
  }
  
  .metadata-item dd {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
  }
  
  .metadata-item dd a {
      font-weight: normal; /* Links shouldn't be bold */
  }
  
  .download-list .btn {
      width: 100%;
      margin-bottom: 0.75rem;
      justify-content: space-between; /* Align icon to the right */
  }
  .download-list .btn:last-child {
      margin-bottom: 0;
  }
  .download-list .btn i {
      margin-left: 1rem; /* Space before icon */
  }
  
  .license-info a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 500;
  }
  .license-info p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      margin-top: 0.5rem;
      margin-bottom: 0;
  }
  
  
  /* Responsive Adjustments */
  @media (max-width: 992px) {
    .detail-layout {
      grid-template-columns: 1fr; /* Stack columns */
    }
    .detail-sidebar {
      margin-top: 2rem; /* Add space when stacked */
    }
  }
  
  @media (max-width: 576px) {
    .dataset-page-header h1 {
      font-size: 1.75rem;
    }
    .dataset-page-header h1 i {
      font-size: 1.5rem;
    }
    .tab-navigation .tab-link {
      padding: 0.6rem 1rem;
    }
    .sidebar-card {
        padding: 1rem;
    }
    .metadata-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        margin-bottom: 1rem;
    }
    .metadata-item dd {
        text-align: left;
    }
  }


/* =============== Additional Tab Styles =============== */

/* Version List */
.version-list {
    margin-bottom: 2rem;
}

.version-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.version-header {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.version-info h3 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.version-tag {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
}

    .version-tag.current {
        background-color: var(--success-color);
        color: var(--bg-primary);
    }

.version-date {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.version-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
}

.version-changelog {
    padding: 1rem 1.5rem 1.5rem;
}

    .version-changelog h4 {
        font-size: 0.9rem;
        margin: 0 0 0.75rem;
        color: var(--text-secondary);
        border-bottom: none; /* Override default h4 styling */
    }

.changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .changelog-list li {
        padding: 0.5rem 0;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        line-height: 1.4;
        border-bottom: 1px solid rgba(var(--border-color-rgb), 0.3);
    }

        .changelog-list li:last-child {
            border-bottom: none;
        }

.change-type {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    min-width: 60px;
    text-align: center;
}

    .change-type.add {
        background-color: rgba(var(--success-color-rgb), 0.15);
        color: var(--success-color);
    }

    .change-type.remove {
        background-color: rgba(var(--danger-color-rgb), 0.15);
        color: var(--danger-color);
    }

    .change-type.update {
        background-color: rgba(var(--accent-color-rgb), 0.15);
        color: var(--accent-color);
    }

    .change-type.fix {
        background-color: rgba(var(--warning-color-rgb), 0.15);
        color: var(--warning-color);
    }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.pagination-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pagination-btn:hover:not(.disabled) {
        background-color: var(--bg-tertiary);
    }

    .pagination-btn.disabled {
        color: var(--text-muted);
        cursor: not-allowed;
        background-color: var(--bg-tertiary);
        opacity: 0.7;
    }

.pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Report Form */
.report-form-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.report-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .form-group label {
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--text-primary);
    }

.form-control {
    padding: 0.75rem 1rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-primary);
    transition: var(--transition);
}

    .form-control:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2);
    }

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-control::placeholder {
    color: var(--text-muted);
}

small {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.form-footer {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Report Guidelines */
.report-guidelines {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}

    .report-guidelines h3 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.1rem;
        margin-top: 0;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border-color);
        color: var(--accent-color);
    }

    .report-guidelines ul {
        padding-left: 1.5rem;
        margin-bottom: 0;
    }

    .report-guidelines li {
        margin-bottom: 0.5rem;
    }

/* Add these RGB variables to support transparency operations */
:root {
    --success-color-rgb: 63, 185, 80;
    --danger-color-rgb: 248, 81, 73;
    --warning-color-rgb: 210, 153, 34;
    --accent-color-rgb: 88, 166, 255;
    --border-color-rgb: 48, 54, 61;
}

/* Dark theme overrides for RGB variables */
[data-theme="light"] {
    --success-color-rgb: 35, 134, 54;
    --danger-color-rgb: 207, 34, 46;
    --warning-color-rgb: 158, 106, 3;
    --accent-color-rgb: 9, 105, 218;
    --border-color-rgb: 208, 215, 222;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .version-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .version-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .form-footer {
        flex-direction: column;
    }

        .form-footer .btn {
            width: 100%;
        }
}