/* =========================================================================
   Theme Tokens
   ========================================================================= */

:root {
    /* Base theme scope (light/default)
       --f2b-*      -> component tokens used by custom Fail2Ban UI styles.
       --f2b-ui-*   -> utility-override tokens for tailwind classes. */
    --f2b-page-bg: #f3f4f6;
    --f2b-scrollbar-track: #f1f1f1;
    --f2b-scrollbar-thumb: #888;
    --f2b-scrollbar-thumb-hover: #555;
    --f2b-select-border: #d1d5db;
    --f2b-select-bg: #ffffff;
    --f2b-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --f2b-log-highlight-bg: #d97706;
    --f2b-log-highlight-text: #fef3c7;
    --f2b-tooltip-bg: #333;
    --f2b-tooltip-text: #fff;
    --f2b-mark-bg: #fef08a;
    --f2b-mark-text: #111827;
    --f2b-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --f2b-toast-hover-shadow: 0 15px 20px -3px rgba(0, 0, 0, 0.15);
    --f2b-toast-ban-bg: #7f1d1d;
    --f2b-toast-ban-hover-bg: #991b1b;
    --f2b-toast-unban-bg: #14532d;
    --f2b-toast-unban-hover-bg: #166534;
    --f2b-threat-border-strong: #cbd5e1;
    --f2b-threat-border: #e5e7eb;
    --f2b-threat-card-border: #d1d5db;
    --f2b-threat-danger-border: #fca5a5;
    --f2b-threat-safe-border: #86efac;
    --f2b-threat-hero-bg: linear-gradient(120deg, #f8fafc 0%, #eef2ff 100%);
    --f2b-threat-hero-danger-bg: linear-gradient(120deg, #fef2f2 0%, #ffe4e6 100%);
    --f2b-threat-hero-safe-bg: linear-gradient(120deg, #f0fdf4 0%, #dcfce7 100%);
    --f2b-threat-section-bg: #f9fafb;
    --f2b-threat-card-bg: #ffffff;
    --f2b-threat-danger-bg: #fef2f2;
    --f2b-threat-safe-bg: #f0fdf4;
    --f2b-threat-text-title: #0f172a;
    --f2b-threat-text: #111827;
    --f2b-threat-text-muted: #6b7280;
    --f2b-threat-text-soft: #334155;
    --f2b-threat-kicker: #64748b;
    --f2b-threat-raw-bg: #111827;
    --f2b-threat-raw-text: #e5e7eb;

    /* Utility override tokens with light defaults. */
    --f2b-ui-bg-surface: #ffffff;
    --f2b-ui-bg-surface-soft: #f9fafb;
    --f2b-ui-bg-surface-muted: #f3f4f6;
    --f2b-ui-bg-gray-200: #e5e7eb;
    --f2b-ui-bg-gray-300: #d1d5db;
    --f2b-ui-bg-gray-600: #4b5563;
    --f2b-ui-bg-blue-50: #eff6ff;
    --f2b-ui-bg-blue-100: #dbeafe;
    --f2b-ui-bg-blue-500: rgb(59 130 246);
    --f2b-ui-bg-blue-600: rgb(37 99 235);
    --f2b-ui-bg-blue-700: rgb(29 78 216);
    --f2b-ui-bg-green-600: #16a34a;
    --f2b-ui-bg-red-500: #ef4444;
    --f2b-ui-bg-green-soft: #ecfdf5;
    --f2b-ui-bg-amber-100: #fef3c7;
    --f2b-ui-bg-yellow-soft: #fefce8;
    --f2b-ui-bg-red-soft: #fef2f2;
    --f2b-ui-bg-hover: #f3f4f6;
    --f2b-ui-bg-blue-50-hover: #dbeafe;
    --f2b-ui-bg-blue-500-hover: rgb(37 99 235);
    --f2b-ui-bg-blue-600-hover: rgb(29 78 216);
    --f2b-ui-bg-blue-700-hover: rgb(30 64 175);
    --f2b-ui-bg-red-50-hover: #fef2f2;
    --f2b-ui-border: #d1d5db;
    --f2b-ui-text: #111827;
    --f2b-ui-text-muted: #6b7280;
    --f2b-ui-link: #2563eb;
    --f2b-ui-link-hover: #1d4ed8;
    --f2b-ui-text-blue-700: #1d4ed8;
    --f2b-ui-text-blue-800: #1e40af;
    --f2b-ui-text-amber-600: #d97706;
    --f2b-ui-text-amber-700: #b45309;
    --f2b-ui-text-yellow: #a16207;
    --f2b-ui-text-yellow-800: #854d0e;
    --f2b-ui-text-red: #b91c1c;
    --f2b-ui-text-green: #166534;
    --f2b-ui-text-red-600: #dc2626;
    --f2b-ui-text-green-600: #16a34a;
    --f2b-ui-input-bg: #ffffff;
    --f2b-ui-input-placeholder: #9ca3af;
    --f2b-ui-ring-offset: #ffffff;
    --f2b-ui-ring-color: rgba(59, 130, 246, 0.5);
    --f2b-ui-jail-toggle-track-bg: #e5e7eb;
    --f2b-ui-jail-toggle-track-border: #d1d5db;
    --f2b-ui-jail-toggle-track-checked-bg: #2563eb;
    --f2b-ui-jail-toggle-track-checked-border: #3b82f6;
    --f2b-ui-jail-toggle-thumb-bg: #ffffff;
    --f2b-ui-jail-toggle-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    --f2b-ui-modal-backdrop: rgba(107, 114, 128, 0.75);
    --f2b-ui-bg-yellow-500: #eab308;
    --f2b-ui-bg-yellow-600-hover: #ca8a04;
    --f2b-ui-bg-red-600: #dc2626;
    --f2b-ui-bg-red-700-hover: #b91c1c;
    --f2b-ui-footer-bg: #f9fafb;
    --f2b-ui-code-text: #1f2937;
    --f2b-ui-ws-tooltip-bg: #1f2937;
    --f2b-ui-select2-choice-text: #ffffff;
    --f2b-ui-select2-arrow: #6b7280;
    --f2b-ui-select2-option-text: #111827;
    --f2b-ui-select2-option-selected-bg: #e5e7eb;
    --f2b-ui-select2-option-selected-text: #1f2937;
    --f2b-ui-select2-option-highlight-bg: #2563eb;
    --f2b-ui-select2-option-highlight-text: #ffffff;
    --f2b-ui-theme-badge-warning-bg: #fef3c7;
    --f2b-ui-theme-badge-warning-text: #92400e;
    --f2b-ui-theme-badge-warning-hover-bg: #fde68a;
    --f2b-ui-theme-badge-success-bg: #dcfce7;
    --f2b-ui-theme-badge-success-text: #166534;
    --f2b-ui-prism-bg: #f8fafc;
    --f2b-ui-toast-success-bg: #047857;
    --f2b-ui-toast-info-bg: #1d4ed8;
    --f2b-ui-toast-warning-bg: #d97706;
}

html[data-theme="dark"] body:not(.lotr-mode) {
    /* Dark theme scope.
       Same two token groups as :root, but with dark values.
       --f2b-*  -> custom component tokens for dark mode
       --f2b-ui-* -> utility class overrides for tailwind classes in dark mode */
    --f2b-page-bg: #0b1220;
    --f2b-scrollbar-track: #1f2937;
    --f2b-scrollbar-thumb: #475569;
    --f2b-scrollbar-thumb-hover: #64748b;
    --f2b-select-border: #334155;
    --f2b-select-bg: #111827;
    --f2b-modal-shadow: 0 20px 38px -10px rgba(2, 6, 23, 0.72), 0 10px 18px -8px rgba(2, 6, 23, 0.58);
    --f2b-log-highlight-bg: #92400e;
    --f2b-log-highlight-text: #fde68a;
    --f2b-tooltip-bg: #0f172a;
    --f2b-tooltip-text: #e2e8f0;
    --f2b-mark-bg: #92400e;
    --f2b-mark-text: #fde68a;
    --f2b-toast-shadow: 0 12px 24px -8px rgba(2, 6, 23, 0.6);
    --f2b-toast-hover-shadow: 0 16px 28px -8px rgba(2, 6, 23, 0.68);
    --f2b-toast-ban-bg: #7f1d1d;
    --f2b-toast-ban-hover-bg: #991b1b;
    --f2b-toast-unban-bg: #14532d;
    --f2b-toast-unban-hover-bg: #166534;
    --f2b-threat-border-strong: #334155;
    --f2b-threat-border: #374151;
    --f2b-threat-card-border: #475569;
    --f2b-threat-danger-border: #7f1d1d;
    --f2b-threat-safe-border: #166534;
    --f2b-threat-hero-bg: linear-gradient(120deg, #111827 0%, #1e293b 100%);
    --f2b-threat-hero-danger-bg: linear-gradient(120deg, #2d1117 0%, #3d1a1d 100%);
    --f2b-threat-hero-safe-bg: linear-gradient(120deg, #0f2d27 0%, #123d33 100%);
    --f2b-threat-section-bg: #1f2937;
    --f2b-threat-card-bg: #111827;
    --f2b-threat-danger-bg: #2d1117;
    --f2b-threat-safe-bg: #0f2d27;
    --f2b-threat-text-title: #e2e8f0;
    --f2b-threat-text: #e5e7eb;
    --f2b-threat-text-muted: #94a3b8;
    --f2b-threat-text-soft: #cbd5e1;
    --f2b-threat-kicker: #93c5fd;
    --f2b-threat-raw-bg: #020617;
    --f2b-threat-raw-text: #cbd5e1;

    --f2b-ui-bg-surface: #151e30;
    /* --f2b-ui-bg-surface-soft: #192639; */
    --f2b-ui-bg-surface-soft: #1f2a41;
    --f2b-ui-bg-surface-muted: #223248;
    --f2b-ui-bg-gray-200: #344b68;
    --f2b-ui-bg-gray-300: #3e5674;
    --f2b-ui-bg-gray-600: #4d6078;
    --f2b-ui-bg-blue-50: #1d314b;
    --f2b-ui-bg-blue-100: #233a58;
    --f2b-ui-bg-blue-500: rgb(52 85 150);
    --f2b-ui-bg-blue-600: rgb(45 73 134);
    --f2b-ui-bg-blue-700: rgb(39 64 118);
    --f2b-ui-bg-green-600: #1a4129;
    --f2b-ui-bg-red-500: #813535;
    --f2b-ui-bg-green-soft: #113329;
    --f2b-ui-bg-amber-100: #4a3310;
    --f2b-ui-bg-yellow-soft: #3f3113;
    --f2b-ui-bg-red-soft: #3a1a20;
    --f2b-ui-bg-hover: #253a55;
    --f2b-ui-bg-blue-50-hover: #2a4566;
    --f2b-ui-bg-blue-500-hover: rgb(45 73 134);
    --f2b-ui-bg-blue-600-hover: rgb(39 64 118);
    --f2b-ui-bg-blue-700-hover: rgb(33 56 103);
    --f2b-ui-bg-red-50-hover: #4a1e27;
    --f2b-ui-border: #334a67;
    --f2b-ui-text: #e6edf7;
    --f2b-ui-text-muted: #9cb1c9;
    --f2b-ui-link: #7cc2ff;
    --f2b-ui-link-hover: #a9d7ff;
    --f2b-ui-text-blue-700: #93c5fd;
    --f2b-ui-text-blue-800: #bfdbfe;
    --f2b-ui-text-amber-600: #f59e0b;
    --f2b-ui-text-amber-700: #fcd34d;
    --f2b-ui-text-yellow: #fcd34d;
    --f2b-ui-text-yellow-800: #fde68a;
    --f2b-ui-text-red: #fca5a5;
    --f2b-ui-text-green: #86efac;
    --f2b-ui-text-red-600: #fca5a5;
    --f2b-ui-text-green-600: #86efac;
    --f2b-ui-input-bg: #101a2a;
    --f2b-ui-input-placeholder: #6e88a5;
    --f2b-ui-ring-offset: #101a2a;
    --f2b-ui-ring-color: rgba(96, 165, 250, 0.45);
    --f2b-ui-jail-toggle-track-bg: #2a3d58;
    --f2b-ui-jail-toggle-track-border: #456182;
    --f2b-ui-jail-toggle-track-checked-bg: #1d4ed8;
    --f2b-ui-jail-toggle-track-checked-border: #3b82f6;
    --f2b-ui-jail-toggle-thumb-bg: #e6edf7;
    --f2b-ui-jail-toggle-thumb-shadow: 0 1px 3px rgba(2, 6, 23, 0.6);
    --f2b-ui-modal-backdrop: rgba(2, 6, 23, 0.76);
    --f2b-ui-bg-yellow-500: #a16207;
    --f2b-ui-bg-yellow-600-hover: #ca8a04;
    --f2b-ui-bg-red-600: #991b1b;
    --f2b-ui-bg-red-700-hover: #b91c1c;
    --f2b-ui-footer-bg: #121c2d;
    --f2b-ui-code-text: #dbe7f4;
    --f2b-ui-ws-tooltip-bg: #0f172a;
    --f2b-ui-select2-choice-text: #eaf2ff;
    --f2b-ui-select2-arrow: #9cb1c9;
    --f2b-ui-select2-option-text: #d3dfec;
    --f2b-ui-select2-option-selected-bg: #22344e;
    --f2b-ui-select2-option-selected-text: #9ecaff;
    --f2b-ui-select2-option-highlight-bg: #1d4ed8;
    --f2b-ui-select2-option-highlight-text: #fff;
    --f2b-ui-theme-badge-warning-bg: #78350f;
    --f2b-ui-theme-badge-warning-text: #fcd34d;
    --f2b-ui-theme-badge-warning-hover-bg: #92400e;
    --f2b-ui-theme-badge-success-bg: #14532d;
    --f2b-ui-theme-badge-success-text: #bbf7d0;
    --f2b-ui-prism-bg: #020617;
    --f2b-ui-toast-success-bg: #14532d;
    --f2b-ui-toast-info-bg: #1e40af;
    --f2b-ui-toast-warning-bg: #a16207;

    background-color: var(--f2b-page-bg);
    color: var(--f2b-ui-text);
}

html[data-theme="dark"] body:not(.lotr-mode) #mainContent,
html[data-theme="dark"] body:not(.lotr-mode) #loginPage {
    background-color: transparent;
}

html[data-theme="dark"] body:not(.lotr-mode) .bg-white { background-color: var(--f2b-ui-bg-surface) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-gray-50 { background-color: var(--f2b-ui-bg-surface-soft) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-gray-100 { background-color: var(--f2b-ui-bg-surface-muted) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-gray-200 { background-color: var(--f2b-ui-bg-gray-200) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-gray-300 { background-color: var(--f2b-ui-bg-gray-300) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-gray-600 { background-color: var(--f2b-ui-bg-gray-600) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-blue-50 { background-color: var(--f2b-ui-bg-blue-50) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-blue-100 { background-color: var(--f2b-ui-bg-blue-100) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-blue-500 { background-color: var(--f2b-ui-bg-blue-500) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-blue-600 { background-color: var(--f2b-ui-bg-blue-600) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-blue-700 { background-color: var(--f2b-ui-bg-blue-700) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-red-500 { background-color: var(--f2b-ui-bg-red-500) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-green-600 { background-color: var(--f2b-ui-bg-green-600) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-amber-100 { background-color: var(--f2b-ui-bg-amber-100) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-green-50,
html[data-theme="dark"] body:not(.lotr-mode) .bg-green-100 { background-color: var(--f2b-ui-bg-green-soft) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-yellow-50,
html[data-theme="dark"] body:not(.lotr-mode) .bg-yellow-100 { background-color: var(--f2b-ui-bg-yellow-soft) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-red-50,
html[data-theme="dark"] body:not(.lotr-mode) .bg-red-100 { background-color: var(--f2b-ui-bg-red-soft) !important; }

html[data-theme="dark"] body:not(.lotr-mode) .border-gray-100,
html[data-theme="dark"] body:not(.lotr-mode) .border-gray-200,
html[data-theme="dark"] body:not(.lotr-mode) .border-gray-300 {
    border-color: var(--f2b-ui-border) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .text-gray-900,
html[data-theme="dark"] body:not(.lotr-mode) .text-gray-800,
html[data-theme="dark"] body:not(.lotr-mode) .text-gray-700 { color: var(--f2b-ui-text) !important; }

html[data-theme="dark"] body:not(.lotr-mode) .text-gray-600,
html[data-theme="dark"] body:not(.lotr-mode) .text-gray-500,
html[data-theme="dark"] body:not(.lotr-mode) .text-gray-400 { color: var(--f2b-ui-text-muted) !important; }

html[data-theme="dark"] body:not(.lotr-mode) .text-blue-600 { color: var(--f2b-ui-link) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-blue-700 { color: var(--f2b-ui-text-blue-700) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-blue-800 { color: var(--f2b-ui-text-blue-800) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:text-blue-800:hover { color: var(--f2b-ui-link-hover) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-amber-600 { color: var(--f2b-ui-text-amber-600) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-amber-700 { color: var(--f2b-ui-text-amber-700) !important; }

html[data-theme="dark"] body:not(.lotr-mode) .text-yellow-700 { color: var(--f2b-ui-text-yellow) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-yellow-800 { color: var(--f2b-ui-text-yellow-800) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-red-700,
html[data-theme="dark"] body:not(.lotr-mode) .text-red-800 { color: var(--f2b-ui-text-red) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-green-800 { color: var(--f2b-ui-text-green) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-red-600 { color: var(--f2b-ui-text-red-600) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .text-green-600 { color: var(--f2b-ui-text-green-600) !important; }

html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-gray-50:hover,
html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-gray-100:hover,
html[data-theme="dark"] body:not(.lotr-mode) tr.hover\:bg-gray-50:hover {
    background-color: var(--f2b-ui-bg-hover) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-blue-50:hover { background-color: var(--f2b-ui-bg-blue-50-hover) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-blue-500:hover { background-color: var(--f2b-ui-bg-blue-500-hover) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-blue-600:hover { background-color: var(--f2b-ui-bg-blue-600-hover) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-blue-700:hover { background-color: var(--f2b-ui-bg-blue-700-hover) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-red-50:hover { background-color: var(--f2b-ui-bg-red-50-hover) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:text-gray-600:hover { color: var(--f2b-ui-text) !important; }

html[data-theme="dark"] body:not(.lotr-mode) input,
html[data-theme="dark"] body:not(.lotr-mode) textarea,
html[data-theme="dark"] body:not(.lotr-mode) select {
    background-color: var(--f2b-ui-input-bg);
    color: var(--f2b-ui-text);
    border-color: var(--f2b-ui-border);
}

html[data-theme="dark"] body:not(.lotr-mode) input::placeholder,
html[data-theme="dark"] body:not(.lotr-mode) textarea::placeholder { color: var(--f2b-ui-input-placeholder); }

html[data-theme="dark"] body:not(.lotr-mode) .focus\:ring-offset-2:focus,
html[data-theme="dark"] body:not(.lotr-mode) .focus\:ring-offset-white:focus {
    --tw-ring-offset-color: var(--f2b-ui-ring-offset);
}

html[data-theme="dark"] body:not(.lotr-mode) .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--f2b-ui-ring-color);
}

html[data-theme="dark"] body:not(.lotr-mode) .jail-toggle-track {
    background-color: var(--f2b-ui-jail-toggle-track-bg) !important;
    border: 1px solid var(--f2b-ui-jail-toggle-track-border);
}

html[data-theme="dark"] body:not(.lotr-mode) .peer:checked + .jail-toggle-track {
    background-color: var(--f2b-ui-jail-toggle-track-checked-bg) !important;
    border-color: var(--f2b-ui-jail-toggle-track-checked-border);
}

html[data-theme="dark"] body:not(.lotr-mode) .jail-toggle-thumb {
    background-color: var(--f2b-ui-jail-toggle-thumb-bg) !important;
    box-shadow: var(--f2b-ui-jail-toggle-thumb-shadow);
}

html[data-theme="dark"] body:not(.lotr-mode) .modal-content {
    background-color: var(--f2b-ui-bg-surface) !important;
    border: 1px solid var(--f2b-ui-border);
}

html[data-theme="dark"] body:not(.lotr-mode) [aria-hidden="true"].fixed.inset-0.bg-gray-500.opacity-75 {
    background-color: var(--f2b-ui-modal-backdrop) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .bg-yellow-500 { background-color: var(--f2b-ui-bg-yellow-500) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-yellow-600:hover { background-color: var(--f2b-ui-bg-yellow-600-hover) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .bg-red-600 { background-color: var(--f2b-ui-bg-red-600) !important; }
html[data-theme="dark"] body:not(.lotr-mode) .hover\:bg-red-700:hover { background-color: var(--f2b-ui-bg-red-700-hover) !important; }

html[data-theme="dark"] body:not(.lotr-mode) #footer {
    background-color: var(--f2b-ui-footer-bg) !important;
    border-top: 1px solid var(--f2b-ui-border);
}

html[data-theme="dark"] body:not(.lotr-mode) #footer .text-gray-600 { color: var(--f2b-ui-text-muted) !important; }
html[data-theme="dark"] body:not(.lotr-mode) #footer a { color: var(--f2b-ui-link) !important; }
html[data-theme="dark"] body:not(.lotr-mode) #footer a:hover { color: var(--f2b-ui-link-hover) !important; }

html[data-theme="dark"] body:not(.lotr-mode) pre,
html[data-theme="dark"] body:not(.lotr-mode) code { color: var(--f2b-ui-code-text); }

html[data-theme="dark"] body:not(.lotr-mode) #wsTooltip {
    background: var(--f2b-ui-ws-tooltip-bg) !important;
    border-color: var(--f2b-ui-border) !important;
    color: var(--f2b-ui-text) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-selection--single,
html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-selection--multiple {
    background-color: var(--f2b-ui-input-bg);
    border-color: var(--f2b-ui-border);
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--f2b-ui-text);
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--f2b-ui-bg-blue-600);
    border-color: var(--f2b-ui-bg-blue-600);
    color: var(--f2b-ui-select2-choice-text);
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--f2b-ui-select2-arrow) transparent transparent transparent;
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-dropdown {
    background-color: var(--f2b-ui-input-bg);
    border-color: var(--f2b-ui-border);
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-results__option {
    color: var(--f2b-ui-select2-option-text);
    background-color: transparent;
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--f2b-ui-select2-option-selected-bg);
    color: var(--f2b-ui-select2-option-selected-text);
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--f2b-ui-select2-option-highlight-bg);
    color: var(--f2b-ui-select2-option-highlight-text);
}

html[data-theme="dark"] body:not(.lotr-mode) .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--f2b-ui-ws-tooltip-bg);
    border-color: var(--f2b-ui-border);
    color: var(--f2b-ui-text);
}

html[data-theme="dark"] body:not(.lotr-mode) .theme-badge-warning {
    background-color: var(--f2b-ui-theme-badge-warning-bg) !important;
    color: var(--f2b-ui-theme-badge-warning-text) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .theme-badge-warning:hover { background-color: var(--f2b-ui-theme-badge-warning-hover-bg) !important; }

html[data-theme="dark"] body:not(.lotr-mode) .theme-badge-success {
    background-color: var(--f2b-ui-theme-badge-success-bg) !important;
    color: var(--f2b-ui-theme-badge-success-text) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .toast-success {
    background-color: var(--f2b-ui-toast-success-bg) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .toast-info {
    background-color: var(--f2b-ui-toast-info-bg) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) .toast-warning {
    background-color: var(--f2b-ui-toast-warning-bg) !important;
}

html[data-theme="dark"] body:not(.lotr-mode) pre[class*="language-"],
html[data-theme="dark"] body:not(.lotr-mode) code[class*="language-"] { background: var(--f2b-ui-prism-bg); }

html[data-theme="dark"] body:not(.lotr-mode) .token.operator,
html[data-theme="dark"] body:not(.lotr-mode) .token.entity,
html[data-theme="dark"] body:not(.lotr-mode) .token.url,
html[data-theme="dark"] body:not(.lotr-mode) .language-css .token.string,
html[data-theme="dark"] body:not(.lotr-mode) .style .token.string { background: transparent; }

/* =========================================================================
   Loading Overlay
   ========================================================================= */

#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

#loading-overlay.show {
    display: flex;
    opacity: 1;
}

/* =========================================================================
   Auth Page
   ========================================================================= */

#loginPage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--f2b-page-bg);
    padding: 3rem 1rem;
    position: relative;
    z-index: 1;
}

#loginPage.hidden {
    display: none !important;
}

#mainContent.hidden {
    display: none !important;
}

nav.hidden {
    display: none !important;
}

#footer.hidden {
    display: none !important;
}

body[data-oidc-enabled="false"] #loginPage {
    display: none !important;
    visibility: hidden !important;
}

body[data-skip-login-page="true"] #loginPage {
    display: none !important;
    visibility: hidden !important;
}

body:has(#loginPage:not(.hidden)) {
    background-color: var(--f2b-page-bg);
    overflow: hidden;
}

/* =========================================================================
   Layout
   ========================================================================= */

#restartBanner {
    display: none;
}

#serverManagerList {
    min-height: 480px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--f2b-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--f2b-scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--f2b-scrollbar-thumb-hover);
}

/* =========================================================================
   Select2 Overrides
   ========================================================================= */

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--f2b-select-border);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    min-height: 42px;
    background-color: var(--f2b-select-bg);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3b82f6;
    border: 1px solid #3b82f6;
    color: white;
    border-radius: 0.25rem;
    padding: 0 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    margin-right: 0.25rem;
}

/* =========================================================================
   Modals
   ========================================================================= */

.modal-content {
    box-shadow: var(--f2b-modal-shadow);
}

.logs-highlighted-line {
    display: block;
    background-color: var(--f2b-log-highlight-bg);
    color: var(--f2b-log-highlight-text);
    padding: 0.25rem 0.5rem;
    margin: 0.125rem 0;
    border-radius: 0.25rem;
}

body.modal-open {
    overflow: hidden !important;
}

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

.threat-intel-hero {
    border: 1px solid var(--f2b-threat-border-strong);
    border-radius: 0.75rem;
    background: var(--f2b-threat-hero-bg);
    padding: 1rem;
    margin-bottom: 0.9rem;
}

.threat-intel-hero.threat-intel-card-danger {
    border-color: var(--f2b-threat-danger-border);
    background: var(--f2b-threat-hero-danger-bg);
}

.threat-intel-hero.threat-intel-card-safe {
    border-color: var(--f2b-threat-safe-border);
    background: var(--f2b-threat-hero-safe-bg);
}

.threat-intel-hero-main {
    margin-bottom: 0.8rem;
}

.threat-intel-hero-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--f2b-threat-kicker);
    font-weight: 700;
}

.threat-intel-hero-title {
    margin-top: 0.25rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--f2b-threat-text-title);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.threat-intel-hero-subtitle {
    margin-top: 0.25rem;
    font-size: 0.88rem;
    color: var(--f2b-threat-text-soft);
}

.threat-intel-priority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.6rem;
}

.threat-intel-section {
    border: 1px solid var(--f2b-threat-border);
    border-radius: 0.5rem;
    background: var(--f2b-threat-section-bg);
    padding: 1rem;
    margin-bottom: 0.9rem;
}

.threat-intel-section h4 {
    font-weight: 600;
    color: var(--f2b-threat-text);
    margin-bottom: 0.75rem;
}

.threat-intel-card {
    border: 1px solid var(--f2b-threat-card-border);
    border-radius: 0.5rem;
    background: var(--f2b-threat-card-bg);
    padding: 0.75rem;
}

.threat-intel-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--f2b-threat-text-muted);
}

.threat-intel-card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--f2b-threat-text);
    margin-top: 0.25rem;
}

.threat-intel-card-compact .threat-intel-card-value {
    font-size: 1rem;
}

.threat-intel-card-text {
    font-size: 0.95rem;
    color: var(--f2b-threat-text);
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

.threat-intel-card-danger {
    border-color: var(--f2b-threat-danger-border);
    background: var(--f2b-threat-danger-bg);
}

.threat-intel-card-safe {
    border-color: var(--f2b-threat-safe-border);
    background: var(--f2b-threat-safe-bg);
}

.threat-intel-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.threat-intel-list.hidden {
    display: none;
}

.threat-intel-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--f2b-threat-border);
    border-radius: 0.375rem;
    background: var(--f2b-threat-card-bg);
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
}

.threat-intel-raw {
    margin-top: 0.75rem;
    border: 1px solid var(--f2b-threat-card-border);
    border-radius: 0.5rem;
    background: var(--f2b-threat-raw-bg);
    color: var(--f2b-threat-raw-text);
    padding: 0.75rem;
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* =========================================================================
   Tooltips
   ========================================================================= */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: var(--f2b-tooltip-bg);
    color: var(--f2b-tooltip-text);
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* =========================================================================
   Search Highlights
   ========================================================================= */

mark {
    background-color: var(--f2b-mark-bg);
    color: var(--f2b-mark-text);
    padding: 0.1em 0em 0.1em 0.2em;
    border-radius: 0.25em;
}

/* =========================================================================
   Toast Notifications
   ========================================================================= */

#toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 10000;
    pointer-events: none;
}

.toast {
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #fff;
    pointer-events: auto;
    font-weight: 500;
    box-shadow: var(--f2b-toast-shadow);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background-color: #047857;
}

.toast-error {
    background-color: #b91c1c;
}

.toast-info {
    background-color: #1d4ed8;
}

.toast-warning {
    background-color: #d97706;
}

.toast-ban-event {
    background-color: var(--f2b-toast-ban-bg);
    pointer-events: auto;
    cursor: pointer;
}

.toast-ban-event:hover {
    background-color: var(--f2b-toast-ban-hover-bg);
    transform: translateY(-2px);
    box-shadow: var(--f2b-toast-hover-shadow);
}

.toast-unban-event {
    background-color: var(--f2b-toast-unban-bg);
    pointer-events: auto;
    cursor: pointer;
}

.toast-unban-event:hover {
    background-color: var(--f2b-toast-unban-hover-bg);
    transform: translateY(-2px);
    box-shadow: var(--f2b-toast-hover-shadow);
}

/* =========================================================================
   Status Indicator
   ========================================================================= */

#backendStatus {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    margin-left: 5px;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

#statusDot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulse 2s infinite;
}

#statusDot.bg-green-500 {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulseGreen 2s infinite;
}

#statusDot.bg-yellow-500 {
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7);
    animation: pulseYellow 2s infinite;
}

#statusDot.bg-red-500 {
    box-shadow: 0 0 0 0 rgb(163 44 44);
    animation: pulseRed 2s infinite;
}

#statusDot.bg-gray-400 {
    animation: none;
}

#statusText {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

@keyframes pulseGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes pulseYellow {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7);
    }
    70% {
        box-shadow: 0 0 0 4px rgba(234, 179, 8, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
    }
}

@keyframes pulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* =========================================================================
   Clock
   ========================================================================= */

#clockDisplay {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

#clockDisplay:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

#clockTime {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =========================================================================
   Responsive Overrides
   ========================================================================= */

/* Override Tailwind md: (768px) to collapse menu at 830px */
@media (max-width: 830px) {
    nav .hidden.md\:block {
        display: none !important;
    }

    nav > div > div > div.md\:hidden:not(#mobileMenu) {
        display: block !important;
    }

    nav #mobileMenu:not(.hidden) {
        display: block !important;
    }

    nav #mobileMenu.hidden {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #backendStatus {
        padding: 0.125rem 0.375rem;
    }

    #statusText {
        font-size: 0.625rem;
    }

    #clockDisplay {
        padding: 0.125rem 0.5rem;
    }

    #clockTime {
        font-size: 0.75rem;
    }
}

/* =========================================================================
   Integration Fields
   ========================================================================= */

#advancedMikrotikFields, #advancedPfSenseFields, #advancedOPNsenseFields {
    padding: 10px;
}

/* =========================================================================
   Font Awesome Fallback
   ========================================================================= */

/* Ensure icons render when FA is loaded async or partially */
.fas, .far, .fab, .fal, .fad {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fas::before {
    font-weight: 900;
}

button .fas, button .far, button .fab {
    display: inline-block;
    width: 1em;
    text-align: center;
    margin-right: 0.25rem;
}

button .fas:only-child, button .far:only-child, button .fab:only-child {
    margin-right: 0;
}

/* =========================================================================
   WebSocket Tooltip
   ========================================================================= */

#wsTooltip {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}

/* =========================================================================
   Ignore IPs
   ========================================================================= */

/* Prevent horizontal overflow on long IP lists */
#ignoreIPsContainer {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#ignoreIPsTags {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ignore-ip-tag {
    max-width: 100%;
    word-break: break-all;
    overflow-wrap: anywhere;
}