/* ForensicInvestigator - Design sobre et professionnel */
/* Palette: Blanc et Bleu foncé uniquement */

:root {
    --primary: #1e3a5f;
    --primary-dark: #152a45;
    --primary-light: #2d4a6f;
    --primary-hover: #1a3050;
    --text-dark: #1a1a2e;
    --text-muted: #4a5568;
    --text-light: #718096;
    --border: #e2e8f0;
    --border-dark: #cbd5e0;
    --bg-white: #ffffff;
    --bg-light: #f7fafc;
    --bg-subtle: #edf2f7;
    --success: #1e3a5f;
    --warning: #2d4a6f;
    --danger: #1e3a5f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Toast notification animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Streaming cursor animation */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.streaming-cursor {
    animation: blink 0.8s infinite;
    color: var(--primary);
    font-weight: bold;
}

/* Utility classes */
.hidden {
    display: none !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Layout principal */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header */
.header {
    background: var(--primary);
    color: white;
    padding: 1rem 2rem;
    box-shadow: 0 2px 10px rgba(30, 58, 95, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.header-subtitle {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Header layout */
.header-left {
    display: flex;
    flex-direction: column;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Bouton aide header */
.btn-header-help {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-header-help:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-header-help .material-icons {
    font-size: 1.25rem;
}

/* Help Sidebar */
.help-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

.help-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    max-width: 700px;
    min-width: 400px;
    height: 100vh;
    background: var(--bg-white);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.help-sidebar.active {
    transform: translateX(0);
}

.help-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--primary);
    color: white;
}

.help-sidebar-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.help-sidebar-header h2 .material-icons {
    font-size: 1.5rem;
}

.help-sidebar-header .btn-ghost {
    color: white;
    opacity: 0.8;
}

.help-sidebar-header .btn-ghost:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.help-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.help-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.help-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.help-section h3 .material-icons {
    font-size: 1.25rem;
}

.help-section p {
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.help-section ul {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text-muted);
}

.help-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.help-section li strong {
    color: var(--text-dark);
}

.help-section ul ul {
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.help-section ul ul li {
    margin-bottom: 0.25rem;
}

.help-section code {
    background: var(--bg-subtle);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--primary);
}

.help-tips {
    background: var(--bg-subtle);
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.help-tips h3 {
    color: var(--primary-dark);
}

.help-tips ul {
    color: var(--text-dark);
}

@media (max-width: 900px) {
    .help-sidebar {
        width: 80%;
        min-width: unset;
    }
}

@media (max-width: 600px) {
    .help-sidebar {
        width: 100%;
    }
}

/* Recherche globale */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    min-width: 300px;
}

.header-search .material-icons {
    font-size: 1.25rem;
    opacity: 0.7;
    margin-right: 0.5rem;
}

.header-search input {
    background: transparent;
    border: none;
    color: white;
    font-size: 0.875rem;
    width: 100%;
    outline: none;
}

.header-search input::placeholder {
    color: rgba(255,255,255,0.6);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-top: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.search-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}

.search-result-item:hover {
    background: var(--bg-subtle);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item .material-icons {
    color: var(--primary);
    font-size: 1.25rem;
}

.search-result-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    background: var(--bg-subtle);
    color: var(--text-muted);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Navigation principale */
.main-nav {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 2rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.nav-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-btn:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

.nav-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Contenu principal */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--bg-white);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.sidebar-filter {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
}

.sidebar-filter .form-select {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
}

.sidebar-filter .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

/* Sidebar filters avancés */
.sidebar-filters {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-filters .filter-row {
    width: 100%;
}

.sidebar-filters .form-select-sm,
.sidebar-filters .form-input-sm {
    width: 100%;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: white;
}

.sidebar-filters .form-select-sm:focus,
.sidebar-filters .form-input-sm:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.sidebar-filters .form-input-sm::placeholder {
    color: var(--text-light);
}

.sidebar-filters .filter-row-search {
    display: flex;
    gap: 0.25rem;
}

.sidebar-filters .filter-row-search .form-input-sm {
    flex: 1;
}

.btn-icon-sm {
    padding: 0.3rem;
    min-width: auto;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-sm .material-icons {
    font-size: 1rem;
}

.btn-icon-sm:hover {
    background: var(--primary);
    color: white;
}

/* Case item amélioré */
.case-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.recent-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

.case-item.recent {
    border-left: 3px solid var(--primary);
}

.case-item-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-delete-case {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    color: var(--text-muted);
}

.case-item:hover .btn-delete-case {
    opacity: 1;
}

.btn-delete-case:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.btn-delete-case .material-icons {
    font-size: 1rem;
}

.case-item.active .btn-delete-case {
    color: rgba(255, 255, 255, 0.7);
}

.case-item.active .btn-delete-case:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.case-status-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: var(--bg-light);
    color: var(--text-muted);
}

.case-status-badge.en_cours {
    background: #dbeafe;
    color: #1e40af;
}

.case-status-badge.resolu {
    background: #d1fae5;
    color: #065f46;
}

.case-status-badge.classe {
    background: var(--bg-subtle);
    color: var(--text-light);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    min-height: 0;
}

/* Case list items */
.case-item {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.25rem;
    border: 1px solid transparent;
}

.case-item:hover {
    background: var(--bg-subtle);
}

.case-item.active {
    background: var(--primary);
    color: white;
}

.case-item-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.case-item-meta {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.case-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    /* Couleur par défaut pour les types non définis */
    background: #6b7280;
    color: white;
}

.case-type-badge.homicide {
    background: #dc2626;
    color: white;
}

.case-type-badge.disparition {
    background: #f59e0b;
    color: white;
}

.case-type-badge.fraude {
    background: #8b5cf6;
    color: white;
}

.case-type-badge.vol {
    background: #3b82f6;
    color: white;
}

.case-type-badge.incendie {
    background: #ef4444;
    color: white;
}

.case-type-badge.trafic {
    background: #059669;
    color: white;
}

.case-type-badge.agression {
    background: #ec4899;
    color: white;
}

.case-type-badge.cyber {
    background: #06b6d4;
    color: white;
}

.case-type-badge.terrorisme {
    background: #1f2937;
    color: white;
}

.case-type-badge.autre {
    background: var(--text-muted);
    color: white;
}

.case-item.active .case-type-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Workspace */
.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.workspace-tabs {
    display: flex;
    gap: 0.25rem;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

.tab-btn.active {
    background: var(--primary);
    color: white;
}

.workspace-content {
    flex: 1;
    overflow: hidden;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1.5rem;
    max-height: calc(100vh - 180px);
}

/* Hypotheses view - single column layout */
#view-hypotheses {
    grid-template-columns: 1fr;
}

/* Hypotheses list - 2 columns grid */
#hypotheses-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

#hypotheses-list .hypothesis-card {
    margin-bottom: 0;
}

/* Panels */
.panel {
    background: var(--bg-white);
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.panel-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

.panel-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}

.panel-description .material-icons {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 0.25rem;
    color: var(--primary);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.panel-full {
    grid-column: span 2;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-secondary {
    background: var(--bg-white);
    color: var(--primary);
    border-color: var(--border-dark);
}

.btn-secondary:hover {
    background: var(--bg-subtle);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.btn-icon {
    padding: 0.5rem;
    width: 36px;
    height: 36px;
}

.btn-sm.btn-icon {
    padding: 0.25rem;
    width: 28px;
    height: 28px;
    min-width: 28px;
}

/* Panel collapsible */
.panel {
    transition: all 0.3s ease;
    min-width: 0;
}

.panel-collapsed {
    min-width: 48px !important;
    max-width: 48px !important;
    flex: 0 0 48px !important;
}

.panel-collapsed .panel-content,
.panel-collapsed .panel-description {
    display: none !important;
}

.panel-collapsed .panel-header {
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    height: 100%;
}

.panel-collapsed .panel-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    margin-top: 0.5rem;
}

.panel-collapsed .panel-header > div {
    display: flex;
    flex-direction: column;
}

.panel-collapsed .panel-header .btn:not(.btn-icon) {
    display: none;
}

/* Panel section divider (for integrated alerts) */
.panel-section-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}

.panel-section-divider .material-icons {
    font-size: 1rem;
}

/* N4L specific - when one panel is collapsed, the other expands */
#view-n4l {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#view-n4l.has-collapsed {
    grid-template-columns: 48px 1fr;
}

#view-n4l.has-collapsed-right {
    grid-template-columns: 1fr 48px;
}

/* Graph containers */
#graph-container,
#n4l-graph-container {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: var(--bg-light);
    border-radius: 4px;
}

#n4l-metadata-container {
    background: var(--bg-subtle);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.8rem;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.375rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: var(--bg-white);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Entity cards */
.entity-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.entity-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.entity-card.summary-link {
    background: var(--bg-light);
}

.entity-card.summary-link:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.entity-card.summary-link:hover .entity-name,
.entity-card.summary-link:hover .entity-description {
    color: white;
}

.entity-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.entity-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.entity-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--primary);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entity-badge.victim {
    background: var(--primary-dark);
}

.entity-badge.suspect {
    background: var(--primary-light);
}

.entity-badge.witness {
    background: var(--text-muted);
}

/* Entity attributes */
.entity-attributes {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.attr-item {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    display: flex;
    gap: 0.5rem;
}

.attr-key {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 80px;
}

.attr-val {
    color: var(--text-dark);
}

/* Entity relations */
.entity-relations {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.rel-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.rel-item {
    font-size: 0.8rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.entity-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Evidence cards */
.evidence-card {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 0 8px 8px 0;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.evidence-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.evidence-type {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.evidence-reliability {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.reliability-bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.reliability-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-dark);
}

.timeline-event {
    position: relative;
    padding-bottom: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.timeline-event:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.timeline-event.expanded {
    border-color: var(--primary);
}

.timeline-event.importance-high {
    border-left: 3px solid #dc2626;
}

.timeline-event::before {
    content: '';
    position: absolute;
    left: -1.65rem;
    top: 1rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-white);
    box-shadow: 0 0 0 2px var(--primary);
}

.timeline-event.verified::before {
    background: var(--primary-dark);
    box-shadow: 0 0 0 2px var(--primary-dark);
}

.timeline-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.timeline-chevron {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.timeline-event.expanded .timeline-chevron {
    transform: rotate(180deg);
}

.timeline-event-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1rem;
}

.timeline-event-details.expanded {
    max-height: 500px;
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border);
}

.timeline-entities {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: 6px;
}

.entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.entity-chip:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.entity-chip:hover .material-icons {
    color: white;
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.timeline-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.timeline-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* ============================================
   Timeline Interactive Améliorée
   ============================================ */

/* Timeline Controls Bar */
.timeline-controls-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    margin-bottom: 1rem;
    align-items: center;
}

.timeline-controls-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.controls-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Zoom Buttons */
.timeline-zoom-buttons {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-white);
    border-radius: 6px;
    padding: 0.25rem;
    border: 1px solid var(--border);
}

.timeline-zoom-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-zoom-btn .material-icons {
    font-size: 1rem;
}

.timeline-zoom-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-dark);
}

.timeline-zoom-btn.active {
    background: var(--primary);
    color: white;
}

/* Overlay Toggles */
.timeline-overlay-toggles {
    display: flex;
    gap: 0.75rem;
}

.overlay-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.overlay-toggle:has(input:checked) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: white;
}

.overlay-toggle input {
    display: none;
}

.overlay-toggle .material-icons {
    font-size: 1rem;
}

/* Animation Controls */
.timeline-animation-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.speed-control .material-icons {
    color: var(--text-muted);
}

.speed-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-dark);
    border-radius: 2px;
    cursor: pointer;
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

/* Timeline Analysis Panel */
.timeline-analysis-panel {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.timeline-analysis-section {
    flex: 1;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--bg-white);
    border: 1px solid var(--border);
}

.timeline-gaps {
    border-left: 3px solid #f59e0b;
}

.timeline-overlaps {
    border-left: 3px solid #ef4444;
}

.analysis-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.timeline-gaps .analysis-header {
    color: #f59e0b;
}

.timeline-overlaps .analysis-header {
    color: #ef4444;
}

.analysis-header .material-icons {
    font-size: 1.1rem;
}

.analysis-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gap-item, .overlap-item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gap-item:hover, .overlap-item:hover {
    background: var(--bg-light);
    transform: translateX(4px);
}

.gap-duration, .overlap-events {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-dark);
}

.gap-period, .overlap-period {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Timeline Overlays Container */
.timeline-overlays-container {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Overlay Columns Layout */
.overlay-columns {
    display: grid;
    grid-template-columns: repeat(var(--column-count, 3), 1fr);
    gap: 1rem;
}

.overlay-column {
    background: var(--bg-subtle);
    border-radius: 8px;
    overflow: hidden;
}

.overlay-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overlay-column-header .material-icons {
    font-size: 1.1rem;
}

.overlay-count {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
}

.overlay-column-content {
    padding: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.overlay-item {
    background: var(--bg-white);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--item-color);
    transition: all 0.2s ease;
}

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

.overlay-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(2px);
}

.overlay-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.overlay-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.overlay-item-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.overlay-item-badge {
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    font-weight: 600;
}

.overlay-item-events {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-left: 1.25rem;
}

.overlay-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.overlay-event-dot:hover {
    transform: scale(1.5);
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Legacy overlay styles (keeping for compatibility) */
.overlay-section {
    margin-bottom: 1rem;
}

.overlay-section:last-child {
    margin-bottom: 0;
}

.overlay-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overlay-section-header .material-icons {
    font-size: 1rem;
}

.overlay-tracks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.overlay-track {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.track-label {
    width: 120px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.5rem;
    border-left: 3px solid var(--track-color);
}

.track-events {
    flex: 1;
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0;
    min-height: 20px;
    background: var(--bg-subtle);
    border-radius: 4px;
}

.track-event {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.track-event:hover {
    transform: scale(1.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Timeline Main Area */
.timeline-main {
    position: relative;
}

/* Timeline Ruler */
.timeline-ruler {
    padding: 0.5rem 0 0.5rem 2rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.ruler-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.ruler-mark {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    position: relative;
}

.ruler-mark::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 1px;
    height: 8px;
    background: var(--border-dark);
}

/* Timeline Groups */
.timeline-group {
    margin-bottom: 1.5rem;
}

.timeline-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.group-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.group-count {
    font-size: 0.75rem;
    opacity: 0.8;
}

.timeline-group-events {
    padding-left: 1rem;
}

/* Event Badges */
.timeline-event-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.badge .material-icons {
    font-size: 0.9rem;
}

.badge-verified {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge-high {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Event Location in Details */
.event-location {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.event-location .material-icons {
    font-size: 0.9rem;
    color: var(--primary);
}

/* Timeline Event Actions */
.timeline-event-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Animation Styles */
@keyframes timelineEventAppear {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.timeline.animating .timeline-event {
    opacity: 0;
}

.timeline-event.animated {
    animation: timelineEventAppear 0.5s ease-out forwards;
    animation-delay: var(--animation-delay);
}

.timeline-event.animation-highlight {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.2), 0 4px 12px rgba(30, 58, 95, 0.15);
}

/* Gap and Overlap Highlights */
@keyframes gapHighlight {
    0%, 100% { border-color: #f59e0b; }
    50% { border-color: transparent; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3); }
}

@keyframes overlapHighlight {
    0%, 100% { border-color: #ef4444; }
    50% { border-color: transparent; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3); }
}

.timeline-event.gap-highlight {
    animation: gapHighlight 0.5s ease-in-out 6;
    border-color: #f59e0b !important;
}

.timeline-event.overlap-highlight {
    animation: overlapHighlight 0.5s ease-in-out 6;
    border-color: #ef4444 !important;
}

/* Form Row for date inputs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .overlay-columns {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .timeline-controls-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-analysis-panel {
        flex-direction: column;
    }

    .track-label {
        width: 80px;
    }

    .overlay-column-content {
        max-height: 200px;
    }
}

/* Search highlight animation */
@keyframes searchHighlight {
    0% { box-shadow: 0 0 0 0 rgba(30, 58, 95, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(30, 58, 95, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(30, 58, 95, 0); }
}

.search-highlight {
    animation: searchHighlight 1s ease-out 2;
    border-color: var(--primary) !important;
}

/* Hypothesis cards */
.hypothesis-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.hypothesis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.hypothesis-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.hypothesis-status {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.hypothesis-status.pending {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.hypothesis-status.supported {
    background: var(--primary);
    color: white;
}

.hypothesis-status.refuted {
    background: var(--primary-light);
    color: white;
}

.hypothesis-confidence {
    margin-top: 0.75rem;
}

.confidence-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.confidence-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.confidence-fill.confidence-high {
    background: #22c55e;
}

.confidence-fill.confidence-medium {
    background: #f59e0b;
}

.confidence-fill.confidence-low {
    background: #ef4444;
}

/* Hypothesis improvements */
.hypothesis-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hypothesis-card {
    position: relative;
    border-left: 4px solid var(--border);
    transition: all 0.2s ease;
}

.hypothesis-card.status-pending {
    border-left-color: #9ca3af;
}

.hypothesis-card.status-supported {
    border-left-color: #22c55e;
}

.hypothesis-card.status-refuted {
    border-left-color: #ef4444;
}

.hypothesis-card.status-partial {
    border-left-color: #f59e0b;
}

.hypothesis-card.selected-for-compare {
    box-shadow: 0 0 0 2px var(--primary);
}

.hypothesis-card.analyzing {
    opacity: 0.7;
}

.hypothesis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.hypothesis-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hypothesis-origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.hypothesis-origin-badge .material-icons {
    font-size: 0.75rem;
}

.hypothesis-origin-badge.ai {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.hypothesis-origin-badge.manual {
    background: var(--bg-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.hypothesis-status-dropdown {
    flex-shrink: 0;
}

.hypothesis-status-select {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
    cursor: pointer;
    background: white;
}

.hypothesis-status-select.status-pending {
    background: #f3f4f6;
    color: #6b7280;
}

.hypothesis-status-select.status-supported {
    background: #dcfce7;
    color: #166534;
}

.hypothesis-status-select.status-refuted {
    background: #fee2e2;
    color: #991b1b;
}

.hypothesis-status-select.status-partial {
    background: #fef3c7;
    color: #92400e;
}

.hypothesis-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.5rem 0;
    line-height: 1.5;
}

.hypothesis-evidence {
    margin-top: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.hypothesis-evidence.supporting {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.hypothesis-evidence.contradicting {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.hypothesis-evidence .evidence-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.hypothesis-evidence .evidence-label .material-icons {
    font-size: 1rem;
}

.hypothesis-evidence.supporting .evidence-label {
    color: #166534;
}

.hypothesis-evidence.contradicting .evidence-label {
    color: #991b1b;
}

.hypothesis-evidence .evidence-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.hypothesis-evidence .evidence-tag {
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
}

.hypothesis-evidence .evidence-tag.supporting {
    background: #dcfce7;
    color: #166534;
}

.hypothesis-evidence .evidence-tag.contradicting {
    background: #fee2e2;
    color: #991b1b;
}

.hypothesis-questions {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: 6px;
}

.hypothesis-questions strong {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    margin-bottom: 0.35rem;
}

.hypothesis-questions strong .material-icons {
    font-size: 1rem;
}

.hypothesis-questions ul {
    margin: 0;
    padding-left: 1.25rem;
}

.hypothesis-questions li {
    margin-bottom: 0.25rem;
    color: var(--text-dark);
}

.hypothesis-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.hypothesis-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.hypothesis-actions .btn .material-icons {
    font-size: 0.9rem;
}

.hypothesis-actions .btn-danger {
    color: #dc2626;
}

.hypothesis-actions .btn-danger:hover {
    background: #fee2e2;
}

/* Analysis loading */
.analysis-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--primary);
}

/* Hypothesis filter menu */
#hypothesis-filter-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 200px;
    padding: 0.5rem;
}

#hypothesis-filter-menu.active {
    display: block;
}

.filter-section {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

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

.filter-section-title {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    display: block;
}

/* Evidence manager modal */
.evidence-manager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.evidence-manager .evidence-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.evidence-manager .evidence-checkboxes {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
}

.evidence-manager .evidence-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
}

.evidence-manager .evidence-checkbox:hover {
    background: var(--bg-subtle);
}

.evidence-manager .evidence-checkbox.selected {
    background: var(--bg-light);
}

.evidence-manager .evidence-checkbox input {
    accent-color: var(--primary);
}

/* Hypothesis comparison */
.hypothesis-comparison {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.hypothesis-comparison .comparison-column {
    flex: 1;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.hypothesis-comparison .comparison-column h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--primary);
}

.hypothesis-comparison .comparison-status {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hypothesis-comparison .comparison-status.status-pending {
    background: #f3f4f6;
    color: #6b7280;
}

.hypothesis-comparison .comparison-status.status-supported {
    background: #dcfce7;
    color: #166534;
}

.hypothesis-comparison .comparison-status.status-refuted {
    background: #fee2e2;
    color: #991b1b;
}

.hypothesis-comparison .comparison-status.status-partial {
    background: #fef3c7;
    color: #92400e;
}

.hypothesis-comparison .comparison-confidence {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.hypothesis-comparison .comparison-confidence .confidence-bar {
    flex: 1;
    height: 8px;
}

.hypothesis-comparison .comparison-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.hypothesis-comparison .comparison-evidence {
    font-size: 0.8rem;
    color: var(--text-dark);
}

.hypothesis-comparison .comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary);
    padding: 0 0.5rem;
}

/* Form range slider */
.form-range {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

.form-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

#confidence-value {
    display: inline-block;
    margin-left: 0.5rem;
    font-weight: 600;
    color: var(--primary);
}

/* Modal explanation */
.modal-explanation {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.modal-explanation .material-icons {
    color: var(--primary);
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.modal-explanation p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.modal-explanation strong {
    font-weight: 600;
}

/* Graph container */
#graph-container {
    width: 100%;
    height: calc(100vh - 280px);
    min-height: 500px;
    background: var(--bg-white);
    border-radius: 8px;
}

/* N4L View layout */
#view-n4l {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    height: calc(100vh - 180px);
}

#view-n4l .panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#view-n4l .panel .panel-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    position: relative;
}

#n4l-graph-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-white);
    border-radius: 8px;
}

#view-n4l #n4l-editor {
    width: 100%;
    height: 100%;
    resize: none;
    padding: 0.5rem;
    border: none;
    font-family: monospace;
}

/* Dashboard layout */
#view-dashboard {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    height: calc(100vh - 180px);
}

#view-dashboard .panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#view-dashboard .panel .panel-content {
    flex: 1;
    overflow: auto;
}

#view-dashboard .panel:first-child .panel-content {
    padding: 0;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

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

.modal {
    background: var(--bg-white);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(30, 58, 95, 0.2);
    transform: translateY(20px);
    transition: transform 0.2s ease;
}

.modal-overlay.active .modal {
    transform: translateY(0);
}

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

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.modal-close:hover {
    opacity: 1;
}

/* Draggable Modal Styles */
.modal .modal-header {
    cursor: grab;
}

.modal .modal-header:active {
    cursor: grabbing;
}

.modal.draggable {
    position: fixed !important;
    margin: 0 !important;
    z-index: 1001;
}

.modal.dragging {
    user-select: none;
    opacity: 0.95;
    box-shadow: 0 25px 80px rgba(30, 58, 95, 0.3);
}

.modal.dragging .modal-header {
    cursor: grabbing;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--bg-light);
}

/* AI Analysis display */
.ai-analysis {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}

.ai-analysis h1, .ai-analysis h2, .ai-analysis h3 {
    color: var(--primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.ai-analysis h1 { font-size: 1.25rem; }
.ai-analysis h2 { font-size: 1.1rem; }
.ai-analysis h3 { font-size: 1rem; }

.ai-analysis p {
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.ai-analysis ul, .ai-analysis ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.ai-analysis li {
    margin-bottom: 0.25rem;
}

.ai-analysis strong {
    color: var(--primary);
}

/* Loading state */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.loading-analysis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.loading-analysis .spinner {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    font-size: 0.9rem;
}

/* Tooltips */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-dark);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Responsive */
@media (max-width: 1024px) {
    .workspace-content {
        grid-template-columns: 1fr;
    }

    .panel-full {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 240px;
    }

    .header h1 {
        font-size: 1.25rem;
    }
}

/* AI Assistant Panel */
.ai-assistant {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 800px;
    max-width: calc(100vw - 2rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.2);
    z-index: 1000;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ai-assistant.collapsed .ai-assistant-body {
    display: none;
}

/* AI Assistant Draggable State */
.ai-assistant.dragging {
    transition: none;
    opacity: 0.95;
    box-shadow: 0 8px 30px rgba(30, 58, 95, 0.35);
}

.ai-assistant-header {
    background: var(--primary);
    color: white;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: move;
    user-select: none;
}

.ai-assistant-header span:last-child {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.ai-assistant.collapsed .ai-assistant-header span:last-child {
    transform: rotate(180deg);
}

.ai-assistant-body {
    display: flex;
    flex-direction: column;
    height: 600px;
    max-height: calc(100vh - 150px);
}

.ai-assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-message {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 95%;
}

.ai-message-user {
    background: var(--primary);
    color: white;
    align-self: flex-end;
}

.ai-message-bot {
    background: var(--bg-light);
    color: var(--text-dark);
    align-self: flex-start;
    border: 1px solid var(--border);
    max-width: 100%;
}

/* Markdown styling inside AI messages */
.ai-message-bot h1, .ai-message-bot h2, .ai-message-bot h3, .ai-message-bot h4 {
    color: var(--primary);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.ai-message-bot h1:first-child, .ai-message-bot h2:first-child, .ai-message-bot h3:first-child {
    margin-top: 0;
}

.ai-message-bot h1 { font-size: 1.2rem; }
.ai-message-bot h2 { font-size: 1.1rem; }
.ai-message-bot h3 { font-size: 1rem; }
.ai-message-bot h4 { font-size: 0.95rem; }

.ai-message-bot p {
    margin-bottom: 0.5rem;
}

.ai-message-bot p:last-child {
    margin-bottom: 0;
}

.ai-message-bot ul, .ai-message-bot ol {
    margin-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.ai-message-bot li {
    margin-bottom: 0.25rem;
}

.ai-message-bot strong {
    color: var(--primary);
    font-weight: 600;
}

.ai-message-bot em {
    font-style: italic;
}

.ai-message-bot table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.85rem;
}

.ai-message-bot table th, .ai-message-bot table td {
    border: 1px solid var(--border);
    padding: 0.5rem;
    text-align: left;
}

.ai-message-bot table th {
    background: var(--bg-subtle);
    font-weight: 600;
    color: var(--primary);
}

.ai-message-bot table tr:nth-child(even) {
    background: var(--bg-light);
}

.ai-message-bot code {
    background: var(--bg-subtle);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
}

.ai-message-bot pre {
    background: var(--bg-subtle);
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.ai-message-bot pre code {
    background: transparent;
    padding: 0;
}

.ai-message-bot blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 1rem;
    margin: 0.5rem 0;
    color: var(--text-muted);
    font-style: italic;
}

.ai-message-bot hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.75rem 0;
}

.ai-assistant-input {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}

.ai-assistant-input .form-input {
    flex: 1;
}

/* Entity/Evidence card actions */
.card-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.card-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Entity actions with multiple buttons */
.entity-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.entity-actions .btn:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* Analysis loading state */
.analysis-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: var(--text-muted);
}

.analysis-loading .material-icons {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.spinning {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Entity analysis result */
.entity-analysis-result {
    max-height: 60vh;
    overflow-y: auto;
}

.entity-analysis-result .analysis-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.entity-analysis-result .entity-type {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.entity-analysis-result .analysis-content {
    line-height: 1.6;
}

.entity-analysis-result .analysis-content p {
    margin-bottom: 0.5rem;
}

.entity-analysis-result .analysis-point {
    font-weight: 500;
    color: var(--primary);
    margin-top: 1rem;
}

.entity-analysis-result .analysis-bullet {
    padding-left: 1rem;
    color: var(--text-dark);
}

.entity-analysis-result .analysis-meta {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Error state */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.error-state .material-icons {
    font-size: 3rem;
    color: var(--danger);
    margin-bottom: 1rem;
}

.error-state .hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Entity timeline modal */
.entity-timeline-modal .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.entity-timeline-list {
    max-height: 50vh;
    overflow-y: auto;
}

.entity-timeline-event {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--bg-light);
    border-left: 3px solid var(--primary);
}

.entity-timeline-event.high {
    border-left-color: var(--danger);
    background: #fef2f2;
}

.entity-timeline-event.medium {
    border-left-color: var(--warning);
}

.entity-timeline-event.low {
    border-left-color: var(--text-muted);
}

.entity-timeline-event .event-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    font-size: 0.8rem;
}

.entity-timeline-event .event-date {
    font-weight: 600;
    color: var(--text-dark);
}

.entity-timeline-event .event-hour {
    color: var(--primary);
    font-weight: 500;
}

.entity-timeline-event .event-content {
    flex: 1;
}

.entity-timeline-event .event-title {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.entity-timeline-event .event-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.entity-timeline-event .event-location .material-icons {
    font-size: 0.9rem;
}

.entity-timeline-event .event-desc {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin-top: 0.25rem;
}

/* Entity comparison checkbox */
.entity-compare-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 0.5rem;
}

.entity-compare-checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.entity-compare-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.entity-compare-checkbox input:checked + .checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.entity-compare-checkbox input:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.entity-compare-checkbox:hover .checkmark {
    border-color: var(--primary);
}

.entity-card.selected-for-compare {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Compare entities button */
.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover {
    background: #d97706;
}

.btn-accent {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.btn-accent:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

/* Dropdown component */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 220px;
    padding: 0.5rem 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s;
}

.dropdown-item:hover {
    background: var(--bg-subtle);
}

.dropdown-item .material-icons {
    font-size: 1rem;
    color: var(--primary-color);
}

/* Entity comparison modal */
.entity-comparison-modal {
    max-height: 70vh;
    overflow-y: auto;
}

.compare-entities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.compare-entity-col {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border);
}

.compare-entity-header {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.compare-entity-header h4 {
    margin: 0.5rem 0 0.25rem;
    color: var(--text-dark);
}

.compare-entity-header .entity-type {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.compare-entity-details .description {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border);
}

.compare-attrs {
    margin-bottom: 0.75rem;
}

.compare-attrs .attr {
    font-size: 0.8rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.compare-relations,
.compare-events {
    margin-top: 0.75rem;
}

.compare-relations h5,
.compare-events h5 {
    font-size: 0.8rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compare-relations .rel,
.compare-events .event {
    font-size: 0.8rem;
    color: var(--text-dark);
    padding: 0.25rem 0;
    border-bottom: 1px dotted var(--border);
}

.compare-common-section {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.compare-common-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #166534;
    margin-bottom: 1rem;
}

.compare-common-section h4 .material-icons {
    font-size: 1.2rem;
}

.common-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.common-item h5 {
    font-size: 0.8rem;
    color: #166534;
    margin-bottom: 0.5rem;
}

.common-connection,
.common-event {
    font-size: 0.85rem;
    color: var(--text-dark);
    padding: 0.25rem 0.5rem;
    background: white;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.common-event .event-date {
    font-weight: 600;
    color: var(--primary);
    margin-right: 0.5rem;
}

.compare-actions {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.compare-actions .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Markdown rendering in analysis */
.analysis-content .md-h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
}

.analysis-content .md-h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 1.25rem 0 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.analysis-content .md-h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 1rem 0 0.5rem;
}

.analysis-content .md-h4,
.analysis-content .md-h5,
.analysis-content .md-h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0.75rem 0 0.5rem;
}

.analysis-content .md-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

.analysis-content .md-list {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.analysis-content .md-list li {
    margin-bottom: 0.35rem;
    line-height: 1.5;
}

.analysis-content .md-code {
    background: var(--bg-light);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    color: var(--danger);
}

.analysis-content .md-table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
}

.analysis-content .md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.analysis-content .md-table th,
.analysis-content .md-table td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.analysis-content .md-table th {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.analysis-content .md-table tr:nth-child(even) {
    background: var(--bg-light);
}

.analysis-content .md-table tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

.analysis-content strong {
    font-weight: 600;
    color: var(--text-dark);
}

.analysis-content em {
    font-style: italic;
}

.analysis-content p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Filter dropdown */
.filter-dropdown {
    position: relative;
    display: inline-block;
}

.filter-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 0.5rem;
    min-width: 180px;
    z-index: 100;
    display: none;
}

.filter-menu.active {
    display: block;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
}

.filter-item:hover {
    background: var(--bg-subtle);
}

.filter-item input[type="checkbox"] {
    accent-color: var(--primary);
}

/* Confirmation dialog styles */
.confirm-dialog {
    text-align: center;
    padding: 1rem 0;
}

.confirm-dialog .material-icons {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.confirm-dialog p {
    margin-bottom: 0.5rem;
}

/* Evidence card improvements */
.evidence-card {
    position: relative;
}

.evidence-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.evidence-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.evidence-type-icon {
    border-radius: 8px;
    color: #070429;
    align-items: center;
    justify-content: center;
}

.evidence-type-icon .material-icons {
    font-size: 1.25rem;
}

.evidence-header-info {
    display: flex;
    flex-direction: column;
}

.evidence-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.evidence-location .material-icons {
    font-size: 0.9rem;
}

.evidence-description {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin: 0.5rem 0;
    line-height: 1.5;
}

.evidence-linked-entities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}

.evidence-linked-entities .entity-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-subtle);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--primary);
    border: 1px solid var(--border);
}

.evidence-linked-entities .entity-tag .material-icons {
    font-size: 0.85rem;
}

/* Reliability color classes */
.evidence-card.reliability-high {
    border-left-color: #22c55e;
}

.evidence-card.reliability-medium {
    border-left-color: #f59e0b;
}

.evidence-card.reliability-low {
    border-left-color: #ef4444;
}

.reliability-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.reliability-badge.high {
    background: #dcfce7;
    color: #166534;
}

.reliability-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.reliability-badge.low {
    background: #fee2e2;
    color: #991b1b;
}

/* Evidence actions */
.evidence-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.evidence-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.evidence-actions .btn .material-icons {
    font-size: 0.9rem;
}

.evidence-actions .btn-danger {
    color: #dc2626;
}

.evidence-actions .btn-danger:hover {
    background: #fee2e2;
}

/* Evidence links modal */
.evidence-links-modal .links-section {
    margin-bottom: 1.5rem;
}

.evidence-links-modal .links-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.evidence-links-modal .links-section h4 .material-icons {
    font-size: 1.1rem;
}

.evidence-links-modal .link-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-light);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.evidence-links-modal .link-item:hover {
    background: var(--primary);
    color: white;
}

.evidence-links-modal .link-item .material-icons {
    font-size: 1rem;
    color: var(--primary);
}

.evidence-links-modal .link-item:hover .material-icons {
    color: white;
}

.evidence-links-modal .no-links {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem;
}

/* Evidence filter dropdown */
.evidence-filter-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.evidence-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.evidence-filter-btn.active {
    background: var(--primary);
    color: white;
}

/* Edit evidence modal form */
.edit-evidence-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.edit-evidence-form .entity-checkboxes {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
}

.edit-evidence-form .entity-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.edit-evidence-form .entity-checkbox:hover {
    background: var(--bg-subtle);
}

.edit-evidence-form .entity-checkbox input {
    accent-color: var(--primary);
}

.edit-evidence-form .entity-checkbox label {
    cursor: pointer;
    font-size: 0.85rem;
}

/* Graph focus/blur styles */
.graph-reset-btn {
    opacity: 0.8;
    transition: all 0.2s ease;
}

.graph-reset-btn:hover {
    opacity: 1;
    background: var(--primary);
    color: white;
}

/* Node focus info panel */
.graph-info-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
    max-width: 250px;
    z-index: 10;
}

.graph-info-panel h4 {
    margin: 0 0 0.5rem;
    color: var(--primary);
    font-size: 0.95rem;
}

.graph-info-panel .connections {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.graph-info-panel .connection-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0.25rem 0;
    border-bottom: 1px dotted var(--border);
}

.graph-info-panel .connection-item:last-child {
    border-bottom: none;
}

/* Print styles */
@media print {
    .header, .sidebar, .main-nav, .ai-assistant {
        display: none;
    }

    .workspace {
        margin: 0;
        padding: 1rem;
    }
}

/* =====================================================
   Cross-Case Analysis (Connexions Inter-Affaires)
   ===================================================== */

/* Stats summary */
.cross-case-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
}

.cross-case-stat {
    background: var(--bg-subtle);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border);
}

.cross-case-stat .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

.cross-case-stat .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* No results state */
.cross-case-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.cross-case-no-results .material-icons {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 1rem;
}

/* Match cards */
.cross-case-match {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cross-case-match:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.match-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.match-type-icon {
    color: var(--primary);
    font-size: 1.25rem;
}

.match-type-label {
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
}

.match-confidence {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
}

.match-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.match-cases {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.match-case {
    padding: 0.25rem 0.5rem;
    background: var(--bg-subtle);
    border-radius: 4px;
}

.match-case.current {
    background: var(--primary);
    color: white;
}

.match-case.other {
    background: #6366f1;
    color: white;
}

.match-cases .material-icons {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Confidence bar visual */
.match-confidence-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-subtle);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

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

.match-confidence-bar .bar-fill.high { background: #10b981; }
.match-confidence-bar .bar-fill.medium { background: #f59e0b; }
.match-confidence-bar .bar-fill.low { background: #ef4444; }

/* Match quick actions */
.match-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.match-actions .match-action-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-dark);
}

.match-actions .match-action-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.match-actions .match-action-btn .material-icons {
    font-size: 14px;
}

/* New badge */
.match-badge-new {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #10b981;
    color: white;
    border-radius: 3px;
    margin-left: 0.5rem;
    animation: pulse-new 2s infinite;
}

@keyframes pulse-new {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Grouped matches */
.match-group {
    margin-bottom: 1rem;
}

.match-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: background 0.2s;
}

.match-group-header:hover {
    background: var(--primary-dark);
}

.match-group-header .material-icons {
    font-size: 1.25rem;
}

.match-group-header .group-case-name {
    flex: 1;
    font-weight: 600;
}

.match-group-header .group-count {
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
}

.match-group-header .group-toggle {
    transition: transform 0.2s;
}

.match-group-header.collapsed .group-toggle {
    transform: rotate(-90deg);
}

.match-group-content {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.5rem;
    background: var(--bg-light);
}

.match-group-content.collapsed {
    display: none;
}

.match-group-content .cross-case-match {
    margin-bottom: 0.5rem;
}

.match-group-content .cross-case-match:last-child {
    margin-bottom: 0;
}

/* Export dropdown */
#export-matches-dropdown {
    position: relative;
}

#export-matches-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 150px;
    display: none;
    z-index: 100;
}

#export-matches-dropdown.open .dropdown-menu {
    display: block;
}

#export-matches-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dark);
    transition: background 0.2s;
}

#export-matches-dropdown .dropdown-item:hover {
    background: var(--bg-subtle);
}

#export-matches-dropdown .dropdown-item .material-icons {
    font-size: 18px;
    color: var(--primary);
}

/* Group button active state */
#btn-group-matches.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Alert cards */
.cross-case-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.cross-case-alert .material-icons {
    color: #f59e0b;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cross-case-alert p {
    margin: 0;
    font-size: 0.9rem;
    color: #92400e;
}

/* Compact alert cards */
.cross-case-alert.cross-case-alert-compact {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: 6px;
}

.cross-case-alert.cross-case-alert-compact .material-icons {
    font-size: 1rem;
}

.cross-case-alert.cross-case-alert-compact span:not(.material-icons) {
    font-size: 0.8rem;
    color: #92400e;
}

/* Details modal */
.cross-case-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cross-case-detail .detail-section {
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
}

.cross-case-detail .detail-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--primary);
}

.cross-case-detail .detail-section h4 .material-icons {
    font-size: 1.1rem;
}

.cross-case-detail .detail-section p {
    margin: 0.25rem 0;
    font-size: 0.85rem;
}

/* Confidence bar */
.confidence-bar {
    position: relative;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.confidence-bar .confidence-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--confidence);
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 12px;
    transition: width 0.5s ease;
}

.confidence-bar span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-dark);
    z-index: 1;
}

/* Detail row */
.detail-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px dotted var(--border);
    font-size: 0.85rem;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-key {
    font-weight: 500;
    color: var(--text-muted);
    min-width: 100px;
}

.detail-value {
    color: var(--text-dark);
}

/* Spinning animation for loading states */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Cross-case graph container */
#cross-case-graph-container {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex: 1;
    min-height: 500px;
    height: 100%;
}

/* Le 3ème panel (graphe) doit prendre toute la hauteur */
#view-cross-case .panel:nth-child(3) .panel-content {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

/* Filter container */
.cross-case-filter-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cross-case-filter-container .form-select {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

/* Cross-Case View Layout - 2 colonnes */
#view-cross-case {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    height: calc(100vh - 180px);
    overflow: hidden;
    padding-bottom: 1rem;
}

#view-cross-case .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Premier panel (Connexions Inter-Affaires) */
#view-cross-case .panel:nth-child(1) {
    max-height: 255px;
}

/* Deuxième panel (Correspondances) - prend toute la hauteur restante */
#view-cross-case .panel:nth-child(2) {
    grid-row: span 2;
}

/* Section Suggestions IA intégrée - hauteur limitée */
#cross-case-alerts {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem !important;
}

#cross-case-alerts .alert-item {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

/* Troisième panel (Graphe) - remplit l'espace restant */
#view-cross-case .panel:nth-child(3) {
    flex: 1;
}

#view-cross-case .panel .panel-header {
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: auto;
}

#view-cross-case .panel .panel-description {
    flex-shrink: 0;
}

#view-cross-case .panel .panel-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Contrôles du panel Correspondances - une seule ligne horizontale */
#view-cross-case .cross-case-filter-container {
    flex-wrap: nowrap;
    gap: 0.25rem;
    flex-shrink: 0;
}

#view-cross-case .cross-case-filter-container .form-select,
#view-cross-case .cross-case-filter-container .form-input {
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    height: 28px;
}

#view-cross-case .cross-case-filter-container #cross-case-search {
    width: 90px;
    min-width: 90px;
}

#view-cross-case .cross-case-filter-container #cross-case-filter {
    min-width: 100px;
    width: auto;
}

#view-cross-case .cross-case-filter-container #cross-case-sort {
    min-width: 90px;
    width: auto;
}

#view-cross-case .cross-case-filter-container .btn-sm {
    padding: 0.2rem 0.4rem;
    height: 28px;
    min-width: 28px;
}

#view-cross-case .cross-case-filter-container .dropdown {
    flex-shrink: 0;
}

/* Responsive - Cross-Case View */
@media (max-width: 1200px) {
    #view-cross-case {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }

    #view-cross-case .panel:nth-child(1) {
        max-height: 200px;
    }

    #view-cross-case .panel:nth-child(2) {
        grid-row: span 1;
        max-height: 400px;
    }

    #view-cross-case .panel:nth-child(3) {
        min-height: 400px;
    }
}

/* Cross-case Graph - Statistics bar */
.crosscase-stats {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.crosscase-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-white);
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
}

.crosscase-stats .stat-item .material-icons {
    font-size: 1.1rem;
    color: var(--primary);
}

.crosscase-stats .stat-item .stat-value {
    font-weight: 700;
    color: var(--text-dark);
}

.crosscase-stats .stat-item .stat-label {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Cross-case Graph - Filters bar */
.crosscase-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.crosscase-filters .filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.crosscase-filters .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.crosscase-filters .filter-checkbox:hover {
    background: var(--bg-subtle);
}

.crosscase-filters .filter-checkbox input {
    margin: 0;
}

.crosscase-filters .filter-icon {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Cross-case Graph - Legend */
.crosscase-legend {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    max-width: 180px;
}

.crosscase-legend .legend-title {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem;
}

.crosscase-legend .legend-section {
    margin-bottom: 0.5rem;
}

.crosscase-legend .legend-section:last-child {
    margin-bottom: 0;
}

.crosscase-legend .legend-subtitle {
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.crosscase-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    color: var(--text-dark);
}

.crosscase-legend .legend-node {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 2px solid;
    flex-shrink: 0;
}

.crosscase-legend .legend-edge {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* =====================================================
   HRM (Hypothetical Reasoning Model) View
   ===================================================== */

/* HRM Status indicator */
.hrm-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-indicator.status-online {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.status-indicator.status-offline {
    background: #ef4444;
}

.status-indicator.status-checking {
    background: #f59e0b;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* HRM Question Form */
.hrm-question-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hrm-question-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .hrm-question-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* HRM Hypothesis List */
.hrm-hypothesis-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.hrm-hypothesis-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.hrm-hypothesis-item .hypothesis-info {
    flex: 1;
}

.hrm-hypothesis-item .hypothesis-title {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.hrm-hypothesis-item .hypothesis-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hrm-hypothesis-item .hypothesis-confidence {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
}

.hrm-hypothesis-item .hypothesis-confidence.high {
    background: #dcfce7;
    color: #166534;
}

.hrm-hypothesis-item .hypothesis-confidence.medium {
    background: #fef3c7;
    color: #92400e;
}

.hrm-hypothesis-item .hypothesis-confidence.low {
    background: #fee2e2;
    color: #991b1b;
}

.hrm-hypothesis-item .btn-verify {
    white-space: nowrap;
}

/* HRM Results */
.hrm-result-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.hrm-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.hrm-result-header h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--primary);
}

.hrm-result-header h4 .material-icons {
    font-size: 1.25rem;
}

.hrm-confidence-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.hrm-confidence-badge .confidence-value {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
}

.hrm-confidence-badge .confidence-value.high {
    background: #dcfce7;
    color: #166534;
}

.hrm-confidence-badge .confidence-value.medium {
    background: #fef3c7;
    color: #92400e;
}

.hrm-confidence-badge .confidence-value.low {
    background: #fee2e2;
    color: #991b1b;
}

.hrm-conclusion {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

/* Reasoning Chain */
.hrm-reasoning-chain {
    margin-top: 1rem;
}

.hrm-reasoning-chain h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.hrm-reasoning-chain h5 .material-icons {
    font-size: 1rem;
    color: var(--primary);
}

.reasoning-step {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--primary);
}

.reasoning-step .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.reasoning-step .step-content {
    flex: 1;
}

.reasoning-step .step-premise {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.reasoning-step .step-inference {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.reasoning-step .step-confidence {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* HRM Warnings */
.hrm-warnings {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
}

.hrm-warnings h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #92400e;
    margin: 0 0 0.5rem;
}

.hrm-warnings h5 .material-icons {
    font-size: 1rem;
}

.hrm-warnings ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    color: #92400e;
}

/* HRM Contradictions */
.hrm-contradiction-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.hrm-contradiction-card.severity-critical {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
}

.hrm-contradiction-card.severity-high {
    border-left: 4px solid #f97316;
    background: #fff7ed;
}

.hrm-contradiction-card.severity-medium {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}

.hrm-contradiction-card.severity-low {
    border-left: 4px solid #6b7280;
}

.contradiction-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.contradiction-severity {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    text-transform: uppercase;
}

.contradiction-severity.critical {
    background: #dc2626;
    color: white;
}

.contradiction-severity.high {
    background: #f97316;
    color: white;
}

.contradiction-severity.medium {
    background: #f59e0b;
    color: white;
}

.contradiction-severity.low {
    background: #6b7280;
    color: white;
}

.contradiction-description {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.contradiction-statements {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.contradiction-elements-list {
    margin: 0.5rem 0 0 0;
    padding-left: 0;
    list-style: none;
}

.contradiction-elements-list li {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.contradiction-elements-list li:last-child {
    margin-bottom: 0;
}

.contradiction-suggestions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

.contradiction-suggestions h6 {
    font-size: 0.8rem;
    color: var(--primary);
    margin: 0 0 0.5rem;
}

.contradiction-suggestions ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-dark);
}

/* HRM Consistency Score */
.hrm-consistency-score {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.consistency-bar {
    flex: 1;
    height: 12px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.consistency-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.consistency-fill.high {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.consistency-fill.medium {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.consistency-fill.low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.consistency-value {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 50px;
    text-align: right;
}

.consistency-value.high {
    color: #16a34a;
}

.consistency-value.medium {
    color: #d97706;
}

.consistency-value.low {
    color: #dc2626;
}

/* HRM Verification Result */
.hrm-verification-result {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.hrm-verification-result.supported {
    background: #f0fdf4;
    border: 1px solid #86efac;
}

.hrm-verification-result.not-supported {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.verification-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.verification-icon {
    font-size: 1.5rem;
}

.verification-icon.supported {
    color: #22c55e;
}

.verification-icon.not-supported {
    color: #ef4444;
}

.verification-title {
    flex: 1;
}

.verification-title h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-dark);
}

.verification-title .hypothesis-statement {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.verification-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.verification-section h5 {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.verification-section ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
}

.verification-section.supporting ul li {
    color: #166534;
}

.verification-section.contradicting ul li {
    color: #991b1b;
}

.verification-recommendation {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-white);
    border-radius: 6px;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.verification-recommendation .material-icons {
    color: #eab308;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.verification-recommendation strong {
    color: var(--primary);
}

/* Confidence Update Section - HRM */
.confidence-update-section {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.confidence-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.confidence-old, .confidence-new {
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    min-width: 120px;
}

.confidence-old {
    background: var(--bg-subtle);
}

.confidence-new {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}

.confidence-old .label, .confidence-new .label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.confidence-old .value, .confidence-new .value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}

.confidence-new .value.high { color: #22c55e; }
.confidence-new .value.medium { color: #eab308; }
.confidence-new .value.low { color: #ef4444; }

.confidence-old .explanation, .confidence-new .explanation {
    display: block;
    font-size: 0.65rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

.confidence-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.confidence-arrow .material-icons {
    font-size: 1.5rem;
}

.confidence-arrow .material-icons.positive { color: #22c55e; }
.confidence-arrow .material-icons.negative { color: #ef4444; }
.confidence-arrow .material-icons.neutral { color: var(--text-muted); }

.confidence-arrow .diff {
    font-size: 0.85rem;
    font-weight: 600;
}

.confidence-arrow .diff.positive { color: #22c55e; }
.confidence-arrow .diff.negative { color: #ef4444; }
.confidence-arrow .diff.neutral { color: var(--text-muted); }

.confidence-explanation {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f0f9ff;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

.confidence-explanation .material-icons {
    color: #3b82f6;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.confidence-explanation p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.verification-section h5 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.verification-section h5 .material-icons {
    font-size: 1rem;
}

.verification-section.supporting h5 .material-icons { color: #22c55e; }
.verification-section.contradicting h5 .material-icons { color: #ef4444; }
.verification-section.missing h5 .material-icons { color: #eab308; }

/* HRM View Layout - 2 columns */
#view-hrm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    height: calc(100vh - 180px);
    overflow: hidden;
    padding-bottom: 1rem;
}

#view-hrm .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

#view-hrm .panel .panel-header {
    flex-shrink: 0;
}

#view-hrm .panel .panel-description {
    flex-shrink: 0;
}

#view-hrm .panel .panel-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Assurer que les panels de vérification et résultats ont la même structure */
#view-hrm .panel:nth-child(2),
#view-hrm .panel:nth-child(4) {
    /* Vérification d'Hypothèses et Résultats du Raisonnement */
}

#view-hrm #hrm-verification-results {
    flex-shrink: 0;
    max-height: 40%;
    overflow-y: auto;
}

@media (max-width: 1024px) {
    #view-hrm {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        overflow-y: auto;
    }

    #view-hrm .panel {
        min-height: 300px;
        max-height: 450px;
    }

    #view-hrm .panel .panel-content {
        max-height: 300px;
    }
}

/* Context Menu for Graph */
.context-menu {
    position: fixed;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    padding: 0.5rem 0;
    animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: var(--text-dark);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
    font-size: 0.875rem;
}

.context-menu-item:hover {
    background-color: var(--bg-subtle);
}

.context-menu-item .material-icons {
    font-size: 1.1rem;
    color: var(--primary);
}

.context-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

.context-menu-header {
    display: block;
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    background: linear-gradient(90deg, var(--bg-subtle), transparent);
}

/* Expansion Cone Styles */
.cone-node {
    border: 3px solid var(--primary) !important;
}

.cone-peripheral {
    opacity: 0.4;
}

/* Path highlight styles */
.path-highlight {
    border: 3px solid #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* Paths list container */
.paths-list {
    max-height: 300px;
    overflow-y: auto;
}

.path-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.path-item:hover {
    background: var(--bg-subtle);
    border-color: var(--primary);
}

.path-item.active {
    background: var(--bg-subtle);
    border-color: var(--primary);
    border-width: 2px;
}

.path-nodes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.path-nodes .path-arrow {
    color: var(--text-muted);
}

.path-actions {
    display: flex;
    gap: 0.25rem;
}

/* Cone depth selector */
.cone-depth-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cone-depth-selector label {
    font-weight: 500;
    color: var(--text-dark);
}

.cone-depth-selector select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.875rem;
}

/* =============================================
   Inference Panel Styles
   ============================================= */

.inference-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-height: 80vh;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.15);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

.inference-panel.dragging {
    transition: none;
    box-shadow: 0 8px 30px rgba(30, 58, 95, 0.35);
    opacity: 0.95;
}

.inference-panel-header {
    background: var(--primary);
    color: white;
    padding: 0.875rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}

.inference-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.inference-panel-header .material-icons {
    font-size: 1.1rem;
}

.inference-panel-header .btn-ghost {
    color: white;
}

.inference-panel-actions {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-light);
}

.inference-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    max-height: 400px;
}

.inference-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.inference-empty .material-icons {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.inference-empty p {
    font-size: 0.85rem;
}

.inference-panel-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.inference-count-badge {
    background: var(--primary);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Inference Item */
.inference-item {
    padding: 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 0.5rem;
    background: var(--bg-white);
}

.inference-item.type-transitive {
    border-left: 3px solid #3b82f6;
}

.inference-item.type-sibling {
    border-left: 3px solid #22c55e;
}

.inference-item.type-orphan {
    border-left: 3px solid #f59e0b;
}

.inference-item.type-ai {
    border-left: 3px solid #8b5cf6;
}

.inference-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.inference-type-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.inference-type-badge .material-icons {
    font-size: 0.75rem;
}

.inference-type-badge.transitive {
    background: #dbeafe;
    color: #1d4ed8;
}

.inference-type-badge.sibling {
    background: #dcfce7;
    color: #15803d;
}

.inference-type-badge.orphan {
    background: #fef3c7;
    color: #b45309;
}

.inference-type-badge.ai {
    background: #ede9fe;
    color: #6d28d9;
}

.inference-confidence {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.inference-relation {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.inference-relation .from-node,
.inference-relation .to-node {
    color: var(--primary);
}

.inference-relation .arrow {
    color: var(--text-muted);
    margin: 0 0.25rem;
}

.inference-reason {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.inference-actions {
    display: flex;
    gap: 0.35rem;
}

.inference-actions .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

/* Inference Explanation Styles */
.inference-explanation {
    margin-top: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f0f4f8 0%, #e8f0f8 100%);
    border-radius: 8px;
    border-left: 4px solid var(--primary);
    font-size: 0.8rem;
    line-height: 1.5;
}

.inference-explanation .explanation-content h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.inference-explanation .explanation-content h4 .material-icons {
    font-size: 1.1rem;
}

.inference-explanation .explanation-content p {
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.inference-explanation .explanation-content ul {
    margin: 0.5rem 0 0.75rem 1.25rem;
    color: var(--text-muted);
}

.inference-explanation .explanation-content li {
    margin-bottom: 0.25rem;
}

.inference-explanation .explanation-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}

.inference-explanation .chain-node {
    background: var(--primary);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.8rem;
}

.inference-explanation .chain-via {
    background: #8b5cf6;
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.75rem;
}

.inference-explanation .chain-arrow {
    color: var(--primary);
    font-weight: bold;
    font-size: 1rem;
}

/* =============================================
   Entity Details Modal Styles
   ============================================= */

.entity-details-modal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.entity-details-modal .entity-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.entity-details-modal .entity-icon {
    font-size: 2.5rem;
    color: var(--primary);
    background: var(--bg-light);
    padding: 0.75rem;
    border-radius: 12px;
}

.entity-details-modal .entity-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--text-dark);
}

.entity-details-modal .entity-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.entity-details-modal .entity-type {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.entity-details-modal .detail-section {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 1rem;
}

.entity-details-modal .detail-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--primary);
}

.entity-details-modal .detail-section h4 .material-icons {
    font-size: 1.1rem;
}

.entity-details-modal .detail-section p {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.5;
}

.entity-details-modal .detail-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
}

.entity-details-modal .detail-row:last-child {
    border-bottom: none;
}

.entity-details-modal .detail-label {
    font-weight: 500;
    color: var(--text-muted);
    min-width: 100px;
}

.entity-details-modal .detail-value {
    color: var(--text-dark);
}

.entity-details-modal .relation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-white);
    border-radius: 6px;
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: all 0.2s;
}

.entity-details-modal .relation-item:hover {
    background: var(--primary);
    color: white;
}

.entity-details-modal .relation-item:hover .material-icons,
.entity-details-modal .relation-item:hover .relation-type,
.entity-details-modal .relation-item:hover .relation-target {
    color: white;
}

.entity-details-modal .relation-item .material-icons {
    font-size: 1rem;
    color: var(--primary);
}

.entity-details-modal .relation-type {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.entity-details-modal .relation-target {
    font-weight: 500;
    color: var(--text-dark);
}

.entity-details-modal .link-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-white);
    border-radius: 6px;
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: all 0.2s;
}

.entity-details-modal .link-item:hover {
    background: var(--primary);
    color: white;
}

.entity-details-modal .link-item:hover .material-icons,
.entity-details-modal .link-item:hover .badge {
    color: white;
}

.entity-details-modal .link-item .material-icons {
    font-size: 1rem;
    color: var(--primary);
}

.entity-details-modal .link-item .badge {
    margin-left: auto;
    font-size: 0.7rem;
    background: var(--bg-light);
    color: var(--text-muted);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.entity-details-modal .modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.entity-details-modal .modal-actions .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.entity-details-modal .empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
    padding: 0.5rem;
}

/* =============================================
   Search Panel Styles
   ============================================= */

.search-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-height: 80vh;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.15);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

.search-panel.dragging {
    transition: none;
    box-shadow: 0 8px 30px rgba(30, 58, 95, 0.35);
    opacity: 0.95;
}

.search-panel-header {
    background: var(--primary);
    color: white;
    padding: 0.875rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}

.search-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.search-panel-header .material-icons {
    font-size: 1.1rem;
}

.search-panel-header .btn-ghost {
    color: white;
}

.search-panel-content {
    padding: 1rem;
    overflow-y: auto;
    max-height: 400px;
}

.search-filter-section {
    margin-bottom: 1rem;
}

.search-filter-section:last-child {
    margin-bottom: 0;
}

.search-filter-section label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.search-filter-section label .material-icons {
    font-size: 1rem;
    color: var(--text-muted);
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.filter-tag {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tag:hover {
    background: var(--bg-subtle);
}

.filter-tag.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.excluded-nodes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 6px;
    border: 1px dashed var(--border);
}

.excluded-node-tag {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 4px;
    font-size: 0.75rem;
}

.excluded-node-tag button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    color: #b91c1c;
}

.excluded-node-tag button:hover {
    color: #7f1d1d;
}

.excluded-node-tag .material-icons {
    font-size: 0.85rem;
}

.search-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    font-style: italic;
}

.search-panel-actions {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
    display: flex;
    gap: 0.5rem;
}

.search-panel-actions .btn {
    flex: 1;
}

.search-results {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    max-height: 150px;
    overflow-y: auto;
}

.search-results-summary {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.search-results-summary strong {
    color: var(--primary);
}

.search-results-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.search-result-node {
    padding: 0.2rem 0.5rem;
    background: var(--bg-subtle);
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-result-node:hover {
    background: var(--primary);
    color: white;
}

/* File Upload Zone */
.file-upload-zone {
    border: 2px dashed var(--border-dark);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-light);
}

.file-upload-zone:hover {
    border-color: var(--primary);
    background: var(--bg-subtle);
}

.file-upload-zone.drag-over {
    border-color: var(--primary);
    background: rgba(30, 58, 95, 0.08);
    border-style: solid;
}

.file-upload-zone.processing {
    opacity: 0.7;
    pointer-events: none;
}

.file-upload-zone .material-icons {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.file-upload-zone p {
    margin: 0.25rem 0;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.file-upload-zone .file-upload-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.file-upload-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.file-upload-status .material-icons {
    font-size: 1.25rem;
}

.file-upload-status.loading {
    background: rgba(30, 58, 95, 0.08);
    color: var(--primary);
    border: 1px solid rgba(30, 58, 95, 0.2);
}

.file-upload-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.file-upload-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Spinning animation for loading icon */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* N4L Preview */
.n4l-preview {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-dark);
}

#n4l-preview-container {
    margin-top: 1rem;
}

/* ============================================
   CONFIGURATION PAGE STYLES
   ============================================ */

.config-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}

.config-section-header {
    margin-bottom: 0.75rem;
}

.config-section-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.config-section-header h3 .material-icons {
    color: var(--primary);
    font-size: 1.25rem;
}

.config-prompts-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
    min-height: 400px;
    max-height: 500px;
    overflow: hidden;
}

.config-prompts-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    max-height: 500px;
    overflow-y: auto;
}

.config-prompt-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: var(--text-dark);
    transition: all 0.2s ease;
}

.config-prompt-btn:hover {
    background: var(--bg-hover);
}

.config-prompt-btn.active {
    background: var(--primary);
    color: white;
}

.config-prompt-btn .material-icons {
    font-size: 1.125rem;
    opacity: 0.7;
}

.config-prompt-btn.active .material-icons {
    opacity: 1;
}

.config-prompt-editor {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    max-height: 500px;
}

.config-prompt-editor .form-group {
    margin-bottom: 0;
}

.config-prompt-editor .form-label {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.config-prompt-editor .form-label .material-icons {
    font-size: 1rem;
    color: var(--primary);
}

.config-prompt-editor .form-textarea {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 100px;
}

.config-prompt-editor .prompt-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-style: italic;
}

.config-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.config-prompt-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.config-prompt-header h4 .material-icons {
    color: var(--primary);
}

.config-prompt-description {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

/* Section Modèles IA */
.config-section .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.config-section .form-group {
    margin-bottom: 0;
}

.config-section .form-input {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive for config */
@media (max-width: 900px) {
    .config-prompts-container {
        grid-template-columns: 1fr;
    }

    .config-prompts-nav {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }

    .config-prompt-btn {
        flex: 1;
        min-width: 150px;
        justify-content: center;
    }

    .config-section .form-row {
        grid-template-columns: 1fr;
    }
}

/* ==================== INVESTIGATION MODE ==================== */

.investigation-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.investigation-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.investigation-step:hover {
    border-color: var(--primary);
    background: var(--bg-light);
}

.investigation-step.active {
    border-color: var(--primary);
    background: var(--bg-subtle);
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.investigation-step.completed {
    border-left: 3px solid #059669;
}

.investigation-step.in_progress {
    border-left: 3px solid #f59e0b;
}

.investigation-step-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border-radius: 50%;
    color: var(--primary);
    flex-shrink: 0;
}

.investigation-step.completed .investigation-step-icon {
    background: #d1fae5;
    color: #059669;
}

.investigation-step.in_progress .investigation-step-icon {
    background: #fef3c7;
    color: #d97706;
}

.investigation-step-content {
    flex: 1;
    min-width: 0;
}

.investigation-step-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.investigation-step-description {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.investigation-step-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.investigation-step.completed .investigation-step-status {
    background: #d1fae5;
    color: #059669;
}

.investigation-step.in_progress .investigation-step-status {
    background: #fef3c7;
    color: #d97706;
}

/* Investigation Current Step */
.investigation-step-detail {
    padding: 1rem;
}

.investigation-step-detail h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.investigation-step-detail h3 .material-icons {
    font-size: 1.5rem;
}

.investigation-questions {
    margin-top: 1rem;
}

.investigation-questions h4 {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.investigation-questions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.investigation-questions li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.investigation-questions li:last-child {
    border-bottom: none;
}

.investigation-questions li::before {
    content: "?";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 600;
}

/* Investigation Insights */
.investigation-insight {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--primary);
}

.investigation-insight .material-icons {
    color: var(--primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.investigation-insight-text {
    font-size: 0.875rem;
    color: var(--text-dark);
    flex: 1;
    overflow-x: auto;
}

.investigation-insight-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.8rem;
}

.investigation-insight-text th,
.investigation-insight-text td {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.investigation-insight-text th {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.investigation-insight-text td {
    color: var(--text-dark);
}

.investigation-insight-text tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.investigation-insight-text h3,
.investigation-insight-text h4,
.investigation-insight-text h5 {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.investigation-insight-text p {
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.investigation-insight-text li {
    color: var(--text-dark);
}

.investigation-insight-text strong {
    color: var(--primary);
}

.investigation-recommendation {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fef3c7;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border-left: 3px solid #f59e0b;
}

.investigation-recommendation .material-icons {
    color: #d97706;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.investigation-recommendation-text {
    font-size: 0.875rem;
    color: var(--text-dark);
}

/* Analysis Modal Content */
.analysis-modal-content {
    max-height: 65vh;
    overflow-y: auto;
    padding: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.analysis-modal-content h2,
.analysis-modal-content h3,
.analysis-modal-content h4 {
    color: var(--primary);
    margin: 1rem 0 0.5rem;
}

.analysis-modal-content h2:first-child,
.analysis-modal-content h3:first-child,
.analysis-modal-content h4:first-child {
    margin-top: 0;
}

.analysis-modal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
}

.analysis-modal-content th {
    background: var(--primary);
    color: white;
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-weight: 600;
    border: 1px solid var(--primary);
}

.analysis-modal-content td {
    padding: 0.625rem 0.5rem;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    vertical-align: top;
}

.analysis-modal-content tr:nth-child(even) {
    background: var(--bg-subtle);
}

.analysis-modal-content tr:hover {
    background: rgba(30, 58, 95, 0.05);
}

.analysis-modal-content strong {
    color: var(--primary);
}

.analysis-modal-content ul,
.analysis-modal-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.analysis-modal-content li {
    margin-bottom: 0.375rem;
    color: var(--text-dark);
}

.analysis-modal-content p {
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

/* ==================== GRAPH ANALYSIS ==================== */

.graph-analysis-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.graph-analysis-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.graph-analysis-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.graph-analysis-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    color: var(--primary);
}

.graph-analysis-card-icon .material-icons {
    font-size: 1.5rem;
}

.graph-analysis-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.graph-analysis-card-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.graph-analysis-card.success .graph-analysis-card-icon {
    background: #d1fae5;
    color: #059669;
}

.graph-analysis-card.success .graph-analysis-card-value {
    color: #059669;
}

.graph-analysis-card.warning .graph-analysis-card-icon {
    background: #fef3c7;
    color: #d97706;
}

.graph-analysis-card.warning .graph-analysis-card-value {
    color: #d97706;
}

.graph-analysis-card.danger .graph-analysis-card-icon {
    background: #fee2e2;
    color: #dc2626;
}

.graph-analysis-card.danger .graph-analysis-card-value {
    color: #dc2626;
}

/* Clusters */
.cluster-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cluster-item:hover {
    border-color: var(--primary);
    background: var(--bg-light);
}

.cluster-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border-radius: 50%;
    color: var(--primary);
    flex-shrink: 0;
}

.cluster-content {
    flex: 1;
    min-width: 0;
}

.cluster-name {
    font-weight: 600;
    color: var(--text-dark);
}

.cluster-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

.cluster-density {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.cluster-density.high {
    background: #d1fae5;
    color: #059669;
}

.cluster-density.medium {
    background: #fef3c7;
    color: #d97706;
}

.cluster-density.low {
    background: #fee2e2;
    color: #dc2626;
}

/* Density Map */
.density-zone {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.density-zone.explored {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
}

.density-zone.partial {
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.density-zone.unexplored {
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.density-zone-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.density-zone.explored .density-zone-icon {
    background: #059669;
    color: white;
}

.density-zone.partial .density-zone-icon {
    background: #d97706;
    color: white;
}

.density-zone.unexplored .density-zone-icon {
    background: #dc2626;
    color: white;
}

.density-zone-content {
    flex: 1;
}

.density-zone-name {
    font-weight: 600;
    color: var(--text-dark);
}

.density-zone-info {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.density-zone-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.density-zone.explored .density-zone-value {
    color: #059669;
}

.density-zone.partial .density-zone-value {
    color: #d97706;
}

.density-zone.unexplored .density-zone-value {
    color: #dc2626;
}

/* Consistency Result */
.consistency-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.consistency-status.consistent {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
}

.consistency-status.inconsistent {
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.consistency-status .material-icons {
    font-size: 2rem;
}

.consistency-status.consistent .material-icons {
    color: #059669;
}

.consistency-status.inconsistent .material-icons {
    color: #dc2626;
}

.consistency-status-text {
    font-weight: 600;
}

.consistency-status.consistent .consistency-status-text {
    color: #059669;
}

.consistency-status.inconsistent .consistency-status-text {
    color: #dc2626;
}

.consistency-issues {
    margin-top: 1rem;
}

.consistency-issue {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--text-muted);
}

.consistency-issue.warning {
    border-left-color: #f59e0b;
    background: #fef3c7;
}

.consistency-issue.error {
    border-left-color: #dc2626;
    background: #fee2e2;
}

.consistency-issue .material-icons {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.consistency-issue.warning .material-icons {
    color: #d97706;
}

.consistency-issue.error .material-icons {
    color: #dc2626;
}

/* Temporal Patterns */
.temporal-pattern {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.temporal-pattern-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.temporal-pattern.sequence .temporal-pattern-icon {
    background: #dbeafe;
    color: #1e40af;
}

.temporal-pattern.cycle .temporal-pattern-icon {
    background: #fef3c7;
    color: #d97706;
}

.temporal-pattern.gap .temporal-pattern-icon {
    background: #fee2e2;
    color: #dc2626;
}

.temporal-pattern.cluster .temporal-pattern-icon {
    background: #f3e8ff;
    color: #7c3aed;
}

.temporal-pattern-content {
    flex: 1;
}

.temporal-pattern-type {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.temporal-pattern.sequence .temporal-pattern-type {
    color: #1e40af;
}

.temporal-pattern.cycle .temporal-pattern-type {
    color: #d97706;
}

.temporal-pattern.gap .temporal-pattern-type {
    color: #dc2626;
}

.temporal-pattern.cluster .temporal-pattern-type {
    color: #7c3aed;
}

.temporal-pattern-description {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.temporal-pattern-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.temporal-pattern-node {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: var(--bg-subtle);
    border-radius: 4px;
    color: var(--text-muted);
}

.temporal-pattern-confidence {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Graph Analysis Tabs */
.graph-analysis-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    width: 100%;
}

.graph-analysis-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
}

.graph-analysis-tab:hover {
    background: var(--bg-white);
    color: var(--primary);
}

.graph-analysis-tab.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.graph-analysis-tab .material-icons {
    font-size: 1.125rem;
}

.graph-analysis-tab-content {
    display: none;
    padding-top: 1rem;
}

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

.tab-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-description .material-icons {
    font-size: 1rem;
    color: var(--primary);
}

/* ==================== CLUSTERS WITH MINI-GRAPH ==================== */
.clusters-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    min-height: 350px;
}

.clusters-list-panel {
    overflow-y: auto;
    max-height: 400px;
}

.cluster-preview-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-white);
    overflow: hidden;
}

.cluster-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.cluster-preview-header .material-icons {
    font-size: 1.125rem;
}

.cluster-mini-graph {
    height: 320px;
    background: var(--bg-subtle);
}

.cluster-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.cluster-item:hover {
    transform: translateX(4px);
}

.cluster-item.selected {
    border-color: var(--primary);
    background: rgba(30, 58, 95, 0.05);
}

/* ==================== CENTRALITY & SUSPICION ==================== */
.centrality-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.centrality-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.centrality-section h4 .material-icons {
    font-size: 1.25rem;
}

.section-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.centrality-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.centrality-item:hover {
    background: rgba(30, 58, 95, 0.08);
}

.centrality-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.centrality-rank.gold {
    background: #f59e0b;
}

.centrality-rank.silver {
    background: #94a3b8;
}

.centrality-rank.bronze {
    background: #cd7f32;
}

.centrality-info {
    flex: 1;
}

.centrality-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.125rem;
}

.centrality-type {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.centrality-score {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
}

.centrality-bar {
    width: 80px;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.centrality-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Suspicion Score */
.suspicion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.suspicion-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.suspicion-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border-radius: 50%;
    color: var(--primary);
}

.suspicion-info {
    flex: 1;
}

.suspicion-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.suspicion-factors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.suspicion-factor {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: var(--bg-subtle);
    border-radius: 10px;
    color: var(--text-muted);
}

.suspicion-factor.high {
    background: #fef2f2;
    color: #dc2626;
}

.suspicion-factor.medium {
    background: #fef3c7;
    color: #d97706;
}

.suspicion-score-badge {
    min-width: 50px;
    padding: 0.5rem;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
}

.suspicion-score-badge.high {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.suspicion-score-badge.medium {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.suspicion-score-badge.low {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* ==================== ALIBIS TIMELINE ==================== */
.alibis-container {
    background: var(--bg-white);
    border-radius: 8px;
    padding: 1rem;
}

.alibis-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.legend-color.alibi-verified {
    background: #22c55e;
}

.legend-color.alibi-unverified {
    background: #f59e0b;
}

.legend-color.alibi-opportunity {
    background: #ef4444;
}

.legend-color.alibi-crime {
    background: #1e3a5f;
}

.alibi-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 1rem;
    min-height: 60px;
}

.alibi-person {
    width: 150px;
    flex-shrink: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 2px solid var(--border);
}

.alibi-person-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.875rem;
}

.alibi-person-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.alibi-timeline-track {
    flex: 1;
    position: relative;
    background: var(--bg-subtle);
    border-radius: 4px;
    margin-left: 1rem;
    min-height: 40px;
}

.alibi-block {
    position: absolute;
    top: 4px;
    height: calc(100% - 8px);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: white;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.alibi-block:hover {
    opacity: 0.9;
}

.alibi-block.verified {
    background: #22c55e;
}

.alibi-block.unverified {
    background: #f59e0b;
}

.alibi-block.opportunity {
    background: repeating-linear-gradient(
        45deg,
        #ef4444,
        #ef4444 10px,
        #dc2626 10px,
        #dc2626 20px
    );
}

.alibi-crime-marker {
    position: absolute;
    top: -8px;
    bottom: -8px;
    width: 3px;
    background: #1e3a5f;
    z-index: 10;
}

.alibi-crime-marker::before {
    content: 'Crime';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    color: #1e3a5f;
    white-space: nowrap;
}

.alibi-time-axis {
    display: flex;
    margin-left: 166px;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.alibi-time-label {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Responsive for graph analysis */
@media (max-width: 900px) {
    .graph-analysis-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .graph-analysis-tabs {
        flex-wrap: wrap;
    }

    .graph-analysis-tab {
        flex: 1 1 45%;
        min-width: 120px;
    }
}

@media (max-width: 600px) {
    .graph-analysis-cards {
        grid-template-columns: 1fr;
    }

    .graph-analysis-tab {
        flex: 1 1 100%;
    }
}

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ==================== NOTEBOOK STYLES ==================== */

/* Note card */
.note-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.note-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.note-card.pinned {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(to right, rgba(245, 158, 11, 0.05), transparent);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.note-card-type {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.note-card-type .material-icons {
    font-size: 0.875rem;
}

.note-card-actions {
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.note-card:hover .note-card-actions {
    opacity: 1;
}

.note-card-title {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.3;
}

.note-card-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.note-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.note-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 4px;
}

.note-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.note-card-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.note-card-context {
    font-style: italic;
    color: var(--primary);
}

/* Note detail view */
.note-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.note-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.note-detail-type {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    background: var(--primary);
    color: white;
    border-radius: 4px;
}

.note-detail-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.note-detail-context {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: 4px;
}

.note-detail-tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.note-detail-content {
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    line-height: 1.6;
}

/* Stats badge */
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Button icon small */
.btn-icon-sm {
    padding: 0.25rem;
    min-width: auto;
}

.btn-icon-sm .material-icons {
    font-size: 1rem;
}

/* Ghost button */
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: var(--bg-subtle);
    color: var(--text-dark);
}

/* Responsive notebook */
@media (max-width: 768px) {
    .notebook-notes-list {
        grid-template-columns: 1fr !important;
    }

    .note-card-actions {
        opacity: 1;
    }
}

/* ============================================ */
/* Social Network Analysis Module Styles */
/* ============================================ */

/* Panel principal */
.social-network-panel {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    background: var(--bg-white);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.social-network-panel.active {
    right: 0;
}

.social-network-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--primary);
    color: white;
}

.social-network-panel-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.social-network-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Loading state */
.social-network-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}

.social-network-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Vue d'ensemble */
.sn-overview {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Grille de métriques */
.sn-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.sn-metric-card {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sn-metric-card .material-icons {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.sn-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.sn-metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grille d'actions */
.sn-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.sn-action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
}

.sn-action-btn:hover {
    border-color: var(--primary);
    background: var(--bg-light);
}

.sn-action-btn .material-icons {
    font-size: 1.5rem;
    color: var(--primary);
}

/* Conteneur du graphe */
.sn-graph-container {
    height: 300px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-light);
}

/* Conteneur des résultats */
.sn-results-container {
    margin-top: 1rem;
}

/* Sections */
.sn-section {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}

.sn-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.sn-section h3 .material-icons {
    font-size: 1.25rem;
}

.sn-section-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Liste des communautés */
.sn-communities-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sn-community-card {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.sn-community-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sn-community-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.sn-community-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.sn-community-size {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sn-community-members {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

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

/* Liste des brokers */
.sn-brokers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sn-broker-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.sn-broker-rank {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 30px;
}

.sn-broker-info {
    flex: 1;
}

.sn-broker-name {
    font-weight: 600;
    color: var(--text-dark);
}

.sn-broker-type {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sn-broker-score {
    width: 100px;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.sn-score-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #3b82f6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sn-score-value {
    position: absolute;
    right: -40px;
    top: -4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
}

.sn-broker-actions {
    display: flex;
    gap: 0.25rem;
}

.sn-no-results {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* Analyse des flux */
.sn-flow-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sn-flow-selector label {
    font-weight: 500;
    color: var(--text-dark);
}

.sn-flow-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sn-flow-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: 8px;
}

.sn-flow-card .material-icons {
    font-size: 1.5rem;
}

.sn-flow-info {
    flex: 1;
}

.sn-flow-type {
    font-weight: 600;
    font-size: 0.85rem;
}

.sn-flow-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sn-flow-details {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.sn-flow-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sn-flow-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: 4px;
    font-size: 0.85rem;
}

.sn-flow-arrow {
    font-weight: 500;
}

.sn-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
}

/* Évolution temporelle */
.sn-temporal-controls {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.sn-temporal-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    margin-bottom: 1rem;
}

.sn-temporal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sn-temporal-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.sn-temporal-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.sn-temporal-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sn-temporal-event {
    font-weight: 600;
    color: var(--primary);
    text-align: center;
}

.sn-temporal-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.sn-temporal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.sn-temporal-stat {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.sn-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.sn-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Responsive Social Network */
@media (max-width: 1024px) {
    .social-network-panel {
        width: 70%;
        right: -70%;
    }

    .sn-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sn-flow-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .social-network-panel {
        width: 100%;
        right: -100%;
    }

    .sn-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sn-actions-grid {
        grid-template-columns: 1fr;
    }

    .sn-broker-score {
        display: none;
    }

    .sn-broker-actions {
        flex-direction: column;
    }
}

/* ========================================
   JavaScript Tooltips - Fixed position, escapes all containers
   ======================================== */

.js-tooltip {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

.js-tooltip.visible {
    visibility: visible;
}

.js-tooltip-content {
    padding: 0.75rem 1rem;
    background: var(--primary-dark);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 320px;
    min-width: 120px;
    white-space: normal;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.3);
}

.js-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Arrow pointing down (tooltip above target) */
.js-tooltip-arrow.arrow-bottom {
    bottom: -12px;
    border-top-color: var(--primary-dark);
    border-bottom: none;
}

/* Arrow pointing up (tooltip below target) */
.js-tooltip-arrow.arrow-top {
    top: -6px;
    border-bottom-color: var(--primary-dark);
    border-top: none;
}

/* Arrow pointing right (tooltip left of target) */
.js-tooltip-arrow.arrow-right {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--primary-dark);
    border-right: none;
}

/* Arrow pointing left (tooltip right of target) */
.js-tooltip-arrow.arrow-left {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--primary-dark);
    border-left: none;
}

/* ========================================
   Geographic Map Styles
   ======================================== */

.geo-map-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
}

.geo-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    flex-wrap: wrap;
    gap: 1rem;
}

.geo-map-controls {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.geo-control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.geo-control-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.geo-toggle-buttons {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-primary);
    padding: 0.25rem;
    border-radius: 6px;
}

.geo-toggle-btn {
    padding: 0.4rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.geo-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--primary);
}

.geo-toggle-btn.active {
    background: var(--primary);
    color: white;
}

.geo-toggle-btn .material-icons {
    font-size: 1.1rem;
}

.geo-control-group select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.geo-control-group input[type="checkbox"] {
    accent-color: var(--primary);
}

.geo-map-stats {
    display: flex;
    gap: 1rem;
}

.geo-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

.geo-stat .material-icons {
    font-size: 1rem;
    color: var(--primary);
}

.geo-map-wrapper {
    position: relative;
    flex: 1;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.geo-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: var(--bg-secondary);
    z-index: 1;
}

.geo-map-legend {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.geo-map-legend h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    padding: 0.2rem 0;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.geo-map-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-secondary);
    z-index: 500;
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 12px;
}

.geo-map-empty .material-icons {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.geo-map-empty p {
    font-weight: 500;
    margin: 0.5rem 0;
}

.geo-map-empty small {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Locations List */
.geo-locations-list {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
}

.geo-locations-list h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.geo-locations-list h4 .material-icons {
    font-size: 1.1rem;
    color: var(--primary);
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.location-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}

.location-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
    transform: translateY(-1px);
}

.location-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--marker-color, var(--primary)) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-icon .material-icons {
    font-size: 1.25rem;
    color: var(--loc-color, var(--primary));
}

.location-info {
    flex: 1;
    min-width: 0;
}

.location-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-address {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-events {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--primary);
    margin-top: 0.25rem;
}

.location-events .material-icons {
    font-size: 0.85rem;
}

.location-coords {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

/* Marker Styles */
.geo-marker-container {
    background: transparent;
    border: none;
}

.geo-marker {
    width: 36px;
    height: 36px;
    background: var(--marker-color, var(--primary));
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
}

.geo-marker .material-icons {
    transform: rotate(45deg);
    font-size: 1rem;
    color: white;
}

/* Popup Styles */
.geo-popup {
    min-width: 220px;
    max-width: 300px;
}

.geo-popup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
}

.geo-popup-header .material-icons {
    font-size: 1.25rem;
}

.geo-popup-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.geo-popup-content {
    font-size: 0.85rem;
}

.geo-popup-address {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: #666;
    margin: 0.25rem 0;
}

.geo-popup-address .material-icons {
    font-size: 1rem;
    flex-shrink: 0;
}

.geo-popup-desc {
    margin: 0.5rem 0;
    color: #333;
    line-height: 1.4;
}

.geo-popup-events {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.geo-popup-events strong {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--primary);
}

.geo-popup-events .material-icons {
    font-size: 1rem;
}

.geo-popup-events ul {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
}

.geo-popup-events li {
    font-size: 0.8rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.geo-popup-events li:last-child {
    border-bottom: none;
}

.geo-popup-events .event-time {
    font-size: 0.7rem;
    color: #888;
    margin-right: 0.5rem;
}

.geo-popup-events .more-events {
    color: var(--primary);
    font-style: italic;
}

.geo-popup-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.geo-popup-actions .btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
}

/* Route Popup */
.route-popup {
    text-align: center;
    padding: 0.25rem;
}

.route-popup strong {
    font-size: 0.85rem;
}

.route-popup .material-icons {
    font-size: 1rem;
    vertical-align: middle;
    margin: 0 0.25rem;
    color: var(--primary);
}

.route-popup p {
    margin: 0.5rem 0 0 0;
    font-size: 0.75rem;
    color: #666;
}

/* Leaflet Overrides */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    padding: 0;
}

.leaflet-popup-content {
    margin: 0.75rem;
}

.leaflet-popup-close-button {
    color: var(--text-secondary) !important;
}

.leaflet-container {
    font-family: 'Inter', sans-serif;
}

/* ===== GEO-MAP TIMELINE SLIDER ===== */
.geo-timeline-slider {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
}

.timeline-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.timeline-slider-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-slider-header h4 .material-icons {
    font-size: 1.1rem;
    color: var(--primary);
}

.timeline-events-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.timeline-slider-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline-date-range {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.timeline-date-range .date-start,
.timeline-date-range .date-end {
    background: var(--bg-subtle);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.slider-container {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

.slider-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
}

.slider-range {
    position: absolute;
    height: 6px;
    background: linear-gradient(135deg, var(--primary), var(--info));
    border-radius: 3px;
    pointer-events: none;
}

.timeline-slider-controls input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
}

.timeline-slider-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.timeline-slider-controls input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.timeline-slider-controls input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.timeline-selected-range {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dark);
    background: var(--bg-light);
    padding: 0.5rem;
    border-radius: 6px;
    margin-top: 0.25rem;
}

.timeline-selected-range strong {
    color: var(--primary);
}

/* Animation for slider appearance */
.geo-timeline-slider {
    animation: slideDown 0.3s ease-out;
}

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

/* ============================================
   Advanced Graph Analysis - SSTorytime Features
   ============================================ */

/* Control sections for SSTorytime features */
.cone-search-controls,
.appointed-controls,
.eigenvector-controls,
.sttypes-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.cone-search-controls .form-group,
.appointed-controls .form-group,
.eigenvector-controls .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 150px;
}

.cone-search-controls label,
.appointed-controls label,
.eigenvector-controls label,
.sttypes-controls label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cone-search-controls .form-select,
.cone-search-controls .form-input,
.appointed-controls .form-input,
.eigenvector-controls .form-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.cone-search-controls .btn,
.appointed-controls .btn,
.eigenvector-controls .btn,
.sttypes-controls .btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Cone Search */
.cone-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.cone-search-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.cone-search-info > * {
    flex-shrink: 0;
}

.cone-search-info .cone-node-name {
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 0.5rem;
}

.cone-search-info .cone-separator {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0 0.25rem;
}

.cone-search-info .material-icons {
    color: var(--primary);
}

.cone-direction.badge {
    display: inline-flex;
    width: auto !important;
    height: auto !important;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}

.cone-direction.forward { background: #dbeafe; color: #1e40af; }
.cone-direction.backward { background: #fce7f3; color: #9d174d; }
.cone-direction.bidirectional { background: #d1fae5; color: #065f46; }

.cone-stats {
    display: flex;
    gap: 1rem;
}

.cone-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.cone-stats .stat .material-icons {
    font-size: 1rem;
}

.cone-levels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cone-level {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.cone-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
}

.level-badge {
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.level-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cone-level-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
}

.cone-node {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cone-node:hover {
    background: var(--bg-subtle);
    border-color: var(--primary);
}

.cone-node .node-type-icon .material-icons {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.cone-suggestions {
    margin-top: 1rem;
    padding: 1rem;
    background: #fef3c7;
    border-radius: 8px;
}

.cone-suggestions h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #92400e;
}

.cone-suggestions ul {
    margin: 0;
    padding-left: 1.5rem;
}

.cone-suggestions li {
    font-size: 0.8rem;
    color: #78350f;
    margin-bottom: 0.25rem;
}

.cone-paths {
    margin-top: 1rem;
}

.cone-paths h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.paths-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.path-item {
    padding: 0.5rem 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: monospace;
}

/* Appointed Nodes */
.appointed-header {
    margin-bottom: 1rem;
}

.appointed-stats {
    display: flex;
    gap: 1.5rem;
}

.appointed-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.appointed-stats .stat .material-icons {
    font-size: 1.1rem;
    color: var(--primary);
}

.appointed-insights {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: #fef3c7;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #92400e;
}

.insight-item .material-icons {
    font-size: 1rem;
    color: #f59e0b;
}

.appointed-nodes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.appointed-node {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem;
    transition: all 0.2s ease;
}

.appointed-node:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.appointed-node.danger {
    border-left: 3px solid #ef4444;
}

.appointed-node.warning {
    border-left: 3px solid #f59e0b;
}

.appointed-node-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.appointed-node-header .node-label {
    font-weight: 600;
    color: var(--text-dark);
}

.appointed-node-header .node-type {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

.appointed-node-header .pointer-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.appointed-node-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.source-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-subtle);
    border-radius: 4px;
    font-size: 0.7rem;
}

.source-tag .arrow-type {
    color: var(--primary);
    font-weight: 600;
}

.more-sources {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
}

.correlation-bar {
    position: relative;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.correlation-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.correlation-value {
    position: absolute;
    right: 0;
    top: -18px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
}

/* Eigenvector Centrality */
.eigenvector-header {
    margin-bottom: 1rem;
}

.eigenvector-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.eigenvector-status.success {
    background: #d1fae5;
    color: #065f46;
}

.eigenvector-status.warning {
    background: #fef3c7;
    color: #92400e;
}

.eigenvector-status .material-icons {
    font-size: 1rem;
}

.eigenvector-insights {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.eigenvector-ranking {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eigenvector-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.eigenvector-item:hover {
    background: var(--bg-subtle);
}

.eigenvector-item.high {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.03);
}

.eigenvector-item.medium {
    border-left: 3px solid #f59e0b;
}

.eigenvector-item .rank {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    min-width: 30px;
}

.eigenvector-item .item-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eigenvector-item .item-label {
    font-weight: 500;
}

.eigenvector-item .item-type {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

.eigenvector-item .score-bar {
    width: 100px;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.eigenvector-item .score-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    border-radius: 3px;
}

.eigenvector-item .score-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    min-width: 45px;
    text-align: right;
}

/* ST Type Analysis */
.sttype-analysis-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sttype-distribution h4,
.sttype-chains h4,
.sttype-containers h4,
.sttype-insights h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.sttype-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sttype-bar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sttype-info {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 140px;
}

.sttype-symbol {
    font-size: 1.25rem;
    font-weight: 700;
    width: 24px;
    text-align: center;
}

.sttype-name {
    font-size: 0.8rem;
    font-weight: 500;
}

.sttype-code {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

.sttype-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

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

.sttype-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 70px;
    text-align: right;
}

.chains-list,
.containers-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chain-item {
    padding: 0.5rem 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: monospace;
}

.container-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    font-size: 0.8rem;
}

.container-name {
    font-weight: 600;
    color: var(--primary);
}

.contains-icon {
    color: #10b981;
    font-size: 1.1rem;
}

.contained-items {
    color: var(--text-muted);
}

/* Advanced Summary Cards */
.advanced-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: 8px;
    text-align: center;
}

.summary-card .material-icons {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.35rem;
}

.summary-card .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.summary-card .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.summary-card.success {
    background: #d1fae5;
}

.summary-card.success .material-icons {
    color: #065f46;
}

.summary-card.warning {
    background: #fef3c7;
}

.summary-card.warning .material-icons {
    color: #92400e;
}

/* Rotating animation for loading */
@keyframes rotating {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotating {
    animation: rotating 1s linear infinite;
}

/* ============================================
   SSTorytime Advanced Features
   ============================================ */

/* SSTorytime Section */
.sstorytime-section {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.sstorytime-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-dark);
    font-size: 1rem;
}

.sstorytime-section h4 .material-icons {
    color: var(--primary);
}

.sstorytime-section .section-description {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* Contrawave Controls */
.contrawave-controls .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

.contrawave-controls select[multiple] {
    min-height: 100px;
}

/* Contrawave Results */
.contrawave-results {
    margin-top: 1rem;
}

.contrawave-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.contrawave-summary .summary-stat,
.supernodes-summary .summary-stat,
.betweenness-summary .summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    min-width: 100px;
}

.contrawave-summary .summary-stat .material-icons,
.supernodes-summary .summary-stat .material-icons,
.betweenness-summary .summary-stat .material-icons {
    color: var(--primary);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.contrawave-summary .summary-stat .value,
.supernodes-summary .summary-stat .value,
.betweenness-summary .summary-stat .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.contrawave-summary .summary-stat .label,
.supernodes-summary .summary-stat .label,
.betweenness-summary .summary-stat .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Collision Nodes */
.collision-nodes,
.supernode-groups,
.betweenness-ranking {
    margin-top: 1rem;
}

.collision-nodes h4,
.supernode-groups h4,
.betweenness-ranking h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.collision-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.collision-item {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
}

.collision-item .collision-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.collision-item .collision-header > * {
    margin-right: 0.25rem;
}

.collision-item .node-label {
    font-weight: 600;
    color: var(--text-dark);
}

.collision-item .node-type.badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    background: var(--bg-light);
    border-radius: 4px;
    color: var(--text-muted);
}

.criticality-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

.criticality-badge.high {
    background: #fee2e2;
    color: #991b1b;
}

.criticality-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.criticality-badge.low {
    background: #d1fae5;
    color: #065f46;
}

.collision-item .collision-details {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.collision-item .collision-details .detail {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.collision-item .collision-details .detail .material-icons {
    font-size: 0.9rem;
}

/* Super-Nodes Styles */
.supernodes-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.supernode-group {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
}

.supernode-group.replaceable {
    border-left: 3px solid #059669;
}

.supernode-group .group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.supernode-group .group-id {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.85rem;
}

.supernode-group .equivalence-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.supernode-group .equivalence-badge.structural {
    background: #dbeafe;
    color: #1e40af;
}

.supernode-group .equivalence-badge.role {
    background: #fae8ff;
    color: #86198f;
}

.supernode-group .equivalence-badge.flow {
    background: #d1fae5;
    color: #065f46;
}

.supernode-group .size-badge {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.supernode-group .replaceable-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #059669;
}

.supernode-group .replaceable-badge .material-icons {
    font-size: 0.9rem;
}

.supernode-group .group-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.supernode-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.supernode-item .node-label {
    font-weight: 500;
}

.supernode-item .node-type {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.supernode-item .similarity {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.7rem;
}

.supernode-group .group-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Betweenness Styles */
.betweenness-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ranking-item {
    display: grid;
    grid-template-columns: 40px 1fr 120px auto;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
}

.ranking-item.bridge {
    border-left: 3px solid #dc2626;
}

.ranking-item.hub {
    border-left: 3px solid #f59e0b;
}

.ranking-item.peripheral {
    border-left: 3px solid var(--border-color);
}

.ranking-item .rank {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ranking-item .node-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ranking-item .node-label {
    font-weight: 600;
    color: var(--text-dark);
}

.ranking-item .node-type.badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    background: var(--bg-light);
    border-radius: 4px;
    color: var(--text-muted);
}

.betweenness-bar-container {
    background: var(--bg-light);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.betweenness-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, #3b82f6 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ranking-item .role-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.ranking-item .role-badge .material-icons {
    font-size: 0.85rem;
}

.ranking-item .role-badge.bridge {
    background: #fee2e2;
    color: #991b1b;
}

.ranking-item .role-badge.hub {
    background: #fef3c7;
    color: #92400e;
}

.ranking-item .role-badge.peripheral {
    background: var(--bg-light);
    color: var(--text-muted);
}

/* SSTorytime Complete Summary */
.sstorytime-complete-summary {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--border-color);
}

.sstorytime-complete-summary h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    color: var(--text-dark);
}

.sstorytime-complete-summary h4 .material-icons {
    color: var(--primary);
}

.sstorytime-complete-summary .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
}

/* Insights Styles for all SSTorytime features */
.contrawave-insights,
.supernodes-insights,
.betweenness-insights {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.contrawave-insights h4,
.supernodes-insights h4,
.betweenness-insights h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.contrawave-insights .insight-item,
.supernodes-insights .insight-item,
.betweenness-insights .insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f0f9ff;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.contrawave-insights .insight-item .material-icons,
.supernodes-insights .insight-item .material-icons,
.betweenness-insights .insight-item .material-icons {
    color: #0284c7;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ============================================
   Chemins Contraints Styles
   ============================================ */
.constrained-controls .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.constrained-paths-summary {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.constrained-paths-summary h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: #7c3aed;
}

.constrained-paths-summary .stats-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.constrained-paths-summary .stat {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.used-types {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.used-types .label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.type-badge {
    background: #ede9fe;
    color: #6d28d9;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.paths-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.path-item {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
}

.path-item .path-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.path-item .path-number {
    background: #7c3aed;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.path-item .path-length {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.path-item .path-nodes {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.path-item .path-relations {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.relation-badge {
    background: #fef3c7;
    color: #b45309;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.no-results {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   Notation Dirac Styles
   ============================================ */
.dirac-controls .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dirac-controls .form-group-wide {
    grid-column: span 2;
}

.form-help {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Dirac Examples */
.dirac-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.dirac-examples .example-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
    align-self: center;
}

.dirac-example {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dirac-example:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.dirac-example .example-type {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 0.4rem;
    font-family: var(--font-sans);
}

.dirac-example:hover .example-type {
    color: rgba(255, 255, 255, 0.8);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.dirac-summary {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.dirac-summary h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: #059669;
}

.dirac-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.dirac-equation .bra {
    color: #7c3aed;
}

.dirac-equation .pipe {
    color: var(--text-muted);
}

.dirac-equation .ket {
    color: #059669;
}

.dirac-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.dirac-stats .stat {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.dirac-paths-section {
    margin-bottom: 1rem;
}

.dirac-paths-section h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.symmetry-analysis {
    background: #f0f9ff;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.symmetry-analysis h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: #0369a1;
}

.symmetry-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.symmetry-stats .stat {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    background: white;
    border-radius: 4px;
}

.symmetry-stats .stat.success {
    background: #d1fae5;
    color: #065f46;
}

/* ============================================
   Orbites Styles
   ============================================ */
.orbits-controls .form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.orbits-summary {
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.orbits-summary h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: #c2410c;
}

.orbit-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.orbit-stats .stat {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.expansion-pattern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.expansion-pattern.expansion {
    background: #d1fae5;
    color: #065f46;
}

.expansion-pattern.contraction {
    background: #fee2e2;
    color: #991b1b;
}

.expansion-pattern.stable {
    background: #e0e7ff;
    color: #3730a3;
}

.orbits-visualization {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.orbit-level {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    position: relative;
}

.orbit-level::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
}

.orbit-level.level-1::before { background: #f97316; }
.orbit-level.level-2::before { background: #fb923c; }
.orbit-level.level-3::before { background: #fdba74; }
.orbit-level.level-4::before { background: #fed7aa; }

.orbit-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.level-badge {
    background: #ea580c;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.node-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.density {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.density.density-high {
    background: #d1fae5;
    color: #065f46;
}

.density.density-medium {
    background: #fef3c7;
    color: #92400e;
}

.density.density-low {
    background: #fee2e2;
    color: #991b1b;
}

.orbit-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.orbit-node {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.orbit-node .connection-count {
    background: #e2e8f0;
    color: var(--text-muted);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.65rem;
}

.more-nodes {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.type-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.type-stat {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: #f1f5f9;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.dense-clusters {
    background: #fef3c7;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.dense-clusters h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: #b45309;
}

.clusters-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cluster-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.cluster-level {
    font-weight: 600;
    color: var(--text-dark);
}

.cluster-density {
    color: #065f46;
}

.cluster-nodes {
    color: var(--text-muted);
}

/* Insights section common styles */
.insights-section {
    background: #f0f9ff;
    padding: 1rem;
    border-radius: 8px;
}

.insights-section h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: #0369a1;
}

.insights-section ul {
    margin: 0;
    padding-left: 1.25rem;
}

.insights-section li {
    font-size: 0.85rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contrawave-controls .form-row,
    .constrained-controls .form-row,
    .dirac-controls .form-row,
    .orbits-controls .form-row {
        grid-template-columns: 1fr;
    }

    .dirac-controls .form-group-wide {
        grid-column: span 1;
    }

    .ranking-item {
        grid-template-columns: 30px 1fr;
        gap: 0.5rem;
    }

    .ranking-item .betweenness-bar-container,
    .ranking-item .role-badge {
        display: none;
    }
}