/**
 * Unified Components - StratIntel Design System
 * Version: 1.1.0
 * Created: 2026-01-05
 * Updated: 2026-01-06 (Dark mode fixes)
 * Purpose: Consolidated component library using design-tokens.css
 *
 * Requires: design-tokens.css loaded first
 *
 * Components:
 * - Buttons (primary, secondary, ghost, danger, sizes)
 * - Badges (priority, theme, entity, geo, sentiment)
 * - Vote Buttons (with feedback animations)
 * - Article Cards
 * - Breadcrumbs
 * - Skeleton Loading
 * - Toast Notifications
 */

/* ============================================
   DARK MODE - Global Overrides
   ============================================ */

[data-theme="dark"] {
    background-color: var(--dark-bg-primary) !important;
    color: var(--color-text-primary, #e0e0e0);
}

[data-theme="dark"] body {
    background-color: var(--dark-bg-primary) !important;
    color: var(--color-text-primary, #e0e0e0);
}

[data-theme="dark"] .navbar {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--color-border, #333) !important;
}

[data-theme="dark"] .navbar__link,
[data-theme="dark"] .navbar__brand {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .navbar__link:hover,
[data-theme="dark"] .navbar__link.active {
    color: var(--dark-link) !important;
}

/* Cards and containers - slightly lighter than background for depth */
[data-theme="dark"] .article-card,
[data-theme="dark"] .card,
[data-theme="dark"] .dashboard-section,
[data-theme="dark"] .panel,
[data-theme="dark"] .box,
[data-theme="dark"] .content-box,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .info-box,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .filter-section,
[data-theme="dark"] .section {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .article-card:hover,
[data-theme="dark"] .card:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Preserve sentiment L-shape border in dark mode (overrides generic border-color above) */
[data-theme="dark"] .article-card[data-sentiment="positive"] {
    border-left-color: var(--color-success) !important;
    border-bottom-color: var(--color-success) !important;
}

[data-theme="dark"] .article-card[data-sentiment="negative"] {
    border-left-color: var(--color-error) !important;
    border-bottom-color: var(--color-error) !important;
}

/* Tables */
[data-theme="dark"] table,
[data-theme="dark"] .data-table {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
}

[data-theme="dark"] th {
    background-color: var(--dark-bg-input) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-light) !important;
}

[data-theme="dark"] td {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border-light) !important;
}

[data-theme="dark"] tr:nth-child(even) td {
    background-color: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] tr:hover td {
    background-color: var(--dark-bg-elevated) !important;
}

/* Form elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--color-focus-blue) !important;
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

/* Labels and meta text */
[data-theme="dark"] label,
[data-theme="dark"] .label,
[data-theme="dark"] .meta,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .article-meta,
[data-theme="dark"] .source-info {
    color: var(--dark-text-muted) !important;
}

/* Links */
[data-theme="dark"] a {
    color: var(--dark-link);
}

[data-theme="dark"] a:hover {
    color: var(--dark-link-hover);
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--dark-text-bright) !important;
}

/* Buttons - keep them visible */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn--secondary {
    background-color: var(--dark-bg-accent) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn--secondary:hover {
    background-color: var(--dark-bg-elevated) !important;
}

/* Dropdown menus */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .navbar__dropdown-menu {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .navbar__dropdown-item {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .navbar__dropdown-item:hover {
    background-color: var(--dark-bg-elevated) !important;
    color: var(--dark-text-bright) !important;
}

/* Code blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--dark-bg-input) !important;
    color: var(--dark-text-primary) !important;
}

/* Alerts and notices */
[data-theme="dark"] .alert,
[data-theme="dark"] .notice,
[data-theme="dark"] .flash-message {
    border-color: var(--dark-border-medium) !important;
}

/* Modal backgrounds */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dialog {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
}

/* ============================================
   TEXT ELEMENTS - Ensure readability
   ============================================ */

/* All text content - base text color */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] div {
    color: var(--dark-text-primary);
}

/* Article content */
[data-theme="dark"] .article-title,
[data-theme="dark"] .article-content,
[data-theme="dark"] .article-description,
[data-theme="dark"] .article-summary,
[data-theme="dark"] .article-text,
[data-theme="dark"] .content,
[data-theme="dark"] .description,
[data-theme="dark"] .summary {
    color: var(--dark-text-primary) !important;
}

/* Titles and headings */
[data-theme="dark"] .title,
[data-theme="dark"] .headline,
[data-theme="dark"] .section-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .panel-title {
    color: var(--dark-text-bright) !important;
}

/* Secondary/muted text - slightly dimmer for hierarchy */
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .muted,
[data-theme="dark"] .subtitle,
[data-theme="dark"] .caption,
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--dark-text-muted) !important;
}

/* Stats and numbers */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .count,
[data-theme="dark"] .number,
[data-theme="dark"] .metric {
    color: var(--dark-text-bright) !important;
}

/* Lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol {
    color: var(--dark-text-primary);
}

/* Strong and emphasis */
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] em {
    color: var(--dark-text-bright);
}

/* Dashboard-specific elements */
[data-theme="dark"] .stats-header,
[data-theme="dark"] .meta-info {
    color: var(--dark-text-primary);
}

/* NOTE: filter-panel dark mode styles are defined below with gradient matching stat-cards */

[data-theme="dark"] .filter-group__label {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .search-box,
[data-theme="dark"] .search-results-panel {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
}

[data-theme="dark"] .search-results-header,
[data-theme="dark"] .search-results-content {
    color: var(--dark-text-primary);
}

/* Progress bars */
[data-theme="dark"] .progress-container {
    background-color: transparent !important;
}

[data-theme="dark"] .progress-bar {
    background-color: var(--color-slate-700) !important;
    border-color: var(--color-slate-600) !important;
    border-radius: 10px;
}

[data-theme="dark"] .progress-fill {
    background: linear-gradient(90deg, var(--color-blue-500), var(--color-blue-400)) !important;
}

[data-theme="dark"] .progress-text {
    color: var(--color-slate-200) !important;
}

/* ============================================
   BUTTONS - Unified Button System
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: var(--touch-target);  /* 44px - WCAG 2.5.5 */
    padding: var(--space-3) var(--space-6);

    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;

    border: 2px solid transparent;
    border-radius: var(--border-radius-md);
    background: transparent;
    color: var(--color-text-primary);

    cursor: pointer;
    transition: var(--transition-all);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-style: dashed;
    transform: none !important;
}

/* Primary Button - Main CTA */
.btn-primary,
.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

.btn-primary:hover,
.btn--primary:hover {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    opacity: 0.9;
    box-shadow: var(--shadow-sm);
}

.btn-primary:active,
.btn--primary:active {
    opacity: 1;
    box-shadow: var(--shadow-xs);
}

/* Dark mode: Better text contrast on primary buttons */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn--primary {
    color: var(--color-white, #fff);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Secondary Button - Less emphasis */
.btn-secondary,
.btn--secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn--secondary:hover {
    background: var(--color-primary-50);
}

/* Link styles */
.link-primary {
    color: var(--color-blue-500);
    text-decoration: underline;
}

.link-primary:hover {
    color: var(--color-blue-600);
}

[data-theme="dark"] .link-primary {
    color: var(--dark-link) !important;
}

[data-theme="dark"] .link-primary:hover {
    color: var(--dark-link-hover) !important;
}

/* Ghost Button - Minimal */
.btn-ghost,
.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: transparent;
}

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

/* Danger/Destructive Button */
.btn-danger,
.btn--danger {
    background: var(--color-error);
    color: var(--color-text-inverse);
    border-color: var(--color-error);
}

.btn-danger:hover,
.btn--danger:hover {
    background: var(--color-error-dark);
    border-color: var(--color-error-dark);
}

/* Success Button */
.btn-success,
.btn--success {
    background: var(--color-success);
    color: var(--color-text-inverse);
    border-color: var(--color-success);
}

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

/* Button Sizes */
.btn-sm,
.btn--sm {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}

.btn-lg,
.btn--lg {
    min-height: 52px;
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

/* Icon Button */
.btn-icon,
.btn--icon {
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    border-radius: var(--border-radius-full);
}


/* ============================================
   BADGES - Simplified 6-Variant System
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    padding: 2px 8px;
    min-height: 24px;
    box-sizing: border-box;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);

    border-radius: 10px;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Priority Badges - With colored borders */
.badge-p1,
.badge--p1 {
    background: var(--color-red-100);
    color: var(--color-red-800);
    border: 1px solid var(--color-p1);
}

.badge-p2,
.badge--p2 {
    background: var(--color-amber-100);
    color: var(--color-amber-800);
    border: 1px solid var(--color-p2);
}

.badge-p3,
.badge--p3 {
    background: var(--color-emerald-100);
    color: var(--color-emerald-800);
    border: 1px solid var(--color-p3);
}

/* Theme Badge - Purple with dashed border */
.badge-theme,
.badge--theme {
    background: var(--color-violet-100);
    color: var(--color-violet-800);
    border: 1px dashed var(--color-violet-500);
    text-transform: none;
    font-weight: var(--font-weight-medium);
}

/* Entity Badge - Blue with dotted border */
.badge-entity,
.badge--entity {
    background: var(--color-sky-100);
    color: var(--color-sky-800);
    border: 1px dotted var(--color-sky-600);
    text-transform: none;
    font-weight: var(--font-weight-medium);
}

/* Add Badge Button - Reset button defaults to match other badges */
button.badge--add {
    /* Reset ALL button defaults */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 2px 8px;
    min-height: 0;
    min-width: 0;
    font-family: inherit;
    font-size: var(--text-xs);
    line-height: 1.4;
    /* Badge styling */
    background: var(--color-slate-100);
    color: var(--color-slate-500);
    border: 1px dashed var(--color-slate-400);
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

button.badge--add:hover {
    opacity: 1;
    background: var(--color-slate-200);
}

/* Neutral Badge - For scores, counts */
.badge-neutral,
.badge--neutral {
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
    border-color: var(--color-border-medium);
}

/* ============================================
   BADGE PROGRESSIVE DISCLOSURE
   Native <details>/<summary> for secondary badges
   ============================================ */

.badge-disclosure {
    display: inline;
}

.badge-disclosure__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2px 8px;
    min-height: 24px;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    list-style: none;
    user-select: none;
    letter-spacing: 0.1em;
    transition: background 0.15s, color 0.15s;
}

.badge-disclosure__toggle::-webkit-details-marker {
    display: none;
}

.badge-disclosure__toggle::marker {
    display: none;
    content: '';
}

.badge-disclosure__toggle:hover {
    background: var(--color-bg-hover, var(--color-slate-100));
    color: var(--color-text);
}

.badge-disclosure[open] .badge-disclosure__toggle {
    background: var(--color-slate-200);
    color: var(--color-text);
}

.badge-disclosure__content {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-left: var(--space-1);
}

/* Dark mode */
[data-theme="dark"] .badge-disclosure__toggle {
    background: var(--dark-bg-tertiary, #334155) !important;
    color: var(--dark-text-muted, #94a3b8) !important;
    border-color: var(--dark-border-primary, #475569) !important;
}

[data-theme="dark"] .badge-disclosure__toggle:hover {
    background: var(--dark-bg-secondary, #1e293b) !important;
    color: var(--dark-text-primary, #e2e8f0) !important;
}

[data-theme="dark"] .badge-disclosure[open] .badge-disclosure__toggle {
    background: var(--dark-bg-secondary, #1e293b) !important;
    color: var(--dark-text-primary, #e2e8f0) !important;
}

/* ============================================
   CLICKABLE BADGES - Interactive Filter Links
   ============================================ */

/* Base clickable badge style */
.badge--clickable {
    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-out);
    text-decoration: none;
    color: inherit;
}

.badge--clickable:hover {
    box-shadow: var(--shadow-sm);
    filter: brightness(0.95);
}

/* Priority badges as links */
a.badge--p1,
a.badge--p2,
a.badge--p3 {
    text-decoration: none;
}

a.badge--p1:hover {
    background: var(--color-red-200);
}

a.badge--p2:hover {
    background: var(--color-amber-200);
}

a.badge--p3:hover {
    background: var(--color-emerald-200);
}

/* Scope badge wrapper with edit button */
.badge--scope-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* No extra padding - edit button is positioned absolutely */
}

.badge--scope-link {
    text-decoration: none;
    color: inherit;
}

.badge--scope-edit {
    position: absolute;
    right: -0.5em;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.1em 0.25em;
    cursor: pointer;
    font-size: 0.65em;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 1;
}

.badge--scope-wrapper:hover .badge--scope-edit {
    opacity: 0.7;
}

.badge--scope-edit:hover {
    opacity: 1 !important;
}

/* Theme badge link */
.badge--theme-link {
    text-decoration: none;
    color: inherit;
}

.badge--theme-link:hover {
    text-decoration: underline;
}

/* Meta link (source domain) */
.meta-link {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

.meta-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================
   FILTER BANNER - Active Filter Display
   ============================================ */

.filter-banner {
    background: var(--color-primary-50, #e3f2fd);
    border-bottom: 2px solid var(--color-primary, #2196f3);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-4);
}

.filter-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-banner__icon {
    font-size: 1.2em;
}

.filter-banner__text {
    flex: 1;
    color: var(--color-text);
}

.filter-banner__count {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.filter-banner__clear {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
}

.filter-banner__clear:hover {
    background: rgba(33, 150, 243, 0.1);
    text-decoration: underline;
}

/* Dark mode for filter banner */
[data-theme="dark"] .filter-banner {
    background: var(--dark-bg-deep-blue);
    border-bottom-color: var(--dark-link);
}

[data-theme="dark"] .filter-banner__text {
    color: var(--dark-text-primary);
}

[data-theme="dark"] .filter-banner__clear {
    color: var(--dark-link);
}

[data-theme="dark"] .filter-banner__clear:hover {
    background: rgba(96, 165, 250, 0.2);
}

/* Dark mode for clickable badges */
[data-theme="dark"] .badge--clickable:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}

[data-theme="dark"] .meta-link:hover {
    color: var(--dark-link);
}

[data-theme="dark"] .badge--scope-edit {
    background: var(--color-slate-700);
    border-color: var(--color-slate-600);
    color: var(--color-slate-200);
}

/* ============================================
   QUICK FILTER CHIPS - Dashboard Shortcuts
   ============================================ */

.quick-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
    margin-bottom: var(--space-2);
}

.quick-filters__label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.quick-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: var(--border-radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    transition: all var(--transition-fast) var(--ease-out);
}

.quick-filter-chip:hover {
    box-shadow: var(--shadow-sm);
}

.quick-filter-chip--p1 {
    border-color: var(--color-p1);
    color: var(--color-red-800);
}

.quick-filter-chip--p1:hover {
    background: var(--color-red-100);
}

.quick-filter-chip--p2 {
    border-color: var(--color-p2);
    color: var(--color-amber-800);
}

.quick-filter-chip--p2:hover {
    background: var(--color-amber-100);
}

.quick-filter-chip--upvoted {
    border-color: var(--color-success);
    color: var(--color-success);
}

.quick-filter-chip--upvoted:hover {
    background: rgba(76, 175, 80, 0.1);
}

.quick-filter-chip--downvoted {
    border-color: var(--color-error);
    color: var(--color-error);
}

.quick-filter-chip--downvoted:hover {
    background: rgba(244, 67, 54, 0.1);
}

.quick-filter-chip--negative {
    border-color: var(--color-amber-500);
    color: var(--color-amber-600);
}

.quick-filter-chip--negative:hover {
    background: var(--color-amber-100);
}

.quick-filter-chip--threat {
    border-color: var(--color-red-600);
    color: var(--color-red-600);
}

.quick-filter-chip--threat:hover {
    background: var(--color-red-100);
}

/* Dark mode quick filters */
[data-theme="dark"] .quick-filter-chip {
    background: var(--color-slate-800);
    border-color: var(--color-slate-600);
    color: var(--color-slate-200);
}

[data-theme="dark"] .quick-filter-chip:hover {
    background: var(--color-slate-700);
}

[data-theme="dark"] .quick-filter-chip--p1 {
    border-color: var(--color-red-400);
    color: var(--color-red-300);
}

[data-theme="dark"] .quick-filter-chip--p2 {
    border-color: var(--color-amber-400);
    color: var(--color-amber-300);
}

[data-theme="dark"] .quick-filter-chip--upvoted {
    border-color: var(--color-green-400);
    color: var(--color-green-300);
}

[data-theme="dark"] .quick-filter-chip--downvoted {
    border-color: var(--color-red-400);
    color: var(--color-red-300);
}

/* ============================================
   DATE FILTER EMPTY STATE
   ============================================ */
.date-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-8);
    color: var(--color-text-muted);
}

.date-filter-empty a {
    color: var(--color-primary);
    text-decoration: underline;
}

[data-theme="dark"] .date-filter-empty {
    color: var(--color-slate-400);
}

[data-theme="dark"] .date-filter-empty a {
    color: var(--color-blue-400);
}

/* ============================================
   ACTIVE FILTERS - FAS 6 Phase 2
   Analytics drill-down filter display
   ============================================ */

.active-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-200);
    border-radius: var(--border-radius-md);
}

.active-filters__label {
    color: var(--color-blue-700);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.active-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    background: var(--color-white);
    border: 1px solid var(--color-blue-300);
    border-radius: var(--border-radius-full);
    color: var(--color-blue-800);
}

.active-filter-badge--p1 {
    background: var(--color-red-100);
    border-color: var(--color-red-300);
    color: var(--color-red-800);
}

.active-filter-badge--p2 {
    background: var(--color-amber-100);
    border-color: var(--color-amber-300);
    color: var(--color-amber-800);
}

.active-filter-badge--p3 {
    background: var(--color-green-100);
    border-color: var(--color-green-300);
    color: var(--color-green-800);
}

.active-filter-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: var(--space-1);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-500);
    background: var(--color-slate-200);
    border-radius: var(--border-radius-full);
    text-decoration: none;
    transition: all var(--transition-fast) var(--ease-out);
}

.active-filter-remove:hover {
    background: var(--color-red-500);
    color: var(--color-white);
}

.active-filters__clear {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--color-blue-600);
    text-decoration: none;
}

.active-filters__clear:hover {
    text-decoration: underline;
}

/* Dark mode active filters */
[data-theme="dark"] .active-filters {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--color-blue-700);
}

[data-theme="dark"] .active-filters__label {
    color: var(--color-blue-300);
}

[data-theme="dark"] .active-filter-badge {
    background: var(--color-slate-800);
    border-color: var(--color-blue-600);
    color: var(--color-blue-200);
}

[data-theme="dark"] .active-filter-badge--p1 {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--color-red-500);
    color: var(--color-red-300);
}

[data-theme="dark"] .active-filter-badge--p2 {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--color-amber-500);
    color: var(--color-amber-300);
}

[data-theme="dark"] .active-filter-badge--p3 {
    background: rgba(34, 197, 94, 0.2);
    border-color: var(--color-green-500);
    color: var(--color-green-300);
}

[data-theme="dark"] .active-filter-remove {
    background: var(--color-slate-600);
    color: var(--color-slate-300);
}

[data-theme="dark"] .active-filter-remove:hover {
    background: var(--color-red-500);
    color: var(--color-white);
}

[data-theme="dark"] .active-filters__clear {
    color: var(--color-blue-400);
}


/* ============================================
   VOTE BUTTONS - Enhanced with Feedback
   ============================================ */

.vote-buttons {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.vote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-base);

    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);

    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.vote-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Upvote Button */
.vote-btn--up:hover,
.btn-upvote:hover {
    background: rgba(76, 175, 80, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.vote-btn--up.voted,
.btn-upvote.voted {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    animation: vote-pulse 0.3s ease;
}

/* Downvote Button */
.vote-btn--down:hover,
.btn-downvote:hover {
    background: rgba(244, 67, 54, 0.1);
    border-color: var(--color-error);
    color: var(--color-error);
}

.vote-btn--down.voted,
.btn-downvote.voted {
    background: var(--color-error);
    border-color: var(--color-error);
    color: white;
    animation: vote-pulse 0.3s ease;
}

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

/* Vote count styling */
.vote-btn__count {
    font-weight: var(--font-weight-semibold);
}


/* ============================================
   BREADCRUMBS - Navigation Aid
   ============================================ */

.breadcrumbs {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: transparent;
    opacity: 0.8;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumbs__link {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.breadcrumbs__separator {
    color: var(--color-text-disabled);
    user-select: none;
}

.breadcrumbs__current {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

/* Breadcrumbs with icons */
.breadcrumbs__home {
    display: inline-flex;
    align-items: center;
}


/* ============================================
   SKELETON LOADING - Content Placeholders
   ============================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-100) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s infinite;
    border-radius: var(--border-radius-sm);
}

.skeleton--text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton--text-sm {
    height: 0.875em;
    width: 60%;
}

.skeleton--title {
    height: 1.5em;
    width: 80%;
    margin-bottom: var(--space-3);
}

.skeleton--badge {
    display: inline-block;
    height: 20px;
    width: 60px;
    border-radius: 10px;
}

.skeleton--card {
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton article card */
.article-card--loading .article-card__title,
.article-card--loading .article-card__summary,
.article-card--loading .article-card__meta {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-100) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s infinite;
    border-radius: var(--border-radius-sm);
    color: transparent !important;
}

.article-card--loading .article-card__title {
    height: 1.5em;
    width: 85%;
}

.article-card--loading .article-card__summary {
    height: 3.5em;
}

.article-card--loading .article-card__meta {
    height: 1em;
    width: 50%;
}


/* ============================================
   TOAST NOTIFICATIONS - User Feedback
   ============================================ */

.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-index-tooltip);

    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    padding: var(--space-4) var(--space-6);
    min-width: 280px;
    max-width: 400px;

    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);

    animation: toast-slide-in 0.3s var(--ease-out);
}

.toast--success {
    background: var(--color-success);
    color: white;
}

.toast--error {
    background: var(--color-error);
    color: white;
}

.toast--warning {
    background: var(--color-warning);
    color: white;
}

.toast--info {
    background: var(--color-info);
    color: white;
}

.toast__icon {
    font-size: var(--text-xl);
}

.toast__message {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.toast__close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    padding: var(--space-1);
    font-size: var(--text-lg);
    line-height: 1;
}

.toast__close:hover {
    opacity: 1;
}

.toast--exit {
    animation: toast-slide-out 0.3s var(--ease-in) forwards;
}

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Mobile toast positioning */
@media (max-width: 640px) {
    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}


/* ============================================
   EMPTY STATES - No content feedback
   ============================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    text-align: center;
}

.empty-state__icon {
    font-size: 3rem;
    color: var(--color-text-disabled);
    margin-bottom: var(--space-4);
}

.empty-state__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.empty-state__description {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    max-width: 400px;
    margin-bottom: var(--space-6);
}


/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

@media (prefers-color-scheme: dark) {
    .badge-p1,
    .badge--p1 {
        background: rgba(220, 38, 38, 0.2);
        color: var(--color-red-300);
    }

    .badge-p2,
    .badge--p2 {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-amber-300);
    }

    .badge-p3,
    .badge--p3 {
        background: rgba(16, 185, 129, 0.2);
        color: var(--color-emerald-300);
    }

    .badge-theme,
    .badge--theme {
        background: rgba(139, 92, 246, 0.2);
        color: var(--color-violet-300);
    }

    .badge-entity,
    .badge--entity {
        background: rgba(2, 132, 199, 0.2);
        color: var(--color-sky-300);
    }

    .skeleton {
        background: linear-gradient(
            90deg,
            var(--color-gray-700) 25%,
            var(--color-gray-600) 50%,
            var(--color-gray-700) 75%
        );
    }
}

/* ============================================
   MANUAL DARK MODE - Badge & Article Card Overrides
   (For data-theme="dark" toggle, not just OS preference)
   ============================================ */

/* Priority Badges */
[data-theme="dark"] .badge-p1,
[data-theme="dark"] .badge--p1 {
    background: rgba(220, 38, 38, 0.25) !important;
    color: var(--color-red-300) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
}

[data-theme="dark"] .badge-p2,
[data-theme="dark"] .badge--p2 {
    background: rgba(245, 158, 11, 0.25) !important;
    color: var(--color-amber-300) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

[data-theme="dark"] .badge-p3,
[data-theme="dark"] .badge--p3 {
    background: rgba(16, 185, 129, 0.25) !important;
    color: var(--color-emerald-300) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

/* Theme Badge - Purple */
[data-theme="dark"] .badge-theme,
[data-theme="dark"] .badge--theme {
    background: rgba(139, 92, 246, 0.25) !important;
    color: var(--color-violet-300) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

/* Entity Badge - Blue */
[data-theme="dark"] .badge-entity,
[data-theme="dark"] .badge--entity {
    background: rgba(2, 132, 199, 0.25) !important;
    color: var(--color-sky-300) !important;
    border-color: rgba(2, 132, 199, 0.5) !important;
}

/* Score Badge */
[data-theme="dark"] .badge--score {
    background: rgba(100, 116, 139, 0.25) !important;
    color: var(--color-slate-200) !important;
    border-color: rgba(100, 116, 139, 0.5) !important;
}

/* Neutral Badge */
[data-theme="dark"] .badge--neutral {
    background: rgba(100, 116, 139, 0.2) !important;
    color: var(--color-slate-300) !important;
}

/* ============================================
   Region Badges (Light Mode)
   ============================================ */
.badge--sweden {
    background: var(--color-blue-100);
    color: var(--color-blue-800);
    border: 1px solid var(--color-blue-500);
}

.badge--eu,
.badge--EU {
    background: var(--color-blue-100);
    color: var(--color-blue-800);
    border: 1px solid var(--color-blue-500);
}

.badge--global,
.badge--Global {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-400);
}

/* Region Badges (Dark Mode) */
[data-theme="dark"] .badge--EU,
[data-theme="dark"] .badge--eu,
[data-theme="dark"] .badge--US,
[data-theme="dark"] .badge--CN,
[data-theme="dark"] .badge--Global,
[data-theme="dark"] .badge--global,
[data-theme="dark"] .badge--sweden {
    background: rgba(100, 116, 139, 0.2) !important;
    color: var(--dark-text-primary) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
}

/* ============================================
   Sentiment Badges (Light Mode)
   ============================================ */
.badge--sentiment-positive {
    background: var(--color-emerald-100);
    color: var(--color-emerald-800);
    border: 1px solid var(--color-emerald-500);
}

.badge--sentiment-negative {
    background: var(--color-red-100);
    color: var(--color-red-800);
    border: 1px solid var(--color-red-500);
}

.badge--sentiment-neutral {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-400);
}

/* Sentiment Badges (Dark Mode) */
[data-theme="dark"] .badge--sentiment-positive {
    background: rgba(16, 185, 129, 0.25) !important;
    color: var(--color-emerald-300) !important;
}

[data-theme="dark"] .badge--sentiment-negative {
    background: rgba(220, 38, 38, 0.25) !important;
    color: var(--color-red-300) !important;
}

[data-theme="dark"] .badge--sentiment-neutral {
    background: rgba(100, 116, 139, 0.25) !important;
    color: var(--color-slate-300) !important;
}

/* Content Type Badges (Podcast/Event) */
.badge--podcast {
    background: var(--color-primary);
    color: white;
}

.badge--event {
    background: var(--color-success);
    color: white;
}

.badge--duration {
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-family: monospace;
    font-size: 0.75rem;
}

[data-theme="dark"] .badge--podcast {
    background: var(--color-blue-500) !important;
    color: white !important;
}

[data-theme="dark"] .badge--event {
    background: var(--color-emerald-500) !important;
    color: white !important;
}

/* Paywall Badge */
.badge--paywall {
    background: var(--color-warning);
    color: var(--color-text);
    font-size: 0.9rem;
}

[data-theme="dark"] .badge--paywall {
    background: var(--color-amber-500) !important;
    color: var(--color-slate-800) !important;
}

/* SA-typ Badges (Strategic Analysis Types) */
.badge--sa-type {
    font-weight: 500;
    border-radius: var(--border-radius-sm);
}

.badge--sa-threat {
    background: var(--color-amber-100);
    color: var(--color-amber-800);
    border: 1px solid var(--color-amber-500);
}

.badge--sa-vulnerability {
    background: var(--color-fuchsia-100);
    color: var(--color-fuchsia-800);
    border: 1px solid var(--color-fuchsia-400);
}

.badge--sa-protection {
    background: var(--color-emerald-100);
    color: var(--color-emerald-800);
    border: 1px solid var(--color-emerald-500);
}

.badge--sa-incident {
    background: var(--color-red-100);
    color: var(--color-red-800);
    border: 1px solid var(--color-red-500);
}

.badge--sa-risk {
    background: var(--color-orange-100);
    color: var(--color-orange-800);
    border: 1px solid var(--color-orange-500);
}

/* SA-typ Badges Dark Mode */
[data-theme="dark"] .badge--sa-threat {
    background: rgba(245, 158, 11, 0.25) !important;
    color: var(--color-amber-300) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

[data-theme="dark"] .badge--sa-vulnerability {
    background: rgba(217, 70, 239, 0.25) !important;
    color: var(--color-fuchsia-400) !important;
    border-color: rgba(217, 70, 239, 0.5) !important;
}

[data-theme="dark"] .badge--sa-protection {
    background: rgba(16, 185, 129, 0.25) !important;
    color: var(--color-emerald-300) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .badge--sa-incident {
    background: rgba(239, 68, 68, 0.25) !important;
    color: var(--color-red-300) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

[data-theme="dark"] .badge--sa-risk {
    background: rgba(249, 115, 22, 0.25) !important;
    color: var(--color-orange-300) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
}

[data-theme="dark"] .badge--duration {
    background: rgba(51, 65, 85, 0.5) !important;
    color: var(--color-slate-400) !important;
}

/* Add Badge Button */
[data-theme="dark"] .badge--add {
    background: rgba(51, 65, 85, 0.4) !important;
    color: var(--color-slate-400) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
}

[data-theme="dark"] .badge--add:hover {
    background: rgba(51, 65, 85, 0.6) !important;
    opacity: 1 !important;
}

/* Article Card Titles - Very important for readability */
[data-theme="dark"] .article-card__title,
[data-theme="dark"] .article-card__title a {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .article-card__title a:hover {
    color: var(--dark-link) !important;
}

/* Article Card Summary */
[data-theme="dark"] .article-card__summary {
    color: var(--dark-text-secondary) !important;
}

/* Article Card Meta */
[data-theme="dark"] .article-card__meta,
[data-theme="dark"] .article-card__meta span,
[data-theme="dark"] .sources-badge {
    color: var(--dark-text-muted) !important;
}

/* Article Card Actions */
[data-theme="dark"] .article-card__actions a,
[data-theme="dark"] .article-card__actions button {
    color: var(--dark-link) !important;
}

/* Skeleton in manual dark mode */
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--dark-border-light) 25%,
        var(--dark-bg-highlight) 50%,
        var(--dark-border-light) 75%
    ) !important;
}

/* Vote Buttons - Dark Mode */
[data-theme="dark"] .vote-btn,
[data-theme="dark"] .btn-upvote,
[data-theme="dark"] .btn-downvote {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .vote-btn:hover {
    background: var(--dark-bg-elevated) !important;
}

[data-theme="dark"] .vote-btn--up:hover,
[data-theme="dark"] .btn-upvote:hover {
    background: rgba(76, 175, 80, 0.2) !important;
    border-color: var(--color-success) !important;
    color: var(--color-emerald-300) !important;
}

[data-theme="dark"] .vote-btn--down:hover,
[data-theme="dark"] .btn-downvote:hover {
    background: rgba(244, 67, 54, 0.2) !important;
    border-color: var(--color-error) !important;
    color: var(--color-red-300) !important;
}

[data-theme="dark"] .vote-btn__count {
    color: var(--dark-text-secondary) !important;
}

/* ============================================
   Knowledge Graph Insights - Consistent styling
   ============================================ */

/* Light mode - matching Executive Summary style */
.graph-insights-panel {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.graph-insights-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.graph-insights-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

.graph-insights-toggle {
    transition: transform 0.2s;
    color: var(--color-text-secondary);
}

.graph-insights-content {
    margin-top: var(--space-3);
    display: none;
}

.graph-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.graph-insights-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--border-radius-md);
    padding: var(--space-3);
}

.graph-insights-card__label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.graph-insights-card__value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.graph-insights-card__sub {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.graph-insights-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.graph-insights-card__name {
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.graph-insights-card__link {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    color: var(--color-text-primary);
    text-decoration: none;
}

.graph-insights-card__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.graph-insights-card__badge {
    font-size: 0.75rem;
    background: var(--color-slate-200);
    color: var(--color-text-secondary);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Dark mode - matching Executive Summary style */
[data-theme="dark"] .graph-insights-panel {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .graph-insights-header h3 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .graph-insights-toggle {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .graph-insights-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .graph-insights-card__label {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .graph-insights-card__value {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .graph-insights-card__sub {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .graph-insights-card__name {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .graph-insights-card__link {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .graph-insights-card__link:hover {
    color: var(--dark-link) !important;
}

[data-theme="dark"] .graph-insights-card__badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--dark-text-primary) !important;
}

/* Dashboard Actions Bar - Matching gradient in dark mode */
[data-theme="dark"] .dashboard-actions {
    background: var(--gradient-card) !important;
    border-bottom: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .dashboard-actions .btn-toggle,
[data-theme="dark"] .dashboard-actions .btn-crawl,
[data-theme="dark"] .dashboard-actions .btn-analyze {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .dashboard-actions .btn-toggle:hover,
[data-theme="dark"] .dashboard-actions .btn-crawl:hover,
[data-theme="dark"] .dashboard-actions .btn-analyze:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Crawl dropdown - ensure consistent sizing */
[data-theme="dark"] .crawl-dropdown {
    display: inline-flex;
}

[data-theme="dark"] .crawl-menu {
    background: var(--dark-bg-accent) !important;
    border-color: var(--dark-border-strong) !important;
}

[data-theme="dark"] .crawl-option {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .crawl-option:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .crawl-start-btn {
    background: rgba(76, 175, 80, 0.2) !important;
    color: var(--color-emerald-300) !important;
    border-color: var(--color-success) !important;
}

/* Filter Panel - Matching gradient in dark mode */
[data-theme="dark"] .filter-panel {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .filter-panel__header {
    background: transparent !important;
}

[data-theme="dark"] .filter-panel__title {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .filter-panel__content {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Executive Summary Section - Matching gradient in dark mode */
[data-theme="dark"] .summary-section {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: var(--border-radius-lg);
}

[data-theme="dark"] .summary-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .summary-header .section-header {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .summary-content {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .summary-meta {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .summary-preview,
[data-theme="dark"] .summary-ingress {
    color: var(--dark-text-secondary) !important;
}

/* Summary Section - Collapsible Styling */
.summary-section {
    margin-bottom: var(--space-4);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
}

.summary-section .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
}

.summary-preview {
    padding: 0 var(--space-4) var(--space-3);
}

.summary-ingress {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
    font-style: italic;
}

.summary-section--collapsed .summary-content {
    display: none;
}

.summary-section:not(.summary-section--collapsed) .summary-preview {
    display: none;
}

/* Stats Cards - Matching gradient in dark mode */
[data-theme="dark"] .stat-card {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .stat-card__value {
    color: var(--color-amber-500) !important;  /* Keep accent color */
}

[data-theme="dark"] .stat-card__label {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .stats-header {
    background: transparent !important;
}

/* ============================================
   ANALYTICS PAGE - Dark Mode
   ============================================ */

/* Tab Navigation */
[data-theme="dark"] .tab-navigation {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: var(--border-radius-lg);
}

[data-theme="dark"] .tab-list {
    background: transparent !important;
}

[data-theme="dark"] .tab-button {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--dark-text-secondary) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .tab-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .tab-button.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--dark-text-bright) !important;
    border-bottom-color: var(--color-amber-500) !important;
}

[data-theme="dark"] .tab-mobile-select {
    background: var(--dark-bg-accent) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-strong) !important;
}

/* Tab Content */
[data-theme="dark"] .tab-content {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
    color: var(--dark-text-primary) !important;
}

/* Metric Cards */
[data-theme="dark"] .metric-card {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .metric-card__label {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .metric-card__value {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .metric-card__value.positive {
    color: var(--color-emerald-300) !important;
}

[data-theme="dark"] .metric-card__value.negative {
    color: var(--color-red-300) !important;
}

[data-theme="dark"] .metric-card__value.neutral {
    color: var(--color-amber-500) !important;
}

/* Chart Cards */
[data-theme="dark"] .chart-card {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .chart-card h3,
[data-theme="dark"] .chart-card h4 {
    color: var(--dark-text-bright) !important;
}

/* Summary Cards Container */
[data-theme="dark"] .summary-cards {
    background: transparent !important;
}

/* Report Section */
[data-theme="dark"] .report-section {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

/* Analytics header box with gradient */
[data-theme="dark"] .analytics-header {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Analytics-specific text */
[data-theme="dark"] .analytics-header,
[data-theme="dark"] .analytics-title,
[data-theme="dark"] .analytics-container h1,
[data-theme="dark"] .analytics-container h2 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .analytics-container {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .analytics-container p,
[data-theme="dark"] .chart-description {
    color: var(--dark-text-secondary) !important;
}

/* Period selector buttons in dark mode */
[data-theme="dark"] .period-selector .period-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--dark-border-accent) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .period-selector .period-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .period-selector .period-btn.active {
    background: var(--dark-accent-primary) !important;
    border-color: var(--dark-accent-primary) !important;
    color: white !important;
}

/* Report dropdown in dark mode */
[data-theme="dark"] .report-dropdown .report-menu {
    background: var(--dark-border-light) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .report-dropdown .report-link,
[data-theme="dark"] .report-dropdown .report-section strong {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .report-dropdown .report-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .report-dropdown .report-link.disabled {
    color: var(--dark-text-muted) !important;
}

/* Chart Info Icons and Tooltips */
[data-theme="dark"] .chart-info-icon {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .tooltip {
    background: var(--dark-bg-accent) !important;
    border-color: var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .tooltip-title {
    color: var(--dark-text-bright) !important;
}

/* Community boxes */
[data-theme="dark"] .community-box,
[data-theme="dark"] .graph-community {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

/* Indicator performance text */
[data-theme="dark"] .indicator-text,
[data-theme="dark"] .combo-text,
[data-theme="dark"] .best-combo {
    color: var(--dark-text-primary) !important;
}

/* Chart grid */
[data-theme="dark"] .chart-grid {
    background: transparent !important;
}

/* Plotly charts - override SVG backgrounds */
[data-theme="dark"] .chart-container .main-svg {
    background: transparent !important;
}

[data-theme="dark"] .chart-container .bg {
    fill: transparent !important;
}

/* ============================================
   ENTITY INTEL PAGE - Dark Mode
   ============================================ */

[data-theme="dark"] .intel-header {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

[data-theme="dark"] .intel-header h1,
[data-theme="dark"] .intel-header p {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .search-section,
[data-theme="dark"] .search-box {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .search-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--dark-border-accent) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .search-input::placeholder {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .search-btn {
    background: var(--dark-accent-primary) !important;
    color: white !important;
}

[data-theme="dark"] .profile-header {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .entity-card,
[data-theme="dark"] .entity-list-item {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .entity-card h3,
[data-theme="dark"] .entity-card h4 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .back-link {
    color: var(--dark-link) !important;
}

/* ============================================
   SOURCES PAGE - Dark Mode
   ============================================ */

[data-theme="dark"] .sources-container {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .sources-header {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

[data-theme="dark"] .sources-header h2 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .sources-stats {
    background: transparent !important;
}

[data-theme="dark"] .sources-stats .stat-card {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .sources-stats .stat-card .value {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .sources-stats .stat-card .label {
    color: var(--dark-text-muted) !important;
}

/* Feed Management - Light mode base styles */
.feed-management {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: 30px;
}

.feed-management h3 {
    margin-bottom: var(--space-4);
    color: var(--color-slate-800);
}

.feed-management__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.feed-management__card {
    padding: var(--space-4);
    background: var(--color-slate-50);
    border-radius: var(--border-radius-md);
}

.feed-management__card h4 {
    margin-bottom: var(--space-3);
    color: var(--color-slate-700);
}

.feed-management__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feed-management__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    border: none;
    cursor: pointer;
    font-size: inherit;
}

.feed-management__link--p1 { background: var(--color-feed-action-p1); }
.feed-management__link--all { background: var(--color-feed-action-all); }
.feed-management__link--export { background: var(--color-feed-action-export); }
.feed-management__link--import { background: var(--color-feed-action-import); }
.feed-management__link--config-export { background: var(--color-feed-config-export); }
.feed-management__link--config-import { background: var(--color-feed-config-import); }

.feed-management__link:hover {
    opacity: 0.85;
}

.feed-management__hint {
    font-size: 12px;
    color: var(--color-slate-500);
    margin-top: var(--space-2);
}

/* Multi-feed stat card accent */
.stat-card--accent {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--color-violet-700) 100%);
    color: white;
}

.stat-card--accent .stat-card__value,
.stat-card--accent .value {
    color: white !important;
}

.stat-card--accent .stat-card__label,
.stat-card--accent .label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Paywall/warning stat card */
.stat-card--warning {
    background: linear-gradient(135deg, var(--color-amber-500) 0%, var(--color-amber-600) 100%);
    color: var(--color-slate-800);
}

.stat-card--warning .stat-card__value,
.stat-card--warning .value {
    color: var(--color-slate-800) !important;
}

.stat-card--warning .stat-card__label,
.stat-card--warning .label {
    color: rgba(30, 41, 59, 0.9) !important;
}

/* Feed count badge */
.badge--feeds {
    background: var(--dark-accent-primary);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 5px;
}

/* Info box */
.info-box {
    margin-top: 20px;
    padding: 15px;
    background: var(--color-slate-50);
    border-radius: 8px;
    border: 1px solid var(--color-slate-200);
}

.info-box h4 {
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.info-box p {
    margin: 5px 0;
    color: var(--color-slate-500);
}

/* Dark mode - Feed Management */
[data-theme="dark"] .feed-management {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .feed-management h3,
[data-theme="dark"] .feed-management h4 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .feed-management__card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .feed-management__hint {
    color: var(--dark-text-muted) !important;
}

/* Dark mode - Feed Management links: more muted colors */
[data-theme="dark"] .feed-management__link--p1 {
    background: rgba(220, 38, 38, 0.65) !important;
}
[data-theme="dark"] .feed-management__link--all {
    background: rgba(59, 130, 246, 0.65) !important;
}
[data-theme="dark"] .feed-management__link--export {
    background: rgba(34, 197, 94, 0.65) !important;
}
[data-theme="dark"] .feed-management__link--import {
    background: rgba(147, 51, 234, 0.65) !important;
}
[data-theme="dark"] .feed-management__link--config-export {
    background: rgba(245, 158, 11, 0.65) !important;
}
[data-theme="dark"] .feed-management__link--config-import {
    background: rgba(234, 88, 12, 0.65) !important;
}

/* Dark mode - Stat card accent */
[data-theme="dark"] .stat-card--accent {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

/* Dark mode - Stat card warning (paywall) */
[data-theme="dark"] .stat-card--warning {
    background: linear-gradient(135deg, var(--color-amber-700) 0%, var(--color-amber-800) 100%) !important;
    border: 1px solid var(--color-amber-600) !important;
    color: var(--color-amber-100) !important;
}

[data-theme="dark"] .stat-card--warning .value,
[data-theme="dark"] .stat-card--warning .label {
    color: var(--color-amber-100) !important;
}

/* Dark mode - Badge feeds */
[data-theme="dark"] .badge--feeds {
    background: var(--dark-accent-primary) !important;
}

/* Dark mode - Info box */
[data-theme="dark"] .info-box {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

[data-theme="dark"] .info-box h4 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .info-box p {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .source-table,
[data-theme="dark"] .sources-table {
    background: var(--dark-border-light) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .source-table th,
[data-theme="dark"] .sources-table th {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-bright) !important;
    border-color: var(--dark-border-strong) !important;
}

[data-theme="dark"] .source-table td,
[data-theme="dark"] .sources-table td {
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .source-table tr:hover,
[data-theme="dark"] .sources-table tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================
   HYPOTHESIS PAGE - Dark Mode
   ============================================ */

[data-theme="dark"] .hypothesis-header {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .meta-info {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .hypothesis-card {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .hypothesis-card h3 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .hypothesis-card .description {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .comparison-table {
    background: var(--dark-border-light) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .comparison-table th {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-bright) !important;
    border-color: var(--dark-border-strong) !important;
}

[data-theme="dark"] .comparison-table td {
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .evidence-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

/* ============================================
   ADMIN/KEYWORDS PAGE - Dark Mode
   ============================================ */

[data-theme="dark"] .theme-card {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .theme-card .theme-header {
    border-color: var(--dark-border-strong) !important;
}

[data-theme="dark"] .theme-card .theme-name {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .add-keyword-form input {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--dark-border-accent) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .add-keyword-form input::placeholder {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .keyword-tag {
    background: rgba(102, 126, 234, 0.2) !important;
    color: var(--color-blue-300) !important;
    border-color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] #feedsList,
[data-theme="dark"] #suggestionsList {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] #feedsList p,
[data-theme="dark"] #suggestionsList p {
    color: var(--dark-text-muted) !important;
}

/* Help box / format hint */
.help-box {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--color-slate-50);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-slate-200);
}

.help-box ul {
    margin: 0.5rem 0 0 1.5rem;
    line-height: 1.6;
}

.help-box p {
    margin-top: 0.75rem;
}

[data-theme="dark"] .help-box {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .help-box code {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-blue-300) !important;
}

/* Summary stat cards grid */
.summary-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.summary-stat-card {
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
}

.summary-stat-card--neutral {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
}

.summary-stat-card--success {
    background: var(--color-green-100);
    border: 1px solid var(--color-green-200);
}

.summary-stat-card--danger {
    background: var(--color-red-100);
    border: 1px solid var(--color-red-200);
}

.summary-stat-card__value {
    font-size: 2rem;
    font-weight: bold;
}

.summary-stat-card--neutral .summary-stat-card__value {
    color: var(--color-text-primary);
}

.summary-stat-card--success .summary-stat-card__value {
    color: var(--color-green-600);
}

.summary-stat-card--danger .summary-stat-card__value {
    color: var(--color-red-600);
}

.summary-stat-card__label {
    font-size: 0.875rem;
}

.summary-stat-card--neutral .summary-stat-card__label {
    color: var(--color-slate-500);
}

.summary-stat-card--success .summary-stat-card__label {
    color: var(--color-green-800);
}

.summary-stat-card--danger .summary-stat-card__label {
    color: var(--color-red-800);
}

/* Dark mode - Summary stats */
[data-theme="dark"] .summary-stat-card--neutral {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--dark-border-strong) !important;
}

[data-theme="dark"] .summary-stat-card--neutral .summary-stat-card__value {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .summary-stat-card--neutral .summary-stat-card__label {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .summary-stat-card--success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .summary-stat-card--success .summary-stat-card__value {
    color: var(--color-green-400) !important;
}

[data-theme="dark"] .summary-stat-card--success .summary-stat-card__label {
    color: var(--color-green-300) !important;
}

[data-theme="dark"] .summary-stat-card--danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .summary-stat-card--danger .summary-stat-card__value {
    color: var(--color-red-400) !important;
}

[data-theme="dark"] .summary-stat-card--danger .summary-stat-card__label {
    color: var(--color-red-300) !important;
}

/* List item rows (JS-generated content) */
[data-theme="dark"] .theme-card div[style*="background: #f8fafc"],
[data-theme="dark"] .theme-card div[style*="background: #f9fafb"],
[data-theme="dark"] .theme-card div[style*="background: var(--color-slate-100)"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--dark-border-strong) !important;
}

/* ============================================
   AUDIT LOG PAGE - Dark Mode
   ============================================ */

[data-theme="dark"] .logs-container {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .logs-header {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

[data-theme="dark"] .logs-header h1,
[data-theme="dark"] .logs-header h2 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .log-filters {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

[data-theme="dark"] .log-filters select,
[data-theme="dark"] .log-filters input {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--dark-border-accent) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .log-entry {
    background: var(--dark-border-light) !important;
    border-color: var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .log-entry:hover {
    background: var(--dark-border-medium) !important;
}

/* ============================================
   SETTINGS PAGE - Dark Mode
   ============================================ */

[data-theme="dark"] .settings-container {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .settings-section {
    background: var(--gradient-card) !important;
    border: 1px solid var(--dark-border-strong) !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .settings-section h2,
[data-theme="dark"] .settings-section h3 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .settings-section p {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .security-key-display {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--dark-border-strong) !important;
    color: var(--dark-text-primary) !important;
}

/* ============================================
   GENERAL PAGE ELEMENTS - Dark Mode
   ============================================ */

[data-theme="dark"] .section-header h2 {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] .topics-section {
    background: transparent !important;
}

[data-theme="dark"] .topics-section .section-header {
    color: var(--dark-text-bright) !important;
}

[data-theme="dark"] code {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-blue-300) !important;
}

/* Muted text - light mode */
.text-muted {
    color: var(--color-slate-500);
}

[data-theme="dark"] .text-muted {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .loading {
    color: var(--dark-text-muted) !important;
}


/* ============================================
   PAGINATION - Page Navigation
   ============================================ */

.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__item {
    display: flex;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-md);
    transition: var(--transition-all);
}

.pagination__link:hover:not(.pagination__link--disabled):not(.pagination__link--active) {
    background: var(--color-bg-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination__link--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
}

.pagination__link--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination__link--prev,
.pagination__link--next,
.pagination__link--first,
.pagination__link--last {
    padding: var(--space-2) var(--space-4);
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    color: var(--color-text-tertiary);
}

.pagination__info {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* Mobile pagination */
@media (max-width: 640px) {
    .pagination__link--first,
    .pagination__link--last {
        display: none;
    }

    .pagination__link {
        min-width: 40px;
        padding: var(--space-2);
    }

    .pagination__link--prev,
    .pagination__link--next {
        padding: var(--space-2) var(--space-3);
    }
}


/* ============================================
   DATA TABLES - Responsive Tables
   ============================================ */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table__wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
}

.data-table thead {
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border-medium);
}

.data-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-wide);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--color-bg-hover);
}

/* Sortable columns */
.data-table th[data-sortable] {
    cursor: pointer;
    user-select: none;
}

.data-table th[data-sortable]:hover {
    background: var(--color-bg-hover);
}

.data-table th[data-sortable]::after {
    content: '↕';
    margin-left: var(--space-2);
    opacity: 0.3;
}

.data-table th[data-sort="asc"]::after {
    content: '↑';
    opacity: 1;
}

.data-table th[data-sort="desc"]::after {
    content: '↓';
    opacity: 1;
}

/* Cell variants */
.data-table__cell--numeric {
    text-align: right;
    font-family: var(--font-family-mono);
}

.data-table__cell--truncate {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table__cell--actions {
    text-align: right;
    white-space: nowrap;
}

/* Row states */
.data-table tr.data-table__row--success {
    background: rgba(76, 175, 80, 0.1);
}

.data-table tr.data-table__row--warning {
    background: rgba(255, 152, 0, 0.1);
}

.data-table tr.data-table__row--error {
    background: rgba(244, 67, 54, 0.1);
}

.data-table tr.data-table__row--selected {
    background: rgba(33, 150, 243, 0.1);
}

/* Empty table state */
.data-table__empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-tertiary);
}

/* Responsive: Card view on mobile */
@media (max-width: 768px) {
    .data-table--responsive thead {
        display: none;
    }

    .data-table--responsive tbody tr {
        display: block;
        margin-bottom: var(--space-4);
        padding: var(--space-4);
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-light);
        border-radius: var(--border-radius-md);
    }

    .data-table--responsive tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-border-light);
    }

    .data-table--responsive tbody td:last-child {
        border-bottom: none;
    }

    .data-table--responsive tbody td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        font-size: var(--text-xs);
        text-transform: uppercase;
    }

    .data-table--responsive .data-table__cell--actions {
        justify-content: flex-end;
        padding-top: var(--space-3);
    }

    .data-table--responsive .data-table__cell--actions::before {
        display: none;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .data-table thead {
        background: var(--color-gray-800);
    }

    .data-table tbody tr:hover {
        background: var(--color-gray-800);
    }
}


/* ============================================
   GLOBAL SEARCH (Command Palette)
   ============================================ */

.global-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-index-modal, 1000);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

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

.global-search {
    width: 100%;
    max-width: 600px;
    margin: 0 var(--space-4);
    background: var(--color-bg-primary, #fff);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: transform var(--transition-normal);
}

.global-search-overlay.active .global-search {
    transform: translateY(0) scale(1);
}

.global-search__header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.global-search__input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.global-search__icon {
    font-size: var(--text-xl);
    opacity: 0.5;
}

.global-search__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    outline: none;
}

.global-search__input::placeholder {
    color: var(--color-text-tertiary);
}

.global-search__shortcut {
    padding: var(--space-1) var(--space-2);
    background: var(--color-gray-100);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-family-mono);
    color: var(--color-text-secondary);
}

.global-search__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.global-search__close:hover {
    background: var(--color-gray-100);
    color: var(--color-text);
}

.global-search__results {
    max-height: 50vh;
    overflow-y: auto;
    padding: var(--space-2);
}

.global-search__placeholder,
.global-search__loading,
.global-search__empty,
.global-search__error {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-tertiary);
}

.global-search__hints {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

.global-search__hints kbd {
    padding: 2px 6px;
    background: var(--color-gray-100);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
}

.global-search__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.global-search__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.global-search__tip {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.global-search__count {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.global-search__result {
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.global-search__result:hover,
.global-search__result.selected {
    background: var(--color-bg-hover);
}

.global-search__result a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    text-decoration: none;
    color: inherit;
}

.global-search__result-priority {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: 10px;
}

.global-search__result-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.global-search__result-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search__result-meta {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search__footer {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-3);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.global-search__footer kbd {
    padding: 2px 6px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-mono);
    margin-right: 2px;
}

/* Navbar search button */
.navbar__search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-all);
}

.navbar__search-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

.navbar__search-btn kbd {
    padding: 2px 6px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
}

/* Mobile: Hide shortcut hint and text */
@media (max-width: 768px) {
    .navbar__search-btn kbd,
    .navbar__search-text {
        display: none;
    }

    .navbar__search-btn {
        padding: var(--space-2);
    }

    .global-search {
        margin: var(--space-2);
        max-height: 90vh;
    }

    .global-search__results {
        max-height: 60vh;
    }

    .global-search__footer {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .global-search-overlay {
        background: rgba(0, 0, 0, 0.7);
    }

    .global-search__shortcut,
    .global-search__hints kbd,
    .global-search__footer kbd {
        background: var(--color-gray-700);
        border-color: var(--color-gray-600);
    }

    .global-search__close:hover {
        background: var(--color-gray-700);
    }
}

/* Data-theme based dark mode for close button */
[data-theme="dark"] .global-search__close:hover {
    background: var(--color-gray-700);
}


/* ============================================
   THEME TOGGLE - Dark/Light Mode Switch
   ============================================ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: var(--transition-all);
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-primary);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.theme-toggle__icon {
    position: absolute;
    font-size: 1.25rem;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.theme-toggle__icon--light {
    transform: translateY(0);
    opacity: 1;
}

.theme-toggle__icon--dark {
    transform: translateY(100%);
    opacity: 0;
}

/* Dark mode state */
.theme-toggle--dark .theme-toggle__icon--light {
    transform: translateY(-100%);
    opacity: 0;
}

.theme-toggle--dark .theme-toggle__icon--dark {
    transform: translateY(0);
    opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle__icon {
        transition: none;
    }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .global-search-overlay,
    .global-search {
        transition: none;
    }

    .global-search__spinner {
        animation: none;
    }

    .skeleton {
        animation: none;
        background: var(--color-gray-200);
    }

    .toast {
        animation: none;
    }

    .vote-btn--up.voted,
    .vote-btn--down.voted,
    .btn-upvote.voted,
    .btn-downvote.voted {
        animation: none;
    }
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}

/* Visibility utilities */
.hidden {
    display: none;
}

/* Flex utilities */
.flex-row-center {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.flex-row-end {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* Width utilities */
.w-full {
    width: 100%;
}

/* Opacity utilities */
.opacity-60 {
    opacity: 0.6;
}

/* Transition utilities */
.transition-transform {
    transition: transform 0.2s;
}

/* Link reset */
.link-reset {
    color: inherit;
    text-decoration: none;
}

.link-reset:hover {
    text-decoration: underline;
}

/* Badge overflow indicator */
.badge--more {
    opacity: 0.6;
}

/* Form modal utilities */
.modal-form-select {
    width: 100%;
    padding: var(--space-2);
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    color: var(--color-text);
}

.modal-form-checkbox-group {
    margin: var(--space-5) 0;
}

.modal-form-checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
}

.modal-form-checkbox-label input[type="checkbox"] {
    margin-right: var(--space-2);
}

.modal-form-checkbox-label span {
    font-weight: 600;
}

.modal-form-nested {
    margin-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.modal-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-5);
}

/* Margin utilities */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }

/* Text utilities */
.text-center { text-align: center; }

/* Filter count */
.filter-count {
    display: block;
    text-align: center;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}

/* ============================================
   COLLAPSIBLE SECTIONS
   Usage: Add .collapsible-section to container,
          .collapsible-header for clickable header,
          .collapsible-content for hideable content.
          Toggle .expanded class on section to show.
   ============================================ */

.collapsible-section {
    margin-bottom: var(--space-4, 1rem);
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface, #f8fafc);
    border: 1px solid var(--color-border, var(--color-slate-200));
    border-radius: var(--border-radius-md, 8px);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
}

.collapsible-header:hover {
    background: var(--color-border, var(--color-slate-200));
}

.collapsible-header:focus-visible {
    outline: 2px solid var(--color-primary, var(--color-blue-500));
    outline-offset: 2px;
}

.collapsible-header__left {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.collapsible-header__icon-left {
    font-size: 1.25rem;
}

.collapsible-header__title {
    font-weight: 600;
    color: var(--color-text, var(--color-slate-800));
    font-size: 1rem;
}

.collapsible-header__count {
    font-size: 0.75rem;
    color: var(--color-text-muted, var(--color-slate-500));
    background: var(--color-background, white);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.collapsible-header__icon {
    font-size: 0.875rem;
    color: var(--color-text-muted, var(--color-slate-500));
    transition: transform 0.2s ease-out;
}

.collapsible-section.expanded .collapsible-header__icon {
    transform: rotate(180deg);
}

.collapsible-content {
    display: none;
    padding: var(--space-4, 1rem);
    border: 1px solid var(--color-border, var(--color-slate-200));
    border-top: none;
    border-radius: 0 0 var(--border-radius-md, 8px) var(--border-radius-md, 8px);
    background: var(--color-background, white);
}

.collapsible-section.expanded .collapsible-content {
    display: block;
}

.collapsible-section.expanded .collapsible-header {
    border-radius: var(--border-radius-md, 8px) var(--border-radius-md, 8px) 0 0;
}

/* Variant: Start expanded by default - add this class AND .expanded to show content on load */
.collapsible-section--default-expanded.expanded .collapsible-content {
    display: block;
}

/* Variant: Compact header */
.collapsible-header--compact {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

.collapsible-header--compact .collapsible-header__title {
    font-size: 0.875rem;
}

/* Dark Mode - Collapsible Sections */
[data-theme="dark"] .collapsible-header {
    background: var(--color-slate-700);
    border-color: var(--color-slate-600);
}

[data-theme="dark"] .collapsible-header:hover {
    background: var(--color-slate-600);
}

[data-theme="dark"] .collapsible-header__title {
    color: var(--color-slate-100);
}

[data-theme="dark"] .collapsible-header__count {
    background: var(--color-slate-800);
    color: var(--color-slate-400);
}

[data-theme="dark"] .collapsible-header__icon {
    color: var(--color-slate-400);
}

[data-theme="dark"] .collapsible-content {
    background: var(--color-slate-800);
    border-color: var(--color-slate-600);
}

/* ============================================
   INFO ICON WITH TOOLTIP
   Usage: <span class="info-icon" onclick="this.classList.toggle('active')">i
            <span class="info-tooltip">
              <span class="info-tooltip__title">Title</span>
              Description text here.
            </span>
          </span>
   ============================================ */

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: var(--space-2, 0.5rem);
    background: var(--color-info-bg, #e3f2fd);
    color: var(--color-info-text, #1976d2);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    cursor: help;
    position: relative;
    vertical-align: middle;
    transition: all 0.2s ease;
    border: 1px solid var(--color-info-border, #90caf9);
    font-style: normal;
}

.info-icon:hover {
    background: var(--color-info-text, #1976d2);
    color: white;
    opacity: 0.85;
}

/* Prevent click propagation to parent (for collapsible headers) */
.info-icon:active {
    pointer-events: auto;
}

.info-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-tooltip-bg, var(--dark-bg-secondary));
    color: var(--color-tooltip-text, #fff);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-radius: var(--border-radius-md, 8px);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    width: 280px;
    max-width: 90vw;
    text-align: left;
    z-index: var(--z-index-tooltip, 1000);
    box-shadow: var(--shadow-lg, 0 4px 20px rgba(0,0,0,0.25));
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--color-tooltip-bg, var(--dark-bg-secondary));
}

.info-icon:hover .info-tooltip,
.info-icon.active .info-tooltip {
    visibility: visible;
    opacity: 1;
}

.info-tooltip__title {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1, 0.25rem);
    color: var(--color-info-accent, #90caf9);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile: Reposition tooltip */
@media (max-width: 768px) {
    .info-tooltip {
        width: 250px;
        left: auto;
        right: -10px;
        transform: none;
    }

    .info-tooltip::after {
        left: auto;
        right: 20px;
        transform: none;
    }
}

/* Dark Mode - Info Icon */
[data-theme="dark"] .info-icon {
    background: var(--dark-bg-deep-blue);
    color: var(--dark-link);
    border-color: var(--color-blue-500);
}

[data-theme="dark"] .info-icon:hover {
    background: var(--color-blue-500);
    color: white;
}

[data-theme="dark"] .info-tooltip {
    background: var(--color-slate-900);
    border: 1px solid var(--color-slate-700);
}

[data-theme="dark"] .info-tooltip::after {
    border-top-color: var(--color-slate-900);
}

[data-theme="dark"] .info-tooltip__title {
    color: var(--dark-link);
}

/* ============================================
   WEIGHT SLIDERS & INPUTS
   Usage: For scoring weight controls in admin
   ============================================ */

.weight-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.weight-input-row {
    display: grid;
    grid-template-columns: 200px 1fr 60px;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem) 0;
    border-bottom: 1px solid var(--color-border, var(--color-slate-200));
}

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

.weight-label {
    font-size: 0.875rem;
    color: var(--color-text, var(--color-slate-800));
    font-weight: 500;
}

.weight-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border, var(--color-slate-200));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.weight-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary, var(--color-blue-500));
    cursor: pointer;
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.weight-slider::-webkit-slider-thumb:hover {
    box-shadow: var(--shadow-md);
}

.weight-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary, var(--color-blue-500));
    cursor: pointer;
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
}

.weight-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.weight-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary, var(--color-blue-500));
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
}

/* Responsive: Stack on mobile */
@media (max-width: 640px) {
    .weight-input-row {
        grid-template-columns: 1fr auto;
        gap: var(--space-2, 0.5rem);
    }

    .weight-label {
        grid-column: 1 / -1;
    }

    .weight-slider {
        grid-column: 1;
    }

    .weight-value {
        grid-column: 2;
    }
}

/* Dark Mode - Weight Sliders */
[data-theme="dark"] .weight-input-row {
    border-bottom-color: var(--color-slate-600);
}

[data-theme="dark"] .weight-label {
    color: var(--color-slate-200);
}

[data-theme="dark"] .weight-slider {
    background: var(--color-slate-600);
}

[data-theme="dark"] .weight-slider::-webkit-slider-thumb {
    background: var(--color-blue-400);
    border-color: var(--color-slate-800);
}

[data-theme="dark"] .weight-slider::-moz-range-thumb {
    background: var(--color-blue-400);
    border-color: var(--color-slate-800);
}

[data-theme="dark"] .weight-value {
    color: var(--dark-link);
}

/* ============================================
   CHART COMPONENTS
   Consolidated from analytics.html and metrics.html
   ============================================ */

.chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.chart-card {
    background: var(--color-surface);
    padding: var(--space-5);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.chart-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-3);
    color: var(--color-text);
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-3);
}

.chart-container {
    width: 100%;
    /* Let Plotly layout.height control the actual chart height */
    height: auto;
    min-height: 200px;
}

/* Explicit height modifiers for charts that need specific container sizes */
.chart-container--tall {
    height: 600px;
    min-height: 600px;
}

.chart-container--medium {
    height: 450px;
    min-height: 450px;
}

.chart-container--empty {
    height: auto;
    min-height: 120px;
}

/* Dark mode for charts */
[data-theme="dark"] .chart-card {
    background: var(--color-slate-800);
    border-color: var(--color-slate-700);
}

[data-theme="dark"] .chart-card h3 {
    color: var(--color-slate-200);
    border-bottom-color: var(--color-blue-500);
}

/* Chart info icon (tooltip) */
.chart-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: var(--space-2);
    background: var(--color-primary-50, #e3f2fd);
    color: var(--color-primary, #1976d2);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    cursor: help;
    position: relative;
    vertical-align: middle;
    transition: all 0.2s ease;
    border: 1px solid var(--color-primary-200, #90caf9);
}

.chart-info-icon:hover {
    background: var(--color-primary);
    color: white;
    opacity: 0.85;
}

.chart-info-icon .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-bg-secondary);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: normal;
    width: 280px;
    max-width: 90vw;
    text-align: left;
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-index-tooltip, 1000);
    transition: opacity 0.2s, visibility 0.2s;
}

.chart-info-icon .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--dark-bg-secondary);
}

.chart-info-icon:hover .tooltip,
.chart-info-icon.active .tooltip {
    visibility: visible;
    opacity: 1;
}

[data-theme="dark"] .chart-info-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--dark-link);
    border-color: var(--color-blue-500);
}

/* ============================================
   STAT CARD COMPONENTS
   Consolidated from sources.html, audit_log.html, entity_intel.html
   ============================================ */

.stat-card {
    background: var(--color-surface);
    padding: var(--space-4);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--color-border);
}

.stat-card .value,
.stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.stat-card .label,
.stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Larger variant */
.stat-card--lg .value,
.stat-card--lg .stat-card__value {
    font-size: var(--font-size-3xl);
}

/* Dark mode for stat cards */
[data-theme="dark"] .stat-card {
    background: var(--color-slate-800);
    border-color: var(--color-slate-700);
}

[data-theme="dark"] .stat-card .value,
[data-theme="dark"] .stat-card__value {
    color: var(--dark-link);
}

[data-theme="dark"] .stat-card .label,
[data-theme="dark"] .stat-card__label {
    color: var(--color-slate-400);
}

/* ============================================
   ENRICHMENT LINKS
   External database links for CVE, MITRE, etc.
   ============================================ */

.enrichment-link {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-primary);
    padding: 0 var(--space-1);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.enrichment-link:hover {
    background-color: var(--color-primary-light, rgba(33, 150, 243, 0.1));
    text-decoration: none;
}

/* CVE links - danger/red color for security vulnerabilities */
.enrichment-link--cve {
    color: var(--color-danger, #dc2626);
    border-bottom-color: var(--color-danger, #dc2626);
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.enrichment-link--cve:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--color-danger, #dc2626);
}

/* MITRE ATT&CK links - orange for tactics/techniques */
.enrichment-link--mitre {
    color: var(--color-warning, #f59e0b);
    border-bottom-color: var(--color-warning, #f59e0b);
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.enrichment-link--mitre:hover {
    background-color: rgba(245, 158, 11, 0.1);
}

/* Threat Actor links (non-MITRE) - deep orange for threat actors */
.enrichment-link--threat_actor {
    color: var(--color-enrichment-threat-actor);
    border-bottom-color: var(--color-enrichment-threat-actor);
}

.enrichment-link--threat_actor:hover {
    background-color: rgba(234, 88, 12, 0.1);
}

/* Malware family links - fuchsia/magenta for malware */
.enrichment-link--malware {
    color: var(--color-enrichment-malware);
    border-bottom-color: var(--color-enrichment-malware);
}

.enrichment-link--malware:hover {
    background-color: rgba(162, 28, 175, 0.1);
}

/* CWE links - similar to CVE */
.enrichment-link--cwe {
    color: var(--color-danger, #dc2626);
    border-bottom-color: var(--color-danger, #dc2626);
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

/* EUR-Lex/regulation links - official blue */
.enrichment-link--eurlex,
.enrichment-link--regulation {
    color: var(--color-info, #0284c7);
    border-bottom-color: var(--color-info, #0284c7);
}

.enrichment-link--eurlex:hover,
.enrichment-link--regulation:hover {
    background-color: rgba(2, 132, 199, 0.1);
}

/* Dark mode overrides for enrichment links */
[data-theme="dark"] .enrichment-link {
    color: var(--dark-link, #60a5fa);
    border-bottom-color: var(--dark-link, #60a5fa);
}

[data-theme="dark"] .enrichment-link:hover {
    background-color: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .enrichment-link--cve {
    color: var(--color-red-400);
    border-bottom-color: var(--color-red-400);
}

[data-theme="dark"] .enrichment-link--cve:hover {
    background-color: rgba(248, 113, 113, 0.15);
    color: var(--color-red-400);
}

[data-theme="dark"] .enrichment-link--mitre {
    color: var(--color-amber-400);
    border-bottom-color: var(--color-amber-400);
}

[data-theme="dark"] .enrichment-link--mitre:hover {
    background-color: rgba(251, 191, 36, 0.15);
}

[data-theme="dark"] .enrichment-link--threat_actor {
    color: #fb923c;
    border-bottom-color: #fb923c;
}

[data-theme="dark"] .enrichment-link--threat_actor:hover {
    background-color: rgba(251, 146, 60, 0.15);
}

[data-theme="dark"] .enrichment-link--malware {
    color: #e879f9;
    border-bottom-color: #e879f9;
}

[data-theme="dark"] .enrichment-link--malware:hover {
    background-color: rgba(232, 121, 249, 0.15);
}

[data-theme="dark"] .enrichment-link--cwe {
    color: #f87171;
    border-bottom-color: #f87171;
}

[data-theme="dark"] .enrichment-link--eurlex,
[data-theme="dark"] .enrichment-link--regulation {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}

[data-theme="dark"] .enrichment-link--eurlex:hover,
[data-theme="dark"] .enrichment-link--regulation:hover {
    background-color: rgba(56, 189, 248, 0.15);
}

/* SFS (Swedish law) - Gold/Yellow for government documents */
.enrichment-link--sfs {
    color: #b45309;
    border-bottom-color: #b45309;
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.enrichment-link--sfs:hover {
    background-color: rgba(180, 83, 9, 0.1);
}

/* RFC (Internet standards) - Teal for technical standards */
.enrichment-link--rfc {
    color: #0d9488;
    border-bottom-color: #0d9488;
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.enrichment-link--rfc:hover {
    background-color: rgba(13, 148, 136, 0.1);
}

/* Dark mode: SFS */
[data-theme="dark"] .enrichment-link--sfs {
    color: #fbbf24;
    border-bottom-color: #fbbf24;
}

[data-theme="dark"] .enrichment-link--sfs:hover {
    background-color: rgba(251, 191, 36, 0.15);
}

/* Dark mode: RFC */
[data-theme="dark"] .enrichment-link--rfc {
    color: #2dd4bf;
    border-bottom-color: #2dd4bf;
}

[data-theme="dark"] .enrichment-link--rfc:hover {
    background-color: rgba(45, 212, 191, 0.15);
}

/* SOU (Swedish Government Reports) - Amber for government documents */
.enrichment-link--sou {
    color: #d97706;
    border-bottom-color: #d97706;
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.enrichment-link--sou:hover {
    background-color: rgba(217, 119, 6, 0.1);
}

/* Dark mode: SOU */
[data-theme="dark"] .enrichment-link--sou {
    color: #fbbf24;
    border-bottom-color: #fbbf24;
}

[data-theme="dark"] .enrichment-link--sou:hover {
    background-color: rgba(251, 191, 36, 0.15);
}

/* DOI (Digital Object Identifier) - Purple for academic/research */
.enrichment-link--doi {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 0.85em;
}

.enrichment-link--doi:hover {
    background-color: rgba(124, 58, 237, 0.1);
}

/* Dark mode: DOI */
[data-theme="dark"] .enrichment-link--doi {
    color: #a78bfa;
    border-bottom-color: #a78bfa;
}

[data-theme="dark"] .enrichment-link--doi:hover {
    background-color: rgba(167, 139, 250, 0.15);
}

/* ============================================
   Analytics - Empty notices and footnotes
   ============================================ */

.empty-notice {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--space-6);
}

.chart-footnote {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: var(--space-2);
    text-align: center;
}

[data-theme="dark"] .empty-notice,
[data-theme="dark"] .chart-footnote {
    color: var(--dark-text-muted);
}