/**
 * Colorful Transparency Indicators
 * Stylish red/green color scheme for transparency indicators
 */

:root {
    /* Transparency Colors */
    --transparency-green: #10b981;
    --transparency-green-light: #34d399;
    --transparency-green-dark: #059669;
    --transparency-green-bg: #ecfdf5;
    --transparency-green-border: #a7f3d0;
    
    --transparency-red: #ef4444;
    --transparency-red-light: #f87171;
    --transparency-red-dark: #dc2626;
    --transparency-red-bg: #fef2f2;
    --transparency-red-border: #fecaca;
    
    --transparency-orange: #f59e0b;
    --transparency-orange-light: #fbbf24;
    --transparency-orange-dark: #d97706;
    --transparency-orange-bg: #fffbeb;
    --transparency-orange-border: #fed7aa;
    
    --transparency-blue: #3b82f6;
    --transparency-blue-light: #60a5fa;
    --transparency-blue-dark: #2563eb;
    --transparency-blue-bg: #eff6ff;
    --transparency-blue-border: #bfdbfe;
    
    --transparency-purple: #8b5cf6;
    --transparency-purple-light: #a78bfa;
    --transparency-purple-dark: #7c3aed;
    --transparency-purple-bg: #f5f3ff;
    --transparency-purple-border: #c4b5fd;
}

/* === TRANSPARENCY BADGES === */
.transparency-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: 1px solid;
    gap: 0.5rem;
}

.transparency-badge i {
    font-size: 0.875rem;
}

/* Present/True Indicators (Green) */
.transparency-badge.transparency-yes,
.transparency-badge.present,
.transparency-badge.true {
    background-color: var(--transparency-green-bg);
    color: var(--transparency-green-dark);
    border-color: var(--transparency-green-border);
}

.transparency-badge.transparency-yes:hover,
.transparency-badge.present:hover,
.transparency-badge.true:hover {
    background-color: var(--transparency-green);
    color: white;
    border-color: var(--transparency-green);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Missing/False Indicators (Red) */
.transparency-badge.transparency-no,
.transparency-badge.missing,
.transparency-badge.false {
    background-color: var(--transparency-red-bg);
    color: var(--transparency-red-dark);
    border-color: var(--transparency-red-border);
}

.transparency-badge.transparency-no:hover,
.transparency-badge.missing:hover,
.transparency-badge.false:hover {
    background-color: var(--transparency-red);
    color: white;
    border-color: var(--transparency-red);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

/* Unknown/Partial Indicators (Orange) */
.transparency-badge.transparency-unknown,
.transparency-badge.partial,
.transparency-badge.unknown {
    background-color: var(--transparency-orange-bg);
    color: var(--transparency-orange-dark);
    border-color: var(--transparency-orange-border);
}

.transparency-badge.transparency-unknown:hover,
.transparency-badge.partial:hover,
.transparency-badge.unknown:hover {
    background-color: var(--transparency-orange);
    color: white;
    border-color: var(--transparency-orange);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

/* === TRANSPARENCY SCORES === */
.transparency-score,
.ost-transparency-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid;
    transition: all 0.2s ease-in-out;
}

/* High Score (5-6) - Green */
.transparency-score.score-excellent,
.transparency-score.score-high,
.transparency-score.high,
.ost-transparency-score.high {
    background-color: var(--transparency-green-bg);
    color: var(--transparency-green-dark);
    border-color: var(--transparency-green-border);
}

.transparency-score.score-excellent:hover,
.transparency-score.score-high:hover,
.transparency-score.high:hover,
.ost-transparency-score.high:hover {
    background-color: var(--transparency-green);
    color: white;
    border-color: var(--transparency-green);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Medium Score (3-4) - Orange */
.transparency-score.score-good,
.transparency-score.score-medium,
.transparency-score.medium,
.ost-transparency-score.medium {
    background-color: var(--transparency-orange-bg);
    color: var(--transparency-orange-dark);
    border-color: var(--transparency-orange-border);
}

.transparency-score.score-good:hover,
.transparency-score.score-medium:hover,
.transparency-score.medium:hover,
.ost-transparency-score.medium:hover {
    background-color: var(--transparency-orange);
    color: white;
    border-color: var(--transparency-orange);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Low Score (0-2) - Red */
.transparency-score.score-poor,
.transparency-score.score-low,
.transparency-score.low,
.ost-transparency-score.low {
    background-color: var(--transparency-red-bg);
    color: var(--transparency-red-dark);
    border-color: var(--transparency-red-border);
}

.transparency-score.score-poor:hover,
.transparency-score.score-low:hover,
.transparency-score.low:hover,
.ost-transparency-score.low:hover {
    background-color: var(--transparency-red);
    color: white;
    border-color: var(--transparency-red);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* === PROGRESS BARS === */
.progress-bar.transparency-high,
.progress-fill.transparency-high,
.transparency-fill {
    background: linear-gradient(135deg, var(--transparency-green), var(--transparency-green-light));
    border-radius: 0.25rem;
}

.progress-bar.transparency-medium,
.progress-fill.transparency-medium {
    background: linear-gradient(135deg, var(--transparency-orange), var(--transparency-orange-light));
    border-radius: 0.25rem;
}

.progress-bar.transparency-low,
.progress-fill.transparency-low {
    background: linear-gradient(135deg, var(--transparency-red), var(--transparency-red-light));
    border-radius: 0.25rem;
}

/* Transparency bar container */
.transparency-bar {
    width: 100%;
    height: 6px;
    background-color: var(--xera-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.transparency-fill {
    height: 100%;
    transition: width 0.3s ease-in-out;
    border-radius: 3px;
}

/* === INDIVIDUAL INDICATOR STYLING === */
.indicator-open-data,
.indicator-data-sharing {
    --indicator-color: var(--transparency-green);
    --indicator-bg: var(--transparency-green-bg);
    --indicator-border: var(--transparency-green-border);
}

.indicator-open-code,
.indicator-code-sharing {
    --indicator-color: var(--transparency-blue);
    --indicator-bg: var(--transparency-blue-bg);
    --indicator-border: var(--transparency-blue-border);
}

.indicator-coi-disclosure,
.indicator-coi {
    --indicator-color: var(--transparency-orange);
    --indicator-bg: var(--transparency-orange-bg);
    --indicator-border: var(--transparency-orange-border);
}

.indicator-funding,
.indicator-fund-disclosure {
    --indicator-color: var(--transparency-purple);
    --indicator-bg: var(--transparency-purple-bg);
    --indicator-border: var(--transparency-purple-border);
}

.indicator-registration,
.indicator-protocol-registration {
    --indicator-color: var(--transparency-blue);
    --indicator-bg: var(--transparency-blue-bg);
    --indicator-border: var(--transparency-blue-border);
}

.indicator-open-access,
.indicator-access {
    --indicator-color: var(--transparency-green);
    --indicator-bg: var(--transparency-green-bg);
    --indicator-border: var(--transparency-green-border);
}

/* === COLORFUL CHECKBOXES AND FILTERS === */
.form-check-input:checked {
    background-color: var(--transparency-green);
    border-color: var(--transparency-green);
}

.form-check-label {
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.form-check-label:hover {
    color: var(--transparency-green-dark);
}

/* Filter badges */
.filter-badge-active {
    background-color: var(--transparency-green);
    color: white;
    border-color: var(--transparency-green);
}

.filter-badge {
    background-color: var(--transparency-green-bg);
    color: var(--transparency-green-dark);
    border: 1px solid var(--transparency-green-border);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.filter-badge:hover {
    background-color: var(--transparency-green);
    color: white;
    border-color: var(--transparency-green);
}

/* === STATISTICS CARDS === */
.indicator-card {
    border-radius: 1rem;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.indicator-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.indicator-card.opendata {
    border-left: 4px solid var(--transparency-green);
}

.indicator-card.opencode {
    border-left: 4px solid var(--transparency-blue);
}

.indicator-card.coi {
    border-left: 4px solid var(--transparency-orange);
}

.indicator-card.funding {
    border-left: 4px solid var(--transparency-purple);
}

.indicator-card.registration {
    border-left: 4px solid var(--transparency-blue);
}

.indicator-card.access {
    border-left: 4px solid var(--transparency-green);
}

/* === METRIC ICONS === */
.metric-icon.ost-indicator {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    transition: all 0.3s ease-in-out;
}

.metric-icon.ost-indicator:hover {
    transform: scale(1.1) rotate(5deg);
}

.metric-icon.data-sharing {
    background: linear-gradient(135deg, var(--transparency-green), var(--transparency-green-light));
}

.metric-icon.code-sharing {
    background: linear-gradient(135deg, var(--transparency-blue), var(--transparency-blue-light));
}

.metric-icon.coi-disclosure {
    background: linear-gradient(135deg, var(--transparency-orange), var(--transparency-orange-light));
}

.metric-icon.funding {
    background: linear-gradient(135deg, var(--transparency-purple), var(--transparency-purple-light));
}

.metric-icon.registration {
    background: linear-gradient(135deg, var(--transparency-blue), var(--transparency-blue-light));
}

.metric-icon.sharing {
    background: linear-gradient(135deg, var(--transparency-green), var(--transparency-green-light));
}

/* === RESPONSIVE IMPROVEMENTS === */
@media (max-width: 768px) {
    .transparency-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .transparency-score,
    .ost-transparency-score {
        min-width: 2.5rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .metric-icon.ost-indicator {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* === STATISTICS TABS ENHANCEMENT === */
.stats-tabs-section .nav-pills .nav-link {
    border-radius: 0.75rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    margin: 0 0.25rem;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}

.stats-tabs-section .nav-pills .nav-link:hover {
    background-color: var(--transparency-green-bg);
    color: var(--transparency-green-dark);
    border-color: var(--transparency-green-border);
    transform: translateY(-2px);
}

.stats-tabs-section .nav-pills .nav-link.active {
    background-color: var(--transparency-green);
    color: white;
    border-color: var(--transparency-green);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Year Filter Enhancement */
.year-filter-section .btn-group .btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease-in-out;
}

.year-filter-section .btn-check:checked + .btn {
    background-color: var(--transparency-green);
    border-color: var(--transparency-green);
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.2);
}

.year-filter-section .btn:hover {
    background-color: var(--transparency-green-bg);
    color: var(--transparency-green-dark);
    border-color: var(--transparency-green);
}

/* Overview Cards Enhancement */
.overview-trend {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Category Score Colorful Enhancement */
.category-score.transparency-score {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid;
    min-width: 4rem;
    text-align: center;
}

/* Metric Values with Color Coding */
.metric-value.transparency-badge {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid;
    min-width: 3rem;
    text-align: center;
}

/* Rankings Enhancement */
.rankings-section .table td {
    vertical-align: middle;
    padding: 0.75rem 0.5rem;
}

.rankings-section .transparency-score {
    font-size: 0.875rem;
    min-width: 2.5rem;
}

/* Trends Cards */
.trends-section .card {
    border-radius: 1rem;
    transition: all 0.3s ease-in-out;
}

.trends-section .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Chart Placeholder Styling */
#yearly-trends-chart {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 0.75rem;
    border: 2px dashed #dee2e6;
}

/* Enhanced List Groups */
.rankings-section .list-group-item {
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

.rankings-section .list-group-item:hover {
    background-color: var(--transparency-green-bg);
    border-color: var(--transparency-green-border);
    transform: translateX(4px);
}

/* Responsive Tab Enhancement */
@media (max-width: 768px) {
    .stats-tabs-section .nav-pills .nav-link {
        padding: 0.5rem 1rem;
        margin: 0.1rem;
        font-size: 0.875rem;
    }
    
    .year-filter-section .btn-group {
        flex-direction: column;
    }
    
    .year-filter-section .btn-group .btn {
        border-radius: 0.5rem !important;
        margin-bottom: 0.5rem;
    }
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
    .transparency-badge.transparency-yes,
    .transparency-badge.present,
    .transparency-badge.true {
        background-color: rgba(16, 185, 129, 0.2);
        color: var(--transparency-green-light);
        border-color: var(--transparency-green);
    }
    
    .transparency-badge.transparency-no,
    .transparency-badge.missing,
    .transparency-badge.false {
        background-color: rgba(239, 68, 68, 0.2);
        color: var(--transparency-red-light);
        border-color: var(--transparency-red);
    }
    
    .transparency-score.high,
    .ost-transparency-score.high {
        background-color: rgba(16, 185, 129, 0.2);
        color: var(--transparency-green-light);
        border-color: var(--transparency-green);
    }
    
    .transparency-score.medium,
    .ost-transparency-score.medium {
        background-color: rgba(245, 158, 11, 0.2);
        color: var(--transparency-orange-light);
        border-color: var(--transparency-orange);
    }
    
    .transparency-score.low,
    .ost-transparency-score.low {
        background-color: rgba(239, 68, 68, 0.2);
        color: var(--transparency-red-light);
        border-color: var(--transparency-red);
    }
}