/* Tab Content */
.tab-content {
    display: none;
    padding: 1.5rem clamp(1rem, 4vw, 3rem);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Critical for flex children to enable scrolling */
}

.tab-content.active {
    display: block;
}

/* Graph tab should be full screen with no padding */
#graph.tab-content {
    padding: 0;
}

#graph.tab-content.active {
    display: block;
}

/* Sunburst tab should use flex layout when active */
#sunburst.tab-content.active {
    display: flex;
}

/* Reference Flow tab should use flex layout when active */
#referenceflow.tab-content.active {
    display: flex;
    flex-direction: row;
}

/* Stats */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.stat-card {
    background: white;
    border: 1px solid #E1E8ED;
    padding: 12px;
    border-radius: 3px;
    text-align: center;
}

.stat-number {
    font-size: 24px;
    font-weight: 600;
    color: #137cbd;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 11px;
    color: #5f6b7c;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Sections */
.section {
    background: white;
    border: 1px solid #E1E8ED;
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}

.section-header {
    background: #f5f8fa;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #E1E8ED;
}

.section-header:hover {
    background: #f5f8fa;
}

.section-body {
    padding: 12px;
}

.section-body.collapsed {
    display: none;
}

/* Cards */
.card {
    background: #f5f8fa;
    border: 1px solid #E1E8ED;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 8px;
}

.card-id {
    font-family: monospace;
    font-size: 10px;
    color: #5f6b7c;
    background: #f5f8fa;
    padding: 2px 6px;
    border-radius: 2px;
    word-break: break-all;
}

.card-title {
    font-size: 13px;
    font-weight: 600;
    color: #182026;
    margin-bottom: 6px;
}

.card.filtered-out {
    display: none;
}

.card:target {
    animation: highlight 2s ease-in-out;
    border: 2px solid #d9822b;
    box-shadow: 0 0 10px rgba(217, 130, 43, 0.3);
}

@keyframes highlight {
    0% {
        background-color: #fef5e7;
    }
    100% {
        background-color: #f5f8fa;
    }
}

/* Custom badges using Blueprint colors */
.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
}

.badge-count {
    background: #d6ecff;
    color: #0c5174;
}

.badge-law {
    background: #d6ecff;
    color: #0c5174;
}

.badge-weisung {
    background: #fef5e7;
    color: #a66321;
}

.badge-article {
    background: #f5e8ff;
    color: #5c255c;
}

.badge-prescriptive {
    background: #d4f0dd;
    color: #1d7324;
}

.badge-constitutive {
    background: #d6ecff;
    color: #0c5174;
}

/* Evidence Section */
.evidence-section {
    margin-top: 8px;
    border-top: 1px solid #E1E8ED;
    padding-top: 8px;
}

.evidence-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #5f6b7c;
    font-weight: 600;
    margin-bottom: 4px;
}

.evidence-text {
    background: #fef5e7;
    border-left: 2px solid #d9822b;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #5f6b7c;
    white-space: pre-wrap;
    font-style: italic;
}

/* Renvoi Section */
.renvoi-section {
    background: #fef5e7;
    border-left: 2px solid #d9822b;
    padding: 6px 8px;
    margin-top: 8px;
    font-size: 11px;
}

.renvoi-item {
    margin: 4px 0;
    padding: 4px 0;
}

.renvoi-type {
    background: #d9822b;
    color: white;
    padding: 2px 5px;
    border-radius: 2px;
    font-weight: 600;
    font-size: 9px;
}

.renvoi-target {
    color: #137cbd;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.renvoi-target:hover {
    color: #0e5a8a;
}

/* Text Section */
.text-section {
    margin-top: 8px;
}

.text-section summary {
    color: #137cbd;
    font-size: 11px;
    padding: 4px;
    background: #f5f8fa;
    border-radius: 2px;
    cursor: pointer;
}

.text-section summary:hover {
    background: #E1E8ED;
}

.text-content {
    margin-top: 6px;
    padding: 8px;
    background: white;
    border: 1px solid #E1E8ED;
    border-radius: 2px;
    color: #5f6b7c;
    line-height: 1.6;
    font-size: 12px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #a7b6c2;
}

.empty-state-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

/* Quality Indicators */
.quality-issue {
    background: #fef0f0;
    border-left: 2px solid #db3737;
    padding: 6px 8px;
    margin-top: 6px;
    font-size: 11px;
    color: #a82a2a;
}

.quality-warning {
    background: #fef5e7;
    border-left: 2px solid #d9822b;
    padding: 6px 8px;
    margin-top: 6px;
    font-size: 11px;
    color: #a66321;
}

/* Relation Items */
.relation-item {
    background: white;
    border: 1px solid #E1E8ED;
    padding: 6px 8px;
    margin-bottom: 4px;
    border-radius: 2px;
    font-size: 12px;
    border-left: 2px solid #137cbd;
}

/* Book/Chapter Layout */
.book-section {
    margin-bottom: 16px;
    border: 1px solid #E1E8ED;
    border-radius: 3px;
    overflow-y: auto;
    max-height: 600px;
}

.book-header {
    background: #137cbd;
    color: white;
    padding: 10px 12px;
}

.book-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.book-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    opacity: 0.9;
}

.chapter-section {
    border-bottom: 1px solid #E1E8ED;
}

.chapter-section:last-child {
    border-bottom: none;
}

.chapter-title {
    background: #f5f8fa;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 12px;
    color: #182026;
    border-bottom: 1px solid #E1E8ED;
}

.chapter-body {
    padding: 10px;
}

/* Expandable property styling */
details summary {
    user-select: none;
}

details[open] summary .material-symbols-outlined {
    transform: rotate(180deg);
}

details summary .material-symbols-outlined {
    transition: transform 0.2s;
}

/* Pipeline Tab Styles */
.pipeline-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pipeline-phase {
    background: #ffffff;
    border: 1px solid #e1e8ed;
    border-left: 4px solid #607d8b;
    border-radius: 3px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.pipeline-phase:hover {
    background: #f5f8fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pipeline-phase-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.pipeline-phase-description {
    font-size: 12px;
    color: #5f6b7c;
    margin-left: 30px;
}

.pipeline-phase-metrics {
    margin-top: 10px;
    margin-left: 30px;
    padding: 8px 10px;
    background: #f5f8fa;
    border-radius: 3px;
    font-size: 11px;
}

.metric-row {
    margin-bottom: 4px;
    color: #182026;
}

.metric-detail {
    margin-left: 12px;
    color: #5f6b7c;
    font-size: 10px;
}

.pipeline-connector {
    text-align: center;
    font-size: 18px;
    color: #bdc3c7;
    margin: 4px 0;
}

.pipeline-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.pipeline-agent-card {
    background: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.pipeline-agent-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.pipeline-agent-header {
    padding: 12px 14px;
    background: #f5f8fa;
}

.pipeline-agent-body {
    padding: 12px 14px;
}

.pipeline-agent-details {
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

.pipeline-agent-toggle {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e1e8ed;
    cursor: pointer;
    font-size: 11px;
    color: #137cbd;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.pipeline-agent-toggle:hover {
    color: #0e5a8a;
}

.pipeline-llm-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    background: #9c27b0;
    color: #ffffff;
}

.pipeline-no-llm-badge {
    background: #607d8b;
    color: #ffffff;
}

.pipeline-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    background: #f5f8fa;
    border-radius: 4px;
}

.flow-step {
    flex: 1;
    min-width: 100px;
    background: #ffffff;
    border: 2px solid #e1e8ed;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.flow-label {
    font-size: 10px;
    font-weight: 600;
    color: #5f6b7c;
    margin-bottom: 4px;
}

.flow-content {
    font-size: 11px;
    color: #182026;
    font-weight: 600;
}

.flow-arrow {
    font-size: 20px;
    color: #137cbd;
    font-weight: bold;
}

@media (max-width: 768px) {
    .pipeline-agents-grid {
        grid-template-columns: 1fr;
    }

    .pipeline-flow-diagram {
        flex-direction: column;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }
}

/* ============================================================
   Phase 10: Document Classification Styles
   ============================================================ */

/* Binding Strength Badges */
.binding-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 500;
    color: white;
    margin-left: 6px;
}

.binding-mandatory,
.badge-binding-mandatory {
    background: #c53030;
    color: white;
}

.binding-quasi-mandatory,
.badge-binding-quasi-mandatory {
    background: #dd6b20;
    color: white;
}

.binding-advisory,
.badge-binding-advisory {
    background: #3182ce;
    color: white;
}

.binding-informational,
.badge-binding-informational {
    background: #718096;
    color: white;
}

/* Category Badges */
.category-statute,
.badge-category-statute {
    background: #276749;
    color: white;
}

.category-circular,
.badge-category-circular {
    background: #c05621;
    color: white;
}

.category-guideline,
.badge-category-guideline {
    background: #2b6cb0;
    color: white;
}

/* Document Category Icons */
.icon-statute::before { content: '⚖️'; }
.icon-circular::before { content: '📋'; }
.icon-guideline::before { content: '📑'; }
.icon-informational::before { content: '📄'; }

/* Classification Confidence Display */
.classification-confidence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}

.confidence-bar {
    width: 40px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.confidence-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.confidence-high .confidence-bar-fill,
.confidence-bar-fill.confidence-high {
    background: linear-gradient(90deg, #48bb78, #38a169);
}

.confidence-medium .confidence-bar-fill,
.confidence-bar-fill.confidence-medium {
    background: linear-gradient(90deg, #ecc94b, #d69e2e);
}

.confidence-low .confidence-bar-fill,
.confidence-bar-fill.confidence-low {
    background: linear-gradient(90deg, #fc8181, #e53e3e);
}

/* Needs Review Indicator */
.needs-review,
.needsReview {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: #fef5e7;
    border: 1px solid #d9822b;
    border-radius: 3px;
    font-size: 9px;
    color: #a66321;
}

.needs-review::before,
.needsReview::before {
    content: '⚠️';
}

/* Classification Filter Controls */
.filter-category,
.filter-binding,
.filter-confidence,
.category-filter,
.binding-filter,
.confidence-filter {
    padding: 4px 8px;
    border: 1px solid #e1e8ed;
    border-radius: 3px;
    font-size: 11px;
    background: white;
}

/* Issuing Authority Display */
.issuing-authority,
.issuingAuthority {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #5f6b7c;
}

.issuing-authority .abbreviation {
    font-weight: 600;
    color: #182026;
}

/* Temporal Scope Badge */
.temporal-scope,
.temporalScope {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    background: #f0f4f8;
    color: #4a5568;
}

/* Classification Method Badge */
.classification-method,
.classificationMethod {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    background: #edf2f7;
    color: #4a5568;
}

.classification-method.llm,
.classificationMethod[data-method="llm"] {
    background: #e9d8fd;
    color: #553c9a;
}

.classification-method.rule-based,
.classificationMethod[data-method="rule-based"] {
    background: #c6f6d5;
    color: #276749;
}

.classification-method.hybrid,
.classificationMethod[data-method="hybrid"] {
    background: #feebc8;
    color: #744210;
}

/* ============================================================
   Reference Flow External Panel Styles
   ============================================================ */

#referenceflow-external-panel {
    font-size: 11px;
}

.external-ref-group {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.external-ref-group:hover {
    transform: translateX(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.external-ref-group details summary {
    list-style: none;
}

.external-ref-group details summary::-webkit-details-marker {
    display: none;
}

.external-ref-group details[open] summary {
    margin-bottom: 4px;
}

/* Highlighted source nodes */
#referenceflow-container .nodes circle.highlighted {
    filter: drop-shadow(0 0 4px currentColor);
}

/* Reference Flow Tooltip (if added) */
#referenceflow-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    pointer-events: none;
    z-index: 1000;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.4;
}