/* Expertise Chart - Linear Layout with Color-Coded Expertise Levels */
/* CSP Compliant - Bootstrap 5.3 Compatible */

.expertise-chart-wrapper {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    margin: 20px 0;
    border-width: 1px;
    border-color: #070707;
}

/* Date Range Badge */
.date-range-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #2c3e50;
    color: white;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Metrics Summary */
.metric-summary {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #5a6c7d;
}

.metric-label {
    display: block;
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-bottom: 4px;
}

.metric-values {
    display: block;
    font-size: .8rem;
}

.metric-values strong {
    color: #2c3e50;
    font-weight: 600;
}

.metric-values em {
    color: #7f8c8d;
    font-style: normal;
    font-weight: 400;
}

/* Expertise Section */
.expertise-section {
    /*background: #f8f9fa;*/
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.section-title {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #2c3e50;
    font-weight: 600;
    color: #212529;
}

/* Linear Chart Container */
.expertise-linear-chart {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Expertise Badge - Square Design */
.expertise-badge {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.expertise-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.badge-content {
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
    word-wrap: break-word;
    max-width: 100%;
}

.badge-count {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 400;
}

/* Color System: Greens and Blues with Linear Interpolation */
/* Bright = High Expertise (High Count) */
/* Light = Low Expertise (Count 1-2) */
/* Dark = Sufficient Expertise (Mid-range Count) */

/* TLD Colors - Blue Spectrum */
.expertise-badge[data-level="tld"][data-count="1"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tld"][data-count="2"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tld"][data-count="3"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tld"][data-count="4"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tld"][data-count="5"],
.expertise-badge[data-level="tld"][data-count="6"],
.expertise-badge[data-level="tld"][data-count="7"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tld"][data-count="8"],
.expertise-badge[data-level="tld"][data-count="9"],
.expertise-badge[data-level="tld"][data-count="10"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
    box-shadow: 0 0 20px rgba(44, 62, 80, 0.5);
}

/* TLT Colors - Green-Blue Spectrum */
.expertise-badge[data-level="tlt"][data-count="1"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tlt"][data-count="2"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tlt"][data-count="3"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tlt"][data-count="4"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tlt"][data-count="5"],
.expertise-badge[data-level="tlt"][data-count="6"],
.expertise-badge[data-level="tlt"][data-count="7"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="tlt"][data-count="8"],
.expertise-badge[data-level="tlt"][data-count="9"],
.expertise-badge[data-level="tlt"][data-count="10"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
    box-shadow: 0 0 20px rgba(44, 62, 80, 0.5);
}

/* SLT Colors - Teal-Cyan Spectrum */
.expertise-badge[data-level="slt"][data-count="1"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="slt"][data-count="2"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="slt"][data-count="3"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="slt"][data-count="4"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="slt"][data-count="5"],
.expertise-badge[data-level="slt"][data-count="6"],
.expertise-badge[data-level="slt"][data-count="7"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
}

.expertise-badge[data-level="slt"][data-count="8"],
.expertise-badge[data-level="slt"][data-count="9"],
.expertise-badge[data-level="slt"][data-count="10"] {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #d5d8dc;
    box-shadow: 0 0 20px rgba(44, 62, 80, 0.5);
}

/* Handle counts > 10 with maximum brightness */
.expertise-badge[data-count]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"])
:not([data-count="4"]):not([data-count="5"]):not([data-count="6"]):not([data-count="7"])
:not([data-count="8"]):not([data-count="9"]):not([data-count="10"]) {
    box-shadow: 0 0 25px rgba(44, 62, 80, 0.6);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 25px rgba(44, 62, 80, 0.6);
    }
    50% {
        box-shadow: 0 0 35px rgba(44, 62, 80, 0.8);
    }
}

/* Sources Section */
.sources-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.sources-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.source-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: white;
    border-radius: 6px;
    color: #2c3e50;
    text-decoration: none;
    transition: background-color 0.2s ease, padding-left 0.2s ease;
    border: 1px solid #dee2e6;
}

.source-link:hover {
    background-color: #e7f1ff;
    padding-left: 16px;
    border-color: #2c3e50;
}

/* Scrollbar Styling */
.sources-list::-webkit-scrollbar {
    width: 8px;
}

.sources-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.sources-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.sources-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Animation for initial load */
.animate-table {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.animate-table.open {
    opacity: 1;
    transform: translateY(0);
}





/* ==================== EXISTING CSS ABOVE THIS LINE ==================== */
/* ==================== NEW TWO-COLOR SYSTEM STARTS HERE ==================== */

:root {
    /* Expertise Color Range: Grey to Green */
    --expertise-light-r: 247;
    --expertise-light-g: 247;
    --expertise-light-b: 246;

    --expertise-dark-r: 49;
    --expertise-dark-g: 195;
    --expertise-dark-b: 71;

    /* Trust Color Range: Grey to Green */
    --trust-low-r: 156;
    --trust-low-g: 163;
    --trust-low-b: 175;

    --trust-high-r: 0;
    --trust-high-g: 168;
    --trust-high-b: 107;

    /* CONFIGURABLE MAX VALUES - Change these as needed */
    --max-expertise: 10;
    --max-trust: 5;


    --badge-bkgd: #ecf0f1;
    --left-border: #202020;
    --font-color: #212529;
    --sf-blue: #003DA5;
}

.expertise-badge {
    --bg-r: calc(var(--expertise-light-r) + (var(--expertise-dark-r) - var(--expertise-light-r)) * var(--expertise-ratio, 0));
    --bg-g: calc(var(--expertise-light-g) + (var(--expertise-dark-g) - var(--expertise-light-g)) * var(--expertise-ratio, 0));
    --bg-b: calc(var(--expertise-light-b) + (var(--expertise-dark-b) - var(--expertise-light-b)) * var(--expertise-ratio, 0));

    /*background: rgb(var(--bg-r), var(--bg-g), var(--bg-b)) !important;*/
    background: #f8f9fa !important;

    --border-r: calc(var(--trust-high-r) - (var(--trust-high-r) - var(--trust-low-r)) * var(--trust-ratio, 0));
    --border-g: calc(var(--trust-high-g) - (var(--trust-high-g) - var(--trust-low-g)) * var(--trust-ratio, 0));
    --border-b: calc(var(--trust-high-b) - (var(--trust-high-b) - var(--trust-low-b)) * var(--trust-ratio, 0));

    border-left: 6px solid rgb(var(--border-r), var(--border-g), var(--border-b)) !important;

    /* Text color: white when expertise > 0.5, sf-blue when <= 0.5 */
    color: color-mix(in srgb, #212529 calc((1 - var(--expertise-ratio, 0)) * 100%), white calc(var(--expertise-ratio, 0) * 100%));
}


.date-range-badge { background: var(--left-border); }
/*.metric-summary { border-left: 4px solid var(--left-border); }*/
.metric-values strong { color: var(--font-color); }
.section-title { border-bottom: 2px solid var(--badge-bkgd); }
.source-link { color: var(--font-color);; border-left: 3px solid var(--left-border); }
.key-low { background: rgb(224, 242, 254); border-left: 6px solid var(--left-border); }
.key-sufficient { background: #7f8c8d; border-left: 6px solid var(--left-border); }
.key-high { background: #040FD9; border-left: 6px solid var(--left-border); }
.badge-tld-header, .badge-tlt-header, .badge-slt-header { background: var(--badge-bkgd); border-left: 4px solid var(--left-border); }
.tld-section, .tlt-section, .slt-section { border-left: 4px solid var(--left-border); }

/* Color Key Section - Added to match template */
.color-key-section {
    /*background: #f8f9fa;*/
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    border-left: 4px solid var(--left-border);
}

.color-key-title {
    font-weight: 600;
    color: #212529;
    margin-bottom: 10px;
}

.color-key-items {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.color-key-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-key-sample {
    width: 40px;
    height: 30px;
    border-radius: 4px;
    border: 2px solid transparent;
}

/* ==================== END OF NEW TWO-COLOR SYSTEM ==================== */


/* Responsive Design */
@media (max-width: 768px) {
    .expertise-chart-wrapper {
        padding: 15px;
    }

    .expertise-badge {
        min-width: 80px;
        min-height: 40px;
        padding: 8px;
    }

    .badge-content {
        font-size: 0.8rem;
    }

    .expertise-linear-chart {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .expertise-badge {
        min-width: 70px;
        min-height: 40px;
    }
}