:root {
    --bg-color: #f8fafc;
    --text-color: #0f172a;
    --border-color: #e2e8f0;
    --sidebar-bg: #ffffff;
    --sidebar-width: 350px;
    --highlight-bg: #eff6ff;
    --highlight-border: #3b82f6;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --success: #16a34a;
    --danger: #dc2626;
    --card-bg: #ffffff;
    --card-hover: #f1f5f9;
    --card-title: #1e293b;
    --muted-color: #64748b;
    --link-color: #2563eb;
    --link-hover: #1d4ed8;
    --diff-bg: #ffffff;
    --diff-fg: #0f172a;
    --flagged-bg: rgba(254, 242, 242, 0.7);
    --flagged-hover: rgba(254, 226, 226, 1);
    --flagged-active: rgba(254, 202, 202, 0.5);
}

[data-theme="dark"] {
    --bg-color: #0b1220;
    --text-color: #e2e8f0;
    --border-color: #334155;
    --sidebar-bg: #111827;
    --highlight-bg: #172554;
    --highlight-border: #60a5fa;
    --danger-bg: rgba(239, 68, 68, 0.18);
    --success: #4ade80;
    --danger: #f87171;
    --card-bg: #0f172a;
    --card-hover: #1e293b;
    --card-title: #e2e8f0;
    --muted-color: #c3cede;
    --link-color: #93c5fd;
    --link-hover: #bfdbfe;
    --diff-bg: #0f172a;
    --diff-fg: #e2e8f0;
    --flagged-bg: rgba(127, 29, 29, 0.3);
    --flagged-hover: rgba(127, 29, 29, 0.45);
    --flagged-active: rgba(153, 27, 27, 0.52);
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover);
}

.app-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    flex-direction: row;
}

/* --- Sidebar (Queue) --- */
.event-queue {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.queue-header {
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--muted-color);
}

.queue-list {
    overflow-y: auto;
}

/* Event Card Logic */
.event-card {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.event-card:hover {
    background-color: var(--card-hover);
}

.event-card.active {
    background-color: var(--highlight-bg);
    border-left: 4px solid var(--highlight-border);
}

.event-card.flagged-card {
    background-color: var(--flagged-bg);
}

.event-card.flagged-card:hover {
    background-color: var(--flagged-hover);
}

.event-card.flagged-card.active {
    background-color: var(--flagged-active);
    border-left-color: var(--danger);
}


/* Text Utilities */
.text-diff-pos {
    color: var(--success);
    font-weight: 600;
}

.text-diff-neg {
    color: var(--danger);
    font-weight: 600;
}

.text-diff-neu {
    color: var(--muted-color);
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
    word-wrap: break-word;
    color: var(--card-title);
}

.card-meta {
    font-size: 0.8rem;
    color: var(--muted-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Main Area (Diff Viewer) --- */
.diff-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-color);
}

.diff-header {
    height: 50px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 5;
}

/* Iframe Container */
.diff-content {
    background-color: var(--bg-color) !important;
}

/* Welcome Message */
#welcomeMessage {
    color: var(--muted-color);
}

iframe {
    background: var(--diff-bg);
}

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

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

[data-theme="dark"] .form-text,
[data-theme="dark"] .modal-body small,
[data-theme="dark"] .small,
[data-theme="dark"] .card-meta,
[data-theme="dark"] .queue-header small {
    color: var(--muted-color) !important;
}

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

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: #111827 !important;
}

[data-theme="dark"] .list-group-item,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .card,
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .page-link,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #0f172a !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .table thead {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .navbar {
    background-color: rgba(15, 23, 42, 0.86) !important;
    border-bottom: 1px solid #334155 !important;
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.35) !important;
}

[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active,
[data-theme="dark"] .navbar .text-secondary,
[data-theme="dark"] .navbar .text-dark {
    color: #dbeafe !important;
}

[data-theme="dark"] .text-primary-emphasis {
    color: #93c5fd !important;
}

[data-theme="dark"] .bg-primary-subtle {
    background-color: rgba(30, 58, 138, 0.22) !important;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: #2563eb !important;
    color: #eaf2ff !important;
}

[data-theme="dark"] .navbar-light .navbar-toggler {
    border-color: #475569;
}

[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(190%);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: #b8c5d8 !important;
    opacity: 1;
}

[data-theme="dark"] .cm-editor {
    background-color: #0b1220 !important;
    color: #dbeafe !important;
    border: 1px solid #334155;
}

[data-theme="dark"] .cm-scroller,
[data-theme="dark"] .cm-content {
    background-color: #0b1220 !important;
    color: #dbeafe !important;
}

[data-theme="dark"] .cm-gutters {
    background-color: #111827 !important;
    border-right: 1px solid #334155 !important;
    color: #93a4bd !important;
}

[data-theme="dark"] .cm-activeLine,
[data-theme="dark"] .cm-activeLineGutter {
    background-color: #1e293b !important;
}

[data-theme="dark"] .cm-cursor {
    border-left-color: #f8fafc !important;
}

[data-theme="dark"] .cm-selectionBackground,
[data-theme="dark"] .cm-content ::selection {
    background: rgba(59, 130, 246, 0.35) !important;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .app-layout {
        position: relative;
    }

    .diff-header {
        height: auto;
        min-height: 50px;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .global-controls {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Off-Canvas Sidebar */
    .event-queue {
        position: fixed;
        width: 85%;
        max-width: 350px;
        top: 0;
        bottom: 0;
        right: -100%;
        z-index: 1000;
        transition: right 0.3s ease-in-out;
        border-left: 1px solid var(--border-color);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        border-right: none;
    }

    .event-queue.show-menu {
        right: 0;
    }

    .diff-viewer {
        display: flex !important;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .mobile-hidden {
        display: none !important;
    }

    .menu-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 900;
        display: none;
    }

    .menu-backdrop.show {
        display: block;
    }
}

.btn-xs {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

/* Utility Classes */
.transition-colors {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.cursor-pointer {
    cursor: pointer;
}

.avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}